@pradip1995/commerce-auth 3.0.0 → 3.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pradip1995/commerce-auth",
-  "version": "3.0.0",
+  "version": "3.0.2",
   "description": "Medusa storefront authentication — login, register, OTP, Google OAuth",
   "license": "MIT",
   "publishConfig": {
@@ -33,7 +33,12 @@
     "./components/google-auth-shell": "./src/components/google-auth-shell/index.tsx",
     "./components/google-identity-script": "./src/components/google-identity-script/index.tsx",
     "./components/google-one-tap": "./src/components/google-one-tap/index.tsx",
-    "./components/google-credential-button": "./src/components/google-credential-button/index.tsx"
+    "./components/google-credential-button": "./src/components/google-credential-button/index.tsx",
+    "./components/otp-input": "./src/components/otp-input/index.tsx",
+    "./components/guest-order-modal": "./src/components/guest-order-modal/index.tsx",
+    "./components/otp-verification-modal": "./src/components/otp-verification-modal/index.tsx",
+    "./hooks/use-guest-otp": "./src/hooks/use-guest-otp.ts",
+    "./hooks/use-customer-otp": "./src/hooks/use-customer-otp.ts"
   },
   "peerDependencies": {
     "@pradip1995/commerce-core": "^3.0.0",

package/src/components/guest-order-modal/index.tsx

@@ -0,0 +1,131 @@
+"use client"
+
+import Envelope from "@modules/common/icons/envelope"
+import Spinner from "@modules/common/icons/spinner"
+import Modal from "@modules/common/components/modal"
+import OtpInput from "../otp-input"
+import { useGuestOtp } from "../../hooks/use-guest-otp"
+
+type GuestOrderModalProps = {
+  isOpen: boolean
+  close: () => void
+  onVerified: () => void
+  initialEmail?: string
+  autoStart?: boolean
+}
+
+export default function GuestOrderModal({
+  isOpen,
+  close,
+  onVerified,
+  initialEmail = "",
+  autoStart = false,
+}: GuestOrderModalProps) {
+  const {
+    email,
+    setEmail,
+    otp,
+    setOtp,
+    step,
+    setStep,
+    isLoading,
+    error,
+    success,
+    sendGuestOtp,
+    verifyGuestOtp,
+    reset,
+  } = useGuestOtp({ initialEmail, autoStart, isOpen })
+
+  const handleClose = () => {
+    reset()
+    close()
+  }
+
+  const handleVerify = async () => {
+    const token = await verifyGuestOtp()
+    if (token) {
+      onVerified()
+    }
+  }
+
+  return (
+    <Modal isOpen={isOpen} close={handleClose} size="small">
+      <Modal.Body>
+        <div className="flex flex-col gap-6 py-4 px-2">
+          <div className="text-center">
+            <h2 className="text-2xl font-bold text-heading mb-2">
+              {step === "email" ? "Track Your Order" : "Verify OTP"}
+            </h2>
+            <p className="text-sm text-gray-500 leading-relaxed max-w-[300px] mx-auto">
+              {step === "email"
+                ? "Enter your email address to track your guest orders. We will send you a One-Time Password (OTP)."
+                : `Enter the 6-digit code sent to ${email}`}
+            </p>
+          </div>
+
+          {success ? (
+            <div className="flex flex-col items-center gap-4 py-6">
+              <div className="text-brand-accent animate-pulse font-bold">
+                Verification Successful!
+              </div>
+              <Spinner />
+            </div>
+          ) : step === "email" ? (
+            <div className="space-y-4">
+              <div className="relative">
+                <div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none text-gray-400">
+                  <Envelope size="20" />
+                </div>
+                <input
+                  placeholder="Email"
+                  value={email}
+                  onChange={(event) => setEmail(event.target.value)}
+                  autoComplete="email"
+                  type="email"
+                  required
+                  className="w-full pl-12 pr-4 py-3 border border-gray-300 focus:outline-none focus:ring-2 focus:ring-brand-accent transition-all text-sm"
+                  style={{ borderRadius: "30px" }}
+                />
+              </div>
+
+              {error && <p className="text-red-500 text-xs text-center">{error}</p>}
+
+              <button
+                className="w-full py-3 bg-brand-accent text-inverse font-bold hover:bg-brand-accent-hover transition-colors flex justify-center items-center gap-2"
+                style={{ borderRadius: "30px" }}
+                onClick={() => void sendGuestOtp()}
+                disabled={isLoading || !email}
+              >
+                {isLoading ? <Spinner size={16} /> : "Send OTP"}
+              </button>
+            </div>
+          ) : (
+            <div className="space-y-4">
+              <OtpInput value={otp} onChange={setOtp} autoFocus />
+
+              {error && <p className="text-red-500 text-xs text-center">{error}</p>}
+
+              <div className="space-y-3">
+                <button
+                  className="w-full py-3 bg-brand-accent text-inverse font-bold hover:bg-brand-accent-hover transition-colors flex justify-center items-center gap-2"
+                  style={{ borderRadius: "30px" }}
+                  onClick={() => void handleVerify()}
+                  disabled={isLoading || otp.length < 6}
+                >
+                  {isLoading ? <Spinner size={16} /> : "Verify & View Orders"}
+                </button>
+
+                <button
+                  onClick={() => setStep("email")}
+                  className="text-xs text-gray-500 hover:text-brand-accent w-full text-center underline font-medium"
+                >
+                  Change Email
+                </button>
+              </div>
+            </div>
+          )}
+        </div>
+      </Modal.Body>
+    </Modal>
+  )
+}

package/src/components/login/index.tsx

@@ -13,10 +13,8 @@ import { useRouter, useParams, useSearchParams } from "next/navigation"
 import LocalizedClientLink from "@modules/common/components/localized-client-link"
 import { useServerAction } from "@core/hooks/use-server-action"
 
-import { sendOTP, verifyOTP, listGuestOrders } from "@core/data/guest"
-import { Button, Input, Heading, Text, clx } from "@medusajs/ui"
-import Modal from "@modules/common/components/modal"
-import { signout } from "@core/data/customer"
+import { listGuestOrders } from "@core/data/guest"
+import GuestOrderModal from "../guest-order-modal"
 import DeletionPendingModal from "@modules/account/components/deletion-pending-modal"
 import Spinner from "@modules/common/icons/spinner"
 
@@ -340,220 +338,15 @@ const Login = ({ setCurrentView }: Props) => {
       <GuestOrderModal
         isOpen={showGuestModal}
         close={() => setShowGuestModal(false)}
-        router={router}
-        params={params}
         initialEmail={searchParams.get("email") || ""}
         autoStart={searchParams.get("view") === "guest" && !!searchParams.get("email")}
+        onVerified={() => {
+          const countryCode = (params?.countryCode as string) || "in"
+          router.push(`/${countryCode}/guest-orders`)
+        }}
       />
     </div>
   )
 }
 
