Merge branch 'master' into Feature/google_sign_up

# Conflicts:
#	src/core/components/elements/Navbar/NavbarDesktop.jsx

7 files changed, 89 insertions, 27 deletions

diff --git a/src/core/components/elements/CountDown/CountDown2.jsx b/src/core/components/elements/CountDown/CountDown2.jsx
index 61503d17..e85a22cb 100644
--- a/src/core/components/elements/CountDown/CountDown2.jsx
+++ b/src/core/components/elements/CountDown/CountDown2.jsx
@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react'
 
 const CountDown2 = ({ initialTime }) => {
-  const hours = Math.floor(initialTime / 3600)
+  /*const hours = Math.floor(initialTime / 3600)
   const minutes = Math.floor((initialTime % 3600) / 60)
   const seconds = initialTime % 60
 
@@ -25,24 +25,58 @@ const CountDown2 = ({ initialTime }) => {
       }
     }, 1000)
     return () => clearInterval(timer)
+  }, [timeLeft])*/
+  
+  const days = Math.floor(initialTime / 86400)
+  const hours = Math.floor((initialTime % 86400) / 3600)
+  const minutes = Math.floor((initialTime % 3600) / 60)
+  const seconds = initialTime % 60
+
+  const [timeLeft, setTimeLeft] = useState({
+    day: days,
+    hour: hours,
+    minute: minutes,
+    second: seconds
+  })
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      const totalSeconds =
+        timeLeft.day * 86400 + timeLeft.hour * 3600 + timeLeft.minute * 60 + timeLeft.second
+      const secondsLeft = totalSeconds - 1
+      if (secondsLeft < 0) {
+        clearInterval(timer)
+      } else {
+        const days = Math.floor(secondsLeft / 86400)
+        const hours = Math.floor((secondsLeft % 86400) / 3600)
+        const minutes = Math.floor((secondsLeft % 3600) / 60)
+        const seconds = secondsLeft % 60
+        setTimeLeft({ day: days, hour: hours, minute: minutes, second: seconds })
+      }
+    }, 1000)
+    return () => clearInterval(timer)
   }, [timeLeft])
 
+
   return (
-    <div className='flex justify-between gap-x-2'>
+    <div className='flex justify-between gap-x-2 mt-18'>
       <div className='flex flex-col items-center'>
-        <span className='bg-red-200 border border-red-500 text-black font-sm w-10 h-8 flex items-center justify-center rounded'>
-          {timeLeft.hour.toString().padStart(2, '0')}
+        <span className='bg-yellow-400 border border-yellow-400 text-black font-sm w-10 h-7 flex items-center justify-center rounded-lg'>
+          {timeLeft.day.toString().padStart(2, '0')}
         </span>
+        <span className='text-xs text-white'>Hari</span>
       </div>
       <div className='flex flex-col items-center'>
-        <span className='bg-red-200 border border-red-500 text-black  font-sm w-10 h-8 flex items-center justify-center rounded'>
-          {timeLeft.minute.toString().padStart(2, '0')}
+        <span className='bg-yellow-400 border border-yellow-400 text-black  font-sm w-10 h-7 flex items-center justify-center rounded-lg'>
+          {timeLeft.hour.toString().padStart(2, '0')}
         </span>
+        <span className='text-xs text-white'>Jam</span>
       </div>
       <div className='flex flex-col items-center'>
-        <span className='bg-red-200 border border-red-500 text-black font-sm w-10 h-8 flex items-center justify-center rounded'>
-          {timeLeft.second.toString().padStart(2, '0')}
+        <span className='bg-yellow-400 border border-yellow-400 text-black font-sm w-10 h-7 flex items-center justify-center rounded-lg'>
+          {timeLeft.minute.toString().padStart(2, '0')}
         </span>
+        <span className='text-xs text-white'>Menit</span>
       </div>
     </div>
   )
diff --git a/src/core/components/elements/Navbar/NavbarDesktop.jsx b/src/core/components/elements/Navbar/NavbarDesktop.jsx
index 17aedeb6..6fdea644 100644
--- a/src/core/components/elements/Navbar/NavbarDesktop.jsx
+++ b/src/core/components/elements/Navbar/NavbarDesktop.jsx
@@ -14,7 +14,6 @@ import { useContext, useEffect, useState } from 'react'
 import useAuth from '@/core/hooks/useAuth'
 import NavbarUserDropdown from './NavbarUserDropdown'
 import { getCountCart } from '@/core/utils/cart'
-import TopBanner from './TopBanner'
 import whatsappUrl from '@/core/utils/whatsappUrl'
 import { useRouter } from 'next/router'
 import { getAuth, setAuth } from '@/core/utils/auth'
@@ -22,8 +21,12 @@ import { createSlug, getIdFromSlug } from '@/core/utils/slug'
 import productApi from '@/lib/product/api/productApi'
 import { useSession } from 'next-auth/react'
 import { AuthContext } from '@/pages/_app'
+import { TopBannerSkeleton } from '../Skeleton/TopBannerSkeleton'
 
 const Search = dynamic(() => import('./Search'))
