Merge pull request #47368 from Expensify/revert-46754-update-hold-tra…

…nsactions-styles Revert "Update held transactions styles"
Expensify · Aug 13, 2024 · a14668a · a14668a
2 parents 568c71f + b1b1c7d
commit a14668a
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 18 deletions.
diff --git a/src/components/MoneyReportHeader.tsx b/src/components/MoneyReportHeader.tsx
@@ -18,8 +18,8 @@ import * as IOU from '@userActions/IOU';
 import * as TransactionActions from '@userActions/Transaction';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
-import type {Route} from '@src/ROUTES';
 import ROUTES from '@src/ROUTES';
+import type {Route} from '@src/ROUTES';
 import type * as OnyxTypes from '@src/types/onyx';
 import type {PaymentMethodType} from '@src/types/onyx/OriginalMessage';
 import type IconAsset from '@src/types/utils/IconAsset';
@@ -30,8 +30,8 @@ import HeaderWithBackButton from './HeaderWithBackButton';
 import Icon from './Icon';
 import * as Expensicons from './Icon/Expensicons';
 import MoneyReportHeaderStatusBar from './MoneyReportHeaderStatusBar';
-import type {MoneyRequestHeaderStatusBarProps} from './MoneyRequestHeaderStatusBar';
 import MoneyRequestHeaderStatusBar from './MoneyRequestHeaderStatusBar';
+import type {MoneyRequestHeaderStatusBarProps} from './MoneyRequestHeaderStatusBar';
 import type {ActionHandledType} from './ProcessMoneyReportHoldMenu';
 import ProcessMoneyReportHoldMenu from './ProcessMoneyReportHoldMenu';
 import ProcessMoneyRequestHoldMenu from './ProcessMoneyRequestHoldMenu';
@@ -211,13 +211,13 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea
             }
         }
         if (hasOnlyHeldExpenses) {
-            return {icon: getStatusIcon(Expensicons.Stopwatch), description: translate('iou.expensesOnHold')};
+            return {title: translate('violations.hold'), description: translate('iou.expensesOnHold'), danger: true};
         }
         if (allHavePendingRTERViolation) {
-            return {icon: getStatusIcon(Expensicons.Hourglass), description: translate('iou.pendingMatchWithCreditCardDescription')};
+            return {title: getStatusIcon(Expensicons.Hourglass), description: translate('iou.pendingMatchWithCreditCardDescription')};
         }
         if (hasScanningReceipt) {
-            return {icon: getStatusIcon(Expensicons.ReceiptScan), description: translate('iou.receiptScanInProgressDescription')};
+            return {title: getStatusIcon(Expensicons.ReceiptScan), description: translate('iou.receiptScanInProgressDescription')};
         }
     };
 
@@ -378,8 +378,9 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea
                     {shouldShowNextStep && <MoneyReportHeaderStatusBar nextStep={nextStep} />}
                     {statusBarProps && (
                         <MoneyRequestHeaderStatusBar
-                            icon={statusBarProps.icon}
+                            title={statusBarProps.title}
                             description={statusBarProps.description}
+                            danger={statusBarProps.danger}
                         />
                     )}
                 </View>

diff --git a/src/components/MoneyRequestHeader.tsx b/src/components/MoneyRequestHeader.tsx
@@ -1,8 +1,8 @@
 import type {ReactNode} from 'react';
 import React, {useCallback, useEffect, useState} from 'react';
 import {View} from 'react-native';
-import type {OnyxEntry} from 'react-native-onyx';
 import {useOnyx} from 'react-native-onyx';
