Merge pull request Expensify#79533 from callstack-internal/follow-ups-for-personal-bank-accounts

Follow ups for personal bank account

Author: srikarparsi

src/pages/AddPersonalBankAccountPage.tsx

@@ -1,4 +1,4 @@
-import React, {useCallback, useContext, useEffect} from 'react';
+import React, {useContext, useEffect} from 'react';
 import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView';
 import ConfirmationPage from '@components/ConfirmationPage';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
@@ -25,7 +25,7 @@ function AddPersonalBankAccountPage() {
     const topmostFullScreenRoute = navigationRef.current?.getRootState()?.routes.findLast((route) => isFullScreenName(route.name));
     const kycWallRef = useContext(KYCWallContext);
 
-    const goBack = useCallback(() => {
+    const goBack = () => {
         switch (topmostFullScreenRoute?.name) {
             case NAVIGATORS.SETTINGS_SPLIT_NAVIGATOR:
                 Navigation.goBack(ROUTES.SETTINGS_WALLET);
@@ -37,23 +37,21 @@ function AddPersonalBankAccountPage() {
                 Navigation.goBack();
                 break;
         }
-    }, [topmostFullScreenRoute?.name]);
+    };
 
-    const exitFlow = useCallback(
-        (shouldContinue = false) => {
-            const exitReportID = personalBankAccount?.exitReportID;
-            const onSuccessFallbackRoute = personalBankAccount?.onSuccessFallbackRoute ?? '';
+    const exitFlow = (shouldContinue = false) => {
+        const exitReportID = personalBankAccount?.exitReportID;
+        const onSuccessFallbackRoute = personalBankAccount?.onSuccessFallbackRoute ?? '';
 
-            if (exitReportID) {
-                Navigation.dismissModalWithReport({reportID: exitReportID});
-            } else if (shouldContinue && onSuccessFallbackRoute) {
-                continueSetup(kycWallRef, onSuccessFallbackRoute);
-            } else {
-                goBack();
-            }
-        },
-        [personalBankAccount?.exitReportID, personalBankAccount?.onSuccessFallbackRoute, goBack, kycWallRef],
-    );
+        if (exitReportID) {
+            Navigation.dismissModalWithReport({reportID: exitReportID});
+        } else if (shouldContinue && onSuccessFallbackRoute) {
+            continueSetup(kycWallRef, onSuccessFallbackRoute);
+        } else {
+            goBack();
+            clearPersonalBankAccount();
+        }
+    };
 
     useEffect(() => clearPersonalBankAccount, []);
 

src/pages/settings/Wallet/InternationalDepositAccount/PersonalInfo/substeps/ConfirmationStep.tsx

@@ -4,8 +4,8 @@ import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
 import type {SubStepProps} from '@hooks/useSubStep/types';
 import {getLatestErrorMessage} from '@libs/ErrorUtils';
+import {formatE164PhoneNumber} from '@libs/LoginUtils';
 import {getCurrentAddress} from '@libs/PersonalDetailsUtils';
-import {parsePhoneNumber} from '@libs/PhoneNumber';
 import {clearPersonalBankAccountErrors} from '@userActions/BankAccounts';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
@@ -22,6 +22,7 @@ function ConfirmationStep({onNext, onMove, isEditing}: SubStepProps) {
     const [bankAccountPersonalDetails] = useOnyx(ONYXKEYS.FORMS.PERSONAL_BANK_ACCOUNT_FORM_DRAFT, {canBeMissing: true});
     const [personalBankAccount] = useOnyx(ONYXKEYS.PERSONAL_BANK_ACCOUNT, {canBeMissing: true});
     const [plaidData] = useOnyx(ONYXKEYS.PLAID_DATA, {canBeMissing: true});
+    const [countryCode = CONST.DEFAULT_COUNTRY_CODE] = useOnyx(ONYXKEYS.COUNTRY_CODE, {canBeMissing: false});
 
     const isManual = bankAccountPersonalDetails?.setupType === CONST.BANK_ACCOUNT.SETUP_TYPE.MANUAL;
 
@@ -32,7 +33,7 @@ function ConfirmationStep({onNext, onMove, isEditing}: SubStepProps) {
         const currentAddress = getCurrentAddress(privatePersonalDetails);
         const phone = bankAccountPersonalDetails?.phoneNumber ?? privatePersonalDetails?.phoneNumber;
         return {
-            phoneNumber: (phone && parsePhoneNumber(phone, {regionCode: CONST.COUNTRY.US}).number?.significant) ?? '',
+            phoneNumber: (phone && formatE164PhoneNumber(phone, countryCode)) ?? '',
             legalFirstName: bankAccountPersonalDetails?.legalFirstName ?? privatePersonalDetails?.legalFirstName ?? '',
             legalLastName: bankAccountPersonalDetails?.legalLastName ?? privatePersonalDetails?.legalLastName ?? '',
             addressStreet: bankAccountPersonalDetails?.addressStreet ?? currentAddress?.street ?? '',

src/pages/settings/Wallet/InternationalDepositAccount/PersonalInfo/substeps/ManualBankAccountDetailsStep.tsx

@@ -28,11 +28,6 @@ function ManualBankAccountDetailsStep({onNext, isEditing}: ManualProps) {
     const styles = useThemeStyles();
     const {inputCallbackRef} = useAutoFocusInput();
 
-    const getDefaultValues = () => ({
-        routingNumber: bankAccountPersonalDetails?.routingNumber,
-        accountNumber: bankAccountPersonalDetails?.accountNumber,
-    });
-
     const validate = (values: FormOnyxValues<typeof ONYXKEYS.FORMS.PERSONAL_BANK_ACCOUNT_FORM>): FormInputErrors<typeof ONYXKEYS.FORMS.PERSONAL_BANK_ACCOUNT_FORM> => {
         const errors = getFieldRequiredErrors(values, STEP_FIELDS);
         const routingNumber = values.routingNumber?.trim();
@@ -59,8 +54,6 @@ function ManualBankAccountDetailsStep({onNext, isEditing}: ManualProps) {
         shouldSaveDraft: true,
     });
 
-    const defaultValues = getDefaultValues();
-
     return (
         <FormProvider
             formID={ONYXKEYS.FORMS.PERSONAL_BANK_ACCOUNT_FORM}
@@ -79,7 +72,7 @@ function ManualBankAccountDetailsStep({onNext, isEditing}: ManualProps) {
                 label={translate('bankAccount.routingNumber')}
                 aria-label={translate('bankAccount.routingNumber')}
                 role={CONST.ROLE.PRESENTATION}
-                defaultValue={defaultValues[BANK_INFO_STEP_KEYS.ROUTING_NUMBER]}
+                value={bankAccountPersonalDetails?.routingNumber ?? ''}
                 inputMode={CONST.INPUT_MODE.NUMERIC}
                 shouldSaveDraft
             />
@@ -90,7 +83,7 @@ function ManualBankAccountDetailsStep({onNext, isEditing}: ManualProps) {
                 label={translate('bankAccount.accountNumber')}
                 aria-label={translate('bankAccount.accountNumber')}
                 role={CONST.ROLE.PRESENTATION}
-                defaultValue={defaultValues[BANK_INFO_STEP_KEYS.ACCOUNT_NUMBER]}
+                value={bankAccountPersonalDetails?.accountNumber ?? ''}
                 inputMode={CONST.INPUT_MODE.NUMERIC}
                 shouldSaveDraft
             />

src/pages/settings/Wallet/InternationalDepositAccount/substeps/AccountFlowEntryPoint.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useEffect} from 'react';
 import {View} from 'react-native';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import Icon from '@components/Icon';
@@ -17,7 +17,7 @@ import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@navigation/Navigation';
-import {updateAddPersonalBankAccountDraft} from '@userActions/BankAccounts';
+import {clearPersonalBankAccount, updateAddPersonalBankAccountDraft} from '@userActions/BankAccounts';
 import {openExternalLink} from '@userActions/Link';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
@@ -40,6 +40,10 @@ function AccountFlowEntryPoint({policyName = '', onBackButtonPress}: AccountFlow
 
     const [isPlaidDisabled] = useOnyx(ONYXKEYS.IS_PLAID_DISABLED, {canBeMissing: true});
 
+    useEffect(() => {
+        clearPersonalBankAccount();
+    }, []);
+
     const handleConnectManually = () => {
         updateAddPersonalBankAccountDraft({
             setupType: CONST.BANK_ACCOUNT.SETUP_TYPE.MANUAL,