diff --git a/.storybook/webpack.config.ts b/.storybook/webpack.config.ts
index 1c22608160cf..fc94d7e07bea 100644
--- a/.storybook/webpack.config.ts
+++ b/.storybook/webpack.config.ts
@@ -58,6 +58,7 @@ const webpackConfig = ({config}: {config: Configuration}) => {
         'react-native$': 'react-native-web',
         '@react-native-community/netinfo': path.resolve(__dirname, '../__mocks__/@react-native-community/netinfo.ts'),
         '@react-navigation/native': path.resolve(__dirname, '../__mocks__/@react-navigation/native'),
+        '@libs/TransactionPreviewUtils': path.resolve(__dirname, '../src/libs/__mocks__/TransactionPreviewUtils.ts'),
         ...custom.resolve.alias,
     };
 
diff --git a/src/components/ReportActionItem/MoneyRequestAction.tsx b/src/components/ReportActionItem/MoneyRequestAction.tsx
index b41b90354ef9..02b29b4fe9ae 100644
--- a/src/components/ReportActionItem/MoneyRequestAction.tsx
+++ b/src/components/ReportActionItem/MoneyRequestAction.tsx
@@ -116,6 +116,10 @@ function MoneyRequestAction({
         }
         return <RenderHTML html={`<deleted-action ${CONST.REVERSED_TRANSACTION_ATTRIBUTE}="${isReversedTransaction}">${translate(message)}</deleted-action>`} />;
     }
