Fix bank account not found error (#366)

* docs: propose updated theming approach

* fix: resolve error for no bank account found in company onboarding

Author: serikjensen

src/components/Company/BankAccount/BankAccount.tsx

@@ -10,21 +10,21 @@ import { BankAccountList } from './BankAccountList/BankAccountList'
 import { BankAccountForm } from './BankAccountForm/BankAccountForm'
 import { BankAccountVerify } from './BankAccountVerify/BankAccountVerify'
 import { Flow } from '@/components/Flow/Flow'
-import type { BaseComponentInterface } from '@/components/Base'
+import { BaseComponent, type BaseComponentInterface } from '@/components/Base'
 import { useComponentDictionary } from '@/i18n/I18n'
 
-export interface LocationsProps extends BaseComponentInterface<'Company.BankAccount'> {
+export interface BankAccountProps extends BaseComponentInterface<'Company.BankAccount'> {
   companyId: string
 }
 
-export function BankAccount({ companyId, onEvent, dictionary }: LocationsProps) {
+function BankAccountFlow({ companyId, onEvent, dictionary }: BankAccountProps) {
   useComponentDictionary('Company.BankAccount', dictionary)
   const { data } = useBankAccountsGetSuspense({ companyId })
   const companyBankAccountList = data.companyBankAccountList!
   //Currently, we only support a single default bank account per company.
   const bankAccount = companyBankAccountList.length > 0 ? companyBankAccountList[0]! : null
 
-  const manageLocations = createMachine(
+  const manageBankAccount = createMachine(
     bankAccount ? 'viewBankAccount' : 'addBankAccount',
     bankAccountStateMachine,
     (initialContext: BankAccountContextInterface) => ({
@@ -35,7 +35,15 @@ export function BankAccount({ companyId, onEvent, dictionary }: LocationsProps)
       showVerifiedMessage: false,
     }),
   )
-  return <Flow machine={manageLocations} onEvent={onEvent} />
+  return <Flow machine={manageBankAccount} onEvent={onEvent} />
+}
+
+export function BankAccount(props: BankAccountProps) {
+  return (
+    <BaseComponent {...props}>
+      <BankAccountFlow {...props} />
+    </BaseComponent>
+  )
 }
 
 BankAccount.BankAccountList = BankAccountList

src/components/Company/BankAccount/BankAccountForm/BankAccountForm.tsx

@@ -1,6 +1,8 @@
 import { useBankAccountsCreateMutation } from '@gusto/embedded-api/react-query/bankAccountsCreate'
 import { FormProvider, useForm } from 'react-hook-form'
 import { zodResolver } from '@hookform/resolvers/zod'
+import { invalidateAllBankAccountsGet } from '@gusto/embedded-api/react-query/bankAccountsGet'
+import { useQueryClient } from '@tanstack/react-query'
 import { Head } from './Head'
 import type { BankAccountFormInputs } from './Form'
 import { BankAccountFormSchema, Form } from './Form'
@@ -28,6 +30,7 @@ export function BankAccountForm(props: BankAccountFormProps & BaseComponentInter
 function Root({ companyId, className, children }: BankAccountFormProps) {
   useI18n('Company.BankAccount')
   const { onEvent, baseSubmitHandler } = useBase()
+  const queryClient = useQueryClient()
 
   const { mutateAsync: createBankAccount, isPending: isPendingCreate } =
     useBankAccountsCreateMutation()
@@ -43,6 +46,9 @@ function Root({ companyId, className, children }: BankAccountFormProps) {
         //Account type is always checking for company bank accounts
         request: { companyId, requestBody: { ...payload, accountType: 'Checking' } },
       })
+
+      await invalidateAllBankAccountsGet(queryClient)
+
       onEvent(componentEvents.COMPANY_BANK_ACCOUNT_CREATED, companyBankAccount)
     })
   }

src/components/Company/DocumentSigner/DocumentSigner.tsx

@@ -6,20 +6,15 @@ import { documentSignerMachine } from './stateMachine'
 import type { DocumentSignerContextInterface } from './useDocumentSigner'
 import { SignatureForm } from './SignatureForm'
 import { Flow } from '@/components/Flow/Flow'
-import type { BaseComponentInterface } from '@/components/Base'
+import { BaseComponent, type BaseComponentInterface } from '@/components/Base'
 import { useComponentDictionary } from '@/i18n/I18n'
 
 export interface DocumentSignerProps extends BaseComponentInterface<'Company.DocumentList'> {
   companyId: string
   signatoryId?: string
 }
 
-export const DocumentSigner = ({
-  companyId,
-  signatoryId,
-  onEvent,
-  dictionary,
-}: DocumentSignerProps) => {
+function DocumentSignerFlow({ companyId, signatoryId, onEvent, dictionary }: DocumentSignerProps) {
   useComponentDictionary('Company.DocumentList', dictionary)
   const {
     data: { signatoryList },
@@ -46,5 +41,13 @@ export const DocumentSigner = ({
   return <Flow machine={documentSigner} onEvent={onEvent} />
 }
 
+export function DocumentSigner(props: DocumentSignerProps) {
+  return (
+    <BaseComponent {...props}>
+      <DocumentSignerFlow {...props} />
+    </BaseComponent>
+  )
+}
+
 DocumentSigner.DocumentList = DocumentList
 DocumentSigner.SignatureForm = SignatureForm