From 3f849355048e5c280a35a5747577e5296b90e9fd Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Thu, 25 Jan 2024 15:27:27 +0700
Subject: Add all promo page

---
 src-migrate/modules/promo/components/Hero.tsx      | 55 ++++++++++++++++++++++
 src-migrate/modules/promo/components/Voucher.tsx   | 11 +++++
 src-migrate/modules/promo/styles/hero.module.css   | 27 +++++++++++
 .../modules/promo/styles/voucher.module.css        |  3 ++
 4 files changed, 96 insertions(+)
 create mode 100644 src-migrate/modules/promo/components/Hero.tsx
 create mode 100644 src-migrate/modules/promo/components/Voucher.tsx
 create mode 100644 src-migrate/modules/promo/styles/hero.module.css
 create mode 100644 src-migrate/modules/promo/styles/voucher.module.css

(limited to 'src-migrate/modules')

diff --git a/src-migrate/modules/promo/components/Hero.tsx b/src-migrate/modules/promo/components/Hero.tsx
new file mode 100644
index 00000000..63524509
--- /dev/null
+++ b/src-migrate/modules/promo/components/Hero.tsx
@@ -0,0 +1,55 @@
+import { Swiper, SwiperProps, SwiperSlide } from 'swiper/react';
+import style from '../styles/hero.module.css';
+import 'swiper/css'
+import Image from 'next/image';
+import { useQuery } from 'react-query';
+import { getBanner } from '~/services/banner';
+
+const swiperBanner: SwiperProps = {
+  autoplay: {
+    delay: 6000,
+    disableOnInteraction: false
+  },
+  // modules: [Pagination, Autoplay],
+  loop: true,
+  className: 'h-[400px] w-full',
+  slidesPerView: 1.1,
+  spaceBetween: 10
+}
+
+const Hero = () => {
+  const bannerQuery = useQuery({
+    queryKey: ['banner.all-promo'],
+    queryFn: () => getBanner({ type: 'all-promo' })
+  })
+
+  const banners = bannerQuery.data || []
+
+  return (
+    <div className={style['wrapper']}>
+      <div className={style['desc-section']}>
+        <div className={style['title']}>Pasti Hemat & Untung Selama Belanja di Indoteknik.com!</div>
+        <div className='h-4' />
+        <div className={style['subtitle']}>Cari paket yang kami sediakan dengan penawaran harga & Nikmati kemudahan dalam setiap transaksi dengan fitur lengkap Pembayaran hingga barang sampai! </div>
+      </div>
+
+      <div className={style['banner-section']}>
+        <Swiper {...swiperBanner}>
+          {banners.map((banner, index) => (
+            <SwiperSlide key={index}>
+              <Image
+                src='https://erp.indoteknik.com/api/image/x_banner.banner/x_banner_image/363'
+                alt={banner.name}
+                width={666}
+                height={450}
+                className='w-full h-full object-cover object-center rounded-2xl'
+              />
+            </SwiperSlide>
+          ))}
+        </Swiper>
+      </div>
+    </div>
+  )
+}
+
+export default Hero
\ No newline at end of file
diff --git a/src-migrate/modules/promo/components/Voucher.tsx b/src-migrate/modules/promo/components/Voucher.tsx
new file mode 100644
index 00000000..11742f9a
--- /dev/null
+++ b/src-migrate/modules/promo/components/Voucher.tsx
@@ -0,0 +1,11 @@
+import style from '../styles/voucher.module.css'
+
+const Voucher = () => {
+  return (
+    <>
+      <div className={style['title']}>Pakai Voucher Belanja</div>
+    </>
+  )
+}
+
+export default Voucher
\ No newline at end of file
diff --git a/src-migrate/modules/promo/styles/hero.module.css b/src-migrate/modules/promo/styles/hero.module.css
new file mode 100644
index 00000000..70d725be
--- /dev/null
+++ b/src-migrate/modules/promo/styles/hero.module.css
@@ -0,0 +1,27 @@
+.wrapper {
+    @apply bg-warning-100/50 rounded-xl w-full h-[460px] flex;
+}
+
+.desc-section {
+    @apply w-full md:w-5/12 
+        flex flex-col 
+        md:justify-center 
+        p-6 md:pl-10;
+}
+
+.title {
+    @apply text-title-sm md:text-title-lg 
+        leading-[30px] md:leading-[42px]
+        font-semibold;
+}
+
+.subtitle {
+    @apply text-body-2 leading-7 text-gray-700;
+}
+
+.banner-section {
+    @apply md:w-7/12
+        flex flex-col
+        md:justify-center
+        md:pr-10;
+}
diff --git a/src-migrate/modules/promo/styles/voucher.module.css b/src-migrate/modules/promo/styles/voucher.module.css
new file mode 100644
index 00000000..22a3a0ac
--- /dev/null
+++ b/src-migrate/modules/promo/styles/voucher.module.css
@@ -0,0 +1,3 @@
+.title {
+    @apply text-h-sm md:text-h-lg font-semibold;
+}
-- 
cgit v1.2.3


From 8d8c43d90373aab6238773e291a48d65d55c52a2 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Sat, 17 Feb 2024 10:23:23 +0700
Subject: Add voucher section

---
 src-migrate/modules/promo/components/Hero.tsx      | 23 ++++---
 src-migrate/modules/promo/components/Voucher.tsx   | 73 ++++++++++++++++++++++
 .../modules/promo/styles/voucher.module.css        | 40 ++++++++++++
 3 files changed, 129 insertions(+), 7 deletions(-)

(limited to 'src-migrate/modules')

diff --git a/src-migrate/modules/promo/components/Hero.tsx b/src-migrate/modules/promo/components/Hero.tsx
index 63524509..5470b93b 100644
--- a/src-migrate/modules/promo/components/Hero.tsx
+++ b/src-migrate/modules/promo/components/Hero.tsx
@@ -1,19 +1,21 @@
-import { Swiper, SwiperProps, SwiperSlide } from 'swiper/react';
-import style from '../styles/hero.module.css';
-import 'swiper/css'
+import 'swiper/css';
+
 import Image from 'next/image';
+import { useEffect, useMemo } from 'react';
 import { useQuery } from 'react-query';
+import { Swiper, SwiperProps, SwiperSlide } from 'swiper/react';
+
 import { getBanner } from '~/services/banner';
+import style from '../styles/hero.module.css';
 
 const swiperBanner: SwiperProps = {
   autoplay: {
     delay: 6000,
     disableOnInteraction: false
   },
-  // modules: [Pagination, Autoplay],
-  loop: true,
+  loop: false,
   className: 'h-[400px] w-full',
-  slidesPerView: 1.1,
+  slidesPerView: 1,
   spaceBetween: 10
 }
 
@@ -23,7 +25,14 @@ const Hero = () => {
     queryFn: () => getBanner({ type: 'all-promo' })
   })
 