-const GuestOrderModal = ({
-  isOpen,
-  close,
-  router,
-  params,
-  initialEmail = "",
-  autoStart = false,
-}: {
-  isOpen: boolean
-  close: () => void
-  router: any
-  params: any
-  initialEmail?: string
-  autoStart?: boolean
-}) => {
-  const [email, setEmail] = useState(initialEmail)
-  const [otp, setOtp] = useState("")
-  const [step, setStep] = useState<"email" | "otp">("email")
-  const [isLoading, setIsLoading] = useState(false)
-  const [error, setError] = useState<string | null>(null)
-  const [verificationToken, setVerificationToken] = useState<string | null>(null)
-  const [success, setSuccess] = useState(false)
-  const autoStartedRef = useRef(false)
-
-  useEffect(() => {
-    if (initialEmail) setEmail(initialEmail)
-  }, [initialEmail])
-
-  useEffect(() => {
-    // If autoStart is true and we have an email, trigger OTP send immediately
-    if (isOpen && autoStart && initialEmail && !autoStartedRef.current) {
-      autoStartedRef.current = true
-      setIsLoading(true)
-      handleSendOtp(initialEmail)
-    }
-  }, [isOpen, autoStart, initialEmail])
-
-  const handleSendOtp = async (emailToSend = email) => {
-    if (!emailToSend) return
-    setIsLoading(true)
-    setError(null)
-
-    try {
-      const res = (await sendOTP(emailToSend, "email_verification")) as any
-      if (res.token || res.success !== false) {
-        setVerificationToken(res.token || "temp-token")
-        setStep("otp")
-      } else {
-        setError((res as any).error || "Failed to send OTP")
-        setStep("email")
-      }
-    } catch (e: any) {
-      setError(e.message)
-      setStep("email")
-    } finally {
-      setIsLoading(false)
-    }
-  }
-
-  const handleVerifyOtp = async () => {
-    if (!otp) return
-    setIsLoading(true)
-    setError(null)
-
-    try {
-      // Pass email as customerId since it's a guest flow
-      const res = (await verifyOTP(email, verificationToken || "", otp)) as any
-      if (res.success !== false) {
-        // Assuming success if no explicit error field
-        setSuccess(true)
-
-        // Store token in cookie
-        // Note: For a real app, use a server action to set httpOnly cookie.
-        // Here we simulate for client-side usage or basic auth header.
-        const token = res.token || "guest_access_token"
-        document.cookie = `_medusa_guest_token=${token}; path=/; max-age=3600; SameSite=Lax`
-
-        // Redirect to guest order view
-        const countryCode = (params?.countryCode as string) || "in"
-        router.push(`/${countryCode}/guest-orders`)
-      } else {
-        setError(res.error || "Invalid OTP")
-      }
-    } catch (e: any) {
-      setError(e.message)
-    } finally {
-      setIsLoading(false)
-    }
-  }
-
-  const reset = () => {
-    setEmail("")
-    setOtp("")
-    setStep("email")
-    setError(null)
-    setSuccess(false)
-    close()
-  }
-
-  return (
-    <Modal isOpen={isOpen} close={reset} size="small">
-      <Modal.Body>
-        <div className="flex flex-col gap-6 py-4 px-2">
-          {/* Header */}
-          <div className="text-center">
-            <h2 className="text-2xl font-bold text-heading mb-2">
-              {step === "email" ? "Track Your Order" : "Verify OTP"}
-            </h2>
-            <p className="text-sm text-gray-500 leading-relaxed max-w-[300px] mx-auto">
-              {step === "email"
-                ? "Enter your email address to track your guest orders. We will send you a One-Time Password (OTP)."
-                : `Enter the 6-digit code sent to ${email}`}
-            </p>
-          </div>
-
-          {success ? (
-            <div className="flex flex-col items-center gap-4 py-6">
-              <div className="text-brand-accent animate-pulse font-bold">
-                Verification Successful!
-              </div>
-              <Spinner />
-            </div>
-          ) : step === "email" ? (
-            <div className="space-y-4">
-              <div className="relative">
-                <div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none text-gray-400">
-                  <Envelope size="20" />
-                </div>
-                <input
-                  placeholder="Email"
-                  value={email}
-                  onChange={(e) => setEmail(e.target.value)}
-                  autoComplete="email"
-                  type="email"
-                  required
-                  className="w-full pl-12 pr-4 py-3 border border-gray-300 focus:outline-none focus:ring-2 focus:ring-brand-accent transition-all text-sm"
-                  style={{ borderRadius: "30px" }}
-                />
-              </div>
-
-              {error && <p className="text-red-500 text-xs text-center">{error}</p>}
-
-              <button
-                className="w-full py-3 bg-brand-accent text-inverse font-bold hover:bg-brand-accent-hover transition-colors flex justify-center items-center gap-2"
-                style={{ borderRadius: "30px" }}
-                onClick={() => handleSendOtp()}
-                disabled={isLoading || !email}
-              >
-                {isLoading ? <Spinner size={16} /> : "Send OTP"}
-              </button>
-            </div>
-          ) : (
-            <div className="space-y-4">
-              <div className="relative flex justify-center gap-x-2.5 mt-6">
-                {[0, 1, 2, 3, 4, 5].map((index) => (
-                  <div
-                    key={index}
-                    className={`w-10 h-12 flex items-center justify-center border-2 rounded-lg text-xl font-bold transition-all duration-200 ${
-                      otp.length === index
-                        ? "border-brand-accent ring-2 ring-brand-accent/10 bg-page-bg"
-                        : otp.length > index
-                          ? "border-gray-400 bg-page-bg shadow-sm"
-                          : "border-gray-200 bg-gray-50/50"
-                    }`}
-                  >
-                    {otp[index] || ""}
-                  </div>
-                ))}
-                <input
-                  type="text"
-                  maxLength={6}
-                  className="absolute inset-0 opacity-0 cursor-pointer"
-                  value={otp}
-                  onChange={(e) =>
-                    setOtp(e.target.value.replace(/\D/g, "").slice(0, 6))
-                  }
-                  autoFocus
-                />
-              </div>
-
-              {error && <p className="text-red-500 text-xs text-center">{error}</p>}
-
-              <div className="space-y-3">
-                <button
-                  className="w-full py-3 bg-brand-accent text-inverse font-bold hover:bg-brand-accent-hover transition-colors flex justify-center items-center gap-2"
-                  style={{ borderRadius: "30px" }}
-                  onClick={handleVerifyOtp}
-                  disabled={isLoading || otp.length < 6}
-                >
-                  {isLoading ? <Spinner size={16} /> : "Verify & View Orders"}
-                </button>
-
-                <button
-                  onClick={() => setStep("email")}
-                  className="text-xs text-gray-500 hover:text-brand-accent w-full text-center underline font-medium"
-                >
-                  Change Email
-                </button>
-              </div>
-            </div>
-          )}
-        </div>
-      </Modal.Body>
-    </Modal>
-  )
-}
-
 export default Login

