From 499954a8be814850103eece2dbd0306d6246989d Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Thu, 12 Sep 2024 15:12:42 +0700 Subject: update new register --- .../modules/register/components/FormBisnis.tsx | 66 +++++++- src/lib/auth/components/CompanyProfile.jsx | 179 +++++++++++++-------- tsconfig.json | 18 +-- 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 = ({ type, required, isPKP, chekValid }) => { const router = useRouter(); const toast = useToast(); + const emailRef = useRef(null); + const businessNameRef = useRef(null); + const comppanyTypeRef = useRef(null); + const industryRef = useRef(null); + const addressRef = useRef(null); + const namaWajibPajakRef = useRef(null); + const alamatWajibPajakRef = useRef(null); + const npwpRef = useRef(null); + const sppkpRef = useRef(null); + useEffect(() => { const loadCompanyTypes = async () => { const dataCompanyTypes = await odooApi( @@ -227,6 +237,49 @@ const form: React.FC = ({ 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) => { e.preventDefault(); @@ -322,6 +375,7 @@ const form: React.FC = ({ 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 = ({ type, required, isPKP, chekValid }) => { Nama Bisnis
-
+
= ({ 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 = ({ type, required, isPKP, chekValid }) => { -
+
= ({ 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 = ({ 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 = ({ 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 = ({ 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 = ({ 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 = () => {
- {isOpen && ( -
{ - e.preventDefault() - setChangeConfirmation(true) - }}> + { + e.preventDefault(); + setChangeConfirmation(true); + }} + >
} + render={(props) => ( + + )} />
@@ -139,7 +163,9 @@ const CompanyProfile = () => { } + render={(props) => ( + + )} />
@@ -153,14 +179,35 @@ const CompanyProfile = () => {
- +
- - -
- + +
+
+ + +
+
+ +