<iman> merge all promotion

3 files changed, 71 insertions, 15 deletions

diff --git a/src/core/components/elements/Footer/BasicFooter.jsx b/src/core/components/elements/Footer/BasicFooter.jsx
index 6129143d..4beea604 100644
--- a/src/core/components/elements/Footer/BasicFooter.jsx
+++ b/src/core/components/elements/Footer/BasicFooter.jsx
@@ -259,7 +259,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 7d9e4264..cc5ea611 100644
--- a/src/core/components/elements/Navbar/NavbarDesktop.jsx
+++ b/src/core/components/elements/Navbar/NavbarDesktop.jsx
@@ -10,11 +10,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';
@@ -47,6 +48,46 @@ const NavbarDesktop = () => {
   const { product } = useProductContext();
   const { isOpen, onOpen, onClose } = useDisclosure();
 
+  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(() => {
     if (router.pathname === '/shop/product/[slug]') {
       setPayloadWa({
@@ -79,7 +120,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'>
@@ -204,6 +245,7 @@ const NavbarDesktop = () => {
               </div>
             </button>
             <div className='w-6/12 flex px-1 divide-x divide-gray_r-6'>
+            
             <Link
                 href="/shop/promo"
                 className={`${
@@ -213,18 +255,25 @@ const NavbarDesktop = () => {
                 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}
-                    quality={100}
-                    className={`inline-block  z-20`}
-                  />
-                </div> */}
+              {showPopup &&  (
+                <Image
+                src='/images/penawaran-terbatas.jpg'
+                alt='penawaran terbatas'
+                width={1440}
+                height={160}
+                quality={100}
+                className={`fixed ${isTop ? 'top-[155px]' : 'top-[80px]'} rounded-3xl left-[645px] w-40 h-12  p-2 z-50 transition-all duration-300 animate-pulse`}
+              />
+              )}
               </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'
diff --git a/src/core/components/elements/Navbar/TopBanner.jsx b/src/core/components/elements/Navbar/TopBanner.jsx
index df47e87d..265dfb5e 100644
--- a/src/core/components/elements/Navbar/TopBanner.jsx
+++ b/src/core/components/elements/Navbar/TopBanner.jsx
@@ -3,9 +3,10 @@ import { useQuery } from 'react-query';import useDevice from '@/core/hooks/useDe
 import odooApi from '@/core/api/odooApi';
 import SmoothRender from '~/components/ui/smooth-render';
 import Link from '../Link/Link';
+import { useEffect } from 'react';
 import { background } from '@chakra-ui/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}