[Merge Accounts] Add Menu Item, Route, and MergeAccountsPage Components

[marcaaron]

Part of the Merge Accounts project

Main issue: #47073
Doc section: https://docs.google.com/document/d/1QhfgsJ0w-KoWX7r3RYNSk25DICp4C8XIfrFmULZgEgk/edit?tab=t.0#bookmark=id.bkjxhsrclw01
Project: #47073

Feature Description

Steps to Complete:

1. Update Text and Add Icon:

• Change text to:
  "Keep your account even safer with two-factor authentication and other security features."
• Add a new icon arrow-collapse.svg to the assets/images folder with the provided SVG content.

2. Add Translation Entry:

• Add the following entry to translations:

  mergeAccountsPage: {
      mergeAccount: 'Merge accounts',
  },

3. Create a New Route:

• Add the following to the SCREENS file:

  MERGE_ACCOUNTS: 'Settings_Merge_Accounts',

• Add to the ROUTES file:

  SETTINGS_MERGE_ACCOUNTS: 'settings/security/mergeAccounts',

• Add the linking config:

  [SCREENS.SETTINGS.MERGE_ACCOUNTS]: {
      path: ROUTES.SETTINGS_MERGE_ACCOUNTS,
      exact: true,
  },

4. Add New Menu Item:

• Add the "Merge accounts" option in the menu with:

  {
      translationKey: 'mergeAccountsPage.mergeAccount',
      icon: Expensicons.ArrowCollapse,
      action: waitForNavigate(() => Navigation.navigate(ROUTES.SETTINGS_MERGE_ACCOUNTS)),
  },

5. Create MergeAccountsPage Component:

• Create a new component: pages/settings/Security/MergeAccountsPage.
• Link it to the route by adding the following:

  [SCREENS.SETTINGS.MERGE_ACCOUNTS]: () => require<ReactComponentModule>('../../../../pages/settings/Security/MergeAccountsPage').default,

6. Define Steps for the Flow:

• Add the following steps in the CONST.ts file:

  MERGE_ACCOUNT_STEPS: {
      ACCOUNT_DETAILS: 'ACCOUNT_DETAILS',
      ACCOUNT_VALIDATION: 'ACCOUNT_VALIDATION',
      MERGE_SUCCESS: 'MERGE_SUCCESS',
      MERGE_FAILURE: 'MERGE_FAILURE',
  },

7. Create MergeAccountsContext:

• Implement MergeAccountsContext to manage the state of the merge flow with properties:
  • currentStep
  • accountToMerge
  • result
• Use useContext, useCallback, and useMemo for state and step transitions.

8. Create Subcomponents:

AccountDetailStep Component

• Create a form for entering the account to merge, with a checkbox for confirmation.
• Validate input and proceed to the ACCOUNT_VALIDATION step.

AccountValidateStep Component

• Include a magic code validator form.
• Make the API call to validate the merge and navigate to either MERGE_SUCCESS or MERGE_FAILURE.

MergeSuccessStep Component

• Wrap around ConfirmationPage to display a success message.

MergeFailureStep Component

• Wrap around ConfirmationPage with appropriate failure messages and illustrations.

Manual Test Steps

Offline Account Merge
Action To Take: Log into the test account and navigate to Security in the left-hand menu.
Action to Take: Go offline
Action To Take: Click on Merge accounts.
Verify: A full page offline screen displays since we cannot take this action while offline.

Successful Account Merge
Action To Take: Log into the test account and navigate to Security in the left-hand menu.
Verify: The Security page displays options:
Two-factor authentication
Merge accounts
Close account
Action To Take: Click on Merge accounts.
Verify:
A screen appears showing the target account email (e.g. [email protected]).
The input field for “Email or phone” is visible.
The checkbox "I understand this is not reversible" is present.
Action To Take: Enter a valid email into the input field.
Verify: No error message.
Action To Take: Check the "I understand this is not reversible" checkbox.
Action To Take: Click on the Next button.
Verify: The screen transitions to the Magic Code Input step.
Action To Take: Enter the magic code sent to [email protected].
Verify:
A message displays confirming that a magic code was sent to the correct email address.
The input field for the magic code is visible.
Action To Take: Input the correct 6-digit magic code.
Verify: The “Merge accounts” button can be tapped.
Action To Take: Click the Merge accounts button.
Verify: The screen transitions to the Accounts Merged Confirmation page.
Action To Take: Review the confirmation message.
Verify:
The message confirms: “You've successfully merged all data from [email protected] into [email protected].”
The Got it button is displayed.
Action To Take: Click the Got it button.
Verify: User is redirected back to the Security page.

