From 00df44e6f25eaeabc56ebba8b4e9b1cb692928d7 Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Tue, 20 Aug 2024 10:27:32 +0700
Subject: <iman> add new register

---
 .../modules/register/components/FormBisnis.tsx     | 230 +++++++++++++++++++++
 1 file changed, 230 insertions(+)
 create mode 100644 src-migrate/modules/register/components/FormBisnis.tsx

(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
new file mode 100644
index 00000000..85e37875
--- /dev/null
+++ b/src-migrate/modules/register/components/FormBisnis.tsx
@@ -0,0 +1,230 @@
+import { ChangeEvent, useMemo } from "react";
+import { useMutation } from "react-query";
+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 Link from "next/link";
+import getFileBase64 from '@/core/utils/getFileBase64'
+
+interface FormProps {
+  type: string;
+  required: boolean;
+}
+
+const Form: React.FC<FormProps> = ({ type, required }) => {
+  const {
+    form,
+    isCheckedTNC,
+    isValidCaptcha,
+    errors,
+    updateForm,
+    validate,
+  } = useRegisterStore()
+
+  const isFormValid = useMemo(() => Object.keys(errors).length === 0, [errors])
+
+  const router = useRouter()
+  const toast = useToast()
+
+  const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = event.target;
+    updateForm(name, value)
+    validate()
+  }
+
+  const handleFileChange = async (event: ChangeEvent<HTMLInputElement>) => {
+    let fileBase64 = ''
+    const file = event.target.files?.[0];
+    if (file) {
+      if (typeof file !== 'undefined') {
+        if (file.size > 5000000) {
+          // toast.error('Maksimal ukuran file adalah 5MB')
+          return
+        }
+        fileBase64 = await getFileBase64(file)
+      }
+      updateForm("document", fileBase64);  // Menyimpan file ke dalam form state
+      validate();
+    }
+  }
+
+  const mutation = useMutation({
+    mutationFn: (data: RegisterProps) => registerUser(data)
+  })
+
+  const handleSubmit = async (e: ChangeEvent<HTMLFormElement>) => {
+    e.preventDefault()
+
+    const response = await mutation.mutateAsync(form)
+
+    if (response?.register === true) {
+      const urlParams = new URLSearchParams({
+        activation: 'otp',
+        email: form.email,
+        redirect: (router.query?.next || '/') as string
+      })
+      router.push(`${router.route}?${urlParams}`)
+    }
+
+    const toastProps: UseToastOptions = {
+      duration: 5000,
+      isClosable: true
+    }
+
+    switch (response?.reason) {
+      case 'EMAIL_USED':
+        toast({
+          ...toastProps,
+          title: 'Email sudah digunakan',
+          status: 'warning'
+        })
+        break;
+      case 'NOT_ACTIVE':
+        const activationUrl = `${router.route}?activation=email`
+        toast({
+          ...toastProps,
+          title: 'Akun belum aktif',
+          description: <>Akun sudah terdaftar namun belum aktif. <Link href={activationUrl} className="underline">Klik untuk aktivasi akun</Link></>,
+          status: 'warning'
+        })
+        break
+    }
+  }
+
+
+  return (
+    <form className="mt-6 grid grid-cols-1 gap-y-4" onSubmit={handleSubmit}>
+      <div>
+        <label htmlFor='email'>Email Bisnis</label>
+
+        <input
+          type='text'
+          id='email'
+          name='email'
+          className='form-input mt-3'
+          placeholder='example@email.com'
+          value={form.email}
+          onChange={handleInputChange}
+          autoComplete="username"
+          aria-invalid={!!errors.email}
+        />
+
+        {!!errors.email && <span className="form-msg-danger">{errors.email}</span>}
+      </div>
+
+      <div>
+        <label htmlFor="company">
+          Nama Bisnis <span className='text-gray_r-11'>(opsional)</span>
+        </label>
+        <div className="flex justify-between items-center gap-2 h-12">
+          <select
+          className="w-3/4 border h-full rounded-sm"
+          >
+            <option value=''>Pilih Site</option>
+          </select>
+
+          <input
+            type="text"
+            name="company"
+            id="company"
+            className="form-input h-full w-[120%]"
+            placeholder="Nama Perusahaan"
+            autoCapitalize="true"
+            value={form.company}
+            onChange={handleInputChange}
+          />
+        </div>
+      </div>
+
+      <div>
+        <label htmlFor="company">
+          Klasifikasi Jenis Usaha <span className='text-gray_r-11'>(opsional)</span>
+        </label>
+        <div className="flex justify-between flex-col items-center h-12">
+          <select
+          className="w-full border h-full rounded-sm"
+          >
+            <option value=''>After Market Auto Shop</option>
+          </select>
+        </div>
+          <span className='text-gray_r-11 text-xs'>Kategori: Industri Otomotif, Bengkel, Car Wash</span>
+      </div>
+
+      <div>
+        <label htmlFor='name'>Nama Wajib Pajak</label>
+
+        <input
+          type='text'
+          id='name'
+          name='name'
+          className='form-input mt-3'
+          placeholder='Masukan nama lengkap anda'
+          value={form.name}
+          onChange={handleInputChange}
+          aria-invalid={!!errors.name}
+        />
+
+        {!!errors.name && <span className="form-msg-danger">{errors.name}</span>}
+      </div>
+
+      <div>
+        <label htmlFor='phone'>Nomor NPWP</label>
+
+        <input
+          type='tel'
+          id='phone'
+          name='phone'
+          className='form-input mt-3'
+          placeholder='08xxxxxxxx'
+          value={form.phone}
+          onChange={handleInputChange}
+          aria-invalid={!!errors.phone}
+        />
+
+        {!!errors.phone && <span className="form-msg-danger">{errors.phone}</span>}
+      </div>
+
+      <div>
+        <label htmlFor="document">Dokumen NPWP (opsional)</label>
+
+        <input
+          type="file"
+          id="document"
+          name="document"
+          className="form-input mt-3"
+          onChange={handleFileChange}
+          accept=".pdf,.doc,.docx,.png,.jpg,.jpeg"  // Filter file types
+        />
+
+        {/* {!!errors.document && <span className="form-msg-danger">{errors.document}</span>} */}
+      </div>
+
+      <div>
+        <label htmlFor="document">Dokumen SPPKP (opsional)</label>
+
+        <input
+          type="file"
+          id="document"
+          name="document"
+          className="form-input mt-3"
+          onChange={handleFileChange}
+          accept=".pdf,.doc,.docx,.png,.jpg,.jpeg"  // Filter file types
+        />
+
+        {/* {!!errors.document && <span className="form-msg-danger">{errors.document}</span>} */}
+      </div>
+
+      <button
+        type="submit"
+        className="btn-yellow w-full mt-2"
+        disabled={!isFormValid || !isCheckedTNC || mutation.isLoading || !isValidCaptcha}
+      >
+        {mutation.isLoading ? 'Loading...' : 'Daftar'}
+      </button>
+    </form>
+  )
+}
+
+export default Form
\ No newline at end of file
-- 
cgit v1.2.3


From cf0f7a934bcf256d1daeee98e9f66397fb64b1ee Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Tue, 20 Aug 2024 11:47:29 +0700
Subject: <iman> update new register

---
 .../modules/register/components/FormBisnis.tsx     | 98 +++++++++++++++-------
 1 file changed, 68 insertions(+), 30 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 85e37875..6f94748b 100644
--- a/src-migrate/modules/register/components/FormBisnis.tsx
+++ b/src-migrate/modules/register/components/FormBisnis.tsx
@@ -1,4 +1,4 @@
-import { ChangeEvent, useMemo } from "react";
+import { ChangeEvent, useEffect, useMemo, useState } from "react";
 import { useMutation } from "react-query";
 import { useRegisterStore } from "../stores/useRegisterStore";
 import { RegisterProps } from "~/types/auth";
@@ -7,12 +7,21 @@ import { useRouter } from "next/router";
 import { UseToastOptions, useToast } from "@chakra-ui/react";
 import Link from "next/link";
 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";
 
 interface FormProps {
   type: string;
   required: boolean;
 }
 
+interface Industry {
+  label: string;
+  value: string;
+  category: string;
+}
+
 const Form: React.FC<FormProps> = ({ type, required }) => {
   const {
     form,
@@ -23,11 +32,42 @@ const Form: React.FC<FormProps> = ({ type, required }) => {
     validate,
   } = useRegisterStore()
 
+  const { control, watch, setValue } = useForm();
+  const [selectedCategory, setSelectedCategory] = useState<string>('');
+
+  const [industries, setIndustries] = useState<Industry[]>([]);
+  const [companyTypes, setCompanyTypes] = useState([])
   const isFormValid = useMemo(() => Object.keys(errors).length === 0, [errors])
 
   const router = useRouter()
   const toast = useToast()
 
+  useEffect(() => {
+    const loadCompanyTypes = async () => {
+      const dataCompanyTypes = await odooApi('GET', '/api/v1/partner/company_type')
+      setCompanyTypes(dataCompanyTypes?.map((o: { id: any; name: any; }) => ({ value: o.id, label: o.name })))
+    }
+    loadCompanyTypes()
+  }, [])
+
+  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 })))
+    }
+    loadIndustries()
+  }, [])
+
+  const selectedIndustry = watch('industry');
+
+  useEffect(() => {
+    const selected = industries.find(industry => industry.value === selectedIndustry);
+    if (selected) {
+      setSelectedCategory(selected.category);
+    }
+  }, [selectedIndustry, industries]);
+
+
   const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
     const { name, value } = event.target;
     updateForm(name, value)
@@ -93,7 +133,6 @@ const Form: React.FC<FormProps> = ({ type, required }) => {
     }
   }
 
-
   return (
     <form className="mt-6 grid grid-cols-1 gap-y-4" onSubmit={handleSubmit}>
       <div>
@@ -119,37 +158,36 @@ const Form: React.FC<FormProps> = ({ type, required }) => {
           Nama Bisnis <span className='text-gray_r-11'>(opsional)</span>
         </label>
         <div className="flex justify-between items-center gap-2 h-12">
-          <select
-          className="w-3/4 border h-full rounded-sm"
-          >
-            <option value=''>Pilih Site</option>
-          </select>
-
-          <input
-            type="text"
-            name="company"
-            id="company"
-            className="form-input h-full w-[120%]"
-            placeholder="Nama Perusahaan"
-            autoCapitalize="true"
-            value={form.company}
-            onChange={handleInputChange}
-          />
-        </div>
+            <div className='w-4/5 pr-1'>
+                <Controller
+                  name='companyType'
+                  control={control}
+                  render={(props) => <HookFormSelect {...props} options={companyTypes} placeholder="Badan Usaha"/>}
+                />
+            </div>
+            <input
+                type="text"
+                name="company"
+                id="company"
+                className="form-input h-full w-[120%]"
+                placeholder="Nama Perusahaan"
+                autoCapitalize="true"
+                value={form.company}
+                onChange={handleInputChange}
+              />
+            </div>
       </div>
 
-      <div>
+      <div className="">
         <label htmlFor="company">
           Klasifikasi Jenis Usaha <span className='text-gray_r-11'>(opsional)</span>
         </label>
-        <div className="flex justify-between flex-col items-center h-12">
-          <select
-          className="w-full border h-full rounded-sm"
-          >
-            <option value=''>After Market Auto Shop</option>
-          </select>
-        </div>
-          <span className='text-gray_r-11 text-xs'>Kategori: Industri Otomotif, Bengkel, Car Wash</span>
+              <Controller
+                name='industry'
+                control={control}
+                render={(props) => <HookFormSelect {...props} options={industries} placeholder={'Select industry'}/>}
+              />
+          <span className='text-gray_r-11 text-xs'>Kategori : {selectedCategory}</span>
       </div>
 
       <div>
@@ -216,13 +254,13 @@ const Form: React.FC<FormProps> = ({ type, required }) => {
         {/* {!!errors.document && <span className="form-msg-danger">{errors.document}</span>} */}
       </div>
 
-      <button
+      {/* <button
         type="submit"
         className="btn-yellow w-full mt-2"
         disabled={!isFormValid || !isCheckedTNC || mutation.isLoading || !isValidCaptcha}
       >
         {mutation.isLoading ? 'Loading...' : 'Daftar'}
-      </button>
+      </button> */}
     </form>
   )
 }
-- 
cgit v1.2.3


From 1d3f68f4a61bb084938523dea2869087f915bf61 Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Tue, 20 Aug 2024 15:21:31 +0700
Subject: <iman> update new register

---
 .../modules/register/components/FormBisnis.tsx     | 135 ++++++++++-----------
 1 file changed, 67 insertions(+), 68 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 6f94748b..72921c2b 100644
--- a/src-migrate/modules/register/components/FormBisnis.tsx
+++ b/src-migrate/modules/register/components/FormBisnis.tsx
@@ -22,41 +22,41 @@ interface Industry {
   category: string;
 }
 
-const Form: React.FC<FormProps> = ({ type, required }) => {
+const FormBisnis: React.FC<FormProps> = ({ type, required }) => {
   const {
-    form,
+    formBisnis,
     isCheckedTNC,
     isValidCaptcha,
     errors,
-    updateForm,
-    validate,
+    updateFormBisnis,
+    validateFormBisnis,
   } = useRegisterStore()
 
   const { control, watch, setValue } = useForm();
   const [selectedCategory, setSelectedCategory] = useState<string>('');
 
   const [industries, setIndustries] = useState<Industry[]>([]);
-  const [companyTypes, setCompanyTypes] = useState([])
-  const isFormValid = useMemo(() => Object.keys(errors).length === 0, [errors])
+  const [companyTypes, setCompanyTypes] = useState([]);
+  const isFormValid = useMemo(() => Object.keys(errors).length === 0, [errors]);
 
-  const router = useRouter()
-  const toast = useToast()
+  const router = useRouter();
+  const toast = useToast();
 
   useEffect(() => {
     const loadCompanyTypes = async () => {
-      const dataCompanyTypes = await odooApi('GET', '/api/v1/partner/company_type')
-      setCompanyTypes(dataCompanyTypes?.map((o: { id: any; name: any; }) => ({ value: o.id, label: o.name })))
-    }
-    loadCompanyTypes()
-  }, [])
+      const dataCompanyTypes = await odooApi('GET', '/api/v1/partner/company_type');
+      setCompanyTypes(dataCompanyTypes?.map((o: { id: any; name: any; }) => ({ value: o.id, label: o.name })));
+    };
+    loadCompanyTypes();
+  }, []);
 
   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 })))
-    }
-    loadIndustries()
-  }, [])
+      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 })));
+    };
+    loadIndustries();
+  }, []);
 
   const selectedIndustry = watch('industry');
 
@@ -67,51 +67,50 @@ const Form: React.FC<FormProps> = ({ type, required }) => {
     }
   }, [selectedIndustry, industries]);
 
-
   const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
     const { name, value } = event.target;
