<iman> Merge branch 'Feature/highlight-button-whatsapp' into development

5 files changed, 72 insertions, 1 deletions

diff --git a/src/core/components/layouts/BasicLayout.jsx b/src/core/components/layouts/BasicLayout.jsx
index ba51022d..85063bb3 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,14 @@ 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 router = useRouter();
+  const buttonRef = useRef(null);
 
   const { product } = useProductContext();
+
   useEffect(() => {
     if (
       router.pathname === '/shop/product/[slug]' ||
@@ -39,6 +44,25 @@ const BasicLayout = ({ children }) => {
     }
   }, [product, router]);
 
+  useEffect(() => {
+    const handleMouseOut = (event) => {
+      const rect = buttonRef.current.getBoundingClientRect();
+      console.log("rect",rect)
+      if (event.clientY <= 0) {
+        console.log("ini pindah")
+        setHighlight(true);
+      } else {
+        setHighlight(false);
+      }
+    };
+
+    window.addEventListener('mouseout', handleMouseOut);
+
+    return () => {
+      window.removeEventListener('mouseout', handleMouseOut);
+    };
+  }, []);
+
   const recordActivity = async (pathname) => {
     const ONLY_ON_PATH = false;
     const recordedPath = [];
@@ -63,12 +87,24 @@ const BasicLayout = ({ children }) => {
       <Navbar />
       <AnimationLayout>
         {children}
+        {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)}
+          />
+        )}
         <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'
+            ref={buttonRef}
           >
             <Image
               src='/images/socials/WHATSAPP.svg'
diff --git a/src/core/components/layouts/BasicLayout.module.css b/src/core/components/layouts/BasicLayout.module.css
new file mode 100644
index 00000000..b89aca9f
--- /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]/50 z-[900];
+    animation: closeOverlay 10s forwards;
+  }
+  
+  @keyframes closeOverlay {
+    from {
+      clip-path: circle(100%);
+    }
+    to {
+      clip-path: circle(var(--button-radius) at var(--button-x) var(--button-y));
+    }
+  }
diff --git a/src/lib/home/components/PromotionProgram.jsx b/src/lib/home/components/PromotionProgram.jsx
index 99258d94..c2f76069 100644
--- a/src/lib/home/components/PromotionProgram.jsx
+++ b/src/lib/home/components/PromotionProgram.jsx
@@ -3,11 +3,16 @@ import Image from 'next/image'
 import { bannerApi } from '@/api/bannerApi';
 import useDevice from '@/core/hooks/useDevice'
 import { Swiper, SwiperSlide } from 'swiper/react';
+import  BannerPromoSkeleton from '../components/Skeleton/BannerPromoSkeleton';
 const { useQuery } = require('react-query')
 const BannerSection = () => {
   const promotionProgram = useQuery('promotionProgram', bannerApi({ type: 'banner-promotion' }));
   const { isMobile, isDesktop } = useDevice()
 
+  if (promotionProgram.isLoading) {
+    return <BannerPromoSkeleton />;
+  }
+
   return (
     <div className='px-4 sm:px-0'>
       <div className='flex justify-between items-center mb-4 '>
diff --git a/src/lib/home/components/Skeleton/BannerPromoSkeleton.jsx b/src/lib/home/components/Skeleton/BannerPromoSkeleton.jsx
new file mode 100644
index 00000000..c5f39f19
--- /dev/null
+++ b/src/lib/home/components/Skeleton/BannerPromoSkeleton.jsx
@@ -0,0 +1,16 @@
+import useDevice from '@/core/hooks/useDevice'
+import Skeleton from 'react-loading-skeleton'
+
+const BannerPromoSkeleton = () => {
+  const { isDesktop } = useDevice()
+
+  return (
+    <div className='grid grid-cols-1 md:grid-cols-3 gap-x-3'>
+      {Array.from({ length: isDesktop ? 3 : 1.2 }, (_, index) => (
+        <Skeleton count={1} height={isDesktop ? 60 : 36} key={index} />
+      ))}
+    </div>
+  )
+}
+
+export default BannerPromoSkeleton
diff --git a/src/pages/index.jsx b/src/pages/index.jsx
index d649ee17..5a443478 100644
--- a/src/pages/index.jsx
+++ b/src/pages/index.jsx
@@ -8,6 +8,7 @@ import DesktopView from '@/core/components/views/DesktopView';
 import MobileView from '@/core/components/views/MobileView';
 import { FlashSaleSkeleton } from '@/lib/flashSale/skeleton/FlashSaleSkeleton';
 import PreferredBrandSkeleton from '@/lib/home/components/Skeleton/PreferredBrandSkeleton';
+import BannerPromoSkeleton from '@/lib/home/components/Skeleton/BannerPromoSkeleton';
 import PromotinProgram from '@/lib/promotinProgram/components/HomePage';
 import PagePopupIformation from '~/modules/popup-information';
 import CategoryPilihan from '../lib/home/components/CategoryPilihan';