diff options
Diffstat (limited to 'src/lib/auth/components/SwitchAccount.jsx')
| -rw-r--r-- | src/lib/auth/components/SwitchAccount.jsx | 200 |
1 files changed, 200 insertions, 0 deletions
diff --git a/src/lib/auth/components/SwitchAccount.jsx b/src/lib/auth/components/SwitchAccount.jsx new file mode 100644 index 00000000..b7b67864 --- /dev/null +++ b/src/lib/auth/components/SwitchAccount.jsx @@ -0,0 +1,200 @@ +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'; +const SwitchAccount = () => { + 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 { 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(); + console.log('form', form); + 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); + } + }; + console.log('auth', auth); + const onSubmitHandler = async (values) => { + let data = form; + console.log('data', data); + if (!isFormValid) { + console.log('masih ada yang belum valid'); + setNotValid(true); + return; + } else { + setNotValid(false); + } + // if (!values.password) delete data.password; + const isUpdated = await switchAccountApi({ data }); + console.log('isupdate', isUpdated); + + 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 flex-row items-center 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='profil' + required={isTerdaftar} + isPKP={isPKP} + chekValid={notValid} + /> + <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; |