From 6bfa8b7b0c6afaec7eb3d81983d0f012953b07f2 Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Wed, 7 Aug 2024 11:49:54 +0700
Subject: <iman> add pop up semua promo

---
 .../components/elements/Navbar/NavbarDesktop.jsx   | 70 ++++++++++++++++++----
 1 file changed, 57 insertions(+), 13 deletions(-)

(limited to 'src/core/components/elements/Navbar/NavbarDesktop.jsx')

diff --git a/src/core/components/elements/Navbar/NavbarDesktop.jsx b/src/core/components/elements/Navbar/NavbarDesktop.jsx
index 7d9e4264..ff43d4a0 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,20 @@ 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> */}
               </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>
+              )}
+              {/* {showPopup && router.pathname === '/' && (
+                <div className={`fixed ${isTop ? 'top-44' : 'top-24'} left-[700px] border-none  object-center   text-xs font-thin text-green-700 p-2 z-50 transition-all duration-150`}>
+                    <ArrowUpRightIcon className='w-10'/>
+                </div>
+              )} */}
+              
 
               <Link
                 href='/shop/brands'
-- 
cgit v1.2.3


From 3b785b0bce7cf27a377716c8dca300a996daff0c Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Wed, 7 Aug 2024 13:14:27 +0700
Subject: <iman> add penwaran terbatas popup

---
 src/core/components/elements/Navbar/NavbarDesktop.jsx | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

(limited to 'src/core/components/elements/Navbar/NavbarDesktop.jsx')

diff --git a/src/core/components/elements/Navbar/NavbarDesktop.jsx b/src/core/components/elements/Navbar/NavbarDesktop.jsx
index ff43d4a0..78e7f54a 100644
--- a/src/core/components/elements/Navbar/NavbarDesktop.jsx
+++ b/src/core/components/elements/Navbar/NavbarDesktop.jsx
@@ -57,7 +57,7 @@ const NavbarDesktop = () => {
     }, 500);
 
     const hideTimer = setTimeout(() => {
-      setShowPopup(false);
+      // setShowPopup(false);
     }, 9500);
 
     return () => {
@@ -256,18 +256,22 @@ const NavbarDesktop = () => {
               >
                 <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 === '/' && (
+              {/* {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>
-              )}
-              {/* {showPopup && router.pathname === '/' && (
-                <div className={`fixed ${isTop ? 'top-44' : 'top-24'} left-[700px] border-none  object-center   text-xs font-thin text-green-700 p-2 z-50 transition-all duration-150`}>
-                    <ArrowUpRightIcon className='w-10'/>
-                </div>
               )} */}
+              {showPopup && router.pathname === '/' && (
+                <Image
+                src='/images/penawaran-terbatas.svg'
+                alt='penawaran terbatas'
+                width={144}
+                height={3}
+                className={`fixed ${isTop ? 'top-[-275px]' : 'top-[-345px]'} rounded-3xl left-[680px] w-48 h-full  p-2 z-50 transition-all duration-300`}
+              />
+              )}
               
 
               <Link
-- 
cgit v1.2.3


From 86a715473aca30e277c1857bbcb6e6e9283e13f4 Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Wed, 7 Aug 2024 15:22:39 +0700
Subject: <iman> update all promo

---
 src/core/components/elements/Navbar/NavbarDesktop.jsx | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

(limited to 'src/core/components/elements/Navbar/NavbarDesktop.jsx')

diff --git a/src/core/components/elements/Navbar/NavbarDesktop.jsx b/src/core/components/elements/Navbar/NavbarDesktop.jsx
index 78e7f54a..cc5ea611 100644
--- a/src/core/components/elements/Navbar/NavbarDesktop.jsx
+++ b/src/core/components/elements/Navbar/NavbarDesktop.jsx
@@ -255,6 +255,16 @@ 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>
+              {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`}>
@@ -263,15 +273,6 @@ const NavbarDesktop = () => {
                     </p>
                 </div>
               )} */}
-              {showPopup && router.pathname === '/' && (
-                <Image
-                src='/images/penawaran-terbatas.svg'
-                alt='penawaran terbatas'
-                width={144}
-                height={3}
-                className={`fixed ${isTop ? 'top-[-275px]' : 'top-[-345px]'} rounded-3xl left-[680px] w-48 h-full  p-2 z-50 transition-all duration-300`}
-              />
-              )}
               
 
               <Link
-- 
cgit v1.2.3


From c08901721ea5bf61aa5dca9ada1abaf480d8a1ee Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Wed, 7 Aug 2024 16:06:41 +0700
Subject: <iman> update pop up

---
 .../components/elements/Navbar/NavbarDesktop.jsx    | 21 ++++++++++++---------
 1 file changed, 12 insertions(+), 9 deletions(-)

(limited to 'src/core/components/elements/Navbar/NavbarDesktop.jsx')

diff --git a/src/core/components/elements/Navbar/NavbarDesktop.jsx b/src/core/components/elements/Navbar/NavbarDesktop.jsx
index cc5ea611..a09989a5 100644
--- a/src/core/components/elements/Navbar/NavbarDesktop.jsx
+++ b/src/core/components/elements/Navbar/NavbarDesktop.jsx
@@ -254,17 +254,20 @@ 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>
               {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`}
-              />
+                <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={`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-4 transition-all duration-300 z-20 animate-pulse`}
+                  />
+                  </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`}>
-- 
cgit v1.2.3


From 0fc1ee076d3a59b406f79716c343f15301c1066a Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Wed, 7 Aug 2024 17:06:58 +0700
Subject: <iman> update all promotion card flashSale

---
 src/core/components/elements/Navbar/NavbarDesktop.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/core/components/elements/Navbar/NavbarDesktop.jsx')

diff --git a/src/core/components/elements/Navbar/NavbarDesktop.jsx b/src/core/components/elements/Navbar/NavbarDesktop.jsx
index a09989a5..76012694 100644
--- a/src/core/components/elements/Navbar/NavbarDesktop.jsx
+++ b/src/core/components/elements/Navbar/NavbarDesktop.jsx
@@ -263,7 +263,7 @@ const NavbarDesktop = () => {
                     height={160}
                     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-4 transition-all duration-300 z-20 animate-pulse`}
+                    className={`inline-block relative -top-5 transition-all duration-300 z-20 animate-pulse`}
                   />
                   </div>
               )}
-- 
cgit v1.2.3


From 718babe0efd96c33ba2b8fd0cb458c57d67abe9c Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Wed, 7 Aug 2024 17:15:58 +0700
Subject: <iman> update position

---
 src/core/components/elements/Navbar/NavbarDesktop.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/core/components/elements/Navbar/NavbarDesktop.jsx')

diff --git a/src/core/components/elements/Navbar/NavbarDesktop.jsx b/src/core/components/elements/Navbar/NavbarDesktop.jsx
index 76012694..2ddf5efe 100644
--- a/src/core/components/elements/Navbar/NavbarDesktop.jsx
+++ b/src/core/components/elements/Navbar/NavbarDesktop.jsx
@@ -263,7 +263,7 @@ const NavbarDesktop = () => {
                     height={160}
                     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-5 transition-all duration-300 z-20 animate-pulse`}
+                    className={`inline-block relative -top-8 transition-all duration-300 z-20 animate-pulse`}
                   />
                   </div>
               )}
-- 
cgit v1.2.3