@schematichq/schematic-components 2.1.0 → 2.1.2

package/dist/schematic-components.cjs.js

@@ -4321,6 +4321,7 @@ var initialContext = {
   setAccessToken: stub,
   setLayout: stub,
   setCheckoutState: stub,
+  initializeWithPlan: stub,
   setData: stub,
   updateSettings: stub,
   debug: stub,
@@ -6443,7 +6444,9 @@ var I18n = class _I18n extends EventEmitter {
     return rtlLngs.indexOf(languageUtils.getLanguagePartFromCode(lng)) > -1 || lng.toLowerCase().indexOf("-arab") > 1 ? "rtl" : "ltr";
   }
   static createInstance(options = {}, callback) {
-    return new _I18n(options, callback);
+    const instance2 = new _I18n(options, callback);
+    instance2.createInstance = _I18n.createInstance;
+    return instance2;
   }
   cloneInstance(options = {}, callback = noop) {
     const forkResourceStore = options.forkResourceStore;
@@ -6507,7 +6510,6 @@ var I18n = class _I18n extends EventEmitter {
   }
 };
 var instance = I18n.createInstance();
-instance.createInstance = I18n.createInstance;
 var createInstance = instance.createInstance;
 var dir = instance.dir;
 var init = instance.init;
@@ -8057,6 +8059,13 @@ function BillingPlanCreditGrantResponseDataFromJSONTyped(json, ignoreDiscriminat
     return json;
   }
   return {
+    autoTopupAmount: json["auto_topup_amount"] == null ? void 0 : json["auto_topup_amount"],
+    autoTopupAmountType: json["auto_topup_amount_type"] == null ? void 0 : json["auto_topup_amount_type"],
+    autoTopupEnabled: json["auto_topup_enabled"],
+    autoTopupExpiryType: json["auto_topup_expiry_type"] == null ? void 0 : json["auto_topup_expiry_type"],
+    autoTopupExpiryUnit: json["auto_topup_expiry_unit"] == null ? void 0 : json["auto_topup_expiry_unit"],
+    autoTopupExpiryUnitCount: json["auto_topup_expiry_unit_count"] == null ? void 0 : json["auto_topup_expiry_unit_count"],
+    autoTopupThresholdPercent: json["auto_topup_threshold_percent"] == null ? void 0 : json["auto_topup_threshold_percent"],
     createdAt: new Date(json["created_at"]),
     creditAmount: json["credit_amount"],
     creditId: json["credit_id"],
@@ -8283,6 +8292,7 @@ function BillingSubscriptionViewFromJSONTyped(json, ignoreDiscriminator) {
     return json;
   }
   return {
+    applicationId: json["application_id"] == null ? void 0 : json["application_id"],
     cancelAt: json["cancel_at"] == null ? void 0 : json["cancel_at"],
     cancelAtPeriodEnd: json["cancel_at_period_end"],
     companyId: json["company_id"] == null ? void 0 : json["company_id"],
@@ -8378,6 +8388,7 @@ function CheckoutResponseDataFromJSONTyped(json, ignoreDiscriminator) {
     return json;
   }
   return {
+    applicationId: json["application_id"] == null ? void 0 : json["application_id"],
     cancelAt: json["cancel_at"] == null ? void 0 : json["cancel_at"],
     cancelAtPeriodEnd: json["cancel_at_period_end"],
     companyId: json["company_id"] == null ? void 0 : json["company_id"],
@@ -8492,6 +8503,43 @@ function CompanyEventPeriodMetricsResponseDataFromJSONTyped(json, ignoreDiscrimi
   };
 }
 
+// src/api/checkoutexternal/models/PlanCreditGrantView.ts
+function PlanCreditGrantViewFromJSON(json) {
+  return PlanCreditGrantViewFromJSONTyped(json, false);
+}
+function PlanCreditGrantViewFromJSONTyped(json, ignoreDiscriminator) {
+  if (json == null) {
+    return json;
+  }
+  return {
+    billingCreditAutoTopupAmount: json["billing_credit_auto_topup_amount"] == null ? void 0 : json["billing_credit_auto_topup_amount"],
+    billingCreditAutoTopupAmountType: json["billing_credit_auto_topup_amount_type"] == null ? void 0 : json["billing_credit_auto_topup_amount_type"],
+    billingCreditAutoTopupEnabled: json["billing_credit_auto_topup_enabled"],
+    billingCreditAutoTopupExpiryType: json["billing_credit_auto_topup_expiry_type"] == null ? void 0 : json["billing_credit_auto_topup_expiry_type"],
+    billingCreditAutoTopupExpiryUnit: json["billing_credit_auto_topup_expiry_unit"] == null ? void 0 : json["billing_credit_auto_topup_expiry_unit"],
+    billingCreditAutoTopupExpiryUnitCount: json["billing_credit_auto_topup_expiry_unit_count"] == null ? void 0 : json["billing_credit_auto_topup_expiry_unit_count"],
+    billingCreditAutoTopupThresholdPercent: json["billing_credit_auto_topup_threshold_percent"] == null ? void 0 : json["billing_credit_auto_topup_threshold_percent"],
+    createdAt: new Date(json["created_at"]),
+    creditAmount: json["credit_amount"],
+    creditDescription: json["credit_description"],
+    creditIcon: json["credit_icon"] == null ? void 0 : json["credit_icon"],
+    creditId: json["credit_id"],
+    creditName: json["credit_name"],
+    expiryType: json["expiry_type"] == null ? void 0 : json["expiry_type"],
+    expiryUnit: json["expiry_unit"] == null ? void 0 : json["expiry_unit"],
+    expiryUnitCount: json["expiry_unit_count"] == null ? void 0 : json["expiry_unit_count"],
+    id: json["id"],
+    planId: json["plan_id"],
+    planName: json["plan_name"],
+    pluralName: json["plural_name"] == null ? void 0 : json["plural_name"],
+    resetCadence: json["reset_cadence"],
+    resetStart: json["reset_start"],
+    resetType: json["reset_type"],
+    singularName: json["singular_name"] == null ? void 0 : json["singular_name"],
+    updatedAt: new Date(json["updated_at"])
+  };
+}
+
 // src/api/checkoutexternal/models/CompanyPlanWithBillingSubView.ts
 function CompanyPlanWithBillingSubViewFromJSON(json) {
   return CompanyPlanWithBillingSubViewFromJSONTyped(json, false);
@@ -8507,6 +8555,9 @@ function CompanyPlanWithBillingSubViewFromJSONTyped(json, ignoreDiscriminator) {
     description: json["description"] == null ? void 0 : json["description"],
     id: json["id"],
     imageUrl: json["image_url"] == null ? void 0 : json["image_url"],
+    includedCreditGrants: json["included_credit_grants"].map(
+      PlanCreditGrantViewFromJSON
+    ),
     name: json["name"],
     planPeriod: json["plan_period"] == null ? void 0 : json["plan_period"],
     planPrice: json["plan_price"] == null ? void 0 : json["plan_price"]
@@ -8992,36 +9043,6 @@ function FeatureDetailResponseDataFromJSONTyped(json, ignoreDiscriminator) {
   };
 }
 
-// src/api/checkoutexternal/models/PlanCreditGrantView.ts
-function PlanCreditGrantViewFromJSON(json) {
-  return PlanCreditGrantViewFromJSONTyped(json, false);
-}
-function PlanCreditGrantViewFromJSONTyped(json, ignoreDiscriminator) {
-  if (json == null) {
-    return json;
-  }
-  return {
-    createdAt: new Date(json["created_at"]),
-    creditAmount: json["credit_amount"],
-    creditDescription: json["credit_description"],
-    creditIcon: json["credit_icon"] == null ? void 0 : json["credit_icon"],
-    creditId: json["credit_id"],
-    creditName: json["credit_name"],
-    expiryType: json["expiry_type"] == null ? void 0 : json["expiry_type"],
-    expiryUnit: json["expiry_unit"] == null ? void 0 : json["expiry_unit"],
-    expiryUnitCount: json["expiry_unit_count"] == null ? void 0 : json["expiry_unit_count"],
-    id: json["id"],
-    planId: json["plan_id"],
-    planName: json["plan_name"],
-    pluralName: json["plural_name"] == null ? void 0 : json["plural_name"],
-    resetCadence: json["reset_cadence"],
-    resetStart: json["reset_start"],
-    resetType: json["reset_type"],
-    singularName: json["singular_name"] == null ? void 0 : json["singular_name"],
-    updatedAt: new Date(json["updated_at"])
-  };
-}
-
 // src/api/checkoutexternal/models/PlanResponseData.ts
 function PlanResponseDataFromJSON(json) {
   return PlanResponseDataFromJSONTyped(json, false);
@@ -10876,13 +10897,20 @@ function FeatureDetailResponseDataFromJSONTyped6(json, ignoreDiscriminator) {
 
 // src/api/componentspublic/models/PlanCreditGrantView.ts
 function PlanCreditGrantViewFromJSON2(json) {
-  return PlanCreditGrantViewFromJSONTyped3(json, false);
+  return PlanCreditGrantViewFromJSONTyped4(json, false);
 }
-function PlanCreditGrantViewFromJSONTyped3(json, ignoreDiscriminator) {
+function PlanCreditGrantViewFromJSONTyped4(json, ignoreDiscriminator) {
   if (json == null) {
     return json;
   }
   return {
+    billingCreditAutoTopupAmount: json["billing_credit_auto_topup_amount"] == null ? void 0 : json["billing_credit_auto_topup_amount"],
+    billingCreditAutoTopupAmountType: json["billing_credit_auto_topup_amount_type"] == null ? void 0 : json["billing_credit_auto_topup_amount_type"],
+    billingCreditAutoTopupEnabled: json["billing_credit_auto_topup_enabled"],
+    billingCreditAutoTopupExpiryType: json["billing_credit_auto_topup_expiry_type"] == null ? void 0 : json["billing_credit_auto_topup_expiry_type"],
+    billingCreditAutoTopupExpiryUnit: json["billing_credit_auto_topup_expiry_unit"] == null ? void 0 : json["billing_credit_auto_topup_expiry_unit"],
+    billingCreditAutoTopupExpiryUnitCount: json["billing_credit_auto_topup_expiry_unit_count"] == null ? void 0 : json["billing_credit_auto_topup_expiry_unit_count"],
+    billingCreditAutoTopupThresholdPercent: json["billing_credit_auto_topup_threshold_percent"] == null ? void 0 : json["billing_credit_auto_topup_threshold_percent"],
     createdAt: new Date(json["created_at"]),
     creditAmount: json["credit_amount"],
     creditDescription: json["credit_description"],
@@ -11233,13 +11261,23 @@ var reducer = (state, action) => {
         checkoutState: { ...action.state }
       };
     }
+    case "SET_PLANID_BYPASS": {
+      return {
+        ...state,
+        layout: "checkout",
+        checkoutState: {
+          planId: action.planId,
+          bypassPlanSelection: true
+        }
+      };
+    }
   }
 };
 
 // src/context/EmbedProvider.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var getCustomHeaders = (sessionId) => ({
-  "X-Schematic-Components-Version": "2.1.0",
+  "X-Schematic-Components-Version": "2.1.2",
   "X-Schematic-Session-ID": sessionId
 });
 var EmbedProvider = ({
@@ -11531,6 +11569,9 @@ var EmbedProvider = ({
   const setCheckoutState = (0, import_react15.useCallback)((state2) => {
     dispatch({ type: "SET_CHECKOUT_STATE", state: state2 });
   }, []);
+  const initializeWithPlan = (0, import_react15.useCallback)((planId) => {
+    dispatch({ type: "SET_PLANID_BYPASS", planId });
+  }, []);
   (0, import_react15.useEffect)(() => {
     const element = document.getElementById(
       "schematic-fonts"
@@ -11653,6 +11694,7 @@ var EmbedProvider = ({
         setAccessToken,
         setLayout,
         setCheckoutState,
+        initializeWithPlan,
         setData,
         updateSettings,
         debug
@@ -12381,12 +12423,13 @@ var import_react22 = require("react");
 // src/components/ui/modal/styles.ts
 var Overlay = dt(Box)`
   position: absolute;
-  top: 50%;
-  left: 50%;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
   z-index: 999999;
-  transform: translate(-50%, -50%);
   width: 100%;
-  height: 100%;
+  height: 100dvh;
   overflow: hidden;
   scrollbar-width: thin;
   scrollbar-gutter: stable both-edges;
@@ -12403,7 +12446,7 @@ var Modal = dt.div.attrs({
   flex-direction: column;
   width: 100%;
   height: fit-content;
-  max-height: 100vh;
+  max-height: 100dvh;
   overflow: auto;
   background-color: ${({ theme }) => theme.card.background};
   box-shadow:
@@ -12485,7 +12528,7 @@ var ModalContent = (0, import_react23.forwardRef)(({ children }, ref) => {
         md: {
           $flexDirection: "row",
           $height: "calc(100% - 5rem + 3px)",
-          $maxHeight: "calc(100vh - 5rem + 3px)"
+          $maxHeight: "calc(100dvh - 5rem + 3px)"
         }
       },
       children
@@ -13036,7 +13079,7 @@ Root.displayName = "Root";
 // src/components/layout/viewport/Viewport.tsx
 var import_debounce3 = __toESM(require_debounce());
 var import_react42 = require("react");
-var import_react_dom2 = require("react-dom");
+var import_react_dom3 = require("react-dom");
 
 // src/components/shared/billing-threshold-tooltip/BillingThresholdTooltip.tsx
 var import_jsx_runtime12 = require("react/jsx-runtime");
@@ -13072,6 +13115,7 @@ var import_react34 = require("react");
 
 // src/components/shared/sidebar/Sidebar.tsx
 var import_react31 = require("react");
+var import_react_dom2 = require("react-dom");
 
 // src/components/shared/sidebar/EntitlementRow.tsx
 var import_jsx_runtime13 = require("react/jsx-runtime");
@@ -13194,6 +13238,7 @@ var import_jsx_runtime15 = require("react/jsx-runtime");
 var NoPaymentRequired = ({
   isDisabled,
   isLoading,
+  isSticky,
   onClick
 }) => {
   const { t: t2 } = useTranslation();
@@ -13204,6 +13249,7 @@ var NoPaymentRequired = ({
       disabled: isDisabled,
       onClick,
       $isLoading: isLoading,
+      $size: isSticky ? "sm" : "md",
       $fullWidth: true,
       children: t2("Subscribe and close")
     }
@@ -13220,6 +13266,7 @@ var StageButton = ({
   hasPlan,
   inEditMode,
   isLoading,
+  isSticky,
   isPaymentMethodRequired,
   isSelectedPlanTrialable,
   setCheckoutStage,
@@ -13267,7 +13314,8 @@ var StageButton = ({
         {
           isDisabled,
           isLoading,
-          onClick: checkout
+          onClick: checkout,
+          isSticky
         }
       );
     }
@@ -13283,6 +13331,7 @@ var StageButton = ({
         },
         $isLoading: isLoading,
         $fullWidth: true,
+        $size: isSticky ? "sm" : "md",
         children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Flex, { $gap: "0.5rem", $justifyContent: "center", $alignItems: "center", children: [
           t2("Next"),
           ":",
@@ -13302,7 +13351,8 @@ var StageButton = ({
         {
           isDisabled,
           isLoading,
-          onClick: checkout
+          onClick: checkout,
+          isSticky
         }
       );
     }
@@ -13318,6 +13368,7 @@ var StageButton = ({
         },
         $isLoading: isLoading,
         $fullWidth: true,
+        $size: isSticky ? "sm" : "md",
         children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
           Flex,
           {
@@ -13350,7 +13401,8 @@ var StageButton = ({
         {
           isDisabled,
           isLoading,
-          onClick: checkout
+          onClick: checkout,
+          isSticky
         }
       );
     }
@@ -13392,7 +13444,8 @@ var StageButton = ({
         {
           isDisabled,
           isLoading,
-          onClick: checkout
+          onClick: checkout,
+          isSticky
         }
       );
     }
@@ -13406,6 +13459,7 @@ var StageButton = ({
         },
         $isLoading: isLoading,
         $fullWidth: true,
+        $size: isSticky ? "sm" : "md",
         children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
           Flex,
           {
@@ -13431,7 +13485,8 @@ var StageButton = ({
         {
           isDisabled,
           isLoading,
-          onClick: checkout
+          onClick: checkout,
+          isSticky
         }
       );
     }
@@ -13470,7 +13525,8 @@ var StageButton = ({
         {
           isDisabled,
           isLoading,
-          onClick: checkout
+          onClick: checkout,
+          isSticky
         }
       );
     }
@@ -13842,6 +13898,42 @@ var Sidebar = (0, import_react31.forwardRef)(
       trialEndsOn.setDate(trialEndsOn.getDate() + selectedPlan.trialDays);
     }
     const { price: selectedPlanPrice, currency: selectedPlanCurrency } = selectedPlan ? getPlanPrice(selectedPlan, planPeriod) || {} : {};
+    const buttonRef = (0, import_react31.useRef)(null);
+    const [checkoutButtonInView, setCheckoutButtonInView] = (0, import_react31.useState)(false);
+    (0, import_react31.useEffect)(() => {
+      const observer = new IntersectionObserver(
+        ([entry]) => setCheckoutButtonInView(entry.isIntersecting),
+        { threshold: 0 }
+      );
+      if (buttonRef.current) {
+        observer.observe(buttonRef.current);
+      }
+      return () => observer.disconnect();
+    }, []);
+    const StageButtonComponent = () => {
+      return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        StageButton,
+        {
+          checkout: handleCheckout,
+          checkoutStage,
+          checkoutStages,
+          hasAddOns: addOns.length > 0,
+          hasPayInAdvanceEntitlements: payInAdvanceEntitlements.length > 0,
+          hasCreditBundles: creditBundles.length > 0,
+          hasPaymentMethod: typeof paymentMethod !== "undefined" || typeof paymentMethodId === "string",
+          hasPlan: typeof selectedPlan !== "undefined",
+          inEditMode: settings.mode === "edit",
+          isLoading,
+          isPaymentMethodRequired,
+          isSelectedPlanTrialable,
+          isSticky: !checkoutButtonInView,
+          setCheckoutStage,
+          trialPaymentMethodRequired,
+          shouldTrial,
+          willTrialWithoutPaymentMethod
+        }
+      );
+    };
     return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
       Flex,
       {
@@ -14327,27 +14419,42 @@ var Sidebar = (0, import_react31.forwardRef)(
                   ] }) }),
                   /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Text, { children: formatCurrency(Math.abs(dueNow), selectedPlanCurrency) }) })
                 ] }),
-                layout === "checkout" && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-                  StageButton,
-                  {
-                    checkout: handleCheckout,
-                    checkoutStage,
-                    checkoutStages,
-                    hasAddOns: addOns.length > 0,
-                    hasPayInAdvanceEntitlements: payInAdvanceEntitlements.length > 0,
-                    hasCreditBundles: creditBundles.length > 0,
-                    hasPaymentMethod: typeof paymentMethod !== "undefined" || typeof paymentMethodId === "string",
-                    hasPlan: typeof selectedPlan !== "undefined",
-                    inEditMode: settings.mode === "edit",
-                    isLoading,
-                    isPaymentMethodRequired,
-                    isSelectedPlanTrialable,
-                    setCheckoutStage,
-                    trialPaymentMethodRequired,
-                    shouldTrial,
-                    willTrialWithoutPaymentMethod
-                  }
-                ),
+                layout === "checkout" && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { ref: buttonRef, children: [
+                  checkoutButtonInView && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(StageButtonComponent, {}),
+                  !checkoutButtonInView && (0, import_react_dom2.createPortal)(
+                    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                      "div",
+                      {
+                        style: {
+                          position: "fixed",
+                          bottom: "-1px",
+                          left: "0px",
+                          zIndex: 9999999,
+                          width: "100%",
+                          overflow: "hidden",
+                          backgroundColor: settings.theme.card.background,
+                          borderTopWidth: "1px",
+                          borderTopStyle: "solid",
+                          borderTopColor: isLightBackground ? "hsla(0, 0%, 0%, 0.1)" : "hsla(0, 0%, 100%, 0.2)"
+                        },
+                        children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                          "div",
+                          {
+                            style: {
+                              display: "flex",
+                              justifyContent: "center",
+                              alignItems: "center",
+                              padding: "1rem 1.5rem",
+                              backgroundColor: settings.theme.card.background
+                            },
+                            children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(StageButtonComponent, {})
+                          }
+                        )
+                      }
+                    ),
+                    document.body
+                  )
+                ] }),
                 layout === "unsubscribe" && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                   Button,
                   {
@@ -15780,6 +15887,7 @@ var CheckoutDialog = ({ top = 0 }) => {
     creditBundles,
     isPaymentMethodRequired
   ]);
+  const [hasSkippedInitialPlan, setHasSkippedInitialPlan] = (0, import_react34.useState)(false);
   const [checkoutStage, setCheckoutStage] = (0, import_react34.useState)(() => {
     if (checkoutState?.addOnId) {
       return "addons";
@@ -15793,11 +15901,25 @@ var CheckoutDialog = ({ top = 0 }) => {
     if (checkoutState?.credits) {
       return "credits";
     }
-    if (typeof checkoutState?.planId !== "undefined" && checkoutState.planId !== currentPlanId) {
-      return checkoutStages.some((stage) => stage.id === "usage") ? "usage" : checkoutStages.some((stage) => stage.id === "addons") ? "addons" : checkoutStages.some((stage) => stage.id === "addonsUsage") ? "addonsUsage" : checkoutStages.some((stage) => stage.id === "credits") ? "credits" : "plan";
+    if (typeof checkoutState?.planId !== "undefined" && checkoutState.planId !== currentPlanId || checkoutState?.bypassPlanSelection) {
+      return checkoutStages.some((stage) => stage.id === "usage") ? "usage" : checkoutStages.some((stage) => stage.id === "addons") ? "addons" : checkoutStages.some((stage) => stage.id === "addonsUsage") ? "addonsUsage" : checkoutStages.some((stage) => stage.id === "credits") ? "credits" : checkoutStages.some((stage) => stage.id === "checkout") ? "checkout" : checkoutStages[0]?.id || "plan";
     }
     return "plan";
   });
+  (0, import_react34.useEffect)(() => {
+    if (checkoutState?.bypassPlanSelection && checkoutStage === "plan" && !hasSkippedInitialPlan) {
+      const nextStage = checkoutStages.find((stage) => stage.id !== "plan");
+      if (nextStage) {
+        setHasSkippedInitialPlan(true);
+        setCheckoutStage(nextStage.id);
+      }
+    }
+  }, [
+    checkoutStages,
+    checkoutState?.bypassPlanSelection,
+    checkoutStage,
+    hasSkippedInitialPlan
+  ]);
   const handlePreviewCheckout = (0, import_react34.useCallback)(
     async (updates) => {
       const period = updates.period || planPeriod;
@@ -15925,14 +16047,19 @@ var CheckoutDialog = ({ top = 0 }) => {
   const selectPlan = (0, import_react34.useCallback)(
     (updates) => {
       const plan = updates.plan;
-      const period = updates.period || planPeriod;
+      const period = showPeriodToggle ? updates.period || planPeriod : plan.yearlyPrice && !plan.monthlyPrice ? "year" /* Year */ : "month" /* Month */;
       const updatedUsageBasedEntitlements = plan.entitlements.reduce(
         createActiveUsageBasedEntitlementsReducer(currentEntitlements, period),
         []
       );
+      if (period !== planPeriod || plan.id !== selectedPlan?.id) {
+        setUsageBasedEntitlements(updatedUsageBasedEntitlements);
+      }
+      if (period !== planPeriod) {
+        setPlanPeriod(period);
+      }
       if (plan.id !== selectedPlan?.id) {
         setSelectedPlan(plan);
-        setUsageBasedEntitlements(updatedUsageBasedEntitlements);
       }
       const updatedShouldTrial = updates.shouldTrial ?? shouldTrial;
       setShouldTrial(updatedShouldTrial);
@@ -15961,6 +16088,7 @@ var CheckoutDialog = ({ top = 0 }) => {
     [
       selectedPlan?.id,
       planPeriod,
+      showPeriodToggle,
       currentEntitlements,
       shouldTrial,
       willTrialWithoutPaymentMethod,
@@ -16066,11 +16194,28 @@ var CheckoutDialog = ({ top = 0 }) => {
     }
   }, []);
   (0, import_react34.useEffect)(() => {
-    const plan = availablePlans.find(
-      (plan2) => checkoutState?.planId ? plan2.id === checkoutState.planId : plan2.current
-    );
-    setSelectedPlan(plan);
+    if (checkoutState?.planId) {
+      const plan = availablePlans.find(
+        (plan2) => plan2.id === checkoutState.planId
+      );
+      setSelectedPlan(plan);
+    }
   }, [availablePlans, checkoutState?.planId]);
+  (0, import_react34.useEffect)(() => {
+    if (checkoutState?.addOnId) {
+      const checkoutStateAddOn = availableAddOns.find(
+        (addOn) => addOn.id === checkoutState.addOnId
+      );
+      setAddOns(
+        (prev2) => prev2.map((addOn) => ({
+          ...addOn,
+          ...addOn.id === checkoutStateAddOn?.id && {
+            isSelected: true
+          }
+        }))
+      );
+    }
+  }, [availableAddOns, checkoutState?.addOnId]);
   (0, import_react34.useEffect)(() => {
     setAddOns((prevAddOns) => {
       return availableAddOns.filter((availAddOn) => {
@@ -16112,7 +16257,30 @@ var CheckoutDialog = ({ top = 0 }) => {
   const activeCheckoutStage = checkoutStages.find(
     (stage) => stage.id === checkoutStage
   );
+  const shouldShowBypassOverlay = checkoutState?.bypassPlanSelection && checkoutStage === "plan" && !hasSkippedInitialPlan;
   return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(Modal2, { ref: modalRef, size: "lg", top, children: [
+    shouldShowBypassOverlay && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      Flex,
+      {
+        $position: "absolute",
+        $top: 0,
+        $left: 0,
+        $zIndex: 3,
+        $width: "100%",
+        $height: "100dvh",
+        $justifyContent: "center",
+        $alignItems: "center",
+        $backgroundColor: isLightBackground ? "hsla(0, 0%, 100%, 0.9)" : "hsla(0, 0%, 0%, 0.9)",
+        $backdropFilter: "blur(8px)",
+        $padding: "1rem",
+        $viewport: {
+          md: {
+            $padding: "1.5rem"
+          }
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Loader, { $color: settings.theme.primary, $size: "2xl" })
+      }
+    ),
     /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ModalHeader, { bordered: true, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
       Flex,
       {
@@ -16502,7 +16670,6 @@ var PeriodToggle = ({
       const yearly = yearlyBillingPrice?.price ?? 0;
       return Math.round((monthly - yearly) / monthly * 1e4) / 100;
     }
-    return 0;
   }, [selectedPlan]);
   return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     Flex,
@@ -16557,7 +16724,7 @@ var PeriodToggle = ({
           },
           option
         );
-        if (option === "year") {
+        if (option === "year" && typeof savingsPercentage === "number") {
           return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
             Tooltip,
             {
@@ -17106,12 +17273,12 @@ var Viewport = (0, import_react42.forwardRef)(
         /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(RenderLayout, { children }),
         isBadgeVisible && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Badge, {})
       ] }),
-      canCheckout && layout === "checkout" && (0, import_react_dom2.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime33.jsx)(CheckoutDialog, { top }), portal || document.body),
-      layout === "unsubscribe" && (0, import_react_dom2.createPortal)(
+      canCheckout && layout === "checkout" && (0, import_react_dom3.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime33.jsx)(CheckoutDialog, { top }), portal || document.body),
+      layout === "unsubscribe" && (0, import_react_dom3.createPortal)(
         /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(UnsubscribeDialog, { top }),
         portal || document.body
       ),
-      layout === "payment" && (0, import_react_dom2.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime33.jsx)(PaymentDialog, { top }), portal || document.body)
+      layout === "payment" && (0, import_react_dom3.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime33.jsx)(PaymentDialog, { top }), portal || document.body)
     ] });
   }
 );
@@ -18506,7 +18673,7 @@ var registerWrapper = function registerWrapper2(stripe, startTime) {
   }
   stripe._registerWrapper({
     name: "stripe-js",
-    version: "8.2.0",
+    version: "8.3.0",
     startTime
   });
 };
@@ -18581,7 +18748,7 @@ var initStripe = function initStripe2(maybeStripe, args, startTime) {
   var version = runtimeVersionToUrlVersion(maybeStripe.version);
   var expectedVersion = RELEASE_TRAIN;
   if (isTestKey && version !== expectedVersion) {
-    console.warn("Stripe.js@".concat(version, " was loaded on the page, but @stripe/stripe-js@").concat("8.2.0", " expected Stripe.js@").concat(expectedVersion, ". This may result in unexpected behavior. For more information, see https://docs.stripe.com/sdks/stripejs-versioning"));
+    console.warn("Stripe.js@".concat(version, " was loaded on the page, but @stripe/stripe-js@").concat("8.3.0", " expected Stripe.js@").concat(expectedVersion, ". This may result in unexpected behavior. For more information, see https://docs.stripe.com/sdks/stripejs-versioning"));
   }
   var stripe = maybeStripe.apply(void 0, args);
   registerWrapper(stripe, startTime);
@@ -19112,7 +19279,7 @@ var resolveDesignProps7 = (props) => {
 var PlanManager = (0, import_react52.forwardRef)(({ children, className, portal, ...rest }, ref) => {
   const props = resolveDesignProps7(rest);
   const { t: t2 } = useTranslation();
-  const { data, settings, setCheckoutState } = useEmbed();
+  const { data, settings, setLayout } = useEmbed();
   const isLightBackground = useIsLightBackground();
   const trialEnd = useTrialEnd();
   const {
@@ -19473,11 +19640,7 @@ var PlanManager = (0, import_react52.forwardRef)(({ children, className, portal,
             {
               type: "button",
               onClick: () => {
-                setCheckoutState({
-                  planId: currentPlan?.id,
-                  addOnId: void 0,
-                  usage: false
-                });
+                setLayout("checkout");
               },
               $size: props.callToAction.buttonSize,
               $color: props.callToAction.buttonStyle,
@@ -20310,25 +20473,9 @@ var PricingTable = (0, import_react55.forwardRef)(({ className, ...rest }, ref)
     },
     []
   );
-  const { currentPeriod, isStandalone } = (0, import_react55.useMemo)(() => {
-    const isStandalone2 = typeof data?.component === "undefined";
-    return {
-      currentPeriod: data?.company?.plan?.planPeriod || "month",
-      currentAddOns: data?.company?.addOns || [],
-      canCheckout: isStandalone2 ?? data?.capabilities?.checkout ?? true,
-      isTrialSubscription: data?.company?.billingSubscription?.status === "trialing",
-      willSubscriptionCancel: data?.company?.billingSubscription?.cancelAt,
-      isStandalone: isStandalone2
-    };
-  }, [
-    data?.capabilities?.checkout,
-    data?.company?.addOns,
-    data?.company?.billingSubscription?.cancelAt,
-    data?.company?.billingSubscription?.status,
-    data?.company?.plan?.planPeriod,
-    data?.component
-  ]);
-  const [selectedPeriod, setSelectedPeriod] = (0, import_react55.useState)(currentPeriod);
+  const [selectedPeriod, setSelectedPeriod] = (0, import_react55.useState)(
+    () => data?.company?.plan?.planPeriod || "month"
+  );
   const showPeriodToggle = rest.showPeriodToggle ?? data?.showPeriodToggle ?? true;
   const { plans, addOns, periods } = useAvailablePlans(selectedPeriod, {
     useSelectedPeriod: showPeriodToggle
@@ -20352,10 +20499,10 @@ var PricingTable = (0, import_react55.forwardRef)(({ className, ...rest }, ref)
     });
   };
   (0, import_react55.useEffect)(() => {
-    if (isStandalone) {
+    if (typeof data?.component === "undefined") {
       hydratePublic();
     }
-  }, [isStandalone, hydratePublic]);
+  }, [data?.component, hydratePublic]);
   (0, import_react55.useEffect)(() => {
     setEntitlementCounts(plans.reduce(entitlementCountsReducer, {}));
   }, [plans]);
@@ -20372,12 +20519,13 @@ var PricingTable = (0, import_react55.forwardRef)(({ className, ...rest }, ref)
       }
     );
   }
+  const currentPlan = plans.find((plan) => plan.id === data?.company?.plan?.id);
   const showCallToAction = typeof data?.component !== "undefined" || typeof rest.callToActionUrl === "string" || typeof rest.onCallToAction === "function";
   const callToActionTarget = getCallToActionTarget(
     rest.callToActionUrl,
     rest.callToActionTarget
   );
-  const Wrapper = isStandalone ? Container : import_react55.Fragment;
+  const Wrapper = typeof data?.component === "undefined" ? Container : import_react55.Fragment;
   return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Wrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
     FussyChild,
     {
@@ -20410,6 +20558,7 @@ var PricingTable = (0, import_react55.forwardRef)(({ className, ...rest }, ref)
                   {
                     options: periods,
                     selectedOption: selectedPeriod,
+                    selectedPlan: currentPlan,
                     onSelect: (period) => {
                       if (period !== selectedPeriod) {
                         setSelectedPeriod(period);