From ed23446f9e24049bb88c0634309d1f6d980db8aa Mon Sep 17 00:00:00 2001
From: Vishrut Agarwalla <vishrutagarwalla19@gmail.com>
Date: Wed, 5 Jul 2023 11:58:03 +0530
Subject: [PATCH 1/8] Refactored React Functional Component

---
 .../BankAccountManualStep.js                  | 145 +++++++++---------
 1 file changed, 69 insertions(+), 76 deletions(-)

diff --git a/src/pages/ReimbursementAccount/BankAccountManualStep.js b/src/pages/ReimbursementAccount/BankAccountManualStep.js
index ad62c7622b45..5d88939ed954 100644
--- a/src/pages/ReimbursementAccount/BankAccountManualStep.js
+++ b/src/pages/ReimbursementAccount/BankAccountManualStep.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useCallback} from 'react';
 import {Image} from 'react-native';
 import lodashGet from 'lodash/get';
 import HeaderWithBackButton from '../../components/HeaderWithBackButton';
@@ -22,18 +22,12 @@ const propTypes = {
     ...StepPropTypes,
 };
 
-class BankAccountManualStep extends React.Component {
-    constructor(props) {
-        super(props);
-        this.submit = this.submit.bind(this);
-        this.validate = this.validate.bind(this);
-    }
-
+function BankAccountManualStep(props) {
     /**
      * @param {Object} values - form input values passed by the Form component
      * @returns {Object}
      */
-    validate(values) {
+    const validate = useCallback((values) => {
         const errorFields = {};
         const routingNumber = values.routingNumber && values.routingNumber.trim();
 
@@ -43,7 +37,7 @@ class BankAccountManualStep extends React.Component {
         ) {
             errorFields.accountNumber = 'bankAccount.error.accountNumber';
         } else if (values.accountNumber === routingNumber) {
-            errorFields.accountNumber = this.props.translate('bankAccount.error.routingAndAccountNumberCannotBeSame');
+            errorFields.accountNumber = props.translate('bankAccount.error.routingAndAccountNumberCannotBeSame');
         }
         if (!routingNumber || !CONST.BANK_ACCOUNT.REGEX.SWIFT_BIC.test(routingNumber) || !ValidationUtils.isValidRoutingNumber(routingNumber)) {
             errorFields.routingNumber = 'bankAccount.error.routingNumber';
@@ -53,81 +47,80 @@ class BankAccountManualStep extends React.Component {
         }
 
         return errorFields;
-    }
+    });
 
-    submit(values) {
+    const submit = useCallback((values) => {
         BankAccounts.connectBankAccountManually(
-            lodashGet(this.props.reimbursementAccount, 'achData.bankAccountID') || 0,
+            lodashGet(props.reimbursementAccount, 'achData.bankAccountID') || 0,
             values.accountNumber,
             values.routingNumber,
-            lodashGet(this.props, ['reimbursementAccountDraft', 'plaidMask']),
+            lodashGet(props, ['reimbursementAccountDraft', 'plaidMask']),
         );
-    }
+    });
 
-    render() {
-        const shouldDisableInputs = Boolean(lodashGet(this.props.reimbursementAccount, 'achData.bankAccountID'));
+    const shouldDisableInputs = Boolean(lodashGet(props.reimbursementAccount, 'achData.bankAccountID'));
 
-        return (
-            <ScreenWrapper includeSafeAreaPaddingBottom={false}>
-                <HeaderWithBackButton
-                    title={this.props.translate('workspace.common.connectBankAccount')}
-                    stepCounter={{step: 1, total: 5}}
-                    shouldShowGetAssistanceButton
-                    guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_BANK_ACCOUNT}
-                    onBackButtonPress={this.props.onBackButtonPress}
+    return (
+        <ScreenWrapper includeSafeAreaPaddingBottom={false}>
+            <HeaderWithBackButton
+                title={props.translate('workspace.common.connectBankAccount')}
+                stepCounter={{step: 1, total: 5}}
+                shouldShowGetAssistanceButton
+                guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_BANK_ACCOUNT}
+                onBackButtonPress={props.onBackButtonPress}
+            />
+            <Form
+                formID={ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM}
+                onSubmit={submit}
+                validate={validate}
+                submitButtonText={props.translate('common.continue')}
+                style={[styles.mh5, styles.flexGrow1]}
+            >
+                <Text style={[styles.mb5]}>{props.translate('bankAccount.checkHelpLine')}</Text>
+                <Image
+                    resizeMode="contain"
+                    style={[styles.exampleCheckImage, styles.mb5]}
+                    source={exampleCheckImage(props.preferredLocale)}
                 />
-                <Form
-                    formID={ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM}
-                    onSubmit={this.submit}
-                    validate={this.validate}
-                    submitButtonText={this.props.translate('common.continue')}
-                    style={[styles.mh5, styles.flexGrow1]}
-                >
-                    <Text style={[styles.mb5]}>{this.props.translate('bankAccount.checkHelpLine')}</Text>
-                    <Image
-                        resizeMode="contain"
-                        style={[styles.exampleCheckImage, styles.mb5]}
-                        source={exampleCheckImage(this.props.preferredLocale)}
-                    />
-                    <TextInput
-                        autoFocus
-                        shouldDelayFocus={shouldDelayFocus}
-                        inputID="routingNumber"
-                        label={this.props.translate('bankAccount.routingNumber')}
-                        defaultValue={this.props.getDefaultStateForField('routingNumber', '')}
-                        keyboardType={CONST.KEYBOARD_TYPE.NUMBER_PAD}
-                        disabled={shouldDisableInputs}
-                        shouldSaveDraft
-                        shouldUseDefaultValue={shouldDisableInputs}
-                    />
-                    <TextInput
-                        inputID="accountNumber"
-                        containerStyles={[styles.mt4]}
-                        label={this.props.translate('bankAccount.accountNumber')}
-                        defaultValue={this.props.getDefaultStateForField('accountNumber', '')}
-                        keyboardType={CONST.KEYBOARD_TYPE.NUMBER_PAD}
-                        disabled={shouldDisableInputs}
-                        shouldSaveDraft
-                        shouldUseDefaultValue={shouldDisableInputs}
-                    />
-                    <CheckboxWithLabel
-                        accessibilityLabel={`${this.props.translate('common.iAcceptThe')} ${this.props.translate('common.expensifyTermsOfService')}`}
-                        style={styles.mt4}
-                        inputID="acceptTerms"
-                        LabelComponent={() => (
-                            <Text>
-                                {this.props.translate('common.iAcceptThe')}
-                                <TextLink href={CONST.TERMS_URL}>{this.props.translate('common.expensifyTermsOfService')}</TextLink>
-                            </Text>
-                        )}
-                        defaultValue={this.props.getDefaultStateForField('acceptTerms', false)}
-                        shouldSaveDraft
-                    />
-                </Form>
-            </ScreenWrapper>
-        );
-    }
+                <TextInput
+                    autoFocus
+                    shouldDelayFocus={shouldDelayFocus}
+                    inputID="routingNumber"
+                    label={props.translate('bankAccount.routingNumber')}
+                    defaultValue={props.getDefaultStateForField('routingNumber', '')}
+                    keyboardType={CONST.KEYBOARD_TYPE.NUMBER_PAD}
+                    disabled={shouldDisableInputs}
+                    shouldSaveDraft
+                    shouldUseDefaultValue={shouldDisableInputs}
+                />
+                <TextInput
+                    inputID="accountNumber"
+                    containerStyles={[styles.mt4]}
+                    label={props.translate('bankAccount.accountNumber')}
+                    defaultValue={props.getDefaultStateForField('accountNumber', '')}
+                    keyboardType={CONST.KEYBOARD_TYPE.NUMBER_PAD}
+                    disabled={shouldDisableInputs}
+                    shouldSaveDraft
+                    shouldUseDefaultValue={shouldDisableInputs}
+                />
+                <CheckboxWithLabel
+                    accessibilityLabel={`${props.translate('common.iAcceptThe')} ${props.translate('common.expensifyTermsOfService')}`}
+                    style={styles.mt4}
+                    inputID="acceptTerms"
+                    LabelComponent={() => (
+                        <Text>
+                            {props.translate('common.iAcceptThe')}
+                            <TextLink href={CONST.TERMS_URL}>{props.translate('common.expensifyTermsOfService')}</TextLink>
+                        </Text>
+                    )}
+                    defaultValue={props.getDefaultStateForField('acceptTerms', false)}
+                    shouldSaveDraft
+                />
+            </Form>
+        </ScreenWrapper>
+    );
 }
 
 BankAccountManualStep.propTypes = propTypes;
