Skip to content

Commit 57de638

Browse files
chiragsalianchiragsalian
authored
Merge pull request #47397 from abzokhattab/update-held-transactions-styles
Update held transactions styles
2 parents 6aa7adc + 673c778 commit 57de638

File tree

5 files changed

+20
-36
lines changed

5 files changed

+20
-36
lines changed

‎src/components/MoneyReportHeader.tsx

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,8 @@ import * as IOU from '@userActions/IOU';
1818
import * as TransactionActions from '@userActions/Transaction';
1919
import CONST from '@src/CONST';
2020
import ONYXKEYS from '@src/ONYXKEYS';
21-
import ROUTES from '@src/ROUTES';
2221
import type {Route} from '@src/ROUTES';
22+
import ROUTES from '@src/ROUTES';
2323
import type * as OnyxTypes from '@src/types/onyx';
2424
import type {PaymentMethodType} from '@src/types/onyx/OriginalMessage';
2525
import type IconAsset from '@src/types/utils/IconAsset';
@@ -30,8 +30,8 @@ import HeaderWithBackButton from './HeaderWithBackButton';
3030
import Icon from './Icon';
3131
import * as Expensicons from './Icon/Expensicons';
3232
import MoneyReportHeaderStatusBar from './MoneyReportHeaderStatusBar';
33-
import MoneyRequestHeaderStatusBar from './MoneyRequestHeaderStatusBar';
3433
import type {MoneyRequestHeaderStatusBarProps} from './MoneyRequestHeaderStatusBar';
34+
import MoneyRequestHeaderStatusBar from './MoneyRequestHeaderStatusBar';
3535
import type {ActionHandledType} from './ProcessMoneyReportHoldMenu';
3636
import ProcessMoneyReportHoldMenu from './ProcessMoneyReportHoldMenu';
3737
import ProcessMoneyRequestHoldMenu from './ProcessMoneyRequestHoldMenu';
@@ -204,20 +204,20 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea
204204
const getStatusBarProps: () => MoneyRequestHeaderStatusBarProps | undefined = () => {
205205
if (isPayAtEndExpense) {
206206
if (!isArchivedReport) {
207-
return {title: getStatusIcon(Expensicons.Hourglass), description: translate('iou.bookingPendingDescription')};
207+
return {icon: getStatusIcon(Expensicons.Hourglass), description: translate('iou.bookingPendingDescription')};
208208
}
209209
if (isArchivedReport && archiveReason === CONST.REPORT.ARCHIVE_REASON.BOOKING_END_DATE_HAS_PASSED) {
210-
return {title: getStatusIcon(Expensicons.Box), description: translate('iou.bookingArchivedDescription')};
210+
return {icon: getStatusIcon(Expensicons.Box), description: translate('iou.bookingArchivedDescription')};
211211
}
212212
}
213213
if (hasOnlyHeldExpenses) {
214-
return {title: translate('violations.hold'), description: translate('iou.expensesOnHold'), danger: true};
214+
return {icon: getStatusIcon(Expensicons.Stopwatch), description: translate('iou.expensesOnHold')};
215215
}
216216
if (allHavePendingRTERViolation) {
217-
return {title: getStatusIcon(Expensicons.Hourglass), description: translate('iou.pendingMatchWithCreditCardDescription')};
217+
return {icon: getStatusIcon(Expensicons.Hourglass), description: translate('iou.pendingMatchWithCreditCardDescription')};
218218
}
219219
if (hasScanningReceipt) {
220-
return {title: getStatusIcon(Expensicons.ReceiptScan), description: translate('iou.receiptScanInProgressDescription')};
220+
return {icon: getStatusIcon(Expensicons.ReceiptScan), description: translate('iou.receiptScanInProgressDescription')};
221221
}
222222
};
223223

@@ -378,9 +378,8 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea
378378
{shouldShowNextStep && <MoneyReportHeaderStatusBar nextStep={nextStep} />}
379379
{statusBarProps && (
380380
<MoneyRequestHeaderStatusBar
381-
title={statusBarProps.title}
381+
icon={statusBarProps.icon}
382382
description={statusBarProps.description}
383-
danger={statusBarProps.danger}
384383
/>
385384
)}
386385
</View>

