@manifoldco/web-components - npm Package Compare versions

Comparing version 0.0.9 to 0.0.10

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

@@ -5,3 +5,3 @@ import { Component, Host, State, Prop, h } from '@stencil/core';
 import query from '../../graphql/GetProduct.graphql';
-import { toUSD } from '../../utils/cost';
+import { toUSD, displayRange } from '../../utils/cost';
 import sampleProduct from './data.json';
@@ -15,3 +15,3 @@ export class ManifoldPlanTable {
             this.client = createClient({
-                url: 'http://localhost:8080/graphql',
+                url: 'https://graphql.manifold.co/graphql',
                 fetchOptions: {
@@ -45,3 +45,3 @@ headers: {
     planCellForFeature(planSlug, featureSlug) {
-        var _a, _b;
+        var _a, _b, _c;
         const plan = this.plans.find((p) => p.slug === planSlug);
@@ -79,2 +79,20 @@ if (!plan) {
             case 'IntRangeFeature':
+                if (feature.class === 'METERED') {
+                    // Pay as you go feature
+                    return (h("table", { class: "cost-tiers" },
+                        h("thead", null,
+                            h("tr", null,
+                                h("th", { colSpan: 2, class: "Manifold-Typography--SubheadingSmall" },
+                                    "Billed per ",
+                                    ((_b = feature.units) === null || _b === void 0 ? void 0 : _b.single) || 'unit'))),
+                        h("tbody", null, feature.intRangeValues.map((range) => {
+                            var _a, _b;
+                            return (h("tr", { class: "Manifold-Typography--Caption" },
+                                h("td", null, displayRange(range.min, range.max, ((_a = feature.units) === null || _a === void 0 ? void 0 : _a.plural) || 'units')),
+                                h("td", null,
+                                    toUSD(range.cost),
+                                    " / ",
+                                    ((_b = feature.units) === null || _b === void 0 ? void 0 : _b.single) || 'unit')));
+                        }))));
+                }
                 // Numeric Range Feature
@@ -84,3 +102,3 @@ return (h("div", { class: "Manifold-Input" },
                     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" }, `${feature.intRangeValues[0].min} - ${feature.intRangeValues[0].max} ${((_b = feature.units) === null || _b === void 0 ? void 0 : _b.plural) || 'units'}`)));
+                    h("div", { class: "Manifold-Typography--Caption helper" }, displayRange(feature.intRangeValues[0].min, feature.intRangeValues[0].max, ((_c = feature.units) === null || _c === void 0 ? void 0 : _c.plural) || 'units'))));
             case 'ExcludedFeature':
@@ -97,3 +115,3 @@ return h("span", { class: "excluded" }, "\u2022");
         return (h(Host, null,
-            h("table", { class: "Manifold-Typography--Body" },
+            h("table", { class: "Manifold-Typography--Body plan-table" },
                 h("thead", null,
@@ -104,3 +122,4 @@ h("tr", null,
                             h("h1", { class: "Manifold-Typography--HeadingLarge" }, name),
-                            toUSD(cost)))))),
+                            toUSD(cost),
+                            "/mo"))))),
                 h("tbody", null,
@@ -107,0 +126,0 @@ this.featureSlugs.map((featureSlug) => (h("tr", null,

dist/collection/utils/cost.js

@@ -6,1 +6,19 @@ export function toUSD(cents) {
 }
+export function displayRange(lower, upper, unit) {
+    const format = (n, addOne) => {
+        const adjustment = n > 0 && addOne ? 1 : 0; // add one, say, if lower bound
+        return new Intl.NumberFormat('en-US', {
+            notation: 'compact',
+        }).format(n + adjustment);
+    };
+    // only one tier
+    if (lower === 0 && upper === -1) {
+        return '';
+    }
+    // if upper tier infinite
+    if (upper === -1) {
+        return `${format(lower, true)}+ ${unit}`;
+    }
+    // default (add one to lower if > 0)
+    return `${format(lower, true)} – ${upper ? format(upper) : '∞'} ${unit}`;
+}

dist/manifold/manifold.esm.js

@@ -1,1 +0,1 @@
-import{p as e,b as l}from"./p-15558ebb.js";e().then(e=>l([["p-0a543672",[[1,"manifold-plan-table",{slug:[1],clientKey:[1,"client-key"],product:[32],client:[32]}]]]],e));
+import{p as a,b as e}from"./p-15558ebb.js";a().then(a=>e([["p-a1a78b20",[[1,"manifold-plan-table",{slug:[1],clientKey:[1,"client-key"],product:[32],client:[32]}]]]],a));

dist/manifold/p-c7a51fa1.system.js

@@ -1,1 +0,1 @@
-System.register(["./p-966db66d.system.js"],(function(){"use strict";var e,t;return{setters:[function(n){e=n.p;t=n.b}],execute:function(){e().then((function(e){return t([["p-eb2886ad.system",[[1,"manifold-plan-table",{slug:[1],clientKey:[1,"client-key"],product:[32],client:[32]}]]]],e)}))}}}));
+System.register(["./p-966db66d.system.js"],(function(){"use strict";var e,t;return{setters:[function(n){e=n.p;t=n.b}],execute:function(){e().then((function(e){return t([["p-26cce578.system",[[1,"manifold-plan-table",{slug:[1],clientKey:[1,"client-key"],product:[32],client:[32]}]]]],e)}))}}}));

dist/types/utils/cost.d.ts

 export declare function toUSD(cents: number): string;
+export declare function displayRange(lower: number, upper: number | undefined | null, unit: string): string;

package.json

 {
   "name": "@manifoldco/web-components",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "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

1453447

increased by0.7%

Lines of code

23843

increased by0.48%

No dependency changes