product similar product detail and top banner

4 files changed, 56 insertions, 1 deletions

diff --git a/src/core/components/elements/Navbar/NavbarDesktop.jsx b/src/core/components/elements/Navbar/NavbarDesktop.jsx
index 1ced4af4..ae4e09dd 100644
--- a/src/core/components/elements/Navbar/NavbarDesktop.jsx
+++ b/src/core/components/elements/Navbar/NavbarDesktop.jsx
@@ -14,6 +14,7 @@ import { useEffect, useState } from 'react'
 import useAuth from '@/core/hooks/useAuth'
 import NavbarUserDropdown from './NavbarUserDropdown'
 import { getCart } from '@/core/utils/cart'
+import TopBanner from './TopBanner'
 
 const Search = dynamic(() => import('./Search'))
 
@@ -38,6 +39,7 @@ const NavbarDesktop = () => {
 
   return (
     <DesktopView>
+      <TopBanner />
       <div className='py-3 bg-warning-400' id='desktop-nav-top'>
         <div className='container mx-auto flex justify-between'>
           <Link href='/' className='!text-gray_r-12'>
diff --git a/src/core/components/elements/Navbar/NavbarMobile.jsx b/src/core/components/elements/Navbar/NavbarMobile.jsx
index 0502dba5..072ed572 100644
--- a/src/core/components/elements/Navbar/NavbarMobile.jsx
+++ b/src/core/components/elements/Navbar/NavbarMobile.jsx
@@ -7,6 +7,7 @@ import dynamic from 'next/dynamic'
 import IndoteknikLogo from '@/images/logo.png'
 import { useEffect, useState } from 'react'
 import { getCart } from '@/core/utils/cart'
+import TopBanner from './TopBanner'
 
 const Search = dynamic(() => import('./Search'))
 
@@ -30,6 +31,7 @@ const NavbarMobile = () => {
 
   return (
     <MobileView>
+      <TopBanner/>
       <nav className='px-4 py-2 pb-3 sticky top-0 z-50 bg-white shadow'>
         <div className='flex justify-between items-center mb-2'>
           <Link href='/'>
diff --git a/src/core/components/elements/Navbar/TopBanner.jsx b/src/core/components/elements/Navbar/TopBanner.jsx
new file mode 100644
index 00000000..69c2ab05
--- /dev/null
+++ b/src/core/components/elements/Navbar/TopBanner.jsx
@@ -0,0 +1,25 @@
+import odooApi from '@/core/api/odooApi'
+import { useQuery } from 'react-query'
+import Image from 'next/image'
+
+const TopBanner = () => {
+  const fetchTopBanner = async () => await odooApi('GET', '/api/v1/banner?type=top-banner')
+  const topBanner = useQuery('topBanner', fetchTopBanner)
+
+  return (
+    topBanner.isFetched &&
+    topBanner.data?.length > 0 && (
+      <div>
+        <Image
+          src={topBanner.data[0].image}
+          alt={topBanner.data[0].name}
+          width={1440}
+          height={40}
+          className='object-cover object-center h-full mx-auto'
+        />
+      </div>
+    )
+  )
+}
+
+export default TopBanner
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>