From 8250263b46dc86ddca907f9691f4ecbe9569963f Mon Sep 17 00:00:00 2001 From: Wiktor Gut Date: Mon, 12 May 2025 16:42:32 +0200 Subject: [PATCH 1/5] switch to TransactionPreview --- .../ReportActionItem/MoneyRequestAction.tsx | 55 +++++++++++-------- 1 file changed, 32 insertions(+), 23 deletions(-) diff --git a/src/components/ReportActionItem/MoneyRequestAction.tsx b/src/components/ReportActionItem/MoneyRequestAction.tsx index 3f106138485c..942ee3ea1d32 100644 --- a/src/components/ReportActionItem/MoneyRequestAction.tsx +++ b/src/components/ReportActionItem/MoneyRequestAction.tsx @@ -1,5 +1,6 @@ -import React from 'react'; -import type {StyleProp, ViewStyle} from 'react-native'; +import lodashIsEmpty from 'lodash/isEmpty'; +import React, {useState} from 'react'; +import {LayoutChangeEvent, type StyleProp, View, type ViewStyle} from 'react-native'; import RenderHTML from '@components/RenderHTML'; import useLocalize from '@hooks/useLocalize'; import useNetwork from '@hooks/useNetwork'; @@ -24,7 +25,7 @@ import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; import type * as OnyxTypes from '@src/types/onyx'; import {isEmptyObject} from '@src/types/utils/EmptyObject'; -import MoneyRequestPreview from './MoneyRequestPreview'; +import TransactionPreview from './TransactionPreview'; type MoneyRequestActionProps = { /** All the data of the action */ @@ -83,6 +84,7 @@ function MoneyRequestAction({ const {isOffline} = useNetwork(); const isSplitBillAction = isSplitBillActionReportActionsUtils(action); const isTrackExpenseAction = isTrackExpenseActionReportActionsUtils(action); + const [previewWidth, setPreviewWidth] = useState(255); const onMoneyRequestPreviewPressed = () => { if (contextMenuRef.current?.isContextMenuOpening) { @@ -129,26 +131,33 @@ function MoneyRequestAction({ return ${translate(message)}`} />; } - // 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 ( - + // Condition extracted from MoneyRequestPreview + const renderCondition = lodashIsEmpty(iouReport) && !(isSplitBillAction || isTrackExpenseAction); + return renderCondition ? null : ( + (e: LayoutChangeEvent) => { + setPreviewWidth(e.nativeEvent.layout.width ?? 255); + }} + > + + ); } From faa0c0850c04816808b9f3fda480b6c037174596 Mon Sep 17 00:00:00 2001 From: Wiktor Gut Date: Wed, 14 May 2025 14:22:10 +0200 Subject: [PATCH 2/5] Duplicate workflow working without keep-this-one buttons --- .../ReportActionItem/MoneyRequestAction.tsx | 23 +++++++++++++++---- 1 file changed, 18 insertions(+), 5 deletions(-) diff --git a/src/components/ReportActionItem/MoneyRequestAction.tsx b/src/components/ReportActionItem/MoneyRequestAction.tsx index 942ee3ea1d32..f2011903bd6e 100644 --- a/src/components/ReportActionItem/MoneyRequestAction.tsx +++ b/src/components/ReportActionItem/MoneyRequestAction.tsx @@ -1,6 +1,7 @@ import lodashIsEmpty from 'lodash/isEmpty'; -import React, {useState} from 'react'; -import {LayoutChangeEvent, type StyleProp, View, type ViewStyle} from 'react-native'; +import React, {useMemo, useState} from 'react'; +import type {LayoutChangeEvent, StyleProp, ViewStyle} from 'react-native'; +import {View} from 'react-native'; import RenderHTML from '@components/RenderHTML'; import useLocalize from '@hooks/useLocalize'; import useNetwork from '@hooks/useNetwork'; @@ -85,6 +86,19 @@ function MoneyRequestAction({ const isSplitBillAction = isSplitBillActionReportActionsUtils(action); const isTrackExpenseAction = isTrackExpenseActionReportActionsUtils(action); const [previewWidth, setPreviewWidth] = useState(255); + const containerStyles = useMemo( + () => [ + { + width: previewWidth, + maxWidth: previewWidth, + }, + styles.cursorPointer, + isHovered ? styles.reportPreviewBoxHoverBorder : undefined, + style, + styles.borderNone, + ], + [isHovered, previewWidth, style, styles.borderNone, styles.cursorPointer, styles.reportPreviewBoxHoverBorder], + ); const onMoneyRequestPreviewPressed = () => { if (contextMenuRef.current?.isContextMenuOpening) { @@ -135,8 +149,7 @@ function MoneyRequestAction({ const renderCondition = lodashIsEmpty(iouReport) && !(isSplitBillAction || isTrackExpenseAction); return renderCondition ? null : ( (e: LayoutChangeEvent) => { + onLayout={(e: LayoutChangeEvent) => { setPreviewWidth(e.nativeEvent.layout.width ?? 255); }} > @@ -152,7 +165,7 @@ function MoneyRequestAction({ checkIfContextMenuActive={checkIfContextMenuActive} shouldShowPendingConversionMessage={shouldShowPendingConversionMessage} onPreviewPressed={onMoneyRequestPreviewPressed} - containerStyles={[styles.cursorPointer, isHovered ? styles.reportPreviewBoxHoverBorder : undefined, style]} + containerStyles={containerStyles} isHovered={isHovered} isWhisper={isWhisper} shouldDisplayContextMenu={shouldDisplayContextMenu} From df026f138ef12e4c42bbde8b38b8aff619a2e240 Mon Sep 17 00:00:00 2001 From: Wiktor Gut Date: Wed, 14 May 2025 15:17:26 +0200 Subject: [PATCH 3/5] keep-this-one button added --- .../TransactionPreview/TransactionPreviewContent.tsx | 11 +++++++++++ .../ReportActionItem/TransactionPreview/index.tsx | 5 ++++- .../ReportActionItem/TransactionPreview/types.ts | 3 +++ 3 files changed, 18 insertions(+), 1 deletion(-) diff --git a/src/components/ReportActionItem/TransactionPreview/TransactionPreviewContent.tsx b/src/components/ReportActionItem/TransactionPreview/TransactionPreviewContent.tsx index 814f10d507db..d3d12234400a 100644 --- a/src/components/ReportActionItem/TransactionPreview/TransactionPreviewContent.tsx +++ b/src/components/ReportActionItem/TransactionPreview/TransactionPreviewContent.tsx @@ -2,6 +2,7 @@ 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 MultipleAvatars from '@components/MultipleAvatars'; @@ -50,6 +51,8 @@ function TransactionPreviewContent({ reportPreviewAction, shouldHideOnDelete = true, shouldShowIOUData, + navigateToReviewFields, + isReviewDuplicateTransactionPage = false, }: TransactionPreviewContentProps) { const theme = useTheme(); const styles = useThemeStyles(); @@ -327,6 +330,14 @@ function TransactionPreviewContent({ )} + {isReviewDuplicateTransactionPage && !isIOUSettled && !isApproved && areThereDuplicates && ( +