diff options
Diffstat (limited to 'src-migrate/modules')
3 files changed, 248 insertions, 70 deletions
diff --git a/src-migrate/modules/register/components/FormBisnis.tsx b/src-migrate/modules/register/components/FormBisnis.tsx index 12397956..0ead23ba 100644 --- a/src-migrate/modules/register/components/FormBisnis.tsx +++ b/src-migrate/modules/register/components/FormBisnis.tsx @@ -1,4 +1,12 @@ -import { ChangeEvent, useEffect, useMemo, useRef, useState } from 'react'; +import { + ChangeEvent, + useEffect, + useMemo, + useRef, + useState, + MouseEvent, +} from 'react'; +import { useMutation } from 'react-query'; import { useRegisterStore } from '../stores/useRegisterStore'; import { Button, @@ -11,10 +19,16 @@ import getFileBase64 from '@/core/utils/getFileBase64'; import { Controller, useForm } from 'react-hook-form'; import HookFormSelect from '@/core/components/elements/Select/HookFormSelect'; import odooApi from '~/libs/odooApi'; -import { EyeIcon } from '@heroicons/react/24/outline'; +import { toast } from 'react-hot-toast'; +import { + EyeIcon, + CheckCircleIcon, + XCircleIcon, +} from '@heroicons/react/24/outline'; import BottomPopup from '@/core/components/elements/Popup/BottomPopup'; import Image from 'next/image'; import useDevice from '@/core/hooks/useDevice'; +import useAuth from '@/core/hooks/useAuth'; interface FormProps { type: string; required: boolean; @@ -33,6 +47,10 @@ interface companyType { value: string; label: string; } +interface Auth { + id: string; + parentId: string; +} const form: React.FC<FormProps> = ({ type, @@ -50,12 +68,11 @@ const form: React.FC<FormProps> = ({ // Inside your component const [formattedNpwp, setFormattedNpwp] = useState<string>(''); // State for formatted NPWP const [unformattedNpwp, setUnformattedNpwp] = useState<string>(''); // State for unformatted NPWP - + const auth = useAuth() as unknown as Auth; const [industries, setIndustries] = useState<industry_id[]>([]); const [companyTypes, setCompanyTypes] = useState<companyType[]>([]); const toast = useToast(); - const emailRef = useRef<HTMLInputElement>(null); const businessNameRef = useRef<HTMLInputElement>(null); const companyTypeRef = useRef<HTMLInputElement>(null); @@ -80,30 +97,21 @@ const form: React.FC<FormProps> = ({ label: o.name, })) ); + // setValue('companyType', form.company_type_id); }; loadCompanyTypes(); }, []); useEffect(() => { - const selectedCompanyType = companyTypes.find( - (company) => company.value === watch('companyType') - ); - if (selectedCompanyType) { - updateForm('company_type_id', `${selectedCompanyType?.value}`); - validate(); + if (form.company_type_id) { + setValue('companyType', parseInt(form.company_type_id)); } - }, [watch('companyType'), companyTypes]); - + }, [form.company_type_id]); useEffect(() => { - const selectedIndustryType = industries.find( - (industry) => industry.value === watch('industry_id') - ); - if (selectedIndustryType) { - updateForm('industry_id', `${selectedIndustryType?.value}`); - setSelectedCategory(selectedIndustryType.category); - validate(); + if (form.industry_id) { + setValue('industry_id', parseInt(form.industry_id)); } - }, [watch('industry_id'), industries]); + }, [form.industry_id]); useEffect(() => { const loadIndustries = async () => { @@ -115,6 +123,7 @@ const form: React.FC<FormProps> = ({ category: o.category, })) ); + // setValue('industry_id', form.industry_id); }; loadIndustries(); }, []); @@ -225,7 +234,7 @@ const form: React.FC<FormProps> = ({ toast({ ...toastProps, title: - 'Format file yang diijinkan adalah .pdf, .doc, .docx, .png, .jpg, atau .jpeg', + 'Format file yang diijinkan adalah .pdf, .png, .jpg, atau .jpeg', status: 'error', }); event.target.value = ''; @@ -233,10 +242,10 @@ const form: React.FC<FormProps> = ({ } // Check for file size - if (file.size > 5000000) { + if (file.size > 2000000) { toast({ ...toastProps, - title: 'Maksimal ukuran file adalah 5MB', + title: 'Maksimal ukuran file adalah 2MB', status: 'error', }); event.target.value = ''; @@ -303,9 +312,121 @@ const form: React.FC<FormProps> = ({ }; loadIndustries(); }, [buttonSubmitClick, chekValid]); + + const handleCompanyTypeChange = (event: MouseEvent<HTMLDivElement>) => { + const selectedCompanyTypeValue = watch('companyType'); + const selectedCompanyType = companyTypes.find( + (company) => company.value === selectedCompanyTypeValue + ); + + if (selectedCompanyType !== undefined) { + updateForm('company_type_id', `${selectedCompanyType.value}`); + validate(); + } + }; + + const handleIndustriIdChange = (event: MouseEvent<HTMLDivElement>) => { + const selectedIndustriIdValue = watch('industry_id'); + const selectedIndustryType = industries.find( + (industry) => industry.value === selectedIndustriIdValue + ); + if (selectedIndustryType) { + updateForm('industry_id', `${selectedIndustryType?.value}`); + setSelectedCategory(selectedIndustryType.category); + validate(); + } + }; + + const [fileUrl, setFileUrl] = useState(''); + const [popUpNPWP, setPopUpNpwp] = useState(false); + const [popSppkp, setPopUpSppkp] = useState(false); + const [hasNPWP, setHasNpwp] = useState(false); + const [hasSPPKP, setHasSPPKP] = useState(false); + const [fileUrlSppkp, setFileUrlSppkp] = useState(''); + useEffect(() => { + const checkUrlNPWP = async (url: string | URL | Request) => { + try { + const response = await odooApi( + 'GET', + `/api/v1/user/chek/npwp/${auth?.parentId}` + ); + return response.status; // Returns true if status is 200-299 + } catch (error) { + console.error('Error accessing URL:', url, error); + return false; + } + }; + const checkUrlSPPKP = async (url: string | URL | Request) => { + try { + const response = await odooApi( + 'GET', + `/api/v1/user/chek/sppkp/${auth?.parentId}` + ); + + return response.status; // Returns true if status is 200-299 + } catch (error) { + console.error('Error accessing URL:', url, error); + return false; + } + }; + + const npwpUrl = `${process.env.NEXT_PUBLIC_ODOO_API_HOST}/api/v1/user/download/npwp/${auth?.parentId}`; + const sppkpUrl = `${process.env.NEXT_PUBLIC_ODOO_API_HOST}/api/v1/user/download/sppkp/${auth?.parentId}`; + + if (auth?.parentId) { + checkUrlNPWP(npwpUrl).then((isAccessible) => { + if (isAccessible) { + setFileUrl(npwpUrl); + setHasNpwp(true); + updateForm('npwp_document', ' '); + } + }); + + checkUrlSPPKP(sppkpUrl).then((isAccessible) => { + if (isAccessible) { + setFileUrlSppkp(sppkpUrl); + setHasSPPKP(true); + updateForm('sppkp_document', ' '); + } + }); + } + }, [auth?.parentId]); + return ( <> <BottomPopup + className='h-full object-contain object-center w-full' + title='Dokumen NPWP' + active={popUpNPWP} + close={() => setPopUpNpwp(false)} + > + <div className='flex p-2'> + <iframe + src={fileUrl} + width='800px' + height='600px' + title='NPWP File' + frameBorder='0' + ></iframe> + </div> + </BottomPopup> + <BottomPopup + className='h-full object-contain object-center w-full' + title='Dokumen SPPKP' + active={popSppkp} + close={() => setPopUpSppkp(false)} + > + <div className='flex p-2'> + <iframe + src={fileUrlSppkp} + width='800px' + height='600px' + title='NPWP File' + frameBorder='0' + ></iframe> + </div> + </BottomPopup> + <BottomPopup className='' title='Contoh SPPKP' active={isExample} @@ -326,7 +447,7 @@ const form: React.FC<FormProps> = ({ className={` ${ type === 'bisnis' ? 'mt-6 grid grid-cols-1 gap-y-4' - : 'mt-6 grid grid-cols-2 gap-x-4 gap-y-2' + : 'mt-6 grid grid-cols-2 gap-x-4 gap-y-6 auto-rows-min' }`} > <div> @@ -370,6 +491,7 @@ const form: React.FC<FormProps> = ({ <div className='w-4/5 pr-1 max-h-11 transition-all duration-500' ref={companyTypeRef} + onClick={handleCompanyTypeChange} > <Controller name='companyType' @@ -417,6 +539,7 @@ const form: React.FC<FormProps> = ({ <div className='max-h-10 transition-all duration-500' ref={industryRef} + onClick={handleIndustriIdChange} > <Controller name='industry_id' @@ -575,7 +698,13 @@ const form: React.FC<FormProps> = ({ readOnly={required} ref={npwpRef} placeholder='000.000.000.0-000.000' - value={!required ? formattedNpwp : ''} + value={ + !required + ? formattedNpwp === '' + ? form.npwp + : formattedNpwp + : '' + } maxLength={21} // Set maximum length to 16 characters onChange={(e) => { if (!required) { @@ -665,14 +794,36 @@ const form: React.FC<FormProps> = ({ ref={docsNpwpRef} readOnly={required} onChange={handleFileChange} - accept='.pdf,.doc,.docx,.png,.jpg,.jpeg' // Filter file types + accept='.pdf,.png,.jpg,.jpeg' // Filter file types /> {chekValid && isPKP && !required && !!errors.npwp_document && ( <span className='form-msg-danger'>{errors.npwp_document}</span> )} + <span className='form-msg-danger ml-4 text-xs mb-2'> + Format: .pdf, .png, .jpg, atau .jpeg, Maks 2MB + </span> + {hasNPWP && ( + <div className='px-3'> + <div className='inline-flex flex-row items-center justify-between w-full rounded-md h-12 bg-green-50 px-2 py-1 text-sm font-medium text-green-700 ring-1 ring-inset ring-green-600/20'> + <div className='w-4/5 flex flex-row items-center justify-start '> + <CheckCircleIcon className='w-6 mr-2' /> + Dokumen sudah diupload + </div> + <div className='w-1/5 flex flex-row justify-end'> + <EyeIcon + onClick={() => setPopUpNpwp(true)} + className={`w-6 mr-2 hover:scale-110 transition-transform duration-200}`} + /> + <XCircleIcon + onClick={() => setHasNpwp(false)} + className='w-6 hover:scale-110 transition-transform duration-200' + /> + </div> + </div> + </div> + )} </div> - <div> <label htmlFor='sppkp_document' className='font-bold'> Dokumen SPPKP{' '} @@ -693,12 +844,35 @@ const form: React.FC<FormProps> = ({ ref={docsSppkpRef} readOnly={required} onChange={handleFileChange} - accept='.pdf,.doc,.docx,.png,.jpg,.jpeg' // Filter file types + accept='.pdf,.png,.jpg,.jpeg' + content='lagu.jpg' /> - {chekValid && isPKP && !required && !!errors.sppkp_document && ( <span className='form-msg-danger'>{errors.sppkp_document}</span> )} + <span className='form-msg-danger ml-4 text-xs mb-2'> + Format: .pdf, .png, .jpg, atau .jpeg, Maks 2MB + </span> + {hasSPPKP && ( + <div className='px-3'> + <div className='inline-flex flex-row items-center justify-between w-full rounded-md h-12 bg-green-50 px-2 py-1 text-sm font-medium text-green-700 ring-1 ring-inset ring-green-600/20'> + <div className='w-4/5 flex flex-row items-center justify-start '> + <CheckCircleIcon className='w-6 mr-2' /> + Dokumen sudah di upload + </div> + <div className='w-1/5 flex flex-row justify-end'> + <EyeIcon + onClick={() => setPopUpSppkp(true)} + className={`w-6 mr-2 hover:scale-110 transition-transform duration-200}`} + /> + <XCircleIcon + onClick={() => setHasSPPKP(false)} + className='w-6 hover:scale-110 transition-transform duration-200' + /> + </div> + </div> + </div> + )} </div> </form> </> diff --git a/src-migrate/modules/register/components/RegistrasiBisnis.tsx b/src-migrate/modules/register/components/RegistrasiBisnis.tsx index 40caed65..332c5358 100644 --- a/src-migrate/modules/register/components/RegistrasiBisnis.tsx +++ b/src-migrate/modules/register/components/RegistrasiBisnis.tsx @@ -149,19 +149,21 @@ const RegistrasiBisnis: React.FC<FormProps> = ({ </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> + {!isTerdaftar && ( + <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='bisnis' required={isTerdaftar} diff --git a/src-migrate/modules/register/stores/useRegisterStore.ts b/src-migrate/modules/register/stores/useRegisterStore.ts index 273472be..815b92d9 100644 --- a/src-migrate/modules/register/stores/useRegisterStore.ts +++ b/src-migrate/modules/register/stores/useRegisterStore.ts @@ -28,7 +28,7 @@ export const useRegisterStore = create<State & Action>((set, get) => ({ company_type_id: '', business_name: '', name: '', - nama_wajib_pajak : '', + nama_wajib_pajak: '', email: '', email_partner: '', password: '', @@ -39,14 +39,14 @@ export const useRegisterStore = create<State & Action>((set, get) => ({ npwp: '', sppkp: '', is_pkp: '', - type_acc:'', - is_terdaftar:'', - alamat_bisnis:'', - alamat_wajib_pajak:'', + type_acc: '', + is_terdaftar: '', + alamat_bisnis: '', + alamat_wajib_pajak: '', + parent_id: '', }, updateForm: (name, value) => set((state) => ({ form: { ...state.form, [name]: value } })), - errors: {}, validate: () => { @@ -74,26 +74,28 @@ export const useRegisterStore = create<State & Action>((set, get) => ({ isValidCaptcha: false, updateValidCaptcha: (value) => set(() => ({ isValidCaptcha: value })), - resetForm: () => set({ - form: { - company_type_id: '', - business_name: '', - name: '', - nama_wajib_pajak : '', - email: '', - email_partner: '', - password: '', - phone: '', - sppkp_document: '', - npwp_document: '', - industry_id: '', - npwp: '', - sppkp: '', - is_pkp: '', - type_acc:'', - is_terdaftar:'', - alamat_bisnis:'', - alamat_wajib_pajak:'', - }, - }), + resetForm: () => + set({ + form: { + company_type_id: '', + business_name: '', + name: '', + nama_wajib_pajak: '', + email: '', + email_partner: '', + password: '', + phone: '', + sppkp_document: '', + npwp_document: '', + industry_id: '', + npwp: '', + sppkp: '', + is_pkp: '', + type_acc: '', + is_terdaftar: '', + alamat_bisnis: '', + alamat_wajib_pajak: '', + parent_id: '', + }, + }), })); |