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

---
 src/lib/product/components/ProductCard.jsx | 99 +++++++++---------------------
 1 file changed, 29 insertions(+), 70 deletions(-)

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

diff --git a/src/lib/product/components/ProductCard.jsx b/src/lib/product/components/ProductCard.jsx
index e48ab88a..df709394 100644
--- a/src/lib/product/components/ProductCard.jsx
+++ b/src/lib/product/components/ProductCard.jsx
@@ -2,9 +2,6 @@ import Image from '@/core/components/elements/Image/Image'
 import Link from '@/core/components/elements/Link/Link'
 import currencyFormat from '@/core/utils/currencyFormat'
 import { createSlug } from '@/core/utils/slug'
-import useProductPrice from '../hooks/useProductPrice'
-import { LazyLoadComponent } from 'react-lazy-load-image-component'
-import PriceSkeleton from '@/core/components/elements/Skeleton/PriceSkeleton'
 
 const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
   if (variant == 'vertical') {
@@ -48,9 +45,23 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
           >
             {product?.name}
           </Link>
-          <LazyLoadComponent>
-            <ProductCardPrice variant='vertical' id={product.id} />
-          </LazyLoadComponent>
+          {product?.lowestPrice.discountPercentage > 0 && (
+            <div className='flex gap-x-1 mb-1 items-center'>
+              <div className='text-gray_r-11 line-through text-[11px] sm:text-caption-2'>
+                {currencyFormat(product.lowestPrice.price)}
+              </div>
+              <div className='badge-solid-red'>{product?.lowestPrice.discountPercentage}%</div>
+            </div>
+          )}
+
+          <div className='text-red_r-11 font-semibold mb-2'>
+            {product?.lowestPrice.priceDiscount > 0 ? (
+              currencyFormat(product?.lowestPrice.priceDiscount)
+            ) : (
+              <a href='https://wa.me/'>Call for price</a>
+            )}
+          </div>
+
           {product?.stockTotal > 0 && (
             <div className='flex gap-x-1'>
               <div className='badge-solid-red'>Ready Stock</div>
@@ -106,83 +117,31 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
             {product?.name}
           </Link>
 
-          <LazyLoadComponent>
-            <ProductCardPrice variant='horizontal' id={product.id} />
-          </LazyLoadComponent>
-          {product?.stockTotal > 0 && (
-            <div className='flex gap-x-1'>
-              <div className='badge-solid-red'>Ready Stock</div>
-              <div className='badge-gray'>{product?.stockTotal > 5 ? '> 5' : '< 5'}</div>
-            </div>
-          )}
-        </div>
-      </div>
-    )
-  }
-}
-
-const ProductCardPrice = ({ variant, id }) => {
-  const { productPrice } = useProductPrice({ id })
-
-  if (productPrice.isLoading) return <PriceSkeleton />
-
-  if (variant == 'vertical') {
-    return (
-      productPrice.isFetched && (
-        <>
-          {productPrice?.data?.discount > 0 && (
+          {product?.lowestPrice?.discountPercentage > 0 && (
             <div className='flex gap-x-1 mb-1 items-center'>
-              <div className='text-gray_r-11 line-through text-[11px] sm:text-caption-2'>
-                {currencyFormat(
-                  productPrice?.data?.priceStartFrom || productPrice?.data?.priceExclude
-                )}
+              <div className='badge-solid-red'>{product?.lowestPrice?.discountPercentage}%</div>
+              <div className='text-gray_r-11 line-through text-caption-2'>
+                {currencyFormat(product?.lowestPrice?.price)}
               </div>
-              <div className='badge-solid-red'>{productPrice?.data?.discount}%</div>
             </div>
           )}
 
           <div className='text-red_r-11 font-semibold mb-2'>
-            {productPrice?.data?.priceExcludeAfterDiscount > 0 ? (
-              currencyFormat(
-                productPrice?.data?.priceDiscStartFrom ||
-                  productPrice?.data?.priceExcludeAfterDiscount
-              )
+            {product?.lowestPrice?.priceDiscount > 0 ? (
+              currencyFormat(product?.lowestPrice?.priceDiscount)
             ) : (
               <a href='https://wa.me/'>Call for price</a>
             )}
           </div>
-        </>
-      )
-    )
-  }
 
-  if (variant == 'horizontal') {
-    return (
-      productPrice.isFetched && (
-        <>
-          {productPrice?.data?.discount > 0 && (
-            <div className='flex gap-x-1 mb-1 items-center'>
-              <div className='badge-solid-red'>{productPrice?.data?.discount}%</div>
-              <div className='text-gray_r-11 line-through text-caption-2'>
-                {currencyFormat(
-                  productPrice?.data?.priceStartFrom || productPrice?.data?.priceExclude
-                )}
-              </div>
+          {product?.stockTotal > 0 && (
+            <div className='flex gap-x-1'>
+              <div className='badge-solid-red'>Ready Stock</div>
+              <div className='badge-gray'>{product?.stockTotal > 5 ? '> 5' : '< 5'}</div>
             </div>
           )}
-
-          <div className='text-red_r-11 font-semibold mb-2'>
-            {productPrice?.data?.priceExcludeAfterDiscount > 0 ? (
-              currencyFormat(
-                productPrice?.data?.priceDiscStartFrom ||
-                  productPrice?.data?.priceExcludeAfterDiscount
-              )
-            ) : (
-              <a href='https://wa.me/'>Call for price</a>
-            )}
-          </div>
-        </>
-      )
+        </div>
+      </div>
     )
   }
 }
-- 
cgit v1.2.3