<iman> update new register view

3 files changed, 80 insertions, 62 deletions

diff --git a/src-migrate/modules/register/components/Form.tsx b/src-migrate/modules/register/components/Form.tsx
index 78566fae..ba28b32f 100644
--- a/src-migrate/modules/register/components/Form.tsx
+++ b/src-migrate/modules/register/components/Form.tsx
@@ -12,9 +12,10 @@ import Link from "next/link";
 interface FormProps {
   type: string;
   required: boolean;
+  isPKP: boolean;
 }
 
-const Form: React.FC<FormProps> = ({ type, required }) => {
+const Form: React.FC<FormProps> = ({ type, required, isPKP }) => {
   const {
     form,
     isCheckedTNC,
@@ -25,6 +26,7 @@ const Form: React.FC<FormProps> = ({ type, required }) => {
   } = useRegisterStore()
 
   const isFormValid = useMemo(() => Object.keys(errors).length === 0, [errors])
+  console.log("errors",errors)
 
   const router = useRouter()
   const toast = useToast()
@@ -33,6 +35,17 @@ const Form: React.FC<FormProps> = ({ type, required }) => {
     const { name, value } = event.target;
     updateForm(name, value)
     validate()
+    if(isPKP){
+      updateForm('nama_wajib_pajak','')
+      updateForm('sppkp_document','')
+      updateForm('npwp_document','')
+      updateForm('industry','')
+      updateForm('badanUsaha','')
+      updateForm('email_partner','')
+      updateForm('business_name','')
+      updateForm('companyType','')
+      updateForm('npwp','')
+    }
   }
 
   const mutation = useMutation({
@@ -77,6 +90,7 @@ const Form: React.FC<FormProps> = ({ type, required }) => {
         break
     }
   }
+  console.log(!isFormValid,!isCheckedTNC,mutation.isLoading,!isValidCaptcha)
 
   return (
     <form className="mt-6 grid grid-cols-1 gap-y-4" onSubmit={handleSubmit}>
@@ -152,7 +166,7 @@ const Form: React.FC<FormProps> = ({ type, required }) => {
 
       {type==='individu' && (
         <>
-          {/* <FormCaptcha /> */}
+          <FormCaptcha />
     
           <TermCondition />
           <button
diff --git a/src-migrate/modules/register/components/FormBisnis.tsx b/src-migrate/modules/register/components/FormBisnis.tsx
index d014f4e7..8b666ad7 100644
--- a/src-migrate/modules/register/components/FormBisnis.tsx
+++ b/src-migrate/modules/register/components/FormBisnis.tsx
@@ -4,7 +4,7 @@ import { useRegisterStore } from "../stores/useRegisterStore";
 import { RegisterProps } from "~/types/auth";
 import { registerUser } from "~/services/auth";
 import { useRouter } from "next/router";
-import { UseToastOptions, useToast } from "@chakra-ui/react";
+import { UseToastOptions, color, useToast } from "@chakra-ui/react";
 import Link from "next/link";
 import getFileBase64 from '@/core/utils/getFileBase64'
 import { Controller, useForm } from 'react-hook-form'
@@ -14,6 +14,7 @@ import odooApi from "~/libs/odooApi";
 interface FormProps {
   type: string;
   required: boolean;
+  isPKP: boolean;
 }
 
 interface Industry {
@@ -27,7 +28,7 @@ interface CompanyType {
   label: string;
 }
 
-const FormBisnis: React.FC<FormProps> = ({ type, required }) => {
+const FormBisnis: React.FC<FormProps> = ({ type, required, isPKP }) => {
   const {
     formBisnis,
     isCheckedTNC,
@@ -39,7 +40,7 @@ const FormBisnis: React.FC<FormProps> = ({ type, required }) => {
 
   const { control, watch, setValue } = useForm();
   const [selectedCategory, setSelectedCategory] = useState<string>('');
-  const [selectedCompanyId, setSelectedCompanyId] = useState<number>();
+  const [selectedCompanyId, setSelectedCompanyId] = useState<string>('');
 
   const [industries, setIndustries] = useState<Industry[]>([]);
   const [companyTypes, setCompanyTypes] = useState<CompanyType[]>([]);
@@ -60,6 +61,7 @@ const FormBisnis: React.FC<FormProps> = ({ type, required }) => {
     const selectedCompanyType = companyTypes.find(company => company.value === watch('companyType'));
     if (selectedCompanyType) {
       updateFormBisnis("company_type_id", selectedCompanyType?.value);
+      setSelectedCompanyId(selectedCompanyType?.label)
       validateFormBisnis();
     }
   }, [watch('companyType'), companyTypes]);
@@ -68,8 +70,8 @@ const FormBisnis: React.FC<FormProps> = ({ type, required }) => {
     const selectedIndustryType = industries.find(industry => industry.value === watch('industry'));
     if (selectedIndustryType) {
       updateFormBisnis("industry_id", selectedIndustryType?.value);
+      setSelectedCategory(selectedIndustryType.label);
       validateFormBisnis();
-      console.log("selectedIndustryType",selectedIndustryType)
     }
   }, [watch('industry'), industries]);
 
@@ -81,17 +83,7 @@ const FormBisnis: React.FC<FormProps> = ({ type, required }) => {
     loadIndustries();
   }, []);
 
-  const selectedIndustry = watch('industry');
-  useEffect(() => {
-    const selected = industries.find(industry => industry.value === selectedIndustry);
-    console.log("selected",selected)
-    if (selected) {
-      setSelectedCategory(selected.category);
-    }
-  }, [selectedIndustry, industries]);
-
   const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
-    console.log("event",event)
     const { name, value } = event.target;
     updateFormBisnis(name, value);
     validateFormBisnis();
@@ -156,11 +148,10 @@ const FormBisnis: React.FC<FormProps> = ({ type, required }) => {
         break;
     }
   };
-
   return (
     <form className="mt-6 grid grid-cols-1 gap-y-4" onSubmit={handleSubmit}>
       <div>
-        <label htmlFor='email' className="font-bold">Email Bisnis</label>
+        <label htmlFor='email' className="font-bold">Email Bisnis {!isPKP && !required && <span className='font-normal text-gray_r-11'>(opsional)</span>}</label>
 
         <input
           type='text'
@@ -174,39 +165,45 @@ const FormBisnis: React.FC<FormProps> = ({ type, required }) => {
           readOnly={required}
           onChange={handleInputChange}
           autoComplete="username"
-          aria-invalid={!required && !!errors.email_partner}
+          aria-invalid={!required && isPKP && !!errors.email_partner}
 
         />
 
-        {!required && !!errors.email_partner && <span className="form-msg-danger">{errors.email_partner}</span>}
+        {!required && isPKP && !!errors.email_partner && <span className="form-msg-danger">{errors.email_partner}</span>}
       </div>
 
       <div>
         <label className="font-bold" htmlFor="company">
-          Nama Bisnis
+          Nama Bisnis 
         </label>
-        <div className="flex justify-between items-center gap-2 h-12">
+        <div className="flex justify-between items-start gap-2 h-12">
           <div className='w-4/5 pr-1'>
             <Controller
               name='companyType'
               control={control}
               render={(props) => <HookFormSelect {...props} options={companyTypes} disabled={required} placeholder="Badan Usaha"/>}
-            />
+              />
+              {!required && selectedCompanyId === '' && <span className="form-msg-danger">{errors.companyType}</span>}
+          </div>
+          <div className="w-[120%]">
+            <input
+              type="text"
+              name="business_name"
+              id="business_name"
+              className="form-input h-full "
+              placeholder="Nama Perusahaan"
+              autoCapitalize="true"
+              value={formBisnis.business_name}
+              aria-invalid={!!errors.business_name}
+              onChange={handleInputChange}
+              />
+
+            { !!errors.business_name && <span className="form-msg-danger">{errors.business_name}</span>}
           </div>
-          <input
-            type="text"
-            name="business_name"
-            id="business_name"
-            className="form-input h-full w-[120%]"
-            placeholder="Nama Perusahaan"
-            autoCapitalize="true"
-            value={formBisnis.business_name}
-            onChange={handleInputChange}
-          />
         </div>
       </div>
 
-      <div className="">
+      <div className="mt-8 sm:mt-8">
         <label className="font-bold" htmlFor="business_name">
           Klasifikasi Jenis Usaha
         </label>
@@ -214,12 +211,15 @@ const FormBisnis: React.FC<FormProps> = ({ type, required }) => {
           name='industry'
           control={control}
           render={(props) => <HookFormSelect {...props} options={industries} disabled={required} placeholder={'Select industry'}/>}
-        />
-        <span className='text-gray_r-11 text-xs'>Kategori : {selectedCategory}</span>
+          />
+          {selectedCategory && 
+            <span className='text-gray_r-11 text-xs'>Kategori : {selectedCategory}</span>
+          }
+          {!required && selectedCategory === '' && <span className="form-msg-danger">{errors.industry}</span>}
       </div>
 
       <div>
-        <label htmlFor='nama_wajib_pajak' className="font-bold">Nama Wajib Pajak</label>
+        <label htmlFor='nama_wajib_pajak' className="font-bold">Nama Wajib Pajak {!isPKP && !required && <span className='font-normal text-gray_r-11'>(opsional)</span>}</label>
 
         <input
           type='text'
@@ -232,14 +232,14 @@ const FormBisnis: React.FC<FormProps> = ({ type, required }) => {
           contentEditable={required}
           readOnly={required}
           onChange={handleInputChange}
-          aria-invalid={!required && !!errors.nama_wajib_pajak}
+          aria-invalid={isPKP && !required && !!errors.nama_wajib_pajak}
         />
 
-        {!required && !!errors.nama_wajib_pajak && <span className="form-msg-danger">{errors.nama_wajib_pajak}</span>}
+        {isPKP && !required && !!errors.nama_wajib_pajak && <span className="form-msg-danger">{errors.nama_wajib_pajak}</span>}
       </div>
 
       <div>
-        <label htmlFor='npwp' className="font-bold">Nomor NPWP</label>
+        <label htmlFor='npwp' className="font-bold">Nomor NPWP {!isPKP && !required && <span className='font-normal text-gray_r-11'>(opsional)</span>}</label>
 
         <input
           type='tel'
@@ -252,14 +252,14 @@ const FormBisnis: React.FC<FormProps> = ({ type, required }) => {
           placeholder='000.000.000.0-000.000'
           value={!required ? formBisnis.npwp : ''}
           onChange={handleInputChange}
-          aria-invalid={!required && !!errors.npwp}
+          aria-invalid={isPKP && !required && !!errors.npwp}
         />
 
-        {!required && !!errors.npwp && <span className="form-msg-danger">{errors.npwp}</span>}
+        {isPKP && !required && !!errors.npwp && <span className="form-msg-danger">{errors.npwp}</span>}
       </div>
 
       <div>
-        <label htmlFor="npwp_document" className="font-bold">Dokumen NPWP</label>
+        <label htmlFor="npwp_document" className="font-bold">Dokumen NPWP {!isPKP && !required && <span className='font-normal text-gray_r-11'>(opsional)</span>}</label>
 
         <input
           type="file"
@@ -273,11 +273,11 @@ const FormBisnis: React.FC<FormProps> = ({ type, required }) => {
           accept=".pdf,.doc,.docx,.png,.jpg,.jpeg"  // Filter file types
         />
 
-        {!required && !!errors.npwp_document && <span className="form-msg-danger">{errors.npwp_document}</span>}
+        {isPKP && !required && !!errors.npwp_document && <span className="form-msg-danger">{errors.npwp_document}</span>}
       </div>
 
       <div>
-        <label htmlFor="sppkp_document" className="font-bold">Dokumen SPPKP</label>
+        <label htmlFor="sppkp_document" className="font-bold">Dokumen SPPKP {!isPKP && !required && <span className='font-normal text-gray_r-11'>(opsional)</span>}</label>
 
         <input
           type="file"
@@ -291,7 +291,7 @@ const FormBisnis: React.FC<FormProps> = ({ type, required }) => {
           accept=".pdf,.doc,.docx,.png,.jpg,.jpeg"  // Filter file types
         />
 
-        {!required && !!errors.sppkp_document && <span className="form-msg-danger">{errors.sppkp_document}</span>}
+        {isPKP && !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 235e158a..55180297 100644
--- a/src-migrate/modules/register/components/RegistrasiBisnis.tsx
+++ b/src-migrate/modules/register/components/RegistrasiBisnis.tsx
@@ -23,6 +23,7 @@ const RegistrasiBisnis = () => {
   const [isPKP, setIsPKP] = useState(true);
   const [isTerdaftar, setIsTerdaftar] = useState(false);
   const [isIndividuRequired, setIsIndividuRequired] = useState(true);
+  const [isDropIndividu, setIsDropIndividu] = useState(true);
   const [isBisnisClicked, setisBisnisClicked] = useState(true);
   const [selectedValue, setSelectedValue] = useState('PKP');
   const [selectedValueBisnis, setSelectedValueBisnis] = useState('false');
@@ -53,14 +54,16 @@ const RegistrasiBisnis = () => {
     }
   }, [selectedValue,]);
 
-  const handleChange = (value: string) => {
+  const   handleChange = (value: string) => {
     setSelectedValue(value);
     if (value === "PKP") {
       validateFormBisnis();
-      setIsIndividuRequired(true); // Show and require Individu form
+      setIsIndividuRequired(true);
+      setIsPKP(true);
     } else {
       setIsPKP(false);
       setIsIndividuRequired(false); // Hide and make optional the Individu form
+      setIsPKP(false);
     }
   };
 
@@ -74,7 +77,7 @@ const RegistrasiBisnis = () => {
   };
 
   const handleClick = () => {
-    setIsIndividuRequired(!isIndividuRequired)
+    setIsDropIndividu(!isDropIndividu)
   };
 
   const handleClickBisnis = () => {
@@ -87,22 +90,14 @@ const RegistrasiBisnis = () => {
   };
   return (
     <>
-      <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>
+      
       <div className="mt-4 border">
         <div className="p-4">
           <div onClick={handleClick} className="flex justify-between">
           <p className="text-2xl font-semibold text-center md:text-left">
               Data Akun
             </p>
-            {isIndividuRequired ? (
+            {isDropIndividu ? (
               <div className="flex">
                 <ChevronDownIcon onClick={handleClick} className='h-6 w-6 text-black' />
               </div>
@@ -110,10 +105,10 @@ const RegistrasiBisnis = () => {
               <ChevronRightIcon onClick={handleClick} className='h-6 w-6 text-black' />
             )}
           </div>
-          {isIndividuRequired && (
+          {isDropIndividu && (
             <div>
               <Divider  my={4} />
-              <Form type="bisnis" required={isIndividuRequired} />
+              <Form type="bisnis" required={true} isPKP={isPKP} />
             </div>
           )}
         </div>
@@ -144,7 +139,16 @@ const RegistrasiBisnis = () => {
                   </Stack>
                 </RadioGroup>
               </div>
-              <FormBisnis type="bisnis" required={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} isPKP={isPKP} />
             </div>
           )}
         </div>