diff options
Diffstat (limited to 'src/lib/promotinProgram/components/HomePage.jsx')
| -rw-r--r-- | src/lib/promotinProgram/components/HomePage.jsx | 152 |
1 files changed, 100 insertions, 52 deletions
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> + ) ) } |