Merge pull request #91496 from nabi-ebrahimi/feature/update-duplicate-rhp-screen

deetergp · web-flow · commit a38c67d6b083 · 2026-06-03T10:54:02.000-07:00
Update duplicate RHP screen to match other flows
diff --git a/src/components/TransactionItemRow/TransactionItemRowNarrow.tsx b/src/components/TransactionItemRow/TransactionItemRowNarrow.tsx
@@ -31,6 +31,9 @@ type TransactionItemRowNarrowProps = Pick<
     | 'isInSingleTransactionReport'
     | 'shouldShowRadioButton'
     | 'onRadioButtonPress'
+    | 'shouldStopRadioButtonMouseDownPropagation'
+    | 'radioButtonContainerStyle'
+    | 'radioButtonWrapperStyle'
     | 'shouldShowErrors'
     | 'isDisabled'
     | 'violations'
@@ -53,6 +56,9 @@ function TransactionItemRowNarrow({
     isInSingleTransactionReport = false,
     shouldShowRadioButton = false,
     onRadioButtonPress = () => {},
+    shouldStopRadioButtonMouseDownPropagation = false,
+    radioButtonContainerStyle,
+    radioButtonWrapperStyle,
     shouldShowErrors = true,
     isDisabled = false,
     violations,
@@ -153,12 +159,14 @@ function TransactionItemRowNarrow({
                         </View>
                     )}
                     {shouldShowRadioButton && (
-                        <View style={[styles.ml3, styles.justifyContentCenter]}>
+                        <View style={[styles.ml3, styles.justifyContentCenter, radioButtonContainerStyle]}>
                             <RadioButton
                                 isChecked={isSelected}
                                 disabled={isDisabled}
                                 onPress={() => onRadioButtonPress?.(transactionItem.transactionID)}
                                 accessibilityLabel={CONST.ROLE.RADIO}
+                                shouldStopMouseDownPropagation={shouldStopRadioButtonMouseDownPropagation}
+                                style={radioButtonWrapperStyle}
                             />
                         </View>
                     )}
diff --git a/src/components/TransactionItemRow/TransactionItemRowWide.tsx b/src/components/TransactionItemRow/TransactionItemRowWide.tsx
@@ -76,6 +76,8 @@ function TransactionItemRowWide({
     isInSingleTransactionReport = false,
     shouldShowRadioButton = false,
     onRadioButtonPress = () => {},
+    shouldStopRadioButtonMouseDownPropagation = false,
+    radioButtonContainerStyle,
     shouldShowErrors = true,
     isDisabled = false,
     violations,
@@ -592,12 +594,13 @@ function TransactionItemRowWide({
                     )}
                     {columns?.map(renderColumn)}
                     {shouldShowRadioButton && (
-                        <View style={[styles.ml1, styles.justifyContentCenter]}>
+                        <View style={[styles.ml1, styles.justifyContentCenter, radioButtonContainerStyle]}>
                             <RadioButton
                                 isChecked={isSelected}
                                 disabled={isDisabled}
                                 onPress={() => onRadioButtonPress?.(transactionItem.transactionID)}
                                 accessibilityLabel={CONST.ROLE.RADIO}
+                                shouldStopMouseDownPropagation={shouldStopRadioButtonMouseDownPropagation}
                             />
                         </View>
                     )}
diff --git a/src/components/TransactionItemRow/index.tsx b/src/components/TransactionItemRow/index.tsx
@@ -65,6 +65,9 @@ function TransactionItemRow({
     isInSingleTransactionReport = false,
     shouldShowRadioButton = false,
     onRadioButtonPress = () => {},
+    shouldStopRadioButtonMouseDownPropagation = false,
+    radioButtonContainerStyle,
+    radioButtonWrapperStyle,
     shouldShowErrors = true,
     shouldHighlightItemWhenSelected = true,
     isDisabled = false,
@@ -147,6 +150,9 @@ function TransactionItemRow({
             isInSingleTransactionReport,
             shouldShowRadioButton,
             onRadioButtonPress,
+            shouldStopRadioButtonMouseDownPropagation,
+            radioButtonContainerStyle,
+            radioButtonWrapperStyle,
             shouldShowErrors,
             isDisabled,
             violations,
@@ -193,6 +199,8 @@ function TransactionItemRow({
         isInSingleTransactionReport,
         shouldShowRadioButton,
         onRadioButtonPress,
+        shouldStopRadioButtonMouseDownPropagation,
+        radioButtonContainerStyle,
         shouldShowErrors,
         shouldHighlightItemWhenSelected,
         isDisabled,
diff --git a/src/components/TransactionItemRow/types.ts b/src/components/TransactionItemRow/types.ts
@@ -74,6 +74,9 @@ type TransactionItemRowProps = {
     isInSingleTransactionReport?: boolean;
     shouldShowRadioButton?: boolean;
     onRadioButtonPress?: (transactionID: string) => void;
+    shouldStopRadioButtonMouseDownPropagation?: boolean;
+    radioButtonContainerStyle?: StyleProp<ViewStyle>;
+    radioButtonWrapperStyle?: StyleProp<ViewStyle>;
     shouldShowErrors?: boolean;
     shouldHighlightItemWhenSelected?: boolean;
     isDisabled?: boolean;
diff --git a/src/languages/de.ts b/src/languages/de.ts
@@ -1526,6 +1526,7 @@ const translations: TranslationDeepObject<typeof en> = {
         someDuplicatesArePaid: 'Einige dieser Duplikate wurden bereits genehmigt oder bezahlt.',
         reviewDuplicates: 'Duplikate prüfen',
         keepAll: 'Alle behalten',
+        keepSelected: 'Auswahl behalten',
         noDuplicatesTitle: 'Alles erledigt!',
         noDuplicatesDescription: 'Es gibt hier keine doppelten Transaktionen zur Überprüfung.',
         confirmApprove: 'Genehmigungsbetrag bestätigen',
diff --git a/src/languages/en.ts b/src/languages/en.ts
@@ -1583,6 +1583,7 @@ const translations = {
         someDuplicatesArePaid: 'Some of these duplicates have been approved or paid already.',
         reviewDuplicates: 'Review duplicates',
         keepAll: 'Keep all',
+        keepSelected: 'Keep selected',
         noDuplicatesTitle: 'All set!',
         noDuplicatesDescription: 'There are no duplicate transactions for review here.',
         confirmApprove: 'Confirm approval amount',
diff --git a/src/languages/es.ts b/src/languages/es.ts
@@ -1487,6 +1487,7 @@ const translations: TranslationDeepObject<typeof en> = {
         someDuplicatesArePaid: 'Algunos de estos duplicados ya han sido aprobados o pagados.',
         reviewDuplicates: 'Revisar duplicados',
         keepAll: 'Mantener todos',
+        keepSelected: 'Mantener seleccionado',
         noDuplicatesTitle: '¡Todo listo!',
         noDuplicatesDescription: 'No hay transacciones duplicadas para revisar aquí.',
         confirmApprove: 'Confirmar importe a aprobar',
diff --git a/src/languages/fr.ts b/src/languages/fr.ts
@@ -1531,6 +1531,7 @@ const translations: TranslationDeepObject<typeof en> = {
         someDuplicatesArePaid: 'Certains de ces doublons ont déjà été approuvés ou payés.',
         reviewDuplicates: 'Examiner les doublons',
         keepAll: 'Tout garder',
+        keepSelected: 'Garder la sélection',
         noDuplicatesTitle: 'Tout est en ordre !',
         noDuplicatesDescription: "Il n'y a aucune transaction en double à vérifier ici.",
         confirmApprove: 'Confirmer le montant approuvé',
diff --git a/src/languages/it.ts b/src/languages/it.ts
@@ -1525,6 +1525,7 @@ const translations: TranslationDeepObject<typeof en> = {
         someDuplicatesArePaid: 'Alcuni di questi duplicati sono già stati approvati o pagati.',
         reviewDuplicates: 'Controlla duplicati',
         keepAll: 'Mantieni tutto',
+        keepSelected: 'Mantieni selezionati',
         noDuplicatesTitle: 'Tutto a posto!',
         noDuplicatesDescription: 'Non ci sono transazioni duplicate da verificare qui.',
         confirmApprove: 'Conferma l’importo approvato',
diff --git a/src/languages/ja.ts b/src/languages/ja.ts
@@ -1506,6 +1506,7 @@ const translations: TranslationDeepObject<typeof en> = {
         someDuplicatesArePaid: 'これらの重複の一部は、すでに承認または支払い済みです。',
         reviewDuplicates: '重複を確認',
         keepAll: 'すべて保持',
+        keepSelected: '選択したものを保持',
         noDuplicatesTitle: '準備完了！',
         noDuplicatesDescription: '確認が必要な重複取引はありません。',
         confirmApprove: '承認金額を確認',
diff --git a/src/languages/nl.ts b/src/languages/nl.ts
@@ -1521,6 +1521,7 @@ const translations: TranslationDeepObject<typeof en> = {
         someDuplicatesArePaid: 'Sommige van deze duplicaten zijn al goedgekeurd of betaald.',
         reviewDuplicates: 'Dubbele items controleren',
         keepAll: 'Alles behouden',
+        keepSelected: 'Selectie behouden',
         noDuplicatesTitle: 'Alles in orde!',
         noDuplicatesDescription: 'Er zijn hier geen dubbele transacties om te beoordelen.',
         confirmApprove: 'Bevestig goedkeuringsbedrag',
diff --git a/src/languages/pl.ts b/src/languages/pl.ts
@@ -1520,6 +1520,7 @@ const translations: TranslationDeepObject<typeof en> = {
         someDuplicatesArePaid: 'Niektóre z tych duplikatów zostały już zatwierdzone lub opłacone.',
         reviewDuplicates: 'Przejrzyj duplikaty',
         keepAll: 'Zachowaj wszystko',
+        keepSelected: 'Zachowaj wybrane',
         noDuplicatesTitle: 'Wszystko gotowe!',
         noDuplicatesDescription: 'Nie ma tutaj zduplikowanych transakcji do sprawdzenia.',
         confirmApprove: 'Potwierdź kwotę zatwierdzenia',
diff --git a/src/languages/pt-BR.ts b/src/languages/pt-BR.ts
@@ -1519,6 +1519,7 @@ const translations: TranslationDeepObject<typeof en> = {
         someDuplicatesArePaid: 'Alguns desses duplicados já foram aprovados ou pagos.',
         reviewDuplicates: 'Revisar duplicados',
         keepAll: 'Manter tudo',
+        keepSelected: 'Manter selecionados',
         noDuplicatesTitle: 'Tudo pronto!',
         noDuplicatesDescription: 'Não há transações duplicadas para revisar aqui.',
         confirmApprove: 'Confirmar valor da aprovação',
diff --git a/src/languages/zh-hans.ts b/src/languages/zh-hans.ts
@@ -1473,6 +1473,7 @@ const translations: TranslationDeepObject<typeof en> = {
         someDuplicatesArePaid: '其中一些重复项已被批准或支付。',
         reviewDuplicates: '审核重复项',
         keepAll: '全部保留',
+        keepSelected: '保留所选项',
         noDuplicatesTitle: '全部完成！',
         noDuplicatesDescription: '这里没有需要审核的重复交易。',
         confirmApprove: '确认批准金额',
diff --git a/src/pages/TransactionDuplicate/DuplicateTransactionItem.tsx b/src/pages/TransactionDuplicate/DuplicateTransactionItem.tsx
@@ -1,77 +1,138 @@
-import React, {useMemo} from 'react';
+import React from 'react';
 import {View} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
+import {getButtonRole} from '@components/Button/utils';
+import OfflineWithFeedback from '@components/OfflineWithFeedback';
+import {usePersonalDetails} from '@components/OnyxListItemProvider';
+import {PressableWithFeedback} from '@components/Pressable';
+import RadioButton from '@components/RadioButton';
+import type {ExpenseReportListItemType, TransactionListItemType} from '@components/Search/SearchList/ListItem/types';
+import UserInfoAndActionButtonRow from '@components/Search/SearchList/ListItem/UserInfoAndActionButtonRow';
+import TransactionItemRow from '@components/TransactionItemRow';
+import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
 import useOnyx from '@hooks/useOnyx';
 import useThemeStyles from '@hooks/useThemeStyles';
-import getNonEmptyStringOnyxID from '@libs/getNonEmptyStringOnyxID';
-import {getOriginalMessage, getReportAction, isMoneyRequestAction} from '@libs/ReportActionsUtils';
-import {getOriginalReportID} from '@libs/ReportUtils';
-import ReportActionItem from '@pages/inbox/report/ReportActionItem';
-import {ReportActionItemActionsContext, ReportActionItemStateContext} from '@pages/inbox/report/ReportActionItemContext';
+import {getOriginalMessage, isMoneyRequestAction} from '@libs/ReportActionsUtils';
+import variables from '@styles/variables';
+import {createTransactionThreadReport} from '@userActions/Report';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
-import {getStableReportSelector} from '@src/selectors/Report';
 import type {Transaction} from '@src/types/onyx';
 
 type DuplicateTransactionItemProps = {
     transaction: OnyxEntry<Transaction>;
+    isLastItem: boolean;
+    isSelected: boolean;
+    shouldShowSelection?: boolean;
+    onSelectTransaction: (transactionID: string) => void;
     onPreviewPressed: (reportID: string) => void;
 };
 
-const linkedTransactionRouteErrorSelector = (transaction: OnyxEntry<Transaction>) => transaction?.errorFields?.route ?? null;
-
-function DuplicateTransactionItem({transaction, onPreviewPressed}: DuplicateTransactionItemProps) {
+function DuplicateTransactionItem({transaction, isLastItem, isSelected, shouldShowSelection = true, onSelectTransaction, onPreviewPressed}: DuplicateTransactionItemProps) {
     const styles = useThemeStyles();
-
-    const [reportStable] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${transaction?.reportID}`, {selector: getStableReportSelector});
-    const [reportActions] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${reportStable?.reportID}`);
+    const personalDetails = usePersonalDetails();
+    const currentUserPersonalDetails = useCurrentUserPersonalDetails();
+    const [report] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${transaction?.reportID}`);
+    const [reportActions] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${report?.reportID}`);
+    const [policy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${report?.policyID}`);
+    const [introSelected] = useOnyx(ONYXKEYS.NVP_INTRO_SELECTED);
+    const [betas] = useOnyx(ONYXKEYS.BETAS);
 
     const action = Object.values(reportActions ?? {})?.find((reportAction) => {
-        const IOUTransactionID = isMoneyRequestAction(reportAction) ? getOriginalMessage(reportAction)?.IOUTransactionID : CONST.DEFAULT_NUMBER_ID;
-        return IOUTransactionID === transaction?.transactionID;
+        const iouTransactionID = isMoneyRequestAction(reportAction) ? getOriginalMessage(reportAction)?.IOUTransactionID : CONST.DEFAULT_NUMBER_ID;
+        return iouTransactionID === transaction?.transactionID;
     });
+    const ownerPersonalDetails = report?.ownerAccountID ? personalDetails?.[report.ownerAccountID] : undefined;
+    const reportStatusItem = ownerPersonalDetails
+        ? ({
+              ...report,
+              from: ownerPersonalDetails,
+              to: ownerPersonalDetails,
+              formattedFrom: ownerPersonalDetails.displayName ?? '',
+          } as ExpenseReportListItemType)
+        : undefined;
 
-    const originalReportID = getOriginalReportID(reportStable?.reportID, action, reportActions);
+    const handlePreviewPress = () => {
+        if (!action || !report) {
+            return;
+        }
 
-    const [draftMessage] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS_DRAFTS}${originalReportID}`);
-    const [transactionThreadReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${action?.childReportID}`);
+        if (action.childReportID) {
+            onPreviewPressed(action.childReportID);
+            return;
+        }
 
-    const [linkedTransactionRouteError] = useOnyx(
-        `${ONYXKEYS.COLLECTION.TRANSACTION}${getNonEmptyStringOnyxID(isMoneyRequestAction(action) ? getOriginalMessage(action)?.IOUTransactionID : undefined)}`,
-        {
-            selector: linkedTransactionRouteErrorSelector,
-        },
-    );
+        const transactionThreadReport = createTransactionThreadReport({
+            introSelected,
+            currentUserLogin: currentUserPersonalDetails.login ?? '',
+            currentUserAccountID: currentUserPersonalDetails.accountID,
+            betas,
+            iouReport: report,
+            iouReportAction: action,
+            transaction,
+        });
+        if (!transactionThreadReport?.reportID) {
+            return;
+        }
 
-    const stateValue = useMemo(() => ({shouldOpenReportInRHP: true}), []);
-    const actionsValue = useMemo(() => ({onPreviewPressed}), [onPreviewPressed]);
+        onPreviewPressed(transactionThreadReport.reportID);
+    };
 
-    if (!action || !reportStable) {
+    if (!action || !report || !transaction) {
         return null;
     }
 
-    const reportDraftMessage = draftMessage?.[action.reportActionID];
-    const matchingDraftMessage = reportDraftMessage?.message;
-
     return (
-        <View style={styles.pb2}>
-            <ReportActionItemStateContext.Provider value={stateValue}>
-                <ReportActionItemActionsContext.Provider value={actionsValue}>
-                    <ReportActionItem
-                        action={action}
-                        report={reportStable}
-                        transactionThreadReport={transactionThreadReport}
-                        parentReportAction={getReportAction(reportStable?.parentReportID, reportStable?.parentReportActionID)}
-                        displayAsGroup={false}
-                        shouldDisplayNewMarker={false}
-                        isFirstVisibleReportAction={false}
-                        shouldDisplayContextMenu={false}
-                        draftMessage={matchingDraftMessage}
-                        linkedTransactionRouteError={linkedTransactionRouteError}
-                    />
-                </ReportActionItemActionsContext.Provider>
-            </ReportActionItemStateContext.Provider>
-        </View>
+        <OfflineWithFeedback pendingAction={transaction.pendingAction}>
+            <PressableWithFeedback
+                sentryLabel={CONST.SENTRY_LABEL.SEARCH.TRANSACTION_LIST_ITEM}
+                onPress={handlePreviewPress}
+                accessibilityLabel={transaction.comment?.comment ?? ''}
+                role={getButtonRole(true)}
+                isNested
+                hoverStyle={styles.hoveredComponentBG}
+                style={[!isLastItem && styles.borderBottom, styles.pt4, styles.pb4, styles.pl4, shouldShowSelection ? styles.pr0 : styles.pr4]}
+            >
+                <View style={styles.flexRow}>
+                    <View style={styles.flex1}>
+                        {!!reportStatusItem && (
+                            <UserInfoAndActionButtonRow
+                                item={reportStatusItem}
+                                shouldShowUserInfo
+                                stateNum={report?.stateNum}
+                                statusNum={report?.statusNum}
+                                containerStyles={styles.mb3}
+                            />
+                        )}
+                        <TransactionItemRow
+                            transactionItem={transaction as TransactionListItemType}
+                            report={report}
+                            policy={policy}
+                            shouldUseNarrowLayout
+                            isSelected={isSelected}
+                            shouldShowTooltip={false}
+                            dateColumnSize={CONST.SEARCH.TABLE_COLUMN_SIZES.NORMAL}
+                            amountColumnSize={CONST.SEARCH.TABLE_COLUMN_SIZES.NORMAL}
+                            taxAmountColumnSize={CONST.SEARCH.TABLE_COLUMN_SIZES.NORMAL}
+                            shouldHighlightItemWhenSelected={false}
+                            shouldShowErrors={false}
+                            style={!shouldShowSelection && styles.pv2}
+                        />
+                    </View>
+                    {shouldShowSelection && (
+                        <View style={[styles.justifyContentCenter, styles.alignItemsCenter, {width: variables.componentSizeMedium}]}>
+                            <RadioButton
+                                isChecked={isSelected}
+                                onPress={() => onSelectTransaction(transaction.transactionID)}
+                                accessibilityLabel={CONST.ROLE.RADIO}
+                                shouldStopMouseDownPropagation
+                                style={[styles.justifyContentCenter, {width: variables.componentSizeMedium, height: variables.w44, paddingLeft: 10, paddingRight: 14}]}
+                            />
+                        </View>
+                    )}
+                </View>
+            </PressableWithFeedback>
+        </OfflineWithFeedback>
     );
 }
 
diff --git a/src/pages/TransactionDuplicate/DuplicateTransactionsList.tsx b/src/pages/TransactionDuplicate/DuplicateTransactionsList.tsx
diff --git a/src/pages/TransactionDuplicate/Review.tsx b/src/pages/TransactionDuplicate/Review.tsx
