From 2ffc49bb65a16f07cf5a3b7e4926c34ea07b9460 Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Wed, 21 Aug 2024 17:10:13 +0700
Subject: <iman> update new register

---
 .../modules/register/components/FormBisnis.tsx     | 118 ++++++++++++++-------
 1 file changed, 79 insertions(+), 39 deletions(-)

(limited to 'src-migrate/modules/register/components/FormBisnis.tsx')

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();
@@ -50,6 +56,23 @@ const FormBisnis: React.FC<FormProps> = ({ type, required }) => {
     loadCompanyTypes();
   }, []);
 
+  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');
@@ -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
-- 
cgit v1.2.3

