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

marcaaron · 2024-12-21T01:54:49Z

HELD on

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. danny@dannysdonuts.com).
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 dannysdonuts@gmail.com.
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 dannysdonuts@gmail.com into danny@dannysdonuts.com.”
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:

AccountDetailsPage
AccountValidatePage
MergeResult Page

Issue Owner

Current Issue Owner: @allroundexperts

The text was updated successfully, but these errors were encountered:

melvin-bot · 2024-12-21T01:55:02Z

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 · 2024-12-21T01:55:04Z

⚠️ 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 · 2024-12-21T01:55:12Z

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

mallenexpensify · 2024-12-30T21:56:14Z

@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 · 2025-01-01T21:34:20Z

Hi @mallenexpensify!

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

arosiclair · 2025-01-07T15:04:10Z

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 · 2025-01-08T21:41:35Z

@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 · 2025-01-08T22:43:06Z

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: allroundexperts+issue+54443@gmail.com

allroundexperts · 2025-01-08T22:50:23Z

@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 · 2025-01-09T15:15:36Z

Can you add: allroundexperts+issue+54443@gmail.com

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 · 2025-01-20T17:00:00Z

This is still held for now

arosiclair · 2025-01-29T15:05:30Z

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

arosiclair · 2025-02-05T00:30:21Z

@allroundexperts @parasharrajat

The new GetValidateCodeForAccountMerge and MergeWithValidateCode APIs are live so this is off hold!

There's a bit of a change with how we're going to handle errors. In some cases, we want to add links and markup to the error message (shown in the design doc mockups) which can't be done with the API response. So instead, we're setting an error code on account.getValidateCodeForAccountMerge.errors and account.mergeWithValidateCode.errors. The frontend should check the error code and show the correct error message with appropriate markup, etc.

Some error codes you should expect are the following:

GetValidateCodeForAccountMerge

401 Merge from account requires SAML
402 Requires email verification
403 Too many attempts
404 Account not found

MergeWithValidateCode

401 Not authorized - Invalid validateCode
401 Request rejected - too many bad attempts
401 Cannot merge accounts - 2FA enabled
401 Not authorized - domain under control
405 Cannot merge account under invoicing
405 Cannot merge SmartScanner account
413 Account locked

You should be able to find the error messages and mockups in the doc. Let me know if any of that is unclear.

parasharrajat · 2025-02-05T11:35:26Z

@allroundexperts Please let me know your next plan of action.

mallenexpensify · 2025-02-10T21:11:14Z

@allroundexperts I made you owner and bumped to Daily, if we're not waiting on you, please provide an update (I'm unsure but it looks like @arosiclair took this off hold and @parasharrajat is C+ here).

allroundexperts · 2025-02-11T22:21:53Z

This is waiting on me. I'll probably have a single PR that covers most of these issues before the weekend.

allroundexperts · 2025-02-16T22:24:42Z

Update: Draft PR is up. Filling in the final cracks, and will then open the PR for review.

melvin-bot · 2025-02-20T09:40:10Z

@arosiclair, @mallenexpensify, @parasharrajat, @allroundexperts Whoops! This issue is 2 days overdue. Let's get this updated quick!

allroundexperts · 2025-02-21T09:41:15Z

@parasharrajat Feel free to start the review of the draft PR. I just have to upload the screen recordings now.

allroundexperts · 2025-02-21T12:15:07Z

@Expensify/design Some of the screens that @arosiclair mentioned here seems to be missing in Figma and the doc. Can you please provide me with all the text for those as well? Thanks!

Missing screens:

402 Requires email verification
403 Too many attempts

401 Not authorized - Invalid validateCode
401 Not authorized - domain under control
413 Account locked

shawnborton · 2025-02-21T13:57:32Z

We normally don't provide copy for these sorts of things. @arosiclair can you work with marketing (or maybe specifically @jamesdeanexpensify) to get the copy you would need for these?

arosiclair · 2025-02-21T15:27:47Z

Let's reuse copy for 401 Not authorized - Invalid validateCode here.

I'll ask for copy in #marketing for these:

Error code	Reason
~~`402 Requires email verification`~~	~~They're trying to merge accounts on a SAML domain which is not allowed for now~~
`403 Too many attempts`	Throttled for too many attempts
`401 Not authorized - domain under control`	The mergeFrom account is under control of a different domain
`413 Account locked.`	The mergeFrom account is locked

jamesdeanexpensify · 2025-02-21T17:48:49Z

Chatted @arosiclair direct with some q's

arosiclair · 2025-02-21T18:19:29Z

