@pradip1995/segment-login-template 0.4.3 → 0.5.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pradip1995/segment-login-template",
-  "version": "0.4.3",
+  "version": "0.5.3",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
@@ -15,15 +15,22 @@
     "./reset-password": "./src/reset-password-page.tsx",
     "./otp-verification-modal": "./src/otp-verification-modal.tsx",
     "./commerce-auth-otp-modal": "./src/commerce-auth-otp-modal.tsx",
-    "./otp-component": "./src/otp-component.ts"
+    "./otp-component": "./src/otp-component.ts",
+    "./auth-server": "./src/auth-server.ts",
+    "./google-auth-section": "./src/google-auth-section.tsx",
+    "./otp-input": "./src/otp-input.tsx"
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "lint": "tsc --noEmit"
   },
   "peerDependencies": {
     "@pradip1995/commerce-auth": "^4.0.0",
     "@pradip1995/commerce-core": "^4.0.0",
     "@pradip1995/plugin-sdk": "^0.2.0",
+    "next": ">=15",
     "react": ">=19",
-    "react-dom": ">=19",
-    "next": ">=15"
+    "react-dom": ">=19"
   },
   "dependencies": {
     "@pradip1995/commerce-auth": "^4.0.0",
@@ -36,9 +43,5 @@
     "@types/react": "^19",
     "react": "19.0.3",
     "typescript": "^5.7.2"
-  },
-  "scripts": {
-    "typecheck": "tsc --noEmit",
-    "lint": "tsc --noEmit"
   }
-}
+}

package/src/account-payment-methods.tsx

