x

apps/website/src/components/ProfileClient.tsx

@@ -23,6 +23,7 @@ import {
 import { formatPrice, type CustomerAddress, type Order } from '@homaroma/types'
 
 import { API_BASE } from '../lib/api'
+import { orderStatusBadgeClass, toneClass } from '../lib/theme'
 import { useAuthStore, type Customer } from '../store/authStore'
 
 type ProfileTab = 'orders' | 'addresses' | 'settings'
@@ -74,14 +75,6 @@ function statusLabel(status: string) {
   return labels[status] ?? status.replaceAll('_', ' ')
 }
 
-function statusClass(status: string) {
-  if (status === 'PENDING_PAYMENT') return 'border-amber-100 bg-amber-50 text-amber-700'
-  if (status === 'PAID' || status === 'PROCESSING') return 'border-emerald-100 bg-emerald-50 text-emerald-700'
-  if (status === 'SHIPPED' || status === 'DELIVERED') return 'border-sky-100 bg-sky-50 text-sky-700'
-  if (status === 'CANCELLED') return 'border-rose-100 bg-rose-50 text-rose-700'
-  return 'border-line-primary/20 bg-surface-page text-text-main/80'
-}
-
 function formatAddress(address: CustomerAddress) {
   return `${address.addressLine} ต.${address.subdistrict} อ.${address.district} จ.${address.province} ${address.zipcode}`
 }
@@ -294,7 +287,7 @@ export default function ProfileClient() {
           ล็อกอินเพื่อตรวจสอบประวัติคำสั่งซื้อ สะสมคะแนนสมาชิก และบันทึกสมุดที่อยู่จัดส่งสินค้า
         </p>
         {error && (
-          <p className="mt-5 rounded-2xl border border-amber-100 bg-amber-50 p-4 text-sm text-amber-700">
+          <p className={`mt-5 p-4 text-sm ${toneClass('warning')}`}>
             {error}
           </p>
         )}
@@ -323,7 +316,7 @@ export default function ProfileClient() {
   return (
     <section className="space-y-8">
       {error && (
-        <div className="rounded-3xl border border-rose-100 bg-rose-50 p-5 text-sm font-medium text-rose-600">
+        <div className={`p-5 text-sm font-medium ${toneClass('error')}`}>
           {error}
         </div>
       )}
@@ -398,7 +391,7 @@ export default function ProfileClient() {
                         </p>
                       </div>
                       <div className="flex items-center gap-3">
-                        <span className={`ui-status-badge ${statusClass(order.status)}`}>
+                        <span className={orderStatusBadgeClass(order.status)}>
                           {statusLabel(order.status)}
                         </span>
                         <Link href={`/order/${order.id}`} className="rounded-full border border-line-primary/20 p-2 text-muted-text transition hover:text-brand-primary">
@@ -534,10 +527,10 @@ export default function ProfileClient() {
 
               <form onSubmit={handleSettingsSubmit} className="ui-panel max-w-xl space-y-5 p-6">
                 {settingsSuccess && (
-                  <div className="flex items-center justify-center gap-2 rounded-2xl border border-emerald-100 bg-emerald-50 p-4 text-sm font-bold text-emerald-700">
-                    <Check className="h-4 w-4" />
-                    บันทึกข้อมูลติดต่อสำเร็จแล้ว
-                  </div>
+                <div className={`flex items-center justify-center gap-2 p-4 text-sm font-bold ${toneClass('success')}`}>
+                  <Check className="h-4 w-4" />
+                  บันทึกข้อมูลติดต่อสำเร็จแล้ว
+                </div>
                 )}
                 <TextInput label="อีเมล" value={settingsForm.email} onChange={(email) => setSettingsForm((current) => ({ ...current, email }))} type="email" />
                 <TextInput label="เบอร์โทรศัพท์" value={settingsForm.phone} onChange={(phone) => setSettingsForm((current) => ({ ...current, phone }))} type="tel" />