@pradip1995/segment-login-template 0.4.1 → 0.4.3

package/src/payment-methods-actions.ts

@@ -0,0 +1,214 @@
+"use server"
+
+import { getAuthHeaders } from "@pradip1995/commerce-core/data/cookies"
+
+type PaymentMethodType = "upi" | "bank" | "card"
+
+type ActionResult =
+  | { success: true }
+  | { success: false; error: string; field_errors?: Record<string, string> }
+
+function getBaseUrl() {
+  return process.env.MEDUSA_BACKEND_URL || "http://localhost:9000"
+}
+
+function getPublishableKey() {
+  return process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY || ""
+}
+
+function trimAll(detail_json: Record<string, string>): Record<string, string> {
+  const out: Record<string, string> = {}
+  for (const [key, value] of Object.entries(detail_json)) {
+    if (typeof value !== "string") continue
+    const trimmed = value.trim()
+    if (!trimmed) continue
+    out[key] = key === "ifsc" ? trimmed.toUpperCase() : trimmed
+  }
+  return out
+}
+
+function validatePaymentDetail(
+  type: PaymentMethodType,
+  detail_json: Record<string, string>
+): Record<string, string> {
+  const field_errors: Record<string, string> = {}
+
+  if (type === "upi") {
+    const upi = detail_json.upi_id || ""
+    if (!upi) {
+      field_errors.upi_id = "UPI ID is required"
+    } else if (!/^[\w.\-]{2,256}@[a-zA-Z]{2,64}$/.test(upi)) {
+      field_errors.upi_id = "Enter a valid UPI ID (e.g. name@upi)"
+    }
+  }
+
+  if (type === "bank") {
+    const holder = detail_json.account_holder_name || ""
+    const bank = detail_json.bank_name || ""
+    const account = detail_json.account_number || ""
+    const ifsc = detail_json.ifsc || ""
+
+    if (!holder) {
+      field_errors.account_holder_name = "Account holder name is required"
+    }
+    if (!bank) {
+      field_errors.bank_name = "Bank name is required"
+    }
+    if (!account) {
+      field_errors.account_number = "Account number is required"
+    } else if (!/^\d{9,18}$/.test(account)) {
+      field_errors.account_number = "Account number must be 9–18 digits"
+    }
+    if (!ifsc) {
+      field_errors.ifsc = "IFSC is required"
+    } else if (!/^[A-Z]{4}0[A-Z0-9]{6}$/.test(ifsc)) {
+      field_errors.ifsc =
+        "Enter a valid IFSC (e.g. HDFC0001234) — 4 letters, 0, then 6 characters"
+    }
+  }
+
+  if (type === "card") {
+    const holder = detail_json.card_holder_name || ""
+    const number = detail_json.card_number || ""
+    const expiry = detail_json.expiry_date || ""
+    const cvv = detail_json.cvv || ""
+
+    if (!holder) {
+      field_errors.card_holder_name = "Card holder name is required"
+    }
+    if (!number) {
+      field_errors.card_number = "Card number is required"
+    } else if (!/^\d{13,19}$/.test(number.replace(/\s+/g, ""))) {
+      field_errors.card_number = "Enter a valid card number (13–19 digits)"
+    }
+    if (!expiry) {
+      field_errors.expiry_date = "Expiry date is required"
+    } else if (!/^(0[1-9]|1[0-2])\/\d{2}$/.test(expiry)) {
+      field_errors.expiry_date = "Use MM/YY format (e.g. 08/28)"
+    }
+    if (!cvv) {
+      field_errors.cvv = "CVV is required"
+    } else if (!/^\d{3,4}$/.test(cvv)) {
+      field_errors.cvv = "CVV must be 3 or 4 digits"
+    }
+  }
+
+  return field_errors
+}
+
+function firstFieldError(field_errors: Record<string, string>): string {
+  return Object.values(field_errors)[0] || "Invalid payment details"
+}
+
+function parseBackendError(body: unknown, status: number): string {
+  if (!body || typeof body !== "object") {
+    return status === 400
+      ? "Invalid payment details. Check the entered values."
+      : `Request failed (${status})`
+  }
+
+  const data = body as {
+    message?: unknown
+    errors?: Array<{ message?: string; path?: string[]; field?: string }>
+  }
+
+  if (Array.isArray(data.errors) && data.errors.length > 0) {
+    const details = data.errors
+      .map((item) => {
+        const path = item.path?.join(".") || item.field
+        const msg = item.message?.trim()
+        if (path && msg) return `${path}: ${msg}`
+        return msg
+      })
+      .filter((msg): msg is string => Boolean(msg))
+    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)) {
+      return "Invalid payment details. Check required fields and try again."
+    }
+    return msg
+  }
+
+  return `Request failed (${status})`
+}
+
+async function paymentDetailsFetch(
+  path: string,
+  init: { method: string; body?: Record<string, unknown> }
+): Promise<ActionResult> {
+  const authHeaders = await getAuthHeaders()
+  if (!("authorization" in authHeaders)) {
+    return { success: false, error: "Please sign in to manage payment methods" }
+  }
+
+  const response = await fetch(`${getBaseUrl()}${path}`, {
+    method: init.method,
+    headers: {
+      Accept: "application/json",
+      "Content-Type": "application/json",
+      "x-publishable-api-key": getPublishableKey(),
+      ...authHeaders,
+    },
+    body: init.body ? JSON.stringify(init.body) : undefined,
+    cache: "no-store",
+  })
+
+  if (response.ok) {
+    return { success: true }
+  }
+
+  const body = await response.json().catch(() => null)
+  return {
+    success: false,
+    error: parseBackendError(body, response.status),
+  }
+}
+
+export async function addPaymentMethodAction(
+  type: PaymentMethodType,
+  detail_json: Record<string, string>
+): Promise<ActionResult> {
+  const normalized = trimAll(detail_json)
+  if (normalized.card_number) {
+    normalized.card_number = normalized.card_number.replace(/\s+/g, "")
+  }
+
+  const field_errors = validatePaymentDetail(type, normalized)
+  if (Object.keys(field_errors).length > 0) {
+    return {
+      success: false,
+      error: firstFieldError(field_errors),
+      field_errors,
+    }
+  }
+
+  return paymentDetailsFetch("/store/payment-details", {
+    method: "POST",
+    body: { type, detail_json: normalized },
+  })
+}
+
+export async function makeDefaultPaymentMethodAction(
+  id: string
+): Promise<ActionResult> {
+  if (!id) {
+    return { success: false, error: "Payment method id is required" }
+  }
+  return paymentDetailsFetch(`/store/payment-details/${id}/make-default`, {
+    method: "POST",
+  })
+}
+
+export async function deletePaymentMethodAction(
+  id: string
+): Promise<ActionResult> {
+  if (!id) {
+    return { success: false, error: "Payment method id is required" }
+  }
+  return paymentDetailsFetch(`/store/payment-details/${id}`, {
+    method: "DELETE",
+  })
+}

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>
   )
 }

