Merge branch 'master' into development_tri/feedback_UAT

10 files changed, 159 insertions, 97 deletions

diff --git a/src/core/components/elements/Appbar/Appbar.jsx b/src/core/components/elements/Appbar/Appbar.jsx
index f1456a7c..e19d5f0a 100644
--- a/src/core/components/elements/Appbar/Appbar.jsx
+++ b/src/core/components/elements/Appbar/Appbar.jsx
@@ -1,6 +1,8 @@
 import { useRouter } from 'next/router'
 import Link from '../Link/Link'
 import { HomeIcon, Bars3Icon, ShoppingCartIcon, ChevronLeftIcon } from '@heroicons/react/24/outline'
+import { useEffect, useState } from 'react'
+import { getCart } from '@/core/utils/cart'
 
 /**
  * The AppBar component is a navigation component used to display a header or toolbar
@@ -13,6 +15,21 @@ import { HomeIcon, Bars3Icon, ShoppingCartIcon, ChevronLeftIcon } from '@heroico
 const AppBar = ({ title }) => {
   const router = useRouter()
 
+  const [cartCount, setCartCount] = useState(0)
+
+  useEffect(() => {
+    const handleCartChange = () => {
+      setCartCount(Object.keys(getCart()).length)
+    }
+    handleCartChange()
+
+    window.addEventListener('localStorageChange', handleCartChange)
+
+    return () => {
+      window.removeEventListener('localStorageChange', handleCartChange)
+    }
+  }, [])
+
   return (
     <nav className='sticky top-0 z-50 bg-white border-b border-gray_r-6 flex justify-between'>
       <div className='flex items-center'>
@@ -23,7 +40,12 @@ const AppBar = ({ title }) => {
       </div>
       <div className='flex items-center px-2'>
         <Link href='/shop/cart' className='py-4 px-2'>
-          <ShoppingCartIcon className='w-6 text-gray_r-12' />
+          <div className='relative'>
+            <ShoppingCartIcon className='w-6 text-gray_r-12' />
+            <span className='absolute -top-2 -right-2 badge-solid-red rounded-full w-5 h-5 flex items-center justify-center'>
+              {cartCount}
+            </span>
+          </div>
         </Link>
         <Link href='/' className='py-4 px-2'>
           <HomeIcon className='w-6 text-gray_r-12' />
diff --git a/src/core/components/elements/Navbar/NavbarDesktop.jsx b/src/core/components/elements/Navbar/NavbarDesktop.jsx
index fcb54802..837d436c 100644
--- a/src/core/components/elements/Navbar/NavbarDesktop.jsx
+++ b/src/core/components/elements/Navbar/NavbarDesktop.jsx
@@ -10,9 +10,10 @@ import DesktopView from '../../views/DesktopView'
 import dynamic from 'next/dynamic'
 import IndoteknikLogo from '@/images/logo.png'
 import Category from '@/lib/category/components/Category'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import useAuth from '@/core/hooks/useAuth'
 import NavbarUserDropdown from './NavbarUserDropdown'
+import { getCart } from '@/core/utils/cart'
 
 const Search = dynamic(() => import('./Search'))
 
@@ -20,6 +21,21 @@ const NavbarDesktop = () => {
   const [isOpenCategory, setIsOpenCategory] = useState(false)
   const auth = useAuth()
 
+  const [cartCount, setCartCount] = useState(0)
+
+  useEffect(() => {
+    const handleCartChange = () => {
+      setCartCount(Object.keys(getCart()).length)
+    }
+    handleCartChange()
+
+    window.addEventListener('localStorageChange', handleCartChange)
+
+    return () => {
+      window.removeEventListener('localStorageChange', handleCartChange)
+    }
+  }, [])
+
   return (
     <DesktopView>
       <div className='py-3 bg-warning-400' id='desktop-nav-top'>
@@ -57,10 +73,17 @@ const NavbarDesktop = () => {
               Quotation
             </Link>
             <Link href='/shop/cart' className='flex items-center gap-x-2 !text-gray_r-12/80'>
-              <ShoppingCartIcon className='w-7' />
-              Keranjang
-              <br />
-              Belanja
+              <div className='relative mr-2'>
+                <ShoppingCartIcon className='w-7' />
+                <span className='absolute -top-2 -right-2 badge-solid-red rounded-full w-5 h-5 flex items-center justify-center'>
+                  {cartCount}
+                </span>
+              </div>
+              <span>
+                Keranjang
+                <br />
+                Belanja
+              </span>
             </Link>
             <Link href='/my/wishlist' className='flex items-center gap-x-2 !text-gray_r-12/80'>
               <HeartIcon className='w-7' />
diff --git a/src/core/components/elements/Navbar/NavbarMobile.jsx b/src/core/components/elements/Navbar/NavbarMobile.jsx
index 24ff3a51..0502dba5 100644
--- a/src/core/components/elements/Navbar/NavbarMobile.jsx
+++ b/src/core/components/elements/Navbar/NavbarMobile.jsx
@@ -5,12 +5,29 @@ import { Bars3Icon, HeartIcon, ShoppingCartIcon } from '@heroicons/react/24/outl
 import useSidebar from '@/core/hooks/useSidebar'
 import dynamic from 'next/dynamic'
 import IndoteknikLogo from '@/images/logo.png'
+import { useEffect, useState } from 'react'
+import { getCart } from '@/core/utils/cart'
 
 const Search = dynamic(() => import('./Search'))
 
 const NavbarMobile = () => {
   const { Sidebar, open } = useSidebar()
 
+  const [cartCount, setCartCount] = useState(0)
+
+  useEffect(() => {
+    const handleCartChange = () => {
+      setCartCount(Object.keys(getCart()).length)
+    }
+    handleCartChange()
+
+    window.addEventListener('localStorageChange', handleCartChange)
+
+    return () => {
+      window.removeEventListener('localStorageChange', handleCartChange)
+    }
+  }, [])
+
   return (
     <MobileView>
       <nav className='px-4 py-2 pb-3 sticky top-0 z-50 bg-white shadow'>
@@ -22,8 +39,11 @@ const NavbarMobile = () => {
             <Link href='/my/wishlist'>
               <HeartIcon className='w-6 text-gray_r-12' />
             </Link>
-            <Link href='/shop/cart'>
+            <Link href='/shop/cart' className='relative'>
               <ShoppingCartIcon className='w-6 text-gray_r-12' />
+              <span className='absolute -top-2 -right-2 badge-solid-red rounded-full w-5 h-5 flex items-center justify-center'>
+                {cartCount}
+              </span>
             </Link>
             <button type='button' onClick={open}>
               <Bars3Icon className='w-6 text-gray_r-12' />
diff --git a/src/core/utils/cart.js b/src/core/utils/cart.js
index 2bdffb1c..d987cda7 100644
--- a/src/core/utils/cart.js
+++ b/src/core/utils/cart.js
@@ -19,7 +19,9 @@ const getCart = () => {
  */
 const setCart = (cart) => {
   if (typeof window !== 'undefined' && window.localStorage) {
+    const storageChangeEvent = new Event('localStorageChange')
     localStorage.setItem('cart', JSON.stringify(cart))
+    window.dispatchEvent(storageChangeEvent)
     return true
   }
   return false
diff --git a/src/lib/cart/components/Cart.jsx b/src/lib/cart/components/Cart.jsx
index d18b1a28..d0685fe3 100644
--- a/src/lib/cart/components/Cart.jsx
+++ b/src/lib/cart/components/Cart.jsx
@@ -329,7 +329,7 @@ const Cart = () => {
                     <td colSpan={6}>Keranjang belanja anda masih kosong</td>
                   </tr>
                 )}
