banner promotion page search

2 files changed, 52 insertions, 15 deletions

diff --git a/src/lib/cart/components/Cartheader.jsx b/src/lib/cart/components/Cartheader.jsx
index 901b1501..aa6980ac 100644
--- a/src/lib/cart/components/Cartheader.jsx
+++ b/src/lib/cart/components/Cartheader.jsx
@@ -125,7 +125,7 @@ const Cardheader = (cartCount) => {
       >
         <div className='w-full max-w-md p-2 bg-white border border-gray-200 rounded-lg shadow'>
           <div className='p-2 flex justify-between items-center'>
-            <h5 class='text-base font-semibold leading-none'>Keranjang Belanja</h5>
+            <h5 className='text-base font-semibold leading-none'>Keranjang Belanja</h5>
             <Link href='/shop/cart' class='text-sm font-medium text-red-600 underline'>
               Lihat Semua
             </Link>
@@ -145,15 +145,15 @@ const Cardheader = (cartCount) => {
             )}
             {isLoading &&
               itemLoading.map((item) => (
-                <div key={item} role='status' class='max-w-sm animate-pulse'>
-                  <div class='flex items-center space-x-4 mb- 2'>
-                    <div class='flex-shrink-0'>
-                      <PhotoIcon class='h-16 w-16 text-gray-500' />
+                <div key={item} role='status' className='max-w-sm animate-pulse'>
+                  <div className='flex items-center space-x-4 mb- 2'>
+                    <div className='flex-shrink-0'>
+                      <PhotoIcon className='h-16 w-16 text-gray-500' />
                     </div>
-                    <div class='flex-1 min-w-0'>
-                      <div class='h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-48 mb-4'></div>
-                      <div class='h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-[360px] mb-2.5'></div>
-                      <div class='h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5'></div>
+                    <div className='flex-1 min-w-0'>
+                      <div className='h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-48 mb-4'></div>
+                      <div className='h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-[360px] mb-2.5'></div>
+                      <div className='h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5'></div>
                     </div>
                   </div>
                 </div>
@@ -167,13 +167,13 @@ const Cardheader = (cartCount) => {
             )}
             {auth && products.length > 0 && !isLoading && (
               <>
-                <ul role='list' class='divide-y divide-gray-200 dark:divide-gray-700'>
+                <ul role='list' className='divide-y divide-gray-200 dark:divide-gray-700'>
                   {products &&
                     products?.map((product, index) => (
                       <>
-                        <li class='py-1 sm:py-2'>
-                          <div class='flex items-center space-x-4'>
-                            <div class='flex-shrink-0'>
+                        <li className='py-1 sm:py-2'>
+                          <div className='flex items-center space-x-4'>
+                            <div className='flex-shrink-0'>
                               <Link
                                 href={createSlug(
                                   '/shop/product/',
@@ -189,7 +189,7 @@ const Cardheader = (cartCount) => {
                                 />
                               </Link>
                             </div>
-                            <div class='flex-1 min-w-0'>
+                            <div className='flex-1 min-w-0'>
                               <Link
                                 href={createSlug(
                                   '/shop/product/',
@@ -199,7 +199,7 @@ const Cardheader = (cartCount) => {
                                 className='line-clamp-2 leading-6 !text-gray_r-12 font-normal'
                               >
                                 {' '}
-                                <p class='text-caption-2 font-medium text-gray-900 truncate dark:text-white'>
+                                <p className='text-caption-2 font-medium text-gray-900 truncate dark:text-white'>
                                   {product.parent.name}
                                 </p>
                               </Link>
diff --git a/src/lib/product/components/ProductSearch.jsx b/src/lib/product/components/ProductSearch.jsx
index ef4580d6..1072b2ae 100644
--- a/src/lib/product/components/ProductSearch.jsx
+++ b/src/lib/product/components/ProductSearch.jsx
@@ -15,6 +15,8 @@ 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()
@@ -25,6 +27,8 @@ const ProductSearch = ({ query, prefixUrl, defaultBrand = null }) => {
   const { productSearch } = useProductSearch({ query: { ...query, q, limit } })
   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]
 
@@ -117,6 +121,20 @@ const ProductSearch = ({ query, prefixUrl, defaultBrand = null }) => {
     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)
@@ -230,6 +248,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'>
@@ -332,6 +360,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>