x

apps/spa/src/pages/ProductDetailPage.tsx

@@ -4,7 +4,8 @@ import Navbar from '../components/Navbar'
 import Footer from '../components/Footer'
 import ProductCard from '../components/ProductCard'
 import ProductReviews from '../components/ProductReviews'
-import { API_BASE, getCategoryImage, formatPrice, type Category, type Product } from '../types'
+import DynamicPageRenderer from '../components/DynamicPageRenderer'
+import { API_BASE, getCategoryImage, formatPrice, type Category, type Product, type PageSection } from '../types'
 import { useCartStore } from '../store/cartStore'
 
 export default function ProductDetailPage() {
@@ -16,6 +17,7 @@ export default function ProductDetailPage() {
   const [selectedVariant, setSelectedVariant] = useState<number>(0)
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState<string | null>(null)
+  const [cmsSections, setCmsSections] = useState<PageSection[]>([])
   
   const { addToCart } = useCartStore()
 
@@ -26,6 +28,22 @@ export default function ProductDetailPage() {
       .catch(console.error)
   }, [])
 
+  useEffect(() => {
+    fetch(`${API_BASE}/pages/product-detail-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('Product detail dynamic layout sections not loaded:', err.message);
+      });
+  }, [])
+
   useEffect(() => {
     if (!id) return
     setLoading(true)
@@ -100,8 +118,19 @@ export default function ProductDetailPage() {
     })
   }
 
+  const announcementSections = cmsSections.filter(s => s.isActive && s.type.toUpperCase() === 'ANNOUNCEMENT_BAR');
+  const bottomSections = cmsSections.filter(s => s.isActive && s.type.toUpperCase() !== 'ANNOUNCEMENT_BAR');
+
   return (
     <div className="min-h-screen pb-24 md:pb-0 bg-pop-bg">
+      {announcementSections.length > 0 && (
+        <DynamicPageRenderer
+          sections={announcementSections}
+          categories={categories}
+          categoriesLoading={loading}
+        />
+      )}
+
       <Navbar categories={categories} />
 
       <div className="max-w-7xl mx-auto px-6 pt-24 md:pt-32 pb-24 space-y-12 md:space-y-24">
@@ -261,6 +290,14 @@ export default function ProductDetailPage() {
         )}
       </div>
 
+      {bottomSections.length > 0 && (
+        <DynamicPageRenderer
+          sections={bottomSections}
+          categories={categories}
+          categoriesLoading={loading}
+        />
+      )}
+
       <Footer categories={categories} />
 
       {/* Mobile Sticky Add to Cart Bar */}