@schematichq/schematic-components 2.16.3 → 2.17.1
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.
- package/README.md +15 -5
- package/dist/schematic-components.cjs.js +73 -11
- package/dist/schematic-components.d.ts +32 -0
- package/dist/schematic-components.esm.js +73 -11
- package/package.json +6 -6
package/README.md
CHANGED
|
@@ -48,24 +48,34 @@ selection stage.
|
|
|
48
48
|
initializeWithPlan('plan_VBXv4bHjSf3');
|
|
49
49
|
```
|
|
50
50
|
|
|
51
|
-
Passing a config object allows pre-selecting Add-ons
|
|
52
|
-
specific stages.
|
|
51
|
+
Passing a config object allows pre-selecting Add-ons and pay-in-advance
|
|
52
|
+
quantities, as well as hiding specific stages.
|
|
53
53
|
|
|
54
54
|
```ts
|
|
55
55
|
const config = {
|
|
56
56
|
planId: 'plan_VBXv4bHjSf3', // pre-select a Plan
|
|
57
57
|
addOnIds: ['plan_AWv7bPjSx2'], // pre-select 1 or more Add-ons
|
|
58
58
|
period: 'month', // pre-select 'month' or 'year' for the billing period (optional)
|
|
59
|
+
payInAdvanceQuantities: { // pre-fill pay-in-advance quantities, keyed by feature id (optional)
|
|
60
|
+
feat_seats: 3,
|
|
61
|
+
},
|
|
59
62
|
skipped: {
|
|
60
63
|
planStage: true, // if true, skip Plan selection
|
|
61
|
-
addOnStage: true
|
|
62
|
-
|
|
63
|
-
|
|
64
|
+
addOnStage: true, // if true, skip Add-on selection
|
|
65
|
+
usageStage: true, // if true, skip the pay-in-advance Quantity stage
|
|
66
|
+
addOnUsageStage: true, // if true, skip the add-on Quantity stage
|
|
67
|
+
},
|
|
68
|
+
hideSkipped: true, // if true, hide skipped stages from breadcrumb navigation
|
|
64
69
|
};
|
|
65
70
|
|
|
66
71
|
initializeWithPlan(config);
|
|
67
72
|
```
|
|
68
73
|
|
|
74
|
+
`payInAdvanceQuantities` only applies to entitlements with pay-in-advance
|
|
75
|
+
pricing; entries for other (or unknown) features are ignored. Combine it with
|
|
76
|
+
`skipped.usageStage` / `skipped.addOnUsageStage` to send the customer straight to
|
|
77
|
+
the final checkout step with the quantities already set.
|
|
78
|
+
|
|
69
79
|
The Plans and Add-ons available to the checkout flows must be live in your
|
|
70
80
|
Schematic account [Catalog configuration](https://docs.schematichq.com/catalog/overview).
|
|
71
81
|
|
|
@@ -1866,6 +1866,7 @@ __export(index_exports, {
|
|
|
1866
1866
|
UnsubscribeButton: () => UnsubscribeButton,
|
|
1867
1867
|
UpcomingBill: () => UpcomingBill,
|
|
1868
1868
|
Viewport: () => Viewport,
|
|
1869
|
+
applyPrefilledQuantities: () => applyPrefilledQuantities,
|
|
1869
1870
|
cardBoxShadow: () => cardBoxShadow,
|
|
1870
1871
|
createActiveUsageBasedEntitlementsReducer: () => createActiveUsageBasedEntitlementsReducer,
|
|
1871
1872
|
defaultSettings: () => defaultSettings,
|
|
@@ -13315,18 +13316,26 @@ var reducer = (state, action) => {
|
|
|
13315
13316
|
let bypassPlanSelection;
|
|
13316
13317
|
let bypassAddOnSelection;
|
|
13317
13318
|
let bypassCreditsSelection;
|
|
13319
|
+
let bypassUsageSelection;
|
|
13320
|
+
let bypassAddOnUsageSelection;
|
|
13318
13321
|
if (config.skipped !== void 0) {
|
|
13319
13322
|
bypassPlanSelection = config.skipped.planStage ?? false;
|
|
13320
13323
|
bypassAddOnSelection = config.skipped.addOnStage ?? false;
|
|
13321
13324
|
bypassCreditsSelection = config.skipped.creditStage ?? false;
|
|
13325
|
+
bypassUsageSelection = config.skipped.usageStage ?? false;
|
|
13326
|
+
bypassAddOnUsageSelection = config.skipped.addOnUsageStage ?? false;
|
|
13322
13327
|
} else if (isStringFormat) {
|
|
13323
13328
|
bypassPlanSelection = true;
|
|
13324
13329
|
bypassAddOnSelection = false;
|
|
13325
13330
|
bypassCreditsSelection = false;
|
|
13331
|
+
bypassUsageSelection = false;
|
|
13332
|
+
bypassAddOnUsageSelection = false;
|
|
13326
13333
|
} else {
|
|
13327
13334
|
bypassPlanSelection = false;
|
|
13328
13335
|
bypassAddOnSelection = false;
|
|
13329
13336
|
bypassCreditsSelection = false;
|
|
13337
|
+
bypassUsageSelection = false;
|
|
13338
|
+
bypassAddOnUsageSelection = false;
|
|
13330
13339
|
}
|
|
13331
13340
|
return {
|
|
13332
13341
|
...state,
|
|
@@ -13337,7 +13346,12 @@ var reducer = (state, action) => {
|
|
|
13337
13346
|
bypassPlanSelection,
|
|
13338
13347
|
bypassAddOnSelection,
|
|
13339
13348
|
bypassCreditsSelection,
|
|
13349
|
+
bypassUsageSelection,
|
|
13350
|
+
bypassAddOnUsageSelection,
|
|
13340
13351
|
...config.addOnIds && { addOnIds: config.addOnIds },
|
|
13352
|
+
...config.payInAdvanceQuantities && {
|
|
13353
|
+
payInAdvanceQuantities: config.payInAdvanceQuantities
|
|
13354
|
+
},
|
|
13341
13355
|
...config.currency && {
|
|
13342
13356
|
selectedCurrency: config.currency.toUpperCase()
|
|
13343
13357
|
},
|
|
@@ -13373,7 +13387,7 @@ var reducer = (state, action) => {
|
|
|
13373
13387
|
// src/context/EmbedProvider.tsx
|
|
13374
13388
|
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
13375
13389
|
var getCustomHeaders = (sessionId) => ({
|
|
13376
|
-
"X-Schematic-Components-Version": "2.
|
|
13390
|
+
"X-Schematic-Components-Version": "2.17.1",
|
|
13377
13391
|
"X-Schematic-Session-ID": sessionId
|
|
13378
13392
|
});
|
|
13379
13393
|
var normalizeCurrencyFilter = (filter2) => {
|
|
@@ -17243,6 +17257,18 @@ var createActiveUsageBasedEntitlementsReducer = (entitlements, period) => (acc,
|
|
|
17243
17257
|
}
|
|
17244
17258
|
return acc;
|
|
17245
17259
|
};
|
|
17260
|
+
var applyPrefilledQuantities = (entitlements, prefill) => {
|
|
17261
|
+
if (!prefill) {
|
|
17262
|
+
return entitlements;
|
|
17263
|
+
}
|
|
17264
|
+
return entitlements.map((entitlement) => {
|
|
17265
|
+
const prefilled = prefill[entitlement.featureId];
|
|
17266
|
+
if (entitlement.priceBehavior === EntitlementPriceBehavior.PayInAdvance && typeof prefilled === "number") {
|
|
17267
|
+
return { ...entitlement, quantity: Math.max(0, Math.floor(prefilled)) };
|
|
17268
|
+
}
|
|
17269
|
+
return entitlement;
|
|
17270
|
+
});
|
|
17271
|
+
};
|
|
17246
17272
|
var CheckoutDialog = ({ top }) => {
|
|
17247
17273
|
const { t: t3 } = useTranslation();
|
|
17248
17274
|
const {
|
|
@@ -17476,9 +17502,12 @@ var CheckoutDialog = ({ top }) => {
|
|
|
17476
17502
|
effectiveCurrency
|
|
17477
17503
|
]);
|
|
17478
17504
|
const [usageBasedEntitlements, setUsageBasedEntitlements] = (0, import_react36.useState)(
|
|
17479
|
-
() => (
|
|
17480
|
-
|
|
17481
|
-
|
|
17505
|
+
() => applyPrefilledQuantities(
|
|
17506
|
+
(selectedPlan?.entitlements || []).reduce(
|
|
17507
|
+
createActiveUsageBasedEntitlementsReducer(featureUsage, planPeriod),
|
|
17508
|
+
[]
|
|
17509
|
+
),
|
|
17510
|
+
checkoutState?.payInAdvanceQuantities
|
|
17482
17511
|
)
|
|
17483
17512
|
);
|
|
17484
17513
|
const [addOnUsageBasedEntitlements, setAddOnUsageBasedEntitlements] = (0, import_react36.useState)(() => {
|
|
@@ -17517,7 +17546,10 @@ var CheckoutDialog = ({ top }) => {
|
|
|
17517
17546
|
allEntitlements.push(bypassEnt);
|
|
17518
17547
|
}
|
|
17519
17548
|
}
|
|
17520
|
-
return
|
|
17549
|
+
return applyPrefilledQuantities(
|
|
17550
|
+
allEntitlements,
|
|
17551
|
+
checkoutState?.payInAdvanceQuantities
|
|
17552
|
+
);
|
|
17521
17553
|
});
|
|
17522
17554
|
const payInAdvanceEntitlements = (0, import_react36.useMemo)(
|
|
17523
17555
|
() => usageBasedEntitlements.filter(
|
|
@@ -17653,7 +17685,7 @@ var CheckoutDialog = ({ top }) => {
|
|
|
17653
17685
|
hasInitialPaymentMethod
|
|
17654
17686
|
]);
|
|
17655
17687
|
const [isBypassLoading, setIsBypassLoading] = (0, import_react36.useState)(
|
|
17656
|
-
() => checkoutState?.bypassPlanSelection || checkoutState?.bypassAddOnSelection || checkoutState?.bypassCreditsSelection
|
|
17688
|
+
() => checkoutState?.bypassPlanSelection || checkoutState?.bypassAddOnSelection || checkoutState?.bypassCreditsSelection || checkoutState?.bypassUsageSelection || checkoutState?.bypassAddOnUsageSelection
|
|
17657
17689
|
);
|
|
17658
17690
|
const [checkoutStage, setCheckoutStage] = (0, import_react36.useState)(() => {
|
|
17659
17691
|
if (checkoutState?.addOnId) {
|
|
@@ -17673,7 +17705,7 @@ var CheckoutDialog = ({ top }) => {
|
|
|
17673
17705
|
const effectiveCheckoutStage = (0, import_react36.useMemo)(() => {
|
|
17674
17706
|
if (isBypassLoading) return checkoutStage;
|
|
17675
17707
|
let id = checkoutStage;
|
|
17676
|
-
while (id === "plan" && checkoutState?.bypassPlanSelection || id === "addons" && checkoutState?.bypassAddOnSelection || id === "credits" && checkoutState?.bypassCreditsSelection) {
|
|
17708
|
+
while (id === "plan" && checkoutState?.bypassPlanSelection || id === "usage" && checkoutState?.bypassUsageSelection || id === "addons" && checkoutState?.bypassAddOnSelection || id === "addonsUsage" && checkoutState?.bypassAddOnUsageSelection || id === "credits" && checkoutState?.bypassCreditsSelection) {
|
|
17677
17709
|
const idx = checkoutStages.findIndex((s) => s.id === id);
|
|
17678
17710
|
const next2 = checkoutStages[idx + 1];
|
|
17679
17711
|
if (!next2) break;
|
|
@@ -17898,9 +17930,12 @@ var CheckoutDialog = ({ top }) => {
|
|
|
17898
17930
|
(updates) => {
|
|
17899
17931
|
const plan = updates.plan;
|
|
17900
17932
|
const period = showPeriodToggle ? updates.period || planPeriod : plan.monthlyPrice ? BillingProductPriceInterval.Month : plan.quarterlyPrice ? "quarter" : plan.yearlyPrice ? BillingProductPriceInterval.Year : BillingProductPriceInterval.Month;
|
|
17901
|
-
const updatedUsageBasedEntitlements = (
|
|
17902
|
-
|
|
17903
|
-
|
|
17933
|
+
const updatedUsageBasedEntitlements = applyPrefilledQuantities(
|
|
17934
|
+
(plan.entitlements ?? []).reduce(
|
|
17935
|
+
createActiveUsageBasedEntitlementsReducer(featureUsage, period),
|
|
17936
|
+
[]
|
|
17937
|
+
),
|
|
17938
|
+
checkoutState?.payInAdvanceQuantities
|
|
17904
17939
|
);
|
|
17905
17940
|
if (period !== planPeriod || plan.id !== selectedPlan?.id) {
|
|
17906
17941
|
setUsageBasedEntitlements((prev2) => {
|
|
@@ -17950,7 +17985,8 @@ var CheckoutDialog = ({ top }) => {
|
|
|
17950
17985
|
featureUsage,
|
|
17951
17986
|
shouldTrial,
|
|
17952
17987
|
willTrialWithoutPaymentMethod,
|
|
17953
|
-
handlePreviewCheckout
|
|
17988
|
+
handlePreviewCheckout,
|
|
17989
|
+
checkoutState?.payInAdvanceQuantities
|
|
17954
17990
|
]
|
|
17955
17991
|
);
|
|
17956
17992
|
const changePlanPeriod = (0, import_react36.useCallback)(
|
|
@@ -18178,9 +18214,15 @@ var CheckoutDialog = ({ top }) => {
|
|
|
18178
18214
|
if (stage.id === "plan" && checkoutState.bypassPlanSelection) {
|
|
18179
18215
|
return false;
|
|
18180
18216
|
}
|
|
18217
|
+
if (stage.id === "usage" && checkoutState.bypassUsageSelection) {
|
|
18218
|
+
return false;
|
|
18219
|
+
}
|
|
18181
18220
|
if (stage.id === "addons" && checkoutState.bypassAddOnSelection) {
|
|
18182
18221
|
return false;
|
|
18183
18222
|
}
|
|
18223
|
+
if (stage.id === "addonsUsage" && checkoutState.bypassAddOnUsageSelection) {
|
|
18224
|
+
return false;
|
|
18225
|
+
}
|
|
18184
18226
|
if (stage.id === "credits" && checkoutState.bypassCreditsSelection) {
|
|
18185
18227
|
return false;
|
|
18186
18228
|
}
|
|
@@ -18192,9 +18234,15 @@ var CheckoutDialog = ({ top }) => {
|
|
|
18192
18234
|
if (stage.id === "plan" && checkoutState?.bypassPlanSelection) {
|
|
18193
18235
|
return false;
|
|
18194
18236
|
}
|
|
18237
|
+
if (stage.id === "usage" && checkoutState?.bypassUsageSelection) {
|
|
18238
|
+
return false;
|
|
18239
|
+
}
|
|
18195
18240
|
if (stage.id === "addons" && checkoutState?.bypassAddOnSelection) {
|
|
18196
18241
|
return false;
|
|
18197
18242
|
}
|
|
18243
|
+
if (stage.id === "addonsUsage" && checkoutState?.bypassAddOnUsageSelection) {
|
|
18244
|
+
return false;
|
|
18245
|
+
}
|
|
18198
18246
|
if (stage.id === "credits" && checkoutState?.bypassCreditsSelection) {
|
|
18199
18247
|
return false;
|
|
18200
18248
|
}
|
|
@@ -18203,7 +18251,9 @@ var CheckoutDialog = ({ top }) => {
|
|
|
18203
18251
|
}, [
|
|
18204
18252
|
checkoutStages,
|
|
18205
18253
|
checkoutState?.bypassPlanSelection,
|
|
18254
|
+
checkoutState?.bypassUsageSelection,
|
|
18206
18255
|
checkoutState?.bypassAddOnSelection,
|
|
18256
|
+
checkoutState?.bypassAddOnUsageSelection,
|
|
18207
18257
|
checkoutState?.bypassCreditsSelection
|
|
18208
18258
|
]);
|
|
18209
18259
|
const shouldShowBypassOverlay = isBypassLoading;
|
|
@@ -22693,6 +22743,18 @@ var getPaymentMethodData = ({
|
|
|
22693
22743
|
iconTitle: billingName || billingEmail || "Amazon Pay account",
|
|
22694
22744
|
label: billingName || billingEmail || "Amazon Pay account"
|
|
22695
22745
|
},
|
|
22746
|
+
apple_pay: {
|
|
22747
|
+
iconName: "applepay",
|
|
22748
|
+
iconTitle: "Apple Pay",
|
|
22749
|
+
label: cardLast4 ? "Apple Pay ending in" : "Apple Pay",
|
|
22750
|
+
paymentLast4: cardLast4
|
|
22751
|
+
},
|
|
22752
|
+
google_pay: {
|
|
22753
|
+
iconName: "google",
|
|
22754
|
+
iconTitle: "Google Pay",
|
|
22755
|
+
label: cardLast4 ? "Google Pay ending in" : "Google Pay",
|
|
22756
|
+
paymentLast4: cardLast4
|
|
22757
|
+
},
|
|
22696
22758
|
cashapp: {
|
|
22697
22759
|
iconName: "cashapp",
|
|
22698
22760
|
iconTitle: accountName || billingEmail || "CashApp account",
|
|
@@ -26,6 +26,8 @@ declare interface AddOnsProps {
|
|
|
26
26
|
currency?: string;
|
|
27
27
|
}
|
|
28
28
|
|
|
29
|
+
export declare const applyPrefilledQuantities: (entitlements: UsageBasedEntitlement[], prefill?: Record<string, number>) => UsageBasedEntitlement[];
|
|
30
|
+
|
|
29
31
|
export declare const AutoTopup: ({ planCreditGrants, autoTopupConfigs, updateAutoTopupConfig, }: AutoTopupProps) => JSX.Element;
|
|
30
32
|
|
|
31
33
|
declare type AutoTopupConfig = Pick<CompanyPlanCreditGrantView, "companyAutoTopupEnabled" | "companyAutoTopupThresholdCredits" | "companyAutoTopupAmount">;
|
|
@@ -2901,6 +2903,19 @@ export declare interface BypassConfig {
|
|
|
2901
2903
|
* currency is locked (the selector is already hidden in those cases).
|
|
2902
2904
|
*/
|
|
2903
2905
|
showCurrencySelector?: boolean;
|
|
2906
|
+
/**
|
|
2907
|
+
* Pre-fill pay-in-advance quantities, keyed by feature id.
|
|
2908
|
+
*
|
|
2909
|
+
* Only applies to entitlements whose price behavior is pay-in-advance; entries
|
|
2910
|
+
* for other features (or unknown feature ids) are ignored. Values are clamped
|
|
2911
|
+
* to whole numbers >= 0. Combine with `skipped.usageStage` /
|
|
2912
|
+
* `skipped.addOnUsageStage` to land the customer directly on the checkout step
|
|
2913
|
+
* with the quantities already set.
|
|
2914
|
+
*
|
|
2915
|
+
* @example
|
|
2916
|
+
* { planId: "plan_abc", payInAdvanceQuantities: { feat_seats: 3 } }
|
|
2917
|
+
*/
|
|
2918
|
+
payInAdvanceQuantities?: Record<string, number>;
|
|
2904
2919
|
}
|
|
2905
2920
|
|
|
2906
2921
|
export declare const Card: ForwardRefExoticComponent<CardProps & RefAttributes<HTMLDivElement | null>>;
|
|
@@ -3399,6 +3414,20 @@ export declare interface CheckoutStageSkipConfig {
|
|
|
3399
3414
|
* - undefined: Defaults to false (show stage)
|
|
3400
3415
|
*/
|
|
3401
3416
|
creditStage?: boolean;
|
|
3417
|
+
/**
|
|
3418
|
+
* Skip the pay-in-advance quantity stage for the plan.
|
|
3419
|
+
* - true: Skip directly to next stage (uses prefilled or current quantities)
|
|
3420
|
+
* - false: Show quantity stage (user can review/change quantities)
|
|
3421
|
+
* - undefined: Defaults to false (show stage)
|
|
3422
|
+
*/
|
|
3423
|
+
usageStage?: boolean;
|
|
3424
|
+
/**
|
|
3425
|
+
* Skip the pay-in-advance quantity stage for add-ons.
|
|
3426
|
+
* - true: Skip directly to next stage (uses prefilled or current quantities)
|
|
3427
|
+
* - false: Show add-on quantity stage (user can review/change quantities)
|
|
3428
|
+
* - undefined: Defaults to false (show stage)
|
|
3429
|
+
*/
|
|
3430
|
+
addOnUsageStage?: boolean;
|
|
3402
3431
|
}
|
|
3403
3432
|
|
|
3404
3433
|
export declare type CheckoutState = {
|
|
@@ -3411,11 +3440,14 @@ export declare type CheckoutState = {
|
|
|
3411
3440
|
bypassPlanSelection?: boolean;
|
|
3412
3441
|
bypassAddOnSelection?: boolean;
|
|
3413
3442
|
bypassCreditsSelection?: boolean;
|
|
3443
|
+
bypassUsageSelection?: boolean;
|
|
3444
|
+
bypassAddOnUsageSelection?: boolean;
|
|
3414
3445
|
addOnIds?: string[];
|
|
3415
3446
|
hideSkippedStages?: boolean;
|
|
3416
3447
|
selectedCurrency?: string;
|
|
3417
3448
|
showCurrencySelector?: boolean;
|
|
3418
3449
|
startTrialIfAvailable?: boolean;
|
|
3450
|
+
payInAdvanceQuantities?: Record<string, number>;
|
|
3419
3451
|
};
|
|
3420
3452
|
|
|
3421
3453
|
/**
|
|
@@ -13226,18 +13226,26 @@ var reducer = (state, action) => {
|
|
|
13226
13226
|
let bypassPlanSelection;
|
|
13227
13227
|
let bypassAddOnSelection;
|
|
13228
13228
|
let bypassCreditsSelection;
|
|
13229
|
+
let bypassUsageSelection;
|
|
13230
|
+
let bypassAddOnUsageSelection;
|
|
13229
13231
|
if (config.skipped !== void 0) {
|
|
13230
13232
|
bypassPlanSelection = config.skipped.planStage ?? false;
|
|
13231
13233
|
bypassAddOnSelection = config.skipped.addOnStage ?? false;
|
|
13232
13234
|
bypassCreditsSelection = config.skipped.creditStage ?? false;
|
|
13235
|
+
bypassUsageSelection = config.skipped.usageStage ?? false;
|
|
13236
|
+
bypassAddOnUsageSelection = config.skipped.addOnUsageStage ?? false;
|
|
13233
13237
|
} else if (isStringFormat) {
|
|
13234
13238
|
bypassPlanSelection = true;
|
|
13235
13239
|
bypassAddOnSelection = false;
|
|
13236
13240
|
bypassCreditsSelection = false;
|
|
13241
|
+
bypassUsageSelection = false;
|
|
13242
|
+
bypassAddOnUsageSelection = false;
|
|
13237
13243
|
} else {
|
|
13238
13244
|
bypassPlanSelection = false;
|
|
13239
13245
|
bypassAddOnSelection = false;
|
|
13240
13246
|
bypassCreditsSelection = false;
|
|
13247
|
+
bypassUsageSelection = false;
|
|
13248
|
+
bypassAddOnUsageSelection = false;
|
|
13241
13249
|
}
|
|
13242
13250
|
return {
|
|
13243
13251
|
...state,
|
|
@@ -13248,7 +13256,12 @@ var reducer = (state, action) => {
|
|
|
13248
13256
|
bypassPlanSelection,
|
|
13249
13257
|
bypassAddOnSelection,
|
|
13250
13258
|
bypassCreditsSelection,
|
|
13259
|
+
bypassUsageSelection,
|
|
13260
|
+
bypassAddOnUsageSelection,
|
|
13251
13261
|
...config.addOnIds && { addOnIds: config.addOnIds },
|
|
13262
|
+
...config.payInAdvanceQuantities && {
|
|
13263
|
+
payInAdvanceQuantities: config.payInAdvanceQuantities
|
|
13264
|
+
},
|
|
13252
13265
|
...config.currency && {
|
|
13253
13266
|
selectedCurrency: config.currency.toUpperCase()
|
|
13254
13267
|
},
|
|
@@ -13284,7 +13297,7 @@ var reducer = (state, action) => {
|
|
|
13284
13297
|
// src/context/EmbedProvider.tsx
|
|
13285
13298
|
import { jsx as jsx2, jsxs } from "react/jsx-runtime";
|
|
13286
13299
|
var getCustomHeaders = (sessionId) => ({
|
|
13287
|
-
"X-Schematic-Components-Version": "2.
|
|
13300
|
+
"X-Schematic-Components-Version": "2.17.1",
|
|
13288
13301
|
"X-Schematic-Session-ID": sessionId
|
|
13289
13302
|
});
|
|
13290
13303
|
var normalizeCurrencyFilter = (filter2) => {
|
|
@@ -17173,6 +17186,18 @@ var createActiveUsageBasedEntitlementsReducer = (entitlements, period) => (acc,
|
|
|
17173
17186
|
}
|
|
17174
17187
|
return acc;
|
|
17175
17188
|
};
|
|
17189
|
+
var applyPrefilledQuantities = (entitlements, prefill) => {
|
|
17190
|
+
if (!prefill) {
|
|
17191
|
+
return entitlements;
|
|
17192
|
+
}
|
|
17193
|
+
return entitlements.map((entitlement) => {
|
|
17194
|
+
const prefilled = prefill[entitlement.featureId];
|
|
17195
|
+
if (entitlement.priceBehavior === EntitlementPriceBehavior.PayInAdvance && typeof prefilled === "number") {
|
|
17196
|
+
return { ...entitlement, quantity: Math.max(0, Math.floor(prefilled)) };
|
|
17197
|
+
}
|
|
17198
|
+
return entitlement;
|
|
17199
|
+
});
|
|
17200
|
+
};
|
|
17176
17201
|
var CheckoutDialog = ({ top }) => {
|
|
17177
17202
|
const { t: t3 } = useTranslation();
|
|
17178
17203
|
const {
|
|
@@ -17406,9 +17431,12 @@ var CheckoutDialog = ({ top }) => {
|
|
|
17406
17431
|
effectiveCurrency
|
|
17407
17432
|
]);
|
|
17408
17433
|
const [usageBasedEntitlements, setUsageBasedEntitlements] = useState8(
|
|
17409
|
-
() => (
|
|
17410
|
-
|
|
17411
|
-
|
|
17434
|
+
() => applyPrefilledQuantities(
|
|
17435
|
+
(selectedPlan?.entitlements || []).reduce(
|
|
17436
|
+
createActiveUsageBasedEntitlementsReducer(featureUsage, planPeriod),
|
|
17437
|
+
[]
|
|
17438
|
+
),
|
|
17439
|
+
checkoutState?.payInAdvanceQuantities
|
|
17412
17440
|
)
|
|
17413
17441
|
);
|
|
17414
17442
|
const [addOnUsageBasedEntitlements, setAddOnUsageBasedEntitlements] = useState8(() => {
|
|
@@ -17447,7 +17475,10 @@ var CheckoutDialog = ({ top }) => {
|
|
|
17447
17475
|
allEntitlements.push(bypassEnt);
|
|
17448
17476
|
}
|
|
17449
17477
|
}
|
|
17450
|
-
return
|
|
17478
|
+
return applyPrefilledQuantities(
|
|
17479
|
+
allEntitlements,
|
|
17480
|
+
checkoutState?.payInAdvanceQuantities
|
|
17481
|
+
);
|
|
17451
17482
|
});
|
|
17452
17483
|
const payInAdvanceEntitlements = useMemo12(
|
|
17453
17484
|
() => usageBasedEntitlements.filter(
|
|
@@ -17583,7 +17614,7 @@ var CheckoutDialog = ({ top }) => {
|
|
|
17583
17614
|
hasInitialPaymentMethod
|
|
17584
17615
|
]);
|
|
17585
17616
|
const [isBypassLoading, setIsBypassLoading] = useState8(
|
|
17586
|
-
() => checkoutState?.bypassPlanSelection || checkoutState?.bypassAddOnSelection || checkoutState?.bypassCreditsSelection
|
|
17617
|
+
() => checkoutState?.bypassPlanSelection || checkoutState?.bypassAddOnSelection || checkoutState?.bypassCreditsSelection || checkoutState?.bypassUsageSelection || checkoutState?.bypassAddOnUsageSelection
|
|
17587
17618
|
);
|
|
17588
17619
|
const [checkoutStage, setCheckoutStage] = useState8(() => {
|
|
17589
17620
|
if (checkoutState?.addOnId) {
|
|
@@ -17603,7 +17634,7 @@ var CheckoutDialog = ({ top }) => {
|
|
|
17603
17634
|
const effectiveCheckoutStage = useMemo12(() => {
|
|
17604
17635
|
if (isBypassLoading) return checkoutStage;
|
|
17605
17636
|
let id = checkoutStage;
|
|
17606
|
-
while (id === "plan" && checkoutState?.bypassPlanSelection || id === "addons" && checkoutState?.bypassAddOnSelection || id === "credits" && checkoutState?.bypassCreditsSelection) {
|
|
17637
|
+
while (id === "plan" && checkoutState?.bypassPlanSelection || id === "usage" && checkoutState?.bypassUsageSelection || id === "addons" && checkoutState?.bypassAddOnSelection || id === "addonsUsage" && checkoutState?.bypassAddOnUsageSelection || id === "credits" && checkoutState?.bypassCreditsSelection) {
|
|
17607
17638
|
const idx = checkoutStages.findIndex((s) => s.id === id);
|
|
17608
17639
|
const next2 = checkoutStages[idx + 1];
|
|
17609
17640
|
if (!next2) break;
|
|
@@ -17828,9 +17859,12 @@ var CheckoutDialog = ({ top }) => {
|
|
|
17828
17859
|
(updates) => {
|
|
17829
17860
|
const plan = updates.plan;
|
|
17830
17861
|
const period = showPeriodToggle ? updates.period || planPeriod : plan.monthlyPrice ? BillingProductPriceInterval.Month : plan.quarterlyPrice ? "quarter" : plan.yearlyPrice ? BillingProductPriceInterval.Year : BillingProductPriceInterval.Month;
|
|
17831
|
-
const updatedUsageBasedEntitlements = (
|
|
17832
|
-
|
|
17833
|
-
|
|
17862
|
+
const updatedUsageBasedEntitlements = applyPrefilledQuantities(
|
|
17863
|
+
(plan.entitlements ?? []).reduce(
|
|
17864
|
+
createActiveUsageBasedEntitlementsReducer(featureUsage, period),
|
|
17865
|
+
[]
|
|
17866
|
+
),
|
|
17867
|
+
checkoutState?.payInAdvanceQuantities
|
|
17834
17868
|
);
|
|
17835
17869
|
if (period !== planPeriod || plan.id !== selectedPlan?.id) {
|
|
17836
17870
|
setUsageBasedEntitlements((prev2) => {
|
|
@@ -17880,7 +17914,8 @@ var CheckoutDialog = ({ top }) => {
|
|
|
17880
17914
|
featureUsage,
|
|
17881
17915
|
shouldTrial,
|
|
17882
17916
|
willTrialWithoutPaymentMethod,
|
|
17883
|
-
handlePreviewCheckout
|
|
17917
|
+
handlePreviewCheckout,
|
|
17918
|
+
checkoutState?.payInAdvanceQuantities
|
|
17884
17919
|
]
|
|
17885
17920
|
);
|
|
17886
17921
|
const changePlanPeriod = useCallback7(
|
|
@@ -18108,9 +18143,15 @@ var CheckoutDialog = ({ top }) => {
|
|
|
18108
18143
|
if (stage.id === "plan" && checkoutState.bypassPlanSelection) {
|
|
18109
18144
|
return false;
|
|
18110
18145
|
}
|
|
18146
|
+
if (stage.id === "usage" && checkoutState.bypassUsageSelection) {
|
|
18147
|
+
return false;
|
|
18148
|
+
}
|
|
18111
18149
|
if (stage.id === "addons" && checkoutState.bypassAddOnSelection) {
|
|
18112
18150
|
return false;
|
|
18113
18151
|
}
|
|
18152
|
+
if (stage.id === "addonsUsage" && checkoutState.bypassAddOnUsageSelection) {
|
|
18153
|
+
return false;
|
|
18154
|
+
}
|
|
18114
18155
|
if (stage.id === "credits" && checkoutState.bypassCreditsSelection) {
|
|
18115
18156
|
return false;
|
|
18116
18157
|
}
|
|
@@ -18122,9 +18163,15 @@ var CheckoutDialog = ({ top }) => {
|
|
|
18122
18163
|
if (stage.id === "plan" && checkoutState?.bypassPlanSelection) {
|
|
18123
18164
|
return false;
|
|
18124
18165
|
}
|
|
18166
|
+
if (stage.id === "usage" && checkoutState?.bypassUsageSelection) {
|
|
18167
|
+
return false;
|
|
18168
|
+
}
|
|
18125
18169
|
if (stage.id === "addons" && checkoutState?.bypassAddOnSelection) {
|
|
18126
18170
|
return false;
|
|
18127
18171
|
}
|
|
18172
|
+
if (stage.id === "addonsUsage" && checkoutState?.bypassAddOnUsageSelection) {
|
|
18173
|
+
return false;
|
|
18174
|
+
}
|
|
18128
18175
|
if (stage.id === "credits" && checkoutState?.bypassCreditsSelection) {
|
|
18129
18176
|
return false;
|
|
18130
18177
|
}
|
|
@@ -18133,7 +18180,9 @@ var CheckoutDialog = ({ top }) => {
|
|
|
18133
18180
|
}, [
|
|
18134
18181
|
checkoutStages,
|
|
18135
18182
|
checkoutState?.bypassPlanSelection,
|
|
18183
|
+
checkoutState?.bypassUsageSelection,
|
|
18136
18184
|
checkoutState?.bypassAddOnSelection,
|
|
18185
|
+
checkoutState?.bypassAddOnUsageSelection,
|
|
18137
18186
|
checkoutState?.bypassCreditsSelection
|
|
18138
18187
|
]);
|
|
18139
18188
|
const shouldShowBypassOverlay = isBypassLoading;
|
|
@@ -22635,6 +22684,18 @@ var getPaymentMethodData = ({
|
|
|
22635
22684
|
iconTitle: billingName || billingEmail || "Amazon Pay account",
|
|
22636
22685
|
label: billingName || billingEmail || "Amazon Pay account"
|
|
22637
22686
|
},
|
|
22687
|
+
apple_pay: {
|
|
22688
|
+
iconName: "applepay",
|
|
22689
|
+
iconTitle: "Apple Pay",
|
|
22690
|
+
label: cardLast4 ? "Apple Pay ending in" : "Apple Pay",
|
|
22691
|
+
paymentLast4: cardLast4
|
|
22692
|
+
},
|
|
22693
|
+
google_pay: {
|
|
22694
|
+
iconName: "google",
|
|
22695
|
+
iconTitle: "Google Pay",
|
|
22696
|
+
label: cardLast4 ? "Google Pay ending in" : "Google Pay",
|
|
22697
|
+
paymentLast4: cardLast4
|
|
22698
|
+
},
|
|
22638
22699
|
cashapp: {
|
|
22639
22700
|
iconName: "cashapp",
|
|
22640
22701
|
iconTitle: accountName || billingEmail || "CashApp account",
|
|
@@ -29990,6 +30051,7 @@ export {
|
|
|
29990
30051
|
UnsubscribeButton,
|
|
29991
30052
|
UpcomingBill,
|
|
29992
30053
|
Viewport,
|
|
30054
|
+
applyPrefilledQuantities,
|
|
29993
30055
|
cardBoxShadow,
|
|
29994
30056
|
createActiveUsageBasedEntitlementsReducer,
|
|
29995
30057
|
defaultSettings,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@schematichq/schematic-components",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.17.1",
|
|
4
4
|
"main": "dist/schematic-components.cjs.js",
|
|
5
5
|
"module": "dist/schematic-components.esm.js",
|
|
6
6
|
"types": "dist/schematic-components.d.ts",
|
|
@@ -40,16 +40,16 @@
|
|
|
40
40
|
"pako": "^2.1.0",
|
|
41
41
|
"react-i18next": "16.1.6",
|
|
42
42
|
"styled-components": "^6.4.2",
|
|
43
|
-
"uuid": "^14.0.
|
|
43
|
+
"uuid": "^14.0.1"
|
|
44
44
|
},
|
|
45
45
|
"devDependencies": {
|
|
46
46
|
"@eslint/js": "^10.0.1",
|
|
47
47
|
"@eslint/json": "^2.0.0",
|
|
48
48
|
"@eslint/markdown": "^8.0.2",
|
|
49
49
|
"@microsoft/api-extractor": "^7.58.9",
|
|
50
|
-
"@openapitools/openapi-generator-cli": "^2.
|
|
50
|
+
"@openapitools/openapi-generator-cli": "^2.39.0",
|
|
51
51
|
"@stripe/react-stripe-js": "^6.6.0",
|
|
52
|
-
"@swc/core": "^1.15.
|
|
52
|
+
"@swc/core": "^1.15.43",
|
|
53
53
|
"@testing-library/dom": "^10.4.1",
|
|
54
54
|
"@testing-library/jest-dom": "^6.9.1",
|
|
55
55
|
"@testing-library/react": "^16.3.2",
|
|
@@ -64,7 +64,7 @@
|
|
|
64
64
|
"eslint-plugin-import-x": "^4.16.2",
|
|
65
65
|
"eslint-plugin-react": "^7.37.5",
|
|
66
66
|
"eslint-plugin-react-hooks": "^7.1.1",
|
|
67
|
-
"globals": "^17.
|
|
67
|
+
"globals": "^17.7.0",
|
|
68
68
|
"happy-dom": "^20.10.6",
|
|
69
69
|
"jsdom": "^29.1.1",
|
|
70
70
|
"msw": "^2.14.6",
|
|
@@ -72,7 +72,7 @@
|
|
|
72
72
|
"react": "^19.2.7",
|
|
73
73
|
"react-dom": "^19.2.7",
|
|
74
74
|
"typescript": "^6.0.3",
|
|
75
|
-
"typescript-eslint": "^8.
|
|
75
|
+
"typescript-eslint": "^8.62.0",
|
|
76
76
|
"vitest": "^4.1.9"
|
|
77
77
|
},
|
|
78
78
|
"peerDependencies": {
|