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 ++++++++++++++-------
 .../register/components/RegistrasiBisnis.tsx       |  37 ++++---
 .../modules/register/stores/useRegisterStore.ts    |  22 ++--
 src-migrate/types/auth.ts                          |   1 +
 src-migrate/validations/auth.ts                    |  17 ++-
 5 files changed, 132 insertions(+), 63 deletions(-)

(limited to 'src-migrate')

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
diff --git a/src-migrate/modules/register/components/RegistrasiBisnis.tsx b/src-migrate/modules/register/components/RegistrasiBisnis.tsx
index 91bf128f..235e158a 100644
--- a/src-migrate/modules/register/components/RegistrasiBisnis.tsx
+++ b/src-migrate/modules/register/components/RegistrasiBisnis.tsx
@@ -1,4 +1,4 @@
-import { useMemo, useState } from "react";
+import { ChangeEvent, useEffect, useMemo, useState } from "react";
 import FormBisnis from "./FormBisnis";
 import Form from "./Form";
 import TermCondition from "./TermCondition";
@@ -13,14 +13,19 @@ import { useRegisterStore } from "../stores/useRegisterStore";
 import { useMutation } from "react-query";
 import { RegisterProps } from "~/types/auth";
 import { registerUser } from "~/services/auth";
+import router from "next/router";
+import toast from "react-hot-toast";
+import { useRouter } from "next/router";
+import { UseToastOptions, useToast } from "@chakra-ui/react";
+import Link from "next/link";
 
 const RegistrasiBisnis = () => {
-  const [isPKP, setIsPKP] = useState(false);
+  const [isPKP, setIsPKP] = useState(true);
   const [isTerdaftar, setIsTerdaftar] = useState(false);
   const [isIndividuRequired, setIsIndividuRequired] = useState(true);
   const [isBisnisClicked, setisBisnisClicked] = useState(true);
   const [selectedValue, setSelectedValue] = useState('PKP');
-  const [selectedValueBisnis, setSelectedValueBisnis] = useState('true');
+  const [selectedValueBisnis, setSelectedValueBisnis] = useState('false');
    const {
     form,
     formBisnis,
@@ -28,17 +33,30 @@ const RegistrasiBisnis = () => {
     isValidCaptcha,
     errors,
     updateForm,
+    updateFormBisnis,
+    validateFormBisnis,
     validate,
   } = useRegisterStore()
   const isFormValid = useMemo(() => Object.keys(errors).length === 0, [errors])
+  const toast = useToast()
   const mutation = useMutation({
     mutationFn: (data: RegisterProps) => registerUser(data)
   })
 
+  useEffect(() => {
+    if (selectedValue === "PKP") {
+      updateFormBisnis("is_pkp", 'true');
+      validateFormBisnis();
+    } else {
+      updateFormBisnis("is_pkp", 'false');
+      validateFormBisnis();
+    }
+  }, [selectedValue,]);
+
   const handleChange = (value: string) => {
     setSelectedValue(value);
     if (value === "PKP") {
-      setIsPKP(true);
+      validateFormBisnis();
       setIsIndividuRequired(true); // Show and require Individu form
     } else {
       setIsPKP(false);
@@ -51,7 +69,7 @@ const RegistrasiBisnis = () => {
     if (value === "true") {
       setIsTerdaftar(true);
     } else {
-      setIsTerdaftar(true);
+      setIsTerdaftar(false);
     }
   };
 
@@ -63,15 +81,10 @@ const RegistrasiBisnis = () => {
     setisBisnisClicked(!isBisnisClicked)
   };
 
-  const handleSubmit = () => {
+  const handleSubmit = async () => {
     console.log("form",form)
     console.log("form Bisnis",formBisnis)
   };
-  console.log("isFormValid",isFormValid)
-  console.log("isCheckedTNC",isCheckedTNC)
-  console.log("mutation.isLoading",mutation.isLoading)
-  console.log("isValidCaptcha",isValidCaptcha)
-
   return (
     <>
       <div className="mt-4">
@@ -131,7 +144,7 @@ const RegistrasiBisnis = () => {
                   </Stack>
                 </RadioGroup>
               </div>
-              <FormBisnis type="bisnis" required={isIndividuRequired} />
+              <FormBisnis type="bisnis" required={isTerdaftar} />
             </div>
           )}
         </div>
diff --git a/src-migrate/modules/register/stores/useRegisterStore.ts b/src-migrate/modules/register/stores/useRegisterStore.ts
index 1ee4c10d..7b414ec6 100644
--- a/src-migrate/modules/register/stores/useRegisterStore.ts
+++ b/src-migrate/modules/register/stores/useRegisterStore.ts
@@ -1,7 +1,7 @@
 import { create } from 'zustand';
 import { RegisterProps } from '~/types/auth';
 import { registerSchema } from '~/validations/auth';
-import { ZodError } from 'zod';
+import { boolean, ZodError } from 'zod';
 
 type State = {
   form: RegisterProps;
@@ -27,32 +27,40 @@ type Action = {
 
 export const useRegisterStore = create<State & Action>((set, get) => ({
   form: {
-    company: '',
+    business_name: '',
     companyType: '',
     name: '',
     email: '',
+    email_partner: '',
     password: '',
     phone: '',
-    document: '',
+    sppkp_document: '',
+    npwp_document: '',
     nameWajibPajak: '',
     industry: '',
     badanUsaha: '',
     jenisUsaha: '',
-    npwp: ''
+    npwp: '',
+    nama_wajib_pajak : '',
+    is_pkp: '',
   },
   formBisnis: {
     companyType: '',
-    company: '',
+    business_name: '',
     name: '',
+    nama_wajib_pajak : '',
     email: '',
+    email_partner: '',
     password: '',
     phone: '',
-    document: '',
+    sppkp_document: '',
+    npwp_document: '',
     nameWajibPajak: '',
     industry: '',
     badanUsaha: '',
     jenisUsaha: '',
-    npwp: ''
+    npwp: '',
+    is_pkp:'',
   },
   updateForm: (name, value) =>
     set((state) => ({ form: { ...state.form, [name]: value } })),
diff --git a/src-migrate/types/auth.ts b/src-migrate/types/auth.ts
index e93a475a..593e120f 100644
--- a/src-migrate/types/auth.ts
+++ b/src-migrate/types/auth.ts
@@ -10,6 +10,7 @@ export type AuthProps = {
   name: string;
   email: string;
   phone: string;
+  npwp: string;
   mobile: string;
   external: boolean;
   company: boolean;
diff --git a/src-migrate/validations/auth.ts b/src-migrate/validations/auth.ts
index 166fd926..8c0cce28 100644
--- a/src-migrate/validations/auth.ts
+++ b/src-migrate/validations/auth.ts
@@ -2,7 +2,9 @@ import { z } from 'zod';
 
 export const registerSchema = z.object({
   name: z.string().min(1, { message: 'Nama harus diisi' }),
-  document: z.string().min(1, { message: 'Nama harus diisi' }),
+  nama_wajib_pajak: z.string().min(1, { message: 'Nama harus diisi' }),
+  sppkp_document: z.string().min(1, { message: 'document harus diisi' }),
+  npwp_document: z.string().min(1, { message: 'document harus diisi' }),
   nameWajibPajak: z.string().min(1, { message: 'Nama wajib pajak harus diisi' }),
   industry: z.string().min(1, { message: 'industri harus diisi' }),
   badanUsaha: z.string().min(1, { message: 'badan usaha harus dipilih' }),
@@ -11,18 +13,23 @@ export const registerSchema = z.object({
     .string()
     .min(1, { message: 'Email harus diisi' })
     .email({ message: 'Email harus menggunakan format example@mail.com' }),
+  email_partner: z
+    .string()
+    .min(1, { message: 'Email harus diisi' })
+    .email({ message: 'Email harus menggunakan format example@mail.com' }),
   password: z.string().min(6, { message: 'Password minimal 6 karakter' }),
-  company: z.string().optional(),
+  business_name: z.string().optional(),
   phone: z
     .string()
     .min(1, { message: 'Nomor telepon harus diisi' })
     .refine((val) => /^\d{10,12}$/.test(val), {
       message: 'Format nomor telepon tidak valid, contoh: 081234567890',
     }),
-    npwp: z
+  npwp: z
     .string()
     .min(1, { message: 'NPWP harus diisi' })
-    .refine((val) => /^\d{10,12}$/.test(val), {
-      message: 'Format nomor telepon tidak valid, contoh: 081234567890',
+    .refine((val) => /^\d{15}$/.test(val), {
+      message: 'Format NPWP tidak valid, NPWP harus terdiri dari minimal 15 digit angka.',
     }),
+
 });
-- 
cgit v1.2.3