Full website

2026-06-17 07:42:59 -04:00
1 parent 807c43ece5
commit ea9f33f60e
@@ -0,0 +1,183 @@
+"use client";
+
+import Link from 'next/link'
+import { useRouter } from 'next/navigation'
+import { useEffect, useState } from 'react'
+import { ChevronRight, Loader2, Package, Search } from 'lucide-react'
+
+import { API_BASE } from '../lib/api'
+
+type TrackResponse =
+  | { success: true; orderId: number }
+  | { error?: string }
+
+function parseStoredOrders(value: string | null) {
+  if (!value) return []
+
+  try {
+    const parsed = JSON.parse(value)
+    return Array.isArray(parsed)
+      ? parsed.map(Number).filter((id) => Number.isFinite(id) && id > 0)
+      : []
+  } catch {
+    return []
+  }
+}
+
+function orderLabel(id: number) {
+  return `#${id.toString().padStart(4, '0')}`
+}
+
+export default function TrackOrderClient() {
+  const router = useRouter()
+  const [orderId, setOrderId] = useState('')
+  const [phone, setPhone] = useState('')
+  const [localOrders, setLocalOrders] = useState<number[]>([])
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    const storedOrders = parseStoredOrders(localStorage.getItem('homaroma_local_orders'))
+    queueMicrotask(() => setLocalOrders(storedOrders))
+  }, [])
+
+  const saveLocalOrder = (id: number) => {
+    setLocalOrders((current) => {
+      const next = [id, ...current.filter((item) => item !== id)].slice(0, 12)
+      localStorage.setItem('homaroma_local_orders', JSON.stringify(next))
+      return next
+    })
+  }
+
+  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault()
+    setLoading(true)
+    setError(null)
+
+    const normalizedOrderId = Number.parseInt(orderId.replace(/[^0-9]/g, ''), 10)
+
+    if (!Number.isFinite(normalizedOrderId) || normalizedOrderId <= 0) {
+      setError('กรุณากรอกหมายเลขคำสั่งซื้อให้ถูกต้อง')
+      setLoading(false)
+      return
+    }
+
+    try {
+      const response = await fetch(`${API_BASE}/orders/track`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          orderId: normalizedOrderId,
+          phone,
+        }),
+      })
+      const data = await response.json() as TrackResponse
+
+      if (response.ok && 'success' in data && data.success) {
+        saveLocalOrder(data.orderId)
+        router.push(`/order/${data.orderId}`)
+        return
+      }
+
+      setError('error' in data && data.error ? data.error : 'ไม่สามารถยืนยันข้อมูลคำสั่งซื้อได้')
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'เกิดข้อผิดพลาดในการเชื่อมต่อ กรุณาลองใหม่อีกครั้ง')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div className="grid gap-10 md:grid-cols-2">
+      <section className="self-start rounded-3xl bg-white p-8 shadow-brutal">
+        <div className="mb-6 flex items-center gap-3 border-b border-gray-100 pb-4">
+          <div className="flex h-10 w-10 items-center justify-center rounded-full bg-pop-bg text-pop-pink">
+            <Search className="h-5 w-5" />
+          </div>
+          <div>
+            <p className="text-xs font-bold uppercase tracking-[0.24em] text-pop-pink">Manual Search</p>
+            <h2 className="text-xl font-semibold text-pop-black">ค้นหาคำสั่งซื้อ</h2>
+          </div>
+        </div>
+
+        <form className="space-y-5" onSubmit={handleSubmit}>
+          {error && (
+            <div className="rounded-2xl border border-rose-100 bg-rose-50 p-4 text-sm font-medium text-rose-600">
+              {error}
+            </div>
+          )}
+
+          <div className="space-y-2">
+            <label htmlFor="orderId" className="text-xs font-bold uppercase tracking-[0.22em] text-gray-500">
+              Order Number
+            </label>
+            <input
+              id="orderId"
+              required
+              value={orderId}
+              onChange={(event) => setOrderId(event.target.value)}
+              className="w-full rounded-2xl border border-gray-200 bg-pop-bg px-4 py-3 text-pop-black outline-none transition focus:border-pop-pink focus:ring-2 focus:ring-pop-pink/20"
+              placeholder="เช่น 1024"
+              type="text"
+            />
+          </div>
+
+          <div className="space-y-2">
+            <label htmlFor="phone" className="text-xs font-bold uppercase tracking-[0.22em] text-gray-500">
+              Phone Number
+            </label>
+            <input
+              id="phone"
+              required
+              value={phone}
+              onChange={(event) => setPhone(event.target.value)}
+              className="w-full rounded-2xl border border-gray-200 bg-pop-bg px-4 py-3 text-pop-black outline-none transition focus:border-pop-pink focus:ring-2 focus:ring-pop-pink/20"
+              placeholder="เบอร์โทรที่ใช้ตอนสั่งซื้อ"
+              type="tel"
+            />
+          </div>
+
+          <button
+            type="submit"
+            disabled={loading}
+            className="flex w-full items-center justify-center gap-2 rounded-full bg-pop-black px-6 py-4 text-sm font-bold uppercase tracking-[0.18em] text-white transition hover:bg-pop-pink disabled:cursor-not-allowed disabled:opacity-60"
+          >
+            {loading ? <Loader2 className="h-5 w-5 animate-spin" /> : 'Find Order'}
+          </button>
+        </form>
+      </section>
+
+      <section className="space-y-6">
+        <div className="flex items-center gap-3 border-b border-gray-200 pb-4">
+          <Package className="h-5 w-5 text-pop-pink" />
+          <h2 className="text-xl font-semibold text-pop-black">Recent Device Orders</h2>
+        </div>
+
+        {localOrders.length === 0 ? (
+          <div className="rounded-3xl border border-dashed border-gray-200 bg-white p-10 text-center shadow-brutal">
+            <p className="text-sm font-semibold text-gray-600">ยังไม่มีประวัติคำสั่งซื้อบนอุปกรณ์นี้</p>
+            <p className="mt-2 text-xs uppercase tracking-[0.18em] text-gray-400">ใช้ฟอร์มค้นหาด้านซ้ายเพื่อบันทึกออเดอร์</p>
+          </div>
+        ) : (
+          <div className="space-y-3">
+            {localOrders.map((id) => (
+              <Link
+                key={id}
+                href={`/order/${id}`}
+                className="group flex items-center justify-between rounded-2xl bg-white p-5 shadow-brutal transition hover:-translate-y-0.5 hover:shadow-brutal-hover"
+              >
+                <div>
+                  <p className="text-xs font-bold uppercase tracking-[0.22em] text-gray-400">Order</p>
+                  <p className="mt-1 font-mono text-2xl font-bold text-pop-black">{orderLabel(id)}</p>
+                </div>
+                <div className="flex h-10 w-10 items-center justify-center rounded-full bg-pop-bg text-pop-black transition group-hover:bg-pop-pink group-hover:text-white">
+                  <ChevronRight className="h-5 w-5" />
+                </div>
+              </Link>
+            ))}
+          </div>
+        )}
+      </section>
+    </div>
+  )
+}