@pradip1995/segment-login-template 0.4.2 → 0.5.2

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,8 +12,13 @@ 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 OtpUnifiedForm from "./otp-unified-form"
 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
@@ -23,7 +29,16 @@ type AccountProps = {
   guestOrders?: HttpTypes.StoreOrder[] | { orders?: HttpTypes.StoreOrder[] } | null
   title?: string
   subtitle?: string
+  registerTitle?: string
+  registerSubtitle?: string
+  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({
@@ -33,12 +48,54 @@ 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,
+  authMode = "otp",
 }: 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 +118,136 @@ 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 isOtpMode = authMode === "otp"
+  const isSignIn = view === "login"
+  const isRegister = view === "register"
+  const heading = isOtpMode
+    ? title
+    : isSignIn
+      ? title
+      : isRegister
+        ? registerTitle
+        : "Reset password"
+  const subheading = isOtpMode
+    ? subtitle
+    : 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}>
+            {(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" />
+                  <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}>
+              {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")} />
+                  )}
+                </>
+              )}
+            </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 +264,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>