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

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:

Launch New Expensify app.
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?

Screenshots/Videos

View all open jobs on GitHub

@stephanieelliott

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

@Gonals

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

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

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

@stephanieelliott

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

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

Production

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)

@koko57

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

cc @koko57

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

Navigation Menu

Repository navigation

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

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

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)

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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

	{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 />
	)}

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

Description

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Activity

melvin-bot commented on Apr 9, 2024

melvin-bot commented on Apr 9, 2024

github-actions commented on Apr 9, 2024

izarutskaya commented on Apr 9, 2024

izarutskaya commented on Apr 9, 2024

izarutskaya commented on Apr 9, 2024

Krishna2323 commented on Apr 9, 2024

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)

Pujan92 commented on Apr 9, 2024

Gonals commented on Apr 9, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions