@pradip1995/segment-login-template 0.3.0 → 0.4.1

package/src/commerce-auth-otp-modal.tsx

@@ -0,0 +1,104 @@
+"use client"
+
+import OtpInput from "@pradip1995/commerce-auth/components/otp-input"
+import type { OtpVerificationModalProps } from "./otp-verification-modal"
+
+/**
+ * OTP modal styled like commerce-auth/chocomelon, compatible with segment-login-template props.
+ * Use in pages.config: `"otpComponent": "@pradip1995/segment-login-template/commerce-auth-otp-modal"`
+ */
+export default function CommerceAuthOtpModal({
+  open,
+  title,
+  description,
+  otp,
+  onOtpChange,
+  error,
+  pending,
+  success = false,
+  successTitle = "Verified",
+  successMessage = "Verification successful!",
+  verifyLabel = "Verify",
+  onVerify,
+  onResend,
+  onClose,
+  preventClose = false,
+  extraContent,
+}: OtpVerificationModalProps) {
+  if (!open) return null
+
+  function handleBackdropClick() {
+    if (preventClose || pending || success) return
+    onClose?.()
+  }
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
+      <button
+        type="button"
+        className="absolute inset-0 bg-black/40"
+        aria-label="Close verification dialog"
+        onClick={handleBackdropClick}
+      />
+      <div className="relative w-full max-w-md rounded-2xl bg-page-bg shadow-xl p-6">
+        <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">
+              {success ? successTitle : title}
+            </h2>
+            {!success && (
+              <p className="text-sm text-gray-500 leading-relaxed max-w-[320px] mx-auto">
+                {description}
+              </p>
+            )}
+          </div>
+
+          {success ? (
+            <div className="text-center py-6">
+              <p className="text-brand-accent font-bold animate-pulse">{successMessage}</p>
+            </div>
+          ) : (
+            <>
+              {extraContent}
+
+              <OtpInput value={otp} onChange={onOtpChange} autoFocus />
+
+              {error && (
+                <p className="text-red-500 text-xs text-center" role="alert">
+                  {error}
+                </p>
+              )}
+
+              <div className="space-y-3">
+                <button
+                  type="button"
+                  onClick={onVerify}
+                  disabled={pending || otp.length < 6}
+                  className="w-full py-3 bg-brand-accent text-inverse font-bold hover:opacity-90 rounded-[30px] transition-colors disabled:opacity-60"
+                >
+                  {pending ? "Verifying…" : verifyLabel}
+                </button>
+
+                <button
+                  type="button"
+                  onClick={onResend}
+                  disabled={pending}
+                  className="text-xs text-gray-500 hover:text-brand-accent w-full text-center underline font-medium disabled:opacity-60"
+                >
+                  Resend code
+                </button>
+              </div>
+
+              {preventClose && (
+                <p className="text-xs text-muted text-center">
+                  Verification is required to complete{" "}
+                  {verifyLabel.toLowerCase().includes("sign in") ? "sign in" : "registration"}.
+                </p>
+              )}
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/google-auth-section.tsx

@@ -1,25 +1,86 @@
 "use client"
 
-import { initiateGoogleAuth } from "@pradip1995/commerce-core/client/actions/customer"
-import { GoogleLoginButton } from "@pradip1995/commerce-auth/components/google-login"
+import { useState } from "react"
+import {
+  clearMedusaAuthCookies,
+  GOOGLE_LOGIN_COUNTRY_CODE_KEY,
+} from "@pradip1995/commerce-auth/util/google-auth-client"
+import { initiateGoogleAuth } from "./auth-server"
 
 const BUTTON_CLASS =
   "btn-outline w-full flex items-center justify-center gap-2.5 py-3 px-4"
 
 export default function GoogleAuthSection({ countryCode }: { countryCode: string }) {
   const clientId = process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID?.trim()
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
 
   if (!clientId) return null
 
+  const handleClick = async () => {
+    setError(null)
+    setLoading(true)
+
+    try {
+      localStorage.setItem(GOOGLE_LOGIN_COUNTRY_CODE_KEY, countryCode)
+      clearMedusaAuthCookies()
+
+      const result = await initiateGoogleAuth(countryCode)
+
+      if (result.error) {
+        setError(result.error)
+        setLoading(false)
+        return
+      }
+
+      if (result.redirectUrl) {
+        window.location.href = result.redirectUrl
+        return
+      }
+
+      setLoading(false)
+    } catch {
+      setError("Google sign-in failed. Please try again.")
+      setLoading(false)
+    }
+  }
+
   return (
     <div className="mb-6">
-      <GoogleLoginButton
-        countryCode={countryCode}
-        defaultCountryCode="in"
-        initiateAuth={initiateGoogleAuth}
+      {error && (
+        <p className="mb-3 text-sm text-red-600" role="alert">
+          {error}
+        </p>
+      )}
+      <button
+        type="button"
+        onClick={handleClick}
+        disabled={loading}
         className={BUTTON_CLASS}
-        googleIconSrc="/Google.svg"
-      />
+        style={{ borderRadius: "30px" }}
+      >
+        <svg width="20" height="20" viewBox="0 0 24 24" aria-hidden="true">
+          <path
+            fill="#4285F4"
+            d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
+          />
+          <path
+            fill="#34A853"
+            d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
+          />
+          <path
+            fill="#FBBC05"
+            d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
+          />
+          <path
+            fill="#EA4335"
+            d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
+          />
+        </svg>
+        <span className="text-sm text-gray-700 font-bold">
+          {loading ? "Connecting..." : "Continue with Google"}
+        </span>
+      </button>
     </div>
   )
 }

package/src/index.ts

@@ -1,3 +1,7 @@
 export { default } from "./segment"
 export { default as manifest } from "./manifest"
 export { default as ResetPasswordPage } from "./reset-password-page"
+export { default as OtpVerificationModal } from "./otp-verification-modal"
+export { default as CommerceAuthOtpModal } from "./commerce-auth-otp-modal"
+export type { OtpVerificationModalProps } from "./otp-verification-modal"
+export { resolveOtpComponent, type OtpVerificationComponent } from "./otp-component"

package/src/login-form.tsx

@@ -1,20 +1,22 @@
 "use client"
 
 import { useActionState, useState } from "react"
-import { useRouter } from "next/navigation"
 import { login } from "@pradip1995/commerce-core/client/actions/customer"
 import { sendAuthOtp, sendOTP, verifyAuthOtpAndLogin, verifyOTP } from "./auth-server"
-import OtpInput from "./otp-input"
 import GoogleAuthSection from "./google-auth-section"
+import OtpVerificationModal from "./otp-verification-modal"
+import type { OtpVerificationComponent } from "./otp-component"
 
 type LoginMode = "password" | "otp"
 
 export default function LoginForm({
   countryCode,
+  OtpComponent = OtpVerificationModal,
   onForgot,
   onRegister,
 }: {
   countryCode: string
+  OtpComponent?: OtpVerificationComponent
   onForgot: () => void
   onRegister: () => void
 }) {
@@ -45,7 +47,7 @@ export default function LoginForm({
       {mode === "password" ? (
         <PasswordLoginForm countryCode={countryCode} onForgot={onForgot} />
       ) : (
-        <OtpLoginForm countryCode={countryCode} />
+        <OtpLoginForm countryCode={countryCode} OtpComponent={OtpComponent} />
       )}
 
       <p className="text-sm text-center text-muted">
@@ -95,7 +97,11 @@ function PasswordLoginForm({
       <Field label="Email or phone" name="email_or_phone" type="text" autoComplete="username" />
       <Field label="Password" name="password" type="password" autoComplete="current-password" />
       {state && typeof state === "string" && state !== "ACCOUNT_DELETION_PENDING" && (
-        <p className="text-sm text-brand-sale">{state}</p>
+        <p className="text-sm text-brand-sale">
+          {state === "Email not verified." || state.includes("not verified")
+            ? "Your email is not verified yet. Complete OTP verification during registration, or use OTP sign-in below."
+            : state}
+        </p>
       )}
       {state === "ACCOUNT_DELETION_PENDING" && (
         <p className="text-sm text-brand-sale">
@@ -116,13 +122,18 @@ function PasswordLoginForm({
   )
 }
 
-function OtpLoginForm({ countryCode }: { countryCode: string }) {
-  const router = useRouter()
+function OtpLoginForm({
+  countryCode,
+  OtpComponent,
+}: {
+  countryCode: string
+  OtpComponent: OtpVerificationComponent
+}) {
   const [authMethod, setAuthMethod] = useState<"email_auth" | "phone_auth" | "guest">("email_auth")
   const [identifier, setIdentifier] = useState("")
   const [otpToken, setOtpToken] = useState<string | null>(null)
   const [otp, setOtp] = useState("")
-  const [step, setStep] = useState<"identifier" | "otp">("identifier")
+  const [showOtpModal, setShowOtpModal] = useState(false)
   const [error, setError] = useState<string | null>(null)
   const [pending, setPending] = useState(false)
   const [isNewUser, setIsNewUser] = useState(false)
@@ -141,14 +152,15 @@ function OtpLoginForm({ countryCode }: { countryCode: string }) {
           throw new Error((res as { error?: string }).error)
         }
         setOtpToken("guest")
-        setStep("otp")
+        setOtp("")
+        setShowOtpModal(true)
         return
       }
 
       const res = await sendAuthOtp(
         authMethod === "email_auth"
-          ? { email: identifier, type: "email_auth" }
-          : { phone: identifier, type: "phone_auth" }
+          ? { email: identifier.trim(), type: "email_auth" }
+          : { phone: identifier.replace(/[^\d+]/g, ""), type: "phone_auth" }
       )
 
       if (!res.success) {
@@ -157,7 +169,8 @@ function OtpLoginForm({ countryCode }: { countryCode: string }) {
 
       setOtpToken(res.token ?? null)
       setIsNewUser(res.isNewUser ?? false)
-      setStep("otp")
+      setOtp("")
+      setShowOtpModal(true)
     } catch (err) {
       setError(err instanceof Error ? err.message : "Failed to send code")
     } finally {
@@ -165,8 +178,40 @@ function OtpLoginForm({ countryCode }: { countryCode: string }) {
     }
   }
 
-  async function handleVerifyOtp(e: React.FormEvent) {
-    e.preventDefault()
+  async function handleResendOtp() {
+    setPending(true)
+    setError(null)
+
+    try {
+      if (authMethod === "guest") {
+        const res = await sendOTP(identifier)
+        if (!res.success && (res as { error?: string }).error) {
+          throw new Error((res as { error?: string }).error)
+        }
+        setOtp("")
+        return
+      }
+
+      const res = await sendAuthOtp(
+        authMethod === "email_auth"
+          ? { email: identifier.trim(), type: "email_auth" }
+          : { phone: identifier.replace(/[^\d+]/g, ""), type: "phone_auth" }
+      )
+
+      if (!res.success) {
+        throw new Error(res.error)
+      }
+
+      setOtpToken(res.token ?? null)
+      setOtp("")
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to resend code")
+    } finally {
+      setPending(false)
+    }
+  }
+
+  async function handleVerifyOtp() {
     if (!otp || otp.length < 6) return
 
     setPending(true)
@@ -182,7 +227,7 @@ function OtpLoginForm({ countryCode }: { countryCode: string }) {
         if (token) {
           document.cookie = `_medusa_guest_token=${token}; path=/; max-age=86400; SameSite=Lax`
         }
-        router.push(`/${countryCode}/account/guest-orders`)
+        window.location.href = `/${countryCode}/account/guest-orders`
         return
       }
 
@@ -204,87 +249,98 @@ function OtpLoginForm({ countryCode }: { countryCode: string }) {
     }
   }
 
-  if (step === "otp") {
-    return (
-      <form onSubmit={handleVerifyOtp} className="space-y-4">
-        <p className="text-sm text-muted text-center">
-          Enter the 6-digit code sent to <span className="font-medium text-heading">{identifier}</span>
+  const otpTitle =
+    authMethod === "guest"
+      ? "Verify guest order access"
+      : authMethod === "phone_auth"
+        ? "Verify your phone"
+        : "Verify your email"
+
+  return (
+    <>
+      <form onSubmit={handleSendOtp} className="space-y-4">
+        <div className="flex flex-wrap gap-2">
+          <Chip active={authMethod === "email_auth"} onClick={() => setAuthMethod("email_auth")}>
+            Email OTP
+          </Chip>
+          <Chip active={authMethod === "phone_auth"} onClick={() => setAuthMethod("phone_auth")}>
+            Phone OTP
+          </Chip>
+          <Chip active={authMethod === "guest"} onClick={() => setAuthMethod("guest")}>
+            Guest orders
+          </Chip>
+        </div>
+
+        <Field
+          label={authMethod === "phone_auth" ? "Phone" : "Email"}
+          name="identifier"
+          type={authMethod === "phone_auth" ? "tel" : "email"}
+          value={identifier}
+          onChange={(e) => setIdentifier(e.target.value)}
+          autoComplete={authMethod === "phone_auth" ? "tel" : "email"}
+        />
+
+        <p className="text-xs text-muted">
+          {authMethod === "guest"
+            ? "We will send a one-time code to view your guest orders."
+            : "We will send a one-time code to sign in or create your account."}
         </p>
 
-        {isNewUser && authMethod !== "guest" && (
-          <div className="grid grid-cols-2 gap-3">
-            <Field
-              label="First name"
-              name="first_name"
-              type="text"
-              value={firstName}
-              onChange={(e) => setFirstName(e.target.value)}
-            />
-            <Field
-              label="Last name"
-              name="last_name"
-              type="text"
-              value={lastName}
-              onChange={(e) => setLastName(e.target.value)}
-            />
-          </div>
-        )}
-
-        <OtpInput value={otp} onChange={setOtp} autoFocus />
-        {error && <p className="text-sm text-brand-sale text-center">{error}</p>}
-        <button type="submit" disabled={pending || otp.length < 6} className="btn-primary w-full disabled:opacity-60">
-          {pending ? "Verifying…" : "Verify & continue"}
-        </button>
+        {error && !showOtpModal && <p className="text-sm text-brand-sale">{error}</p>}
+
         <button
-          type="button"
-          className="text-sm text-muted hover:text-brand-accent w-full text-center"
-          onClick={() => {
-            setStep("identifier")
-            setOtp("")
-            setError(null)
-          }}
+          type="submit"
+          disabled={pending || !identifier.trim()}
+          className="btn-primary w-full disabled:opacity-60"
         >
-          Use a different {authMethod === "phone_auth" ? "phone" : "email"}
+          {pending ? "Sending…" : "Send verification code"}
         </button>
       </form>
-    )
-  }
-
-  return (
-    <form onSubmit={handleSendOtp} className="space-y-4">
-      <div className="flex flex-wrap gap-2">
-        <Chip active={authMethod === "email_auth"} onClick={() => setAuthMethod("email_auth")}>
-          Email OTP
-        </Chip>
-        <Chip active={authMethod === "phone_auth"} onClick={() => setAuthMethod("phone_auth")}>
-          Phone OTP
-        </Chip>
-        <Chip active={authMethod === "guest"} onClick={() => setAuthMethod("guest")}>
-          Guest orders
-        </Chip>
-      </div>
 
-      <Field
-        label={authMethod === "phone_auth" ? "Phone" : "Email"}
-        name="identifier"
-        type={authMethod === "phone_auth" ? "tel" : "email"}
-        value={identifier}
-        onChange={(e) => setIdentifier(e.target.value)}
-        autoComplete={authMethod === "phone_auth" ? "tel" : "email"}
+      <OtpComponent
+        open={showOtpModal}
+        preventClose
+        title={otpTitle}
+        description={`Enter the 6-digit code sent to ${identifier || "your contact"}.`}
+        otp={otp}
+        onOtpChange={setOtp}
+        error={error}
+        pending={pending}
+        verifyLabel="Verify & sign in"
+        onVerify={handleVerifyOtp}
+        onResend={handleResendOtp}
+        extraContent={
+          isNewUser && authMethod !== "guest" ? (
+            <div className="grid grid-cols-2 gap-3 mb-6">
+              <label className="block">
+                <span className="text-xs font-semibold uppercase tracking-[var(--letter-spacing-nav)] text-muted mb-1.5 block">
+                  First name
+                </span>
+                <input
+                  type="text"
+                  value={firstName}
+                  onChange={(e) => setFirstName(e.target.value)}
+                  required
+                  className="w-full border border-cart-border rounded px-3 py-2.5 text-sm bg-surface focus:outline-none focus:border-brand-accent"
+                />
+              </label>
+              <label className="block">
+                <span className="text-xs font-semibold uppercase tracking-[var(--letter-spacing-nav)] text-muted mb-1.5 block">
+                  Last name
+                </span>
+                <input
+                  type="text"
+                  value={lastName}
+                  onChange={(e) => setLastName(e.target.value)}
+                  required
+                  className="w-full border border-cart-border rounded px-3 py-2.5 text-sm bg-surface focus:outline-none focus:border-brand-accent"
+                />
+              </label>
+            </div>
+          ) : undefined
+        }
       />
-
-      <p className="text-xs text-muted">
-        {authMethod === "guest"
-          ? "Track a guest order with a one-time code — no account required."
-          : "We will send a one-time code to sign in or create your account."}
-      </p>
-
-      {error && <p className="text-sm text-brand-sale">{error}</p>}
-
-      <button type="submit" disabled={pending || !identifier.trim()} className="btn-primary w-full disabled:opacity-60">
-        {pending ? "Sending…" : "Send code"}
-      </button>
-    </form>
+    </>
   )
 }
 

package/src/otp-component.ts

@@ -0,0 +1,14 @@
+import type { ComponentType } from "react"
+import type { OtpVerificationModalProps } from "./otp-verification-modal"
+import DefaultOtpVerificationModal from "./otp-verification-modal"
+
+export type OtpVerificationComponent = ComponentType<OtpVerificationModalProps>
+
+export function resolveOtpComponent(
+  component?: OtpVerificationComponent | string
+): OtpVerificationComponent {
+  if (!component || typeof component === "string") {
+    return DefaultOtpVerificationModal
+  }
+  return component
+}

package/src/otp-verification-modal.tsx

@@ -0,0 +1,112 @@
+"use client"
+
+import OtpInput from "./otp-input"
+
+export type OtpVerificationModalProps = {
+  open: boolean
+  title: string
+  description: string
+  otp: string
+  onOtpChange: (value: string) => void
+  error: string | null
+  pending: boolean
+  success?: boolean
+  successTitle?: string
+  successMessage?: string
+  verifyLabel?: string
+  onVerify: () => void
+  onResend: () => void
+  onClose?: () => void
+  /** When true, backdrop click does not dismiss the modal (registration OTP). */
+  preventClose?: boolean
+  extraContent?: React.ReactNode
+}
+
+export default function OtpVerificationModal({
+  open,
+  title,
+  description,
+  otp,
+  onOtpChange,
+  error,
+  pending,
+  success = false,
+  successTitle = "Verified",
+  successMessage = "Redirecting you…",
+  verifyLabel = "Verify & continue",
+  onVerify,
+  onResend,
+  onClose,
+  preventClose = false,
+  extraContent,
+}: OtpVerificationModalProps) {
+  if (!open) return null
+
+  function handleBackdropClick() {
+    if (preventClose || pending || success) return
+    onClose?.()
+  }
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
+      <button
+        type="button"
+        className="absolute inset-0 bg-black/40"
+        aria-label="Close verification dialog"
+        onClick={handleBackdropClick}
+      />
+      <div className="relative w-full max-w-md rounded-2xl bg-page-bg border border-cart-border shadow-xl p-6">
+        {success ? (
+          <div className="text-center space-y-4 py-4">
+            <div className="w-14 h-14 mx-auto rounded-full bg-green-100 flex items-center justify-center text-2xl text-green-600">
+              ✓
+            </div>
+            <h2 className="section-heading text-lg">{successTitle}</h2>
+            <p className="text-sm text-muted">{successMessage}</p>
+          </div>
+        ) : (
+          <>
+            <h2 className="section-heading text-lg text-center mb-2">{title}</h2>
+            <p className="text-sm text-muted text-center mb-6">{description}</p>
+
+            {extraContent}
+
+            <div className="mb-6">
+              <OtpInput value={otp} onChange={onOtpChange} autoFocus />
+            </div>
+
+            {error && (
+              <p className="text-sm text-brand-sale text-center mb-4" role="alert">
+                {error}
+              </p>
+            )}
+
+            <button
+              type="button"
+              onClick={onVerify}
+              disabled={pending || otp.length < 6}
+              className="btn-primary w-full disabled:opacity-60 mb-3"
+            >
+              {pending ? "Verifying…" : verifyLabel}
+            </button>
+
+            <button
+              type="button"
+              onClick={onResend}
+              disabled={pending}
+              className="text-sm text-muted hover:text-brand-accent w-full text-center disabled:opacity-60"
+            >
+              Didn&apos;t receive the code? Resend
+            </button>
+
+            {preventClose && (
+              <p className="text-xs text-muted text-center mt-4">
+                Verification is required to complete {verifyLabel.includes("sign in") ? "sign in" : "registration"}.
+              </p>
+            )}
+          </>
+        )}
+      </div>
+    </div>
+  )
+}