-                {products?.map((product) => (
+                {products && products?.map((product) => (
                   <tr key={product.id}>
                     <td>
                       <input
diff --git a/src/lib/product/components/Product/ProductDesktop.jsx b/src/lib/product/components/Product/ProductDesktop.jsx
index 0bff3ceb..bb2b2db9 100644
--- a/src/lib/product/components/Product/ProductDesktop.jsx
+++ b/src/lib/product/components/Product/ProductDesktop.jsx
@@ -321,38 +321,36 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
             <ProductSimilar query={productSimilarQuery} />
           </LazyLoad>
         </div>
-        <div>
-          <BottomPopup
-            className='!w-[50%]'
-            title='Berhasil Ditambahkan'
-            active={addCartAlert}
-            close={() => setAddCartAlert(false)}
-          >
-            <div className='flex mt-10 mb-5'>
-              <div className='w-[15%]'>
-                <Image
-                  src={product.image}
-                  alt={product.name}
-                  className='h-20 object-contain object-center w-full border border-gray_r-4'
-                />
-              </div>
-              <div className='ml-3 flex flex-1 items-center text-sm font-normal'>
-                {product.name}
-              </div>
-              <div className='ml-3 flex items-center text-sm font-normal'>
-                <Link href='/shop/cart' className='flex-1 py-2 text-gray_r-12 btn-yellow'>
-                  Lihat Keranjang
-                </Link>
-              </div>
+
+        <BottomPopup
+          className='!container'
+          title='Berhasil Ditambahkan'
+          active={addCartAlert}
+          close={() => setAddCartAlert(false)}
+        >
+          <div className='flex mt-4'>
+            <div className='w-[10%]'>
+              <Image
+                src={product.image}
+                alt={product.name}
+                className='h-32 object-contain object-center w-full border border-gray_r-4'
+              />
             </div>
-            <div className='my-12'>
-              <div className='text-h-lg font-semibold mb-6'>Kamu Mungkin Juga Suka</div>
-              <LazyLoad>
-                <ProductSimilar query={productSimilarQuery} />
-              </LazyLoad>
+            <div className='ml-3 flex flex-1 items-center font-normal'>{product.name}</div>
+            <div className='ml-3 flex items-center font-normal'>
+              <Link href='/shop/cart' className='flex-1 py-2 text-gray_r-12 btn-yellow'>
+                Lihat Keranjang
+              </Link>
             </div>
-          </BottomPopup>
-        </div>
+          </div>
+
+          <div className='mt-8 mb-4'>
+            <div className='text-h-sm font-semibold mb-6'>Kamu Mungkin Juga Suka</div>
+            <LazyLoad>
+              <ProductSimilar query={productSimilarQuery} />
+            </LazyLoad>
+          </div>
+        </BottomPopup>
       </div>
     </DesktopView>
   )
diff --git a/src/lib/product/components/Product/ProductMobile.jsx b/src/lib/product/components/Product/ProductMobile.jsx
index 43ef0e5e..b75a191b 100644
--- a/src/lib/product/components/Product/ProductMobile.jsx
+++ b/src/lib/product/components/Product/ProductMobile.jsx
@@ -89,7 +89,6 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
       quantity,
       selected: true
     })
-    // toast.success('Berhasil menambahkan ke keranjang')
     setAddCartAlert(true)
   }
 
@@ -270,37 +269,33 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
         </LazyLoad>
       </div>
 
-      <div>
-          <BottomPopup
-            title='Berhasil Ditambahkan'
-            active={addCartAlert}
-            close={() => setAddCartAlert(false)}
-          >
-            <div className='flex mt-10 mb-5'>
-              <div className='w-[15%]'>
-                <Image
-                  src={product.image}
-                  alt={product.name}
-                  className='h-20 object-contain object-center w-full border border-gray_r-4'
-                />
-              </div>
-              <div className='ml-3 flex flex-1 items-center text-sm font-normal'>
-                {product.name}
-              </div>
-              <div className='ml-3 flex items-center text-sm font-normal'>
-                <Link href='/shop/cart' className='flex-1 py-2 text-gray_r-12 btn-yellow'>
-                  Lihat Keranjang
-                </Link>
-              </div>
-            </div>
-            <div className='my-12'>
-              <div className='text-h-lg font-semibold mb-6'>Kamu Mungkin Juga Suka</div>
-              <LazyLoad>
-                <ProductSimilar query={productSimilarQuery} />
-              </LazyLoad>
-            </div>
-          </BottomPopup>
+      <BottomPopup
+        title='Berhasil Ditambahkan'
+        active={addCartAlert}
+        close={() => setAddCartAlert(false)}
+      >
+        <div className='flex mt-4'>
+          <div className='w-[15%]'>
+            <Image
+              src={product.image}
+              alt={product.name}
+              className='h-20 object-contain object-center w-full border border-gray_r-4'
+            />
+          </div>
+          <div className='ml-3 flex flex-1 items-center text-sm font-normal'>{product.name}</div>
+          <div className='ml-3 flex items-center text-sm font-normal'>
+            <Link href='/shop/cart' className='flex-1 py-2 text-gray_r-12 btn-yellow'>
+              Lihat Keranjang
+            </Link>
+          </div>
+        </div>
+        <div className='mt-8 mb-4'>
+          <div className='text-h-sm font-semibold mb-6'>Kamu Mungkin Juga Suka</div>
+          <LazyLoad>
+            <ProductSimilar query={productSimilarQuery} />
+          </LazyLoad>
         </div>
+      </BottomPopup>
     </MobileView>
   )
 }
