@schematichq/schematic-components 2.19.0 → 2.20.0

package/README.md

@@ -59,6 +59,7 @@ const config = {
   payInAdvanceQuantities: {        // pre-fill pay-in-advance quantities, keyed by feature id (optional)
     feat_cns2asuKAG2: 3,           // "feat_cns2asuKAG2" is a feature id, 3 is the quantity
   },
+  promoCode: 'SUMMER20',           // pre-apply a Stripe promotion code (optional)
   skipped: {
     planStage: true,               // if true, skip Plan selection
     addOnStage: true,              // if true, skip Add-on selection
@@ -76,6 +77,12 @@ pricing; entries for other (or unknown) features are ignored. Combine it with
 `skipped.usageStage` / `skipped.addOnUsageStage` to send the customer straight to
 the final checkout step with the quantities already set.
 
+`promoCode` pre-applies a discount to the checkout. It expects a Stripe
+[promotion code](https://docs.stripe.com/billing/subscriptions/coupons) — the
+customer-facing code such as `SUMMER20`, not the underlying coupon id. The
+discount is applied on load, so the previewed charges reflect it and it ships
+with the final checkout request.
+
 The Plans and Add-ons available to the checkout flows must be live in your
 Schematic account [Catalog configuration](https://docs.schematichq.com/catalog/overview).
 

package/dist/schematic-components.browser.cjs.js

@@ -2927,7 +2927,10 @@ var Translator = class _Translator extends EventEmitter {
     const useOptionsReplaceForData = options.replace && !isString(options.replace);
     let data = useOptionsReplaceForData ? options.replace : options;
     if (useOptionsReplaceForData && typeof options.count !== "undefined") {
-      data.count = options.count;
+      data = {
+        ...data,
+        count: options.count
+      };
     }
     if (this.options.interpolation.defaultVariables) {
       data = {
@@ -3238,10 +3241,10 @@ var Interpolator = class {
     const skipOnVariables = options?.interpolation?.skipOnVariables !== void 0 ? options.interpolation.skipOnVariables : this.options.interpolation.skipOnVariables;
     const todos = [{
       regex: this.regexpUnescape,
-      safeValue: (val) => regexSafe(val)
+      safeValue: (val) => val
     }, {
       regex: this.regexp,
-      safeValue: (val) => this.escapeValue ? regexSafe(this.escape(val)) : regexSafe(val)
+      safeValue: (val) => this.escapeValue ? this.escape(val) : val
     }];
     todos.forEach((todo) => {
       replaces = 0;
@@ -3265,9 +3268,9 @@ var Interpolator = class {
           value = makeString(value);
         }
         const safeValue = todo.safeValue(value);
-        str = str.replace(match2[0], safeValue);
+        str = str.replace(match2[0], regexSafe(safeValue));
         if (skipOnVariables) {
-          todo.regex.lastIndex += value.length;
+          todo.regex.lastIndex += safeValue.length;
           todo.regex.lastIndex -= match2[0].length;
         } else {
           todo.regex.lastIndex = 0;
@@ -3317,7 +3320,7 @@ var Interpolator = class {
       clonedOptions = clonedOptions.replace && !isString(clonedOptions.replace) ? clonedOptions.replace : clonedOptions;
       clonedOptions.applyPostProcessor = false;
       delete clonedOptions.defaultValue;
-      const keyEndIndex = /{.*}/.test(match2[1]) ? match2[1].lastIndexOf("}") + 1 : match2[1].indexOf(this.formatSeparator);
+      const keyEndIndex = /{.*}/s.test(match2[1]) ? match2[1].lastIndexOf("}") + 1 : match2[1].indexOf(this.formatSeparator);
       if (keyEndIndex !== -1) {
         formatters = match2[1].slice(keyEndIndex).split(this.formatSeparator).map((elem) => elem.trim()).filter(Boolean);
         match2[1] = match2[1].slice(0, keyEndIndex);
@@ -7832,11 +7835,13 @@ function InvoiceResponseDataFromJSONTyped(json, ignoreDiscriminator) {
     currency: json["currency"],
     customerExternalId: json["customer_external_id"],
     dueDate: json["due_date"] == null ? void 0 : new Date(json["due_date"]),
+    endingBalance: json["ending_balance"],
     environmentId: json["environment_id"],
     externalId: json["external_id"] == null ? void 0 : json["external_id"],
     id: json["id"],
     paymentMethodExternalId: json["payment_method_external_id"] == null ? void 0 : json["payment_method_external_id"],
     providerType: BillingProviderTypeFromJSON(json["provider_type"]),
+    startingBalance: json["starting_balance"],
     status: json["status"] == null ? void 0 : InvoiceStatusFromJSON(json["status"]),
     subscriptionExternalId: json["subscription_external_id"] == null ? void 0 : json["subscription_external_id"],
     subtotal: json["subtotal"],
@@ -9907,6 +9912,7 @@ function PreviewSubscriptionFinanceResponseDataFromJSONTyped(json, ignoreDiscrim
     dueNow: json["due_now"],
     newCharges: json["new_charges"],
     percentOff: json["percent_off"],
+    periodEnd: new Date(json["period_end"]),
     periodStart: new Date(json["period_start"]),
     promoCodeApplied: json["promo_code_applied"],
     proration: json["proration"],
@@ -13533,7 +13539,7 @@ var reducer = (state, action) => {
 // src/context/EmbedProvider.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var getCustomHeaders = (sessionId) => ({
-  "X-Schematic-Components-Version": "2.19.0",
+  "X-Schematic-Components-Version": "2.20.0",
   "X-Schematic-Session-ID": sessionId
 });
 var normalizeCurrencyFilter = (filter2) => {
@@ -20304,6 +20310,7 @@ var SubscriptionSidebar = (0, import_react44.forwardRef)(
       dueNow,
       newCharges,
       percentOff,
+      periodEnd,
       periodStart,
       proration,
       taxAmount,
@@ -20314,12 +20321,14 @@ var SubscriptionSidebar = (0, import_react44.forwardRef)(
         dueNow: charges?.dueNow ?? 0,
         newCharges: charges?.newCharges ?? 0,
         percentOff: charges?.percentOff ?? 0,
+        periodEnd: charges?.periodEnd,
         periodStart: charges?.periodStart,
         proration: charges?.proration ?? 0,
         taxAmount: charges?.taxAmount ?? 0,
         taxDescription: charges?.taxDisplayName
       };
     }, [charges]);
+    const renewDate = periodEnd && !Number.isNaN(periodEnd.getTime()) ? periodEnd : periodStart;
     const updatedUsageBasedEntitlements = (0, import_react44.useMemo)(() => {
       const changedUsageBasedEntitlements = [];
       const allSelectedUsageBasedEntitlements = [
@@ -21209,7 +21218,7 @@ var SubscriptionSidebar = (0, import_react44.forwardRef)(
                   }
                 ) : 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.` }) })
+                every ${planPeriod} ${renewDate ? `on the ${formatOrdinal(renewDate.getDate())}` : ""} ${planPeriod === "year" && renewDate ? `of ${getMonthName(renewDate)}` : ""} unless you unsubscribe.` }) })
               ]
             }
           )

package/dist/schematic-components.browser.esm.js

@@ -2837,7 +2837,10 @@ var Translator = class _Translator extends EventEmitter {
     const useOptionsReplaceForData = options.replace && !isString(options.replace);
     let data = useOptionsReplaceForData ? options.replace : options;
     if (useOptionsReplaceForData && typeof options.count !== "undefined") {
-      data.count = options.count;
+      data = {
+        ...data,
+        count: options.count
+      };
     }
     if (this.options.interpolation.defaultVariables) {
       data = {
@@ -3148,10 +3151,10 @@ var Interpolator = class {
     const skipOnVariables = options?.interpolation?.skipOnVariables !== void 0 ? options.interpolation.skipOnVariables : this.options.interpolation.skipOnVariables;
     const todos = [{
       regex: this.regexpUnescape,
-      safeValue: (val) => regexSafe(val)
+      safeValue: (val) => val
     }, {
       regex: this.regexp,
-      safeValue: (val) => this.escapeValue ? regexSafe(this.escape(val)) : regexSafe(val)
+      safeValue: (val) => this.escapeValue ? this.escape(val) : val
     }];
     todos.forEach((todo) => {
       replaces = 0;
@@ -3175,9 +3178,9 @@ var Interpolator = class {
           value = makeString(value);
         }
         const safeValue = todo.safeValue(value);
-        str = str.replace(match2[0], safeValue);
+        str = str.replace(match2[0], regexSafe(safeValue));
         if (skipOnVariables) {
-          todo.regex.lastIndex += value.length;
+          todo.regex.lastIndex += safeValue.length;
           todo.regex.lastIndex -= match2[0].length;
         } else {
           todo.regex.lastIndex = 0;
@@ -3227,7 +3230,7 @@ var Interpolator = class {
       clonedOptions = clonedOptions.replace && !isString(clonedOptions.replace) ? clonedOptions.replace : clonedOptions;
       clonedOptions.applyPostProcessor = false;
       delete clonedOptions.defaultValue;
-      const keyEndIndex = /{.*}/.test(match2[1]) ? match2[1].lastIndexOf("}") + 1 : match2[1].indexOf(this.formatSeparator);
+      const keyEndIndex = /{.*}/s.test(match2[1]) ? match2[1].lastIndexOf("}") + 1 : match2[1].indexOf(this.formatSeparator);
       if (keyEndIndex !== -1) {
         formatters = match2[1].slice(keyEndIndex).split(this.formatSeparator).map((elem) => elem.trim()).filter(Boolean);
         match2[1] = match2[1].slice(0, keyEndIndex);
@@ -7742,11 +7745,13 @@ function InvoiceResponseDataFromJSONTyped(json, ignoreDiscriminator) {
     currency: json["currency"],
     customerExternalId: json["customer_external_id"],
     dueDate: json["due_date"] == null ? void 0 : new Date(json["due_date"]),
+    endingBalance: json["ending_balance"],
     environmentId: json["environment_id"],
     externalId: json["external_id"] == null ? void 0 : json["external_id"],
     id: json["id"],
     paymentMethodExternalId: json["payment_method_external_id"] == null ? void 0 : json["payment_method_external_id"],
     providerType: BillingProviderTypeFromJSON(json["provider_type"]),
+    startingBalance: json["starting_balance"],
     status: json["status"] == null ? void 0 : InvoiceStatusFromJSON(json["status"]),
     subscriptionExternalId: json["subscription_external_id"] == null ? void 0 : json["subscription_external_id"],
     subtotal: json["subtotal"],
@@ -9817,6 +9822,7 @@ function PreviewSubscriptionFinanceResponseDataFromJSONTyped(json, ignoreDiscrim
     dueNow: json["due_now"],
     newCharges: json["new_charges"],
     percentOff: json["percent_off"],
+    periodEnd: new Date(json["period_end"]),
     periodStart: new Date(json["period_start"]),
     promoCodeApplied: json["promo_code_applied"],
     proration: json["proration"],
@@ -13443,7 +13449,7 @@ var reducer = (state, action) => {
 // src/context/EmbedProvider.tsx
 import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 var getCustomHeaders = (sessionId) => ({
-  "X-Schematic-Components-Version": "2.19.0",
+  "X-Schematic-Components-Version": "2.20.0",
   "X-Schematic-Session-ID": sessionId
 });
 var normalizeCurrencyFilter = (filter2) => {
@@ -20245,6 +20251,7 @@ var SubscriptionSidebar = forwardRef7(
       dueNow,
       newCharges,
       percentOff,
+      periodEnd,
       periodStart,
       proration,
       taxAmount,
@@ -20255,12 +20262,14 @@ var SubscriptionSidebar = forwardRef7(
         dueNow: charges?.dueNow ?? 0,
         newCharges: charges?.newCharges ?? 0,
         percentOff: charges?.percentOff ?? 0,
+        periodEnd: charges?.periodEnd,
         periodStart: charges?.periodStart,
         proration: charges?.proration ?? 0,
         taxAmount: charges?.taxAmount ?? 0,
         taxDescription: charges?.taxDisplayName
       };
     }, [charges]);
+    const renewDate = periodEnd && !Number.isNaN(periodEnd.getTime()) ? periodEnd : periodStart;
     const updatedUsageBasedEntitlements = useMemo18(() => {
       const changedUsageBasedEntitlements = [];
       const allSelectedUsageBasedEntitlements = [
@@ -21150,7 +21159,7 @@ var SubscriptionSidebar = forwardRef7(
                   }
                 ) : 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.` }) })
+                every ${planPeriod} ${renewDate ? `on the ${formatOrdinal(renewDate.getDate())}` : ""} ${planPeriod === "year" && renewDate ? `of ${getMonthName(renewDate)}` : ""} unless you unsubscribe.` }) })
               ]
             }
           )

package/dist/schematic-components.cjs.js

@@ -4698,7 +4698,10 @@ var Translator = class _Translator extends EventEmitter {
     const useOptionsReplaceForData = options.replace && !isString(options.replace);
     let data = useOptionsReplaceForData ? options.replace : options;
     if (useOptionsReplaceForData && typeof options.count !== "undefined") {
-      data.count = options.count;
+      data = {
+        ...data,
+        count: options.count
+      };
     }
     if (this.options.interpolation.defaultVariables) {
       data = {
@@ -5009,10 +5012,10 @@ var Interpolator = class {
     const skipOnVariables = options?.interpolation?.skipOnVariables !== void 0 ? options.interpolation.skipOnVariables : this.options.interpolation.skipOnVariables;
     const todos = [{
       regex: this.regexpUnescape,
-      safeValue: (val) => regexSafe(val)
+      safeValue: (val) => val
     }, {
       regex: this.regexp,
-      safeValue: (val) => this.escapeValue ? regexSafe(this.escape(val)) : regexSafe(val)
+      safeValue: (val) => this.escapeValue ? this.escape(val) : val
     }];
     todos.forEach((todo) => {
       replaces = 0;
@@ -5036,9 +5039,9 @@ var Interpolator = class {
           value = makeString(value);
         }
         const safeValue = todo.safeValue(value);
-        str = str.replace(match[0], safeValue);
+        str = str.replace(match[0], regexSafe(safeValue));
         if (skipOnVariables) {
-          todo.regex.lastIndex += value.length;
+          todo.regex.lastIndex += safeValue.length;
           todo.regex.lastIndex -= match[0].length;
         } else {
           todo.regex.lastIndex = 0;
@@ -5088,7 +5091,7 @@ var Interpolator = class {
       clonedOptions = clonedOptions.replace && !isString(clonedOptions.replace) ? clonedOptions.replace : clonedOptions;
       clonedOptions.applyPostProcessor = false;
       delete clonedOptions.defaultValue;
-      const keyEndIndex = /{.*}/.test(match[1]) ? match[1].lastIndexOf("}") + 1 : match[1].indexOf(this.formatSeparator);
+      const keyEndIndex = /{.*}/s.test(match[1]) ? match[1].lastIndexOf("}") + 1 : match[1].indexOf(this.formatSeparator);
       if (keyEndIndex !== -1) {
         formatters = match[1].slice(keyEndIndex).split(this.formatSeparator).map((elem) => elem.trim()).filter(Boolean);
         match[1] = match[1].slice(0, keyEndIndex);
@@ -8188,11 +8191,13 @@ function InvoiceResponseDataFromJSONTyped(json, ignoreDiscriminator) {
     currency: json["currency"],
     customerExternalId: json["customer_external_id"],
     dueDate: json["due_date"] == null ? void 0 : new Date(json["due_date"]),
+    endingBalance: json["ending_balance"],
     environmentId: json["environment_id"],
     externalId: json["external_id"] == null ? void 0 : json["external_id"],
     id: json["id"],
     paymentMethodExternalId: json["payment_method_external_id"] == null ? void 0 : json["payment_method_external_id"],
     providerType: BillingProviderTypeFromJSON(json["provider_type"]),
+    startingBalance: json["starting_balance"],
     status: json["status"] == null ? void 0 : InvoiceStatusFromJSON(json["status"]),
     subscriptionExternalId: json["subscription_external_id"] == null ? void 0 : json["subscription_external_id"],
     subtotal: json["subtotal"],
@@ -10263,6 +10268,7 @@ function PreviewSubscriptionFinanceResponseDataFromJSONTyped(json, ignoreDiscrim
     dueNow: json["due_now"],
     newCharges: json["new_charges"],
     percentOff: json["percent_off"],
+    periodEnd: new Date(json["period_end"]),
     periodStart: new Date(json["period_start"]),
     promoCodeApplied: json["promo_code_applied"],
     proration: json["proration"],
@@ -13890,7 +13896,7 @@ var reducer = (state, action) => {
 // src/context/EmbedProvider.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var getCustomHeaders = (sessionId) => ({
-  "X-Schematic-Components-Version": "2.19.0",
+  "X-Schematic-Components-Version": "2.20.0",
   "X-Schematic-Session-ID": sessionId
 });
 var normalizeCurrencyFilter = (filter) => {
@@ -20679,6 +20685,7 @@ var SubscriptionSidebar = (0, import_react43.forwardRef)(
       dueNow,
       newCharges,
       percentOff,
+      periodEnd,
       periodStart,
       proration,
       taxAmount,
@@ -20689,12 +20696,14 @@ var SubscriptionSidebar = (0, import_react43.forwardRef)(
         dueNow: charges?.dueNow ?? 0,
         newCharges: charges?.newCharges ?? 0,
         percentOff: charges?.percentOff ?? 0,
+        periodEnd: charges?.periodEnd,
         periodStart: charges?.periodStart,
         proration: charges?.proration ?? 0,
         taxAmount: charges?.taxAmount ?? 0,
         taxDescription: charges?.taxDisplayName
       };
     }, [charges]);
+    const renewDate = periodEnd && !Number.isNaN(periodEnd.getTime()) ? periodEnd : periodStart;
     const updatedUsageBasedEntitlements = (0, import_react43.useMemo)(() => {
       const changedUsageBasedEntitlements = [];
       const allSelectedUsageBasedEntitlements = [
@@ -21584,7 +21593,7 @@ var SubscriptionSidebar = (0, import_react43.forwardRef)(
                   }
                 ) : 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.` }) })
+                every ${planPeriod} ${renewDate ? `on the ${formatOrdinal(renewDate.getDate())}` : ""} ${planPeriod === "year" && renewDate ? `of ${getMonthName(renewDate)}` : ""} unless you unsubscribe.` }) })
               ]
             }
           )

package/dist/schematic-components.d.ts

@@ -8507,6 +8507,12 @@ declare interface InvoiceResponseData {
      * @memberof InvoiceResponseData
      */
     dueDate?: Date | null;
+    /**
+     *
+     * @type {number}
+     * @memberof InvoiceResponseData
+     */
+    endingBalance: number;
     /**
      *
      * @type {string}
@@ -8537,6 +8543,12 @@ declare interface InvoiceResponseData {
      * @memberof InvoiceResponseData
      */
     providerType: BillingProviderType;
+    /**
+     *
+     * @type {number}
+     * @memberof InvoiceResponseData
+     */
+    startingBalance: number;
     /**
      *
      * @type {InvoiceStatus}
@@ -11107,6 +11119,12 @@ declare interface PreviewSubscriptionFinanceResponseData {
      * @memberof PreviewSubscriptionFinanceResponseData
      */
     percentOff: number;
+    /**
+     *
+     * @type {Date}
+     * @memberof PreviewSubscriptionFinanceResponseData
+     */
+    periodEnd: Date;
     /**
      *
      * @type {Date}

package/dist/schematic-components.esm.js

@@ -2837,7 +2837,10 @@ var Translator = class _Translator extends EventEmitter {
     const useOptionsReplaceForData = options.replace && !isString(options.replace);
     let data = useOptionsReplaceForData ? options.replace : options;
     if (useOptionsReplaceForData && typeof options.count !== "undefined") {
-      data.count = options.count;
+      data = {
+        ...data,
+        count: options.count
+      };
     }
     if (this.options.interpolation.defaultVariables) {
       data = {
@@ -3148,10 +3151,10 @@ var Interpolator = class {
     const skipOnVariables = options?.interpolation?.skipOnVariables !== void 0 ? options.interpolation.skipOnVariables : this.options.interpolation.skipOnVariables;
     const todos = [{
       regex: this.regexpUnescape,
-      safeValue: (val) => regexSafe(val)
+      safeValue: (val) => val
     }, {
       regex: this.regexp,
-      safeValue: (val) => this.escapeValue ? regexSafe(this.escape(val)) : regexSafe(val)
+      safeValue: (val) => this.escapeValue ? this.escape(val) : val
     }];
     todos.forEach((todo) => {
       replaces = 0;
@@ -3175,9 +3178,9 @@ var Interpolator = class {
           value = makeString(value);
         }
         const safeValue = todo.safeValue(value);
-        str = str.replace(match2[0], safeValue);
+        str = str.replace(match2[0], regexSafe(safeValue));
         if (skipOnVariables) {
-          todo.regex.lastIndex += value.length;
+          todo.regex.lastIndex += safeValue.length;
           todo.regex.lastIndex -= match2[0].length;
         } else {
           todo.regex.lastIndex = 0;
@@ -3227,7 +3230,7 @@ var Interpolator = class {
       clonedOptions = clonedOptions.replace && !isString(clonedOptions.replace) ? clonedOptions.replace : clonedOptions;
       clonedOptions.applyPostProcessor = false;
       delete clonedOptions.defaultValue;
-      const keyEndIndex = /{.*}/.test(match2[1]) ? match2[1].lastIndexOf("}") + 1 : match2[1].indexOf(this.formatSeparator);
+      const keyEndIndex = /{.*}/s.test(match2[1]) ? match2[1].lastIndexOf("}") + 1 : match2[1].indexOf(this.formatSeparator);
       if (keyEndIndex !== -1) {
         formatters = match2[1].slice(keyEndIndex).split(this.formatSeparator).map((elem) => elem.trim()).filter(Boolean);
         match2[1] = match2[1].slice(0, keyEndIndex);
@@ -7867,11 +7870,13 @@ function InvoiceResponseDataFromJSONTyped(json, ignoreDiscriminator) {
     currency: json["currency"],
     customerExternalId: json["customer_external_id"],
     dueDate: json["due_date"] == null ? void 0 : new Date(json["due_date"]),
+    endingBalance: json["ending_balance"],
     environmentId: json["environment_id"],
     externalId: json["external_id"] == null ? void 0 : json["external_id"],
     id: json["id"],
     paymentMethodExternalId: json["payment_method_external_id"] == null ? void 0 : json["payment_method_external_id"],
     providerType: BillingProviderTypeFromJSON(json["provider_type"]),
+    startingBalance: json["starting_balance"],
     status: json["status"] == null ? void 0 : InvoiceStatusFromJSON(json["status"]),
     subscriptionExternalId: json["subscription_external_id"] == null ? void 0 : json["subscription_external_id"],
     subtotal: json["subtotal"],
@@ -9942,6 +9947,7 @@ function PreviewSubscriptionFinanceResponseDataFromJSONTyped(json, ignoreDiscrim
     dueNow: json["due_now"],
     newCharges: json["new_charges"],
     percentOff: json["percent_off"],
+    periodEnd: new Date(json["period_end"]),
     periodStart: new Date(json["period_start"]),
     promoCodeApplied: json["promo_code_applied"],
     proration: json["proration"],
@@ -13568,7 +13574,7 @@ var reducer = (state, action) => {
 // src/context/EmbedProvider.tsx
 import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 var getCustomHeaders = (sessionId) => ({
-  "X-Schematic-Components-Version": "2.19.0",
+  "X-Schematic-Components-Version": "2.20.0",
   "X-Schematic-Session-ID": sessionId
 });
 var normalizeCurrencyFilter = (filter2) => {
@@ -20370,6 +20376,7 @@ var SubscriptionSidebar = forwardRef7(
       dueNow,
       newCharges,
       percentOff,
+      periodEnd,
       periodStart,
       proration,
       taxAmount,
@@ -20380,12 +20387,14 @@ var SubscriptionSidebar = forwardRef7(
         dueNow: charges?.dueNow ?? 0,
         newCharges: charges?.newCharges ?? 0,
         percentOff: charges?.percentOff ?? 0,
+        periodEnd: charges?.periodEnd,
         periodStart: charges?.periodStart,
         proration: charges?.proration ?? 0,
         taxAmount: charges?.taxAmount ?? 0,
         taxDescription: charges?.taxDisplayName
       };
     }, [charges]);
+    const renewDate = periodEnd && !Number.isNaN(periodEnd.getTime()) ? periodEnd : periodStart;
     const updatedUsageBasedEntitlements = useMemo18(() => {
       const changedUsageBasedEntitlements = [];
       const allSelectedUsageBasedEntitlements = [
@@ -21275,7 +21284,7 @@ var SubscriptionSidebar = forwardRef7(
                   }
                 ) : 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.` }) })
+                every ${planPeriod} ${renewDate ? `on the ${formatOrdinal(renewDate.getDate())}` : ""} ${planPeriod === "year" && renewDate ? `of ${getMonthName(renewDate)}` : ""} unless you unsubscribe.` }) })
               ]
             }
           )

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@schematichq/schematic-components",
-  "version": "2.19.0",
+  "version": "2.20.0",
   "main": "dist/schematic-components.cjs.js",
   "module": "dist/schematic-components.esm.js",
   "types": "dist/schematic-components.d.ts",
@@ -56,7 +56,7 @@
   "dependencies": {
     "@schematichq/schematic-icons": "^0.8.0",
     "@stripe/stripe-js": "^9.9.0",
-    "i18next": "^26.3.4",
+    "i18next": "^26.3.6",
     "lodash": "^4.18.1",
     "pako": "^3.0.1",
     "react-i18next": "16.1.6",
@@ -88,8 +88,8 @@
     "globals": "^17.7.0",
     "happy-dom": "^20.10.6",
     "jsdom": "^29.1.1",
-    "msw": "^2.14.6",
-    "prettier": "^3.9.4",
+    "msw": "^2.15.0",
+    "prettier": "^3.9.5",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
     "typescript": "^6.0.3",