Add merge account feature to ND

[allroundexperts]

Explanation of Change

Implements merge account feature for NewDot

Fixed Issues

$ #54443
PROPOSAL: N/A

Tests

1. Open Account Settings -> Security -> Merge accounts.
2. Verify that various cases highlighted here work.

---

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

---

• Verify that no errors appear in the JS console

Offline tests

N/A

QA Steps

1. Open Account Settings -> Security -> Merge accounts.
2. Verify that various cases highlighted here work.

• Verify that no errors appear in the JS console

PR Author Checklist

• I linked the correct issue in the ### Fixed Issues section above
• I wrote clear testing steps that cover the changes made in this PR
  • I added steps for local testing in the Tests section
  • I added steps for the expected offline behavior in the Offline steps section
  • I added steps for Staging and/or Production testing in the QA steps section
  • I added steps to cover failure scenarios (i.e. verify an input displays the correct error message if the entered data is not correct)
  • I turned off my network connection and tested it while offline to ensure it matches the expected behavior (i.e. verify the default avatar icon is displayed if app is offline)
  • I tested this PR with a High Traffic account against the staging or production API to ensure there are no regressions (e.g. long loading states that impact usability).
• I included screenshots or videos for tests on all platforms
• I ran the tests on all platforms & verified they passed on:
  • Android: Native
  • Android: mWeb Chrome
  • iOS: Native
  • iOS: mWeb Safari
  • MacOS: Chrome / Safari
  • MacOS: Desktop