Account merge blocked due to trying to merge an account with SAML into a personal account
Prerequisite: Set up a new private domain with domain control and require SAML. Create a new domain member email to use for this test.

Action to Take: Sign into New Expensify with a public domain account.
Action to Take: Attempt to merge the SAML domain member account into the public domain account.
Action to Take: Check the “I understand this is not reversible” checkbox.
Action to Take: Tap the “Next” button
Verify: The “Can’t merge accounts” screen appears and explains why the action cannot be taken i.e. “because your domain admin has set it as your primary login”.

Account merge for users on domain with SAML enabled and required
Prerequisite: Set up a new private domain with domain control and require SAML. Create two new domain member emails to use for this test.

Action to Take: Sign into New Expensify with a SAML required domain controlled email account.
Action to Take: Attempt to merge a domain email account on that same domain into the SAML required account.
Action to Take: Check the “I understand this is not reversible” checkbox.
Action to Take: Tap the “Next” button
Verify: The “We’re working on it” screen appears and explains why the action cannot be taken.
Action to Take: Tap “Go to Expensify Classic”
Verify: We are brought to Expensify Classic and land in the “Settings > Account details” section.
Action to Take: Tap the “Got it” button in New Expensify
Verify: We are brought back to the “Security” screen.

Merge Failure: 2FA is enabled on the oldAccount
Prerequisite: Create two accounts. One with 2FA enabled and one without.

Action to Take: Sign into the account which does not have 2FA enabled.
Action to Take: Attempt to merge the account which does have 2FA enabled into the account that does not have 2FA enabled.
Verify: The screen to enter the magic code appears and a magic code is sent.
Action to Take: Enter the 6-digit magic code.
Verify: “Can’t merge accounts” screen appears. With a message to “disable 2FA for [email] and try again”.

Merge Failure: User is trying to merge an uncreated account
Prerequisite: Create one account with no domain control or 2FA.

Action to Take: Sign into the created validated account in NewDot.
Action to Take: Attempt to merge an account that does not yet exist into an account that does exist.
Verify: “Can’t merge accounts” screen appears. With a message: “[email] doesn’t have an Expensify account”.

Merge Failure: SmartScanner account
Prerequisite: Create one account with no domain control or 2FA.

Action to Take: Sign into the created validated account in NewDot.
Action to Take: Attempt to merge an account that is one of our SmartScan vendor domains.
Verify: “Can’t merge accounts” screen appears. With a message: “You can’t merge [email] into other accounts”.

Merge Failure: Invoiced Billing account
Prerequisite: Create one account with no domain control or 2FA. Create another account with a policy set up for invoiced billing.

Action to Take: Sign into the created validated account in NewDot.
Action to Take: Attempt to merge an account that has invoiced billing.
Verify: “Can’t merge accounts” screen appears. With a message: “You can’t merge [email] into other accounts because it’s the billing owner of an invoiced account”.

Automated Tests

We'll be creating the unit tests for the following frontend components:

1. AccountDetailsPage
2. AccountValidatePage
3. MergeResult Page

[melvin-bot]

Triggered auto assignment to @mallenexpensify (NewFeature), see https://stackoverflowteams.com/c/expensify/questions/14418#:~:text=BugZero%20process%20steps%20for%20feature%20requests for more details. Please add this Feature request to a GH project, as outlined in the SO.

[melvin-bot]

⚠️ It looks like this issue is labelled as a New Feature but not tied to any GitHub Project. Keep in mind that all new features should be tied to GitHub Projects in order to properly track external CAP software time ⚠️

[melvin-bot]

Triggered auto assignment to Design team member for new feature review - @shawnborton (NewFeature)

[mallenexpensify]

@allroundexperts can you provide an update here, since you're assigned? I see you're assigned to Add Merge Account to NewExpensify too. Mainly wanting to know what next steps are, I haven't followed the tracking issue.