diff --git a/src/pages/home/report/ContextMenu/PopoverReportActionContextMenu.tsx b/src/pages/home/report/ContextMenu/PopoverReportActionContextMenu.tsx index 56f33e40a4db2..5599183ff9923 100644 --- a/src/pages/home/report/ContextMenu/PopoverReportActionContextMenu.tsx +++ b/src/pages/home/report/ContextMenu/PopoverReportActionContextMenu.tsx @@ -6,11 +6,10 @@ import type {EmitterSubscription, GestureResponderEvent, NativeTouchEvent, View} import {DeviceEventEmitter, Dimensions, InteractionManager} from 'react-native'; import type {OnyxEntry} from 'react-native-onyx'; import {Actions, ActionSheetAwareScrollViewContext} from '@components/ActionSheetAwareScrollView'; -import {ModalActions} from '@components/Modal/Global/ModalContext'; +import ConfirmModal from '@components/ConfirmModal'; import PopoverWithMeasuredContent from '@components/PopoverWithMeasuredContent'; import {useSearchContext} from '@components/Search/SearchContext'; import useAncestors from '@hooks/useAncestors'; -import useConfirmModal from '@hooks/useConfirmModal'; import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails'; import useDeleteTransactions from '@hooks/useDeleteTransactions'; import useDuplicateTransactionsAndViolations from '@hooks/useDuplicateTransactionsAndViolations'; @@ -50,7 +49,6 @@ type PopoverReportActionContextMenuProps = { function PopoverReportActionContextMenu({ref}: PopoverReportActionContextMenuProps) { const {translate} = useLocalize(); - const {showConfirmModal} = useConfirmModal(); const reportIDRef = useRef(undefined); const typeRef = useRef(undefined); const reportActionRef = useRef> | null>(null); @@ -77,6 +75,8 @@ function PopoverReportActionContextMenu({ref}: PopoverReportActionContextMenuPro const {email} = useCurrentUserPersonalDetails(); const [isPopoverVisible, setIsPopoverVisible] = useState(false); + const [isDeleteCommentConfirmModalVisible, setIsDeleteCommentConfirmModalVisible] = useState(false); + const [shouldSetModalVisibilityForDeleteConfirmation, setShouldSetModalVisibilityForDeleteConfirmation] = useState(true); const [isRoomArchived, setIsRoomArchived] = useState(false); const [isChronosReportEnabled, setIsChronosReportEnabled] = useState(false); @@ -104,6 +104,7 @@ function PopoverReportActionContextMenu({ref}: PopoverReportActionContextMenuPro const onPopoverHide = useRef(() => {}); const onEmojiPickerToggle = useRef void)>(undefined); const onCancelDeleteModal = useRef(() => {}); + const onConfirmDeleteModal = useRef(() => {}); const onPopoverHideActionCallback = useRef(() => {}); const callbackWhenDeleteModalHide = useRef(() => {}); @@ -342,7 +343,8 @@ function PopoverReportActionContextMenu({ref}: PopoverReportActionContextMenuPro } ancestorsRef.current = ancestors; }, [originalReport, ancestors]); - const performDelete = useCallback(() => { + const confirmDeleteAndHideModal = useCallback(() => { + callbackWhenDeleteModalHide.current = runAndResetCallback(onConfirmDeleteModal.current); const reportAction = reportActionRef.current; if (isMoneyRequestAction(reportAction)) { const originalMessage = getOriginalMessage(reportAction); @@ -373,6 +375,7 @@ function PopoverReportActionContextMenu({ref}: PopoverReportActionContextMenuPro } DeviceEventEmitter.emit(`deletedReportAction_${reportIDRef.current}`, reportAction?.reportActionID); + setIsDeleteCommentConfirmModalVisible(false); }, [ report, iouReport, @@ -383,48 +386,33 @@ function PopoverReportActionContextMenu({ref}: PopoverReportActionContextMenuPro isChatIOUReportArchived, deleteTransactions, currentSearchHash, - isOriginalReportArchived, email, reportTransactions, violations, + isOriginalReportArchived, ]); - const hideDeleteModal = useCallback(() => { + const hideDeleteModal = () => { callbackWhenDeleteModalHide.current = () => (onCancelDeleteModal.current = runAndResetCallback(onCancelDeleteModal.current)); + setIsDeleteCommentConfirmModalVisible(false); + setShouldSetModalVisibilityForDeleteConfirmation(true); setIsRoomArchived(false); setIsChronosReportEnabled(false); setIsChatPinned(false); setHasUnreadMessages(false); - }, []); + }; /** Opens the Confirm delete action modal */ - const showDeleteModal: ReportActionContextMenu['showDeleteModal'] = useCallback( - async (reportID, reportAction, shouldSetModalVisibility = true, onConfirm = () => {}, onCancel = () => {}) => { - reportIDRef.current = reportID; - reportActionRef.current = reportAction ?? null; - - const result = await showConfirmModal({ - title: translate('reportActionContextMenu.deleteAction', {action: reportAction}), - prompt: translate('reportActionContextMenu.deleteConfirmation', {action: reportAction}), - confirmText: translate('common.delete'), - cancelText: translate('common.cancel'), - danger: true, - shouldSetModalVisibility, - }); + const showDeleteModal: ReportActionContextMenu['showDeleteModal'] = (reportID, reportAction, shouldSetModalVisibility = true, onConfirm = () => {}, onCancel = () => {}) => { + onCancelDeleteModal.current = onCancel; - if (result.action === ModalActions.CONFIRM) { - onConfirm(); - performDelete(); - } else { - onCancel(); - } + onConfirmDeleteModal.current = onConfirm; + reportIDRef.current = reportID; + reportActionRef.current = reportAction ?? null; - // Clear refs and run callbacks AFTER the action is performed - clearActiveReportAction(); - callbackWhenDeleteModalHide.current(); - }, - [showConfirmModal, translate, performDelete], - ); + setShouldSetModalVisibilityForDeleteConfirmation(shouldSetModalVisibility); + setIsDeleteCommentConfirmModalVisible(true); + }; useImperativeHandle(ref, () => ({ showContextMenu, @@ -440,41 +428,60 @@ function PopoverReportActionContextMenu({ref}: PopoverReportActionContextMenuPro composerToRefocusOnCloseEmojiPicker: composerToRefocusOnClose, })); + const reportAction = reportActionRef.current; + return ( - hideContextMenu()} - onModalShow={runAndResetOnPopoverShow} - onModalHide={runAndResetOnPopoverHide} - anchorPosition={popoverAnchorPosition.current} - animationIn="fadeIn" - disableAnimation={false} - shouldSetModalVisibility={false} - fullscreen - withoutOverlay={isWithoutOverlay} - anchorDimensions={contextMenuDimensions.current} - anchorRef={anchorRef} - shouldSwitchPositionIfOverflow={shouldSwitchPositionIfOverflow} - > - + hideContextMenu()} + onModalShow={runAndResetOnPopoverShow} + onModalHide={runAndResetOnPopoverHide} + anchorPosition={popoverAnchorPosition.current} + animationIn="fadeIn" + disableAnimation={false} + shouldSetModalVisibility={false} + fullscreen + withoutOverlay={isWithoutOverlay} + anchorDimensions={contextMenuDimensions.current} + anchorRef={anchorRef} + shouldSwitchPositionIfOverflow={shouldSwitchPositionIfOverflow} + > + + + { + clearActiveReportAction(); + callbackWhenDeleteModalHide.current(); + }} + prompt={translate('reportActionContextMenu.deleteConfirmation', {action: reportAction})} + confirmText={translate('common.delete')} + cancelText={translate('common.cancel')} + danger /> - + ); } diff --git a/src/pages/home/report/ContextMenu/ReportActionContextMenu.ts b/src/pages/home/report/ContextMenu/ReportActionContextMenu.ts index 10c53353cd110..2da4ac2bbffc8 100644 --- a/src/pages/home/report/ContextMenu/ReportActionContextMenu.ts +++ b/src/pages/home/report/ContextMenu/ReportActionContextMenu.ts @@ -58,7 +58,7 @@ type HideContextMenu = (params?: HideContextMenuParams) => void; type ReportActionContextMenu = { showContextMenu: ShowContextMenu; hideContextMenu: HideContextMenu; - showDeleteModal: (reportID: string, reportAction: OnyxEntry, shouldSetModalVisibility?: boolean, onConfirm?: OnConfirm, onCancel?: OnCancel) => Promise; + showDeleteModal: (reportID: string, reportAction: OnyxEntry, shouldSetModalVisibility?: boolean, onConfirm?: OnConfirm, onCancel?: OnCancel) => void; hideDeleteModal: () => void; isActiveReportAction: (accountID: string | number) => boolean; instanceIDRef: RefObject;