From b195e00ca248594ff6ce282903bd854f489f3817 Mon Sep 17 00:00:00 2001
From: Bartosz Grajdek <bartosz.grajdek@swmansion.com>
Date: Tue, 22 Aug 2023 12:08:44 +0200
Subject: [PATCH 1/2] Migrate ValidationStep.js to function component

---
 .../ReimbursementAccount/ValidationStep.js    | 274 +++++++++---------
 1 file changed, 132 insertions(+), 142 deletions(-)

diff --git a/src/pages/ReimbursementAccount/ValidationStep.js b/src/pages/ReimbursementAccount/ValidationStep.js
index 0afa855f1ea6..64cdc82ecff0 100644
--- a/src/pages/ReimbursementAccount/ValidationStep.js
+++ b/src/pages/ReimbursementAccount/ValidationStep.js
@@ -51,23 +51,38 @@ const defaultProps = {
     },
 };
 
-class ValidationStep extends React.Component {
-    constructor(props) {
-        super(props);
+function ValidationStep({reimbursementAccount, translate, onBackButtonPress, account}) {
+    /**
+     * Filter input for validation amount
+     * Anything that isn't a number is returned as an empty string
+     * Any dollar amount (e.g. 1.12) will be returned as 112
+     *
+     * @param {String} amount field input
+     * @returns {String}
+     */
+    const filterInput = (amount) => {
+        let value = amount ? amount.toString().trim() : '';
+        if (value === '' || !Math.abs(Str.fromUSDToNumber(value)) || _.isNaN(Number(value))) {
+            return '';
+        }
 
-        this.submit = this.submit.bind(this);
-        this.validate = this.validate.bind(this);
-    }
+        // If the user enters the values in dollars, convert it to the respective cents amount
+        if (_.contains(value, '.')) {
+            value = Str.fromUSDToNumber(value);
+        }
+
+        return value;
+    };
 
     /**
      * @param {Object} values - form input values passed by the Form component
      * @returns {Object}
      */
-    validate(values) {
+    const validate = (values) => {
         const errors = {};
 
         _.each(values, (value, key) => {
-            const filteredValue = this.filterInput(value);
+            const filteredValue = filterInput(value);
             if (ValidationUtils.isRequiredFulfilled(filteredValue)) {
                 return;
             }
@@ -75,155 +90,130 @@ class ValidationStep extends React.Component {
         });
 
         return errors;
-    }
+    };
 
     /**
      * @param {Object} values - form input values passed by the Form component
      */
-    submit(values) {
-        const amount1 = this.filterInput(values.amount1);
-        const amount2 = this.filterInput(values.amount2);
-        const amount3 = this.filterInput(values.amount3);
+    const submit = (values) => {
+        const amount1 = filterInput(values.amount1);
+        const amount2 = filterInput(values.amount2);
+        const amount3 = filterInput(values.amount3);
 
         const validateCode = [amount1, amount2, amount3].join(',');
 
         // Send valid amounts to BankAccountAPI::validateBankAccount in Web-Expensify
-        const bankaccountID = lodashGet(this.props.reimbursementAccount, 'achData.bankAccountID');
+        const bankaccountID = lodashGet(reimbursementAccount, 'achData.bankAccountID');
         BankAccounts.validateBankAccount(bankaccountID, validateCode);
-    }
-
-    /**
-     * Filter input for validation amount
-     * Anything that isn't a number is returned as an empty string
-     * Any dollar amount (e.g. 1.12) will be returned as 112
-     *
-     * @param {String} amount field input
-     *
-     * @returns {String}
-     */
-    filterInput(amount) {
-        let value = amount ? amount.toString().trim() : '';
-        if (value === '' || !Math.abs(Str.fromUSDToNumber(value)) || _.isNaN(Number(value))) {
-            return '';
-        }
+    };
 
-        // If the user enters the values in dollars, convert it to the respective cents amount
-        if (_.contains(value, '.')) {
-            value = Str.fromUSDToNumber(value);
-        }
+    const state = lodashGet(reimbursementAccount, 'achData.state');
 
-        return value;
+    // If a user tries to navigate directly to the validate page we'll show them the EnableStep
+    if (state === BankAccount.STATE.OPEN) {
+        return <EnableStep />;
     }
 
-    render() {
-        const state = lodashGet(this.props.reimbursementAccount, 'achData.state');
-
-        // If a user tries to navigate directly to the validate page we'll show them the EnableStep
-        if (state === BankAccount.STATE.OPEN) {
-            return <EnableStep />;
-        }
-
-        const maxAttemptsReached = lodashGet(this.props.reimbursementAccount, 'maxAttemptsReached');
-        const isVerifying = !maxAttemptsReached && state === BankAccount.STATE.VERIFYING;
-        const requiresTwoFactorAuth = lodashGet(this.props, 'account.requiresTwoFactorAuth');
-
-        return (
-            <ScreenWrapper
-                style={[styles.flex1, styles.justifyContentBetween]}
-                includeSafeAreaPaddingBottom={false}
-            >
-                <HeaderWithBackButton
-                    title={isVerifying ? this.props.translate('validationStep.headerTitle') : this.props.translate('workspace.common.testTransactions')}
-                    stepCounter={isVerifying ? undefined : {step: 5, total: 5}}
-                    onBackButtonPress={this.props.onBackButtonPress}
-                    shouldShowGetAssistanceButton
-                    guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_BANK_ACCOUNT}
-                />
-                {maxAttemptsReached && (
-                    <View style={[styles.m5, styles.flex1]}>
-                        <Text>
-                            {this.props.translate('validationStep.maxAttemptsReached')} {this.props.translate('common.please')}{' '}
-                            <TextLink onPress={Report.navigateToConciergeChat}>{this.props.translate('common.contactUs')}</TextLink>.
-                        </Text>
+    const maxAttemptsReached = lodashGet(reimbursementAccount, 'maxAttemptsReached');
+    const isVerifying = !maxAttemptsReached && state === BankAccount.STATE.VERIFYING;
+    const requiresTwoFactorAuth = lodashGet(account, 'requiresTwoFactorAuth');
+
+    return (
+        <ScreenWrapper
+            style={[styles.flex1, styles.justifyContentBetween]}
+            includeSafeAreaPaddingBottom={false}
+        >
+            <HeaderWithBackButton
+                title={isVerifying ? translate('validationStep.headerTitle') : translate('workspace.common.testTransactions')}
+                stepCounter={isVerifying ? undefined : {step: 5, total: 5}}
+                onBackButtonPress={onBackButtonPress}
+                shouldShowGetAssistanceButton
+                guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_BANK_ACCOUNT}
+            />
+            {maxAttemptsReached && (
+                <View style={[styles.m5, styles.flex1]}>
+                    <Text>
+                        {translate('validationStep.maxAttemptsReached')} {translate('common.please')}{' '}
+                        <TextLink onPress={Report.navigateToConciergeChat}>{translate('common.contactUs')}</TextLink>.
+                    </Text>
+                </View>
+            )}
+            {!maxAttemptsReached && state === BankAccount.STATE.PENDING && (
+                <Form
+                    formID={ONYXKEYS.REIMBURSEMENT_ACCOUNT}
+                    submitButtonText={translate('validationStep.buttonText')}
+                    onSubmit={submit}
+                    validate={validate}
+                    style={[styles.mh5, styles.flexGrow1]}
+                >
+                    <View style={[styles.mb2]}>
+                        <Text style={[styles.mb5]}>{translate('validationStep.description')}</Text>
+                        <Text style={[styles.mb2]}>{translate('validationStep.descriptionCTA')}</Text>
                     </View>
-                )}
-                {!maxAttemptsReached && state === BankAccount.STATE.PENDING && (
-                    <Form
-                        formID={ONYXKEYS.REIMBURSEMENT_ACCOUNT}
-                        submitButtonText={this.props.translate('validationStep.buttonText')}
-                        onSubmit={this.submit}
-                        validate={this.validate}
-                        style={[styles.mh5, styles.flexGrow1]}
-                    >
-                        <View style={[styles.mb2]}>
-                            <Text style={[styles.mb5]}>{this.props.translate('validationStep.description')}</Text>
-                            <Text style={[styles.mb2]}>{this.props.translate('validationStep.descriptionCTA')}</Text>
-                        </View>
-                        <View style={[styles.mv5]}>
-                            <TextInput
-                                inputID="amount1"
-                                shouldSaveDraft
-                                containerStyles={[styles.mb1]}
-                                placeholder="1.52"
-                                keyboardType="decimal-pad"
-                                accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT}
-                            />
-                            <TextInput
-                                inputID="amount2"
-                                shouldSaveDraft
-                                containerStyles={[styles.mb1]}
-                                placeholder="1.53"
-                                keyboardType="decimal-pad"
-                                accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT}
-                            />
-                            <TextInput
-                                shouldSaveDraft
-                                inputID="amount3"
-                                containerStyles={[styles.mb1]}
-                                placeholder="1.54"
-                                keyboardType="decimal-pad"
-                                accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT}
-                            />
+                    <View style={[styles.mv5]}>
+                        <TextInput
+                            inputID="amount1"
+                            shouldSaveDraft
+                            containerStyles={[styles.mb1]}
+                            placeholder="1.52"
+                            keyboardType="decimal-pad"
+                            accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT}
+                        />
+                        <TextInput
+                            inputID="amount2"
+                            shouldSaveDraft
+                            containerStyles={[styles.mb1]}
+                            placeholder="1.53"
+                            keyboardType="decimal-pad"
+                            accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT}
+                        />
+                        <TextInput
+                            shouldSaveDraft
+                            inputID="amount3"
+                            containerStyles={[styles.mb1]}
+                            placeholder="1.54"
+                            keyboardType="decimal-pad"
+                            accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT}
+                        />
+                    </View>
+                    {!requiresTwoFactorAuth && (
+                        <View style={[styles.mln5, styles.mrn5]}>
+                            <Enable2FAPrompt />
                         </View>
-                        {!requiresTwoFactorAuth && (
-                            <View style={[styles.mln5, styles.mrn5]}>
-                                <Enable2FAPrompt />
-                            </View>
-                        )}
-                    </Form>
-                )}
-                {isVerifying && (
-                    <ScrollView style={[styles.flex1]}>
-                        <Section
-                            title={this.props.translate('workspace.bankAccount.letsFinishInChat')}
-                            icon={Illustrations.ConciergeBubble}
-                        >
-                            <Text>{this.props.translate('validationStep.letsChatText')}</Text>
-                            <Button
-                                text={this.props.translate('validationStep.letsChatCTA')}
-                                onPress={Report.navigateToConciergeChat}
-                                icon={Expensicons.ChatBubble}
-                                style={[styles.mt4]}
-                                iconStyles={[styles.buttonCTAIcon]}
-                                shouldShowRightIcon
-                                large
-                                success
-                            />
-                            <MenuItem
-                                title={this.props.translate('workspace.bankAccount.noLetsStartOver')}
-                                icon={Expensicons.RotateLeft}
-                                onPress={BankAccounts.requestResetFreePlanBankAccount}
-                                shouldShowRightIcon
-                                wrapperStyle={[styles.cardMenuItem, styles.mv3]}
-                            />
-                        </Section>
-                        {this.props.reimbursementAccount.shouldShowResetModal && <WorkspaceResetBankAccountModal reimbursementAccount={this.props.reimbursementAccount} />}
-                        {!requiresTwoFactorAuth && <Enable2FAPrompt />}
-                    </ScrollView>
-                )}
-            </ScreenWrapper>
-        );
-    }
+                    )}
+                </Form>
+            )}
+            {isVerifying && (
+                <ScrollView style={[styles.flex1]}>
+                    <Section
+                        title={translate('workspace.bankAccount.letsFinishInChat')}
+                        icon={Illustrations.ConciergeBubble}
+                    >
+                        <Text>{translate('validationStep.letsChatText')}</Text>
+                        <Button
+                            text={translate('validationStep.letsChatCTA')}
+                            onPress={Report.navigateToConciergeChat}
+                            icon={Expensicons.ChatBubble}
+                            style={[styles.mt4]}
+                            iconStyles={[styles.buttonCTAIcon]}
+                            shouldShowRightIcon
+                            large
+                            success
+                        />
+                        <MenuItem
+                            title={translate('workspace.bankAccount.noLetsStartOver')}
+                            icon={Expensicons.RotateLeft}
+                            onPress={BankAccounts.requestResetFreePlanBankAccount}
+                            shouldShowRightIcon
+                            wrapperStyle={[styles.cardMenuItem, styles.mv3]}
+                        />
+                    </Section>
+                    {reimbursementAccount.shouldShowResetModal && <WorkspaceResetBankAccountModal reimbursementAccount={reimbursementAccount} />}
+                    {!requiresTwoFactorAuth && <Enable2FAPrompt />}
+                </ScrollView>
+            )}
+        </ScreenWrapper>
+    );
 }
 
 ValidationStep.propTypes = propTypes;

From 6464b968ce7661fc647cd7c2d242cc128049e9a1 Mon Sep 17 00:00:00 2001
From: Bartosz Grajdek <bartosz.grajdek@swmansion.com>
Date: Wed, 11 Oct 2023 11:34:29 +0200
Subject: [PATCH 2/2] Add display name

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

diff --git a/src/pages/ReimbursementAccount/ValidationStep.js b/src/pages/ReimbursementAccount/ValidationStep.js
index 56aa87c8b47c..a63916db0784 100644
--- a/src/pages/ReimbursementAccount/ValidationStep.js
+++ b/src/pages/ReimbursementAccount/ValidationStep.js
@@ -219,6 +219,7 @@ function ValidationStep({reimbursementAccount, translate, onBackButtonPress, acc
 
 ValidationStep.propTypes = propTypes;
 ValidationStep.defaultProps = defaultProps;
+ValidationStep.displayName = 'ValidationStep';
 
 export default compose(
     withLocalize,