diff options
Diffstat (limited to 'src/lib/product/components/Product/ProductDesktop.jsx')
| -rw-r--r-- | src/lib/product/components/Product/ProductDesktop.jsx | 95 |
1 files changed, 85 insertions, 10 deletions
diff --git a/src/lib/product/components/Product/ProductDesktop.jsx b/src/lib/product/components/Product/ProductDesktop.jsx index 7e1d0d3b..3b9296a8 100644 --- a/src/lib/product/components/Product/ProductDesktop.jsx +++ b/src/lib/product/components/Product/ProductDesktop.jsx @@ -18,6 +18,9 @@ import odooApi from '@/core/api/odooApi' import { Button, Spinner } from 'flowbite-react' import PromotionType from '@/lib/promotinProgram/components/PromotionType' import useAuth from '@/core/hooks/useAuth' +import ImageNext from 'next/image' +import CountDown2 from '@/core/components/elements/CountDown/CountDown2' +import CountDown from '@/core/components/elements/CountDown/CountDown' const ProductDesktop = ({ products, wishlist, toggleWishlist }) => { const router = useRouter() @@ -33,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) @@ -47,6 +51,14 @@ 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() + }, []) + const [informationTab, setInformationTab] = useState(informationTabOptions[0].value) const variantQuantityRefs = useRef([]) @@ -54,7 +66,7 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => { const setVariantQuantityRef = (variantId) => (element) => { if (element) { let variantIndex = product.variants.findIndex((varian) => varian.id == variantId) - product.variants[variantIndex].quantity = element.value + product.variants[variantIndex].quantity = element?.value } variantQuantityRefs.current[variantId] = element } @@ -96,7 +108,7 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => { router.push(`/login?next=/shop/product/${slug}`) return } - + const quantity = variantQuantityRefs.current[variantId].value if (!validQuantity(quantity)) return @@ -106,6 +118,15 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => { setAddCartAlert(true) } + const handleQuantityChange = (variantId) => (event) => { + 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 + // Lakukan sesuatu jika nilai quantity diubah + } + } + const handleBuy = (variant) => { const quantity = variantQuantityRefs.current[variant].value if (!validQuantity(quantity)) return @@ -142,7 +163,8 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => { useEffect(() => { const loadProductSimilarInBrand = async () => { const productSimilarQuery = [product?.name, `fq=-product_id_i:${product.id}`].join('&') - const dataProductSimilar = await productSimilarApi({ query: productSimilarQuery }) + const source = 'right' + const dataProductSimilar = await productSimilarApi({ query: productSimilarQuery, source }) setProductSimilarInBrand(dataProductSimilar.products) } if (!productSimilarInBrand) loadProductSimilarInBrand() @@ -171,11 +193,52 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => { <div className='flex'> <div className='w-full flex flex-wrap'> <div className='w-5/12'> - <Image - src={product.image} - alt={product.name} - className='h-[430px] object-contain object-center w-full border border-gray_r-4' - /> + <div className='relative mb-2'> + {product?.flashSale?.remainingTime > 0 && ( + <div className={`absolute bottom-0 w-full`}> + <div className='absolute bottom-0 w-full h-full'> + <ImageNext src={backgorundFlashSale || '/images/GAMBAR-BG-FLASH-SALE.jpg'} width={1000} height={100} /> + </div> + <div className='relative'> + <div className='flex gap-x-2 items-center p-2'> + <div className='bg-yellow-400 rounded-full p-1 h-9 w-20 flex items-center justify-center '> + <span className='text-lg font-bold'> + {product.lowestPrice.discountPercentage}% + </span> + </div> + <div + className={`bg-red-600 border border-solid border-yellow-400 rounded-full h-9 p-2 flex w-[50%] items-center justify-center gap-x-4`} + > + <ImageNext + src='/images/ICON_FLASH_SALE_WEBSITE_INDOTEKNIK.svg' + width={17} + height={10} + /> + <span className='text-white text-lg font-semibold'> + {product.flashSale.tag || 'FLASH SALE'} + </span> + </div> + <div> + <CountDown2 initialTime={product.flashSale.remainingTime} /> + </div> + </div> + </div> + </div> + )} + <Image + src={product.image} + alt={product.name} + className='h-[430px] object-contain object-center w-full border border-gray_r-4' + /> + </div> + <div> + <p className='text-justify text-xs leading-5'> + <span className='font-semibold '>Keterangan : </span>Gambar atau foto berperan + sebagai ilustrasi produk. Kadang tidak sesuai dengan kondisi terbaru dengan + berbagai perubahan dan perbaikan. Hubungi tim sales kami untuk informasi yang + lebih baik perihal gambar di 021-2933 8828. + </p> + </div> </div> <div className='w-7/12 px-4'> @@ -375,6 +438,18 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => { <div className='text-gray_r-11 line-through text-caption-1'> {currencyFormat(lowestPrice?.price)} </div> + {product.flashSale.remainingTime > 0 && ( + <div className='bg-red-600 rounded-full mb-1 p-2 pl-3 pr-3 flex w-fit items-center gap-x-1'> + <ImageNext + src='/images/ICON_FLASH_SALE_WEBSITE_INDOTEKNIK.svg' + width={15} + height={10} + /> + <span className='text-white text-xs font-semibold'> + {product.flashSale.tag || 'FLASH SALE'} + </span> + </div> + )} </div> )} <h3 className='text-danger-500 font-semibold mt-1 text-title-md'> @@ -412,7 +487,7 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => { type='number' className='form-input w-16 py-2 text-center bg-gray_r-1' ref={setVariantQuantityRef(product.variants[0].id)} - onChange={setVariantQuantityRef(product.variants[0].id)} + onChange={handleQuantityChange(product.variants[0].id)} defaultValue={1} /> <button @@ -579,7 +654,7 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => { type='number' className='form-input w-16 py-2 text-center bg-gray_r-1' ref={setVariantQuantityRef(variant.id)} - onChange={setVariantQuantityRef(variant.id)} + onChange={handleQuantityChange(variant.id)} defaultValue={1} /> </td> |