[HOLD for payment 2024-09-16] [$250] [Critical] [UX reliability] The plaid modal is taking long to load in the bottom up flow and not found page is shown

[mountiny]

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

---

Version Number: 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 Expensify/Expensify Issue URL: Issue reported by: @danielrvidal Slack conversation: https://expensify.slack.com/archives/C05LX9D6E07/p1716940673539529

Action Performed:

Break down in numbered steps

BUG: Plaid connection is taking a very long time when I click Pay with Expensify for the first time

1. daniel@expensify.com submitted danrvidal+upgradetest7@gmail.com an IOU.
2. danrvidal+upgradetest7@gmail.com got the email and clicked Pay , is taken to the sign in page, gets the magic code and logs in
3. I navigate to the IOU in our DM and click Pay with Expensify
4. It just seems to load for a long time showing a screen “We’re taking a look at your information. You will be able to continue with next steps shortly.”
5. I’ve instances where I can’t currently get this to load with a test account OR it takes a long time. It should be taking me to Connect with Plaid.

---

1. Underneath the overlay though you can see it says Hm… it’s not here.
2. If I then leave the Plaid setup, I see the Hm… it’s not here flow, which is incorrect.
3. If I click the link to “You don’t have access to this chat”, it opens the DM.

Having it take a long time is reproducible for me right now. I my first experience was here, and I’ll put another video and logs in :thread:.

Expected Result:

Describe what you think should've happened

The bank account flow should open after a bit. Real report remains open under the moda.

Actual Result:

Describe what actually happened

User is stuck on the plaid modal flow and there is not found page shown in the report screen

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: mWeb Chrome
• [ ] iOS: Native
• [ ] iOS: mWeb Safari
• [x] MacOS: Chrome / Safari
• [ ] MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

https://expensify.slack.com/archives/C05LX9D6E07/p1716940740586069?thread_ts=1716940673.539529&cid=C05LX9D6E07

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01b1cf25507f28de79
• Upwork Job ID: 1796654190900498432
• Last Price Increase: 2024-09-15
• Automatic offers:
• getusha | Reviewer | 102615217

Issue Owner

Current Issue Owner: @getusha

[melvin-bot[bot]]

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

[melvin-bot[bot]]

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

[goldenbear101]

Hello, is there a bounty for this issue, regardless, I want to work on this.

[melvin-bot[bot]]

📣 @goldenbear101! 📣 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>

[melvin-bot[bot]]

⚠️ Could not update price automatically because there is no linked Upwork Job ID. The BZ team member will need to update the price manually in Upwork.

[melvin-bot[bot]]

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

[melvin-bot[bot]]

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

[mountiny]

Yes there is a bounty, making it 500 since its critical task

[goldenbear101]

Okay here's what I think: The issue described involves the Plaid modal taking a long time to load in the bottom-up flow, eventually leading to a "Not Found" page in Expensify's app. Here’s a detailed look into potential causes and how I'll fix them:

Potential Causes 1, Network Latency: Slow network responses from the Plaid API could be causing delays in loading the modal.

2, Integration Issues: There might be issues with the integration between Plaid and Expensify’s system, possibly due to incorrect API calls, misconfigured endpoints, or problems with API keys.

3, Timeouts: The application might be hitting a timeout period while waiting for the Plaid modal to load, resulting in a fallback to the "Not Found" page.

4, React Native Specific Issues: React Native might be having trouble rendering the Plaid modal efficiently due to compatibility issues or performance bottlenecks.

5, Error Handling: Poor error handling in the code could be leading to a "Not Found" page instead of a more appropriate error message or retry logic.

Steps I plan to take on fixing the Issue 1, Check Network Conditions: Monitor network requests to Plaid’s API using tools like Fiddler or Chrome Developer Tools to check for high latency or failed requests.

2, Review Integration Code: Ensure that API endpoints and keys are correctly configured. Verify that the API calls to Plaid are correctly formed and handle the responses properly.

3, Implement Retry Logic: Implement retry logic for the API calls to handle transient network issues

4, Optimize React Native Performance: Ensure that the React Native components used to display the Plaid modal are optimized for performance. Use performance profiling tools to identify and resolve bottlenecks.

