@manifoldco/component-plan-matrix - npm Package Compare versions

Comparing version 0.0.7 to 0.0.8

dist/cjs/loader.cjs.js

@@ -5,7 +5,7 @@ 'use strict';
 
-const core = require('./core-79f769b4.js');
+const core = require('./core-6a7e51f6.js');
 
 const defineCustomElements = (win, options) => {
   return core.patchEsm().then(() => {
-    core.bootstrapLazy([["manifold-button_7.cjs",[[0,"manifold-plan-matrix",{"productId":[1,"product-id"],"baseUrl":[1,"base-url"],"ctaText":[1,"cta-text"],"graphqlUrl":[1,"graphql-url"],"product":[32],"plans":[32],"tableRef":[32],"loading":[32]}],[0,"manifold-checkbox",{"inputId":[1,"input-id"],"name":[1],"checked":[4]}],[4,"manifold-button",{"href":[1]}],[0,"manifold-cost-tiers",{"minLimit":[2,"min-limit"],"maxLimit":[2,"max-limit"],"cost":[2],"unit":[1]}],[4,"manifold-metered"],[0,"manifold-thead",{"titleText":[1,"title-text"],"plan":[16]}],[0,"manifold-empty-cell"]]]], options);
+    core.bootstrapLazy([["manifold-button_10.cjs",[[0,"manifold-plan-matrix",{"productId":[1,"product-id"],"clientId":[1,"client-id"],"baseUrl":[1,"base-url"],"ctaText":[1,"cta-text"],"graphqlUrl":[1,"graphql-url"],"product":[32],"plans":[32],"labels":[32],"loading":[32]}],[0,"manifold-checkbox",{"inputId":[1,"input-id"],"name":[1],"checked":[4]}],[4,"manifold-button",{"href":[1]}],[0,"manifold-cost-tiers",{"minLimit":[2,"min-limit"],"maxLimit":[2,"max-limit"],"cost":[2],"unit":[1]}],[4,"manifold-metered"],[0,"manifold-numeric-input",{"min":[2],"max":[2],"increment":[2],"unit":[1]}],[0,"manifold-select",{"options":[16]}],[0,"manifold-thead",{"titleText":[1,"title-text"],"plan":[16],"loading":[32],"controller":[32],"cost":[32],"costCalls":[32]}],[0,"manifold-toggle",{"off":[2],"on":[2],"toggle":[32],"selected":[32]}],[0,"manifold-empty-cell"]]]], options);
   });
@@ -12,0 +12,0 @@ };

dist/cjs/manifold-plan-matrix.cjs.js

 'use strict';
 
-const core = require('./core-79f769b4.js');
+const core = require('./core-6a7e51f6.js');
 
 core.patchBrowser().then(options => {
-  return core.bootstrapLazy([["manifold-button_7.cjs",[[0,"manifold-plan-matrix",{"productId":[1,"product-id"],"baseUrl":[1,"base-url"],"ctaText":[1,"cta-text"],"graphqlUrl":[1,"graphql-url"],"product":[32],"plans":[32],"tableRef":[32],"loading":[32]}],[0,"manifold-checkbox",{"inputId":[1,"input-id"],"name":[1],"checked":[4]}],[4,"manifold-button",{"href":[1]}],[0,"manifold-cost-tiers",{"minLimit":[2,"min-limit"],"maxLimit":[2,"max-limit"],"cost":[2],"unit":[1]}],[4,"manifold-metered"],[0,"manifold-thead",{"titleText":[1,"title-text"],"plan":[16]}],[0,"manifold-empty-cell"]]]], options);
+  return core.bootstrapLazy([["manifold-button_10.cjs",[[0,"manifold-plan-matrix",{"productId":[1,"product-id"],"clientId":[1,"client-id"],"baseUrl":[1,"base-url"],"ctaText":[1,"cta-text"],"graphqlUrl":[1,"graphql-url"],"product":[32],"plans":[32],"labels":[32],"loading":[32]}],[0,"manifold-checkbox",{"inputId":[1,"input-id"],"name":[1],"checked":[4]}],[4,"manifold-button",{"href":[1]}],[0,"manifold-cost-tiers",{"minLimit":[2,"min-limit"],"maxLimit":[2,"max-limit"],"cost":[2],"unit":[1]}],[4,"manifold-metered"],[0,"manifold-numeric-input",{"min":[2],"max":[2],"increment":[2],"unit":[1]}],[0,"manifold-select",{"options":[16]}],[0,"manifold-thead",{"titleText":[1,"title-text"],"plan":[16],"loading":[32],"controller":[32],"cost":[32],"costCalls":[32]}],[0,"manifold-toggle",{"off":[2],"on":[2],"toggle":[32],"selected":[32]}],[0,"manifold-empty-cell"]]]], options);
 });

