From b02510e26e7e9bc292a1779bd23801014b94aad4 Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Wed, 26 Apr 2023 17:23:52 +0700 Subject: flash sale and countdown --- .../components/elements/CountDown/CountDown.jsx | 55 ++++++++++++++++++++++ .../elements/Navbar/NavbarUserDropdown.jsx | 1 + src/lib/auth/components/CompanyProfile.jsx | 2 +- src/lib/auth/components/PersonalProfile.jsx | 4 +- src/lib/flashSale/api/flashSaleApi.js | 8 ++++ src/lib/flashSale/components/FlashSale.jsx | 37 +++++++++++++++ src/lib/home/components/PreferredBrand.jsx | 2 +- src/pages/index.jsx | 2 + src/pages/my/menu.jsx | 1 + 9 files changed, 108 insertions(+), 4 deletions(-) create mode 100644 src/core/components/elements/CountDown/CountDown.jsx create mode 100644 src/lib/flashSale/api/flashSaleApi.js create mode 100644 src/lib/flashSale/components/FlashSale.jsx (limited to 'src') 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 ( +
+
+ {timeLeft.day} + Hari +
+
+ {timeLeft.hour} + Jam +
+
+ {timeLeft.minute} + Menit +
+
+ {timeLeft.second} + Detik +
+
+ ) +} + +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 (
+ Daftar Quotation Daftar Transaksi Invoice & Faktur Pajak Wishlist 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.
-
+
{!isOpen && } {isOpen && }
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
-
+
{!isOpen && } {isOpen && }
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 && ( +
+ + {flashSales.map((flashSale, index) => ( +
+
{flashSale.name}
+ +
+
+ +
+ {flashSale.name} +
+ +
+ ))} +
+ ) +} + +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 = () => {
Brand Pilihan
{isDesktop && ( - + Lihat Semua )} 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() {
+
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() { Aktivitas Pembelian
+ Daftar Quotation Daftar Transaksi Invoice & Faktur Pajak Wishlist -- cgit v1.2.3