Merge pull request #21778 from payal-lathidadiya/refactor/migrate-ban…

…kaccountplaidstep
Expensify · Jul 5, 2023 · 2d68132 · 2d68132
2 parents 2081839 + dabf0f2
commit 2d68132
Showing 1 changed file with 74 additions and 82 deletions.
diff --git a/src/pages/ReimbursementAccount/BankAccountPlaidStep.js b/src/pages/ReimbursementAccount/BankAccountPlaidStep.js
@@ -1,13 +1,11 @@
-import _ from 'underscore';
-import React from 'react';
-import {withOnyx} from 'react-native-onyx';
+import React, {useCallback} from 'react';
 import PropTypes from 'prop-types';
+import _ from 'underscore';
 import lodashGet from 'lodash/get';
+import {withOnyx} from 'react-native-onyx';
 import HeaderWithBackButton from '../../components/HeaderWithBackButton';
 import CONST from '../../CONST';
 import * as BankAccounts from '../../libs/actions/BankAccounts';
-import withLocalize from '../../components/withLocalize';
-import compose from '../../libs/compose';
 import ONYXKEYS from '../../ONYXKEYS';
 import AddPlaidBankAccount from '../../components/AddPlaidBankAccount';
 import CheckboxWithLabel from '../../components/CheckboxWithLabel';
@@ -19,6 +17,7 @@ import styles from '../../styles/styles';
 import ScreenWrapper from '../../components/ScreenWrapper';
 import * as PlaidDataProps from './plaidDataPropTypes';
 import StepPropTypes from './StepPropTypes';
