From 3269cca77eae6c9f5508c4a64a1405ed3d9007fb Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Fri, 9 Aug 2024 14:29:43 +0700
Subject: <iman> add highligth button whatsapp

---
 src/core/components/layouts/BasicLayout.jsx        | 38 +++++++++++++++++++++-
 src/core/components/layouts/BasicLayout.module.css | 13 ++++++++
 2 files changed, 50 insertions(+), 1 deletion(-)
 create mode 100644 src/core/components/layouts/BasicLayout.module.css

(limited to 'src/core/components/layouts')

diff --git a/src/core/components/layouts/BasicLayout.jsx b/src/core/components/layouts/BasicLayout.jsx
index a4f3a856..62c74e3c 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));
+    }
+  }
-- 
cgit v1.2.3


From b4b36c45de25305f43ee83441f13a75c48b07994 Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Fri, 9 Aug 2024 16:58:48 +0700
Subject: <iman> update higlight button whatsapp

---
 src/core/components/layouts/BasicLayout.jsx        | 88 +++++++++++++---------
 src/core/components/layouts/BasicLayout.module.css |  6 +-
 2 files changed, 54 insertions(+), 40 deletions(-)

(limited to 'src/core/components/layouts')

diff --git a/src/core/components/layouts/BasicLayout.jsx b/src/core/components/layouts/BasicLayout.jsx
index 62c74e3c..99968ca0 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
+import styles from './BasicLayout.module.css'; // Import modul CSS jika perlu
 
 const AnimationLayout = dynamic(() => import('./AnimationLayout'), {
   ssr: false,
@@ -22,6 +22,7 @@ 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);
@@ -47,9 +48,8 @@ const BasicLayout = ({ children }) => {
   useEffect(() => {
     const handleMouseOut = (event) => {
       const rect = buttonRef.current.getBoundingClientRect();
-      console.log("rect",rect)
       if (event.clientY <= 0) {
-        console.log("ini pindah")
+        setButtonPosition(rect)
         setHighlight(true);
       } else {
         setHighlight(false);
@@ -63,6 +63,14 @@ 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 = [];
@@ -84,44 +92,50 @@ 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'>
-          <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 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>
         </div>
       </AnimationLayout>
       <BasicFooter />
diff --git a/src/core/components/layouts/BasicLayout.module.css b/src/core/components/layouts/BasicLayout.module.css
index b89aca9f..4945c420 100644
--- a/src/core/components/layouts/BasicLayout.module.css
+++ b/src/core/components/layouts/BasicLayout.module.css
@@ -1,11 +1,11 @@
 .overlay-highlight {
-    @apply fixed top-0 left-0 w-full h-full bg-[#4FB84A]/50 z-[900];
-    animation: closeOverlay 10s forwards;
+    @apply fixed top-0 left-0 w-full h-full  bg-[#4FB84A]/30 z-[900];
+    animation: closeOverlay 1s forwards;
   }
   
   @keyframes closeOverlay {
     from {
-      clip-path: circle(100%);
+        clip-path: circle(100% at 50% 50%);
     }
     to {
       clip-path: circle(var(--button-radius) at var(--button-x) var(--button-y));
-- 
cgit v1.2.3


From 4501271964f8084522967685e3752868779c5ca0 Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Fri, 9 Aug 2024 17:11:17 +0700
Subject: Revert "<iman> update higlight button whatsapp"

This reverts commit b4b36c45de25305f43ee83441f13a75c48b07994.
---
 src/core/components/layouts/BasicLayout.jsx        | 88 +++++++++-------------
 src/core/components/layouts/BasicLayout.module.css |  6 +-
 2 files changed, 40 insertions(+), 54 deletions(-)

(limited to 'src/core/components/layouts')

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 />
diff --git a/src/core/components/layouts/BasicLayout.module.css b/src/core/components/layouts/BasicLayout.module.css
index 4945c420..b89aca9f 100644
--- a/src/core/components/layouts/BasicLayout.module.css
+++ b/src/core/components/layouts/BasicLayout.module.css
@@ -1,11 +1,11 @@
 .overlay-highlight {
-    @apply fixed top-0 left-0 w-full h-full  bg-[#4FB84A]/30 z-[900];
-    animation: closeOverlay 1s forwards;
+    @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% at 50% 50%);
+      clip-path: circle(100%);
     }
     to {
       clip-path: circle(var(--button-radius) at var(--button-x) var(--button-y));
-- 
cgit v1.2.3


From 949e654bec249177618c3efc1b63c50f174ea0ae Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Fri, 9 Aug 2024 17:27:04 +0700
Subject: <iman> update highlight button

---
 src/core/components/layouts/BasicLayout.jsx        | 86 +++++++++++++---------
 src/core/components/layouts/BasicLayout.module.css |  6 +-
 2 files changed, 53 insertions(+), 39 deletions(-)

(limited to 'src/core/components/layouts')

diff --git a/src/core/components/layouts/BasicLayout.jsx b/src/core/components/layouts/BasicLayout.jsx
index 62c74e3c..c4674344 100644
--- a/src/core/components/layouts/BasicLayout.jsx
+++ b/src/core/components/layouts/BasicLayout.jsx
@@ -22,6 +22,7 @@ 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);
@@ -47,9 +48,8 @@ const BasicLayout = ({ children }) => {
   useEffect(() => {
     const handleMouseOut = (event) => {
       const rect = buttonRef.current.getBoundingClientRect();
-      console.log("rect",rect)
       if (event.clientY <= 0) {
-        console.log("ini pindah")
+        setButtonPosition(rect)
         setHighlight(true);
       } else {
         setHighlight(false);
@@ -63,6 +63,14 @@ 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 = [];
@@ -84,44 +92,50 @@ 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'>
-          <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 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>
         </div>
       </AnimationLayout>
       <BasicFooter />
diff --git a/src/core/components/layouts/BasicLayout.module.css b/src/core/components/layouts/BasicLayout.module.css
index b89aca9f..4945c420 100644
--- a/src/core/components/layouts/BasicLayout.module.css
+++ b/src/core/components/layouts/BasicLayout.module.css
@@ -1,11 +1,11 @@
 .overlay-highlight {
-    @apply fixed top-0 left-0 w-full h-full bg-[#4FB84A]/50 z-[900];
-    animation: closeOverlay 10s forwards;
+    @apply fixed top-0 left-0 w-full h-full  bg-[#4FB84A]/30 z-[900];
+    animation: closeOverlay 1s forwards;
   }
   
   @keyframes closeOverlay {
     from {
-      clip-path: circle(100%);
+        clip-path: circle(100% at 50% 50%);
     }
     to {
       clip-path: circle(var(--button-radius) at var(--button-x) var(--button-y));
-- 
cgit v1.2.3