Merge branch 'master' into development_tri/implementasi_raja_ongkir

# Conflicts:
#	src/lib/checkout/components/Checkout.jsx

1 files changed, 57 insertions, 7 deletions

diff --git a/src/lib/product/components/ProductSearch.jsx b/src/lib/product/components/ProductSearch.jsx
index 81e7948b..cc85589d 100644
--- a/src/lib/product/components/ProductSearch.jsx
+++ b/src/lib/product/components/ProductSearch.jsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import useProductSearch from '../hooks/useProductSearch'
 import ProductCard from './ProductCard'
 import Pagination from '@/core/components/elements/Pagination/Pagination'
@@ -12,6 +12,9 @@ import DesktopView from '@/core/components/views/DesktopView'
 import NextImage from 'next/image'
 import ProductFilterDesktop from './ProductFilterDesktop'
 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'
 
 const ProductSearch = ({ query, prefixUrl, defaultBrand = null }) => {
   const router = useRouter()
@@ -19,6 +22,7 @@ const ProductSearch = ({ query, prefixUrl, defaultBrand = null }) => {
   if (defaultBrand) query.brand = defaultBrand.toLowerCase()
   const { productSearch } = useProductSearch({ query })
   const [products, setProducts] = useState(null)
+  const [spellings, setSpellings] = useState(null)
   const popup = useActive()
 
   const pageCount = Math.ceil(
@@ -28,6 +32,30 @@ const ProductSearch = ({ query, prefixUrl, defaultBrand = null }) => {
   const productRows = productSearch.data?.responseHeader.params.rows
   const productFound = productSearch.data?.response.numFound
 
+  useEffect(() => {
+    if (productFound == 0 && query.q) {
+      searchSpellApi({ query: query.q }).then((response) => {
+        const oddIndexSuggestions = response.data.spellcheck.suggestions.filter(
+          (_, index) => index % 2 === 1
+        )
+        const oddIndexCollations = response.data.spellcheck.collations.filter(
+          (_, index) => index % 2 === 1
+        )
+        const dataSpellings = oddIndexSuggestions.reduce((acc, curr) => {
+          oddIndexCollations.forEach((collation) => {
+            acc.push(collation.collationQuery)
+          })
+          curr.suggestion.forEach((s) => {
+            if (!acc.includes(s.word)) acc.push(s.word)
+          })
+          return acc
+        }, [])
+
+        setSpellings(dataSpellings)
+      })
+    }
+  }, [productFound, query])
+
   const brands = productSearch.data?.facetCounts?.facetFields?.manufactureName?.filter(
     (value, index) => {
       if (index % 2 === 0) {
@@ -66,6 +94,20 @@ const ProductSearch = ({ query, prefixUrl, defaultBrand = null }) => {
     }
   }, [query, products, productSearch])
 
+  const SpellingComponent = useMemo(() => {
+    return (
+      <>
+        Mungkin yang anda cari{' '}
+        {spellings?.map((spelling, i) => (
+          <Link href={`/shop/search?q=${spelling}`} key={i} className='inline'>
+            {spelling}
+            {i + 1 < spellings.length ? ', ' : ''}
+          </Link>
+        ))}
+      </>
+    )
+  }, [spellings])
+
   return (
     <>
       <MobileView>
@@ -97,13 +139,15 @@ const ProductSearch = ({ query, prefixUrl, defaultBrand = null }) => {
                 )}
               </>
             ) : (
-              'Mungkin yang anda cari'
+              SpellingComponent
             )}
           </div>
 
-          <button className='btn-light mb-6 py-2 px-5' onClick={popup.activate}>
-            Filter
-          </button>
+          {productFound > 0 && (
+            <button className='btn-light mb-6 py-2 px-5' onClick={popup.activate}>
+              Filter
+            </button>
+          )}
 
           <div className='grid grid-cols-2 gap-3'>
             {products &&
@@ -127,6 +171,7 @@ const ProductSearch = ({ query, prefixUrl, defaultBrand = null }) => {
           />
         </div>
       </MobileView>
+
       <DesktopView>
         <div className='container mx-auto mt-10 flex mb-3'>
           <div className='w-3/12'>
@@ -164,7 +209,7 @@ const ProductSearch = ({ query, prefixUrl, defaultBrand = null }) => {
                     )}
                   </>
                 ) : (
-                  'Mungkin yang anda cari'
+                  SpellingComponent
                 )}
               </div>
               <div className='justify-end flex '>
@@ -202,7 +247,12 @@ const ProductSearch = ({ query, prefixUrl, defaultBrand = null }) => {
                 <div className='text-gray_r-12/90'>
                   <span>
                     Barang yang anda cari tidak ada?{' '}
-                    <a href='#' className='text-danger-500'>
+                    <a
+                      href={whatsappUrl('productSearch', {
+                        name: query.q
+                      })}
+                      className='text-danger-500'
+                    >
                       Hubungi Kami
                     </a>
                   </span>