variant and product price

1 files changed, 34 insertions, 20 deletions

diff --git a/src/lib/product/components/Product/ProductMobile.jsx b/src/lib/product/components/Product/ProductMobile.jsx
index c572a58e..f6ed3d40 100644
--- a/src/lib/product/components/Product/ProductMobile.jsx
+++ b/src/lib/product/components/Product/ProductMobile.jsx
@@ -11,6 +11,8 @@ import { HeartIcon } from '@heroicons/react/24/outline'
 import { useRouter } from 'next/router'
 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'
 
 const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
   const router = useRouter()
@@ -115,26 +117,7 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
           </button>
         </div>
         <h1 className='leading-6 font-medium'>{activeVariant?.name}</h1>
-        {activeVariant?.price?.discountPercentage > 0 && (
-          <div className='flex gap-x-1 items-center mt-2'>
-            <div className='text-gray_r-11 line-through text-caption-1'>
-              {currencyFormat(activeVariant?.price?.price)}
-            </div>
-            <div className='badge-solid-red'>{activeVariant?.price?.discountPercentage}%</div>
-          </div>
-        )}
-        <h3 className='text-red_r-11 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,&nbsp;
-              <a href='https://wa.me/' className='text-red_r-11 underline'>
-                klik disini
-              </a>
-            </span>
-          )}
-        </h3>
+        <VariantPrice id={activeVariant.id} />
       </div>
 
       <Divider />
@@ -249,6 +232,37 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
   )
 }
 
+const VariantPrice = ({ id }) => {
+  const { variantPrice } = useVariantPrice({ id })
+
+  if (variantPrice.isLoading) return <PriceSkeleton />
+
+  return (
+    <>
+      {variantPrice?.data?.discount > 0 && (
+        <div className='flex gap-x-1 items-center mt-2'>
+          <div className='text-gray_r-11 line-through text-caption-1'>
+            {currencyFormat(variantPrice?.data?.priceExclude)}
+          </div>
+          <div className='badge-solid-red'>{variantPrice?.data?.discount}%</div>
+        </div>
+      )}
+      <h3 className='text-red_r-11 font-semibold mt-1'>
+        {variantPrice?.data?.priceExcludeAfterDiscount > 0 ? (
+          currencyFormat(variantPrice?.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>
+    </>
+  )
+}
+
 const informationTabOptions = [
   { value: 'specification', label: 'Spesifikasi' },
   { value: 'description', label: 'Deskripsi' },