5, Improve Error Handling: Enhance error handling to provide user-friendly error messages or fallback options instead of a "Not Found" page.

Finally, I will: 1, Diagnose the problem: Use network monitoring and error logging to identify the root cause. Improve integration: Ensure API calls and configurations are correct. 2, Enhance user experience: Implement retry logic and better error handling to provide a smoother user experience. 3, Optimize performance: Use React Native performance tools to resolve any rendering issues.

By addressing these areas, you can significantly improve the loading time and reliability of the Plaid modal within the Expensify app.

[goldenbear101]

Pardon me but I am not able to write a proposal for the job on Upwork. That said, If you give me the job to work on, I will submit it for your verification through telegram or even GitHub and only then you can give me what you deem fit for my work. Also I would do well to give a detailed explanation.

[melvin-bot[bot]]

@kevinksullivan, @getusha Eep! 4 days overdue now. Issues have feelings too...

[goldenbear101]

Proposal Problem Statement The issue at hand is that the Plaid connection takes a very long time when a user clicks "Pay with Expensify" for the first time. Users experience prolonged loading times and are sometimes stuck on a screen saying, "We’re taking a look at your information. You will be able to continue with the next steps shortly.” Underneath the overlay, there is a message saying, "Hm… it’s not here." If the user leaves the Plaid setup, they see the incorrect "Hm… it’s not here" flow. Clicking the link "You don’t have access to this chat" incorrectly opens the DM.

Root Cause The root cause of the problem appears to be related to delays and potential missteps in the Plaid setup and connection process. The system does not transition smoothly from initiating the Plaid connection to the bank account flow, resulting in users being stuck in a loading state.

Proposed Changes To solve the problem, the following changes are recommended:

1. Improve Plaid Connection Initialization Ensure that the connection to Plaid is initiated correctly and that any initial checks or setups are handled promptly.

// Ensure proper initialization and error handling
async function initiatePlaidConnection() {
    try {
        const response = await startPlaidConnection();
        if (response.error) {
            handlePlaidError(response.error);
        } else {
            proceedToPlaidFlow(response.data);
        }
    } catch (error) {
        handlePlaidError(error);
    }
}

2. Enhance Loading and Transition Experience Improve the user experience by ensuring that loading states are accurately represented and that users are transitioned correctly to the next steps.

// Manage loading state and transition
function proceedToPlaidFlow(data) {
    setLoading(false);
    navigateToPlaidSetup(data);
}

// Show a user-friendly loading state
function setLoading(isLoading) {
    if (isLoading) {
        showLoadingScreen("We’re taking a look at your information. You will be able to continue with next steps shortly.");
    } else {
        hideLoadingScreen();
    }
}

3. Handle Errors and Incorrect Flows Ensure that errors and incorrect flows are handled gracefully and provide appropriate feedback to the user.

// Handle Plaid errors and incorrect flows
function handlePlaidError(error) {
    setLoading(false);
    showErrorMessage("There was an issue connecting to Plaid. Please try again later.");
}

// Navigate to the correct report after error
function navigateToCorrectReportAfterError() {
    navigateToReport();
}

4. Correct Message Display and Navigation Fix the issues with incorrect message displays and navigation to ensure users do not see misleading information.

// Correct message display and navigation
function showErrorMessage(message) {
    displayOverlayMessage(message);
    // Additional logic to handle incorrect flows
    if (message.includes("not here")) {
        navigateToCorrectReportAfterError();
    }
}

5. Update Error Messages and Flow Handling Ensure that error messages are clear and provide useful information to the user. Update the flow handling logic to avoid incorrect states.

// Update error messages and flow handling
function displayOverlayMessage(message) {
    // Display the message on the overlay
    overlayElement.innerText = message;
}

// Additional flow handling for errors
function navigateToReport() {
    // Logic to navigate to the correct report
    window.location.href = '/report';
}

Expected Result The bank account flow should open after a brief loading period, with the real report remaining open under the modal. The transition should be smooth, and users should not encounter misleading messages or incorrect navigation.

By implementing these changes, the connection to Plaid should be more reliable and the user experience significantly improved, avoiding prolonged loading times and incorrect flows.

[ashuvssut]

The screenshot/video link is not accessible

Was that screenshot/video shared in #expensify-open-source channel?

