diff options
Diffstat (limited to 'src/lib/product')
5 files changed, 289 insertions, 164 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> diff --git a/src/lib/product/components/Product/ProductDesktopVariant.jsx b/src/lib/product/components/Product/ProductDesktopVariant.jsx index d64e70c2..51739bc9 100644 --- a/src/lib/product/components/Product/ProductDesktopVariant.jsx +++ b/src/lib/product/components/Product/ProductDesktopVariant.jsx @@ -203,7 +203,8 @@ const ProductDesktopVariant = ({ product, wishlist, toggleWishlist, isVariant }) <a href={whatsappUrl('product', { name: product.name, - url: createSlug('/shop/product/variant/', product.name, product.id, true) + manufacture: product?.manufacture?.name, + url: createSlug('/shop/product/', product.name, product.id, true) })} className='text-danger-500 font-medium' > @@ -269,44 +270,52 @@ const ProductDesktopVariant = ({ product, wishlist, toggleWishlist, isVariant }) </div> */} </div> <div className='w-[25%]'> - {lowestPrice?.priceDiscount > 0 ? ( + {product?.flashSale?.remainingTime > 0 ? ( <> - <div className='flex gap-x-2 mb-3 items-center'> - <div className='flex'> - <span className='text-gray-400 text-md'>Harga Sebelum PPN : </span> - </div> - <div className='flex'> - <span className=' text-body-1 '> - {currencyFormat(lowestPrice?.priceDiscount)} - </span> - </div> - </div> - <span className='font-semibold'>Termasuk PPN :</span> - <div className='flex gap-x-1 items-center mt-2 '> + <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 * 1.11)} + <div className='text-gray_r-9 line-through text-caption-1'> + {currencyFormat(lowestPrice?.price)} </div> - <h3 className='text-danger-500 font-semibold text-title-sm'> - {currencyFormat(lowestPrice?.priceDiscount * 1.11)} - </h3> + <div className='text-danger-500 font-semibold text-xl'> + {currencyFormat(lowestPrice?.priceDiscount)} + </div> + </div> + <div className='text-gray_r-9 text-base font-normal mt-1'> + Termasuk PPN:{' '} + {currencyFormat(lowestPrice?.priceDiscount * 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, - url: createSlug('/shop/product/', product.name, product.id, true) - })} - className='text-danger-500 underline' - > - klik disini - </a> - </span> + <h3 className='text-danger-500 font-semibold mt-1 text-title-md'> + {lowestPrice?.price > 0 ? ( + <> + {currencyFormat(lowestPrice?.price)} + <div className='text-gray_r-9 text-base font-normal mt-1'> + Termasuk PPN:{' '} + {currencyFormat(lowestPrice?.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> )} <div className='flex gap-x-3 mt-4'> <input diff --git a/src/lib/product/components/Product/ProductMobile.jsx b/src/lib/product/components/Product/ProductMobile.jsx index 12c43727..20a1d3f4 100644 --- a/src/lib/product/components/Product/ProductMobile.jsx +++ b/src/lib/product/components/Product/ProductMobile.jsx @@ -100,7 +100,8 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => { price: variant.price, stock: variant.stock, weight: variant.weight, - hasProgram: variant.hasProgram + hasProgram: variant.hasProgram, + isFlashsale: variant.isFlashsale } setActiveVariant(newActiveVariant) @@ -231,32 +232,48 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => { <div className='text-gray_r-12/80 text-caption-2 mt-2 mb-1'>Harga mulai dari: </div> )} - {activeVariant?.price?.discountPercentage > 0 && ( - <div className='flex gap-x-1 items-center'> - <div className='text-gray_r-11 line-through text-caption-1'> - {currencyFormat(activeVariant?.price?.price)} + {activeVariant.isFlashsale ? ( + <> + <div className='flex gap-x-1 items-center'> + <div className='badge-solid-red'>{activeVariant?.price?.discountPercentage}%</div> + <div className='text-gray_r-11 line-through text-caption-1'> + {currencyFormat(activeVariant?.price?.price)} + </div> + <div className='text-danger-500 font-semibold'> + {currencyFormat(activeVariant?.price?.priceDiscount)} + </div> </div> - <div className='badge-solid-red'>{activeVariant?.price?.discountPercentage}%</div> - </div> + <div className='text-gray_r-9 text-base font-normal mt-1'> + Termasuk PPN:{' '} + {currencyFormat(activeVariant?.price.priceDiscount * process.env.NEXT_PUBLIC_PPN)} + </div> + </> + ) : ( + <h3 className='text-danger-500 font-semibold mt-1'> + {activeVariant?.price?.price > 0 ? ( + <> + {currencyFormat(activeVariant?.price?.price)} + <div className='text-gray_r-9 text-base font-normal mt-1'> + Termasuk PPN:{' '} + {currencyFormat(activeVariant?.price.price * process.env.NEXT_PUBLIC_PPN)} + </div> + </> + ) : ( + <span className='text-gray_r-11 leading-6 font-normal'> + Hubungi kami untuk dapatkan harga terbaik, + <a + href={whatsappUrl('product', { + name: product.name, + url: createSlug('/shop/product/', product.name, product.id, true) + })} + className='text-danger-500 underline' + > + klik disini + </a> + </span> + )} + </h3> )} - <h3 className='text-danger-500 font-semibold mt-1'> - {activeVariant?.price?.priceDiscount > 0 ? ( - currencyFormat(activeVariant?.price?.priceDiscount) - ) : ( - <span className='text-gray_r-11 leading-6 font-normal'> - Hubungi kami untuk dapatkan harga terbaik, - <a - href={whatsappUrl('product', { - name: product.name, - url: createSlug('/shop/product/', product.name, product.id, true) - })} - className='text-danger-500 underline' - > - klik disini - </a> - </span> - )} - </h3> </div> <Divider /> diff --git a/src/lib/product/components/Product/ProductMobileVariant.jsx b/src/lib/product/components/Product/ProductMobileVariant.jsx index d0c209cc..8cdb631f 100644 --- a/src/lib/product/components/Product/ProductMobileVariant.jsx +++ b/src/lib/product/components/Product/ProductMobileVariant.jsx @@ -39,7 +39,8 @@ const ProductMobileVariant = ({ product, wishlist, toggleWishlist }) => { name: product.name, price: getLowestPrice(), stock: product.stockTotal, - weight: product.weight + weight: product.weight, + isFlashSale: product.isFlashsale }) useEffect(() => { @@ -50,7 +51,8 @@ const ProductMobileVariant = ({ product, wishlist, toggleWishlist }) => { name: product.name, price: product.price, stock: product.stock, - weight: product.weight + weight: product.weight, + isFlashSale: product.isFlashsale }) } }, [selectedVariant, product]) @@ -139,47 +141,47 @@ const ProductMobileVariant = ({ product, wishlist, toggleWishlist }) => { </div> <h1 className='leading-6 font-medium mb-3'>{activeVariant?.name}</h1> - {activeVariant?.price?.priceDiscount > 0 ? ( + {activeVariant.isFlashsale ? ( <> <div className='flex gap-x-1 items-center'> - <div className='text-gray_r-11 text-caption-1'>Harga Sebelum PPN :</div> - <div className='text-gray_r-12 line-through text-caption-1'> - {' '} + <div className='badge-solid-red'>{activeVariant?.price?.discountPercentage}%</div> + <div className='text-gray_r-11 line-through text-caption-1'> + {currencyFormat(activeVariant?.price?.price)} + </div> + <div className='text-danger-500 font-semibold'> {currencyFormat(activeVariant?.price?.priceDiscount)} </div> </div> - <div className='mt-2'> - <span className='font-semibold '>Termasuk PPN :</span> - <div className='flex gap-x-2 items-center mt-2'> - {activeVariant?.price?.discountPercentage > 0 && ( - <> - <div className='badge-solid-red'> - {activeVariant?.price?.discountPercentage}% - </div> - <div className='text-gray_r-11 line-through text-caption-1'> - {currencyFormat(activeVariant?.price?.price * 1.11)} - </div> - </> - )} - <h3 className='text-danger-500 font-semibold'> - {currencyFormat(activeVariant?.price?.priceDiscount * 1.11)} - </h3> - </div> + <div className='text-gray_r-9 text-base font-normal mt-1'> + Termasuk PPN:{' '} + {currencyFormat(activeVariant?.price.priceDiscount * process.env.NEXT_PUBLIC_PPN)} </div> </> ) : ( - <span className='text-gray_r-11 leading-6 font-normal'> - Hubungi kami untuk dapatkan harga terbaik, - <a - href={whatsappUrl('product', { - name: product.name, - url: createSlug('/shop/product/', product.name, product.id, true) - })} - className='text-danger-500 underline' - > - klik disini - </a> - </span> + <h3 className='text-danger-500 font-semibold mt-1'> + {activeVariant?.price?.priceDiscount > 0 ? ( + <> + {currencyFormat(activeVariant?.price?.priceDiscount)} + <div className='text-gray_r-9 text-base font-normal mt-1'> + Termasuk PPN:{' '} + {currencyFormat(activeVariant?.price.priceDiscount * process.env.NEXT_PUBLIC_PPN)} + </div> + </> + ) : ( + <span className='text-gray_r-11 leading-6 font-normal'> + Hubungi kami untuk dapatkan harga terbaik, + <a + href={whatsappUrl('product', { + name: product.name, + url: createSlug('/shop/product/', product.name, product.id, true) + })} + className='text-danger-500 underline' + > + klik disini + </a> + </span> + )} + </h3> )} </div> diff --git a/src/lib/product/components/ProductCard.jsx b/src/lib/product/components/ProductCard.jsx index 10ffdaec..6a5e29ab 100644 --- a/src/lib/product/components/ProductCard.jsx +++ b/src/lib/product/components/ProductCard.jsx @@ -82,30 +82,47 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => { )} <Link href={createSlug('/shop/product/', product?.name, product?.id)} - className={`mb-2 !text-gray_r-12 leading-6 block ${ + className={`mb-3 !text-gray_r-12 leading-6 block ${ simpleTitle ? 'line-clamp-2 h-12' : 'line-clamp-3 h-[64px]' }`} title={product?.name} > {product?.name} </Link> - {product?.lowestPrice.discountPercentage > 0 && ( - <div className='flex gap-x-1 mb-1 items-center'> - <div className='text-gray_r-11 line-through text-[11px] sm:text-caption-2'> - {currencyFormat(product.lowestPrice.price)} + {product?.flashSale?.id > 0 ? ( + <> + {product?.lowestPrice.discountPercentage > 0 && ( + <div className='flex gap-x-1 mb-1 items-center'> + <div className='text-gray_r-11 line-through text-[11px] sm:text-caption-2'> + {currencyFormat(product.lowestPrice.price)} + </div> + <div className='badge-solid-red'>{product?.lowestPrice.discountPercentage}%</div> + </div> + )} + + <div className='text-danger-500 font-semibold mb-2'> + {product?.lowestPrice.priceDiscount > 0 ? ( + currencyFormat(product?.lowestPrice.priceDiscount) + ) : ( + <a href={callForPriceWhatsapp}>Call for price</a> + )} </div> - <div className='badge-solid-red'>{product?.lowestPrice.discountPercentage}%</div> + </> + ) : ( + <div className='text-danger-500 font-semibold mb-2 min-h-[40px]'> + {product?.lowestPrice.price > 0 ? ( + <> + {currencyFormat(product?.lowestPrice.price)} + <div className='text-gray_r-9 text-[10px] font-normal mt-2'> + Inc. PPN: {currencyFormat(product.lowestPrice.price * process.env.NEXT_PUBLIC_PPN )} + </div> + </> + ) : ( + <a href={callForPriceWhatsapp}>Call for price</a> + )} </div> )} - <div className='text-danger-500 font-semibold mb-2'> - {product?.lowestPrice.priceDiscount > 0 ? ( - currencyFormat(product?.lowestPrice.priceDiscount) - ) : ( - <a href={callForPriceWhatsapp}>Call for price</a> - )} - </div> - {product?.stockTotal > 0 && ( <div className='flex gap-x-1'> <div className='badge-solid-red'>Ready Stock</div> @@ -169,30 +186,46 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => { )} <Link href={createSlug('/shop/product/', product?.name, product?.id)} - className={`mb-2 !text-gray_r-12 leading-6 ${ + className={`mb-3 !text-gray_r-12 leading-6 ${ simpleTitle ? 'line-clamp-2' : 'line-clamp-3' }`} > {product?.name} </Link> + {product?.flashSale?.id > 0 ? ( + <> + {product?.lowestPrice.discountPercentage > 0 && ( + <div className='flex gap-x-1 mb-1 items-center'> + <div className='badge-solid-red'>{product?.lowestPrice?.discountPercentage}%</div> + <div className='text-gray_r-11 line-through text-caption-2'> + {currencyFormat(product?.lowestPrice?.price)} + </div> + </div> + )} - {product?.lowestPrice?.discountPercentage > 0 && ( - <div className='flex gap-x-1 mb-1 items-center'> - <div className='badge-solid-red'>{product?.lowestPrice?.discountPercentage}%</div> - <div className='text-gray_r-11 line-through text-caption-2'> - {currencyFormat(product?.lowestPrice?.price)} + <div className='text-danger-500 font-semibold mb-2'> + {product?.lowestPrice?.priceDiscount > 0 ? ( + currencyFormat(product?.lowestPrice?.priceDiscount) + ) : ( + <a href={callForPriceWhatsapp}>Call for price</a> + )} </div> + </> + ) : ( + <div className='text-danger-500 font-semibold mb-2 min-h-[40px]'> + {product?.lowestPrice.price > 0 ? ( + <> + {currencyFormat(product?.lowestPrice.price)} + <div className='text-gray_r-9 text-[11px] sm:text-caption-2 font-normal mt-2'> + Inc. PPN: {currencyFormat(product.lowestPrice.price * process.env.NEXT_PUBLIC_PPN)} + </div> + </> + ) : ( + <a href={callForPriceWhatsapp}>Call for price</a> + )} </div> )} - <div className='text-danger-500 font-semibold mb-2'> - {product?.lowestPrice?.priceDiscount > 0 ? ( - currencyFormat(product?.lowestPrice?.priceDiscount) - ) : ( - <a href={callForPriceWhatsapp}>Call for price</a> - )} - </div> - {product?.stockTotal > 0 && ( <div className='flex gap-x-1'> <div className='badge-solid-red'>Ready Stock</div> |