Merge branch 'release' into CR/voucher_shiping

3 files changed, 175 insertions, 19 deletions

diff --git a/src/lib/category/api/popularProduct.js b/src/lib/category/api/popularProduct.js
new file mode 100644
index 00000000..3fdfc41c
--- /dev/null
+++ b/src/lib/category/api/popularProduct.js
@@ -0,0 +1,32 @@
+
+export const fetchPopulerProductSolr = async (category_id_ids) => {
+    let sort ='sort=qty_sold_f desc';
+    try {
+        const queryParams = new URLSearchParams({ q: category_id_ids });
+        const response = await fetch(`/solr/product/select?${queryParams.toString()}&rows=2000&fl=manufacture_name_s,manufacture_id_i,id,display_name_s,qty_sold_f,qty_sold_f&${sort}`);
+        if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        const data = await response.json();
+      const promotions = await map(data.response.docs);
+      return promotions;
+    } catch (error) {
+      console.error("Error fetching promotion data:", error);
+      return [];
+    }
+  };
+
+  const map = async (promotions) => {
+    const result = [];
+    for (const promotion of promotions) {
+      const data = {
+        id: promotion.id,
+        name: promotion.display_name_s,
+        manufacture_name: promotion.manufacture_name_s,
+        manufacture_id: promotion.manufacture_id_i,
+        qty_sold: promotion.qty_sold_f,
+      };
+      result.push(data);
+    }
+    return result;
+  };
\ No newline at end of file
diff --git a/src/lib/category/components/Category.jsx b/src/lib/category/components/Category.jsx
index e6ea5acf..f76e6e42 100644
--- a/src/lib/category/components/Category.jsx
+++ b/src/lib/category/components/Category.jsx
@@ -2,11 +2,20 @@ import odooApi from '@/core/api/odooApi'
 import Link from '@/core/components/elements/Link/Link'
 import DesktopView from '@/core/components/views/DesktopView'
 import { createSlug } from '@/core/utils/slug'
+import { ChevronRightIcon } from '@heroicons/react/24/outline'
+import Image from 'next/image'
 import { useEffect, useState } from 'react'