+BankAccountManualStep.display = 'BankAccountManualStep';
 export default withLocalize(BankAccountManualStep);

From 87f3acb0d8b261e70b5519a511339efcf0f1c96a Mon Sep 17 00:00:00 2001
From: Vishrut Agarwalla <vishrutagarwalla19@gmail.com>
Date: Wed, 5 Jul 2023 16:59:07 +0530
Subject: [PATCH 2/8] Refactored React Functional Component

---
 src/pages/ReimbursementAccount/BankAccountManualStep.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/ReimbursementAccount/BankAccountManualStep.js b/src/pages/ReimbursementAccount/BankAccountManualStep.js
index 5d88939ed954..db0073f853bd 100644
--- a/src/pages/ReimbursementAccount/BankAccountManualStep.js
+++ b/src/pages/ReimbursementAccount/BankAccountManualStep.js
@@ -122,5 +122,5 @@ function BankAccountManualStep(props) {
 }
 
 BankAccountManualStep.propTypes = propTypes;
-BankAccountManualStep.display = 'BankAccountManualStep';
+BankAccountManualStep.displayName = 'BankAccountManualStep';
 export default withLocalize(BankAccountManualStep);

From e2e16764047b775894f9e0c8aa12e7b86af10b17 Mon Sep 17 00:00:00 2001
From: Vishrut Agarwalla <vishrutagarwalla19@gmail.com>
Date: Wed, 5 Jul 2023 19:03:25 +0530
Subject: [PATCH 3/8] Added Dependency Arrays

