@schematichq/schematic-react 0.2.0-rc.8 → 0.2.0-rc.9

package/dist/schematic-react.esm.js

@@ -7836,6 +7836,35 @@ function HydrateComponentResponseFromJSONTyped(json, ignoreDiscriminator) {
   };
 }
 
+// src/api/models/PreviewSubscriptionChangeResponseData.ts
+function PreviewSubscriptionChangeResponseDataFromJSON(json) {
+  return PreviewSubscriptionChangeResponseDataFromJSONTyped(json, false);
+}
+function PreviewSubscriptionChangeResponseDataFromJSONTyped(json, ignoreDiscriminator) {
+  if (json == null) {
+    return json;
+  }
+  return {
+    dueNow: json["due_now"],
+    newCharges: json["new_charges"],
+    proration: json["proration"]
+  };
+}
+
+// src/api/models/PreviewCheckoutResponse.ts
+function PreviewCheckoutResponseFromJSON(json) {
+  return PreviewCheckoutResponseFromJSONTyped(json, false);
+}
+function PreviewCheckoutResponseFromJSONTyped(json, ignoreDiscriminator) {
+  if (json == null) {
+    return json;
+  }
+  return {
+    data: PreviewSubscriptionChangeResponseDataFromJSON(json["data"]),
+    params: json["params"]
+  };
+}
+
 // src/api/apis/CheckoutApi.ts
 var CheckoutApi = class extends BaseAPI {
   /**
@@ -7924,6 +7953,51 @@ var CheckoutApi = class extends BaseAPI {
     );
     return await response.value();
   }
+  /**
+   * Preview checkout
+   */
+  async previewCheckoutRaw(requestParameters, initOverrides) {
+    if (requestParameters["changeSubscriptionRequestBody"] == null) {
+      throw new RequiredError(
+        "changeSubscriptionRequestBody",
+        'Required parameter "changeSubscriptionRequestBody" was null or undefined when calling previewCheckout().'
+      );
+    }
+    const queryParameters = {};
+    const headerParameters = {};
+    headerParameters["Content-Type"] = "application/json";
+    if (this.configuration && this.configuration.apiKey) {
+      headerParameters["X-Schematic-Api-Key"] = await this.configuration.apiKey(
+        "X-Schematic-Api-Key"
+      );
+    }
+    const response = await this.request(
+      {
+        path: `/checkout/preview`,
+        method: "POST",
+        headers: headerParameters,
+        query: queryParameters,
+        body: ChangeSubscriptionRequestBodyToJSON(
+          requestParameters["changeSubscriptionRequestBody"]
+        )
+      },
+      initOverrides
+    );
+    return new JSONApiResponse(
+      response,
+      (jsonValue) => PreviewCheckoutResponseFromJSON(jsonValue)
+    );
+  }
+  /**
+   * Preview checkout
+   */
+  async previewCheckout(requestParameters, initOverrides) {
+    const response = await this.previewCheckoutRaw(
+      requestParameters,
+      initOverrides
+    );
+    return await response.value();
+  }
 };
 
 // src/context/embed.tsx
@@ -9668,11 +9742,19 @@ function toPrettyDate(date) {
     year: "numeric"
   }).format(new Date(date));
 }
+function getMonthName(date) {
+  return new Intl.DateTimeFormat("en-US", {
+    month: "long"
+  }).format(new Date(date));
+}
 
 // src/utils/string.ts
 function camelToHyphen(str) {
   return str.replace(/([a-z][A-Z])/g, (g2) => `${g2[0]}-${g2[1].toLowerCase()}`);
 }
+function formatNumber(num) {
+  return new Intl.NumberFormat("en-US").format(num);
+}
 function formatCurrency(amount) {
   try {
     const dollars = amount / 100;
@@ -9701,6 +9783,18 @@ function formatCurrency(amount) {
     }).format(amount / 100);
   }
 }
+function formatOrdinal(n) {
+  const enOrdinalRules = new Intl.PluralRules("en-US", { type: "ordinal" });
+  const suffixes = /* @__PURE__ */ new Map([
+    ["one", "st"],
+    ["two", "nd"],
+    ["few", "rd"],
+    ["other", "th"]
+  ]);
+  const rule = enOrdinalRules.select(n);
+  const suffix = suffixes.get(rule);
+  return `${n}${suffix}`;
+}
 
 // src/const/index.ts
 var TEXT_BASE_SIZE = 16;
