@pradip1995/segment-login-template 0.4.1 → 0.4.3

package/src/guest-order-modal.tsx

@@ -0,0 +1,224 @@
+"use client"
+
+import { useEffect, useRef, useState } from "react"
+import { sendOTP, verifyOTP } from "./auth-server"
+import OtpVerificationModal from "./otp-verification-modal"
+import type { OtpVerificationComponent } from "./otp-component"
+import { auth } from "./account-theme"
+
+type GuestOrderModalProps = {
+  open: boolean
+  onClose: () => void
+  countryCode: string
+  initialEmail?: string
+  autoStart?: boolean
+  OtpComponent?: OtpVerificationComponent
+}
+
+export default function GuestOrderModal({
+  open,
+  onClose,
+  countryCode,
+  initialEmail = "",
+  autoStart = false,
+  OtpComponent = OtpVerificationModal,
+}: GuestOrderModalProps) {
+  const [email, setEmail] = useState(initialEmail)
+  const [otp, setOtp] = useState("")
+  const [otpToken, setOtpToken] = useState<string | null>(null)
+  const [step, setStep] = useState<"email" | "otp">("email")
+  const [pending, setPending] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [success, setSuccess] = useState(false)
+  const autoStartedRef = useRef(false)
+
+  useEffect(() => {
+    if (initialEmail) setEmail(initialEmail)
+  }, [initialEmail])
+
+  useEffect(() => {
+    if (open && autoStart && initialEmail && !autoStartedRef.current) {
+      autoStartedRef.current = true
+      void handleSendOtp(initialEmail)
+    }
+    if (!open) {
+      autoStartedRef.current = false
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open, autoStart, initialEmail])
+
+  async function handleSendOtp(emailToSend = email) {
+    if (!emailToSend.trim()) return
+    setPending(true)
+    setError(null)
+
+    try {
+      const res = await sendOTP(emailToSend.trim())
+      if (!res.success && (res as { error?: string }).error) {
+        throw new Error((res as { error?: string }).error)
+      }
+      setOtpToken((res as { token?: string }).token || "guest")
+      setOtp("")
+      setStep("otp")
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to send code")
+      setStep("email")
+    } finally {
+      setPending(false)
+    }
+  }
+
+  async function handleVerifyOtp() {
+    if (!otp || otp.length < 6) return
+    setPending(true)
+    setError(null)
+
+    try {
+      const res = await verifyOTP(email.trim(), otpToken || "", otp)
+      if (!res.success) {
+        throw new Error((res as { error?: string }).error || "Invalid code")
+      }
+      // verifyOTP sets httpOnly `_medusa_guest_jwt` via the server action
+      setSuccess(true)
+      window.setTimeout(() => {
+        window.location.href = `/${countryCode}/account/guest-orders`
+      }, 900)
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Verification failed")
+      setPending(false)
+    }
+  }
+
+  async function handleResend() {
+    await handleSendOtp(email)
+  }
+
+  function handleClose() {
+    setEmail(initialEmail || "")
+    setOtp("")
+    setOtpToken(null)
+    setStep("email")
+    setError(null)
+    setSuccess(false)
+    setPending(false)
+    autoStartedRef.current = false
+    onClose()
+  }
+
+  if (!open) return null
+
+  if (step === "otp" || success) {
+    return (
+      <OtpComponent
+        open
+        preventClose={!success}
+        title={success ? "Verified" : "Verify your email"}
+        description={
+          success
+            ? "Opening your guest orders…"
+            : `Enter the 6-digit code sent to ${email || "your email"}.`
+        }
+        otp={otp}
+        onOtpChange={setOtp}
+        error={error}
+        pending={pending}
+        success={success}
+        successTitle="Verification successful"
+        successMessage="Redirecting to your guest orders…"
+        verifyLabel="Verify & view orders"
+        onVerify={handleVerifyOtp}
+        onResend={handleResend}
+        onClose={handleClose}
+        extraContent={
+          !success ? (
+            <button
+              type="button"
+              onClick={() => {
+                setStep("email")
+                setOtp("")
+                setError(null)
+              }}
+              className="text-xs text-muted hover:text-brand-accent mb-4 w-full text-center"
+            >
+              Change email
+            </button>
+          ) : undefined
+        }
+      />
+    )
+  }
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
+      <button
+        type="button"
+        className="absolute inset-0 bg-black/40"
+        aria-label="Close guest order dialog"
+        onClick={handleClose}
+      />
+      <div className="relative w-full max-w-md border border-cart-border/60 bg-surface shadow-[0_10px_40px_-16px_rgba(0,0,0,0.2)] p-7 sm:p-8">
+        <form
+          onSubmit={(e) => {
+            e.preventDefault()
+            void handleSendOtp()
+          }}
+          className="space-y-5"
+        >
+          <div className="text-center">
+            <Ornament />
+            <h2 className={`${auth.title} text-xl xl:text-2xl`}>Track your order</h2>
+            <p className="mt-2 text-sm text-muted leading-relaxed">
+              Enter the email used at checkout. We&apos;ll send a one-time code to view guest
+              orders.
+            </p>
+          </div>
+
+          <label className="block">
+            <span className={`${auth.fieldLabel} mb-1.5 block`}>Email</span>
+            <input
+              type="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              required
+              autoComplete="email"
+              placeholder="you@example.com"
+              className={auth.input}
+            />
+          </label>
+
+          {error && (
+            <p className="text-sm text-brand-sale" role="alert">
+              {error}
+            </p>
+          )}
+
+          <button
+            type="submit"
+            disabled={pending || !email.trim()}
+            className={`${auth.btnPrimary} ${auth.btnShine}`}
+          >
+            <span className="relative z-[1]">{pending ? "Sending…" : "Send verification code"}</span>
+          </button>
+
+          <button
+            type="button"
+            onClick={handleClose}
+            className="text-sm text-muted hover:text-brand-accent w-full text-center transition-colors"
+          >
+            Cancel
+          </button>
+        </form>
+      </div>
+    </div>
+  )
+}
+
+function Ornament() {
+  return (
+    <div className="flex items-center justify-center gap-2 mb-4" aria-hidden>
+      <span className="h-px w-8 bg-gradient-to-r from-transparent to-brand-accent" />
+      <span className="text-brand-accent text-[8px] leading-none">◆</span>
+      <span className="h-px w-8 bg-gradient-to-l from-transparent to-brand-accent" />
+    </div>
+  )
+}

