Add DeletedReportView component for deleted report empty state

src/components/BlockingViews/DeletedReportView.tsx

@@ -0,0 +1,132 @@
+import React, {useEffect, useRef, useState} from 'react';
+import {View} from 'react-native';
+import type {OnyxEntry} from 'react-native-onyx';
+import HeaderWithBackButton from '@components/HeaderWithBackButton';
+import {useMemoizedLazyIllustrations} from '@hooks/useLazyAsset';
+import useLocalize from '@hooks/useLocalize';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
+import useThemeStyles from '@hooks/useThemeStyles';
+import Navigation from '@libs/Navigation/Navigation';
+import variables from '@styles/variables';
+import type * as OnyxTypes from '@src/types/onyx';
+import BlockingView from './BlockingView';
+import ForceFullScreenView from './ForceFullScreenView';
+
+/**
+ * Returns true if the report was deleted. Once true, stays true until reportIDFromRoute changes.
+ * Works only when the component with the report was already rendered before deletion -
+ * it tracks if reportID was ever equal to reportIDFromRoute, then detects when it becomes undefined.
+ */
+function useReportWasDeleted(reportIDFromRoute: string | undefined, report: OnyxEntry<OnyxTypes.Report> | undefined, isOptimisticDelete: boolean, userLeavingStatus: boolean): boolean {
+    const wasEverAccessibleRef = useRef(false);
+    const [wasDeleted, setWasDeleted] = useState(false);
+    const prevReportIDFromRouteRef = useRef(reportIDFromRoute);
+
+    const currentReportID = report?.reportID;
+
+    // Reset when navigating to a different report
+    useEffect(() => {
+        if (prevReportIDFromRouteRef.current === reportIDFromRoute) {
+            return;
+        }
+
+        wasEverAccessibleRef.current = false;
+        setWasDeleted(false);
+        prevReportIDFromRouteRef.current = reportIDFromRoute;
+    }, [reportIDFromRoute]);
+
+    useEffect(() => {
+        if (wasEverAccessibleRef.current) {
+            return;
+        }
+
+        if (currentReportID && currentReportID === reportIDFromRoute) {
+            wasEverAccessibleRef.current = true;
+        }
+    }, [currentReportID, reportIDFromRoute]);
+
+    useEffect(() => {
+        if (wasDeleted || isOptimisticDelete || userLeavingStatus) {
+            return;
+        }
+
+        if (wasEverAccessibleRef.current && !currentReportID) {
+            setWasDeleted(true);
+        }
+    }, [wasDeleted, isOptimisticDelete, userLeavingStatus, currentReportID]);
+
+    return wasDeleted;
+}
+
+
+
+type DeletedReportViewProps = {
+    /** Child elements */
+    children?: React.ReactNode;
+
+    /** The report ID from the navigation route */
+    reportIDFromRoute: string | undefined;
+
+    /** The current report object from Onyx */
+    report: OnyxEntry<OnyxTypes.Report> | undefined;
+
+    /** Whether the report is being optimistically deleted */
+    isOptimisticDelete: boolean;
+
+    /** Whether the user is leaving the room */
+    userLeavingStatus: boolean;
+
+    /** Whether we should show the back button on the header */
+    shouldShowBackButton?: boolean;
+
+    /** Method to trigger when pressing the back button of the header */
+    onBackButtonPress?: () => void;
+
+    /** Whether we should display the button that opens new SearchRouter */
+    shouldDisplaySearchRouter?: boolean;
+};
+
+function DeletedReportView({
+    children = null,
+    reportIDFromRoute,
+    report,
+    isOptimisticDelete,
+    userLeavingStatus,
+    shouldShowBackButton = true,
+    onBackButtonPress = () => Navigation.goBack(),
+    shouldDisplaySearchRouter,
+}: DeletedReportViewProps) {
+    const styles = useThemeStyles();
+    const {isMediumScreenWidth, isLargeScreenWidth} = useResponsiveLayout();
+    const {translate} = useLocalize();
+    const illustrations = useMemoizedLazyIllustrations(['TrashCan']);
+
+    const isReportDeleted = useReportWasDeleted(reportIDFromRoute, report, isOptimisticDelete, userLeavingStatus);
+
+    if (isReportDeleted) {
+        return (
+            <ForceFullScreenView shouldForceFullScreen={false}>
+                <HeaderWithBackButton
+                    onBackButtonPress={onBackButtonPress}
+                    shouldShowBackButton={shouldShowBackButton}
+                    shouldDisplaySearchRouter={shouldDisplaySearchRouter && (isMediumScreenWidth || isLargeScreenWidth)}
+                />
+                <View style={[styles.flex1, styles.blockingViewContainer]}>
+                    <BlockingView
+                        icon={illustrations.TrashCan}
+                        iconWidth={variables.modalTopIconWidth}
+                        iconHeight={variables.modalTopIconHeight}
+                        title={translate('report.deleted.title')}
+                        testID="DeletedReportView"
+                    />
+                </View>
+            </ForceFullScreenView>
+        );
+    }
+
+    return children;
+}
+
+DeletedReportView.displayName = 'DeletedReportView';
+
+export default DeletedReportView;

