Refactor/36648 wallet enablement flow connect steps

src/CONST.ts

@@ -582,6 +582,7 @@ const CONST = {
     LICENSES_URL: `${USE_EXPENSIFY_URL}/licenses`,
     ACH_TERMS_URL: `${USE_EXPENSIFY_URL}/achterms`,
     WALLET_AGREEMENT_URL: `${USE_EXPENSIFY_URL}/walletagreement`,
+    BANCORP_WALLET_AGREEMENT_URL: `${USE_EXPENSIFY_URL}/bancorp-bank-wallet-terms-of-service`,
     HELP_LINK_URL: `${USE_EXPENSIFY_URL}/usa-patriot-act`,
     ELECTRONIC_DISCLOSURES_URL: `${USE_EXPENSIFY_URL}/esignagreement`,
     GITHUB_RELEASE_URL: 'https://api.github.com/repos/expensify/app/releases/latest',
@@ -1432,6 +1433,7 @@ const CONST = {
         },
         STEP: {
             // In the order they appear in the Wallet flow
+            ADD_BANK_ACCOUNT: 'AddBankAccountStep',
             ADDITIONAL_DETAILS: 'AdditionalDetailsStep',
             ADDITIONAL_DETAILS_KBA: 'AdditionalDetailsKBAStep',
             ONFIDO: 'OnfidoStep',

src/ROUTES.ts

@@ -123,12 +123,7 @@ const ROUTES = {
     },
     SETTINGS_ADD_DEBIT_CARD: 'settings/wallet/add-debit-card',
     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',
-    // TODO: Added temporarily for testing purposes, remove after refactor - https://github.com/Expensify/App/issues/36648
-    SETTINGS_ENABLE_PAYMENTS_REFACTOR: 'settings/wallet/enable-payments-refactor',
-    // TODO: Added temporarily for testing purposes, remove after refactor - https://github.com/Expensify/App/issues/36648
-    SETTINGS_ENABLE_PAYMENTS_TEMPORARY_TERMS: 'settings/wallet/enable-payments-temporary-terms',
     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

@@ -42,7 +42,6 @@ const SCREENS = {
         APP_DOWNLOAD_LINKS: 'Settings_App_Download_Links',
         ADD_DEBIT_CARD: 'Settings_Add_Debit_Card',
         ADD_BANK_ACCOUNT: 'Settings_Add_Bank_Account',
-        ADD_BANK_ACCOUNT_REFACTOR: 'Settings_Add_Bank_Account_Refactor',
         CLOSE: 'Settings_Close',
         TWO_FACTOR_AUTH: 'Settings_TwoFactorAuth',
         REPORT_CARD_LOST_OR_DAMAGED: 'Settings_ReportCardLostOrDamaged',
@@ -91,8 +90,6 @@ const SCREENS = {
             ENABLE_PAYMENTS: 'Settings_Wallet_EnablePayments',
             // TODO: Added temporarily for testing purposes, remove after refactor - https://github.com/Expensify/App/issues/36648
             ENABLE_PAYMENTS_REFACTOR: 'Settings_Wallet_EnablePayments_Refactor',
-            // TODO: Added temporarily for testing purposes, remove after refactor - https://github.com/Expensify/App/issues/36648
-            ENABLE_PAYMENTS_TEMPORARY_TERMS: 'Settings_Wallet_EnablePayments_Temporary_Terms',
             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/components/AddPlaidBankAccount.tsx

@@ -18,7 +18,6 @@ import FullPageOfflineBlockingView from './BlockingViews/FullPageOfflineBlocking
 import FormHelpMessage from './FormHelpMessage';
 import Icon from './Icon';
 import getBankIcon from './Icon/BankIcons';
-import Picker from './Picker';
 import PlaidLink from './PlaidLink';
 import RadioButtons from './RadioButtons';
 import Text from './Text';
@@ -59,9 +58,6 @@ type AddPlaidBankAccountProps = AddPlaidBankAccountOnyxProps & {
     /** Are we adding a withdrawal account? */
     allowDebit?: boolean;
 
-    /** Is displayed in new VBBA */
-    isDisplayedInNewVBBA?: boolean;
-
     /** Is displayed in new enable wallet flow */
     isDisplayedInWalletFlow?: boolean;
 
@@ -84,7 +80,6 @@ function AddPlaidBankAccount({
     bankAccountID = 0,
     allowDebit = false,
     isPlaidDisabled,
-    isDisplayedInNewVBBA = false,
     errorText = '',
     onInputChange = () => {},
     isDisplayedInWalletFlow = false,
@@ -259,62 +254,32 @@ function AddPlaidBankAccount({
         return <FullPageOfflineBlockingView>{renderPlaidLink()}</FullPageOfflineBlockingView>;
     }
 
-    if (isDisplayedInNewVBBA || isDisplayedInWalletFlow) {
-        return (
-            <FullPageOfflineBlockingView>
-                <Text style={[styles.mb3, styles.textHeadlineLineHeightXXL]}>{translate(isDisplayedInWalletFlow ? 'walletPage.chooseYourBankAccount' : 'bankAccount.chooseAnAccount')}</Text>
-                {!!text && <Text style={[styles.mb6, styles.textSupporting]}>{text}</Text>}
-                <View style={[styles.flexRow, styles.alignItemsCenter, styles.mb6]}>
-                    <Icon
-                        src={icon}
-                        height={iconSize}
-                        width={iconSize}
-                        additionalStyles={iconStyles}
-                    />
-                    <View>
-                        <Text style={[styles.ml3, styles.textStrong]}>{bankName}</Text>
-                        {selectedPlaidAccountMask.length > 0 && (
-                            <Text style={[styles.ml3, styles.textLabelSupporting]}>{`${translate('bankAccount.accountEnding')} ${selectedPlaidAccountMask}`}</Text>
-                        )}
-                    </View>
-                </View>
-                <Text style={[styles.textLabelSupporting]}>{`${translate('bankAccount.chooseAnAccountBelow')}:`}</Text>
-                <RadioButtons
-                    items={options}
-                    defaultCheckedValue={defaultSelectedPlaidAccountID}
-                    onPress={handleSelectingPlaidAccount}
-                    radioButtonStyle={[styles.mb6]}
-                />
-                <FormHelpMessage message={errorText} />
-            </FullPageOfflineBlockingView>
-        );
-    }
-
-    // Plaid bank accounts view
     return (
         <FullPageOfflineBlockingView>
-            {!!text && <Text style={[styles.mb5]}>{text}</Text>}
-            <View style={[styles.flexRow, styles.alignItemsCenter, styles.mb5]}>
+            <Text style={[styles.mb3, styles.textHeadlineLineHeightXXL]}>{translate(isDisplayedInWalletFlow ? 'walletPage.chooseYourBankAccount' : 'bankAccount.chooseAnAccount')}</Text>
+            {!!text && <Text style={[styles.mb6, styles.textSupporting]}>{text}</Text>}
+            <View style={[styles.flexRow, styles.alignItemsCenter, styles.mb6]}>
                 <Icon
                     src={icon}
                     height={iconSize}
                     width={iconSize}
                     additionalStyles={iconStyles}
                 />
-                <Text style={[styles.ml3, styles.textStrong]}>{bankName}</Text>
-            </View>
-            <View>
-                <Picker
-                    label={translate('addPersonalBankAccountPage.chooseAccountLabel')}
-                    onInputChange={onSelect}
-                    items={options}
-                    placeholder={{
-                        value: '',
-                        label: translate('bankAccount.chooseAnAccount'),
-                    }}
-                    value={selectedPlaidAccountID}
-                />
+                <View>
+                    <Text style={[styles.ml3, styles.textStrong]}>{bankName}</Text>
+                    {selectedPlaidAccountMask.length > 0 && (
+                        <Text style={[styles.ml3, styles.textLabelSupporting]}>{`${translate('bankAccount.accountEnding')} ${selectedPlaidAccountMask}`}</Text>
+                    )}
+                </View>
             </View>
+            <Text style={[styles.textLabelSupporting]}>{`${translate('bankAccount.chooseAnAccountBelow')}:`}</Text>
+            <RadioButtons
+                items={options}
+                defaultCheckedValue={defaultSelectedPlaidAccountID}
+                onPress={handleSelectingPlaidAccount}
+                radioButtonStyle={[styles.mb6]}
+            />
+            <FormHelpMessage message={errorText} />
         </FullPageOfflineBlockingView>
     );
 }

src/languages/en.ts

@@ -1578,6 +1578,8 @@ export default {
         facialScan: 'Onfido’s Facial Scan Policy and Release',
         tryAgain: 'Try again',
         verifyIdentity: 'Verify identity',
+        letsVerifyIdentity: "Let's verify your identity.",
+        butFirst: `But first, the boring stuff. Read up on the legalese in the next step and click "Accept" when you're ready.`,
         genericError: 'There was an error while processing this step. Please try again.',
         cameraPermissionsNotGranted: 'Enable camera access',
         cameraRequestMessage: 'We need access to your camera to complete bank account verification. Please enable via Settings > New Expensify.',

src/languages/es.ts

@@ -1597,6 +1597,8 @@ export default {
         facialScan: 'Política y lanzamiento de la exploración facial de Onfido',
         tryAgain: 'Intentar otra vez',
         verifyIdentity: 'Verificar identidad',
+        letsVerifyIdentity: '¡Vamos a verificar tu identidad!',
+        butFirst: 'Pero primero, lo aburrido. Lee la jerga legal en el siguiente paso y haz clic en "Aceptar" cuando estés listo.',
         genericError: 'Hubo un error al procesar este paso. Inténtalo de nuevo.',
         cameraPermissionsNotGranted: 'Permiso para acceder a la cámara',
         cameraRequestMessage: 'Necesitamos acceso a tu cámara para completar la verificación de tu cuenta de banco. Por favor habilita los permisos en Configuración > Nuevo Expensify.',

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

@@ -203,14 +203,9 @@ const SettingsModalStackNavigator = createModalStackNavigator<SettingsNavigatorP
     [SCREENS.SETTINGS.WALLET.CARD_GET_PHYSICAL.CONFIRM]: () => require('../../../../pages/settings/Wallet/Card/GetPhysicalCardConfirm').default as React.ComponentType,
     [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,
-    // TODO: Added temporarily for testing purposes, remove after refactor - https://github.com/Expensify/App/issues/36648
-    [SCREENS.SETTINGS.WALLET.ENABLE_PAYMENTS_REFACTOR]: () => require('../../../../pages/EnablePayments/PersonalInfo/PersonalInfo').default as React.ComponentType,
-    // TODO: Added temporarily for testing purposes, remove after refactor - https://github.com/Expensify/App/issues/36648
-    [SCREENS.SETTINGS.WALLET.ENABLE_PAYMENTS_TEMPORARY_TERMS]: () => require('../../../../pages/EnablePayments/FeesAndTerms/FeesAndTerms').default as React.ComponentType,
+    [SCREENS.SETTINGS.WALLET.ENABLE_PAYMENTS]: () => require('../../../../pages/EnablePayments/EnablePayments').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,
     [SCREENS.SETTINGS.PROFILE.STATUS]: () => require('../../../../pages/settings/Profile/CustomStatus/StatusPage').default as React.ComponentType,
     [SCREENS.SETTINGS.PROFILE.STATUS_CLEAR_AFTER]: () => require('../../../../pages/settings/Profile/CustomStatus/StatusClearAfterPage').default as React.ComponentType,
     [SCREENS.SETTINGS.PROFILE.STATUS_CLEAR_AFTER_DATE]: () => require('../../../../pages/settings/Profile/CustomStatus/SetDatePage').default as React.ComponentType,

src/libs/Navigation/linkingConfig/config.ts

@@ -161,16 +161,6 @@ const config: LinkingOptions<RootStackParamList>['config'] = {
                             path: ROUTES.SETTINGS_ENABLE_PAYMENTS,
                             exact: true,
                         },
-                        // TODO: Added temporarily for testing purposes, remove after refactor - https://github.com/Expensify/App/issues/36648
-                        [SCREENS.SETTINGS.WALLET.ENABLE_PAYMENTS_REFACTOR]: {
-                            path: ROUTES.SETTINGS_ENABLE_PAYMENTS_REFACTOR,
-                            exact: true,
-                        },
-                        // TODO: Added temporarily for testing purposes, remove after refactor - https://github.com/Expensify/App/issues/36648
-                        [SCREENS.SETTINGS.WALLET.ENABLE_PAYMENTS_TEMPORARY_TERMS]: {
-                            path: ROUTES.SETTINGS_ENABLE_PAYMENTS_TEMPORARY_TERMS,
-                            exact: true,
-                        },
                         [SCREENS.SETTINGS.WALLET.TRANSFER_BALANCE]: {
                             path: ROUTES.SETTINGS_WALLET_TRANSFER_BALANCE,
                             exact: true,
@@ -199,10 +189,6 @@ const config: LinkingOptions<RootStackParamList>['config'] = {
                             path: ROUTES.SETTINGS_ADD_BANK_ACCOUNT,
                             exact: true,
                         },
-                        [SCREENS.SETTINGS.ADD_BANK_ACCOUNT_REFACTOR]: {
-                            path: ROUTES.SETTINGS_ADD_BANK_ACCOUNT_REFACTOR,
-                            exact: true,
-                        },
                         [SCREENS.SETTINGS.PROFILE.PRONOUNS]: {
                             path: ROUTES.SETTINGS_PRONOUNS,
                             exact: true,

src/libs/actions/BankAccounts.ts

@@ -86,10 +86,9 @@ function openPersonalBankAccountSetupView(exitReportID?: string) {
 }
 
 /**
- * TODO: remove the previous function and rename this function to openPersonalBankAccountSetupView after migrating to the new flow
- * Open the personal bank account setup flow, with an optional exitReportID to redirect to once the flow is finished.
+ * Open the personal bank account setup flow using Plaid, with an optional exitReportID to redirect to once the flow is finished.
  */
-function openPersonalBankAccountSetupViewRefactor(exitReportID?: string) {
+function openPersonalBankAccountSetupWithPlaid(exitReportID?: string) {
     clearPlaid().then(() => {
         if (exitReportID) {
             Onyx.merge(ONYXKEYS.PERSONAL_BANK_ACCOUNT, {exitReportID});
@@ -231,6 +230,13 @@ function addPersonalBankAccount(account: PlaidBankAccount) {
                     shouldShowSuccess: true,
                 },
             },
+            {
+                onyxMethod: Onyx.METHOD.MERGE,
+                key: ONYXKEYS.USER_WALLET,
+                value: {
+                    currentStep: CONST.WALLET.STEP.ADDITIONAL_DETAILS,
+                },
+            },
         ],
         failureData: [
             {
@@ -561,7 +567,7 @@ export {
     validateBankAccount,
     verifyIdentityForBankAccount,
     setReimbursementAccountLoading,
-    openPersonalBankAccountSetupViewRefactor,
+    openPersonalBankAccountSetupWithPlaid,
     updateAddPersonalBankAccountDraft,
     clearPersonalBankAccountSetupType,
     validatePlaidSelection,

src/libs/actions/Wallet.ts

@@ -222,7 +222,7 @@ function openEnablePaymentsPage() {
     API.read(READ_COMMANDS.OPEN_ENABLE_PAYMENTS_PAGE, {});
 }
 
-function updateCurrentStep(currentStep: ValueOf<typeof CONST.WALLET.STEP>) {
+function updateCurrentStep(currentStep: ValueOf<typeof CONST.WALLET.STEP> | null) {
     Onyx.merge(ONYXKEYS.USER_WALLET, {currentStep});
 }
 

src/pages/AddPersonalBankAccountPage.tsx

@@ -89,7 +89,9 @@ function AddPersonalBankAccountPage({personalBankAccount, plaidData}: AddPersona
                 >
                     <AddPlaidBankAccount
                         onSelect={setSelectedPlaidAccountId}
+                        text={translate('walletPage.chooseAccountBody')}
                         plaidData={plaidData}
+                        isDisplayedInWalletFlow
                         onExitPlaid={() => Navigation.goBack()}
                         receivedRedirectURI={getPlaidOAuthReceivedRedirectURI()}
                         selectedPlaidAccountID={selectedPlaidAccountId}

src/pages/EnablePayments/AddBankAccount/AddBankAccount.tsx

@@ -1,4 +1,4 @@
-import React, {useCallback, useEffect} from 'react';
+import React, {useCallback} from 'react';
 import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import type {OnyxEntry} from 'react-native-onyx';
@@ -12,9 +12,9 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@navigation/Navigation';
 import * as BankAccounts from '@userActions/BankAccounts';
 import * as PaymentMethods from '@userActions/PaymentMethods';
+import * as Wallet from '@userActions/Wallet';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
-import ROUTES from '@src/ROUTES';
 import type {PersonalBankAccountForm} from '@src/types/form';
 import type {PersonalBankAccount, PlaidData} from '@src/types/onyx';
 import SetupMethod from './SetupMethod';
@@ -44,7 +44,6 @@ function AddBankAccount({personalBankAccount, plaidData, personalBankAccountDraf
 
         if (selectedPlaidBankAccount) {
             BankAccounts.addPersonalBankAccount(selectedPlaidBankAccount);
-            Navigation.navigate(ROUTES.SETTINGS_ENABLE_PAYMENTS);
         }
     }, [personalBankAccountDraft?.plaidAccountID, plaidData?.bankAccounts]);
 
@@ -54,7 +53,6 @@ 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) {
@@ -75,18 +73,18 @@ function AddBankAccount({personalBankAccount, plaidData, personalBankAccountDraf
         }
         if (screenIndex === 0) {
             BankAccounts.clearPersonalBankAccount();
+            Wallet.updateCurrentStep(null);
             return;
         }
         prevScreen();
     };
 
-    useEffect(() => BankAccounts.clearPersonalBankAccount, []);
-
     return (
         <ScreenWrapper
             testID={AddBankAccount.displayName}
             includeSafeAreaPaddingBottom={false}
             shouldEnablePickerAvoiding={false}
+            shouldShowOfflineIndicator
         >
             <HeaderWithBackButton
                 shouldShowBackButton

src/pages/EnablePayments/AddBankAccount/SetupMethod.tsx

@@ -28,7 +28,7 @@ type SetupMethodOnyxProps = {
 type SetupMethodProps = SetupMethodOnyxProps;
 
 const plaidDesktopMessage = getPlaidDesktopMessage();
-const bankAccountRoute = `${CONFIG.EXPENSIFY.NEW_EXPENSIFY_URL}${ROUTES.SETTINGS_ADD_BANK_ACCOUNT_REFACTOR}`;
+const enablePayments = `${CONFIG.EXPENSIFY.NEW_EXPENSIFY_URL}${ROUTES.SETTINGS_ENABLE_PAYMENTS}`;
 
 function SetupMethod({isPlaidDisabled, user}: SetupMethodProps) {
     const styles = useThemeStyles();
@@ -46,13 +46,13 @@ function SetupMethod({isPlaidDisabled, user}: SetupMethodProps) {
                 </View>
                 {!!plaidDesktopMessage && (
                     <View style={[styles.mv3, styles.flexRow, styles.justifyContentBetween]}>
-                        <TextLink href={bankAccountRoute}>{translate(plaidDesktopMessage)}</TextLink>
+                        <TextLink href={enablePayments}>{translate(plaidDesktopMessage)}</TextLink>
                     </View>
                 )}
                 <Button
                     icon={Expensicons.Bank}
                     text={translate('bankAccount.addBankAccount')}
-                    onPress={() => BankAccounts.openPersonalBankAccountSetupViewRefactor()}
+                    onPress={() => BankAccounts.openPersonalBankAccountSetupWithPlaid()}
                     isDisabled={isPlaidDisabled ?? !user?.validated}
                     style={[styles.mt4, styles.mb2]}
                     iconStyles={styles.buttonCTAIcon}