From 556e7e226a2043d43bc55bf0ff2118294bb9f330 Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Mon, 29 Jul 2024 13:32:39 +0700
Subject: <iman> update lob category

---
 src/lib/lob/components/Breadcrumb.jsx             |  4 +-
 src/lib/product/components/LobSectionCategory.jsx | 89 +++++++++++++++++++++++
 src/lib/product/components/ProductSearch.jsx      | 54 ++++++--------
 3 files changed, 115 insertions(+), 32 deletions(-)
 create mode 100644 src/lib/product/components/LobSectionCategory.jsx

(limited to 'src/lib')

diff --git a/src/lib/lob/components/Breadcrumb.jsx b/src/lib/lob/components/Breadcrumb.jsx
index 04d9a691..5722fd39 100644
--- a/src/lib/lob/components/Breadcrumb.jsx
+++ b/src/lib/lob/components/Breadcrumb.jsx
@@ -19,7 +19,7 @@ import { useQuery } from 'react-query'
 const Breadcrumb = ({ categoryId }) => {
     const breadcrumbs = useQuery(
         `lob-breadcrumbs/${categoryId}`,
-        async () => await odooApi('GET', `/api/v1/lob_homepage?lob_id=${categoryId}`)
+        async () => await odooApi('GET', `/api/v1/lob_homepage/${categoryId}/category_id`)
     )
   return (
     <div className='container mx-auto py-4 md:py-6'>
@@ -31,7 +31,7 @@ const Breadcrumb = ({ categoryId }) => {
             </BreadcrumbLink>
           </BreadcrumbItem>
 
-          {breadcrumbs.data?.map((category, index) => (
+          {breadcrumbs?.data?.map((category, index) => (
             <BreadcrumbItem key={index} isCurrentPage={index === breadcrumbs.data.length - 1}>
               {index === breadcrumbs.data.length - 1 ? (
                 <BreadcrumbLink className='whitespace-nowrap'>{category.industries}</BreadcrumbLink>
diff --git a/src/lib/product/components/LobSectionCategory.jsx b/src/lib/product/components/LobSectionCategory.jsx
new file mode 100644
index 00000000..5e9934c3
--- /dev/null
+++ b/src/lib/product/components/LobSectionCategory.jsx
@@ -0,0 +1,89 @@
+import Image from "next/image";
+import Link from 'next/link';
+import { createSlug } from '@/core/utils/slug';
+import useDevice from '@/core/hooks/useDevice';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import 'swiper/css';
+import { useQuery } from 'react-query';
+import { useRouter } from 'next/router';
+import {
+    ChevronDownIcon,
+    ChevronUpIcon, // Import ChevronUpIcon for toggling
+    DocumentCheckIcon,
+    HeartIcon,
+} from '@heroicons/react/24/outline';
+import { useState } from 'react'; // Import useState
+import { getIdFromSlug } from '@/core/utils/slug'
+
+const LobSectionCategory = ({ categories }) => {
+    const { isDesktop, isMobile } = useDevice();
+    const [isOpenCategory, setIsOpenCategory] = useState(false); // State to manage category visibility
+
+    const handleToggleCategories = () => {
+        setIsOpenCategory(!isOpenCategory);
+    };
+    console.log("categories",categories[0]?.categoryIds)
+
+    const displayedCategories = categories[0]?.categoryIds;
+
+    return (
+        <section>
+            {isDesktop && (
+                <div className="group/item grid grid-flow-col gap-y-2 gap-x-2 w-full h-full">
+                    {displayedCategories?.map((category) => (
+                        <Link href={createSlug('/shop/category/', category?.name, category?.id)} key={category?.id} passHref>
+                            <div className="group transition-colors duration-300 ">
+                                <div className="KartuInti h-36 w-26 max-w-sm lg:max-w-full flex flex-col border-[2px] border-gray-200 group-hover:border-red-400 rounded relative ">
+                                    <div className="flex items-center justify-start h-full px-1 flex-row ">
+                                        <Image className="h-full w-full" src={category?.image ? category?.image : 'https://erp.indoteknik.com/web/image?model=x_banner.banner&id=5&field=x_banner_image&unique=09202023100557'} width={56} height={48} quality={100} alt={category?.name} />
+                                        {/* <h2 className="text-gray-700 group-hover:text-[#E20613] line-clamp-2 content-center h-fit w-60 px-1 font-semibold text-sm text-start">{category?.name}</h2> */}
+                                    </div>
+                                </div>
+                            </div>
+                        </Link>
+                    ))}
+                </div>
+            )}
+
+            {isMobile && (
+                <div className="py-4">
+                    <Swiper slidesPerView={2.3} spaceBetween={10}>
+                        {displayedCategories.map((category) => (
+                            <SwiperSlide key={category?.id}>
+                                <Link href={createSlug('/shop/category/', category?.name, category?.id)} passHref>
+                                    <div className="group transition-colors duration-300">
+                                        <div className="KartuInti min-h-16 max-h-16 w-26 max-w-sm lg:max-w-full flex flex-col border-[2px] border-gray-200 group-hover:bg-red-200 group-hover:border-red-400 rounded relative">
+                                            <div className="flex items-center justify-center h-full px-1 flex-row">
+                                                <Image
+                                                    src={category?.image1920 ? category?.image1920 : '/images/noimage.jpeg'}
+                                                    width={56}
+                                                    height={48}
+                                                    alt={category?.name}
+                                                />
+                                                <h2 className="text-gray-700 group-hover:text-[#E20613] line-clamp-2 content-center h-fit w-60 px-1 font-semibold text-sm text-start">
+                                                    {category?.name}
+                                                </h2>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </Link>
+                            </SwiperSlide>
+                        ))}
+                    </Swiper>
+                    {categories.length > 10 && (
+                        <div className="w-full flex justify-end mt-4">
+                            <button
+                                onClick={handleToggleCategories}
+                                className="flex justify-end mt-4 bg-red-500 text-white text-sm px-4 py-2 rounded"
+                            >
+                                {isOpenCategory ? 'Sembunyikan Semua' : 'Lihat Semua'}
+                            </button>
+                        </div>
+                    )}
+                </div>
+            )}
+        </section>
+    )
+}
+
+export default LobSectionCategory
diff --git a/src/lib/product/components/ProductSearch.jsx b/src/lib/product/components/ProductSearch.jsx
index 2da84d63..12e3b358 100644
--- a/src/lib/product/components/ProductSearch.jsx
+++ b/src/lib/product/components/ProductSearch.jsx
@@ -27,6 +27,7 @@ import ProductSearchSkeleton from './Skeleton/ProductSearchSkeleton';
 import SideBanner from '~/modules/side-banner';
 import FooterBanner from '~/modules/footer-banner';
 import CategorySection from './CategorySection';
+import LobSectionCategory from './LobSectionCategory';
 import { getIdFromSlug } from '@/core/utils/slug'
 import { data } from 'autoprefixer';
 
@@ -48,7 +49,6 @@ const ProductSearch = ({
   const [dataCategoriesProduct, setDataCategoriesProduct] = useState([])
   const [dataCategoriesLob, setDataCategoriesLob] = useState([])
   const categoryId = getIdFromSlug(prefixUrl)
-  console.log("categoryId",categoryId ) 
   const [data, setData] = useState([])
   const [dataLob, setDataLob] = useState([]);
   if (defaultBrand) query.brand = defaultBrand.toLowerCase();
@@ -64,14 +64,14 @@ const ProductSearch = ({
       loadProduct();
     }else if(prefixUrl.includes('lob')){
       const loadProduct = async () => {
-        const lobData = await odooApi('GET', `/api/v1/lob_homepage?lob_id=${categoryId}`);
-        console.log("lobData",lobData ) 
+        const lobData = await odooApi('GET', `/api/v1/lob_homepage/${categoryId}/category_id`);
+         
         if (lobData) {
           setDataLob(lobData);
         }
       };
       loadProduct();
-      console.log("dataLob",dataLob ) 
+      
     }
   }, [categoryId]);
   
@@ -100,36 +100,27 @@ const ProductSearch = ({
       };
       setFinalQuery(newQuery);
     } else if (prefixUrl.includes('lob')){
-      console.log("prefixUrl",prefixUrl) 
+      
       const fetchCategoryData = async () => {
         if (dataLob[0]?.categoryIds) {
-          console.log("dataLob[0]?.categoryIds",dataLob[0]?.categoryIds) 
+          
           for (const cate of dataLob[0].categoryIds) {
-            console.log("cate",cate) 
-            const getCategoriesId = await odooApi('GET', `/api/v1/category/numFound?parent_id=${cate.id}`);
-            console.log("getCategoriesId",getCategoriesId) 
-            if (getCategoriesId) {
-              const ids = collectIds(getCategoriesId);
-              console.log("ids",ids) 
-              dataIdCategories.push(ids)
-              console.log("dataIdCategories",dataIdCategories) 
-            }
+           
+            dataIdCategories.push(cate.childId)
           }
           
-          console.log("dataIdCategories2",dataIdCategories) 
-          // setData(dataIdCategories)
-          // console.log("data",data) 
+        
           const mergedArray = dataIdCategories.flat();
-          console.log("mergedArray",mergedArray) 
+         
           const newQuery = {
             fq: `category_id_ids:(${mergedArray.join(' OR ')})`,
             page,
             brand : router.query.brand? router.query.brand : '',
             category : router.query.category? router.query.category : '',
           };
-          console.log("newQuery",newQuery) 
+       
           setFinalQuery(newQuery);
-          console.log("final query",finalQuery)
+         
         }
       };
       fetchCategoryData();
@@ -223,17 +214,18 @@ const ProductSearch = ({
   }, [q]);
  
   useEffect(() => {
-    const loadCategories = async () => {
-      const getCategories = await odooApi('GET', `/api/v1/category/child?parent_id=${categoryId}`)
-     if(getCategories){
-      setDataCategories(getCategories)
-     }
+    if(prefixUrl.includes('category')){
+      const loadCategories = async () => {
+        const getCategories = await odooApi('GET', `/api/v1/category/child?parent_id=${categoryId}`)
+       if(getCategories){
+        setDataCategories(getCategories)
+       }
+      }
+      loadCategories()
     }
-    loadCategories()
   }, [])
 
-  // console.log("query asal ", query)
-  // console.log("queryFinal", queryFinal)
+
 
 
   const brands = [];
@@ -381,7 +373,7 @@ const ProductSearch = ({
 
   const isNotReadyStockPage = router.asPath !== '/shop/search?orderBy=stock';
   
-  
+  console.log("finalQuery",finalQuery)
 
   return (
     <>
@@ -443,6 +435,7 @@ const ProductSearch = ({
               SpellingComponent
             )}
           </div>
+          <LobSectionCategory categories={dataLob}/>
           <CategorySection categories={dataCategories}/>
 
           {productFound > 0 && (
@@ -534,6 +527,7 @@ const ProductSearch = ({
           </div>
 
           <div className='w-9/12 pl-6'>
+            <LobSectionCategory categories={dataLob}/>
             <CategorySection categories={dataCategories}/>
             {bannerPromotionHeader && bannerPromotionHeader?.image && (
               <div className='mb-3'>
-- 
cgit v1.2.3