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

Comparing version 0.0.13 to 0.0.14

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

@@ -378,3 +378,3 @@ 'use strict';
 const controllers = {};
-async function fetchPlanCost({ planID, url, selection, }) {
+async function fetchPlanCost(connection, { planID, selection, }) {
     // request in-flight? cancel it
@@ -388,8 +388,10 @@ let controller = controllers[planID];
         controllers[planID] = controller;
-        const res = await fetch(`${url}/id/plan/${planID}/cost`, {
-            method: 'POST',
-            headers: { Connection: 'keep-alive', 'Content-Type': 'application/json' },
-            body: JSON.stringify({ features: selection }),
-            signal: controller.signal,
-        }).then(body => body.json());
+        const req = { features: selection };
+        const res = await connection.gateway.post(`/id/plan/${planID}/cost`, req);
+        // const res: { cost: number } = await fetch(`${url}/id/plan/${planID}/cost`, {
+        //   method: 'POST',
+        //   headers: { Connection: 'keep-alive', 'Content-Type': 'application/json' },
+        //   body: JSON.stringify({ features: selection }),
+        //   signal: controller.signal,
+        // }).then(body => body.json());
         delete controllers[planID]; // unset controller after finish
@@ -463,3 +465,3 @@ if (res && typeof res.cost === 'number') {
     const { element, env = 'prod' } = options || {};
-    const extendedDetail = Object.assign(Object.assign(Object.assign(Object.assign({}, detail), (element ? { componentName: element.tagName } : {})), (detail.componentName ? { componentName: detail.componentName } : {})), { version: '0.0.13' });
+    const extendedDetail = Object.assign(Object.assign(Object.assign(Object.assign({}, detail), (element ? { componentName: element.tagName } : {})), (detail.componentName ? { componentName: detail.componentName } : {})), { version: '0.0.14' });
     report({
@@ -520,3 +522,3 @@ type: 'error',
                                     componentName: el.tagName,
-                                    version: '0.0.13',
+                                    version: '0.0.14',
                                     duration: firstRenderWithDataMeasure.duration,
@@ -536,3 +538,3 @@ rttGraphql: rttGraphqlMeasure.duration,
                                 componentName: el.tagName,
-                                version: '0.0.13',
+                                version: '0.0.14',
                                 duration: loadMeasure.duration,
@@ -549,3 +551,3 @@ clientId,
                                 componentName: el.tagName,
-                                version: '0.0.13',
+                                version: '0.0.14',
                                 duration: firstRenderMeasure.duration,
@@ -672,4 +674,2 @@ clientId,
 };
-// settings
-const GATEWAY_ENDPOINT = 'https://api.manifold.co/v1';
 const ManifoldPricing = class {
@@ -698,9 +698,8 @@ constructor(hostRef) {
     async componentWillLoad() {
-        await customElements.whenDefined('mui-core');
-        const core = document.querySelector('mui-core');
+        await customElements.whenDefined('manifold-init');
+        const core = document.querySelector('manifold-init');
         this.connection = await core.initialize({
             element: this.el,
-            componentVersion: '0.0.13',
+            componentVersion: '0.0.14',
             version: 0,
-            clientId: this.clientId,
         });
@@ -771,3 +770,6 @@ if (!this.clientId) {
             // fetch plan cost for this configurable plan
-            fetchPlanCost({ planID, selection, url: this.gatewayUrl || GATEWAY_ENDPOINT }).then(cost => {
+            fetchPlanCost(this.connection, {
+                planID,
+                selection,
+            }).then(cost => {
                 if (typeof cost === 'number') {
@@ -792,3 +794,3 @@ clearTimeout(flickerStopper);
             properties: {
-                version: '0.0.13',
+                version: '0.0.14',
                 componentName: this.el.tagName,
@@ -795,0 +797,0 @@ planId,

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

@@ -21,4 +21,2 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
 import query from './product.graphql';
-// settings
-const GATEWAY_ENDPOINT = 'https://api.manifold.co/v1';
 export class ManifoldPricing {
@@ -46,4 +44,4 @@ constructor() {
     async componentWillLoad() {
-        await customElements.whenDefined('mui-core');
-        const core = document.querySelector('mui-core');
+        await customElements.whenDefined('manifold-init');
+        const core = document.querySelector('manifold-init');
         this.connection = await core.initialize({
@@ -53,3 +51,2 @@ element: this.el,
             version: 0,
-            clientId: this.clientId,
         });
@@ -120,3 +117,6 @@ if (!this.clientId) {
             // fetch plan cost for this configurable plan
-            fetchPlanCost({ planID, selection, url: this.gatewayUrl || GATEWAY_ENDPOINT }).then(cost => {
+            fetchPlanCost(this.connection, {
+                planID,
+                selection,
+            }).then(cost => {
                 if (typeof cost === 'number') {
@@ -123,0 +123,0 @@ clearTimeout(flickerStopper);

dist/collection/utils/feature.js

@@ -16,3 +16,3 @@ import { PlanFeatureType } from '../types/graphql';
 const controllers = {};
-export async function fetchPlanCost({ planID, url, selection, }) {
+export async function fetchPlanCost(connection, { planID, selection, }) {
     // request in-flight? cancel it
@@ -26,8 +26,10 @@ let controller = controllers[planID];
         controllers[planID] = controller;
-        const res = await fetch(`${url}/id/plan/${planID}/cost`, {
-            method: 'POST',
-            headers: { Connection: 'keep-alive', 'Content-Type': 'application/json' },
-            body: JSON.stringify({ features: selection }),
-            signal: controller.signal,
-        }).then(body => body.json());
+        const req = { features: selection };
+        const res = await connection.gateway.post(`/id/plan/${planID}/cost`, req);
+        // const res: { cost: number } = await fetch(`${url}/id/plan/${planID}/cost`, {
+        //   method: 'POST',
+        //   headers: { Connection: 'keep-alive', 'Content-Type': 'application/json' },
+        //   body: JSON.stringify({ features: selection }),
+        //   signal: controller.signal,
+        // }).then(body => body.json());
         delete controllers[planID]; // unset controller after finish
@@ -34,0 +36,0 @@ if (res && typeof res.cost === 'number') {

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

@@ -393,6 +393,6 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
 var controllers = {};
-function fetchPlanCost(_a) {
-    var planID = _a.planID, url = _a.url, selection = _a.selection;
+function fetchPlanCost(connection, _a) {
+    var planID = _a.planID, selection = _a.selection;
     return __awaiter(this, void 0, void 0, function () {
-        var controller, res, err_1;
+        var controller, req, res, err_1;
         return __generator(this, function (_b) {
@@ -410,10 +410,12 @@ switch (_b.label) {
                     controllers[planID] = controller;
-                    return [4 /*yield*/, fetch(url + "/id/plan/" + planID + "/cost", {
-                            method: 'POST',
-                            headers: { Connection: 'keep-alive', 'Content-Type': 'application/json' },
-                            body: JSON.stringify({ features: selection }),
-                            signal: controller.signal,
-                        }).then(function (body) { return body.json(); })];
+                    req = { features: selection };
+                    return [4 /*yield*/, connection.gateway.post("/id/plan/" + planID + "/cost", req)];
                 case 2:
                     res = _b.sent();
+                    // const res: { cost: number } = await fetch(`${url}/id/plan/${planID}/cost`, {
+                    //   method: 'POST',
+                    //   headers: { Connection: 'keep-alive', 'Content-Type': 'application/json' },
+                    //   body: JSON.stringify({ features: selection }),
+                    //   signal: controller.signal,
+                    // }).then(body => body.json());
                     delete controllers[planID]; // unset controller after finish
@@ -492,3 +494,3 @@ if (res && typeof res.cost === 'number') {
     var _a = options || {}, element = _a.element, _b = _a.env, env = _b === void 0 ? 'prod' : _b;
-    var extendedDetail = Object.assign(Object.assign(Object.assign(Object.assign({}, detail), (element ? { componentName: element.tagName } : {})), (detail.componentName ? { componentName: detail.componentName } : {})), { version: '0.0.13' });
+    var extendedDetail = Object.assign(Object.assign(Object.assign(Object.assign({}, detail), (element ? { componentName: element.tagName } : {})), (detail.componentName ? { componentName: detail.componentName } : {})), { version: '0.0.14' });
     report({
@@ -548,3 +550,3 @@ type: 'error',
                                     componentName: el.tagName,
-                                    version: '0.0.13',
+                                    version: '0.0.14',
                                     duration: firstRenderWithDataMeasure.duration,
@@ -564,3 +566,3 @@ rttGraphql: rttGraphqlMeasure.duration,
                                 componentName: el.tagName,
-                                version: '0.0.13',
+                                version: '0.0.14',
                                 duration: loadMeasure.duration,
@@ -577,3 +579,3 @@ clientId: clientId,
                                 componentName: el.tagName,
-                                version: '0.0.13',
+                                version: '0.0.14',
                                 duration: firstRenderMeasure.duration,
@@ -669,4 +671,2 @@ clientId: clientId,
 };
-// settings
-var GATEWAY_ENDPOINT = 'https://api.manifold.co/v1';
 var ManifoldPricing = /** @class */ (function () {
@@ -699,12 +699,11 @@ function class_1(hostRef) {
                 switch (_b.label) {
-                    case 0: return [4 /*yield*/, customElements.whenDefined('mui-core')];
+                    case 0: return [4 /*yield*/, customElements.whenDefined('manifold-init')];
                     case 1:
                         _b.sent();
-                        core = document.querySelector('mui-core');
+                        core = document.querySelector('manifold-init');
                         _a = this;
                         return [4 /*yield*/, core.initialize({
                                 element: this.el,
-                                componentVersion: '0.0.13',
+                                componentVersion: '0.0.14',
                                 version: 0,
-                                clientId: this.clientId,
                             })];
@@ -809,3 +808,6 @@ case 2:
             // fetch plan cost for this configurable plan
-            fetchPlanCost({ planID: planID, selection: selection, url: _this.gatewayUrl || GATEWAY_ENDPOINT }).then(function (cost) {
+            fetchPlanCost(_this.connection, {
+                planID: planID,
+                selection: selection,
+            }).then(function (cost) {
                 var _a, _b;
@@ -832,3 +834,3 @@ if (typeof cost === 'number') {
             properties: {
-                version: '0.0.13',
+                version: '0.0.14',
                 componentName: this.el.tagName,
@@ -835,0 +837,0 @@ planId: planId,

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

@@ -374,3 +374,3 @@ import { h, r as registerInstance, g as getElement } from './core-514db491.js';
 const controllers = {};
-async function fetchPlanCost({ planID, url, selection, }) {
+async function fetchPlanCost(connection, { planID, selection, }) {
     // request in-flight? cancel it
@@ -384,8 +384,10 @@ let controller = controllers[planID];
         controllers[planID] = controller;
-        const res = await fetch(`${url}/id/plan/${planID}/cost`, {
-            method: 'POST',
-            headers: { Connection: 'keep-alive', 'Content-Type': 'application/json' },
-            body: JSON.stringify({ features: selection }),
-            signal: controller.signal,
-        }).then(body => body.json());
+        const req = { features: selection };
+        const res = await connection.gateway.post(`/id/plan/${planID}/cost`, req);
+        // const res: { cost: number } = await fetch(`${url}/id/plan/${planID}/cost`, {
+        //   method: 'POST',
+        //   headers: { Connection: 'keep-alive', 'Content-Type': 'application/json' },
+        //   body: JSON.stringify({ features: selection }),
+        //   signal: controller.signal,
+        // }).then(body => body.json());
         delete controllers[planID]; // unset controller after finish
@@ -459,3 +461,3 @@ if (res && typeof res.cost === 'number') {
     const { element, env = 'prod' } = options || {};
-    const extendedDetail = Object.assign(Object.assign(Object.assign(Object.assign({}, detail), (element ? { componentName: element.tagName } : {})), (detail.componentName ? { componentName: detail.componentName } : {})), { version: '0.0.13' });
+    const extendedDetail = Object.assign(Object.assign(Object.assign(Object.assign({}, detail), (element ? { componentName: element.tagName } : {})), (detail.componentName ? { componentName: detail.componentName } : {})), { version: '0.0.14' });
     report({
@@ -516,3 +518,3 @@ type: 'error',
                                     componentName: el.tagName,
-                                    version: '0.0.13',
+                                    version: '0.0.14',
                                     duration: firstRenderWithDataMeasure.duration,
@@ -532,3 +534,3 @@ rttGraphql: rttGraphqlMeasure.duration,
                                 componentName: el.tagName,
-                                version: '0.0.13',
+                                version: '0.0.14',
                                 duration: loadMeasure.duration,
@@ -545,3 +547,3 @@ clientId,
                                 componentName: el.tagName,
-                                version: '0.0.13',
+                                version: '0.0.14',
                                 duration: firstRenderMeasure.duration,
@@ -668,4 +670,2 @@ clientId,
 };
-// settings
-const GATEWAY_ENDPOINT = 'https://api.manifold.co/v1';
 const ManifoldPricing = class {
@@ -694,9 +694,8 @@ constructor(hostRef) {
     async componentWillLoad() {
-        await customElements.whenDefined('mui-core');
-        const core = document.querySelector('mui-core');
+        await customElements.whenDefined('manifold-init');
+        const core = document.querySelector('manifold-init');
         this.connection = await core.initialize({
             element: this.el,
-            componentVersion: '0.0.13',
+            componentVersion: '0.0.14',
             version: 0,
-            clientId: this.clientId,
         });
@@ -767,3 +766,6 @@ if (!this.clientId) {
             // fetch plan cost for this configurable plan
-            fetchPlanCost({ planID, selection, url: this.gatewayUrl || GATEWAY_ENDPOINT }).then(cost => {
+            fetchPlanCost(this.connection, {
+                planID,
+                selection,
+            }).then(cost => {
                 if (typeof cost === 'number') {
@@ -788,3 +790,3 @@ clearTimeout(flickerStopper);
             properties: {
-                version: '0.0.13',
+                version: '0.0.14',
                 componentName: this.el.tagName,
@@ -791,0 +793,0 @@ planId,

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

@@ -1,1 +0,1 @@
-import{p as t,b as a}from"./p-65c8cf34.js";t().then(t=>a([["p-odqz9ejn",[[0,"manifold-plan-matrix",{productId:[1,"product-id"],clientId:[1,"client-id"],baseUrl:[1,"base-url"],gatewayUrl:[1,"gateway-url"],ctaText:[1,"cta-text"],env:[1],product:[32],productFeatures:[32],planCosts:[32],planFeatures:[32],userSelection:[32]}]]]],t));
+import{p as t,b as a}from"./p-65c8cf34.js";t().then(t=>a([["p-zlmahz0i",[[0,"manifold-plan-matrix",{productId:[1,"product-id"],clientId:[1,"client-id"],baseUrl:[1,"base-url"],gatewayUrl:[1,"gateway-url"],ctaText:[1,"cta-text"],env:[1],product:[32],productFeatures:[32],planCosts:[32],planFeatures:[32],userSelection:[32]}]]]],t));

dist/manifold-plan-matrix/p-6ede84c9.system.js

@@ -1,1 +0,1 @@
-System.register(["./p-f6d936b7.system.js"],(function(){"use strict";var t,e;return{setters:[function(r){t=r.p;e=r.b}],execute:function(){t().then((function(t){return e([["p-6uw8wgkg.system",[[0,"manifold-plan-matrix",{productId:[1,"product-id"],clientId:[1,"client-id"],baseUrl:[1,"base-url"],gatewayUrl:[1,"gateway-url"],ctaText:[1,"cta-text"],env:[1],product:[32],productFeatures:[32],planCosts:[32],planFeatures:[32],userSelection:[32]}]]]],t)}))}}}));
+System.register(["./p-f6d936b7.system.js"],(function(){"use strict";var t,e;return{setters:[function(r){t=r.p;e=r.b}],execute:function(){t().then((function(t){return e([["p-q12c7ltc.system",[[0,"manifold-plan-matrix",{productId:[1,"product-id"],clientId:[1,"client-id"],baseUrl:[1,"base-url"],gatewayUrl:[1,"gateway-url"],ctaText:[1,"cta-text"],env:[1],product:[32],productFeatures:[32],planCosts:[32],planFeatures:[32],userSelection:[32]}]]]],t)}))}}}));

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

@@ -1,2 +0,2 @@
-import { Connection } from '@manifoldco/mui-core-types/types/v0';
+import { Connection } from '@manifoldco/manifold-init-types/types/v0';
 import { ProductQuery } from '../../types/graphql';
@@ -3,0 +3,0 @@ declare type ProductFixed = ProductQuery['product']['fixedFeatures']['edges'][0]['node'];

dist/types/types/graphql.d.ts

@@ -1015,8 +1015,2 @@ export declare type Maybe<T> = T;
                 node: ({
-                    __typename?: 'ProductBooleanConfigurableFeature';
-                } & Pick<ProductBooleanConfigurableFeature, 'label' | 'displayName'> & {
-                    featureOptions: Maybe<Array<({
-                        __typename?: 'ProductConfigurableFeatureOption';
-                    } & Pick<ProductConfigurableFeatureOption, 'cost' | 'displayName' | 'value'>)>>;
-                }) | ({
                     __typename?: 'ProductStringConfigurableFeature';
@@ -1041,2 +1035,8 @@ } & Pick<ProductStringConfigurableFeature, 'label' | 'displayName'> & {
                     })>>;
+                }) | ({
+                    __typename?: 'ProductBooleanConfigurableFeature';
+                } & Pick<ProductBooleanConfigurableFeature, 'label' | 'displayName'> & {
+                    featureOptions: Maybe<Array<({
+                        __typename?: 'ProductConfigurableFeatureOption';
+                    } & Pick<ProductConfigurableFeatureOption, 'cost' | 'displayName' | 'value'>)>>;
                 });
@@ -1043,0 +1043,0 @@ })>;

dist/types/utils/feature.d.ts

@@ -0,6 +1,6 @@
+import { Connection } from '@manifoldco/manifold-init-types/types/v0';
 import { ProductQuery } from '../types/graphql';
 export declare function defaultFeatureValue(feature: ProductQuery['product']['plans']['edges'][0]['node']['configurableFeatures']['edges'][0]['node']): string | number | false | undefined;
-export declare function fetchPlanCost({ planID, url, selection, }: {
+export declare function fetchPlanCost(connection: Connection, { planID, selection, }: {
     planID: string;
-    url: string;
     selection: {
@@ -7,0 +7,0 @@ [featureLabel: string]: string | number | boolean | undefined;

package.json

 {
   "name": "@manifoldco/component-plan-matrix",
-  "version": "0.0.13",
+  "version": "0.0.14",
   "private": false,
@@ -22,4 +22,4 @@ "description": "Stencil Component Starter",
     "@manifoldco/icons": "0.0.6",
-    "@manifoldco/mui-core": "^0.1.5",
-    "@manifoldco/mui-core-types": "^0.1.4",
+    "@manifoldco/manifold-init": "^0.3.0",
+    "@manifoldco/manifold-init-types": "^0.3.0",
     "@rollup/plugin-replace": "^2.3.1",
@@ -26,0 +26,0 @@ "@stencil/core": "^1.8.9",

README.md

@@ -14,2 +14,9 @@ # @manifoldco/component-plan-matrix
 
+This component also requires our [manifold-init][manifold-init] component to be present on the page
+with your client ID added.
+
+```html
+<manifold-init client-id="your client ID"></manifold-init>
+```
+
 ### Option 1: Manifold CDN
@@ -21,2 +28,6 @@
 <!-- modern browsers -->
+<script
+  type="module"
+  src="https://js.cdn.manifold.co/@manifoldco/manifold-init/dist/manifold-init/manifold-init.esm.js"
+></script>
 <script type="module">
@@ -30,2 +41,6 @@ import(
   nomodule
+  src="https://js.cdn.manifold.co/@manifoldco/manifold-init/dist/manifold-init/manifold-init.js"
+></script>
+<script
+  nomodule
   src="https://js.cdn.manifold.co/@manifoldco/component-plan-matrix/dist/manifold-plan-matrix.js"
@@ -41,2 +56,3 @@ ></script>
 npm install @manifoldco/component-plan-matrix
+npm install @manifoldco/manifold-init
 ```
@@ -51,2 +67,5 @@
 );
+import('@manifoldco/manifold-init/loader').then(({ defineCustomElements }) =>
+  defineCustomElements(window)
+);
 ```
@@ -90,1 +109,2 @@
 [tsconfig-includes]: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html#examples
+[manifold-init]: https://github.com/manifoldco/manifold-init

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

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

1043682

increased by0.07%

Lines of code

16384

increased by0.05%

Number of lines in readme file

105

increased by23.53%

Number of medium supply chain risk alerts

16

decreased by-27.27%

No dependency changes