@pradip1995/segment-login-template 0.2.4 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pradip1995/segment-login-template",
-  "version": "0.2.4",
+  "version": "0.3.0",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
@@ -11,9 +11,11 @@
   ],
   "exports": {
     ".": "./src/index.ts",
-    "./manifest": "./src/manifest.ts"
+    "./manifest": "./src/manifest.ts",
+    "./reset-password": "./src/reset-password-page.tsx"
   },
   "peerDependencies": {
+    "@pradip1995/commerce-auth": "^4.0.0",
     "@pradip1995/commerce-core": "^4.0.0",
     "@pradip1995/plugin-sdk": "^0.2.0",
     "react": ">=19",
@@ -21,8 +23,10 @@
     "next": ">=15"
   },
   "dependencies": {
-    "@pradip1995/segment-primitives": "0.3.0",
-    "@pradip1995/segment-tokens": "0.3.2"
+    "@pradip1995/commerce-auth": "^4.0.0",
+    "@pradip1995/commerce-core": "^4.0.0",
+    "@pradip1995/segment-primitives": "^0.3.0",
+    "@pradip1995/segment-tokens": "^0.3.2"
   },
   "devDependencies": {
     "@pradip1995/plugin-sdk": "^0.2.0",

package/src/account-overview.tsx

@@ -0,0 +1,69 @@
+"use client"
+
+import { signout } from "@pradip1995/commerce-core/client/actions/customer"
+import LocalizedLink from "@pradip1995/segment-primitives/localized-link"
+import { formatPrice } from "@pradip1995/segment-primitives/format-price"
+import type { HttpTypes } from "@medusajs/types"
+
+export default 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>
+  )
+}

package/src/auth-server.ts

@@ -0,0 +1,152 @@
+"use server"
+
+import {
+  checkEmailRegistered,
+  completePasswordReset,
+  registerCustomer,
+  requestPasswordReset,
+  sendCustomerOTP,
+  verifyCustomerOTP,
+} from "@pradip1995/commerce-core/data/customer-registration"
+import { transferCart } from "@pradip1995/commerce-core/data/customer"
+import { getCacheTag, setAuthToken } from "@pradip1995/commerce-core/data/cookies"
+import { sendOTP, verifyOTP } from "@pradip1995/commerce-core/data/guest"
+import { revalidateTag } from "next/cache"
+import { redirect } from "next/navigation"
+
+export {
+  registerCustomer,
+  sendCustomerOTP,
+  verifyCustomerOTP,
+  requestPasswordReset,
+  checkEmailRegistered,
+  completePasswordReset,
+  sendOTP,
+  verifyOTP,
+}
+
+function getHeaders() {
+  return {
+    "Content-Type": "application/json",
+    "x-publishable-api-key": process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY || "",
+  }
+}
+
+function getBaseUrl() {
+  return process.env.MEDUSA_BACKEND_URL || "http://localhost:9000"
+}
+
+export async function sendAuthOtp(input: {
+  email?: string
+  phone?: string
+  type: "email_auth" | "phone_auth"
+}) {
+  const baseUrl = getBaseUrl()
+  const body =
+    input.type === "email_auth"
+      ? { email: input.email?.toLowerCase().trim(), type: input.type }
+      : { phone: input.phone?.replace(/[^\d+]/g, ""), type: input.type }
+
+  const response = await fetch(`${baseUrl}/store/customers/otp/send`, {
+    method: "POST",
+    headers: getHeaders(),
+    body: JSON.stringify(body),
+  })
+
+  if (!response.ok) {
+    const err = await response.json().catch(() => ({}))
+    return {
+      success: false as const,
+      error: (err as { message?: string }).message || "Failed to send verification code",
+    }
+  }
+
+  const data = (await response.json()) as {
+    token?: string
+    expires_at?: string
+    is_new_user?: boolean
+  }
+
+  return {
+    success: true as const,
+    token: data.token,
+    isNewUser: data.is_new_user ?? false,
+  }
+}
+
+export async function verifyAuthOtpAndLogin(input: {
+  token: string
+  code: string
+  countryCode: string
+  first_name?: string
+  last_name?: string
+}) {
+  const baseUrl = getBaseUrl()
+
+  const response = await fetch(`${baseUrl}/store/customers/otp/verify`, {
+    method: "POST",
+    headers: getHeaders(),
+    body: JSON.stringify({
+      token: input.token,
+      code: input.code,
+      first_name: input.first_name,
+      last_name: input.last_name,
+    }),
+  })
+
+  if (!response.ok) {
+    const err = await response.json().catch(() => ({}))
+    return {
+      success: false as const,
+      error: (err as { message?: string }).message || "Invalid verification code",
+    }
+  }
+
+  const data = (await response.json()) as {
+    token?: string | null
+    verified?: boolean
+    is_new_user?: boolean
+    customer?: { email?: string }
+  }
+
+  const jwt = data.token
+  if (!jwt) {
+    return {
+      success: false as const,
+      error: "Verification succeeded but login token was not returned. Try signing in with your password.",
+    }
+  }
+
+  await setAuthToken(jwt)
+
+  try {
+    await transferCart(jwt)
+  } catch {
+    // non-fatal
+  }
+
+  const customerCacheTag = await getCacheTag("customers")
+  revalidateTag(customerCacheTag)
+
+  const countryCode = input.countryCode || "in"
+  redirect(`/${countryCode}`)
+}
+
+export async function completePasswordResetAction(input: {
+  email: string
+  password: string
+  token: string
+  countryCode: string
+}) {
+  const result = await completePasswordReset({
+    email: input.email,
+    password: input.password,
+    token: input.token,
+  })
+
+  if (!result.success) {
+    return result
+  }
+
+  redirect(`/${input.countryCode || "in"}/account`)
+}

