@schematichq/schematic-components 2.1.0 → 2.1.2

package/dist/schematic-components.esm.js

@@ -4254,6 +4254,7 @@ var initialContext = {
   setAccessToken: stub,
   setLayout: stub,
   setCheckoutState: stub,
+  initializeWithPlan: stub,
   setData: stub,
   updateSettings: stub,
   debug: stub,
@@ -6376,7 +6377,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;
@@ -6440,7 +6443,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;
@@ -7997,6 +7999,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"],
@@ -8223,6 +8232,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"],
@@ -8318,6 +8328,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"],
@@ -8432,6 +8443,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);
@@ -8447,6 +8495,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"]
@@ -8932,36 +8983,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);
@@ -10816,13 +10837,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"],
@@ -11173,13 +11201,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
 import { jsx, jsxs } from "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 = ({
@@ -11471,6 +11509,9 @@ var EmbedProvider = ({
   const setCheckoutState = useCallback3((state2) => {
     dispatch({ type: "SET_CHECKOUT_STATE", state: state2 });
   }, []);
+  const initializeWithPlan = useCallback3((planId) => {
+    dispatch({ type: "SET_PLANID_BYPASS", planId });
+  }, []);
   useEffect2(() => {
     const element = document.getElementById(
       "schematic-fonts"
@@ -11593,6 +11634,7 @@ var EmbedProvider = ({
         setAccessToken,
         setLayout,
         setCheckoutState,
+        initializeWithPlan,
         setData,
         updateSettings,
         debug
@@ -12327,12 +12369,13 @@ import {
 // 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;
@@ -12349,7 +12392,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:
@@ -12431,7 +12474,7 @@ var ModalContent = forwardRef2(({ children }, ref) => {
         md: {
           $flexDirection: "row",
           $height: "calc(100% - 5rem + 3px)",
-          $maxHeight: "calc(100vh - 5rem + 3px)"
+          $maxHeight: "calc(100dvh - 5rem + 3px)"
         }
       },
       children
@@ -12981,8 +13024,8 @@ Root.displayName = "Root";
 
 // src/components/layout/viewport/Viewport.tsx
 var import_debounce3 = __toESM(require_debounce());
-import { forwardRef as forwardRef8, useLayoutEffect as useLayoutEffect5, useMemo as useMemo15, useRef as useRef9, useState as useState13 } from "react";
-import { createPortal as createPortal2 } from "react-dom";
+import { forwardRef as forwardRef8, useLayoutEffect as useLayoutEffect5, useMemo as useMemo15, useRef as useRef10, useState as useState14 } from "react";
+import { createPortal as createPortal3 } from "react-dom";
 
 // src/components/shared/billing-threshold-tooltip/BillingThresholdTooltip.tsx
 import { jsx as jsx11 } from "react/jsx-runtime";
@@ -13016,19 +13059,23 @@ var BillingThresholdTooltip = ({
 // src/components/shared/checkout-dialog/CheckoutDialog.tsx
 import {
   useCallback as useCallback10,
-  useEffect as useEffect5,
+  useEffect as useEffect6,
   useLayoutEffect as useLayoutEffect4,
   useMemo as useMemo9,
-  useRef as useRef6,
-  useState as useState10
+  useRef as useRef7,
+  useState as useState11
 } from "react";
 
 // src/components/shared/sidebar/Sidebar.tsx
 import {
   forwardRef as forwardRef7,
   useCallback as useCallback9,
-  useMemo as useMemo7
+  useEffect as useEffect4,
+  useMemo as useMemo7,
+  useRef as useRef6,
+  useState as useState8
 } from "react";
+import { createPortal as createPortal2 } from "react-dom";
 
 // src/components/shared/sidebar/EntitlementRow.tsx
 import { Fragment as Fragment3, jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
@@ -13151,6 +13198,7 @@ import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
 var NoPaymentRequired = ({
   isDisabled,
   isLoading,
+  isSticky,
   onClick
 }) => {
   const { t: t2 } = useTranslation();
@@ -13161,6 +13209,7 @@ var NoPaymentRequired = ({
       disabled: isDisabled,
       onClick,
       $isLoading: isLoading,
+      $size: isSticky ? "sm" : "md",
       $fullWidth: true,
       children: t2("Subscribe and close")
     }
@@ -13177,6 +13226,7 @@ var StageButton = ({
   hasPlan,
   inEditMode,
   isLoading,
+  isSticky,
   isPaymentMethodRequired,
   isSelectedPlanTrialable,
   setCheckoutStage,
@@ -13224,7 +13274,8 @@ var StageButton = ({
         {
           isDisabled,
           isLoading,
-          onClick: checkout
+          onClick: checkout,
+          isSticky
         }
       );
     }
@@ -13240,6 +13291,7 @@ var StageButton = ({
         },
         $isLoading: isLoading,
         $fullWidth: true,
+        $size: isSticky ? "sm" : "md",
         children: /* @__PURE__ */ jsxs8(Flex, { $gap: "0.5rem", $justifyContent: "center", $alignItems: "center", children: [
           t2("Next"),
           ":",
@@ -13259,7 +13311,8 @@ var StageButton = ({
         {
           isDisabled,
           isLoading,
-          onClick: checkout
+          onClick: checkout,
+          isSticky
         }
       );
     }
@@ -13275,6 +13328,7 @@ var StageButton = ({
         },
         $isLoading: isLoading,
         $fullWidth: true,
+        $size: isSticky ? "sm" : "md",
         children: /* @__PURE__ */ jsxs8(
           Flex,
           {
@@ -13307,7 +13361,8 @@ var StageButton = ({
         {
           isDisabled,
           isLoading,
-          onClick: checkout
+          onClick: checkout,
+          isSticky
         }
       );
     }
@@ -13349,7 +13404,8 @@ var StageButton = ({
         {
           isDisabled,
           isLoading,
-          onClick: checkout
+          onClick: checkout,
+          isSticky
         }
       );
     }
@@ -13363,6 +13419,7 @@ var StageButton = ({
         },
         $isLoading: isLoading,
         $fullWidth: true,
+        $size: isSticky ? "sm" : "md",
         children: /* @__PURE__ */ jsxs8(
           Flex,
           {
@@ -13388,7 +13445,8 @@ var StageButton = ({
         {
           isDisabled,
           isLoading,
-          onClick: checkout
+          onClick: checkout,
+          isSticky
         }
       );
     }
@@ -13427,7 +13485,8 @@ var StageButton = ({
         {
           isDisabled,
           isLoading,
-          onClick: checkout
+          onClick: checkout,
+          isSticky
         }
       );
     }
@@ -13799,6 +13858,42 @@ var Sidebar = forwardRef7(
       trialEndsOn.setDate(trialEndsOn.getDate() + selectedPlan.trialDays);
     }
     const { price: selectedPlanPrice, currency: selectedPlanCurrency } = selectedPlan ? getPlanPrice(selectedPlan, planPeriod) || {} : {};
+    const buttonRef = useRef6(null);
+    const [checkoutButtonInView, setCheckoutButtonInView] = useState8(false);
+    useEffect4(() => {
+      const observer = new IntersectionObserver(
+        ([entry]) => setCheckoutButtonInView(entry.isIntersecting),
+        { threshold: 0 }
+      );
+      if (buttonRef.current) {
+        observer.observe(buttonRef.current);
+      }
+      return () => observer.disconnect();
+    }, []);
+    const StageButtonComponent = () => {
+      return /* @__PURE__ */ jsx15(
+        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__ */ jsxs9(
       Flex,
       {
@@ -14284,27 +14379,42 @@ var Sidebar = forwardRef7(
                   ] }) }),
                   /* @__PURE__ */ jsx15(Box, { children: /* @__PURE__ */ jsx15(Text, { children: formatCurrency(Math.abs(dueNow), selectedPlanCurrency) }) })
                 ] }),
-                layout === "checkout" && /* @__PURE__ */ jsx15(
-                  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__ */ jsxs9("div", { ref: buttonRef, children: [
+                  checkoutButtonInView && /* @__PURE__ */ jsx15(StageButtonComponent, {}),
+                  !checkoutButtonInView && createPortal2(
+                    /* @__PURE__ */ jsx15(
+                      "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__ */ jsx15(
+                          "div",
+                          {
+                            style: {
+                              display: "flex",
+                              justifyContent: "center",
+                              alignItems: "center",
+                              padding: "1rem 1.5rem",
+                              backgroundColor: settings.theme.card.background
+                            },
+                            children: /* @__PURE__ */ jsx15(StageButtonComponent, {})
+                          }
+                        )
+                      }
+                    ),
+                    document.body
+                  )
+                ] }),
                 layout === "unsubscribe" && /* @__PURE__ */ jsx15(
                   Button,
                   {
@@ -14615,7 +14725,7 @@ var AddOns = ({ addOns, toggle, isLoading, period }) => {
 };
 
 // src/components/shared/checkout-dialog/Checkout.tsx
-import { useState as useState8 } from "react";
+import { useState as useState9 } from "react";
 import { jsx as jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
 var Checkout = ({
   isPaymentMethodRequired,
@@ -14627,7 +14737,7 @@ var Checkout = ({
 }) => {
   const { t: t2 } = useTranslation();
   const isLightBackground = useIsLightBackground();
-  const [discount, setDiscount] = useState8("");
+  const [discount, setDiscount] = useState9("");
   if (!isPaymentMethodRequired) {
     return null;
   }
@@ -14841,7 +14951,7 @@ var Navigation = ({
 };
 
 // src/components/shared/checkout-dialog/Plan.tsx
-import { Fragment as Fragment7, useEffect as useEffect4, useMemo as useMemo8, useState as useState9 } from "react";
+import { Fragment as Fragment7, useEffect as useEffect5, useMemo as useMemo8, useState as useState10 } from "react";
 
 // src/components/shared/checkout-dialog/styles.ts
 var FlexWithAlignEnd = dt(Flex)`
@@ -14985,7 +15095,7 @@ var Plan = ({
   const { t: t2 } = useTranslation();
   const { data, settings } = useEmbed();
   const isLightBackground = useIsLightBackground();
-  const [entitlementCounts, setEntitlementCounts] = useState9(
+  const [entitlementCounts, setEntitlementCounts] = useState10(
     () => plans.reduce(entitlementCountsReducer, {})
   );
   const { isTrialing, showCredits, showPeriodToggle, showZeroPriceAsFree } = useMemo8(() => {
@@ -15016,7 +15126,7 @@ var Plan = ({
       return prev2;
     });
   };
-  useEffect4(() => {
+  useEffect5(() => {
     setEntitlementCounts(plans.reduce(entitlementCountsReducer, {}));
   }, [plans]);
   const cardPadding = settings.theme.card.padding / TEXT_BASE_SIZE;
@@ -15562,19 +15672,19 @@ var CheckoutDialog = ({ top = 0 }) => {
   const { t: t2 } = useTranslation();
   const { data, settings, isPending, checkoutState, previewCheckout } = useEmbed();
   const isLightBackground = useIsLightBackground();
-  const modalRef = useRef6(null);
-  const contentRef = useRef6(null);
-  const stageRef = useRef6(null);
-  const sidebarRef = useRef6(null);
-  const [confirmPaymentIntentProps, setConfirmPaymentIntentProps] = useState10(void 0);
-  const [charges, setCharges] = useState10();
-  const [paymentMethodId, setPaymentMethodId] = useState10(
+  const modalRef = useRef7(null);
+  const contentRef = useRef7(null);
+  const stageRef = useRef7(null);
+  const sidebarRef = useRef7(null);
+  const [confirmPaymentIntentProps, setConfirmPaymentIntentProps] = useState11(void 0);
+  const [charges, setCharges] = useState11();
+  const [paymentMethodId, setPaymentMethodId] = useState11(
     () => {
       return data?.subscription?.paymentMethod?.externalId || data?.company?.defaultPaymentMethod?.externalId;
     }
   );
-  const [isLoading, setIsLoading] = useState10(false);
-  const [error, setError] = useState10();
+  const [isLoading, setIsLoading] = useState11(false);
+  const [error, setError] = useState11();
   const {
     currentPlanId,
     currentEntitlements,
@@ -15597,7 +15707,7 @@ var CheckoutDialog = ({ top = 0 }) => {
     () => checkoutState?.period || data?.company?.plan?.planPeriod || "month",
     [data?.company?.plan?.planPeriod, checkoutState?.period]
   );
-  const [planPeriod, setPlanPeriod] = useState10(currentPeriod);
+  const [planPeriod, setPlanPeriod] = useState11(currentPeriod);
   const {
     plans: availablePlans,
     addOns: availableAddOns,
@@ -15605,15 +15715,15 @@ var CheckoutDialog = ({ top = 0 }) => {
   } = useAvailablePlans(planPeriod, {
     useSelectedPeriod: showPeriodToggle
   });
-  const [selectedPlan, setSelectedPlan] = useState10(
+  const [selectedPlan, setSelectedPlan] = useState11(
     () => {
       return availablePlans.find(
         (plan) => checkoutState?.planId ? plan.id === checkoutState.planId : plan.current
       );
     }
   );
-  const [shouldTrial, setShouldTrial] = useState10(false);
-  const [addOns, setAddOns] = useState10(() => {
+  const [shouldTrial, setShouldTrial] = useState11(false);
+  const [addOns, setAddOns] = useState11(() => {
     return availableAddOns.map((addOn) => ({
       ...addOn,
       isSelected: typeof checkoutState?.addOnId !== "undefined" ? addOn.id === checkoutState.addOnId : (data?.company?.addOns || []).some(
@@ -15621,13 +15731,13 @@ var CheckoutDialog = ({ top = 0 }) => {
       )
     }));
   });
-  const [creditBundles, setCreditBundles] = useState10(() => {
+  const [creditBundles, setCreditBundles] = useState11(() => {
     return (data?.creditBundles || []).map((bundle) => ({
       ...bundle,
       count: 0
     }));
   });
-  const [usageBasedEntitlements, setUsageBasedEntitlements] = useState10(
+  const [usageBasedEntitlements, setUsageBasedEntitlements] = useState11(
     () => (selectedPlan?.entitlements || []).reduce(
       createActiveUsageBasedEntitlementsReducer(
         currentEntitlements,
@@ -15636,7 +15746,7 @@ var CheckoutDialog = ({ top = 0 }) => {
       []
     )
   );
-  const [addOnUsageBasedEntitlements, setAddOnUsageBasedEntitlements] = useState10(() => {
+  const [addOnUsageBasedEntitlements, setAddOnUsageBasedEntitlements] = useState11(() => {
     return (data?.company?.addOns || []).flatMap((currentAddOn) => {
       const availableAddOn = availableAddOns.find(
         (available) => available.id === currentAddOn.id
@@ -15663,8 +15773,8 @@ var CheckoutDialog = ({ top = 0 }) => {
     ),
     [addOnUsageBasedEntitlements]
   );
-  const [promoCode, setPromoCode] = useState10(null);
-  const [isPaymentMethodRequired, setIsPaymentMethodRequired] = useState10(false);
+  const [promoCode, setPromoCode] = useState11(null);
+  const [isPaymentMethodRequired, setIsPaymentMethodRequired] = useState11(false);
   const willTrialWithoutPaymentMethod = useMemo9(
     () => shouldTrial && !trialPaymentMethodRequired,
     [shouldTrial, trialPaymentMethodRequired]
@@ -15737,7 +15847,8 @@ var CheckoutDialog = ({ top = 0 }) => {
     creditBundles,
     isPaymentMethodRequired
   ]);
-  const [checkoutStage, setCheckoutStage] = useState10(() => {
+  const [hasSkippedInitialPlan, setHasSkippedInitialPlan] = useState11(false);
+  const [checkoutStage, setCheckoutStage] = useState11(() => {
     if (checkoutState?.addOnId) {
       return "addons";
     }
@@ -15750,11 +15861,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";
   });
+  useEffect6(() => {
+    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 = useCallback10(
     async (updates) => {
       const period = updates.period || planPeriod;
@@ -15882,14 +16007,19 @@ var CheckoutDialog = ({ top = 0 }) => {
   const selectPlan = useCallback10(
     (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);
@@ -15918,6 +16048,7 @@ var CheckoutDialog = ({ top = 0 }) => {
     [
       selectedPlan?.id,
       planPeriod,
+      showPeriodToggle,
       currentEntitlements,
       shouldTrial,
       willTrialWithoutPaymentMethod,
@@ -16017,18 +16148,35 @@ var CheckoutDialog = ({ top = 0 }) => {
     },
     [handlePreviewCheckout]
   );
-  useEffect5(() => {
+  useEffect6(() => {
     if (selectedPlan) {
       selectPlan({ plan: selectedPlan, period: currentPeriod });
     }
   }, []);
-  useEffect5(() => {
-    const plan = availablePlans.find(
-      (plan2) => checkoutState?.planId ? plan2.id === checkoutState.planId : plan2.current
-    );
-    setSelectedPlan(plan);
+  useEffect6(() => {
+    if (checkoutState?.planId) {
+      const plan = availablePlans.find(
+        (plan2) => plan2.id === checkoutState.planId
+      );
+      setSelectedPlan(plan);
+    }
   }, [availablePlans, checkoutState?.planId]);
-  useEffect5(() => {
+  useEffect6(() => {
+    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]);
+  useEffect6(() => {
     setAddOns((prevAddOns) => {
       return availableAddOns.filter((availAddOn) => {
         if (!selectedPlan) {
@@ -16050,7 +16198,7 @@ var CheckoutDialog = ({ top = 0 }) => {
       });
     });
   }, [data?.addOnCompatibilities, availableAddOns, selectedPlan]);
-  useEffect5(() => {
+  useEffect6(() => {
     if (charges) {
       sidebarRef.current?.scrollTo({
         top: 0,
@@ -16069,7 +16217,30 @@ var CheckoutDialog = ({ top = 0 }) => {
   const activeCheckoutStage = checkoutStages.find(
     (stage) => stage.id === checkoutStage
   );
+  const shouldShowBypassOverlay = checkoutState?.bypassPlanSelection && checkoutStage === "plan" && !hasSkippedInitialPlan;
   return /* @__PURE__ */ jsxs16(Modal2, { ref: modalRef, size: "lg", top, children: [
+    shouldShowBypassOverlay && /* @__PURE__ */ jsx22(
+      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__ */ jsx22(Loader, { $color: settings.theme.primary, $size: "2xl" })
+      }
+    ),
     /* @__PURE__ */ jsx22(ModalHeader, { bordered: true, children: /* @__PURE__ */ jsx22(
       Flex,
       {
@@ -16250,11 +16421,11 @@ var CheckoutDialog = ({ top = 0 }) => {
 };
 
 // src/components/shared/payment-dialog/PaymentDialog.tsx
-import { useRef as useRef7 } from "react";
+import { useRef as useRef8 } from "react";
 import { jsx as jsx23, jsxs as jsxs17 } from "react/jsx-runtime";
 var PaymentDialog = ({ top = 0 }) => {
   const { t: t2 } = useTranslation();
-  const modalRef = useRef7(null);
+  const modalRef = useRef8(null);
   return /* @__PURE__ */ jsxs17(Modal2, { ref: modalRef, size: "md", top, children: [
     /* @__PURE__ */ jsx23(ModalHeader, { bordered: true, children: /* @__PURE__ */ jsx23(Text, { $size: 18, children: t2("Edit payment method") }) }),
     /* @__PURE__ */ jsx23(ModalContent, { children: /* @__PURE__ */ jsx23(Flex, { $position: "relative", $flexGrow: 1, $overflow: "auto", children: /* @__PURE__ */ jsx23(PaymentMethodDetails, {}) }) })
@@ -16268,7 +16439,7 @@ import {
   useElements,
   useStripe
 } from "@stripe/react-stripe-js";
-import { useState as useState11 } from "react";
+import { useState as useState12 } from "react";
 
 // src/components/shared/payment-form/styles.ts
 var Label = dt.label`
@@ -16330,12 +16501,12 @@ var PaymentForm = ({ onConfirm, financeData }) => {
   const stripe = useStripe();
   const elements = useElements();
   const { data } = useEmbed();
-  const [email, setEmail] = useState11("");
-  const [message, setMessage] = useState11();
-  const [isLoading, setIsLoading] = useState11(false);
-  const [isConfirmed, setIsConfirmed] = useState11(false);
-  const [isPaymentComplete, setIsPaymentComplete] = useState11(false);
-  const [isAddressComplete, setIsAddressComplete] = useState11(() => {
+  const [email, setEmail] = useState12("");
+  const [message, setMessage] = useState12();
+  const [isLoading, setIsLoading] = useState12(false);
+  const [isConfirmed, setIsConfirmed] = useState12(false);
+  const [isPaymentComplete, setIsPaymentComplete] = useState12(false);
+  const [isAddressComplete, setIsAddressComplete] = useState12(() => {
     const shouldCollectAddress = shouldCollectBillingAddress(
       data?.checkoutSettings.collectAddress ?? false,
       financeData
@@ -16464,7 +16635,6 @@ var PeriodToggle = ({
       const yearly = yearlyBillingPrice?.price ?? 0;
       return Math.round((monthly - yearly) / monthly * 1e4) / 100;
     }
-    return 0;
   }, [selectedPlan]);
   return /* @__PURE__ */ jsx25(
     Flex,
@@ -16519,7 +16689,7 @@ var PeriodToggle = ({
           },
           option
         );
-        if (option === "year") {
+        if (option === "year" && typeof savingsPercentage === "number") {
           return /* @__PURE__ */ jsx25(
             Tooltip,
             {
@@ -16748,14 +16918,14 @@ var TieredPricingDetails = ({
 };
 
 // src/components/shared/unsubscribe-dialog/UnsubscribeDialog.tsx
-import { useMemo as useMemo14, useRef as useRef8, useState as useState12 } from "react";
+import { useMemo as useMemo14, useRef as useRef9, useState as useState13 } from "react";
 import { jsx as jsx28, jsxs as jsxs21 } from "react/jsx-runtime";
 var UnsubscribeDialog = ({ top = 0 }) => {
   const { t: t2 } = useTranslation();
   const { data, setCheckoutState } = useEmbed();
-  const modalRef = useRef8(null);
-  const [error, setError] = useState12();
-  const [isLoading, setIsLoading] = useState12(false);
+  const modalRef = useRef9(null);
+  const [error, setError] = useState13();
+  const [isLoading, setIsLoading] = useState13(false);
   const { planPeriod, currentPlan, currentAddOns, featureUsage, cancelDate } = useMemo14(() => {
     const cancelDate2 = data?.subscription?.cancelAt || data?.upcomingInvoice?.dueDate;
     return {
@@ -17035,9 +17205,9 @@ var StyledViewport = dt.div.withConfig({
 import { Fragment as Fragment12, jsx as jsx32, jsxs as jsxs24 } from "react/jsx-runtime";
 var Viewport = forwardRef8(
   ({ children, portal, ...props }, ref) => {
-    const portalRef = useRef9(portal || document.body);
+    const portalRef = useRef10(portal || document.body);
     const { data, layout, settings } = useEmbed();
-    const [top, setTop] = useState13(0);
+    const [top, setTop] = useState14(0);
     const { canCheckout, isBadgeVisible } = useMemo15(() => {
       return {
         canCheckout: data?.capabilities?.checkout ?? true,
@@ -17068,12 +17238,12 @@ var Viewport = forwardRef8(
         /* @__PURE__ */ jsx32(RenderLayout, { children }),
         isBadgeVisible && /* @__PURE__ */ jsx32(Badge, {})
       ] }),
-      canCheckout && layout === "checkout" && createPortal2(/* @__PURE__ */ jsx32(CheckoutDialog, { top }), portal || document.body),
-      layout === "unsubscribe" && createPortal2(
+      canCheckout && layout === "checkout" && createPortal3(/* @__PURE__ */ jsx32(CheckoutDialog, { top }), portal || document.body),
+      layout === "unsubscribe" && createPortal3(
         /* @__PURE__ */ jsx32(UnsubscribeDialog, { top }),
         portal || document.body
       ),
-      layout === "payment" && createPortal2(/* @__PURE__ */ jsx32(PaymentDialog, { top }), portal || document.body)
+      layout === "payment" && createPortal3(/* @__PURE__ */ jsx32(PaymentDialog, { top }), portal || document.body)
     ] });
   }
 );
@@ -17140,7 +17310,7 @@ var ButtonElement = forwardRef9(({ children, className, ...rest }, ref) => {
 ButtonElement.displayName = "Button";
 
 // src/components/elements/included-features/IncludedFeatures.tsx
-import { forwardRef as forwardRef10, useMemo as useMemo17, useRef as useRef10, useState as useState14 } from "react";
+import { forwardRef as forwardRef10, useMemo as useMemo17, useRef as useRef11, useState as useState15 } from "react";
 
 // src/components/elements/included-features/UsageDetails.tsx
 import { Fragment as Fragment13, useMemo as useMemo16 } from "react";
@@ -17397,10 +17567,10 @@ var IncludedFeatures = forwardRef10(({ className, ...rest }, ref) => {
   const props = resolveDesignProps2(rest);
   const { t: t2 } = useTranslation();
   const { data, settings } = useEmbed();
-  const elementsRef = useRef10([]);
+  const elementsRef = useRef11([]);
   const shouldWrapChildren = useWrapChildren(elementsRef);
   const isLightBackground = useIsLightBackground();
-  const [showCount, setShowCount] = useState14(VISIBLE_ENTITLEMENT_COUNT);
+  const [showCount, setShowCount] = useState15(VISIBLE_ENTITLEMENT_COUNT);
   const { plan, addOns, featureUsage } = useMemo17(() => {
     const orderedFeatureUsage = props.visibleFeatures?.reduce(
       (acc, id) => {
@@ -17535,7 +17705,7 @@ var IncludedFeatures = forwardRef10(({ className, ...rest }, ref) => {
 IncludedFeatures.displayName = "IncludedFeatures";
 
 // src/components/elements/invoices/Invoices.tsx
-import { forwardRef as forwardRef11, useCallback as useCallback11, useEffect as useEffect6, useState as useState15 } from "react";
+import { forwardRef as forwardRef11, useCallback as useCallback11, useEffect as useEffect7, useState as useState16 } from "react";
 import { Fragment as Fragment15, jsx as jsx36, jsxs as jsxs27 } from "react/jsx-runtime";
 function resolveDesignProps3(props) {
   return {
@@ -17574,10 +17744,10 @@ var Invoices = forwardRef11(({ className, data, ...rest }, ref) => {
   const props = resolveDesignProps3(rest);
   const { t: t2 } = useTranslation();
   const { listInvoices, settings } = useEmbed();
-  const [isLoading, setIsLoading] = useState15(false);
-  const [error, setError] = useState15();
-  const [invoices, setInvoices] = useState15(() => formatInvoices(data));
-  const [listSize, setListSize] = useState15(props.limit.number);
+  const [isLoading, setIsLoading] = useState16(false);
+  const [error, setError] = useState16();
+  const [invoices, setInvoices] = useState16(() => formatInvoices(data));
+  const [listSize, setListSize] = useState16(props.limit.number);
   const getInvoices = useCallback11(async () => {
     try {
       setError(void 0);
@@ -17597,10 +17767,10 @@ var Invoices = forwardRef11(({ className, data, ...rest }, ref) => {
       (prev2) => prev2 !== props.limit.number ? props.limit.number : MAX_VISIBLE_INVOICE_COUNT
     );
   };
-  useEffect6(() => {
+  useEffect7(() => {
     getInvoices();
   }, [getInvoices]);
-  useEffect6(() => {
+  useEffect7(() => {
     setInvoices(formatInvoices(data));
   }, [data]);
   if (invoices.length === 0) {
@@ -17680,7 +17850,7 @@ var Invoices = forwardRef11(({ className, data, ...rest }, ref) => {
 Invoices.displayName = "Invoices";
 
 // src/components/elements/metered-features/MeteredFeatures.tsx
-import { forwardRef as forwardRef12, useCallback as useCallback12, useMemo as useMemo18, useRef as useRef11, useState as useState16 } from "react";
+import { forwardRef as forwardRef12, useCallback as useCallback12, useMemo as useMemo18, useRef as useRef12, useState as useState17 } from "react";
 
 // src/components/elements/metered-features/Meter.tsx
 import { jsx as jsx37 } from "react/jsx-runtime";
@@ -17882,7 +18052,7 @@ function resolveDesignProps4(props) {
 }
 var MeteredFeatures = forwardRef12(({ className, ...rest }, ref) => {
   const props = resolveDesignProps4(rest);
-  const elementsRef = useRef11([]);
+  const elementsRef = useRef12([]);
   const shouldWrapChildren = useWrapChildren(elementsRef);
   const { t: t2 } = useTranslation();
   const { data, settings, setCheckoutState } = useEmbed();
@@ -17907,7 +18077,7 @@ var MeteredFeatures = forwardRef12(({ className, ...rest }, ref) => {
   const creditGroups = groupCreditGrants(data?.creditGrants || [], {
     groupBy: "credit"
   });
-  const [creditVisibility, setCreditVisibility] = useState16(
+  const [creditVisibility, setCreditVisibility] = useState17(
     creditGroups.map(({ id }) => ({ id, isExpanded: false }))
   );
   const toggleBalanceDetails = useCallback12((id) => {
@@ -18468,7 +18638,7 @@ var registerWrapper = function registerWrapper2(stripe, startTime) {
   }
   stripe._registerWrapper({
     name: "stripe-js",
-    version: "8.2.0",
+    version: "8.3.0",
     startTime
   });
 };
@@ -18543,7 +18713,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);
@@ -18580,7 +18750,7 @@ var loadStripe = function loadStripe2() {
 };
 
 // src/components/elements/payment-method/PaymentMethodDetails.tsx
-import { useCallback as useCallback13, useEffect as useEffect7, useMemo as useMemo21, useState as useState17 } from "react";
+import { useCallback as useCallback13, useEffect as useEffect8, useMemo as useMemo21, useState as useState18 } from "react";
 import { Fragment as Fragment18, jsx as jsx42, jsxs as jsxs31 } from "react/jsx-runtime";
 var resolveDesignProps6 = () => {
   return {
@@ -18621,13 +18791,13 @@ var PaymentMethodDetails = ({
     data?.subscription
   ]);
   const isLightBackground = useIsLightBackground();
-  const [isLoading, setIsLoading] = useState17(false);
-  const [error, setError] = useState17();
-  const [showPaymentForm, setShowPaymentForm] = useState17(false);
-  const [stripe, setStripe] = useState17(null);
-  const [setupIntent, setSetupIntent] = useState17();
-  const [showDifferentPaymentMethods, setShowDifferentPaymentMethods] = useState17(false);
-  const [currentPaymentMethod, setCurrentPaymentMethod] = useState17(subscription?.paymentMethod || defaultPaymentMethod);
+  const [isLoading, setIsLoading] = useState18(false);
+  const [error, setError] = useState18();
+  const [showPaymentForm, setShowPaymentForm] = useState18(false);
+  const [stripe, setStripe] = useState18(null);
+  const [setupIntent, setSetupIntent] = useState18();
+  const [showDifferentPaymentMethods, setShowDifferentPaymentMethods] = useState18(false);
+  const [currentPaymentMethod, setCurrentPaymentMethod] = useState18(subscription?.paymentMethod || defaultPaymentMethod);
   const { isConfirming: isConfirmingPayment } = usePaymentConfirmation({
     stripe,
     clientSecret: confirmPaymentIntentProps?.clientSecret,
@@ -18714,7 +18884,7 @@ var PaymentMethodDetails = ({
     },
     [t2, deletePaymentMethod]
   );
-  useEffect7(() => {
+  useEffect8(() => {
     if (!stripe && setupIntent) {
       let publishableKey = setupIntent.publishableKey || setupIntent.schematicPublishableKey;
       const stripeOptions = {};
@@ -18726,7 +18896,7 @@ var PaymentMethodDetails = ({
       setStripe(stripePromise2);
     }
   }, [stripe, setupIntent]);
-  useEffect7(() => {
+  useEffect8(() => {
     if (!setupIntent && (!currentPaymentMethod || showPaymentForm)) {
       initializePaymentMethod();
     }
@@ -19074,7 +19244,7 @@ var resolveDesignProps7 = (props) => {
 var PlanManager = forwardRef14(({ 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 {
@@ -19435,11 +19605,7 @@ var PlanManager = forwardRef14(({ children, className, portal, ...rest }, ref) =
             {
               type: "button",
               onClick: () => {
-                setCheckoutState({
-                  planId: currentPlan?.id,
-                  addOnId: void 0,
-                  usage: false
-                });
+                setLayout("checkout");
               },
               $size: props.callToAction.buttonSize,
               $color: props.callToAction.buttonStyle,
@@ -19459,9 +19625,8 @@ import {
   Fragment as Fragment25,
   forwardRef as forwardRef15,
   useCallback as useCallback14,
-  useEffect as useEffect8,
-  useMemo as useMemo26,
-  useState as useState18
+  useEffect as useEffect9,
+  useState as useState19
 } from "react";
 
 // src/components/elements/pricing-table/AddOn.tsx
@@ -20279,30 +20444,14 @@ var PricingTable = forwardRef15(({ className, ...rest }, ref) => {
     },
     []
   );
-  const { currentPeriod, isStandalone } = useMemo26(() => {
-    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] = useState18(currentPeriod);
+  const [selectedPeriod, setSelectedPeriod] = useState19(
+    () => data?.company?.plan?.planPeriod || "month"
+  );
   const showPeriodToggle = rest.showPeriodToggle ?? data?.showPeriodToggle ?? true;
   const { plans, addOns, periods } = useAvailablePlans(selectedPeriod, {
     useSelectedPeriod: showPeriodToggle
   });
-  const [entitlementCounts, setEntitlementCounts] = useState18(
+  const [entitlementCounts, setEntitlementCounts] = useState19(
     () => plans.reduce(entitlementCountsReducer, {})
   );
   const handleToggleShowAll = (id) => {
@@ -20320,12 +20469,12 @@ var PricingTable = forwardRef15(({ className, ...rest }, ref) => {
       return prev2;
     });
   };
-  useEffect8(() => {
-    if (isStandalone) {
+  useEffect9(() => {
+    if (typeof data?.component === "undefined") {
       hydratePublic();
     }
-  }, [isStandalone, hydratePublic]);
-  useEffect8(() => {
+  }, [data?.component, hydratePublic]);
+  useEffect9(() => {
     setEntitlementCounts(plans.reduce(entitlementCountsReducer, {}));
   }, [plans]);
   if (isPending) {
@@ -20341,12 +20490,13 @@ var PricingTable = forwardRef15(({ 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 : Fragment25;
+  const Wrapper = typeof data?.component === "undefined" ? Container : Fragment25;
   return /* @__PURE__ */ jsx49(Wrapper, { children: /* @__PURE__ */ jsxs38(
     FussyChild,
     {
@@ -20379,6 +20529,7 @@ var PricingTable = forwardRef15(({ className, ...rest }, ref) => {
                   {
                     options: periods,
                     selectedOption: selectedPeriod,
+                    selectedPlan: currentPlan,
                     onSelect: (period) => {
                       if (period !== selectedPeriod) {
                         setSelectedPeriod(period);
@@ -20491,7 +20642,7 @@ var TextElement = forwardRef16(({ children, className, ...rest }, ref) => {
 TextElement.displayName = "Text";
 
 // src/components/elements/unsubscribe-button/UnsubscribeButton.tsx
-import { forwardRef as forwardRef17, useMemo as useMemo27 } from "react";
+import { forwardRef as forwardRef17, useMemo as useMemo26 } from "react";
 import { jsx as jsx51 } from "react/jsx-runtime";
 var buttonStyles = {
   primary: {
@@ -20522,7 +20673,7 @@ var UnsubscribeButton = forwardRef17(({ children, className, ...rest }, ref) =>
   const props = resolveDesignProps10(rest);
   const { t: t2 } = useTranslation();
   const { data, setLayout } = useEmbed();
-  const hasActiveSubscription = useMemo27(() => {
+  const hasActiveSubscription = useMemo26(() => {
     return data?.subscription && data.subscription.status !== "cancelled" && !data.subscription.cancelAt;
   }, [data?.subscription]);
   if (!hasActiveSubscription) {
@@ -20557,7 +20708,7 @@ var UnsubscribeButton = forwardRef17(({ children, className, ...rest }, ref) =>
 UnsubscribeButton.displayName = "UnsubscribeButton";
 
 // src/components/elements/upcoming-bill/UpcomingBill.tsx
-import { forwardRef as forwardRef18, useCallback as useCallback15, useEffect as useEffect9, useMemo as useMemo28, useState as useState19 } from "react";
+import { forwardRef as forwardRef18, useCallback as useCallback15, useEffect as useEffect10, useMemo as useMemo27, useState as useState20 } from "react";
 import { jsx as jsx52, jsxs as jsxs39 } from "react/jsx-runtime";
 function resolveDesignProps11(props) {
   return {
@@ -20582,11 +20733,11 @@ var UpcomingBill = forwardRef18(({ className, ...rest }, ref) => {
   const { t: t2 } = useTranslation();
   const { data, settings, debug, getUpcomingInvoice, getCustomerBalance } = useEmbed();
   const isLightBackground = useIsLightBackground();
-  const [isLoading, setIsLoading] = useState19(false);
-  const [error, setError] = useState19();
-  const [upcomingInvoice, setUpcomingInvoice] = useState19();
-  const [balances, setBalances] = useState19([]);
-  const discounts = useMemo28(() => {
+  const [isLoading, setIsLoading] = useState20(false);
+  const [error, setError] = useState20();
+  const [upcomingInvoice, setUpcomingInvoice] = useState20();
+  const [balances, setBalances] = useState20([]);
+  const discounts = useMemo27(() => {
     return (data?.subscription?.discounts || []).map((discount) => ({
       couponId: discount.couponId,
       customerFacingCode: discount.customerFacingCode || void 0,
@@ -20622,10 +20773,10 @@ var UpcomingBill = forwardRef18(({ className, ...rest }, ref) => {
       debug("Failed to fetch customer balance.", err2);
     }
   }, [debug, getCustomerBalance]);
-  useEffect9(() => {
+  useEffect10(() => {
     getInvoice();
   }, [getInvoice]);
-  useEffect9(() => {
+  useEffect10(() => {
     getBalances();
   }, [getBalances]);
   if (!data?.subscription || data.subscription.cancelAt) {
@@ -24937,7 +25088,7 @@ var { Inflate, inflate, inflateRaw, ungzip } = inflate_1$1;
 var inflate_1 = inflate;
 
 // src/components/embed/Embed.tsx
-import { useContext as useContext6, useEffect as useEffect10, useState as useState20 } from "react";
+import { useContext as useContext6, useEffect as useEffect11, useState as useState21 } from "react";
 
 // src/components/embed/renderer.ts
 import { createElement as createElement5 } from "react";
@@ -25053,7 +25204,7 @@ var Error2 = ({ message }) => {
   );
 };
 var SchematicEmbed = ({ id, accessToken }) => {
-  const [children, setChildren] = useState20(/* @__PURE__ */ jsx53(Loading, {}));
+  const [children, setChildren] = useState21(/* @__PURE__ */ jsx53(Loading, {}));
   const theme = useContext6(et);
   const {
     data,
@@ -25065,17 +25216,17 @@ var SchematicEmbed = ({ id, accessToken }) => {
     setAccessToken,
     updateSettings
   } = useEmbed();
-  useEffect10(() => {
+  useEffect11(() => {
     if (accessToken) {
       setAccessToken(accessToken);
     }
   }, [accessToken, setAccessToken]);
-  useEffect10(() => {
+  useEffect11(() => {
     if (id && stale) {
       hydrateComponent(id);
     }
   }, [id, hydrateComponent, stale]);
-  useEffect10(() => {
+  useEffect11(() => {
     try {
       if (data?.component?.ast) {
         const nodes = [];