shad-m 1.0.0 → 1.0.2

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

@@ -1,325 +0,0 @@
-'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

@@ -1 +0,0 @@
-{"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

@@ -1,303 +0,0 @@
-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