Merge branch 'new-release' into bug-product

1 files changed, 150 insertions, 0 deletions

diff --git a/src/lib/home/components/CategoryDynamicMobile.jsx b/src/lib/home/components/CategoryDynamicMobile.jsx
new file mode 100644
index 00000000..4a8f13cf
--- /dev/null
+++ b/src/lib/home/components/CategoryDynamicMobile.jsx
@@ -0,0 +1,150 @@
+import React, { useEffect, useState, useCallback } from 'react';
+import NextImage from 'next/image';
+import Link from 'next/link';
+import { createSlug } from '@/core/utils/slug';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import 'swiper/css';
+import { fetchCategoryManagementSolr } from '../api/categoryManagementApi';
+
+const CategoryDynamicMobile = () => {
+  const [selectedCategory, setSelectedCategory] = useState({});
+  const [categoryManagement, setCategoryManagement] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const loadBrand = useCallback(async () => {
+    setIsLoading(true);
+    const items = await fetchCategoryManagementSolr();
+
+    setIsLoading(false);
+    setCategoryManagement(items);
+  }, []);
+
+  useEffect(() => {
+    loadBrand();
+  }, [loadBrand]);
+
+  useEffect(() => {
+    const loadPromo = async () => {
+      try {
+        if (categoryManagement?.length > 0) {
+          const initialSelections = categoryManagement.reduce(
+            (acc, category) => {
+              if (category.categories.length > 0) {
+                acc[category.id] = category.categories[0].id_level_2;
+              }
+              return acc;
+            },
+            {}
+          );
+          setSelectedCategory(initialSelections);
+        }
+      } catch (loadError) {
+        // console.error("Error loading promo items:", loadError);
+      }
+    };
+
+    loadPromo();
+  }, [categoryManagement]);
+
+  const handleCategoryLevel2Click = (categoryIdI, idLevel2) => {
+    setSelectedCategory((prev) => ({
+      ...prev,
+      [categoryIdI]: idLevel2,
+    }));
+  };
+
+  return (
+    <div className='p-4'>
+      {categoryManagement &&
+        categoryManagement?.map((category) => (
+          <div key={category.id}>
+            <div className='bagian-judul flex flex-row justify-between items-center gap-3 mb-4 mt-4'>
+              <h1 className='font-semibold text-[14px] sm:text-h-lg mr-2'>
+                {category.name}
+              </h1>
+              <Link
+                href={createSlug(
+                  '/shop/category/',
+                  category?.name,
+                  category?.category_id
+                )}
+                className='!text-red-500 font-semibold text-sm'
+              >
+                Lihat Semua
+              </Link>
+            </div>
+            <Swiper slidesPerView={2.3} spaceBetween={10}>
+              {category.categories.map((index) => (
+                <SwiperSlide key={index.id}>
+                  <div
+                    onClick={() =>
+                      handleCategoryLevel2Click(category.id, index?.id_level_2)
+                    }
+                    className={`border flex justify-start items-center max-w-48 max-h-16 rounded ${
+                      selectedCategory[category.id] === index?.id_level_2
+                        ? 'bg-red-50 border-red-500 text-red-500'
+                        : 'border-gray-200 text-gray-900'
+                    }`}
+                  >
+                    <div className='p-1 flex justify-start items-center'>
+                      <div className='flex flex-row justify-center items-center'>
+                        <NextImage
+                          src={
+                            index.image ? index.image : '/images/noimage.jpeg'
+                          }
+                          alt={index.name}
+                          width={30}
+                          height={30}
+                          className=''
+                        />
+                        <div className='bagian-judul flex flex-col justify-center items-start gap-1 ml-2'>
+                          <h2 className='font-semibold text-[10px] line-clamp-1'>
+                            {index?.name}
+                          </h2>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </SwiperSlide>
+              ))}
+            </Swiper>
+            <div className='p-3 mt-2 border'>
+              <div className='grid grid-cols-2 gap-2 overflow-y-auto max-h-[240px]'>
+                {category.categories.map(
+                  (index) =>
+                    selectedCategory[category.id] === index?.id_level_2 &&
+                    index?.child_frontend_id_i.map((x) => (
+                      <div key={x.id}>
+                        <Link
+                          href={createSlug(
+                            '/shop/category/',
+                            x?.name,
+                            x?.id_level_3
+                          )}
+                          className='flex flex-row gap-1 border rounded group hover:border-red-500'
+                        >
+                          <NextImage
+                            src={x.image ? x.image : '/images/noimage.jpeg'}
+                            alt={x.name}
+                            width={40}
+                            height={40}
+                            className='p-2'
+                          />
+                          <div className='bagian-judul flex flex-col justify-center items-start gap-1 break-words line-clamp-2 group-hover:text-red-500'>
+                            <h3 className='font-semibold line-clamp-2 group-hover:text-red-500 text-[10px]'>
+                              {x?.name}
+                            </h3>
+                          </div>
+                        </Link>
+                      </div>
+                    ))
+                )}
+              </div>
+            </div>
+          </div>
+        ))}
+    </div>
+  );
+};
+
+export default CategoryDynamicMobile;