dist/collection/collection-manifest.json

@@ -8,3 +8,6 @@ {
     "components/manifold-metered/manifold-metered.js",
+    "components/manifold-numeric-input/manifold-numeric-input.js",
+    "components/manifold-select/manifold-select.js",
     "components/manifold-thead/manifold-thead.js",
+    "components/manifold-toggle/manifold-toggle.js",
     "components/manifold-plan-matrix/manifold-plan-matrix.js"
@@ -11,0 +14,0 @@ ],

dist/collection/components/manifold-plan-matrix/manifold-plan-matrix.js

 import { h } from "@stencil/core";
+import { PlanFeatureType, } from '../../types/graphql';
 import query from './product.graphql';
+import { CLIENT_ID_WARNING } from './warning';
 const GRAPHQL_ENDPOINT = 'https://api.manifold.co/graphql';
+const MANIFOLD_CLIENT_ID = 'Manifold-Client-ID';
 export class ManifoldPricing {
@@ -8,2 +11,4 @@ constructor() {
         this.productId = '';
+        // Passed client ID header to the graphql calls
+        this.clientId = '';
         // Base url for buttons
@@ -21,5 +26,8 @@ this.baseUrl = '/signup';
         const variables = { id: this.productId || DEFAULT, first: 50 };
+        if (!this.clientId) {
+            console.warn(CLIENT_ID_WARNING);
+        }
         fetch(this.graphqlUrl || GRAPHQL_ENDPOINT, {
             method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
+            headers: Object.assign({ 'Content-Type': 'application/json', Connection: 'keep-alive' }, (this.clientId ? { [MANIFOLD_CLIENT_ID]: this.clientId } : {})),
             body: JSON.stringify({
@@ -45,45 +53,36 @@ query,
             const features = (_c = (_b = (_a = this) === null || _a === void 0 ? void 0 : _a.product) === null || _b === void 0 ? void 0 : _b.plans) === null || _c === void 0 ? void 0 : _c.edges.reduce((acc, { node }) => {
-                var _a, _b, _c, _d;
+                var _a, _b, _c, _d, _e, _f;
                 // Grab unique fixed
-                const fixedFeatures = (_b = (_a = node) === null || _a === void 0 ? void 0 : _a.fixedFeatures) === null || _b === void 0 ? void 0 : _b.edges.reduce((fixedAccumulator, { node: fixedFeature }) => {
+                const fixedFeatures = (_b = (_a = node) === null || _a === void 0 ? void 0 : _a.fixedFeatures) === null || _b === void 0 ? void 0 : _b.edges.reduce((fixedAccumulator, { node: n }) => {
                     // Check if key exists
-                    if (fixedAccumulator[fixedFeature.displayName]) {
+                    if (fixedAccumulator[n.displayName]) {
                         return fixedAccumulator;
                     }
                     // Add new key
-                    return Object.assign({ [fixedFeature.displayName]: {
-                            label: fixedFeature.displayName,
-                            index: Object.keys(fixedAccumulator).length + 1,
+                    return Object.assign({ [n.label]: {
+                            tierLabel: n.displayName,
                         } }, fixedAccumulator);
                 }, {});
                 // Grab unique metered
-                const meteredFeatures = (_d = (_c = node) === null || _c === void 0 ? void 0 : _c.meteredFeatures) === null || _d === void 0 ? void 0 : _d.edges.reduce((meteredAccumulator, { node: meteredFeature }) => {
+                const meteredFeatures = (_d = (_c = node) === null || _c === void 0 ? void 0 : _c.meteredFeatures) === null || _d === void 0 ? void 0 : _d.edges.reduce((meteredAccumulator, { node: n }) => {
                     // Check if key exists
-                    if (meteredAccumulator[meteredFeature.displayName]) {
+                    if (meteredAccumulator[n.label]) {
                         return meteredAccumulator;
                     }
                     // Add new key
-                    return Object.assign({ [meteredFeature.displayName]: {
-                            label: meteredFeature.displayName,
-                            index: Object.keys(meteredFeature).length + 1,
+                    return Object.assign({ [n.label]: {
+                            tierLabel: n.displayName,
                         } }, meteredAccumulator);
                 }, {});
-                // const meteredFeatures = node?.meteredFeatures?.edges.reduce(
-                //   (fixedAccumulator: TableRef, { node: meteredFeatures }) => {
-                //     if (fixedAccumulator[meteredFeatures.displayName]) {
-                //       return fixedAccumulator;
-                //     }
-                //     return {
-                //       [meteredFeatures.displayName]: {
-                //         label: meteredFeatures.displayName,
-                //         index: Object.keys(fixedAccumulator).length + 1,
-                //       },
-                //       ...fixedAccumulator,
-                //     };
-                //   },
-                //   {}
-                // );
-                return Object.assign(Object.assign(Object.assign({}, fixedFeatures), meteredFeatures), acc);
+                const configurableFeatures = (_f = (_e = node) === null || _e === void 0 ? void 0 : _e.configurableFeatures) === null || _f === void 0 ? void 0 : _f.edges.reduce((fixedAccumulator, { node: n }) => {
+                    if (fixedAccumulator[n.displayName]) {
+                        return fixedAccumulator;
+                    }
+                    return Object.assign({ [n.label]: {
+                            tierLabel: n.displayName,
+                        } }, fixedAccumulator);
+                }, {});
+                return Object.assign(Object.assign(Object.assign(Object.assign({}, fixedFeatures), meteredFeatures), configurableFeatures), acc);
             }, {});
-            this.tableRef = features || {};
+            this.labels = features || {};
             this.plans = (_e = (_d = this.product) === null || _d === void 0 ? void 0 : _d.plans) === null || _e === void 0 ? void 0 : _e.edges;
@@ -120,5 +119,23 @@ this.loading = false;
     }
-    configurableFeatures() {
-        return (h("div", { class: "mp--cell mp--cell__body" },
-            h("manifold-empty-cell", null)));
+    configurableFeatures(type, numericDetails, featureOptions) {
+        var _a, _b, _c, _d;
+        switch (type) {
+            case PlanFeatureType.String:
+                return (h("div", { class: "mp--cell mp--cell__body" },
+                    h("manifold-select", { options: featureOptions })));
+            case PlanFeatureType.Number:
+                return (h("div", { class: "mp--cell mp--cell__body" },
+                    h("manifold-numeric-input", { min: (_a = numericDetails) === null || _a === void 0 ? void 0 : _a.min, max: (_b = numericDetails) === null || _b === void 0 ? void 0 : _b.max, increment: (_c = numericDetails) === null || _c === void 0 ? void 0 : _c.increment, unit: (_d = numericDetails) === null || _d === void 0 ? void 0 : _d.unit })));
+            case PlanFeatureType.Boolean:
+                if (Array.isArray(featureOptions)) {
+                    const [on, off] = featureOptions;
+                    return (h("div", { class: "mp--cell mp--cell__body" },
+                        h("manifold-toggle", { on: on.cost, off: off.cost })));
+                }
+                return (h("div", { class: "mp--cell mp--cell__body" },
+                    h("manifold-empty-cell", null)));
+            default:
+                return (h("div", { class: "mp--cell mp--cell__body" },
+                    h("manifold-empty-cell", null)));
+        }
     }
@@ -132,5 +149,6 @@ render() {
         }
-        const labels = Object.keys(this.tableRef);
+        const tierLabels = (this.labels && Object.values(this.labels).map((feature) => feature.tierLabel)) ||
+            [];
         const gridColumns = this.plans.length + 1;
-        const gridRows = labels.length + 2; // +1 for the "Get Started" row
+        const gridRows = tierLabels.length + 2; // +1 for the "Get Started" row
         // Pass column count into css grid
@@ -141,3 +159,3 @@ this.el.style.setProperty('--manifold-table-columns', `${gridColumns}`);
             h("div", { class: "mp--cell mp--cell__sticky mp--cell__bls mp--cell__al mp--cell__th mp--cell__thead mp--cell__bts mp--cell__rounded-tl" }),
-            labels.map(label => {
+            tierLabels.map(label => {
                 return (h("div", { class: "mp--cell  mp--cell__sticky mp--cell__bls mp--cell__al mp--cell__th" }, label));
@@ -153,9 +171,12 @@ }),
                     h("manifold-thead", { "title-text": plan.node.displayName, plan: plan })),
-                Object.values(this.tableRef).map(({ label }, ii) => {
-                    const fixedFeatureMatch = plan.node.fixedFeatures.edges.find(({ node: { displayName } }) => {
-                        return label === displayName;
+                Object.keys(this.labels).map((label, ii) => {
+                    const fixedFeatureMatch = plan.node.fixedFeatures.edges.find(({ node: { label: l } }) => {
+                        return label === l;
                     });
-                    const meteredFeaturesMatch = plan.node.meteredFeatures.edges.find(({ node: { displayName } }) => {
-                        return label === displayName;
+                    const meteredFeaturesMatch = plan.node.meteredFeatures.edges.find(({ node: { label: l } }) => {
+                        return label === l;
                     });
+                    const configurableFeaturesMatch = plan.node.configurableFeatures.edges.find(({ node: { label: l } }) => {
+                        return label === l;
+                    });
                     if (fixedFeatureMatch) {
@@ -167,2 +188,5 @@ return this.fixedFeatures(fixedFeatureMatch.node.displayValue, ii);
                     }
+                    if (configurableFeaturesMatch) {
+                        return this.configurableFeatures(configurableFeaturesMatch.node.type, configurableFeaturesMatch.node.numericDetails, configurableFeaturesMatch.node.featureOptions);
+                    }
                     return (h("div", { class: "mp--cell mp--cell__body" },
@@ -203,2 +227,20 @@ h("manifold-empty-cell", null)));
         },
+        "clientId": {
+            "type": "string",
+            "mutable": false,
+            "complexType": {
+                "original": "string",
+                "resolved": "string | undefined",
+                "references": {}
+            },
+            "required": false,
+            "optional": true,
+            "docs": {
+                "tags": [],
+                "text": ""
+            },
+            "attribute": "client-id",
+            "reflect": false,
+            "defaultValue": "''"
+        },
         "baseUrl": {
@@ -262,3 +304,3 @@ "type": "string",
         "plans": {},
-        "tableRef": {},
+        "labels": {},
         "loading": {}
@@ -265,0 +307,0 @@ }; }

dist/collection/components/manifold-thead/manifold-thead.js

 import { h } from "@stencil/core";
+import { toUSD } from '../../utils/cost';
+import { planCost, configurableFeatureDefaults } from '../../utils/plan';
+import { createRestFetch } from '../../utils/restFetch';
+import { connections } from '../../utils/connections';
 export class ManifoldThead {
     constructor() {
         this.titleText = '';
+        this.loading = true;
+        this.costCalls = 0;
+        // TODO add watch to call price updates on UI updates.
+        this.restFetch = createRestFetch({
+            endpoints: () => connections.prod,
+        });
     }
+    componentWillLoad() {
+        var _a, _b, _c;
+        if (this.plan && ((_c = (_b = (_a = this.plan) === null || _a === void 0 ? void 0 : _a.node) === null || _b === void 0 ? void 0 : _b.configurableFeatures) === null || _c === void 0 ? void 0 : _c.edges.length) > 0) {
+            this.fetchCustomPrice();
+        }
+    }
+    fetchCustomPrice() {
+        var _a, _b, _c, _d, _e, _f;
+        if (this.controller) {
+            this.controller.abort();
+        } // If a request is in flight, cancel it
+        this.controller = new AbortController();
+        if (this.plan && ((_c = (_b = (_a = this.plan) === null || _a === void 0 ? void 0 : _a.node) === null || _b === void 0 ? void 0 : _b.configurableFeatures) === null || _c === void 0 ? void 0 : _c.edges.length) > 0) {
+            const features = (_f = (_e = (_d = this.plan) === null || _d === void 0 ? void 0 : _d.node) === null || _e === void 0 ? void 0 : _e.configurableFeatures) === null || _f === void 0 ? void 0 : _f.edges;
+            // planId get cost
+            planCost(this.restFetch, {
+                planID: this.plan.node.id,
+                features: configurableFeatureDefaults(features),
+                init: { signal: this.controller.signal },
+            }).then(data => {
+                this.cost = data;
+                this.loading = false;
+                this.costCalls += 1;
+            });
+        }
+    }
     render() {
+        const header = [this.titleText];
         if (!this.plan) {
-            return this.titleText;
+            return header;
         }
-        return [
-            this.titleText,
-            h("p", { class: "mp--plan-cost" },
-                "$",
-                this.plan.node.cost / 100,
-                h("span", { class: "mp--subtext" }, "/mo")),
-            this.plan.node.meteredFeatures && h("span", { class: "mp--subtext" }, " + metered use"),
-        ];
+        if (this.plan.node.configurableFeatures.edges.length > 0) {
+            if (this.loading) {
+                header.push(h("p", { class: "mp--subtext" }, "Calculating cost..."));
+                return header;
+            }
+            header.push(h("p", { class: "mp--plan-cost" },
+                this.costCalls < 2 && h("span", { class: "mp--subtext" }, "Starting at"),
+                ' ',
+                this.cost && toUSD(this.cost.cost),
+                h("span", { class: "mp--subtext" }, "/mo")));
+            return header;
+        }
+        // Manual cost calc
+        header.push(h("p", { class: "mp--plan-cost" },
+            toUSD(this.plan.node.cost),
+            h("span", { class: "mp--subtext" }, "/mo")));
+        if (this.plan.node.meteredFeatures.edges.length > 0) {
+            header.push(h("span", { class: "mp--subtext" }, " + metered use"));
+        }
+        return header;
     }
@@ -50,3 +99,3 @@ static get is() { return "manifold-thead"; }
                 "original": "ProductQuery['product']['plans']['edges'][0]",
-                "resolved": "undefined | { __typename?: \"PlanEdge\" | undefined; } & { node: { __typename?: \"Plan\" | undefined; } & Pick<Plan, \"displayName\" | \"cost\"> & { fixedFeatures: { __typename?: \"PlanFixedFeatureConnection\" | undefined; } & { edges: ({ __typename?: \"PlanFixedFeatureEdge\" | undefined; } & { node: { __typename?: \"PlanFixedFeature\" | undefined; } & Pick<PlanFixedFeature, \"displayName\" | \"displayValue\">; })[]; }; meteredFeatures: { __typename?: \"PlanMeteredFeatureConnection\" | undefined; } & { edges: ({ __typename?: \"PlanMeteredFeatureEdge\" | undefined; } & { node: { __typename?: \"PlanMeteredFeature\" | undefined; } & Pick<PlanMeteredFeature, \"displayName\"> & { numericDetails: { __typename?: \"PlanMeteredFeatureNumericDetails\" | undefined; } & Pick<PlanMeteredFeatureNumericDetails, \"unit\"> & { costTiers: ({ __typename?: \"PlanFeatureCostTier\" | undefined; } & Pick<PlanFeatureCostTier, \"cost\" | \"limit\">)[]; }; }; })[]; }; configurableFeatures: { __typename?: \"PlanConfigurableFeatureConnection\" | undefined; } & { edges: ({ __typename?: \"PlanConfigurableFeatureEdge\" | undefined; } & { node: { __typename?: \"PlanConfigurableFeature\" | undefined; } & Pick<PlanConfigurableFeature, \"displayName\" | \"type\" | \"upgradable\" | \"downgradable\"> & { featureOptions: ({ __typename?: \"PlanConfigurableFeatureOption\" | undefined; } & Pick<PlanConfigurableFeatureOption, \"displayName\" | \"cost\" | \"value\">)[]; numericDetails: { __typename?: \"PlanConfigurableFeatureNumericDetails\" | undefined; } & Pick<PlanConfigurableFeatureNumericDetails, \"unit\" | \"increment\" | \"min\" | \"max\"> & { costTiers: ({ __typename?: \"PlanFeatureCostTier\" | undefined; } & Pick<PlanFeatureCostTier, \"cost\" | \"limit\">)[]; }; }; })[]; }; }; }",
+                "resolved": "undefined | { __typename?: \"PlanEdge\" | undefined; } & { node: { __typename?: \"Plan\" | undefined; } & Pick<Plan, \"displayName\" | \"cost\" | \"id\"> & { fixedFeatures: { __typename?: \"PlanFixedFeatureConnection\" | undefined; } & { edges: ({ __typename?: \"PlanFixedFeatureEdge\" | undefined; } & { node: { __typename?: \"PlanFixedFeature\" | undefined; } & Pick<PlanFixedFeature, \"displayName\" | \"label\" | \"displayValue\">; })[]; }; meteredFeatures: { __typename?: \"PlanMeteredFeatureConnection\" | undefined; } & { edges: ({ __typename?: \"PlanMeteredFeatureEdge\" | undefined; } & { node: { __typename?: \"PlanMeteredFeature\" | undefined; } & Pick<PlanMeteredFeature, \"displayName\" | \"label\"> & { numericDetails: { __typename?: \"PlanMeteredFeatureNumericDetails\" | undefined; } & Pick<PlanMeteredFeatureNumericDetails, \"unit\"> & { costTiers: ({ __typename?: \"PlanFeatureCostTier\" | undefined; } & Pick<PlanFeatureCostTier, \"cost\" | \"limit\">)[]; }; }; })[]; }; configurableFeatures: { __typename?: \"PlanConfigurableFeatureConnection\" | undefined; } & { edges: ({ __typename?: \"PlanConfigurableFeatureEdge\" | undefined; } & { node: { __typename?: \"PlanConfigurableFeature\" | undefined; } & Pick<PlanConfigurableFeature, \"displayName\" | \"label\" | \"type\" | \"upgradable\" | \"downgradable\"> & { featureOptions: ({ __typename?: \"PlanConfigurableFeatureOption\" | undefined; } & Pick<PlanConfigurableFeatureOption, \"displayName\" | \"cost\" | \"value\">)[]; numericDetails: { __typename?: \"PlanConfigurableFeatureNumericDetails\" | undefined; } & Pick<PlanConfigurableFeatureNumericDetails, \"unit\" | \"increment\" | \"min\" | \"max\"> & { costTiers: ({ __typename?: \"PlanFeatureCostTier\" | undefined; } & Pick<PlanFeatureCostTier, \"cost\" | \"limit\">)[]; }; }; })[]; }; }; }",
                 "references": {
@@ -67,2 +116,8 @@ "ProductQuery": {
     }; }
+    static get states() { return {
+        "loading": {},
+        "controller": {},
+        "cost": {},
+        "costCalls": {}
+    }; }
 }

dist/manifold-plan-matrix/manifold-plan-matrix.esm.js

@@ -1,1 +0,1 @@
-import{p as t,b as i}from"./p-3fb78b3a.js";t().then(t=>i([["p-72ihjdw6",[[0,"manifold-plan-matrix",{productId:[1,"product-id"],baseUrl:[1,"base-url"],ctaText:[1,"cta-text"],graphqlUrl:[1,"graphql-url"],product:[32],plans:[32],tableRef:[32],loading:[32]}],[0,"manifold-checkbox",{inputId:[1,"input-id"],name:[1],checked:[4]}],[4,"manifold-button",{href:[1]}],[0,"manifold-cost-tiers",{minLimit:[2,"min-limit"],maxLimit:[2,"max-limit"],cost:[2],unit:[1]}],[4,"manifold-metered"],[0,"manifold-thead",{titleText:[1,"title-text"],plan:[16]}],[0,"manifold-empty-cell"]]]],t));
+import{p as t,b as i}from"./p-8415a672.js";t().then(t=>i([["p-svps2j1u",[[0,"manifold-plan-matrix",{productId:[1,"product-id"],clientId:[1,"client-id"],baseUrl:[1,"base-url"],ctaText:[1,"cta-text"],graphqlUrl:[1,"graphql-url"],product:[32],plans:[32],labels:[32],loading:[32]}],[0,"manifold-checkbox",{inputId:[1,"input-id"],name:[1],checked:[4]}],[4,"manifold-button",{href:[1]}],[0,"manifold-cost-tiers",{minLimit:[2,"min-limit"],maxLimit:[2,"max-limit"],cost:[2],unit:[1]}],[4,"manifold-metered"],[0,"manifold-numeric-input",{min:[2],max:[2],increment:[2],unit:[1]}],[0,"manifold-select",{options:[16]}],[0,"manifold-thead",{titleText:[1,"title-text"],plan:[16],loading:[32],controller:[32],cost:[32],costCalls:[32]}],[0,"manifold-toggle",{off:[2],on:[2],toggle:[32],selected:[32]}],[0,"manifold-empty-cell"]]]],t));

dist/types/components.d.ts

@@ -11,2 +11,3 @@ /* eslint-disable */
 import {
+  PlanConfigurableFeatureOption,
   ProductQuery,
@@ -32,4 +33,11 @@ } from './types/graphql';
   interface ManifoldMetered {}
+  interface ManifoldNumericInput {
+    'increment'?: number;
+    'max'?: number;
+    'min'?: number;
+    'unit'?: string;
+  }
   interface ManifoldPlanMatrix {
     'baseUrl'?: string;
+    'clientId'?: string;
     'ctaText'?: string;
@@ -39,2 +47,5 @@ 'graphqlUrl'?: string;
   }
+  interface ManifoldSelect {
+    'options'?: PlanConfigurableFeatureOption[];
+  }
   interface ManifoldThead {
@@ -44,2 +55,6 @@ 'plan'?: ProductQuery['product']['plans']['edges'][0];
   }
+  interface ManifoldToggle {
+    'off': number;
+    'on': number;
+  }
 }
@@ -80,2 +95,8 @@
 
+  interface HTMLManifoldNumericInputElement extends Components.ManifoldNumericInput, HTMLStencilElement {}
+  var HTMLManifoldNumericInputElement: {
+    prototype: HTMLManifoldNumericInputElement;
+    new (): HTMLManifoldNumericInputElement;
+  };
+
   interface HTMLManifoldPlanMatrixElement extends Components.ManifoldPlanMatrix, HTMLStencilElement {}
@@ -87,2 +108,8 @@ var HTMLManifoldPlanMatrixElement: {
 
+  interface HTMLManifoldSelectElement extends Components.ManifoldSelect, HTMLStencilElement {}
+  var HTMLManifoldSelectElement: {
+    prototype: HTMLManifoldSelectElement;
+    new (): HTMLManifoldSelectElement;
+  };
+
   interface HTMLManifoldTheadElement extends Components.ManifoldThead, HTMLStencilElement {}
@@ -93,2 +120,8 @@ var HTMLManifoldTheadElement: {
   };
+
+  interface HTMLManifoldToggleElement extends Components.ManifoldToggle, HTMLStencilElement {}
+  var HTMLManifoldToggleElement: {
+    prototype: HTMLManifoldToggleElement;
+    new (): HTMLManifoldToggleElement;
+  };
   interface HTMLElementTagNameMap {
@@ -100,4 +133,7 @@ 'manifold-button': HTMLManifoldButtonElement;
     'manifold-metered': HTMLManifoldMeteredElement;
+    'manifold-numeric-input': HTMLManifoldNumericInputElement;
     'manifold-plan-matrix': HTMLManifoldPlanMatrixElement;
+    'manifold-select': HTMLManifoldSelectElement;
     'manifold-thead': HTMLManifoldTheadElement;
+    'manifold-toggle': HTMLManifoldToggleElement;
   }
@@ -123,4 +159,11 @@ }
   interface ManifoldMetered {}
+  interface ManifoldNumericInput {
+    'increment'?: number;
+    'max'?: number;
+    'min'?: number;
+    'unit'?: string;
+  }
   interface ManifoldPlanMatrix {
     'baseUrl'?: string;
+    'clientId'?: string;
     'ctaText'?: string;
@@ -130,2 +173,5 @@ 'graphqlUrl'?: string;
   }
+  interface ManifoldSelect {
+    'options'?: PlanConfigurableFeatureOption[];
+  }
   interface ManifoldThead {
@@ -135,2 +181,6 @@ 'plan'?: ProductQuery['product']['plans']['edges'][0];
   }
+  interface ManifoldToggle {
+    'off'?: number;
+    'on'?: number;
+  }
 
@@ -143,4 +193,7 @@ interface IntrinsicElements {
     'manifold-metered': ManifoldMetered;
+    'manifold-numeric-input': ManifoldNumericInput;
     'manifold-plan-matrix': ManifoldPlanMatrix;
+    'manifold-select': ManifoldSelect;
     'manifold-thead': ManifoldThead;
+    'manifold-toggle': ManifoldToggle;
   }
@@ -160,4 +213,7 @@ }
       'manifold-metered': LocalJSX.ManifoldMetered & JSXBase.HTMLAttributes<HTMLManifoldMeteredElement>;
+      'manifold-numeric-input': LocalJSX.ManifoldNumericInput & JSXBase.HTMLAttributes<HTMLManifoldNumericInputElement>;
       'manifold-plan-matrix': LocalJSX.ManifoldPlanMatrix & JSXBase.HTMLAttributes<HTMLManifoldPlanMatrixElement>;
+      'manifold-select': LocalJSX.ManifoldSelect & JSXBase.HTMLAttributes<HTMLManifoldSelectElement>;
       'manifold-thead': LocalJSX.ManifoldThead & JSXBase.HTMLAttributes<HTMLManifoldTheadElement>;
+      'manifold-toggle': LocalJSX.ManifoldToggle & JSXBase.HTMLAttributes<HTMLManifoldToggleElement>;
     }
@@ -164,0 +220,0 @@ }

dist/types/components/manifold-plan-matrix/manifold-plan-matrix.d.ts

@@ -1,10 +0,10 @@
-import { ProductQuery } from '../../types/graphql';
-declare type conditionalClassesObj = {
+import { ProductQuery, PlanFeatureType, PlanConfigurableFeatureOption, PlanConfigurableFeatureNumericDetails, PlanFixedFeature } from '../../types/graphql';
+declare type ConditionalClassesObj = {
     [name: string]: boolean;
 };
+declare type tierLabel = {
+    tierLabel: string;
+};
 declare type TableRef = {
-    [key: string]: {
-        label: string;
-        index: number;
-    };
+    [key: string]: tierLabel;
 };
@@ -15,2 +15,3 @@ declare type NumericDetails = ProductQuery['product']['plans']['edges'][0]['node']['meteredFeatures']['edges'][0]['node']['numericDetails'];
     productId?: string;
+    clientId?: string;
     baseUrl?: string;
@@ -21,12 +22,12 @@ ctaText?: string;
     plans: ProductQuery['product']['plans']['edges'];
-    tableRef: TableRef;
+    labels: TableRef;
     loading: boolean;
     componentWillLoad(): void;
     createPlans(): void;
-    addClass(obj: conditionalClassesObj, baseClass?: string): string;
-    fixedFeatures(displayValue: string, planIndex: number): any;
+    addClass(obj: ConditionalClassesObj, baseClass?: string): string;
+    fixedFeatures(displayValue: PlanFixedFeature['displayName'], planIndex: number): any;
     meteredFeatures(numericDetails: NumericDetails): any;
-    configurableFeatures(): any;
+    configurableFeatures(type: PlanFeatureType, numericDetails?: PlanConfigurableFeatureNumericDetails, featureOptions?: PlanConfigurableFeatureOption[]): any;
     render(): any;
 }
 export {};

dist/types/components/manifold-thead/manifold-thead.d.ts

@@ -5,3 +5,13 @@ import { ProductQuery } from '../../types/graphql';
     plan?: ProductQuery['product']['plans']['edges'][0];
-    render(): string | any[] | undefined;
+    loading: boolean;
+    controller?: AbortController;
+    cost?: {
+        cost: number;
+        currency: string;
+    };
+    costCalls: number;
+    restFetch: import("../../utils/restFetch").RestFetch;
+    componentWillLoad(): void;
+    fetchCustomPrice(): void;
+    render(): (string | undefined)[];
 }

dist/types/types/graphql.d.ts

@@ -970,3 +970,3 @@ export declare type Maybe<T> = T;
                     __typename?: 'Plan';
-                } & Pick<Plan, 'displayName' | 'cost'> & {
+                } & Pick<Plan, 'displayName' | 'cost' | 'id'> & {
                     fixedFeatures: Maybe<({
@@ -980,3 +980,3 @@ __typename?: 'PlanFixedFeatureConnection';
                                 __typename?: 'PlanFixedFeature';
-                            } & Pick<PlanFixedFeature, 'displayName' | 'displayValue'>);
+                            } & Pick<PlanFixedFeature, 'label' | 'displayName' | 'displayValue'>);
                         })>;
@@ -992,3 +992,3 @@ })>;
                                 __typename?: 'PlanMeteredFeature';
-                            } & Pick<PlanMeteredFeature, 'displayName'> & {
+                            } & Pick<PlanMeteredFeature, 'label' | 'displayName'> & {
                                 numericDetails: ({
@@ -1012,3 +1012,3 @@ __typename?: 'PlanMeteredFeatureNumericDetails';
                                 __typename?: 'PlanConfigurableFeature';
-                            } & Pick<PlanConfigurableFeature, 'displayName' | 'type' | 'upgradable' | 'downgradable'> & {
+                            } & Pick<PlanConfigurableFeature, 'label' | 'displayName' | 'type' | 'upgradable' | 'downgradable'> & {
                                 featureOptions: Maybe<Array<({
@@ -1015,0 +1015,0 @@ __typename?: 'PlanConfigurableFeatureOption';

package.json

 {
   "name": "@manifoldco/component-plan-matrix",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "private": false,
@@ -49,2 +49,3 @@ "description": "Stencil Component Starter",
     "@storybook/html": "^5.3.13",
+    "@types/jest": "24.0.25",
     "@typescript-eslint/eslint-plugin": "^2.20.0",
@@ -60,2 +61,4 @@ "@typescript-eslint/parser": "^2.20.0",
     "graphql": "^14.6.0",
+    "jest": "24.9.0",
+    "jest-cli": "24.9.0",
     "postcss-preset-env": "^6.7.0",
@@ -62,0 +65,0 @@ "prettier": "^1.19.1",

README.md

@@ -22,3 +22,3 @@ # @manifoldco/component-plan-matrix
   import(
-    'https://cdn.js.manifold.co/@manifoldco/component-plan-matrix@0.0.1/loader'
+    'https://js.cdn.manifold.co/@manifoldco/component-plan-matrix/loader/index.mjs'
   ).then(({ defineCustomElements }) => defineCustomElements(window));
@@ -29,3 +29,3 @@ </script>
   nomodule
-  src="https://cdn.js.manifold.co/@manifoldco/component-plan-matrix@0.0.1//dist/test-components.js"
+  src="https://js.cdn.manifold.co/@manifoldco/component-plan-matrix/dist/manifold-plan-matrix.js"
 ></script>
@@ -32,0 +32,0 @@ ```

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1059734

increased by15.56%

Number of package files

107

increased by21.59%

Lines of code

17236

increased by16.54%

Worsened metrics

Dev dependency count

31

increased by10.71%

Number of low supply chain risk alerts

18

increased by80%

Number of medium supply chain risk alerts

22

increased by37.5%

No dependency changes