[mountiny]

Here is the video https://github.com/Expensify/App/assets/36083550/129bb65a-0884-4fd9-920d-30c4d2469eea

[mallenexpensify]

Posted in #contributor-plus to see if a C+ can take this over since it's been a week and @getusha has commented

[getusha]

Still waiting for proposals, both proposals posted by @goldenbear101 are AI generated.

[goldenbear101]

Really sorry about that I'm quite new but they aren't AI-generated, It's a suspicion fine-tuned by AI in Javascript. And I could prove it as you will.

[getusha]

@goldenbear101 get yourself familiarized with the codebase and try writing a detailed proposal on where & what to change. and it's important to put accurate and detailed RCA.

[lauridskern]

Hi, Laurids from Margelo here. I will be working on this issue.

[muttmuure]

Thanks!

[melvin-bot[bot]]

📣 @getusha 🎉 An offer has been automatically sent to your Upwork account for the Reviewer role 🎉 Thanks for contributing to the Expensify app!

Offer link Upwork job

[lauridskern]

Update: I am still figuring out how to properly test this flow, as I had difficulty adding a bank account and pay in USD. There is still an issue with KCY that needs to be figured out before I can start debugging this properly. @vitHoracek is currently assisting me here. Hopefully I can get started testing the actual issue tomorrow.

[lauridskern]

Update: The API write operation for CreateWorkspaceFromIOUPayment takes 16 seconds and blocks the read operation for OpenReimbursementAccountPage, which leads to the “plaid modal” loading for an extended period. This behaviour is intended, as read operations wait for all write operations to complete. We should investigate the backend to determine why WRITE_COMMANDS.CREATE_WORKSPACE_FROM_IOU_PAYMENT takes this long.

[melvin-bot[bot]]

@lauridskern @kevinksullivan @getusha 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!

[melvin-bot[bot]]

Triggered auto assignment to @MonilBhavsar (AutoAssignerNewDotQuality)

[MonilBhavsar]

Holding on https://github.com/Expensify/Expensify/issues/350724 and https://github.com/Expensify/App/issues/43492 as discussed here https://expensify.slack.com/archives/C05R2V5GM1S/p1718259305669389?thread_ts=1716984044.957689&cid=C05R2V5GM1S

[MonilBhavsar]

on HOLD

[kevinksullivan]

still held

[muttmuure]

Throwing the retest label on this now that Guides are no longer being added to new workspaces

[muttmuure]

If it's still happening, we will need to wait for - https://github.com/Expensify/Expensify/issues/350724

[MonilBhavsar]

A conversation is happening here https://expensify.slack.com/archives/C07BLGL7GBX/p1720554518831649?thread_ts=1720547161.965499&cid=C07BLGL7GBX

[MonilBhavsar]

Closing this as this is fixed https://expensify.slack.com/archives/C07BLGL7GBX/p1720554518831649?thread_ts=1720547161.965499&cid=C07BLGL7GBX

[mountiny]

This seems to be still a problem but the API speed has improved a bunch so we might have to look somewhere else a bit

[hannojg]

Hey, Hanno from Margelo here, I am available to look into this 👋

[MonilBhavsar]

This is the bug report from the user. (0:40) is where it is slow

https://github.com/user-attachments/assets/5cf9eafd-7909-4b0c-ab56-1a865b7a43c8

As we can see, the internet strength is not great. Perhaps that could be also one of the reason.

[danielrvidal]

I agree the internet is likely slow but it loads for like 15 seconds while the rest of the app seems to function still. So if we could improve anything in this flow, it feels like an important one.

[mountiny]

@hannojg started a PR with some improvements

[kevinksullivan]

Looping in a BZ member to handle payment as I'm going OOO

[melvin-bot[bot]]

Triggered auto assignment to @zanyrenney (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]]

Upwork job price has been updated to $250

[mountiny]

$250 to @getusha for this one cc @zanyrenney

the automation seems to have failed

[zanyrenney]

thanks @mountiny

[zanyrenney]

I will pay now!

[zanyrenney]

ah @getusha is paid via manual requests.

[zanyrenney]

payment summary

$250 owed to @getusha via NewExpensify. Please request payment there.

Thank you!

[garrettmknight]

$250 approved for @getusha