summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src-migrate/modules/register/components/FormBisnis.tsx66
-rw-r--r--src/lib/auth/components/CompanyProfile.jsx179
-rw-r--r--tsconfig.json18
3 files changed, 183 insertions, 80 deletions
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 : ''}
diff --git a/src/lib/auth/components/CompanyProfile.jsx b/src/lib/auth/components/CompanyProfile.jsx
index e37decc9..fc3d149b 100644
--- a/src/lib/auth/components/CompanyProfile.jsx
+++ b/src/lib/auth/components/CompanyProfile.jsx
@@ -1,18 +1,18 @@
-import odooApi from '@/core/api/odooApi'
-import HookFormSelect from '@/core/components/elements/Select/HookFormSelect'
-import useAuth from '@/core/hooks/useAuth'
-import addressApi from '@/lib/address/api/addressApi'
-import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/24/outline'
-import { useEffect, useState } from 'react'
-import { Controller, useForm } from 'react-hook-form'
-import { toast } from 'react-hot-toast'
-import BottomPopup from '@/core/components/elements/Popup/BottomPopup'
+import odooApi from '@/core/api/odooApi';
+import HookFormSelect from '@/core/components/elements/Select/HookFormSelect';
+import useAuth from '@/core/hooks/useAuth';
+import addressApi from '@/lib/address/api/addressApi';
+import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/24/outline';
+import { useEffect, useState } from 'react';
+import { Controller, useForm } from 'react-hook-form';
+import { toast } from 'react-hot-toast';
+import BottomPopup from '@/core/components/elements/Popup/BottomPopup';
const CompanyProfile = () => {
- const [changeConfirmation, setChangeConfirmation] = useState(false)
- const auth = useAuth()
- const [isOpen, setIsOpen] = useState(false)
- const toggle = () => setIsOpen(!isOpen)
+ const [changeConfirmation, setChangeConfirmation] = useState(false);
+ const auth = useAuth();
+ const [isOpen, setIsOpen] = useState(false);
+ const toggle = () => setIsOpen(!isOpen);
const { register, setValue, control, handleSubmit } = useForm({
defaultValues: {
industry: '',
@@ -20,64 +20,78 @@ const CompanyProfile = () => {
name: '',
taxName: '',
npwp: '',
- alamat_wajib_pajak:'',
- }
- })
+ alamat_wajib_pajak: '',
+ },
+ });
- const [industries, setIndustries] = useState([])
+ const [industries, setIndustries] = useState([]);
useEffect(() => {
const loadIndustries = async () => {
- const dataIndustries = await odooApi('GET', '/api/v1/partner/industry')
- setIndustries(dataIndustries?.map((o) => ({ value: o.id, label: o.name })))
- }
- loadIndustries()
- }, [])
+ const dataIndustries = await odooApi('GET', '/api/v1/partner/industry');
+ setIndustries(
+ dataIndustries?.map((o) => ({ value: o.id, label: o.name }))
+ );
+ };
+ loadIndustries();
+ }, []);
- const [companyTypes, setCompanyTypes] = useState([])
+ const [companyTypes, setCompanyTypes] = useState([]);
useEffect(() => {
const loadCompanyTypes = async () => {
- const dataCompanyTypes = await odooApi('GET', '/api/v1/partner/company_type')
- setCompanyTypes(dataCompanyTypes?.map((o) => ({ value: o.id, label: o.name })))
- }
- loadCompanyTypes()
- }, [])
+ const dataCompanyTypes = await odooApi(
+ 'GET',
+ '/api/v1/partner/company_type'
+ );
+ setCompanyTypes(
+ dataCompanyTypes?.map((o) => ({ value: o.id, label: o.name }))
+ );
+ };
+ loadCompanyTypes();
+ }, []);
useEffect(() => {
const loadProfile = async () => {
- const dataProfile = await addressApi({ id: auth.parentId })
- setValue('name', dataProfile.name)
- setValue('industry', dataProfile.industryId)
- setValue('companyType', dataProfile.companyTypeId)
- setValue('taxName', dataProfile.taxName)
- setValue('npwp', dataProfile.npwp)
- setValue('alamat_wajib_pajak', dataProfile.alamatWajibPajak)
- }
- if (auth) loadProfile()
- }, [auth, setValue])
+ const dataProfile = await addressApi({ id: auth.parentId });
+ console.log('dataProfile', dataProfile);
+ setValue('name', dataProfile.name);
+ setValue('industry', dataProfile.industryId);
+ setValue('companyType', dataProfile.companyTypeId);
+ setValue('taxName', dataProfile.taxName);
+ setValue('npwp', dataProfile.npwp);
+ setValue('alamat_wajib_pajak', dataProfile.alamatWajibPajak);
+ setValue('alamat_bisnis', dataProfile.alamatBisnis);
+ };
+ if (auth) loadProfile();
+ }, [auth, setValue]);
const onSubmitHandler = async (values) => {
- if(changeConfirmation){
+ if (changeConfirmation) {
const data = {
...values,
- id_user:auth.partnerId,
+ id_user: auth.partnerId,
company_type_id: values.companyType,
industry_id: values.industry,
tax_name: values.taxName,
- alamat_lengkap_text:values.alamat_wajib_pajak
- }
- const isUpdated = await odooApi('PUT', `/api/v1/partner/${auth.parentId}`, data)
+ alamat_lengkap_text: values.alamat_wajib_pajak,
+ street: values.alamat_bisnis,
+ };
+ const isUpdated = await odooApi(
+ 'PUT',
+ `/api/v1/partner/${auth.parentId}`,
+ data
+ );
if (isUpdated?.id) {
- toast.success('Berhasil mengubah profil', { duration: 1500 })
- return
+ toast.success('Berhasil mengubah profil', { duration: 1500 });
+ return;
}
- toast.error('Terjadi kesalahan internal')
+ toast.error('Terjadi kesalahan internal');
}
- }
+ };
const handleConfirmSubmit = () => {
- setChangeConfirmation(false)
- handleSubmit(onSubmitHandler)()
- }
+ setChangeConfirmation(false);
+ handleSubmit(onSubmitHandler)();
+ };
return (
<>
@@ -106,11 +120,16 @@ const CompanyProfile = () => {
</button>
</div>
</BottomPopup>
- <button type='button' onClick={toggle} className='p-4 flex items-center text-left w-full'>
+ <button
+ type='button'
+ onClick={toggle}
+ className='p-4 flex items-center text-left w-full'
+ >
<div>
<div className='font-semibold mb-2'>Informasi Usaha</div>
<div className='text-gray_r-11'>
- Dibawah ini adalah data usaha yang anda masukkan, periksa kembali data usaha anda.
+ Dibawah ini adalah data usaha yang anda masukkan, periksa kembali
+ data usaha anda.
</div>
</div>
<div className='ml-auto p-2 bg-gray_r-3 rounded'>
@@ -120,17 +139,22 @@ const CompanyProfile = () => {
</button>
{isOpen && (
- <form className='p-4 border-t border-gray_r-6' onSubmit={(e) => {
- e.preventDefault()
- setChangeConfirmation(true)
- }}>
+ <form
+ className='p-4 border-t border-gray_r-6'
+ onSubmit={(e) => {
+ e.preventDefault();
+ setChangeConfirmation(true);
+ }}
+ >
<div className='grid grid-cols-1 sm:grid-cols-2 gap-4'>
<div>
<label className='block mb-3'>Klasifikasi Jenis Usaha</label>
<Controller
name='industry'
control={control}
- render={(props) => <HookFormSelect {...props} options={industries} />}
+ render={(props) => (
+ <HookFormSelect {...props} options={industries} />
+ )}
/>
</div>
<div className='flex flex-wrap'>
@@ -139,7 +163,9 @@ const CompanyProfile = () => {
<Controller
name='companyType'
control={control}
- render={(props) => <HookFormSelect {...props} options={companyTypes} />}
+ render={(props) => (
+ <HookFormSelect {...props} options={companyTypes} />
+ )}
/>
</div>
<div className='w-9/12 pl-1'>
@@ -153,14 +179,35 @@ const CompanyProfile = () => {
</div>
<div>
<label>Nama Wajib Pajak</label>
- <input {...register('taxName')} type='text' className='form-input mt-3' />
+ <input
+ {...register('taxName')}
+ type='text'
+ className='form-input mt-3'
+ />
</div>
<div>
- <label>Nomor NPWP</label>
- <input {...register('npwp')} type='text' className='form-input mt-3' />
- </div><div>
<label>Alamat Wajib Pajak</label>
- <input {...register('alamat_wajib_pajak')} type='text' className='form-input mt-3' />
+ <input
+ {...register('alamat_wajib_pajak')}
+ type='text'
+ className='form-input mt-3'
+ />
+ </div>
+ <div>
+ <label>Alamat Bisnis</label>
+ <input
+ {...register('alamat_bisnis')}
+ type='text'
+ className='form-input mt-3'
+ />
+ </div>
+ <div>
+ <label>Nomor NPWP</label>
+ <input
+ {...register('npwp')}
+ type='text'
+ className='form-input mt-3'
+ />
</div>
</div>
<button type='submit' className='btn-yellow w-full mt-6'>
@@ -169,7 +216,7 @@ const CompanyProfile = () => {
</form>
)}
</>
- )
-}
+ );
+};
-export default CompanyProfile
+export default CompanyProfile;
diff --git a/tsconfig.json b/tsconfig.json
index 8613c022..96670169 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,11 +1,7 @@
{
"compilerOptions": {
"target": "ES5",
- "lib": [
- "DOM",
- "DOM.Iterable",
- "ESNext"
- ],
+ "lib": ["DOM", "DOM.Iterable", "ESNext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
@@ -33,10 +29,10 @@
"**/*.ts",
"**/*.tsx",
"**/*.jsx",
- ".next/types/**/*.ts"
-, "src/pages/shop/promo/index.tsx", "src/pages/shop/promo/[slug].jsx" ],
- "exclude": [
- "node_modules",
- "src"
- ]
+ ".next/types/**/*.ts",
+ "src-migrate/**/*",
+ "src/pages/shop/promo/index.tsx",
+ "src/pages/shop/promo/[slug].jsx"
+ ],
+ "exclude": ["node_modules", "src"]
}
generated by cgit v1.2.3 (git 2.25.1) at 2026-04-17 18:55:21 +0000