[HOLD for payment 2023-05-22] [$1000] Infinite loading when returning back from Plaid if user hits CTRL+SHIFT+K before the Plaid page opens up

[kavimuru]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Action Performed:

1. Go to web chrome
2. Go to Payments
3. Click on Add payment method
4. (Very important Step) Click on Bank account and immediately click on CTRL+SHIFT+K key to open up the new group page (The shortcut keys should be pressed before the Plaid URL bank account page opens up )
5. Now click on exit
6. Notice that there is infinite loading on the right side menu

Expected Result:

There should not be infinite loading on returning back from Plaid URL if user hits CTRL+SHIFT+K key before the plaid URL opens up

Actual Result:

There is infinite loading on the right hand side menu

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android / native
• Android / Chrome
• iOS / native
• iOS / Safari
• MacOS / Chrome / Safari
• MacOS / Desktop

Version Number: 1.3.1
Reproducible in staging?: y
Reproducible in production?: y
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation

error-2023-04-17_19.50.34.mp4

Recording.267.mp4

Expensify/Expensify Issue URL:
Issue reported by: @priya-zha
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1681740790785869

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01bb5f680944cd2fd8
• Upwork Job ID: 1648640859123245056
• Last Price Increase: 2023-05-03

[MelvinBot]

Triggered auto assignment to @laurenreidexpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[MelvinBot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[MelvinBot]

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

[MelvinBot]

Current assignee @laurenreidexpensify is eligible for the External assigner, not assigning anyone new.

[MelvinBot]

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

[MelvinBot]

Triggered auto assignment to @aldo-expensify (External), see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[huzaifa-99]

Proposal

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

We are trying to solve the broken infinite loader when coming back from plaid if user had pressed CTRL+SHIFT+K before the plaid page is opened

What is the root cause of that problem?

In the AddPersonalBankAccountPage, onExitPlaid will navigate to the last screen.

1. In normal secnario, /settings/payments is the last screen before going to /settings/payments/add-bank-account, so when onExitPlaid is triggered, we are redirected to the previous page which is settings/payments.
2. When we press CTRL+SHIFT+K, /new/group is added to navigation, so the stack now looks like this

TOP -> /new/group
2nd -> /settings/payments/add-bank-account
3rd -> /settings/payments

and we come back from the plaid page we trigger the onExitPlaid callback, this will remove the /new/group from navigation and will redirect us to /settings/payments/add-bank-account when it should redirect us back to /settings/payments

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

I think we should not mix workflows here as creating a new group and adding a bank/plaid account are 2 separate workflows, instead we should block one of these. I would suggest to implement an option from the following

1. We should block the CTRL+SHIFT+K shortcut when user visits the /settings/payments/add-bank-account page by subscribing to the keyboard shortcuts lib and prevent the group shortcuts keys event from bubbling to stop the /new/group (group chat modal) from opening by subscribing to KEYBOARD_SHORTCUTS.NEW_GROUP in the componentDidMount before this line

const groupShortcutConfig = CONST.KEYBOARD_SHORTCUTS.NEW_GROUP;
this.unsubscribeGroupShortcut = KeyboardShortcut.subscribe(
    groupShortcutConfig.shortcutKey, 
    () => {}, // do nothing
    groupShortcutConfig.descriptionKey, 
    groupShortcutConfig.modifiers, 
    true, // captureOnInputs
    false, // shouldBubble
    0, // priority (0=high)
    true // shouldPreventDefault (could be false as well)
);

2. Or we should stop the plaid account creation by triggering onExitPlaid when user presses CTRL+SHIFT+K shortcut and allow the user to create the group chat by subscribing to KEYBOARD_SHORTCUTS.NEW_GROUP in the componentDidMount before this line

const groupShortcutConfig = CONST.KEYBOARD_SHORTCUTS.NEW_GROUP;
this.unsubscribeGroupShortcut = KeyboardShortcut.subscribe(
    groupShortcutConfig.shortcutKey, 
    this.props.onExitPlaid, // call the exit plaid cb
    groupShortcutConfig.descriptionKey, 
    groupShortcutConfig.modifiers, 
    true, // captureOnInputs
    true, // shouldBubble
    0, // priority (0=high)
    false // shouldPreventDefault
);

With both the options above we should unsubscribe to the group shortcut when the component unmounts

componentWillUnmount() {
    if (this.unsubscribeGroupShortcut) {
        this.unsubscribeGroupShortcut();
    }
}

What alternative solutions did you explore? (Optional)

We could allow the user to use both the shortcut key and be able to use plaid, but I think it as mixing cross cutting concerns/workflows. To implement this we need change the order of navigation i.e put /new/group before /settings/payments/add-bank-account, so the navigation stack becomes

TOP -> /settings/payments/add-bank-account
2nd -> /new/group
3rd -> /settings/payments

now when the user will be navigated back from plaid he will see the /new/group page