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

package/dist/schematic-react.cjs.js

@@ -7875,6 +7875,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 {
   /**
@@ -7963,6 +7992,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
@@ -9707,11 +9781,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;
@@ -9740,6 +9822,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;
@@ -10701,8 +10795,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__ */ (0, import_jsx_runtime11.jsx)(Flex, { $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
@@ -10713,12 +10807,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}`
         ]
       }
     ) });
@@ -10744,6 +10834,7 @@ var CheckoutDialog = () => {
     () => data.company?.plan?.planPeriod || "month"
   );
   const [selectedPlan, setSelectedPlan] = (0, import_react10.useState)();
+  const [charges, setCharges] = (0, import_react10.useState)();
   const [paymentMethodId, setPaymentMethodId] = (0, import_react10.useState)();
   const [isLoading, setIsLoading] = (0, import_react10.useState)(false);
   const [error, setError] = (0, import_react10.useState)();
@@ -10786,9 +10877,54 @@ var CheckoutDialog = () => {
     }
     return 0;
   }, [selectedPlan]);
+  const subscriptionPrice = (0, import_react10.useMemo)(() => {
+    if (!selectedPlan || !selectedPlan.monthlyPrice || !selectedPlan.yearlyPrice) {
+      return;
+    }
+    return formatCurrency(
+      (planPeriod === "month" ? selectedPlan.monthlyPrice : selectedPlan.yearlyPrice)?.price
+    );
+  }, [selectedPlan, planPeriod]);
   const isLightBackground = (0, import_react10.useMemo)(() => {
     return hexToHSL(theme.card.background).l > 50;
   }, [theme.card.background]);
+  const selectPlan = (0, import_react10.useCallback)(
+    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 = (0, import_react10.useCallback)(
+    (period) => {
+      setPlanPeriod(period);
+      if (selectedPlan) {
+        selectPlan(selectedPlan, period);
+      }
+    },
+    [selectedPlan, selectPlan]
+  );
   const allowCheckout = api && selectedPlan && selectedPlan?.id !== currentPlan?.id && (paymentMethod && !showPaymentForm || paymentMethodId) && !isLoading;
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Modal, { size: "lg", children: [
     /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ModalHeader, { bordered: true, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Flex, { $gap: "1rem", children: [
@@ -10923,7 +11059,15 @@ var CheckoutDialog = () => {
                   }
                 )
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Flex, { $flexWrap: "wrap", $gap: "1rem", $flexGrow: "1", children: availablePlans?.map((plan) => {
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(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__ */ (0, import_jsx_runtime11.jsxs)(
                   Flex,
                   {
@@ -11065,7 +11209,7 @@ var CheckoutDialog = () => {
                               {
                                 disabled: plan.valid === false,
                                 ...plan.valid === true && {
-                                  onClick: () => setSelectedPlan(plan)
+                                  onClick: () => selectPlan(plan)
                                 },
                                 $size: "sm",
                                 $color: "primary",
@@ -11180,7 +11324,7 @@ var CheckoutDialog = () => {
                         /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                           Flex,
                           {
-                            onClick: () => setPlanPeriod("month"),
+                            onClick: () => changePlanPeriod("month"),
                             $justifyContent: "center",
                             $alignItems: "center",
                             $padding: "0.25rem 0.5rem",
@@ -11204,7 +11348,7 @@ var CheckoutDialog = () => {
                         /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                           Flex,
                           {
-                            onClick: () => setPlanPeriod("year"),
+                            onClick: () => changePlanPeriod("year"),
                             $justifyContent: "center",
                             $alignItems: "center",
                             $padding: "0.25rem 0.5rem",
@@ -11246,7 +11390,7 @@ var CheckoutDialog = () => {
               {
                 $flexDirection: "column",
                 $position: "relative",
-                $gap: "1rem",
+                $gap: "0.5rem",
                 $width: "100%",
                 $height: "auto",
                 $padding: "1.5rem",
@@ -11301,14 +11445,14 @@ var CheckoutDialog = () => {
                         }
                       ) })
                     ] }),
-                    selectedPlan && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+                    selectedPlan && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Box, { $marginBottom: "1rem", children: [
                       /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                         Box,
                         {
                           $width: "100%",
                           $textAlign: "left",
                           $opacity: "50%",
-                          $marginBottom: "-0.25rem",
+                          $marginBottom: "0.25rem",
                           $marginTop: "-0.25rem",
                           children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                             Icon2,
@@ -11350,6 +11494,51 @@ var CheckoutDialog = () => {
                         ) })
                       ] })
                     ] })
+                  ] }),
+                  charges?.proration && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Box, { $opacity: "0.625", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                      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__ */ (0, import_jsx_runtime11.jsx)(Flex, { $flexDirection: "column", $gap: "0.5rem", children: currentPlan && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+                      Flex,
+                      {
+                        $justifyContent: "space-between",
+                        $alignItems: "center",
+                        $gap: "1rem",
+                        children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Flex, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+                            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__ */ (0, import_jsx_runtime11.jsx)(Flex, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                            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)
+                            }
+                          ) })
+                        ]
+                      }
+                    ) })
                   ] })
                 ]
               }
@@ -11364,7 +11553,7 @@ var CheckoutDialog = () => {
                 $height: "auto",
                 $padding: "1.5rem",
                 children: [
-                  selectedPlan && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Flex, { $justifyContent: "space-between", children: [
+                  selectedPlan && subscriptionPrice && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Flex, { $justifyContent: "space-between", children: [
                     /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Box, { $opacity: "0.625", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
                       Text,
                       {
@@ -11374,8 +11563,7 @@ var CheckoutDialog = () => {
                         $color: theme.typography.text.color,
                         children: [
                           planPeriod === "month" ? "Monthly" : "Yearly",
-                          " total:",
-                          " "
+                          " total:"
                         ]
                       }
                     ) }),
@@ -11387,15 +11575,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__ */ (0, import_jsx_runtime11.jsxs)(Flex, { $justifyContent: "space-between", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Box, { $opacity: "0.625", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                      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__ */ (0, import_jsx_runtime11.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                      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__ */ (0, import_jsx_runtime11.jsx)(
                     StyledButton,
                     {
@@ -11448,24 +11656,25 @@ var CheckoutDialog = () => {
                       children: "Pay now"
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Box, { $opacity: "0.625", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                  !isLoading && error && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                     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__ */ (0, import_jsx_runtime11.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Box, { $opacity: "0.625", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                     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.`
                     }
                   ) })
                 ]
