variant and product price

1 files changed, 71 insertions, 40 deletions

diff --git a/src/lib/product/components/ProductCard.jsx b/src/lib/product/components/ProductCard.jsx
index 5710e9ea..e48ab88a 100644
--- a/src/lib/product/components/ProductCard.jsx
+++ b/src/lib/product/components/ProductCard.jsx
@@ -2,20 +2,11 @@ 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 { useEffect, useState } from 'react'
-import productPriceApi from '../api/productPriceApi'
+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' }) => {
-  const [price, setPrice] = useState(null)
-
-  useEffect(() => {
-    const loadPrice = async () => {
-      const dataPrice = await productPriceApi({ id: product.id })
-      // console.log(dataPrice)
-    }
-    loadPrice()
-  })
-
   if (variant == 'vertical') {
     return (
       <div className='rounded shadow-sm border border-gray_r-4 h-full bg-white'>
@@ -57,22 +48,9 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
           >
             {product?.name}
           </Link>
-          {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>
+          <LazyLoadComponent>
+            <ProductCardPrice variant='vertical' id={product.id} />
+          </LazyLoadComponent>
           {product?.stockTotal > 0 && (
             <div className='flex gap-x-1'>
               <div className='badge-solid-red'>Ready Stock</div>
@@ -128,30 +106,83 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
             {product?.name}
           </Link>
 
-          {product?.lowestPrice?.discountPercentage > 0 && (
+          <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 && (
             <div className='flex gap-x-1 mb-1 items-center'>
-              <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 className='text-gray_r-11 line-through text-[11px] sm:text-caption-2'>
+                {currencyFormat(
+                  productPrice?.data?.priceStartFrom || productPrice?.data?.priceExclude
+                )}
               </div>
+              <div className='badge-solid-red'>{productPrice?.data?.discount}%</div>
             </div>
           )}
 
           <div className='text-red_r-11 font-semibold mb-2'>
-            {product?.lowestPrice?.priceDiscount > 0 ? (
-              currencyFormat(product?.lowestPrice?.priceDiscount)
+            {productPrice?.data?.priceExcludeAfterDiscount > 0 ? (
+              currencyFormat(
+                productPrice?.data?.priceDiscStartFrom ||
+                  productPrice?.data?.priceExcludeAfterDiscount
+              )
             ) : (
               <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>
-              <div className='badge-gray'>{product?.stockTotal > 5 ? '> 5' : '< 5'}</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>
             </div>
           )}
-        </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>
+        </>
+      )
     )
   }
 }