diff --git a/src/components/ReportActionItem/MoneyRequestReportPreview/ReportPreviewHeader.tsx b/src/components/ReportActionItem/MoneyRequestReportPreview/ReportPreviewHeader.tsx index 1776bc0e0644..d938720f4996 100644 --- a/src/components/ReportActionItem/MoneyRequestReportPreview/ReportPreviewHeader.tsx +++ b/src/components/ReportActionItem/MoneyRequestReportPreview/ReportPreviewHeader.tsx @@ -67,6 +67,9 @@ function ReportPreviewHeader() { [translate, numberOfRequests], ); + // A cancelled payment is a report level event and it isn't surfaced by the status badge, so we show it next to the expense count. + const supportingText = iouReport?.isCancelledIOU ? `${translate('iou.canceled')} ${CONST.DOT_SEPARATOR} ${expenseCount}` : expenseCount; + const reportStateNum = iouReport?.stateNum ?? action?.childStateNum; const reportStatusNum = iouReport?.statusNum ?? action?.childStatusNum; @@ -123,7 +126,7 @@ function ReportPreviewHeader() { tooltipText={reportStatusTooltip} /> )} - {!shouldShowAccessPlaceHolder && {expenseCount}} + {!shouldShowAccessPlaceHolder && {supportingText}} ) )} diff --git a/src/components/ReportActionItem/TransactionPreview/TransactionPreviewContent.tsx b/src/components/ReportActionItem/TransactionPreview/TransactionPreviewContent.tsx index f3e077e66bd1..8dd40722559b 100644 --- a/src/components/ReportActionItem/TransactionPreview/TransactionPreviewContent.tsx +++ b/src/components/ReportActionItem/TransactionPreview/TransactionPreviewContent.tsx @@ -2,6 +2,7 @@ import Button from '@components/Button'; import Icon from '@components/Icon'; import OfflineWithFeedback from '@components/OfflineWithFeedback'; import ReportActionAvatars from '@components/ReportActionAvatars'; +import {ReportPreviewDataContext} from '@components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContext'; import ReportActionItemImages from '@components/ReportActionItem/ReportActionItemImages'; import UserInfoCellsWithArrow from '@components/Search/SearchList/ListItem/UserInfoCellsWithArrow'; import Text from '@components/Text'; @@ -25,7 +26,6 @@ import getNonEmptyStringOnyxID from '@libs/getNonEmptyStringOnyxID'; import {calculateAmount} from '@libs/IOUUtils'; import Parser from '@libs/Parser'; import {getLoginByAccountID} from '@libs/PersonalDetailsUtils'; -import {getCommaSeparatedTagNameWithSanitizedColons} from '@libs/PolicyUtils'; import {getThumbnailAndImageURIs} from '@libs/ReceiptUtils'; import {getOriginalMessage, isMoneyRequestAction} from '@libs/ReportActionsUtils'; import {isMarkAsCashActionForTransaction} from '@libs/ReportPrimaryActionUtils'; @@ -47,7 +47,7 @@ import {cardByIdSelector} from '@src/selectors/Card'; import {getStableReportSelector} from '@src/selectors/Report'; import truncate from 'lodash/truncate'; -import React, {useMemo} from 'react'; +import React, {useContext, useMemo} from 'react'; import {View} from 'react-native'; import Animated from 'react-native-reanimated'; @@ -78,7 +78,7 @@ function TransactionPreviewContent({ isReviewDuplicateTransactionPage = false, shouldHighlight = false, }: TransactionPreviewContentProps) { - const icons = useMemoizedLazyExpensifyIcons(['DotIndicator', 'Folder', 'Tag']); + const icons = useMemoizedLazyExpensifyIcons(['DotIndicator']); const theme = useTheme(); const styles = useThemeStyles(); const {translate} = useLocalize(); @@ -89,7 +89,7 @@ function TransactionPreviewContent({ () => getTransactionDetails(transaction, undefined, policy, isParentPolicyExpenseChat) ?? {}, [transaction, policy, isParentPolicyExpenseChat], ); - const {amount, comment: requestComment, merchant, tag, category, currency: requestCurrency} = transactionDetails; + const {amount, comment: requestComment, merchant, category, currency: requestCurrency} = transactionDetails; const [originalTransaction] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION}${getNonEmptyStringOnyxID(transaction?.comment?.originalTransactionID)}`); const filteredViolations = filterReceiptViolations(violations); const firstViolation = filteredViolations.at(0); @@ -132,7 +132,12 @@ function TransactionPreviewContent({ [areThereDuplicates, transactionPreviewCommonArguments, isParentPolicyExpenseChat, currentUserEmail, currentUserAccountID, reportActions], ); - const {shouldShowRBR, shouldShowMerchant, shouldShowSplitShare, shouldShowTag, shouldShowCategory, shouldShowSkeleton, shouldShowDescription} = conditionals; + const {shouldShowRBR, shouldShowMerchant, shouldShowSplitShare, shouldShowCategory, shouldShowSkeleton, shouldShowDescription} = conditionals; + + // Raw useContext (not the useReportPreviewData slice hook, which throws when absent): a missing provider means this is a + // standalone preview with no report header to carry the status, so the preview has to report a cancelled payment itself. + const isInsideReportPreview = !!useContext(ReportPreviewDataContext); + const shouldShowCanceledStatus = !isInsideReportPreview; const isIOUActionType = isMoneyRequestAction(action); const canEdit = isIOUActionType && canEditMoneyRequest(action, transaction, isChatReportArchived, report, policy); @@ -161,27 +166,22 @@ function TransactionPreviewContent({ getTransactionPreviewTextAndTranslationPaths({ ...transactionPreviewCommonArguments, shouldShowRBR, + shouldShowCanceledStatus, violationMessage, reportActions, - currentUserEmail, - currentUserAccountID, originalTransaction, convertToDisplayString, }), - [transactionPreviewCommonArguments, shouldShowRBR, violationMessage, reportActions, currentUserEmail, currentUserAccountID, originalTransaction, convertToDisplayString], + [transactionPreviewCommonArguments, shouldShowRBR, shouldShowCanceledStatus, violationMessage, reportActions, originalTransaction, convertToDisplayString], ); const getTranslatedText = (item: TranslationPathOrText) => (item.translationPath ? translate(item.translationPath) : (item.text ?? '')); - const previewHeaderText = previewText.previewHeaderText.reduce((text, currentKey) => { - return `${text}${getTranslatedText(currentKey)}`; - }, ''); - const RBRMessage = getTranslatedText(previewText.RBRMessage); const displayAmountText = getTranslatedText(previewText.displayAmountText); const displayDeleteAmountText = getTranslatedText(previewText.displayDeleteAmountText); + const displayTypeText = getTranslatedText(previewText.previewTypeText); const isDeleted = action?.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE || transaction?.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE; - const shouldShowCategoryOrTag = shouldShowCategory || shouldShowTag; const shouldShowMerchantOrDescription = shouldShowDescription || shouldShowMerchant; const description = truncate(StringUtils.lineBreaksToSpaces(Parser.htmlToText(requestComment ?? '')), {length: CONST.REQUEST_PREVIEW.MAX_LENGTH}); @@ -194,6 +194,10 @@ function TransactionPreviewContent({ const displayAmount = isDeleted ? displayDeleteAmountText : displayAmountText; const receiptImages = [{...getThumbnailAndImageURIs(transaction), transaction}]; const merchantOrDescription = shouldShowMerchant ? requestMerchant : description || ''; + const previewSupportingText = [previewText.previewDateText, shouldShowCategory && category ? {text: getDecodedLeafCategoryName(category)} : undefined, ...previewText.previewStatusText] + .filter((item): item is TranslationPathOrText => !!item) + .map(getTranslatedText) + .join(` ${CONST.DOT_SEPARATOR} `); const participantAccountIDs = isMoneyRequestAction(action) && isBillSplit ? (getOriginalMessage(action)?.participantAccountIDs ?? []) : [managerID, ownerAccountID]; const isCardTransaction = isCardTransactionUtils(transaction); @@ -263,10 +267,6 @@ function TransactionPreviewContent({ getCurrencyDecimals, ]); - const shouldWrapDisplayAmount = !(isBillSplit || shouldShowMerchantOrDescription || isTransactionScanning); - const previewTextViewGap = (shouldShowCategoryOrTag || !shouldWrapDisplayAmount) && styles.gap2; - const previewTextMargin = shouldShowIOUHeader && shouldShowMerchantOrDescription && !isBillSplit && !shouldShowCategoryOrTag && styles.mbn1; - const animatedHighlightStyle = useAnimatedHighlightStyle({ shouldHighlight, highlightColor: theme.messageHighlightBG, @@ -322,114 +322,59 @@ function TransactionPreviewContent({ style={[styles.flex1, styles.dFlex, styles.alignItemsCenter, styles.gap2, styles.flexRow]} /> )} - - - {previewHeaderText} - {isBillSplit && ( - - - - )} - {shouldWrapDisplayAmount && ( - - {displayAmount} - - )} - - - - - {shouldShowMerchantOrDescription && ( - - {merchantOrDescription} - - )} - {!shouldWrapDisplayAmount && ( - - {displayAmount} - - )} - - - - {!!splitShare && ( - - {translate('iou.yourSplit', convertToDisplayString(splitShare, requestCurrency))} - - )} - - - {shouldShowCategoryOrTag && ( - - {shouldShowCategory && ( - + + + {shouldShowMerchantOrDescription && ( + - - - {getDecodedLeafCategoryName(category ?? '')} - - + {merchantOrDescription} + )} - {shouldShowTag && !!tag && ( - - + - - {getCommaSeparatedTagNameWithSanitizedColons(tag)} - )} + + {displayAmount} + + + + + {previewSupportingText} + + + {displayTypeText} + + + {!!splitShare && ( + + + {translate('iou.yourSplit', convertToDisplayString(splitShare, requestCurrency))} + + )} {!isIOUSettled && shouldShowRBR && ( diff --git a/src/libs/TransactionPreviewUtils.ts b/src/libs/TransactionPreviewUtils.ts index fe22cfde1635..1a217531749b 100644 --- a/src/libs/TransactionPreviewUtils.ts +++ b/src/libs/TransactionPreviewUtils.ts @@ -36,7 +36,6 @@ import { isCreatedMissing, isDistanceRequest, isFetchingWaypointsFromServer, - isManagedCardTransaction, isMerchantMissing, isOnHold, isPending, @@ -124,8 +123,6 @@ type TranslationPathOrText = { text?: string; }; -const dotSeparator: TranslationPathOrText = {text: ` ${CONST.DOT_SEPARATOR} `}; - /** * Normalize the last four digits to always return 4 characters. * If the number is shorter than 4 digits, it will be padded with X's. @@ -198,7 +195,6 @@ function getUniqueActionErrorsForTransaction(reportActions: OnyxTypes.ReportActi function getTransactionPreviewTextAndTranslationPaths({ iouReport, - iouReportOwnerLogin, policy, transaction, action, @@ -206,15 +202,13 @@ function getTransactionPreviewTextAndTranslationPaths({ transactionDetails, isBillSplit, shouldShowRBR, + shouldShowCanceledStatus, violationMessage, reportActions, - currentUserEmail, - currentUserAccountID, originalTransaction, convertToDisplayString, }: { iouReport: OnyxEntry; - iouReportOwnerLogin: string | undefined; policy: OnyxEntry; transaction: OnyxEntry; action: OnyxEntry; @@ -222,19 +216,17 @@ function getTransactionPreviewTextAndTranslationPaths({ transactionDetails: Partial; isBillSplit: boolean; shouldShowRBR: boolean; + /** Whether a cancelled payment has to be reported on this line, because the enclosing surface doesn't show it anywhere else */ + shouldShowCanceledStatus: boolean; violationMessage?: string; reportActions?: OnyxTypes.ReportActions; - currentUserEmail: string; - currentUserAccountID: number; originalTransaction?: OnyxEntry; convertToDisplayString: CurrencyListActionsContextType['convertToDisplayString']; }) { const isFetchingWaypoints = isFetchingWaypointsFromServer(transaction); const isTransactionOnHold = isOnHold(transaction); - const isTransactionMadeWithCard = isManagedCardTransaction(transaction); const isMoneyRequestSettled = isSettled(iouReport?.reportID); const isSettlementOrApprovalPartial = !!iouReport?.pendingFields?.partial; - const isPartialHold = isSettlementOrApprovalPartial && isTransactionOnHold; // We don't use isOnHold because it's true for duplicated transaction too and we only want to show hold message if the transaction is truly on hold const shouldShowHoldMessage = !(isMoneyRequestSettled && !isSettlementOrApprovalPartial) && !!transaction?.comment?.hold; @@ -242,8 +234,6 @@ function getTransactionPreviewTextAndTranslationPaths({ const hasFieldErrors = hasMissingSmartscanFields(transaction, iouReport); const isGroupPolicy = isGroupPolicyUtil(policy); - const hasViolationsOfTypeNotice = - hasNoticeTypeViolation(transaction, violations, currentUserEmail ?? '', currentUserAccountID, iouReport, iouReportOwnerLogin, policy, true) && isGroupPolicy; const hasActionWithErrors = hasActionWithErrorsForTransaction(iouReport?.reportID, transaction, reportActions); const {amount: requestAmount, currency: requestCurrency} = transactionDetails; @@ -304,12 +294,12 @@ function getTransactionPreviewTextAndTranslationPaths({ } } - let previewHeaderText: TranslationPathOrText[] = [{translationPath: getExpenseTypeTranslationKey(getTransactionType(transaction))}]; + let previewTypeText: TranslationPathOrText = {translationPath: getExpenseTypeTranslationKey(getTransactionType(transaction))}; if (isTransactionScanning) { - previewHeaderText = [{translationPath: 'common.receipt'}]; + previewTypeText = {translationPath: 'common.receipt'}; } else if (isBillSplit) { - previewHeaderText = [{translationPath: 'iou.split'}]; + previewTypeText = {translationPath: 'iou.split'}; } if (RBRMessage?.text === CONST.ERROR.BANK_ACCOUNT_SAME_DEPOSIT_AND_WITHDRAWAL_ERROR) { @@ -318,37 +308,28 @@ function getTransactionPreviewTextAndTranslationPaths({ RBRMessage ??= {text: ''}; + let previewDateText: TranslationPathOrText | undefined; if (!isCreatedMissing(transaction)) { const created = getFormattedCreated(transaction); const date = DateUtils.formatWithUTCTimeZone(created, DateUtils.doesDateBelongToAPastYear(created) ? CONST.DATE.MONTH_DAY_YEAR_ABBR_FORMAT : CONST.DATE.MONTH_DAY_ABBR_FORMAT); - previewHeaderText.unshift({text: date}, dotSeparator); + previewDateText = {text: date}; } - if (isPending(transaction)) { - previewHeaderText.push(dotSeparator, {translationPath: 'iou.pending'}); - } - - if (hasPendingRTERViolation(violations)) { - previewHeaderText.push(dotSeparator, {translationPath: 'iou.pendingMatch'}); - } + // Paid, Approved and Review required are intentionally omitted here because the report status badge and the violation + // row already show them, so repeating them on this line is noise. Canceled is the exception: it can't be derived from + // stateNum/statusNum, so surfaces without their own report status badge have to report it here. + const previewStatusText: TranslationPathOrText[] = []; - let isPreviewHeaderTextComplete = false; - - if (isMoneyRequestSettled && !iouReport?.isCancelledIOU && !isPartialHold && !hasActionWithErrors) { - previewHeaderText.push(dotSeparator, {translationPath: isTransactionMadeWithCard ? 'common.done' : 'iou.settledExpensify'}); - isPreviewHeaderTextComplete = true; + if (isPending(transaction)) { + previewStatusText.push({translationPath: 'iou.pending'}); } - if (!isPreviewHeaderTextComplete) { - if (hasViolationsOfTypeNotice && transaction && !isReportApproved({report: iouReport}) && !isSettled(iouReport?.reportID)) { - previewHeaderText.push(dotSeparator, {translationPath: 'violations.reviewRequired'}); - } else if (isExpenseReport(iouReport) && isGroupPolicyUtil(policy) && isReportApproved({report: iouReport}) && !isSettled(iouReport?.reportID) && !isPartialHold) { - previewHeaderText.push(dotSeparator, {translationPath: 'iou.approved'}); - } else if (iouReport?.isCancelledIOU) { - previewHeaderText.push(dotSeparator, {translationPath: 'iou.canceled'}); - } else if (shouldShowHoldMessage) { - previewHeaderText.push(dotSeparator, {translationPath: 'violations.hold'}); - } + if (shouldShowCanceledStatus && iouReport?.isCancelledIOU) { + previewStatusText.push({translationPath: 'iou.canceled'}); + } else if (hasPendingRTERViolation(violations)) { + previewStatusText.push({translationPath: 'iou.pendingMatch'}); + } else if (shouldShowHoldMessage) { + previewStatusText.push({translationPath: 'violations.hold'}); } const amount = isBillSplit ? getAmount(originalTransaction ?? transaction) : requestAmount; @@ -364,7 +345,9 @@ function getTransactionPreviewTextAndTranslationPaths({ RBRMessage, displayAmountText, displayDeleteAmountText, - previewHeaderText, + previewDateText, + previewStatusText, + previewTypeText, }; } diff --git a/tests/ui/MoneyRequestReportPreview.test.tsx b/tests/ui/MoneyRequestReportPreview.test.tsx index faab3f85eb5d..eca807671e13 100644 --- a/tests/ui/MoneyRequestReportPreview.test.tsx +++ b/tests/ui/MoneyRequestReportPreview.test.tsx @@ -176,14 +176,15 @@ const renderPage = ({isWhisper = false, isHovered = false}: Partial { +const getTransactionDisplayAmountAndMetadataText = (transaction: Transaction) => { const created = getFormattedCreated(transaction); const date = DateUtils.formatWithUTCTimeZone(created, DateUtils.doesDateBelongToAPastYear(created) ? CONST.DATE.MONTH_DAY_YEAR_ABBR_FORMAT : CONST.DATE.MONTH_DAY_ABBR_FORMAT); const isTransactionMadeWithCard = isManagedCardTransaction(transaction); - const cashOrCard = isTransactionMadeWithCard ? TestHelper.translateLocal('iou.card') : TestHelper.translateLocal('iou.cash'); - const transactionHeaderText = `${date} ${CONST.DOT_SEPARATOR} ${cashOrCard}`; + // The date leads the supporting line, which can also carry the category and the report status. + const transactionSupportingText = new RegExp(`^${date}`); + const transactionTypeText = isTransactionMadeWithCard ? TestHelper.translateLocal('iou.card') : TestHelper.translateLocal('iou.cash'); const transactionDisplayAmount = TestHelper.convertToDisplayString(-transaction.amount, transaction.currency); - return {transactionHeaderText, transactionDisplayAmount}; + return {transactionSupportingText, transactionTypeText, transactionDisplayAmount}; }; const setCurrentWidth = () => { @@ -273,10 +274,11 @@ describe('MoneyRequestReportPreview', () => { expect(screen.getByText(getReportName(mockIOUReport))).toBeOnTheScreen(); for (const transaction of arrayOfTransactions) { - const {transactionDisplayAmount, transactionHeaderText} = getTransactionDisplayAmountAndHeaderText(transaction); + const {transactionDisplayAmount, transactionSupportingText, transactionTypeText} = getTransactionDisplayAmountAndMetadataText(transaction); expect(screen.getAllByText(transactionDisplayAmount).length).toBeGreaterThan(0); - expect(screen.getAllByText(transactionHeaderText)).toHaveLength(arrayOfTransactions.length); + expect(screen.getAllByText(transactionSupportingText)).toHaveLength(arrayOfTransactions.length); + expect(screen.getAllByText(transactionTypeText)).toHaveLength(arrayOfTransactions.length); expect(screen.getAllByText(transaction.merchant)).toHaveLength(arrayOfTransactions.length); } }); diff --git a/tests/unit/TransactionPreviewUtils.test.ts b/tests/unit/TransactionPreviewUtils.test.ts index 8d0eca4093bf..52c6bf8fba94 100644 --- a/tests/unit/TransactionPreviewUtils.test.ts +++ b/tests/unit/TransactionPreviewUtils.test.ts @@ -51,6 +51,7 @@ const basicProps = { transactionDetails: {}, isBillSplit: false, shouldShowRBR: false, + shouldShowCanceledStatus: false, isReportAPolicyExpenseChat: false, areThereDuplicates: false, currentUserEmail: '', @@ -114,7 +115,7 @@ describe('TransactionPreviewUtils', () => { const functionArgs = {...basicProps, iouReport: undefined, transaction: undefined, originalTransaction: undefined}; const result = getTransactionPreviewTextAndTranslationPaths(functionArgs); expect(result.RBRMessage.text).toEqual(''); - expect(result.previewHeaderText).toContainEqual({translationPath: 'iou.cash'}); + expect(result.previewTypeText).toEqual({translationPath: 'iou.cash'}); expect(result.displayAmountText.text).toEqual('$0.00'); }); @@ -149,7 +150,7 @@ describe('TransactionPreviewUtils', () => { expect(result.RBRMessage.translationPath).toEqual('iou.missingAmount'); }); - it('should display showCashOrCard in previewHeaderText', () => { + it('should display cash or card as the preview type', () => { const functionArgsWithCardTransaction = { ...basicProps, transaction: { @@ -161,14 +162,14 @@ describe('TransactionPreviewUtils', () => { const cardTransaction = getTransactionPreviewTextAndTranslationPaths(functionArgsWithCardTransaction); const cashTransaction = getTransactionPreviewTextAndTranslationPaths({...basicProps}); - expect(cardTransaction.previewHeaderText).toEqual(expect.arrayContaining([{translationPath: 'common.card'}])); - expect(cashTransaction.previewHeaderText).toEqual(expect.arrayContaining([{translationPath: 'iou.cash'}])); + expect(cardTransaction.previewTypeText).toEqual({translationPath: 'common.card'}); + expect(cashTransaction.previewTypeText).toEqual({translationPath: 'iou.cash'}); }); it('displays appropriate header text if the transaction is bill split', () => { const functionArgs = {...basicProps, isBillSplit: true, originalTransaction: undefined}; const result = getTransactionPreviewTextAndTranslationPaths(functionArgs); - expect(result.previewHeaderText).toEqual(expect.arrayContaining([{translationPath: 'iou.split'}])); + expect(result.previewTypeText).toEqual({translationPath: 'iou.split'}); }); it('displays description when receipt is being scanned', () => { @@ -179,13 +180,15 @@ describe('TransactionPreviewUtils', () => { merchant: 'Expense', }; const result = getTransactionPreviewTextAndTranslationPaths(functionArgs); - expect(result.previewHeaderText).toEqual(expect.arrayContaining([{translationPath: 'common.receipt'}])); + expect(result.previewTypeText).toEqual({translationPath: 'common.receipt'}); }); it('should apply correct text when transaction is pending and not a bill split', () => { const functionArgs = {...basicProps, transaction: {...basicProps.transaction, status: CONST.TRANSACTION.STATUS.PENDING}, originalTransaction: undefined}; const result = getTransactionPreviewTextAndTranslationPaths(functionArgs); - expect(result.previewHeaderText).toEqual(expect.arrayContaining([{translationPath: 'iou.pending'}])); + // Pending is a transaction status, so it belongs to the supporting line and must not replace the expense type. + expect(result.previewStatusText).toContainEqual({translationPath: 'iou.pending'}); + expect(result.previewTypeText).toEqual({translationPath: 'iou.cash'}); }); it('handles currency and amount display during scanning correctly', () => { @@ -226,13 +229,19 @@ describe('TransactionPreviewUtils', () => { expect(result.displayAmountText.text).toEqual(convertAmountToDisplayString(modifiedAmount, currency)); }); - it('shows approved message when the iouReport is canceled', () => { - const functionArgs = {...basicProps, iouReport: {...basicProps.iouReport, isCancelledIOU: true}, originalTransaction: undefined}; + it('does not show the canceled status inside a report preview, because the preview header already shows it', () => { + const functionArgs = {...basicProps, iouReport: {...basicProps.iouReport, isCancelledIOU: true}, originalTransaction: undefined, shouldShowCanceledStatus: false}; const result = getTransactionPreviewTextAndTranslationPaths(functionArgs); - expect(result.previewHeaderText).toContainEqual({translationPath: 'iou.canceled'}); + expect(result.previewStatusText).toEqual([]); }); - it('should include "Approved" in the preview when the report is approved, regardless of whether RBR is shown', () => { + it('shows the canceled status in a standalone preview, because nothing else on that surface reports it', () => { + const functionArgs = {...basicProps, iouReport: {...basicProps.iouReport, isCancelledIOU: true}, originalTransaction: undefined, shouldShowCanceledStatus: true}; + const result = getTransactionPreviewTextAndTranslationPaths(functionArgs); + expect(result.previewStatusText).toContainEqual({translationPath: 'iou.canceled'}); + }); + + it('does not show the approved status when the report is approved, because it is redundant with the report status badge', () => { const functionArgs = { ...basicProps, iouReport: { @@ -247,7 +256,7 @@ describe('TransactionPreviewUtils', () => { }; const result = getTransactionPreviewTextAndTranslationPaths(functionArgs); - expect(result.previewHeaderText).toContainEqual({translationPath: 'iou.approved'}); + expect(result.previewStatusText).toEqual([]); }); it('should display the correct amount for a bill split transaction', () => {