@pradip1995/segment-login-template 0.4.1 → 0.4.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pradip1995/segment-login-template",
-  "version": "0.4.1",
+  "version": "0.4.3",
   "license": "MIT",
   "publishConfig": {
     "access": "public"

package/src/account-addresses.tsx

@@ -7,6 +7,7 @@ import {
   deleteCustomerAddress,
   updateCustomerAddress,
 } from "@pradip1995/commerce-core/data/customer"
+import { acct } from "./account-theme"
 
 export default function AccountAddresses({
   customer,
@@ -23,23 +24,23 @@ export default function AccountAddresses({
     <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>
+          <h2 className={acct.title}>Saved addresses</h2>
+          <p className={`text-sm ${acct.muted}`}>Manage shipping and billing addresses.</p>
         </div>
-        <button type="button" onClick={() => setShowAdd(true)} className="btn-primary text-sm">
+        <button type="button" onClick={() => setShowAdd(true)} className={acct.btnPrimary}>
           Add address
         </button>
       </div>
 
       {addresses.length === 0 && !showAdd && (
-        <div className="card-surface rounded-2xl p-8 text-center text-sm text-muted">
+        <div className={`${acct.cardMuted} p-8 text-center text-sm ${acct.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">
+          <li key={address.id} className={`${acct.card} p-5`}>
             {editingId === address.id ? (
               <AddressForm
                 countryCode={countryCode}
@@ -75,7 +76,7 @@ export default function AccountAddresses({
                   <button
                     type="button"
                     onClick={() => setEditingId(address.id!)}
-                    className="btn-outline text-xs"
+                    className={`${acct.btnOutline} !py-2 !px-3`}
                   >
                     Edit
                   </button>
@@ -88,7 +89,7 @@ export default function AccountAddresses({
       </ul>
 
       {showAdd && (
-        <div className="card-surface rounded-2xl p-5">
+        <div className={`${acct.card} p-5`}>
           <h3 className="text-sm font-semibold text-heading mb-4">New address</h3>
           <AddressForm
             countryCode={countryCode}
@@ -146,13 +147,13 @@ function AddressForm({
       />
       <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>
+        <p className="sm:col-span-2 text-sm text-red-600">{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">
+        <button type="submit" disabled={pending} className={acct.btnPrimary}>
           {pending ? "Saving…" : "Save address"}
         </button>
-        <button type="button" onClick={onCancel} className="btn-outline text-sm">
+        <button type="button" onClick={onCancel} className={acct.btnOutline}>
           Cancel
         </button>
       </div>
@@ -179,7 +180,7 @@ function DeleteAddressButton({ addressId }: { addressId: string }) {
       type="button"
       onClick={handleDelete}
       disabled={pending}
-      className="text-xs text-brand-sale hover:underline disabled:opacity-60"
+      className="text-xs text-red-600 hover:underline disabled:opacity-60"
     >
       {pending ? "Deleting…" : "Delete"}
     </button>
@@ -201,7 +202,7 @@ function Field({
 }) {
   return (
     <label className={`block ${className}`}>
-      <span className="text-xs font-semibold uppercase tracking-[var(--letter-spacing-nav)] text-muted mb-1.5 block">
+      <span className="text-xs font-semibold uppercase tracking-wider text-muted mb-1.5 block">
         {label}
       </span>
       <input
@@ -209,7 +210,7 @@ function Field({
         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"
+        className="w-full border border-cart-border rounded-none px-3 py-2.5 text-sm bg-surface text-heading focus:outline-none focus:border-brand-accent"
       />
     </label>
   )

package/src/account-guest-orders.tsx

@@ -4,45 +4,80 @@ 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"
+import { auth } from "./account-theme"
 
 export default function AccountGuestOrders({
   orders,
   countryCode,
 }: {
-  orders: HttpTypes.StoreOrder[]
+  orders?: HttpTypes.StoreOrder[] | { orders?: HttpTypes.StoreOrder[] } | null
   countryCode: string
 }) {
+  const safeOrders: HttpTypes.StoreOrder[] = Array.isArray(orders)
+    ? orders
+    : Array.isArray((orders as { orders?: HttpTypes.StoreOrder[] })?.orders)
+      ? ((orders as { orders: HttpTypes.StoreOrder[] }).orders)
+      : []
+
   async function handleSignOut() {
     await logoutGuest()
     window.location.href = `/${countryCode}/account`
   }
 
+  async function handleCheckDifferent() {
+    await logoutGuest()
+    window.location.href = `/${countryCode}/account?view=guest`
+  }
+
   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 className="flex items-center gap-2 mb-2" aria-hidden>
+            <span className="h-px w-6 bg-brand-accent/70" />
+            <span className="text-brand-accent text-[7px]">◆</span>
+            <span className="h-px w-6 bg-brand-accent/70" />
+          </div>
+          <h2 className="font-heading text-2xl font-bold text-heading uppercase tracking-[0.08em] mb-1">
+            Guest orders
+          </h2>
+          <p className="text-sm text-muted">
+            Track orders linked to your verified email.
+          </p>
+        </div>
+        <div className="flex flex-wrap gap-2">
+          <button
+            type="button"
+            onClick={handleCheckDifferent}
+            className="btn-outline text-xs"
+          >
+            Check different email
+          </button>
+          <button type="button" onClick={handleSignOut} className="btn-outline text-xs">
+            End guest session
+          </button>
         </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.
+      {safeOrders.length === 0 ? (
+        <div className="border border-cart-border bg-surface p-8 text-center">
+          <p className="text-sm text-muted mb-4">No guest orders found for this session.</p>
+          <LocalizedLink href="/store" className={`${auth.btnPrimary} ${auth.btnShine} inline-flex`}>
+            <span className="relative z-[1]">Continue shopping</span>
+          </LocalizedLink>
         </div>
       ) : (
         <ul className="space-y-3">
-          {orders.map((order) => (
+          {safeOrders.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"
+                className="border border-cart-border bg-surface p-5 flex items-center justify-between gap-4 hover:border-brand-accent transition-colors duration-200 block"
               >
                 <div>
-                  <p className="font-semibold text-heading text-sm">Order #{order.display_id}</p>
+                  <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>

package/src/account-orders.tsx

@@ -4,29 +4,60 @@ 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"
+import { acct } from "./account-theme"
+
+function statusStyle(status?: string, fulfillment?: string) {
+  const s = (fulfillment || status || "").toLowerCase()
+  if (s.includes("cancel")) {
+    return "bg-[#FFF1F2] text-[#BE123C] border-[#BE123C]/20"
+  }
+  if (s === "delivered" || s === "complete" || s === "completed") {
+    return "bg-[#E6F4F0] text-[#008A5D] border-[#008A5D]/20"
+  }
+  if (s.includes("ship")) {
+    return "bg-[#EBF5FF] text-[#0068D2] border-[#0068D2]/20"
+  }
+  if (s.includes("fulfill")) {
+    return "bg-surface-muted text-brand-accent border-brand-accent"
+  }
+  return "bg-surface-muted text-muted border-cart-border"
+}
 
 export default function AccountOrders({
   orders,
 }: {
-  orders: HttpTypes.StoreOrder[]
+  orders?: HttpTypes.StoreOrder[] | { orders?: HttpTypes.StoreOrder[] } | null
 }) {
   const [query, setQuery] = useState("")
 
+  const safeOrders: HttpTypes.StoreOrder[] = useMemo(() => {
+    if (Array.isArray(orders)) return orders
+    if (Array.isArray((orders as any)?.orders)) return (orders as any).orders
+    return []
+  }, [orders])
+
   const filtered = useMemo(() => {
     const q = query.trim().toLowerCase()
-    if (!q) return orders
-    return orders.filter((order) => {
+    if (!q) return safeOrders
+    return safeOrders.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)
+      const fulfillment = String(order.fulfillment_status ?? "").replace(/_/g, " ")
+      return (
+        id.includes(q) ||
+        status.toLowerCase().includes(q) ||
+        fulfillment.toLowerCase().includes(q)
+      )
     })
-  }, [orders, query])
+  }, [safeOrders, 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 className="pb-6 border-b border-cart-border">
+        <h2 className={acct.title}>Order history</h2>
+        <p className={`text-sm ${acct.muted} mt-2`}>
+          View and track your past orders.
+        </p>
       </div>
 
       <input
@@ -34,46 +65,67 @@ export default function AccountOrders({
         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"
+        className={acct.input}
       />
 
       {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."}
+        <div className={`${acct.cardMuted} p-8 text-center`}>
+          <p className={`${acct.muted} text-sm mb-4`}>
+            {safeOrders.length === 0
+              ? "No orders yet."
+              : "No orders match your search."}
           </p>
-          {orders.length === 0 && (
-            <LocalizedLink href="/store" className="btn-primary inline-block text-sm">
+          {safeOrders.length === 0 && (
+            <LocalizedLink href="/store" className={acct.btnPrimary}>
               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"}
+        <ul className="space-y-4">
+          {filtered.map((order) => {
+            const label = (
+              order.fulfillment_status ||
+              order.status ||
+              ""
+            ).replace(/_/g, " ")
+            return (
+              <li key={order.id}>
+                <LocalizedLink
+                  href={`/orders/${order.id}`}
+                  className={`${acct.card} p-5 flex flex-wrap items-center justify-between gap-4 hover:border-brand-accent transition-colors block`}
+                >
+                  <div className="space-y-2 min-w-0">
+                    <div className="flex flex-wrap items-center gap-2">
+                      <p className={`font-bold ${acct.heading}`}>
+                        Order #{order.display_id}
+                      </p>
+                      <span
+                        className={`${acct.badge} capitalize ${statusStyle(
+                          order.status,
+                          order.fulfillment_status
+                        )}`}
+                      >
+                        {label}
+                      </span>
+                    </div>
+                    <p className={`text-xs ${acct.muted}`}>
+                      {order.created_at &&
+                        new Date(order.created_at).toLocaleDateString("en-IN", {
+                          dateStyle: "medium",
+                        })}
+                      {" · "}
+                      {order.items?.length ?? 0} item
+                      {(order.items?.length ?? 0) === 1 ? "" : "s"}
+                    </p>
+                  </div>
+                  <p className={`text-base font-bold ${acct.accent} shrink-0`}>
+                    {formatPrice(order.total, order.currency_code)}
                   </p>
-                </div>
-                <p className="text-sm font-semibold text-brand-accent shrink-0">
-                  {formatPrice(order.total, order.currency_code)}
-                </p>
-              </LocalizedLink>
-            </li>
-          ))}
+                </LocalizedLink>
+              </li>
+            )
+          })}
         </ul>
       )}
     </div>

package/src/account-overview.tsx

@@ -4,108 +4,130 @@ import type { HttpTypes } from "@medusajs/types"
 import LocalizedLink from "@pradip1995/segment-primitives/localized-link"
 import { formatPrice } from "@pradip1995/segment-primitives/format-price"
 import { getProfileCompletion } from "./account-utils"
+import { acct } from "./account-theme"
 
 export default function AccountOverview({
   customer,
   orders,
-  countryCode,
 }: {
   customer: HttpTypes.StoreCustomer
-  orders: HttpTypes.StoreOrder[]
+  orders?: HttpTypes.StoreOrder[] | { orders?: HttpTypes.StoreOrder[] } | null
   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
 
+  const safeOrders: HttpTypes.StoreOrder[] = Array.isArray(orders)
+    ? orders
+    : Array.isArray((orders as any)?.orders)
+    ? (orders as any).orders
+    : []
+
   return (
-    <div className="space-y-8">
-      <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="flex justify-between items-start gap-4 mb-6 pb-6 border-b border-cart-border">
+        <span className={`font-serif text-2xl font-extrabold ${acct.heading}`}>
+          Hello {customer.first_name}
+        </span>
+        <span className={`text-xs ${acct.muted} text-right shrink-0 max-w-[50%]`}>
+          Signed in as:{" "}
+          <span className={`font-semibold ${acct.accent} block sm:inline`}>
+            {customer.email}
+          </span>
+        </span>
       </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 className="flex items-start gap-x-12 sm:gap-x-16 mb-8 pb-8 border-b border-cart-border">
+        <LocalizedLink href="/account/profile" className="flex flex-col gap-y-2 group">
+          <h3 className={acct.subsection}>Profile</h3>
+          <div className="flex items-end gap-x-2">
+            <span className="text-4xl font-serif font-extrabold text-heading group-hover:text-brand-accent transition-colors">
+              {completion}%
+            </span>
+            <span className={`uppercase text-xs font-medium tracking-wider ${acct.muted} pb-1`}>
+              Completed
+            </span>
+          </div>
+        </LocalizedLink>
 
-      <div>
-        <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>
+        <LocalizedLink href="/account/addresses" className="flex flex-col gap-y-2 group">
+          <h3 className={acct.subsection}>Addresses</h3>
+          <div className="flex items-end gap-x-2">
+            <span className="text-4xl font-serif font-extrabold text-heading group-hover:text-brand-accent transition-colors">
+              {addressCount}
+            </span>
+            <span className={`uppercase text-xs font-medium tracking-wider ${acct.muted} pb-1`}>
+              Saved
+            </span>
+          </div>
+        </LocalizedLink>
+      </div>
 
-        {orders.length === 0 ? (
-          <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 text-sm">
+      <div className="flex flex-col gap-y-4">
+        <h3 className={acct.sectionTitle}>Recent orders</h3>
+        {safeOrders.length === 0 ? (
+          <div className={`${acct.cardMuted} p-8 text-center`}>
+            <p className={`${acct.muted} text-sm mb-4`}>No orders yet.</p>
+            <LocalizedLink href="/store" className={acct.btnPrimary}>
               Start shopping
             </LocalizedLink>
           </div>
         ) : (
-          <ul className="space-y-3">
-            {orders.slice(0, 5).map((order) => (
+          <ul className="flex flex-col gap-y-3">
+            {safeOrders.slice(0, 5).map((order) => (
               <li key={order.id}>
-                <LocalizedLink
-                  href={`/orders/${order.id}`}
-                  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>
-                    <p className="text-xs text-muted mt-1 capitalize">
-                      {order.status?.replace(/_/g, " ")}
-                    </p>
+                <LocalizedLink href={`/orders/${order.id}`} className="block group">
+                  <div
+                    className={`${acct.cardMuted} flex justify-between items-center p-4 transition-colors group-hover:border-brand-accent group-hover:bg-surface`}
+                  >
+                    <div className="grid grid-cols-3 gap-x-4 flex-1 text-sm">
+                      <div>
+                        <span className={`font-semibold ${acct.muted} text-xs uppercase tracking-wide block`}>
+                          Date placed
+                        </span>
+                        <span className={acct.heading}>
+                          {order.created_at
+                            ? new Date(order.created_at).toLocaleDateString("en-IN", {
+                                dateStyle: "medium",
+                              })
+                            : "—"}
+                        </span>
+                      </div>
+                      <div>
+                        <span className={`font-semibold ${acct.muted} text-xs uppercase tracking-wide block`}>
+                          Order
+                        </span>
+                        <span className={`font-bold ${acct.accent}`}>
+                          #{order.display_id}
+                        </span>
+                      </div>
+                      <div>
+                        <span className={`font-semibold ${acct.muted} text-xs uppercase tracking-wide block`}>
+                          Total
+                        </span>
+                        <span className={`font-bold ${acct.heading}`}>
+                          {formatPrice(order.total, order.currency_code)}
+                        </span>
+                      </div>
+                    </div>
+                    <span className={`${acct.accent} text-lg font-bold group-hover:translate-x-0.5 transition-transform`}>
+                      ›
+                    </span>
                   </div>
-                  <p className="text-sm font-semibold text-brand-accent shrink-0">
-                    {formatPrice(order.total, order.currency_code)}
-                  </p>
                 </LocalizedLink>
               </li>
             ))}
           </ul>
         )}
+        {safeOrders.length > 0 && (
+          <LocalizedLink
+            href="/account/orders"
+            className={`text-xs font-bold uppercase tracking-widest ${acct.accent} hover:underline mt-2`}
+          >
+            View all orders
+          </LocalizedLink>
+        )}
       </div>
     </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>
-  )
-}