@manifoldco/web-components - npm Package Compare versions

Comparing version 0.0.26 to 0.0.27

dist/cjs/loader.cjs.js

@@ -5,8 +5,8 @@ 'use strict';
 
-const index = require('./index-a6f6051c.js');
+const index = require('./index-2eb15477.js');
 
 const defineCustomElements = (win, options) => index.patchEsm().then(() => {
-  return index.bootstrapLazy([["manifold-plan-table.cjs",[[1,"manifold-plan-table",{"embed":[1],"ctaText":[1,"cta-text"],"baseUrl":[1,"base-url"],"productData":[16],"env":[1],"featureSelections":[32],"product":[32],"client":[32]}]]]], options);
+  return index.bootstrapLazy([["manifold-plan-table.cjs",[[1,"manifold-plan-table",{"embed":[1],"ctaText":[1,"cta-text"],"baseUrl":[1,"base-url"],"productData":[16],"env":[1],"featureSelections":[32],"featureErrors":[32],"product":[32],"client":[32]}]]]], options);
 });
 
 exports.defineCustomElements = defineCustomElements;

dist/cjs/manifold.cjs.js

 'use strict';
 
-const index = require('./index-a6f6051c.js');
+const index = require('./index-2eb15477.js');
 
 index.patchBrowser().then(options => {
-  return index.bootstrapLazy([["manifold-plan-table.cjs",[[1,"manifold-plan-table",{"embed":[1],"ctaText":[1,"cta-text"],"baseUrl":[1,"base-url"],"productData":[16],"env":[1],"featureSelections":[32],"product":[32],"client":[32]}]]]], options);
+  return index.bootstrapLazy([["manifold-plan-table.cjs",[[1,"manifold-plan-table",{"embed":[1],"ctaText":[1,"cta-text"],"baseUrl":[1,"base-url"],"productData":[16],"env":[1],"featureSelections":[32],"featureErrors":[32],"product":[32],"client":[32]}]]]], options);
 });

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

@@ -7,3 +7,4 @@ import { Component, Event, Host, State, Prop, h, Watch, } from '@stencil/core';
 import planQuery from '../../graphql/EmbeddedProductPlan.graphql';
-import { toUSD, displayRange, displayMetered } from '../../utils/cost';
+import { toUSD, displayMetered } from '../../utils/cost';
+import ConfiguredTiers from './configured-tiers';
 export class ManifoldPlanTable {
@@ -85,4 +86,22 @@ constructor() {
     }
+    addFeatureSelectionError(err) {
+        const idx = this.featureErrors.findIndex((e) => e.slug === err.slug && e.planSlug === err.planSlug);
+        if (idx === -1) {
+            this.featureErrors.push(err);
+        }
+        else {
+            this.featureErrors[idx] = err;
+        }
+        this.featureErrors = [...this.featureErrors];
+    }
+    removeFeatureSelectionError(planSlug, featureSlug) {
+        const idx = this.featureErrors.findIndex((e) => e.slug === featureSlug && e.planSlug === planSlug);
+        if (idx !== -1) {
+            this.featureErrors.splice(idx, 1);
+        }
+        this.featureErrors = [...this.featureErrors];
+    }
     componentWillLoad() {
         this.featureSelections = {};
+        this.featureErrors = [];
         if (this.embed) {
@@ -205,7 +224,25 @@ let url = 'https://graphql.manifold.co/graphql';
                 }
-                // Numeric Range Feature
-                return (h("div", { class: "Manifold-Input" },
-                    h("label", { htmlFor: `feature-${planSlug}-${featureSlug}` }),
-                    h("input", { type: "number", name: featureSlug, id: `feature-${planSlug}-${featureSlug}`, min: feature.intRangeValues[0].min, max: feature.intRangeValues[0].max || undefined, step: feature.intRangeValues[0].increments || 1 }),
-                    h("div", { class: "Manifold-Typography--Caption helper" }, displayRange(feature.intRangeValues[0].min, feature.intRangeValues[0].max, ((_d = feature.units) === null || _d === void 0 ? void 0 : _d.plural) || 'units'))));
+                {
+                    if (!this.featureSelections[planSlug]) {
+                        this.featureSelections[planSlug] = [];
+                    }
+                    let value = this.featureSelections[planSlug].find((e) => e.slug === featureSlug);
+                    if (value === undefined) {
+                        value = {
+                            slug: featureSlug,
+                            intSelection: 0,
+                        };
+                        this.featureSelections[planSlug].push(value);
+                    }
+                    const error = this.featureErrors.find((e) => {
+                        return e.planSlug === planSlug && e.slug === featureSlug;
+                    });
+                    // Numeric Range Feature
+                    return (h(ConfiguredTiers, { featureValues: feature.intRangeValues, unit: (_d = feature.units) === null || _d === void 0 ? void 0 : _d.plural, featureSlug: featureSlug, planSlug: plan.slug, value: value, error: error, onChange: (v) => {
+                            this.removeFeatureSelectionError(plan.slug, featureSlug);
+                            this.selectFeature(plan.slug, plan.name, featureSlug, v);
+                        }, onError: (e) => {
+                            this.addFeatureSelectionError(e);
+                        } }));
+                }
             case 'ExcludedFeature':
@@ -243,2 +280,3 @@ return h("span", { class: "excluded" }, "\u2022");
                                 displayName: p.name,
+                                featureSelection: this.featureSelections[p.slug] || [],
                             };
@@ -249,3 +287,13 @@ const ctaText = this.ctaText || ((_a = p.cta) === null || _a === void 0 ? void 0 : _a.text) || 'Get Started';
                                 const params = new URLSearchParams();
-                                Object.entries(eventDetails).forEach(([key, val]) => params.set(key, val));
+                                Object.entries(eventDetails).forEach(([key, val]) => {
+                                    if (typeof val !== 'string') {
+                                        if (val.length > 0) {
+                                            const selection = btoa(JSON.stringify(val));
+                                            params.set(key, selection);
+                                        }
+                                    }
+                                    else {
+                                        params.set(key, val);
+                                    }
+                                });
                                 const url = `${uri}?${params}`;
@@ -256,3 +304,3 @@ return (h("td", null,
                             return (h("td", null,
-                                h("button", { onClick: () => this.ctaClick.emit(eventDetails) }, ctaText)));
+                                h("button", { disabled: this.featureErrors.some((e) => e.planSlug === p.slug), onClick: () => this.ctaClick.emit(eventDetails) }, ctaText)));
                         }))))));
