@pradip1995/segment-login-template 0.2.5 → 0.4.0

package/src/segment.tsx

@@ -1,16 +1,29 @@
 "use client"
 
-import { useActionState, useState } from "react"
-import { login, requestPasswordReset, signout, signup } from "@pradip1995/commerce-core/client/actions/customer"
-import LocalizedLink from "@pradip1995/segment-primitives/localized-link"
-import { formatPrice } from "@pradip1995/segment-primitives/format-price"
+import { useState } from "react"
 import type { HttpTypes } from "@medusajs/types"
+import LoginForm from "./login-form"
+import RegisterForm from "./register-form"
+import ForgotPasswordForm from "./forgot-password-form"
+import AccountOverview from "./account-overview"
+import AccountProfile from "./account-profile"
+import AccountAddresses from "./account-addresses"
+import AccountOrders from "./account-orders"
+import AccountPaymentMethods from "./account-payment-methods"
+import AccountGuestOrders from "./account-guest-orders"
+import { resolveOtpComponent, type OtpVerificationComponent } from "./otp-component"
+import { accountSectionPath } from "./account-utils"
 
 type AccountProps = {
   countryCode?: string
   path?: string
   customer?: HttpTypes.StoreCustomer | null
   orders?: HttpTypes.StoreOrder[]
+  paymentDetails?: Record<string, unknown>[]
+  guestOrders?: HttpTypes.StoreOrder[]
+  title?: string
+  subtitle?: string
+  otpComponent?: OtpVerificationComponent
 }
 
 export default function LoginTemplate({
@@ -18,33 +31,84 @@ export default function LoginTemplate({
   path = "",
   customer,
   orders = [],
+  paymentDetails = [],
+  guestOrders = [],
+  title,
+  subtitle,
+  otpComponent,
 }: AccountProps) {
-  const [view, setView] = useState<"login" | "register" | "forgot">(
-    path === "register" ? "register" : path === "forgot-password" ? "forgot" : "login"
-  )
+  const OtpComponent = resolveOtpComponent(otpComponent)
+  const section = accountSectionPath(path)
+
+  if (section === "guest-orders") {
+    return <AccountGuestOrders orders={guestOrders} countryCode={countryCode} />
+  }
 
   if (customer && customer.id !== "pending_deletion") {
-    return <AccountOverview customer={customer} orders={orders} countryCode={countryCode} />
+    switch (section) {
+      case "profile":
+        return (
+          <AccountProfile
+            customer={customer}
+            countryCode={countryCode}
+            OtpComponent={OtpComponent}
+          />
+        )
+      case "addresses":
+        return <AccountAddresses customer={customer} countryCode={countryCode} />
+      case "orders":
+        return <AccountOrders orders={orders} />
+      case "payment-methods":
+        return (
+          <AccountPaymentMethods
+            paymentDetails={paymentDetails as Parameters<typeof AccountPaymentMethods>[0]["paymentDetails"]}
+          />
+        )
+      case "overview":
+      default:
+        return <AccountOverview customer={customer} orders={orders} countryCode={countryCode} />
+    }
   }
 
+  const [view, setView] = useState<"login" | "register" | "forgot">(
+    path === "register" ? "register" : path === "forgot-password" ? "forgot" : "login"
+  )
+
   return (
     <div className="w-full max-w-md mx-auto">
-      <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>
+      {(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>
+      )}
 
       {view === "login" && (
         <LoginForm
           countryCode={countryCode}
+          OtpComponent={OtpComponent}
           onForgot={() => setView("forgot")}
+          onRegister={() => setView("register")}
+        />
+      )}
+      {view === "register" && (
+        <RegisterForm
+          countryCode={countryCode}
+          OtpComponent={OtpComponent}
+          onLogin={() => setView("login")}
         />
       )}
-      {view === "register" && <RegisterForm countryCode={countryCode} />}
       {view === "forgot" && <ForgotPasswordForm onBack={() => setView("login")} />}
     </div>
   )
@@ -73,186 +137,3 @@ function TabButton({
     </button>
   )
 }
-
-function LoginForm({
-  countryCode,
-  onForgot,
-}: {
-  countryCode: string
-  onForgot: () => void
-}) {
-  const [state, formAction, pending] = useActionState(login, null)
-
-  return (
-    <form action={formAction} className="space-y-4">
-      <input type="hidden" name="countryCode" value={countryCode} />
-      <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" && (
-        <p className="text-sm text-brand-sale">{state}</p>
-      )}
-      <button type="submit" disabled={pending} className="btn-primary w-full disabled:opacity-60">
-        {pending ? "Signing in…" : "Sign in"}
-      </button>
-      <button type="button" onClick={onForgot} className="text-sm text-muted hover:text-brand-accent w-full text-center">
-        Forgot password?
-      </button>
-    </form>
-  )
-}
-
-function RegisterForm({ countryCode }: { countryCode: string }) {
-  const [state, formAction, pending] = useActionState(signup, null)
-
-  return (
-    <form action={formAction} className="space-y-4">
-      <input type="hidden" name="countryCode" value={countryCode} />
-      <div className="grid grid-cols-2 gap-3">
-        <Field label="First name" name="first_name" type="text" autoComplete="given-name" />
-        <Field label="Last name" name="last_name" type="text" autoComplete="family-name" />
-      </div>
-      <Field label="Email" name="email" type="email" autoComplete="email" />
-      <Field label="Phone" name="phone" type="tel" autoComplete="tel" />
-      <Field label="Password" name="password" type="password" autoComplete="new-password" />
-      {state && typeof state === "string" && (
-        <p className="text-sm text-brand-sale">{state}</p>
-      )}
-      <button type="submit" disabled={pending} className="btn-primary w-full disabled:opacity-60">
-        {pending ? "Creating account…" : "Create account"}
-      </button>
-    </form>
-  )
-}
-
-function ForgotPasswordForm({ onBack }: { onBack: () => void }) {
-  const [email, setEmail] = useState("")
-  const [message, setMessage] = useState<string | null>(null)
-  const [pending, setPending] = useState(false)
-
-  async function handleSubmit(e: React.FormEvent) {
-    e.preventDefault()
-    setPending(true)
-    setMessage(null)
-    const result = await requestPasswordReset(email)
-    setMessage(result.success ? result.message : result.error || "Something went wrong")
-    setPending(false)
-  }
-
-  return (
-    <form onSubmit={handleSubmit} className="space-y-4">
-      <p className="text-sm text-muted">Enter your email and we&apos;ll send a reset link.</p>
-      <Field
-        label="Email"
-        name="email"
-        type="email"
-        value={email}
-        onChange={(e) => setEmail(e.target.value)}
-      />
-      {message && <p className="text-sm text-body">{message}</p>}
-      <button type="submit" disabled={pending} className="btn-primary w-full disabled:opacity-60">
-        {pending ? "Sending…" : "Send reset link"}
-      </button>
-      <button type="button" onClick={onBack} className="text-sm text-muted hover:text-brand-accent w-full text-center">
-        Back to sign in
-      </button>
-    </form>
-  )
-}
-
-function AccountOverview({
-  customer,
-  orders,
-  countryCode,
-}: {
-  customer: HttpTypes.StoreCustomer
-  orders: HttpTypes.StoreOrder[]
-  countryCode: string
-}) {
-  const name = [customer.first_name, customer.last_name].filter(Boolean).join(" ") || customer.email
-
-  return (
-    <div className="space-y-8">
-      <div className="card-surface rounded-lg p-6">
-        <p className="text-xs uppercase tracking-[var(--letter-spacing-nav)] text-muted mb-2">My account</p>
-        <h1 className="section-heading text-xl mb-1">{name}</h1>
-        <p className="text-sm text-muted">{customer.email}</p>
-        {customer.phone && <p className="text-sm text-muted mt-1">{customer.phone}</p>}
-        <form action={signout.bind(null, countryCode)} className="mt-6">
-          <button type="submit" className="btn-outline text-xs">
-            Sign out
-          </button>
-        </form>
-      </div>
-
-      <div>
-        <h2 className="text-sm font-semibold uppercase tracking-[var(--letter-spacing-nav)] text-heading mb-4">
-          Recent orders
-        </h2>
-        {orders.length === 0 ? (
-          <div className="card-surface rounded-lg p-8 text-center">
-            <p className="text-muted text-sm mb-4">No orders yet.</p>
-            <LocalizedLink href="/store" className="btn-primary inline-block">
-              Start shopping
-            </LocalizedLink>
-          </div>
-        ) : (
-          <ul className="space-y-3">
-            {orders.map((order) => (
-              <li key={order.id}>
-                <LocalizedLink
-                  href={`/orders/${order.id}`}
-                  className="card-surface rounded-lg p-4 flex items-center justify-between gap-4 hover:border-brand-accent transition-colors block"
-                >
-                  <div>
-                    <p className="font-medium text-heading text-sm">
-                      Order #{order.display_id}
-                    </p>
-                    <p className="text-xs text-muted mt-1 capitalize">
-                      {order.status?.replace(/_/g, " ")}
-                    </p>
-                  </div>
-                  <p className="text-sm font-semibold text-brand-accent shrink-0">
-                    {formatPrice(order.total, order.currency_code)}
-                  </p>
-                </LocalizedLink>
-              </li>
-            ))}
-          </ul>
-        )}
-      </div>
-    </div>
-  )
-}
-
-function Field({
-  label,
-  name,
-  type,
-  autoComplete,
-  value,
-  onChange,
-}: {
-  label: string
-  name: string
-  type: string
-  autoComplete?: string
-  value?: string
-  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void
-}) {
-  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
-        name={name}
-        type={type}
-        autoComplete={autoComplete}
-        value={value}
-        onChange={onChange}
-        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>
-  )
-}