feat: Add ACH related hooks

src/services/account/index.ts

@@ -8,6 +8,6 @@ export * from './useInvoice'
 export * from './usePlanData'
 export * from './useAvailablePlans'
 export * from './useSentryToken'
-export * from './useUpdateCard'
+export * from './useUpdatePaymentMethod'
 export * from './useUpgradePlan'
 export * from './useUpdateBillingEmail'

src/services/account/useAccountDetails.test.tsx

@@ -4,9 +4,10 @@ import { http, HttpResponse } from 'msw'
 import { setupServer } from 'msw/node'
 import React from 'react'
 import { MemoryRouter, Route } from 'react-router-dom'
+import { z } from 'zod'
 
-import { accountDetailsObject, accountDetailsParsedObj } from './mocks'
-import { useAccountDetails } from './useAccountDetails'
+import { accountDetailsParsedObj } from './mocks'
+import { AccountDetailsSchema, useAccountDetails } from './useAccountDetails'
 
 vi.mock('js-cookie')
 
@@ -45,17 +46,17 @@ afterAll(() => {
 })
 
 describe('useAccountDetails', () => {
-  function setup() {
+  function setup(accountDetails: z.infer<typeof AccountDetailsSchema>) {
     server.use(
       http.get(`/internal/${provider}/${owner}/account-details/`, () => {
-        return HttpResponse.json(accountDetailsObject)
+        return HttpResponse.json(accountDetails)
       })
     )
   }
 
   describe('when called', () => {
     it('returns the data', async () => {
-      setup()
+      setup(accountDetailsParsedObj)
       const { result } = renderHook(
         () => useAccountDetails({ provider, owner }),
         { wrapper: wrapper() }
@@ -65,5 +66,43 @@ describe('useAccountDetails', () => {
         expect(result.current.data).toEqual(accountDetailsParsedObj)
       )
     })
+
+    it('returns data with usBankAccount when enabled', async () => {
+      const withUSBankAccount = {
+        ...accountDetailsParsedObj,
+        subscriptionDetail: {
+          ...accountDetailsParsedObj.subscriptionDetail,
+          defaultPaymentMethod: {
+            billingDetails: null,
+            usBankAccount: {
+              bankName: 'Bank of America',
+              last4: '1234',
+            },
+          },
+        },
+      }
+      setup(withUSBankAccount)
+
+      const { result } = renderHook(
+        () => useAccountDetails({ provider, owner }),
+        { wrapper: wrapper() }
+      )
+
+      await waitFor(() =>
+        expect(result.current.data).toEqual({
+          ...accountDetailsParsedObj,
+          subscriptionDetail: {
+            ...accountDetailsParsedObj.subscriptionDetail,
+            defaultPaymentMethod: {
+              billingDetails: null,
+              usBankAccount: {
+                bankName: 'Bank of America',
+                last4: '1234',
+              },
+            },
+          },
+        })
+      )
+    })
   })
 })

src/services/account/useAccountDetails.ts

@@ -75,6 +75,12 @@ export const PaymentMethodSchema = z
         last4: z.string(),
       })
       .nullish(),
+    usBankAccount: z
+      .object({
+        bankName: z.string(),
+        last4: z.string(),
+      })
+      .nullish(),
     billingDetails: BillingDetailsSchema.nullable(),
   })
   .nullable()

src/services/account/useCreateStripeSetupIntent.test.tsx

