From 21dd01de8cc21e41257bdbfa4a994f0deb6459c2 Mon Sep 17 00:00:00 2001
From: Kamil Owczarz <kamil.owczarz@swmansion.com>
Date: Fri, 11 Aug 2023 15:21:52 +0200
Subject: [PATCH 1/5] Rewrite CompanyStep to functional component

---
 src/pages/ReimbursementAccount/CompanyStep.js | 283 +++++++++---------
 1 file changed, 137 insertions(+), 146 deletions(-)

diff --git a/src/pages/ReimbursementAccount/CompanyStep.js b/src/pages/ReimbursementAccount/CompanyStep.js
index a57c80b0a7e2..23ec83f9c976 100644
--- a/src/pages/ReimbursementAccount/CompanyStep.js
+++ b/src/pages/ReimbursementAccount/CompanyStep.js
@@ -1,6 +1,6 @@
 import _ from 'underscore';
 import lodashGet from 'lodash/get';
-import React from 'react';
+import React, {useMemo} from 'react';
 import {View} from 'react-native';
 import Str from 'expensify-common/lib/str';
 import {withOnyx} from 'react-native-onyx';
@@ -53,33 +53,26 @@ const defaultProps = {
     policyID: '',
 };
 
-class CompanyStep extends React.Component {
-    constructor(props) {
-        super(props);
-
-        this.submit = this.submit.bind(this);
-        this.validate = this.validate.bind(this);
-
-        this.defaultWebsite = lodashGet(props, 'user.isFromPublicDomain', false) ? 'https://' : `https://www.${Str.extractEmailDomain(props.session.email, '')}`;
-    }
-
+function CompanyStep ({reimbursementAccount, reimbursementAccountDraft, getDefaultStateForField, onBackButtonPress, translate, session, user, policyID}) {
     /**
      * @param {Array} fieldNames
      *
      * @returns {*}
      */
-    getBankAccountFields(fieldNames) {
+    function getBankAccountFields(fieldNames) {
         return {
-            ..._.pick(lodashGet(this.props.reimbursementAccount, 'achData'), ...fieldNames),
-            ..._.pick(this.props.reimbursementAccountDraft, ...fieldNames),
+            ..._.pick(lodashGet(reimbursementAccount, 'achData'), ...fieldNames),
+            ..._.pick(reimbursementAccountDraft, ...fieldNames),
         };
     }
 
+    const defaultWebsite = useMemo(() => lodashGet(user, 'isFromPublicDomain', false) ? 'https://' : `https://www.${Str.extractEmailDomain(session.email, '')}`, [user, session]);
+
     /**
      * @param {Object} values - form input values passed by the Form component
      * @returns {Object} - Object containing the errors for each inputID, e.g. {inputID1: error1, inputID2: error2}
      */
-    validate(values) {
+    const validate = (values) => {
         const errors = {};
 
         if (!values.companyName) {
@@ -135,12 +128,12 @@ class CompanyStep extends React.Component {
         return errors;
     }
 
-    submit(values) {
+    const submit = (values) => {
         const bankAccount = {
-            bankAccountID: lodashGet(this.props.reimbursementAccount, 'achData.bankAccountID') || 0,
+            bankAccountID: lodashGet(reimbursementAccount, 'achData.bankAccountID') || 0,
 
             // Fields from BankAccount step
-            ...this.getBankAccountFields(['routingNumber', 'accountNumber', 'bankName', 'plaidAccountID', 'plaidAccessToken', 'isSavings']),
+            ...getBankAccountFields(['routingNumber', 'accountNumber', 'bankName', 'plaidAccountID', 'plaidAccessToken', 'isSavings']),
 
             // Fields from Company step
             ...values,
@@ -148,144 +141,142 @@ class CompanyStep extends React.Component {
             companyPhone: parsePhoneNumber(values.companyPhone, {regionCode: CONST.COUNTRY.US}).number.significant,
         };
 
-        BankAccounts.updateCompanyInformationForBankAccount(bankAccount, this.props.policyID);
+        BankAccounts.updateCompanyInformationForBankAccount(bankAccount, policyID);
     }
 
-    render() {
-        const bankAccountID = lodashGet(this.props.reimbursementAccount, 'achData.bankAccountID', 0);
-        const shouldDisableCompanyName = Boolean(bankAccountID && this.props.getDefaultStateForField('companyName'));
-        const shouldDisableCompanyTaxID = Boolean(bankAccountID && this.props.getDefaultStateForField('companyTaxID'));
+    const bankAccountID = lodashGet(reimbursementAccount, 'achData.bankAccountID', 0);
+    const shouldDisableCompanyName = Boolean(bankAccountID && getDefaultStateForField('companyName'));
+    const shouldDisableCompanyTaxID = Boolean(bankAccountID && getDefaultStateForField('companyTaxID'));
 
-        return (
-            <ScreenWrapper includeSafeAreaPaddingBottom={false}>
-                <HeaderWithBackButton
-                    title={this.props.translate('companyStep.headerTitle')}
-                    stepCounter={{step: 2, total: 5}}
-                    shouldShowGetAssistanceButton
-                    guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_BANK_ACCOUNT}
-                    onBackButtonPress={this.props.onBackButtonPress}
+    return (
+        <ScreenWrapper includeSafeAreaPaddingBottom={false}>
+            <HeaderWithBackButton
+                title={translate('companyStep.headerTitle')}
+                stepCounter={{step: 2, 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]}
+            >
+                <Text>{translate('companyStep.subtitle')}</Text>
+                <TextInput
+                    label={translate('companyStep.legalBusinessName')}
+                    accessibilityLabel={translate('companyStep.legalBusinessName')}
+                    accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT}
+                    inputID="companyName"
+                    containerStyles={[styles.mt4]}
+                    disabled={shouldDisableCompanyName}
+                    defaultValue={getDefaultStateForField('companyName')}
+                    shouldSaveDraft
+                    shouldUseDefaultValue={shouldDisableCompanyName}
                 />
-                <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]}
-                >
-                    <Text>{this.props.translate('companyStep.subtitle')}</Text>
-                    <TextInput
-                        label={this.props.translate('companyStep.legalBusinessName')}
-                        accessibilityLabel={this.props.translate('companyStep.legalBusinessName')}
-                        accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT}
-                        inputID="companyName"
-                        containerStyles={[styles.mt4]}
-                        disabled={shouldDisableCompanyName}
-                        defaultValue={this.props.getDefaultStateForField('companyName')}
-                        shouldSaveDraft
-                        shouldUseDefaultValue={shouldDisableCompanyName}
-                    />
-                    <AddressForm
-                        translate={this.props.translate}
-                        defaultValues={{
-                            street: this.props.getDefaultStateForField('addressStreet'),
-                            city: this.props.getDefaultStateForField('addressCity'),
-                            state: this.props.getDefaultStateForField('addressState'),
-                            zipCode: this.props.getDefaultStateForField('addressZipCode'),
-                        }}
-                        inputKeys={{
-                            street: 'addressStreet',
-                            city: 'addressCity',
-                            state: 'addressState',
-                            zipCode: 'addressZipCode',
-                        }}
-                        shouldSaveDraft
-                        streetTranslationKey="common.companyAddress"
-                    />
-                    <TextInput
-                        inputID="companyPhone"
-                        label={this.props.translate('common.phoneNumber')}
-                        accessibilityLabel={this.props.translate('common.phoneNumber')}
-                        accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT}
-                        containerStyles={[styles.mt4]}
-                        keyboardType={CONST.KEYBOARD_TYPE.PHONE_PAD}
-                        placeholder={this.props.translate('common.phoneNumberPlaceholder')}
-                        defaultValue={this.props.getDefaultStateForField('companyPhone')}
-                        shouldSaveDraft
-                    />
-                    <TextInput
-                        inputID="website"
-                        label={this.props.translate('companyStep.companyWebsite')}
-                        accessibilityLabel={this.props.translate('companyStep.companyWebsite')}
-                        accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT}
-                        containerStyles={[styles.mt4]}
-                        defaultValue={this.props.getDefaultStateForField('website', this.defaultWebsite)}
+                <AddressForm
+                    translate={translate}
+                    defaultValues={{
+                        street: getDefaultStateForField('addressStreet'),
+                        city: getDefaultStateForField('addressCity'),
+                        state: getDefaultStateForField('addressState'),
+                        zipCode: getDefaultStateForField('addressZipCode'),
+                    }}
+                    inputKeys={{
+                        street: 'addressStreet',
+                        city: 'addressCity',
+                        state: 'addressState',
+                        zipCode: 'addressZipCode',
+                    }}
+                    shouldSaveDraft
+                    streetTranslationKey="common.companyAddress"
+                />
+                <TextInput
+                    inputID="companyPhone"
+                    label={translate('common.phoneNumber')}
+                    accessibilityLabel={translate('common.phoneNumber')}
+                    accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT}
+                    containerStyles={[styles.mt4]}
+                    keyboardType={CONST.KEYBOARD_TYPE.PHONE_PAD}
+                    placeholder={translate('common.phoneNumberPlaceholder')}
+                    defaultValue={getDefaultStateForField('companyPhone')}
+                    shouldSaveDraft
+                />
+                <TextInput
+                    inputID="website"
+                    label={translate('companyStep.companyWebsite')}
+                    accessibilityLabel={translate('companyStep.companyWebsite')}
+                    accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT}
+                    containerStyles={[styles.mt4]}
+                    defaultValue={getDefaultStateForField('website', defaultWebsite)}
+                    shouldSaveDraft
+                    hint={translate('common.websiteExample')}
+                    keyboardType={CONST.KEYBOARD_TYPE.URL}
+                />
+                <TextInput
+                    inputID="companyTaxID"
+                    label={translate('companyStep.taxIDNumber')}
+                    accessibilityLabel={translate('companyStep.taxIDNumber')}
+                    accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT}
+                    containerStyles={[styles.mt4]}
+                    keyboardType={CONST.KEYBOARD_TYPE.NUMBER_PAD}
+                    disabled={shouldDisableCompanyTaxID}
+                    placeholder={translate('companyStep.taxIDNumberPlaceholder')}
+                    defaultValue={getDefaultStateForField('companyTaxID')}
+                    shouldSaveDraft
+                    shouldUseDefaultValue={shouldDisableCompanyTaxID}
+                />
+                <View style={styles.mt4}>
+                    <Picker
+                        inputID="incorporationType"
+                        label={translate('companyStep.companyType')}
+                        items={_.map(translate('companyStep.incorporationTypes'), (label, value) => ({value, label}))}
+                        placeholder={{value: '', label: '-'}}
+                        defaultValue={getDefaultStateForField('incorporationType')}
                         shouldSaveDraft
-                        hint={this.props.translate('common.websiteExample')}
-                        keyboardType={CONST.KEYBOARD_TYPE.URL}
                     />
-                    <TextInput
-                        inputID="companyTaxID"
-                        label={this.props.translate('companyStep.taxIDNumber')}
-                        accessibilityLabel={this.props.translate('companyStep.taxIDNumber')}
-                        accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT}
-                        containerStyles={[styles.mt4]}
-                        keyboardType={CONST.KEYBOARD_TYPE.NUMBER_PAD}
-                        disabled={shouldDisableCompanyTaxID}
-                        placeholder={this.props.translate('companyStep.taxIDNumberPlaceholder')}
-                        defaultValue={this.props.getDefaultStateForField('companyTaxID')}
+                </View>
+                <View style={styles.mt4}>
+                    <DatePicker
+                        inputID="incorporationDate"
+                        label={translate('companyStep.incorporationDate')}
+                        placeholder={translate('companyStep.incorporationDatePlaceholder')}
+                        defaultValue={getDefaultStateForField('incorporationDate')}
                         shouldSaveDraft
