Merge branch 'new-release' into bug-product

1 files changed, 135 insertions, 12 deletions

diff --git a/src/lib/product/components/ProductSearch.jsx b/src/lib/product/components/ProductSearch.jsx
index fb9017f4..26114acf 100644
--- a/src/lib/product/components/ProductSearch.jsx
+++ b/src/lib/product/components/ProductSearch.jsx
@@ -26,6 +26,10 @@ 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';
 
 const ProductSearch = ({
   query,
@@ -37,11 +41,108 @@ const ProductSearch = ({
   const { page = 1 } = query;
   const [q, setQ] = useState(query?.q || '*');
   const [search, setSearch] = useState(query?.q || '*');
-  const [limit, setLimit] = useState(query?.limit || 30);
+  const [limit, setLimit] = useState(router.query?.limit || 30);
   const [orderBy, setOrderBy] = useState(router.query?.orderBy);
+  const [finalQuery, setFinalQuery] = useState({});
+  const [queryFinal, setQueryFinal] = useState({});
+  const [dataCategoriesProduct, setDataCategoriesProduct] = useState([]);
+  const [dataCategoriesLob, setDataCategoriesLob] = useState([]);
+  const categoryId = getIdFromSlug(prefixUrl);
+  const [data, setData] = useState([]);
+  const [dataLob, setDataLob] = useState([]);
   if (defaultBrand) query.brand = defaultBrand.toLowerCase();
+  const dataIdCategories = [];
+  useEffect(() => {
+    if (prefixUrl.includes('category')) {
+      const loadProduct = async () => {
+        const getCategoriesId = await odooApi(
+          'GET',
+          `/api/v1/category/numFound?parent_id=${categoryId}`
+        );
+        if (getCategoriesId) {
+          setDataCategoriesProduct(getCategoriesId);
+        }
+      };
+      loadProduct();
+    } else if (prefixUrl.includes('lob')) {
+      const loadProduct = async () => {
+        const lobData = await odooApi(
+          'GET',
+          `/api/v1/lob_homepage/${categoryId}/category_id`
+        );
+
+        if (lobData) {
+          setDataLob(lobData);
+        }
+      };
+      loadProduct();
+    }
+  }, [categoryId]);
+
+  const collectIds = (category) => {
+    const ids = [];
+    function recurse(cat) {
+      if (cat && cat.id) {
+        ids.push(cat.id);
+      }
+      if (Array.isArray(cat.children)) {
+        cat.children.forEach(recurse);
+      }
+    }
+    recurse(category);
+    return ids;
+  };
+  useEffect(() => {
+    if (prefixUrl.includes('category')) {
+      const ids = collectIds(dataCategoriesProduct);
+      const newQuery = {
+        fq: `category_id_ids:(${ids.join(' OR ')})`,
+        page: router.query.page ? router.query.page : 1,
+        brand: router.query.brand ? router.query.brand : '',
+        category: router.query.category ? router.query.category : '',
+        priceFrom: router.query.priceFrom ? router.query.priceFrom : '',
+        priceTo: router.query.priceTo ? router.query.priceTo : '',
+        limit: router.query.limit ? router.query.limit : '',
+        orderBy: router.query.orderBy ? router.query.orderBy : '',
+      };
+      setFinalQuery(newQuery);
+    } else if (prefixUrl.includes('lob')) {
+      const fetchCategoryData = async () => {
+        if (dataLob[0]?.categoryIds) {
+          for (const cate of dataLob[0].categoryIds) {
+            dataIdCategories.push(cate.childId);
+          }
+
+          const mergedArray = dataIdCategories.flat();
+
+          const newQuery = {
+            fq: `category_id_ids:(${mergedArray.join(' OR ')})`,
+            category: router.query.category ? router.query.category : '',
+            page: router.query.page ? router.query.page : 1,
+            brand: router.query.brand ? router.query.brand : '',
+            priceFrom: router.query.priceFrom ? router.query.priceFrom : '',
+            priceTo: router.query.priceTo ? router.query.priceTo : '',
+            limit: router.query.limit ? router.query.limit : '',
+            orderBy: router.query.orderBy ? router.query.orderBy : '',
+          };
+
+          setFinalQuery(newQuery);
+        }
+      };
+      fetchCategoryData();
+    }
+  }, [dataCategoriesProduct, dataLob]);
+
+  useEffect(() => {
+    if (prefixUrl.includes('category') || prefixUrl.includes('lob')) {
+      setQueryFinal({ ...finalQuery, q, limit, orderBy });
+    } else {
+      setQueryFinal({ ...query, q, limit, orderBy });
+    }
+  }, [prefixUrl, dataCategoriesProduct, query, finalQuery]);
+
   const { productSearch } = useProductSearch({
-    query: { ...query, q, limit, orderBy },
+    query: queryFinal,
     operation: 'AND',
   });
   const [products, setProducts] = useState(null);
@@ -53,21 +154,23 @@ const ProductSearch = ({
   const numRows = [30, 50, 80, 100];
   const [brandValues, setBrand] = useState(
     !router.pathname.includes('brands')
-      ? query.brand
-        ? query.brand.split(',')
+      ? router.query.brand
+        ? router.query.brand.split(',')
         : []
       : []
   );
   const [categoryValues, setCategory] = useState(
-    query?.category?.split(',') || []
+    router.query?.category?.split(',') || router.query?.category?.split(',')
   );
-  const [priceFrom, setPriceFrom] = useState(query?.priceFrom || null);
-  const [priceTo, setPriceTo] = useState(query?.priceTo || null);
+
+  const [priceFrom, setPriceFrom] = useState(router.query?.priceFrom || null);
+  const [priceTo, setPriceTo] = useState(router.query?.priceTo || null);
 
   const pageCount = Math.ceil(productSearch.data?.response.numFound / limit);
   const productStart = productSearch.data?.responseHeader.params.start;
   const productRows = limit;
   const productFound = productSearch.data?.response.numFound;
+  const [dataCategories, setDataCategories] = useState([]);
 
   useEffect(() => {
     if (productFound == 0 && query.q && !spellings) {
@@ -98,7 +201,7 @@ const ProductSearch = ({
       });
     }
   }, [productFound, query, spellings]);
-
+  let id = [];
   useEffect(() => {
     const checkIfBrand = async () => {
       const brand = await axios(
@@ -116,6 +219,21 @@ const ProductSearch = ({
     }
   }, [q]);
 
+  useEffect(() => {
+    if (prefixUrl.includes('category')) {
+      const loadCategories = async () => {
+        const getCategories = await odooApi(
+          'GET',
+          `/api/v1/category/child?parent_id=${categoryId}`
+        );
+        if (getCategories) {
+          setDataCategories(getCategories);
+        }
+      };
+      loadCategories();
+    }
+  }, []);
+
   const brands = [];
   for (
     let i = 0;
@@ -130,7 +248,6 @@ const ProductSearch = ({
       brands.push({ brand, qty });
     }
   }
-  
 
   const categories = [];
   for (
@@ -145,7 +262,6 @@ const ProductSearch = ({
       categories.push({ name, qty });
     }
   }
-  
 
   const orderOptions = [
     { value: '', label: 'Pilih Filter' },
@@ -224,7 +340,7 @@ const ProductSearch = ({
       q: router.query.q,
       orderBy: orderBy,
       brand: brandValues.join(','),
-      category: categoryValues.join(','),
+      category: categoryValues?.join(','),
       priceFrom,
       priceTo,
     };
@@ -324,6 +440,8 @@ const ProductSearch = ({
               SpellingComponent
             )}
           </div>
+          <LobSectionCategory categories={dataLob} />
+          <CategorySection categories={dataCategories} />
 
           {productFound > 0 && (
             <div className='flex items-center gap-x-2 mb-5 justify-between'>
@@ -364,6 +482,7 @@ const ProductSearch = ({
             pageCount={pageCount}
             currentPage={parseInt(page)}
             url={`${prefixUrl}?${toQuery(_.omit(query, ['page']))}`}
+            // url={prefixUrl.includes('category') || prefixUrl.includes('lob')? `${prefixUrl}?${toQuery(_.omit(finalQuery, ['page']))}` : `${prefixUrl}?${toQuery(_.omit(query, ['page']))}`}
             className='mt-6 mb-2'
           />
 
@@ -412,7 +531,10 @@ const ProductSearch = ({
 
             <SideBanner />
           </div>
+
           <div className='w-9/12 pl-6'>
+            <LobSectionCategory categories={dataLob} />
+            <CategorySection categories={dataCategories} />
             {bannerPromotionHeader && bannerPromotionHeader?.image && (
               <div className='mb-3'>
                 <Image
@@ -451,7 +573,7 @@ const ProductSearch = ({
             />
             <div className='flex justify-between items-center mb-5'>
               <div className='leading-6 text-gray_r-11'>
-                {!spellings ? (
+                {spellings?.length < 1 || !spellings ? (
                   <>
                     Menampilkan&nbsp;
                     {pageCount > 1 ? (
@@ -550,6 +672,7 @@ const ProductSearch = ({
                 pageCount={pageCount}
                 currentPage={parseInt(page)}
                 url={`${prefixUrl}?${toQuery(_.omit(query, ['page']))}`}
+                // url={prefixUrl.includes('category') || prefixUrl.includes('lob')? `${prefixUrl}?${toQuery(_.omit(finalQuery, ['page']))}` : `${prefixUrl}?${toQuery(_.omit(query, ['page']))}`}
                 className='!justify-end'
               />
             </div>