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