From 672aa0e31b1ab600e83911084f99f00a5dbb2636 Mon Sep 17 00:00:00 2001
From: Xiao Yijun <xiaoyijun@silverhand.io>
Date: Tue, 16 Jul 2024 15:02:55 +0800
Subject: [PATCH 1/2] refactor(experience): support and apply modal loading
 state

---
 .../Providers/ConfirmModalProvider/index.tsx  | 110 ++++++---
 .../ConfirmModalProvider/indext.test.tsx      | 210 +++++++++++++-----
 .../src/components/ConfirmModal/AcModal.tsx   |   2 +
 .../components/ConfirmModal/MobileModal.tsx   |   8 +-
 .../src/components/ConfirmModal/type.ts       |   1 +
 .../use-identifier-error-alert.ts             |   4 +-
 .../use-link-social-confirm-modal.ts          |  16 +-
 .../use-register-flow-code-verification.ts    |  36 ++-
 .../use-sign-in-flow-code-verification.ts     |  40 ++--
 .../experience/src/hooks/use-confirm-modal.ts |  46 +++-
 packages/experience/src/hooks/use-terms.ts    |   4 +-
 .../src/pages/Continue/SetPassword/index.tsx  |   4 +-
 .../src/pages/RegisterPassword/index.tsx      |   4 +-
 .../src/pages/ResetPassword/index.tsx         |   4 +-
 14 files changed, 335 insertions(+), 154 deletions(-)

diff --git a/packages/experience/src/Providers/ConfirmModalProvider/index.tsx b/packages/experience/src/Providers/ConfirmModalProvider/index.tsx
index 1a2bd1377c1..97b2154c2c4 100644
--- a/packages/experience/src/Providers/ConfirmModalProvider/index.tsx
+++ b/packages/experience/src/Providers/ConfirmModalProvider/index.tsx
@@ -6,30 +6,37 @@ import type { ModalProps } from '@/components/ConfirmModal';
 import { WebModal, MobileModal } from '@/components/ConfirmModal';
 import usePlatform from '@/hooks/use-platform';
 
-export type ModalContentRenderProps = {
-  confirm: (data?: unknown) => void;
-  cancel: (data?: unknown) => void;
-};
-
 type ConfirmModalType = 'alert' | 'confirm';
 
 type ConfirmModalState = Omit<ModalProps, 'onClose' | 'onConfirm' | 'children'> & {
-  ModalContent: string | ((props: ModalContentRenderProps) => Nullable<JSX.Element>);
+  ModalContent: string | (() => Nullable<JSX.Element>);
   type: ConfirmModalType;
+  isConfirmLoading?: boolean;
 };
 
