Merge branch 'master' into Feature/SLA

# Conflicts:
#	src/lib/product/components/Product/ProductDesktop.jsx
#	src/lib/product/components/Product/ProductMobile.jsx

5 files changed, 70 insertions, 7 deletions

diff --git a/src/core/components/elements/Appbar/Appbar.jsx b/src/core/components/elements/Appbar/Appbar.jsx
index e19d5f0a..16bccbd5 100644
--- a/src/core/components/elements/Appbar/Appbar.jsx
+++ b/src/core/components/elements/Appbar/Appbar.jsx
@@ -2,7 +2,7 @@ import { useRouter } from 'next/router'
 import Link from '../Link/Link'
 import { HomeIcon, Bars3Icon, ShoppingCartIcon, ChevronLeftIcon } from '@heroicons/react/24/outline'
 import { useEffect, useState } from 'react'
-import { getCart } from '@/core/utils/cart'
+import { getCart, getCountCart } from '@/core/utils/cart'
 
 /**
  * The AppBar component is a navigation component used to display a header or toolbar
@@ -19,7 +19,11 @@ const AppBar = ({ title }) => {
 
   useEffect(() => {
     const handleCartChange = () => {
-      setCartCount(Object.keys(getCart()).length)
+      const cart = async () => {
+        const listCart = await getCountCart()
+        setCartCount(listCart)
+      }
+      cart()
     }
     handleCartChange()
 
diff --git a/src/core/components/elements/CountDown/CountDown2.jsx b/src/core/components/elements/CountDown/CountDown2.jsx
new file mode 100644
index 00000000..61503d17
--- /dev/null
+++ b/src/core/components/elements/CountDown/CountDown2.jsx
@@ -0,0 +1,51 @@
+import { useEffect, useState } from 'react'
+
+const CountDown2 = ({ initialTime }) => {
+  const hours = Math.floor(initialTime / 3600)
+  const minutes = Math.floor((initialTime % 3600) / 60)
+  const seconds = initialTime % 60
+
+  const [timeLeft, setTimeLeft] = useState({
+    hour: hours,
+    minute: minutes,
+    second: seconds
+  })
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      const totalSeconds = timeLeft.hour * 3600 + timeLeft.minute * 60 + timeLeft.second
+      const secondsLeft = totalSeconds - 1
+      if (secondsLeft < 0) {
+        clearInterval(timer)
+      } else {
+        const hours = Math.floor(secondsLeft / 3600)
+        const minutes = Math.floor((secondsLeft % 3600) / 60)
+        const seconds = secondsLeft % 60
+        setTimeLeft({ hour: hours, minute: minutes, second: seconds })
+      }
+    }, 1000)
+    return () => clearInterval(timer)
+  }, [timeLeft])
+
+  return (
+    <div className='flex justify-between gap-x-2'>
+      <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>
+      </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>
+      </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>
+      </div>
+    </div>
+  )
+}
+
+export default CountDown2
diff --git a/src/core/components/elements/Navbar/NavbarDesktop.jsx b/src/core/components/elements/Navbar/NavbarDesktop.jsx
index 26edd5a4..733f5422 100644
--- a/src/core/components/elements/Navbar/NavbarDesktop.jsx
+++ b/src/core/components/elements/Navbar/NavbarDesktop.jsx
@@ -13,7 +13,7 @@ import Category from '@/lib/category/components/Category'
 import { useEffect, useState } from 'react'
 import useAuth from '@/core/hooks/useAuth'
 import NavbarUserDropdown from './NavbarUserDropdown'
-import { getCart } from '@/core/utils/cart'
+import { getCountCart } from '@/core/utils/cart'
 import TopBanner from './TopBanner'
 import whatsappUrl from '@/core/utils/whatsappUrl'
 
@@ -27,7 +27,11 @@ const NavbarDesktop = () => {
 
   useEffect(() => {
     const handleCartChange = () => {
-      setCartCount(Object.keys(getCart()).length)
+      const cart = async () => {
+        const listCart = await getCountCart()
+        setCartCount(listCart)
+      }
+      cart()
     }
     handleCartChange()
 
diff --git a/src/core/components/elements/Navbar/NavbarMobile.jsx b/src/core/components/elements/Navbar/NavbarMobile.jsx
index b69e86e8..704e91b6 100644
--- a/src/core/components/elements/Navbar/NavbarMobile.jsx
+++ b/src/core/components/elements/Navbar/NavbarMobile.jsx
@@ -6,7 +6,7 @@ import useSidebar from '@/core/hooks/useSidebar'
 import dynamic from 'next/dynamic'
 import IndoteknikLogo from '@/images/logo.png'
 import { useEffect, useState } from 'react'
-import { getCart } from '@/core/utils/cart'
+import { getCart, getCountCart } from '@/core/utils/cart'
 import TopBanner from './TopBanner'
 
 const Search = dynamic(() => import('./Search'))
@@ -18,7 +18,11 @@ const NavbarMobile = () => {
 
   useEffect(() => {
     const handleCartChange = () => {
-      setCartCount(Object.keys(getCart()).length)
+      const cart = async () => {
+        const listCart = await getCountCart()
+        setCartCount(listCart)
+      }
+      cart()
     }
     handleCartChange()
 
diff --git a/src/core/components/elements/Popup/BottomPopup.jsx b/src/core/components/elements/Popup/BottomPopup.jsx
index 0f4088d4..829ff2a6 100644
--- a/src/core/components/elements/Popup/BottomPopup.jsx
+++ b/src/core/components/elements/Popup/BottomPopup.jsx
@@ -58,7 +58,7 @@ const BottomPopup = ({ children, active = false, title, close, className = '' })
                 className={`fixed left-1/2 -translate-x-1/2 translate-y-1/2 md:w-1/4 lg:w-1/3 border border-gray_r-6 rounded-xl z-[60] p-4 pt-0 bg-white max-h-[80vh] overflow-auto ${className}`}
               >
                 <div className='flex justify-between py-4'>
-                  <div className='font-semibold text-h-sm'>{title}</div>
+                  <div className='font-semibold text-title-sm'>{title}</div>
                   {close && (
                     <button type='button' onClick={close}>
                       <XMarkIcon className='w-5 stroke-2' />