Add breadcrumb on detail product, search, brand, category page

4 files changed, 123 insertions, 57 deletions

diff --git a/src/lib/product/components/Product/Breadcrumb.jsx b/src/lib/product/components/Product/Breadcrumb.jsx
new file mode 100644
index 00000000..0554dba5
--- /dev/null
+++ b/src/lib/product/components/Product/Breadcrumb.jsx
@@ -0,0 +1,69 @@
+import odooApi from '@/core/api/odooApi'
+import { createSlug } from '@/core/utils/slug'
+import {
+  Breadcrumb as ChakraBreadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  Skeleton
+} from '@chakra-ui/react'
+import classNames from 'classnames'
+import Link from 'next/link'
+import { useQuery } from 'react-query'
+
+/**
+ * Renders a breadcrumb component based on the provided `productId`.
+ *
+ * @param {Object} props - The properties passed to the component.
+ * @param {number} props.productId - The ID of the product.
+ * @param {string} props.productName - The ID of the product.
+ * @return {ReactElement} The rendered breadcrumb component.
+ */
+const Breadcrumb = ({ productId, productName }) => {
+  const categories = useQuery(
+    `detail/categories/${productId}`,
+    async () => await odooApi('GET', `/api/v1/product/${productId}/category-breadcrumb`),
+    {
+      enabled: !!productId
+    }
+  )
+
+  return (
+    <Skeleton
+      isLoaded={!categories.isLoading}
+      className={classNames({
+        'w-2/3': categories.isLoading,
+        'w-full': !categories.isLoading
+      })}
+    >
+      <ChakraBreadcrumb
+        mb={10}
+        overflowX={'auto'}
+        className='text-caption-2 md:text-body-2 p-4 md:p-0'
+      >
+        <BreadcrumbItem>
+          <BreadcrumbLink as={Link} href='/' className='!text-danger-500 whitespace-nowrap'>
+            Home
+          </BreadcrumbLink>
+        </BreadcrumbItem>
+
+        {categories.data?.map((category) => (
+          <BreadcrumbItem key={category.id}>
+            <BreadcrumbLink
+              as={Link}
+              href={createSlug('/shop/category/', category.name, category.id)}
+              className='!text-danger-500 whitespace-nowrap'
+            >
+              {category.name}
+            </BreadcrumbLink>
+          </BreadcrumbItem>
+        ))}
+
+        <BreadcrumbItem isCurrentPage>
+          <BreadcrumbLink className='whitespace-nowrap'>{productName}</BreadcrumbLink>
+        </BreadcrumbItem>
+      </ChakraBreadcrumb>
+    </Skeleton>
+  )
+}
+
+export default Breadcrumb
diff --git a/src/lib/product/components/Product/Product.jsx b/src/lib/product/components/Product/Product.jsx
index 54490c26..6e983c2e 100644
--- a/src/lib/product/components/Product/Product.jsx
+++ b/src/lib/product/components/Product/Product.jsx
@@ -36,29 +36,21 @@ const Product = ({ product, isVariant = false }) => {
     }
   }, [product, isVariant])
 
-  if (isVariant == true) {
-    return (
-      <>
-        <ProductDesktopVariant
-          product={product}
-          wishlist={wishlist}
-          toggleWishlist={toggleWishlist}
-        />
-        <ProductMobileVariant
-          product={product}
-          wishlist={wishlist}
-          toggleWishlist={toggleWishlist}
-        />
-      </>
-    )
-  } else {
-    return (
-      <>
-        <ProductMobile product={product} wishlist={wishlist} toggleWishlist={toggleWishlist} />
-        <ProductDesktop products={product} wishlist={wishlist} toggleWishlist={toggleWishlist} />
-      </>
-    )
-  }
+  return isVariant == true ? (
+    <>
+      <ProductDesktopVariant
+        product={product}
+        wishlist={wishlist}
+        toggleWishlist={toggleWishlist}
+      />
+      <ProductMobileVariant product={product} wishlist={wishlist} toggleWishlist={toggleWishlist} />
+    </>
+  ) : (
+    <>
+      <ProductMobile product={product} wishlist={wishlist} toggleWishlist={toggleWishlist} />
+      <ProductDesktop products={product} wishlist={wishlist} toggleWishlist={toggleWishlist} />
+    </>
+  )
 }
 
 export default Product
diff --git a/src/lib/product/components/Product/ProductDesktop.jsx b/src/lib/product/components/Product/ProductDesktop.jsx
index 47e98c1a..ceb0cad7 100644
--- a/src/lib/product/components/Product/ProductDesktop.jsx
+++ b/src/lib/product/components/Product/ProductDesktop.jsx
@@ -24,6 +24,7 @@ import ColumnsSLA from './ColumnsSLA'
 import { useProductCartContext } from '@/contexts/ProductCartContext'
 import { Box, Skeleton, Tooltip } from '@chakra-ui/react'
 import { Info } from 'lucide-react'
