x

apps/spa/src/pages/OrderSuccessPage.tsx

@@ -2,7 +2,8 @@ import { useState, useEffect } from 'react'
 import { useParams, Link } from 'react-router-dom'
 import Navbar from '../components/Navbar'
 import Footer from '../components/Footer'
-import { API_BASE, formatPrice, type Order, type StoreSettings, type Category } from '../types'
+import DynamicPageRenderer from '../components/DynamicPageRenderer'
+import { API_BASE, formatPrice, type Order, type StoreSettings, type Category, type PageSection } from '../types'
 import { CheckCircle2, UploadCloud, Loader2, Copy } from 'lucide-react'
 
 export default function OrderSuccessPage() {
@@ -14,17 +15,22 @@ export default function OrderSuccessPage() {
   const [loading, setLoading] = useState(true)
   const [uploading, setUploading] = useState(false)
   const [copied, setCopied] = useState(false)
+  const [cmsSections, setCmsSections] = useState<PageSection[]>([])
 
   useEffect(() => {
     Promise.all([
       fetch(`${API_BASE}/orders/${id}`).then(r => r.json()),
       fetch(`${API_BASE}/settings`).then(r => r.json()),
-      fetch(`${API_BASE}/categories`).then(r => r.json())
+      fetch(`${API_BASE}/categories`).then(r => r.json()),
+      fetch(`${API_BASE}/pages/order-success-layout`).then(r => r.ok ? r.json() : null).catch(() => null)
     ])
-    .then(([orderData, settingsData, catData]) => {
+    .then(([orderData, settingsData, catData, pageData]) => {
       setOrder(orderData)
       setSettings(settingsData)
       setCategories(catData)
+      if (pageData && pageData.sections) {
+        setCmsSections(pageData.sections)
+      }
     })
     .catch(console.error)
     .finally(() => setLoading(false))
@@ -92,8 +98,19 @@ export default function OrderSuccessPage() {
     )
   }
 
+  const announcementSections = cmsSections.filter(s => s.isActive && s.type.toUpperCase() === 'ANNOUNCEMENT_BAR');
+  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-3xl mx-auto px-6 pt-32 pb-24 space-y-12 animate-fade-in text-pop-black">
@@ -221,6 +238,14 @@ export default function OrderSuccessPage() {
 
       </main>
 
+      {bottomSections.length > 0 && (
+        <DynamicPageRenderer
+          sections={bottomSections}
+          categories={categories}
+          categoriesLoading={false}
+        />
+      )}
+
       <Footer categories={categories} />
     </div>
   )