From 1f20fafef46b4eecaf0dd1b91592f3214e8144d3 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Sat, 25 Mar 2023 12:24:03 +0700
Subject: variant and product price

---
 .../product/components/Product/ProductDesktop.jsx  | 79 ++++++++++++++--------
 .../product/components/Product/ProductMobile.jsx   | 54 +++++++++------
 2 files changed, 84 insertions(+), 49 deletions(-)

(limited to 'src/lib/product/components/Product')

diff --git a/src/lib/product/components/Product/ProductDesktop.jsx b/src/lib/product/components/Product/ProductDesktop.jsx
index 98b40400..663d5a74 100644
--- a/src/lib/product/components/Product/ProductDesktop.jsx
+++ b/src/lib/product/components/Product/ProductDesktop.jsx
@@ -8,8 +8,12 @@ import LazyLoad from 'react-lazy-load'
 import ProductSimilar from '../ProductSimilar'
 import { toast } from 'react-hot-toast'
 import { updateItemCart } from '@/core/utils/cart'
+import useVariantPrice from '@/lib/variant/hooks/useVariantPrice'
+import useProductPrice from '../../hooks/useProductPrice'
+import PriceSkeleton from '@/core/components/elements/Skeleton/PriceSkeleton'
 
 const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
+  const { productPrice } = useProductPrice({ id: product.id })
   const [informationTab, setInformationTab] = useState(informationTabOptions[0].value)
 
   const variantQuantityRefs = useRef([])
@@ -104,28 +108,33 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
             {product.variants.length > 1 && product.lowestPrice.priceDiscount > 0 && (
               <div className='text-gray_r-12/80'>Harga mulai dari: </div>
             )}
-            {product?.lowestPrice.discountPercentage > 0 && (
-              <div className='flex gap-x-1 items-center mt-2'>
-                <div className='badge-solid-red text-caption-1'>
-                  {product?.lowestPrice.discountPercentage}%
-                </div>
-                <div className='text-gray_r-11 line-through text-caption-1'>
-                  {currencyFormat(product?.lowestPrice.price)}
-                </div>
-              </div>
+            {productPrice.isLoading && <PriceSkeleton />}
+            {productPrice.isFetched && (
+              <>
+                {productPrice?.data?.discount > 0 && (
+                  <div className='flex gap-x-1 items-center mt-2'>
+                    <div className='badge-solid-red text-caption-1'>
+                      {productPrice?.data?.discount}%
+                    </div>
+                    <div className='text-gray_r-11 line-through text-caption-1'>
+                      {currencyFormat(productPrice?.data?.priceExclude)}
+                    </div>
+                  </div>
+                )}
+                <h3 className='text-red_r-11 font-semibold mt-1 text-title-md'>
+                  {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>
+              </>
             )}
-            <h3 className='text-red_r-11 font-semibold mt-1 text-title-md'>
-              {product?.lowestPrice.priceDiscount > 0 ? (
-                currencyFormat(product?.lowestPrice.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>
             <button
               type='button'
               onClick={goToVariantSection}
@@ -166,14 +175,7 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
                     <td>{variant.code}</td>
                     <td>{variant.attributes.join(', ')}</td>
                     <td>
-                      {variant.price.discountPercentage > 0 && (
-                        <>
-                          <span className='line-through text-caption-1 text-gray_r-11'>
-                            {currencyFormat(variant.price.price)}
-                          </span>{' '}
-                        </>
-                      )}
-                      {currencyFormat(variant.price.priceDiscount)}
+                      <VariantPrice id={variant.id} />
                     </td>
                     <td>
                       <input
@@ -245,6 +247,25 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
   )
 }
 
+const VariantPrice = ({ id }) => {
+  const { variantPrice } = useVariantPrice({ id })
+
+  if (variantPrice.isLoading) return <PriceSkeleton />
+
+  return (
+    <>
+      {variantPrice?.data?.discount > 0 && (
+        <>
+          <span className='line-through text-caption-1 text-gray_r-11'>
+            {currencyFormat(variantPrice?.data?.priceExclude)}
+          </span>{' '}
+        </>
+      )}
+      {currencyFormat(variantPrice?.data?.priceExcludeAfterDiscount)}
+    </>
+  )
+}
+
 const informationTabOptions = [
   { value: 'description', label: 'Deskripsi' },
   { value: 'information', label: 'Info Penting' }
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' },
-- 
cgit v1.2.3