Merge pull request #157 from manifoldco/drosati/add-latest-version-to…

…-plan-componenet

add version attribute with latest value for latest product/plan verisons

CHANGELOG.md

@@ -10,6 +10,7 @@ adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 ### Changed
 
 - Firing a CTAClick event when CTA is clicked
+- Add version attribute to get latest product and plan versions (currently only works with "latest" value).
 
 ## [0.2.0] - 2020-04-01
 

README.md

@@ -75,6 +75,7 @@ Options are passed to the component in the form of HTML Attributes:
 | `client-id`  |    Y     | Your Account identifier (this helps us associate analytics to your account)                                     | `<manifold-plan-table client-id="284ablb7scfm8oxwz9wrxpt2q0jii">`  |
 | `base-url`   |          | The URL the buttons link to (plan ID & user selection will be appended to the end of the URL in a query string) | `<manifold-plan-table base-url="/checkout">`                       |
 | `cta-text`   |          | Change the ”Getting Started” default text.                                                                      | `<manifold-plan-table cta-text="Buy Now!">`                        |
+| `version`   |          | The version of your product (omit for latest published product). Use `version="latest"` for the latest draft.                                                                       | `<manifold-plan-table version="1">`                        |
 
 ## TypeScript + JSX
 

package.json

@@ -51,7 +51,7 @@
     "@storybook/addon-knobs": "^5.3.17",
     "@storybook/addons": "^5.3.17",
     "@storybook/html": "^5.3.17",
-    "@types/jest": "24.0.25",
+    "@types/jest": "24.9.1",
     "@typescript-eslint/eslint-plugin": "^2.20.0",
     "@typescript-eslint/parser": "^2.20.0",
     "babel-loader": "^8.0.6",

src/components.d.ts

@@ -13,6 +13,7 @@ export namespace Components {
         "env"?: "stage" | "local" | "prod";
         "gatewayUrl"?: string;
         "productId"?: string;
+        "version"?: string;
     }
 }
 declare global {
@@ -33,8 +34,9 @@ declare namespace LocalJSX {
         "ctaText"?: string;
         "env"?: "stage" | "local" | "prod";
         "gatewayUrl"?: string;
-        "onCtaClick"?: (event: CustomEvent<any>) => void;
+        "onCTAClick"?: (event: CustomEvent<any>) => void;
         "productId"?: string;
+        "version"?: string;
     }
     interface IntrinsicElements {
         "manifold-plan-table": ManifoldPlanTable;

src/components/manifold-plan-table/manifold-plan-table.spec.ts

@@ -15,6 +15,7 @@ interface Props {
   clientId?: string;
   baseUrl?: string;
   ctaText?: string;
+  version?: string;
 }
 
 async function setup(props: Props) {
@@ -27,6 +28,7 @@ async function setup(props: Props) {
 
   component.productId = props.productId;
   component.clientId = props.clientId;
+  component.version = props.version;
 
   const root = page.root as HTMLDivElement;
   root.appendChild(component);
@@ -70,6 +72,20 @@ describe(ManifoldPlanTable.name, () => {
     });
     afterEach(fetchMock.restore);
 
+    it('[version]: when latest is provided it is a latest query', async () => {
+      fetchMock.mock(GRAPHQL_ENDPOINT, mockJawsDB);
+      await setup({ productId: 'product-id', clientId: 'client-id', version: 'latest' });
+      const options = fetchMock.lastOptions();
+      expect(options.body).toContain('"latest":true');
+    });
+
+    it('[version]: when version is provided it is not a latest query', async () => {
+      fetchMock.mock(GRAPHQL_ENDPOINT, mockJawsDB);
+      await setup({ productId: 'product-id', clientId: 'client-id', version: '1' });
+      const options = fetchMock.lastOptions();
+      expect(options.body).toContain('"latest":false');
+    });
+
     it('cta URL', async () => {
       // mock jawsDB endpoint
       fetchMock.mock(GRAPHQL_ENDPOINT, mockJawsDB);

src/components/manifold-plan-table/manifold-plan-table.tsx

@@ -21,6 +21,8 @@ import PlanCost from './plan-cost';
 import SkeletonLoader from './skeleton';
 import query from './product.graphql';
 
+const LATEST_VERSION_FLAG = 'latest';
+
 // query types
 type ProductFixed = ProductQuery['product']['fixedFeatures']['edges'][0]['node'];
 type ProductMetered = ProductQuery['product']['meteredFeatures']['edges'][0]['node'];
@@ -64,6 +66,8 @@ export class ManifoldPlanTable {
   // CTA Text for buttons
   @Prop() ctaText?: string = 'Get Started';
   @Prop() env?: 'stage' | 'local' | 'prod' = 'stage';
+  // Version label for specifiying which verison of product to display.
+  @Prop() version?: string;
   // Product data
   @State() product?: ProductQuery['product'];
   // Product features
@@ -102,7 +106,10 @@ export class ManifoldPlanTable {
 
   // trying to move fetch out for testing.
   async setupProduct(productID: string) {
-    const variables: ProductQueryVariables = { id: productID };
+    const variables: ProductQueryVariables = {
+      id: productID,
+      latest: this.version === LATEST_VERSION_FLAG,
+    };
     const res = await this.connection.graphqlFetch<ProductQuery>({ query, variables });
     const { data } = res;
 

src/components/manifold-plan-table/product.graphql

@@ -1,5 +1,5 @@
-query PRODUCT($id: ID!) {
-  product(id: $id) {
+query PRODUCT($id: ID!, $latest: Boolean) {
+  product(id: $id, latest: $latest) {
     id
     displayName
     fixedFeatures(first: 25) {