+import PopularBrand from './PopularBrand'
+import { bannerApi } from '@/api/bannerApi';
+const { useQuery } = require('react-query')
 
 const Category = () => {
   const [categories, setCategories] = useState([])
+  const [openCategories, setOpenCategory] = useState([]);
+  const [banner, setBanner] = useState([]);
 
+  const promotionProgram = useQuery('banner-promo-category-card', bannerApi({ type: 'banner-promo-category-card' }));
+  
   useEffect(() => {
     const loadCategories = async () => {
       let dataCategories = await odooApi('GET', '/api/v1/category/tree')
@@ -26,46 +35,65 @@ const Category = () => {
     }
     loadCategories()
   }, [])
-
   return (
     <DesktopView>
       <div className='category-mega-box'>
         {categories?.map((category) => (
-          <div key={category.id}>
+          <div key={category.id} className='flex'>
             <Link
               href={createSlug('/shop/category/', category.name, category.id)}
-              className='category-mega-box__parent'
+              className='category-mega-box__parent flex items-center'
             >
+              <div className='mr-2  flex justify-center items-center'>
+                <Image src={category.image} alt='' width={25} height={25} />
+              </div>
               {category.name}
             </Link>
             <div className='category-mega-box__child-wrapper'>
-              <div className='grid grid-cols-3 gap-x-4 gap-y-6 max-h-full overflow-auto'>
+              <div className='grid grid-cols-3 gap-x-4 gap-y-6 max-h-full !w-[590px] overflow-auto'>
                 {category.childs.map((child1Category) => (
-                  <div key={child1Category.id}>
+                  <div key={child1Category.id} className='w-full'>
                     <Link
                       href={createSlug('/shop/category/', child1Category.name, child1Category.id)}
-                      className='category-mega-box__child-one mb-4'
+                      className='category-mega-box__child-one mb-4 w-full h-8 flex justify-center line-clamp-2'
                     >
                       {child1Category.name}
                     </Link>
-                    <div className='flex flex-col gap-y-3'>
-                      {child1Category.childs.map((child2Category) => (
-                        <Link
-                          href={createSlug(
-                            '/shop/category/',
-                            child2Category.name,
-                            child2Category.id
-                          )}
-                          className='category-mega-box__child-two'
-                          key={child2Category.id}
-                        >
-                          {child2Category.name}
-                        </Link>
+                    <div className='flex flex-col gap-y-3 w-full'>
+                      {child1Category.childs.map((child2Category, index) => (
+                        (index < 4) && (
+                          <Link
+                            href={createSlug('/shop/category/', child2Category.name, child2Category.id)}
+                            className='category-mega-box__child-two truncate'
+                            key={child2Category.id}
+                          >
+                            {child2Category.name}
+                          </Link>
+                        )
                       ))}
+                      {child1Category.childs.length > 5 && (
+                        <div className='flex hover:bg-gray_r-8/35 rounded-10'>
+                          <Link
+                            href={createSlug('/shop/category/', child1Category.name, child1Category.id)}
+                            className='category-mega-box__child-one flex items-center gap-4 font-bold hover:ml-4'
+                          >
+                            <p className='mt-2 mb-0 text-danger-500 font-semibold'>Lihat Semua</p>
+                            <ChevronRightIcon className='w-4 text-danger-500 font-bold' />
+                          </Link>
+                        </div>
+                      )}
                     </div>
                   </div>
                 ))}
               </div>
+              <div className='category-mega-box__child-wrapper !w-[260px] !flex !flex-col !gap-4'>
+              <PopularBrand category={category} />
+              {Array.isArray(promotionProgram?.data) && promotionProgram?.data.length > 0 && promotionProgram?.data[0]?.map((banner, index) => (
+                <div key={index} className='flex w-60 h-20 object-cover'>
+                  <Image src={`${banner.image}`} alt={`${banner.name}`} width={275} height={4} />
+                </div>
+              ))}
+              </div>
             </div>
           </div>
         ))}
diff --git a/src/lib/category/components/PopularBrand.jsx b/src/lib/category/components/PopularBrand.jsx
new file mode 100644
index 00000000..4777fded
--- /dev/null
+++ b/src/lib/category/components/PopularBrand.jsx
@@ -0,0 +1,96 @@
+import odooApi from '@/core/api/odooApi'
+import React, { useEffect, useState } from 'react'
+import axios from 'axios';
+import { useQuery } from 'react-query'
+import Link from '@/core/components/elements/Link/Link'
+import { createSlug } from '@/core/utils/slug'
+import Image from 'next/image'
+import { ChevronRightIcon } from '@heroicons/react/24/outline'
+import useProductSearch from '../../../lib/product/hooks/useProductSearch';
+import { SolrResponse } from "~/types/solr";
+import { fetchPopulerProductSolr } from '../api/popularProduct'
+
+const SOLR_HOST = process.env.SOLR_HOST
+
+const PopularBrand = ({ category }) => {
+    const [topBrands, setTopBrands] = useState([]);
+
+    const fetchTopBrands = async () => {
+        try {
+            const items = await fetchPopulerProductSolr(`category_id_ids:(${category?.categoryDataIds?.join(' OR ')})`);
+            const getTop12UniqueBrands = (prod) => {
+                const brandMap = new Map();
+    
+                for (const product of prod) {
+                    const { manufacture_name, manufacture_id, qty_sold } = product;
+    
+                    if (brandMap.has(manufacture_name)) {
+                        // Update the existing brand's qty_sold
+                        brandMap.set(manufacture_name, {
+                            name: manufacture_name,
+                            id: manufacture_id,
+                            qty_sold: brandMap.get(manufacture_name).qty_sold + qty_sold
+                        });
+                    } else {
+                        // Add a new brand to the map
+                        brandMap.set(manufacture_name, {
+                            name: manufacture_name,
+                            id: manufacture_id,
+                            qty_sold
+                        });
+                    }
+                }
+    
+                // Convert the map to an array and sort by qty_sold in descending order
+                const sortedBrands = Array.from(brandMap.values()).sort((a, b) => b.qty_sold - a.qty_sold);
+    
+                // Return the top 12 brands
+                return sortedBrands.slice(0, 18);
+            };
+    
+            // Using the fetched products
+            const products = items;
+            const top12UniqueBrands = getTop12UniqueBrands(products);
+    
+            // Set the top 12 brands to the state
+            setTopBrands(top12UniqueBrands);
+        } catch (error) {
+            console.error("Error fetching data from Solr", error);
+            throw error;
+        }
+    }
+
+    useEffect(() => {
+        fetchTopBrands();
+    }, [category]);
+
+    return (
+        <div className='flex flex-col'>
+            <div className='grid grid-cols-3 max-h-full w-full gap-2'>
+                {topBrands.map((brand, index) => (
+                    <div key={index} className='w-full flex items-center justify-center pb-2'>
+                        <Link
+                            href={createSlug('/shop/brands/', brand.name, brand.id)}
+                            className='category-mega-box__child-one w-8 h-full flex items-center justify-center '
+                        >
+                            <Image src={`https://erp.indoteknik.com/api/image/x_manufactures/x_logo_manufacture/${brand.id}` } alt={`${brand.name}`} width={104} height={44} objectFit='cover' />
+                        </Link>
+                    </div>
+                ))}
+            </div>
+            {/* {topBrands.length > 8 && (
+                <div className='flex hover:bg-gray_r-8/35 rounded-10'>
+                    <Link
+                        href={createSlug('/shop/category/', category.name, category.id)}
+                        className='category-mega-box__child-one flex items-center gap-4 font-bold hover:ml-4'
+                    >
+                        <p className='mt-2 mb-0 text-danger-500 font-semibold'>Lihat Semua Brand</p>
+                        <ChevronRightIcon className='w-4 text-danger-500 font-bold' />
+                    </Link>
+                </div>
+            )} */}
+        </div>
+    )
+}
+
+export default PopularBrand;