refactor(experience): support and apply modal loading state

[xiaoyijun]

Summary

This PR refactors the ConfirmModal component and its related hooks to support a loading state in modals and applies it to the experience flow.

Notably, it introduces a new callback-based usage pattern for confirm modals, providing greater flexibility in handling modal actions while offering improved user feedback during asynchronous operations.

Key changes:

1. Added support for modal loading state:

   • Introduced isConfirmLoading prop to ModalProps and ConfirmModalState
   • Updated AcModal and MobileModal components to handle the loading state
   • Confirm button automatically enters loading state during async confirm actions when using callback-style confirm modals

2. Implemented callback-based confirm modal usage:

   • Created CallbackConfirmModalProps type with onConfirm and onCancel callbacks
   • Added showCallback method to ConfirmModalContextType
   • Updated ConfirmModalProvider to handle both promise-based and callback-based modal actions
   • Automatically manages confirm button loading state when executing async onConfirm callbacks

3. Separated promise-based and callback-based hooks:

   • Introduced usePromiseConfirmModal for promise-based usage
   • Modified useConfirmModal for callback-based usage, supporting loading state during async operations

4. Removed unused modal render props:

   • Simplified ModalContentRenderProps by removing confirm and cancel props
   • Updated ConfirmModalState to use a simpler ModalContent type

5. Updated test cases to cover both promise-based and callback-based scenarios, including loading state tests

6. Refactored various components and hooks to use the new modal APIs:

   • Updated use-identifier-error-alert, use-link-social-confirm-modal, use-register-flow-code-verification, use-sign-in-flow-code-verification, use-terms, and several pages to use the appropriate modal hooks
   • Async operations in these scenarios now automatically trigger the confirm button's loading state

Testing

https://github.com/user-attachments/assets/17a1ca40-9530-41ec-bde3-1d2aa819a4e1

https://github.com/user-attachments/assets/a6c1ecaf-16ef-4506-993c-196b4b528406

Checklist

• [ ] .changeset
• [x] unit tests
• [ ] integration tests
• [x] necessary TSDoc comments

[github-actions[bot]]

COMPARE TO master

Total Size Diff :chart_with_upwards_trend: +5.42 KB

Diff by File

|Name|Diff| |---|---| |packages/experience/src/Providers/ConfirmModalProvider/index.tsx|:chart_with_upwards_trend: +1.4 KB| |packages/experience/src/Providers/ConfirmModalProvider/indext.test.tsx|:chart_with_upwards_trend: +2.52 KB| |packages/experience/src/components/ConfirmModal/AcModal.tsx|:chart_with_upwards_trend: +138 Bytes| |packages/experience/src/components/ConfirmModal/MobileModal.tsx|:chart_with_upwards_trend: +192 Bytes| |packages/experience/src/components/ConfirmModal/type.ts|:chart_with_upwards_trend: +59 Bytes| |packages/experience/src/containers/VerificationCode/use-identifier-error-alert.ts|:chart_with_upwards_trend: +14 Bytes| |packages/experience/src/containers/VerificationCode/use-link-social-confirm-modal.ts|:chart_with_upwards_trend: +14 Bytes| |packages/experience/src/containers/VerificationCode/use-register-flow-code-verification.ts|:chart_with_upwards_trend: +40 Bytes| |packages/experience/src/containers/VerificationCode/use-sign-in-flow-code-verification.ts|:chart_with_upwards_trend: +48 Bytes| |packages/experience/src/hooks/use-confirm-modal.ts|:chart_with_upwards_trend: +974 Bytes| |packages/experience/src/hooks/use-terms.ts|:chart_with_upwards_trend: +14 Bytes| |packages/experience/src/pages/Continue/SetPassword/index.tsx|:chart_with_upwards_trend: +14 Bytes| |packages/experience/src/pages/RegisterPassword/index.tsx|:chart_with_upwards_trend: +14 Bytes| |packages/experience/src/pages/ResetPassword/index.tsx|:chart_with_upwards_trend: +14 Bytes|