-                        shouldUseDefaultValue={shouldDisableCompanyTaxID}
                     />
-                    <View style={styles.mt4}>
-                        <Picker
-                            inputID="incorporationType"
-                            label={this.props.translate('companyStep.companyType')}
-                            items={_.map(this.props.translate('companyStep.incorporationTypes'), (label, value) => ({value, label}))}
-                            placeholder={{value: '', label: '-'}}
-                            defaultValue={this.props.getDefaultStateForField('incorporationType')}
-                            shouldSaveDraft
-                        />
-                    </View>
-                    <View style={styles.mt4}>
-                        <DatePicker
-                            inputID="incorporationDate"
-                            label={this.props.translate('companyStep.incorporationDate')}
-                            placeholder={this.props.translate('companyStep.incorporationDatePlaceholder')}
-                            defaultValue={this.props.getDefaultStateForField('incorporationDate')}
-                            shouldSaveDraft
-                        />
-                    </View>
-                    <View style={[styles.mt4, styles.mhn5]}>
-                        <StatePicker
-                            inputID="incorporationState"
-                            label={this.props.translate('companyStep.incorporationState')}
-                            defaultValue={this.props.getDefaultStateForField('incorporationState')}
-                            shouldSaveDraft
-                        />
-                    </View>
-                    <CheckboxWithLabel
-                        accessibilityLabel={`${this.props.translate('companyStep.confirmCompanyIsNot')} ${this.props.translate('companyStep.listOfRestrictedBusinesses')}`}
-                        inputID="hasNoConnectionToCannabis"
-                        defaultValue={this.props.getDefaultStateForField('hasNoConnectionToCannabis', false)}
-                        LabelComponent={() => (
-                            <Text>
-                                {`${this.props.translate('companyStep.confirmCompanyIsNot')} `}
-                                <TextLink
-                                    // eslint-disable-next-line max-len
-                                    href="https://community.expensify.com/discussion/6191/list-of-restricted-businesses"
-                                >
-                                    {`${this.props.translate('companyStep.listOfRestrictedBusinesses')}.`}
-                                </TextLink>
-                            </Text>
-                        )}
-                        style={[styles.mt4]}
+                </View>
+                <View style={[styles.mt4, styles.mhn5]}>
+                    <StatePicker
+                        inputID="incorporationState"
+                        label={translate('companyStep.incorporationState')}
+                        defaultValue={getDefaultStateForField('incorporationState')}
                         shouldSaveDraft
                     />
