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

6 files changed, 85 insertions, 46 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
diff --git a/src/core/utils/whatsappUrl.js b/src/core/utils/whatsappUrl.js
index 7a129aa6..c840e105 100644
--- a/src/core/utils/whatsappUrl.js
+++ b/src/core/utils/whatsappUrl.js
@@ -2,28 +2,31 @@ import { getAuth } from "./auth"
 
 const whatsappUrl = (template = 'default', payload, urlPath = null) => {
   let user = getAuth()
-  if(!user){
-    if(urlPath)  return `/login?next=${urlPath}`
-    if(!urlPath) return '/login'
-  }
+  // if(!user){
+  //   if(urlPath)  return `/login?next=${urlPath}`
+  //   if(!urlPath) return '/login'
+  // }
   let parentName = user.parentName ||  '-'
   let url = 'https://wa.me/6281717181922'
   let text = 'Hallo Indoteknik.com,'
+  if(user){
+    text += `Saya ${user.name}, Saya dari ${parentName}`
+  }
   switch (template) {
     case 'product':
-      text += `  Saya ${user.name} , Saya dari ${parentName} Saya mencari barang dibawah ini\n\n: Brand = ${payload?.manufacture}\n\n Item Name = ${payload?.name}\n\nLink : ${payload?.url}`
+      text += ` Saya mencari barang dibawah ini\n\n: Brand = ${payload?.manufacture}\n\n Item Name = ${payload?.name}\n\nLink : ${payload?.url}`
       break
     case 'productWeight':
-      text += `  Saya ${user.name} , Saya dari ${parentName} Saya mencari barang dibawah ini\n\n: Brand = ${payload?.manufacture}\n\n Item Name = ${payload?.name}\n\nLink : ${payload?.url}`
+      text += ` Saya mencari barang dibawah ini\n\n: Brand = ${payload?.manufacture}\n\n Item Name = ${payload?.name}\n\nLink : ${payload?.url}`
       break
     case 'productSearch':
-      text += `Saya lagi cari-cari produk ${payload?.name}, bisa bantu saya cari produknya?`
+      text += ` Saya lagi cari-cari produk ${payload?.name}, bisa bantu saya cari produknya?`
       break
     case null:
-      text += `Saya ${user.name}, Saya dari ${parentName} Bisa tolong bantu kebutuhan saya?`
+      text += ` Bisa tolong bantu kebutuhan saya?`
       break;
     default:
-      text += `Saya ${user.name}, Saya dari ${parentName} Bisa tolong bantu kebutuhan saya?`
+      text += ` Bisa tolong bantu kebutuhan saya?`
       break
   }
   if (text) url += `?text=${encodeURI(text)}`