Always close the statement even after visiting multiple statement pages

[thienlnam]

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

---

Action Performed:

1. Copy this URL into your browser: https://new.expensify.com/statements/202112/
2. Then this one: https://new.expensify.com/statements/202201/
3. Then this one: https://new.expensify.com/statements/202202/
4. Click the X on the statement page in the rightDocked side modal - observe you're returned to the URL in Fix spaces #2.
5. Click the X again - observe that you're returned to the URL in Some initial fixes and code style updates #1.
6. Click the X again - observe that the rightDocked side modal closes

Expected Result:

Describe what you think should've happened

1. Clicking the close button (X) on the modal should close the statement modal and not redirect to the last statement you visited

Actual Result:

Describe what actually happened

1. You get redirected to the last statement

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

Yes, you can either just adjust the URL or just keep pressing X until you close the modal out

Platform:

Where is this issue occurring?

• Web x
• iOS
• Android
• Desktop App
• Mobile Web x

Version Number: v1.1.78-8
Reproducible in staging?: Yes
Reproducible in production?: Yes
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation

Upwork URL: https://www.upwork.com/jobs/~01ce48a3c10dcdbe87
Issue reported by:
Slack conversation:

View all open jobs on GitHub

[melvin-bot]

Triggered auto assignment to @sonialiap (AutoAssignerTriage), see https://stackoverflow.com/c/expensify/questions/4749 for more details.

[melvin-bot]