-type ConfirmModalProps = Omit<ConfirmModalState, 'isOpen' | 'type'> & { type?: ConfirmModalType };
+/**
+ * Props for promise-based modal usage
+ */
+type PromiseConfirmModalProps = Omit<ConfirmModalState, 'isOpen' | 'type' | 'isConfirmLoading'> & {
+  type?: ConfirmModalType;
+};
+
+/**
+ * Props for callback-based modal usage
+ */
+export type CallbackConfirmModalProps = PromiseConfirmModalProps & {
+  onConfirm?: () => Promise<void> | void;
+  onCancel?: () => void;
+};
 
 type ConfirmModalContextType = {
-  show: (props: ConfirmModalProps) => Promise<[boolean, unknown?]>;
-  confirm: (data?: unknown) => void;
-  cancel: (data?: unknown) => void;
+  showPromise: (props: PromiseConfirmModalProps) => Promise<[boolean, unknown?]>;
+  showCallback: (props: CallbackConfirmModalProps) => void;
 };
 
 export const ConfirmModalContext = createContext<ConfirmModalContextType>({
-  show: async () => [true],
-  confirm: noop,
-  cancel: noop,
+  showPromise: async () => [true],
+  showCallback: noop,
 });
 
 type Props = {
@@ -40,49 +47,86 @@ const defaultModalState: ConfirmModalState = {
   isOpen: false,
   type: 'confirm',
   ModalContent: () => null,
+  isConfirmLoading: false,
 };
 
+/**
+ * ConfirmModalProvider component
+ *
+ * This component provides a context for managing confirm modals throughout the application.
+ * It supports both promise-based and callback-based usage patterns. see `usePromiseConfirmModal` and `useConfirmModal` hooks.
+ */
 const ConfirmModalProvider = ({ children }: Props) => {
   const [modalState, setModalState] = useState<ConfirmModalState>(defaultModalState);
 
   const resolver = useRef<(value: [result: boolean, data?: unknown]) => void>();
+  const callbackRef = useRef<{
+    onConfirm?: () => Promise<void> | void;
+    onCancel?: () => void;
+  }>({});
 
   const { isMobile } = usePlatform();
 
   const ConfirmModal = isMobile ? MobileModal : WebModal;
 
-  const handleShow = useCallback(async ({ type = 'confirm', ...props }: ConfirmModalProps) => {
-    resolver.current?.([false]);
+  const handleShowPromise = useCallback(
+    async ({ type = 'confirm', ...props }: PromiseConfirmModalProps) => {
+      resolver.current?.([false]);
+
+      setModalState({
+        isOpen: true,
+        type,
+        isConfirmLoading: false,
+        ...props,
+      });
+
+      return new Promise<[result: boolean, data?: unknown]>((resolve) => {
+        // eslint-disable-next-line @silverhand/fp/no-mutation
+        resolver.current = resolve;
+      });
+    },
+    []
+  );
+
+  const handleShowCallback = useCallback(
+    ({ type = 'confirm', onConfirm, onCancel, ...props }: CallbackConfirmModalProps) => {
+      resolver.current?.([false]);
 
-    setModalState({
-      isOpen: true,
-      type,
-      ...props,
-    });
+      setModalState({
+        isOpen: true,
+        type,
+        isConfirmLoading: false,
+        ...props,
+      });
 
-    return new Promise<[result: boolean, data?: unknown]>((resolve) => {
       // eslint-disable-next-line @silverhand/fp/no-mutation
-      resolver.current = resolve;
-    });
-  }, []);
+      callbackRef.current = { onConfirm, onCancel };
+    },
+    []
+  );
 
-  const handleConfirm = useCallback((data?: unknown) => {
+  const handleConfirm = useCallback(async (data?: unknown) => {
+    if (callbackRef.current.onConfirm) {
+      setModalState((previous) => ({ ...previous, isConfirmLoading: true }));
+      await callbackRef.current.onConfirm();
+      setModalState((previous) => ({ ...previous, isConfirmLoading: false }));
+    }
     resolver.current?.([true, data]);
     setModalState(defaultModalState);
   }, []);
 
   const handleCancel = useCallback((data?: unknown) => {
+    callbackRef.current.onCancel?.();
     resolver.current?.([false, data]);
     setModalState(defaultModalState);
   }, []);
 
   const contextValue = useMemo(
     () => ({
-      show: handleShow,
-      confirm: handleConfirm,
-      cancel: handleCancel,
+      showPromise: handleShowPromise,
+      showCallback: handleShowCallback,
     }),
-    [handleCancel, handleConfirm, handleShow]
+    [handleShowPromise, handleShowCallback]
   );
 
   const { ModalContent, type, ...restProps } = modalState;
@@ -95,7 +139,7 @@ const ConfirmModalProvider = ({ children }: Props) => {
         onConfirm={
           type === 'confirm'
             ? () => {
-                handleConfirm();
+                void handleConfirm();
               }
             : undefined
         }
@@ -103,11 +147,7 @@ const ConfirmModalProvider = ({ children }: Props) => {
           handleCancel();
         }}
       >
-        {typeof ModalContent === 'string' ? (
-          ModalContent
-        ) : (
-          <ModalContent confirm={handleConfirm} cancel={handleCancel} />
-        )}
+        {typeof ModalContent === 'string' ? ModalContent : <ModalContent />}
       </ConfirmModal>
     </ConfirmModalContext.Provider>
   );
diff --git a/packages/experience/src/Providers/ConfirmModalProvider/indext.test.tsx b/packages/experience/src/Providers/ConfirmModalProvider/indext.test.tsx
index 16072159eb3..acb80bd8064 100644
--- a/packages/experience/src/Providers/ConfirmModalProvider/indext.test.tsx
+++ b/packages/experience/src/Providers/ConfirmModalProvider/indext.test.tsx
@@ -1,15 +1,15 @@
 import { render, fireEvent, waitFor } from '@testing-library/react';
 import { act } from 'react-dom/test-utils';
 
-import { useConfirmModal } from '@/hooks/use-confirm-modal';
+import { useConfirmModal, usePromiseConfirmModal } from '@/hooks/use-confirm-modal';
 
 import ConfirmModalProvider from '.';
 
 const confirmHandler = jest.fn();
 const cancelHandler = jest.fn();
 
-const ConfirmModalTestComponent = () => {
-  const { show } = useConfirmModal();
+const PromiseConfirmModalTestComponent = () => {
+  const { show } = usePromiseConfirmModal();
 
   const onClick = async () => {
     const [result] = await show({ ModalContent: 'confirm modal content' });
@@ -26,82 +26,178 @@ const ConfirmModalTestComponent = () => {
   return <button onClick={onClick}>show modal</button>;
 };
 
-describe('confirm modal provider', () => {
-  it('render confirm modal', async () => {
-    const { queryByText, getByText } = render(
-      <ConfirmModalProvider>
-        <ConfirmModalTestComponent />
-      </ConfirmModalProvider>
-    );
-
-    const trigger = getByText('show modal');
+const CallbackConfirmModalTestComponent = () => {
+  const { show } = useConfirmModal();
 
-    act(() => {
-      fireEvent.click(trigger);
+  const onClick = () => {
+    show({
+      ModalContent: 'confirm modal content',
+      onConfirm: confirmHandler,
+      onCancel: cancelHandler,
     });
+  };
+
+  return <button onClick={onClick}>show modal</button>;
+};
 
-    await waitFor(() => {
-      expect(queryByText('confirm modal content')).not.toBeNull();
-      expect(queryByText('action.confirm')).not.toBeNull();
-      expect(queryByText('action.cancel')).not.toBeNull();
+describe('confirm modal provider', () => {
+  describe('promise confirm modal', () => {
+    it('render confirm modal', async () => {
+      const { queryByText, getByText } = render(
+        <ConfirmModalProvider>
+          <PromiseConfirmModalTestComponent />
+        </ConfirmModalProvider>
+      );
+
+      const trigger = getByText('show modal');
+
+      act(() => {
+        fireEvent.click(trigger);
+      });
+
+      await waitFor(() => {
+        expect(queryByText('confirm modal content')).not.toBeNull();
+        expect(queryByText('action.confirm')).not.toBeNull();
+        expect(queryByText('action.cancel')).not.toBeNull();
+      });
     });
-  });
 
-  it('confirm callback of confirm modal', async () => {
-    const { queryByText, getByText } = render(
-      <ConfirmModalProvider>
-        <ConfirmModalTestComponent />
-      </ConfirmModalProvider>
-    );
+    it('confirm callback of confirm modal', async () => {
+      const { queryByText, getByText } = render(
+        <ConfirmModalProvider>
+          <PromiseConfirmModalTestComponent />
+        </ConfirmModalProvider>
+      );
 
-    const trigger = getByText('show modal');
+      const trigger = getByText('show modal');
 
-    act(() => {
-      fireEvent.click(trigger);
-    });
+      act(() => {
+        fireEvent.click(trigger);
+      });
 
-    await waitFor(() => {
-      expect(queryByText('confirm modal content')).not.toBeNull();
-      expect(queryByText('action.confirm')).not.toBeNull();
-    });
+      await waitFor(() => {
+        expect(queryByText('confirm modal content')).not.toBeNull();
+        expect(queryByText('action.confirm')).not.toBeNull();
+      });
 
-    const confirm = getByText('action.confirm');
+      const confirm = getByText('action.confirm');
 
-    act(() => {
-      fireEvent.click(confirm);
-    });
+      act(() => {
+        fireEvent.click(confirm);
+      });
 
-    await waitFor(() => {
-      expect(confirmHandler).toBeCalled();
+      await waitFor(() => {
+        expect(confirmHandler).toBeCalled();
+      });
     });
-  });
 
-  it('cancel callback of confirm modal', async () => {
-    const { queryByText, getByText } = render(
-      <ConfirmModalProvider>
-        <ConfirmModalTestComponent />
-      </ConfirmModalProvider>
-    );
+    it('cancel callback of confirm modal', async () => {
+      const { queryByText, getByText } = render(
+        <ConfirmModalProvider>
+          <PromiseConfirmModalTestComponent />
+        </ConfirmModalProvider>
+      );
+
+      const trigger = getByText('show modal');
 
-    const trigger = getByText('show modal');
+      act(() => {
+        fireEvent.click(trigger);
+      });
 
-    act(() => {
-      fireEvent.click(trigger);
+      await waitFor(() => {
+        expect(queryByText('confirm modal content')).not.toBeNull();
+        expect(queryByText('action.cancel')).not.toBeNull();
+      });
+
+      const cancel = getByText('action.cancel');
+
+      act(() => {
+        fireEvent.click(cancel);
+      });
+
+      await waitFor(() => {
+        expect(cancelHandler).toBeCalled();
+      });
     });
+  });
 
-    await waitFor(() => {
-      expect(queryByText('confirm modal content')).not.toBeNull();
-      expect(queryByText('action.cancel')).not.toBeNull();
+  describe('callback confirm modal', () => {
+    it('render confirm modal', async () => {
+      const { queryByText, getByText } = render(
+        <ConfirmModalProvider>
+          <CallbackConfirmModalTestComponent />
+        </ConfirmModalProvider>
+      );
+
+      const trigger = getByText('show modal');
+
+      act(() => {
+        fireEvent.click(trigger);
+      });
+
+      await waitFor(() => {
+        expect(queryByText('confirm modal content')).not.toBeNull();
+        expect(queryByText('action.confirm')).not.toBeNull();
+        expect(queryByText('action.cancel')).not.toBeNull();
+      });
     });
 
-    const cancel = getByText('action.cancel');
+    it('confirm callback of confirm modal', async () => {
+      const { queryByText, getByText } = render(
+        <ConfirmModalProvider>
+          <CallbackConfirmModalTestComponent />
+        </ConfirmModalProvider>
+      );
+
+      const trigger = getByText('show modal');
+
+      act(() => {
+        fireEvent.click(trigger);
+      });
+
+      await waitFor(() => {
+        expect(queryByText('confirm modal content')).not.toBeNull();
+        expect(queryByText('action.confirm')).not.toBeNull();
+      });
+
+      const confirm = getByText('action.confirm');
 
-    act(() => {
-      fireEvent.click(cancel);
+      act(() => {
+        fireEvent.click(confirm);
+      });
+
+      await waitFor(() => {
+        expect(confirmHandler).toBeCalled();
+      });
     });
 
-    await waitFor(() => {
-      expect(cancelHandler).toBeCalled();
+    it('cancel callback of confirm modal', async () => {
+      const { queryByText, getByText } = render(
+        <ConfirmModalProvider>
+          <CallbackConfirmModalTestComponent />
+        </ConfirmModalProvider>
+      );
+
+      const trigger = getByText('show modal');
+
+      act(() => {
+        fireEvent.click(trigger);
+      });
+
+      await waitFor(() => {
+        expect(queryByText('confirm modal content')).not.toBeNull();
+        expect(queryByText('action.cancel')).not.toBeNull();
+      });
+
+      const cancel = getByText('action.cancel');
+
+      act(() => {
+        fireEvent.click(cancel);
+      });
+
+      await waitFor(() => {
+        expect(cancelHandler).toBeCalled();
+      });
     });
   });
 });
diff --git a/packages/experience/src/components/ConfirmModal/AcModal.tsx b/packages/experience/src/components/ConfirmModal/AcModal.tsx
index 0f7ce45977e..ce9a1762e30 100644
--- a/packages/experience/src/components/ConfirmModal/AcModal.tsx
+++ b/packages/experience/src/components/ConfirmModal/AcModal.tsx
@@ -16,6 +16,7 @@ import type { ModalProps } from './type';
 const AcModal = ({
   className,
   isOpen = false,
+  isConfirmLoading = false,
   children,
   cancelText = 'action.cancel',
   confirmText = 'action.confirm',
@@ -69,6 +70,7 @@ const AcModal = ({
               title={confirmText}
               i18nProps={confirmTextI18nProps}
               size="small"
+              isLoading={isConfirmLoading}
               onClick={onConfirm}
             />
           )}
diff --git a/packages/experience/src/components/ConfirmModal/MobileModal.tsx b/packages/experience/src/components/ConfirmModal/MobileModal.tsx
index 9b398da3cb7..a22b105abb2 100644
--- a/packages/experience/src/components/ConfirmModal/MobileModal.tsx
+++ b/packages/experience/src/components/ConfirmModal/MobileModal.tsx
@@ -11,6 +11,7 @@ import type { ModalProps } from './type';
 const MobileModal = ({
   className,
   isOpen = false,
+  isConfirmLoading = false,
   children,
   cancelText = 'action.cancel',
   confirmText = 'action.confirm',
@@ -38,7 +39,12 @@ const MobileModal = ({
             onClick={onClose}
           />
           {onConfirm && (
-            <Button title={confirmText} i18nProps={confirmTextI18nProps} onClick={onConfirm} />
+            <Button
+              title={confirmText}
+              i18nProps={confirmTextI18nProps}
+              isLoading={isConfirmLoading}
+              onClick={onConfirm}
+            />
           )}
         </div>
       </div>
diff --git a/packages/experience/src/components/ConfirmModal/type.ts b/packages/experience/src/components/ConfirmModal/type.ts
index a9a00577def..c54233d2228 100644
--- a/packages/experience/src/components/ConfirmModal/type.ts
+++ b/packages/experience/src/components/ConfirmModal/type.ts
@@ -4,6 +4,7 @@ import type { ReactNode } from 'react';
 export type ModalProps = {
   className?: string;
   isOpen?: boolean;
+  isConfirmLoading?: boolean;
   children: ReactNode;
   cancelText?: TFuncKey;
   confirmText?: TFuncKey;
diff --git a/packages/experience/src/containers/VerificationCode/use-identifier-error-alert.ts b/packages/experience/src/containers/VerificationCode/use-identifier-error-alert.ts
index d92038ea305..eadd214e864 100644
--- a/packages/experience/src/containers/VerificationCode/use-identifier-error-alert.ts
+++ b/packages/experience/src/containers/VerificationCode/use-identifier-error-alert.ts
@@ -3,7 +3,7 @@ import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 
-import { useConfirmModal } from '@/hooks/use-confirm-modal';
+import { usePromiseConfirmModal } from '@/hooks/use-confirm-modal';
 import type { VerificationCodeIdentifier } from '@/types';
 import { formatPhoneNumberWithCountryCallingCode } from '@/utils/country-code';
 
@@ -13,7 +13,7 @@ export enum IdentifierErrorType {
 }
 
 const useIdentifierErrorAlert = () => {
-  const { show } = useConfirmModal();
+  const { show } = usePromiseConfirmModal();
   const navigate = useNavigate();
   const { t } = useTranslation();
 
diff --git a/packages/experience/src/containers/VerificationCode/use-link-social-confirm-modal.ts b/packages/experience/src/containers/VerificationCode/use-link-social-confirm-modal.ts
index 39fb7dc04aa..210ea554115 100644
--- a/packages/experience/src/containers/VerificationCode/use-link-social-confirm-modal.ts
+++ b/packages/experience/src/containers/VerificationCode/use-link-social-confirm-modal.ts
@@ -16,7 +16,7 @@ const useLinkSocialConfirmModal = () => {
 
   return useCallback(
     async (method: VerificationCodeIdentifier, target: string, connectorId: string) => {
-      const [confirm] = await show({
+      show({
         confirmText: 'action.bind_and_continue',
         cancelText: 'action.change',
         cancelTextI18nProps: {
@@ -29,15 +29,13 @@ const useLinkSocialConfirmModal = () => {
               ? formatPhoneNumberWithCountryCallingCode(target)
               : target,
         }),
+        onConfirm: async () => {
+          await linkWithSocial(connectorId);
+        },
+        onCancel: () => {
+          navigate(-1);
+        },
       });
-
-      if (!confirm) {
-        navigate(-1);
-
-        return;
-      }
-
-      await linkWithSocial(connectorId);
     },
     [linkWithSocial, navigate, show, t]
   );
diff --git a/packages/experience/src/containers/VerificationCode/use-register-flow-code-verification.ts b/packages/experience/src/containers/VerificationCode/use-register-flow-code-verification.ts
index 1608c2336b0..0dec679a846 100644
--- a/packages/experience/src/containers/VerificationCode/use-register-flow-code-verification.ts
+++ b/packages/experience/src/containers/VerificationCode/use-register-flow-code-verification.ts
@@ -50,7 +50,7 @@ const useRegisterFlowCodeVerification = (
       return;
     }
 
-    const [confirm] = await show({
+    show({
       confirmText: 'action.sign_in',
       ModalContent: t('description.create_account_id_exists', {
         type: t(`description.${method === SignInIdentifier.Email ? 'email' : 'phone_number'}`),
@@ -59,25 +59,23 @@ const useRegisterFlowCodeVerification = (
             ? formatPhoneNumberWithCountryCallingCode(target)
             : target,
       }),
+      onConfirm: async () => {
+        const [error, result] = await signInWithIdentifierAsync();
+
+        if (error) {
+          await handleError(error, preSignInErrorHandler);
+
+          return;
+        }
+
+        if (result?.redirectTo) {
+          redirectTo(result.redirectTo);
+        }
+      },
+      onCancel: () => {
+        navigate(-1);
+      },
     });
-
-    if (!confirm) {
-      navigate(-1);
-
-      return;
-    }
-
-    const [error, result] = await signInWithIdentifierAsync();
-
-    if (error) {
-      await handleError(error, preSignInErrorHandler);
-
-      return;
-    }
-
-    if (result?.redirectTo) {
-      redirectTo(result.redirectTo);
-    }
   }, [
     handleError,
     method,
diff --git a/packages/experience/src/containers/VerificationCode/use-sign-in-flow-code-verification.ts b/packages/experience/src/containers/VerificationCode/use-sign-in-flow-code-verification.ts
index 4c410e91f3c..16a6e0f7f99 100644
--- a/packages/experience/src/containers/VerificationCode/use-sign-in-flow-code-verification.ts
+++ b/packages/experience/src/containers/VerificationCode/use-sign-in-flow-code-verification.ts
@@ -51,7 +51,7 @@ const useSignInFlowCodeVerification = (
       return;
     }
 
-    const [confirm] = await show({
+    show({
       confirmText: 'action.create',
       ModalContent: t('description.sign_in_id_does_not_exist', {
         type: t(`description.${method === SignInIdentifier.Email ? 'email' : 'phone_number'}`),
@@ -60,27 +60,25 @@ const useSignInFlowCodeVerification = (
             ? formatPhoneNumberWithCountryCallingCode(target)
             : target,
       }),
+      onConfirm: async () => {
+        const [error, result] = await registerWithIdentifierAsync(
+          method === SignInIdentifier.Email ? { email: target } : { phone: target }
+        );
+
+        if (error) {
+          await handleError(error, preSignInErrorHandler);
+
+          return;
+        }
+
+        if (result?.redirectTo) {
+          redirectTo(result.redirectTo);
+        }
+      },
+      onCancel: () => {
+        navigate(-1);
+      },
     });
-
-    if (!confirm) {
-      navigate(-1);
-
-      return;
-    }
-
-    const [error, result] = await registerWithIdentifierAsync(
-      method === SignInIdentifier.Email ? { email: target } : { phone: target }
-    );
-
-    if (error) {
-      await handleError(error, preSignInErrorHandler);
-
-      return;
-    }
-
-    if (result?.redirectTo) {
-      redirectTo(result.redirectTo);
-    }
   }, [
     signInMode,
     show,
diff --git a/packages/experience/src/hooks/use-confirm-modal.ts b/packages/experience/src/hooks/use-confirm-modal.ts
index 81521b48130..6be4cce5efd 100644
--- a/packages/experience/src/hooks/use-confirm-modal.ts
+++ b/packages/experience/src/hooks/use-confirm-modal.ts
@@ -2,6 +2,48 @@ import { useContext } from 'react';
 
 import { ConfirmModalContext } from '@/Providers/ConfirmModalProvider';
 
-export type { ModalContentRenderProps } from '@/Providers/ConfirmModalProvider';
+/**
+ * Hook for using the promise-based confirm modal
+ *
+ * @returns An object with a `show` method that returns a promise
+ *
+ * Example:
+ * ```ts
+ * const { show } = usePromiseConfirmModal();
+ * const [result] = await show({ ModalContent: 'Are you sure?' });
+ * if (result) {
+ *   // User confirmed
+ * }
+ *```
+ */
+export const usePromiseConfirmModal = () => {
+  const { showPromise } = useContext(ConfirmModalContext);
 
-export const useConfirmModal = () => useContext(ConfirmModalContext);
+  return { show: showPromise };
+};
+
+/**
+ * Hook for using the callback-based confirm modal
+ *
+ * @returns An object with a `show` method that accepts callbacks
+ *
+ * Example:
+ * ```ts
+ * const { show } = useConfirmModal();
+ * show({
+ *  ModalContent: 'Are you sure?',
+ *  onConfirm: async () => {
+ *    // This will automatically set the confirm button to loading state
+ *    await someAsyncOperation();
+ *  },
+ *  onCancel: () => {
+ *    // Handle cancellation
+ *  }
+ * });
+ * ```
+ */
+export const useConfirmModal = () => {
+  const { showCallback } = useContext(ConfirmModalContext);
+
+  return { show: showCallback };
+};
diff --git a/packages/experience/src/hooks/use-terms.ts b/packages/experience/src/hooks/use-terms.ts
index dd95c03aef9..c94ae23083d 100644
--- a/packages/experience/src/hooks/use-terms.ts
+++ b/packages/experience/src/hooks/use-terms.ts
@@ -5,11 +5,11 @@ import { useCallback, useContext, useMemo } from 'react';
 import PageContext from '@/Providers/PageContextProvider/PageContext';
 import TermsAndPrivacyConfirmModalContent from '@/containers/TermsAndPrivacyConfirmModalContent';
 
-import { useConfirmModal } from './use-confirm-modal';
+import { usePromiseConfirmModal } from './use-confirm-modal';
 
 const useTerms = () => {
   const { termsAgreement, setTermsAgreement, experienceSettings } = useContext(PageContext);
-  const { show } = useConfirmModal();
+  const { show } = usePromiseConfirmModal();
 
   const { termsOfUseUrl, privacyPolicyUrl, isTermsDisabled, agreeToTermsPolicy } = useMemo(() => {
     const { termsOfUseUrl, privacyPolicyUrl, agreeToTermsPolicy } = experienceSettings ?? {};
diff --git a/packages/experience/src/pages/Continue/SetPassword/index.tsx b/packages/experience/src/pages/Continue/SetPassword/index.tsx
index a76f374d8e8..64530f584ee 100644
--- a/packages/experience/src/pages/Continue/SetPassword/index.tsx
+++ b/packages/experience/src/pages/Continue/SetPassword/index.tsx
@@ -4,7 +4,7 @@ import { useNavigate } from 'react-router-dom';
 import SecondaryPageLayout from '@/Layout/SecondaryPageLayout';
 import { addProfile } from '@/apis/interaction';
 import SetPasswordForm from '@/containers/SetPassword';
-import { useConfirmModal } from '@/hooks/use-confirm-modal';
+import { usePromiseConfirmModal } from '@/hooks/use-confirm-modal';
 import type { ErrorHandlers } from '@/hooks/use-error-handler';
 import useGlobalRedirectTo from '@/hooks/use-global-redirect-to';
 import usePasswordAction, { type SuccessHandler } from '@/hooks/use-password-action';
@@ -18,7 +18,7 @@ const SetPassword = () => {
   }, []);
 
   const navigate = useNavigate();
-  const { show } = useConfirmModal();
+  const { show } = usePromiseConfirmModal();
   const redirectTo = useGlobalRedirectTo();
 
   const preSignInErrorHandler = usePreSignInErrorHandler();
diff --git a/packages/experience/src/pages/RegisterPassword/index.tsx b/packages/experience/src/pages/RegisterPassword/index.tsx
index 0a9443c3fb3..b276b2c4ea9 100644
--- a/packages/experience/src/pages/RegisterPassword/index.tsx
+++ b/packages/experience/src/pages/RegisterPassword/index.tsx
@@ -5,7 +5,7 @@ import { useNavigate } from 'react-router-dom';
 import SecondaryPageLayout from '@/Layout/SecondaryPageLayout';
 import { setUserPassword } from '@/apis/interaction';
 import SetPassword from '@/containers/SetPassword';
-import { useConfirmModal } from '@/hooks/use-confirm-modal';
+import { usePromiseConfirmModal } from '@/hooks/use-confirm-modal';
 import { type ErrorHandlers } from '@/hooks/use-error-handler';
 import useGlobalRedirectTo from '@/hooks/use-global-redirect-to';
 import useMfaErrorHandler from '@/hooks/use-mfa-error-handler';
@@ -19,7 +19,7 @@ const RegisterPassword = () => {
 
   const navigate = useNavigate();
   const redirectTo = useGlobalRedirectTo();
-  const { show } = useConfirmModal();
+  const { show } = usePromiseConfirmModal();
   const [errorMessage, setErrorMessage] = useState<string>();
   const clearErrorMessage = useCallback(() => {
     setErrorMessage(undefined);
diff --git a/packages/experience/src/pages/ResetPassword/index.tsx b/packages/experience/src/pages/ResetPassword/index.tsx
index 26b415705d2..39756686150 100644
--- a/packages/experience/src/pages/ResetPassword/index.tsx
+++ b/packages/experience/src/pages/ResetPassword/index.tsx
@@ -6,7 +6,7 @@ import SecondaryPageLayout from '@/Layout/SecondaryPageLayout';
 import UserInteractionContext from '@/Providers/UserInteractionContextProvider/UserInteractionContext';
 import { setUserPassword } from '@/apis/interaction';
 import SetPassword from '@/containers/SetPassword';
-import { useConfirmModal } from '@/hooks/use-confirm-modal';
+import { usePromiseConfirmModal } from '@/hooks/use-confirm-modal';
 import { type ErrorHandlers } from '@/hooks/use-error-handler';
 import usePasswordAction, { type SuccessHandler } from '@/hooks/use-password-action';
 import { usePasswordPolicy } from '@/hooks/use-sie';
@@ -20,7 +20,7 @@ const ResetPassword = () => {
   const { t } = useTranslation();
   const { setToast } = useToast();
   const navigate = useNavigate();
-  const { show } = useConfirmModal();
+  const { show } = usePromiseConfirmModal();
   const { setForgotPasswordIdentifierInputValue } = useContext(UserInteractionContext);
   const errorHandlers: ErrorHandlers = useMemo(
     () => ({

From 2e2a862aa5ab21f312487f6109c2cf16117dfad5 Mon Sep 17 00:00:00 2001
From: Xiao Yijun <xiaoyijun@silverhand.io>
Date: Wed, 17 Jul 2024 11:21:32 +0800
Subject: [PATCH 2/2] feat(experience): support cancel loading for modal

---
 .../Providers/ConfirmModalProvider/index.tsx    | 17 +++++++++++------
 .../src/components/ConfirmModal/AcModal.tsx     |  2 ++
 .../src/components/ConfirmModal/MobileModal.tsx |  2 ++
 .../src/components/ConfirmModal/type.ts         |  1 +
 .../experience/src/hooks/use-confirm-modal.ts   |  5 +++--
 5 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/packages/experience/src/Providers/ConfirmModalProvider/index.tsx b/packages/experience/src/Providers/ConfirmModalProvider/index.tsx
index 97b2154c2c4..5836a5c87a8 100644
--- a/packages/experience/src/Providers/ConfirmModalProvider/index.tsx
+++ b/packages/experience/src/Providers/ConfirmModalProvider/index.tsx
@@ -12,6 +12,7 @@ type ConfirmModalState = Omit<ModalProps, 'onClose' | 'onConfirm' | 'children'>
   ModalContent: string | (() => Nullable<JSX.Element>);
   type: ConfirmModalType;
   isConfirmLoading?: boolean;
+  isCancelLoading?: boolean;
 };
 
 /**
@@ -26,7 +27,7 @@ type PromiseConfirmModalProps = Omit<ConfirmModalState, 'isOpen' | 'type' | 'isC
  */
 export type CallbackConfirmModalProps = PromiseConfirmModalProps & {
   onConfirm?: () => Promise<void> | void;
-  onCancel?: () => void;
+  onCancel?: () => Promise<void> | void;
 };
 
 type ConfirmModalContextType = {
@@ -48,6 +49,7 @@ const defaultModalState: ConfirmModalState = {
   type: 'confirm',
   ModalContent: () => null,
   isConfirmLoading: false,
+  isCancelLoading: false,
 };
 
 /**
@@ -62,7 +64,7 @@ const ConfirmModalProvider = ({ children }: Props) => {
   const resolver = useRef<(value: [result: boolean, data?: unknown]) => void>();
   const callbackRef = useRef<{
     onConfirm?: () => Promise<void> | void;
-    onCancel?: () => void;
+    onCancel?: () => Promise<void> | void;
   }>({});
 
   const { isMobile } = usePlatform();
@@ -77,6 +79,7 @@ const ConfirmModalProvider = ({ children }: Props) => {
         isOpen: true,
         type,
         isConfirmLoading: false,
+        isCancelLoading: false,
         ...props,
       });
 
@@ -109,14 +112,16 @@ const ConfirmModalProvider = ({ children }: Props) => {
     if (callbackRef.current.onConfirm) {
       setModalState((previous) => ({ ...previous, isConfirmLoading: true }));
       await callbackRef.current.onConfirm();
-      setModalState((previous) => ({ ...previous, isConfirmLoading: false }));
     }
     resolver.current?.([true, data]);
     setModalState(defaultModalState);
   }, []);
 
-  const handleCancel = useCallback((data?: unknown) => {
-    callbackRef.current.onCancel?.();
+  const handleCancel = useCallback(async (data?: unknown) => {
+    if (callbackRef.current.onCancel) {
+      setModalState((previous) => ({ ...previous, isCancelLoading: true }));
+      await callbackRef.current.onCancel();
+    }
     resolver.current?.([false, data]);
     setModalState(defaultModalState);
   }, []);
@@ -144,7 +149,7 @@ const ConfirmModalProvider = ({ children }: Props) => {
             : undefined
         }
         onClose={() => {
-          handleCancel();
+          void handleCancel();
         }}
       >
         {typeof ModalContent === 'string' ? ModalContent : <ModalContent />}
diff --git a/packages/experience/src/components/ConfirmModal/AcModal.tsx b/packages/experience/src/components/ConfirmModal/AcModal.tsx
index ce9a1762e30..17c454783d6 100644
--- a/packages/experience/src/components/ConfirmModal/AcModal.tsx
+++ b/packages/experience/src/components/ConfirmModal/AcModal.tsx
@@ -17,6 +17,7 @@ const AcModal = ({
   className,
   isOpen = false,
   isConfirmLoading = false,
+  isCancelLoading = false,
   children,
   cancelText = 'action.cancel',
   confirmText = 'action.confirm',
@@ -63,6 +64,7 @@ const AcModal = ({
             type="secondary"
             i18nProps={cancelTextI18nProps}
             size="small"
+            isLoading={isCancelLoading}
             onClick={onClose}
           />
           {onConfirm && (
diff --git a/packages/experience/src/components/ConfirmModal/MobileModal.tsx b/packages/experience/src/components/ConfirmModal/MobileModal.tsx
index a22b105abb2..0e888fa5db2 100644
--- a/packages/experience/src/components/ConfirmModal/MobileModal.tsx
+++ b/packages/experience/src/components/ConfirmModal/MobileModal.tsx
@@ -12,6 +12,7 @@ const MobileModal = ({
   className,
   isOpen = false,
   isConfirmLoading = false,
+  isCancelLoading = false,
   children,
   cancelText = 'action.cancel',
   confirmText = 'action.confirm',
@@ -35,6 +36,7 @@ const MobileModal = ({
           <Button
             title={cancelText}
             i18nProps={cancelTextI18nProps}
+            isLoading={isCancelLoading}
             type="secondary"
             onClick={onClose}
           />
diff --git a/packages/experience/src/components/ConfirmModal/type.ts b/packages/experience/src/components/ConfirmModal/type.ts
index c54233d2228..5f10d301c92 100644
--- a/packages/experience/src/components/ConfirmModal/type.ts
+++ b/packages/experience/src/components/ConfirmModal/type.ts
@@ -5,6 +5,7 @@ export type ModalProps = {
   className?: string;
   isOpen?: boolean;
   isConfirmLoading?: boolean;
+  isCancelLoading?: boolean;
   children: ReactNode;
   cancelText?: TFuncKey;
   confirmText?: TFuncKey;
diff --git a/packages/experience/src/hooks/use-confirm-modal.ts b/packages/experience/src/hooks/use-confirm-modal.ts
index 6be4cce5efd..6ae139e77f2 100644
--- a/packages/experience/src/hooks/use-confirm-modal.ts
+++ b/packages/experience/src/hooks/use-confirm-modal.ts
@@ -36,8 +36,9 @@ export const usePromiseConfirmModal = () => {
  *    // This will automatically set the confirm button to loading state
  *    await someAsyncOperation();
  *  },
- *  onCancel: () => {
- *    // Handle cancellation
+ *  onCancel: async () => {
+ *    // This will automatically set the cancel button to loading state
+ *    await someAsyncOperation();
  *  }
  * });
  * ```