Merged in CR/new_product_detail (pull request #378)

CR/new product detail

1 files changed, 32 insertions, 9 deletions

diff --git a/src/core/components/layouts/BasicLayout.jsx b/src/core/components/layouts/BasicLayout.jsx
index c4674344..1b62bf05 100644
--- a/src/core/components/layouts/BasicLayout.jsx
+++ b/src/core/components/layouts/BasicLayout.jsx
@@ -8,6 +8,7 @@ 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 useDevice from '@/core/hooks/useDevice';
 
 const AnimationLayout = dynamic(() => import('./AnimationLayout'), {
   ssr: false,
@@ -23,6 +24,9 @@ const BasicLayout = ({ children }) => {
   const [highlight, setHighlight] = useState(false);
   const [buttonPosition, setButtonPosition] = useState(null);
   const [wobble, setWobble] = useState(false);
+  const [isProductPage, setIsProductPage] = useState(false);
+
+  const { isDesktop, isMobile } = useDevice();
 
   const router = useRouter();
   const buttonRef = useRef(null);
@@ -43,13 +47,16 @@ const BasicLayout = ({ children }) => {
 
       setUrlPath(router.asPath);
     }
+    if (router.pathname.includes('/shop/product/')) {
+      setIsProductPage(true);
+    }
   }, [product, router]);
 
   useEffect(() => {
     const handleMouseOut = (event) => {
       const rect = buttonRef.current.getBoundingClientRect();
       if (event.clientY <= 0) {
-        setButtonPosition(rect)
+        setButtonPosition(rect);
         setHighlight(true);
       } else {
         setHighlight(false);
@@ -92,13 +99,15 @@ const BasicLayout = ({ children }) => {
 
   return (
     <>
-    {highlight && buttonPosition && (
+      {highlight && buttonPosition && (
         <div
           className={styles['overlay-highlight']}
           style={{
-            '--button-x': `${buttonPosition.x + buttonPosition.width  / 2}px`,
+            '--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`
+            '--button-radius': `${
+              Math.max(buttonPosition.width, buttonPosition.height) / 2
+            }px`,
           }}
           onAnimationEnd={() => setHighlight(false)}
         />
@@ -106,11 +115,25 @@ const BasicLayout = ({ children }) => {
       <Navbar />
       <AnimationLayout>
         {children}
-        <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
+        <div
+          className={`fixed ${
+            isMobile && isProductPage ? 'bottom-40' : 'bottom-16'
+          } 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)}
+              >
+                {isDesktop && 'Whatsapp'}
               </span>
             </a>
             <a