@@ -361,2 +409,3 @@ }
         "featureSelections": {},
+        "featureErrors": {},
         "product": {},
@@ -363,0 +412,0 @@ "client": {}

dist/manifold/manifold.esm.js

@@ -1,1 +0,1 @@
-import{p as a,b as e}from"./p-8df06789.js";a().then(a=>e([["p-e68081aa",[[1,"manifold-plan-table",{embed:[1],ctaText:[1,"cta-text"],baseUrl:[1,"base-url"],productData:[16],env:[1],featureSelections:[32],product:[32],client:[32]}]]]],a));
+import{p as e,b as a}from"./p-a58c55fb.js";e().then(e=>a([["p-9fc22664",[[1,"manifold-plan-table",{embed:[1],ctaText:[1,"cta-text"],baseUrl:[1,"base-url"],productData:[16],env:[1],featureSelections:[32],featureErrors:[32],product:[32],client:[32]}]]]],e));

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

 import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
 import { Client } from '@urql/core';
 import { EmbeddedProductQuery, IntRangeFeatureValue } from '../../types/graphql';
-interface FeatureSelection {
-    slug: string;
-    booleanSelection?: boolean;
-    intSelection?: number;
-    stringSelection?: string;
-}
-interface FeatureSelections {
-    [key: string]: FeatureSelection[];
-}
+import { FeatureSelection, FeatureSelections, FeatureError } from './feature-selections';
 export interface PlanTableEvent {
@@ -27,2 +19,3 @@ planSlug: string;
     featureSelections: FeatureSelections;
+    featureErrors: FeatureError[];
     product: EmbeddedProductQuery['embeddedProduct'];
@@ -34,2 +27,4 @@ client: Client;
     selectFeature(planSlug: string, planName: string, featureSlug: string, value: boolean | number | string): void;
+    addFeatureSelectionError(err: FeatureError): void;
+    removeFeatureSelectionError(planSlug: string, featureSlug: string): void;
     componentWillLoad(): void;
@@ -99,2 +94,1 @@ get plans(): ({
 }
-export {};

package.json

 {
   "name": "@manifoldco/web-components",
-  "version": "0.0.26",
+  "version": "0.0.27",
   "description": "Manifold's Web Components",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

New alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Long strings

Supply chain risk

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

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Long strings

Supply chain risk

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

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1563004

increased by2.69%

Number of package files

79

increased by5.33%

Lines of code

25465

increased by2.77%

No dependency changes