‎src/components/MoneyRequestHeader.tsx

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import type {ReactNode} from 'react';
22
import React, {useCallback, useEffect, useState} from 'react';
33
import {View} from 'react-native';
4-
import {useOnyx} from 'react-native-onyx';
54
import type {OnyxEntry} from 'react-native-onyx';
5+
import {useOnyx} from 'react-native-onyx';
66
import useLocalize from '@hooks/useLocalize';
77
import useTheme from '@hooks/useTheme';
88
import useThemeStyles from '@hooks/useThemeStyles';
@@ -80,17 +80,17 @@ function MoneyRequestHeader({report, parentReportAction, policy, shouldUseNarrow
8080

8181
const getStatusBarProps: () => MoneyRequestHeaderStatusBarProps | undefined = () => {
8282
if (isOnHold) {
83-
return {title: translate('violations.hold'), description: isDuplicate ? translate('iou.expenseDuplicate') : translate('iou.expenseOnHold'), danger: true};
83+
return {icon: getStatusIcon(Expensicons.Stopwatch), description: isDuplicate ? translate('iou.expenseDuplicate') : translate('iou.expenseOnHold')};
8484
}
8585

8686
if (TransactionUtils.isExpensifyCardTransaction(transaction) && TransactionUtils.isPending(transaction)) {
87-
return {title: getStatusIcon(Expensicons.CreditCardHourglass), description: translate('iou.transactionPendingDescription')};
87+
return {icon: getStatusIcon(Expensicons.CreditCardHourglass), description: translate('iou.transactionPendingDescription')};
8888
}
8989
if (TransactionUtils.hasPendingRTERViolation(TransactionUtils.getTransactionViolations(transaction?.transactionID ?? '-1', transactionViolations))) {
90-
return {title: getStatusIcon(Expensicons.Hourglass), description: translate('iou.pendingMatchWithCreditCardDescription')};
90+
return {icon: getStatusIcon(Expensicons.Hourglass), description: translate('iou.pendingMatchWithCreditCardDescription')};
9191
}
9292
if (isScanning) {
93-
return {title: getStatusIcon(Expensicons.ReceiptScan), description: translate('iou.receiptScanInProgressDescription')};
93+
return {icon: getStatusIcon(Expensicons.ReceiptScan), description: translate('iou.receiptScanInProgressDescription')};
9494
}
9595
};
9696

@@ -185,9 +185,8 @@ function MoneyRequestHeader({report, parentReportAction, policy, shouldUseNarrow
185185
{statusBarProps && (
186186
<View style={[styles.ph5, styles.pb3, styles.borderBottom]}>
187187
<MoneyRequestHeaderStatusBar
188-
title={statusBarProps.title}
188+
icon={statusBarProps.icon}
189189
description={statusBarProps.description}
190-
danger={statusBarProps.danger}
191190
/>
192191
</View>
193192
)}

‎src/components/MoneyRequestHeaderStatusBar.tsx

Lines changed: 4 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -2,38 +2,24 @@ import type {ReactNode} from 'react';
22
import React from 'react';
33
import {View} from 'react-native';
44
import useThemeStyles from '@hooks/useThemeStyles';
5-
import Badge from './Badge';
65
import Text from './Text';
76

87
type MoneyRequestHeaderStatusBarProps = {
9-
/** Title displayed in badge */
10-
title: string | ReactNode;
8+
/** Icon displayed in badge */
9+
icon: ReactNode;
1110

1211
/** Banner Description */
1312
description: string;
1413

15-
/** Whether we should use the danger theme color */
16-
danger?: boolean;
17-
1814
/** Whether we style flex grow */
1915
shouldStyleFlexGrow?: boolean;
2016
};
2117

22-
function MoneyRequestHeaderStatusBar({title, description, danger = false, shouldStyleFlexGrow = true}: MoneyRequestHeaderStatusBarProps) {
18+
function MoneyRequestHeaderStatusBar({icon, description, shouldStyleFlexGrow = true}: MoneyRequestHeaderStatusBarProps) {
2319
const styles = useThemeStyles();
2420
return (
2521
<View style={[styles.dFlex, styles.flexRow, styles.alignItemsCenter, shouldStyleFlexGrow && styles.flexGrow1, styles.overflowHidden, styles.headerStatusBarContainer]}>
26-
{typeof title === 'string' ? (
27-
<View style={[styles.mr3]}>
28-
<Badge
29-
text={title}
30-
badgeStyles={styles.ml0}
31-
error={danger}
32-
/>
33-
</View>
34-
) : (
35-
<View style={styles.mr2}>{title}</View>
36-
)}
22+
<View style={styles.mr2}>{icon}</View>
3723
<View style={[styles.flexShrink1]}>
3824
<Text style={[styles.textLabelSupporting]}>{description}</Text>
3925
</View>

‎src/pages/iou/SplitBillDetailsPage.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,7 @@ function SplitBillDetailsPage({personalDetails, report, route, reportActions, tr
107107
{isScanning && (
108108
<View style={[styles.ph5, styles.pb3, styles.borderBottom]}>
109109
<MoneyRequestHeaderStatusBar
110-
title={
110+
icon={
111111
<Icon
112112
src={Expensicons.ReceiptScan}
113113
height={variables.iconSizeSmall}

‎src/styles/index.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4711,7 +4711,7 @@ const styles = (theme: ThemeColors) =>
47114711
},
47124712

47134713
headerStatusBarContainer: {
4714-
minHeight: variables.componentSizeNormal,
4714+
minHeight: variables.componentSizeSmall,
47154715
},
47164716

47174717
walletIllustration: {

0 commit comments

Comments
 (0)