From 84ae09f61f05f212ec098da1fd4ed14960119527 Mon Sep 17 00:00:00 2001 From: "HATEC\\SPVDEV001" Date: Tue, 27 Jun 2023 09:07:22 +0700 Subject: promotion detail --- src/lib/cart/components/Cart.jsx | 155 +++---- .../product/components/Product/ProductDesktop.jsx | 48 +-- .../promotinProgram/components/PromotionType.jsx | 471 +++++++++++---------- 3 files changed, 352 insertions(+), 322 deletions(-) (limited to 'src/lib') diff --git a/src/lib/cart/components/Cart.jsx b/src/lib/cart/components/Cart.jsx index a9113e75..cfbc3989 100644 --- a/src/lib/cart/components/Cart.jsx +++ b/src/lib/cart/components/Cart.jsx @@ -46,7 +46,7 @@ const Cart = () => { setCart(listCart) } cart() - },[]) + }, []) useEffect(() => { if (cart) { @@ -350,89 +350,100 @@ const Cart = () => { )} {products && products?.map((product) => ( - - - toggleSelected(product.id)} - checked={product?.selected} - className='accent-danger-500 w-4' - /> - - - - {product?.name} + + +
+
Promo
+
Pilih Promo Yang Tersedia Bisa lebih Hemat
+
Cek Promo
+
+ + + + + toggleSelected(product.id)} + checked={product?.selected} + className='accent-danger-500 w-4' /> - -
+ + - {product?.parent?.name} + {product?.name} -
- {product?.code}{' '} - {product?.attributes.length > 0 - ? `| ${product?.attributes.join(', ')}` - : ''} -
-
- - - updateQuantity(e.target.value, product?.id)} - onBlur={(e) => updateQuantity(e.target.value, product?.id, 'BLUR')} - /> - - - {product?.price?.discountPercentage > 0 && ( -
-
- {currencyFormat(product?.price?.price)} +
+ + {product?.parent?.name} + +
+ {product?.code}{' '} + {product?.attributes.length > 0 + ? `| ${product?.attributes.join(', ')}` + : ''}
-
- {product?.price?.discountPercentage}% +
+ + + updateQuantity(e.target.value, product?.id)} + onBlur={(e) => updateQuantity(e.target.value, product?.id, 'BLUR')} + /> + + + {product?.price?.discountPercentage > 0 && ( +
+
+ {currencyFormat(product?.price?.price)} +
+
+ {product?.price?.discountPercentage}% +
+ )} +
+ {currencyFormat(product?.price?.priceDiscount)}
- )} -
- {currencyFormat(product?.price?.priceDiscount)} -
- - -
- {currencyFormat(product?.price?.priceDiscount * product?.quantity)} -
- - -
- -
- - + + +
+ {currencyFormat(product?.price?.priceDiscount * product?.quantity)} +
+ + +
+ +
+ + + ))} diff --git a/src/lib/product/components/Product/ProductDesktop.jsx b/src/lib/product/components/Product/ProductDesktop.jsx index 25b12911..507d676c 100644 --- a/src/lib/product/components/Product/ProductDesktop.jsx +++ b/src/lib/product/components/Product/ProductDesktop.jsx @@ -28,7 +28,8 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => { const [addCartAlert, setAddCartAlert] = useState(false) const [promotionType, setPromotionType] = useState(false) - const [promotionList, setPromotionList] = useState(null) + const [promotionActiveId, setPromotionActiveId] = useState(null) + const [quantity, setQuantity] = useState(null) const getLowestPrice = useCallback(() => { const prices = product.variants.map((variant) => variant.price) @@ -38,18 +39,6 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => { return lowest }, [product]) - useEffect(() => { - if(product.variants.length == 1){ - const id = product.variants[0].id - const listProgram = async () => { - const programs = await getPromotionProgram({id}) - setPromotionList(programs) - console.log('list program', promotionList) - } - listProgram() - } - },[]) - useEffect(() => { const lowest = getLowestPrice() setLowestPrice(lowest) @@ -60,6 +49,9 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => { const variantQuantityRefs = useRef([]) const setVariantQuantityRef = (variantId) => (element) => { + if (element) { + setQuantity(element.value) + } variantQuantityRefs.current[variantId] = element } @@ -82,6 +74,7 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => { updateItemCart({ productId: variantId, quantity, + programLineId:promotionActiveId, selected: true }) setAddCartAlert(true) @@ -183,7 +176,12 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => { {product.variants.length <= 1 && (
- +
)} @@ -260,16 +258,6 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => { )} - {/*
- -
*/} {product.variants.length > 1 ? (
- setPromotionType(false)} >
- +
- + */} (
) -const getPromotionProgram = async ({id}) => { - const listProgram = await odooApi('GET', `/api/v1/product_variant/${id}/promotions`) - - return listProgram -} export default ProductDesktop 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