@stigg/react-sdk 4.4.0-beta.11 → 4.4.0-beta.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (26) hide show
  1. package/dist/components/checkout/Checkout.d.ts +1 -1
  2. package/dist/components/checkout/CheckoutContainer.d.ts +4 -2
  3. package/dist/components/checkout/CheckoutProvider.d.ts +4 -2
  4. package/dist/components/checkout/hooks/useLoadCheckout.d.ts +3 -1
  5. package/dist/components/checkout/hooks/usePreviewSubscription.d.ts +8 -3
  6. package/dist/components/checkout/summary/CheckoutSummary.d.ts +1 -1
  7. package/dist/react-sdk.cjs.development.js +94 -46
  8. package/dist/react-sdk.cjs.development.js.map +1 -1
  9. package/dist/react-sdk.cjs.production.min.js +1 -1
  10. package/dist/react-sdk.cjs.production.min.js.map +1 -1
  11. package/dist/react-sdk.esm.js +94 -46
  12. package/dist/react-sdk.esm.js.map +1 -1
  13. package/dist/stories/mocks/checkout/consts.d.ts +11 -0
  14. package/dist/stories/mocks/checkout/mockCheckoutPreview.d.ts +2 -0
  15. package/dist/stories/mocks/checkout/mockCheckoutState.d.ts +2 -0
  16. package/package.json +1 -1
  17. package/src/components/checkout/Checkout.tsx +3 -1
  18. package/src/components/checkout/CheckoutContainer.tsx +21 -2
  19. package/src/components/checkout/CheckoutProvider.tsx +6 -2
  20. package/src/components/checkout/hooks/useLoadCheckout.ts +10 -2
  21. package/src/components/checkout/hooks/usePreviewSubscription.ts +15 -5
  22. package/src/components/checkout/summary/CheckoutSummary.tsx +2 -1
  23. package/src/stories/Checkout.stories.tsx +32 -6
  24. package/src/stories/mocks/checkout/consts.ts +15 -0
  25. package/src/stories/mocks/checkout/mockCheckoutPreview.ts +121 -0
  26. package/src/stories/mocks/checkout/mockCheckoutState.ts +206 -0
