diff options
Diffstat (limited to 'src/core/components')
6 files changed, 125 insertions, 9 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..ea4b03ae 100644 --- a/src/core/components/elements/Navbar/NavbarDesktop.jsx +++ b/src/core/components/elements/Navbar/NavbarDesktop.jsx @@ -13,9 +13,13 @@ 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' +import { useRouter } from 'next/router' +import { getAuth } from '@/core/utils/auth' +import { createSlug, getIdFromSlug } from '@/core/utils/slug' +import productApi from '@/lib/product/api/productApi' const Search = dynamic(() => import('./Search')) @@ -25,13 +29,37 @@ const NavbarDesktop = () => { const [cartCount, setCartCount] = useState(0) + const [templateWA, setTemplateWA] = useState(null) + const [payloadWA, setPayloadWa] = useState(null) + + const router = useRouter() + useEffect(() => { const handleCartChange = () => { - setCartCount(Object.keys(getCart()).length) + const cart = async () => { + const listCart = await getCountCart() + setCartCount(listCart) + } + cart() } handleCartChange() window.addEventListener('localStorageChange', handleCartChange) + if (router.pathname === '/shop/product/[slug]') { + const authToken = getAuth().token + + const { slug } = router.query + const getProduct = async () => { + let product = await productApi({ id: getIdFromSlug(slug), headers: { Token: authToken } }) + setPayloadWa({ + name: product[0]?.name, + manufacture: product[0]?.manufacture.name, + url: createSlug('/shop/product/', product[0]?.name, product[0]?.id, true) + }) + } + getProduct() + setTemplateWA('product') + } return () => { window.removeEventListener('localStorageChange', handleCartChange) @@ -92,7 +120,7 @@ const NavbarDesktop = () => { Wishlist </Link> <a - href={whatsappUrl()} + href={whatsappUrl(templateWA, payloadWA)} target='_blank' rel='noreferrer' className='flex items-center gap-x-1 !text-gray_r-12/80' 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' /> diff --git a/src/core/components/layouts/BasicLayout.jsx b/src/core/components/layouts/BasicLayout.jsx index 70482e12..073303fe 100644 --- a/src/core/components/layouts/BasicLayout.jsx +++ b/src/core/components/layouts/BasicLayout.jsx @@ -5,11 +5,21 @@ import whatsappUrl from '@/core/utils/whatsappUrl' import { useEffect, useState } from 'react' import axios from 'axios' import odooApi from '@/core/api/odooApi' +import { useRouter } from 'next/router' +import { getURL } from 'next/dist/shared/lib/utils' +import productApi from '@/lib/product/api/productApi' +import { getAuth } from '@/core/utils/auth' +import { createSlug, getIdFromSlug } from '@/core/utils/slug' const Navbar = dynamic(() => import('../elements/Navbar/Navbar')) const AnimationLayout = dynamic(() => import('./AnimationLayout')) const BasicLayout = ({ children }) => { + const [templateWA, setTemplateWA] = useState(null) + const [payloadWA, setPayloadWa] = useState(null) + + const router = useRouter() + useEffect(() => { const getIP = async () => { const ip = await odooApi('GET', '/api/ip-address') @@ -21,6 +31,23 @@ const BasicLayout = ({ children }) => { axios.get(`/api/user-activity?page_title=${data.page_title}&url=${data.url}&ip=${data.ip}`) } getIP() + if (router.pathname === '/shop/product/[slug]') { + const authToken = getAuth().token + + 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, + url: createSlug('/shop/product/', product[0]?.name, product[0]?.id, true) + }) + } + getProduct() + setTemplateWA('product') + + } }, []) return ( <> @@ -29,8 +56,10 @@ const BasicLayout = ({ children }) => { {children} <div className='fixed bottom-4 right-4 sm:bottom-14 sm:right-10 z-50'> <a - href={whatsappUrl(null)} + href={whatsappUrl(templateWA, payloadWA)} className='py-2 pl-3 pr-4 rounded-full bg-[#4FB84A] border border-green-300 flex items-center' + rel='noopener noreferrer' + target='_blank' > <Image src='/images/socials/WHATSAPP.svg' |