diff options
| -rw-r--r-- | src-migrate/modules/register/components/FormBisnis.tsx | 1 | ||||
| -rw-r--r-- | src/lib/auth/components/CompanyProfile.jsx | 2 | ||||
| -rw-r--r-- | src/lib/auth/components/Menu.jsx | 187 | ||||
| -rw-r--r-- | src/lib/auth/components/PersonalProfile.jsx | 106 | ||||
| -rw-r--r-- | src/lib/auth/components/SwitchAccount.jsx | 114 |
5 files changed, 241 insertions, 169 deletions
diff --git a/src-migrate/modules/register/components/FormBisnis.tsx b/src-migrate/modules/register/components/FormBisnis.tsx index ad92948e..cc05a3bf 100644 --- a/src-migrate/modules/register/components/FormBisnis.tsx +++ b/src-migrate/modules/register/components/FormBisnis.tsx @@ -115,7 +115,6 @@ const form: React.FC<FormProps> = ({ } }, [form.industry_id]); - console.log('form', form); useEffect(() => { const loadIndustries = async () => { const dataIndustries = await odooApi('GET', '/api/v1/partner/industry'); 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> </> ); }; |
