From eb4ae7be05ed97bd02b7f3e9cc56393f435188e2 Mon Sep 17 00:00:00 2001
From: "HATEC\\SPVDEV001" <tri.susilo@altama.co.id>
Date: Wed, 14 Jun 2023 13:22:20 +0700
Subject: layout promotion program di detail product dan layout modal popup

---
 src/lib/promotinProgram/components/HomePage.jsx | 152 ++++++++++++++++--------
 1 file changed, 100 insertions(+), 52 deletions(-)

(limited to 'src/lib/promotinProgram/components/HomePage.jsx')

diff --git a/src/lib/promotinProgram/components/HomePage.jsx b/src/lib/promotinProgram/components/HomePage.jsx
index 93134117..9ebd82dc 100644
--- a/src/lib/promotinProgram/components/HomePage.jsx
+++ b/src/lib/promotinProgram/components/HomePage.jsx
@@ -1,68 +1,116 @@
-import React, { useState } from 'react'
+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 ProductCard from '@/lib/product/components/ProductCard'
+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('Tab 1')
+  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) {
+      setActiveTab(titlePromotion[0].name)
+      setActiveId(titlePromotion[0].id)
+      setparentPromotions(titlePromotion)
+      setActiveBanner(titlePromotion[0].banner)
+      productPromotionRefetch()
+    }
+  }, [titlePromotion])
+
+  useEffect(() => {
+    if (productPromotion) {
+      setparentPromotions(() => {
+        return parentPromotions.map((title) => {
+          if (title.id === activeId && title.products === undefined) {
+            return {
+              ...title,
+              products: productPromotion
+            }
+          }
+          return title
+        })
+      })
+    }
+  }, [productPromotion, parentPromotions, activeId])
 
   const { isMobile, isDesktop } = useDevice()
-  const handleTabClick = (label) => {
+  const handleTabClick = (id, label, banner) => {
     setActiveTab(label)
+    setActiveId(id)
+    setActiveBanner(banner)
   }
 
-  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>
-        ))}
+    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>
-    </div>
+    )
   )
 }
 
-- 
cgit v1.2.3