@manifoldco/manifold-subscription - npm Package Compare versions

Comparing version 0.0.7 to 0.0.8

dist/cjs/loader.cjs.js

@@ -8,5 +8,5 @@ 'use strict';
 const defineCustomElements = (win, options) => index.patchEsm().then(() => {
-  return index.bootstrapLazy([["manifold-configured-feature_4.cjs",[[0,"manifold-configured-feature",{"label":[1],"value":[8]}],[0,"manifold-subscription-create",{"loading":[1028],"isLoadingPlanSelector":[1028,"is-loading-plan-selector"],"errors":[1040],"data":[1040],"planListData":[1040],"setupIntentStatus":[1025,"setup-intent-status"],"setupIntentError":[1025,"setup-intent-error"],"subscribing":[1028],"configuredFeatures":[1040],"calculatedCost":[1026,"calculated-cost"],"isEditing":[1028,"is-editing"],"heading":[1],"planId":[1025,"plan-id"],"ownerId":[1,"owner-id"],"stripePublishableKey":[1,"stripe-publishable-key"],"displayName":[1,"display-name"],"label":[1],"card":[32]},[[0,"manifold-configured-feature-change","updateConfiguredFeature"]]],[0,"manifold-subscription-details",{"subscriptionId":[1,"subscription-id"],"data":[32]}],[0,"manifold-subscription-list",{"connection":[1040],"loading":[1028],"errors":[1040],"data":[1040],"heading":[1],"owner":[1]}]]]], options);
+  return index.bootstrapLazy([["manifold-configured-feature_4.cjs",[[0,"manifold-configured-feature",{"label":[1],"value":[8]}],[0,"manifold-subscription-create",{"loading":[1028],"isLoadingPlanSelector":[1028,"is-loading-plan-selector"],"errors":[1040],"data":[1040],"planListData":[1040],"setupIntentStatus":[1025,"setup-intent-status"],"setupIntentError":[1025,"setup-intent-error"],"subscribing":[1028],"configuredFeatures":[1040],"calculatedCost":[1026,"calculated-cost"],"isEditing":[1028,"is-editing"],"heading":[1],"planId":[1025,"plan-id"],"ownerId":[1,"owner-id"],"stripePublishableKey":[1,"stripe-publishable-key"],"displayName":[1,"display-name"],"label":[1],"card":[32],"cardStatus":[32]},[[0,"manifold-configured-feature-change","updateConfiguredFeature"]]],[0,"manifold-subscription-details",{"subscriptionId":[1,"subscription-id"],"heading":[1],"data":[32]}],[0,"manifold-subscription-list",{"connection":[1040],"loading":[1028],"errors":[1040],"data":[1040],"heading":[1],"owner":[1]}]]]], options);
 });
 
 exports.defineCustomElements = defineCustomElements;

dist/cjs/manifold-configured-feature_4.cjs.entry.js

@@ -479,3 +479,3 @@ 'use strict';
     return (index.h("div", { class: "ManifoldSubscriptionCreate__NumberInput" },
-        index.h("button", { tabindex: "-1", onClick: () => onChange(name, value - increment), disabled: lowerBoundReached || disabled },
+        index.h("button", { type: "button", tabindex: "-1", onClick: () => onChange(name, value - increment), disabled: lowerBoundReached || disabled },
             index.h("i", { innerHTML: minusSvg, title: "increment" })),
@@ -486,3 +486,3 @@ index.h("input", Object.assign({ name: name, type: "number", max: max, min: min, pattern: "[0-9]*", onInput: e => {
             }, required: true, step: increment, value: value, disabled: disabled }, rest)),
-        index.h("button", { tabindex: "-1", onClick: () => onChange(name, value + increment), disabled: upperBoundReached || disabled },
+        index.h("button", { type: "button", tabindex: "-1", onClick: () => onChange(name, value + increment), disabled: upperBoundReached || disabled },
             index.h("i", { innerHTML: plusSvg, title: "increment" }))));
@@ -588,2 +588,4 @@ };
 
+const alertCircleSvg = "<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><g fill-rule=\"evenodd\" clip-rule=\"evenodd\" ><path d=\"M12 3a9 9 0 100 18 9 9 0 000-18zM1 12C1 5.925 5.925 1 12 1s11 4.925 11 11-4.925 11-11 11S1 18.075 1 12z\"/><path d=\"M12 7a1 1 0 011 1v4a1 1 0 11-2 0V8a1 1 0 011-1zM11 16a1 1 0 011-1h.01a1 1 0 110 2H12a1 1 0 01-1-1z\"/></g></svg>";
+
 const BaseCost = props => {
@@ -623,2 +625,8 @@ const { cost, isFreeMonthly, hasMeteredFeatures, compact } = props;
     }
+    if (props.hasError) {
+        return (index.h("div", { class: "ManifoldSubscriptionCreate__CostDisplay", "data-compact": props.compact },
+            index.h("div", { class: "ManifoldSubscriptionCreate__CostDisplay__Error" },
+                index.h("i", { innerHTML: alertCircleSvg }),
+                " Error calculating cost")));
+    }
     // Render cost
@@ -642,8 +650,15 @@ const { compact, isConfigurable, baseCost, meteredFeatures = [] } = props;
 };
-const PlanCard = ({ isLoading, isChecked, plan = defaultPlan }, cta) => (index.h("div", { class: "ManifoldSubscriptionCreate__Card", "data-is-checked": isChecked },
-    index.h("div", { class: "ManifoldSubscriptionCreate__PlanName", "data-is-loading": isLoading }, plan.displayName),
-    index.h("span", { class: "ManifoldSubscriptionCreate__Cost", "data-is-loading": isLoading },
-        index.h(CostDisplay, { baseCost: plan.cost, isConfigurable: true, compact: true })),
-    cta,
-    index.h("i", { class: "ManifoldSubscriptionCreate__Card__Checkmark", innerHTML: checkSvg })));
+const PlanCard = ({ isLoading, isChecked, plan = defaultPlan, errors = [] }, cta) => {
+    if (errors.length > 0) {
+        return null;
+    }
+    return (index.h("div", { class: "ManifoldSubscriptionCreate__Card", "data-is-checked": isChecked },
+        index.h("div", { class: "ManifoldSubscriptionCreate__PlanName" },
+            index.h("span", { "data-is-loading": isLoading }, plan.displayName)),
+        index.h("span", { class: "ManifoldSubscriptionCreate__Cost" },
+            index.h("span", { "data-is-loading": isLoading },
+                index.h(CostDisplay, { baseCost: plan.cost, isConfigurable: true, compact: true }))),
+        cta,
+        index.h("i", { class: "ManifoldSubscriptionCreate__Card__Checkmark", innerHTML: checkSvg })));
+};
 
@@ -675,2 +690,30 @@ const SkeletonPlanSelector = () => (index.h("div", { class: "ManifoldSubscriptionCreate__PlanSelector" },
 
+const filterErrors = (errors = [], field, values, includes = true) => errors.filter(error => {
+    const includesValue = values.includes(error[field]);
+    return includes === true ? includesValue : !includesValue;
+});
+/**
+ *  Predefined UI errors
+ */
+const interfaceError = (label = 'ui') => ({
+    label,
+    type: 'interface',
+    message: `Terminal Interface Error: Cannot load UI. Try your action again later or contact support.`,
+});
+const dataError = (label = 'data', data) => ({
+    label,
+    type: 'data',
+    message: `Data Error: Cannot find ${data}. Try your action again later or contact support.`,
+});
+const subscriptionError = (label = 'subscription') => ({
+    label,
+    type: 'subscription',
+    message: `Subscription Error: Subscription cannot be completed. Try your action again later or contact support.`,
+});
+const validationError = (label, message) => ({
+    label,
+    type: 'validation',
+    message,
+});
+
 const PlanMenu = ({ plans, selectedPlanId, setPlanId, setAllConfiguredFeatures, }) => (index.h("ul", { class: "ManifoldSubscriptionCreate__PlanSelector__Menu" }, plans.map(({ node: plan }) => (index.h("li", null,
@@ -688,4 +731,4 @@ index.h("label", null,
     }
-    const { planId, configuredFeatures, data } = props;
-    if (!data) {
+    const { planId, configuredFeatures, data, errors } = props;
+    if (!data || filterErrors(errors, 'label', ['plan-list-query']).length > 0) {
         return null;
@@ -704,8 +747,15 @@ }
             index.h("footer", { class: "ManifoldSubscriptionCreate__PlanSelector__Footer" },
-                index.h(CostDisplay, { isCalculating: props.calculatedCost === undefined, baseCost: props.calculatedCost || (currentPlan === null || currentPlan === void 0 ? void 0 : currentPlan.cost) || 0, meteredFeatures: currentPlan === null || currentPlan === void 0 ? void 0 : currentPlan.meteredFeatures.edges, isConfigurable: currentPlan ? currentPlan.configurableFeatures.edges.length > 0 : false }),
-                index.h("p", { class: "ManifoldSubscriptionCreate__HelpText" }, "Usage billed at the end of month")))));
+                index.h("div", null,
+                    index.h(CostDisplay, { isCalculating: props.calculatedCost === undefined, baseCost: props.calculatedCost || (currentPlan === null || currentPlan === void 0 ? void 0 : currentPlan.cost) || 0, meteredFeatures: currentPlan === null || currentPlan === void 0 ? void 0 : currentPlan.meteredFeatures.edges, isConfigurable: currentPlan ? currentPlan.configurableFeatures.edges.length > 0 : false, hasError: filterErrors(props.errors, 'label', ['cost']).length > 0 }),
+                    index.h("p", { class: "ManifoldSubscriptionCreate__HelpText" }, "Usage billed at the end of month"))))));
 };
 
+const icons = {
+    error: alertCircleSvg,
+    success: checkSvg,
+};
 const resolveClass = (type) => `ManifoldSubscriptionCreate__Message ${type ? `ManifoldSubscriptionCreate__Message--${type}` : ''}`;
-const Message = ({ type }, children) => (index.h("p", { class: resolveClass(type) }, children));
+const Message = ({ type }, children) => (index.h("p", { class: resolveClass(type) },
+    type && index.h("i", { innerHTML: icons[type] }),
+    children));
 
@@ -721,7 +771,15 @@ const planQuery = "query Plan($planId: ID!) {\n  plan(id: $planId) {\n    displayName\n    cost\n    product {\n      label\n    }\n  }\n  profile {\n    stripeSetupIntentSecret\n    stripeAccount {\n      id\n    }\n  }\n}\n";
         index.registerInstance(this, hostRef);
+        this.cardStatus = 'empty';
         this.loading = false;
         this.isLoadingPlanSelector = false;
+        this.errors = [];
         this.subscribing = false;
         this.configuredFeatures = {};
         this.isEditing = false;