-    updateForm(name, value)
-    validate()
-  }
+    updateFormBisnis(name, value);
+    validateFormBisnis();
+  };
 
   const handleFileChange = async (event: ChangeEvent<HTMLInputElement>) => {
-    let fileBase64 = ''
+    let fileBase64 = '';
     const file = event.target.files?.[0];
     if (file) {
       if (typeof file !== 'undefined') {
         if (file.size > 5000000) {
           // toast.error('Maksimal ukuran file adalah 5MB')
-          return
+          return;
         }
-        fileBase64 = await getFileBase64(file)
+        fileBase64 = await getFileBase64(file);
       }
-      updateForm("document", fileBase64);  // Menyimpan file ke dalam form state
-      validate();
+      updateFormBisnis("document", fileBase64);  // Menyimpan file ke dalam formBisnis state
+      validateFormBisnis();
     }
-  }
+  };
 
   const mutation = useMutation({
     mutationFn: (data: RegisterProps) => registerUser(data)
-  })
+  });
 
   const handleSubmit = async (e: ChangeEvent<HTMLFormElement>) => {
-    e.preventDefault()
+    e.preventDefault();
 
-    const response = await mutation.mutateAsync(form)
+    const response = await mutation.mutateAsync(formBisnis);
 
     if (response?.register === true) {
       const urlParams = new URLSearchParams({
         activation: 'otp',
-        email: form.email,
+        email: formBisnis.email,
         redirect: (router.query?.next || '/') as string
-      })
-      router.push(`${router.route}?${urlParams}`)
+      });
+      router.push(`${router.route}?${urlParams}`);
     }
 
     const toastProps: UseToastOptions = {
       duration: 5000,
       isClosable: true
-    }
+    };
 
     switch (response?.reason) {
       case 'EMAIL_USED':
@@ -119,19 +118,19 @@ const Form: React.FC<FormProps> = ({ type, required }) => {
           ...toastProps,
           title: 'Email sudah digunakan',
           status: 'warning'
-        })
+        });
         break;
       case 'NOT_ACTIVE':
-        const activationUrl = `${router.route}?activation=email`
+        const activationUrl = `${router.route}?activation=email`;
         toast({
           ...toastProps,
           title: 'Akun belum aktif',
           description: <>Akun sudah terdaftar namun belum aktif. <Link href={activationUrl} className="underline">Klik untuk aktivasi akun</Link></>,
           status: 'warning'
-        })
-        break
+        });
+        break;
     }
