summaryrefslogtreecommitdiff
path: root/src-migrate/modules/register/components/FormBisnis.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src-migrate/modules/register/components/FormBisnis.tsx')
-rw-r--r--src-migrate/modules/register/components/FormBisnis.tsx88
1 files changed, 44 insertions, 44 deletions
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
generated by cgit v1.2.3 (git 2.25.1) at 2026-04-18 01:14:49 +0000