package/src/components/otp-input/index.tsx

@@ -0,0 +1,57 @@
+"use client"
+
+type OtpInputProps = {
+  value: string
+  onChange: (value: string) => void
+  length?: number
+  autoFocus?: boolean
+  activeClassName?: string
+  filledClassName?: string
+  emptyClassName?: string
+}
+
+const DEFAULT_ACTIVE =
+  "border-brand-accent ring-2 ring-brand-accent/10 bg-page-bg"
+const DEFAULT_FILLED = "border-gray-400 bg-page-bg shadow-sm"
+const DEFAULT_EMPTY = "border-gray-200 bg-gray-50/50"
+
+export default function OtpInput({
+  value,
+  onChange,
+  length = 6,
+  autoFocus = false,
+  activeClassName = DEFAULT_ACTIVE,
+  filledClassName = DEFAULT_FILLED,
+  emptyClassName = DEFAULT_EMPTY,
+}: OtpInputProps) {
+  return (
+    <div className="relative flex justify-center gap-x-2.5">
+      {Array.from({ length }, (_, index) => (
+        <div
+          key={index}
+          className={`w-10 h-12 flex items-center justify-center border-2 rounded-lg text-xl font-bold transition-all duration-200 ${
+            value.length === index
+              ? activeClassName
+              : value.length > index
+                ? filledClassName
+                : emptyClassName
+          }`}
+        >
+          {value[index] || ""}
+        </div>
+      ))}
+      <input
+        type="text"
+        inputMode="numeric"
+        maxLength={length}
+        className="absolute inset-0 opacity-0 cursor-pointer"
+        value={value}
+        onChange={(event) =>
+          onChange(event.target.value.replace(/\D/g, "").slice(0, length))
+        }
+        autoFocus={autoFocus}
+        aria-label="One-time password"
+      />
+    </div>
+  )
+}

