summaryrefslogtreecommitdiff
path: root/src-migrate/modules
diff options
context:
space:
mode:
Diffstat (limited to 'src-migrate/modules')
-rw-r--r--src-migrate/modules/register/components/Form.tsx32
-rw-r--r--src-migrate/modules/register/components/FormBisnis.tsx69
2 files changed, 64 insertions, 37 deletions
diff --git a/src-migrate/modules/register/components/Form.tsx b/src-migrate/modules/register/components/Form.tsx
index b04e763c..55d542f2 100644
--- a/src-migrate/modules/register/components/Form.tsx
+++ b/src-migrate/modules/register/components/Form.tsx
@@ -26,7 +26,7 @@ const Form: React.FC<FormProps> = ({
}) => {
const { form, isCheckedTNC, isValidCaptcha, errors, updateForm, validate } =
useRegisterStore();
-
+ console.log('buttonSubmitClick', buttonSubmitClick);
const isFormValid = useMemo(() => Object.keys(errors).length === 0, [errors]);
const router = useRouter();
@@ -35,7 +35,7 @@ const Form: React.FC<FormProps> = ({
const emailRef = useRef<HTMLInputElement>(null);
const nameRef = useRef<HTMLInputElement>(null);
const passwordRef = useRef<HTMLInputElement>(null);
- const teleponRef = useRef<HTMLDivElement>(null);
+ const phoneRef = useRef<HTMLInputElement>(null);
const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
const { name, value } = event.target;
@@ -51,29 +51,33 @@ 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.name && nameRef.current) {
- nameRef.current.focus();
+ nameRef.current.scrollIntoView(options);
return;
}
if (errors.password && passwordRef.current) {
- passwordRef.current.focus();
+ passwordRef.current.scrollIntoView(options);
return;
}
- if (errors.phone && teleponRef.current) {
- teleponRef.current.scrollIntoView();
+ if (errors.phone && phoneRef.current) {
+ phoneRef.current.scrollIntoView(options);
return;
}
}
};
loadIndustries();
- }, [buttonSubmitClick]);
+ }, [buttonSubmitClick, chekValid]);
const handleSubmit = async (e: ChangeEvent<HTMLFormElement>) => {
e.preventDefault();
@@ -133,7 +137,7 @@ const Form: React.FC<FormProps> = ({
type='text'
id='name'
name='name'
- className='form-input mt-3'
+ className='form-input mt-3 transition-all duration-700'
placeholder='Masukan nama lengkap anda'
value={form.name}
ref={nameRef}
@@ -155,7 +159,7 @@ const Form: React.FC<FormProps> = ({
type='text'
id='email'
name='email'
- className='form-input mt-3'
+ className='form-input mt-3 transition-all duration-500'
placeholder='Masukan alamat email anda'
value={form.email}
ref={emailRef}
@@ -177,7 +181,7 @@ const Form: React.FC<FormProps> = ({
type='password'
name='password'
id='password'
- className='form-input mt-3'
+ className='form-input mt-3 transition-all duration-500'
placeholder='••••••••••••'
value={form.password}
ref={passwordRef}
@@ -200,10 +204,10 @@ const Form: React.FC<FormProps> = ({
type='tel'
id='phone'
name='phone'
- className='form-input mt-3'
- ref={passwordRef}
+ className='form-input mt-3 transition-all duration-500'
placeholder='08xxxxxxxx'
value={form.phone}
+ ref={phoneRef}
onChange={handleInputChange}
aria-invalid={chekValid && !!errors.phone}
/>
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
generated by cgit v1.2.3 (git 2.25.1) at 2026-04-18 06:28:31 +0000