Merged in CR/UI (pull request #104)

CR/UI

1 files changed, 126 insertions, 21 deletions

diff --git a/src/lib/product/components/ProductSearch.jsx b/src/lib/product/components/ProductSearch.jsx
index df9aa91b..9d59b305 100644
--- a/src/lib/product/components/ProductSearch.jsx
+++ b/src/lib/product/components/ProductSearch.jsx
@@ -15,22 +15,27 @@ import { useRouter } from 'next/router'
 import searchSpellApi from '@/core/api/searchSpellApi'
 import Link from '@/core/components/elements/Link/Link'
 import whatsappUrl from '@/core/utils/whatsappUrl'
+import { Image } from '@chakra-ui/react'
+import odooApi from '@/core/api/odooApi'
 
 const ProductSearch = ({ query, prefixUrl, defaultBrand = null }) => {
   const router = useRouter()
   const { page = 1 } = query
   const [q, setQ] = useState(query?.q || '*')
+  const [limit, setLimit] = useState(query?.limit || 30)
+  const [orderBy, setOrderBy] = useState(router.query?.orderBy || 'popular')
   if (defaultBrand) query.brand = defaultBrand.toLowerCase()
-  const { productSearch } = useProductSearch({ query: { ...query, q } })
+  const { productSearch } = useProductSearch({ query: { ...query, q, limit, orderBy } })
   const [products, setProducts] = useState(null)
   const [spellings, setSpellings] = useState(null)
+  const [bannerPromotionHeader, setBannerPromotionHeader] = useState(null)
+  const [bannerPromotionFooter, setBannerPromotionFooter] = useState(null)
   const popup = useActive()
+  const numRows = [30, 50, 80, 100]
 
-  const pageCount = Math.ceil(
-    productSearch.data?.response.numFound / productSearch.data?.responseHeader.params.rows
-  )
+  const pageCount = Math.ceil(productSearch.data?.response.numFound / limit)
   const productStart = productSearch.data?.responseHeader.params.start
-  const productRows = productSearch.data?.responseHeader.params.rows
+  const productRows = limit
   const productFound = productSearch.data?.response.numFound
 
   useEffect(() => {
@@ -63,20 +68,44 @@ const ProductSearch = ({ query, prefixUrl, defaultBrand = null }) => {
     }
   }, [productFound, query, spellings])
 
-  const brands = productSearch.data?.facetCounts?.facetFields?.manufactureName?.filter(
+  const brands = []
+  for (
+    let i = 0;
+    i < productSearch.data?.facetCounts?.facetFields?.manufactureNameS.length;
+    i += 2
+  ) {
+    const brand = productSearch.data?.facetCounts?.facetFields?.manufactureNameS[i]
+    const qty = productSearch.data?.facetCounts?.facetFields?.manufactureNameS[i + 1]
+    if (qty > 0) {
+      brands.push({ brand, qty })
+    }
+  }
+  /*const brandsList = productSearch.data?.facetCounts?.facetFields?.manufactureName?.filter(
     (value, index) => {
       if (index % 2 === 0) {
-        return true
+        const brand = value
+        const qty = index + 1
+        brands.push({ brand, qty })
       }
     }
-  )
-  const categories = productSearch.data?.facetCounts?.facetFields?.categoryName?.filter(
+  )*/
+
+  const categories = []
+  for (let i = 0; i < productSearch.data?.facetCounts?.facetFields?.categoryName.length; i += 2) {
+    const name = productSearch.data?.facetCounts?.facetFields?.categoryName[i]
+    const qty = productSearch.data?.facetCounts?.facetFields?.categoryName[i + 1]
+    if (qty > 0) {
+      categories.push({ name, qty })
+    }
+  }
+  
+  /*const categories = productSearch.data?.facetCounts?.facetFields?.categoryName?.filter(
     (value, index) => {
       if (index % 2 === 0) {
         return true
       }
     }
-  )
+  )*/
 
   const orderOptions = [
     { value: 'price-asc', label: 'Harga Terendah' },
@@ -95,6 +124,30 @@ const ProductSearch = ({ query, prefixUrl, defaultBrand = null }) => {
     router.push(`${prefixUrl}?${params}`)
   }
 
+  const handleLimit = (e) => {
+    let params = {
+      ...router.query,
+      limit: e.target.value
+    }
+    params = _.pickBy(params, _.identity)
+    params = toQuery(params)
+    router.push(`${prefixUrl}?${params}`)
+  }
+  const getBanner = async () => {
+    if (router.pathname.includes('search')) {
+      const getBannerHeader = await odooApi('GET', '/api/v1/banner?type=promotion-header')
+      const getBannerFooter = await odooApi('GET', '/api/v1/banner?type=promotion-footer')
+      var randomIndex = Math.floor(Math.random() * getBannerHeader.length)
+      var randomIndexFooter = Math.floor(Math.random() * getBannerFooter.length)
+      setBannerPromotionHeader(getBannerHeader[randomIndex])
+      setBannerPromotionFooter(getBannerFooter[randomIndexFooter])
+    }
+  }
+
+  useEffect(() => {
+    getBanner()
+  }, [])
+
   useEffect(() => {
     setProducts(productSearch.data?.response?.products)
   }, [productSearch])
@@ -117,7 +170,7 @@ const ProductSearch = ({ query, prefixUrl, defaultBrand = null }) => {
     <>
       <MobileView>
         {productSearch.isLoading && <ProductSearchSkeleton />}
-        <div className='p-4'>
+        <div className='p-4 pt-0'>
           <h1 className='mb-2 font-semibold text-h-sm'>Produk</h1>
 
           <div className='mb-2 leading-6 text-gray_r-11'>
@@ -127,9 +180,9 @@ const ProductSearch = ({ query, prefixUrl, defaultBrand = null }) => {
                 {pageCount > 1 ? (
                   <>
                     {productStart + 1}-
-                    {productStart + productRows > productFound
+                    {parseInt(productStart) + parseInt(productRows) > productFound
                       ? productFound
-                      : productStart + productRows}
+                      : parseInt(productStart) + parseInt(productRows)}
                     &nbsp;dari&nbsp;
                   </>
                 ) : (
@@ -149,9 +202,28 @@ const ProductSearch = ({ query, prefixUrl, defaultBrand = null }) => {
           </div>
 
           {productFound > 0 && (
-            <button className='btn-light mb-6 py-2 px-5' onClick={popup.activate}>
-              Filter
-            </button>
+            <div className='flex items-center gap-x-2 mb-5 justify-between'>
+              <div>
+                <button className='btn-light py-2 px-5 h-[40px]' onClick={popup.activate}>
+                  Filter
+                </button>
+              </div>
+              <div className=''>
+                <select
+                  name='limit'
+                  className='form-input w-24'
+                  value={router.query?.limit || ''}
+                  onChange={(e) => handleLimit(e)}
+                >
+                  {numRows.map((option, index) => (
+                    <option key={index} value={option}>
+                      {' '}
+                      {option}{' '}
+                    </option>
+                  ))}
+                </select>
+              </div>
+            </div>
           )}
 
           <div className='grid grid-cols-2 gap-3'>
@@ -178,7 +250,7 @@ const ProductSearch = ({ query, prefixUrl, defaultBrand = null }) => {
       </MobileView>
 
       <DesktopView>
-        <div className='container mx-auto mt-10 flex mb-3'>
+        <div className='container mx-auto flex mb-3'>
           <div className='w-3/12'>
             <ProductFilterDesktop
               brands={brands || []}
@@ -188,6 +260,16 @@ const ProductSearch = ({ query, prefixUrl, defaultBrand = null }) => {
             />
           </div>
           <div className='w-9/12 pl-6'>
+            {bannerPromotionHeader && bannerPromotionHeader?.image && (
+              <div className='mb-3'>
+                <Image
+                  src={bannerPromotionHeader?.image}
+                  alt=''
+                  className='object-cover object-center h-full mx-auto'
+                />
+              </div>
+            )}
+
             <h1 className='text-2xl mb-2 font-semibold'>Hasil Pencarian</h1>
             <div className='flex justify-between items-center mb-2'>
               <div className='mb-2 leading-6 text-gray_r-11'>
@@ -197,9 +279,9 @@ const ProductSearch = ({ query, prefixUrl, defaultBrand = null }) => {
                     {pageCount > 1 ? (
                       <>
                         {productStart + 1}-
-                        {productStart + productRows > productFound
+                        {parseInt(productStart) + parseInt(productRows) > productFound
                           ? productFound
-                          : productStart + productRows}
+                          : parseInt(productStart) + parseInt(productRows)}
                         &nbsp;dari&nbsp;
                       </>
                     ) : (
@@ -222,10 +304,9 @@ const ProductSearch = ({ query, prefixUrl, defaultBrand = null }) => {
                   <select
                     name='urutan'
                     className='form-input mt-2'
-                    value={router.query?.orderBy || ''}
+                    value={orderBy}
                     onChange={(e) => handleOrderBy(e)}
                   >
-                    <option value=''>Urutkan</option>
                     {orderOptions.map((option, index) => (
                       <option key={index} value={option.value}>
                         {' '}
@@ -234,6 +315,21 @@ const ProductSearch = ({ query, prefixUrl, defaultBrand = null }) => {
                     ))}
                   </select>
                 </div>
+                <div className='ml-3'>
+                  <select
+                    name='limit'
+                    className='form-input mt-2'
+                    value={router.query?.limit || ''}
+                    onChange={(e) => handleLimit(e)}
+                  >
+                    {numRows.map((option, index) => (
+                      <option key={index} value={option}>
+                        {' '}
+                        {option}{' '}
+                      </option>
+                    ))}
+                  </select>
+                </div>
               </div>
             </div>
             {productSearch.isLoading && <ProductSearchSkeleton />}
@@ -275,6 +371,15 @@ const ProductSearch = ({ query, prefixUrl, defaultBrand = null }) => {
                 className='!justify-end'
               />
             </div>
+            {bannerPromotionFooter && bannerPromotionFooter?.image && (
+              <div className='mb-3'>
+                <Image
+                  src={bannerPromotionFooter?.image}
+                  alt=''
+                  className='object-cover object-center h-full mx-auto'
+                />
+              </div>
+            )}
           </div>
         </div>
       </DesktopView>