diff --git a/src/components/Modal/Global/ReportPDFDownloadModalWrapper.tsx b/src/components/Modal/Global/ReportPDFDownloadModalWrapper.tsx new file mode 100644 index 000000000000..8fc1ce4b33b4 --- /dev/null +++ b/src/components/Modal/Global/ReportPDFDownloadModalWrapper.tsx @@ -0,0 +1,32 @@ +import ReportPDFDownloadModal from '@components/ReportPDFDownloadModal'; + +import React, {useState} from 'react'; + +import type {ModalProps} from './ModalContext'; + +import {ModalActions} from './ModalContext'; + +type ReportPDFDownloadModalWrapperProps = ModalProps & { + reportID: string; +}; + +function ReportPDFDownloadModalWrapper({closeModal, reportID}: ReportPDFDownloadModalWrapperProps) { + const [isVisible, setIsVisible] = useState(true); + + return ( + setIsVisible(false)} + onModalHide={() => { + if (isVisible) { + return; + } + closeModal({action: ModalActions.CLOSE}); + }} + /> + ); +} + +export default ReportPDFDownloadModalWrapper; +export type {ReportPDFDownloadModalWrapperProps}; diff --git a/src/components/Search/SearchBulkActionsButton.tsx b/src/components/Search/SearchBulkActionsButton.tsx index 168007c86c59..47b6a774d9bf 100644 --- a/src/components/Search/SearchBulkActionsButton.tsx +++ b/src/components/Search/SearchBulkActionsButton.tsx @@ -10,7 +10,6 @@ import {KYCWallContext} from '@components/KYCWall/KYCWallContext'; import type {ContinueActionParams} from '@components/KYCWall/types'; import {useLockedAccountActions, useLockedAccountState} from '@components/LockedAccountModalProvider'; import type {PopoverMenuItem} from '@components/PopoverMenu'; -import ReportPDFDownloadModal from '@components/ReportPDFDownloadModal'; import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails'; import useLayoutSpacing from '@hooks/useLayoutSpacing'; @@ -89,10 +88,6 @@ function SearchBulkActionsButton({queryJSON}: SearchBulkActionsButtonProps) { emptyReportsCount, handleOfflineModalClose, handleDownloadErrorModalClose, - isPdfModalVisible, - setIsPdfModalVisible, - pdfReportID, - handlePdfModalHide, isExpensifyCardStatementPDFModalVisible, setIsExpensifyCardStatementPDFModalVisible, expensifyCardStatementPDFParams, @@ -294,14 +289,6 @@ function SearchBulkActionsButton({queryJSON}: SearchBulkActionsButtonProps) { isVisible={isDownloadErrorModalVisible} onClose={handleDownloadErrorModalClose} /> - {!!pdfReportID && ( - setIsPdfModalVisible(false)} - onModalHide={handlePdfModalHide} - /> - )} {!!expensifyCardStatementPDFParams && ( ; + +const useReportPDFDownloadModal = () => { + const context = useModal(); + + const showReportPDFDownloadModal = (options: ReportPDFDownloadModalOptions) => { + return context.showModal({ + component: ReportPDFDownloadModalWrapper, + props: options, + }); + }; + + return {showReportPDFDownloadModal}; +}; + +export default useReportPDFDownloadModal; diff --git a/src/hooks/useSearchBulkActions.ts b/src/hooks/useSearchBulkActions.ts index f9d4ccb71e2f..4291a73a54dc 100644 --- a/src/hooks/useSearchBulkActions.ts +++ b/src/hooks/useSearchBulkActions.ts @@ -156,6 +156,7 @@ import usePermissions from './usePermissions'; import {useAllPersonalDetails} from './usePersonalDetails'; import usePersonalPolicy from './usePersonalPolicy'; import usePolicyForMovingExpenses from './usePolicyForMovingExpenses'; +import useReportPDFDownloadModal from './useReportPDFDownloadModal'; import useRestrictedActionPolicyID from './useRestrictedActionPolicyID'; import useSearchShouldCalculateTotals from './useSearchShouldCalculateTotals'; import useSelfDMReport from './useSelfDMReport'; @@ -665,13 +666,12 @@ function useSearchBulkActions({queryJSON}: UseSearchBulkActionsParams) { const [isOfflineModalVisible, setIsOfflineModalVisible] = useState(false); const [isDownloadErrorModalVisible, setIsDownloadErrorModalVisible] = useState(false); - const [isPdfModalVisible, setIsPdfModalVisible] = useState(false); - const [pdfReportID, setPdfReportID] = useState(undefined); const [isExpensifyCardStatementPDFModalVisible, setIsExpensifyCardStatementPDFModalVisible] = useState(false); const [expensifyCardStatementPDFParams, setExpensifyCardStatementPDFParams] = useState(undefined); const [isExpensifyCardStatementMultiFeedAlertVisible, setIsExpensifyCardStatementMultiFeedAlertVisible] = useState(false); const {showConfirmModal} = useConfirmModal(); const openSearchReportSubmitToPopover = useOpenSearchReportSubmitToPopover(); + const {showReportPDFDownloadModal} = useReportPDFDownloadModal(); const [isHoldEducationalModalVisible, setIsHoldEducationalModalVisible] = useState(false); const [rejectModalAction, setRejectModalAction] = useState { - setPdfReportID(undefined); - clearSelectedTransactions(); - }, [clearSelectedTransactions]); - const handleExpensifyCardStatementPDFModalHide = useCallback(() => { setExpensifyCardStatementPDFParams(undefined); // Clear the selection when the statement modal closes (after download or failure), like the other bulk @@ -3375,10 +3372,6 @@ function useSearchBulkActions({queryJSON}: UseSearchBulkActionsParams) { emptyReportsCount, handleOfflineModalClose, handleDownloadErrorModalClose, - isPdfModalVisible, - setIsPdfModalVisible, - pdfReportID, - handlePdfModalHide, isExpensifyCardStatementPDFModalVisible, setIsExpensifyCardStatementPDFModalVisible, expensifyCardStatementPDFParams,