Loading spinner when adding a invoice bank account

[m-natarajan]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: Reproducible in staging?: Needs reproduction Reproducible in production?: Needs reproduction If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: 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 Expensify/Expensify Issue URL: Issue reported by: @quinthar Slack conversation (hyperlinked to channel name): #quality

Action Performed:

1. Go to Go to staging.new.expensify.com
2. Create a Workspace or go to workspace through settings
3. Enable Invoices > Connect bank account

Expected Result:

User able to continue and add a bank account

Actual Result:

Continuous loading spinner displayed

Workaround:

Unknown

Platforms:

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

• [ ] Android: Standalone
• [ ] Android: HybridApp
• [ ] Android: mWeb Chrome
• [ ] iOS: Standalone
• [ ] iOS: HybridApp
• [ ] iOS: mWeb Safari
• [x] MacOS: Chrome / Safari
• [ ] MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

https://github.com/user-attachments/assets/44a2f8e5-feae-4bb0-9a48-52dbc0963934

[info] [API] Called API write - {"command":"CompleteGuidedSetup","engagementChoice":"newDotLookingAround","firstName":"David","lastName":"Barrett (EXFY CEO)","actorAccountID":8392101,"guidedSetupData":"[{\"type\":\"message\",\"reportID\":\"61204031\",\"reportActionID\":\"3516336773692675037\",\"reportComment\":\"Let's get you set up <emoji>🔧</emoji>\"},{\"type\":\"message\",\"reportID\":\"61204031\",\"reportActionID\":\"2929353029631138233\",\"reportComment\":\"Expensify is best known for expense and corporate card management, but we do a lot more than that. Let me know what you&#x27;re interested in and I&#x27;ll help get you started.\"}]"} 
Log.ts:76 [info] [API] Preparing request - {"command":"CompleteGuidedSetup","type":"write"} 
Log.ts:76 [info] [API] Applying optimistic data - {"command":"CompleteGuidedSetup","type":"write"} 
Log.ts:76 [info] [Onyx] set called for key: networkRequestQueue properties: 0 hasChanged: true - "" 
Log.ts:76 [info] [Onyx] set called for key: plaidLinkToken hasChanged: false - "" 
Log.ts:76 [info] [Onyx] set called for key: plaidData properties: bankName,plaidAccessToken,bankAccounts,isLoading,errors hasChanged: false - "" 
Log.ts:76 [info] [Network] Making API request - {"command":"CompleteGuidedSetup"} {request: {…}, response: undefined}
Log.ts:76 [info] [Onyx] merge called for key: report_61204031 properties: lastMentionedTime,hasOutstandingChildTask hasChanged: true - "" 
Log.ts:76 [info] [Onyx] merge called for key: reportActions_61204031 properties: 3516336773692675037,2929353029631138233 hasChanged: true - "" 
Log.ts:76 [info] [Onyx] merge called for key: nvp_introSelected properties: choice hasChanged: false - "" 
Log.ts:76 [info] [Onyx] merge called for key: nvp_onboarding properties: hasCompletedGuidedSetupFlow hasChanged: false - "" 
Log.ts:76 [info] Not switching user to optimized focus mode. - {"isInFocusMode":true,"hasTriedFocusMode":true} 
Log.ts:76 [info] [API] Called API.read - {"command":"OpenPlaidBankLogin","redirectURI":"https://staging.new.expensify.com/bank-account","allowDebit":false,"bankAccountID":0} 
Log.ts:76 [info] [API] Preparing request - {"command":"OpenPlaidBankLogin","type":"read"} 
Log.ts:76 [info] [API] Applying optimistic data - {"command":"OpenPlaidBankLogin","type":"read"} 
Log.ts:76 [info] [API] 'OpenPlaidBankLogin' is waiting on 1 write commands - "" 
Log.ts:76 [info] Navigating to route - {"path":"/settings/wallet/add-bank-account"} 
Log.ts:76 [info] [Onyx] set called for key: plaidData properties: bankName,plaidAccessToken,bankAccounts,isLoading,errors hasChanged: true - "" 
Log.ts:76 [info] [Onyx] set called for key: plaidLinkToken hasChanged: false - "" 
Log.ts:76 [info] [Onyx] merge called for key: modal properties: isVisible hasChanged: true - "" 
Log.ts:76 [info] [Onyx] merge called for key: lastVisitedPath hasChanged: true - "" 
Log.ts:76 [info] [Onyx] merge called for key: reimbursementAccountDraft properties: plaidAccountID hasChanged: false - "" 
Log.ts:76 [info] [SequentialQueue] 'CompleteGuidedSetup' command queued. Queue length is 1 - "" 
Log.ts:76 [info] [Network] Finished API request in 450ms - {"command":"CompleteGuidedSetup","jsonCode":200,"requestID":"8dbe8fc4aa3b0954-SEA"} {request: {…}, response: {…}}
OnyxUpdates.ts:29 [OnyxUpdateManager] Applying https update
Log.ts:76 [info] [OnyxUpdateManager] Applying update type: https with lastUpdateID: 2725453769 - {"command":"CompleteGuidedSetup"} 
Log.ts:76 [info] [Onyx] merge called for key: OnyxUpdatesLastUpdateIDAppliedToClient hasChanged: true - "" 
OnyxUpdates.ts:64 [OnyxUpdateManager] Done applying HTTPS update
Log.ts:76 [info] [RequestThrottle] in clear() - "" 
Log.ts:76 [info] [SequentialQueue] Unable to process. No requests to process. - "" 
Log.ts:76 [info] [SequentialQueue] Finished processing queue. - "" 
Log.ts:76 [info] [Network] Making API request - {"command":"OpenPlaidBankLogin"} {request: {…}, response: undefined}
Log.ts:76 [info] [Onyx] merge called for key: report_61204031 properties: participants,chatType,description,lastActorAccountID,lastMessageText,lastVisibleActionCreated,managerID,ownerAccountID,parentReportActionID,parentReportID,policyID,reportID,reportName,state,stateNum,statusNum,type,visibility hasChanged: true - "" 
Log.ts:76 [info] [Onyx] merge called for key: reportActions_61204031 properties: 3516336773692675037,2929353029631138233 hasChanged: true - "" 
Log.ts:76 [info] [Onyx] merge called for key: personalDetailsList properties: 8392101 hasChanged: false - "" 
Log.ts:76 [info] Not switching user to optimized focus mode. - {"isInFocusMode":true,"hasTriedFocusMode":true} 
Log.ts:76 [info] [SequentialQueue] 'CompleteGuidedSetup' removed from the queue. Queue length is 0 - "" 
Log.ts:76 [info] [Onyx] merge called for key: snapshot_243428839 properties: data hasChanged: false - "" 
Log.ts:76 [info] [Network] Finished API request in 742ms - {"command":"OpenPlaidBankLogin","jsonCode":200,"requestID":"8dbe8fc6ab230954-SEA"} {request: {…}, response: {…}}
OnyxUpdates.ts:29 [OnyxUpdateManager] Applying https update
Log.ts:76 [info] [OnyxUpdateManager] Applying update type: https with lastUpdateID: 0 - {"command":"OpenPlaidBankLogin"} 
Log.ts:76 [info] [Onyx] set called for key: plaidLinkToken hasChanged: true - "" 
Log.ts:76 [info] [Onyx] set called for key: isPlaidDisabled hasChanged: false - "" 
OnyxUpdates.ts:64 [OnyxUpdateManager] Done applying HTTPS update
Log.ts:76 [info] Flushing logs as app is going inactive - {} 
Log.ts:76 [info] Previous log requestID - {"requestID":"8dbe908b8df60954-SEA"} 
OnyxUpdates.ts:29 [OnyxUpdateManager] Applying https update
Log.ts:76 [info] [OnyxUpdateManager] Applying update type: https with lastUpdateID: 0 - {"command":"Log"} 
OnyxUpdates.ts:64 [OnyxUpdateManager] Done applying HTTPS update
Log.ts:76 [info] [Onyx] set called for key: activeClients properties: 0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17 hasChanged: false - "" 

