@pradip1995/segment-login-template 0.3.0 → 0.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pradip1995/segment-login-template",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
@@ -12,7 +12,10 @@
   "exports": {
     ".": "./src/index.ts",
     "./manifest": "./src/manifest.ts",
-    "./reset-password": "./src/reset-password-page.tsx"
+    "./reset-password": "./src/reset-password-page.tsx",
+    "./otp-verification-modal": "./src/otp-verification-modal.tsx",
+    "./commerce-auth-otp-modal": "./src/commerce-auth-otp-modal.tsx",
+    "./otp-component": "./src/otp-component.ts"
   },
   "peerDependencies": {
     "@pradip1995/commerce-auth": "^4.0.0",

package/src/account-addresses.tsx

@@ -0,0 +1,216 @@
+"use client"
+
+import { useActionState, useState } from "react"
+import type { HttpTypes } from "@medusajs/types"
+import {
+  addCustomerAddress,
+  deleteCustomerAddress,
+  updateCustomerAddress,
+} from "@pradip1995/commerce-core/data/customer"
+
+export default function AccountAddresses({
+  customer,
+  countryCode,
+}: {
+  customer: HttpTypes.StoreCustomer
+  countryCode: string
+}) {
+  const addresses = customer.addresses ?? []
+  const [editingId, setEditingId] = useState<string | null>(null)
+  const [showAdd, setShowAdd] = useState(false)
+
+  return (
+    <div className="space-y-8">
+      <div className="flex flex-wrap items-end justify-between gap-4">
+        <div>
+          <h2 className="section-heading text-xl mb-1">Saved addresses</h2>
+          <p className="text-sm text-muted">Manage shipping and billing addresses.</p>
+        </div>
+        <button type="button" onClick={() => setShowAdd(true)} className="btn-primary text-sm">
+          Add address
+        </button>
+      </div>
+
+      {addresses.length === 0 && !showAdd && (
+        <div className="card-surface rounded-2xl p-8 text-center text-sm text-muted">
+          No saved addresses yet.
+        </div>
+      )}
+
+      <ul className="space-y-4">
+        {addresses.map((address) => (
+          <li key={address.id} className="card-surface rounded-2xl p-5">
+            {editingId === address.id ? (
+              <AddressForm
+                countryCode={countryCode}
+                address={address}
+                addressId={address.id}
+                onDone={() => setEditingId(null)}
+                onCancel={() => setEditingId(null)}
+              />
+            ) : (
+              <div className="flex flex-wrap justify-between gap-4">
+                <div className="text-sm text-body space-y-1">
+                  <p className="font-semibold text-heading">
+                    {[address.first_name, address.last_name].filter(Boolean).join(" ")}
+                  </p>
+                  <p>{address.address_1}</p>
+                  {address.address_2 && <p>{address.address_2}</p>}
+                  <p>
+                    {[address.city, address.province, address.postal_code].filter(Boolean).join(", ")}
+                  </p>
+                  <p className="uppercase text-xs text-muted">{address.country_code}</p>
+                  {address.phone && <p>{address.phone}</p>}
+                  {(address.is_default_shipping || address.is_default_billing) && (
+                    <p className="text-xs text-brand-accent font-medium pt-1">
+                      {address.is_default_shipping && address.is_default_billing
+                        ? "Default shipping & billing"
+                        : address.is_default_shipping
+                          ? "Default shipping"
+                          : "Default billing"}
+                    </p>
+                  )}
+                </div>
+                <div className="flex gap-2 shrink-0">
+                  <button
+                    type="button"
+                    onClick={() => setEditingId(address.id!)}
+                    className="btn-outline text-xs"
+                  >
+                    Edit
+                  </button>
+                  <DeleteAddressButton addressId={address.id!} />
+                </div>
+              </div>
+            )}
+          </li>
+        ))}
+      </ul>
+
+      {showAdd && (
+        <div className="card-surface rounded-2xl p-5">
+          <h3 className="text-sm font-semibold text-heading mb-4">New address</h3>
+          <AddressForm
+            countryCode={countryCode}
+            onDone={() => setShowAdd(false)}
+            onCancel={() => setShowAdd(false)}
+          />
+        </div>
+      )}
+    </div>
+  )
+}
+
+function AddressForm({
+  countryCode,
+  address,
+  addressId,
+  onDone,
+  onCancel,
+}: {
+  countryCode: string
+  address?: HttpTypes.StoreCustomerAddress
+  addressId?: string
+  onDone: () => void
+  onCancel: () => void
+}) {
+  const action = addressId ? updateCustomerAddress : addCustomerAddress
+  const [state, formAction, pending] = useActionState(
+    async (prev: Record<string, unknown>, formData: FormData) => {
+      const result = await action(
+        addressId ? { ...prev, addressId } : { ...prev, isDefaultShipping: false, isDefaultBilling: false },
+        formData
+      )
+      if (result?.success) {
+        onDone()
+        window.location.reload()
+      }
+      return result
+    },
+    { success: false, error: null as string | null }
+  )
+
+  return (
+    <form action={formAction} className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+      <Field label="First name" name="first_name" defaultValue={address?.first_name || ""} />
+      <Field label="Last name" name="last_name" defaultValue={address?.last_name || ""} />
+      <Field label="Address line 1" name="address_1" className="sm:col-span-2" defaultValue={address?.address_1 || ""} />
+      <Field label="Address line 2" name="address_2" className="sm:col-span-2" defaultValue={address?.address_2 || ""} />
+      <Field label="City" name="city" defaultValue={address?.city || ""} />
+      <Field label="State / Province" name="province" defaultValue={address?.province || ""} />
+      <Field label="Postal code" name="postal_code" defaultValue={address?.postal_code || ""} />
+      <Field
+        label="Country code"
+        name="country_code"
+        defaultValue={address?.country_code || countryCode}
+      />
+      <Field label="Phone" name="phone" type="tel" defaultValue={address?.phone || ""} />
+      {state?.error && (
+        <p className="sm:col-span-2 text-sm text-brand-sale">{String(state.error)}</p>
+      )}
+      <div className="sm:col-span-2 flex gap-3">
+        <button type="submit" disabled={pending} className="btn-primary text-sm disabled:opacity-60">
+          {pending ? "Saving…" : "Save address"}
+        </button>
+        <button type="button" onClick={onCancel} className="btn-outline text-sm">
+          Cancel
+        </button>
+      </div>
+    </form>
+  )
+}
+
+function DeleteAddressButton({ addressId }: { addressId: string }) {
+  const [pending, setPending] = useState(false)
+
+  async function handleDelete() {
+    if (!confirm("Delete this address?")) return
+    setPending(true)
+    try {
+      await deleteCustomerAddress(addressId)
+      window.location.reload()
+    } finally {
+      setPending(false)
+    }
+  }
+
+  return (
+    <button
+      type="button"
+      onClick={handleDelete}
+      disabled={pending}
+      className="text-xs text-brand-sale hover:underline disabled:opacity-60"
+    >
+      {pending ? "Deleting…" : "Delete"}
+    </button>
+  )
+}
+
+function Field({
+  label,
+  name,
+  type = "text",
+  defaultValue,
+  className = "",
+}: {
+  label: string
+  name: string
+  type?: string
+  defaultValue?: string
+  className?: string
+}) {
+  return (
+    <label className={`block ${className}`}>
+      <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}
+        required={name !== "address_2"}
+        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-guest-orders.tsx

@@ -0,0 +1,60 @@
+"use client"
+
+import type { HttpTypes } from "@medusajs/types"
+import LocalizedLink from "@pradip1995/segment-primitives/localized-link"
+import { formatPrice } from "@pradip1995/segment-primitives/format-price"
+import { logoutGuest } from "@pradip1995/commerce-core/data/guest"
+
+export default function AccountGuestOrders({
+  orders,
+  countryCode,
+}: {
+  orders: HttpTypes.StoreOrder[]
+  countryCode: string
+}) {
+  async function handleSignOut() {
+    await logoutGuest()
+    window.location.href = `/${countryCode}/account`
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="flex flex-wrap items-start justify-between gap-4">
+        <div>
+          <h2 className="section-heading text-xl mb-1">Guest orders</h2>
+          <p className="text-sm text-muted">Orders linked to your verified email.</p>
+        </div>
+        <button type="button" onClick={handleSignOut} className="btn-outline text-xs">
+          End guest session
+        </button>
+      </div>
+
+      {orders.length === 0 ? (
+        <div className="card-surface rounded-2xl p-8 text-center text-sm text-muted">
+          No guest orders found for this session.
+        </div>
+      ) : (
+        <ul className="space-y-3">
+          {orders.map((order) => (
+            <li key={order.id}>
+              <LocalizedLink
+                href={`/orders/${order.id}`}
+                className="card-surface rounded-2xl p-5 flex items-center justify-between gap-4 hover:border-brand-accent transition-colors block"
+              >
+                <div>
+                  <p className="font-semibold 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>
+  )
+}

package/src/account-orders.tsx

@@ -0,0 +1,81 @@
+"use client"
+
+import { useMemo, useState } from "react"
+import type { HttpTypes } from "@medusajs/types"
+import LocalizedLink from "@pradip1995/segment-primitives/localized-link"
+import { formatPrice } from "@pradip1995/segment-primitives/format-price"
+
+export default function AccountOrders({
+  orders,
+}: {
+  orders: HttpTypes.StoreOrder[]
+}) {
+  const [query, setQuery] = useState("")
+
+  const filtered = useMemo(() => {
+    const q = query.trim().toLowerCase()
+    if (!q) return orders
+    return orders.filter((order) => {
+      const id = String(order.display_id ?? order.id)
+      const status = String(order.status ?? "").replace(/_/g, " ")
+      return id.includes(q) || status.toLowerCase().includes(q)
+    })
+  }, [orders, query])
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h2 className="section-heading text-xl mb-1">Order history</h2>
+        <p className="text-sm text-muted">View and track your past orders.</p>
+      </div>
+
+      <input
+        type="search"
+        value={query}
+        onChange={(e) => setQuery(e.target.value)}
+        placeholder="Search by order number or status"
+        className="w-full border border-cart-border rounded-lg px-4 py-2.5 text-sm bg-surface focus:outline-none focus:border-brand-accent"
+      />
+
+      {filtered.length === 0 ? (
+        <div className="card-surface rounded-2xl p-8 text-center">
+          <p className="text-muted text-sm mb-4">
+            {orders.length === 0 ? "No orders yet." : "No orders match your search."}
+          </p>
+          {orders.length === 0 && (
+            <LocalizedLink href="/store" className="btn-primary inline-block text-sm">
+              Start shopping
+            </LocalizedLink>
+          )}
+        </div>
+      ) : (
+        <ul className="space-y-3">
+          {filtered.map((order) => (
+            <li key={order.id}>
+              <LocalizedLink
+                href={`/orders/${order.id}`}
+                className="card-surface rounded-2xl p-5 flex flex-wrap items-center justify-between gap-4 hover:border-brand-accent transition-colors block"
+              >
+                <div>
+                  <p className="font-semibold text-heading">Order #{order.display_id}</p>
+                  <p className="text-xs text-muted mt-1 capitalize">
+                    {order.status?.replace(/_/g, " ")}
+                    {order.created_at && (
+                      <> · {new Date(order.created_at).toLocaleDateString()}</>
+                    )}
+                  </p>
+                  <p className="text-xs text-muted mt-1">
+                    {order.items?.length ?? 0} item{(order.items?.length ?? 0) === 1 ? "" : "s"}
+                  </p>
+                </div>
+                <p className="text-sm font-semibold text-brand-accent shrink-0">
+                  {formatPrice(order.total, order.currency_code)}
+                </p>
+              </LocalizedLink>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  )
+}

package/src/account-overview.tsx

@@ -1,9 +1,9 @@
 "use client"
 
-import { signout } from "@pradip1995/commerce-core/client/actions/customer"
+import type { HttpTypes } from "@medusajs/types"
 import LocalizedLink from "@pradip1995/segment-primitives/localized-link"
 import { formatPrice } from "@pradip1995/segment-primitives/format-price"
-import type { HttpTypes } from "@medusajs/types"
+import { getProfileCompletion } from "./account-utils"
 
 export default function AccountOverview({
   customer,
@@ -15,39 +15,58 @@ export default function AccountOverview({
   countryCode: string
 }) {
   const name = [customer.first_name, customer.last_name].filter(Boolean).join(" ") || customer.email
+  const completion = getProfileCompletion(customer)
+  const addressCount = customer.addresses?.length ?? 0
 
   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>
+        <p className="text-sm text-muted mb-1">Welcome back</p>
+        <h2 className="section-heading text-xl">Hello, {customer.first_name || name}</h2>
+        <p className="text-sm text-muted mt-1">Signed in as {customer.email}</p>
+      </div>
+
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+        <StatCard
+          title="Profile"
+          value={`${completion}%`}
+          subtitle="Completed"
+          href="/account/profile"
+        />
+        <StatCard
+          title="Addresses"
+          value={String(addressCount)}
+          subtitle="Saved"
+          href="/account/addresses"
+        />
       </div>
 
       <div>
-        <h2 className="text-sm font-semibold uppercase tracking-[var(--letter-spacing-nav)] text-heading mb-4">
-          Recent orders
-        </h2>
+        <div className="flex items-center justify-between gap-4 mb-4">
+          <h3 className="text-sm font-semibold uppercase tracking-[var(--letter-spacing-nav)] text-heading">
+            Recent orders
+          </h3>
+          {orders.length > 0 && (
+            <LocalizedLink href="/account/orders" className="text-xs text-brand-accent hover:underline">
+              View all
+            </LocalizedLink>
+          )}
+        </div>
+
         {orders.length === 0 ? (
-          <div className="card-surface rounded-lg p-8 text-center">
+          <div className="card-surface rounded-2xl p-8 text-center">
             <p className="text-muted text-sm mb-4">No orders yet.</p>
-            <LocalizedLink href="/store" className="btn-primary inline-block">
+            <LocalizedLink href="/store" className="btn-primary inline-block text-sm">
               Start shopping
             </LocalizedLink>
           </div>
         ) : (
           <ul className="space-y-3">
-            {orders.map((order) => (
+            {orders.slice(0, 5).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"
+                  className="card-surface rounded-2xl 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>
@@ -67,3 +86,26 @@ export default function AccountOverview({
     </div>
   )
 }
+
+function StatCard({
+  title,
+  value,
+  subtitle,
+  href,
+}: {
+  title: string
+  value: string
+  subtitle: string
+  href: string
+}) {
+  return (
+    <LocalizedLink
+      href={href}
+      className="card-surface rounded-2xl p-5 hover:border-brand-accent transition-colors block"
+    >
+      <p className="text-xs uppercase tracking-[var(--letter-spacing-nav)] text-muted mb-2">{title}</p>
+      <p className="text-3xl font-semibold text-heading leading-none">{value}</p>
+      <p className="text-xs text-muted mt-2 uppercase">{subtitle}</p>
+    </LocalizedLink>
+  )
+}