@@ -10156,7 +10250,7 @@ var ProgressBar = ({
 };
 
 // src/components/elements/plan-manager/CheckoutDialog.tsx
-import { useMemo as useMemo6, useState as useState3 } from "react";
+import { useCallback as useCallback5, useMemo as useMemo6, useState as useState3 } from "react";
 var import_pluralize = __toESM(require_pluralize());
 
 // src/components/elements/payment-method/PaymentMethod.tsx
@@ -10665,8 +10759,8 @@ var FeatureName = ({
     if (entitlement.metricPeriod) {
       period = {
         current_day: "day",
-        current_month: "mo",
-        current_year: "yr"
+        current_month: "month",
+        current_year: "year"
       }[entitlement.metricPeriod];
     }
     return /* @__PURE__ */ jsx11(Flex, { $alignItems: "center", children: /* @__PURE__ */ jsxs6(
@@ -10677,12 +10771,8 @@ var FeatureName = ({
         $weight: theme.typography.text.fontWeight,
         $color: theme.typography.text.color,
         children: [
-          typeof entitlement.valueNumeric === "number" ? (0, import_pluralize.default)(
-            entitlement.feature.name,
-            entitlement.valueNumeric,
-            true
-          ) : `Unlimited ${(0, import_pluralize.default)(entitlement.feature.name)}`,
-          period && `/${period}`
+          typeof entitlement.valueNumeric === "number" ? `${formatNumber(entitlement.valueNumeric)} ${(0, import_pluralize.default)(entitlement.feature.name, entitlement.valueNumeric)}` : `Unlimited ${(0, import_pluralize.default)(entitlement.feature.name)}`,
+          period && ` per ${period}`
         ]
       }
     ) });
@@ -10708,6 +10798,7 @@ var CheckoutDialog = () => {
     () => data.company?.plan?.planPeriod || "month"
   );
   const [selectedPlan, setSelectedPlan] = useState3();
+  const [charges, setCharges] = useState3();
   const [paymentMethodId, setPaymentMethodId] = useState3();
   const [isLoading, setIsLoading] = useState3(false);
   const [error, setError] = useState3();
@@ -10750,9 +10841,54 @@ var CheckoutDialog = () => {
     }
     return 0;
   }, [selectedPlan]);
+  const subscriptionPrice = useMemo6(() => {
+    if (!selectedPlan || !selectedPlan.monthlyPrice || !selectedPlan.yearlyPrice) {
+      return;
+    }
+    return formatCurrency(
+      (planPeriod === "month" ? selectedPlan.monthlyPrice : selectedPlan.yearlyPrice)?.price
+    );
+  }, [selectedPlan, planPeriod]);
   const isLightBackground = useMemo6(() => {
     return hexToHSL(theme.card.background).l > 50;
   }, [theme.card.background]);
+  const selectPlan = useCallback5(
+    async (plan, newPeriod) => {
+      setSelectedPlan(plan);
+      setCharges(void 0);
+      const period = newPeriod || planPeriod;
+      const priceId = (period === "month" ? plan?.monthlyPrice : plan?.yearlyPrice)?.id;
+      if (!priceId || !api) {
+        return;
+      }
+      try {
+        setIsLoading(true);
+        const { data: data2 } = await api.previewCheckout({
+          changeSubscriptionRequestBody: {
+            newPlanId: plan.id,
+            newPriceId: priceId
+          }
+        });
+        setCharges(data2);
+      } catch {
+        setError(
+          "Error retrieving plan details. Please try again in a moment."
+        );
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [api, planPeriod]
+  );
+  const changePlanPeriod = useCallback5(
+    (period) => {
+      setPlanPeriod(period);
+      if (selectedPlan) {
+        selectPlan(selectedPlan, period);
+      }
+    },
+    [selectedPlan, selectPlan]
+  );
   const allowCheckout = api && selectedPlan && selectedPlan?.id !== currentPlan?.id && (paymentMethod && !showPaymentForm || paymentMethodId) && !isLoading;
   return /* @__PURE__ */ jsxs6(Modal, { size: "lg", children: [
     /* @__PURE__ */ jsx11(ModalHeader, { bordered: true, children: /* @__PURE__ */ jsxs6(Flex, { $gap: "1rem", children: [
@@ -10887,7 +11023,15 @@ var CheckoutDialog = () => {
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsx11(Flex, { $flexWrap: "wrap", $gap: "1rem", $flexGrow: "1", children: availablePlans?.map((plan) => {
+              /* @__PURE__ */ jsx11(Flex, { $flexWrap: "wrap", $gap: "1rem", $flexGrow: "1", children: availablePlans.sort((a2, b2) => {
+                if (planPeriod === "year" && a2.yearlyPrice && b2.yearlyPrice) {
+                  return a2.yearlyPrice?.price - b2.yearlyPrice?.price;
+                }
+                if (planPeriod === "month" && a2.monthlyPrice && b2.monthlyPrice) {
+                  return a2.monthlyPrice.price - b2.monthlyPrice.price;
+                }
+                return 0;
+              }).map((plan) => {
                 return /* @__PURE__ */ jsxs6(
                   Flex,
                   {
@@ -11029,7 +11173,7 @@ var CheckoutDialog = () => {
                               {
                                 disabled: plan.valid === false,
                                 ...plan.valid === true && {
-                                  onClick: () => setSelectedPlan(plan)
+                                  onClick: () => selectPlan(plan)
                                 },
                                 $size: "sm",
                                 $color: "primary",
@@ -11144,7 +11288,7 @@ var CheckoutDialog = () => {
                         /* @__PURE__ */ jsx11(
                           Flex,
                           {
-                            onClick: () => setPlanPeriod("month"),
+                            onClick: () => changePlanPeriod("month"),
                             $justifyContent: "center",
                             $alignItems: "center",
                             $padding: "0.25rem 0.5rem",
@@ -11168,7 +11312,7 @@ var CheckoutDialog = () => {
                         /* @__PURE__ */ jsx11(
                           Flex,
                           {
-                            onClick: () => setPlanPeriod("year"),
+                            onClick: () => changePlanPeriod("year"),
                             $justifyContent: "center",
                             $alignItems: "center",
                             $padding: "0.25rem 0.5rem",
@@ -11210,7 +11354,7 @@ var CheckoutDialog = () => {
               {
                 $flexDirection: "column",
                 $position: "relative",
-                $gap: "1rem",
+                $gap: "0.5rem",
                 $width: "100%",
                 $height: "auto",
                 $padding: "1.5rem",
@@ -11265,14 +11409,14 @@ var CheckoutDialog = () => {
                         }
                       ) })
                     ] }),
-                    selectedPlan && /* @__PURE__ */ jsxs6(Fragment, { children: [
+                    selectedPlan && /* @__PURE__ */ jsxs6(Box, { $marginBottom: "1rem", children: [
                       /* @__PURE__ */ jsx11(
                         Box,
                         {
                           $width: "100%",
                           $textAlign: "left",
                           $opacity: "50%",
-                          $marginBottom: "-0.25rem",
+                          $marginBottom: "0.25rem",
                           $marginTop: "-0.25rem",
                           children: /* @__PURE__ */ jsx11(
                             Icon2,
@@ -11314,6 +11458,51 @@ var CheckoutDialog = () => {
                         ) })
                       ] })
                     ] })
+                  ] }),
+                  charges?.proration && /* @__PURE__ */ jsxs6(Fragment, { children: [
+                    /* @__PURE__ */ jsx11(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsx11(
+                      Text,
+                      {
+                        $font: theme.typography.text.fontFamily,
+                        $size: 14,
+                        $weight: theme.typography.text.fontWeight,
+                        $color: theme.typography.text.color,
+                        children: charges?.proration && charges.proration > 0 ? "Proration" : "Credits"
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsx11(Flex, { $flexDirection: "column", $gap: "0.5rem", children: currentPlan && /* @__PURE__ */ jsxs6(
+                      Flex,
+                      {
+                        $justifyContent: "space-between",
+                        $alignItems: "center",
+                        $gap: "1rem",
+                        children: [
+                          /* @__PURE__ */ jsx11(Flex, { children: /* @__PURE__ */ jsxs6(
+                            Text,
+                            {
+                              $font: theme.typography.heading4.fontFamily,
+                              $size: theme.typography.heading4.fontSize,
+                              $weight: theme.typography.heading4.fontWeight,
+                              $color: theme.typography.heading4.color,
+                              children: [
+                                "Unused time with ",
+                                currentPlan.name
+                              ]
+                            }
+                          ) }),
+                          /* @__PURE__ */ jsx11(Flex, { children: /* @__PURE__ */ jsx11(
+                            Text,
+                            {
+                              $font: theme.typography.text.fontFamily,
+                              $size: theme.typography.text.fontSize,
+                              $weight: theme.typography.text.fontWeight,
+                              $color: theme.typography.text.color,
+                              children: formatCurrency(charges.proration)
+                            }
+                          ) })
+                        ]
+                      }
+                    ) })
                   ] })
                 ]
               }
@@ -11328,7 +11517,7 @@ var CheckoutDialog = () => {
                 $height: "auto",
                 $padding: "1.5rem",
                 children: [
-                  selectedPlan && /* @__PURE__ */ jsxs6(Flex, { $justifyContent: "space-between", children: [
+                  selectedPlan && subscriptionPrice && /* @__PURE__ */ jsxs6(Flex, { $justifyContent: "space-between", children: [
                     /* @__PURE__ */ jsx11(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsxs6(
                       Text,
                       {
@@ -11338,8 +11527,7 @@ var CheckoutDialog = () => {
                         $color: theme.typography.text.color,
                         children: [
                           planPeriod === "month" ? "Monthly" : "Yearly",
-                          " total:",
-                          " "
+                          " total:"
                         ]
                       }
                     ) }),
@@ -11351,15 +11539,35 @@ var CheckoutDialog = () => {
                         $weight: theme.typography.text.fontWeight,
                         $color: theme.typography.text.color,
                         children: [
-                          formatCurrency(
-                            (planPeriod === "month" ? selectedPlan.monthlyPrice : selectedPlan.yearlyPrice)?.price ?? 0
-                          ),
+                          subscriptionPrice,
                           "/",
                           planPeriod
                         ]
                       }
                     ) })
                   ] }),
+                  charges && /* @__PURE__ */ jsxs6(Flex, { $justifyContent: "space-between", children: [
+                    /* @__PURE__ */ jsx11(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsx11(
+                      Text,
+                      {
+                        $font: theme.typography.text.fontFamily,
+                        $size: theme.typography.text.fontSize,
+                        $weight: theme.typography.text.fontWeight,
+                        $color: theme.typography.text.color,
+                        children: "Due today:"
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsx11(Box, { children: /* @__PURE__ */ jsx11(
+                      Text,
+                      {
+                        $font: theme.typography.text.fontFamily,
+                        $size: theme.typography.text.fontSize,
+                        $weight: theme.typography.text.fontWeight,
+                        $color: theme.typography.text.color,
+                        children: formatCurrency(charges.dueNow)
+                      }
+                    ) })
+                  ] }),
                   checkoutStage === "plan" ? /* @__PURE__ */ jsx11(
                     StyledButton,
                     {
@@ -11412,24 +11620,25 @@ var CheckoutDialog = () => {
                       children: "Pay now"
                     }
                   ),
-                  /* @__PURE__ */ jsx11(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsx11(
+                  !isLoading && error && /* @__PURE__ */ jsx11(Box, { children: /* @__PURE__ */ jsx11(
                     Text,
                     {
                       $font: theme.typography.text.fontFamily,
                       $size: theme.typography.text.fontSize,
-                      $weight: theme.typography.text.fontWeight,
-                      $color: theme.typography.text.color,
-                      children: "Discounts & credits applied at checkout"
+                      $weight: 500,
+                      $color: "#DB6669",
+                      children: error
                     }
                   ) }),
-                  error && /* @__PURE__ */ jsx11(Box, { children: /* @__PURE__ */ jsx11(
+                  /* @__PURE__ */ jsx11(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsx11(
                     Text,
                     {
                       $font: theme.typography.text.fontFamily,
                       $size: theme.typography.text.fontSize,
-                      $weight: 500,
-                      $color: "#DB6669",
-                      children: error
+                      $weight: theme.typography.text.fontWeight,
+                      $color: theme.typography.text.color,
+                      children: checkoutStage === "plan" ? "Discounts & credits applied at checkout" : subscriptionPrice && `You will be billed ${subscriptionPrice} for this subscription
+                    every ${planPeriod} on the ${data.subscription?.latestInvoice?.dueDate && formatOrdinal(new Date(data.subscription.latestInvoice.dueDate).getDate())} ${planPeriod === "year" && data.subscription?.latestInvoice?.dueDate ? `of ${getMonthName(data.subscription.latestInvoice.dueDate)}` : ""} unless you unsubscribe.`
                     }
                   ) })
                 ]
@@ -11479,9 +11688,9 @@ var PlanManager = forwardRef2(({ children, className, portal, ...rest }, ref) =>
   const { currentPlan, canChangePlan } = useMemo7(() => {
     return {
       currentPlan: data.company?.plan,
-      canChangePlan: stripe !== null
+      canChangePlan: data.activePlans.length > 0 && data.stripeEmbed?.publishableKey && data.stripeEmbed?.setupIntentClientSecret && stripe !== null
     };
-  }, [data.company, stripe]);
+  }, [data.company, data.activePlans, data.stripeEmbed, stripe]);
   return /* @__PURE__ */ jsxs7("div", { ref, className, children: [
     /* @__PURE__ */ jsx12(
       Flex,
@@ -11555,9 +11764,9 @@ var PlanManager = forwardRef2(({ children, className, portal, ...rest }, ref) =>
 });
 
 // src/components/elements/included-features/IncludedFeatures.tsx
-import { forwardRef as forwardRef3, useMemo as useMemo8 } from "react";
+import { forwardRef as forwardRef3, useLayoutEffect, useMemo as useMemo8, useRef as useRef3 } from "react";
 var import_pluralize2 = __toESM(require_pluralize());
-import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
 function resolveDesignProps3(props) {
   return {
     header: {
@@ -11584,6 +11793,7 @@ var IncludedFeatures = forwardRef3(({ className, ...rest }, ref) => {
   const props = resolveDesignProps3(rest);
   const theme = nt();
   const { data } = useEmbed();
+  const elements = useRef3([]);
   const features = useMemo8(() => {
     return (data.featureUsage?.features || []).map(
       ({
@@ -11614,6 +11824,34 @@ var IncludedFeatures = forwardRef3(({ className, ...rest }, ref) => {
   const isLightBackground = useMemo8(() => {
     return hexToHSL(theme.card.background).l > 50;
   }, [theme.card.background]);
+  useLayoutEffect(() => {
+    const assignRows = (parent) => {
+      let isWrapped = true;
+      [...parent.children].forEach((el) => {
+        if (!(el instanceof HTMLElement)) {
+          return;
+        }
+        if (!el.previousElementSibling || el.offsetLeft <= el.previousElementSibling.offsetLeft) {
+          isWrapped = !isWrapped;
+        }
+        if (isWrapped) {
+          el.style.textAlign = "left";
+        } else if (el.previousElementSibling) {
+          el.style.textAlign = "right";
+        }
+      });
+    };
+    elements.current.forEach((el) => {
+      if (!el) return;
+      const observer = new ResizeObserver((entries) => {
+        entries.forEach((entry) => {
+          assignRows(entry.target);
+        });
+      });
+      observer.observe(el);
+      assignRows(el);
+    });
+  }, [elements.current.length]);
   return /* @__PURE__ */ jsxs8(Flex, { ref, className, $flexDirection: "column", $gap: "1.5rem", children: [
     props.header.isVisible && /* @__PURE__ */ jsx13(Box, { children: /* @__PURE__ */ jsx13(
       Text,
@@ -11635,6 +11873,7 @@ var IncludedFeatures = forwardRef3(({ className, ...rest }, ref) => {
           /* @__PURE__ */ jsxs8(
             Flex,
             {
+              ref: (el) => elements.current.push(el),
               $flexWrap: "wrap",
               $justifyContent: "space-between",
               $alignItems: "center",
@@ -11663,7 +11902,7 @@ var IncludedFeatures = forwardRef3(({ className, ...rest }, ref) => {
                     }
                   ) })
                 ] }),
-                allocationType === "numeric" && feature?.name && /* @__PURE__ */ jsxs8(Box, { $textAlign: "right", children: [
+                allocationType === "numeric" && feature?.name && /* @__PURE__ */ jsxs8(Box, { $textAlign: "right", $paddingLeft: "3.5rem", children: [
                   props.entitlement.isVisible && /* @__PURE__ */ jsx13(
                     Text,
                     {
@@ -11673,7 +11912,7 @@ var IncludedFeatures = forwardRef3(({ className, ...rest }, ref) => {
                       $weight: theme.typography[props.entitlement.fontStyle].fontWeight,
                       $lineHeight: 1.5,
                       $color: theme.typography[props.entitlement.fontStyle].color,
-                      children: typeof allocation === "number" ? (0, import_pluralize2.default)(feature.name, allocation, true) : `Unlimited ${(0, import_pluralize2.default)(feature.name)}`
+                      children: typeof allocation === "number" ? `${formatNumber(allocation)} ${(0, import_pluralize2.default)(feature.name, allocation)}` : `Unlimited ${(0, import_pluralize2.default)(feature.name)}`
                     }
                   ),
                   props.usage.isVisible && /* @__PURE__ */ jsx13(
@@ -11685,7 +11924,7 @@ var IncludedFeatures = forwardRef3(({ className, ...rest }, ref) => {
                       $weight: theme.typography[props.usage.fontStyle].fontWeight,
                       $lineHeight: 1.5,
                       $color: theme.typography[props.usage.fontStyle].color,
-                      children: typeof allocation === "number" ? `${usage} of ${allocation} used` : `${usage} used`
+                      children: typeof usage === "number" && /* @__PURE__ */ jsx13(Fragment2, { children: typeof allocation === "number" ? `${formatNumber(usage)} of ${formatNumber(allocation)} used` : `${formatNumber(usage)} used` })
                     }
                   )
                 ] })
@@ -11917,14 +12156,19 @@ var UpcomingBill = forwardRef5(({ className, ...rest }, ref) => {
           children: formatCurrency(upcomingInvoice.amountDue)
         }
       ) }),
-      /* @__PURE__ */ jsx15(Box, { $maxWidth: "10rem", $lineHeight: "1", $textAlign: "right", children: /* @__PURE__ */ jsx15(
+      /* @__PURE__ */ jsx15(Box, { $maxWidth: "10rem", $lineHeight: "1", $textAlign: "right", children: /* @__PURE__ */ jsxs10(
         Text,
         {
           $font: theme.typography[props.contractEndDate.fontStyle].fontFamily,
           $size: theme.typography[props.contractEndDate.fontStyle].fontSize,
           $weight: theme.typography[props.contractEndDate.fontStyle].fontWeight,
           $color: theme.typography[props.contractEndDate.fontStyle].color,
-          children: "Estimated monthly bill."
+          children: [
+            "Estimated",
+            " ",
+            upcomingInvoice.interval === "year" ? "yearly" : "monthly",
+            " bill."
+          ]
         }
       ) })
     ] })
@@ -12048,7 +12292,7 @@ var Root = forwardRef7(
 );
 
 // src/components/layout/viewport/Viewport.tsx
-import { forwardRef as forwardRef8 } from "react";
+import { forwardRef as forwardRef9 } from "react";
 
 // src/components/layout/viewport/styles.ts
 var StyledViewport = dt.div`
@@ -12060,53 +12304,131 @@ var StyledViewport = dt.div`
 `;
 
 // src/components/layout/RenderLayout.tsx
-import { useState as useState4 } from "react";
-import { useEffect as useEffect4 } from "react";
-import { jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
-var DisabledState = () => {
+import { useEffect as useEffect4, useState as useState4 } from "react";
+
+// src/components/layout/card/Card.tsx
+import { forwardRef as forwardRef8 } from "react";
+
+// src/components/layout/card/styles.ts
+var StyledCard = dt.div(
+  ({
+    theme,
+    $sectionLayout = "merged",
+    $borderRadius = 8,
+    $padding = 48,
+    $shadow = true
+  }) => {
+    return lt`
+      box-sizing: border-box;
+      font-size: ${TEXT_BASE_SIZE}px;
+
+      *,
+      *::before,
+      *::after {
+        box-sizing: inherit;
+      }
+
+      > * {
+        padding: ${$padding * 0.75 / TEXT_BASE_SIZE}rem
+          ${$padding / TEXT_BASE_SIZE}rem;
+        color: ${theme.typography.text.color};
+      }
+
+      ${() => {
+      const { l: l2 } = hexToHSL(theme.card.background);
+      const borderColor = l2 > 50 ? "hsla(0, 0%, 0%, 0.1)" : "hsla(0, 0%, 100%, 0.2)";
+      const borderRadius = `${$borderRadius / TEXT_BASE_SIZE}rem`;
+      const boxShadow = "0px 1px 20px 0px #1018280F, 0px 1px 3px 0px #1018281A";
+      if ($sectionLayout === "merged") {
+        return lt`
+            background: ${({ theme: theme2 }) => theme2.card.background};
+            border-radius: ${borderRadius};
+
+            ${$shadow && `box-shadow: ${boxShadow};`}
+
+            > :not(:last-child) {
+              border-bottom: 1px solid ${borderColor};
+            }
+          `;
+      }
+      return lt`
+          > :not(:last-child) {
+            margin-bottom: 1rem;
+          }
+
+          > * {
+            background: ${theme.card.background};
+            border-radius: ${borderRadius};
+            ${$shadow && `box-shadow: ${boxShadow};`}
+          }
+        `;
+    }}
+    `;
+  }
+);
+
+// src/components/layout/card/Card.tsx
+import { jsx as jsx18 } from "react/jsx-runtime";
+var Card = forwardRef8(
+  ({ children, className }, ref) => {
+    const theme = nt();
+    return /* @__PURE__ */ jsx18(
+      StyledCard,
+      {
+        ref,
+        className,
+        $sectionLayout: theme?.sectionLayout,
+        $borderRadius: theme?.card?.borderRadius,
+        $padding: theme?.card?.padding,
+        $shadow: theme?.card?.hasShadow,
+        children
+      }
+    );
+  }
+);
+
+// src/components/layout/RenderLayout.tsx
+import { jsx as jsx19, jsxs as jsxs12 } from "react/jsx-runtime";
+var Disabled = () => {
   const theme = nt();
-  return /* @__PURE__ */ jsx18(Box, { $width: "100%", children: /* @__PURE__ */ jsxs12(
+  return /* @__PURE__ */ jsx19(Box, { $width: "max-content", $height: "max-content", $margin: "0 auto", children: /* @__PURE__ */ jsx19(Card, { children: /* @__PURE__ */ jsxs12(
     Flex,
     {
       $flexDirection: "column",
-      $padding: `${theme.card.padding / TEXT_BASE_SIZE}rem`,
-      $width: "100%",
-      $height: "auto",
-      $borderRadius: `${theme.card.borderRadius / TEXT_BASE_SIZE}rem`,
-      $backgroundColor: theme.card.background,
-      $alignItems: "center",
       $justifyContent: "center",
+      $alignItems: "center",
+      $whiteSpace: "nowrap",
       children: [
-        /* @__PURE__ */ jsx18(
-          Box,
+        /* @__PURE__ */ jsx19(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ jsx19(
+          Text,
           {
-            $marginBottom: "8px",
-            $fontSize: `${theme.typography.heading1.fontSize / TEXT_BASE_SIZE}rem`,
-            $fontFamily: theme.typography.heading1.fontFamily,
-            $fontWeight: theme.typography.heading1.fontWeight,
+            as: "h1",
+            $font: theme.typography.heading1.fontFamily,
+            $size: theme.typography.heading1.fontSize,
+            $weight: theme.typography.heading1.fontWeight,
             $color: theme.typography.heading1.color,
-            children: "Coming soon"
+            children: "Portal not found"
           }
-        ),
-        /* @__PURE__ */ jsx18(
-          Box,
+        ) }),
+        /* @__PURE__ */ jsx19(
+          Text,
           {
-            $marginBottom: "8px",
-            $fontSize: `${theme.typography.text.fontSize / TEXT_BASE_SIZE}rem`,
-            $fontFamily: theme.typography.text.fontFamily,
-            $fontWeight: theme.typography.text.fontWeight,
+            as: "p",
+            $font: theme.typography.text.fontFamily,
+            $size: theme.typography.text.fontSize,
+            $weight: theme.typography.text.fontWeight,
             $color: theme.typography.text.color,
-            children: "The plan manager will be back very soon."
+            children: "Please try again later."
           }
         )
       ]
     }
-  ) });
+  ) }) });
 };
-var SuccessState = () => {
-  const [isOpen, setIsOpen] = useState4(true);
+var Success = () => {
   const theme = nt();
   const { hydrate, data, api, setLayout, isPending } = useEmbed();
+  const [isOpen, setIsOpen] = useState4(true);
   useEffect4(() => {
     if (api && data.component?.id) {
       hydrate();
@@ -12118,31 +12440,23 @@ var SuccessState = () => {
       setLayout("portal");
     }
   }, [isPending, isOpen, setLayout]);
-  return /* @__PURE__ */ jsxs12(
+  return /* @__PURE__ */ jsx19(Box, { $width: "max-content", $height: "max-content", $margin: "0 auto", children: /* @__PURE__ */ jsx19(Card, { children: /* @__PURE__ */ jsxs12(
     Flex,
     {
       $flexDirection: "column",
       $justifyContent: "center",
       $alignItems: "center",
-      $gap: `${32 / TEXT_BASE_SIZE}rem`,
-      $width: "min-content",
-      $height: "min-content",
-      $margin: "auto",
-      $padding: `${theme.card.padding / TEXT_BASE_SIZE}rem ${theme.card.padding * 1.5 / TEXT_BASE_SIZE}rem`,
       $whiteSpace: "nowrap",
-      $backgroundColor: theme.card.background,
-      $borderRadius: "0.5rem",
-      $boxShadow: "0px 1px 20px 0px #1018280F, 0px 1px 3px 0px #1018281A;",
       children: [
-        /* @__PURE__ */ jsx18(
+        /* @__PURE__ */ jsx19(Box, { $marginBottom: "1.5rem", children: /* @__PURE__ */ jsx19(
           IconRound,
           {
             name: "check",
             size: "3xl",
             colors: [theme.card.background, theme.primary]
           }
-        ),
-        /* @__PURE__ */ jsx18(
+        ) }),
+        /* @__PURE__ */ jsx19(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ jsx19(
           Text,
           {
             as: "h1",
@@ -12152,8 +12466,8 @@ var SuccessState = () => {
             $color: theme.typography.heading1.color,
             children: "Subscription updated!"
           }
-        ),
-        /* @__PURE__ */ jsx18(
+        ) }),
+        /* @__PURE__ */ jsx19(
           Text,
           {
             as: "p",
@@ -12161,37 +12475,37 @@ var SuccessState = () => {
             $size: theme.typography.text.fontSize,
             $weight: theme.typography.text.fontWeight,
             $color: theme.typography.text.color,
-            children: "Loading..."
+            children: "Loading\u2026"
           }
         )
       ]
     }
-  );
+  ) }) });
 };
 var RenderLayout = ({ children }) => {
   const { layout } = useEmbed();
   switch (layout) {
     case "disabled":
-      return /* @__PURE__ */ jsx18(DisabledState, {});
+      return /* @__PURE__ */ jsx19(Disabled, {});
     case "success":
-      return /* @__PURE__ */ jsx18(SuccessState, {});
+      return /* @__PURE__ */ jsx19(Success, {});
     default:
       return children;
   }
 };
 
 // src/components/layout/viewport/Viewport.tsx
-import { jsx as jsx19 } from "react/jsx-runtime";
-var Viewport = forwardRef8(
+import { jsx as jsx20 } from "react/jsx-runtime";
+var Viewport = forwardRef9(
   ({ children, ...props }, ref) => {
     const theme = nt();
-    return /* @__PURE__ */ jsx19(
+    return /* @__PURE__ */ jsx20(
       StyledViewport,
       {
         ref,
         $numberOfColumns: theme.numberOfColumns,
         ...props,
-        children: /* @__PURE__ */ jsx19(RenderLayout, { children })
+        children: /* @__PURE__ */ jsx20(RenderLayout, { children })
       }
     );
   }
@@ -12200,87 +12514,6 @@ var Viewport = forwardRef8(
 // src/components/layout/column/Column.tsx
 import { forwardRef as forwardRef10 } from "react";
 
-// src/components/layout/card/Card.tsx
-import { forwardRef as forwardRef9 } from "react";
-
-// src/components/layout/card/styles.ts
-var StyledCard = dt.div(
-  ({
-    theme,
-    $sectionLayout = "merged",
-    $borderRadius = 8,
-    $padding = 48,
-    $shadow = true
-  }) => {
-    return lt`
-      box-sizing: border-box;
-      font-size: ${TEXT_BASE_SIZE}px;
-
-      *,
-      *::before,
-      *::after {
-        box-sizing: inherit;
-      }
-
-      > * {
-        padding: ${$padding * 0.75 / TEXT_BASE_SIZE}rem
-          ${$padding / TEXT_BASE_SIZE}rem;
-        color: ${theme.typography.text.color};
-      }
-
-      ${() => {
-      const { l: l2 } = hexToHSL(theme.card.background);
-      const borderColor = l2 > 50 ? "hsla(0, 0%, 0%, 0.1)" : "hsla(0, 0%, 100%, 0.2)";
-      const borderRadius = `${$borderRadius / TEXT_BASE_SIZE}rem`;
-      const boxShadow = "0px 1px 20px 0px #1018280F, 0px 1px 3px 0px #1018281A";
-      if ($sectionLayout === "merged") {
-        return lt`
-            background: ${({ theme: theme2 }) => theme2.card.background};
-            border-radius: ${borderRadius};
-
-            ${$shadow && `box-shadow: ${boxShadow};`}
-
-            > :not(:last-child) {
-              border-bottom: 1px solid ${borderColor};
-            }
-          `;
-      }
-      return lt`
-          > :not(:last-child) {
-            margin-bottom: 1rem;
-          }
-
-          > * {
-            background: ${theme.card.background};
-            border-radius: ${borderRadius};
-            ${$shadow && `box-shadow: ${boxShadow};`}
-          }
-        `;
-    }}
-    `;
-  }
-);
-
-// src/components/layout/card/Card.tsx
-import { jsx as jsx20 } from "react/jsx-runtime";
-var Card = forwardRef9(
-  ({ children, className }, ref) => {
-    const theme = nt();
-    return /* @__PURE__ */ jsx20(
-      StyledCard,
-      {
-        ref,
-        className,
-        $sectionLayout: theme?.sectionLayout,
-        $borderRadius: theme?.card?.borderRadius,
-        $padding: theme?.card?.padding,
-        $shadow: theme?.card?.hasShadow,
-        children
-      }
-    );
-  }
-);
-
 // src/components/layout/column/styles.ts
 var StyledColumn = dt.div`
   flex-grow: 1;
@@ -12336,7 +12569,7 @@ function createRenderer(options) {
 }
 
 // src/components/embed/ComponentTree.tsx
-import { Fragment as Fragment2, jsx as jsx22, jsxs as jsxs13 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx22, jsxs as jsxs13 } from "react/jsx-runtime";
 var Loading = () => {
   const theme = nt();
   return /* @__PURE__ */ jsx22(
@@ -12404,7 +12637,7 @@ var ComponentTree = () => {
   if (Children.count(children) === 0) {
     return /* @__PURE__ */ jsx22(Loading, {});
   }
-  return /* @__PURE__ */ jsx22(Fragment2, { children });
+  return /* @__PURE__ */ jsx22(Fragment3, { children });
 };
 
 // src/components/embed/Embed.tsx