Merged in Feature/all-promotion (pull request #169)

Feature/all promotion

5 files changed, 92 insertions, 53 deletions

diff --git a/src-migrate/modules/promo/components/FlashSale.tsx b/src-migrate/modules/promo/components/FlashSale.tsx
index 16cb7647..c0259396 100644
--- a/src-migrate/modules/promo/components/FlashSale.tsx
+++ b/src-migrate/modules/promo/components/FlashSale.tsx
@@ -12,7 +12,6 @@ const FlashSale = dynamic(
   const FlashSalePromo = ()=> {
     return(
         <>  
-            <h1 className='text-h-sm md:text-h-lg  font-semibold'>Bayar Setengahnya!</h1>
             <FlashSale/>
         </>
     )
diff --git a/src-migrate/modules/promo/components/Hero.tsx b/src-migrate/modules/promo/components/Hero.tsx
index b6e27270..b91288dd 100644
--- a/src-migrate/modules/promo/components/Hero.tsx
+++ b/src-migrate/modules/promo/components/Hero.tsx
@@ -10,11 +10,13 @@ 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';
-import { getPromotionProgramSolr } from '~/services/promotionProgram';
+import {bannerApi} from '../../../../src/api/bannerApi'
 
 interface IPromotionProgram {
-  banner_s: string;
-  name_s: string;
+  headline_banner: string;
+  description_banner: string;
+  image: string ;
+  name: string;
 }
 
 const swiperBanner: SwiperProps = {
@@ -41,46 +43,43 @@ const swiperBannerMob = {
 };
 
 const Hero = () => {
-  const bannerQuery = useQuery({
-    queryKey: ['banner.all-promo'],
-    queryFn: getPromotionProgramSolr,
-  });
+  const heroBanner = useQuery('heroBannerSecondary', bannerApi({ type: 'banner-promotion' }))
 
   const banners: IPromotionProgram[] = useMemo(
-    () => bannerQuery.data?.response?.docs || [],
-    [bannerQuery.data]
+    () => heroBanner?.data || [],
+    [heroBanner.data]
   );
 
   const swiperBannerMobile = {
     ...swiperBannerMob,
     pagination: { dynamicBullets: false, clickable: true },
   };
+  
 
   return (
     <>
       <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.banner_s}
-                    alt={banner.name_s}
-                    width={666}
-                    height={450}
-                    quality={100}
-                    className='w-full h-full object-fit object-center rounded-2xl' />
+                <SwiperSlide key={index} className='flex flex-row'>
+                  <div className={style['desc-section']}>
+                    <div className={style['title']}>{banner.headline_banner? banner.headline_banner : "Pasti Hemat & Untung Selama Belanja di Indoteknik.com!"}</div>
+                    <div className='h-4' />
+                    <div className={style['subtitle']}>{banner.description_banner? banner.description_banner : "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']}>
+                    <Image
+                      src={banner.image}
+                      alt={banner.name}
+                      width={666}
+                      height={450}
+                      quality={100}
+                      className='w-full h-full object-fit object-center rounded-2xl' />
+                  </div>
                 </SwiperSlide>
               ))}
             </Swiper>
-          </div>
         </div>
       </DesktopView>
       <MobileView>
@@ -91,8 +90,8 @@ const Hero = () => {
                       width={439}
                       height={150}
                       quality={100}
-                      src={banner.banner_s}
-                      alt={banner.name_s}
+                      src={banner.image}
+                      alt={banner.name}
                       className='w-full h-full object-cover object-center rounded-2xl'
                     />
               </SwiperSlide>
diff --git a/src-migrate/modules/promo/components/PromoList.jsx b/src-migrate/modules/promo/components/PromoList.tsx
index e6add893..42725034 100644
--- a/src-migrate/modules/promo/components/PromoList.jsx
+++ b/src-migrate/modules/promo/components/PromoList.tsx
@@ -1,16 +1,20 @@
 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 ProductPromoCard from '../../product-promo/components/Card';
 import { fetchPromoItemsSolr } from '../../../../src/api/promoApi';
 import { Swiper, SwiperSlide } from 'swiper/react';
+import SwiperCore, { Navigation, Pagination } from 'swiper';
 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'
+import Link from "next/link"
+import { IPromotion } from '~/types/promotion';
+interface PromoListProps {
+  selectedPromo: string; // Tipe selectedPromo ditetapkan sebagai string
+}
 
-const PromoList = ({ selectedPromo }) => {
+const PromoList: React.FC<PromoListProps> = ({ selectedPromo }) => {
   const {
     title,
     slug,
@@ -24,7 +28,16 @@ const PromoList = ({ selectedPromo }) => {
     setIsLoading,
   } = usePromoStore();
 
-  const { isMobile } = useDevice();
+  const { isMobile, isDesktop } = useDevice();
+
+  const swiperBanner = {
+    modules: [Navigation],
+    className: 'h-[400px] w-full',
+    slidesPerView: isMobile ? 1.1 : 3.25,
+    spaceBetween: 10,
+    navigation:isMobile? true : false,
+    allowTouchMove:isMobile? false : true,
+  };
 
   useEffect(() => {
     if (selectedPromo === 'Bundling') {
@@ -96,11 +109,23 @@ const PromoList = ({ selectedPromo }) => {
           "min-h-[340px]": promoData[0] && promoData?.length > 0
         })}
       >
-        {promoData?.map((promotion) => (
+        {isDesktop && (
+                    <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>
+        )}
+        {isMobile && (promoData?.map((promotion: IPromotion) => (
           <div key={promotion.id} className="min-w-[400px] max-w-[400px]">
             <ProductPromoCard promotion={promotion}  />
           </div>
-        ))}
+        )))}
+        
       </Skeleton>
       )}
     </div>
diff --git a/src/core/components/elements/Navbar/NavbarDesktop.jsx b/src/core/components/elements/Navbar/NavbarDesktop.jsx
index 181eef0d..3fd6dfc3 100644
--- a/src/core/components/elements/Navbar/NavbarDesktop.jsx
+++ b/src/core/components/elements/Navbar/NavbarDesktop.jsx
@@ -19,6 +19,7 @@ import DesktopView from '../../views/DesktopView';
 import Link from '../Link/Link';
 import NavbarUserDropdown from './NavbarUserDropdown';
 import NextImage from 'next/image';
+import style from "./style/NavbarDesktop.module.css";
 
 const Search = dynamic(() => import('./Search'), { ssr: false });
 const TopBanner = dynamic(() => import('./TopBanner'), { ssr: false });
@@ -170,45 +171,46 @@ const NavbarDesktop = () => {
               </div>
             </button>
             <div className='w-6/12 flex px-1 divide-x divide-gray_r-6'>
-              <Link
-                href='/shop/promo'
-                className={`${
-                  router.asPath === '/shop/promo' && 'bg-gray_r-3'
-                } p-4 flex-1 flex justify-center items-center !text-gray_r-12/80 hover:bg-gray_r-3 idt-transition`}
-                // className='p-4 flex-1 flex justify-center items-center !text-gray_r-12/80 hover:bg-gray_r-3 idt-transition'
-                target='_blank'
-                rel='noreferrer'
-              >
-                Semua Promo
-              </Link>
+            <Link
+              href="/shop/promo"
+              className={`${
+                router.asPath === '/shop/promo' && 'bg-gray_r-3'
+              } p-4 flex-1 flex justify-between items-center !text-gray_r-12/80 hover:bg-gray_r-3 idt-transition group`}
+              target="_blank"
+              rel="noreferrer"
+            >
+              <p className="group-hover:scale-105 group-hover:text-red-500 transition-transform duration-200">Semua Promo</p>
+              <p className={`rounded bg-red-500 font-bold text-white text-[10px] w-auto inline-block p-[2px] group-hover:scale-105 transition-transform duration-200 ${style.blink}`}>NEW!</p>
+            </Link>
+
               <Link
                 href='/shop/brands'
-                className={`${
+                className={`${  
                   router.asPath === '/shop/brands' && 'bg-gray_r-3'
-                } p-4 flex-1 flex justify-center items-center !text-gray_r-12/80 hover:bg-gray_r-3 idt-transition`}
+                } p-4 flex-1 flex justify-center items-center !text-gray_r-12/80 hover:bg-gray_r-3 idt-transition group`}
                 target='_blank'
                 rel='noreferrer'
               >
-                Semua Brand
+               <p className="group-hover:scale-105 group-hover:text-red-500 transition-transform duration-200">Semua Brand</p>
               </Link>
               <Link
                 href='/shop/search?orderBy=stock'
                 className={`${
                   router.asPath === '/shop/search?orderBy=stock' &&
                   'bg-gray_r-3'
-                } p-4 flex-1 flex justify-center items-center !text-gray_r-12/80 hover:bg-gray_r-3 idt-transition`}
+                } p-4 flex-1 flex justify-center items-center !text-gray_r-12/80 hover:bg-gray_r-3 idt-transition group`}
                 target='_blank'
                 rel='noreferrer'
               >
-                Ready Stock
+                <p className="group-hover:scale-105 group-hover:text-red-500 transition-transform duration-200">Ready Stock</p>
               </Link>
               <Link
                 href='https://blog.indoteknik.com/'
-                className='p-4 flex-1 flex justify-center items-center !text-gray_r-12/80 hover:bg-gray_r-3 idt-transition'
+                className='p-4 flex-1 flex justify-center items-center !text-gray_r-12/80 hover:bg-gray_r-3 idt-transition group'
                 target='_blank'
                 rel='noreferrer noopener'
               >
-                Blog Indoteknik
+                <p className="group-hover:scale-105 group-hover:text-red-500 transition-transform duration-200">Blog Indoteknik</p>
               </Link>
               {/* <Link
                 href='/video'
diff --git a/src/core/components/elements/Navbar/style/NavbarDesktop.module.css b/src/core/components/elements/Navbar/style/NavbarDesktop.module.css
new file mode 100644
index 00000000..9cddb127
--- /dev/null
+++ b/src/core/components/elements/Navbar/style/NavbarDesktop.module.css
@@ -0,0 +1,14 @@
+/* navbarDesktop.module.css */
+@keyframes blink {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0;
+  }
+}
+
+.blink {
+  animation: blink 0.8s infinite;
+}
+