x

apps/spa/src/components/DynamicPageRenderer.tsx

@@ -16,6 +16,7 @@ import DynamicRichText from './DynamicRichText';
 import AccordionSection from './sections/AccordionSection';
 import ContactInfoSection from './sections/ContactInfoSection';
 import ContactFormSection from './sections/ContactFormSection';
+import ScrollReveal from './ScrollReveal';
 
 interface DynamicPageRendererProps {
   sections: PageSection[];
@@ -34,53 +35,58 @@ export default function DynamicPageRenderer({
         if (!section.isActive) return null;
 
         switch (section.type.toUpperCase()) {
+          // ไม่ animate — แสดงตั้งแต่ต้น
           case 'ANNOUNCEMENT_BAR':
             return <DynamicAnnouncementBar key={section.id} payload={section.payload} />;
-          case 'NEWSLETTER':
-            return <DynamicNewsletter key={section.id} payload={section.payload} />;
           case 'HERO':
             return <DynamicHero key={section.id} payload={section.payload} />;
+
+          // animate เมื่อ scroll เข้า viewport
+          case 'NEWSLETTER':
+            return <ScrollReveal key={section.id}><DynamicNewsletter payload={section.payload} /></ScrollReveal>;
           case 'CATEGORIES':
             return (
-              <DynamicCategories
-                key={section.id}
-                payload={section.payload}
-                categories={categories}
-                loading={categoriesLoading}
-              />
+              <ScrollReveal key={section.id}>
+                <DynamicCategories
+                  payload={section.payload}
+                  categories={categories}
+                  loading={categoriesLoading}
+                />
+              </ScrollReveal>
             );
           case 'PRODUCTS':
             return (
-              <DynamicProducts
-                key={section.id}
-                payload={section.payload}
-                categories={categories}
-              />
+              <ScrollReveal key={section.id}>
+                <DynamicProducts
+                  payload={section.payload}
+                  categories={categories}
+                />
+              </ScrollReveal>
             );
           case 'BANNER':
-            return <DynamicBanner key={section.id} payload={section.payload} />;
+            return <ScrollReveal key={section.id}><DynamicBanner payload={section.payload} /></ScrollReveal>;
           case 'TEXT':
-            return <DynamicText key={section.id} payload={section.payload} />;
+            return <ScrollReveal key={section.id}><DynamicText payload={section.payload} /></ScrollReveal>;
           case 'RICH_TEXT':
-            return <DynamicRichText key={section.id} section={section} />;
+            return <ScrollReveal key={section.id}><DynamicRichText section={section} /></ScrollReveal>;
           case 'EDITORIAL_TILE':
-            return <DynamicEditorialTile key={section.id} payload={section.payload} />;
+            return <ScrollReveal key={section.id}><DynamicEditorialTile payload={section.payload} /></ScrollReveal>;
           case 'EDITORIAL_CAROUSEL':
-            return <DynamicEditorialCarousel key={section.id} payload={section.payload} />;
+            return <ScrollReveal key={section.id}><DynamicEditorialCarousel payload={section.payload} /></ScrollReveal>;
           case 'HERO_ARTICLE':
-            return <DynamicHeroArticle key={section.id} payload={section.payload} />;
+            return <ScrollReveal key={section.id}><DynamicHeroArticle payload={section.payload} /></ScrollReveal>;
           case 'SCENT_NOTES_BREAKDOWN':
-            return <DynamicScentNotesBreakdown key={section.id} payload={section.payload} />;
+            return <ScrollReveal key={section.id}><DynamicScentNotesBreakdown payload={section.payload} /></ScrollReveal>;
           case 'QUOTE_CALLOUT':
-            return <DynamicQuoteCallout key={section.id} payload={section.payload} />;
+            return <ScrollReveal key={section.id}><DynamicQuoteCallout payload={section.payload} /></ScrollReveal>;
           case 'PRODUCT_CAROUSEL':
-            return <DynamicProductCarousel key={section.id} payload={section.payload} />;
+            return <ScrollReveal key={section.id}><DynamicProductCarousel payload={section.payload} /></ScrollReveal>;
           case 'ACCORDION':
-            return <AccordionSection key={section.id} payload={section.payload as AccordionSectionPayload & { title?: string }} />;
+            return <ScrollReveal key={section.id}><AccordionSection payload={section.payload as AccordionSectionPayload & { title?: string }} /></ScrollReveal>;
           case 'CONTACT_INFO':
-            return <ContactInfoSection key={section.id} payload={section.payload as ContactInfoSectionPayload & { title?: string }} />;
+            return <ScrollReveal key={section.id}><ContactInfoSection payload={section.payload as ContactInfoSectionPayload & { title?: string }} /></ScrollReveal>;
           case 'CONTACT_FORM':
-            return <ContactFormSection key={section.id} payload={section.payload as ContactFormSectionPayload} />;
+            return <ScrollReveal key={section.id}><ContactFormSection payload={section.payload as ContactFormSectionPayload} /></ScrollReveal>;
           default:
             console.warn(`[DynamicPageRenderer] Unknown block type: ${section.type}`);
             return null;