+import Breadcrumb from './Breadcrumb'
 
 const ProductDesktop = ({ products, wishlist, toggleWishlist }) => {
   const router = useRouter()
@@ -199,47 +200,49 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => {
   return (
     <DesktopView>
       <div className='container mx-auto pt-10'>
+        <Breadcrumb productId={product.id} productName={product.name} />
         <div className='flex'>
           <div className='w-full flex flex-wrap'>
             <div className='w-5/12'>
               <div className='relative mb-2'>
-                {product?.flashSale?.remainingTime > 0 && lowestPrice?.price.discountPercentage > 0 && (
-                  <div className={`absolute bottom-0 w-full`}>
-                    <div className='absolute bottom-0 w-full h-full'>
-                      <ImageNext
-                        src={backgorundFlashSale || '/images/GAMBAR-BG-FLASH-SALE.jpg'}
-                        width={1000}
-                        height={100}
-                      />
-                    </div>
-                    <div className='relative'>
-                      <div className='flex gap-x-2 items-center p-2'>
-                        <div className='bg-yellow-400 rounded-full p-1 h-9 w-20 flex items-center justify-center '>
-                          <span className='text-lg font-bold'>
-                            {Math.floor(product.lowestPrice.discountPercentage)}%
-                          </span>
-                        </div>
-                        <div
-                          className={`bg-red-600 border border-solid border-yellow-400 rounded-full h-9 p-2 flex w-[50%] items-center justify-center gap-x-4`}
-                        >
-                          <ImageNext
-                            src='/images/ICON_FLASH_SALE_WEBSITE_INDOTEKNIK.svg'
-                            width={17}
-                            height={10}
-                          />
-                          <span className='text-white text-lg font-semibold'>
-                            {product?.flashSale?.tag != 'false' || product?.flashSale?.tag
-                              ? product?.flashSale?.tag
-                              : 'FLASH SALE'}
-                          </span>
-                        </div>
-                        <div>
-                          <CountDown2 initialTime={product.flashSale.remainingTime} />
+                {product?.flashSale?.remainingTime > 0 &&
+                  lowestPrice?.price.discountPercentage > 0 && (
+                    <div className={`absolute bottom-0 w-full`}>
+                      <div className='absolute bottom-0 w-full h-full'>
+                        <ImageNext
+                          src={backgorundFlashSale || '/images/GAMBAR-BG-FLASH-SALE.jpg'}
+                          width={1000}
+                          height={100}
+                        />
+                      </div>
+                      <div className='relative'>
+                        <div className='flex gap-x-2 items-center p-2'>
+                          <div className='bg-yellow-400 rounded-full p-1 h-9 w-20 flex items-center justify-center '>
+                            <span className='text-lg font-bold'>
+                              {Math.floor(product.lowestPrice.discountPercentage)}%
+                            </span>
+                          </div>
+                          <div
+                            className={`bg-red-600 border border-solid border-yellow-400 rounded-full h-9 p-2 flex w-[50%] items-center justify-center gap-x-4`}
+                          >
+                            <ImageNext
+                              src='/images/ICON_FLASH_SALE_WEBSITE_INDOTEKNIK.svg'
+                              width={17}
+                              height={10}
+                            />
+                            <span className='text-white text-lg font-semibold'>
+                              {product?.flashSale?.tag != 'false' || product?.flashSale?.tag
+                                ? product?.flashSale?.tag
+                                : 'FLASH SALE'}
+                            </span>
+                          </div>
+                          <div>
+                            <CountDown2 initialTime={product.flashSale.remainingTime} />
+                          </div>
                         </div>
                       </div>
                     </div>
-                  </div>
-                )}
+                  )}
                 <Image
                   src={product.image}
                   alt={product.name}
diff --git a/src/lib/product/components/Product/ProductMobile.jsx b/src/lib/product/components/Product/ProductMobile.jsx
index ffa75f72..402490f7 100644
--- a/src/lib/product/components/Product/ProductMobile.jsx
+++ b/src/lib/product/components/Product/ProductMobile.jsx
@@ -19,6 +19,7 @@ import { gtagAddToCart } from '@/core/utils/googleTag'
 import odooApi from '@/core/api/odooApi'
 import ImageNext from 'next/image'
 import CountDown2 from '@/core/components/elements/CountDown/CountDown2'
+import Breadcrumb from './Breadcrumb'
 
 const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
   const router = useRouter()
@@ -160,6 +161,7 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
 
   return (
     <MobileView>
+      <Breadcrumb productId={product.id} productName={product.name} />
       <div className='relative'>
         {product?.flashSale?.remainingTime > 0 && activeVariant?.price.discountPercentage > 0 && (
           <div className={`absolute bottom-0 w-full`}>