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') 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