Merge branch 'new-release' into CR/quotation-noPo

5 files changed, 73 insertions, 37 deletions

diff --git a/src/core/components/elements/Footer/BasicFooter.jsx b/src/core/components/elements/Footer/BasicFooter.jsx
index 4688b15b..05dc4d8c 100644
--- a/src/core/components/elements/Footer/BasicFooter.jsx
+++ b/src/core/components/elements/Footer/BasicFooter.jsx
@@ -264,7 +264,7 @@ const InformationCenter = () => (
       <li className='text-gray_r-12/80 flex items-center'>
         <PhoneArrowUpRightIcon className='w-[18px] mr-2' />
         <a href='tel:02129338828' target='_blank' rel='noreferrer'>
-          (021) 2933-8828
+          (021) 29338828
         </a>
       </li>
       <li className='text-gray_r-12/80 flex items-center'>
diff --git a/src/core/components/elements/Footer/SimpleFooter.jsx b/src/core/components/elements/Footer/SimpleFooter.jsx
index 371b1652..1f5e13e7 100644
--- a/src/core/components/elements/Footer/SimpleFooter.jsx
+++ b/src/core/components/elements/Footer/SimpleFooter.jsx
@@ -13,7 +13,7 @@ const SimpleFooter = () => (
       <ul className='flex flex-col gap-y-2'>
         <li className='text-gray_r-12/80 flex items-center'>
           <PhoneArrowUpRightIcon className='w-[18px] mr-2' />
-          <a href='tel:02129338828'>(021) 2933-8828 / 29</a>
+          <a href='tel:02129338828'>(021) 29338828</a>
         </li>
         <li className='text-gray_r-12/80 flex items-center'>
           <EnvelopeIcon className='w-[18px] mr-2' />
diff --git a/src/core/components/elements/Navbar/NavbarDesktop.jsx b/src/core/components/elements/Navbar/NavbarDesktop.jsx
index 04cf76d1..fa3df5bf 100644
--- a/src/core/components/elements/Navbar/NavbarDesktop.jsx
+++ b/src/core/components/elements/Navbar/NavbarDesktop.jsx
@@ -391,7 +391,7 @@ const SocialMedias = () => (
       >
         <NextImage
           src='/images/socials/youtube.webp'
-          alt='Youtube - Indoteknik.com'
+          // alt='Youtube - Indoteknik.com'
           width={24}
           height={24}
         />
@@ -403,7 +403,7 @@ const SocialMedias = () => (
       >
         <NextImage
           src='/images/socials/tiktok.png'
-          alt='TikTok - Indoteknik.com'
+          // alt='TikTok - Indoteknik.com'
           width={24}
           height={24}
         />
@@ -423,7 +423,7 @@ const SocialMedias = () => (
       >
         <NextImage
           src='/images/socials/Facebook.png'
-          alt='Facebook - Indoteknik.com'
+          // alt='Facebook - Indoteknik.com'
           width={24}
           height={24}
         />
@@ -435,7 +435,7 @@ const SocialMedias = () => (
       >
         <NextImage
           src='/images/socials/Instagram.png'
-          alt='Instagram - Indoteknik.com'
+          // alt='Instagram - Indoteknik.com'
           width={24}
           height={24}
         />
@@ -447,7 +447,7 @@ const SocialMedias = () => (
       >
         <NextImage
           src='/images/socials/Linkedin.png'
-          alt='Linkedin - Indoteknik.com'
+          // alt='Linkedin - Indoteknik.com'
           width={24}
           height={24}
         />
@@ -459,7 +459,7 @@ const SocialMedias = () => (
       >
         <NextImage
           src='/images/socials/g_maps.png'
-          alt='Maps - Indoteknik.com'
+          // alt='Maps - Indoteknik.com'
           width={24}
           height={24}
         />
diff --git a/src/core/components/elements/Navbar/TopBanner.jsx b/src/core/components/elements/Navbar/TopBanner.jsx
index f438ae67..709495ce 100644
--- a/src/core/components/elements/Navbar/TopBanner.jsx
+++ b/src/core/components/elements/Navbar/TopBanner.jsx
@@ -1,22 +1,37 @@
 import Image from 'next/image';
-import { useQuery } from 'react-query';import useDevice from '@/core/hooks/useDevice'
+import { useQuery } from 'react-query';
+import useDevice from '@/core/hooks/useDevice';
 import odooApi from '@/core/api/odooApi';
 import SmoothRender from '~/components/ui/smooth-render';
 import Link from '../Link/Link';
 import { background } from '@chakra-ui/react';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 
 const TopBanner = ({ onLoad = () => {} }) => {
-  const { isDesktop, isMobile } = useDevice()
-  const topBanner = useQuery({
-    queryKey: 'topBanner',
-    queryFn: async () => await odooApi('GET', '/api/v1/banner?type=top-banner'),
-    refetchOnWindowFocus: false,
-  });
+  const [topBanner, setTopBanner] = useState([]);
+  const { isDesktop, isMobile } = useDevice();
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const res = await fetch(`/api/hero-banner?type=top-banner`);
+      const { data } = await res.json();
+      if (data) {
+        setTopBanner(data);
+      }
+    };
+
+    fetchData();
+  }, []);
+
+  // const topBanner = useQuery({
+  //   queryKey: 'topBanner',
+  //   queryFn: async () => await odooApi('GET', '/api/v1/banner?type=top-banner'),
+  //   refetchOnWindowFocus: false,
+  // });
 
   // const backgroundColor = topBanner.data?.[0]?.backgroundColor || 'transparent';
-  const hasData = topBanner.data?.length > 0;
-  const data = topBanner.data?.[0] || null;
+  const hasData = topBanner?.length > 0;
+  const data = topBanner?.[0] || null;
 
   useEffect(() => {
     if (hasData) {
@@ -31,17 +46,15 @@ const TopBanner = ({ onLoad = () => {} }) => {
       duration='700ms'
       delay='300ms'
       className='h-auto'
-      >
+    >
       <Link
-          href={data?.url}
-          className="block bg-cover bg-center h-3 md:h-6 lg:h-[36px]"
-          style={{
-            backgroundImage: `url('${data?.image}')`,
-          }}
-        >
-        </Link>
-
-      </SmoothRender>
+        href={data?.url}
+        className='block bg-cover bg-center h-3 md:h-6 lg:h-[36px]'
+        style={{
+          backgroundImage: `url('${data?.image}')`,
+        }}
+      ></Link>
+    </SmoothRender>
   );
 };
 
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