diff options
Diffstat (limited to 'src/lib/product/components')
| -rw-r--r-- | src/lib/product/components/Product/ProductMobile.jsx | 34 |
1 files changed, 32 insertions, 2 deletions
diff --git a/src/lib/product/components/Product/ProductMobile.jsx b/src/lib/product/components/Product/ProductMobile.jsx index f6ed3d40..0df22026 100644 --- a/src/lib/product/components/Product/ProductMobile.jsx +++ b/src/lib/product/components/Product/ProductMobile.jsx @@ -13,16 +13,18 @@ import MobileView from '@/core/components/views/MobileView' import { toast } from 'react-hot-toast' import useVariantPrice from '@/lib/variant/hooks/useVariantPrice' import PriceSkeleton from '@/core/components/elements/Skeleton/PriceSkeleton' +import useProductPrice from '../../hooks/useProductPrice' const ProductMobile = ({ product, wishlist, toggleWishlist }) => { const router = useRouter() + const { productPrice } = useProductPrice({ id: product.id }) const [quantity, setQuantity] = useState('1') const [selectedVariant, setSelectedVariant] = useState(null) const [informationTab, setInformationTab] = useState(informationTabOptions[0].value) const [activeVariant, setActiveVariant] = useState({ - id: product.id, + id: null, code: product.code, name: product.name, price: product.lowestPrice, @@ -117,7 +119,35 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => { </button> </div> <h1 className='leading-6 font-medium'>{activeVariant?.name}</h1> - <VariantPrice id={activeVariant.id} /> + {activeVariant.id && <VariantPrice id={activeVariant.id} />} + {product.variants?.length > 1 && !activeVariant.id && productPrice.isLoading && ( + <PriceSkeleton /> + )} + {product.variants?.length > 1 && !activeVariant.id && productPrice.isFetched && ( + <> + <div className='text-gray_r-12/80 text-caption-2 mt-2 mb-1'>Harga mulai dari: </div> + {productPrice?.data?.discount > 0 && ( + <div className='flex gap-x-1 items-center'> + <div className='text-gray_r-11 line-through text-caption-1'> + {currencyFormat(productPrice?.data?.priceExclude)} + </div> + <div className='badge-solid-red'>{productPrice?.data?.discount}%</div> + </div> + )} + <h3 className='text-red_r-11 font-semibold mt-1'> + {productPrice?.data?.priceExcludeAfterDiscount > 0 ? ( + currencyFormat(productPrice?.data?.priceExcludeAfterDiscount) + ) : ( + <span className='text-gray_r-11 leading-6 font-normal'> + Hubungi kami untuk dapatkan harga terbaik, + <a href='https://wa.me/' className='text-red_r-11 underline'> + klik disini + </a> + </span> + )} + </h3> + </> + )} </div> <Divider /> |