@schematichq/schematic-components 2.20.0 → 2.21.0

package/dist/schematic-components.cjs.js

@@ -778,7 +778,7 @@ var require_styled_components_cjs = __commonJS({
     var u = "undefined" != typeof process && void 0 !== process.env && (process.env.REACT_APP_SC_ATTR || process.env.SC_ATTR) || "data-styled";
     var d = "active";
     var h = "data-styled-version";
-    var p = "6.4.3";
+    var p = "6.4.4";
     var f = "/*!sc*/\n";
     var m = "undefined" != typeof window && "undefined" != typeof document;
     var y = void 0 === a.default.createContext;
@@ -6823,6 +6823,9 @@ var en_default = {
     "After the trial, subscribe": "After the trial, subscription starts and you will be billed.",
     Agreement: "Agreement",
     "Amount off": "{{amount}} off",
+    "Applied balance towards next invoice": "Applied balance towards next invoice",
+    "Discount for months_one": "{{discount}} for next month",
+    "Discount for months_other": "{{discount}} for next {{count}} months",
     "Auto Top-up": "Auto top-up",
     "Auto top-up enabled": "Auto top-up enabled",
     "Auto top-up disabled": "Auto top-up disabled",
@@ -6918,7 +6921,7 @@ var en_default = {
     Proration: "Proration",
     Quantity: "Quantity",
     "Quantity to pay for in advance": "Quantity to pay for in advance",
-    "Remaining balance": "Remaining balance",
+    "Remaining balance after next invoice": "Remaining balance after next invoice",
     Remove: "Remove",
     "Remove add-on": "Remove add-on",
     Resets: "Resets {{date}}",
@@ -6993,6 +6996,14 @@ 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 billed": "You will be billed {{price}} {{usage}}for this subscription every {{period}} {{schedule}}unless you unsubscribe.",
+    "You will be billed with discount window": "You will be billed {{price}} {{usage}}for this subscription every {{period}} {{schedule}}{{window}}, then {{fullPrice}} every {{period}} afterward, unless you unsubscribe.",
+    "You will be billed next bill discount": "You will be billed {{price}} {{usage}}for this subscription on your next bill, then {{fullPrice}} every {{period}} {{schedule}}afterward, unless you unsubscribe.",
+    "plus usage based costs": "plus usage based costs",
+    "on the day": "on the {{day}}",
+    "of month": "of {{month}}",
+    "for the next months_one": "for the next month",
+    "for the next months_other": "for the next {{count}} months",
     "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}}",
@@ -8673,6 +8684,20 @@ function EntitlementValueTypeFromJSONTyped(json, ignoreDiscriminator) {
   return json;
 }
 
+// src/api/checkoutexternal/models/WarningTier.ts
+function WarningTierFromJSON(json) {
+  return WarningTierFromJSONTyped(json, false);
+}
+function WarningTierFromJSONTyped(json, ignoreDiscriminator) {
+  if (json == null) {
+    return json;
+  }
+  return {
+    key: json["key"],
+    value: json["value"]
+  };
+}
+
 // src/api/checkoutexternal/models/FeatureEntitlement.ts
 function FeatureEntitlementFromJSON(json) {
   return FeatureEntitlementFromJSONTyped(json, false);
@@ -8699,7 +8724,8 @@ function FeatureEntitlementFromJSONTyped(json, ignoreDiscriminator) {
     monthReset: json["month_reset"] == null ? void 0 : MetricPeriodMonthResetFromJSON(json["month_reset"]),
     softLimit: json["soft_limit"] == null ? void 0 : json["soft_limit"],
     usage: json["usage"] == null ? void 0 : json["usage"],
-    valueType: EntitlementValueTypeFromJSON(json["value_type"])
+    valueType: EntitlementValueTypeFromJSON(json["value_type"]),
+    warningTiers: json["warning_tiers"] == null ? void 0 : json["warning_tiers"].map(WarningTierFromJSON)
   };
 }
 
@@ -9046,6 +9072,7 @@ function CompanyOverrideNoteResponseDataFromJSONTyped(json, ignoreDiscriminator)
 var FeatureType = {
   Boolean: "boolean",
   Event: "event",
+  License: "license",
   Trait: "trait"
 };
 function FeatureTypeFromJSON(json) {
@@ -9078,13 +9105,15 @@ function FeatureResponseDataFromJSONTyped(json, ignoreDiscriminator) {
     featureType: FeatureTypeFromJSON(json["feature_type"]),
     icon: json["icon"],
     id: json["id"],
+    licenseId: json["license_id"] == null ? void 0 : json["license_id"],
     lifecyclePhase: json["lifecycle_phase"] == null ? void 0 : FeatureLifecyclePhaseFromJSON(json["lifecycle_phase"]),
     maintainerAccountMemberId: json["maintainer_account_member_id"] == null ? void 0 : json["maintainer_account_member_id"],
     name: json["name"],
     pluralName: json["plural_name"] == null ? void 0 : json["plural_name"],
     singularName: json["singular_name"] == null ? void 0 : json["singular_name"],
     traitId: json["trait_id"] == null ? void 0 : json["trait_id"],
-    updatedAt: new Date(json["updated_at"])
+    updatedAt: new Date(json["updated_at"]),
+    usageLimitTraitId: json["usage_limit_trait_id"] == null ? void 0 : json["usage_limit_trait_id"]
   };
 }
 
@@ -9436,6 +9465,7 @@ function FeatureInPlanResponseDataFromJSONTyped(json, ignoreDiscriminator) {
     flags: json["flags"].map(FlagInPlanResponseDataFromJSON),
     icon: json["icon"],
     id: json["id"],
+    licenseId: json["license_id"] == null ? void 0 : json["license_id"],
     lifecyclePhase: json["lifecycle_phase"] == null ? void 0 : FeatureLifecyclePhaseFromJSON(json["lifecycle_phase"]),
     maintainerAccountMemberId: json["maintainer_account_member_id"] == null ? void 0 : json["maintainer_account_member_id"],
     name: json["name"],
@@ -9444,7 +9474,8 @@ function FeatureInPlanResponseDataFromJSONTyped(json, ignoreDiscriminator) {
     singularName: json["singular_name"] == null ? void 0 : json["singular_name"],
     trait: json["trait"] == null ? void 0 : EntityTraitDefinitionResponseDataFromJSON(json["trait"]),
     traitId: json["trait_id"] == null ? void 0 : json["trait_id"],
-    updatedAt: new Date(json["updated_at"])
+    updatedAt: new Date(json["updated_at"]),
+    usageLimitTraitId: json["usage_limit_trait_id"] == null ? void 0 : json["usage_limit_trait_id"]
   };
 }
 
@@ -9521,6 +9552,20 @@ function PlanCreditGrantViewFromJSONTyped(json, ignoreDiscriminator) {
   };
 }
 
+// src/api/checkoutexternal/models/PlanCatalogMembershipResponseData.ts
+function PlanCatalogMembershipResponseDataFromJSON(json) {
+  return PlanCatalogMembershipResponseDataFromJSONTyped(json, false);
+}
+function PlanCatalogMembershipResponseDataFromJSONTyped(json, ignoreDiscriminator) {
+  if (json == null) {
+    return json;
+  }
+  return {
+    id: json["id"],
+    name: json["name"]
+  };
+}
+
 // src/api/checkoutexternal/models/PlanCurrencyPricesResponseData.ts
 function PlanCurrencyPricesResponseDataFromJSON(json) {
   return PlanCurrencyPricesResponseDataFromJSONTyped(json, false);
@@ -9677,6 +9722,9 @@ function CompanyPlanDetailResponseDataFromJSONTyped(json, ignoreDiscriminator) {
     ),
     billingProduct: json["billing_product"] == null ? void 0 : BillingProductDetailResponseDataFromJSON(json["billing_product"]),
     billingStrategy: BillingStrategyFromJSON(json["billing_strategy"]),
+    catalogs: json["catalogs"] == null ? void 0 : json["catalogs"].map(
+      PlanCatalogMembershipResponseDataFromJSON
+    ),
     chargeType: ChargeTypeFromJSON(json["charge_type"]),
     companyCanTrial: json["company_can_trial"],
     companyCount: json["company_count"],
@@ -9850,6 +9898,9 @@ function PlanDetailResponseDataFromJSONTyped(json, ignoreDiscriminator) {
     ),
     billingProduct: json["billing_product"] == null ? void 0 : BillingProductDetailResponseDataFromJSON(json["billing_product"]),
     billingStrategy: BillingStrategyFromJSON(json["billing_strategy"]),
+    catalogs: json["catalogs"] == null ? void 0 : json["catalogs"].map(
+      PlanCatalogMembershipResponseDataFromJSON
+    ),
     chargeType: ChargeTypeFromJSON(json["charge_type"]),
     companyCount: json["company_count"],
     companyId: json["company_id"] == null ? void 0 : json["company_id"],
@@ -10019,6 +10070,7 @@ function ComponentResponseDataFromJSONTyped(json, ignoreDiscriminator) {
   }
   return {
     ast: json["ast"] == null ? void 0 : json["ast"],
+    catalogId: json["catalog_id"] == null ? void 0 : json["catalog_id"],
     createdAt: new Date(json["created_at"]),
     id: json["id"],
     name: json["name"],
@@ -10255,6 +10307,29 @@ function PreviewSubscriptionUpcomingInvoiceLineItemsFromJSONTyped(json, ignoreDi
   };
 }
 
+// src/api/checkoutexternal/models/PreviewSubscriptionDiscountResponseData.ts
+function PreviewSubscriptionDiscountResponseDataFromJSON(json) {
+  return PreviewSubscriptionDiscountResponseDataFromJSONTyped(json, false);
+}
+function PreviewSubscriptionDiscountResponseDataFromJSONTyped(json, ignoreDiscriminator) {
+  if (json == null) {
+    return json;
+  }
+  return {
+    amountOff: json["amount_off"] == null ? void 0 : json["amount_off"],
+    couponName: json["coupon_name"],
+    currency: json["currency"] == null ? void 0 : json["currency"],
+    customerFacingCode: json["customer_facing_code"] == null ? void 0 : json["customer_facing_code"],
+    duration: json["duration"],
+    durationInMonths: json["duration_in_months"] == null ? void 0 : json["duration_in_months"],
+    endedAt: json["ended_at"] == null ? void 0 : new Date(json["ended_at"]),
+    isActive: json["is_active"],
+    percentOff: json["percent_off"] == null ? void 0 : json["percent_off"],
+    promoCodeExternalId: json["promo_code_external_id"] == null ? void 0 : json["promo_code_external_id"],
+    startedAt: new Date(json["started_at"])
+  };
+}
+
 // src/api/checkoutexternal/models/PreviewSubscriptionFinanceResponseData.ts
 function PreviewSubscriptionFinanceResponseDataFromJSON(json) {
   return PreviewSubscriptionFinanceResponseDataFromJSONTyped(json, false);
@@ -10265,6 +10340,9 @@ function PreviewSubscriptionFinanceResponseDataFromJSONTyped(json, ignoreDiscrim
   }
   return {
     amountOff: json["amount_off"],
+    discounts: json["discounts"].map(
+      PreviewSubscriptionDiscountResponseDataFromJSON
+    ),
     dueNow: json["due_now"],
     newCharges: json["new_charges"],
     percentOff: json["percent_off"],
@@ -11882,13 +11960,15 @@ function FeatureResponseDataFromJSONTyped5(json, ignoreDiscriminator) {
     featureType: FeatureTypeFromJSON2(json["feature_type"]),
     icon: json["icon"],
     id: json["id"],
+    licenseId: json["license_id"] == null ? void 0 : json["license_id"],
     lifecyclePhase: json["lifecycle_phase"] == null ? void 0 : FeatureLifecyclePhaseFromJSON2(json["lifecycle_phase"]),
     maintainerAccountMemberId: json["maintainer_account_member_id"] == null ? void 0 : json["maintainer_account_member_id"],
     name: json["name"],
     pluralName: json["plural_name"] == null ? void 0 : json["plural_name"],
     singularName: json["singular_name"] == null ? void 0 : json["singular_name"],
     traitId: json["trait_id"] == null ? void 0 : json["trait_id"],
-    updatedAt: new Date(json["updated_at"])
+    updatedAt: new Date(json["updated_at"]),
+    usageLimitTraitId: json["usage_limit_trait_id"] == null ? void 0 : json["usage_limit_trait_id"]
   };
 }
 
@@ -11945,6 +12025,7 @@ function FeatureInPlanResponseDataFromJSONTyped6(json, ignoreDiscriminator) {
     flags: json["flags"].map(FlagInPlanResponseDataFromJSON2),
     icon: json["icon"],
     id: json["id"],
+    licenseId: json["license_id"] == null ? void 0 : json["license_id"],
     lifecyclePhase: json["lifecycle_phase"] == null ? void 0 : FeatureLifecyclePhaseFromJSON2(json["lifecycle_phase"]),
     maintainerAccountMemberId: json["maintainer_account_member_id"] == null ? void 0 : json["maintainer_account_member_id"],
     name: json["name"],
@@ -11953,7 +12034,8 @@ function FeatureInPlanResponseDataFromJSONTyped6(json, ignoreDiscriminator) {
     singularName: json["singular_name"] == null ? void 0 : json["singular_name"],
     trait: json["trait"] == null ? void 0 : EntityTraitDefinitionResponseDataFromJSON2(json["trait"]),
     traitId: json["trait_id"] == null ? void 0 : json["trait_id"],
-    updatedAt: new Date(json["updated_at"])
+    updatedAt: new Date(json["updated_at"]),
+    usageLimitTraitId: json["usage_limit_trait_id"] == null ? void 0 : json["usage_limit_trait_id"]
   };
 }
 
@@ -12132,6 +12214,20 @@ function PlanCreditGrantViewFromJSONTyped3(json, ignoreDiscriminator) {
   };
 }
 
+// src/api/componentspublic/models/PlanCatalogMembershipResponseData.ts
+function PlanCatalogMembershipResponseDataFromJSON2(json) {
+  return PlanCatalogMembershipResponseDataFromJSONTyped5(json, false);
+}
+function PlanCatalogMembershipResponseDataFromJSONTyped5(json, ignoreDiscriminator) {
+  if (json == null) {
+    return json;
+  }
+  return {
+    id: json["id"],
+    name: json["name"]
+  };
+}
+
 // src/api/componentspublic/models/PlanCurrencyPricesResponseData.ts
 function PlanCurrencyPricesResponseDataFromJSON2(json) {
   return PlanCurrencyPricesResponseDataFromJSONTyped5(json, false);
@@ -12199,6 +12295,9 @@ function PlanViewPublicResponseDataFromJSONTyped(json, ignoreDiscriminator) {
     ),
     billingProduct: json["billing_product"] == null ? void 0 : BillingProductDetailResponseDataFromJSON2(json["billing_product"]),
     billingStrategy: BillingStrategyFromJSON2(json["billing_strategy"]),
+    catalogs: json["catalogs"] == null ? void 0 : json["catalogs"].map(
+      PlanCatalogMembershipResponseDataFromJSON2
+    ),
     chargeType: ChargeTypeFromJSON2(json["charge_type"]),
     companyCount: json["company_count"],
     companyId: json["company_id"] == null ? void 0 : json["company_id"],
@@ -12816,7 +12915,7 @@ function getMetricPeriodName(entitlement) {
   const name = period ? PeriodName[period] : void 0;
   return name;
 }
-function getUsageDetails(entitlement, period, currency) {
+function getUsageDetails(entitlement, period, currency, options) {
   const billingPrice = currency ? getEntitlementPrice(entitlement, period ?? "month", currency) : period === "year" ? entitlement.yearlyUsageBasedPrice : period === "quarter" ? entitlement.quarterlyUsageBasedPrice : period === "month" ? entitlement.monthlyUsageBasedPrice : void 0;
   let limit;
   if ((!entitlement.priceBehavior || entitlement.priceBehavior === EntitlementPriceBehavior.PayInAdvance) && typeof entitlement.allocation === "number") {
@@ -12864,8 +12963,21 @@ function getUsageDetails(entitlement, period, currency) {
       start = end + 1;
     }
   }
+  if (options?.showWarningThresholdAsLimit) {
+    const warningThreshold = getEntitlementWarningThreshold(
+      entitlement.planEntitlement?.warningTiers
+    );
+    if (typeof warningThreshold === "number") {
+      limit = warningThreshold;
+    }
+  }
   return { billingPrice, limit, amount, cost, currentTier };
 }
+var WARNING_TIER_DEFAULT_KEY = "default";
+function getEntitlementWarningThreshold(warningTiers) {
+  const tier = warningTiers?.find((t2) => t2?.key === WARNING_TIER_DEFAULT_KEY);
+  return typeof tier?.value === "number" ? tier.value : void 0;
+}
 function getCreditBasedEntitlementLimit(entitlement, credits) {
   const matchedCredit = credits.find(
     (credit) => credit.id === entitlement.valueCredit?.id
@@ -13413,85 +13525,6 @@ function modifyDate(date, days) {
   return copy2;
 }
 
-// src/utils/error.ts
-function isError(value) {
-  return value instanceof Error;
-}
-var ERROR_UNKNOWN = new Error("An unknown error occurred.");
-
-// src/utils/event.ts
-var createKeyboardExecutionHandler = (fn) => {
-  const handler = (event) => {
-    if (event.key === "Enter" || event.key === " ") {
-      event.preventDefault();
-      fn?.(event);
-    }
-  };
-  return handler;
-};
-
-// src/utils/markdown.tsx
-var import_react13 = require("react");
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var TOKEN = /(\[[^\]]+\]\([^)\s]+\))|(\*\*[^*]+\*\*)|(\*[^*]+\*)/g;
-var LINK = /^\[([^\]]+)\]\(([^)\s]+)\)$/;
-var isSafeUrl = (url) => {
-  try {
-    const { protocol } = new URL(url);
-    return protocol === "http:" || protocol === "https:";
-  } catch {
-    return false;
-  }
-};
-var renderOptInMarkdown = (text) => {
-  if (!text) {
-    return null;
-  }
-  const nodes = [];
-  let lastIndex = 0;
-  let key = 0;
-  TOKEN.lastIndex = 0;
-  let match;
-  while ((match = TOKEN.exec(text)) !== null) {
-    if (match.index > lastIndex) {
-      nodes.push(
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react13.Fragment, { children: text.slice(lastIndex, match.index) }, key++)
-      );
-    }
-    const [token, link, bold, italic] = match;
-    if (link) {
-      const parts = LINK.exec(link);
-      if (parts && isSafeUrl(parts[2])) {
-        nodes.push(
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-            Text,
-            {
-              as: "a",
-              display: "link",
-              href: parts[2],
-              target: "_blank",
-              rel: "noopener noreferrer",
-              children: parts[1]
-            },
-            key++
-          )
-        );
-      } else {
-        nodes.push(/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react13.Fragment, { children: parts ? parts[1] : token }, key++));
-      }
-    } else if (bold) {
-      nodes.push(/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("strong", { children: bold.slice(2, -2) }, key++));
-    } else if (italic) {
-      nodes.push(/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("em", { children: italic.slice(1, -1) }, key++));
-    }
-    lastIndex = match.index + token.length;
-  }
-  if (lastIndex < text.length) {
-    nodes.push(/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react13.Fragment, { children: text.slice(lastIndex) }, key));
-  }
-  return nodes;
-};
-
 // src/utils/string.ts
 var ZERO_DECIMAL_CURRENCIES = /* @__PURE__ */ new Set([
   "BIF",
@@ -13640,6 +13673,168 @@ function getCurrencySymbol(currency) {
   }
 }
 
+// src/utils/discount.ts
+function getSubscriptionDiscount(discounts, subscriptionTotal, subscriptionCurrency) {
+  const activeDiscounts = (discounts || []).filter(
+    (discount2) => discount2.isActive && (typeof discount2.percentOff === "number" && discount2.percentOff > 0 || typeof discount2.amountOff === "number" && discount2.amountOff > 0)
+  );
+  if (activeDiscounts.length !== 1) {
+    return void 0;
+  }
+  const discount = activeDiscounts[0];
+  const isPercentOff = typeof discount.percentOff === "number" && discount.percentOff > 0;
+  if (!isPercentOff && discount.currency && subscriptionCurrency && discount.currency.toLowerCase() !== subscriptionCurrency.toLowerCase()) {
+    return void 0;
+  }
+  const discountedTotal = isPercentOff ? subscriptionTotal * (1 - discount.percentOff / 100) : Math.max(0, subscriptionTotal - (discount.amountOff ?? 0));
+  if (discountedTotal >= subscriptionTotal) {
+    return void 0;
+  }
+  return {
+    duration: discount.duration,
+    durationInMonths: discount.durationInMonths ?? void 0,
+    discountedPrice: formatCurrency(
+      discountedTotal,
+      subscriptionCurrency ?? void 0
+    )
+  };
+}
+function getBillingPreviewText({
+  subscriptionPrice,
+  planPeriod,
+  periodStart,
+  hasUsageBasedCosts,
+  discount
+}, t2) {
+  if (!subscriptionPrice) {
+    return null;
+  }
+  const usage = hasUsageBasedCosts ? `${t2("plus usage based costs")} ` : "";
+  const scheduleParts = [];
+  if (periodStart) {
+    scheduleParts.push(
+      t2("on the day", { day: formatOrdinal(periodStart.getDate()) })
+    );
+  }
+  if (planPeriod === "year" && periodStart) {
+    scheduleParts.push(t2("of month", { month: getMonthName(periodStart) }));
+  }
+  const schedule = scheduleParts.length > 0 ? `${scheduleParts.join(" ")} ` : "";
+  if (!discount) {
+    return t2("You will be billed", {
+      price: subscriptionPrice,
+      usage,
+      period: planPeriod,
+      schedule
+    });
+  }
+  const { duration, durationInMonths, discountedPrice } = discount;
+  if (duration === "forever") {
+    return t2("You will be billed", {
+      price: discountedPrice,
+      usage,
+      period: planPeriod,
+      schedule
+    });
+  }
+  if (duration === "repeating" && durationInMonths) {
+    return t2("You will be billed with discount window", {
+      price: discountedPrice,
+      usage,
+      period: planPeriod,
+      schedule,
+      window: t2("for the next months", { count: durationInMonths }),
+      fullPrice: subscriptionPrice
+    });
+  }
+  return t2("You will be billed next bill discount", {
+    price: discountedPrice,
+    usage,
+    period: planPeriod,
+    schedule,
+    fullPrice: subscriptionPrice
+  });
+}
+
+// src/utils/error.ts
+function isError(value) {
+  return value instanceof Error;
+}
+var ERROR_UNKNOWN = new Error("An unknown error occurred.");
+
+// src/utils/event.ts
+var createKeyboardExecutionHandler = (fn) => {
+  const handler = (event) => {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      fn?.(event);
+    }
+  };
+  return handler;
+};
+
+// src/utils/markdown.tsx
+var import_react13 = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var TOKEN = /(\[[^\]]+\]\([^)\s]+\))|(\*\*[^*]+\*\*)|(\*[^*]+\*)/g;
+var LINK = /^\[([^\]]+)\]\(([^)\s]+)\)$/;
+var isSafeUrl = (url) => {
+  try {
+    const { protocol } = new URL(url);
+    return protocol === "http:" || protocol === "https:";
+  } catch {
+    return false;
+  }
+};
+var renderOptInMarkdown = (text) => {
+  if (!text) {
+    return null;
+  }
+  const nodes = [];
+  let lastIndex = 0;
+  let key = 0;
+  TOKEN.lastIndex = 0;
+  let match;
+  while ((match = TOKEN.exec(text)) !== null) {
+    if (match.index > lastIndex) {
+      nodes.push(
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react13.Fragment, { children: text.slice(lastIndex, match.index) }, key++)
+      );
+    }
+    const [token, link, bold, italic] = match;
+    if (link) {
+      const parts = LINK.exec(link);
+      if (parts && isSafeUrl(parts[2])) {
+        nodes.push(
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            Text,
+            {
+              as: "a",
+              display: "link",
+              href: parts[2],
+              target: "_blank",
+              rel: "noopener noreferrer",
+              children: parts[1]
+            },
+            key++
+          )
+        );
+      } else {
+        nodes.push(/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react13.Fragment, { children: parts ? parts[1] : token }, key++));
+      }
+    } else if (bold) {
+      nodes.push(/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("strong", { children: bold.slice(2, -2) }, key++));
+    } else if (italic) {
+      nodes.push(/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("em", { children: italic.slice(1, -1) }, key++));
+    }
+    lastIndex = match.index + token.length;
+  }
+  if (lastIndex < text.length) {
+    nodes.push(/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react13.Fragment, { children: text.slice(lastIndex) }, key));
+  }
+  return nodes;
+};
+
 // src/utils/style.ts
 var import_styled_components2 = __toESM(require_styled_components_cjs());
 function attr(key, value) {
@@ -13896,7 +14091,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.20.0",
+  "X-Schematic-Components-Version": "2.21.0",
   "X-Schematic-Session-ID": sessionId
 });
 var normalizeCurrencyFilter = (filter) => {
@@ -13920,6 +14115,7 @@ var EmbedProvider = ({
   apiKey,
   apiConfig,
   currencyFilter,
+  warningThresholdConfig,
   checkoutPrefill,
   ...options
 }) => {
@@ -13935,6 +14131,7 @@ var EmbedProvider = ({
     const providedState = {
       settings: opts.settings || {},
       currencyFilter: normalizeCurrencyFilter(currencyFilter),
+      warningThresholdConfig,
       checkoutPrefill: normalizeCheckoutPrefill(checkoutPrefill)
     };
     const resolvedState = (0, import_merge2.default)({}, initialState, providedState);
@@ -14363,6 +14560,7 @@ var EmbedProvider = ({
         layout: state.layout,
         checkoutState: state.checkoutState,
         currencyFilter: state.currencyFilter,
+        warningThresholdConfig: state.warningThresholdConfig,
         checkoutPrefill: state.checkoutPrefill,
         hydratePublic: debouncedHydratePublic,
         hydrate: debouncedHydrate,
@@ -16316,7 +16514,8 @@ var Entitlement = ({
   currency: selectedCurrency
 }) => {
   const { t: t2 } = useTranslation();
-  const { data, settings } = useEmbed();
+  const { data, settings, warningThresholdConfig } = useEmbed();
+  const showWarningThresholdAsLimit = warningThresholdConfig?.showAsLimit ?? false;
   const isLightBackground = useIsLightBackground();
   const showCredits = data?.displaySettings?.showCredits ?? true;
   const showFeatureDescription = data?.displaySettings?.showFeatureDescription ?? false;
@@ -16340,7 +16539,8 @@ var Entitlement = ({
       return;
     }
     const hasNumericValue = entitlement.valueType === EntitlementValueType.Numeric || entitlement.valueType === EntitlementValueType.Unlimited || entitlement.valueType === EntitlementValueType.Trait;
-    const limit = entitlement.priceBehavior === EntitlementPriceBehavior.Overage && typeof entitlement.softLimit === "number" ? entitlement.softLimit : entitlement.valueNumeric ?? void 0;
+    const warningThreshold = showWarningThresholdAsLimit ? getEntitlementWarningThreshold(entitlement.warningTiers) : void 0;
+    const limit = typeof warningThreshold === "number" ? warningThreshold : entitlement.priceBehavior === EntitlementPriceBehavior.Overage && typeof entitlement.softLimit === "number" ? entitlement.softLimit : entitlement.valueNumeric ?? void 0;
     const creditBasedEntitlementLimit = getCreditBasedEntitlementLimit(
       entitlement,
       credits
@@ -16433,7 +16633,8 @@ var Entitlement = ({
     currency,
     packageSize,
     tiered,
-    selectedCurrency
+    selectedCurrency,
+    showWarningThresholdAsLimit
   ]);
   const usageText = (0, import_react31.useMemo)(() => {
     if (!entitlement.feature) {
@@ -17164,7 +17365,8 @@ var AddOns = ({
   currency
 }) => {
   const { t: t2 } = useTranslation();
-  const { settings } = useEmbed();
+  const { settings, warningThresholdConfig } = useEmbed();
+  const showWarningThresholdAsLimit = warningThresholdConfig?.showAsLimit ?? false;
   const isLightBackground = useIsLightBackground();
   const periodKey = period === "year" ? "yearlyPrice" : period === "quarter" ? "quarterlyPrice" : "monthlyPrice";
   const cardPadding = settings.theme.card.padding / TEXT_BASE_SIZE;
@@ -17196,10 +17398,14 @@ var AddOns = ({
             period,
             currency
           );
+          const warningThreshold = showWarningThresholdAsLimit ? getEntitlementWarningThreshold(entitlement.warningTiers) : void 0;
           return {
             isUnlimited: false,
             priceBehavior: entitlement.priceBehavior,
             softLimit: entitlement.softLimit,
+            // The limit shown next to the feature: the warning threshold when
+            // the option is on and one is configured, else the overage soft limit.
+            limit: typeof warningThreshold === "number" ? warningThreshold : entitlement.priceBehavior === EntitlementPriceBehavior.Overage ? entitlement.softLimit : void 0,
             price: priceData?.price ?? 0,
             currency: priceData?.currency || addOnCurrency,
             featureName: entitlement.feature?.name,
@@ -17348,7 +17554,7 @@ var AddOns = ({
                                 {
                                   $flexDirection: "column",
                                   $justifyContent: "center",
-                                  children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Text, { children: meteredEntitlement.priceBehavior === EntitlementPriceBehavior.Overage && meteredEntitlement.softLimit ? `${meteredEntitlement.softLimit} ${getEntitlementFeatureName(meteredEntitlement, "units")}` : getEntitlementFeatureName(meteredEntitlement) })
+                                  children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Text, { children: typeof meteredEntitlement.limit === "number" ? `${meteredEntitlement.limit} ${getEntitlementFeatureName(meteredEntitlement, "units")}` : getEntitlementFeatureName(meteredEntitlement) })
                                 }
                               )
                             ] }),
@@ -20634,7 +20840,7 @@ var SubscriptionSidebar = (0, import_react43.forwardRef)(
       );
       return { payAsYouGoEntitlements, payInAdvanceEntitlements: payInAdvanceEntitlements2 };
     }, [usageBasedEntitlements]);
-    const subscriptionPrice = (0, import_react43.useMemo)(() => {
+    const { subscriptionPrice, subscriptionTotal, subscriptionCurrency } = (0, import_react43.useMemo)(() => {
       let planPrice;
       let resolvedCurrency;
       if (selectedPlan) {
@@ -20670,7 +20876,11 @@ var SubscriptionSidebar = (0, import_react43.forwardRef)(
         0
       );
       total += addOnPayInAdvanceCost;
-      return formatCurrency(total, resolvedCurrency);
+      return {
+        subscriptionPrice: formatCurrency(total, resolvedCurrency),
+        subscriptionTotal: total,
+        subscriptionCurrency: resolvedCurrency
+      };
     }, [
       selectedPlan,
       currentPlan,
@@ -20797,6 +21007,14 @@ var SubscriptionSidebar = (0, import_react43.forwardRef)(
       () => promoCode && (amountOff > 0 || percentOff > 0),
       [promoCode, amountOff, percentOff]
     );
+    const subscriptionDiscount = (0, import_react43.useMemo)(
+      () => getSubscriptionDiscount(
+        charges?.discounts,
+        subscriptionTotal,
+        subscriptionCurrency
+      ),
+      [charges?.discounts, subscriptionTotal, subscriptionCurrency]
+    );
     const handleCheckout = (0, import_react43.useCallback)(async () => {
       const planId = selectedPlan?.id;
       const currencyPrice = selectedPlan ? getPlanPrice(
@@ -21043,6 +21261,16 @@ var SubscriptionSidebar = (0, import_react43.forwardRef)(
     if (isSelectedPlanTrialable && selectedPlan.trialDays) {
       trialEndsOn.setDate(trialEndsOn.getDate() + selectedPlan.trialDays);
     }
+    const billingPreviewText = getBillingPreviewText(
+      {
+        subscriptionPrice,
+        planPeriod,
+        periodStart: renewDate,
+        hasUsageBasedCosts: usageBasedEntitlements.length > 0,
+        discount: subscriptionDiscount
+      },
+      t2
+    );
     return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
       Flex,
       {
@@ -21591,9 +21819,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} ${renewDate ? `on the ${formatOrdinal(renewDate.getDate())}` : ""} ${planPeriod === "year" && renewDate ? `of ${getMonthName(renewDate)}` : ""} unless you unsubscribe.` }) })
+                ) : billingPreviewText }) })
               ]
             }
           )
@@ -22114,7 +22340,8 @@ var UsageDetails = ({ entitlement, layout }) => {
     metricResetAt
   } = entitlement;
   const { t: t2 } = useTranslation();
-  const { data } = useEmbed();
+  const { data, warningThresholdConfig } = useEmbed();
+  const showWarningThresholdAsLimit = warningThresholdConfig?.showAsLimit ?? false;
   const period = getSubscriptionPeriod(data?.company?.billingSubscription) ?? data?.company?.plan?.planPeriod ?? void 0;
   const showCredits = data?.displaySettings?.showCredits ?? true;
   const {
@@ -22130,7 +22357,9 @@ var UsageDetails = ({ entitlement, layout }) => {
   } = (0, import_react48.useMemo)(() => {
     const { billingPrice, amount, limit: limit2, cost: cost2, currentTier: currentTier2 } = getUsageDetails(
       entitlement,
-      period
+      period,
+      void 0,
+      { showWarningThresholdAsLimit }
     );
     const {
       price: price2,
@@ -22151,7 +22380,7 @@ var UsageDetails = ({ entitlement, layout }) => {
       tiersMode: tiersMode2,
       tiered: priceBehavior === EntitlementPriceBehavior.PayInAdvance && isTieredPrice(billingPrice)
     };
-  }, [entitlement, period, priceBehavior]);
+  }, [entitlement, period, priceBehavior, showWarningThresholdAsLimit]);
   const text = (0, import_react48.useMemo)(() => {
     if (!feature || feature.featureType !== FeatureType.Event && feature.featureType !== FeatureType.Trait) {
       return;
@@ -22201,9 +22430,10 @@ var UsageDetails = ({ entitlement, layout }) => {
       });
     }
     if (!priceBehavior && typeof allocation === "number") {
+      const numericLimit = limit ?? allocation;
       return t2("X units", {
-        amount: formatNumber(allocation),
-        units: getFeatureName(feature, allocation)
+        amount: formatNumber(numericLimit),
+        units: getFeatureName(feature, numericLimit)
       });
     }
     if (!priceBehavior && allocationType === "unlimited") {
@@ -22289,7 +22519,7 @@ var UsageDetails = ({ entitlement, layout }) => {
     if (typeof usage === "number") {
       return typeof allocation === "number" ? t2("usage.limited", {
         amount: formatNumber(usage),
-        allocation: formatNumber(allocation)
+        allocation: formatNumber(limit ?? allocation)
       }) : t2("usage.unlimited", {
         amount: formatNumber(usage)
       });
@@ -22303,6 +22533,7 @@ var UsageDetails = ({ entitlement, layout }) => {
     priceBehavior,
     packageSize,
     allocation,
+    limit,
     usage,
     metricResetAt,
     cost,
@@ -22734,7 +22965,12 @@ var import_react51 = require("react");
 var import_jsx_runtime51 = require("react/jsx-runtime");
 var Meter = ({ entitlement }) => {
   const { allocation, priceBehavior, softLimit, usage } = entitlement;
-  const limit = softLimit ?? allocation;
+  const { warningThresholdConfig } = useEmbed();
+  const showWarningThresholdAsLimit = warningThresholdConfig?.showAsLimit ?? false;
+  const warningThreshold = getEntitlementWarningThreshold(
+    entitlement.planEntitlement?.warningTiers
+  );
+  const limit = showWarningThresholdAsLimit && typeof warningThreshold === "number" ? warningThreshold : softLimit ?? allocation;
   if (typeof usage !== "number" || typeof limit !== "number") {
     return null;
   }
@@ -22874,14 +23110,7 @@ var import_jsx_runtime53 = require("react/jsx-runtime");
 var Limit = ({ entitlement, usageDetails, fontStyle }) => {
   const { t: t2 } = useTranslation();
   const { data } = useEmbed();
-  const {
-    feature,
-    planEntitlement,
-    priceBehavior,
-    allocation,
-    usage,
-    metricResetAt
-  } = entitlement;
+  const { feature, planEntitlement, priceBehavior, usage, metricResetAt } = entitlement;
   const { billingPrice, limit, cost, currentTier } = usageDetails;
   const acc = [];
   acc.push(
@@ -22903,8 +23132,8 @@ var Limit = ({ entitlement, usageDetails, fontStyle }) => {
     }) : priceBehavior === EntitlementPriceBehavior.CreditBurndown && typeof feature !== "undefined" && typeof limit === "number" ? t2("X units remaining", {
       amount: formatNumber(limit),
       units: getFeatureName(feature, limit)
-    }) : typeof allocation === "number" ? t2("Limit of", {
-      amount: formatNumber(allocation)
+    }) : typeof limit === "number" ? t2("Limit of", {
+      amount: formatNumber(limit)
     }) : t2("No limit")
   );
   if (metricResetAt) {
@@ -22959,7 +23188,8 @@ var MeteredFeatures = (0, import_react51.forwardRef)(({ className, ...rest }, re
   const elementsRef = (0, import_react51.useRef)([]);
   const shouldWrapChildren = useWrapChildren(elementsRef);
   const { t: t2 } = useTranslation();
-  const { data, settings, setCheckoutState } = useEmbed();
+  const { data, settings, setCheckoutState, warningThresholdConfig } = useEmbed();
+  const showWarningThresholdAsLimit = warningThresholdConfig?.showAsLimit ?? false;
   const isLightBackground = useIsLightBackground();
   const meteredFeatures = (0, import_react51.useMemo)(() => {
     const orderedFeatureUsage = props.visibleFeatures?.reduce(
@@ -23013,7 +23243,9 @@ var MeteredFeatures = (0, import_react51.forwardRef)(({ className, ...rest }, re
         return acc;
       }
       const { feature, priceBehavior, usage } = entitlement;
-      const usageDetails = getUsageDetails(entitlement, period);
+      const usageDetails = getUsageDetails(entitlement, period, void 0, {
+        showWarningThresholdAsLimit
+      });
       const { limit } = usageDetails;
       acc.push(
         /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(Element, { as: Flex, $flexDirection: "column", $gap: "1.5rem", children: [
@@ -23631,7 +23863,7 @@ var registerWrapper = function registerWrapper2(stripe, startTime) {
   }
   stripe._registerWrapper({
     name: "stripe-js",
-    version: "9.9.0",
+    version: "9.12.0",
     startTime
   });
 };
@@ -23709,7 +23941,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("9.9.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("9.12.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);
@@ -24123,14 +24355,17 @@ var UsageDetails2 = ({
   layout
 }) => {
   const { t: t2 } = useTranslation();
-  const { settings } = useEmbed();
+  const { settings, warningThresholdConfig } = useEmbed();
+  const showWarningThresholdAsLimit = warningThresholdConfig?.showAsLimit ?? false;
   const {
     billingPrice,
     limit,
     cost = 0
   } = (0, import_react55.useMemo)(
-    () => getUsageDetails(entitlement, period, currency),
-    [entitlement, period, currency]
+    () => getUsageDetails(entitlement, period, currency, {
+      showWarningThresholdAsLimit
+    }),
+    [entitlement, period, currency, showWarningThresholdAsLimit]
   );
   const description = (0, import_react55.useMemo)(() => {
     const acc = [];
@@ -24892,7 +25127,8 @@ var AddOn2 = ({
 }) => {
   const { layout } = sharedProps;
   const { t: t2 } = useTranslation();
-  const { data, settings, setCheckoutState } = useEmbed();
+  const { data, settings, setCheckoutState, warningThresholdConfig } = useEmbed();
+  const showWarningThresholdAsLimit = warningThresholdConfig?.showAsLimit ?? false;
   const isLightBackground = useIsLightBackground();
   const { currentAddOns, canCheckout, isStandalone } = (0, import_react57.useMemo)(() => {
     const isStandalone2 = typeof data?.component === "undefined";
@@ -24921,12 +25157,16 @@ var AddOn2 = ({
       selectedPeriod,
       currency
     );
+    const warningThreshold = showWarningThresholdAsLimit ? getEntitlementWarningThreshold(entitlement.warningTiers) : void 0;
     return {
       isUnlimited: false,
       featureName: entitlement.feature?.name,
       feature: entitlement.feature,
       priceBehavior: entitlement.priceBehavior,
       softLimit: entitlement.softLimit,
+      // The limit shown next to the feature: the warning threshold when the
+      // option is on and one is configured, else the overage soft limit.
+      limit: typeof warningThreshold === "number" ? warningThreshold : entitlement.priceBehavior === EntitlementPriceBehavior.Overage ? entitlement.softLimit : void 0,
       price: priceData?.price ?? 0,
       currency: priceData?.currency || addOnCurrency,
       packageSize: priceData?.packageSize ?? 1,
@@ -25096,7 +25336,7 @@ var AddOn2 = ({
                                 rounded: true
                               }
                             ),
-                            /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Flex, { $flexDirection: "column", $justifyContent: "center", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Text, { children: meteredEntitlement.priceBehavior === EntitlementPriceBehavior.Overage && meteredEntitlement.softLimit ? `${meteredEntitlement.softLimit} ${getEntitlementFeatureName(meteredEntitlement, "units")}` : getEntitlementFeatureName(meteredEntitlement) }) })
+                            /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Flex, { $flexDirection: "column", $justifyContent: "center", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Text, { children: typeof meteredEntitlement.limit === "number" ? `${meteredEntitlement.limit} ${getEntitlementFeatureName(meteredEntitlement, "units")}` : getEntitlementFeatureName(meteredEntitlement) }) })
                           ] }),
                           /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
                             Text,
@@ -25167,7 +25407,8 @@ var Entitlement2 = ({
 }) => {
   const { layout } = sharedProps;
   const { t: t2 } = useTranslation();
-  const { settings } = useEmbed();
+  const { settings, warningThresholdConfig } = useEmbed();
+  const showWarningThresholdAsLimit = warningThresholdConfig?.showAsLimit ?? false;
   const isLightBackground = useIsLightBackground();
   const entitlementBillingPrice = getEntitlementPrice(
     entitlement,
@@ -25182,7 +25423,8 @@ var Entitlement2 = ({
     tiersMode: entitlementTiersMode
   } = entitlementBillingPrice || {};
   const tiered = entitlement.priceBehavior === EntitlementPriceBehavior.PayInAdvance && isTieredPrice(entitlementBillingPrice);
-  const limit = entitlement.priceBehavior === EntitlementPriceBehavior.Overage && typeof entitlement.softLimit === "number" ? entitlement.softLimit : entitlement.valueNumeric ?? void 0;
+  const warningThreshold = showWarningThresholdAsLimit ? getEntitlementWarningThreshold(entitlement.warningTiers) : void 0;
+  const limit = typeof warningThreshold === "number" ? warningThreshold : entitlement.priceBehavior === EntitlementPriceBehavior.Overage && typeof entitlement.softLimit === "number" ? entitlement.softLimit : entitlement.valueNumeric ?? void 0;
   const metricPeriodName = getMetricPeriodName(entitlement);
   const creditBasedEntitlementLimit = getCreditBasedEntitlementLimit(
     entitlement,
@@ -26072,20 +26314,27 @@ function resolveDesignProps11(props) {
 var UpcomingBill = (0, import_react62.forwardRef)(({ className, ...rest }, ref) => {
   const props = resolveDesignProps11(rest);
   const { t: t2 } = useTranslation();
-  const { data, settings, debug, getUpcomingInvoice, getCustomerBalance } = useEmbed();
+  const { data, settings, getUpcomingInvoice } = useEmbed();
   const isLightBackground = useIsLightBackground();
   const [isLoading, setIsLoading] = (0, import_react62.useState)(false);
   const [error, setError] = (0, import_react62.useState)();
   const [upcomingInvoice, setUpcomingInvoice] = (0, import_react62.useState)(data?.upcomingInvoice);
-  const [balances, setBalances] = (0, import_react62.useState)([]);
   const discounts = (0, import_react62.useMemo)(() => {
-    return (data?.subscription?.discounts || []).map((discount) => ({
+    return (data?.subscription?.discounts || []).filter(
+      (discount) => (
+        // Only surface discounts that are currently active and actually
+        // reduce the bill; the API computes `isActive` at read time, so an
+        // expired coupon must not linger in the account summary.
+        discount.isActive && (typeof discount.percentOff === "number" && discount.percentOff > 0 || typeof discount.amountOff === "number" && discount.amountOff > 0)
+      )
+    ).map((discount) => ({
       couponId: discount.couponId,
       customerFacingCode: discount.customerFacingCode || void 0,
       currency: discount.currency || void 0,
       amountOff: discount.amountOff ?? void 0,
       percentOff: discount.percentOff ?? void 0,
-      isActive: discount.isActive
+      duration: discount.duration,
+      durationInMonths: discount.durationInMonths ?? void 0
     }));
   }, [data?.subscription?.discounts]);
   const getInvoice = (0, import_react62.useCallback)(async () => {
@@ -26104,27 +26353,30 @@ var UpcomingBill = (0, import_react62.forwardRef)(({ className, ...rest }, ref)
       }
     }
   }, [data?.component?.id, data?.subscription, getUpcomingInvoice]);
-  const getBalances = (0, import_react62.useCallback)(async () => {
-    try {
-      const response = await getCustomerBalance();
-      if (response) {
-        setBalances(response.data.balances);
-      }
-    } catch (err) {
-      debug("Failed to fetch customer balance.", err);
-    }
-  }, [debug, getCustomerBalance]);
   (0, import_react62.useEffect)(() => {
     getInvoice();
   }, [getInvoice]);
-  (0, import_react62.useEffect)(() => {
-    getBalances();
-  }, [getBalances]);
   (0, import_react62.useEffect)(() => {
     if (data?.upcomingInvoice) {
       setUpcomingInvoice(data.upcomingInvoice);
     }
   }, [data?.upcomingInvoice]);
+  const { currency, applied, remaining } = (0, import_react62.useMemo)(() => {
+    const currency2 = upcomingInvoice?.currency;
+    const startingBalance = upcomingInvoice?.startingBalance ?? 0;
+    const endingBalance = upcomingInvoice?.endingBalance ?? 0;
+    const credit = Math.max(0, -startingBalance);
+    const subtotal = Math.max(0, upcomingInvoice?.subtotal ?? 0);
+    const applied2 = endingBalance < 0 ? credit + endingBalance : Math.min(credit, subtotal);
+    return { currency: currency2, applied: applied2, remaining: credit - applied2 };
+  }, [
+    upcomingInvoice?.currency,
+    upcomingInvoice?.startingBalance,
+    upcomingInvoice?.endingBalance,
+    upcomingInvoice?.subtotal
+  ]);
+  const hasApplied = applied > 0;
+  const hasBalance = remaining > 0 || applied > 0;
   if (!data?.subscription || data.subscription.cancelAt) {
     return null;
   }
@@ -26174,7 +26426,7 @@ var UpcomingBill = (0, import_react62.forwardRef)(({ className, ...rest }, ref)
           ]
         }
       ),
-      balances.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(
+      hasApplied && /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(
         Flex,
         {
           as: TransitionBox,
@@ -26182,8 +26434,21 @@ var UpcomingBill = (0, import_react62.forwardRef)(({ className, ...rest }, ref)
           $alignItems: "start",
           $gap: "1rem",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Text, { $weight: 600, children: t2("Remaining balance") }),
-            /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Flex, { $flexDirection: "column", $gap: "0.5rem", children: balances.map((item, idx) => /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Text, { children: formatCurrency(item.balance, item.currency) }, idx)) })
+            /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Text, { $weight: 600, children: t2("Applied balance towards next invoice") }),
+            /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Text, { children: formatCurrency(-applied, currency) })
+          ]
+        }
+      ),
+      hasBalance && /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(
+        Flex,
+        {
+          as: TransitionBox,
+          $justifyContent: "space-between",
+          $alignItems: "start",
+          $gap: "1rem",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Text, { $weight: 600, children: t2("Remaining balance after next invoice") }),
+            /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Text, { children: formatCurrency(remaining, currency) })
           ]
         }
       ),
@@ -26201,54 +26466,50 @@ var UpcomingBill = (0, import_react62.forwardRef)(({ className, ...rest }, ref)
                 $flexDirection: "column",
                 $alignItems: "end",
                 $gap: "0.5rem",
-                children: discounts.reduce(
-                  (acc, discount) => {
-                    if (typeof discount.percentOff === "number" || typeof discount.amountOff === "number") {
-                      acc.push(
-                        /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(
+                children: discounts.map((discount) => {
+                  const label = typeof discount.percentOff === "number" && discount.percentOff > 0 ? t2("Percent off", {
+                    percent: discount.percentOff
+                  }) : t2("Amount off", {
+                    amount: formatCurrency(
+                      discount.amountOff,
+                      // active discounts always carry a positive amount or percent
+                      discount?.currency
+                    )
+                  });
+                  return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(
+                    Flex,
+                    {
+                      $alignItems: "center",
+                      $gap: "0.5rem",
+                      children: [
+                        discount.customerFacingCode && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
                           Flex,
                           {
                             $alignItems: "center",
-                            $gap: "0.5rem",
-                            children: [
-                              discount.customerFacingCode && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
-                                Flex,
-                                {
-                                  $alignItems: "center",
-                                  $padding: "0.1875rem 0.375rem",
-                                  $borderWidth: "1px",
-                                  $borderStyle: "solid",
-                                  $borderColor: isLightBackground ? "hsla(0, 0%, 0%, 0.15)" : "hsla(0, 0%, 100%, 0.15)",
-                                  $borderRadius: "0.3125rem",
-                                  children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
-                                    Text,
-                                    {
-                                      $size: 0.75 * settings.theme.typography.text.fontSize,
-                                      style: { textTransform: "uppercase" },
-                                      children: discount.customerFacingCode
-                                    }
-                                  )
-                                }
-                              ),
-                              /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Text, { children: typeof discount.percentOff === "number" ? t2("Percent off", {
-                                percent: discount.percentOff
-                              }) : t2("Amount off", {
-                                amount: formatCurrency(
-                                  discount.amountOff,
-                                  // we already checked for `number` type
-                                  discount?.currency
-                                )
-                              }) }) })
-                            ]
-                          },
-                          discount.couponId
-                        )
-                      );
-                    }
-                    return acc;
-                  },
-                  []
-                )
+                            $padding: "0.1875rem 0.375rem",
+                            $borderWidth: "1px",
+                            $borderStyle: "solid",
+                            $borderColor: isLightBackground ? "hsla(0, 0%, 0%, 0.15)" : "hsla(0, 0%, 100%, 0.15)",
+                            $borderRadius: "0.3125rem",
+                            children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+                              Text,
+                              {
+                                $size: 0.75 * settings.theme.typography.text.fontSize,
+                                style: { textTransform: "uppercase" },
+                                children: discount.customerFacingCode
+                              }
+                            )
+                          }
+                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Text, { children: discount.duration === "repeating" && discount.durationInMonths ? t2("Discount for months", {
+                          discount: label,
+                          count: discount.durationInMonths
+                        }) : label }) })
+                      ]
+                    },
+                    discount.couponId
+                  );
+                })
               }
             )
           ]