-                </Form>
-            </ScreenWrapper>
-        );
-    }
+                </View>
+                <CheckboxWithLabel
+                    accessibilityLabel={`${translate('companyStep.confirmCompanyIsNot')} ${translate('companyStep.listOfRestrictedBusinesses')}`}
+                    inputID="hasNoConnectionToCannabis"
+                    defaultValue={getDefaultStateForField('hasNoConnectionToCannabis', false)}
+                    LabelComponent={() => (
+                        <Text>
+                            {`${translate('companyStep.confirmCompanyIsNot')} `}
+                            <TextLink
+                                // eslint-disable-next-line max-len
+                                href="https://community.expensify.com/discussion/6191/list-of-restricted-businesses"
+                            >
+                                {`${translate('companyStep.listOfRestrictedBusinesses')}.`}
+                            </TextLink>
+                        </Text>
+                    )}
+                    style={[styles.mt4]}
+                    shouldSaveDraft
+                />
+            </Form>
+        </ScreenWrapper>
+    );
 }
 
 CompanyStep.propTypes = propTypes;

From 208b555e08cace540b70b2877dd5e4955003dd52 Mon Sep 17 00:00:00 2001
From: Kamil Owczarz <kamil.owczarz@swmansion.com>
Date: Wed, 16 Aug 2023 14:47:30 +0200
Subject: [PATCH 2/5] Lint

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

