From 702f43a7190d65c2370e7019311cc26c2cc0eafd Mon Sep 17 00:00:00 2001 From: "HATEC\\SPVDEV001" Date: Tue, 6 Jun 2023 17:01:23 +0700 Subject: program promotion --- src/lib/promotinProgram/components/HomePage.jsx | 69 +++++++++++++++++++++++++ 1 file changed, 69 insertions(+) create mode 100644 src/lib/promotinProgram/components/HomePage.jsx (limited to 'src/lib/promotinProgram/components/HomePage.jsx') 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 ( +
+
+
{activeTab}
+
+ + {tabItems.map((item, index) => ( + + + + ))} + + +
+ {tabItems.map((item, index) => ( +
+ {item.content} +
+ ))} +
+
+ ) +} + +export default HomePage -- cgit v1.2.3 From eb4ae7be05ed97bd02b7f3e9cc56393f435188e2 Mon Sep 17 00:00:00 2001 From: "HATEC\\SPVDEV001" 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 ( -
-
-
{activeTab}
-
- - {tabItems.map((item, index) => ( - - - - ))} - - -
- {tabItems.map((item, index) => ( -
- {item.content} -
- ))} + activeBanner && ( +
+
+
{activeTab}
+
+
+ +
+ + {titlePromotion?.map((item, index) => ( + + + + ))} + +
+ {parentPromotions && + parentPromotions?.map((item, index) => ( +
+ {item.products ? ( + + ) : ( + + )} +
+ ))} +
-
+ ) ) } -- cgit v1.2.3 From e4b4f2c09ebd819acc204c2e58288fe9fc6294ea Mon Sep 17 00:00:00 2001 From: "HATEC\\SPVDEV001" Date: Thu, 15 Jun 2023 15:45:43 +0700 Subject: get dan delete cart --- src/lib/promotinProgram/components/HomePage.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 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 9ebd82dc..8d159899 100644 --- a/src/lib/promotinProgram/components/HomePage.jsx +++ b/src/lib/promotinProgram/components/HomePage.jsx @@ -6,7 +6,6 @@ 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') @@ -28,8 +27,9 @@ const HomePage = () => { } ) + useEffect(() => { - if (titlePromotion) { + if (titlePromotion && titlePromotion.length > 0) { setActiveTab(titlePromotion[0].name) setActiveId(titlePromotion[0].id) setparentPromotions(titlePromotion) -- cgit v1.2.3 From 637c22f1886cecf7307ced88dc951134d466a3fa Mon Sep 17 00:00:00 2001 From: "HATEC\\SPVDEV001" Date: Mon, 19 Jun 2023 15:46:03 +0700 Subject: checkout --- src/lib/promotinProgram/components/HomePage.jsx | 7 +++---- 1 file changed, 3 insertions(+), 4 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 8d159899..c0968161 100644 --- a/src/lib/promotinProgram/components/HomePage.jsx +++ b/src/lib/promotinProgram/components/HomePage.jsx @@ -27,7 +27,6 @@ const HomePage = () => { } ) - useEffect(() => { if (titlePromotion && titlePromotion.length > 0) { setActiveTab(titlePromotion[0].name) @@ -36,11 +35,11 @@ const HomePage = () => { setActiveBanner(titlePromotion[0].banner) productPromotionRefetch() } - }, [titlePromotion]) + }, [titlePromotion, productPromotionRefetch]) useEffect(() => { if (productPromotion) { - setparentPromotions(() => { + setparentPromotions((parentPromotions) => { return parentPromotions.map((title) => { if (title.id === activeId && title.products === undefined) { return { @@ -52,7 +51,7 @@ const HomePage = () => { }) }) } - }, [productPromotion, parentPromotions, activeId]) + }, [productPromotion, activeId]) const { isMobile, isDesktop } = useDevice() const handleTabClick = (id, label, banner) => { -- cgit v1.2.3