fix: batch of submit button fixes and some other minor ones (#22)

* fix: batch of submit button fixes and some other minor ones * fix: remove unnecessary variable * fix: linter fix
staszekscp · Feb 12, 2024 · 2002e4d · 2002e4d
1 parent 6da20e2
commit 2002e4d
Show file tree

Hide file tree

Showing 8 changed files with 164 additions and 178 deletions.
diff --git a/src/pages/ReimbursementAccount/BankInfo/BankInfo.tsx b/src/pages/ReimbursementAccount/BankInfo/BankInfo.tsx
@@ -121,7 +121,12 @@ function BankInfo({reimbursementAccount, reimbursementAccountDraft, plaidLinkTok
     };
 
     return (
-        <ScreenWrapper testID={BankInfo.displayName}>
+        <ScreenWrapper
+            testID={BankInfo.displayName}
+            includeSafeAreaPaddingBottom={false}
+            shouldEnablePickerAvoiding={false}
+            shouldEnableMaxHeight
+        >
             <HeaderWithBackButton
                 shouldShowBackButton
                 onBackButtonPress={handleBackButtonPress}

diff --git a/src/pages/ReimbursementAccount/BankInfo/substeps/Confirmation.tsx b/src/pages/ReimbursementAccount/BankInfo/substeps/Confirmation.tsx
@@ -76,7 +76,7 @@ function Confirmation({reimbursementAccount, reimbursementAccountDraft, onNext,
                         onPress={handleModifyAccountNumbers}
                     />
                 )}
-                <View style={[styles.ph5, styles.mtAuto]}>
+                <View style={[styles.ph5, styles.pb5, styles.flexGrow1, styles.justifyContentEnd]}>
                     {error && error.length > 0 && (
                         <DotIndicatorMessage
                             textStyles={[styles.formError]}
@@ -88,7 +88,7 @@ function Confirmation({reimbursementAccount, reimbursementAccountDraft, onNext,
                         isLoading={isLoading}
                         isDisabled={isLoading}
                         success
-                        style={[styles.w100, styles.pb5, styles.mt2]}
+                        style={[styles.w100]}
                         onPress={onNext}
                         text={translate('common.confirm')}
                     />

diff --git a/src/pages/ReimbursementAccount/BeneficialOwnerInfo/substeps/BeneficialOwnerCheckUBO.tsx b/src/pages/ReimbursementAccount/BeneficialOwnerInfo/substeps/BeneficialOwnerCheckUBO.tsx
@@ -2,7 +2,6 @@ import React, {useMemo, useState} from 'react';
 import FormProvider from '@components/Form/FormProvider';
 import type {Choice} from '@components/RadioButtons';
 import RadioButtons from '@components/RadioButtons';
-import ScreenWrapper from '@components/ScreenWrapper';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -43,27 +42,22 @@ function BeneficialOwnerCheckUBO({title, onSelectedValue, defaultValue}: Benefic
     );
 
     return (
-        <ScreenWrapper
-            testID={BeneficialOwnerCheckUBO.displayName}
-            style={[styles.pt0]}
+        <FormProvider
+            formID={ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM}
+            submitButtonText={translate('common.confirm')}
+            onSubmit={handleSubmit}
+            style={[styles.mh5, styles.flexGrow1]}
+            submitButtonStyles={[styles.pb5, styles.mb0]}
         >
-            <FormProvider
-                formID={ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM}
-                submitButtonText={translate('common.confirm')}
-                onSubmit={handleSubmit}
-                style={[styles.mh5, styles.flexGrow1]}
-                submitButtonStyles={[styles.pb5, styles.mb0]}
-            >
-                <Text style={[styles.textHeadlineLineHeightXXL]}>{title}</Text>
-                <Text style={[styles.pv3, styles.textSupporting]}>{translate('beneficialOwnerInfoStep.regulationRequiresUsToVerifyTheIdentity')}</Text>
-                <RadioButtons
-                    items={options}
-                    onPress={handleSelectUBOValue}
-                    defaultCheckedValue={defaultValue.toString()}
-                    radioButtonStyle={[styles.mb6]}
-                />
-            </FormProvider>
-        </ScreenWrapper>
+            <Text style={[styles.textHeadlineLineHeightXXL]}>{title}</Text>
+            <Text style={[styles.pv3, styles.textSupporting]}>{translate('beneficialOwnerInfoStep.regulationRequiresUsToVerifyTheIdentity')}</Text>
+            <RadioButtons
+                items={options}
+                onPress={handleSelectUBOValue}
+                defaultCheckedValue={defaultValue.toString()}
+                radioButtonStyle={[styles.mb6]}
+            />
+        </FormProvider>
     );
 }
 

diff --git a/src/pages/ReimbursementAccount/BeneficialOwnerInfo/substeps/CompanyOwnersListUBO.tsx b/src/pages/ReimbursementAccount/BeneficialOwnerInfo/substeps/CompanyOwnersListUBO.tsx
@@ -85,6 +85,7 @@ function CompanyOwnersListUBO({
                     description={`${beneficialOwnerData.street}, ${beneficialOwnerData.city}, ${beneficialOwnerData.state} ${beneficialOwnerData.zipCode}`}
                     wrapperStyle={[styles.ph5]}
                     icon={Expensicons.FallbackAvatar}
+                    iconType={CONST.ICON_TYPE_AVATAR}
                     onPress={() => {
                         handleUBOEdit(ownerKey);
                     }}

diff --git a/src/pages/ReimbursementAccount/BusinessInfo/substeps/ConfirmationBusiness.tsx b/src/pages/ReimbursementAccount/BusinessInfo/substeps/ConfirmationBusiness.tsx
@@ -7,7 +7,6 @@ import CheckboxWithLabel from '@components/CheckboxWithLabel';
 import FormProvider from '@components/Form/FormProvider';
 import InputWrapper from '@components/Form/InputWrapper';
 import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
-import ScreenWrapper from '@components/ScreenWrapper';
 import Text from '@components/Text';
 import TextLink from '@components/TextLink';
 import useLocalize from '@hooks/useLocalize';
@@ -56,103 +55,98 @@ function ConfirmationBusiness({reimbursementAccount, reimbursementAccountDraft,
     const defaultCheckboxState = reimbursementAccountDraft?.[BUSINESS_INFO_STEP_KEYS.HAS_NO_CONNECTION_TO_CANNABIS] ?? false;
 
     return (
-        <ScreenWrapper
-            testID={ConfirmationBusiness.displayName}
-            style={[styles.pt0]}
-        >
-            <ScrollView contentContainerStyle={styles.flexGrow1}>
-                <Text style={[styles.textHeadlineLineHeightXXL, styles.ph5, styles.mb3]}>{translate('businessInfoStep.letsDoubleCheck')}</Text>
-                <MenuItemWithTopDescription
-                    description={translate('businessInfoStep.businessName')}
-                    title={values[BUSINESS_INFO_STEP_KEYS.COMPANY_NAME]}
-                    shouldShowRightIcon
-                    onPress={() => {
-                        onMove(BUSINESS_INFO_STEP_INDEXES.BUSINESS_NAME);
-                    }}
+        <ScrollView contentContainerStyle={styles.flexGrow1}>
+            <Text style={[styles.textHeadlineLineHeightXXL, styles.ph5, styles.mb3]}>{translate('businessInfoStep.letsDoubleCheck')}</Text>
+            <MenuItemWithTopDescription
+                description={translate('businessInfoStep.businessName')}
+                title={values[BUSINESS_INFO_STEP_KEYS.COMPANY_NAME]}
+                shouldShowRightIcon
+                onPress={() => {
+                    onMove(BUSINESS_INFO_STEP_INDEXES.BUSINESS_NAME);
+                }}
+            />
+            <MenuItemWithTopDescription
+                description={translate('businessInfoStep.taxIDNumber')}
+                title={values[BUSINESS_INFO_STEP_KEYS.COMPANY_TAX_ID]}
+                shouldShowRightIcon
+                onPress={() => {
+                    onMove(BUSINESS_INFO_STEP_INDEXES.TAX_ID_NUMBER);
+                }}
+            />
+            <MenuItemWithTopDescription
+                description={translate('common.companyAddress')}
+                title={`${values[BUSINESS_INFO_STEP_KEYS.STREET]}, ${values[BUSINESS_INFO_STEP_KEYS.CITY]}, ${values[BUSINESS_INFO_STEP_KEYS.STATE]} ${
+                    values[BUSINESS_INFO_STEP_KEYS.ZIP_CODE]
+                }`}
+                shouldShowRightIcon
+                onPress={() => {
+                    onMove(BUSINESS_INFO_STEP_INDEXES.COMPANY_ADDRESS);
+                }}
+            />
+            <MenuItemWithTopDescription
+                description={translate('common.phoneNumber')}
+                title={values[BUSINESS_INFO_STEP_KEYS.COMPANY_PHONE]}
+                shouldShowRightIcon
+                onPress={() => {
+                    onMove(BUSINESS_INFO_STEP_INDEXES.PHONE_NUMBER);
+                }}
+            />
+            <MenuItemWithTopDescription
+                description={translate('businessInfoStep.companyWebsite')}
+                title={values[BUSINESS_INFO_STEP_KEYS.COMPANY_WEBSITE]}
+                shouldShowRightIcon
+                onPress={() => {
+                    onMove(BUSINESS_INFO_STEP_INDEXES.COMPANY_WEBSITE);
+                }}
+            />
+            <MenuItemWithTopDescription
+                description={translate('businessInfoStep.companyType')}
+                title={translate(`businessInfoStep.incorporationType.${values[BUSINESS_INFO_STEP_KEYS.INCORPORATION_TYPE]}` as TranslationPaths)}
+                shouldShowRightIcon
+                onPress={() => {
+                    onMove(BUSINESS_INFO_STEP_INDEXES.COMPANY_TYPE);
+                }}
+            />
+            <MenuItemWithTopDescription
+                description={translate('businessInfoStep.incorporationDate')}
+                title={values[BUSINESS_INFO_STEP_KEYS.INCORPORATION_DATE]}
+                shouldShowRightIcon
+                onPress={() => {
+                    onMove(BUSINESS_INFO_STEP_INDEXES.INCORPORATION_DATE);
+                }}
+            />
+            <MenuItemWithTopDescription
+                description={translate('businessInfoStep.incorporationState')}
+                title={translate(`allStates.${values[BUSINESS_INFO_STEP_KEYS.INCORPORATION_STATE] as States}.stateName`)}
+                shouldShowRightIcon
+                onPress={() => {
+                    onMove(BUSINESS_INFO_STEP_INDEXES.INCORPORATION_STATE);
+                }}
+            />
+            <FormProvider
+                formID={ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM}
+                validate={validate}
+                onSubmit={onNext}
+                scrollContextEnabled
+                submitButtonText={translate('common.confirm')}
+                style={[styles.mh5, styles.flexGrow1]}
+            >
+                <InputWrapper
+                    InputComponent={CheckboxWithLabel}
+                    aria-label={`${translate('businessInfoStep.confirmCompanyIsNot')} ${translate('businessInfoStep.listOfRestrictedBusinesses')}`}
+                    inputID={BUSINESS_INFO_STEP_KEYS.HAS_NO_CONNECTION_TO_CANNABIS}
+                    defaultValue={defaultCheckboxState}
+                    LabelComponent={() => (
+                        <Text>
+                            {`${translate('businessInfoStep.confirmCompanyIsNot')} `}
+                            <TextLink href={CONST.LIST_OF_RESTRICTED_BUSINESSES}>{`${translate('businessInfoStep.listOfRestrictedBusinesses')}.`}</TextLink>
+                        </Text>
+                    )}
+                    style={[styles.mt3]}
+                    shouldSaveDraft
                 />
-                <MenuItemWithTopDescription
-                    description={translate('businessInfoStep.taxIDNumber')}
-                    title={values[BUSINESS_INFO_STEP_KEYS.COMPANY_TAX_ID]}
-                    shouldShowRightIcon
-                    onPress={() => {
-                        onMove(BUSINESS_INFO_STEP_INDEXES.TAX_ID_NUMBER);
-                    }}
-                />
-                <MenuItemWithTopDescription
-                    description={translate('common.companyAddress')}
-                    title={`${values[BUSINESS_INFO_STEP_KEYS.STREET]}, ${values[BUSINESS_INFO_STEP_KEYS.CITY]}, ${values[BUSINESS_INFO_STEP_KEYS.STATE]} ${
-                        values[BUSINESS_INFO_STEP_KEYS.ZIP_CODE]
-                    }`}
-                    shouldShowRightIcon
-                    onPress={() => {
-                        onMove(BUSINESS_INFO_STEP_INDEXES.COMPANY_ADDRESS);
-                    }}
-                />
-                <MenuItemWithTopDescription
-                    description={translate('common.phoneNumber')}
-                    title={values[BUSINESS_INFO_STEP_KEYS.COMPANY_PHONE]}
-                    shouldShowRightIcon
-                    onPress={() => {
-                        onMove(BUSINESS_INFO_STEP_INDEXES.PHONE_NUMBER);
-                    }}
-                />
-                <MenuItemWithTopDescription
-                    description={translate('businessInfoStep.companyWebsite')}
-                    title={values[BUSINESS_INFO_STEP_KEYS.COMPANY_WEBSITE]}
-                    shouldShowRightIcon
-                    onPress={() => {
-                        onMove(BUSINESS_INFO_STEP_INDEXES.COMPANY_WEBSITE);
-                    }}
-                />
-                <MenuItemWithTopDescription
-                    description={translate('businessInfoStep.companyType')}
-                    title={translate(`businessInfoStep.incorporationType.${values[BUSINESS_INFO_STEP_KEYS.INCORPORATION_TYPE]}` as TranslationPaths)}
-                    shouldShowRightIcon
-                    onPress={() => {
-                        onMove(BUSINESS_INFO_STEP_INDEXES.COMPANY_TYPE);
-                    }}
-                />
-                <MenuItemWithTopDescription
-                    description={translate('businessInfoStep.incorporationDate')}
-                    title={values[BUSINESS_INFO_STEP_KEYS.INCORPORATION_DATE]}
-                    shouldShowRightIcon
-                    onPress={() => {
-                        onMove(BUSINESS_INFO_STEP_INDEXES.INCORPORATION_DATE);
-                    }}
-                />
-                <MenuItemWithTopDescription
-                    description={translate('businessInfoStep.incorporationState')}
-                    title={translate(`allStates.${values[BUSINESS_INFO_STEP_KEYS.INCORPORATION_STATE] as States}.stateName`)}
-                    shouldShowRightIcon
-                    onPress={() => {
-                        onMove(BUSINESS_INFO_STEP_INDEXES.INCORPORATION_STATE);
-                    }}
-                />
-                <FormProvider
-                    formID={ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM}
-                    validate={validate}
-                    onSubmit={onNext}
-                    scrollContextEnabled
-                    submitButtonText={translate('common.confirm')}
-                    style={[styles.mh5, styles.flexGrow1]}
-                >
-                    <InputWrapper
-                        InputComponent={CheckboxWithLabel}
-                        aria-label={`${translate('businessInfoStep.confirmCompanyIsNot')} ${translate('businessInfoStep.listOfRestrictedBusinesses')}`}
-                        inputID={BUSINESS_INFO_STEP_KEYS.HAS_NO_CONNECTION_TO_CANNABIS}
-                        defaultValue={defaultCheckboxState}
-                        LabelComponent={() => (
-                            <Text>
-                                {`${translate('businessInfoStep.confirmCompanyIsNot')} `}
-                                <TextLink href={CONST.LIST_OF_RESTRICTED_BUSINESSES}>{`${translate('businessInfoStep.listOfRestrictedBusinesses')}.`}</TextLink>
-                            </Text>
-                        )}
-                        style={[styles.mt3]}
-                        shouldSaveDraft
-                    />
-                </FormProvider>
-            </ScrollView>
-        </ScreenWrapper>
+            </FormProvider>
+        </ScrollView>
     );
 }
 

diff --git a/src/pages/ReimbursementAccount/CompanyStep.js b/src/pages/ReimbursementAccount/CompanyStep.js
@@ -5,18 +5,10 @@ import BusinessInfo from './BusinessInfo/BusinessInfo';
 const propTypes = {
     /** Goes to the previous step */
     onBackButtonPress: PropTypes.func.isRequired,
-
-    /** Exits flow and goes back to the workspace initial page */
-    onCloseButtonPress: PropTypes.func.isRequired,
 };
 
-function CompanyStep({onBackButtonPress, onCloseButtonPress}) {
-    return (
-        <BusinessInfo
-            onBackButtonPress={onBackButtonPress}
-            onCloseButtonPress={onCloseButtonPress}
-        />
-    );
+function CompanyStep({onBackButtonPress}) {
+    return <BusinessInfo onBackButtonPress={onBackButtonPress} />;
 }
 
 CompanyStep.propTypes = propTypes;