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.11 to 0.0.12
@@ -5,3 +5,3 @@ 'use strict'; | ||
| const core = require('./core-57642cb9.js'); | ||
| const core = require('./core-32a166d3.js'); | ||
@@ -8,0 +8,0 @@ const defineCustomElements = (win, options) => { |
@@ -5,3 +5,3 @@ 'use strict'; | ||
| const core = require('./core-57642cb9.js'); | ||
| const core = require('./core-32a166d3.js'); | ||
@@ -322,2 +322,5 @@ const check = 'M384 707.66l-183.163-183.163c-16.662-16.662-43.677-16.662-60.34 0s-16.662 43.677 0 60.34l213.333 213.333c16.662 16.662 43.677 16.662 60.34 0l469.333-469.333c16.662-16.662 16.662-43.677 0-60.34s-43.677-16.662-60.34 0l-439.163 439.163z'; | ||
| } | ||
| function microCostToDollars(microCost) { | ||
| return microCost / ONE_BILLION; | ||
| } | ||
| function microCostToCents(microCost) { | ||
@@ -407,2 +410,179 @@ return microCost / TEN_MILLION; | ||
| const endpoint = { | ||
| local: 'http://analytics.arigato.tools/v1/events', | ||
| stage: 'https://analytics.stage.manifold.co/v1/events', | ||
| prod: 'https://analytics.manifold.co/v1/events', | ||
| }; | ||
| function stringifyProperties(evt) { | ||
| return Object.assign(Object.assign({}, evt), { properties: Object.entries(evt.properties).reduce((properties, [key, value]) => (Object.assign(Object.assign({}, properties), { [key]: `${value}` })), {}) }); | ||
| } | ||
| /** | ||
| * Report an error or analytics event to Manifold | ||
| * @param {Object} eventData Event data to send to Manifold | ||
| * @param {string} eventData.type 'event' or 'error' | ||
| * @param {string} eventData.name name_of_event (lowercase with underscores) | ||
| * @param {string} [eventData.description] User-readable description of this event | ||
| * @param {Object} eventData.properties Free-form object of event properties (different names will require different properties) | ||
| * @param {string} eventData.source Will be 'ui' | ||
| * @param {Object} [options] Analytics options | ||
| * @param {string} [options.env] 'prod' (default) or 'stage' | ||
| */ | ||
| function report(evt, options) { | ||
| const url = endpoint[options.env]; | ||
| return fetch(url, { | ||
| method: 'POST', | ||
| body: JSON.stringify(Object.assign(Object.assign({}, stringifyProperties(evt)), { source: 'mui-pricing-matrix' })), | ||
| }); | ||
| } | ||
| function mark(el, name) { | ||
| const markName = `${el.tagName}-${name}-start`; | ||
| if (performance.getEntriesByName(markName, 'mark').length === 0) { | ||
| performance.mark(markName); | ||
| } | ||
| } | ||
| function measure(el, name) { | ||
| const startMarkName = `${el.tagName}-${name}-start`; | ||
| const endMarkName = `${el.tagName}-${name}-end`; | ||
| const startMarks = performance.getEntriesByName(startMarkName, 'mark'); | ||
| const endMarks = performance.getEntriesByName(endMarkName, 'mark'); | ||
| if (startMarks.length) { | ||
| if (!endMarks.length) { | ||
| performance.mark(endMarkName); | ||
| const endMark = performance.getEntriesByName(endMarkName, 'mark')[0]; | ||
| return { | ||
| duration: endMark.startTime - startMarks[0].startTime, | ||
| firstReport: true, | ||
| }; | ||
| } | ||
| return { | ||
| duration: endMarks[0].startTime - startMarks[0].startTime, | ||
| firstReport: false, | ||
| }; | ||
| } | ||
| return null; | ||
| } | ||
| function report$1(detail, options) { | ||
| 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' }); | ||
| report({ | ||
| type: 'error', | ||
| name: 'mui-pricing-matrix_error', | ||
| properties: { | ||
| code: detail.code || '', | ||
| componentName: detail.componentName || (element && element.tagName) || '', | ||
| message: detail.message || '', | ||
| version: extendedDetail.version, | ||
| clientId: detail.clientId || '', | ||
| }, | ||
| }, { env }); | ||
| console.error(detail); // report error (Rollbar, Datadog, etc.) | ||
| const evt = new CustomEvent('manifold-error', { bubbles: true, detail: extendedDetail }); | ||
| (element || document).dispatchEvent(evt); | ||
| } | ||
| function environment (graphqlUrl) { | ||
| if (!graphqlUrl || graphqlUrl.includes('stage')) { | ||
| return 'stage'; | ||
| } | ||
| if (graphqlUrl.includes('arigato')) { | ||
| return 'local'; | ||
| } | ||
| return 'prod'; | ||
| } | ||
| function loadMark() { | ||
| return function loadMarkDecorator(_target, _propertyKey, descriptor) { | ||
| const originalMethod = descriptor.value; | ||
| // eslint-disable-next-line no-param-reassign | ||
| descriptor.value = function componentWillLoad() { | ||
| if (this.el) { | ||
| mark(this.el, 'first_render'); | ||
| mark(this.el, 'first_render_with_data'); | ||
| } | ||
| return originalMethod.apply(this); // call original method | ||
| }; | ||
| return descriptor; | ||
| }; | ||
| } | ||
| /* eslint-disable no-param-reassign */ | ||
| function logger() { | ||
| return function loggerDecorator(target, _propertyKey, descriptor) { | ||
| const originalMethod = descriptor.value; | ||
| descriptor.value = function render() { | ||
| try { | ||
| const rendered = originalMethod.apply(this); // attempt to call render() | ||
| if (this.el && this.el.tagName.startsWith('MANIFOLD-')) { | ||
| const env = environment(this.graphql); | ||
| const clientId = this.clientId || ''; | ||
| const el = this.el; | ||
| const loadMeasure = measure(el, 'load'); | ||
| const firstRenderMeasure = measure(el, 'first_render'); | ||
| if (performance.getEntriesByName(`${el.tagName}-rtt_graphql-end`).length) { | ||
| // This element has loaded data via graphql, we can report first_render_with_data | ||
| const rttGraphqlMeasure = measure(el, 'rtt_graphql'); | ||
| const firstRenderWithDataMeasure = measure(el, 'first_render_with_data'); | ||
| if (firstRenderWithDataMeasure && | ||
| firstRenderWithDataMeasure.firstReport && | ||
| rttGraphqlMeasure && | ||
| loadMeasure) { | ||
| report({ | ||
| name: 'first_render_with_data', | ||
| type: 'metric', | ||
| properties: { | ||
| componentName: el.tagName, | ||
| version: '0.0.12', | ||
| duration: firstRenderWithDataMeasure.duration, | ||
| rttGraphql: rttGraphqlMeasure.duration, | ||
| load: loadMeasure.duration, | ||
| clientId, | ||
| }, | ||
| }, { env }); | ||
| } | ||
| } | ||
| if (loadMeasure && loadMeasure.firstReport) { | ||
| report({ | ||
| name: 'load', | ||
| type: 'metric', | ||
| properties: { | ||
| componentName: el.tagName, | ||
| version: '0.0.12', | ||
| duration: loadMeasure.duration, | ||
| clientId, | ||
| }, | ||
| }, { env }); | ||
| } | ||
| if (firstRenderMeasure && firstRenderMeasure.firstReport) { | ||
| report({ | ||
| name: 'first_render', | ||
| type: 'metric', | ||
| properties: { | ||
| componentName: el.tagName, | ||
| version: '0.0.12', | ||
| duration: firstRenderMeasure.duration, | ||
| clientId, | ||
| }, | ||
| }, { env }); | ||
| } | ||
| } | ||
| return rendered; | ||
| } | ||
| catch (e) { | ||
| const env = environment(this.graphql); | ||
| const clientId = this.clientId || ''; | ||
| report$1({ | ||
| code: e.name || e, | ||
| componentName: target.constructor.name, | ||
| message: e.message || e, | ||
| clientId, | ||
| }, { env }); | ||
| return (core.h("div", null, | ||
| core.h("p", null, "Hmm something went wrong."), | ||
| core.h("p", null, e.message))); // show error to user | ||
| } | ||
| }; | ||
| return descriptor; | ||
| }; | ||
| } | ||
| /* | ||
@@ -494,2 +674,12 @@ * Stencil prefers one export per component file so this constant is maintained here. | ||
| var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) { | ||
| var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; | ||
| if (typeof Reflect === "object" && typeof Reflect.decorate === "function") | ||
| r = Reflect.decorate(decorators, target, key, desc); | ||
| else | ||
| for (var i = decorators.length - 1; i >= 0; i--) | ||
| if (d = decorators[i]) | ||
| r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; | ||
| return c > 3 && r && Object.defineProperty(target, key, r), r; | ||
| }; | ||
| // settings | ||
@@ -521,3 +711,3 @@ const GRAPHQL_ENDPOINT = 'https://api.manifold.co/graphql'; | ||
| if (newVal) { | ||
| this.fetchProduct(newVal); | ||
| this.setupProduct(newVal); | ||
| } | ||
@@ -531,12 +721,16 @@ } | ||
| // 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.fetchProduct(this.productId); | ||
| this.setupProduct(this.productId); | ||
| } | ||
| } | ||
| async fetchProduct(productID) { | ||
| // trying to move fetch out for testing. | ||
| async fetchGraphQl(productID) { | ||
| const variables = { id: productID }; | ||
| const res = await fetch(`${this.graphqlUrl}`, { | ||
| 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 }), | ||
| }).then(body => body.json()); | ||
| }); | ||
| } | ||
| async setupProduct(productID) { | ||
| const res = await this.fetchGraphQl(productID).then(body => body.json()); | ||
| const data = res.data; | ||
@@ -606,2 +800,20 @@ if (!data || !data.product) { | ||
| } | ||
| handleCtaClick(e, planId, destination = '') { | ||
| e.preventDefault(); | ||
| const env = environment(this === null || this === void 0 ? void 0 : this.graphqlUrl); | ||
| report({ | ||
| description: 'Track pricing matrix cta clicks', | ||
| name: 'click', | ||
| type: 'component-analytics', | ||
| source: 'mui-pricing-matrix', | ||
| properties: { | ||
| version: '0.0.12', | ||
| componentName: this.el.tagName, | ||
| planId, | ||
| clientId: this.clientId || '', | ||
| }, | ||
| }, { env }).then(() => { | ||
| window.location.href = destination; | ||
| }); | ||
| } | ||
| setFeature({ planID, featureLabel, featureValue, }) { | ||
@@ -618,3 +830,3 @@ this.userSelection = cjs(this.userSelection, { [planID]: { [featureLabel]: featureValue } }); | ||
| featureValue: e.target.value, | ||
| }) }, (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" })))); | ||
| }) }, (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" })))); | ||
| } | ||
@@ -673,6 +885,7 @@ case PlanFeatureType.Number: { | ||
| }), | ||
| core.h("div", { class: "mp--cell mp--cell__body mp--cell__bbs", "data-row-last": true, "data-column-last": lastColumn }, core.h("a", { class: "mp--button", id: `manifold-cta-plan-${plan.id}`, href: this.baseUrl }, this.ctaText)), | ||
| core.h("div", { class: "mp--cell mp--cell__body mp--cell__bbs", "data-row-last": true, "data-column-last": lastColumn }, core.h("a", { "data-cta": "cta-button", class: "mp--button", id: `manifold-cta-plan-${plan.id}`, href: this.baseUrl, onClick: e => this.handleCtaClick(e, plan.id, this.baseUrl) }, this.ctaText)), | ||
| ]; | ||
| }))); | ||
| } | ||
| get el() { return core.getElement(this); } | ||
| static get watchers() { return { | ||
@@ -683,3 +896,9 @@ "productId": ["refetchProduct"] | ||
| }; | ||
| __decorate([ | ||
| loadMark() | ||
| ], ManifoldPricing.prototype, "componentWillLoad", null); | ||
| __decorate([ | ||
| logger() | ||
| ], ManifoldPricing.prototype, "render", null); | ||
| exports.manifold_plan_matrix = ManifoldPricing; |
| 'use strict'; | ||
| const core = require('./core-57642cb9.js'); | ||
| const core = require('./core-32a166d3.js'); | ||
@@ -5,0 +5,0 @@ core.patchBrowser().then(options => { |
@@ -0,1 +1,7 @@ | ||
| var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { | ||
| var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; | ||
| if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); | ||
| else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; | ||
| return c > 3 && r && Object.defineProperty(target, key, r), r; | ||
| }; | ||
| import { h } from "@stencil/core"; | ||
@@ -5,4 +11,7 @@ import { chevron_up_down } from '@manifoldco/icons'; | ||
| import { PlanFeatureType } from '../../types/graphql'; | ||
| import { toUSD } from '../../utils/cost'; | ||
| import { microCostToDollars } 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'; | ||
@@ -39,3 +48,3 @@ import FixedFeature from './fixed-feature'; | ||
| if (newVal) { | ||
| this.fetchProduct(newVal); | ||
| this.setupProduct(newVal); | ||
| } | ||
@@ -49,12 +58,16 @@ } | ||
| // 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.fetchProduct(this.productId); | ||
| this.setupProduct(this.productId); | ||
| } | ||
| } | ||
| async fetchProduct(productID) { | ||
| // trying to move fetch out for testing. | ||
| async fetchGraphQl(productID) { | ||
| const variables = { id: productID }; | ||
| const res = await fetch(`${this.graphqlUrl}`, { | ||
| 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 }), | ||
| }).then(body => body.json()); | ||
| }); | ||
| } | ||
| async setupProduct(productID) { | ||
| const res = await this.fetchGraphQl(productID).then(body => body.json()); | ||
| const data = res.data; | ||
@@ -124,2 +137,20 @@ if (!data || !data.product) { | ||
| } | ||
| handleCtaClick(e, planId, destination = '') { | ||
| e.preventDefault(); | ||
| const env = environment(this === null || this === void 0 ? void 0 : this.graphqlUrl); | ||
| analytics({ | ||
| description: 'Track pricing matrix cta clicks', | ||
| name: 'click', | ||
| type: 'component-analytics', | ||
| source: 'mui-pricing-matrix', | ||
| properties: { | ||
| version: '<@NPM_PACKAGE_VERSION@>', | ||
| componentName: this.el.tagName, | ||
| planId, | ||
| clientId: this.clientId || '', | ||
| }, | ||
| }, { env }).then(() => { | ||
| window.location.href = destination; | ||
| }); | ||
| } | ||
| setFeature({ planID, featureLabel, featureValue, }) { | ||
@@ -142,3 +173,3 @@ this.userSelection = merge(this.userSelection, { [planID]: { [featureLabel]: featureValue } }); | ||
| " (", | ||
| toUSD(option.cost), | ||
| microCostToDollars(option.cost), | ||
| ")"))))), | ||
@@ -221,3 +252,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" }, | ||
| h("div", { class: "mp--cell mp--cell__body mp--cell__bbs", "data-row-last": true, "data-column-last": lastColumn }, | ||
| h("a", { class: "mp--button", id: `manifold-cta-plan-${plan.id}`, href: this.baseUrl }, this.ctaText)), | ||
| h("a", { "data-cta": "cta-button", class: "mp--button", id: `manifold-cta-plan-${plan.id}`, href: this.baseUrl, onClick: e => this.handleCtaClick(e, plan.id, this.baseUrl) }, this.ctaText)), | ||
| ]; | ||
@@ -349,2 +380,3 @@ }))); | ||
| }; } | ||
| static get elementRef() { return "el"; } | ||
| static get watchers() { return [{ | ||
@@ -355,1 +387,7 @@ "propName": "productId", | ||
| } | ||
| __decorate([ | ||
| loadMark() | ||
| ], ManifoldPricing.prototype, "componentWillLoad", null); | ||
| __decorate([ | ||
| logger() | ||
| ], ManifoldPricing.prototype, "render", null); |
@@ -44,3 +44,3 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) { | ||
| }; | ||
| import { h, r as registerInstance } from './core-865c45ad.js'; | ||
| import { h, r as registerInstance, g as getElement } from './core-514db491.js'; | ||
| var check = 'M384 707.66l-183.163-183.163c-16.662-16.662-43.677-16.662-60.34 0s-16.662 43.677 0 60.34l213.333 213.333c16.662 16.662 43.677 16.662 60.34 0l469.333-469.333c16.662-16.662 16.662-43.677 0-60.34s-43.677-16.662-60.34 0l-439.163 439.163z'; | ||
@@ -338,2 +338,5 @@ var chevron_up_down = 'M501.3 752c-6.8 0-13.6-2.6-18.9-7.8l-160-160c-10.4-10.4-10.4-27.3 0-37.7 10.4-10.4 27.3-10.4 37.7 0l141.1 141.1 141.1-141.1c10.4-10.4 27.3-10.4 37.8 0 10.4 10.4 10.4 27.3 0 37.7l-160 160c-5.1 5.2-11.9 7.8-18.8 7.8zM661.3 442.7c-6.8 0-13.7-2.6-18.9-7.8L501.3 293.7 360.2 434.9c-10.4 10.4-27.3 10.4-37.7 0-10.4-10.4-10.4-27.3 0-37.7l160-160c10.4-10.4 27.3-10.4 37.7 0l160 160c10.4 10.4 10.4 27.3 0 37.7-5.2 5.2-12 7.8-18.9 7.8z'; | ||
| } | ||
| function microCostToDollars(microCost) { | ||
| return microCost / ONE_BILLION; | ||
| } | ||
| function microCostToCents(microCost) { | ||
@@ -433,2 +436,177 @@ return microCost / TEN_MILLION; | ||
| } | ||
| var endpoint = { | ||
| local: 'http://analytics.arigato.tools/v1/events', | ||
| stage: 'https://analytics.stage.manifold.co/v1/events', | ||
| prod: 'https://analytics.manifold.co/v1/events', | ||
| }; | ||
| function stringifyProperties(evt) { | ||
| return Object.assign(Object.assign({}, evt), { properties: Object.entries(evt.properties).reduce(function (properties, _a) { | ||
| var _b; | ||
| var key = _a[0], value = _a[1]; | ||
| return (Object.assign(Object.assign({}, properties), (_b = {}, _b[key] = "" + value, _b))); | ||
| }, {}) }); | ||
| } | ||
| /** | ||
| * Report an error or analytics event to Manifold | ||
| * @param {Object} eventData Event data to send to Manifold | ||
| * @param {string} eventData.type 'event' or 'error' | ||
| * @param {string} eventData.name name_of_event (lowercase with underscores) | ||
| * @param {string} [eventData.description] User-readable description of this event | ||
| * @param {Object} eventData.properties Free-form object of event properties (different names will require different properties) | ||
| * @param {string} eventData.source Will be 'ui' | ||
| * @param {Object} [options] Analytics options | ||
| * @param {string} [options.env] 'prod' (default) or 'stage' | ||
| */ | ||
| function report(evt, options) { | ||
| var url = endpoint[options.env]; | ||
| return fetch(url, { | ||
| method: 'POST', | ||
| body: JSON.stringify(Object.assign(Object.assign({}, stringifyProperties(evt)), { source: 'mui-pricing-matrix' })), | ||
| }); | ||
| } | ||
| function mark(el, name) { | ||
| var markName = el.tagName + "-" + name + "-start"; | ||
| if (performance.getEntriesByName(markName, 'mark').length === 0) { | ||
| performance.mark(markName); | ||
| } | ||
| } | ||
| function measure(el, name) { | ||
| var startMarkName = el.tagName + "-" + name + "-start"; | ||
| var endMarkName = el.tagName + "-" + name + "-end"; | ||
| var startMarks = performance.getEntriesByName(startMarkName, 'mark'); | ||
| var endMarks = performance.getEntriesByName(endMarkName, 'mark'); | ||
| if (startMarks.length) { | ||
| if (!endMarks.length) { | ||
| performance.mark(endMarkName); | ||
| var endMark = performance.getEntriesByName(endMarkName, 'mark')[0]; | ||
| return { | ||
| duration: endMark.startTime - startMarks[0].startTime, | ||
| firstReport: true, | ||
| }; | ||
| } | ||
| return { | ||
| duration: endMarks[0].startTime - startMarks[0].startTime, | ||
| firstReport: false, | ||
| }; | ||
| } | ||
| return null; | ||
| } | ||
| function report$1(detail, options) { | ||
| 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' }); | ||
| report({ | ||
| type: 'error', | ||
| name: 'mui-pricing-matrix_error', | ||
| properties: { | ||
| code: detail.code || '', | ||
| componentName: detail.componentName || (element && element.tagName) || '', | ||
| message: detail.message || '', | ||
| version: extendedDetail.version, | ||
| clientId: detail.clientId || '', | ||
| }, | ||
| }, { env: env }); | ||
| console.error(detail); // report error (Rollbar, Datadog, etc.) | ||
| var evt = new CustomEvent('manifold-error', { bubbles: true, detail: extendedDetail }); | ||
| (element || document).dispatchEvent(evt); | ||
| } | ||
| function environment(graphqlUrl) { | ||
| if (!graphqlUrl || graphqlUrl.includes('stage')) { | ||
| return 'stage'; | ||
| } | ||
| if (graphqlUrl.includes('arigato')) { | ||
| return 'local'; | ||
| } | ||
| return 'prod'; | ||
| } | ||
| function loadMark() { | ||
| return function loadMarkDecorator(_target, _propertyKey, descriptor) { | ||
| var originalMethod = descriptor.value; | ||
| // eslint-disable-next-line no-param-reassign | ||
| descriptor.value = function componentWillLoad() { | ||
| if (this.el) { | ||
| mark(this.el, 'first_render'); | ||
| mark(this.el, 'first_render_with_data'); | ||
| } | ||
| return originalMethod.apply(this); // call original method | ||
| }; | ||
| return descriptor; | ||
| }; | ||
| } | ||
| /* eslint-disable no-param-reassign */ | ||
| function logger() { | ||
| return function loggerDecorator(target, _propertyKey, descriptor) { | ||
| var originalMethod = descriptor.value; | ||
| descriptor.value = function render() { | ||
| try { | ||
| var rendered = originalMethod.apply(this); // attempt to call render() | ||
| if (this.el && this.el.tagName.startsWith('MANIFOLD-')) { | ||
| var env = environment(this.graphql); | ||
| var clientId = this.clientId || ''; | ||
| var el = this.el; | ||
| var loadMeasure = measure(el, 'load'); | ||
| var firstRenderMeasure = measure(el, 'first_render'); | ||
| if (performance.getEntriesByName(el.tagName + "-rtt_graphql-end").length) { | ||
| // This element has loaded data via graphql, we can report first_render_with_data | ||
| var rttGraphqlMeasure = measure(el, 'rtt_graphql'); | ||
| var firstRenderWithDataMeasure = measure(el, 'first_render_with_data'); | ||
| if (firstRenderWithDataMeasure && | ||
| firstRenderWithDataMeasure.firstReport && | ||
| rttGraphqlMeasure && | ||
| loadMeasure) { | ||
| report({ | ||
| name: 'first_render_with_data', | ||
| type: 'metric', | ||
| properties: { | ||
| componentName: el.tagName, | ||
| version: '0.0.12', | ||
| duration: firstRenderWithDataMeasure.duration, | ||
| rttGraphql: rttGraphqlMeasure.duration, | ||
| load: loadMeasure.duration, | ||
| clientId: clientId, | ||
| }, | ||
| }, { env: env }); | ||
| } | ||
| } | ||
| if (loadMeasure && loadMeasure.firstReport) { | ||
| report({ | ||
| name: 'load', | ||
| type: 'metric', | ||
| properties: { | ||
| componentName: el.tagName, | ||
| version: '0.0.12', | ||
| duration: loadMeasure.duration, | ||
| clientId: clientId, | ||
| }, | ||
| }, { env: env }); | ||
| } | ||
| if (firstRenderMeasure && firstRenderMeasure.firstReport) { | ||
| report({ | ||
| name: 'first_render', | ||
| type: 'metric', | ||
| properties: { | ||
| componentName: el.tagName, | ||
| version: '0.0.12', | ||
| duration: firstRenderMeasure.duration, | ||
| clientId: clientId, | ||
| }, | ||
| }, { env: env }); | ||
| } | ||
| } | ||
| return rendered; | ||
| } | ||
| catch (e) { | ||
| var env = environment(this.graphql); | ||
| var clientId = this.clientId || ''; | ||
| report$1({ | ||
| code: e.name || e, | ||
| componentName: target.constructor.name, | ||
| message: e.message || e, | ||
| clientId: clientId, | ||
| }, { env: env }); | ||
| return (h("div", null, h("p", null, "Hmm something went wrong."), h("p", null, e.message))); // show error to user | ||
| } | ||
| }; | ||
| return descriptor; | ||
| }; | ||
| } | ||
| /* | ||
@@ -492,2 +670,12 @@ * Stencil prefers one export per component file so this constant is maintained here. | ||
| var query = "query PRODUCT($id: ID!) {\n product(id: $id) {\n id\n displayName\n\n fixedFeatures(first: 25) {\n edges {\n node {\n label\n displayName\n featureOptions {\n value\n displayName\n }\n }\n }\n }\n\n meteredFeatures(first: 25) {\n edges {\n node {\n label\n displayName\n numericOptions {\n label\n displayName\n numericDetails {\n unit\n costTiers {\n cost\n limit\n }\n }\n }\n }\n }\n }\n\n configurableFeatures(first: 25) {\n edges {\n node {\n label\n displayName\n\n ... on ProductStringConfigurableFeature {\n featureOptions {\n cost\n displayName\n value\n }\n }\n\n ... on ProductBooleanConfigurableFeature {\n featureOptions {\n cost\n displayName\n value\n }\n }\n\n ... on ProductNumberConfigurableFeature {\n numericOptions {\n label\n displayName\n numericDetails {\n increment\n max\n min\n unit\n costTiers {\n cost\n limit\n }\n }\n }\n }\n }\n }\n }\n\n plans(first: 25, orderBy: { field: COST, direction: ASC }) {\n edges {\n node {\n cost\n displayName\n id\n fixedFeatures(first: 25) {\n edges {\n node {\n label\n displayName\n displayValue\n }\n }\n }\n meteredFeatures(first: 25) {\n edges {\n node {\n label\n displayName\n numericDetails {\n unit\n costTiers {\n cost\n limit\n }\n }\n }\n }\n }\n configurableFeatures(first: 25) {\n edges {\n node {\n label\n displayName\n type\n upgradable\n downgradable\n featureOptions {\n displayName\n cost\n value\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 }\n}\n"; | ||
| var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) { | ||
| var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; | ||
| if (typeof Reflect === "object" && typeof Reflect.decorate === "function") | ||
| r = Reflect.decorate(decorators, target, key, desc); | ||
| else | ||
| for (var i = decorators.length - 1; i >= 0; i--) | ||
| if (d = decorators[i]) | ||
| r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; | ||
| return c > 3 && r && Object.defineProperty(target, key, r), r; | ||
| }; | ||
| // settings | ||
@@ -519,3 +707,3 @@ var GRAPHQL_ENDPOINT = 'https://api.manifold.co/graphql'; | ||
| if (newVal) { | ||
| this.fetchProduct(newVal); | ||
| this.setupProduct(newVal); | ||
| } | ||
@@ -529,20 +717,28 @@ }; | ||
| // 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.fetchProduct(this.productId); | ||
| this.setupProduct(this.productId); | ||
| } | ||
| }; | ||
| class_1.prototype.fetchProduct = function (productID) { | ||
| // trying to move fetch out for testing. | ||
| class_1.prototype.fetchGraphQl = function (productID) { | ||
| return __awaiter(this, void 0, void 0, function () { | ||
| var variables, res, data, fixed, metered, configurable, featureLabels, planCosts, planFeatures, userSelection; | ||
| var variables; | ||
| var _a; | ||
| return __generator(this, function (_b) { | ||
| switch (_b.label) { | ||
| case 0: | ||
| variables = { id: productID }; | ||
| return [4 /*yield*/, 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 }), | ||
| }).then(function (body) { return body.json(); })]; | ||
| 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 }), | ||
| })]; | ||
| }); | ||
| }); | ||
| }; | ||
| class_1.prototype.setupProduct = function (productID) { | ||
| return __awaiter(this, void 0, void 0, function () { | ||
| var 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 1: | ||
| res = _b.sent(); | ||
| res = _a.sent(); | ||
| data = res.data; | ||
@@ -634,2 +830,21 @@ if (!data || !data.product) { | ||
| }; | ||
| class_1.prototype.handleCtaClick = function (e, planId, destination) { | ||
| if (destination === void 0) { destination = ''; } | ||
| e.preventDefault(); | ||
| var env = environment(this === null || this === void 0 ? void 0 : this.graphqlUrl); | ||
| report({ | ||
| description: 'Track pricing matrix cta clicks', | ||
| name: 'click', | ||
| type: 'component-analytics', | ||
| source: 'mui-pricing-matrix', | ||
| properties: { | ||
| version: '0.0.12', | ||
| componentName: this.el.tagName, | ||
| planId: planId, | ||
| clientId: this.clientId || '', | ||
| }, | ||
| }, { env: env }).then(function () { | ||
| window.location.href = destination; | ||
| }); | ||
| }; | ||
| class_1.prototype.setFeature = function (_a) { | ||
@@ -650,3 +865,3 @@ var _b, _c; | ||
| featureValue: e.target.value, | ||
| }); } }, (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" })))); | ||
| }); } }, (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" })))); | ||
| } | ||
@@ -707,6 +922,11 @@ case PlanFeatureType.Number: { | ||
| }), | ||
| h("div", { class: "mp--cell mp--cell__body mp--cell__bbs", "data-row-last": true, "data-column-last": lastColumn }, h("a", { class: "mp--button", id: "manifold-cta-plan-" + plan.id, href: _this.baseUrl }, _this.ctaText)), | ||
| h("div", { class: "mp--cell mp--cell__body mp--cell__bbs", "data-row-last": true, "data-column-last": lastColumn }, h("a", { "data-cta": "cta-button", class: "mp--button", id: "manifold-cta-plan-" + plan.id, href: _this.baseUrl, onClick: function (e) { return _this.handleCtaClick(e, plan.id, _this.baseUrl); } }, _this.ctaText)), | ||
| ]; | ||
| }))); | ||
| }; | ||
| Object.defineProperty(class_1.prototype, "el", { | ||
| get: function () { return getElement(this); }, | ||
| enumerable: true, | ||
| configurable: true | ||
| }); | ||
| Object.defineProperty(class_1, "watchers", { | ||
@@ -728,2 +948,8 @@ get: function () { | ||
| }()); | ||
| __decorate([ | ||
| loadMark() | ||
| ], ManifoldPricing.prototype, "componentWillLoad", null); | ||
| __decorate([ | ||
| logger() | ||
| ], ManifoldPricing.prototype, "render", null); | ||
| export { ManifoldPricing as manifold_plan_matrix }; |
@@ -1,2 +0,2 @@ | ||
| import { h, r as registerInstance } from './core-865c45ad.js'; | ||
| import { h, r as registerInstance, g as getElement } from './core-514db491.js'; | ||
@@ -317,2 +317,5 @@ const check = 'M384 707.66l-183.163-183.163c-16.662-16.662-43.677-16.662-60.34 0s-16.662 43.677 0 60.34l213.333 213.333c16.662 16.662 43.677 16.662 60.34 0l469.333-469.333c16.662-16.662 16.662-43.677 0-60.34s-43.677-16.662-60.34 0l-439.163 439.163z'; | ||
| } | ||
| function microCostToDollars(microCost) { | ||
| return microCost / ONE_BILLION; | ||
| } | ||
| function microCostToCents(microCost) { | ||
@@ -402,2 +405,179 @@ return microCost / TEN_MILLION; | ||
| const endpoint = { | ||
| local: 'http://analytics.arigato.tools/v1/events', | ||
| stage: 'https://analytics.stage.manifold.co/v1/events', | ||
| prod: 'https://analytics.manifold.co/v1/events', | ||
| }; | ||
| function stringifyProperties(evt) { | ||
| return Object.assign(Object.assign({}, evt), { properties: Object.entries(evt.properties).reduce((properties, [key, value]) => (Object.assign(Object.assign({}, properties), { [key]: `${value}` })), {}) }); | ||
| } | ||
| /** | ||
| * Report an error or analytics event to Manifold | ||
| * @param {Object} eventData Event data to send to Manifold | ||
| * @param {string} eventData.type 'event' or 'error' | ||
| * @param {string} eventData.name name_of_event (lowercase with underscores) | ||
| * @param {string} [eventData.description] User-readable description of this event | ||
| * @param {Object} eventData.properties Free-form object of event properties (different names will require different properties) | ||
| * @param {string} eventData.source Will be 'ui' | ||
| * @param {Object} [options] Analytics options | ||
| * @param {string} [options.env] 'prod' (default) or 'stage' | ||
| */ | ||
| function report(evt, options) { | ||
| const url = endpoint[options.env]; | ||
| return fetch(url, { | ||
| method: 'POST', | ||
| body: JSON.stringify(Object.assign(Object.assign({}, stringifyProperties(evt)), { source: 'mui-pricing-matrix' })), | ||
| }); | ||
| } | ||
| function mark(el, name) { | ||
| const markName = `${el.tagName}-${name}-start`; | ||
| if (performance.getEntriesByName(markName, 'mark').length === 0) { | ||
| performance.mark(markName); | ||
| } | ||
| } | ||
| function measure(el, name) { | ||
| const startMarkName = `${el.tagName}-${name}-start`; | ||
| const endMarkName = `${el.tagName}-${name}-end`; | ||
| const startMarks = performance.getEntriesByName(startMarkName, 'mark'); | ||
| const endMarks = performance.getEntriesByName(endMarkName, 'mark'); | ||
| if (startMarks.length) { | ||
| if (!endMarks.length) { | ||
| performance.mark(endMarkName); | ||
| const endMark = performance.getEntriesByName(endMarkName, 'mark')[0]; | ||
| return { | ||
| duration: endMark.startTime - startMarks[0].startTime, | ||
| firstReport: true, | ||
| }; | ||
| } | ||
| return { | ||
| duration: endMarks[0].startTime - startMarks[0].startTime, | ||
| firstReport: false, | ||
| }; | ||
| } | ||
| return null; | ||
| } | ||
| function report$1(detail, options) { | ||
| 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' }); | ||
| report({ | ||
| type: 'error', | ||
| name: 'mui-pricing-matrix_error', | ||
| properties: { | ||
| code: detail.code || '', | ||
| componentName: detail.componentName || (element && element.tagName) || '', | ||
| message: detail.message || '', | ||
| version: extendedDetail.version, | ||
| clientId: detail.clientId || '', | ||
| }, | ||
| }, { env }); | ||
| console.error(detail); // report error (Rollbar, Datadog, etc.) | ||
| const evt = new CustomEvent('manifold-error', { bubbles: true, detail: extendedDetail }); | ||
| (element || document).dispatchEvent(evt); | ||
| } | ||
| function environment (graphqlUrl) { | ||
| if (!graphqlUrl || graphqlUrl.includes('stage')) { | ||
| return 'stage'; | ||
| } | ||
| if (graphqlUrl.includes('arigato')) { | ||
| return 'local'; | ||
| } | ||
| return 'prod'; | ||
| } | ||
| function loadMark() { | ||
| return function loadMarkDecorator(_target, _propertyKey, descriptor) { | ||
| const originalMethod = descriptor.value; | ||
| // eslint-disable-next-line no-param-reassign | ||
| descriptor.value = function componentWillLoad() { | ||
| if (this.el) { | ||
| mark(this.el, 'first_render'); | ||
| mark(this.el, 'first_render_with_data'); | ||
| } | ||
| return originalMethod.apply(this); // call original method | ||
| }; | ||
| return descriptor; | ||
| }; | ||
| } | ||
| /* eslint-disable no-param-reassign */ | ||
| function logger() { | ||
| return function loggerDecorator(target, _propertyKey, descriptor) { | ||
| const originalMethod = descriptor.value; | ||
| descriptor.value = function render() { | ||
| try { | ||
| const rendered = originalMethod.apply(this); // attempt to call render() | ||
| if (this.el && this.el.tagName.startsWith('MANIFOLD-')) { | ||
| const env = environment(this.graphql); | ||
| const clientId = this.clientId || ''; | ||
| const el = this.el; | ||
| const loadMeasure = measure(el, 'load'); | ||
| const firstRenderMeasure = measure(el, 'first_render'); | ||
| if (performance.getEntriesByName(`${el.tagName}-rtt_graphql-end`).length) { | ||
| // This element has loaded data via graphql, we can report first_render_with_data | ||
| const rttGraphqlMeasure = measure(el, 'rtt_graphql'); | ||
| const firstRenderWithDataMeasure = measure(el, 'first_render_with_data'); | ||
| if (firstRenderWithDataMeasure && | ||
| firstRenderWithDataMeasure.firstReport && | ||
| rttGraphqlMeasure && | ||
| loadMeasure) { | ||
| report({ | ||
| name: 'first_render_with_data', | ||
| type: 'metric', | ||
| properties: { | ||
| componentName: el.tagName, | ||
| version: '0.0.12', | ||
| duration: firstRenderWithDataMeasure.duration, | ||
| rttGraphql: rttGraphqlMeasure.duration, | ||
| load: loadMeasure.duration, | ||
| clientId, | ||
| }, | ||
| }, { env }); | ||
| } | ||
| } | ||
| if (loadMeasure && loadMeasure.firstReport) { | ||
| report({ | ||
| name: 'load', | ||
| type: 'metric', | ||
| properties: { | ||
| componentName: el.tagName, | ||
| version: '0.0.12', | ||
| duration: loadMeasure.duration, | ||
| clientId, | ||
| }, | ||
| }, { env }); | ||
| } | ||
| if (firstRenderMeasure && firstRenderMeasure.firstReport) { | ||
| report({ | ||
| name: 'first_render', | ||
| type: 'metric', | ||
| properties: { | ||
| componentName: el.tagName, | ||
| version: '0.0.12', | ||
| duration: firstRenderMeasure.duration, | ||
| clientId, | ||
| }, | ||
| }, { env }); | ||
| } | ||
| } | ||
| return rendered; | ||
| } | ||
| catch (e) { | ||
| const env = environment(this.graphql); | ||
| const clientId = this.clientId || ''; | ||
| report$1({ | ||
| code: e.name || e, | ||
| componentName: target.constructor.name, | ||
| message: e.message || e, | ||
| clientId, | ||
| }, { env }); | ||
| return (h("div", null, | ||
| h("p", null, "Hmm something went wrong."), | ||
| h("p", null, e.message))); // show error to user | ||
| } | ||
| }; | ||
| return descriptor; | ||
| }; | ||
| } | ||
| /* | ||
@@ -489,2 +669,12 @@ * Stencil prefers one export per component file so this constant is maintained here. | ||
| var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) { | ||
| var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; | ||
| if (typeof Reflect === "object" && typeof Reflect.decorate === "function") | ||
| r = Reflect.decorate(decorators, target, key, desc); | ||
| else | ||
| for (var i = decorators.length - 1; i >= 0; i--) | ||
| if (d = decorators[i]) | ||
| r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; | ||
| return c > 3 && r && Object.defineProperty(target, key, r), r; | ||
| }; | ||
| // settings | ||
@@ -516,3 +706,3 @@ const GRAPHQL_ENDPOINT = 'https://api.manifold.co/graphql'; | ||
| if (newVal) { | ||
| this.fetchProduct(newVal); | ||
| this.setupProduct(newVal); | ||
| } | ||
@@ -526,12 +716,16 @@ } | ||
| // 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.fetchProduct(this.productId); | ||
| this.setupProduct(this.productId); | ||
| } | ||
| } | ||
| async fetchProduct(productID) { | ||
| // trying to move fetch out for testing. | ||
| async fetchGraphQl(productID) { | ||
| const variables = { id: productID }; | ||
| const res = await fetch(`${this.graphqlUrl}`, { | ||
| 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 }), | ||
| }).then(body => body.json()); | ||
| }); | ||
| } | ||
| async setupProduct(productID) { | ||
| const res = await this.fetchGraphQl(productID).then(body => body.json()); | ||
| const data = res.data; | ||
@@ -601,2 +795,20 @@ if (!data || !data.product) { | ||
| } | ||
| handleCtaClick(e, planId, destination = '') { | ||
| e.preventDefault(); | ||
| const env = environment(this === null || this === void 0 ? void 0 : this.graphqlUrl); | ||
| report({ | ||
| description: 'Track pricing matrix cta clicks', | ||
| name: 'click', | ||
| type: 'component-analytics', | ||
| source: 'mui-pricing-matrix', | ||
| properties: { | ||
| version: '0.0.12', | ||
| componentName: this.el.tagName, | ||
| planId, | ||
| clientId: this.clientId || '', | ||
| }, | ||
| }, { env }).then(() => { | ||
| window.location.href = destination; | ||
| }); | ||
| } | ||
| setFeature({ planID, featureLabel, featureValue, }) { | ||
@@ -613,3 +825,3 @@ this.userSelection = cjs(this.userSelection, { [planID]: { [featureLabel]: featureValue } }); | ||
| featureValue: e.target.value, | ||
| }) }, (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" })))); | ||
| }) }, (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" })))); | ||
| } | ||
@@ -668,6 +880,7 @@ case PlanFeatureType.Number: { | ||
| }), | ||
| h("div", { class: "mp--cell mp--cell__body mp--cell__bbs", "data-row-last": true, "data-column-last": lastColumn }, h("a", { class: "mp--button", id: `manifold-cta-plan-${plan.id}`, href: this.baseUrl }, this.ctaText)), | ||
| h("div", { class: "mp--cell mp--cell__body mp--cell__bbs", "data-row-last": true, "data-column-last": lastColumn }, h("a", { "data-cta": "cta-button", class: "mp--button", id: `manifold-cta-plan-${plan.id}`, href: this.baseUrl, onClick: e => this.handleCtaClick(e, plan.id, this.baseUrl) }, this.ctaText)), | ||
| ]; | ||
| }))); | ||
| } | ||
| get el() { return getElement(this); } | ||
| static get watchers() { return { | ||
@@ -678,3 +891,9 @@ "productId": ["refetchProduct"] | ||
| }; | ||
| __decorate([ | ||
| loadMark() | ||
| ], ManifoldPricing.prototype, "componentWillLoad", null); | ||
| __decorate([ | ||
| logger() | ||
| ], ManifoldPricing.prototype, "render", null); | ||
| export { ManifoldPricing as manifold_plan_matrix }; |
@@ -1,1 +0,1 @@ | ||
| import{p as a,b as t}from"./p-932bdcd6.js";a().then(a=>t([["p-q0kzjmi8",[[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 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)); |
@@ -32,2 +32,3 @@ import { ProductQuery } from '../../types/graphql'; | ||
| export declare class ManifoldPricing { | ||
| el: HTMLElement; | ||
| gatewayUrl?: string; | ||
@@ -48,4 +49,6 @@ graphqlUrl?: string; | ||
| componentWillLoad(): void; | ||
| fetchProduct(productID: string): Promise<void>; | ||
| fetchGraphQl(productID: string): Promise<Response>; | ||
| setupProduct(productID: string): Promise<void>; | ||
| fetchCosts(): void; | ||
| handleCtaClick(e: MouseEvent, planId: string, destination?: string): void; | ||
| setFeature({ planID, featureLabel, featureValue, }: { | ||
@@ -52,0 +55,0 @@ planID: string; |
@@ -1015,14 +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'; | ||
| } & Pick<ProductStringConfigurableFeature, 'label' | 'displayName'> & { | ||
| featureOptions: Maybe<Array<({ | ||
| __typename?: 'ProductConfigurableFeatureOption'; | ||
| } & Pick<ProductConfigurableFeatureOption, 'cost' | 'displayName' | 'value'>)>>; | ||
| }) | ({ | ||
| __typename?: 'ProductNumberConfigurableFeature'; | ||
@@ -1041,2 +1029,14 @@ } & 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.11", | ||
| "version": "0.0.12", | ||
| "private": false, | ||
@@ -28,3 +28,3 @@ "description": "Stencil Component Starter", | ||
| "@storybook/html": "^5.3.13", | ||
| "@types/jest": "25.1.3", | ||
| "@types/jest": "24.0.25", | ||
| "@typescript-eslint/eslint-plugin": "^2.20.0", | ||
@@ -40,9 +40,11 @@ "@typescript-eslint/parser": "^2.20.0", | ||
| "eslint-plugin-prettier": "^3.1.2", | ||
| "fetch-mock": "^9.1.1", | ||
| "graphql": "^14.6.0", | ||
| "happo-plugin-typescript": "^1.0.0", | ||
| "happo.io": "^5.1.5", | ||
| "jest": "25.1.0", | ||
| "jest-cli": "25.1.0", | ||
| "jest": "24.9.0", | ||
| "jest-cli": "24.9.0", | ||
| "postcss-preset-env": "^6.7.0", | ||
| "prettier": "^1.19.1", | ||
| "rollup-plugin-replace": "^2.2.0", | ||
| "rollup-pluginutils": "^2.8.2", | ||
@@ -49,0 +51,0 @@ "stylelint": "^13.2.0", |
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
Sorry, the diff of this file is too big to display
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
- Total package byte prevSize
- increased by5.18%
1046212
- Number of package files
- increased by12.2%
92
- Lines of code
- increased by6.47%
16446
Worsened metrics
- Dev dependency count
- increased by5.56%
38
- Number of medium supply chain risk alerts
- increased by27.27%
28
No dependency changes