program promotion

6 files changed, 223 insertions, 1 deletions

diff --git a/src/core/components/elements/Popup/BottomPopup.jsx b/src/core/components/elements/Popup/BottomPopup.jsx
index 0f4088d4..829ff2a6 100644
--- a/src/core/components/elements/Popup/BottomPopup.jsx
+++ b/src/core/components/elements/Popup/BottomPopup.jsx
@@ -58,7 +58,7 @@ const BottomPopup = ({ children, active = false, title, close, className = '' })
                 className={`fixed left-1/2 -translate-x-1/2 translate-y-1/2 md:w-1/4 lg:w-1/3 border border-gray_r-6 rounded-xl z-[60] p-4 pt-0 bg-white max-h-[80vh] overflow-auto ${className}`}
               >
                 <div className='flex justify-between py-4'>
-                  <div className='font-semibold text-h-sm'>{title}</div>
+                  <div className='font-semibold text-title-sm'>{title}</div>
                   {close && (
                     <button type='button' onClick={close}>
                       <XMarkIcon className='w-5 stroke-2' />
diff --git a/src/lib/product/components/Product/ProductDesktop.jsx b/src/lib/product/components/Product/ProductDesktop.jsx
index 75b37b9d..c3addbb9 100644
--- a/src/lib/product/components/Product/ProductDesktop.jsx
+++ b/src/lib/product/components/Product/ProductDesktop.jsx
@@ -14,6 +14,7 @@ import BottomPopup from '@/core/components/elements/Popup/BottomPopup'
 import ProductCard from '../ProductCard'
 import productSimilarApi from '../../api/productSimilarApi'
 import whatsappUrl from '@/core/utils/whatsappUrl'
+import PromotionType from '@/lib/promotinProgram/components/PromotionType'
 
 const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
   const router = useRouter()
@@ -21,6 +22,7 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
   const [lowestPrice, setLowestPrice] = useState(null)
 
   const [addCartAlert, setAddCartAlert] = useState(false)
+  const [promotionType, setPromotionType] = useState(false)
 
   const getLowestPrice = useCallback(() => {
     const prices = product.variants.map((variant) => variant.price)
@@ -156,6 +158,12 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
                     )}
                   </div>
                 </div>
+                <div className='pt-3'>
+                  <div className='text-h-lg font-semibold'>Promotion Program</div>
+                  <div className='flex mt-3'>
+                    <PromotionType></PromotionType>
+                  </div>
+                </div>
               </div>
             </div>
 
@@ -229,6 +237,16 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
                 </span>
               )}
             </h3>