View all open jobs on GitHub

[MelvinBot]

This has been labelled "Needs Reproduction". Follow the steps here: https://stackoverflowteams.com/c/expensify/questions/16989

[melvin-bot[bot]]

Triggered auto assignment to @isabelastisser (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.

[melvin-bot[bot]]

Triggered auto assignment to @mjasikowski (AutoAssignerNewDotQuality)

[mjasikowski]

Will look into this today

[mjasikowski]

Can reproduce on staging & production, but not on dev

[mjasikowski]

Works fine consistently on Firefox, I can only reproduce this in Chrome so far.

[mjasikowski]

Can be reproduced in Chrome on dev with ENVIRONMENT=production.

[mjasikowski]

It seems that despite receiving correct token, Plaid's onLoad() is never called in production build in Chrome.

[isabelastisser]

Hey, @MichaelBuhler, should this issue be assigned to an external contributor or one of our engineers?

[mjasikowski]

@isabelastisser let's make it external, it's a pure front-end problem.

[melvin-bot[bot]]

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

[melvin-bot[bot]]

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

[shahinyan11]

Hi there. @mjasikowski Could you please tell me which file should I make the following changes ENVIRONMENT=production in?. And I want to clarify the behavior. Is it expected to always open Plaid when working properly ?

[mjasikowski]

@shahinyan11 here's how I managed to reproduce this with my limited testing:

1. Edit your.env file by adding ENVIRONMENT=production to the end of the file (or changing the environment in the file to production if it's already there)
2. Start the app with npm run web
3. Open the app in the newest version of Chrome (I personally tested on 132.0.6811.3 (Official Build) dev (arm64))
4. Create a Workspace or go to workspace through settings
5. Go to "More features" and enable Invoices
6. Go to "Invoices"
7. Press "Add bank account"

This should always open Plaid. Currently there's an activity indicator and it just spins indefinitely. I couldn't replicate this in Firefox. As mentioned in the comment above, it seems that a relevant onLoad() function is just never called.

[Anastasiia-F]

Looks like mjasikowski was right we need to call the onLoad function

[melvin-bot[bot]]

📣 @Anastasiia-F! 📣 Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork. Please follow these steps:

1. Make sure you've read and understood the contributing guidelines.
2. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
3. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details. Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[Anastasiia-F]

Contributor details Your Expensify account email: [email protected] Upwork Profile Link: Upwork

[melvin-bot[bot]]

✅ Contributor details stored successfully. Thank you for contributing to Expensify!

[melvin-bot[bot]]

@mjasikowski, @isabelastisser, @ishpaul777 Huh... This is 4 days overdue. Who can take care of this?

[ishpaul777]

No proposals

[melvin-bot[bot]]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[ishpaul777]

no proposals to review

[mjasikowski]

Investigated this a bit more, it seems that Chrome is refusing to load the plaid script fetched dynamically from their CDN, but only in production mode:

[mjasikowski]

I've tested this on multiple setups:

MacOS 15.1 (Macbook Pro M3 Max)

• Chrome 132 dev - reproducible
• Firefox 133 - not reproducible
• Chrome 131 - not reproducible

MacOS 14.5 (Macbook Pro M1 Pro)

• Chrome 132 dev - reproducible
• Firefox 133 - not reproducible
• Chrome 131 - not reproducible

MacOS 15.0 (Macbook Air M2)

• Chrome 132 dev - not reproducible
• Firefox 133 - not reproducible

MacOS 14.2.1 (Mac mini M1)

• Chrome 132 dev - not reproducible
• Firefox 133 - not reproducible

Windows 11 (Intel laptop)

• Chrome 132 dev - not reproducible
• Firefox 133 - not reproducible

The root cause of the issue is the react-plaid-link npm package creating a <script> node in DOM, which should load link-initialize.js from Plaid's CDN, but in some cases the network request just stalls, preventing Plaid's iframe to load.

[melvin-bot[bot]]

Upwork job price has been updated to $500

[mvtglobally]

Issue not reproducible during KI retests. (First week)

[melvin-bot[bot]]

@mjasikowski @isabelastisser @ishpaul777 this issue was created 2 weeks ago. Are we close to approving a proposal? If not, what's blocking us from getting this issue assigned? Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

[ishpaul777]

no proposal to review, i'll advertise this on slack

[NJ-2020]

@ishpaul777 Did you able to reproduce this issue?

[ishpaul777]

I can reproduce on production but not on staging and dev

https://github.com/user-attachments/assets/d833d47e-bbe1-42de-ba8f-61d749318544