[HOLD for payment 2024-05-09] [$500] Hold Request - "Hold" banner is aligned to the top when there is scan request message

[lanitochka17]

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.45-1
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
Expensify/Expensify Issue URL:
Issue reported by: Applause - Internal Team
Slack conversation:

Action Performed:

1. Go to staging.new.expensify.com
2. Go to 1:1 DM
3. Create a scan request
4. Go to request details page
5. Click 3-dot menu > Hold request
6. Add a reason and save it

Expected Result:

The "Hold" banner will be aligned in the middle of the given space

Actual Result:

The "Hold" banner is aligned to the top of the given space when there is scan request message

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

Add any screenshot/video evidence

Bug6397350_1709227408773.20240229_234646.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01dd5d1b7c81a77704
• Upwork Job ID: 1763306586849918976
• Last Price Increase: 2024-03-07
• Automatic offers:
• neonbhai | Contributor | 0

Issue Owner

Current Issue Owner: @isabelastisser

[melvin-bot]

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

[lanitochka17]

We think that this bug might be related to #wave7
CC @RachCHopkins

[lanitochka17]

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

[gijoe0295]

Proposal

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

"Hold" banner is aligned to the top when there is scan request message

What is the root cause of that problem?

We only have bottom padding for hold banner as per here. It only works when there's only it and no other banners (money request status bar) above.

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

Add a prop shouldShowPaddingTop to HoldBanner. This check will be true when there's any other status bar above (e.g., MoneyRequestHeaderStatusBar).

<HoldBanner shouldShowPaddingTop={isPending || isScanning} />

In that case, we use styles.pv3 for the HoldBanner. Otherwise, only use pb3.

What alternative solutions did you explore? (Optional)

NA

Proposal

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

Hold Request - "Hold" banner is aligned to the top when there is scan request message

What is the root cause of that problem?

Since,the last discussion on this issue i.e. this comment. The solution should be not showing a Hold banner for Scanningrequest. So here :

App/src/components/MoneyRequestHeader.tsx

Line 122 in a04481f

if (!isOnHold && (isRequestIOU || canModifyStatus)) {

we need to add a condition that if the request is scanning till then don't show hold. Also, we have just added a style for padding bottom - pb here :

App/src/components/HoldBanner.tsx

Line 13 in a1a6a74

<View style={[styles.dFlex, styles.flexRow, styles.alignItemsCenter, styles.pb3, styles.ph5, styles.borderBottom]}>

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

Here :

App/src/components/MoneyRequestHeader.tsx

Line 122 in a04481f

if (!isOnHold && (isRequestIOU || canModifyStatus)) {

we need to add a condition to check for !isScanning and also we need to add padding top i.e. pt with the same value as pb here :

App/src/components/HoldBanner.tsx

Line 13 in a1a6a74

<View style={[styles.dFlex, styles.flexRow, styles.alignItemsCenter, styles.pb3, styles.ph5, styles.borderBottom]}>

As per Comment this we need to use these styles mentioned here :

App/src/components/MoneyRequestHeaderStatusBar.tsx

Lines 21 to 28 in a04481f

	<View style={[styles.dFlex, styles.flexRow, styles.alignItemsCenter, styles.flexGrow1, styles.overflowHidden, styles.ph5, styles.pb3, borderBottomStyle]}>
	<View style={[styles.moneyRequestHeaderStatusBarBadge]}>
	<Text style={[styles.textStrong, styles.textMicroBold]}>{title}</Text>
	</View>
	<View style={[styles.flexShrink1]}>
	<Text style={[styles.textLabelSupporting]}>{description}</Text>
	</View>
	</View>

and add change it here :

App/src/components/HoldBanner.tsx

Lines 13 to 16 in a04481f

	<View style={[styles.dFlex, styles.flexRow, styles.alignItemsCenter, styles.pb3, styles.ph5, styles.borderBottom]}>
	<TextPill>{translate('iou.hold')}</TextPill>
	<Text style={[styles.textLabel, styles.pl3, styles.mw100, styles.flexShrink1]}>{translate('iou.requestOnHold')}</Text>
	</View>

To make the Hold request similar to Scanning... request ofcourse with danger background.

Just like moneyRequestHeaderBadge here :

App/src/styles/index.ts

Lines 4134 to 4143 in a04481f

	moneyRequestHeaderStatusBarBadge: {
	width: 68,
	height: variables.inputHeightSmall,
	borderRadius: variables.componentBorderRadiusSmall,
	display: 'flex',
	justifyContent: 'center',
	alignItems: 'center',
	backgroundColor: theme.border,
	marginRight: 12,
	},

We need can a new class like holdRequestHeaderBadge, we can copy the entire style but just the background can be changed to backgroundColor: theme.danger

What alternative solutions did you explore? (Optional)

Alternatively, what we can do is
Here :

App/src/components/MoneyRequestHeader.tsx

Line 122 in a04481f

if (!isOnHold && (isRequestIOU || canModifyStatus)) {

we need to add a condition to check for !isScanning and then here :

App/src/components/HoldBanner.tsx

Line 13 in a1a6a74

<View style={[styles.dFlex, styles.flexRow, styles.alignItemsCenter, styles.pb3, styles.ph5, styles.borderBottom]}>

we can add pv3 or padding vertical - 03 and remove padding-bottom or pb completely, which will make the padding equal from top and bottom to adjust the "Hold" banner in the centre.

Results

Screen.Recording.2024-03-06.at.12.33.13.PM.mp4

[isabelastisser]

@lanitochka17 I agree that this can barely be noticed. I raised it for discussion in Slack.

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~01dd5d1b7c81a77704

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @Santhosh-Sellavel (External)