package/src/segment.tsx

@@ -1,6 +1,7 @@
 "use client"
 
-import { useState } from "react"
+import { useEffect, useState } from "react"
+import { useSearchParams } from "next/navigation"
 import type { HttpTypes } from "@medusajs/types"
 import LoginForm from "./login-form"
 import RegisterForm from "./register-form"
@@ -11,18 +12,26 @@ import AccountAddresses from "./account-addresses"
 import AccountOrders from "./account-orders"
 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 { resolveOtpComponent, type OtpVerificationComponent } from "./otp-component"
 import { accountSectionPath } from "./account-utils"
+import { auth, type BrandPanelConfig } from "./account-theme"
+import { listGuestOrders } from "@pradip1995/commerce-core/data/guest"
 
 type AccountProps = {
   countryCode?: string
   path?: string
   customer?: HttpTypes.StoreCustomer | null
-  orders?: HttpTypes.StoreOrder[]
+  orders?: HttpTypes.StoreOrder[] | { orders?: HttpTypes.StoreOrder[] } | null
   paymentDetails?: Record<string, unknown>[]
-  guestOrders?: HttpTypes.StoreOrder[]
+  guestOrders?: HttpTypes.StoreOrder[] | { orders?: HttpTypes.StoreOrder[] } | null
   title?: string
   subtitle?: string
+  registerTitle?: string
+  registerSubtitle?: string
+  brandPanel?: BrandPanelConfig | null
+  guestTrackLabel?: string
   otpComponent?: OtpVerificationComponent
 }
 
