<iman> update mobile view

4 files changed, 21 insertions, 100 deletions

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) => {