+            <div className='mt-5'>
+              <button
+                type='button'
+                onClick={() => setPromotionType(true)}
+                className='text-gray-900 flex items-center justify-center rounded-lg bg-white border font-medium border-gray-300  hover:bg-gray-100 py-2.5 h-[50px] w-[100%]'
+              >
+                <span className='text-left'>%</span>
+                <span className='text-left ml-5'>Makin Hemat Pakai Promo </span>
+              </button>
+            </div>
             {product.variants.length > 1 ? (
               <button
                 type='button'
@@ -402,6 +420,16 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
             </LazyLoad>
           </div>
         </BottomPopup>
+        <BottomPopup
+          className='!w-[32%]'
+          title='Pakai Promo'
+          active={promotionType}
+          close={() => setPromotionType(false)}
+        >
+          <div className='flex mt-4'>
+            <PromotionType></PromotionType>
+          </div>
+        </BottomPopup>
       </div>
     </DesktopView>
   )
diff --git a/src/lib/product/components/Product/ProductMobile.jsx b/src/lib/product/components/Product/ProductMobile.jsx
index 426fe1b8..5ed796ae 100644
--- a/src/lib/product/components/Product/ProductMobile.jsx
+++ b/src/lib/product/components/Product/ProductMobile.jsx
@@ -14,6 +14,7 @@ import { toast } from 'react-hot-toast'
 import { createSlug } from '@/core/utils/slug'
 import BottomPopup from '@/core/components/elements/Popup/BottomPopup'
 import whatsappUrl from '@/core/utils/whatsappUrl'
+import PromotionType from '@/lib/promotinProgram/components/PromotionType'
 
 const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
   const router = useRouter()
@@ -170,6 +171,13 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
       <Divider />
 
       <div className='p-4'>
+        <div className='mb-5'>
+          {/* <PromotionType></PromotionType> */}
+          <button type='button' className='text-gray-900  flex p-3 rounded-lg bg-white border border-gray-300  hover:bg-gray-100 py-2.5 w-[100%]'>
+           <span className='text-left'>%</span>
+           <span className='text-left ml-5'>Makin Hemat Pakai Promo</span>
+          </button>
+        </div>
         <div>
           <label className='flex justify-between'>
             Pilih Varian:
diff --git a/src/lib/promotinProgram/components/HomePage.jsx b/src/lib/promotinProgram/components/HomePage.jsx
new file mode 100644
index 00000000..93134117
--- /dev/null
+++ b/src/lib/promotinProgram/components/HomePage.jsx
@@ -0,0 +1,69 @@
+import React, { useState } from 'react'
+import { Swiper, SwiperSlide } from 'swiper/react'
+import 'swiper/swiper.min.css'
+import Image from '@/core/components/elements/Image/Image'
+import useDevice from '@/core/hooks/useDevice'
+
+const HomePage = () => {
+  const [activeTab, setActiveTab] = useState('Tab 1')
+
+  const { isMobile, isDesktop } = useDevice()
+  const handleTabClick = (label) => {
+    setActiveTab(label)
+  }
+
+  const tabItems = [
+    { label: 'Tab 1', content: 'Content for Tab 1' },
+    { label: 'Tab 2', content: 'Content for Tab 2' },
+    { label: 'Tab 3', content: 'Content for Tab 3' },
+    { label: 'Tab 4', content: 'Content for Tab 4' },
+    { label: 'Tab 5', content: 'Content for Tab 5' },
+    { label: 'Tab 6', content: 'Content for Tab 6' },
+    { label: 'Tab 7', content: 'Content for Tab 7' },
+    { label: 'Tab 8', content: 'Content for Tab 8' },
+    { label: 'Tab 9', content: 'Content for Tab 9' },
+    { label: 'Tab 10', content: 'Content for Tab 10' }
+  ]
+
+  return (
+    <div className='px-4 sm:px-0'>
+      <div className='flex justify-between items-center mb-4'>
+        <div className='font-medium sm:text-h-lg'>{activeTab}</div>
+      </div>
+      <Swiper slidesPerView={isMobile ? 3.5 : 7.5} spaceBetween={isMobile ? 12 : 20}>
+        {tabItems.map((item, index) => (
+          <SwiperSlide key={index}>
+            <button
+              className={`py-1 px-2 rounded border flex justify-center items-center h-30 ${
+                activeTab === item.label ? 'border-red-500' : 'border-gray_r-6'
+              }`}
+              onClick={() => handleTabClick(item.label)}
+            >
+              {' '}
+              <Image
+                src='https://erp.indoteknik.com/api/image/x_manufactures/x_logo_manufacture/10'
+                alt=''
+                className='h-full w-full object-contain object-center'
+              />
+            </button>
+          </SwiperSlide>
+        ))}
+      </Swiper>
+
+      <div className='mt-4'>
+        {tabItems.map((item, index) => (
+          <div
+            key={index}
+            className={`${
+              activeTab === item.label ? 'block' : 'hidden'
+            } bg-gray-100 p-4 rounded-md`}
+          >
+            {item.content}
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export default HomePage
diff --git a/src/lib/promotinProgram/components/PromotionType.jsx b/src/lib/promotinProgram/components/PromotionType.jsx
new file mode 100644
index 00000000..371aa952
--- /dev/null
+++ b/src/lib/promotinProgram/components/PromotionType.jsx
@@ -0,0 +1,110 @@
+import React, { useEffect, useState } from 'react'
+import Image from '@/core/components/elements/Image/Image'
+
+const PromotionType = ({ isModal = true }) => {
+  const [selectedPromo, setSelectedPromo] = useState(null)
+
+  const promos = [
+    {
+      id: 1,
+      title: 'Promo 1',
+      description: 'Deskripsi Promo 1',
+      image: '/path/to/image1.jpg'
+    },
+    {
+      id: 2,
+      title: 'Promo 2',
+      description: 'Deskripsi Promo 2',
+      image: '/path/to/image2.jpg'
+    },
+    {
+      id: 3,
+      title: 'Promo 3',
+      description: 'Deskripsi Promo 3',
+      image: '/path/to/image3.jpg'
+    },
+    {
+      id: 4,
+      title: 'Promo 1',
+      description: 'Deskripsi Promo 1',
+      image: '/path/to/image1.jpg'
+    },
+    {
+      id: 5,
+      title: 'Promo 2',
+      description: 'Deskripsi Promo 2',
+      image: '/path/to/image2.jpg'
+    },
+    {
+      id: 6,
+      title: 'Promo 3',
+      description: 'Deskripsi Promo 3',
+      image: '/path/to/image3.jpg'
+    }
+  ]
+  const handlePromoClick = (promoId) => {
+    if (promoId == selectedPromo) {
+      setSelectedPromo(null)
+    } else {
+      setSelectedPromo(promoId)
+    }
+  }
+  return (
+    <div className={`w-full ${isModal == true ? '' : 'grid grid-cols-3 gap-1'}`}>
+      {promos.map((promo) => (
+        <div
+          key={promo.id}
+          onClick={() => handlePromoClick(promo.id)}
+          className={`p-2 rounded-lg border border-solid border-gray-300 mb-5 w-full hover:cursor-pointer ${
+            selectedPromo
+              ? selectedPromo === promo.id
+                ? 'opacity-100 border-red-500 bg-red-100'
+                : 'opacity-50  pointer-events-none'
+              : 'opacity-100'
+          } `}
+        >
+          <div className={`${isModal == true ? 'flex' : ''} items-center`}>
+            <div className=''>
+              <Image
+                src='https://placehold.co/400x400.png'
+                alt=''
+                className={`flex-1 w-full object-cover rounded-md ${isModal == true ? 'h-[100px]' : ''}`}
+              />
+            </div>
+            <div className='p-2'>
+              <h2 className='text-xl font-semibold'>{promo.title}</h2>
+              {isModal == true && <p className='text-gray-500'>{promo.description}</p>}
+            </div>
+          </div>
+        </div>
+        // <div
+        //   key={promo.id}
+        //   onClick={() => handlePromoClick(promo.id)}
+        //   className={`p-2 rounded-lg border border-solid border-gray-300 mb-5 w-full hover:cursor-pointer ${
+        //     selectedPromo
+        //       ? selectedPromo === promo.id
+        //         ? 'opacity-100 border-red-400 bg-red-100'
+        //         : 'opacity-50  pointer-events-none'
+        //       : 'opacity-100'
+        //     } `}
+        // >
+        //   <div className='items-center'>
+        //     <div className=''>
+        //       <Image
+        //         src='https://placehold.co/600x600.png'
+        //         alt=''
+        //         className='flex-1 w-full object-cover rounded-md'
+        //       />
+        //     </div>
+        //     <div className='mt-1'>
+        //       <h2 className='text-xl font-semibold'>{promo.title}</h2>
+        //       {/* <p className='text-gray-500'>{promo.description}</p> */}
+        //     </div>
+        //   </div>
+        // </div>
+      ))}
+    </div>
+  )
+}
+
+export default PromotionType
diff --git a/src/pages/index.jsx b/src/pages/index.jsx
index 43a3b8c9..cd421987 100644
--- a/src/pages/index.jsx
+++ b/src/pages/index.jsx
@@ -6,6 +6,7 @@ import Seo from '@/core/components/Seo'
 import DelayRender from '@/core/components/elements/DelayRender/DelayRender'
 import { HeroBannerSkeleton } from '@/components/skeleton/BannerSkeleton'
 import { PopularProductSkeleton } from '@/components/skeleton/PopularProductSkeleton'
+import PromotinProgram from '@/lib/promotinProgram/components/HomePage'
 
 const BasicLayout = dynamic(() => import('@/core/components/layouts/BasicLayout'))
 const HeroBanner = dynamic(() => import('@/components/ui/HeroBanner'), {
@@ -71,6 +72,9 @@ export default function Home() {
             <DelayRender renderAfter={600}>
               <FlashSale />
             </DelayRender>
+            <DelayRender renderAfter={600}>
+              <PromotinProgram />
+            </DelayRender>
             <DelayRender renderAfter={1000}>
               <CategoryHomeId />
               <BannerSection />
@@ -93,6 +97,9 @@ export default function Home() {
           <DelayRender renderAfter={600}>
             <FlashSale />
           </DelayRender>
+          <DelayRender renderAfter={600}>
+              <PromotinProgram />
+            </DelayRender>
           <DelayRender renderAfter={800}>
             <PopularProduct />
           </DelayRender>