[HOLD for payment 2024-03-29] [$500] [Wave Collect] [Ideal Nav] Incorrect animation direction on Wallet and Troubleshooting page

[lanitochka17]

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: 1.4.44-7
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:

Issue found when executing PR #37078

Action Performed:

Pre-requisite: user must be logged in and have an Expensify card assigned

1. Go to Settings > Wallet

2. Tap on Expensify card

3. Tap on the back button

4. Tap on the avatar to open the account settings

5. Tap about

6. Tap troubleshoot

7. Then Tap <until you reach LHN

8. Observe the sliding behavior

Expected Result:

A transition animation from left to right should appear (going back to previous page)

---

Opening each page account settings, about and troubleshootshould slige from the right overtop of the previous page and When pressing < button the page should slide away to the right

Actual Result:

A transition animation from right to left appears (as if it were a new page, not a previous one)

---

When pressing back button Troubleshoot page, About page slides in from the right, again, overtop Troubleshoot
Similarly pressing back button again, Profile slides in from the right
Finally, pressing back button, Account Settings slides away to the right which is the correct behavior

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

Bug6394726_1709070563566.Slts0498_1_.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01588c7a6a3b8f24cb
• Upwork Job ID: 1762991723171692544
• Last Price Increase: 2024-03-12

Issue Owner

Current Issue Owner: @allroundexperts

[melvin-bot]

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

[lanitochka17]

@kadiealexander FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[apeyada]

Proposal

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

Wallet - When going back to Wallet from Expensify card, animation goes from right lo left

What is the root cause of that problem?

App/src/pages/settings/Wallet/ExpensifyCardPage.tsx

Line 127 in 4fcfbb0

onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_WALLET)}

App/src/pages/settings/Wallet/ExpensifyCardPage.tsx

Line 115 in 4fcfbb0

return <NotFoundPage onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_WALLET)} />;

Here, we go to wallet page using goback(ROUTES.SETTINGS_WALLET)
This now became issue after ideal nav.

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

As wallet page is already in center pane, it's fine to navigate goBack without param even when deeplink to this page and click back button

App/src/pages/settings/Wallet/ExpensifyCardPage.tsx

Line 127 in 4fcfbb0

onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_WALLET)}

onBackButtonPress={() => Navigation.goBack()}
or we can remove this line as it's already default prop value in HeaderWithBackButton

---

App/src/pages/settings/Wallet/ExpensifyCardPage.tsx

Line 115 in 4fcfbb0

return <NotFoundPage onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_WALLET)} />;

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

---

(optional)
use FullPageNotFoundView instead of early returning NotFoundPage when isNotFound

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~01588c7a6a3b8f24cb

[melvin-bot]

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

[Santhosh-Sellavel]

Back from OOO Will update in a day.

[Santhosh-Sellavel]

Pre-requisite: user must be logged in and have an Expensify card assigned

@kadiealexander Can contributor/C+ get an account with Expensify card or enable one?

[ghost]

i don't think a contributor can get Expensify card. @Santhosh-Sellavel

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[kadiealexander]

Asking about this internally here.

[brunovjk]

I managed to reproduce the same issue in the 'Troubleshoot' tab:

repro_37359

repro_37359.mp4

[melvin-bot]

@kadiealexander, @Santhosh-Sellavel Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[kadiealexander]

@Expensify/design would love your thoughts on whether this is worth fixing! We're trying to focus on bugs that align with a #wave and are affecting the usability of the site, which this isn't really.

[dubielzyk-expensify]

This is worth fixing imo cause it's very disorienting for the animation to go forward when in reality you're going back. I also recon this should be a reasonably quick fix as it looks like a regression.

The expected behavior is that the screen animates off screen to the right when tapping back.

[shawnborton]

Agree.

cc @luacmartins @mountiny @trjExpensify as I think this is related to the weird goBack bugs we've seen - not sure if we have another issue that is tracking those improvements or if we should treat this as a separate bug.

[trjExpensify]

Yeah, I think it's worth fixing. @adamgrzybowski is spearheading sprucing up goBack, but I believe Adam has been OoO for a bit until today. This is the issue for the refactor: #35938 CC: @hayata-suenaga

[melvin-bot]

@kadiealexander @Santhosh-Sellavel 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!

[allroundexperts]

Taking over. @kadiealexander Can you please assign this issue and the PR to me?

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.4.55-3 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Incorrect animation direction on Wallet, Save The World, Exit Survey, Profile Contact and Troubleshooting page #38190

If no regressions arise, payment will be issued on 2024-03-29. 🎊

For reference, here are some details about the assignees on this issue:

• @allroundexperts requires payment through NewDot Manual Requests
• @GandalfGwaihir requires payment (Needs manual offer from BZ)

[melvin-bot]

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@allroundexperts] The PR that introduced the bug has been identified. Link to the PR:
• [@allroundexperts] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:
• [@allroundexperts] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:
• [@allroundexperts] Determine if we should create a regression test for this bug.
• [@allroundexperts] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
• [@kadiealexander] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[mountiny]

$500 to @allroundexperts and $500 to @GandalfGwaihir

[kadiealexander]

Payouts due:

• Contributor: $500 @GandalfGwaihir
• Contributor+: $500 @allroundexperts

Upwork job is here.

[kadiealexander]

@GandalfGwaihir I can't find you on Upwork, can you please apply here?

@allroundexperts please don't forget the checklist!

[allgandalf]

@GandalfGwaihir I can't find you on Upwork, can you please apply here?

Applied just now, can you check please :)

[kadiealexander]

Offer sent :)

[allgandalf]

Accepted, thanks:)

…

On Thu, Apr 4, 2024 at 9:40 AM kadiealexander ***@***.***> wrote: Offer sent :) — Reply to this email directly, view it on GitHub <#37359 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/A2LMYIB5SUBP4WMATCMHMY3Y3TOGBAVCNFSM6AAAAABD457AIWVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDAMZWGE2DQNJWGY> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[melvin-bot]

@allroundexperts, @mountiny, @kadiealexander, @GandalfGwaihir Huh... This is 4 days overdue. Who can take care of this?

[kadiealexander]

@allroundexperts please complete the checklist so we can get this closed out.

[allroundexperts]

On it today.

[allroundexperts]

Checklist

1. There isn't a single PR which introduced this. I think over the time, we were just following the same pattern, and as a result we had a bunch of pages with similar problem.
2. N/A
3. N/A
4. A regression test would be useful. The steps mentioned un the OP look good enough to me!

[kadiealexander]

Payment summary here.

[JmillsExpensify]

$500 approved for @allroundexperts