[WIP] decompose ReportScreen 5: self-subscribe List and Composer

src/components/MoneyRequestReportView/MoneyRequestReportView.tsx

@@ -16,7 +16,6 @@
 import useNewTransactions from '@hooks/useNewTransactions';
 import useOnyx from '@hooks/useOnyx';
 import usePaginatedReportActions from '@hooks/usePaginatedReportActions';
-import useParentReportAction from '@hooks/useParentReportAction';
 import useReportTransactionsCollection from '@hooks/useReportTransactionsCollection';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -25,15 +24,15 @@
 import Log from '@libs/Log';
 import {getAllNonDeletedTransactions, shouldDisplayReportTableView, shouldWaitForTransactions as shouldWaitForTransactionsUtil} from '@libs/MoneyRequestReportUtils';
 import navigationRef from '@libs/Navigation/navigationRef';
-import {getFilteredReportActionsForReportView, getOneTransactionThreadReportID, isMoneyRequestAction, isSentMoneyReportAction} from '@libs/ReportActionsUtils';
-import {canEditReportAction, getReportOfflinePendingActionAndErrors, isReportTransactionThread} from '@libs/ReportUtils';
+import {getFilteredReportActionsForReportView, getOneTransactionThreadReportID} from '@libs/ReportActionsUtils';
+import {getReportOfflinePendingActionAndErrors, isReportTransactionThread} from '@libs/ReportUtils';
 import {buildCannedSearchQuery} from '@libs/SearchQueryUtils';
 import {cancelSpan} from '@libs/telemetry/activeSpans';
 import markOpenReportEnd from '@libs/telemetry/markOpenReportEnd';
 import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan';
 import Navigation from '@navigation/Navigation';
 import ReportActionsView from '@pages/inbox/report/ReportActionsView';
-import ReportFooter from '@pages/inbox/report/ReportFooter';
+import ReportFooter from '@pages/inbox/ReportFooter';
 import CONST from '@src/CONST';
 import NAVIGATORS from '@src/NAVIGATORS';
 import ONYXKEYS from '@src/ONYXKEYS';
@@ -146,13 +145,8 @@
     }, [transactions, isOffline]);
     const reportTransactionIDs = visibleTransactions.map((transaction) => transaction.transactionID);
     const transactionThreadReportID = getOneTransactionThreadReportID(report, chatReport, reportActions ?? [], isOffline, reportTransactionIDs);
-    const isSentMoneyReport = useMemo(() => reportActions.some((action) => isSentMoneyReportAction(action)), [reportActions]);
-
     const newTransactions = useNewTransactions(reportMetadata?.hasOnceLoadedReportActions, transactions);
 
-    const parentReportAction = useParentReportAction(report);
-
-    const lastReportAction = [...reportActions, parentReportAction].find((action) => canEditReportAction(action) && !isMoneyRequestAction(action));
     const isLoadingInitialReportActions = reportMetadata?.isLoadingInitialReportActions;
     const dismissReportCreationError = useCallback(() => {
         goBackFromSearchMoneyRequest();
@@ -246,14 +240,7 @@
             <View style={styles.flex1}>
                 <ReportHeaderSkeletonView reasonAttributes={loadingAppReasonAttributes} />
                 <ReportActionsSkeletonView />
-                {shouldDisplayReportFooter ? (
-                    <ReportFooter
-                        report={report}
-                        lastReportAction={lastReportAction}
-                        // If the report is from the 'Send Money' flow, we add the comment to the `iou` report because for these we don't combine reportActions even if there is a single transaction (they always have a single transaction)
-                        transactionThreadReportID={isSentMoneyReport ? undefined : transactionThreadReportID}
-                    />
-                ) : null}
+                {shouldDisplayReportFooter ? <ReportFooter reportID={report?.reportID ?? ''} /> : null}
             </View>
         );
     }
