<iman> add feature category lob

8 files changed, 108 insertions, 10 deletions

diff --git a/src/lib/home/api/CategoryPilihanApi.js b/src/lib/home/api/CategoryPilihanApi.js
new file mode 100644
index 00000000..8a0b38d3
--- /dev/null
+++ b/src/lib/home/api/CategoryPilihanApi.js
@@ -0,0 +1,8 @@
+import odooApi from '@/core/api/odooApi'
+
+const categoryPilihanApi = async () => {
+    const dataCategoryPilihan = await odooApi('GET', '/api/v1/lob_homepage')
+    return dataCategoryPilihan
+}
+
+export default categoryPilihanApi
diff --git a/src/lib/home/components/CategoryDynamic.jsx b/src/lib/home/components/CategoryDynamic.jsx
index bbba2ceb..6ab03ec3 100644
--- a/src/lib/home/components/CategoryDynamic.jsx
+++ b/src/lib/home/components/CategoryDynamic.jsx
@@ -21,7 +21,7 @@ const CategoryDynamic = () => {
           const countLevel1 = await odooApi('GET', `/api/v1/category/numFound?parent_id=${category.categoryIdI}`);
           // console.log("countLevel1.child",countLevel1)
           
-          updatedCategoryData[category.categoryIdI] = countLevel1.numFound;
+          updatedCategoryData[category.categoryIdI] = countLevel1?.numFound;
           
           
           // Calculate level 2 products for each sub-category
diff --git a/src/lib/home/components/CategoryPilihan.jsx b/src/lib/home/components/CategoryPilihan.jsx
index ea78b349..9f184709 100644
--- a/src/lib/home/components/CategoryPilihan.jsx
+++ b/src/lib/home/components/CategoryPilihan.jsx
@@ -6,9 +6,11 @@ import { useEffect, useState } from 'react';
 import { bannerApi } from '../../../api/bannerApi';
 const { useQuery } = require('react-query')
 import { HeroBannerSkeleton } from '../../../components/skeleton/BannerSkeleton';
-
+import useCategoryPilihan from '../hooks/useCategoryPilihan';
 
 const CategoryPilihan = ({ id, categories }) => {
+    const { categoryPilihan } = useCategoryPilihan();
+    console.log("categoryPilihan",categoryPilihan)
     const heroBanner = useQuery('categoryPilihan', bannerApi({ type: 'banner-category-list' }));
       return (
           <section>
@@ -37,19 +39,19 @@ const CategoryPilihan = ({ id, categories }) => {
                 )}
         </div>
         <div className="group/item grid grid-cols-6 gap-y-2 w-full h-full col-span-2 ">
-                {categories?.map((category) => (
+                {categoryPilihan?.data?.map((category) => (
                     <div className="KartuInti h-48 w-60 max-w-sm   lg:max-w-full flex flex-col   border-[1px] border-gray-200  relative group">
                         <div className='KartuB absolute h-48 w-60 inset-0 flex items-center justify-center '>
                             <div className="group/edit flex items-center justify-end h-48 w-60  flex-col group-hover/item:visible">
                                 <div className=' h-36 flex justify-end items-end'>
-                                    <Image className='group-hover:scale-105 transition-transform duration-300 ' src={category?.image1920? category?.image1920 : '/images/noimage.jpeg'}  width={120} height={120} alt={category?.name} />
+                                    <Image className='group-hover:scale-105 transition-transform duration-300 ' src={category?.image? category?.image : '/images/noimage.jpeg'}  width={120} height={120} alt={category?.name} />
                                 </div>
-                                <h2 className="text-gray-700 content-center h-12 border-t-[1px] px-1 w-60 border-gray-200 font-normal text-sm text-center">{category?.name}</h2>
+                                <h2 className="text-gray-700 content-center h-12 border-t-[1px] px-1 w-60 border-gray-200 font-normal text-sm text-center">{category?.industries}</h2>
                             </div>
                         </div>
                         <div className='KartuA relative inset-0  flex h-36 w-60   items-center justify-center opacity-0 group-hover:opacity-75 group-hover:bg-[#E20613] transition-opacity '>
                             <Link
-                                href={createSlug('/shop/category/', category?.name, category?.id)}
+                                href={createSlug('/shop/lob/', category?.industries, category?.id)}
                                 className='category-mega-box__parent text-white   rounded-lg'
                             >
                                 Lihat semua
diff --git a/src/lib/home/hooks/useCategoryPilihan.js b/src/lib/home/hooks/useCategoryPilihan.js
new file mode 100644
index 00000000..12a86f7e
--- /dev/null
+++ b/src/lib/home/hooks/useCategoryPilihan.js
@@ -0,0 +1,13 @@
+import categoryPilihanApi from '../api/CategoryPilihanApi'
+import { useQuery } from 'react-query'
+
+const useCategoryPilihan = () => {
+  const fetchCategoryPilihan = async () => await categoryPilihanApi()
+  const { isLoading, data } = useQuery('categoryPilihanApi', fetchCategoryPilihan)
+
+  return {
+    categoryPilihan: { data, isLoading }
+  }
+}
+
+export default useCategoryPilihan
\ No newline at end of file
diff --git a/src/lib/product/components/ProductSearch.jsx b/src/lib/product/components/ProductSearch.jsx
index cd7cda9f..735ef58e 100644
--- a/src/lib/product/components/ProductSearch.jsx
+++ b/src/lib/product/components/ProductSearch.jsx
@@ -78,8 +78,9 @@ const ProductSearch = ({
       page: 1,
       brand : router.query.brand? router.query.brand : '',
     };
+    console.log("newQuery",newQuery)
     setFinalQuery(newQuery);
-  }, [dataCategoriesProduct]);
+  }, [dataCategoriesProduct, prefixUrl, prefixUrl, finalQuery, q, limit, orderBy]);
 
   useEffect(() => {
     if (prefixUrl.includes('category')) {
@@ -178,7 +179,7 @@ const ProductSearch = ({
     loadCategories()
   }, [])
 
-  
+  console.log("queryFinal", queryFinal)
 
 
   const brands = [];
diff --git a/src/pages/api/shop/product-homepage.js b/src/pages/api/shop/product-homepage.js
index 02c01ee0..61732c77 100644
--- a/src/pages/api/shop/product-homepage.js
+++ b/src/pages/api/shop/product-homepage.js
@@ -36,7 +36,8 @@ const respoonseMap = (productHomepage, products) => {
     name: productHomepage.name_s,
     image: productHomepage.image_s,
     url: productHomepage.url_s,
-    products: products
+    products: products,
+    categoryIds: productHomepage.category_id_ids,
   }
 
   return productMapped
diff --git a/src/pages/api/shop/search.js b/src/pages/api/shop/search.js
index b6b8c795..66f517ae 100644
--- a/src/pages/api/shop/search.js
+++ b/src/pages/api/shop/search.js
@@ -56,7 +56,7 @@ export default async function handler(req, res) {
     `start=${parseInt(offset)}`,
     `rows=${limit}`,
     `sort=${paramOrderBy}`,
-    `fq=-publish_b:false`,
+    // `fq=-publish_b:false`,
   ];
 
   if (priceFrom > 0 || priceTo > 0) {
diff --git a/src/pages/shop/lob/[slug].jsx b/src/pages/shop/lob/[slug].jsx
new file mode 100644
index 00000000..be8db639
--- /dev/null
+++ b/src/pages/shop/lob/[slug].jsx
@@ -0,0 +1,73 @@
+import _ from 'lodash';
+import dynamic from 'next/dynamic';
+import { useRouter } from 'next/router';
+import Seo from '@/core/components/Seo';
+import { getIdFromSlug, getNameFromSlug } from '@/core/utils/slug';
+import Breadcrumb from '@/lib/category/components/Breadcrumb';
+import { useEffect, useState } from 'react';
+import odooApi from '@/core/api/odooApi';
+
+const BasicLayout = dynamic(() => import('@/core/components/layouts/BasicLayout'));
+const ProductSearch = dynamic(() => import('@/lib/product/components/ProductSearch'));
+const CategorySection = dynamic(() => import('@/lib/product/components/CategorySection'));
+
+export default function CategoryDetail() {
+  const router = useRouter();
+  const { slug = '', page = 1 } = router.query;
+  const [dataLob, setDataLob] = useState([]);
+  const [finalQuery, setFinalQuery] = useState({});
+  
+  const categoryName = getNameFromSlug(slug);
+  const lobId = getIdFromSlug(slug);
+
+  useEffect(() => {
+    const fetchCategoryData = async () => {
+      try {
+        const lobData = await odooApi('GET', `/api/v1/lob_homepage?lob_id=${lobId}`);
+        setDataLob(lobData);
+      } catch (error) {
+        console.error("Error fetching category data:", error);
+      }
+    };
+
+    fetchCategoryData();
+  }, [lobId]);
+
+  console.log("dataLob",dataLob)
+  
+  useEffect(() => {
+      const collectIds = (categories) => {
+          return categories?.categoryIds?.map(data => data.id) || [];
+        };
+        
+        const ids = collectIds(dataLob[0]);
+        const newQuery = {
+            fq: `category_id_ids:(${ids.join(' OR ')})`,
+            page: 1,
+            brand: router.query.brand || '',
+        };
+        setFinalQuery(newQuery);
+        console.log("finalQuery",finalQuery)
+  }, [dataLob, router.query.brand]);
+
+  return (
+    <BasicLayout>
+      <Seo
+        title={`Beli ${categoryName} di Indoteknik`}
+        description={`Jual ${categoryName} Kirim Jakarta Surabaya Semarang Makassar Manado Denpasar Balikpapan Medan Palembang Lampung Bali Bandung Makassar Manado.`}
+        additionalMetaTags={[
+          {
+            property: 'keywords',
+            content: `Jual ${categoryName}, harga ${categoryName}, ${categoryName} murah, toko ${categoryName}, ${categoryName} jakarta, ${categoryName} surabaya`,
+          },
+        ]}
+      />
+
+      <Breadcrumb categoryId={getIdFromSlug(slug)} />
+
+      {!_.isEmpty(router.query) && (
+        <ProductSearch query={finalQuery} categories={getIdFromSlug(slug)} prefixUrl={`/shop/lob/${slug}`} />
+      )}
+    </BasicLayout>
+  );
+}