Skip to content

feat: Show page to link existing account when attempting to pay#71659

Merged
srikarparsi merged 48 commits intoExpensify:mainfrom
callstack-internal:feat/65912-reapply-followup
Dec 11, 2025
Merged

feat: Show page to link existing account when attempting to pay#71659
srikarparsi merged 48 commits intoExpensify:mainfrom
callstack-internal:feat/65912-reapply-followup

Conversation

@MrMuzyk
Copy link
Copy Markdown
Contributor

@MrMuzyk MrMuzyk commented Oct 1, 2025

Explanation of Change

  • Updated routing in order to show page to link existing bank account in RHP without redirecting user to workflows
  • Show page to link existing bank account when user tries to pay expense on workspace that doesnt have connected bank account but has existing accounts that could be connected

Fixed Issues

$ #65912

PROPOSAL:

Tests

Same as QA steps

  • Verify that no errors appear in the JS console

Offline tests

QA Steps

Scenario A:

Precondition:

  • User has a workspace connected to business bank account.
  1. Create brand new workspace that has the uses the same currency as business bank account connected to different workspace on this account
  2. Create an expense for new workspace
  3. Try to pay for this expense by clicking on Pay -> Pay with business account
  4. Page showing already existing linked accounts should be displayed

Scenario B:

Precondition:

  • User has a workspace connected to business bank account.
  • User has added a personal bank account.
  1. Create a new USD workspace.
  2. Go to workspace chat.
  3. Create an expense in workspace chat.
  4. Click Submit and Approve.
  5. Click Pay button.
  6. Click Pay with business account.
  7. Personal bank account should not appear in the list.

Scenario C:

  1. Sign in to ND with a new account, validate the account
  2. Create a workspace
  3. Submit an expense in the workspace chat and approve it
  4. Click the "Pay" button, then "Mark as paid"
  5. Expense gets marked as paid correctly

Scenario D:

Precondition:

  • User has a workspace connected to business bank account.
  1. Create a new USD workspace.
  2. Go to workspace chat.
  3. Create an expense in workspace chat.
  4. Click Submit and Approve.
  5. Click Pay button.
  6. Click Pay with business account.
  7. → Existing connected bank account list opens.
  8. Close the RHP.
  9. Go to Reports > Expenses.
  10. Click Pay button.
  11. Click Pay with business account.
  12. Page showing already existing linked accounts should be displayed

Scenario E:

  1. Create a worskspace
  2. Go to the workspace > Workflows > Add bank account
  3. Complete the flow adding a Wells Fargo bank account
  4. Go to Workspaces. Create a new workspace with USD currency (same currency as the first workspace)
  5. Go to the new workspace chat > Create a manual expense > Submit > Approve > Pay > Pay with business bank account
  6. The bank account added in the first workspace should be displayed as an option to connect existing bank account

Scenario F:

  1. Create a new workspace on an account with an existing bank account.
  2. Submit an expense and try to pay it.
  3. Begin adding a new bank account.
  4. Back out of the flow before completing.
  5. Go to workflows page, notice you see partially setup account linked to the workspace (this is correct)
  6. Go back to report, notice you don't see split pay button (this is correct).
  7. Tap pay.
  8. Tap pay with business account.
  9. You should be prompted to continue with partially setup account, because it's linked to the workspace at this point.

Scenario G:

  1. Login to an account with a partially setup bank account.
  2. Create a new workspace.
  3. Submit an expense and try to pay it.
  4. Select the partially setup account on the connect existing account modal.
  5. We link the partially setup account to the workspace, allowing user to continue setting up the account there. User should remain on the same view though because it is possible to continue setting the account up from the report view.

Scenario H:

Precondition: User has no connected or partially connected GBP accounts

  1. Create a GBP workspace.
  2. Submit a report on it.
  3. Try to pay the report and select business account.
  4. RHP opens and user is asked to connect bank account

Scenario I:

  1. Sign into a new account.
  2. Create a workspace and add a business bank account.
  3. Delete the workspace.
  4. Create a new workspace.
  5. Submit a report and approve it.
  6. Pay the report and select the bank account.
  7. Verify you now see the split pay button with the bank account listed in the main portion of the button.
  8. Go to Workflows and disconnect the bank account.
  9. Go back to the report.
  10. You should no longer see the split pay button or the bank account listed in the pay button because it was removed.
  • 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 verified there are no new alerts related to the canBeMissing param for useOnyx
  • 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 new assets were added or existing ones were modified, I verified that:
    • The assets are optimized and compressed (for SVG files, run npm run compress-svg)
    • The assets load correctly across all supported platforms.
  • 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.native.mp4
Android: mWeb Chrome
android.web.mp4
iOS: Native
ios.native.mp4
iOS: mWeb Safari
ios.web.mp4
MacOS: Chrome / Safari
web.mp4
MacOS: Desktop
desktop.mp4

@codecov
Copy link
Copy Markdown

codecov bot commented Oct 1, 2025

Codecov Report

✅ Changes either increased or maintained existing code coverage, great job!

