Merge account feature fixes - Part 1

src/CONST.ts

@@ -1060,7 +1060,7 @@ const CONST = {
     DELAYED_SUBMISSION_HELP_URL: 'https://help.expensify.com/articles/expensify-classic/reports/Automatically-submit-employee-reports',
     ENCRYPTION_AND_SECURITY_HELP_URL: 'https://help.expensify.com/articles/new-expensify/settings/Encryption-and-Data-Security',
     PLAN_TYPES_AND_PRICING_HELP_URL: 'https://help.expensify.com/articles/new-expensify/billing-and-subscriptions/Plan-types-and-pricing',
-    MERGE_ACCOUNT_HELP_URL: 'https://help.expensify.com/articles/expensify-classic/settings/Merge-accounts',
+    MERGE_ACCOUNT_HELP_URL: 'https://help.expensify.com/articles/new-expensify/settings/Merge-Accounts',
     TEST_RECEIPT_URL: `${CLOUDFRONT_URL}/images/fake-receipt__tacotodds.png`,
     // Use Environment.getEnvironmentURL to get the complete URL with port number
     DEV_NEW_EXPENSIFY_URL: 'https://dev.new.expensify.com:',

src/components/ConfirmationPage.tsx

@@ -106,7 +106,7 @@ function ConfirmationPage({
                     </View>
                 )}
                 <Text style={[styles.textHeadline, styles.textAlignCenter, styles.mv2, headingStyle]}>{heading}</Text>
-                <Text style={[styles.textAlignCenter, descriptionStyle]}>{description}</Text>
+                <Text style={[styles.textAlignCenter, descriptionStyle, styles.w100]}>{description}</Text>
                 {cta ? <Text style={[styles.textAlignCenter, ctaStyle]}>{cta}</Text> : null}
             </View>
             {(shouldShowSecondaryButton || shouldShowButton) && (

src/libs/Navigation/linkingConfig/RELATIONS/SETTINGS_TO_RHP.ts

@@ -52,6 +52,9 @@ const CENTRAL_PANE_TO_RHP_MAPPING: Partial<Record<keyof SettingsSplitNavigatorPa
         SCREENS.SETTINGS.DELEGATE.DELEGATE_ROLE,
         SCREENS.SETTINGS.DELEGATE.UPDATE_DELEGATE_ROLE,
         SCREENS.SETTINGS.DELEGATE.DELEGATE_CONFIRM,
+        SCREENS.SETTINGS.MERGE_ACCOUNTS.ACCOUNT_DETAILS,
+        SCREENS.SETTINGS.MERGE_ACCOUNTS.ACCOUNT_VALIDATE,
+        SCREENS.SETTINGS.MERGE_ACCOUNTS.MERGE_RESULT,
     ],
     [SCREENS.SETTINGS.ABOUT]: [SCREENS.SETTINGS.APP_DOWNLOAD_LINKS],
     [SCREENS.SETTINGS.SAVE_THE_WORLD]: [SCREENS.I_KNOW_A_TEACHER, SCREENS.INTRO_SCHOOL_PRINCIPAL, SCREENS.I_AM_A_TEACHER],

src/pages/settings/Security/MergeAccounts/AccountDetailsPage.tsx

@@ -1,7 +1,7 @@
-import {useFocusEffect, useRoute} from '@react-navigation/native';
+import {useFocusEffect, useNavigation, useRoute} from '@react-navigation/native';
 import {Str} from 'expensify-common';
-import React, {useCallback, useRef, useState} from 'react';
-import {View} from 'react-native';
+import React, {useCallback, useEffect, useRef, useState} from 'react';
+import {InteractionManager, View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
 import type {ValueOf} from 'type-fest';
 import CheckboxWithLabel from '@components/CheckboxWithLabel';
@@ -52,6 +52,7 @@ const getValidateCodeErrorKey = (err: string): ValueOf<typeof CONST.MERGE_ACCOUN
 
 function AccountDetailsPage() {
     const formRef = useRef<FormRef>(null);
+    const navigation = useNavigation();
     const [userEmailOrPhone] = useOnyx(ONYXKEYS.SESSION, {selector: (session) => session?.email});
     const [getValidateCodeForAccountMerge] = useOnyx(ONYXKEYS.ACCOUNT, {selector: (account) => account?.getValidateCodeForAccountMerge});
     const {params} = useRoute<PlatformStackRouteProp<SettingsNavigatorParamList, typeof SCREENS.SETTINGS.MERGE_ACCOUNTS.ACCOUNT_DETAILS>>();
@@ -67,30 +68,38 @@ function AccountDetailsPage() {
 
     useFocusEffect(
         useCallback(() => {
-            if (!validateCodeSent || !email) {
-                return;
-            }
+            const task = InteractionManager.runAfterInteractions(() => {
+                if (!validateCodeSent || !email) {
+                    return;
+                }
+
+                return Navigation.navigate(ROUTES.SETTINGS_MERGE_ACCOUNTS_MAGIC_CODE.getRoute(email));
+            });
 
-            return Navigation.navigate(ROUTES.SETTINGS_MERGE_ACCOUNTS_MAGIC_CODE.getRoute(email));
+            return () => task.cancel();
         }, [validateCodeSent, email]),
     );
 
     useFocusEffect(
         useCallback(() => {
-            if (!errorKey || !email) {
-                return;
-            }
-            return Navigation.navigate(ROUTES.SETTINGS_MERGE_ACCOUNTS_RESULT.getRoute(email, errorKey));
+            const task = InteractionManager.runAfterInteractions(() => {
+                if (!errorKey || !email) {
+                    return;
+                }
+                return Navigation.navigate(ROUTES.SETTINGS_MERGE_ACCOUNTS_RESULT.getRoute(email, errorKey));
+            });
+
+            return () => task.cancel();
         }, [errorKey, email]),
     );
 
-    useFocusEffect(
-        useCallback(() => {
-            return () => {
-                clearGetValidateCodeForAccountMerge();
-            };
-        }, []),
-    );
+    useEffect(() => {
+        const unsubscribe = navigation.addListener('blur', () => {
+            clearGetValidateCodeForAccountMerge();
+        });
+
+        return unsubscribe;
+    }, [navigation]);
 
     const validate = (values: FormOnyxValues<typeof ONYXKEYS.FORMS.MERGE_ACCOUNT_DETAILS_FORM>): Errors => {
         const errors = {};
@@ -99,6 +108,8 @@ function AccountDetailsPage() {
 
         if (!login) {
             addErrorMessage(errors, INPUT_IDS.PHONE_OR_EMAIL, translate('common.pleaseEnterEmailOrPhoneNumber'));
+        } else if (login.trim() === userEmailOrPhone) {
+            addErrorMessage(errors, INPUT_IDS.PHONE_OR_EMAIL, translate('common.error.email'));
         } else {
             const phoneLogin = appendCountryCode(getPhoneNumberWithoutSpecialChars(login));
             const parsedPhoneNumber = parsePhoneNumber(phoneLogin);

src/pages/settings/Security/MergeAccounts/AccountValidatePage.tsx

@@ -1,5 +1,5 @@
-import {useFocusEffect, useRoute} from '@react-navigation/native';
-import React, {useCallback, useRef} from 'react';
+import {useFocusEffect, useNavigation, useRoute} from '@react-navigation/native';
+import React, {useCallback, useEffect, useRef} from 'react';
 import {View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
 import type {ValueOf} from 'type-fest';
@@ -21,6 +21,7 @@ import {
     requestValidationCodeForAccountMerge,
 } from '@userActions/MergeAccounts';
 import CONST from '@src/CONST';
+import type {TranslationPaths} from '@src/languages/types';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import type SCREENS from '@src/SCREENS';
@@ -57,8 +58,22 @@ const getMergeErrorKey = (err: string): ValueOf<typeof CONST.MERGE_ACCOUNT_RESUL
     return null;
 };
 
+const getAuthenticationErrorKey = (err: string): TranslationPaths | null => {
+    if (!err) {
+        return null;
+    }
+
+    if (err.includes('Invalid validateCode')) {
+        return 'passwordForm.error.incorrect2fa';
+    }
+
+    return 'passwordForm.error.fallback';
+};
+
 function AccountValidatePage() {
     const validateCodeFormRef = useRef<ValidateCodeFormHandle>(null);
+    const navigation = useNavigation();
+
     const [account] = useOnyx(ONYXKEYS.ACCOUNT, {
         selector: (data) => ({
             mergeWithValidateCode: data?.mergeWithValidateCode,
@@ -77,6 +92,7 @@ function AccountValidatePage() {
 
     const latestError = getLatestErrorMessage(mergeWithValidateCode);
     const errorKey = getMergeErrorKey(latestError);
+    const authenticationErrorKey = getAuthenticationErrorKey(latestError);
 
     const styles = useThemeStyles();
     const {translate} = useLocalize();
@@ -99,14 +115,14 @@ function AccountValidatePage() {
         }, [errorKey, email]),
     );
 
-    useFocusEffect(
-        useCallback(() => {
-            return () => {
-                clearMergeWithValidateCode();
-                clearGetValidateCodeForAccountMerge();
-            };
-        }, []),
-    );
+    useEffect(() => {
+        const unsubscribe = navigation.addListener('blur', () => {
+            clearGetValidateCodeForAccountMerge();
+            clearMergeWithValidateCode();
+        });
+
+        return unsubscribe;
+    }, [navigation]);
 
     return (
         <ScreenWrapper
@@ -142,7 +158,7 @@ function AccountValidatePage() {
                 }}
                 shouldSkipInitialValidation
                 clearError={() => clearMergeWithValidateCode()}
-                validateError={!errorKey ? mergeWithValidateCode?.errors : undefined}
+                validateError={!errorKey && authenticationErrorKey ? {authError: translate(authenticationErrorKey)} : undefined}
                 hasMagicCodeBeenSent={getValidateCodeForAccountMerge?.validateCodeSent}
                 submitButtonText={translate('mergeAccountsPage.mergeAccount')}
                 forwardedRef={validateCodeFormRef}