fix(shared,clerk-js,backend,ui): use duration in cycles in payments and statements (#9401)

Author: mauricioabreu

.changeset/applied-discount-duration-cycles.md

@@ -0,0 +1,8 @@
+---
+'@clerk/shared': patch
+'@clerk/clerk-js': patch
+'@clerk/backend': patch
+'@clerk/ui': patch
+---
+
+Billing applied-discount snapshots now include optional `durationInCycles`. Payment attempt and statement UIs use the original discount length instead of cycles remaining, and omit the duration copy when it is unavailable.

packages/backend/src/util/billing.ts

@@ -62,6 +62,7 @@ const billingAppliedDiscountFromJSON = (discount: BillingAppliedDiscountJSON): B
   amountOff: discount.amount_off ? billingMoneyAmountFromJSON(discount.amount_off) : undefined,
   promoCode: discount.promo_code,
   cyclesRemaining: discount.cycles_remaining,
+  durationInCycles: discount.duration_in_cycles,
 });
 
 const billingDiscountsFromJSON = (discounts: BillingDiscountsJSON): BillingDiscounts => ({

packages/clerk-js/src/utils/__tests__/billing.test.ts

@@ -49,6 +49,7 @@ const nextPaymentTotalsJSON = (): BillingTotalsJSON => ({
       percent_off: 20,
       promo_code: 'WELCOME20',
       cycles_remaining: 2,
+      duration_in_cycles: 3,
     },
     total: moneyJSON(500),
   },
@@ -126,6 +127,7 @@ describe('billingPaymentTotalsFromJSON', () => {
           effect: 'fixed_amount',
           amount_off: moneyJSON(100),
           cycles_remaining: null,
+          duration_in_cycles: null,
         },
         total: moneyJSON(16),
       },
@@ -142,6 +144,7 @@ describe('billingPaymentTotalsFromJSON', () => {
       effect: 'fixed_amount',
       amountOff: { amount: 100, amountFormatted: '1.00', currency: 'USD', currencySymbol: '$' },
       cyclesRemaining: null,
+      durationInCycles: null,
     });
     expect(totals.discounts?.total.amount).toBe(16);
   });
@@ -243,6 +246,7 @@ describe('billingSubscriptionNextPaymentFromJSON', () => {
           percentOff: 20,
           promoCode: 'WELCOME20',
           cyclesRemaining: 2,
+          durationInCycles: 3,
         },
         total: { amount: 500 },
       },

packages/clerk-js/src/utils/billing.ts

@@ -123,6 +123,7 @@ const billingAppliedDiscountFromJSON = (data: BillingAppliedDiscountJSON): Billi
   amountOff: data.amount_off ? billingMoneyAmountFromJSON(data.amount_off) : undefined,
   promoCode: data.promo_code,
   cyclesRemaining: data.cycles_remaining,
+  durationInCycles: data.duration_in_cycles,
 });
 
 export const billingDiscountRedemptionFromJSON = (data: BillingDiscountRedemptionJSON): BillingDiscountRedemption => ({

packages/shared/src/types/billing.ts

@@ -1051,6 +1051,7 @@ export interface BillingAppliedDiscount {
   amountOff?: BillingMoneyAmount;
   promoCode?: string;
   cyclesRemaining: number | null;
+  durationInCycles?: number | null;
 }
 
 /**

packages/shared/src/types/json.ts

@@ -1022,6 +1022,7 @@ export interface BillingAppliedDiscountJSON {
   amount_off?: BillingMoneyAmountJSON;
   promo_code?: string;
   cycles_remaining: number | null;
+  duration_in_cycles?: number | null;
 }
 
 export interface BillingDiscountRedemptionJSON extends ClerkResourceJSON {

packages/ui/src/components/Checkout/__tests__/Checkout.test.tsx

@@ -1764,6 +1764,7 @@ describe('Checkout', () => {
               percentOff: 20,
               promoCode: 'WELCOME20',
               cyclesRemaining: 1,
+              durationInCycles: 1,
             },
             total: money(2598, '25.98'),
           },

packages/ui/src/components/PaymentAttempts/PaymentAttemptPage.tsx

@@ -292,7 +292,7 @@ function PaymentAttemptBody({ paymentAttempt }: { paymentAttempt: BillingPayment
               title={catalogDiscount.name}
               description={getDiscountDescription(
                 catalogDiscount,
-                catalogDiscount.cyclesRemaining,
+                catalogDiscount.durationInCycles,
                 subscriptionItem.planPeriod,
                 { $, t },
               )}

packages/ui/src/components/Statements/StatementPage.tsx

@@ -151,7 +151,7 @@ export const StatementPage = () => {
                           <Statement.SectionContentDetailsListItem
                             label={`${item.totals.discounts.discount.name} ${getDiscountDescription(
                               item.totals.discounts.discount,
-                              item.totals.discounts.discount.cyclesRemaining,
+                              item.totals.discounts.discount.durationInCycles,
                               item.subscriptionItem.planPeriod,
                               { $, t },
                             )}`}

packages/ui/src/utils/billing.ts

@@ -13,7 +13,7 @@ type Localizations = Pick<ReturnType<typeof useLocalizations>, '$' | 't'>;
 
 export function getDiscountDescription(
   discount: Discount,
-  cycles: number | null,
+  cycles: number | null | undefined,
   planPeriod: BillingSubscriptionPlanPeriod,
   { $, t }: Localizations,
 ) {
@@ -24,7 +24,7 @@ export function getDiscountDescription(
         ? $(discount.amountOff)
         : '';
 
-  if (cycles === null) {
+  if (cycles == null) {
     return t(localizationKeys('billing.discountAmount', { amount }));
   }