+const TopBanner = dynamic(() => import('./TopBanner'), {
+  loading: () => <TopBannerSkeleton />
+})
 
 const NavbarDesktop = () => {
   const [isOpenCategory, setIsOpenCategory] = useState(false)
@@ -165,8 +168,10 @@ const NavbarDesktop = () => {
                 Ready Stock
               </Link>
               <Link
-                href='/blog'
+                href='https://blog.indoteknik.com/'
                 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 noopener'
               >
                 Blog Indoteknik
               </Link>
diff --git a/src/core/components/elements/Navbar/Search.jsx b/src/core/components/elements/Navbar/Search.jsx
index 47a9c235..f4a8ab3a 100644
--- a/src/core/components/elements/Navbar/Search.jsx
+++ b/src/core/components/elements/Navbar/Search.jsx
@@ -64,21 +64,21 @@ const Search = () => {
           <MagnifyingGlassIcon className='w-6' />
         </button>
 
-        {suggestions.length > 0 && (
-          <>
-            <div className='absolute w-full top-[50px] rounded-b bg-gray_r-1 border border-gray_r-6 divide-y divide-gray_r-6 z-50'>
-              {suggestions.map((suggestion, index) => (
-                <Link
-                  href={`/shop/search?q=${suggestion.term}`}
-                  key={index}
-                  className='px-3 py-3 !text-gray_r-12 font-normal'
-                >
-                  {suggestion.term}
-                </Link>
-              ))}
-            </div>
-          </>
-        )}
+        <div
+          className={`absolute w-full top-[50px] rounded-b bg-gray_r-1 border border-gray_r-6 divide-y divide-gray_r-6 z-50 ${
+            suggestions.length > 0 ? 'block' : 'hidden'
+          }`}
+        >
+          {suggestions.map((suggestion, index) => (
+            <Link
+              href={`/shop/search?q=${suggestion.term}`}
+              key={index}
+              className='px-3 py-3 !text-gray_r-12 font-normal'
+            >
+              {suggestion.term}
+            </Link>
+          ))}
+        </div>
       </form>
     </>
   )
diff --git a/src/core/components/elements/Navbar/TopBanner.jsx b/src/core/components/elements/Navbar/TopBanner.jsx
index 9efd0a8d..dca2e930 100644
--- a/src/core/components/elements/Navbar/TopBanner.jsx
+++ b/src/core/components/elements/Navbar/TopBanner.jsx
@@ -2,11 +2,16 @@ 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'
 
 const TopBanner = () => {
   const fetchTopBanner = async () => await odooApi('GET', '/api/v1/banner?type=top-banner')
   const topBanner = useQuery('topBanner', fetchTopBanner)
 
+  if (topBanner.isLoading) {
+    return <TopBannerSkeleton />
+  }
+
   return (
     topBanner.isFetched &&
     topBanner.data?.length > 0 && (
diff --git a/src/core/components/elements/Sidebar/Sidebar.jsx b/src/core/components/elements/Sidebar/Sidebar.jsx
index 7ea8f7c4..f0bcb7b7 100644
--- a/src/core/components/elements/Sidebar/Sidebar.jsx
+++ b/src/core/components/elements/Sidebar/Sidebar.jsx
@@ -120,7 +120,7 @@ const Sidebar = ({ active, close }) => {
                 <SidebarLink className={itemClassName} href='/shop/brands'>
                   Semua Brand
                 </SidebarLink>
-                <SidebarLink className={itemClassName} href='/blog'>
+                <SidebarLink className={itemClassName} href='https://blog.indoteknik.com/' target="_blank" rel="noreferrer noopener">
                   Blog Indoteknik
                 </SidebarLink>
                 <SidebarLink className={itemClassName} href='/video'>
diff --git a/src/core/components/elements/Skeleton/TopBannerSkeleton.jsx b/src/core/components/elements/Skeleton/TopBannerSkeleton.jsx
new file mode 100644
index 00000000..f7d2e748
--- /dev/null
+++ b/src/core/components/elements/Skeleton/TopBannerSkeleton.jsx
@@ -0,0 +1,19 @@
+import useDevice from '@/core/hooks/useDevice'
+import classNames from 'classnames'
+import Skeleton from 'react-loading-skeleton'
+
+const TopBannerSkeleton = () => {
+  const { isDesktop, isMobile } = useDevice()
+
+  const deviceClassName = {
+    'h-10': isDesktop,
+    'h-2.5': isMobile
+  }
+  const combinedClassName = classNames(deviceClassName)
+
+  return (
+    <Skeleton className={combinedClassName} count={1} containerClassName='w-full h-full block' />
+  )
+}
+
+export { TopBannerSkeleton }
diff --git a/src/core/components/layouts/BasicLayout.jsx b/src/core/components/layouts/BasicLayout.jsx
index 272440c2..e737101a 100644
--- a/src/core/components/layouts/BasicLayout.jsx
+++ b/src/core/components/layouts/BasicLayout.jsx
@@ -38,7 +38,6 @@ const BasicLayout = ({ children }) => {
       const { slug } = router.query
       const getProduct = async () => {
         let product = await productApi({ id: getIdFromSlug(slug), headers: { Token: authToken } })
-        console.log('ini product', product)
         setPayloadWa({
           name: product[0]?.name,
           manufacture: product[0]?.manufacture.name,