diff --git a/src/lib/product/components/ProductSlider.jsx b/src/lib/product/components/ProductSlider.jsx
index c8bd3a82..931a8db7 100644
--- a/src/lib/product/components/ProductSlider.jsx
+++ b/src/lib/product/components/ProductSlider.jsx
@@ -12,7 +12,7 @@ const bannerClassName =
 
 const ProductSlider = ({ products, simpleTitle = false, bannerMode = false }) => {
   const bannerRef = useRef('')
-  const { isMobile } = useDevice()
+  const { isMobile, isDesktop } = useDevice()
 
   const changeBannerOpacity = (swiper) => {
     if (!bannerMode) return
@@ -32,27 +32,29 @@ const ProductSlider = ({ products, simpleTitle = false, bannerMode = false }) =>
           />
         </div>
       )}
-      <Swiper
-        freeMode={{ enabled: true, sticky: false }}
-        slidesPerView={isMobile ? 2.2 : 5.6}
-        spaceBetween={isMobile ? 8 : 16}
-        onSliderMove={changeBannerOpacity}
-        onSlideChangeTransitionEnd={changeBannerOpacity}
-        onSlideChangeTransitionStart={changeBannerOpacity}
-        prefix='product'
-        modules={[FreeMode]}
-      >
-        {bannerMode && (
-          <SwiperSlide>
-            <Link href={products.banner.url} className='w-full h-full block'></Link>
-          </SwiperSlide>
-        )}
-        {products?.products?.map((product, index) => (
-          <SwiperSlide key={index}>
-            <ProductCard product={product} simpleTitle={simpleTitle} />
-          </SwiperSlide>
-        ))}
-      </Swiper>
+      {(isMobile || isDesktop) && (
+        <Swiper
+          freeMode={{ enabled: true, sticky: false }}
+          slidesPerView={isMobile ? 2.2 : 5.6}
+          spaceBetween={isMobile ? 8 : 16}
+          onSliderMove={changeBannerOpacity}
+          onSlideChangeTransitionEnd={changeBannerOpacity}
+          onSlideChangeTransitionStart={changeBannerOpacity}
+          prefix='product'
+          modules={[FreeMode]}
+        >
+          {bannerMode && (
+            <SwiperSlide>
+              <Link href={products.banner.url} className='w-full h-full block'></Link>
+            </SwiperSlide>
+          )}
+          {products?.products?.map((product, index) => (
+            <SwiperSlide key={index}>
+              <ProductCard product={product} simpleTitle={simpleTitle} />
+            </SwiperSlide>
+          ))}
+        </Swiper>
+      )}
     </>
   )
 }