package/src/components/otp-verification-modal/index.tsx

@@ -0,0 +1,94 @@
+"use client"
+
+import { Heading, Text, Button, clx } from "@medusajs/ui"
+import Modal from "@modules/common/components/modal"
+import OtpInput from "../otp-input"
+
+type OtpVerificationModalProps = {
+  isOpen: boolean
+  close: () => void
+  title?: string
+  description: string
+  otp: string
+  onOtpChange: (value: string) => void
+  onVerify: () => void
+  onResend?: () => void
+  isLoading?: boolean
+  error?: string | null
+  success?: boolean
+  successMessage?: string
+}
+
+export default function OtpVerificationModal({
+  isOpen,
+  close,
+  title = "Verify OTP",
+  description,
+  otp,
+  onOtpChange,
+  onVerify,
+  onResend,
+  isLoading = false,
+  error,
+  success = false,
+  successMessage = "Verification successful!",
+}: OtpVerificationModalProps) {
+  return (
+    <Modal isOpen={isOpen} close={close} size="small">
+      <Modal.Body>
+        <div className="flex flex-col gap-6 py-4 px-2">
+          <div className="text-center">
+            <Heading level="h2" className="text-2xl font-bold text-heading mb-2">
+              {title}
+            </Heading>
+            <Text className="text-sm text-gray-500 leading-relaxed max-w-[320px] mx-auto">
+              {description}
+            </Text>
+          </div>
+
+          {success ? (
+            <div className="text-center py-6">
+              <Text className="text-brand-accent font-bold animate-pulse">
+                {successMessage}
+              </Text>
+            </div>
+          ) : (
+            <>
+              <OtpInput value={otp} onChange={onOtpChange} autoFocus />
+
+              {error && (
+                <Text className="text-red-500 text-xs text-center">{error}</Text>
+              )}
+
+              <div className="space-y-3">
+                <Button
+                  onClick={onVerify}
+                  isLoading={isLoading}
+                  disabled={otp.length < 6}
+                  className={clx(
+                    "w-full py-3 bg-brand-accent text-inverse font-bold hover:bg-brand-accent-hover",
+                    "transition-colors"
+                  )}
+                  style={{ borderRadius: "30px" }}
+                >
+                  Verify
+                </Button>
+
+                {onResend && (
+                  <button
+                    type="button"
+                    onClick={onResend}
+                    disabled={isLoading}
+                    className="text-xs text-gray-500 hover:text-brand-accent w-full text-center underline font-medium"
+                  >
+                    Resend code
+                  </button>
+                )}
+              </div>
+            </>
+          )}
+        </div>
+      </Modal.Body>
+    </Modal>
+  )
+}

