From 8ce480fedfa91e16d9adb997311a999aaabaafb2 Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Mon, 8 Jul 2024 16:08:21 +0700
Subject: <iman> update testing swiper

---
 src-migrate/modules/promo/components/PromoList.tsx | 122 +++++++++++++++++++++
 1 file changed, 122 insertions(+)
 create mode 100644 src-migrate/modules/promo/components/PromoList.tsx

(limited to 'src-migrate/modules/promo/components/PromoList.tsx')

diff --git a/src-migrate/modules/promo/components/PromoList.tsx b/src-migrate/modules/promo/components/PromoList.tsx
new file mode 100644
index 00000000..1b359857
--- /dev/null
+++ b/src-migrate/modules/promo/components/PromoList.tsx
@@ -0,0 +1,122 @@
+import React, { useEffect, useState } from 'react';
+import ProductPromoCard from '../../product-promo/components/Card';
+import { fetchPromoItemsSolr } from '../../../../src/api/promoApi';
+import { Swiper, SwiperProps, SwiperSlide } from 'swiper/react';
+import useDevice from '@/core/hooks/useDevice';
+import LogoSpinner from '../../../../src/core/components/elements/Spinner/LogoSpinner';
+import usePromoStore from './promoStore';
+import { ChevronRightIcon } from '@heroicons/react/24/outline';
+import Link from "next/link"
+import SwiperCore, { Navigation, Pagination } from 'swiper';
+import { IPromotion } from '~/types/promotion';
+
+SwiperCore.use([Navigation, Pagination]);
+
+interface PromoListProps {
+  selectedPromo: string; // Tipe selectedPromo ditetapkan sebagai string
+}
+
+const PromoList: React.FC<PromoListProps> = ({ selectedPromo }) => {
+  const { isMobile } = useDevice();
+  const {
+    title,
+    slug,
+    promoItems,
+    promoData,
+    isLoading,
+    setTitle,
+    setSlug,
+    setPromoItems,
+    setPromoData,
+    setIsLoading,
+  } = usePromoStore();
+  
+  
+  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, setTitle, setSlug]);
+
+  useEffect(() => {
+    const fetchPromotions = async () => {
+      setIsLoading(true);
+      try {
+        const items = await fetchPromoItemsSolr(`type_value_s:${slug}`, 0, 10);
+        setPromoItems(items);
+
+        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);
+      setPromoItems([]);
+      setPromoData([]);
+      fetchPromotions();
+    }
+  }, [slug, setPromoItems, setPromoData, setIsLoading]);
+  
+  const swiperBanner: SwiperProps = {
+    modules: [Navigation],
+    className: 'h-[400px] w-full',
+    slidesPerView: isMobile ? 1.1 : 3.25,
+    spaceBetween: 10,
+    navigation:isMobile? true : false,
+    allowTouchMove:isMobile? false : true,
+  };
+  return (
+    <>
+      <div className='min-h-[360px]'>
+        <div className='flex justify-between items-center'>
+          <h1 className='text-h-sm md:text-h-lg font-semibold py-4'>{title}</h1>
+          <div>
+            <Link href={`/shop/promo/${slug}`} className='!text-red-500 font-semibold'>
+              Lihat Semua
+            </Link>
+          </div>
+        </div>
+        {isLoading ? (
+          <div className="loading-spinner flex justify-center">
+            <LogoSpinner width={48} height={48} />
+          </div>
+        ) : (
+          <Swiper {...swiperBanner}>
+            {promoData?.map((promotion: IPromotion) => (
+              <SwiperSlide key={promotion.id}>
+                <div className="min-w-36 max-w-[400px] mb-[20px] sm:w-full md:w-full lg:w-full xl:w-full">
+                  <ProductPromoCard promotion={promotion} />
+                </div>
+              </SwiperSlide>
+            ))}
+          </Swiper>
+        )}
+      </div>
+    </>
+  );
+};
+
+export default PromoList;
-- 
cgit v1.2.3