Just noticed that there's actually a mockup for 402 Requires email verification as well. Let's use that one: https://docs.google.com/document/d/1QhfgsJ0w-KoWX7r3RYNSk25DICp4C8XIfrFmULZgEgk/edit?tab=t.0#bookmark=id.8jt3el6gm58c

jamesdeanexpensify · 2025-02-21T18:38:19Z

Do these sound good (and accurate)? For the 401, can we say which domain the mergeFrom account is controlled by?

403

Try again later
There were too many attempts to merge accounts. Please try again later.

401

Can't merge accounts
You can't merge [mergeFrom account] into other accounts because it's controlled by a different domain. Please [reach out to Concierge] for assistance.

413

Can't merge accounts
You can't merge [mergeFrom account] into other accounts because it's locked. Please [reach out to Concierge] for assistance.

allroundexperts · 2025-02-21T18:39:53Z

Just noticed that there's actually a mockup for 402 Requires email verification as well. Let's use that one: https://docs.google.com/document/d/1QhfgsJ0w-KoWX7r3RYNSk25DICp4C8XIfrFmULZgEgk/edit?tab=t.0#bookmark=id.8jt3el6gm58c

Hm... Is this related to email verification @arosiclair?

arosiclair · 2025-02-21T18:47:43Z

Do these sound good (and accurate)? For the 401, can we say which domain the mergeFrom account is controlled by?

These look good! For 401, the controlling domain would be the one in the email. So if the mergeFrom email is user@abc.com, then the controlled domain is just abc.com.

Hm... Is this related to email verification @arosiclair?

Yup, the context is in the doc. 402 Requires email verification is for merging accounts on a SAML domain which is only supported in Classic for now.

jamesdeanexpensify · 2025-02-21T18:53:32Z

OK, some mods here. Thoughts?

403

Try again later
There were too many attempts to merge accounts. Please try again later.

401

Can't merge accounts
You can't merge [mergeFrom account] because it's controlled by [mergeFrom domain]. Please [reach out to Concierge] for assistance.

413

Can't merge accounts
You can't merge [mergeFrom account] because it's locked. Please [reach out to Concierge] for assistance.

allroundexperts · 2025-02-21T19:06:18Z

@arosiclair I am a little confused about the various cases.

Are all the following cases valid? Or am I mixing up two of them?

You can't merge [mergeFrom account] because it's controlled by [mergeFrom domain]. Please [reach out to Concierge] for assistance.

allroundexperts · 2025-02-21T19:16:52Z

Also, What does 401 Merge from account requires SAML mean @arosiclair ? Seems like this is the same as 402 Requires email verification?

arosiclair · 2025-02-21T19:59:50Z

Are all the following cases valid? Or am I mixing up two of them?

All of those screens are error cases.

Also, What does 401 Merge from account requires SAML mean @arosiclair ? Seems like this is the same as 402 Requires email verification?

That one is this error case in the doc (I added the error code now).

allroundexperts · 2025-02-22T03:38:38Z

What case is the following @arosiclair?

https://github.com/user-attachments/assets/44861e78-e364-4402-b50b-66fb4e0790f1

marcaaron added the NewFeature Something to build that is a new item. label Dec 21, 2024

marcaaron assigned allroundexperts Dec 21, 2024

melvin-bot bot assigned mallenexpensify Dec 21, 2024

melvin-bot bot added the Weekly KSv2 label Dec 21, 2024

melvin-bot bot assigned shawnborton Dec 21, 2024

