@schematichq/schematic-components 0.7.12 → 0.7.14

package/dist/schematic-components.cjs.js

@@ -6745,9 +6745,9 @@ var unitlessKeys = {
 var f = "undefined" != typeof process && void 0 !== process.env && (process.env.REACT_APP_SC_ATTR || process.env.SC_ATTR) || "data-styled";
 var m = "active";
 var y = "data-styled-version";
-var v = "6.1.17";
+var v = "6.1.18";
 var g = "/*!sc*/\n";
-var S = "undefined" != typeof window && "HTMLElement" in window;
+var S = "undefined" != typeof window && "undefined" != typeof document;
 var w = Boolean("boolean" == typeof SC_DISABLE_SPEEDY ? SC_DISABLE_SPEEDY : "undefined" != typeof process && void 0 !== process.env && void 0 !== process.env.REACT_APP_SC_DISABLE_SPEEDY && "" !== process.env.REACT_APP_SC_DISABLE_SPEEDY ? "false" !== process.env.REACT_APP_SC_DISABLE_SPEEDY && process.env.REACT_APP_SC_DISABLE_SPEEDY : "undefined" != typeof process && void 0 !== process.env && void 0 !== process.env.SC_DISABLE_SPEEDY && "" !== process.env.SC_DISABLE_SPEEDY ? "false" !== process.env.SC_DISABLE_SPEEDY && process.env.SC_DISABLE_SPEEDY : true);
 var b = {};
 var E = /invalid hook call/i;
@@ -8166,13 +8166,14 @@ var Translator = class _Translator extends EventEmitter {
     if (lng) this.language = lng;
   }
   exists(key) {
-    let options2 = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {
+    let o2 = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {
       interpolation: {}
     };
-    if (key == null) {
-      return false;
-    }
-    const resolved = this.resolve(key, options2);
+    const opt = {
+      ...o2
+    };
+    if (key == null) return false;
+    const resolved = this.resolve(key, opt);
     return resolved?.res !== void 0;
   }
   extractFromKey(key, opt) {
@@ -8199,7 +8200,10 @@ var Translator = class _Translator extends EventEmitter {
       namespaces: isString(namespaces) ? [namespaces] : namespaces
     };
   }
-  translate(keys, opt, lastKey) {
+  translate(keys, o2, lastKey) {
+    let opt = typeof o2 === "object" ? {
+      ...o2
+    } : o2;
     if (typeof opt !== "object" && this.options.overloadTranslationOptionHandler) {
       opt = this.options.overloadTranslationOptionHandler(arguments);
     }
@@ -8377,7 +8381,7 @@ var Translator = class _Translator extends EventEmitter {
       res = this.extendTranslation(res, keys, opt, resolved, lastKey);
       if (usedKey && res === key && this.options.appendNamespaceToMissingKey) res = `${namespace}:${key}`;
       if ((usedKey || usedDefault) && this.options.parseMissingKeyHandler) {
-        res = this.options.parseMissingKeyHandler(this.options.appendNamespaceToMissingKey ? `${namespace}:${key}` : key, usedDefault ? res : void 0);
+        res = this.options.parseMissingKeyHandler(this.options.appendNamespaceToMissingKey ? `${namespace}:${key}` : key, usedDefault ? res : void 0, opt);
       }
     }
     if (returnDetails) {
@@ -9658,7 +9662,7 @@ var I18n = class _I18n extends EventEmitter {
     }
     if (!this.resolvedLanguage && this.languages.indexOf(l2) < 0 && this.store.hasLanguageSomeTranslations(l2)) {
       this.resolvedLanguage = l2;
-      if (this.languages.indexOf(l2) < 0) this.languages.unshift(l2);
+      this.languages.unshift(l2);
     }
   }
   changeLanguage(lng, callback) {
@@ -9872,12 +9876,13 @@ var I18n = class _I18n extends EventEmitter {
         prev2[l2] = {
           ...this.store.data[l2]
         };
-        return Object.keys(prev2[l2]).reduce((acc, n) => {
+        prev2[l2] = Object.keys(prev2[l2]).reduce((acc, n) => {
           acc[n] = {
             ...prev2[l2][n]
           };
           return acc;
-        }, {});
+        }, prev2[l2]);
+        return prev2;
       }, {});
       clone.store = new ResourceStore(clonedData, mergedOptions);
       clone.services.resourceStore = clone.store;
@@ -14734,6 +14739,8 @@ function BillingPriceViewFromJSONTyped(json, ignoreDiscriminator) {
     id: json["id"],
     interval: json["interval"],
     isActive: json["is_active"],
+    meterEventName: json["meter_event_name"] == null ? void 0 : json["meter_event_name"],
+    meterEventPayloadKey: json["meter_event_payload_key"] == null ? void 0 : json["meter_event_payload_key"],
     meterId: json["meter_id"] == null ? void 0 : json["meter_id"],
     packageSize: json["package_size"],
     price: json["price"],
@@ -15274,12 +15281,12 @@ function EventSummaryResponseDataFromJSONTyped(json, ignoreDiscriminator) {
     return json;
   }
   return {
-    companyCount: json["company_count"],
+    companyCount: json["company_count"] == null ? void 0 : json["company_count"],
     environmentId: json["environment_id"],
     eventCount: json["event_count"],
     eventSubtype: json["event_subtype"],
     lastSeenAt: json["last_seen_at"] == null ? void 0 : new Date(json["last_seen_at"]),
-    userCount: json["user_count"]
+    userCount: json["user_count"] == null ? void 0 : json["user_count"]
   };
 }
 
@@ -16416,7 +16423,7 @@ var en_default = {
     Monthly: "Monthly",
     Next: "Next",
     "No limit": "No limit",
-    "No payment method selected": "No payment method selected",
+    "No payment method added yet": "No payment method added yet",
     "Not ready to cancel?": "Not ready to cancel?",
     "On demand": "On demand",
     "One time ": "One time",
@@ -16426,6 +16433,7 @@ var en_default = {
     "Pay now": "Pay now",
     "Payment Method": "Payment Method",
     "Percent off": "{{percent}}% off",
+    "Plan selected": "Plan selected",
     Plan: "Plan",
     Plans: "Plans",
     "Please provide an access token.": "Please provide an access token.",
@@ -16439,6 +16447,7 @@ var en_default = {
     "See less": "See less",
     "See more": "See more",
     "Select add-ons": "Select add-ons",
+    "Select existing payment method": "Select existing payment method",
     "Select payment method": "Select payment method",
     "Select plan": "Select plan",
     "Select quantity": "Select quantity",
@@ -16446,13 +16455,15 @@ var en_default = {
     "Session expired. Please refresh and try again.": "Session expired. Please refresh and try again.",
     "Show details": "Show details",
     "Start trial": "Start trial",
+    "Start X day trial": "Start {{days}} day trial",
     "Subscribe and close": "Subscribe and close",
     "Subscription canceled": "Subscription canceled",
     Subscription: "Subscription",
     "Talk to support": "Talk to support",
     Total: "Total",
     "Trial ends in": "Trial ends in {{days}} days",
-    "Trial plan": "Try free for {{days}} days",
+    "Trial in progress": "Trial in progress",
+    "Trial selected": "Trial selected",
     Trial: "Trial",
     Unlimited: "Unlimited {{item}}",
     "Unsubscribe failed": "Unsubscribe failed",
@@ -17147,7 +17158,7 @@ var EmbedProvider = ({
   (0, import_react11.useEffect)(() => {
     if (accessToken) {
       const { headers = {} } = apiConfig ?? {};
-      headers["X-Schematic-Components-Version"] = "0.7.12";
+      headers["X-Schematic-Components-Version"] = "0.7.14";
       headers["X-Schematic-Session-ID"] = sessionIdRef.current;
       const config = new Configuration({
         ...apiConfig,
@@ -17591,29 +17602,23 @@ var Button = dt.button(
         case "sm":
           return lt`
               font-size: ${15 / TEXT_BASE_SIZE}rem;
-              ${$variant !== "text" && lt`
-                height: ${40 / TEXT_BASE_SIZE}rem;
-                padding: ${7 / TEXT_BASE_SIZE}rem ${20 / TEXT_BASE_SIZE}rem;
-                border-radius: ${6 / TEXT_BASE_SIZE}rem;
-              `}
+              height: ${40 / TEXT_BASE_SIZE}rem;
+              padding: ${7 / TEXT_BASE_SIZE}rem ${20 / TEXT_BASE_SIZE}rem;
+              border-radius: ${6 / TEXT_BASE_SIZE}rem;
             `;
         case "md":
           return lt`
               font-size: ${17 / TEXT_BASE_SIZE}rem;
-              ${$variant !== "text" && lt`
-                height: ${52 / TEXT_BASE_SIZE}rem;
-                padding: ${8 / TEXT_BASE_SIZE}rem ${24 / TEXT_BASE_SIZE}rem;
-                border-radius: ${8 / TEXT_BASE_SIZE}rem;
-              `}
+              height: ${52 / TEXT_BASE_SIZE}rem;
+              padding: ${8 / TEXT_BASE_SIZE}rem ${24 / TEXT_BASE_SIZE}rem;
+              border-radius: ${8 / TEXT_BASE_SIZE}rem;
             `;
         case "lg":
           return lt`
               font-size: ${19 / TEXT_BASE_SIZE}rem;
-              ${$variant !== "text" && lt`
-                height: ${64 / TEXT_BASE_SIZE}rem;
-                padding: ${9 / TEXT_BASE_SIZE}rem ${28 / TEXT_BASE_SIZE}rem;
-                border-radius: ${10 / TEXT_BASE_SIZE}rem;
-              `}
+              height: ${64 / TEXT_BASE_SIZE}rem;
+              padding: ${9 / TEXT_BASE_SIZE}rem ${28 / TEXT_BASE_SIZE}rem;
+              border-radius: ${10 / TEXT_BASE_SIZE}rem;
             `;
       }
     }}
@@ -18631,7 +18636,8 @@ var StageButton = ({
   isLoading,
   requiresPayment,
   setCheckoutStage,
-  trialPaymentMethodRequired
+  trialPaymentMethodRequired,
+  willTrial
 }) => {
   const { t: t2 } = useTranslation();
   const NoPaymentRequired = () => {
@@ -18647,42 +18653,14 @@ var StageButton = ({
     );
   };
   if (checkoutStage === "plan") {
-    if (canTrial) {
-      if (trialPaymentMethodRequired) {
-        return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-          Button,
-          {
-            type: "button",
-            disabled: !hasAddOns && !canUpdateSubscription,
-            onClick: async () => {
-              setCheckoutStage?.("checkout");
-            },
-            $isLoading: isLoading,
-            children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
-              Flex,
-              {
-                $gap: "0.5rem",
-                $justifyContent: "center",
-                $alignItems: "center",
-                $padding: "0 1rem",
-                children: [
-                  t2("Next"),
-                  ": ",
-                  t2("Checkout"),
-                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Icon2, { name: "arrow-right" })
-                ]
-              }
-            )
-          }
-        );
-      }
+    if (canTrial && trialPaymentMethodRequired) {
       return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
         Button,
         {
           type: "button",
-          disabled: !hasUnstagedChanges || !canUpdateSubscription,
+          disabled: !hasAddOns && !canUpdateSubscription,
           onClick: async () => {
-            checkout();
+            setCheckoutStage?.("checkout");
           },
           $isLoading: isLoading,
           children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
@@ -18693,7 +18671,9 @@ var StageButton = ({
               $alignItems: "center",
               $padding: "0 1rem",
               children: [
-                t2("Subscribe and close"),
+                t2("Next"),
+                ": ",
+                t2("Checkout"),
                 /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Icon2, { name: "arrow-right" })
               ]
             }
@@ -18702,7 +18682,7 @@ var StageButton = ({
       );
     }
     if (!requiresPayment && !checkoutStages?.some(
-      (stage) => stage.id === "addons" || stage.id === "usage"
+      (stage) => stage.id === "usage" || stage.id === "addons"
     )) {
       return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(NoPaymentRequired, {});
     }
@@ -18728,7 +18708,7 @@ var StageButton = ({
     );
   }
   if (checkoutStage === "usage") {
-    if (!requiresPayment) {
+    if (!requiresPayment && !checkoutStages?.some((stage) => stage.id === "addons")) {
       return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(NoPaymentRequired, {});
     }
     return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
@@ -18800,7 +18780,7 @@ var StageButton = ({
         disabled: isLoading || !hasUnstagedChanges || !canCheckout,
         onClick: checkout,
         $isLoading: isLoading,
-        children: canTrial ? t2("Start trial") : t2("Pay now")
+        children: willTrial ? t2("Start trial") : t2("Pay now")
       }
     );
   }
@@ -18826,7 +18806,8 @@ var Sidebar = ({
   setError,
   setIsLoading,
   updatePromoCode,
-  showHeader = true
+  showHeader = true,
+  willTrial = false
 }) => {
   const { t: t2 } = useTranslation();
   const theme = nt();
@@ -18956,10 +18937,10 @@ var Sidebar = ({
           ...promoCode && { promoCode }
         }
       });
-      dispatchPlanChangedEvent(response.data);
       setIsLoading(false);
       setLayout("portal");
-      hydrate();
+      await hydrate();
+      dispatchPlanChangedEvent(response.data);
     } catch {
       setLayout("checkout");
       setError(
@@ -19057,6 +19038,7 @@ var Sidebar = ({
     currentUsageBasedEntitlements,
     usageBasedEntitlements
   ]);
+  const willPeriodChange = planPeriod !== data.company?.plan?.planPeriod;
   const willPlanChange = typeof selectedPlan !== "undefined" && !selectedPlan.current;
   const removedAddOns = currentAddOns.filter(
     (current) => !selectedAddOns.some((selected) => current.id === selected.id) && current.planPeriod !== "one-time"
@@ -19066,10 +19048,10 @@ var Sidebar = ({
   );
   const willAddOnsChange = removedAddOns.length > 0 || addedAddOns.length > 0;
   const willPayInAdvanceEntitlementsChange = payInAdvanceEntitlements.length > 0 && payInAdvanceEntitlements.some(({ quantity, usage }) => quantity !== usage);
-  const hasUnstagedChanges = willPlanChange || willAddOnsChange || willPayInAdvanceEntitlementsChange;
+  const hasUnstagedChanges = willPeriodChange || willPlanChange || willAddOnsChange || willPayInAdvanceEntitlementsChange;
   const canUpdateSubscription = mode === "edit" || api !== null && !isLoading;
   const canCheckout = canUpdateSubscription && (!!data.subscription?.paymentMethod || typeof paymentMethodId === "string");
-  const isTrialable = selectedPlan?.companyCanTrial;
+  const isTrialable = selectedPlan?.companyCanTrial === true;
   const today = /* @__PURE__ */ new Date();
   const trialEndsOn = new Date(today);
   if (isTrialable && selectedPlan.trialDays) {
@@ -19145,7 +19127,7 @@ var Sidebar = ({
                 }
               ) }),
               /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Flex, { $flexDirection: "column", $gap: "0.5rem", $marginBottom: "1.5rem", children: [
-                data.company?.plan && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+                currentPlan && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
                   Flex,
                   {
                     $justifyContent: "space-between",
@@ -19164,10 +19146,10 @@ var Sidebar = ({
                           $size: theme.typography.heading4.fontSize,
                           $weight: theme.typography.heading4.fontWeight,
                           $color: theme.typography.heading4.color,
-                          children: data.company.plan.name
+                          children: currentPlan.name
                         }
                       ) }),
-                      typeof data.company.plan.planPrice === "number" && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+                      typeof currentPlan.planPrice === "number" && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
                         Text,
                         {
                           $font: theme.typography.text.fontFamily,
@@ -19176,14 +19158,12 @@ var Sidebar = ({
                           $color: theme.typography.text.color,
                           children: [
                             formatCurrency(
-                              data.company.plan.planPrice,
-                              data.company.billingSubscription?.currency
+                              currentPlan.planPrice,
+                              data.company?.billingSubscription?.currency
                             ),
                             /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("sub", { children: [
                               "/",
-                              shortenPeriod(
-                                data.company.plan.planPeriod || planPeriod
-                              )
+                              shortenPeriod(currentPlan.planPeriod || planPeriod)
                             ] })
                           ]
                         }
@@ -19949,7 +19929,7 @@ var Sidebar = ({
               layout === "checkout" && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                 StageButton,
                 {
-                  canTrial: selectedPlan?.companyCanTrial === true,
+                  canTrial: isTrialable,
                   canCheckout,
                   canUpdateSubscription,
                   checkout,
@@ -19961,7 +19941,8 @@ var Sidebar = ({
                   isLoading,
                   requiresPayment,
                   setCheckoutStage,
-                  trialPaymentMethodRequired: data.trialPaymentMethodRequired === true
+                  trialPaymentMethodRequired: data.trialPaymentMethodRequired === true,
+                  willTrial
                 }
               ),
               layout === "unsubscribe" && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Button, { onClick: unsubscribe, $isLoading: isLoading, children: t2("Cancel subscription") }),
@@ -20271,13 +20252,11 @@ var Navigation = ({
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
-            Box,
+            Text,
             {
+              as: Box,
               tabIndex: 0,
-              $fontSize: `${16 / TEXT_BASE_SIZE}rem`,
-              $fontFamily: theme.typography.text.fontFamily,
-              $fontWeight: index === activeIndex ? 600 : 400,
-              $color: theme.typography.text.color,
+              $weight: index === activeIndex ? 600 : 400,
               ...!showFullContent && {
                 $overflow: "hidden",
                 $whiteSpace: "nowrap",
@@ -20330,15 +20309,162 @@ var ButtonLink = dt.a`
 
 // src/components/shared/checkout-dialog/Plan.tsx
 var import_jsx_runtime17 = require("react/jsx-runtime");
+var Selected = ({ isCurrent = false, isTrial = false }) => {
+  const { t: t2 } = useTranslation();
+  const theme = nt();
+  const text = (0, import_react25.useMemo)(() => {
+    if (isCurrent) {
+      return isTrial ? t2("Trial in progress") : t2("Current plan");
+    }
+    return isTrial ? t2("Trial selected") : t2("Plan selected");
+  }, [t2, isCurrent, isTrial]);
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+    Flex,
+    {
+      $justifyContent: "center",
+      $alignItems: "center",
+      $gap: "0.25rem",
+      $padding: "0.625rem 0",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          Icon2,
+          {
+            name: "check-rounded",
+            style: {
+              fontSize: 20,
+              lineHeight: 1,
+              color: theme.primary
+            }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          Text,
+          {
+            $font: theme.typography.text.fontFamily,
+            $size: 15 / 16 * theme.typography.text.fontSize,
+            $weight: theme.typography.text.fontWeight,
+            $color: theme.typography.text.color,
+            $leading: 1,
+            children: text
+          }
+        )
+      ]
+    }
+  );
+};
+var PlanButtonGroup = ({
+  plan,
+  isLoading,
+  isSelected,
+  onSelect,
+  willTrial
+}) => {
+  const { t: t2 } = useTranslation();
+  const { data } = useEmbed();
+  const isCurrent = plan.id === data.company?.plan?.id;
+  if (plan.companyCanTrial) {
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(Flex, { $flexDirection: "column", $gap: "1.5rem", children: [
+      data.subscription?.status !== "trialing" && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_jsx_runtime17.Fragment, { children: isSelected && willTrial ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        Selected,
+        {
+          isCurrent,
+          isTrial: plan.companyCanTrial && willTrial
+        }
+      ) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        Button,
+        {
+          type: "button",
+          disabled: (isLoading || !plan.valid) && !plan.custom,
+          ...!plan.custom && {
+            onClick: () => {
+              onSelect({
+                plan,
+                shouldTrial: true
+              });
+            }
+          },
+          $size: "sm",
+          $color: "primary",
+          $variant: "filled",
+          children: plan.custom ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+            ButtonLink,
+            {
+              href: plan.customPlanConfig?.ctaWebSite ?? "#",
+              target: "_blank",
+              children: plan.customPlanConfig?.ctaText ?? t2("Talk to support")
+            }
+          ) : !plan.valid ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+            Tooltip,
+            {
+              trigger: t2("Over usage limit"),
+              content: t2("Current usage exceeds the limit of this plan.")
+            }
+          ) : t2("Start X day trial", { days: plan.trialDays })
+        }
+      ) }),
+      !plan.custom && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_jsx_runtime17.Fragment, { children: isSelected && (!willTrial || data.subscription?.status === "trialing") ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Selected, { isCurrent }) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        Button,
+        {
+          type: "button",
+          disabled: isLoading || !plan.valid,
+          onClick: () => {
+            onSelect({ plan, shouldTrial: false });
+          },
+          $size: "sm",
+          $color: "primary",
+          $variant: data.subscription?.status === "trialing" ? "filled" : "text",
+          children: !plan.valid ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+            Tooltip,
+            {
+              trigger: t2("Over usage limit"),
+              content: t2("Current usage exceeds the limit of this plan.")
+            }
+          ) : t2("Choose plan")
+        }
+      ) })
+    ] });
+  }
+  return isSelected ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Selected, { isCurrent }) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    Button,
+    {
+      type: "button",
+      disabled: (isLoading || !plan.valid) && !plan.custom,
+      ...!plan.custom && {
+        onClick: () => {
+          onSelect({ plan });
+        }
+      },
+      $size: "sm",
+      $color: "primary",
+      $variant: "filled",
+      children: plan.custom ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        ButtonLink,
+        {
+          href: plan.customPlanConfig?.ctaWebSite ?? "#",
+          target: "_blank",
+          children: plan.customPlanConfig?.ctaText ?? t2("Talk to support")
+        }
+      ) : !plan.valid ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        Tooltip,
+        {
+          trigger: t2("Over usage limit"),
+          content: t2("Current usage exceeds the limit of this plan.")
+        }
+      ) : t2("Choose plan")
+    }
+  );
+};
 var Plan = ({
   isLoading,
   plans,
   selectedPlan,
   period,
-  selectPlan
+  selectPlan,
+  willTrial
 }) => {
   const { t: t2 } = useTranslation();
   const theme = nt();
+  const { data } = useEmbed();
   const isLightBackground = useIsLightBackground();
   const [entitlementCounts, setEntitlementCounts] = (0, import_react25.useState)(
     () => plans.reduce(
@@ -20352,7 +20478,6 @@ var Plan = ({
       {}
     )
   );
-  const cardPadding = theme.card.padding / TEXT_BASE_SIZE;
   const handleToggleShowAll = (id) => {
     setEntitlementCounts((prev2) => {
       const count = { ...prev2[id] };
@@ -20365,6 +20490,7 @@ var Plan = ({
       };
     });
   };
+  const cardPadding = theme.card.padding / TEXT_BASE_SIZE;
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_jsx_runtime17.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     Box,
     {
@@ -20473,7 +20599,7 @@ var Plan = ({
                             $size: 0.75 * theme.typography.text.fontSize,
                             $weight: theme.typography.text.fontWeight,
                             $color: hexToHSL(theme.primary).l > 50 ? "#000000" : "#FFFFFF",
-                            children: t2("Active")
+                            children: data.subscription?.status === "trialing" ? t2("Trialing") : t2("Active")
                           }
                         )
                       }
@@ -20688,70 +20814,14 @@ var Plan = ({
                         }
                       )
                     ] }),
-                    plan.id === selectedPlan?.id ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
-                      Flex,
-                      {
-                        $justifyContent: "center",
-                        $alignItems: "center",
-                        $gap: "0.25rem",
-                        $padding: "0.625rem 0",
-                        children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-                            Icon2,
-                            {
-                              name: "check-rounded",
-                              style: {
-                                fontSize: 20,
-                                lineHeight: 1,
-                                color: theme.primary
-                              }
-                            }
-                          ),
-                          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-                            Text,
-                            {
-                              $font: theme.typography.text.fontFamily,
-                              $size: 15 / 16 * theme.typography.text.fontSize,
-                              $weight: theme.typography.text.fontWeight,
-                              $color: theme.typography.text.color,
-                              $leading: 1,
-                              children: plan.current ? t2("Current plan") : t2("Selected")
-                            }
-                          )
-                        ]
-                      }
-                    ) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-                      Button,
+                    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                      PlanButtonGroup,
                       {
-                        type: "button",
-                        disabled: (isLoading || !plan.valid) && !plan.custom,
-                        ...{
-                          onClick: () => {
-                            if (plan.custom) {
-                              return;
-                            }
-                            selectPlan({ plan });
-                          }
-                        },
-                        $size: "sm",
-                        $color: "primary",
-                        $variant: plan.current ? "outline" : "filled",
-                        children: plan.custom ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-                          ButtonLink,
-                          {
-                            href: plan.customPlanConfig?.ctaWebSite ?? "#",
-                            target: "_blank",
-                            children: plan.customPlanConfig?.ctaText ?? t2("Talk to support")
-                          }
-                        ) : !plan.valid ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-                          Tooltip,
-                          {
-                            trigger: t2("Over usage limit"),
-                            content: t2(
-                              "Current usage exceeds the limit of this plan."
-                            )
-                          }
-                        ) : plan.companyCanTrial ? t2("Trial plan", { days: plan.trialDays }) : t2("Choose plan")
+                        plan,
+                        isLoading,
+                        isSelected: plan.id === selectedPlan?.id,
+                        onSelect: selectPlan,
+                        willTrial
                       }
                     )
                   ]
@@ -20961,10 +21031,11 @@ var CheckoutDialog = ({ top = 0 }) => {
   const contentRef = (0, import_react26.useRef)(null);
   const checkoutRef = (0, import_react26.useRef)(null);
   const [charges, setCharges] = (0, import_react26.useState)();
-  const [paymentMethodId, setPaymentMethodId] = (0, import_react26.useState)();
+  const [paymentMethodId, setPaymentMethodId] = (0, import_react26.useState)(
+    (data.subscription?.paymentMethod || data.company?.defaultPaymentMethod)?.externalId
+  );
   const [isLoading, setIsLoading] = (0, import_react26.useState)(false);
   const [error, setError] = (0, import_react26.useState)();
-  const [promoCode, setPromoCode] = (0, import_react26.useState)();
   const [planPeriod, setPlanPeriod] = (0, import_react26.useState)(
     selected.period || data.company?.plan?.planPeriod || "month"
   );
@@ -20978,6 +21049,9 @@ var CheckoutDialog = ({ top = 0 }) => {
       (plan) => selected.planId ? plan.id === selected.planId : plan.current
     )
   );
+  const [willTrial, setWillTrial] = (0, import_react26.useState)(
+    data.subscription?.status !== "trialing" && !data.trialPaymentMethodRequired
+  );
   const [addOns, setAddOns] = (0, import_react26.useState)(
     () => availableAddOns.map((addOn) => ({
       ...addOn,
@@ -20986,6 +21060,7 @@ var CheckoutDialog = ({ top = 0 }) => {
       )
     }))
   );
+  const hasActiveAddOns = addOns.some((addOn) => addOn.isSelected);
   const currentEntitlements = (0, import_react26.useMemo)(() => {
     return data.featureUsage?.features || [];
   }, [data.featureUsage?.features]);
@@ -21004,11 +21079,14 @@ var CheckoutDialog = ({ top = 0 }) => {
     ),
     [usageBasedEntitlements]
   );
-  const hasActiveAddOns = addOns.some((addOn) => addOn.isSelected);
   const hasActivePayInAdvanceEntitlements = payInAdvanceEntitlements.some(
     ({ quantity }) => quantity > 0
   );
-  const requiresPayment = (!selectedPlan?.companyCanTrial || !!data.trialPaymentMethodRequired) && (!selectedPlan?.isFree || hasActiveAddOns || hasActivePayInAdvanceEntitlements);
+  const [promoCode, setPromoCode] = (0, import_react26.useState)();
+  const isTrialable = selectedPlan?.isTrialable === true && selectedPlan?.companyCanTrial === true;
+  const isTrialableAndFree = isTrialable && data.trialPaymentMethodRequired !== true;
+  const planRequiresPayment = !isTrialableAndFree || !isTrialable && selectedPlan?.isFree !== true;
+  const requiresPayment = planRequiresPayment || hasActiveAddOns || hasActivePayInAdvanceEntitlements;
   const checkoutStages = (0, import_react26.useMemo)(() => {
     const stages = [
       {
@@ -21018,13 +21096,16 @@ var CheckoutDialog = ({ top = 0 }) => {
         description: t2("Choose your base plan")
       }
     ];
-    if (payInAdvanceEntitlements.length) {
+    if (willTrial) {
+      return stages;
+    }
+    if (payInAdvanceEntitlements.length > 0) {
       stages.push({
         id: "usage",
         name: t2("Quantity")
       });
     }
-    if (availableAddOns.length && !selectedPlan?.companyCanTrial) {
+    if (availableAddOns.length > 0) {
       stages.push({
         id: "addons",
         name: t2("Add-ons"),
@@ -21042,9 +21123,9 @@ var CheckoutDialog = ({ top = 0 }) => {
     return stages;
   }, [
     t2,
+    willTrial,
     payInAdvanceEntitlements,
     availableAddOns,
-    selectedPlan?.companyCanTrial,
     requiresPayment
   ]);
   const [checkoutStage, setCheckoutStage] = (0, import_react26.useState)(() => {
@@ -21149,6 +21230,8 @@ var CheckoutDialog = ({ top = 0 }) => {
         setSelectedPlan(plan);
         setUsageBasedEntitlements(entitlements);
       }
+      const shouldTrial = updates.shouldTrial ?? false;
+      setWillTrial(shouldTrial && !data.trialPaymentMethodRequired);
       previewCheckout({
         period,
         plan: updates.plan,
@@ -21157,7 +21240,13 @@ var CheckoutDialog = ({ top = 0 }) => {
         )
       });
     },
-    [planPeriod, selectedPlan, currentEntitlements, previewCheckout]
+    [
+      data.trialPaymentMethodRequired,
+      planPeriod,
+      selectedPlan,
+      currentEntitlements,
+      previewCheckout
+    ]
   );
   const changePlanPeriod = (0, import_react26.useCallback)(
     (period) => {
@@ -21354,7 +21443,8 @@ var CheckoutDialog = ({ top = 0 }) => {
                         period: planPeriod,
                         plans: availablePlans,
                         selectedPlan,
-                        selectPlan
+                        selectPlan,
+                        willTrial
                       }
                     ),
                     checkoutStage === "usage" && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
@@ -21406,7 +21496,8 @@ var CheckoutDialog = ({ top = 0 }) => {
                   setCheckoutStage: (stage) => setCheckoutStage(stage),
                   setError: (msg) => setError(msg),
                   setIsLoading,
-                  updatePromoCode: (code) => updatePromoCode(code)
+                  updatePromoCode: (code) => updatePromoCode(code),
+                  willTrial
                 }
               )
             ]
@@ -21451,6 +21542,7 @@ var PaymentForm = ({ onConfirm }) => {
   const [message, setMessage] = (0, import_react27.useState)(null);
   const [isLoading, setIsLoading] = (0, import_react27.useState)(false);
   const [isConfirmed, setIsConfirmed] = (0, import_react27.useState)(false);
+  const [isComplete, setIsComplete] = (0, import_react27.useState)(false);
   const handleSubmit = async (event) => {
     event.preventDefault();
     if (!api || !stripe || !elements) {
@@ -21493,12 +21585,20 @@ var PaymentForm = ({ onConfirm }) => {
         overflowY: "auto"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Box, { $marginBottom: "1.5rem", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react_stripe_js.PaymentElement, { id: "payment-element" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Box, { $marginBottom: "1.5rem", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+          import_react_stripe_js.PaymentElement,
+          {
+            id: "payment-element",
+            onChange: (event) => {
+              setIsComplete(event.complete);
+            }
+          }
+        ) }),
         /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
           Button,
           {
             id: "submit",
-            disabled: isLoading || !stripe || !elements || isConfirmed,
+            disabled: isLoading || !stripe || !elements || isConfirmed || !isComplete,
             style: { flexShrink: 0 },
             $color: "primary",
             $isLoading: isLoading,
@@ -23041,7 +23141,7 @@ var PaymentElement2 = ({
 };
 var EmptyPaymentElement = () => {
   const theme = nt();
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Text, { $font: theme.typography.text.fontFamily, $size: 16, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Flex, { $flexDirection: "row", $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Flex, { $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Box, { $lineHeight: "1", $marginRight: "4px", children: t("No payment method selected") }) }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Text, { $font: theme.typography.text.fontFamily, $size: 16, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Flex, { $flexDirection: "row", $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Flex, { $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Box, { $lineHeight: "1", $marginRight: "4px", children: t("No payment method added yet") }) }) }) });
 };
 var getPaymentMethodData = ({
   accountLast4,
@@ -23383,7 +23483,7 @@ var registerWrapper = function registerWrapper2(stripe, startTime) {
   }
   stripe._registerWrapper({
     name: "stripe-js",
-    version: "7.1.0",
+    version: "7.3.0",
     startTime
   });
 };
@@ -23458,7 +23558,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("7.1.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("7.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);
@@ -23523,12 +23623,7 @@ var PaymentMethodDetails = ({
   const [stripe, setStripe] = (0, import_react38.useState)(null);
   const [setupIntent, setSetupIntent] = (0, import_react38.useState)();
   const [showDifferentPaymentMethods, setShowDifferentPaymentMethods] = (0, import_react38.useState)(false);
-  const [paymentMethod, setPaymentMethod] = (0, import_react38.useState)(void 0);
-  (0, import_react38.useEffect)(() => {
-    setPaymentMethod(
-      data.subscription?.paymentMethod || data.company?.defaultPaymentMethod
-    );
-  }, [data.company?.defaultPaymentMethod, data.subscription?.paymentMethod]);
+  const [paymentMethod, setPaymentMethod] = (0, import_react38.useState)(data.subscription?.paymentMethod || data.company?.defaultPaymentMethod);
   const monthsToExpiration = (0, import_react38.useMemo)(() => {
     let expiration;
     if (typeof paymentMethod?.cardExpYear === "number" && typeof paymentMethod?.cardExpMonth === "number") {
@@ -23542,33 +23637,25 @@ var PaymentMethodDetails = ({
     }
     return expiration;
   }, [paymentMethod?.cardExpYear, paymentMethod?.cardExpMonth]);
-  (0, import_react38.useEffect)(() => {
-    if (!stripe && setupIntent?.publishableKey) {
-      setStripe(loadStripe(setupIntent.publishableKey));
-    }
-  }, [stripe, setupIntent?.publishableKey]);
   const createSetupIntent = (0, import_react38.useCallback)(async () => {
     if (!api || !data.component?.id) {
       return;
     }
     try {
       setIsLoading(true);
-      const { data: setupIntent2 } = await api.getSetupIntent({
+      const response = await api.getSetupIntent({
         componentId: data.component.id
       });
-      setSetupIntent(setupIntent2);
-      setShowPaymentForm(true);
+      setSetupIntent(response.data);
     } catch {
       setError(
         t2("Error initializing payment method change. Please try again.")
       );
     } finally {
+      setShowPaymentForm(true);
       setIsLoading(false);
     }
   }, [t2, api, data.component?.id]);
-  const dropDownDifferentPaymentMethods = (0, import_react38.useCallback)(() => {
-    setShowDifferentPaymentMethods((state) => !state);
-  }, []);
   const updatePaymentMethod = (0, import_react38.useCallback)(
     async (externalId) => {
       if (!api || !externalId) {
@@ -23645,33 +23732,43 @@ var PaymentMethodDetails = ({
     },
     [api, data, setData, t2]
   );
+  (0, import_react38.useEffect)(() => {
+    if (!stripe && setupIntent?.publishableKey) {
+      setStripe(loadStripe(setupIntent.publishableKey));
+    }
+  }, [stripe, setupIntent?.publishableKey]);
+  (0, import_react38.useEffect)(() => {
+    if (!setupIntent && (!paymentMethod || showPaymentForm)) {
+      createSetupIntent();
+    }
+  }, [setupIntent, paymentMethod, showPaymentForm, createSetupIntent]);
   return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(Flex, { $position: "relative", children: [
-    isLoading && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       Flex,
       {
         $position: "absolute",
-        $width: "100%",
-        $height: "100%",
+        $zIndex: isLoading ? 1 : 0,
         $justifyContent: "center",
         $alignItems: "center",
-        $flexGrow: 1,
-        $zIndex: 1,
-        $backgroundColor: "black",
-        $opacity: 0.5,
-        children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Loader, { $color: theme.primary, $size: "2xl" })
+        $width: "100%",
+        $height: "100%",
+        children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Loader, { $color: theme.primary, $size: "2xl", $isLoading: isLoading })
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
       Flex,
       {
+        $position: "relative",
+        $zIndex: isLoading ? 0 : 1,
         $flexDirection: "column",
-        $flexGrow: "1",
+        $flexGrow: 1,
         $gap: "1rem",
+        $overflow: "auto",
         $padding: "2rem 2.5rem 2rem 2.5rem",
+        $visibility: isLoading ? "hidden" : "visible",
         $backgroundColor: isLightBackground ? "hsla(0, 0%, 0%, 0.025)" : "hsla(0, 0%, 100%, 0.025)",
-        $overflow: "auto",
         children: [
-          showPaymentForm ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+          setupIntent && showPaymentForm ? /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
             import_react_stripe_js2.Elements,
             {
               stripe,
@@ -23700,16 +23797,32 @@ var PaymentMethodDetails = ({
                 },
                 clientSecret: setupIntent?.setupIntentClientSecret
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-                PaymentForm,
-                {
-                  onConfirm: async (paymentMethodId) => {
-                    await updatePaymentMethod(paymentMethodId);
-                    setShowPaymentForm(false);
-                    setShowDifferentPaymentMethods(false);
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                  PaymentForm,
+                  {
+                    onConfirm: async (paymentMethodId) => {
+                      await updatePaymentMethod(paymentMethodId);
+                      setShowPaymentForm(false);
+                      setShowDifferentPaymentMethods(false);
+                    }
                   }
-                }
-              )
+                ),
+                paymentMethod && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                  Text,
+                  {
+                    onClick: () => {
+                      setShowPaymentForm(false);
+                      setShowDifferentPaymentMethods(false);
+                    },
+                    $font: theme.typography.link.fontFamily,
+                    $size: theme.typography.link.fontSize,
+                    $weight: theme.typography.link.fontWeight,
+                    $color: theme.typography.link.color,
+                    children: t2("Select existing payment method")
+                  }
+                ) })
+              ]
             }
           ) : /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(Flex, { $flexDirection: "column", $gap: "2rem", children: [
             /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
@@ -23724,7 +23837,9 @@ var PaymentMethodDetails = ({
             (data.company?.paymentMethods || []).length > 0 && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
               Text,
               {
-                onClick: dropDownDifferentPaymentMethods,
+                onClick: () => {
+                  setShowDifferentPaymentMethods((prev2) => !prev2);
+                },
                 $font: theme.typography.link.fontFamily,
                 $size: theme.typography.link.fontSize,
                 $weight: theme.typography.link.fontWeight,
@@ -23747,18 +23862,20 @@ var PaymentMethodDetails = ({
                 ]
               }
             ) }),
-            showDifferentPaymentMethods && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Flex, { $flexDirection: "column", $overflowY: "hidden", $height: "10rem", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Flex, { $flexDirection: "column", $overflowY: "scroll", children: (data.company?.paymentMethods.filter(
-              (pm) => pm.id !== paymentMethod?.id
-            ) || []).map((paymentMethod2) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-              PaymentListElement,
-              {
-                paymentMethod: paymentMethod2,
-                setDefault: updatePaymentMethod,
-                handleDelete: deletePaymentMethod
-              },
-              paymentMethod2.id
-            )) }) }),
-            (!paymentMethod || showDifferentPaymentMethods) && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Button, { onClick: createSetupIntent, $size: "lg", children: t2("Add new payment method") })
+            showDifferentPaymentMethods && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(Flex, { $flexDirection: "column", $overflowY: "hidden", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Flex, { $flexDirection: "column", $overflowY: "scroll", children: (data.company?.paymentMethods.filter(
+                (pm) => pm.id !== paymentMethod?.id
+              ) || []).map((paymentMethod2) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                PaymentListElement,
+                {
+                  paymentMethod: paymentMethod2,
+                  setDefault: updatePaymentMethod,
+                  handleDelete: deletePaymentMethod
+                },
+                paymentMethod2.id
+              )) }),
+              (!setupIntent || !paymentMethod || showDifferentPaymentMethods) && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Button, { onClick: createSetupIntent, $size: "lg", children: t2("Add new payment method") })
+            ] })
           ] }),
           !isLoading && error && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
             Text,
@@ -24637,7 +24754,7 @@ var PricingTable = (0, import_react40.forwardRef)(({ children, className, ...res
                                       "Current usage exceeds the limit of this plan."
                                     )
                                   }
-                                ) : plan.companyCanTrial ? t2("Trial plan", { days: plan.trialDays }) : t2("Choose plan")
+                                ) : plan.companyCanTrial ? t2("Start X day trial", { days: plan.trialDays }) : t2("Choose plan")
                               }
                             )
                           ]