Merge pull request #56911 from allroundexperts/feat-47073

Add merge account feature to ND

Author: arosiclair

assets/images/arrow-collapse.svg

@@ -18,7 +18,6 @@ const EMPTY_ARRAY = Object.freeze([]);
 const EMPTY_OBJECT = Object.freeze({});
 
 const DEFAULT_NUMBER_ID = 0;
-
 const CLOUDFRONT_DOMAIN = 'cloudfront.net';
 const CLOUDFRONT_URL = `https://d2k5nsl2zxldvw.${CLOUDFRONT_DOMAIN}`;
 const ACTIVE_EXPENSIFY_URL = addTrailingForwardSlash(Config?.NEW_EXPENSIFY_URL ?? 'https://new.expensify.com');
@@ -1060,6 +1059,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',
     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:',
@@ -4977,6 +4977,19 @@ const CONST = {
         DISABLED: 'DISABLED',
         DISABLE: 'DISABLE',
     },
+    MERGE_ACCOUNT_RESULTS: {
+        SUCCESS: 'success',
+        ERR_2FA: 'err_2fa',
+        ERR_NO_EXIST: 'err_no_exist',
+        ERR_SMART_SCANNER: 'err_smart_scanner',
+        ERR_INVOICING: 'err_invoicing',
+        ERR_SAML_PRIMARY_LOGIN: 'err_saml_primary_login',
+        ERR_SAML_DOMAIN_CONTROL: 'err_saml_domain_control',
+        ERR_SAML_NOT_SUPPORTED: 'err_saml_not_supported',
+        ERR_ACCOUNT_LOCKED: 'err_account_locked',
+        TOO_MANY_ATTEMPTS: 'too_many_attempts',
+        ACCOUNT_UNVALIDATED: 'account_unvalidated',
+    },
     DELEGATE_ROLE: {
         ALL: 'all',
         SUBMITTER: 'submitter',

assets/images/running-turtle.svg

@@ -774,6 +774,8 @@ const ONYXKEYS = {
         RULES_CUSTOM_FORM_DRAFT: 'rulesCustomFormDraft',
         DEBUG_DETAILS_FORM: 'debugDetailsForm',
         DEBUG_DETAILS_FORM_DRAFT: 'debugDetailsFormDraft',
+        MERGE_ACCOUNT_DETAILS_FORM: 'mergeAccountDetailsForm',
+        MERGE_ACCOUNT_DETAILS_FORM_DRAFT: 'mergeAccountDetailsFormDraft',
         WORKSPACE_PER_DIEM_FORM: 'workspacePerDiemForm',
         WORKSPACE_PER_DIEM_FORM_DRAFT: 'workspacePerDiemFormDraft',
     },
@@ -875,6 +877,7 @@ type OnyxFormValuesMapping = {
     [ONYXKEYS.FORMS.RULES_CUSTOM_FORM]: FormTypes.RulesCustomForm;
     [ONYXKEYS.FORMS.SEARCH_SAVED_SEARCH_RENAME_FORM]: FormTypes.SearchSavedSearchRenameForm;
     [ONYXKEYS.FORMS.DEBUG_DETAILS_FORM]: FormTypes.DebugReportForm | FormTypes.DebugReportActionForm | FormTypes.DebugTransactionForm | FormTypes.DebugTransactionViolationForm;
+    [ONYXKEYS.FORMS.MERGE_ACCOUNT_DETAILS_FORM]: FormTypes.MergeAccountDetailsForm;
     [ONYXKEYS.FORMS.INTERNATIONAL_BANK_ACCOUNT_FORM]: FormTypes.InternationalBankAccountForm;
     [ONYXKEYS.FORMS.WORKSPACE_PER_DIEM_FORM]: FormTypes.WorkspacePerDiemForm;
 };

src/CONST.ts

@@ -186,6 +186,18 @@ const ROUTES = {
     SETTINGS_WORKSPACES: {route: 'settings/workspaces', getRoute: (backTo?: string) => getUrlWithBackToParam('settings/workspaces', backTo)},
     SETTINGS_SECURITY: 'settings/security',
     SETTINGS_CLOSE: 'settings/security/closeAccount',
+    SETTINGS_MERGE_ACCOUNTS: {
+        route: 'settings/security/merge-accounts',
+        getRoute: (email?: string) => `settings/security/merge-accounts${email ? `?email=${encodeURIComponent(email)}` : ''}` as const,
+    },
+    SETTINGS_MERGE_ACCOUNTS_MAGIC_CODE: {
+        route: 'settings/security/merge-accounts/:login/magic-code',
+        getRoute: (login: string) => `settings/security/merge-accounts/${encodeURIComponent(login)}/magic-code` as const,
+    },
+    SETTINGS_MERGE_ACCOUNTS_RESULT: {
+        route: 'settings/security/merge-accounts/:login/result/:result',
+        getRoute: (login: string, result: string, backTo?: string) => getUrlWithBackToParam(`settings/security/merge-accounts/${encodeURIComponent(login)}/result/${result}`, backTo),
+    },
     SETTINGS_ADD_DELEGATE: 'settings/security/delegate',
     SETTINGS_DELEGATE_ROLE: {
         route: 'settings/security/delegate/:login/role/:role',

src/ONYXKEYS.ts

@@ -146,6 +146,11 @@ const SCREENS = {
             DELEGATE_CONFIRM: 'Settings_Delegate_Confirm',
             UPDATE_DELEGATE_ROLE: 'Settings_Delegate_Update_Role',
         },
+        MERGE_ACCOUNTS: {
+            ACCOUNT_DETAILS: 'Settings_MergeAccounts_AccountDetails',
+            ACCOUNT_VALIDATE: 'Settings_MergeAccounts_AccountValidate',
+            MERGE_RESULT: 'Settings_MergeAccounts_MergeResult',
+        },
     },
     TWO_FACTOR_AUTH: {
         ROOT: 'Settings_TwoFactorAuth_Root',

src/ROUTES.ts

@@ -22,15 +22,27 @@ type ConfirmationPageProps = {
     /** Description of the confirmation page */
     description: React.ReactNode;
 
-    /** The text for the button label */
+    /** The text for the call to action */
+    cta?: React.ReactNode;
+
+    /** The text for the primary button label */
     buttonText?: string;
 
-    /** A function that is called when the button is clicked on */
+    /** A function that is called when the primary button is clicked on */
     onButtonPress?: () => void;
 
-    /** Whether we should show a confirmation button */
+    /** Whether we should show a primary confirmation button */
     shouldShowButton?: boolean;
 
+    /** The text for the secondary button label */
+    secondaryButtonText?: string;
+
+    /** A function that is called when the secondary button is clicked on */
+    onSecondaryButtonPress?: () => void;
+
+    /** Whether we should show a secondary confirmation button */
+    shouldShowSecondaryButton?: boolean;
+
     /** Additional style for the heading */
     headingStyle?: TextStyle;
 
@@ -40,6 +52,12 @@ type ConfirmationPageProps = {
     /** Additional style for the description */
     descriptionStyle?: TextStyle;
 
+    /** Additional style for the cta */
+    ctaStyle?: TextStyle;
+
+    /** Additional style for the footer */
+    footerStyle?: ViewStyle;
+
     /** Additional style for the container */
     containerStyle?: ViewStyle;
 };
@@ -48,12 +66,18 @@ function ConfirmationPage({
     illustration = LottieAnimations.Fireworks,
     heading,
     description,
+    cta,
     buttonText = '',
     onButtonPress = () => {},
     shouldShowButton = false,
+    secondaryButtonText = '',
+    onSecondaryButtonPress = () => {},
+    shouldShowSecondaryButton = false,
     headingStyle,
     illustrationStyle,
     descriptionStyle,
+    ctaStyle,
+    footerStyle,
     containerStyle,
 }: ConfirmationPageProps) {
     const styles = useThemeStyles();
@@ -68,6 +92,10 @@ function ConfirmationPage({
                         autoPlay
                         loop
                         style={[styles.confirmationAnimation, illustrationStyle]}
+                        webStyle={{
+                            width: (illustrationStyle?.width as number) ?? styles.confirmationAnimation.width,
+                            height: (illustrationStyle?.height as number) ?? styles.confirmationAnimation.height,
+                        }}
                     />
                 ) : (
                     <View style={[styles.confirmationAnimation, illustrationStyle]}>
@@ -79,18 +107,30 @@ 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>
-            {shouldShowButton && (
-                <FixedFooter>
-                    <Button
-                        success
-                        large
-                        text={buttonText}
-                        testID="confirmation-button"
-                        style={styles.mt6}
-                        pressOnEnter
-                        onPress={onButtonPress}
-                    />
+            {(shouldShowSecondaryButton || shouldShowButton) && (
+                <FixedFooter style={footerStyle}>
+                    {shouldShowSecondaryButton && (
+                        <Button
+                            large
+                            text={secondaryButtonText}
+                            testID="confirmation-secondary-button"
+                            style={styles.mt3}
+                            onPress={onSecondaryButtonPress}
+                        />
+                    )}
+                    {shouldShowButton && (
+                        <Button
+                            success
+                            large
+                            text={buttonText}
+                            testID="confirmation-primary-button"
+                            style={styles.mt3}
+                            pressOnEnter
+                            onPress={onButtonPress}
+                        />
+                    )}
                 </FixedFooter>
             )}
         </View>
@@ -100,3 +140,5 @@ function ConfirmationPage({
 ConfirmationPage.displayName = 'ConfirmationPage';
 
 export default ConfirmationPage;
+
+export type {ConfirmationPageProps};

src/SCREENS.ts

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

src/components/ConfirmationPage.tsx

@@ -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/components/Form/FormProvider.tsx

@@ -2,6 +2,7 @@ import AddReaction from '@assets/images/add-reaction.svg';
 import All from '@assets/images/all.svg';
 import Android from '@assets/images/android.svg';
 import Apple from '@assets/images/apple.svg';
+import ArrowCollapse from '@assets/images/arrow-collapse.svg';
 import ArrowDownLong from '@assets/images/arrow-down-long.svg';
 import ArrowRightLong from '@assets/images/arrow-right-long.svg';
 import ArrowRight from '@assets/images/arrow-right.svg';
@@ -228,6 +229,7 @@ export {
     AnnounceRoomAvatar,
     Apple,
     AppleLogo,
+    ArrowCollapse,
     ArrowRight,
     ArrowRightLong,
     ArrowsUpDown,

src/components/Form/types.ts

@@ -65,6 +65,7 @@ import TeleScope from '@assets/images/product-illustrations/telescope.svg';
 import ThreeLeggedLaptopWoman from '@assets/images/product-illustrations/three_legged_laptop_woman.svg';
 import ToddBehindCloud from '@assets/images/product-illustrations/todd-behind-cloud.svg';
 import ToddWithPhones from '@assets/images/product-illustrations/todd-with-phones.svg';
+import RunningTurtle from '@assets/images/running-turtle.svg';
 import ReportReceipt from '@assets/images/simple-illustration__report-receipt.svg';
 import BigVault from '@assets/images/simple-illustrations/emptystate__big-vault.svg';
 import Puzzle from '@assets/images/simple-illustrations/emptystate__puzzlepieces.svg';
@@ -280,6 +281,7 @@ export {
     Filters,
     MagnifyingGlassMoney,
     Rules,
+    RunningTurtle,
     CompanyCardsEmptyState,
     AmexCompanyCards,
     MasterCardCompanyCards,

src/components/Icon/Expensicons.ts

@@ -18,7 +18,9 @@ function ValidateCodeActionForm({
     sendValidateCode,
     hasMagicCodeBeenSent,
     isLoading,
+    submitButtonText,
     forwardedRef,
+    shouldSkipInitialValidation,
 }: ValidateCodeActionFormProps) {
     const themeStyles = useThemeStyles();
 
@@ -27,13 +29,15 @@ function ValidateCodeActionForm({
     const isUnmounted = useRef(false);
 
     useEffect(() => {
-        sendValidateCode();
+        if (!shouldSkipInitialValidation) {
+            sendValidateCode();
+        }
 
         return () => {
             isUnmounted.current = true;
         };
         // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
-    }, []);
+    }, [shouldSkipInitialValidation]);
 
     useEffect(() => {
         return () => {
@@ -59,6 +63,7 @@ function ValidateCodeActionForm({
                 buttonStyles={[themeStyles.justifyContentEnd, themeStyles.flex1]}
                 ref={forwardedRef}
                 hasMagicCodeBeenSent={hasMagicCodeBeenSent}
+                submitButtonText={submitButtonText}
             />
         </View>
     );

src/components/Icon/Illustrations.ts

@@ -1,13 +1,13 @@
-import type {ForwardedRef} from 'react';
+import type {ForwardedRef, ReactNode} from 'react';
 import type {ValidateCodeFormHandle} from '@components/ValidateCodeActionModal/ValidateCodeForm/BaseValidateCodeForm';
 import type {Errors, PendingAction} from '@src/types/onyx/OnyxCommon';
 
 type ValidateCodeActionFormProps = {
     /** Primary description of the modal */
-    descriptionPrimary: string;
+    descriptionPrimary: ReactNode;
 
     /** Secondary description of the modal */
-    descriptionSecondary?: string | null;
+    descriptionSecondary?: ReactNode;
 
     /** The pending action for submitting form */
     validatePendingAction?: PendingAction | null;
@@ -32,6 +32,12 @@ type ValidateCodeActionFormProps = {
 
     /** Ref for validate code form */
     forwardedRef: ForwardedRef<ValidateCodeFormHandle>;
+
+    /** Text for submit button */
+    submitButtonText?: string;
+
+    /** Skip the call to sendValidateCode fn on initial render */
+    shouldSkipInitialValidation?: boolean;
 };
 
 // eslint-disable-next-line import/prefer-default-export

src/components/ValidateCodeActionForm/index.tsx

@@ -67,6 +67,9 @@ type ValidateCodeFormProps = {
     /** Whether to show the verify button  */
     hideSubmitButton?: boolean;
 
+    /** Text for the verify button  */
+    submitButtonText?: string;
+
     /** Function is called when validate code modal is mounted and on magic code resend */
     sendValidateCode: () => void;
 
@@ -86,6 +89,7 @@ function BaseValidateCodeForm({
     sendValidateCode,
     buttonStyles,
     hideSubmitButton,
+    submitButtonText,
     isLoading,
 }: ValidateCodeFormProps) {
     const {translate} = useLocalize();
@@ -284,7 +288,7 @@ function BaseValidateCodeForm({
                 {!hideSubmitButton && (
                     <Button
                         isDisabled={isOffline}
-                        text={translate('common.verify')}
+                        text={submitButtonText ?? translate('common.verify')}
                         onPress={validateAndSubmitForm}
                         style={[styles.mt4]}
                         success