@schematichq/schematic-components 0.4.2 → 0.4.3

package/dist/schematic-components.cjs.js

@@ -11254,6 +11254,21 @@ function PlanEntitlementResponseDataFromJSONTyped(json, ignoreDiscriminator) {
   };
 }
 
+// src/api/models/CustomPlanConfig.ts
+function CustomPlanConfigFromJSON(json) {
+  return CustomPlanConfigFromJSONTyped(json, false);
+}
+function CustomPlanConfigFromJSONTyped(json, ignoreDiscriminator) {
+  if (json == null) {
+    return json;
+  }
+  return {
+    ctaText: json["cta_text"],
+    ctaWebSite: json["cta_web_site"],
+    priceText: json["price_text"]
+  };
+}
+
 // src/api/models/CompanyPlanDetailResponseData.ts
 function CompanyPlanDetailResponseDataFromJSON(json) {
   return CompanyPlanDetailResponseDataFromJSONTyped(json, false);
@@ -11269,6 +11284,8 @@ function CompanyPlanDetailResponseDataFromJSONTyped(json, ignoreDiscriminator) {
     companyCount: json["company_count"],
     createdAt: new Date(json["created_at"]),
     current: json["current"],
+    custom: json["custom"],
+    customPlanConfig: json["custom_plan_config"] == null ? void 0 : CustomPlanConfigFromJSON(json["custom_plan_config"]),
     description: json["description"],
     entitlements: json["entitlements"].map(
       PlanEntitlementResponseDataFromJSON
@@ -11278,6 +11295,7 @@ function CompanyPlanDetailResponseDataFromJSONTyped(json, ignoreDiscriminator) {
     ),
     icon: json["icon"],
     id: json["id"],
+    isCustom: json["is_custom"],
     isDefault: json["is_default"],
     isFree: json["is_free"],
     isTrialable: json["is_trialable"],
@@ -12526,8 +12544,12 @@ function isEditorState(obj) {
   });
 }
 function getEditorState(json) {
-  const obj = JSON.parse(json);
-  return isEditorState(obj) ? obj : void 0;
+  if (json) {
+    const obj = JSON.parse(json);
+    if (isEditorState(obj)) {
+      return obj;
+    }
+  }
 }
 function parseEditorState(data) {
   const initialMap = {};
@@ -12707,7 +12729,7 @@ var EmbedProvider = ({
   (0, import_react11.useEffect)(() => {
     if (accessToken) {
       const { headers = {} } = apiConfig ?? {};
-      headers["X-Schematic-Components-Version"] = "0.4.2";
+      headers["X-Schematic-Components-Version"] = "0.4.3";
       headers["X-Schematic-Session-ID"] = sessionIdRef.current;
       const config = new Configuration({
         ...apiConfig,
@@ -12888,7 +12910,7 @@ function camelToHyphen(str) {
 function formatNumber(num) {
   return new Intl.NumberFormat("en-US").format(num);
 }
-function formatCurrency(amount) {
+function formatCurrency(amount, currency = "USD") {
   try {
     const dollars = amount / 100;
     const formatValue = (value, symbol) => {
@@ -12896,6 +12918,9 @@ function formatCurrency(amount) {
       if (formatted.endsWith(".0")) {
         formatted = formatted.slice(0, -2);
       }
+      if (currency.toUpperCase() !== "USD") {
+        return `${currency.toUpperCase()}${formatted}${symbol}`;
+      }
       return `$${formatted}${symbol}`;
     };
     if (dollars >= 1e6) {
@@ -12905,14 +12930,14 @@ function formatCurrency(amount) {
     } else {
       return new Intl.NumberFormat("en-US", {
         style: "currency",
-        currency: "USD"
+        currency: currency.toUpperCase()
       }).format(dollars);
     }
   } catch (error) {
     console.error("Error formatting currency", error);
     return new Intl.NumberFormat("en-US", {
       style: "currency",
-      currency: "USD"
+      currency: currency.toUpperCase()
     }).format(amount / 100);
   }
 }
@@ -14439,6 +14464,7 @@ var Sidebar = ({
     }
     let total = 0;
     const planPrice = (planPeriod === "month" ? selectedPlan.monthlyPrice : selectedPlan.yearlyPrice)?.price;
+    const currency = (planPeriod === "month" ? selectedPlan.monthlyPrice : selectedPlan.yearlyPrice)?.currency;
     if (planPrice) {
       total += planPrice;
     }
@@ -14452,7 +14478,7 @@ var Sidebar = ({
       0
     );
     total += payInAdvanceCost;
-    return formatCurrency(total);
+    return formatCurrency(total, currency);
   }, [selectedPlan, addOns, payInAdvanceEntitlements, planPeriod]);
   const { amountOff, dueNow, newCharges, percentOff, periodStart, proration } = (0, import_react21.useMemo)(() => {
     return {
@@ -14687,7 +14713,10 @@ var Sidebar = ({
                           $weight: theme.typography.text.fontWeight,
                           $color: theme.typography.text.color,
                           children: [
-                            formatCurrency(data.company.plan.planPrice),
+                            formatCurrency(
+                              data.company.plan.planPrice,
+                              data.company.billingSubscription?.currency
+                            ),
                             /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("sub", { children: [
                               "/",
                               shortenPeriod(
@@ -14747,7 +14776,8 @@ var Sidebar = ({
                             $color: theme.typography.text.color,
                             children: [
                               formatCurrency(
-                                (planPeriod === "month" ? selectedPlan.monthlyPrice : selectedPlan.yearlyPrice)?.price ?? 0
+                                (planPeriod === "month" ? selectedPlan.monthlyPrice : selectedPlan.yearlyPrice)?.price ?? 0,
+                                (planPeriod === "month" ? selectedPlan.monthlyPrice : selectedPlan.yearlyPrice)?.currency
                               ),
                               /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("sub", { children: [
                                 "/",
@@ -14810,14 +14840,20 @@ var Sidebar = ({
                                   $color: theme.typography.text.color,
                                   children: [
                                     entitlement.priceBehavior === "pay_in_advance" && typeof price === "number" && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
-                                      formatCurrency(price * quantity),
+                                      formatCurrency(
+                                        price * quantity,
+                                        (planPeriod === "month" ? entitlement.meteredMonthlyPrice : entitlement.meteredYearlyPrice)?.currency
+                                      ),
                                       /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("sub", { children: [
                                         "/",
                                         shortenPeriod(planPeriod)
                                       ] })
                                     ] }),
                                     entitlement.priceBehavior === "pay_as_you_go" && typeof price === "number" && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
-                                      formatCurrency(price),
+                                      formatCurrency(
+                                        price,
+                                        (planPeriod === "month" ? entitlement.meteredMonthlyPrice : entitlement.meteredYearlyPrice)?.currency
+                                      ),
                                       /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("sub", { children: [
                                         "/",
                                         (0, import_pluralize.default)(
@@ -14877,7 +14913,8 @@ var Sidebar = ({
                                     $color: theme.typography.text.color,
                                     children: [
                                       formatCurrency(
-                                        ((planPeriod === "month" ? entitlement.meteredMonthlyPrice : entitlement.meteredYearlyPrice)?.price || 0) * previous.quantity
+                                        ((planPeriod === "month" ? entitlement.meteredMonthlyPrice : entitlement.meteredYearlyPrice)?.price || 0) * previous.quantity,
+                                        (planPeriod === "month" ? entitlement.meteredMonthlyPrice : entitlement.meteredYearlyPrice)?.currency
                                       ),
                                       /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("sub", { children: [
                                         "/",
@@ -14919,7 +14956,8 @@ var Sidebar = ({
                                     $color: theme.typography.text.color,
                                     children: [
                                       formatCurrency(
-                                        ((planPeriod === "month" ? entitlement.meteredMonthlyPrice : entitlement.meteredYearlyPrice)?.price || 0) * next2.quantity
+                                        ((planPeriod === "month" ? entitlement.meteredMonthlyPrice : entitlement.meteredYearlyPrice)?.price || 0) * next2.quantity,
+                                        (planPeriod === "month" ? entitlement.meteredMonthlyPrice : entitlement.meteredYearlyPrice)?.currency
                                       ),
                                       /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("sub", { children: [
                                         "/",
@@ -14973,14 +15011,20 @@ var Sidebar = ({
                                   $color: theme.typography.text.color,
                                   children: [
                                     entitlement.priceBehavior === "pay_in_advance" && typeof price === "number" && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
-                                      formatCurrency(price * quantity),
+                                      formatCurrency(
+                                        price * quantity,
+                                        (planPeriod === "month" ? entitlement.meteredMonthlyPrice : entitlement.meteredYearlyPrice)?.currency
+                                      ),
                                       /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("sub", { children: [
                                         "/",
                                         shortenPeriod(planPeriod)
                                       ] })
                                     ] }),
                                     entitlement.priceBehavior === "pay_as_you_go" && typeof price === "number" && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
-                                      formatCurrency(price),
+                                      formatCurrency(
+                                        price,
+                                        (planPeriod === "month" ? entitlement.meteredMonthlyPrice : entitlement.meteredYearlyPrice)?.currency
+                                      ),
                                       /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("sub", { children: [
                                         "/",
                                         (0, import_pluralize.default)(
@@ -15041,7 +15085,8 @@ var Sidebar = ({
                           children: [
                             "-",
                             formatCurrency(
-                              (planPeriod === "month" ? selectedPlan.monthlyPrice : selectedPlan.yearlyPrice)?.price ?? 0
+                              (planPeriod === "month" ? selectedPlan.monthlyPrice : selectedPlan.yearlyPrice)?.price ?? 0,
+                              (planPeriod === "month" ? selectedPlan.monthlyPrice : selectedPlan.yearlyPrice)?.currency
                             ),
                             "/",
                             /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("sub", { children: shortenPeriod(planPeriod) })
@@ -15091,7 +15136,10 @@ var Sidebar = ({
                           $weight: theme.typography.text.fontWeight,
                           $color: theme.typography.text.color,
                           children: [
-                            formatCurrency(addOn.planPrice),
+                            formatCurrency(
+                              addOn.planPrice,
+                              (planPeriod === "month" ? selectedPlan?.monthlyPrice : selectedPlan?.yearlyPrice)?.currency
+                            ),
                             /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("sub", { children: [
                               "/",
                               shortenPeriod(addOn.planPeriod)
@@ -15178,7 +15226,10 @@ var Sidebar = ({
                           $size: theme.typography.text.fontSize,
                           $weight: theme.typography.text.fontWeight,
                           $color: theme.typography.text.color,
-                          children: formatCurrency(proration)
+                          children: formatCurrency(
+                            proration,
+                            (planPeriod === "month" ? selectedPlan?.monthlyPrice : selectedPlan?.yearlyPrice)?.currency
+                          )
                         }
                       ) })
                     ]
@@ -15282,7 +15333,10 @@ var Sidebar = ({
                         $size: theme.typography.text.fontSize,
                         $weight: theme.typography.text.fontWeight,
                         $color: theme.typography.text.color,
-                        children: formatCurrency(newCharges / 100 * percentOff)
+                        children: formatCurrency(
+                          newCharges / 100 * percentOff,
+                          (planPeriod === "month" ? selectedPlan?.monthlyPrice : selectedPlan?.yearlyPrice)?.currency
+                        )
                       }
                     ) })
                   ]
@@ -15303,7 +15357,10 @@ var Sidebar = ({
                         $weight: theme.typography.text.fontWeight,
                         $color: theme.typography.text.color,
                         children: t2("X off", {
-                          amount: formatCurrency(Math.abs(amountOff))
+                          amount: formatCurrency(
+                            Math.abs(amountOff),
+                            (planPeriod === "month" ? selectedPlan?.monthlyPrice : selectedPlan?.yearlyPrice)?.currency
+                          )
                         })
                       }
                     ) }),
@@ -15316,7 +15373,10 @@ var Sidebar = ({
                         $color: theme.typography.text.color,
                         children: [
                           "-",
-                          formatCurrency(Math.abs(amountOff))
+                          formatCurrency(
+                            Math.abs(amountOff),
+                            (planPeriod === "month" ? selectedPlan?.monthlyPrice : selectedPlan?.yearlyPrice)?.currency
+                          )
                         ]
                       }
                     ) })
@@ -15389,7 +15449,10 @@ var Sidebar = ({
                         $size: theme.typography.text.fontSize,
                         $weight: theme.typography.text.fontWeight,
                         $color: theme.typography.text.color,
-                        children: formatCurrency(Math.max(0, dueNow))
+                        children: formatCurrency(
+                          Math.max(0, dueNow),
+                          (planPeriod === "month" ? selectedPlan?.monthlyPrice : selectedPlan?.yearlyPrice)?.currency
+                        )
                       }
                     ) })
                   ]
@@ -15416,7 +15479,10 @@ var Sidebar = ({
                     $size: theme.typography.text.fontSize,
                     $weight: theme.typography.text.fontWeight,
                     $color: theme.typography.text.color,
-                    children: formatCurrency(Math.abs(dueNow))
+                    children: formatCurrency(
+                      Math.abs(dueNow),
+                      (planPeriod === "month" ? selectedPlan?.monthlyPrice : selectedPlan?.yearlyPrice)?.currency
+                    )
                   }
                 ) })
               ] }),
@@ -15577,7 +15643,8 @@ var Plan = ({
                           $weight: theme.typography.heading2.fontWeight,
                           $color: theme.typography.heading2.color,
                           children: formatCurrency(
-                            (period === "month" ? plan.monthlyPrice : plan.yearlyPrice)?.price ?? 0
+                            (period === "month" ? plan.monthlyPrice : plan.yearlyPrice)?.price ?? 0,
+                            (period === "month" ? plan.monthlyPrice : plan.yearlyPrice)?.currency
                           )
                         }
                       ),
@@ -15642,6 +15709,7 @@ var Plan = ({
                           }[entitlement.metricPeriod];
                         }
                         const price = (period === "month" ? entitlement.meteredMonthlyPrice : entitlement.meteredYearlyPrice)?.price;
+                        const currency = (period === "month" ? entitlement.meteredMonthlyPrice : entitlement.meteredYearlyPrice)?.currency;
                         if (entitlement.priceBehavior && typeof price !== "number") {
                           return acc;
                         }
@@ -15673,7 +15741,7 @@ var Plan = ({
                                     $weight: theme.typography.text.fontWeight,
                                     $color: theme.typography.text.color,
                                     children: typeof price !== "undefined" ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
-                                      formatCurrency(price),
+                                      formatCurrency(price, currency),
                                       " ",
                                       t2("per"),
                                       " ",
@@ -15777,7 +15845,7 @@ var Plan = ({
                       {
                         disabled: isLoading || !plan.valid,
                         onClick: () => {
-                          selectPlan(plan);
+                          selectPlan({ plan });
                         },
                         $size: "sm",
                         $color: "primary",
@@ -15863,7 +15931,8 @@ var AddOns = ({ addOns, toggle, isLoading, period }) => {
                       $weight: theme.typography.heading2.fontWeight,
                       $color: theme.typography.heading2.color,
                       children: formatCurrency(
-                        (period === "month" ? addOn.monthlyPrice : addOn.yearlyPrice)?.price ?? 0
+                        (period === "month" ? addOn.monthlyPrice : addOn.yearlyPrice)?.price ?? 0,
+                        (period === "month" ? addOn.monthlyPrice : addOn.yearlyPrice)?.currency
                       )
                     }
                   ),
@@ -16064,7 +16133,8 @@ var Usage = ({ entitlements, updateQuantity, period }) => {
                           $color: theme.typography.text.color,
                           children: [
                             formatCurrency(
-                              ((period === "month" ? entitlement.meteredMonthlyPrice : entitlement.meteredYearlyPrice)?.price || 0) * quantity
+                              ((period === "month" ? entitlement.meteredMonthlyPrice : entitlement.meteredYearlyPrice)?.price || 0) * quantity,
+                              (period === "month" ? entitlement.meteredMonthlyPrice : entitlement.meteredYearlyPrice)?.currency
                             ),
                             /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("sub", { children: [
                               "/",
@@ -16082,7 +16152,8 @@ var Usage = ({ entitlements, updateQuantity, period }) => {
                           $color: unitPriceColor,
                           children: [
                             formatCurrency(
-                              (period === "month" ? entitlement.meteredMonthlyPrice : entitlement.meteredYearlyPrice)?.price || 0
+                              (period === "month" ? entitlement.meteredMonthlyPrice : entitlement.meteredYearlyPrice)?.price || 0,
+                              (period === "month" ? entitlement.meteredMonthlyPrice : entitlement.meteredYearlyPrice)?.currency
                             ),
                             /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("sub", { children: [
                               "/",
@@ -16115,14 +16186,19 @@ var Usage = ({ entitlements, updateQuantity, period }) => {
 var import_react23 = require("react");
 
 // node_modules/@stripe/stripe-js/dist/index.mjs
-var V3_URL = "https://js.stripe.com/v3";
+var ORIGIN = "https://js.stripe.com";
+var STRIPE_JS_URL = "".concat(ORIGIN, "/v3");
 var V3_URL_REGEX = /^https:\/\/js\.stripe\.com\/v3\/?(\?.*)?$/;
+var STRIPE_JS_URL_REGEX = /^https:\/\/js\.stripe\.com\/(v3|[a-z]+)\/stripe\.js(\?.*)?$/;
 var EXISTING_SCRIPT_MESSAGE = "loadStripe.setLoadParameters was called but an existing Stripe.js script already exists in the document; existing script parameters will be used";
+var isStripeJSURL = function isStripeJSURL2(url) {
+  return V3_URL_REGEX.test(url) || STRIPE_JS_URL_REGEX.test(url);
+};
 var findScript = function findScript2() {
-  var scripts = document.querySelectorAll('script[src^="'.concat(V3_URL, '"]'));
+  var scripts = document.querySelectorAll('script[src^="'.concat(ORIGIN, '"]'));
   for (var i2 = 0; i2 < scripts.length; i2++) {
     var script = scripts[i2];
-    if (!V3_URL_REGEX.test(script.src)) {
+    if (!isStripeJSURL(script.src)) {
       continue;
     }
     return script;
@@ -16132,7 +16208,7 @@ var findScript = function findScript2() {
 var injectScript = function injectScript2(params) {
   var queryString = params && !params.advancedFraudSignals ? "?advancedFraudSignals=false" : "";
   var script = document.createElement("script");
-  script.src = "".concat(V3_URL).concat(queryString);
+  script.src = "".concat(STRIPE_JS_URL).concat(queryString);
   var headOrBody = document.head || document.body;
   if (!headOrBody) {
     throw new Error("Expected document.body not to be null. Stripe.js requires a <body> element.");
@@ -16146,7 +16222,7 @@ var registerWrapper = function registerWrapper2(stripe, startTime) {
   }
   stripe._registerWrapper({
     name: "stripe-js",
-    version: "5.6.0",
+    version: "5.7.0",
     startTime
   });
 };
@@ -16428,12 +16504,6 @@ var CheckoutDialog = ({ top = 0 }) => {
   const modalRef = (0, import_react24.useRef)(null);
   const contentRef = (0, import_react24.useRef)(null);
   const checkoutRef = (0, import_react24.useRef)(null);
-  const [checkoutStage, setCheckoutStage] = (0, import_react24.useState)(
-    () => selected.addOnId ? "addons" : selected.usage ? "usage" : "plan"
-  );
-  const [planPeriod, setPlanPeriod] = (0, import_react24.useState)(
-    selected.period || data.company?.plan?.planPeriod || "month"
-  );
   const [charges, setCharges] = (0, import_react24.useState)();
   const [paymentMethodId, setPaymentMethodId] = (0, import_react24.useState)();
   const [isLoading, setIsLoading] = (0, import_react24.useState)(false);
@@ -16442,13 +16512,18 @@ var CheckoutDialog = ({ top = 0 }) => {
     !data.subscription?.paymentMethod
   );
   const [promoCode, setPromoCode] = (0, import_react24.useState)();
+  const [planPeriod, setPlanPeriod] = (0, import_react24.useState)(
+    selected.period || data.company?.plan?.planPeriod || "month"
+  );
   const {
     plans: availablePlans,
     addOns: availableAddOns,
     periods: availablePeriods
   } = useAvailablePlans(planPeriod);
   const [selectedPlan, setSelectedPlan] = (0, import_react24.useState)(
-    () => availablePlans.find((plan) => plan.current)
+    () => availablePlans.find(
+      (plan) => selected.planId ? plan.id === selected.planId : plan.current
+    )
   );
   const currentAddOns = data.company?.addOns || [];
   const [addOns, setAddOns] = (0, import_react24.useState)(
@@ -16511,6 +16586,18 @@ var CheckoutDialog = ({ top = 0 }) => {
     ),
     [usageBasedEntitlements]
   );
+  const [checkoutStage, setCheckoutStage] = (0, import_react24.useState)(() => {
+    if (selected.planId !== currentPlan?.id) {
+      return payInAdvanceEntitlements.length > 0 ? "usage" : "addons";
+    }
+    if (selected.addOnId) {
+      return "addons";
+    }
+    if (selected.usage) {
+      return "usage";
+    }
+    return "plan";
+  });
   const hasActiveAddOns = addOns.some((addOn) => addOn.isSelected === true);
   const hasActivePayInAdvanceEntitlements = payInAdvanceEntitlements.some(
     ({ quantity }) => quantity > 0
@@ -16555,50 +16642,12 @@ var CheckoutDialog = ({ top = 0 }) => {
     requiresPayment
   ]);
   const isLightBackground = useIsLightBackground();
-  const selectPlan = (0, import_react24.useCallback)(
-    (updatedPlan, updatedPeriod) => {
-      const entitlements = updatedPlan.entitlements.reduce(
-        createActiveUsageBasedEntitlementsReducer(updatedPeriod),
-        []
-      );
-      setSelectedPlan(updatedPlan);
-      setUsageBasedEntitlements(entitlements);
-    },
-    [createActiveUsageBasedEntitlementsReducer]
-  );
-  const toggleAddOn = (id) => {
-    setAddOns(
-      (prev2) => prev2.map((addOn) => ({
-        ...addOn,
-        ...addOn.id === id && { isSelected: !addOn.isSelected }
-      }))
-    );
-  };
-  const changePlanPeriod = (0, import_react24.useCallback)(
-    (period) => {
-      if (selectedPlan) {
-        selectPlan(selectedPlan, period);
-      }
-      setPlanPeriod(period);
-    },
-    [selectedPlan, selectPlan, setPlanPeriod]
-  );
-  const updateUsageBasedEntitlementQuantity = (id, updatedQuantity) => {
-    setUsageBasedEntitlements(
-      (prev2) => prev2.map(
-        ({ entitlement, allocation, quantity, usage }) => entitlement.id === id ? {
-          entitlement,
-          allocation,
-          quantity: updatedQuantity,
-          usage
-        } : { entitlement, allocation, quantity, usage }
-      )
-    );
-  };
-  (0, import_react24.useEffect)(() => {
-    async function previewCheckout() {
-      const planPriceId = planPeriod === "month" ? selectedPlan?.monthlyPrice?.id : selectedPlan?.yearlyPrice?.id;
-      if (!api || !selectedPlan || !planPriceId) {
+  const previewCheckout = (0, import_react24.useCallback)(
+    async (updates) => {
+      const period = updates.period || planPeriod;
+      const plan = updates.plan || selectedPlan;
+      const planPriceId = period === "month" ? plan?.monthlyPrice?.id : plan?.yearlyPrice?.id;
+      if (!api || !plan || !planPriceId) {
         return;
       }
       setError(void 0);
@@ -16607,23 +16656,26 @@ var CheckoutDialog = ({ top = 0 }) => {
       try {
         const { data: data2 } = await api.previewCheckout({
           changeSubscriptionRequestBody: {
-            newPlanId: selectedPlan.id,
+            newPlanId: plan.id,
             newPriceId: planPriceId,
-            addOnIds: addOns.reduce((acc, addOn) => {
-              if (addOn.isSelected) {
-                const addOnPriceId = (planPeriod === "month" ? addOn?.monthlyPrice : addOn?.yearlyPrice)?.id;
-                if (addOnPriceId) {
-                  acc.push({
-                    addOnId: addOn.id,
-                    priceId: addOnPriceId
-                  });
+            addOnIds: (updates.addOns || addOns).reduce(
+              (acc, addOn) => {
+                if (addOn.isSelected) {
+                  const addOnPriceId = (period === "month" ? addOn?.monthlyPrice : addOn?.yearlyPrice)?.id;
+                  if (addOnPriceId) {
+                    acc.push({
+                      addOnId: addOn.id,
+                      priceId: addOnPriceId
+                    });
+                  }
                 }
-              }
-              return acc;
-            }, []),
-            payInAdvance: payInAdvanceEntitlements.reduce(
+                return acc;
+              },
+              []
+            ),
+            payInAdvance: (updates.payInAdvanceEntitlements || payInAdvanceEntitlements).reduce(
               (acc, { entitlement, quantity }) => {
-                const priceId = (planPeriod === "month" ? entitlement.meteredMonthlyPrice : entitlement.meteredYearlyPrice)?.priceId;
+                const priceId = (period === "month" ? entitlement.meteredMonthlyPrice : entitlement.meteredYearlyPrice)?.priceId;
                 if (priceId) {
                   acc.push({
                     priceId,
@@ -16634,7 +16686,7 @@ var CheckoutDialog = ({ top = 0 }) => {
               },
               []
             ),
-            promoCode
+            promoCode: updates.promoCode || promoCode
           }
         });
         setCharges(data2);
@@ -16653,19 +16705,88 @@ var CheckoutDialog = ({ top = 0 }) => {
       } finally {
         setIsLoading(false);
       }
-    }
-    previewCheckout();
-  }, [
-    t2,
-    api,
-    planPeriod,
-    selectedPlan,
-    addOns,
-    payInAdvanceEntitlements,
-    promoCode
-  ]);
+    },
+    [
+      t2,
+      api,
+      planPeriod,
+      selectedPlan,
+      addOns,
+      payInAdvanceEntitlements,
+      promoCode
+    ]
+  );
+  const selectPlan = (0, import_react24.useCallback)(
+    (updates) => {
+      const plan = updates.plan || selectedPlan;
+      if (!plan) {
+        return;
+      }
+      const period = updates.period || planPeriod;
+      const entitlements = plan.entitlements.reduce(
+        createActiveUsageBasedEntitlementsReducer(period),
+        []
+      );
+      if (updates.plan) {
+        setSelectedPlan(plan);
+        setUsageBasedEntitlements(entitlements);
+      }
+      previewCheckout({
+        period,
+        plan: updates.plan,
+        payInAdvanceEntitlements: entitlements.filter(
+          ({ entitlement }) => entitlement.priceBehavior === "pay_in_advance"
+        )
+      });
+    },
+    [
+      planPeriod,
+      selectedPlan,
+      createActiveUsageBasedEntitlementsReducer,
+      previewCheckout
+    ]
+  );
+  const changePlanPeriod = (0, import_react24.useCallback)(
+    (period) => {
+      setPlanPeriod(period);
+      previewCheckout({ period });
+    },
+    [setPlanPeriod, previewCheckout]
+  );
+  const toggleAddOn = (id) => {
+    setAddOns((prev2) => {
+      const updated = prev2.map((addOn) => ({
+        ...addOn,
+        ...addOn.id === id && { isSelected: !addOn.isSelected }
+      }));
+      previewCheckout({ addOns: updated });
+      return updated;
+    });
+  };
+  const updateUsageBasedEntitlementQuantity = (0, import_react24.useCallback)(
+    (id, updatedQuantity) => {
+      setUsageBasedEntitlements((prev2) => {
+        const updated = prev2.map(
+          ({ entitlement, allocation, quantity, usage }) => entitlement.id === id ? {
+            entitlement,
+            allocation,
+            quantity: updatedQuantity,
+            usage
+          } : { entitlement, allocation, quantity, usage }
+        );
+        previewCheckout({
+          payInAdvanceEntitlements: updated.filter(
+            ({ entitlement }) => entitlement.priceBehavior === "pay_in_advance"
+          )
+        });
+        return updated;
+      });
+    },
+    [previewCheckout]
+  );
   const updatePromoCode = (code) => {
     setPromoCode(code);
+    previewCheckout({ promoCode: code });
   };
   (0, import_react24.useEffect)(() => {
     if (charges) {
@@ -17431,6 +17552,18 @@ var Details = ({
   const { t: t2 } = useTranslation();
   const theme = nt();
   const { data } = useEmbed();
+  const currency = (0, import_react31.useMemo)(() => {
+    if (data.company?.plan?.planPeriod === "month") {
+      return monthlyUsageBasedPrice?.currency;
+    }
+    if (data.company?.plan?.planPeriod === "year") {
+      return yearlyUsageBasedPrice?.currency;
+    }
+  }, [
+    data.company?.plan?.planPeriod,
+    monthlyUsageBasedPrice,
+    yearlyUsageBasedPrice
+  ]);
   const price = (0, import_react31.useMemo)(() => {
     if (data.company?.plan?.planPeriod === "month") {
       return monthlyUsageBasedPrice?.price;
@@ -17451,7 +17584,7 @@ var Details = ({
       return `${formatNumber(allocation)} ${(0, import_pluralize4.default)(feature.name, allocation)}`;
     }
     if (priceBehavior === "pay_as_you_go" && typeof price === "number") {
-      return `${formatCurrency(price)} ${t2("per")} ${(0, import_pluralize4.default)(feature.name.toLowerCase(), 1)}`;
+      return `${formatCurrency(price, currency)} ${t2("per")} ${(0, import_pluralize4.default)(feature.name.toLowerCase(), 1)}`;
     }
     if (!priceBehavior && typeof allocation === "number") {
       return `${formatNumber(allocation)} ${(0, import_pluralize4.default)(feature.name, allocation)}`;
@@ -17467,15 +17600,15 @@ var Details = ({
     if (usageData) {
       let acc;
       if (priceBehavior === "pay_in_advance" && typeof data.company?.plan?.planPeriod === "string" && typeof price === "number") {
-        acc = `${formatCurrency(price)}/${(0, import_pluralize4.default)(feature.name.toLowerCase(), 1)}/${shortenPeriod(data.company.plan.planPeriod)}`;
+        acc = `${formatCurrency(price, currency)}/${(0, import_pluralize4.default)(feature.name.toLowerCase(), 1)}/${shortenPeriod(data.company.plan.planPeriod)}`;
       } else if (priceBehavior === "pay_as_you_go" && typeof usage === "number") {
         acc = `${usage} ${(0, import_pluralize4.default)(feature.name.toLowerCase(), usage)} ${t2("used")}`;
       }
       if (acc) {
         if (usageData?.priceBehavior === "pay_in_advance" && typeof price === "number" && typeof allocation === "number") {
-          acc += ` \u2022 ${formatCurrency(price * allocation)}`;
+          acc += ` \u2022 ${formatCurrency(price * allocation, currency)}`;
         } else if (usageData?.priceBehavior === "pay_as_you_go" && typeof price === "number" && typeof usage === "number") {
-          acc += ` \u2022 ${formatCurrency(price * usage)}`;
+          acc += ` \u2022 ${formatCurrency(price * usage, currency)}`;
         }
         return acc;
       }
@@ -17777,9 +17910,9 @@ function resolveDesignProps2(props) {
 function formatInvoices(invoices) {
   return (invoices || []).filter(
     ({ url, amountDue, amountPaid }) => url && (amountDue === 0 || amountPaid > 0)
-  ).sort((a2, b2) => a2.dueDate && b2.dueDate ? +b2.dueDate - +a2.dueDate : 1).map(({ amountDue, dueDate, url }) => ({
+  ).sort((a2, b2) => a2.dueDate && b2.dueDate ? +b2.dueDate - +a2.dueDate : 1).map(({ amountDue, dueDate, url, currency }) => ({
     ...dueDate && { date: toPrettyDate(dueDate) },
-    amount: formatCurrency(amountDue),
+    amount: formatCurrency(amountDue, currency),
     url
   }));
 }
@@ -17962,10 +18095,13 @@ var MeteredFeatures = (0, import_react34.forwardRef)(({ className, ...rest }, re
       yearlyUsageBasedPrice
     }, index) => {
       let price;
+      let currency;
       if (planPeriod === "month") {
         price = monthlyUsageBasedPrice?.price;
+        currency = monthlyUsageBasedPrice?.currency;
       } else if (planPeriod === "year") {
         price = yearlyUsageBasedPrice?.price;
+        currency = yearlyUsageBasedPrice?.currency;
       }
       return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(Element, { as: Flex, $gap: "1.5rem", children: [
         props.icon.isVisible && feature?.icon && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
@@ -18039,7 +18175,7 @@ var MeteredFeatures = (0, import_react34.forwardRef)(({ className, ...rest }, re
                             formatNumber(allocation),
                             " ",
                             (0, import_pluralize5.default)(feature.name, allocation)
-                          ] }) : priceBehavior === "pay_as_you_go" ? typeof price === "number" && typeof usage === "number" && formatCurrency(usage * price) : typeof usage === "number" && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
+                          ] }) : priceBehavior === "pay_as_you_go" ? typeof price === "number" && typeof usage === "number" && formatCurrency(usage * price, currency) : typeof usage === "number" && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
                             formatNumber(usage),
                             " ",
                             (0, import_pluralize5.default)(feature.name, usage)
@@ -18524,19 +18660,23 @@ var PlanManager = (0, import_react36.forwardRef)(({ children, className, portal,
     (acc, usage) => {
       const quantity = usage?.allocation ?? 0;
       let price;
+      let currencyCode = "USD";
       if (currentPlan?.planPeriod === "month") {
         price = usage.monthlyUsageBasedPrice?.price;
+        currencyCode = usage.monthlyUsageBasedPrice?.currency ?? "USD";
       } else if (currentPlan?.planPeriod === "year") {
         price = usage.yearlyUsageBasedPrice?.price;
+        currencyCode = usage.yearlyUsageBasedPrice?.currency ?? "USD";
       }
       if (usage.priceBehavior && typeof price === "number" && quantity > 0) {
-        acc.push({ ...usage, price, quantity });
+        acc.push({ ...usage, price, quantity, currencyCode });
       }
       return acc;
     },
     []
   );
   const billingSubscription = data.company?.billingSubscription;
+  const subscriptionCurrency = billingSubscription?.currency ?? "USD";
   const showTrialBox = billingSubscription && billingSubscription.status == "trialing";
   const trialEndDate = billingSubscription?.trialEnd ? new Date(billingSubscription.trialEnd * 1e3) : /* @__PURE__ */ new Date();
   const todayDate = /* @__PURE__ */ new Date();
@@ -18630,7 +18770,10 @@ var PlanManager = (0, import_react36.forwardRef)(({ children, className, portal,
                       $size: theme.typography[props.header.price.fontStyle].fontSize,
                       $weight: theme.typography[props.header.price.fontStyle].fontWeight,
                       $color: theme.typography[props.header.price.fontStyle].color,
-                      children: formatCurrency(currentPlan.planPrice)
+                      children: formatCurrency(
+                        currentPlan.planPrice,
+                        subscriptionCurrency
+                      )
                     }
                   ),
                   /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
@@ -18688,7 +18831,7 @@ var PlanManager = (0, import_react36.forwardRef)(({ children, className, portal,
                       $weight: theme.typography.text.fontWeight,
                       $color: theme.typography.text.color,
                       children: [
-                        formatCurrency(addOn.planPrice),
+                        formatCurrency(addOn.planPrice, subscriptionCurrency),
                         /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("sub", { children: [
                           "/",
                           shortenPeriod(addOn.planPeriod)
@@ -18751,7 +18894,10 @@ var PlanManager = (0, import_react36.forwardRef)(({ children, className, portal,
                                 $weight: theme.typography.text.fontWeight,
                                 $color: hexToHSL(theme.typography.text.color).l > 50 ? darken(theme.typography.text.color, 0.46) : lighten(theme.typography.text.color, 0.46),
                                 children: [
-                                  formatCurrency(entitlement.price),
+                                  formatCurrency(
+                                    entitlement.price,
+                                    entitlement.currencyCode
+                                  ),
                                   /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("sub", { children: [
                                     "/",
                                     (0, import_pluralize6.default)(
@@ -18773,7 +18919,8 @@ var PlanManager = (0, import_react36.forwardRef)(({ children, className, portal,
                                 $color: theme.typography.text.color,
                                 children: [
                                   formatCurrency(
-                                    entitlement.price * (entitlement.priceBehavior === "pay_in_advance" ? entitlement.quantity : 1)
+                                    entitlement.price * (entitlement.priceBehavior === "pay_in_advance" ? entitlement.quantity : 1),
+                                    entitlement.currencyCode
                                   ),
                                   /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("sub", { children: [
                                     "/",
@@ -18953,7 +19100,7 @@ var PricingTable = (0, import_react37.forwardRef)(({ children, className, ...res
               $display: "grid",
               $gridTemplateColumns: "repeat(auto-fill, minmax(320px, 1fr))",
               $gap: "1rem",
-              children: plans.map((plan, index, self2) => {
+              children: plans.map((plan, index) => {
                 const isActivePlan = plan.current && data.company?.plan?.planPeriod === selectedPeriod;
                 const count = entitlementCounts[plan.id];
                 let isExpanded = false;
@@ -19013,7 +19160,8 @@ var PricingTable = (0, import_react37.forwardRef)(({ children, className, ...res
                                   $weight: theme.typography[props.plans.name.fontStyle].fontWeight,
                                   $color: theme.typography[props.plans.name.fontStyle].color,
                                   children: formatCurrency(
-                                    (selectedPeriod === "month" ? plan.monthlyPrice : plan.yearlyPrice)?.price ?? 0
+                                    (selectedPeriod === "month" ? plan.monthlyPrice : plan.yearlyPrice)?.price ?? 0,
+                                    (selectedPeriod === "month" ? plan.monthlyPrice : plan.yearlyPrice)?.currency
                                   )
                                 }
                               ),
@@ -19058,18 +19206,6 @@ var PricingTable = (0, import_react37.forwardRef)(({ children, className, ...res
                           $padding: `${0.75 * cardPadding}rem ${cardPadding}rem 0`,
                           children: [
                             props.plans.showEntitlements && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(Flex, { $flexDirection: "column", $gap: "1rem", $flexGrow: "1", children: [
-                              props.plans.showInclusionText && index > 0 && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Box, { $marginBottom: "1.5rem", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-                                Text,
-                                {
-                                  $font: theme.typography.text.fontFamily,
-                                  $size: theme.typography.text.fontSize,
-                                  $weight: theme.typography.text.fontWeight,
-                                  $color: theme.typography.text.color,
-                                  children: t2("Everything in", {
-                                    plan: self2[index - 1].name
-                                  })
-                                }
-                              ) }),
                               plan.entitlements.slice().sort((a2, b2) => {
                                 if (a2.feature?.name && b2.feature?.name && a2.feature?.name > b2.feature?.name) {
                                   return 1;
@@ -19080,10 +19216,13 @@ var PricingTable = (0, import_react37.forwardRef)(({ children, className, ...res
                                 return 0;
                               }).reduce((acc, entitlement) => {
                                 let price;
+                                let currency;
                                 if (selectedPeriod === "month") {
                                   price = entitlement.meteredMonthlyPrice?.price;
+                                  currency = entitlement.meteredMonthlyPrice?.currency;
                                 } else if (selectedPeriod === "year") {
                                   price = entitlement.meteredYearlyPrice?.price;
+                                  currency = entitlement.meteredYearlyPrice?.currency;
                                 }
                                 if (entitlement.priceBehavior && typeof price !== "number") {
                                   return acc;
@@ -19110,7 +19249,7 @@ var PricingTable = (0, import_react37.forwardRef)(({ children, className, ...res
                                         $color: theme.typography.text.color,
                                         $leading: 1.35,
                                         children: typeof price !== "undefined" ? /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
-                                          formatCurrency(price),
+                                          formatCurrency(price, currency),
                                           " ",
                                           t2("per"),
                                           " ",
@@ -19328,7 +19467,8 @@ var PricingTable = (0, import_react37.forwardRef)(({ children, className, ...res
                               $weight: theme.typography[props.plans.name.fontStyle].fontWeight,
                               $color: theme.typography[props.plans.name.fontStyle].color,
                               children: formatCurrency(
-                                (selectedPeriod === "month" ? addOn.monthlyPrice : addOn.yearlyPrice)?.price ?? 0
+                                (selectedPeriod === "month" ? addOn.monthlyPrice : addOn.yearlyPrice)?.price ?? 0,
+                                (selectedPeriod === "month" ? addOn.monthlyPrice : addOn.yearlyPrice)?.currency
                               )
                             }
                           ),
@@ -19511,7 +19651,8 @@ var UpcomingBill = (0, import_react38.forwardRef)(({ className, ...rest }, ref)
         },
         ...data.upcomingInvoice?.dueDate && {
           dueDate: toPrettyDate(new Date(data.upcomingInvoice.dueDate))
-        }
+        },
+        currency: data.upcomingInvoice?.currency
       }
     };
   }, [data.subscription, data.upcomingInvoice]);
@@ -19550,7 +19691,10 @@ var UpcomingBill = (0, import_react38.forwardRef)(({ className, ...rest }, ref)
               $weight: theme.typography[props.price.fontStyle].fontWeight,
               $color: theme.typography[props.price.fontStyle].color,
               $leading: 1,
-              children: formatCurrency(upcomingInvoice.amountDue)
+              children: formatCurrency(
+                upcomingInvoice.amountDue,
+                upcomingInvoice.currency
+              )
             }
           ) }),
           /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Box, { $lineHeight: 1.15, $maxWidth: "10rem", $textAlign: "right", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
@@ -19565,7 +19709,7 @@ var UpcomingBill = (0, import_react38.forwardRef)(({ className, ...rest }, ref)
             }
           ) })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(Flex, { $justifyContent: "space-between", $alignItems: "center", children: [
+        discounts.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(Flex, { $justifyContent: "space-between", $alignItems: "center", children: [
           /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
             Text,
             {
@@ -19720,7 +19864,7 @@ var Error2 = ({ message }) => {
   );
 };
 var ComponentTree = () => {
-  const { error, nodes } = useEmbed();
+  const { error, nodes, isPending } = useEmbed();
   const [children, setChildren] = (0, import_react40.useState)(/* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Loading, {}));
   (0, import_react40.useEffect)(() => {
     const renderer = createRenderer();
@@ -19730,7 +19874,7 @@ var ComponentTree = () => {
     console.error(error);
     return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Error2, { message: error.message });
   }
-  if (import_react40.Children.count(children) === 0) {
+  if (isPending) {
     return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Loading, {});
   }
   return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_jsx_runtime33.Fragment, { children });