diff options
Diffstat (limited to 'src/lib/product/components/Product/ProductDesktop.jsx')
| -rw-r--r-- | src/lib/product/components/Product/ProductDesktop.jsx | 154 |
1 files changed, 109 insertions, 45 deletions
diff --git a/src/lib/product/components/Product/ProductDesktop.jsx b/src/lib/product/components/Product/ProductDesktop.jsx index 5cc35df7..4c8c3ae9 100644 --- a/src/lib/product/components/Product/ProductDesktop.jsx +++ b/src/lib/product/components/Product/ProductDesktop.jsx @@ -44,7 +44,10 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => { const { setRefreshCart, refreshCart } = useProductCartContext() const getLowestPrice = useCallback(() => { - const prices = product.variants.map((variant) => variant.price) + const prices = product.variants.map((variant) => ({ + price: variant.price, + isFlashsale: variant.isFlashsale + })) const lowest = prices.reduce((lowest, price) => { return price.priceDiscount < lowest.priceDiscount ? price : lowest }, prices[0]) @@ -413,13 +416,13 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => { <div className='text-gray_r-12/80'>Harga mulai dari: </div> )} - {lowestPrice?.discountPercentage > 0 && ( + {/* {lowestPrice?.discountPercentage > 0 && ( <div className='flex gap-x-1 items-center mt-2'> <div className='badge-solid-red text-caption-1'> {lowestPrice?.discountPercentage}% </div> - <div className='text-gray_r-11 line-through text-caption-1'> - {currencyFormat(lowestPrice?.price)} + <div className='text-gray_r-9 text-caption-1'> + Include PPN {currencyFormat(lowestPrice?.price * process.env.NEXT_PUBLIC_PPN)} </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'> @@ -436,28 +439,56 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => { </div> )} </div> + )} */} + + {lowestPrice?.isFlashsale ? ( + <> + <div className='flex gap-x-1 items-center mt-2'> + <div className='badge-solid-red text-caption-1'> + {lowestPrice?.price?.discountPercentage}% + </div> + <div className='text-gray_r-9 line-through text-caption-1'> + {currencyFormat(lowestPrice?.price?.price)} + </div> + <div className='text-danger-500 font-semibold text-xl'> + {currencyFormat(lowestPrice?.price?.priceDiscount)} + </div> + </div> + <div className='text-gray_r-9 text-base font-normal mt-1'> + Termasuk PPN:{' '} + {currencyFormat(lowestPrice?.price.priceDiscount * process.env.NEXT_PUBLIC_PPN)} + </div> + </> + ) : ( + <h3 className='text-danger-500 font-semibold mt-1 text-title-md'> + {lowestPrice?.price.price > 0 ? ( + <> + {currencyFormat(lowestPrice?.price.price)} + <div className='text-gray_r-9 text-base font-normal mt-1'> + Termasuk PPN:{' '} + {currencyFormat(lowestPrice?.price.price * process.env.NEXT_PUBLIC_PPN)} + </div> + </> + ) : ( + <span className='text-gray_r-12/90 font-normal text-h-sm'> + Hubungi kami untuk dapatkan harga terbaik, + <a + href={whatsappUrl('product', { + name: product.name, + manufacture: product.manufacture?.name, + url: createSlug('/shop/product/', product.name, product.id, true) + })} + className='text-danger-500 underline' + rel='noopener noreferrer' + target='_blank' + > + klik disini + </a> + </span> + )} + </h3> )} - <h3 className='text-danger-500 font-semibold mt-1 text-title-md'> - {lowestPrice?.priceDiscount > 0 ? ( - currencyFormat(lowestPrice?.priceDiscount) - ) : ( - <span className='text-gray_r-12/90 font-normal text-h-sm'> - Hubungi kami untuk dapatkan harga terbaik, - <a - href={whatsappUrl('product', { - name: product.name, - manufacture: product.manufacture?.name, - url: createSlug('/shop/product/', product.name, product.id, true) - })} - className='text-danger-500 underline' - rel='noopener noreferrer' - target='_blank' - > - klik disini - </a> - </span> - )} - </h3> + {product.variants.length > 1 ? ( <button type='button' @@ -549,32 +580,65 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => { <ColumnsSLA variant={variant} product={product} /> </LazyLoadComponent> <td> - {variant.price.discountPercentage > 0 && + {variant.isFlashsale ? ( + <> + <div className='flex items-center gap-x-1 justify-center'> + <div className='badge-solid-red text-caption-1'> + {variant?.price?.discountPercentage}% + </div> + <div className='line-through text-caption-1 text-gray_r-11'> + {currencyFormat(variant?.price?.price)} + </div>{' '} + <div className=' text-caption-1 text-red-600 font-semibold'> + {currencyFormat(variant?.price?.priceDiscount)} + </div>{' '} + </div> + <div className=' text-caption-1 text-gray_r-11 mb-1'> + Inc. PPN:{' '} + {currencyFormat( + variant.price.priceDiscount * process.env.NEXT_PUBLIC_PPN + )} + </div> + </> + ) : ( + <div> + {variant?.price?.price > 0 ? ( + <> + <div className=' text-caption-1 text-red-600 font-semibold'> + {currencyFormat(variant?.price?.price)} + </div>{' '} + <div className=' text-caption-1 text-gray_r-11 mb-1'> + Inc. PPN:{' '} + {currencyFormat( + variant?.price?.priceDiscount * process.env.NEXT_PUBLIC_PPN + )} + </div> + </> + ) : ( + <a + href={whatsappUrl('product', { + name: variant.name, + manufacture: product.manufacture?.name, + url: createSlug('/shop/product/', product.name, product.id, true) + })} + className='text-red_r-11' + rel='noopener noreferrer' + target='_blank' + > + Call for price + </a> + )} + </div> + )} + {/* {variant.price.discountPercentage > 0 && variant.price.priceDiscount > 0 && ( <> <div className='line-through text-caption-1 text-gray_r-11 mb-1'> {currencyFormat(variant.price.price)} </div>{' '} </> - )} - <div> - {variant.price.priceDiscount > 0 ? ( - currencyFormat(variant.price.priceDiscount) - ) : ( - <a - href={whatsappUrl('product', { - name: variant.name, - manufacture: product.manufacture?.name, - url: createSlug('/shop/product/', product.name, product.id, true) - })} - className='text-red_r-11' - rel='noopener noreferrer' - target='_blank' - > - Call for price - </a> - )} - </div> + )} */} + {/* <VariantPrice id={variant.id} /> */} </td> <td> |