-  const banners = bannerQuery.data || []
+  const banners = useMemo(() => bannerQuery.data || [], [bannerQuery.data]);
+
+  useEffect(() => {
+    if (banners.length > 1) {
+      swiperBanner.slidesPerView = 1.1;
+      swiperBanner.loop = true;
+    }
+  }, [banners]);
 
   return (
     <div className={style['wrapper']}>
diff --git a/src-migrate/modules/promo/components/Voucher.tsx b/src-migrate/modules/promo/components/Voucher.tsx
index 11742f9a..0706f044 100644
--- a/src-migrate/modules/promo/components/Voucher.tsx
+++ b/src-migrate/modules/promo/components/Voucher.tsx
@@ -1,9 +1,82 @@
+import { useMemo } from 'react'
+import { useQuery } from 'react-query'
+import { Swiper, SwiperProps, SwiperSlide } from 'swiper/react'
+import { getVoucher } from '~/services/voucher'
 import style from '../styles/voucher.module.css'
+import Image from 'next/image'
+import { useToast } from '@chakra-ui/react'
+
+const swiperVoucher: SwiperProps = {
+  autoplay: {
+    delay: 6000,
+    disableOnInteraction: false
+  },
+  loop: false,
+  className: 'h-[160px] w-full',
+  slidesPerView: 3,
+  spaceBetween: 16
+}
 
 const Voucher = () => {
+  const toast = useToast();
+  const voucherQuery = useQuery({
+    queryKey: ['voucher.all-voucher'],
+    queryFn: getVoucher
+  })
+
+  const vouchers = useMemo(() => voucherQuery.data || [], [voucherQuery.data]);
+
+  const copyText = (text: string) => {
+    navigator.clipboard.writeText(text)
+    toast({
+      title: 'Salin ke papan klip',
+      description: 'Kode voucher berhasil disalin',
+      status: 'success',
+      duration: 3000,
+      isClosable: true,
+      position: 'bottom',
+    })
+  }
+
   return (
     <>
       <div className={style['title']}>Pakai Voucher Belanja</div>
+
+      <div className='h-6' />
+
+      {voucherQuery.isLoading && (
+        <div className='grid grid-cols-3 gap-x-4 animate-pulse'>
+          {Array.from({ length: 3 }).map((_, index) => (
+            <div key={index} className='w-full h-[160px] bg-gray-200 rounded-xl' />
+          ))}
+        </div>
+      )}
+      {!voucherQuery.isLoading && (
+        <div className={style['voucher-section']}>
+          <Swiper {...swiperVoucher}>
+            {vouchers.map((voucher) => (
+              <SwiperSlide key={voucher.id} className='pb-2'>
+                <div className={style['voucher-card']}>
+                  <Image src={voucher.image} alt={voucher.name} width={128} height={128} className={style['voucher-image']} />
+
+                  <div className={style['voucher-content']}>
+                    <div className={style['voucher-title']}>{voucher.name}</div>
+                    <div className={style['voucher-desc']}>{voucher.description} Lorem ipsum dolor sit, amet consectetur adipisicing elit. Officiis magni nobis sint aspernatur soluta deserunt excepturi delectus corporis libero, voluptate odit! Cupiditate, quibusdam ipsa saepe voluptas repudiandae eum quaerat suscipit.</div>
+                    <div className={style['voucher-bottom']}>
+                      <div>
+                        <div className={style['voucher-code-desc']}>Kode Promo</div>
+                        <div className={style['voucher-code']}>{voucher.code}</div>
+                      </div>
+                      <button className={style['voucher-copy']} onClick={() => copyText(voucher.code)}>Salin</button>
+                    </div>
+                  </div>
+                </div>
+              </SwiperSlide>
+            ))}
+          </Swiper>
+        </div>
+      )}
+
     </>
   )
 }
diff --git a/src-migrate/modules/promo/styles/voucher.module.css b/src-migrate/modules/promo/styles/voucher.module.css
index 22a3a0ac..24d3aac2 100644
--- a/src-migrate/modules/promo/styles/voucher.module.css
+++ b/src-migrate/modules/promo/styles/voucher.module.css
@@ -1,3 +1,43 @@
 .title {
     @apply text-h-sm md:text-h-lg font-semibold;
 }
+
+.voucher-section {
+    @apply w-full;
+}
+
+.voucher-card {
+    @apply w-full h-full rounded-xl border border-gray-200 shadow-md p-4 flex gap-x-4;
+}
+
+.voucher-image {
+    @apply bg-gray-100 rounded-lg w-4/12 h-full object-contain object-center;
+}
+
+.voucher-content {
+    @apply flex-1 flex flex-col;
+}
+
+.voucher-title {
+    @apply font-medium text-body-1 leading-6 mb-1;
+}
+
+.voucher-desc {
+    @apply text-gray-800 line-clamp-2 text-caption-1;
+}
+
+.voucher-bottom {
+    @apply flex justify-between mt-auto;
+}
+
+.voucher-code-desc {
+    @apply text-gray-500 text-caption-1;
+}
+
+.voucher-code {
+    @apply text-red-700 font-medium;
+}
+
+.voucher-copy {
+    @apply bg-gray-200 hover:bg-danger-500 text-danger-500 hover:text-white transition-colors rounded-lg flex items-center justify-center px-6;
+}
-- 
cgit v1.2.3


From 040657403a01205b22e1028d8ebea971f5df9ac5 Mon Sep 17 00:00:00 2001
From: "HATEC\\SPVDEV001" <tri.susilo@altama.co.id>
Date: Tue, 4 Jun 2024 13:28:20 +0700
Subject: promo line

---
 src-migrate/modules/promo/components/PromotinProgram.tsx | 9 +++++++++
 src-migrate/modules/promo/components/Voucher.tsx         | 2 +-
 2 files changed, 10 insertions(+), 1 deletion(-)
 create mode 100644 src-migrate/modules/promo/components/PromotinProgram.tsx

(limited to 'src-migrate/modules')

diff --git a/src-migrate/modules/promo/components/PromotinProgram.tsx b/src-migrate/modules/promo/components/PromotinProgram.tsx
new file mode 100644
index 00000000..19f228ea
--- /dev/null
+++ b/src-migrate/modules/promo/components/PromotinProgram.tsx
@@ -0,0 +1,9 @@
+const PromotionProgram = () => {
+    return (
+        <>
+            <div className="">Serba Serbi Promo</div>
+        </>
+    )
+}
+
+export default PromotionProgram
\ No newline at end of file
diff --git a/src-migrate/modules/promo/components/Voucher.tsx b/src-migrate/modules/promo/components/Voucher.tsx
index 0706f044..14d3c301 100644
--- a/src-migrate/modules/promo/components/Voucher.tsx
+++ b/src-migrate/modules/promo/components/Voucher.tsx
@@ -61,7 +61,7 @@ const Voucher = () => {
 
                   <div className={style['voucher-content']}>
                     <div className={style['voucher-title']}>{voucher.name}</div>
-                    <div className={style['voucher-desc']}>{voucher.description} Lorem ipsum dolor sit, amet consectetur adipisicing elit. Officiis magni nobis sint aspernatur soluta deserunt excepturi delectus corporis libero, voluptate odit! Cupiditate, quibusdam ipsa saepe voluptas repudiandae eum quaerat suscipit.</div>
+                    <div className={style['voucher-desc']}>{voucher.description}</div>
                     <div className={style['voucher-bottom']}>
                       <div>
                         <div className={style['voucher-code-desc']}>Kode Promo</div>
-- 
cgit v1.2.3


From 208b234320b6c42491a4e87a1c3db3abab9c1715 Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Fri, 21 Jun 2024 10:52:28 +0700
Subject: <iman> update all-promotion

---
 src-migrate/modules/promo/components/Hero.tsx      |  14 +-
 src-migrate/modules/promo/components/PromoList.jsx | 194 +++++++++++++++++++++
 .../modules/promo/components/PromotinProgram.jsx   |  95 ++++++++++
 3 files changed, 298 insertions(+), 5 deletions(-)
 create mode 100644 src-migrate/modules/promo/components/PromoList.jsx
 create mode 100644 src-migrate/modules/promo/components/PromotinProgram.jsx

(limited to 'src-migrate/modules')

diff --git a/src-migrate/modules/promo/components/Hero.tsx b/src-migrate/modules/promo/components/Hero.tsx
index 5470b93b..d8bb0be4 100644
--- a/src-migrate/modules/promo/components/Hero.tsx
+++ b/src-migrate/modules/promo/components/Hero.tsx
@@ -3,26 +3,30 @@ import 'swiper/css';
 import Image from 'next/image';
 import { useEffect, useMemo } from 'react';
 import { useQuery } from 'react-query';
-import { Swiper, SwiperProps, SwiperSlide } from 'swiper/react';
+import { Swiper, SwiperProps, SwiperSlide }  from 'swiper/react';
 
 import { getBanner } from '~/services/banner';
 import style from '../styles/hero.module.css';
+import 'swiper/css/navigation';
+import  { Navigation, Pagination } from 'swiper';
 
 const swiperBanner: SwiperProps = {
+  modules:[Navigation, Pagination],
   autoplay: {
     delay: 6000,
     disableOnInteraction: false
   },
-  loop: false,
+  loop: true,
   className: 'h-[400px] w-full',
   slidesPerView: 1,
-  spaceBetween: 10
+  spaceBetween: 10,
+  navigation:true,
 }
 
 const Hero = () => {
   const bannerQuery = useQuery({
     queryKey: ['banner.all-promo'],
-    queryFn: () => getBanner({ type: 'all-promo' })
+    queryFn: () => getBanner({ type: 'banner-promotion' })
   })
 
   const banners = useMemo(() => bannerQuery.data || [], [bannerQuery.data]);
@@ -47,7 +51,7 @@ const Hero = () => {
           {banners.map((banner, index) => (
             <SwiperSlide key={index}>
               <Image
-                src='https://erp.indoteknik.com/api/image/x_banner.banner/x_banner_image/363'
+                src={banner.image}
                 alt={banner.name}
                 width={666}
                 height={450}
diff --git a/src-migrate/modules/promo/components/PromoList.jsx b/src-migrate/modules/promo/components/PromoList.jsx
new file mode 100644
index 00000000..af2958aa
--- /dev/null
+++ b/src-migrate/modules/promo/components/PromoList.jsx
@@ -0,0 +1,194 @@
+import Image from 'next/image';
+import Link from '@/core/components/elements/Link/Link';
+import ProductPromoCard from '../../../../src-migrate/modules/product-promo/components/Card'
+// import { fetchPromoItemsSolr, fetchVariantSolr } from '../../../api/promoApi'
+
+
+export const fetchPromoItemsSolr = async (type) => {
+  // let query = type ? `type_value_s:${type}` : '*:*';
+  let start = 0
+  let rows = 100
+  try {
+    const queryParams = new URLSearchParams({ q: type });
+    const response = await fetch(`/solr/promotion_program_lines/select?${queryParams.toString()}&rows=${rows}&start=${start}`);
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+    const data = await response.json();
+    const promotions = await map(data.response.docs);
+    return promotions;
+  } catch (error) {
+    console.error("Error fetching promotion data:", error);
+    return [];
+  }
+};
+
+
+const PromoList = ({ selectedPromo }) => {
+
+  useEffect(() => {
+    const loadPromo = async () => {
+      setLoading(true);
+      
+      
+      try {
+        const items = await fetchPromoItemsSolr(`type_value_s:${Array.isArray(slug) ? slug[0] : slug}`);
+        setPromoItems(items);
+        
+        if (items.length === 0) {
+          setPromoData([])
+          setLoading(false);
+          return;
+          }
+          
+          const brandArray = Array.isArray(brand) ? brand : brand.split(',');
+          const categoryArray = Array.isArray(category) ? category : category.split(',');
+          
+          const promoDataPromises = items.map(async (item) => {
+            
+            try { 
+              let brandQuery = '';
+              if (brand) {
+                brandQuery = brandArray.map(b => `manufacture_name_s:${b}`).join(' OR ');
+                brandQuery = `(${brandQuery})`;
+              }
+  
+              let categoryQuery = '';
+              if (category) {
+                categoryQuery = categoryArray.map(c => `category_name:${c}`).join(' OR ');
+                categoryQuery = `(${categoryQuery})`;
+              }
+  
+              let priceQuery = '';
+              if (priceFrom && priceTo) {
+                priceQuery = `price_f:[${priceFrom} TO ${priceTo}]`;
+              } else if (priceFrom) {
+                priceQuery = `price_f:[${priceFrom} TO *]`;
+              } else if (priceTo) {
+                priceQuery = `price_f:[* TO ${priceTo}]`;
+              }
+  
+              let combinedQuery = '';
+              let combinedQueryPrice = `${priceQuery}`;
+              if (brand && category && priceFrom || priceTo) {
+                combinedQuery = `${brandQuery} AND ${categoryQuery} `;
+              } else if (brand && category) {
+                combinedQuery = `${brandQuery} AND ${categoryQuery}`;
+              } else if (brand && priceFrom || priceTo) {
+                combinedQuery = `${brandQuery}`;
+              } else if (category && priceFrom || priceTo) {
+                combinedQuery = `${categoryQuery}`;
+              } else if (brand) {
+                combinedQuery = brandQuery;
+              } else if (category) {
+                combinedQuery = categoryQuery;
+              }
+  
+              if (combinedQuery && priceFrom || priceTo) {
+                const response = await fetchVariantSolr(`id:${item.product_id} AND ${combinedQuery}`);
+                const product = response.response.docs[0];
+                const product_id = product.id;
+                const response2 = await fetchPromoItemsSolr(`type_value_s:${Array.isArray(slug) ? slug[0] : slug} AND product_ids:${product_id} AND ${combinedQueryPrice}`);  
+                return response2;
+              }else if(combinedQuery){
+                const response = await fetchVariantSolr(`id:${item.product_id} AND ${combinedQuery}`);
+                const product = response.response.docs[0];
+                const product_id = product.id;
+                const response2 = await fetchPromoItemsSolr(`type_value_s:${Array.isArray(slug) ? slug[0] : slug} AND product_ids:${product_id} `); 
+                return response2;
+              } else {
+                const response = await fetchPromoItemsSolr(`id:${item.id}`);
+                return response;
+              }
+            } catch (fetchError) {
+              return [];
+            }
+          });
+
+        const promoDataArray = await Promise.all(promoDataPromises);
+        const mergedPromoData = promoDataArray.reduce((accumulator, currentValue) => accumulator.concat(currentValue), []);
+        setPromoData(mergedPromoData);
+
+        const dataBrandCategoryPromises = promoDataArray.map(async (promoData) => {
+          if (promoData) {
+            const dataBrandCategory = promoData.map(async (item) => {
+              let response;
+              if(category){
+                const categoryQuery = categoryArray.map(c => `category_name:${c}`).join(' OR ');
+                response = await fetchVariantSolr(`id:${item.products[0].product_id} AND (${categoryQuery})`);
+              }else{
+                response = await fetchVariantSolr(`id:${item.products[0].product_id}`)    
+              }
+              
+
+              if (response.response?.docs?.length > 0) {
+                const product = response.response.docs[0];
+                const manufactureNameS = product.manufacture_name;
+                if (Array.isArray(manufactureNameS)) {
+                  for (let i = 0; i < manufactureNameS.length; i += 2) {
+                    const brand = manufactureNameS[i];
+                    const qty = 1;
+                    const existingBrandIndex = brandsData.findIndex(b => b.brand === brand);
+                    if (existingBrandIndex !== -1) {
+                      brandsData[existingBrandIndex].qty += qty;
+                    } else {
+                      brandsData.push({ brand, qty });
+                    }
+                  }
+                }
+
+                const categoryNameS = product.category_name;
+                if (Array.isArray(categoryNameS)) {
+                  for (let i = 0; i < categoryNameS.length; i += 2) {
+                    const name = categoryNameS[i];
+                    const qty = 1;
+                    const existingCategoryIndex = categoriesData.findIndex(c => c.name === name);
+                    if (existingCategoryIndex !== -1) {
+                      categoriesData[existingCategoryIndex].qty += qty;
+                    } else {
+                      categoriesData.push({ name, qty });
+                    }
+                  }
+                }
+              }
+            });
+
+            return Promise.all(dataBrandCategory);
+          }
+        });
+
+        await Promise.all(dataBrandCategoryPromises);
+        setBrands(brandsData);
+        setCategories(categoriesData);
+        setLoading(false);
+
+      } catch (loadError) {
+        // console.error("Error loading promo items:", loadError)
+        setLoading(false);
+      }
+    }
+
+    if (slug) {
+      loadPromo()
+    }
+  },[slug, brand, category, priceFrom, priceTo, currentPage]);
+
+  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';
+  }
+
+  return (
+    <div>
+      <h1 className='text-h-sm md:text-h-lg font-semibold mb-4'>{title}</h1>
+      <div>DISINI CARD {selectedPromo}</div>
+    </div>
+  );
+}
+
+export default PromoList;
diff --git a/src-migrate/modules/promo/components/PromotinProgram.jsx b/src-migrate/modules/promo/components/PromotinProgram.jsx
new file mode 100644
index 00000000..a7e5dfef
--- /dev/null
+++ b/src-migrate/modules/promo/components/PromotinProgram.jsx
@@ -0,0 +1,95 @@
+import React from 'react';
+import Image from 'next/image';
+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='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'>
+            <div
+              onClick={() => onSelectPromo('Bundling')}
+              className={`border p-2 flex items-center gap-x-2 rounded-lg cursor-pointer ${selectedPromo === 'Bundling' ? 'bg-red-50 border-red-500 text-red-500' : 'border-gray-200 text-gray-900'}`}
+            >
+              <div>
+                <Image
+                  width={24}
+                  height={24}
+                  quality={100}
+                  src='/images/icon_promo/silat.svg'
+                  alt=''
+                  className='h-20 w-20 rounded'
+                />
+              </div>
+              <div>
+                <div className='flex w-full flex-row items-center justify-start'>
+                  <h1 className={`mr-1 font-semibold text-base ${selectedPromo === 'Bundling' ? 'text-red-500' : 'text-gray-900'}`}>Paket Silat</h1>
+                  <InfoIcon className='mt-[1px] text-red-500' size={14} />
+                </div>
+                <p className={`text-xs md:text-sm ${selectedPromo === 'Bundling' ? 'text-red-500' : 'text-gray-500'}`}>
+                  Pilihan bundling barang kombinasi Silat.
+                </p>
+              </div>
+            </div>
+          </div>
+          <div className='w-full'>
+            <div
+              onClick={() => onSelectPromo('Loading')}
+              className={`border p-2 flex items-center gap-x-2 rounded-lg cursor-pointer ${selectedPromo === 'Loading' ? 'bg-red-50 border-red-500 text-red-500' : 'border-gray-200 text-gray-900'}`}
+            >
+              <div>
+                <Image
+                  width={24}
+                  height={24}
+                  quality={100}
+                  src='/images/icon_promo/barong.svg'
+                  alt=''
+                  className='h-20 w-20 rounded'
+                />
+              </div>
+              <div>
+                <div className='flex w-full flex-row items-center justify-start'>
+                  <h1 className={`mr-1 font-semibold text-base ${selectedPromo === 'Loading' ? 'text-red-500' : 'text-gray-900'}`}>Paket Barong</h1>
+                  <InfoIcon className='mt-[1px] text-red-500' size={14} />
+                </div>
+                <p className={`text-xs md:text-sm ${selectedPromo === 'Loading' ? 'text-red-500' : 'text-gray-500'}`}>
+                  Beli banyak barang/partai barang borong.
+                </p>
+              </div>
+            </div>
+          </div>
+          <div className='w-full'>
+            <div
+              onClick={() => onSelectPromo('Merchandise')}
+              className={`border p-2 flex items-center gap-x-2 rounded-lg cursor-pointer ${selectedPromo === 'Merchandise' ? 'bg-red-50 border-red-500 text-red-500' : 'border-gray-200 text-gray-900'}`}
+            >
+              <div>
+                <Image
+                  width={24}
+                  height={24}
+                  quality={100}
+                  src='/images/icon_promo/angklung.svg'
+                  alt=''
+                  className='h-20 w-20 rounded'
+                />
+              </div>
+              <div >
+                <div className='flex w-full flex-row items-center justify-start '>
+                  <h1 className={`mr-1 font-semibold text-base ${selectedPromo === 'Merchandise' ? 'text-red-500' : 'text-gray-900'}`}>Paket Angklung</h1>
+                  <InfoIcon className='mt-[1px] text-red-500' size={14} />
+                </div>
+                <p className={`  m1 text-xs md:text-sm ${selectedPromo === 'Merchandise' ? 'text-red-500' : 'text-gray-500'}`}>
+                  Gratis barang promosi/merchandise menang langsung.
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default PromotionProgram;
-- 
cgit v1.2.3


From 7b08c9358888148bf6f6c2c7145d75e466550298 Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Fri, 21 Jun 2024 11:04:57 +0700
Subject: <iman> update after marge

---
 src-migrate/modules/promo/components/PromoList.jsx | 170 ---------------------
 .../modules/promo/components/PromotinProgram.tsx   |   9 --
 2 files changed, 179 deletions(-)
 delete mode 100644 src-migrate/modules/promo/components/PromotinProgram.tsx

(limited to 'src-migrate/modules')

diff --git a/src-migrate/modules/promo/components/PromoList.jsx b/src-migrate/modules/promo/components/PromoList.jsx
index af2958aa..ed758fbc 100644
--- a/src-migrate/modules/promo/components/PromoList.jsx
+++ b/src-migrate/modules/promo/components/PromoList.jsx
@@ -1,178 +1,8 @@
 import Image from 'next/image';
 import Link from '@/core/components/elements/Link/Link';
 import ProductPromoCard from '../../../../src-migrate/modules/product-promo/components/Card'
-// import { fetchPromoItemsSolr, fetchVariantSolr } from '../../../api/promoApi'
-
-
-export const fetchPromoItemsSolr = async (type) => {
-  // let query = type ? `type_value_s:${type}` : '*:*';
-  let start = 0
-  let rows = 100
-  try {
-    const queryParams = new URLSearchParams({ q: type });
-    const response = await fetch(`/solr/promotion_program_lines/select?${queryParams.toString()}&rows=${rows}&start=${start}`);
-    if (!response.ok) {
-      throw new Error(`HTTP error! status: ${response.status}`);
-    }
-    const data = await response.json();
-    const promotions = await map(data.response.docs);
-    return promotions;
-  } catch (error) {
-    console.error("Error fetching promotion data:", error);
-    return [];
-  }
-};
-
 
 const PromoList = ({ selectedPromo }) => {
-
-  useEffect(() => {
-    const loadPromo = async () => {
-      setLoading(true);
-      
-      
-      try {
-        const items = await fetchPromoItemsSolr(`type_value_s:${Array.isArray(slug) ? slug[0] : slug}`);
-        setPromoItems(items);
-        
-        if (items.length === 0) {
-          setPromoData([])
-          setLoading(false);
-          return;
-          }
-          
-          const brandArray = Array.isArray(brand) ? brand : brand.split(',');
-          const categoryArray = Array.isArray(category) ? category : category.split(',');
-          
-          const promoDataPromises = items.map(async (item) => {
-            
-            try { 
-              let brandQuery = '';
-              if (brand) {
-                brandQuery = brandArray.map(b => `manufacture_name_s:${b}`).join(' OR ');
-                brandQuery = `(${brandQuery})`;
-              }
-  
-              let categoryQuery = '';
-              if (category) {
-                categoryQuery = categoryArray.map(c => `category_name:${c}`).join(' OR ');
-                categoryQuery = `(${categoryQuery})`;
-              }
-  
-              let priceQuery = '';
-              if (priceFrom && priceTo) {
-                priceQuery = `price_f:[${priceFrom} TO ${priceTo}]`;
-              } else if (priceFrom) {
-                priceQuery = `price_f:[${priceFrom} TO *]`;
-              } else if (priceTo) {
-                priceQuery = `price_f:[* TO ${priceTo}]`;
-              }
-  
-              let combinedQuery = '';
-              let combinedQueryPrice = `${priceQuery}`;
-              if (brand && category && priceFrom || priceTo) {
-                combinedQuery = `${brandQuery} AND ${categoryQuery} `;
-              } else if (brand && category) {
-                combinedQuery = `${brandQuery} AND ${categoryQuery}`;
-              } else if (brand && priceFrom || priceTo) {
-                combinedQuery = `${brandQuery}`;
-              } else if (category && priceFrom || priceTo) {
-                combinedQuery = `${categoryQuery}`;
-              } else if (brand) {
-                combinedQuery = brandQuery;
-              } else if (category) {
-                combinedQuery = categoryQuery;
-              }
-  
-              if (combinedQuery && priceFrom || priceTo) {
-                const response = await fetchVariantSolr(`id:${item.product_id} AND ${combinedQuery}`);
-                const product = response.response.docs[0];
-                const product_id = product.id;
-                const response2 = await fetchPromoItemsSolr(`type_value_s:${Array.isArray(slug) ? slug[0] : slug} AND product_ids:${product_id} AND ${combinedQueryPrice}`);  
-                return response2;
-              }else if(combinedQuery){
-                const response = await fetchVariantSolr(`id:${item.product_id} AND ${combinedQuery}`);
-                const product = response.response.docs[0];
-                const product_id = product.id;
-                const response2 = await fetchPromoItemsSolr(`type_value_s:${Array.isArray(slug) ? slug[0] : slug} AND product_ids:${product_id} `); 
-                return response2;
-              } else {
-                const response = await fetchPromoItemsSolr(`id:${item.id}`);
-                return response;
-              }
-            } catch (fetchError) {
-              return [];
-            }
-          });
-
-        const promoDataArray = await Promise.all(promoDataPromises);
-        const mergedPromoData = promoDataArray.reduce((accumulator, currentValue) => accumulator.concat(currentValue), []);
-        setPromoData(mergedPromoData);
-
-        const dataBrandCategoryPromises = promoDataArray.map(async (promoData) => {
-          if (promoData) {
-            const dataBrandCategory = promoData.map(async (item) => {
-              let response;
-              if(category){
-                const categoryQuery = categoryArray.map(c => `category_name:${c}`).join(' OR ');
-                response = await fetchVariantSolr(`id:${item.products[0].product_id} AND (${categoryQuery})`);
-              }else{
-                response = await fetchVariantSolr(`id:${item.products[0].product_id}`)    
-              }
-              
-
-              if (response.response?.docs?.length > 0) {
-                const product = response.response.docs[0];
-                const manufactureNameS = product.manufacture_name;
-                if (Array.isArray(manufactureNameS)) {
-                  for (let i = 0; i < manufactureNameS.length; i += 2) {
-                    const brand = manufactureNameS[i];
-                    const qty = 1;
-                    const existingBrandIndex = brandsData.findIndex(b => b.brand === brand);
-                    if (existingBrandIndex !== -1) {
-                      brandsData[existingBrandIndex].qty += qty;
-                    } else {
-                      brandsData.push({ brand, qty });
-                    }
-                  }
-                }
-
-                const categoryNameS = product.category_name;
-                if (Array.isArray(categoryNameS)) {
-                  for (let i = 0; i < categoryNameS.length; i += 2) {
-                    const name = categoryNameS[i];
-                    const qty = 1;
-                    const existingCategoryIndex = categoriesData.findIndex(c => c.name === name);
-                    if (existingCategoryIndex !== -1) {
-                      categoriesData[existingCategoryIndex].qty += qty;
-                    } else {
-                      categoriesData.push({ name, qty });
-                    }
-                  }
-                }
-              }
-            });
-
-            return Promise.all(dataBrandCategory);
-          }
-        });
-
-        await Promise.all(dataBrandCategoryPromises);
-        setBrands(brandsData);
-        setCategories(categoriesData);
-        setLoading(false);
-
-      } catch (loadError) {
-        // console.error("Error loading promo items:", loadError)
-        setLoading(false);
-      }
-    }
-
-    if (slug) {
-      loadPromo()
-    }
-  },[slug, brand, category, priceFrom, priceTo, currentPage]);
-
   let title = '';
   
   if (selectedPromo === 'Bundling') {
diff --git a/src-migrate/modules/promo/components/PromotinProgram.tsx b/src-migrate/modules/promo/components/PromotinProgram.tsx
deleted file mode 100644
index 19f228ea..00000000
--- a/src-migrate/modules/promo/components/PromotinProgram.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-const PromotionProgram = () => {
-    return (
-        <>
-            <div className="">Serba Serbi Promo</div>
-        </>
-    )
-}
-
-export default PromotionProgram
\ No newline at end of file
-- 
cgit v1.2.3


From 3ada88f0faf901e05bd56ecff8c4bcb209c06787 Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Fri, 21 Jun 2024 15:31:12 +0700
Subject: <iman> update all-promotion

---
 src-migrate/modules/promo/components/FlashSale.tsx | 21 +++++
 src-migrate/modules/promo/components/PromoList.jsx | 98 ++++++++++++++++++----
 .../modules/promo/components/PromotinProgram.jsx   |  2 +-
 3 files changed, 105 insertions(+), 16 deletions(-)
 create mode 100644 src-migrate/modules/promo/components/FlashSale.tsx

(limited to 'src-migrate/modules')

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'>
-- 
cgit v1.2.3


From 8b7db0f3ef5058f6e41996fd162a805ab9147cc6 Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Fri, 21 Jun 2024 16:16:34 +0700
Subject: <iman> update side banner & footer banner search

---
 src-migrate/modules/footer-banner/index.tsx |  6 +++++-
 src-migrate/modules/side-banner/index.tsx   | 26 ++++++++++++++------------
 2 files changed, 19 insertions(+), 13 deletions(-)

(limited to 'src-migrate/modules')

diff --git a/src-migrate/modules/footer-banner/index.tsx b/src-migrate/modules/footer-banner/index.tsx
index 7db1363c..c829b91e 100644
--- a/src-migrate/modules/footer-banner/index.tsx
+++ b/src-migrate/modules/footer-banner/index.tsx
@@ -1,7 +1,9 @@
 import Link from "next/link"
+import React, { useMemo } from "react";
 import { useQuery } from "react-query"
 import Image from "~/components/ui/image"
 import { getBanner } from "~/services/banner"
+import { getRandomInt } from '@/utils/getRandomInt'
 
 const FooterBanner = () => {
   const fetchFooterBanner = useQuery({
@@ -9,7 +11,9 @@ const FooterBanner = () => {
     queryFn: () => getBanner({ type: 'bottom-search-promotion' })
   })
 
-  const banner = fetchFooterBanner?.data?.[0] || false
+  const length = useMemo(() => fetchFooterBanner.data?.length, [fetchFooterBanner.data]);
+  const randomIndex = useMemo(() => getRandomInt(length), [length]);
+  const banner = fetchFooterBanner?.data?.[randomIndex] || false;
 
   return banner && (
     <>
diff --git a/src-migrate/modules/side-banner/index.tsx b/src-migrate/modules/side-banner/index.tsx
index be52c554..80a57a00 100644
--- a/src-migrate/modules/side-banner/index.tsx
+++ b/src-migrate/modules/side-banner/index.tsx
@@ -1,29 +1,31 @@
-import Link from "next/link"
-import { useQuery } from "react-query"
-import Image from "~/components/ui/image"
-import { getBanner } from "~/services/banner"
+import React, { useMemo } from "react";
+import Link from "next/link";
+import { useQuery } from "react-query";
+import Image from "~/components/ui/image";
+import { getBanner } from "~/services/banner";
+import { getRandomInt } from '@/utils/getRandomInt';
 
 const SideBanner = () => {
   const fetchSideBanner = useQuery({
     queryKey: 'sideBanner',
     queryFn: () => getBanner({ type: 'side-banner-search' })
-  })
+  });
 
-  const banner = fetchSideBanner?.data?.[0] || false
+  const length = useMemo(() => fetchSideBanner.data?.length, [fetchSideBanner.data]);
+  const randomIndex = useMemo(() => getRandomInt(length), [length]);
+  const banner = fetchSideBanner?.data?.[randomIndex] || false;
 
   return banner && (
     <>
-      {banner.url && (
+      {banner.url ? (
         <Link href={banner.url}>
           <Image src={banner.image} alt={banner.name} width={315} height={450} className='object-cover object-center rounded-lg' />
         </Link>
-      )}
-
-      {!banner.url && (
+      ) : (
         <Image src={banner.image} alt={banner.name} width={315} height={450} className='object-cover object-center rounded-lg' />
       )}
     </>
-  )
+  );
 }
 
-export default SideBanner
\ No newline at end of file
+export default SideBanner;
-- 
cgit v1.2.3


From 1583acec4f8d97633594ad5f0973a4d1235dc586 Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Sat, 22 Jun 2024 12:37:46 +0700
Subject: <iman> add diskon di all promotion

---
 .../modules/promo/components/PromotinProgram.jsx   | 26 ++++++++++++++++++++++
 1 file changed, 26 insertions(+)

(limited to 'src-migrate/modules')

diff --git a/src-migrate/modules/promo/components/PromotinProgram.jsx b/src-migrate/modules/promo/components/PromotinProgram.jsx
index 13a8405b..7e042a4a 100644
--- a/src-migrate/modules/promo/components/PromotinProgram.jsx
+++ b/src-migrate/modules/promo/components/PromotinProgram.jsx
@@ -8,6 +8,32 @@ const PromotionProgram = ({ selectedPromo, onSelectPromo }) => {
       <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'>
+            <div
+              onClick={() => onSelectPromo('Diskon')}
+              className={`border p-2 flex items-center gap-x-2 rounded-lg cursor-pointer ${selectedPromo === 'Diskon' ? 'bg-red-50 border-red-500 text-red-500' : 'border-gray-200 text-gray-900'}`}
+            >
+              <div>
+                <Image
+                  width={24}
+                  height={24}
+                  quality={100}
+                  src='/images/icon_promo/diskon.svg'
+                  alt=''
+                  className='h-20 w-20 rounded'
+                />
+              </div>
+              <div>
+                <div className='flex w-full flex-row items-center justify-start'>
+                  <h1 className={`mr-1 font-semibold text-base ${selectedPromo === 'Diskon' ? 'text-red-500' : 'text-gray-900'}`}>Spesial Diskon</h1>
+                  <InfoIcon className='mt-[1px] text-red-500' size={14} />
+                </div>
+                <p className={`text-xs md:text-sm ${selectedPromo === 'Diskon' ? 'text-red-500' : 'text-gray-500'}`}>
+                Harga lebih murah dan pasti makin hemat belinya..
+                </p>
+              </div>
+            </div>
+          </div> */}
         <div className='w-full'>
             <div
               onClick={() => onSelectPromo('Bundling')}
-- 
cgit v1.2.3


From 8456bd17207e349c717d062fcc6fe4d032da1334 Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Sat, 22 Jun 2024 12:39:22 +0700
Subject: <iman> update bagian footer untuk penawaran(baru tampilan saja) all
 promotion

---
 src-migrate/modules/promo/components/PromoList.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src-migrate/modules')

diff --git a/src-migrate/modules/promo/components/PromoList.jsx b/src-migrate/modules/promo/components/PromoList.jsx
index fb4b6ee3..9b1a30a4 100644
--- a/src-migrate/modules/promo/components/PromoList.jsx
+++ b/src-migrate/modules/promo/components/PromoList.jsx
@@ -67,7 +67,7 @@ const PromoList = ({ selectedPromo }) => {
   }, [slug]);
 
   return (
-    <div>
+    <div className='h-[420px]'>
       <h1 className='text-h-sm md:text-h-lg  font-semibold py-4'>{title}</h1>
       {isLoading ? (
         <div className="loading-spinner flex justify-center">
-- 
cgit v1.2.3


From bfeb27c25e416db41e211de54e7f7d0cac4ad792 Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Mon, 24 Jun 2024 09:13:24 +0700
Subject: <iman> update all promotion add zustand

---
 src-migrate/modules/promo/components/PromoList.jsx | 35 ++++++++++++----------
 src-migrate/modules/promo/components/promoStore.js | 16 ++++++++++
 2 files changed, 35 insertions(+), 16 deletions(-)
 create mode 100644 src-migrate/modules/promo/components/promoStore.js

(limited to 'src-migrate/modules')

diff --git a/src-migrate/modules/promo/components/PromoList.jsx b/src-migrate/modules/promo/components/PromoList.jsx
index 9b1a30a4..a21ba188 100644
--- a/src-migrate/modules/promo/components/PromoList.jsx
+++ b/src-migrate/modules/promo/components/PromoList.jsx
@@ -1,16 +1,25 @@
-import React, { useState, useEffect } from 'react';
+import React, { 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'
+import LogoSpinner from '../../../../src/core/components/elements/Spinner/LogoSpinner';
+import usePromoStore from './promoStore'; // Adjust the path accordingly
 
 const PromoList = ({ selectedPromo }) => {
-  const [title, setTitle] = useState('');
-  const [slug, setSlug] = useState('');
-  const [promoItems, setPromoItems] = useState([]);
-  const [promoData, setPromoData] = useState([]);
-  const [isLoading, setIsLoading] = useState(true);
+  const {
+    title,
+    slug,
+    promoItems,
+    promoData,
+    isLoading,
+    setTitle,
+    setSlug,
+    setPromoItems,
+    setPromoData,
+    setIsLoading,
+  } = usePromoStore();
+
   const { isMobile } = useDevice();
 
   useEffect(() => {
@@ -24,7 +33,7 @@ const PromoList = ({ selectedPromo }) => {
       setTitle('Gratis Merchandise Spesial Indoteknik');
       setSlug('merchandise');
     }
-  }, [selectedPromo]);
+  }, [selectedPromo, setTitle, setSlug]);
 
   useEffect(() => {
     const fetchPromotions = async () => {
@@ -33,11 +42,6 @@ const PromoList = ({ selectedPromo }) => {
         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);
@@ -64,17 +68,16 @@ const PromoList = ({ selectedPromo }) => {
       setPromoData([]);
       fetchPromotions();
     }
-  }, [slug]);
+  }, [slug, setPromoItems, setPromoData, setIsLoading]);
 
   return (
     <div className='h-[420px]'>
-      <h1 className='text-h-sm md:text-h-lg  font-semibold py-4'>{title}</h1>
+      <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}>
diff --git a/src-migrate/modules/promo/components/promoStore.js b/src-migrate/modules/promo/components/promoStore.js
new file mode 100644
index 00000000..c232de00
--- /dev/null
+++ b/src-migrate/modules/promo/components/promoStore.js
@@ -0,0 +1,16 @@
+import create from 'zustand';
+
+const usePromoStore = create((set) => ({
+  title: '',
+  slug: '',
+  promoItems: [],
+  promoData: [],
+  isLoading: true,
+  setTitle: (title) => set({ title }),
+  setSlug: (slug) => set({ slug }),
+  setPromoItems: (promoItems) => set({ promoItems }),
+  setPromoData: (promoData) => set({ promoData }),
+  setIsLoading: (isLoading) => set({ isLoading }),
+}));
+
+export default usePromoStore;
-- 
cgit v1.2.3


From 6f05ae8199603c7c8502987cc01ba7d0b31b27c2 Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Mon, 24 Jun 2024 14:36:06 +0700
Subject: <iman> add tampilkan lebih banyak pada card

---
 src-migrate/modules/promo/components/PromoList.jsx | 36 ++++++++++++++++++----
 .../modules/promo/components/PromotinProgram.jsx   |  8 ++---
 2 files changed, 34 insertions(+), 10 deletions(-)

(limited to 'src-migrate/modules')

diff --git a/src-migrate/modules/promo/components/PromoList.jsx b/src-migrate/modules/promo/components/PromoList.jsx
index a21ba188..7187e9d7 100644
--- a/src-migrate/modules/promo/components/PromoList.jsx
+++ b/src-migrate/modules/promo/components/PromoList.jsx
@@ -1,10 +1,11 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } 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';
-import usePromoStore from './promoStore'; // Adjust the path accordingly
+import usePromoStore from './promoStore'; // Sesuaikan dengan path yang sesuai
+import { ChevronRightIcon } from '@heroicons/react/24/outline';
 
 const PromoList = ({ selectedPromo }) => {
   const {
@@ -39,7 +40,7 @@ const PromoList = ({ selectedPromo }) => {
     const fetchPromotions = async () => {
       setIsLoading(true);
       try {
-        const items = await fetchPromoItemsSolr(`type_value_s:${slug}`, 0, 50);
+        const items = await fetchPromoItemsSolr(`type_value_s:${slug}`, 0, 10); 
         setPromoItems(items);
 
         const promoDataPromises = items.map(async (item) => {
@@ -54,6 +55,7 @@ const PromoList = ({ selectedPromo }) => {
         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 {
@@ -63,13 +65,19 @@ const PromoList = ({ selectedPromo }) => {
 
     if (slug) {
       setIsLoading(true);
-      // Reset the promoItems and promoData when slug changes
       setPromoItems([]);
       setPromoData([]);
       fetchPromotions();
     }
   }, [slug, setPromoItems, setPromoData, setIsLoading]);
 
+ 
+
+  const navigateToPromoPage = () => {
+    // Fungsi untuk menavigasikan pengguna ke halaman promo yang sesuai dengan slug
+    window.location.href = '/shop/promo/' + slug;
+  };
+
   return (
     <div className='h-[420px]'>
       <h1 className='text-h-sm md:text-h-lg font-semibold py-4'>{title}</h1>
@@ -78,14 +86,26 @@ const PromoList = ({ selectedPromo }) => {
           <LogoSpinner width={48} height={48} />
         </div>
       ) : (
-        <Swiper slidesPerView={isMobile ? 1.5 : 3.25} spaceBetween={12} freeMode>
-          {promoData?.map((promotion) => (
+        <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>
           ))}
+         <SwiperSlide>
+              <div className='rounded-lg flex items-center justify-center flex-col cursor-pointer  h-96 text-red-500 font-bold border-2 min-w-[380px] max-w-[380px] mb-[20px] sm:min-w-[330px] md:min-w-[360px] lg:min-w-[380px] xl:min-w-[380px]' onClick={navigateToPromoPage}>
+                <ChevronRightIcon className="w-48 h-48 ml-2 font-normal text-red-500 hover:text-red-400 transition duration-300 transform hover:scale-125" />
+                <span className=''>
+                  Lihat lebih banyak
+                </span>
+
+                {/* <button className="mt-4 text-black font-bold py-2 px-4 rounded min-w-[380px] max-w-[380px] mb-[20px] sm:min-w-[330px] md:min-w-[360px] lg:min-w-[380px] xl:min-w-[380px]" onClick={navigateToPromoPage}>
+                </button> */}
+              </div>
+            </SwiperSlide> 
+          
         </Swiper>
       )}
     </div>
@@ -93,3 +113,7 @@ const PromoList = ({ selectedPromo }) => {
 };
 
 export default PromoList;
+// border-radius: 0.5rem;
+//     border-width: 1px;
+//     --tw-border-opacity: 1;
+//     border-color: rgb(219 219 219 / var(--tw-border-opacity));
\ No newline at end of file
diff --git a/src-migrate/modules/promo/components/PromotinProgram.jsx b/src-migrate/modules/promo/components/PromotinProgram.jsx
index 7e042a4a..5b91d82f 100644
--- a/src-migrate/modules/promo/components/PromotinProgram.jsx
+++ b/src-migrate/modules/promo/components/PromotinProgram.jsx
@@ -20,7 +20,7 @@ const PromotionProgram = ({ selectedPromo, onSelectPromo }) => {
                   quality={100}
                   src='/images/icon_promo/diskon.svg'
                   alt=''
-                  className='h-20 w-20 rounded'
+                  className='h-12 w-12 rounded'
                 />
               </div>
               <div>
@@ -46,7 +46,7 @@ const PromotionProgram = ({ selectedPromo, onSelectPromo }) => {
                   quality={100}
                   src='/images/icon_promo/silat.svg'
                   alt=''
-                  className='h-20 w-20 rounded'
+                  className='h-12 w-12 rounded'
                 />
               </div>
               <div>
@@ -72,7 +72,7 @@ const PromotionProgram = ({ selectedPromo, onSelectPromo }) => {
                   quality={100}
                   src='/images/icon_promo/barong.svg'
                   alt=''
-                  className='h-20 w-20 rounded'
+                  className='h-12 w-12 rounded'
                 />
               </div>
               <div>
@@ -98,7 +98,7 @@ const PromotionProgram = ({ selectedPromo, onSelectPromo }) => {
                   quality={100}
                   src='/images/icon_promo/angklung.svg'
                   alt=''
-                  className='h-20 w-20 rounded'
+                  className='h-12 w-12 rounded'
                 />
               </div>
               <div >
-- 
cgit v1.2.3


From 7c61c990c7987f7c3991e74ce53eb3204e268c75 Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Wed, 26 Jun 2024 11:01:06 +0700
Subject: <iman> add sample for all promotion

---
 .../modules/promo/components/HeroDiskon.tsx        | 137 +++++++++++++++++++++
 .../modules/promo/components/PromotinProgram.jsx   |  16 +--
 2 files changed, 145 insertions(+), 8 deletions(-)
 create mode 100644 src-migrate/modules/promo/components/HeroDiskon.tsx

(limited to 'src-migrate/modules')

diff --git a/src-migrate/modules/promo/components/HeroDiskon.tsx b/src-migrate/modules/promo/components/HeroDiskon.tsx
new file mode 100644
index 00000000..6d38c763
--- /dev/null
+++ b/src-migrate/modules/promo/components/HeroDiskon.tsx
@@ -0,0 +1,137 @@
+import 'swiper/css';
+
+import Image from 'next/image';
+import { useEffect, useMemo } from 'react';
+import { useQuery } from 'react-query';
+import { Swiper, SwiperProps, SwiperSlide }  from 'swiper/react';
+
+import { getBanner } from '~/services/banner';
+import style from '../styles/hero.module.css';
+import 'swiper/css/navigation';
+import  { Autoplay, Navigation, Pagination } from 'swiper';
+
+const swiperBanner: SwiperProps = {
+  modules:[Navigation, Pagination, Autoplay],
+  autoplay: {
+    delay: 6000,
+    disableOnInteraction: false
+  },
+  loop: true,
+  className: 'h-[400px] w-full',
+  slidesPerView: 1,
+  spaceBetween: 10,
+  navigation:true,
+}
+const swiperBanner2: SwiperProps = {
+  modules: [Pagination, Autoplay],
+  autoplay: {
+    delay: 5000,
+  },
+  loop: true,
+  className: 'h-[400px] w-full',
+  slidesPerView: 1,
+  spaceBetween: 10,
+}
+
+const Hero = () => {
+  const bannerQuery = useQuery({
+    queryKey: ['banner.all-promo'],
+    queryFn: () => getBanner({ type: 'banner-promotion' })
+  })
+
+  const banners = useMemo(() => bannerQuery.data || [], [bannerQuery.data]);
+
+  useEffect(() => {
+    if (banners.length > 1) {
+      swiperBanner.slidesPerView = 1;
+      swiperBanner.loop = true;
+    }
+  }, [banners]);
+
+  return (
+    
+    <div className="grid grid-cols-3 gap-4">
+        <div className="row-span-2 h-[446px] flex items-center ">
+            <Swiper {...swiperBanner}>
+            {banners.map((banner, index) => (
+                <SwiperSlide key={index}>
+                <Image
+                    src={banner.image}
+                    alt={banner.name}
+                    width={666}
+                    height={480}
+                    className='w-[446px]  h-[446px] object-fill object-center rounded-2xl'
+                />
+                </SwiperSlide>
+            ))}
+            </Swiper>
+        </div>
+        <div className="w-[400px] h-[217px] ">
+        <Swiper {...swiperBanner2}>
+          {banners.map((banner, index) => (
+            <SwiperSlide key={index}>
+              <Image
+                src={banner.image}
+                alt={banner.name}
+                width={666}
+                height={450}
+                className='w-[400px] h-[217px] object-cover object-center rounded-2xl '
+              />
+            </SwiperSlide>
+          ))}
+        </Swiper>
+        </div>
+        <div className="w-[400px] h-[217px]">
+        <Swiper {...swiperBanner2}>
+          {banners.map((banner, index) => (
+            <SwiperSlide key={index}>
+              <Image
+                src={banner.image}
+                alt={banner.name}
+                width={666}
+                height={450}
+                className='w-[400px] h-[217px] object-cover object-center rounded-2xl'
+              />
+            </SwiperSlide>
+          ))}
+        </Swiper>
+        </div>
+        <div className="w-[400px] h-[217px]">
+            <Swiper {...swiperBanner2}>
+          {banners.map((banner, index) => (
+            <SwiperSlide key={index}>
+              <Image
+                src={banner.image}
+                alt={banner.name}
+                width={666}
+                height={450}
+                className='w-[400px] h-[217px] object-cover object-center rounded-2xl'
+              />
+            </SwiperSlide>
+          ))}
+        </Swiper>
+        </div>
+        <div className="w-[400px] h-[217px]">
+        <Swiper {...swiperBanner2}>
+          {banners.map((banner, index) => (
+            <SwiperSlide key={index}>
+              <Image
+                src={banner.image}
+                alt={banner.name}
+                width={666}
+                height={450}
+                className='w-[400px] h-[217px] object-cover object-center rounded-2xl'
+              />
+            </SwiperSlide>
+          ))}
+        </Swiper>
+        </div>
+        
+    </div>
+  
+    
+    
+  )
+}
+
+export default Hero
\ No newline at end of file
diff --git a/src-migrate/modules/promo/components/PromotinProgram.jsx b/src-migrate/modules/promo/components/PromotinProgram.jsx
index 5b91d82f..8df99099 100644
--- a/src-migrate/modules/promo/components/PromotinProgram.jsx
+++ b/src-migrate/modules/promo/components/PromotinProgram.jsx
@@ -7,8 +7,8 @@ const PromotionProgram = ({ selectedPromo, onSelectPromo }) => {
     <>
       <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'>
+        <div className='grid md:grid-cols-3 grid-cols-2 justify-between h-[90px] gap-3 items-center'>
+        {/* <div className='w-full h-full '>
             <div
               onClick={() => onSelectPromo('Diskon')}
               className={`border p-2 flex items-center gap-x-2 rounded-lg cursor-pointer ${selectedPromo === 'Diskon' ? 'bg-red-50 border-red-500 text-red-500' : 'border-gray-200 text-gray-900'}`}
@@ -34,10 +34,10 @@ const PromotionProgram = ({ selectedPromo, onSelectPromo }) => {
               </div>
             </div>
           </div> */}
-        <div className='w-full'>
+        <div className='w-full h-full  '>
             <div
               onClick={() => onSelectPromo('Bundling')}
-              className={`border p-2 flex items-center gap-x-2 rounded-lg cursor-pointer ${selectedPromo === 'Bundling' ? 'bg-red-50 border-red-500 text-red-500' : 'border-gray-200 text-gray-900'}`}
+              className={`border h-full p-2 flex items-center gap-x-2 rounded-lg cursor-pointer ${selectedPromo === 'Bundling' ? 'bg-red-50 border-red-500 text-red-500' : 'border-gray-200 text-gray-900'}`}
             >
               <div>
                 <Image
@@ -60,10 +60,10 @@ const PromotionProgram = ({ selectedPromo, onSelectPromo }) => {
               </div>
             </div>
           </div>
-          <div className='w-full'>
+          <div className='w-full h-full '>
             <div
               onClick={() => onSelectPromo('Loading')}
-              className={`border p-2 flex items-center gap-x-2 rounded-lg cursor-pointer ${selectedPromo === 'Loading' ? 'bg-red-50 border-red-500 text-red-500' : 'border-gray-200 text-gray-900'}`}
+              className={`border p-2 h-full flex items-center gap-x-2 rounded-lg cursor-pointer ${selectedPromo === 'Loading' ? 'bg-red-50 border-red-500 text-red-500' : 'border-gray-200 text-gray-900'}`}
             >
               <div>
                 <Image
@@ -86,10 +86,10 @@ const PromotionProgram = ({ selectedPromo, onSelectPromo }) => {
               </div>
             </div>
           </div>
-          <div className='w-full'>
+          <div className='w-full h-full '>
             <div
               onClick={() => onSelectPromo('Merchandise')}
-              className={`border p-2 flex items-center gap-x-2 rounded-lg cursor-pointer ${selectedPromo === 'Merchandise' ? 'bg-red-50 border-red-500 text-red-500' : 'border-gray-200 text-gray-900'}`}
+              className={`border p-2 h-full flex items-center gap-x-2 rounded-lg cursor-pointer ${selectedPromo === 'Merchandise' ? 'bg-red-50 border-red-500 text-red-500' : 'border-gray-200 text-gray-900'}`}
             >
               <div>
                 <Image
-- 
cgit v1.2.3


From eec3440fe52db85b325c600fdd393590dee906fe Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Wed, 26 Jun 2024 15:30:48 +0700
Subject: <iman> update all promotion

---
 src-migrate/modules/promo/components/Hero.tsx      |  4 +--
 src-migrate/modules/promo/components/PromoList.jsx | 37 +++++++---------------
 src-migrate/modules/promo/styles/hero.module.css   |  2 +-
 3 files changed, 14 insertions(+), 29 deletions(-)

(limited to 'src-migrate/modules')

diff --git a/src-migrate/modules/promo/components/Hero.tsx b/src-migrate/modules/promo/components/Hero.tsx
index d8bb0be4..ad1d0046 100644
--- a/src-migrate/modules/promo/components/Hero.tsx
+++ b/src-migrate/modules/promo/components/Hero.tsx
@@ -8,10 +8,10 @@ import { Swiper, SwiperProps, SwiperSlide }  from 'swiper/react';
 import { getBanner } from '~/services/banner';
 import style from '../styles/hero.module.css';
 import 'swiper/css/navigation';
-import  { Navigation, Pagination } from 'swiper';
+import  { Navigation, Pagination, Autoplay } from 'swiper';
 
 const swiperBanner: SwiperProps = {
-  modules:[Navigation, Pagination],
+  modules:[Navigation, Pagination, Autoplay],
   autoplay: {
     delay: 6000,
     disableOnInteraction: false
diff --git a/src-migrate/modules/promo/components/PromoList.jsx b/src-migrate/modules/promo/components/PromoList.jsx
index 7187e9d7..529d54a1 100644
--- a/src-migrate/modules/promo/components/PromoList.jsx
+++ b/src-migrate/modules/promo/components/PromoList.jsx
@@ -4,8 +4,9 @@ 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';
-import usePromoStore from './promoStore'; // Sesuaikan dengan path yang sesuai
+import usePromoStore from './promoStore';
 import { ChevronRightIcon } from '@heroicons/react/24/outline';
+import Link from '@/core/components/elements/Link/Link'
 
 const PromoList = ({ selectedPromo }) => {
   const {
@@ -71,16 +72,16 @@ const PromoList = ({ selectedPromo }) => {
     }
   }, [slug, setPromoItems, setPromoData, setIsLoading]);
 
- 
-
-  const navigateToPromoPage = () => {
-    // Fungsi untuk menavigasikan pengguna ke halaman promo yang sesuai dengan slug
-    window.location.href = '/shop/promo/' + slug;
-  };
-
   return (
     <div className='h-[420px]'>
-      <h1 className='text-h-sm md:text-h-lg font-semibold py-4'>{title}</h1>
+      <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} />
@@ -94,26 +95,10 @@ const PromoList = ({ selectedPromo }) => {
               </div>
             </SwiperSlide>
           ))}
-         <SwiperSlide>
-              <div className='rounded-lg flex items-center justify-center flex-col cursor-pointer  h-96 text-red-500 font-bold border-2 min-w-[380px] max-w-[380px] mb-[20px] sm:min-w-[330px] md:min-w-[360px] lg:min-w-[380px] xl:min-w-[380px]' onClick={navigateToPromoPage}>
-                <ChevronRightIcon className="w-48 h-48 ml-2 font-normal text-red-500 hover:text-red-400 transition duration-300 transform hover:scale-125" />
-                <span className=''>
-                  Lihat lebih banyak
-                </span>
-
-                {/* <button className="mt-4 text-black font-bold py-2 px-4 rounded min-w-[380px] max-w-[380px] mb-[20px] sm:min-w-[330px] md:min-w-[360px] lg:min-w-[380px] xl:min-w-[380px]" onClick={navigateToPromoPage}>
-                </button> */}
-              </div>
-            </SwiperSlide> 
-          
         </Swiper>
       )}
     </div>
   );
 };
 
-export default PromoList;
-// border-radius: 0.5rem;
-//     border-width: 1px;
-//     --tw-border-opacity: 1;
-//     border-color: rgb(219 219 219 / var(--tw-border-opacity));
\ No newline at end of file
+export default PromoList;
\ No newline at end of file
diff --git a/src-migrate/modules/promo/styles/hero.module.css b/src-migrate/modules/promo/styles/hero.module.css
index 70d725be..a5ba6ecc 100644
--- a/src-migrate/modules/promo/styles/hero.module.css
+++ b/src-migrate/modules/promo/styles/hero.module.css
@@ -1,5 +1,5 @@
 .wrapper {
-    @apply bg-warning-100/50 rounded-xl w-full h-[460px] flex;
+    @apply  rounded-xl w-full h-[460px] flex;
 }
 
 .desc-section {
-- 
cgit v1.2.3


From 595c5cd7b371c61874db47ae42819acca5fc5d16 Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Sat, 29 Jun 2024 13:46:30 +0700
Subject: <iman> update mobile view

---
 src-migrate/modules/promo/components/Hero.tsx      |  86 +++++--
 .../modules/promo/components/PromotinProgram.jsx   | 280 ++++++++++++++-------
 2 files changed, 250 insertions(+), 116 deletions(-)

(limited to 'src-migrate/modules')

diff --git a/src-migrate/modules/promo/components/Hero.tsx b/src-migrate/modules/promo/components/Hero.tsx
index ad1d0046..2701250d 100644
--- a/src-migrate/modules/promo/components/Hero.tsx
+++ b/src-migrate/modules/promo/components/Hero.tsx
@@ -8,7 +8,10 @@ import { Swiper, SwiperProps, SwiperSlide }  from 'swiper/react';
 import { getBanner } from '~/services/banner';
 import style from '../styles/hero.module.css';
 import 'swiper/css/navigation';
+import 'swiper/css/pagination';
 import  { Navigation, Pagination, Autoplay } from 'swiper';
+import MobileView from '../../../../src/core/components/views/MobileView';
+import DesktopView from '@/core/components/views/DesktopView';
 
 const swiperBanner: SwiperProps = {
   modules:[Navigation, Pagination, Autoplay],
@@ -20,8 +23,18 @@ const swiperBanner: SwiperProps = {
   className: 'h-[400px] w-full',
   slidesPerView: 1,
   spaceBetween: 10,
-  navigation:true,
+  pagination:true,
 }
+const swiperBannerMob = {
+  autoplay: {
+    delay: 6000,
+    disableOnInteraction: false,
+  },
+  modules: [Pagination, Autoplay],
+  loop: true,
+  className: 'border border-gray_r-6 min-h-full',
+  slidesPerView: 1,
+};
 
 const Hero = () => {
   const bannerQuery = useQuery({
@@ -35,33 +48,60 @@ const Hero = () => {
     if (banners.length > 1) {
       swiperBanner.slidesPerView = 1.1;
       swiperBanner.loop = true;
+      swiperBannerMobile.loop = true;
     }
   }, [banners]);
 
+  const swiperBannerMobile = {
+    ...swiperBannerMob,
+    pagination: { dynamicBullets: false, clickable: true },
+  };
+
   return (
-    <div className={style['wrapper']}>
-      <div className={style['desc-section']}>
-        <div className={style['title']}>Pasti Hemat & Untung Selama Belanja di Indoteknik.com!</div>
-        <div className='h-4' />
-        <div className={style['subtitle']}>Cari paket yang kami sediakan dengan penawaran harga & Nikmati kemudahan dalam setiap transaksi dengan fitur lengkap Pembayaran hingga barang sampai! </div>
-      </div>
+    <>
+      <DesktopView>
+        <div className={style['wrapper']}>
+          <div className={style['desc-section']}>
+            <div className={style['title']}>Pasti Hemat & Untung Selama Belanja di Indoteknik.com!</div>
+            <div className='h-4' />
+            <div className={style['subtitle']}>Cari paket yang kami sediakan dengan penawaran harga & Nikmati kemudahan dalam setiap transaksi dengan fitur lengkap Pembayaran hingga barang sampai! </div>
+          </div>
 
-      <div className={style['banner-section']}>
-        <Swiper {...swiperBanner}>
-          {banners.map((banner, index) => (
-            <SwiperSlide key={index}>
-              <Image
-                src={banner.image}
-                alt={banner.name}
-                width={666}
-                height={450}
-                className='w-full h-full object-cover object-center rounded-2xl'
-              />
-            </SwiperSlide>
-          ))}
-        </Swiper>
-      </div>
-    </div>
+          <div className={style['banner-section']}>
+            <Swiper {...swiperBanner}>
+              {banners.map((banner, index) => (
+                <SwiperSlide key={index}>
+                  <Image
+                    src={banner.image}
+                    alt={banner.name}
+                    width={666}
+                    height={450}
+                    quality={100}
+                    className='w-full h-full object-fit object-center rounded-2xl' />
+                </SwiperSlide>
+              ))}
+            </Swiper>
+          </div>
+        </div>
+      </DesktopView>
+      <MobileView>
+          <Swiper {...swiperBannerMobile}>
+            {banners?.map((banner, index) => (
+              <SwiperSlide key={index}>
+                    <Image
+                      width={439}
+                      height={150}
+                      quality={100}
+                      src={banner.image}
+                      alt={banner.name}
+                      className='w-full h-full object-cover object-center rounded-2xl'
+                    />
+              </SwiperSlide>
+            ))}
+          </Swiper>
+          
+      </MobileView>
+    </>
   )
 }
 
diff --git a/src-migrate/modules/promo/components/PromotinProgram.jsx b/src-migrate/modules/promo/components/PromotinProgram.jsx
index 8df99099..7770d372 100644
--- a/src-migrate/modules/promo/components/PromotinProgram.jsx
+++ b/src-migrate/modules/promo/components/PromotinProgram.jsx
@@ -1,118 +1,212 @@
 import React from 'react';
 import Image from 'next/image';
-import { InfoIcon } from "lucide-react"
+import { InfoIcon } from "lucide-react";
+import MobileView from '../../../../src/core/components/views/MobileView';
+import DesktopView from '@/core/components/views/DesktopView';
+import { Swiper, SwiperProps, SwiperSlide }  from 'swiper/react';
+import 'swiper/css';
 
 const PromotionProgram = ({ selectedPromo, onSelectPromo }) => {
   return (
     <>
       <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 h-[90px] gap-3 items-center'>
-        {/* <div className='w-full h-full '>
-            <div
-              onClick={() => onSelectPromo('Diskon')}
-              className={`border p-2 flex items-center gap-x-2 rounded-lg cursor-pointer ${selectedPromo === 'Diskon' ? 'bg-red-50 border-red-500 text-red-500' : 'border-gray-200 text-gray-900'}`}
-            >
-              <div>
-                <Image
-                  width={24}
-                  height={24}
-                  quality={100}
-                  src='/images/icon_promo/diskon.svg'
-                  alt=''
-                  className='h-12 w-12 rounded'
-                />
+        <DesktopView>
+          <div className='grid md:grid-cols-3 grid-cols-2 justify-between h-[90px] gap-3 items-center'>
+          {/* <div className='w-full h-full '>
+              <div
+                onClick={() => onSelectPromo('Diskon')}
+                className={`border p-2 flex items-center gap-x-2 rounded-lg cursor-pointer ${selectedPromo === 'Diskon' ? 'bg-red-50 border-red-500 text-red-500' : 'border-gray-200 text-gray-900'}`}
+              >
+                <div>
+                  <Image
+                    width={24}
+                    height={24}
+                    quality={100}
+                    src='/images/icon_promo/diskon.svg'
+                    alt=''
+                    className='h-12 w-12 rounded'
+                  />
+                </div>
+                <div>
+                  <div className='flex w-full flex-row items-center justify-start'>
+                    <h1 className={`mr-1 font-semibold text-base ${selectedPromo === 'Diskon' ? 'text-red-500' : 'text-gray-900'}`}>Spesial Diskon</h1>
+                    <InfoIcon className='mt-[1px] text-red-500' size={14} />
+                  </div>
+                  <p className={`text-xs md:text-sm ${selectedPromo === 'Diskon' ? 'text-red-500' : 'text-gray-500'}`}>
+                  Harga lebih murah dan pasti makin hemat belinya..
+                  </p>
+                </div>
               </div>
-              <div>
-                <div className='flex w-full flex-row items-center justify-start'>
-                  <h1 className={`mr-1 font-semibold text-base ${selectedPromo === 'Diskon' ? 'text-red-500' : 'text-gray-900'}`}>Spesial Diskon</h1>
-                  <InfoIcon className='mt-[1px] text-red-500' size={14} />
+            </div> */}
+            <div className='w-full h-full  '>
+              <div
+                onClick={() => onSelectPromo('Bundling')}
+                className={`border h-full p-2 flex items-center gap-x-2 rounded-lg cursor-pointer ${selectedPromo === 'Bundling' ? 'bg-red-50 border-red-500 text-red-500' : 'border-gray-200 text-gray-900'}`}
+              >
+                <div>
+                  <Image
+                    width={24}
+                    height={24}
+                    quality={100}
+                    src='/images/icon_promo/silat.svg'
+                    alt=''
+                    className='h-12 w-12 rounded'
+                  />
+                </div>
+                <div>
+                  <div className='flex w-full flex-row items-center justify-start'>
+                    <h1 className={`mr-1 font-semibold text-base ${selectedPromo === 'Bundling' ? 'text-red-500' : 'text-gray-900'}`}>Paket Silat</h1>
+                    <InfoIcon className='mt-[1px] text-red-500' size={14} />
+                  </div>
+                  <p className={`text-xs md:text-sm ${selectedPromo === 'Bundling' ? 'text-red-500' : 'text-gray-500'}`}>
+                    Pilihan bundling barang kombinasi Silat.
+                  </p>
                 </div>
-                <p className={`text-xs md:text-sm ${selectedPromo === 'Diskon' ? 'text-red-500' : 'text-gray-500'}`}>
-                Harga lebih murah dan pasti makin hemat belinya..
-                </p>
               </div>
             </div>
-          </div> */}
-        <div className='w-full h-full  '>
-            <div
-              onClick={() => onSelectPromo('Bundling')}
-              className={`border h-full p-2 flex items-center gap-x-2 rounded-lg cursor-pointer ${selectedPromo === 'Bundling' ? 'bg-red-50 border-red-500 text-red-500' : 'border-gray-200 text-gray-900'}`}
-            >
-              <div>
-                <Image
-                  width={24}
-                  height={24}
-                  quality={100}
-                  src='/images/icon_promo/silat.svg'
-                  alt=''
-                  className='h-12 w-12 rounded'
-                />
-              </div>
-              <div>
-                <div className='flex w-full flex-row items-center justify-start'>
-                  <h1 className={`mr-1 font-semibold text-base ${selectedPromo === 'Bundling' ? 'text-red-500' : 'text-gray-900'}`}>Paket Silat</h1>
-                  <InfoIcon className='mt-[1px] text-red-500' size={14} />
+            <div className='w-full h-full '>
+              <div
+                onClick={() => onSelectPromo('Loading')}
+                className={`border p-2 h-full flex items-center gap-x-2 rounded-lg cursor-pointer ${selectedPromo === 'Loading' ? 'bg-red-50 border-red-500 text-red-500' : 'border-gray-200 text-gray-900'}`}
+              >
+                <div>
+                  <Image
+                    width={24}
+                    height={24}
+                    quality={100}
+                    src='/images/icon_promo/barong.svg'
+                    alt=''
+                    className='h-12 w-12 rounded'
+                  />
+                </div>
+                <div>
+                  <div className='flex w-full flex-row items-center justify-start'>
+                    <h1 className={`mr-1 font-semibold text-base ${selectedPromo === 'Loading' ? 'text-red-500' : 'text-gray-900'}`}>Paket Barong</h1>
+                    <InfoIcon className='mt-[1px] text-red-500' size={14} />
+                  </div>
+                  <p className={`text-xs md:text-sm ${selectedPromo === 'Loading' ? 'text-red-500' : 'text-gray-500'}`}>
+                    Beli banyak barang/partai barang borong.
+                  </p>
                 </div>
-                <p className={`text-xs md:text-sm ${selectedPromo === 'Bundling' ? 'text-red-500' : 'text-gray-500'}`}>
-                  Pilihan bundling barang kombinasi Silat.
-                </p>
               </div>
             </div>
-          </div>
-          <div className='w-full h-full '>
-            <div
-              onClick={() => onSelectPromo('Loading')}
-              className={`border p-2 h-full flex items-center gap-x-2 rounded-lg cursor-pointer ${selectedPromo === 'Loading' ? 'bg-red-50 border-red-500 text-red-500' : 'border-gray-200 text-gray-900'}`}
-            >
-              <div>
-                <Image
-                  width={24}
-                  height={24}
-                  quality={100}
-                  src='/images/icon_promo/barong.svg'
-                  alt=''
-                  className='h-12 w-12 rounded'
-                />
-              </div>
-              <div>
-                <div className='flex w-full flex-row items-center justify-start'>
-                  <h1 className={`mr-1 font-semibold text-base ${selectedPromo === 'Loading' ? 'text-red-500' : 'text-gray-900'}`}>Paket Barong</h1>
-                  <InfoIcon className='mt-[1px] text-red-500' size={14} />
+            <div className='w-full h-full '>
+              <div
+                onClick={() => onSelectPromo('Merchandise')}
+                className={`border p-2 h-full flex items-center gap-x-2 rounded-lg cursor-pointer ${selectedPromo === 'Merchandise' ? 'bg-red-50 border-red-500 text-red-500' : 'border-gray-200 text-gray-900'}`}
+              >
+                <div>
+                  <Image
+                    width={24}
+                    height={24}
+                    quality={100}
+                    src='/images/icon_promo/angklung.svg'
+                    alt=''
+                    className='h-12 w-12 rounded'
+                  />
+                </div>
+                <div >
+                  <div className='flex w-full flex-row items-center justify-start '>
+                    <h1 className={`mr-1 font-semibold text-base ${selectedPromo === 'Merchandise' ? 'text-red-500' : 'text-gray-900'}`}>Paket Angklung</h1>
+                    <InfoIcon className='mt-[1px] text-red-500' size={14} />
+                  </div>
+                  <p className={`  m1 text-xs md:text-sm ${selectedPromo === 'Merchandise' ? 'text-red-500' : 'text-gray-500'}`}>
+                    Gratis barang promosi/merchandise menang langsung.
+                  </p>
                 </div>
-                <p className={`text-xs md:text-sm ${selectedPromo === 'Loading' ? 'text-red-500' : 'text-gray-500'}`}>
-                  Beli banyak barang/partai barang borong.
-                </p>
               </div>
             </div>
           </div>
-          <div className='w-full h-full '>
-            <div
-              onClick={() => onSelectPromo('Merchandise')}
-              className={`border p-2 h-full flex items-center gap-x-2 rounded-lg cursor-pointer ${selectedPromo === 'Merchandise' ? 'bg-red-50 border-red-500 text-red-500' : 'border-gray-200 text-gray-900'}`}
-            >
-              <div>
-                <Image
-                  width={24}
-                  height={24}
-                  quality={100}
-                  src='/images/icon_promo/angklung.svg'
-                  alt=''
-                  className='h-12 w-12 rounded'
-                />
+        </DesktopView>
+        <MobileView>
+          <Swiper slidesPerView={1.75} spaceBetween={10}>
+            <SwiperSlide>
+              <div className='w-full h-full  '>
+                <div
+                  onClick={() => onSelectPromo('Bundling')}
+                  className={`border h-full p-1 flex items-center gap-x-2 rounded-lg cursor-pointer ${selectedPromo === 'Bundling' ? 'bg-red-50 border-red-500 text-red-500' : 'border-gray-200 text-gray-900'}`}
+                >
+                  <div>
+                    <Image
+                      width={24}
+                      height={24}
+                      quality={100}
+                      src='/images/icon_promo/silat.svg'
+                      alt=''
+                      className='h-12 w-12 rounded'
+                    />
+                  </div>
+                  <div >
+                    <div className='flex w-full flex-row items-center  justify-start'>
+                      <h1 className={`mr-1 font-semibold text-base ${selectedPromo === 'Bundling' ? 'text-red-500' : 'text-gray-900'}`}>Paket Silat</h1>
+                      <InfoIcon className='mt-[1px] text-red-500' size={14} />
+                    </div>
+                    <p className={`text-xs md:text-sm ${selectedPromo === 'Bundling' ? 'text-red-500' : 'text-gray-500'}`}>
+                      Pilihan bundling barang kombinasi Silat.
+                    </p>
+                  </div>
+                </div>
               </div>
-              <div >
-                <div className='flex w-full flex-row items-center justify-start '>
-                  <h1 className={`mr-1 font-semibold text-base ${selectedPromo === 'Merchandise' ? 'text-red-500' : 'text-gray-900'}`}>Paket Angklung</h1>
-                  <InfoIcon className='mt-[1px] text-red-500' size={14} />
+            </SwiperSlide>
+            <SwiperSlide>
+              <div className='w-full h-full '>
+                <div
+                  onClick={() => onSelectPromo('Loading')}
+                  className={`border p-2 h-full flex items-center gap-x-2 rounded-lg cursor-pointer ${selectedPromo === 'Loading' ? 'bg-red-50 border-red-500 text-red-500' : 'border-gray-200 text-gray-900'}`}
+                >
+                  <div>
+                    <Image
+                      width={24}
+                      height={24}
+                      quality={100}
+                      src='/images/icon_promo/barong.svg'
+                      alt=''
+                      className='h-12 w-12 rounded'
+                    />
+                  </div>
+                  <div>
+                    <div className='flex w-full flex-row items-center justify-start'>
+                      <h1 className={`mr-1 font-semibold text-base ${selectedPromo === 'Loading' ? 'text-red-500' : 'text-gray-900'}`}>Paket Barong</h1>
+                      <InfoIcon className='mt-[1px] text-red-500' size={14} />
+                    </div>
+                    <p className={`text-xs md:text-sm ${selectedPromo === 'Loading' ? 'text-red-500' : 'text-gray-500'}`}>
+                      Beli banyak barang/partai barang borong.
+                    </p>
+                  </div>
                 </div>
-                <p className={`  m1 text-xs md:text-sm ${selectedPromo === 'Merchandise' ? 'text-red-500' : 'text-gray-500'}`}>
-                  Gratis barang promosi/merchandise menang langsung.
-                </p>
               </div>
-            </div>
-          </div>
-        </div>
+            </SwiperSlide>
+            <SwiperSlide>
+              <div className='w-full h-full '>
+                <div
+                  onClick={() => onSelectPromo('Merchandise')}
+                  className={`border p-2 h-full flex items-center gap-x-2 rounded-lg cursor-pointer ${selectedPromo === 'Merchandise' ? 'bg-red-50 border-red-500 text-red-500' : 'border-gray-200 text-gray-900'}`}
+                >
+                  <div>
+                    <Image
+                      width={24}
+                      height={24}
+                      quality={100}
+                      src='/images/icon_promo/angklung.svg'
+                      alt=''
+                      className='h-12 w-12 rounded'
+                    />
+                  </div>
+                  <div >
+                    <div className='flex w-full flex-row items-center justify-start '>
+                      <h1 className={`mr-1 font-semibold text-base ${selectedPromo === 'Merchandise' ? 'text-red-500' : 'text-gray-900'}`}>Paket Angklung</h1>
+                      <InfoIcon className='mt-[1px] text-red-500' size={14} />
+                    </div>
+                    <p className={`  m1 text-xs md:text-sm ${selectedPromo === 'Merchandise' ? 'text-red-500' : 'text-gray-500'}`}>
+                      Gratis barang promosi/merchandise menang langsung.
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </SwiperSlide>
+          </Swiper>
+        </MobileView>
       </div>
     </>
   );
-- 
cgit v1.2.3


From 367bf6f382392774680abcf4a5ca4b4d03915650 Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Mon, 8 Jul 2024 14:31:45 +0700
Subject: <iman> update mobile view

---
 src-migrate/modules/promo/components/FlashSale.tsx |  2 +-
 src-migrate/modules/promo/components/PromoList.jsx |  6 +-
 .../modules/promo/components/PromotinProgram.jsx   | 89 +---------------------
 src-migrate/modules/promo/components/Voucher.tsx   | 24 +++---
 4 files changed, 21 insertions(+), 100 deletions(-)

(limited to 'src-migrate/modules')

diff --git a/src-migrate/modules/promo/components/FlashSale.tsx b/src-migrate/modules/promo/components/FlashSale.tsx
index dac0365c..16cb7647 100644
--- a/src-migrate/modules/promo/components/FlashSale.tsx
+++ b/src-migrate/modules/promo/components/FlashSale.tsx
@@ -12,7 +12,7 @@ const FlashSale = dynamic(
   const FlashSalePromo = ()=> {
     return(
         <>  
-            <h1 className='text-h-sm md:text-h-lg  font-semibold py-4'>Bayar Setengahnya!</h1>
+            <h1 className='text-h-sm md:text-h-lg  font-semibold'>Bayar Setengahnya!</h1>
             <FlashSale/>
         </>
     )
diff --git a/src-migrate/modules/promo/components/PromoList.jsx b/src-migrate/modules/promo/components/PromoList.jsx
index 529d54a1..a7356d71 100644
--- a/src-migrate/modules/promo/components/PromoList.jsx
+++ b/src-migrate/modules/promo/components/PromoList.jsx
@@ -73,7 +73,7 @@ const PromoList = ({ selectedPromo }) => {
   }, [slug, setPromoItems, setPromoData, setIsLoading]);
 
   return (
-    <div className='h-[420px]'>
+    <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>
@@ -87,10 +87,10 @@ const PromoList = ({ selectedPromo }) => {
           <LogoSpinner width={48} height={48} />
         </div>
       ) : (
-        <Swiper slidesPerView={isMobile ? 1.5 : 3.25} spaceBetween={12} freeMode >
+        <Swiper slidesPerView={isMobile ? 1.2 : 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]">
+              <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>
diff --git a/src-migrate/modules/promo/components/PromotinProgram.jsx b/src-migrate/modules/promo/components/PromotinProgram.jsx
index 7770d372..33839944 100644
--- a/src-migrate/modules/promo/components/PromotinProgram.jsx
+++ b/src-migrate/modules/promo/components/PromotinProgram.jsx
@@ -5,14 +5,14 @@ import MobileView from '../../../../src/core/components/views/MobileView';
 import DesktopView from '@/core/components/views/DesktopView';
 import { Swiper, SwiperProps, SwiperSlide }  from 'swiper/react';
 import 'swiper/css';
+import useDevice from '@/core/hooks/useDevice';
 
 const PromotionProgram = ({ selectedPromo, onSelectPromo }) => {
+  const { isMobile } = useDevice();
   return (
     <>
       <div className="text-h-sm md:text-h-lg font-semibold py-4">Serba Serbi Promo</div>
       <div className='px-4 sm:px-0'>
-        <DesktopView>
-          <div className='grid md:grid-cols-3 grid-cols-2 justify-between h-[90px] gap-3 items-center'>
           {/* <div className='w-full h-full '>
               <div
                 onClick={() => onSelectPromo('Diskon')}
@@ -39,88 +39,8 @@ const PromotionProgram = ({ selectedPromo, onSelectPromo }) => {
                 </div>
               </div>
             </div> */}
-            <div className='w-full h-full  '>
-              <div
-                onClick={() => onSelectPromo('Bundling')}
-                className={`border h-full p-2 flex items-center gap-x-2 rounded-lg cursor-pointer ${selectedPromo === 'Bundling' ? 'bg-red-50 border-red-500 text-red-500' : 'border-gray-200 text-gray-900'}`}
-              >
-                <div>
-                  <Image
-                    width={24}
-                    height={24}
-                    quality={100}
-                    src='/images/icon_promo/silat.svg'
-                    alt=''
-                    className='h-12 w-12 rounded'
-                  />
-                </div>
-                <div>
-                  <div className='flex w-full flex-row items-center justify-start'>
-                    <h1 className={`mr-1 font-semibold text-base ${selectedPromo === 'Bundling' ? 'text-red-500' : 'text-gray-900'}`}>Paket Silat</h1>
-                    <InfoIcon className='mt-[1px] text-red-500' size={14} />
-                  </div>
-                  <p className={`text-xs md:text-sm ${selectedPromo === 'Bundling' ? 'text-red-500' : 'text-gray-500'}`}>
-                    Pilihan bundling barang kombinasi Silat.
-                  </p>
-                </div>
-              </div>
-            </div>
-            <div className='w-full h-full '>
-              <div
-                onClick={() => onSelectPromo('Loading')}
-                className={`border p-2 h-full flex items-center gap-x-2 rounded-lg cursor-pointer ${selectedPromo === 'Loading' ? 'bg-red-50 border-red-500 text-red-500' : 'border-gray-200 text-gray-900'}`}
-              >
-                <div>
-                  <Image
-                    width={24}
-                    height={24}
-                    quality={100}
-                    src='/images/icon_promo/barong.svg'
-                    alt=''
-                    className='h-12 w-12 rounded'
-                  />
-                </div>
-                <div>
-                  <div className='flex w-full flex-row items-center justify-start'>
-                    <h1 className={`mr-1 font-semibold text-base ${selectedPromo === 'Loading' ? 'text-red-500' : 'text-gray-900'}`}>Paket Barong</h1>
-                    <InfoIcon className='mt-[1px] text-red-500' size={14} />
-                  </div>
-                  <p className={`text-xs md:text-sm ${selectedPromo === 'Loading' ? 'text-red-500' : 'text-gray-500'}`}>
-                    Beli banyak barang/partai barang borong.
-                  </p>
-                </div>
-              </div>
-            </div>
-            <div className='w-full h-full '>
-              <div
-                onClick={() => onSelectPromo('Merchandise')}
-                className={`border p-2 h-full flex items-center gap-x-2 rounded-lg cursor-pointer ${selectedPromo === 'Merchandise' ? 'bg-red-50 border-red-500 text-red-500' : 'border-gray-200 text-gray-900'}`}
-              >
-                <div>
-                  <Image
-                    width={24}
-                    height={24}
-                    quality={100}
-                    src='/images/icon_promo/angklung.svg'
-                    alt=''
-                    className='h-12 w-12 rounded'
-                  />
-                </div>
-                <div >
-                  <div className='flex w-full flex-row items-center justify-start '>
-                    <h1 className={`mr-1 font-semibold text-base ${selectedPromo === 'Merchandise' ? 'text-red-500' : 'text-gray-900'}`}>Paket Angklung</h1>
-                    <InfoIcon className='mt-[1px] text-red-500' size={14} />
-                  </div>
-                  <p className={`  m1 text-xs md:text-sm ${selectedPromo === 'Merchandise' ? 'text-red-500' : 'text-gray-500'}`}>
-                    Gratis barang promosi/merchandise menang langsung.
-                  </p>
-                </div>
-              </div>
-            </div>
-          </div>
-        </DesktopView>
-        <MobileView>
-          <Swiper slidesPerView={1.75} spaceBetween={10}>
+           
+          <Swiper slidesPerView={isMobile ? 1.3 : 3} spaceBetween={10}>
             <SwiperSlide>
               <div className='w-full h-full  '>
                 <div
@@ -206,7 +126,6 @@ const PromotionProgram = ({ selectedPromo, onSelectPromo }) => {
               </div>
             </SwiperSlide>
           </Swiper>
-        </MobileView>
       </div>
     </>
   );
diff --git a/src-migrate/modules/promo/components/Voucher.tsx b/src-migrate/modules/promo/components/Voucher.tsx
index 14d3c301..397134e8 100644
--- a/src-migrate/modules/promo/components/Voucher.tsx
+++ b/src-migrate/modules/promo/components/Voucher.tsx
@@ -5,25 +5,27 @@ import { getVoucher } from '~/services/voucher'
 import style from '../styles/voucher.module.css'
 import Image from 'next/image'
 import { useToast } from '@chakra-ui/react'
+import useDevice from '@/core/hooks/useDevice';
 
-const swiperVoucher: SwiperProps = {
-  autoplay: {
-    delay: 6000,
-    disableOnInteraction: false
-  },
-  loop: false,
-  className: 'h-[160px] w-full',
-  slidesPerView: 3,
-  spaceBetween: 16
-}
 
 const Voucher = () => {
+  const { isMobile } = useDevice();
   const toast = useToast();
   const voucherQuery = useQuery({
     queryKey: ['voucher.all-voucher'],
     queryFn: getVoucher
   })
-
+  
+  const swiperVoucher: SwiperProps = {
+    autoplay: {
+      delay: 6000,
+      disableOnInteraction: false
+    },
+    loop: false,
+    className: 'h-[160px] w-full',
+    slidesPerView: isMobile ? 1.2 : 3,
+    spaceBetween: 16
+  }
   const vouchers = useMemo(() => voucherQuery.data || [], [voucherQuery.data]);
 
   const copyText = (text: string) => {
-- 
cgit v1.2.3


From aedf523be9b0faf9cdd7a2231912a074fccdb262 Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Mon, 8 Jul 2024 15:00:29 +0700
Subject: <iman> update salin voucher

---
 src-migrate/modules/promo/components/Voucher.tsx | 54 ++++++++++++++++++------
 1 file changed, 42 insertions(+), 12 deletions(-)

(limited to 'src-migrate/modules')

diff --git a/src-migrate/modules/promo/components/Voucher.tsx b/src-migrate/modules/promo/components/Voucher.tsx
index 397134e8..c978dc7b 100644
--- a/src-migrate/modules/promo/components/Voucher.tsx
+++ b/src-migrate/modules/promo/components/Voucher.tsx
@@ -7,7 +7,6 @@ import Image from 'next/image'
 import { useToast } from '@chakra-ui/react'
 import useDevice from '@/core/hooks/useDevice';
 
-
 const Voucher = () => {
   const { isMobile } = useDevice();
   const toast = useToast();
@@ -26,18 +25,50 @@ const Voucher = () => {
     slidesPerView: isMobile ? 1.2 : 3,
     spaceBetween: 16
   }
+  
   const vouchers = useMemo(() => voucherQuery.data || [], [voucherQuery.data]);
 
   const copyText = (text: string) => {
-    navigator.clipboard.writeText(text)
-    toast({
-      title: 'Salin ke papan klip',
-      description: 'Kode voucher berhasil disalin',
-      status: 'success',
-      duration: 3000,
-      isClosable: true,
-      position: 'bottom',
-    })
+    if (navigator.clipboard && navigator.clipboard.writeText) {
+      navigator.clipboard.writeText(text)
+        .then(() => {
+          toast({
+            title: 'Salin ke papan klip',
+            description: 'Kode voucher berhasil disalin',
+            status: 'success',
+            duration: 3000,
+            isClosable: true,
+            position: 'bottom',
+          })
+        })
+        .catch(() => {
+          fallbackCopyTextToClipboard(text);
+        });
+    } else {
+      fallbackCopyTextToClipboard(text);
+    }
+  }
+
+  const fallbackCopyTextToClipboard = (text: string) => {
+    const textArea = document.createElement("textarea");
+    textArea.value = text;
+    document.body.appendChild(textArea);
+    textArea.focus();
+    textArea.select();
+    try {
+      document.execCommand('copy');
+      toast({
+        title: 'Salin ke papan klip',
+        description: 'Kode voucher berhasil disalin',
+        status: 'success',
+        duration: 3000,
+        isClosable: true,
+        position: 'bottom',
+      })
+    } catch (err) {
+      console.error('Fallback: Oops, unable to copy', err);
+    }
+    document.body.removeChild(textArea);
   }
 
   return (
@@ -78,9 +109,8 @@ const Voucher = () => {
           </Swiper>
         </div>
       )}
-
     </>
   )
 }
 
-export default Voucher
\ No newline at end of file
+export default Voucher
-- 
cgit v1.2.3


From 6a9e4aaaf73677b3b0650e93560c6738781f76c2 Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Mon, 8 Jul 2024 15:13:01 +0700
Subject: <iman> update button salin voucher

---
 src-migrate/modules/promo/components/Voucher.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

(limited to 'src-migrate/modules')

diff --git a/src-migrate/modules/promo/components/Voucher.tsx b/src-migrate/modules/promo/components/Voucher.tsx
index c978dc7b..b5a25aa9 100644
--- a/src-migrate/modules/promo/components/Voucher.tsx
+++ b/src-migrate/modules/promo/components/Voucher.tsx
@@ -28,7 +28,8 @@ const Voucher = () => {
   
   const vouchers = useMemo(() => voucherQuery.data || [], [voucherQuery.data]);
 
-  const copyText = (text: string) => {
+  const copyText = (text: string, event: React.MouseEvent<HTMLButtonElement>) => {
+    event.preventDefault();
     if (navigator.clipboard && navigator.clipboard.writeText) {
       navigator.clipboard.writeText(text)
         .then(() => {
@@ -100,7 +101,7 @@ const Voucher = () => {
                         <div className={style['voucher-code-desc']}>Kode Promo</div>
                         <div className={style['voucher-code']}>{voucher.code}</div>
                       </div>
-                      <button className={style['voucher-copy']} onClick={() => copyText(voucher.code)}>Salin</button>
+                      <button className={style['voucher-copy']} onClick={(event) => copyText(voucher.code, event)}>Salin</button>
                     </div>
                   </div>
                 </div>
-- 
cgit v1.2.3


From 120804d474b12743fb7e6fe9a5a3b024e52707d7 Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Mon, 8 Jul 2024 15:16:34 +0700
Subject: <iman> update button salin voucher

---
 src-migrate/modules/promo/components/Voucher.tsx | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

(limited to 'src-migrate/modules')

diff --git a/src-migrate/modules/promo/components/Voucher.tsx b/src-migrate/modules/promo/components/Voucher.tsx
index b5a25aa9..9e28a583 100644
--- a/src-migrate/modules/promo/components/Voucher.tsx
+++ b/src-migrate/modules/promo/components/Voucher.tsx
@@ -28,8 +28,7 @@ const Voucher = () => {
   
   const vouchers = useMemo(() => voucherQuery.data || [], [voucherQuery.data]);
 
-  const copyText = (text: string, event: React.MouseEvent<HTMLButtonElement>) => {
-    event.preventDefault();
+  const copyText = (text: string) => {
     if (navigator.clipboard && navigator.clipboard.writeText) {
       navigator.clipboard.writeText(text)
         .then(() => {
@@ -53,6 +52,17 @@ const Voucher = () => {
   const fallbackCopyTextToClipboard = (text: string) => {
     const textArea = document.createElement("textarea");
     textArea.value = text;
+    // Tambahkan style untuk menyembunyikan textArea secara visual
+    textArea.style.position = 'fixed';
+    textArea.style.top = '0';
+    textArea.style.left = '0';
+    textArea.style.width = '2em';
+    textArea.style.height = '2em';
+    textArea.style.padding = '0';
+    textArea.style.border = 'none';
+    textArea.style.outline = 'none';
+    textArea.style.boxShadow = 'none';
+    textArea.style.background = 'transparent';
     document.body.appendChild(textArea);
     textArea.focus();
     textArea.select();
@@ -101,7 +111,7 @@ const Voucher = () => {
                         <div className={style['voucher-code-desc']}>Kode Promo</div>
                         <div className={style['voucher-code']}>{voucher.code}</div>
                       </div>
-                      <button className={style['voucher-copy']} onClick={(event) => copyText(voucher.code, event)}>Salin</button>
+                      <button className={style['voucher-copy']} onClick={() => copyText(voucher.code)}>Salin</button>
                     </div>
                   </div>
                 </div>
-- 
cgit v1.2.3


From 2fbf5023e0d29765458b3385f354b416d08c42c4 Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Mon, 8 Jul 2024 15:32:34 +0700
Subject: <iman> update position toast

---
 src-migrate/modules/promo/components/Voucher.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src-migrate/modules')

diff --git a/src-migrate/modules/promo/components/Voucher.tsx b/src-migrate/modules/promo/components/Voucher.tsx
index 9e28a583..89b08a01 100644
--- a/src-migrate/modules/promo/components/Voucher.tsx
+++ b/src-migrate/modules/promo/components/Voucher.tsx
@@ -38,7 +38,7 @@ const Voucher = () => {
             status: 'success',
             duration: 3000,
             isClosable: true,
-            position: 'bottom',
+            position: 'top',
           })
         })
         .catch(() => {
-- 
cgit v1.2.3


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.jsx | 104 ------------------
 src-migrate/modules/promo/components/PromoList.tsx | 122 +++++++++++++++++++++
 2 files changed, 122 insertions(+), 104 deletions(-)
 delete mode 100644 src-migrate/modules/promo/components/PromoList.jsx
 create mode 100644 src-migrate/modules/promo/components/PromoList.tsx

(limited to 'src-migrate/modules')

diff --git a/src-migrate/modules/promo/components/PromoList.jsx b/src-migrate/modules/promo/components/PromoList.jsx
deleted file mode 100644
index a7356d71..00000000
--- a/src-migrate/modules/promo/components/PromoList.jsx
+++ /dev/null
@@ -1,104 +0,0 @@
-import React, { useEffect, useState } 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';
-import usePromoStore from './promoStore';
-import { ChevronRightIcon } from '@heroicons/react/24/outline';
-import Link from '@/core/components/elements/Link/Link'
-
-const PromoList = ({ selectedPromo }) => {
-  const {
-    title,
-    slug,
-    promoItems,
-    promoData,
-    isLoading,
-    setTitle,
-    setSlug,
-    setPromoItems,
-    setPromoData,
-    setIsLoading,
-  } = usePromoStore();
-
-  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, 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]);
-
-  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 slidesPerView={isMobile ? 1.2 : 3.25} spaceBetween={12} freeMode >
-            {promoData?.map((promotion) => (
-            <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;
\ No newline at end of file
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


From 678c5144cb7ac2a3c6bc8dc090e31313809d13a3 Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Mon, 8 Jul 2024 16:53:36 +0700
Subject: <iman> update swiper

---
 src-migrate/modules/promo/components/PromoList.jsx | 110 +++++++++++++++++++
 src-migrate/modules/promo/components/PromoList.tsx | 122 ---------------------
 2 files changed, 110 insertions(+), 122 deletions(-)
 create mode 100644 src-migrate/modules/promo/components/PromoList.jsx
 delete mode 100644 src-migrate/modules/promo/components/PromoList.tsx

(limited to 'src-migrate/modules')

diff --git a/src-migrate/modules/promo/components/PromoList.jsx b/src-migrate/modules/promo/components/PromoList.jsx
new file mode 100644
index 00000000..e6add893
--- /dev/null
+++ b/src-migrate/modules/promo/components/PromoList.jsx
@@ -0,0 +1,110 @@
+import React, { useEffect, useState } from 'react';
+import { Button, Skeleton } from '@chakra-ui/react'
+import clsxm from "~/libs/clsxm"
+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';
+import usePromoStore from './promoStore';
+import { ChevronRightIcon } from '@heroicons/react/24/outline';
+import Link from '@/core/components/elements/Link/Link'
+
+const PromoList = ({ selectedPromo }) => {
+  const {
+    title,
+    slug,
+    promoItems,
+    promoData,
+    isLoading,
+    setTitle,
+    setSlug,
+    setPromoItems,
+    setPromoData,
+    setIsLoading,
+  } = usePromoStore();
+
+  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, 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]);
+
+  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>
+      ) : (
+        <Skeleton
+        isLoaded={!isLoading}
+        className={clsxm(
+          "flex gap-x-4 overflow-x-auto px-4 md:px-0", {
+          "min-h-[340px]": promoData[0] && promoData?.length > 0
+        })}
+      >
+        {promoData?.map((promotion) => (
+          <div key={promotion.id} className="min-w-[400px] max-w-[400px]">
+            <ProductPromoCard promotion={promotion}  />
+          </div>
+        ))}
+      </Skeleton>
+      )}
+    </div>
+  );
+};
+
+export default PromoList;
\ No newline at end of file
diff --git a/src-migrate/modules/promo/components/PromoList.tsx b/src-migrate/modules/promo/components/PromoList.tsx
deleted file mode 100644
index 1b359857..00000000
--- a/src-migrate/modules/promo/components/PromoList.tsx
+++ /dev/null
@@ -1,122 +0,0 @@
-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


From ffaf9994e8c47c5a32a2091b7d0949302528ee2e Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Mon, 8 Jul 2024 17:06:55 +0700
Subject: <iman> update button voucher

---
 src-migrate/modules/promo/components/Voucher.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src-migrate/modules')

diff --git a/src-migrate/modules/promo/components/Voucher.tsx b/src-migrate/modules/promo/components/Voucher.tsx
index 89b08a01..64b6b935 100644
--- a/src-migrate/modules/promo/components/Voucher.tsx
+++ b/src-migrate/modules/promo/components/Voucher.tsx
@@ -74,7 +74,7 @@ const Voucher = () => {
         status: 'success',
         duration: 3000,
         isClosable: true,
-        position: 'bottom',
+        position: 'top',
       })
     } catch (err) {
       console.error('Fallback: Oops, unable to copy', err);
-- 
cgit v1.2.3