<iman> update new field register

2 files changed, 82 insertions, 3 deletions

diff --git a/src-migrate/modules/register/components/FormBisnis.tsx b/src-migrate/modules/register/components/FormBisnis.tsx
index 1d0c930f..3b8fdbfc 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, color, useToast } from "@chakra-ui/react";
+import { Checkbox, 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'
@@ -38,6 +38,7 @@ const form: React.FC<FormProps> = ({ type, required, isPKP }) => {
   } = useRegisterStore()
   const { control, watch, setValue } = useForm();
   const [selectedCategory, setSelectedCategory] = useState<string>('');
+  const [isChekBox, setIsChekBox] = useState<boolean>(false);
 
   const [industries, setIndustries] = useState<industry_id[]>([]);
   const [companyTypes, setCompanyTypes] = useState<companyType[]>([]);
@@ -86,6 +87,20 @@ const form: React.FC<FormProps> = ({ type, required, isPKP }) => {
     validate();
   };
 
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+    setIsChekBox(!isChekBox)
+  };
+
+  useEffect(() => {
+    if (isChekBox) {
+      updateForm("isChekBox", 'true');
+      validate();
+    } else {
+      updateForm("isChekBox", 'false');
+      validate();
+    }
+  }, [isChekBox,]);
+
   const handleFileChange = async (event: ChangeEvent<HTMLInputElement>) => {
 
     const toastProps: UseToastOptions = {
@@ -225,6 +240,26 @@ const form: React.FC<FormProps> = ({ type, required, isPKP }) => {
       </div>
 
       <div>
+        <label htmlFor='alamat_bisnis' className="font-bold">Alamat Bisnis</label>
+
+        <input
+          type='text'
+          id='alamat_bisnis'
+          name='alamat_bisnis'
+          placeholder='Masukan alamat bisnis anda'
+          value={!required? form.alamat_bisnis : ''}
+          className={`form-input mt-3 ${required ? 'cursor-no-drop' : ''}`}
+          disabled={required}
+          contentEditable={required}
+          readOnly={required}
+          onChange={handleInputChange}
+          aria-invalid={!required && !!errors.alamat_bisnis}
+        />
+
+        {!required && !!errors.alamat_bisnis && <span className="form-msg-danger">{errors.alamat_bisnis}</span>}
+      </div>
+
+      <div>
         <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
@@ -245,6 +280,42 @@ const form: React.FC<FormProps> = ({ type, required, isPKP }) => {
       </div>
 
       <div>
+        <label htmlFor='alamat_wajib_pajak' className="font-bold flex items-center">
+          <p>
+          Alamat Wajib Pajak {!isPKP && !required && <span className='font-normal text-gray_r-11'>(opsional)</span>}
+          </p>  
+          <div className="flex items-center ml-2 mt-1">
+          <Checkbox
+                borderColor='gray.600'
+                colorScheme='red'
+                size='md'
+                isChecked={isChekBox}
+                onChange={handleChange}
+              />
+              <span className='text-caption-2 ml-2 font-normal italic'>
+                sama dengan alamat bisnis? 
+              </span>
+          </div> 
+              </label>
+
+        <input
+          type='text'
+          id='alamat_wajib_pajak'
+          name='alamat_wajib_pajak'
+          placeholder='Masukan alamat wajib pajak anda'
+          value={!required? (isChekBox?form.alamat_bisnis : form.alamat_wajib_pajak)  : ''}
+          className={`form-input mt-3 ${required ? 'cursor-no-drop' : ''}`}
+          disabled={isChekBox || required}
+          contentEditable={required}
+          readOnly={required}
+          onChange={handleInputChange}
+          aria-invalid={isPKP && !required && !!errors.alamat_wajib_pajak}
+        />
+
+        {isPKP && !required && !!errors.alamat_wajib_pajak && <span className="form-msg-danger">{errors.alamat_wajib_pajak}</span>}
+      </div>
+
+      <div>
         <label htmlFor='npwp' className="font-bold">Nomor NPWP {!isPKP && !required && <span className='font-normal text-gray_r-11'>(opsional)</span>}</label>
 
         <input
diff --git a/src-migrate/modules/register/components/RegistrasiBisnis.tsx b/src-migrate/modules/register/components/RegistrasiBisnis.tsx
index 443ff0a0..1d8317f1 100644
--- a/src-migrate/modules/register/components/RegistrasiBisnis.tsx
+++ b/src-migrate/modules/register/components/RegistrasiBisnis.tsx
@@ -48,6 +48,16 @@ const RegistrasiBisnis = () => {
       validate();
     }
   }, [selectedValue,]);
+  
+  useEffect(() => {
+    if (isTerdaftar) {
+      updateForm("is_terdaftar", 'true');
+      validate();
+    } else {
+      updateForm("is_terdaftar", 'false');
+      validate();
+    }
+  }, [isTerdaftar,]);
 
   const   handleChange = (value: string) => {
     setSelectedValue(value);
@@ -65,11 +75,9 @@ const RegistrasiBisnis = () => {
     setSelectedValueBisnis(value);
     if (value === "true") {
       validate();
-      updateForm('is_terdaftar','true')
       setIsTerdaftar(true);
     } else {
       validate();
-      updateForm('is_terdaftar','false')
       setIsTerdaftar(false);
     }
   };