x

2026-06-20 18:39:03 -04:00
1 parent 3c4bb06003
commit f7aa4d099f
@@ -0,0 +1,58 @@
+import { MapPin } from 'lucide-react'
+
+import DynamicPageRenderer from '@/components/dynamic/DynamicPageRenderer'
+import TrackOrderClient from '@/components/TrackOrderClient'
+import { getCategoriesResult, getCmsPageResult } from '@/lib/cms'
+import { splitCmsLayoutSections } from '@/lib/cms-sections'
+
+// lang is extracted from params
+export const metadata = {
+  title: 'ติดตามคำสั่งซื้อ | HomAroma',
+  description: 'ตรวจสอบสถานะคำสั่งซื้อ HomAroma ด้วยหมายเลขคำสั่งซื้อและเบอร์โทรศัพท์ที่ใช้สั่งซื้อ',
+}
+
+export default async function TrackPage({ params }: { params: Promise<{ lang: string }> }) {
+  const { lang } = await params
+  const [categoriesResult, cmsLayoutResult] = await Promise.all([
+    getCategoriesResult(lang),
+    getCmsPageResult('track-order-layout', lang),
+  ])
+  const categories = categoriesResult.ok ? categoriesResult.data : []
+  const cmsSections = cmsLayoutResult.ok ? cmsLayoutResult.data.sections ?? [] : []
+  const { announcementSections, heroSections, bottomSections } = splitCmsLayoutSections(cmsSections)
+
+  if (!cmsLayoutResult.ok && cmsLayoutResult.status !== 404) {
+    console.error(`[website-cms] track-order-layout unavailable: ${cmsLayoutResult.error}`)
+  }
+
+  return (
+    <main className="min-h-[70vh] bg-pop-bg">
+      {announcementSections.length > 0 && (
+        <DynamicPageRenderer sections={announcementSections} categories={categories} lang={lang} />
+      )}
+
+      {heroSections.length > 0 ? (
+        <DynamicPageRenderer sections={heroSections} categories={categories} lang={lang} />
+      ) : (
+        <section className="mx-auto max-w-4xl px-6 pt-20 text-center md:pt-24">
+          <div className="mx-auto mb-5 flex h-16 w-16 items-center justify-center rounded-full bg-white text-pop-pink shadow-brutal">
+            <MapPin className="h-8 w-8" />
+          </div>
+          <p className="text-xs font-bold uppercase tracking-[0.28em] text-pop-pink">Track Order</p>
+          <h1 className="mt-4 text-4xl font-semibold text-pop-black md:text-5xl">Track Your Status</h1>
+          <p className="mx-auto mt-4 max-w-2xl text-gray-600">
+            กรอกหมายเลขคำสั่งซื้อและเบอร์โทรศัพท์เพื่อตรวจสอบสถานะสินค้า หรือกลับมาดูคำสั่งซื้อที่เคยค้นหาบนอุปกรณ์นี้
+          </p>
+        </section>
+      )}
+
+      <section className="mx-auto max-w-5xl px-6 py-14 md:py-20">
+        <TrackOrderClient />
+      </section>
+
+      {bottomSections.length > 0 && (
+        <DynamicPageRenderer sections={bottomSections} categories={categories} lang={lang} />
+      )}
+    </main>
+  )
+}