Files with missing lines Coverage Δ
src/SCREENS.ts 100.00% <ø> (ø)
src/libs/API/types.ts 100.00% <ø> (ø)
...gation/linkingConfig/RELATIONS/WORKSPACE_TO_RHP.ts 100.00% <ø> (ø)
src/libs/Navigation/linkingConfig/config.ts 75.00% <ø> (ø)
src/libs/actions/Report.ts 54.16% <ø> (ø)
src/libs/actions/Search.ts 21.77% <100.00%> (ø)
...ges/ReimbursementAccount/USD/BankInfo/BankInfo.tsx 0.00% <ø> (ø)
.../pages/workspace/WorkspaceOverviewCurrencyPage.tsx 0.00% <ø> (ø)
...pages/workspace/WorkspaceResetBankAccountModal.tsx 0.00% <ø> (ø)
.../workspace/invoices/WorkspaceInvoiceVBASection.tsx 0.00% <ø> (ø)
... and 13 more
... and 6 files with indirect coverage changes

@srikarparsi
Copy link
Copy Markdown
Contributor

Hey @MrMuzyk, just wanted to flag this comment which brought up this issue with the previous PR

@MrMuzyk
Copy link
Copy Markdown
Contributor Author

MrMuzyk commented Oct 6, 2025

@srikarparsi Thanks for letting me know, I haven't seen this one. I'll repro steps as one of the testing scenarios to be sure this won't happen again :)

@MrMuzyk MrMuzyk marked this pull request as ready for review October 23, 2025 12:05
@MrMuzyk MrMuzyk requested a review from a team as a code owner October 23, 2025 12:05
@melvin-bot melvin-bot bot requested review from dominictb and removed request for a team October 23, 2025 12:05
@melvin-bot
Copy link
Copy Markdown

melvin-bot bot commented Oct 23, 2025

@dominictb 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]

@github-actions
Copy link
Copy Markdown
Contributor

🚧 @joekaufmanexpensify has triggered a test Expensify/App build. You can view the workflow run here.

@github-actions

This comment has been minimized.

@joekaufmanexpensify
Copy link
Copy Markdown
Contributor

BUG: Modal does not initially appear when paying from reports page

Steps:

  1. Sign into a new account.
  2. Create a workspace and add a business bank account.
  3. Delete the workspace.
  4. Create a new workspace.
  5. Submit a report and approve it.
  6. Go to Reports page.
  7. Try to pay the report.

Expected result

You are prompted to link the bank account.

Actual result

You see option to add a new account. But if you open the report and try there, it works. And if you then go back to reports page it works then. It's only on the first attempt it doesn't work.

2025-10-23_11-41-10.mp4

@joekaufmanexpensify
Copy link
Copy Markdown
Contributor

BUG: not updating pay button if you disconnect bank account

Steps:

  1. Sign into a new account.
  2. Create a workspace and add a business bank account.
  3. Delete the workspace.
  4. Create a new workspace.
  5. Submit a report and approve it.
  6. Pay the report and select the bank account.
  7. Verify you now see the split pay button with the bank account listed in the main portion of the button.
  8. Go to Workflows and disconnect the bank account.
  9. Go back to the report.

Expected result

You no longer see the split pay button or the bank account listed in the pay button because it was removed.

Actual result

