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

Feature/all promotion

1 files changed, 26 insertions, 27 deletions

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>