diff options
Diffstat (limited to 'src/lib/product/components/ProductCard.jsx')
| -rw-r--r-- | src/lib/product/components/ProductCard.jsx | 99 |
1 files changed, 71 insertions, 28 deletions
diff --git a/src/lib/product/components/ProductCard.jsx b/src/lib/product/components/ProductCard.jsx index 3454d4fd..e48ab88a 100644 --- a/src/lib/product/components/ProductCard.jsx +++ b/src/lib/product/components/ProductCard.jsx @@ -2,6 +2,9 @@ import Image from '@/core/components/elements/Image/Image' import Link from '@/core/components/elements/Link/Link' import currencyFormat from '@/core/utils/currencyFormat' import { createSlug } from '@/core/utils/slug' +import useProductPrice from '../hooks/useProductPrice' +import { LazyLoadComponent } from 'react-lazy-load-image-component' +import PriceSkeleton from '@/core/components/elements/Skeleton/PriceSkeleton' const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => { if (variant == 'vertical') { @@ -45,22 +48,9 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => { > {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)} - </div> - <div className='badge-solid-red'>{product?.lowestPrice?.discountPercentage}%</div> - </div> - )} - - <div className='text-red_r-11 font-semibold mb-2'> - {product?.lowestPrice?.priceDiscount > 0 ? ( - currencyFormat(product?.lowestPrice?.priceDiscount) - ) : ( - <a href='https://wa.me/'>Call for price</a> - )} - </div> + <LazyLoadComponent> + <ProductCardPrice variant='vertical' id={product.id} /> + </LazyLoadComponent> {product?.stockTotal > 0 && ( <div className='flex gap-x-1'> <div className='badge-solid-red'>Ready Stock</div> @@ -116,30 +106,83 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => { {product?.name} </Link> - {product?.lowestPrice?.discountPercentage > 0 && ( + <LazyLoadComponent> + <ProductCardPrice variant='horizontal' id={product.id} /> + </LazyLoadComponent> + {product?.stockTotal > 0 && ( + <div className='flex gap-x-1'> + <div className='badge-solid-red'>Ready Stock</div> + <div className='badge-gray'>{product?.stockTotal > 5 ? '> 5' : '< 5'}</div> + </div> + )} + </div> + </div> + ) + } +} + +const ProductCardPrice = ({ variant, id }) => { + const { productPrice } = useProductPrice({ id }) + + if (productPrice.isLoading) return <PriceSkeleton /> + + if (variant == 'vertical') { + return ( + productPrice.isFetched && ( + <> + {productPrice?.data?.discount > 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-gray_r-11 line-through text-[11px] sm:text-caption-2'> + {currencyFormat( + productPrice?.data?.priceStartFrom || productPrice?.data?.priceExclude + )} </div> + <div className='badge-solid-red'>{productPrice?.data?.discount}%</div> </div> )} <div className='text-red_r-11 font-semibold mb-2'> - {product?.lowestPrice?.priceDiscount > 0 ? ( - currencyFormat(product?.lowestPrice?.priceDiscount) + {productPrice?.data?.priceExcludeAfterDiscount > 0 ? ( + currencyFormat( + productPrice?.data?.priceDiscStartFrom || + productPrice?.data?.priceExcludeAfterDiscount + ) ) : ( <a href='https://wa.me/'>Call for price</a> )} </div> - {product?.stockTotal > 0 && ( - <div className='flex gap-x-1'> - <div className='badge-solid-red'>Ready Stock</div> - <div className='badge-gray'>{product?.stockTotal > 5 ? '> 5' : '< 5'}</div> + </> + ) + ) + } + + if (variant == 'horizontal') { + return ( + productPrice.isFetched && ( + <> + {productPrice?.data?.discount > 0 && ( + <div className='flex gap-x-1 mb-1 items-center'> + <div className='badge-solid-red'>{productPrice?.data?.discount}%</div> + <div className='text-gray_r-11 line-through text-caption-2'> + {currencyFormat( + productPrice?.data?.priceStartFrom || productPrice?.data?.priceExclude + )} + </div> </div> )} - </div> - </div> + + <div className='text-red_r-11 font-semibold mb-2'> + {productPrice?.data?.priceExcludeAfterDiscount > 0 ? ( + currencyFormat( + productPrice?.data?.priceDiscStartFrom || + productPrice?.data?.priceExcludeAfterDiscount + ) + ) : ( + <a href='https://wa.me/'>Call for price</a> + )} + </div> + </> + ) ) } } |