@schematichq/schematic-components 0.7.13 → 0.7.14

package/dist/schematic-components.esm.js

@@ -6692,9 +6692,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;
@@ -8113,13 +8113,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) {
@@ -8146,7 +8147,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);
     }
@@ -8324,7 +8328,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) {
@@ -9605,7 +9609,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) {
@@ -9819,12 +9823,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;
@@ -14681,6 +14686,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"],
@@ -15221,12 +15228,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"]
   };
 }
 
@@ -16373,6 +16380,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.",
@@ -16394,13 +16402,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",
@@ -17095,7 +17105,7 @@ var EmbedProvider = ({
   useEffect2(() => {
     if (accessToken) {
       const { headers = {} } = apiConfig ?? {};
-      headers["X-Schematic-Components-Version"] = "0.7.13";
+      headers["X-Schematic-Components-Version"] = "0.7.14";
       headers["X-Schematic-Session-ID"] = sessionIdRef.current;
       const config = new Configuration({
         ...apiConfig,
@@ -17539,29 +17549,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;
             `;
       }
     }}
@@ -18466,7 +18470,7 @@ import {
   useCallback as useCallback8,
   useEffect as useEffect4,
   useLayoutEffect as useLayoutEffect4,
-  useMemo as useMemo5,
+  useMemo as useMemo6,
   useRef as useRef5,
   useState as useState8
 } from "react";
@@ -18589,7 +18593,8 @@ var StageButton = ({
   isLoading,
   requiresPayment,
   setCheckoutStage,
-  trialPaymentMethodRequired
+  trialPaymentMethodRequired,
+  willTrial
 }) => {
   const { t: t2 } = useTranslation();
   const NoPaymentRequired = () => {
@@ -18605,42 +18610,14 @@ var StageButton = ({
     );
   };
   if (checkoutStage === "plan") {
-    if (canTrial) {
-      if (trialPaymentMethodRequired) {
-        return /* @__PURE__ */ jsx12(
-          Button,
-          {
-            type: "button",
-            disabled: !hasAddOns && !canUpdateSubscription,
-            onClick: async () => {
-              setCheckoutStage?.("checkout");
-            },
-            $isLoading: isLoading,
-            children: /* @__PURE__ */ jsxs7(
-              Flex,
-              {
-                $gap: "0.5rem",
-                $justifyContent: "center",
-                $alignItems: "center",
-                $padding: "0 1rem",
-                children: [
-                  t2("Next"),
-                  ": ",
-                  t2("Checkout"),
-                  /* @__PURE__ */ jsx12(Icon2, { name: "arrow-right" })
-                ]
-              }
-            )
-          }
-        );
-      }
+    if (canTrial && trialPaymentMethodRequired) {
       return /* @__PURE__ */ jsx12(
         Button,
         {
           type: "button",
-          disabled: !hasUnstagedChanges || !canUpdateSubscription,
+          disabled: !hasAddOns && !canUpdateSubscription,
           onClick: async () => {
-            checkout();
+            setCheckoutStage?.("checkout");
           },
           $isLoading: isLoading,
           children: /* @__PURE__ */ jsxs7(
@@ -18651,7 +18628,9 @@ var StageButton = ({
               $alignItems: "center",
               $padding: "0 1rem",
               children: [
-                t2("Subscribe and close"),
+                t2("Next"),
+                ": ",
+                t2("Checkout"),
                 /* @__PURE__ */ jsx12(Icon2, { name: "arrow-right" })
               ]
             }
@@ -18660,7 +18639,7 @@ var StageButton = ({
       );
     }
     if (!requiresPayment && !checkoutStages?.some(
-      (stage) => stage.id === "addons" || stage.id === "usage"
+      (stage) => stage.id === "usage" || stage.id === "addons"
     )) {
       return /* @__PURE__ */ jsx12(NoPaymentRequired, {});
     }
@@ -18686,7 +18665,7 @@ var StageButton = ({
     );
   }
   if (checkoutStage === "usage") {
-    if (!requiresPayment) {
+    if (!requiresPayment && !checkoutStages?.some((stage) => stage.id === "addons")) {
       return /* @__PURE__ */ jsx12(NoPaymentRequired, {});
     }
     return /* @__PURE__ */ jsx12(
@@ -18758,7 +18737,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")
       }
     );
   }
@@ -18784,7 +18763,8 @@ var Sidebar = ({
   setError,
   setIsLoading,
   updatePromoCode,
-  showHeader = true
+  showHeader = true,
+  willTrial = false
 }) => {
   const { t: t2 } = useTranslation();
   const theme = nt();
@@ -18914,10 +18894,10 @@ var Sidebar = ({
           ...promoCode && { promoCode }
         }
       });
-      dispatchPlanChangedEvent(response.data);
       setIsLoading(false);
       setLayout("portal");
-      hydrate();
+      await hydrate();
+      dispatchPlanChangedEvent(response.data);
     } catch {
       setLayout("checkout");
       setError(
@@ -19015,6 +18995,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"
@@ -19024,10 +19005,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) {
@@ -19103,7 +19084,7 @@ var Sidebar = ({
                 }
               ) }),
               /* @__PURE__ */ jsxs8(Flex, { $flexDirection: "column", $gap: "0.5rem", $marginBottom: "1.5rem", children: [
-                data.company?.plan && /* @__PURE__ */ jsxs8(
+                currentPlan && /* @__PURE__ */ jsxs8(
                   Flex,
                   {
                     $justifyContent: "space-between",
@@ -19122,10 +19103,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__ */ jsx13(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsxs8(
+                      typeof currentPlan.planPrice === "number" && /* @__PURE__ */ jsx13(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsxs8(
                         Text,
                         {
                           $font: theme.typography.text.fontFamily,
@@ -19134,14 +19115,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__ */ jsxs8("sub", { children: [
                               "/",
-                              shortenPeriod(
-                                data.company.plan.planPeriod || planPeriod
-                              )
+                              shortenPeriod(currentPlan.planPeriod || planPeriod)
                             ] })
                           ]
                         }
@@ -19907,7 +19886,7 @@ var Sidebar = ({
               layout === "checkout" && /* @__PURE__ */ jsx13(
                 StageButton,
                 {
-                  canTrial: selectedPlan?.companyCanTrial === true,
+                  canTrial: isTrialable,
                   canCheckout,
                   canUpdateSubscription,
                   checkout,
@@ -19919,7 +19898,8 @@ var Sidebar = ({
                   isLoading,
                   requiresPayment,
                   setCheckoutStage,
-                  trialPaymentMethodRequired: data.trialPaymentMethodRequired === true
+                  trialPaymentMethodRequired: data.trialPaymentMethodRequired === true,
+                  willTrial
                 }
               ),
               layout === "unsubscribe" && /* @__PURE__ */ jsx13(Button, { onClick: unsubscribe, $isLoading: isLoading, children: t2("Cancel subscription") }),
@@ -20229,13 +20209,11 @@ var Navigation = ({
             }
           ),
           /* @__PURE__ */ jsxs11(
-            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",
@@ -20275,7 +20253,7 @@ var Navigation = ({
 };
 
 // src/components/shared/checkout-dialog/Plan.tsx
-import { useState as useState7 } from "react";
+import { useMemo as useMemo5, useState as useState7 } from "react";
 
 // src/components/elements/pricing-table/styles.ts
 var ButtonLink = dt.a`
@@ -20288,15 +20266,162 @@ var ButtonLink = dt.a`
 
 // src/components/shared/checkout-dialog/Plan.tsx
 import { Fragment as Fragment8, jsx as jsx17, jsxs as jsxs12 } from "react/jsx-runtime";
+var Selected = ({ isCurrent = false, isTrial = false }) => {
+  const { t: t2 } = useTranslation();
+  const theme = nt();
+  const text = useMemo5(() => {
+    if (isCurrent) {
+      return isTrial ? t2("Trial in progress") : t2("Current plan");
+    }
+    return isTrial ? t2("Trial selected") : t2("Plan selected");
+  }, [t2, isCurrent, isTrial]);
+  return /* @__PURE__ */ jsxs12(
+    Flex,
+    {
+      $justifyContent: "center",
+      $alignItems: "center",
+      $gap: "0.25rem",
+      $padding: "0.625rem 0",
+      children: [
+        /* @__PURE__ */ jsx17(
+          Icon2,
+          {
+            name: "check-rounded",
+            style: {
+              fontSize: 20,
+              lineHeight: 1,
+              color: theme.primary
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx17(
+          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__ */ jsxs12(Flex, { $flexDirection: "column", $gap: "1.5rem", children: [
+      data.subscription?.status !== "trialing" && /* @__PURE__ */ jsx17(Fragment8, { children: isSelected && willTrial ? /* @__PURE__ */ jsx17(
+        Selected,
+        {
+          isCurrent,
+          isTrial: plan.companyCanTrial && willTrial
+        }
+      ) : /* @__PURE__ */ jsx17(
+        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__ */ jsx17(
+            ButtonLink,
+            {
+              href: plan.customPlanConfig?.ctaWebSite ?? "#",
+              target: "_blank",
+              children: plan.customPlanConfig?.ctaText ?? t2("Talk to support")
+            }
+          ) : !plan.valid ? /* @__PURE__ */ jsx17(
+            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__ */ jsx17(Fragment8, { children: isSelected && (!willTrial || data.subscription?.status === "trialing") ? /* @__PURE__ */ jsx17(Selected, { isCurrent }) : /* @__PURE__ */ jsx17(
+        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__ */ jsx17(
+            Tooltip,
+            {
+              trigger: t2("Over usage limit"),
+              content: t2("Current usage exceeds the limit of this plan.")
+            }
+          ) : t2("Choose plan")
+        }
+      ) })
+    ] });
+  }
+  return isSelected ? /* @__PURE__ */ jsx17(Selected, { isCurrent }) : /* @__PURE__ */ jsx17(
+    Button,
+    {
+      type: "button",
+      disabled: (isLoading || !plan.valid) && !plan.custom,
+      ...!plan.custom && {
+        onClick: () => {
+          onSelect({ plan });
+        }
+      },
+      $size: "sm",
+      $color: "primary",
+      $variant: "filled",
+      children: plan.custom ? /* @__PURE__ */ jsx17(
+        ButtonLink,
+        {
+          href: plan.customPlanConfig?.ctaWebSite ?? "#",
+          target: "_blank",
+          children: plan.customPlanConfig?.ctaText ?? t2("Talk to support")
+        }
+      ) : !plan.valid ? /* @__PURE__ */ jsx17(
+        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] = useState7(
     () => plans.reduce(
@@ -20310,7 +20435,6 @@ var Plan = ({
       {}
     )
   );
-  const cardPadding = theme.card.padding / TEXT_BASE_SIZE;
   const handleToggleShowAll = (id) => {
     setEntitlementCounts((prev2) => {
       const count = { ...prev2[id] };
@@ -20323,6 +20447,7 @@ var Plan = ({
       };
     });
   };
+  const cardPadding = theme.card.padding / TEXT_BASE_SIZE;
   return /* @__PURE__ */ jsx17(Fragment8, { children: /* @__PURE__ */ jsx17(
     Box,
     {
@@ -20431,7 +20556,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")
                           }
                         )
                       }
@@ -20646,70 +20771,14 @@ var Plan = ({
                         }
                       )
                     ] }),
-                    plan.id === selectedPlan?.id ? /* @__PURE__ */ jsxs12(
-                      Flex,
+                    /* @__PURE__ */ jsx17(
+                      PlanButtonGroup,
                       {
-                        $justifyContent: "center",
-                        $alignItems: "center",
-                        $gap: "0.25rem",
-                        $padding: "0.625rem 0",
-                        children: [
-                          /* @__PURE__ */ jsx17(
-                            Icon2,
-                            {
-                              name: "check-rounded",
-                              style: {
-                                fontSize: 20,
-                                lineHeight: 1,
-                                color: theme.primary
-                              }
-                            }
-                          ),
-                          /* @__PURE__ */ jsx17(
-                            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__ */ jsx17(
-                      Button,
-                      {
-                        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__ */ jsx17(
-                          ButtonLink,
-                          {
-                            href: plan.customPlanConfig?.ctaWebSite ?? "#",
-                            target: "_blank",
-                            children: plan.customPlanConfig?.ctaText ?? t2("Talk to support")
-                          }
-                        ) : !plan.valid ? /* @__PURE__ */ jsx17(
-                          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
                       }
                     )
                   ]
@@ -20924,7 +20993,6 @@ var CheckoutDialog = ({ top = 0 }) => {
   );
   const [isLoading, setIsLoading] = useState8(false);
   const [error, setError] = useState8();
-  const [promoCode, setPromoCode] = useState8();
   const [planPeriod, setPlanPeriod] = useState8(
     selected.period || data.company?.plan?.planPeriod || "month"
   );
@@ -20938,6 +21006,9 @@ var CheckoutDialog = ({ top = 0 }) => {
       (plan) => selected.planId ? plan.id === selected.planId : plan.current
     )
   );
+  const [willTrial, setWillTrial] = useState8(
+    data.subscription?.status !== "trialing" && !data.trialPaymentMethodRequired
+  );
   const [addOns, setAddOns] = useState8(
     () => availableAddOns.map((addOn) => ({
       ...addOn,
@@ -20946,7 +21017,8 @@ var CheckoutDialog = ({ top = 0 }) => {
       )
     }))
   );
-  const currentEntitlements = useMemo5(() => {
+  const hasActiveAddOns = addOns.some((addOn) => addOn.isSelected);
+  const currentEntitlements = useMemo6(() => {
     return data.featureUsage?.features || [];
   }, [data.featureUsage?.features]);
   const [usageBasedEntitlements, setUsageBasedEntitlements] = useState8(
@@ -20958,18 +21030,21 @@ var CheckoutDialog = ({ top = 0 }) => {
       []
     )
   );
-  const payInAdvanceEntitlements = useMemo5(
+  const payInAdvanceEntitlements = useMemo6(
     () => usageBasedEntitlements.filter(
       (entitlement) => entitlement.priceBehavior === "pay_in_advance"
     ),
     [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 checkoutStages = useMemo5(() => {
+  const [promoCode, setPromoCode] = useState8();
+  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 = useMemo6(() => {
     const stages = [
       {
         id: "plan",
@@ -20978,13 +21053,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"),
@@ -21002,9 +21080,9 @@ var CheckoutDialog = ({ top = 0 }) => {
     return stages;
   }, [
     t2,
+    willTrial,
     payInAdvanceEntitlements,
     availableAddOns,
-    selectedPlan?.companyCanTrial,
     requiresPayment
   ]);
   const [checkoutStage, setCheckoutStage] = useState8(() => {
@@ -21109,6 +21187,8 @@ var CheckoutDialog = ({ top = 0 }) => {
         setSelectedPlan(plan);
         setUsageBasedEntitlements(entitlements);
       }
+      const shouldTrial = updates.shouldTrial ?? false;
+      setWillTrial(shouldTrial && !data.trialPaymentMethodRequired);
       previewCheckout({
         period,
         plan: updates.plan,
@@ -21117,7 +21197,13 @@ var CheckoutDialog = ({ top = 0 }) => {
         )
       });
     },
-    [planPeriod, selectedPlan, currentEntitlements, previewCheckout]
+    [
+      data.trialPaymentMethodRequired,
+      planPeriod,
+      selectedPlan,
+      currentEntitlements,
+      previewCheckout
+    ]
   );
   const changePlanPeriod = useCallback8(
     (period) => {
@@ -21314,7 +21400,8 @@ var CheckoutDialog = ({ top = 0 }) => {
                         period: planPeriod,
                         plans: availablePlans,
                         selectedPlan,
-                        selectPlan
+                        selectPlan,
+                        willTrial
                       }
                     ),
                     checkoutStage === "usage" && /* @__PURE__ */ jsx19(
@@ -21366,7 +21453,8 @@ var CheckoutDialog = ({ top = 0 }) => {
                   setCheckoutStage: (stage) => setCheckoutStage(stage),
                   setError: (msg) => setError(msg),
                   setIsLoading,
-                  updatePromoCode: (code) => updatePromoCode(code)
+                  updatePromoCode: (code) => updatePromoCode(code),
+                  willTrial
                 }
               )
             ]
@@ -21495,7 +21583,7 @@ var PaymentForm = ({ onConfirm }) => {
 };
 
 // src/components/shared/period-toggle/PeriodToggle.tsx
-import { useLayoutEffect as useLayoutEffect5, useMemo as useMemo6, useState as useState10 } from "react";
+import { useLayoutEffect as useLayoutEffect5, useMemo as useMemo7, useState as useState10 } from "react";
 import { jsx as jsx22 } from "react/jsx-runtime";
 var PeriodToggle = ({
   options: options2,
@@ -21508,7 +21596,7 @@ var PeriodToggle = ({
   const theme = nt();
   const isLightBackground = useIsLightBackground();
   const [tooltipZIndex, setTooltipZIndex] = useState10(1);
-  const savingsPercentage = useMemo6(() => {
+  const savingsPercentage = useMemo7(() => {
     if (selectedPlan) {
       const monthlyBillingPrice = getBillingPrice(selectedPlan?.monthlyPrice);
       const yearlyBillingPrice = getBillingPrice(selectedPlan?.yearlyPrice);
@@ -21608,7 +21696,7 @@ var PeriodToggle = ({
 };
 
 // src/components/shared/unsubscribe-dialog/UnsubscribeDialog.tsx
-import { useCallback as useCallback9, useMemo as useMemo7, useRef as useRef6, useState as useState11 } from "react";
+import { useCallback as useCallback9, useMemo as useMemo8, useRef as useRef6, useState as useState11 } from "react";
 import { jsx as jsx23, jsxs as jsxs17 } from "react/jsx-runtime";
 var UnsubscribeDialog = ({ top = 0 }) => {
   const { t: t2 } = useTranslation();
@@ -21617,12 +21705,12 @@ var UnsubscribeDialog = ({ top = 0 }) => {
   const contentRef = useRef6(null);
   const [error, setError] = useState11();
   const [isLoading, setIsLoading] = useState11(false);
-  const planPeriod = useMemo7(
+  const planPeriod = useMemo8(
     () => data.company?.plan?.planPeriod ?? "month",
     [data.company?.plan?.planPeriod]
   );
   const { plans: availablePlans, addOns: availableAddOns } = useAvailablePlans(planPeriod);
-  const selectedPlan = useMemo7(
+  const selectedPlan = useMemo8(
     () => availablePlans.find(
       (plan) => plan.id === data.company?.plan?.id && data.company?.plan.planPeriod === planPeriod
     ),
@@ -21633,7 +21721,7 @@ var UnsubscribeDialog = ({ top = 0 }) => {
     createActiveUsageBasedEntitlementsReducer(currentEntitlements, planPeriod),
     []
   );
-  const addOns = useMemo7(
+  const addOns = useMemo8(
     () => availableAddOns.map((available) => ({
       ...available,
       isSelected: data.company?.addOns.some((current) => available.id === current.id) ?? false
@@ -22070,10 +22158,10 @@ var ButtonElement = forwardRef6(({ children, className, ...rest }, ref) => {
 ButtonElement.displayName = "Button";
 
 // src/components/elements/included-features/IncludedFeatures.tsx
-import { forwardRef as forwardRef7, useMemo as useMemo9, useRef as useRef7, useState as useState13 } from "react";
+import { forwardRef as forwardRef7, useMemo as useMemo10, useRef as useRef7, useState as useState13 } from "react";
 
 // src/components/elements/included-features/Details.tsx
-import { Fragment as Fragment11, useMemo as useMemo8 } from "react";
+import { Fragment as Fragment11, useMemo as useMemo9 } from "react";
 import { Fragment as Fragment12, jsx as jsx28, jsxs as jsxs21 } from "react/jsx-runtime";
 var Details = ({
   shouldWrapChildren,
@@ -22098,7 +22186,7 @@ var Details = ({
     priceTier,
     currency,
     packageSize = 1
-  } = useMemo8(() => {
+  } = useMemo9(() => {
     const {
       price: entitlementPrice,
       priceDecimal: entitlementPriceDecimal,
@@ -22120,7 +22208,7 @@ var Details = ({
     monthlyUsageBasedPrice,
     yearlyUsageBasedPrice
   ]);
-  const text = useMemo8(() => {
+  const text = useMemo9(() => {
     if (!feature) {
       return;
     }
@@ -22171,7 +22259,7 @@ var Details = ({
     packageSize,
     softLimit
   ]);
-  const usageText = useMemo8(() => {
+  const usageText = useMemo9(() => {
     if (!feature) {
       return;
     }
@@ -22348,7 +22436,7 @@ var IncludedFeatures = forwardRef7(({ className, ...rest }, ref) => {
   const shouldWrapChildren = useWrapChildren(elements.current);
   const isLightBackground = useIsLightBackground();
   const [showCount, setShowCount] = useState13(VISIBLE_ENTITLEMENT_COUNT);
-  const featureUsage = useMemo9(() => {
+  const featureUsage = useMemo10(() => {
     const orderedFeatureUsage = props.visibleFeatures?.reduce(
       (acc, id) => {
         const mappedFeatureUsage = data.featureUsage?.features.find(
@@ -22639,7 +22727,7 @@ var Invoices = forwardRef8(({ className, data, ...rest }, ref) => {
 Invoices.displayName = "Invoices";
 
 // src/components/elements/metered-features/MeteredFeatures.tsx
-import { forwardRef as forwardRef9, useMemo as useMemo10, useRef as useRef8 } from "react";
+import { forwardRef as forwardRef9, useMemo as useMemo11, useRef as useRef8 } from "react";
 
 // src/components/elements/metered-features/styles.ts
 var Container3 = dt.div`
@@ -22694,7 +22782,7 @@ var MeteredFeatures = forwardRef9(({ className, ...rest }, ref) => {
   const theme = nt();
   const { data, setLayout, setSelected } = useEmbed();
   const isLightBackground = useIsLightBackground();
-  const featureUsage = useMemo10(() => {
+  const featureUsage = useMemo11(() => {
     const orderedFeatureUsage = props.visibleFeatures?.reduce(
       (acc, id) => {
         const mappedFeatureUsage = data.featureUsage?.features.find(
@@ -22991,10 +23079,10 @@ var MeteredFeatures = forwardRef9(({ className, ...rest }, ref) => {
 MeteredFeatures.displayName = "MeteredFeatures";
 
 // src/components/elements/payment-method/PaymentMethod.tsx
-import { forwardRef as forwardRef10, useMemo as useMemo12 } from "react";
+import { forwardRef as forwardRef10, useMemo as useMemo13 } from "react";
 
 // src/components/elements/payment-method/PaymentMethodElement.tsx
-import { useMemo as useMemo11 } from "react";
+import { useMemo as useMemo12 } from "react";
 import { jsx as jsx32, jsxs as jsxs25 } from "react/jsx-runtime";
 var PaymentElement2 = ({
   iconName,
@@ -23169,7 +23257,7 @@ var PaymentListElement = ({
   const isLightBackground = useIsLightBackground();
   const { iconName, iconTitle, label, paymentLast4 } = getPaymentMethodData(paymentMethod);
   const iconStyles = getIconStyles({ size: "lg", theme });
-  const expirationDate = useMemo11(() => {
+  const expirationDate = useMemo12(() => {
     const { cardExpMonth, cardExpYear } = paymentMethod;
     if (!cardExpMonth && !cardExpYear) {
       return "";
@@ -23284,10 +23372,10 @@ var resolveDesignProps5 = (props) => {
 var PaymentMethod = forwardRef10(({ children, className, portal, allowEdit = true, ...rest }, ref) => {
   const props = resolveDesignProps5(rest);
   const { data, setLayout } = useEmbed();
-  const paymentMethod = useMemo12(() => {
+  const paymentMethod = useMemo13(() => {
     return data.subscription?.paymentMethod || data.company?.defaultPaymentMethod;
   }, [data.company?.defaultPaymentMethod, data.subscription?.paymentMethod]);
-  const monthsToExpiration = useMemo12(() => {
+  const monthsToExpiration = useMemo13(() => {
     let expiration;
     if (typeof paymentMethod?.cardExpYear === "number" && typeof paymentMethod?.cardExpMonth === "number") {
       const today = /* @__PURE__ */ new Date();
@@ -23356,7 +23444,7 @@ var registerWrapper = function registerWrapper2(stripe, startTime) {
   }
   stripe._registerWrapper({
     name: "stripe-js",
-    version: "7.2.0",
+    version: "7.3.0",
     startTime
   });
 };
@@ -23431,7 +23519,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.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("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);
@@ -23468,7 +23556,7 @@ var loadStripe = function loadStripe2() {
 };
 
 // src/components/elements/payment-method/PaymentMethodDetails.tsx
-import { useCallback as useCallback10, useEffect as useEffect6, useMemo as useMemo13, useState as useState15 } from "react";
+import { useCallback as useCallback10, useEffect as useEffect6, useMemo as useMemo14, useState as useState15 } from "react";
 import { jsx as jsx34, jsxs as jsxs26 } from "react/jsx-runtime";
 var resolveDesignProps6 = () => {
   return {
@@ -23497,7 +23585,7 @@ var PaymentMethodDetails = ({
   const [setupIntent, setSetupIntent] = useState15();
   const [showDifferentPaymentMethods, setShowDifferentPaymentMethods] = useState15(false);
   const [paymentMethod, setPaymentMethod] = useState15(data.subscription?.paymentMethod || data.company?.defaultPaymentMethod);
-  const monthsToExpiration = useMemo13(() => {
+  const monthsToExpiration = useMemo14(() => {
     let expiration;
     if (typeof paymentMethod?.cardExpYear === "number" && typeof paymentMethod?.cardExpMonth === "number") {
       const today = /* @__PURE__ */ new Date();
@@ -23767,7 +23855,7 @@ var PaymentMethodDetails = ({
 };
 
 // src/components/elements/plan-manager/PlanManager.tsx
-import { forwardRef as forwardRef11, useMemo as useMemo14 } from "react";
+import { forwardRef as forwardRef11, useMemo as useMemo15 } from "react";
 import { Fragment as Fragment14, jsx as jsx35, jsxs as jsxs27 } from "react/jsx-runtime";
 var resolveDesignProps7 = (props) => {
   return {
@@ -23823,7 +23911,7 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
     []
   );
   const billingSubscription = data.company?.billingSubscription;
-  const trialEndDays = useMemo14(() => {
+  const trialEndDays = useMemo15(() => {
     const trialEnd = billingSubscription?.trialEnd;
     const trialEndDate = trialEnd ? new Date(trialEnd * 1e3) : /* @__PURE__ */ new Date();
     const todayDate = /* @__PURE__ */ new Date();
@@ -24627,7 +24715,7 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
                                       "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")
                               }
                             )
                           ]
@@ -24961,7 +25049,7 @@ var UnsubscribeButton = forwardRef14(({ children, className, ...rest }, ref) =>
 UnsubscribeButton.displayName = "UnsubscribeButton";
 
 // src/components/elements/upcoming-bill/UpcomingBill.tsx
-import { forwardRef as forwardRef15, useMemo as useMemo15 } from "react";
+import { forwardRef as forwardRef15, useMemo as useMemo16 } from "react";
 import { jsx as jsx39, jsxs as jsxs29 } from "react/jsx-runtime";
 function resolveDesignProps11(props) {
   return {
@@ -24987,7 +25075,7 @@ var UpcomingBill = forwardRef15(({ className, ...rest }, ref) => {
   const theme = nt();
   const { data } = useEmbed();
   const isLightBackground = useIsLightBackground();
-  const { upcomingInvoice, discounts } = useMemo15(() => {
+  const { upcomingInvoice, discounts } = useMemo16(() => {
     const discounts2 = (data.subscription?.discounts || []).map((discount) => ({
       amountOff: discount.amountOff,
       couponId: discount.couponId,