[$500] Request Money - After Reloading on Receipt page the back button takes you to main chat

[lanitochka17]

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: 1.4.3-6
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: Applause - Internal Team
Slack conversation:

Action Performed:

1. Go to FAB > Request money
2. Switch to Manual
3. Enter amount > Next
4. Select a user
5. On the confirm page go to 'more', the three dots at the top
6. Add receipt
7. On the Receipt page, Reload the page
8. Click the back button, and notice you are retaken to the receipt page
9. Click the back button again

Expected Result:

Navigates back to the previous page or reloading takes you to the Request money page

Actual Result:

After Reloading on the Receipt page clicking the back button retakes you to the receipt page again and clicking back again takes you to the main chat

Workaround:

Unknown

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

Bug6289404_1700824727747.test11_RequestReload.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01845ea13bf2a2f8c4
• Upwork Job ID: 1728472644379082752
• Last Price Increase: 2023-12-02

[melvin-bot]

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

[melvin-bot]

Triggered auto assignment to @stephanieelliott (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[melvin-bot]

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

[ishpaul777]

Proposal

Problem

After Reloading on Receipt page the back button takes you to main chat

Root Cause

In EditRequestReceiptPage, for onBackButtonPress in HeaderWithBackButton we we dont provide a fallback route so it just links back to the home when the route is first in the modal stack after reload.

Changes

We should set a backTo param while navigating to the receipt selector from money request confirm page and provide it as fallback route in goBack,so when app is reloaded and back button links to correct page.

Note: using a definte fallback route or setting fallback based on condition is not a good idea when we integrate edit receipt page to some other flow conditions may fail and and component needs a refactor again and i dont think thats a good idea.

[DylanDylann]

Proposal

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

• Request Money - After Reloading on Receipt page the back button takes you to main chat

What is the root cause of that problem?

• In here:
  

  App/src/pages/EditRequestReceiptPage.js

  Line 50 in d985a0e

  onBackButtonPress={Navigation.goBack}

  
  we do not pass the fallback route, so after refresh, and then pressing on bac button, the app is just take user to main chat.

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

• We need to create the fallbackRoute variable in EditRequestReceiptPage like below:

const fallBackRoute = transactionID ? ' ' : ROUTES.MONEY_REQUEST_CONFIRMATION.getRoute(iou.iouType, iou.iouReportID);   // transactionID to check if it is edit request`s receipt or add a receipt to new request flow

• Then update:
  

  App/src/pages/EditRequestReceiptPage.js

  Line 50 in d985a0e

  onBackButtonPress={Navigation.goBack}

  
  to:

onBackButtonPress={() => Navigation.goBack(fallBackRoute)}

• iou.iouType and iou.iouReportID are used to store the previous iouType and reportID (before refreshing the page). We can update these variable by updating:
  

  App/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsPage.js

  Lines 88 to 92 in d985a0e

  	const navigateToConfirmationStep = (moneyRequestType) => {
  	IOU.setMoneyRequestId(moneyRequestType);
  	IOU.resetMoneyRequestCategory();
  	IOU.resetMoneyRequestTag();
  	Navigation.navigate(ROUTES.MONEY_REQUEST_CONFIRMATION.getRoute(moneyRequestType, reportID));

  
  to:

    const navigateToConfirmationStep = (moneyRequestType) => {
        IOU.setMoneyRequestId(moneyRequestType);
        IOU.resetMoneyRequestCategory();
        IOU.resetMoneyRequestTag();
+      IOU.setIouType(moneyRequestType);
+      IOU.setIouReportID(reportID);
        Navigation.navigate(ROUTES.MONEY_REQUEST_CONFIRMATION.getRoute(moneyRequestType, reportID));
    };

with

function setIouType(iouType) {
    Onyx.merge(ONYXKEYS.IOU, {iouType});
}

function setIouReportID(iouReportID) {
    Onyx.merge(ONYXKEYS.IOU, {iouReportID});
}

What alternative solutions did you explore? (Optional)

• NA

[giltron]

Proposal

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

The Back button does not behave as expected on page refresh on the desktop. The back button must be pressed twice and the 2nd time pressed it dimisses the Request Money prompt.

What is the root cause of that problem?

There are 2 issues that need to be addressed: 1) The URL changes on refresh, and 2) there is missing fallback route for the onBack