+
+    // NOTE: this part of code is needed here if we want to replace MoneyRequestPreview with TransactionPreview
+    // const renderCondition = lodashIsEmpty(iouReport) && !(isSplitBillAction || isTrackExpenseAction);
+    // return renderCondition ? null : (
     return (
         <MoneyRequestPreview
             iouReportID={requestReportID}
diff --git a/src/components/ReportActionItem/TransactionPreview/TransactionPreviewContent.tsx b/src/components/ReportActionItem/TransactionPreview/TransactionPreviewContent.tsx
new file mode 100644
index 000000000000..f26a09e7b977
--- /dev/null
+++ b/src/components/ReportActionItem/TransactionPreview/TransactionPreviewContent.tsx
@@ -0,0 +1,388 @@
+import lodashSortBy from 'lodash/sortBy';
+import truncate from 'lodash/truncate';
+import React, {useMemo} from 'react';
+import {View} from 'react-native';
+import Button from '@components/Button';
+import Icon from '@components/Icon';
+import {DotIndicator, Folder, Tag} from '@components/Icon/Expensicons';
+import MoneyRequestSkeletonView from '@components/MoneyRequestSkeletonView';
+import MultipleAvatars from '@components/MultipleAvatars';
+import OfflineWithFeedback from '@components/OfflineWithFeedback';
+import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
+import ReportActionItemImages from '@components/ReportActionItem/ReportActionItemImages';
+import UserInfoCellsWithArrow from '@components/SelectionList/Search/UserInfoCellsWithArrow';
+import Text from '@components/Text';
+import useLocalize from '@hooks/useLocalize';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
+import ControlSelection from '@libs/ControlSelection';
+import {convertToDisplayString} from '@libs/CurrencyUtils';
+import {canUseTouchScreen} from '@libs/DeviceCapabilities';
+import {calculateAmount} from '@libs/IOUUtils';
+import {getAvatarsForAccountIDs} from '@libs/OptionsListUtils';
+import {getCleanedTagName} from '@libs/PolicyUtils';
+import {getThumbnailAndImageURIs} from '@libs/ReceiptUtils';
+import {getOriginalMessage, isMoneyRequestAction} from '@libs/ReportActionsUtils';
+import type {TransactionDetails} from '@libs/ReportUtils';
+import {canEditMoneyRequest, getTransactionDetails, getWorkspaceIcon, isPolicyExpenseChat, isReportApproved, isSettled} from '@libs/ReportUtils';
+import StringUtils from '@libs/StringUtils';
+import type {TranslationPathOrText} from '@libs/TransactionPreviewUtils';
+import {createTransactionPreviewConditionals, getIOUData, getTransactionPreviewTextAndTranslationPaths} from '@libs/TransactionPreviewUtils';
+import {hasReceipt as hasReceiptTransactionUtils, isReceiptBeingScanned} from '@libs/TransactionUtils';
+import ViolationsUtils from '@libs/Violations/ViolationsUtils';
+import variables from '@styles/variables';
+import CONST from '@src/CONST';
+import SCREENS from '@src/SCREENS';
+import type {TransactionPreviewContentProps} from './types';
+
+function TransactionPreviewContent({
+    action,
+    isWhisper,
+    isHovered,
+    chatReport,
+    personalDetails,
+    iouReport,
+    transaction,
+    violations,
+    showContextMenu,
+    offlineWithFeedbackOnClose,
+    navigateToReviewFields,
+    onPreviewPressed,
+    containerStyles,
+    isBillSplit,
+    areThereDuplicates,
+    sessionAccountID,
+    walletTermsErrors,
+    routeName,
+    shouldHideOnDelete = true,
+}: TransactionPreviewContentProps) {
+    const theme = useTheme();
+    const styles = useThemeStyles();
+    const {translate} = useLocalize();
+
+    const themeStyles = {
+        backgroundColor: theme.cardBG,
+    };
+
+    const transactionDetails = useMemo<Partial<TransactionDetails>>(() => getTransactionDetails(transaction) ?? {}, [transaction]);
+    const managerID = iouReport?.managerID ?? CONST.DEFAULT_NUMBER_ID;
+    const ownerAccountID = iouReport?.ownerAccountID ?? CONST.DEFAULT_NUMBER_ID;
+    const isReportAPolicyExpenseChat = isPolicyExpenseChat(chatReport);
+    const {amount: requestAmount, comment: requestComment, merchant, tag, category, currency: requestCurrency} = transactionDetails;
+
+    const transactionPreviewUtilsArguments = useMemo(
+        () => ({
+            iouReport,
+            transaction,
+            translate,
+            action,
+            isBillSplit,
+            violations,
+            transactionDetails,
+        }),
+        [action, iouReport, isBillSplit, transaction, transactionDetails, translate, violations],
+    );
+
+    const conditionals = useMemo(
+        () =>
+            createTransactionPreviewConditionals({
+                ...transactionPreviewUtilsArguments,
+                areThereDuplicates,
+                isReportAPolicyExpenseChat,
+            }),
+        [areThereDuplicates, transactionPreviewUtilsArguments, isReportAPolicyExpenseChat],
+    );
+
+    const {
+        shouldShowRBR,
+        shouldShowMerchant,
+        shouldShowSplitShare,
+        shouldShowTag,
+        shouldShowCategory,
+        shouldShowSkeleton,
+        shouldShowDescription,
+        shouldShowKeepButton,
+        shouldDisableOnPress,
+    } = conditionals;
+
+    const firstViolation = violations.at(0);
+    const isIOUActionType = isMoneyRequestAction(action);
+    const canEdit = isIOUActionType && canEditMoneyRequest(action, transaction);
+    const violationMessage = firstViolation ? ViolationsUtils.getViolationTranslation(firstViolation, translate, canEdit) : undefined;
+
+    const previewText = useMemo(
+        () =>
+            getTransactionPreviewTextAndTranslationPaths({
+                ...transactionPreviewUtilsArguments,
+                shouldShowRBR,
+                violationMessage,
+            }),
+        [transactionPreviewUtilsArguments, shouldShowRBR, violationMessage],
+    );
+    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 showCashOrCard = getTranslatedText(previewText.showCashOrCard);
+    const displayDeleteAmountText = getTranslatedText(previewText.displayDeleteAmountText);
+
+    const iouData = getIOUData(managerID, ownerAccountID, iouReport, personalDetails, (transaction && transaction.amount) ?? 0);
+    const {from, to} = iouData ?? {from: null, to: null};
+    const isDeleted = action?.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE;
+    const shouldShowCategoryOrTag = shouldShowCategory || shouldShowTag;
+    const shouldShowMerchantOrDescription = shouldShowDescription || shouldShowMerchant;
+    const shouldShowIOUHeader = !!from && !!to;
+    const description = truncate(StringUtils.lineBreaksToSpaces(requestComment), {length: CONST.REQUEST_PREVIEW.MAX_LENGTH});
+    const requestMerchant = truncate(merchant, {length: CONST.REQUEST_PREVIEW.MAX_LENGTH});
+    const hasReceipt = hasReceiptTransactionUtils(transaction);
+    const isApproved = isReportApproved({report: iouReport});
+    const isIOUSettled = isSettled(iouReport?.reportID);
+    const isSettlementOrApprovalPartial = !!iouReport?.pendingFields?.partial;
+    const isScanning = hasReceipt && isReceiptBeingScanned(transaction);
+    const displayAmount = isDeleted ? displayDeleteAmountText : displayAmountText;
+    const receiptImages = [{...getThumbnailAndImageURIs(transaction), transaction}];
+    const merchantOrDescription = shouldShowMerchant ? requestMerchant : description || '';
+    const isReviewDuplicateTransactionPage = routeName === SCREENS.TRANSACTION_DUPLICATE.REVIEW;
+    const participantAccountIDs = isMoneyRequestAction(action) && isBillSplit ? getOriginalMessage(action)?.participantAccountIDs ?? [] : [managerID, ownerAccountID];
+    const participantAvatars = getAvatarsForAccountIDs(participantAccountIDs, personalDetails ?? {});
+    const sortedParticipantAvatars = lodashSortBy(participantAvatars, (avatar) => avatar.id);
+    if (isReportAPolicyExpenseChat && isBillSplit) {
+        sortedParticipantAvatars.push(getWorkspaceIcon(chatReport));
+    }
+
+    // If available, retrieve the split share from the splits object of the transaction, if not, display an even share.
+    const splitShare = useMemo(
+        () =>
+            shouldShowSplitShare
+                ? transaction?.comment?.splits?.find((split) => split.accountID === sessionAccountID)?.amount ??
+                  calculateAmount(isReportAPolicyExpenseChat ? 1 : participantAccountIDs.length - 1, requestAmount ?? 0, requestCurrency ?? '', action.actorAccountID === sessionAccountID)
+                : 0,
+        [
+            shouldShowSplitShare,
+            isReportAPolicyExpenseChat,
+            action.actorAccountID,
+            participantAccountIDs.length,
+            transaction?.comment?.splits,
+            requestAmount,
+            requestCurrency,
+            sessionAccountID,
+        ],
+    );
+
+    const transactionContent = (
+        <View style={[styles.border, styles.reportContainerBorderRadius]}>
+            <OfflineWithFeedback
+                errors={walletTermsErrors}
+                onClose={() => offlineWithFeedbackOnClose}
+                errorRowStyles={[styles.mbn1]}
+                needsOffscreenAlphaCompositing
+                pendingAction={action?.pendingAction}
+                shouldDisableStrikeThrough={isDeleted}
+                shouldDisableOpacity={isDeleted}
+                shouldHideOnDelete={shouldHideOnDelete}
+            >
+                <View
+                    style={[
+                        isScanning || isWhisper ? [styles.reportPreviewBoxHoverBorder, styles.reportContainerBorderRadius] : undefined,
+                        !onPreviewPressed ? [styles.moneyRequestPreviewBox, containerStyles, themeStyles] : {},
+                    ]}
+                >
+                    {!isDeleted && (
+                        <ReportActionItemImages
+                            images={receiptImages}
+                            // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+                            isHovered={isHovered || isScanning}
+                            size={1}
+                        />
+                    )}
+                    {shouldShowSkeleton ? (
+                        <MoneyRequestSkeletonView />
+                    ) : (
+                        <View style={[styles.expenseAndReportPreviewBoxBody, styles.mtn1]}>
+                            <View style={styles.gap3}>
+                                <View style={isBillSplit || shouldShowMerchantOrDescription || shouldShowCategoryOrTag ? styles.gap2 : {}}>
+                                    {shouldShowIOUHeader && (
+                                        <View style={[styles.flex1, styles.dFlex, styles.alignItemsCenter, styles.gap2, styles.flexRow]}>
+                                            <UserInfoCellsWithArrow
+                                                shouldDisplayArrowIcon
+                                                participantFrom={from}
+                                                participantFromDisplayName={from.displayName ?? from.login ?? ''}
+                                                participantTo={to}
+                                                participantToDisplayName={to.displayName ?? to.login ?? ''}
+                                                avatarSize="mid-subscript"
+                                                infoCellsTextStyle={{...styles.textMicroBold, lineHeight: 14}}
+                                                infoCellsAvatarStyle={styles.pr1}
+                                            />
+                                        </View>
+                                    )}
+                                    <View style={[styles.flexRow, styles.alignItemsCenter]}>
+                                        <Text style={[styles.textLabelSupporting, styles.flex1, styles.lh16]}>{previewHeaderText}</Text>
+                                        {isBillSplit && (
+                                            <View style={styles.moneyRequestPreviewBoxAvatar}>
+                                                <MultipleAvatars
+                                                    icons={sortedParticipantAvatars}
+                                                    shouldStackHorizontally
+                                                    size="subscript"
+                                                    shouldUseCardBackground
+                                                />
+                                            </View>
+                                        )}
+                                        {!isBillSplit && !shouldShowMerchantOrDescription && (
+                                            <Text
+                                                fontSize={variables.fontSizeNormal}
+                                                style={[isDeleted && styles.lineThrough, styles.flexShrink0]}
+                                                numberOfLines={1}
+                                            >
+                                                {displayAmount}
+                                            </Text>
+                                        )}
+                                    </View>
+                                    <View>
+                                        <View style={[styles.flexRow]}>
+                                            <View
+                                                style={[
+                                                    styles.flex1,
+                                                    styles.flexRow,
+                                                    styles.alignItemsCenter,
+                                                    isBillSplit && !shouldShowMerchantOrDescription ? styles.justifyContentEnd : styles.justifyContentBetween,
+                                                ]}
+                                            >
+                                                {shouldShowMerchantOrDescription && (
+                                                    <Text
+                                                        fontSize={variables.fontSizeNormal}
+                                                        style={[isDeleted && styles.lineThrough]}
+                                                        numberOfLines={1}
+                                                    >
+                                                        {merchantOrDescription}
+                                                    </Text>
+                                                )}
+                                                {(shouldShowMerchant || shouldShowDescription || isBillSplit) && (
+                                                    <Text
+                                                        fontSize={variables.fontSizeNormal}
+                                                        style={[isDeleted && styles.lineThrough, styles.flexShrink0]}
+                                                        numberOfLines={1}
+                                                    >
+                                                        {displayAmount}
+                                                    </Text>
+                                                )}
+                                            </View>
+                                        </View>
+                                        <View style={[styles.flexRow, styles.justifyContentEnd]}>
+                                            {!!splitShare && (
+                                                <Text style={[styles.textLabel, styles.colorMuted, styles.amountSplitPadding]}>
+                                                    {translate('iou.yourSplit', {amount: convertToDisplayString(splitShare, requestCurrency)})}
+                                                </Text>
+                                            )}
+                                        </View>
+                                    </View>
+                                    {shouldShowCategoryOrTag && (
+                                        <View style={[styles.flexRow, styles.alignItemsCenter]}>
+                                            {shouldShowCategory && (
+                                                <View
+                                                    style={[
+                                                        styles.flexRow,
+                                                        styles.alignItemsCenter,
+                                                        styles.gap1,
+                                                        shouldShowTag && styles.mw50,
+                                                        shouldShowTag && styles.pr1,
+                                                        styles.flexShrink1,
+                                                    ]}
+                                                >
+                                                    <Icon
+                                                        src={Folder}
+                                                        height={variables.iconSizeExtraSmall}
+                                                        width={variables.iconSizeExtraSmall}
+                                                        fill={theme.icon}
+                                                    />
+                                                    <Text
+                                                        numberOfLines={1}
+                                                        style={[styles.textMicroSupporting, styles.pre, styles.flexShrink1]}
+                                                    >
+                                                        {category}
+                                                    </Text>
+                                                </View>
+                                            )}
+                                            {shouldShowTag && !!tag && (
+                                                <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter, styles.gap1, category && styles.pl1]}>
+                                                    <Icon
+                                                        src={Tag}
+                                                        height={variables.iconSizeExtraSmall}
+                                                        width={variables.iconSizeExtraSmall}
+                                                        fill={theme.icon}
+                                                    />
+                                                    <Text
+                                                        numberOfLines={1}
+                                                        style={[styles.textMicroSupporting, styles.pre, styles.flexShrink1]}
+                                                    >
+                                                        {getCleanedTagName(tag)}
+                                                    </Text>
+                                                </View>
+                                            )}
+                                        </View>
+                                    )}
+                                </View>
+                                {!isIOUSettled && shouldShowRBR && (
+                                    <View style={[styles.flexRow, styles.alignItemsCenter, styles.gap1]}>
+                                        <Icon
+                                            src={DotIndicator}
+                                            fill={theme.danger}
+                                            height={variables.iconSizeExtraSmall}
+                                            width={variables.iconSizeExtraSmall}
+                                        />
+                                        <Text
+                                            numberOfLines={1}
+                                            style={[styles.textMicroSupporting, styles.pre, styles.flexShrink1, {color: theme.danger}]}
+                                        >
+                                            {RBRMessage}
+                                        </Text>
+                                    </View>
+                                )}
+                            </View>
+                        </View>
+                    )}
+                </View>
+            </OfflineWithFeedback>
+        </View>
+    );
+
+    if (!onPreviewPressed) {
+        return transactionContent;
+    }
+
+    return (
+        <PressableWithoutFeedback
+            onPress={shouldDisableOnPress ? undefined : onPreviewPressed}
+            onPressIn={() => canUseTouchScreen() && ControlSelection.block()}
+            onPressOut={() => ControlSelection.unblock()}
+            onLongPress={showContextMenu}
+            shouldUseHapticsOnLongPress
+            accessibilityLabel={isBillSplit ? translate('iou.split') : showCashOrCard}
+            accessibilityHint={convertToDisplayString(requestAmount, requestCurrency)}
+            style={[
+                styles.moneyRequestPreviewBox,
+                containerStyles,
+                themeStyles,
+                shouldDisableOnPress && styles.cursorDefault,
+                (isIOUSettled || isApproved) && isSettlementOrApprovalPartial && styles.offlineFeedback.pending,
+            ]}
+        >
+            {transactionContent}
+            {isReviewDuplicateTransactionPage && !isIOUSettled && !isApproved && shouldShowKeepButton && (
+                <Button
+                    text={translate('violations.keepThisOne')}
+                    success
+                    style={[styles.ph4, styles.pb4]}
+                    onPress={navigateToReviewFields}
+                />
+            )}
+        </PressableWithoutFeedback>
+    );
+}
+
+TransactionPreviewContent.displayName = 'TransactionPreviewContent';
+
+export default TransactionPreviewContent;
diff --git a/src/components/ReportActionItem/TransactionPreview/index.tsx b/src/components/ReportActionItem/TransactionPreview/index.tsx
new file mode 100644
index 000000000000..fdd2edc436b8
--- /dev/null
+++ b/src/components/ReportActionItem/TransactionPreview/index.tsx
@@ -0,0 +1,80 @@
+import {useRoute} from '@react-navigation/native';
+import React, {useCallback, useMemo} from 'react';
+import type {GestureResponderEvent} from 'react-native';
+import {useOnyx} from 'react-native-onyx';
+import {showContextMenuForReport} from '@components/ShowContextMenuContext';
+import useTransactionViolations from '@hooks/useTransactionViolations';
+import {getOriginalMessage, isMoneyRequestAction as isMoneyRequestActionReportActionsUtils} from '@libs/ReportActionsUtils';
+import {getReviewNavigationRoute} from '@libs/TransactionPreviewUtils';
+import {removeSettledAndApprovedTransactions} from '@libs/TransactionUtils';
+import Navigation from '@navigation/Navigation';
+import type {PlatformStackRouteProp} from '@navigation/PlatformStackNavigation/types';
+import type {TransactionDuplicateNavigatorParamList} from '@navigation/types';
+import {clearWalletTermsError} from '@userActions/PaymentMethods';
+import {clearIOUError} from '@userActions/Report';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import type SCREENS from '@src/SCREENS';
+import TransactionPreviewContent from './TransactionPreviewContent';
+import type {TransactionPreviewProps} from './types';
+
+function TransactionPreview(props: TransactionPreviewProps) {
+    const {action, chatReportID, reportID, contextMenuAnchor, checkIfContextMenuActive = () => {}, shouldDisplayContextMenu, iouReportID} = props;
+
+    const [iouReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${iouReportID}`);
+    const route = useRoute<PlatformStackRouteProp<TransactionDuplicateNavigatorParamList, typeof SCREENS.TRANSACTION_DUPLICATE.REVIEW>>();
+    const [report] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${route.params?.threadReportID}`);
+    const isMoneyRequestAction = isMoneyRequestActionReportActionsUtils(action);
+    const transactionID = isMoneyRequestAction ? getOriginalMessage(action)?.IOUTransactionID : null;
+    const [transaction] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`);
+    const violations = useTransactionViolations(transaction?.transactionID);
+    const [walletTerms] = useOnyx(ONYXKEYS.WALLET_TERMS);
+    const [session] = useOnyx(ONYXKEYS.SESSION);
+    const [chatReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${chatReportID}`);
+    const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST);
+
+    // Get transaction violations for given transaction id from onyx, find duplicated transactions violations and get duplicates
+    const allDuplicates = useMemo(() => violations?.find((violation) => violation.name === CONST.VIOLATIONS.DUPLICATED_TRANSACTION)?.data?.duplicates ?? [], [violations]);
+    const duplicates = useMemo(() => removeSettledAndApprovedTransactions(allDuplicates), [allDuplicates]);
+    const sessionAccountID = session?.accountID;
+    const areThereDuplicates = allDuplicates.length > 0 && duplicates.length > 0 && allDuplicates.length === duplicates.length;
+
+    const showContextMenu = (event: GestureResponderEvent) => {
+        if (!shouldDisplayContextMenu) {
+            return;
+        }
+        showContextMenuForReport(event, contextMenuAnchor, reportID, action, checkIfContextMenuActive);
+    };
+
+    const offlineWithFeedbackOnClose = useCallback(() => {
+        clearWalletTermsError();
+        clearIOUError(chatReportID);
+    }, [chatReportID]);
+
+    const navigateToReviewFields = useCallback(() => {
+        Navigation.navigate(getReviewNavigationRoute(route, report, transaction, duplicates));
+    }, [duplicates, report, route, transaction]);
+
+    return (
+        <TransactionPreviewContent
+            /* eslint-disable-next-line react/jsx-props-no-spreading */
+            {...props}
+            chatReport={chatReport}
+            personalDetails={personalDetails}
+            iouReport={iouReport}
+            transaction={transaction}
+            violations={violations}
+            showContextMenu={showContextMenu}
+            offlineWithFeedbackOnClose={offlineWithFeedbackOnClose}
+            navigateToReviewFields={navigateToReviewFields}
+            areThereDuplicates={areThereDuplicates}
+            sessionAccountID={sessionAccountID}
+            walletTermsErrors={walletTerms?.errors}
+            routeName={route.name}
+        />
+    );
+}
+
+TransactionPreview.displayName = 'TransactionPreview';
+
+export default TransactionPreview;
diff --git a/src/components/ReportActionItem/TransactionPreview/types.ts b/src/components/ReportActionItem/TransactionPreview/types.ts
new file mode 100644
index 000000000000..88bed24e1b72
--- /dev/null
+++ b/src/components/ReportActionItem/TransactionPreview/types.ts
@@ -0,0 +1,112 @@
+import type {GestureResponderEvent, StyleProp, ViewStyle} from 'react-native';
+import type {OnyxEntry} from 'react-native-onyx';
+import type {ContextMenuAnchor} from '@pages/home/report/ContextMenu/ReportActionContextMenu';
+import type {PersonalDetailsList, Report, ReportAction, Transaction, TransactionViolations} from '@src/types/onyx';
+import type {Errors} from '@src/types/onyx/OnyxCommon';
+
+type TransactionPreviewProps = {
+    /** The active IOUReport, used for Onyx subscription */
+    iouReportID: string | undefined;
+
+    /** The associated chatReport */
+    chatReportID: string | undefined;
+
+    /** The ID of the current report */
+    reportID: string | undefined;
+
+    /** Callback for the preview pressed */
+    onPreviewPressed: (event?: GestureResponderEvent | KeyboardEvent) => void;
+
+    /** All the data of the action, used for showing context menu */
+    action: ReportAction;
+
+    /** Popover context menu anchor, used for showing context menu */
+    contextMenuAnchor?: ContextMenuAnchor;
+
+    /** Callback for updating context menu active state, used for showing context menu */
+    checkIfContextMenuActive?: () => void;
+
+    /** Extra styles to pass to View wrapper */
+    containerStyles?: StyleProp<ViewStyle>;
+
+    /** True if this IOU has a type of split */
+    isBillSplit: boolean;
+
+    /** Whether this IOU is a track expense */
+    isTrackExpense: boolean;
+
+    /** True if the IOU Preview card is hovered */
+    isHovered?: boolean;
+
+    /** Whether or not an IOU report contains expenses in a different currency
+     * that are either created or cancelled offline, and thus haven't been converted to the report's currency yet
+     */
+    shouldShowPendingConversionMessage?: boolean;
+
+    /** Whether a message is a whisper */
+    isWhisper?: boolean;
+
+    /** Whether  context menu should be shown on press */
+    shouldDisplayContextMenu?: boolean;
+};
+
+type TransactionPreviewContentProps = {
+    /** Function to display the context menu in response to an event. */
+    showContextMenu: (event: GestureResponderEvent) => void;
+
+    /** Handles the UI response and data clean-up when the transaction goes offline. */
+    offlineWithFeedbackOnClose: () => void;
+
+    /** Navigates the user to a separate view or component for reviewing or editing transaction fields. */
+    navigateToReviewFields: () => void;
+
+    /** General callback for handling presses on the preview component, can also handle keyboard events. */
+    onPreviewPressed: (event?: GestureResponderEvent | KeyboardEvent | undefined) => void;
+
+    /** Whether the transaction is whisper. */
+    isWhisper?: boolean;
+
+    /** Determines if the element is currently hovered over. */
+    isHovered?: boolean;
+
+    /** Optional custom styles to be applied to container components. */
+    containerStyles?: StyleProp<ViewStyle>;
+
+    /** Records any errors related to wallet terms. */
+    walletTermsErrors: Errors | undefined;
+
+    /** Represents the IOU report entry from Onyx */
+    iouReport: OnyxEntry<Report>;
+
+    /** Flag to determine if a transaction involves a bill split among multiple parties. */
+    isBillSplit: boolean;
+
+    /** Holds the transaction data entry from Onyx */
+    transaction: OnyxEntry<Transaction>;
+
+    /** Represents the action entry from Onyx */
+    action: ReportAction;
+
+    /** Contains data about potential transaction violations */
+    violations: TransactionViolations;
+
+    /** Holds the chat report entry from Onyx */
+    chatReport?: Report;
+
+    /** Optional details about people involved in the transaction */
+    personalDetails?: PersonalDetailsList;
+
+    /** Indicates whether the transaction consists of duplicates */
+    areThereDuplicates: boolean;
+
+    /** Session account ID */
+    sessionAccountID?: number;
+
+    /** Name of the route where the transaction preview is being displayed */
+    routeName: string;
+
+    /** Determine whether to hide the component's children if deletion is pending */
+    shouldHideOnDelete?: boolean;
+};
+
+export type {TransactionPreviewProps, TransactionPreviewContentProps};
diff --git a/src/components/SelectionList/Search/ExpenseItemHeaderNarrow.tsx b/src/components/SelectionList/Search/ExpenseItemHeaderNarrow.tsx
index 341d46d8bda0..35bc97205cbe 100644
--- a/src/components/SelectionList/Search/ExpenseItemHeaderNarrow.tsx
+++ b/src/components/SelectionList/Search/ExpenseItemHeaderNarrow.tsx
@@ -12,7 +12,7 @@ import {isCorrectSearchUserName} from '@libs/SearchUIUtils';
 import variables from '@styles/variables';
 import type {SearchPersonalDetails, SearchTransactionAction} from '@src/types/onyx/SearchResults';
 import ActionCell from './ActionCell';