@@ -92,6 +92,13 @@ export default function AccountPaymentMethods({
   }
 
   async function handleDelete(id: string) {
+    const target = paymentDetails.find((d) => d.id === id)
+    if (target?.is_default && paymentDetails.length === 1) {
+      setError(
+        "The default payment method cannot be removed. Please add another payment method and set it as default before removing this one."
+      )
+      return
+    }
     if (!confirm("Remove this payment method?")) return
     setPending(true)
     setError(null)

package/src/account-theme.ts

@@ -72,8 +72,20 @@ export const auth = {
     "px-3 py-1.5 text-xs font-medium border border-cart-border text-muted hover:text-heading transition-colors duration-200",
 } as const
 
+export type BrandFeatureCard = {
+  imageSrc?: string | null
+  title: string
+  text: string
+}
+
 export type BrandPanelConfig = {
   image?: string | null
+  logo?: string | null
   eyebrow?: string | null
   headline?: string | null
+  /** Sahsha alias for headline */
+  title?: string | null
+  description?: string | null
+  featuresLabel?: string | null
+  featureCards?: BrandFeatureCard[] | null
 }

package/src/auth-server.ts

@@ -112,6 +112,8 @@ export async function verifyAuthOtpAndLogin(input: {
   countryCode: string
   first_name?: string
   last_name?: string
+  /** When true, return success instead of redirecting (used by login popup). */
+  skipRedirect?: boolean
 }) {
   const baseUrl = getBaseUrl()
 
@@ -128,9 +130,17 @@ export async function verifyAuthOtpAndLogin(input: {
 
   if (!response.ok) {
     const err = await response.json().catch(() => ({}))
+    const raw =
+      (err as { message?: string }).message || "Invalid verification code"
+    const lower = raw.toLowerCase()
+    const error =
+      lower.includes("unable to retrieve the auth provider") &&
+      (lower.includes("emailotp") || lower.includes("phoneotp"))
+        ? "OTP sign-in is not configured on the backend. Ask the shop admin to enable emailotp/phoneotp auth providers and redeploy."
+        : raw.replace(/\s+/g, " ").trim()
     return {
       success: false as const,
-      error: (err as { message?: string }).message || "Invalid verification code",
+      error,
     }
   }
 
@@ -151,14 +161,20 @@ export async function verifyAuthOtpAndLogin(input: {
 
   await setAuthToken(jwt)
 
-  try {
-    await transferCart(jwt)
-  } catch {
-    // non-fatal
-  }
+  // Don't block login on cart merge — middleware recovers guest cart after redirect.
+  void transferCart(jwt).catch(() => {})
 
   const customerCacheTag = await getCacheTag("customers")
-  revalidateTag(customerCacheTag)
+  if (customerCacheTag) {
+    revalidateTag(customerCacheTag)
+  }
+
+  if (input.skipRedirect) {
+    return {
+      success: true as const,
+      isNewUser: data.is_new_user ?? false,
+    }
+  }
 
   const countryCode = input.countryCode || "in"
   redirect(`/${countryCode}`)

package/src/login-brand-panel.tsx

@@ -29,10 +29,12 @@ export default function LoginBrandPanel({
   variant = "desktop",
 }: LoginBrandPanelProps) {
   const image = panel?.image || PLACEHOLDER
+  const headline = panel?.headline || panel?.title
+  const features = panel?.featureCards?.filter((c) => c.title && c.text) || []
 
   if (variant === "mobile") {
     return (
-      <div className="relative w-full h-[26vh] min-h-[160px] max-h-[200px] shrink-0 overflow-hidden bg-page-bg lg:hidden">
+      <div className="relative w-full h-[26vh] min-h-[160px] max-h-[220px] shrink-0 overflow-hidden bg-page-bg lg:hidden">
         <Image
           src={image}
           alt=""
@@ -42,17 +44,27 @@ export default function LoginBrandPanel({
           priority
           unoptimized={image.startsWith("data:")}
         />
-        <div className="absolute inset-0 bg-gradient-to-b from-transparent via-page-bg/20 to-page-bg" />
-        {(panel?.eyebrow || panel?.headline) && (
+        <div className="absolute inset-0 bg-gradient-to-b from-black/25 via-transparent to-page-bg" />
+        {(panel?.eyebrow || headline) && (
           <div className="absolute inset-x-0 bottom-0 p-5 z-[1]">
-            {panel.eyebrow && (
+            {panel?.logo && (
+              <Image
+                src={panel.logo}
+                alt=""
+                width={140}
+                height={40}
+                className="h-8 w-auto object-contain mb-2"
+                unoptimized
+              />
+            )}
+            {panel?.eyebrow && (
               <p className="text-[10px] font-semibold uppercase tracking-[0.28em] text-inverse/80 mb-1">
                 {panel.eyebrow}
               </p>
             )}
-            {panel.headline && (
+            {headline && (
               <p className="font-heading text-lg text-inverse font-bold tracking-wide">
-                {panel.headline}
+                {headline}
               </p>
             )}
           </div>
@@ -62,7 +74,7 @@ export default function LoginBrandPanel({
   }
 
   return (
-    <div className="relative hidden lg:block lg:w-1/2 h-full shrink-0 overflow-hidden bg-page-bg">
+    <div className="relative hidden lg:flex lg:w-1/2 h-full shrink-0 overflow-hidden bg-heading flex-col">
       <Image
         src={image}
         alt=""
@@ -73,24 +85,74 @@ export default function LoginBrandPanel({
         unoptimized={image.startsWith("data:")}
       />
       <div
-        className="absolute inset-y-0 right-0 w-[50%] min-w-[200px] bg-gradient-to-l from-page-bg via-page-bg/80 to-transparent"
+        className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/45 to-black/25"
         aria-hidden
       />
-      <div className="absolute inset-0 bg-gradient-to-r from-black/[0.04] via-transparent to-transparent" />
-      {(panel?.eyebrow || panel?.headline) && (
-        <div className="absolute inset-x-0 bottom-0 p-10 xl:p-14 z-[1] max-w-md">
-          {panel.eyebrow && (
-            <p className="text-[10px] font-semibold uppercase tracking-[0.28em] text-inverse/70 mb-2">
+
+      <div className="relative z-[1] flex flex-1 flex-col justify-between p-10 xl:p-14 text-inverse">
+        <div>
+          {panel?.logo ? (
+            <Image
+              src={panel.logo}
+              alt=""
+              width={180}
+              height={48}
+              className="h-12 w-auto object-contain mb-6"
+              unoptimized
+            />
+          ) : panel?.eyebrow ? (
+            <p className="text-[10px] font-semibold uppercase tracking-[0.28em] text-inverse/70 mb-3">
               {panel.eyebrow}
             </p>
+          ) : null}
+
+          {headline && (
+            <h2 className="font-heading text-3xl xl:text-4xl font-bold tracking-wide leading-snug">
+              {headline}
+            </h2>
           )}
-          {panel.headline && (
-            <p className="font-heading text-2xl xl:text-3xl text-inverse font-bold tracking-wide leading-snug">
-              {panel.headline}
+          {panel?.description && (
+            <p className="mt-3 text-sm text-inverse/80 leading-relaxed max-w-md">
+              {panel.description}
             </p>
           )}
         </div>
-      )}
+
+        {features.length > 0 && (
+          <div className="mt-8">
+            {panel?.featuresLabel && (
+              <p className="text-[10px] font-semibold uppercase tracking-[0.24em] text-inverse/60 mb-4">
+                {panel.featuresLabel}
+              </p>
+            )}
+            <ul className="space-y-3">
+              {features.map((card, index) => (
+                <li key={`${card.title}-${index}`} className="flex gap-3 items-start">
+                  {card.imageSrc ? (
+                    <Image
+                      src={card.imageSrc}
+                      alt=""
+                      width={28}
+                      height={28}
+                      className="mt-0.5 shrink-0"
+                      unoptimized
+                    />
+                  ) : (
+                    <span
+                      className="mt-1.5 h-2 w-2 rounded-full bg-brand-accent shrink-0"
+                      aria-hidden
+                    />
+                  )}
+                  <div>
+                    <p className="text-sm font-semibold text-inverse">{card.title}</p>
+                    <p className="text-xs text-inverse/70 mt-0.5">{card.text}</p>
+                  </div>
+                </li>
+              ))}
+            </ul>
+          </div>
+        )}
+      </div>
     </div>
   )
 }

package/src/login-form.tsx

@@ -257,13 +257,16 @@ function OtpLoginForm({
         throw new Error("Please enter your first and last name to finish registration")
       }
 
-      await verifyAuthOtpAndLogin({
+      const result = await verifyAuthOtpAndLogin({
         token: otpToken || "",
         code: otp,
         countryCode,
         first_name: isNewUser ? firstName.trim() : undefined,
         last_name: isNewUser ? lastName.trim() : undefined,
       })
+      if (result && !result.success) {
+        throw new Error(result.error || "Verification failed")
+      }
     } catch (err) {
       if (isNextRedirect(err)) throw err
       setError(err instanceof Error ? err.message : "Verification failed")

package/src/otp-unified-form.tsx

@@ -0,0 +1,340 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import { SplitPhoneInput } from "@pradip1995/commerce-core/components/split-phone-input"
+import {
+  formatPhoneDisplay,
+  isValidPhoneParts,
+  parsePhoneParts,
+  toE164Phone,
+} from "@pradip1995/commerce-core/util/phone"
+import { sendAuthOtp, verifyAuthOtpAndLogin } from "./auth-server"
+import GoogleAuthSection from "./google-auth-section"
+import OtpInput from "./otp-input"
+import { auth } from "./account-theme"
+import { AuthDivider, AuthField, Ornament } from "./login-form"
+
+type AuthMethod = "email_auth" | "phone_auth"
+type OtpStep = "identifier" | "verify"
+
+const RESEND_COOLDOWN_SEC = 30
+
+/**
+ * Sahsha-style single-screen OTP auth: Google + Mobile/Email OTP.
+ * New users finish signup in the same verify step (first name).
+ */
+export default function OtpUnifiedForm({
+  countryCode,
+  onTrackGuest,
+}: {
+  countryCode: string
+  onTrackGuest?: () => void
+}) {
+  const [authMethod, setAuthMethod] = useState<AuthMethod>("phone_auth")
+  const [identifier, setIdentifier] = useState("")
+  const [otpToken, setOtpToken] = useState<string | null>(null)
+  const [otp, setOtp] = useState("")
+  const [step, setStep] = useState<OtpStep>("identifier")
+  const [error, setError] = useState<string | null>(null)
+  const [sending, setSending] = useState(false)
+  const [verifying, setVerifying] = useState(false)
+  const [isNewUser, setIsNewUser] = useState(false)
+  const [firstName, setFirstName] = useState("")
+  const [resendIn, setResendIn] = useState(0)
+
+  useEffect(() => {
+    if (resendIn <= 0) return
+    const timer = window.setTimeout(() => setResendIn((s) => s - 1), 1000)
+    return () => window.clearTimeout(timer)
+  }, [resendIn])
+
+  const phoneParts = parsePhoneParts(identifier)
+  const phoneReady =
+    authMethod === "phone_auth" &&
+    isValidPhoneParts(phoneParts.dialCode, phoneParts.localNumber)
+  const identifierReady =
+    authMethod === "email_auth" ? Boolean(identifier.trim()) : phoneReady
+
+  async function handleSendOtp(options?: { resend?: boolean }) {
+    if (!identifierReady || sending) return
+    setSending(true)
+    setError(null)
+
+    // Advance immediately so the user is not stuck on "Sending…" during SMTP/SMS.
+    if (!options?.resend) {
+      setOtp("")
+      setFirstName("")
+      setOtpToken(null)
+      setStep("verify")
+    }
+
+    try {
+      const res = await sendAuthOtp(
+        authMethod === "email_auth"
+          ? { email: identifier.trim(), type: "email_auth" }
+          : { phone: toE164Phone(identifier), type: "phone_auth" }
+      )
+      if (!res.success) throw new Error(res.error)
+      setOtpToken(res.token ?? null)
+      setIsNewUser(res.isNewUser ?? false)
+      setOtp("")
+      setResendIn(RESEND_COOLDOWN_SEC)
+    } catch (err) {
+      const message = err instanceof Error ? err.message : "Failed to send code"
+      setError(message)
+      if (!options?.resend) {
+        setStep("identifier")
+      }
+    } finally {
+      setSending(false)
+    }
+  }
+
+  async function handleVerify() {
+    if (!otp || otp.length < 6 || !otpToken || verifying || sending) return
+    setVerifying(true)
+    setError(null)
+
+    try {
+      if (isNewUser && !firstName.trim()) {
+        throw new Error("Please enter your first name to finish registration")
+      }
+
+      const result = await verifyAuthOtpAndLogin({
+        token: otpToken,
+        code: otp,
+        countryCode,
+        first_name: isNewUser ? firstName.trim() : undefined,
+        last_name: isNewUser ? "." : undefined,
+      })
+      if (result && !result.success) {
+        throw new Error(result.error || "Verification failed")
+      }
+    } catch (err) {
+      if (isNextRedirect(err)) throw err
+      setError(err instanceof Error ? err.message : "Verification failed")
+      setVerifying(false)
+    }
+  }
+
+  function resetToIdentifier() {
+    setStep("identifier")
+    setOtp("")
+    setOtpToken(null)
+    setError(null)
+    setIsNewUser(false)
+    setFirstName("")
+    setSending(false)
+    setVerifying(false)
+    setResendIn(0)
+  }
+
+  const identifierDisplay =
+    authMethod === "phone_auth" ? formatPhoneDisplay(identifier) || identifier : identifier
+  const channelLabel = authMethod === "email_auth" ? "email" : "number"
+  const verifyHint = sending
+    ? `Sending code to ${identifierDisplay}…`
+    : `Enter the 6-digit code sent to ${identifierDisplay}`
+
+  return (
+    <div className="w-full flex flex-col space-y-5" data-testid="login-page">
+      <div className="text-center lg:hidden">
+        <Ornament />
+        <h2 className={auth.mobileTitle}>Sign in</h2>
+        <p className="mt-2 text-[10px] text-muted uppercase tracking-[0.24em]">
+          Select your login mode to continue
+        </p>
+      </div>
+
+      {step === "identifier" ? (
+        <>
+          <GoogleAuthSection countryCode={countryCode} />
+          <AuthDivider label="Or continue with email / mobile" />
+
+          <div className="flex gap-2 p-1 bg-surface-muted/80">
+            <ModeButton
+              active={authMethod === "phone_auth"}
+              onClick={() => {
+                setAuthMethod("phone_auth")
+                setIdentifier("")
+                setError(null)
+              }}
+            >
+              Mobile
+            </ModeButton>
+            <ModeButton
+              active={authMethod === "email_auth"}
+              onClick={() => {
+                setAuthMethod("email_auth")
+                setIdentifier("")
+                setError(null)
+              }}
+            >
+              Email
+            </ModeButton>
+          </div>
+
+          {authMethod === "phone_auth" ? (
+            <SplitPhoneInput
+              value={identifier}
+              onChange={setIdentifier}
+              label="Mobile number"
+              numberInputId="account-login-phone"
+              data-testid="account-login-phone"
+            />
+          ) : (
+            <AuthField
+              label="Email"
+              name="identifier"
+              type="email"
+              value={identifier}
+              onChange={(e) => setIdentifier(e.target.value)}
+              autoComplete="email"
+              placeholder="Enter your email"
+            />
+          )}
+
+          {error && (
+            <p className="text-sm text-brand-sale" role="alert">
+              {error}
+            </p>
+          )}
+
+          <button
+            type="button"
+            disabled={sending || !identifierReady}
+            onClick={() => void handleSendOtp()}
+            className={`${auth.btnPrimary} ${auth.btnShine}`}
+          >
+            <span className="relative z-[1]">{sending ? "Continue…" : "Continue"}</span>
+          </button>
+        </>
+      ) : (
+        <div className="space-y-5">
+          <div className="text-center">
+            <h3 className="font-heading text-lg font-bold text-heading uppercase tracking-[0.08em]">
+              Verify OTP
+            </h3>
+            <p className="mt-2 text-sm text-muted" aria-live="polite">
+              {sending ? (
+                verifyHint
+              ) : (
+                <>
+                  Enter the 6-digit code sent to{" "}
+                  <span className="text-heading font-medium">{identifierDisplay}</span>
+                </>
+              )}
+            </p>
+          </div>
+
+          {isNewUser && (
+            <AuthField
+              label="First name"
+              name="first_name"
+              value={firstName}
+              onChange={(e) => setFirstName(e.target.value)}
+              placeholder="Your first name"
+              required
+            />
+          )}
+
+          <OtpInput
+            value={otp}
+            onChange={setOtp}
+            autoFocus={!isNewUser && !sending && Boolean(otpToken)}
+          />
+
+          {error && (
+            <p className="text-sm text-brand-sale text-center" role="alert">
+              {error}
+            </p>
+          )}
+
+          <button
+            type="button"
+            disabled={
+              sending ||
+              verifying ||
+              !otpToken ||
+              otp.length < 6 ||
+              (isNewUser && !firstName.trim())
+            }
+            onClick={() => void handleVerify()}
+            className={`${auth.btnPrimary} ${auth.btnShine}`}
+          >
+            <span className="relative z-[1]">
+              {sending
+                ? "Waiting for code…"
+                : verifying
+                  ? "Verifying…"
+                  : isNewUser
+                    ? "Verify & create account"
+                    : "Verify & sign in"}
+            </span>
+          </button>
+
+          <div className="flex items-center justify-between gap-3 text-xs">
+            <button
+              type="button"
+              onClick={resetToIdentifier}
+              disabled={verifying}
+              className="text-muted hover:text-brand-accent transition-colors disabled:opacity-50"
+            >
+              Change {channelLabel}
+            </button>
+            <button
+              type="button"
+              disabled={sending || verifying || resendIn > 0}
+              onClick={() => void handleSendOtp({ resend: true })}
+              className="text-muted hover:text-brand-accent transition-colors disabled:opacity-50"
+            >
+              {sending
+                ? "Resending…"
+                : resendIn > 0
+                  ? `Resend in ${resendIn}s`
+                  : "Resend OTP"}
+            </button>
+          </div>
+        </div>
+      )}
+
+      {onTrackGuest && step === "identifier" && (
+        <div className="pt-4 border-t border-brand-primary/10">
+          <button
+            type="button"
+            onClick={onTrackGuest}
+            className={auth.guestCta}
+            data-testid="track-guest-order-button"
+          >
+            Track guest order
+          </button>
+        </div>
+      )}
+    </div>
+  )
+}
+
+function ModeButton({
+  active,
+  onClick,
+  children,
+}: {
+  active: boolean
+  onClick: () => void
+  children: React.ReactNode
+}) {
+  return (
+    <button type="button" onClick={onClick} className={active ? auth.modeActive : auth.modeIdle}>
+      {children}
+    </button>
+  )
+}
+
+function isNextRedirect(err: unknown) {
+  return (
+    typeof err === "object" &&
+    err !== null &&
+    "digest" in err &&
+    String((err as { digest?: string }).digest || "").includes("NEXT_REDIRECT")
+  )
+}

package/src/payment-methods-actions.ts

@@ -109,6 +109,7 @@ function parseBackendError(body: unknown, status: number): string {
 
   const data = body as {
     message?: unknown
+    error?: unknown
     errors?: Array<{ message?: string; path?: string[]; field?: string }>
   }
 
@@ -124,12 +125,29 @@ function parseBackendError(body: unknown, status: number): string {
     if (details.length) return details.join("; ")
   }
 
-  if (typeof data.message === "string" && data.message.trim()) {
-    const msg = data.message.trim()
-    if (/^invalid request( data)?\.?$/i.test(msg)) {
+  const primary =
+    typeof data.message === "string" && data.message.trim()
+      ? data.message.trim()
+      : typeof data.error === "string" && data.error.trim()
+        ? data.error.trim()
+        : ""
+
+  if (primary) {
+    if (/^invalid request( data)?\.?$/i.test(primary)) {
       return "Invalid payment details. Check required fields and try again."
     }
-    return msg
+    if (/payment details? with customer(_|\s)?id already exists/i.test(primary)) {
+      return "Could not remove this payment method because of a conflict with your default method. Please set another method as default, then try again."
+    }
+    if (/already exists/i.test(primary) && /customer/i.test(primary)) {
+      return "Could not update your default payment method. Please try again, or set another method as default first."
+    }
+    if (/^failed to delete payment detail\.?$/i.test(primary)) {
+      const detail =
+        typeof data.error === "string" && data.error.trim() ? data.error.trim() : ""
+      if (detail) return detail
+    }
+    return primary
   }
 
   return `Request failed (${status})`

package/src/segment.tsx

@@ -14,6 +14,7 @@ import AccountPaymentMethods from "./account-payment-methods"
 import AccountGuestOrders from "./account-guest-orders"
 import LoginBrandPanel from "./login-brand-panel"
 import GuestOrderModal from "./guest-order-modal"
+import OtpUnifiedForm from "./otp-unified-form"
 import { resolveOtpComponent, type OtpVerificationComponent } from "./otp-component"
 import { accountSectionPath } from "./account-utils"
 import { auth, type BrandPanelConfig } from "./account-theme"
@@ -33,6 +34,11 @@ type AccountProps = {
   brandPanel?: BrandPanelConfig | null
   guestTrackLabel?: string
   otpComponent?: OtpVerificationComponent
+  /**
+   * `otp` — Sahsha single-screen (Google + Mobile/Email OTP, signup in verify step).
+   * `full` — password + OTP tabs with separate register form.
+   */
+  authMode?: "otp" | "full"
 }
 
 export default function LoginTemplate({
@@ -49,6 +55,7 @@ export default function LoginTemplate({
   brandPanel,
   guestTrackLabel = "Track guest order",
   otpComponent,
+  authMode = "otp",
 }: AccountProps) {
   const OtpComponent = resolveOtpComponent(otpComponent)
   const section = accountSectionPath(path)
@@ -124,10 +131,23 @@ export default function LoginTemplate({
     }
   }
 
+  const isOtpMode = authMode === "otp"
   const isSignIn = view === "login"
   const isRegister = view === "register"
-  const heading = isSignIn ? title : isRegister ? registerTitle : "Reset password"
-  const subheading = isSignIn ? subtitle : isRegister ? registerSubtitle : undefined
+  const heading = isOtpMode
+    ? title
+    : isSignIn
+      ? title
+      : isRegister
+        ? registerTitle
+        : "Reset password"
+  const subheading = isOtpMode
+    ? subtitle
+    : isSignIn
+      ? subtitle
+      : isRegister
+        ? registerSubtitle
+        : undefined
 
   return (
     <>
@@ -140,7 +160,7 @@ export default function LoginTemplate({
           <div className={auth.formGlow} aria-hidden />
 
           <div className={auth.formInner}>
-            {(isSignIn || isRegister) && (
+            {(isOtpMode || isSignIn || isRegister) && view !== "forgot" && (
               <header className={auth.desktopHeader}>
                 <div className="flex items-center gap-3 mb-3">
                   <span className="h-px flex-1 max-w-[48px] bg-gradient-to-r from-brand-accent to-brand-primary" />
@@ -153,38 +173,57 @@ export default function LoginTemplate({
             )}
 
             <div className={auth.formCard}>
-              {view !== "forgot" && (
-                <div className="flex gap-6 mb-8 border-b border-cart-border">
-                  <TabButton active={view === "login"} onClick={() => setView("login")}>
-                    Sign in
-                  </TabButton>
-                  <TabButton active={view === "register"} onClick={() => setView("register")}>
-                    Register
-                  </TabButton>
-                </div>
-              )}
+              {isOtpMode ? (
+                view === "forgot" ? (
+                  <ForgotPasswordForm onBack={() => setView("login")} />
+                ) : (
+                  <OtpUnifiedForm
+                    countryCode={countryCode}
+                    onTrackGuest={() => {
+                      if (checkingGuest) return
+                      void handleTrackGuestOrder()
+                    }}
+                  />
+                )
+              ) : (
+                <>
+                  {view !== "forgot" && (
+                    <div className="flex gap-6 mb-8 border-b border-cart-border">
+                      <TabButton active={view === "login"} onClick={() => setView("login")}>
+                        Sign in
+                      </TabButton>
+                      <TabButton
+                        active={view === "register"}
+                        onClick={() => setView("register")}
+                      >
+                        Register
+                      </TabButton>
+                    </div>
+                  )}
 
-              {view === "login" && (
-                <LoginForm
-                  countryCode={countryCode}
-                  OtpComponent={OtpComponent}
-                  onForgot={() => setView("forgot")}
-                  onRegister={() => setView("register")}
-                  onTrackGuest={() => {
-                    if (checkingGuest) return
-                    void handleTrackGuestOrder()
-                  }}
-                />
-              )}
-              {view === "register" && (
-                <RegisterForm
-                  countryCode={countryCode}
-                  OtpComponent={OtpComponent}
-                  onLogin={() => setView("login")}
-                />
-              )}
-              {view === "forgot" && (
-                <ForgotPasswordForm onBack={() => setView("login")} />
+                  {view === "login" && (
+                    <LoginForm
+                      countryCode={countryCode}
+                      OtpComponent={OtpComponent}
+                      onForgot={() => setView("forgot")}
+                      onRegister={() => setView("register")}
+                      onTrackGuest={() => {
+                        if (checkingGuest) return
+                        void handleTrackGuestOrder()
+                      }}
+                    />
+                  )}
+                  {view === "register" && (
+                    <RegisterForm
+                      countryCode={countryCode}
+                      OtpComponent={OtpComponent}
+                      onLogin={() => setView("login")}
+                    />
+                  )}
+                  {view === "forgot" && (
+                    <ForgotPasswordForm onBack={() => setView("login")} />
+                  )}
+                </>
               )}
             </div>