@pradip1995/segment-login-template 0.3.0 → 0.4.1

package/src/account-payment-methods.tsx

@@ -0,0 +1,229 @@
+"use client"
+
+import { useState } from "react"
+import {
+  createPaymentDetail,
+  deletePaymentDetail,
+  makeDefaultPaymentDetail,
+} from "@pradip1995/commerce-core/data/payment-details"
+
+type PaymentDetail = {
+  id: string
+  type: "upi" | "bank" | "card"
+  detail_json?: Record<string, string>
+  is_default?: boolean
+}
+
+export default function AccountPaymentMethods({
+  paymentDetails,
+}: {
+  paymentDetails: PaymentDetail[]
+}) {
+  const [showForm, setShowForm] = useState(false)
+  const [type, setType] = useState<"upi" | "bank" | "card">("upi")
+  const [pending, setPending] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [form, setForm] = useState({
+    upi_id: "",
+    account_holder: "",
+    account_number: "",
+    ifsc: "",
+    card_last4: "",
+  })
+
+  async function handleAdd(e: React.FormEvent) {
+    e.preventDefault()
+    setPending(true)
+    setError(null)
+    try {
+      let detail_json: Record<string, string> = {}
+      if (type === "upi") {
+        detail_json = { upi_id: form.upi_id.trim() }
+      } else if (type === "bank") {
+        detail_json = {
+          account_holder: form.account_holder.trim(),
+          account_number: form.account_number.trim(),
+          ifsc: form.ifsc.trim(),
+        }
+      } else {
+        detail_json = { card_last4: form.card_last4.trim() }
+      }
+      await createPaymentDetail(type, detail_json)
+      window.location.reload()
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to add payment method")
+    } finally {
+      setPending(false)
+    }
+  }
+
+  async function handleDefault(id: string) {
+    setPending(true)
+    try {
+      await makeDefaultPaymentDetail(id)
+      window.location.reload()
+    } finally {
+      setPending(false)
+    }
+  }
+
+  async function handleDelete(id: string) {
+    if (!confirm("Remove this payment method?")) return
+    setPending(true)
+    try {
+      await deletePaymentDetail(id)
+      window.location.reload()
+    } finally {
+      setPending(false)
+    }
+  }
+
+  function labelFor(detail: PaymentDetail) {
+    const json = detail.detail_json ?? {}
+    if (detail.type === "upi") return `UPI · ${json.upi_id || "—"}`
+    if (detail.type === "bank")
+      return `Bank · ${json.account_holder || "—"} (${json.account_number?.slice(-4) || "****"})`
+    return `Card · **** ${json.card_last4 || "****"}`
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="flex flex-wrap items-end justify-between gap-4">
+        <div>
+          <h2 className="section-heading text-xl mb-1">Payment methods</h2>
+          <p className="text-sm text-muted">Refund destinations for returns and exchanges.</p>
+        </div>
+        <button type="button" onClick={() => setShowForm((v) => !v)} className="btn-primary text-sm">
+          {showForm ? "Cancel" : "Add method"}
+        </button>
+      </div>
+
+      {showForm && (
+        <form onSubmit={handleAdd} className="card-surface rounded-2xl p-6 space-y-4">
+          <div className="flex flex-wrap gap-2">
+            {(["upi", "bank", "card"] as const).map((t) => (
+              <button
+                key={t}
+                type="button"
+                onClick={() => setType(t)}
+                className={`px-3 py-1.5 text-xs font-medium rounded-full border ${
+                  type === t
+                    ? "border-brand-accent text-brand-accent bg-brand-accent/5"
+                    : "border-cart-border text-muted"
+                }`}
+              >
+                {t.toUpperCase()}
+              </button>
+            ))}
+          </div>
+
+          {type === "upi" && (
+            <Field
+              label="UPI ID"
+              value={form.upi_id}
+              onChange={(v) => setForm((f) => ({ ...f, upi_id: v }))}
+            />
+          )}
+          {type === "bank" && (
+            <>
+              <Field
+                label="Account holder"
+                value={form.account_holder}
+                onChange={(v) => setForm((f) => ({ ...f, account_holder: v }))}
+              />
+              <Field
+                label="Account number"
+                value={form.account_number}
+                onChange={(v) => setForm((f) => ({ ...f, account_number: v }))}
+              />
+              <Field
+                label="IFSC"
+                value={form.ifsc}
+                onChange={(v) => setForm((f) => ({ ...f, ifsc: v }))}
+              />
+            </>
+          )}
+          {type === "card" && (
+            <Field
+              label="Last 4 digits"
+              value={form.card_last4}
+              onChange={(v) => setForm((f) => ({ ...f, card_last4: v }))}
+            />
+          )}
+
+          {error && <p className="text-sm text-brand-sale">{error}</p>}
+
+          <button type="submit" disabled={pending} className="btn-primary text-sm disabled:opacity-60">
+            {pending ? "Saving…" : "Save payment method"}
+          </button>
+        </form>
+      )}
+
+      {paymentDetails.length === 0 ? (
+        <div className="card-surface rounded-2xl p-8 text-center text-sm text-muted">
+          No refund payment methods saved.
+        </div>
+      ) : (
+        <ul className="space-y-3">
+          {paymentDetails.map((detail) => (
+            <li
+              key={detail.id}
+              className="card-surface rounded-2xl p-5 flex flex-wrap justify-between gap-4 items-center"
+            >
+              <div>
+                <p className="font-medium text-heading text-sm">{labelFor(detail)}</p>
+                {detail.is_default && (
+                  <p className="text-xs text-brand-accent font-medium mt-1">Default</p>
+                )}
+              </div>
+              <div className="flex gap-3 text-xs">
+                {!detail.is_default && (
+                  <button
+                    type="button"
+                    onClick={() => handleDefault(detail.id)}
+                    disabled={pending}
+                    className="text-brand-accent hover:underline disabled:opacity-60"
+                  >
+                    Make default
+                  </button>
+                )}
+                <button
+                  type="button"
+                  onClick={() => handleDelete(detail.id)}
+                  disabled={pending}
+                  className="text-brand-sale hover:underline disabled:opacity-60"
+                >
+                  Remove
+                </button>
+              </div>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  )
+}
+
+function Field({
+  label,
+  value,
+  onChange,
+}: {
+  label: string
+  value: string
+  onChange: (value: string) => 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
+        value={value}
+        onChange={(e) => onChange(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>
+  )
+}

package/src/account-profile.tsx

@@ -0,0 +1,198 @@
+"use client"
+
+import { useActionState, useState } from "react"
+import type { HttpTypes } from "@medusajs/types"
+import { updateCustomer } from "@pradip1995/commerce-core/data/customer"
+import {
+  sendRegistrationOtp,
+  verifyRegistrationOtp,
+} from "./auth-server"
+import type { OtpVerificationComponent } from "./otp-component"
+import OtpVerificationModal from "./otp-verification-modal"
+
+export default function AccountProfile({
+  customer,
+  countryCode,
+  OtpComponent = OtpVerificationModal,
+}: {
+  customer: HttpTypes.StoreCustomer
+  countryCode: string
+  OtpComponent?: OtpVerificationComponent
+}) {
+  const [message, setMessage] = useState<string | null>(null)
+  const [otpOpen, setOtpOpen] = useState(false)
+  const [otp, setOtp] = useState("")
+  const [otpToken, setOtpToken] = useState<string | null>(null)
+  const [otpType, setOtpType] = useState<"email_verification" | "phone_verification">(
+    "email_verification"
+  )
+  const [otpError, setOtpError] = useState<string | null>(null)
+  const [otpPending, setOtpPending] = useState(false)
+
+  async function saveProfile(_prev: unknown, formData: FormData) {
+    try {
+      const fullName = String(formData.get("full_name") || "").trim()
+      const [first_name, ...rest] = fullName.split(/\s+/)
+      await updateCustomer({
+        first_name: first_name || "",
+        last_name: rest.join(" ") || ".",
+        phone: String(formData.get("phone") || "").replace(/[^\d+]/g, "") || undefined,
+      })
+      return { ok: true as const, error: null as string | null }
+    } catch (err) {
+      return {
+        ok: false as const,
+        error: err instanceof Error ? err.message : "Failed to update profile",
+      }
+    }
+  }
+
+  const [state, formAction, pending] = useActionState(saveProfile, { ok: false, error: null })
+
+  async function sendVerifyOtp(type: "email_verification" | "phone_verification") {
+    setOtpType(type)
+    setOtpPending(true)
+    setOtpError(null)
+    try {
+      const res = await sendRegistrationOtp(customer.id, type)
+      if (!res.success) throw new Error(res.error || "Failed to send code")
+      setOtpToken(res.token ?? null)
+      setOtp("")
+      setOtpOpen(true)
+    } catch (err) {
+      setOtpError(err instanceof Error ? err.message : "Failed to send code")
+    } finally {
+      setOtpPending(false)
+    }
+  }
+
+  async function verifyOtp() {
+    if (otp.length < 6) return
+    setOtpPending(true)
+    setOtpError(null)
+    try {
+      const res = await verifyRegistrationOtp({
+        otpToken: otpToken || "",
+        code: otp,
+        countryCode,
+      })
+      if (!res.success) throw new Error(res.error || "Invalid code")
+      setOtpOpen(false)
+      setMessage("Verification successful.")
+      window.location.reload()
+    } catch (err) {
+      setOtpError(err instanceof Error ? err.message : "Verification failed")
+    } finally {
+      setOtpPending(false)
+    }
+  }
+
+  const fullName = [customer.first_name, customer.last_name].filter(Boolean).join(" ")
+  const emailVerified = (customer as { email_verified?: boolean }).email_verified === true
+  const phoneVerified = (customer as { phone_verified?: boolean }).phone_verified === true
+
+  return (
+    <div className="space-y-8">
+      <div>
+        <h2 className="section-heading text-xl mb-1">Account details</h2>
+        <p className="text-sm text-muted">Update your name and contact information.</p>
+      </div>
+
+      <form action={formAction} className="card-surface rounded-2xl p-6 space-y-4">
+        <Field label="Full name" name="full_name" defaultValue={fullName} />
+        <div>
+          <label className="block text-xs font-semibold uppercase tracking-[var(--letter-spacing-nav)] text-muted mb-1.5">
+            Email
+          </label>
+          <div className="flex flex-wrap items-center gap-3">
+            <input
+              value={customer.email}
+              readOnly
+              className="flex-1 min-w-[200px] border border-cart-border rounded px-3 py-2.5 text-sm bg-surface-muted text-muted"
+            />
+            {!emailVerified && (
+              <button
+                type="button"
+                onClick={() => sendVerifyOtp("email_verification")}
+                disabled={otpPending}
+                className="btn-outline text-xs shrink-0"
+              >
+                Verify email
+              </button>
+            )}
+            {emailVerified && (
+              <span className="text-xs text-green-600 font-medium">Verified</span>
+            )}
+          </div>
+        </div>
+        <div>
+          <Field label="Phone" name="phone" type="tel" defaultValue={customer.phone || ""} />
+          <div className="mt-2 flex items-center gap-3">
+            {!phoneVerified && customer.phone && (
+              <button
+                type="button"
+                onClick={() => sendVerifyOtp("phone_verification")}
+                disabled={otpPending}
+                className="btn-outline text-xs"
+              >
+                Verify phone
+              </button>
+            )}
+            {phoneVerified && customer.phone && (
+              <span className="text-xs text-green-600 font-medium">Verified</span>
+            )}
+          </div>
+        </div>
+
+        {(state.error || message) && (
+          <p className={`text-sm ${state.ok || message ? "text-green-600" : "text-brand-sale"}`}>
+            {message || state.error}
+          </p>
+        )}
+
+        <button type="submit" disabled={pending} className="btn-primary disabled:opacity-60">
+          {pending ? "Saving…" : "Save changes"}
+        </button>
+      </form>
+
+      <OtpComponent
+        open={otpOpen}
+        title={otpType === "email_verification" ? "Verify your email" : "Verify your phone"}
+        description={`Enter the code sent to your ${otpType === "email_verification" ? "email" : "phone"}.`}
+        otp={otp}
+        onOtpChange={setOtp}
+        error={otpError}
+        pending={otpPending}
+        onVerify={verifyOtp}
+        onResend={() => sendVerifyOtp(otpType)}
+        onClose={() => setOtpOpen(false)}
+      />
+    </div>
+  )
+}
+
+function Field({
+  label,
+  name,
+  type = "text",
+  defaultValue,
+}: {
+  label: string
+  name: string
+  type?: string
+  defaultValue?: string
+}) {
+  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}
+        defaultValue={defaultValue}
+        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>
+  )
+}

package/src/account-utils.ts

@@ -0,0 +1,20 @@
+import type { HttpTypes } from "@medusajs/types"
+
+export function getProfileCompletion(customer: HttpTypes.StoreCustomer): number {
+  let score = 0
+  if (customer.first_name?.trim()) score += 25
+  if (customer.last_name?.trim()) score += 25
+  if (customer.email?.trim()) score += 25
+  if (customer.phone?.trim()) score += 25
+  return score
+}
+
+export function customerDisplayName(customer: HttpTypes.StoreCustomer): string {
+  return [customer.first_name, customer.last_name].filter(Boolean).join(" ") || customer.email || "Account"
+}
+
+export function accountSectionPath(path?: string): string {
+  if (!path || path === "login") return "overview"
+  const base = path.split("/")[0]
+  return base || "overview"
+}

package/src/auth-server.ts

@@ -3,7 +3,7 @@
 import {
   checkEmailRegistered,
   completePasswordReset,
-  registerCustomer,
+  registerCustomer as registerCustomerBase,
   requestPasswordReset,
   sendCustomerOTP,
   verifyCustomerOTP,
@@ -11,11 +11,11 @@ import {
 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 { getGoogleOAuthCallbackUrl } from "@pradip1995/commerce-core/util/google-oauth"
 import { revalidateTag } from "next/cache"
 import { redirect } from "next/navigation"
 
 export {
-  registerCustomer,
   sendCustomerOTP,
   verifyCustomerOTP,
   requestPasswordReset,
@@ -25,6 +25,38 @@ export {
   verifyOTP,
 }
 
+function normalizeRegistrationError(message: string): string {
+  const lower = message.toLowerCase()
+  if (
+    lower.includes("identity with email already exists") ||
+    lower.includes("email already exists") ||
+    lower.includes("email is already registered")
+  ) {
+    return "Email already exists"
+  }
+  if (
+    lower.includes("identity with phone already exists") ||
+    lower.includes("phone already exists")
+  ) {
+    return "Phone number already exists"
+  }
+  return message
+}
+
+export async function registerCustomer(data: {
+  email: string
+  first_name: string
+  last_name: string
+  phone?: string
+  password: string
+}) {
+  const result = await registerCustomerBase(data)
+  if (!result.success && result.error) {
+    return { ...result, error: normalizeRegistrationError(result.error) }
+  }
+  return result
+}
+
 function getHeaders() {
   return {
     "Content-Type": "application/json",
@@ -150,3 +182,126 @@ export async function completePasswordResetAction(input: {
 
   redirect(`/${input.countryCode || "in"}/account`)
 }
+
+export async function verifyRegistrationOtp(input: {
+  otpToken: string
+  code: string
+  countryCode: string
+}) {
+  const response = await fetch(`${getBaseUrl()}/store/customers/otp/verify`, {
+    method: "POST",
+    headers: getHeaders(),
+    body: JSON.stringify({
+      token: input.otpToken,
+      code: input.code,
+    }),
+    cache: "no-store",
+  })
+
+  const data = (await response.json().catch(() => ({}))) as {
+    message?: string
+    token?: string | null
+    email_verified?: boolean
+    phone_verified?: boolean
+    needs_login?: boolean
+  }
+
+  if (!response.ok) {
+    return {
+      success: false as const,
+      error: data.message || "Invalid verification code",
+    }
+  }
+
+  const loginToken = data.token
+  if (loginToken) {
+    await setAuthToken(loginToken)
+    try {
+      await transferCart(loginToken)
+    } catch {
+      // non-fatal
+    }
+    const customerCacheTag = await getCacheTag("customers")
+    revalidateTag(customerCacheTag)
+    redirect(`/${input.countryCode || "in"}`)
+  }
+
+  return {
+    success: true as const,
+    emailVerified: data.email_verified,
+    phoneVerified: data.phone_verified,
+    needsLogin: data.needs_login ?? true,
+  }
+}
+
+export async function sendRegistrationOtp(
+  customerId: string,
+  type: "email_verification" | "phone_verification"
+) {
+  const result = await sendCustomerOTP(customerId, type)
+  if (result.success) {
+    return result
+  }
+
+  const message = result.error || "Failed to send verification code"
+  if (message.includes("Channel configuration not found")) {
+    return {
+      success: false as const,
+      error:
+        "Verification email is not configured on the backend. Rebuild and restart the Medusa server with customer-registration OTP settings.",
+    }
+  }
+
+  return { success: false as const, error: message }
+}
+
+export async function initiateGoogleAuth(countryCode?: string) {
+  try {
+    const backendUrl = getBaseUrl()
+
+    if (!backendUrl) {
+      return { error: "Backend URL not configured" }
+    }
+
+    if (!process.env.GOOGLE_CLIENT_ID && !process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID) {
+      return { error: "Google sign-in is not configured on the storefront" }
+    }
+
+    const callbackUrl = getGoogleOAuthCallbackUrl(countryCode)
+
+    const response = await fetch(`${backendUrl}/auth/customer/google`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ callback_url: callbackUrl }),
+      cache: "no-store",
+    })
+
+    if (!response.ok) {
+      const err = (await response.json().catch(() => ({}))) as {
+        message?: string
+        type?: string
+      }
+      const message = err.message?.trim()
+      if (message?.includes("Unable to retrieve the auth provider")) {
+        return {
+          error:
+            "Google sign-in is not enabled on the backend. Set GOOGLE_CLIENT_ID and GOOGLE_CLIENT_SECRET in backend/.env and restart the Medusa server.",
+        }
+      }
+      return { error: message || "Google sign-in failed. Check backend Google OAuth configuration." }
+    }
+
+    const result = await response.json()
+    const redirectUrl =
+      typeof result === "string" ? result : (result as { location?: string })?.location
+
+    if (!redirectUrl) {
+      return { error: "No redirect URL received from Google OAuth" }
+    }
+
+    return { redirectUrl }
+  } catch (error: unknown) {
+    const message = error instanceof Error ? error.message : "Internal server error"
+    return { error: message }
+  }
+}