Offline message not showing in Country and State selection screen

@DinalJivani

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:

Go offline -> Go to settings
Click profile -> Click personal details
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?

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

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

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)

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.

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

@sakluger

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

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

@jasperhuangg

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?

Asked Jasper in the original Slack thread.

@DinalJivani

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.

@ahmedGaber93

@ahmedGaber93 good catch! I asked on that PR if it would fix this issue as well (PR comment).

If that one does fix this issue, then we will close this one without pay, since that issue was reported 20 days ago vs 10 days ago for this one.

The other PR fixed this issue as well, closing 👍

Navigation Menu

Repository navigation

Offline message not showing in Country and State selection screen #24046

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

Bug0 Triage Checklist (Main S/O)

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

	// 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;
	}

Offline message not showing in Country and State selection screen #24046

Description

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Activity

dukenv0307 commented on Aug 2, 2023

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

ahmedGaber93 commented on Aug 2, 2023

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

melvin-bot commented on Aug 2, 2023

melvin-bot commented on Aug 2, 2023

Bug0 Triage Checklist (Main S/O)

sakluger commented on Aug 5, 2023

sakluger commented on Aug 7, 2023

ahmedGaber93 commented on Aug 8, 2023

sakluger commented on Aug 9, 2023

sakluger commented on Aug 10, 2023

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions