Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
244 changes: 87 additions & 157 deletions src/components/MoneyReportHeader.tsx

Large diffs are not rendered by default.

25 changes: 14 additions & 11 deletions src/components/MoneyRequestHeader.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -121,17 +121,21 @@ function MoneyRequestHeader({report, parentReportAction, policy, shouldUseNarrow

const getStatusBarProps: () => MoneyRequestHeaderStatusBarProps | undefined = () => {
if (isOnHold) {
return {title: translate('iou.hold'), description: isDuplicate ? translate('iou.expenseDuplicate') : translate('iou.expenseOnHold'), danger: true};
return {title: translate('iou.hold'), description: isDuplicate ? translate('iou.expenseDuplicate') : translate('iou.expenseOnHold'), danger: true, shouldShowBorderBottom: true};
}

if (TransactionUtils.isExpensifyCardTransaction(transaction) && TransactionUtils.isPending(transaction)) {
return {title: getStatusIcon(Expensicons.CreditCardHourglass), description: translate('iou.transactionPendingDescription')};
return {title: getStatusIcon(Expensicons.CreditCardHourglass), description: translate('iou.transactionPendingDescription'), shouldShowBorderBottom: true};
}
if (TransactionUtils.hasPendingRTERViolation(TransactionUtils.getTransactionViolations(transaction?.transactionID ?? '', transactionViolations))) {
return {title: getStatusIcon(Expensicons.Hourglass), description: translate('iou.pendingMatchWithCreditCardDescription')};
return {
title: getStatusIcon(Expensicons.Hourglass),
description: translate('iou.pendingMatchWithCreditCardDescription'),
shouldShowBorderBottom: true,
};
}
if (isScanning) {
return {title: getStatusIcon(Expensicons.ReceiptScan), description: translate('iou.receiptScanInProgressDescription')};
return {title: getStatusIcon(Expensicons.ReceiptScan), description: translate('iou.receiptScanInProgressDescription'), shouldShowBorderBottom: true};
}
};

Expand Down Expand Up @@ -256,13 +260,12 @@ function MoneyRequestHeader({report, parentReportAction, policy, shouldUseNarrow
</View>
)}
{statusBarProps && (
<View style={[styles.ph5, styles.pb3, styles.borderBottom]}>
<MoneyRequestHeaderStatusBar
title={statusBarProps.title}
description={statusBarProps.description}
danger={statusBarProps.danger}
/>
</View>
<MoneyRequestHeaderStatusBar
title={statusBarProps.title}
description={statusBarProps.description}
danger={statusBarProps.danger}
shouldShowBorderBottom={statusBarProps.shouldShowBorderBottom}
/>
)}
</View>
<ConfirmModal
Expand Down
20 changes: 18 additions & 2 deletions src/components/MoneyRequestHeaderStatusBar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,17 +12,33 @@ type MoneyRequestHeaderStatusBarProps = {
/** Banner Description */
description: string;

/** Whether we show the border bottom */
shouldShowBorderBottom: boolean;

/** Whether we should use the danger theme color */
danger?: boolean;

/** Whether we style flex grow */
shouldStyleFlexGrow?: boolean;
};

function MoneyRequestHeaderStatusBar({title, description, danger = false, shouldStyleFlexGrow = true}: MoneyRequestHeaderStatusBarProps) {
function MoneyRequestHeaderStatusBar({title, description, shouldShowBorderBottom, danger = false, shouldStyleFlexGrow = true}: MoneyRequestHeaderStatusBarProps) {
const styles = useThemeStyles();
const borderBottomStyle = shouldShowBorderBottom ? styles.borderBottom : {};
return (
<View style={[styles.dFlex, styles.flexRow, styles.alignItemsCenter, shouldStyleFlexGrow && styles.flexGrow1, styles.overflowHidden, styles.headerStatusBarContainer]}>
<View
style={[
styles.dFlex,
styles.flexRow,
styles.alignItemsCenter,
shouldStyleFlexGrow && styles.flexGrow1,
styles.overflowHidden,
styles.ph5,
styles.pb3,
borderBottomStyle,
styles.headerStatusBarContainer,
]}
>
{typeof title === 'string' ? (
<View style={[styles.mr3]}>
<Badge
Expand Down
1 change: 0 additions & 1 deletion src/languages/en.ts
Original file line number Diff line number Diff line change
Expand Up @@ -762,7 +762,6 @@ export default {
reason: 'Reason',
holdReasonRequired: 'A reason is required when holding.',
expenseOnHold: 'This expense was put on hold. Review the comments for next steps.',
expensesOnHold: 'All expenses were put on hold. Review the comments for next steps.',
expenseDuplicate: 'This expense has the same details as another one. Review the duplicates to remove the hold.',
reviewDuplicates: 'Review duplicates',
confirmApprove: 'Confirm approval amount',
Expand Down
1 change: 0 additions & 1 deletion src/languages/es.ts
Original file line number Diff line number Diff line change
Expand Up @@ -757,7 +757,6 @@ export default {
reason: 'Razón',
holdReasonRequired: 'Se requiere una razón para bloquear.',
expenseOnHold: 'Este gasto está bloqueado. Revisa los comentarios para saber como proceder.',
expensesOnHold: 'Todos los gastos quedaron bloqueado. Revisa los comentarios para saber como proceder.',
expenseDuplicate: 'Esta solicitud tiene los mismos detalles que otra. Revise los duplicados para eliminar la retención.',
reviewDuplicates: 'Revisar duplicados',
confirmApprove: 'Confirmar importe a aprobar',
Expand Down
6 changes: 3 additions & 3 deletions src/libs/ReportUtils.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6429,9 +6429,9 @@ function hasHeldExpenses(iouReportID?: string): boolean {
/**
* Check if all expenses in the Report are on hold
*/
function hasOnlyHeldExpenses(iouReportID: string, transactions?: OnyxCollection<Transaction>): boolean {
const reportTransactions = TransactionUtils.getAllReportTransactions(iouReportID, transactions);
return !reportTransactions.some((transaction) => !TransactionUtils.isOnHold(transaction));
function hasOnlyHeldExpenses(iouReportID: string): boolean {
const transactions = TransactionUtils.getAllReportTransactions(iouReportID);
return !transactions.some((transaction) => !TransactionUtils.isOnHold(transaction));
}

/**
Expand Down
6 changes: 3 additions & 3 deletions src/libs/TransactionUtils.ts
Original file line number Diff line number Diff line change
Expand Up @@ -561,12 +561,12 @@ function hasRoute(transaction: OnyxEntry<Transaction>, isDistanceRequestType: bo
return !!transaction?.routes?.route0?.geometry?.coordinates || (isDistanceRequestType && !!transaction?.comment?.customUnit?.quantity);
}

function getAllReportTransactions(reportID?: string, transactions?: OnyxCollection<Transaction>): Transaction[] {
function getAllReportTransactions(reportID?: string): Transaction[] {
// `reportID` from the `/CreateDistanceRequest` endpoint return's number instead of string for created `transaction`.
// For reference, https://github.com/Expensify/App/pull/26536#issuecomment-1703573277.
// We will update this in a follow-up Issue. According to this comment: https://github.com/Expensify/App/pull/26536#issuecomment-1703591019.
const nonNullableTransactions: Transaction[] = Object.values(transactions ?? allTransactions ?? {}).filter((transaction): transaction is Transaction => transaction !== null);
return nonNullableTransactions.filter((transaction) => `${transaction.reportID}` === `${reportID}`);
const transactions: Transaction[] = Object.values(allTransactions ?? {}).filter((transaction): transaction is Transaction => transaction !== null);
return transactions.filter((transaction) => `${transaction.reportID}` === `${reportID}`);
}

function waypointHasValidAddress(waypoint: RecentWaypoint | Waypoint): boolean {
Expand Down
27 changes: 13 additions & 14 deletions src/pages/iou/SplitBillDetailsPage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -104,20 +104,19 @@ function SplitBillDetailsPage({personalDetails, report, route, reportActions, tr
<HeaderWithBackButton title={translate('common.details')} />
<View style={[styles.containerWithSpaceBetween, styles.pointerEventsBoxNone]}>
{isScanning && (
<View style={[styles.ph5, styles.pb3, styles.borderBottom]}>
<MoneyRequestHeaderStatusBar
title={
<Icon
src={Expensicons.ReceiptScan}
height={variables.iconSizeSmall}
width={variables.iconSizeSmall}
fill={theme.icon}
/>
}
description={translate('iou.receiptScanInProgressDescription')}
shouldStyleFlexGrow={false}
/>
</View>
<MoneyRequestHeaderStatusBar
title={
<Icon
src={Expensicons.ReceiptScan}
height={variables.iconSizeSmall}
width={variables.iconSizeSmall}
fill={theme.icon}
/>
}
description={translate('iou.receiptScanInProgressDescription')}
shouldShowBorderBottom
shouldStyleFlexGrow={false}
/>
)}
{!!participants.length && (
<MoneyRequestConfirmationList
Expand Down