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

---
 .../modules/promo/components/PromotinProgram.jsx   | 95 ++++++++++++++++++++++
 1 file changed, 95 insertions(+)
 create mode 100644 src-migrate/modules/promo/components/PromotinProgram.jsx

(limited to 'src-migrate/modules/promo/components/PromotinProgram.jsx')

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 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/PromotinProgram.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src-migrate/modules/promo/components/PromotinProgram.jsx')

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 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/promo/components/PromotinProgram.jsx')

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 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/PromotinProgram.jsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

(limited to 'src-migrate/modules/promo/components/PromotinProgram.jsx')

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

---
 src-migrate/modules/promo/components/PromotinProgram.jsx | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

(limited to 'src-migrate/modules/promo/components/PromotinProgram.jsx')

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 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

---
 .../modules/promo/components/PromotinProgram.jsx   | 280 ++++++++++++++-------
 1 file changed, 187 insertions(+), 93 deletions(-)

(limited to 'src-migrate/modules/promo/components/PromotinProgram.jsx')

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

---
 .../modules/promo/components/PromotinProgram.jsx   | 89 +---------------------
 1 file changed, 4 insertions(+), 85 deletions(-)

(limited to 'src-migrate/modules/promo/components/PromotinProgram.jsx')

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>
     </>
   );
-- 
cgit v1.2.3