ReportActionItemCreated.tsx

import OfflineWithFeedback from '@components/OfflineWithFeedback';
import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
import ReportActionAvatars from '@components/ReportActionAvatars';
import ReportWelcomeText from '@components/ReportWelcomeText';

import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
import useLocalize from '@hooks/useLocalize';
import useOnyx from '@hooks/useOnyx';
import useResponsiveLayout from '@hooks/useResponsiveLayout';
import useThemeStyles from '@hooks/useThemeStyles';

import {hasDeferredWriteForReport} from '@libs/deferredLayoutWrite';
import Navigation from '@libs/Navigation/Navigation';
import {isChatReport, isCurrentUserInvoiceReceiver, isInvoiceRoom, navigateToDetailsPage, shouldDisableDetailPage as shouldDisableDetailPageReportUtils} from '@libs/ReportUtils';

import {clearCreateChatError} from '@userActions/Report';
import deleteReport from '@userActions/Report/DeleteReport';

import CONST from '@src/CONST';
import ONYXKEYS from '@src/ONYXKEYS';

import {hasSeenTourSelector} from '@selectors/Onboarding';
import {conciergePersonalDetailSelector, isOptimisticPersonalDetailSelector, personalDetailsSelector} from '@selectors/PersonalDetails';
import React, {memo, useMemo} from 'react';
import {View} from 'react-native';

import AnimatedEmptyStateBackground from './AnimatedEmptyStateBackground';

type ReportActionItemCreatedProps = {
    /** The id of the report */
    reportID: string | undefined;

    /** The id of the policy */

    policyID: string | undefined;
};
function ReportActionItemCreated({reportID, policyID}: ReportActionItemCreatedProps) {
    const styles = useThemeStyles();

    const {translate} = useLocalize();
    const {shouldUseNarrowLayout} = useResponsiveLayout();
    const [report] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${reportID}`);
    const [reportMetadata] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_METADATA}${reportID}`);
    const [policy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${policyID}`);
    const [conciergeReportID] = useOnyx(ONYXKEYS.CONCIERGE_REPORT_ID);
    const [introSelected] = useOnyx(ONYXKEYS.NVP_INTRO_SELECTED);
    const [betas] = useOnyx(ONYXKEYS.BETAS);
    const [isSelfTourViewed] = useOnyx(ONYXKEYS.NVP_ONBOARDING, {selector: hasSeenTourSelector});
    const currentUserPersonalDetail = useCurrentUserPersonalDetails();
    const {accountID: currentUserAccountID} = currentUserPersonalDetail;
    const [conciergePersonalDetail] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST, {selector: conciergePersonalDetailSelector});
    const reportOwnerSelector = useMemo(() => personalDetailsSelector(report?.ownerAccountID), [report?.ownerAccountID]);
    const [reportOwnerPersonalDetail] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST, {selector: reportOwnerSelector}, [reportOwnerSelector]);

    const otherParticipantAccountID =
        Object.keys(report?.participants ?? {})
            .map(Number)
            .find((id) => id !== currentUserAccountID) ?? CONST.DEFAULT_NUMBER_ID;
    const [isParticipantOptimistic = true] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST, {selector: isOptimisticPersonalDetailSelector(otherParticipantAccountID)});

    if (!isChatReport(report)) {
        return null;
    }

    const shouldDisableDetailPage = shouldDisableDetailPageReportUtils(report, isParticipantOptimistic);

    return (
        <OfflineWithFeedback
            pendingAction={report?.pendingFields?.addWorkspaceRoom ?? report?.pendingFields?.createChat}
            errors={report?.errorFields?.addWorkspaceRoom ?? report?.errorFields?.createChat}
            errorRowStyles={[styles.ml10, styles.mr2, styles.mb2]}
            onClose={() => {
                // A brand-new chat whose server creation failed (e.g. via a failed new-chat expense, see #93542) is
                // reset to non-optimistic so it can load instead of spinning on an infinite skeleton. But that means
                // clearCreateChatError would only clear the createChat error and leave the chat + its linked IOU report
                // orphaned. Dismissing the created row on such a chat should remove it entirely — mirroring the
                // failed-expense dismiss path — so delete the chat (deleteReport cascades to the IOU report and
                // transaction thread(s)) and navigate the user out of the now-deleted chat.
                if (report?.errorFields?.createChat && !reportMetadata?.isOptimisticReport) {
                    Navigation.goBack(undefined, {afterTransition: () => deleteReport(report.reportID, true)});
                    return;
                }
                clearCreateChatError(
                    report,
                    conciergeReportID,
                    introSelected,
                    currentUserAccountID,
                    betas,
                    isSelfTourViewed,
                    reportOwnerPersonalDetail,
                    currentUserPersonalDetail,
                    conciergePersonalDetail,
                );
            }}
        >
            <View style={[styles.pRelative]}>
                {/* hasDeferredWriteForReport is non-reactive (reads a module-level Map, not tracked by React).
                   This is intentional: we only suppress the animation on the initial render while a
                   DISMISS_MODAL write targeting THIS report is pending. The animation re-appears on the
                   next organic re-render (e.g. Onyx updates after the API write resolves). The check is
                   scoped to `report.reportID` so an unrelated submit flow's dismiss doesn't suppress the
                   animation here. */}
                {!hasDeferredWriteForReport(CONST.DEFERRED_LAYOUT_WRITE_KEYS.DISMISS_MODAL, report?.reportID) && <AnimatedEmptyStateBackground />}
                <View
                    accessibilityLabel={translate('accessibilityHints.chatWelcomeMessage')}
                    style={[styles.p5]}
                >
                    <OfflineWithFeedback pendingAction={report?.pendingFields?.avatar}>
                        <PressableWithoutFeedback
                            onPress={() => navigateToDetailsPage(report)}
                            style={[styles.mh5, styles.mb3, styles.alignSelfStart, shouldDisableDetailPage && styles.cursorDefault]}
                            accessibilityLabel={translate('common.details')}
                            role={CONST.ROLE.BUTTON}
                            disabled={shouldDisableDetailPage}
                            sentryLabel={CONST.SENTRY_LABEL.REPORT.REPORT_ACTION_ITEM_CREATED}
                        >
                            <ReportActionAvatars
                                reportID={reportID}
                                size={CONST.AVATAR_SIZE.X_LARGE}
                                horizontalStacking={{
                                    displayInRows: shouldUseNarrowLayout,
                                    maxAvatarsInRow: shouldUseNarrowLayout ? CONST.AVATAR_ROW_SIZE.DEFAULT : CONST.AVATAR_ROW_SIZE.LARGE_SCREEN,
                                    overlapDivider: 4,
                                    sort: isInvoiceRoom(report) && isCurrentUserInvoiceReceiver(report) ? CONST.REPORT_ACTION_AVATARS.SORT_BY.REVERSE : undefined,
                                }}
                            />
                        </PressableWithoutFeedback>
                    </OfflineWithFeedback>
                    <View style={[styles.ph5]}>
                        <ReportWelcomeText
                            report={report}
                            policy={policy}
                        />
                    </View>
                </View>
            </View>
        </OfflineWithFeedback>
    );
}

export default memo(ReportActionItemCreated);