+import useLocalize from '../../hooks/useLocalize';
 
 const propTypes = {
     ...StepPropTypes,
@@ -39,109 +38,102 @@ const defaultProps = {
     plaidLinkOAuthToken: '',
 };
 
-class BankAccountPlaidStep extends React.Component {
-    constructor(props) {
-        super(props);
-        this.validate = this.validate.bind(this);
-        this.submit = this.submit.bind(this);
-    }
+function BankAccountPlaidStep(props) {
+    const {plaidData, receivedRedirectURI, plaidLinkOAuthToken, reimbursementAccount, reimbursementAccountDraft, onBackButtonPress, getDefaultStateForField} = props;
+    const {translate} = useLocalize();
 
-    validate(values) {
+    const validate = useCallback((values) => {
         const errorFields = {};
         if (!values.acceptTerms) {
             errorFields.acceptTerms = 'common.error.acceptTerms';
         }
 
         return errorFields;
-    }
+    }, []);
 
-    submit() {
-        const selectedPlaidBankAccount = _.findWhere(lodashGet(this.props.plaidData, 'bankAccounts', []), {
-            plaidAccountID: lodashGet(this.props.reimbursementAccountDraft, 'plaidAccountID', ''),
+    const submit = useCallback(() => {
+        const selectedPlaidBankAccount = _.findWhere(lodashGet(plaidData, 'bankAccounts', []), {
+            plaidAccountID: lodashGet(reimbursementAccountDraft, 'plaidAccountID', ''),
         });
 
         const bankAccountData = {
             routingNumber: selectedPlaidBankAccount.routingNumber,
             accountNumber: selectedPlaidBankAccount.accountNumber,
             plaidMask: selectedPlaidBankAccount.mask,
             isSavings: selectedPlaidBankAccount.isSavings,
-            bankName: lodashGet(this.props.plaidData, 'bankName') || '',
+            bankName: lodashGet(plaidData, 'bankName') || '',
             plaidAccountID: selectedPlaidBankAccount.plaidAccountID,
-            plaidAccessToken: lodashGet(this.props.plaidData, 'plaidAccessToken') || '',
+            plaidAccessToken: lodashGet(plaidData, 'plaidAccessToken') || '',
         };
         ReimbursementAccount.updateReimbursementAccountDraft(bankAccountData);
 
-        const bankAccountID = lodashGet(this.props.reimbursementAccount, 'achData.bankAccountID') || 0;
+        const bankAccountID = lodashGet(reimbursementAccount, 'achData.bankAccountID') || 0;
         BankAccounts.connectBankAccountWithPlaid(bankAccountID, bankAccountData);
-    }
+    }, [reimbursementAccount, reimbursementAccountDraft, plaidData]);
 
-    render() {
-        const bankAccountID = lodashGet(this.props.reimbursementAccount, 'achData.bankAccountID') || 0;
-        const selectedPlaidAccountID = lodashGet(this.props.reimbursementAccountDraft, 'plaidAccountID', '');
+    const bankAccountID = lodashGet(reimbursementAccount, 'achData.bankAccountID') || 0;
+    const selectedPlaidAccountID = lodashGet(reimbursementAccountDraft, 'plaidAccountID', '');
 
-        return (
-            <ScreenWrapper
-                includeSafeAreaPaddingBottom={false}
-                shouldEnablePickerAvoiding={false}
-                shouldShowOfflineIndicator={false}
+    return (
+        <ScreenWrapper
+            includeSafeAreaPaddingBottom={false}
+            shouldEnablePickerAvoiding={false}
+            shouldShowOfflineIndicator={false}
+        >
+            <HeaderWithBackButton
+                title={translate('workspace.common.connectBankAccount')}
+                stepCounter={{step: 1, total: 5}}
+                shouldShowGetAssistanceButton
+                guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_BANK_ACCOUNT}
+                onBackButtonPress={onBackButtonPress}
+            />
+            <Form
+                formID={ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM}
+                validate={validate}
+                onSubmit={submit}
+                scrollContextEnabled
+                submitButtonText={translate('common.saveAndContinue')}
+                style={[styles.mh5, styles.flexGrow1]}
+                isSubmitButtonVisible={Boolean(selectedPlaidAccountID) && !_.isEmpty(lodashGet(plaidData, 'bankAccounts'))}
             >
-                <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}
+                <AddPlaidBankAccount
+                    text={translate('bankAccount.plaidBodyCopy')}
+                    onSelect={(plaidAccountID) => {
+                        ReimbursementAccount.updateReimbursementAccountDraft({plaidAccountID});
+                    }}
+                    plaidData={plaidData}
+                    onExitPlaid={() => BankAccounts.setBankAccountSubStep(null)}
+                    receivedRedirectURI={receivedRedirectURI}
+                    plaidLinkOAuthToken={plaidLinkOAuthToken}
+                    allowDebit
+                    bankAccountID={bankAccountID}
+                    selectedPlaidAccountID={selectedPlaidAccountID}
                 />
-                <Form
-                    formID={ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM}
-                    validate={this.validate}
-                    onSubmit={this.submit}
-                    scrollContextEnabled
-                    submitButtonText={this.props.translate('common.saveAndContinue')}
-                    style={[styles.mh5, styles.flexGrow1]}
-                    isSubmitButtonVisible={Boolean(selectedPlaidAccountID) && !_.isEmpty(lodashGet(this.props.plaidData, 'bankAccounts'))}
-                >
-                    <AddPlaidBankAccount
-                        text={this.props.translate('bankAccount.plaidBodyCopy')}
-                        onSelect={(plaidAccountID) => {
-                            ReimbursementAccount.updateReimbursementAccountDraft({plaidAccountID});
-                        }}
-                        plaidData={this.props.plaidData}
-                        onExitPlaid={() => BankAccounts.setBankAccountSubStep(null)}
-                        receivedRedirectURI={this.props.receivedRedirectURI}
-                        plaidLinkOAuthToken={this.props.plaidLinkOAuthToken}
-                        allowDebit
-                        bankAccountID={bankAccountID}
-                        selectedPlaidAccountID={selectedPlaidAccountID}
+                {Boolean(selectedPlaidAccountID) && !_.isEmpty(lodashGet(plaidData, 'bankAccounts')) && (
+                    <CheckboxWithLabel
+                        accessibilityLabel={`${translate('common.iAcceptThe')} ${translate('common.expensifyTermsOfService')}`}
+                        style={styles.mt4}
+                        inputID="acceptTerms"
+                        LabelComponent={() => (
+                            <Text>
+                                {translate('common.iAcceptThe')}
+                                <TextLink href={CONST.TERMS_URL}>{translate('common.expensifyTermsOfService')}</TextLink>
+                            </Text>
+                        )}
+                        defaultValue={getDefaultStateForField('acceptTerms', false)}
+                        shouldSaveDraft
                     />
-                    {Boolean(selectedPlaidAccountID) && !_.isEmpty(lodashGet(this.props.plaidData, 'bankAccounts')) && (
-                        <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>
-        );
-    }
+                )}
+            </Form>
+        </ScreenWrapper>
+    );
 }
 
 BankAccountPlaidStep.propTypes = propTypes;
 BankAccountPlaidStep.defaultProps = defaultProps;
-export default compose(
-    withLocalize,
-    withOnyx({
-        plaidData: {
-            key: ONYXKEYS.PLAID_DATA,
-        },
-    }),
-)(BankAccountPlaidStep);
+BankAccountPlaidStep.displayName = 'BankAccountPlaidStep';
+export default withOnyx({
+    plaidData: {
+        key: ONYXKEYS.PLAID_DATA,
+    },
+})(BankAccountPlaidStep);