diff options
Diffstat (limited to 'src/core/components')
5 files changed, 178 insertions, 133 deletions
diff --git a/src/core/components/elements/Footer/BasicFooter.jsx b/src/core/components/elements/Footer/BasicFooter.jsx index 4beea604..8f024d86 100644 --- a/src/core/components/elements/Footer/BasicFooter.jsx +++ b/src/core/components/elements/Footer/BasicFooter.jsx @@ -175,7 +175,7 @@ const CustomerGuide = () => ( <div> <div className={headerClassName}>Bantuan & Panduan</div> <ul className='flex flex-col gap-y-3'> - <li> + <li > <InternalItemLink href='/metode-pembayaran'> Metode Pembayaran </InternalItemLink> @@ -210,6 +210,11 @@ const CustomerGuide = () => ( Panduan Pick Up Service </InternalItemLink> </li> + <li> + <InternalItemLink href='/tracking-order'> + Tracking Order + </InternalItemLink> + </li> </ul> </div> ); diff --git a/src/core/components/elements/Navbar/NavbarDesktop.jsx b/src/core/components/elements/Navbar/NavbarDesktop.jsx index 2ddf5efe..ebbcf857 100644 --- a/src/core/components/elements/Navbar/NavbarDesktop.jsx +++ b/src/core/components/elements/Navbar/NavbarDesktop.jsx @@ -5,7 +5,9 @@ import { createSlug } from '@/core/utils/slug'; import whatsappUrl from '@/core/utils/whatsappUrl'; import IndoteknikLogo from '@/images/logo.png'; import Cardheader from '@/lib/cart/components/Cartheader'; +import Quotationheader from "../../../../../src/lib/quotation/components/Quotationheader.jsx" import Category from '@/lib/category/components/Category'; +import { useProductCartContext } from '@/contexts/ProductCartContext'; import { ChevronDownIcon, DocumentCheckIcon, @@ -29,6 +31,8 @@ import { useDisclosure, } from '@chakra-ui/react'; import style from "./style/NavbarDesktop.module.css"; +import useTransactions from '@/lib/transaction/hooks/useTransactions'; +import { useCartStore } from '~/modules/cart/stores/useCartStore'; const Search = dynamic(() => import('./Search'), { ssr: false }); const TopBanner = dynamic(() => import('./TopBanner'), { ssr: false }); @@ -38,15 +42,27 @@ const NavbarDesktop = () => { const auth = useAuth(); const [cartCount, setCartCount] = useState(0); - + const [quotationCount, setQuotationCount] = useState(0); + const [pendingTransactions, setPendingTransactions] = useState([]) const [templateWA, setTemplateWA] = useState(null); const [payloadWA, setPayloadWa] = useState(null); const [urlPath, setUrlPath] = useState(null); - + const { loadCart, cart, summary, updateCartItem } = useCartStore(); const router = useRouter(); const { product } = useProductContext(); const { isOpen, onOpen, onClose } = useDisclosure(); + + const query = { + context: 'quotation', + site: + (auth?.webRole === null && auth?.site ? auth.site : null), + }; + + const { transactions } = useTransactions({ query }); + const data = transactions?.data?.saleOrders.filter( + (transaction) => transaction.status === 'draft' + ); const [showPopup, setShowPopup] = useState(false); const [isTop, setIsTop] = useState(true); @@ -89,6 +105,11 @@ const NavbarDesktop = () => { }, []); useEffect(() => { + setPendingTransactions(data); + }, [transactions.data]); + + + useEffect(() => { if (router.pathname === '/shop/product/[slug]') { setPayloadWa({ name: product?.name, @@ -96,11 +117,11 @@ const NavbarDesktop = () => { url: createSlug('/shop/product/', product?.name, product?.id, true), }); setTemplateWA('product'); - + setUrlPath(router.asPath); } }, [product, router]); - + useEffect(() => { const handleCartChange = () => { const cart = async () => { @@ -109,15 +130,31 @@ const NavbarDesktop = () => { }; cart(); }; - handleCartChange(); - + handleCartChange(); + window.addEventListener('localStorageChange', handleCartChange); - + return () => { window.removeEventListener('localStorageChange', handleCartChange); }; - }, []); + }, [transactions.data, cart]); + useEffect(() => { + const handleQuotationChange = () => { + const quotation = async () => { + setQuotationCount(pendingTransactions?.length); + }; + quotation(); + }; + handleQuotationChange(); + + window.addEventListener('localStorageChange', handleQuotationChange); + + return () => { + window.removeEventListener('localStorageChange', handleQuotationChange); + }; + }, [pendingTransactions]); + return ( <DesktopView> <TopBanner onLoad={handleTopBannerLoad} /> @@ -180,17 +217,7 @@ const NavbarDesktop = () => { <Search /> </div> <div className='flex gap-x-4 items-center'> - <Link - href='/my/transactions' - target='_blank' - rel='noreferrer' - className='flex items-center gap-x-2 !text-gray_r-12/80' - > - <DocumentCheckIcon className='w-7' /> - Daftar - <br /> - Quotation - </Link> + <Quotationheader quotationCount={quotationCount} data={pendingTransactions} /> <Cardheader cartCount={cartCount} /> @@ -225,8 +252,7 @@ const NavbarDesktop = () => { <div className='container mx-auto mt-6'> <div className='flex'> - <button - type='button' + <div onClick={() => setIsOpenCategory((isOpen) => !isOpen)} onBlur={() => setIsOpenCategory(false)} className='w-3/12 p-4 font-semibold border border-gray_r-6 rounded-t-xl flex items-center relative' @@ -243,7 +269,7 @@ const NavbarDesktop = () => { > <Category /> </div> - </button> + </div> <div className='w-6/12 flex px-1 divide-x divide-gray_r-6'> <Link @@ -291,7 +317,7 @@ const NavbarDesktop = () => { <Link href='/shop/search?orderBy=stock' className={`${ - router.asPath === '/shop/search?orderBy=stock' && + router.asPath.includes('/shop/search?orderBy=stock') && 'bg-gray_r-3' } p-4 flex-1 flex justify-center items-center !text-gray_r-12/80 hover:bg-gray_r-3 idt-transition group`} target='_blank' diff --git a/src/core/components/elements/Navbar/NavbarMobile.jsx b/src/core/components/elements/Navbar/NavbarMobile.jsx index bcf45e0a..90314671 100644 --- a/src/core/components/elements/Navbar/NavbarMobile.jsx +++ b/src/core/components/elements/Navbar/NavbarMobile.jsx @@ -11,7 +11,7 @@ import Image from 'next/image'; import { useEffect, useState } from 'react'; import MobileView from '../../views/MobileView'; import Link from '../Link/Link'; -// import TopBanner from './TopBanner'; +import TopBanner from './TopBanner'; const Search = dynamic(() => import('./Search')); @@ -39,7 +39,7 @@ const NavbarMobile = () => { return ( <MobileView> - {/* <TopBanner /> */} + <TopBanner /> <nav className='px-4 py-2 pb-3 sticky top-0 z-50 bg-white shadow'> <div className='flex justify-between items-center mb-2'> <Link href='/'> diff --git a/src/core/components/elements/Navbar/TopBanner.jsx b/src/core/components/elements/Navbar/TopBanner.jsx index 7bc8fb6a..f438ae67 100644 --- a/src/core/components/elements/Navbar/TopBanner.jsx +++ b/src/core/components/elements/Navbar/TopBanner.jsx @@ -1,19 +1,20 @@ import Image from 'next/image'; -import { useQuery } from 'react-query'; - +import { useQuery } from 'react-query';import useDevice from '@/core/hooks/useDevice' import odooApi from '@/core/api/odooApi'; import SmoothRender from '~/components/ui/smooth-render'; import Link from '../Link/Link'; +import { background } from '@chakra-ui/react'; import { useEffect } from 'react'; -const TopBanner = ({ onLoad }) => { +const TopBanner = ({ onLoad = () => {} }) => { + const { isDesktop, isMobile } = useDevice() const topBanner = useQuery({ queryKey: 'topBanner', queryFn: async () => await odooApi('GET', '/api/v1/banner?type=top-banner'), refetchOnWindowFocus: false, }); - const backgroundColor = topBanner.data?.[0]?.backgroundColor || 'transparent'; + // const backgroundColor = topBanner.data?.[0]?.backgroundColor || 'transparent'; const hasData = topBanner.data?.length > 0; const data = topBanner.data?.[0] || null; @@ -26,21 +27,21 @@ const TopBanner = ({ onLoad }) => { return ( <SmoothRender isLoaded={hasData} - height='36px' + // height='36px' duration='700ms' delay='300ms' - style={{ backgroundColor }} - > - <Link href={data?.url}> - <Image - src={data?.image} - alt={data?.name} - width={1440} - height={40} - className='object-cover object-center h-full mx-auto' - /> - </Link> - </SmoothRender> + className='h-auto' + > + <Link + href={data?.url} + className="block bg-cover bg-center h-3 md:h-6 lg:h-[36px]" + style={{ + backgroundImage: `url('${data?.image}')`, + }} + > + </Link> + + </SmoothRender> ); }; diff --git a/src/core/components/elements/Sidebar/Sidebar.jsx b/src/core/components/elements/Sidebar/Sidebar.jsx index 55838890..ddae3e20 100644 --- a/src/core/components/elements/Sidebar/Sidebar.jsx +++ b/src/core/components/elements/Sidebar/Sidebar.jsx @@ -5,6 +5,8 @@ import { AnimatePresence, motion } from 'framer-motion' import { ChevronDownIcon, ChevronUpIcon, CogIcon, UserIcon } from '@heroicons/react/24/outline' import { Fragment, useEffect, useState } from 'react' import odooApi from '@/core/api/odooApi' +import { createSlug } from '@/core/utils/slug' +import Image from 'next/image' const Sidebar = ({ active, close }) => { const auth = useAuth() @@ -79,7 +81,7 @@ const Sidebar = ({ active, close }) => { exit={{ left: '-80%' }} transition={transition} > - <div className='divide-y divide-gray_r-6'> + <div className='divide-y divide-gray_r-6 h-full flex flex-col'> <div className='p-4 flex gap-x-3'> {!auth && ( <> @@ -112,104 +114,115 @@ const Sidebar = ({ active, close }) => { href='/my/menu' className='!text-gray_r-11 ml-auto my-auto' > - <UserIcon class='h-6 w-6 text-gray-500' /> + <UserIcon className='h-6 w-6 text-gray-500' /> </Link> </> )} </div> - <SidebarLink className={itemClassName} href='/shop/promo'> - Semua Promo - </SidebarLink> - <SidebarLink className={itemClassName} href='/shop/brands'> - Semua Brand - </SidebarLink> - <SidebarLink - className={itemClassName} - href='https://blog.indoteknik.com/' - target='_blank' - rel='noreferrer noopener' - > - Blog Indoteknik - </SidebarLink> - {/* <SidebarLink className={itemClassName} href='/video'> - Indoteknik TV - </SidebarLink> */} - <SidebarLink className={itemClassName} href='/tentang-kami'> - Tentang Indoteknik - </SidebarLink> - <SidebarLink className={itemClassName} href='/contact-us'> - Hubungi Kami - </SidebarLink> - <button - className={`${itemClassName} w-full text-left flex`} - onClick={() => setOpenCategory(!isOpenCategory)} - > - Kategori - <div className='ml-auto'> - {!isOpenCategory && <ChevronDownIcon className='text-gray_r-12 w-5' />} - {isOpenCategory && <ChevronUpIcon className='text-gray_r-12 w-5' />} - </div> - </button> - {isOpenCategory && - categories.map((category) => ( - <Fragment key={category.id}> - <div className='flex w-full text-gray_r-11 border-b border-gray_r-6 px-4 pl-8 items-center'> - <Link - href={`/shop/search?category=${category.name}`} - className='flex-1 font-normal !text-gray_r-11 py-4' - > - {category.name} - </Link> - <div - className='ml-4 h-full py-4' - onClick={() => toggleCategories(category.id)} - > - {!category.isOpen && <ChevronDownIcon className='text-gray_r-11 w-5' />} - {category.isOpen && <ChevronUpIcon className='text-gray_r-11 w-5' />} + <div className='overflow-y-auto flex-1'> + <SidebarLink className={itemClassName} href='/shop/promo'> + Semua Promo + </SidebarLink> + <SidebarLink className={itemClassName} href='/shop/brands'> + Semua Brand + </SidebarLink> + <SidebarLink + className={itemClassName} + href='https://blog.indoteknik.com/' + target='_blank' + rel='noreferrer noopener' + > + Blog Indoteknik + </SidebarLink> + {/* <SidebarLink className={itemClassName} href='/video'> + Indoteknik TV + </SidebarLink> */} + <SidebarLink className={itemClassName} href='/tentang-kami'> + Tentang Indoteknik + </SidebarLink> + <SidebarLink className={itemClassName} href='/contact-us'> + Hubungi Kami + </SidebarLink> + <button + className={`${itemClassName} w-full text-left flex`} + onClick={() => setOpenCategory(!isOpenCategory)} + > + Kategori + <div className='ml-auto'> + {!isOpenCategory && <ChevronDownIcon className='text-gray_r-12 w-5' />} + {isOpenCategory && <ChevronUpIcon className='text-gray_r-12 w-5' />} + </div> + </button> + {isOpenCategory && + categories.map((category) => ( + <Fragment key={category.id}> + <div className='flex w-full text-gray_r-11 border-b border-gray_r-6 px-4 pl-8 items-center'> + <Link + href={createSlug('/shop/category/', category.name, category.id)} + className='flex-1 font-normal !text-gray_r-11 py-4 flex items-center flex-row' + > + <div className='mr-2 flex justify-center items-center'> + <Image src={category.image} alt='' width={25} height={25} /> + </div> + {category.name} + </Link> + <div + className='ml-4 h-full py-4' + onClick={() => toggleCategories(category.id)} + > + {!category.isOpen && <ChevronDownIcon className='text-gray_r-11 w-5' />} + {category.isOpen && <ChevronUpIcon className='text-gray_r-11 w-5' />} + </div> </div> - </div> - {category.isOpen && - category.childs.map((child1Category) => ( - <Fragment key={child1Category.id}> - <div - className={`flex w-full !text-gray_r-11 border-b border-gray_r-6 p-4 pl-12 ${ - category.isOpen ? 'bg-gray_r-2' : '' - }`} - > - <Link - href={`/shop/search?category=${child1Category.name}`} - className='flex-1 font-normal !text-gray_r-11' + {category.isOpen && + category.childs.map((child1Category) => ( + <Fragment key={child1Category.id}> + <div + className={`flex w-full !text-gray_r-11 border-b border-gray_r-6 p-4 pl-12 ${ + category.isOpen ? 'bg-gray_r-2' : '' + }`} > - {child1Category.name} - </Link> - {child1Category.childs.length > 0 && ( - <div - className='ml-4 h-full' - onClick={() => toggleCategories(child1Category.id)} - > - {!child1Category.isOpen && ( - <ChevronDownIcon className='text-gray_r-11 w-5' /> - )} - {child1Category.isOpen && ( - <ChevronUpIcon className='text-gray_r-11 w-5' /> - )} - </div> - )} - </div> - {child1Category.isOpen && - child1Category.childs.map((child2Category) => ( <Link - key={child2Category.id} - href={`/shop/search?category=${child2Category.name}`} - className='flex w-full font-normal !text-gray_r-11 border-b border-gray_r-6 p-4 pl-16' + href={createSlug('/shop/category/', child1Category.name, child1Category.id)} + className='flex-1 font-normal !text-gray_r-11 flex flex-row items-center' > - {child2Category.name} + <div className='mr-2 flex justify-center items-center'> + <Image src={`https://erp.indoteknik.com/api/image/product.public.category/image_1920/${child1Category.id}`} alt='' width={25} height={25} /> + </div> + {child1Category.name} </Link> - ))} - </Fragment> - ))} - </Fragment> - ))} + {child1Category.childs.length > 0 && ( + <div + className='ml-4 h-full' + onClick={() => toggleCategories(child1Category.id)} + > + {!child1Category.isOpen && ( + <ChevronDownIcon className='text-gray_r-11 w-5' /> + )} + {child1Category.isOpen && ( + <ChevronUpIcon className='text-gray_r-11 w-5' /> + )} + </div> + )} + </div> + {child1Category.isOpen && + child1Category.childs.map((child2Category) => ( + <Link + key={child2Category.id} + href={createSlug('/shop/category/', child2Category.name, child2Category.id)} + className='flex w-full font-normal !text-gray_r-11 border-b border-gray_r-6 p-4 pl-16 flex-row' + > + <div className='mr-2 flex justify-center items-center'> + <Image src={`https://erp.indoteknik.com/api/image/product.public.category/image_1920/${child2Category.id}`} alt='' width={25} height={25} /> + </div> + {child2Category.name} + </Link> + ))} + </Fragment> + ))} + </Fragment> + ))} + </div> </div> </motion.div> </> |