@@ -33,12 +42,53 @@ export default function LoginTemplate({
   orders = [],
   paymentDetails = [],
   guestOrders = [],
-  title,
-  subtitle,
+  title = "Sign in",
+  subtitle = "Access your exclusive collection",
+  registerTitle = "Create account",
+  registerSubtitle = "Join our exclusive collection",
+  brandPanel,
+  guestTrackLabel = "Track guest order",
   otpComponent,
 }: AccountProps) {
   const OtpComponent = resolveOtpComponent(otpComponent)
   const section = accountSectionPath(path)
+  const searchParams = useSearchParams()
+
+  const [view, setView] = useState<"login" | "register" | "forgot">(
+    path === "register" ? "register" : path === "forgot-password" ? "forgot" : "login"
+  )
+  const [showGuestModal, setShowGuestModal] = useState(false)
+  const [checkingGuest, setCheckingGuest] = useState(false)
+  const [guestEmail, setGuestEmail] = useState("")
+  const [guestAutoStart, setGuestAutoStart] = useState(false)
+
+  useEffect(() => {
+    const guestView = searchParams.get("view")
+    const email = searchParams.get("email")
+    if (guestView === "guest") {
+      setGuestEmail(email && email !== "undefined" ? email : "")
+      setGuestAutoStart(Boolean(email && email !== "undefined"))
+      setShowGuestModal(true)
+    }
+  }, [searchParams])
+
+  async function handleTrackGuestOrder() {
+    // Guest JWT is httpOnly (_medusa_guest_jwt); probe via server action (empty token → cookie).
+    setCheckingGuest(true)
+    try {
+      await listGuestOrders("")
+      window.location.href = `/${countryCode}/account/guest-orders`
+      return
+    } catch {
+      // No valid guest session — open OTP modal
+    } finally {
+      setCheckingGuest(false)
+    }
+
+    setGuestEmail(searchParams.get("email") || "")
+    setGuestAutoStart(false)
+    setShowGuestModal(true)
+  }
 
   if (section === "guest-orders") {
     return <AccountGuestOrders orders={guestOrders} countryCode={countryCode} />
@@ -61,56 +111,104 @@ export default function LoginTemplate({
       case "payment-methods":
         return (
           <AccountPaymentMethods
-            paymentDetails={paymentDetails as Parameters<typeof AccountPaymentMethods>[0]["paymentDetails"]}
+            paymentDetails={
+              paymentDetails as Parameters<typeof AccountPaymentMethods>[0]["paymentDetails"]
+            }
           />
         )
       case "overview":
       default:
-        return <AccountOverview customer={customer} orders={orders} countryCode={countryCode} />
+        return (
+          <AccountOverview customer={customer} orders={orders} countryCode={countryCode} />
+        )
     }
   }
 
-  const [view, setView] = useState<"login" | "register" | "forgot">(
-    path === "register" ? "register" : path === "forgot-password" ? "forgot" : "login"
-  )
+  const isSignIn = view === "login"
+  const isRegister = view === "register"
+  const heading = isSignIn ? title : isRegister ? registerTitle : "Reset password"
+  const subheading = isSignIn ? subtitle : isRegister ? registerSubtitle : undefined
 
   return (
-    <div className="w-full max-w-md mx-auto">
-      {(title || subtitle) && view !== "forgot" && (
-        <div className="mb-8 text-center">
-          {title && <h1 className="section-heading text-2xl mb-2">{title}</h1>}
-          {subtitle && <p className="text-sm text-muted">{subtitle}</p>}
-        </div>
-      )}
-
-      {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 data-login-viewport className={auth.viewport}>
+        <LoginBrandPanel panel={brandPanel} variant="mobile" />
+        <LoginBrandPanel panel={brandPanel} variant="desktop" />
+
+        <div className={auth.formColumn}>
+          <div className={auth.formWash} aria-hidden />
+          <div className={auth.formGlow} aria-hidden />
+
+          <div className={auth.formInner}>
+            {(isSignIn || isRegister) && (
+              <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" />
+                  <span className="text-brand-accent text-[8px] leading-none">◆</span>
+                  <span className="h-px flex-1 max-w-[48px] bg-gradient-to-l from-brand-accent to-brand-primary" />
+                </div>
+                <h1 className={auth.title}>{heading}</h1>
+                {subheading && <p className={auth.subtitle}>{subheading}</p>}
+              </header>
+            )}
+
+            <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>
+              )}
+
+              {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>
+
+            {checkingGuest && (
+              <p className="mt-4 text-xs text-muted uppercase tracking-[0.2em]">
+                {guestTrackLabel}…
+              </p>
+            )}
+          </div>
         </div>
-      )}
-
-      {view === "login" && (
-        <LoginForm
-          countryCode={countryCode}
-          OtpComponent={OtpComponent}
-          onForgot={() => setView("forgot")}
-          onRegister={() => setView("register")}
-        />
-      )}
-      {view === "register" && (
-        <RegisterForm
-          countryCode={countryCode}
-          OtpComponent={OtpComponent}
-          onLogin={() => setView("login")}
-        />
-      )}
-      {view === "forgot" && <ForgotPasswordForm onBack={() => setView("login")} />}
-    </div>
+      </div>
+
+      <GuestOrderModal
+        open={showGuestModal}
+        onClose={() => {
+          setShowGuestModal(false)
+          setGuestAutoStart(false)
+        }}
+        countryCode={countryCode}
+        initialEmail={guestEmail}
+        autoStart={guestAutoStart}
+        OtpComponent={OtpComponent}
+      />
+    </>
   )
 }
 
@@ -127,11 +225,7 @@ function TabButton({
     <button
       type="button"
       onClick={onClick}
-      className={`pb-3 text-xs font-semibold uppercase tracking-[var(--letter-spacing-nav)] border-b-2 -mb-px transition-colors ${
-        active
-          ? "border-brand-accent text-brand-accent"
-          : "border-transparent text-muted hover:text-heading"
-      }`}
+      className={active ? auth.tabActive : auth.tabIdle}
     >
       {children}
     </button>