---
 .../BankAccountManualStep.js                  | 65 ++++++++++---------
 1 file changed, 36 insertions(+), 29 deletions(-)

diff --git a/src/pages/ReimbursementAccount/BankAccountManualStep.js b/src/pages/ReimbursementAccount/BankAccountManualStep.js
index db0073f853bd..0616e458c543 100644
--- a/src/pages/ReimbursementAccount/BankAccountManualStep.js
+++ b/src/pages/ReimbursementAccount/BankAccountManualStep.js
@@ -23,40 +23,47 @@ const propTypes = {
 };
 
 function BankAccountManualStep(props) {
+    const {translate, reimbursementAccount, reimbursementAccountDraft} = props;
     /**
      * @param {Object} values - form input values passed by the Form component
      * @returns {Object}
      */
-    const validate = useCallback((values) => {
-        const errorFields = {};
-        const routingNumber = values.routingNumber && values.routingNumber.trim();
+    const validate = useCallback(
+        (values) => {
+            const errorFields = {};
+            const routingNumber = values.routingNumber && values.routingNumber.trim();
 
-        if (
-            !values.accountNumber ||
-            (!CONST.BANK_ACCOUNT.REGEX.US_ACCOUNT_NUMBER.test(values.accountNumber.trim()) && !CONST.BANK_ACCOUNT.REGEX.MASKED_US_ACCOUNT_NUMBER.test(values.accountNumber.trim()))
-        ) {
-            errorFields.accountNumber = 'bankAccount.error.accountNumber';
-        } else if (values.accountNumber === routingNumber) {
-            errorFields.accountNumber = props.translate('bankAccount.error.routingAndAccountNumberCannotBeSame');
-        }
-        if (!routingNumber || !CONST.BANK_ACCOUNT.REGEX.SWIFT_BIC.test(routingNumber) || !ValidationUtils.isValidRoutingNumber(routingNumber)) {
-            errorFields.routingNumber = 'bankAccount.error.routingNumber';
-        }
-        if (!values.acceptTerms) {
-            errorFields.acceptTerms = 'common.error.acceptTerms';
-        }
+            if (
+                !values.accountNumber ||
+                (!CONST.BANK_ACCOUNT.REGEX.US_ACCOUNT_NUMBER.test(values.accountNumber.trim()) && !CONST.BANK_ACCOUNT.REGEX.MASKED_US_ACCOUNT_NUMBER.test(values.accountNumber.trim()))
+            ) {
+                errorFields.accountNumber = 'bankAccount.error.accountNumber';
+            } else if (values.accountNumber === routingNumber) {
+                errorFields.accountNumber = props.translate('bankAccount.error.routingAndAccountNumberCannotBeSame');
+            }
+            if (!routingNumber || !CONST.BANK_ACCOUNT.REGEX.SWIFT_BIC.test(routingNumber) || !ValidationUtils.isValidRoutingNumber(routingNumber)) {
+                errorFields.routingNumber = 'bankAccount.error.routingNumber';
+            }
+            if (!values.acceptTerms) {
+                errorFields.acceptTerms = 'common.error.acceptTerms';
+            }
 
-        return errorFields;
-    });
+            return errorFields;
+        },
+        [translate],
+    );
 
-    const submit = useCallback((values) => {
-        BankAccounts.connectBankAccountManually(
-            lodashGet(props.reimbursementAccount, 'achData.bankAccountID') || 0,
-            values.accountNumber,
-            values.routingNumber,
-            lodashGet(props, ['reimbursementAccountDraft', 'plaidMask']),
-        );
-    });
+    const submit = useCallback(
+        (values) => {
+            BankAccounts.connectBankAccountManually(
+                lodashGet(props.reimbursementAccount, 'achData.bankAccountID') || 0,
+                values.accountNumber,
+                values.routingNumber,
+                lodashGet(props, ['reimbursementAccountDraft', 'plaidMask']),
+            );
+        },
+        [reimbursementAccount, reimbursementAccountDraft],
+    );
 
     const shouldDisableInputs = Boolean(lodashGet(props.reimbursementAccount, 'achData.bankAccountID'));
 
@@ -87,7 +94,7 @@ function BankAccountManualStep(props) {
                     shouldDelayFocus={shouldDelayFocus}
                     inputID="routingNumber"
                     label={props.translate('bankAccount.routingNumber')}
-                    defaultValue={props.getDefaultStateForField('routingNumber', '')}
+                    value={props.getDefaultStateForField('routingNumber', '')}
                     keyboardType={CONST.KEYBOARD_TYPE.NUMBER_PAD}
                     disabled={shouldDisableInputs}
                     shouldSaveDraft
@@ -97,7 +104,7 @@ function BankAccountManualStep(props) {
                     inputID="accountNumber"
                     containerStyles={[styles.mt4]}
                     label={props.translate('bankAccount.accountNumber')}
-                    defaultValue={props.getDefaultStateForField('accountNumber', '')}
+                    value={props.getDefaultStateForField('accountNumber', '')}
                     keyboardType={CONST.KEYBOARD_TYPE.NUMBER_PAD}
                     disabled={shouldDisableInputs}
                     shouldSaveDraft

From a214f28159db066c09567c29635f2de0cdb0f5e5 Mon Sep 17 00:00:00 2001
From: Vishrut Agarwalla <vishrutagarwalla19@gmail.com>
Date: Sat, 8 Jul 2023 11:13:36 +0530
Subject: [PATCH 4/8] useLocalize Hook Added and Prop Destructuring

---
 .../BankAccountManualStep.js                  | 41 ++++++++++---------
 1 file changed, 21 insertions(+), 20 deletions(-)

diff --git a/src/pages/ReimbursementAccount/BankAccountManualStep.js b/src/pages/ReimbursementAccount/BankAccountManualStep.js
index 0616e458c543..39b3037c7a26 100644
--- a/src/pages/ReimbursementAccount/BankAccountManualStep.js
+++ b/src/pages/ReimbursementAccount/BankAccountManualStep.js
@@ -9,7 +9,7 @@ import TextInput from '../../components/TextInput';
 import styles from '../../styles/styles';
 import CheckboxWithLabel from '../../components/CheckboxWithLabel';
 import TextLink from '../../components/TextLink';
-import withLocalize from '../../components/withLocalize';
+import useLocalize from '../../hooks/useLocalize';
 import * as ValidationUtils from '../../libs/ValidationUtils';
 import ONYXKEYS from '../../ONYXKEYS';
 import exampleCheckImage from './exampleCheckImage';
@@ -23,7 +23,8 @@ const propTypes = {
 };
 
 function BankAccountManualStep(props) {
-    const {translate, reimbursementAccount, reimbursementAccountDraft} = props;
+    const {translate} = useLocalize();
+    const {reimbursementAccount, reimbursementAccountDraft, onBackButtonPress, preferredLocale, getDefaultStateForField} = props;
     /**
      * @param {Object} values - form input values passed by the Form component
      * @returns {Object}
@@ -39,7 +40,7 @@ function BankAccountManualStep(props) {
             ) {
                 errorFields.accountNumber = 'bankAccount.error.accountNumber';
             } else if (values.accountNumber === routingNumber) {
-                errorFields.accountNumber = props.translate('bankAccount.error.routingAndAccountNumberCannotBeSame');
+                errorFields.accountNumber = translate('bankAccount.error.routingAndAccountNumberCannotBeSame');
             }
             if (!routingNumber || !CONST.BANK_ACCOUNT.REGEX.SWIFT_BIC.test(routingNumber) || !ValidationUtils.isValidRoutingNumber(routingNumber)) {
                 errorFields.routingNumber = 'bankAccount.error.routingNumber';
@@ -56,45 +57,45 @@ function BankAccountManualStep(props) {
     const submit = useCallback(
         (values) => {
             BankAccounts.connectBankAccountManually(
-                lodashGet(props.reimbursementAccount, 'achData.bankAccountID') || 0,
+                lodashGet(reimbursementAccount, ['achData.bankAccountID']) || 0,
                 values.accountNumber,
                 values.routingNumber,
-                lodashGet(props, ['reimbursementAccountDraft', 'plaidMask']),
+                lodashGet(reimbursementAccountDraft, ['plaidMask']),
             );
         },
         [reimbursementAccount, reimbursementAccountDraft],
     );
 
-    const shouldDisableInputs = Boolean(lodashGet(props.reimbursementAccount, 'achData.bankAccountID'));
+    const shouldDisableInputs = Boolean(lodashGet(reimbursementAccount, ['achData.bankAccountID']));
 
     return (
         <ScreenWrapper includeSafeAreaPaddingBottom={false}>
             <HeaderWithBackButton
-                title={props.translate('workspace.common.connectBankAccount')}
+                title={translate('workspace.common.connectBankAccount')}
                 stepCounter={{step: 1, total: 5}}
                 shouldShowGetAssistanceButton
                 guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_BANK_ACCOUNT}
-                onBackButtonPress={props.onBackButtonPress}
+                onBackButtonPress={onBackButtonPress}
             />
             <Form
                 formID={ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM}
                 onSubmit={submit}
                 validate={validate}
-                submitButtonText={props.translate('common.continue')}
+                submitButtonText={translate('common.continue')}
                 style={[styles.mh5, styles.flexGrow1]}
             >
-                <Text style={[styles.mb5]}>{props.translate('bankAccount.checkHelpLine')}</Text>
+                <Text style={[styles.mb5]}>{translate('bankAccount.checkHelpLine')}</Text>
                 <Image
                     resizeMode="contain"
                     style={[styles.exampleCheckImage, styles.mb5]}
-                    source={exampleCheckImage(props.preferredLocale)}
+                    source={exampleCheckImage(preferredLocale)}
                 />
                 <TextInput
                     autoFocus
                     shouldDelayFocus={shouldDelayFocus}
                     inputID="routingNumber"
-                    label={props.translate('bankAccount.routingNumber')}
-                    value={props.getDefaultStateForField('routingNumber', '')}
+                    label={translate('bankAccount.routingNumber')}
+                    value={getDefaultStateForField('routingNumber', '')}
                     keyboardType={CONST.KEYBOARD_TYPE.NUMBER_PAD}
                     disabled={shouldDisableInputs}
                     shouldSaveDraft
@@ -103,24 +104,24 @@ function BankAccountManualStep(props) {
                 <TextInput
                     inputID="accountNumber"
                     containerStyles={[styles.mt4]}
-                    label={props.translate('bankAccount.accountNumber')}
-                    value={props.getDefaultStateForField('accountNumber', '')}
+                    label={translate('bankAccount.accountNumber')}
+                    value={getDefaultStateForField('accountNumber', '')}
                     keyboardType={CONST.KEYBOARD_TYPE.NUMBER_PAD}
                     disabled={shouldDisableInputs}
                     shouldSaveDraft
                     shouldUseDefaultValue={shouldDisableInputs}
                 />
                 <CheckboxWithLabel
-                    accessibilityLabel={`${props.translate('common.iAcceptThe')} ${props.translate('common.expensifyTermsOfService')}`}
+                    accessibilityLabel={`${translate('common.iAcceptThe')} ${translate('common.expensifyTermsOfService')}`}
                     style={styles.mt4}
                     inputID="acceptTerms"
                     LabelComponent={() => (
                         <Text>
-                            {props.translate('common.iAcceptThe')}
-                            <TextLink href={CONST.TERMS_URL}>{props.translate('common.expensifyTermsOfService')}</TextLink>
+                            {translate('common.iAcceptThe')}
+                            <TextLink href={CONST.TERMS_URL}>{translate('common.expensifyTermsOfService')}</TextLink>
                         </Text>
                     )}
-                    defaultValue={props.getDefaultStateForField('acceptTerms', false)}
+                    defaultValue={getDefaultStateForField('acceptTerms', false)}
                     shouldSaveDraft
                 />
             </Form>
@@ -130,4 +131,4 @@ function BankAccountManualStep(props) {
 
 BankAccountManualStep.propTypes = propTypes;
 BankAccountManualStep.displayName = 'BankAccountManualStep';
-export default withLocalize(BankAccountManualStep);
+export default BankAccountManualStep;

From bc36afd94e4903b1a1c7b6c5df3e471cf69f335d Mon Sep 17 00:00:00 2001
From: Vishrut Agarwalla <vishrutagarwalla19@gmail.com>
Date: Sat, 8 Jul 2023 15:08:04 +0530
Subject: [PATCH 5/8] Think it gets merged now

---
 .../ReimbursementAccount/BankAccountManualStep.js    | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/pages/ReimbursementAccount/BankAccountManualStep.js b/src/pages/ReimbursementAccount/BankAccountManualStep.js
index 39b3037c7a26..d5f877deb675 100644
--- a/src/pages/ReimbursementAccount/BankAccountManualStep.js
+++ b/src/pages/ReimbursementAccount/BankAccountManualStep.js
@@ -23,8 +23,8 @@ const propTypes = {
 };
 
 function BankAccountManualStep(props) {
-    const {translate} = useLocalize();
-    const {reimbursementAccount, reimbursementAccountDraft, onBackButtonPress, preferredLocale, getDefaultStateForField} = props;
+    const {translate, preferredLocale} = useLocalize();
+    const {reimbursementAccount, reimbursementAccountDraft} = props;
     /**
      * @param {Object} values - form input values passed by the Form component
      * @returns {Object}
@@ -75,7 +75,7 @@ function BankAccountManualStep(props) {
                 stepCounter={{step: 1, total: 5}}
                 shouldShowGetAssistanceButton
                 guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_BANK_ACCOUNT}
-                onBackButtonPress={onBackButtonPress}
+                onBackButtonPress={props.onBackButtonPress}
             />
             <Form
                 formID={ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM}
@@ -95,7 +95,7 @@ function BankAccountManualStep(props) {
                     shouldDelayFocus={shouldDelayFocus}
                     inputID="routingNumber"
                     label={translate('bankAccount.routingNumber')}
-                    value={getDefaultStateForField('routingNumber', '')}
+                    value={props.getDefaultStateForField('routingNumber', '')}
                     keyboardType={CONST.KEYBOARD_TYPE.NUMBER_PAD}
                     disabled={shouldDisableInputs}
                     shouldSaveDraft
@@ -105,7 +105,7 @@ function BankAccountManualStep(props) {
                     inputID="accountNumber"
                     containerStyles={[styles.mt4]}
                     label={translate('bankAccount.accountNumber')}
-                    value={getDefaultStateForField('accountNumber', '')}
+                    value={props.getDefaultStateForField('accountNumber', '')}
                     keyboardType={CONST.KEYBOARD_TYPE.NUMBER_PAD}
                     disabled={shouldDisableInputs}
                     shouldSaveDraft
@@ -121,7 +121,7 @@ function BankAccountManualStep(props) {
                             <TextLink href={CONST.TERMS_URL}>{translate('common.expensifyTermsOfService')}</TextLink>
                         </Text>
                     )}
-                    defaultValue={getDefaultStateForField('acceptTerms', false)}
+                    defaultValue={props.getDefaultStateForField('acceptTerms', false)}
                     shouldSaveDraft
                 />
             </Form>

From 5e3e885f96923e552456092e378dd02a9e40b199 Mon Sep 17 00:00:00 2001
From: Vishrut Agarwalla <vishrutagarwalla19@gmail.com>
Date: Sat, 8 Jul 2023 15:44:23 +0530
Subject: [PATCH 6/8] Changes Done

---
 src/pages/ReimbursementAccount/BankAccountManualStep.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/pages/ReimbursementAccount/BankAccountManualStep.js b/src/pages/ReimbursementAccount/BankAccountManualStep.js
index d5f877deb675..519412e2a92b 100644
--- a/src/pages/ReimbursementAccount/BankAccountManualStep.js
+++ b/src/pages/ReimbursementAccount/BankAccountManualStep.js
@@ -1,4 +1,5 @@
 import React, {useCallback} from 'react';
+import _ from 'lodash';
 import {Image} from 'react-native';
 import lodashGet from 'lodash/get';
 import HeaderWithBackButton from '../../components/HeaderWithBackButton';
@@ -10,6 +11,7 @@ import styles from '../../styles/styles';
 import CheckboxWithLabel from '../../components/CheckboxWithLabel';
 import TextLink from '../../components/TextLink';
 import useLocalize from '../../hooks/useLocalize';
+import {withLocalizePropTypes} from '../../components/withLocalize';
 import * as ValidationUtils from '../../libs/ValidationUtils';
 import ONYXKEYS from '../../ONYXKEYS';
 import exampleCheckImage from './exampleCheckImage';
@@ -19,7 +21,7 @@ import ScreenWrapper from '../../components/ScreenWrapper';
 import StepPropTypes from './StepPropTypes';
 
 const propTypes = {
-    ...StepPropTypes,
+    ..._.omit(StepPropTypes, _.keys(withLocalizePropTypes)),
 };
 
 function BankAccountManualStep(props) {

From da2f28855a97d27e6a98fee5cf464b10324b1800 Mon Sep 17 00:00:00 2001
From: Vishrut Agarwalla <vishrutagarwalla19@gmail.com>
Date: Sat, 8 Jul 2023 16:53:38 +0530
Subject: [PATCH 7/8] Use defaultValue for textInputs in the Form

---
 src/pages/ReimbursementAccount/BankAccountManualStep.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/ReimbursementAccount/BankAccountManualStep.js b/src/pages/ReimbursementAccount/BankAccountManualStep.js
index 519412e2a92b..3c2456c6c91e 100644
--- a/src/pages/ReimbursementAccount/BankAccountManualStep.js
+++ b/src/pages/ReimbursementAccount/BankAccountManualStep.js
@@ -1,5 +1,5 @@
 import React, {useCallback} from 'react';
-import _ from 'lodash';
+import _ from 'underscore';
 import {Image} from 'react-native';
 import lodashGet from 'lodash/get';
 import HeaderWithBackButton from '../../components/HeaderWithBackButton';

From a23ca39b07136c21262e493b713fb3923a912045 Mon Sep 17 00:00:00 2001
From: Vishrut Agarwalla <vishrutagarwalla19@gmail.com>
Date: Sat, 8 Jul 2023 23:14:53 +0530
Subject: [PATCH 8/8] In the TextInput Value changed to defaultValue

---
 src/pages/ReimbursementAccount/BankAccountManualStep.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/ReimbursementAccount/BankAccountManualStep.js b/src/pages/ReimbursementAccount/BankAccountManualStep.js
index 3c2456c6c91e..96d5cc27a6d8 100644
--- a/src/pages/ReimbursementAccount/BankAccountManualStep.js
+++ b/src/pages/ReimbursementAccount/BankAccountManualStep.js
@@ -97,7 +97,7 @@ function BankAccountManualStep(props) {
                     shouldDelayFocus={shouldDelayFocus}
                     inputID="routingNumber"
                     label={translate('bankAccount.routingNumber')}
-                    value={props.getDefaultStateForField('routingNumber', '')}
+                    defaultValue={props.getDefaultStateForField('routingNumber', '')}
                     keyboardType={CONST.KEYBOARD_TYPE.NUMBER_PAD}
                     disabled={shouldDisableInputs}
                     shouldSaveDraft
@@ -107,7 +107,7 @@ function BankAccountManualStep(props) {
                     inputID="accountNumber"
                     containerStyles={[styles.mt4]}
                     label={translate('bankAccount.accountNumber')}
-                    value={props.getDefaultStateForField('accountNumber', '')}
+                    defaultValue={props.getDefaultStateForField('accountNumber', '')}
                     keyboardType={CONST.KEYBOARD_TYPE.NUMBER_PAD}
                     disabled={shouldDisableInputs}
                     shouldSaveDraft