@@ -0,0 +1,90 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { renderHook, waitFor } from '@testing-library/react'
+import { graphql, HttpResponse } from 'msw'
+import { setupServer } from 'msw/node'
+import React from 'react'
+import { MemoryRouter, Route } from 'react-router-dom'
+
+import { useCreateStripeSetupIntent } from './useCreateStripeSetupIntent'
+
+const queryClient = new QueryClient({
+  defaultOptions: { queries: { retry: false } },
+})
+const wrapper =
+  (initialEntries = '/gh'): React.FC<React.PropsWithChildren> =>
+  ({ children }) => (
+    <QueryClientProvider client={queryClient}>
+      <MemoryRouter initialEntries={[initialEntries]}>
+        <Route path="/:provider">{children}</Route>
+      </MemoryRouter>
+    </QueryClientProvider>
+  )
+
+const provider = 'gh'
+const owner = 'codecov'
+
+const server = setupServer()
+beforeAll(() => {
+  server.listen()
+})
+
+afterEach(() => {
+  queryClient.clear()
+  server.resetHandlers()
+})
+
+afterAll(() => {
+  server.close()
+})
+
+describe('useCreateStripeSetupIntent', () => {
+  function setup(hasError = false) {
+    server.use(
+      graphql.mutation('CreateStripeSetupIntent', () => {
+        if (hasError) {
+          return HttpResponse.json({ data: {} })
+        }
+
+        return HttpResponse.json({
+          data: { createStripeSetupIntent: { clientSecret: 'test_secret' } },
+        })
+      })
+    )
+  }
+
+  describe('when called', () => {
+    describe('on success', () => {
+      it('returns the data', async () => {
+        setup()
+        const { result } = renderHook(
+          () => useCreateStripeSetupIntent({ provider, owner }),
+          { wrapper: wrapper() }
+        )
+
+        await waitFor(() =>
+          expect(result.current.data).toEqual({ clientSecret: 'test_secret' })
+        )
+      })
+    })
+
+    describe('on fail', () => {
+      beforeAll(() => {
+        vi.spyOn(console, 'error').mockImplementation(() => {})
+      })
+
+      afterAll(() => {
+        vi.restoreAllMocks()
+      })
+
+      it('fails to parse if bad data', async () => {
+        setup(true)
+        const { result } = renderHook(
+          () => useCreateStripeSetupIntent({ provider, owner }),
+          { wrapper: wrapper() }
+        )
+
+        await waitFor(() => expect(result.current.error).toBeTruthy())
+      })
+    })
+  })
+})

src/services/account/useCreateStripeSetupIntent.ts

@@ -0,0 +1,81 @@
+import { useQuery } from '@tanstack/react-query'
+import { z } from 'zod'
+
+import Api from 'shared/api'
+import { NetworkErrorObject } from 'shared/api/helpers'
+
+export const CreateStripeSetupIntentSchema = z.object({
+  createStripeSetupIntent: z.object({
+    clientSecret: z.string().nullish(),
+    error: z
+      .discriminatedUnion('__typename', [
+        z.object({
+          __typename: z.literal('ValidationError'),
+        }),
+        z.object({
+          __typename: z.literal('UnauthenticatedError'),
+        }),
+      ])
+      .nullish(),
+  }),
+})
+
+export interface UseCreateStripeSetupIntentArgs {
+  provider: string
+  owner: string
+  opts?: {
+    enabled?: boolean
+  }
+}
+
+function createStripeSetupIntent({
+  provider,
+  owner,
+  signal,
+}: {
+  provider: string
+  owner: string
+  signal?: AbortSignal
+}) {
+  return Api.graphql({
+    provider,
+    signal,
+    query: `
+      mutation CreateStripeSetupIntent($owner: String!) {
+        createStripeSetupIntent(input: { owner: $owner }) {
+          clientSecret
+          error {
+            __typename
+          }
+        }
+      }
+    `,
+    variables: {
+      owner,
+    },
+  })
+}
+
+export function useCreateStripeSetupIntent({
+  provider,
+  owner,
+  opts = {},
+}: UseCreateStripeSetupIntentArgs) {
+  return useQuery({
+    queryKey: ['setupIntent', provider, owner],
+    queryFn: ({ signal }) =>
+      createStripeSetupIntent({ provider, owner, signal }).then((res) => {
+        const parsedRes = CreateStripeSetupIntentSchema.safeParse(res.data)
+        if (!parsedRes.success) {
+          return Promise.reject({
+            status: 404,
+            data: {},
+            dev: 'useStripeSetupIntent - 404 failed to parse',
+          } satisfies NetworkErrorObject)
+        }
+
+        return parsedRes.data.createStripeSetupIntent
+      }),
+    ...opts,
+  })
+}

src/services/account/useUpdateBillingEmail.test.tsx

@@ -95,6 +95,7 @@ describe('useUpdateBillingEmail', () => {
       await waitFor(() =>
         expect(mockBody).toHaveBeenCalledWith({
           new_email: '[email protected]',
+          should_propagate_to_payment_methods: true,
         })
       )
     })

src/services/account/useUpdateBillingEmail.ts

@@ -20,6 +20,7 @@ export function useUpdateBillingEmail({ provider, owner }: UsePlanDataArgs) {
       const body = {
         /* eslint-disable camelcase */
         new_email: formData?.newEmail,
+        should_propagate_to_payment_methods: true,
       }
       return Api.patch({ path, provider, body })
     },