fix all the bugs

src/components/ConfirmationPage.tsx

@@ -51,6 +51,7 @@ type ConfirmationPageProps = {
 
     /** Additional style for the footer */
     footerStyle?: ViewStyle;
+
     /** Additional style for the container */
     containerStyle?: ViewStyle;
 };

src/components/Form/FormProvider.tsx

@@ -273,6 +273,7 @@ function FormProvider(
         resetForm,
         resetErrors,
         resetFormFieldError,
+        submit,
     }));
 
     const registerInput = useCallback<RegisterInput>(

src/components/Form/types.ts

@@ -175,6 +175,7 @@ type FormRef<TFormID extends OnyxFormKey = OnyxFormKey> = {
     resetForm: (optionalValue: FormOnyxValues<TFormID>) => void;
     resetErrors: () => void;
     resetFormFieldError: (fieldID: keyof Form) => void;
+    submit: () => void;
 };
 
 type InputRefs = Record<string, MutableRefObject<InputComponentBaseProps>>;

src/languages/en.ts

@@ -106,7 +106,6 @@ import type {
     ManagerApprovedParams,
     MarkedReimbursedParams,
     MarkReimbursedFromIntegrationParams,
-    MergeAccountGenericParams,
     MissingPropertyParams,
     MovedFromPersonalSpaceParams,
     NeedCategoryForExportToIntegrationParams,
@@ -1368,18 +1367,21 @@ const translations = {
     mergeAccountsPage: {
         mergeAccount: 'Merge accounts',
         accountDetails: {
-            accountToMergeInto: ({email}: MergeAccountGenericParams) => `Enter the account you want to merge into ${email}`,
+            accountToMergeInto: 'Enter the account you want to merge into ',
             notReversibleConsent: 'I understand this is not reversible',
         },
         accountValidate: {
             confirmMerge: 'Are you sure you want to merge accounts?',
-            lossOfUnsubmittedData: ({email}: MergeAccountGenericParams) => `Merging your accounts is irreversible and will result in the loss of any unsubmitted expenses for ${email}`,
-            enterMagicCode: ({email}: MergeAccountGenericParams) => `To continue, please enter the magic code sent to ${email}`,
+            lossOfUnsubmittedData: `Merging your accounts is irreversible and will result in the loss of any unsubmitted expenses for `,
+            enterMagicCode: `To continue, please enter the magic code sent to `,
         },
         mergeSuccess: {
             accountsMerged: 'Accounts merged!',
-            successfullyMergedAllData: ({email, newEmail}: MergeAccountGenericParams & {newEmail: string}) =>
-                `You've successfully merged all data from ${email} into ${newEmail}. Moving forward, you can use either login for this account.`,
+            successfullyMergedAllData: {
+                beforeFirstEmail: `You've successfully merged all data from `,
+                beforeSecondEmail: ` into `,
+                afterSecondEmail: `. Moving forward, you can use either login for this account.`,
+            },
         },
         mergePendingSAML: {
             weAreWorkingOnIt: 'We’re working on it',
@@ -1392,33 +1394,49 @@ const translations = {
             goToExpensifyClassic: 'Go to Expensify Classic',
         },
         mergeFailureSAMLDomainControl: {
-            beforeLink: ({email}: MergeAccountGenericParams) => `You can't merge ${email} because it's controlled by ${email.split('@').at(0)}. Please `,
+            beforeFirstEmail: 'You can’t merge ',
+            beforeDomain: ' because it’s controlled by ',
+            afterDomain: '. Please ',
             linkText: 'reach out to Concierge',
             afterLink: ' for assistance.',
         },
-        mergeFailureSAMLAccount: ({email}: MergeAccountGenericParams) =>
-            `You can’t merge ${email} into other accounts because your domain admin has set it as your primary login. Please merge other accounts into it instead.`,
+        mergeFailureSAMLAccount: {
+            beforeEmail: 'You can’t merge ',
+            afterEmail: ' into other accounts because your domain admin has set it as your primary login. Please merge other accounts into it instead.',
+        },
         mergeFailure2FA: {
-            oldAccount2FAEnabled: ({email}: MergeAccountGenericParams) =>
-                `You can’t merge accounts because ${email} has two-factor authentication (2FA) enabled. Please disable 2FA for ${email} and try again.`,
+            oldAccount2FAEnabled: {
+                beforeFirstEmail: 'You can’t merge accounts because ',
+                beforeSecondEmail: ' has two-factor authentication (2FA) enabled. Please disable 2FA for ',
+                afterSecondEmail: ' and try again.',
+            },
             learnMore: 'Learn more about merging accounts.',
         },
         mergeFailureAccountLocked: {
-            beforeLink: ({email}: MergeAccountGenericParams) => `You can't merge ${email} because it's locked. Please `,
+            beforeEmail: 'You can’t merge ',
+            afterEmail: ' because it’s locked. Please ',
             linkText: 'reach out to Concierge ',
             afterLink: `for assistance.`,
         },
         mergeFailureUncreatedAccount: {
-            noExpensifyAccount: ({email}: MergeAccountGenericParams) => `You can’t merge accounts because ${email} doesn’t have an Expensify account.`,
+            noExpensifyAccount: {
+                beforeEmail: 'You can’t merge accounts because ',
+                afterEmail: ' doesn’t have an Expensify account.',
+            },
             addContactMethod: {
                 beforeLink: 'Please ',
                 linkText: 'add it as a contact method',
                 afterLink: ' instead.',
             },
         },
-        mergeFailureSmartScannerAccount: ({email}: MergeAccountGenericParams) => `You can’t merge ${email} into other accounts. Please merge other accounts into it instead.`,
-        mergeFailureInvoicedAccount: ({email}: MergeAccountGenericParams) =>
-            `You can’t merge ${email} into other accounts because it’s the billing owner of an invoiced account. Please merge other accounts into it instead.`,
+        mergeFailureSmartScannerAccount: {
+            beforeEmail: 'You can’t merge ',
+            afterEmail: ' into other accounts. Please merge other accounts into it instead.'
+        },
+        mergeFailureInvoicedAccount: {
+            beforeEmail: 'You can’t merge ',
+            afterEmail: ' into other accounts because it’s the billing owner of an invoiced account. Please merge other accounts into it instead.'
+        },
         mergeFailureGenericHeading: 'Can’t merge accounts',
     },
     passwordPage: {

src/languages/es.ts

@@ -105,7 +105,6 @@ import type {
     ManagerApprovedParams,
     MarkedReimbursedParams,
     MarkReimbursedFromIntegrationParams,
-    MergeAccountGenericParams,
     MissingPropertyParams,
     MovedFromPersonalSpaceParams,
     NeedCategoryForExportToIntegrationParams,
@@ -1366,18 +1365,21 @@ const translations = {
     mergeAccountsPage: {
         mergeAccount: 'Fusionar cuentas',
         accountDetails: {
-            accountToMergeInto: ({email}: MergeAccountGenericParams) => `Introduce la cuenta en la que deseas fusionar ${email}`,
+            accountToMergeInto: `Introduce la cuenta en la que deseas fusionar `,
             notReversibleConsent: 'Entiendo que esto no es reversible',
         },
         accountValidate: {
             confirmMerge: '¿Estás seguro de que deseas fusionar cuentas?',
-            lossOfUnsubmittedData: ({email}: MergeAccountGenericParams) => `Fusionar tus cuentas es irreversible y resultará en la pérdida de cualquier gasto no enviado de ${email}`,
-            enterMagicCode: ({email}: MergeAccountGenericParams) => `Para continuar, por favor introduce el código mágico enviado a ${email}`,
+            lossOfUnsubmittedData: `Fusionar tus cuentas es irreversible y resultará en la pérdida de cualquier gasto no enviado de `,
+            enterMagicCode: `Para continuar, por favor introduce el código mágico enviado a `,
         },
         mergeSuccess: {
             accountsMerged: '¡Cuentas fusionadas!',
-            successfullyMergedAllData: ({email, newEmail}: MergeAccountGenericParams & {newEmail: string}) =>
-                `Has fusionado exitosamente todos los datos de ${email} en ${newEmail}. De ahora en adelante, puedes usar cualquiera de los inicios de sesión para esta cuenta`,
+            successfullyMergedAllData: {
+                beforeFirstEmail: 'Has fusionado exitosamente todos los datos de ',
+                afterFirstEmail: ' en ',
+                beforeSecondEmail: '. De ahora en adelante, puedes usar cualquiera de los inicios de sesión para esta cuenta.',
+            },
         },
         mergePendingSAML: {
             weAreWorkingOnIt: 'Estamos trabajando en ello',
@@ -1390,33 +1392,49 @@ const translations = {
             goToExpensifyClassic: 'Dirígete a Expensify Classic',
         },
         mergeFailureSAMLDomainControl: {
-            beforeLink: ({email}: MergeAccountGenericParams) => `No puedes fusionar ${email} porque está controlado por ${email.split('@').at(0)}. Póngase `,
+            beforeFirstEmail: 'No puedes fusionar ',
+            beforeDomain: ' porque está controlado por ',
+            afterDomain: '. Póngase ',
             linkText: 'en contacto con Conserjería',
             afterLink: ' si necesita ayuda.',
         },
-        mergeFailureSAMLAccount: ({email}: MergeAccountGenericParams) =>
-            `No puedes fusionar ${email} en otras cuentas porque tu administrador de dominio la ha establecido como tu inicio de sesión principal. Por favor, fusiona otras cuentas en esta en su lugar.`,
+        mergeFailureSAMLAccount: {
+            beforeEmail: 'No puedes fusionar ',
+            afterEmail: ' en otras cuentas porque tu administrador de dominio la ha establecido como tu inicio de sesión principal. Por favor, fusiona otras cuentas en esta en su lugar.',
+        },
         mergeFailure2FA: {
-            oldAccount2FAEnabled: ({email}: MergeAccountGenericParams) =>
-                `No puedes fusionar cuentas porque ${email} tiene habilitada la autenticación de dos factores (2FA). Por favor, deshabilita 2FA para ${email} e inténtalo nuevamente.`,
+            oldAccount2FAEnabled: {
+                beforeFirstEmail: 'No puedes fusionar cuentas porque ',
+                beforeSecondEmail: ' tiene habilitada la autenticación de dos factores (2FA). Por favor, deshabilita 2FA para ',
+                afterSecondEmail: ' e inténtalo nuevamente.',
+            },
             learnMore: 'Aprende más sobre cómo fusionar cuentas.',
         },
         mergeFailureAccountLocked: {
-            beforeLink: ({email}: MergeAccountGenericParams) => `No puedes fusionar ${email} porque está bloqueado. Póngase `,
+            beforeEmail: 'No puedes fusionar ',
+            afterEmail: ' porque está bloqueado. Póngase ',
             linkText: 'en contacto con Conserjería',
             afterLink: ` si necesita ayuda.`,
         },
         mergeFailureUncreatedAccount: {
-            noExpensifyAccount: ({email}: MergeAccountGenericParams) => `No puedes fusionar cuentas porque ${email} no tiene una cuenta de Expensify.`,
+            noExpensifyAccount: {
+                beforeEmail: 'No puedes fusionar cuentas porque ',
+                afterEmail: ' no tiene una cuenta de Expensify.',
+            },
             addContactMethod: {
                 beforeLink: 'Por favor, ',
                 linkText: 'añádela como método de contacto',
                 afterLink: ' en su lugar.',
             },
         },
-        mergeFailureSmartScannerAccount: ({email}: MergeAccountGenericParams) => `No puedes fusionar ${email} en otras cuentas. Por favor, fusiona otras cuentas en esta en su lugar.`,
-        mergeFailureInvoicedAccount: ({email}: MergeAccountGenericParams) =>
-            `No puedes fusionar ${email} en otras cuentas porque es el propietario de facturación de una cuenta facturada. Por favor, fusiona otras cuentas en esta en su lugar.`,
+        mergeFailureSmartScannerAccount: {
+            beforeEmail: 'No puedes fusionar ',
+            afterEmail: ' en otras cuentas. Por favor, fusiona otras cuentas en esta en su lugar.',
+        },
+        mergeFailureInvoicedAccount: {
+            beforeEmail: 'No puedes fusionar ',
+            afterEmail: ' en otras cuentas porque es el propietario de facturación de una cuenta facturada. Por favor, fusiona otras cuentas en esta en su lugar.',
+        },
         mergeFailureGenericHeading: 'No se pueden fusionar cuentas',
     },
     passwordPage: {

src/languages/params.ts

@@ -652,10 +652,6 @@ type SettlementDateParams = {
     settlementDate: string;
 };
 
-type MergeAccountGenericParams = {
-    email: string;
-};
-
 type PolicyExpenseChatNameParams = {
     displayName: string;
 };
@@ -893,7 +889,6 @@ export type {
     UpdatedPolicyReportFieldDefaultValueParams,
     SubmitsToParams,
     SettlementDateParams,
-    MergeAccountGenericParams,
     PolicyExpenseChatNameParams,
     NeedCategoryForExportToIntegrationParams,
 };

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

@@ -1,13 +1,13 @@
 import {Str} from 'expensify-common';
-import React, {useEffect} from 'react';
+import React, {useEffect, useRef} from 'react';
 import {View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
 import type {ValueOf} from 'type-fest';
 import CheckboxWithLabel from '@components/CheckboxWithLabel';
 import FixedFooter from '@components/FixedFooter';
 import FormProvider from '@components/Form/FormProvider';
 import InputWrapper from '@components/Form/InputWrapper';
-import type {FormOnyxValues} from '@components/Form/types';
+import type {FormRef, FormOnyxValues} from '@components/Form/types';
 import FormAlertWithSubmitButton from '@components/FormAlertWithSubmitButton';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
@@ -44,6 +44,7 @@ const getErrorKey = (err: string): ValueOf<typeof CONST.MERGE_ACCOUNT_RESULTS> |
 };
 
 function AccountDetailsPage() {
+    const formRef = useRef<FormRef>(null);
     const [userEmailOrPhone] = useOnyx(ONYXKEYS.SESSION, {selector: (session) => session?.email});
     const [getValidateCodeForAccountMerge] = useOnyx(ONYXKEYS.ACCOUNT, {selector: (account) => account?.getValidateCodeForAccountMerge});
     const [form] = useOnyx(ONYXKEYS.FORMS.MERGE_ACCOUNT_DETAILS_FORM_DRAFT);
@@ -117,9 +118,13 @@ function AccountDetailsPage() {
                 validate={validate}
                 submitButtonText={translate('common.next')}
                 isSubmitButtonVisible={false}
+                ref={formRef}
             >
-                <View style={[styles.flexGrow1]}>
-                    <Text style={[styles.mt5]}>{translate('mergeAccountsPage.accountDetails.accountToMergeInto', {email: userEmailOrPhone ?? ''})}</Text>
+                <View style={[styles.flexGrow1, styles.mt3]}>
+                    <Text>
+                        {translate('mergeAccountsPage.accountDetails.accountToMergeInto')}
+                        <Text style={styles.textStrong}>{userEmailOrPhone}</Text>
+                    </Text>
                     <InputWrapper
                         InputComponent={TextInput}
                         inputID={INPUT_IDS.PHONE_OR_EMAIL}
@@ -143,7 +148,7 @@ function AccountDetailsPage() {
                     <FormAlertWithSubmitButton
                         isAlertVisible={!!genericError}
                         onSubmit={() => {
-                            requestValidationCodeForAccountMerge(email);
+                            formRef.current?.submit();
                         }}
                         message={genericError}
                         buttonText={translate('common.next')}

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

@@ -1,5 +1,5 @@
 import {useRoute} from '@react-navigation/native';
-import React, {useEffect} from 'react';
+import React, {useEffect, useState} from 'react';
 import {View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
 import type {ValueOf} from 'type-fest';
@@ -49,6 +49,7 @@ const getErrorKey = (err: string): ValueOf<typeof CONST.MERGE_ACCOUNT_RESULTS> |
 };
 
 function AccountValidatePage() {
+    const [hasMagicCodeBeenSent, setMagicCodeBeenSent] = useState(false);
     const [mergeWithValidateCode] = useOnyx(ONYXKEYS.ACCOUNT, {selector: (account) => account?.mergeWithValidateCode});
     const [getValidateCodeForAccountMerge] = useOnyx(ONYXKEYS.ACCOUNT, {selector: (account) => account?.getValidateCodeForAccountMerge});
     const [validateCodeAction] = useOnyx(ONYXKEYS.VALIDATE_ACTION_CODE);
@@ -92,18 +93,31 @@ function AccountValidatePage() {
                 }}
             />
             <View style={[styles.ph5, styles.mt3, styles.mb5, styles.flex1]}>
-                <Text style={[styles.mt5, styles.textStrong]}>{translate('mergeAccountsPage.accountValidate.confirmMerge')}</Text>
-                <Text style={[styles.mt5]}>{translate('mergeAccountsPage.accountValidate.lossOfUnsubmittedData', {email})}</Text>
-                <Text style={[styles.mt5]}>{translate('mergeAccountsPage.accountValidate.enterMagicCode', {email})}</Text>
+                <Text style={[styles.textStrong]}>{translate('mergeAccountsPage.accountValidate.confirmMerge')}</Text>
+                <Text style={[styles.mt5]}>
+                    {translate('mergeAccountsPage.accountValidate.lossOfUnsubmittedData')}
+                    <Text style={styles.textStrong}>
+                        {email}
+                    </Text>
+                    .
+                </Text>
+                <Text style={[styles.mt5]}>
+                    {translate('mergeAccountsPage.accountValidate.enterMagicCode')}
+                    <Text style={styles.textStrong}>
+                        {email}
+                    </Text>
+                    .
+                </Text>
                 <ValidateCodeForm
                     validateCodeAction={validateCodeAction}
                     handleSubmitForm={(code) => {
+                        setMagicCodeBeenSent(true);
                         mergeWithValidateCodeAction(email, code);
                     }}
                     sendValidateCode={() => requestValidationCodeForAccountMerge(email)}
                     clearError={() => clearMergeWithValidateCode()}
                     validateError={mergeWithValidateCode?.errors}
-                    hasMagicCodeBeenSent={getValidateCodeForAccountMerge?.validateCodeSent}
+                    hasMagicCodeBeenSent={hasMagicCodeBeenSent}
                     hideSubmitButton
                 />
             </View>