Merge branch 'new-release' into feature/integrasi_biteship

6 files changed, 94 insertions, 55 deletions

diff --git a/src/core/components/elements/Navbar/Navbar.jsx b/src/core/components/elements/Navbar/Navbar.jsx
index 57904498..59f743a2 100644
--- a/src/core/components/elements/Navbar/Navbar.jsx
+++ b/src/core/components/elements/Navbar/Navbar.jsx
@@ -3,10 +3,12 @@ import dynamic from 'next/dynamic'
 const NavbarDesktop = dynamic(() => import('./NavbarDesktop'))
 const NavbarMobile = dynamic(() => import('./NavbarMobile'))
 
-const Navbar = () => {
+const Navbar = ({isMobile} ) => {
+  
+  if(isMobile) return <NavbarMobile />
+
   return (
     <>
-      <NavbarMobile />
       <NavbarDesktop />
     </>
   )
diff --git a/src/core/components/elements/Navbar/NavbarDesktop.jsx b/src/core/components/elements/Navbar/NavbarDesktop.jsx
index fa3df5bf..253a2b03 100644
--- a/src/core/components/elements/Navbar/NavbarDesktop.jsx
+++ b/src/core/components/elements/Navbar/NavbarDesktop.jsx
@@ -12,12 +12,9 @@ import {
   MenuButton,
   MenuItem,
   MenuList,
-  useDisclosure
+  useDisclosure,
 } from '@chakra-ui/react';
-import {
-  ChevronDownIcon,
-  HeartIcon
-} from '@heroicons/react/24/outline';
+import { ChevronDownIcon, HeartIcon } from '@heroicons/react/24/outline';
 import dynamic from 'next/dynamic';
 import { default as Image, default as NextImage } from 'next/image';
 import { useRouter } from 'next/router';
@@ -81,21 +78,17 @@ const NavbarDesktop = () => {
     };
 
     window.addEventListener('scroll', handleScroll);
+
     return () => {
       window.removeEventListener('scroll', handleScroll);
     };
   }, []);
 
   useEffect(() => {
-    const handleScroll = () => {
-      setIsTop(window.scrollY < 100);
-    };
-
-    window.addEventListener('scroll', handleScroll);
-    return () => {
-      window.removeEventListener('scroll', handleScroll);
-    };
-  }, []);
+    if (auth) {
+      loadCart(auth.id);
+    }
+  }, [auth]);
 
   useEffect(() => {
     setPendingTransactions(data);
@@ -115,20 +108,22 @@ const NavbarDesktop = () => {
   }, [product, router]);
 
   useEffect(() => {
-    const handleCartChange = () => {
-      const cart = async () => {
-        const listCart = await getCountCart();
-        setCartCount(listCart);
-      };
-      cart();
-    };
-    handleCartChange();
-
-    window.addEventListener('localStorageChange', handleCartChange);
-
-    return () => {
-      window.removeEventListener('localStorageChange', handleCartChange);
-    };
+    // const handleCartChange = () => {
+    //   const cart = async () => {
+    //     const listCart = await getCountCart();
+    //     setCartCount(listCart);
+    //   };
+    //   cart();
+    // };
+    // handleCartChange();
+
+    setCartCount(cart?.products?.length)
+
+    // window.addEventListener('localStorageChange', handleCartChange);
+
+    // return () => {
+    //   window.removeEventListener('localStorageChange', handleCartChange);
+    // };
   }, [transactions.data, cart]);
 
   useEffect(() => {
@@ -197,12 +192,14 @@ const NavbarDesktop = () => {
 
       <nav className='pt-6 sticky top-0 z-50 bg-white border-b-2 border-danger-500'>
         <div className='container mx-auto flex gap-x-6'>
-          <Link href='/'>
+          <Link href='/' aria-label='Indoteknik Logo'>
             <Image
               src={IndoteknikLogo}
               alt='Indoteknik Logo'
               width={210}
-              height={210 / 3}
+              height={70}
+              loading='eager'
+              priority={true}
             />
           </Link>
           <div className='flex-1 flex items-center'>
@@ -220,6 +217,7 @@ const NavbarDesktop = () => {
               target='_blank'
               rel='noreferrer'
               href='/my/wishlist'
+              aria-label='Wishlist'
               className='flex items-center gap-x-2 !text-gray_r-12/80'
             >
               <HeartIcon className='w-7' />
@@ -227,6 +225,7 @@ const NavbarDesktop = () => {
             </Link>
             <a
               href={whatsappUrl(templateWA, payloadWA, urlPath)}
+              aria-label='Whatsapp'
               target='_blank'
               rel='noreferrer'
               className='flex items-center gap-x-1 !text-gray_r-12/80'
@@ -236,6 +235,7 @@ const NavbarDesktop = () => {
                 alt='Whatsapp'
                 width={48}
                 height={48}
+                loading='eager'
               />
               <div>
                 <div className='font-semibold'>Whatsapp</div>
@@ -268,6 +268,7 @@ const NavbarDesktop = () => {
             <div className='w-6/12 flex px-1 divide-x divide-gray_r-6'>
               <Link
                 href='/shop/promo'
+                aria-label='Promo'
                 className={`${
                   router.asPath === '/shop/promo' && 'bg-gray_r-3'
                 }  flex-1 flex justify-center items-center !text-gray_r-12/80 hover:bg-gray_r-3 idt-transition group relative`} // Added relative position
@@ -284,6 +285,7 @@ const NavbarDesktop = () => {
                       quality={100}
                       // className={`fixed ${isTop ? 'md:top-[145px] lg:top-[160px] ' : 'lg:top-[85px] top-[80px]'} rounded-3xl md:left-1/4 lg:left-1/4 xl:left-1/4 left-2/3 w-40 h-12  p-2 z-50 transition-all duration-300 animate-pulse`}
                       className={`inline-block relative -top-8 transition-all duration-300 z-20 animate-pulse`}
+                      loading='eager'
                     />
                   </div>
                 )}
@@ -301,6 +303,7 @@ const NavbarDesktop = () => {
 
               <Link
                 href='/shop/brands'
+                aria-label='Brand'
                 className={`${
                   router.asPath === '/shop/brands' && 'bg-gray_r-3'
                 } p-4 flex-1 flex justify-center items-center !text-gray_r-12/80 hover:bg-gray_r-3 idt-transition group`}
@@ -313,6 +316,7 @@ const NavbarDesktop = () => {
               </Link>
               <Link
                 href='/shop/search?orderBy=stock'
+                aria-label='Ready Stock'
                 className={`${
                   router.asPath.includes('/shop/search?orderBy=stock') &&
                   'bg-gray_r-3'
@@ -326,6 +330,7 @@ const NavbarDesktop = () => {
               </Link>
               <Link
                 href='https://blog.indoteknik.com/'
+                aria-label='Blog Indoteknik'
                 className='p-4 flex-1 flex justify-center items-center !text-gray_r-12/80 hover:bg-gray_r-3 idt-transition group'
                 target='_blank'
                 rel='noreferrer noopener'
@@ -349,12 +354,14 @@ const NavbarDesktop = () => {
                 <>
                   <Link
                     href='/login'
+                    aria-label='Login'
                     className='flex-1 flex justify-center items-center bg-danger-500 !text-gray_r-1 rounded-none rounded-t-xl'
                   >
                     Masuk
                   </Link>
                   <Link
                     href='/register'
+                    aria-label='Register'
                     className='flex-1 flex justify-center items-center bg-danger-500 !text-gray_r-1 rounded-none rounded-t-xl'
                   >
                     Daftar
@@ -363,7 +370,7 @@ const NavbarDesktop = () => {
               )}
               {auth && (
                 <>
-                  <div href='/' className='navbar-user-dropdown-button'>
+                  <div href='/' className='navbar-user-dropdown-button' aria-label='User'>
                     <span>Halo, {auth?.name}</span>
                     <div className='ml-auto'>
                       <ChevronDownIcon className='w-6' />
@@ -388,24 +395,28 @@ const SocialMedias = () => (
         target='_blank'
         rel='noreferrer'
         href='https://www.youtube.com/@indoteknikcom'
+        aria-label='Youtube - Indoteknik.com'
       >
         <NextImage
           src='/images/socials/youtube.webp'
-          // alt='Youtube - Indoteknik.com'
+          alt='Ytube'
           width={24}
           height={24}
+          loading='eager'
         />
       </a>
       <a
         target='_blank'
         rel='noreferrer'
         href='https://www.tiktok.com/@indoteknikcom'
+        aria-label='TikTok - Indoteknik.com'
       >
         <NextImage
           src='/images/socials/tiktok.png'
-          // alt='TikTok - Indoteknik.com'
+          alt='TikTok'
           width={24}
           height={24}
+          loading='eager'
         />
       </a>
       {/* <a target='_blank' rel='noreferrer' href={whatsappUrl(null)}>
@@ -420,48 +431,56 @@ const SocialMedias = () => (
         target='_blank'
         rel='noreferrer'
         href='https://www.facebook.com/indoteknikcom'
+        aria-label='Facebook - Indoteknik.com'
       >
         <NextImage
           src='/images/socials/Facebook.png'
-          // alt='Facebook - Indoteknik.com'
+          alt='FB'
           width={24}
           height={24}
+          loading='eager'
         />
       </a>
       <a
         target='_blank'
         rel='noreferrer'
         href='https://www.instagram.com/indoteknikcom/'
+        aria-label='Instagram - Indoteknik.com'
       >
         <NextImage
           src='/images/socials/Instagram.png'
-          // alt='Instagram - Indoteknik.com'
+          alt='IG'
           width={24}
           height={24}
+          loading='eager'
         />
       </a>
       <a
         target='_blank'
         rel='noreferrer'
         href='https://www.linkedin.com/company/pt-indoteknik-dotcom-gemilang/'
+        aria-label='Linkedin - Indoteknik.com'
       >
         <NextImage
           src='/images/socials/Linkedin.png'
-          // alt='Linkedin - Indoteknik.com'
+          alt='Linkedin'
           width={24}
           height={24}
+          loading='eager'
         />
       </a>
       <a
         target='_blank'
         rel='noreferrer'
         href='https://goo.gl/maps/GF8EmDjpQTHZPsJ1A'
+        aria-label='Maps - Indoteknik.com'
       >
         <NextImage
           src='/images/socials/g_maps.png'
-          // alt='Maps - Indoteknik.com'
+          alt='Maps'
           width={24}
           height={24}
+          loading='eager'
         />
       </a>
     </div>
diff --git a/src/core/components/elements/Navbar/NavbarMobile.jsx b/src/core/components/elements/Navbar/NavbarMobile.jsx
index 90314671..47182a47 100644
--- a/src/core/components/elements/Navbar/NavbarMobile.jsx
+++ b/src/core/components/elements/Navbar/NavbarMobile.jsx
@@ -12,30 +12,44 @@ import { useEffect, useState } from 'react';
 import MobileView from '../../views/MobileView';
 import Link from '../Link/Link';
 import TopBanner from './TopBanner';
+import { useCartStore } from '~/modules/cart/stores/useCartStore';
+import useAuth from '@/core/hooks/useAuth';
 
 const Search = dynamic(() => import('./Search'));
 
 const NavbarMobile = () => {
   const { Sidebar, open } = useSidebar();
+  const auth = useAuth();
 
   const [cartCount, setCartCount] = useState(0);
+  const { loadCart, cart, summary, updateCartItem } = useCartStore();
 
-  useEffect(() => {
-    const handleCartChange = () => {
-      const cart = async () => {
-        const listCart = await getCountCart();
-        setCartCount(listCart);
-      };
-      cart();
-    };
-    handleCartChange();
+  // useEffect(() => {
+  //   const handleCartChange = () => {
+  //     const cart = async () => {
+  //       const listCart = await getCountCart();
+  //       setCartCount(listCart);
+  //     };
+  //     cart();
+  //   };
+  //   handleCartChange();
+
+  //   window.addEventListener('localStorageChange', handleCartChange);
 
-    window.addEventListener('localStorageChange', handleCartChange);
+  //   return () => {
+  //     window.removeEventListener('localStorageChange', handleCartChange);
+  //   };
+  // }, []);
 
-    return () => {
-      window.removeEventListener('localStorageChange', handleCartChange);
-    };
-  }, []);
+  useEffect(() => {
+    if(auth){
+      loadCart(auth?.id);
+    }
+  }, [auth]);
+
+  useEffect(() => {
+    setCartCount(cart?.products?.length);
+  }, [cart]);
 
   return (
     <MobileView>
@@ -48,6 +62,7 @@ const NavbarMobile = () => {
               alt='Indoteknik Logo'
               width={120}
               height={40}
+              loading='eager'
             />
           </Link>
           <div className='flex gap-x-3'>
diff --git a/src/core/components/elements/Navbar/TopBanner.jsx b/src/core/components/elements/Navbar/TopBanner.jsx
index 709495ce..7d44846c 100644
--- a/src/core/components/elements/Navbar/TopBanner.jsx
+++ b/src/core/components/elements/Navbar/TopBanner.jsx
@@ -50,6 +50,7 @@ const TopBanner = ({ onLoad = () => {} }) => {
       <Link
         href={data?.url}
         className='block bg-cover bg-center h-3 md:h-6 lg:h-[36px]'
+        aria-label='panduan pick up barang'
         style={{
           backgroundImage: `url('${data?.image}')`,
         }}
diff --git a/src/core/components/elements/Sidebar/Sidebar.jsx b/src/core/components/elements/Sidebar/Sidebar.jsx
index ddae3e20..08498759 100644
--- a/src/core/components/elements/Sidebar/Sidebar.jsx
+++ b/src/core/components/elements/Sidebar/Sidebar.jsx
@@ -140,7 +140,7 @@ const Sidebar = ({ active, close }) => {
                   <SidebarLink className={itemClassName} href='/tentang-kami'>
                     Tentang Indoteknik
                   </SidebarLink>
-                  <SidebarLink className={itemClassName} href='/contact-us'>
+                  <SidebarLink className={itemClassName} href='/hubungi-kami'>
                     Hubungi Kami
                   </SidebarLink>
                   <button
diff --git a/src/core/components/layouts/BasicLayout.jsx b/src/core/components/layouts/BasicLayout.jsx
index 1b62bf05..2998fa63 100644
--- a/src/core/components/layouts/BasicLayout.jsx
+++ b/src/core/components/layouts/BasicLayout.jsx
@@ -112,7 +112,7 @@ const BasicLayout = ({ children }) => {
           onAnimationEnd={() => setHighlight(false)}
         />
       )}
-      <Navbar />
+      <Navbar isMobile = {isMobile} />
       <AnimationLayout>
         {children}
         <div
@@ -149,6 +149,7 @@ const BasicLayout = ({ children }) => {
                 className='block sm:hidden'
                 width={36}
                 height={36}
+                loading='eager'
               />
               <Image
                 src='/images/socials/WHATSAPP.svg'
@@ -156,6 +157,7 @@ const BasicLayout = ({ children }) => {
                 className='hidden sm:block'
                 width={44}
                 height={44}
+                loading='eager'
               />
             </a>
           </div>