wip

src/pages/PlanPage/PlanPage.jsx

@@ -54,6 +54,7 @@ function PlanPage() {
         stripe={stripePromise}
         options={{
           ...StripeAppearance(isDarkMode),
+          // mode and currency are required for the PaymentElement
           mode: 'setup',
           currency: 'usd',
         }}

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

@@ -224,7 +224,7 @@ describe('AddressCard', () => {
         { wrapper }
       )
 
-      expect(screen.getByText('Cardholder name')).toBeInTheDocument()
+      expect(screen.getByText('Full name')).toBeInTheDocument()
       expect(screen.getByText('N/A')).toBeInTheDocument()
       expect(screen.getByText('Billing address')).toBeInTheDocument()
       expect(screen.queryByText(/null/)).not.toBeInTheDocument()
@@ -241,7 +241,7 @@ describe('AddressCard', () => {
         { wrapper }
       )
 
-      expect(screen.getByText(/Cardholder name/)).toBeInTheDocument()
+      expect(screen.getByText(/Full name/)).toBeInTheDocument()
       expect(screen.getByText(/Bob Smith/)).toBeInTheDocument()
     })
   })

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

@@ -40,7 +40,7 @@ function AddressCard({
       {!isFormOpen && (
         <>
           <div className="flex justify-between">
-            <h4 className="font-semibold">Cardholder name</h4>
+            <h4 className="font-semibold">Full name</h4>
             <A
               variant="semibold"
               onClick={() => setIsFormOpen(true)}

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

@@ -0,0 +1,26 @@
+import { z } from 'zod'
+
+import bankLogo from 'assets/billing/bank.svg'
+import { SubscriptionDetailSchema } from 'services/account'
+
+interface BankInformationProps {
+  subscriptionDetail: z.infer<typeof SubscriptionDetailSchema>
+}
+function BankInformation({ subscriptionDetail }: BankInformationProps) {
+  return (
+    <div className="flex flex-col gap-2">
+      <div className="flex gap-1">
+        <img src={bankLogo} alt="bank logo" />
+        <div className="ml-1 flex flex-col self-center">
+          <b>
+            {subscriptionDetail?.defaultPaymentMethod?.usBankAccount?.bankName}
+            &nbsp;••••&nbsp;
+            {subscriptionDetail?.defaultPaymentMethod?.usBankAccount?.last4}
+          </b>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default BankInformation

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

@@ -6,11 +6,13 @@ import A from 'ui/A'
 import Button from 'ui/Button'
 import Icon from 'ui/Icon'
 
+import BankInformation from './BankInformation'
 import CardInformation from './CardInformation'
 import PaymentMethodForm from './PaymentMethodForm'
 function PaymentCard({ subscriptionDetail, provider, owner }) {
   const [isFormOpen, setIsFormOpen] = useState(false)
   const card = subscriptionDetail?.defaultPaymentMethod?.card
+  const usBankAccount = subscriptionDetail?.defaultPaymentMethod?.usBankAccount
 
   return (
     <div className="flex flex-col gap-2 border-t p-4">
@@ -20,7 +22,7 @@ function PaymentCard({ subscriptionDetail, provider, owner }) {
           <A
             variant="semibold"
             onClick={() => setIsFormOpen(true)}
-            hook="edit-card"
+            hook="edit-payment-method"
           >
             Edit <Icon name="chevronRight" size="sm" variant="solid" />
           </A>
@@ -31,14 +33,17 @@ function PaymentCard({ subscriptionDetail, provider, owner }) {
           provider={provider}
           owner={owner}
           closeForm={() => setIsFormOpen(false)}
+          subscriptionDetail={subscriptionDetail}
         />
       ) : card ? (
         <CardInformation card={card} subscriptionDetail={subscriptionDetail} />
+      ) : usBankAccount ? (
+        <BankInformation subscriptionDetail={subscriptionDetail} />
       ) : (
         <div className="flex flex-col gap-4 text-ds-gray-quinary">
           <p className="mt-4">
-            No credit card set. Please contact support if you think it’s an
-            error or set it yourself.
+            No payment method set. Please contact support if you think it&apos;s
+            an error or set it yourself.
           </p>
           <div className="flex self-start">
             <Button

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

@@ -1,3 +1,4 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 
@@ -6,18 +7,37 @@ import { Plans } from 'shared/utils/billing'
 
 import PaymentCard from './PaymentCard'
 
+const queryClient = new QueryClient()
+
 const mocks = vi.hoisted(() => ({
-  useUpdateCard: vi.fn(),
+  useUpdatePaymentMethod: vi.fn(),
+  useCreateStripeSetupIntent: vi.fn(),
 }))
 
-vi.mock('services/account', async () => {
-  const actual = await vi.importActual('services/account')
+vi.mock('services/account/useUpdatePaymentMethod', async () => {
+  const actual = await vi.importActual(
+    'services/account/useUpdatePaymentMethod'
+  )
   return {
     ...actual,
-    useUpdateCard: mocks.useUpdateCard,
+    useUpdatePaymentMethod: mocks.useUpdatePaymentMethod,
   }
 })
 
+vi.mock('services/account/useCreateStripeSetupIntent', async () => {
+  const actual = await vi.importActual(
+    'services/account/useCreateStripeSetupIntent'
+  )
+  return {
+    ...actual,
+    useCreateStripeSetupIntent: mocks.useCreateStripeSetupIntent,
+  }
+})
+
+afterEach(() => {
+  vi.clearAllMocks()
+})
+
 const subscriptionDetail = {
   defaultPaymentMethod: {
     card: {
@@ -35,7 +55,9 @@ const subscriptionDetail = {
 }
 
 const wrapper = ({ children }) => (
-  <ThemeContextProvider>{children}</ThemeContextProvider>
+  <QueryClientProvider client={queryClient}>
+    <ThemeContextProvider>{children}</ThemeContextProvider>
+  </QueryClientProvider>
 )
 
 // mocking all the stripe components; and trusting the library :)
@@ -48,9 +70,11 @@ vi.mock('@stripe/react-stripe-js', () => {
   return {
     useElements: () => ({
       getElement: vi.fn(),
+      submit: vi.fn(),
     }),
     useStripe: () => ({}),
-    CardElement: makeFakeComponent('CardElement'),
+    PaymentElement: makeFakeComponent('PaymentElement'),
+    Elements: makeFakeComponent('Elements'),
   }
 })
 
@@ -64,20 +88,20 @@ describe('PaymentCard', () => {
   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
-    it('renders the set card message', () => {
+    it('renders the set payment method message', () => {
       render(
         <PaymentCard subscriptionDetail={null} provider="gh" owner="codecov" />
       )
 
       expect(
         screen.getByText(
-          /No credit card set. Please contact support if you think it’s an error or set it yourself./
+          /No payment method set. Please contact support if you think it's an error or set it yourself./
         )
       ).toBeInTheDocument()
     })
   })
 
-  describe(`when the user doesn't have any card`, () => {
+  describe(`when the user doesn't have any payment method`, () => {
     it('renders an error message', () => {
       render(
         <PaymentCard
@@ -93,7 +117,7 @@ describe('PaymentCard', () => {
 
       expect(
         screen.getByText(
-          /No credit card set. Please contact support if you think it’s an error or set it yourself./
+          /No payment method set. Please contact support if you think it's an error or set it yourself./
         )
       ).toBeInTheDocument()
     })
@@ -113,7 +137,7 @@ describe('PaymentCard', () => {
           { wrapper }
         )
 
-        mocks.useUpdateCard.mockReturnValue({
+        mocks.useUpdatePaymentMethod.mockReturnValue({
           mutate: () => null,
           isLoading: false,
         })
@@ -136,15 +160,13 @@ describe('PaymentCard', () => {
           { wrapper }
         )
 
-        mocks.useUpdateCard.mockReturnValue({
+        mocks.useUpdatePaymentMethod.mockReturnValue({
           mutate: () => null,
           isLoading: false,
         })
         await user.click(screen.getByTestId('open-modal'))
 
-        expect(
-          screen.getByRole('button', { name: /update/i })
-        ).toBeInTheDocument()
+        expect(screen.getByTestId('save-payment-method')).toBeInTheDocument()
       })
     })
   })
@@ -199,9 +221,9 @@ describe('PaymentCard', () => {
   describe('when the user clicks on Edit card', () => {
     it(`doesn't render the card anymore`, async () => {
       const { user } = setup()
-      const updateCard = vi.fn()
-      mocks.useUpdateCard.mockReturnValue({
-        mutate: updateCard,
+      const updatePaymentMethod = vi.fn()
+      mocks.useUpdatePaymentMethod.mockReturnValue({
+        mutate: updatePaymentMethod,
         isLoading: false,
       })
 
@@ -213,16 +235,16 @@ describe('PaymentCard', () => {
         />,
         { wrapper }
       )
-      await user.click(screen.getByTestId('edit-card'))
+      await user.click(screen.getByTestId('edit-payment-method'))
 
       expect(screen.queryByText(/Visa/)).not.toBeInTheDocument()
     })
 
     it('renders the form', async () => {
       const { user } = setup()
-      const updateCard = vi.fn()
-      mocks.useUpdateCard.mockReturnValue({
-        mutate: updateCard,
+      const updatePaymentMethod = vi.fn()
+      mocks.useUpdatePaymentMethod.mockReturnValue({
+        mutate: updatePaymentMethod,
         isLoading: false,
       })
       render(
@@ -233,21 +255,23 @@ describe('PaymentCard', () => {
         />,
         { wrapper }
       )
-      await user.click(screen.getByTestId('edit-card'))
+      await user.click(screen.getByTestId('edit-payment-method'))
 
-      expect(
-        screen.getByRole('button', { name: /update/i })
-      ).toBeInTheDocument()
+      expect(screen.getByTestId('save-payment-method')).toBeInTheDocument()
     })
 
     describe('when submitting', () => {
       it('calls the service to update the card', async () => {
         const { user } = setup()
-        const updateCard = vi.fn()
-        mocks.useUpdateCard.mockReturnValue({
-          mutate: updateCard,
+        const updatePaymentMethod = vi.fn()
+        mocks.useUpdatePaymentMethod.mockReturnValue({
+          mutate: updatePaymentMethod,
           isLoading: false,
         })
+        mocks.useCreateStripeSetupIntent.mockReturnValue({
+          data: { clientSecret: 'test-secret' },
+        })
+
         render(
           <PaymentCard
             subscriptionDetail={subscriptionDetail}
@@ -256,17 +280,17 @@ describe('PaymentCard', () => {
           />,
           { wrapper }
         )
-        await user.click(screen.getByTestId('edit-card'))
-        await user.click(screen.queryByRole('button', { name: /update/i }))
+        await user.click(screen.getByTestId('edit-payment-method'))
+        await user.click(screen.getByTestId('save-payment-method'))
 
-        expect(updateCard).toHaveBeenCalled()
+        expect(updatePaymentMethod).toHaveBeenCalled()
       })
     })
 
     describe('when the user clicks on cancel', () => {
       it(`doesn't render the form anymore`, async () => {
         const { user } = setup()
-        mocks.useUpdateCard.mockReturnValue({
+        mocks.useUpdatePaymentMethod.mockReturnValue({
           mutate: vi.fn(),
           isLoading: false,
         })
@@ -279,11 +303,11 @@ describe('PaymentCard', () => {
           { wrapper }
         )
 
-        await user.click(screen.getByTestId('edit-card'))
-        await user.click(screen.getByRole('button', { name: /Cancel/ }))
+        await user.click(screen.getByTestId('edit-payment-method'))
+        await user.click(screen.getByTestId('cancel-payment'))
 
         expect(
-          screen.queryByRole('button', { name: /save/i })
+          screen.queryByTestId('update-payment-method')
         ).not.toBeInTheDocument()
       })
     })
@@ -293,7 +317,7 @@ describe('PaymentCard', () => {
     it('renders the error', async () => {
       const { user } = setup()
       const randomError = 'not rich enough'
-      mocks.useUpdateCard.mockReturnValue({
+      mocks.useUpdatePaymentMethod.mockReturnValue({
         mutate: vi.fn(),
         error: { message: randomError },
       })
@@ -306,7 +330,7 @@ describe('PaymentCard', () => {
         { wrapper }
       )
 
-      await user.click(screen.getByTestId('edit-card'))
+      await user.click(screen.getByTestId('edit-payment-method'))
 
       expect(screen.getByText(randomError)).toBeInTheDocument()
     })
@@ -315,7 +339,7 @@ describe('PaymentCard', () => {
   describe('when the form is loading', () => {
     it('has the error and save button disabled', async () => {
       const { user } = setup()
-      mocks.useUpdateCard.mockReturnValue({
+      mocks.useUpdatePaymentMethod.mockReturnValue({
         mutate: vi.fn(),
         isLoading: true,
       })
@@ -327,10 +351,10 @@ describe('PaymentCard', () => {
         />,
         { wrapper }
       )
-      await user.click(screen.getByTestId('edit-card'))
+      await user.click(screen.getByTestId('edit-payment-method'))
 
-      expect(screen.queryByRole('button', { name: /update/i })).toBeDisabled()
-      expect(screen.queryByRole('button', { name: /cancel/i })).toBeDisabled()
+      expect(screen.getByTestId('save-payment-method')).toBeDisabled()
+      expect(screen.getByTestId('cancel-payment')).toBeDisabled()
     })
   })
 })

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

@@ -79,8 +79,8 @@ afterEach(() => {
 })
 
 describe('PaymentMethodForm', () => {
-  describe('when the user clicks on Edit payment method', () => {
-    it(`doesn't render the payment method anymore`, async () => {
+  describe('when the user opens the Payment Method Form', () => {
+    it(`doesn't render the View payment method anymore`, async () => {
       const user = userEvent.setup()
       const updatePaymentMethod = vi.fn()
       mocks.useUpdatePaymentMethod.mockReturnValue({