[Due for payment 2025-04-16] [Merge Accounts] Add Menu Item, Route, and MergeAccountsPage Components

[marcaaron]

• HELD on
  • https://github.com/Expensify/Expensify/issues/455378
  • https://github.com/Expensify/Expensify/issues/455380
  • https://github.com/Expensify/Expensify/issues/455382
  • https://github.com/Expensify/Expensify/issues/455383

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

Issue Owner

Current Issue Owner: @mallenexpensify / @isabelastisser

[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.

[allroundexperts]

Hi @mallenexpensify!

I am waiting for the backend changes to be completed so I can start integrating those.

[arosiclair]

Hey @allroundexperts I'm working on the backend and just created the beta here. Which account will you test with so I can add it to the beta?

[arosiclair]

@allroundexperts another question: I'm working on the API for GetValidateCodeForAccountMerge but it's not clear from our design doc what Onyx key we should update when responding with error messages (eg: the SAML required error). Did you talk about that at all with Marc already?

[allroundexperts]

Hey @allroundexperts I'm working on the backend and just created the beta here. Which account will you test with so I can add it to the beta?

Can you add: [email protected]

[allroundexperts]

@arosiclair If I remember correctly, we decided on saving the error in the account.mergeAccount.getValidateCodeForAccountMerge.errors onyx key.

    const failureData: OnyxUpdate[] = [
        {
            onyxMethod: Onyx.METHOD.MERGE,
            key: ONYXKEYS.ACCOUNT,
            value: {
                mergeAccount: {
                    email,
                    getValidateCodeForAccountMerge: {
                        isLoading: false,
                        validateCodeSent: false,
                        // Todo: This is a generic error message. Backend should replace it with a more specific error message.
                        errors: ErrorUtils.getMicroSecondOnyxErrorWithTranslationKey('mergeAccountsPage.requestValidationCodeForAccountMerge.genericError'),
                    },
                },
            },
        },
    ];

[arosiclair]

Can you add: [email protected]

Done 👍

@arosiclair If I remember correctly, we decided on saving the error in the account.mergeAccount.getValidateCodeForAccountMerge.errors onyx key.

Cool, that makes sense to me. I'll update the backend.

[arosiclair]

This is still held for now

[arosiclair]

Still held. We'll be able to start progress once #55677 is merged.

[melvin-bot]

Triggered auto assignment to @isabelastisser (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.

[mallenexpensify]

@isabelastisser I'm going to be OOO and offline for two weeks so I'm reassigning, will pick back up upon my return, thx

[melvin-bot]

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

[isabelastisser]

@allroundexperts to follow up on the comment above. thanks!

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.1.24-10 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Add merge account feature to ND #56911

If no regressions arise, payment will be issued on 2025-04-16. 🎊

For reference, here are some details about the assignees on this issue:

• @parasharrajat requires payment through NewDot Manual Requests
• @allroundexperts requires payment through NewDot Manual Requests

[melvin-bot]

BugZero Checklist: The PR adding this new feature has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@parasharrajat / @allroundexperts] Please propose regression test steps to ensure the new feature will work correctly on production in further releases.
• [@mallenexpensify / @isabelastisser] Link the GH issue for creating/updating the regression test once above steps have been agreed upon.

[mallenexpensify]

@isabelastisser thanks for keeping 👀 on, I unassigned ya.

@parasharrajat , @allroundexperts , I'm assuming you two are due $250 each and will post the payment comment tomorrow, let me know if that's not correct.

[allroundexperts]

No payment for me here. This is part of the merge account project which had a lump sum compensation agreed upon.

[melvin-bot]

Payment Summary

Upwork Job

• Reviewer: @parasharrajat owed $250 via NewDot
• Reviewer: @allroundexperts owed $250 via NewDot

BugZero Checklist (@mallenexpensify)

• I have verified the correct assignees and roles are listed above and updated the necessary manual offers
• I have verified that there are no duplicate or incorrect contracts on Upwork for this job (https://www.upwork.com/ab/applicants//hired)
• I have paid out the Upwork contracts or cancelled the ones that are incorrect
• I have verified the payment summary above is correct

[mallenexpensify]

@parasharrajat are you due payment?

[parasharrajat]

Nope, it will paid as part of project at the end.

[mallenexpensify]

Thx, closing