Merge branch 'release' into Feature/new-cart-popup

5 files changed, 166 insertions, 39 deletions

diff --git a/src/core/components/elements/Footer/BasicFooter.jsx b/src/core/components/elements/Footer/BasicFooter.jsx
index 6129143d..8f024d86 100644
--- a/src/core/components/elements/Footer/BasicFooter.jsx
+++ b/src/core/components/elements/Footer/BasicFooter.jsx
@@ -175,7 +175,7 @@ const CustomerGuide = () => (
   <div>
     <div className={headerClassName}>Bantuan & Panduan</div>
     <ul className='flex flex-col gap-y-3'>
-      <li>
+      <li >
         <InternalItemLink href='/metode-pembayaran'>
           Metode Pembayaran
         </InternalItemLink>
@@ -210,6 +210,11 @@ const CustomerGuide = () => (
           Panduan Pick Up Service
         </InternalItemLink>
       </li>
+      <li>
+        <InternalItemLink href='/tracking-order'>
+          Tracking Order
+        </InternalItemLink>
+      </li>
     </ul>
   </div>
 );
@@ -259,7 +264,7 @@ const InformationCenter = () => (
       <li className='text-gray_r-12/80 flex items-center'>
         <PhoneArrowUpRightIcon className='w-[18px] mr-2' />
         <a href='tel:02129338828' target='_blank' rel='noreferrer'>
-          (021) 2933-8828 / 29
+          (021) 2933-8828
         </a>
       </li>
       <li className='text-gray_r-12/80 flex items-center'>
diff --git a/src/core/components/elements/Navbar/NavbarDesktop.jsx b/src/core/components/elements/Navbar/NavbarDesktop.jsx
index 1163aff3..0d0e8550 100644
--- a/src/core/components/elements/Navbar/NavbarDesktop.jsx
+++ b/src/core/components/elements/Navbar/NavbarDesktop.jsx
@@ -12,11 +12,12 @@ import {
   ChevronDownIcon,
   DocumentCheckIcon,
   HeartIcon,
+  ArrowUpRightIcon,
 } from '@heroicons/react/24/outline';
 import dynamic from 'next/dynamic';
 import Image from 'next/image';
 import { useRouter } from 'next/router';
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import DesktopView from '../../views/DesktopView';
 import Link from '../Link/Link';
 import NavbarUserDropdown from './NavbarUserDropdown';
@@ -62,6 +63,46 @@ const NavbarDesktop = () => {
     (transaction) => transaction.status === 'draft'
   );
 
+  const [showPopup, setShowPopup] = useState(false);
+  const [isTop, setIsTop] = useState(true);
+
+  const handleTopBannerLoad = useCallback(() => {
+    const showTimer = setTimeout(() => {
+      setShowPopup(true);
+    }, 500);
+
+    const hideTimer = setTimeout(() => {
+      // setShowPopup(false);
+    }, 9500);
+
+    return () => {
+      clearTimeout(showTimer);
+      clearTimeout(hideTimer);
+    };
+  }, []);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      setIsTop(window.scrollY < 100);
+    };
+
+    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);
+    };
+  }, []);
+
   useEffect(() => {
     setPendingTransactions(data);
   }, [transactions.data]);
@@ -115,7 +156,7 @@ const NavbarDesktop = () => {
   
   return (
     <DesktopView>
-      <TopBanner />
+      <TopBanner onLoad={handleTopBannerLoad} />
       <div className='py-2 bg-warning-400' id='desktop-nav-top'>
         <div className='container mx-auto flex justify-between'>
           <div className='flex items-start gap-5'>
@@ -230,6 +271,7 @@ const NavbarDesktop = () => {
               </div>
             </button>
             <div className='w-6/12 flex px-1 divide-x divide-gray_r-6'>
+            
             <Link
                 href="/shop/promo"
                 className={`${
@@ -238,19 +280,29 @@ const NavbarDesktop = () => {
                 target="_blank"
                 rel="noreferrer"
               >
-                <p className="absolute inset-0 flex justify-center items-center group-hover:scale-105 group-hover:text-red-500 transition-transform duration-200 z-10">Semua Promo</p>
-                {/* <div className='w-full h-full flex justify-end items-start'> 
-                  <Image
-                    src='/images/ICON PROMO DISKON.svg'
-                    alt='promo'
-                    width={100}
-                    height={100}
+              {showPopup &&  (
+                <div className='w-full h-full relative justify-end items-start'> 
+                    <Image
+                    src='/images/penawaran-terbatas.jpg'
+                    alt='penawaran terbatas'
+                    width={1440}
+                    height={160}
                     quality={100}
-                    className={`inline-block  z-20`}
+                    // 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`}
                   />
-                </div> */}
+                  </div>
+              )}
+                <p className="absolute inset-0 flex justify-center items-center group-hover:scale-105 group-hover:text-red-500 transition-transform duration-200 z-10">Semua Promo</p>
               </Link>