src/languages/en.ts

@@ -6794,6 +6794,9 @@ const translations = {
         },
     },
     report: {
+        deleted: {
+            title: 'This expense has been deleted',
+        },
         newReport: {
             createExpense: 'Create expense',
             createReport: 'Create report',

src/pages/home/ReportScreen.tsx

@@ -10,7 +10,8 @@
 import {Animated, DeviceEventEmitter, InteractionManager, View} from 'react-native';
 import type {OnyxCollection, OnyxEntry} from 'react-native-onyx';
 import Banner from '@components/Banner';
+import DeletedReportView from '@components/BlockingViews/DeletedReportView';
 import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView';
 import DragAndDropProvider from '@components/DragAndDrop/Provider';
 import MoneyReportHeader from '@components/MoneyReportHeader';
 import MoneyRequestHeader from '@components/MoneyRequestHeader';
@@ -488,7 +489,7 @@
     const currentReportIDFormRoute = route.params?.reportID;
 
     // eslint-disable-next-line rulesdir/no-negated-variables
     const shouldShowNotFoundPage = useMemo(
         (): boolean => {
             if (shouldShowNotFoundLinkedAction) {
                 return true;
@@ -816,7 +817,7 @@
         });
     }, [reportMetadata?.isLoadingInitialReportActions]);
 
     const navigateToEndOfReport = useCallback(() => {
         Navigation.setParams({reportActionID: ''});
         fetchReport();
     }, [fetchReport]);
@@ -940,16 +941,12 @@
                     shouldEnableKeyboardAvoidingView={isTopMostReportId || isInNarrowPaneModal}
                     testID={`report-screen-${reportID}`}
                 >
-                    <FullPageNotFoundView
-                        shouldShow={shouldShowNotFoundPage}
-                        subtitleKey={shouldShowNotFoundLinkedAction ? 'notFound.commentYouLookingForCannotBeFound' : 'notFound.noAccess'}
-                        subtitleStyle={[styles.textSupporting]}
+                    <DeletedReportView
+                        reportIDFromRoute={reportIDFromRoute}
+                        report={report}
+                        isOptimisticDelete={isOptimisticDelete}
+                        userLeavingStatus={userLeavingStatus}
                         shouldShowBackButton={shouldUseNarrowLayout}
-                        onBackButtonPress={shouldShowNotFoundLinkedAction ? navigateToEndOfReport : Navigation.goBack}
-                        shouldShowLink={shouldShowNotFoundLinkedAction}
-                        linkTranslationKey="notFound.goToChatInstead"
-                        subtitleKeyBelowLink={shouldShowNotFoundLinkedAction ? 'notFound.contactConcierge' : ''}
-                        onLinkPress={navigateToEndOfReport}
                         shouldDisplaySearchRouter
                     >
                         <DragAndDropProvider isDisabled={isEditingDisabled}>
@@ -1035,7 +1032,7 @@
                             </View>
                             <PortalHost name="suggestions" />
                         </DragAndDropProvider>
-                    </FullPageNotFoundView>
+                    </DeletedReportView>
                 </ScreenWrapper>
             </ReactionListWrapper>
         </ActionListContext.Provider>