@pradip1995/segment-login-template 0.3.0 → 0.4.1

package/src/register-form.tsx

@@ -3,24 +3,28 @@
 import { useState } from "react"
 import {
   registerCustomer,
-  sendCustomerOTP,
-  verifyCustomerOTP,
+  sendRegistrationOtp,
+  verifyRegistrationOtp,
 } from "./auth-server"
-import OtpInput from "./otp-input"
 import GoogleAuthSection from "./google-auth-section"
+import OtpVerificationModal from "./otp-verification-modal"
+import type { OtpVerificationComponent } from "./otp-component"
 
 type VerificationMethod = "email_verification" | "phone_verification"
+type RegistrationStep = "form" | "otp" | "success"
 
 export default function RegisterForm({
   countryCode,
+  OtpComponent = OtpVerificationModal,
   onLogin,
 }: {
   countryCode: string
+  OtpComponent?: OtpVerificationComponent
   onLogin: () => void
 }) {
-  const [step, setStep] = useState<"form" | "otp" | "success">("form")
+  const [step, setStep] = useState<RegistrationStep>("form")
   const [verificationMethod, setVerificationMethod] =
-    useState<VerificationMethod>("phone_verification")
+    useState<VerificationMethod>("email_verification")
   const [form, setForm] = useState({
     full_name: "",
     email: "",
@@ -32,6 +36,7 @@ export default function RegisterForm({
   const [otp, setOtp] = useState("")
   const [error, setError] = useState<string | null>(null)
   const [pending, setPending] = useState(false)
+  const [showOtpModal, setShowOtpModal] = useState(false)
 
   function updateField(key: keyof typeof form, value: string) {
     setForm((prev) => ({ ...prev, [key]: value }))
@@ -69,13 +74,15 @@ export default function RegisterForm({
 
       setCustomerId(id)
 
-      const otpResult = await sendCustomerOTP(id, verificationMethod)
+      const otpResult = await sendRegistrationOtp(id, verificationMethod)
       if (!otpResult.success) {
         throw new Error(otpResult.error || "Failed to send verification code")
       }
 
       setOtpToken(otpResult.token ?? null)
+      setOtp("")
       setStep("otp")
+      setShowOtpModal(true)
     } catch (err) {
       setError(err instanceof Error ? err.message : "Registration failed")
     } finally {
@@ -83,22 +90,30 @@ export default function RegisterForm({
     }
   }
 
-  async function handleVerifyOtp(e: React.FormEvent) {
-    e.preventDefault()
+  async function handleVerifyOtp() {
     if (!otp || otp.length < 6) return
 
     setPending(true)
     setError(null)
 
     try {
-      const result = await verifyCustomerOTP(otpToken || "", otp)
+      const result = await verifyRegistrationOtp({
+        otpToken: otpToken || "",
+        code: otp,
+        countryCode,
+      })
+
       if (!result.success) {
         throw new Error(result.error || "Invalid verification code")
       }
 
       setStep("success")
-      window.setTimeout(() => onLogin(), 2000)
+      window.setTimeout(() => {
+        setShowOtpModal(false)
+        onLogin()
+      }, 2000)
     } catch (err) {
+      if (isNextRedirect(err)) throw err
       setError(err instanceof Error ? err.message : "Verification failed")
     } finally {
       setPending(false)
@@ -111,7 +126,7 @@ export default function RegisterForm({
     setError(null)
 
     try {
-      const result = await sendCustomerOTP(customerId, verificationMethod)
+      const result = await sendRegistrationOtp(customerId, verificationMethod)
       if (!result.success) {
         throw new Error(result.error || "Failed to resend code")
       }
@@ -124,49 +139,8 @@ export default function RegisterForm({
     }
   }
 
-  if (step === "success") {
-    return (
-      <div className="text-center space-y-4 py-6">
-        <div className="w-14 h-14 mx-auto rounded-full bg-green-100 flex items-center justify-center text-2xl">
-          ✓
-        </div>
-        <h2 className="section-heading text-lg">Account verified</h2>
-        <p className="text-sm text-muted">
-          Your account is ready. Redirecting you to sign in…
-        </p>
-      </div>
-    )
-  }
-
-  if (step === "otp") {
-    return (
-      <form onSubmit={handleVerifyOtp} className="space-y-5">
-        <div className="text-center space-y-2">
-          <h2 className="section-heading text-lg">Verify your account</h2>
-          <p className="text-sm text-muted">
-            Enter the 6-digit code sent to your{" "}
-            {verificationMethod === "phone_verification" ? "phone" : "email"}.
-          </p>
-        </div>
-
-        <OtpInput value={otp} onChange={setOtp} autoFocus />
-        {error && <p className="text-sm text-brand-sale text-center">{error}</p>}
-
-        <button type="submit" disabled={pending || otp.length < 6} className="btn-primary w-full disabled:opacity-60">
-          {pending ? "Verifying…" : "Verify account"}
-        </button>
-
-        <button
-          type="button"
-          disabled={pending}
-          onClick={handleResendOtp}
-          className="text-sm text-muted hover:text-brand-accent w-full text-center disabled:opacity-60"
-        >
-          Resend code
-        </button>
-      </form>
-    )
-  }
+  const verificationTarget =
+    verificationMethod === "email_verification" ? form.email : form.phone
 
   return (
     <div className="space-y-6">
@@ -181,57 +155,73 @@ export default function RegisterForm({
         </div>
       </div>
 
-      <form onSubmit={handleRegister} className="space-y-4">
-        <div className="flex gap-2 p-1 bg-surface-muted rounded-lg">
-          <VerificationToggle
-            active={verificationMethod === "phone_verification"}
-            onClick={() => setVerificationMethod("phone_verification")}
-          >
-            Mobile
-          </VerificationToggle>
-          <VerificationToggle
-            active={verificationMethod === "email_verification"}
-            onClick={() => setVerificationMethod("email_verification")}
-          >
-            Email OTP
-          </VerificationToggle>
-        </div>
+      {step === "form" && (
+        <>
+          <div className="flex gap-2 p-1 bg-surface-muted rounded-lg">
+            <VerificationToggle
+              active={verificationMethod === "email_verification"}
+              onClick={() => setVerificationMethod("email_verification")}
+            >
+              Email OTP
+            </VerificationToggle>
+            <VerificationToggle
+              active={verificationMethod === "phone_verification"}
+              onClick={() => setVerificationMethod("phone_verification")}
+            >
+              Mobile OTP
+            </VerificationToggle>
+          </div>
+
+          <p className="text-xs text-muted -mt-2">
+            {verificationMethod === "email_verification"
+              ? "We will send a verification code to your email after you register."
+              : "We will send a verification code to your mobile after you register."}
+          </p>
 
-        <Field
-          label="Full name"
-          value={form.full_name}
-          onChange={(e) => updateField("full_name", e.target.value)}
-          autoComplete="name"
-        />
-        <Field
-          label="Email"
-          type="email"
-          value={form.email}
-          onChange={(e) => updateField("email", e.target.value)}
-          autoComplete="email"
-        />
-        <Field
-          label="Phone"
-          type="tel"
-          value={form.phone}
-          onChange={(e) => updateField("phone", e.target.value)}
-          autoComplete="tel"
-          required={verificationMethod === "phone_verification"}
-        />
-        <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"}
-        </button>
-      </form>
+          <form onSubmit={handleRegister} className="space-y-4">
+            <Field
+              label="Full name"
+              value={form.full_name}
+              onChange={(e) => updateField("full_name", e.target.value)}
+              autoComplete="name"
+            />
+            <Field
+              label="Email"
+              type="email"
+              value={form.email}
+              onChange={(e) => updateField("email", e.target.value)}
+              autoComplete="email"
+            />
+            <Field
+              label="Phone"
+              type="tel"
+              value={form.phone}
+              onChange={(e) => updateField("phone", e.target.value)}
+              autoComplete="tel"
+              required={verificationMethod === "phone_verification"}
+            />
+            <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"}
+            </button>
+          </form>
+        </>
+      )}
+
+      {step !== "form" && !showOtpModal && (
+        <p className="text-sm text-muted text-center">
+          Complete verification to activate your account.
+        </p>
+      )}
 
       <p className="text-sm text-center text-muted">
         Already have an account?{" "}
@@ -239,10 +229,46 @@ export default function RegisterForm({
           Sign in
         </button>
       </p>
+
+      <OtpComponent
+        open={showOtpModal}
+        preventClose={step === "otp"}
+        title={
+          step === "success"
+            ? "Account verified"
+            : verificationMethod === "email_verification"
+              ? "Verify your email"
+              : "Verify your mobile"
+        }
+        description={
+          step === "success"
+            ? "Your account is ready."
+            : `We've sent a 6-digit verification code to ${verificationTarget || "your contact"}.`
+        }
+        otp={otp}
+        onOtpChange={setOtp}
+        error={error}
+        pending={pending}
+        success={step === "success"}
+        successTitle="Account verified"
+        successMessage="Redirecting you to sign in…"
+        verifyLabel="Verify & continue"
+        onVerify={handleVerifyOtp}
+        onResend={handleResendOtp}
+      />
     </div>
   )
 }
 
+function isNextRedirect(err: unknown) {
+  return (
+    typeof err === "object" &&
+    err !== null &&
+    "digest" in err &&
+    String((err as { digest?: string }).digest || "").includes("NEXT_REDIRECT")
+  )
+}
+
 function VerificationToggle({
   active,
   onClick,

package/src/segment.tsx

@@ -6,12 +6,24 @@ 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({
@@ -19,17 +31,58 @@ 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">
+      {(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")}>
@@ -44,12 +97,17 @@ export default function LoginTemplate({
       {view === "login" && (
         <LoginForm
           countryCode={countryCode}
+          OtpComponent={OtpComponent}
           onForgot={() => setView("forgot")}
           onRegister={() => setView("register")}
         />
       )}
       {view === "register" && (
-        <RegisterForm countryCode={countryCode} onLogin={() => setView("login")} />
+        <RegisterForm
+          countryCode={countryCode}
+          OtpComponent={OtpComponent}
+          onLogin={() => setView("login")}
+        />
       )}
       {view === "forgot" && <ForgotPasswordForm onBack={() => setView("login")} />}
     </div>