@@ -11515,9 +11724,9 @@ var PlanManager = (0, import_react11.forwardRef)(({ children, className, portal,
   const { currentPlan, canChangePlan } = (0, import_react11.useMemo)(() => {
     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__ */ (0, import_jsx_runtime12.jsxs)("div", { ref, className, children: [
     /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       Flex,
@@ -11620,6 +11829,7 @@ var IncludedFeatures = (0, import_react12.forwardRef)(({ className, ...rest }, r
   const props = resolveDesignProps3(rest);
   const theme = nt();
   const { data } = useEmbed();
+  const elements = (0, import_react12.useRef)([]);
   const features = (0, import_react12.useMemo)(() => {
     return (data.featureUsage?.features || []).map(
       ({
@@ -11650,6 +11860,34 @@ var IncludedFeatures = (0, import_react12.forwardRef)(({ className, ...rest }, r
   const isLightBackground = (0, import_react12.useMemo)(() => {
     return hexToHSL(theme.card.background).l > 50;
   }, [theme.card.background]);
+  (0, import_react12.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__ */ (0, import_jsx_runtime13.jsxs)(Flex, { ref, className, $flexDirection: "column", $gap: "1.5rem", children: [
     props.header.isVisible && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       Text,
@@ -11671,6 +11909,7 @@ var IncludedFeatures = (0, import_react12.forwardRef)(({ className, ...rest }, r
           /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
             Flex,
             {
+              ref: (el) => elements.current.push(el),
               $flexWrap: "wrap",
               $justifyContent: "space-between",
               $alignItems: "center",
@@ -11699,7 +11938,7 @@ var IncludedFeatures = (0, import_react12.forwardRef)(({ className, ...rest }, r
                     }
                   ) })
                 ] }),
-                allocationType === "numeric" && feature?.name && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Box, { $textAlign: "right", children: [
+                allocationType === "numeric" && feature?.name && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Box, { $textAlign: "right", $paddingLeft: "3.5rem", children: [
                   props.entitlement.isVisible && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                     Text,
                     {
@@ -11709,7 +11948,7 @@ var IncludedFeatures = (0, import_react12.forwardRef)(({ className, ...rest }, r
                       $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__ */ (0, import_jsx_runtime13.jsx)(
@@ -11721,7 +11960,7 @@ var IncludedFeatures = (0, import_react12.forwardRef)(({ className, ...rest }, r
                       $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__ */ (0, import_jsx_runtime13.jsx)(import_jsx_runtime13.Fragment, { children: typeof allocation === "number" ? `${formatNumber(usage)} of ${formatNumber(allocation)} used` : `${formatNumber(usage)} used` })
                     }
                   )
                 ] })
@@ -11953,14 +12192,19 @@ var UpcomingBill = (0, import_react14.forwardRef)(({ className, ...rest }, ref)
           children: formatCurrency(upcomingInvoice.amountDue)
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Box, { $maxWidth: "10rem", $lineHeight: "1", $textAlign: "right", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Box, { $maxWidth: "10rem", $lineHeight: "1", $textAlign: "right", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
         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."
+          ]
         }
       ) })
     ] })
@@ -12069,16 +12313,16 @@ var Invoices = (0, import_react15.forwardRef)(({ className, ...rest }, ref) => {
 });
 
 // src/components/embed/ComponentTree.tsx
-var import_react23 = require("react");
+var import_react22 = require("react");
 
 // src/components/embed/renderer.ts
-var import_react22 = require("react");
+var import_react21 = require("react");
 
 // src/components/layout/root/Root.tsx
 var import_react16 = require("react");
 var import_jsx_runtime17 = require("react/jsx-runtime");
 var Root = (0, import_react16.forwardRef)(
-  (props, ref) => {
+  ({ data, settings, ...props }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { ref, ...props });
   }
 );
@@ -12092,56 +12336,135 @@ var StyledViewport = dt.div`
   flex-wrap: wrap;
   margin-left: auto;
   margin-right: auto;
+  gap: 1rem;
 `;
 
 // src/components/layout/RenderLayout.tsx
-var import_react17 = require("react");
 var import_react18 = require("react");
+
+// src/components/layout/card/Card.tsx
+var import_react17 = require("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
 var import_jsx_runtime18 = require("react/jsx-runtime");
-var DisabledState = () => {
+var Card = (0, import_react17.forwardRef)(
+  ({ children, className }, ref) => {
+    const theme = nt();
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      StyledCard,
+      {
+        ref,
+        className,
+        $sectionLayout: theme?.sectionLayout,
+        $borderRadius: theme?.card?.borderRadius,
+        $padding: theme?.card?.padding,
+        $shadow: theme?.card?.hasShadow,
+        children
+      }
+    );
+  }
+);
+
+// src/components/layout/RenderLayout.tsx
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var Disabled = () => {
   const theme = nt();
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Box, { $width: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Box, { $width: "max-content", $height: "max-content", $margin: "0 auto", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Card, { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
     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__ */ (0, import_jsx_runtime18.jsx)(
-          Box,
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+          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__ */ (0, import_jsx_runtime18.jsx)(
-          Box,
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+          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] = (0, import_react17.useState)(true);
+var Success = () => {
   const theme = nt();
   const { hydrate, data, api, setLayout, isPending } = useEmbed();
+  const [isOpen, setIsOpen] = (0, import_react18.useState)(true);
   (0, import_react18.useEffect)(() => {
     if (api && data.component?.id) {
       hydrate();
@@ -12153,31 +12476,23 @@ var SuccessState = () => {
       setLayout("portal");
     }
   }, [isPending, isOpen, setLayout]);
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Box, { $width: "max-content", $height: "max-content", $margin: "0 auto", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Card, { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
     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__ */ (0, import_jsx_runtime18.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Box, { $marginBottom: "1.5rem", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
           IconRound,
           {
             name: "check",
             size: "3xl",
             colors: [theme.card.background, theme.primary]
           }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
           Text,
           {
             as: "h1",
@@ -12187,8 +12502,8 @@ var SuccessState = () => {
             $color: theme.typography.heading1.color,
             children: "Subscription updated!"
           }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
           Text,
           {
             as: "p",
@@ -12196,136 +12511,54 @@ 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__ */ (0, import_jsx_runtime18.jsx)(DisabledState, {});
+      return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Disabled, {});
     case "success":
-      return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SuccessState, {});
+      return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Success, {});
     default:
       return children;
   }
 };
 
 // src/components/layout/viewport/Viewport.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 var Viewport = (0, import_react19.forwardRef)(
   ({ children, ...props }, ref) => {
     const theme = nt();
-    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
       StyledViewport,
       {
         ref,
         $numberOfColumns: theme.numberOfColumns,
         ...props,
-        children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(RenderLayout, { children })
+        children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(RenderLayout, { children })
       }
     );
   }
 );
 
 // src/components/layout/column/Column.tsx
-var import_react21 = require("react");
-
-// src/components/layout/card/Card.tsx
 var import_react20 = require("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
-var import_jsx_runtime20 = require("react/jsx-runtime");
-var Card = (0, import_react20.forwardRef)(
-  ({ children, className }, ref) => {
-    const theme = nt();
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-      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;
-  padding: 0.75rem;
 `;
 
 // src/components/layout/column/Column.tsx
 var import_jsx_runtime21 = require("react/jsx-runtime");
-var Column = (0, import_react21.forwardRef)(
-  ({ children, ...props }, ref) => {
+var Column = (0, import_react20.forwardRef)(
+  ({ children, basis, ...props }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(StyledColumn, { ref, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Card, { children }) });
   }
 );
@@ -12344,7 +12577,7 @@ var components = {
 function createRenderer(options) {
   const { useFallback = false } = options || {};
   return function renderNode(node2, index) {
-    const { type, props = {}, custom = {}, children } = node2;
+    const { type, props = {}, children } = node2;
     const name = typeof type !== "string" ? type.resolvedName : type;
     const component = useFallback ? components[name] || "div" : components[name];
     if (!components[name]) {
@@ -12359,13 +12592,12 @@ function createRenderer(options) {
     const { className, ...rest } = props;
     const resolvedProps = component === "div" ? rest : props;
     const resolvedChildren = children.map(renderNode);
-    return (0, import_react22.createElement)(
+    return (0, import_react21.createElement)(
       component,
       {
+        key: index,
         className,
-        ...component !== "div" && { ...resolvedProps },
-        ...component !== "div" && Object.keys(custom).length > 0 && { custom },
-        key: index
+        ...component !== "div" && { ...resolvedProps }
       },
       resolvedChildren
     );
@@ -12430,15 +12662,15 @@ var Error2 = ({ message }) => {
 };
 var ComponentTree = () => {
   const { error, nodes } = useEmbed();
-  const [children, setChildren] = (0, import_react23.useState)(/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Loading, {}));
-  (0, import_react23.useEffect)(() => {
+  const [children, setChildren] = (0, import_react22.useState)(/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Loading, {}));
+  (0, import_react22.useEffect)(() => {
     const renderer = createRenderer();
     setChildren(nodes.map(renderer));
   }, [nodes]);
   if (error) {
     return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Error2, { message: error.message });
   }
-  if (import_react23.Children.count(children) === 0) {
+  if (import_react22.Children.count(children) === 0) {
     return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Loading, {});
   }
   return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_jsx_runtime22.Fragment, { children });