@schematichq/schematic-components 0.4.0-rc.14 → 0.4.0-rc.16

package/dist/schematic-components.cjs.js

@@ -2116,12 +2116,14 @@ __export(index_exports, {
   useAvailablePlans: () => useAvailablePlans,
   useEmbed: () => useEmbed,
   useIsLightBackground: () => useIsLightBackground,
+  usePrevious: () => usePrevious2,
+  useTrialEnd: () => useTrialEnd,
   useWrapChildren: () => useWrapChildren
 });
 module.exports = __toCommonJS(index_exports);
 
 // src/components/elements/included-features/IncludedFeatures.tsx
-var import_react30 = require("react");
+var import_react32 = require("react");
 
 // node_modules/react-i18next/dist/es/Trans.js
 var import_react3 = require("react");
@@ -3779,7 +3781,7 @@ function useAvailablePlans(activePeriod) {
   }, [data.activePlans, data.activeAddOns]);
   const getActivePlans = (0, import_react10.useCallback)(
     (plans) => {
-      return (mode === "edit" ? plans.slice() : plans.filter(
+      const plansWithSelected = (mode === "edit" ? plans.slice() : plans.filter(
         (plan) => activePeriod === "month" && plan.monthlyPrice || activePeriod === "year" && plan.yearlyPrice
       )).sort((a2, b2) => {
         if (activePeriod === "year") {
@@ -3790,6 +3792,7 @@ function useAvailablePlans(activePeriod) {
         }
         return 0;
       }).map((plan) => ({ ...plan, isSelected: false }));
+      return plansWithSelected;
     },
     [activePeriod, mode]
   );
@@ -11224,6 +11227,7 @@ function PlanEntitlementResponseDataFromJSONTyped(json, ignoreDiscriminator) {
     planId: json["plan_id"],
     priceBehavior: json["price_behavior"] == null ? void 0 : json["price_behavior"],
     ruleId: json["rule_id"],
+    ruleIdUsageExceeded: json["rule_id_usage_exceeded"] == null ? void 0 : json["rule_id_usage_exceeded"],
     updatedAt: new Date(json["updated_at"]),
     valueBool: json["value_bool"] == null ? void 0 : json["value_bool"],
     valueNumeric: json["value_numeric"] == null ? void 0 : json["value_numeric"],
@@ -11867,7 +11871,8 @@ var en_default = {
     "Add Seats": "Add More",
     "Add-ons": "Add-ons",
     "After the trial, subscribe": "After the trial, subscription starts and you will be billed.",
-    "After the trial, cancel": "After the trial, the subscription ends.",
+    "After the trial, cancel": "After the trial, you will be downgraded to the {{defaultPlanName}} plan and your subscription will be cancelled.",
+    "After the trial, cancel no default": "After the trial, you will be lose access to {{planName}} plan and your subscription will be cancelled.",
     Billed: "Billed {{period}}",
     "billing period": "billing period",
     "Cannot downgrade entitlement": "Cannot downgrade to a lower quantity than current usage.",
@@ -11876,7 +11881,6 @@ var en_default = {
     "Change payment method": "Change payment method",
     "Change plan": "Change plan",
     Checkout: "Checkout",
-    "Checkout Trial": "Subscribe and close",
     "Choose add-on": "Choose add-on",
     "Choose plan": "Choose plan",
     "Choose your base plan": "Choose your base plan",
@@ -11925,7 +11929,9 @@ var en_default = {
     "Select plan": "Select plan",
     "Select quantity": "Select quantity",
     Selected: "Selected",
+    "Session expired. Please refresh and try again.": "Session expired. Please refresh and try again.",
     "Start trial": "Start trial",
+    "Subscribe and close": "Subscribe and close",
     Subscription: "Subscription",
     Trial: "Trial",
     "Trial ends in": "Trial ends in {{days}} days",
@@ -12522,7 +12528,7 @@ var EmbedProvider = ({
   (0, import_react11.useEffect)(() => {
     if (accessToken) {
       const { headers = {} } = apiConfig ?? {};
-      headers["X-Schematic-Components-Version"] = "0.4.0-rc.14";
+      headers["X-Schematic-Components-Version"] = "0.4.0-rc.16";
       headers["X-Schematic-Session-ID"] = sessionIdRef.current;
       const config = new Configuration({
         ...apiConfig,
@@ -12773,13 +12779,37 @@ function useIsLightBackground() {
   return isLightBackground;
 }
 
-// src/hooks/useWrapChildren.ts
+// src/hooks/usePrevious.ts
 var import_react14 = require("react");
+function usePrevious2(value) {
+  const ref = (0, import_react14.useRef)();
+  (0, import_react14.useEffect)(() => {
+    ref.current = value;
+  }, [value]);
+  return ref.current;
+}
+
+// src/hooks/useTrialEnd.ts
+function useTrialEnd() {
+  const { data } = useEmbed();
+  const billingSubscription = data.company?.billingSubscription;
+  const trialEndDate = billingSubscription?.trialEnd && new Date(billingSubscription.trialEnd * 1e3);
+  if (trialEndDate) {
+    const todayDate = /* @__PURE__ */ new Date();
+    const trialEndDays = Math.floor(
+      (trialEndDate.getTime() - todayDate.getTime()) / (1e3 * 60 * 60 * 24)
+    );
+    return trialEndDays;
+  }
+}
+
+// src/hooks/useWrapChildren.ts
+var import_react15 = require("react");
 function useWrapChildren(elements) {
-  const [shouldWrap, setShouldWrap] = (0, import_react14.useState)(
+  const [shouldWrap, setShouldWrap] = (0, import_react15.useState)(
     () => new Array(elements.length).fill(false)
   );
-  (0, import_react14.useLayoutEffect)(() => {
+  (0, import_react15.useLayoutEffect)(() => {
     const rowShouldWrap = (parent) => [...parent.children].some(
       (el) => el instanceof HTMLElement && el.previousElementSibling instanceof HTMLElement && el.offsetLeft <= el.previousElementSibling.offsetLeft
     );
@@ -12802,7 +12832,7 @@ function useWrapChildren(elements) {
 }
 
 // src/components/layout/root/Root.tsx
-var import_react19 = require("react");
+var import_react20 = require("react");
 
 // src/components/ui/box/styles.ts
 var Box = dt.div((props) => {
@@ -12833,7 +12863,7 @@ var Box = dt.div((props) => {
 });
 
 // src/components/ui/button/Button.tsx
-var import_react15 = require("react");
+var import_react16 = require("react");
 
 // src/components/ui/button/styles.ts
 var Button = dt.button`
@@ -12920,7 +12950,7 @@ var Button = dt.button`
 
 // src/components/ui/button/Button.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
-var Button2 = (0, import_react15.forwardRef)(
+var Button2 = (0, import_react16.forwardRef)(
   ({
     color = "white",
     size = "md",
@@ -13361,14 +13391,14 @@ var Loader = dt.div`
 `;
 
 // src/components/ui/modal/Modal.tsx
-var import_react16 = require("react");
+var import_react17 = require("react");
 var import_jsx_runtime5 = require("react/jsx-runtime");
-var Modal = (0, import_react16.forwardRef)(
+var Modal = (0, import_react17.forwardRef)(
   ({ children, contentRef, size = "auto", top = 0, onClose, ...rest }, ref) => {
     const theme = nt();
     const { setLayout } = useEmbed();
     const isLightBackground = useIsLightBackground();
-    const handleClose = (0, import_react16.useCallback)(() => {
+    const handleClose = (0, import_react17.useCallback)(() => {
       setLayout("portal");
       onClose?.();
     }, [setLayout, onClose]);
@@ -13440,7 +13470,7 @@ var Modal = (0, import_react16.forwardRef)(
 Modal.displayName = "Modal";
 
 // src/components/ui/modal/ModalHeader.tsx
-var import_react17 = require("react");
+var import_react18 = require("react");
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var ModalHeader = ({
   children,
@@ -13450,7 +13480,7 @@ var ModalHeader = ({
   const theme = nt();
   const { setLayout } = useEmbed();
   const isLightBackground = useIsLightBackground();
-  const handleClose = (0, import_react17.useCallback)(() => {
+  const handleClose = (0, import_react18.useCallback)(() => {
     setLayout("portal");
     onClose?.();
   }, [setLayout, onClose]);
@@ -13604,7 +13634,7 @@ var Text = dt.span.attrs(({ onClick }) => ({
 `;
 
 // src/components/ui/tooltip/Tooltip.tsx
-var import_react18 = require("react");
+var import_react19 = require("react");
 var import_react_dom = require("react-dom");
 
 // src/components/ui/tooltip/styles.ts
@@ -13742,10 +13772,10 @@ var Tooltip = ({
   zIndex = 1,
   ...rest
 }) => {
-  const ref = (0, import_react18.useRef)(null);
-  const [show, setShow] = (0, import_react18.useState)(false);
-  const [coords2, setCoords] = (0, import_react18.useState)({ x: 0, y: 0 });
-  (0, import_react18.useLayoutEffect)(() => {
+  const ref = (0, import_react19.useRef)(null);
+  const [show, setShow] = (0, import_react19.useState)(false);
+  const [coords2, setCoords] = (0, import_react19.useState)({ x: 0, y: 0 });
+  (0, import_react19.useLayoutEffect)(() => {
     if (ref.current) {
       const { top: offsetTop, left: offsetLeft } = document.body.getBoundingClientRect();
       const rect = ref.current.getBoundingClientRect();
@@ -13800,7 +13830,7 @@ var Container2 = dt(Box)`
 
 // src/components/layout/root/Root.tsx
 var import_jsx_runtime9 = require("react/jsx-runtime");
-var Root = (0, import_react19.forwardRef)(
+var Root = (0, import_react20.forwardRef)(
   ({ data, settings, ...props }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Container2, { ref, ...props });
   }
@@ -13808,145 +13838,11 @@ var Root = (0, import_react19.forwardRef)(
 Root.displayName = "Root";
 
 // src/components/layout/viewport/Viewport.tsx
-var import_react26 = require("react");
+var import_react28 = require("react");
 var import_react_dom2 = require("react-dom");
 
 // src/components/shared/checkout-dialog/CheckoutDialog.tsx
-var import_react22 = require("react");
-
-// node_modules/@stripe/stripe-js/dist/index.mjs
-var V3_URL = "https://js.stripe.com/v3";
-var V3_URL_REGEX = /^https:\/\/js\.stripe\.com\/v3\/?(\?.*)?$/;
-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 findScript = function findScript2() {
-  var scripts = document.querySelectorAll('script[src^="'.concat(V3_URL, '"]'));
-  for (var i2 = 0; i2 < scripts.length; i2++) {
-    var script = scripts[i2];
-    if (!V3_URL_REGEX.test(script.src)) {
-      continue;
-    }
-    return script;
-  }
-  return null;
-};
-var injectScript = function injectScript2(params) {
-  var queryString = params && !params.advancedFraudSignals ? "?advancedFraudSignals=false" : "";
-  var script = document.createElement("script");
-  script.src = "".concat(V3_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.");
-  }
-  headOrBody.appendChild(script);
-  return script;
-};
-var registerWrapper = function registerWrapper2(stripe, startTime) {
-  if (!stripe || !stripe._registerWrapper) {
-    return;
-  }
-  stripe._registerWrapper({
-    name: "stripe-js",
-    version: "5.5.0",
-    startTime
-  });
-};
-var stripePromise$1 = null;
-var onErrorListener = null;
-var onLoadListener = null;
-var onError = function onError2(reject) {
-  return function() {
-    reject(new Error("Failed to load Stripe.js"));
-  };
-};
-var onLoad = function onLoad2(resolve, reject) {
-  return function() {
-    if (window.Stripe) {
-      resolve(window.Stripe);
-    } else {
-      reject(new Error("Stripe.js not available"));
-    }
-  };
-};
-var loadScript = function loadScript2(params) {
-  if (stripePromise$1 !== null) {
-    return stripePromise$1;
-  }
-  stripePromise$1 = new Promise(function(resolve, reject) {
-    if (typeof window === "undefined" || typeof document === "undefined") {
-      resolve(null);
-      return;
-    }
-    if (window.Stripe && params) {
-      console.warn(EXISTING_SCRIPT_MESSAGE);
-    }
-    if (window.Stripe) {
-      resolve(window.Stripe);
-      return;
-    }
-    try {
-      var script = findScript();
-      if (script && params) {
-        console.warn(EXISTING_SCRIPT_MESSAGE);
-      } else if (!script) {
-        script = injectScript(params);
-      } else if (script && onLoadListener !== null && onErrorListener !== null) {
-        var _script$parentNode;
-        script.removeEventListener("load", onLoadListener);
-        script.removeEventListener("error", onErrorListener);
-        (_script$parentNode = script.parentNode) === null || _script$parentNode === void 0 ? void 0 : _script$parentNode.removeChild(script);
-        script = injectScript(params);
-      }
-      onLoadListener = onLoad(resolve, reject);
-      onErrorListener = onError(reject);
-      script.addEventListener("load", onLoadListener);
-      script.addEventListener("error", onErrorListener);
-    } catch (error) {
-      reject(error);
-      return;
-    }
-  });
-  return stripePromise$1["catch"](function(error) {
-    stripePromise$1 = null;
-    return Promise.reject(error);
-  });
-};
-var initStripe = function initStripe2(maybeStripe, args, startTime) {
-  if (maybeStripe === null) {
-    return null;
-  }
-  var stripe = maybeStripe.apply(void 0, args);
-  registerWrapper(stripe, startTime);
-  return stripe;
-};
-var stripePromise;
-var loadCalled = false;
-var getStripePromise = function getStripePromise2() {
-  if (stripePromise) {
-    return stripePromise;
-  }
-  stripePromise = loadScript(null)["catch"](function(error) {
-    stripePromise = null;
-    return Promise.reject(error);
-  });
-  return stripePromise;
-};
-Promise.resolve().then(function() {
-  return getStripePromise();
-})["catch"](function(error) {
-  if (!loadCalled) {
-    console.warn(error);
-  }
-});
-var loadStripe = function loadStripe2() {
-  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-    args[_key] = arguments[_key];
-  }
-  loadCalled = true;
-  var startTime = Date.now();
-  return getStripePromise().then(function(maybeStripe) {
-    return initStripe(maybeStripe, args, startTime);
-  });
-};
+var import_react24 = require("react");
 
 // src/components/shared/checkout-dialog/Navigation.tsx
 var import_jsx_runtime10 = require("react/jsx-runtime");
@@ -14051,7 +13947,7 @@ var Navigation = ({
 };
 
 // src/components/shared/checkout-dialog/Sidebar.tsx
-var import_react20 = require("react");
+var import_react21 = require("react");
 var import_pluralize = __toESM(require_pluralize());
 
 // src/components/shared/checkout-dialog/StageButton.tsx
@@ -14062,22 +13958,25 @@ var StageButton = ({
   canUpdateSubscription,
   checkout,
   checkoutStage,
+  checkoutStages,
   hasAddOns,
   hasPayInAdvanceEntitlements,
   isLoading,
+  requiresPayment,
   setCheckoutStage,
-  setSetupIntent,
   trialPaymentMethodRequired
 }) => {
   const { t: t2 } = useTranslation();
-  const { api, data } = useEmbed();
-  const getPaymentIntent = async () => {
-    if (api && data.component?.id) {
-      const { data: setupIntent } = await api.getSetupIntent({
-        componentId: data.component.id
-      });
-      setSetupIntent(setupIntent);
-    }
+  const NoPaymentRequired = () => {
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      EmbedButton,
+      {
+        disabled: isLoading || !canCheckout,
+        onClick: checkout,
+        isLoading,
+        children: t2("Subscribe and close")
+      }
+    );
   };
   if (checkoutStage === "plan") {
     if (canTrial) {
@@ -14087,7 +13986,6 @@ var StageButton = ({
           {
             disabled: !hasAddOns && !canUpdateSubscription,
             onClick: async () => {
-              getPaymentIntent();
               setCheckoutStage("checkout");
             },
             isLoading,
@@ -14114,7 +14012,6 @@ var StageButton = ({
         {
           disabled: !canUpdateSubscription,
           onClick: async () => {
-            getPaymentIntent();
             checkout();
           },
           isLoading,
@@ -14126,7 +14023,7 @@ var StageButton = ({
               $alignItems: "center",
               $padding: "0 1rem",
               children: [
-                t2("Checkout Trial"),
+                t2("Subscribe and close"),
                 /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Icon2, { name: "arrow-right" })
               ]
             }
@@ -14134,14 +14031,16 @@ var StageButton = ({
         }
       );
     }
+    if (!requiresPayment && !checkoutStages.some(
+      (stage) => stage.id === "addons" || stage.id === "usage"
+    )) {
+      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(NoPaymentRequired, {});
+    }
     return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       EmbedButton,
       {
         disabled: !canUpdateSubscription,
         onClick: async () => {
-          if (!hasAddOns && !hasPayInAdvanceEntitlements) {
-            getPaymentIntent();
-          }
           setCheckoutStage(
             hasPayInAdvanceEntitlements ? "usage" : hasAddOns ? "addons" : "checkout"
           );
@@ -14167,14 +14066,14 @@ var StageButton = ({
     );
   }
   if (checkoutStage === "usage") {
+    if (!requiresPayment) {
+      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(NoPaymentRequired, {});
+    }
     return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       EmbedButton,
       {
         disabled: !canUpdateSubscription,
         onClick: async () => {
-          if (!hasAddOns) {
-            getPaymentIntent();
-          }
           setCheckoutStage(hasAddOns ? "addons" : "checkout");
         },
         isLoading,
@@ -14197,12 +14096,14 @@ var StageButton = ({
     );
   }
   if (checkoutStage === "addons") {
+    if (!requiresPayment) {
+      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(NoPaymentRequired, {});
+    }
     return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       EmbedButton,
       {
         disabled: !canUpdateSubscription,
         onClick: async () => {
-          getPaymentIntent();
           setCheckoutStage("checkout");
         },
         isLoading,
@@ -14225,6 +14126,9 @@ var StageButton = ({
     );
   }
   if (checkoutStage === "checkout") {
+    if (!requiresPayment) {
+      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(NoPaymentRequired, {});
+    }
     return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       EmbedButton,
       {
@@ -14244,17 +14148,18 @@ var Sidebar = ({
   charges,
   checkoutRef,
   checkoutStage,
+  checkoutStages,
   currentAddOns,
-  currentPlan,
   currentUsageBasedEntitlements,
   error,
+  currentPlan,
   isLoading,
   paymentMethodId,
   planPeriod,
+  requiresPayment,
   selectedPlan,
   setCheckoutStage,
   setError,
-  setSetupIntent,
   showPaymentForm,
   toggleLoading,
   usageBasedEntitlements
@@ -14269,7 +14174,7 @@ var Sidebar = ({
   const payAsYouGoEntitlements = usageBasedEntitlements.filter(
     ({ entitlement }) => entitlement.priceBehavior === "pay_as_you_go"
   );
-  const subscriptionPrice = (0, import_react20.useMemo)(() => {
+  const subscriptionPrice = (0, import_react21.useMemo)(() => {
     if (!selectedPlan || !selectedPlan.monthlyPrice || !selectedPlan.yearlyPrice) {
       return;
     }
@@ -14278,20 +14183,19 @@ var Sidebar = ({
     if (planPrice) {
       total += planPrice;
     }
-    const addOnCost = addOns.reduce((sum, addOn) => {
-      return sum + (addOn.isSelected ? (planPeriod === "month" ? addOn.monthlyPrice : addOn.yearlyPrice)?.price || 0 : 0);
-    }, 0);
+    const addOnCost = addOns.reduce(
+      (sum, addOn) => sum + (addOn.isSelected ? (planPeriod === "month" ? addOn.monthlyPrice : addOn.yearlyPrice)?.price || 0 : 0),
+      0
+    );
     total += addOnCost;
     const payInAdvanceCost = payInAdvanceEntitlements.reduce(
-      (sum, { entitlement, quantity }) => {
-        return sum + quantity * ((planPeriod === "month" ? entitlement.meteredMonthlyPrice : entitlement.meteredYearlyPrice)?.price || 0);
-      },
+      (sum, { entitlement, quantity }) => sum + quantity * ((planPeriod === "month" ? entitlement.meteredMonthlyPrice : entitlement.meteredYearlyPrice)?.price || 0),
       0
     );
     total += payInAdvanceCost;
     return formatCurrency(total);
   }, [selectedPlan, addOns, payInAdvanceEntitlements, planPeriod]);
-  const checkout = (0, import_react20.useCallback)(async () => {
+  const checkout = (0, import_react21.useCallback)(async () => {
     const priceId = (planPeriod === "month" ? selectedPlan?.monthlyPrice : selectedPlan?.yearlyPrice)?.id;
     if (!api || !selectedPlan || !priceId) {
       return;
@@ -14352,7 +14256,7 @@ var Sidebar = ({
     payInAdvanceEntitlements
   ]);
   const selectedAddOns = addOns.filter((addOn) => addOn.isSelected);
-  const willPlanChange = selectedPlan && (selectedPlan.id !== currentPlan?.id || planPeriod !== currentPlan.planPeriod);
+  const willPlanChange = typeof selectedPlan !== "undefined" && selectedPlan.current === false;
   const canUpdateSubscription = mode === "edit" || api !== null && (willPlanChange || // TODO: test add-on comparison for finding "changes"
   selectedAddOns.length !== currentAddOns.length || !selectedAddOns.every(
     (addOn) => currentAddOns.some((currentAddOn) => addOn.id === currentAddOn.id)
@@ -14366,21 +14270,42 @@ var Sidebar = ({
       const changed = currentUsageBasedEntitlements.find(
         (current) => current.usageData.featureId === selected.entitlement.featureId && current.quantity !== selected.quantity
       );
-      const changedEntitlement = selectedPlan?.entitlements.find(
-        (entitlement) => entitlement.id === selected.entitlement.id
-      );
-      if (changed && changed.quantity > 0) {
+      if (changed) {
         changedUsageBasedEntitlements.push({
-          ...changed,
-          entitlement: changedEntitlement
+          entitlement: selected.entitlement,
+          previous: changed,
+          next: {
+            allocation: selected.allocation,
+            quantity: selected.quantity,
+            usage: selected.usage
+          }
+        });
+      } else {
+        acc.push(selected);
+      }
+      return acc;
+    },
+    []
+  );
+  const removedUsageBasedEntitlements = currentUsageBasedEntitlements.reduce(
+    (acc, current) => {
+      const match2 = usageBasedEntitlements.every(
+        ({ entitlement }) => entitlement.featureId !== current.usageData.featureId
+      ) && currentPlan?.entitlements.find(
+        (entitlement) => entitlement.featureId === current.usageData.featureId
+      );
+      if (match2) {
+        acc.push({
+          entitlement: match2,
+          allocation: current.allocation,
+          quantity: current.quantity
         });
       }
-      acc.push(selected);
       return acc;
     },
     []
   );
-  const willUsageBasedEntitlementsChange = changedUsageBasedEntitlements.length > 0 || addedUsageBasedEntitlements.length > 0;
+  const willUsageBasedEntitlementsChange = changedUsageBasedEntitlements.length > 0 || addedUsageBasedEntitlements.length > 0 || removedUsageBasedEntitlements.length > 0;
   const removedAddOns = currentAddOns.filter(
     (current) => !selectedAddOns.some((selected) => current.id === selected.id)
   );
@@ -14459,7 +14384,7 @@ var Sidebar = ({
                 }
               ) }),
               /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Flex, { $flexDirection: "column", $gap: "0.5rem", $marginBottom: "1.5rem", children: [
-                currentPlan && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+                data.company?.plan && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
                   Flex,
                   {
                     $justifyContent: "space-between",
@@ -14478,10 +14403,10 @@ var Sidebar = ({
                           $size: theme.typography.heading4.fontSize,
                           $weight: theme.typography.heading4.fontWeight,
                           $color: theme.typography.heading4.color,
-                          children: currentPlan.name
+                          children: data.company.plan.name
                         }
                       ) }),
-                      typeof currentPlan.planPrice === "number" && currentPlan.planPeriod && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+                      typeof data.company.plan.planPrice === "number" && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
                         Text,
                         {
                           $font: theme.typography.text.fontFamily,
@@ -14489,10 +14414,12 @@ var Sidebar = ({
                           $weight: theme.typography.text.fontWeight,
                           $color: theme.typography.text.color,
                           children: [
-                            formatCurrency(currentPlan.planPrice),
+                            formatCurrency(data.company.plan.planPrice),
                             /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("sub", { children: [
                               "/",
-                              shortenPeriod(currentPlan.planPeriod)
+                              shortenPeriod(
+                                data.company.plan.planPeriod || planPeriod
+                              )
                             ] })
                           ]
                         }
@@ -14572,9 +14499,10 @@ var Sidebar = ({
                     children: t2("Usage-based")
                   }
                 ) }),
-                changedUsageBasedEntitlements.reduce(
-                  (acc, { entitlement, quantity }) => {
-                    if (entitlement?.feature?.name) {
+                removedUsageBasedEntitlements.reduce(
+                  (acc, { allocation, quantity, entitlement }) => {
+                    if (typeof allocation === "number" && entitlement.feature?.name) {
+                      const price = (planPeriod === "month" ? entitlement.meteredMonthlyPrice : entitlement.meteredYearlyPrice)?.price;
                       acc.push(
                         /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
                           Flex,
@@ -14585,60 +14513,6 @@ var Sidebar = ({
                             $opacity: "0.625",
                             $textDecoration: "line-through",
                             $color: theme.typography.heading4.color,
-                            children: [
-                              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
-                                Text,
-                                {
-                                  $font: theme.typography.heading4.fontFamily,
-                                  $size: theme.typography.heading4.fontSize,
-                                  $weight: theme.typography.heading4.fontWeight,
-                                  $color: theme.typography.heading4.color,
-                                  children: [
-                                    quantity,
-                                    " ",
-                                    (0, import_pluralize.default)(entitlement.feature.name)
-                                  ]
-                                }
-                              ) }),
-                              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
-                                Text,
-                                {
-                                  $font: theme.typography.text.fontFamily,
-                                  $size: theme.typography.text.fontSize,
-                                  $weight: theme.typography.text.fontWeight,
-                                  $color: theme.typography.text.color,
-                                  children: [
-                                    formatCurrency(
-                                      ((planPeriod === "month" ? entitlement.meteredMonthlyPrice : entitlement.meteredYearlyPrice)?.price || 0) * quantity
-                                    ),
-                                    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("sub", { children: [
-                                      "/",
-                                      shortenPeriod(planPeriod)
-                                    ] })
-                                  ]
-                                }
-                              ) })
-                            ]
-                          },
-                          entitlement.feature.id
-                        )
-                      );
-                    }
-                    return acc;
-                  },
-                  []
-                ),
-                addedUsageBasedEntitlements.reduce(
-                  (acc, { entitlement, quantity }) => {
-                    if (entitlement.feature?.name) {
-                      const price = (planPeriod === "month" ? entitlement.meteredMonthlyPrice : entitlement.meteredYearlyPrice)?.price;
-                      acc.push(
-                        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
-                          Flex,
-                          {
-                            $justifyContent: "space-between",
-                            $alignItems: "center",
-                            $gap: "1rem",
                             children: [
                               /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                                 Text,
@@ -14691,13 +14565,176 @@ var Sidebar = ({
                     return acc;
                   },
                   []
-                )
-              ] }),
-              selectedPlan && isTrialable && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Box, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Box, { $opacity: "0.625", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-                  Text,
-                  {
-                    $font: theme.typography.text.fontFamily,
+                ),
+                changedUsageBasedEntitlements.reduce(
+                  (acc, { entitlement, previous, next: next2 }) => {
+                    if (entitlement?.feature?.name) {
+                      acc.push(
+                        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Box, { children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+                            Flex,
+                            {
+                              $justifyContent: "space-between",
+                              $alignItems: "center",
+                              $gap: "1rem",
+                              $opacity: "0.625",
+                              $textDecoration: "line-through",
+                              $color: theme.typography.heading4.color,
+                              children: [
+                                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+                                  Text,
+                                  {
+                                    $font: theme.typography.heading4.fontFamily,
+                                    $size: theme.typography.heading4.fontSize,
+                                    $weight: theme.typography.heading4.fontWeight,
+                                    $color: theme.typography.heading4.color,
+                                    children: [
+                                      previous.quantity,
+                                      " ",
+                                      (0, import_pluralize.default)(entitlement.feature.name)
+                                    ]
+                                  }
+                                ) }),
+                                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+                                  Text,
+                                  {
+                                    $font: theme.typography.text.fontFamily,
+                                    $size: theme.typography.text.fontSize,
+                                    $weight: theme.typography.text.fontWeight,
+                                    $color: theme.typography.text.color,
+                                    children: [
+                                      formatCurrency(
+                                        ((planPeriod === "month" ? entitlement.meteredMonthlyPrice : entitlement.meteredYearlyPrice)?.price || 0) * previous.quantity
+                                      ),
+                                      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("sub", { children: [
+                                        "/",
+                                        shortenPeriod(planPeriod)
+                                      ] })
+                                    ]
+                                  }
+                                ) })
+                              ]
+                            }
+                          ),
+                          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+                            Flex,
+                            {
+                              $justifyContent: "space-between",
+                              $alignItems: "center",
+                              $gap: "1rem",
+                              children: [
+                                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+                                  Text,
+                                  {
+                                    $font: theme.typography.heading4.fontFamily,
+                                    $size: theme.typography.heading4.fontSize,
+                                    $weight: theme.typography.heading4.fontWeight,
+                                    $color: theme.typography.heading4.color,
+                                    children: [
+                                      next2.quantity,
+                                      " ",
+                                      (0, import_pluralize.default)(entitlement.feature.name)
+                                    ]
+                                  }
+                                ) }),
+                                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+                                  Text,
+                                  {
+                                    $font: theme.typography.text.fontFamily,
+                                    $size: theme.typography.text.fontSize,
+                                    $weight: theme.typography.text.fontWeight,
+                                    $color: theme.typography.text.color,
+                                    children: [
+                                      formatCurrency(
+                                        ((planPeriod === "month" ? entitlement.meteredMonthlyPrice : entitlement.meteredYearlyPrice)?.price || 0) * next2.quantity
+                                      ),
+                                      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("sub", { children: [
+                                        "/",
+                                        shortenPeriod(planPeriod)
+                                      ] })
+                                    ]
+                                  }
+                                ) })
+                              ]
+                            }
+                          )
+                        ] }, entitlement.feature.id)
+                      );
+                    }
+                    return acc;
+                  },
+                  []
+                ),
+                addedUsageBasedEntitlements.reduce(
+                  (acc, { entitlement, quantity }) => {
+                    if (entitlement.feature?.name) {
+                      const price = (planPeriod === "month" ? entitlement.meteredMonthlyPrice : entitlement.meteredYearlyPrice)?.price;
+                      acc.push(
+                        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+                          Flex,
+                          {
+                            $justifyContent: "space-between",
+                            $alignItems: "center",
+                            $gap: "1rem",
+                            children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                                Text,
+                                {
+                                  $font: theme.typography.heading4.fontFamily,
+                                  $size: theme.typography.heading4.fontSize,
+                                  $weight: theme.typography.heading4.fontWeight,
+                                  $color: theme.typography.heading4.color,
+                                  children: entitlement.priceBehavior === "pay_in_advance" ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
+                                    quantity,
+                                    " ",
+                                    (0, import_pluralize.default)(entitlement.feature.name, quantity)
+                                  ] }) : entitlement.feature.name
+                                }
+                              ) }),
+                              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+                                Text,
+                                {
+                                  $font: theme.typography.text.fontFamily,
+                                  $size: theme.typography.text.fontSize,
+                                  $weight: theme.typography.text.fontWeight,
+                                  $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),
+                                      /* @__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),
+                                      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("sub", { children: [
+                                        "/",
+                                        (0, import_pluralize.default)(
+                                          entitlement.feature.name.toLowerCase(),
+                                          1
+                                        )
+                                      ] })
+                                    ] })
+                                  ]
+                                }
+                              ) })
+                            ]
+                          },
+                          entitlement.id
+                        )
+                      );
+                    }
+                    return acc;
+                  },
+                  []
+                )
+              ] }),
+              selectedPlan && isTrialable && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Box, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Box, { $opacity: "0.625", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                  Text,
+                  {
+                    $font: theme.typography.text.fontFamily,
                     $size: 14,
                     $weight: theme.typography.text.fontWeight,
                     $color: theme.typography.text.color,
@@ -14844,7 +14881,7 @@ var Sidebar = ({
                     children: charges.proration > 0 ? t2("Proration") : !selectedPlan?.companyCanTrial && t2("Credits")
                   }
                 ) }),
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Flex, { $flexDirection: "column", $gap: "0.5rem", children: currentPlan && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Flex, { $flexDirection: "column", $gap: "0.5rem", children: currentPlan?.current && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
                   Flex,
                   {
                     $justifyContent: "space-between",
@@ -14976,11 +15013,12 @@ var Sidebar = ({
                   canUpdateSubscription,
                   checkout,
                   checkoutStage,
+                  checkoutStages,
                   hasAddOns: addOns.length > 0,
                   hasPayInAdvanceEntitlements: payInAdvanceEntitlements.length > 0,
                   isLoading,
+                  requiresPayment,
                   setCheckoutStage,
-                  setSetupIntent,
                   trialPaymentMethodRequired: data.trialPaymentMethodRequired === true
                 }
               ),
@@ -15015,13 +15053,12 @@ var Sidebar = ({
 };
 
 // src/components/shared/checkout-dialog/Plan.tsx
+var import_react22 = require("react");
 var import_pluralize2 = __toESM(require_pluralize());
-var import_react21 = require("react");
 var import_jsx_runtime13 = require("react/jsx-runtime");
 var Plan = ({
   isLoading,
   plans,
-  currentPlan,
   selectedPlan,
   period,
   selectPlan
@@ -15029,7 +15066,7 @@ var Plan = ({
   const { t: t2 } = useTranslation();
   const theme = nt();
   const isLightBackground = useIsLightBackground();
-  const [entitlementCounts, setEntitlementCounts] = (0, import_react21.useState)(
+  const [entitlementCounts, setEntitlementCounts] = (0, import_react22.useState)(
     () => plans.reduce(
       (acc, plan) => {
         acc[plan.id] = {
@@ -15042,7 +15079,6 @@ var Plan = ({
     )
   );
   const cardPadding = theme.card.padding / TEXT_BASE_SIZE;
-  const currentPlanIndex = plans.findIndex((plan) => plan.current);
   const handleToggleShowAll = (id) => {
     setEntitlementCounts((prev2) => {
       const count = { ...prev2[id] };
@@ -15062,8 +15098,7 @@ var Plan = ({
       $gridTemplateColumns: "repeat(auto-fill, minmax(300px, 1fr))",
       $gap: "1rem",
       $flexGrow: "1",
-      children: plans.map((plan, index) => {
-        const isActivePlan = plan.current && currentPlan?.planPeriod === period;
+      children: plans.map((plan) => {
         const count = entitlementCounts[plan.id];
         let isExpanded = false;
         if (count?.limit && count.limit > VISIBLE_ENTITLEMENT_COUNT) {
@@ -15144,7 +15179,7 @@ var Plan = ({
                         }
                       )
                     ] }),
-                    isActivePlan && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                    plan.current && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                       Flex,
                       {
                         $position: "absolute",
@@ -15234,11 +15269,11 @@ var Plan = ({
                                         period
                                       ] })
                                     ] }) : hasNumericValue ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
-                                      typeof entitlement.valueNumeric === "number" ? `${formatNumber(entitlement.valueNumeric)} ${(0, import_pluralize2.default)(entitlement.feature.name, entitlement.valueNumeric)}` : t2("Unlimited", {
+                                      entitlement.valueType === "unlimited" ? t2("Unlimited", {
                                         item: (0, import_pluralize2.default)(
                                           entitlement.feature.name
                                         )
-                                      }),
+                                      }) : typeof entitlement.valueNumeric === "number" && `${formatNumber(entitlement.valueNumeric)} ${(0, import_pluralize2.default)(entitlement.feature.name, entitlement.valueNumeric)}`,
                                       metricPeriodText && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
                                         " ",
                                         t2("per"),
@@ -15316,7 +15351,7 @@ var Plan = ({
                               $size: 15,
                               $leading: 1,
                               $color: theme.typography.text.color,
-                              children: isActivePlan ? t2("Current plan") : t2("Selected")
+                              children: plan.current ? t2("Current plan") : t2("Selected")
                             }
                           )
                         ]
@@ -15330,7 +15365,7 @@ var Plan = ({
                         },
                         $size: "sm",
                         $color: "primary",
-                        $variant: index < currentPlanIndex ? "outline" : "filled",
+                        $variant: plan.current ? "outline" : "filled",
                         children: !plan.valid ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                           Tooltip,
                           {
@@ -15545,8 +15580,10 @@ var Usage = ({ entitlements, updateQuantity, period }) => {
                   Input,
                   {
                     type: "number",
-                    min: usage,
                     value: quantity,
+                    min: usage,
+                    autoFocus: true,
+                    onFocus: (event) => event.target.select(),
                     onChange: (event) => {
                       event.preventDefault();
                       const value = parseInt(event.target.value);
@@ -15628,19 +15665,182 @@ var Usage = ({ entitlements, updateQuantity, period }) => {
   }, []) }) });
 };
 
+// src/components/shared/checkout-dialog/Checkout.tsx
+var import_react23 = require("react");
+
+// node_modules/@stripe/stripe-js/dist/index.mjs
+var V3_URL = "https://js.stripe.com/v3";
+var V3_URL_REGEX = /^https:\/\/js\.stripe\.com\/v3\/?(\?.*)?$/;
+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 findScript = function findScript2() {
+  var scripts = document.querySelectorAll('script[src^="'.concat(V3_URL, '"]'));
+  for (var i2 = 0; i2 < scripts.length; i2++) {
+    var script = scripts[i2];
+    if (!V3_URL_REGEX.test(script.src)) {
+      continue;
+    }
+    return script;
+  }
+  return null;
+};
+var injectScript = function injectScript2(params) {
+  var queryString = params && !params.advancedFraudSignals ? "?advancedFraudSignals=false" : "";
+  var script = document.createElement("script");
+  script.src = "".concat(V3_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.");
+  }
+  headOrBody.appendChild(script);
+  return script;
+};
+var registerWrapper = function registerWrapper2(stripe, startTime) {
+  if (!stripe || !stripe._registerWrapper) {
+    return;
+  }
+  stripe._registerWrapper({
+    name: "stripe-js",
+    version: "5.5.0",
+    startTime
+  });
+};
+var stripePromise$1 = null;
+var onErrorListener = null;
+var onLoadListener = null;
+var onError = function onError2(reject) {
+  return function() {
+    reject(new Error("Failed to load Stripe.js"));
+  };
+};
+var onLoad = function onLoad2(resolve, reject) {
+  return function() {
+    if (window.Stripe) {
+      resolve(window.Stripe);
+    } else {
+      reject(new Error("Stripe.js not available"));
+    }
+  };
+};
+var loadScript = function loadScript2(params) {
+  if (stripePromise$1 !== null) {
+    return stripePromise$1;
+  }
+  stripePromise$1 = new Promise(function(resolve, reject) {
+    if (typeof window === "undefined" || typeof document === "undefined") {
+      resolve(null);
+      return;
+    }
+    if (window.Stripe && params) {
+      console.warn(EXISTING_SCRIPT_MESSAGE);
+    }
+    if (window.Stripe) {
+      resolve(window.Stripe);
+      return;
+    }
+    try {
+      var script = findScript();
+      if (script && params) {
+        console.warn(EXISTING_SCRIPT_MESSAGE);
+      } else if (!script) {
+        script = injectScript(params);
+      } else if (script && onLoadListener !== null && onErrorListener !== null) {
+        var _script$parentNode;
+        script.removeEventListener("load", onLoadListener);
+        script.removeEventListener("error", onErrorListener);
+        (_script$parentNode = script.parentNode) === null || _script$parentNode === void 0 ? void 0 : _script$parentNode.removeChild(script);
+        script = injectScript(params);
+      }
+      onLoadListener = onLoad(resolve, reject);
+      onErrorListener = onError(reject);
+      script.addEventListener("load", onLoadListener);
+      script.addEventListener("error", onErrorListener);
+    } catch (error) {
+      reject(error);
+      return;
+    }
+  });
+  return stripePromise$1["catch"](function(error) {
+    stripePromise$1 = null;
+    return Promise.reject(error);
+  });
+};
+var initStripe = function initStripe2(maybeStripe, args, startTime) {
+  if (maybeStripe === null) {
+    return null;
+  }
+  var stripe = maybeStripe.apply(void 0, args);
+  registerWrapper(stripe, startTime);
+  return stripe;
+};
+var stripePromise;
+var loadCalled = false;
+var getStripePromise = function getStripePromise2() {
+  if (stripePromise) {
+    return stripePromise;
+  }
+  stripePromise = loadScript(null)["catch"](function(error) {
+    stripePromise = null;
+    return Promise.reject(error);
+  });
+  return stripePromise;
+};
+Promise.resolve().then(function() {
+  return getStripePromise();
+})["catch"](function(error) {
+  if (!loadCalled) {
+    console.warn(error);
+  }
+});
+var loadStripe = function loadStripe2() {
+  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+    args[_key] = arguments[_key];
+  }
+  loadCalled = true;
+  var startTime = Date.now();
+  return getStripePromise().then(function(maybeStripe) {
+    return initStripe(maybeStripe, args, startTime);
+  });
+};
+
 // src/components/shared/checkout-dialog/Checkout.tsx
 var import_react_stripe_js = require("@stripe/react-stripe-js");
 var import_jsx_runtime16 = require("react/jsx-runtime");
 var Checkout = ({
+  requiresPayment,
   setPaymentMethodId,
   togglePaymentForm,
-  setupIntent,
-  showPaymentForm,
-  stripe
+  showPaymentForm
 }) => {
   const { t: t2 } = useTranslation();
   const theme = nt();
-  const { data } = useEmbed();
+  const { api, data } = useEmbed();
+  const [stripe, setStripe] = (0, import_react23.useState)(null);
+  const [setupIntent, setSetupIntent] = (0, import_react23.useState)();
+  (0, import_react23.useEffect)(() => {
+    if (api && data.component?.id) {
+      api.getSetupIntent({ componentId: data.component.id }).then((res) => setSetupIntent(res.data));
+    }
+  }, [api, data.component?.id]);
+  (0, import_react23.useEffect)(() => {
+    if (setupIntent?.publishableKey) {
+      setStripe(loadStripe(setupIntent.publishableKey));
+    }
+  }, [setupIntent?.publishableKey]);
+  if (!requiresPayment) {
+    return null;
+  }
+  if (!stripe) {
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      Flex,
+      {
+        $justifyContent: "center",
+        $alignItems: "center",
+        $flexGrow: 1,
+        $marginTop: "-3.5rem",
+        children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Loader, { $size: "3xl" })
+      }
+    );
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_jsx_runtime16.Fragment, { children: showPaymentForm && setupIntent?.setupIntentClientSecret ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
     import_react_stripe_js.Elements,
     {
@@ -15710,41 +15910,32 @@ var CheckoutDialog = ({ top = 0 }) => {
   const { t: t2 } = useTranslation();
   const theme = nt();
   const { api, data, selected } = useEmbed();
-  const modalRef = (0, import_react22.useRef)(null);
-  const contentRef = (0, import_react22.useRef)(null);
-  const checkoutRef = (0, import_react22.useRef)(null);
-  const [checkoutStage, setCheckoutStage] = (0, import_react22.useState)(
+  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_react22.useState)(
+  const [planPeriod, setPlanPeriod] = (0, import_react24.useState)(
     selected.period || data.company?.plan?.planPeriod || "month"
   );
-  const [charges, setCharges] = (0, import_react22.useState)();
-  const [paymentMethodId, setPaymentMethodId] = (0, import_react22.useState)();
-  const [isLoading, setIsLoading] = (0, import_react22.useState)(false);
-  const [error, setError] = (0, import_react22.useState)();
-  const [showPaymentForm, setShowPaymentForm] = (0, import_react22.useState)(
+  const [charges, setCharges] = (0, import_react24.useState)();
+  const [paymentMethodId, setPaymentMethodId] = (0, import_react24.useState)();
+  const [isLoading, setIsLoading] = (0, import_react24.useState)(false);
+  const [error, setError] = (0, import_react24.useState)();
+  const [showPaymentForm, setShowPaymentForm] = (0, import_react24.useState)(
     !data.subscription?.paymentMethod
   );
-  const [stripe, setStripe] = (0, import_react22.useState)(null);
-  const [setupIntent, setSetupIntent] = (0, import_react22.useState)();
   const {
     plans: availablePlans,
     addOns: availableAddOns,
     periods: availablePeriods
   } = useAvailablePlans(planPeriod);
-  const currentPlan = data.company?.plan;
-  const [selectedPlan, setSelectedPlan] = (0, import_react22.useState)(() => {
-    const p2 = availablePlans.find(
-      (plan) => plan.id === (typeof selected.planId !== "undefined" ? selected.planId : currentPlan?.id)
-    );
-    if (!p2) {
-      return void 0;
-    }
-    return p2;
-  });
+  const [selectedPlan, setSelectedPlan] = (0, import_react24.useState)(
+    () => availablePlans.find((plan) => plan.current)
+  );
   const currentAddOns = data.company?.addOns || [];
-  const [addOns, setAddOns] = (0, import_react22.useState)(
+  const [addOns, setAddOns] = (0, import_react24.useState)(
     () => availableAddOns.map((addOn) => ({
       ...addOn,
       isSelected: typeof selected.addOnId !== "undefined" ? addOn.id === selected.addOnId : currentAddOns.some((currentAddOn) => addOn.id === currentAddOn.id)
@@ -15757,37 +15948,59 @@ var CheckoutDialog = ({ top = 0 }) => {
       );
       const allocation = featureUsage?.allocation || 0;
       const usage = featureUsage?.usage || 0;
-      acc.push({ usageData, allocation, quantity: allocation, usage });
+      acc.push({
+        usageData,
+        allocation,
+        quantity: allocation ?? usage,
+        usage
+      });
       return acc;
     },
     []
   );
-  const createActiveUsageBasedEntitlementsReducer = (0, import_react22.useCallback)(
+  const createActiveUsageBasedEntitlementsReducer = (0, import_react24.useCallback)(
     (period = planPeriod) => (acc, entitlement) => {
       if (entitlement.priceBehavior && (period === "month" && entitlement.meteredMonthlyPrice || period === "year" && entitlement.meteredYearlyPrice)) {
         const featureUsage = data.featureUsage?.features.find(
           (usage2) => usage2.feature?.id === entitlement.feature?.id
         );
-        const allocation = featureUsage?.allocation || 0;
-        const usage = featureUsage?.usage || 0;
-        acc.push({ entitlement, allocation, quantity: allocation, usage });
+        const allocation = featureUsage?.allocation ?? 0;
+        const usage = featureUsage?.usage ?? 0;
+        acc.push({
+          entitlement,
+          allocation,
+          quantity: allocation,
+          usage
+        });
       }
       return acc;
     },
     [planPeriod, data.featureUsage?.features]
   );
-  const [usageBasedEntitlements, setUsageBasedEntitlements] = (0, import_react22.useState)(() => {
-    return (selectedPlan?.entitlements || []).reduce(
+  const [usageBasedEntitlements, setUsageBasedEntitlements] = (0, import_react24.useState)(
+    () => (selectedPlan?.entitlements || []).reduce(
       createActiveUsageBasedEntitlementsReducer(),
       []
-    );
-  });
-  const payInAdvanceEntitlements = (0, import_react22.useMemo)(() => {
-    return usageBasedEntitlements.filter(
+    )
+  );
+  const currentPlan = (0, import_react24.useMemo)(
+    () => availablePlans.find(
+      (plan) => plan.id === data.company?.plan?.id && data.company?.plan.planPeriod === planPeriod
+    ),
+    [data.company?.plan, planPeriod, availablePlans]
+  );
+  const payInAdvanceEntitlements = (0, import_react24.useMemo)(
+    () => usageBasedEntitlements.filter(
       ({ entitlement }) => entitlement.priceBehavior === "pay_in_advance"
-    );
-  }, [usageBasedEntitlements]);
-  const checkoutStages = (0, import_react22.useMemo)(() => {
+    ),
+    [usageBasedEntitlements]
+  );
+  const hasActiveAddOns = addOns.some((addOn) => addOn.isSelected === true);
+  const hasActivePayInAdvanceEntitlements = payInAdvanceEntitlements.some(
+    ({ quantity }) => quantity > 0
+  );
+  const requiresPayment = (!selectedPlan?.companyCanTrial || !!data.trialPaymentMethodRequired) && (!selectedPlan?.isFree || hasActiveAddOns || hasActivePayInAdvanceEntitlements);
+  const checkoutStages = (0, import_react24.useMemo)(() => {
     const stages = [
       {
         id: "plan",
@@ -15810,7 +16023,7 @@ var CheckoutDialog = ({ top = 0 }) => {
         description: t2("Optionally add features to your subscription")
       });
     }
-    if (!selectedPlan?.companyCanTrial || data.trialPaymentMethodRequired) {
+    if (requiresPayment) {
       stages.push({
         id: "checkout",
         name: t2("Checkout"),
@@ -15823,45 +16036,66 @@ var CheckoutDialog = ({ top = 0 }) => {
     payInAdvanceEntitlements,
     availableAddOns,
     selectedPlan?.companyCanTrial,
-    data.trialPaymentMethodRequired
+    requiresPayment
   ]);
   const isLightBackground = useIsLightBackground();
-  const previewCheckout = (0, import_react22.useCallback)(
-    async ({
-      plan,
-      addOns: addOns2,
-      entitlements,
-      period
-    }) => {
-      const periodValue = period || planPeriod;
-      const planPriceId = periodValue === "month" ? plan?.monthlyPrice?.id : plan?.yearlyPrice?.id;
-      if (!api || !planPriceId) {
+  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) {
         return;
       }
+      setError(void 0);
+      setCharges(void 0);
+      setIsLoading(true);
       try {
-        setError(void 0);
-        setCharges(void 0);
-        setIsLoading(true);
-        const payInAdvance = entitlements.reduce(
-          (acc, { entitlement, quantity }) => {
-            const priceId = (periodValue === "month" ? entitlement.meteredMonthlyPrice : entitlement.meteredYearlyPrice)?.priceId;
-            if (priceId) {
-              acc.push({
-                priceId,
-                quantity
-              });
-            }
-            return acc;
-          },
-          []
-        );
         const { data: data2 } = await api.previewCheckout({
           changeSubscriptionRequestBody: {
-            newPlanId: plan.id,
+            newPlanId: selectedPlan.id,
             newPriceId: planPriceId,
-            addOnIds: addOns2.reduce((acc, addOn) => {
+            addOnIds: addOns.reduce((acc, addOn) => {
               if (addOn.isSelected) {
-                const addOnPriceId = (periodValue === "month" ? addOn?.monthlyPrice : addOn?.yearlyPrice)?.id;
+                const addOnPriceId = (planPeriod === "month" ? addOn?.monthlyPrice : addOn?.yearlyPrice)?.id;
                 if (addOnPriceId) {
                   acc.push({
                     addOnId: addOn.id,
@@ -15871,133 +16105,49 @@ var CheckoutDialog = ({ top = 0 }) => {
               }
               return acc;
             }, []),
-            payInAdvance
+            payInAdvance: payInAdvanceEntitlements.reduce(
+              (acc, { entitlement, quantity }) => {
+                const priceId = (planPeriod === "month" ? entitlement.meteredMonthlyPrice : entitlement.meteredYearlyPrice)?.priceId;
+                if (priceId) {
+                  acc.push({
+                    priceId,
+                    quantity
+                  });
+                }
+                return acc;
+              },
+              []
+            )
           }
         });
         setCharges(data2);
-      } catch {
+      } catch (error2) {
+        if (error2 instanceof ResponseError && error2.response.status === 401) {
+          const data2 = await error2.response.json();
+          if (data2.error === "Access Token Invalid") {
+            return setError(
+              t2("Session expired. Please refresh and try again.")
+            );
+          }
+        }
         setError(
           t2("Error retrieving plan details. Please try again in a moment.")
         );
       } finally {
         setIsLoading(false);
-        if (!period) {
-          checkoutRef.current?.scrollIntoView({
-            behavior: "smooth",
-            block: "nearest"
-          });
-        }
-      }
-    },
-    [t2, api, planPeriod]
-  );
-  const selectPlan = (0, import_react22.useCallback)(
-    (updatedPlan, updatedPeriod) => {
-      const entitlements = updatedPlan.entitlements.reduce(
-        createActiveUsageBasedEntitlementsReducer(updatedPeriod),
-        []
-      );
-      const updatedPayInAdvanceEntitlements = entitlements.filter(
-        ({ entitlement }) => entitlement.priceBehavior === "pay_in_advance"
-      );
-      setSelectedPlan(updatedPlan);
-      setUsageBasedEntitlements(entitlements);
-      previewCheckout({
-        plan: updatedPlan,
-        addOns,
-        entitlements: updatedPayInAdvanceEntitlements,
-        period: updatedPeriod
-      });
-    },
-    [addOns, previewCheckout, createActiveUsageBasedEntitlementsReducer]
-  );
-  const toggleAddOn = (0, import_react22.useCallback)(
-    (id, updatedPeriod) => {
-      const updatedAddOns = addOns.map((addOn) => ({
-        ...addOn,
-        ...addOn.id === id && { isSelected: !addOn.isSelected }
-      }));
-      setAddOns(updatedAddOns);
-      if (!selectedPlan) {
-        return;
-      }
-      previewCheckout({
-        plan: selectedPlan,
-        addOns: updatedAddOns,
-        entitlements: payInAdvanceEntitlements,
-        period: updatedPeriod || planPeriod
-      });
-    },
-    [
-      selectedPlan,
-      addOns,
-      payInAdvanceEntitlements,
-      planPeriod,
-      previewCheckout
-    ]
-  );
-  const changePlanPeriod = (0, import_react22.useCallback)(
-    (period) => {
-      if (selectedPlan) {
-        selectPlan(selectedPlan, period);
       }
-      setPlanPeriod(period);
-    },
-    [selectedPlan, selectPlan, setPlanPeriod]
-  );
-  const updateUsageBasedEntitlementQuantity = (0, import_react22.useCallback)(
-    (id, updatedQuantity) => {
-      let shouldPreview = true;
-      const entitlements = payInAdvanceEntitlements.map(
-        ({ entitlement, allocation, quantity, usage }) => {
-          if (entitlement.id === id) {
-            if (updatedQuantity < usage) {
-              shouldPreview = false;
-            }
-            return {
-              entitlement,
-              allocation,
-              quantity: updatedQuantity,
-              usage
-            };
-          }
-          return { entitlement, allocation, quantity, usage };
-        }
-      );
-      setUsageBasedEntitlements(
-        (prev2) => prev2.map(
-          ({ entitlement, allocation, quantity, usage }) => entitlement.id === id ? {
-            entitlement,
-            allocation,
-            quantity: updatedQuantity,
-            usage
-          } : { entitlement, allocation, quantity, usage }
-        )
-      );
-      if (!selectedPlan || !shouldPreview) {
-        return;
-      }
-      previewCheckout({
-        plan: selectedPlan,
-        addOns,
-        entitlements,
-        period: planPeriod
+    }
+    previewCheckout();
+  }, [t2, api, planPeriod, selectedPlan, addOns, payInAdvanceEntitlements]);
+  (0, import_react24.useEffect)(() => {
+    if (charges) {
+      checkoutRef.current?.scrollIntoView({
+        behavior: "smooth",
+        block: "nearest"
       });
-    },
-    [
-      selectedPlan,
-      addOns,
-      payInAdvanceEntitlements,
-      planPeriod,
-      previewCheckout
-    ]
-  );
-  (0, import_react22.useEffect)(() => {
-    if (!stripe && setupIntent?.publishableKey) {
-      setStripe(loadStripe(setupIntent.publishableKey));
     }
-  }, [stripe, setupIntent?.publishableKey]);
-  (0, import_react22.useLayoutEffect)(() => {
+  }, [charges]);
+  (0, import_react24.useLayoutEffect)(() => {
     if (contentRef.current) {
       contentRef.current.scrollTo({
         top: 0,
@@ -16124,7 +16274,7 @@ var CheckoutDialog = ({ top = 0 }) => {
                               ]
                             }
                           ),
-                          activeCheckoutStage?.id !== "usage" && activeCheckoutStage?.id !== "checkout" && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                          checkoutStage === "plan" && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
                             PeriodToggle,
                             {
                               layerRef: modalRef,
@@ -16143,7 +16293,6 @@ var CheckoutDialog = ({ top = 0 }) => {
                         isLoading,
                         period: planPeriod,
                         plans: availablePlans,
-                        currentPlan,
                         selectedPlan,
                         selectPlan
                       }
@@ -16170,9 +16319,8 @@ var CheckoutDialog = ({ top = 0 }) => {
                     checkoutStage === "checkout" && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
                       Checkout,
                       {
-                        setupIntent,
+                        requiresPayment,
                         showPaymentForm,
-                        stripe,
                         setPaymentMethodId: (id) => setPaymentMethodId(id),
                         togglePaymentForm: () => setShowPaymentForm((prev2) => !prev2)
                       }
@@ -16187,17 +16335,18 @@ var CheckoutDialog = ({ top = 0 }) => {
                   charges,
                   checkoutRef,
                   checkoutStage,
+                  checkoutStages,
                   currentAddOns,
-                  currentPlan,
                   currentUsageBasedEntitlements,
                   error,
+                  currentPlan,
                   isLoading,
                   paymentMethodId,
                   planPeriod,
+                  requiresPayment,
                   selectedPlan,
                   setCheckoutStage: (stage) => setCheckoutStage(stage),
                   setError: (msg) => setError(msg),
-                  setSetupIntent: (intent) => setSetupIntent(intent),
                   showPaymentForm,
                   toggleLoading: () => setIsLoading((prev2) => !prev2),
                   usageBasedEntitlements
@@ -16212,7 +16361,7 @@ var CheckoutDialog = ({ top = 0 }) => {
 };
 
 // src/components/shared/payment-form/PaymentForm.tsx
-var import_react23 = require("react");
+var import_react25 = require("react");
 var import_react_stripe_js2 = require("@stripe/react-stripe-js");
 var import_jsx_runtime18 = require("react/jsx-runtime");
 var PaymentForm = ({ onConfirm }) => {
@@ -16220,9 +16369,9 @@ var PaymentForm = ({ onConfirm }) => {
   const stripe = (0, import_react_stripe_js2.useStripe)();
   const elements = (0, import_react_stripe_js2.useElements)();
   const { api } = useEmbed();
-  const [message, setMessage] = (0, import_react23.useState)(null);
-  const [isLoading, setIsLoading] = (0, import_react23.useState)(false);
-  const [isConfirmed, setIsConfirmed] = (0, import_react23.useState)(false);
+  const [message, setMessage] = (0, import_react25.useState)(null);
+  const [isLoading, setIsLoading] = (0, import_react25.useState)(false);
+  const [isConfirmed, setIsConfirmed] = (0, import_react25.useState)(false);
   const handleSubmit = async (event) => {
     event.preventDefault();
     if (!api || !stripe || !elements) {
@@ -16284,7 +16433,7 @@ var PaymentForm = ({ onConfirm }) => {
 };
 
 // src/components/shared/period-toggle/PeriodToggle.tsx
-var import_react24 = require("react");
+var import_react26 = require("react");
 var import_jsx_runtime19 = require("react/jsx-runtime");
 var PeriodToggle = ({
   options,
@@ -16296,8 +16445,8 @@ var PeriodToggle = ({
   const { t: t2 } = useTranslation();
   const theme = nt();
   const isLightBackground = useIsLightBackground();
-  const [tooltipZIndex, setTooltipZIndex] = (0, import_react24.useState)(1);
-  const savingsPercentage = (0, import_react24.useMemo)(() => {
+  const [tooltipZIndex, setTooltipZIndex] = (0, import_react26.useState)(1);
+  const savingsPercentage = (0, import_react26.useMemo)(() => {
     if (selectedPlan) {
       const monthly = (selectedPlan?.monthlyPrice?.price || 0) * 12;
       const yearly = selectedPlan?.yearlyPrice?.price || 0;
@@ -16305,7 +16454,7 @@ var PeriodToggle = ({
     }
     return 0;
   }, [selectedPlan]);
-  (0, import_react24.useLayoutEffect)(() => {
+  (0, import_react26.useLayoutEffect)(() => {
     const element = layerRef?.current;
     if (element) {
       const style = getComputedStyle(element);
@@ -16501,7 +16650,7 @@ var Badge = () => {
 };
 
 // src/components/layout/RenderLayout.tsx
-var import_react25 = require("react");
+var import_react27 = require("react");
 var import_jsx_runtime21 = require("react/jsx-runtime");
 var Disabled = () => {
   const theme = nt();
@@ -16543,14 +16692,14 @@ var Disabled = () => {
 var Success = () => {
   const theme = nt();
   const { hydrate, data, api, setLayout, isPending } = useEmbed();
-  const [isOpen, setIsOpen] = (0, import_react25.useState)(true);
-  (0, import_react25.useEffect)(() => {
+  const [isOpen, setIsOpen] = (0, import_react27.useState)(true);
+  (0, import_react27.useEffect)(() => {
     if (api && data.component?.id) {
       hydrate();
       setTimeout(() => setIsOpen(false), 2e3);
     }
   }, [api, data.component?.id, hydrate]);
-  (0, import_react25.useEffect)(() => {
+  (0, import_react27.useEffect)(() => {
     if (!isPending && !isOpen) {
       setLayout("portal");
     }
@@ -16630,12 +16779,12 @@ var StyledViewport = dt(Box).attrs(({ theme }) => ({
 
 // src/components/layout/viewport/Viewport.tsx
 var import_jsx_runtime22 = require("react/jsx-runtime");
-var Viewport = (0, import_react26.forwardRef)(
+var Viewport = (0, import_react28.forwardRef)(
   ({ children, portal, ...props }, ref) => {
     const { data, layout } = useEmbed();
-    const [top, setTop] = (0, import_react26.useState)(0);
+    const [top, setTop] = (0, import_react28.useState)(0);
     const canCheckout = data.capabilities?.checkout ?? true;
-    (0, import_react26.useLayoutEffect)(() => {
+    (0, import_react28.useLayoutEffect)(() => {
       if (layout !== "checkout") {
         return;
       }
@@ -16661,10 +16810,10 @@ var Viewport = (0, import_react26.forwardRef)(
 Viewport.displayName = "Viewport";
 
 // src/components/layout/column/Column.tsx
-var import_react28 = require("react");
+var import_react30 = require("react");
 
 // src/components/layout/card/Card.tsx
-var import_react27 = require("react");
+var import_react29 = require("react");
 
 // src/components/layout/card/styles.ts
 var Element = dt(Box)``;
@@ -16708,7 +16857,7 @@ var StyledCard = dt.div(({ theme }) => {
 
 // src/components/layout/card/Card.tsx
 var import_jsx_runtime23 = require("react/jsx-runtime");
-var Card = (0, import_react27.forwardRef)(
+var Card = (0, import_react29.forwardRef)(
   ({ children, className }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(StyledCard, { ref, className, children });
   }
@@ -16722,7 +16871,7 @@ var StyledColumn = dt.div`
 
 // src/components/layout/column/Column.tsx
 var import_jsx_runtime24 = require("react/jsx-runtime");
-var Column = (0, import_react28.forwardRef)(
+var Column = (0, import_react30.forwardRef)(
   ({ children, basis, ...props }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(StyledColumn, { ref, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Card, { children }) });
   }
@@ -16730,7 +16879,7 @@ var Column = (0, import_react28.forwardRef)(
 Column.displayName = "Column";
 
 // src/components/elements/included-features/Details.tsx
-var import_react29 = require("react");
+var import_react31 = require("react");
 var import_pluralize4 = __toESM(require_pluralize());
 var import_jsx_runtime25 = require("react/jsx-runtime");
 var Details = ({
@@ -16750,7 +16899,7 @@ var Details = ({
   const { t: t2 } = useTranslation();
   const theme = nt();
   const { data } = useEmbed();
-  const price = (0, import_react29.useMemo)(() => {
+  const price = (0, import_react31.useMemo)(() => {
     if (data.company?.plan?.planPeriod === "month") {
       return monthlyUsageBasedPrice?.price;
     }
@@ -16762,7 +16911,7 @@ var Details = ({
     monthlyUsageBasedPrice,
     yearlyUsageBasedPrice
   ]);
-  const text = (0, import_react29.useMemo)(() => {
+  const text = (0, import_react31.useMemo)(() => {
     if (!feature?.name) {
       return;
     }
@@ -16779,7 +16928,7 @@ var Details = ({
       t2("Unlimited", { item: (0, import_pluralize4.default)(feature.name) });
     }
   }, [allocation, feature?.name, price, priceBehavior, t2]);
-  const usageText = (0, import_react29.useMemo)(() => {
+  const usageText = (0, import_react31.useMemo)(() => {
     if (!feature?.name) {
       return;
     }
@@ -16884,16 +17033,24 @@ function resolveDesignProps(props) {
     visibleFeatures: props.visibleFeatures
   };
 }
-var IncludedFeatures = (0, import_react30.forwardRef)(({ className, ...rest }, ref) => {
+var IncludedFeatures = (0, import_react32.forwardRef)(({ className, ...rest }, ref) => {
   const props = resolveDesignProps(rest);
   const { t: t2 } = useTranslation();
   const theme = nt();
   const { data } = useEmbed();
-  const elements = (0, import_react30.useRef)([]);
+  const elements = (0, import_react32.useRef)([]);
   const shouldWrapChildren = useWrapChildren(elements.current);
   const isLightBackground = useIsLightBackground();
-  const [showCount, setShowCount] = (0, import_react30.useState)(VISIBLE_ENTITLEMENT_COUNT);
-  const entitlements = (props.visibleFeatures ? props.visibleFeatures : data.featureUsage?.features.reduce((acc, usage) => {
+  const [showCount, setShowCount] = (0, import_react32.useState)(VISIBLE_ENTITLEMENT_COUNT);
+  const entitlements = (props.visibleFeatures ? props.visibleFeatures : data.featureUsage?.features.sort((a2, b2) => {
+    if (a2.feature?.name && b2.feature?.name && a2.feature?.name > b2.feature?.name) {
+      return 1;
+    }
+    if (a2.feature?.name && b2.feature?.name && a2.feature?.name < b2.feature?.name) {
+      return -1;
+    }
+    return 0;
+  }).reduce((acc, usage) => {
     if (usage.feature?.id) {
       acc.push(usage.feature.id);
     }
@@ -16906,10 +17063,12 @@ var IncludedFeatures = (0, import_react30.forwardRef)(({ className, ...rest }, r
       const mappedUsageData = data.activeUsageBasedEntitlements.find(
         (entitlement) => entitlement.featureId === id
       );
-      acc.push({
-        featureUsage: mappedFeatureUsage,
-        usageData: mappedUsageData
-      });
+      if (mappedFeatureUsage) {
+        acc.push({
+          featureUsage: mappedFeatureUsage,
+          usageData: mappedUsageData
+        });
+      }
       return acc;
     },
     []
@@ -16945,15 +17104,7 @@ var IncludedFeatures = (0, import_react30.forwardRef)(({ className, ...rest }, r
             children: props.header.text
           }
         ) }),
-        entitlements.slice().sort((a2, b2) => {
-          if (a2.featureUsage?.feature?.name && b2.featureUsage?.feature?.name && a2.featureUsage?.feature?.name > b2.featureUsage?.feature?.name) {
-            return 1;
-          }
-          if (a2.featureUsage?.feature?.name && b2.featureUsage?.feature?.name && a2.featureUsage?.feature?.name < b2.featureUsage?.feature?.name) {
-            return -1;
-          }
-          return 0;
-        }).slice(0, showCount).map((entitlement, index) => {
+        entitlements.slice(0, showCount).map((entitlement, index) => {
           const { entitlementExpirationDate, feature } = entitlement.featureUsage || {};
           const shouldShowDetails = feature?.name && (feature?.featureType === "event" || feature?.featureType === "trait");
           return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
@@ -17061,7 +17212,7 @@ var IncludedFeatures = (0, import_react30.forwardRef)(({ className, ...rest }, r
 IncludedFeatures.displayName = "IncludedFeatures";
 
 // src/components/elements/invoices/Invoices.tsx
-var import_react31 = require("react");
+var import_react33 = require("react");
 var import_jsx_runtime27 = require("react/jsx-runtime");
 function resolveDesignProps2(props) {
   return {
@@ -17115,19 +17266,19 @@ var InvoiceDate = ({ date, fontStyle, url }) => {
   }
   return dateText;
 };
-var Invoices = (0, import_react31.forwardRef)(({ className, data, ...rest }, ref) => {
+var Invoices = (0, import_react33.forwardRef)(({ className, data, ...rest }, ref) => {
   const props = resolveDesignProps2(rest);
   const { t: t2 } = useTranslation();
   const theme = nt();
   const { api } = useEmbed();
-  const [invoices, setInvoices] = (0, import_react31.useState)(() => formatInvoices(data));
-  const [listSize, setListSize] = (0, import_react31.useState)(props.limit.number);
+  const [invoices, setInvoices] = (0, import_react33.useState)(() => formatInvoices(data));
+  const [listSize, setListSize] = (0, import_react33.useState)(props.limit.number);
   const toggleListSize = () => {
     setListSize(
       (prev2) => prev2 !== props.limit.number ? props.limit.number : MAX_VISIBLE_INVOICE_COUNT
     );
   };
-  (0, import_react31.useEffect)(() => {
+  (0, import_react33.useEffect)(() => {
     api?.listInvoices().then(({ data: data2 }) => {
       setInvoices(formatInvoices(data2));
     });
@@ -17193,7 +17344,7 @@ var Invoices = (0, import_react31.forwardRef)(({ className, data, ...rest }, ref
 Invoices.displayName = "Invoices";
 
 // src/components/elements/metered-features/MeteredFeatures.tsx
-var import_react32 = require("react");
+var import_react34 = require("react");
 var import_pluralize5 = __toESM(require_pluralize());
 
 // src/components/elements/metered-features/styles.ts
@@ -17240,20 +17391,15 @@ function resolveDesignProps3(props) {
     visibleFeatures: props.visibleFeatures
   };
 }
-var MeteredFeatures = (0, import_react32.forwardRef)(({ className, ...rest }, ref) => {
+var MeteredFeatures = (0, import_react34.forwardRef)(({ className, ...rest }, ref) => {
   const props = resolveDesignProps3(rest);
-  const elements = (0, import_react32.useRef)([]);
+  const elements = (0, import_react34.useRef)([]);
   const shouldWrapChildren = useWrapChildren(elements.current);
   const { t: t2 } = useTranslation();
   const theme = nt();
   const { data, setLayout, setSelected } = useEmbed();
   const isLightBackground = useIsLightBackground();
   const { planPeriod } = data.company?.plan || {};
-  let resetDate;
-  if (data.subscription?.expiredAt) {
-    resetDate = new Date(data.subscription?.expiredAt);
-    resetDate.setDate(resetDate.getDate() + 1);
-  }
   const featureUsage = (props.visibleFeatures ? props.visibleFeatures.reduce((acc, id) => {
     const mappedFeatureUsage = data.featureUsage?.features.find(
       (usage) => usage.feature?.id === id
@@ -17275,6 +17421,7 @@ var MeteredFeatures = (0, import_react32.forwardRef)(({ className, ...rest }, re
       feature,
       usage,
       priceBehavior,
+      metricResetAt,
       monthlyUsageBasedPrice,
       yearlyUsageBasedPrice
     }, index) => {
@@ -17366,8 +17513,8 @@ var MeteredFeatures = (0, import_react32.forwardRef)(({ className, ...rest }, re
                           $size: theme.typography[props.allocation.fontStyle].fontSize,
                           $weight: theme.typography[props.allocation.fontStyle].fontWeight,
                           $color: theme.typography[props.allocation.fontStyle].color,
-                          children: priceBehavior && resetDate ? t2("Resets", {
-                            date: toPrettyDate(resetDate, {
+                          children: priceBehavior && metricResetAt ? t2("Resets", {
+                            date: toPrettyDate(metricResetAt, {
                               month: "short",
                               day: "numeric",
                               year: void 0
@@ -17419,7 +17566,7 @@ var MeteredFeatures = (0, import_react32.forwardRef)(({ className, ...rest }, re
 MeteredFeatures.displayName = "MeteredFeatures";
 
 // src/components/elements/payment-method/PaymentMethod.tsx
-var import_react33 = require("react");
+var import_react35 = require("react");
 var import_react_dom3 = require("react-dom");
 var import_react_stripe_js3 = require("@stripe/react-stripe-js");
 var import_jsx_runtime29 = require("react/jsx-runtime");
@@ -17495,21 +17642,21 @@ var PaymentMethodElement = ({
     )
   ] });
 };
-var PaymentMethod = (0, import_react33.forwardRef)(({ children, className, portal, allowEdit = true, ...rest }, ref) => {
+var PaymentMethod = (0, import_react35.forwardRef)(({ children, className, portal, allowEdit = true, ...rest }, ref) => {
   const props = resolveDesignProps4(rest);
   const { t: t2 } = useTranslation();
   const theme = nt();
   const { api, data, layout, setLayout } = useEmbed();
   const isLightBackground = useIsLightBackground();
-  const [isLoading, setIsLoading] = (0, import_react33.useState)(false);
-  const [error, setError] = (0, import_react33.useState)();
-  const [showPaymentForm, setShowPaymentForm] = (0, import_react33.useState)(
+  const [isLoading, setIsLoading] = (0, import_react35.useState)(false);
+  const [error, setError] = (0, import_react35.useState)();
+  const [showPaymentForm, setShowPaymentForm] = (0, import_react35.useState)(
     () => typeof data.subscription?.paymentMethod === "undefined"
   );
-  const [stripe, setStripe] = (0, import_react33.useState)(null);
-  const [setupIntent, setSetupIntent] = (0, import_react33.useState)();
-  const [top, setTop] = (0, import_react33.useState)(0);
-  const paymentMethod = (0, import_react33.useMemo)(() => {
+  const [stripe, setStripe] = (0, import_react35.useState)(null);
+  const [setupIntent, setSetupIntent] = (0, import_react35.useState)();
+  const [top, setTop] = (0, import_react35.useState)(0);
+  const paymentMethod = (0, import_react35.useMemo)(() => {
     const { paymentMethodType, cardLast4, cardExpMonth, cardExpYear } = data.subscription?.paymentMethod || {};
     let monthsToExpiration;
     if (typeof cardExpYear === "number" && typeof cardExpMonth === "number") {
@@ -17529,7 +17676,7 @@ var PaymentMethod = (0, import_react33.forwardRef)(({ children, className, porta
       monthsToExpiration
     };
   }, [data.subscription?.paymentMethod]);
-  const createSetupIntent = (0, import_react33.useCallback)(async () => {
+  const createSetupIntent = (0, import_react35.useCallback)(async () => {
     if (!api || !data.component?.id) {
       return;
     }
@@ -17548,7 +17695,7 @@ var PaymentMethod = (0, import_react33.forwardRef)(({ children, className, porta
       setIsLoading(false);
     }
   }, [t2, api, data.component?.id]);
-  const updatePaymentMethod = (0, import_react33.useCallback)(
+  const updatePaymentMethod = (0, import_react35.useCallback)(
     async (id) => {
       if (!api || !id) {
         return;
@@ -17569,12 +17716,12 @@ var PaymentMethod = (0, import_react33.forwardRef)(({ children, className, porta
     },
     [t2, api, setLayout]
   );
-  (0, import_react33.useEffect)(() => {
+  (0, import_react35.useEffect)(() => {
     if (!stripe && setupIntent?.publishableKey) {
       setStripe(loadStripe(setupIntent.publishableKey));
     }
   }, [stripe, setupIntent?.publishableKey]);
-  (0, import_react33.useLayoutEffect)(() => {
+  (0, import_react35.useLayoutEffect)(() => {
     const parent = portal || document.body;
     const value = Math.abs(
       (parent === document.body ? window.scrollY : parent.scrollTop) ?? 0
@@ -17699,7 +17846,7 @@ var PaymentMethod = (0, import_react33.forwardRef)(({ children, className, porta
 PaymentMethod.displayName = "PaymentMethod";
 
 // src/components/elements/plan-manager/PlanManager.tsx
-var import_react34 = require("react");
+var import_react36 = require("react");
 var import_pluralize6 = __toESM(require_pluralize());
 var import_jsx_runtime30 = require("react/jsx-runtime");
 var resolveDesignProps5 = (props) => {
@@ -17730,16 +17877,17 @@ var resolveDesignProps5 = (props) => {
     }
   };
 };
-var PlanManager = (0, import_react34.forwardRef)(({ children, className, portal, ...rest }, ref) => {
+var PlanManager = (0, import_react36.forwardRef)(({ children, className, portal, ...rest }, ref) => {
   const props = resolveDesignProps5(rest);
   const theme = nt();
   const { t: t2 } = useTranslation();
   const { data, setLayout, setSelected } = useEmbed();
   const isLightBackground = useIsLightBackground();
-  const { addOns, canCheckout, currentPlan, featureUsage } = {
+  const { addOns, canCheckout, currentPlan, defaultPlan, featureUsage } = {
     addOns: data.company?.addOns || [],
     currentPlan: data.company?.plan,
     canCheckout: data.capabilities?.checkout ?? true,
+    defaultPlan: data.defaultPlan,
     featureUsage: data.featureUsage
   };
   const usageBasedEntitlements = (featureUsage?.features || []).reduce(
@@ -17792,7 +17940,11 @@ var PlanManager = (0, import_react34.forwardRef)(({ children, className, portal,
               $size: theme.typography.text.fontSize * 0.8125,
               $weight: theme.typography.text.fontWeight,
               $color: theme.typography.text.color,
-              children: data.trialPaymentMethodRequired ? t2("After the trial, subscribe") : t2("After the trial, cancel")
+              children: data.trialPaymentMethodRequired ? t2("After the trial, subscribe") : defaultPlan ? t2("After the trial, cancel", {
+                defaultPlanName: defaultPlan?.name
+              }) : t2("After the trial, cancel no default", {
+                planName: currentPlan?.name
+              })
             }
           )
         ]
@@ -18039,7 +18191,7 @@ var PlanManager = (0, import_react34.forwardRef)(({ children, className, portal,
 PlanManager.displayName = "PlanManager";
 
 // src/components/elements/pricing-table/PricingTable.tsx
-var import_react35 = require("react");
+var import_react37 = require("react");
 var import_pluralize7 = __toESM(require_pluralize());
 var import_jsx_runtime31 = require("react/jsx-runtime");
 var resolveDesignProps6 = (props) => {
@@ -18081,17 +18233,18 @@ var resolveDesignProps6 = (props) => {
     }
   };
 };
-var PricingTable = (0, import_react35.forwardRef)(({ children, className, ...rest }, ref) => {
+var PricingTable = (0, import_react37.forwardRef)(({ children, className, ...rest }, ref) => {
   const props = resolveDesignProps6(rest);
   const { t: t2 } = useTranslation();
   const theme = nt();
   const { data, setLayout, setSelected } = useEmbed();
-  const [selectedPeriod, setSelectedPeriod] = (0, import_react35.useState)(
+  const trialEndDays = useTrialEnd();
+  const [selectedPeriod, setSelectedPeriod] = (0, import_react37.useState)(
     () => data.company?.plan?.planPeriod || "month"
   );
   const { plans, addOns, periods } = useAvailablePlans(selectedPeriod);
   const isLightBackground = useIsLightBackground();
-  const [entitlementCounts, setEntitlementCounts] = (0, import_react35.useState)(
+  const [entitlementCounts, setEntitlementCounts] = (0, import_react37.useState)(
     () => plans.reduce(
       (acc, plan) => {
         acc[plan.id] = {
@@ -18258,7 +18411,7 @@ var PricingTable = (0, import_react35.forwardRef)(({ children, className, ...res
                                 $backgroundColor: theme.primary,
                                 $borderRadius: "9999px",
                                 $padding: "0.125rem 0.85rem",
-                                children: t2("Active")
+                                children: trialEndDays ? t2("Trial ends in", { days: trialEndDays }) : t2("Active")
                               }
                             )
                           ]
@@ -18341,11 +18494,11 @@ var PricingTable = (0, import_react35.forwardRef)(({ children, className, ...res
                                             selectedPeriod
                                           ] })
                                         ] }) : entitlement.valueType === "numeric" || entitlement.valueType === "unlimited" || entitlement.valueType === "trait" ? /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
-                                          typeof entitlement.valueNumeric === "number" ? `${formatNumber(entitlement.valueNumeric)} ${(0, import_pluralize7.default)(entitlement.feature.name, entitlement.valueNumeric)}` : t2("Unlimited", {
+                                          entitlement.valueType === "unlimited" ? t2("Unlimited", {
                                             item: (0, import_pluralize7.default)(
                                               entitlement.feature.name
                                             )
-                                          }),
+                                          }) : typeof entitlement.valueNumeric === "number" && `${formatNumber(entitlement.valueNumeric)} ${(0, import_pluralize7.default)(entitlement.feature.name, entitlement.valueNumeric)}`,
                                           entitlement.metricPeriod && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
                                             " ",
                                             t2("per"),
@@ -18620,11 +18773,11 @@ var PricingTable = (0, import_react35.forwardRef)(({ children, className, ...res
                                             $weight: theme.typography.text.fontWeight,
                                             $color: theme.typography.text.color,
                                             children: entitlement.valueType === "numeric" || entitlement.valueType === "unlimited" || entitlement.valueType === "trait" ? /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
-                                              typeof entitlement.valueNumeric === "number" ? `${formatNumber(entitlement.valueNumeric)} ${(0, import_pluralize7.default)(entitlement.feature.name, entitlement.valueNumeric)}` : t2("Unlimited", {
+                                              entitlement.valueType === "unlimited" ? t2("Unlimited", {
                                                 item: (0, import_pluralize7.default)(
                                                   entitlement.feature.name
                                                 )
-                                              }),
+                                              }) : typeof entitlement.valueNumeric === "number" && `${formatNumber(entitlement.valueNumeric)} ${(0, import_pluralize7.default)(entitlement.feature.name, entitlement.valueNumeric)}`,
                                               entitlement.metricPeriod && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
                                                 " ",
                                                 t2("per"),
@@ -18682,7 +18835,7 @@ var PricingTable = (0, import_react35.forwardRef)(({ children, className, ...res
 PricingTable.displayName = "PricingTable";
 
 // src/components/elements/upcoming-bill/UpcomingBill.tsx
-var import_react36 = require("react");
+var import_react38 = require("react");
 var import_jsx_runtime32 = require("react/jsx-runtime");
 function resolveDesignProps7(props) {
   return {
@@ -18702,12 +18855,12 @@ function resolveDesignProps7(props) {
     }
   };
 }
-var UpcomingBill = (0, import_react36.forwardRef)(({ className, ...rest }, ref) => {
+var UpcomingBill = (0, import_react38.forwardRef)(({ className, ...rest }, ref) => {
   const props = resolveDesignProps7(rest);
   const { t: t2 } = useTranslation();
   const theme = nt();
   const { data } = useEmbed();
-  const { upcomingInvoice } = (0, import_react36.useMemo)(() => {
+  const { upcomingInvoice } = (0, import_react38.useMemo)(() => {
     return {
       upcomingInvoice: {
         ...typeof data.upcomingInvoice?.amountDue === "number" && {
@@ -18777,10 +18930,10 @@ var UpcomingBill = (0, import_react36.forwardRef)(({ className, ...rest }, ref)
 UpcomingBill.displayName = "UpcomingBill";
 
 // src/components/embed/ComponentTree.tsx
-var import_react38 = require("react");
+var import_react40 = require("react");
 
 // src/components/embed/renderer.ts
-var import_react37 = require("react");
+var import_react39 = require("react");
 var components = {
   Root,
   Viewport,
@@ -18812,7 +18965,7 @@ function createRenderer(options) {
     const { className, ...rest } = props;
     const resolvedProps = component === "div" ? rest : props;
     const resolvedChildren = children.map(renderNode);
-    return (0, import_react37.createElement)(
+    return (0, import_react39.createElement)(
       component,
       {
         key: index,
@@ -18881,8 +19034,8 @@ var Error2 = ({ message }) => {
 };
 var ComponentTree = () => {
   const { error, nodes } = useEmbed();
-  const [children, setChildren] = (0, import_react38.useState)(/* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Loading, {}));
-  (0, import_react38.useEffect)(() => {
+  const [children, setChildren] = (0, import_react40.useState)(/* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Loading, {}));
+  (0, import_react40.useEffect)(() => {
     const renderer = createRenderer();
     setChildren(nodes.map(renderer));
   }, [nodes]);
@@ -18890,7 +19043,7 @@ var ComponentTree = () => {
     console.error(error);
     return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Error2, { message: error.message });
   }
-  if (import_react38.Children.count(children) === 0) {
+  if (import_react40.Children.count(children) === 0) {
     return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Loading, {});
   }
   return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_jsx_runtime33.Fragment, { children });