@@ -307,25 +294,13 @@
                             />
                         ) : (
                             <ReportActionsView
-                                report={report}
-                                reportActions={reportActions}
-                                isLoadingInitialReportActions={reportMetadata?.isLoadingInitialReportActions}
-                                hasNewerActions={hasNewerActions}
-                                hasOlderActions={hasOlderActions}
-                                parentReportAction={parentReportAction}
+                                reportID={reportID ?? ''}
                                 onLayout={onLayout}
-                                transactionThreadReportID={transactionThreadReportID}
                             />
                         )}
                         {shouldDisplayReportFooter ? (
                             <>
-                                <ReportFooter
-                                    report={report}
-                                    lastReportAction={lastReportAction}
-                                    reportTransactions={transactions}
-                                    // If the report is from the 'Send Money' flow, we add the comment to the `iou` report because for these we don't combine reportActions even if there is a single transaction (they always have a single transaction)
-                                    transactionThreadReportID={isSentMoneyReport ? undefined : transactionThreadReportID}
-                                />
+                                <ReportFooter reportID={report?.reportID ?? ''} />
                                 <PortalHost name="suggestions" />
                             </>
                         ) : null}

src/hooks/useConciergeSidePanelReportActions.ts

@@ -1,11 +1,12 @@
 import {useCallback, useMemo, useState} from 'react';
+import type {OnyxEntry} from 'react-native-onyx';
 import DateUtils from '@libs/DateUtils';
 import {isCreatedAction} from '@libs/ReportActionsUtils';
 import {buildConciergeGreetingReportAction} from '@libs/ReportUtils';
 import type * as OnyxTypes from '@src/types/onyx';
 
 type UseConciergeSidePanelReportActionsParams = {
-    report: OnyxTypes.Report;
+    report: OnyxEntry<OnyxTypes.Report>;
     reportActions: OnyxTypes.ReportAction[];
     visibleReportActions: OnyxTypes.ReportAction[];
     isConciergeSidePanel: boolean;
@@ -76,8 +77,8 @@
         if (!showConciergeGreeting) {
             return undefined;
         }
-        return buildConciergeGreetingReportAction(report.reportID, greetingText, report.lastReadTime ?? DateUtils.getDBTime());
-    }, [showConciergeGreeting, report.reportID, report.lastReadTime, greetingText]);
+        return buildConciergeGreetingReportAction(report?.reportID ?? '', greetingText, report?.lastReadTime ?? DateUtils.getDBTime());
+    }, [showConciergeGreeting, report?.reportID, report?.lastReadTime, greetingText]);
 
     const firstUserMessageCreated = useMemo(() => {
         if (showConciergeSidePanelWelcome || !isConciergeSidePanel || !hasUserSentMessage || !sessionStartTime) {

src/hooks/useShouldSuppressConciergeIndicators.ts

@@ -0,0 +1,36 @@
+import type {OnyxEntry} from 'react-native-onyx';
+import {isCreatedAction} from '@libs/ReportActionsUtils';
+import ONYXKEYS from '@src/ONYXKEYS';
+import type {ReportActions} from '@src/types/onyx/ReportAction';
+import useCurrentUserPersonalDetails from './useCurrentUserPersonalDetails';
+import useIsInSidePanel from './useIsInSidePanel';
+import useOnyx from './useOnyx';
+import useSidePanelState from './useSidePanelState';
+
+/**
+ * Returns true when thinking/typing indicators should be hidden in the side-panel
+ * welcome state — specifically for Concierge DMs before the user sends their first message.
+ */
+function useShouldSuppressConciergeIndicators(reportID: string | undefined): boolean {
+    const isInSidePanel = useIsInSidePanel();
+    const {sessionStartTime} = useSidePanelState();
+    const {accountID: currentUserAccountID} = useCurrentUserPersonalDetails();
+    const [conciergeReportID] = useOnyx(ONYXKEYS.CONCIERGE_REPORT_ID);
+
+    const isConciergeChat = reportID === conciergeReportID;
+
+    const hasUserSentMessageSelector = (actions: OnyxEntry<ReportActions>) => {
+        if (!actions || !sessionStartTime) {
+            return false;
+        }
+        return Object.values(actions).some((action) => !isCreatedAction(action) && action.actorAccountID === currentUserAccountID && action.created >= sessionStartTime);
+    };
+    // eslint-disable-next-line rulesdir/no-inline-useOnyx-selector -- React Compiler handles memoization
+    const [hasUserSentMessage] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${reportID}`, {
+        selector: hasUserSentMessageSelector,
+    });
+
+    return isConciergeChat && isInSidePanel && !hasUserSentMessage;
+}
+
+export default useShouldSuppressConciergeIndicators;