• I verified there are no console errors (if there's a console error not related to the PR, report it or open an issue for it to be fixed)
• I followed proper code patterns (see Reviewing the code)
  • I verified that any callback methods that were added or modified are named for what the method does and never what callback they handle (i.e. toggleReport and not onIconClick)
  • I verified that comments were added to code that is not self explanatory
  • I verified that any new or modified comments were clear, correct English, and explained "why" the code was doing something instead of only explaining "what" the code was doing.
  • I verified any copy / text shown in the product is localized by adding it to src/languages/* files and using the translation method
    • If any non-english text was added/modified, I used JaimeGPT to get English > Spanish translation. I then posted it in #expensify-open-source and it was approved by an internal Expensify engineer. Link to Slack message:
  • I verified all numbers, amounts, dates and phone numbers shown in the product are using the localization methods
  • I verified any copy / text that was added to the app is grammatically correct in English. It adheres to proper capitalization guidelines (note: only the first word of header/labels should be capitalized), and is either coming verbatim from figma or has been approved by marketing (in order to get marketing approval, ask the Bug Zero team member to add the Waiting for copy label to the issue)
  • I verified proper file naming conventions were followed for any new files or renamed files. All non-platform specific files are named after what they export and are not named "index.js". All platform-specific files are named for the platform the code supports as outlined in the README.
  • I verified the JSDocs style guidelines (in STYLE.md) were followed
• If a new code pattern is added I verified it was agreed to be used by multiple Expensify engineers
• I followed the guidelines as stated in the Review Guidelines
• I tested other components that can be impacted by my changes (i.e. if the PR modifies a shared library or component like Avatar, I verified the components using Avatar are working as expected)
• I verified all code is DRY (the PR doesn't include any logic written more than once, with the exception of tests)
• I verified any variables that can be defined as constants (ie. in CONST.ts or at the top of the file that uses the constant) are defined as such
• I verified that if a function's arguments changed that all usages have also been updated correctly
• If any new file was added I verified that:
  • The file has a description of what it does and/or why is needed at the top of the file if the code is not self explanatory
• If a new CSS style is added I verified that:
  • A similar style doesn't already exist
  • The style can't be created with an existing StyleUtils function (i.e. StyleUtils.getBackgroundAndBorderStyle(theme.componentBG))
• If the PR modifies code that runs when editing or sending messages, I tested and verified there is no unexpected behavior for all supported markdown - URLs, single line code, code blocks, quotes, headings, bold, strikethrough, and italic.
• If the PR modifies a generic component, I tested and verified that those changes do not break usages of that component in the rest of the App (i.e. if a shared library or component like Avatar is modified, I verified that Avatar is working as expected in all cases)
• If the PR modifies a component related to any of the existing Storybook stories, I tested and verified all stories for that component are still working as expected.
• If the PR modifies a component or page that can be accessed by a direct deeplink, I verified that the code functions as expected when the deeplink is used - from a logged in and logged out account.
• If the PR modifies the UI (e.g. new buttons, new UI components, changing the padding/spacing/sizing, moving components, etc) or modifies the form input styles:
  • I verified that all the inputs inside a form are aligned with each other.
  • I added Design label and/or tagged @Expensify/design so the design team can review the changes.
• If a new page is added, I verified it's using the ScrollView component to make it scrollable when more elements are added to the page.
• I added unit tests for any new feature or bug fix in this PR to help automatically prevent regressions in this user flow.
• If the main branch was merged into this PR after a review, I tested again and verified the outcome was still expected according to the Test steps.

Screenshots/Videos

Android: Native

Android: mWeb Chrome

Screen.Recording.2025-03-07.at.10.35.26.PM.mov

iOS: Native

Screen.Recording.2025-03-07.at.10.25.59.PM.mov

iOS: mWeb Safari

Screen.Recording.2025-03-07.at.9.42.39.PM.mov

MacOS: Chrome / Safari

Screen.Recording.2025-02-24.at.1.08.56.PM.mov

Screen.Recording.2025-03-07.at.9.13.47.PM.mov

MacOS: Desktop

Screen.Recording.2025-02-24.at.12.49.16.PM.mov

[melvin-bot]

@parasharrajat Please copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button]

[shawnborton]

Let us know when there are screenshots to review!

[parasharrajat]

Under review.

[allroundexperts]

Let us know when there are screenshots to review!

@shawnborton Added recordings for web and desktop. I'm having trouble building on native devices, but these should help you get started.

[shawnborton]

Looking good so far. Do you have an example of a successful account merge so we can see that flow?

Q for the @Expensify/design team - do we want to use our textSupporting color for the text below the heading here? I think we do?

[allroundexperts]

I agree, I don't see why we would stray away from what has already been agreed upon in the design doc.

@shawnborton This is not impacting the functionality / design in any way. It's purely a code thing. Can we not re-visit the implementation details inside the design doc if a more simpler approach is found while in the implementation stage? When writing the implementation details in the doc, things are a little abstract, and new things usually do come up when writing the actual code.

I think its a good idea to open a discussion about it, but if we want to stick to using context, I can refactor.

[allroundexperts]

There are very common issues poping up @allroundexperts. Have you tested this?

Please highlight those as they come up. I need your help here 😄

[parasharrajat]

I would say no. In terms of the design doc, there is a systematic process and we should follow that. If you need a change in design, that should be done earlier in state.

Code changes are always welcome in any stage but whole architecture change is not the way. We should get this confirmed before implementation or in the early days of implementation.

[parasharrajat]

Let's start with following steps which will help us all.

1. Add merge account feature to ND #56911 (comment)
2. Translation confirmation on slack.
3. Design change approval.
4. then bugs....

[allroundexperts]

Translation confirmation on slack.

We already have these confirmed on the design doc. Do we need it on slack as well?

[parasharrajat]

I think the doc used the JaimeGPT to get these which needs to be further approved on slack with a user. It's not very clear. So, on a safer note, getting slack approval will be good.

[parasharrajat]

BUG: Merge account validate code page does not align with design.

[allroundexperts]

Update regarding #56911 (comment)

1. ✅
2. https://expensify.slack.com/archives/C01GTK53T8Q/p1741356849184569
3. 🔜
4. ✅

[parasharrajat]

Now there are few unnecessary file refactoring changes on the PR. Let's revert those as well. Because of these only, I requested to do that in new PR.

[allroundexperts]

Now there are few unnecessary file refactoring changes on the PR. Let's revert those as well. Because of these only, I requested to do that in new PR.

Can you please point those?

[allroundexperts]

I think I did those changes because the linter wasn't happy.

[melvin-bot]

Hey! I see that you made changes to our Form component. Make sure to update the docs in FORMS.md accordingly. Cheers!

[allroundexperts]

@expensify/design I have added screenshots for all platforms. I am unable to build android native, but for rest of the platforms, the screenshots should be there. Let me know if you need any other thing.

[parasharrajat]

As not everyone has design doc access. Can you please add those steps here?

[allroundexperts]

As not everyone has design doc access. Can you please add those steps here?

What steps are you referring to @parasharrajat?

[parasharrajat]

Sorry, I mean test steps. Thanks for doing that.

[allroundexperts]

Sorry, I mean test steps. Thanks for doing that.

Added those!

[parasharrajat]

@allroundexperts Have you created a design change proposal?