x

apps/spa/src/pages/TrackOrderPage.tsx

@@ -2,7 +2,8 @@ import { useState, useEffect } from 'react'
 import { useNavigate, Link } from 'react-router-dom'
 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'
 import { Search, MapPin, Package, Loader2, ChevronRight, Clock } from 'lucide-react'
 import { useAuthStore } from '../store/authStore'
 
@@ -26,6 +27,23 @@ export default function TrackOrderPage() {
   const [phone, setPhone] = useState('')
   const [loading, setLoading] = useState(false)
   const [error, setError] = useState<string | null>(null)
+  const [cmsSections, setCmsSections] = useState<PageSection[]>([])
+
+  useEffect(() => {
+    fetch(`${API_BASE}/pages/track-order-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('Track Order dynamic layout sections not loaded:', err.message);
+      });
+  }, [])
 
   useEffect(() => {
     fetch(`${API_BASE}/categories`)
@@ -86,20 +104,40 @@ export default function TrackOrderPage() {
     }
   }
 
+  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 flex flex-col bg-pop-bg">
+      {announcementSections.length > 0 && (
+        <DynamicPageRenderer
+          sections={announcementSections}
+          categories={categories}
+          categoriesLoading={false}
+        />
+      )}
+
       <Navbar categories={categories} />
 
       <main className="flex-1 max-w-4xl w-full mx-auto px-6 flex flex-col justify-center pt-32 pb-24 space-y-12 animate-fade-in">
         
         {/* Header */}
-        <div className="text-center space-y-4">
-          <div className="w-16 h-16 bg-spa-sage/30 rounded-full flex items-center justify-center mx-auto border border-spa-stone/10">
-            <MapPin className="w-8 h-8 text-spa-forest" />
+        {heroSections.length > 0 ? (
+          <DynamicPageRenderer
+            sections={heroSections}
+            categories={categories}
+            categoriesLoading={false}
+          />
+        ) : (
+          <div className="text-center space-y-4">
+            <div className="w-16 h-16 bg-spa-sage/30 rounded-full flex items-center justify-center mx-auto border border-spa-stone/10">
+              <MapPin className="w-8 h-8 text-spa-forest" />
+            </div>
+            <h1 className="text-4xl font-bold tracking-tight text-pop-black">Track Your Status</h1>
+            <p className="text-spa-stone">Enter your order details below to check shipping status or upload payment slips.</p>
           </div>
-          <h1 className="text-4xl font-bold tracking-tight text-pop-black">Track Your Status</h1>
-          <p className="text-spa-stone">Enter your order details below to check shipping status or upload payment slips.</p>
-        </div>
+        )}
 
         <div className="grid md:grid-cols-2 gap-12">
           
@@ -234,6 +272,14 @@ export default function TrackOrderPage() {
 
       </main>
 
+      {bottomSections.length > 0 && (
+        <DynamicPageRenderer
+          sections={bottomSections}
+          categories={categories}
+          categoriesLoading={false}
+        />
+      )}
+
       <Footer categories={categories} />
     </div>
   )