fix: add not found view if reviewDuplicates is empty

Expensify · Jul 23, 2024 · cf622a6 · cf622a6
1 parent 38cddee
commit cf622a6
Showing 1 changed file with 30 additions and 27 deletions.
diff --git a/src/pages/TransactionDuplicate/Confirmation.tsx b/src/pages/TransactionDuplicate/Confirmation.tsx
@@ -4,6 +4,7 @@ import React, {useCallback, useMemo} from 'react';
 import {View} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
 import {useOnyx} from 'react-native-onyx';
+import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView';
 import Button from '@components/Button';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import MoneyRequestView from '@components/ReportActionItem/MoneyRequestView';
@@ -59,34 +60,36 @@ function Confirmation() {
             testID={Confirmation.displayName}
             shouldShowOfflineIndicator
         >
-            <HeaderWithBackButton title={translate('iou.reviewDuplicates')} />
-            <ScrollView style={styles.mb3}>
-                <View style={[styles.ph5, styles.pb8]}>
-                    <Text
-                        family="EXP_NEW_KANSAS_MEDIUM"
-                        fontSize={variables.fontSizeLarge}
-                        style={styles.pb5}
-                    >
-                        {translate('violations.confirmDetails')}
-                    </Text>
-                    <Text>{translate('violations.confirmDuplicatesInfo')}</Text>
-                </View>
-                {/* We need that provider here becuase MoneyRequestView component require that */}
-                <ShowContextMenuContext.Provider value={contextValue}>
-                    <MoneyRequestView
-                        report={report}
-                        shouldShowAnimatedBackground={false}
-                        readonly
-                        updatedTransaction={transaction as OnyxEntry<Transaction>}
+            <FullPageNotFoundView shouldShow={!reviewDuplicates}>
+                <HeaderWithBackButton title={translate('iou.reviewDuplicates')} />
+                <ScrollView style={styles.mb3}>
+                    <View style={[styles.ph5, styles.pb8]}>
+                        <Text
+                            family="EXP_NEW_KANSAS_MEDIUM"
+                            fontSize={variables.fontSizeLarge}
+                            style={styles.pb5}
+                        >
+                            {translate('violations.confirmDetails')}
+                        </Text>
+                        <Text>{translate('violations.confirmDuplicatesInfo')}</Text>
+                    </View>
+                    {/* We need that provider here becuase MoneyRequestView component require that */}
+                    <ShowContextMenuContext.Provider value={contextValue}>
+                        <MoneyRequestView
+                            report={report}
+                            shouldShowAnimatedBackground={false}
+                            readonly
+                            updatedTransaction={transaction as OnyxEntry<Transaction>}
+                        />
+                    </ShowContextMenuContext.Provider>
+                    <Button
+                        text={translate('common.confirm')}
+                        success
+                        style={[styles.ph5, styles.mt2]}
+                        onPress={mergeDuplicates}
                     />
-                </ShowContextMenuContext.Provider>
-                <Button
-                    text={translate('common.confirm')}
-                    success
-                    style={[styles.ph5, styles.mt2]}
-                    onPress={mergeDuplicates}
-                />
-            </ScrollView>
+                </ScrollView>
+            </FullPageNotFoundView>
         </ScreenWrapper>
     );
 }