diff options
Diffstat (limited to 'src/lib/auth/components/SwitchAccount.jsx')
| -rw-r--r-- | src/lib/auth/components/SwitchAccount.jsx | 301 |
1 files changed, 301 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..46e57348 --- /dev/null +++ b/src/lib/auth/components/SwitchAccount.jsx @@ -0,0 +1,301 @@ +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'; +import BottomPopup from '@/core/components/elements/Popup/BottomPopup'; +const SwitchAccount = ({ company_type }) => { + 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 [changeConfirmation, setChangeConfirmation] = 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, + resetForm, + } = 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(() => { + const loadProfile = async () => { + const dataProfile = await addressApi({ + id: auth.parentId ? auth.parentId : auth.parent_id, + }); + if (dataProfile?.companyType === 'nonpkp') { + setSelectedValue('PKP'); + } + if (auth?.company) { + updateForm('email_partner', dataProfile?.email); + updateForm('business_name', dataProfile?.name); + updateForm('industry_id', `${dataProfile?.industryId}`); + updateForm('company_type_id', `${dataProfile?.companyTypeId}`); + updateForm('nama_wajib_pajak', dataProfile?.taxName); + updateForm('npwp', dataProfile?.npwp); + updateForm('sppkp', dataProfile?.sppkp); + updateForm('alamat_wajib_pajak', dataProfile?.alamatWajibPajak); + updateForm('alamat_bisnis', dataProfile?.alamatBisnis); + validate(); + } + }; + if (auth) loadProfile(); + }, [auth, setValue]); + useEffect(() => { + updateForm('name', '-'); + updateForm('email', 'example@mail.com'); + updateForm('password', 'example@mail.com'); + updateForm('phone', '081234567890'); + validate(); + }, [buttonSubmitClick, changeConfirmation]); + + const handleChangeBisnis = (value) => { + resetForm(); + 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) => { + toast.loading('Mengubah status akun...'); + updateForm('parent_id', `${auth.parentId}`); + setChangeConfirmation(false); + // 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'); + }; + + const onSubmitHandlerCancel = async (values) => { + window.location.reload(); + }; + + return ( + <> + <BottomPopup + active={changeConfirmation} + close={() => setChangeConfirmation(false)} + title='Ubah profil Bisnis' + > + <div className='leading-7 text-gray_r-12/80'> + Anda yakin akan merubah profil bisnis anda dari INDIVIDU menjadi{' '} + {selectedValue}? + </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='ml-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> */} + <div className='px-4 '> + <div + class='flex items-center p-4 mb-4 text-sm border border-red-500 text-red-800 rounded-lg bg-red-50' + role='alert' + > + <svg + class='flex-shrink-0 inline w-4 h-4 mr-3' + aria-hidden='true' + fill='currentColor' + viewBox='0 0 20 20' + > + <path d='M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z' /> + </svg> + <span class='sr-only'>Info</span> + <div className='text-justify'> + Mohon diperhatikan bahwa perubahan data akun bisnis akan + mengakibatkan perubahan pada informasi yang tertera di faktur pajak + dan invoice. + </div> + </div> + </div> + + <div className='px-4 mb-4'> + {!auth?.company && company_type === 'nonpkp' && ( + <> + <div className='mb-4'> + <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=''> + <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> + {!auth?.company && 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 flex-row justify-end mt-4 '> + <div className='mr-4'> + <button + type='submit' + onClick={() => setChangeConfirmation(true)} + className='btn-yellow w-full sm:w-fit sm:ml-auto mt-6 mr-8 md:mr-4' + > + {mutation.isLoading ? 'Loading...' : 'Simpan Perubahan'} + </button> + </div> + <div> + <button + type='submit' + onClick={onSubmitHandlerCancel} + className='btn-solid-red w-full sm:w-fit sm:ml-auto mt-6' + > + {mutation.isLoading ? 'Loading...' : 'Batal'} + </button> + </div> + </div> + </div> + </> + ); +}; + +export default SwitchAccount; |