-
+              {/* {showPopup && router.pathname === '/' && (
+                <div className={`fixed ${isTop ? 'top-[170px]' : 'top-[90px]'} rounded-3xl left-[700px] w-fit object-center bg-green-50 text-xs font-medium text-green-700 ring-1 ring-inset ring-green-600/20 text-center p-2 z-50 transition-all duration-300`}>
+                  <p className='w-36 h-3'>
+                    Penawaran Terbatas
+                    </p>
+                </div>
+              )} */}
+              
 
               <Link
                 href='/shop/brands'
@@ -265,7 +317,7 @@ const NavbarDesktop = () => {
               <Link
                 href='/shop/search?orderBy=stock'
                 className={`${
-                  router.asPath === '/shop/search?orderBy=stock' &&
+                  router.asPath.includes('/shop/search?orderBy=stock') &&
                   '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`}
                 target='_blank'
diff --git a/src/core/components/elements/Navbar/TopBanner.jsx b/src/core/components/elements/Navbar/TopBanner.jsx
index df47e87d..f438ae67 100644
--- a/src/core/components/elements/Navbar/TopBanner.jsx
+++ b/src/core/components/elements/Navbar/TopBanner.jsx
@@ -4,8 +4,9 @@ import odooApi from '@/core/api/odooApi';
 import SmoothRender from '~/components/ui/smooth-render';
 import Link from '../Link/Link';
 import { background } from '@chakra-ui/react';
+import { useEffect } from 'react';
 
-const TopBanner = () => {
+const TopBanner = ({ onLoad = () => {} }) => {
   const { isDesktop, isMobile } = useDevice()
   const topBanner = useQuery({
     queryKey: 'topBanner',
@@ -17,6 +18,12 @@ const TopBanner = () => {
   const hasData = topBanner.data?.length > 0;
   const data = topBanner.data?.[0] || null;
 
+  useEffect(() => {
+    if (hasData) {
+      onLoad();
+    }
+  }, [hasData, onLoad]);
+
   return (
     <SmoothRender
       isLoaded={hasData}
diff --git a/src/core/components/layouts/BasicLayout.jsx b/src/core/components/layouts/BasicLayout.jsx
index a4f3a856..c4674344 100644
--- a/src/core/components/layouts/BasicLayout.jsx
+++ b/src/core/components/layouts/BasicLayout.jsx
@@ -1,12 +1,13 @@
 import dynamic from 'next/dynamic';
 import Image from 'next/image';
 import { useRouter } from 'next/router';
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useRef } from 'react';
 
 import { useProductContext } from '@/contexts/ProductContext';
 import odooApi from '@/core/api/odooApi';
 import whatsappUrl from '@/core/utils/whatsappUrl';
 import Navbar from '../elements/Navbar/Navbar';
+import styles from './BasicLayout.module.css'; // Import modul CSS
 
 const AnimationLayout = dynamic(() => import('./AnimationLayout'), {
   ssr: false,
@@ -19,10 +20,15 @@ const BasicLayout = ({ children }) => {
   const [templateWA, setTemplateWA] = useState(null);
   const [payloadWA, setPayloadWa] = useState(null);
   const [urlPath, setUrlPath] = useState(null);
+  const [highlight, setHighlight] = useState(false);
+  const [buttonPosition, setButtonPosition] = useState(null);
+  const [wobble, setWobble] = useState(false);
 
   const router = useRouter();
+  const buttonRef = useRef(null);
 
   const { product } = useProductContext();
+
   useEffect(() => {
     if (
       router.pathname === '/shop/product/[slug]' ||
@@ -39,6 +45,32 @@ const BasicLayout = ({ children }) => {
     }
   }, [product, router]);
 
+  useEffect(() => {
+    const handleMouseOut = (event) => {
+      const rect = buttonRef.current.getBoundingClientRect();
+      if (event.clientY <= 0) {
+        setButtonPosition(rect)
+        setHighlight(true);
+      } else {
+        setHighlight(false);
+      }
+    };
+
+    window.addEventListener('mouseout', handleMouseOut);
+
+    return () => {
+      window.removeEventListener('mouseout', handleMouseOut);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (highlight) {
+      // Set wobble animation after overlay highlight animation completes
+      const timer = setTimeout(() => setWobble(true), 1000); // Adjust timing if needed
+      return () => clearTimeout(timer);
+    }
+  }, [highlight]);
+
   const recordActivity = async (pathname) => {
     const ONLY_ON_PATH = false;
     const recordedPath = [];
@@ -60,32 +92,50 @@ const BasicLayout = ({ children }) => {
 
   return (
     <>
+    {highlight && buttonPosition && (
+        <div
+          className={styles['overlay-highlight']}
+          style={{
+            '--button-x': `${buttonPosition.x + buttonPosition.width  / 2}px`,
+            '--button-y': `${buttonPosition.y + buttonPosition.height / 2}px`,
+            '--button-radius': `${Math.max(buttonPosition.width, buttonPosition.height) / 2}px`
+          }}
+          onAnimationEnd={() => setHighlight(false)}
+        />
+      )}
       <Navbar />
       <AnimationLayout>
         {children}
         <div className='fixed bottom-4 right-4 sm:bottom-14 sm:right-10 z-50'>
-          <a
-            href={whatsappUrl(templateWA, payloadWA, urlPath)}
-            className='py-2 pl-3 pr-4 rounded-full bg-[#4FB84A] border border-green-300 flex items-center'
-            rel='noopener noreferrer'
-            target='_blank'
-          >
-            <Image
-              src='/images/socials/WHATSAPP.svg'
-              alt='Whatsapp'
-              className='block sm:hidden'
-              width={36}
-              height={36}
-            />
-            <Image
-              src='/images/socials/WHATSAPP.svg'
-              alt='Whatsapp'
-              className='hidden sm:block'
-              width={44}
-              height={44}
-            />
-            <span className='text-white font-bold ml-1.5'>Whatsapp</span>
-          </a>
+        <div className='flex flex-row items-center'>
+            <a href={whatsappUrl(templateWA, payloadWA, urlPath)} className='flex flex-row items-center' rel='noopener noreferrer' target='_blank'>
+              <span className={`text-green-300 text-lg font-bold mr-4 ${wobble ? 'animate-wobble' : ''}`} onAnimationEnd={() => setWobble(false)}>
+                Whatsapp
+              </span>
+            </a>
+            <a
+              href={whatsappUrl(templateWA, payloadWA, urlPath)}
+              className='elemen-whatsapp p-4 rounded-full bg-[#4FB84A] border border-green-300 flex items-center'
+              rel='noopener noreferrer'
+              target='_blank'
+              ref={buttonRef}
+            >
+              <Image
+                src='/images/socials/WHATSAPP.svg'
+                alt='Whatsapp'
+                className='block sm:hidden'
+                width={36}
+                height={36}
+              />
+              <Image
+                src='/images/socials/WHATSAPP.svg'
+                alt='Whatsapp'
+                className='hidden sm:block'
+                width={44}
+                height={44}
+              />
+            </a>
+          </div>
         </div>
       </AnimationLayout>
       <BasicFooter />
diff --git a/src/core/components/layouts/BasicLayout.module.css b/src/core/components/layouts/BasicLayout.module.css
new file mode 100644
index 00000000..4945c420
--- /dev/null
+++ b/src/core/components/layouts/BasicLayout.module.css
@@ -0,0 +1,13 @@
+.overlay-highlight {
+    @apply fixed top-0 left-0 w-full h-full  bg-[#4FB84A]/30 z-[900];
+    animation: closeOverlay 1s forwards;
+  }
+  
+  @keyframes closeOverlay {
+    from {
+        clip-path: circle(100% at 50% 50%);
+    }
+    to {
+      clip-path: circle(var(--button-radius) at var(--button-x) var(--button-y));
+    }
+  }