@manifoldco/manifold-subscription
Advanced tools
Comparing version 0.0.5 to 0.0.6
@@ -8,5 +8,5 @@ 'use strict'; | ||
const defineCustomElements = (win, options) => index.patchEsm().then(() => { | ||
return index.bootstrapLazy([["manifold-configured-feature_2.cjs",[[0,"manifold-configured-feature",{"label":[1],"value":[8]}],[0,"manifold-subscription-create",{"loading":[1028],"isLoadingPlanSelector":[1028,"is-loading-plan-selector"],"errors":[1040],"data":[1040],"planListData":[1040],"setupIntentStatus":[1025,"setup-intent-status"],"setupIntentError":[1025,"setup-intent-error"],"subscribing":[1028],"configuredFeatures":[1040],"calculatedCost":[1026,"calculated-cost"],"heading":[1],"planId":[1025,"plan-id"],"isEditing":[1028,"is-editing"],"displayName":[1,"display-name"],"label":[1],"card":[32]},[[0,"manifold-configured-feature-change","updateConfiguredFeature"]]]]]], options); | ||
return index.bootstrapLazy([["manifold-configured-feature_3.cjs",[[0,"manifold-configured-feature",{"label":[1],"value":[8]}],[0,"manifold-subscription-create",{"loading":[1028],"isLoadingPlanSelector":[1028,"is-loading-plan-selector"],"errors":[1040],"data":[1040],"planListData":[1040],"setupIntentStatus":[1025,"setup-intent-status"],"setupIntentError":[1025,"setup-intent-error"],"subscribing":[1028],"configuredFeatures":[1040],"calculatedCost":[1026,"calculated-cost"],"heading":[1],"planId":[1025,"plan-id"],"stripePublishableKey":[1,"stripe-publishable-key"],"isEditing":[1028,"is-editing"],"displayName":[1,"display-name"],"label":[1],"card":[32]},[[0,"manifold-configured-feature-change","updateConfiguredFeature"]]],[0,"manifold-subscription-list",{"connection":[1040],"loading":[1028],"errors":[1040],"data":[1040],"heading":[1],"owner":[1]}]]]], options); | ||
}); | ||
exports.defineCustomElements = defineCustomElements; |
@@ -6,3 +6,3 @@ 'use strict'; | ||
index.patchBrowser().then(options => { | ||
return index.bootstrapLazy([["manifold-configured-feature_2.cjs",[[0,"manifold-configured-feature",{"label":[1],"value":[8]}],[0,"manifold-subscription-create",{"loading":[1028],"isLoadingPlanSelector":[1028,"is-loading-plan-selector"],"errors":[1040],"data":[1040],"planListData":[1040],"setupIntentStatus":[1025,"setup-intent-status"],"setupIntentError":[1025,"setup-intent-error"],"subscribing":[1028],"configuredFeatures":[1040],"calculatedCost":[1026,"calculated-cost"],"heading":[1],"planId":[1025,"plan-id"],"isEditing":[1028,"is-editing"],"displayName":[1,"display-name"],"label":[1],"card":[32]},[[0,"manifold-configured-feature-change","updateConfiguredFeature"]]]]]], options); | ||
return index.bootstrapLazy([["manifold-configured-feature_3.cjs",[[0,"manifold-configured-feature",{"label":[1],"value":[8]}],[0,"manifold-subscription-create",{"loading":[1028],"isLoadingPlanSelector":[1028,"is-loading-plan-selector"],"errors":[1040],"data":[1040],"planListData":[1040],"setupIntentStatus":[1025,"setup-intent-status"],"setupIntentError":[1025,"setup-intent-error"],"subscribing":[1028],"configuredFeatures":[1040],"calculatedCost":[1026,"calculated-cost"],"heading":[1],"planId":[1025,"plan-id"],"stripePublishableKey":[1,"stripe-publishable-key"],"isEditing":[1028,"is-editing"],"displayName":[1,"display-name"],"label":[1],"card":[32]},[[0,"manifold-configured-feature-change","updateConfiguredFeature"]]],[0,"manifold-subscription-list",{"connection":[1040],"loading":[1028],"errors":[1040],"data":[1040],"heading":[1],"owner":[1]}]]]], options); | ||
}); |
{ | ||
"entries": [ | ||
"./components/manifold-configured-feature/manifold-configured-feature.js", | ||
"./components/manifold-subscription-create/manifold-subscription-create.js" | ||
"./components/manifold-subscription-create/manifold-subscription-create.js", | ||
"./components/manifold-subscription-list/manifold-subscription-list.js" | ||
], | ||
@@ -6,0 +7,0 @@ "compiler": { |
@@ -1,2 +0,2 @@ | ||
import { Component, Element, Prop, h, Watch, State, Listen } from '@stencil/core'; | ||
import { Component, Element, Prop, h, Watch, State, Listen, Event, } from '@stencil/core'; | ||
import { loadStripe } from '@stripe/stripe-js'; | ||
@@ -8,2 +8,3 @@ import PlanSelector from './components/PlanSelector'; | ||
import planListQuery from './plan-list.graphql'; | ||
import createSubscrptionMutation from './create-subscription.graphql'; | ||
// TODO add all these to the component API | ||
@@ -39,14 +40,30 @@ // $planId: ID! (done) | ||
}); | ||
this.subscribing = false; | ||
if (error) { | ||
this.subscribing = false; | ||
this.setupIntentError = error.message; | ||
return; | ||
} | ||
else { | ||
this.setupIntentStatus = setupIntent === null || setupIntent === void 0 ? void 0 : setupIntent.status; | ||
if ((setupIntent === null || setupIntent === void 0 ? void 0 : setupIntent.status) === 'succeeded') { | ||
// TODO run createSubscription() query | ||
// eslint-disable-next-line no-console | ||
console.log(this.configuredFeatures); | ||
this.setupIntentStatus = setupIntent === null || setupIntent === void 0 ? void 0 : setupIntent.status; | ||
if ((setupIntent === null || setupIntent === void 0 ? void 0 : setupIntent.status) === 'succeeded' && this.connection) { | ||
const configuredFeatures = Object.keys(this.configuredFeatures).map(key => ({ | ||
label: key, | ||
value: `${this.configuredFeatures[key]}`, | ||
})); | ||
const variables = { | ||
ownerId: undefined, | ||
planId: this.planId, | ||
configuredFeatures, | ||
}; | ||
const { data, errors } = await this.connection.graphqlFetch({ | ||
query: createSubscrptionMutation, | ||
variables, | ||
}); | ||
if (errors) { | ||
// TODO handle errors | ||
} | ||
if (data) { | ||
this.createSuccess.emit({ id: data.createSubscription.data.id }); | ||
} | ||
} | ||
this.subscribing = false; | ||
} | ||
@@ -95,3 +112,5 @@ }; | ||
// Initialize Stripe | ||
this.stripe = await loadStripe(data.profile.stripeAccountID || 'pk_test_TYooMQauvdEDq54NiTphI7jx'); | ||
this.stripe = await loadStripe(this.stripePublishableKey, { | ||
stripeAccount: data.profile.stripeAccount.id, | ||
}); | ||
if (!this.stripe) { | ||
@@ -167,3 +186,3 @@ // TODO handle stripe error | ||
render() { | ||
var _a; | ||
var _a, _b; | ||
return (h("div", { class: "ManifoldSubscriptionCreate" }, | ||
@@ -187,5 +206,4 @@ this.heading && h("h1", { class: "ManifoldSubscriptionCreate__Heading" }, this.heading), | ||
h("button", { class: "ManifoldSubscriptionCreate__Button", type: "submit", disabled: this.subscribing }, this.subscribing ? 'Subscribing...' : 'Subscribe with Card'), | ||
h("p", { class: "ManifoldSubscriptionCreate__HelpText", "data-centered": true }, "We charge for plan cost + usage at end of month"), | ||
this.setupIntentStatus === 'succeeded' && (h(Message, { type: "success" }, "You've been subscribed!")), | ||
this.setupIntentError && h(Message, { type: "error" }, this.setupIntentError)))); | ||
h("p", { class: "ManifoldSubscriptionCreate__HelpText", "data-centered": true }, "We charge for plan cost + usage at end of month"), (_b = this.errors) === null || _b === void 0 ? void 0 : | ||
_b.map(error => (h(Message, { type: "error" }, error.message)))))); | ||
} | ||
@@ -255,3 +273,3 @@ static get is() { return "manifold-subscription-create"; } | ||
"original": "PlanQuery", | ||
"resolved": "undefined | { __typename?: \"Query\" | undefined; } & { plan: { __typename?: \"Plan\" | undefined; } & Pick<Plan, \"displayName\" | \"cost\"> & { product: { __typename?: \"Product\" | undefined; } & Pick<Product, \"label\">; }; profile: { __typename?: \"Profile\" | undefined; } & Pick<Profile, \"stripeSetupIntentSecret\" | \"stripeAccountID\">; }", | ||
"resolved": "undefined | { __typename?: \"Query\" | undefined; } & { plan: { __typename?: \"Plan\" | undefined; } & Pick<Plan, \"displayName\" | \"cost\"> & { product: { __typename?: \"Product\" | undefined; } & Pick<Product, \"label\">; }; profile: { __typename?: \"Profile\" | undefined; } & Pick<Profile, \"id\" | \"stripeSetupIntentSecret\"> & { stripeAccount: { __typename?: \"StripeAccount\" | undefined; } & Pick<StripeAccount, \"id\">; }; }", | ||
"references": { | ||
@@ -420,2 +438,19 @@ "PlanQuery": { | ||
}, | ||
"stripePublishableKey": { | ||
"type": "string", | ||
"mutable": false, | ||
"complexType": { | ||
"original": "string", | ||
"resolved": "string", | ||
"references": {} | ||
}, | ||
"required": false, | ||
"optional": false, | ||
"docs": { | ||
"tags": [], | ||
"text": "" | ||
}, | ||
"attribute": "stripe-publishable-key", | ||
"reflect": false | ||
}, | ||
"isEditing": { | ||
@@ -477,2 +512,18 @@ "type": "boolean", | ||
}; } | ||
static get events() { return [{ | ||
"method": "createSuccess", | ||
"name": "success", | ||
"bubbles": true, | ||
"cancelable": true, | ||
"composed": true, | ||
"docs": { | ||
"tags": [], | ||
"text": "" | ||
}, | ||
"complexType": { | ||
"original": "{ id: string }", | ||
"resolved": "{ id: string; }", | ||
"references": {} | ||
} | ||
}]; } | ||
static get elementRef() { return "el"; } | ||
@@ -479,0 +530,0 @@ static get watchers() { return [{ |
@@ -1,1 +0,1 @@ | ||
import{p as a,b as e}from"./p-21a2f7c2.js";a().then(a=>e([["p-8248df2a",[[0,"manifold-configured-feature",{label:[1],value:[8]}],[0,"manifold-subscription-create",{loading:[1028],isLoadingPlanSelector:[1028,"is-loading-plan-selector"],errors:[1040],data:[1040],planListData:[1040],setupIntentStatus:[1025,"setup-intent-status"],setupIntentError:[1025,"setup-intent-error"],subscribing:[1028],configuredFeatures:[1040],calculatedCost:[1026,"calculated-cost"],heading:[1],planId:[1025,"plan-id"],isEditing:[1028,"is-editing"],displayName:[1,"display-name"],label:[1],card:[32]},[[0,"manifold-configured-feature-change","updateConfiguredFeature"]]]]]],a)); | ||
import{p as e,b as a}from"./p-21a2f7c2.js";e().then(e=>a([["p-bfdc4751",[[0,"manifold-configured-feature",{label:[1],value:[8]}],[0,"manifold-subscription-create",{loading:[1028],isLoadingPlanSelector:[1028,"is-loading-plan-selector"],errors:[1040],data:[1040],planListData:[1040],setupIntentStatus:[1025,"setup-intent-status"],setupIntentError:[1025,"setup-intent-error"],subscribing:[1028],configuredFeatures:[1040],calculatedCost:[1026,"calculated-cost"],heading:[1],planId:[1025,"plan-id"],stripePublishableKey:[1,"stripe-publishable-key"],isEditing:[1028,"is-editing"],displayName:[1,"display-name"],label:[1],card:[32]},[[0,"manifold-configured-feature-change","updateConfiguredFeature"]]],[0,"manifold-subscription-list",{connection:[1040],loading:[1028],errors:[1040],data:[1040],heading:[1],owner:[1]}]]]],e)); |
@@ -1,1 +0,1 @@ | ||
System.register(["./p-7b246743.system.js"],(function(){"use strict";var e,t;return{setters:[function(n){e=n.p;t=n.b}],execute:function(){e().then((function(e){return t([["p-dbcfcbdb.system",[[0,"manifold-configured-feature",{label:[1],value:[8]}],[0,"manifold-subscription-create",{loading:[1028],isLoadingPlanSelector:[1028,"is-loading-plan-selector"],errors:[1040],data:[1040],planListData:[1040],setupIntentStatus:[1025,"setup-intent-status"],setupIntentError:[1025,"setup-intent-error"],subscribing:[1028],configuredFeatures:[1040],calculatedCost:[1026,"calculated-cost"],heading:[1],planId:[1025,"plan-id"],isEditing:[1028,"is-editing"],displayName:[1,"display-name"],label:[1],card:[32]},[[0,"manifold-configured-feature-change","updateConfiguredFeature"]]]]]],e)}))}}})); | ||
System.register(["./p-7b246743.system.js"],(function(){"use strict";var e,t;return{setters:[function(n){e=n.p;t=n.b}],execute:function(){e().then((function(e){return t([["p-02ca4bb1.system",[[0,"manifold-configured-feature",{label:[1],value:[8]}],[0,"manifold-subscription-create",{loading:[1028],isLoadingPlanSelector:[1028,"is-loading-plan-selector"],errors:[1040],data:[1040],planListData:[1040],setupIntentStatus:[1025,"setup-intent-status"],setupIntentError:[1025,"setup-intent-error"],subscribing:[1028],configuredFeatures:[1040],calculatedCost:[1026,"calculated-cost"],heading:[1],planId:[1025,"plan-id"],stripePublishableKey:[1,"stripe-publishable-key"],isEditing:[1028,"is-editing"],displayName:[1,"display-name"],label:[1],card:[32]},[[0,"manifold-configured-feature-change","updateConfiguredFeature"]]],[0,"manifold-subscription-list",{connection:[1040],loading:[1028],errors:[1040],data:[1040],heading:[1],owner:[1]}]]]],e)}))}}})); |
@@ -9,5 +9,6 @@ /* eslint-disable */ | ||
import { GraphqlError, } from "@manifoldco/manifold-init-types/types/v0/graphqlFetch"; | ||
import { PlanListQuery, PlanQuery, } from "./types/graphql"; | ||
import { PlanListQuery, PlanQuery, SubscriptionsQuery, } from "./types/graphql"; | ||
import { SetupIntent, } from "@stripe/stripe-js"; | ||
import { FeatureMap, } from "./utils/plan"; | ||
import { Connection, } from "@manifoldco/manifold-init-types/types/v0"; | ||
export namespace Components { | ||
@@ -45,4 +46,19 @@ interface ManifoldConfiguredFeature { | ||
"setupIntentStatus"?: SetupIntent.Status; | ||
"stripePublishableKey": string; | ||
"subscribing"?: boolean; | ||
} | ||
interface ManifoldSubscriptionList { | ||
"connection"?: Connection; | ||
"data"?: SubscriptionsQuery; | ||
"errors"?: GraphqlError[]; | ||
/** | ||
* Component heading text | ||
*/ | ||
"heading"?: string; | ||
"loading"?: boolean; | ||
/** | ||
* Owner ID for subscriptions | ||
*/ | ||
"owner"?: string; | ||
} | ||
} | ||
@@ -62,5 +78,12 @@ declare global { | ||
}; | ||
interface HTMLManifoldSubscriptionListElement extends Components.ManifoldSubscriptionList, HTMLStencilElement { | ||
} | ||
var HTMLManifoldSubscriptionListElement: { | ||
prototype: HTMLManifoldSubscriptionListElement; | ||
new (): HTMLManifoldSubscriptionListElement; | ||
}; | ||
interface HTMLElementTagNameMap { | ||
"manifold-configured-feature": HTMLManifoldConfiguredFeatureElement; | ||
"manifold-subscription-create": HTMLManifoldSubscriptionCreateElement; | ||
"manifold-subscription-list": HTMLManifoldSubscriptionListElement; | ||
} | ||
@@ -94,2 +117,5 @@ } | ||
"loading"?: boolean; | ||
"onSuccess"?: (event: CustomEvent<{ | ||
id: string; | ||
}>) => void; | ||
/** | ||
@@ -102,7 +128,23 @@ * Plan ID for the new subscription | ||
"setupIntentStatus"?: SetupIntent.Status; | ||
"stripePublishableKey"?: string; | ||
"subscribing"?: boolean; | ||
} | ||
interface ManifoldSubscriptionList { | ||
"connection"?: Connection; | ||
"data"?: SubscriptionsQuery; | ||
"errors"?: GraphqlError[]; | ||
/** | ||
* Component heading text | ||
*/ | ||
"heading"?: string; | ||
"loading"?: boolean; | ||
/** | ||
* Owner ID for subscriptions | ||
*/ | ||
"owner"?: string; | ||
} | ||
interface IntrinsicElements { | ||
"manifold-configured-feature": ManifoldConfiguredFeature; | ||
"manifold-subscription-create": ManifoldSubscriptionCreate; | ||
"manifold-subscription-list": ManifoldSubscriptionList; | ||
} | ||
@@ -116,4 +158,5 @@ } | ||
"manifold-subscription-create": LocalJSX.ManifoldSubscriptionCreate & JSXBase.HTMLAttributes<HTMLManifoldSubscriptionCreateElement>; | ||
"manifold-subscription-list": LocalJSX.ManifoldSubscriptionList & JSXBase.HTMLAttributes<HTMLManifoldSubscriptionListElement>; | ||
} | ||
} | ||
} |
@@ -0,1 +1,2 @@ | ||
import { EventEmitter } from '@stencil/core'; | ||
import { Stripe, StripeCardElement, SetupIntent } from '@stripe/stripe-js'; | ||
@@ -30,2 +31,3 @@ import { Connection } from '@manifoldco/manifold-init-types/types/v0'; | ||
planId: string; | ||
stripePublishableKey: string; | ||
isEditing: boolean; | ||
@@ -52,2 +54,5 @@ /** | ||
subscribe: (e: UIEvent) => Promise<void>; | ||
createSuccess: EventEmitter<{ | ||
id: string; | ||
}>; | ||
setPlanId: (planId: string) => void; | ||
@@ -54,0 +59,0 @@ toggleIsEditing: () => Promise<null | undefined>; |
@@ -1076,2 +1076,18 @@ export declare type Maybe<T> = T; | ||
}; | ||
export declare type CreateSubscriptionMutationVariables = { | ||
ownerId: Maybe<Scalars['ProfileIdentity']>; | ||
planId: Scalars['ID']; | ||
configuredFeatures: Maybe<Array<ConfiguredFeatureInput>>; | ||
}; | ||
export declare type CreateSubscriptionMutation = ({ | ||
__typename?: 'Mutation'; | ||
} & { | ||
createSubscription: ({ | ||
__typename?: 'CreateSubscriptionAgreementPayload'; | ||
} & { | ||
data: ({ | ||
__typename?: 'SubscriptionAgreement'; | ||
} & Pick<SubscriptionAgreement, 'id'>); | ||
}); | ||
}); | ||
export declare type PlanFragment = ({ | ||
@@ -1181,3 +1197,41 @@ __typename?: 'Plan'; | ||
__typename?: 'Profile'; | ||
} & Pick<Profile, 'stripeSetupIntentSecret' | 'stripeAccountID'>); | ||
} & Pick<Profile, 'id' | 'stripeSetupIntentSecret'> & { | ||
stripeAccount: Maybe<({ | ||
__typename?: 'StripeAccount'; | ||
} & Pick<StripeAccount, 'id'>)>; | ||
}); | ||
}); | ||
export declare type SubscriptionsQueryVariables = { | ||
owner: Scalars['ProfileIdentity']; | ||
}; | ||
export declare type SubscriptionsQuery = ({ | ||
__typename?: 'Query'; | ||
} & { | ||
subscriptions: Maybe<({ | ||
__typename?: 'SubscriptionAgreementConnection'; | ||
} & { | ||
edges: Array<({ | ||
__typename?: 'SubscriptionAgreementEdge'; | ||
} & { | ||
node: Maybe<({ | ||
__typename?: 'SubscriptionAgreement'; | ||
} & { | ||
plan: Maybe<({ | ||
__typename?: 'Plan'; | ||
} & Pick<Plan, 'displayName' | 'cost'> & { | ||
configurableFeatures: Maybe<({ | ||
__typename?: 'PlanConfigurableFeatureConnection'; | ||
} & { | ||
edges: Array<({ | ||
__typename?: 'PlanConfigurableFeatureEdge'; | ||
} & { | ||
node: ({ | ||
__typename?: 'PlanConfigurableFeature'; | ||
} & Pick<PlanConfigurableFeature, 'displayName'>); | ||
})>; | ||
})>; | ||
})>; | ||
})>; | ||
})>; | ||
})>; | ||
}); |
{ | ||
"name": "@manifoldco/manifold-subscription", | ||
"version": "0.0.5", | ||
"version": "0.0.6", | ||
"private": false, | ||
@@ -5,0 +5,0 @@ "description": "Manifold Subscription Web Components", |
@@ -102,8 +102,9 @@ # @manifoldco/manifold-subscription | ||
| Name | Required | Description | Example | | ||
| :---------- | :------: | :----------------------------------------------------------------------------- | :-------------------------------------------------------------------------- | | ||
| `plan-id` | Y | Your Plan’s identifier | `<manifold-subscription-create product-id="234qkjvrptpy3thna4qttwt7m2nf6">` | | ||
| `owner-id` | Y | The owner of the subscription | `<manifold-subscription-create owner-id="[id]">` | | ||
| `region-id` | | The desired region identifier of the selected plan (defaults to global region) | `<manifold-subscription-create region-id="[region-id]">` | | ||
| `heading` | | Heading at the top of the component | `<manifold-subscription-create heading="Purchase Subscription">` | | ||
| Name | Required | Description | Example | | ||
|--------------------------|----------|--------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------| | ||
| `plan-id` | Y | Your Plan’s identifier | `<manifold-subscription-create product-id="234qkjvrptpy3thna4qttwt7m2nf6">` | | ||
| `owner-id` | | The owner of the subscription (defaults to logged in user) | `<manifold-subscription-create owner-id="[id]">` | | ||
| `region-id` | | The desired region identifier of the selected plan (defaults to global region) | `<manifold-subscription-create region-id="[region-id]">` | | ||
| `heading` | | Heading at the top of the component | `<manifold-subscription-create heading="Purchase Subscription">` | | ||
| `stripe-publishable-key` | Y | A publishable key for your Stripe account | `<manifold-subscription-create stripe-publishable-key="pk_test_[hash]|pk_live_[hash]">` | | ||
@@ -136,2 +137,12 @@ #### Children | ||
#### Events | ||
##### `success` | ||
A subscription creation has been initialized. | ||
| Detail | Type | Description | | ||
|:-------|:---------|:------------------| | ||
| `id` | `string` | A subscription ID | | ||
<!-- Add docs for new components here --> | ||
@@ -138,0 +149,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
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
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
1009337
99
14110
182