shad-m 1.0.2 → 1.0.3

package/dist/common/interactive/otp-dialog/otp-dialog.js

@@ -0,0 +1,325 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var button = require('../../../components/button');
+var inputOtp = require('../../../components/input-otp');
+var spinner = require('../../../components/spinner');
+var helpers = require('../../../lib/helpers');
+var countdown = require('../../display/countdown');
+var alertDialogWrapper = require('../alert-dialog-wrapper');
+var reducer = require('./reducer');
+var types = require('./types');
+var utils = require('./utils');
+var lib = require('@/lib');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+const OtpDialog = ({
+  trigger,
+  triggerAsChild,
+  triggerClassName,
+  open,
+  onOpenChange,
+  defaultOpen,
+  title = "Nh\u1EADp m\xE3 OTP",
+  description,
+  size = "lg",
+  hasCloseButton,
+  contentClassName,
+  phoneNumber,
+  needToMaskPhoneNumber = true,
+  countdownDuration = 300,
+  onVerifyOtp,
+  onResendOtp,
+  isVerifying = false,
+  isResending = false,
+  error,
+  onSuccess,
+  onError,
+  verifyButtonText = "X\xE1c nh\u1EADn",
+  resendButtonText = "G\u1EEDi l\u1EA1i OTP",
+  phonePromptText = "OTP \u0111\u01B0\u1EE3c g\u1EEDi qua s\u1ED1 \u0111i\u1EC7n tho\u1EA1i",
+  customInstructions,
+  otpLength = 6,
+  otpPattern = "^[0-9]+$",
+  autoFocus = true,
+  autoSubmit = true,
+  // Default to auto-submit
+  trackingNameView,
+  trackingNameClose,
+  trackingData,
+  trackingIndex
+}) => {
+  const [state, dispatch] = React__namespace.useReducer(reducer.otpDialogReducer, reducer.initialOtpDialogState);
+  const inputRef = React__namespace.useRef(null);
+  const isVerifyingRef = React__namespace.useRef(false);
+  const displayError = error || state.internalError;
+  const maskedPhone = React__namespace.useMemo(
+    () => needToMaskPhoneNumber ? utils.maskPhoneNumber(phoneNumber) : phoneNumber,
+    [phoneNumber, needToMaskPhoneNumber]
+  );
+  React__namespace.useEffect(() => {
+    if (open) {
+      dispatch({ type: types.OtpDialogActionType.RESET });
+      isVerifyingRef.current = false;
+      if (autoFocus) {
+        let rafId;
+        let timerId;
+        rafId = requestAnimationFrame(() => {
+          timerId = setTimeout(() => {
+            const otpInput = document.querySelector("[data-input-otp]");
+            if (otpInput instanceof HTMLInputElement) {
+              otpInput.focus();
+            }
+          }, 150);
+        });
+        return () => {
+          cancelAnimationFrame(rafId);
+          clearTimeout(timerId);
+        };
+      }
+    }
+  }, [open, autoFocus]);
+  const handleResendOtp = async () => {
+    if (!onResendOtp) return;
+    try {
+      dispatch({ type: types.OtpDialogActionType.SET_ERROR, payload: null });
+      await onResendOtp();
+      dispatch({ type: types.OtpDialogActionType.SET_COUNTDOWN_ACTIVE, payload: true });
+      dispatch({ type: types.OtpDialogActionType.INCREMENT_COUNTDOWN_KEY });
+      dispatch({ type: types.OtpDialogActionType.SET_OTP, payload: "" });
+    } catch (err) {
+      const errorMessage = utils.normalizeErrorMessage(err) || "G\u1EEDi l\u1EA1i OTP th\u1EA5t b\u1EA1i";
+      dispatch({ type: types.OtpDialogActionType.SET_ERROR, payload: errorMessage });
+      if (onError) {
+        onError(errorMessage);
+      }
+    }
+  };
+  const handleVerifyOtp = React__namespace.useCallback(
+    async (otpValue) => {
+      const otpToVerify = otpValue || state.otp;
+      if (isVerifyingRef.current || state.isVerifying) {
+        console.warn("[OTP] Verification already in progress, skipping");
+        return;
+      }
+      if (otpToVerify.length !== otpLength) {
+        const errorMessage = `Vui l\xF2ng nh\u1EADp \u0111\u1EE7 ${otpLength} s\u1ED1 OTP`;
+        dispatch({ type: types.OtpDialogActionType.SET_ERROR, payload: errorMessage });
+        if (onError) {
+          onError(errorMessage);
+        }
+        return;
+      }
+      try {
+        isVerifyingRef.current = true;
+        dispatch({ type: types.OtpDialogActionType.SET_IS_VERIFYING, payload: true });
+        dispatch({ type: types.OtpDialogActionType.SET_ERROR, payload: null });
+        console.log("[OTP] Starting verification with value:", otpToVerify);
+        const result = await onVerifyOtp(otpToVerify);
+        console.log("[OTP] Verification result:", result);
+        if (result?.success === true) {
+          if (onSuccess) {
+            await onSuccess();
+          }
+          if (onOpenChange) {
+            onOpenChange(false);
+          }
+        } else {
+          const errorMessage = result?.error || "M\xE3 OTP kh\xF4ng \u0111\xFAng ho\u1EB7c h\u1EBFt h\u1EA1n";
+          dispatch({ type: types.OtpDialogActionType.SET_ERROR, payload: errorMessage });
+          dispatch({ type: types.OtpDialogActionType.SET_OTP, payload: "" });
+          if (onError) {
+            onError(errorMessage);
+          }
+          setTimeout(() => {
+            const otpInput = document.querySelector("[data-input-otp]");
+            if (otpInput instanceof HTMLInputElement) {
+              otpInput.focus();
+            }
+          }, 100);
+        }
+      } catch (err) {
+        console.error("[OTP] Verification error:", err);
+        const errorMessage = utils.normalizeErrorMessage(err);
+        dispatch({ type: types.OtpDialogActionType.SET_ERROR, payload: errorMessage });
+        dispatch({ type: types.OtpDialogActionType.SET_OTP, payload: "" });
+        if (onError) {
+          onError(errorMessage);
+        }
+        setTimeout(() => {
+          const otpInput = document.querySelector("[data-input-otp]");
+          if (otpInput instanceof HTMLInputElement) {
+            otpInput.focus();
+          }
+        }, 100);
+      } finally {
+        console.log("[OTP] Verification complete, resetting flags");
+        isVerifyingRef.current = false;
+        dispatch({ type: types.OtpDialogActionType.SET_IS_VERIFYING, payload: false });
+      }
+    },
+    // Include state.otp to ensure fresh value is captured in closure
+    // Even though we prefer passed otpValue, state.otp is used as fallback
+    [otpLength, onVerifyOtp, onSuccess, onOpenChange, onError, state.otp]
+  );
+  const handleCountdownComplete = () => {
+    dispatch({ type: types.OtpDialogActionType.SET_COUNTDOWN_ACTIVE, payload: false });
+  };
+  const debouncedAutoSubmitRef = React__namespace.useRef(
+    helpers.debounce(async (otpValue) => {
+      if (isVerifyingRef.current) {
+        console.warn("[OTP] Skipping auto-submit, verification in progress");
+        return;
+      }
+      console.log("[OTP] Auto-submitting OTP:", otpValue);
+    }, 300)
+  );
+  React__namespace.useEffect(() => {
+    if (!open) {
+      debouncedAutoSubmitRef.current.cancel();
+    }
+    return () => {
+      debouncedAutoSubmitRef.current.cancel();
+    };
+  }, [open]);
+  const handleOtpChange = (value) => {
+    if (state.isVerifying || isResending) {
+      console.warn("[OTP] Input locked during verification/resend");
+      return;
+    }
+    console.log("[OTP] Value changed:", value, "Length:", value.length);
+    dispatch({ type: types.OtpDialogActionType.SET_OTP, payload: value });
+    dispatch({ type: types.OtpDialogActionType.SET_ERROR, payload: null });
+    if (autoSubmit && value.length === otpLength) {
+      console.log("[OTP] Auto-submit triggered for complete OTP");
+      debouncedAutoSubmitRef.current(value).then(() => {
+        return handleVerifyOtp(value);
+      }).catch((err) => {
+        console.error("[OTP] Auto-submit error:", err);
+      });
+    }
+  };
+  const renderCountdownComp = React__namespace.useCallback(() => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      countdown.Countdown,
+      {
+        duration: countdownDuration,
+        className: "text-primary",
+        active: state.isCountdownActive,
+        onComplete: handleCountdownComplete,
+        formatTime: (minutes, seconds) => `(${minutes}:${seconds.toString().padStart(2, "0")})`
+      },
+      state.countdownKey
+    );
+  }, [countdownDuration, state.isCountdownActive, state.countdownKey]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    alertDialogWrapper.AlertDialogWrapper,
+    {
+      trigger,
+      triggerAsChild,
+      triggerClassName,
+      open,
+      onOpenChange,
+      defaultOpen,
+      title,
+      description,
+      hasCloseButton,
+      contentClassName,
+      showDefaultActions: false,
+      size,
+      autoHeight: true,
+      childrenClassName: "h-full p-4 pt-0",
+      showFooter: !autoSubmit,
+      trackingNameView,
+      trackingNameClose,
+      trackingData,
+      trackingIndex,
+      footerContent: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex w-full flex-col gap-3", children: /* @__PURE__ */ jsxRuntime.jsx(
+        button.Button,
+        {
+          onClick: () => handleVerifyOtp(),
+          disabled: state.otp.length !== otpLength || isVerifying,
+          loading: isVerifying,
+          className: "w-full",
+          children: verifyButtonText
+        }
+      ) }),
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full flex-col items-center justify-center gap-4", children: [
+        phoneNumber && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-center", children: /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-ink-500s font-medium", children: [
+          phonePromptText,
+          " ",
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: maskedPhone })
+        ] }) }),
+        customInstructions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-center", children: customInstructions }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+          inputOtp.InputOTP,
+          {
+            ref: inputRef,
+            maxLength: otpLength,
+            value: state.otp,
+            onChange: handleOtpChange,
+            pattern: otpPattern,
+            error: !!displayError,
+            disabled: state.isVerifying || isResending,
+            children: /* @__PURE__ */ jsxRuntime.jsx(inputOtp.InputOTPGroup, { children: Array.from({ length: otpLength }, (_, index) => /* @__PURE__ */ jsxRuntime.jsx(inputOtp.InputOTPSlot, { index }, index)) })
+          }
+        ) }),
+        displayError && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-center", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-red-500", children: displayError }) }),
+        onResendOtp && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-ink-400s flex items-center justify-center gap-1", children: [
+          state.isVerifying && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: "\u0110ang x\xE1c minh" }),
+            /* @__PURE__ */ jsxRuntime.jsx(spinner.Spinner, { size: "sm" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: lib.cn({
+                hidden: !state.isCountdownActive || state.isVerifying
+              }),
+              children: [
+                resendButtonText,
+                " ",
+                renderCountdownComp()
+              ]
+            }
+          ),
+          !state.isVerifying && !state.isCountdownActive && /* @__PURE__ */ jsxRuntime.jsx(
+            button.Button,
+            {
+              variant: "plain",
+              size: "sm",
+              onClick: handleResendOtp,
+              disabled: isResending,
+              loading: isResending,
+              children: resendButtonText
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+};
+
+exports.OtpDialog = OtpDialog;
+//# sourceMappingURL=otp-dialog.js.map
+//# sourceMappingURL=otp-dialog.js.map

package/dist/common/interactive/otp-dialog/otp-dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/common/interactive/otp-dialog/otp-dialog.tsx"],"names":["React","otpDialogReducer","initialOtpDialogState","maskPhoneNumber","OtpDialogActionType","normalizeErrorMessage","debounce","jsx","Countdown","AlertDialogWrapper","Button","jsxs","InputOTP","InputOTPGroup","InputOTPSlot","Fragment","Spinner","cn"],"mappings":"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","file":"otp-dialog.js","sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Button } from '../../../components/button';\nimport { InputOTP, InputOTPGroup, InputOTPSlot } from '../../../components/input-otp';\nimport { Spinner } from '../../../components/spinner';\nimport { debounce } from '../../../lib/helpers';\nimport { Countdown } from '../../display/countdown';\nimport { AlertDialogWrapper } from '../alert-dialog-wrapper';\nimport { initialOtpDialogState, otpDialogReducer } from './reducer';\nimport { OtpDialogActionType, type OtpDialogProps } from './types';\nimport { maskPhoneNumber, normalizeErrorMessage } from './utils';\nimport { cn } from '@/lib';\n\n/**\n * OtpDialog - A reusable OTP verification dialog component\n *\n * @example\n * // Controlled pattern (with external state)\n * const [open, setOpen] = useState(false);\n * <OtpDialog\n *   open={open}\n *   onOpenChange={setOpen}\n *   onVerifyOtp={async (otp) => {\n *     try {\n *       await verifyApi(otp);\n *       return { success: true };\n *     } catch (error) {\n *       return { success: false, error: 'Invalid OTP' };\n *     }\n *   }}\n * />\n *\n * @example\n * // Uncontrolled pattern (with trigger button)\n * <OtpDialog\n *   trigger={<Button>Verify Phone</Button>}\n *   onVerifyOtp={async (otp) => {\n *     await verifyApi(otp); // throws on error\n *   }}\n * />\n */\n\nconst OtpDialog: React.FC<OtpDialogProps> = ({\n  trigger,\n  triggerAsChild,\n  triggerClassName,\n  open,\n  onOpenChange,\n  defaultOpen,\n  title = 'Nhập mã OTP',\n  description,\n  size = 'lg',\n  hasCloseButton,\n  contentClassName,\n  phoneNumber,\n  needToMaskPhoneNumber = true,\n  countdownDuration = 300,\n  onVerifyOtp,\n  onResendOtp,\n  isVerifying = false,\n  isResending = false,\n  error,\n  onSuccess,\n  onError,\n  verifyButtonText = 'Xác nhận',\n  resendButtonText = 'Gửi lại OTP',\n  phonePromptText = 'OTP được gửi qua số điện thoại',\n  customInstructions,\n  otpLength = 6,\n  otpPattern = '^[0-9]+$',\n  autoFocus = true,\n  autoSubmit = true, // Default to auto-submit\n  trackingNameView,\n  trackingNameClose,\n  trackingData,\n  trackingIndex,\n}) => {\n  const [state, dispatch] = React.useReducer(otpDialogReducer, initialOtpDialogState);\n\n  const inputRef = React.useRef<HTMLInputElement>(null);\n  const isVerifyingRef = React.useRef(false); // Prevent double submission\n\n  // Use external error if provided, otherwise use internal error\n  const displayError = error || state.internalError;\n\n  // Mask phone number for display\n  const maskedPhone = React.useMemo(\n    () => (needToMaskPhoneNumber ? maskPhoneNumber(phoneNumber) : phoneNumber),\n    [phoneNumber, needToMaskPhoneNumber],\n  );\n\n  // Reset state when dialog opens/closes and handle auto-focus\n  React.useEffect(() => {\n    if (open) {\n      dispatch({ type: OtpDialogActionType.RESET });\n      isVerifyingRef.current = false; // Reset verifying flag\n\n      if (autoFocus) {\n        // Focus input after dialog animation completes\n        // Using requestAnimationFrame + setTimeout for better timing\n        let rafId: number;\n        let timerId: NodeJS.Timeout;\n\n        rafId = requestAnimationFrame(() => {\n          timerId = setTimeout(() => {\n            const otpInput = document.querySelector('[data-input-otp]');\n            if (otpInput instanceof HTMLInputElement) {\n              otpInput.focus();\n            }\n          }, 150);\n        });\n\n        return () => {\n          cancelAnimationFrame(rafId);\n          clearTimeout(timerId);\n        };\n      }\n    }\n  }, [open, autoFocus]);\n\n  const handleResendOtp = async () => {\n    if (!onResendOtp) return;\n\n    try {\n      dispatch({ type: OtpDialogActionType.SET_ERROR, payload: null });\n      await onResendOtp();\n\n      // Reset countdown and OTP input on successful resend\n      dispatch({ type: OtpDialogActionType.SET_COUNTDOWN_ACTIVE, payload: true });\n      dispatch({ type: OtpDialogActionType.INCREMENT_COUNTDOWN_KEY });\n      dispatch({ type: OtpDialogActionType.SET_OTP, payload: '' });\n    } catch (err: any) {\n      const errorMessage = normalizeErrorMessage(err) || 'Gửi lại OTP thất bại';\n      dispatch({ type: OtpDialogActionType.SET_ERROR, payload: errorMessage });\n      if (onError) {\n        onError(errorMessage);\n      }\n    }\n  };\n\n  const handleVerifyOtp = React.useCallback(\n    async (otpValue?: string) => {\n      const otpToVerify = otpValue || state.otp;\n\n      // Prevent double submission - use both ref and state check\n      if (isVerifyingRef.current || state.isVerifying) {\n        console.warn('[OTP] Verification already in progress, skipping');\n        return;\n      }\n\n      if (otpToVerify.length !== otpLength) {\n        const errorMessage = `Vui lòng nhập đủ ${otpLength} số OTP`;\n        dispatch({ type: OtpDialogActionType.SET_ERROR, payload: errorMessage });\n        if (onError) {\n          onError(errorMessage);\n        }\n        return;\n      }\n\n      try {\n        // Set both ref and state to prevent any race conditions\n        isVerifyingRef.current = true;\n        dispatch({ type: OtpDialogActionType.SET_IS_VERIFYING, payload: true });\n        dispatch({ type: OtpDialogActionType.SET_ERROR, payload: null });\n\n        console.log('[OTP] Starting verification with value:', otpToVerify);\n\n        // Call onVerifyOtp and handle both return value and thrown errors\n        const result = await onVerifyOtp(otpToVerify);\n\n        console.log('[OTP] Verification result:', result);\n\n        // IMPORTANT: Only close dialog if explicitly returns { success: true }\n        // Any other return value is treated as failure to keep dialog open\n        if (result?.success === true) {\n          // Verification successful - execute success callback and close dialog\n          if (onSuccess) {\n            await onSuccess();\n          }\n\n          // Close dialog after all success handlers complete\n          if (onOpenChange) {\n            onOpenChange(false);\n          }\n        } else {\n          // Verification failed or returned non-success - keep dialog open\n          const errorMessage = result?.error || 'Mã OTP không đúng hoặc hết hạn';\n          dispatch({ type: OtpDialogActionType.SET_ERROR, payload: errorMessage });\n          dispatch({ type: OtpDialogActionType.SET_OTP, payload: '' }); // Clear OTP for retry\n\n          if (onError) {\n            onError(errorMessage);\n          }\n\n          // Re-focus input after clearing OTP\n          setTimeout(() => {\n            const otpInput = document.querySelector('[data-input-otp]');\n            if (otpInput instanceof HTMLInputElement) {\n              otpInput.focus();\n            }\n          }, 100);\n        }\n      } catch (err: any) {\n        // Thrown error - treat as verification failure\n        console.error('[OTP] Verification error:', err);\n        const errorMessage = normalizeErrorMessage(err);\n        dispatch({ type: OtpDialogActionType.SET_ERROR, payload: errorMessage });\n        dispatch({ type: OtpDialogActionType.SET_OTP, payload: '' }); // Clear OTP for retry\n\n        if (onError) {\n          onError(errorMessage);\n        }\n\n        // Re-focus input after clearing OTP\n        setTimeout(() => {\n          const otpInput = document.querySelector('[data-input-otp]');\n          if (otpInput instanceof HTMLInputElement) {\n            otpInput.focus();\n          }\n        }, 100);\n      } finally {\n        // CRITICAL: Always reset both ref and state in finally block\n        // This ensures cleanup even if there's an early return or exception\n        console.log('[OTP] Verification complete, resetting flags');\n        isVerifyingRef.current = false;\n        dispatch({ type: OtpDialogActionType.SET_IS_VERIFYING, payload: false });\n      }\n    },\n    // Include state.otp to ensure fresh value is captured in closure\n    // Even though we prefer passed otpValue, state.otp is used as fallback\n    [otpLength, onVerifyOtp, onSuccess, onOpenChange, onError, state.otp],\n  );\n\n  const handleCountdownComplete = () => {\n    dispatch({ type: OtpDialogActionType.SET_COUNTDOWN_ACTIVE, payload: false });\n  };\n\n  // Debounced auto-submit function with longer delay to prevent race conditions\n  // Using 300ms to ensure user has finished typing and to give enough time\n  // for any pending state updates to complete before submission\n  //\n  // FIXED: Store debounce instance in ref, but pass fresh handleVerifyOtp on each call\n  // to avoid stale closure issues while maintaining stable debounce timer\n  const debouncedAutoSubmitRef = React.useRef(\n    debounce(async (otpValue: string) => {\n      // Additional check: only submit if not currently verifying\n      if (isVerifyingRef.current) {\n        console.warn('[OTP] Skipping auto-submit, verification in progress');\n        return;\n      }\n\n      console.log('[OTP] Auto-submitting OTP:', otpValue);\n      // Don't pass verifyFn as param - will be accessed via closure from latest render\n    }, 300),\n  );\n\n  // Cancel debounce when dialog closes or component unmounts\n  React.useEffect(() => {\n    if (!open) {\n      // Cancel any pending debounced calls when dialog closes\n      debouncedAutoSubmitRef.current.cancel();\n    }\n\n    return () => {\n      // Cleanup on unmount\n      debouncedAutoSubmitRef.current.cancel();\n    };\n  }, [open]); // Re-run when dialog open state changes\n\n  const handleOtpChange = (value: string) => {\n    // Prevent input changes when verifying or resending\n    if (state.isVerifying || isResending) {\n      console.warn('[OTP] Input locked during verification/resend');\n      return;\n    }\n\n    console.log('[OTP] Value changed:', value, 'Length:', value.length);\n    dispatch({ type: OtpDialogActionType.SET_OTP, payload: value });\n    // Clear errors when user starts typing\n    dispatch({ type: OtpDialogActionType.SET_ERROR, payload: null });\n\n    // Auto-submit when OTP is complete\n    if (autoSubmit && value.length === otpLength) {\n      console.log('[OTP] Auto-submit triggered for complete OTP');\n      // Debounce the submission, then call latest handleVerifyOtp\n      // This ensures we always use the most recent handleVerifyOtp reference\n      debouncedAutoSubmitRef\n        .current(value)\n        .then(() => {\n          // After debounce completes, call the current handleVerifyOtp\n          // This avoids stale closure by accessing handleVerifyOtp at execution time\n          return handleVerifyOtp(value);\n        })\n        .catch((err) => {\n          // Error is already handled in handleVerifyOtp\n          console.error('[OTP] Auto-submit error:', err);\n        });\n    }\n  };\n\n  const renderCountdownComp = React.useCallback(() => {\n    return (\n      <Countdown\n        key={state.countdownKey}\n        duration={countdownDuration}\n        className=\"text-primary\"\n        active={state.isCountdownActive}\n        onComplete={handleCountdownComplete}\n        formatTime={(minutes: number, seconds: number) =>\n          `(${minutes}:${seconds.toString().padStart(2, '0')})`\n        }\n      />\n    );\n  }, [countdownDuration, state.isCountdownActive, state.countdownKey]);\n\n  return (\n    <AlertDialogWrapper\n      trigger={trigger}\n      triggerAsChild={triggerAsChild}\n      triggerClassName={triggerClassName}\n      open={open}\n      onOpenChange={onOpenChange}\n      defaultOpen={defaultOpen}\n      title={title}\n      description={description}\n      hasCloseButton={hasCloseButton}\n      contentClassName={contentClassName}\n      showDefaultActions={false}\n      size={size}\n      autoHeight\n      childrenClassName=\"h-full p-4 pt-0\"\n      showFooter={!autoSubmit}\n      trackingNameView={trackingNameView}\n      trackingNameClose={trackingNameClose}\n      trackingData={trackingData}\n      trackingIndex={trackingIndex}\n      footerContent={\n        <div className=\"flex w-full flex-col gap-3\">\n          <Button\n            onClick={() => handleVerifyOtp()}\n            disabled={state.otp.length !== otpLength || isVerifying}\n            loading={isVerifying}\n            className=\"w-full\"\n          >\n            {verifyButtonText}\n          </Button>\n        </div>\n      }\n    >\n      <div className=\"flex h-full flex-col items-center justify-center gap-4\">\n        {/* Phone number info */}\n        {phoneNumber && (\n          <div className=\"text-center\">\n            <p className=\"text-ink-500s font-medium\">\n              {phonePromptText} <span className=\"font-medium\">{maskedPhone}</span>\n            </p>\n          </div>\n        )}\n\n        {/* Custom instructions */}\n        {customInstructions && <div className=\"text-center\">{customInstructions}</div>}\n\n        {/* OTP Input */}\n        <div className=\"flex justify-center\">\n          <InputOTP\n            ref={inputRef}\n            maxLength={otpLength}\n            value={state.otp}\n            onChange={handleOtpChange}\n            pattern={otpPattern}\n            error={!!displayError}\n            disabled={state.isVerifying || isResending}\n          >\n            <InputOTPGroup>\n              {Array.from({ length: otpLength }, (_, index) => (\n                <InputOTPSlot key={index} index={index} />\n              ))}\n            </InputOTPGroup>\n          </InputOTP>\n        </div>\n\n        {/* Error message */}\n        {displayError && (\n          <div className=\"text-center\">\n            <p className=\"text-red-500\">{displayError}</p>\n          </div>\n        )}\n\n        {/* Countdown and resend */}\n        {onResendOtp && (\n          <div className=\"text-ink-400s flex items-center justify-center gap-1\">\n            {state.isVerifying && (\n              <>\n                <span>Đang xác minh</span>\n                <Spinner size=\"sm\" />\n              </>\n            )}\n            <div\n              className={cn({\n                hidden: !state.isCountdownActive || state.isVerifying,\n              })}\n            >\n              {resendButtonText} {renderCountdownComp()}\n            </div>\n\n            {!state.isVerifying && !state.isCountdownActive && (\n              <Button\n                variant=\"plain\"\n                size=\"sm\"\n                onClick={handleResendOtp}\n                disabled={isResending}\n                loading={isResending}\n              >\n                {resendButtonText}\n              </Button>\n            )}\n          </div>\n        )}\n      </div>\n    </AlertDialogWrapper>\n  );\n};\n\nexport { OtpDialog };\nexport type { OtpDialogProps };\n"]}

package/dist/common/interactive/otp-dialog/otp-dialog.mjs

@@ -0,0 +1,303 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import * as React from 'react';
+import { Button } from '../../../components/button';
+import { InputOTP, InputOTPGroup, InputOTPSlot } from '../../../components/input-otp';
+import { Spinner } from '../../../components/spinner';
+import { debounce } from '../../../lib/helpers';
+import { Countdown } from '../../display/countdown';
+import { AlertDialogWrapper } from '../alert-dialog-wrapper';
+import { otpDialogReducer, initialOtpDialogState } from './reducer';
+import { OtpDialogActionType } from './types';
+import { maskPhoneNumber, normalizeErrorMessage } from './utils';
+import { cn } from '@/lib';
+
+const OtpDialog = ({
+  trigger,
+  triggerAsChild,
+  triggerClassName,
+  open,
+  onOpenChange,
+  defaultOpen,
+  title = "Nh\u1EADp m\xE3 OTP",
+  description,
+  size = "lg",
+  hasCloseButton,
+  contentClassName,
+  phoneNumber,
+  needToMaskPhoneNumber = true,
+  countdownDuration = 300,
+  onVerifyOtp,
+  onResendOtp,
+  isVerifying = false,
+  isResending = false,
+  error,
+  onSuccess,
+  onError,
+  verifyButtonText = "X\xE1c nh\u1EADn",
+  resendButtonText = "G\u1EEDi l\u1EA1i OTP",
+  phonePromptText = "OTP \u0111\u01B0\u1EE3c g\u1EEDi qua s\u1ED1 \u0111i\u1EC7n tho\u1EA1i",
+  customInstructions,
+  otpLength = 6,
+  otpPattern = "^[0-9]+$",
+  autoFocus = true,
+  autoSubmit = true,
+  // Default to auto-submit
+  trackingNameView,
+  trackingNameClose,
+  trackingData,
+  trackingIndex
+}) => {
+  const [state, dispatch] = React.useReducer(otpDialogReducer, initialOtpDialogState);
+  const inputRef = React.useRef(null);
+  const isVerifyingRef = React.useRef(false);
+  const displayError = error || state.internalError;
+  const maskedPhone = React.useMemo(
+    () => needToMaskPhoneNumber ? maskPhoneNumber(phoneNumber) : phoneNumber,
+    [phoneNumber, needToMaskPhoneNumber]
+  );
+  React.useEffect(() => {
+    if (open) {
+      dispatch({ type: OtpDialogActionType.RESET });
+      isVerifyingRef.current = false;
+      if (autoFocus) {
+        let rafId;
+        let timerId;
+        rafId = requestAnimationFrame(() => {
+          timerId = setTimeout(() => {
+            const otpInput = document.querySelector("[data-input-otp]");
+            if (otpInput instanceof HTMLInputElement) {
+              otpInput.focus();
+            }
+          }, 150);
+        });
+        return () => {
+          cancelAnimationFrame(rafId);
+          clearTimeout(timerId);
+        };
+      }
+    }
+  }, [open, autoFocus]);
+  const handleResendOtp = async () => {
+    if (!onResendOtp) return;
+    try {
+      dispatch({ type: OtpDialogActionType.SET_ERROR, payload: null });
+      await onResendOtp();
+      dispatch({ type: OtpDialogActionType.SET_COUNTDOWN_ACTIVE, payload: true });
+      dispatch({ type: OtpDialogActionType.INCREMENT_COUNTDOWN_KEY });
+      dispatch({ type: OtpDialogActionType.SET_OTP, payload: "" });
+    } catch (err) {
+      const errorMessage = normalizeErrorMessage(err) || "G\u1EEDi l\u1EA1i OTP th\u1EA5t b\u1EA1i";
+      dispatch({ type: OtpDialogActionType.SET_ERROR, payload: errorMessage });
+      if (onError) {
+        onError(errorMessage);
+      }
+    }
+  };
+  const handleVerifyOtp = React.useCallback(
+    async (otpValue) => {
+      const otpToVerify = otpValue || state.otp;
+      if (isVerifyingRef.current || state.isVerifying) {
+        console.warn("[OTP] Verification already in progress, skipping");
+        return;
+      }
+      if (otpToVerify.length !== otpLength) {
+        const errorMessage = `Vui l\xF2ng nh\u1EADp \u0111\u1EE7 ${otpLength} s\u1ED1 OTP`;
+        dispatch({ type: OtpDialogActionType.SET_ERROR, payload: errorMessage });
+        if (onError) {
+          onError(errorMessage);
+        }
+        return;
+      }
+      try {
+        isVerifyingRef.current = true;
+        dispatch({ type: OtpDialogActionType.SET_IS_VERIFYING, payload: true });
+        dispatch({ type: OtpDialogActionType.SET_ERROR, payload: null });
+        console.log("[OTP] Starting verification with value:", otpToVerify);
+        const result = await onVerifyOtp(otpToVerify);
+        console.log("[OTP] Verification result:", result);
+        if (result?.success === true) {
+          if (onSuccess) {
+            await onSuccess();
+          }
+          if (onOpenChange) {
+            onOpenChange(false);
+          }
+        } else {
+          const errorMessage = result?.error || "M\xE3 OTP kh\xF4ng \u0111\xFAng ho\u1EB7c h\u1EBFt h\u1EA1n";
+          dispatch({ type: OtpDialogActionType.SET_ERROR, payload: errorMessage });
+          dispatch({ type: OtpDialogActionType.SET_OTP, payload: "" });
+          if (onError) {
+            onError(errorMessage);
+          }
+          setTimeout(() => {
+            const otpInput = document.querySelector("[data-input-otp]");
+            if (otpInput instanceof HTMLInputElement) {
+              otpInput.focus();
+            }
+          }, 100);
+        }
+      } catch (err) {
+        console.error("[OTP] Verification error:", err);
+        const errorMessage = normalizeErrorMessage(err);
+        dispatch({ type: OtpDialogActionType.SET_ERROR, payload: errorMessage });
+        dispatch({ type: OtpDialogActionType.SET_OTP, payload: "" });
+        if (onError) {
+          onError(errorMessage);
+        }
+        setTimeout(() => {
+          const otpInput = document.querySelector("[data-input-otp]");
+          if (otpInput instanceof HTMLInputElement) {
+            otpInput.focus();
+          }
+        }, 100);
+      } finally {
+        console.log("[OTP] Verification complete, resetting flags");
+        isVerifyingRef.current = false;
+        dispatch({ type: OtpDialogActionType.SET_IS_VERIFYING, payload: false });
+      }
+    },
+    // Include state.otp to ensure fresh value is captured in closure
+    // Even though we prefer passed otpValue, state.otp is used as fallback
+    [otpLength, onVerifyOtp, onSuccess, onOpenChange, onError, state.otp]
+  );
+  const handleCountdownComplete = () => {
+    dispatch({ type: OtpDialogActionType.SET_COUNTDOWN_ACTIVE, payload: false });
+  };
+  const debouncedAutoSubmitRef = React.useRef(
+    debounce(async (otpValue) => {
+      if (isVerifyingRef.current) {
+        console.warn("[OTP] Skipping auto-submit, verification in progress");
+        return;
+      }
+      console.log("[OTP] Auto-submitting OTP:", otpValue);
+    }, 300)
+  );
+  React.useEffect(() => {
+    if (!open) {
+      debouncedAutoSubmitRef.current.cancel();
+    }
+    return () => {
+      debouncedAutoSubmitRef.current.cancel();
+    };
+  }, [open]);
+  const handleOtpChange = (value) => {
+    if (state.isVerifying || isResending) {
+      console.warn("[OTP] Input locked during verification/resend");
+      return;
+    }
+    console.log("[OTP] Value changed:", value, "Length:", value.length);
+    dispatch({ type: OtpDialogActionType.SET_OTP, payload: value });
+    dispatch({ type: OtpDialogActionType.SET_ERROR, payload: null });
+    if (autoSubmit && value.length === otpLength) {
+      console.log("[OTP] Auto-submit triggered for complete OTP");
+      debouncedAutoSubmitRef.current(value).then(() => {
+        return handleVerifyOtp(value);
+      }).catch((err) => {
+        console.error("[OTP] Auto-submit error:", err);
+      });
+    }
+  };
+  const renderCountdownComp = React.useCallback(() => {
+    return /* @__PURE__ */ jsx(
+      Countdown,
+      {
+        duration: countdownDuration,
+        className: "text-primary",
+        active: state.isCountdownActive,
+        onComplete: handleCountdownComplete,
+        formatTime: (minutes, seconds) => `(${minutes}:${seconds.toString().padStart(2, "0")})`
+      },
+      state.countdownKey
+    );
+  }, [countdownDuration, state.isCountdownActive, state.countdownKey]);
+  return /* @__PURE__ */ jsx(
+    AlertDialogWrapper,
+    {
+      trigger,
+      triggerAsChild,
+      triggerClassName,
+      open,
+      onOpenChange,
+      defaultOpen,
+      title,
+      description,
+      hasCloseButton,
+      contentClassName,
+      showDefaultActions: false,
+      size,
+      autoHeight: true,
+      childrenClassName: "h-full p-4 pt-0",
+      showFooter: !autoSubmit,
+      trackingNameView,
+      trackingNameClose,
+      trackingData,
+      trackingIndex,
+      footerContent: /* @__PURE__ */ jsx("div", { className: "flex w-full flex-col gap-3", children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          onClick: () => handleVerifyOtp(),
+          disabled: state.otp.length !== otpLength || isVerifying,
+          loading: isVerifying,
+          className: "w-full",
+          children: verifyButtonText
+        }
+      ) }),
+      children: /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col items-center justify-center gap-4", children: [
+        phoneNumber && /* @__PURE__ */ jsx("div", { className: "text-center", children: /* @__PURE__ */ jsxs("p", { className: "text-ink-500s font-medium", children: [
+          phonePromptText,
+          " ",
+          /* @__PURE__ */ jsx("span", { className: "font-medium", children: maskedPhone })
+        ] }) }),
+        customInstructions && /* @__PURE__ */ jsx("div", { className: "text-center", children: customInstructions }),
+        /* @__PURE__ */ jsx("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx(
+          InputOTP,
+          {
+            ref: inputRef,
+            maxLength: otpLength,
+            value: state.otp,
+            onChange: handleOtpChange,
+            pattern: otpPattern,
+            error: !!displayError,
+            disabled: state.isVerifying || isResending,
+            children: /* @__PURE__ */ jsx(InputOTPGroup, { children: Array.from({ length: otpLength }, (_, index) => /* @__PURE__ */ jsx(InputOTPSlot, { index }, index)) })
+          }
+        ) }),
+        displayError && /* @__PURE__ */ jsx("div", { className: "text-center", children: /* @__PURE__ */ jsx("p", { className: "text-red-500", children: displayError }) }),
+        onResendOtp && /* @__PURE__ */ jsxs("div", { className: "text-ink-400s flex items-center justify-center gap-1", children: [
+          state.isVerifying && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("span", { children: "\u0110ang x\xE1c minh" }),
+            /* @__PURE__ */ jsx(Spinner, { size: "sm" })
+          ] }),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn({
+                hidden: !state.isCountdownActive || state.isVerifying
+              }),
+              children: [
+                resendButtonText,
+                " ",
+                renderCountdownComp()
+              ]
+            }
+          ),
+          !state.isVerifying && !state.isCountdownActive && /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "plain",
+              size: "sm",
+              onClick: handleResendOtp,
+              disabled: isResending,
+              loading: isResending,
+              children: resendButtonText
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+};
+
+export { OtpDialog };
+//# sourceMappingURL=otp-dialog.mjs.map
+//# sourceMappingURL=otp-dialog.mjs.map