Triggered auto assignment to @trjExpensify (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[melvin-bot]

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

[melvin-bot]

Triggered auto assignment to @marcaaron (Exported), see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[trjExpensify]

Job on Upwork here: https://www.upwork.com/jobs/~01ce48a3c10dcdbe87

@thienlnam, just to check, does the contributor need access to a beta for this?

[parasharrajat]

Can someone improve the Action Performed and add steps for how to navigate to statements?

[marcaaron]

+1 - it would be helpful to have a video of the existing behavior. I'm not even sure what is being asked here.

[trjExpensify]

Fair, it's just copying those three URLs above into the browser and clicking X on the modal. I've improve the steps a bit with the below to make that clearer, gif included!

1. Copy this URL into your browser: https://new.expensify.com/statements/202112/
2. Then this one: https://new.expensify.com/statements/202201/
3. Then this one: https://new.expensify.com/statements/202202/
4. Click the X on the statement page in the rightDocked side modal - observe you're returned to the URL in Fix spaces #2.
5. Click the X again - observe that you're returned to the URL in Some initial fixes and code style updates #1.
6. Click the X again - observe that the rightDocked side modal closes

@thienlnam can confirm if there are beta requirements to know about for this project for external.

[parasharrajat]

I may have found another issue. When I open the URL https://new.expensify.com/statements/202112/ on the browser. I see a blank page.
.

Request return 404 for the page (the reason could be that report is not generated for my account yet). But I think it should be 200 with some sort of UI Or we can handle this ourselves in the App and show a UI when 404 is returned.

Logic would be:

1. Make the fetch call directly to the statement resource URL and do not pass the URL to src of the iframe we are using.
2. Now based on the response shows the Error UI etc.
3. If the response is 200, use the frame.srcdoc prop and assign it to the response body.

[marcaaron]

Ok, super weird now that I understand it...

@parasharrajat nice catch, but not really what we are trying to fix here so maybe we can create a new issue for that.

[marcaaron]

WalletStatementPage is doing a Navigation.dismissModal(true)

App/src/pages/wallet/WalletStatementPage.js

Line 110 in 35a41d9

onCloseButtonPress={() => Navigation.dismissModal(true)}

So why are we trying to navigate to the previous route in the history? Maybe this will be fixed in #9718.

[marcaaron]

@thienlnam Anyway to reproduce this on dev? When I check out a statement it just looks like this...

[thienlnam]

WalletStatementPage is doing a Navigation.dismissModal(true)

Yeah I'm not sure, I messed around with it a bit and it seemed to be some react-navigation bug. Another thing I was thinking was that the way we've been accessing the statement is modifying the URL so maybe it has to do with that? But the history seems intact so I'm not sure

@thienlnam Anyway to reproduce this on dev? When I check out a statement it just looks like this...

Should be able to see the statement on dev, any console errors when you see this in the modal? Though I think if you're able to bring up the modal, you should be able to test it still by navigating to multiple statement links and clicking the X and just ignoring what is inside the modal

@thienlnam can confirm if there are beta requirements to know about for this project for external.

I think you can still test this without seeing what is actually in the modal since this is mostly about the navigation part of the modal

[marcaaron]

seemed to be some react-navigation bug

I would guess it has more to do with our ever evolving "custom actions" than any issue with react-navigation, but both are possible. Will do some debugging.

[marcaaron]

Pretty confused by this one. The navigation state looks normal, but for some reason going back here causes the entire app to reload. JS logs:

{
    "stale": false,
    "type": "stack",
    "key": "stack-9ocqjPgUWXqhOD9grZuur",
    "index": 1,
    "routeNames": [
        "Home",
        "ValidateLogin",
        "TransitionFromOldDot",
        "Settings",
        "NewChat",
        "NewGroup",
        "Search",
        "Details",
        "Report_Details",
        "Report_Settings",
        "Participants",
        "IOU_Request",
        "IOU_Bill",
        "EnablePayments",
        "IOU_Details",
        "AddPersonalBankAccount",
        "RequestCall",
        "IOU_Send",
        "Wallet_Statement"
    ],
    "routes": [
        {
            "name": "Home",
            "key": "Home-Zm_jAYw-L9GeUnMfw13KZ",
            "state": {
                "stale": false,
                "type": "drawer",
                "key": "drawer-wKHxJpsNfLvUExwJVK_o6",
                "index": 0,
                "routeNames": [
                    "Report"
                ],
                "history": [
                    {
                        "type": "route",
                        "key": "Report-yIDPQ02mIDKRz-TWT6h5A"
                    }
                ],
                "routes": [
                    {
                        "name": "Report",
                        "key": "Report-yIDPQ02mIDKRz-TWT6h5A",
                        "params": {
                            "reportID": "3686"
                        }
                    }
                ],
                "default": "closed"
            }
        },
        {
            "name": "Wallet_Statement",
            "state": {
                "stale": false,
                "type": "stack",
                "key": "stack-FmbiJDZuYsh5nCLc1_kD5",
                "index": 0,
                "routeNames": [
                    "WalletStatement_Root"
                ],
                "routes": [
                    {
                        "name": "WalletStatement_Root",
                        "params": {
                            "yearMonth": "202112"
                        },
                        "path": "/statements/202112/",
                        "key": "WalletStatement_Root-KQpPCD-_eoafkIAiP1JWR"
                    }
                ]
            },
            "key": "Wallet_Statement-rIXcjqtdOn4R40R2BV3j0"
        }
    ]
}
CustomActions.js?bcb8:26 {type: 'POP_TO_TOP'}
CustomActions.js?bcb8:27 stack-9ocqjPgUWXqhOD9grZuur
Log.js?f092:55 [info] [Onyx] set() called for key: modal properties: isVisible,willAlertModalBecomeVisible - ""
Log.js?f092:55 [info] [Onyx] set() called for key: session properties: loading,shouldShowComposeInput,authToken,accountID,email,encryptedAuthToken - ""
Log.js?f092:55 [info] Navigating to route - {"path":"/r/3686"}
Log.js?f092:55 [info] [Onyx] set() called for key: currentURL - ""
Navigated to http://localhost:8080/r/3686
log.js?1afd:24 [HMR] Waiting for update signal from WDS...
index.js?c8a3:89 Running application "NewExpensify" with appParams:
 {rootTag: '#root'} 
Development-level warnings: ON.
Performance optimizations: OFF.

[marcaaron]

What's even weirder is that this doesn't happen with something like the "settings" page which is also a "modal stack". The state looks the same as this more or less.

[thienlnam]

The navigation state looks normal, but for some reason going back here causes the entire app to reload

Yeah I think it's because we're accessing it by modifying the URL instead of having a dedicated button that opens Navigation.navigate(statement_route). Kind of like how if you click on another chat in the LHN the app won't reload, but if you manually edit the reportID in the URL it will cause it to reload. Not sure how it all plays into how the last page in the stack is the previous statement link though

[marcaaron]

Ah ok, so, this is not unique to the statements. The same issue will happen if you navigate to something like

https://new.expensify.com/settings/payments
https://new.expensify.com/settings/preferences

[marcaaron]

P.S. this issue is fixed by #9718 so I'm going to make it internal and assign myself.

[trjExpensify]

Kewl, taken it down from Upwork. Removing myself as a CM is not required.