diff --git a/src/pages/api/shop/search.js b/src/pages/api/shop/search.js
index bab96237..19b9655a 100644
--- a/src/pages/api/shop/search.js
+++ b/src/pages/api/shop/search.js
@@ -15,19 +15,19 @@ export default async function handler(req, res) {
     limit = 30
   } = req.query
 
-  let paramOrderBy = 'product_rating_f DESC'
+  let paramOrderBy = ''
   switch (orderBy) {
     case 'price-asc':
-      paramOrderBy += ', price_discount_f ASC'
+      paramOrderBy += 'price_discount_f ASC'
       break
     case 'price-desc':
-      paramOrderBy += ', price_discount_f DESC'
+      paramOrderBy += 'price_discount_f DESC'
       break
     case 'popular':
-      paramOrderBy += ', search_rank_i DESC'
+      paramOrderBy += 'search_rank_i DESC'
       break
     case 'stock':
-      paramOrderBy += ', stock_total_f DESC'
+      paramOrderBy += 'stock_total_f DESC'
       break
   }
 
diff --git a/src/pages/video.jsx b/src/pages/video.jsx
index 708c3368..61790dbb 100644
--- a/src/pages/video.jsx
+++ b/src/pages/video.jsx
@@ -33,7 +33,7 @@ export default function Video() {
               <div className='shadow bg-white rounded' key={video.id}>
                 <LazyLoadComponent>
                   <iframe
-                    src={`https://www.youtube.com/embed/${video.url.match(/v=([^&]*)/)[1]}`}
+                    src={`https://www.youtube.com/embed/${video.url.match(/v=([^&]*)/)?.[1] || ''}`}
                     title='YouTube video player'
                     allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share'
                     allowFullScreen={true}