<iman> update all-promotion

4 files changed, 117 insertions, 23 deletions

diff --git a/src-migrate/modules/promo/components/FlashSale.tsx b/src-migrate/modules/promo/components/FlashSale.tsx
new file mode 100644
index 00000000..dac0365c
--- /dev/null
+++ b/src-migrate/modules/promo/components/FlashSale.tsx
@@ -0,0 +1,21 @@
+import dynamic from "next/dynamic";
+import React from "react";
+import { FlashSaleSkeleton } from "@/lib/flashSale/skeleton/FlashSaleSkeleton";
+
+const FlashSale = dynamic(
+    () => import('@/lib/flashSale/components/FlashSale'),
+    {
+      loading: () => <FlashSaleSkeleton />,
+    }
+  );
+
+  const FlashSalePromo = ()=> {
+    return(
+        <>  
+            <h1 className='text-h-sm md:text-h-lg  font-semibold py-4'>Bayar Setengahnya!</h1>
+            <FlashSale/>
+        </>
+    )
+  }
+
+  export default FlashSalePromo
\ No newline at end of file
diff --git a/src-migrate/modules/promo/components/PromoList.jsx b/src-migrate/modules/promo/components/PromoList.jsx
index ed758fbc..fb4b6ee3 100644
--- a/src-migrate/modules/promo/components/PromoList.jsx
+++ b/src-migrate/modules/promo/components/PromoList.jsx
@@ -1,24 +1,92 @@
-import Image from 'next/image';
-import Link from '@/core/components/elements/Link/Link';
-import ProductPromoCard from '../../../../src-migrate/modules/product-promo/components/Card'
+import React, { useState, useEffect } from 'react';
+import ProductPromoCard from '../../../../src-migrate/modules/product-promo/components/Card';
+import { fetchPromoItemsSolr } from '../../../../src/api/promoApi';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import useDevice from '@/core/hooks/useDevice';
+import LogoSpinner from '../../../../src/core/components/elements/Spinner/LogoSpinner'
 
 const PromoList = ({ selectedPromo }) => {
-  let title = '';
-  
-  if (selectedPromo === 'Bundling') {
-    title = 'Kombinasi Kilat Pilihan Kami!';
-  } else if (selectedPromo === 'Loading') {
-    title = 'Belanja Borong Pilihan Kami!';
-  } else if (selectedPromo === 'Merchandise') {
-    title = 'Gratis Merchandise Spesial Indoteknik';
-  }
+  const [title, setTitle] = useState('');
+  const [slug, setSlug] = useState('');
+  const [promoItems, setPromoItems] = useState([]);
+  const [promoData, setPromoData] = useState([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const { isMobile } = useDevice();
+
+  useEffect(() => {
+    if (selectedPromo === 'Bundling') {
+      setTitle('Kombinasi Kilat Pilihan Kami!');
+      setSlug('bundling');
+    } else if (selectedPromo === 'Loading') {
+      setTitle('Belanja Borong Pilihan Kami!');
+      setSlug('discount_loading');
+    } else if (selectedPromo === 'Merchandise') {
+      setTitle('Gratis Merchandise Spesial Indoteknik');
+      setSlug('merchandise');
+    }
+  }, [selectedPromo]);
+
+  useEffect(() => {
+    const fetchPromotions = async () => {
+      setIsLoading(true);
+      try {
+        const items = await fetchPromoItemsSolr(`type_value_s:${slug}`, 0, 50);
+        setPromoItems(items);
+
+        console.log("selectedPromo",selectedPromo)
+        console.log("slug",slug)
+        console.log("items",items)
+        console.log("promoItems",promoItems)
+
+        const promoDataPromises = items.map(async (item) => {
+          try {
+            const response = await fetchPromoItemsSolr(`id:${item.id}`, 0, 10);
+            return response;
+          } catch (fetchError) {
+            return [];
+          }
+        });
+
+        const promoDataArray = await Promise.all(promoDataPromises);
+        const mergedPromoData = promoDataArray.reduce((accumulator, currentValue) => accumulator.concat(currentValue), []);
+        setPromoData(mergedPromoData);
+      } catch (error) {
+        console.error('Error fetching promo items:', error);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    if (slug) {
+      setIsLoading(true);
+      // Reset the promoItems and promoData when slug changes
+      setPromoItems([]);
+      setPromoData([]);
+      fetchPromotions();
+    }
+  }, [slug]);
 
   return (
     <div>
-      <h1 className='text-h-sm md:text-h-lg font-semibold mb-4'>{title}</h1>
-      <div>DISINI CARD {selectedPromo}</div>
+      <h1 className='text-h-sm md:text-h-lg  font-semibold py-4'>{title}</h1>
+      {isLoading ? (
+        <div className="loading-spinner flex justify-center">
+          <LogoSpinner width={48} height={48} />
+        </div>
+      ) : (
+        
+        <Swiper slidesPerView={isMobile ? 1.5 : 3.25} spaceBetween={12} freeMode>
+          {promoData?.map((promotion) => (
+            <SwiperSlide key={promotion.id}>
+              <div className="min-w-[380px] max-w-[380px] mb-[20px] sm:min-w-[330px] md:min-w-[360px] lg:min-w-[380px] xl:min-w-[380px]">
+                <ProductPromoCard promotion={promotion} />
+              </div>
+            </SwiperSlide>
+          ))}
+        </Swiper>
+      )}
     </div>
   );
-}
+};
 
 export default PromoList;
diff --git a/src-migrate/modules/promo/components/PromotinProgram.jsx b/src-migrate/modules/promo/components/PromotinProgram.jsx
index a7e5dfef..13a8405b 100644
--- a/src-migrate/modules/promo/components/PromotinProgram.jsx
+++ b/src-migrate/modules/promo/components/PromotinProgram.jsx
@@ -5,7 +5,7 @@ import { InfoIcon } from "lucide-react"
 const PromotionProgram = ({ selectedPromo, onSelectPromo }) => {
   return (
     <>
-      <div className="text-h-sm md:text-h-lg font-semibold mb-4">Serba Serbi Promo</div>
+      <div className="text-h-sm md:text-h-lg font-semibold py-4">Serba Serbi Promo</div>
       <div className='px-4 sm:px-0'>
         <div className='grid md:grid-cols-3 grid-cols-2 justify-between gap-2 items-center'>
         <div className='w-full'>
diff --git a/src-migrate/pages/shop/promo/index.tsx b/src-migrate/pages/shop/promo/index.tsx
index 5fdd80aa..d1d6d70a 100644
--- a/src-migrate/pages/shop/promo/index.tsx
+++ b/src-migrate/pages/shop/promo/index.tsx
@@ -4,8 +4,11 @@ import { LazyLoadComponent } from 'react-lazy-load-image-component'
 import Hero from '~/modules/promo/components/Hero'
 import PromotionProgram from '~/modules/promo/components/PromotinProgram'
 import Voucher from '~/modules/promo/components/Voucher'
+import FlashSale from '../../../modules/promo/components/FlashSale'
 const PromoList = dynamic(() => import('../../../modules/promo/components/PromoList'));
 
+
+
 const PromoPage = () => {
   const [selectedPromo, setSelectedPromo] = useState('Bundling');
   return (
@@ -14,16 +17,18 @@ const PromoPage = () => {
         <Hero />
       </LazyLoadComponent>
 
-      <div className='h-10' />
 
       <LazyLoadComponent>
-      <PromotionProgram 
-                selectedPromo={selectedPromo} 
-                onSelectPromo={setSelectedPromo} 
-            />
+        <PromotionProgram 
+                  selectedPromo={selectedPromo} 
+                  onSelectPromo={setSelectedPromo} 
+              />
+        <PromoList selectedPromo={selectedPromo} />
+      </LazyLoadComponent>
+    
+      <LazyLoadComponent>
+        <FlashSale />
       </LazyLoadComponent>
-      <PromoList selectedPromo={selectedPromo} />
-      <div className='h-10' />
 
       <LazyLoadComponent>
         <Voucher />