-import UserInfoCell from './UserInfoCell';
+import UserInfoCellsWithArrow from './UserInfoCellsWithArrow';
 
 type ExpenseItemHeaderNarrowProps = {
     text?: string;
@@ -77,26 +77,13 @@ function ExpenseItemHeaderNarrow({
                         </View>
                     </PressableWithFeedback>
                 )}
-                <View style={[styles.mw50]}>
-                    <UserInfoCell
-                        participant={participantFrom}
-                        displayName={participantFromDisplayName}
-                    />
-                </View>
-                {!!shouldDisplayArrowIcon && (
-                    <Icon
-                        src={Expensicons.ArrowRightLong}
-                        width={variables.iconSizeXXSmall}
-                        height={variables.iconSizeXXSmall}
-                        fill={theme.icon}
-                    />
-                )}
-                <View style={[styles.flex1, styles.mw50]}>
-                    <UserInfoCell
-                        participant={participantTo}
-                        displayName={participantToDisplayName}
-                    />
-                </View>
+                <UserInfoCellsWithArrow
+                    shouldDisplayArrowIcon={!!shouldDisplayArrowIcon}
+                    participantFrom={participantFrom}
+                    participantFromDisplayName={participantFromDisplayName}
+                    participantTo={participantTo}
+                    participantToDisplayName={participantToDisplayName}
+                />
             </View>
             <View style={[StyleUtils.getWidthStyle(variables.w80)]}>
                 <ActionCell
diff --git a/src/components/SelectionList/Search/TransactionListItemRow.tsx b/src/components/SelectionList/Search/TransactionListItemRow.tsx
index 13d78aea2228..48f8f4b2780f 100644
--- a/src/components/SelectionList/Search/TransactionListItemRow.tsx
+++ b/src/components/SelectionList/Search/TransactionListItemRow.tsx
@@ -416,13 +416,15 @@ function TransactionListItemRow({
                 </View>
                 <View style={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.FROM)]}>
                     <UserInfoCell
-                        participant={item.from}
+                        accountID={item.from.accountID}
+                        avatar={item.from.avatar}
                         displayName={item.formattedFrom}
                     />
                 </View>
                 <View style={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.FROM)]}>
                     <UserInfoCell
-                        participant={item.to}
+                        accountID={item.to.accountID}
+                        avatar={item.to.avatar}
                         displayName={item.formattedTo}
                     />
                 </View>
diff --git a/src/components/SelectionList/Search/UserInfoCell.tsx b/src/components/SelectionList/Search/UserInfoCell.tsx
index 6a2fda42d247..4c857eca38d3 100644
--- a/src/components/SelectionList/Search/UserInfoCell.tsx
+++ b/src/components/SelectionList/Search/UserInfoCell.tsx
@@ -1,22 +1,27 @@
 import React from 'react';
+import type {TextStyle, ViewStyle} from 'react-native';
 import {View} from 'react-native';
 import Avatar from '@components/Avatar';
 import Text from '@components/Text';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {isCorrectSearchUserName} from '@libs/SearchUIUtils';
