@manifoldco/component-plan-matrix
Advanced tools
Comparing version 0.0.9 to 0.0.10-test.0
@@ -5,7 +5,7 @@ 'use strict'; | ||
const core = require('./core-514f9636.js'); | ||
const core = require('./core-57642cb9.js'); | ||
const defineCustomElements = (win, options) => { | ||
return core.patchEsm().then(() => { | ||
core.bootstrapLazy([["manifold-button_10.cjs",[[0,"manifold-plan-matrix",{"productId":[1,"product-id"],"clientId":[1,"client-id"],"baseUrl":[1,"base-url"],"ctaText":[1,"cta-text"],"graphqlUrl":[1,"graphql-url"],"product":[32],"plans":[32],"labels":[32],"loading":[32]}],[0,"manifold-checkbox",{"inputId":[1,"input-id"],"name":[1],"checked":[4]}],[4,"manifold-button",{"href":[1]}],[0,"manifold-cost-tiers",{"minLimit":[2,"min-limit"],"maxLimit":[2,"max-limit"],"cost":[2],"unit":[1]}],[4,"manifold-metered"],[0,"manifold-numeric-input",{"min":[2],"max":[2],"increment":[2],"unit":[1]}],[0,"manifold-select",{"options":[16]}],[0,"manifold-thead",{"titleText":[1,"title-text"],"plan":[16],"loading":[32],"controller":[32],"cost":[32],"costCalls":[32]}],[0,"manifold-toggle",{"off":[2],"on":[2],"toggle":[32],"selected":[32]}],[0,"manifold-empty-cell"]]]], options); | ||
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); | ||
}); | ||
@@ -12,0 +12,0 @@ }; |
'use strict'; | ||
const core = require('./core-514f9636.js'); | ||
const core = require('./core-57642cb9.js'); | ||
core.patchBrowser().then(options => { | ||
return core.bootstrapLazy([["manifold-button_10.cjs",[[0,"manifold-plan-matrix",{"productId":[1,"product-id"],"clientId":[1,"client-id"],"baseUrl":[1,"base-url"],"ctaText":[1,"cta-text"],"graphqlUrl":[1,"graphql-url"],"product":[32],"plans":[32],"labels":[32],"loading":[32]}],[0,"manifold-checkbox",{"inputId":[1,"input-id"],"name":[1],"checked":[4]}],[4,"manifold-button",{"href":[1]}],[0,"manifold-cost-tiers",{"minLimit":[2,"min-limit"],"maxLimit":[2,"max-limit"],"cost":[2],"unit":[1]}],[4,"manifold-metered"],[0,"manifold-numeric-input",{"min":[2],"max":[2],"increment":[2],"unit":[1]}],[0,"manifold-select",{"options":[16]}],[0,"manifold-thead",{"titleText":[1,"title-text"],"plan":[16],"loading":[32],"controller":[32],"cost":[32],"costCalls":[32]}],[0,"manifold-toggle",{"off":[2],"on":[2],"toggle":[32],"selected":[32]}],[0,"manifold-empty-cell"]]]], 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); | ||
}); |
{ | ||
"entries": [ | ||
"components/manifold-button/manifold-button.js", | ||
"components/manifold-checkbox/manifold-checkbox.js", | ||
"components/manifold-cost-tiers/manifold-cost-tiers.js", | ||
"components/manifold-empty-cell/manifold-empty-cell.js", | ||
"components/manifold-metered/manifold-metered.js", | ||
"components/manifold-numeric-input/manifold-numeric-input.js", | ||
"components/manifold-select/manifold-select.js", | ||
"components/manifold-thead/manifold-thead.js", | ||
"components/manifold-toggle/manifold-toggle.js", | ||
"components/manifold-plan-matrix/manifold-plan-matrix.js" | ||
@@ -16,4 +7,4 @@ ], | ||
"name": "@stencil/core", | ||
"version": "1.8.9", | ||
"typescriptVersion": "3.7.5" | ||
"version": "1.8.11", | ||
"typescriptVersion": "3.8.2" | ||
}, | ||
@@ -20,0 +11,0 @@ "collections": [], |
import { h } from "@stencil/core"; | ||
import { PlanFeatureType, } from '../../types/graphql'; | ||
import { chevron_up_down } from '@manifoldco/icons'; | ||
import merge from 'deepmerge'; | ||
import { PlanFeatureType } from '../../types/graphql'; | ||
import { toUSD } from '../../utils/cost'; | ||
import { defaultFeatureValue, fetchPlanCost } from '../../utils/feature'; | ||
import { CLIENT_ID_WARNING } from './warning'; | ||
import FixedFeature from './fixed-feature'; | ||
import MeteredFeature from './metered-feature'; | ||
import PlanCost from './plan-cost'; | ||
import SkeletonLoader from './skeleton'; | ||
import query from './product.graphql'; | ||
import { CLIENT_ID_WARNING } from './warning'; | ||
// 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 | ||
@@ -15,6 +29,8 @@ this.clientId = ''; | ||
this.ctaText = 'Get Started'; | ||
// Graphql enpoint (TEMP) | ||
this.graphqlUrl = GRAPHQL_ENDPOINT; | ||
// Loading state | ||
this.loading = true; | ||
// Product features | ||
this.productFeatures = { fixed: {}, metered: {}, configurable: {} }; | ||
// Plan features | ||
this.planFeatures = {}; | ||
// User selection | ||
this.userSelection = {}; | ||
} | ||
@@ -35,168 +51,171 @@ refetchProduct(newVal) { | ||
} | ||
fetchProduct(productID) { | ||
const variables = { id: productID, first: 50 }; | ||
fetch(this.graphqlUrl || GRAPHQL_ENDPOINT, { | ||
async fetchProduct(productID) { | ||
const variables = { id: productID }; | ||
const res = await 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(res => { | ||
return res.json(); | ||
}) | ||
.then(({ data }) => { | ||
if (data.product) { | ||
this.product = data.product; | ||
this.createPlans(); | ||
body: JSON.stringify({ query, variables }), | ||
}).then(body => body.json()); | ||
const data = res.data; | ||
if (!data || !data.product) { | ||
return; | ||
} | ||
// save result to state | ||
this.product = data.product; | ||
// create map of all product features in fixed / metered / configurable order | ||
const fixed = data.product.fixedFeatures.edges.reduce((features, { node }) => (Object.assign(Object.assign({}, features), { [node.label]: node })), {}); | ||
const metered = data.product.meteredFeatures.edges.reduce((features, { node }) => (Object.assign(Object.assign({}, features), { [node.label]: node })), {}); | ||
const configurable = data.product.configurableFeatures.edges.reduce((features, { node }) => (Object.assign(Object.assign({}, features), { [node.label]: node })), {}); | ||
this.productFeatures = { fixed, metered, configurable }; | ||
// create map of plan costs, plan feature values, and default user selection | ||
const featureLabels = Object.keys(Object.assign(Object.assign(Object.assign({}, fixed), metered), configurable)); | ||
const planCosts = {}; | ||
const planFeatures = {}; | ||
const userSelection = {}; | ||
// iterate through plans to gather costs, features, and configurable feature defaults | ||
data.product.plans.edges.forEach(({ node: plan }) => { | ||
// add cost to map | ||
planCosts[plan.id] = plan.cost; | ||
// add features to map | ||
planFeatures[plan.id] = featureLabels.reduce((labels, label) => { | ||
const planHasFeature = [ | ||
...plan.fixedFeatures.edges, | ||
...plan.meteredFeatures.edges, | ||
...plan.configurableFeatures.edges, | ||
].find(({ node: feature }) => feature.label === label); | ||
return Object.assign(Object.assign({}, labels), { [label]: planHasFeature ? planHasFeature.node : undefined }); | ||
}, {}); | ||
// add configurable feature defaults | ||
if (plan.configurableFeatures.edges.length) { | ||
userSelection[plan.id] = plan.configurableFeatures.edges.reduce((features, { node: feature }) => (Object.assign(Object.assign({}, features), { [feature.label]: defaultFeatureValue(feature) })), {}); | ||
} | ||
}); | ||
this.planFeatures = planFeatures; | ||
this.planCosts = planCosts; | ||
this.userSelection = userSelection; | ||
this.fetchCosts(); // get initial plan costs, if any | ||
} | ||
createPlans() { | ||
var _a, _b, _c, _d, _e; | ||
if (this.product) { | ||
// Knarley set of reducers to generate a TabelRef object containing a label (DisplayName) and an index to populate the correct cell. | ||
const features = (_c = (_b = (_a = this) === null || _a === void 0 ? void 0 : _a.product) === null || _b === void 0 ? void 0 : _b.plans) === null || _c === void 0 ? void 0 : _c.edges.reduce((acc, { node }) => { | ||
var _a, _b, _c, _d, _e, _f; | ||
// Grab unique fixed | ||
const fixedFeatures = (_b = (_a = node) === null || _a === void 0 ? void 0 : _a.fixedFeatures) === null || _b === void 0 ? void 0 : _b.edges.reduce((fixedAccumulator, { node: n }) => { | ||
// Check if key exists | ||
if (fixedAccumulator[n.displayName]) { | ||
return fixedAccumulator; | ||
} | ||
// Add new key | ||
return Object.assign({ [n.label]: { | ||
tierLabel: n.displayName, | ||
} }, fixedAccumulator); | ||
}, {}); | ||
// Grab unique metered | ||
const meteredFeatures = (_d = (_c = node) === null || _c === void 0 ? void 0 : _c.meteredFeatures) === null || _d === void 0 ? void 0 : _d.edges.reduce((meteredAccumulator, { node: n }) => { | ||
// Check if key exists | ||
if (meteredAccumulator[n.label]) { | ||
return meteredAccumulator; | ||
} | ||
// Add new key | ||
return Object.assign({ [n.label]: { | ||
tierLabel: n.displayName, | ||
} }, meteredAccumulator); | ||
}, {}); | ||
const configurableFeatures = (_f = (_e = node) === null || _e === void 0 ? void 0 : _e.configurableFeatures) === null || _f === void 0 ? void 0 : _f.edges.reduce((fixedAccumulator, { node: n }) => { | ||
if (fixedAccumulator[n.displayName]) { | ||
return fixedAccumulator; | ||
} | ||
return Object.assign({ [n.label]: { | ||
tierLabel: n.displayName, | ||
} }, fixedAccumulator); | ||
}, {}); | ||
return Object.assign(Object.assign(Object.assign(Object.assign({}, fixedFeatures), meteredFeatures), configurableFeatures), acc); | ||
}, {}); | ||
this.labels = features || {}; | ||
this.plans = (_e = (_d = this.product) === null || _d === void 0 ? void 0 : _d.plans) === null || _e === void 0 ? void 0 : _e.edges; | ||
this.loading = false; | ||
} | ||
else { | ||
console.warn('There was a problem with the API'); | ||
} | ||
fetchCosts() { | ||
// this.userSelection should only contain configurable plans | ||
Object.entries(this.userSelection).forEach(([planID, selection]) => { | ||
const oldCost = this.planCosts[planID]; | ||
// animate plan cost calculation, but only if it’s taking a while (prevents flickering) | ||
let flickerStopper; | ||
flickerStopper = setTimeout(() => { | ||
const newCosts = merge(this.planCosts, {}); | ||
delete newCosts[planID]; | ||
this.planCosts = newCosts; | ||
flickerStopper = undefined; | ||
}, 150); | ||
// fetch plan cost for this configurable plan | ||
fetchPlanCost({ planID, selection, url: GATEWAY_ENDPOINT }).then(cost => { | ||
if (typeof cost === 'number') { | ||
clearTimeout(flickerStopper); | ||
this.planCosts = merge(this.planCosts, { [planID]: cost }); | ||
} | ||
else { | ||
console.error('Error retrieving cost'); | ||
this.planCosts = merge(this.planCosts, { [planID]: oldCost }); | ||
} | ||
}); | ||
}); | ||
} | ||
addClass(obj, baseClass = '') { | ||
const conditionalClasses = Object.keys(obj).map(cl => (obj[cl] ? cl : '')); | ||
return `${baseClass} ${conditionalClasses.join(' ')}`; | ||
setFeature({ planID, featureLabel, featureValue, }) { | ||
this.userSelection = merge(this.userSelection, { [planID]: { [featureLabel]: featureValue } }); | ||
this.fetchCosts(); | ||
} | ||
fixedFeatures(displayValue, planIndex) { | ||
if (displayValue === 'true' || displayValue === 'false') { | ||
return (h("div", { class: "mp--cell mp--cell__body" }, | ||
h("manifold-checkbox", { "input-id": `${planIndex}-${displayValue}`, name: displayValue, checked: displayValue === 'true' }))); | ||
} | ||
return h("div", { class: "mp--cell mp--cell__body" }, displayValue); | ||
} | ||
meteredFeatures(numericDetails) { | ||
if (numericDetails.costTiers.length === 0) { | ||
return (h("div", { class: "mp--cell mp--cell__body" }, | ||
h("manifold-empty-cell", null))); | ||
} | ||
return (h("div", { class: "mp--cell mp--cell__body mp--cell__block" }, | ||
h("manifold-metered", null, numericDetails.costTiers.map(({ limit, cost }, i) => { | ||
var _a; | ||
const previous = numericDetails.costTiers[i - 1]; | ||
const min = ((_a = previous) === null || _a === void 0 ? void 0 : _a.limit) ? previous.limit : 0; | ||
return (h("manifold-cost-tiers", { "min-limit": min, "max-limit": limit, cost: cost, unit: numericDetails.unit })); | ||
})))); | ||
} | ||
configurableFeatures(type, numericDetails, featureOptions) { | ||
var _a, _b, _c, _d; | ||
switch (type) { | ||
case PlanFeatureType.String: | ||
displayConfigurable({ planID, feature }) { | ||
switch (feature.type) { | ||
case PlanFeatureType.String: { | ||
return (h("div", { class: "mp--cell mp--cell__body" }, | ||
h("manifold-select", { options: featureOptions }))); | ||
case PlanFeatureType.Number: | ||
h("label", { class: "mp--select" }, | ||
h("select", { class: "mp--select__input", onChange: e => this.setFeature({ | ||
planID, | ||
featureLabel: feature.label, | ||
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" })))); | ||
} | ||
case PlanFeatureType.Number: { | ||
const { numericDetails: { max, min, increment, unit }, } = feature; | ||
const setFeature = (e) => this.setFeature({ | ||
planID, | ||
featureLabel: feature.label, | ||
featureValue: e.target.value, | ||
}); | ||
return (h("div", { class: "mp--cell mp--cell__body" }, | ||
h("manifold-numeric-input", { min: (_a = numericDetails) === null || _a === void 0 ? void 0 : _a.min, max: (_b = numericDetails) === null || _b === void 0 ? void 0 : _b.max, increment: (_c = numericDetails) === null || _c === void 0 ? void 0 : _c.increment, unit: (_d = numericDetails) === null || _d === void 0 ? void 0 : _d.unit }))); | ||
case PlanFeatureType.Boolean: | ||
if (Array.isArray(featureOptions)) { | ||
const [on, off] = featureOptions; | ||
return (h("div", { class: "mp--cell mp--cell__body" }, | ||
h("manifold-toggle", { on: on.cost, off: off.cost }))); | ||
} | ||
h("label", { class: "mp--numeric-range" }, | ||
h("input", { class: "mp--numeric-range__input", inputmode: "numeric", max: max, min: min, name: "numericRange", onChange: setFeature, onKeyUp: setFeature, pattern: "[0-9]*", step: increment, type: "number", value: this.userSelection[planID][feature.label] || min }), | ||
h("span", { class: "mp--numeric-range__desc" }, | ||
min, | ||
" \u2013 ", | ||
max, | ||
" ", | ||
unit)))); | ||
} | ||
case PlanFeatureType.Boolean: { | ||
return (h("div", { class: "mp--cell mp--cell__body" }, | ||
h("manifold-empty-cell", null))); | ||
h("label", { class: "mp--toggle" }, | ||
h("input", { class: "mp--toggle__input", type: "checkbox", onChange: e => { | ||
this.setFeature({ | ||
planID, | ||
featureLabel: feature.label, | ||
featureValue: e.target.checked, | ||
}); | ||
}, value: "on" }), | ||
h("div", { class: "mp--toggle__toggle" })))); | ||
} | ||
default: | ||
return (h("div", { class: "mp--cell mp--cell__body" }, | ||
h("manifold-empty-cell", null))); | ||
return null; | ||
} | ||
} | ||
render() { | ||
if (this.loading) { | ||
return h("div", null, "Loading..."); | ||
// 💀 Skeleton Loader | ||
if (!this.product) { | ||
return h(SkeletonLoader, null); | ||
} | ||
if (this.product && !this.product.plans) { | ||
return h("div", null, "error"); | ||
} | ||
const tierLabels = (this.labels && Object.values(this.labels).map((feature) => feature.tierLabel)) || | ||
[]; | ||
const gridColumns = this.plans.length + 1; | ||
const gridRows = tierLabels.length + 2; // +1 for the "Get Started" row | ||
// Pass column count into css grid | ||
this.el.style.setProperty('--manifold-table-columns', `${gridColumns}`); | ||
this.el.style.setProperty('--manifold-table-rows', `${gridRows}`); | ||
return (h("div", { class: "mp" }, | ||
h("div", { class: "mp--cell mp--cell__sticky mp--cell__bls mp--cell__al mp--cell__th mp--cell__thead mp--cell__bts mp--cell__rounded-tl" }), | ||
tierLabels.map(label => { | ||
return (h("div", { class: "mp--cell mp--cell__sticky mp--cell__bls mp--cell__al mp--cell__th" }, label)); | ||
}), | ||
h("div", { class: "mp--cell mp--cell__sticky mp--cell__bls mp--cell__bbs mp--cell__al mp--cell__th mp--cell__rounded-bl" }), | ||
this.plans | ||
.sort((a, b) => a.node.cost - b.node.cost) | ||
.map((plan, i) => [ | ||
h("div", { class: this.addClass({ | ||
'mp--cell__rounded-tr': i === gridColumns - 2, | ||
}, 'mp--cell mp--cell__bts mp--cell__thead mp--cell__thead mp--cell__th') }, | ||
h("manifold-thead", { "title-text": plan.node.displayName, plan: plan })), | ||
Object.keys(this.labels).map((label, ii) => { | ||
const fixedFeatureMatch = plan.node.fixedFeatures.edges.find(({ node: { label: l } }) => { | ||
return label === l; | ||
}); | ||
const meteredFeaturesMatch = plan.node.meteredFeatures.edges.find(({ node: { label: l } }) => { | ||
return label === l; | ||
}); | ||
const configurableFeaturesMatch = plan.node.configurableFeatures.edges.find(({ node: { label: l } }) => { | ||
return label === l; | ||
}); | ||
if (fixedFeatureMatch) { | ||
return this.fixedFeatures(fixedFeatureMatch.node.displayValue, ii); | ||
} | ||
if (meteredFeaturesMatch) { | ||
return this.meteredFeatures(meteredFeaturesMatch.node.numericDetails); | ||
} | ||
if (configurableFeaturesMatch) { | ||
return this.configurableFeatures(configurableFeaturesMatch.node.type, configurableFeaturesMatch.node.numericDetails, configurableFeaturesMatch.node.featureOptions); | ||
} | ||
return (h("div", { class: "mp--cell mp--cell__body" }, | ||
h("manifold-empty-cell", null))); | ||
}), | ||
h("div", { class: this.addClass({ | ||
'mp--cell__brs mp--cell__rounded-br': i === gridColumns - 2, | ||
}, 'mp--cell mp--cell__body mp--cell__bbs') }, | ||
h("manifold-button", { href: this.baseUrl }, this.ctaText)), | ||
]))); | ||
const gridColumns = 1 + this.product.plans.edges.length; // + 1 for features column | ||
const gridRows = 1 + | ||
Object.keys(Object.assign(Object.assign(Object.assign({}, this.productFeatures.fixed), this.productFeatures.metered), this.productFeatures.configurable)).length + | ||
1; // + 1 for headings + 1 for CTA row | ||
return (h("div", { class: "mp", style: { '--table-columns': `${gridColumns}`, '--table-rows': `${gridRows}` } }, | ||
h("div", { class: "mp--cell mp--cell__sticky mp--cell__bls mp--cell__al mp--cell__th mp--cell__thead mp--cell__bts", "data-column-first": true, "data-row-first": true }), | ||
Object.values(Object.assign(Object.assign(Object.assign({}, this.productFeatures.fixed), this.productFeatures.metered), this.productFeatures.configurable)).map(feature => (h("div", { class: "mp--cell mp--cell__sticky mp--cell__bls mp--cell__al mp--cell__th" }, feature.displayName))), | ||
h("div", { class: "mp--cell mp--cell__sticky mp--cell__bls mp--cell__bbs mp--cell__al mp--cell__th", "data-column-first": true, "data-row-last": true }), | ||
this.product.plans.edges.map(({ node: plan }, planIndex) => { | ||
const lastColumn = planIndex === gridColumns - 2 || undefined; | ||
return [ | ||
h("div", { class: "mp--cell mp--cell__bts mp--cell__thead mp--cell__thead mp--cell__th", "data-row-first": true, "data-column-last": lastColumn }, | ||
plan.displayName, | ||
h("p", { class: "mp--plan-cost" }, | ||
h(PlanCost, { cost: this.planCosts[plan.id], metered: plan.meteredFeatures.edges.length > 0 }))), | ||
Object.values(this.planFeatures[plan.id]).map(feature => { | ||
// fixed feature | ||
if (feature && this.productFeatures.fixed[feature.label]) { | ||
return h(FixedFeature, { displayValue: feature.displayValue }); | ||
} | ||
// metered feature | ||
if (feature && this.productFeatures.metered[feature.label]) { | ||
return h(MeteredFeature, { feature: feature }); | ||
} | ||
// configurable | ||
if (feature && this.productFeatures.configurable[feature.label]) { | ||
const configurableFeature = feature; | ||
return this.displayConfigurable({ planID: plan.id, feature: configurableFeature }); | ||
} | ||
// undefined / disabled feature | ||
return (h("div", { class: "mp--cell mp--cell__body" }, | ||
h("span", { class: "mp--empty-cell" }, "\u2022"))); | ||
}), | ||
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)), | ||
]; | ||
}))); | ||
} | ||
@@ -211,3 +230,3 @@ static get is() { return "manifold-plan-matrix"; } | ||
static get properties() { return { | ||
"productId": { | ||
"gatewayUrl": { | ||
"type": "string", | ||
@@ -226,6 +245,7 @@ "mutable": false, | ||
}, | ||
"attribute": "product-id", | ||
"reflect": false | ||
"attribute": "gateway-url", | ||
"reflect": false, | ||
"defaultValue": "GATEWAY_ENDPOINT" | ||
}, | ||
"clientId": { | ||
"graphqlUrl": { | ||
"type": "string", | ||
@@ -244,7 +264,7 @@ "mutable": false, | ||
}, | ||
"attribute": "client-id", | ||
"attribute": "graphql-url", | ||
"reflect": false, | ||
"defaultValue": "''" | ||
"defaultValue": "GRAPHQL_ENDPOINT" | ||
}, | ||
"baseUrl": { | ||
"productId": { | ||
"type": "string", | ||
@@ -263,7 +283,24 @@ "mutable": false, | ||
}, | ||
"attribute": "base-url", | ||
"attribute": "product-id", | ||
"reflect": false | ||
}, | ||
"clientId": { | ||
"type": "string", | ||
"mutable": false, | ||
"complexType": { | ||
"original": "string", | ||
"resolved": "string | undefined", | ||
"references": {} | ||
}, | ||
"required": false, | ||
"optional": true, | ||
"docs": { | ||
"tags": [], | ||
"text": "" | ||
}, | ||
"attribute": "client-id", | ||
"reflect": false, | ||
"defaultValue": "'/signup'" | ||
"defaultValue": "''" | ||
}, | ||
"ctaText": { | ||
"baseUrl": { | ||
"type": "string", | ||
@@ -282,7 +319,7 @@ "mutable": false, | ||
}, | ||
"attribute": "cta-text", | ||
"attribute": "base-url", | ||
"reflect": false, | ||
"defaultValue": "'Get Started'" | ||
"defaultValue": "'/signup'" | ||
}, | ||
"graphqlUrl": { | ||
"ctaText": { | ||
"type": "string", | ||
@@ -301,5 +338,5 @@ "mutable": false, | ||
}, | ||
"attribute": "graphql-url", | ||
"attribute": "cta-text", | ||
"reflect": false, | ||
"defaultValue": "GRAPHQL_ENDPOINT" | ||
"defaultValue": "'Get Started'" | ||
} | ||
@@ -309,7 +346,7 @@ }; } | ||
"product": {}, | ||
"plans": {}, | ||
"labels": {}, | ||
"loading": {} | ||
"productFeatures": {}, | ||
"planCosts": {}, | ||
"planFeatures": {}, | ||
"userSelection": {} | ||
}; } | ||
static get elementRef() { return "el"; } | ||
static get watchers() { return [{ | ||
@@ -316,0 +353,0 @@ "propName": "productId", |
@@ -95,2 +95,8 @@ export var CalculationType; | ||
})(ProductCredentialsSupportType || (ProductCredentialsSupportType = {})); | ||
export var ProductFeatureType; | ||
(function (ProductFeatureType) { | ||
ProductFeatureType["Boolean"] = "BOOLEAN"; | ||
ProductFeatureType["String"] = "STRING"; | ||
ProductFeatureType["Number"] = "NUMBER"; | ||
})(ProductFeatureType || (ProductFeatureType = {})); | ||
export var ProductFixedFeaturesOrderByField; | ||
@@ -97,0 +103,0 @@ (function (ProductFixedFeaturesOrderByField) { |
@@ -1,1 +0,1 @@ | ||
import{p as t,b as i}from"./p-64ddd5a4.js";t().then(t=>i([["p-oxeg9jen",[[0,"manifold-plan-matrix",{productId:[1,"product-id"],clientId:[1,"client-id"],baseUrl:[1,"base-url"],ctaText:[1,"cta-text"],graphqlUrl:[1,"graphql-url"],product:[32],plans:[32],labels:[32],loading:[32]}],[0,"manifold-checkbox",{inputId:[1,"input-id"],name:[1],checked:[4]}],[4,"manifold-button",{href:[1]}],[0,"manifold-cost-tiers",{minLimit:[2,"min-limit"],maxLimit:[2,"max-limit"],cost:[2],unit:[1]}],[4,"manifold-metered"],[0,"manifold-numeric-input",{min:[2],max:[2],increment:[2],unit:[1]}],[0,"manifold-select",{options:[16]}],[0,"manifold-thead",{titleText:[1,"title-text"],plan:[16],loading:[32],controller:[32],cost:[32],costCalls:[32]}],[0,"manifold-toggle",{off:[2],on:[2],toggle:[32],selected:[32]}],[0,"manifold-empty-cell"]]]],t)); | ||
import{p as a,b as t}from"./p-932bdcd6.js";a().then(a=>t([["p-mj7xszof",[[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)); |
@@ -10,30 +10,5 @@ /* eslint-disable */ | ||
import { HTMLStencilElement, JSXBase } from './stencil.core'; | ||
import { | ||
PlanConfigurableFeatureOption, | ||
ProductQuery, | ||
} from './types/graphql'; | ||
export namespace Components { | ||
interface ManifoldButton { | ||
'href'?: string; | ||
} | ||
interface ManifoldCheckbox { | ||
'checked'?: boolean; | ||
'inputId'?: string; | ||
'name'?: string; | ||
} | ||
interface ManifoldCostTiers { | ||
'cost'?: number; | ||
'maxLimit'?: number; | ||
'minLimit'?: number; | ||
'unit'?: string; | ||
} | ||
interface ManifoldEmptyCell {} | ||
interface ManifoldMetered {} | ||
interface ManifoldNumericInput { | ||
'increment'?: number; | ||
'max'?: number; | ||
'min'?: number; | ||
'unit'?: string; | ||
} | ||
interface ManifoldPlanMatrix { | ||
@@ -43,16 +18,6 @@ 'baseUrl'?: string; | ||
'ctaText'?: string; | ||
'gatewayUrl'?: string; | ||
'graphqlUrl'?: string; | ||
'productId'?: string; | ||
} | ||
interface ManifoldSelect { | ||
'options'?: PlanConfigurableFeatureOption[]; | ||
} | ||
interface ManifoldThead { | ||
'plan'?: ProductQuery['product']['plans']['edges'][0]; | ||
'titleText'?: string; | ||
} | ||
interface ManifoldToggle { | ||
'off': number; | ||
'on': number; | ||
} | ||
} | ||
@@ -63,38 +28,2 @@ | ||
interface HTMLManifoldButtonElement extends Components.ManifoldButton, HTMLStencilElement {} | ||
var HTMLManifoldButtonElement: { | ||
prototype: HTMLManifoldButtonElement; | ||
new (): HTMLManifoldButtonElement; | ||
}; | ||
interface HTMLManifoldCheckboxElement extends Components.ManifoldCheckbox, HTMLStencilElement {} | ||
var HTMLManifoldCheckboxElement: { | ||
prototype: HTMLManifoldCheckboxElement; | ||
new (): HTMLManifoldCheckboxElement; | ||
}; | ||
interface HTMLManifoldCostTiersElement extends Components.ManifoldCostTiers, HTMLStencilElement {} | ||
var HTMLManifoldCostTiersElement: { | ||
prototype: HTMLManifoldCostTiersElement; | ||
new (): HTMLManifoldCostTiersElement; | ||
}; | ||
interface HTMLManifoldEmptyCellElement extends Components.ManifoldEmptyCell, HTMLStencilElement {} | ||
var HTMLManifoldEmptyCellElement: { | ||
prototype: HTMLManifoldEmptyCellElement; | ||
new (): HTMLManifoldEmptyCellElement; | ||
}; | ||
interface HTMLManifoldMeteredElement extends Components.ManifoldMetered, HTMLStencilElement {} | ||
var HTMLManifoldMeteredElement: { | ||
prototype: HTMLManifoldMeteredElement; | ||
new (): HTMLManifoldMeteredElement; | ||
}; | ||
interface HTMLManifoldNumericInputElement extends Components.ManifoldNumericInput, HTMLStencilElement {} | ||
var HTMLManifoldNumericInputElement: { | ||
prototype: HTMLManifoldNumericInputElement; | ||
new (): HTMLManifoldNumericInputElement; | ||
}; | ||
interface HTMLManifoldPlanMatrixElement extends Components.ManifoldPlanMatrix, HTMLStencilElement {} | ||
@@ -105,31 +34,4 @@ var HTMLManifoldPlanMatrixElement: { | ||
}; | ||
interface HTMLManifoldSelectElement extends Components.ManifoldSelect, HTMLStencilElement {} | ||
var HTMLManifoldSelectElement: { | ||
prototype: HTMLManifoldSelectElement; | ||
new (): HTMLManifoldSelectElement; | ||
}; | ||
interface HTMLManifoldTheadElement extends Components.ManifoldThead, HTMLStencilElement {} | ||
var HTMLManifoldTheadElement: { | ||
prototype: HTMLManifoldTheadElement; | ||
new (): HTMLManifoldTheadElement; | ||
}; | ||
interface HTMLManifoldToggleElement extends Components.ManifoldToggle, HTMLStencilElement {} | ||
var HTMLManifoldToggleElement: { | ||
prototype: HTMLManifoldToggleElement; | ||
new (): HTMLManifoldToggleElement; | ||
}; | ||
interface HTMLElementTagNameMap { | ||
'manifold-button': HTMLManifoldButtonElement; | ||
'manifold-checkbox': HTMLManifoldCheckboxElement; | ||
'manifold-cost-tiers': HTMLManifoldCostTiersElement; | ||
'manifold-empty-cell': HTMLManifoldEmptyCellElement; | ||
'manifold-metered': HTMLManifoldMeteredElement; | ||
'manifold-numeric-input': HTMLManifoldNumericInputElement; | ||
'manifold-plan-matrix': HTMLManifoldPlanMatrixElement; | ||
'manifold-select': HTMLManifoldSelectElement; | ||
'manifold-thead': HTMLManifoldTheadElement; | ||
'manifold-toggle': HTMLManifoldToggleElement; | ||
} | ||
@@ -139,24 +41,2 @@ } | ||
declare namespace LocalJSX { | ||
interface ManifoldButton { | ||
'href'?: string; | ||
} | ||
interface ManifoldCheckbox { | ||
'checked'?: boolean; | ||
'inputId'?: string; | ||
'name'?: string; | ||
} | ||
interface ManifoldCostTiers { | ||
'cost'?: number; | ||
'maxLimit'?: number; | ||
'minLimit'?: number; | ||
'unit'?: string; | ||
} | ||
interface ManifoldEmptyCell {} | ||
interface ManifoldMetered {} | ||
interface ManifoldNumericInput { | ||
'increment'?: number; | ||
'max'?: number; | ||
'min'?: number; | ||
'unit'?: string; | ||
} | ||
interface ManifoldPlanMatrix { | ||
@@ -166,28 +46,9 @@ 'baseUrl'?: string; | ||
'ctaText'?: string; | ||
'gatewayUrl'?: string; | ||
'graphqlUrl'?: string; | ||
'productId'?: string; | ||
} | ||
interface ManifoldSelect { | ||
'options'?: PlanConfigurableFeatureOption[]; | ||
} | ||
interface ManifoldThead { | ||
'plan'?: ProductQuery['product']['plans']['edges'][0]; | ||
'titleText'?: string; | ||
} | ||
interface ManifoldToggle { | ||
'off'?: number; | ||
'on'?: number; | ||
} | ||
interface IntrinsicElements { | ||
'manifold-button': ManifoldButton; | ||
'manifold-checkbox': ManifoldCheckbox; | ||
'manifold-cost-tiers': ManifoldCostTiers; | ||
'manifold-empty-cell': ManifoldEmptyCell; | ||
'manifold-metered': ManifoldMetered; | ||
'manifold-numeric-input': ManifoldNumericInput; | ||
'manifold-plan-matrix': ManifoldPlanMatrix; | ||
'manifold-select': ManifoldSelect; | ||
'manifold-thead': ManifoldThead; | ||
'manifold-toggle': ManifoldToggle; | ||
} | ||
@@ -202,12 +63,3 @@ } | ||
interface IntrinsicElements { | ||
'manifold-button': LocalJSX.ManifoldButton & JSXBase.HTMLAttributes<HTMLManifoldButtonElement>; | ||
'manifold-checkbox': LocalJSX.ManifoldCheckbox & JSXBase.HTMLAttributes<HTMLManifoldCheckboxElement>; | ||
'manifold-cost-tiers': LocalJSX.ManifoldCostTiers & JSXBase.HTMLAttributes<HTMLManifoldCostTiersElement>; | ||
'manifold-empty-cell': LocalJSX.ManifoldEmptyCell & JSXBase.HTMLAttributes<HTMLManifoldEmptyCellElement>; | ||
'manifold-metered': LocalJSX.ManifoldMetered & JSXBase.HTMLAttributes<HTMLManifoldMeteredElement>; | ||
'manifold-numeric-input': LocalJSX.ManifoldNumericInput & JSXBase.HTMLAttributes<HTMLManifoldNumericInputElement>; | ||
'manifold-plan-matrix': LocalJSX.ManifoldPlanMatrix & JSXBase.HTMLAttributes<HTMLManifoldPlanMatrixElement>; | ||
'manifold-select': LocalJSX.ManifoldSelect & JSXBase.HTMLAttributes<HTMLManifoldSelectElement>; | ||
'manifold-thead': LocalJSX.ManifoldThead & JSXBase.HTMLAttributes<HTMLManifoldTheadElement>; | ||
'manifold-toggle': LocalJSX.ManifoldToggle & JSXBase.HTMLAttributes<HTMLManifoldToggleElement>; | ||
} | ||
@@ -214,0 +66,0 @@ } |
@@ -1,14 +0,34 @@ | ||
import { ProductQuery, PlanFeatureType, PlanConfigurableFeatureOption, PlanConfigurableFeatureNumericDetails, PlanFixedFeature } from '../../types/graphql'; | ||
declare type ConditionalClassesObj = { | ||
[name: string]: boolean; | ||
}; | ||
declare type tierLabel = { | ||
tierLabel: string; | ||
}; | ||
declare type TableRef = { | ||
[key: string]: tierLabel; | ||
}; | ||
declare type NumericDetails = ProductQuery['product']['plans']['edges'][0]['node']['meteredFeatures']['edges'][0]['node']['numericDetails']; | ||
import { ProductQuery } from '../../types/graphql'; | ||
declare type ProductFixed = ProductQuery['product']['fixedFeatures']['edges'][0]['node']; | ||
declare type ProductMetered = ProductQuery['product']['meteredFeatures']['edges'][0]['node']; | ||
declare type ProductConfigurable = ProductQuery['product']['configurableFeatures']['edges'][0]['node']; | ||
interface ProductFeatures { | ||
fixed: { | ||
[label: string]: ProductFixed; | ||
}; | ||
metered: { | ||
[label: string]: ProductMetered; | ||
}; | ||
configurable: { | ||
[label: string]: ProductConfigurable; | ||
}; | ||
} | ||
declare type ProductPlan = ProductQuery['product']['plans']['edges'][0]['node']; | ||
declare type PlanFixedFeature = ProductPlan['fixedFeatures']['edges'][0]['node']; | ||
declare type PlanMeteredFeature = ProductPlan['meteredFeatures']['edges'][0]['node']; | ||
declare type PlanConfigurableFeature = ProductPlan['configurableFeatures']['edges'][0]['node']; | ||
interface PlanFeatures { | ||
[planID: string]: { | ||
[featureLabel: string]: PlanFixedFeature | PlanMeteredFeature | PlanConfigurableFeature | undefined; | ||
}; | ||
} | ||
declare type UserValue = string | number | boolean; | ||
interface UserSelection { | ||
[planID: string]: { | ||
[featureLabel: string]: UserValue; | ||
}; | ||
} | ||
export declare class ManifoldPricing { | ||
el: HTMLElement; | ||
gatewayUrl?: string; | ||
graphqlUrl?: string; | ||
productId?: string; | ||
@@ -18,17 +38,24 @@ clientId?: string; | ||
ctaText?: string; | ||
graphqlUrl?: string; | ||
product?: ProductQuery['product']; | ||
plans: ProductQuery['product']['plans']['edges']; | ||
labels: TableRef; | ||
loading: boolean; | ||
productFeatures: ProductFeatures; | ||
planCosts: { | ||
[planID: string]: number; | ||
}; | ||
planFeatures: PlanFeatures; | ||
userSelection: UserSelection; | ||
refetchProduct(newVal?: string): void; | ||
componentWillLoad(): void; | ||
fetchProduct(productID: string): void; | ||
createPlans(): void; | ||
addClass(obj: ConditionalClassesObj, baseClass?: string): string; | ||
fixedFeatures(displayValue: PlanFixedFeature['displayName'], planIndex: number): any; | ||
meteredFeatures(numericDetails: NumericDetails): any; | ||
configurableFeatures(type: PlanFeatureType, numericDetails?: PlanConfigurableFeatureNumericDetails, featureOptions?: PlanConfigurableFeatureOption[]): any; | ||
fetchProduct(productID: string): Promise<void>; | ||
fetchCosts(): void; | ||
setFeature({ planID, featureLabel, featureValue, }: { | ||
planID: string; | ||
featureLabel: string; | ||
featureValue: UserValue; | ||
}): void; | ||
displayConfigurable({ planID, feature }: { | ||
planID: string; | ||
feature: PlanConfigurableFeature; | ||
}): any; | ||
render(): any; | ||
} | ||
export {}; |
@@ -496,3 +496,6 @@ /** | ||
accept?: string; | ||
allowdirs?: boolean; | ||
alt?: string; | ||
autoCapitalize?: string; | ||
autocapitalize?: string; | ||
autoComplete?: string; | ||
@@ -506,3 +509,7 @@ autocomplete?: string; | ||
crossorigin?: string; | ||
defaultChecked?: boolean; | ||
defaultValue?: string; | ||
dirName?: string; | ||
disabled?: boolean; | ||
files?: any; | ||
form?: string; | ||
@@ -520,2 +527,4 @@ formAction?: string; | ||
height?: number | string; | ||
indeterminate?: boolean; | ||
inputmode?: string; | ||
list?: string; | ||
@@ -535,2 +544,5 @@ max?: number | string; | ||
required?: boolean; | ||
selectionStart?: number | string; | ||
selectionEnd?: number | string; | ||
selectionDirection?: string; | ||
size?: number; | ||
@@ -541,2 +553,6 @@ src?: string; | ||
value?: string | string[] | number; | ||
valueAsDate?: any; | ||
valueAsNumber?: any; | ||
webkitdirectory?: boolean; | ||
webkitEntries?: any; | ||
width?: number | string; | ||
@@ -543,0 +559,0 @@ } |
@@ -495,2 +495,3 @@ export declare type Maybe<T> = T; | ||
displayName: Scalars['String']; | ||
type: ProductFeatureType; | ||
featureOptions?: Maybe<Array<ProductConfigurableFeatureOption>>; | ||
@@ -501,2 +502,3 @@ }; | ||
displayName: Scalars['String']; | ||
type: ProductFeatureType; | ||
}; | ||
@@ -560,2 +562,7 @@ export declare type ProductConfigurableFeatureConnection = { | ||
}; | ||
export declare enum ProductFeatureType { | ||
Boolean = "BOOLEAN", | ||
String = "STRING", | ||
Number = "NUMBER" | ||
} | ||
export declare type ProductFixedFeature = Node & { | ||
@@ -636,2 +643,3 @@ __typename?: 'ProductFixedFeature'; | ||
displayName: Scalars['String']; | ||
type: ProductFeatureType; | ||
numericOptions?: Maybe<Array<ProductConfigurableFeatureNumericOptions>>; | ||
@@ -667,2 +675,3 @@ }; | ||
displayName: Scalars['String']; | ||
type: ProductFeatureType; | ||
featureOptions?: Maybe<Array<ProductConfigurableFeatureOption>>; | ||
@@ -958,3 +967,2 @@ }; | ||
export declare type ProductQueryVariables = { | ||
first: Scalars['Int']; | ||
id: Scalars['ID']; | ||
@@ -967,3 +975,76 @@ }; | ||
__typename?: 'Product'; | ||
} & { | ||
} & Pick<Product, 'id' | 'displayName'> & { | ||
fixedFeatures: Maybe<({ | ||
__typename?: 'ProductFixedFeatureConnection'; | ||
} & { | ||
edges: Array<({ | ||
__typename?: 'ProductFixedFeatureEdge'; | ||
} & { | ||
node: ({ | ||
__typename?: 'ProductFixedFeature'; | ||
} & Pick<ProductFixedFeature, 'label' | 'displayName'> & { | ||
featureOptions: Maybe<Array<({ | ||
__typename?: 'ProductFixedFeatureOption'; | ||
} & Pick<ProductFixedFeatureOption, 'value' | 'displayName'>)>>; | ||
}); | ||
})>; | ||
})>; | ||
meteredFeatures: Maybe<({ | ||
__typename?: 'ProductMeteredFeatureConnection'; | ||
} & { | ||
edges: Array<({ | ||
__typename?: 'ProductMeteredFeatureEdge'; | ||
} & { | ||
node: ({ | ||
__typename?: 'ProductMeteredFeature'; | ||
} & Pick<ProductMeteredFeature, 'label' | 'displayName'> & { | ||
numericOptions: Maybe<Array<({ | ||
__typename?: 'ProductMeteredFeatureNumericOptions'; | ||
} & Pick<ProductMeteredFeatureNumericOptions, 'label' | 'displayName'> & { | ||
numericDetails: ({ | ||
__typename?: 'ProductMeteredFeatureNumericDetails'; | ||
} & Pick<ProductMeteredFeatureNumericDetails, 'unit'> & { | ||
costTiers: Array<({ | ||
__typename?: 'ProductFeatureCostTier'; | ||
} & Pick<ProductFeatureCostTier, 'cost' | 'limit'>)>; | ||
}); | ||
})>>; | ||
}); | ||
})>; | ||
})>; | ||
configurableFeatures: Maybe<({ | ||
__typename?: 'ProductConfigurableFeatureConnection'; | ||
} & { | ||
edges: Array<({ | ||
__typename?: 'ProductConfigurableFeatureEdge'; | ||
} & { | ||
node: ({ | ||
__typename?: 'ProductNumberConfigurableFeature'; | ||
} & Pick<ProductNumberConfigurableFeature, 'label' | 'displayName'> & { | ||
numericOptions: Maybe<Array<({ | ||
__typename?: 'ProductConfigurableFeatureNumericOptions'; | ||
} & Pick<ProductConfigurableFeatureNumericOptions, 'label' | 'displayName'> & { | ||
numericDetails: ({ | ||
__typename?: 'ProductConfigurableFeatureNumericDetails'; | ||
} & Pick<ProductConfigurableFeatureNumericDetails, 'increment' | 'max' | 'min' | 'unit'> & { | ||
costTiers: Array<({ | ||
__typename?: 'ProductFeatureCostTier'; | ||
} & Pick<ProductFeatureCostTier, 'cost' | 'limit'>)>; | ||
}); | ||
})>>; | ||
}) | ({ | ||
__typename?: 'ProductStringConfigurableFeature'; | ||
} & Pick<ProductStringConfigurableFeature, 'label' | 'displayName'> & { | ||
featureOptions: Maybe<Array<({ | ||
__typename?: 'ProductConfigurableFeatureOption'; | ||
} & Pick<ProductConfigurableFeatureOption, 'cost' | 'displayName' | 'value'>)>>; | ||
}) | ({ | ||
__typename?: 'ProductBooleanConfigurableFeature'; | ||
} & Pick<ProductBooleanConfigurableFeature, 'label' | 'displayName'> & { | ||
featureOptions: Maybe<Array<({ | ||
__typename?: 'ProductConfigurableFeatureOption'; | ||
} & Pick<ProductConfigurableFeatureOption, 'cost' | 'displayName' | 'value'>)>>; | ||
}); | ||
})>; | ||
})>; | ||
plans: Maybe<({ | ||
@@ -977,3 +1058,3 @@ __typename?: 'PlanConnection'; | ||
__typename?: 'Plan'; | ||
} & Pick<Plan, 'displayName' | 'cost' | 'id'> & { | ||
} & Pick<Plan, 'cost' | 'displayName' | 'id'> & { | ||
fixedFeatures: Maybe<({ | ||
@@ -1004,3 +1085,3 @@ __typename?: 'PlanFixedFeatureConnection'; | ||
__typename?: 'PlanFeatureCostTier'; | ||
} & Pick<PlanFeatureCostTier, 'limit' | 'cost'>)>>; | ||
} & Pick<PlanFeatureCostTier, 'cost' | 'limit'>)>>; | ||
}); | ||
@@ -1007,0 +1088,0 @@ }); |
{ | ||
"name": "@manifoldco/component-plan-matrix", | ||
"version": "0.0.9", | ||
"version": "0.0.10-test.0", | ||
"private": false, | ||
@@ -23,2 +23,3 @@ "description": "Stencil Component Starter", | ||
"dev": "npm run build:watch & rm -rf dist loader && wait-on loader/index.cjs.js && npm run storybook", | ||
"happo": "npm run build && npm run generate:gql && happo run", | ||
"generate": "stencil generate", | ||
@@ -29,12 +30,10 @@ "generate:gql": "graphql-codegen --config codegen.yml", | ||
"lint:js": "eslint --ext .js,.ts,.tsx src", | ||
"prepare": "node scripts/version-from-git", | ||
"prepublishOnly": "npm run build", | ||
"postinstall": "node scripts/version-from-git", | ||
"start": "stencil build --dev --watch --serve", | ||
"storybook": "start-storybook -p 6006", | ||
"test": "stencil test --spec", | ||
"test:watch": "stencil test --spec --watchAll" | ||
"test:watch": "stencil test --spec --watchAll", | ||
"typecheck": "npm run generate:gql && tsc --noEmit" | ||
}, | ||
"dependencies": { | ||
"@manifoldco/icons": "0.0.6" | ||
}, | ||
"dependencies": {}, | ||
"devDependencies": { | ||
@@ -45,2 +44,3 @@ "@graphql-codegen/cli": "^1.12.2", | ||
"@manifoldco/eslint-plugin-stencil": "^0.4.1", | ||
"@manifoldco/icons": "0.0.6", | ||
"@stencil/core": "^1.8.9", | ||
@@ -52,6 +52,7 @@ "@stencil/postcss": "^1.0.1", | ||
"@storybook/html": "^5.3.13", | ||
"@types/jest": "24.0.25", | ||
"@types/jest": "25.1.3", | ||
"@typescript-eslint/eslint-plugin": "^2.20.0", | ||
"@typescript-eslint/parser": "^2.20.0", | ||
"babel-loader": "^8.0.6", | ||
"deepmerge": "^4.2.2", | ||
"eslint": "^6.8.0", | ||
@@ -64,4 +65,6 @@ "eslint-config-airbnb-base": "^14.0.0", | ||
"graphql": "^14.6.0", | ||
"jest": "24.9.0", | ||
"jest-cli": "24.9.0", | ||
"happo-plugin-typescript": "^1.0.0", | ||
"happo.io": "^5.1.5", | ||
"jest": "25.1.0", | ||
"jest-cli": "25.1.0", | ||
"postcss-preset-env": "^6.7.0", | ||
@@ -72,6 +75,7 @@ "prettier": "^1.19.1", | ||
"stylelint-config-prettier": "^8.0.1", | ||
"stylelint-config-rational-order": "^0.1.2", | ||
"stylelint-config-standard": "^19.0.0", | ||
"stylelint-order": "^4.0.0", | ||
"ts-loader": "^6.2.1", | ||
"wait-on": "^4.0.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 not supported yet
Sorry, the diff of this file is too big to display
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
Install scripts
Supply chain riskInstall scripts are run when the package is installed. The majority of malware in npm is hidden in install scripts.
Found 1 instance in 1 package
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
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
Deprecated
MaintenanceThe maintainer of the package marked it as deprecated. This could indicate that a single version should not be used, or that the package is no longer maintained and any new vulnerabilities will not be fixed.
Found 1 instance in 1 package
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
0
0
9
995400
36
82
15446
1
- Removed@manifoldco/icons@0.0.6
- Removed@manifoldco/icons@0.0.6(transitive)