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 --- src/lib/cart/components/Cart.jsx | 173 +++++++++++++++++++-- .../product/components/Product/ProductDesktop.jsx | 4 +- .../product/components/Product/ProductMobile.jsx | 11 +- src/lib/promotinProgram/api/homepageApi.js | 6 + .../promotinProgram/components/PromotionType.jsx | 35 +---- 5 files changed, 181 insertions(+), 48 deletions(-) (limited to 'src') diff --git a/src/lib/cart/components/Cart.jsx b/src/lib/cart/components/Cart.jsx index cfbc3989..29bbf080 100644 --- a/src/lib/cart/components/Cart.jsx +++ b/src/lib/cart/components/Cart.jsx @@ -7,10 +7,7 @@ import { useEffect, useState } from 'react' import { addCart, deleteItemCart, - getCart, getCartApi, - getCartnew, - getItemCart, updateItemCart } from '@/core/utils/cart' import { CheckIcon, TrashIcon } from '@heroicons/react/24/outline' @@ -27,6 +24,8 @@ import productSearchApi from '@/lib/product/api/productSearchApi' import whatsappUrl from '@/core/utils/whatsappUrl' import useAuth from '@/core/hooks/useAuth' import LogoSpinner from '@/core/components/elements/Spinner/LogoSpinner' +import { getPromotionProgram } from '@/lib/promotinProgram/api/homepageApi' +import PromotionType from '@/lib/promotinProgram/components/PromotionType' const Cart = () => { const router = useRouter() @@ -50,7 +49,21 @@ const Cart = () => { useEffect(() => { if (cart) { - setProducts(cart.products) + const processProducts = async () => { + const updatedProducts = await Promise.all( + cart.products.map(async (product) => { + const id = product.id + const program = await getPromotionProgram({ id }) + const isPromo = program.length > 0 ? 1 : 0 + return { + ...product, + isPromo + } + }) + ) + setProducts(updatedProducts) + } + processProducts() setIsLoading(false) } }, [cart]) @@ -62,6 +75,10 @@ const Cart = () => { const [deleteConfirmation, setDeleteConfirmation] = useState(null) const [productRecomendation, setProductRecomendation] = useState(null) + const [promotionType, setPromotionType] = useState(null) + const [variantId, setVariantId] = useState(null) + const [quantity, setQuantity] = useState(null) + const [promotionActiveId, setPromotionActiveId] = useState(null) useEffect(() => { if (!products) return @@ -84,6 +101,18 @@ const Cart = () => { setTotalDiscountAmount(calculateTotalDiscountAmount) }, [products]) + useEffect(() => { + if(!promotionActiveId) return + + console.log('bajingan') + updateItemCart({ + productId: variantId, + quantity, + programLineId:promotionActiveId, + selected: true + }) + }, [promotionActiveId, variantId, quantity]) + useEffect(() => { const LoadProductSimilar = async () => { const randProductIndex = Math.floor(Math.random() * products.length) @@ -152,6 +181,13 @@ const Cart = () => { toast.success('Berhasil menghapus barang dari keranjang') } + const handlePopUpPromo = (variantId, quantity, promoId = null) => { + setPromotionType(true) + setVariantId(variantId) + setQuantity(quantity) + setPromotionActiveId(promoId) + } + return ( <> { + setPromotionType(false)} + > +
+ +
+ +
@@ -351,15 +404,61 @@ const Cart = () => { {products && products?.map((product) => ( <> - - -
-
Promo
-
Pilih Promo Yang Tersedia Bisa lebih Hemat
-
Cek Promo
-
- - + {product.isPromo > 0 && ( + + +
+ {product.program ? ( + <> +
+ + {product.program.type.label} + +
+
+ Anda Lebih hamat{' '} + + {' '} + {currencyFormat(product.program.price.priceDiscount)} + +
+ + ) : ( + <> +
+ Promo +
+
+ Pilih Promo Yang Tersedia Bisa lebih Hemat +
+ + )} +
handlePopUpPromo(product.id, product.quantity, product.program?.id)} + className='ml-auto text-red-500 flex gap-x-1 cursor-pointer' + > +
Cek Promo
+
+ +
+
+
+ + + )} {
+ {product.program && ( + + + +
+ {product.program.name} +
+
+
+
+ {product.program.type.label} +
+
{product.program.name}
+
+
+ + + + + + {product?.price?.discountPercentage > 0 && ( +
+
+ {currencyFormat(product?.price?.price)} +
+
+ )} +
+ {product?.program?.price.priceDiscount > 0 ? 'Gratis' : ''} +
+ + +
+ {product.program.price.priceDiscount > 0 ? 'Gratis' : ''} +
+ + + + )} ))} diff --git a/src/lib/product/components/Product/ProductDesktop.jsx b/src/lib/product/components/Product/ProductDesktop.jsx index 507d676c..d15e84d1 100644 --- a/src/lib/product/components/Product/ProductDesktop.jsx +++ b/src/lib/product/components/Product/ProductDesktop.jsx @@ -423,7 +423,7 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
- {/* {
- */} + { const [informationTab, setInformationTab] = useState(informationTabOptions[0].value) const [addCartAlert, setAddCartAlert] = useState(false) + const [promotionType, setPromotionType] = useState(false) + const [promotionActiveId, setPromotionActiveId] = useState(null) + const getLowestPrice = () => { const prices = product.variants.map((variant) => variant.price) const lowest = prices.reduce((lowest, price) => { @@ -89,6 +92,7 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => { updateItemCart({ productId: activeVariant.id, quantity, + programLineId: promotionActiveId, selected: true }) setAddCartAlert(true) @@ -187,7 +191,12 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => { />
- +
Jumlah
diff --git a/src/lib/promotinProgram/api/homepageApi.js b/src/lib/promotinProgram/api/homepageApi.js index d839101a..496af9d6 100644 --- a/src/lib/promotinProgram/api/homepageApi.js +++ b/src/lib/promotinProgram/api/homepageApi.js @@ -8,4 +8,10 @@ export const getPromotionHome = async () => { export const getProductPromotionHome = async ({id}) => { const response = await odooApi('GET', `/api/v1/promotion/home/${id}`) return response +} + +export const getPromotionProgram = async ({ id }) => { + const listProgram = await odooApi('GET', `/api/v1/product_variant/${id}/promotions`) + + return listProgram } \ No newline at end of file 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