Fix PR review comments: dedup modals, navigation back, eslint justification

Author: TMisiukiewicz

src/components/DecisionModal.tsx

@@ -50,6 +50,9 @@ type DecisionModalProps = {
 
     /** Whether modal is visible */
     isVisible: boolean;
+
+    /** Whether to handle browser navigation back to close the modal */
+    shouldHandleNavigationBack?: boolean;
 };
 
 function DecisionModal({
@@ -67,6 +70,7 @@ function DecisionModal({
     isFirstOptionSuccess = true,
     isSecondOptionSuccess = false,
     isSecondOptionDanger = false,
+    shouldHandleNavigationBack,
 }: DecisionModalProps) {
     const styles = useThemeStyles();
 
@@ -77,6 +81,7 @@ function DecisionModal({
             type={isSmallScreenWidth ? CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED : CONST.MODAL.MODAL_TYPE.CONFIRM}
             innerContainerStyle={styles.pv0}
             onModalHide={onModalHide}
+            shouldHandleNavigationBack={shouldHandleNavigationBack}
         >
             <ScrollView contentContainerStyle={styles.m5}>
                 <View>

src/components/Modal/Global/DecisionModalWrapper.tsx

@@ -34,6 +34,7 @@ function DecisionModalWrapper({closeModal, onModalHide, ...props}: DecisionModal
 
     return (
         <DecisionModal
+            // Spreading is needed to forward all modal configuration props from the wrapper to the underlying DecisionModal.
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...props}
             isVisible={isVisible}

src/components/MoneyReportHeader.tsx

@@ -384,6 +384,23 @@ function MoneyReportHeader({reportID: reportIDProp, shouldDisplayBackButton = fa
     const [exportModalStatus, setExportModalStatus] = useState<ExportType | null>(null);
     const {showConfirmModal} = useConfirmModal();
     const {showDecisionModal} = useDecisionModal();
+
+    const showOfflineModal = () => {
+        showDecisionModal({
+            title: translate('common.youAppearToBeOffline'),
+            prompt: translate('common.offlinePrompt'),
+            secondOptionText: translate('common.buttonConfirm'),
+        });
+    };
+
+    const showDownloadErrorModal = () => {
+        showDecisionModal({
+            title: translate('common.downloadFailedTitle'),
+            prompt: translate('common.downloadFailedDescription'),
+            secondOptionText: translate('common.buttonConfirm'),
+        });
+    };
+
     const {isPaidAnimationRunning, isApprovedAnimationRunning, isSubmittingAnimationRunning, startAnimation, stopAnimation, startApprovedAnimation, startSubmittingAnimation} =
         usePaymentAnimations();
     const styles = useThemeStyles();
@@ -585,20 +602,8 @@ function MoneyReportHeader({reportID: reportIDProp, shouldDisplayBackButton = fa
         reportActions,
         allTransactionsLength: transactions.length,
         session,
-        onExportFailed: () => {
-            showDecisionModal({
-                title: translate('common.downloadFailedTitle'),
-                prompt: translate('common.downloadFailedDescription'),
-                secondOptionText: translate('common.buttonConfirm'),
-            });
-        },
-        onExportOffline: () => {
-            showDecisionModal({
-                title: translate('common.youAppearToBeOffline'),
-                prompt: translate('common.offlinePrompt'),
-                secondOptionText: translate('common.buttonConfirm'),
-            });
-        },
+        onExportFailed: showDownloadErrorModal,
+        onExportOffline: showOfflineModal,
         policy,
         beginExportWithTemplate: (templateName, templateType, transactionIDList, policyID) => beginExportWithTemplate(templateName, templateType, transactionIDList, policyID),
         isOnSearch,

src/hooks/useDecisionModal.ts

@@ -11,6 +11,7 @@ const useDecisionModal = () => {
         return context.showModal({
             component: DecisionModalWrapper,
             props: {
+                shouldHandleNavigationBack: true,
                 ...options,
             },
         });