diff --git a/src/components/ReportActionItem/MoneyRequestPreview.js b/src/components/ReportActionItem/MoneyRequestPreview.js index 43500c731728..88cd91bc10ab 100644 --- a/src/components/ReportActionItem/MoneyRequestPreview.js +++ b/src/components/ReportActionItem/MoneyRequestPreview.js @@ -166,6 +166,7 @@ function MoneyRequestPreview(props) { const isDistanceRequest = TransactionUtils.isDistanceRequest(props.transaction); const isExpensifyCardTransaction = TransactionUtils.isExpensifyCardTransaction(props.transaction); const isSettled = ReportUtils.isSettled(props.iouReport.reportID); + const isDeleted = lodashGet(props.action, 'pendingAction', null) === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE; // Show the merchant for IOUs and expenses only if they are custom or not related to scanning smartscan const shouldShowMerchant = @@ -232,6 +233,16 @@ function MoneyRequestPreview(props) { return CurrencyUtils.convertToDisplayString(requestAmount, requestCurrency); }; + const getDisplayDeleteAmountText = () => { + const {amount, currency} = ReportUtils.getTransactionDetails(props.action.originalMessage); + + if (isDistanceRequest) { + return CurrencyUtils.convertToDisplayString(TransactionUtils.getAmount(props.action.originalMessage), currency); + } + + return CurrencyUtils.convertToDisplayString(amount, currency); + }; + const childContainer = ( - {getDisplayAmountText()} + {isDeleted ? getDisplayDeleteAmountText() : getDisplayAmountText()} {ReportUtils.isSettled(props.iouReport.reportID) && !props.isBillSplit && ( diff --git a/src/styles/styles.ts b/src/styles/styles.ts index 0b32876036e6..4833b101516a 100644 --- a/src/styles/styles.ts +++ b/src/styles/styles.ts @@ -36,6 +36,7 @@ import writingDirection from './utilities/writingDirection'; import variables from './variables'; import colors from './colors'; import objectFit from './utilities/objectFit'; +import textDecorationLine from './utilities/textDecorationLine'; type AnchorPosition = { horizontal: number; @@ -227,6 +228,7 @@ const styles = (theme: ThemeDefault) => ...userSelect, ...textUnderline, ...objectFit, + ...textDecorationLine, autoCompleteSuggestionsContainer: { backgroundColor: theme.appBG, diff --git a/src/styles/utilities/textDecorationLine.ts b/src/styles/utilities/textDecorationLine.ts new file mode 100644 index 000000000000..02e7db41e10a --- /dev/null +++ b/src/styles/utilities/textDecorationLine.ts @@ -0,0 +1,8 @@ +import {TextStyle} from 'react-native'; + +export default { + lineThrough: { + textDecorationLine: 'line-through', + textDecorationStyle: 'solid', + }, +} satisfies Record;