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 +++++++++++++ .../promotinProgram/components/PromotionType.jsx | 110 +++++++++++++++++++++ 2 files changed, 179 insertions(+) create mode 100644 src/lib/promotinProgram/components/HomePage.jsx create mode 100644 src/lib/promotinProgram/components/PromotionType.jsx (limited to 'src/lib/promotinProgram/components') 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 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 ( +
+ {promos.map((promo) => ( +
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' + } `} + > +
+
+ +
+
+

{promo.title}

+ {isModal == true &&

{promo.description}

} +
+
+
+ //
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' + // } `} + // > + //
+ //
+ // + //
+ //
+ //

{promo.title}

+ // {/*

{promo.description}

*/} + //
+ //
+ //
+ ))} +
+ ) +} + +export default PromotionType -- 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 +++++++----- .../promotinProgram/components/PromotionType.jsx | 254 +++++++++++++++------ 2 files changed, 290 insertions(+), 116 deletions(-) (limited to 'src/lib/promotinProgram/components') 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 ? ( + + ) : ( + + )} +
+ ))} +
-
+ ) ) } diff --git a/src/lib/promotinProgram/components/PromotionType.jsx b/src/lib/promotinProgram/components/PromotionType.jsx index 371aa952..a6382cb1 100644 --- a/src/lib/promotinProgram/components/PromotionType.jsx +++ b/src/lib/promotinProgram/components/PromotionType.jsx @@ -1,47 +1,72 @@ import React, { useEffect, useState } from 'react' import Image from '@/core/components/elements/Image/Image' +import BottomPopup from '@/core/components/elements/Popup/BottomPopup' +import { Tabs } from 'flowbite-react' +import CountDown from '@/core/components/elements/CountDown/CountDown' +import CountDown2 from '@/core/components/elements/CountDown/CountDown2' -const PromotionType = ({ isModal = true }) => { +const PromotionType = ({ isModal = false }) => { const [selectedPromo, setSelectedPromo] = useState(null) + const [promotionType, setPromotionType] = useState(false) + const promos = [ { id: 1, - title: 'Promo 1', + title: 'Promo Bundling', description: 'Deskripsi Promo 1', - image: '/path/to/image1.jpg' + image: '/path/to/image1.jpg', + type: 'Promo Bundling' }, { id: 2, - title: 'Promo 2', + title: 'Promo Special', description: 'Deskripsi Promo 2', - image: '/path/to/image2.jpg' + image: '/path/to/image2.jpg', + type: 'Promo Special' }, { id: 3, - title: 'Promo 3', + title: 'Promo Free Merchandise', description: 'Deskripsi Promo 3', - image: '/path/to/image3.jpg' + image: '/path/to/image3.jpg', + type: 'Promo Free Merchandise' }, { id: 4, - title: 'Promo 1', + title: 'Promo 4', description: 'Deskripsi Promo 1', - image: '/path/to/image1.jpg' + image: '/path/to/image1.jpg', + type: 'Promo Bundling' }, { id: 5, - title: 'Promo 2', + title: 'Promo 5', description: 'Deskripsi Promo 2', - image: '/path/to/image2.jpg' + image: '/path/to/image2.jpg', + type: 'Promo Bundling' }, { id: 6, - title: 'Promo 3', + title: 'Promo 6', description: 'Deskripsi Promo 3', - image: '/path/to/image3.jpg' + image: '/path/to/image3.jpg', + type: 'Promo Special' } ] + + const [activeTitle, setActiveTitle] = useState(promos[0].type) + + const groupingData = promos.reduce((groups, item) => { + const promoType = item.type + if (!groups[promoType]) { + groups[promoType] = [] + } + groups[promoType].push(item) + + return groups + }, {}) + const handlePromoClick = (promoId) => { if (promoId == selectedPromo) { setSelectedPromo(null) @@ -49,60 +74,161 @@ const PromotionType = ({ isModal = true }) => { setSelectedPromo(promoId) } } + + const handlePopUp = () => { + if(isModal == false){ + setPromotionType(true) + } + } return ( -
- {promos.map((promo) => ( -
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' - } `} - > -
-
- -
-
-

{promo.title}

- {isModal == true &&

{promo.description}

} +
+
+ +
+ Promo Tersedia + +
+
+
+ {isModal === true ? ( +
+
+ {Object.keys(groupingData).map((index) => { + return ( + <> + + + ) + })}
+ {activeTitle && + groupingData[activeTitle].map((item, i) => ( +
handlePromoClick(item.id)} + className={`border border-solid bg-white mb-5 w-full hover:cursor-pointer ${ + selectedPromo + ? selectedPromo === item.id + ? 'opacity-100 border-red-500 bg-red-100' + : 'opacity-50 pointer-events-none' + : 'opacity-100' + } `} + > +
+
+ +
+
+
+
Waktu Tersisa
+
+ +
+
+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut nibh at arcu + commodo auctor. Maecenas efficitur, ipsum sed mollis fermentum, nulla sem ada lah ini ditu kamu dia merek +

+
Rp. 999.000
+
+
+
+ ))}
-
- //
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' - // } `} - // > - //
- //
- // - //
- //
- //

{promo.title}

- // {/*

{promo.description}

*/} - //
- //
- //
- ))} + ) : ( + promos.map((promo, index) => { + if (index > 2) { + return null + } else { + if (index === 2) { + return ( + <> +
setPromotionType(true)} + className={` border border-solid bg-white mb-5 w-full hover:cursor-pointer opacity-100 flex flex-col justify-center items-center`} + > +
+
+ +
+
+ + Lihat Promo Lainya +
+ + ) + } + return ( + <> +
setPromotionType(true)} + className={`border border-solid bg-white mb-5 w-full hover:cursor-pointer`} + > +
+
+ +
+
+
{promo.title}
+

Lorem ipsum dolor sit amet, consectetur ...

+
999900
+
+ +
+
+
+
+ + ) + } + }) + )} + setPromotionType(false)} + > +
+ +
+ +
) } -- 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') 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') 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 From d2ac3371d30464801924539350ddb50eb42eb007 Mon Sep 17 00:00:00 2001 From: "HATEC\\SPVDEV001" Date: Wed, 21 Jun 2023 13:19:30 +0700 Subject: handling cart --- .../promotinProgram/components/PromotionType.jsx | 37 ++++++++++++++++++---- 1 file changed, 31 insertions(+), 6 deletions(-) (limited to 'src/lib/promotinProgram/components') diff --git a/src/lib/promotinProgram/components/PromotionType.jsx b/src/lib/promotinProgram/components/PromotionType.jsx index a6382cb1..8c31cf0d 100644 --- a/src/lib/promotinProgram/components/PromotionType.jsx +++ b/src/lib/promotinProgram/components/PromotionType.jsx @@ -46,6 +46,20 @@ const PromotionType = ({ isModal = false }) => { image: '/path/to/image2.jpg', type: 'Promo Bundling' }, + { + id: 7, + title: 'Promo 5', + description: 'Deskripsi Promo 2', + image: '/path/to/image2.jpg', + type: 'Promo Bundling' + }, + { + id: 8, + title: 'Promo 5', + description: 'Deskripsi Promo 2', + image: '/path/to/image2.jpg', + type: 'Promo Bundling' + }, { id: 6, title: 'Promo 6', @@ -76,12 +90,12 @@ const PromotionType = ({ isModal = false }) => { } const handlePopUp = () => { - if(isModal == false){ + if (isModal == false) { setPromotionType(true) } } return ( -
+
@@ -144,9 +158,15 @@ const PromotionType = ({ isModal = false }) => {

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut nibh at arcu - commodo auctor. Maecenas efficitur, ipsum sed mollis fermentum, nulla sem ada lah ini ditu kamu dia merek + commodo auctor. Maecenas efficitur, ipsum sed mollis fermentum, nulla sem + ada lah ini ditu kamu dia merek

-
Rp. 999.000
+
+
Rp. 999.000
+
+
+999 Produk Terjual
+
+
@@ -157,7 +177,7 @@ const PromotionType = ({ isModal = false }) => { if (index > 2) { return null } else { - if (index === 2) { + if (index === 2 && promos.length > 2) { return ( <>
{
{promo.title}
-

Lorem ipsum dolor sit amet, consectetur ...

+

+ Lorem ipsum dolor sit amet, consectetur ... +

999900
+
+
+
-- cgit v1.2.3 From 84ae09f61f05f212ec098da1fd4ed14960119527 Mon Sep 17 00:00:00 2001 From: "HATEC\\SPVDEV001" Date: Tue, 27 Jun 2023 09:07:22 +0700 Subject: promotion detail --- .../promotinProgram/components/PromotionType.jsx | 471 +++++++++++---------- 1 file changed, 253 insertions(+), 218 deletions(-) (limited to 'src/lib/promotinProgram/components') diff --git a/src/lib/promotinProgram/components/PromotionType.jsx b/src/lib/promotinProgram/components/PromotionType.jsx index 8c31cf0d..9f9fdc33 100644 --- a/src/lib/promotinProgram/components/PromotionType.jsx +++ b/src/lib/promotinProgram/components/PromotionType.jsx @@ -1,78 +1,40 @@ import React, { useEffect, useState } from 'react' import Image from '@/core/components/elements/Image/Image' import BottomPopup from '@/core/components/elements/Popup/BottomPopup' -import { Tabs } from 'flowbite-react' -import CountDown from '@/core/components/elements/CountDown/CountDown' import CountDown2 from '@/core/components/elements/CountDown/CountDown2' +import currencyFormat from '@/core/utils/currencyFormat' +import odooApi from '@/core/api/odooApi' -const PromotionType = ({ isModal = false }) => { +const PromotionType = ({ + isModal = false, + variantId, + setPromotionActiveId, + promotionActiveId, + quantity +}) => { const [selectedPromo, setSelectedPromo] = useState(null) + console.log('quantity', quantity) + const [promotionType, setPromotionType] = useState(false) + const [promos, setPromotionList] = useState(null) + const [activeTitle, setActiveTitle] = useState(null) - const promos = [ - { - id: 1, - title: 'Promo Bundling', - description: 'Deskripsi Promo 1', - image: '/path/to/image1.jpg', - type: 'Promo Bundling' - }, - { - id: 2, - title: 'Promo Special', - description: 'Deskripsi Promo 2', - image: '/path/to/image2.jpg', - type: 'Promo Special' - }, - { - id: 3, - title: 'Promo Free Merchandise', - description: 'Deskripsi Promo 3', - image: '/path/to/image3.jpg', - type: 'Promo Free Merchandise' - }, - { - id: 4, - title: 'Promo 4', - description: 'Deskripsi Promo 1', - image: '/path/to/image1.jpg', - type: 'Promo Bundling' - }, - { - id: 5, - title: 'Promo 5', - description: 'Deskripsi Promo 2', - image: '/path/to/image2.jpg', - type: 'Promo Bundling' - }, - { - id: 7, - title: 'Promo 5', - description: 'Deskripsi Promo 2', - image: '/path/to/image2.jpg', - type: 'Promo Bundling' - }, - { - id: 8, - title: 'Promo 5', - description: 'Deskripsi Promo 2', - image: '/path/to/image2.jpg', - type: 'Promo Bundling' - }, - { - id: 6, - title: 'Promo 6', - description: 'Deskripsi Promo 3', - image: '/path/to/image3.jpg', - type: 'Promo Special' + useEffect(() => { + const id = variantId + const listProgram = async () => { + const programs = await getPromotionProgram({ id }) + if (programs.length > 0) { + setPromotionList(programs) + setActiveTitle(programs?.[0].type.value) + } } - ] - - const [activeTitle, setActiveTitle] = useState(promos[0].type) + listProgram() + handlePromoClick(promotionActiveId) + }, []) - const groupingData = promos.reduce((groups, item) => { - const promoType = item.type + const groupingData = promos?.reduce((groups, item) => { + const promoType = item.type.value if (!groups[promoType]) { groups[promoType] = [] } @@ -81,11 +43,15 @@ const PromotionType = ({ isModal = false }) => { return groups }, {}) - const handlePromoClick = (promoId) => { - if (promoId == selectedPromo) { - setSelectedPromo(null) - } else { - setSelectedPromo(promoId) + const handlePromoClick = (promoId, minQty) => { + if (quantity >= minQty) { + if (promoId == selectedPromo) { + setSelectedPromo(null) + setPromotionActiveId(null) + } else { + setSelectedPromo(promoId) + setPromotionActiveId(promoId) + } } } @@ -94,168 +60,237 @@ const PromotionType = ({ isModal = false }) => { setPromotionType(true) } } + return ( -
-
- -
- Promo Tersedia - -
-
-
- {isModal === true ? ( -
-
- {Object.keys(groupingData).map((index) => { - return ( - <> - - - ) - })} + promos && ( + <> +
+
+ +
+ Promo Tersedia +
- {activeTitle && - groupingData[activeTitle].map((item, i) => ( -
handlePromoClick(item.id)} - className={`border border-solid bg-white mb-5 w-full hover:cursor-pointer ${ - selectedPromo - ? selectedPromo === item.id - ? 'opacity-100 border-red-500 bg-red-100' - : 'opacity-50 pointer-events-none' - : 'opacity-100' - } `} - > -
-
- -
-
-
-
Waktu Tersisa
-
- -
-
-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut nibh at arcu - commodo auctor. Maecenas efficitur, ipsum sed mollis fermentum, nulla sem - ada lah ini ditu kamu dia merek -

-
-
Rp. 999.000
-
-
+999 Produk Terjual
-
-
-
-
-
- ))}
- ) : ( - promos.map((promo, index) => { - if (index > 2) { - return null - } else { - if (index === 2 && promos.length > 2) { - return ( - <> +
+ {isModal === true ? ( +
+
+ {Object.keys(groupingData).map((index) => { + return ( + <> + + + ) + })} +
+ {activeTitle && + groupingData[activeTitle].map((item, i) => (
setPromotionType(true)} - className={` border border-solid bg-white mb-5 w-full hover:cursor-pointer opacity-100 flex flex-col justify-center items-center`} + key={i} + onClick={() => handlePromoClick(item.id, item.minimumPurchaseQty)} + className={`border border-solid mb-5 w-full hover:cursor-pointer ${ + selectedPromo + ? selectedPromo === item.id + ? 'opacity-100 border-red-500 bg-red-100' + : 'opacity-50 pointer-events-none' + : 'opacity-100' + } ${ + quantity >= item.minimumPurchaseQty ? '' : 'opacity-50 pointer-events-none' + } `} > -
-
- +
+
+ {item.name} +
+
+
+
+ Waktu Tersisa +
+
+ +
+
+

{item.name}

+
+ {item.type.value === 'bundling' && ( + <> +
+
Gratis
+
+ {currencyFormat(item.price.priceDiscount)} +
+
+ + )} + {item.type.value === 'special_price' && ( + <> +
+
{currencyFormat(item.price.priceDiscount)}
+
+ + )} + {item.type.value === 'discount_loading' && ( + <> +
+
+ {currencyFormat(item.price.priceDiscount)} +
+
+ {quantity < item.minimumPurchaseQty + ? 'Tambah ' + + (parseInt(item.minimumPurchaseQty) - parseInt(quantity)) + + ' lagi' + : ''} +
+
+ + )} +
- - Lihat Promo Lainya
- - ) - } - return ( - <> -
setPromotionType(true)} - className={`border border-solid bg-white mb-5 w-full hover:cursor-pointer`} - > -
-
- -
-
-
{promo.title}
-

- Lorem ipsum dolor sit amet, consectetur ... -

-
999900
-
-
+ ))} +
+ ) : ( + promos.map((promo, index) => { + if (index > 2) { + return null + } else { + if (index === 2 && promos.length > 2) { + return ( + <> +
setPromotionType(true)} + className={` border border-solid bg-white mb-5 w-full hover:cursor-pointer opacity-100 flex flex-col justify-center items-center`} + > +
+
+ +
+
+ + Lihat Promo Lainya
-
- + + ) + } + return ( + <> +
setPromotionType(true)} + className={`border border-solid bg-white mb-5 w-full hover:cursor-pointer`} + > +
+
+ {promo.name} +
+
+
{promo.type.label}
+

{promo.name}

+
+ {currencyFormat(promo.price.priceDiscount)} +
+ {/*
+
+
*/} +
+ +
+
-
-
- - ) - } - }) - )} - setPromotionType(false)} - > -
- + + ) + } + }) + )} + setPromotionType(false)} + > +
+ +
+
- -
-
+
+ + ) ) } +const getPromotionProgram = async ({ id }) => { + const listProgram = await odooApi('GET', `/api/v1/product_variant/${id}/promotions`) + + return listProgram +} + +const componentHarga = ({ type }) => { + console.log('saemm,,', type) + if (type === 'bundling') { + return ( + <> +
+
+ {item.type.value === 'bundling' ? currencyFormat(item.price.priceDiscount) : ''} +
+ {/*
+
+ {' '} + +999 Produk Terjual +
+
*/} +
+ + ) + } else if (type === 'promotion_loading') { + } else if (type === 'special_price') { + } +} + export default PromotionType -- cgit v1.2.3 From 927022b91855dba6d64365b68b4d20551256e7db Mon Sep 17 00:00:00 2001 From: "HATEC\\SPVDEV001" Date: Tue, 27 Jun 2023 16:47:16 +0700 Subject: product detail mobile & cart --- .../promotinProgram/components/PromotionType.jsx | 35 ++-------------------- 1 file changed, 3 insertions(+), 32 deletions(-) (limited to 'src/lib/promotinProgram/components') diff --git a/src/lib/promotinProgram/components/PromotionType.jsx b/src/lib/promotinProgram/components/PromotionType.jsx index 9f9fdc33..474e0fc2 100644 --- a/src/lib/promotinProgram/components/PromotionType.jsx +++ b/src/lib/promotinProgram/components/PromotionType.jsx @@ -4,6 +4,7 @@ import BottomPopup from '@/core/components/elements/Popup/BottomPopup' import CountDown2 from '@/core/components/elements/CountDown/CountDown2' import currencyFormat from '@/core/utils/currencyFormat' import odooApi from '@/core/api/odooApi' +import { getPromotionProgram } from '../api/homepageApi' const PromotionType = ({ isModal = false, @@ -14,11 +15,10 @@ const PromotionType = ({ }) => { const [selectedPromo, setSelectedPromo] = useState(null) - console.log('quantity', quantity) - const [promotionType, setPromotionType] = useState(false) const [promos, setPromotionList] = useState(null) const [activeTitle, setActiveTitle] = useState(null) + console.log('promoactiveid', promotionActiveId) useEffect(() => { const id = variantId @@ -30,7 +30,7 @@ const PromotionType = ({ } } listProgram() - handlePromoClick(promotionActiveId) + setSelectedPromo(promotionActiveId) }, []) const groupingData = promos?.reduce((groups, item) => { @@ -264,33 +264,4 @@ const PromotionType = ({ ) } -const getPromotionProgram = async ({ id }) => { - const listProgram = await odooApi('GET', `/api/v1/product_variant/${id}/promotions`) - - return listProgram -} - -const componentHarga = ({ type }) => { - console.log('saemm,,', type) - if (type === 'bundling') { - return ( - <> -
-
- {item.type.value === 'bundling' ? currencyFormat(item.price.priceDiscount) : ''} -
- {/*
-
- {' '} - +999 Produk Terjual -
-
*/} -
- - ) - } else if (type === 'promotion_loading') { - } else if (type === 'special_price') { - } -} - export default PromotionType -- cgit v1.2.3 From c4ff871551cfbf3ed759b3d7be735d7039edb6f5 Mon Sep 17 00:00:00 2001 From: "HATEC\\SPVDEV001" Date: Fri, 30 Jun 2023 14:58:05 +0700 Subject: cart --- src/lib/promotinProgram/components/PromotionType.jsx | 1 - 1 file changed, 1 deletion(-) (limited to 'src/lib/promotinProgram/components') diff --git a/src/lib/promotinProgram/components/PromotionType.jsx b/src/lib/promotinProgram/components/PromotionType.jsx index 474e0fc2..0e36d2c1 100644 --- a/src/lib/promotinProgram/components/PromotionType.jsx +++ b/src/lib/promotinProgram/components/PromotionType.jsx @@ -18,7 +18,6 @@ const PromotionType = ({ const [promotionType, setPromotionType] = useState(false) const [promos, setPromotionList] = useState(null) const [activeTitle, setActiveTitle] = useState(null) - console.log('promoactiveid', promotionActiveId) useEffect(() => { const id = variantId -- cgit v1.2.3 From cb69cf4e6633bb9192cd7bdc0a0063541f67102f Mon Sep 17 00:00:00 2001 From: "HATEC\\SPVDEV001" Date: Wed, 5 Jul 2023 17:01:24 +0700 Subject: promotion program cart dan variant --- .../promotinProgram/components/PromotionType.jsx | 76 ++++++++++++++++------ 1 file changed, 57 insertions(+), 19 deletions(-) (limited to 'src/lib/promotinProgram/components') diff --git a/src/lib/promotinProgram/components/PromotionType.jsx b/src/lib/promotinProgram/components/PromotionType.jsx index 0e36d2c1..44d1b524 100644 --- a/src/lib/promotinProgram/components/PromotionType.jsx +++ b/src/lib/promotinProgram/components/PromotionType.jsx @@ -11,13 +11,16 @@ const PromotionType = ({ variantId, setPromotionActiveId, promotionActiveId, - quantity + quantity, + product = null, + setProducts = null }) => { const [selectedPromo, setSelectedPromo] = useState(null) const [promotionType, setPromotionType] = useState(false) const [promos, setPromotionList] = useState(null) const [activeTitle, setActiveTitle] = useState(null) + const [quantitySet, setQuantity] = useState(quantity) useEffect(() => { const id = variantId @@ -30,6 +33,10 @@ const PromotionType = ({ } listProgram() setSelectedPromo(promotionActiveId) + if (product) { + const variant = product.variants.find((variant) => variant.id === variantId) + setQuantity(variant.quantity) + } }, []) const groupingData = promos?.reduce((groups, item) => { @@ -43,13 +50,31 @@ const PromotionType = ({ }, {}) const handlePromoClick = (promoId, minQty) => { - if (quantity >= minQty) { + if (quantitySet >= minQty) { if (promoId == selectedPromo) { setSelectedPromo(null) setPromotionActiveId(null) + if (product) { + const updateProdcuts = () => { + let variantIndex = product.variants.findIndex((varian) => varian.id == variantId) + product.variants[variantIndex].programActive = null + + setProducts(product) + } + updateProdcuts() + } } else { setSelectedPromo(promoId) setPromotionActiveId(promoId) + if (product) { + const updateProdcuts = () => { + let variantIndex = product.variants.findIndex((varian) => varian.id == variantId) + product.variants[variantIndex].programActive = promoId + + setProducts(product) + } + updateProdcuts() + } } } } @@ -108,7 +133,9 @@ const PromotionType = ({ : 'opacity-50 pointer-events-none' : 'opacity-100' } ${ - quantity >= item.minimumPurchaseQty ? '' : 'opacity-50 pointer-events-none' + quantitySet >= item.minimumPurchaseQty + ? '' + : 'opacity-50 pointer-events-none' } `} >
@@ -130,20 +157,30 @@ const PromotionType = ({

{item.name}

- {item.type.value === 'bundling' && ( - <> -
-
Gratis
-
- {currencyFormat(item.price.priceDiscount)} + {/* {item.type.value === 'bundling' && ( + <> */} +
+
+
+ {currencyFormat(item.totalSavings)} +
+
Gratis
+
+
+ {quantitySet < item.minimumPurchaseQty + ? 'Tambah ' + + (parseInt(item.minimumPurchaseQty) - + parseInt(quantitySet)) + + ' lagi' + : ''}
- - )} - {item.type.value === 'special_price' && ( + {/* + )} */} + {/* {item.type.value === 'special_price' && ( <>
-
{currencyFormat(item.price.priceDiscount)}
+
{currencyFormat(item.totalSavings)}
)} @@ -151,18 +188,19 @@ const PromotionType = ({ <>
- {currencyFormat(item.price.priceDiscount)} + {currencyFormat(item.totalSavings)}
- {quantity < item.minimumPurchaseQty + {quantitySet < item.minimumPurchaseQty ? 'Tambah ' + - (parseInt(item.minimumPurchaseQty) - parseInt(quantity)) + + (parseInt(item.minimumPurchaseQty) - + parseInt(quantitySet)) + ' lagi' : ''}
- )} + )} */}
@@ -224,7 +262,7 @@ const PromotionType = ({
{promo.type.label}

{promo.name}

- {currencyFormat(promo.price.priceDiscount)} + {/* {currencyFormat(promo.totalSavings)} */}
{/*
@@ -252,7 +290,7 @@ const PromotionType = ({ variantId={variantId} setPromotionActiveId={setPromotionActiveId} promotionActiveId={promotionActiveId} - quantity={quantity} + quantity={quantitySet} >
-- cgit v1.2.3 From ead27f576ea73bb4625fea839ee78c4a8db0d4e9 Mon Sep 17 00:00:00 2001 From: "HATEC\\SPVDEV001" Date: Thu, 6 Jul 2023 10:21:50 +0700 Subject: variant page --- src/lib/promotinProgram/components/PromotionType.jsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'src/lib/promotinProgram/components') diff --git a/src/lib/promotinProgram/components/PromotionType.jsx b/src/lib/promotinProgram/components/PromotionType.jsx index 44d1b524..ad7185e3 100644 --- a/src/lib/promotinProgram/components/PromotionType.jsx +++ b/src/lib/promotinProgram/components/PromotionType.jsx @@ -3,7 +3,6 @@ import Image from '@/core/components/elements/Image/Image' import BottomPopup from '@/core/components/elements/Popup/BottomPopup' import CountDown2 from '@/core/components/elements/CountDown/CountDown2' import currencyFormat from '@/core/utils/currencyFormat' -import odooApi from '@/core/api/odooApi' import { getPromotionProgram } from '../api/homepageApi' const PromotionType = ({ @@ -16,11 +15,10 @@ const PromotionType = ({ setProducts = null }) => { const [selectedPromo, setSelectedPromo] = useState(null) - const [promotionType, setPromotionType] = useState(false) const [promos, setPromotionList] = useState(null) const [activeTitle, setActiveTitle] = useState(null) - const [quantitySet, setQuantity] = useState(quantity) + const [quantitySet, setQuantity] = useState(null) useEffect(() => { const id = variantId @@ -36,6 +34,8 @@ const PromotionType = ({ if (product) { const variant = product.variants.find((variant) => variant.id === variantId) setQuantity(variant.quantity) + }else{ + setQuantity(quantity) } }, []) -- cgit v1.2.3