[HOLD for payment 2023-10-24] [$250] Additional Details - Duplicate offline indicator in Enable Payment Page.

[kbecciv]

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.3.81-0
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: @hungvu193
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1697012903021189

Action Performed:

1. Login with any account
2. Go to Enable Payment page (/enable-payments).
3. Go offline
4. Observer the offline indicator.

Expected Result:

Offline indicator shouldn't duplicate

Actual Result:

Duplicate offline indicator is duplicate

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

Android: Native

Android: mWeb Chrome

iOS: Native

RPReplay_Final1697012763.MP4

iOS: mWeb Safari

RPReplay_Final1697073270.MP4

MacOS: Chrome / Safari

MacOS: Desktop

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~014c703cecba895920
• Upwork Job ID: 1712458057448759296
• Last Price Increase: 2023-10-12
• Automatic offers:
• akinwale | Reviewer | 27183809
• hungvu193 | Contributor | 27183810
• hungvu193 | Reporter | 27183812

[melvin-bot]

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

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~014c703cecba895920

[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 - @sobitneupane (External)

[kbecciv]

Proposal by: @hungvu193
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1697012903021189

Proposal

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

Offline Indicator is duplicate at Enable Payment page when offline.

What is the root cause of that problem?

We're using ScreenWrapper to wrap our logic of EnablePaymentPage here, however inside AdditionalDetailsStep we also have the OfflineIndicator which caused this issue:

App/src/pages/EnablePayments/EnablePaymentsPage.js

Lines 49 to 51 in 771b8c5

	<ScreenWrapper
	includeSafeAreaPaddingBottom={false}
	testID={EnablePaymentsPage.displayName}

App/src/pages/EnablePayments/AdditionalDetailsStep.js

Line 246 in 771b8c5

<OfflineIndicator containerStyles={[styles.mh5, styles.mb3]} />

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

Since ScreenWrapper already had the OfflineIndicator itself. We can remove OfflineIndicator inside AdditionalDetailsStep.

Deep diving, AdditionalDetailsStep have another view with ScreenWrapper here:

App/src/pages/EnablePayments/AdditionalDetailsStep.js

Lines 148 to 151 in 771b8c5

	if (!_.isEmpty(walletAdditionalDetails.questions)) {
	return (
	<ScreenWrapper
	style={[styles.flex1, styles.pt0]}

We should add shouldShowOfflineIndicator={false} to this ScreenWrapper, or replace it with View to avoid duplicate OfflineIndicator.

Also inside OnfidoStep, we have FullPageOfflineBlockingView, so when we render the OnfidoStep we will have both FullPageOfflineBlockingView and OfflineIndicator at the bottom:

App/src/pages/EnablePayments/OnfidoStep.js

Lines 64 to 66 in 771b8c5

	<FullPageOfflineBlockingView>
	{shouldShowOnfido ? (
	<Onfido

we should avoid that by adding props shouldShowOfflineIndicator to our ScreenWrapper of EnablePaymentsPage component with the condition that only show the OfflineIndicator when offline and the currentStep is not Onfido.

What alternative solutions did you explore? (Optional)

N/A

[hungvu193]

Proposal by: @hungvu193 Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1697012903021189

Proposal

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

Offline Indicator is duplicate at Enable Payment page when offline.

What is the root cause of that problem?

We're using ScreenWrapper to wrap our logic of EnablePaymentPage here, however inside AdditionalDetailsStep we also have the OfflineIndicator which caused this issue:

App/src/pages/EnablePayments/EnablePaymentsPage.js

Lines 49 to 51 in 771b8c5

	<ScreenWrapper
	includeSafeAreaPaddingBottom={false}
	testID={EnablePaymentsPage.displayName}

App/src/pages/EnablePayments/AdditionalDetailsStep.js

Line 246 in 771b8c5

<OfflineIndicator containerStyles={[styles.mh5, styles.mb3]} />

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

Since ScreenWrapper already had the OfflineIndicator itself. We can remove OfflineIndicator inside AdditionalDetailsStep.

Deep diving, AdditionalDetailsStep have another view with ScreenWrapper here:

App/src/pages/EnablePayments/AdditionalDetailsStep.js

Lines 148 to 151 in 771b8c5

	if (!_.isEmpty(walletAdditionalDetails.questions)) {
	return (
	<ScreenWrapper
	style={[styles.flex1, styles.pt0]}

We should add shouldShowOfflineIndicator={false} to this ScreenWrapper, or replace it with View to avoid duplicate OfflineIndicator.
Also inside OnfidoStep, we have FullPageOfflineBlockingView, so when we render the OnfidoStep we will have both FullPageOfflineBlockingView and OfflineIndicator at the bottom:

App/src/pages/EnablePayments/OnfidoStep.js

Lines 64 to 66 in 771b8c5

	<FullPageOfflineBlockingView>
	{shouldShowOnfido ? (
	<Onfido

we should avoid that by adding props shouldShowOfflineIndicator to our ScreenWrapper of EnablePaymentsPage component with the condition that only show the OfflineIndicator when offline and the currentStep is not Onfido.

What alternative solutions did you explore? (Optional)

N/A

[melvin-bot]

Upwork job price has been updated to $250

[mountiny]

decreasing the price as its minor issue

[gs3bopar]

Contributor details
Your Expensify account email: [email protected]
Upwork Profile Link: https://www.upwork.com/freelancers/~0176028098f8a29acb

[melvin-bot]

✅ Contributor details stored successfully. Thank you for contributing to Expensify!

[sobitneupane]

@laurenreidexpensify I will be unavailable next week. Therefore, I am unassigning myself from the issue. Please feel free to assign it to another C+.

[melvin-bot]

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

[ghost]

I m interested to work

[akinwale]

@hungvu193's proposal correctly identifies the root cause and the suggested solution is comprehensive enough with attention to detail. I recommend moving forward with this.

🎀 👀 🎀 C+ reviewed.

[melvin-bot]

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

[robertjchen]

Thanks, the proposal makes sense to me 👍

[melvin-bot]

📣 @akinwale 🎉 An offer has been automatically sent to your Upwork account for the Reviewer role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job

[melvin-bot]

📣 @hungvu193 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[melvin-bot]

📣 @hungvu193 🎉 An offer has been automatically sent to your Upwork account for the Reporter role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job

[melvin-bot]

🎯 ⚡️ Woah @akinwale / @hungvu193, great job pushing this forwards! ⚡️

The pull request got merged within 3 working days of assignment, so this job is eligible for a 50% #urgency bonus 🎉

• when @hungvu193 got assigned: 2023-10-13 17:21:39 Z
• when the PR got merged: 2023-10-15 15:12:25 UTC

On to the next one 🚀

[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.3.85-4 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Fix duplicate offline indicator enable payment  #29600

If no regressions arise, payment will be issued on 2023-10-24. 🎊

After the hold period is over and BZ checklist items are completed, please complete any of the applicable payments for this issue, and check them off once done.

• External issue reporter
• Contributor that fixed the issue
• Contributor+ that helped on the issue and/or PR

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

• @akinwale requires payment offer (Reviewer)
• @hungvu193 requires payment offer (Contributor)
• @hungvu193 requires payment offer (Contributor)

As a reminder, here are the bonuses/penalties that should be applied for any External issue:

• Merged PR within 3 business days of assignment - 50% bonus
• Merged PR more than 9 business days after assignment - 50% penalty

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

• [@akinwale] The PR that introduced the bug has been identified. Link to the PR:
• [@akinwale] 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:
• [@akinwale] 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:
• [@akinwale] Determine if we should create a regression test for this bug.
• [@akinwale] 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.
• [@laurenreidexpensify] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[laurenreidexpensify]

Payment Summary

• @akinwale - C+ $250 + 50% urgency bonus - payment issued in Upwork
• @hungvu193 - Bug Report $50 - payment issued in Upwork
• @hungvu193 - Issue Fix $250 + 50% urgency bonus - payment issued in Upwork

[laurenreidexpensify]

@akinwale bump for checklist so we can close this one out. Thanks

[akinwale]

@akinwale bump for checklist so we can close this one out. Thanks

Will get to it in a few hours.

[akinwale]

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:

• [@akinwale] The PR that introduced the bug has been identified. Link to the PR:
• [@akinwale] 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:
• [@akinwale] 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:

Not a regression. This particular case was missed when the Additional Details page was added.

• [@akinwale] Determine if we should create a regression test for this bug.
• [@akinwale] 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.

1. Launch Expensify
2. Navigate to the Enable Payment page (/enable-payments).
3. Turn off the network connection on the device to go offline.
4. Scroll to the bottom of the page (on smaller screens).
5. Verify that only one "network offline" message is visible.

Do we agree 👍 or 👎?

[akinwale]

@laurenreidexpensify Done!