+import type {AvatarSource} from '@libs/UserUtils';
+import type {AvatarSizeName} from '@styles/utils';
 import CONST from '@src/CONST';
-import type {SearchPersonalDetails} from '@src/types/onyx/SearchResults';
 
 type UserInfoCellProps = {
-    participant: SearchPersonalDetails;
+    accountID: number;
+    avatar: AvatarSource | undefined;
     displayName: string;
+    avatarSize?: AvatarSizeName;
+    textStyle?: TextStyle;
+    avatarStyle?: ViewStyle;
 };
 
-function UserInfoCell({participant, displayName}: UserInfoCellProps) {
+function UserInfoCell({avatar, accountID, displayName, avatarSize, textStyle, avatarStyle}: UserInfoCellProps) {
     const styles = useThemeStyles();
     const {isLargeScreenWidth} = useResponsiveLayout();
-    const avatarURL = participant?.avatar;
 
     if (!isCorrectSearchUserName(displayName)) {
         return null;
@@ -26,16 +31,16 @@ function UserInfoCell({participant, displayName}: UserInfoCellProps) {
         <View style={[styles.flexRow, styles.alignItemsCenter]}>
             <Avatar
                 imageStyles={[styles.alignSelfCenter]}
-                size={CONST.AVATAR_SIZE.MID_SUBSCRIPT}
-                source={avatarURL}
+                size={avatarSize ?? CONST.AVATAR_SIZE.MID_SUBSCRIPT}
+                source={avatar}
                 name={displayName}
                 type={CONST.ICON_TYPE_AVATAR}
-                avatarID={participant?.accountID}
-                containerStyles={[styles.pr2]}
+                avatarID={accountID}
+                containerStyles={[styles.pr2, avatarStyle]}
             />
             <Text
                 numberOfLines={1}
-                style={[isLargeScreenWidth ? styles.themeTextColor : styles.textMicroBold, styles.flexShrink1]}
+                style={[isLargeScreenWidth ? styles.themeTextColor : styles.textMicroBold, styles.flexShrink1, textStyle]}
             >
                 {displayName}
             </Text>
diff --git a/src/components/SelectionList/Search/UserInfoCellsWithArrow.tsx b/src/components/SelectionList/Search/UserInfoCellsWithArrow.tsx
new file mode 100644
index 000000000000..ba7fc34ed47a
--- /dev/null
+++ b/src/components/SelectionList/Search/UserInfoCellsWithArrow.tsx
@@ -0,0 +1,72 @@
+import React from 'react';
+import type {TextStyle, ViewStyle} from 'react-native';
+import {View} from 'react-native';
+import Icon from '@components/Icon';
+import * as Expensicons from '@components/Icon/Expensicons';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
+import type {AvatarSizeName} from '@styles/utils';
+import variables from '@styles/variables';
+import type {PersonalDetails} from '@src/types/onyx';
+import type {SearchPersonalDetails} from '@src/types/onyx/SearchResults';
+import UserInfoCell from './UserInfoCell';
+
+function UserInfoCellsWithArrow({
+    shouldDisplayArrowIcon,
+    participantFrom,
+    participantFromDisplayName,
+    participantTo,
+    participantToDisplayName,
+    avatarSize,
+    infoCellsTextStyle,
+    infoCellsAvatarStyle,
+}: {
+    shouldDisplayArrowIcon: boolean;
+    participantFrom: SearchPersonalDetails | PersonalDetails;
+    participantFromDisplayName: string;
+    participantTo: SearchPersonalDetails | PersonalDetails;
+    participantToDisplayName: string;
+    avatarSize?: AvatarSizeName;
+    infoCellsTextStyle?: TextStyle;
+    infoCellsAvatarStyle?: ViewStyle;
+}) {
+    const styles = useThemeStyles();
+    const theme = useTheme();
+
+    return (
+        <>
+            <View style={[styles.mw50]}>
+                <UserInfoCell
+                    accountID={participantFrom.accountID}
+                    avatar={participantFrom.avatar}
+                    displayName={participantFromDisplayName}
+                    avatarSize={avatarSize}
+                    textStyle={infoCellsTextStyle}
+                    avatarStyle={infoCellsAvatarStyle}
+                />
+            </View>
+            {shouldDisplayArrowIcon && (
+                <Icon
+                    src={Expensicons.ArrowRightLong}
+                    width={variables.iconSizeXXSmall}
+                    height={variables.iconSizeXXSmall}
+                    fill={theme.icon}
+                />
+            )}
+            <View style={[styles.flex1, styles.mw50]}>
+                <UserInfoCell
+                    accountID={participantTo.accountID}
+                    avatar={participantTo.avatar}
+                    displayName={participantToDisplayName}
+                    avatarSize={avatarSize}
+                    textStyle={infoCellsTextStyle}
+                    avatarStyle={infoCellsAvatarStyle}
+                />
+            </View>
+        </>
+    );
+}
+
+UserInfoCellsWithArrow.displayName = 'UserInfoCellsWithArrow';
+
+export default UserInfoCellsWithArrow;
diff --git a/src/languages/en.ts b/src/languages/en.ts
index 1026ce00a17f..2c9bb755e300 100755
--- a/src/languages/en.ts
+++ b/src/languages/en.ts
@@ -1060,6 +1060,7 @@ const translations = {
         explainHold: "Explain why you're holding this expense.",
         reason: 'Reason',
         holdReasonRequired: 'A reason is required when holding.',
+        expenseWasPutOnHold: 'Expense was put on hold',
         expenseOnHold: 'This expense was put on hold. Please review the comments for next steps.',
         expensesOnHold: 'All expenses were put on hold. Please review the comments for next steps.',
         expenseDuplicate: 'This expense has the same details as another one. Please review the duplicates to remove the hold.',
diff --git a/src/languages/es.ts b/src/languages/es.ts
index b76f1162c446..f16f8ee52ea2 100644
--- a/src/languages/es.ts
+++ b/src/languages/es.ts
@@ -1055,6 +1055,7 @@ const translations = {
         explainHold: 'Explica la razón para retener esta solicitud.',
         reason: 'Razón',
         holdReasonRequired: 'Se requiere una razón para retener.',
+        expenseWasPutOnHold: 'Este gasto está retenido',
         expenseOnHold: 'Este gasto está retenido. Revisa los comentarios para saber como proceder.',
         expensesOnHold: 'Todos los gastos están retenidos. Revisa los comentarios para saber como proceder.',
         expenseDuplicate: 'Esta solicitud tiene los mismos detalles que otra. Revisa los duplicados para eliminar la retención.',
diff --git a/src/libs/TransactionPreviewUtils.ts b/src/libs/TransactionPreviewUtils.ts
new file mode 100644
index 000000000000..817f152079f5
--- /dev/null
+++ b/src/libs/TransactionPreviewUtils.ts
@@ -0,0 +1,327 @@
+import truncate from 'lodash/truncate';
+import type {OnyxEntry, OnyxInputValue} from 'react-native-onyx';
+import CONST from '@src/CONST';
+import type {TranslationPaths} from '@src/languages/types';
+import ROUTES from '@src/ROUTES';
+import type * as OnyxTypes from '@src/types/onyx';
+import {isEmptyObject} from '@src/types/utils/EmptyObject';
+import {abandonReviewDuplicateTransactions, setReviewDuplicatesKey} from './actions/Transaction';
+import {convertToDisplayString} from './CurrencyUtils';
+import DateUtils from './DateUtils';
+import type {PlatformStackRouteProp} from './Navigation/PlatformStackNavigation/types';
+import type {TransactionDuplicateNavigatorParamList} from './Navigation/types';
+import {getOriginalMessage, getReportAction, isMessageDeleted, isMoneyRequestAction} from './ReportActionsUtils';
+import {isIOUReport, isPaidGroupPolicy, isPaidGroupPolicyExpenseReport, isReportApproved, isSettled} from './ReportUtils';
+import type {TransactionDetails} from './ReportUtils';
+import StringUtils from './StringUtils';
+import {
+    compareDuplicateTransactionFields,
+    getFormattedCreated,
+    hasMissingSmartscanFields,
+    hasNoticeTypeViolation,
+    hasPendingRTERViolation,
+    hasReceipt,
+    hasViolation,
+    hasWarningTypeViolation,
+    isAmountMissing,
+    isCardTransaction,
+    isCreatedMissing,
+    isDistanceRequest,
+    isFetchingWaypointsFromServer,
+    isMerchantMissing,
+    isOnHold,
+    isPending,
+    isPerDiemRequest,
+    isReceiptBeingScanned,
+} from './TransactionUtils';
+
+const emptyPersonalDetails: OnyxTypes.PersonalDetails = {
+    accountID: CONST.REPORT.OWNER_ACCOUNT_ID_FAKE,
+    avatar: '',
+    displayName: undefined,
+    login: undefined,
+};
+
+const chooseIDBasedOnAmount = (amount: number, negativeId: number, positiveId: number) => (amount < 0 ? negativeId : positiveId);
+
+function getIOUData(
+    managerID: number,
+    ownerAccountID: number,
+    reportOrID: OnyxTypes.OnyxInputOrEntry<OnyxTypes.Report> | string | undefined,
+    personalDetails: OnyxTypes.PersonalDetailsList | undefined,
+    amount: number,
+) {
+    const fromID = chooseIDBasedOnAmount(amount, managerID, ownerAccountID);
+    const toID = chooseIDBasedOnAmount(amount, ownerAccountID, managerID);
+
+    return reportOrID && isIOUReport(reportOrID)
+        ? {
+              from: personalDetails ? personalDetails[fromID] : emptyPersonalDetails,
+              to: personalDetails ? personalDetails[toID] : emptyPersonalDetails,
+          }
+        : undefined;
+}
+
+const getReviewNavigationRoute = (
+    route: PlatformStackRouteProp<TransactionDuplicateNavigatorParamList, 'Transaction_Duplicate_Review'>,
+    report: OnyxEntry<OnyxTypes.Report>,
+    transaction: OnyxEntry<OnyxTypes.Transaction>,
+    duplicates: string[],
+) => {
+    const backTo = route.params.backTo;
+
+    const parentReportAction = getReportAction(report?.parentReportID, report?.parentReportActionID);
+    const reviewingTransactionID = isMoneyRequestAction(parentReportAction) ? getOriginalMessage(parentReportAction)?.IOUTransactionID : undefined;
+
+    // Clear the draft before selecting a different expense to prevent merging fields from the previous expense
+    // (e.g., category, tag, tax) that may be not enabled/available in the new expense's policy.
+    abandonReviewDuplicateTransactions();
+    const comparisonResult = compareDuplicateTransactionFields(reviewingTransactionID, transaction?.reportID, transaction?.transactionID ?? reviewingTransactionID);
+    setReviewDuplicatesKey({...comparisonResult.keep, duplicates, transactionID: transaction?.transactionID, reportID: transaction?.reportID});
+
+    if (comparisonResult.change.merchant) {
+        return ROUTES.TRANSACTION_DUPLICATE_REVIEW_MERCHANT_PAGE.getRoute(route.params?.threadReportID, backTo);
+    }
+    if (comparisonResult.change.category) {
+        return ROUTES.TRANSACTION_DUPLICATE_REVIEW_CATEGORY_PAGE.getRoute(route.params?.threadReportID, backTo);
+    }
+    if (comparisonResult.change.tag) {
+        return ROUTES.TRANSACTION_DUPLICATE_REVIEW_TAG_PAGE.getRoute(route.params?.threadReportID, backTo);
+    }
+    if (comparisonResult.change.description) {
+        return ROUTES.TRANSACTION_DUPLICATE_REVIEW_DESCRIPTION_PAGE.getRoute(route.params?.threadReportID, backTo);
+    }
+    if (comparisonResult.change.taxCode) {
+        return ROUTES.TRANSACTION_DUPLICATE_REVIEW_TAX_CODE_PAGE.getRoute(route.params?.threadReportID, backTo);
+    }
+    if (comparisonResult.change.billable) {
+        return ROUTES.TRANSACTION_DUPLICATE_REVIEW_BILLABLE_PAGE.getRoute(route.params?.threadReportID, backTo);
+    }
+    if (comparisonResult.change.reimbursable) {
+        return ROUTES.TRANSACTION_DUPLICATE_REVIEW_REIMBURSABLE_PAGE.getRoute(route.params?.threadReportID, backTo);
+    }
+
+    return ROUTES.TRANSACTION_DUPLICATE_CONFIRMATION_PAGE.getRoute(route.params?.threadReportID, backTo);
+};
+
+type TranslationPathOrText = {
+    translationPath?: TranslationPaths;
+    text?: string;
+};
+
+const dotSeparator: TranslationPathOrText = {text: ` ${CONST.DOT_SEPARATOR} `};
+
+function getTransactionPreviewTextAndTranslationPaths({
+    iouReport,
+    transaction,
+    action,
+    violations,
+    transactionDetails,
+    isBillSplit,
+    shouldShowRBR,
+    violationMessage,
+}: {
+    iouReport: OnyxEntry<OnyxTypes.Report>;
+    transaction: OnyxEntry<OnyxTypes.Transaction>;
+    action: OnyxTypes.ReportAction;
+    violations: OnyxTypes.TransactionViolations;
+    transactionDetails: Partial<TransactionDetails>;
+    isBillSplit: boolean;
+    shouldShowRBR: boolean;
+    violationMessage?: string;
+}) {
+    const isFetchingWaypoints = isFetchingWaypointsFromServer(transaction);
+    const isTransactionOnHold = isOnHold(transaction);
+    const isTransactionMadeWithCard = isCardTransaction(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;
+    const showCashOrCard: TranslationPathOrText = {translationPath: isTransactionMadeWithCard ? 'iou.card' : 'iou.cash'};
+    const isScanning = hasReceipt(transaction) && isReceiptBeingScanned(transaction);
+    const hasFieldErrors = hasMissingSmartscanFields(transaction);
+    const hasViolationsOfTypeNotice = hasNoticeTypeViolation(transaction?.transactionID, violations, true) && isPaidGroupPolicy(iouReport);
+
+    const {amount: requestAmount, currency: requestCurrency} = transactionDetails;
+
+    let RBRMessage: TranslationPathOrText | undefined;
+
+    if (!shouldShowRBR || !transaction) {
+        RBRMessage = {text: ''};
+    }
+
+    if (shouldShowHoldMessage && RBRMessage === undefined) {
+        RBRMessage = {translationPath: 'iou.expenseWasPutOnHold'};
+    }
+
+    if (violationMessage && RBRMessage === undefined) {
+        const violationsCount = violations?.filter((v) => v.type === CONST.VIOLATION_TYPES.VIOLATION).length ?? 0;
+        const isTooLong = violationsCount > 1 || violationMessage.length > 15;
+        const hasViolationsAndFieldErrors = violationsCount > 0 && hasFieldErrors;
+
+        RBRMessage = isTooLong || hasViolationsAndFieldErrors ? {translationPath: 'violations.reviewRequired'} : {text: violationMessage};
+    }
+
+    if (hasFieldErrors && RBRMessage === undefined) {
+        const merchantMissing = isMerchantMissing(transaction);
+        const amountMissing = isAmountMissing(transaction);
+        if (amountMissing && merchantMissing) {
+            RBRMessage = {translationPath: 'violations.reviewRequired'};
+        } else if (amountMissing) {
+            RBRMessage = {translationPath: 'iou.missingAmount'};
+        } else if (merchantMissing) {
+            RBRMessage = {translationPath: 'iou.missingMerchant'};
+        }
+    }
+
+    RBRMessage ??= {text: ''};
+
+    let previewHeaderText: TranslationPathOrText[] = [showCashOrCard];
+
+    if (isDistanceRequest(transaction)) {
+        previewHeaderText = [{translationPath: 'common.distance'}];
+    } else if (isPerDiemRequest(transaction)) {
+        previewHeaderText = [{translationPath: 'common.perDiem'}];
+    } else if (isScanning) {
+        previewHeaderText = [{translationPath: 'common.receipt'}];
+    } else if (isBillSplit) {
+        previewHeaderText = [{translationPath: 'iou.split'}];
+    }
+
+    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);
+    }
+
+    if (isPending(transaction)) {
+        previewHeaderText.push(dotSeparator, {translationPath: 'iou.pending'});
+    }
+
+    if (hasPendingRTERViolation(violations)) {
+        previewHeaderText.push(dotSeparator, {translationPath: 'iou.pendingMatch'});
+    }
+
+    let isPreviewHeaderTextComplete = false;
+
+    if (isMoneyRequestSettled && !iouReport?.isCancelledIOU && !isPartialHold) {
+        previewHeaderText.push(dotSeparator, {translationPath: isTransactionMadeWithCard ? 'common.done' : 'iou.settledExpensify'});
+        isPreviewHeaderTextComplete = true;
+    }
+
+    if (shouldShowRBR && transaction) {
+        isPreviewHeaderTextComplete = true;
+    }
+
+    if (!isPreviewHeaderTextComplete) {
+        if (hasViolationsOfTypeNotice && transaction && !isReportApproved({report: iouReport}) && !isSettled(iouReport?.reportID)) {
+            previewHeaderText.push(dotSeparator, {translationPath: 'violations.reviewRequired'});
+        } else if (isPaidGroupPolicyExpenseReport(iouReport) && 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'});
+        }
+    }
+
+    let displayAmountText: TranslationPathOrText = isScanning ? {translationPath: 'iou.receiptStatusTitle'} : {text: convertToDisplayString(requestAmount, requestCurrency)};
+    if (isFetchingWaypoints && !requestAmount) {
+        displayAmountText = {translationPath: 'iou.fieldPending'};
+    }
+
+    const iouOriginalMessage: OnyxEntry<OnyxTypes.OriginalMessageIOU> = isMoneyRequestAction(action) ? getOriginalMessage(action) ?? undefined : undefined;
+    const displayDeleteAmountText: TranslationPathOrText = {text: convertToDisplayString(iouOriginalMessage?.amount, iouOriginalMessage?.currency)};
+
+    return {
+        RBRMessage,
+        displayAmountText,
+        displayDeleteAmountText,
+        previewHeaderText,
+        showCashOrCard,
+    };
+}
+
+function createTransactionPreviewConditionals({
+    iouReport,
+    transaction,
+    action,
+    violations,
+    transactionDetails,
+    isBillSplit,
+    isReportAPolicyExpenseChat,
+    areThereDuplicates,
+}: {
+    iouReport: OnyxInputValue<OnyxTypes.Report> | undefined;
+    transaction: OnyxEntry<OnyxTypes.Transaction> | undefined;
+    action: OnyxTypes.ReportAction;
+    violations: OnyxTypes.TransactionViolations;
+    transactionDetails: Partial<TransactionDetails>;
+    isBillSplit: boolean;
+    isReportAPolicyExpenseChat: boolean;
+    areThereDuplicates: boolean;
+}) {
+    const {amount: requestAmount, comment: requestComment, merchant, tag, category} = transactionDetails;
+
+    const isScanning = hasReceipt(transaction) && isReceiptBeingScanned(transaction);
+
+    const requestMerchant = truncate(merchant, {length: CONST.REQUEST_PREVIEW.MAX_LENGTH});
+    const description = truncate(StringUtils.lineBreaksToSpaces(requestComment), {length: CONST.REQUEST_PREVIEW.MAX_LENGTH});
+
+    const isMoneyRequestSettled = isSettled(iouReport?.reportID);
+    const isApproved = isReportApproved({report: iouReport});
+    const isSettlementOrApprovalPartial = !!iouReport?.pendingFields?.partial;
+
+    const hasViolationsOfTypeNotice = hasNoticeTypeViolation(transaction?.transactionID, violations, true) && iouReport && isPaidGroupPolicy(iouReport);
+    const hasFieldErrors = hasMissingSmartscanFields(transaction);
+
+    const isFetchingWaypoints = isFetchingWaypointsFromServer(transaction);
+
+    const isTransactionOnHold = isOnHold(transaction);
+    const isFullySettled = isMoneyRequestSettled && !isSettlementOrApprovalPartial;
+    const isFullyApproved = isApproved && !isSettlementOrApprovalPartial;
+
+    const shouldDisableOnPress = isBillSplit && isEmptyObject(transaction);
+    const shouldShowSkeleton = isEmptyObject(transaction) && !isMessageDeleted(action) && action.pendingAction !== CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE;
+    const shouldShowTag = !!tag && isReportAPolicyExpenseChat;
+    const shouldShowCategory = !!category && isReportAPolicyExpenseChat;
+
+    // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+    const hasAnyViolations = hasViolationsOfTypeNotice || hasWarningTypeViolation(transaction?.transactionID, violations, true) || hasViolation(transaction, violations, true);
+    const hasErrorOrOnHold = hasFieldErrors || (!isFullySettled && !isFullyApproved && isTransactionOnHold);
+    const shouldShowRBR = hasAnyViolations || hasErrorOrOnHold;
+
+    // When there are no settled transactions in duplicates, show the "Keep this one" button
+    const shouldShowKeepButton = areThereDuplicates;
+    const shouldShowSplitShare = isBillSplit && !!requestAmount && requestAmount > 0;
+
+    /*
+ Show the merchant for IOUs and expenses only if:
+ - the merchant is not empty, is custom, or is not related to scanning smartscan;
+ - the expense is not a distance expense with a pending route and amount = 0 - in this case,
+   the merchant says: "Route pending...", which is already shown in the amount field;
+*/
+    const shouldShowMerchant =
+        !!requestMerchant &&
+        requestMerchant !== CONST.TRANSACTION.PARTIAL_TRANSACTION_MERCHANT &&
+        requestMerchant !== CONST.TRANSACTION.DEFAULT_MERCHANT &&
+        !(isFetchingWaypoints && !requestAmount);
+    const shouldShowDescription = !!description && !shouldShowMerchant && !isScanning;
+
+    return {
+        shouldDisableOnPress,
+        shouldShowSkeleton,
+        shouldShowTag,
+        shouldShowRBR,
+        shouldShowCategory,
+        shouldShowKeepButton,
+        shouldShowSplitShare,
+        shouldShowMerchant,
+        shouldShowDescription,
+    };
+}
+
+export {getReviewNavigationRoute, getIOUData, getTransactionPreviewTextAndTranslationPaths, createTransactionPreviewConditionals};
+export type {TranslationPathOrText};
diff --git a/src/libs/__mocks__/TransactionPreviewUtils.ts b/src/libs/__mocks__/TransactionPreviewUtils.ts
new file mode 100644
index 000000000000..50391898c44e
--- /dev/null
+++ b/src/libs/__mocks__/TransactionPreviewUtils.ts
@@ -0,0 +1,34 @@
+import CONST from '@src/CONST';
+import type * as OnyxTypes from '@src/types/onyx';
+
+const chooseIdBasedOnAmount = (amount: number, negativeId: number, positiveId: number) => (amount < 0 ? negativeId : positiveId);
+
+const emptyPersonalDetails: OnyxTypes.PersonalDetails = {
+    accountID: CONST.REPORT.OWNER_ACCOUNT_ID_FAKE,
+    avatar: '',
+    displayName: undefined,
+    login: undefined,
+};
+
+function getIOUData(
+    managerID: number,
+    ownerAccountID: number,
+    reportOrID: OnyxTypes.OnyxInputOrEntry<OnyxTypes.Report> | string | undefined,
+    personalDetails: OnyxTypes.PersonalDetailsList | undefined,
+    amount: number,
+) {
+    const fromID = chooseIdBasedOnAmount(amount, managerID, ownerAccountID);
+    const toID = chooseIdBasedOnAmount(amount, ownerAccountID, managerID);
+
+    const from = personalDetails ? personalDetails[fromID] : emptyPersonalDetails;
+    const to = personalDetails ? personalDetails[toID] : emptyPersonalDetails;
+
+    if (reportOrID && (typeof reportOrID === 'string' || reportOrID.type === CONST.REPORT.TYPE.IOU)) {
+        return {from, to};
+    }
+
+    return undefined;
+}
+
+export {getTransactionPreviewTextAndTranslationPaths, createTransactionPreviewConditionals, getReviewNavigationRoute} from '../TransactionPreviewUtils';
+export {getIOUData};
diff --git a/src/stories/TransactionPreviewContent.stories.tsx b/src/stories/TransactionPreviewContent.stories.tsx
new file mode 100644
index 000000000000..3f7f2f8a79b9
--- /dev/null
+++ b/src/stories/TransactionPreviewContent.stories.tsx
@@ -0,0 +1,197 @@
+import type {InputType} from '@storybook/csf';
+import type {Meta, StoryFn} from '@storybook/react';
+import React from 'react';
+import {View} from 'react-native';
+import TransactionPreviewContent from '@components/ReportActionItem/TransactionPreview/TransactionPreviewContent';
+import type {TransactionPreviewContentProps} from '@components/ReportActionItem/TransactionPreview/types';
+import ThemeProvider from '@components/ThemeProvider';
+import ThemeStylesProvider from '@components/ThemeStylesProvider';
+import CONST from '@src/CONST';
+import SCREENS from '@src/SCREENS';
+import type {PendingAction} from '@src/types/onyx/OnyxCommon';
+import {action, chatReport, iouReport, personalDetails, transaction, violations} from './mockData/transactions';
+
+const veryLongString = 'W'.repeat(1000);
+const veryBigNumber = Number('9'.repeat(12));
+const modifiedTransaction = ({category, tag, merchant = '', amount = 1000, hold = false}: {category?: string; tag?: string; merchant?: string; amount?: number; hold?: boolean}) => ({
+    ...transaction,
+    category,
+    tag,
+    merchant,
+    amount,
+    comment: {
+        hold: hold ? 'true' : undefined,
+    },
+});
+const iouReportWithModifiedType = (type: string) => ({...iouReport, type});
+const actionWithModifiedPendingAction = (pendingAction: PendingAction) => ({...action, pendingAction});
+
+const disabledProperties = [
+    'onPreviewPressed',
+    'navigateToReviewFields',
+    'offlineWithFeedbackOnClose',
+    'containerStyles',
+    'showContextMenu',
+    'routeName',
+    'sessionAccountID',
+    'isHovered',
+    'isWhisper',
+    'walletTermsErrors',
+    'personalDetails',
+    'chatReport',
+].reduce<Record<string, {table: {disable: boolean}}>>((disabledArgTypes, property) => {
+    // eslint-disable-next-line no-param-reassign
+    disabledArgTypes[property] = {
+        table: {
+            disable: true,
+        },
+    };
+    return disabledArgTypes;
+}, {});
+
+const generateArgTypes = (mapping: Record<string, unknown>): InputType => ({
+    control: 'select',
+    options: Object.keys(mapping),
+    mapping,
+});
+
+/* eslint-disable @typescript-eslint/naming-convention */
+const transactionsMap = {
+    'No Merchant': modifiedTransaction({}),
+    Food: modifiedTransaction({category: 'Food', tag: 'Yummm', merchant: 'Burgers'}),
+    Grocery: modifiedTransaction({category: 'Shopping', tag: 'Tesco', merchant: 'Supermarket'}),
+    Cars: modifiedTransaction({category: 'Porsche', tag: 'Car shop', merchant: 'Merchant'}),
+    'Too Long': modifiedTransaction({category: veryLongString, tag: veryLongString, merchant: veryLongString, amount: veryBigNumber}),
+};
+
+const violationsMap = {
+    None: [],
+    Duplicate: [violations.at(0)],
+    'Missing Category': [violations.at(1)],
+    'Field Required': [violations.at(2)],
+};
+
+const actionMap = {
+    'Pending delete': actionWithModifiedPendingAction(CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE),
+    'No pending action': action,
+};
+
+const iouReportMap = {
+    IOU: iouReportWithModifiedType(CONST.REPORT.TYPE.IOU),
+    'Normal report': iouReport,
+};
+/* eslint-enable @typescript-eslint/naming-convention */
+
+/**
+ * We use the Component Story Format for writing stories. Follow the docs here:
+ *
+ * https://storybook.js.org/docs/react/writing-stories/introduction#component-story-format
+ */
+type TransactionPreviewStory = StoryFn<typeof TransactionPreviewContent>;
+
+const story: Meta<typeof TransactionPreviewContent> = {
+    title: 'Components/TransactionPreview',
+    component: TransactionPreviewContent,
+    args: {
+        action,
+        isWhisper: false,
+        isHovered: false,
+        chatReport,
+        personalDetails,
+        iouReport,
+        transaction,
+        violations: [],
+        showContextMenu: () => undefined,
+        offlineWithFeedbackOnClose(): void {},
+        navigateToReviewFields: () => undefined,
+        onPreviewPressed: () => true,
+        containerStyles: [],
+        isBillSplit: false,
+        areThereDuplicates: false,
+        sessionAccountID: 11111111,
+        walletTermsErrors: undefined,
+        routeName: SCREENS.TRANSACTION_DUPLICATE.REVIEW,
+        shouldHideOnDelete: false,
+    },
+    argTypes: {
+        ...disabledProperties,
+        iouReport: generateArgTypes(iouReportMap),
+        transaction: generateArgTypes(transactionsMap),
+        violations: generateArgTypes(violationsMap),
+        action: generateArgTypes(actionMap),
+    },
+};
+
+function Template(props: TransactionPreviewContentProps) {
+    return (
+        <ThemeProvider theme={CONST.THEME.LIGHT}>
+            <ThemeStylesProvider>
+                <View style={{flexDirection: 'row'}}>
+                    {/* eslint-disable-next-line react/jsx-props-no-spreading */}
+                    <TransactionPreviewContent {...props} />
+                </View>
+            </ThemeStylesProvider>
+        </ThemeProvider>
+    );
+}
+
+// Arguments can be passed to the component by binding
+// See: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+const Default: TransactionPreviewStory = Template.bind({});
+const NoMerchant: TransactionPreviewStory = Template.bind({});
+const CategoriesAndTag: TransactionPreviewStory = Template.bind({});
+const KeepButtonCategoriesAndTag: TransactionPreviewStory = Template.bind({});
+const KeepButtonRBRCategoriesAndTag: TransactionPreviewStory = Template.bind({});
+const KeepButtonSplitRBRCategoriesAndTag: TransactionPreviewStory = Template.bind({});
+const DeletedKeepButtonSplitRBRCategoriesAndTag: TransactionPreviewStory = Template.bind({});
+const KeepButtonIOURBRCategoriesAndTag: TransactionPreviewStory = Template.bind({});
+
+const storiesTransactionData = {category: 'Grocery stores', tag: 'Food', merchant: 'Acme'};
+
+NoMerchant.args = {
+    ...Default.args,
+    transaction: modifiedTransaction({}),
+};
+
+CategoriesAndTag.args = {
+    ...Default.args,
+    transaction: modifiedTransaction(storiesTransactionData),
+};
+
+KeepButtonCategoriesAndTag.args = {
+    ...CategoriesAndTag.args,
+    areThereDuplicates: true,
+};
+
+KeepButtonRBRCategoriesAndTag.args = {
+    ...KeepButtonCategoriesAndTag.args,
+    violations,
+    transaction: modifiedTransaction({...storiesTransactionData, hold: true}),
+};
+
+KeepButtonSplitRBRCategoriesAndTag.args = {
+    ...KeepButtonRBRCategoriesAndTag.args,
+    isBillSplit: true,
+};
+
+KeepButtonIOURBRCategoriesAndTag.args = {
+    ...KeepButtonRBRCategoriesAndTag.args,
+    iouReport: iouReportWithModifiedType(CONST.REPORT.TYPE.IOU),
+};
+
+DeletedKeepButtonSplitRBRCategoriesAndTag.args = {
+    ...KeepButtonSplitRBRCategoriesAndTag.args,
+    action: actionWithModifiedPendingAction(CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE),
+};
+
+export default story;
+export {
+    Default,
+    NoMerchant,
+    CategoriesAndTag,
+    KeepButtonCategoriesAndTag,
+    KeepButtonRBRCategoriesAndTag,
+    KeepButtonIOURBRCategoriesAndTag,
+    KeepButtonSplitRBRCategoriesAndTag,
+    DeletedKeepButtonSplitRBRCategoriesAndTag,
+};
diff --git a/src/stories/mockData/transactions.ts b/src/stories/mockData/transactions.ts
new file mode 100644
index 000000000000..d0184d7e1409
--- /dev/null
+++ b/src/stories/mockData/transactions.ts
@@ -0,0 +1,267 @@
+import CONST from '@src/CONST';
+import type {OriginalMessageIOU, PersonalDetailsList, Report, ReportAction, Transaction, TransactionViolations} from '@src/types/onyx';
+
+const amount = 1000;
+const currency = 'USD';
+
+/* eslint-disable @typescript-eslint/naming-convention */
+const personalDetails: PersonalDetailsList = {
+    11111111: {
+        accountID: 11111111,
+        avatar: '@assets/images/avatars/user/default-avatar_1.svg',
+        firstName: 'John',
+        lastName: 'Smith',
+        status: {
+            clearAfter: '',
+            emojiCode: '🚲',
+            text: '0% cycling in Canary islands',
+        },
+        displayName: 'John Smith',
+        login: 'johnsmith@mail.com',
+        pronouns: '__predefined_heHimHis',
+        timezone: {
+            automatic: true,
+            selected: 'Europe/Luxembourg',
+        },
+        phoneNumber: '11111111',
+        validated: true,
+    },
+    22222222: {
+        accountID: 22222222,
+        avatar: '@assets/images/avatars/user/default-avatar_2.svg',
+        firstName: 'Ted',
+        lastName: 'Kowalski',
+        status: {
+            clearAfter: '',
+            emojiCode: '🚲',
+            text: '0% cycling in Canary islands',
+        },
+        displayName: 'Ted Kowalski',
+        login: 'tedkowalski@mail.com',
+        pronouns: '__predefined_heHimHis',
+        timezone: {
+            automatic: true,
+            selected: 'Europe/Warsaw',
+        },
+        phoneNumber: '22222222',
+        validated: true,
+    },
+    33333333: {
+        accountID: 33333333,
+        avatar: '@assets/images/avatars/user/default-avatar_3.svg',
+        firstName: 'Jane',
+        lastName: 'Doe',
+        status: {
+            clearAfter: '',
+            emojiCode: '🚲',
+            text: '0% cycling in Canary islands',
+        },
+        displayName: 'Jane Doe',
+        login: 'janedoe@mail.com',
+        pronouns: '__predefined_sheHerHers',
+        timezone: {
+            automatic: true,
+            selected: 'Europe/London',
+        },
+        phoneNumber: '33333333',
+        validated: true,
+    },
+};
+
+const iouReport: Report = {
+    chatReportID: '1111111111111111',
+    chatType: CONST.REPORT.CHAT_TYPE.POLICY_EXPENSE_CHAT,
+    currency,
+    description: '',
+    errorFields: {},
+    hasOutstandingChildRequest: false,
+    hasOutstandingChildTask: false,
+    hasParentAccess: true,
+    isCancelledIOU: false,
+    isOwnPolicyExpenseChat: false,
+    isPinned: false,
+    isWaitingOnBankAccount: false,
+    lastActionType: CONST.REPORT.ACTIONS.TYPE.ADD_COMMENT,
+    lastActorAccountID: 11111111,
+    lastMessageHtml: 'abc',
+    lastMessageText: 'abc',
+    lastReadSequenceNumber: 0,
+    lastReadTime: '2025-03-07 07:23:39.335',
+    lastVisibleActionCreated: '2025-03-07 07:23:39.335',
+    lastVisibleActionLastModified: '2025-03-07 07:23:39.335',
+    managerID: 22222222,
+    nonReimbursableTotal: 0,
+    oldPolicyName: '',
+    ownerAccountID: 11111111,
+    parentReportActionID: '1111111111111111111',
+    parentReportID: '1111111111111111',
+    participants: {
+        '11111111': {
+            notificationPreference: 'always',
+        },
+        '22222222': {
+            notificationPreference: 'always',
+        },
+        '33333333': {
+            notificationPreference: 'always',
+        },
+    },
+    permissions: [CONST.REPORT.PERMISSIONS.READ, CONST.REPORT.PERMISSIONS.WRITE],
+    policyID: CONST.POLICY.ID_FAKE,
+    reportID: '111111111111111',
+    reportName: 'IOU',
+    stateNum: CONST.REPORT.STATE_NUM.APPROVED,
+    statusNum: CONST.REPORT.STATUS_NUM.OPEN,
+    total: 112298,
+    // type: CONST.REPORT.TYPE.IOU,
+    type: CONST.REPORT.TYPE.EXPENSE,
+    unheldNonReimbursableTotal: 0,
+    unheldTotal: 112298,
+    welcomeMessage: '',
+    writeCapability: CONST.REPORT.WRITE_CAPABILITIES.ALL,
+};
+
+const chatReport: Report = {
+    chatType: CONST.REPORT.CHAT_TYPE.POLICY_EXPENSE_CHAT,
+    currency,
+    description: '',
+    errorFields: {},
+    hasOutstandingChildRequest: false,
+    hasOutstandingChildTask: false,
+    isCancelledIOU: false,
+    isOwnPolicyExpenseChat: false,
+    isPinned: false,
+    isWaitingOnBankAccount: false,
+    lastActionType: CONST.REPORT.ACTIONS.TYPE.ADD_COMMENT,
+    lastActorAccountID: 11111111,
+    lastMessageHtml: '<mention-user accountID="11111111"/> <mention-user accountID="11111111"/>',
+    lastMessageText: 'Test abc',
+    lastReadSequenceNumber: 0,
+    lastReadTime: '2025-03-11 08:51:38.736',
+    lastVisibleActionCreated: '2025-03-11 08:47:56.654',
+    lastVisibleActionLastModified: '2025-03-11 08:47:56.654',
+    nonReimbursableTotal: 0,
+    oldPolicyName: '',
+    ownerAccountID: 11111111,
+    participants: {
+        '11111111': {
+            notificationPreference: 'always',
+        },
+        '22222222': {
+            notificationPreference: 'always',
+        },
+        '33333333': {
+            notificationPreference: 'always',
+        },
+    },
+    permissions: ['read', 'write'],
+    policyID: CONST.POLICY.ID_FAKE,
+    reportID: '1111111111111111',
+    reportName: 'Chat Report',
+    stateNum: 0,
+    statusNum: 0,
+    total: 0,
+    type: 'chat',
+    unheldNonReimbursableTotal: 0,
+    unheldTotal: 0,
+    welcomeMessage: '',
+    writeCapability: CONST.REPORT.WRITE_CAPABILITIES.ALL,
+    iouReportID: '1111111111111111',
+    managerID: 0,
+};
+
+const transaction: Transaction = {
+    amount,
+    bank: '',
+    billable: false,
+    cardID: 0,
+    cardName: 'Cash Expense',
+    cardNumber: '',
+    category: '',
+    comment: {},
+    created: '2025-02-14',
+    currency,
+    filename: 'test.html',
+    inserted: '2025-02-14 08:12:19',
+    managedCard: false,
+    merchant: 'Acme',
+    modifiedAmount: 0,
+    modifiedCreated: '',
+    modifiedCurrency: '',
+    modifiedMerchant: '',
+    originalAmount: 0,
+    originalCurrency: '',
+    parentTransactionID: '',
+    posted: '',
+    receipt: {
+        state: CONST.IOU.RECEIPT_STATE.OPEN,
+        source: 'mockData/eReceiptBGs/eReceiptBG_pink.png',
+    },
+    reimbursable: true,
+    reportID: '111111111111111',
+    status: CONST.TRANSACTION.STATUS.POSTED,
+    tag: '',
+    transactionID: '1111111111111111111',
+    hasEReceipt: true,
+};
+
+const violations: TransactionViolations = [
+    {
+        name: CONST.VIOLATIONS.DUPLICATED_TRANSACTION,
+        type: CONST.VIOLATION_TYPES.VIOLATION,
+        showInReview: true,
+    },
+    {
+        name: CONST.VIOLATIONS.MISSING_CATEGORY,
+        type: CONST.VIOLATION_TYPES.VIOLATION,
+        showInReview: true,
+    },
+    {
+        name: CONST.VIOLATIONS.FIELD_REQUIRED,
+        type: CONST.VIOLATION_TYPES.VIOLATION,
+        showInReview: true,
+    },
+];
+
+const originalMessage: OriginalMessageIOU = {
+    IOUReportID: '111111111111111',
+    IOUTransactionID: '590639150582440369',
+    amount,
+    comment: '',
+    currency,
+    lastModified: '2025-02-14 08:12:05.165',
+    participantAccountIDs: [11111111, 22222222],
+    type: 'create',
+};
+
+const action: ReportAction = {
+    reportActionID: '1111111111111111111',
+    message: [
+        {
+            type: CONST.REPORT.MESSAGE.TYPE.COMMENT,
+            html: '$0.01 expense',
+            text: '$0.01 expense',
+            isEdited: false,
+            whisperedTo: [],
+            isDeletedParentAction: false,
+            deleted: '',
+        },
+    ],
+    actionName: 'IOU',
+    originalMessage,
+    childReportID: '1111111111111111',
+    created: '2025-02-14 08:12:05.165',
+    actorAccountID: 11111111,
+    childType: 'chat',
+    person: [
+        {
+            type: 'TEXT',
+            style: 'strong',
+            text: 'John Smith',
+        },
+    ],
+};
+
+/* eslint-enable @typescript-eslint/naming-convention */
+
+export {personalDetails, iouReport, chatReport, transaction, violations, action};
diff --git a/tests/unit/TransactionPreviewUtils.test.ts b/tests/unit/TransactionPreviewUtils.test.ts
new file mode 100644
index 000000000000..dad134be3dfe
--- /dev/null
+++ b/tests/unit/TransactionPreviewUtils.test.ts
@@ -0,0 +1,221 @@
+import {buildOptimisticIOUReport, buildOptimisticIOUReportAction} from '@libs/ReportUtils';
+import {createTransactionPreviewConditionals, getTransactionPreviewTextAndTranslationPaths} from '@libs/TransactionPreviewUtils';
+import {buildOptimisticTransaction} from '@libs/TransactionUtils';
+import CONST from '@src/CONST';
+
+const basicProps = {
+    iouReport: buildOptimisticIOUReport(123, 234, 1000, '1', 'USD'),
+    transaction: buildOptimisticTransaction({
+        transactionParams: {
+            amount: 100,
+            currency: 'USD',
+            reportID: '1',
+            comment: '',
+            attendees: [],
+            created: '2024-01-01',
+        },
+    }),
+    translate: jest.fn().mockImplementation((key: string) => key),
+    action: buildOptimisticIOUReportAction({
+        type: 'create',
+        amount: 100,
+        currency: 'USD',
+        comment: '',
+        participants: [],
+        transactionID: '1',
+        paymentType: undefined,
+        iouReportID: '1',
+    }),
+    violations: [],
+    transactionDetails: {},
+    isBillSplit: false,
+    shouldShowRBR: false,
+    isReportAPolicyExpenseChat: false,
+    areThereDuplicates: false,
+};
+
+describe('TransactionPreviewUtils', () => {
+    describe('getTransactionPreviewTextAndTranslationPaths', () => {
+        it('should return an empty RBR message when shouldShowRBR is false and no transaction is given', () => {
+            const result = getTransactionPreviewTextAndTranslationPaths({...basicProps, shouldShowRBR: false});
+            expect(result.RBRMessage.text).toEqual('');
+        });
+
+        it('returns correct hold message when the transaction is on hold', () => {
+            const functionArgs = {
+                ...basicProps,
+                transaction: {...basicProps.transaction, comment: {hold: 'true'}},
+                shouldShowRBR: true,
+            };
+
+            const result = getTransactionPreviewTextAndTranslationPaths(functionArgs);
+            expect(result.RBRMessage.translationPath).toContain('iou.expenseWasPutOnHold');
+        });
+
+        it('should handle missing iouReport and transaction correctly', () => {
+            const functionArgs = {...basicProps, iouReport: undefined, transaction: undefined};
+            const result = getTransactionPreviewTextAndTranslationPaths(functionArgs);
+            expect(result.RBRMessage.text).toEqual('');
+            expect(result.previewHeaderText).toContainEqual({text: ''});
+            expect(result.displayAmountText.text).toEqual('$0.00');
+        });
+
+        it('returns merchant missing and amount missing message when appropriate', () => {
+            const functionArgs = {
+                ...basicProps,
+                transaction: {...basicProps.transaction, merchant: '', amount: 0},
+                shouldShowRBR: true,
+            };
+            const result = getTransactionPreviewTextAndTranslationPaths(functionArgs);
+            expect(result.RBRMessage.translationPath).toEqual('violations.reviewRequired');
+        });
+
+        it('should display showCashOrCard in previewHeaderText', () => {
+            const functionArgsWithCardTransaction = {
+                ...basicProps,
+                transaction: {
+                    ...basicProps.transaction,
+                    managedCard: true,
+                },
+            };
+            const cardTransaction = getTransactionPreviewTextAndTranslationPaths(functionArgsWithCardTransaction);
+            const cashTransaction = getTransactionPreviewTextAndTranslationPaths(basicProps);
+
+            expect(cardTransaction.showCashOrCard).toEqual({translationPath: 'iou.card'});
+            expect(cashTransaction.showCashOrCard).toEqual({translationPath: 'iou.cash'});
+
+            expect(cardTransaction.previewHeaderText).toEqual(expect.arrayContaining([cardTransaction.showCashOrCard]));
+            expect(cashTransaction.previewHeaderText).toEqual(expect.arrayContaining([cashTransaction.showCashOrCard]));
+        });
+
+        it('displays appropriate header text if the transaction is bill split', () => {
+            const functionArgs = {...basicProps, isBillSplit: true};
+            const result = getTransactionPreviewTextAndTranslationPaths(functionArgs);
+            expect(result.previewHeaderText).toEqual(expect.arrayContaining([{translationPath: 'iou.split'}]));
+        });
+
+        it('displays description when receipt is being scanned', () => {
+            const functionArgs = {...basicProps, transaction: {...basicProps.transaction, receipt: {state: CONST.IOU.RECEIPT_STATE.SCANNING}}};
+            const result = getTransactionPreviewTextAndTranslationPaths(functionArgs);
+            expect(result.previewHeaderText).toEqual(expect.arrayContaining([{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}};
+            const result = getTransactionPreviewTextAndTranslationPaths(functionArgs);
+            expect(result.previewHeaderText).toEqual(expect.arrayContaining([{translationPath: 'iou.pending'}]));
+        });
+
+        it('handles currency and amount display during scanning correctly', () => {
+            const functionArgs = {
+                ...basicProps,
+                transactionDetails: {amount: 300, currency: 'EUR'},
+                transaction: {...basicProps.transaction, receipt: {state: CONST.IOU.RECEIPT_STATE.SCANNING}},
+            };
+            const result = getTransactionPreviewTextAndTranslationPaths(functionArgs);
+            expect(result.displayAmountText.translationPath).toEqual('iou.receiptStatusTitle');
+        });
+
+        it('shows approved message when the iouReport is canceled', () => {
+            const functionArgs = {...basicProps, iouReport: {...basicProps.iouReport, isCancelledIOU: true}};
+            const result = getTransactionPreviewTextAndTranslationPaths(functionArgs);
+            expect(result.previewHeaderText).toContainEqual({translationPath: 'iou.canceled'});
+        });
+    });
+
+    describe('createTransactionPreviewConditionals', () => {
+        it('should determine RBR visibility according to violation and hold conditions', () => {
+            const functionArgs = {
+                ...basicProps,
+                violations: [{name: CONST.VIOLATIONS.MISSING_CATEGORY, type: CONST.VIOLATION_TYPES.VIOLATION, transactionID: 123, showInReview: true}],
+            };
+            const result = createTransactionPreviewConditionals(functionArgs);
+            expect(result.shouldShowRBR).toBeTruthy();
+        });
+
+        it("should disable onPress when it's a bill split with empty transaction data", () => {
+            const functionArgs = {...basicProps, isBillSplit: true, transaction: undefined};
+            const result = createTransactionPreviewConditionals(functionArgs);
+            expect(result.shouldDisableOnPress).toBeTruthy();
+        });
+
+        it("should not show category if it's not a policy expense chat", () => {
+            const functionArgs = {...basicProps, isReportAPolicyExpenseChat: false};
+            const result = createTransactionPreviewConditionals(functionArgs);
+            expect(result.shouldShowCategory).toBeFalsy();
+        });
+
+        it('should show keep button when there are duplicates', () => {
+            const functionArgs = {...basicProps, areThereDuplicates: true};
+            const result = createTransactionPreviewConditionals(functionArgs);
+            expect(result.shouldShowKeepButton).toBeTruthy();
+        });
+
+        it('should show split share if amount is positive and bill is split', () => {
+            const functionArgs = {
+                ...basicProps,
+                isBillSplit: true,
+                transactionDetails: {
+                    amount: 1,
+                },
+            };
+            const result = createTransactionPreviewConditionals(functionArgs);
+            expect(result.shouldShowSplitShare).toBeTruthy();
+        });
+
+        it('should show skeleton if transaction data is empty and action is not deleted', () => {
+            const functionArgs = {...basicProps, transaction: undefined};
+            const result = createTransactionPreviewConditionals(functionArgs);
+            expect(result.shouldShowSkeleton).toBeTruthy();
+        });
+
+        it('should show merchant if merchant data is valid and significant', () => {
+            const functionArgs = {...basicProps, transactionDetails: {merchant: 'Valid Merchant'}};
+            const result = createTransactionPreviewConditionals(functionArgs);
+            expect(result.shouldShowMerchant).toBeTruthy();
+        });
+
+        it('should not show description when merchant is displayed', () => {
+            const functionArgs = {...basicProps, transactionDetails: {merchant: 'Valid Merchant', comment: 'Valid Comment'}};
+            const result = createTransactionPreviewConditionals(functionArgs);
+            expect(result.shouldShowDescription).toBeFalsy();
+        });
+
+        it("should show tag if it's a policy expense chat and tag is present", () => {
+            const functionArgs = {...basicProps, isReportAPolicyExpenseChat: true, transactionDetails: {tag: 'Transport'}};
+            const result = createTransactionPreviewConditionals(functionArgs);
+            expect(result.shouldShowTag).toBeTruthy();
+        });
+
+        it('should correctly show violation message if there are multiple violations', () => {
+            const functionArgs = {
+                ...basicProps,
+                violations: [
+                    {name: CONST.VIOLATIONS.MISSING_CATEGORY, type: CONST.VIOLATION_TYPES.VIOLATION, showInReview: true},
+                    {name: CONST.VIOLATIONS.CUSTOM_RULES, type: CONST.VIOLATION_TYPES.WARNING, showInReview: true},
+                ],
+                transactionDetails: {amount: 200},
+            };
+            const result = createTransactionPreviewConditionals(functionArgs);
+            expect(result.shouldShowRBR).toBeTruthy();
+        });
+
+        it('should not disable onPress when bill split but transaction data is full', () => {
+            const functionArgs = {...basicProps, isBillSplit: true, transaction: {...basicProps.transaction}};
+            const result = createTransactionPreviewConditionals(functionArgs);
+            expect(result.shouldDisableOnPress).toBeFalsy();
+        });
+
+        it('should ensure RBR is not shown when no violation and no hold', () => {
+            const functionArgs = {...basicProps, isTransactionOnHold: false};
+            const result = createTransactionPreviewConditionals(functionArgs);
+            expect(result.shouldShowRBR).toBeFalsy();
+        });
+
+        it('should show description if no merchant is presented and is not scanning', () => {
+            const functionArgs = {...basicProps, transactionDetails: {comment: 'A valid comment', merchant: ''}};
+            const result = createTransactionPreviewConditionals(functionArgs);
+            expect(result.shouldShowDescription).toBeTruthy();
+        });
+    });
+});