@pradip1995/segment-login-template 0.4.1 → 0.4.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pradip1995/segment-login-template",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "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

@@ -9,9 +9,15 @@ 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 any)?.orders)
+    ? (orders as any).orders
+    : []
+
   async function handleSignOut() {
     await logoutGuest()
     window.location.href = `/${countryCode}/account`
@@ -29,13 +35,13 @@ export default function AccountGuestOrders({
         </button>
       </div>
 
-      {orders.length === 0 ? (
+      {safeOrders.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) => (
+          {safeOrders.map((order) => (
             <li key={order.id}>
               <LocalizedLink
                 href={`/orders/${order.id}`}

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>
-  )
-}

package/src/account-payment-methods.tsx

@@ -2,10 +2,11 @@
 
 import { useState } from "react"
 import {
-  createPaymentDetail,
-  deletePaymentDetail,
-  makeDefaultPaymentDetail,
-} from "@pradip1995/commerce-core/data/payment-details"
+  addPaymentMethodAction,
+  deletePaymentMethodAction,
+  makeDefaultPaymentMethodAction,
+} from "./payment-methods-actions"
+import { acct } from "./account-theme"
 
 type PaymentDetail = {
   id: string
@@ -14,6 +15,19 @@ type PaymentDetail = {
   is_default?: boolean
 }
 
+const emptyForm = {
+  upi_id: "",
+  account_holder_name: "",
+  bank_name: "",
+  account_number: "",
+  ifsc: "",
+  branch_name: "",
+  card_holder_name: "",
+  card_number: "",
+  expiry_date: "",
+  cvv: "",
+}
+
 export default function AccountPaymentMethods({
   paymentDetails,
 }: {
@@ -23,92 +37,118 @@ export default function AccountPaymentMethods({
   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: "",
-  })
+  const [fieldErrors, setFieldErrors] = useState<Record<string, string>>({})
+  const [form, setForm] = useState(emptyForm)
 
   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() }
+    setFieldErrors({})
+
+    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_name: form.account_holder_name.trim(),
+        bank_name: form.bank_name.trim(),
+        account_number: form.account_number.trim(),
+        ifsc: form.ifsc.trim(),
+      }
+      if (form.branch_name.trim()) {
+        detail_json.branch_name = form.branch_name.trim()
       }
-      await createPaymentDetail(type, detail_json)
-      window.location.reload()
-    } catch (err) {
-      setError(err instanceof Error ? err.message : "Failed to add payment method")
-    } finally {
+    } else {
+      detail_json = {
+        card_holder_name: form.card_holder_name.trim(),
+        card_number: form.card_number.trim(),
+        expiry_date: form.expiry_date.trim(),
+        cvv: form.cvv.trim(),
+      }
+    }
+
+    const result = await addPaymentMethodAction(type, detail_json)
+    if (!result.success) {
+      setError(result.error)
+      setFieldErrors(result.field_errors || {})
       setPending(false)
+      return
     }
+    window.location.reload()
   }
 
   async function handleDefault(id: string) {
     setPending(true)
-    try {
-      await makeDefaultPaymentDetail(id)
-      window.location.reload()
-    } finally {
+    setError(null)
+    setFieldErrors({})
+    const result = await makeDefaultPaymentMethodAction(id)
+    if (!result.success) {
+      setError(result.error)
       setPending(false)
+      return
     }
+    window.location.reload()
   }
 
   async function handleDelete(id: string) {
     if (!confirm("Remove this payment method?")) return
     setPending(true)
-    try {
-      await deletePaymentDetail(id)
-      window.location.reload()
-    } finally {
+    setError(null)
+    setFieldErrors({})
+    const result = await deletePaymentMethodAction(id)
+    if (!result.success) {
+      setError(result.error)
       setPending(false)
+      return
     }
+    window.location.reload()
   }
 
   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 || "****"}`
+    if (detail.type === "bank") {
+      const holder = json.account_holder_name || json.account_holder || "—"
+      const last4 = json.account_number?.slice(-4) || "****"
+      const bank = json.bank_name ? ` · ${json.bank_name}` : ""
+      return `Bank · ${holder}${bank} (····${last4})`
+    }
+    const holder = json.card_holder_name || "—"
+    const last4 =
+      json.card_number?.replace(/\s+/g, "").slice(-4) ||
+      json.card_last4 ||
+      "****"
+    return `Card · ${holder} (····${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>
+          <h2 className={acct.title}>Payment methods</h2>
+          <p className={`text-sm ${acct.muted}`}>Refund destinations for returns and exchanges.</p>
         </div>
-        <button type="button" onClick={() => setShowForm((v) => !v)} className="btn-primary text-sm">
+        <button type="button" onClick={() => setShowForm((v) => !v)} className={acct.btnPrimary}>
           {showForm ? "Cancel" : "Add method"}
         </button>
       </div>
 
       {showForm && (
-        <form onSubmit={handleAdd} className="card-surface rounded-2xl p-6 space-y-4">
+        <form onSubmit={handleAdd} className={`${acct.card} 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 ${
+                onClick={() => {
+                  setType(t)
+                  setError(null)
+                  setFieldErrors({})
+                }}
+                className={`px-3 py-1.5 text-xs font-medium rounded-none border ${
                   type === t
-                    ? "border-brand-accent text-brand-accent bg-brand-accent/5"
+                    ? "border-brand-accent text-brand-accent bg-brand-accent-muted"
                     : "border-cart-border text-muted"
                 }`}
               >
@@ -121,46 +161,87 @@ export default function AccountPaymentMethods({
             <Field
               label="UPI ID"
               value={form.upi_id}
+              error={fieldErrors.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 }))}
+                label="Account holder name"
+                value={form.account_holder_name}
+                error={fieldErrors.account_holder_name}
+                onChange={(v) => setForm((f) => ({ ...f, account_holder_name: v }))}
+              />
+              <Field
+                label="Bank name"
+                value={form.bank_name}
+                error={fieldErrors.bank_name}
+                onChange={(v) => setForm((f) => ({ ...f, bank_name: v }))}
               />
               <Field
                 label="Account number"
                 value={form.account_number}
+                error={fieldErrors.account_number}
                 onChange={(v) => setForm((f) => ({ ...f, account_number: v }))}
               />
               <Field
                 label="IFSC"
                 value={form.ifsc}
+                error={fieldErrors.ifsc}
                 onChange={(v) => setForm((f) => ({ ...f, ifsc: v }))}
               />
+              <Field
+                label="Branch name (optional)"
+                value={form.branch_name}
+                required={false}
+                error={fieldErrors.branch_name}
+                onChange={(v) => setForm((f) => ({ ...f, branch_name: v }))}
+              />
             </>
           )}
+
           {type === "card" && (
-            <Field
-              label="Last 4 digits"
-              value={form.card_last4}
-              onChange={(v) => setForm((f) => ({ ...f, card_last4: v }))}
-            />
+            <>
+              <Field
+                label="Card holder name"
+                value={form.card_holder_name}
+                error={fieldErrors.card_holder_name}
+                onChange={(v) => setForm((f) => ({ ...f, card_holder_name: v }))}
+              />
+              <Field
+                label="Card number"
+                value={form.card_number}
+                error={fieldErrors.card_number}
+                onChange={(v) => setForm((f) => ({ ...f, card_number: v }))}
+              />
+              <Field
+                label="Expiry (MM/YY)"
+                value={form.expiry_date}
+                error={fieldErrors.expiry_date}
+                placeholder="08/28"
+                onChange={(v) => setForm((f) => ({ ...f, expiry_date: v }))}
+              />
+              <Field
+                label="CVV"
+                value={form.cvv}
+                error={fieldErrors.cvv}
+                onChange={(v) => setForm((f) => ({ ...f, cvv: v }))}
+              />
+            </>
           )}
 
-          {error && <p className="text-sm text-brand-sale">{error}</p>}
-
-          <button type="submit" disabled={pending} className="btn-primary text-sm disabled:opacity-60">
+          <button type="submit" disabled={pending} className={acct.btnPrimary}>
             {pending ? "Saving…" : "Save payment method"}
           </button>
         </form>
       )}
 
+      {error && <p className="text-sm text-red-600">{error}</p>}
+
       {paymentDetails.length === 0 ? (
-        <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 refund payment methods saved.
         </div>
       ) : (
@@ -168,7 +249,7 @@ export default function AccountPaymentMethods({
           {paymentDetails.map((detail) => (
             <li
               key={detail.id}
-              className="card-surface rounded-2xl p-5 flex flex-wrap justify-between gap-4 items-center"
+              className={`${acct.card} p-5 flex flex-wrap justify-between gap-4 items-center`}
             >
               <div>
                 <p className="font-medium text-heading text-sm">{labelFor(detail)}</p>
@@ -191,7 +272,7 @@ export default function AccountPaymentMethods({
                   type="button"
                   onClick={() => handleDelete(detail.id)}
                   disabled={pending}
-                  className="text-brand-sale hover:underline disabled:opacity-60"
+                  className="text-red-600 hover:underline disabled:opacity-60"
                 >
                   Remove
                 </button>
@@ -208,22 +289,33 @@ function Field({
   label,
   value,
   onChange,
+  error,
+  required = true,
+  placeholder,
 }: {
   label: string
   value: string
   onChange: (value: string) => void
+  error?: string
+  required?: boolean
+  placeholder?: string
 }) {
   return (
     <label className="block">
-      <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
         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"
+        required={required}
+        placeholder={placeholder}
+        aria-invalid={Boolean(error)}
+        className={`w-full border rounded-none px-3 py-2.5 text-sm bg-surface text-heading focus:outline-none focus:border-brand-accent ${
+          error ? "border-red-500" : "border-cart-border"
+        }`}
       />
+      {error && <span className="mt-1 block text-xs text-red-600">{error}</span>}
     </label>
   )
 }

package/src/account-profile.tsx

@@ -9,6 +9,7 @@ import {
 } from "./auth-server"
 import type { OtpVerificationComponent } from "./otp-component"
 import OtpVerificationModal from "./otp-verification-modal"
+import { acct } from "./account-theme"
 
 export default function AccountProfile({
   customer,
@@ -94,28 +95,28 @@ export default function AccountProfile({
   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>
+        <h2 className={acct.title}>Account details</h2>
+        <p className={`text-sm ${acct.muted}`}>Update your name and contact information.</p>
       </div>
 
-      <form action={formAction} className="card-surface rounded-2xl p-6 space-y-4">
+      <form action={formAction} className={`${acct.card} 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">
+          <label className="block text-xs font-semibold uppercase tracking-wider 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"
+              className="flex-1 min-w-[200px] border border-cart-border rounded-none 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"
+                className={`${acct.btnOutline} !py-2 !px-3`}
               >
                 Verify email
               </button>
@@ -133,7 +134,7 @@ export default function AccountProfile({
                 type="button"
                 onClick={() => sendVerifyOtp("phone_verification")}
                 disabled={otpPending}
-                className="btn-outline text-xs"
+                className={`${acct.btnOutline} !py-2 !px-3`}
               >
                 Verify phone
               </button>
@@ -145,12 +146,12 @@ export default function AccountProfile({
         </div>
 
         {(state.error || message) && (
-          <p className={`text-sm ${state.ok || message ? "text-green-600" : "text-brand-sale"}`}>
+          <p className={`text-sm ${state.ok || message ? "text-green-600" : "text-red-600"}`}>
             {message || state.error}
           </p>
         )}
 
-        <button type="submit" disabled={pending} className="btn-primary disabled:opacity-60">
+        <button type="submit" disabled={pending} className={acct.btnPrimary}>
           {pending ? "Saving…" : "Save changes"}
         </button>
       </form>
@@ -184,14 +185,14 @@ function Field({
 }) {
   return (
     <label className="block">
-      <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
         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"
+        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-theme.ts

@@ -0,0 +1,28 @@
+/** Account / order visual tokens — maps to segment-tokens CSS variables */
+export const acct = {
+  pageBg: "bg-page-bg",
+  card: "bg-surface border border-cart-border rounded-none shadow-card",
+  cardMuted: "bg-surface-muted border border-cart-border rounded-none",
+  title:
+    "font-heading text-2xl sm:text-3xl font-extrabold tracking-tight text-heading",
+  sectionTitle:
+    "text-base sm:text-lg font-bold uppercase tracking-wider text-heading",
+  subsection: "text-sm font-semibold uppercase tracking-wider text-muted",
+  accent: "text-brand-accent",
+  muted: "text-muted",
+  heading: "text-heading",
+  body: "text-sm text-body",
+  border: "border-cart-border",
+  btnPrimary:
+    "inline-flex items-center justify-center bg-brand-primary hover:bg-brand-accent text-inverse rounded-none px-6 py-3 font-bold text-xs uppercase tracking-widest transition-all disabled:opacity-50",
+  btnAccent:
+    "inline-flex items-center justify-center bg-brand-accent hover:bg-brand-accent-hover text-inverse rounded-none px-6 py-3 font-bold text-xs uppercase tracking-widest transition-all disabled:opacity-50",
+  btnOutline:
+    "inline-flex items-center justify-center border border-cart-border text-brand-accent rounded-none px-6 py-3 font-bold text-xs uppercase tracking-widest hover:bg-surface-muted transition-all disabled:opacity-50",
+  input:
+    "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:
+    "block text-xs font-semibold uppercase tracking-wider text-muted mb-1.5",
+  badge:
+    "inline-flex items-center px-3 py-1 text-xs font-semibold border rounded-none",
+} as const

package/src/payment-methods-actions.ts

@@ -0,0 +1,214 @@
+"use server"
+
+import { getAuthHeaders } from "@pradip1995/commerce-core/data/cookies"
+
+type PaymentMethodType = "upi" | "bank" | "card"
+
+type ActionResult =
+  | { success: true }
+  | { success: false; error: string; field_errors?: Record<string, string> }
+
+function getBaseUrl() {
+  return process.env.MEDUSA_BACKEND_URL || "http://localhost:9000"
+}
+
+function getPublishableKey() {
+  return process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY || ""
+}
+
+function trimAll(detail_json: Record<string, string>): Record<string, string> {
+  const out: Record<string, string> = {}
+  for (const [key, value] of Object.entries(detail_json)) {
+    if (typeof value !== "string") continue
+    const trimmed = value.trim()
+    if (!trimmed) continue
+    out[key] = key === "ifsc" ? trimmed.toUpperCase() : trimmed
+  }
+  return out
+}
+
+function validatePaymentDetail(
+  type: PaymentMethodType,
+  detail_json: Record<string, string>
+): Record<string, string> {
+  const field_errors: Record<string, string> = {}
+
+  if (type === "upi") {
+    const upi = detail_json.upi_id || ""
+    if (!upi) {
+      field_errors.upi_id = "UPI ID is required"
+    } else if (!/^[\w.\-]{2,256}@[a-zA-Z]{2,64}$/.test(upi)) {
+      field_errors.upi_id = "Enter a valid UPI ID (e.g. name@upi)"
+    }
+  }
+
+  if (type === "bank") {
+    const holder = detail_json.account_holder_name || ""
+    const bank = detail_json.bank_name || ""
+    const account = detail_json.account_number || ""
+    const ifsc = detail_json.ifsc || ""
+
+    if (!holder) {
+      field_errors.account_holder_name = "Account holder name is required"
+    }
+    if (!bank) {
+      field_errors.bank_name = "Bank name is required"
+    }
+    if (!account) {
+      field_errors.account_number = "Account number is required"
+    } else if (!/^\d{9,18}$/.test(account)) {
+      field_errors.account_number = "Account number must be 9–18 digits"
+    }
+    if (!ifsc) {
+      field_errors.ifsc = "IFSC is required"
+    } else if (!/^[A-Z]{4}0[A-Z0-9]{6}$/.test(ifsc)) {
+      field_errors.ifsc =
+        "Enter a valid IFSC (e.g. HDFC0001234) — 4 letters, 0, then 6 characters"
+    }
+  }
+
+  if (type === "card") {
+    const holder = detail_json.card_holder_name || ""
+    const number = detail_json.card_number || ""
+    const expiry = detail_json.expiry_date || ""
+    const cvv = detail_json.cvv || ""
+
+    if (!holder) {
+      field_errors.card_holder_name = "Card holder name is required"
+    }
+    if (!number) {
+      field_errors.card_number = "Card number is required"
+    } else if (!/^\d{13,19}$/.test(number.replace(/\s+/g, ""))) {
+      field_errors.card_number = "Enter a valid card number (13–19 digits)"
+    }
+    if (!expiry) {
+      field_errors.expiry_date = "Expiry date is required"
+    } else if (!/^(0[1-9]|1[0-2])\/\d{2}$/.test(expiry)) {
+      field_errors.expiry_date = "Use MM/YY format (e.g. 08/28)"
+    }
+    if (!cvv) {
+      field_errors.cvv = "CVV is required"
+    } else if (!/^\d{3,4}$/.test(cvv)) {
+      field_errors.cvv = "CVV must be 3 or 4 digits"
+    }
+  }
+
+  return field_errors
+}
+
+function firstFieldError(field_errors: Record<string, string>): string {
+  return Object.values(field_errors)[0] || "Invalid payment details"
+}
+
+function parseBackendError(body: unknown, status: number): string {
+  if (!body || typeof body !== "object") {
+    return status === 400
+      ? "Invalid payment details. Check the entered values."
+      : `Request failed (${status})`
+  }
+
+  const data = body as {
+    message?: unknown
+    errors?: Array<{ message?: string; path?: string[]; field?: string }>
+  }
+
+  if (Array.isArray(data.errors) && data.errors.length > 0) {
+    const details = data.errors
+      .map((item) => {
+        const path = item.path?.join(".") || item.field
+        const msg = item.message?.trim()
+        if (path && msg) return `${path}: ${msg}`
+        return msg
+      })
+      .filter((msg): msg is string => Boolean(msg))
+    if (details.length) return details.join("; ")
+  }
+
+  if (typeof data.message === "string" && data.message.trim()) {
+    const msg = data.message.trim()
+    if (/^invalid request( data)?\.?$/i.test(msg)) {
+      return "Invalid payment details. Check required fields and try again."
+    }
+    return msg
+  }
+
+  return `Request failed (${status})`
+}
+
+async function paymentDetailsFetch(
+  path: string,
+  init: { method: string; body?: Record<string, unknown> }
+): Promise<ActionResult> {
+  const authHeaders = await getAuthHeaders()
+  if (!("authorization" in authHeaders)) {
+    return { success: false, error: "Please sign in to manage payment methods" }
+  }
+
+  const response = await fetch(`${getBaseUrl()}${path}`, {
+    method: init.method,
+    headers: {
+      Accept: "application/json",
+      "Content-Type": "application/json",
+      "x-publishable-api-key": getPublishableKey(),
+      ...authHeaders,
+    },
+    body: init.body ? JSON.stringify(init.body) : undefined,
+    cache: "no-store",
+  })
+
+  if (response.ok) {
+    return { success: true }
+  }
+
+  const body = await response.json().catch(() => null)
+  return {
+    success: false,
+    error: parseBackendError(body, response.status),
+  }
+}
+
+export async function addPaymentMethodAction(
+  type: PaymentMethodType,
+  detail_json: Record<string, string>
+): Promise<ActionResult> {
+  const normalized = trimAll(detail_json)
+  if (normalized.card_number) {
+    normalized.card_number = normalized.card_number.replace(/\s+/g, "")
+  }
+
+  const field_errors = validatePaymentDetail(type, normalized)
+  if (Object.keys(field_errors).length > 0) {
+    return {
+      success: false,
+      error: firstFieldError(field_errors),
+      field_errors,
+    }
+  }
+
+  return paymentDetailsFetch("/store/payment-details", {
+    method: "POST",
+    body: { type, detail_json: normalized },
+  })
+}
+
+export async function makeDefaultPaymentMethodAction(
+  id: string
+): Promise<ActionResult> {
+  if (!id) {
+    return { success: false, error: "Payment method id is required" }
+  }
+  return paymentDetailsFetch(`/store/payment-details/${id}/make-default`, {
+    method: "POST",
+  })
+}
+
+export async function deletePaymentMethodAction(
+  id: string
+): Promise<ActionResult> {
+  if (!id) {
+    return { success: false, error: "Payment method id is required" }
+  }
+  return paymentDetailsFetch(`/store/payment-details/${id}`, {
+    method: "DELETE",
+  })
+}

package/src/segment.tsx

@@ -18,9 +18,9 @@ type AccountProps = {
   countryCode?: string
   path?: string
   customer?: HttpTypes.StoreCustomer | null
-  orders?: HttpTypes.StoreOrder[]
+  orders?: HttpTypes.StoreOrder[] | { orders?: HttpTypes.StoreOrder[] } | null
   paymentDetails?: Record<string, unknown>[]
-  guestOrders?: HttpTypes.StoreOrder[]
+  guestOrders?: HttpTypes.StoreOrder[] | { orders?: HttpTypes.StoreOrder[] } | null
   title?: string
   subtitle?: string
   otpComponent?: OtpVerificationComponent