1 files changed, 98 insertions, 0 deletions
diff --git a/src/lib/product/components/ProductFilterDesktopPromotion.jsx b/src/lib/product/components/ProductFilterDesktopPromotion.jsx
new file mode 100644
index 00000000..332d2374
--- /dev/null
+++ b/src/lib/product/components/ProductFilterDesktopPromotion.jsx
@@ -0,0 +1,98 @@
+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';
+
+const ProductFilterDesktop = ({ brands, categories, prefixUrl }) => {
+  const router = useRouter()
+  const { query } = router
+
+  const [selectedBrand, setSelectedBrand] = useState(null);
+  const [selectedCategory, setSelectedCategory] = useState(null);
+
+  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)
+
+    const slug = Array.isArray(router.query.slug) ? router.query.slug[0] : router.query.slug;
+
+    if (slug) {
+      router.push(`${prefixUrl}/${slug}?${params}`)
+    } else {
+      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 panelFooterTemplate = () => {
+    return (
+      <Button className='w-full mt-6' colorScheme='red' onClick={handleSubmit}>
+        Terapkan
+      </Button>
+    );
+  };
+
+  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='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"
+        />
+      </div>
+    </div>
+  )
+}
+
+export default ProductFilterDesktop