<iman> add motion

1 files changed, 63 insertions, 12 deletions

diff --git a/src/core/components/layouts/BasicLayout.jsx b/src/core/components/layouts/BasicLayout.jsx
index a4f3a856..4d995a3a 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 { AnimatePresence, motion } from 'framer-motion';
 
 const AnimationLayout = dynamic(() => import('./AnimationLayout'), {
   ssr: false,
@@ -19,8 +20,10 @@ const BasicLayout = ({ children }) => {
   const [templateWA, setTemplateWA] = useState(null);
   const [payloadWA, setPayloadWa] = useState(null);
   const [urlPath, setUrlPath] = useState(null);
+  const [isVisible, setIsVisible] = useState(true);
 
   const router = useRouter();
+  const whatsappRef = useRef(null);
 
   const { product } = useProductContext();
   useEffect(() => {
@@ -58,33 +61,81 @@ const BasicLayout = ({ children }) => {
     recordActivity(router.pathname);
   }, [router.pathname]);
 
+  useEffect(() => {
+    const handleMouseOut = (event) => {
+      if (event.clientY <= 0) {
+        setIsVisible(false);
+      } else {
+        setIsVisible(true);
+      }
+    };
+
+    window.addEventListener('mouseout', handleMouseOut);
+
+    return () => {
+      window.removeEventListener('mouseout', handleMouseOut);
+    };
+  }, []);
+
+  const getWhatsappPosition = () => {
+    if (whatsappRef.current) {
+      const rect = whatsappRef.current.getBoundingClientRect();
+      return {
+        x: rect.left + 80,
+        y: rect.top + 40,
+        width: rect.width,
+        height: rect.height,
+      };
+    }
+    return { x: 0, y: 0, width: 0, height: 0 };
+  };
+
   return (
     <>
+      {!isVisible && (
+        <AnimatePresence>
+          <motion.div
+            initial={{ opacity: 1 }}
+            animate={[
+              { opacity: 0.6, x: window.innerWidth - 100, y: window.innerHeight - 100, scale: 0.4 },
+              {
+                opacity: 0,
+                x: getWhatsappPosition().x - window.innerWidth / 2,
+                y: getWhatsappPosition().y - window.innerHeight / 2,
+                scale: 0,
+              },
+            ]}
+            exit={{ opacity: 1 }}
+            transition={{ duration: 1 }}
+            className={`fixed left-0 w-full h-full bg-[#4FB84A]/50 z-[90]`}
+          />
+        </AnimatePresence>
+      )}
       <Navbar />
       <AnimationLayout>
         {children}
-        <div className='fixed bottom-4 right-4 sm:bottom-14 sm:right-10 z-50'>
+        <div ref={whatsappRef} 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'
+            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'
+              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'
+              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>
+            <span className="text-white font-bold ml-1.5">Whatsapp</span>
           </a>
         </div>
       </AnimationLayout>