1 files changed, 37 insertions, 51 deletions

diff --git a/src/core/components/layouts/BasicLayout.jsx b/src/core/components/layouts/BasicLayout.jsx
index 99968ca0..62c74e3c 100644
--- a/src/core/components/layouts/BasicLayout.jsx
+++ b/src/core/components/layouts/BasicLayout.jsx
@@ -7,7 +7,7 @@ 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 jika perlu
+import styles from './BasicLayout.module.css'; // Import modul CSS
 
 const AnimationLayout = dynamic(() => import('./AnimationLayout'), {
   ssr: false,
@@ -22,7 +22,6 @@ const BasicLayout = ({ children }) => {
   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);
@@ -48,8 +47,9 @@ const BasicLayout = ({ children }) => {
   useEffect(() => {
     const handleMouseOut = (event) => {
       const rect = buttonRef.current.getBoundingClientRect();
+      console.log("rect",rect)
       if (event.clientY <= 0) {
-        setButtonPosition(rect)
+        console.log("ini pindah")
         setHighlight(true);
       } else {
         setHighlight(false);
@@ -63,14 +63,6 @@ const BasicLayout = ({ children }) => {
     };
   }, []);
 
-  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 = [];
@@ -92,50 +84,44 @@ 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}
+        {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'>
-          <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>
+          <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'
+              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>
       </AnimationLayout>
       <BasicFooter />