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

Comparing version 0.0.9 to 0.0.10

dist/cjs/loader.cjs.js

@@ -5,7 +5,7 @@ 'use strict';
 
-const core = require('./core-514f9636.js');
+const core = require('./core-57642cb9.js');
 
 const defineCustomElements = (win, options) => {
   return core.patchEsm().then(() => {
-    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);
+    core.bootstrapLazy([["manifold-plan-matrix.cjs",[[0,"manifold-plan-matrix",{"gatewayUrl":[1,"gateway-url"],"graphqlUrl":[1,"graphql-url"],"productId":[1,"product-id"],"clientId":[1,"client-id"],"baseUrl":[1,"base-url"],"ctaText":[1,"cta-text"],"product":[32],"productFeatures":[32],"planCosts":[32],"planFeatures":[32],"userSelection":[32]}]]]], options);
   });
@@ -12,0 +12,0 @@ };

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

 'use strict';
 
-const core = require('./core-514f9636.js');
+const core = require('./core-57642cb9.js');
 
 core.patchBrowser().then(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);
+  return core.bootstrapLazy([["manifold-plan-matrix.cjs",[[0,"manifold-plan-matrix",{"gatewayUrl":[1,"gateway-url"],"graphqlUrl":[1,"graphql-url"],"productId":[1,"product-id"],"clientId":[1,"client-id"],"baseUrl":[1,"base-url"],"ctaText":[1,"cta-text"],"product":[32],"productFeatures":[32],"planCosts":[32],"planFeatures":[32],"userSelection":[32]}]]]], options);
 });

dist/collection/collection-manifest.json

 {
   "entries": [
-    "components/manifold-button/manifold-button.js",
-    "components/manifold-checkbox/manifold-checkbox.js",
-    "components/manifold-cost-tiers/manifold-cost-tiers.js",
-    "components/manifold-empty-cell/manifold-empty-cell.js",
-    "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"
@@ -16,4 +7,4 @@ ],
     "name": "@stencil/core",
-    "version": "1.8.9",
-    "typescriptVersion": "3.7.5"
+    "version": "1.8.11",
+    "typescriptVersion": "3.8.2"
   },
@@ -20,0 +11,0 @@ "collections": [],

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

 import { h } from "@stencil/core";
-import { PlanFeatureType, } from '../../types/graphql';
+import { chevron_up_down } from '@manifoldco/icons';
+import merge from 'deepmerge';
+import { PlanFeatureType } from '../../types/graphql';
+import { toUSD } from '../../utils/cost';
+import { defaultFeatureValue, fetchPlanCost } from '../../utils/feature';
+import { CLIENT_ID_WARNING } from './warning';
+import FixedFeature from './fixed-feature';
+import MeteredFeature from './metered-feature';
+import PlanCost from './plan-cost';
+import SkeletonLoader from './skeleton';
 import query from './product.graphql';
-import { CLIENT_ID_WARNING } from './warning';
+// settings
 const GRAPHQL_ENDPOINT = 'https://api.manifold.co/graphql';
