From 0de043b180c1529b2d57d900523eece703e543a2 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Fri, 31 Mar 2023 16:39:25 +0700
Subject: cart, product

---
 .../product/components/Product/ProductDesktop.jsx  | 74 ++++++++++++----------
 1 file changed, 42 insertions(+), 32 deletions(-)

(limited to 'src/lib/product/components/Product/ProductDesktop.jsx')

diff --git a/src/lib/product/components/Product/ProductDesktop.jsx b/src/lib/product/components/Product/ProductDesktop.jsx
index c7554242..e0d2a959 100644
--- a/src/lib/product/components/Product/ProductDesktop.jsx
+++ b/src/lib/product/components/Product/ProductDesktop.jsx
@@ -3,19 +3,32 @@ import Link from '@/core/components/elements/Link/Link'
 import DesktopView from '@/core/components/views/DesktopView'
 import currencyFormat from '@/core/utils/currencyFormat'
 import { HeartIcon } from '@heroicons/react/24/outline'
-import { useRef, useState } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
 import LazyLoad from 'react-lazy-load'
 import ProductSimilar from '../ProductSimilar'
 import { toast } from 'react-hot-toast'
 import { updateItemCart } from '@/core/utils/cart'
-import useProductPrice from '../../hooks/useProductPrice'
-import PriceSkeleton from '@/core/components/elements/Skeleton/PriceSkeleton'
 import { useRouter } from 'next/router'
 import { createSlug } from '@/core/utils/slug'
 
 const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
   const router = useRouter()
-  const { productPrice } = useProductPrice({ id: product.id })
+
+  const [lowestPrice, setLowestPrice] = useState(null)
+
+  const getLowestPrice = useCallback(() => {
+    const prices = product.variants.map((variant) => variant.price)
+    const lowest = prices.reduce((lowest, price) => {
+      return price.priceDiscount < lowest.priceDiscount ? price : lowest
+    }, prices[0])
+    return lowest
+  }, [product])
+
+  useEffect(() => {
+    const lowest = getLowestPrice()
+    setLowestPrice(lowest)
+  }, [getLowestPrice])
+
   const [informationTab, setInformationTab] = useState(informationTabOptions[0].value)
 
   const variantQuantityRefs = useRef([])
@@ -63,8 +76,8 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
 
   const productSimilarQuery = [
     product?.name.replace(/[()/"&]/g, ''),
-    `fq=-product_id:${product.id}`,
-    `fq=-manufacture_id:${product.manufacture?.id || 0}`
+    `fq=-product_id_i:${product.id}`,
+    `fq=-manufacture_id_i:${product.manufacture?.id || 0}`
   ].join('&')
 
   return (
@@ -125,33 +138,30 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
             {product.variants.length > 1 && product.lowestPrice.priceDiscount > 0 && (
               <div className='text-gray_r-12/80'>Harga mulai dari: </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-12/90 font-normal text-h-sm'>
-                      Hubungi kami untuk dapatkan harga terbaik,&nbsp;
-                      <a href='https://wa.me/' className='text-red_r-11 underline'>
-                        klik disini
-                      </a>
-                    </span>
-                  )}
-                </h3>
-              </>
+
+            {lowestPrice?.discountPercentage > 0 && (
+              <div className='flex gap-x-1 items-center mt-2'>
+                <div className='badge-solid-red text-caption-1'>
+                  {lowestPrice?.discountPercentage}%
+                </div>
+                <div className='text-gray_r-11 line-through text-caption-1'>
+                  {currencyFormat(lowestPrice?.price)}
+                </div>
+              </div>
             )}
+            <h3 className='text-red_r-11 font-semibold mt-1 text-title-md'>
+              {lowestPrice?.priceDiscount > 0 ? (
+                currencyFormat(lowestPrice?.priceDiscount)
+              ) : (
+                <span className='text-gray_r-12/90 font-normal text-h-sm'>
+                  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}
-- 
cgit v1.2.3