diff options
Diffstat (limited to 'src/lib/product/components/Product')
| -rw-r--r-- | src/lib/product/components/Product/ProductDesktop.jsx | 60 |
1 files changed, 53 insertions, 7 deletions
diff --git a/src/lib/product/components/Product/ProductDesktop.jsx b/src/lib/product/components/Product/ProductDesktop.jsx index dfff91d7..5cbe8a8a 100644 --- a/src/lib/product/components/Product/ProductDesktop.jsx +++ b/src/lib/product/components/Product/ProductDesktop.jsx @@ -18,8 +18,12 @@ 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 }) => { + console.log('ini product', products) const router = useRouter() const auth = useAuth() const { slug } = router.query @@ -96,6 +100,7 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => { router.push(`/login?next=/shop/product/${slug}`) return } + const quantity = variantQuantityRefs.current[variantId].value if (!validQuantity(quantity)) return @@ -141,7 +146,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() @@ -170,11 +176,41 @@ 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 bg-red-600 w-full h-15 grid'> + <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> + )} + <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'> @@ -374,6 +410,16 @@ 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'>FLASH SALE</span> + </div> + )} </div> )} <h3 className='text-danger-500 font-semibold mt-1 text-title-md'> @@ -615,7 +661,7 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => { )} */} <button type='button' - onClick={() => handleAddToCart(variant)} + onClick={() => handleAddToCart(variant.id)} className='flex-1 py-2 btn-yellow' > Keranjang |