From d9652e77733a24b329f8d849e700222f06c4331e Mon Sep 17 00:00:00 2001 From: "HATEC\\SPVDEV001" Date: Fri, 4 Aug 2023 13:24:58 +0700 Subject: add image backgournd --- .../components/elements/CountDown/CountDown2.jsx | 2 +- .../product/components/Product/ProductDesktop.jsx | 65 +++++++---- .../product/components/Product/ProductMobile.jsx | 122 ++++++++++++++------- src/lib/product/components/ProductCard.jsx | 74 ++++++++----- 4 files changed, 177 insertions(+), 86 deletions(-) (limited to 'src') diff --git a/src/core/components/elements/CountDown/CountDown2.jsx b/src/core/components/elements/CountDown/CountDown2.jsx index 5dafb790..e85a22cb 100644 --- a/src/core/components/elements/CountDown/CountDown2.jsx +++ b/src/core/components/elements/CountDown/CountDown2.jsx @@ -59,7 +59,7 @@ const CountDown2 = ({ initialTime }) => { return ( -
+
{timeLeft.day.toString().padStart(2, '0')} diff --git a/src/lib/product/components/Product/ProductDesktop.jsx b/src/lib/product/components/Product/ProductDesktop.jsx index f6c998e2..187ab3c9 100644 --- a/src/lib/product/components/Product/ProductDesktop.jsx +++ b/src/lib/product/components/Product/ProductDesktop.jsx @@ -36,6 +36,7 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => { const [promotionType, setPromotionType] = useState(false) const [promotionActiveId, setPromotionActiveId] = useState(null) const [selectVariantPromoActive, setSelectVariantPromoActive] = useState(null) + const [backgorundFlashSale, setBackgorundFlashSale] = useState(null) const getLowestPrice = useCallback(() => { const prices = product.variants.map((variant) => variant.price) @@ -50,6 +51,16 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => { setLowestPrice(lowest) }, [getLowestPrice]) + useEffect(() => { + const getBackgound = async () => { + const get = await odooApi('GET', '/api/v1/banner?type=flash-sale-background-banner') + setBackgorundFlashSale(get[0].image) + } + getBackgound() + }, []) + + console.log('ini set', backgorundFlashSale) + const [informationTab, setInformationTab] = useState(informationTabOptions[0].value) const variantQuantityRefs = useRef([]) @@ -60,7 +71,6 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => { product.variants[variantIndex].quantity = element?.value } variantQuantityRefs.current[variantId] = element - } const validQuantity = (quantity) => { @@ -111,13 +121,13 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => { } const handleQuantityChange = (variantId) => (event) => { - const { value } = event.target; - const variantIndex = product.variants.findIndex((variant) => variant.id === variantId); + const { value } = event.target + const variantIndex = product.variants.findIndex((variant) => variant.id === variantId) if (variantIndex !== -1) { - product.variants[variantIndex].quantity = parseInt(value, 10); // Pastikan untuk mengubah ke tipe number jika diperlukan + product.variants[variantIndex].quantity = parseInt(value, 10) // Pastikan untuk mengubah ke tipe number jika diperlukan // Lakukan sesuatu jika nilai quantity diubah } - }; + } const handleBuy = (variant) => { const quantity = variantQuantityRefs.current[variant].value @@ -187,21 +197,32 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => {
{product?.flashSale?.remainingTime > 0 && ( -
-
-
- {product.lowestPrice.discountPercentage}% -
-
- - {product.flashSale.tag || 'FLASH SALE'} -
-
- +
+
+ +
+
+
+
+ + {product.lowestPrice.discountPercentage}% + +
+
+ + + {product.flashSale.tag || 'FLASH SALE'} + +
+
+ +
@@ -426,7 +447,9 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => { width={15} height={10} /> - FLASH SALE + + {product.flashSale.tag || 'FLASH SALE'} +
)}
diff --git a/src/lib/product/components/Product/ProductMobile.jsx b/src/lib/product/components/Product/ProductMobile.jsx index 2edd1a5f..f0264542 100644 --- a/src/lib/product/components/Product/ProductMobile.jsx +++ b/src/lib/product/components/Product/ProductMobile.jsx @@ -18,6 +18,8 @@ import PromotionType from '@/lib/promotinProgram/components/PromotionType' import { gtagAddToCart } from '@/core/utils/googleTag' import odooApi from '@/core/api/odooApi' import { Button, Spinner } from 'flowbite-react' +import ImageNext from 'next/image' +import CountDown2 from '@/core/components/elements/CountDown/CountDown2' const ProductMobile = ({ product, wishlist, toggleWishlist }) => { const router = useRouter() @@ -30,6 +32,7 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => { const [isLoadingSLA, setIsLoadingSLA] = useState(true) const [promotionType, setPromotionType] = useState(false) const [promotionActiveId, setPromotionActiveId] = useState(null) + const [backgorundFlashSale, setBackgorundFlashSale] = useState(null) const getLowestPrice = () => { const prices = product.variants.map((variant) => variant.price) @@ -39,6 +42,14 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => { return lowest } + useEffect(() => { + const getBackgound = async () => { + const get = await odooApi('GET', '/api/v1/banner?type=flash-sale-background-banner') + setBackgorundFlashSale(get[0].image) + } + getBackgound() + }, []) + const [activeVariant, setActiveVariant] = useState({ id: null, code: product.code, @@ -69,11 +80,11 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => { product.variants = variantData setIsLoadingSLA(false) - if(product.variants.length === 1){ + if (product.variants.length === 1) { setActiveVariant({ id: product.variants[0].id, code: product.variants[0].code, - name: product.variants[0].parent.name , + name: product.variants[0].parent.name, price: product.variants[0].price, stock: product.variants[0].stock, weight: product.variants[0].weight, @@ -143,7 +154,7 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => { quantity, programLineId: promotionActiveId, selected: true, - source : 'buy' + source: 'buy' }) router.push(`/shop/checkout?source=buy`) } @@ -156,11 +167,44 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => { return ( - {product.name} +
+ {product?.flashSale?.remainingTime > 0 && ( +
+
+ +
+
+
+
+ + {product.lowestPrice.discountPercentage}% + +
+
+ + + {product.flashSale.tag || 'FLASH SALE'} + +
+
+ +
+
+
+
+ )} + {product.name} +
@@ -294,40 +338,44 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => { Loading... - ) : selectedVariant ? activeVariant?.sla?.slaDate != '-' ? ( - - ):('-') : ( + {activeVariant?.sla?.slaDate} +
+
+ +
+ + ) : ( + '-' + ) + ) : ( '-' )} diff --git a/src/lib/product/components/ProductCard.jsx b/src/lib/product/components/ProductCard.jsx index 9e559358..d33516dd 100644 --- a/src/lib/product/components/ProductCard.jsx +++ b/src/lib/product/components/ProductCard.jsx @@ -7,14 +7,25 @@ import whatsappUrl from '@/core/utils/whatsappUrl' import ImageNext from 'next/image' import Product from './Product/Product' import { useRouter } from 'next/router' +import { useEffect, useState } from 'react' +import odooApi from '@/core/api/odooApi' const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => { const router = useRouter() - console.log('ini route', router) + + const [backgorundFlashSale, setBackgorundFlashSale] = useState(null) + const callForPriceWhatsapp = whatsappUrl('product', { name: product.name, url: createSlug('/shop/product/', product.name, product.id, true) }) + useEffect(() => { + const getBackgound = async () => { + const get = await odooApi('GET', '/api/v1/banner?type=flash-sale-background-banner') + setBackgorundFlashSale(get[0].image) + } + getBackgound() + }, []) if (variant == 'vertical') { return ( @@ -29,18 +40,27 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => { className='w-full object-contain object-center h-36 sm:h-48' /> {router.pathname != '/' && product?.flashSale?.id > 0 && ( -
-
-
- {product?.lowestPrice.discountPercentage}% -
-
- - {product?.flashSale?.tag} +
+
+ +
+
+
+
+ + {product?.lowestPrice.discountPercentage}% + +
+
+ + + {product?.flashSale?.tag} + +
@@ -52,20 +72,20 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => { )}
- {product?.manufacture?.name ? ( - - {product.manufacture.name} - - ) : ( -
-
- )} + {product?.manufacture?.name ? ( + + {product.manufacture.name} + + ) : ( +
-
+ )}