We remove the split pay button but continue to show the disconnected bank account in it (confirmed this doesn't happen in staging).

2025-10-23_11-45-29.mp4

@joekaufmanexpensify
Copy link
Copy Markdown
Contributor

Still seeing this bug from prior PR

@joekaufmanexpensify
Copy link
Copy Markdown
Contributor

That's it! PR otherwise working well for me 👍

@MrMuzyk
Copy link
Copy Markdown
Contributor Author

MrMuzyk commented Oct 24, 2025

@joekaufmanexpensify

BUG: Modal does not initially appear when paying from reports page

I've tracked down the bug causing this. When we delete the workspace we do not clear the 'reimbursementAccount' upon successfully removing the workspace. Example of such request - 9938fc39d8fad354-SJC. IMO this is an oversight and should be fixed on FE and BE side but it won't completely solve all our problems.

We were entering this condition that was checking whether reimbrusementAccount was in progress (it was as it wasn't cleared after delete). This was opening first step of the VBBA flow. In that moment the API call was being executed, reimbursementAccount was properly updated to default empty state and everything from now on was back to normal.

Now to why fixing this particular thing won't solve our problems.

When I've started work on this particular issue (few months ago) the reimbursementAccount was the only place in onyx where we could get an account that's in progress. This bit of data was fetched whenever we opened first step of VBBA flow for particular workspace.

Now we have an option to fetch all the bank accounts - even the ones that are partially setup. This condition that I've mentioned before should be rewritten and should check bankAccountList instead of reimbursementAccount for accounts that are being setup. This means two things:

  1. All the stuff that I've mentioned before about clearing reimbursementAccount when deleting the workspace is a NIT. In theory this bug won't happen again because we will not be checking reimbursementAccount onyx entry for partially setup accounts.
  2. The bankAccountList that is returned as part of OpenApp should also return partially setup accounts (recent change from @srikarparsi that we were waiting for). This would also allow us to handle this scenario I've mentioned yesterday on slack

Precondition: Have workspace with connected USD account and have another workspace with different account that is partially connected

  1. create expense for workspace with partially connected account
  2. go to account -> troubleshoot -> clear cache and restart
  3. go to reports -> expenses and find the previously created expense
  4. click on pay button -> pay with business account
  5. Expected result: RHP opens and displays screen where user can continue connecting BA he started connecting before

I could've spotted this earlier but I'm finding out new edge cases everyday 😓 Just haven't thought about this one before even though it seems quite obvious now.


Still seeing #69437 (comment) from prior PR

Fixed this one


BUG: not updating pay button if you disconnect bank account

Fixed this one too


Sorry for the lengthy post 😓

onyxData.successData?.push({
onyxMethod: Onyx.METHOD.MERGE,
key: ONYXKEYS.NVP_LAST_PAYMENT_METHOD,
value: {
Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This has to be set when user succesfully connects the account

image

@srikarparsi srikarparsi merged commit 13e0bdc into Expensify:main Dec 11, 2025
31 checks passed
@OSBotify
Copy link
Copy Markdown
Contributor

✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release.

@OSBotify
Copy link
Copy Markdown
Contributor

🚀 Deployed to staging by https://github.com/srikarparsi in version: 9.2.78-0 🚀

platform result
🖥 desktop 🖥 success ✅
🕸 web 🕸 success ✅
🤖 android 🤖 success ✅
🍎 iOS 🍎 success ✅

chuckdries added a commit that referenced this pull request Dec 15, 2025
…reapply-followup"

This reverts commit 13e0bdc, reversing
changes made to bd180d7.
francoisl added a commit that referenced this pull request Dec 15, 2025
Revert "Merge pull request #71659 from callstack-internal/feat/65912-reapply-followup"
chuckdries pushed a commit that referenced this pull request Dec 15, 2025
Revert "Merge pull request #71659 from callstack-internal/feat/65912-reapply-followup"

(cherry picked from commit 6bf6a8e)

(cherry-picked to staging by AndrewGable)
MrMuzyk added a commit to callstack-internal/Expensify-App that referenced this pull request Dec 16, 2025
…eat/65912-reapply-followup"

This reverts commit f099b1b.
@OSBotify
Copy link
Copy Markdown
Contributor

🚀 Deployed to production by https://github.com/AndrewGable in version: 9.2.78-8 🚀

platform result
🖥 desktop 🖥 success ✅
🕸 web 🕸 success ✅
🤖 android 🤖 success ✅
🍎 iOS 🍎 success ✅

@OSBotify
Copy link
Copy Markdown
Contributor

🚀 Deployed to staging by https://github.com/srikarparsi in version: 9.2.79-0 🚀

platform result
🖥 desktop 🖥 success ✅
🕸 web 🕸 success ✅
🤖 android 🤖 success ✅
🍎 iOS 🍎 success ✅

@OSBotify
Copy link
Copy Markdown
Contributor

🚀 Deployed to staging by https://github.com/srikarparsi in version: 9.2.81-0 🚀

platform result
🖥 desktop 🖥 success ✅
🕸 web 🕸 success ✅
🤖 android 🤖 success ✅
🍎 iOS 🍎 success ✅

@OSBotify
Copy link
Copy Markdown
Contributor

🚀 Deployed to production by https://github.com/AndrewGable in version: 9.2.81-5 🚀

platform result
🖥 desktop 🖥 success ✅
🕸 web 🕸 success ✅
🤖 android 🤖 failure ❌
🍎 iOS 🍎 success ✅

@OSBotify
Copy link
Copy Markdown
Contributor

🚀 Deployed to production by https://github.com/AndrewGable in version: 9.2.81-5 🚀

platform result
🖥 desktop 🖥 success ✅
🕸 web 🕸 success ✅
🤖 android 🤖 success ✅
🍎 iOS 🍎 success ✅

@OSBotify
Copy link
Copy Markdown
Contributor

OSBotify commented Jan 9, 2026

🚀 Deployed to staging by https://github.com/srikarparsi in version: 9.2.97-0 🚀

platform result
🕸 web 🕸 success ✅
🤖 android 🤖 success ✅
🍎 iOS 🍎 success ✅

@OSBotify
Copy link
Copy Markdown
Contributor

🚀 Deployed to staging by https://github.com/srikarparsi in version: 9.2.99-0 🚀

platform result
🕸 web 🕸 success ✅
🤖 android 🤖 success ✅
🍎 iOS 🍎 success ✅

@MonilBhavsar
Copy link
Copy Markdown
Contributor

This seems to have caused #79312 @MrMuzyk @dominictb

@nkuoch
Copy link
Copy Markdown
Contributor

nkuoch commented Jan 12, 2026

And this too #79317

@MrMuzyk
Copy link
Copy Markdown
Contributor Author

MrMuzyk commented Jan 12, 2026

Im looking into the linked issues

@OSBotify
Copy link
Copy Markdown
Contributor

🚀 Deployed to production by https://github.com/francoisl in version: 9.2.99-8 🚀

platform result
🕸 web 🕸 success ✅
🤖 android 🤖 success ✅
🍎 iOS 🍎 success ✅

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

7 participants