Refactor/36648 wallet enablement flow personal info

src/CONST.ts

@@ -1365,8 +1365,9 @@ const CONST = {
             PERSONAL_INFO: {
                 LEGAL_NAME: 0,
                 DATE_OF_BIRTH: 1,
-                SSN: 2,
-                ADDRESS: 3,
+                ADDRESS: 2,
+                PHONE_NUMBER: 3,
+                SSN: 4,
             },
         },
         TIER_NAME: {

src/ROUTES.ts

@@ -124,6 +124,7 @@ const ROUTES = {
     SETTINGS_ADD_BANK_ACCOUNT: 'settings/wallet/add-bank-account',
     SETTINGS_ADD_BANK_ACCOUNT_REFACTOR: 'settings/wallet/add-bank-account-refactor',
     SETTINGS_ENABLE_PAYMENTS: 'settings/wallet/enable-payments',
+    SETTINGS_ENABLE_PAYMENTS_REFACTOR: 'settings/wallet/enable-payments-refactor',
     SETTINGS_WALLET_CARD_DIGITAL_DETAILS_UPDATE_ADDRESS: {
         route: 'settings/wallet/card/:domain/digital-details/update-address',
         getRoute: (domain: string) => `settings/wallet/card/${domain}/digital-details/update-address` as const,

src/SCREENS.ts

@@ -85,6 +85,7 @@ const SCREENS = {
             TRANSFER_BALANCE: 'Settings_Wallet_Transfer_Balance',
             CHOOSE_TRANSFER_ACCOUNT: 'Settings_Wallet_Choose_Transfer_Account',
             ENABLE_PAYMENTS: 'Settings_Wallet_EnablePayments',
+            ENABLE_PAYMENTS_REFACTOR: 'Settings_Wallet_EnablePayments_Refactor',
             CARD_ACTIVATE: 'Settings_Wallet_Card_Activate',
             REPORT_VIRTUAL_CARD_FRAUD: 'Settings_Wallet_ReportVirtualCardFraud',
             CARDS_DIGITAL_DETAILS_UPDATE_ADDRESS: 'Settings_Wallet_Cards_Digital_Details_Update_Address',

src/hooks/useReimbursementAccountStepFormSubmit.ts

@@ -1,8 +1,7 @@
-import {useCallback} from 'react';
-import type {FormOnyxKeys, FormOnyxValues} from '@components/Form/types';
-import * as FormActions from '@userActions/FormActions';
+import type {FormOnyxKeys} from '@components/Form/types';
 import type {OnyxFormKey} from '@src/ONYXKEYS';
 import ONYXKEYS from '@src/ONYXKEYS';
+import useStepFormSubmit from './useStepFormSubmit';
 import type {SubStepProps} from './useSubStep/types';
 
 type UseReimbursementAccountStepFormSubmitParams = Pick<SubStepProps, 'onNext'> & {
@@ -13,34 +12,16 @@ type UseReimbursementAccountStepFormSubmitParams = Pick<SubStepProps, 'onNext'>
 
 /**
  * Hook for handling submit method in ReimbursementAccount substeps.
- * When user is in editing mode we should save values only when user confirm that
- * @param formId - ID for particular form
+ * When user is in editing mode, we should save values only when user confirms the change
  * @param onNext - callback
  * @param fieldIds - field IDs for particular step
  * @param shouldSaveDraft - if we should save draft values
  */
-export default function useReimbursementAccountStepFormSubmit({
-    formId = ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM,
-    onNext,
-    fieldIds,
-    shouldSaveDraft,
-}: UseReimbursementAccountStepFormSubmitParams) {
-    return useCallback(
-        (values: FormOnyxValues<typeof ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM>) => {
-            if (shouldSaveDraft) {
-                const stepValues = fieldIds.reduce(
-                    (acc, key) => ({
-                        ...acc,
-                        [key]: values[key],
-                    }),
-                    {},
-                );
-
-                FormActions.setDraftValues(formId, stepValues);
-            }
-
-            onNext();
-        },
-        [onNext, formId, fieldIds, shouldSaveDraft],
-    );
+export default function useReimbursementAccountStepFormSubmit({onNext, fieldIds, shouldSaveDraft}: UseReimbursementAccountStepFormSubmitParams) {
+    return useStepFormSubmit<typeof ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM>({
+        formId: ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM,
+        onNext,
+        fieldIds,
+        shouldSaveDraft,
+    });
 }

src/hooks/useStepFormSubmit.ts

@@ -0,0 +1,40 @@
+import {useCallback} from 'react';
+import type {FormOnyxKeys, FormOnyxValues} from '@components/Form/types';
+import * as FormActions from '@userActions/FormActions';
+import type {OnyxFormKey, OnyxFormValuesMapping} from '@src/ONYXKEYS';
+import type {SubStepProps} from './useSubStep/types';
+
+type UseStepFormSubmitParams<T extends keyof OnyxFormValuesMapping> = Pick<SubStepProps, 'onNext'> & {
+    formId: OnyxFormKey;
+    fieldIds: Array<FormOnyxKeys<T>>;
+    shouldSaveDraft: boolean;
+};
+
+/**
+ * Hook for handling submit method in substeps.
+ * When user is in editing mode, we should save values only when user confirms the change
+ * @param formId - ID for particular form
+ * @param onNext - callback
+ * @param fieldIds - field IDs for particular step
+ * @param shouldSaveDraft - if we should save draft values
+ */
+export default function useStepFormSubmit<T extends keyof OnyxFormValuesMapping>({formId, onNext, fieldIds, shouldSaveDraft}: UseStepFormSubmitParams<T>) {
+    return useCallback(
+        (values: FormOnyxValues<T>) => {
+            if (shouldSaveDraft) {
+                const stepValues = fieldIds.reduce(
+                    (acc, key) => ({
+                        ...acc,
+                        [key]: values[key],
+                    }),
+                    {},
+                );
+
+                FormActions.setDraftValues(formId, stepValues);
+            }
+
+            onNext();
+        },
+        [onNext, formId, fieldIds, shouldSaveDraft],
+    );
+}

src/hooks/useSubStep/index.ts

@@ -55,5 +55,14 @@ export default function useSubStep<TProps extends SubStepProps>({bodyContent, on
         setScreenIndex(bodyContent.length - 1);
     }, [bodyContent]);
 
-    return {componentToRender: bodyContent[screenIndex], isEditing: isEditing.current, screenIndex, prevScreen, nextScreen, moveTo, resetScreenIndex, goToTheLastStep};
+    return {
+        componentToRender: bodyContent[screenIndex],
+        isEditing: isEditing.current,
+        screenIndex,
+        prevScreen,
+        nextScreen,
+        moveTo,
+        resetScreenIndex,
+        goToTheLastStep,
+    };
 }

src/hooks/useWalletAdditionalDetailsStepFormSubmit.ts

@@ -0,0 +1,27 @@
+import type {FormOnyxKeys} from '@components/Form/types';
+import type {OnyxFormKey} from '@src/ONYXKEYS';
+import ONYXKEYS from '@src/ONYXKEYS';
+import useStepFormSubmit from './useStepFormSubmit';
+import type {SubStepProps} from './useSubStep/types';
+
+type UseWalletAdditionalDetailsStepFormSubmitParams = Pick<SubStepProps, 'onNext'> & {
+    formId?: OnyxFormKey;
+    fieldIds: Array<FormOnyxKeys<typeof ONYXKEYS.FORMS.WALLET_ADDITIONAL_DETAILS>>;
+    shouldSaveDraft: boolean;
+};
+
+/**
+ * Hook for handling submit method in WalletAdditionalDetails substeps.
+ * When user is in editing mode, we should save values only when user confirms the change
+ * @param onNext - callback
+ * @param fieldIds - field IDs for particular step
+ * @param shouldSaveDraft - if we should save draft values
+ */
+export default function useWalletAdditionalDetailsStepFormSubmit({onNext, fieldIds, shouldSaveDraft}: UseWalletAdditionalDetailsStepFormSubmitParams) {
+    return useStepFormSubmit<typeof ONYXKEYS.FORMS.WALLET_ADDITIONAL_DETAILS>({
+        formId: ONYXKEYS.FORMS.WALLET_ADDITIONAL_DETAILS,
+        onNext,
+        fieldIds,
+        shouldSaveDraft,
+    });
+}

src/languages/en.ts

@@ -1693,6 +1693,14 @@ export default {
         address: 'Address',
         letsDoubleCheck: "Let's double check that everything looks right.",
         byAddingThisBankAccount: 'By adding this bank account, you confirm that you have read, understand and accept',
+        whatsYourLegalName: 'What’s your legal name?',
+        whatsYourDOB: 'What’s your date of birth?',
+        whatsYourAddress: 'What’s your address?',
+        noPOBoxesPlease: 'No PO boxes or mail-drop addresses, please.',
+        whatsYourSSN: 'What are the last four digits of your Social Security Number?',
+        noPersonalChecks: 'Don’t worry, no personal credit checks here!',
+        whatsYourPhoneNumber: 'What’s your phone number?',
+        weNeedThisToVerify: 'We need this to verify your wallet.',
     },
     businessInfoStep: {
         businessInfo: 'Business info',

src/languages/es.ts

@@ -1715,6 +1715,14 @@ export default {
         address: 'Dirección',
         letsDoubleCheck: 'Revisemos que todo esté bien',
         byAddingThisBankAccount: 'Añadiendo esta cuenta bancaria, confirmas que has leído, entendido y aceptado',
+        whatsYourLegalName: '¿Cuál es tu nombre legal?',
+        whatsYourDOB: '¿Cuál es tu fecha de nacimiento?',
+        whatsYourAddress: '¿Cuál es tu dirección?',
+        noPOBoxesPlease: 'Nada de apartados de correos ni direcciones de envío, por favor.',
+        whatsYourSSN: '¿Cuáles son los últimos 4 dígitos de tu número de la seguridad social?',
+        noPersonalChecks: 'No te preocupes, no hacemos verificaciones de crédito personales.',
+        whatsYourPhoneNumber: '¿Cuál es tu número de teléfono?',
+        weNeedThisToVerify: 'Necesitamos esto para verificar tu billetera.',
     },
     businessInfoStep: {
         businessInfo: 'Información de la empresa',

src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx

@@ -207,6 +207,7 @@ const SettingsModalStackNavigator = createModalStackNavigator<SettingsNavigatorP
     [SCREENS.SETTINGS.WALLET.TRANSFER_BALANCE]: () => require('../../../../pages/settings/Wallet/TransferBalancePage').default as React.ComponentType,
     [SCREENS.SETTINGS.WALLET.CHOOSE_TRANSFER_ACCOUNT]: () => require('../../../../pages/settings/Wallet/ChooseTransferAccountPage').default as React.ComponentType,
     [SCREENS.SETTINGS.WALLET.ENABLE_PAYMENTS]: () => require('../../../../pages/EnablePayments/EnablePaymentsPage').default as React.ComponentType,
+    [SCREENS.SETTINGS.WALLET.ENABLE_PAYMENTS_REFACTOR]: () => require('../../../../pages/EnablePayments/PersonalInfo/PersonalInfo').default as React.ComponentType,
     [SCREENS.SETTINGS.ADD_DEBIT_CARD]: () => require('../../../../pages/settings/Wallet/AddDebitCardPage').default as React.ComponentType,
     [SCREENS.SETTINGS.ADD_BANK_ACCOUNT]: () => require('../../../../pages/AddPersonalBankAccountPage').default as React.ComponentType,
     [SCREENS.SETTINGS.ADD_BANK_ACCOUNT_REFACTOR]: () => require('../../../../pages/EnablePayments/AddBankAccount/AddBankAccount').default as React.ComponentType,

src/libs/Navigation/linkingConfig/config.ts

@@ -168,6 +168,10 @@ const config: LinkingOptions<RootStackParamList>['config'] = {
                             path: ROUTES.SETTINGS_ENABLE_PAYMENTS,
                             exact: true,
                         },
+                        [SCREENS.SETTINGS.WALLET.ENABLE_PAYMENTS_REFACTOR]: {
+                            path: ROUTES.SETTINGS_ENABLE_PAYMENTS_REFACTOR,
+                            exact: true,
+                        },
                         [SCREENS.SETTINGS.WALLET.TRANSFER_BALANCE]: {
                             path: ROUTES.SETTINGS_WALLET_TRANSFER_BALANCE,
                             exact: true,

src/libs/actions/Wallet.ts

@@ -295,6 +295,10 @@ function requestPhysicalExpensifyCard(cardID: number, authToken: string, private
     API.write(WRITE_COMMANDS.REQUEST_PHYSICAL_EXPENSIFY_CARD, requestParams, {optimisticData});
 }
 
+function resetWalletAdditionalDetailsDraft() {
+    Onyx.set(ONYXKEYS.FORMS.WALLET_ADDITIONAL_DETAILS_DRAFT, null);
+}
+
 export {
     openOnfidoFlow,
     openInitialSettingsPage,
@@ -309,4 +313,5 @@ export {
     acceptWalletTerms,
     setKYCWallSource,
     requestPhysicalExpensifyCard,
+    resetWalletAdditionalDetailsDraft,
 };

src/pages/EnablePayments/AddBankAccount/AddBankAccount.tsx

@@ -54,6 +54,7 @@ function AddBankAccount({personalBankAccount, plaidData, personalBankAccountDraf
 
     const exitFlow = (shouldContinue = false) => {
         const exitReportID = personalBankAccount?.exitReportID;
+        // TODO: https://github.com/Expensify/App/issues/36648 This should be updated to the correct route once the refactor is complete
         const onSuccessFallbackRoute = personalBankAccount?.onSuccessFallbackRoute ?? '';
 
         if (exitReportID) {
@@ -64,7 +65,7 @@ function AddBankAccount({personalBankAccount, plaidData, personalBankAccountDraf
             PaymentMethods.continueSetup(onSuccessFallbackRoute);
             return;
         }
-        Navigation.goBack(ROUTES.SETTINGS_WALLET);
+        Navigation.goBack();
     };
 
     const handleBackButtonPress = () => {
@@ -92,23 +93,25 @@ function AddBankAccount({personalBankAccount, plaidData, personalBankAccountDraf
                 onBackButtonPress={handleBackButtonPress}
                 title={translate('bankAccount.addBankAccount')}
             />
-            {isSetupTypeChosen ? (
-                <>
-                    <View style={[styles.ph5, styles.mb5, styles.mt3, {height: CONST.BANK_ACCOUNT.STEPS_HEADER_HEIGHT}]}>
-                        <InteractiveStepSubHeader
-                            startStepIndex={0}
-                            stepNames={CONST.WALLET.STEP_NAMES}
+            <View style={styles.flex1}>
+                {isSetupTypeChosen ? (
+                    <>
+                        <View style={[styles.ph5, styles.mb5, styles.mt3, {height: CONST.BANK_ACCOUNT.STEPS_HEADER_HEIGHT}]}>
+                            <InteractiveStepSubHeader
+                                startStepIndex={0}
+                                stepNames={CONST.WALLET.STEP_NAMES}
+                            />
+                        </View>
+                        <SubStep
+                            isEditing={isEditing}
+                            onNext={nextScreen}
+                            onMove={moveTo}
                         />
-                    </View>
-                    <SubStep
-                        isEditing={isEditing}
-                        onNext={nextScreen}
-                        onMove={moveTo}
-                    />
-                </>
-            ) : (
-                <SetupMethod />
-            )}
+                    </>
+                ) : (
+                    <SetupMethod />
+                )}
+            </View>
         </ScreenWrapper>
     );
 }

src/pages/EnablePayments/AddBankAccount/SetupMethod.tsx

@@ -35,31 +35,33 @@ function SetupMethod({isPlaidDisabled, user}: SetupMethodProps) {
     const {translate} = useLocalize();
 
     return (
-        <Section
-            icon={Illustrations.MoneyWings}
-            title={translate('walletPage.addYourBankAccount')}
-            titleStyles={[styles.textHeadlineLineHeightXXL]}
-        >
-            <View style={[styles.mv3]}>
-                <Text>{translate('walletPage.addBankAccountBody')}</Text>
-            </View>
-            {!!plaidDesktopMessage && (
-                <View style={[styles.mv3, styles.flexRow, styles.justifyContentBetween]}>
-                    <TextLink href={bankAccountRoute}>{translate(plaidDesktopMessage)}</TextLink>
+        <View>
+            <Section
+                icon={Illustrations.MoneyWings}
+                title={translate('walletPage.addYourBankAccount')}
+                titleStyles={[styles.textHeadlineLineHeightXXL]}
+            >
+                <View style={[styles.mv3]}>
+                    <Text>{translate('walletPage.addBankAccountBody')}</Text>
                 </View>
-            )}
-            <Button
-                icon={Expensicons.Bank}
-                text={translate('bankAccount.addBankAccount')}
-                onPress={() => BankAccounts.openPersonalBankAccountSetupViewRefactor()}
-                isDisabled={isPlaidDisabled ?? !user?.validated}
-                style={[styles.mt4, styles.mb2]}
-                iconStyles={styles.buttonCTAIcon}
-                shouldShowRightIcon
-                success
-                large
-            />
-        </Section>
+                {!!plaidDesktopMessage && (
+                    <View style={[styles.mv3, styles.flexRow, styles.justifyContentBetween]}>
+                        <TextLink href={bankAccountRoute}>{translate(plaidDesktopMessage)}</TextLink>
+                    </View>
+                )}
+                <Button
+                    icon={Expensicons.Bank}
+                    text={translate('bankAccount.addBankAccount')}
+                    onPress={() => BankAccounts.openPersonalBankAccountSetupViewRefactor()}
+                    isDisabled={isPlaidDisabled ?? !user?.validated}
+                    style={[styles.mt4, styles.mb2]}
+                    iconStyles={styles.buttonCTAIcon}
+                    shouldShowRightIcon
+                    success
+                    large
+                />
+            </Section>
+        </View>
     );
 }
 

src/pages/EnablePayments/AdditionalDetailsStep.tsx

@@ -19,7 +19,7 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils';
 import {parsePhoneNumber} from '@libs/PhoneNumber';
 import * as ValidationUtils from '@libs/ValidationUtils';
-import AddressForm from '@pages/ReimbursementAccount/AddressForm';
+import AddressFormFields from '@pages/ReimbursementAccount/AddressFormFields';
 import * as Wallet from '@userActions/Wallet';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
@@ -184,7 +184,7 @@ function AdditionalDetailsStep({walletAdditionalDetails = DEFAULT_WALLET_ADDITIO
                         defaultValue={PersonalDetailsUtils.extractFirstAndLastNameFromAvailableDetails(currentUserPersonalDetails).lastName}
                         shouldSaveDraft
                     />
-                    <AddressForm
+                    <AddressFormFields
                         inputKeys={{
                             street: 'addressStreet',
                             city: 'addressCity',