Consolidate ConfirmModal instances into a global component v3

src/App.tsx

@@ -23,6 +23,7 @@ import {InputBlurContextProvider} from './components/InputBlurContext';
 import KeyboardProvider from './components/KeyboardProvider';
 import KYCWallContextProvider from './components/KYCWall/KYCWallContext';
 import {LocaleContextProvider} from './components/LocaleContextProvider';
+import {ModalProvider} from './components/Modal/Global/ModalContext';
 import NavigationBar from './components/NavigationBar';
 import OnyxListItemProvider from './components/OnyxListItemProvider';
 import PopoverContextProvider from './components/PopoverProvider';
@@ -124,6 +125,7 @@ function App() {
                                         InputBlurContextProvider,
                                         FullScreenBlockingViewContextProvider,
                                         FullScreenLoaderContextProvider,
+                                        ModalProvider,
                                         SidePanelContextProvider,
                                         ExpensifyCardContextProvider,
                                         KYCWallContextProvider,

src/components/ButtonWithDropdownMenu/types.ts

@@ -30,7 +30,7 @@ type DropdownOption<TValueType> = {
     iconHeight?: number;
     iconDescription?: string;
     additionalIconStyles?: StyleProp<ViewStyle>;
-    onSelected?: () => void;
+    onSelected?: () => void | Promise<void>;
     disabled?: boolean;
     iconFill?: string;
     interactive?: boolean;

src/components/ConfirmModal.tsx

@@ -219,3 +219,4 @@ function ConfirmModal({
 ConfirmModal.displayName = 'ConfirmModal';
 
 export default ConfirmModal;
+export type {ConfirmModalProps};

src/components/Modal/Global/ConfirmModalWrapper.tsx

@@ -0,0 +1,61 @@
+import React, {useState} from 'react';
+import type {ConfirmModalProps} from '@components/ConfirmModal';
+import ConfirmModal from '@components/ConfirmModal';
+import useActiveElementRole from '@hooks/useActiveElementRole';
+import useKeyboardShortcut from '@hooks/useKeyboardShortcut';
+import CONST from '@src/CONST';
+import {ModalActions} from './ModalContext';
+import type {ModalProps} from './ModalContext';
+
+type ConfirmModalWrapperProps = ModalProps & Omit<ConfirmModalProps, 'onConfirm' | 'onCancel' | 'isVisible'>;
+
+// This wrapper bridges the ConfirmModal API with the global modal system, providing handlers for the onConfirm and onCancel callbacks to ConfirmModal.
+// TODOS after migrating all ConfirmModal instances to use showConfirmModal:
+// - handle closeModal inside ConfirmModal
+// - remove ConfirmModalWrapper
+
+function ConfirmModalWrapper({closeModal, ...props}: ConfirmModalWrapperProps) {
+    const activeElementRole = useActiveElementRole();
+    const [isVisible, setIsVisible] = useState(true);
+    const [closeAction, setCloseAction] = useState<typeof ModalActions.CONFIRM | typeof ModalActions.CLOSE>(ModalActions.CLOSE);
+
+    const handleConfirm = () => {
+        setCloseAction(ModalActions.CONFIRM);
+        setIsVisible(false);
+    };
+
+    const handleCancel = () => {
+        setCloseAction(ModalActions.CLOSE);
+        setIsVisible(false);
+    };
+
+    const handleModalHide = () => {
+        if (isVisible) {
+            return;
+        }
+        closeModal({action: closeAction});
+    };
+
+    const shortcutConfig = {
+        isActive: activeElementRole !== CONST.ROLE.BUTTON,
+        shouldPreventDefault: false,
+        shouldBubble: false,
+    };
+
+    useKeyboardShortcut(CONST.KEYBOARD_SHORTCUTS.ENTER, handleConfirm, shortcutConfig);
+
+    return (
+        <ConfirmModal
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...props}
+            isVisible={isVisible}
+            onConfirm={handleConfirm}
+            onCancel={handleCancel}
+            onModalHide={handleModalHide}
+        />
+    );
+}
+
+ConfirmModalWrapper.displayName = 'ConfirmModalWrapper';
+
+export default ConfirmModalWrapper;

src/components/Modal/Global/ModalContext.tsx

@@ -0,0 +1,107 @@
+import noop from 'lodash/noop';
+import React, {useCallback, useContext, useMemo, useState} from 'react';
+import Log from '@libs/Log';
+import CONST from '@src/CONST';
+
+const ModalActions = {
+    CONFIRM: 'CONFIRM',
+    CLOSE: 'CLOSE',
+} as const;
+
+type ModalAction = (typeof ModalActions)[keyof typeof ModalActions];
+
+type ModalStateChangePayload<A extends ModalAction = ModalAction> = {action: A};
+
+type ModalProps = {
+    closeModal: (param?: ModalStateChangePayload) => void;
+};
+
+type ModalContextType = {
+    showModal<P extends ModalProps>(options: {component: React.FunctionComponent<P>; props?: Omit<P, 'closeModal'>; id?: string; isCloseable?: boolean}): Promise<ModalStateChangePayload>;
+    closeModal(data?: ModalStateChangePayload): void;
+};
+
+const ModalContext = React.createContext<ModalContextType>({
+    showModal: () => Promise.resolve({action: 'CLOSE'}),
+    closeModal: noop,
+});
+
+const useModal = () => useContext(ModalContext);
+
+let modalID = 1;
+
+type ModalInfo = {
+    id: string;
+    component: React.FunctionComponent<ModalProps>;
+    props?: Record<string, unknown>;
+    promiseWithResolvers: ReturnType<typeof Promise.withResolvers<ModalStateChangePayload>>;
+    isCloseable: boolean;
+};
+
+function ModalProvider({children}: {children: React.ReactNode}) {
+    const [modalStack, setModalStack] = useState<{modals: ModalInfo[]}>({modals: []});
+
+    const showModal = useCallback<ModalContextType['showModal']>(({component, props, id, isCloseable = true}) => {
+        // This is a promise that will resolve when the modal is closed
+        let closeModalPromise: Promise<ModalStateChangePayload> | null = null;
+
+        setModalStack((prevState) => {
+            // Check current state for existing modal
+            const existingModal = id ? prevState.modals.find((modal: ModalInfo) => modal.id === id) : undefined;
+            if (existingModal) {
+                // There is already a modal with this ID. Return the existing promise and don't modify state.
+                closeModalPromise = existingModal.promiseWithResolvers.promise;
+                return prevState; // No state change needed
+            }
+
+            // Create a new promise with resolvers to be resolved when the modal is closed
+            const promiseWithResolvers = Promise.withResolvers<ModalStateChangePayload>();
+            closeModalPromise = promiseWithResolvers.promise;
+
+            return {
+                ...prevState,
+                modals: [...prevState.modals, {component: component as React.FunctionComponent<ModalProps>, props, promiseWithResolvers, isCloseable, id: id ?? String(modalID++)}],
+            };
+        });
+
+        // At this point, closeModalPromise should always be assigned
+        if (!closeModalPromise) {
+            Log.alert(`${CONST.ERROR.ENSURE_BUG_BOT} Failed to create modal promise. This should never happen.`);
+            throw new Error('Failed to create modal promise');
+        }
+
+        return closeModalPromise;
+    }, []);
+
+    const closeModal = useCallback<ModalContextType['closeModal']>((data = {action: 'CLOSE'}) => {
+        setModalStack((prevState) => {
+            const lastModal = prevState.modals.at(-1);
+            lastModal?.promiseWithResolvers.resolve(data);
+            return {
+                ...prevState,
+                modals: prevState.modals.slice(0, -1),
+            };
+        });
+    }, []);
+
+    const contextValue = useMemo(() => ({showModal, closeModal}), [closeModal, showModal]);
+    const modalToRender = modalStack.modals.length > 0 ? modalStack.modals.at(modalStack.modals.length - 1) : null;
+    const ModalComponent = modalToRender?.component;
+
+    return (
+        <ModalContext.Provider value={contextValue}>
+            {children}
+            {!!ModalComponent && (
+                <ModalComponent
+                    // eslint-disable-next-line react/jsx-props-no-spreading
+                    {...modalToRender.props}
+                    key={modalToRender.id}
+                    closeModal={closeModal}
+                />
+            )}
+        </ModalContext.Provider>
+    );
+}
+
+export type {ModalProps};
+export {ModalProvider, useModal, ModalActions};