fix(clerk-js,shared,ui): Rename payerCredit to payer

Author: dstaley

packages/clerk-js/sandbox/scenarios/checkout-account-credit.ts

@@ -169,7 +169,7 @@ export function CheckoutAccountCredit(): MockScenario {
               cycle_days_total: 1,
               cycle_remaining_percent: 1,
             },
-            payer_credit: {
+            payer: {
               remaining_balance: {
                 amount: 1,
                 amount_formatted: '100.00',

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

@@ -28,10 +28,10 @@ const billingCreditsFromJSON = (data: BillingCreditsJSON): BillingCredits => {
           cycleRemainingPercent: data.proration.cycle_remaining_percent,
         }
       : null,
-    payerCredit: data.payer_credit
+    payer: data.payer
       ? {
-          remainingBalance: billingMoneyAmountFromJSON(data.payer_credit.remaining_balance),
-          appliedAmount: billingMoneyAmountFromJSON(data.payer_credit.applied_amount),
+          remainingBalance: billingMoneyAmountFromJSON(data.payer.remaining_balance),
+          appliedAmount: billingMoneyAmountFromJSON(data.payer.applied_amount),
         }
       : null,
     total: billingMoneyAmountFromJSON(data.total),

packages/shared/src/types/billing.ts

@@ -704,7 +704,7 @@ export interface BillingPayerCredit {
 
 export interface BillingCredits {
   proration: BillingProrationCreditDetail | null;
-  payerCredit: BillingPayerCredit | null;
+  payer: BillingPayerCredit | null;
   total: BillingMoneyAmount;
 }
 

packages/shared/src/types/json.ts

@@ -769,7 +769,7 @@ export interface BillingPayerCreditJSON {
  */
 export interface BillingCreditsJSON {
   proration: BillingProrationCreditDetailJSON | null;
-  payer_credit: BillingPayerCreditJSON | null;
+  payer: BillingPayerCreditJSON | null;
   total: BillingMoneyAmountJSON;
 }
 

packages/ui/src/components/Checkout/CheckoutForm.tsx

@@ -36,8 +36,7 @@ export const CheckoutForm = withCardStateProvider(() => {
   }
 
   const showProratedCredit = !!totals.credits?.proration?.amount && totals.credits.proration.amount.amount > 0;
-  const showAccountCredits =
-    !!totals.credits?.payerCredit?.appliedAmount && totals.credits.payerCredit.appliedAmount.amount > 0;
+  const showAccountCredits = !!totals.credits?.payer?.appliedAmount && totals.credits.payer.appliedAmount.amount > 0;
   const showPastDue = !!totals.pastDue?.amount && totals.pastDue.amount > 0;
   const showDowngradeInfo = !isImmediatePlanChange;
 
@@ -92,7 +91,7 @@ export const CheckoutForm = withCardStateProvider(() => {
             <LineItems.Group variant='tertiary'>
               <LineItems.Title title={localizationKeys('billing.payerCreditRemainder')} />
               <LineItems.Description
-                text={`- ${totals.credits?.payerCredit?.appliedAmount?.currencySymbol}${totals.credits?.payerCredit?.appliedAmount?.amountFormatted}`}
+                text={`- ${totals.credits?.payer?.appliedAmount?.currencySymbol}${totals.credits?.payer?.appliedAmount?.amountFormatted}`}
               />
             </LineItems.Group>
           )}