flash sale and countdown

9 files changed, 108 insertions, 4 deletions

diff --git a/src/core/components/elements/CountDown/CountDown.jsx b/src/core/components/elements/CountDown/CountDown.jsx
new file mode 100644
index 00000000..49a33d77
--- /dev/null
+++ b/src/core/components/elements/CountDown/CountDown.jsx
@@ -0,0 +1,55 @@
+import { useEffect, useState } from 'react'
+
+const CountDown = ({ initialTime }) => {
+  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 gap-x-3 w-fit'>
+      <div className='flex flex-col items-center'>
+        <span className='bg-red-600 text-white font-semibold w-10 h-10 flex items-center justify-center rounded'>{timeLeft.day}</span>
+        <span className='text-caption-1 text-gray-807'>Hari</span>
+      </div>
+      <div className='flex flex-col items-center'>
+        <span className='bg-red-600 text-white font-semibold w-10 h-10 flex items-center justify-center rounded'>{timeLeft.hour}</span>
+        <span className='text-caption-1 text-gray-807'>Jam</span>
+      </div>
+      <div className='flex flex-col items-center'>
+        <span className='bg-red-600 text-white font-semibold w-10 h-10 flex items-center justify-center rounded'>{timeLeft.minute}</span>
+        <span className='text-caption-1 text-gray-700'>Menit</span>
+      </div>
+      <div className='flex flex-col items-center'>
+        <span className='bg-red-600 text-white font-semibold w-10 h-10 flex items-center justify-center rounded'>{timeLeft.second}</span>
+        <span className='text-caption-1 text-gray-700'>Detik</span>
+      </div>
+    </div>
+  )
+}
+
+export default CountDown
diff --git a/src/core/components/elements/Navbar/NavbarUserDropdown.jsx b/src/core/components/elements/Navbar/NavbarUserDropdown.jsx
index 1d2429a7..7848124c 100644
--- a/src/core/components/elements/Navbar/NavbarUserDropdown.jsx
+++ b/src/core/components/elements/Navbar/NavbarUserDropdown.jsx
@@ -13,6 +13,7 @@ const NavbarUserDropdown = () => {
   return (
     <div className='navbar-user-dropdown-wrapper'>
       <div className='navbar-user-dropdown'>
+        <Link href='/my/quotations'>Daftar Quotation</Link>
         <Link href='/my/transactions'>Daftar Transaksi</Link>
         <Link href='/my/invoices'>Invoice & Faktur Pajak</Link>
         <Link href='/my/wishlist'>Wishlist</Link>
diff --git a/src/lib/auth/components/CompanyProfile.jsx b/src/lib/auth/components/CompanyProfile.jsx
index 854aa246..13d4a194 100644
--- a/src/lib/auth/components/CompanyProfile.jsx
+++ b/src/lib/auth/components/CompanyProfile.jsx
@@ -76,7 +76,7 @@ const CompanyProfile = () => {
             Dibawah ini adalah data usaha yang anda masukkan, periksa kembali data usaha anda.
           </div>
         </div>
-        <div className='p-2 bg-gray_r-3 rounded'>
+        <div className='ml-2 p-2 bg-gray_r-3 rounded'>
           {!isOpen && <ChevronDownIcon className='w-6' />}
           {isOpen && <ChevronUpIcon className='w-6' />}
         </div>
diff --git a/src/lib/auth/components/PersonalProfile.jsx b/src/lib/auth/components/PersonalProfile.jsx
index 4a533ae9..bca54e24 100644
--- a/src/lib/auth/components/PersonalProfile.jsx
+++ b/src/lib/auth/components/PersonalProfile.jsx
@@ -9,7 +9,7 @@ import editPersonalProfileApi from '../api/editPersonalProfileApi'
 
 const PersonalProfile = () => {
   const auth = useAuth()
-  const [isOpen, setIsOpen] = useState(false)
+  const [isOpen, setIsOpen] = useState(true)
   const toggle = () => setIsOpen(!isOpen)
   const { register, setValue, handleSubmit } = useForm({
     defaultValues: {
@@ -54,7 +54,7 @@ const PersonalProfile = () => {
             Dibawah ini adalah data diri yang anda masukan, periksa kembali data diri anda
           </div>
         </div>
-        <div className='p-2 bg-gray_r-3 rounded'>
+        <div className='ml-2 p-2 bg-gray_r-3 rounded'>
           {!isOpen && <ChevronDownIcon className='w-6' />}
           {isOpen && <ChevronUpIcon className='w-6' />}
         </div>
diff --git a/src/lib/flashSale/api/flashSaleApi.js b/src/lib/flashSale/api/flashSaleApi.js
new file mode 100644
index 00000000..115b07dc
--- /dev/null
+++ b/src/lib/flashSale/api/flashSaleApi.js
@@ -0,0 +1,8 @@
+import odooApi from '@/core/api/odooApi'
+
+const flashSaleApi = async () => {
+  const flashSale = await odooApi('GET', '/api/v1/flashsale/header')
+  return flashSale
+}
+
+export default flashSaleApi
diff --git a/src/lib/flashSale/components/FlashSale.jsx b/src/lib/flashSale/components/FlashSale.jsx
new file mode 100644
index 00000000..0167dc57
--- /dev/null
+++ b/src/lib/flashSale/components/FlashSale.jsx
@@ -0,0 +1,37 @@
+import { useEffect, useState } from 'react'
+import flashSaleApi from '../api/flashSaleApi'
+import Image from '@/core/components/elements/Image/Image'
+import CountDown from '@/core/components/elements/CountDown/CountDown'
+
+const FlashSale = () => {
+  const [flashSales, setFlashSales] = useState(null)
+
+  useEffect(() => {
+    const loadFlashSales = async () => {
+      const dataFlashSales = await flashSaleApi()
+      setFlashSales(dataFlashSales)
+    }
+    loadFlashSales()
+  }, [])
+
+  return flashSales?.length > 0 && (
+    <div className='px-4 sm:px-0'>
+      
+      {flashSales.map((flashSale, index) => (
+        <div key={index}>
+          <div className='font-medium sm:text-h-lg mb-4'>{flashSale.name}</div>
+
+          <div className='relative'>
+            <div className='absolute top-0 left-0 p-4'>
+              <CountDown initialTime={flashSale.duration} />
+            </div>
+            <Image src={flashSale.banner} alt={flashSale.name} className='w-full rounded' />
+          </div>
+
+        </div>
+      ))}
+    </div>
+  )
+}
+
+export default FlashSale
diff --git a/src/lib/home/components/PreferredBrand.jsx b/src/lib/home/components/PreferredBrand.jsx
index f97943cb..34c50220 100644
--- a/src/lib/home/components/PreferredBrand.jsx
+++ b/src/lib/home/components/PreferredBrand.jsx
@@ -14,7 +14,7 @@ const PreferredBrand = () => {
       <div className='flex justify-between items-center mb-4'>
         <div className='font-medium sm:text-h-lg'>Brand Pilihan</div>
         {isDesktop && (
-          <Link href='/' className='btn-yellow !text-gray_r-12'>
+          <Link href='/shop/brands' className='btn-yellow !text-gray_r-12'>
             Lihat Semua
           </Link>
         )}
diff --git a/src/pages/index.jsx b/src/pages/index.jsx
index 2a996b5d..a98fb6b3 100644
--- a/src/pages/index.jsx
+++ b/src/pages/index.jsx
@@ -9,6 +9,7 @@ import Seo from '@/core/components/Seo'
 import { useQuery } from 'react-query'
 import odooApi from '@/core/api/odooApi'
 import Image from '@/core/components/elements/Image/Image'
+import FlashSale from '@/lib/flashSale/components/FlashSale'
 
 const BasicLayout = dynamic(() => import('@/core/components/layouts/BasicLayout'))
 
@@ -72,6 +73,7 @@ export default function Home() {
 
           <div className='my-16 flex flex-col gap-y-10'>
             <PreferredBrand />
+            <FlashSale />
             <CategoryHomeId />
           </div>
         </div>
diff --git a/src/pages/my/menu.jsx b/src/pages/my/menu.jsx
index e7ae27fd..c8e1e7e9 100644
--- a/src/pages/my/menu.jsx
+++ b/src/pages/my/menu.jsx
@@ -40,6 +40,7 @@ export default function Menu() {
             <MenuHeader>Aktivitas Pembelian</MenuHeader>
 
             <div className='divide-y divide-gray_r-6 border-y border-gray_r-6 mt-4'>
+              <LinkItem href='/my/quotations'>Daftar Quotation</LinkItem>
               <LinkItem href='/my/transactions'>Daftar Transaksi</LinkItem>
               <LinkItem href='/my/invoices'>Invoice & Faktur Pajak</LinkItem>
               <LinkItem href='/my/wishlist'>Wishlist</LinkItem>