diff options
Diffstat (limited to 'src-migrate/modules/register/components')
| -rw-r--r-- | src-migrate/modules/register/components/FormBisnis.tsx | 118 | ||||
| -rw-r--r-- | src-migrate/modules/register/components/RegistrasiBisnis.tsx | 37 |
2 files changed, 104 insertions, 51 deletions
diff --git a/src-migrate/modules/register/components/FormBisnis.tsx b/src-migrate/modules/register/components/FormBisnis.tsx index 7b301dc5..d014f4e7 100644 --- a/src-migrate/modules/register/components/FormBisnis.tsx +++ b/src-migrate/modules/register/components/FormBisnis.tsx @@ -22,6 +22,11 @@ interface Industry { category: string; } +interface CompanyType { + value: string; + label: string; +} + const FormBisnis: React.FC<FormProps> = ({ type, required }) => { const { formBisnis, @@ -34,9 +39,10 @@ const FormBisnis: React.FC<FormProps> = ({ type, required }) => { const { control, watch, setValue } = useForm(); const [selectedCategory, setSelectedCategory] = useState<string>(''); + const [selectedCompanyId, setSelectedCompanyId] = useState<number>(); const [industries, setIndustries] = useState<Industry[]>([]); - const [companyTypes, setCompanyTypes] = useState([]); + const [companyTypes, setCompanyTypes] = useState<CompanyType[]>([]); const isFormValid = useMemo(() => Object.keys(errors).length === 0, [errors]); const router = useRouter(); @@ -51,6 +57,23 @@ const FormBisnis: React.FC<FormProps> = ({ type, required }) => { }, []); useEffect(() => { + const selectedCompanyType = companyTypes.find(company => company.value === watch('companyType')); + if (selectedCompanyType) { + updateFormBisnis("company_type_id", selectedCompanyType?.value); + validateFormBisnis(); + } + }, [watch('companyType'), companyTypes]); + + useEffect(() => { + const selectedIndustryType = industries.find(industry => industry.value === watch('industry')); + if (selectedIndustryType) { + updateFormBisnis("industry_id", selectedIndustryType?.value); + validateFormBisnis(); + console.log("selectedIndustryType",selectedIndustryType) + } + }, [watch('industry'), industries]); + + useEffect(() => { const loadIndustries = async () => { const dataIndustries = await odooApi('GET', '/api/v1/partner/industry'); setIndustries(dataIndustries?.map((o: { id: any; name: any; category: any; }) => ({ value: o.id, label: o.name, category: o.category }))); @@ -76,6 +99,7 @@ const FormBisnis: React.FC<FormProps> = ({ type, required }) => { const handleFileChange = async (event: ChangeEvent<HTMLInputElement>) => { let fileBase64 = ''; + const { name} = event.target; const file = event.target.files?.[0]; if (file) { if (typeof file !== 'undefined') { @@ -85,7 +109,7 @@ const FormBisnis: React.FC<FormProps> = ({ type, required }) => { } fileBase64 = await getFileBase64(file); } - updateFormBisnis("document", fileBase64); // Menyimpan file ke dalam formBisnis state + updateFormBisnis(name, fileBase64); validateFormBisnis(); } }; @@ -140,17 +164,21 @@ const FormBisnis: React.FC<FormProps> = ({ type, required }) => { <input type='text' - id='email' - name='email' - className='form-input mt-3' + id='email_partner' + name='email_partner' placeholder='example@email.com' - value={formBisnis.email} + value={!required ? formBisnis.email_partner : ''} + className={`form-input mt-3 ${required ? 'cursor-no-drop' : ''}`} + disabled={required} + contentEditable={required} + readOnly={required} onChange={handleInputChange} autoComplete="username" - aria-invalid={!!errors.email} + aria-invalid={!required && !!errors.email_partner} + /> - {!!errors.email && <span className="form-msg-danger">{errors.email}</span>} + {!required && !!errors.email_partner && <span className="form-msg-danger">{errors.email_partner}</span>} </div> <div> @@ -162,96 +190,108 @@ const FormBisnis: React.FC<FormProps> = ({ type, required }) => { <Controller name='companyType' control={control} - render={(props) => <HookFormSelect {...props} options={companyTypes} placeholder="Badan Usaha"/>} + render={(props) => <HookFormSelect {...props} options={companyTypes} disabled={required} placeholder="Badan Usaha"/>} /> </div> <input type="text" - name="company" - id="company" + name="business_name" + id="business_name" className="form-input h-full w-[120%]" placeholder="Nama Perusahaan" autoCapitalize="true" - value={formBisnis.company} + value={formBisnis.business_name} onChange={handleInputChange} /> </div> </div> <div className=""> - <label className="font-bold" htmlFor="company"> + <label className="font-bold" htmlFor="business_name"> Klasifikasi Jenis Usaha </label> <Controller name='industry' control={control} - render={(props) => <HookFormSelect {...props} options={industries} placeholder={'Select industry'}/>} + render={(props) => <HookFormSelect {...props} options={industries} disabled={required} placeholder={'Select industry'}/>} /> <span className='text-gray_r-11 text-xs'>Kategori : {selectedCategory}</span> </div> <div> - <label htmlFor='name' className="font-bold">Nama Wajib Pajak</label> + <label htmlFor='nama_wajib_pajak' className="font-bold">Nama Wajib Pajak</label> <input type='text' - id='name' - name='name' - className='form-input mt-3' + id='nama_wajib_pajak' + name='nama_wajib_pajak' placeholder='Masukan nama lengkap anda' - value={formBisnis.name} + value={!required? formBisnis.nama_wajib_pajak : ''} + className={`form-input mt-3 ${required ? 'cursor-no-drop' : ''}`} + disabled={required} + contentEditable={required} + readOnly={required} onChange={handleInputChange} - aria-invalid={!!errors.name} + aria-invalid={!required && !!errors.nama_wajib_pajak} /> - {!!errors.name && <span className="form-msg-danger">{errors.name}</span>} + {!required && !!errors.nama_wajib_pajak && <span className="form-msg-danger">{errors.nama_wajib_pajak}</span>} </div> <div> - <label htmlFor='phone' className="font-bold">Nomor NPWP</label> + <label htmlFor='npwp' className="font-bold">Nomor NPWP</label> <input type='tel' - id='phone' - name='phone' - className='form-input mt-3' - placeholder='08xxxxxxxx' - value={formBisnis.phone} + id='npwp' + name='npwp' + className={`form-input mt-3 ${required ? 'cursor-no-drop' : ''}`} + disabled={required} + contentEditable={required} + readOnly={required} + placeholder='000.000.000.0-000.000' + value={!required ? formBisnis.npwp : ''} onChange={handleInputChange} - aria-invalid={!!errors.phone} + aria-invalid={!required && !!errors.npwp} /> - {!!errors.phone && <span className="form-msg-danger">{errors.phone}</span>} + {!required && !!errors.npwp && <span className="form-msg-danger">{errors.npwp}</span>} </div> <div> - <label htmlFor="document" className="font-bold">Dokumen NPWP</label> + <label htmlFor="npwp_document" className="font-bold">Dokumen NPWP</label> <input type="file" - id="document" - name="document" - className="form-input mt-3" + id="npwp_document" + name="npwp_document" + className={`form-input mt-3 ${required ? 'cursor-no-drop' : ''}`} + disabled={required} + contentEditable={required} + readOnly={required} onChange={handleFileChange} accept=".pdf,.doc,.docx,.png,.jpg,.jpeg" // Filter file types /> - {/* {!!errors.document && <span className="form-msg-danger">{errors.document}</span>} */} + {!required && !!errors.npwp_document && <span className="form-msg-danger">{errors.npwp_document}</span>} </div> <div> - <label htmlFor="document" className="font-bold">Dokumen SPPKP</label> + <label htmlFor="sppkp_document" className="font-bold">Dokumen SPPKP</label> <input type="file" - id="document" - name="document" - className="form-input mt-3" + id="sppkp_document" + name="sppkp_document" + className={`form-input mt-3 ${required ? 'cursor-no-drop' : ''}`} + disabled={required} + contentEditable={required} + readOnly={required} onChange={handleFileChange} accept=".pdf,.doc,.docx,.png,.jpg,.jpeg" // Filter file types /> - {/* {!!errors.document && <span className="form-msg-danger">{errors.document}</span>} */} + {!required && !!errors.sppkp_document && <span className="form-msg-danger">{errors.sppkp_document}</span>} </div> {/* <button diff --git a/src-migrate/modules/register/components/RegistrasiBisnis.tsx b/src-migrate/modules/register/components/RegistrasiBisnis.tsx index 91bf128f..235e158a 100644 --- a/src-migrate/modules/register/components/RegistrasiBisnis.tsx +++ b/src-migrate/modules/register/components/RegistrasiBisnis.tsx @@ -1,4 +1,4 @@ -import { useMemo, useState } from "react"; +import { ChangeEvent, useEffect, useMemo, useState } from "react"; import FormBisnis from "./FormBisnis"; import Form from "./Form"; import TermCondition from "./TermCondition"; @@ -13,14 +13,19 @@ import { useRegisterStore } from "../stores/useRegisterStore"; import { useMutation } from "react-query"; import { RegisterProps } from "~/types/auth"; import { registerUser } from "~/services/auth"; +import router from "next/router"; +import toast from "react-hot-toast"; +import { useRouter } from "next/router"; +import { UseToastOptions, useToast } from "@chakra-ui/react"; +import Link from "next/link"; const RegistrasiBisnis = () => { - const [isPKP, setIsPKP] = useState(false); + const [isPKP, setIsPKP] = useState(true); const [isTerdaftar, setIsTerdaftar] = useState(false); const [isIndividuRequired, setIsIndividuRequired] = useState(true); const [isBisnisClicked, setisBisnisClicked] = useState(true); const [selectedValue, setSelectedValue] = useState('PKP'); - const [selectedValueBisnis, setSelectedValueBisnis] = useState('true'); + const [selectedValueBisnis, setSelectedValueBisnis] = useState('false'); const { form, formBisnis, @@ -28,17 +33,30 @@ const RegistrasiBisnis = () => { isValidCaptcha, errors, updateForm, + updateFormBisnis, + validateFormBisnis, validate, } = useRegisterStore() const isFormValid = useMemo(() => Object.keys(errors).length === 0, [errors]) + const toast = useToast() const mutation = useMutation({ mutationFn: (data: RegisterProps) => registerUser(data) }) + useEffect(() => { + if (selectedValue === "PKP") { + updateFormBisnis("is_pkp", 'true'); + validateFormBisnis(); + } else { + updateFormBisnis("is_pkp", 'false'); + validateFormBisnis(); + } + }, [selectedValue,]); + const handleChange = (value: string) => { setSelectedValue(value); if (value === "PKP") { - setIsPKP(true); + validateFormBisnis(); setIsIndividuRequired(true); // Show and require Individu form } else { setIsPKP(false); @@ -51,7 +69,7 @@ const RegistrasiBisnis = () => { if (value === "true") { setIsTerdaftar(true); } else { - setIsTerdaftar(true); + setIsTerdaftar(false); } }; @@ -63,15 +81,10 @@ const RegistrasiBisnis = () => { setisBisnisClicked(!isBisnisClicked) }; - const handleSubmit = () => { + const handleSubmit = async () => { console.log("form",form) console.log("form Bisnis",formBisnis) }; - console.log("isFormValid",isFormValid) - console.log("isCheckedTNC",isCheckedTNC) - console.log("mutation.isLoading",mutation.isLoading) - console.log("isValidCaptcha",isValidCaptcha) - return ( <> <div className="mt-4"> @@ -131,7 +144,7 @@ const RegistrasiBisnis = () => { </Stack> </RadioGroup> </div> - <FormBisnis type="bisnis" required={isIndividuRequired} /> + <FormBisnis type="bisnis" required={isTerdaftar} /> </div> )} </div> |