diff --git a/src/pages/ReimbursementAccount/CompanyStep.js b/src/pages/ReimbursementAccount/CompanyStep.js
index 23ec83f9c976..45e7b3489bdd 100644
--- a/src/pages/ReimbursementAccount/CompanyStep.js
+++ b/src/pages/ReimbursementAccount/CompanyStep.js
@@ -53,7 +53,7 @@ const defaultProps = {
     policyID: '',
 };
 
-function CompanyStep ({reimbursementAccount, reimbursementAccountDraft, getDefaultStateForField, onBackButtonPress, translate, session, user, policyID}) {
+function CompanyStep({reimbursementAccount, reimbursementAccountDraft, getDefaultStateForField, onBackButtonPress, translate, session, user, policyID}) {
     /**
      * @param {Array} fieldNames
      *
@@ -66,7 +66,7 @@ function CompanyStep ({reimbursementAccount, reimbursementAccountDraft, getDefau
         };
     }
 
-    const defaultWebsite = useMemo(() => lodashGet(user, 'isFromPublicDomain', false) ? 'https://' : `https://www.${Str.extractEmailDomain(session.email, '')}`, [user, session]);
+    const defaultWebsite = useMemo(() => (lodashGet(user, 'isFromPublicDomain', false) ? 'https://' : `https://www.${Str.extractEmailDomain(session.email, '')}`), [user, session]);
 
     /**
      * @param {Object} values - form input values passed by the Form component
@@ -126,7 +126,7 @@ function CompanyStep ({reimbursementAccount, reimbursementAccountDraft, getDefau
         }
 
         return errors;
-    }
+    };
 
     const submit = (values) => {
         const bankAccount = {
@@ -142,7 +142,7 @@ function CompanyStep ({reimbursementAccount, reimbursementAccountDraft, getDefau
         };
 
         BankAccounts.updateCompanyInformationForBankAccount(bankAccount, policyID);
-    }
+    };
 
     const bankAccountID = lodashGet(reimbursementAccount, 'achData.bankAccountID', 0);
     const shouldDisableCompanyName = Boolean(bankAccountID && getDefaultStateForField('companyName'));

From 78926b69314f3ac00411fb0bab097ec45b37a30e Mon Sep 17 00:00:00 2001
From: Kamil Owczarz <kamil.owczarz@swmansion.com>
Date: Tue, 22 Aug 2023 12:26:53 +0200
Subject: [PATCH 3/5] Fix rebase issue

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

diff --git a/src/pages/ReimbursementAccount/CompanyStep.js b/src/pages/ReimbursementAccount/CompanyStep.js
index f63a4de92cf1..0487d2d0314d 100644
--- a/src/pages/ReimbursementAccount/CompanyStep.js
+++ b/src/pages/ReimbursementAccount/CompanyStep.js
@@ -72,7 +72,7 @@ function CompanyStep({reimbursementAccount, reimbursementAccountDraft, getDefaul
      * @param {Object} values - form input values passed by the Form component
      * @returns {Object} - Object containing the errors for each inputID, e.g. {inputID1: error1, inputID2: error2}
      */
-    validate(values) {
+    function validate(values) {
         const requiredFields = [
             'companyName',
             'addressStreet',

From 8217c01c195374dd9408186aa486a9f05e4870d3 Mon Sep 17 00:00:00 2001
From: Kamil Owczarz <kamil.owczarz@swmansion.com>
Date: Tue, 22 Aug 2023 13:49:00 +0200
Subject: [PATCH 4/5] Fix lint

---
 src/pages/ReimbursementAccount/CompanyStep.js | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/src/pages/ReimbursementAccount/CompanyStep.js b/src/pages/ReimbursementAccount/CompanyStep.js
index 0487d2d0314d..76100b7c6aa3 100644
--- a/src/pages/ReimbursementAccount/CompanyStep.js
+++ b/src/pages/ReimbursementAccount/CompanyStep.js
@@ -59,12 +59,10 @@ function CompanyStep({reimbursementAccount, reimbursementAccountDraft, getDefaul
      *
      * @returns {*}
      */
-    function getBankAccountFields(fieldNames) {
-        return {
-            ..._.pick(lodashGet(reimbursementAccount, 'achData'), ...fieldNames),
-            ..._.pick(reimbursementAccountDraft, ...fieldNames),
-        };
-    }
+    const getBankAccountFields = (fieldNames) => ({
+        ..._.pick(lodashGet(reimbursementAccount, 'achData'), ...fieldNames),
+        ..._.pick(reimbursementAccountDraft, ...fieldNames),
+    });
 
     const defaultWebsite = useMemo(() => (lodashGet(user, 'isFromPublicDomain', false) ? 'https://' : `https://www.${Str.extractEmailDomain(session.email, '')}`), [user, session]);
 
@@ -72,7 +70,7 @@ function CompanyStep({reimbursementAccount, reimbursementAccountDraft, getDefaul
      * @param {Object} values - form input values passed by the Form component
      * @returns {Object} - Object containing the errors for each inputID, e.g. {inputID1: error1, inputID2: error2}
      */
-    function validate(values) {
+    const validate = (values) => {
         const requiredFields = [
             'companyName',
             'addressStreet',

From b978b8c99061fae4c95a861781349c3ba5b0ec53 Mon Sep 17 00:00:00 2001
From: Kamil Owczarz <kamil.owczarz@swmansion.com>
Date: Mon, 28 Aug 2023 12:30:30 +0200
Subject: [PATCH 5/5] Add DisplayName

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

diff --git a/src/pages/ReimbursementAccount/CompanyStep.js b/src/pages/ReimbursementAccount/CompanyStep.js
index 82d693f38e33..d76d10c9e52c 100644
--- a/src/pages/ReimbursementAccount/CompanyStep.js
+++ b/src/pages/ReimbursementAccount/CompanyStep.js
@@ -272,6 +272,7 @@ function CompanyStep({reimbursementAccount, reimbursementAccountDraft, getDefaul
 
 CompanyStep.propTypes = propTypes;
 CompanyStep.defaultProps = defaultProps;
+CompanyStep.displayName = 'CompanyStep';
 
 export default compose(
     withLocalize,