App: [Hold for #27168] [$1000] Payments - App crashes when navigating to enable payments page before logging in

Conclusion: if you hold for long enough, the issue fixes itself 😅

@cubuspl42 @robertjchen it looks like it’s fixed somewhere. I couldn’t reproduce this issue in the latest main.

https://github.com/Expensify/App/assets/9639873/63c5abd0-5160-4b18-a743-e0b3fd25b0fb

It seems you’re right

This is the GH issue: https://github.com/Expensify/App/issues/27168

Could we please hold this on this bug? I know that the PR is already created, but it’s not our fault that that bug was introduced, and it makes difficult to properly verify the fix for our issue.

Unfortunately, there’s still no GH for the mentioned thing, so we can “[HOLD Broken deeplinks]” or something like that.

I also asked on Slack whether the change is intentional

I think we should check above flag IS_LOADING_REPORT_DATA because it’s a correct signal to check whether the API to fetch personalDetailsList data is completed. Moreover, later on, if the page depends on other needed data in the API above, we can cover it by the single flag IS_LOADING_REPORT_DATA as well.

@hungvu193 While the solution might work on the technical level, your root cause analysis is a bit shallow. You focused on what’s happening on the programming language level, not on what’s happening from the broader perspective and why.

@hoangzinh Your root cause analysis sounds reasonable. Could you elaborate a bit on the solution part? As I understand it, the missing (not-yet-loaded) data is the current user personal details. That doesn’t sound like a part of the “report data”, what am I missing? Is the semantics of IS_LOADING_REPORT_DATA key different than what could be concluded from the name?

Proposal

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

Payments - App crashes when navigating to enable payments page before logging in

What is the root cause of that problem?

• The error come from this line https://github.com/Expensify/App/blob/c029dc509d03fd13ece058ba89ab25c4318a9050/src/pages/EnablePayments/AdditionalDetailsStep.js#L192 The currentUserPersonalDetails is null so it raises error when we call function extractFirstAndLastNameFromAvailableDetails

• The root cause is because after login, the OpenApp API is not completed yet, so the personalDetailsList is not ready yet => We couldn’t get the currentUserPersonalDetails in this line, so it will be null: https://github.com/Expensify/App/blob/c029dc509d03fd13ece058ba89ab25c4318a9050/src/components/withCurrentUserPersonalDetails.js#L39

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

In the EnablePaymentsPage component, we should check if the Onyx key ONYXKEYS.IS_LOADING_REPORT_DATA is true, we should display loading page in this line https://github.com/Expensify/App/blob/c029dc509d03fd13ece058ba89ab25c4318a9050/src/pages/EnablePayments/EnablePaymentsPage.js#L53-L55

So it only renders child components whenever the OpenApp data is ready.