[TASK-14554]feat: multi-step bank account form

src/components/AddWithdraw/AddWithdrawCountriesList.tsx

@@ -12,21 +12,19 @@ import { useParams, useRouter } from 'next/navigation'
 import EmptyState from '../Global/EmptyStates/EmptyState'
 import { useAuth } from '@/context/authContext'
 import { useEffect, useMemo, useRef, useState } from 'react'
-import { DynamicBankAccountForm, IBankAccountDetails } from './DynamicBankAccountForm'
 import { addBankAccount, updateUserById } from '@/app/actions/users'
 import { BridgeKycStatus } from '@/utils/bridge-accounts.utils'
 import { AddBankAccountPayload } from '@/app/actions/types/users.types'
 import { useWebSocket } from '@/hooks/useWebSocket'
 import { useWithdrawFlow } from '@/context/WithdrawFlowContext'
 import { Account } from '@/interfaces'
-import PeanutLoading from '../Global/PeanutLoading'
 import { getCountryCodeForWithdraw } from '@/utils/withdraw.utils'
-import { isMantecaCountry } from '@/constants/manteca.consts'
 import { DeviceType, useDeviceType } from '@/hooks/useGetDeviceType'
 import CryptoMethodDrawer from '../AddMoney/components/CryptoMethodDrawer'
 import { useAppDispatch } from '@/redux/hooks'
 import { bankFormActions } from '@/redux/slices/bank-form-slice'
 import { InitiateBridgeKYCModal } from '../Kyc/InitiateBridgeKYCModal'
+import { MultiStepBankAccountForm, IBankAccountDetails } from '../MultiStepBankAccountForm'
 
 interface AddWithdrawCountriesListProps {
     flow: 'add' | 'withdraw'
@@ -234,7 +232,8 @@ const AddWithdrawCountriesList = ({ flow }: AddWithdrawCountriesListProps) => {
                         setView('list')
                     }}
                 />
-                <DynamicBankAccountForm
+
+                <MultiStepBankAccountForm
                     ref={formRef}
                     country={getCountryCodeForWithdraw(currentCountry.id)}
                     onSuccess={handleFormSubmit}

src/components/Claim/Link/views/BankFlowManager.view.tsx

@@ -1,7 +1,6 @@
 'use client'
 
 import { IClaimScreenProps } from '../../Claim.consts'
-import { DynamicBankAccountForm, IBankAccountDetails } from '@/components/AddWithdraw/DynamicBankAccountForm'
 import { ClaimBankFlowStep, useClaimBankFlow } from '@/context/ClaimBankFlowContext'
 import { useCallback, useContext, useState, useRef, useEffect } from 'react'
 import { loadingStateContext } from '@/context'
@@ -31,6 +30,7 @@ import { useAppDispatch } from '@/redux/hooks'
 import { bankFormActions } from '@/redux/slices/bank-form-slice'
 import { sendLinksApi } from '@/services/sendLinks'
 import { InitiateBridgeKYCModal } from '@/components/Kyc/InitiateBridgeKYCModal'
+import { MultiStepBankAccountForm, IBankAccountDetails } from '@/components/MultiStepBankAccountForm'
 
 type BankAccountWithId = IBankAccountDetails &
     (
@@ -465,7 +465,7 @@ export const BankFlowManager = (props: IClaimScreenProps) => {
                             }}
                         />
                     </div>
-                    <DynamicBankAccountForm
+                    <MultiStepBankAccountForm
                         ref={formRef}
                         key={selectedCountry?.id}
                         country={getCountryCodeForWithdraw(selectedCountry?.id ?? '')}

src/components/MultiStepBankAccountForm/FormInput.tsx

@@ -0,0 +1,62 @@
+import React from 'react'
+import { Control, Controller, FieldErrors, ControllerRenderProps, RegisterOptions } from 'react-hook-form'
+import BaseInput from '@/components/0_Bruddle/BaseInput'
+import ErrorAlert from '@/components/Global/ErrorAlert'
+import { IBankAccountDetails } from './types'
+
+interface FormInputProps {
+    name: keyof IBankAccountDetails
+    placeholder: string
+    rules: RegisterOptions<IBankAccountDetails, keyof IBankAccountDetails>
+    control: Control<IBankAccountDetails>
+    errors: FieldErrors<IBankAccountDetails>
+    touchedFields: Partial<Record<keyof IBankAccountDetails, boolean>>
+    type?: string
+    onBlur?: (field: ControllerRenderProps<IBankAccountDetails, keyof IBankAccountDetails>) => Promise<void> | void
+}
+
+const FormInput: React.FC<FormInputProps> = ({
+    name,
+    placeholder,
+    rules,
+    control,
+    errors,
+    touchedFields,
+    type = 'text',
+    onBlur,
+}) => {
+    return (
+        <div className="w-full">
+            <div className="relative">
+                <Controller
+                    name={name}
+                    control={control}
+                    rules={rules}
+                    render={({ field }) => (
+                        <BaseInput
+                            {...field}
+                            type={type}
+                            placeholder={placeholder}
+                            className="h-12 w-full rounded-sm border border-n-1 bg-white px-4 text-sm"
+                            onBlur={async (e) => {
+                                // Trim whitespace on blur
+                                if (typeof field.value === 'string') {
+                                    field.onChange(field.value.trim())
+                                }
+                                field.onBlur()
+                                if (onBlur) {
+                                    await onBlur(field)
+                                }
+                            }}
+                        />
+                    )}
+                />
+            </div>
+            <div className="mt-2 w-fit text-start">
+                {errors[name] && touchedFields[name] && <ErrorAlert description={errors[name]?.message ?? ''} />}
+            </div>
+        </div>
+    )
+}
+
+export default FormInput