@schematichq/schematic-components 2.6.2 → 2.7.0

package/dist/schematic-components.cjs.js

@@ -6112,13 +6112,21 @@ var bindMemberFunctions = (inst) => {
     }
   });
 };
-var supportNoticeShown = false;
+var SUPPORT_NOTICE_KEY = "__i18next_supportNoticeShown";
+var getSupportNoticeShown = () => typeof globalThis !== "undefined" && !!globalThis[SUPPORT_NOTICE_KEY];
+var setSupportNoticeShown = () => {
+  if (typeof globalThis !== "undefined") globalThis[SUPPORT_NOTICE_KEY] = true;
+};
 var usesLocize = (inst) => {
   if (inst?.modules?.backend?.name?.indexOf("Locize") > 0) return true;
   if (inst?.modules?.backend?.constructor?.name?.indexOf("Locize") > 0) return true;
   if (inst?.options?.backend?.backends) {
     if (inst.options.backend.backends.some((b3) => b3?.name?.indexOf("Locize") > 0 || b3?.constructor?.name?.indexOf("Locize") > 0)) return true;
   }
+  if (inst?.options?.backend?.projectId) return true;
+  if (inst?.options?.backend?.backendOptions) {
+    if (inst.options.backend.backendOptions.some((b3) => b3?.projectId)) return true;
+  }
   return false;
 };
 var I18n = class _I18n extends EventEmitter {
@@ -6173,9 +6181,9 @@ var I18n = class _I18n extends EventEmitter {
     if (typeof this.options.overloadTranslationOptionHandler !== "function") {
       this.options.overloadTranslationOptionHandler = defOpts.overloadTranslationOptionHandler;
     }
-    if (this.options.showSupportNotice !== false && !usesLocize(this) && !supportNoticeShown) {
+    if (this.options.showSupportNotice !== false && !usesLocize(this) && !getSupportNoticeShown()) {
       if (typeof console !== "undefined" && typeof console.info !== "undefined") console.info("\u{1F310} i18next is maintained with support from Locize \u2014 consider powering your project with managed localization (AI, CDN, integrations): https://locize.com \u{1F499}");
-      supportNoticeShown = true;
+      setSupportNoticeShown();
     }
     const createClassOnDemand = (ClassOrObject) => {
       if (!ClassOrObject) return null;
@@ -7384,7 +7392,7 @@ var import_react13 = require("react");
 var en_default = {
   translation: {
     "A problem occurred while saving your payment method.": "A problem occurred while saving your payment method.",
-    "Access to plan will end on": "Access to plan will end on {{date}}",
+    "Access to plan will end.": "Access to {{plan}} will end on {{date}}.",
     Active: "Active",
     Add: "Add",
     "Add new payment method": "Add new payment method",
@@ -7421,6 +7429,7 @@ var en_default = {
     "Currently using": "Currently using {{quantity}} {{unit}}",
     "Custom price": "Custom price",
     Discount: "Discount",
+    "Downgrade to plan scheduled": "Downgrade to {{plan}} scheduled",
     "Due today": "Due today",
     "Edit payment method": "Edit payment method",
     Edit: "Edit",
@@ -7491,6 +7500,7 @@ var en_default = {
     Selected: "Selected",
     "Selected plan or associated price is missing.": "Selected plan or associated price is missing.",
     "Downgrade not permitted.": "Downgrade not permitted.",
+    "Downgrade pending.": "Downgrade pending.",
     "Session expired. Please refresh and try again.": "Session expired. Please refresh and try again.",
     "Show details": "Show details",
     "Start trial": "Start trial",
@@ -7538,6 +7548,7 @@ var en_default = {
     "X units per use": "{{amount}} {{units}} per use",
     "X time left in trial": "{{amount}} {{units}} left in trial",
     "Yearly total": "Yearly total",
+    "You will be downgraded at the end of your billing period.": "You will be downgraded to the {{plan}} plan at the end of your billing period on {{date}}.",
     "You will retain access to your plan until the end of the billing period, on": "You will retain access to your plan until the end of the billing period, on",
     "$X per unit": "{{cost}} per {{unit}}",
     "$X per Y units": "{{cost}} per {{size}} {{units}}",
@@ -12911,7 +12922,7 @@ var reducer = (state, action) => {
 // src/context/EmbedProvider.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var getCustomHeaders = (sessionId) => ({
-  "X-Schematic-Components-Version": "2.6.2",
+  "X-Schematic-Components-Version": "2.7.0",
   "X-Schematic-Session-ID": sessionId
 });
 var EmbedProvider = ({
@@ -16267,6 +16278,7 @@ var CheckoutDialog = ({ top }) => {
   );
   const [promoCode, setPromoCode] = (0, import_react33.useState)(null);
   const [isPaymentMethodRequired, setIsPaymentMethodRequired] = (0, import_react33.useState)(false);
+  const [willScheduleDowngrade, setWillScheduleDowngrade] = (0, import_react33.useState)(false);
   const willTrialWithoutPaymentMethod = (0, import_react33.useMemo)(
     () => shouldTrial && !trialPaymentMethodRequired,
     [shouldTrial, trialPaymentMethodRequired]
@@ -16478,6 +16490,7 @@ var CheckoutDialog = ({ top }) => {
         if (response) {
           setCharges(response.data.finance);
           setIsPaymentMethodRequired(response.data.paymentMethodRequired);
+          setWillScheduleDowngrade(response.data.isScheduledDowngrade);
         }
         if (typeof updates.promoCode !== "undefined") {
           setPromoCode(code);
@@ -16505,6 +16518,13 @@ var CheckoutDialog = ({ top }) => {
                 return;
             }
           }
+          if (err2.response.status === 409) {
+            switch (data2.error) {
+              case "cannot purchase pay-in-advance entitlements while a scheduled downgrade is pending; cancel the scheduled downgrade first":
+                setError(t2("Downgrade pending."));
+                return;
+            }
+          }
           setError(
             t2("Error retrieving plan details. Please try again in a moment.")
           );
@@ -17012,7 +17032,8 @@ var CheckoutDialog = ({ top }) => {
               updatePromoCode,
               shouldTrial,
               setConfirmPaymentIntent: setConfirmPaymentIntentProps,
-              willTrialWithoutPaymentMethod
+              willTrialWithoutPaymentMethod,
+              willScheduleDowngrade
             }
           )
         ] })
@@ -17516,6 +17537,7 @@ var NoPaymentRequired = ({
   isDisabled,
   isLoading,
   isSticky = false,
+  willScheduleDowngrade = false,
   onClick
 }) => {
   const { t: t2 } = useTranslation();
@@ -17528,7 +17550,7 @@ var NoPaymentRequired = ({
       $size: isSticky ? "sm" : "md",
       $fullWidth: true,
       $isLoading: isLoading,
-      children: t2("Subscribe and close")
+      children: willScheduleDowngrade ? t2("Schedule downgrade") : t2("Subscribe and close")
     }
   );
 };
@@ -17547,7 +17569,8 @@ var CheckoutStageButton = ({
   setCheckoutStage,
   trialPaymentMethodRequired,
   shouldTrial,
-  willTrialWithoutPaymentMethod
+  willTrialWithoutPaymentMethod,
+  willScheduleDowngrade
 }) => {
   const { t: t2 } = useTranslation();
   const isDisabled = isLoading || !hasPlan || inEditMode || !canCheckout;
@@ -17821,7 +17844,7 @@ var CheckoutStageButton = ({
         onClick: checkout,
         $fullWidth: true,
         $isLoading: isLoading,
-        children: willTrialWithoutPaymentMethod ? t2("Start trial") : t2("Pay now")
+        children: willScheduleDowngrade ? t2("Schedule downgrade") : willTrialWithoutPaymentMethod ? t2("Start trial") : t2("Pay now")
       }
     );
   }
@@ -17983,6 +18006,7 @@ var SubscriptionSidebar = (0, import_react40.forwardRef)(
     showHeader = true,
     shouldTrial = false,
     willTrialWithoutPaymentMethod = false,
+    willScheduleDowngrade = false,
     setConfirmPaymentIntent
   }, ref) => {
     const portal = portalRef?.current || document.body;
@@ -18346,6 +18370,7 @@ var SubscriptionSidebar = (0, import_react40.forwardRef)(
               isSelectedPlanTrialable,
               trialPaymentMethodRequired,
               willTrialWithoutPaymentMethod,
+              willScheduleDowngrade,
               shouldTrial,
               checkout: handleCheckout
             }
@@ -18381,6 +18406,7 @@ var SubscriptionSidebar = (0, import_react40.forwardRef)(
       willTrialWithoutPaymentMethod,
       shouldTrial,
       isPaymentMethodRequired,
+      willScheduleDowngrade,
       paymentMethod,
       paymentMethodId,
       handleCheckout,
@@ -18938,7 +18964,18 @@ var SubscriptionSidebar = (0, import_react40.forwardRef)(
                     }
                   )
                 ] }),
-                layout !== "unsubscribe" && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Box, { $opacity: "0.625", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Text, { children: subscriptionPrice && // TODO: localize
+                layout !== "unsubscribe" && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Box, { $opacity: "0.625", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Text, { children: willScheduleDowngrade && selectedPlan?.name && billingSubscription ? t2(
+                  "You will be downgraded at the end of your billing period.",
+                  {
+                    plan: selectedPlan.name,
+                    date: toPrettyDate(
+                      new Date(billingSubscription.periodEnd * 1e3),
+                      {
+                        month: "numeric"
+                      }
+                    )
+                  }
+                ) : subscriptionPrice && // TODO: localize
                 `You will be billed ${subscriptionPrice} ${usageBasedEntitlements.length > 0 ? "plus usage based costs" : ""} for this subscription
                 every ${planPeriod} ${periodStart ? `on the ${formatOrdinal(periodStart.getDate())}` : ""} ${planPeriod === "year" && periodStart ? `of ${getMonthName(periodStart)}` : ""} unless you unsubscribe.` }) })
               ]
@@ -20865,7 +20902,7 @@ var registerWrapper = function registerWrapper2(stripe, startTime) {
   }
   stripe._registerWrapper({
     name: "stripe-js",
-    version: "8.7.0",
+    version: "8.8.0",
     startTime
   });
 };
@@ -20943,7 +20980,7 @@ var initStripe = function initStripe2(maybeStripe, args, startTime) {
   var version = runtimeVersionToUrlVersion(maybeStripe.version);
   var expectedVersion = RELEASE_TRAIN;
   if (isTestKey && version !== expectedVersion) {
-    console.warn("Stripe.js@".concat(version, " was loaded on the page, but @stripe/stripe-js@").concat("8.7.0", " expected Stripe.js@").concat(expectedVersion, ". This may result in unexpected behavior. For more information, see https://docs.stripe.com/sdks/stripejs-versioning"));
+    console.warn("Stripe.js@".concat(version, " was loaded on the page, but @stripe/stripe-js@").concat("8.8.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);
@@ -21600,7 +21637,7 @@ var PlanManager = (0, import_react53.forwardRef)(({ children, className, portal,
           )
         ]
       }
-    ) : willSubscriptionCancel && /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
+    ) : willSubscriptionCancel ? /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
       Notice,
       {
         as: Flex,
@@ -21616,7 +21653,8 @@ var PlanManager = (0, import_react53.forwardRef)(({ children, className, portal,
             {
               as: "p",
               $size: 0.8125 * settings.theme.typography.text.fontSize,
-              children: t2("Access to plan will end on", {
+              children: t2("Access to plan will end.", {
+                plan: currentPlan?.name || "plan",
                 date: toPrettyDate(
                   new Date(billingSubscription.cancelAt * 1e3),
                   {
@@ -21628,6 +21666,37 @@ var PlanManager = (0, import_react53.forwardRef)(({ children, className, portal,
           )
         ]
       }
+    ) : data?.company?.scheduledDowngrade?.toPlanName && /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
+      Notice,
+      {
+        as: Flex,
+        $flexDirection: "column",
+        $gap: "0.5rem",
+        $padding: "1.5rem",
+        $textAlign: "center",
+        $backgroundColor: isLightBackground ? darken(settings.theme.card.background, 0.04) : lighten(settings.theme.card.background, 0.04),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Text, { as: "h3", display: "heading3", children: t2("Downgrade to plan scheduled", {
+            plan: data.company.scheduledDowngrade.toPlanName
+          }) }),
+          typeof billingSubscription?.periodEnd === "number" && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+            Text,
+            {
+              as: "p",
+              $size: 0.8125 * settings.theme.typography.text.fontSize,
+              children: t2("Access to plan will end.", {
+                plan: data.company.scheduledDowngrade.fromPlanName,
+                date: toPrettyDate(
+                  new Date(billingSubscription.periodEnd * 1e3),
+                  {
+                    month: "numeric"
+                  }
+                )
+              })
+            }
+          )
+        ]
+      }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
       Element,

package/dist/schematic-components.esm.js

@@ -6032,13 +6032,21 @@ var bindMemberFunctions = (inst) => {
     }
   });
 };
-var supportNoticeShown = false;
+var SUPPORT_NOTICE_KEY = "__i18next_supportNoticeShown";
+var getSupportNoticeShown = () => typeof globalThis !== "undefined" && !!globalThis[SUPPORT_NOTICE_KEY];
+var setSupportNoticeShown = () => {
+  if (typeof globalThis !== "undefined") globalThis[SUPPORT_NOTICE_KEY] = true;
+};
 var usesLocize = (inst) => {
   if (inst?.modules?.backend?.name?.indexOf("Locize") > 0) return true;
   if (inst?.modules?.backend?.constructor?.name?.indexOf("Locize") > 0) return true;
   if (inst?.options?.backend?.backends) {
     if (inst.options.backend.backends.some((b3) => b3?.name?.indexOf("Locize") > 0 || b3?.constructor?.name?.indexOf("Locize") > 0)) return true;
   }
+  if (inst?.options?.backend?.projectId) return true;
+  if (inst?.options?.backend?.backendOptions) {
+    if (inst.options.backend.backendOptions.some((b3) => b3?.projectId)) return true;
+  }
   return false;
 };
 var I18n = class _I18n extends EventEmitter {
@@ -6093,9 +6101,9 @@ var I18n = class _I18n extends EventEmitter {
     if (typeof this.options.overloadTranslationOptionHandler !== "function") {
       this.options.overloadTranslationOptionHandler = defOpts.overloadTranslationOptionHandler;
     }
-    if (this.options.showSupportNotice !== false && !usesLocize(this) && !supportNoticeShown) {
+    if (this.options.showSupportNotice !== false && !usesLocize(this) && !getSupportNoticeShown()) {
       if (typeof console !== "undefined" && typeof console.info !== "undefined") console.info("\u{1F310} i18next is maintained with support from Locize \u2014 consider powering your project with managed localization (AI, CDN, integrations): https://locize.com \u{1F499}");
-      supportNoticeShown = true;
+      setSupportNoticeShown();
     }
     const createClassOnDemand = (ClassOrObject) => {
       if (!ClassOrObject) return null;
@@ -7304,7 +7312,7 @@ import { useContext as useContext4 } from "react";
 var en_default = {
   translation: {
     "A problem occurred while saving your payment method.": "A problem occurred while saving your payment method.",
-    "Access to plan will end on": "Access to plan will end on {{date}}",
+    "Access to plan will end.": "Access to {{plan}} will end on {{date}}.",
     Active: "Active",
     Add: "Add",
     "Add new payment method": "Add new payment method",
@@ -7341,6 +7349,7 @@ var en_default = {
     "Currently using": "Currently using {{quantity}} {{unit}}",
     "Custom price": "Custom price",
     Discount: "Discount",
+    "Downgrade to plan scheduled": "Downgrade to {{plan}} scheduled",
     "Due today": "Due today",
     "Edit payment method": "Edit payment method",
     Edit: "Edit",
@@ -7411,6 +7420,7 @@ var en_default = {
     Selected: "Selected",
     "Selected plan or associated price is missing.": "Selected plan or associated price is missing.",
     "Downgrade not permitted.": "Downgrade not permitted.",
+    "Downgrade pending.": "Downgrade pending.",
     "Session expired. Please refresh and try again.": "Session expired. Please refresh and try again.",
     "Show details": "Show details",
     "Start trial": "Start trial",
@@ -7458,6 +7468,7 @@ var en_default = {
     "X units per use": "{{amount}} {{units}} per use",
     "X time left in trial": "{{amount}} {{units}} left in trial",
     "Yearly total": "Yearly total",
+    "You will be downgraded at the end of your billing period.": "You will be downgraded to the {{plan}} plan at the end of your billing period on {{date}}.",
     "You will retain access to your plan until the end of the billing period, on": "You will retain access to your plan until the end of the billing period, on",
     "$X per unit": "{{cost}} per {{unit}}",
     "$X per Y units": "{{cost}} per {{size}} {{units}}",
@@ -12831,7 +12842,7 @@ var reducer = (state, action) => {
 // src/context/EmbedProvider.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
 var getCustomHeaders = (sessionId) => ({
-  "X-Schematic-Components-Version": "2.6.2",
+  "X-Schematic-Components-Version": "2.7.0",
   "X-Schematic-Session-ID": sessionId
 });
 var EmbedProvider = ({
@@ -16200,6 +16211,7 @@ var CheckoutDialog = ({ top }) => {
   );
   const [promoCode, setPromoCode] = useState8(null);
   const [isPaymentMethodRequired, setIsPaymentMethodRequired] = useState8(false);
+  const [willScheduleDowngrade, setWillScheduleDowngrade] = useState8(false);
   const willTrialWithoutPaymentMethod = useMemo9(
     () => shouldTrial && !trialPaymentMethodRequired,
     [shouldTrial, trialPaymentMethodRequired]
@@ -16411,6 +16423,7 @@ var CheckoutDialog = ({ top }) => {
         if (response) {
           setCharges(response.data.finance);
           setIsPaymentMethodRequired(response.data.paymentMethodRequired);
+          setWillScheduleDowngrade(response.data.isScheduledDowngrade);
         }
         if (typeof updates.promoCode !== "undefined") {
           setPromoCode(code);
@@ -16438,6 +16451,13 @@ var CheckoutDialog = ({ top }) => {
                 return;
             }
           }
+          if (err2.response.status === 409) {
+            switch (data2.error) {
+              case "cannot purchase pay-in-advance entitlements while a scheduled downgrade is pending; cancel the scheduled downgrade first":
+                setError(t2("Downgrade pending."));
+                return;
+            }
+          }
           setError(
             t2("Error retrieving plan details. Please try again in a moment.")
           );
@@ -16945,7 +16965,8 @@ var CheckoutDialog = ({ top }) => {
               updatePromoCode,
               shouldTrial,
               setConfirmPaymentIntent: setConfirmPaymentIntentProps,
-              willTrialWithoutPaymentMethod
+              willTrialWithoutPaymentMethod,
+              willScheduleDowngrade
             }
           )
         ] })
@@ -17461,6 +17482,7 @@ var NoPaymentRequired = ({
   isDisabled,
   isLoading,
   isSticky = false,
+  willScheduleDowngrade = false,
   onClick
 }) => {
   const { t: t2 } = useTranslation();
@@ -17473,7 +17495,7 @@ var NoPaymentRequired = ({
       $size: isSticky ? "sm" : "md",
       $fullWidth: true,
       $isLoading: isLoading,
-      children: t2("Subscribe and close")
+      children: willScheduleDowngrade ? t2("Schedule downgrade") : t2("Subscribe and close")
     }
   );
 };
@@ -17492,7 +17514,8 @@ var CheckoutStageButton = ({
   setCheckoutStage,
   trialPaymentMethodRequired,
   shouldTrial,
-  willTrialWithoutPaymentMethod
+  willTrialWithoutPaymentMethod,
+  willScheduleDowngrade
 }) => {
   const { t: t2 } = useTranslation();
   const isDisabled = isLoading || !hasPlan || inEditMode || !canCheckout;
@@ -17766,7 +17789,7 @@ var CheckoutStageButton = ({
         onClick: checkout,
         $fullWidth: true,
         $isLoading: isLoading,
-        children: willTrialWithoutPaymentMethod ? t2("Start trial") : t2("Pay now")
+        children: willScheduleDowngrade ? t2("Schedule downgrade") : willTrialWithoutPaymentMethod ? t2("Start trial") : t2("Pay now")
       }
     );
   }
@@ -17928,6 +17951,7 @@ var SubscriptionSidebar = forwardRef7(
     showHeader = true,
     shouldTrial = false,
     willTrialWithoutPaymentMethod = false,
+    willScheduleDowngrade = false,
     setConfirmPaymentIntent
   }, ref) => {
     const portal = portalRef?.current || document.body;
@@ -18291,6 +18315,7 @@ var SubscriptionSidebar = forwardRef7(
               isSelectedPlanTrialable,
               trialPaymentMethodRequired,
               willTrialWithoutPaymentMethod,
+              willScheduleDowngrade,
               shouldTrial,
               checkout: handleCheckout
             }
@@ -18326,6 +18351,7 @@ var SubscriptionSidebar = forwardRef7(
       willTrialWithoutPaymentMethod,
       shouldTrial,
       isPaymentMethodRequired,
+      willScheduleDowngrade,
       paymentMethod,
       paymentMethodId,
       handleCheckout,
@@ -18883,7 +18909,18 @@ var SubscriptionSidebar = forwardRef7(
                     }
                   )
                 ] }),
-                layout !== "unsubscribe" && /* @__PURE__ */ jsx30(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsx30(Text, { children: subscriptionPrice && // TODO: localize
+                layout !== "unsubscribe" && /* @__PURE__ */ jsx30(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsx30(Text, { children: willScheduleDowngrade && selectedPlan?.name && billingSubscription ? t2(
+                  "You will be downgraded at the end of your billing period.",
+                  {
+                    plan: selectedPlan.name,
+                    date: toPrettyDate(
+                      new Date(billingSubscription.periodEnd * 1e3),
+                      {
+                        month: "numeric"
+                      }
+                    )
+                  }
+                ) : subscriptionPrice && // TODO: localize
                 `You will be billed ${subscriptionPrice} ${usageBasedEntitlements.length > 0 ? "plus usage based costs" : ""} for this subscription
                 every ${planPeriod} ${periodStart ? `on the ${formatOrdinal(periodStart.getDate())}` : ""} ${planPeriod === "year" && periodStart ? `of ${getMonthName(periodStart)}` : ""} unless you unsubscribe.` }) })
               ]
@@ -20810,7 +20847,7 @@ var registerWrapper = function registerWrapper2(stripe, startTime) {
   }
   stripe._registerWrapper({
     name: "stripe-js",
-    version: "8.7.0",
+    version: "8.8.0",
     startTime
   });
 };
@@ -20888,7 +20925,7 @@ var initStripe = function initStripe2(maybeStripe, args, startTime) {
   var version = runtimeVersionToUrlVersion(maybeStripe.version);
   var expectedVersion = RELEASE_TRAIN;
   if (isTestKey && version !== expectedVersion) {
-    console.warn("Stripe.js@".concat(version, " was loaded on the page, but @stripe/stripe-js@").concat("8.7.0", " expected Stripe.js@").concat(expectedVersion, ". This may result in unexpected behavior. For more information, see https://docs.stripe.com/sdks/stripejs-versioning"));
+    console.warn("Stripe.js@".concat(version, " was loaded on the page, but @stripe/stripe-js@").concat("8.8.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);
@@ -21545,7 +21582,7 @@ var PlanManager = forwardRef14(({ children, className, portal, ...rest }, ref) =
           )
         ]
       }
-    ) : willSubscriptionCancel && /* @__PURE__ */ jsxs37(
+    ) : willSubscriptionCancel ? /* @__PURE__ */ jsxs37(
       Notice,
       {
         as: Flex,
@@ -21561,7 +21598,8 @@ var PlanManager = forwardRef14(({ children, className, portal, ...rest }, ref) =
             {
               as: "p",
               $size: 0.8125 * settings.theme.typography.text.fontSize,
-              children: t2("Access to plan will end on", {
+              children: t2("Access to plan will end.", {
+                plan: currentPlan?.name || "plan",
                 date: toPrettyDate(
                   new Date(billingSubscription.cancelAt * 1e3),
                   {
@@ -21573,6 +21611,37 @@ var PlanManager = forwardRef14(({ children, className, portal, ...rest }, ref) =
           )
         ]
       }
+    ) : data?.company?.scheduledDowngrade?.toPlanName && /* @__PURE__ */ jsxs37(
+      Notice,
+      {
+        as: Flex,
+        $flexDirection: "column",
+        $gap: "0.5rem",
+        $padding: "1.5rem",
+        $textAlign: "center",
+        $backgroundColor: isLightBackground ? darken(settings.theme.card.background, 0.04) : lighten(settings.theme.card.background, 0.04),
+        children: [
+          /* @__PURE__ */ jsx48(Text, { as: "h3", display: "heading3", children: t2("Downgrade to plan scheduled", {
+            plan: data.company.scheduledDowngrade.toPlanName
+          }) }),
+          typeof billingSubscription?.periodEnd === "number" && /* @__PURE__ */ jsx48(
+            Text,
+            {
+              as: "p",
+              $size: 0.8125 * settings.theme.typography.text.fontSize,
+              children: t2("Access to plan will end.", {
+                plan: data.company.scheduledDowngrade.fromPlanName,
+                date: toPrettyDate(
+                  new Date(billingSubscription.periodEnd * 1e3),
+                  {
+                    month: "numeric"
+                  }
+                )
+              })
+            }
+          )
+        ]
+      }
     ),
     /* @__PURE__ */ jsxs37(
       Element,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@schematichq/schematic-components",
-  "version": "2.6.2",
+  "version": "2.7.0",
   "main": "dist/schematic-components.cjs.js",
   "module": "dist/schematic-components.esm.js",
   "types": "dist/schematic-components.d.ts",
@@ -34,8 +34,8 @@
   },
   "dependencies": {
     "@schematichq/schematic-icons": "^0.5.2",
-    "@stripe/stripe-js": "^8.7.0",
-    "i18next": "^25.8.11",
+    "@stripe/stripe-js": "^8.8.0",
+    "i18next": "^25.8.13",
     "lodash": "^4.17.23",
     "pako": "^2.1.0",
     "react-i18next": "16.1.6",
@@ -43,36 +43,36 @@
     "uuid": "^13.0.0"
   },
   "devDependencies": {
-    "@eslint/js": "^9.39.2",
+    "@eslint/js": "^9.39.3",
     "@eslint/json": "^1.0.1",
     "@eslint/markdown": "^7.5.1",
-    "@microsoft/api-extractor": "^7.57.1",
+    "@microsoft/api-extractor": "^7.57.3",
     "@openapitools/openapi-generator-cli": "^2.29.0",
     "@stripe/react-stripe-js": "^5.6.0",
-    "@swc/core": "^1.15.11",
+    "@swc/core": "^1.15.13",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
-    "@types/lodash": "^4.17.23",
+    "@types/lodash": "^4.17.24",
     "@types/pako": "^2.0.4",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "@vitest/browser": "^4.0.18",
     "esbuild": "^0.27.3",
-    "eslint": "^9.39.2",
+    "eslint": "^9.39.3",
     "eslint-import-resolver-typescript": "^4.4.4",
     "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^7.0.1",
     "globals": "^17.3.0",
-    "happy-dom": "^20.6.3",
+    "happy-dom": "^20.7.0",
     "jsdom": "^28.1.0",
     "msw": "^2.12.10",
     "prettier": "^3.8.1",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.56.0",
+    "typescript-eslint": "^8.56.1",
     "vitest": "^4.0.18"
   },
   "peerDependencies": {