product similar product detail and top banner

1 files changed, 27 insertions, 1 deletions

diff --git a/src/lib/product/components/Product/ProductDesktop.jsx b/src/lib/product/components/Product/ProductDesktop.jsx
index bb2b2db9..b1ec971b 100644
--- a/src/lib/product/components/Product/ProductDesktop.jsx
+++ b/src/lib/product/components/Product/ProductDesktop.jsx
@@ -11,7 +11,8 @@ import { updateItemCart } from '@/core/utils/cart'
 import { useRouter } from 'next/router'
 import { createSlug } from '@/core/utils/slug'
 import BottomPopup from '@/core/components/elements/Popup/BottomPopup'
-import { Toast } from 'flowbite-react'
+import ProductCard from '../ProductCard'
+import productSimilarApi from '../../api/productSimilarApi'
 
 const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
   const router = useRouter()
@@ -85,6 +86,17 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
     `fq=-manufacture_id_i:${product.manufacture?.id || 0}`
   ].join('&')
 
+  const [productSimilarInBrand, setProductSimilarInBrand] = useState(null)
+
+  useEffect(() => {
+    const loadProductSimilarInBrand = async () => {
+      const productSimilarQuery = [product?.name, `fq=-product_id_i:${product.id}`].join('&')
+      const dataProductSimilar = await productSimilarApi({ query: productSimilarQuery })
+      setProductSimilarInBrand(dataProductSimilar.products)
+    }
+    if (!productSimilarInBrand) loadProductSimilarInBrand()
+  }, [product, productSimilarInBrand])
+
   return (
     <DesktopView>
       <div className='container mx-auto pt-10'>
@@ -209,6 +221,20 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
                 Wishlist
               </button>
             </div>
+
+            <div className='border border-gray_r-6 h-full overflow-auto mt-4'>
+              <div className='font-medium text-center p-4 bg-gray_r-1 border-b border-gray_r-6 sticky top-0 z-10'>
+                Produk Serupa
+              </div>
+              <div className='h-full divide-y divide-gray_r-6 max-h-40'>
+                {productSimilarInBrand &&
+                  productSimilarInBrand?.map((product) => (
+                    <div className='py-2' key={product.id}>
+                      <ProductCard product={product} variant='horizontal' />
+                    </div>
+                  ))}
+              </div>
+            </div>
           </div>
         </div>