feat: Fallback to Customer Address if default payment method address doesn't exist (#3878)

Author: ajay-sentry

src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/Address/AddressCard.test.tsx

@@ -43,6 +43,23 @@ const subscriptionDetail = {
   cancelAtPeriodEnd: false,
 } as z.infer<typeof SubscriptionDetailSchema>
 
+const subscriptionDetailWithCustomer = {
+  currentPeriodEnd: 1606851492,
+  cancelAtPeriodEnd: false,
+  defaultPaymentMethod: null,
+  customer: {
+    address: {
+      line1: '456 Main St.',
+      line2: null,
+      city: 'San Francisco',
+      country: 'US',
+      state: 'CA',
+      postalCode: '12345',
+    },
+    name: 'Bob Smith Jr.',
+  },
+} as z.infer<typeof SubscriptionDetailSchema>
+
 const wrapper: React.FC<React.PropsWithChildren> = ({ children }) => (
   <ThemeContextProvider>{children}</ThemeContextProvider>
 )
@@ -97,14 +114,14 @@ describe('AddressCard', () => {
     })
   })
 
-  describe(`when the user doesn't have billing details`, () => {
+  describe(`when the user doesn't have billing details or customer`, () => {
     it('renders an error message', () => {
       render(
         <AddressCard
           // @ts-expect-error weird param funkiness
           subscriptionDetail={{
-            ...subscriptionDetail,
             defaultPaymentMethod: null,
+            customer: null,
           }}
           provider="gh"
           owner="codecov"
@@ -126,8 +143,8 @@ describe('AddressCard', () => {
           <AddressCard
             // @ts-expect-error weird param funkiness
             subscriptionDetail={{
-              ...subscriptionDetail,
               defaultPaymentMethod: null,
+              customer: null,
             }}
             provider="gh"
             owner="codecov"
@@ -152,8 +169,8 @@ describe('AddressCard', () => {
           <AddressCard
             // @ts-expect-error weird param funkiness
             subscriptionDetail={{
-              ...subscriptionDetail,
               defaultPaymentMethod: null,
+              customer: null,
             }}
             provider="gh"
             owner="codecov"
@@ -231,6 +248,23 @@ describe('AddressCard', () => {
       expect(screen.getByText('12345')).toBeInTheDocument()
     })
 
+    it('can render information from the customer', () => {
+      render(
+        <AddressCard
+          subscriptionDetail={subscriptionDetailWithCustomer}
+          provider="gh"
+          owner="codecov"
+        />,
+        { wrapper }
+      )
+
+      expect(screen.getByText('Full name')).toBeInTheDocument()
+      expect(screen.getByText('Bob Smith Jr.')).toBeInTheDocument()
+      expect(screen.getByText('Billing address')).toBeInTheDocument()
+      expect(screen.getByText('456 Main St.')).toBeInTheDocument()
+      expect(screen.getByText('San Francisco, CA 12345')).toBeInTheDocument()
+    })
+
     it('renders the card holder information', () => {
       render(
         <AddressCard

src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/Address/AddressCard.tsx

@@ -2,7 +2,7 @@ import { useState } from 'react'
 import { z } from 'zod'
 
 import {
-  BillingDetailsSchema,
+  AddressSchema,
   SubscriptionDetailSchema,
 } from 'services/account/useAccountDetails'
 import A from 'ui/A'
@@ -23,15 +23,20 @@ function AddressCard({
   owner,
 }: AddressCardProps) {
   const [isFormOpen, setIsFormOpen] = useState(false)
-  const billingDetails =
-    subscriptionDetail?.defaultPaymentMethod?.billingDetails
+  const address =
+    subscriptionDetail?.defaultPaymentMethod?.billingDetails?.address ||
+    subscriptionDetail?.customer?.address
+
+  const name =
+    subscriptionDetail?.defaultPaymentMethod?.billingDetails?.name ||
+    subscriptionDetail?.customer?.name
 
   return (
     <div className="flex flex-col gap-2 border-t p-4">
       {isFormOpen && (
         <AddressForm
-          name={billingDetails?.name || ''}
-          address={billingDetails?.address}
+          name={name || ''}
+          address={address}
           provider={provider}
           owner={owner}
           closeForm={() => setIsFormOpen(false)}
@@ -52,7 +57,8 @@ function AddressCard({
             </A>
           </div>
           <BillingInner
-            billingDetails={billingDetails}
+            address={address}
+            name={name}
             setIsFormOpen={setIsFormOpen}
           />
         </>
@@ -62,27 +68,22 @@ function AddressCard({
 }
 
 interface BillingInnerProps {
-  billingDetails?: z.infer<typeof BillingDetailsSchema>
+  address?: z.infer<typeof AddressSchema> | null
+  name?: string | null
   setIsFormOpen: (val: boolean) => void
 }
 
-function BillingInner({ billingDetails, setIsFormOpen }: BillingInnerProps) {
-  if (billingDetails) {
+function BillingInner({ address, name, setIsFormOpen }: BillingInnerProps) {
+  if (address) {
     return (
       <div>
-        <p>{`${billingDetails.name ?? 'N/A'}`}</p>
+        <p>{`${name ?? 'N/A'}`}</p>
         <br />
         <h4 className="mb-2 font-semibold">Billing address</h4>
-        <p>{`${billingDetails.address?.line1 ?? ''} ${
-          billingDetails.address?.line2 ?? ''
-        }`}</p>
+        <p>{`${address?.line1 ?? ''} ${address?.line2 ?? ''}`}</p>
         <p>
-          {billingDetails.address?.city
-            ? `${billingDetails.address?.city}, `
-            : ''}
-          {`${billingDetails.address?.state ?? ''} ${
-            billingDetails.address?.postalCode ?? ''
-          }`}
+          {address?.city ? `${address?.city}, ` : ''}
+          {`${address?.state ?? ''} ${address?.postalCode ?? ''}`}
         </p>
       </div>
     )

src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/PaymentCard/PaymentMethodForm.test.tsx

@@ -63,6 +63,8 @@ const subscriptionDetail: z.infer<typeof SubscriptionDetailSchema> = {
   customer: {
     id: 'cust_123',
     email: '[email protected]',
+    address: null,
+    name: null,
   },
   latestInvoice: null,
   taxIds: [],

src/services/account/mocks.ts

@@ -118,6 +118,15 @@ export const accountDetailsObject = {
         expires: 1,
       },
       email: '[email protected]',
+      address: {
+        city: 'San Francisco',
+        country: 'US',
+        line1: '123 Main St',
+        line2: null,
+        postal_code: '94101',
+        state: 'CA',
+      },
+      name: 'John Doe',
     },
     collection_method: null,
   },
@@ -219,6 +228,15 @@ export const accountDetailsParsedObj = {
         expires: 1,
       },
       email: '[email protected]',
+      address: {
+        city: 'San Francisco',
+        country: 'US',
+        line1: '123 Main St',
+        line2: null,
+        postalCode: '94101',
+        state: 'CA',
+      },
+      name: 'John Doe',
     },
     collectionMethod: null,
   },

src/services/account/useAccountDetails.ts

@@ -93,6 +93,8 @@ export const SubscriptionDetailSchema = z
     currentPeriodEnd: z.number(),
     customer: z
       .object({
+        address: AddressSchema.nullable(),
+        email: z.string().nullable(),
         id: z.string(),
         discount: z
           .object({
@@ -102,7 +104,7 @@ export const SubscriptionDetailSchema = z
             expires: z.number().nullable(),
           })
           .nullish(),
-        email: z.string(),
+        name: z.string().nullable(),
       })
       .nullable(),
     defaultPaymentMethod: PaymentMethodSchema.nullable(),