+import type {OnyxEntry} from 'react-native-onyx';
 import useLocalize from '@hooks/useLocalize';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -80,17 +80,17 @@ function MoneyRequestHeader({report, parentReportAction, policy, shouldUseNarrow
 
     const getStatusBarProps: () => MoneyRequestHeaderStatusBarProps | undefined = () => {
         if (isOnHold) {
-            return {icon: getStatusIcon(Expensicons.Stopwatch), description: isDuplicate ? translate('iou.expenseDuplicate') : translate('iou.expenseOnHold')};
+            return {title: translate('violations.hold'), description: isDuplicate ? translate('iou.expenseDuplicate') : translate('iou.expenseOnHold'), danger: true};
         }
 
         if (TransactionUtils.isExpensifyCardTransaction(transaction) && TransactionUtils.isPending(transaction)) {
-            return {icon: getStatusIcon(Expensicons.CreditCardHourglass), description: translate('iou.transactionPendingDescription')};
+            return {title: getStatusIcon(Expensicons.CreditCardHourglass), description: translate('iou.transactionPendingDescription')};
         }
         if (TransactionUtils.hasPendingRTERViolation(TransactionUtils.getTransactionViolations(transaction?.transactionID ?? '-1', transactionViolations))) {
-            return {icon: getStatusIcon(Expensicons.Hourglass), description: translate('iou.pendingMatchWithCreditCardDescription')};
+            return {title: getStatusIcon(Expensicons.Hourglass), description: translate('iou.pendingMatchWithCreditCardDescription')};
         }
         if (isScanning) {
-            return {icon: getStatusIcon(Expensicons.ReceiptScan), description: translate('iou.receiptScanInProgressDescription')};
+            return {title: getStatusIcon(Expensicons.ReceiptScan), description: translate('iou.receiptScanInProgressDescription')};
         }
     };
 
@@ -185,8 +185,9 @@ function MoneyRequestHeader({report, parentReportAction, policy, shouldUseNarrow
                 {statusBarProps && (
                     <View style={[styles.ph5, styles.pb3, styles.borderBottom]}>
                         <MoneyRequestHeaderStatusBar
-                            icon={statusBarProps.icon}
+                            title={statusBarProps.title}
                             description={statusBarProps.description}
+                            danger={statusBarProps.danger}
                         />
                     </View>
                 )}

diff --git a/src/components/MoneyRequestHeaderStatusBar.tsx b/src/components/MoneyRequestHeaderStatusBar.tsx
@@ -2,24 +2,38 @@ import type {ReactNode} from 'react';
 import React from 'react';
 import {View} from 'react-native';
 import useThemeStyles from '@hooks/useThemeStyles';
+import Badge from './Badge';
 import Text from './Text';
 
 type MoneyRequestHeaderStatusBarProps = {
-    /** Icon displayed in badge */
-    icon: ReactNode;
+    /** Title displayed in badge */
+    title: string | ReactNode;
 
     /** Banner Description */
     description: string;
 
+    /** Whether we should use the danger theme color */
+    danger?: boolean;
+
     /** Whether we style flex grow */
     shouldStyleFlexGrow?: boolean;
 };
 
-function MoneyRequestHeaderStatusBar({icon, description, shouldStyleFlexGrow = true}: MoneyRequestHeaderStatusBarProps) {
+function MoneyRequestHeaderStatusBar({title, description, danger = false, shouldStyleFlexGrow = true}: MoneyRequestHeaderStatusBarProps) {
     const styles = useThemeStyles();
     return (
         <View style={[styles.dFlex, styles.flexRow, styles.alignItemsCenter, shouldStyleFlexGrow && styles.flexGrow1, styles.overflowHidden, styles.headerStatusBarContainer]}>
-            <View style={styles.mr2}>{icon}</View>
+            {typeof title === 'string' ? (
+                <View style={[styles.mr3]}>
+                    <Badge
+                        text={title}
+                        badgeStyles={styles.ml0}
+                        error={danger}
+                    />
+                </View>
+            ) : (
+                <View style={styles.mr2}>{title}</View>
+            )}
             <View style={[styles.flexShrink1]}>
                 <Text style={[styles.textLabelSupporting]}>{description}</Text>
             </View>

diff --git a/src/pages/iou/SplitBillDetailsPage.tsx b/src/pages/iou/SplitBillDetailsPage.tsx
@@ -107,7 +107,7 @@ function SplitBillDetailsPage({personalDetails, report, route, reportActions, tr
                     {isScanning && (
                         <View style={[styles.ph5, styles.pb3, styles.borderBottom]}>
                             <MoneyRequestHeaderStatusBar
-                                icon={
+                                title={
                                     <Icon
                                         src={Expensicons.ReceiptScan}
                                         height={variables.iconSizeSmall}

diff --git a/src/styles/index.ts b/src/styles/index.ts
@@ -4711,7 +4711,7 @@ const styles = (theme: ThemeColors) =>
         },
 
         headerStatusBarContainer: {
-            minHeight: variables.componentSizeSmall,
+            minHeight: variables.componentSizeNormal,
         },
 
         walletIllustration: {