-  }
+  };
 
   return (
     <form className="mt-6 grid grid-cols-1 gap-y-4" onSubmit={handleSubmit}>
@@ -144,7 +143,7 @@ const Form: React.FC<FormProps> = ({ type, required }) => {
           name='email'
           className='form-input mt-3'
           placeholder='example@email.com'
-          value={form.email}
+          value={formBisnis.email}
           onChange={handleInputChange}
           autoComplete="username"
           aria-invalid={!!errors.email}
@@ -158,36 +157,36 @@ const Form: React.FC<FormProps> = ({ type, required }) => {
           Nama Bisnis <span className='text-gray_r-11'>(opsional)</span>
         </label>
         <div className="flex justify-between items-center gap-2 h-12">
-            <div className='w-4/5 pr-1'>
-                <Controller
-                  name='companyType'
-                  control={control}
-                  render={(props) => <HookFormSelect {...props} options={companyTypes} placeholder="Badan Usaha"/>}
-                />
-            </div>
-            <input
-                type="text"
-                name="company"
-                id="company"
-                className="form-input h-full w-[120%]"
-                placeholder="Nama Perusahaan"
-                autoCapitalize="true"
-                value={form.company}
-                onChange={handleInputChange}
-              />
-            </div>
+          <div className='w-4/5 pr-1'>
+            <Controller
+              name='companyType'
+              control={control}
+              render={(props) => <HookFormSelect {...props} options={companyTypes} placeholder="Badan Usaha"/>}
+            />
+          </div>
+          <input
+            type="text"
+            name="company"
+            id="company"
+            className="form-input h-full w-[120%]"
+            placeholder="Nama Perusahaan"
+            autoCapitalize="true"
+            value={formBisnis.company}
+            onChange={handleInputChange}
+          />
+        </div>
       </div>
 
       <div className="">
         <label htmlFor="company">
           Klasifikasi Jenis Usaha <span className='text-gray_r-11'>(opsional)</span>
         </label>
-              <Controller
-                name='industry'
-                control={control}
-                render={(props) => <HookFormSelect {...props} options={industries} placeholder={'Select industry'}/>}
-              />
-          <span className='text-gray_r-11 text-xs'>Kategori : {selectedCategory}</span>
+        <Controller
+          name='industry'
+          control={control}
+          render={(props) => <HookFormSelect {...props} options={industries} placeholder={'Select industry'}/>}
+        />
+        <span className='text-gray_r-11 text-xs'>Kategori : {selectedCategory}</span>
       </div>
 
       <div>
@@ -199,7 +198,7 @@ const Form: React.FC<FormProps> = ({ type, required }) => {
           name='name'
           className='form-input mt-3'
           placeholder='Masukan nama lengkap anda'
-          value={form.name}
+          value={formBisnis.name}
           onChange={handleInputChange}
           aria-invalid={!!errors.name}
         />
@@ -216,7 +215,7 @@ const Form: React.FC<FormProps> = ({ type, required }) => {
           name='phone'
           className='form-input mt-3'
           placeholder='08xxxxxxxx'
-          value={form.phone}
+          value={formBisnis.phone}
           onChange={handleInputChange}
           aria-invalid={!!errors.phone}
         />
@@ -265,4 +264,4 @@ const Form: React.FC<FormProps> = ({ type, required }) => {
   )
 }
 
-export default Form
\ No newline at end of file
+export default FormBisnis;
-- 
cgit v1.2.3


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

---
 .../modules/register/components/FormBisnis.tsx      | 21 +++++++++++----------
 1 file changed, 11 insertions(+), 10 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 72921c2b..7b301dc5 100644
--- a/src-migrate/modules/register/components/FormBisnis.tsx
+++ b/src-migrate/modules/register/components/FormBisnis.tsx
@@ -59,15 +59,16 @@ const FormBisnis: React.FC<FormProps> = ({ type, required }) => {
   }, []);
 
   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();
@@ -135,7 +136,7 @@ const FormBisnis: React.FC<FormProps> = ({ type, required }) => {
   return (
     <form className="mt-6 grid grid-cols-1 gap-y-4" onSubmit={handleSubmit}>
       <div>
-        <label htmlFor='email'>Email Bisnis</label>
+        <label htmlFor='email' className="font-bold">Email Bisnis</label>
 
         <input
           type='text'
@@ -153,8 +154,8 @@ const FormBisnis: React.FC<FormProps> = ({ type, required }) => {
       </div>
 
       <div>
-        <label htmlFor="company">
-          Nama Bisnis <span className='text-gray_r-11'>(opsional)</span>
+        <label className="font-bold" htmlFor="company">
+          Nama Bisnis
         </label>
         <div className="flex justify-between items-center gap-2 h-12">
           <div className='w-4/5 pr-1'>
@@ -178,8 +179,8 @@ const FormBisnis: React.FC<FormProps> = ({ type, required }) => {
       </div>
 
       <div className="">
-        <label htmlFor="company">
-          Klasifikasi Jenis Usaha <span className='text-gray_r-11'>(opsional)</span>
+        <label className="font-bold" htmlFor="company">
+          Klasifikasi Jenis Usaha
         </label>
         <Controller
           name='industry'
@@ -190,7 +191,7 @@ const FormBisnis: React.FC<FormProps> = ({ type, required }) => {
       </div>
 
       <div>
-        <label htmlFor='name'>Nama Wajib Pajak</label>
+        <label htmlFor='name' className="font-bold">Nama Wajib Pajak</label>
 
         <input
           type='text'
@@ -207,7 +208,7 @@ const FormBisnis: React.FC<FormProps> = ({ type, required }) => {
       </div>
 
       <div>
-        <label htmlFor='phone'>Nomor NPWP</label>
+        <label htmlFor='phone' className="font-bold">Nomor NPWP</label>
 
         <input
           type='tel'
@@ -224,7 +225,7 @@ const FormBisnis: React.FC<FormProps> = ({ type, required }) => {
       </div>
 
       <div>
-        <label htmlFor="document">Dokumen NPWP (opsional)</label>
+        <label htmlFor="document" className="font-bold">Dokumen NPWP</label>
 
         <input
           type="file"
@@ -239,7 +240,7 @@ const FormBisnis: React.FC<FormProps> = ({ type, required }) => {
       </div>
 
       <div>
-        <label htmlFor="document">Dokumen SPPKP (opsional)</label>
+        <label htmlFor="document" className="font-bold">Dokumen SPPKP</label>
 
         <input
           type="file"
-- 
cgit v1.2.3


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


From 6623dba2f6cd4a4ca7b25f7086991afef092cd26 Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Thu, 22 Aug 2024 15:48:00 +0700
Subject: <iman> update new register view

---
 .../modules/register/components/FormBisnis.tsx     | 88 +++++++++++-----------
 1 file changed, 44 insertions(+), 44 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 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
-- 
cgit v1.2.3


From fb346e50e06ed68508662ca3d004db2c2cc117eb Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Thu, 22 Aug 2024 16:48:03 +0700
Subject: <iman> update new register

---
 src-migrate/modules/register/components/FormBisnis.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

(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 8b666ad7..932083df 100644
--- a/src-migrate/modules/register/components/FormBisnis.tsx
+++ b/src-migrate/modules/register/components/FormBisnis.tsx
@@ -37,7 +37,7 @@ const FormBisnis: React.FC<FormProps> = ({ type, required, isPKP }) => {
     updateFormBisnis,
     validateFormBisnis,
   } = useRegisterStore()
-
+  console.log("errors bisnis",errors)
   const { control, watch, setValue } = useForm();
   const [selectedCategory, setSelectedCategory] = useState<string>('');
   const [selectedCompanyId, setSelectedCompanyId] = useState<string>('');
@@ -86,6 +86,10 @@ const FormBisnis: React.FC<FormProps> = ({ type, required, isPKP }) => {
   const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
     const { name, value } = event.target;
     updateFormBisnis(name, value);
+    updateFormBisnis('name','iman');
+    updateFormBisnis('email','it@fixcomart.co.id');
+    updateFormBisnis('password','Fixcomart378');
+    updateFormBisnis('phone','082339129611');
     validateFormBisnis();
   };
 
-- 
cgit v1.2.3


From 15a9e599c1c1dc688f601da12be421ae55f61916 Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Fri, 23 Aug 2024 08:32:22 +0700
Subject: <iman> update error handling

---
 src-migrate/modules/register/components/FormBisnis.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 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 932083df..dec1bbf8 100644
--- a/src-migrate/modules/register/components/FormBisnis.tsx
+++ b/src-migrate/modules/register/components/FormBisnis.tsx
@@ -187,7 +187,7 @@ const FormBisnis: React.FC<FormProps> = ({ type, required, isPKP }) => {
               control={control}
               render={(props) => <HookFormSelect {...props} options={companyTypes} disabled={required} placeholder="Badan Usaha"/>}
               />
-              {!required && selectedCompanyId === '' && <span className="form-msg-danger">{errors.companyType}</span>}
+              {!required &&  !!errors.companyType && <span className="form-msg-danger">{errors.companyType}</span>}
           </div>
           <div className="w-[120%]">
             <input
@@ -219,7 +219,7 @@ const FormBisnis: React.FC<FormProps> = ({ type, required, isPKP }) => {
           {selectedCategory && 
             <span className='text-gray_r-11 text-xs'>Kategori : {selectedCategory}</span>
           }
-          {!required && selectedCategory === '' && <span className="form-msg-danger">{errors.industry}</span>}
+          {!required && !!errors.industry && <span className="form-msg-danger">{errors.industry}</span>}
       </div>
 
       <div>
-- 
cgit v1.2.3


From 453f377e42866cc68a03b2fef0a672590dfd68dd Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Fri, 23 Aug 2024 13:29:30 +0700
Subject: <iman>  update new register

---
 src-migrate/modules/register/components/FormBisnis.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 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 dec1bbf8..42d7aaa3 100644
--- a/src-migrate/modules/register/components/FormBisnis.tsx
+++ b/src-migrate/modules/register/components/FormBisnis.tsx
@@ -23,7 +23,7 @@ interface Industry {
   category: string;
 }
 
-interface CompanyType {
+interface company_type_id {
   value: string;
   label: string;
 }
@@ -43,7 +43,7 @@ const FormBisnis: React.FC<FormProps> = ({ type, required, isPKP }) => {
   const [selectedCompanyId, setSelectedCompanyId] = useState<string>('');
 
   const [industries, setIndustries] = useState<Industry[]>([]);
-  const [companyTypes, setCompanyTypes] = useState<CompanyType[]>([]);
+  const [companyTypes, setCompanyTypes] = useState<company_type_id[]>([]);
   const isFormValid = useMemo(() => Object.keys(errors).length === 0, [errors]);
 
   const router = useRouter();
@@ -58,13 +58,13 @@ const FormBisnis: React.FC<FormProps> = ({ type, required, isPKP }) => {
   }, []);
 
   useEffect(() => {
-    const selectedCompanyType = companyTypes.find(company => company.value === watch('companyType'));
+    const selectedCompanyType = companyTypes.find(company => company.value === watch('company_type_id'));
     if (selectedCompanyType) {
       updateFormBisnis("company_type_id", selectedCompanyType?.value);
       setSelectedCompanyId(selectedCompanyType?.label)
       validateFormBisnis();
     }
-  }, [watch('companyType'), companyTypes]);
+  }, [watch('company_type_id'), companyTypes]);
 
   useEffect(() => {
     const selectedIndustryType = industries.find(industry => industry.value === watch('industry'));
@@ -183,11 +183,11 @@ const FormBisnis: React.FC<FormProps> = ({ type, required, isPKP }) => {
         <div className="flex justify-between items-start gap-2 h-12">
           <div className='w-4/5 pr-1'>
             <Controller
-              name='companyType'
+              name='company_type_id'
               control={control}
               render={(props) => <HookFormSelect {...props} options={companyTypes} disabled={required} placeholder="Badan Usaha"/>}
               />
-              {!required &&  !!errors.companyType && <span className="form-msg-danger">{errors.companyType}</span>}
+              {!required &&  !!errors.company_type_id && <span className="form-msg-danger">{errors.company_type_id}</span>}
           </div>
           <div className="w-[120%]">
             <input
-- 
cgit v1.2.3


From bf33cdda7fb249cdd2473e0d1039704fd2171589 Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Fri, 23 Aug 2024 13:42:20 +0700
Subject: <iman> update new register

---
 src-migrate/modules/register/components/FormBisnis.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 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 42d7aaa3..b58f2fec 100644
--- a/src-migrate/modules/register/components/FormBisnis.tsx
+++ b/src-migrate/modules/register/components/FormBisnis.tsx
@@ -17,7 +17,7 @@ interface FormProps {
   isPKP: boolean;
 }
 
-interface Industry {
+interface industry_id {
   label: string;
   value: string;
   category: string;
@@ -42,7 +42,7 @@ const FormBisnis: React.FC<FormProps> = ({ type, required, isPKP }) => {
   const [selectedCategory, setSelectedCategory] = useState<string>('');
   const [selectedCompanyId, setSelectedCompanyId] = useState<string>('');
 
-  const [industries, setIndustries] = useState<Industry[]>([]);
+  const [industries, setIndustries] = useState<industry_id[]>([]);
   const [companyTypes, setCompanyTypes] = useState<company_type_id[]>([]);
   const isFormValid = useMemo(() => Object.keys(errors).length === 0, [errors]);
 
@@ -67,13 +67,13 @@ const FormBisnis: React.FC<FormProps> = ({ type, required, isPKP }) => {
   }, [watch('company_type_id'), companyTypes]);
 
   useEffect(() => {
-    const selectedIndustryType = industries.find(industry => industry.value === watch('industry'));
+    const selectedIndustryType = industries.find(industry => industry.value === watch('industry_id'));
     if (selectedIndustryType) {
       updateFormBisnis("industry_id", selectedIndustryType?.value);
       setSelectedCategory(selectedIndustryType.label);
       validateFormBisnis();
     }
-  }, [watch('industry'), industries]);
+  }, [watch('industry_id'), industries]);
 
   useEffect(() => {
     const loadIndustries = async () => {
@@ -212,14 +212,14 @@ const FormBisnis: React.FC<FormProps> = ({ type, required, isPKP }) => {
           Klasifikasi Jenis Usaha
         </label>
         <Controller
-          name='industry'
+          name='industry_id'
           control={control}
           render={(props) => <HookFormSelect {...props} options={industries} disabled={required} placeholder={'Select industry'}/>}
           />
           {selectedCategory && 
             <span className='text-gray_r-11 text-xs'>Kategori : {selectedCategory}</span>
           }
-          {!required && !!errors.industry && <span className="form-msg-danger">{errors.industry}</span>}
+          {!required && !!errors.industry_id && <span className="form-msg-danger">{errors.industry_id}</span>}
       </div>
 
       <div>
-- 
cgit v1.2.3


From 0bca1bfb2bc7e52a31dde39602dd599d7c640e73 Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Sat, 24 Aug 2024 08:46:44 +0700
Subject: <iman> update new register

---
 .../modules/register/components/FormBisnis.tsx     | 39 +++++++++++++++-------
 1 file changed, 27 insertions(+), 12 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 b58f2fec..f969efdf 100644
--- a/src-migrate/modules/register/components/FormBisnis.tsx
+++ b/src-migrate/modules/register/components/FormBisnis.tsx
@@ -23,13 +23,14 @@ interface industry_id {
   category: string;
 }
 
-interface company_type_id {
+interface companyType {
   value: string;
   label: string;
 }
 
 const FormBisnis: React.FC<FormProps> = ({ type, required, isPKP }) => {
   const {
+    form,
     formBisnis,
     isCheckedTNC,
     isValidCaptcha,
@@ -43,7 +44,7 @@ const FormBisnis: React.FC<FormProps> = ({ type, required, isPKP }) => {
   const [selectedCompanyId, setSelectedCompanyId] = useState<string>('');
 
   const [industries, setIndustries] = useState<industry_id[]>([]);
-  const [companyTypes, setCompanyTypes] = useState<company_type_id[]>([]);
+  const [companyTypes, setCompanyTypes] = useState<companyType[]>([]);
   const isFormValid = useMemo(() => Object.keys(errors).length === 0, [errors]);
 
   const router = useRouter();
@@ -58,19 +59,19 @@ const FormBisnis: React.FC<FormProps> = ({ type, required, isPKP }) => {
   }, []);
 
   useEffect(() => {
-    const selectedCompanyType = companyTypes.find(company => company.value === watch('company_type_id'));
+    const selectedCompanyType = companyTypes.find(company => company.value === watch('companyType'));
     if (selectedCompanyType) {
-      updateFormBisnis("company_type_id", selectedCompanyType?.value);
+      updateFormBisnis("company_type_id", `${selectedCompanyType?.value}`);
       setSelectedCompanyId(selectedCompanyType?.label)
       validateFormBisnis();
     }
-  }, [watch('company_type_id'), companyTypes]);
+  }, [watch('companyType'), companyTypes]);
 
   useEffect(() => {
     const selectedIndustryType = industries.find(industry => industry.value === watch('industry_id'));
     if (selectedIndustryType) {
-      updateFormBisnis("industry_id", selectedIndustryType?.value);
-      setSelectedCategory(selectedIndustryType.label);
+      updateFormBisnis("industry_id", `${selectedIndustryType?.value}`);
+      setSelectedCategory(selectedIndustryType.category);
       validateFormBisnis();
     }
   }, [watch('industry_id'), industries]);
@@ -85,15 +86,29 @@ const FormBisnis: React.FC<FormProps> = ({ type, required, isPKP }) => {
 
   const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
     const { name, value } = event.target;
+    updateFormBisnis('type_acc',`business`)
+    updateFormBisnis('is_pkp',`${isPKP}`)
     updateFormBisnis(name, value);
-    updateFormBisnis('name','iman');
-    updateFormBisnis('email','it@fixcomart.co.id');
-    updateFormBisnis('password','Fixcomart378');
-    updateFormBisnis('phone','082339129611');
+    updateFormBisnis('name',form.name);
+    updateFormBisnis('email',form.email);
+    updateFormBisnis('password',form.password);
+    updateFormBisnis('phone',form.phone);
     validateFormBisnis();
   };
 
   const handleFileChange = async (event: ChangeEvent<HTMLInputElement>) => {
+    // const file = poFile.current.files[0];
+    // const name = poNumber.current.value;
+    // if (typeof file === 'undefined' || !name) {
+    //   toast.error('Nomor dan Dokumen PO harus diisi');
+    //   return;
+    // }
+    // if (file.size > 5000000) {
+    //   toast.error('Maksimal ukuran file adalah 5MB');
+    //   return;
+    // }
+    // const data = { name, file: await getFileBase64(file) };
+
     let fileBase64 = '';
     const { name} = event.target;
     const file = event.target.files?.[0];
@@ -183,7 +198,7 @@ const FormBisnis: React.FC<FormProps> = ({ type, required, isPKP }) => {
         <div className="flex justify-between items-start gap-2 h-12">
           <div className='w-4/5 pr-1'>
             <Controller
-              name='company_type_id'
+              name='companyType'
               control={control}
               render={(props) => <HookFormSelect {...props} options={companyTypes} disabled={required} placeholder="Badan Usaha"/>}
               />
-- 
cgit v1.2.3


From f0cde08a3fda95b1738a765358022241aea404bf Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Mon, 26 Aug 2024 10:28:15 +0700
Subject: <iman> update logic new register validation

---
 .../modules/register/components/FormBisnis.tsx     | 50 +++++++++++-----------
 1 file changed, 24 insertions(+), 26 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 f969efdf..5d15ab6c 100644
--- a/src-migrate/modules/register/components/FormBisnis.tsx
+++ b/src-migrate/modules/register/components/FormBisnis.tsx
@@ -28,17 +28,15 @@ interface companyType {
   label: string;
 }
 
-const FormBisnis: React.FC<FormProps> = ({ type, required, isPKP }) => {
+const form: React.FC<FormProps> = ({ type, required, isPKP }) => {
   const {
     form,
-    formBisnis,
     isCheckedTNC,
     isValidCaptcha,
     errors,
-    updateFormBisnis,
-    validateFormBisnis,
+    updateForm,
+    validate
   } = useRegisterStore()
-  console.log("errors bisnis",errors)
   const { control, watch, setValue } = useForm();
   const [selectedCategory, setSelectedCategory] = useState<string>('');
   const [selectedCompanyId, setSelectedCompanyId] = useState<string>('');
@@ -61,18 +59,18 @@ const FormBisnis: React.FC<FormProps> = ({ type, required, isPKP }) => {
   useEffect(() => {
     const selectedCompanyType = companyTypes.find(company => company.value === watch('companyType'));
     if (selectedCompanyType) {
-      updateFormBisnis("company_type_id", `${selectedCompanyType?.value}`);
+      updateForm("company_type_id", `${selectedCompanyType?.value}`);
       setSelectedCompanyId(selectedCompanyType?.label)
-      validateFormBisnis();
+      validate();
     }
   }, [watch('companyType'), companyTypes]);
 
   useEffect(() => {
     const selectedIndustryType = industries.find(industry => industry.value === watch('industry_id'));
     if (selectedIndustryType) {
-      updateFormBisnis("industry_id", `${selectedIndustryType?.value}`);
+      updateForm("industry_id", `${selectedIndustryType?.value}`);
       setSelectedCategory(selectedIndustryType.category);
-      validateFormBisnis();
+      validate();
     }
   }, [watch('industry_id'), industries]);
 
@@ -86,14 +84,14 @@ const FormBisnis: React.FC<FormProps> = ({ type, required, isPKP }) => {
 
   const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
     const { name, value } = event.target;
-    updateFormBisnis('type_acc',`business`)
-    updateFormBisnis('is_pkp',`${isPKP}`)
-    updateFormBisnis(name, value);
-    updateFormBisnis('name',form.name);
-    updateFormBisnis('email',form.email);
-    updateFormBisnis('password',form.password);
-    updateFormBisnis('phone',form.phone);
-    validateFormBisnis();
+    updateForm('type_acc',`business`)
+    updateForm('is_pkp',`${isPKP}`)
+    updateForm(name, value);
+    updateForm('name',form.name);
+    updateForm('email',form.email);
+    updateForm('password',form.password);
+    updateForm('phone',form.phone);
+    validate();
   };
 
   const handleFileChange = async (event: ChangeEvent<HTMLInputElement>) => {
@@ -120,8 +118,8 @@ const FormBisnis: React.FC<FormProps> = ({ type, required, isPKP }) => {
         }
         fileBase64 = await getFileBase64(file);
       }
-      updateFormBisnis(name, fileBase64);
-      validateFormBisnis();
+      updateForm(name, fileBase64);
+      validate();
     }
   };
 
@@ -132,12 +130,12 @@ const FormBisnis: React.FC<FormProps> = ({ type, required, isPKP }) => {
   const handleSubmit = async (e: ChangeEvent<HTMLFormElement>) => {
     e.preventDefault();
 
-    const response = await mutation.mutateAsync(formBisnis);
+    const response = await mutation.mutateAsync(form);
 
     if (response?.register === true) {
       const urlParams = new URLSearchParams({
         activation: 'otp',
-        email: formBisnis.email,
+        email: form.email,
         redirect: (router.query?.next || '/') as string
       });
       router.push(`${router.route}?${urlParams}`);
@@ -177,7 +175,7 @@ const FormBisnis: React.FC<FormProps> = ({ type, required, isPKP }) => {
           id='email_partner'
           name='email_partner'
           placeholder='example@email.com'
-          value={!required ? formBisnis.email_partner : ''}
+          value={!required ? form.email_partner : ''}
           className={`form-input mt-3 ${required ? 'cursor-no-drop' : ''}`}
           disabled={required}
           contentEditable={required}
@@ -212,7 +210,7 @@ const FormBisnis: React.FC<FormProps> = ({ type, required, isPKP }) => {
               className="form-input h-full "
               placeholder="Nama Perusahaan"
               autoCapitalize="true"
-              value={formBisnis.business_name}
+              value={form.business_name}
               aria-invalid={!!errors.business_name}
               onChange={handleInputChange}
               />
@@ -245,7 +243,7 @@ const FormBisnis: React.FC<FormProps> = ({ type, required, isPKP }) => {
           id='nama_wajib_pajak'
           name='nama_wajib_pajak'
           placeholder='Masukan nama lengkap anda'
-          value={!required?  formBisnis.nama_wajib_pajak : ''}
+          value={!required?  form.nama_wajib_pajak : ''}
           className={`form-input mt-3 ${required ? 'cursor-no-drop' : ''}`}
           disabled={required}
           contentEditable={required}
@@ -269,7 +267,7 @@ const FormBisnis: React.FC<FormProps> = ({ type, required, isPKP }) => {
           contentEditable={required}
           readOnly={required}
           placeholder='000.000.000.0-000.000'
-          value={!required ? formBisnis.npwp : ''}
+          value={!required ? form.npwp : ''}
           onChange={handleInputChange}
           aria-invalid={isPKP && !required && !!errors.npwp}
         />
@@ -324,4 +322,4 @@ const FormBisnis: React.FC<FormProps> = ({ type, required, isPKP }) => {
   )
 }
 
-export default FormBisnis;
+export default form;
-- 
cgit v1.2.3


From 54b6b618effc8416027ed884be1d6d37257c26c4 Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Mon, 26 Aug 2024 11:59:57 +0700
Subject: <iman> update fungsion component

---
 .../modules/register/components/FormBisnis.tsx     | 39 ++++++----------------
 1 file changed, 10 insertions(+), 29 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 5d15ab6c..1d0c930f 100644
--- a/src-migrate/modules/register/components/FormBisnis.tsx
+++ b/src-migrate/modules/register/components/FormBisnis.tsx
@@ -10,6 +10,7 @@ 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 { toast } from 'react-hot-toast';
 
 interface FormProps {
   type: string;
@@ -31,19 +32,15 @@ interface companyType {
 const form: React.FC<FormProps> = ({ type, required, isPKP }) => {
   const {
     form,
-    isCheckedTNC,
-    isValidCaptcha,
     errors,
     updateForm,
     validate
   } = useRegisterStore()
   const { control, watch, setValue } = useForm();
   const [selectedCategory, setSelectedCategory] = useState<string>('');
-  const [selectedCompanyId, setSelectedCompanyId] = useState<string>('');
 
   const [industries, setIndustries] = useState<industry_id[]>([]);
   const [companyTypes, setCompanyTypes] = useState<companyType[]>([]);
-  const isFormValid = useMemo(() => Object.keys(errors).length === 0, [errors]);
 
   const router = useRouter();
   const toast = useToast();
@@ -60,7 +57,6 @@ const form: React.FC<FormProps> = ({ type, required, isPKP }) => {
     const selectedCompanyType = companyTypes.find(company => company.value === watch('companyType'));
     if (selectedCompanyType) {
       updateForm("company_type_id", `${selectedCompanyType?.value}`);
-      setSelectedCompanyId(selectedCompanyType?.label)
       validate();
     }
   }, [watch('companyType'), companyTypes]);
@@ -87,33 +83,26 @@ const form: React.FC<FormProps> = ({ type, required, isPKP }) => {
     updateForm('type_acc',`business`)
     updateForm('is_pkp',`${isPKP}`)
     updateForm(name, value);
-    updateForm('name',form.name);
-    updateForm('email',form.email);
-    updateForm('password',form.password);
-    updateForm('phone',form.phone);
     validate();
   };
 
   const handleFileChange = async (event: ChangeEvent<HTMLInputElement>) => {
-    // const file = poFile.current.files[0];
-    // const name = poNumber.current.value;
-    // if (typeof file === 'undefined' || !name) {
-    //   toast.error('Nomor dan Dokumen PO harus diisi');
-    //   return;
-    // }
-    // if (file.size > 5000000) {
-    //   toast.error('Maksimal ukuran file adalah 5MB');
-    //   return;
-    // }
-    // const data = { name, file: await getFileBase64(file) };
 
+    const toastProps: UseToastOptions = {
+      duration: 5000,
+      isClosable: true
+    };
     let fileBase64 = '';
     const { name} = event.target;
     const file = event.target.files?.[0];
     if (file) {
       if (typeof file !== 'undefined') {
         if (file.size > 5000000) {
-          // toast.error('Maksimal ukuran file adalah 5MB')
+          toast({
+            ...toastProps,
+            title: 'Maksimal ukuran file adalah 5MB',
+            status: 'warning'
+          });
           return;
         }
         fileBase64 = await getFileBase64(file);
@@ -310,14 +299,6 @@ const form: React.FC<FormProps> = ({ type, required, isPKP }) => {
 
         {isPKP && !required && !!errors.sppkp_document && <span className="form-msg-danger">{errors.sppkp_document}</span>}
       </div>
-
-      {/* <button
-        type="submit"
-        className="btn-yellow w-full mt-2"
-        disabled={!isFormValid || !isCheckedTNC || mutation.isLoading || !isValidCaptcha}
-      >
-        {mutation.isLoading ? 'Loading...' : 'Daftar'}
-      </button> */}
     </form>
   )
 }
-- 
cgit v1.2.3


From 0b5f187f45e0bbf111e11a94415f20d5e34f7c5c Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Tue, 27 Aug 2024 14:51:14 +0700
Subject: <iman> update new field register

---
 .../modules/register/components/FormBisnis.tsx     | 73 +++++++++++++++++++++-
 1 file changed, 72 insertions(+), 1 deletion(-)

(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 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 = {
@@ -224,6 +239,26 @@ const form: React.FC<FormProps> = ({ type, required, isPKP }) => {
           {!required && !!errors.industry_id && <span className="form-msg-danger">{errors.industry_id}</span>}
       </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>
 
@@ -244,6 +279,42 @@ const form: React.FC<FormProps> = ({ type, required, isPKP }) => {
         {isPKP && !required && !!errors.nama_wajib_pajak && <span className="form-msg-danger">{errors.nama_wajib_pajak}</span>}
       </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>
 
-- 
cgit v1.2.3


From 3da0d5f55a0dc8b9c04cb271ea7d541c63c9e3a8 Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Wed, 28 Aug 2024 11:57:18 +0700
Subject: <iman> update new register

---
 src-migrate/modules/register/components/FormBisnis.tsx | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 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 3b8fdbfc..e2e021b3 100644
--- a/src-migrate/modules/register/components/FormBisnis.tsx
+++ b/src-migrate/modules/register/components/FormBisnis.tsx
@@ -328,11 +328,19 @@ const form: React.FC<FormProps> = ({ type, required, isPKP }) => {
           readOnly={required}
           placeholder='000.000.000.0-000.000'
           value={!required ? form.npwp : ''}
-          onChange={handleInputChange}
-          aria-invalid={isPKP && !required && !!errors.npwp}
+          maxLength={16}  // Set maximum length to 16 characters
+          onChange={(e) => {
+            if (!required) {
+              const value = e.target.value.replace(/\D/g, ''); // Remove non-digit characters
+              if (value.length <= 16) {
+                handleInputChange(e);
+              }
+            }
+          }}
+          aria-invalid={!required && !!errors.npwp}
         />
 
-        {isPKP && !required && !!errors.npwp && <span className="form-msg-danger">{errors.npwp}</span>}
+        {!required && !!errors.npwp && <span className="form-msg-danger">{errors.npwp}</span>}
       </div>
 
       <div>
-- 
cgit v1.2.3


From a5821ad81683c8160d707fe980a282df644c3c0b Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Thu, 29 Aug 2024 16:32:01 +0700
Subject: <iman> add sppkp field

---
 .../modules/register/components/FormBisnis.tsx        | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

(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 e2e021b3..b976072c 100644
--- a/src-migrate/modules/register/components/FormBisnis.tsx
+++ b/src-migrate/modules/register/components/FormBisnis.tsx
@@ -343,6 +343,25 @@ const form: React.FC<FormProps> = ({ type, required, isPKP }) => {
         {!required && !!errors.npwp && <span className="form-msg-danger">{errors.npwp}</span>}
       </div>
 
+      <div>
+        <label htmlFor='sppkp' className="font-bold">Nomor SPPKP { !required && <span className='font-normal text-gray_r-11'>(opsional)</span>}</label>
+
+        <input
+          type='tel'
+          id='sppkp'
+          name='sppkp'
+          className={`form-input mt-3 ${required ? 'cursor-no-drop' : ''}`}
+          disabled={required}
+          contentEditable={required}
+          readOnly={required}
+          placeholder='000.000.000.0-000.000'
+          value={!required ? form.sppkp : ''}
+          aria-invalid={!required && !!errors.sppkp}
+        />
+
+        {!required && !!errors.sppkp && <span className="form-msg-danger">{errors.sppkp}</span>}
+      </div>
+
       <div>
         <label htmlFor="npwp_document" className="font-bold">Dokumen NPWP {!isPKP && !required && <span className='font-normal text-gray_r-11'>(opsional)</span>}</label>
 
-- 
cgit v1.2.3


From 1a436a504e3ecafedab6035ac6eb9eb0b9a619d3 Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Thu, 29 Aug 2024 17:13:23 +0700
Subject: <iman> update new register

---
 src-migrate/modules/register/components/FormBisnis.tsx | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 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 b976072c..a278097b 100644
--- a/src-migrate/modules/register/components/FormBisnis.tsx
+++ b/src-migrate/modules/register/components/FormBisnis.tsx
@@ -4,13 +4,16 @@ import { useRegisterStore } from "../stores/useRegisterStore";
 import { RegisterProps } from "~/types/auth";
 import { registerUser } from "~/services/auth";
 import { useRouter } from "next/router";
-import { Checkbox, UseToastOptions, color, useToast } from "@chakra-ui/react";
+import { Button, 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'
 import HookFormSelect from '@/core/components/elements/Select/HookFormSelect'
 import odooApi from "~/libs/odooApi";
 import { toast } from 'react-hot-toast';
+import {
+  EyeIcon
+} from '@heroicons/react/24/outline';
 
 interface FormProps {
   type: string;
@@ -344,7 +347,14 @@ const form: React.FC<FormProps> = ({ type, required, isPKP }) => {
       </div>
 
       <div>
-        <label htmlFor='sppkp' className="font-bold">Nomor SPPKP { !required && <span className='font-normal text-gray_r-11'>(opsional)</span>}</label>
+        <label htmlFor='sppkp' className="font-bold flex flex-row items-center justify-between">
+            Nomor SPPKP { !required && <span className='font-normal text-gray_r-11'>(opsional) </span>}
+              {<button className="rounded text-white p-2 flex flex-row bg-red-500" >
+                <EyeIcon className='w-4 mr-2' />
+                <p className="font-light text-xs">Lihat Contoh</p> 
+              </button>}
+          </label>
+
 
         <input
           type='tel'
@@ -352,9 +362,10 @@ const form: React.FC<FormProps> = ({ type, required, isPKP }) => {
           name='sppkp'
           className={`form-input mt-3 ${required ? 'cursor-no-drop' : ''}`}
           disabled={required}
-          contentEditable={required}
+          contentEditable={required}S
           readOnly={required}
           placeholder='000.000.000.0-000.000'
+          onChange={handleInputChange}
           value={!required ? form.sppkp : ''}
           aria-invalid={!required && !!errors.sppkp}
         />
-- 
cgit v1.2.3


From b8141064bcce99574b94506f9e3028425759158d Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Fri, 30 Aug 2024 10:56:20 +0700
Subject: <iman> input npwp by template

---
 .../modules/register/components/FormBisnis.tsx     | 117 +++++++++++++++++----
 1 file changed, 99 insertions(+), 18 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 a278097b..6ab12776 100644
--- a/src-migrate/modules/register/components/FormBisnis.tsx
+++ b/src-migrate/modules/register/components/FormBisnis.tsx
@@ -14,6 +14,8 @@ import { toast } from 'react-hot-toast';
 import {
   EyeIcon
 } from '@heroicons/react/24/outline';
+import BottomPopup from '@/core/components/elements/Popup/BottomPopup';
+import Image from 'next/image'
 
 interface FormProps {
   type: string;
@@ -42,6 +44,11 @@ const form: React.FC<FormProps> = ({ type, required, isPKP }) => {
   const { control, watch, setValue } = useForm();
   const [selectedCategory, setSelectedCategory] = useState<string>('');
   const [isChekBox, setIsChekBox] = useState<boolean>(false);
+  const [isExample, setIsExample] = useState<boolean>(false);
+  // Inside your component
+  const [formattedNpwp, setFormattedNpwp] = useState<string>(""); // State for formatted NPWP
+  const [unformattedNpwp, setUnformattedNpwp] = useState<string>(""); // State for unformatted NPWP
+
 
   const [industries, setIndustries] = useState<industry_id[]>([]);
   const [companyTypes, setCompanyTypes] = useState<companyType[]>([]);
@@ -90,9 +97,58 @@ const form: React.FC<FormProps> = ({ type, required, isPKP }) => {
     validate();
   };
 
+  const handleInputChangeNpwp = (event: ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = event.target;
+    updateForm('type_acc',`business`)
+    updateForm('is_pkp',`${isPKP}`)
+    updateForm('npwp', value);
+    validate();
+  };
+
   const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
     setIsChekBox(!isChekBox)
   };
+  
+  const formatNpwp = (value: string) => {
+    try {
+      const cleaned = ("" + value).replace(/\D/g, "");
+      // const match = cleaned.match(/(\d{0,2})?(\d{0,3})?(\d{0,3})?(\d{0,1})?(\d{0,3})?(\d{0,3})$/);
+      console.log("panjang",form?.npwp?.length)
+      console.log("panjang cleaned",cleaned.length)
+      let match
+      if(cleaned.length <= 15){
+        match = cleaned.match(/(\d{0,2})?(\d{0,3})?(\d{0,3})?(\d{0,1})?(\d{0,3})?(\d{0,3})$/);
+      }else{
+        match = cleaned.match(/(\d{0,3})?(\d{0,3})?(\d{0,3})?(\d{0,1})?(\d{0,3})?(\d{0,3})$/);
+      }
+      
+  
+      if (match) {
+        return [
+          match[1],
+          match[2] ? "." : "",
+          match[2],
+          match[3] ? "." : "",
+          match[3],
+          match[4] ? "." : "",
+          match[4],
+          match[5] ? "-" : "",
+          match[5],
+          match[6] ? "." : "",
+          match[6],
+        ].join("");
+      }
+  
+      // If match is null, return the original cleaned string or handle as needed
+      return cleaned;
+  
+    } catch (error) {
+      // Handle error or return a default value
+      console.error("Error formatting NPWP:", error);
+      return value;
+    }
+  };
+  
 
   useEffect(() => {
     if (isChekBox) {
@@ -172,7 +228,26 @@ const form: React.FC<FormProps> = ({ type, required, isPKP }) => {
         break;
     }
   };
+  console.log("form",form)
   return (
+    <>
+    <BottomPopup
+        className=''
+        title='Contoh SPPKP'
+        active={isExample}
+        close={() => setIsExample(false)}
+      >
+        <div className='flex p-2'>
+        <Image
+                src='/images/NO-SPPKP-FORMAT-TEMPLATE.jpg'
+                alt='Contoh SPPKP'
+                className='w-full h-full '
+                width={800}
+                height={800}
+                quality={100}
+              />
+        </div>
+      </BottomPopup>
     <form className="mt-6 grid grid-cols-1 gap-y-4" onSubmit={handleSubmit}>
       <div>
         <label htmlFor='email' className="font-bold">Email Bisnis {!isPKP && !required && <span className='font-normal text-gray_r-11'>(opsional)</span>}</label>
@@ -319,25 +394,28 @@ const form: React.FC<FormProps> = ({ type, required, isPKP }) => {
       </div>
 
       <div>
-        <label htmlFor='npwp' className="font-bold">Nomor NPWP {!isPKP && !required && <span className='font-normal text-gray_r-11'>(opsional)</span>}</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'
-          id='npwp'
-          name='npwp'
-          className={`form-input mt-3 ${required ? 'cursor-no-drop' : ''}`}
+          type="tel"
+          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 ? form.npwp : ''}
-          maxLength={16}  // Set maximum length to 16 characters
+          placeholder="000.000.000.0-000.000"
+          value={!required ? formattedNpwp : ""}
+          maxLength={21} // Set maximum length to 16 characters
           onChange={(e) => {
             if (!required) {
-              const value = e.target.value.replace(/\D/g, ''); // Remove non-digit characters
-              if (value.length <= 16) {
-                handleInputChange(e);
-              }
+              const unformatted = e.target.value.replace(/\D/g, ""); // Remove all non-digit characters
+              const formattedValue = formatNpwp(unformatted); // Format the value
+              setUnformattedNpwp(unformatted); // Store unformatted value
+              setFormattedNpwp(formattedValue); // Store formatted value
+              handleInputChangeNpwp({ ...e, target: { ...e.target, value: unformatted } }); // Update form state with unformatted value
             }
           }}
           aria-invalid={!required && !!errors.npwp}
@@ -347,12 +425,14 @@ const form: React.FC<FormProps> = ({ type, required, isPKP }) => {
       </div>
 
       <div>
-        <label htmlFor='sppkp' className="font-bold flex flex-row items-center justify-between">
-            Nomor SPPKP { !required && <span className='font-normal text-gray_r-11'>(opsional) </span>}
-              {<button className="rounded text-white p-2 flex flex-row bg-red-500" >
+        <label htmlFor='sppkp' className="font-bold flex flex-row items-center justify-between"> 
+          <div className="flex flex-row items-center">
+            Nomor SPPKP { !required && <span className='ml-2 font-normal text-gray_r-11'>(opsional) </span>}
+          </div>
+              {<div onClick={() => setIsExample(!isExample)} className="rounded text-white p-2 flex flex-row bg-red-500" >
                 <EyeIcon className='w-4 mr-2' />
                 <p className="font-light text-xs">Lihat Contoh</p> 
-              </button>}
+              </div>}
           </label>
 
 
@@ -362,9 +442,9 @@ const form: React.FC<FormProps> = ({ type, required, isPKP }) => {
           name='sppkp'
           className={`form-input mt-3 ${required ? 'cursor-no-drop' : ''}`}
           disabled={required}
-          contentEditable={required}S
+          contentEditable={required}
           readOnly={required}
-          placeholder='000.000.000.0-000.000'
+          placeholder='X-XXXPKP/WJPXXX/XX.XXXX/XXXX'
           onChange={handleInputChange}
           value={!required ? form.sppkp : ''}
           aria-invalid={!required && !!errors.sppkp}
@@ -409,6 +489,7 @@ const form: React.FC<FormProps> = ({ type, required, isPKP }) => {
         {isPKP && !required && !!errors.sppkp_document && <span className="form-msg-danger">{errors.sppkp_document}</span>}
       </div>
     </form>
+    </>
   )
 }
 
-- 
cgit v1.2.3


From 340d55fe93fb93b3f77d4c5f2d55174432aec810 Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Fri, 30 Aug 2024 16:21:50 +0700
Subject: <iman> delete console log

---
 src-migrate/modules/register/components/FormBisnis.tsx | 4 ----
 1 file changed, 4 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 6ab12776..79515a36 100644
--- a/src-migrate/modules/register/components/FormBisnis.tsx
+++ b/src-migrate/modules/register/components/FormBisnis.tsx
@@ -112,9 +112,6 @@ const form: React.FC<FormProps> = ({ type, required, isPKP }) => {
   const formatNpwp = (value: string) => {
     try {
       const cleaned = ("" + value).replace(/\D/g, "");
-      // const match = cleaned.match(/(\d{0,2})?(\d{0,3})?(\d{0,3})?(\d{0,1})?(\d{0,3})?(\d{0,3})$/);
-      console.log("panjang",form?.npwp?.length)
-      console.log("panjang cleaned",cleaned.length)
       let match
       if(cleaned.length <= 15){
         match = cleaned.match(/(\d{0,2})?(\d{0,3})?(\d{0,3})?(\d{0,1})?(\d{0,3})?(\d{0,3})$/);
@@ -228,7 +225,6 @@ const form: React.FC<FormProps> = ({ type, required, isPKP }) => {
         break;
     }
   };
-  console.log("form",form)
   return (
     <>
     <BottomPopup
-- 
cgit v1.2.3


From a19531237842b27cfa2d62b32543bbdbca454bc2 Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Mon, 2 Sep 2024 15:28:07 +0700
Subject: <iman> update tampilan button lihat example

---
 src-migrate/modules/register/components/FormBisnis.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(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 79515a36..ea0e4761 100644
--- a/src-migrate/modules/register/components/FormBisnis.tsx
+++ b/src-migrate/modules/register/components/FormBisnis.tsx
@@ -425,7 +425,7 @@ const form: React.FC<FormProps> = ({ type, required, isPKP }) => {
           <div className="flex flex-row items-center">
             Nomor SPPKP { !required && <span className='ml-2 font-normal text-gray_r-11'>(opsional) </span>}
           </div>
-              {<div onClick={() => setIsExample(!isExample)} className="rounded text-white p-2 flex flex-row bg-red-500" >
+              {<div onClick={() => setIsExample(!isExample)} className="rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400" >
                 <EyeIcon className='w-4 mr-2' />
                 <p className="font-light text-xs">Lihat Contoh</p> 
               </div>}
-- 
cgit v1.2.3


From 383adf9edeed30db9f5df8e9ed4752cd513f49a5 Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Mon, 9 Sep 2024 14:37:47 +0700
Subject: <iman> update new register mobile

---
 src-migrate/modules/register/components/FormBisnis.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 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 ea0e4761..fb9f6484 100644
--- a/src-migrate/modules/register/components/FormBisnis.tsx
+++ b/src-migrate/modules/register/components/FormBisnis.tsx
@@ -267,11 +267,11 @@ const form: React.FC<FormProps> = ({ type, required, isPKP }) => {
         {!required && isPKP && !!errors.email_partner && <span className="form-msg-danger">{errors.email_partner}</span>}
       </div>
 
-      <div>
+      <div className="">
         <label className="font-bold" htmlFor="company">
           Nama Bisnis 
         </label>
-        <div className="flex justify-between items-start gap-2 h-12">
+        <div className="flex justify-between items-start gap-2 max-h-12 min-h-12 text-sm">
           <div className='w-4/5 pr-1'>
             <Controller
               name='companyType'
@@ -285,7 +285,7 @@ const form: React.FC<FormProps> = ({ type, required, isPKP }) => {
               type="text"
               name="business_name"
               id="business_name"
-              className="form-input h-full "
+              className="form-input h-12 "
               placeholder="Nama Perusahaan"
               autoCapitalize="true"
               value={form.business_name}
-- 
cgit v1.2.3


From 055e4d779151cd0cbad380043e4be38cca8b1c7a Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Mon, 9 Sep 2024 16:41:39 +0700
Subject: <iman> update mobile view

---
 src-migrate/modules/register/components/FormBisnis.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 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 fb9f6484..1004d944 100644
--- a/src-migrate/modules/register/components/FormBisnis.tsx
+++ b/src-migrate/modules/register/components/FormBisnis.tsx
@@ -16,7 +16,7 @@ import {
 } from '@heroicons/react/24/outline';
 import BottomPopup from '@/core/components/elements/Popup/BottomPopup';
 import Image from 'next/image'
-
+import useDevice from '@/core/hooks/useDevice'
 interface FormProps {
   type: string;
   required: boolean;
@@ -45,6 +45,7 @@ const form: React.FC<FormProps> = ({ type, required, isPKP }) => {
   const [selectedCategory, setSelectedCategory] = useState<string>('');
   const [isChekBox, setIsChekBox] = useState<boolean>(false);
   const [isExample, setIsExample] = useState<boolean>(false);
+  const { isDesktop, isMobile } = useDevice()
   // Inside your component
   const [formattedNpwp, setFormattedNpwp] = useState<string>(""); // State for formatted NPWP
   const [unformattedNpwp, setUnformattedNpwp] = useState<string>(""); // State for unformatted NPWP
@@ -426,8 +427,10 @@ const form: React.FC<FormProps> = ({ type, required, isPKP }) => {
             Nomor SPPKP { !required && <span className='ml-2 font-normal text-gray_r-11'>(opsional) </span>}
           </div>
               {<div onClick={() => setIsExample(!isExample)} className="rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400" >
-                <EyeIcon className='w-4 mr-2' />
+                <EyeIcon className={`w-4 ${isDesktop && 'mr-2'}`} />
+                {isDesktop &&
                 <p className="font-light text-xs">Lihat Contoh</p> 
+                }
               </div>}
           </label>
 
-- 
cgit v1.2.3


From 6ff5efdb4b7eec25f991f5bfcc02b4a3f883981b Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Wed, 11 Sep 2024 10:04:31 +0700
Subject: <iman> update error handling hanya muncul saat button daftar di click

---
 .../modules/register/components/FormBisnis.tsx     | 776 ++++++++++++---------
 1 file changed, 460 insertions(+), 316 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 1004d944..2080ae75 100644
--- a/src-migrate/modules/register/components/FormBisnis.tsx
+++ b/src-migrate/modules/register/components/FormBisnis.tsx
@@ -1,26 +1,31 @@
-import { ChangeEvent, useEffect, useMemo, useState } from "react";
-import { useMutation } from "react-query";
-import { useRegisterStore } from "../stores/useRegisterStore";
-import { RegisterProps } from "~/types/auth";
-import { registerUser } from "~/services/auth";
-import { useRouter } from "next/router";
-import { Button, 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'
-import HookFormSelect from '@/core/components/elements/Select/HookFormSelect'
-import odooApi from "~/libs/odooApi";
-import { toast } from 'react-hot-toast';
+import { ChangeEvent, useEffect, useMemo, useState } from 'react';
+import { useMutation } from 'react-query';
+import { useRegisterStore } from '../stores/useRegisterStore';
+import { RegisterProps } from '~/types/auth';
+import { registerUser } from '~/services/auth';
+import { useRouter } from 'next/router';
 import {
-  EyeIcon
-} from '@heroicons/react/24/outline';
+  Button,
+  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';
+import HookFormSelect from '@/core/components/elements/Select/HookFormSelect';
+import odooApi from '~/libs/odooApi';
+import { toast } from 'react-hot-toast';
+import { EyeIcon } 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 Image from 'next/image';
+import useDevice from '@/core/hooks/useDevice';
 interface FormProps {
   type: string;
   required: boolean;
   isPKP: boolean;
+  chekValid: boolean;
 }
 
 interface industry_id {
@@ -34,22 +39,16 @@ interface companyType {
   label: string;
 }
 
-const form: React.FC<FormProps> = ({ type, required, isPKP }) => {
-  const {
-    form,
-    errors,
-    updateForm,
-    validate
-  } = useRegisterStore()
+const form: React.FC<FormProps> = ({ type, required, isPKP, chekValid }) => {
+  const { form, errors, updateForm, validate } = useRegisterStore();
   const { control, watch, setValue } = useForm();
   const [selectedCategory, setSelectedCategory] = useState<string>('');
   const [isChekBox, setIsChekBox] = useState<boolean>(false);
   const [isExample, setIsExample] = useState<boolean>(false);
-  const { isDesktop, isMobile } = useDevice()
+  const { isDesktop, isMobile } = useDevice();
   // Inside your component
-  const [formattedNpwp, setFormattedNpwp] = useState<string>(""); // State for formatted NPWP
-  const [unformattedNpwp, setUnformattedNpwp] = useState<string>(""); // State for unformatted NPWP
-
+  const [formattedNpwp, setFormattedNpwp] = useState<string>(''); // State for formatted NPWP
+  const [unformattedNpwp, setUnformattedNpwp] = useState<string>(''); // State for unformatted NPWP
 
   const [industries, setIndustries] = useState<industry_id[]>([]);
   const [companyTypes, setCompanyTypes] = useState<companyType[]>([]);
@@ -59,24 +58,36 @@ const form: React.FC<FormProps> = ({ type, required, isPKP }) => {
 
   useEffect(() => {
     const loadCompanyTypes = async () => {
-      const dataCompanyTypes = await odooApi('GET', '/api/v1/partner/company_type');
-      setCompanyTypes(dataCompanyTypes?.map((o: { id: any; name: any; }) => ({ value: o.id, label: o.name })));
+      const dataCompanyTypes = await odooApi(
+        'GET',
+        '/api/v1/partner/company_type'
+      );
+      setCompanyTypes(
+        dataCompanyTypes?.map((o: { id: any; name: any }) => ({
+          value: o.id,
+          label: o.name,
+        }))
+      );
     };
     loadCompanyTypes();
   }, []);
 
   useEffect(() => {
-    const selectedCompanyType = companyTypes.find(company => company.value === watch('companyType'));
+    const selectedCompanyType = companyTypes.find(
+      (company) => company.value === watch('companyType')
+    );
     if (selectedCompanyType) {
-      updateForm("company_type_id", `${selectedCompanyType?.value}`);
+      updateForm('company_type_id', `${selectedCompanyType?.value}`);
       validate();
     }
   }, [watch('companyType'), companyTypes]);
 
   useEffect(() => {
-    const selectedIndustryType = industries.find(industry => industry.value === watch('industry_id'));
+    const selectedIndustryType = industries.find(
+      (industry) => industry.value === watch('industry_id')
+    );
     if (selectedIndustryType) {
-      updateForm("industry_id", `${selectedIndustryType?.value}`);
+      updateForm('industry_id', `${selectedIndustryType?.value}`);
       setSelectedCategory(selectedIndustryType.category);
       validate();
     }
@@ -85,107 +96,135 @@ const form: React.FC<FormProps> = ({ type, required, isPKP }) => {
   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 })));
+      setIndustries(
+        dataIndustries?.map((o: { id: any; name: any; category: any }) => ({
+          value: o.id,
+          label: o.name,
+          category: o.category,
+        }))
+      );
     };
     loadIndustries();
   }, []);
 
   const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
     const { name, value } = event.target;
-    updateForm('type_acc',`business`)
-    updateForm('is_pkp',`${isPKP}`)
+    updateForm('type_acc', `business`);
+    updateForm('is_pkp', `${isPKP}`);
     updateForm(name, value);
     validate();
   };
 
   const handleInputChangeNpwp = (event: ChangeEvent<HTMLInputElement>) => {
     const { name, value } = event.target;
-    updateForm('type_acc',`business`)
-    updateForm('is_pkp',`${isPKP}`)
+    updateForm('type_acc', `business`);
+    updateForm('is_pkp', `${isPKP}`);
     updateForm('npwp', value);
     validate();
   };
 
   const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
-    setIsChekBox(!isChekBox)
+    setIsChekBox(!isChekBox);
   };
-  
+
   const formatNpwp = (value: string) => {
     try {
-      const cleaned = ("" + value).replace(/\D/g, "");
-      let match
-      if(cleaned.length <= 15){
-        match = cleaned.match(/(\d{0,2})?(\d{0,3})?(\d{0,3})?(\d{0,1})?(\d{0,3})?(\d{0,3})$/);
-      }else{
-        match = cleaned.match(/(\d{0,3})?(\d{0,3})?(\d{0,3})?(\d{0,1})?(\d{0,3})?(\d{0,3})$/);
+      const cleaned = ('' + value).replace(/\D/g, '');
+      let match;
+      if (cleaned.length <= 15) {
+        match = cleaned.match(
+          /(\d{0,2})?(\d{0,3})?(\d{0,3})?(\d{0,1})?(\d{0,3})?(\d{0,3})$/
+        );
+      } else {
+        match = cleaned.match(
+          /(\d{0,3})?(\d{0,3})?(\d{0,3})?(\d{0,1})?(\d{0,3})?(\d{0,3})$/
+        );
       }
-      
-  
+
       if (match) {
         return [
           match[1],
-          match[2] ? "." : "",
+          match[2] ? '.' : '',
           match[2],
-          match[3] ? "." : "",
+          match[3] ? '.' : '',
           match[3],
-          match[4] ? "." : "",
+          match[4] ? '.' : '',
           match[4],
-          match[5] ? "-" : "",
+          match[5] ? '-' : '',
           match[5],
-          match[6] ? "." : "",
+          match[6] ? '.' : '',
           match[6],
-        ].join("");
+        ].join('');
       }
-  
+
       // If match is null, return the original cleaned string or handle as needed
       return cleaned;
-  
     } catch (error) {
       // Handle error or return a default value
-      console.error("Error formatting NPWP:", error);
+      console.error('Error formatting NPWP:', error);
       return value;
     }
   };
-  
 
   useEffect(() => {
     if (isChekBox) {
-      updateForm("isChekBox", 'true');
+      updateForm('isChekBox', 'true');
       validate();
     } else {
-      updateForm("isChekBox", 'false');
+      updateForm('isChekBox', 'false');
       validate();
     }
-  }, [isChekBox,]);
+  }, [isChekBox]);
 
   const handleFileChange = async (event: ChangeEvent<HTMLInputElement>) => {
-
     const toastProps: UseToastOptions = {
       duration: 5000,
-      isClosable: true
+      isClosable: true,
+      position: 'top',
     };
+
     let fileBase64 = '';
-    const { name} = event.target;
+    const { name } = event.target;
     const file = event.target.files?.[0];
+
+    // Allowed file extensions
+    const allowedExtensions = ['pdf', 'doc', 'docx', 'png', 'jpg', 'jpeg'];
+
     if (file) {
-      if (typeof file !== 'undefined') {
-        if (file.size > 5000000) {
-          toast({
-            ...toastProps,
-            title: 'Maksimal ukuran file adalah 5MB',
-            status: 'warning'
-          });
-          return;
-        }
-        fileBase64 = await getFileBase64(file);
+      const fileExtension = file.name.split('.').pop()?.toLowerCase(); // Extract file extension
+
+      // Check if the file extension is allowed
+      if (!fileExtension || !allowedExtensions.includes(fileExtension)) {
+        toast({
+          ...toastProps,
+          title:
+            'Format file yang diijinkan adalah .pdf, .doc, .docx, .png, .jpg, atau .jpeg',
+          status: 'error',
+        });
+        event.target.value = '';
+        return;
       }
-      updateForm(name, fileBase64);
-      validate();
+
+      // Check for file size
+      if (file.size > 5000000) {
+        toast({
+          ...toastProps,
+          title: 'Maksimal ukuran file adalah 5MB',
+          status: 'error',
+        });
+        event.target.value = '';
+        return;
+      }
+
+      // Convert file to Base64
+      fileBase64 = await getFileBase64(file);
+      updateForm(name, fileBase64); // Update form with the Base64 string
+      validate(); // Perform form validation
     }
   };
 
   const mutation = useMutation({
-    mutationFn: (data: RegisterProps) => registerUser(data)
+    mutationFn: (data: RegisterProps) => registerUser(data),
   });
 
   const handleSubmit = async (e: ChangeEvent<HTMLFormElement>) => {
@@ -197,14 +236,15 @@ const form: React.FC<FormProps> = ({ type, required, isPKP }) => {
       const urlParams = new URLSearchParams({
         activation: 'otp',
         email: form.email,
-        redirect: (router.query?.next || '/') as string
+        redirect: (router.query?.next || '/') as string,
       });
       router.push(`${router.route}?${urlParams}`);
     }
 
     const toastProps: UseToastOptions = {
       duration: 5000,
-      isClosable: true
+      isClosable: true,
+      position: 'top',
     };
 
     switch (response?.reason) {
@@ -212,7 +252,7 @@ const form: React.FC<FormProps> = ({ type, required, isPKP }) => {
         toast({
           ...toastProps,
           title: 'Email sudah digunakan',
-          status: 'warning'
+          status: 'warning',
         });
         break;
       case 'NOT_ACTIVE':
@@ -220,147 +260,205 @@ const form: React.FC<FormProps> = ({ type, required, isPKP }) => {
         toast({
           ...toastProps,
           title: 'Akun belum aktif',
-          description: <>Akun sudah terdaftar namun belum aktif. <Link href={activationUrl} className="underline">Klik untuk aktivasi akun</Link></>,
-          status: 'warning'
+          description: (
+            <>
+              Akun sudah terdaftar namun belum aktif.{' '}
+              <Link href={activationUrl} className='underline'>
+                Klik untuk aktivasi akun
+              </Link>
+            </>
+          ),
+          status: 'warning',
         });
         break;
     }
   };
   return (
     <>
-    <BottomPopup
+      <BottomPopup
         className=''
         title='Contoh SPPKP'
         active={isExample}
         close={() => setIsExample(false)}
       >
         <div className='flex p-2'>
-        <Image
-                src='/images/NO-SPPKP-FORMAT-TEMPLATE.jpg'
-                alt='Contoh SPPKP'
-                className='w-full h-full '
-                width={800}
-                height={800}
-                quality={100}
-              />
+          <Image
+            src='/images/NO-SPPKP-FORMAT-TEMPLATE.jpg'
+            alt='Contoh SPPKP'
+            className='w-full h-full '
+            width={800}
+            height={800}
+            quality={100}
+          />
         </div>
       </BottomPopup>
-    <form className="mt-6 grid grid-cols-1 gap-y-4" onSubmit={handleSubmit}>
-      <div>
-        <label htmlFor='email' className="font-bold">Email Bisnis {!isPKP && !required && <span className='font-normal text-gray_r-11'>(opsional)</span>}</label>
-
-        <input
-          type='text'
-          id='email_partner'
-          name='email_partner'
-          placeholder='example@email.com'
-          value={!required ? form.email_partner : ''}
-          className={`form-input mt-3 ${required ? 'cursor-no-drop' : ''}`}
-          disabled={required}
-          contentEditable={required}
-          readOnly={required}
-          onChange={handleInputChange}
-          autoComplete="username"
-          aria-invalid={!required && isPKP && !!errors.email_partner}
-
-        />
-
-        {!required && isPKP && !!errors.email_partner && <span className="form-msg-danger">{errors.email_partner}</span>}
-      </div>
-
-      <div className="">
-        <label className="font-bold" htmlFor="company">
-          Nama Bisnis 
-        </label>
-        <div className="flex justify-between items-start gap-2 max-h-12 min-h-12 text-sm">
-          <div className='w-4/5 pr-1'>
-            <Controller
-              name='companyType'
-              control={control}
-              render={(props) => <HookFormSelect {...props} options={companyTypes} disabled={required} placeholder="Badan Usaha"/>}
+      <form className='mt-6 grid grid-cols-1 gap-y-4' onSubmit={handleSubmit}>
+        <div>
+          <label htmlFor='email' className='font-bold'>
+            Email Bisnis{' '}
+            {!isPKP && !required && (
+              <span className='font-normal text-gray_r-11'>(opsional)</span>
+            )}
+          </label>
+
+          <input
+            type='text'
+            id='email_partner'
+            name='email_partner'
+            placeholder='example@email.com'
+            value={!required ? form.email_partner : ''}
+            className={`form-input mt-3 ${required ? 'cursor-no-drop' : ''}`}
+            disabled={required}
+            contentEditable={required}
+            readOnly={required}
+            onChange={handleInputChange}
+            autoComplete='username'
+            aria-invalid={
+              chekValid && !required && isPKP && !!errors.email_partner
+            }
+          />
+
+          {chekValid && !required && isPKP && !!errors.email_partner && (
+            <span className='form-msg-danger'>{errors.email_partner}</span>
+          )}
+        </div>
+
+        <div className=''>
+          <label className='font-bold' htmlFor='company'>
+            Nama Bisnis
+          </label>
+          <div className='flex justify-between items-start gap-2 max-h-12 min-h-12 text-sm'>
+            <div className='w-4/5 pr-1'>
+              <Controller
+                name='companyType'
+                control={control}
+                render={(props) => (
+                  <HookFormSelect
+                    {...props}
+                    options={companyTypes}
+                    disabled={required}
+                    placeholder='Badan Usaha'
+                  />
+                )}
               />
-              {!required &&  !!errors.company_type_id && <span className="form-msg-danger">{errors.company_type_id}</span>}
-          </div>
-          <div className="w-[120%]">
-            <input
-              type="text"
-              name="business_name"
-              id="business_name"
-              className="form-input h-12 "
-              placeholder="Nama Perusahaan"
-              autoCapitalize="true"
-              value={form.business_name}
-              aria-invalid={!!errors.business_name}
-              onChange={handleInputChange}
+              {chekValid && !required && !!errors.company_type_id && (
+                <span className='form-msg-danger'>
+                  {errors.company_type_id}
+                </span>
+              )}
+            </div>
+            <div className='w-[120%]'>
+              <input
+                type='text'
+                name='business_name'
+                id='business_name'
+                className='form-input h-12 '
+                placeholder='Nama Perusahaan'
+                autoCapitalize='true'
+                value={form.business_name}
+                aria-invalid={chekValid && !!errors.business_name}
+                onChange={handleInputChange}
               />
 
-            { !!errors.business_name && <span className="form-msg-danger">{errors.business_name}</span>}
+              {chekValid && !!errors.business_name && (
+                <span className='form-msg-danger'>{errors.business_name}</span>
+              )}
+            </div>
           </div>
         </div>
-      </div>
-
-      <div className="mt-8 sm:mt-8">
-        <label className="font-bold" htmlFor="business_name">
-          Klasifikasi Jenis Usaha
-        </label>
-        <Controller
-          name='industry_id'
-          control={control}
-          render={(props) => <HookFormSelect {...props} options={industries} disabled={required} placeholder={'Select industry'}/>}
+
+        <div className='mt-8 sm:mt-8'>
+          <label className='font-bold' htmlFor='business_name'>
+            Klasifikasi Jenis Usaha
+          </label>
+          <Controller
+            name='industry_id'
+            control={control}
+            render={(props) => (
+              <HookFormSelect
+                {...props}
+                options={industries}
+                disabled={required}
+                placeholder={'Select industry'}
+              />
+            )}
+          />
+          {selectedCategory && (
+            <span className='text-gray_r-11 text-xs'>
+              Kategori : {selectedCategory}
+            </span>
+          )}
+          {chekValid && !required && !!errors.industry_id && (
+            <span className='form-msg-danger'>{errors.industry_id}</span>
+          )}
+        </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={chekValid && !required && !!errors.alamat_bisnis}
+          />
+
+          {chekValid && !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
+            type='text'
+            id='nama_wajib_pajak'
+            name='nama_wajib_pajak'
+            placeholder='Masukan nama lengkap anda'
+            value={!required ? form.nama_wajib_pajak : ''}
+            className={`form-input mt-3 ${required ? 'cursor-no-drop' : ''}`}
+            disabled={required}
+            contentEditable={required}
+            readOnly={required}
+            onChange={handleInputChange}
+            aria-invalid={
+              chekValid && isPKP && !required && !!errors.nama_wajib_pajak
+            }
           />
-          {selectedCategory && 
-            <span className='text-gray_r-11 text-xs'>Kategori : {selectedCategory}</span>
-          }
-          {!required && !!errors.industry_id && <span className="form-msg-danger">{errors.industry_id}</span>}
-      </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
-          type='text'
-          id='nama_wajib_pajak'
-          name='nama_wajib_pajak'
-          placeholder='Masukan nama lengkap anda'
-          value={!required?  form.nama_wajib_pajak : ''}
-          className={`form-input mt-3 ${required ? 'cursor-no-drop' : ''}`}
-          disabled={required}
-          contentEditable={required}
-          readOnly={required}
-          onChange={handleInputChange}
-          aria-invalid={isPKP && !required && !!errors.nama_wajib_pajak}
-        />
-
-        {isPKP && !required && !!errors.nama_wajib_pajak && <span className="form-msg-danger">{errors.nama_wajib_pajak}</span>}
-      </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
+
+          {chekValid && isPKP && !required && !!errors.nama_wajib_pajak && (
+            <span className='form-msg-danger'>{errors.nama_wajib_pajak}</span>
+          )}
+        </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'
@@ -368,128 +466,174 @@ const form: React.FC<FormProps> = ({ type, required, isPKP }) => {
                 onChange={handleChange}
               />
               <span className='text-caption-2 ml-2 font-normal italic'>
-                sama dengan alamat bisnis? 
+                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
-          type="tel"
-          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 ? formattedNpwp : ""}
-          maxLength={21} // Set maximum length to 16 characters
-          onChange={(e) => {
-            if (!required) {
-              const unformatted = e.target.value.replace(/\D/g, ""); // Remove all non-digit characters
-              const formattedValue = formatNpwp(unformatted); // Format the value
-              setUnformattedNpwp(unformatted); // Store unformatted value
-              setFormattedNpwp(formattedValue); // Store formatted value
-              handleInputChangeNpwp({ ...e, target: { ...e.target, value: unformatted } }); // Update form state with unformatted value
+            </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
+                : ''
             }
-          }}
-          aria-invalid={!required && !!errors.npwp}
-        />
+            className={`form-input mt-3 ${required ? 'cursor-no-drop' : ''}`}
+            disabled={isChekBox || required}
+            contentEditable={required}
+            readOnly={required}
+            onChange={handleInputChange}
+            aria-invalid={
+              chekValid && isPKP && !required && !!errors.alamat_wajib_pajak
+            }
+          />
 
-        {!required && !!errors.npwp && <span className="form-msg-danger">{errors.npwp}</span>}
-      </div>
+          {chekValid && isPKP && !required && !!errors.alamat_wajib_pajak && (
+            <span className='form-msg-danger'>{errors.alamat_wajib_pajak}</span>
+          )}
+        </div>
 
-      <div>
-        <label htmlFor='sppkp' className="font-bold flex flex-row items-center justify-between"> 
-          <div className="flex flex-row items-center">
-            Nomor SPPKP { !required && <span className='ml-2 font-normal text-gray_r-11'>(opsional) </span>}
-          </div>
-              {<div onClick={() => setIsExample(!isExample)} className="rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400" >
+        <div>
+          <label htmlFor='npwp' className='font-bold'>
+            Nomor NPWP{' '}
+            {!isPKP && !required && (
+              <span className='font-normal text-gray_r-11'>(opsional)</span>
+            )}
+          </label>
+
+          <input
+            type='tel'
+            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 ? formattedNpwp : ''}
+            maxLength={21} // Set maximum length to 16 characters
+            onChange={(e) => {
+              if (!required) {
+                const unformatted = e.target.value.replace(/\D/g, ''); // Remove all non-digit characters
+                const formattedValue = formatNpwp(unformatted); // Format the value
+                setUnformattedNpwp(unformatted); // Store unformatted value
+                setFormattedNpwp(formattedValue); // Store formatted value
+                handleInputChangeNpwp({
+                  ...e,
+                  target: { ...e.target, value: unformatted },
+                }); // Update form state with unformatted value
+              }
+            }}
+            aria-invalid={chekValid && !required && !!errors.npwp}
+          />
+
+          {chekValid && !required && !!errors.npwp && (
+            <span className='form-msg-danger'>{errors.npwp}</span>
+          )}
+        </div>
+
+        <div>
+          <label
+            htmlFor='sppkp'
+            className='font-bold flex flex-row items-center justify-between'
+          >
+            <div className='flex flex-row items-center'>
+              Nomor SPPKP{' '}
+              {!required && (
+                <span className='ml-2 font-normal text-gray_r-11'>
+                  (opsional){' '}
+                </span>
+              )}
+            </div>
+            {
+              <div
+                onClick={() => setIsExample(!isExample)}
+                className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
+              >
                 <EyeIcon className={`w-4 ${isDesktop && 'mr-2'}`} />
-                {isDesktop &&
-                <p className="font-light text-xs">Lihat Contoh</p> 
-                }
-              </div>}
+                {isDesktop && (
+                  <p className='font-light text-xs'>Lihat Contoh</p>
+                )}
+              </div>
+            }
           </label>
 
+          <input
+            type='tel'
+            id='sppkp'
+            name='sppkp'
+            className={`form-input mt-3 ${required ? 'cursor-no-drop' : ''}`}
+            disabled={required}
+            contentEditable={required}
+            readOnly={required}
+            placeholder='X-XXXPKP/WJPXXX/XX.XXXX/XXXX'
+            onChange={handleInputChange}
+            value={!required ? form.sppkp : ''}
+            aria-invalid={chekValid && !required && !!errors.sppkp}
+          />
+
+          {chekValid && !required && !!errors.sppkp && (
+            <span className='form-msg-danger'>{errors.sppkp}</span>
+          )}
+        </div>
 
-        <input
-          type='tel'
-          id='sppkp'
-          name='sppkp'
-          className={`form-input mt-3 ${required ? 'cursor-no-drop' : ''}`}
-          disabled={required}
-          contentEditable={required}
-          readOnly={required}
-          placeholder='X-XXXPKP/WJPXXX/XX.XXXX/XXXX'
-          onChange={handleInputChange}
-          value={!required ? form.sppkp : ''}
-          aria-invalid={!required && !!errors.sppkp}
-        />
-
-        {!required && !!errors.sppkp && <span className="form-msg-danger">{errors.sppkp}</span>}
-      </div>
-
-      <div>
-        <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"
-          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
-        />
-
-        {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 {!isPKP && !required && <span className='font-normal text-gray_r-11'>(opsional)</span>}</label>
-
-        <input
-          type="file"
-          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
-        />
-
-        {isPKP && !required && !!errors.sppkp_document && <span className="form-msg-danger">{errors.sppkp_document}</span>}
-      </div>
-    </form>
+        <div>
+          <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'
+            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
+          />
+
+          {chekValid && 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{' '}
+            {!isPKP && !required && (
+              <span className='font-normal text-gray_r-11'>(opsional)</span>
+            )}
+          </label>
+
+          <input
+            type='file'
+            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
+          />
+
+          {chekValid && isPKP && !required && !!errors.sppkp_document && (
+            <span className='form-msg-danger'>{errors.sppkp_document}</span>
+          )}
+        </div>
+      </form>
     </>
-  )
-}
+  );
+};
 
 export default form;
-- 
cgit v1.2.3


From 689ee880bde0fae548e55316789e8bae852fe7d7 Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Wed, 11 Sep 2024 11:40:32 +0700
Subject: <iman> update mobile view

---
 .../modules/register/components/FormBisnis.tsx     | 79 ++++++++++++++--------
 1 file changed, 52 insertions(+), 27 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 2080ae75..bc3e1405 100644
--- a/src-migrate/modules/register/components/FormBisnis.tsx
+++ b/src-migrate/modules/register/components/FormBisnis.tsx
@@ -292,7 +292,14 @@ const form: React.FC<FormProps> = ({ type, required, isPKP, chekValid }) => {
           />
         </div>
       </BottomPopup>
-      <form className='mt-6 grid grid-cols-1 gap-y-4' onSubmit={handleSubmit}>
+      <form
+        className={` ${
+          type === 'bisnis'
+            ? 'mt-6 grid grid-cols-1 gap-y-4'
+            : 'mt-6 grid grid-rows-5 grid-flow-col gap-x-4 gap-y-2'
+        }`}
+        onSubmit={handleSubmit}
+      >
         <div>
           <label htmlFor='email' className='font-bold'>
             Email Bisnis{' '}
@@ -307,7 +314,9 @@ const form: React.FC<FormProps> = ({ type, required, isPKP, chekValid }) => {
             name='email_partner'
             placeholder='example@email.com'
             value={!required ? form.email_partner : ''}
-            className={`form-input mt-3 ${required ? 'cursor-no-drop' : ''}`}
+            className={`form-input max-h-11 mt-3 ${
+              required ? 'cursor-no-drop' : ''
+            }`}
             disabled={required}
             contentEditable={required}
             readOnly={required}
@@ -323,12 +332,12 @@ const form: React.FC<FormProps> = ({ type, required, isPKP, chekValid }) => {
           )}
         </div>
 
-        <div className=''>
+        <div>
           <label className='font-bold' htmlFor='company'>
             Nama Bisnis
           </label>
-          <div className='flex justify-between items-start gap-2 max-h-12 min-h-12 text-sm'>
-            <div className='w-4/5 pr-1'>
+          <div className='flex justify-between items-start gap-2 max-h-12 min-h-12 text-sm mt-3'>
+            <div className='w-4/5 pr-1 max-h-11'>
               <Controller
                 name='companyType'
                 control={control}
@@ -347,12 +356,12 @@ const form: React.FC<FormProps> = ({ type, required, isPKP, chekValid }) => {
                 </span>
               )}
             </div>
-            <div className='w-[120%]'>
+            <div className='w-[120%] '>
               <input
                 type='text'
                 name='business_name'
                 id='business_name'
-                className='form-input h-12 '
+                className='form-input max-h-11'
                 placeholder='Nama Perusahaan'
                 autoCapitalize='true'
                 value={form.business_name}
@@ -367,22 +376,24 @@ const form: React.FC<FormProps> = ({ type, required, isPKP, chekValid }) => {
           </div>
         </div>
 
-        <div className='mt-8 sm:mt-8'>
+        <div className='mt-8 md:mt-0'>
           <label className='font-bold' htmlFor='business_name'>
             Klasifikasi Jenis Usaha
           </label>
-          <Controller
-            name='industry_id'
-            control={control}
-            render={(props) => (
-              <HookFormSelect
-                {...props}
-                options={industries}
-                disabled={required}
-                placeholder={'Select industry'}
-              />
-            )}
-          />
+          <div className='mt-5 max-h-10'>
+            <Controller
+              name='industry_id'
+              control={control}
+              render={(props) => (
+                <HookFormSelect
+                  {...props}
+                  options={industries}
+                  disabled={required}
+                  placeholder={'Select industry'}
+                />
+              )}
+            />
+          </div>
           {selectedCategory && (
             <span className='text-gray_r-11 text-xs'>
               Kategori : {selectedCategory}
@@ -404,7 +415,9 @@ const form: React.FC<FormProps> = ({ type, required, isPKP, chekValid }) => {
             name='alamat_bisnis'
             placeholder='Masukan alamat bisnis anda'
             value={!required ? form.alamat_bisnis : ''}
-            className={`form-input mt-3 ${required ? 'cursor-no-drop' : ''}`}
+            className={`form-input mt-3 max-h-11 ${
+              required ? 'cursor-no-drop' : ''
+            }`}
             disabled={required}
             contentEditable={required}
             readOnly={required}
@@ -431,7 +444,9 @@ const form: React.FC<FormProps> = ({ type, required, isPKP, chekValid }) => {
             name='nama_wajib_pajak'
             placeholder='Masukan nama lengkap anda'
             value={!required ? form.nama_wajib_pajak : ''}
-            className={`form-input mt-3 ${required ? 'cursor-no-drop' : ''}`}
+            className={`form-input mt-3 max-h-11 ${
+              required ? 'cursor-no-drop' : ''
+            }`}
             disabled={required}
             contentEditable={required}
             readOnly={required}
@@ -483,7 +498,9 @@ const form: React.FC<FormProps> = ({ type, required, isPKP, chekValid }) => {
                   : form.alamat_wajib_pajak
                 : ''
             }
-            className={`form-input mt-3 ${required ? 'cursor-no-drop' : ''}`}
+            className={`form-input max-h-11 mt-3 ${
+              required ? 'cursor-no-drop' : ''
+            }`}
             disabled={isChekBox || required}
             contentEditable={required}
             readOnly={required}
@@ -510,7 +527,9 @@ const form: React.FC<FormProps> = ({ type, required, isPKP, chekValid }) => {
             type='tel'
             id='npwp'
             name='npwp'
-            className={`form-input mt-3 ${required ? 'cursor-no-drop' : ''}`}
+            className={`form-input max-h-11 mt-3 ${
+              required ? 'cursor-no-drop' : ''
+            }`}
             disabled={required}
             contentEditable={required}
             readOnly={required}
@@ -567,7 +586,9 @@ const form: React.FC<FormProps> = ({ type, required, isPKP, chekValid }) => {
             type='tel'
             id='sppkp'
             name='sppkp'
-            className={`form-input mt-3 ${required ? 'cursor-no-drop' : ''}`}
+            className={`form-input max-h-11 mt-3 ${
+              required ? 'cursor-no-drop' : ''
+            }`}
             disabled={required}
             contentEditable={required}
             readOnly={required}
@@ -594,7 +615,9 @@ const form: React.FC<FormProps> = ({ type, required, isPKP, chekValid }) => {
             type='file'
             id='npwp_document'
             name='npwp_document'
-            className={`form-input mt-3 ${required ? 'cursor-no-drop' : ''}`}
+            className={`form-input ${
+              type === 'bisnis' ? '' : 'border-none'
+            } mt-3 ${required ? 'cursor-no-drop' : ''}`}
             disabled={required}
             contentEditable={required}
             readOnly={required}
@@ -619,7 +642,9 @@ const form: React.FC<FormProps> = ({ type, required, isPKP, chekValid }) => {
             type='file'
             id='sppkp_document'
             name='sppkp_document'
-            className={`form-input mt-3 ${required ? 'cursor-no-drop' : ''}`}
+            className={`form-input ${
+              type === 'bisnis' ? '' : 'border-none'
+            } mt-3 ${required ? 'cursor-no-drop' : ''}`}
             disabled={required}
             contentEditable={required}
             readOnly={required}
-- 
cgit v1.2.3


From 62ad06bf66519e0491355edd4171cff71992500d Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Wed, 11 Sep 2024 11:54:44 +0700
Subject: <iman> update mobile view

---
 src-migrate/modules/register/components/FormBisnis.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 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 bc3e1405..6631cb3b 100644
--- a/src-migrate/modules/register/components/FormBisnis.tsx
+++ b/src-migrate/modules/register/components/FormBisnis.tsx
@@ -296,7 +296,7 @@ const form: React.FC<FormProps> = ({ type, required, isPKP, chekValid }) => {
         className={` ${
           type === 'bisnis'
             ? 'mt-6 grid grid-cols-1 gap-y-4'
-            : 'mt-6 grid grid-rows-5 grid-flow-col gap-x-4 gap-y-2'
+            : 'mt-6 grid grid-cols-2 gap-x-4 gap-y-2'
         }`}
         onSubmit={handleSubmit}
       >
@@ -380,7 +380,7 @@ const form: React.FC<FormProps> = ({ type, required, isPKP, chekValid }) => {
           <label className='font-bold' htmlFor='business_name'>
             Klasifikasi Jenis Usaha
           </label>
-          <div className='mt-5 max-h-10'>
+          <div className='max-h-10'>
             <Controller
               name='industry_id'
               control={control}
-- 
cgit v1.2.3


From 499954a8be814850103eece2dbd0306d6246989d Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Thu, 12 Sep 2024 15:12:42 +0700
Subject: <iman> update new register

---
 .../modules/register/components/FormBisnis.tsx     | 66 +++++++++++++++++++++-
 1 file changed, 63 insertions(+), 3 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 6631cb3b..dd9cd72f 100644
--- a/src-migrate/modules/register/components/FormBisnis.tsx
+++ b/src-migrate/modules/register/components/FormBisnis.tsx
@@ -1,4 +1,4 @@
-import { ChangeEvent, useEffect, useMemo, useState } from 'react';
+import { ChangeEvent, useEffect, useMemo, useRef, useState } from 'react';
 import { useMutation } from 'react-query';
 import { useRegisterStore } from '../stores/useRegisterStore';
 import { RegisterProps } from '~/types/auth';
@@ -56,6 +56,16 @@ const form: React.FC<FormProps> = ({ type, required, isPKP, chekValid }) => {
   const router = useRouter();
   const toast = useToast();
 
+  const emailRef = useRef<HTMLInputElement>(null);
+  const businessNameRef = useRef<HTMLInputElement>(null);
+  const comppanyTypeRef = useRef<HTMLInputElement>(null);
+  const industryRef = useRef<HTMLDivElement>(null);
+  const addressRef = useRef<HTMLInputElement>(null);
+  const namaWajibPajakRef = useRef<HTMLInputElement>(null);
+  const alamatWajibPajakRef = useRef<HTMLInputElement>(null);
+  const npwpRef = useRef<HTMLInputElement>(null);
+  const sppkpRef = useRef<HTMLInputElement>(null);
+
   useEffect(() => {
     const loadCompanyTypes = async () => {
       const dataCompanyTypes = await odooApi(
@@ -227,6 +237,49 @@ const form: React.FC<FormProps> = ({ type, required, isPKP, chekValid }) => {
     mutationFn: (data: RegisterProps) => registerUser(data),
   });
 
+  useEffect(() => {
+    const loadIndustries = async () => {
+      const response = await mutation.mutateAsync(form);
+      if (!response?.register) {
+        // Logic to focus on first invalid input
+        if (errors.email_partner && emailRef.current) {
+          emailRef.current.focus();
+          return;
+        }
+        if (errors.company_type_id && businessNameRef.current) {
+          businessNameRef.current.focus();
+          return;
+        }
+
+        if (errors.business_name && businessNameRef.current) {
+          businessNameRef.current.focus();
+          return;
+        }
+
+        if (errors.industry_id && industryRef.current) {
+          industryRef.current.scrollIntoView();
+          return;
+        }
+
+        if (errors.alamat_bisnis && addressRef.current) {
+          addressRef.current.focus();
+          return;
+        }
+
+        if (errors.npwp && npwpRef.current) {
+          npwpRef.current.focus();
+          return;
+        }
+
+        if (errors.sppkp && sppkpRef.current) {
+          sppkpRef.current.focus();
+          return;
+        }
+      }
+    };
+    loadIndustries();
+  }, [chekValid, form, errors]);
+
   const handleSubmit = async (e: ChangeEvent<HTMLFormElement>) => {
     e.preventDefault();
 
@@ -322,6 +375,7 @@ const form: React.FC<FormProps> = ({ type, required, isPKP, chekValid }) => {
             readOnly={required}
             onChange={handleInputChange}
             autoComplete='username'
+            ref={emailRef}
             aria-invalid={
               chekValid && !required && isPKP && !!errors.email_partner
             }
@@ -337,7 +391,7 @@ const form: React.FC<FormProps> = ({ type, required, isPKP, chekValid }) => {
             Nama Bisnis
           </label>
           <div className='flex justify-between items-start gap-2 max-h-12 min-h-12 text-sm mt-3'>
-            <div className='w-4/5 pr-1 max-h-11'>
+            <div className='w-4/5 pr-1 max-h-11' ref={businessNameRef}>
               <Controller
                 name='companyType'
                 control={control}
@@ -365,6 +419,7 @@ const form: React.FC<FormProps> = ({ type, required, isPKP, chekValid }) => {
                 placeholder='Nama Perusahaan'
                 autoCapitalize='true'
                 value={form.business_name}
+                ref={businessNameRef}
                 aria-invalid={chekValid && !!errors.business_name}
                 onChange={handleInputChange}
               />
@@ -380,7 +435,7 @@ const form: React.FC<FormProps> = ({ type, required, isPKP, chekValid }) => {
           <label className='font-bold' htmlFor='business_name'>
             Klasifikasi Jenis Usaha
           </label>
-          <div className='max-h-10'>
+          <div className='max-h-10' ref={industryRef}>
             <Controller
               name='industry_id'
               control={control}
@@ -421,6 +476,7 @@ const form: React.FC<FormProps> = ({ type, required, isPKP, chekValid }) => {
             disabled={required}
             contentEditable={required}
             readOnly={required}
+            ref={addressRef}
             onChange={handleInputChange}
             aria-invalid={chekValid && !required && !!errors.alamat_bisnis}
           />
@@ -451,6 +507,7 @@ const form: React.FC<FormProps> = ({ type, required, isPKP, chekValid }) => {
             contentEditable={required}
             readOnly={required}
             onChange={handleInputChange}
+            ref={namaWajibPajakRef}
             aria-invalid={
               chekValid && isPKP && !required && !!errors.nama_wajib_pajak
             }
@@ -505,6 +562,7 @@ const form: React.FC<FormProps> = ({ type, required, isPKP, chekValid }) => {
             contentEditable={required}
             readOnly={required}
             onChange={handleInputChange}
+            ref={alamatWajibPajakRef}
             aria-invalid={
               chekValid && isPKP && !required && !!errors.alamat_wajib_pajak
             }
@@ -533,6 +591,7 @@ const form: React.FC<FormProps> = ({ type, required, isPKP, chekValid }) => {
             disabled={required}
             contentEditable={required}
             readOnly={required}
+            ref={npwpRef}
             placeholder='000.000.000.0-000.000'
             value={!required ? formattedNpwp : ''}
             maxLength={21} // Set maximum length to 16 characters
@@ -592,6 +651,7 @@ const form: React.FC<FormProps> = ({ type, required, isPKP, chekValid }) => {
             disabled={required}
             contentEditable={required}
             readOnly={required}
+            ref={sppkpRef}
             placeholder='X-XXXPKP/WJPXXX/XX.XXXX/XXXX'
             onChange={handleInputChange}
             value={!required ? form.sppkp : ''}
-- 
cgit v1.2.3


From aaf907c834343970e1d30b3ef49c13ed5f9d34ed Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Tue, 17 Sep 2024 09:01:04 +0700
Subject: <iman> add focus error when button submit click

---
 src-migrate/modules/register/components/FormBisnis.tsx | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 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 dd9cd72f..2ac998c9 100644
--- a/src-migrate/modules/register/components/FormBisnis.tsx
+++ b/src-migrate/modules/register/components/FormBisnis.tsx
@@ -26,6 +26,7 @@ interface FormProps {
   required: boolean;
   isPKP: boolean;
   chekValid: boolean;
+  buttonSubmitClick: boolean;
 }
 
 interface industry_id {
@@ -39,7 +40,13 @@ interface companyType {
   label: string;
 }
 
-const form: React.FC<FormProps> = ({ type, required, isPKP, chekValid }) => {
+const form: React.FC<FormProps> = ({
+  type,
+  required,
+  isPKP,
+  chekValid,
+  buttonSubmitClick,
+}) => {
   const { form, errors, updateForm, validate } = useRegisterStore();
   const { control, watch, setValue } = useForm();
   const [selectedCategory, setSelectedCategory] = useState<string>('');
@@ -278,7 +285,7 @@ const form: React.FC<FormProps> = ({ type, required, isPKP, chekValid }) => {
       }
     };
     loadIndustries();
-  }, [chekValid, form, errors]);
+  }, [buttonSubmitClick]);
 
   const handleSubmit = async (e: ChangeEvent<HTMLFormElement>) => {
     e.preventDefault();
-- 
cgit v1.2.3


From 810c5da6e26fdfc4f29df75dca13c0fdb787f34a Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Wed, 18 Sep 2024 09:29:41 +0700
Subject: <iman> update auto scrool to when error

---
 .../modules/register/components/FormBisnis.tsx     | 69 ++++++++++++++--------
 1 file changed, 46 insertions(+), 23 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 2ac998c9..50f3522b 100644
--- a/src-migrate/modules/register/components/FormBisnis.tsx
+++ b/src-migrate/modules/register/components/FormBisnis.tsx
@@ -47,6 +47,8 @@ const form: React.FC<FormProps> = ({
   chekValid,
   buttonSubmitClick,
 }) => {
+  console.log('buttonSubmitClick', buttonSubmitClick);
+
   const { form, errors, updateForm, validate } = useRegisterStore();
   const { control, watch, setValue } = useForm();
   const [selectedCategory, setSelectedCategory] = useState<string>('');
@@ -65,13 +67,15 @@ const form: React.FC<FormProps> = ({
 
   const emailRef = useRef<HTMLInputElement>(null);
   const businessNameRef = useRef<HTMLInputElement>(null);
-  const comppanyTypeRef = useRef<HTMLInputElement>(null);
+  const companyTypeRef = useRef<HTMLInputElement>(null);
   const industryRef = useRef<HTMLDivElement>(null);
   const addressRef = useRef<HTMLInputElement>(null);
   const namaWajibPajakRef = useRef<HTMLInputElement>(null);
   const alamatWajibPajakRef = useRef<HTMLInputElement>(null);
   const npwpRef = useRef<HTMLInputElement>(null);
   const sppkpRef = useRef<HTMLInputElement>(null);
+  const docsSppkpRef = useRef<HTMLInputElement>(null);
+  const docsNpwpRef = useRef<HTMLInputElement>(null);
 
   useEffect(() => {
     const loadCompanyTypes = async () => {
@@ -248,44 +252,55 @@ const form: React.FC<FormProps> = ({
     const loadIndustries = async () => {
       const response = await mutation.mutateAsync(form);
       if (!response?.register) {
-        // Logic to focus on first invalid input
+        const options: ScrollIntoViewOptions = {
+          behavior: 'smooth',
+          block: 'center',
+        };
         if (errors.email_partner && emailRef.current) {
-          emailRef.current.focus();
+          emailRef.current.scrollIntoView(options);
           return;
         }
-        if (errors.company_type_id && businessNameRef.current) {
-          businessNameRef.current.focus();
+        if (errors.company_type_id && companyTypeRef.current) {
+          companyTypeRef.current.scrollIntoView(options);
           return;
         }
 
         if (errors.business_name && businessNameRef.current) {
-          businessNameRef.current.focus();
+          businessNameRef.current.scrollIntoView(options);
           return;
         }
 
         if (errors.industry_id && industryRef.current) {
-          industryRef.current.scrollIntoView();
+          industryRef.current.scrollIntoView(options);
           return;
         }
 
         if (errors.alamat_bisnis && addressRef.current) {
-          addressRef.current.focus();
+          addressRef.current.scrollIntoView(options);
           return;
         }
 
         if (errors.npwp && npwpRef.current) {
-          npwpRef.current.focus();
+          npwpRef.current.scrollIntoView(options);
           return;
         }
 
         if (errors.sppkp && sppkpRef.current) {
-          sppkpRef.current.focus();
+          sppkpRef.current.scrollIntoView(options);
+          return;
+        }
+        if (errors.sppkp_document && docsSppkpRef.current) {
+          docsSppkpRef.current.scrollIntoView(options);
+          return;
+        }
+        if (errors.npwp_document && docsNpwpRef.current) {
+          docsNpwpRef.current.scrollIntoView(options);
           return;
         }
       }
     };
     loadIndustries();
-  }, [buttonSubmitClick]);
+  }, [buttonSubmitClick, chekValid]);
 
   const handleSubmit = async (e: ChangeEvent<HTMLFormElement>) => {
     e.preventDefault();
@@ -374,7 +389,7 @@ const form: React.FC<FormProps> = ({
             name='email_partner'
             placeholder='example@email.com'
             value={!required ? form.email_partner : ''}
-            className={`form-input max-h-11 mt-3 ${
+            className={`form-input max-h-11 mt-3 transition-all duration-500 ${
               required ? 'cursor-no-drop' : ''
             }`}
             disabled={required}
@@ -398,7 +413,10 @@ const form: React.FC<FormProps> = ({
             Nama Bisnis
           </label>
           <div className='flex justify-between items-start gap-2 max-h-12 min-h-12 text-sm mt-3'>
-            <div className='w-4/5 pr-1 max-h-11' ref={businessNameRef}>
+            <div
+              className='w-4/5 pr-1 max-h-11 transition-all duration-500'
+              ref={companyTypeRef}
+            >
               <Controller
                 name='companyType'
                 control={control}
@@ -422,7 +440,7 @@ const form: React.FC<FormProps> = ({
                 type='text'
                 name='business_name'
                 id='business_name'
-                className='form-input max-h-11'
+                className='form-input max-h-11 transition-all duration-500'
                 placeholder='Nama Perusahaan'
                 autoCapitalize='true'
                 value={form.business_name}
@@ -442,7 +460,10 @@ const form: React.FC<FormProps> = ({
           <label className='font-bold' htmlFor='business_name'>
             Klasifikasi Jenis Usaha
           </label>
-          <div className='max-h-10' ref={industryRef}>
+          <div
+            className='max-h-10 transition-all duration-500'
+            ref={industryRef}
+          >
             <Controller
               name='industry_id'
               control={control}
@@ -477,7 +498,7 @@ const form: React.FC<FormProps> = ({
             name='alamat_bisnis'
             placeholder='Masukan alamat bisnis anda'
             value={!required ? form.alamat_bisnis : ''}
-            className={`form-input mt-3 max-h-11 ${
+            className={`form-input mt-3 max-h-11 transition-all duration-500 ${
               required ? 'cursor-no-drop' : ''
             }`}
             disabled={required}
@@ -507,7 +528,7 @@ const form: React.FC<FormProps> = ({
             name='nama_wajib_pajak'
             placeholder='Masukan nama lengkap anda'
             value={!required ? form.nama_wajib_pajak : ''}
-            className={`form-input mt-3 max-h-11 ${
+            className={`form-input mt-3 max-h-11 transition-all duration-500${
               required ? 'cursor-no-drop' : ''
             }`}
             disabled={required}
@@ -536,7 +557,7 @@ const form: React.FC<FormProps> = ({
                 <span className='font-normal text-gray_r-11'>(opsional)</span>
               )}
             </p>
-            <div className='flex items-center ml-2 mt-1'>
+            <div className='flex items-center ml-2 mt-1 '>
               <Checkbox
                 borderColor='gray.600'
                 colorScheme='red'
@@ -562,7 +583,7 @@ const form: React.FC<FormProps> = ({
                   : form.alamat_wajib_pajak
                 : ''
             }
-            className={`form-input max-h-11 mt-3 ${
+            className={`form-input max-h-11 mt-3 transition-all duration-500 ${
               required ? 'cursor-no-drop' : ''
             }`}
             disabled={isChekBox || required}
@@ -592,7 +613,7 @@ const form: React.FC<FormProps> = ({
             type='tel'
             id='npwp'
             name='npwp'
-            className={`form-input max-h-11 mt-3 ${
+            className={`form-input max-h-11 mt-3 transition-all duration-500 ${
               required ? 'cursor-no-drop' : ''
             }`}
             disabled={required}
@@ -652,7 +673,7 @@ const form: React.FC<FormProps> = ({
             type='tel'
             id='sppkp'
             name='sppkp'
-            className={`form-input max-h-11 mt-3 ${
+            className={`form-input max-h-11 mt-3 transition-all duration-500 ${
               required ? 'cursor-no-drop' : ''
             }`}
             disabled={required}
@@ -682,11 +703,12 @@ const form: React.FC<FormProps> = ({
             type='file'
             id='npwp_document'
             name='npwp_document'
-            className={`form-input ${
+            className={`form-input transition-all duration-500 ${
               type === 'bisnis' ? '' : 'border-none'
             } mt-3 ${required ? 'cursor-no-drop' : ''}`}
             disabled={required}
             contentEditable={required}
+            ref={docsNpwpRef}
             readOnly={required}
             onChange={handleFileChange}
             accept='.pdf,.doc,.docx,.png,.jpg,.jpeg' // Filter file types
@@ -709,11 +731,12 @@ const form: React.FC<FormProps> = ({
             type='file'
             id='sppkp_document'
             name='sppkp_document'
-            className={`form-input ${
+            className={`form-input transition-all duration-500 ${
               type === 'bisnis' ? '' : 'border-none'
             } mt-3 ${required ? 'cursor-no-drop' : ''}`}
             disabled={required}
             contentEditable={required}
+            ref={docsSppkpRef}
             readOnly={required}
             onChange={handleFileChange}
             accept='.pdf,.doc,.docx,.png,.jpg,.jpeg' // Filter file types
-- 
cgit v1.2.3


From c8ecabc13896f93571710881344ec8c2f8ae4b73 Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Wed, 18 Sep 2024 09:36:21 +0700
Subject: <iman> delete console log

---
 src-migrate/modules/register/components/FormBisnis.tsx | 2 --
 1 file changed, 2 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 50f3522b..70ed6bee 100644
--- a/src-migrate/modules/register/components/FormBisnis.tsx
+++ b/src-migrate/modules/register/components/FormBisnis.tsx
@@ -47,8 +47,6 @@ const form: React.FC<FormProps> = ({
   chekValid,
   buttonSubmitClick,
 }) => {
-  console.log('buttonSubmitClick', buttonSubmitClick);
-
   const { form, errors, updateForm, validate } = useRegisterStore();
   const { control, watch, setValue } = useForm();
   const [selectedCategory, setSelectedCategory] = useState<string>('');
-- 
cgit v1.2.3


From fad165af76bb008076e96199f173fbe27b7835a8 Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Wed, 18 Sep 2024 17:18:47 +0700
Subject: <iman> update alamat yang sama

---
 src-migrate/modules/register/components/FormBisnis.tsx | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

(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 70ed6bee..bf00c28e 100644
--- a/src-migrate/modules/register/components/FormBisnis.tsx
+++ b/src-migrate/modules/register/components/FormBisnis.tsx
@@ -48,6 +48,7 @@ const form: React.FC<FormProps> = ({
   buttonSubmitClick,
 }) => {
   const { form, errors, updateForm, validate } = useRegisterStore();
+  console.log('form', form);
   const { control, watch, setValue } = useForm();
   const [selectedCategory, setSelectedCategory] = useState<string>('');
   const [isChekBox, setIsChekBox] = useState<boolean>(false);
@@ -128,9 +129,23 @@ const form: React.FC<FormProps> = ({
 
   const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
     const { name, value } = event.target;
-    updateForm('type_acc', `business`);
+
+    updateForm('type_acc', 'business');
     updateForm('is_pkp', `${isPKP}`);
+
+    // Update form dengan nilai terbaru dari input yang berubah
     updateForm(name, value);
+
+    // Jika checkbox aktif, sinkronisasi alamat_wajib_pajak dengan alamat_bisnis
+    if (isChekBox) {
+      if (name === 'alamat_wajib_pajak') {
+        updateForm('alamat_bisnis', value);
+      } else if (name === 'alamat_bisnis') {
+        updateForm('alamat_wajib_pajak', value);
+      }
+    }
+
+    // Validasi setelah perubahan dilakukan
     validate();
   };
 
@@ -188,6 +203,7 @@ const form: React.FC<FormProps> = ({
   useEffect(() => {
     if (isChekBox) {
       updateForm('isChekBox', 'true');
+      updateForm('alamat_wajib_pajak', `${form.alamat_bisnis}`);
       validate();
     } else {
       updateForm('isChekBox', 'false');
-- 
cgit v1.2.3


From 6d5ace9505543bcfbc5c830b86613fef00101cbd Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Wed, 18 Sep 2024 17:20:01 +0700
Subject: <iman> delete console log

---
 src-migrate/modules/register/components/FormBisnis.tsx | 1 -
 1 file changed, 1 deletion(-)

(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 bf00c28e..042bf507 100644
--- a/src-migrate/modules/register/components/FormBisnis.tsx
+++ b/src-migrate/modules/register/components/FormBisnis.tsx
@@ -48,7 +48,6 @@ const form: React.FC<FormProps> = ({
   buttonSubmitClick,
 }) => {
   const { form, errors, updateForm, validate } = useRegisterStore();
-  console.log('form', form);
   const { control, watch, setValue } = useForm();
   const [selectedCategory, setSelectedCategory] = useState<string>('');
   const [isChekBox, setIsChekBox] = useState<boolean>(false);
-- 
cgit v1.2.3


From c651d654c2c87d26aab184025b7d0e4d8e74e65f Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Thu, 19 Sep 2024 10:11:47 +0700
Subject: <iman> fix otp send 3 times

---
 .../modules/register/components/FormBisnis.tsx     | 56 +---------------------
 1 file changed, 2 insertions(+), 54 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 042bf507..5ee19e58 100644
--- a/src-migrate/modules/register/components/FormBisnis.tsx
+++ b/src-migrate/modules/register/components/FormBisnis.tsx
@@ -256,15 +256,11 @@ const form: React.FC<FormProps> = ({
       validate(); // Perform form validation
     }
   };
-
-  const mutation = useMutation({
-    mutationFn: (data: RegisterProps) => registerUser(data),
-  });
+  const isFormValid = useMemo(() => Object.keys(errors).length === 0, [errors]);
 
   useEffect(() => {
     const loadIndustries = async () => {
-      const response = await mutation.mutateAsync(form);
-      if (!response?.register) {
+      if (!isFormValid) {
         const options: ScrollIntoViewOptions = {
           behavior: 'smooth',
           block: 'center',
@@ -314,53 +310,6 @@ const form: React.FC<FormProps> = ({
     };
     loadIndustries();
   }, [buttonSubmitClick, chekValid]);
-
-  const handleSubmit = async (e: ChangeEvent<HTMLFormElement>) => {
-    e.preventDefault();
-
-    const response = await mutation.mutateAsync(form);
-
-    if (response?.register === true) {
-      const urlParams = new URLSearchParams({
-        activation: 'otp',
-        email: form.email,
-        redirect: (router.query?.next || '/') as string,
-      });
-      router.push(`${router.route}?${urlParams}`);
-    }
-
-    const toastProps: UseToastOptions = {
-      duration: 5000,
-      isClosable: true,
-      position: 'top',
-    };
-
-    switch (response?.reason) {
-      case 'EMAIL_USED':
-        toast({
-          ...toastProps,
-          title: 'Email sudah digunakan',
-          status: 'warning',
-        });
-        break;
-      case 'NOT_ACTIVE':
-        const activationUrl = `${router.route}?activation=email`;
-        toast({
-          ...toastProps,
-          title: 'Akun belum aktif',
-          description: (
-            <>
-              Akun sudah terdaftar namun belum aktif.{' '}
-              <Link href={activationUrl} className='underline'>
-                Klik untuk aktivasi akun
-              </Link>
-            </>
-          ),
-          status: 'warning',
-        });
-        break;
-    }
-  };
   return (
     <>
       <BottomPopup
@@ -386,7 +335,6 @@ const form: React.FC<FormProps> = ({
             ? 'mt-6 grid grid-cols-1 gap-y-4'
             : 'mt-6 grid grid-cols-2 gap-x-4 gap-y-2'
         }`}
-        onSubmit={handleSubmit}
       >
         <div>
           <label htmlFor='email' className='font-bold'>
-- 
cgit v1.2.3


From 36601aba6017aeef16f89351eb487238402ab52e Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Tue, 24 Sep 2024 16:12:50 +0700
Subject: <iman> update Perapihan Tag

---
 src-migrate/modules/register/components/FormBisnis.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(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 5ee19e58..e4cf3442 100644
--- a/src-migrate/modules/register/components/FormBisnis.tsx
+++ b/src-migrate/modules/register/components/FormBisnis.tsx
@@ -325,7 +325,7 @@ const form: React.FC<FormProps> = ({
             className='w-full h-full '
             width={800}
             height={800}
-            quality={100}
+            quality={85}
           />
         </div>
       </BottomPopup>
-- 
cgit v1.2.3

