(2/2) Add support for all reportAction types in ChatListItem - use PureReportActionItem in ChatListItem

src/components/SelectionList/ChatListItem.tsx

@@ -1,18 +1,11 @@
-import React, {useMemo} from 'react';
-import {View} from 'react-native';
-import {AttachmentContext} from '@components/AttachmentContext';
-import MentionReportContext from '@components/HTMLEngineProvider/HTMLRenderers/MentionReportRenderer/MentionReportContext';
-import MultipleAvatars from '@components/MultipleAvatars';
-import {ShowContextMenuContext} from '@components/ShowContextMenuContext';
-import TextWithTooltip from '@components/TextWithTooltip';
+import React from 'react';
 import useAnimatedHighlightStyle from '@hooks/useAnimatedHighlightStyle';
-import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
-import ReportActionItemDate from '@pages/home/report/ReportActionItemDate';
-import ReportActionItemFragment from '@pages/home/report/ReportActionItemFragment';
+import PureReportActionItem from '@pages/home/report/PureReportActionItem';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
+import type {SearchPersonalDetails} from '@src/types/onyx/SearchResults';
 import BaseListItem from './BaseListItem';
 import type {ChatListItemProps, ListItem, ReportActionListItemType} from './types';
 
@@ -30,34 +23,9 @@ function ChatListItem<TItem extends ListItem>({
 }: ChatListItemProps<TItem>) {
     const reportActionItem = item as unknown as ReportActionListItemType;
     const from = reportActionItem.from;
-    const icons = [
-        {
-            type: CONST.ICON_TYPE_AVATAR,
-            source: from.avatar,
-            name: reportActionItem.formattedFrom,
-            id: from.accountID,
-        },
-    ];
     const styles = useThemeStyles();
     const theme = useTheme();
-    const StyleUtils = useStyleUtils();
-
-    const attachmentContextValue = {type: CONST.ATTACHMENT_TYPE.SEARCH};
-
-    const contextValue = {
-        anchor: null,
-        report: undefined,
-        reportNameValuePairs: undefined,
-        action: undefined,
-        transactionThreadReport: undefined,
-        checkIfContextMenuActive: () => {},
-        isDisabled: true,
-    };
 
-    const focusedBackgroundColor = styles.sidebarLinkActive.backgroundColor;
-    const hoveredBackgroundColor = styles.sidebarLinkHover?.backgroundColor ? styles.sidebarLinkHover.backgroundColor : theme.sidebar;
-
-    const mentionReportContextValue = useMemo(() => ({currentReportID: item?.reportID ?? '-1'}), [item.reportID]);
     const animatedHighlightStyle = useAnimatedHighlightStyle({
         borderRadius: variables.componentBorderRadius,
         shouldHighlight: item?.shouldAnimateInHighlight ?? false,
@@ -66,6 +34,7 @@ function ChatListItem<TItem extends ListItem>({
     });
     const pressableStyle = [
         styles.selectionListPressableItemWrapper,
+        styles.p0,
         styles.textAlignLeft,
         styles.overflowHidden,
         // Removing background style because they are added to the parent OpacityView via animatedHighlightStyle
@@ -74,11 +43,16 @@ function ChatListItem<TItem extends ListItem>({
         styles.mh0,
         item.cursorStyle,
     ];
+
+    const personalDetails: Record<string, SearchPersonalDetails | null> = {
+        [from.accountID]: from,
+    };
+
     return (
         <BaseListItem
             item={item}
             pressableStyle={pressableStyle}
-            wrapperStyle={[styles.flexRow, styles.flex1, styles.justifyContentBetween, styles.userSelectNone]}
+            wrapperStyle={[styles.flex1, styles.justifyContentBetween, styles.userSelectNone]}
             containerStyle={styles.mb2}
             isFocused={isFocused}
             isDisabled={isDisabled}
@@ -95,53 +69,24 @@ function ChatListItem<TItem extends ListItem>({
             pressableWrapperStyle={[styles.mh5, animatedHighlightStyle]}
             hoverStyle={item.isSelected && styles.activeComponentBG}
         >
-            {(hovered) => (
-                <MentionReportContext.Provider value={mentionReportContextValue}>
-                    <ShowContextMenuContext.Provider value={contextValue}>
-                        <AttachmentContext.Provider value={attachmentContextValue}>
-                            <MultipleAvatars
-                                icons={icons}
-                                shouldShowTooltip={showTooltip}
-                                secondAvatarStyle={[
-                                    StyleUtils.getBackgroundAndBorderStyle(theme.sidebar),
-                                    isFocused ? StyleUtils.getBackgroundAndBorderStyle(focusedBackgroundColor) : undefined,
-                                    hovered && !isFocused ? StyleUtils.getBackgroundAndBorderStyle(hoveredBackgroundColor) : undefined,
-                                ]}
-                            />
-                            <View style={[styles.chatItemRight]}>
-                                <View style={[styles.chatItemMessageHeader]}>
-                                    <View style={[styles.flexShrink1, styles.mr1]}>
-                                        <TextWithTooltip
-                                            shouldShowTooltip={showTooltip}
-                                            text={reportActionItem.formattedFrom}
-                                            style={[
-                                                styles.chatItemMessageHeaderSender,
-                                                isFocused ? styles.sidebarLinkActiveText : styles.sidebarLinkText,
-                                                styles.sidebarLinkTextBold,
-                                                styles.pre,
-                                            ]}
-                                        />
-                                    </View>
-                                    <ReportActionItemDate created={reportActionItem.created ?? ''} />
-                                </View>
-                                <View style={styles.chatItemMessage}>
-                                    {reportActionItem.message.map((fragment, index) => (
-                                        <ReportActionItemFragment
-                                            // eslint-disable-next-line react/no-array-index-key
-                                            key={`actionFragment-${reportActionItem.reportActionID}-${index}`}
-                                            fragment={fragment}
-                                            actionName={reportActionItem.actionName}
-                                            source=""
-                                            accountID={from.accountID}
-                                            isFragmentContainingDisplayName={index === 0}
-                                        />
-                                    ))}
-                                </View>
-                            </View>
-                        </AttachmentContext.Provider>
-                    </ShowContextMenuContext.Provider>
-                </MentionReportContext.Provider>
-            )}
+            <PureReportActionItem
+                action={reportActionItem}
+                onPress={() => onSelectRow(item)}
+                report={undefined}
+                reportActions={[]}
+                parentReportAction={undefined}
+                displayAsGroup={false}
+                isMostRecentIOUReportAction={false}
+                shouldDisplayNewMarker={false}
+                index={item.index ?? 0}
+                isFirstVisibleReportAction={false}
+                personalDetails={personalDetails}
+                shouldDisplayContextMenu={false}
+                attachmentContextValueType={CONST.ATTACHMENT_TYPE.SEARCH}
+                policy={undefined}
+                invoiceReceiverPolicy={undefined}
+                IOUTransaction={undefined}
+            />
         </BaseListItem>
     );
 }

src/libs/ReportUtils.ts

@@ -881,7 +881,7 @@ const unavailableTranslation = Localize.translateLocal('workspace.common.unavail
  */
 function getPolicyName(report: OnyxInputOrEntry<Report>, returnEmptyIfNotFound = false, policy?: OnyxInputOrEntry<Policy>): string {
     const noPolicyFound = returnEmptyIfNotFound ? '' : unavailableTranslation;
-    if (isEmptyObject(report) || (isEmptyObject(allPolicies) && !report?.policyName)) {
+    if (isEmptyObject(report) || (isEmptyObject(allPolicies) && !report?.policyName && !policy)) {
         return noPolicyFound;
     }
 

src/pages/home/report/PureReportActionItem.tsx

@@ -240,6 +240,17 @@
 
     /** A message related to a report action that has been automatically forwarded */
     reportAutomaticallyForwardedMessage?: string;
+
+    /** Type of attachment context value */
+    attachmentContextValueType?: ValueOf<typeof CONST.ATTACHMENT_TYPE>;
+
+    /** Current connected policy */
+    policy: OnyxEntry<OnyxTypes.Policy>;
+
+    /** Invoice receiver policy */
+    invoiceReceiverPolicy: OnyxEntry<OnyxTypes.Policy>;
+
+    IOUTransaction: OnyxEntry<OnyxTypes.Transaction>;
 };
 
 /**
@@ -264,7 +275,7 @@
     isThreadReportParentAction = false,
     shouldUseThreadDividerLine = false,
     shouldDisplayContextMenu = true,
     parentReportActionForTransactionThread,
     draftMessage,
     iouReport,
     emojiReactions,
@@ -293,10 +304,14 @@
     dismissTrackExpenseActionableWhisper = () => {},
     userBillingFundID,
     reportAutomaticallyForwardedMessage,
+    attachmentContextValueType = CONST.ATTACHMENT_TYPE.REPORT,
+    policy,
+    invoiceReceiverPolicy,
+    IOUTransaction,
 }: PureReportActionItemProps) {
     const {translate} = useLocalize();
     const {shouldUseNarrowLayout} = useResponsiveLayout();
-    const reportID = report?.reportID ?? '';
+    const reportID = report?.reportID ?? action?.reportID ?? '';
     const theme = useTheme();
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
@@ -517,9 +532,14 @@
         [report, action, toggleContextMenuFromActiveReportAction, transactionThreadReport, reportNameValuePairs],
     );
 
-    const attachmentContextValue = useMemo(() => ({reportID, type: CONST.ATTACHMENT_TYPE.REPORT}), [reportID]);
+    const attachmentContextValue = useMemo(() => {
+        if (attachmentContextValueType === CONST.ATTACHMENT_TYPE.SEARCH) {
+            return {type: attachmentContextValueType};
+        }
+        return {reportID, type: attachmentContextValueType};
+    }, [reportID, attachmentContextValueType]);
 
-    const mentionReportContextValue = useMemo(() => ({currentReportID: report?.reportID ?? '-1'}), [report?.reportID]);
+    const mentionReportContextValue = useMemo(() => ({currentReportID: reportID ?? '-1'}), [reportID]);
 
     const actionableItemButtons: ActionableItem[] = useMemo(() => {
         if (ReportActionsUtils.isActionableAddPaymentCard(action) && userBillingFundID === undefined && shouldRenderAddPaymentCard()) {
@@ -1000,6 +1020,9 @@
                         ![CONST.MODERATION.MODERATOR_DECISION_APPROVED, CONST.MODERATION.MODERATOR_DECISION_PENDING].some((item) => item === moderationDecision) &&
                         !ReportActionsUtils.isPendingRemove(action)
                     }
+                    personalDetails={personalDetails}
+                    policy={policy}
+                    invoiceReceiverPolicy={invoiceReceiverPolicy}
                 >
                     {content}
                 </ReportActionItemSingle>
@@ -1010,17 +1033,18 @@
     };
 
     if (action.actionName === CONST.REPORT.ACTIONS.TYPE.CREATED) {
-        const transactionID = ReportActionsUtils.isMoneyRequestAction(parentReportActionForTransactionThread)
-            ? ReportActionsUtils.getOriginalMessage(parentReportActionForTransactionThread)?.IOUTransactionID
-            : '-1';
+        // const transactionID = ReportActionsUtils.isMoneyRequestAction(parentReportActionForTransactionThread)
+        //     ? ReportActionsUtils.getOriginalMessage(parentReportActionForTransactionThread)?.IOUTransactionID
+        //     : '-1';
 
         return (
             <ReportActionItemContentCreated
                 contextValue={contextValue}
                 parentReportAction={parentReportAction}
-                transactionID={transactionID}
+                transaction={IOUTransaction}
                 draftMessage={draftMessage}
                 shouldHideThreadDividerLine={shouldHideThreadDividerLine}
+                invoiceReceiverPolicy={invoiceReceiverPolicy}
             />
         );
     }

src/pages/home/report/ReportActionItem.tsx

@@ -2,22 +2,23 @@
 import {useOnyx} from 'react-native-onyx';
 import type {OnyxEntry} from 'react-native-onyx';
 import {useBlockedFromConcierge, usePersonalDetails} from '@components/OnyxProvider';
+import usePolicy from '@hooks/usePolicy';
 import ModifiedExpenseMessage from '@libs/ModifiedExpenseMessage';
 import * as ReportActionsUtils from '@libs/ReportActionsUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import * as Report from '@userActions/Report';
 import * as ReportActions from '@userActions/ReportActions';
 import * as Transaction from '@userActions/Transaction';
-import type CONST from '@src/CONST';
+import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type {ReportAction} from '@src/types/onyx';
 import type {PureReportActionItemProps} from './PureReportActionItem';
 import PureReportActionItem from './PureReportActionItem';
 
-function ReportActionItem({action, report, ...props}: PureReportActionItemProps) {
+function ReportActionItem({action, report, parentReportActionForTransactionThread, ...props}: PureReportActionItemProps) {
     const reportID = report?.reportID ?? '';
     // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
     const originalReportID = useMemo(() => ReportUtils.getOriginalReportID(reportID, action) || '-1', [reportID, action]);
     const [draftMessage] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS_DRAFTS}${originalReportID}`, {
         selector: (draftMessagesForReport) => {
             const matchingDraftMessage = draftMessagesForReport?.[action.reportActionID];
@@ -28,21 +29,30 @@
     const [emojiReactions] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS_REACTIONS}${action.reportActionID}`);
     const [userWallet] = useOnyx(ONYXKEYS.USER_WALLET);
     const [linkedTransactionRouteError] = useOnyx(
         `${ONYXKEYS.COLLECTION.TRANSACTION}${ReportActionsUtils.isMoneyRequestAction(action) ? ReportActionsUtils.getOriginalMessage(action)?.IOUTransactionID ?? -1 : -1}`,
         {selector: (transaction) => transaction?.errorFields?.route ?? null},
     );
     // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing -- This is needed to prevent the app from crashing when the app is using imported state.
     const [reportNameValuePairs] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_NAME_VALUE_PAIRS}${report?.reportID || '-1'}`);
 
     const [isUserValidated] = useOnyx(ONYXKEYS.USER, {selector: (user) => !!user?.validated});
     // The app would crash due to subscribing to the entire report collection if parentReportID is an empty string. So we should have a fallback ID here.
     // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
     const [parentReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${report?.parentReportID || -1}`);
     const personalDetails = usePersonalDetails();
     const blockedFromConcierge = useBlockedFromConcierge();
     const [userBillingFundID] = useOnyx(ONYXKEYS.NVP_BILLING_FUND_ID);
     const linkedReport = ReportUtils.isChatThread(report) ? parentReport : report;
     const missingPaymentMethod = ReportUtils.getIndicatedMissingPaymentMethod(userWallet, linkedReport?.reportID ?? '-1', action);
+    const policy = usePolicy(report?.policyID);
+    const [invoiceReceiverPolicy] = useOnyx(
+        `${ONYXKEYS.COLLECTION.POLICY}${report?.invoiceReceiver && 'policyID' in report.invoiceReceiver ? report.invoiceReceiver.policyID : CONST.DEFAULT_NUMBER_ID}`,
+    );
+    const IOUTransactionID = ReportActionsUtils.isMoneyRequestAction(parentReportActionForTransactionThread)
+    ? ReportActionsUtils.getOriginalMessage(parentReportActionForTransactionThread)?.IOUTransactionID
+    : '-1';
+
+    const [IOUTransaction] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION}${IOUTransactionID ?? '-1'}`);
 
     return (
         <PureReportActionItem
@@ -81,6 +91,9 @@
             dismissTrackExpenseActionableWhisper={Report.dismissTrackExpenseActionableWhisper}
             userBillingFundID={userBillingFundID}
             reportAutomaticallyForwardedMessage={ReportUtils.getReportAutomaticallyForwardedMessage(action as ReportAction<typeof CONST.REPORT.ACTIONS.TYPE.FORWARDED>, reportID)}
+            policy={policy}
+            invoiceReceiverPolicy={invoiceReceiverPolicy}
+            IOUTransaction={IOUTransaction}
         />
     );
 }

src/pages/home/report/ReportActionItemContentCreated.tsx

@@ -1,10 +1,10 @@
 import lodashIsEqual from 'lodash/isEqual';
 import React, {memo, useMemo} from 'react';
 import {View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
 import type {OnyxEntry} from 'react-native-onyx';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import RenderHTML from '@components/RenderHTML';
 import MoneyReportView from '@components/ReportActionItem/MoneyReportView';
 import MoneyRequestView from '@components/ReportActionItem/MoneyRequestView';
 import TaskView from '@components/ReportActionItem/TaskView';
@@ -20,12 +20,13 @@
 import * as TransactionUtils from '@libs/TransactionUtils';
 import CONST from '@src/CONST';
 import type {TranslationPaths} from '@src/languages/types';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type * as OnyxTypes from '@src/types/onyx';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
 import AnimatedEmptyStateBackground from './AnimatedEmptyStateBackground';
 import ReportActionItemCreated from './ReportActionItemCreated';
 import ReportActionItemSingle from './ReportActionItemSingle';
+import { usePersonalDetails } from '@components/OnyxProvider';
 
 type ReportActionItemContentCreatedProps = {
     /**  The context value containing the report and action data, along with the show context menu props */
@@ -37,24 +38,26 @@
     /** Report action belonging to the report's parent */
     parentReportAction: OnyxEntry<OnyxTypes.ReportAction>;
 
-    /** The transaction ID */
-    transactionID: string | undefined;
+    /** Transaction that stores the distance expense data */
+    transaction: OnyxEntry<OnyxTypes.Transaction>;
 
     /** The draft message */
     draftMessage: string | undefined;
 
     /** Flag to show, hide the thread divider line */
     shouldHideThreadDividerLine: boolean;
+
+    /** Invoice receiver policy */
+    invoiceReceiverPolicy: OnyxEntry<OnyxTypes.Policy>;
 };
 
-function ReportActionItemContentCreated({contextValue, parentReportAction, transactionID, draftMessage, shouldHideThreadDividerLine}: ReportActionItemContentCreatedProps) {
+function ReportActionItemContentCreated({contextValue, parentReportAction, transaction, draftMessage, shouldHideThreadDividerLine, invoiceReceiverPolicy}: ReportActionItemContentCreatedProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
 
     const {report, action, transactionThreadReport} = contextValue;
-
+    const personalDetails = usePersonalDetails();
     const policy = usePolicy(report.policyID === CONST.POLICY.OWNER_EMAIL_FAKE ? '-1' : report.policyID ?? '-1');
-    const [transaction] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID ?? '-1'}`);
 
     const transactionCurrency = TransactionUtils.getCurrency(transaction);
 
@@ -96,6 +99,9 @@
                             action={parentReportAction}
                             showHeader
                             report={report}
+                            policy={policy}
+                            personalDetails={personalDetails}
+                            invoiceReceiverPolicy={invoiceReceiverPolicy}
                         >
                             <RenderHTML html={`<comment>${translate(message)}</comment>`} />
                         </ReportActionItemSingle>
@@ -130,6 +136,9 @@
                             action={parentReportAction}
                             showHeader={draftMessage === undefined}
                             report={report}
+                            policy={policy}
+                            personalDetails={personalDetails}
+                            invoiceReceiverPolicy={invoiceReceiverPolicy}
                         >
                             <RenderHTML html={`<comment>${translate('parentReportAction.deletedTask')}</comment>`} />
                         </ReportActionItemSingle>
@@ -200,7 +209,8 @@
     (prevProps, nextProps) =>
         lodashIsEqual(prevProps.contextValue, nextProps.contextValue) &&
         lodashIsEqual(prevProps.parentReportAction, nextProps.parentReportAction) &&
-        prevProps.transactionID === nextProps.transactionID &&
+        lodashIsEqual(prevProps.transaction, nextProps.transaction) &&
         prevProps.draftMessage === nextProps.draftMessage &&
-        prevProps.shouldHideThreadDividerLine === nextProps.shouldHideThreadDividerLine,
+        prevProps.shouldHideThreadDividerLine === nextProps.shouldHideThreadDividerLine &&
+        lodashIsEqual(prevProps.invoiceReceiverPolicy, nextProps.invoiceReceiverPolicy),
 );