1 files changed, 116 insertions, 0 deletions
diff --git a/src/lib/promotinProgram/components/HomePage.jsx b/src/lib/promotinProgram/components/HomePage.jsx
new file mode 100644
index 00000000..c0968161
--- /dev/null
+++ b/src/lib/promotinProgram/components/HomePage.jsx
@@ -0,0 +1,116 @@
+import React, { use, useEffect, 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'
+import odooApi from '@/core/api/odooApi'
+import { LazyLoadComponent } from 'react-lazy-load-image-component'
+import ProductSlider from '@/lib/product/components/ProductSlider'
+import { PopularProductSkeleton } from '@/components/skeleton/PopularProductSkeleton'
+
+const { useQuery } = require('react-query')
+const { getPromotionHome } = require('../api/homepageApi')
+const { getProductPromotionHome } = require('../api/homepageApi')
+
+const HomePage = () => {
+  const [activeTab, setActiveTab] = useState(null)
+  const [activeId, setActiveId] = useState(null)
+  const [activeBanner, setActiveBanner] = useState(null)
+  const [parentPromotions, setparentPromotions] = useState(null)
+
+  const { data: titlePromotion } = useQuery('titlePromotion', getPromotionHome)
+  const { data: productPromotion, refetch: productPromotionRefetch } = useQuery(
+    ['productPromotion', activeId],
+    async () => {
+      if (!activeId) return null
+      return await getProductPromotionHome({ id: activeId })
+    }
+  )
+
+  useEffect(() => {
+    if (titlePromotion && titlePromotion.length > 0) {
+      setActiveTab(titlePromotion[0].name)
+      setActiveId(titlePromotion[0].id)
+      setparentPromotions(titlePromotion)
+      setActiveBanner(titlePromotion[0].banner)
+      productPromotionRefetch()
+    }
+  }, [titlePromotion, productPromotionRefetch])
+
+  useEffect(() => {
+    if (productPromotion) {
+      setparentPromotions((parentPromotions) => {
+        return parentPromotions.map((title) => {
+          if (title.id === activeId && title.products === undefined) {
+            return {
+              ...title,
+              products: productPromotion
+            }
+          }
+          return title
+        })
+      })
+    }
+  }, [productPromotion, activeId])
+
+  const { isMobile, isDesktop } = useDevice()
+  const handleTabClick = (id, label, banner) => {
+    setActiveTab(label)
+    setActiveId(id)
+    setActiveBanner(banner)
+  }
+
+  return (
+    activeBanner && (
+      <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>
+        <div className='mb-4'>
+          <Image src={activeBanner} alt='' className='h-full w-full object-contain object-center' />
+        </div>
+        <Swiper slidesPerView={isMobile ? 3.5 : 7.5} spaceBetween={isMobile ? 12 : 20}>
+          {titlePromotion?.map((item, index) => (
+            <SwiperSlide key={index}>
+              <button
+                className={`py-1 px-2 rounded border flex justify-center items-center h-30 ${
+                  activeTab === item.name ? 'border-red-500' : 'border-gray_r-6'
+                }`}
+                onClick={() => handleTabClick(item.id, item.name, item.banner)}
+              >
+                {' '}
+                <Image
+                  src={item.icon}
+                  alt=''
+                  className='h-full w-full object-contain object-center'
+                />
+              </button>
+            </SwiperSlide>
+          ))}
+        </Swiper>
+        <div className='mt-4 relative  min-h-[150px]'>
+          {parentPromotions &&
+            parentPromotions?.map((item, index) => (
+              <div
+                key={index}
+                className={`${activeId === item.id ? 'block' : 'hidden'}  rounded-md`}
+              >
+                {item.products ? (
+                  <ProductSlider
+                    key={index}
+                    products={{
+                      products: item.products
+                    }}
+                  />
+                ) : (
+                  <PopularProductSkeleton />
+                )}
+              </div>
+            ))}
+        </div>
+      </div>
+    )
+  )
+}
+
+export default HomePage