Merged in CR/UI (pull request #117)

CR/UI

2 files changed, 53 insertions, 5 deletions

diff --git a/src/lib/product/components/ProductSearch.jsx b/src/lib/product/components/ProductSearch.jsx
index 3740d264..29bb987e 100644
--- a/src/lib/product/components/ProductSearch.jsx
+++ b/src/lib/product/components/ProductSearch.jsx
@@ -18,11 +18,15 @@ import whatsappUrl from '@/core/utils/whatsappUrl'
 import { HStack, Image, Tag, TagCloseButton, TagLabel } from '@chakra-ui/react'
 import odooApi from '@/core/api/odooApi'
 import { formatCurrency } from '@/core/utils/formatValue'
+import axios from 'axios'
+import Skeleton from 'react-loading-skeleton'
+import { createSlug } from '@/core/utils/slug'
 
 const ProductSearch = ({ query, prefixUrl, defaultBrand = null, brand = null }) => {
   const router = useRouter()
   const { page = 1 } = query
   const [q, setQ] = useState(query?.q || '*')
+  const [search, setSearch] = useState(query?.q || '*')
   const [limit, setLimit] = useState(query?.limit || 30)
   const [orderBy, setOrderBy] = useState(router.query?.orderBy || 'popular')
   if (defaultBrand) query.brand = defaultBrand.toLowerCase()
@@ -34,6 +38,7 @@ const ProductSearch = ({ query, prefixUrl, defaultBrand = null, brand = null })
   const [spellings, setSpellings] = useState(null)
   const [bannerPromotionHeader, setBannerPromotionHeader] = useState(null)
   const [bannerPromotionFooter, setBannerPromotionFooter] = useState(null)
+  const [isBrand, setIsBrand] = useState(null)
   const popup = useActive()
   const numRows = [30, 50, 80, 100]
   const [brandValues, setBrand] = useState(
@@ -78,6 +83,23 @@ const ProductSearch = ({ query, prefixUrl, defaultBrand = null, brand = null })
     }
   }, [productFound, query, spellings])
 
+  useEffect(() => {
+    const checkIfBrand = async () => {
+      const brand = await axios(
+        `${process.env.NEXT_PUBLIC_SELF_HOST}/api/shop/brands?params=search&q=${search}`
+      )
+      console.log('ini brand', brand)
+      if (brand.data.length > 0) {
+        setIsBrand(brand?.data[0])
+      } else {
+        setIsBrand(null)
+      }
+    }
+    if (router.pathname.includes('search')) {
+      checkIfBrand()
+    }
+  }, [q])
+
   const brands = []
   for (
     let i = 0;
@@ -148,7 +170,11 @@ const ProductSearch = ({ query, prefixUrl, defaultBrand = null, brand = null })
   const SpellingComponent = useMemo(() => {
     return (
       <>
-        {spellings?.length > 0 ? <>Mungkin yang anda cari </> : <>Produk yang cari anda tidak ada</>}
+        {spellings?.length > 0 ? (
+          <>Mungkin yang anda cari </>
+        ) : (
+          <>Produk yang cari anda tidak ada</>
+        )}
         {spellings?.map((spelling, i) => (
           <Link href={`/shop/search?q=${spelling}`} key={i} className='inline'>
             {spelling}
@@ -207,6 +233,12 @@ const ProductSearch = ({ query, prefixUrl, defaultBrand = null, brand = null })
       <MobileView>
         {productSearch.isLoading && <ProductSearchSkeleton />}
         <div className='p-4 pt-0'>
+          {isBrand && isBrand.logo && (
+            <div className='mb-3'>
+              <h1 className='mb-2 font-semibold text-h-sm'>Brand Pencarian {q}</h1>
+              <Image src={isBrand?.logo} alt='' className='object-cover object-center h-[60px]' />
+            </div>
+          )}
           <h1 className='mb-2 font-semibold text-h-sm'>Produk</h1>
           <FilterChoicesComponent
             brandValues={brandValues}
@@ -331,6 +363,18 @@ const ProductSearch = ({ query, prefixUrl, defaultBrand = null, brand = null })
               </div>
             )}
 
+            {isBrand && isBrand.logo && (
+              <div className='mb-3'>
+                <h1 className='text-2xl mb-2 font-semibold'>Brand Pencarian {q}</h1>
+                <Link
+                  href={createSlug('/shop/brands/', isBrand.name, isBrand.id)}
+                  className='inline'
+                >
+                  <Image src={isBrand?.logo} alt='' className='object-cover object-center h-24' />
+                </Link>
+              </div>
+            )}
+
             <h1 className='text-2xl mb-2 font-semibold'>Hasil Pencarian</h1>
             <FilterChoicesComponent
               brandValues={brandValues}
@@ -466,14 +510,14 @@ const FilterChoicesComponent = ({
 }) => (
   <div className='flex items-center'>
     <HStack spacing={2} className='flex-wrap'>
-      {brandValues.map((value, index) => (
+      {brandValues?.map((value, index) => (
         <Tag size='lg' key={index} borderRadius='lg' variant='outline' colorScheme='gray'>
           <TagLabel>{value}</TagLabel>
           <TagCloseButton onClick={() => handleDeleteFilter('brands', value)} />
         </Tag>
       ))}
 
-      {categoryValues.map((value, index) => (
+      {categoryValues?.map((value, index) => (
         <Tag size='lg' key={index} borderRadius='lg' variant='outline' colorScheme='gray'>
           <TagLabel>{value}</TagLabel>
           <TagCloseButton onClick={() => handleDeleteFilter('category', value)} />
@@ -485,7 +529,7 @@ const FilterChoicesComponent = ({
           <TagCloseButton onClick={() => handleDeleteFilter('price', priceFrom)} />
         </Tag>
       )}
-      {brandValues.length > 0 || categoryValues.length > 0 || priceFrom || priceTo ? (
+      {brandValues?.length > 0 || categoryValues?.length > 0 || priceFrom || priceTo ? (
         <span>
           <button
             className='btn-transparent py-2 px-5 h-[40px] text-red-700'
diff --git a/src/pages/api/shop/brands.js b/src/pages/api/shop/brands.js
index e93fe2c9..dbbfcfe3 100644
--- a/src/pages/api/shop/brands.js
+++ b/src/pages/api/shop/brands.js
@@ -12,6 +12,11 @@ export default async function handler(req, res) {
         case 'level_s':
           params = 'level_s:prioritas'
           break
+        case 'search':
+          params = `name_s:${req?.query?.q.toLowerCase()}`
+          sort = ''
+          rows = 1
+          break;
         default:
           params = `name_s:${req.query.params}`
       }
@@ -20,7 +25,6 @@ export default async function handler(req, res) {
       process.env.SOLR_HOST +
         `/solr/brands/select?q=${params}&q.op=OR&indent=true&rows=${rows}&${sort}`
     )
-
     let dataBrands = responseMap(brands.data.response.docs)
 
     res.status(200).json(dataBrands)