<iman> update tampilan promotion program

4 files changed, 116 insertions, 19 deletions

diff --git a/package.json b/package.json
index 32c701a5..054a30e4 100644
--- a/package.json
+++ b/package.json
@@ -38,6 +38,7 @@
     "next-seo": "^5.15.0",
     "node-fetch": "^3.3.2",
     "nodemailer": "^6.8.0",
+    "primereact": "^10.6.6",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-google-recaptcha": "^2.1.0",
@@ -47,8 +48,9 @@
     "react-lazy-load": "^4.0.1",
     "react-lazy-load-image-component": "^1.5.5",
     "react-loading-skeleton": "^3.3.1",
+    "react-multi-select-component": "^4.3.4",
     "react-query": "^3.39.3",
-    "react-select": "^5.7.0",
+    "react-select": "^5.8.0",
     "react-web-share": "^2.0.2",
     "sharp": "^0.33.2",
     "snakecase-keys": "^5.5.0",
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
diff --git a/src/pages/index.jsx b/src/pages/index.jsx
index ddc41cbe..80e9ef0e 100644
--- a/src/pages/index.jsx
+++ b/src/pages/index.jsx
@@ -102,13 +102,13 @@ export default function Home() {
             </div>
           </div>
 
-          <div className='my-16 flex flex-col gap-y-16'>
+          <div className='my-16 flex flex-col gap-y-8'>
             <ServiceList />
             <div id='flashsale'>
               <PreferredBrand />
             </div>
-            <FlashSale />
            <ProgramPromotion/>
+            <FlashSale />
             <PromotinProgram />
             <CategoryHomeId />
             <BannerSection />
diff --git a/src/pages/shop/promo/[slug].tsx b/src/pages/shop/promo/[slug].tsx
index 6e18101f..7fea10ff 100644
--- a/src/pages/shop/promo/[slug].tsx
+++ b/src/pages/shop/promo/[slug].tsx
@@ -14,7 +14,7 @@ import DesktopView from '../../../core/components/views/DesktopView';
 import MobileView from '../../../core/components/views/MobileView';
 import 'swiper/swiper-bundle.css';
 import useDevice from '../../../core/hooks/useDevice'
-import ProductFilterDesktop from '../../../lib/product/components/ProductFilterDesktop';
+import ProductFilterDesktop from '../../../lib/product/components/ProductFilterDesktopPromotion';
 import ProductFilter from '../../../lib/product/components/ProductFilter';
 import { HStack, Image, Tag, TagCloseButton, TagLabel } from '@chakra-ui/react';
 import { formatCurrency } from '../../../core/utils/formatValue';
@@ -369,19 +369,17 @@ export default function PromoDetail() {
 
       </MobileView>
       <DesktopView>
-        <div className='container mx-auto flex mb-3'>
-          <div className='w-3/12'>
-          <ProductFilterDesktop
-                  brands={brands || []}
-                  categories={categories || []}  
-                  prefixUrl={'/shop/promo'}
-                  defaultBrand={null}
-                />
-                <div className='h-6' />
-                <SideBanner />
-          </div>
-          <div className='w-9/12 pl-6'>
+        <div className='container mx-auto flex mb-3 flex-col'>
+          <div className='w-full pl-6'>
             <h1 className='text-2xl mb-2 font-semibold'>Promo {whatPromo}</h1>
+              <div className=' w-full'>
+                <ProductFilterDesktop
+                      brands={brands || []}
+                      categories={categories || []}  
+                      prefixUrl={'/shop/promo'}
+                      // defaultBrand={null}
+                    />
+                </div>
               <FilterChoicesComponent
                 brandValues={brandValues}
                 categoryValues={categoryValues}
@@ -395,9 +393,9 @@ export default function PromoDetail() {
                 </div>
               ) : promoData && promoItems.length >= 1 ? (
                 <>
-                <div className='grid grid-cols-1 gap-x-20 gap-y-1 lg:gap-x-14  xl:gap-x-36 lg:grid-cols-2 '>
+                <div className='grid grid-cols-1 gap-x-6  sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3'>
                   {visiblePromotions?.map((promotion) => (
-                    <div key={promotion.id} className="min-w-[400px] max-w-[400px]  mb-[20px] sm:w-full md:w-1/2 lg:w-1/3 xl:w-1/4 ">
+                    <div key={promotion.id} className="min-w-[400px] max-w-[400px]  mb-[20px] sm:min-w-[350px] md:min-w-[380px] lg:min-w-[400px] xl:min-w-[400px] ">
                       <ProductPromoCard promotion={promotion}/>
                     </div>
                   ))}
@@ -488,7 +486,6 @@ const FilterChoicesComponent = ({
             />
         </Tag>
       ))}
-      {console.log("categoryValues",categoryValues)}
       {priceFrom && priceTo && (
         <Tag size='lg' borderRadius='lg' variant='outline' colorScheme='gray'>
           <TagLabel>