@pradip1995/segment-login-template 0.4.2 → 0.5.2

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,23 @@ 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 (/^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/register-form.tsx

@@ -9,6 +9,8 @@ import {
 import GoogleAuthSection from "./google-auth-section"
 import OtpVerificationModal from "./otp-verification-modal"
 import type { OtpVerificationComponent } from "./otp-component"
+import { auth } from "./account-theme"
+import { AuthDivider, AuthField, Ornament } from "./login-form"
 
 type VerificationMethod = "email_verification" | "phone_verification"
 type RegistrationStep = "form" | "otp" | "success"
@@ -37,6 +39,7 @@ export default function RegisterForm({
   const [error, setError] = useState<string | null>(null)
   const [pending, setPending] = useState(false)
   const [showOtpModal, setShowOtpModal] = useState(false)
+  const [showPassword, setShowPassword] = useState(false)
 
   function updateField(key: keyof typeof form, value: string) {
     setForm((prev) => ({ ...prev, [key]: value }))
@@ -143,21 +146,22 @@ export default function RegisterForm({
     verificationMethod === "email_verification" ? form.email : form.phone
 
   return (
-    <div className="space-y-6">
+    <div className="space-y-6" data-testid="register-page">
+      <div className="text-center lg:hidden">
+        <Ornament />
+        <h2 className={auth.mobileTitle}>Create account</h2>
+        <p className="mt-2 text-[10px] text-muted uppercase tracking-[0.24em]">
+          Join our collection
+        </p>
+      </div>
+
       <GoogleAuthSection countryCode={countryCode} />
 
-      <div className="relative">
-        <div className="absolute inset-0 flex items-center">
-          <div className="w-full border-t border-cart-border" />
-        </div>
-        <div className="relative flex justify-center text-xs uppercase tracking-[var(--letter-spacing-nav)]">
-          <span className="bg-page-bg px-3 text-muted">Or register with email</span>
-        </div>
-      </div>
+      <AuthDivider label="Or register with email" />
 
       {step === "form" && (
         <>
-          <div className="flex gap-2 p-1 bg-surface-muted rounded-lg">
+          <div className="flex gap-2 p-1 bg-surface-muted/80">
             <VerificationToggle
               active={verificationMethod === "email_verification"}
               onClick={() => setVerificationMethod("email_verification")}
@@ -179,39 +183,67 @@ export default function RegisterForm({
           </p>
 
           <form onSubmit={handleRegister} className="space-y-4">
-            <Field
+            <AuthField
               label="Full name"
               value={form.full_name}
               onChange={(e) => updateField("full_name", e.target.value)}
               autoComplete="name"
+              placeholder="Your full name"
             />
-            <Field
+            <AuthField
               label="Email"
               type="email"
               value={form.email}
               onChange={(e) => updateField("email", e.target.value)}
               autoComplete="email"
+              placeholder="you@example.com"
             />
-            <Field
+            <AuthField
               label="Phone"
               type="tel"
               value={form.phone}
               onChange={(e) => updateField("phone", e.target.value)}
               autoComplete="tel"
               required={verificationMethod === "phone_verification"}
+              placeholder="Phone number"
             />
-            <Field
-              label="Password"
-              type="password"
-              value={form.password}
-              onChange={(e) => updateField("password", e.target.value)}
-              autoComplete="new-password"
-            />
-
-            {error && <p className="text-sm text-brand-sale">{error}</p>}
-
-            <button type="submit" disabled={pending} className="btn-primary w-full disabled:opacity-60">
-              {pending ? "Creating account…" : "Create account"}
+            <div>
+              <span className={`${auth.fieldLabel} mb-1.5 block`}>Password</span>
+              <div className="relative">
+                <input
+                  type={showPassword ? "text" : "password"}
+                  value={form.password}
+                  onChange={(e) => updateField("password", e.target.value)}
+                  autoComplete="new-password"
+                  required
+                  placeholder="Create a password"
+                  className={`${auth.input} pr-10`}
+                />
+                <button
+                  type="button"
+                  onClick={() => setShowPassword((v) => !v)}
+                  className="absolute inset-y-0 right-0 flex items-center text-muted hover:text-heading transition-colors"
+                  aria-label={showPassword ? "Hide password" : "Show password"}
+                >
+                  {showPassword ? <EyeOffIcon /> : <EyeIcon />}
+                </button>
+              </div>
+            </div>
+
+            {error && (
+              <p className="text-sm text-brand-sale" role="alert">
+                {error}
+              </p>
+            )}
+
+            <button
+              type="submit"
+              disabled={pending}
+              className={`${auth.btnPrimary} ${auth.btnShine}`}
+            >
+              <span className="relative z-[1]">
+                {pending ? "Creating account…" : "Create account"}
+              </span>
             </button>
           </form>
         </>
@@ -225,7 +257,11 @@ export default function RegisterForm({
 
       <p className="text-sm text-center text-muted">
         Already have an account?{" "}
-        <button type="button" onClick={onLogin} className="text-brand-accent font-semibold hover:underline">
+        <button
+          type="button"
+          onClick={onLogin}
+          className="text-heading font-semibold hover:text-brand-accent transition-colors underline underline-offset-2"
+        >
           Sign in
         </button>
       </p>
@@ -282,43 +318,27 @@ function VerificationToggle({
     <button
       type="button"
       onClick={onClick}
-      className={`flex-1 py-2 text-xs font-semibold uppercase tracking-[var(--letter-spacing-nav)] rounded-md transition-colors ${
-        active ? "bg-page-bg text-heading shadow-sm" : "text-muted hover:text-heading"
-      }`}
+      className={active ? auth.modeActive : auth.modeIdle}
     >
       {children}
     </button>
   )
 }
 
-function Field({
-  label,
-  type = "text",
-  value,
-  onChange,
-  autoComplete,
-  required = true,
-}: {
-  label: string
-  type?: string
-  value: string
-  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void
-  autoComplete?: string
-  required?: boolean
-}) {
+function EyeIcon() {
   return (
-    <label className="block">
-      <span className="text-xs font-semibold uppercase tracking-[var(--letter-spacing-nav)] text-muted mb-1.5 block">
-        {label}
-      </span>
-      <input
-        type={type}
-        value={value}
-        onChange={onChange}
-        autoComplete={autoComplete}
-        required={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>
+    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" aria-hidden>
+      <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
+      <circle cx="12" cy="12" r="3" />
+    </svg>
+  )
+}
+
+function EyeOffIcon() {
+  return (
+    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" aria-hidden>
+      <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24" />
+      <line x1="1" y1="1" x2="23" y2="23" />
+    </svg>
   )
 }