Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@manifoldco/component-plan-matrix
Advanced tools
@manifoldco/component-plan-matrix - npm Package Compare versions
Comparing version 0.0.12 to 0.0.13
@@ -9,3 +9,3 @@ 'use strict'; | ||
| return core.patchEsm().then(() => { | ||
| core.bootstrapLazy([["manifold-plan-matrix.cjs",[[0,"manifold-plan-matrix",{"gatewayUrl":[1,"gateway-url"],"graphqlUrl":[1,"graphql-url"],"productId":[1,"product-id"],"clientId":[1,"client-id"],"baseUrl":[1,"base-url"],"ctaText":[1,"cta-text"],"product":[32],"productFeatures":[32],"planCosts":[32],"planFeatures":[32],"userSelection":[32]}]]]], options); | ||
| core.bootstrapLazy([["manifold-plan-matrix.cjs",[[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]}]]]], options); | ||
| }); | ||
@@ -12,0 +12,0 @@ }; |
@@ -321,5 +321,2 @@ 'use strict'; | ||
| } | ||
| function microCostToDollars(microCost) { | ||
| return microCost / ONE_BILLION; | ||
| } | ||
| function microCostToCents(microCost) { | ||
@@ -465,3 +462,3 @@ return microCost / TEN_MILLION; | ||
| 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.12' }); | ||
| const extendedDetail = Object.assign(Object.assign(Object.assign(Object.assign({}, detail), (element ? { componentName: element.tagName } : {})), (detail.componentName ? { componentName: detail.componentName } : {})), { version: '0.0.13' }); | ||
| report({ | ||
@@ -483,12 +480,2 @@ type: 'error', | ||
| function environment (graphqlUrl) { | ||
| if (!graphqlUrl || graphqlUrl.includes('stage')) { | ||
| return 'stage'; | ||
| } | ||
| if (graphqlUrl.includes('arigato')) { | ||
| return 'local'; | ||
| } | ||
| return 'prod'; | ||
| } | ||
| function loadMark() { | ||
@@ -516,3 +503,2 @@ return function loadMarkDecorator(_target, _propertyKey, descriptor) { | ||
| if (this.el && this.el.tagName.startsWith('MANIFOLD-')) { | ||
| const env = environment(this.graphql); | ||
| const clientId = this.clientId || ''; | ||
@@ -535,3 +521,3 @@ const el = this.el; | ||
| componentName: el.tagName, | ||
| version: '0.0.12', | ||
| version: '0.0.13', | ||
| duration: firstRenderWithDataMeasure.duration, | ||
@@ -542,3 +528,3 @@ rttGraphql: rttGraphqlMeasure.duration, | ||
| }, | ||
| }, { env }); | ||
| }, { env: this.env }); | ||
| } | ||
@@ -552,7 +538,7 @@ } | ||
| componentName: el.tagName, | ||
| version: '0.0.12', | ||
| version: '0.0.13', | ||
| duration: loadMeasure.duration, | ||
| clientId, | ||
| }, | ||
| }, { env }); | ||
| }, { env: this.env }); | ||
| } | ||
@@ -565,7 +551,7 @@ if (firstRenderMeasure && firstRenderMeasure.firstReport) { | ||
| componentName: el.tagName, | ||
| version: '0.0.12', | ||
| version: '0.0.13', | ||
| duration: firstRenderMeasure.duration, | ||
| clientId, | ||
| }, | ||
| }, { env }); | ||
| }, { env: this.env }); | ||
| } | ||
@@ -576,3 +562,2 @@ } | ||
| catch (e) { | ||
| const env = environment(this.graphql); | ||
| const clientId = this.clientId || ''; | ||
@@ -584,3 +569,3 @@ report$1({ | ||
| clientId, | ||
| }, { env }); | ||
| }, { env: this.env }); | ||
| return (core.h("div", null, | ||
@@ -692,12 +677,6 @@ core.h("p", null, "Hmm something went wrong."), | ||
| // settings | ||
| const GRAPHQL_ENDPOINT = 'https://api.manifold.co/graphql'; | ||
| const GATEWAY_ENDPOINT = 'https://api.manifold.co/v1'; | ||
| const MANIFOLD_CLIENT_ID = 'Manifold-Client-ID'; | ||
| const ManifoldPricing = class { | ||
| constructor(hostRef) { | ||
| core.registerInstance(this, hostRef); | ||
| // Gateway endpoint (TEMP) | ||
| this.gatewayUrl = GATEWAY_ENDPOINT; | ||
| // GraphQL endpoint (TEMP) | ||
| this.graphqlUrl = GRAPHQL_ENDPOINT; | ||
| // Passed client ID header to the graphql calls | ||
@@ -709,2 +688,3 @@ this.clientId = ''; | ||
| this.ctaText = 'Get Started'; | ||
| this.env = 'stage'; | ||
| // Product features | ||
@@ -722,3 +702,11 @@ this.productFeatures = { fixed: {}, metered: {}, configurable: {} }; | ||
| } | ||
| componentWillLoad() { | ||
| async componentWillLoad() { | ||
| await customElements.whenDefined('mui-core'); | ||
| const core = document.querySelector('mui-core'); | ||
| this.connection = await core.initialize({ | ||
| element: this.el, | ||
| componentVersion: '0.0.13', | ||
| version: 0, | ||
| clientId: this.clientId, | ||
| }); | ||
| if (!this.clientId) { | ||
@@ -733,13 +721,6 @@ console.warn(CLIENT_ID_WARNING); | ||
| // trying to move fetch out for testing. | ||
| async fetchGraphQl(productID) { | ||
| async setupProduct(productID) { | ||
| const variables = { id: productID }; | ||
| return fetch(`${this.graphqlUrl}`, { | ||
| method: 'POST', | ||
| headers: Object.assign({ 'Content-Type': 'application/json', Connection: 'keep-alive' }, (this.clientId ? { [MANIFOLD_CLIENT_ID]: this.clientId } : {})), | ||
| body: JSON.stringify({ query, variables }), | ||
| }); | ||
| } | ||
| async setupProduct(productID) { | ||
| const res = await this.fetchGraphQl(productID).then(body => body.json()); | ||
| const data = res.data; | ||
| const res = await this.connection.graphqlFetch({ query, variables }); | ||
| const { data } = res; | ||
| if (!data || !data.product) { | ||
@@ -810,3 +791,2 @@ return; | ||
| e.preventDefault(); | ||
| const env = environment(this === null || this === void 0 ? void 0 : this.graphqlUrl); | ||
| report({ | ||
@@ -818,3 +798,3 @@ description: 'Track pricing matrix cta clicks', | ||
| properties: { | ||
| version: '0.0.12', | ||
| version: '0.0.13', | ||
| componentName: this.el.tagName, | ||
@@ -824,3 +804,3 @@ planId, | ||
| }, | ||
| }, { env }).then(() => { | ||
| }, { env: this.env || 'prod' }).then(() => { | ||
| window.location.href = destination; | ||
@@ -840,3 +820,3 @@ }); | ||
| featureValue: e.target.value, | ||
| }) }, (feature.featureOptions || []).map(option => (core.h("option", { value: option.value }, core.h("span", null, option.displayName), core.h("span", null, " (", microCostToDollars(option.cost), ")"))))), core.h("svg", { class: "mp--select__chevron", viewBox: "0 0 1024 1024", xmlns: "http://www.w3.org/2000/svg", "xmlns-x": "http://www.w3.org/1999/xlink" }, core.h("path", { d: chevron_up_down })), core.h("div", { class: "mp--select__border" })))); | ||
| }) }, (feature.featureOptions || []).map(option => (core.h("option", { value: option.value }, core.h("span", null, option.displayName), core.h("span", null, " (", toUSD(option.cost), ")"))))), core.h("svg", { class: "mp--select__chevron", viewBox: "0 0 1024 1024", xmlns: "http://www.w3.org/2000/svg", "xmlns-x": "http://www.w3.org/1999/xlink" }, core.h("path", { d: chevron_up_down })), core.h("div", { class: "mp--select__border" })))); | ||
| } | ||
@@ -843,0 +823,0 @@ case PlanFeatureType.Number: { |
@@ -6,3 +6,3 @@ 'use strict'; | ||
| core.patchBrowser().then(options => { | ||
| return core.bootstrapLazy([["manifold-plan-matrix.cjs",[[0,"manifold-plan-matrix",{"gatewayUrl":[1,"gateway-url"],"graphqlUrl":[1,"graphql-url"],"productId":[1,"product-id"],"clientId":[1,"client-id"],"baseUrl":[1,"base-url"],"ctaText":[1,"cta-text"],"product":[32],"productFeatures":[32],"planCosts":[32],"planFeatures":[32],"userSelection":[32]}]]]], options); | ||
| return core.bootstrapLazy([["manifold-plan-matrix.cjs",[[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]}]]]], options); | ||
| }); |
@@ -11,7 +11,6 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { | ||
| import { PlanFeatureType } from '../../types/graphql'; | ||
| import { microCostToDollars } from '../../utils/cost'; | ||
| import { toUSD } from '../../utils/cost'; | ||
| import { defaultFeatureValue, fetchPlanCost } from '../../utils/feature'; | ||
| import logger, { loadMark } from '../../utils/logger'; | ||
| import analytics from '../../packages/analytics'; | ||
| import environment from '../../utils/env'; | ||
| import { CLIENT_ID_WARNING } from './warning'; | ||
@@ -24,11 +23,5 @@ import FixedFeature from './fixed-feature'; | ||
| // settings | ||
| const GRAPHQL_ENDPOINT = 'https://api.manifold.co/graphql'; | ||
| const GATEWAY_ENDPOINT = 'https://api.manifold.co/v1'; | ||
| const MANIFOLD_CLIENT_ID = 'Manifold-Client-ID'; | ||
| export class ManifoldPricing { | ||
| constructor() { | ||
| // Gateway endpoint (TEMP) | ||
| this.gatewayUrl = GATEWAY_ENDPOINT; | ||
| // GraphQL endpoint (TEMP) | ||
| this.graphqlUrl = GRAPHQL_ENDPOINT; | ||
| // Passed client ID header to the graphql calls | ||
@@ -40,2 +33,3 @@ this.clientId = ''; | ||
| this.ctaText = 'Get Started'; | ||
| this.env = 'stage'; | ||
| // Product features | ||
@@ -53,3 +47,11 @@ this.productFeatures = { fixed: {}, metered: {}, configurable: {} }; | ||
| } | ||
| componentWillLoad() { | ||
| async componentWillLoad() { | ||
| await customElements.whenDefined('mui-core'); | ||
| const core = document.querySelector('mui-core'); | ||
| this.connection = await core.initialize({ | ||
| element: this.el, | ||
| componentVersion: '<@NPM_PACKAGE_VERSION@>', | ||
| version: 0, | ||
| clientId: this.clientId, | ||
| }); | ||
| if (!this.clientId) { | ||
@@ -64,13 +66,6 @@ console.warn(CLIENT_ID_WARNING); | ||
| // trying to move fetch out for testing. | ||
| async fetchGraphQl(productID) { | ||
| async setupProduct(productID) { | ||
| const variables = { id: productID }; | ||
| return fetch(`${this.graphqlUrl}`, { | ||
| method: 'POST', | ||
| headers: Object.assign({ 'Content-Type': 'application/json', Connection: 'keep-alive' }, (this.clientId ? { [MANIFOLD_CLIENT_ID]: this.clientId } : {})), | ||
| body: JSON.stringify({ query, variables }), | ||
| }); | ||
| } | ||
| async setupProduct(productID) { | ||
| const res = await this.fetchGraphQl(productID).then(body => body.json()); | ||
| const data = res.data; | ||
| const res = await this.connection.graphqlFetch({ query, variables }); | ||
| const { data } = res; | ||
| if (!data || !data.product) { | ||
@@ -141,3 +136,2 @@ return; | ||
| e.preventDefault(); | ||
| const env = environment(this === null || this === void 0 ? void 0 : this.graphqlUrl); | ||
| analytics({ | ||
@@ -154,3 +148,3 @@ description: 'Track pricing matrix cta clicks', | ||
| }, | ||
| }, { env }).then(() => { | ||
| }, { env: this.env || 'prod' }).then(() => { | ||
| window.location.href = destination; | ||
@@ -176,3 +170,3 @@ }); | ||
| " (", | ||
| microCostToDollars(option.cost), | ||
| toUSD(option.cost), | ||
| ")"))))), | ||
@@ -267,3 +261,3 @@ h("svg", { class: "mp--select__chevron", viewBox: "0 0 1024 1024", xmlns: "http://www.w3.org/2000/svg", "xmlns-x": "http://www.w3.org/1999/xlink" }, | ||
| static get properties() { return { | ||
| "gatewayUrl": { | ||
| "productId": { | ||
| "type": "string", | ||
@@ -282,7 +276,6 @@ "mutable": false, | ||
| }, | ||
| "attribute": "gateway-url", | ||
| "reflect": false, | ||
| "defaultValue": "GATEWAY_ENDPOINT" | ||
| "attribute": "product-id", | ||
| "reflect": false | ||
| }, | ||
| "graphqlUrl": { | ||
| "clientId": { | ||
| "type": "string", | ||
@@ -301,7 +294,7 @@ "mutable": false, | ||
| }, | ||
| "attribute": "graphql-url", | ||
| "attribute": "client-id", | ||
| "reflect": false, | ||
| "defaultValue": "GRAPHQL_ENDPOINT" | ||
| "defaultValue": "''" | ||
| }, | ||
| "productId": { | ||
| "baseUrl": { | ||
| "type": "string", | ||
@@ -320,6 +313,7 @@ "mutable": false, | ||
| }, | ||
| "attribute": "product-id", | ||
| "reflect": false | ||
| "attribute": "base-url", | ||
| "reflect": false, | ||
| "defaultValue": "'/signup'" | ||
| }, | ||
| "clientId": { | ||
| "gatewayUrl": { | ||
| "type": "string", | ||
@@ -338,7 +332,6 @@ "mutable": false, | ||
| }, | ||
| "attribute": "client-id", | ||
| "reflect": false, | ||
| "defaultValue": "''" | ||
| "attribute": "gateway-url", | ||
| "reflect": false | ||
| }, | ||
| "baseUrl": { | ||
| "ctaText": { | ||
| "type": "string", | ||
@@ -357,12 +350,12 @@ "mutable": false, | ||
| }, | ||
| "attribute": "base-url", | ||
| "attribute": "cta-text", | ||
| "reflect": false, | ||
| "defaultValue": "'/signup'" | ||
| "defaultValue": "'Get Started'" | ||
| }, | ||
| "ctaText": { | ||
| "env": { | ||
| "type": "string", | ||
| "mutable": false, | ||
| "complexType": { | ||
| "original": "string", | ||
| "resolved": "string | undefined", | ||
| "original": "'stage' | 'local' | 'prod'", | ||
| "resolved": "\"local\" | \"prod\" | \"stage\" | undefined", | ||
| "references": {} | ||
@@ -376,5 +369,5 @@ }, | ||
| }, | ||
| "attribute": "cta-text", | ||
| "attribute": "env", | ||
| "reflect": false, | ||
| "defaultValue": "'Get Started'" | ||
| "defaultValue": "'stage'" | ||
| } | ||
@@ -381,0 +374,0 @@ }; } |
| import { h } from "@stencil/core"; | ||
| import { report } from './errorReport'; | ||
| import analytics, { mark, measure } from '../packages/analytics'; | ||
| import environment from './env'; | ||
| export function loadMark() { | ||
@@ -27,3 +26,2 @@ return function loadMarkDecorator(_target, _propertyKey, descriptor) { | ||
| if (this.el && this.el.tagName.startsWith('MANIFOLD-')) { | ||
| const env = environment(this.graphql); | ||
| const clientId = this.clientId || ''; | ||
@@ -52,3 +50,3 @@ const el = this.el; | ||
| }, | ||
| }, { env }); | ||
| }, { env: this.env }); | ||
| } | ||
@@ -66,3 +64,3 @@ } | ||
| }, | ||
| }, { env }); | ||
| }, { env: this.env }); | ||
| } | ||
@@ -79,3 +77,3 @@ if (firstRenderMeasure && firstRenderMeasure.firstReport) { | ||
| }, | ||
| }, { env }); | ||
| }, { env: this.env }); | ||
| } | ||
@@ -86,3 +84,2 @@ } | ||
| catch (e) { | ||
| const env = environment(this.graphql); | ||
| const clientId = this.clientId || ''; | ||
@@ -94,3 +91,3 @@ report({ | ||
| clientId, | ||
| }, { env }); | ||
| }, { env: this.env }); | ||
| return (h("div", null, | ||
@@ -97,0 +94,0 @@ h("p", null, "Hmm something went wrong."), |
@@ -337,5 +337,2 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) { | ||
| } | ||
| function microCostToDollars(microCost) { | ||
| return microCost / ONE_BILLION; | ||
| } | ||
| function microCostToCents(microCost) { | ||
@@ -494,3 +491,3 @@ return microCost / TEN_MILLION; | ||
| 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.12' }); | ||
| var extendedDetail = Object.assign(Object.assign(Object.assign(Object.assign({}, detail), (element ? { componentName: element.tagName } : {})), (detail.componentName ? { componentName: detail.componentName } : {})), { version: '0.0.13' }); | ||
| report({ | ||
@@ -511,11 +508,2 @@ type: 'error', | ||
| } | ||
| function environment(graphqlUrl) { | ||
| if (!graphqlUrl || graphqlUrl.includes('stage')) { | ||
| return 'stage'; | ||
| } | ||
| if (graphqlUrl.includes('arigato')) { | ||
| return 'local'; | ||
| } | ||
| return 'prod'; | ||
| } | ||
| function loadMark() { | ||
@@ -543,3 +531,2 @@ return function loadMarkDecorator(_target, _propertyKey, descriptor) { | ||
| if (this.el && this.el.tagName.startsWith('MANIFOLD-')) { | ||
| var env = environment(this.graphql); | ||
| var clientId = this.clientId || ''; | ||
@@ -562,3 +549,3 @@ var el = this.el; | ||
| componentName: el.tagName, | ||
| version: '0.0.12', | ||
| version: '0.0.13', | ||
| duration: firstRenderWithDataMeasure.duration, | ||
@@ -569,3 +556,3 @@ rttGraphql: rttGraphqlMeasure.duration, | ||
| }, | ||
| }, { env: env }); | ||
| }, { env: this.env }); | ||
| } | ||
@@ -579,7 +566,7 @@ } | ||
| componentName: el.tagName, | ||
| version: '0.0.12', | ||
| version: '0.0.13', | ||
| duration: loadMeasure.duration, | ||
| clientId: clientId, | ||
| }, | ||
| }, { env: env }); | ||
| }, { env: this.env }); | ||
| } | ||
@@ -592,7 +579,7 @@ if (firstRenderMeasure && firstRenderMeasure.firstReport) { | ||
| componentName: el.tagName, | ||
| version: '0.0.12', | ||
| version: '0.0.13', | ||
| duration: firstRenderMeasure.duration, | ||
| clientId: clientId, | ||
| }, | ||
| }, { env: env }); | ||
| }, { env: this.env }); | ||
| } | ||
@@ -603,3 +590,2 @@ } | ||
| catch (e) { | ||
| var env = environment(this.graphql); | ||
| var clientId = this.clientId || ''; | ||
@@ -611,3 +597,3 @@ report$1({ | ||
| clientId: clientId, | ||
| }, { env: env }); | ||
| }, { env: this.env }); | ||
| return (h("div", null, h("p", null, "Hmm something went wrong."), h("p", null, e.message))); // show error to user | ||
@@ -688,12 +674,6 @@ } | ||
| // settings | ||
| var GRAPHQL_ENDPOINT = 'https://api.manifold.co/graphql'; | ||
| var GATEWAY_ENDPOINT = 'https://api.manifold.co/v1'; | ||
| var MANIFOLD_CLIENT_ID = 'Manifold-Client-ID'; | ||
| var ManifoldPricing = /** @class */ (function () { | ||
| function class_1(hostRef) { | ||
| registerInstance(this, hostRef); | ||
| // Gateway endpoint (TEMP) | ||
| this.gatewayUrl = GATEWAY_ENDPOINT; | ||
| // GraphQL endpoint (TEMP) | ||
| this.graphqlUrl = GRAPHQL_ENDPOINT; | ||
| // Passed client ID header to the graphql calls | ||
@@ -705,2 +685,3 @@ this.clientId = ''; | ||
| this.ctaText = 'Get Started'; | ||
| this.env = 'stage'; | ||
| // Product features | ||
@@ -719,31 +700,40 @@ this.productFeatures = { fixed: {}, metered: {}, configurable: {} }; | ||
| class_1.prototype.componentWillLoad = function () { | ||
| if (!this.clientId) { | ||
| console.warn(CLIENT_ID_WARNING); | ||
| } | ||
| if (this.productId) { | ||
| // Note: we could warn here if product-id is missing, but let’s not. In some front-end frameworks it may be set a half-second after it loads | ||
| this.setupProduct(this.productId); | ||
| } | ||
| }; | ||
| // trying to move fetch out for testing. | ||
| class_1.prototype.fetchGraphQl = function (productID) { | ||
| return __awaiter(this, void 0, void 0, function () { | ||
| var variables; | ||
| var _a; | ||
| var core, _a; | ||
| return __generator(this, function (_b) { | ||
| variables = { id: productID }; | ||
| return [2 /*return*/, fetch("" + this.graphqlUrl, { | ||
| method: 'POST', | ||
| headers: Object.assign({ 'Content-Type': 'application/json', Connection: 'keep-alive' }, (this.clientId ? (_a = {}, _a[MANIFOLD_CLIENT_ID] = this.clientId, _a) : {})), | ||
| body: JSON.stringify({ query: query, variables: variables }), | ||
| })]; | ||
| switch (_b.label) { | ||
| case 0: return [4 /*yield*/, customElements.whenDefined('mui-core')]; | ||
| case 1: | ||
| _b.sent(); | ||
| core = document.querySelector('mui-core'); | ||
| _a = this; | ||
| return [4 /*yield*/, core.initialize({ | ||
| element: this.el, | ||
| componentVersion: '0.0.13', | ||
| version: 0, | ||
| clientId: this.clientId, | ||
| })]; | ||
| case 2: | ||
| _a.connection = _b.sent(); | ||
| if (!this.clientId) { | ||
| console.warn(CLIENT_ID_WARNING); | ||
| } | ||
| if (this.productId) { | ||
| // Note: we could warn here if product-id is missing, but let’s not. In some front-end frameworks it may be set a half-second after it loads | ||
| this.setupProduct(this.productId); | ||
| } | ||
| return [2 /*return*/]; | ||
| } | ||
| }); | ||
| }); | ||
| }; | ||
| // trying to move fetch out for testing. | ||
| class_1.prototype.setupProduct = function (productID) { | ||
| return __awaiter(this, void 0, void 0, function () { | ||
| var res, data, fixed, metered, configurable, featureLabels, planCosts, planFeatures, userSelection; | ||
| var variables, res, data, fixed, metered, configurable, featureLabels, planCosts, planFeatures, userSelection; | ||
| return __generator(this, function (_a) { | ||
| switch (_a.label) { | ||
| case 0: return [4 /*yield*/, this.fetchGraphQl(productID).then(function (body) { return body.json(); })]; | ||
| case 0: | ||
| variables = { id: productID }; | ||
| return [4 /*yield*/, this.connection.graphqlFetch({ query: query, variables: variables })]; | ||
| case 1: | ||
@@ -840,3 +830,2 @@ res = _a.sent(); | ||
| e.preventDefault(); | ||
| var env = environment(this === null || this === void 0 ? void 0 : this.graphqlUrl); | ||
| report({ | ||
@@ -848,3 +837,3 @@ description: 'Track pricing matrix cta clicks', | ||
| properties: { | ||
| version: '0.0.12', | ||
| version: '0.0.13', | ||
| componentName: this.el.tagName, | ||
@@ -854,3 +843,3 @@ planId: planId, | ||
| }, | ||
| }, { env: env }).then(function () { | ||
| }, { env: this.env || 'prod' }).then(function () { | ||
| window.location.href = destination; | ||
@@ -874,3 +863,3 @@ }); | ||
| featureValue: e.target.value, | ||
| }); } }, (feature.featureOptions || []).map(function (option) { return (h("option", { value: option.value }, h("span", null, option.displayName), h("span", null, " (", microCostToDollars(option.cost), ")"))); })), h("svg", { class: "mp--select__chevron", viewBox: "0 0 1024 1024", xmlns: "http://www.w3.org/2000/svg", "xmlns-x": "http://www.w3.org/1999/xlink" }, h("path", { d: chevron_up_down })), h("div", { class: "mp--select__border" })))); | ||
| }); } }, (feature.featureOptions || []).map(function (option) { return (h("option", { value: option.value }, h("span", null, option.displayName), h("span", null, " (", toUSD(option.cost), ")"))); })), h("svg", { class: "mp--select__chevron", viewBox: "0 0 1024 1024", xmlns: "http://www.w3.org/2000/svg", "xmlns-x": "http://www.w3.org/1999/xlink" }, h("path", { d: chevron_up_down })), h("div", { class: "mp--select__border" })))); | ||
| } | ||
@@ -877,0 +866,0 @@ case PlanFeatureType.Number: { |
@@ -317,5 +317,2 @@ import { h, r as registerInstance, g as getElement } from './core-514db491.js'; | ||
| } | ||
| function microCostToDollars(microCost) { | ||
| return microCost / ONE_BILLION; | ||
| } | ||
| function microCostToCents(microCost) { | ||
@@ -461,3 +458,3 @@ return microCost / TEN_MILLION; | ||
| 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.12' }); | ||
| const extendedDetail = Object.assign(Object.assign(Object.assign(Object.assign({}, detail), (element ? { componentName: element.tagName } : {})), (detail.componentName ? { componentName: detail.componentName } : {})), { version: '0.0.13' }); | ||
| report({ | ||
@@ -479,12 +476,2 @@ type: 'error', | ||
| function environment (graphqlUrl) { | ||
| if (!graphqlUrl || graphqlUrl.includes('stage')) { | ||
| return 'stage'; | ||
| } | ||
| if (graphqlUrl.includes('arigato')) { | ||
| return 'local'; | ||
| } | ||
| return 'prod'; | ||
| } | ||
| function loadMark() { | ||
@@ -512,3 +499,2 @@ return function loadMarkDecorator(_target, _propertyKey, descriptor) { | ||
| if (this.el && this.el.tagName.startsWith('MANIFOLD-')) { | ||
| const env = environment(this.graphql); | ||
| const clientId = this.clientId || ''; | ||
@@ -531,3 +517,3 @@ const el = this.el; | ||
| componentName: el.tagName, | ||
| version: '0.0.12', | ||
| version: '0.0.13', | ||
| duration: firstRenderWithDataMeasure.duration, | ||
@@ -538,3 +524,3 @@ rttGraphql: rttGraphqlMeasure.duration, | ||
| }, | ||
| }, { env }); | ||
| }, { env: this.env }); | ||
| } | ||
@@ -548,7 +534,7 @@ } | ||
| componentName: el.tagName, | ||
| version: '0.0.12', | ||
| version: '0.0.13', | ||
| duration: loadMeasure.duration, | ||
| clientId, | ||
| }, | ||
| }, { env }); | ||
| }, { env: this.env }); | ||
| } | ||
@@ -561,7 +547,7 @@ if (firstRenderMeasure && firstRenderMeasure.firstReport) { | ||
| componentName: el.tagName, | ||
| version: '0.0.12', | ||
| version: '0.0.13', | ||
| duration: firstRenderMeasure.duration, | ||
| clientId, | ||
| }, | ||
| }, { env }); | ||
| }, { env: this.env }); | ||
| } | ||
@@ -572,3 +558,2 @@ } | ||
| catch (e) { | ||
| const env = environment(this.graphql); | ||
| const clientId = this.clientId || ''; | ||
@@ -580,3 +565,3 @@ report$1({ | ||
| clientId, | ||
| }, { env }); | ||
| }, { env: this.env }); | ||
| return (h("div", null, | ||
@@ -688,12 +673,6 @@ h("p", null, "Hmm something went wrong."), | ||
| // settings | ||
| const GRAPHQL_ENDPOINT = 'https://api.manifold.co/graphql'; | ||
| const GATEWAY_ENDPOINT = 'https://api.manifold.co/v1'; | ||
| const MANIFOLD_CLIENT_ID = 'Manifold-Client-ID'; | ||
| const ManifoldPricing = class { | ||
| constructor(hostRef) { | ||
| registerInstance(this, hostRef); | ||
| // Gateway endpoint (TEMP) | ||
| this.gatewayUrl = GATEWAY_ENDPOINT; | ||
| // GraphQL endpoint (TEMP) | ||
| this.graphqlUrl = GRAPHQL_ENDPOINT; | ||
| // Passed client ID header to the graphql calls | ||
@@ -705,2 +684,3 @@ this.clientId = ''; | ||
| this.ctaText = 'Get Started'; | ||
| this.env = 'stage'; | ||
| // Product features | ||
@@ -718,3 +698,11 @@ this.productFeatures = { fixed: {}, metered: {}, configurable: {} }; | ||
| } | ||
| componentWillLoad() { | ||
| async componentWillLoad() { | ||
| await customElements.whenDefined('mui-core'); | ||
| const core = document.querySelector('mui-core'); | ||
| this.connection = await core.initialize({ | ||
| element: this.el, | ||
| componentVersion: '0.0.13', | ||
| version: 0, | ||
| clientId: this.clientId, | ||
| }); | ||
| if (!this.clientId) { | ||
@@ -729,13 +717,6 @@ console.warn(CLIENT_ID_WARNING); | ||
| // trying to move fetch out for testing. | ||
| async fetchGraphQl(productID) { | ||
| async setupProduct(productID) { | ||
| const variables = { id: productID }; | ||
| return fetch(`${this.graphqlUrl}`, { | ||
| method: 'POST', | ||
| headers: Object.assign({ 'Content-Type': 'application/json', Connection: 'keep-alive' }, (this.clientId ? { [MANIFOLD_CLIENT_ID]: this.clientId } : {})), | ||
| body: JSON.stringify({ query, variables }), | ||
| }); | ||
| } | ||
| async setupProduct(productID) { | ||
| const res = await this.fetchGraphQl(productID).then(body => body.json()); | ||
| const data = res.data; | ||
| const res = await this.connection.graphqlFetch({ query, variables }); | ||
| const { data } = res; | ||
| if (!data || !data.product) { | ||
@@ -806,3 +787,2 @@ return; | ||
| e.preventDefault(); | ||
| const env = environment(this === null || this === void 0 ? void 0 : this.graphqlUrl); | ||
| report({ | ||
@@ -814,3 +794,3 @@ description: 'Track pricing matrix cta clicks', | ||
| properties: { | ||
| version: '0.0.12', | ||
| version: '0.0.13', | ||
| componentName: this.el.tagName, | ||
@@ -820,3 +800,3 @@ planId, | ||
| }, | ||
| }, { env }).then(() => { | ||
| }, { env: this.env || 'prod' }).then(() => { | ||
| window.location.href = destination; | ||
@@ -836,3 +816,3 @@ }); | ||
| featureValue: e.target.value, | ||
| }) }, (feature.featureOptions || []).map(option => (h("option", { value: option.value }, h("span", null, option.displayName), h("span", null, " (", microCostToDollars(option.cost), ")"))))), h("svg", { class: "mp--select__chevron", viewBox: "0 0 1024 1024", xmlns: "http://www.w3.org/2000/svg", "xmlns-x": "http://www.w3.org/1999/xlink" }, h("path", { d: chevron_up_down })), h("div", { class: "mp--select__border" })))); | ||
| }) }, (feature.featureOptions || []).map(option => (h("option", { value: option.value }, h("span", null, option.displayName), h("span", null, " (", toUSD(option.cost), ")"))))), h("svg", { class: "mp--select__chevron", viewBox: "0 0 1024 1024", xmlns: "http://www.w3.org/2000/svg", "xmlns-x": "http://www.w3.org/1999/xlink" }, h("path", { d: chevron_up_down })), h("div", { class: "mp--select__border" })))); | ||
| } | ||
@@ -839,0 +819,0 @@ case PlanFeatureType.Number: { |
@@ -1,1 +0,1 @@ | ||
| import{p as a,b as t}from"./p-65c8cf34.js";a().then(a=>t([["p-xynuaeox",[[0,"manifold-plan-matrix",{gatewayUrl:[1,"gateway-url"],graphqlUrl:[1,"graphql-url"],productId:[1,"product-id"],clientId:[1,"client-id"],baseUrl:[1,"base-url"],ctaText:[1,"cta-text"],product:[32],productFeatures:[32],planCosts:[32],planFeatures:[32],userSelection:[32]}]]]],a)); | ||
| 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)); |
@@ -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-guxyau2f.system",[[0,"manifold-plan-matrix",{gatewayUrl:[1,"gateway-url"],graphqlUrl:[1,"graphql-url"],productId:[1,"product-id"],clientId:[1,"client-id"],baseUrl:[1,"base-url"],ctaText:[1,"cta-text"],product:[32],productFeatures:[32],planCosts:[32],planFeatures:[32],userSelection:[32]}]]]],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-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)}))}}})); |
@@ -17,4 +17,4 @@ /* eslint-disable */ | ||
| 'ctaText'?: string; | ||
| 'env'?: 'stage' | 'local' | 'prod'; | ||
| 'gatewayUrl'?: string; | ||
| 'graphqlUrl'?: string; | ||
| 'productId'?: string; | ||
@@ -42,4 +42,4 @@ } | ||
| 'ctaText'?: string; | ||
| 'env'?: 'stage' | 'local' | 'prod'; | ||
| 'gatewayUrl'?: string; | ||
| 'graphqlUrl'?: string; | ||
| 'productId'?: string; | ||
@@ -46,0 +46,0 @@ } |
@@ -0,1 +1,2 @@ | ||
| import { Connection } from '@manifoldco/mui-core-types/types/v0'; | ||
| import { ProductQuery } from '../../types/graphql'; | ||
@@ -33,8 +34,8 @@ declare type ProductFixed = ProductQuery['product']['fixedFeatures']['edges'][0]['node']; | ||
| el: HTMLElement; | ||
| gatewayUrl?: string; | ||
| graphqlUrl?: string; | ||
| productId?: string; | ||
| clientId?: string; | ||
| baseUrl?: string; | ||
| gatewayUrl?: string; | ||
| ctaText?: string; | ||
| env?: 'stage' | 'local' | 'prod'; | ||
| product?: ProductQuery['product']; | ||
@@ -48,4 +49,4 @@ productFeatures: ProductFeatures; | ||
| refetchProduct(newVal?: string): void; | ||
| componentWillLoad(): void; | ||
| fetchGraphQl(productID: string): Promise<Response>; | ||
| connection: Connection; | ||
| componentWillLoad(): Promise<void>; | ||
| setupProduct(productID: string): Promise<void>; | ||
@@ -52,0 +53,0 @@ fetchCosts(): void; |
@@ -1015,2 +1015,14 @@ 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'; | ||
| } & Pick<ProductStringConfigurableFeature, 'label' | 'displayName'> & { | ||
| featureOptions: Maybe<Array<({ | ||
| __typename?: 'ProductConfigurableFeatureOption'; | ||
| } & Pick<ProductConfigurableFeatureOption, 'cost' | 'displayName' | 'value'>)>>; | ||
| }) | ({ | ||
| __typename?: 'ProductNumberConfigurableFeature'; | ||
@@ -1029,14 +1041,2 @@ } & Pick<ProductNumberConfigurableFeature, 'label' | 'displayName'> & { | ||
| })>>; | ||
| }) | ({ | ||
| __typename?: 'ProductBooleanConfigurableFeature'; | ||
| } & Pick<ProductBooleanConfigurableFeature, 'label' | 'displayName'> & { | ||
| featureOptions: Maybe<Array<({ | ||
| __typename?: 'ProductConfigurableFeatureOption'; | ||
| } & Pick<ProductConfigurableFeatureOption, 'cost' | 'displayName' | 'value'>)>>; | ||
| }) | ({ | ||
| __typename?: 'ProductStringConfigurableFeature'; | ||
| } & Pick<ProductStringConfigurableFeature, 'label' | 'displayName'> & { | ||
| featureOptions: Maybe<Array<({ | ||
| __typename?: 'ProductConfigurableFeatureOption'; | ||
| } & Pick<ProductConfigurableFeatureOption, 'cost' | 'displayName' | 'value'>)>>; | ||
| }); | ||
@@ -1043,0 +1043,0 @@ })>; |
| { | ||
| "name": "@manifoldco/component-plan-matrix", | ||
| "version": "0.0.12", | ||
| "version": "0.0.13", | ||
| "private": false, | ||
@@ -22,2 +22,5 @@ "description": "Stencil Component Starter", | ||
| "@manifoldco/icons": "0.0.6", | ||
| "@manifoldco/mui-core": "^0.1.5", | ||
| "@manifoldco/mui-core-types": "^0.1.4", | ||
| "@rollup/plugin-replace": "^2.3.1", | ||
| "@stencil/core": "^1.8.9", | ||
@@ -24,0 +27,0 @@ "@stencil/postcss": "^1.0.1", |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis 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
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Number of medium supply chain risk alerts
- decreased by-21.43%
22
Worsened metrics
- Total package byte prevSize
- decreased by-0.31%
1042991
- Dev dependency count
- increased by7.89%
41
- Number of package files
- decreased by-2.17%
90
- Lines of code
- decreased by-0.43%
16376
No dependency changes