package/src/login-brand-panel.tsx

@@ -0,0 +1,96 @@
+"use client"
+
+import Image from "next/image"
+import type { BrandPanelConfig } from "./account-theme"
+
+type LoginBrandPanelProps = {
+  panel?: BrandPanelConfig | null
+  variant?: "desktop" | "mobile"
+}
+
+const PLACEHOLDER =
+  "data:image/svg+xml," +
+  encodeURIComponent(
+    `<svg xmlns="http://www.w3.org/2000/svg" width="800" height="1200" viewBox="0 0 800 1200">
+      <defs>
+        <linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
+          <stop offset="0%" stop-color="#1a1a1a"/>
+          <stop offset="100%" stop-color="#3d3d3d"/>
+        </linearGradient>
+      </defs>
+      <rect width="800" height="1200" fill="url(#g)"/>
+      <circle cx="400" cy="520" r="80" fill="none" stroke="#c9a46c" stroke-width="1.5" opacity="0.5"/>
+      <circle cx="400" cy="520" r="40" fill="#c9a46c" opacity="0.25"/>
+    </svg>`
+  )
+
+export default function LoginBrandPanel({
+  panel,
+  variant = "desktop",
+}: LoginBrandPanelProps) {
+  const image = panel?.image || PLACEHOLDER
+
+  if (variant === "mobile") {
+    return (
+      <div className="relative w-full h-[26vh] min-h-[160px] max-h-[200px] shrink-0 overflow-hidden bg-page-bg lg:hidden">
+        <Image
+          src={image}
+          alt=""
+          fill
+          className="object-cover object-center"
+          sizes="100vw"
+          priority
+          unoptimized={image.startsWith("data:")}
+        />
+        <div className="absolute inset-0 bg-gradient-to-b from-transparent via-page-bg/20 to-page-bg" />
+        {(panel?.eyebrow || panel?.headline) && (
+          <div className="absolute inset-x-0 bottom-0 p-5 z-[1]">
+            {panel.eyebrow && (
+              <p className="text-[10px] font-semibold uppercase tracking-[0.28em] text-inverse/80 mb-1">
+                {panel.eyebrow}
+              </p>
+            )}
+            {panel.headline && (
+              <p className="font-heading text-lg text-inverse font-bold tracking-wide">
+                {panel.headline}
+              </p>
+            )}
+          </div>
+        )}
+      </div>
+    )
+  }
+
+  return (
+    <div className="relative hidden lg:block lg:w-1/2 h-full shrink-0 overflow-hidden bg-page-bg">
+      <Image
+        src={image}
+        alt=""
+        fill
+        className="object-cover object-center"
+        sizes="50vw"
+        priority
+        unoptimized={image.startsWith("data:")}
+      />
+      <div
+        className="absolute inset-y-0 right-0 w-[50%] min-w-[200px] bg-gradient-to-l from-page-bg via-page-bg/80 to-transparent"
+        aria-hidden
+      />
+      <div className="absolute inset-0 bg-gradient-to-r from-black/[0.04] via-transparent to-transparent" />
+      {(panel?.eyebrow || panel?.headline) && (
+        <div className="absolute inset-x-0 bottom-0 p-10 xl:p-14 z-[1] max-w-md">
+          {panel.eyebrow && (
+            <p className="text-[10px] font-semibold uppercase tracking-[0.28em] text-inverse/70 mb-2">
+              {panel.eyebrow}
+            </p>
+          )}
+          {panel.headline && (
+            <p className="font-heading text-2xl xl:text-3xl text-inverse font-bold tracking-wide leading-snug">
+              {panel.headline}
+            </p>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}