diff options
Diffstat (limited to 'src/lib/auth/components')
| -rw-r--r-- | src/lib/auth/components/CompanyProfile.jsx | 4 | ||||
| -rw-r--r-- | src/lib/auth/components/PersonalProfile.jsx | 106 | ||||
| -rw-r--r-- | src/lib/auth/components/StatusSwitchAccount.jsx | 5 | ||||
| -rw-r--r-- | src/lib/auth/components/SwitchAccount.jsx | 206 |
4 files changed, 280 insertions, 41 deletions
diff --git a/src/lib/auth/components/CompanyProfile.jsx b/src/lib/auth/components/CompanyProfile.jsx index 7bda992f..7bebb02f 100644 --- a/src/lib/auth/components/CompanyProfile.jsx +++ b/src/lib/auth/components/CompanyProfile.jsx @@ -53,7 +53,9 @@ const CompanyProfile = () => { useEffect(() => { const loadProfile = async () => { - const dataProfile = await addressApi({ id: auth.parentId }); + const dataProfile = await addressApi({ + id: auth.parentId ? auth.parentId : auth.parent_id, + }); setValue('name', dataProfile.name); setValue('industry', dataProfile.industryId); setValue('companyType', dataProfile.companyTypeId); diff --git a/src/lib/auth/components/PersonalProfile.jsx b/src/lib/auth/components/PersonalProfile.jsx index b9fb3f5f..727785bf 100644 --- a/src/lib/auth/components/PersonalProfile.jsx +++ b/src/lib/auth/components/PersonalProfile.jsx @@ -1,56 +1,63 @@ -import useAuth from '@/core/hooks/useAuth' -import { setAuth } from '@/core/utils/auth' -import addressApi from '@/lib/address/api/addressApi' -import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/24/outline' -import { useEffect, useState } from 'react' -import { useForm } from 'react-hook-form' -import { toast } from 'react-hot-toast' -import editPersonalProfileApi from '../api/editPersonalProfileApi' +import useAuth from '@/core/hooks/useAuth'; +import { setAuth } from '@/core/utils/auth'; +import addressApi from '@/lib/address/api/addressApi'; +import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/24/outline'; +import { useEffect, useState } from 'react'; +import { useForm } from 'react-hook-form'; +import { toast } from 'react-hot-toast'; +import editPersonalProfileApi from '../api/editPersonalProfileApi'; const PersonalProfile = () => { - const auth = useAuth() - const [isOpen, setIsOpen] = useState(true) - const toggle = () => setIsOpen(!isOpen) + const auth = useAuth(); + const [isOpen, setIsOpen] = useState(true); + const toggle = () => setIsOpen(!isOpen); const { register, setValue, handleSubmit } = useForm({ defaultValues: { email: '', name: '', mobile: '', - password: '' - } - }) + password: '', + }, + }); useEffect(() => { const loadProfile = async () => { - const dataProfile = await addressApi({ id: auth.partnerId }) - setValue('email', dataProfile?.email) - setValue('name', dataProfile?.name) - setValue('mobile', dataProfile?.mobile) - } - if (auth) loadProfile() - }, [auth, setValue]) + const dataProfile = await addressApi({ + id: auth.partnerId ? auth.partnerId : auth.partner_id, + }); + setValue('email', dataProfile?.email); + setValue('name', dataProfile?.name); + setValue('mobile', dataProfile?.mobile); + }; + if (auth) loadProfile(); + }, [auth, setValue]); const onSubmitHandler = async (values) => { - let data = values - if (!values.password) delete data.password - const isUpdated = await editPersonalProfileApi({ data }) + let data = values; + if (!values.password) delete data.password; + const isUpdated = await editPersonalProfileApi({ data }); if (isUpdated?.user) { - setAuth(isUpdated.user) - setValue('password', '') - toast.success('Berhasil mengubah profil', { duration: 1500 }) - return + setAuth(isUpdated.user); + setValue('password', ''); + toast.success('Berhasil mengubah profil', { duration: 1500 }); + return; } - toast.error('Terjadi kesalahan internal') - } + toast.error('Terjadi kesalahan internal'); + }; return ( <> - <button type='button' onClick={toggle} className='p-4 flex items-center text-left w-full'> + <button + type='button' + onClick={toggle} + 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'> - Dibawah ini adalah data diri yang anda masukan, periksa kembali data diri anda + Dibawah ini adalah data diri yang anda masukan, periksa kembali data + diri anda </div> </div> <div className='ml-auto p-2 bg-gray_r-3 rounded'> @@ -60,19 +67,35 @@ const PersonalProfile = () => { </button> {isOpen && ( - <form className='p-4 border-t border-gray_r-6' onSubmit={handleSubmit(onSubmitHandler)}> + <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' /> + <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' /> + <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' /> + <input + {...register('mobile')} + type='tel' + className='form-input mt-3' + /> </div> <div> <label>Kata Sandi</label> @@ -84,13 +107,16 @@ const PersonalProfile = () => { /> </div> </div> - <button type='submit' className='btn-yellow w-full sm:w-fit sm:ml-auto mt-6'> + <button + type='submit' + className='btn-yellow w-full sm:w-fit sm:ml-auto mt-6' + > Simpan </button> </form> )} </> - ) -} + ); +}; -export default PersonalProfile +export default PersonalProfile; diff --git a/src/lib/auth/components/StatusSwitchAccount.jsx b/src/lib/auth/components/StatusSwitchAccount.jsx new file mode 100644 index 00000000..73316616 --- /dev/null +++ b/src/lib/auth/components/StatusSwitchAccount.jsx @@ -0,0 +1,5 @@ +const StatusSwitchAccount = ({ status }) => { + return <>Perpindahan akun anda masih {status}</>; +}; + +export default StatusSwitchAccount; diff --git a/src/lib/auth/components/SwitchAccount.jsx b/src/lib/auth/components/SwitchAccount.jsx new file mode 100644 index 00000000..18c6076f --- /dev/null +++ b/src/lib/auth/components/SwitchAccount.jsx @@ -0,0 +1,206 @@ +import useAuth from '@/core/hooks/useAuth'; +import { setAuth } from '@/core/utils/auth'; +import addressApi from '@/lib/address/api/addressApi'; +import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/24/outline'; +import { useEffect, useState, useMemo } from 'react'; +import { useForm } from 'react-hook-form'; +import { toast } from 'react-hot-toast'; +import switchAccountApi from '../api/switchAccountApi'; +import FormBisnis from '~/modules/register/components/FormBisnis.tsx'; +import RegistrasiBisnis from '~/modules/register/components/RegistrasiBisnis.tsx'; +import { Radio, RadioGroup, Stack, Divider, Button } from '@chakra-ui/react'; +import { useRegisterStore } from '~/modules/register/stores/useRegisterStore.ts'; +import { registerUser } from '~/services/auth'; +import { useMutation } from 'react-query'; +import { isValid } from 'zod'; +import useDevice from '@/core/hooks/useDevice'; +const SwitchAccount = () => { + const { isDesktop, isMobile } = useDevice(); + const auth = useAuth(); + const [isOpen, setIsOpen] = useState(true); + const toggle = () => setIsOpen(!isOpen); + const [isPKP, setIsPKP] = useState(true); + const [isTerdaftar, setIsTerdaftar] = useState(false); + const [isChecked, setIsChecked] = useState(false); + const [selectedValueBisnis, setSelectedValueBisnis] = useState('false'); + const [selectedValue, setSelectedValue] = useState('PKP'); + const [buttonSubmitClick, setButtonSubmitClick] = useState(false); + const { register, setValue, handleSubmit } = useForm({ + defaultValues: { + email: '', + name: '', + phone: '', + password: '', + }, + }); + const mutation = useMutation({ + mutationFn: (data) => registerUser(data), + }); + const [notValid, setNotValid] = useState(false); + const { form, isCheckedTNC, isValidCaptcha, errors, validate, updateForm } = + useRegisterStore(); + const isFormValid = useMemo(() => Object.keys(errors).length === 0, [errors]); + useEffect(() => { + const loadProfile = async () => { + const dataProfile = await addressApi({ id: auth.partnerId }); + setValue('email', dataProfile?.email); + setValue('name', dataProfile?.name); + setValue('phone', dataProfile?.phone); + }; + if (auth) loadProfile(); + }, [auth, setValue]); + + useEffect(() => { + if (selectedValue === 'PKP') { + updateForm('is_pkp', 'true'); + validate(); + } else { + updateForm('is_pkp', 'false'); + validate(); + } + }, [selectedValue]); + + useEffect(() => { + if (isTerdaftar) { + updateForm('is_terdaftar', 'true'); + validate(); + } else { + updateForm('is_terdaftar', 'false'); + validate(); + } + }, [isTerdaftar]); + + useEffect(() => { + updateForm('name', '-'); + updateForm('email', 'example@mail.com'); + updateForm('password', 'example@mail.com'); + updateForm('phone', '081234567890'); + validate(); + }, []); + + const handleChangeBisnis = (value) => { + setSelectedValueBisnis(value); + if (value === 'true') { + validate(); + setIsTerdaftar(true); + } else { + validate(); + setIsTerdaftar(false); + } + }; + const handleChange = (value) => { + setSelectedValue(value); + if (value === 'PKP') { + validate(); + setIsPKP(true); + } else { + validate(); + setIsPKP(false); + setIsPKP(false); + } + }; + const onSubmitHandler = async (values) => { + // let data = { ...form, id: `${auth.partnerId}` }; + const data = form; + if (!isFormValid) { + setNotValid(true); + setButtonSubmitClick(!buttonSubmitClick); + return; + } else { + setButtonSubmitClick(!buttonSubmitClick); + setNotValid(false); + } + // if (!values.password) delete data.password; + const isUpdated = await switchAccountApi({ data }); + + if (isUpdated?.switch === 'Pending') { + // setAuth(isUpdated.user); + // setValue('password', ''); + toast.success('Berhasil mengubah akun', { duration: 1500 }); + setTimeout(() => { + window.location.reload(); + }, 1500); + return; + } + toast.error('Terjadi kesalahan internal'); + }; + + return ( + <> + <button + type='button' + onClick={toggle} + className='p-4 flex items-center text-left w-full' + > + <div + className={`flex ${ + isDesktop ? 'flex-row' : 'flex-col gap-y-2' + } items-start justify-start bg-slate-50`} + > + <div className='flex font-semibold mr-2'>Informasi Bisnis</div> + <div className='text-red-500 text-xs'> + *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> + + {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='mt-4'> + <p className='text-black font-bold mb-2'>Tipe Bisnis</p> + <RadioGroup onChange={handleChange} value={selectedValue}> + <Stack direction='row' className='font-bold'> + <Radio colorScheme='red' value='PKP'> + PKP + </Radio> + <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'> + <button + type='submit' + onClick={onSubmitHandler} + className='btn-yellow w-full sm:w-fit sm:ml-auto mt-6' + > + {mutation.isLoading ? 'Loading...' : 'Simpan Perubahan'} + </button> + </div> + </div> + )} + </> + ); +}; + +export default SwitchAccount; |
