summaryrefslogtreecommitdiff
path: root/src/lib/auth/components/Menu.jsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/lib/auth/components/Menu.jsx')
-rw-r--r--src/lib/auth/components/Menu.jsx247
1 files changed, 183 insertions, 64 deletions
diff --git a/src/lib/auth/components/Menu.jsx b/src/lib/auth/components/Menu.jsx
index f475db1f..7b766968 100644
--- a/src/lib/auth/components/Menu.jsx
+++ b/src/lib/auth/components/Menu.jsx
@@ -1,86 +1,205 @@
-import Link from '@/core/components/elements/Link/Link'
-import { useRouter } from 'next/router'
-import ImageNext from 'next/image'
-import whatsappUrl from '@/core/utils/whatsappUrl'
+import Link from '@/core/components/elements/Link/Link';
+import { useRouter } from 'next/router';
+import ImageNext from 'next/image';
+import whatsappUrl from '@/core/utils/whatsappUrl';
+import useAuth from '@/core/hooks/useAuth';
+import switchAccountProgresApi from '@/lib/auth/api/switchAccountProgresApi.js';
+import { useState, useEffect } from 'react';
+import { InfoIcon } from 'lucide-react';
const Menu = () => {
- const router = useRouter()
-
- const routeStartWith = (route) => router.pathname.startsWith(route)
-
+ const router = useRouter();
+ const auth = useAuth();
+ const [ubahAkun, setUbahAkun] = useState();
+ useEffect(() => {
+ const loadProgres = async () => {
+ const progresSwitchAccount = await switchAccountProgresApi();
+ if (progresSwitchAccount) {
+ setUbahAkun(progresSwitchAccount.status);
+ }
+ };
+ loadProgres();
+ }, []);
+ const routeStartWith = (route) => router.pathname.startsWith(route);
return (
<div className='grid grid-cols-1 bg-white border border-gray_r-6 rounded py-2 px-4 sticky top-48'>
- <div className='mt-4 mb-1 font-medium'>Menu</div>
- <LinkItem href='/my/quotations' active={routeStartWith('/my/quotations')}>
- <div className='flex gap-x-3 items-center'>
- <ImageNext src='/images/icon/icon_daftar_quotation.svg' width={18} height={20} />
- <p>Daftar Quotation</p>
- </div>
- </LinkItem>
- <LinkItem href='/my/transactions' active={routeStartWith('/my/transactions')}>
- <div className='flex gap-x-3 items-center'>
- <ImageNext src='/images/icon/icon_daftar_transaksi.svg' width={18} height={20} />
- <p>Daftar Transaksi</p>
- </div>
- </LinkItem>
- <LinkItem href='/my/shipments' active={routeStartWith('/my/shipments')}>
- <div className='flex gap-x-3 items-center'>
- <ImageNext src='/images/icon/icon_pengiriman.svg' width={18} height={20} />
- <p>Daftar Pengiriman</p>
- </div>
- </LinkItem>
- <LinkItem href='/my/invoices' active={routeStartWith('/my/invoices')}>
- <div className='flex gap-x-3 items-center'>
- <ImageNext src='/images/icon/icon_invoice.svg' width={18} height={20} />
- <p>Invoice & Faktur Pajak</p>
+ <div className='flex justify-between py-4'>
+ <div className='font-semibold text-gray_r-12'>Akun Saya</div>
+ <div className='relative group'>
+ {auth?.company && !(ubahAkun === 'pending') && (
+ <>
+ <Link
+ href='/my/profile'
+ className='badge-solid-red mt-1 p-2 flex flex-row items-center gap-x-2'
+ >
+ <p className='text-white'>Akun Bisnis</p>{' '}
+ <InfoIcon size={14} color='white' />
+ </Link>
+ <div className='absolute bottom-full transform -translate-x-1/2 mb-2 hidden group-hover:block bg-gray-700 text-white text-xs rounded py-1 px-2 w-72 text-justify left-36'>
+ Anda terdaftar sebagai akun bisnis, segala bentuk transaksi anda
+ untuk perusahaan yang sudah anda daftarkan di Indoteknik.com
+ </div>
+ </>
+ )}
+ {ubahAkun === 'pending' && (
+ <>
+ <Link
+ href='/my/profile'
+ className='badge-yellow mt-1 p-2 flex flex-row items-center gap-x-2'
+ >
+ <p className='text-warning-900'>Review</p>
+ <InfoIcon size={14} className='text-warning-900' />
+ </Link>
+ <div className='absolute bottom-full transform -translate-x-1/2 mb-2 hidden group-hover:block bg-gray-700 text-white text-xs rounded py-1 px-2 w-72 text-justify left-36'>
+ Proses perubahan akun anda sedang kami review, mohon menunggu
+ hingga 2x24 jam.
+ </div>
+ </>
+ )}
+ {!auth?.company && !(ubahAkun === 'pending') && (
+ <>
+ <Link
+ href='/my/profile'
+ className='badge-gray mt-1 p-2 flex flex-row items-center gap-x-2'
+ >
+ <p className='text-gray_r-10'>Akun Individu</p>
+ <InfoIcon size={14} className='text-gray_r-10' />
+ </Link>
+ <div className='absolute bottom-full left-36 transform -translate-x-1/2 mb-3 w-72 text-justify hidden group-hover:block bg-gray-700 text-white text-xs rounded py-1 px-2'>
+ <p className='whitespace-pre-wrap break-words'>
+ Anda terdaftar sebagai akun individu, Segala bentuk transaksi
+ anda untuk Pribadi/Individu.
+ </p>
+ </div>
+ </>
+ )}
</div>
- </LinkItem>
- <LinkItem href='/my/wishlist' active={routeStartWith('/my/wishlist')}>
- <div className='flex gap-x-3 items-center'>
- <ImageNext src='/images/icon/icon_wishlist.svg' width={18} height={20} />
- <p>Wishlist</p>
- </div>
- </LinkItem>
+ </div>
+ <div className='mt-2 mb-1 font-medium'>Menu</div>
+ <div className='flex flex-col gap-y-2'>
+ <LinkItem
+ href='/my/quotations'
+ active={routeStartWith('/my/quotations')}
+ className=''
+ >
+ <div className='flex gap-x-3 items-center'>
+ <ImageNext
+ src='/images/icon/icon_daftar_quotation.svg'
+ width={18}
+ height={20}
+ />
+ <p>Daftar Quotation</p>
+ </div>
+ </LinkItem>
+ <LinkItem
+ href='/my/transactions'
+ active={routeStartWith('/my/transactions')}
+ >
+ <div className='flex gap-x-3 items-center'>
+ <ImageNext
+ src='/images/icon/icon_daftar_transaksi.svg'
+ width={18}
+ height={20}
+ />
+ <p>Daftar Transaksi</p>
+ </div>
+ </LinkItem>
+ <LinkItem href='/my/shipments' active={routeStartWith('/my/shipments')}>
+ <div className='flex gap-x-3 items-center'>
+ <ImageNext
+ src='/images/icon/icon_pengiriman.svg'
+ width={18}
+ height={20}
+ />
+ <p>Daftar Pengiriman</p>
+ </div>
+ </LinkItem>
+ <LinkItem href='/my/invoices' active={routeStartWith('/my/invoices')}>
+ <div className='flex gap-x-3 items-center'>
+ <ImageNext
+ src='/images/icon/icon_invoice.svg'
+ width={18}
+ height={20}
+ />
+ <p>Invoice & Faktur Pajak</p>
+ </div>
+ </LinkItem>
+ <LinkItem href='/my/wishlist' active={routeStartWith('/my/wishlist')}>
+ <div className='flex gap-x-3 items-center'>
+ <ImageNext
+ src='/images/icon/icon_wishlist.svg'
+ width={18}
+ height={20}
+ />
+ <p>Wishlist</p>
+ </div>
+ </LinkItem>
+ </div>
<div className='mt-4 mb-1 font-medium'>Pusat Bantuan</div>
- <LinkItem href={whatsappUrl('', '', '')} rel='noopener noreferrer' target='_blank'>
+ <LinkItem
+ href={whatsappUrl('', '', '')}
+ rel='noopener noreferrer'
+ target='_blank'
+ >
<div className='flex gap-x-3 items-center'>
- <ImageNext src='/images/icon/icon_layanan_pelanggan.svg' width={18} height={20} />
+ <ImageNext
+ src='/images/icon/icon_layanan_pelanggan.svg'
+ width={18}
+ height={20}
+ />
<p>Layanan Pelanggan</p>
</div>
</LinkItem>
<div className='mt-4 mb-1 font-medium'>Pengaturan Akun</div>
- <LinkItem href='/my/address' active={routeStartWith('/my/address')}>
- <div className='flex gap-x-3 items-center'>
- <ImageNext src='/images/icon/icon_daftar_alamat.svg' width={18} height={20} />
- <p>Daftar Alamat</p>
- </div>
- </LinkItem>
- <LinkItem href='/my/profile' active={routeStartWith('/my/profile')}>
- <div className='flex gap-x-3 items-center'>
- <ImageNext src='/images/icon/icon_profile.svg' width={18} height={20} />
- <p>Profil Saya</p>
- </div>
- </LinkItem>
- <button type='button' className='text-gray_r-12/80 p-2 text-left'>
- <div className='flex gap-x-3 items-center'>
- <ImageNext src='/images/icon/icon_logout.svg' width={18} height={20} />
- <p>Keluar Akun</p>
- </div>
- </button>
+ <div className='flex flex-col gap-y-2'>
+ <LinkItem href='/my/address' active={routeStartWith('/my/address')}>
+ <div className='flex gap-x-3 items-center'>
+ <ImageNext
+ src='/images/icon/icon_daftar_alamat.svg'
+ width={18}
+ height={20}
+ />
+ <p>Daftar Alamat</p>
+ </div>
+ </LinkItem>
+ <LinkItem href='/my/profile' active={routeStartWith('/my/profile')}>
+ <div className='flex gap-x-3 items-center'>
+ <ImageNext
+ src='/images/icon/icon_profile.svg'
+ width={18}
+ height={20}
+ />
+ <p>Profil Saya</p>
+ </div>
+ </LinkItem>
+ <button
+ type='button'
+ className='text-gray_r-12/80 p-2 text-left hover:bg-gray_r-5 '
+ >
+ <div className='flex gap-x-3 items-center'>
+ <ImageNext
+ src='/images/icon/icon_logout.svg'
+ width={18}
+ height={20}
+ />
+ <p>Keluar Akun</p>
+ </div>
+ </button>
+ </div>
</div>
- )
-}
+ );
+};
const LinkItem = ({ children, ...props }) => (
<Link
{...props}
- className={`!text-gray_r-12/80 !font-normal p-2 rounded ${
- props.active == true ? 'bg-gray_r-3' : ''
+ className={`!text-gray_r-12/80 !font-normal p-2 rounded transition-colors duration-200 ${
+ props.active ? 'bg-gray_r-3' : 'hover:bg-gray_r-5 '
}`}
>
{children}
</Link>
-)
+);
-export default Menu
+export default Menu;
generated by cgit v1.2.3 (git 2.25.1) at 2026-04-25 14:50:55 +0000