summaryrefslogtreecommitdiff
path: root/src/lib/auth/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/lib/auth/components')
-rw-r--r--src/lib/auth/components/CompanyProfile.jsx2
-rw-r--r--src/lib/auth/components/Menu.jsx187
-rw-r--r--src/lib/auth/components/PersonalProfile.jsx106
-rw-r--r--src/lib/auth/components/SwitchAccount.jsx114
4 files changed, 241 insertions, 168 deletions
diff --git a/src/lib/auth/components/CompanyProfile.jsx b/src/lib/auth/components/CompanyProfile.jsx
index 6065efde..cd55072c 100644
--- a/src/lib/auth/components/CompanyProfile.jsx
+++ b/src/lib/auth/components/CompanyProfile.jsx
@@ -296,7 +296,7 @@ const CompanyProfile = () => {
</button>
</form>
)}
- {isOpen && <SwitchAccount />}
+ {isOpen && <SwitchAccount company_type={company_type} />}
</>
);
};
diff --git a/src/lib/auth/components/Menu.jsx b/src/lib/auth/components/Menu.jsx
index f475db1f..ddbb0760 100644
--- a/src/lib/auth/components/Menu.jsx
+++ b/src/lib/auth/components/Menu.jsx
@@ -1,76 +1,137 @@
-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 Divider from '@/core/components/elements/Divider/Divider';
const Menu = () => {
- const router = useRouter()
-
- const routeStartWith = (route) => router.pathname.startsWith(route)
-
+ const router = useRouter();
+ const auth = useAuth();
+ 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>
- </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 className='flex justify-between py-4'>
+ <div className='font-semibold text-gray_r-12'>Akun Saya</div>
+ {auth?.company && (
+ <div className='badge-solid-red mt-1 p-2'>Akun Bisnis</div>
+ )}
+ {!auth?.company && (
+ <div className='badge-gray mt-1 p-2'>Akun Individu</div>
+ )}
+ </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'>
+ <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
@@ -81,6 +142,6 @@ const LinkItem = ({ children, ...props }) => (
>
{children}
</Link>
-)
+);
-export default Menu
+export default Menu;
diff --git a/src/lib/auth/components/PersonalProfile.jsx b/src/lib/auth/components/PersonalProfile.jsx
index ce27c650..3053255d 100644
--- a/src/lib/auth/components/PersonalProfile.jsx
+++ b/src/lib/auth/components/PersonalProfile.jsx
@@ -48,11 +48,7 @@ const PersonalProfile = () => {
return (
<>
- <button
- type='button'
- onClick={toggle}
- className='p-4 flex items-center text-left w-full'
- >
+ <div type='button' className='p-4 flex items-center text-left w-full'>
<div>
<div className='font-semibold mb-2'>Informasi Akun</div>
<div className='text-gray_r-11'>
@@ -60,61 +56,55 @@ const PersonalProfile = () => {
diri anda
</div>
</div>
- <div className='ml-auto p-2 bg-gray_r-3 rounded'>
- {!isOpen && <ChevronDownIcon className='w-6' />}
- {isOpen && <ChevronUpIcon className='w-6' />}
- </div>
- </button>
+ </div>
- {isOpen && (
- <form
- className='p-4 border-t border-gray_r-6'
- onSubmit={handleSubmit(onSubmitHandler)}
- >
- <div className='grid grid-cols-1 sm:grid-cols-2 gap-4'>
- <div>
- <label>Email</label>
- <input
- {...register('email')}
- type='text'
- disabled
- className='form-input mt-3'
- />
- </div>
- <div>
- <label>Nama Lengkap</label>
- <input
- {...register('name')}
- type='text'
- className='form-input mt-3'
- />
- </div>
- <div>
- <label>No. Handphone</label>
- <input
- {...register('mobile')}
- type='tel'
- className='form-input mt-3'
- />
- </div>
- <div>
- <label>Kata Sandi</label>
- <input
- {...register('password')}
- type='password'
- className='form-input mt-3'
- placeholder='Isi jika ingin mengubah kata sandi'
- />
- </div>
+ <form
+ className='p-4 border-t border-gray_r-6'
+ onSubmit={handleSubmit(onSubmitHandler)}
+ >
+ <div className='grid grid-cols-1 sm:grid-cols-2 gap-4'>
+ <div>
+ <label>Email</label>
+ <input
+ {...register('email')}
+ type='text'
+ disabled
+ className='form-input mt-3'
+ />
+ </div>
+ <div>
+ <label>Nama Lengkap</label>
+ <input
+ {...register('name')}
+ type='text'
+ className='form-input mt-3'
+ />
</div>
- <button
- type='submit'
- className='btn-yellow w-full sm:w-fit sm:ml-auto mt-6 max-w-28'
- >
- Simpan
- </button>
- </form>
- )}
+ <div>
+ <label>No. Handphone</label>
+ <input
+ {...register('mobile')}
+ type='tel'
+ className='form-input mt-3'
+ />
+ </div>
+ <div>
+ <label>Kata Sandi</label>
+ <input
+ {...register('password')}
+ type='password'
+ className='form-input mt-3'
+ placeholder='Isi jika ingin mengubah kata sandi'
+ />
+ </div>
+ </div>
+ <button
+ type='submit'
+ className='btn-yellow w-full sm:w-fit sm:ml-auto mt-6 max-w-28'
+ >
+ Simpan
+ </button>
+ </form>
</>
);
};
diff --git a/src/lib/auth/components/SwitchAccount.jsx b/src/lib/auth/components/SwitchAccount.jsx
index fa1d3924..d76d1f0e 100644
--- a/src/lib/auth/components/SwitchAccount.jsx
+++ b/src/lib/auth/components/SwitchAccount.jsx
@@ -14,7 +14,8 @@ import { registerUser } from '~/services/auth';
import { useMutation } from 'react-query';
import { isValid } from 'zod';
import useDevice from '@/core/hooks/useDevice';
-const SwitchAccount = () => {
+import BottomPopup from '@/core/components/elements/Popup/BottomPopup';
+const SwitchAccount = ({ company_type }) => {
const { isDesktop, isMobile } = useDevice();
const auth = useAuth();
const [isOpen, setIsOpen] = useState(true);
@@ -25,6 +26,7 @@ const SwitchAccount = () => {
const [selectedValueBisnis, setSelectedValueBisnis] = useState('false');
const [selectedValue, setSelectedValue] = useState('PKP');
const [buttonSubmitClick, setButtonSubmitClick] = useState(false);
+ const [changeConfirmation, setChangeConfirmation] = useState(false);
const { register, setValue, handleSubmit } = useForm({
defaultValues: {
email: '',
@@ -74,7 +76,6 @@ const SwitchAccount = () => {
const dataProfile = await addressApi({
id: auth.parentId ? auth.parentId : auth.parent_id,
});
- console.log('dataProfile', dataProfile);
if (dataProfile?.companyType === 'nonpkp') {
setSelectedValue('PKP');
}
@@ -120,6 +121,7 @@ const SwitchAccount = () => {
}
};
const onSubmitHandler = async (values) => {
+ setChangeConfirmation(false);
// let data = { ...form, id: `${auth.partnerId}` };
const data = form;
if (!isFormValid) {
@@ -151,11 +153,32 @@ const SwitchAccount = () => {
return (
<>
- <button
- type='button'
- onClick={toggle}
- className='p-4 flex items-center text-left w-full'
+ <BottomPopup
+ active={changeConfirmation}
+ close={() => setChangeConfirmation(false)}
+ title='Ubah profil Bisnis'
>
+ <div className='leading-7 text-gray_r-12/80'>
+ Apakah anda yakin mengubah data bisnis?
+ </div>
+ <div className='flex mt-6 gap-x-4 md:justify-end'>
+ <button
+ className='btn-solid-red flex-1 md:flex-none'
+ type='button'
+ onClick={onSubmitHandler}
+ >
+ Ya, Ubah
+ </button>
+ <button
+ className='btn-light flex-1 md:flex-none'
+ type='button'
+ onClick={() => setChangeConfirmation(false)}
+ >
+ Batal
+ </button>
+ </div>
+ </BottomPopup>
+ <div type='button' className='p-4 flex items-center text-left w-full'>
<div
className={`flex ${
isDesktop ? 'flex-row' : 'flex-col gap-y-2'
@@ -166,32 +189,25 @@ const SwitchAccount = () => {
*Perubahan akun tidak dapat diubah kembali
</div>
</div>
- <div className='ml-auto p-2 bg-gray_r-3 rounded'>
- {!isOpen && <ChevronDownIcon className='w-6' />}
- {isOpen && <ChevronUpIcon className='w-6' />}
- </div>
- </button>
+ </div>
- {isOpen && (
- <div className='p-4'>
- <div>
- <p className='text-black font-bold mb-2'>
- Bisnis Terdaftar di Indoteknik?
- </p>
- <RadioGroup
- onChange={handleChangeBisnis}
- value={selectedValueBisnis}
- >
- <Stack direction='row'>
- <Radio colorScheme='red' value='true'>
- Sudah Terdaftar
- </Radio>
- <Radio colorScheme='red' value='false' className='ml-2'>
- Belum Terdaftar
- </Radio>
- </Stack>
- </RadioGroup>
- </div>
+ <div className='p-4 '>
+ <div>
+ <p className='text-black font-bold mb-2'>
+ Bisnis Terdaftar di Indoteknik?
+ </p>
+ <RadioGroup onChange={handleChangeBisnis} value={selectedValueBisnis}>
+ <Stack direction='row'>
+ <Radio colorScheme='red' value='true'>
+ Sudah Terdaftar
+ </Radio>
+ <Radio colorScheme='red' value='false' className='ml-2'>
+ Belum Terdaftar
+ </Radio>
+ </Stack>
+ </RadioGroup>
+ </div>
+ {!isTerdaftar && (
<div className='mt-4'>
<p className='text-black font-bold mb-2'>Tipe Bisnis</p>
<RadioGroup onChange={handleChange} value={selectedValue}>
@@ -199,37 +215,43 @@ const SwitchAccount = () => {
<Radio colorScheme='red' value='PKP'>
PKP
</Radio>
- <Radio colorScheme='red' value='Non-PKP' className='ml-4'>
- Non-PKP
- </Radio>
+ {!(company_type === 'nonpkp') && (
+ <Radio colorScheme='red' value='Non-PKP' className='ml-4'>
+ Non-PKP
+ </Radio>
+ )}
</Stack>
</RadioGroup>
</div>
- <FormBisnis
- type={isDesktop ? 'profil' : 'bisnis'}
- required={isTerdaftar}
- isPKP={isPKP}
- chekValid={notValid}
- buttonSubmitClick={buttonSubmitClick}
- />
- <div className='flex justify-end mb-4 mr-4'>
+ )}
+ <FormBisnis
+ type={isDesktop ? 'profil' : 'bisnis'}
+ required={isTerdaftar}
+ isPKP={isPKP}
+ chekValid={notValid}
+ buttonSubmitClick={buttonSubmitClick}
+ />
+ <div className='flex flex-row justify-end mt-4 '>
+ <div>
<button
type='submit'
- onClick={onSubmitHandler}
- className='btn-yellow w-full sm:w-fit sm:ml-auto mt-6'
+ onClick={() => setChangeConfirmation(true)}
+ className='btn-yellow w-full sm:w-fit sm:ml-auto mt-6 mr-2'
>
{mutation.isLoading ? 'Loading...' : 'Simpan Perubahan'}
</button>
+ </div>
+ <div>
<button
type='submit'
onClick={onSubmitHandlerCancel}
- className='btn-red w-full sm:w-fit sm:ml-auto mt-6'
+ className='btn-solid-red w-full sm:w-fit sm:ml-auto mt-6'
>
{mutation.isLoading ? 'Loading...' : 'Batal'}
</button>
</div>
</div>
- )}
+ </div>
</>
);
};
generated by cgit v1.2.3 (git 2.25.1) at 2026-04-18 01:37:30 +0000