Offline message not showing in Country and State selection screen

[kavimuru]

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. Go offline -> Go to settings
2. Click profile -> Click personal details
3. Click home address-> Click State/Country

Expected Result:

It should show offline message like other screens

Actual Result:

Country/State picker not showing offline message

Workaround:

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

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android / native
• Android / Chrome
• iOS / native
• iOS / Safari
• MacOS / Chrome / Safari
• MacOS / Desktop

Version Number: 1.3.49-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
Notes/Photos/Videos: Any additional supporting documentation

Image.from.iOS.MP4

FMOK9628.1.MP4

Expensify/Expensify Issue URL:
Issue reported by: @DinalJivani
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1690741191378189

View all open jobs on GitHub

[dukenv0307]

Proposal

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

Offline message not showing in Country and State selection screen

What is the root cause of that problem?

The OfflineIndicator is missing from StateSelectorModal and CountrySelectorModal

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

We can add the CountrySelectorModal in those components to improve consistency

What alternative solutions did you explore? (Optional)

We can add ScreenWrapper which already implement OfflineIndicator to those Modal components

[ahmedGaber93]

Proposal

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

Offline message not showing in Country and State selection screen

What is the root cause of that problem?

CountrySelectorModal is modal cover screen in small screens and not have OfflineIndicator or use ScreenWrapper

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

add OfflineIndicator at the end of CountrySelectorModal

<Modal>

  ...
  <OfflineIndicator />
</Modal>

What alternative solutions did you explore? (Optional)

1. wrap CountrySelectorModal content with ScreenWrapper to handle OfflineIndicator visibility

<Modal>
  <ScreenWrapper
    includePaddingTop={false}
    includeSafeAreaPaddingBottom={false}>
  
    // modal content
  
  </ScreenWrapper>
</Modal>

This will show OfflineIndicator, but it displayed with extra margin bottom.

2. fix extra margin bottom.

This because we add 2 margin, first for modal here

App/src/styles/getModalStyles/getBaseModalStyles.js

Line 241 in eb02006

shouldAddBottomSafeAreaPadding = true;

and second for ScreenWrapper here

App/src/components/ScreenWrapper/index.js

Lines 92 to 95 in eb02006

	// We always need the safe area padding bottom if we're showing the offline indicator since it is bottom-docked.
	if (this.props.includeSafeAreaPaddingBottom || this.props.network.isOffline) {
	paddingStyle.paddingBottom = paddingBottom;
	}

to fix this we need to remove modal margin by setting shouldAddBottomSafeAreaPadding = false for MODAL_TYPE.RIGHT_DOCKED.

this fix will affect on other RIGHT_DOCKED modals AvatarCropModal YearPickerModal StateSelectorModal, but we need that because we also need to show OfflineIndicator for them

this issue may also need to fixed in this places AvatarCropModal YearPickerModal StateSelectorModal

[melvin-bot]

Triggered auto assignment to @sakluger (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

[sakluger]

It seems like there's more to this issue than just the offline indicator not showing up on those pages when you switch to airplane mode. In the second video, you can't even load the personal details screen while offline, which I think you should be able to do.

@jasperhuangg do you think there's a chance this is also related to the recent changes around personal details?

[sakluger]

Asked Jasper in the original Slack thread.

[ahmedGaber93]

This issue is covered in this PR #24164
@DinalJivani I think you're still eligible for the bounty of this issue reporter, because your report in Slack is before @hungvu193's proposal #23165 (comment) that cover this issue.