[HOLD for payment 2024-04-09] Web - Reimbursements - There is no offline indicator message on 'Reimbursements' page

[kbecciv]

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

---

Version Number: 1.4.57-2
Reproducible in staging?: y
Reproducible in production?: n
Issue reported by: Applause - Internal team

Action Performed:

1. Create a workspace
2. Appy offline mode
3. Navigate to 'Reimbursements' page of the workspace

Expected Result:

'You appear to be offline.' should be displayed at the bottom of the page

Actual Result:

'You appear to be offline.' is not displayed at the bottom of the page

Workaround:

n/a

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

Bug6428613_1711540591324.Screen_Recording_2024-03-27_at_1.34.24_in_the.1.mp4

View all open jobs on GitHub

[github-actions]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[melvin-bot]

Triggered auto assignment to @danieldoglas (Engineering), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[ZhenjaHorbach]

Proposal

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

Web - Reimbursements - There is no offline indicator message on 'Reimbursements' page

What is the root cause of that problem?

The main problem with issue is that we don't pass shouldShowOfflineIndicatorInWideScreen param

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

To fix this issue we can add this param

App/src/pages/workspace/reimburse/WorkspaceReimbursePage.tsx

Lines 18 to 25 in 64cfc7e

	<WorkspacePageWithSections
	shouldUseScrollView
	headerText={translate('workspace.common.reimburse')}
	route={route}
	guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_REIMBURSE}
	shouldSkipVBBACall
	shouldShowLoading={false}
	>

The same param we have on WorkspaceBillsPage

App/src/pages/workspace/bills/WorkspaceBillsPage.tsx

Lines 22 to 28 in f914b52

	<WorkspacePageWithSections
	shouldUseScrollView
	headerText={translate('workspace.common.bills')}
	route={route}
	guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_BILLS}
	shouldShowOfflineIndicatorInWideScreen
	>

What alternative solutions did you explore? (Optional)

NA

[habasefa]

Proposal

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

Offline indicator is not visible on widescreen Reimbursements page when offline,

What is the root cause of that problem?

A defaultModalContainer style is not being passed to ScreenWrapper.

App/src/pages/workspace/WorkspacePageWithSections.tsx

Lines 157 to 163 in 69a2849

	<ScreenWrapper
	includeSafeAreaPaddingBottom={false}
	shouldEnablePickerAvoiding={false}
	shouldEnableMaxHeight
	testID={WorkspacePageWithSections.displayName}
	shouldShowOfflineIndicatorInWideScreen={shouldShowOfflineIndicatorInWideScreen && !shouldShow}
	>

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

Passing defaultModalContainer style to ScreenWrapper like in here:

App/src/pages/workspace/WorkspaceMembersPage.tsx

Lines 543 to 548 in 69a2849

	<ScreenWrapper
	includeSafeAreaPaddingBottom={false}
	style={[styles.defaultModalContainer]}
	testID={WorkspaceMembersPage.displayName}
	shouldShowOfflineIndicatorInWideScreen
	>

What alternative solutions did you explore? (Optional)

[allgandalf]

Regression from #35399

[joekaufmanexpensify]

cc @ruben-rebelo as you worked on that PR

[danieldoglas]

IMO we don't need to block the deploy on this though.