package/src/components/register/index.tsx

@@ -19,6 +19,7 @@ import {
 import LocalizedClientLink from "@modules/common/components/localized-client-link"
 import { Input, Button, Heading, Text, clx } from "@medusajs/ui"
 import Modal from "@modules/common/components/modal"
+import OtpInput from "../otp-input"
 import PhoneInput from "react-phone-input-2"
 import "react-phone-input-2/lib/style.css"
 import Spinner from "@modules/common/icons/spinner"
@@ -470,31 +471,8 @@ const Register = ({ setCurrentView }: Props) => {
                   </strong>
                 </Text>
 
-                <div className="relative flex justify-center gap-x-2.5 mt-8">
-                  {[0, 1, 2, 3, 4, 5].map((index) => (
-                    <div
-                      key={index}
-                      className={`w-10 h-12 flex items-center justify-center border-2 rounded-lg text-xl font-bold transition-all duration-200 ${
-                        otp.length === index
-                          ? "border-brand-accent ring-2 ring-brand-accent/10 bg-page-bg"
-                          : otp.length > index
-                            ? "border-gray-400 bg-page-bg shadow-sm"
-                            : "border-gray-200 bg-gray-50/50"
-                      }`}
-                    >
-                      {otp[index] || ""}
-                    </div>
-                  ))}
-                  <input
-                    type="text"
-                    maxLength={6}
-                    className="absolute inset-0 opacity-0 cursor-pointer"
-                    value={otp}
-                    onChange={(e) =>
-                      setOtp(e.target.value.replace(/\D/g, "").slice(0, 6))
-                    }
-                    autoFocus
-                  />
+                <div className="mt-8">
+                  <OtpInput value={otp} onChange={setOtp} autoFocus />
                 </div>
 
                 {actionError && (

package/src/hooks/use-customer-otp.ts

@@ -0,0 +1,90 @@
+"use client"
+
+import { useCallback, useState } from "react"
+import { sendCustomerOTP, verifyCustomerOTP } from "@core/data/customer-registration"
+
+type OtpVerificationType = "email_verification" | "phone_verification"
+
+export function useCustomerOtpVerification(customerId?: string | null) {
+  const [otpToken, setOtpToken] = useState<string | null>(null)
+  const [otp, setOtp] = useState("")
+  const [isSending, setIsSending] = useState(false)
+  const [isVerifying, setIsVerifying] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  const sendOtp = useCallback(
+    async (type: OtpVerificationType = "phone_verification") => {
+      if (!customerId) {
+        setError("Customer account is not ready yet.")
+        return false
+      }
+
+      setIsSending(true)
+      setError(null)
+
+      try {
+        const result = await sendCustomerOTP(customerId, type)
+        if (!result.success) {
+          setError(result.error || "Failed to send OTP")
+          return false
+        }
+
+        setOtpToken(result.token ?? null)
+        return true
+      } catch (err: unknown) {
+        setError(err instanceof Error ? err.message : "Failed to send OTP")
+        return false
+      } finally {
+        setIsSending(false)
+      }
+    },
+    [customerId]
+  )
+
+  const verifyOtp = useCallback(async () => {
+    if (!otpToken || otp.length < 6) {
+      setError("Please enter the 6-digit code.")
+      return false
+    }
+
+    setIsVerifying(true)
+    setError(null)
+
+    try {
+      const result = await verifyCustomerOTP(otpToken, otp)
+      if (!result.success) {
+        setError(result.error || "Invalid OTP")
+        return false
+      }
+
+      return true
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : "Failed to verify OTP")
+      return false
+    } finally {
+      setIsVerifying(false)
+    }
+  }, [otp, otpToken])
+
+  const reset = useCallback(() => {
+    setOtp("")
+    setOtpToken(null)
+    setError(null)
+  }, [])
+
+  return {
+    otp,
+    setOtp,
+    otpToken,
+    isSending,
+    isVerifying,
+    isLoading: isSending || isVerifying,
+    error,
+    sendOtp,
+    verifyOtp,
+    reset,
+    setError,
+  }
+}
+
+export type { OtpVerificationType }

package/src/hooks/use-guest-otp.ts

@@ -0,0 +1,125 @@
+"use client"
+
+import { useCallback, useEffect, useRef, useState } from "react"
+import { sendOTP, verifyOTP } from "@core/data/guest"
+
+type UseGuestOtpOptions = {
+  initialEmail?: string
+  autoStart?: boolean
+  isOpen?: boolean
+}
+
+export function useGuestOtp({
+  initialEmail = "",
+  autoStart = false,
+  isOpen = false,
+}: UseGuestOtpOptions = {}) {
+  const [email, setEmail] = useState(initialEmail)
+  const [otp, setOtp] = useState("")
+  const [step, setStep] = useState<"email" | "otp">("email")
+  const [isLoading, setIsLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [verificationToken, setVerificationToken] = useState<string | null>(null)
+  const [success, setSuccess] = useState(false)
+  const autoStartedRef = useRef(false)
+
+  useEffect(() => {
+    if (initialEmail) {
+      setEmail(initialEmail)
+    }
+  }, [initialEmail])
+
+  const reset = useCallback(() => {
+    setEmail(initialEmail)
+    setOtp("")
+    setStep("email")
+    setError(null)
+    setSuccess(false)
+    setVerificationToken(null)
+    autoStartedRef.current = false
+  }, [initialEmail])
+
+  const sendGuestOtp = useCallback(async (emailToSend = email) => {
+    if (!emailToSend) return false
+
+    setIsLoading(true)
+    setError(null)
+
+    try {
+      const res = (await sendOTP(emailToSend, "email_verification")) as {
+        token?: string
+        success?: boolean
+        error?: string
+      }
+
+      if (res.token || res.success !== false) {
+        setVerificationToken(res.token || "temp-token")
+        setStep("otp")
+        return true
+      }
+
+      setError(res.error || "Failed to send OTP")
+      setStep("email")
+      return false
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : "Failed to send OTP")
+      setStep("email")
+      return false
+    } finally {
+      setIsLoading(false)
+    }
+  }, [email])
+
+  const verifyGuestOtp = useCallback(async () => {
+    if (!otp) return null
+
+    setIsLoading(true)
+    setError(null)
+
+    try {
+      const res = (await verifyOTP(email, verificationToken || "", otp)) as {
+        success?: boolean
+        token?: string
+        error?: string
+      }
+
+      if (res.success !== false) {
+        setSuccess(true)
+        const token = res.token || "guest_access_token"
+        document.cookie = `_medusa_guest_token=${token}; path=/; max-age=3600; SameSite=Lax`
+        return token
+      }
+
+      setError(res.error || "Invalid OTP")
+      return null
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : "Failed to verify OTP")
+      return null
+    } finally {
+      setIsLoading(false)
+    }
+  }, [email, otp, verificationToken])
+
+  useEffect(() => {
+    if (isOpen && autoStart && initialEmail && !autoStartedRef.current) {
+      autoStartedRef.current = true
+      setIsLoading(true)
+      void sendGuestOtp(initialEmail)
+    }
+  }, [isOpen, autoStart, initialEmail, sendGuestOtp])
+
+  return {
+    email,
+    setEmail,
+    otp,
+    setOtp,
+    step,
+    setStep,
+    isLoading,
+    error,
+    success,
+    sendGuestOtp,
+    verifyGuestOtp,
+    reset,
+  }
+}

package/src/index.ts

@@ -9,6 +9,12 @@ export type {
 export { default as Login } from "./components/login"
 export { default as Register } from "./components/register"
 export { default as ForgotPassword } from "./components/forgot-password"
+export { default as OtpInput } from "./components/otp-input"
+export { default as GuestOrderModal } from "./components/guest-order-modal"
+export { default as OtpVerificationModal } from "./components/otp-verification-modal"
+export { useGuestOtp } from "./hooks/use-guest-otp"
+export { useCustomerOtpVerification } from "./hooks/use-customer-otp"
+export type { OtpVerificationType } from "./hooks/use-customer-otp"
 export { default as LoginTemplate } from "./templates/login-template"
 
 export {