x

apps/spa/src/pages/CouponsPage.tsx

@@ -3,7 +3,8 @@ import { useNavigate } from 'react-router-dom'
 import Navbar from '../components/Navbar'
 import Footer from '../components/Footer'
 import EmptyState from '../components/EmptyState'
-import { API_BASE, type Category } from '../types'
+import DynamicPageRenderer from '../components/DynamicPageRenderer'
+import { API_BASE, type Category, type PageSection } from '../types'
 import { Ticket, Copy, CheckCircle2, ArrowRight } from 'lucide-react'
 
 interface Coupon {
@@ -23,6 +24,28 @@ export default function CouponsPage() {
   const [coupons, setCoupons] = useState<Coupon[]>([])
   const [loading, setLoading] = useState(true)
   const [copiedCode, setCopiedCode] = useState<string | null>(null)
+  const [cmsSections, setCmsSections] = useState<PageSection[]>([])
+
+  useEffect(() => {
+    fetch(`${API_BASE}/categories`)
+      .then(res => res.json())
+      .then(setCategories)
+      .catch(console.error)
+
+    fetch(`${API_BASE}/pages/coupons-layout`)
+      .then((r) => {
+        if (!r.ok) throw new Error('Page not found');
+        return r.json();
+      })
+      .then((data) => {
+        if (data && data.sections) {
+          setCmsSections(data.sections);
+        }
+      })
+      .catch((err) => {
+        console.log('Coupons dynamic layout sections not loaded:', err.message);
+      });
+  }, [])
 
   useEffect(() => {
     fetch(`${API_BASE}/categories`)
@@ -61,19 +84,40 @@ export default function CouponsPage() {
     navigate('/shop')
   }
 
+  const announcementSections = cmsSections.filter(s => s.isActive && s.type.toUpperCase() === 'ANNOUNCEMENT_BAR');
+  const heroSections = cmsSections.filter(s => s.isActive && (s.type.toUpperCase() === 'HERO' || s.type.toUpperCase() === 'BANNER'));
+  const bottomSections = cmsSections.filter(s => s.isActive && s.type.toUpperCase() !== 'ANNOUNCEMENT_BAR' && s.type.toUpperCase() !== 'HERO' && s.type.toUpperCase() !== 'BANNER');
+
   return (
     <div className="min-h-screen bg-pop-bg">
+      {announcementSections.length > 0 && (
+        <DynamicPageRenderer
+          sections={announcementSections}
+          categories={categories}
+          categoriesLoading={false}
+        />
+      )}
+
       <Navbar categories={categories} />
 
       <main className="max-w-6xl mx-auto px-6 pt-32 pb-24 min-h-[70vh]">
-        <div className="text-center space-y-4 mb-16">
-          <h1 className="text-4xl md:text-5xl font-bold text-pop-black">
-            Exclusive Offers
-          </h1>
-          <p className="text-spa-stone max-w-2xl mx-auto">
-            คูปองส่วนลดพิเศษสำหรับคุณ เลือกใช้คูปองที่คุณต้องการแล้วไปช้อปกันเลย!
-          </p>
-        </div>
+        {/* Header */}
+        {heroSections.length > 0 ? (
+          <DynamicPageRenderer
+            sections={heroSections}
+            categories={categories}
+            categoriesLoading={false}
+          />
+        ) : (
+          <div className="text-center space-y-4 mb-16">
+            <h1 className="text-4xl md:text-5xl font-bold text-pop-black">
+              Exclusive Offers
+            </h1>
+            <p className="text-spa-stone max-w-2xl mx-auto">
+              คูปองส่วนลดพิเศษสำหรับคุณ เลือกใช้คูปองที่คุณต้องการแล้วไปช้อปกันเลย!
+            </p>
+          </div>
+        )}
 
         {loading ? (
           <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
@@ -154,6 +198,14 @@ export default function CouponsPage() {
         )}
       </main>
 
+      {bottomSections.length > 0 && (
+        <DynamicPageRenderer
+          sections={bottomSections}
+          categories={categories}
+          categoriesLoading={false}
+        />
+      )}
+
       <Footer categories={categories} />
     </div>
   )