@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 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 as well as hiding
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 // if true, skip Add-on selection
62
- }
63
- hideSkipped: true // if true, hide skipped stages from breadcrumb navigation
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.16.3",
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
- () => (selectedPlan?.entitlements || []).reduce(
17480
- createActiveUsageBasedEntitlementsReducer(featureUsage, planPeriod),
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 allEntitlements;
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 = (plan.entitlements ?? []).reduce(
17902
- createActiveUsageBasedEntitlementsReducer(featureUsage, period),
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.16.3",
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
- () => (selectedPlan?.entitlements || []).reduce(
17410
- createActiveUsageBasedEntitlementsReducer(featureUsage, planPeriod),
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 allEntitlements;
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 = (plan.entitlements ?? []).reduce(
17832
- createActiveUsageBasedEntitlementsReducer(featureUsage, period),
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.16.3",
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.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.38.0",
50
+ "@openapitools/openapi-generator-cli": "^2.39.0",
51
51
  "@stripe/react-stripe-js": "^6.6.0",
52
- "@swc/core": "^1.15.41",
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.6.0",
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.61.1",
75
+ "typescript-eslint": "^8.62.0",
76
76
  "vitest": "^4.1.9"
77
77
  },
78
78
  "peerDependencies": {