+const GATEWAY_ENDPOINT = 'https://api.manifold.co/v1';
 const MANIFOLD_CLIENT_ID = 'Manifold-Client-ID';
 export class ManifoldPricing {
     constructor() {
+        // Gateway endpoint (TEMP)
+        this.gatewayUrl = GATEWAY_ENDPOINT;
+        // GraphQL endpoint (TEMP)
+        this.graphqlUrl = GRAPHQL_ENDPOINT;
         // Passed client ID header to the graphql calls
@@ -15,6 +29,8 @@ this.clientId = '';
         this.ctaText = 'Get Started';
-        // Graphql enpoint (TEMP)
-        this.graphqlUrl = GRAPHQL_ENDPOINT;
-        // Loading state
-        this.loading = true;
+        // Product features
+        this.productFeatures = { fixed: {}, metered: {}, configurable: {} };
+        // Plan features
+        this.planFeatures = {};
+        // User selection
+        this.userSelection = {};
     }
@@ -35,168 +51,171 @@ refetchProduct(newVal) {
     }
-    fetchProduct(productID) {
-        const variables = { id: productID, first: 50 };
-        fetch(this.graphqlUrl || GRAPHQL_ENDPOINT, {
+    async fetchProduct(productID) {
+        const variables = { id: productID };
+        const res = await fetch(`${this.graphqlUrl}`, {
             method: 'POST',
             headers: Object.assign({ 'Content-Type': 'application/json', Connection: 'keep-alive' }, (this.clientId ? { [MANIFOLD_CLIENT_ID]: this.clientId } : {})),
-            body: JSON.stringify({
-                query,
-                variables,
-            }),
-        })
-            .then(res => {
-            return res.json();
-        })
-            .then(({ data }) => {
-            if (data.product) {
-                this.product = data.product;
-                this.createPlans();
+            body: JSON.stringify({ query, variables }),
+        }).then(body => body.json());
+        const data = res.data;
+        if (!data || !data.product) {
+            return;
+        }
+        // save result to state
+        this.product = data.product;
+        // create map of all product features in fixed / metered / configurable order
+        const fixed = data.product.fixedFeatures.edges.reduce((features, { node }) => (Object.assign(Object.assign({}, features), { [node.label]: node })), {});
+        const metered = data.product.meteredFeatures.edges.reduce((features, { node }) => (Object.assign(Object.assign({}, features), { [node.label]: node })), {});
+        const configurable = data.product.configurableFeatures.edges.reduce((features, { node }) => (Object.assign(Object.assign({}, features), { [node.label]: node })), {});
+        this.productFeatures = { fixed, metered, configurable };
+        // create map of plan costs, plan feature values, and default user selection
+        const featureLabels = Object.keys(Object.assign(Object.assign(Object.assign({}, fixed), metered), configurable));
+        const planCosts = {};
+        const planFeatures = {};
+        const userSelection = {};
+        // iterate through plans to gather costs, features, and configurable feature defaults
+        data.product.plans.edges.forEach(({ node: plan }) => {
+            // add cost to map
+            planCosts[plan.id] = plan.cost;
+            // add features to map
+            planFeatures[plan.id] = featureLabels.reduce((labels, label) => {
+                const planHasFeature = [
+                    ...plan.fixedFeatures.edges,
+                    ...plan.meteredFeatures.edges,
+                    ...plan.configurableFeatures.edges,
+                ].find(({ node: feature }) => feature.label === label);
+                return Object.assign(Object.assign({}, labels), { [label]: planHasFeature ? planHasFeature.node : undefined });
+            }, {});
+            // add configurable feature defaults
+            if (plan.configurableFeatures.edges.length) {
+                userSelection[plan.id] = plan.configurableFeatures.edges.reduce((features, { node: feature }) => (Object.assign(Object.assign({}, features), { [feature.label]: defaultFeatureValue(feature) })), {});
             }
         });
+        this.planFeatures = planFeatures;
+        this.planCosts = planCosts;
+        this.userSelection = userSelection;
+        this.fetchCosts(); // get initial plan costs, if any
     }
-    createPlans() {
-        var _a, _b, _c, _d, _e;
-        if (this.product) {
-            // Knarley set of reducers to generate a TabelRef object containing a label (DisplayName) and an index to populate the correct cell.
-            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, _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: n }) => {
-                    // Check if key exists
-                    if (fixedAccumulator[n.displayName]) {
-                        return fixedAccumulator;
-                    }
-                    // Add new key
-                    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: n }) => {
-                    // Check if key exists
-                    if (meteredAccumulator[n.label]) {
-                        return meteredAccumulator;
-                    }
-                    // Add new key
-                    return Object.assign({ [n.label]: {
-                            tierLabel: n.displayName,
-                        } }, meteredAccumulator);
-                }, {});
-                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.labels = features || {};
-            this.plans = (_e = (_d = this.product) === null || _d === void 0 ? void 0 : _d.plans) === null || _e === void 0 ? void 0 : _e.edges;
-            this.loading = false;
-        }
-        else {
-            console.warn('There was a problem with the API');
-        }
+    fetchCosts() {
+        // this.userSelection should only contain configurable plans
+        Object.entries(this.userSelection).forEach(([planID, selection]) => {
+            const oldCost = this.planCosts[planID];
+            // animate plan cost calculation, but only if it’s taking a while (prevents flickering)
+            let flickerStopper;
+            flickerStopper = setTimeout(() => {
+                const newCosts = merge(this.planCosts, {});
+                delete newCosts[planID];
+                this.planCosts = newCosts;
+                flickerStopper = undefined;
+            }, 150);
+            // fetch plan cost for this configurable plan
+            fetchPlanCost({ planID, selection, url: GATEWAY_ENDPOINT }).then(cost => {
+                if (typeof cost === 'number') {
+                    clearTimeout(flickerStopper);
+                    this.planCosts = merge(this.planCosts, { [planID]: cost });
+                }
+                else {
+                    console.error('Error retrieving cost');
+                    this.planCosts = merge(this.planCosts, { [planID]: oldCost });
+                }
+            });
+        });
     }
-    addClass(obj, baseClass = '') {
-        const conditionalClasses = Object.keys(obj).map(cl => (obj[cl] ? cl : ''));
-        return `${baseClass} ${conditionalClasses.join(' ')}`;
+    setFeature({ planID, featureLabel, featureValue, }) {
+        this.userSelection = merge(this.userSelection, { [planID]: { [featureLabel]: featureValue } });
+        this.fetchCosts();
     }
-    fixedFeatures(displayValue, planIndex) {
-        if (displayValue === 'true' || displayValue === 'false') {
-            return (h("div", { class: "mp--cell mp--cell__body" },
-                h("manifold-checkbox", { "input-id": `${planIndex}-${displayValue}`, name: displayValue, checked: displayValue === 'true' })));
-        }
-        return h("div", { class: "mp--cell mp--cell__body" }, displayValue);
-    }
-    meteredFeatures(numericDetails) {
-        if (numericDetails.costTiers.length === 0) {
-            return (h("div", { class: "mp--cell mp--cell__body" },
-                h("manifold-empty-cell", null)));
-        }
-        return (h("div", { class: "mp--cell mp--cell__body mp--cell__block" },
-            h("manifold-metered", null, numericDetails.costTiers.map(({ limit, cost }, i) => {
-                var _a;
-                const previous = numericDetails.costTiers[i - 1];
-                const min = ((_a = previous) === null || _a === void 0 ? void 0 : _a.limit) ? previous.limit : 0;
-                return (h("manifold-cost-tiers", { "min-limit": min, "max-limit": limit, cost: cost, unit: numericDetails.unit }));
-            }))));
-    }
-    configurableFeatures(type, numericDetails, featureOptions) {
-        var _a, _b, _c, _d;
-        switch (type) {
-            case PlanFeatureType.String:
+    displayConfigurable({ planID, feature }) {
+        switch (feature.type) {
+            case PlanFeatureType.String: {
                 return (h("div", { class: "mp--cell mp--cell__body" },
-                    h("manifold-select", { options: featureOptions })));
-            case PlanFeatureType.Number:
+                    h("label", { class: "mp--select" },
+                        h("select", { class: "mp--select__input", onChange: e => this.setFeature({
+                                planID,
+                                featureLabel: feature.label,
+                                featureValue: e.target.value,
+                            }) }, (feature.featureOptions || []).map(option => (h("option", { value: option.value },
+                            h("span", null, option.displayName),
+                            h("span", null,
+                                " (",
+                                toUSD(option.cost),
+                                ")"))))),
+                        h("svg", { class: "mp--select__chevron", viewBox: "0 0 1024 1024", xmlns: "http://www.w3.org/2000/svg", "xmlns-x": "http://www.w3.org/1999/xlink" },
+                            h("path", { d: chevron_up_down })),
+                        h("div", { class: "mp--select__border" }))));
+            }
+            case PlanFeatureType.Number: {
+                const { numericDetails: { max, min, increment, unit }, } = feature;
+                const setFeature = (e) => this.setFeature({
+                    planID,
+                    featureLabel: feature.label,
+                    featureValue: e.target.value,
+                });
                 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 })));
-                }
+                    h("label", { class: "mp--numeric-range" },
+                        h("input", { class: "mp--numeric-range__input", inputmode: "numeric", max: max, min: min, name: "numericRange", onChange: setFeature, onKeyUp: setFeature, pattern: "[0-9]*", step: increment, type: "number", value: this.userSelection[planID][feature.label] || min }),
+                        h("span", { class: "mp--numeric-range__desc" },
+                            min,
+                            " \u2013 ",
+                            max,
+                            " ",
+                            unit))));
+            }
+            case PlanFeatureType.Boolean: {
                 return (h("div", { class: "mp--cell mp--cell__body" },
-                    h("manifold-empty-cell", null)));
+                    h("label", { class: "mp--toggle" },
+                        h("input", { class: "mp--toggle__input", type: "checkbox", onChange: e => {
+                                this.setFeature({
+                                    planID,
+                                    featureLabel: feature.label,
+                                    featureValue: e.target.checked,
+                                });
+                            }, value: "on" }),
+                        h("div", { class: "mp--toggle__toggle" }))));
+            }
             default:
