chore(wire): use form state to allow user to proceed (#6278)

* chore(wire): use form state to allow user to proceed * chore(wire-form): modify returns according to PR
blockchain · Feb 15, 2024 · e54ce25 · e54ce25
1 parent 70bdfd1
commit e54ce25
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 49 deletions.
diff --git a/...ntend/src/modals/Brokerage/Banks/Withdraw/AddBankWireForm/Steps/EnterIntermediaryData.tsx b/...ntend/src/modals/Brokerage/Banks/Withdraw/AddBankWireForm/Steps/EnterIntermediaryData.tsx
@@ -1,7 +1,6 @@
 import React from 'react'
 import { FormattedMessage } from 'react-intl'
-import { useSelector } from 'react-redux'
-import { Field, formValueSelector, reduxForm } from 'redux-form'
+import { Field, reduxForm } from 'redux-form'
 
 import { Button, Text } from 'blockchain-info-components'
 import FlyoutFooter from 'components/Flyout/Footer'
@@ -12,28 +11,13 @@ import { maxLength, onlyNumbers, required, validRoutingNumber } from 'services/f
 import { Header } from '../Header'
 import { WIRE_BANK_FORM } from './constants'
 import { FieldsWrapper } from './StepsStyles'
-import { StepProps, WireBankFormType } from './StepsTypes'
+import { StepFormProps, StepProps } from './StepsTypes'
 
 const validBankName = maxLength(35)
 
-const EnterIntermediaryBank = ({ onClickBack, onNextStep }: StepProps) => {
-  const { intermediaryAccountNumber, intermediaryBankName, intermediaryRoutingNumber } =
-    useSelector((state) =>
-      formValueSelector(WIRE_BANK_FORM)(
-        state,
-        'intermediaryBankName',
-        'intermediaryRoutingNumber',
-        'intermediaryAccountNumber'
-      )
-    ) as WireBankFormType
-
-  const disabled =
-    [intermediaryBankName, intermediaryAccountNumber].some((val) => !val || val.length === 0) ||
-    intermediaryRoutingNumber.length !== 9 ||
-    intermediaryBankName.length > 18
-
+const EnterIntermediaryBank = ({ invalid, onClickBack, onNextStep }: StepFormProps) => {
   const handleNext = () => {
-    if (disabled) return undefined
+    if (invalid) return
     onNextStep()
   }
 
@@ -76,7 +60,7 @@ const EnterIntermediaryBank = ({ onClickBack, onNextStep }: StepProps) => {
             data-e2e='intermediaryRoutingNumber'
             name='intermediaryRoutingNumber'
             noLastPass
-            validate={[required, validRoutingNumber, onlyNumbers]}
+            validate={[required, onlyNumbers, validRoutingNumber]}
             errorBottom
           />
         </div>
@@ -105,7 +89,7 @@ const EnterIntermediaryBank = ({ onClickBack, onNextStep }: StepProps) => {
           fullwidth
           nature='primary'
           onClick={handleNext}
-          disabled={disabled}
+          disabled={invalid}
         >
           Next
         </Button>

diff --git a/...t-v4-frontend/src/modals/Brokerage/Banks/Withdraw/AddBankWireForm/Steps/EnterUserData.tsx b/...t-v4-frontend/src/modals/Brokerage/Banks/Withdraw/AddBankWireForm/Steps/EnterUserData.tsx
@@ -1,7 +1,6 @@
 import React from 'react'
 import { FormattedMessage } from 'react-intl'
-import { useSelector } from 'react-redux'
-import { Field, formValueSelector, reduxForm } from 'redux-form'
+import { Field, InjectedFormProps, reduxForm } from 'redux-form'
 
 import { Button, Text } from 'blockchain-info-components'
 import FlyoutFooter from 'components/Flyout/Footer'
@@ -12,33 +11,13 @@ import { maxLength, onlyNumbers, required, validRoutingNumber } from 'services/f
 import { Header } from '../Header'
 import { WIRE_BANK_FORM } from './constants'
 import { FieldsWrapper } from './StepsStyles'
-import { StepProps, WireBankFormType } from './StepsTypes'
+import { StepFormProps, StepProps } from './StepsTypes'
 
 const validBankName = maxLength(35)
 
-const EnterUserData = ({ onClickBack, onNextStep }: StepProps) => {
-  const { accountNumber, bankName, hasIntermediaryBank, routingNumber } = useSelector((state) =>
-    formValueSelector(WIRE_BANK_FORM)(
-      state,
-      'routingNumber',
-      'accountNumber',
-      'bankName',
-      'hasIntermediaryBank'
-    )
-  ) as WireBankFormType
-
-  const hasBasicRoutingInfo = accountNumber?.length > 0 && routingNumber?.length === 9
-  const missingData = [routingNumber, accountNumber, bankName, hasIntermediaryBank].some((e) => !e)
-
-  const disabled =
-    !hasBasicRoutingInfo ||
-    missingData ||
-    bankName.length === 0 ||
-    bankName.length > 18 ||
-    hasIntermediaryBank.length === 0
-
+const EnterUserData = ({ invalid, onClickBack, onNextStep }: StepFormProps) => {
   const handleNext = () => {
-    if (disabled) return undefined
+    if (invalid) return
     onNextStep()
   }
 
@@ -153,7 +132,7 @@ const EnterUserData = ({ onClickBack, onNextStep }: StepProps) => {
           fullwidth
           nature='primary'
           onClick={handleNext}
-          disabled={disabled}
+          disabled={invalid}
         >
           Next
         </Button>
@@ -164,7 +143,7 @@ const EnterUserData = ({ onClickBack, onNextStep }: StepProps) => {
 
 export default reduxForm<{}, StepProps>({
   destroyOnUnmount: false,
-  form: 'addWireBank',
+  form: WIRE_BANK_FORM,
   initialValues: {
     hasIntermediaryBank: 'NO'
   }

diff --git a/...allet-v4-frontend/src/modals/Brokerage/Banks/Withdraw/AddBankWireForm/Steps/StepsTypes.ts b/...allet-v4-frontend/src/modals/Brokerage/Banks/Withdraw/AddBankWireForm/Steps/StepsTypes.ts
@@ -1,3 +1,5 @@
+import { InjectedFormProps } from 'redux-form'
+
 export type WireBankFormType = {
   acceptDetails: boolean
   accountNumber: string
@@ -21,3 +23,5 @@ export type StepProps = {
   onClickBack: () => void
   onNextStep: () => void
 }
+
+export type StepFormProps = InjectedFormProps<{}, StepProps> & StepProps