marcaaron added this to [#whatsnext] #retain Dec 21, 2024

marcaaron mentioned this issue Dec 21, 2024

Add Merge Account to NewExpensify #47073

Open

19 tasks

maddylewis moved this to Product (CRITICAL) in [#whatsnext] #retain Dec 23, 2024

shawnborton removed their assignment Dec 24, 2024

melvin-bot bot added the Overdue label Dec 30, 2024

melvin-bot bot removed the Overdue label Dec 30, 2024

arosiclair self-assigned this Jan 7, 2025

melvin-bot bot added the Overdue label Jan 20, 2025

arosiclair changed the title ~~[Merge Accounts] Add Menu Item, Route, and MergeAccountsPage Components~~ [HOLD][Merge Accounts] Add Menu Item, Route, and MergeAccountsPage Components Jan 20, 2025

melvin-bot bot removed the Overdue label Jan 20, 2025

melvin-bot bot added the Overdue label Jan 29, 2025

melvin-bot bot removed the Overdue label Jan 29, 2025

arosiclair changed the title ~~[HOLD][Merge Accounts] Add Menu Item, Route, and MergeAccountsPage Components~~ [Merge Accounts] Add Menu Item, Route, and MergeAccountsPage Components Feb 5, 2025

arosiclair assigned parasharrajat Feb 5, 2025

mallenexpensify added Daily KSv2 and removed Weekly KSv2 labels Feb 10, 2025

melvin-bot bot added the Overdue label Feb 10, 2025

melvin-bot bot removed the Overdue label Feb 11, 2025

melvin-bot bot added the Overdue label Feb 20, 2025

melvin-bot bot removed the Overdue label Feb 21, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

marcaaron commented Dec 21, 2024 •

edited by mallenexpensify

Loading

melvin-bot bot commented Dec 21, 2024

melvin-bot bot commented Dec 21, 2024

melvin-bot bot commented Dec 21, 2024

mallenexpensify commented Dec 30, 2024

allroundexperts commented Jan 1, 2025

arosiclair commented Jan 7, 2025

arosiclair commented Jan 8, 2025

allroundexperts commented Jan 8, 2025

allroundexperts commented Jan 8, 2025

arosiclair commented Jan 9, 2025

arosiclair commented Jan 20, 2025

arosiclair commented Jan 29, 2025

arosiclair commented Feb 5, 2025 •

edited

Loading

parasharrajat commented Feb 5, 2025

mallenexpensify commented Feb 10, 2025

allroundexperts commented Feb 11, 2025

allroundexperts commented Feb 16, 2025

melvin-bot bot commented Feb 20, 2025

allroundexperts commented Feb 21, 2025

allroundexperts commented Feb 21, 2025

shawnborton commented Feb 21, 2025

arosiclair commented Feb 21, 2025 •

edited

Loading

jamesdeanexpensify commented Feb 21, 2025

arosiclair commented Feb 21, 2025

jamesdeanexpensify commented Feb 21, 2025

allroundexperts commented Feb 21, 2025

arosiclair commented Feb 21, 2025

jamesdeanexpensify commented Feb 21, 2025

allroundexperts commented Feb 21, 2025

allroundexperts commented Feb 21, 2025 •

edited

Loading

arosiclair commented Feb 21, 2025

allroundexperts commented Feb 22, 2025 •

edited

Loading

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

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

Comments

marcaaron commented Dec 21, 2024 • edited by mallenexpensify Loading

Part of the Merge Accounts project

Feature Description

1. Update Text and Add Icon:

2. Add Translation Entry:

3. Create a New Route:

4. Add New Menu Item:

5. Create MergeAccountsPage Component:

6. Define Steps for the Flow:

7. Create MergeAccountsContext:

8. Create Subcomponents:

AccountDetailStep Component

AccountValidateStep Component

MergeSuccessStep Component

MergeFailureStep Component

Manual Test Steps

Automated Tests

melvin-bot bot commented Dec 21, 2024

melvin-bot bot commented Dec 21, 2024

melvin-bot bot commented Dec 21, 2024

mallenexpensify commented Dec 30, 2024

allroundexperts commented Jan 1, 2025

arosiclair commented Jan 7, 2025

arosiclair commented Jan 8, 2025

allroundexperts commented Jan 8, 2025

allroundexperts commented Jan 8, 2025

arosiclair commented Jan 9, 2025

arosiclair commented Jan 20, 2025

arosiclair commented Jan 29, 2025

arosiclair commented Feb 5, 2025 • edited Loading

parasharrajat commented Feb 5, 2025

mallenexpensify commented Feb 10, 2025

allroundexperts commented Feb 11, 2025

allroundexperts commented Feb 16, 2025

melvin-bot bot commented Feb 20, 2025

allroundexperts commented Feb 21, 2025

allroundexperts commented Feb 21, 2025

shawnborton commented Feb 21, 2025

arosiclair commented Feb 21, 2025 • edited Loading

jamesdeanexpensify commented Feb 21, 2025

arosiclair commented Feb 21, 2025

jamesdeanexpensify commented Feb 21, 2025

allroundexperts commented Feb 21, 2025

arosiclair commented Feb 21, 2025

jamesdeanexpensify commented Feb 21, 2025

allroundexperts commented Feb 21, 2025

allroundexperts commented Feb 21, 2025 • edited Loading

arosiclair commented Feb 21, 2025

allroundexperts commented Feb 22, 2025 • edited Loading

marcaaron commented Dec 21, 2024 •

edited by mallenexpensify

Loading

5. Create `MergeAccountsPage` Component:

7. Create `MergeAccountsContext`:

arosiclair commented Feb 5, 2025 •

edited

Loading

arosiclair commented Feb 21, 2025 •

edited

Loading

allroundexperts commented Feb 21, 2025 •

edited

Loading

allroundexperts commented Feb 22, 2025 •

edited

Loading