@@ -0,0 +1,206 @@
1
+ import moment from 'moment';
2
+ import { camelCase, startCase } from 'lodash';
3
+ import {
4
+ BillingModel,
5
+ BillingPeriod,
6
+ BillingVendorIdentifier,
7
+ Currency,
8
+ PricingType,
9
+ TiersMode,
10
+ CheckoutStatePlan,
11
+ Customer,
12
+ GetCheckoutState,
13
+ GetCheckoutStateResults,
14
+ Price,
15
+ Product,
16
+ PromotionalEntitlement,
17
+ Subscription,
18
+ Addon,
19
+ } from '../../../../../js-client-sdk';
20
+ import {
21
+ BASE_FEE_MONTHLY,
22
+ TIERS_PRICE_MONTHLY,
23
+ PER_UNIT_PRICE_MONTHLY,
24
+ PER_UNIT_PRICE_YEARLY,
25
+ STRIPE_MOCK_ACCOUNT_ID,
26
+ STRIPE_MOCK_ACCOUNT_PK,
27
+ TIERS,
28
+ BASE_FEE_YEARLY,
29
+ TIERS_PRICE_YEARLY,
30
+ ADDON_PRICE_MONTHLY,
31
+ ADDON_PRICE_YEARLY,
32
+ } from './consts';
33
+
34
+ const mockCustomer: Customer = {
35
+ id: '462d5d8a-22c4-4f22-9306-38d1a3047675',
36
+ name: 'John Doe',
37
+ email: 'john.doe@example.com',
38
+ createdAt: moment().subtract(1, 'year').toDate(),
39
+ updatedAt: moment().subtract(1, 'month').toDate(),
40
+ hasPaymentMethod: false,
41
+ promotionalEntitlements: [],
42
+ subscriptions: [],
43
+ getActivePromotionalEntitlements(): PromotionalEntitlement[] {
44
+ return [];
45
+ },
46
+ getActiveSubscriptions(): Subscription[] {
47
+ return [];
48
+ },
49
+ getActiveTrials(): Subscription[] {
50
+ return [];
51
+ },
52
+ };
53
+
54
+ const mockProduct: Product = {
55
+ id: 'product-1',
56
+ displayName: 'Product 1',
57
+ description: 'Product 1 description',
58
+ };
59
+
60
+ const additionalStorageAddons: Addon = {
61
+ id: 'addon-additional-storage',
62
+ description: 'Additional storage',
63
+ displayName: 'Additional storage',
64
+ entitlements: [],
65
+ pricePoints: [
66
+ {
67
+ pricingModel: BillingModel.FlatFee,
68
+ billingPeriod: BillingPeriod.Monthly,
69
+ amount: ADDON_PRICE_MONTHLY,
70
+ currency: Currency.Usd,
71
+ tiersMode: undefined,
72
+ isTieredPrice: false,
73
+ },
74
+ {
75
+ pricingModel: BillingModel.FlatFee,
76
+ billingPeriod: BillingPeriod.Annually,
77
+ amount: ADDON_PRICE_YEARLY,
78
+ currency: Currency.Usd,
79
+ tiersMode: undefined,
80
+ isTieredPrice: false,
81
+ },
82
+ ],
83
+ };
84
+
85
+ const flatFeePricing: Price[] = [
86
+ {
87
+ pricingModel: BillingModel.FlatFee,
88
+ billingPeriod: BillingPeriod.Monthly,
89
+ amount: BASE_FEE_MONTHLY,
90
+ currency: Currency.Usd,
91
+ tiersMode: undefined,
92
+ isTieredPrice: false,
93
+ },
94
+ {
95
+ pricingModel: BillingModel.FlatFee,
96
+ billingPeriod: BillingPeriod.Annually,
97
+ amount: BASE_FEE_YEARLY,
98
+ currency: Currency.Usd,
99
+ tiersMode: undefined,
100
+ isTieredPrice: false,
101
+ },
102
+ ];
103
+
104
+ function activeUsersPricing(): Price[] {
105
+ const activeUsersFeature = {
106
+ featureId: 'feature-active-users',
107
+ displayName: 'Active users',
108
+ units: 'user',
109
+ unitsPlural: 'users',
110
+ };
111
+
112
+ return [
113
+ {
114
+ pricingModel: BillingModel.PerUnit,
115
+ billingPeriod: BillingPeriod.Monthly,
116
+ tiersMode: TiersMode.Volume,
117
+ tiers: TIERS.map((tier, index) => ({
118
+ upTo: tier,
119
+ unitPrice: {
120
+ amount: TIERS_PRICE_MONTHLY[index] / tier,
121
+ currency: Currency.Usd,
122
+ },
123
+ })),
124
+ feature: activeUsersFeature,
125
+ currency: Currency.Usd,
126
+ isTieredPrice: true,
127
+ },
128
+ {
129
+ pricingModel: BillingModel.PerUnit,
130
+ billingPeriod: BillingPeriod.Annually,
131
+ tiersMode: TiersMode.Volume,
132
+ tiers: TIERS.map((tier, index) => ({
133
+ upTo: tier,
134
+ unitPrice: {
135
+ amount: TIERS_PRICE_YEARLY[index] / tier,
136
+ currency: Currency.Usd,
137
+ },
138
+ })),
139
+ feature: activeUsersFeature,
140
+ currency: Currency.Usd,
141
+ isTieredPrice: true,
142
+ },
143
+ ];
144
+ }
145
+
146
+ function seatsPricing(): Price[] {
147
+ const seatsFeature = {
148
+ featureId: 'feature-seats',
149
+ displayName: 'Seats',
150
+ units: 'seat',
151
+ unitsPlural: 'seats',
152
+ };
153
+
154
+ return [
155
+ {
156
+ pricingModel: BillingModel.PerUnit,
157
+ billingPeriod: BillingPeriod.Monthly,
158
+ amount: PER_UNIT_PRICE_MONTHLY,
159
+ currency: Currency.Usd,
160
+ feature: seatsFeature,
161
+ tiersMode: undefined,
162
+ isTieredPrice: false,
163
+ },
164
+ {
165
+ pricingModel: BillingModel.PerUnit,
166
+ billingPeriod: BillingPeriod.Annually,
167
+ amount: PER_UNIT_PRICE_YEARLY,
168
+ currency: Currency.Usd,
169
+ feature: seatsFeature,
170
+ tiersMode: undefined,
171
+ isTieredPrice: false,
172
+ },
173
+ ];
174
+ }
175
+
176
+ function mockPlan(planRefId: string): CheckoutStatePlan {
177
+ return {
178
+ id: '4b6c639e-1100-4ae1-86a9-31324994f992',
179
+ displayName: startCase(camelCase(planRefId)),
180
+ pricingType: PricingType.Paid,
181
+ pricePoints: [...flatFeePricing, ...seatsPricing(), ...activeUsersPricing()],
182
+ product: mockProduct,
183
+ order: 0,
184
+ compatibleAddons: [additionalStorageAddons],
185
+ entitlements: [],
186
+ inheritedEntitlements: [],
187
+ };
188
+ }
189
+
190
+ export function mockCheckoutState(params: GetCheckoutState): GetCheckoutStateResults {
191
+ const { planId } = params;
192
+
193
+ return {
194
+ setupSecret: '',
195
+ customer: mockCustomer,
196
+ plan: mockPlan(planId),
197
+ billingIntegration: {
198
+ billingIdentifier: BillingVendorIdentifier.Stripe,
199
+ credentials: {
200
+ accountId: STRIPE_MOCK_ACCOUNT_ID,
201
+ publicKey: STRIPE_MOCK_ACCOUNT_PK,
202
+ },
203
+ },
204
+ resource: null,
205
+ };
206
+ }