Add merge account feature to ND

src/components/ConfirmationPage.tsx

@@ -22,6 +22,9 @@ type ConfirmationPageProps = {
     /** Description of the confirmation page */
     description: React.ReactNode;
 
+    /** The text for the call to action */
+    cta?: React.ReactNode;
+
     /** The text for the primary button label */
     buttonText?: string;
 
@@ -49,6 +52,9 @@ type ConfirmationPageProps = {
     /** Additional style for the description */
     descriptionStyle?: TextStyle;
 
+    /** Additional style for the cta */
+    ctaStyle?: TextStyle;
+
     /** Additional style for the footer */
     footerStyle?: ViewStyle;
 
@@ -60,6 +66,7 @@ function ConfirmationPage({
     illustration = LottieAnimations.Fireworks,
     heading,
     description,
+    cta,
     buttonText = '',
     onButtonPress = () => {},
     shouldShowButton = false,
@@ -69,6 +76,7 @@ function ConfirmationPage({
     headingStyle,
     illustrationStyle,
     descriptionStyle,
+    ctaStyle,
     footerStyle,
     containerStyle,
 }: ConfirmationPageProps) {
@@ -99,6 +107,7 @@ function ConfirmationPage({
                 )}
                 <Text style={[styles.textHeadline, styles.textAlignCenter, styles.mv2, headingStyle]}>{heading}</Text>
                 <Text style={[styles.textAlignCenter, descriptionStyle]}>{description}</Text>
+                {cta ? <Text style={[styles.textAlignCenter, ctaStyle]}>{cta}</Text> : null}
             </View>
             {(shouldShowSecondaryButton || shouldShowButton) && (
                 <FixedFooter style={footerStyle}>

src/components/ValidateCodeActionForm/index.tsx

@@ -20,7 +20,7 @@ function ValidateCodeActionForm({
     isLoading,
     submitButtonText,
     forwardedRef,
-    skipInitialValidation,
+    shouldSkipInitialValidation,
 }: ValidateCodeActionFormProps) {
     const themeStyles = useThemeStyles();
 
@@ -29,15 +29,15 @@ function ValidateCodeActionForm({
     const isUnmounted = useRef(false);
 
     useEffect(() => {
-        if (!skipInitialValidation) {
+        if (!shouldSkipInitialValidation) {
             sendValidateCode();
         }
 
         return () => {
             isUnmounted.current = true;
         };
         // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
-    }, [skipInitialValidation]);
+    }, [shouldSkipInitialValidation]);
 
     useEffect(() => {
         return () => {

src/components/ValidateCodeActionForm/type.ts

@@ -37,7 +37,7 @@ type ValidateCodeActionFormProps = {
     submitButtonText?: string;
 
     /** Skip the call to sendValidateCode fn on initial render */
-    skipInitialValidation?: boolean;
+    shouldSkipInitialValidation?: boolean;
 };
 
 // eslint-disable-next-line import/prefer-default-export

src/libs/actions/MergeAccounts.ts

@@ -62,7 +62,7 @@ function requestValidationCodeForAccountMerge(email: string) {
     API.write(WRITE_COMMANDS.GET_VALIDATE_CODE_FOR_ACCOUNT_MERGE, parameters, {optimisticData, successData, failureData});
 }
 
-function clearRequestValidationCodeForAccountMerge() {
+function clearGetValidateCodeForAccountMerge() {
     Onyx.merge(ONYXKEYS.ACCOUNT, {
         getValidateCodeForAccountMerge: {
             errors: null,
@@ -80,7 +80,7 @@ function mergeWithValidateCode(email: string, validateCode: string) {
             value: {
                 mergeWithValidateCode: {
                     isLoading: true,
-                    accountMerged: false,
+                    isAccountMerged: false,
                     errors: null,
                 },
             },
@@ -94,7 +94,7 @@ function mergeWithValidateCode(email: string, validateCode: string) {
             value: {
                 mergeWithValidateCode: {
                     isLoading: false,
-                    accountMerged: true,
+                    isAccountMerged: true,
                     errors: null,
                 },
             },
@@ -108,7 +108,7 @@ function mergeWithValidateCode(email: string, validateCode: string) {
             value: {
                 mergeWithValidateCode: {
                     isLoading: false,
-                    accountMerged: false,
+                    isAccountMerged: false,
                 },
             },
         },
@@ -127,9 +127,9 @@ function clearMergeWithValidateCode() {
         mergeWithValidateCode: {
             errors: null,
             isLoading: false,
-            accountMerged: false,
+            isAccountMerged: false,
         },
     });
 }
 
-export {requestValidationCodeForAccountMerge, clearRequestValidationCodeForAccountMerge, mergeWithValidateCode, clearMergeWithValidateCode};
+export {requestValidationCodeForAccountMerge, clearGetValidateCodeForAccountMerge, mergeWithValidateCode, clearMergeWithValidateCode};

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

@@ -22,7 +22,7 @@ import type {PlatformStackRouteProp} from '@libs/Navigation/PlatformStackNavigat
 import type {SettingsNavigatorParamList} from '@libs/Navigation/types';
 import {parsePhoneNumber} from '@libs/PhoneNumber';
 import {isNumericWithSpecialChars} from '@libs/ValidationUtils';
-import {clearRequestValidationCodeForAccountMerge, requestValidationCodeForAccountMerge} from '@userActions/MergeAccounts';
+import {clearGetValidateCodeForAccountMerge, requestValidationCodeForAccountMerge} from '@userActions/MergeAccounts';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
@@ -87,7 +87,7 @@ function AccountDetailsPage() {
     useFocusEffect(
         useCallback(() => {
             return () => {
-                clearRequestValidationCodeForAccountMerge();
+                clearGetValidateCodeForAccountMerge();
             };
         }, []),
     );

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

@@ -15,8 +15,8 @@ import Navigation from '@libs/Navigation/Navigation';
 import type {PlatformStackRouteProp} from '@libs/Navigation/PlatformStackNavigation/types';
 import type {SettingsNavigatorParamList} from '@libs/Navigation/types';
 import {
+    clearGetValidateCodeForAccountMerge,
     clearMergeWithValidateCode,
-    clearRequestValidationCodeForAccountMerge,
     mergeWithValidateCode as mergeWithValidateCodeAction,
     requestValidationCodeForAccountMerge,
 } from '@userActions/MergeAccounts';
@@ -73,7 +73,7 @@ function AccountValidatePage() {
     const mergeWithValidateCode = account?.mergeWithValidateCode;
     const getValidateCodeForAccountMerge = account?.getValidateCodeForAccountMerge;
 
-    const accountMerged = mergeWithValidateCode?.accountMerged;
+    const isAccountMerged = mergeWithValidateCode?.isAccountMerged;
 
     const latestError = getLatestErrorMessage(mergeWithValidateCode);
     const errorKey = getMergeErrorKey(latestError);
@@ -83,27 +83,27 @@ function AccountValidatePage() {
 
     useFocusEffect(
         useCallback(() => {
-            if (!accountMerged || !email) {
+            if (!isAccountMerged || !email) {
                 return;
             }
-            return Navigation.navigate(ROUTES.SETTINGS_MERGE_ACCOUNTS_RESULT.getRoute(email, 'success'));
-        }, [accountMerged, email]),
+            return Navigation.navigate(ROUTES.SETTINGS_MERGE_ACCOUNTS_RESULT.getRoute(email, 'success'), {forceReplace: true});
+        }, [isAccountMerged, email]),
     );
 
     useFocusEffect(
         useCallback(() => {
             if (!errorKey || !email) {
                 return;
             }
-            return Navigation.navigate(ROUTES.SETTINGS_MERGE_ACCOUNTS_RESULT.getRoute(email, errorKey));
+            return Navigation.navigate(ROUTES.SETTINGS_MERGE_ACCOUNTS_RESULT.getRoute(email, errorKey), {forceReplace: true});
         }, [errorKey, email]),
     );
 
     useFocusEffect(
         useCallback(() => {
             return () => {
                 clearMergeWithValidateCode();
-                clearRequestValidationCodeForAccountMerge();
+                clearGetValidateCodeForAccountMerge();
             };
         }, []),
     );
@@ -140,9 +140,9 @@ function AccountValidatePage() {
                 sendValidateCode={() => {
                     requestValidationCodeForAccountMerge(email);
                 }}
-                skipInitialValidation
+                shouldSkipInitialValidation
                 clearError={() => clearMergeWithValidateCode()}
-                validateError={mergeWithValidateCode?.errors}
+                validateError={!errorKey ? mergeWithValidateCode?.errors : undefined}
                 hasMagicCodeBeenSent={getValidateCodeForAccountMerge?.validateCodeSent}
                 submitButtonText={translate('mergeAccountsPage.mergeAccount')}
                 forwardedRef={validateCodeFormRef}

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

@@ -87,12 +87,11 @@ function MergeResultPage() {
                         <Text style={[styles.textStrong, styles.textSupporting]}>{login}</Text>
                         {translate('mergeAccountsPage.mergeFailure2FA.oldAccount2FAEnabled.beforeSecondEmail')}
                         <Text style={[styles.textStrong, styles.textSupporting]}>{login}</Text>
-                        {translate('mergeAccountsPage.mergeFailure2FA.oldAccount2FAEnabled.afterSecondEmail')}{' '}
-                        <Text style={[styles.textSupporting]}>
-                            <TextLink href={CONST.MERGE_ACCOUNT_HELP_URL}>{translate('mergeAccountsPage.mergeFailure2FA.learnMore')}</TextLink>
-                        </Text>
+                        {translate('mergeAccountsPage.mergeFailure2FA.oldAccount2FAEnabled.afterSecondEmail')}
                     </>
                 ),
+                cta: <TextLink href={CONST.MERGE_ACCOUNT_HELP_URL}>{translate('mergeAccountsPage.mergeFailure2FA.learnMore')}</TextLink>,
+                ctaStyle: {...styles.mt2, ...styles.textSupporting},
                 onButtonPress: () => Navigation.goBack(ROUTES.SETTINGS_SECURITY),
                 buttonText: translate('common.buttonConfirm'),
                 illustration: Illustrations.LockClosedOrange,
@@ -242,6 +241,8 @@ function MergeResultPage() {
         secondaryButtonText,
         onSecondaryButtonPress,
         shouldShowSecondaryButton,
+        cta,
+        ctaStyle,
     } = results[result] || defaultResult;
 
     return (
@@ -271,6 +272,8 @@ function MergeResultPage() {
                 descriptionStyle={{...descriptionStyle, ...styles.textSupporting}}
                 illustration={illustration}
                 illustrationStyle={illustrationStyle}
+                cta={cta}
+                ctaStyle={ctaStyle}
             />
         </ScreenWrapper>
     );

src/types/onyx/Account.ts

@@ -196,7 +196,7 @@ type Account = {
         isLoading?: boolean;
 
         /** Whether the account was merged successfully */
-        accountMerged?: boolean;
+        isAccountMerged?: boolean;
 
         /** Errors while merging the account */
         errors: OnyxCommon.Errors;