x

apps/spa/src/pages/FaqPage.tsx

@@ -1,7 +1,8 @@
 import { useState, useEffect } from 'react'
 import Navbar from '../components/Navbar'
 import Footer from '../components/Footer'
-import { API_BASE, type Category } from '../types'
+import DynamicPageRenderer from '../components/DynamicPageRenderer'
+import { API_BASE, type Category, type PageSection } from '../types'
 
 const FAQS = [
   {
@@ -46,27 +47,66 @@ export default function FaqPage() {
   const [categories, setCategories] = useState<Category[]>([])
   const [openItems, setOpenItems] = useState<Record<string, boolean>>({})
   const [activeCategory, setActiveCategory] = useState<string>('Products')
+  const [cmsSections, setCmsSections] = useState<PageSection[]>([])
 
   useEffect(() => {
     fetch(`${API_BASE}/categories`).then(r => r.json()).then(setCategories).catch(console.error)
   }, [])
 
+  useEffect(() => {
+    fetch(`${API_BASE}/pages/faq-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('FAQ dynamic layout sections not loaded:', err.message);
+      });
+  }, [])
+
   const toggle = (key: string) => setOpenItems(prev => ({ ...prev, [key]: !prev[key] }))
 
   const activeFaqs = FAQS.find(f => f.category === activeCategory)
 
+  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">
+      {announcementSections.length > 0 && (
+        <DynamicPageRenderer
+          sections={announcementSections}
+          categories={categories}
+          categoriesLoading={false}
+        />
+      )}
+
       <Navbar categories={categories} />
 
       {/* Header */}
-      <div className="pt-32 pb-16 px-6 text-center space-y-4 border-b border-spa-stone/10 bg-white border-b border-spa-stone/10">
-        <p className="text-spa-forest uppercase tracking-[0.4em] text-xs font-semibold opacity-70">Support</p>
-        <h1 className="text-5xl font-bold">Frequently Asked Questions</h1>
-        <p className="text-slate-400 max-w-lg mx-auto">
-          Everything you need to know about HomAroma products, shipping, and care.
-        </p>
-      </div>
+      {heroSections.length > 0 ? (
+        <div className="pt-20">
+          <DynamicPageRenderer
+            sections={heroSections}
+            categories={categories}
+            categoriesLoading={false}
+          />
+        </div>
+      ) : (
+        <div className="pt-32 pb-16 px-6 text-center space-y-4 border-b border-spa-stone/10 bg-white">
+          <p className="text-spa-forest uppercase tracking-[0.4em] text-xs font-semibold opacity-70">Support</p>
+          <h1 className="text-5xl font-bold">Frequently Asked Questions</h1>
+          <p className="text-slate-400 max-w-lg mx-auto">
+            Everything you need to know about HomAroma products, shipping, and care.
+          </p>
+        </div>
+      )}
 
       <div className="max-w-4xl mx-auto px-6 py-16 space-y-10">
         {/* Category tabs */}
@@ -133,6 +173,14 @@ export default function FaqPage() {
         </div>
       </div>
 
+      {bottomSections.length > 0 && (
+        <DynamicPageRenderer
+          sections={bottomSections}
+          categories={categories}
+          categoriesLoading={false}
+        />
+      )}
+
       <Footer categories={categories} />
     </div>
   )