fix: Infer name if not in billing details

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

@@ -30,7 +30,7 @@ function BillingDetails() {
       <EmailAddress />
       <PaymentCard
         // @ts-expect-error - TODO fix this once we update PaymentCard to TS
-        subscriptionDetail={subscriptionDetail}
+        accountDetails={accountDetails}
         provider={provider}
         owner={owner}
       />

src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/PaymentCard/PaymentCard.jsx

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types'
 import { useState } from 'react'
 
-import { subscriptionDetailType } from 'services/account'
+import { accountDetailsPropType } from 'services/account'
 import { formatTimestampToCalendarDate } from 'shared/utils/billing'
 import A from 'ui/A'
 import Button from 'ui/Button'
@@ -10,8 +10,9 @@ import Icon from 'ui/Icon'
 import BankInformation from './BankInformation'
 import CardInformation from './CardInformation'
 import PaymentMethodForm from './PaymentMethodForm'
-function PaymentCard({ subscriptionDetail, provider, owner }) {
+function PaymentCard({ accountDetails, provider, owner }) {
   const [isFormOpen, setIsFormOpen] = useState(false)
+  const subscriptionDetail = accountDetails?.subscriptionDetail
   const card = subscriptionDetail?.defaultPaymentMethod?.card
   const usBankAccount = subscriptionDetail?.defaultPaymentMethod?.usBankAccount
 
@@ -41,7 +42,7 @@ function PaymentCard({ subscriptionDetail, provider, owner }) {
           provider={provider}
           owner={owner}
           closeForm={() => setIsFormOpen(false)}
-          subscriptionDetail={subscriptionDetail}
+          accountDetails={accountDetails}
         />
       ) : card ? (
         <CardInformation card={card} subscriptionDetail={subscriptionDetail} />
@@ -72,7 +73,7 @@ function PaymentCard({ subscriptionDetail, provider, owner }) {
 }
 
 PaymentCard.propTypes = {
-  subscriptionDetail: subscriptionDetailType,
+  accountDetails: accountDetailsPropType,
   provider: PropTypes.string.isRequired,
   owner: PropTypes.string.isRequired,
 }

src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/PaymentCard/PaymentCard.test.jsx

@@ -55,6 +55,10 @@ const subscriptionDetail = {
   cancelAtPeriodEnd: false,
 }
 
+const accountDetails = {
+  subscriptionDetail,
+}
+
 const usBankSubscriptionDetail = {
   defaultPaymentMethod: {
     usBankAccount: {
@@ -100,12 +104,10 @@ describe('PaymentCard', () => {
     return { user }
   }
 
-  describe(`when the user doesn't have any subscriptionDetail`, () => {
-    // NOTE: This test is misleading because we hide this component from a higher level in
-    // BillingDetails.tsx if there is no subscriptionDetail
+  describe(`when the user doesn't have any accountDetails`, () => {
     it('renders the set payment method message', () => {
       render(
-        <PaymentCard subscriptionDetail={null} provider="gh" owner="codecov" />
+        <PaymentCard accountDetails={null} provider="gh" owner="codecov" />
       )
 
       expect(
@@ -120,9 +122,12 @@ describe('PaymentCard', () => {
     it('renders an error message', () => {
       render(
         <PaymentCard
-          subscriptionDetail={{
-            ...subscriptionDetail,
-            defaultPaymentMethod: null,
+          accountDetails={{
+            ...accountDetails,
+            subscriptionDetail: {
+              ...accountDetails.subscriptionDetail,
+              defaultPaymentMethod: null,
+            },
           }}
           provider="gh"
           owner="codecov"
@@ -142,9 +147,12 @@ describe('PaymentCard', () => {
         const { user } = setup()
         render(
           <PaymentCard
-            subscriptionDetail={{
-              ...subscriptionDetail,
-              defaultPaymentMethod: null,
+            accountDetails={{
+              ...accountDetails,
+              subscriptionDetail: {
+                ...accountDetails.subscriptionDetail,
+                defaultPaymentMethod: null,
+              },
             }}
             provider="gh"
             owner="codecov"
@@ -165,9 +173,12 @@ describe('PaymentCard', () => {
         const { user } = setup()
         render(
           <PaymentCard
-            subscriptionDetail={{
-              ...subscriptionDetail,
-              defaultPaymentMethod: null,
+            accountDetails={{
+              ...accountDetails,
+              subscriptionDetail: {
+                ...accountDetails.subscriptionDetail,
+                defaultPaymentMethod: null,
+              },
             }}
             provider="gh"
             owner="codecov"
@@ -190,7 +201,7 @@ describe('PaymentCard', () => {
     it('renders the card', () => {
       render(
         <PaymentCard
-          subscriptionDetail={subscriptionDetail}
+          accountDetails={accountDetails}
           provider="gh"
           owner="codecov"
         />,
@@ -204,7 +215,7 @@ describe('PaymentCard', () => {
     it('renders the next billing', () => {
       render(
         <PaymentCard
-          subscriptionDetail={subscriptionDetail}
+          accountDetails={accountDetails}
           provider="gh"
           owner="codecov"
         />,
@@ -217,9 +228,15 @@ describe('PaymentCard', () => {
 
   describe('when the user has a US bank account', () => {
     it('renders the bank account details', () => {
+      const testAccountDetails = {
+        ...accountDetails,
+        subscriptionDetail: {
+          ...usBankSubscriptionDetail,
+        },
+      }
       render(
         <PaymentCard
-          subscriptionDetail={usBankSubscriptionDetail}
+          accountDetails={testAccountDetails}
           provider="gh"
           owner="codecov"
         />,
@@ -235,9 +252,12 @@ describe('PaymentCard', () => {
     it(`doesn't render the next billing`, () => {
       render(
         <PaymentCard
-          subscriptionDetail={{
-            ...subscriptionDetail,
-            cancelAtPeriodEnd: true,
+          accountDetails={{
+            ...accountDetails,
+            subscriptionDetail: {
+              ...accountDetails.subscriptionDetail,
+              cancelAtPeriodEnd: true,
+            },
           }}
           provider="gh"
           owner="codecov"
@@ -260,7 +280,7 @@ describe('PaymentCard', () => {
 
       render(
         <PaymentCard
-          subscriptionDetail={subscriptionDetail}
+          accountDetails={accountDetails}
           provider="gh"
           owner="codecov"
         />,
@@ -280,7 +300,7 @@ describe('PaymentCard', () => {
       })
       render(
         <PaymentCard
-          subscriptionDetail={subscriptionDetail}
+          accountDetails={accountDetails}
           provider="gh"
           owner="codecov"
         />,
@@ -305,7 +325,7 @@ describe('PaymentCard', () => {
 
         render(
           <PaymentCard
-            subscriptionDetail={subscriptionDetail}
+            accountDetails={accountDetails}
             provider="gh"
             owner="codecov"
           />,
@@ -327,7 +347,7 @@ describe('PaymentCard', () => {
         })
         render(
           <PaymentCard
-            subscriptionDetail={subscriptionDetail}
+            accountDetails={accountDetails}
             provider="gh"
             owner="codecov"
           />,
@@ -354,7 +374,7 @@ describe('PaymentCard', () => {
       })
       render(
         <PaymentCard
-          subscriptionDetail={subscriptionDetail}
+          accountDetails={accountDetails}
           provider="gh"
           owner="codecov"
         />,
@@ -376,7 +396,7 @@ describe('PaymentCard', () => {
       })
       render(
         <PaymentCard
-          subscriptionDetail={subscriptionDetail}
+          accountDetails={accountDetails}
           provider="gh"
           owner="codecov"
         />,

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

@@ -6,9 +6,12 @@ import { MemoryRouter, Route } from 'react-router-dom'
 import { vi } from 'vitest'
 import { z } from 'zod'
 
-import { SubscriptionDetailSchema } from 'services/account/useAccountDetails'
+import {
+  AccountDetailsSchema,
+  SubscriptionDetailSchema,
+} from 'services/account/useAccountDetails'
 
-import PaymentMethodForm from './PaymentMethodForm'
+import PaymentMethodForm, { getEmail, getName } from './PaymentMethodForm'
 
 const queryClient = new QueryClient()
 
@@ -66,6 +69,26 @@ const subscriptionDetail: z.infer<typeof SubscriptionDetailSchema> = {
   trialEnd: null,
 }
 
+const accountDetails: z.infer<typeof AccountDetailsSchema> = {
+  name: 'John Doe',
+  email: '[email protected]',
+  subscriptionDetail: subscriptionDetail,
+  activatedStudentCount: 0,
+  activatedUserCount: 0,
+  checkoutSessionId: null,
+  delinquent: null,
+  inactiveUserCount: 0,
+  integrationId: null,
+  nbActivePrivateRepos: null,
+  planAutoActivate: null,
+  planProvider: null,
+  repoTotalCredits: 0,
+  rootOrganization: null,
+  scheduleDetail: null,
+  studentCount: 0,
+  usesInvoice: false,
+}
+
 const mocks = {
   useUpdatePaymentMethod: vi.fn(),
 }
@@ -90,7 +113,7 @@ describe('PaymentMethodForm', () => {
 
       render(
         <PaymentMethodForm
-          subscriptionDetail={subscriptionDetail}
+          accountDetails={accountDetails}
           provider="gh"
           owner="codecov"
           closeForm={() => {}}
@@ -111,7 +134,7 @@ describe('PaymentMethodForm', () => {
       })
       render(
         <PaymentMethodForm
-          subscriptionDetail={subscriptionDetail}
+          accountDetails={accountDetails}
           provider="gh"
           owner="codecov"
           closeForm={() => {}}
@@ -133,7 +156,7 @@ describe('PaymentMethodForm', () => {
         })
         render(
           <PaymentMethodForm
-            subscriptionDetail={subscriptionDetail}
+            accountDetails={accountDetails}
             provider="gh"
             owner="codecov"
             closeForm={() => {}}
@@ -155,7 +178,7 @@ describe('PaymentMethodForm', () => {
         })
         render(
           <PaymentMethodForm
-            subscriptionDetail={subscriptionDetail}
+            accountDetails={accountDetails}
             provider="gh"
             owner="codecov"
             closeForm={closeForm}
@@ -181,7 +204,7 @@ describe('PaymentMethodForm', () => {
       })
       render(
         <PaymentMethodForm
-          subscriptionDetail={subscriptionDetail}
+          accountDetails={accountDetails}
           provider="gh"
           owner="codecov"
           closeForm={() => {}}
@@ -203,7 +226,7 @@ describe('PaymentMethodForm', () => {
       })
       render(
         <PaymentMethodForm
-          subscriptionDetail={subscriptionDetail}
+          accountDetails={accountDetails}
           provider="gh"
           owner="codecov"
           closeForm={() => {}}
@@ -215,4 +238,62 @@ describe('PaymentMethodForm', () => {
       expect(screen.queryByRole('button', { name: /Cancel/i })).toBeDisabled()
     })
   })
+
+  describe('when the email is missing from billing details', () => {
+    it('infers one from the rest of the data', () => {
+      const accountDetailsWithoutBillingEmail = {
+        email: '[email protected]',
+        subscriptionDetail: {
+          defaultPaymentMethod: {
+            billingDetails: {
+              email: null,
+            },
+          },
+        },
+      } as z.infer<typeof AccountDetailsSchema>
+
+      const email = getEmail(accountDetailsWithoutBillingEmail)
+      expect(email).toBe('[email protected]')
+    })
+  })
+
+  describe('when the name is missing from billing details', () => {
+    it('uses latestInvoice customerName when billing name is missing', () => {
+      const accountDetailsWithoutBillingName = {
+        subscriptionDetail: {
+          defaultPaymentMethod: {
+            billingDetails: {
+              name: undefined,
+            },
+          },
+          latestInvoice: {
+            customerName: 'Customer Name',
+          },
+        },
+      } as unknown as z.infer<typeof AccountDetailsSchema>
+
+      const name = getName(accountDetailsWithoutBillingName)
+      expect(name).toBe('Customer Name')
+    })
+
+    it('uses account name when billing name and invoice name are missing', () => {
+      const accountDetailsWithoutBillingName = {
+        name: 'Account Name',
+        subscriptionDetail: {
+          defaultPaymentMethod: {
+            billingDetails: {
+              name: undefined,
+            },
+          },
+          latestInvoice: {
+            customerName: undefined,
+          },
+        },
+      } as unknown as z.infer<typeof AccountDetailsSchema>
+
+      const name = getName(accountDetailsWithoutBillingName)
+
+      expect(name).toBe('Account Name')
+    })
+  })
 })