@schematichq/schematic-components 0.4.1 → 0.4.3

package/dist/schematic-components.esm.js

@@ -10747,6 +10747,7 @@ function ChangeSubscriptionRequestBodyToJSON(value) {
     add_on_ids: value["addOnIds"].map(
       UpdateAddOnRequestBodyToJSON
     ),
+    coupon_external_id: value["couponExternalId"],
     new_plan_id: value["newPlanId"],
     new_price_id: value["newPriceId"],
     pay_in_advance: value["payInAdvance"].map(
@@ -11206,6 +11207,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);
@@ -11221,6 +11237,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
@@ -11230,6 +11248,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"],
@@ -12478,8 +12497,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 = {};
@@ -12659,7 +12682,7 @@ var EmbedProvider = ({
   useEffect2(() => {
     if (accessToken) {
       const { headers = {} } = apiConfig ?? {};
-      headers["X-Schematic-Components-Version"] = "0.4.1";
+      headers["X-Schematic-Components-Version"] = "0.4.3";
       headers["X-Schematic-Session-ID"] = sessionIdRef.current;
       const config = new Configuration({
         ...apiConfig,
@@ -12840,7 +12863,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) => {
@@ -12848,6 +12871,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) {
@@ -12857,14 +12883,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);
   }
 }
@@ -13707,6 +13733,7 @@ var ModalHeader = ({
       $padding: "0 1rem",
       $backgroundColor: theme.card.background,
       ...bordered && {
+        $borderWidth: "0",
         $borderBottomWidth: "1px",
         $borderBottomStyle: "solid",
         $borderBottomColor: isLightBackground ? "hsla(0, 0%, 0%, 0.15)" : "hsla(0, 0%, 100%, 0.15)"
@@ -14397,6 +14424,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;
     }
@@ -14410,7 +14438,7 @@ var Sidebar = ({
       0
     );
     total += payInAdvanceCost;
-    return formatCurrency(total);
+    return formatCurrency(total, currency);
   }, [selectedPlan, addOns, payInAdvanceEntitlements, planPeriod]);
   const { amountOff, dueNow, newCharges, percentOff, periodStart, proration } = useMemo4(() => {
     return {
@@ -14573,6 +14601,7 @@ var Sidebar = ({
             $gap: "1rem",
             $width: "100%",
             $padding: "1.5rem",
+            $borderWidth: "0",
             $borderBottomWidth: "1px",
             $borderStyle: "solid",
             $borderColor: isLightBackground ? "hsla(0, 0%, 0%, 0.1)" : "hsla(0, 0%, 100%, 0.2)",
@@ -14598,6 +14627,7 @@ var Sidebar = ({
             $flexGrow: "1",
             $width: "100%",
             $padding: "1.5rem",
+            $borderWidth: "0",
             $borderBottomWidth: "1px",
             $borderStyle: "solid",
             $borderColor: isLightBackground ? "hsla(0, 0%, 0%, 0.1)" : "hsla(0, 0%, 100%, 0.2)",
@@ -14643,7 +14673,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__ */ jsxs8("sub", { children: [
                               "/",
                               shortenPeriod(
@@ -14703,7 +14736,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__ */ jsxs8("sub", { children: [
                                 "/",
@@ -14766,14 +14800,20 @@ var Sidebar = ({
                                   $color: theme.typography.text.color,
                                   children: [
                                     entitlement.priceBehavior === "pay_in_advance" && typeof price === "number" && /* @__PURE__ */ jsxs8(Fragment4, { children: [
-                                      formatCurrency(price * quantity),
+                                      formatCurrency(
+                                        price * quantity,
+                                        (planPeriod === "month" ? entitlement.meteredMonthlyPrice : entitlement.meteredYearlyPrice)?.currency
+                                      ),
                                       /* @__PURE__ */ jsxs8("sub", { children: [
                                         "/",
                                         shortenPeriod(planPeriod)
                                       ] })
                                     ] }),
                                     entitlement.priceBehavior === "pay_as_you_go" && typeof price === "number" && /* @__PURE__ */ jsxs8(Fragment4, { children: [
-                                      formatCurrency(price),
+                                      formatCurrency(
+                                        price,
+                                        (planPeriod === "month" ? entitlement.meteredMonthlyPrice : entitlement.meteredYearlyPrice)?.currency
+                                      ),
                                       /* @__PURE__ */ jsxs8("sub", { children: [
                                         "/",
                                         (0, import_pluralize.default)(
@@ -14833,7 +14873,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__ */ jsxs8("sub", { children: [
                                         "/",
@@ -14875,7 +14916,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__ */ jsxs8("sub", { children: [
                                         "/",
@@ -14929,14 +14971,20 @@ var Sidebar = ({
                                   $color: theme.typography.text.color,
                                   children: [
                                     entitlement.priceBehavior === "pay_in_advance" && typeof price === "number" && /* @__PURE__ */ jsxs8(Fragment4, { children: [
-                                      formatCurrency(price * quantity),
+                                      formatCurrency(
+                                        price * quantity,
+                                        (planPeriod === "month" ? entitlement.meteredMonthlyPrice : entitlement.meteredYearlyPrice)?.currency
+                                      ),
                                       /* @__PURE__ */ jsxs8("sub", { children: [
                                         "/",
                                         shortenPeriod(planPeriod)
                                       ] })
                                     ] }),
                                     entitlement.priceBehavior === "pay_as_you_go" && typeof price === "number" && /* @__PURE__ */ jsxs8(Fragment4, { children: [
-                                      formatCurrency(price),
+                                      formatCurrency(
+                                        price,
+                                        (planPeriod === "month" ? entitlement.meteredMonthlyPrice : entitlement.meteredYearlyPrice)?.currency
+                                      ),
                                       /* @__PURE__ */ jsxs8("sub", { children: [
                                         "/",
                                         (0, import_pluralize.default)(
@@ -14997,7 +15045,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__ */ jsx12("sub", { children: shortenPeriod(planPeriod) })
@@ -15047,7 +15096,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__ */ jsxs8("sub", { children: [
                               "/",
                               shortenPeriod(addOn.planPeriod)
@@ -15134,7 +15186,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
+                          )
                         }
                       ) })
                     ]
@@ -15238,7 +15293,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
+                        )
                       }
                     ) })
                   ]
@@ -15259,7 +15317,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
+                          )
                         })
                       }
                     ) }),
@@ -15272,7 +15333,10 @@ var Sidebar = ({
                         $color: theme.typography.text.color,
                         children: [
                           "-",
-                          formatCurrency(Math.abs(amountOff))
+                          formatCurrency(
+                            Math.abs(amountOff),
+                            (planPeriod === "month" ? selectedPlan?.monthlyPrice : selectedPlan?.yearlyPrice)?.currency
+                          )
                         ]
                       }
                     ) })
@@ -15345,7 +15409,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
+                        )
                       }
                     ) })
                   ]
@@ -15372,7 +15439,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
+                    )
                   }
                 ) })
               ] }),
@@ -15494,6 +15564,7 @@ var Plan = ({
                   $flexDirection: "column",
                   $gap: "0.5rem",
                   $padding: `0 ${cardPadding}rem ${0.75 * cardPadding}rem`,
+                  $borderWidth: "0",
                   $borderBottomWidth: "1px",
                   $borderStyle: "solid",
                   $borderColor: isLightBackground ? "hsla(0, 0%, 0%, 0.175)" : "hsla(0, 0%, 100%, 0.175)",
@@ -15532,7 +15603,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
                           )
                         }
                       ),
@@ -15597,6 +15669,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;
                         }
@@ -15628,7 +15701,7 @@ var Plan = ({
                                     $weight: theme.typography.text.fontWeight,
                                     $color: theme.typography.text.color,
                                     children: typeof price !== "undefined" ? /* @__PURE__ */ jsxs9(Fragment5, { children: [
-                                      formatCurrency(price),
+                                      formatCurrency(price, currency),
                                       " ",
                                       t2("per"),
                                       " ",
@@ -15732,7 +15805,7 @@ var Plan = ({
                       {
                         disabled: isLoading || !plan.valid,
                         onClick: () => {
-                          selectPlan(plan);
+                          selectPlan({ plan });
                         },
                         $size: "sm",
                         $color: "primary",
@@ -15818,7 +15891,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
                       )
                     }
                   ),
@@ -16019,7 +16093,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__ */ jsxs11("sub", { children: [
                               "/",
@@ -16037,7 +16112,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__ */ jsxs11("sub", { children: [
                               "/",
@@ -16070,14 +16146,19 @@ var Usage = ({ entitlements, updateQuantity, period }) => {
 import { useEffect as useEffect4, useState as useState6 } from "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;
@@ -16087,7 +16168,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.");
@@ -16101,7 +16182,7 @@ var registerWrapper = function registerWrapper2(stripe, startTime) {
   }
   stripe._registerWrapper({
     name: "stripe-js",
-    version: "5.6.0",
+    version: "5.7.0",
     startTime
   });
 };
@@ -16383,12 +16464,6 @@ var CheckoutDialog = ({ top = 0 }) => {
   const modalRef = useRef5(null);
   const contentRef = useRef5(null);
   const checkoutRef = useRef5(null);
-  const [checkoutStage, setCheckoutStage] = useState7(
-    () => selected.addOnId ? "addons" : selected.usage ? "usage" : "plan"
-  );
-  const [planPeriod, setPlanPeriod] = useState7(
-    selected.period || data.company?.plan?.planPeriod || "month"
-  );
   const [charges, setCharges] = useState7();
   const [paymentMethodId, setPaymentMethodId] = useState7();
   const [isLoading, setIsLoading] = useState7(false);
@@ -16397,13 +16472,18 @@ var CheckoutDialog = ({ top = 0 }) => {
     !data.subscription?.paymentMethod
   );
   const [promoCode, setPromoCode] = useState7();
+  const [planPeriod, setPlanPeriod] = useState7(
+    selected.period || data.company?.plan?.planPeriod || "month"
+  );
   const {
     plans: availablePlans,
     addOns: availableAddOns,
     periods: availablePeriods
   } = useAvailablePlans(planPeriod);
   const [selectedPlan, setSelectedPlan] = useState7(
-    () => availablePlans.find((plan) => plan.current)
+    () => availablePlans.find(
+      (plan) => selected.planId ? plan.id === selected.planId : plan.current
+    )
   );
   const currentAddOns = data.company?.addOns || [];
   const [addOns, setAddOns] = useState7(
@@ -16466,6 +16546,18 @@ var CheckoutDialog = ({ top = 0 }) => {
     ),
     [usageBasedEntitlements]
   );
+  const [checkoutStage, setCheckoutStage] = useState7(() => {
+    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
@@ -16510,50 +16602,12 @@ var CheckoutDialog = ({ top = 0 }) => {
     requiresPayment
   ]);
   const isLightBackground = useIsLightBackground();
-  const selectPlan = useCallback7(
-    (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 = useCallback7(
-    (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 }
-      )
-    );
-  };
-  useEffect5(() => {
-    async function previewCheckout() {
-      const planPriceId = planPeriod === "month" ? selectedPlan?.monthlyPrice?.id : selectedPlan?.yearlyPrice?.id;
-      if (!api || !selectedPlan || !planPriceId) {
+  const previewCheckout = useCallback7(
+    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);
@@ -16562,23 +16616,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,
@@ -16589,7 +16646,7 @@ var CheckoutDialog = ({ top = 0 }) => {
               },
               []
             ),
-            promoCode
+            promoCode: updates.promoCode || promoCode
           }
         });
         setCharges(data2);
@@ -16608,19 +16665,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 = useCallback7(
+    (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 = useCallback7(
+    (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 = useCallback7(
+    (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 });
   };
   useEffect5(() => {
     if (charges) {
@@ -17390,6 +17516,18 @@ var Details = ({
   const { t: t2 } = useTranslation();
   const theme = nt();
   const { data } = useEmbed();
+  const currency = useMemo7(() => {
+    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 = useMemo7(() => {
     if (data.company?.plan?.planPeriod === "month") {
       return monthlyUsageBasedPrice?.price;
@@ -17410,7 +17548,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)}`;
@@ -17426,15 +17564,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;
       }
@@ -17736,9 +17874,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
   }));
 }
@@ -17921,10 +18059,13 @@ var MeteredFeatures = forwardRef9(({ className, ...rest }, ref) => {
       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__ */ jsxs21(Element, { as: Flex, $gap: "1.5rem", children: [
         props.icon.isVisible && feature?.icon && /* @__PURE__ */ jsx28(
@@ -17998,7 +18139,7 @@ var MeteredFeatures = forwardRef9(({ className, ...rest }, ref) => {
                             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__ */ jsxs21(Fragment10, { children: [
+                          ] }) : priceBehavior === "pay_as_you_go" ? typeof price === "number" && typeof usage === "number" && formatCurrency(usage * price, currency) : typeof usage === "number" && /* @__PURE__ */ jsxs21(Fragment10, { children: [
                             formatNumber(usage),
                             " ",
                             (0, import_pluralize5.default)(feature.name, usage)
@@ -18490,19 +18631,23 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
     (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();
@@ -18596,7 +18741,10 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
                       $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__ */ jsx30(
@@ -18654,7 +18802,7 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
                       $weight: theme.typography.text.fontWeight,
                       $color: theme.typography.text.color,
                       children: [
-                        formatCurrency(addOn.planPrice),
+                        formatCurrency(addOn.planPrice, subscriptionCurrency),
                         /* @__PURE__ */ jsxs23("sub", { children: [
                           "/",
                           shortenPeriod(addOn.planPeriod)
@@ -18717,7 +18865,10 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
                                 $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__ */ jsxs23("sub", { children: [
                                     "/",
                                     (0, import_pluralize6.default)(
@@ -18739,7 +18890,8 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
                                 $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__ */ jsxs23("sub", { children: [
                                     "/",
@@ -18919,7 +19071,7 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
               $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;
@@ -18945,6 +19097,7 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
                           $flexDirection: "column",
                           $gap: "0.75rem",
                           $padding: `0 ${cardPadding}rem ${0.75 * cardPadding}rem`,
+                          $borderWidth: "0",
                           $borderBottomWidth: "1px",
                           $borderStyle: "solid",
                           $borderColor: isLightBackground ? "hsla(0, 0%, 0%, 0.175)" : "hsla(0, 0%, 100%, 0.175)",
@@ -18978,7 +19131,8 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
                                   $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
                                   )
                                 }
                               ),
@@ -19023,18 +19177,6 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
                           $padding: `${0.75 * cardPadding}rem ${cardPadding}rem 0`,
                           children: [
                             props.plans.showEntitlements && /* @__PURE__ */ jsxs24(Flex, { $flexDirection: "column", $gap: "1rem", $flexGrow: "1", children: [
-                              props.plans.showInclusionText && index > 0 && /* @__PURE__ */ jsx31(Box, { $marginBottom: "1.5rem", children: /* @__PURE__ */ jsx31(
-                                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;
@@ -19045,10 +19187,13 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
                                 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;
@@ -19075,7 +19220,7 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
                                         $color: theme.typography.text.color,
                                         $leading: 1.35,
                                         children: typeof price !== "undefined" ? /* @__PURE__ */ jsxs24(Fragment13, { children: [
-                                          formatCurrency(price),
+                                          formatCurrency(price, currency),
                                           " ",
                                           t2("per"),
                                           " ",
@@ -19293,7 +19438,8 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
                               $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
                               )
                             }
                           ),
@@ -19476,7 +19622,8 @@ var UpcomingBill = forwardRef13(({ className, ...rest }, ref) => {
         },
         ...data.upcomingInvoice?.dueDate && {
           dueDate: toPrettyDate(new Date(data.upcomingInvoice.dueDate))
-        }
+        },
+        currency: data.upcomingInvoice?.currency
       }
     };
   }, [data.subscription, data.upcomingInvoice]);
@@ -19515,7 +19662,10 @@ var UpcomingBill = forwardRef13(({ 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__ */ jsx32(Box, { $lineHeight: 1.15, $maxWidth: "10rem", $textAlign: "right", children: /* @__PURE__ */ jsx32(
@@ -19530,7 +19680,7 @@ var UpcomingBill = forwardRef13(({ className, ...rest }, ref) => {
             }
           ) })
         ] }),
-        /* @__PURE__ */ jsxs25(Flex, { $justifyContent: "space-between", $alignItems: "center", children: [
+        discounts.length > 0 && /* @__PURE__ */ jsxs25(Flex, { $justifyContent: "space-between", $alignItems: "center", children: [
           /* @__PURE__ */ jsx32(Box, { children: /* @__PURE__ */ jsx32(
             Text,
             {
@@ -19582,7 +19732,7 @@ var UpcomingBill = forwardRef13(({ className, ...rest }, ref) => {
 UpcomingBill.displayName = "UpcomingBill";
 
 // src/components/embed/ComponentTree.tsx
-import { useEffect as useEffect9, useState as useState16, Children as Children2 } from "react";
+import { useEffect as useEffect9, useState as useState16 } from "react";
 
 // src/components/embed/renderer.ts
 import { createElement as createElement5 } from "react";
@@ -19685,7 +19835,7 @@ var Error2 = ({ message }) => {
   );
 };
 var ComponentTree = () => {
-  const { error, nodes } = useEmbed();
+  const { error, nodes, isPending } = useEmbed();
   const [children, setChildren] = useState16(/* @__PURE__ */ jsx33(Loading, {}));
   useEffect9(() => {
     const renderer = createRenderer();
@@ -19695,7 +19845,7 @@ var ComponentTree = () => {
     console.error(error);
     return /* @__PURE__ */ jsx33(Error2, { message: error.message });
   }
-  if (Children2.count(children) === 0) {
+  if (isPending) {
     return /* @__PURE__ */ jsx33(Loading, {});
   }
   return /* @__PURE__ */ jsx33(Fragment14, { children });