<iman> update filter promotion-program

1 files changed, 110 insertions, 76 deletions

diff --git a/src/lib/product/components/ProductFilterDesktopPromotion.jsx b/src/lib/product/components/ProductFilterDesktopPromotion.jsx
index 332d2374..0815b881 100644
--- a/src/lib/product/components/ProductFilterDesktopPromotion.jsx
+++ b/src/lib/product/components/ProductFilterDesktopPromotion.jsx
@@ -1,98 +1,132 @@
-import { useRouter } from 'next/router'
-import { useEffect, useState } from 'react'
-import _ from 'lodash'
-import { toQuery } from 'lodash-contrib'
-import { Button } from '@chakra-ui/react'
-import { MultiSelect } from 'primereact/multiselect';
+import { useRouter } from 'next/router';
+import { useEffect, useState } from 'react';
+import _ from 'lodash';
+import { toQuery } from 'lodash-contrib';
+import { Button } from '@chakra-ui/react';
+import { MultiSelect } from 'react-multi-select-component';
 
 const ProductFilterDesktop = ({ brands, categories, prefixUrl }) => {
-  const router = useRouter()
-  const { query } = router
+  const router = useRouter();
+  const { query } = router;
+  const [order, setOrder] = useState(query?.orderBy);
+  const [brandValues, setBrand] = useState([]);
+  const [categoryValues, setCategory] = useState([]);
+  const [priceFrom, setPriceFrom] = useState(query?.priceFrom);
+  const [priceTo, setPriceTo] = useState(query?.priceTo);
+  const [stock, setStock] = useState(query?.stock);
+  const [activeRange, setActiveRange] = useState(null);
+  const [isBrandDropdownClicked, setIsBrandDropdownClicked] = useState(false);
+  const [isCategoryDropdownClicked, setIsCategoryDropdownClicked] = useState(false);
 
-  const [selectedBrand, setSelectedBrand] = useState(null);
-  const [selectedCategory, setSelectedCategory] = useState(null);
+  // Effect to set brandValues from query parameter 'brand'
+  useEffect(() => {
+    const brandParam = query?.brand;
+    if (brandParam) {
+      const brandsArray = brandParam.split(',').map((b) => ({
+        label: b,
+        value: b,
+      }));
+      setBrand(brandsArray);
+    }
+    
+  }, [query.brand]); // Trigger effect whenever query.brand changes
+
+  useEffect(() => {
+    const categoryParam = query?.category;
+    if (categoryParam) {
+      const categoriesArray = categoryParam.split(',').map((c) => ({
+        label: c,
+        value: c,
+      }));
+      setCategory(categoriesArray);
+    }
+  }, [query.category]); // Trigger effect whenever query.category changes
 
   const handleSubmit = () => {
     let params = {
       q: router.query.q,
-      orderBy: query?.orderBy,
-      brand: selectedBrand ? selectedBrand.map(b => b.code).join(',') : '',
-      category: query?.category,
-      priceFrom: query?.priceFrom,
-      priceTo: query?.priceTo,
-      stock: query?.stock
-    }
-    params = _.pickBy(params, _.identity)
-    params = toQuery(params)
+      orderBy: order,
+      brand: brandValues.map((b) => b.value).join(','),
+      category: categoryValues.map((c) => c.value).join(','),
+      priceFrom,
+      priceTo,
+      stock: stock,
+    };
+    params = _.pickBy(params, _.identity);
+    params = toQuery(params);
 
-    const slug = Array.isArray(router.query.slug) ? router.query.slug[0] : router.query.slug;
+    const slug = Array.isArray(router.query.slug)
+      ? router.query.slug[0]
+      : router.query.slug;
 
     if (slug) {
-      router.push(`${prefixUrl}/${slug}?${params}`)
+      router.push(`${prefixUrl}/${slug}?${params}`);
     } else {
-      router.push(`${prefixUrl}?${params}`)
+      router.push(`${prefixUrl}?${params}`);
     }
-  }
-
-  const countryTemplate = (option) => {
-    return (
-      <div className="flex items-center ml-2">
-        <div>{option.name}</div>
-      </div>
-    );
   };
 
-  const brandOptions = brands.map(brand => ({
-    name: `${brand.brand} (${brand.qty})`,
-    code: brand.brand
-  }));
 
-  const categoryOptions = categories.map(category => ({
-    name: `${category.name} (${category.qty})`,
-    code: category.name
+  const brandOptions = brands.map((brand) => ({
+    label: `${brand.brand} (${brand.qty})`,
+    value: brand.brand,
   }));
 
-  const panelFooterTemplate = () => {
-    return (
-      <Button className='w-full mt-6' colorScheme='red' onClick={handleSubmit}>
-        Terapkan
-      </Button>
-    );
-  };
+  const categoryOptions = categories.map((category) => ({
+    label: `${category.name} (${category.qty})`,
+    value: category.name,
+  }));
 
   return (
-    <div className='flex justify-end space-x-4'>
-      <div className='w-64'>
-        <label className='block mb-2'>Brand</label>
-        <MultiSelect
-          options={brandOptions}
-          value={selectedBrand}
-          onChange={(e) => setSelectedBrand(e.value)}
-          optionLabel="name"
-          placeholder="Pilih Brand"
-          itemTemplate={countryTemplate}
-          panelFooterTemplate={panelFooterTemplate}
-          className="w-full"
-          display="chip"
-        />
-      </div>
+    <>
+      <div className='flex h-full w-[100%] justify-end '>
+        {/* Brand MultiSelect */}
+        <div className='mb-[20px] mr-4 w-64 h-full flex justify-start '>
+          <div className='relative'>
+            <label>Brand</label>
+            <div className='h-auto z-50  w-64 '>
+              <MultiSelect
+                options={brandOptions}
+                value={brandValues}
+                onChange={setBrand}
+                labelledBy='Select Brand'
+                onMenuToggle={(isOpen) => setIsBrandDropdownClicked(isOpen)}
+                hasSelectAll={false}
+              />
+            </div>
+          </div>
+        </div>
+
+        {/* Category MultiSelect */}
+        <div className='mb-[20px] mr-4 w-64 h-full flex justify-start '>
+          <div className='relative'>
+            <label>Kategori</label>
+            <div className=' h-auto w-64'>
+              <MultiSelect
+                options={categoryOptions}
+                value={categoryValues}
+                onChange={setCategory}
+                labelledBy='Select Kategori'
+                onMenuToggle={() =>
+                  setIsCategoryDropdownClicked(!isCategoryDropdownClicked)
+                }
+                hasSelectAll={false}
+              />
+            </div>
+          </div>
+        </div>
 
-      <div className='w-64'>
-        <label className='block mb-2'>Kategori</label>
-        <MultiSelect
-          options={categoryOptions}
-          value={selectedCategory}
-          onChange={(e) => setSelectedCategory(e.value)}
-          optionLabel="name"
-          placeholder="Pilih Kategori"
-          itemTemplate={countryTemplate}
-          panelFooterTemplate={panelFooterTemplate}
-          className="w-full"
-          display="chip"
-        />
+        {/* Apply Button */}
+        <div className='TOMBOL mb-1  h-24 flex justify-center items-center  w-24'>
+          <div className=' bottom-1 pb-1  left-0 right-0 flex justify-center  rounded' >
+            <Button colorScheme='red' width={"full"} onClick={handleSubmit}>
+              Terapkan
+            </Button>       
+          </div>
+        </div>
       </div>
-    </div>
-  )
-}
+    </>
+  );
+};
 
-export default ProductFilterDesktop
+export default ProductFilterDesktop;