@schematichq/schematic-components 2.8.1 → 2.8.2

package/dist/schematic-components.cjs.js

@@ -5165,6 +5165,54 @@ function shouldCollectBillingAddress(collectAddressSetting, financeData) {
   return isBillingAddressRequiredForTax(financeData);
 }
 
+// src/utils/api/checkout.ts
+function buildPayInAdvanceRequestBody(entitlements, period) {
+  return entitlements.reduce(
+    (acc, { meteredMonthlyPrice, meteredYearlyPrice, quantity }) => {
+      const priceId = (period === "year" ? meteredYearlyPrice : meteredMonthlyPrice)?.priceId;
+      if (priceId) {
+        acc.push({
+          priceId,
+          quantity
+        });
+      }
+      return acc;
+    },
+    []
+  );
+}
+function buildAddOnRequestBody(addOns, period, shouldTrial, addOnPayInAdvanceEntitlements) {
+  return addOns.reduce((acc, addOn) => {
+    if (addOn.isSelected && !shouldTrial) {
+      const addOnPrice = getAddOnPrice(addOn, period);
+      const addOnPriceId = addOnPrice?.id;
+      if (addOnPriceId && (addOnPrice?.price || addOnPayInAdvanceEntitlements.some(
+        (e2) => e2.priceBehavior === EntitlementPriceBehavior.PayInAdvance
+      ))) {
+        acc.push({
+          addOnId: addOn.id,
+          priceId: addOnPriceId
+        });
+      }
+    }
+    return acc;
+  }, []);
+}
+function buildCreditBundlesRequestBody(creditBundles) {
+  return creditBundles.reduce(
+    (acc, { id, count }) => {
+      if (count > 0) {
+        acc.push({
+          bundleId: id,
+          quantity: count
+        });
+      }
+      return acc;
+    },
+    []
+  );
+}
+
 // src/utils/api/credit.ts
 function getResetCadencePeriod(cadence) {
   switch (cadence) {
@@ -12368,7 +12416,7 @@ var reducer = (state, action) => {
 // src/context/EmbedProvider.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var getCustomHeaders = (sessionId) => ({
-  "X-Schematic-Components-Version": "2.8.1",
+  "X-Schematic-Components-Version": "2.8.2",
   "X-Schematic-Session-ID": sessionId
 });
 var EmbedProvider = ({
@@ -15874,63 +15922,34 @@ var CheckoutDialog = ({ top }) => {
       setError(void 0);
       setCharges(void 0);
       setIsLoading(true);
-      const addOnRequestBody = (updates.addOns || addOns).reduce(
-        (acc, addOn) => {
-          if (addOn.isSelected) {
-            const addOnPriceId = getAddOnPrice(addOn, period)?.id;
-            if (addOnPriceId) {
-              acc.push({
-                addOnId: addOn.id,
-                priceId: addOnPriceId
-              });
-            }
-          }
-          return acc;
-        },
-        []
+      const resolvedPayInAdvanceEntitlements = updates.payInAdvanceEntitlements || payInAdvanceEntitlements;
+      const resolvedAddOnPayInAdvanceEntitlements = updates.addOnPayInAdvanceEntitlements || addOnPayInAdvanceEntitlements;
+      const resolvedAddOns = updates.addOns || addOns;
+      const resolvedCreditBundles = updates.creditBundles || creditBundles;
+      const planPayInAdvanceRequestBody = buildPayInAdvanceRequestBody(
+        resolvedPayInAdvanceEntitlements,
+        period
       );
-      const payInAdvanceRequestBody = (updates.payInAdvanceEntitlements || payInAdvanceEntitlements).reduce(
-        (acc, { meteredMonthlyPrice, meteredYearlyPrice, quantity }) => {
-          const priceId = (period === "year" ? meteredYearlyPrice : meteredMonthlyPrice)?.priceId;
-          if (priceId) {
-            acc.push({
-              priceId,
-              quantity
-            });
-          }
-          return acc;
-        },
-        []
+      const addOnPayInAdvanceRequestBody = buildPayInAdvanceRequestBody(
+        resolvedAddOnPayInAdvanceEntitlements,
+        period
       );
-      const addOnPayInAdvanceRequestBody = (updates.addOnPayInAdvanceEntitlements || addOnUsageBasedEntitlements).reduce(
-        (acc, { meteredMonthlyPrice, meteredYearlyPrice, quantity }) => {
-          const priceId = (period === "year" ? meteredYearlyPrice : meteredMonthlyPrice)?.priceId;
-          if (priceId) {
-            acc.push({
-              priceId,
-              quantity
-            });
-          }
-          return acc;
-        },
-        []
+      const addOnRequestBody = buildAddOnRequestBody(
+        resolvedAddOns,
+        period,
+        shouldTrial,
+        resolvedAddOnPayInAdvanceEntitlements
+      );
+      const creditBundlesRequestBody = buildCreditBundlesRequestBody(
+        resolvedCreditBundles
       );
-      const creditBundlesRequestBody = (updates.creditBundles || creditBundles).reduce((acc, { id, count }) => {
-        if (count > 0) {
-          acc.push({
-            bundleId: id,
-            quantity: count
-          });
-        }
-        return acc;
-      }, []);
       try {
         const response = await previewCheckout({
           newPlanId: plan.id,
           newPriceId: planPriceId,
           addOnIds: addOnRequestBody,
           payInAdvance: [
-            ...payInAdvanceRequestBody,
+            ...planPayInAdvanceRequestBody,
             ...addOnPayInAdvanceRequestBody
           ],
           creditBundles: creditBundlesRequestBody,
@@ -15995,7 +16014,7 @@ var CheckoutDialog = ({ top }) => {
       planPeriod,
       selectedPlan,
       payInAdvanceEntitlements,
-      addOnUsageBasedEntitlements,
+      addOnPayInAdvanceEntitlements,
       addOns,
       creditBundles,
       shouldTrial,
@@ -16083,25 +16102,31 @@ var CheckoutDialog = ({ top }) => {
           ...addOn,
           ...addOn.id === id && { isSelected: !addOn.isSelected }
         }));
-        const updatedAddOnEntitlements = updated.filter((addOn) => addOn.isSelected).flatMap(
-          (addOn) => addOn.entitlements.filter(
-            (entitlement) => entitlement.priceBehavior === EntitlementPriceBehavior.PayInAdvance
-          ).map((entitlement) => ({
-            ...entitlement,
-            allocation: entitlement.valueNumeric || 0,
-            usage: 0,
-            quantity: 1
-          }))
-        );
+        const updatedAddOnEntitlements = updated.filter((addOn) => addOn.isSelected).flatMap((addOn) => {
+          return addOn.entitlements.filter((entitlement) => !!entitlement.priceBehavior).map((source) => {
+            const found = addOnUsageBasedEntitlements.find(
+              (current) => current.id === source.id
+            );
+            return {
+              ...source,
+              allocation: found?.allocation ?? source.valueNumeric ?? 0,
+              usage: found?.usage ?? 0,
+              quantity: found?.quantity ?? 1
+            };
+          });
+        });
         setAddOnUsageBasedEntitlements(updatedAddOnEntitlements);
+        const updatedAddOnPayInAdvanceEntitlements = updatedAddOnEntitlements.filter(
+          (entitlement) => entitlement.priceBehavior === EntitlementPriceBehavior.PayInAdvance
+        );
         handlePreviewCheckout({
           addOns: updated,
-          addOnPayInAdvanceEntitlements: updatedAddOnEntitlements
+          addOnPayInAdvanceEntitlements: updatedAddOnPayInAdvanceEntitlements
         });
         return updated;
       });
     },
-    [handlePreviewCheckout]
+    [handlePreviewCheckout, addOnUsageBasedEntitlements]
   );
   const updateUsageBasedEntitlementQuantity = (0, import_react32.useCallback)(
     (id, updatedQuantity) => {
@@ -16146,8 +16171,11 @@ var CheckoutDialog = ({ top }) => {
             quantity: updatedQuantity
           } : entitlement
         );
+        const updatedAddOnPayInAdvanceEntitlements = updated.filter(
+          (entitlement) => entitlement.priceBehavior === EntitlementPriceBehavior.PayInAdvance
+        );
         handlePreviewCheckout({
-          addOnPayInAdvanceEntitlements: updated
+          addOnPayInAdvanceEntitlements: updatedAddOnPayInAdvanceEntitlements
         });
         return updated;
       });
@@ -16467,6 +16495,7 @@ var CheckoutDialog = ({ top }) => {
               addOns,
               usageBasedEntitlements,
               addOnUsageBasedEntitlements,
+              addOnPayInAdvanceEntitlements,
               creditBundles,
               charges,
               checkoutStage,
@@ -17361,7 +17390,7 @@ var EntitlementRow = (props) => {
         " ",
         getFeatureName(feature, softLimit)
       ] }) : feature.name }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Box, { $whiteSpace: "nowrap", children: priceBehavior === EntitlementPriceBehavior.PayInAdvance && !tiered ? /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(Text, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Box, { $whiteSpace: "nowrap", $lineHeight: 1, children: priceBehavior === EntitlementPriceBehavior.PayInAdvance && !tiered ? /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(Text, { children: [
         formatCurrency((price ?? 0) * quantity, currency),
         /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("sub", { children: [
           "/",
@@ -17475,6 +17504,7 @@ var SubscriptionSidebar = (0, import_react39.forwardRef)(
     creditBundles = [],
     usageBasedEntitlements,
     addOnUsageBasedEntitlements = [],
+    addOnPayInAdvanceEntitlements = [],
     charges,
     checkoutStage,
     checkoutStages,
@@ -17701,70 +17731,37 @@ var SubscriptionSidebar = (0, import_react39.forwardRef)(
     );
     const handleCheckout = (0, import_react39.useCallback)(async () => {
       const planId = selectedPlan?.id;
-      const priceId = (planPeriod === "year" ? selectedPlan?.yearlyPrice : selectedPlan?.monthlyPrice)?.id;
+      const planPriceId = (planPeriod === "year" ? selectedPlan?.yearlyPrice : selectedPlan?.monthlyPrice)?.id;
       try {
-        if (!planId || !priceId) {
+        if (!planId || !planPriceId) {
           throw new Error(t2("Selected plan or associated price is missing."));
         }
         setError(void 0);
         setIsLoading(true);
-        const planPayInAdvance = payInAdvanceEntitlements.reduce(
-          (acc, { meteredMonthlyPrice, meteredYearlyPrice, quantity }) => {
-            const priceId2 = (planPeriod === "year" ? meteredYearlyPrice : meteredMonthlyPrice)?.priceId;
-            if (priceId2) {
-              acc.push({
-                priceId: priceId2,
-                quantity
-              });
-            }
-            return acc;
-          },
-          []
+        const planPayInAdvanceRequestBody = buildPayInAdvanceRequestBody(
+          payInAdvanceEntitlements,
+          planPeriod
         );
-        const addOnPayInAdvance = addOnUsageBasedEntitlements.filter(
-          (entitlement) => entitlement.priceBehavior === EntitlementPriceBehavior.PayInAdvance
-        ).reduce(
-          (acc, { meteredMonthlyPrice, meteredYearlyPrice, quantity }) => {
-            const priceId2 = (planPeriod === "year" ? meteredYearlyPrice : meteredMonthlyPrice)?.priceId;
-            if (priceId2) {
-              acc.push({
-                priceId: priceId2,
-                quantity
-              });
-            }
-            return acc;
-          },
-          []
+        const addOnPayInAdvanceRequestBody = buildPayInAdvanceRequestBody(
+          addOnPayInAdvanceEntitlements,
+          planPeriod
         );
-        const allPayInAdvance = [...planPayInAdvance, ...addOnPayInAdvance];
+        const addOnRequestBody = buildAddOnRequestBody(
+          addOns,
+          planPeriod,
+          shouldTrial,
+          addOnPayInAdvanceEntitlements
+        );
+        const creditBundlesRequestBody = buildCreditBundlesRequestBody(creditBundles);
         const checkoutResponseFromBackend = await checkout({
           newPlanId: planId,
-          newPriceId: priceId,
-          addOnIds: addOns.reduce((acc, addOn) => {
-            if (addOn.isSelected && !shouldTrial) {
-              const addOnPriceId = getAddOnPrice(addOn, planPeriod)?.id;
-              if (addOnPriceId) {
-                acc.push({
-                  addOnId: addOn.id,
-                  priceId: addOnPriceId
-                });
-              }
-            }
-            return acc;
-          }, []),
-          payInAdvance: allPayInAdvance,
-          creditBundles: creditBundles.reduce(
-            (acc, { id, count }) => {
-              if (count > 0) {
-                acc.push({
-                  bundleId: id,
-                  quantity: count
-                });
-              }
-              return acc;
-            },
-            []
-          ),
+          newPriceId: planPriceId,
+          addOnIds: addOnRequestBody,
+          payInAdvance: [
+            ...planPayInAdvanceRequestBody,
+            ...addOnPayInAdvanceRequestBody
+          ],
+          creditBundles: creditBundlesRequestBody,
           skipTrial: !shouldTrial,
           ...paymentMethodId && { paymentMethodId },
           ...promoCode && { promoCode }
@@ -17815,7 +17812,7 @@ var SubscriptionSidebar = (0, import_react39.forwardRef)(
       setIsLoading,
       setLayout,
       payInAdvanceEntitlements,
-      addOnUsageBasedEntitlements,
+      addOnPayInAdvanceEntitlements,
       shouldTrial,
       promoCode,
       finishCheckout

package/dist/schematic-components.esm.js

@@ -5083,6 +5083,54 @@ function shouldCollectBillingAddress(collectAddressSetting, financeData) {
   return isBillingAddressRequiredForTax(financeData);
 }
 
+// src/utils/api/checkout.ts
+function buildPayInAdvanceRequestBody(entitlements, period) {
+  return entitlements.reduce(
+    (acc, { meteredMonthlyPrice, meteredYearlyPrice, quantity }) => {
+      const priceId = (period === "year" ? meteredYearlyPrice : meteredMonthlyPrice)?.priceId;
+      if (priceId) {
+        acc.push({
+          priceId,
+          quantity
+        });
+      }
+      return acc;
+    },
+    []
+  );
+}
+function buildAddOnRequestBody(addOns, period, shouldTrial, addOnPayInAdvanceEntitlements) {
+  return addOns.reduce((acc, addOn) => {
+    if (addOn.isSelected && !shouldTrial) {
+      const addOnPrice = getAddOnPrice(addOn, period);
+      const addOnPriceId = addOnPrice?.id;
+      if (addOnPriceId && (addOnPrice?.price || addOnPayInAdvanceEntitlements.some(
+        (e2) => e2.priceBehavior === EntitlementPriceBehavior.PayInAdvance
+      ))) {
+        acc.push({
+          addOnId: addOn.id,
+          priceId: addOnPriceId
+        });
+      }
+    }
+    return acc;
+  }, []);
+}
+function buildCreditBundlesRequestBody(creditBundles) {
+  return creditBundles.reduce(
+    (acc, { id, count }) => {
+      if (count > 0) {
+        acc.push({
+          bundleId: id,
+          quantity: count
+        });
+      }
+      return acc;
+    },
+    []
+  );
+}
+
 // src/utils/api/credit.ts
 function getResetCadencePeriod(cadence) {
   switch (cadence) {
@@ -12286,7 +12334,7 @@ var reducer = (state, action) => {
 // src/context/EmbedProvider.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
 var getCustomHeaders = (sessionId) => ({
-  "X-Schematic-Components-Version": "2.8.1",
+  "X-Schematic-Components-Version": "2.8.2",
   "X-Schematic-Session-ID": sessionId
 });
 var EmbedProvider = ({
@@ -15811,63 +15859,34 @@ var CheckoutDialog = ({ top }) => {
       setError(void 0);
       setCharges(void 0);
       setIsLoading(true);
-      const addOnRequestBody = (updates.addOns || addOns).reduce(
-        (acc, addOn) => {
-          if (addOn.isSelected) {
-            const addOnPriceId = getAddOnPrice(addOn, period)?.id;
-            if (addOnPriceId) {
-              acc.push({
-                addOnId: addOn.id,
-                priceId: addOnPriceId
-              });
-            }
-          }
-          return acc;
-        },
-        []
+      const resolvedPayInAdvanceEntitlements = updates.payInAdvanceEntitlements || payInAdvanceEntitlements;
+      const resolvedAddOnPayInAdvanceEntitlements = updates.addOnPayInAdvanceEntitlements || addOnPayInAdvanceEntitlements;
+      const resolvedAddOns = updates.addOns || addOns;
+      const resolvedCreditBundles = updates.creditBundles || creditBundles;
+      const planPayInAdvanceRequestBody = buildPayInAdvanceRequestBody(
+        resolvedPayInAdvanceEntitlements,
+        period
       );
-      const payInAdvanceRequestBody = (updates.payInAdvanceEntitlements || payInAdvanceEntitlements).reduce(
-        (acc, { meteredMonthlyPrice, meteredYearlyPrice, quantity }) => {
-          const priceId = (period === "year" ? meteredYearlyPrice : meteredMonthlyPrice)?.priceId;
-          if (priceId) {
-            acc.push({
-              priceId,
-              quantity
-            });
-          }
-          return acc;
-        },
-        []
+      const addOnPayInAdvanceRequestBody = buildPayInAdvanceRequestBody(
+        resolvedAddOnPayInAdvanceEntitlements,
+        period
       );
-      const addOnPayInAdvanceRequestBody = (updates.addOnPayInAdvanceEntitlements || addOnUsageBasedEntitlements).reduce(
-        (acc, { meteredMonthlyPrice, meteredYearlyPrice, quantity }) => {
-          const priceId = (period === "year" ? meteredYearlyPrice : meteredMonthlyPrice)?.priceId;
-          if (priceId) {
-            acc.push({
-              priceId,
-              quantity
-            });
-          }
-          return acc;
-        },
-        []
+      const addOnRequestBody = buildAddOnRequestBody(
+        resolvedAddOns,
+        period,
+        shouldTrial,
+        resolvedAddOnPayInAdvanceEntitlements
+      );
+      const creditBundlesRequestBody = buildCreditBundlesRequestBody(
+        resolvedCreditBundles
       );
-      const creditBundlesRequestBody = (updates.creditBundles || creditBundles).reduce((acc, { id, count }) => {
-        if (count > 0) {
-          acc.push({
-            bundleId: id,
-            quantity: count
-          });
-        }
-        return acc;
-      }, []);
       try {
         const response = await previewCheckout({
           newPlanId: plan.id,
           newPriceId: planPriceId,
           addOnIds: addOnRequestBody,
           payInAdvance: [
-            ...payInAdvanceRequestBody,
+            ...planPayInAdvanceRequestBody,
             ...addOnPayInAdvanceRequestBody
           ],
           creditBundles: creditBundlesRequestBody,
@@ -15932,7 +15951,7 @@ var CheckoutDialog = ({ top }) => {
       planPeriod,
       selectedPlan,
       payInAdvanceEntitlements,
-      addOnUsageBasedEntitlements,
+      addOnPayInAdvanceEntitlements,
       addOns,
       creditBundles,
       shouldTrial,
@@ -16020,25 +16039,31 @@ var CheckoutDialog = ({ top }) => {
           ...addOn,
           ...addOn.id === id && { isSelected: !addOn.isSelected }
         }));
-        const updatedAddOnEntitlements = updated.filter((addOn) => addOn.isSelected).flatMap(
-          (addOn) => addOn.entitlements.filter(
-            (entitlement) => entitlement.priceBehavior === EntitlementPriceBehavior.PayInAdvance
-          ).map((entitlement) => ({
-            ...entitlement,
-            allocation: entitlement.valueNumeric || 0,
-            usage: 0,
-            quantity: 1
-          }))
-        );
+        const updatedAddOnEntitlements = updated.filter((addOn) => addOn.isSelected).flatMap((addOn) => {
+          return addOn.entitlements.filter((entitlement) => !!entitlement.priceBehavior).map((source) => {
+            const found = addOnUsageBasedEntitlements.find(
+              (current) => current.id === source.id
+            );
+            return {
+              ...source,
+              allocation: found?.allocation ?? source.valueNumeric ?? 0,
+              usage: found?.usage ?? 0,
+              quantity: found?.quantity ?? 1
+            };
+          });
+        });
         setAddOnUsageBasedEntitlements(updatedAddOnEntitlements);
+        const updatedAddOnPayInAdvanceEntitlements = updatedAddOnEntitlements.filter(
+          (entitlement) => entitlement.priceBehavior === EntitlementPriceBehavior.PayInAdvance
+        );
         handlePreviewCheckout({
           addOns: updated,
-          addOnPayInAdvanceEntitlements: updatedAddOnEntitlements
+          addOnPayInAdvanceEntitlements: updatedAddOnPayInAdvanceEntitlements
         });
         return updated;
       });
     },
-    [handlePreviewCheckout]
+    [handlePreviewCheckout, addOnUsageBasedEntitlements]
   );
   const updateUsageBasedEntitlementQuantity = useCallback7(
     (id, updatedQuantity) => {
@@ -16083,8 +16108,11 @@ var CheckoutDialog = ({ top }) => {
             quantity: updatedQuantity
           } : entitlement
         );
+        const updatedAddOnPayInAdvanceEntitlements = updated.filter(
+          (entitlement) => entitlement.priceBehavior === EntitlementPriceBehavior.PayInAdvance
+        );
         handlePreviewCheckout({
-          addOnPayInAdvanceEntitlements: updated
+          addOnPayInAdvanceEntitlements: updatedAddOnPayInAdvanceEntitlements
         });
         return updated;
       });
@@ -16404,6 +16432,7 @@ var CheckoutDialog = ({ top }) => {
               addOns,
               usageBasedEntitlements,
               addOnUsageBasedEntitlements,
+              addOnPayInAdvanceEntitlements,
               creditBundles,
               charges,
               checkoutStage,
@@ -17310,7 +17339,7 @@ var EntitlementRow = (props) => {
         " ",
         getFeatureName(feature, softLimit)
       ] }) : feature.name }) }),
-      /* @__PURE__ */ jsx30(Box, { $whiteSpace: "nowrap", children: priceBehavior === EntitlementPriceBehavior.PayInAdvance && !tiered ? /* @__PURE__ */ jsxs21(Text, { children: [
+      /* @__PURE__ */ jsx30(Box, { $whiteSpace: "nowrap", $lineHeight: 1, children: priceBehavior === EntitlementPriceBehavior.PayInAdvance && !tiered ? /* @__PURE__ */ jsxs21(Text, { children: [
         formatCurrency((price ?? 0) * quantity, currency),
         /* @__PURE__ */ jsxs21("sub", { children: [
           "/",
@@ -17424,6 +17453,7 @@ var SubscriptionSidebar = forwardRef7(
     creditBundles = [],
     usageBasedEntitlements,
     addOnUsageBasedEntitlements = [],
+    addOnPayInAdvanceEntitlements = [],
     charges,
     checkoutStage,
     checkoutStages,
@@ -17650,70 +17680,37 @@ var SubscriptionSidebar = forwardRef7(
     );
     const handleCheckout = useCallback9(async () => {
       const planId = selectedPlan?.id;
-      const priceId = (planPeriod === "year" ? selectedPlan?.yearlyPrice : selectedPlan?.monthlyPrice)?.id;
+      const planPriceId = (planPeriod === "year" ? selectedPlan?.yearlyPrice : selectedPlan?.monthlyPrice)?.id;
       try {
-        if (!planId || !priceId) {
+        if (!planId || !planPriceId) {
           throw new Error(t2("Selected plan or associated price is missing."));
         }
         setError(void 0);
         setIsLoading(true);
-        const planPayInAdvance = payInAdvanceEntitlements.reduce(
-          (acc, { meteredMonthlyPrice, meteredYearlyPrice, quantity }) => {
-            const priceId2 = (planPeriod === "year" ? meteredYearlyPrice : meteredMonthlyPrice)?.priceId;
-            if (priceId2) {
-              acc.push({
-                priceId: priceId2,
-                quantity
-              });
-            }
-            return acc;
-          },
-          []
+        const planPayInAdvanceRequestBody = buildPayInAdvanceRequestBody(
+          payInAdvanceEntitlements,
+          planPeriod
         );
-        const addOnPayInAdvance = addOnUsageBasedEntitlements.filter(
-          (entitlement) => entitlement.priceBehavior === EntitlementPriceBehavior.PayInAdvance
-        ).reduce(
-          (acc, { meteredMonthlyPrice, meteredYearlyPrice, quantity }) => {
-            const priceId2 = (planPeriod === "year" ? meteredYearlyPrice : meteredMonthlyPrice)?.priceId;
-            if (priceId2) {
-              acc.push({
-                priceId: priceId2,
-                quantity
-              });
-            }
-            return acc;
-          },
-          []
+        const addOnPayInAdvanceRequestBody = buildPayInAdvanceRequestBody(
+          addOnPayInAdvanceEntitlements,
+          planPeriod
         );
-        const allPayInAdvance = [...planPayInAdvance, ...addOnPayInAdvance];
+        const addOnRequestBody = buildAddOnRequestBody(
+          addOns,
+          planPeriod,
+          shouldTrial,
+          addOnPayInAdvanceEntitlements
+        );
+        const creditBundlesRequestBody = buildCreditBundlesRequestBody(creditBundles);
         const checkoutResponseFromBackend = await checkout({
           newPlanId: planId,
-          newPriceId: priceId,
-          addOnIds: addOns.reduce((acc, addOn) => {
-            if (addOn.isSelected && !shouldTrial) {
-              const addOnPriceId = getAddOnPrice(addOn, planPeriod)?.id;
-              if (addOnPriceId) {
-                acc.push({
-                  addOnId: addOn.id,
-                  priceId: addOnPriceId
-                });
-              }
-            }
-            return acc;
-          }, []),
-          payInAdvance: allPayInAdvance,
-          creditBundles: creditBundles.reduce(
-            (acc, { id, count }) => {
-              if (count > 0) {
-                acc.push({
-                  bundleId: id,
-                  quantity: count
-                });
-              }
-              return acc;
-            },
-            []
-          ),
+          newPriceId: planPriceId,
+          addOnIds: addOnRequestBody,
+          payInAdvance: [
+            ...planPayInAdvanceRequestBody,
+            ...addOnPayInAdvanceRequestBody
+          ],
+          creditBundles: creditBundlesRequestBody,
           skipTrial: !shouldTrial,
           ...paymentMethodId && { paymentMethodId },
           ...promoCode && { promoCode }
@@ -17764,7 +17761,7 @@ var SubscriptionSidebar = forwardRef7(
       setIsLoading,
       setLayout,
       payInAdvanceEntitlements,
-      addOnUsageBasedEntitlements,
+      addOnPayInAdvanceEntitlements,
       shouldTrial,
       promoCode,
       finishCheckout

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@schematichq/schematic-components",
-  "version": "2.8.1",
+  "version": "2.8.2",
   "main": "dist/schematic-components.cjs.js",
   "module": "dist/schematic-components.esm.js",
   "types": "dist/schematic-components.d.ts",
@@ -35,7 +35,7 @@
   "dependencies": {
     "@schematichq/schematic-icons": "^0.5.2",
     "@stripe/stripe-js": "^8.11.0",
-    "i18next": "^25.10.5",
+    "i18next": "^25.10.9",
     "lodash": "^4.17.23",
     "pako": "^2.1.0",
     "react-i18next": "16.1.6",
@@ -65,7 +65,7 @@
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^7.0.1",
     "globals": "^17.4.0",
-    "happy-dom": "^20.8.7",
+    "happy-dom": "^20.8.8",
     "jsdom": "^29.0.1",
     "msw": "^2.12.14",
     "prettier": "^3.8.1",