Wallet - Offline indicator appears below the card and not the bottom of page

[izarutskaya]

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.61-0
Reproducible in staging?: Y
Reproducible in production?: N
Logs: https://stackoverflow.com/c/expensify/questions/4856
Issue reported by: Applause-Internal team

Action Performed:

1. Launch New Expensify app.
2. Paste the link https://staging.new.expensify.com/settings/wallet/add-bank-account-refactor

in chat.
3. Tap on the link.
4. Go offline.

Expected Result:

The offline indicator will appear at the bottom of the page.

Actual Result:

The offline indicator appears below the card instead of the bottom of the page.

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

View all open jobs on GitHub

[melvin-bot]

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

[melvin-bot]

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

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

[izarutskaya]

@stephanieelliott 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.

[izarutskaya]

We think this issue might be related to the #vip-bills.

[izarutskaya]

Production

[Krishna2323]

Proposal

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

Wallet - Offline indicator appears below the card and not the bottom of page

What is the root cause of that problem?

In AddBankAccountPage we don't pass shouldShowOfflineIndicatorInWideScreen to ScreenWrapper and we haven't wrapped the children in a container which takes full height.

App/src/pages/EnablePayments/AddBankAccount/AddBankAccount.tsx

Lines 85 to 89 in 1ba0795

	<ScreenWrapper
	testID={AddBankAccount.displayName}
	includeSafeAreaPaddingBottom={false}
	shouldEnablePickerAvoiding={false}
	>

App/src/pages/EnablePayments/AddBankAccount/AddBankAccount.tsx

Lines 95 to 111 in 1ba0795

	{isSetupTypeChosen ? (
	<>
	<View style={[styles.ph5, styles.mb5, styles.mt3, {height: CONST.BANK_ACCOUNT.STEPS_HEADER_HEIGHT}]}>
	<InteractiveStepSubHeader
	startStepIndex={0}
	stepNames={CONST.WALLET.STEP_NAMES}
	/>
	</View>
	<SubStep
	isEditing={isEditing}
	onNext={nextScreen}
	onMove={moveTo}
	/>
	</>
	) : (
	<SetupMethod />
	)}

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

We need to first pass pass shouldShowOfflineIndicatorInWideScreen to ScreenWrapper and wrap the children in a container with style flex1 to take full height. We don't need to wrap HeaderWithBackButton.

Pseudo Code

```javascript {isSetupTypeChosen ? ( <> ) : ( )} ```

What alternative solutions did you explore? (Optional)

[Pujan92]

This will be handled in the follow up PR of #36648 and deployblocker label can be removed based on comment.

cc @koko57

[Gonals]

Since this is a known issue being worked on on the follow-up, I'm going to close it for now.