-                return (h("div", { class: "mp--cell mp--cell__body" },
-                    h("manifold-empty-cell", null)));
+                return null;
         }
     }
     render() {
-        if (this.loading) {
-            return h("div", null, "Loading...");
+        // 💀 Skeleton Loader
+        if (!this.product) {
+            return h(SkeletonLoader, null);
         }
-        if (this.product && !this.product.plans) {
-            return h("div", null, "error");
-        }
-        const tierLabels = (this.labels && Object.values(this.labels).map((feature) => feature.tierLabel)) ||
-            [];
-        const gridColumns = this.plans.length + 1;
-        const gridRows = tierLabels.length + 2; // +1 for the "Get Started" row
-        // Pass column count into css grid
-        this.el.style.setProperty('--manifold-table-columns', `${gridColumns}`);
-        this.el.style.setProperty('--manifold-table-rows', `${gridRows}`);
-        return (h("div", { class: "mp" },
-            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" }),
-            tierLabels.map(label => {
-                return (h("div", { class: "mp--cell  mp--cell__sticky mp--cell__bls mp--cell__al mp--cell__th" }, label));
-            }),
-            h("div", { class: "mp--cell mp--cell__sticky mp--cell__bls mp--cell__bbs mp--cell__al mp--cell__th mp--cell__rounded-bl" }),
-            this.plans
-                .sort((a, b) => a.node.cost - b.node.cost)
-                .map((plan, i) => [
-                h("div", { class: this.addClass({
-                        'mp--cell__rounded-tr': i === gridColumns - 2,
-                    }, 'mp--cell mp--cell__bts mp--cell__thead mp--cell__thead mp--cell__th') },
-                    h("manifold-thead", { "title-text": plan.node.displayName, plan: plan })),
-                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: { label: l } }) => {
-                        return label === l;
-                    });
-                    const configurableFeaturesMatch = plan.node.configurableFeatures.edges.find(({ node: { label: l } }) => {
-                        return label === l;
-                    });
-                    if (fixedFeatureMatch) {
-                        return this.fixedFeatures(fixedFeatureMatch.node.displayValue, ii);
-                    }
-                    if (meteredFeaturesMatch) {
-                        return this.meteredFeatures(meteredFeaturesMatch.node.numericDetails);
-                    }
-                    if (configurableFeaturesMatch) {
-                        return this.configurableFeatures(configurableFeaturesMatch.node.type, configurableFeaturesMatch.node.numericDetails, configurableFeaturesMatch.node.featureOptions);
-                    }
-                    return (h("div", { class: "mp--cell mp--cell__body" },
-                        h("manifold-empty-cell", null)));
-                }),
-                h("div", { class: this.addClass({
-                        'mp--cell__brs mp--cell__rounded-br': i === gridColumns - 2,
-                    }, 'mp--cell mp--cell__body mp--cell__bbs') },
-                    h("manifold-button", { href: this.baseUrl }, this.ctaText)),
-            ])));
+        const gridColumns = 1 + this.product.plans.edges.length; // + 1 for features column
+        const gridRows = 1 +
+            Object.keys(Object.assign(Object.assign(Object.assign({}, this.productFeatures.fixed), this.productFeatures.metered), this.productFeatures.configurable)).length +
+            1; // + 1 for headings + 1 for CTA row
+        return (h("div", { class: "mp", style: { '--table-columns': `${gridColumns}`, '--table-rows': `${gridRows}` } },
+            h("div", { class: "mp--cell mp--cell__sticky mp--cell__bls mp--cell__al mp--cell__th mp--cell__thead mp--cell__bts", "data-column-first": true, "data-row-first": true }),
+            Object.values(Object.assign(Object.assign(Object.assign({}, this.productFeatures.fixed), this.productFeatures.metered), this.productFeatures.configurable)).map(feature => (h("div", { class: "mp--cell mp--cell__sticky mp--cell__bls mp--cell__al mp--cell__th" }, feature.displayName))),
+            h("div", { class: "mp--cell mp--cell__sticky mp--cell__bls mp--cell__bbs mp--cell__al mp--cell__th", "data-column-first": true, "data-row-last": true }),
+            this.product.plans.edges.map(({ node: plan }, planIndex) => {
+                const lastColumn = planIndex === gridColumns - 2 || undefined;
+                return [
+                    h("div", { class: "mp--cell mp--cell__bts mp--cell__thead mp--cell__thead mp--cell__th", "data-row-first": true, "data-column-last": lastColumn },
+                        plan.displayName,
+                        h("p", { class: "mp--plan-cost" },
+                            h(PlanCost, { cost: this.planCosts[plan.id], metered: plan.meteredFeatures.edges.length > 0 }))),
+                    Object.values(this.planFeatures[plan.id]).map(feature => {
+                        // fixed feature
+                        if (feature && this.productFeatures.fixed[feature.label]) {
+                            return h(FixedFeature, { displayValue: feature.displayValue });
+                        }
+                        // metered feature
+                        if (feature && this.productFeatures.metered[feature.label]) {
+                            return h(MeteredFeature, { feature: feature });
+                        }
+                        // configurable
+                        if (feature && this.productFeatures.configurable[feature.label]) {
+                            const configurableFeature = feature;
+                            return this.displayConfigurable({ planID: plan.id, feature: configurableFeature });
+                        }
+                        // undefined / disabled feature
+                        return (h("div", { class: "mp--cell mp--cell__body" },
+                            h("span", { class: "mp--empty-cell" }, "\u2022")));
+                    }),
+                    h("div", { class: "mp--cell mp--cell__body mp--cell__bbs", "data-row-last": true, "data-column-last": lastColumn },
+                        h("a", { class: "mp--button", id: `manifold-cta-plan-${plan.id}`, href: this.baseUrl }, this.ctaText)),
+                ];
+            })));
     }
@@ -211,3 +230,3 @@ static get is() { return "manifold-plan-matrix"; }
     static get properties() { return {
-        "productId": {
+        "gatewayUrl": {
             "type": "string",
@@ -226,6 +245,7 @@ "mutable": false,
             },
-            "attribute": "product-id",
-            "reflect": false
+            "attribute": "gateway-url",
+            "reflect": false,
+            "defaultValue": "GATEWAY_ENDPOINT"
         },
-        "clientId": {
+        "graphqlUrl": {
             "type": "string",
@@ -244,7 +264,7 @@ "mutable": false,
             },
-            "attribute": "client-id",
+            "attribute": "graphql-url",
             "reflect": false,
-            "defaultValue": "''"
+            "defaultValue": "GRAPHQL_ENDPOINT"
         },
-        "baseUrl": {
+        "productId": {
             "type": "string",
@@ -263,7 +283,24 @@ "mutable": false,
             },
-            "attribute": "base-url",
+            "attribute": "product-id",
+            "reflect": false
+        },
+        "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": "'/signup'"
+            "defaultValue": "''"
         },
-        "ctaText": {
+        "baseUrl": {
             "type": "string",
@@ -282,7 +319,7 @@ "mutable": false,
             },
-            "attribute": "cta-text",
+            "attribute": "base-url",
             "reflect": false,
-            "defaultValue": "'Get Started'"
+            "defaultValue": "'/signup'"
         },
-        "graphqlUrl": {
+        "ctaText": {
             "type": "string",
@@ -301,5 +338,5 @@ "mutable": false,
             },
-            "attribute": "graphql-url",
+            "attribute": "cta-text",
             "reflect": false,
-            "defaultValue": "GRAPHQL_ENDPOINT"
+            "defaultValue": "'Get Started'"
         }
@@ -309,7 +346,7 @@ }; }
         "product": {},
-        "plans": {},
-        "labels": {},
-        "loading": {}
+        "productFeatures": {},
+        "planCosts": {},
+        "planFeatures": {},
+        "userSelection": {}
     }; }
-    static get elementRef() { return "el"; }
     static get watchers() { return [{
@@ -316,0 +353,0 @@ "propName": "productId",

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

@@ -1,1 +0,1 @@
-import{p as t,b as i}from"./p-64ddd5a4.js";t().then(t=>i([["p-oxeg9jen",[[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));
+import{p as a,b as t}from"./p-932bdcd6.js";a().then(a=>t([["p-a3ken2ha",[[0,"manifold-plan-matrix",{gatewayUrl:[1,"gateway-url"],graphqlUrl:[1,"graphql-url"],productId:[1,"product-id"],clientId:[1,"client-id"],baseUrl:[1,"base-url"],ctaText:[1,"cta-text"],product:[32],productFeatures:[32],planCosts:[32],planFeatures:[32],userSelection:[32]}]]]],a));

dist/types/components.d.ts

@@ -10,30 +10,5 @@ /* eslint-disable */
 import { HTMLStencilElement, JSXBase } from './stencil.core';
-import {
-  PlanConfigurableFeatureOption,
-  ProductQuery,
-} from './types/graphql';
 
+
 export namespace Components {
-  interface ManifoldButton {
-    'href'?: string;
-  }
-  interface ManifoldCheckbox {
-    'checked'?: boolean;
-    'inputId'?: string;
-    'name'?: string;
-  }
-  interface ManifoldCostTiers {
-    'cost'?: number;
-    'maxLimit'?: number;
-    'minLimit'?: number;
-    'unit'?: string;
-  }
-  interface ManifoldEmptyCell {}
-  interface ManifoldMetered {}
-  interface ManifoldNumericInput {
-    'increment'?: number;
-    'max'?: number;
-    'min'?: number;
-    'unit'?: string;
-  }
   interface ManifoldPlanMatrix {
@@ -43,16 +18,6 @@ 'baseUrl'?: string;
     'ctaText'?: string;
+    'gatewayUrl'?: string;
     'graphqlUrl'?: string;
     'productId'?: string;
   }
-  interface ManifoldSelect {
-    'options'?: PlanConfigurableFeatureOption[];
-  }
-  interface ManifoldThead {
-    'plan'?: ProductQuery['product']['plans']['edges'][0];
-    'titleText'?: string;
-  }
-  interface ManifoldToggle {
-    'off': number;
-    'on': number;
-  }
 }
@@ -63,38 +28,2 @@
 
-  interface HTMLManifoldButtonElement extends Components.ManifoldButton, HTMLStencilElement {}
-  var HTMLManifoldButtonElement: {
-    prototype: HTMLManifoldButtonElement;
-    new (): HTMLManifoldButtonElement;
-  };
-
-  interface HTMLManifoldCheckboxElement extends Components.ManifoldCheckbox, HTMLStencilElement {}
-  var HTMLManifoldCheckboxElement: {
-    prototype: HTMLManifoldCheckboxElement;
-    new (): HTMLManifoldCheckboxElement;
-  };
-
-  interface HTMLManifoldCostTiersElement extends Components.ManifoldCostTiers, HTMLStencilElement {}
-  var HTMLManifoldCostTiersElement: {
-    prototype: HTMLManifoldCostTiersElement;
-    new (): HTMLManifoldCostTiersElement;
-  };
-
-  interface HTMLManifoldEmptyCellElement extends Components.ManifoldEmptyCell, HTMLStencilElement {}
-  var HTMLManifoldEmptyCellElement: {
-    prototype: HTMLManifoldEmptyCellElement;
-    new (): HTMLManifoldEmptyCellElement;
-  };
-
-  interface HTMLManifoldMeteredElement extends Components.ManifoldMetered, HTMLStencilElement {}
-  var HTMLManifoldMeteredElement: {
-    prototype: HTMLManifoldMeteredElement;
-    new (): HTMLManifoldMeteredElement;
-  };
-
-  interface HTMLManifoldNumericInputElement extends Components.ManifoldNumericInput, HTMLStencilElement {}
-  var HTMLManifoldNumericInputElement: {
-    prototype: HTMLManifoldNumericInputElement;
-    new (): HTMLManifoldNumericInputElement;
-  };
-
   interface HTMLManifoldPlanMatrixElement extends Components.ManifoldPlanMatrix, HTMLStencilElement {}
@@ -105,31 +34,4 @@ var HTMLManifoldPlanMatrixElement: {
   };
-
-  interface HTMLManifoldSelectElement extends Components.ManifoldSelect, HTMLStencilElement {}
-  var HTMLManifoldSelectElement: {
-    prototype: HTMLManifoldSelectElement;
-    new (): HTMLManifoldSelectElement;
-  };
-
-  interface HTMLManifoldTheadElement extends Components.ManifoldThead, HTMLStencilElement {}
-  var HTMLManifoldTheadElement: {
-    prototype: HTMLManifoldTheadElement;
-    new (): HTMLManifoldTheadElement;
-  };
-
-  interface HTMLManifoldToggleElement extends Components.ManifoldToggle, HTMLStencilElement {}
-  var HTMLManifoldToggleElement: {
-    prototype: HTMLManifoldToggleElement;
-    new (): HTMLManifoldToggleElement;
-  };
   interface HTMLElementTagNameMap {
-    'manifold-button': HTMLManifoldButtonElement;
-    'manifold-checkbox': HTMLManifoldCheckboxElement;
-    'manifold-cost-tiers': HTMLManifoldCostTiersElement;
-    'manifold-empty-cell': HTMLManifoldEmptyCellElement;
-    'manifold-metered': HTMLManifoldMeteredElement;
-    'manifold-numeric-input': HTMLManifoldNumericInputElement;
     'manifold-plan-matrix': HTMLManifoldPlanMatrixElement;
-    'manifold-select': HTMLManifoldSelectElement;
-    'manifold-thead': HTMLManifoldTheadElement;
-    'manifold-toggle': HTMLManifoldToggleElement;
   }
@@ -139,24 +41,2 @@ }
 declare namespace LocalJSX {
-  interface ManifoldButton {
-    'href'?: string;
-  }
-  interface ManifoldCheckbox {
-    'checked'?: boolean;
-    'inputId'?: string;
-    'name'?: string;
-  }
-  interface ManifoldCostTiers {
-    'cost'?: number;
-    'maxLimit'?: number;
-    'minLimit'?: number;
-    'unit'?: string;
-  }
-  interface ManifoldEmptyCell {}
-  interface ManifoldMetered {}
-  interface ManifoldNumericInput {
-    'increment'?: number;
-    'max'?: number;
-    'min'?: number;
-    'unit'?: string;
-  }
   interface ManifoldPlanMatrix {
@@ -166,28 +46,9 @@ 'baseUrl'?: string;
     'ctaText'?: string;
+    'gatewayUrl'?: string;
     'graphqlUrl'?: string;
     'productId'?: string;
   }
-  interface ManifoldSelect {
-    'options'?: PlanConfigurableFeatureOption[];
-  }
-  interface ManifoldThead {
-    'plan'?: ProductQuery['product']['plans']['edges'][0];
-    'titleText'?: string;
-  }
-  interface ManifoldToggle {
-    'off'?: number;
-    'on'?: number;
-  }
 
   interface IntrinsicElements {
-    'manifold-button': ManifoldButton;
-    'manifold-checkbox': ManifoldCheckbox;
-    'manifold-cost-tiers': ManifoldCostTiers;
-    'manifold-empty-cell': ManifoldEmptyCell;
-    'manifold-metered': ManifoldMetered;
-    'manifold-numeric-input': ManifoldNumericInput;
     'manifold-plan-matrix': ManifoldPlanMatrix;
-    'manifold-select': ManifoldSelect;
-    'manifold-thead': ManifoldThead;
-    'manifold-toggle': ManifoldToggle;
   }
@@ -202,12 +63,3 @@ }
     interface IntrinsicElements {
-      'manifold-button': LocalJSX.ManifoldButton & JSXBase.HTMLAttributes<HTMLManifoldButtonElement>;
-      'manifold-checkbox': LocalJSX.ManifoldCheckbox & JSXBase.HTMLAttributes<HTMLManifoldCheckboxElement>;
-      'manifold-cost-tiers': LocalJSX.ManifoldCostTiers & JSXBase.HTMLAttributes<HTMLManifoldCostTiersElement>;
-      'manifold-empty-cell': LocalJSX.ManifoldEmptyCell & JSXBase.HTMLAttributes<HTMLManifoldEmptyCellElement>;
-      '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>;
     }
@@ -214,0 +66,0 @@ }

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

@@ -1,14 +0,34 @@
-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]: tierLabel;
-};
-declare type NumericDetails = ProductQuery['product']['plans']['edges'][0]['node']['meteredFeatures']['edges'][0]['node']['numericDetails'];
+import { ProductQuery } from '../../types/graphql';
+declare type ProductFixed = ProductQuery['product']['fixedFeatures']['edges'][0]['node'];
+declare type ProductMetered = ProductQuery['product']['meteredFeatures']['edges'][0]['node'];
+declare type ProductConfigurable = ProductQuery['product']['configurableFeatures']['edges'][0]['node'];
+interface ProductFeatures {
+    fixed: {
+        [label: string]: ProductFixed;
+    };
+    metered: {
+        [label: string]: ProductMetered;
+    };
+    configurable: {
+        [label: string]: ProductConfigurable;
+    };
+}
+declare type ProductPlan = ProductQuery['product']['plans']['edges'][0]['node'];
+declare type PlanFixedFeature = ProductPlan['fixedFeatures']['edges'][0]['node'];
+declare type PlanMeteredFeature = ProductPlan['meteredFeatures']['edges'][0]['node'];
+declare type PlanConfigurableFeature = ProductPlan['configurableFeatures']['edges'][0]['node'];
+interface PlanFeatures {
+    [planID: string]: {
+        [featureLabel: string]: PlanFixedFeature | PlanMeteredFeature | PlanConfigurableFeature | undefined;
+    };
+}
+declare type UserValue = string | number | boolean;
+interface UserSelection {
+    [planID: string]: {
+        [featureLabel: string]: UserValue;
+    };
+}
 export declare class ManifoldPricing {
-    el: HTMLElement;
+    gatewayUrl?: string;
+    graphqlUrl?: string;
     productId?: string;
@@ -18,17 +38,24 @@ clientId?: string;
     ctaText?: string;
-    graphqlUrl?: string;
     product?: ProductQuery['product'];
-    plans: ProductQuery['product']['plans']['edges'];
-    labels: TableRef;
-    loading: boolean;
+    productFeatures: ProductFeatures;
+    planCosts: {
+        [planID: string]: number;
+    };
+    planFeatures: PlanFeatures;
+    userSelection: UserSelection;
     refetchProduct(newVal?: string): void;
     componentWillLoad(): void;
-    fetchProduct(productID: string): void;
-    createPlans(): void;
-    addClass(obj: ConditionalClassesObj, baseClass?: string): string;
-    fixedFeatures(displayValue: PlanFixedFeature['displayName'], planIndex: number): any;
-    meteredFeatures(numericDetails: NumericDetails): any;
-    configurableFeatures(type: PlanFeatureType, numericDetails?: PlanConfigurableFeatureNumericDetails, featureOptions?: PlanConfigurableFeatureOption[]): any;
+    fetchProduct(productID: string): Promise<void>;
+    fetchCosts(): void;
+    setFeature({ planID, featureLabel, featureValue, }: {
+        planID: string;
+        featureLabel: string;
+        featureValue: UserValue;
+    }): void;
+    displayConfigurable({ planID, feature }: {
+        planID: string;
+        feature: PlanConfigurableFeature;
+    }): any;
     render(): any;
 }
 export {};

dist/types/stencil.core.d.ts

@@ -496,3 +496,6 @@ /**
     accept?: string;
+    allowdirs?: boolean;
     alt?: string;
+    autoCapitalize?: string;
+    autocapitalize?: string;
     autoComplete?: string;
@@ -506,3 +509,7 @@ autocomplete?: string;
     crossorigin?: string;
+    defaultChecked?: boolean;
+    defaultValue?: string;
+    dirName?: string;
     disabled?: boolean;
+    files?: any;
     form?: string;
@@ -520,2 +527,4 @@ formAction?: string;
     height?: number | string;
+    indeterminate?: boolean;
+    inputmode?: string;
     list?: string;
@@ -535,2 +544,5 @@ max?: number | string;
     required?: boolean;
+    selectionStart?: number | string;
+    selectionEnd?: number | string;
+    selectionDirection?: string;
     size?: number;
@@ -541,2 +553,6 @@ src?: string;
     value?: string | string[] | number;
+    valueAsDate?: any;
+    valueAsNumber?: any;
+    webkitdirectory?: boolean;
+    webkitEntries?: any;
     width?: number | string;
@@ -543,0 +559,0 @@ }

dist/types/types/graphql.d.ts

@@ -953,3 +953,2 @@ export declare type Maybe<T> = T;
 export declare type ProductQueryVariables = {
-    first: Scalars['Int'];
     id: Scalars['ID'];
@@ -962,3 +961,76 @@ };
         __typename?: 'Product';
-    } & {
+    } & Pick<Product, 'id' | 'displayName'> & {
+        fixedFeatures: Maybe<({
+            __typename?: 'ProductFixedFeatureConnection';
+        } & {
+            edges: Array<({
+                __typename?: 'ProductFixedFeatureEdge';
+            } & {
+                node: ({
+                    __typename?: 'ProductFixedFeature';
+                } & Pick<ProductFixedFeature, 'label' | 'displayName'> & {
+                    featureOptions: Maybe<Array<({
+                        __typename?: 'ProductFixedFeatureOption';
+                    } & Pick<ProductFixedFeatureOption, 'value' | 'displayName'>)>>;
+                });
+            })>;
+        })>;
+        meteredFeatures: Maybe<({
+            __typename?: 'ProductMeteredFeatureConnection';
+        } & {
+            edges: Array<({
+                __typename?: 'ProductMeteredFeatureEdge';
+            } & {
+                node: ({
+                    __typename?: 'ProductMeteredFeature';
+                } & Pick<ProductMeteredFeature, 'label' | 'displayName'> & {
+                    numericOptions: Maybe<Array<({
+                        __typename?: 'ProductMeteredFeatureNumericOptions';
+                    } & Pick<ProductMeteredFeatureNumericOptions, 'label' | 'displayName'> & {
+                        numericDetails: ({
+                            __typename?: 'ProductMeteredFeatureNumericDetails';
+                        } & Pick<ProductMeteredFeatureNumericDetails, 'unit'> & {
+                            costTiers: Array<({
+                                __typename?: 'ProductFeatureCostTier';
+                            } & Pick<ProductFeatureCostTier, 'cost' | 'limit'>)>;
+                        });
+                    })>>;
+                });
+            })>;
+        })>;
+        configurableFeatures: Maybe<({
+            __typename?: 'ProductConfigurableFeatureConnection';
+        } & {
+            edges: Array<({
+                __typename?: 'ProductConfigurableFeatureEdge';
+            } & {
+                node: ({
+                    __typename?: 'ProductNumberConfigurableFeature';
+                } & Pick<ProductNumberConfigurableFeature, 'label' | 'displayName'> & {
+                    numericOptions: Maybe<Array<({
+                        __typename?: 'ProductConfigurableFeatureNumericOptions';
+                    } & Pick<ProductConfigurableFeatureNumericOptions, 'label' | 'displayName'> & {
+                        numericDetails: ({
+                            __typename?: 'ProductConfigurableFeatureNumericDetails';
+                        } & Pick<ProductConfigurableFeatureNumericDetails, 'increment' | 'max' | 'min' | 'unit'> & {
+                            costTiers: Array<({
+                                __typename?: 'ProductFeatureCostTier';
+                            } & Pick<ProductFeatureCostTier, 'cost' | 'limit'>)>;
+                        });
+                    })>>;
+                }) | ({
+                    __typename?: 'ProductStringConfigurableFeature';
+                } & Pick<ProductStringConfigurableFeature, 'label' | 'displayName'> & {
+                    featureOptions: Maybe<Array<({
+                        __typename?: 'ProductConfigurableFeatureOption';
+                    } & Pick<ProductConfigurableFeatureOption, 'cost' | 'displayName' | 'value'>)>>;
+                }) | ({
+                    __typename?: 'ProductBooleanConfigurableFeature';
+                } & Pick<ProductBooleanConfigurableFeature, 'label' | 'displayName'> & {
+                    featureOptions: Maybe<Array<({
+                        __typename?: 'ProductConfigurableFeatureOption';
+                    } & Pick<ProductConfigurableFeatureOption, 'cost' | 'displayName' | 'value'>)>>;
+                });
+            })>;
+        })>;
         plans: Maybe<({
@@ -972,3 +1044,3 @@ __typename?: 'PlanConnection';
                     __typename?: 'Plan';
-                } & Pick<Plan, 'displayName' | 'cost' | 'id'> & {
+                } & Pick<Plan, 'cost' | 'displayName' | 'id'> & {
                     fixedFeatures: Maybe<({
@@ -999,3 +1071,3 @@ __typename?: 'PlanFixedFeatureConnection';
                                         __typename?: 'PlanFeatureCostTier';
-                                    } & Pick<PlanFeatureCostTier, 'limit' | 'cost'>)>>;
+                                    } & Pick<PlanFeatureCostTier, 'cost' | 'limit'>)>>;
                                 });
@@ -1002,0 +1074,0 @@ });

package.json

 {
   "name": "@manifoldco/component-plan-matrix",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "private": false,
@@ -23,2 +23,3 @@ "description": "Stencil Component Starter",
     "dev": "npm run build:watch & rm -rf dist loader && wait-on loader/index.cjs.js && npm run storybook",
+    "happo": "npm run build && npm run generate:gql && happo run",
     "generate": "stencil generate",
@@ -36,5 +37,3 @@ "generate:gql": "graphql-codegen --config codegen.yml",
   },
-  "dependencies": {
-    "@manifoldco/icons": "0.0.6"
-  },
+  "dependencies": {},
   "devDependencies": {
@@ -45,2 +44,3 @@ "@graphql-codegen/cli": "^1.12.2",
     "@manifoldco/eslint-plugin-stencil": "^0.4.1",
+    "@manifoldco/icons": "0.0.6",
     "@stencil/core": "^1.8.9",
@@ -52,6 +52,7 @@ "@stencil/postcss": "^1.0.1",
     "@storybook/html": "^5.3.13",
-    "@types/jest": "24.0.25",
+    "@types/jest": "25.1.3",
     "@typescript-eslint/eslint-plugin": "^2.20.0",
     "@typescript-eslint/parser": "^2.20.0",
     "babel-loader": "^8.0.6",
+    "deepmerge": "^4.2.2",
     "eslint": "^6.8.0",
@@ -64,4 +65,6 @@ "eslint-config-airbnb-base": "^14.0.0",
     "graphql": "^14.6.0",
-    "jest": "24.9.0",
-    "jest-cli": "24.9.0",
+    "happo-plugin-typescript": "^1.0.0",
+    "happo.io": "^5.1.5",
+    "jest": "25.1.0",
+    "jest-cli": "25.1.0",
     "postcss-preset-env": "^6.7.0",
@@ -72,6 +75,7 @@ "prettier": "^1.19.1",
     "stylelint-config-prettier": "^8.0.1",
-    "stylelint-config-rational-order": "^0.1.2",
     "stylelint-config-standard": "^19.0.0",
+    "stylelint-order": "^4.0.0",
+    "ts-loader": "^6.2.1",
     "wait-on": "^4.0.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

Dependency count

0

decreased by-100%

Number of low supply chain risk alerts

9

decreased by-50%

Worsened metrics

Total package byte prevSize

993941

decreased by-6.78%

Dev dependency count

36

increased by16.13%

Number of package files

82

decreased by-23.36%

Lines of code

15413

decreased by-11.36%

Dependency changes

• - Removed@manifoldco/icons@0.0.6

• - Removed@manifoldco/icons@0.0.6(transitive)