[Due for payment 2025-05-27] Update onboarding page with new integration choices and redirection logic

[chiragsalian]

Part of the New Dot Onboarding for 1-50 Companies project

Main issue: https://github.com/Expensify/Expensify/issues/476894
Doc section: https://docs.google.com/document/d/1l1DytMDjRvEwJ7saOiZ3RZ4XjhPmR1kzOz90R0GmHVU/edit?tab=t.0#bookmark=id.b28s4buduv7a
Project: https://github.com/orgs/Expensify/projects/193/views/1

On HOLD till this is live - https://github.com/Expensify/Expensify/issues/490394. This can be worked on but can be merged only once the linked issue is done and its code is live.

Problem / Solution 1

1. We want to add more integration choices to our onboarding accounting page.
   

2. The integration choices we want to add areSAP, Oracle, Microsoft Dynamics, Sage, and Other
   

Problem / Solution 2

We want the styling to match this design

Problem / Solution 3

1. We want to update the routing logic to account for these integrations
2. At the time of this doc, the logic for routing chats occurs only by checking companySize here. If the size is micro we navigate to another screen, else we route to oldDot here.
3. At the time of coding that logic linked in the previous point will be in BaseOnboardingAccounting. The only change we’ve to make is to add more conditions i.e., if the - size is (micro or small) AND integration is (qbo or qbd or xero or netsuite or Other or None), then stay in newDot, else call openOldDotLink to redirect to oldDot.

Note: i need to check if spanish translations are needed and to provide them.

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021911172188543432771
• Upwork Job ID: 1911172188543432771
• Last Price Increase: 2025-04-12
• Automatic offers:
• abzokhattab | Contributor | 106935135

Issue Owner

Current Issue Owner: @

Issue Owner

Current Issue Owner: @sakluger / @miljakljajic

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~021911172188543432771

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @Ollyws (External)

[melvin-bot]

Triggered auto assignment to @sakluger (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 - @dannymcclain (NewFeature)

[abzokhattab]

🚨 Edited by proposal-police: This proposal was edited at 2025-04-12 21:47:14 UTC.

Proposal

Please re-state the problem that we are trying to solve in this issue.

Update onboarding page with new integration choices and redirection logic

What is the root cause of that problem?

We need to:

1. Show seven new/existing accounting integrations on the onboarding accounting page (QBO, QBD, Xero, Netsuite, SAP, Oracle, Microsoft Dynamics, Sage, and “Other” or “None”).
2. Update the styling to match a newly provided design.
3. Update routing logic so that if the user’s company size is micro or small and the selected integration is in the set (QBO, QBD, Xero, Netsuite, Other, or None), we stay in newDot. Otherwise, we redirect to oldDot.

What changes do you think we should make in order to solve the problem?

2. Add Additional Integration Options

• Extend the array of accounting integrations and here to include SAP, Oracle, Microsoft Dynamics, Sage, and “Other”.

      case CONST.POLICY.CONNECTIONS.NAME.SAP: {
                        text = translate('workspace.accounting.sap');
                        accountingIcon = Expensicons.SAPSquare;
                        break;
                    }
                    case CONST.POLICY.CONNECTIONS.NAME.ORACLE: {
                        text = translate('workspace.accounting.oracle');
                        accountingIcon = Expensicons.OracleSquare;
                        break;
                    }
                    case CONST.POLICY.CONNECTIONS.NAME.MS_DYNAMICS: {
                        text = translate('workspace.accounting.msDynamics');
                        accountingIcon = Expensicons.MicrosoftDynamicsSquare;
                        break;
                    }
                    case CONST.POLICY.CONNECTIONS.NAME.SAGE: {
                        text = translate('workspace.accounting.sage');
                        accountingIcon = Expensicons.SageSquare;
                        break;
                    }
                    case CONST.POLICY.CONNECTIONS.NAME.OTHER: {
                        text = translate('workspace.accounting.other');
                        accountingIcon = Expensicons.QuestionCircle;
                        break;
                    }

also we need to add the new connections translation here

• Update the display icons and text for each as needed.

4. Apply New Styles

• Update icons, text, and container layout to match the new design references (font sizes, margins, headings, etc.).
  pass the current step here and if its accounting the modal width should be wider and change the container direction to row and make the item width half the modal width to add two elements in one row in case of web/desktop here

6. Expand Routing Logic

• In continue button here , add conditions that check if the company size is micro or small and the integration choice is one of (QBO, QBD, Xero, Netsuite, Other, or None). If so, remain in newDot; else call openOldDotLink to send the user to oldDot.

       const shouldStayInNewDot = (
(onboardingCompanySize === ONBOARDING_COMPANY_SIZE.MICRO || onboardingCompanySize === ONBOARDING_COMPANY_SIZE.SMALL) && [
                        CONST.POLICY.CONNECTIONS.NAME.QBO,
                        CONST.POLICY.CONNECTIONS.NAME.QBD,
                        CONST.POLICY.CONNECTIONS.NAME.XERO,
                        CONST.POLICY.CONNECTIONS.NAME.NETSUITE,
                        CONST.POLICY.CONNECTIONS.NAME.OTHER,
                        null, // "None"
                    ].includes(userReportedIntegration));

                    if (!shouldStayInNewDot ) {
                        openOldDotLink(CONST.OLDDOT_URLS.INBOX, true);
                        return;
                    }
}

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

NA

What alternative solutions did you explore? (Optional)

NA

[dannymcclain]

Swapping for Jon since he designed this—Jon feel free to toss back to me if you want, just want you to get that GitCoin credit lol

[dubielzyk-expensify]

Thanks Danny ❤️ Happy to take this one

[chiragsalian]

Friendly bump @Ollyws for initial contributor review. The priority on this issue is a bit urgent.

[Ollyws]

@abzokhattab's proposal LGTM.
🎀👀🎀 C+ reviewed

[melvin-bot]

Current assignee @chiragsalian is eligible for the choreEngineerContributorManagement assigner, not assigning anyone new.

[chiragsalian]

Proposal LGTM, just one minor thing that i had to confirm internally. "Sage Intaact" already exists in the design and thats good, so we don't want to update/add "Sage" as an option.
Feel free to create the PR @abzokhattab. Also a head up, please place your PR on HOLD so we don't forget, the PR should only be merged once we've got the backend for https://github.com/Expensify/Expensify/issues/490394 live.

[sakluger]

Hey @abzokhattab, what's the latest? And just to confirm, is this the PR: #60505?

[melvin-bot]

Triggered auto assignment to @miljakljajic (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[sakluger]

I will be OOO from May 5 - 16, so I have added another BZ member to watch over the issue while I'm out.

[abzokhattab]

Hey @abzokhattab, what's the latest? And just to confirm, is this the PR: #60505?

Correct, we are still working on it

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

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

[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.46-12 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Update onboarding page with new integration choices #60505

If no regressions arise, payment will be issued on 2025-05-27. 🎊

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

• @Ollyws requires payment through NewDot Manual Requests
• @abzokhattab requires payment automatic offer (Contributor)

[melvin-bot]

@Ollyws @sakluger / @miljakljajic @Ollyws The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed. Please copy/paste the BugZero Checklist from here into a new comment on this GH and complete it. If you have the K2 extension, you can simply click: [this button]