Merge branch 'promotion-program' into feature/all-promotion

5 files changed, 237 insertions, 123 deletions

diff --git a/src/core/components/elements/Footer/BasicFooter.jsx b/src/core/components/elements/Footer/BasicFooter.jsx
index 28a3764c..6129143d 100644
--- a/src/core/components/elements/Footer/BasicFooter.jsx
+++ b/src/core/components/elements/Footer/BasicFooter.jsx
@@ -41,6 +41,8 @@ const BasicFooter = () => {
             <Form />
             <CustomerGuide />
             <Payments />
+            <Shippings />
+            <Secures />
           </div>
 
           <div className='w-full mt-8 leading-5 text-caption-2 text-gray_r-12/80'>
@@ -53,7 +55,7 @@ const BasicFooter = () => {
       <DesktopView>
         <footer className='bg-gray_r-3 py-6'>
           <div className='container mx-auto flex flex-wrap justify-between'>
-            <div className='w-3/12'>
+            <div className='w-4/12'>
               <NextImage
                 src={IndoteknikLogo}
                 alt='Logo Indoteknik'
@@ -64,27 +66,40 @@ const BasicFooter = () => {
                 PT. Indoteknik Dotcom Gemilang
               </div>
               <InformationCenter />
+              <div className='h-4' />
+              <OfficeLocation />
+              <div className='h-4' />
+              <OpenHours />
             </div>
-            <CustomerGuide />
-            <Form />
-            <AboutUs />
+
+            <div className='w-2/12'>
+              <CustomerGuide />
+              <div className='h-6' />
+              <Form />
+            </div>
+
+            <div className='w-2/12'>
+              <AboutUs />
+            </div>
+
             <div className='w-3/12'>
-              <div className='grid grid-cols-1 gap-y-4'>
-                <OfficeLocation />
-                {/* <WarehouseLocation /> */}
-                <OpenHours />
+              <div className='grid grid-cols-1 gap-y-6'>
                 <Payments />
+                <Shippings />
+                <Secures />
               </div>
             </div>
+
             <hr className='w-full my-4 border-gray_r-7' />
+
             <div className='w-full flex justify-between items-center'>
               <div className='text-caption-1'>
                 Copyright © 2007 - {new Date().getFullYear()}, PT. Indoteknik
                 Dotcom Gemilang
               </div>
-              <div>
+              {/* <div>
                 <SocialMedias />
-              </div>
+              </div> */}
             </div>
           </div>
         </footer>
@@ -256,7 +271,7 @@ const InformationCenter = () => (
       <li className='text-gray_r-12/80 flex items-center'>
         <DevicePhoneMobileIcon className='w-[18px] mr-2' />
         <a href={whatsappUrl()} target='_blank' rel='noreferrer'>
-          0812-8080-622
+          0817-1718-1922
         </a>
       </li>
     </ul>
@@ -286,7 +301,7 @@ const SocialMedias = () => (
       <a
         target='_blank'
         rel='noreferrer'
-        href='https://www.youtube.com/@indoteknikb2bindustriale-c778'
+        href='https://www.youtube.com/@indoteknikcom'
       >
         <NextImage
           src='/images/socials/youtube.webp'
@@ -369,57 +384,43 @@ const SocialMedias = () => (
 
 const Payments = () => (
   <div>
-    <div className={headerClassName}>Pembayaran</div>
-    <div className='flex flex-wrap gap-2'>
-      <NextImage
-        src='/images/payments/bca.png'
-        alt='Bank BCA Logo'
-        width={48}
-        height={24}
-      />
-      <NextImage
-        src='/images/payments/bni.png'
-        alt='Bank BNI Logo'
-        width={48}
-        height={24}
-      />
-      <NextImage
-        src='/images/payments/bri.png'
-        alt='Bank BRI Logo'
-        width={48}
-        height={24}
-      />
-      <NextImage
-        src='/images/payments/gopay.png'
-        alt='Gopay Logo'
-        width={48}
-        height={24}
-      />
-      <NextImage
-        src='/images/payments/mandiri.png'
-        alt='Bank Mandiri Logo'
-        width={48}
-        height={24}
-      />
-      <NextImage
-        src='/images/payments/mastercard.png'
-        alt='Mastercard Logo'
-        width={48}
-        height={24}
-      />
-      <NextImage
-        src='/images/payments/permata.png'
-        alt='Bank Permata Logo'
-        width={48}
-        height={24}
-      />
-      <NextImage
-        src='/images/payments/visa.png'
-        alt='Visa Logo'
-        width={48}
-        height={24}
-      />
-    </div>
+    <div className={headerClassName}>Metode Pembayaran</div>
+    <NextImage
+      src='/images/footer/payment-method-new.png'
+      alt='Metode Pembayaran - Indoteknik'
+      width={512}
+      height={512}
+      quality={100}
+      className='w-full'
+    />
+  </div>
+);
+
+const Shippings = () => (
+  <div>
+    <div className={headerClassName}>Jasa Pengiriman</div>
+    <NextImage
+      src='/images/footer/shippings.png'
+      alt='Jasa Pengiriman - Indoteknik'
+      width={512}
+      height={512}
+      quality={100}
+      className='w-full'
+    />
+  </div>
+);
+
+const Secures = () => (
+  <div>
+    <div className={headerClassName}>Keamanan Belanja</div>
+    <NextImage
+      src='/images/footer/secures.png'
+      alt='Keamanan Belanja - Indoteknik'
+      width={512}
+      height={512}
+      quality={100}
+      className='w-full'
+    />
   </div>
 );
 
diff --git a/src/core/components/elements/Footer/SimpleFooter.jsx b/src/core/components/elements/Footer/SimpleFooter.jsx
index 26f7f786..371b1652 100644
--- a/src/core/components/elements/Footer/SimpleFooter.jsx
+++ b/src/core/components/elements/Footer/SimpleFooter.jsx
@@ -22,7 +22,7 @@ const SimpleFooter = () => (
         <li className='text-gray_r-12/80 flex items-center'>
           <DevicePhoneMobileIcon className='w-[18px] mr-2' />
           <a href={whatsappUrl()} target='_blank' rel='noreferrer'>
-            0812-8080-622
+            081717181922
           </a>
         </li>
       </ul>
diff --git a/src/core/components/elements/Navbar/NavbarDesktop.jsx b/src/core/components/elements/Navbar/NavbarDesktop.jsx
index 760e627d..8cb4239c 100644
--- a/src/core/components/elements/Navbar/NavbarDesktop.jsx
+++ b/src/core/components/elements/Navbar/NavbarDesktop.jsx
@@ -18,13 +18,10 @@ import { useEffect, useState } from 'react';
 import DesktopView from '../../views/DesktopView';
 import Link from '../Link/Link';
 import NavbarUserDropdown from './NavbarUserDropdown';
-import { TopBannerSkeleton } from '../Skeleton/TopBannerSkeleton';
+import NextImage from 'next/image';
 
 const Search = dynamic(() => import('./Search'), { ssr: false });
-const TopBanner = dynamic(() => import('./TopBanner'), {
-  ssr: false,
-  loading: () => <TopBannerSkeleton />,
-});
+const TopBanner = dynamic(() => import('./TopBanner'), { ssr: false });
 
 const NavbarDesktop = () => {
   const [isOpenCategory, setIsOpenCategory] = useState(false);
@@ -73,12 +70,17 @@ const NavbarDesktop = () => {
   return (
     <DesktopView>
       <TopBanner />
-      <div className='py-3 bg-warning-400' id='desktop-nav-top'>
+      <div className='py-2 bg-warning-400' id='desktop-nav-top'>
         <div className='container mx-auto flex justify-between'>
-          <Link href='/tentang-kami' className='!text-gray_r-12'>
-            Tentang Indoteknik.com
-          </Link>
+          <div className='flex items-start gap-5'>
+            <div>
+              <SocialMedias />
+            </div>
+          </div>
           <div className='flex gap-x-6'>
+            <Link href='/tentang-kami' className='!text-gray_r-12'>
+              Tentang Indoteknik.com
+            </Link>
             <Link href='/my/pembayaran-tempo' className='!text-gray_r-12'>
               Pembayaran Tempo
             </Link>
@@ -140,7 +142,7 @@ const NavbarDesktop = () => {
               />
               <div>
                 <div className='font-semibold'>Whatsapp</div>
-                0812 8080 622 (Chat)
+                0817 1718 1922 (Chat)
               </div>
             </a>
           </div>
@@ -178,7 +180,9 @@ const NavbarDesktop = () => {
               </Link>
               <Link
                 href='/shop/brands'
-                className='p-4 flex-1 flex justify-center items-center !text-gray_r-12/80 hover:bg-gray_r-3 idt-transition'
+                className={`${
+                  router.asPath === '/shop/brands' && 'bg-gray_r-3'
+                } p-4 flex-1 flex justify-center items-center !text-gray_r-12/80 hover:bg-gray_r-3 idt-transition`}
                 target='_blank'
                 rel='noreferrer'
               >
@@ -186,7 +190,10 @@ const NavbarDesktop = () => {
               </Link>
               <Link
                 href='/shop/search?orderBy=stock'
-                className='p-4 flex-1 flex justify-center items-center !text-gray_r-12/80 hover:bg-gray_r-3 idt-transition'
+                className={`${
+                  router.asPath === '/shop/search?orderBy=stock' &&
+                  'bg-gray_r-3'
+                } p-4 flex-1 flex justify-center items-center !text-gray_r-12/80 hover:bg-gray_r-3 idt-transition`}
                 target='_blank'
                 rel='noreferrer'
               >
@@ -198,7 +205,15 @@ const NavbarDesktop = () => {
                 target='_blank'
                 rel='noreferrer noopener'
               >
-                Blog
+                Blog Indoteknik
+              </Link>
+              <Link
+                href='/video'
+                className='p-4 flex-1 flex justify-center items-center !text-gray_r-12/80 hover:bg-gray_r-3 idt-transition'
+                target='_blank'
+                rel='noreferrer'
+              >
+                Indoteknik TV
               </Link>
             </div>
 
@@ -238,4 +253,92 @@ const NavbarDesktop = () => {
   );
 };
 
+const SocialMedias = () => (
+  <div>
+    {/* <div className={headerClassName + 'block md:hidden'}>Temukan Kami</div> */}
+    <div className='flex flex-wrap gap-3 items-start'>
+      <a
+        target='_blank'
+        rel='noreferrer'
+        href='https://www.youtube.com/@indoteknikcom'
+      >
+        <NextImage
+          src='/images/socials/youtube.webp'
+          alt='Youtube - Indoteknik.com'
+          width={24}
+          height={24}
+        />
+      </a>
+      <a
+        target='_blank'
+        rel='noreferrer'
+        href='https://www.tiktok.com/@indoteknikcom'
+      >
+        <NextImage
+          src='/images/socials/tiktok.png'
+          alt='TikTok - Indoteknik.com'
+          width={24}
+          height={24}
+        />
+      </a>
+      {/* <a target='_blank' rel='noreferrer' href={whatsappUrl(null)}>
+        <NextImage
+          src='/images/socials/Whatsapp.png'
+          alt='Whatsapp - Indoteknik.com'
+          width={24}
+          height={24}
+        />
+      </a> */}
+      <a
+        target='_blank'
+        rel='noreferrer'
+        href='https://www.facebook.com/indoteknikcom'
+      >
+        <NextImage
+          src='/images/socials/Facebook.png'
+          alt='Facebook - Indoteknik.com'
+          width={24}
+          height={24}
+        />
+      </a>
+      <a
+        target='_blank'
+        rel='noreferrer'
+        href='https://www.instagram.com/indoteknikcom/'
+      >
+        <NextImage
+          src='/images/socials/Instagram.png'
+          alt='Instagram - Indoteknik.com'
+          width={24}
+          height={24}
+        />
+      </a>
+      <a
+        target='_blank'
+        rel='noreferrer'
+        href='https://www.linkedin.com/company/pt-indoteknik-dotcom-gemilang/'
+      >
+        <NextImage
+          src='/images/socials/Linkedin.png'
+          alt='Linkedin - Indoteknik.com'
+          width={24}
+          height={24}
+        />
+      </a>
+      <a
+        target='_blank'
+        rel='noreferrer'
+        href='https://goo.gl/maps/GF8EmDjpQTHZPsJ1A'
+      >
+        <NextImage
+          src='/images/socials/g_maps.png'
+          alt='Maps - Indoteknik.com'
+          width={24}
+          height={24}
+        />
+      </a>
+    </div>
+  </div>
+);
+
 export default NavbarDesktop;
diff --git a/src/core/components/elements/Navbar/TopBanner.jsx b/src/core/components/elements/Navbar/TopBanner.jsx
index a757c260..722a7501 100644
--- a/src/core/components/elements/Navbar/TopBanner.jsx
+++ b/src/core/components/elements/Navbar/TopBanner.jsx
@@ -1,33 +1,40 @@
-import odooApi from '@/core/api/odooApi'
-import { useQuery } from 'react-query'
-import Image from 'next/image'
-import Link from '../Link/Link'
-import { TopBannerSkeleton } from '../Skeleton/TopBannerSkeleton'
+import Image from 'next/image';
+import { useQuery } from 'react-query';
+
+import odooApi from '@/core/api/odooApi';
+import SmoothRender from '~/components/ui/smooth-render';
+import Link from '../Link/Link';
 
 const TopBanner = () => {
-  const fetchTopBanner = async () => await odooApi('GET', '/api/v1/banner?type=top-banner')
-  const topBanner = useQuery('topBanner', fetchTopBanner, { refetchOnWindowFocus: false })
+  const topBanner = useQuery({
+    queryKey: 'topBanner',
+    queryFn: async () => await odooApi('GET', '/api/v1/banner?type=top-banner'),
+    refetchOnWindowFocus: false,
+  });
 
-  if (topBanner.isLoading) {
-    return <TopBannerSkeleton />
-  }
+  const backgroundColor = topBanner.data?.[0]?.backgroundColor || 'transparent';
+  const hasData = topBanner.data?.length > 0;
+  const data = topBanner.data?.[0] || null;
 
   return (
-    topBanner.isFetched &&
-    topBanner.data?.length > 0 && (
-      <div style={{ backgroundColor: topBanner.data[0]?.backgroundColor || 'transparent' }}>
-        <Link href={topBanner.data[0]?.url}>
-          <Image
-            src={topBanner.data[0].image}
-            alt={topBanner.data[0].name}
-            width={1440}
-            height={40}
-            className='object-cover object-center h-full mx-auto'
-          />
-        </Link>
-      </div>
-    )
-  )
-}
+    <SmoothRender
+      isLoaded={hasData}
+      height='36px'
+      duration='700ms'
+      delay='300ms'
+      style={{ backgroundColor }}
+    >
+      <Link href={data?.url}>
+        <Image
+          src={data?.image}
+          alt={data?.name}
+          width={1440}
+          height={40}
+          className='object-cover object-center h-full mx-auto'
+        />
+      </Link>
+    </SmoothRender>
+  );
+};
 
-export default TopBanner
+export default TopBanner;
diff --git a/src/core/components/layouts/BasicLayout.jsx b/src/core/components/layouts/BasicLayout.jsx
index b6e2c59f..a4f3a856 100644
--- a/src/core/components/layouts/BasicLayout.jsx
+++ b/src/core/components/layouts/BasicLayout.jsx
@@ -1,15 +1,13 @@
 import dynamic from 'next/dynamic';
 import Image from 'next/image';
+import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
 
 import { useProductContext } from '@/contexts/ProductContext';
+import odooApi from '@/core/api/odooApi';
 import whatsappUrl from '@/core/utils/whatsappUrl';
-import { useRouter } from 'next/router';
+import Navbar from '../elements/Navbar/Navbar';
 
-const Navbar = dynamic(() => import('../elements/Navbar/Navbar'), {
-  ssr: false,
-  loading: () => <div className='h-[156px]' />,
-});
 const AnimationLayout = dynamic(() => import('./AnimationLayout'), {
   ssr: false,
 });
@@ -41,20 +39,25 @@ const BasicLayout = ({ children }) => {
     }
   }, [product, router]);
 
-  // useEffect(() => {
-  //   const getIP = async () => {
-  //     const ip = await odooApi('GET', '/api/ip-address');
-  //     const data = {
-  //       page_title: document.title,
-  //       url: window.location.href,
-  //       ip: ip,
-  //     };
-  //     axios.get(
-  //       `/api/user-activity?page_title=${data.page_title}&url=${data.url}&ip=${data.ip}`
-  //     );
-  //   };
-  //   getIP();
-  // }, []);
+  const recordActivity = async (pathname) => {
+    const ONLY_ON_PATH = false;
+    const recordedPath = [];
+    if (ONLY_ON_PATH && !recordedPath.includes(pathname)) return;
+
+    const ip = await odooApi('GET', '/api/ip-address');
+    const data = new URLSearchParams({
+      page_title: document.title,
+      url: window.location.href,
+      ip,
+    });
+
+    fetch(`/api/user-activity?${data.toString()}`);
+  };
+
+  useEffect(() => {
+    recordActivity(router.pathname);
+  }, [router.pathname]);
+
   return (
     <>
       <Navbar />