Fix: Hold request style and visibility

src/components/MoneyReportHeaderStatusBar.tsx

@@ -5,8 +5,8 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import * as NextStepUtils from '@libs/NextStepUtils';
 import CONST from '@src/CONST';
 import type ReportNextStep from '@src/types/onyx/ReportNextStep';
+import Badge from './Badge';
 import RenderHTML from './RenderHTML';
-import Text from './Text';
 
 type MoneyReportHeaderStatusBarProps = {
     /** The next step for the report */
@@ -24,8 +24,11 @@ function MoneyReportHeaderStatusBar({nextStep}: MoneyReportHeaderStatusBarProps)
 
     return (
         <View style={[styles.dFlex, styles.flexRow, styles.alignItemsCenter, styles.overflowHidden, styles.w100]}>
-            <View style={styles.moneyRequestHeaderStatusBarBadge}>
-                <Text style={[styles.textLabel, styles.textMicroBold]}>{translate(nextStep.title === CONST.NEXT_STEP.FINISHED ? 'iou.finished' : 'iou.nextStep')}</Text>
+            <View style={[styles.mr3]}>
+                <Badge
+                    text={translate(nextStep.title === CONST.NEXT_STEP.FINISHED ? 'iou.finished' : 'iou.nextStep')}
+                    badgeStyles={styles.ml0}
+                />
             </View>
             <View style={[styles.dFlex, styles.flexRow, styles.flexShrink1]}>
                 <RenderHTML html={messageContent} />

src/components/MoneyRequestHeader.tsx

@@ -18,7 +18,6 @@ import type {Policy, Report, ReportAction, ReportActions, Session, Transaction}
 import type {OriginalMessageIOU} from '@src/types/onyx/OriginalMessage';
 import ConfirmModal from './ConfirmModal';
 import HeaderWithBackButton from './HeaderWithBackButton';
-import HoldBanner from './HoldBanner';
 import * as Expensicons from './Icon/Expensicons';
 import MoneyRequestHeaderStatusBar from './MoneyRequestHeaderStatusBar';
 import ProcessMoneyRequestHoldMenu from './ProcessMoneyRequestHoldMenu';
@@ -138,7 +137,7 @@ function MoneyRequestHeader({
                 onSelected: () => changeMoneyRequestStatus(),
             });
         }
-        if (!isOnHold && (isRequestIOU || canModifyStatus)) {
+        if (!isOnHold && (isRequestIOU || canModifyStatus) && !isScanning) {
             threeDotsMenuItems.push({
                 icon: Expensicons.Stopwatch,
                 text: translate('iou.holdExpense'),
@@ -206,10 +205,17 @@ function MoneyRequestHeader({
                     <MoneyRequestHeaderStatusBar
                         title={translate('iou.receiptStatusTitle')}
                         description={translate('iou.receiptStatusText')}
+                        shouldShowBorderBottom={!isOnHold}
+                    />
+                )}
+                {isOnHold && (
+                    <MoneyRequestHeaderStatusBar
+                        title={translate('iou.hold')}
+                        description={translate('iou.expenseOnHold')}
                         shouldShowBorderBottom
+                        danger
                     />
                 )}
-                {isOnHold && <HoldBanner />}
             </View>
             <ConfirmModal
                 title={translate('iou.deleteExpense')}

src/components/MoneyRequestHeaderStatusBar.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import {View} from 'react-native';
 import useThemeStyles from '@hooks/useThemeStyles';
+import Badge from './Badge';
 import Text from './Text';
 
 type MoneyRequestHeaderStatusBarProps = {
@@ -12,15 +13,22 @@ type MoneyRequestHeaderStatusBarProps = {
 
     /** Whether we show the border bottom */
     shouldShowBorderBottom: boolean;
+
+    /** Whether we should use the danger theme color */
+    danger?: boolean;
 };
 
-function MoneyRequestHeaderStatusBar({title, description, shouldShowBorderBottom}: MoneyRequestHeaderStatusBarProps) {
+function MoneyRequestHeaderStatusBar({title, description, shouldShowBorderBottom, danger = false}: MoneyRequestHeaderStatusBarProps) {
     const styles = useThemeStyles();
     const borderBottomStyle = shouldShowBorderBottom ? styles.borderBottom : {};
     return (
         <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 style={[styles.mr3]}>
+                <Badge
+                    text={title}
+                    badgeStyles={styles.ml0}
+                    error={danger}
+                />
             </View>
             <View style={[styles.flexShrink1]}>
                 <Text style={[styles.textLabelSupporting]}>{description}</Text>

src/pages/ProcessMoneyRequestHoldPage.tsx

@@ -33,7 +33,7 @@ function ProcessMoneyRequestHoldPage() {
 
     return (
         <HeaderPageLayout
-            title={translate('common.back')}
+            title={translate('iou.hold')}
             footer={footerComponent}
             onBackButtonPress={() => Navigation.goBack()}
             testID={ProcessMoneyRequestHoldPage.displayName}

src/styles/index.ts

@@ -4306,17 +4306,6 @@ const styles = (theme: ThemeColors) =>
             alignSelf: 'center',
         },
 
-        moneyRequestHeaderStatusBarBadge: {
-            width: 68,
-            height: variables.inputHeightSmall,
-            borderRadius: variables.componentBorderRadiusSmall,
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-            backgroundColor: theme.border,
-            marginRight: 12,
-        },
-
         staticHeaderImage: {
             minHeight: 240,
         },