+        this.addErrors = (...errors) => {
+            this.errors = [...this.errors, ...errors];
+        };
+        this.removeErrors = (...labels) => {
+            this.errors = filterErrors(this.errors, 'label', labels, false);
+        };
         this.setConfiguredFeature = (label, value) => {
@@ -735,2 +793,15 @@ this.configuredFeatures = Object.assign(Object.assign({}, this.configuredFeatures), { [label]: value });
             e.preventDefault();
+            await this.removeErrors('subscription', 'card');
+            if (this.cardStatus === 'empty') {
+                this.addErrors(validationError('card', 'Card is empty.'));
+                return;
+            }
+            if (this.cardStatus !== 'complete' || this.cardStatus !== 'complete') {
+                this.addErrors(validationError('card', 'Card is invalid.'));
+                return;
+            }
+            if (!this.connection) {
+                this.addErrors(subscriptionError());
+                throw new Error('Missing property `connection` on `manifold-subscription-create`.');
+            }
             if (this.data && this.stripe && !this.subscribing) {
@@ -746,7 +817,7 @@ this.subscribing = true;
                     this.subscribing = false;
-                    this.setupIntentError = error.message;
-                    return;
+                    this.addErrors(subscriptionError());
+                    throw new Error('Stripe could not confirm card setup with the following credentials:' +
+                        `\n\tStripe Setup Intent Secret: ${stripeSetupIntentSecret}`);
                 }
-                this.setupIntentStatus = setupIntent === null || setupIntent === void 0 ? void 0 : setupIntent.status;
-                if ((setupIntent === null || setupIntent === void 0 ? void 0 : setupIntent.status) === 'succeeded' && this.connection) {
+                if ((setupIntent === null || setupIntent === void 0 ? void 0 : setupIntent.status) === 'succeeded') {
                     const configuredFeatures = Object.keys(this.configuredFeatures).map(key => ({
@@ -761,6 +832,14 @@ label: key,
                     };
-                    const { data, errors } = await this.connection.graphqlFetch({
+                    const { data, errors } = await this.connection
+                        .graphqlFetch({
                         query: createSubscrptionMutation,
                         variables,
+                    })
+                        .catch(err => {
+                        this.addErrors(subscriptionError());
+                        throw new Error(err);
                     });
+                    if (errors) {
+                        this.addErrors(subscriptionError());
+                    }
                     if (data) {
@@ -770,2 +849,5 @@ this.createSuccess.emit({ id: data.createSubscription.data.id });
                 }
+                else {
+                    this.addErrors(subscriptionError());
+                }
                 this.subscribing = false;
@@ -780,12 +862,23 @@ }
             this.isEditing = !this.isEditing;
-            if (!this.connection || !this.data) {
-                return undefined;
+            this.removeErrors('plan-list-query');
+            if (!this.connection) {
+                this.addErrors(interfaceError('plan-list-query'));
+                throw new Error('Missing property `connection` on `manifold-subscription-create`.');
             }
+            if (!this.data) {
+                this.addErrors(dataError('plan-list-query', 'selected plan'));
+                throw new Error('Missing property `data` on `manifold-subscription-create`.');
+            }
             this.isLoadingPlanSelector = true;
-            const { data, errors } = await this.connection.graphqlFetch({
+            const { data, errors } = await this.connection
+                .graphqlFetch({
                 query: planListQuery,
                 variables: { productLabel: (_a = this.data) === null || _a === void 0 ? void 0 : _a.plan.product.label },
+            })
+                .catch(e => {
+                this.addErrors(dataError('plan-list-query', 'all plans for this product'));
+                throw new Error(e);
             });
             if (errors) {
-                this.errors = errors;
+                this.addErrors(dataError('plan-list-query', 'all plans for this product'));
             }
@@ -805,3 +898,3 @@ if (data) {
             element: this.el,
-            componentVersion: '0.0.7',
+            componentVersion: '0.0.8',
             version: 0,
@@ -816,3 +909,3 @@ });
         }
-        // TODO replace token with a Manifold Stripe token.
+        this.removeErrors('stripe-init');
         // Initialize Stripe
@@ -823,4 +916,6 @@ this.stripe = await loadStripe(this.stripePublishableKey, {
         if (!this.stripe) {
-            // TODO handle stripe error
-            return;
+            this.addErrors(interfaceError('stripe-init'));
+            throw new Error('Could not load Stripe with the following credentials:' +
+                `\n\tStripePublishable Key: ${this.stripePublishableKey}` +
+                `\n\tStripe Account ID: ${data.profile.stripeAccount.id}`);
         }
@@ -833,19 +928,47 @@ // Create and mount Stripe card element
             this.cardPlaceholder.removeAttribute('data-is-loading');
+            this.card.on('change', e => {
+                if (e.empty) {
+                    this.cardStatus = 'empty';
+                }
+                else if (e.complete) {
+                    this.cardStatus = 'complete';
+                }
+                else {
+                    this.cardStatus = 'partial';
+                }
+                this.removeErrors('card', 'validation_error');
+                if (e.error) {
+                    this.addErrors(validationError(e.error.type, e.error.message));
+                }
+            });
         }
+        else {
+            this.addErrors(interfaceError('stripe-init'));
+            throw new Error('Could not mount Stripe element.');
+        }
     }
     async updatePlan(planId) {
+        this.removeErrors('plan-query');
         if (!planId) {
+            this.addErrors(interfaceError('plan-query'));
             throw new Error('Missing property `planId` on `manifold-subscription-create`');
         }
         if (!this.connection) {
+            this.addErrors(interfaceError('plan-query'));
             throw new Error('Missing property `connection` on `manifold-subscription-create`.');
         }
+        this.data = undefined;
         this.loading = true;
         const variables = { planId };
-        const { data, errors } = await this.connection.graphqlFetch({
+        const { data, errors } = await this.connection
+            .graphqlFetch({
             query: planQuery,
             variables,
+        })
+            .catch(e => {
+            this.addErrors(dataError('plan-query', 'selected plan'));
+            throw new Error(e);
         });
         if (errors) {
-            this.errors = errors;
+            this.addErrors(dataError('plan-query', 'selected plan'));
         }
@@ -862,5 +985,3 @@ if (data) {
     async fetchCustomCost(configuredFeatures) {
-        if (!this.connection) {
-            return undefined;
-        }
+        this.removeErrors('cost');
         // if not configurable, return plan cost
@@ -871,11 +992,13 @@ if (Object.keys(this.configuredFeatures).length === 0) {
         }
+        if (!this.connection) {
+            this.addErrors(dataError('cost', 'cost of selected plan'));
+            throw new Error('Missing property `connection` on `manifold-subscription-create`.');
+        }
         // Hide display while calculating
         this.calculatedCost = undefined;
-        this.errors = undefined;
+        // If a request is in flight, cancel it
         if (this.controller) {
             this.controller.abort();
         }
-        // If a request is in flight, cancel it
         this.controller = new AbortController();
-        // TODO pass controller to the request (might need to do this in manifold-init)
         try {
@@ -889,4 +1012,3 @@ const { cost } = await this.connection.gateway.post(`/id/plan/${this.planId}/cost`, {
             if (e.name !== 'AbortError') {
-                // TODO store error in a better way so it can be displayed in place of cost in UI
-                this.errors = [{ message: 'Error getting plan cost.' }];
+                this.addErrors(dataError('cost', 'cost of selected plan'));
             }
@@ -897,4 +1019,9 @@ }
     render() {
-        var _a, _b;
-        return (index.h("div", { class: "ManifoldSubscriptionCreate" }, this.heading && index.h("h1", { class: "ManifoldSubscriptionCreate__Heading" }, this.heading), this.isEditing ? (index.h(PlanSelector, { planId: {
+        var _a;
+        const interfaceErrors = filterErrors(this.errors, 'type', ['interface']);
+        const dataErrors = filterErrors(this.errors, 'type', ['data']);
+        const interfaceDataErrors = [...interfaceErrors, ...dataErrors];
+        const subscriptionErrors = filterErrors(this.errors, 'type', ['subscription']);
+        const validationErrors = filterErrors(this.errors, 'type', ['validation']);
+        return (index.h("div", { class: "ManifoldSubscriptionCreate" }, this.heading && index.h("h1", { class: "ManifoldSubscriptionCreate__Heading" }, this.heading), interfaceDataErrors.length > 0 && (index.h("div", { class: "ManifoldSubscriptionCreate__MessageContainer" }, interfaceDataErrors.map(error => (index.h(Message, { type: "error" }, error.message))))), index.h("form", { class: "ManifoldSubscriptionCreate__Form", method: "post", onSubmit: this.subscribe, "data-interface-error": interfaceErrors.length > 0, "data-data-error": dataErrors.length > 0 }, this.isEditing ? (index.h(PlanSelector, { planId: {
                 value: this.planId,
@@ -906,6 +1033,6 @@ set: this.setPlanId,
                 setAll: this.setAllConfiguredFeatures,
-            }, calculatedCost: this.calculatedCost, data: this.planListData, isLoading: this.isLoadingPlanSelector })) : (index.h(PlanCard, { isLoading: this.loading, plan: ((_a = this.data) === null || _a === void 0 ? void 0 : _a.plan) || undefined }, index.h("button", { class: "ManifoldSubscriptionCreate__ModifyPlanButton", onClick: this.toggleIsEditing }, "Change Plan"))), index.h("form", { class: "ManifoldSubscriptionCreate__Form", method: "post", onSubmit: this.subscribe }, index.h("label", { class: "ManifoldSubscriptionCreate__Field ManifoldSubscriptionCreate__CardField" }, index.h("span", { class: "ManifoldSubscriptionCreate__Field__Label" }, "Credit Card"), index.h("div", { class: "StripeElement", ref: el => {
+            }, calculatedCost: this.calculatedCost, errors: filterErrors(this.errors, 'label', ['cost', 'plan-list-query']), data: this.planListData, isLoading: this.isLoadingPlanSelector })) : (index.h(PlanCard, { isLoading: this.loading, plan: ((_a = this.data) === null || _a === void 0 ? void 0 : _a.plan) || undefined, errors: filterErrors(this.errors, 'label', ['plan-query']) }, index.h("button", { type: "button", class: "ManifoldSubscriptionCreate__ModifyPlanButton", onClick: this.toggleIsEditing }, "Change Plan"))), index.h("label", { class: "ManifoldSubscriptionCreate__Field ManifoldSubscriptionCreate__CardField" }, index.h("span", { class: "ManifoldSubscriptionCreate__Field__Label" }, "Credit Card"), index.h("div", { class: "StripeElement", ref: el => {
                 this.cardPlaceholder = el;
-            }, "data-is-loading": true }, "Credit Card Field")), index.h("button", { class: "ManifoldSubscriptionCreate__Button", type: "submit", disabled: this.subscribing }, this.subscribing ? 'Subscribing...' : 'Subscribe with Card'), index.h("p", { class: "ManifoldSubscriptionCreate__HelpText", "data-centered": true }, "We charge for plan cost + usage at end of month"), (_b = this.errors) === null || _b === void 0 ? void 0 :
-            _b.map(error => (index.h(Message, { type: "error" }, error.message))))));
+            }, "data-is-loading": true }, "Credit Card Field"), validationErrors.map(error => (index.h("p", { class: "ManifoldSubscriptionCreate__Field__InlineError" }, error.message)))), index.h("button", { class: "ManifoldSubscriptionCreate__Button", type: "submit", "data-kind": "primary", disabled: this.subscribing ||
+                filterErrors(this.errors, 'type', ['data', 'interface']).length > 0 }, this.subscribing ? 'Subscribing...' : 'Subscribe with Card'), subscriptionErrors.length > 0 && (index.h("div", { class: "ManifoldSubscriptionCreate__MessageContainer" }, subscriptionErrors.map(error => (index.h(Message, { type: "error" }, error.message))))), index.h("p", { class: "ManifoldSubscriptionCreate__HelpText", "data-centered": true }, "We charge for plan cost + usage at end of month"))));
     }
@@ -920,3 +1047,3 @@ get el() { return index.getElement(this); }
 
-const query = "query Subscription($id: ID!) {\n  subscription(id: $id) {\n    status {\n      label\n      percentDone\n      message\n    }\n    plan {\n      label\n      displayName\n      fixedFeatures(first: 100) {\n        edges {\n          node {\n            label\n            displayName\n            displayValue\n          }\n        }\n      }\n      meteredFeatures(first: 100) {\n        edges {\n          node {\n            label\n            displayName\n          }\n        }\n      }\n      configurableFeatures(first: 100) {\n        edges {\n          node {\n            label\n            displayName\n          }\n        }\n      }\n    }\n  }\n}\n";
+const query = "query Subscription($id: ID!) {\n  subscription(id: $id) {\n    status {\n      label\n      percentDone\n      message\n    }\n    plan {\n      id\n      label\n      displayName\n      cost\n      fixedFeatures(first: 500) {\n        edges {\n          node {\n            displayName\n            displayValue\n            label\n          }\n        }\n      }\n      meteredFeatures(first: 500) {\n        edges {\n          node {\n            label\n            displayName\n            numericDetails {\n              unit\n              costTiers {\n                limit\n                cost\n              }\n            }\n          }\n        }\n      }\n      configurableFeatures(first: 500) {\n        edges {\n          node {\n            label\n            displayName\n            type\n            upgradable\n            downgradable\n            featureOptions {\n              displayName\n              value\n              cost\n            }\n            numericDetails {\n              increment\n              min\n              max\n              unit\n              costTiers {\n                limit\n                cost\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n}\n";
 
@@ -946,3 +1073,3 @@ const ManifoldSubscriptionCreate$1 = class {
             element: this.el,
-            componentVersion: '0.0.7',
+            componentVersion: '0.0.8',
             version: 0,
@@ -953,7 +1080,9 @@ });
     render() {
-        var _a;
-        if ((_a = this.data) === null || _a === void 0 ? void 0 : _a.subscription) {
-            return index.h("h3", null, this.data.subscription.plan.displayName);
+        if (!this.data || !this.data.subscription) {
+            return null;
         }
-        return null;
+        const { plan, status } = this.data.subscription;
+        return (index.h("div", { class: "ManifoldSubscriptionCreate__Details" }, this.heading && index.h("h1", { class: "ManifoldSubscriptionCreate__Heading" }, this.heading), index.h("section", { class: "ManifoldSubscriptionCreate__Card" }, index.h("header", { class: "ManifoldSubscriptionCreate__Details__Header" }, index.h("h2", { class: "ManifoldSubscriptionCreate__PlanName" }, plan.displayName), index.h("h3", { class: "ManifoldSubscriptionCreate__SubscriptionStatus", "data-status": status.label }, index.h("div", { class: "ManifoldSubscriptionCreate__SubscriptionStatusIndicator" }), status.label)), index.h("dl", { class: "ManifoldSubscriptionCreate__Details__FeatureList" }, plan.fixedFeatures.edges.map(fixedFeature => (index.h(FixedFeature, { fixedFeature: fixedFeature }))), plan.meteredFeatures.edges.map(meteredFeature => (index.h(MeteredFeature, { meteredFeature: meteredFeature }))), plan.configurableFeatures.edges.map(configurableFeature => (
+        // TODO format configured feature so it displays as fixed
+        index.h(ConfigurableFeature, { setConfiguredFeature: () => null, configurableFeature: configurableFeature })))), index.h("footer", { class: "ManifoldSubscriptionCreate__PlanSelector__Footer" }, index.h("div", null, index.h(CostDisplay, { baseCost: plan.cost }), index.h("p", { class: "ManifoldSubscriptionCreate__HelpText" }, "Usage billed at the end of month")), index.h("button", { type: "button", class: "ManifoldSubscriptionCreate__Button", "data-kind": "black" }, "Modify Subsciption")))));
     }
@@ -1015,3 +1144,3 @@ get el() { return index.getElement(this); }
             element: this.el,
-            componentVersion: '0.0.7',
+            componentVersion: '0.0.8',
             version: 0,
@@ -1018,0 +1147,0 @@ });

dist/cjs/manifold-subscription.cjs.js

@@ -6,3 +6,3 @@ 'use strict';
 index.patchBrowser().then(options => {
-  return index.bootstrapLazy([["manifold-configured-feature_4.cjs",[[0,"manifold-configured-feature",{"label":[1],"value":[8]}],[0,"manifold-subscription-create",{"loading":[1028],"isLoadingPlanSelector":[1028,"is-loading-plan-selector"],"errors":[1040],"data":[1040],"planListData":[1040],"setupIntentStatus":[1025,"setup-intent-status"],"setupIntentError":[1025,"setup-intent-error"],"subscribing":[1028],"configuredFeatures":[1040],"calculatedCost":[1026,"calculated-cost"],"isEditing":[1028,"is-editing"],"heading":[1],"planId":[1025,"plan-id"],"ownerId":[1,"owner-id"],"stripePublishableKey":[1,"stripe-publishable-key"],"displayName":[1,"display-name"],"label":[1],"card":[32]},[[0,"manifold-configured-feature-change","updateConfiguredFeature"]]],[0,"manifold-subscription-details",{"subscriptionId":[1,"subscription-id"],"data":[32]}],[0,"manifold-subscription-list",{"connection":[1040],"loading":[1028],"errors":[1040],"data":[1040],"heading":[1],"owner":[1]}]]]], options);
+  return index.bootstrapLazy([["manifold-configured-feature_4.cjs",[[0,"manifold-configured-feature",{"label":[1],"value":[8]}],[0,"manifold-subscription-create",{"loading":[1028],"isLoadingPlanSelector":[1028,"is-loading-plan-selector"],"errors":[1040],"data":[1040],"planListData":[1040],"setupIntentStatus":[1025,"setup-intent-status"],"setupIntentError":[1025,"setup-intent-error"],"subscribing":[1028],"configuredFeatures":[1040],"calculatedCost":[1026,"calculated-cost"],"isEditing":[1028,"is-editing"],"heading":[1],"planId":[1025,"plan-id"],"ownerId":[1,"owner-id"],"stripePublishableKey":[1,"stripe-publishable-key"],"displayName":[1,"display-name"],"label":[1],"card":[32],"cardStatus":[32]},[[0,"manifold-configured-feature-change","updateConfiguredFeature"]]],[0,"manifold-subscription-details",{"subscriptionId":[1,"subscription-id"],"heading":[1],"data":[32]}],[0,"manifold-subscription-list",{"connection":[1040],"loading":[1028],"errors":[1040],"data":[1040],"heading":[1],"owner":[1]}]]]], options);
 });

dist/collection/components/manifold-subscription-create/manifold-subscription-create.js

@@ -9,16 +9,18 @@ import { Component, Element, Prop, h, Watch, State, Listen, Event, } from '@stencil/core';
 import createSubscrptionMutation from './create-subscription.graphql';
-// TODO add all these to the component API
-//   $planId: ID! (done)
-//   $regionId: ID!
-//   $label: String
-//   $displayName: String
-//   $configuredFeatures: [ConfiguredFeatureInput!] (in progress)
-//   $ownerId: ID!
+import { filterErrors, interfaceError, dataError, subscriptionError, validationError, } from '../../utils/error';
 export class ManifoldSubscriptionCreate {
     constructor() {
+        this.cardStatus = 'empty';
         this.loading = false;
         this.isLoadingPlanSelector = false;
+        this.errors = [];
         this.subscribing = false;
         this.configuredFeatures = {};
         this.isEditing = false;
+        this.addErrors = (...errors) => {
+            this.errors = [...this.errors, ...errors];
+        };
+        this.removeErrors = (...labels) => {
+            this.errors = filterErrors(this.errors, 'label', labels, false);
+        };
         this.setConfiguredFeature = (label, value) => {
@@ -32,2 +34,15 @@ this.configuredFeatures = Object.assign(Object.assign({}, this.configuredFeatures), { [label]: value });
             e.preventDefault();
+            await this.removeErrors('subscription', 'card');
+            if (this.cardStatus === 'empty') {
+                this.addErrors(validationError('card', 'Card is empty.'));
+                return;
+            }
+            if (this.cardStatus !== 'complete' || this.cardStatus !== 'complete') {
+                this.addErrors(validationError('card', 'Card is invalid.'));
+                return;
+            }
+            if (!this.connection) {
+                this.addErrors(subscriptionError());
+                throw new Error('Missing property `connection` on `manifold-subscription-create`.');
+            }
             if (this.data && this.stripe && !this.subscribing) {
@@ -43,7 +58,7 @@ this.subscribing = true;
                     this.subscribing = false;
-                    this.setupIntentError = error.message;
-                    return;
+                    this.addErrors(subscriptionError());
+                    throw new Error('Stripe could not confirm card setup with the following credentials:' +
+                        `\n\tStripe Setup Intent Secret: ${stripeSetupIntentSecret}`);
                 }
-                this.setupIntentStatus = setupIntent === null || setupIntent === void 0 ? void 0 : setupIntent.status;
-                if ((setupIntent === null || setupIntent === void 0 ? void 0 : setupIntent.status) === 'succeeded' && this.connection) {
+                if ((setupIntent === null || setupIntent === void 0 ? void 0 : setupIntent.status) === 'succeeded') {
                     const configuredFeatures = Object.keys(this.configuredFeatures).map(key => ({
@@ -58,8 +73,13 @@ label: key,
                     };
-                    const { data, errors } = await this.connection.graphqlFetch({
+                    const { data, errors } = await this.connection
+                        .graphqlFetch({
                         query: createSubscrptionMutation,
                         variables,
+                    })
+                        .catch(err => {
+                        this.addErrors(subscriptionError());
+                        throw new Error(err);
                     });
                     if (errors) {
-                        // TODO handle errors
+                        this.addErrors(subscriptionError());
                     }
@@ -70,2 +90,5 @@ if (data) {
                 }
+                else {
+                    this.addErrors(subscriptionError());
+                }
                 this.subscribing = false;
@@ -80,12 +103,23 @@ }
             this.isEditing = !this.isEditing;
-            if (!this.connection || !this.data) {
-                return undefined;
+            this.removeErrors('plan-list-query');
+            if (!this.connection) {
+                this.addErrors(interfaceError('plan-list-query'));
+                throw new Error('Missing property `connection` on `manifold-subscription-create`.');
             }
+            if (!this.data) {
+                this.addErrors(dataError('plan-list-query', 'selected plan'));
+                throw new Error('Missing property `data` on `manifold-subscription-create`.');
+            }
             this.isLoadingPlanSelector = true;
-            const { data, errors } = await this.connection.graphqlFetch({
+            const { data, errors } = await this.connection
+                .graphqlFetch({
                 query: planListQuery,
                 variables: { productLabel: (_a = this.data) === null || _a === void 0 ? void 0 : _a.plan.product.label },
+            })
+                .catch(e => {
+                this.addErrors(dataError('plan-list-query', 'all plans for this product'));
+                throw new Error(e);
             });
             if (errors) {
-                this.errors = errors;
+                this.addErrors(dataError('plan-list-query', 'all plans for this product'));
             }
@@ -114,3 +148,3 @@ if (data) {
         }
-        // TODO replace token with a Manifold Stripe token.
+        this.removeErrors('stripe-init');
         // Initialize Stripe
@@ -121,4 +155,6 @@ this.stripe = await loadStripe(this.stripePublishableKey, {
         if (!this.stripe) {
-            // TODO handle stripe error
-            return;
+            this.addErrors(interfaceError('stripe-init'));
+            throw new Error('Could not load Stripe with the following credentials:' +
+                `\n\tStripePublishable Key: ${this.stripePublishableKey}` +
+                `\n\tStripe Account ID: ${data.profile.stripeAccount.id}`);
         }
@@ -131,19 +167,47 @@ // Create and mount Stripe card element
             this.cardPlaceholder.removeAttribute('data-is-loading');
+            this.card.on('change', e => {
+                if (e.empty) {
+                    this.cardStatus = 'empty';
+                }
+                else if (e.complete) {
+                    this.cardStatus = 'complete';
+                }
+                else {
+                    this.cardStatus = 'partial';
+                }
+                this.removeErrors('card', 'validation_error');
+                if (e.error) {
+                    this.addErrors(validationError(e.error.type, e.error.message));
+                }
+            });
         }
+        else {
+            this.addErrors(interfaceError('stripe-init'));
+            throw new Error('Could not mount Stripe element.');
+        }
     }
     async updatePlan(planId) {
+        this.removeErrors('plan-query');
         if (!planId) {
+            this.addErrors(interfaceError('plan-query'));
             throw new Error('Missing property `planId` on `manifold-subscription-create`');
         }
         if (!this.connection) {
+            this.addErrors(interfaceError('plan-query'));
             throw new Error('Missing property `connection` on `manifold-subscription-create`.');
         }
+        this.data = undefined;
         this.loading = true;
         const variables = { planId };
-        const { data, errors } = await this.connection.graphqlFetch({
+        const { data, errors } = await this.connection
+            .graphqlFetch({
             query: planQuery,
             variables,
+        })
+            .catch(e => {
+            this.addErrors(dataError('plan-query', 'selected plan'));
+            throw new Error(e);
         });
         if (errors) {
-            this.errors = errors;
+            this.addErrors(dataError('plan-query', 'selected plan'));
         }
@@ -160,5 +224,3 @@ if (data) {
     async fetchCustomCost(configuredFeatures) {
-        if (!this.connection) {
-            return undefined;
-        }
+        this.removeErrors('cost');
         // if not configurable, return plan cost
@@ -169,11 +231,13 @@ if (Object.keys(this.configuredFeatures).length === 0) {
         }
+        if (!this.connection) {
+            this.addErrors(dataError('cost', 'cost of selected plan'));
+            throw new Error('Missing property `connection` on `manifold-subscription-create`.');
+        }
         // Hide display while calculating
         this.calculatedCost = undefined;
-        this.errors = undefined;
+        // If a request is in flight, cancel it
         if (this.controller) {
             this.controller.abort();
         }
-        // If a request is in flight, cancel it
         this.controller = new AbortController();
-        // TODO pass controller to the request (might need to do this in manifold-init)
         try {
@@ -187,4 +251,3 @@ const { cost } = await this.connection.gateway.post(`/id/plan/${this.planId}/cost`, {
             if (e.name !== 'AbortError') {
-                // TODO store error in a better way so it can be displayed in place of cost in UI
-                this.errors = [{ message: 'Error getting plan cost.' }];
+                this.addErrors(dataError('cost', 'cost of selected plan'));
             }
@@ -195,15 +258,21 @@ }
     render() {
-        var _a, _b;
+        var _a;
+        const interfaceErrors = filterErrors(this.errors, 'type', ['interface']);
+        const dataErrors = filterErrors(this.errors, 'type', ['data']);
+        const interfaceDataErrors = [...interfaceErrors, ...dataErrors];
+        const subscriptionErrors = filterErrors(this.errors, 'type', ['subscription']);
+        const validationErrors = filterErrors(this.errors, 'type', ['validation']);
         return (h("div", { class: "ManifoldSubscriptionCreate" },
             this.heading && h("h1", { class: "ManifoldSubscriptionCreate__Heading" }, this.heading),
-            this.isEditing ? (h(PlanSelector, { planId: {
-                    value: this.planId,
-                    set: this.setPlanId,
-                }, configuredFeatures: {
-                    value: this.configuredFeatures,
-                    set: this.setConfiguredFeature,
-                    setAll: this.setAllConfiguredFeatures,
-                }, calculatedCost: this.calculatedCost, data: this.planListData, isLoading: this.isLoadingPlanSelector })) : (h(PlanCard, { isLoading: this.loading, plan: ((_a = this.data) === null || _a === void 0 ? void 0 : _a.plan) || undefined },
-                h("button", { class: "ManifoldSubscriptionCreate__ModifyPlanButton", onClick: this.toggleIsEditing }, "Change Plan"))),
-            h("form", { class: "ManifoldSubscriptionCreate__Form", method: "post", onSubmit: this.subscribe },
+            interfaceDataErrors.length > 0 && (h("div", { class: "ManifoldSubscriptionCreate__MessageContainer" }, interfaceDataErrors.map(error => (h(Message, { type: "error" }, error.message))))),
+            h("form", { class: "ManifoldSubscriptionCreate__Form", method: "post", onSubmit: this.subscribe, "data-interface-error": interfaceErrors.length > 0, "data-data-error": dataErrors.length > 0 },
+                this.isEditing ? (h(PlanSelector, { planId: {
+                        value: this.planId,
+                        set: this.setPlanId,
+                    }, configuredFeatures: {
+                        value: this.configuredFeatures,
+                        set: this.setConfiguredFeature,
+                        setAll: this.setAllConfiguredFeatures,
+                    }, calculatedCost: this.calculatedCost, errors: filterErrors(this.errors, 'label', ['cost', 'plan-list-query']), data: this.planListData, isLoading: this.isLoadingPlanSelector })) : (h(PlanCard, { isLoading: this.loading, plan: ((_a = this.data) === null || _a === void 0 ? void 0 : _a.plan) || undefined, errors: filterErrors(this.errors, 'label', ['plan-query']) },
+                    h("button", { type: "button", class: "ManifoldSubscriptionCreate__ModifyPlanButton", onClick: this.toggleIsEditing }, "Change Plan"))),
                 h("label", { class: "ManifoldSubscriptionCreate__Field ManifoldSubscriptionCreate__CardField" },
@@ -213,6 +282,8 @@ h("span", { class: "ManifoldSubscriptionCreate__Field__Label" }, "Credit Card"),
                             this.cardPlaceholder = el;
-                        }, "data-is-loading": true }, "Credit Card Field")),
-                h("button", { class: "ManifoldSubscriptionCreate__Button", type: "submit", disabled: this.subscribing }, this.subscribing ? 'Subscribing...' : 'Subscribe with Card'),
-                h("p", { class: "ManifoldSubscriptionCreate__HelpText", "data-centered": true }, "We charge for plan cost + usage at end of month"), (_b = this.errors) === null || _b === void 0 ? void 0 :
-                _b.map(error => (h(Message, { type: "error" }, error.message))))));
+                        }, "data-is-loading": true }, "Credit Card Field"),
+                    validationErrors.map(error => (h("p", { class: "ManifoldSubscriptionCreate__Field__InlineError" }, error.message)))),
+                h("button", { class: "ManifoldSubscriptionCreate__Button", type: "submit", "data-kind": "primary", disabled: this.subscribing ||
+                        filterErrors(this.errors, 'type', ['data', 'interface']).length > 0 }, this.subscribing ? 'Subscribing...' : 'Subscribe with Card'),
+                subscriptionErrors.length > 0 && (h("div", { class: "ManifoldSubscriptionCreate__MessageContainer" }, subscriptionErrors.map(error => (h(Message, { type: "error" }, error.message))))),
+                h("p", { class: "ManifoldSubscriptionCreate__HelpText", "data-centered": true }, "We charge for plan cost + usage at end of month"))));
     }
@@ -261,8 +332,8 @@ static get is() { return "manifold-subscription-create"; }
             "complexType": {
-                "original": "GraphqlError[]",
-                "resolved": "GraphqlError[] | undefined",
+                "original": "UIError[]",
+                "resolved": "UIError[]",
                 "references": {
-                    "GraphqlError": {
+                    "UIError": {
                         "location": "import",
-                        "path": "@manifoldco/manifold-init-types/types/v0/graphqlFetch"
+                        "path": "../../utils/error"
                     }
@@ -272,7 +343,8 @@ }
             "required": false,
-            "optional": true,
+            "optional": false,
             "docs": {
                 "tags": [],
                 "text": ""
-            }
+            },
+            "defaultValue": "[]"
         },
@@ -536,3 +608,4 @@ "data": {
     static get states() { return {
-        "card": {}
+        "card": {},
+        "cardStatus": {}
     }; }
@@ -539,0 +612,0 @@ static get events() { return [{

dist/collection/components/manifold-subscription-details/manifold-subscription-details.js

 import { Component, Element, Prop, State, Watch, h } from '@stencil/core';
+import FixedFeature from 'components/shared/FixedFeature';
+import MeteredFeature from 'components/shared/MeteredFeature';
+import ConfigurableFeature from 'components/shared/ConfigurableFeature';
+import CostDisplay from 'components/shared/CostDisplay';
 import query from './subscription.graphql';
@@ -29,7 +33,25 @@ export class ManifoldSubscriptionCreate {
     render() {
-        var _a;
-        if ((_a = this.data) === null || _a === void 0 ? void 0 : _a.subscription) {
-            return h("h3", null, this.data.subscription.plan.displayName);
+        if (!this.data || !this.data.subscription) {
+            return null;
         }
-        return null;
+        const { plan, status } = this.data.subscription;
+        return (h("div", { class: "ManifoldSubscriptionCreate__Details" },
+            this.heading && h("h1", { class: "ManifoldSubscriptionCreate__Heading" }, this.heading),
+            h("section", { class: "ManifoldSubscriptionCreate__Card" },
+                h("header", { class: "ManifoldSubscriptionCreate__Details__Header" },
+                    h("h2", { class: "ManifoldSubscriptionCreate__PlanName" }, plan.displayName),
+                    h("h3", { class: "ManifoldSubscriptionCreate__SubscriptionStatus", "data-status": status.label },
+                        h("div", { class: "ManifoldSubscriptionCreate__SubscriptionStatusIndicator" }),
+                        status.label)),
+                h("dl", { class: "ManifoldSubscriptionCreate__Details__FeatureList" },
+                    plan.fixedFeatures.edges.map(fixedFeature => (h(FixedFeature, { fixedFeature: fixedFeature }))),
+                    plan.meteredFeatures.edges.map(meteredFeature => (h(MeteredFeature, { meteredFeature: meteredFeature }))),
+                    plan.configurableFeatures.edges.map(configurableFeature => (
+                    // TODO format configured feature so it displays as fixed
+                    h(ConfigurableFeature, { setConfiguredFeature: () => null, configurableFeature: configurableFeature })))),
+                h("footer", { class: "ManifoldSubscriptionCreate__PlanSelector__Footer" },
+                    h("div", null,
+                        h(CostDisplay, { baseCost: plan.cost }),
+                        h("p", { class: "ManifoldSubscriptionCreate__HelpText" }, "Usage billed at the end of month")),
+                    h("button", { type: "button", class: "ManifoldSubscriptionCreate__Button", "data-kind": "black" }, "Modify Subsciption")))));
     }
@@ -54,2 +76,19 @@ static get is() { return "manifold-subscription-details"; }
             "reflect": false
+        },
+        "heading": {
+            "type": "string",
+            "mutable": false,
+            "complexType": {
+                "original": "string",
+                "resolved": "string | undefined",
+                "references": {}
+            },
+            "required": false,
+            "optional": true,
+            "docs": {
+                "tags": [],
+                "text": ""
+            },
+            "attribute": "heading",
+            "reflect": false
         }
@@ -56,0 +95,0 @@ }; }

dist/collection/components/shared/CostDisplay.js

 import { h } from '@stencil/core';
+import errorIcon from '@manifoldco/mercury/icons/alert-circle.svg';
 import { $ } from '../../utils/currency';
@@ -38,2 +39,8 @@ import { meteredFeatureDisplayValue } from '../../utils/plan';
     }
+    if (props.hasError) {
+        return (h("div", { class: "ManifoldSubscriptionCreate__CostDisplay", "data-compact": props.compact },
+            h("div", { class: "ManifoldSubscriptionCreate__CostDisplay__Error" },
+                h("i", { innerHTML: errorIcon }),
+                " Error calculating cost")));
+    }
     // Render cost
@@ -40,0 +47,0 @@ const { compact, isConfigurable, baseCost, meteredFeatures = [] } = props;

dist/collection/components/shared/Message.js

 import { h } from '@stencil/core';
+import errorIcon from '@manifoldco/mercury/icons/alert-circle.svg';
+import successIcon from '@manifoldco/mercury/icons/check.svg';
+const icons = {
+    error: errorIcon,
+    success: successIcon,
+};
 const resolveClass = (type) => `ManifoldSubscriptionCreate__Message ${type ? `ManifoldSubscriptionCreate__Message--${type}` : ''}`;
-const Message = ({ type }, children) => (h("p", { class: resolveClass(type) }, children));
+const Message = ({ type }, children) => (h("p", { class: resolveClass(type) },
+    type && h("i", { innerHTML: icons[type] }),
+    children));
 export default Message;

dist/collection/components/shared/NumberInput.js

@@ -20,3 +20,3 @@ var __rest = (this && this.__rest) || function (s, e) {
     return (h("div", { class: "ManifoldSubscriptionCreate__NumberInput" },
-        h("button", { tabindex: "-1", onClick: () => onChange(name, value - increment), disabled: lowerBoundReached || disabled },
+        h("button", { type: "button", tabindex: "-1", onClick: () => onChange(name, value - increment), disabled: lowerBoundReached || disabled },
             h("i", { innerHTML: minus, title: "increment" })),
@@ -27,5 +27,5 @@ h("input", Object.assign({ name: name, type: "number", max: max, min: min, pattern: "[0-9]*", onInput: e => {
             }, required: true, step: increment, value: value, disabled: disabled }, rest)),
-        h("button", { tabindex: "-1", onClick: () => onChange(name, value + increment), disabled: upperBoundReached || disabled },
+        h("button", { type: "button", tabindex: "-1", onClick: () => onChange(name, value + increment), disabled: upperBoundReached || disabled },
             h("i", { innerHTML: plus, title: "increment" }))));
 };
 export default NumberInput;

dist/collection/components/shared/PlanCard.js

@@ -8,8 +8,15 @@ import { h } from '@stencil/core';
 };
-const PlanCard = ({ isLoading, isChecked, plan = defaultPlan }, cta) => (h("div", { class: "ManifoldSubscriptionCreate__Card", "data-is-checked": isChecked },
-    h("div", { class: "ManifoldSubscriptionCreate__PlanName", "data-is-loading": isLoading }, plan.displayName),
-    h("span", { class: "ManifoldSubscriptionCreate__Cost", "data-is-loading": isLoading },
-        h(CostDisplay, { baseCost: plan.cost, isConfigurable: true, compact: true })),
-    cta,
-    h("i", { class: "ManifoldSubscriptionCreate__Card__Checkmark", innerHTML: check })));
+const PlanCard = ({ isLoading, isChecked, plan = defaultPlan, errors = [] }, cta) => {
+    if (errors.length > 0) {
+        return null;
+    }
+    return (h("div", { class: "ManifoldSubscriptionCreate__Card", "data-is-checked": isChecked },
+        h("div", { class: "ManifoldSubscriptionCreate__PlanName" },
+            h("span", { "data-is-loading": isLoading }, plan.displayName)),
+        h("span", { class: "ManifoldSubscriptionCreate__Cost" },
+            h("span", { "data-is-loading": isLoading },
+                h(CostDisplay, { baseCost: plan.cost, isConfigurable: true, compact: true }))),
+        cta,
+        h("i", { class: "ManifoldSubscriptionCreate__Card__Checkmark", innerHTML: check })));
+};
 export default PlanCard;

dist/collection/components/shared/PlanSelector.js

@@ -9,2 +9,3 @@ import { h } from '@stencil/core';
 import SkeletonPlanSelector from './SkeletonPlanSelector';
+import { filterErrors } from '../../utils/error';
 const PlanMenu = ({ plans, selectedPlanId, setPlanId, setAllConfiguredFeatures, }) => (h("ul", { class: "ManifoldSubscriptionCreate__PlanSelector__Menu" }, plans.map(({ node: plan }) => (h("li", null,
@@ -22,4 +23,4 @@ h("label", null,
     }
-    const { planId, configuredFeatures, data } = props;
-    if (!data) {
+    const { planId, configuredFeatures, data, errors } = props;
+    if (!data || filterErrors(errors, 'label', ['plan-list-query']).length > 0) {
         return null;
@@ -38,5 +39,6 @@ }
             h("footer", { class: "ManifoldSubscriptionCreate__PlanSelector__Footer" },
-                h(CostDisplay, { isCalculating: props.calculatedCost === undefined, baseCost: props.calculatedCost || (currentPlan === null || currentPlan === void 0 ? void 0 : currentPlan.cost) || 0, meteredFeatures: currentPlan === null || currentPlan === void 0 ? void 0 : currentPlan.meteredFeatures.edges, isConfigurable: currentPlan ? currentPlan.configurableFeatures.edges.length > 0 : false }),
-                h("p", { class: "ManifoldSubscriptionCreate__HelpText" }, "Usage billed at the end of month")))));
+                h("div", null,
+                    h(CostDisplay, { isCalculating: props.calculatedCost === undefined, baseCost: props.calculatedCost || (currentPlan === null || currentPlan === void 0 ? void 0 : currentPlan.cost) || 0, meteredFeatures: currentPlan === null || currentPlan === void 0 ? void 0 : currentPlan.meteredFeatures.edges, isConfigurable: currentPlan ? currentPlan.configurableFeatures.edges.length > 0 : false, hasError: filterErrors(props.errors, 'label', ['cost']).length > 0 }),
+                    h("p", { class: "ManifoldSubscriptionCreate__HelpText" }, "Usage billed at the end of month"))))));
 };
 export default PlanSelector;

dist/esm/manifold-configured-feature_4.entry.js

@@ -475,3 +475,3 @@ import { r as registerInstance, c as createEvent, h, g as getElement } from './index-a5d83904.js';
     return (h("div", { class: "ManifoldSubscriptionCreate__NumberInput" },
-        h("button", { tabindex: "-1", onClick: () => onChange(name, value - increment), disabled: lowerBoundReached || disabled },
+        h("button", { type: "button", tabindex: "-1", onClick: () => onChange(name, value - increment), disabled: lowerBoundReached || disabled },
             h("i", { innerHTML: minusSvg, title: "increment" })),
@@ -482,3 +482,3 @@ h("input", Object.assign({ name: name, type: "number", max: max, min: min, pattern: "[0-9]*", onInput: e => {
             }, required: true, step: increment, value: value, disabled: disabled }, rest)),
-        h("button", { tabindex: "-1", onClick: () => onChange(name, value + increment), disabled: upperBoundReached || disabled },
+        h("button", { type: "button", tabindex: "-1", onClick: () => onChange(name, value + increment), disabled: upperBoundReached || disabled },
             h("i", { innerHTML: plusSvg, title: "increment" }))));
@@ -584,2 +584,4 @@ };
 
+const alertCircleSvg = "<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><g fill-rule=\"evenodd\" clip-rule=\"evenodd\" ><path d=\"M12 3a9 9 0 100 18 9 9 0 000-18zM1 12C1 5.925 5.925 1 12 1s11 4.925 11 11-4.925 11-11 11S1 18.075 1 12z\"/><path d=\"M12 7a1 1 0 011 1v4a1 1 0 11-2 0V8a1 1 0 011-1zM11 16a1 1 0 011-1h.01a1 1 0 110 2H12a1 1 0 01-1-1z\"/></g></svg>";
+
 const BaseCost = props => {
@@ -619,2 +621,8 @@ const { cost, isFreeMonthly, hasMeteredFeatures, compact } = props;
     }
+    if (props.hasError) {
+        return (h("div", { class: "ManifoldSubscriptionCreate__CostDisplay", "data-compact": props.compact },
+            h("div", { class: "ManifoldSubscriptionCreate__CostDisplay__Error" },
+                h("i", { innerHTML: alertCircleSvg }),
+                " Error calculating cost")));
+    }
     // Render cost
@@ -638,8 +646,15 @@ const { compact, isConfigurable, baseCost, meteredFeatures = [] } = props;
 };
-const PlanCard = ({ isLoading, isChecked, plan = defaultPlan }, cta) => (h("div", { class: "ManifoldSubscriptionCreate__Card", "data-is-checked": isChecked },
-    h("div", { class: "ManifoldSubscriptionCreate__PlanName", "data-is-loading": isLoading }, plan.displayName),
-    h("span", { class: "ManifoldSubscriptionCreate__Cost", "data-is-loading": isLoading },
-        h(CostDisplay, { baseCost: plan.cost, isConfigurable: true, compact: true })),
-    cta,
-    h("i", { class: "ManifoldSubscriptionCreate__Card__Checkmark", innerHTML: checkSvg })));
+const PlanCard = ({ isLoading, isChecked, plan = defaultPlan, errors = [] }, cta) => {
+    if (errors.length > 0) {
+        return null;
+    }
+    return (h("div", { class: "ManifoldSubscriptionCreate__Card", "data-is-checked": isChecked },
+        h("div", { class: "ManifoldSubscriptionCreate__PlanName" },
+            h("span", { "data-is-loading": isLoading }, plan.displayName)),
+        h("span", { class: "ManifoldSubscriptionCreate__Cost" },
+            h("span", { "data-is-loading": isLoading },
+                h(CostDisplay, { baseCost: plan.cost, isConfigurable: true, compact: true }))),
+        cta,
+        h("i", { class: "ManifoldSubscriptionCreate__Card__Checkmark", innerHTML: checkSvg })));
+};
 
@@ -671,2 +686,30 @@ const SkeletonPlanSelector = () => (h("div", { class: "ManifoldSubscriptionCreate__PlanSelector" },
 
+const filterErrors = (errors = [], field, values, includes = true) => errors.filter(error => {
+    const includesValue = values.includes(error[field]);
+    return includes === true ? includesValue : !includesValue;
+});
+/**
+ *  Predefined UI errors
+ */
+const interfaceError = (label = 'ui') => ({
+    label,
+    type: 'interface',
+    message: `Terminal Interface Error: Cannot load UI. Try your action again later or contact support.`,
+});
+const dataError = (label = 'data', data) => ({
+    label,
+    type: 'data',
+    message: `Data Error: Cannot find ${data}. Try your action again later or contact support.`,
+});
+const subscriptionError = (label = 'subscription') => ({
+    label,
+    type: 'subscription',
+    message: `Subscription Error: Subscription cannot be completed. Try your action again later or contact support.`,
+});
+const validationError = (label, message) => ({
+    label,
+    type: 'validation',
+    message,
+});
+
 const PlanMenu = ({ plans, selectedPlanId, setPlanId, setAllConfiguredFeatures, }) => (h("ul", { class: "ManifoldSubscriptionCreate__PlanSelector__Menu" }, plans.map(({ node: plan }) => (h("li", null,
@@ -684,4 +727,4 @@ h("label", null,
     }
-    const { planId, configuredFeatures, data } = props;
-    if (!data) {
+    const { planId, configuredFeatures, data, errors } = props;
+    if (!data || filterErrors(errors, 'label', ['plan-list-query']).length > 0) {
         return null;
@@ -700,8 +743,15 @@ }
             h("footer", { class: "ManifoldSubscriptionCreate__PlanSelector__Footer" },
-                h(CostDisplay, { isCalculating: props.calculatedCost === undefined, baseCost: props.calculatedCost || (currentPlan === null || currentPlan === void 0 ? void 0 : currentPlan.cost) || 0, meteredFeatures: currentPlan === null || currentPlan === void 0 ? void 0 : currentPlan.meteredFeatures.edges, isConfigurable: currentPlan ? currentPlan.configurableFeatures.edges.length > 0 : false }),
-                h("p", { class: "ManifoldSubscriptionCreate__HelpText" }, "Usage billed at the end of month")))));
+                h("div", null,
+                    h(CostDisplay, { isCalculating: props.calculatedCost === undefined, baseCost: props.calculatedCost || (currentPlan === null || currentPlan === void 0 ? void 0 : currentPlan.cost) || 0, meteredFeatures: currentPlan === null || currentPlan === void 0 ? void 0 : currentPlan.meteredFeatures.edges, isConfigurable: currentPlan ? currentPlan.configurableFeatures.edges.length > 0 : false, hasError: filterErrors(props.errors, 'label', ['cost']).length > 0 }),
+                    h("p", { class: "ManifoldSubscriptionCreate__HelpText" }, "Usage billed at the end of month"))))));
 };
 
+const icons = {
+    error: alertCircleSvg,
+    success: checkSvg,
+};
 const resolveClass = (type) => `ManifoldSubscriptionCreate__Message ${type ? `ManifoldSubscriptionCreate__Message--${type}` : ''}`;
-const Message = ({ type }, children) => (h("p", { class: resolveClass(type) }, children));
+const Message = ({ type }, children) => (h("p", { class: resolveClass(type) },
+    type && h("i", { innerHTML: icons[type] }),
+    children));
 
@@ -717,7 +767,15 @@ const planQuery = "query Plan($planId: ID!) {\n  plan(id: $planId) {\n    displayName\n    cost\n    product {\n      label\n    }\n  }\n  profile {\n    stripeSetupIntentSecret\n    stripeAccount {\n      id\n    }\n  }\n}\n";
         registerInstance(this, hostRef);
+        this.cardStatus = 'empty';
         this.loading = false;
         this.isLoadingPlanSelector = false;
+        this.errors = [];
         this.subscribing = false;
         this.configuredFeatures = {};
         this.isEditing = false;
+        this.addErrors = (...errors) => {
+            this.errors = [...this.errors, ...errors];
+        };
+        this.removeErrors = (...labels) => {
+            this.errors = filterErrors(this.errors, 'label', labels, false);
+        };
         this.setConfiguredFeature = (label, value) => {
@@ -731,2 +789,15 @@ this.configuredFeatures = Object.assign(Object.assign({}, this.configuredFeatures), { [label]: value });
             e.preventDefault();
+            await this.removeErrors('subscription', 'card');
+            if (this.cardStatus === 'empty') {
+                this.addErrors(validationError('card', 'Card is empty.'));
+                return;
+            }
+            if (this.cardStatus !== 'complete' || this.cardStatus !== 'complete') {
+                this.addErrors(validationError('card', 'Card is invalid.'));
+                return;
+            }
+            if (!this.connection) {
+                this.addErrors(subscriptionError());
+                throw new Error('Missing property `connection` on `manifold-subscription-create`.');
+            }
             if (this.data && this.stripe && !this.subscribing) {
@@ -742,7 +813,7 @@ this.subscribing = true;
                     this.subscribing = false;
-                    this.setupIntentError = error.message;
-                    return;
+                    this.addErrors(subscriptionError());
+                    throw new Error('Stripe could not confirm card setup with the following credentials:' +
+                        `\n\tStripe Setup Intent Secret: ${stripeSetupIntentSecret}`);
                 }
-                this.setupIntentStatus = setupIntent === null || setupIntent === void 0 ? void 0 : setupIntent.status;
-                if ((setupIntent === null || setupIntent === void 0 ? void 0 : setupIntent.status) === 'succeeded' && this.connection) {
+                if ((setupIntent === null || setupIntent === void 0 ? void 0 : setupIntent.status) === 'succeeded') {
                     const configuredFeatures = Object.keys(this.configuredFeatures).map(key => ({
@@ -757,6 +828,14 @@ label: key,
                     };
-                    const { data, errors } = await this.connection.graphqlFetch({
+                    const { data, errors } = await this.connection
+                        .graphqlFetch({
                         query: createSubscrptionMutation,
                         variables,
+                    })
+                        .catch(err => {
+                        this.addErrors(subscriptionError());
+                        throw new Error(err);
                     });
+                    if (errors) {
+                        this.addErrors(subscriptionError());
+                    }
                     if (data) {
@@ -766,2 +845,5 @@ this.createSuccess.emit({ id: data.createSubscription.data.id });
                 }
+                else {
+                    this.addErrors(subscriptionError());
+                }
                 this.subscribing = false;
@@ -776,12 +858,23 @@ }
             this.isEditing = !this.isEditing;
-            if (!this.connection || !this.data) {
-                return undefined;
+            this.removeErrors('plan-list-query');
+            if (!this.connection) {
+                this.addErrors(interfaceError('plan-list-query'));
+                throw new Error('Missing property `connection` on `manifold-subscription-create`.');
             }
+            if (!this.data) {
+                this.addErrors(dataError('plan-list-query', 'selected plan'));
+                throw new Error('Missing property `data` on `manifold-subscription-create`.');
+            }
             this.isLoadingPlanSelector = true;
-            const { data, errors } = await this.connection.graphqlFetch({
+            const { data, errors } = await this.connection
+                .graphqlFetch({
                 query: planListQuery,
                 variables: { productLabel: (_a = this.data) === null || _a === void 0 ? void 0 : _a.plan.product.label },
+            })
+                .catch(e => {
+                this.addErrors(dataError('plan-list-query', 'all plans for this product'));
+                throw new Error(e);
             });
             if (errors) {
-                this.errors = errors;
+                this.addErrors(dataError('plan-list-query', 'all plans for this product'));
             }
@@ -801,3 +894,3 @@ if (data) {
             element: this.el,
-            componentVersion: '0.0.7',
+            componentVersion: '0.0.8',
             version: 0,
@@ -812,3 +905,3 @@ });
         }
-        // TODO replace token with a Manifold Stripe token.
+        this.removeErrors('stripe-init');
         // Initialize Stripe
@@ -819,4 +912,6 @@ this.stripe = await loadStripe(this.stripePublishableKey, {
         if (!this.stripe) {
-            // TODO handle stripe error
-            return;
+            this.addErrors(interfaceError('stripe-init'));
+            throw new Error('Could not load Stripe with the following credentials:' +
+                `\n\tStripePublishable Key: ${this.stripePublishableKey}` +
+                `\n\tStripe Account ID: ${data.profile.stripeAccount.id}`);
         }
@@ -829,19 +924,47 @@ // Create and mount Stripe card element
             this.cardPlaceholder.removeAttribute('data-is-loading');
+            this.card.on('change', e => {
+                if (e.empty) {
+                    this.cardStatus = 'empty';
+                }
+                else if (e.complete) {
+                    this.cardStatus = 'complete';
+                }
+                else {
+                    this.cardStatus = 'partial';
+                }
+                this.removeErrors('card', 'validation_error');
+                if (e.error) {
+                    this.addErrors(validationError(e.error.type, e.error.message));
+                }
+            });
         }
+        else {
+            this.addErrors(interfaceError('stripe-init'));
+            throw new Error('Could not mount Stripe element.');
+        }
     }
     async updatePlan(planId) {
+        this.removeErrors('plan-query');
         if (!planId) {
+            this.addErrors(interfaceError('plan-query'));
             throw new Error('Missing property `planId` on `manifold-subscription-create`');
         }
         if (!this.connection) {
+            this.addErrors(interfaceError('plan-query'));
             throw new Error('Missing property `connection` on `manifold-subscription-create`.');
         }
+        this.data = undefined;
         this.loading = true;
         const variables = { planId };
-        const { data, errors } = await this.connection.graphqlFetch({
+        const { data, errors } = await this.connection
+            .graphqlFetch({
             query: planQuery,
             variables,
+        })
+            .catch(e => {
+            this.addErrors(dataError('plan-query', 'selected plan'));
+            throw new Error(e);
         });
         if (errors) {
-            this.errors = errors;
+            this.addErrors(dataError('plan-query', 'selected plan'));
         }
@@ -858,5 +981,3 @@ if (data) {
     async fetchCustomCost(configuredFeatures) {
-        if (!this.connection) {
-            return undefined;
-        }
+        this.removeErrors('cost');
         // if not configurable, return plan cost
@@ -867,11 +988,13 @@ if (Object.keys(this.configuredFeatures).length === 0) {
         }
+        if (!this.connection) {
+            this.addErrors(dataError('cost', 'cost of selected plan'));
+            throw new Error('Missing property `connection` on `manifold-subscription-create`.');
+        }
         // Hide display while calculating
         this.calculatedCost = undefined;
-        this.errors = undefined;
+        // If a request is in flight, cancel it
         if (this.controller) {
             this.controller.abort();
         }
-        // If a request is in flight, cancel it
         this.controller = new AbortController();
-        // TODO pass controller to the request (might need to do this in manifold-init)
         try {
@@ -885,4 +1008,3 @@ const { cost } = await this.connection.gateway.post(`/id/plan/${this.planId}/cost`, {
             if (e.name !== 'AbortError') {
-                // TODO store error in a better way so it can be displayed in place of cost in UI
-                this.errors = [{ message: 'Error getting plan cost.' }];
+                this.addErrors(dataError('cost', 'cost of selected plan'));
             }
@@ -893,4 +1015,9 @@ }
     render() {
-        var _a, _b;
-        return (h("div", { class: "ManifoldSubscriptionCreate" }, this.heading && h("h1", { class: "ManifoldSubscriptionCreate__Heading" }, this.heading), this.isEditing ? (h(PlanSelector, { planId: {
+        var _a;
+        const interfaceErrors = filterErrors(this.errors, 'type', ['interface']);
+        const dataErrors = filterErrors(this.errors, 'type', ['data']);
+        const interfaceDataErrors = [...interfaceErrors, ...dataErrors];
+        const subscriptionErrors = filterErrors(this.errors, 'type', ['subscription']);
+        const validationErrors = filterErrors(this.errors, 'type', ['validation']);
+        return (h("div", { class: "ManifoldSubscriptionCreate" }, this.heading && h("h1", { class: "ManifoldSubscriptionCreate__Heading" }, this.heading), interfaceDataErrors.length > 0 && (h("div", { class: "ManifoldSubscriptionCreate__MessageContainer" }, interfaceDataErrors.map(error => (h(Message, { type: "error" }, error.message))))), h("form", { class: "ManifoldSubscriptionCreate__Form", method: "post", onSubmit: this.subscribe, "data-interface-error": interfaceErrors.length > 0, "data-data-error": dataErrors.length > 0 }, this.isEditing ? (h(PlanSelector, { planId: {
                 value: this.planId,
@@ -902,6 +1029,6 @@ set: this.setPlanId,
                 setAll: this.setAllConfiguredFeatures,
-            }, calculatedCost: this.calculatedCost, data: this.planListData, isLoading: this.isLoadingPlanSelector })) : (h(PlanCard, { isLoading: this.loading, plan: ((_a = this.data) === null || _a === void 0 ? void 0 : _a.plan) || undefined }, h("button", { class: "ManifoldSubscriptionCreate__ModifyPlanButton", onClick: this.toggleIsEditing }, "Change Plan"))), h("form", { class: "ManifoldSubscriptionCreate__Form", method: "post", onSubmit: this.subscribe }, h("label", { class: "ManifoldSubscriptionCreate__Field ManifoldSubscriptionCreate__CardField" }, h("span", { class: "ManifoldSubscriptionCreate__Field__Label" }, "Credit Card"), h("div", { class: "StripeElement", ref: el => {
+            }, calculatedCost: this.calculatedCost, errors: filterErrors(this.errors, 'label', ['cost', 'plan-list-query']), data: this.planListData, isLoading: this.isLoadingPlanSelector })) : (h(PlanCard, { isLoading: this.loading, plan: ((_a = this.data) === null || _a === void 0 ? void 0 : _a.plan) || undefined, errors: filterErrors(this.errors, 'label', ['plan-query']) }, h("button", { type: "button", class: "ManifoldSubscriptionCreate__ModifyPlanButton", onClick: this.toggleIsEditing }, "Change Plan"))), h("label", { class: "ManifoldSubscriptionCreate__Field ManifoldSubscriptionCreate__CardField" }, h("span", { class: "ManifoldSubscriptionCreate__Field__Label" }, "Credit Card"), h("div", { class: "StripeElement", ref: el => {
                 this.cardPlaceholder = el;
-            }, "data-is-loading": true }, "Credit Card Field")), h("button", { class: "ManifoldSubscriptionCreate__Button", type: "submit", disabled: this.subscribing }, this.subscribing ? 'Subscribing...' : 'Subscribe with Card'), h("p", { class: "ManifoldSubscriptionCreate__HelpText", "data-centered": true }, "We charge for plan cost + usage at end of month"), (_b = this.errors) === null || _b === void 0 ? void 0 :
-            _b.map(error => (h(Message, { type: "error" }, error.message))))));
+            }, "data-is-loading": true }, "Credit Card Field"), validationErrors.map(error => (h("p", { class: "ManifoldSubscriptionCreate__Field__InlineError" }, error.message)))), h("button", { class: "ManifoldSubscriptionCreate__Button", type: "submit", "data-kind": "primary", disabled: this.subscribing ||
+                filterErrors(this.errors, 'type', ['data', 'interface']).length > 0 }, this.subscribing ? 'Subscribing...' : 'Subscribe with Card'), subscriptionErrors.length > 0 && (h("div", { class: "ManifoldSubscriptionCreate__MessageContainer" }, subscriptionErrors.map(error => (h(Message, { type: "error" }, error.message))))), h("p", { class: "ManifoldSubscriptionCreate__HelpText", "data-centered": true }, "We charge for plan cost + usage at end of month"))));
     }
@@ -916,3 +1043,3 @@ get el() { return getElement(this); }
 
-const query = "query Subscription($id: ID!) {\n  subscription(id: $id) {\n    status {\n      label\n      percentDone\n      message\n    }\n    plan {\n      label\n      displayName\n      fixedFeatures(first: 100) {\n        edges {\n          node {\n            label\n            displayName\n            displayValue\n          }\n        }\n      }\n      meteredFeatures(first: 100) {\n        edges {\n          node {\n            label\n            displayName\n          }\n        }\n      }\n      configurableFeatures(first: 100) {\n        edges {\n          node {\n            label\n            displayName\n          }\n        }\n      }\n    }\n  }\n}\n";
+const query = "query Subscription($id: ID!) {\n  subscription(id: $id) {\n    status {\n      label\n      percentDone\n      message\n    }\n    plan {\n      id\n      label\n      displayName\n      cost\n      fixedFeatures(first: 500) {\n        edges {\n          node {\n            displayName\n            displayValue\n            label\n          }\n        }\n      }\n      meteredFeatures(first: 500) {\n        edges {\n          node {\n            label\n            displayName\n            numericDetails {\n              unit\n              costTiers {\n                limit\n                cost\n              }\n            }\n          }\n        }\n      }\n      configurableFeatures(first: 500) {\n        edges {\n          node {\n            label\n            displayName\n            type\n            upgradable\n            downgradable\n            featureOptions {\n              displayName\n              value\n              cost\n            }\n            numericDetails {\n              increment\n              min\n              max\n              unit\n              costTiers {\n                limit\n                cost\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n}\n";
 
@@ -942,3 +1069,3 @@ const ManifoldSubscriptionCreate$1 = class {
             element: this.el,
-            componentVersion: '0.0.7',
+            componentVersion: '0.0.8',
             version: 0,
@@ -949,7 +1076,9 @@ });
     render() {
-        var _a;
-        if ((_a = this.data) === null || _a === void 0 ? void 0 : _a.subscription) {
-            return h("h3", null, this.data.subscription.plan.displayName);
+        if (!this.data || !this.data.subscription) {
+            return null;
         }
-        return null;
+        const { plan, status } = this.data.subscription;
+        return (h("div", { class: "ManifoldSubscriptionCreate__Details" }, this.heading && h("h1", { class: "ManifoldSubscriptionCreate__Heading" }, this.heading), h("section", { class: "ManifoldSubscriptionCreate__Card" }, h("header", { class: "ManifoldSubscriptionCreate__Details__Header" }, h("h2", { class: "ManifoldSubscriptionCreate__PlanName" }, plan.displayName), h("h3", { class: "ManifoldSubscriptionCreate__SubscriptionStatus", "data-status": status.label }, h("div", { class: "ManifoldSubscriptionCreate__SubscriptionStatusIndicator" }), status.label)), h("dl", { class: "ManifoldSubscriptionCreate__Details__FeatureList" }, plan.fixedFeatures.edges.map(fixedFeature => (h(FixedFeature, { fixedFeature: fixedFeature }))), plan.meteredFeatures.edges.map(meteredFeature => (h(MeteredFeature, { meteredFeature: meteredFeature }))), plan.configurableFeatures.edges.map(configurableFeature => (
+        // TODO format configured feature so it displays as fixed
+        h(ConfigurableFeature, { setConfiguredFeature: () => null, configurableFeature: configurableFeature })))), h("footer", { class: "ManifoldSubscriptionCreate__PlanSelector__Footer" }, h("div", null, h(CostDisplay, { baseCost: plan.cost }), h("p", { class: "ManifoldSubscriptionCreate__HelpText" }, "Usage billed at the end of month")), h("button", { type: "button", class: "ManifoldSubscriptionCreate__Button", "data-kind": "black" }, "Modify Subsciption")))));
     }
@@ -1011,3 +1140,3 @@ get el() { return getElement(this); }
             element: this.el,
-            componentVersion: '0.0.7',
+            componentVersion: '0.0.8',
             version: 0,
@@ -1014,0 +1143,0 @@ });

dist/manifold-subscription/manifold-subscription.esm.js

@@ -1,1 +0,1 @@
-import{p as e,b as a}from"./p-21a2f7c2.js";e().then(e=>a([["p-814b8e5b",[[0,"manifold-configured-feature",{label:[1],value:[8]}],[0,"manifold-subscription-create",{loading:[1028],isLoadingPlanSelector:[1028,"is-loading-plan-selector"],errors:[1040],data:[1040],planListData:[1040],setupIntentStatus:[1025,"setup-intent-status"],setupIntentError:[1025,"setup-intent-error"],subscribing:[1028],configuredFeatures:[1040],calculatedCost:[1026,"calculated-cost"],isEditing:[1028,"is-editing"],heading:[1],planId:[1025,"plan-id"],ownerId:[1,"owner-id"],stripePublishableKey:[1,"stripe-publishable-key"],displayName:[1,"display-name"],label:[1],card:[32]},[[0,"manifold-configured-feature-change","updateConfiguredFeature"]]],[0,"manifold-subscription-details",{subscriptionId:[1,"subscription-id"],data:[32]}],[0,"manifold-subscription-list",{connection:[1040],loading:[1028],errors:[1040],data:[1040],heading:[1],owner:[1]}]]]],e));
+import{p as a,b as e}from"./p-21a2f7c2.js";a().then(a=>e([["p-f7cd57f4",[[0,"manifold-configured-feature",{label:[1],value:[8]}],[0,"manifold-subscription-create",{loading:[1028],isLoadingPlanSelector:[1028,"is-loading-plan-selector"],errors:[1040],data:[1040],planListData:[1040],setupIntentStatus:[1025,"setup-intent-status"],setupIntentError:[1025,"setup-intent-error"],subscribing:[1028],configuredFeatures:[1040],calculatedCost:[1026,"calculated-cost"],isEditing:[1028,"is-editing"],heading:[1],planId:[1025,"plan-id"],ownerId:[1,"owner-id"],stripePublishableKey:[1,"stripe-publishable-key"],displayName:[1,"display-name"],label:[1],card:[32],cardStatus:[32]},[[0,"manifold-configured-feature-change","updateConfiguredFeature"]]],[0,"manifold-subscription-details",{subscriptionId:[1,"subscription-id"],heading:[1],data:[32]}],[0,"manifold-subscription-list",{connection:[1040],loading:[1028],errors:[1040],data:[1040],heading:[1],owner:[1]}]]]],a));

dist/manifold-subscription/p-653d3973.system.js

@@ -1,1 +0,1 @@
-System.register(["./p-7b246743.system.js"],(function(){"use strict";var e,t;return{setters:[function(i){e=i.p;t=i.b}],execute:function(){e().then((function(e){return t([["p-19db9383.system",[[0,"manifold-configured-feature",{label:[1],value:[8]}],[0,"manifold-subscription-create",{loading:[1028],isLoadingPlanSelector:[1028,"is-loading-plan-selector"],errors:[1040],data:[1040],planListData:[1040],setupIntentStatus:[1025,"setup-intent-status"],setupIntentError:[1025,"setup-intent-error"],subscribing:[1028],configuredFeatures:[1040],calculatedCost:[1026,"calculated-cost"],isEditing:[1028,"is-editing"],heading:[1],planId:[1025,"plan-id"],ownerId:[1,"owner-id"],stripePublishableKey:[1,"stripe-publishable-key"],displayName:[1,"display-name"],label:[1],card:[32]},[[0,"manifold-configured-feature-change","updateConfiguredFeature"]]],[0,"manifold-subscription-details",{subscriptionId:[1,"subscription-id"],data:[32]}],[0,"manifold-subscription-list",{connection:[1040],loading:[1028],errors:[1040],data:[1040],heading:[1],owner:[1]}]]]],e)}))}}}));
+System.register(["./p-7b246743.system.js"],(function(){"use strict";var e,t;return{setters:[function(i){e=i.p;t=i.b}],execute:function(){e().then((function(e){return t([["p-6105cb4c.system",[[0,"manifold-configured-feature",{label:[1],value:[8]}],[0,"manifold-subscription-create",{loading:[1028],isLoadingPlanSelector:[1028,"is-loading-plan-selector"],errors:[1040],data:[1040],planListData:[1040],setupIntentStatus:[1025,"setup-intent-status"],setupIntentError:[1025,"setup-intent-error"],subscribing:[1028],configuredFeatures:[1040],calculatedCost:[1026,"calculated-cost"],isEditing:[1028,"is-editing"],heading:[1],planId:[1025,"plan-id"],ownerId:[1,"owner-id"],stripePublishableKey:[1,"stripe-publishable-key"],displayName:[1,"display-name"],label:[1],card:[32],cardStatus:[32]},[[0,"manifold-configured-feature-change","updateConfiguredFeature"]]],[0,"manifold-subscription-details",{subscriptionId:[1,"subscription-id"],heading:[1],data:[32]}],[0,"manifold-subscription-list",{connection:[1040],loading:[1028],errors:[1040],data:[1040],heading:[1],owner:[1]}]]]],e)}))}}}));

dist/types/components.d.ts

@@ -8,3 +8,3 @@ /* eslint-disable */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
-import { GraphqlError, } from "@manifoldco/manifold-init-types/types/v0/graphqlFetch";
+import { UIError, } from "./utils/error";
 import { PlanListQuery, PlanQuery, SubscriptionsQuery, } from "./types/graphql";
@@ -14,2 +14,3 @@ import { SetupIntent, } from "@stripe/stripe-js";
 import { Connection, } from "@manifoldco/manifold-init-types/types/v0";
+import { GraphqlError, } from "@manifoldco/manifold-init-types/types/v0/graphqlFetch";
 export namespace Components {
@@ -28,3 +29,3 @@ interface ManifoldConfiguredFeature {
         "displayName"?: string;
-        "errors"?: GraphqlError[];
+        "errors": UIError[];
         /**
@@ -59,2 +60,3 @@ * Component heading text
     interface ManifoldSubscriptionDetails {
+        "heading"?: string;
         "subscriptionId": string;
@@ -123,3 +125,3 @@ }
         "displayName"?: string;
-        "errors"?: GraphqlError[];
+        "errors"?: UIError[];
         /**
@@ -157,2 +159,3 @@ * Component heading text
     interface ManifoldSubscriptionDetails {
+        "heading"?: string;
         "subscriptionId"?: string;
@@ -159,0 +162,0 @@ }

dist/types/components/manifold-subscription-create/manifold-subscription-create.d.ts

 import { EventEmitter } from '@stencil/core';
 import { Stripe, StripeCardElement, SetupIntent } from '@stripe/stripe-js';
 import { Connection } from '@manifoldco/manifold-init-types/types/v0';
-import { GraphqlError } from '@manifoldco/manifold-init-types/types/v0/graphqlFetch';
 import { PlanQuery, PlanListQuery } from '../../types/graphql';
 import { FeatureMap } from '../../utils/plan';
+import { UIError } from '../../utils/error';
 export declare class ManifoldSubscriptionCreate {
@@ -13,5 +13,6 @@ el: HTMLElement;
     card: StripeCardElement;
+    cardStatus: 'empty' | 'partial' | 'complete';
     loading?: boolean;
     isLoadingPlanSelector?: boolean;
-    errors?: GraphqlError[];
+    errors: UIError[];
     data?: PlanQuery;
@@ -50,2 +51,4 @@ planListData?: PlanListQuery;
     componentWillLoad(): Promise<void>;
+    addErrors: (...errors: UIError[]) => void;
+    removeErrors: (...labels: string[]) => void;
     initializeStripeElements(data: PlanQuery): Promise<void>;
@@ -66,4 +69,4 @@ updatePlan(planId?: string): Promise<void>;
     setPlanId: (planId: string) => void;
-    toggleIsEditing: () => Promise<null | undefined>;
+    toggleIsEditing: () => Promise<null>;
     render(): any;
 }

dist/types/components/manifold-subscription-details/manifold-subscription-details.d.ts

@@ -5,2 +5,3 @@ import { Connection } from '@manifoldco/manifold-init-types/types/v0';
     subscriptionId: string;
+    heading?: string;
     data?: SubscriptionQuery;
@@ -7,0 +8,0 @@ el: HTMLElement;

dist/types/components/shared/CostDisplay.d.ts

@@ -9,4 +9,5 @@ import { FunctionalComponent } from '@stencil/core';
     meteredFeatures?: PlanMeteredFeatureEdge[];
+    hasError?: boolean;
 }
 declare const CostDisplay: FunctionalComponent<CostDisplayProps>;
 export default CostDisplay;

dist/types/components/shared/PlanCard.d.ts

 import { FunctionalComponent } from '@stencil/core';
+import { UIError } from '../../utils/error';
 interface PlanCardProps {
     isLoading?: boolean;
     isChecked?: boolean;
+    errors?: UIError[];
     plan?: {
@@ -6,0 +8,0 @@ displayName: string;

dist/types/components/shared/PlanSelector.d.ts

 import { FunctionalComponent } from '@stencil/core';
 import { PlanListQuery } from '../../types/graphql';
 import { FeatureMap } from '../../utils/plan';
+import { UIError } from '../../utils/error';
 interface PlanId {
@@ -16,2 +17,3 @@ value: string;
     configuredFeatures: ConfiguredFeatures;
+    errors: UIError[];
     calculatedCost?: number;
@@ -18,0 +20,0 @@ data?: PlanListQuery;

dist/types/types/graphql.d.ts

@@ -494,2 +494,5 @@ export declare type Maybe<T> = T;
     configurableFeatures: Maybe<ProductConfigurableFeatureConnection>;
+    version: Maybe<Scalars['Int']>;
+    versionID: Maybe<Scalars['ID']>;
+    published: Maybe<Scalars['Boolean']>;
 };
@@ -792,2 +795,3 @@ export declare type ProductPlansArgs = {
     label: Maybe<Scalars['String']>;
+    latest: Maybe<Scalars['Boolean']>;
 };
@@ -995,2 +999,3 @@ export declare type QueryCategoriesArgs = {
     status: SubscriptionAgreementStatus;
+    owner: Maybe<Profile>;
 };
@@ -1216,3 +1221,3 @@ export declare type SubscriptionAgreementConnection = {
             __typename?: 'Plan';
-        } & Pick<Plan, 'label' | 'displayName'> & {
+        } & Pick<Plan, 'id' | 'label' | 'displayName' | 'cost'> & {
             fixedFeatures: Maybe<({
@@ -1226,3 +1231,3 @@ __typename?: 'PlanFixedFeatureConnection';
                         __typename?: 'PlanFixedFeature';
-                    } & Pick<PlanFixedFeature, 'label' | 'displayName' | 'displayValue'>);
+                    } & Pick<PlanFixedFeature, 'displayName' | 'displayValue' | 'label'>);
                 })>;
@@ -1238,3 +1243,11 @@ })>;
                         __typename?: 'PlanMeteredFeature';
-                    } & Pick<PlanMeteredFeature, 'label' | 'displayName'>);
+                    } & Pick<PlanMeteredFeature, 'label' | 'displayName'> & {
+                        numericDetails: ({
+                            __typename?: 'PlanMeteredFeatureNumericDetails';
+                        } & Pick<PlanMeteredFeatureNumericDetails, 'unit'> & {
+                            costTiers: Maybe<Array<({
+                                __typename?: 'PlanFeatureCostTier';
+                            } & Pick<PlanFeatureCostTier, 'limit' | 'cost'>)>>;
+                        });
+                    });
                 })>;
@@ -1250,3 +1263,14 @@ })>;
                         __typename?: 'PlanConfigurableFeature';
-                    } & Pick<PlanConfigurableFeature, 'label' | 'displayName'>);
+                    } & Pick<PlanConfigurableFeature, 'label' | 'displayName' | 'type' | 'upgradable' | 'downgradable'> & {
+                        featureOptions: Maybe<Array<({
+                            __typename?: 'PlanConfigurableFeatureOption';
+                        } & Pick<PlanConfigurableFeatureOption, 'displayName' | 'value' | 'cost'>)>>;
+                        numericDetails: Maybe<({
+                            __typename?: 'PlanConfigurableFeatureNumericDetails';
+                        } & Pick<PlanConfigurableFeatureNumericDetails, 'increment' | 'min' | 'max' | 'unit'> & {
+                            costTiers: Maybe<Array<({
+                                __typename?: 'PlanFeatureCostTier';
+                            } & Pick<PlanFeatureCostTier, 'limit' | 'cost'>)>>;
+                        })>;
+                    });
                 })>;
@@ -1253,0 +1277,0 @@ })>;

package.json

 {
   "name": "@manifoldco/manifold-subscription",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "private": false,
@@ -5,0 +5,0 @@ "description": "Manifold Subscription Web Components",

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

Improved metrics

Total package byte prevSize

1082133

increased by5.26%

Number of package files

103

increased by1.98%

Lines of code

15101

increased by4.46%

Worsened metrics

Number of low supply chain risk alerts

10

increased by66.67%

No dependency changes