fix product mobile price

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,&nbsp;
+                  <a href='https://wa.me/' className='text-red_r-11 underline'>
+                    klik disini
+                  </a>
+                </span>
+              )}
+            </h3>
+          </>
+        )}
       </div>
 
       <Divider />