1. When refreshing the URL changes (trailing slash is lost and adds another route with the same structure)

In ROUTES.ts it should not add a trailing / to multiple routes when no reportID is present. This is not needed and not consistent with other URLS.

Before refresh the url is: https://dev.new.expensify.com:8082/request/new/receipt/

After refresh the url is: https://dev.new.expensify.com:8082/request/new/receipt

Note: I was able to reproduce the same double back press behaviour on the MONEY_REQUEST_CONFIRMATION (/request/new/confirmation) route.

2. There is no fallbackRoute passed on EditRequestReceiptPage's onBackButtonPress

<HeaderWithBackButton
    title={translate('common.receipt')}
    onBackButtonPress={Navigation.goBack}
/>

Without 1) the same navigation issue happens on the route request/new/confirmation if you enter the details,

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

1. In ROUTES.js we can add a function to only conditionally add the trailing / to the URL:

function urlWithSubResource(baseUrl: string, id?: string)

So instead of

MONEY_REQUEST_RECEIPT: {
        route: ':iouType/new/receipt/:reportID?',
        getRoute: (iouType: string, reportID = '') => `${iouType}/new/receipt/${reportID}`,
    },

with result: /request/new/receipt/

It becomes

MONEY_REQUEST_RECEIPT: {
        route: ':iouType/new/receipt/:reportID?',
        getRoute: (iouType: string, reportID = '') =>  urlWithSubResource(`${iouType}/new/receipt`, reportID),
    },

with result: /request/new/receipt

The same should be appled to MONEY_REQUEST_CONFIRMATION (/request/new/confirmation) to ensure it does not suffer from the same browser refresh/back button issue.

2. ADd the fallbackRoute passed to EditRequestReceiptPage's onBackButtonPress

<HeaderWithBackButton
    title={translate('common.receipt')}
    onBackButtonPress={() => Navigation.goBack(ROUTES.MONEY_REQUEST_CONFIRMATION.getRoute(route.params.iouType, route.params.reportID))}
/>

Alternative Solutions

On browser refresh, close the right hand panel

[codeweb05]

Issue Description

Problem

After reloading the Receipt page, the back button redirects users to the main chat instead of the expected behavior of navigating back to the previous page.

Root Cause

In the EditRequestReceiptPage, the onBackButtonPress function in HeaderWithBackButton does not provide a fallback route. This results in the back button linking to the home page when the route is first in the modal stack after a reload.

Proposed Solutions

Proposal 1

Problem

After reloading the Receipt page, the back button redirects users to the main chat.

Root Cause

In EditRequestReceiptPage.js, the onBackButtonPress in HeaderWithBackButton lacks a fallback route, causing the app to redirect to the main chat after a refresh.

Changes

Set a backTo parameter when navigating to the receipt selector from the money request confirm page. Provide it as a fallback route in goBack to ensure the correct page is linked to when the app is reloaded and the back button is clicked.

Proposal 2

Problem

After reloading on the Receipt page, the back button redirects users to the main chat.

Root Cause

In EditRequestReceiptPage.js, the onBackButtonPress function lacks a fallback route, causing the app to redirect to the main chat after a refresh.

Changes

Create a fallbackRoute variable in EditRequestReceiptPage. Update the onBackButtonPress to include the fallback route, ensuring that after a reload, the back button links to the correct page.

Proposal 3

Problem

The back button does not behave as expected on page refresh on the desktop. It must be pressed twice, and the second press dismisses the Request Money prompt.

Root Cause

1. The URL changes on refresh, losing the trailing slash and adding another route with the same structure.
2. There is no fallback route passed on EditRequestReceiptPage's onBackButtonPress.

Changes

1. In ROUTES.js, add a function to conditionally add the trailing slash to the URL. Apply this to the MONEY_REQUEST_RECEIPT and MONEY_REQUEST_CONFIRMATION routes.
2. Add the fallbackRoute parameter to EditRequestReceiptPage's onBackButtonPress to ensure proper navigation after a reload.

Alternative Solutions

• On browser refresh, close the right-hand panel.

Conclusion

Choose the proposal that best aligns with the codebase and development standards. Ensure that the chosen solution addresses both the reloading issue and the back button behavior. Implement the proposed changes and thoroughly test to guarantee the desired outcomes.