package/src/forgot-password-form.tsx

@@ -0,0 +1,89 @@
+"use client"
+
+import { useState } from "react"
+import { checkEmailRegistered, requestPasswordReset } from "./auth-server"
+
+export default function ForgotPasswordForm({ onBack }: { onBack: () => void }) {
+  const [email, setEmail] = useState("")
+  const [message, setMessage] = useState<string | null>(null)
+  const [error, setError] = useState<string | null>(null)
+  const [pending, setPending] = useState(false)
+  const [success, setSuccess] = useState(false)
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault()
+    if (!email.trim()) return
+
+    setPending(true)
+    setMessage(null)
+    setError(null)
+
+    try {
+      const check = await checkEmailRegistered(email.trim())
+      if (!check.exists) {
+        setError("This email is not registered. Please create a new account instead.")
+        return
+      }
+
+      const result = await requestPasswordReset(email.trim())
+      if (!result.success) {
+        setError(result.error || "Failed to send reset link")
+        return
+      }
+
+      setSuccess(true)
+      setMessage(result.message || "If an account exists, you will receive a reset link shortly.")
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Something went wrong")
+    } finally {
+      setPending(false)
+    }
+  }
+
+  if (success) {
+    return (
+      <div className="space-y-4 text-center py-4">
+        <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">Check your email</h2>
+        <p className="text-sm text-muted">{message}</p>
+        <button type="button" onClick={onBack} className="btn-outline w-full">
+          Back to sign in
+        </button>
+      </div>
+    )
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-4">
+      <p className="text-sm text-muted">
+        Enter your email and we&apos;ll send a link to reset your password.
+      </p>
+      <label className="block">
+        <span className="text-xs font-semibold uppercase tracking-[var(--letter-spacing-nav)] text-muted mb-1.5 block">
+          Email
+        </span>
+        <input
+          name="email"
+          type="email"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+          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>
+      {error && <p className="text-sm text-brand-sale">{error}</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>
+  )
+}

package/src/google-auth-section.tsx

@@ -0,0 +1,25 @@
+"use client"
+
+import { initiateGoogleAuth } from "@pradip1995/commerce-core/client/actions/customer"
+import { GoogleLoginButton } from "@pradip1995/commerce-auth/components/google-login"
+
+const BUTTON_CLASS =
+  "btn-outline w-full flex items-center justify-center gap-2.5 py-3 px-4"
+
+export default function GoogleAuthSection({ countryCode }: { countryCode: string }) {
+  const clientId = process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID?.trim()
+
+  if (!clientId) return null
+
+  return (
+    <div className="mb-6">
+      <GoogleLoginButton
+        countryCode={countryCode}
+        defaultCountryCode="in"
+        initiateAuth={initiateGoogleAuth}
+        className={BUTTON_CLASS}
+        googleIconSrc="/Google.svg"
+      />
+    </div>
+  )
+}

package/src/index.ts

@@ -1,2 +1,3 @@
 export { default } from "./segment"
 export { default as manifest } from "./manifest"
+export { default as ResetPasswordPage } from "./reset-password-page"