[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 [email protected] 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. [email protected] submitted [email protected] an IOU.
2. [email protected] 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 🧵.

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
• 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]

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

[melvin-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]

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

⚠️ 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]

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

[melvin-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]

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

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

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]

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