@schematichq/schematic-components 1.4.2 → 1.4.3

package/dist/schematic-components.cjs.js

@@ -1918,7 +1918,7 @@ var HOURS_IN_MS = MINUTES_IN_MS * 60;
 var DAYS_IN_MS = HOURS_IN_MS * 24;
 
 // src/const/debounce.ts
-var debounceOptions = {
+var DEBOUNCE_SETTINGS = {
   leading: true,
   trailing: false
 };
@@ -4273,6 +4273,7 @@ var initialContext = {
   hydrateComponent: stub,
   hydrateExternal: stub,
   getUpcomingInvoice: stub,
+  getCustomerBalance: stub,
   listInvoices: stub,
   createSetupIntent: stub,
   updatePaymentMethod: stub,
@@ -4285,7 +4286,8 @@ var initialContext = {
   setLayout: stub,
   setCheckoutState: stub,
   setData: stub,
-  updateSettings: stub
+  updateSettings: stub,
+  debug: stub
 };
 var EmbedContext = (0, import_react3.createContext)(initialContext);
 
@@ -6779,8 +6781,10 @@ var en_default = {
     "Choose add-on": "Choose add-on",
     "Choose plan": "Choose plan",
     "Choose your base plan": "Choose your base plan",
-    "Credits to be applied to future invoices": "Credits to be applied to future invoices",
+    "Credit bundles": "Credit bundles",
     Credits: "Credits",
+    "Credits in plan": "Credits in plan",
+    "Credits to be applied to future invoices": "Credits to be applied to future invoices",
     "Current plan": "Current plan",
     "Current usage exceeds the limit of this plan.": "Current usage exceeds the limit of this plan.",
     "Currently using": "Currently using {{quantity}} {{unit}}",
@@ -6831,8 +6835,10 @@ var en_default = {
     "Please provide an access token.": "Please provide an access token.",
     "Powered by": "Powered by",
     "Price by unit based on final tier reached.": "Price by unit based on final tier reached.",
+    "Promotional credits": "Promotional credits",
     Proration: "Proration",
     "Quantity to pay for in advance": "Quantity to pay for in advance",
+    "Remaining balance": "Remaining balance",
     "Remove add-on": "Remove add-on",
     Resets: "Resets {{date}}",
     "Save payment method": "Save payment method",
@@ -10521,7 +10527,7 @@ var EmbedProvider = ({
   });
   const customHeaders = (0, import_react12.useMemo)(
     () => ({
-      "X-Schematic-Components-Version": "1.4.2",
+      "X-Schematic-Components-Version": "1.4.3",
       "X-Schematic-Session-ID": sessionIdRef.current
     }),
     []
@@ -10554,7 +10560,7 @@ var EmbedProvider = ({
     }
   }, [api.public]);
   const debouncedHydratePublic = (0, import_react12.useMemo)(
-    () => (0, import_debounce.default)(hydratePublic, FETCH_DEBOUNCE_TIMEOUT, debounceOptions),
+    () => (0, import_debounce.default)(hydratePublic, FETCH_DEBOUNCE_TIMEOUT, DEBOUNCE_SETTINGS),
     [hydratePublic]
   );
   const hydrate = (0, import_react12.useCallback)(async () => {
@@ -10576,7 +10582,7 @@ var EmbedProvider = ({
     }
   }, [api.checkout]);
   const debouncedHydrate = (0, import_react12.useMemo)(
-    () => (0, import_debounce.default)(hydrate, FETCH_DEBOUNCE_TIMEOUT, debounceOptions),
+    () => (0, import_debounce.default)(hydrate, FETCH_DEBOUNCE_TIMEOUT, DEBOUNCE_SETTINGS),
     [hydrate]
   );
   const hydrateComponent = (0, import_react12.useCallback)(
@@ -10603,7 +10609,7 @@ var EmbedProvider = ({
     [api.checkout]
   );
   const debouncedHydrateComponent = (0, import_react12.useMemo)(
-    () => (0, import_debounce.default)(hydrateComponent, FETCH_DEBOUNCE_TIMEOUT, debounceOptions),
+    () => (0, import_debounce.default)(hydrateComponent, FETCH_DEBOUNCE_TIMEOUT, DEBOUNCE_SETTINGS),
     [hydrateComponent]
   );
   const hydrateExternal = (0, import_react12.useCallback)(async function(fn) {
@@ -10623,14 +10629,14 @@ var EmbedProvider = ({
     }
   }, []);
   const debouncedHydrateExternal = (0, import_react12.useMemo)(
-    () => (0, import_debounce.default)(hydrateExternal, FETCH_DEBOUNCE_TIMEOUT, debounceOptions),
+    () => (0, import_debounce.default)(hydrateExternal, FETCH_DEBOUNCE_TIMEOUT, DEBOUNCE_SETTINGS),
     [hydrateExternal]
   );
   const createSetupIntent = (0, import_react12.useCallback)(async () => {
     return api.checkout?.createSetupIntent();
   }, [api.checkout]);
   const debouncedCreateSetupIntent = (0, import_react12.useMemo)(
-    () => (0, import_debounce.default)(createSetupIntent, FETCH_DEBOUNCE_TIMEOUT, debounceOptions),
+    () => (0, import_debounce.default)(createSetupIntent, FETCH_DEBOUNCE_TIMEOUT, DEBOUNCE_SETTINGS),
     [createSetupIntent]
   );
   const updatePaymentMethod = (0, import_react12.useCallback)(
@@ -10649,7 +10655,7 @@ var EmbedProvider = ({
     [api.checkout]
   );
   const debouncedUpdatePaymentMethod = (0, import_react12.useMemo)(
-    () => (0, import_debounce.default)(updatePaymentMethod, FETCH_DEBOUNCE_TIMEOUT, debounceOptions),
+    () => (0, import_debounce.default)(updatePaymentMethod, FETCH_DEBOUNCE_TIMEOUT, DEBOUNCE_SETTINGS),
     [updatePaymentMethod]
   );
   const deletePaymentMethod = (0, import_react12.useCallback)(
@@ -10668,7 +10674,7 @@ var EmbedProvider = ({
     [api.checkout]
   );
   const debouncedDeletePaymentMethod = (0, import_react12.useMemo)(
-    () => (0, import_debounce.default)(deletePaymentMethod, FETCH_DEBOUNCE_TIMEOUT, debounceOptions),
+    () => (0, import_debounce.default)(deletePaymentMethod, FETCH_DEBOUNCE_TIMEOUT, DEBOUNCE_SETTINGS),
     [deletePaymentMethod]
   );
   const checkout = (0, import_react12.useCallback)(
@@ -10687,7 +10693,7 @@ var EmbedProvider = ({
     [api.checkout]
   );
   const debouncedCheckout = (0, import_react12.useMemo)(
-    () => (0, import_debounce.default)(checkout, FETCH_DEBOUNCE_TIMEOUT, debounceOptions),
+    () => (0, import_debounce.default)(checkout, FETCH_DEBOUNCE_TIMEOUT, DEBOUNCE_SETTINGS),
     [checkout]
   );
   const previewCheckout = (0, import_react12.useCallback)(
@@ -10697,7 +10703,12 @@ var EmbedProvider = ({
     [api.checkout]
   );
   const debouncedPreviewCheckout = (0, import_react12.useMemo)(
-    () => (0, import_debounce.default)(previewCheckout, FETCH_DEBOUNCE_TIMEOUT, debounceOptions),
+    () => (0, import_debounce.default)(previewCheckout, FETCH_DEBOUNCE_TIMEOUT, {
+      // invoke immediately for minimal latency
+      leading: true,
+      // but also ensure latest data is fetched
+      trailing: true
+    }),
     [previewCheckout]
   );
   const unsubscribe = (0, import_react12.useCallback)(async () => {
@@ -10711,7 +10722,7 @@ var EmbedProvider = ({
     return response;
   }, [api.checkout]);
   const debouncedUnsubscribe = (0, import_react12.useMemo)(
-    () => (0, import_debounce.default)(unsubscribe, FETCH_DEBOUNCE_TIMEOUT, debounceOptions),
+    () => (0, import_debounce.default)(unsubscribe, FETCH_DEBOUNCE_TIMEOUT, DEBOUNCE_SETTINGS),
     [unsubscribe]
   );
   const getUpcomingInvoice = (0, import_react12.useCallback)(
@@ -10723,19 +10734,30 @@ var EmbedProvider = ({
     [api.checkout]
   );
   const debouncedGetUpcomingInvoice = (0, import_react12.useMemo)(
-    () => (0, import_debounce.default)(getUpcomingInvoice, FETCH_DEBOUNCE_TIMEOUT, debounceOptions),
+    () => (0, import_debounce.default)(getUpcomingInvoice, FETCH_DEBOUNCE_TIMEOUT, DEBOUNCE_SETTINGS),
     [getUpcomingInvoice]
   );
+  const getCustomerBalance = (0, import_react12.useCallback)(async () => {
+    return api.checkout?.fetchCustomerBalance();
+  }, [api.checkout]);
+  const debouncedGetCustomerBalance = (0, import_react12.useMemo)(
+    () => (0, import_debounce.default)(getCustomerBalance, FETCH_DEBOUNCE_TIMEOUT, DEBOUNCE_SETTINGS),
+    [getCustomerBalance]
+  );
   const listInvoices = (0, import_react12.useCallback)(async () => {
     return api.checkout?.listInvoices();
   }, [api.checkout]);
   const debouncedListInvoices = (0, import_react12.useMemo)(
-    () => (0, import_debounce.default)(listInvoices, FETCH_DEBOUNCE_TIMEOUT, debounceOptions),
+    () => (0, import_debounce.default)(listInvoices, FETCH_DEBOUNCE_TIMEOUT, DEBOUNCE_SETTINGS),
     [listInvoices]
   );
-  const setError = (0, import_react12.useCallback)((error) => {
-    dispatch({ type: "ERROR", error });
-  }, []);
+  const setError = (0, import_react12.useCallback)(
+    (error) => {
+      debug(error.message);
+      dispatch({ type: "ERROR", error });
+    },
+    [debug]
+  );
   const setAccessToken = (0, import_react12.useCallback)((token2) => {
     dispatch({ type: "SET_ACCESS_TOKEN", token: token2 });
   }, []);
@@ -10760,13 +10782,13 @@ var EmbedProvider = ({
     );
     if (element) {
       styleRef.current = element;
-      return;
+    } else {
+      const style = document.createElement("link");
+      style.id = "schematic-fonts";
+      style.rel = "stylesheet";
+      document.head.appendChild(style);
+      styleRef.current = style;
     }
-    const style = document.createElement("link");
-    style.id = "schematic-fonts";
-    style.rel = "stylesheet";
-    document.head.appendChild(style);
-    styleRef.current = style;
     const darkModeQuery = matchMedia("(prefers-color-scheme: dark)");
     const colorMode = darkModeQuery.matches ? "dark" : "light";
     dispatch({
@@ -10777,13 +10799,17 @@ var EmbedProvider = ({
         }
       }
     });
-    darkModeQuery.addEventListener("change", (event) => {
+    function darkModeQueryHandler(event) {
       const newColorMode = event.matches ? "dark" : "light";
       dispatch({
         type: "UPDATE_SETTINGS",
         settings: { theme: { colorMode: newColorMode } }
       });
-    });
+    }
+    darkModeQuery.addEventListener("change", darkModeQueryHandler);
+    return () => {
+      darkModeQuery.removeEventListener("change", darkModeQueryHandler);
+    };
   }, []);
   (0, import_react12.useEffect)(() => {
     const fontSet = /* @__PURE__ */ new Set([]);
@@ -10829,24 +10855,19 @@ var EmbedProvider = ({
       }));
     }
   }, [state.accessToken, apiConfig, customHeaders]);
-  (0, import_react12.useEffect)(() => {
-    if (state.error) {
-      debug(state.error.message);
-    }
-  }, [debug, state.error]);
   (0, import_react12.useEffect)(() => {
     const providedSettings = { ...options.settings || {} };
     updateSettings(providedSettings, { update: false });
   }, [options.settings, updateSettings]);
   (0, import_react12.useEffect)(() => {
-    const planChanged = (event) => {
+    function planChangedHandler(event) {
       if (event instanceof CustomEvent) {
         debug("plan changed", event.detail);
       }
-    };
-    window.addEventListener("plan-changed", planChanged);
+    }
+    window.addEventListener("plan-changed", planChangedHandler);
     return () => {
-      window.removeEventListener("plan-changed", planChanged);
+      window.removeEventListener("plan-changed", planChangedHandler);
     };
   }, [debug]);
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
@@ -10871,13 +10892,15 @@ var EmbedProvider = ({
         previewCheckout: debouncedPreviewCheckout,
         unsubscribe: debouncedUnsubscribe,
         getUpcomingInvoice: debouncedGetUpcomingInvoice,
+        getCustomerBalance: debouncedGetCustomerBalance,
         listInvoices: debouncedListInvoices,
         setError,
         setAccessToken,
         setLayout,
         setCheckoutState,
         setData,
-        updateSettings
+        updateSettings,
+        debug
       },
       children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(ot, { theme: state.settings.theme, children: [
         /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(IconStyles, {}),
@@ -14712,11 +14735,12 @@ var CheckoutDialog = ({ top = 0 }) => {
       const entitlements = plan.entitlements.reduce(
         (acc, entitlement) => {
           if (entitlement.priceBehavior && (period === "month" && entitlement.meteredMonthlyPrice || period === "year" && entitlement.meteredYearlyPrice)) {
+            const allocation = entitlement.valueNumeric || 0;
             acc.push({
               ...entitlement,
-              allocation: entitlement.valueNumeric || 0,
+              allocation,
               usage: 0,
-              quantity: 0
+              quantity: allocation
             });
           }
           return acc;
@@ -17802,11 +17826,29 @@ var PlanManager = (0, import_react48.forwardRef)(({ children, className, portal,
         featureUsage: featureUsage2,
         trialPaymentMethodRequired: trialPaymentMethodRequired2
       } = data;
+      const creditGroups2 = groupCreditGrants(creditGrants, {
+        groupBy: "bundle"
+      }).reduce(
+        (acc, grant) => {
+          switch (grant.grantReason) {
+            case "plan" /* Plan */:
+              acc.plan.push(grant);
+              break;
+            case "purchased" /* Purchased */:
+              acc.bundles.push(grant);
+              break;
+            case "free" /* Free */:
+              acc.promotional.push(grant);
+          }
+          return acc;
+        },
+        { plan: [], bundles: [], promotional: [] }
+      );
       return {
         currentPlan: company?.plan,
         currentAddOns: company?.addOns || [],
         creditBundles: creditBundles2,
-        creditGroups: groupCreditGrants(creditGrants, { groupBy: "bundle" }),
+        creditGroups: creditGroups2,
         billingSubscription: company?.billingSubscription,
         canCheckout: capabilities?.checkout ?? true,
         defaultPlan: defaultPlan2,
@@ -17818,7 +17860,7 @@ var PlanManager = (0, import_react48.forwardRef)(({ children, className, portal,
       currentPlan: void 0,
       currentAddOns: [],
       creditBundles: [],
-      creditGroups: [],
+      creditGroups: { plan: [], bundles: [], promotional: [] },
       billingSubscription: void 0,
       canCheckout: false,
       defaultPlan: void 0,
@@ -17975,77 +18017,151 @@ var PlanManager = (0, import_react48.forwardRef)(({ children, className, portal,
               );
             }) })
           ] }),
-          props.addOns.isVisible && creditGroups.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
+          props.addOns.isVisible && creditGroups.plan.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
             props.addOns.showLabel && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
               Text,
               {
                 $color: isLightBackground ? darken(settings.theme.card.background, 0.46) : lighten(settings.theme.card.background, 0.46),
                 $leading: 1,
-                children: t2("Credits")
+                children: t2("Credits in plan")
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Flex, { $flexDirection: "column", $gap: "1rem", children: creditGroups.reduce(
-              (acc, group, groupIndex) => {
-                const bundle = group.grantReason === "purchased" /* Purchased */ && group?.bundleId ? creditBundles.find((b2) => b2.id === group.bundleId) : void 0;
-                acc.push(
-                  /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
-                    Flex,
-                    {
-                      $justifyContent: "space-between",
-                      $alignItems: "center",
-                      $flexWrap: "wrap",
-                      $gap: "0.5rem",
-                      children: [
-                        group.grantReason === "plan" /* Plan */ ? /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(Text, { display: props.addOns.fontStyle, children: [
-                          group.quantity,
-                          " ",
-                          getFeatureName(group, group.quantity),
+            /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Flex, { $flexDirection: "column", $gap: "1rem", children: creditGroups.plan.map((group, groupIndex) => {
+              return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+                Flex,
+                {
+                  $justifyContent: "space-between",
+                  $alignItems: "center",
+                  $flexWrap: "wrap",
+                  $gap: "0.5rem",
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(Text, { display: props.addOns.fontStyle, children: [
+                      group.quantity,
+                      " ",
+                      getFeatureName(group, group.quantity),
+                      " ",
+                      subscriptionInterval && /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_jsx_runtime43.Fragment, { children: [
+                        t2("per"),
+                        " ",
+                        t2(subscriptionInterval)
+                      ] })
+                    ] }),
+                    group.total.used > 0 && /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+                      Text,
+                      {
+                        style: { opacity: 0.54 },
+                        $size: 0.875 * settings.theme.typography.text.fontSize,
+                        $color: settings.theme.typography.text.color,
+                        children: [
+                          group.total.used,
                           " ",
-                          subscriptionInterval && /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_jsx_runtime43.Fragment, { children: [
-                            t2("per"),
-                            " ",
-                            t2(subscriptionInterval)
-                          ] })
-                        ] }) : bundle ? /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(Text, { display: props.addOns.fontStyle, children: [
-                          group.grants.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(Text, { style: { opacity: 0.5 }, children: [
-                            "(",
-                            group.grants.length,
-                            ")",
-                            " "
-                          ] }),
-                          bundle.name,
-                          " (",
-                          group.quantity,
+                          t2("used")
+                        ]
+                      }
+                    )
+                  ]
+                },
+                groupIndex
+              );
+            }) })
+          ] }),
+          props.addOns.isVisible && creditGroups.bundles.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
+            props.addOns.showLabel && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+              Text,
+              {
+                $color: isLightBackground ? darken(settings.theme.card.background, 0.46) : lighten(settings.theme.card.background, 0.46),
+                $leading: 1,
+                children: t2("Credit bundles")
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Flex, { $flexDirection: "column", $gap: "1rem", children: creditGroups.bundles.map((group, groupIndex) => {
+              const bundle = group?.bundleId ? creditBundles.find((b2) => b2.id === group.bundleId) : void 0;
+              return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+                Flex,
+                {
+                  $justifyContent: "space-between",
+                  $alignItems: "center",
+                  $flexWrap: "wrap",
+                  $gap: "0.5rem",
+                  children: [
+                    bundle ? /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(Text, { display: props.addOns.fontStyle, children: [
+                      group.grants.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(Text, { style: { opacity: 0.5 }, children: [
+                        "(",
+                        group.grants.length,
+                        ")",
+                        " "
+                      ] }),
+                      bundle.name,
+                      " (",
+                      group.quantity,
+                      " ",
+                      getFeatureName(group, group.quantity),
+                      ")"
+                    ] }) : /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(Text, { display: props.addOns.fontStyle, children: [
+                      group.quantity,
+                      " ",
+                      getFeatureName(group, group.quantity)
+                    ] }),
+                    group.total.used > 0 && /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+                      Text,
+                      {
+                        style: { opacity: 0.54 },
+                        $size: 0.875 * settings.theme.typography.text.fontSize,
+                        $color: settings.theme.typography.text.color,
+                        children: [
+                          group.total.used,
                           " ",
-                          getFeatureName(group, group.quantity),
-                          ")"
-                        ] }) : /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(Text, { display: props.addOns.fontStyle, children: [
-                          group.quantity,
+                          t2("used")
+                        ]
+                      }
+                    )
+                  ]
+                },
+                groupIndex
+              );
+            }) })
+          ] }),
+          props.addOns.isVisible && creditGroups.promotional.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
+            props.addOns.showLabel && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+              Text,
+              {
+                $color: isLightBackground ? darken(settings.theme.card.background, 0.46) : lighten(settings.theme.card.background, 0.46),
+                $leading: 1,
+                children: t2("Promotional credits")
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Flex, { $flexDirection: "column", $gap: "1rem", children: creditGroups.promotional.map((group, groupIndex) => {
+              return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+                Flex,
+                {
+                  $justifyContent: "space-between",
+                  $alignItems: "center",
+                  $flexWrap: "wrap",
+                  $gap: "0.5rem",
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(Text, { display: props.addOns.fontStyle, children: [
+                      group.quantity,
+                      " ",
+                      getFeatureName(group, group.quantity)
+                    ] }),
+                    group.total.used > 0 && /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+                      Text,
+                      {
+                        style: { opacity: 0.54 },
+                        $size: 0.875 * settings.theme.typography.text.fontSize,
+                        $color: settings.theme.typography.text.color,
+                        children: [
+                          group.total.used,
                           " ",
-                          getFeatureName(group, group.quantity)
-                        ] }),
-                        group.total.used > 0 && /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
-                          Text,
-                          {
-                            style: { opacity: 0.54 },
-                            $size: 0.875 * settings.theme.typography.text.fontSize,
-                            $color: settings.theme.typography.text.color,
-                            children: [
-                              group.total.used,
-                              " ",
-                              t2("used")
-                            ]
-                          }
-                        )
-                      ]
-                    },
-                    groupIndex
-                  )
-                );
-                return acc;
-              },
-              []
-            ) })
+                          t2("used")
+                        ]
+                      }
+                    )
+                  ]
+                },
+                groupIndex
+              );
+            }) })
           ] }),
           canCheckout && props.callToAction.isVisible && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
             Button,
@@ -19058,11 +19174,12 @@ function resolveDesignProps11(props) {
 var UpcomingBill = (0, import_react54.forwardRef)(({ className, ...rest }, ref) => {
   const props = resolveDesignProps11(rest);
   const { t: t2 } = useTranslation();
-  const { data, settings, getUpcomingInvoice } = useEmbed();
+  const { data, settings, debug, getUpcomingInvoice, getCustomerBalance } = useEmbed();
   const isLightBackground = useIsLightBackground();
   const [isLoading, setIsLoading] = (0, import_react54.useState)(false);
   const [error, setError] = (0, import_react54.useState)();
   const [upcomingInvoice, setUpcomingInvoice] = (0, import_react54.useState)();
+  const [balances, setBalances] = (0, import_react54.useState)([]);
   const discounts = (0, import_react54.useMemo)(() => {
     return (isCheckoutData(data) && data.subscription?.discounts || []).map(
       (discount) => ({
@@ -19091,9 +19208,22 @@ var UpcomingBill = (0, import_react54.forwardRef)(({ className, ...rest }, ref)
       }
     }
   }, [data, getUpcomingInvoice]);
+  const getBalances = (0, import_react54.useCallback)(async () => {
+    try {
+      const response = await getCustomerBalance();
+      if (response) {
+        setBalances(response.data.balances);
+      }
+    } catch (err2) {
+      debug("Failed to fetch customer balance.", err2);
+    }
+  }, [debug, getCustomerBalance]);
   (0, import_react54.useEffect)(() => {
     getInvoice();
   }, [getInvoice]);
+  (0, import_react54.useEffect)(() => {
+    getBalances();
+  }, [getBalances]);
   if (!isCheckoutData(data) || !data.subscription || data.subscription.cancelAt) {
     return null;
   }
@@ -19143,6 +19273,19 @@ var UpcomingBill = (0, import_react54.forwardRef)(({ className, ...rest }, ref)
           ]
         }
       ),
+      balances.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
+        Flex,
+        {
+          as: TransitionBox,
+          $justifyContent: "space-between",
+          $alignItems: "start",
+          $gap: "1rem",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Text, { $weight: 600, children: t2("Remaining balance") }),
+            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Flex, { $flexDirection: "column", $gap: "0.5rem", children: balances.map((item, idx) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Text, { children: formatCurrency(item.balance, item.currency) }, idx)) })
+          ]
+        }
+      ),
       discounts.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
         Flex,
         {