From 22afd4cf502a4dbd7bf68308cd92443545336645 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Fri, 28 Apr 2023 10:51:17 +0700
Subject: search spell when not found

---
 src/lib/product/components/ProductSearch.jsx | 60 +++++++++++++++++++++++-----
 1 file changed, 50 insertions(+), 10 deletions(-)

(limited to 'src/lib/product/components/ProductSearch.jsx')

diff --git a/src/lib/product/components/ProductSearch.jsx b/src/lib/product/components/ProductSearch.jsx
index 81e7948b..76dba005 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,8 @@ 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'
 
 const ProductSearch = ({ query, prefixUrl, defaultBrand = null }) => {
   const router = useRouter()
@@ -19,6 +21,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 +31,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 +93,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>
@@ -96,14 +137,14 @@ 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 +168,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'>
@@ -163,9 +205,7 @@ const ProductSearch = ({ query, prefixUrl, defaultBrand = null }) => {
                       </>
                     )}
                   </>
-                ) : (
-                  'Mungkin yang anda cari'
-                )}
+                ) : SpellingComponent}
               </div>
               <div className='justify-end flex '>
                 <div className='ml-3'>
-- 
cgit v1.2.3


From b4abdb00ef83aa824e8a05d5b75df48adb7b9629 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Wed, 3 May 2023 10:38:52 +0700
Subject: semi dynamic page

---
 src/lib/product/components/ProductSearch.jsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

(limited to 'src/lib/product/components/ProductSearch.jsx')

diff --git a/src/lib/product/components/ProductSearch.jsx b/src/lib/product/components/ProductSearch.jsx
index 76dba005..2233925d 100644
--- a/src/lib/product/components/ProductSearch.jsx
+++ b/src/lib/product/components/ProductSearch.jsx
@@ -137,7 +137,9 @@ const ProductSearch = ({ query, prefixUrl, defaultBrand = null }) => {
                   </>
                 )}
               </>
-            ) : SpellingComponent}
+            ) : (
+              SpellingComponent
+            )}
           </div>
 
           {productFound > 0 && (
@@ -205,7 +207,9 @@ const ProductSearch = ({ query, prefixUrl, defaultBrand = null }) => {
                       </>
                     )}
                   </>
-                ) : SpellingComponent}
+                ) : (
+                  SpellingComponent
+                )}
               </div>
               <div className='justify-end flex '>
                 <div className='ml-3'>
-- 
cgit v1.2.3


From 992c7415988cc76338c991731f21d225e5330fa5 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Wed, 3 May 2023 16:39:46 +0700
Subject: fix layout content

---
 src/lib/product/components/ProductSearch.jsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

(limited to 'src/lib/product/components/ProductSearch.jsx')

diff --git a/src/lib/product/components/ProductSearch.jsx b/src/lib/product/components/ProductSearch.jsx
index 2233925d..cc85589d 100644
--- a/src/lib/product/components/ProductSearch.jsx
+++ b/src/lib/product/components/ProductSearch.jsx
@@ -14,6 +14,7 @@ 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()
@@ -246,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>
-- 
cgit v1.2.3