feat: Add ACH related hooks (#3662)

Author: suejung-sentry

src/pages/PlanPage/subRoutes/CancelPlanPage/CancelPlanPage.tsx

@@ -9,6 +9,7 @@ import {
   useAvailablePlans,
   usePlanData,
 } from 'services/account'
+import { Provider } from 'shared/api/helpers'
 import { BillingRate, shouldDisplayTeamCard } from 'shared/utils/billing'
 import Spinner from 'ui/Spinner'
 
@@ -25,7 +26,7 @@ const Loader = () => (
 
 function CancelPlanPage() {
   const { provider, owner } = useParams<{
-    provider: string
+    provider: Provider
     owner: string
   }>()
   const { data: accountDetailsData } = useAccountDetails({ provider, owner })

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

@@ -1,13 +1,14 @@
 import { useParams } from 'react-router-dom'
 
 import { useAccountDetails } from 'services/account'
+import { Provider } from 'shared/api/helpers'
 
 import AddressCard from './Address/AddressCard'
 import EmailAddress from './EmailAddress'
 import PaymentCard from './PaymentCard'
 
 interface URLParams {
-  provider: string
+  provider: Provider
   owner: string
 }
 

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

@@ -5,6 +5,7 @@ import { useParams } from 'react-router-dom'
 import { z } from 'zod'
 
 import { useAccountDetails, useUpdateBillingEmail } from 'services/account'
+import { Provider } from 'shared/api/helpers'
 import A from 'ui/A'
 import Button from 'ui/Button'
 import Icon from 'ui/Icon'
@@ -18,7 +19,7 @@ const emailSchema = z.object({
 })
 
 interface URLParams {
-  provider: string
+  provider: Provider
   owner: string
 }
 

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

@@ -3,6 +3,7 @@ import { useParams } from 'react-router-dom'
 
 import { usePlanUpdatedNotification } from 'pages/PlanPage/context'
 import { useAccountDetails, usePlanData } from 'services/account'
+import { Provider } from 'shared/api/helpers'
 import { getScheduleStart } from 'shared/plan/ScheduledPlanDetails/ScheduledPlanDetails'
 import A from 'ui/A'
 import { Alert } from 'ui/Alert'
@@ -16,7 +17,7 @@ import LatestInvoiceCard from './LatestInvoiceCard'
 import { EnterpriseAccountDetailsQueryOpts } from './queries/EnterpriseAccountDetailsQueryOpts'
 
 interface URLParams {
-  provider: string
+  provider: Provider
   owner: string
 }
 

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

@@ -1,14 +1,15 @@
 import { useParams } from 'react-router-dom'
 
 import { useAccountDetails, usePlanData } from 'services/account'
+import { Provider } from 'shared/api/helpers'
 import { CollectionMethods } from 'shared/utils/billing'
 
 import EnterprisePlanCard from './EnterprisePlanCard'
 import FreePlanCard from './FreePlanCard'
 import PaidPlanCard from './PaidPlanCard'
 
 interface URLParams {
-  provider: string
+  provider: Provider
   owner: string
 }
 

src/pages/PlanPage/subRoutes/CurrentOrgPlan/CurrentPlanCard/PaidPlanCard/PaidPlanCard.tsx

@@ -4,14 +4,15 @@ import { useParams } from 'react-router-dom'
 
 import { PlanPageDataQueryOpts } from 'pages/PlanPage/queries/PlanPageDataQueryOpts'
 import { useAccountDetails, usePlanData } from 'services/account'
+import { Provider } from 'shared/api/helpers'
 import BenefitList from 'shared/plan/BenefitList'
 import ScheduledPlanDetails from 'shared/plan/ScheduledPlanDetails'
 
 import ActionsBilling from '../shared/ActionsBilling/ActionsBilling'
 import PlanPricing from '../shared/PlanPricing'
 
 type URLParams = {
-  provider: string
+  provider: Provider
   owner: string
 }
 

src/pages/PlanPage/subRoutes/UpgradePlanPage/UpgradeForm/Controllers/ProPlanController/PriceCallout/PriceCallout.tsx

@@ -7,6 +7,7 @@ import {
   useAccountDetails,
   useAvailablePlans,
 } from 'services/account'
+import { Provider } from 'shared/api/helpers'
 import {
   BillingRate,
   findProPlans,
@@ -32,7 +33,7 @@ const PriceCallout: React.FC<PriceCalloutProps> = ({
   seats,
   setFormValue,
 }) => {
-  const { provider, owner } = useParams<{ provider: string; owner: string }>()
+  const { provider, owner } = useParams<{ provider: Provider; owner: string }>()
   const { data: plans } = useAvailablePlans({ provider, owner })
   const { proPlanMonth, proPlanYear } = findProPlans({ plans })
   const perMonthPrice = calculatePriceProPlan({

src/pages/PlanPage/subRoutes/UpgradePlanPage/UpgradeForm/Controllers/ProPlanController/UserCount/UserCount.tsx

@@ -2,6 +2,7 @@ import isNumber from 'lodash/isNumber'
 import { useParams } from 'react-router-dom'
 
 import { useAccountDetails } from 'services/account'
+import { Provider } from 'shared/api/helpers'
 
 interface StudentTextProps {
   activatedStudents?: number
@@ -41,7 +42,7 @@ const UserText: React.FC<UserTextProps> = ({
 }
 
 const UserCount: React.FC = () => {
-  const { provider, owner } = useParams<{ provider: string; owner: string }>()
+  const { provider, owner } = useParams<{ provider: Provider; owner: string }>()
   const { data: accountDetails } = useAccountDetails({ provider, owner })
 
   const activatedStudentCount = accountDetails?.activatedStudentCount

src/pages/PlanPage/subRoutes/UpgradePlanPage/UpgradeForm/Controllers/SentryPlanController/PriceCallout/PriceCallout.tsx

@@ -7,6 +7,7 @@ import {
   useAccountDetails,
   useAvailablePlans,
 } from 'services/account'
+import { Provider } from 'shared/api/helpers'
 import {
   BillingRate,
   findSentryPlans,
@@ -33,7 +34,7 @@ const PriceCallout: React.FC<PriceCalloutProps> = ({
   seats,
   setFormValue,
 }) => {
-  const { provider, owner } = useParams<{ provider: string; owner: string }>()
+  const { provider, owner } = useParams<{ provider: Provider; owner: string }>()
   const { data: plans } = useAvailablePlans({ provider, owner })
   const { sentryPlanMonth, sentryPlanYear } = findSentryPlans({ plans })
   const perMonthPrice = calculatePriceSentryPlan({

src/pages/PlanPage/subRoutes/UpgradePlanPage/UpgradeForm/Controllers/SentryPlanController/UserCount/UserCount.tsx

@@ -2,6 +2,7 @@ import isNumber from 'lodash/isNumber'
 import { useParams } from 'react-router-dom'
 
 import { useAccountDetails } from 'services/account'
+import { Provider } from 'shared/api/helpers'
 
 interface StudentTextProps {
   activatedStudents?: number
@@ -30,7 +31,7 @@ const UserText: React.FC = () => {
 }
 
 const UserCount: React.FC = () => {
-  const { provider, owner } = useParams<{ provider: string; owner: string }>()
+  const { provider, owner } = useParams<{ provider: Provider; owner: string }>()
   const { data: accountDetails } = useAccountDetails({ provider, owner })
 
   const activatedStudentCount = accountDetails?.activatedStudentCount

src/pages/PlanPage/subRoutes/UpgradePlanPage/UpgradeForm/Controllers/TeamPlanController/PriceCallout/PriceCallout.tsx

@@ -8,6 +8,7 @@ import {
   useAccountDetails,
   useAvailablePlans,
 } from 'services/account'
+import { Provider } from 'shared/api/helpers'
 import {
   BillingRate,
   findTeamPlans,
@@ -34,7 +35,7 @@ const PriceCallout: React.FC<PriceCalloutProps> = ({
   seats,
   setFormValue,
 }) => {
-  const { provider, owner } = useParams<{ provider: string; owner: string }>()
+  const { provider, owner } = useParams<{ provider: Provider; owner: string }>()
   const { data: plans } = useAvailablePlans({ provider, owner })
   const { teamPlanMonth, teamPlanYear } = findTeamPlans({ plans })
   const perMonthPrice = calculatePriceTeamPlan({

src/pages/PlanPage/subRoutes/UpgradePlanPage/UpgradeForm/Controllers/TeamPlanController/UserCount/UserCount.tsx

@@ -2,6 +2,7 @@ import isNumber from 'lodash/isNumber'
 import { useParams } from 'react-router-dom'
 
 import { useAccountDetails } from 'services/account'
+import { Provider } from 'shared/api/helpers'
 
 interface StudentTextProps {
   activatedStudents?: number
@@ -42,7 +43,7 @@ const UserText: React.FC<UserTextProps> = ({
 }
 
 const UserCount: React.FC = () => {
-  const { provider, owner } = useParams<{ provider: string; owner: string }>()
+  const { provider, owner } = useParams<{ provider: Provider; owner: string }>()
   const { data: accountDetails } = useAccountDetails({ provider, owner })
 
   const activatedStudentCount = accountDetails?.activatedStudentCount

src/pages/PlanPage/subRoutes/UpgradePlanPage/UpgradeForm/UpgradeForm.tsx

@@ -9,6 +9,7 @@ import {
   useAvailablePlans,
   usePlanData,
 } from 'services/account'
+import { Provider } from 'shared/api/helpers'
 import { canApplySentryUpgrade, getNextBillingDate } from 'shared/utils/billing'
 import {
   getDefaultValuesUpgradeForm,
@@ -24,7 +25,7 @@ import UpdateBlurb from './UpdateBlurb/UpdateBlurb'
 import UpdateButton from './UpdateButton'
 
 type URLParams = {
-  provider: string
+  provider: Provider
   owner: string
 }
 

src/services/account/index.ts

@@ -9,5 +9,6 @@ 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

@@ -2,7 +2,7 @@ import { useQuery } from '@tanstack/react-query'
 import { z } from 'zod'
 
 import Api from 'shared/api'
-import { NetworkErrorObject } from 'shared/api/helpers'
+import { NetworkErrorObject, Provider } from 'shared/api/helpers'
 
 const InvoiceSchema = z
   .object({
@@ -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()
@@ -147,7 +153,7 @@ export const AccountDetailsSchema = z.object({
 })
 
 export interface UseAccountDetailsArgs {
-  provider: string
+  provider: Provider
   owner: string
   opts?: {
     enabled?: boolean
@@ -158,7 +164,7 @@ function getPathAccountDetails({
   provider,
   owner,
 }: {
-  provider: string
+  provider: Provider
   owner: string
 }) {
   return `/${provider}/${owner}/account-details/`
@@ -169,7 +175,7 @@ function fetchAccountDetails({
   owner,
   signal,
 }: {
-  provider: string
+  provider: Provider
   owner: string
   signal?: AbortSignal
 }) {