From 00df44e6f25eaeabc56ebba8b4e9b1cb692928d7 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Tue, 20 Aug 2024 10:27:32 +0700 Subject: add new register --- .../modules/register/components/FormBisnis.tsx | 230 +++++++++++++++++++++ 1 file changed, 230 insertions(+) create mode 100644 src-migrate/modules/register/components/FormBisnis.tsx (limited to 'src-migrate/modules/register/components/FormBisnis.tsx') diff --git a/src-migrate/modules/register/components/FormBisnis.tsx b/src-migrate/modules/register/components/FormBisnis.tsx new file mode 100644 index 00000000..85e37875 --- /dev/null +++ b/src-migrate/modules/register/components/FormBisnis.tsx @@ -0,0 +1,230 @@ +import { ChangeEvent, useMemo } from "react"; +import { useMutation } from "react-query"; +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 Link from "next/link"; +import getFileBase64 from '@/core/utils/getFileBase64' + +interface FormProps { + type: string; + required: boolean; +} + +const Form: React.FC = ({ type, required }) => { + const { + form, + isCheckedTNC, + isValidCaptcha, + errors, + updateForm, + validate, + } = useRegisterStore() + + const isFormValid = useMemo(() => Object.keys(errors).length === 0, [errors]) + + const router = useRouter() + const toast = useToast() + + const handleInputChange = (event: ChangeEvent) => { + const { name, value } = event.target; + updateForm(name, value) + validate() + } + + const handleFileChange = async (event: ChangeEvent) => { + let fileBase64 = '' + const file = event.target.files?.[0]; + if (file) { + if (typeof file !== 'undefined') { + if (file.size > 5000000) { + // toast.error('Maksimal ukuran file adalah 5MB') + return + } + fileBase64 = await getFileBase64(file) + } + updateForm("document", fileBase64); // Menyimpan file ke dalam form state + validate(); + } + } + + const mutation = useMutation({ + mutationFn: (data: RegisterProps) => registerUser(data) + }) + + const handleSubmit = async (e: ChangeEvent) => { + e.preventDefault() + + const response = await mutation.mutateAsync(form) + + if (response?.register === true) { + const urlParams = new URLSearchParams({ + activation: 'otp', + email: form.email, + redirect: (router.query?.next || '/') as string + }) + router.push(`${router.route}?${urlParams}`) + } + + const toastProps: UseToastOptions = { + duration: 5000, + isClosable: true + } + + switch (response?.reason) { + case 'EMAIL_USED': + toast({ + ...toastProps, + title: 'Email sudah digunakan', + status: 'warning' + }) + break; + case 'NOT_ACTIVE': + const activationUrl = `${router.route}?activation=email` + toast({ + ...toastProps, + title: 'Akun belum aktif', + description: <>Akun sudah terdaftar namun belum aktif. Klik untuk aktivasi akun, + status: 'warning' + }) + break + } + } + + + return ( +
+
+ + + + + {!!errors.email && {errors.email}} +
+ +
+ +
+ + + +
+
+ +
+ +
+ +
+ Kategori: Industri Otomotif, Bengkel, Car Wash +
+ +
+ + + + + {!!errors.name && {errors.name}} +
+ +
+ + + + + {!!errors.phone && {errors.phone}} +
+ +
+ + + + + {/* {!!errors.document && {errors.document}} */} +
+ +
+ + + + + {/* {!!errors.document && {errors.document}} */} +
+ + +
+ ) +} + +export default Form \ No newline at end of file -- cgit v1.2.3 From cf0f7a934bcf256d1daeee98e9f66397fb64b1ee Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Tue, 20 Aug 2024 11:47:29 +0700 Subject: update new register --- .../modules/register/components/FormBisnis.tsx | 98 +++++++++++++++------- 1 file changed, 68 insertions(+), 30 deletions(-) (limited to 'src-migrate/modules/register/components/FormBisnis.tsx') diff --git a/src-migrate/modules/register/components/FormBisnis.tsx b/src-migrate/modules/register/components/FormBisnis.tsx index 85e37875..6f94748b 100644 --- a/src-migrate/modules/register/components/FormBisnis.tsx +++ b/src-migrate/modules/register/components/FormBisnis.tsx @@ -1,4 +1,4 @@ -import { ChangeEvent, useMemo } from "react"; +import { ChangeEvent, useEffect, useMemo, useState } from "react"; import { useMutation } from "react-query"; import { useRegisterStore } from "../stores/useRegisterStore"; import { RegisterProps } from "~/types/auth"; @@ -7,12 +7,21 @@ import { useRouter } from "next/router"; import { UseToastOptions, useToast } from "@chakra-ui/react"; import Link from "next/link"; import getFileBase64 from '@/core/utils/getFileBase64' +import { Controller, useForm } from 'react-hook-form' +import HookFormSelect from '@/core/components/elements/Select/HookFormSelect' +import odooApi from "~/libs/odooApi"; interface FormProps { type: string; required: boolean; } +interface Industry { + label: string; + value: string; + category: string; +} + const Form: React.FC = ({ type, required }) => { const { form, @@ -23,11 +32,42 @@ const Form: React.FC = ({ type, required }) => { validate, } = useRegisterStore() + const { control, watch, setValue } = useForm(); + const [selectedCategory, setSelectedCategory] = useState(''); + + const [industries, setIndustries] = useState([]); + const [companyTypes, setCompanyTypes] = useState([]) const isFormValid = useMemo(() => Object.keys(errors).length === 0, [errors]) const router = useRouter() const toast = useToast() + useEffect(() => { + const loadCompanyTypes = async () => { + const dataCompanyTypes = await odooApi('GET', '/api/v1/partner/company_type') + setCompanyTypes(dataCompanyTypes?.map((o: { id: any; name: any; }) => ({ value: o.id, label: o.name }))) + } + loadCompanyTypes() + }, []) + + useEffect(() => { + const loadIndustries = async () => { + const dataIndustries = await odooApi('GET', '/api/v1/partner/industry') + setIndustries(dataIndustries?.map((o: { id: any; name: any; category:any; }) => ({ value: o.id, label: o.name, category:o.category }))) + } + loadIndustries() + }, []) + + const selectedIndustry = watch('industry'); + + useEffect(() => { + const selected = industries.find(industry => industry.value === selectedIndustry); + if (selected) { + setSelectedCategory(selected.category); + } + }, [selectedIndustry, industries]); + + const handleInputChange = (event: ChangeEvent) => { const { name, value } = event.target; updateForm(name, value) @@ -93,7 +133,6 @@ const Form: React.FC = ({ type, required }) => { } } - return (
@@ -119,37 +158,36 @@ const Form: React.FC = ({ type, required }) => { Nama Bisnis (opsional)
- - - -
+
+ } + /> +
+ +
-
+
-
- -
- Kategori: Industri Otomotif, Bengkel, Car Wash + } + /> + Kategori : {selectedCategory}
@@ -216,13 +254,13 @@ const Form: React.FC = ({ type, required }) => { {/* {!!errors.document && {errors.document}} */}
- + */} ) } -- cgit v1.2.3 From 1d3f68f4a61bb084938523dea2869087f915bf61 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Tue, 20 Aug 2024 15:21:31 +0700 Subject: update new register --- .../modules/register/components/FormBisnis.tsx | 135 ++++++++++----------- 1 file changed, 67 insertions(+), 68 deletions(-) (limited to 'src-migrate/modules/register/components/FormBisnis.tsx') diff --git a/src-migrate/modules/register/components/FormBisnis.tsx b/src-migrate/modules/register/components/FormBisnis.tsx index 6f94748b..72921c2b 100644 --- a/src-migrate/modules/register/components/FormBisnis.tsx +++ b/src-migrate/modules/register/components/FormBisnis.tsx @@ -22,41 +22,41 @@ interface Industry { category: string; } -const Form: React.FC = ({ type, required }) => { +const FormBisnis: React.FC = ({ type, required }) => { const { - form, + formBisnis, isCheckedTNC, isValidCaptcha, errors, - updateForm, - validate, + updateFormBisnis, + validateFormBisnis, } = useRegisterStore() const { control, watch, setValue } = useForm(); const [selectedCategory, setSelectedCategory] = useState(''); const [industries, setIndustries] = useState([]); - const [companyTypes, setCompanyTypes] = useState([]) - const isFormValid = useMemo(() => Object.keys(errors).length === 0, [errors]) + const [companyTypes, setCompanyTypes] = useState([]); + const isFormValid = useMemo(() => Object.keys(errors).length === 0, [errors]); - const router = useRouter() - const toast = useToast() + const router = useRouter(); + const toast = useToast(); useEffect(() => { const loadCompanyTypes = async () => { - const dataCompanyTypes = await odooApi('GET', '/api/v1/partner/company_type') - setCompanyTypes(dataCompanyTypes?.map((o: { id: any; name: any; }) => ({ value: o.id, label: o.name }))) - } - loadCompanyTypes() - }, []) + const dataCompanyTypes = await odooApi('GET', '/api/v1/partner/company_type'); + setCompanyTypes(dataCompanyTypes?.map((o: { id: any; name: any; }) => ({ value: o.id, label: o.name }))); + }; + loadCompanyTypes(); + }, []); useEffect(() => { const loadIndustries = async () => { - const dataIndustries = await odooApi('GET', '/api/v1/partner/industry') - setIndustries(dataIndustries?.map((o: { id: any; name: any; category:any; }) => ({ value: o.id, label: o.name, category:o.category }))) - } - loadIndustries() - }, []) + const dataIndustries = await odooApi('GET', '/api/v1/partner/industry'); + setIndustries(dataIndustries?.map((o: { id: any; name: any; category: any; }) => ({ value: o.id, label: o.name, category: o.category }))); + }; + loadIndustries(); + }, []); const selectedIndustry = watch('industry'); @@ -67,51 +67,50 @@ const Form: React.FC = ({ type, required }) => { } }, [selectedIndustry, industries]); - const handleInputChange = (event: ChangeEvent) => { const { name, value } = event.target; - updateForm(name, value) - validate() - } + updateFormBisnis(name, value); + validateFormBisnis(); + }; const handleFileChange = async (event: ChangeEvent) => { - let fileBase64 = '' + let fileBase64 = ''; const file = event.target.files?.[0]; if (file) { if (typeof file !== 'undefined') { if (file.size > 5000000) { // toast.error('Maksimal ukuran file adalah 5MB') - return + return; } - fileBase64 = await getFileBase64(file) + fileBase64 = await getFileBase64(file); } - updateForm("document", fileBase64); // Menyimpan file ke dalam form state - validate(); + updateFormBisnis("document", fileBase64); // Menyimpan file ke dalam formBisnis state + validateFormBisnis(); } - } + }; const mutation = useMutation({ mutationFn: (data: RegisterProps) => registerUser(data) - }) + }); const handleSubmit = async (e: ChangeEvent) => { - e.preventDefault() + e.preventDefault(); - const response = await mutation.mutateAsync(form) + const response = await mutation.mutateAsync(formBisnis); if (response?.register === true) { const urlParams = new URLSearchParams({ activation: 'otp', - email: form.email, + email: formBisnis.email, redirect: (router.query?.next || '/') as string - }) - router.push(`${router.route}?${urlParams}`) + }); + router.push(`${router.route}?${urlParams}`); } const toastProps: UseToastOptions = { duration: 5000, isClosable: true - } + }; switch (response?.reason) { case 'EMAIL_USED': @@ -119,19 +118,19 @@ const Form: React.FC = ({ type, required }) => { ...toastProps, title: 'Email sudah digunakan', status: 'warning' - }) + }); break; case 'NOT_ACTIVE': - const activationUrl = `${router.route}?activation=email` + const activationUrl = `${router.route}?activation=email`; toast({ ...toastProps, title: 'Akun belum aktif', description: <>Akun sudah terdaftar namun belum aktif. Klik untuk aktivasi akun, status: 'warning' - }) - break + }); + break; } - } + }; return (
@@ -144,7 +143,7 @@ const Form: React.FC = ({ type, required }) => { name='email' className='form-input mt-3' placeholder='example@email.com' - value={form.email} + value={formBisnis.email} onChange={handleInputChange} autoComplete="username" aria-invalid={!!errors.email} @@ -158,36 +157,36 @@ const Form: React.FC = ({ type, required }) => { Nama Bisnis (opsional)
-
- } - /> -
- -
+
+ } + /> +
+ +
- } - /> - Kategori : {selectedCategory} + } + /> + Kategori : {selectedCategory}
@@ -199,7 +198,7 @@ const Form: React.FC = ({ type, required }) => { name='name' className='form-input mt-3' placeholder='Masukan nama lengkap anda' - value={form.name} + value={formBisnis.name} onChange={handleInputChange} aria-invalid={!!errors.name} /> @@ -216,7 +215,7 @@ const Form: React.FC = ({ type, required }) => { name='phone' className='form-input mt-3' placeholder='08xxxxxxxx' - value={form.phone} + value={formBisnis.phone} onChange={handleInputChange} aria-invalid={!!errors.phone} /> @@ -265,4 +264,4 @@ const Form: React.FC = ({ type, required }) => { ) } -export default Form \ No newline at end of file +export default FormBisnis; -- cgit v1.2.3 From 2f106583f644e29019828a9e8ed82e23c7c67d0a Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Wed, 21 Aug 2024 10:01:27 +0700 Subject: update view new register --- .../modules/register/components/FormBisnis.tsx | 21 +++++++++++---------- 1 file changed, 11 insertions(+), 10 deletions(-) (limited to 'src-migrate/modules/register/components/FormBisnis.tsx') diff --git a/src-migrate/modules/register/components/FormBisnis.tsx b/src-migrate/modules/register/components/FormBisnis.tsx index 72921c2b..7b301dc5 100644 --- a/src-migrate/modules/register/components/FormBisnis.tsx +++ b/src-migrate/modules/register/components/FormBisnis.tsx @@ -59,15 +59,16 @@ const FormBisnis: React.FC = ({ type, required }) => { }, []); 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) => { + console.log("event",event) const { name, value } = event.target; updateFormBisnis(name, value); validateFormBisnis(); @@ -135,7 +136,7 @@ const FormBisnis: React.FC = ({ type, required }) => { return (
- + = ({ type, required }) => {
-
-
- + - {!!errors.name && {errors.name}} + {!required && !!errors.nama_wajib_pajak && {errors.nama_wajib_pajak}}
- + - {!!errors.phone && {errors.phone}} + {!required && !!errors.npwp && {errors.npwp}}
- + - {/* {!!errors.document && {errors.document}} */} + {!required && !!errors.npwp_document && {errors.npwp_document}}
- + - {/* {!!errors.document && {errors.document}} */} + {!required && !!errors.sppkp_document && {errors.sppkp_document}}
{/*
= ({ type, required, isPKP }) => { {selectedCategory && Kategori : {selectedCategory} } - {!required && selectedCategory === '' && {errors.industry}} + {!required && !!errors.industry && {errors.industry}}
-- cgit v1.2.3 From 453f377e42866cc68a03b2fef0a672590dfd68dd Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Fri, 23 Aug 2024 13:29:30 +0700 Subject: update new register --- src-migrate/modules/register/components/FormBisnis.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) (limited to 'src-migrate/modules/register/components/FormBisnis.tsx') diff --git a/src-migrate/modules/register/components/FormBisnis.tsx b/src-migrate/modules/register/components/FormBisnis.tsx index dec1bbf8..42d7aaa3 100644 --- a/src-migrate/modules/register/components/FormBisnis.tsx +++ b/src-migrate/modules/register/components/FormBisnis.tsx @@ -23,7 +23,7 @@ interface Industry { category: string; } -interface CompanyType { +interface company_type_id { value: string; label: string; } @@ -43,7 +43,7 @@ const FormBisnis: React.FC = ({ type, required, isPKP }) => { const [selectedCompanyId, setSelectedCompanyId] = useState(''); const [industries, setIndustries] = useState([]); - const [companyTypes, setCompanyTypes] = useState([]); + const [companyTypes, setCompanyTypes] = useState([]); const isFormValid = useMemo(() => Object.keys(errors).length === 0, [errors]); const router = useRouter(); @@ -58,13 +58,13 @@ const FormBisnis: React.FC = ({ type, required, isPKP }) => { }, []); useEffect(() => { - const selectedCompanyType = companyTypes.find(company => company.value === watch('companyType')); + const selectedCompanyType = companyTypes.find(company => company.value === watch('company_type_id')); if (selectedCompanyType) { updateFormBisnis("company_type_id", selectedCompanyType?.value); setSelectedCompanyId(selectedCompanyType?.label) validateFormBisnis(); } - }, [watch('companyType'), companyTypes]); + }, [watch('company_type_id'), companyTypes]); useEffect(() => { const selectedIndustryType = industries.find(industry => industry.value === watch('industry')); @@ -183,11 +183,11 @@ const FormBisnis: React.FC = ({ type, required, isPKP }) => {
} /> - {!required && !!errors.companyType && {errors.companyType}} + {!required && !!errors.company_type_id && {errors.company_type_id}}
Date: Fri, 23 Aug 2024 13:42:20 +0700 Subject: update new register --- src-migrate/modules/register/components/FormBisnis.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) (limited to 'src-migrate/modules/register/components/FormBisnis.tsx') diff --git a/src-migrate/modules/register/components/FormBisnis.tsx b/src-migrate/modules/register/components/FormBisnis.tsx index 42d7aaa3..b58f2fec 100644 --- a/src-migrate/modules/register/components/FormBisnis.tsx +++ b/src-migrate/modules/register/components/FormBisnis.tsx @@ -17,7 +17,7 @@ interface FormProps { isPKP: boolean; } -interface Industry { +interface industry_id { label: string; value: string; category: string; @@ -42,7 +42,7 @@ const FormBisnis: React.FC = ({ type, required, isPKP }) => { const [selectedCategory, setSelectedCategory] = useState(''); const [selectedCompanyId, setSelectedCompanyId] = useState(''); - const [industries, setIndustries] = useState([]); + const [industries, setIndustries] = useState([]); const [companyTypes, setCompanyTypes] = useState([]); const isFormValid = useMemo(() => Object.keys(errors).length === 0, [errors]); @@ -67,13 +67,13 @@ const FormBisnis: React.FC = ({ type, required, isPKP }) => { }, [watch('company_type_id'), companyTypes]); useEffect(() => { - const selectedIndustryType = industries.find(industry => industry.value === watch('industry')); + const selectedIndustryType = industries.find(industry => industry.value === watch('industry_id')); if (selectedIndustryType) { updateFormBisnis("industry_id", selectedIndustryType?.value); setSelectedCategory(selectedIndustryType.label); validateFormBisnis(); } - }, [watch('industry'), industries]); + }, [watch('industry_id'), industries]); useEffect(() => { const loadIndustries = async () => { @@ -212,14 +212,14 @@ const FormBisnis: React.FC = ({ type, required, isPKP }) => { Klasifikasi Jenis Usaha } /> {selectedCategory && Kategori : {selectedCategory} } - {!required && !!errors.industry && {errors.industry}} + {!required && !!errors.industry_id && {errors.industry_id}}
-- cgit v1.2.3 From 0bca1bfb2bc7e52a31dde39602dd599d7c640e73 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Sat, 24 Aug 2024 08:46:44 +0700 Subject: update new register --- .../modules/register/components/FormBisnis.tsx | 39 +++++++++++++++------- 1 file changed, 27 insertions(+), 12 deletions(-) (limited to 'src-migrate/modules/register/components/FormBisnis.tsx') diff --git a/src-migrate/modules/register/components/FormBisnis.tsx b/src-migrate/modules/register/components/FormBisnis.tsx index b58f2fec..f969efdf 100644 --- a/src-migrate/modules/register/components/FormBisnis.tsx +++ b/src-migrate/modules/register/components/FormBisnis.tsx @@ -23,13 +23,14 @@ interface industry_id { category: string; } -interface company_type_id { +interface companyType { value: string; label: string; } const FormBisnis: React.FC = ({ type, required, isPKP }) => { const { + form, formBisnis, isCheckedTNC, isValidCaptcha, @@ -43,7 +44,7 @@ const FormBisnis: React.FC = ({ type, required, isPKP }) => { const [selectedCompanyId, setSelectedCompanyId] = useState(''); const [industries, setIndustries] = useState([]); - const [companyTypes, setCompanyTypes] = useState([]); + const [companyTypes, setCompanyTypes] = useState([]); const isFormValid = useMemo(() => Object.keys(errors).length === 0, [errors]); const router = useRouter(); @@ -58,19 +59,19 @@ const FormBisnis: React.FC = ({ type, required, isPKP }) => { }, []); useEffect(() => { - const selectedCompanyType = companyTypes.find(company => company.value === watch('company_type_id')); + const selectedCompanyType = companyTypes.find(company => company.value === watch('companyType')); if (selectedCompanyType) { - updateFormBisnis("company_type_id", selectedCompanyType?.value); + updateFormBisnis("company_type_id", `${selectedCompanyType?.value}`); setSelectedCompanyId(selectedCompanyType?.label) validateFormBisnis(); } - }, [watch('company_type_id'), companyTypes]); + }, [watch('companyType'), companyTypes]); useEffect(() => { const selectedIndustryType = industries.find(industry => industry.value === watch('industry_id')); if (selectedIndustryType) { - updateFormBisnis("industry_id", selectedIndustryType?.value); - setSelectedCategory(selectedIndustryType.label); + updateFormBisnis("industry_id", `${selectedIndustryType?.value}`); + setSelectedCategory(selectedIndustryType.category); validateFormBisnis(); } }, [watch('industry_id'), industries]); @@ -85,15 +86,29 @@ const FormBisnis: React.FC = ({ type, required, isPKP }) => { const handleInputChange = (event: ChangeEvent) => { const { name, value } = event.target; + updateFormBisnis('type_acc',`business`) + updateFormBisnis('is_pkp',`${isPKP}`) updateFormBisnis(name, value); - updateFormBisnis('name','iman'); - updateFormBisnis('email','it@fixcomart.co.id'); - updateFormBisnis('password','Fixcomart378'); - updateFormBisnis('phone','082339129611'); + updateFormBisnis('name',form.name); + updateFormBisnis('email',form.email); + updateFormBisnis('password',form.password); + updateFormBisnis('phone',form.phone); validateFormBisnis(); }; const handleFileChange = async (event: ChangeEvent) => { + // const file = poFile.current.files[0]; + // const name = poNumber.current.value; + // if (typeof file === 'undefined' || !name) { + // toast.error('Nomor dan Dokumen PO harus diisi'); + // return; + // } + // if (file.size > 5000000) { + // toast.error('Maksimal ukuran file adalah 5MB'); + // return; + // } + // const data = { name, file: await getFileBase64(file) }; + let fileBase64 = ''; const { name} = event.target; const file = event.target.files?.[0]; @@ -183,7 +198,7 @@ const FormBisnis: React.FC = ({ type, required, isPKP }) => {
} /> -- cgit v1.2.3 From f0cde08a3fda95b1738a765358022241aea404bf Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Mon, 26 Aug 2024 10:28:15 +0700 Subject: update logic new register validation --- .../modules/register/components/FormBisnis.tsx | 50 +++++++++++----------- 1 file changed, 24 insertions(+), 26 deletions(-) (limited to 'src-migrate/modules/register/components/FormBisnis.tsx') diff --git a/src-migrate/modules/register/components/FormBisnis.tsx b/src-migrate/modules/register/components/FormBisnis.tsx index f969efdf..5d15ab6c 100644 --- a/src-migrate/modules/register/components/FormBisnis.tsx +++ b/src-migrate/modules/register/components/FormBisnis.tsx @@ -28,17 +28,15 @@ interface companyType { label: string; } -const FormBisnis: React.FC = ({ type, required, isPKP }) => { +const form: React.FC = ({ type, required, isPKP }) => { const { form, - formBisnis, isCheckedTNC, isValidCaptcha, errors, - updateFormBisnis, - validateFormBisnis, + updateForm, + validate } = useRegisterStore() - console.log("errors bisnis",errors) const { control, watch, setValue } = useForm(); const [selectedCategory, setSelectedCategory] = useState(''); const [selectedCompanyId, setSelectedCompanyId] = useState(''); @@ -61,18 +59,18 @@ const FormBisnis: React.FC = ({ type, required, isPKP }) => { useEffect(() => { const selectedCompanyType = companyTypes.find(company => company.value === watch('companyType')); if (selectedCompanyType) { - updateFormBisnis("company_type_id", `${selectedCompanyType?.value}`); + updateForm("company_type_id", `${selectedCompanyType?.value}`); setSelectedCompanyId(selectedCompanyType?.label) - validateFormBisnis(); + validate(); } }, [watch('companyType'), companyTypes]); useEffect(() => { const selectedIndustryType = industries.find(industry => industry.value === watch('industry_id')); if (selectedIndustryType) { - updateFormBisnis("industry_id", `${selectedIndustryType?.value}`); + updateForm("industry_id", `${selectedIndustryType?.value}`); setSelectedCategory(selectedIndustryType.category); - validateFormBisnis(); + validate(); } }, [watch('industry_id'), industries]); @@ -86,14 +84,14 @@ const FormBisnis: React.FC = ({ type, required, isPKP }) => { const handleInputChange = (event: ChangeEvent) => { const { name, value } = event.target; - updateFormBisnis('type_acc',`business`) - updateFormBisnis('is_pkp',`${isPKP}`) - updateFormBisnis(name, value); - updateFormBisnis('name',form.name); - updateFormBisnis('email',form.email); - updateFormBisnis('password',form.password); - updateFormBisnis('phone',form.phone); - validateFormBisnis(); + updateForm('type_acc',`business`) + updateForm('is_pkp',`${isPKP}`) + updateForm(name, value); + updateForm('name',form.name); + updateForm('email',form.email); + updateForm('password',form.password); + updateForm('phone',form.phone); + validate(); }; const handleFileChange = async (event: ChangeEvent) => { @@ -120,8 +118,8 @@ const FormBisnis: React.FC = ({ type, required, isPKP }) => { } fileBase64 = await getFileBase64(file); } - updateFormBisnis(name, fileBase64); - validateFormBisnis(); + updateForm(name, fileBase64); + validate(); } }; @@ -132,12 +130,12 @@ const FormBisnis: React.FC = ({ type, required, isPKP }) => { const handleSubmit = async (e: ChangeEvent) => { e.preventDefault(); - const response = await mutation.mutateAsync(formBisnis); + const response = await mutation.mutateAsync(form); if (response?.register === true) { const urlParams = new URLSearchParams({ activation: 'otp', - email: formBisnis.email, + email: form.email, redirect: (router.query?.next || '/') as string }); router.push(`${router.route}?${urlParams}`); @@ -177,7 +175,7 @@ const FormBisnis: React.FC = ({ type, required, isPKP }) => { id='email_partner' name='email_partner' placeholder='example@email.com' - value={!required ? formBisnis.email_partner : ''} + value={!required ? form.email_partner : ''} className={`form-input mt-3 ${required ? 'cursor-no-drop' : ''}`} disabled={required} contentEditable={required} @@ -212,7 +210,7 @@ const FormBisnis: React.FC = ({ type, required, isPKP }) => { className="form-input h-full " placeholder="Nama Perusahaan" autoCapitalize="true" - value={formBisnis.business_name} + value={form.business_name} aria-invalid={!!errors.business_name} onChange={handleInputChange} /> @@ -245,7 +243,7 @@ const FormBisnis: React.FC = ({ type, required, isPKP }) => { id='nama_wajib_pajak' name='nama_wajib_pajak' placeholder='Masukan nama lengkap anda' - value={!required? formBisnis.nama_wajib_pajak : ''} + value={!required? form.nama_wajib_pajak : ''} className={`form-input mt-3 ${required ? 'cursor-no-drop' : ''}`} disabled={required} contentEditable={required} @@ -269,7 +267,7 @@ const FormBisnis: React.FC = ({ type, required, isPKP }) => { contentEditable={required} readOnly={required} placeholder='000.000.000.0-000.000' - value={!required ? formBisnis.npwp : ''} + value={!required ? form.npwp : ''} onChange={handleInputChange} aria-invalid={isPKP && !required && !!errors.npwp} /> @@ -324,4 +322,4 @@ const FormBisnis: React.FC = ({ type, required, isPKP }) => { ) } -export default FormBisnis; +export default form; -- cgit v1.2.3 From 54b6b618effc8416027ed884be1d6d37257c26c4 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Mon, 26 Aug 2024 11:59:57 +0700 Subject: update fungsion component --- .../modules/register/components/FormBisnis.tsx | 39 ++++++---------------- 1 file changed, 10 insertions(+), 29 deletions(-) (limited to 'src-migrate/modules/register/components/FormBisnis.tsx') diff --git a/src-migrate/modules/register/components/FormBisnis.tsx b/src-migrate/modules/register/components/FormBisnis.tsx index 5d15ab6c..1d0c930f 100644 --- a/src-migrate/modules/register/components/FormBisnis.tsx +++ b/src-migrate/modules/register/components/FormBisnis.tsx @@ -10,6 +10,7 @@ import getFileBase64 from '@/core/utils/getFileBase64' import { Controller, useForm } from 'react-hook-form' import HookFormSelect from '@/core/components/elements/Select/HookFormSelect' import odooApi from "~/libs/odooApi"; +import { toast } from 'react-hot-toast'; interface FormProps { type: string; @@ -31,19 +32,15 @@ interface companyType { const form: React.FC = ({ type, required, isPKP }) => { const { form, - isCheckedTNC, - isValidCaptcha, errors, updateForm, validate } = useRegisterStore() const { control, watch, setValue } = useForm(); const [selectedCategory, setSelectedCategory] = useState(''); - const [selectedCompanyId, setSelectedCompanyId] = useState(''); const [industries, setIndustries] = useState([]); const [companyTypes, setCompanyTypes] = useState([]); - const isFormValid = useMemo(() => Object.keys(errors).length === 0, [errors]); const router = useRouter(); const toast = useToast(); @@ -60,7 +57,6 @@ const form: React.FC = ({ type, required, isPKP }) => { const selectedCompanyType = companyTypes.find(company => company.value === watch('companyType')); if (selectedCompanyType) { updateForm("company_type_id", `${selectedCompanyType?.value}`); - setSelectedCompanyId(selectedCompanyType?.label) validate(); } }, [watch('companyType'), companyTypes]); @@ -87,33 +83,26 @@ const form: React.FC = ({ type, required, isPKP }) => { updateForm('type_acc',`business`) updateForm('is_pkp',`${isPKP}`) updateForm(name, value); - updateForm('name',form.name); - updateForm('email',form.email); - updateForm('password',form.password); - updateForm('phone',form.phone); validate(); }; const handleFileChange = async (event: ChangeEvent) => { - // const file = poFile.current.files[0]; - // const name = poNumber.current.value; - // if (typeof file === 'undefined' || !name) { - // toast.error('Nomor dan Dokumen PO harus diisi'); - // return; - // } - // if (file.size > 5000000) { - // toast.error('Maksimal ukuran file adalah 5MB'); - // return; - // } - // const data = { name, file: await getFileBase64(file) }; + const toastProps: UseToastOptions = { + duration: 5000, + isClosable: true + }; let fileBase64 = ''; const { name} = event.target; const file = event.target.files?.[0]; if (file) { if (typeof file !== 'undefined') { if (file.size > 5000000) { - // toast.error('Maksimal ukuran file adalah 5MB') + toast({ + ...toastProps, + title: 'Maksimal ukuran file adalah 5MB', + status: 'warning' + }); return; } fileBase64 = await getFileBase64(file); @@ -310,14 +299,6 @@ const form: React.FC = ({ type, required, isPKP }) => { {isPKP && !required && !!errors.sppkp_document && {errors.sppkp_document}}
- - {/* */} ) } -- cgit v1.2.3 From 0b5f187f45e0bbf111e11a94415f20d5e34f7c5c Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Tue, 27 Aug 2024 14:51:14 +0700 Subject: update new field register --- .../modules/register/components/FormBisnis.tsx | 73 +++++++++++++++++++++- 1 file changed, 72 insertions(+), 1 deletion(-) (limited to 'src-migrate/modules/register/components/FormBisnis.tsx') diff --git a/src-migrate/modules/register/components/FormBisnis.tsx b/src-migrate/modules/register/components/FormBisnis.tsx index 1d0c930f..3b8fdbfc 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, color, useToast } from "@chakra-ui/react"; +import { Checkbox, 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' @@ -38,6 +38,7 @@ const form: React.FC = ({ type, required, isPKP }) => { } = useRegisterStore() const { control, watch, setValue } = useForm(); const [selectedCategory, setSelectedCategory] = useState(''); + const [isChekBox, setIsChekBox] = useState(false); const [industries, setIndustries] = useState([]); const [companyTypes, setCompanyTypes] = useState([]); @@ -86,6 +87,20 @@ const form: React.FC = ({ type, required, isPKP }) => { validate(); }; + const handleChange = (event: ChangeEvent) => { + setIsChekBox(!isChekBox) + }; + + useEffect(() => { + if (isChekBox) { + updateForm("isChekBox", 'true'); + validate(); + } else { + updateForm("isChekBox", 'false'); + validate(); + } + }, [isChekBox,]); + const handleFileChange = async (event: ChangeEvent) => { const toastProps: UseToastOptions = { @@ -224,6 +239,26 @@ const form: React.FC = ({ type, required, isPKP }) => { {!required && !!errors.industry_id && {errors.industry_id}}
+
+ + + + + {!required && !!errors.alamat_bisnis && {errors.alamat_bisnis}} +
+
@@ -244,6 +279,42 @@ const form: React.FC = ({ type, required, isPKP }) => { {isPKP && !required && !!errors.nama_wajib_pajak && {errors.nama_wajib_pajak}}
+
+ + + + + {isPKP && !required && !!errors.alamat_wajib_pajak && {errors.alamat_wajib_pajak}} +
+
-- cgit v1.2.3 From 3da0d5f55a0dc8b9c04cb271ea7d541c63c9e3a8 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Wed, 28 Aug 2024 11:57:18 +0700 Subject: update new register --- src-migrate/modules/register/components/FormBisnis.tsx | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) (limited to 'src-migrate/modules/register/components/FormBisnis.tsx') diff --git a/src-migrate/modules/register/components/FormBisnis.tsx b/src-migrate/modules/register/components/FormBisnis.tsx index 3b8fdbfc..e2e021b3 100644 --- a/src-migrate/modules/register/components/FormBisnis.tsx +++ b/src-migrate/modules/register/components/FormBisnis.tsx @@ -328,11 +328,19 @@ const form: React.FC = ({ type, required, isPKP }) => { readOnly={required} placeholder='000.000.000.0-000.000' value={!required ? form.npwp : ''} - onChange={handleInputChange} - aria-invalid={isPKP && !required && !!errors.npwp} + maxLength={16} // Set maximum length to 16 characters + onChange={(e) => { + if (!required) { + const value = e.target.value.replace(/\D/g, ''); // Remove non-digit characters + if (value.length <= 16) { + handleInputChange(e); + } + } + }} + aria-invalid={!required && !!errors.npwp} /> - {isPKP && !required && !!errors.npwp && {errors.npwp}} + {!required && !!errors.npwp && {errors.npwp}}
-- cgit v1.2.3 From a5821ad81683c8160d707fe980a282df644c3c0b Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Thu, 29 Aug 2024 16:32:01 +0700 Subject: add sppkp field --- .../modules/register/components/FormBisnis.tsx | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) (limited to 'src-migrate/modules/register/components/FormBisnis.tsx') diff --git a/src-migrate/modules/register/components/FormBisnis.tsx b/src-migrate/modules/register/components/FormBisnis.tsx index e2e021b3..b976072c 100644 --- a/src-migrate/modules/register/components/FormBisnis.tsx +++ b/src-migrate/modules/register/components/FormBisnis.tsx @@ -343,6 +343,25 @@ const form: React.FC = ({ type, required, isPKP }) => { {!required && !!errors.npwp && {errors.npwp}}
+
+ + + + + {!required && !!errors.sppkp && {errors.sppkp}} +
+
-- cgit v1.2.3 From 1a436a504e3ecafedab6035ac6eb9eb0b9a619d3 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Thu, 29 Aug 2024 17:13:23 +0700 Subject: update new register --- src-migrate/modules/register/components/FormBisnis.tsx | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) (limited to 'src-migrate/modules/register/components/FormBisnis.tsx') diff --git a/src-migrate/modules/register/components/FormBisnis.tsx b/src-migrate/modules/register/components/FormBisnis.tsx index b976072c..a278097b 100644 --- a/src-migrate/modules/register/components/FormBisnis.tsx +++ b/src-migrate/modules/register/components/FormBisnis.tsx @@ -4,13 +4,16 @@ import { useRegisterStore } from "../stores/useRegisterStore"; import { RegisterProps } from "~/types/auth"; import { registerUser } from "~/services/auth"; import { useRouter } from "next/router"; -import { Checkbox, UseToastOptions, color, useToast } from "@chakra-ui/react"; +import { Button, Checkbox, 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' import HookFormSelect from '@/core/components/elements/Select/HookFormSelect' import odooApi from "~/libs/odooApi"; import { toast } from 'react-hot-toast'; +import { + EyeIcon +} from '@heroicons/react/24/outline'; interface FormProps { type: string; @@ -344,7 +347,14 @@ const form: React.FC = ({ type, required, isPKP }) => {
- + + = ({ type, required, isPKP }) => { name='sppkp' className={`form-input mt-3 ${required ? 'cursor-no-drop' : ''}`} disabled={required} - contentEditable={required} + contentEditable={required}S readOnly={required} placeholder='000.000.000.0-000.000' + onChange={handleInputChange} value={!required ? form.sppkp : ''} aria-invalid={!required && !!errors.sppkp} /> -- cgit v1.2.3 From b8141064bcce99574b94506f9e3028425759158d Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Fri, 30 Aug 2024 10:56:20 +0700 Subject: input npwp by template --- .../modules/register/components/FormBisnis.tsx | 117 +++++++++++++++++---- 1 file changed, 99 insertions(+), 18 deletions(-) (limited to 'src-migrate/modules/register/components/FormBisnis.tsx') diff --git a/src-migrate/modules/register/components/FormBisnis.tsx b/src-migrate/modules/register/components/FormBisnis.tsx index a278097b..6ab12776 100644 --- a/src-migrate/modules/register/components/FormBisnis.tsx +++ b/src-migrate/modules/register/components/FormBisnis.tsx @@ -14,6 +14,8 @@ import { toast } from 'react-hot-toast'; import { EyeIcon } from '@heroicons/react/24/outline'; +import BottomPopup from '@/core/components/elements/Popup/BottomPopup'; +import Image from 'next/image' interface FormProps { type: string; @@ -42,6 +44,11 @@ const form: React.FC = ({ type, required, isPKP }) => { const { control, watch, setValue } = useForm(); const [selectedCategory, setSelectedCategory] = useState(''); const [isChekBox, setIsChekBox] = useState(false); + const [isExample, setIsExample] = useState(false); + // Inside your component + const [formattedNpwp, setFormattedNpwp] = useState(""); // State for formatted NPWP + const [unformattedNpwp, setUnformattedNpwp] = useState(""); // State for unformatted NPWP + const [industries, setIndustries] = useState([]); const [companyTypes, setCompanyTypes] = useState([]); @@ -90,9 +97,58 @@ const form: React.FC = ({ type, required, isPKP }) => { validate(); }; + const handleInputChangeNpwp = (event: ChangeEvent) => { + const { name, value } = event.target; + updateForm('type_acc',`business`) + updateForm('is_pkp',`${isPKP}`) + updateForm('npwp', value); + validate(); + }; + const handleChange = (event: ChangeEvent) => { setIsChekBox(!isChekBox) }; + + const formatNpwp = (value: string) => { + try { + const cleaned = ("" + value).replace(/\D/g, ""); + // const match = cleaned.match(/(\d{0,2})?(\d{0,3})?(\d{0,3})?(\d{0,1})?(\d{0,3})?(\d{0,3})$/); + console.log("panjang",form?.npwp?.length) + console.log("panjang cleaned",cleaned.length) + let match + if(cleaned.length <= 15){ + match = cleaned.match(/(\d{0,2})?(\d{0,3})?(\d{0,3})?(\d{0,1})?(\d{0,3})?(\d{0,3})$/); + }else{ + match = cleaned.match(/(\d{0,3})?(\d{0,3})?(\d{0,3})?(\d{0,1})?(\d{0,3})?(\d{0,3})$/); + } + + + if (match) { + return [ + match[1], + match[2] ? "." : "", + match[2], + match[3] ? "." : "", + match[3], + match[4] ? "." : "", + match[4], + match[5] ? "-" : "", + match[5], + match[6] ? "." : "", + match[6], + ].join(""); + } + + // If match is null, return the original cleaned string or handle as needed + return cleaned; + + } catch (error) { + // Handle error or return a default value + console.error("Error formatting NPWP:", error); + return value; + } + }; + useEffect(() => { if (isChekBox) { @@ -172,7 +228,26 @@ const form: React.FC = ({ type, required, isPKP }) => { break; } }; + console.log("form",form) return ( + <> + setIsExample(false)} + > +
+ Contoh SPPKP +
+
@@ -319,25 +394,28 @@ const form: React.FC = ({ type, required, isPKP }) => {
- + { if (!required) { - const value = e.target.value.replace(/\D/g, ''); // Remove non-digit characters - if (value.length <= 16) { - handleInputChange(e); - } + const unformatted = e.target.value.replace(/\D/g, ""); // Remove all non-digit characters + const formattedValue = formatNpwp(unformatted); // Format the value + setUnformattedNpwp(unformatted); // Store unformatted value + setFormattedNpwp(formattedValue); // Store formatted value + handleInputChangeNpwp({ ...e, target: { ...e.target, value: unformatted } }); // Update form state with unformatted value } }} aria-invalid={!required && !!errors.npwp} @@ -347,12 +425,14 @@ const form: React.FC = ({ type, required, isPKP }) => {
-
} @@ -362,9 +442,9 @@ const form: React.FC = ({ type, required, isPKP }) => { name='sppkp' className={`form-input mt-3 ${required ? 'cursor-no-drop' : ''}`} disabled={required} - contentEditable={required}S + contentEditable={required} readOnly={required} - placeholder='000.000.000.0-000.000' + placeholder='X-XXXPKP/WJPXXX/XX.XXXX/XXXX' onChange={handleInputChange} value={!required ? form.sppkp : ''} aria-invalid={!required && !!errors.sppkp} @@ -409,6 +489,7 @@ const form: React.FC = ({ type, required, isPKP }) => { {isPKP && !required && !!errors.sppkp_document && {errors.sppkp_document}}
+ ) } -- cgit v1.2.3 From 340d55fe93fb93b3f77d4c5f2d55174432aec810 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Fri, 30 Aug 2024 16:21:50 +0700 Subject: delete console log --- src-migrate/modules/register/components/FormBisnis.tsx | 4 ---- 1 file changed, 4 deletions(-) (limited to 'src-migrate/modules/register/components/FormBisnis.tsx') diff --git a/src-migrate/modules/register/components/FormBisnis.tsx b/src-migrate/modules/register/components/FormBisnis.tsx index 6ab12776..79515a36 100644 --- a/src-migrate/modules/register/components/FormBisnis.tsx +++ b/src-migrate/modules/register/components/FormBisnis.tsx @@ -112,9 +112,6 @@ const form: React.FC = ({ type, required, isPKP }) => { const formatNpwp = (value: string) => { try { const cleaned = ("" + value).replace(/\D/g, ""); - // const match = cleaned.match(/(\d{0,2})?(\d{0,3})?(\d{0,3})?(\d{0,1})?(\d{0,3})?(\d{0,3})$/); - console.log("panjang",form?.npwp?.length) - console.log("panjang cleaned",cleaned.length) let match if(cleaned.length <= 15){ match = cleaned.match(/(\d{0,2})?(\d{0,3})?(\d{0,3})?(\d{0,1})?(\d{0,3})?(\d{0,3})$/); @@ -228,7 +225,6 @@ const form: React.FC = ({ type, required, isPKP }) => { break; } }; - console.log("form",form) return ( <> Date: Mon, 2 Sep 2024 15:28:07 +0700 Subject: update tampilan button lihat example --- src-migrate/modules/register/components/FormBisnis.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src-migrate/modules/register/components/FormBisnis.tsx') diff --git a/src-migrate/modules/register/components/FormBisnis.tsx b/src-migrate/modules/register/components/FormBisnis.tsx index 79515a36..ea0e4761 100644 --- a/src-migrate/modules/register/components/FormBisnis.tsx +++ b/src-migrate/modules/register/components/FormBisnis.tsx @@ -425,7 +425,7 @@ const form: React.FC = ({ type, required, isPKP }) => {
Nomor SPPKP { !required && (opsional) }
- {
setIsExample(!isExample)} className="rounded text-white p-2 flex flex-row bg-red-500" > + {
setIsExample(!isExample)} className="rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400" >

Lihat Contoh

} -- cgit v1.2.3 From 383adf9edeed30db9f5df8e9ed4752cd513f49a5 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Mon, 9 Sep 2024 14:37:47 +0700 Subject: update new register mobile --- src-migrate/modules/register/components/FormBisnis.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'src-migrate/modules/register/components/FormBisnis.tsx') diff --git a/src-migrate/modules/register/components/FormBisnis.tsx b/src-migrate/modules/register/components/FormBisnis.tsx index ea0e4761..fb9f6484 100644 --- a/src-migrate/modules/register/components/FormBisnis.tsx +++ b/src-migrate/modules/register/components/FormBisnis.tsx @@ -267,11 +267,11 @@ const form: React.FC = ({ type, required, isPKP }) => { {!required && isPKP && !!errors.email_partner && {errors.email_partner}}
-
+
-
+
= ({ type, required, isPKP }) => { type="text" name="business_name" id="business_name" - className="form-input h-full " + className="form-input h-12 " placeholder="Nama Perusahaan" autoCapitalize="true" value={form.business_name} -- cgit v1.2.3 From 055e4d779151cd0cbad380043e4be38cca8b1c7a Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Mon, 9 Sep 2024 16:41:39 +0700 Subject: update mobile view --- src-migrate/modules/register/components/FormBisnis.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) (limited to 'src-migrate/modules/register/components/FormBisnis.tsx') diff --git a/src-migrate/modules/register/components/FormBisnis.tsx b/src-migrate/modules/register/components/FormBisnis.tsx index fb9f6484..1004d944 100644 --- a/src-migrate/modules/register/components/FormBisnis.tsx +++ b/src-migrate/modules/register/components/FormBisnis.tsx @@ -16,7 +16,7 @@ import { } from '@heroicons/react/24/outline'; import BottomPopup from '@/core/components/elements/Popup/BottomPopup'; import Image from 'next/image' - +import useDevice from '@/core/hooks/useDevice' interface FormProps { type: string; required: boolean; @@ -45,6 +45,7 @@ const form: React.FC = ({ type, required, isPKP }) => { const [selectedCategory, setSelectedCategory] = useState(''); const [isChekBox, setIsChekBox] = useState(false); const [isExample, setIsExample] = useState(false); + const { isDesktop, isMobile } = useDevice() // Inside your component const [formattedNpwp, setFormattedNpwp] = useState(""); // State for formatted NPWP const [unformattedNpwp, setUnformattedNpwp] = useState(""); // State for unformatted NPWP @@ -426,8 +427,10 @@ const form: React.FC = ({ type, required, isPKP }) => { Nomor SPPKP { !required && (opsional) }
{
setIsExample(!isExample)} className="rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400" > - + + {isDesktop &&

Lihat Contoh

+ }
} -- cgit v1.2.3 From 6ff5efdb4b7eec25f991f5bfcc02b4a3f883981b Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Wed, 11 Sep 2024 10:04:31 +0700 Subject: update error handling hanya muncul saat button daftar di click --- .../modules/register/components/FormBisnis.tsx | 776 ++++++++++++--------- 1 file changed, 460 insertions(+), 316 deletions(-) (limited to 'src-migrate/modules/register/components/FormBisnis.tsx') diff --git a/src-migrate/modules/register/components/FormBisnis.tsx b/src-migrate/modules/register/components/FormBisnis.tsx index 1004d944..2080ae75 100644 --- a/src-migrate/modules/register/components/FormBisnis.tsx +++ b/src-migrate/modules/register/components/FormBisnis.tsx @@ -1,26 +1,31 @@ -import { ChangeEvent, useEffect, useMemo, useState } from "react"; -import { useMutation } from "react-query"; -import { useRegisterStore } from "../stores/useRegisterStore"; -import { RegisterProps } from "~/types/auth"; -import { registerUser } from "~/services/auth"; -import { useRouter } from "next/router"; -import { Button, Checkbox, 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' -import HookFormSelect from '@/core/components/elements/Select/HookFormSelect' -import odooApi from "~/libs/odooApi"; -import { toast } from 'react-hot-toast'; +import { ChangeEvent, useEffect, useMemo, useState } from 'react'; +import { useMutation } from 'react-query'; +import { useRegisterStore } from '../stores/useRegisterStore'; +import { RegisterProps } from '~/types/auth'; +import { registerUser } from '~/services/auth'; +import { useRouter } from 'next/router'; import { - EyeIcon -} from '@heroicons/react/24/outline'; + Button, + Checkbox, + 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'; +import HookFormSelect from '@/core/components/elements/Select/HookFormSelect'; +import odooApi from '~/libs/odooApi'; +import { toast } from 'react-hot-toast'; +import { EyeIcon } from '@heroicons/react/24/outline'; import BottomPopup from '@/core/components/elements/Popup/BottomPopup'; -import Image from 'next/image' -import useDevice from '@/core/hooks/useDevice' +import Image from 'next/image'; +import useDevice from '@/core/hooks/useDevice'; interface FormProps { type: string; required: boolean; isPKP: boolean; + chekValid: boolean; } interface industry_id { @@ -34,22 +39,16 @@ interface companyType { label: string; } -const form: React.FC = ({ type, required, isPKP }) => { - const { - form, - errors, - updateForm, - validate - } = useRegisterStore() +const form: React.FC = ({ type, required, isPKP, chekValid }) => { + const { form, errors, updateForm, validate } = useRegisterStore(); const { control, watch, setValue } = useForm(); const [selectedCategory, setSelectedCategory] = useState(''); const [isChekBox, setIsChekBox] = useState(false); const [isExample, setIsExample] = useState(false); - const { isDesktop, isMobile } = useDevice() + const { isDesktop, isMobile } = useDevice(); // Inside your component - const [formattedNpwp, setFormattedNpwp] = useState(""); // State for formatted NPWP - const [unformattedNpwp, setUnformattedNpwp] = useState(""); // State for unformatted NPWP - + const [formattedNpwp, setFormattedNpwp] = useState(''); // State for formatted NPWP + const [unformattedNpwp, setUnformattedNpwp] = useState(''); // State for unformatted NPWP const [industries, setIndustries] = useState([]); const [companyTypes, setCompanyTypes] = useState([]); @@ -59,24 +58,36 @@ const form: React.FC = ({ type, required, isPKP }) => { useEffect(() => { const loadCompanyTypes = async () => { - const dataCompanyTypes = await odooApi('GET', '/api/v1/partner/company_type'); - setCompanyTypes(dataCompanyTypes?.map((o: { id: any; name: any; }) => ({ value: o.id, label: o.name }))); + const dataCompanyTypes = await odooApi( + 'GET', + '/api/v1/partner/company_type' + ); + setCompanyTypes( + dataCompanyTypes?.map((o: { id: any; name: any }) => ({ + value: o.id, + label: o.name, + })) + ); }; loadCompanyTypes(); }, []); useEffect(() => { - const selectedCompanyType = companyTypes.find(company => company.value === watch('companyType')); + const selectedCompanyType = companyTypes.find( + (company) => company.value === watch('companyType') + ); if (selectedCompanyType) { - updateForm("company_type_id", `${selectedCompanyType?.value}`); + updateForm('company_type_id', `${selectedCompanyType?.value}`); validate(); } }, [watch('companyType'), companyTypes]); useEffect(() => { - const selectedIndustryType = industries.find(industry => industry.value === watch('industry_id')); + const selectedIndustryType = industries.find( + (industry) => industry.value === watch('industry_id') + ); if (selectedIndustryType) { - updateForm("industry_id", `${selectedIndustryType?.value}`); + updateForm('industry_id', `${selectedIndustryType?.value}`); setSelectedCategory(selectedIndustryType.category); validate(); } @@ -85,107 +96,135 @@ const form: React.FC = ({ type, required, isPKP }) => { useEffect(() => { const loadIndustries = async () => { const dataIndustries = await odooApi('GET', '/api/v1/partner/industry'); - setIndustries(dataIndustries?.map((o: { id: any; name: any; category: any; }) => ({ value: o.id, label: o.name, category: o.category }))); + setIndustries( + dataIndustries?.map((o: { id: any; name: any; category: any }) => ({ + value: o.id, + label: o.name, + category: o.category, + })) + ); }; loadIndustries(); }, []); const handleInputChange = (event: ChangeEvent) => { const { name, value } = event.target; - updateForm('type_acc',`business`) - updateForm('is_pkp',`${isPKP}`) + updateForm('type_acc', `business`); + updateForm('is_pkp', `${isPKP}`); updateForm(name, value); validate(); }; const handleInputChangeNpwp = (event: ChangeEvent) => { const { name, value } = event.target; - updateForm('type_acc',`business`) - updateForm('is_pkp',`${isPKP}`) + updateForm('type_acc', `business`); + updateForm('is_pkp', `${isPKP}`); updateForm('npwp', value); validate(); }; const handleChange = (event: ChangeEvent) => { - setIsChekBox(!isChekBox) + setIsChekBox(!isChekBox); }; - + const formatNpwp = (value: string) => { try { - const cleaned = ("" + value).replace(/\D/g, ""); - let match - if(cleaned.length <= 15){ - match = cleaned.match(/(\d{0,2})?(\d{0,3})?(\d{0,3})?(\d{0,1})?(\d{0,3})?(\d{0,3})$/); - }else{ - match = cleaned.match(/(\d{0,3})?(\d{0,3})?(\d{0,3})?(\d{0,1})?(\d{0,3})?(\d{0,3})$/); + const cleaned = ('' + value).replace(/\D/g, ''); + let match; + if (cleaned.length <= 15) { + match = cleaned.match( + /(\d{0,2})?(\d{0,3})?(\d{0,3})?(\d{0,1})?(\d{0,3})?(\d{0,3})$/ + ); + } else { + match = cleaned.match( + /(\d{0,3})?(\d{0,3})?(\d{0,3})?(\d{0,1})?(\d{0,3})?(\d{0,3})$/ + ); } - - + if (match) { return [ match[1], - match[2] ? "." : "", + match[2] ? '.' : '', match[2], - match[3] ? "." : "", + match[3] ? '.' : '', match[3], - match[4] ? "." : "", + match[4] ? '.' : '', match[4], - match[5] ? "-" : "", + match[5] ? '-' : '', match[5], - match[6] ? "." : "", + match[6] ? '.' : '', match[6], - ].join(""); + ].join(''); } - + // If match is null, return the original cleaned string or handle as needed return cleaned; - } catch (error) { // Handle error or return a default value - console.error("Error formatting NPWP:", error); + console.error('Error formatting NPWP:', error); return value; } }; - useEffect(() => { if (isChekBox) { - updateForm("isChekBox", 'true'); + updateForm('isChekBox', 'true'); validate(); } else { - updateForm("isChekBox", 'false'); + updateForm('isChekBox', 'false'); validate(); } - }, [isChekBox,]); + }, [isChekBox]); const handleFileChange = async (event: ChangeEvent) => { - const toastProps: UseToastOptions = { duration: 5000, - isClosable: true + isClosable: true, + position: 'top', }; + let fileBase64 = ''; - const { name} = event.target; + const { name } = event.target; const file = event.target.files?.[0]; + + // Allowed file extensions + const allowedExtensions = ['pdf', 'doc', 'docx', 'png', 'jpg', 'jpeg']; + if (file) { - if (typeof file !== 'undefined') { - if (file.size > 5000000) { - toast({ - ...toastProps, - title: 'Maksimal ukuran file adalah 5MB', - status: 'warning' - }); - return; - } - fileBase64 = await getFileBase64(file); + const fileExtension = file.name.split('.').pop()?.toLowerCase(); // Extract file extension + + // Check if the file extension is allowed + if (!fileExtension || !allowedExtensions.includes(fileExtension)) { + toast({ + ...toastProps, + title: + 'Format file yang diijinkan adalah .pdf, .doc, .docx, .png, .jpg, atau .jpeg', + status: 'error', + }); + event.target.value = ''; + return; } - updateForm(name, fileBase64); - validate(); + + // Check for file size + if (file.size > 5000000) { + toast({ + ...toastProps, + title: 'Maksimal ukuran file adalah 5MB', + status: 'error', + }); + event.target.value = ''; + return; + } + + // Convert file to Base64 + fileBase64 = await getFileBase64(file); + updateForm(name, fileBase64); // Update form with the Base64 string + validate(); // Perform form validation } }; const mutation = useMutation({ - mutationFn: (data: RegisterProps) => registerUser(data) + mutationFn: (data: RegisterProps) => registerUser(data), }); const handleSubmit = async (e: ChangeEvent) => { @@ -197,14 +236,15 @@ const form: React.FC = ({ type, required, isPKP }) => { const urlParams = new URLSearchParams({ activation: 'otp', email: form.email, - redirect: (router.query?.next || '/') as string + redirect: (router.query?.next || '/') as string, }); router.push(`${router.route}?${urlParams}`); } const toastProps: UseToastOptions = { duration: 5000, - isClosable: true + isClosable: true, + position: 'top', }; switch (response?.reason) { @@ -212,7 +252,7 @@ const form: React.FC = ({ type, required, isPKP }) => { toast({ ...toastProps, title: 'Email sudah digunakan', - status: 'warning' + status: 'warning', }); break; case 'NOT_ACTIVE': @@ -220,147 +260,205 @@ const form: React.FC = ({ type, required, isPKP }) => { toast({ ...toastProps, title: 'Akun belum aktif', - description: <>Akun sudah terdaftar namun belum aktif. Klik untuk aktivasi akun, - status: 'warning' + description: ( + <> + Akun sudah terdaftar namun belum aktif.{' '} + + Klik untuk aktivasi akun + + + ), + status: 'warning', }); break; } }; return ( <> - setIsExample(false)} >
- Contoh SPPKP + Contoh SPPKP
-
-
- - - - - {!required && isPKP && !!errors.email_partner && {errors.email_partner}} -
- -
- -
-
- } + +
+ + + + + {chekValid && !required && isPKP && !!errors.email_partner && ( + {errors.email_partner} + )} +
+ +
+ +
+
+ ( + + )} /> - {!required && !!errors.company_type_id && {errors.company_type_id}} -
-
- + {errors.company_type_id} + + )} +
+
+ - { !!errors.business_name && {errors.business_name}} + {chekValid && !!errors.business_name && ( + {errors.business_name} + )} +
-
- -
- - } + +
+ + ( + + )} + /> + {selectedCategory && ( + + Kategori : {selectedCategory} + + )} + {chekValid && !required && !!errors.industry_id && ( + {errors.industry_id} + )} +
+ +
+ + + + + {chekValid && !required && !!errors.alamat_bisnis && ( + {errors.alamat_bisnis} + )} +
+ +
+ + + - {selectedCategory && - Kategori : {selectedCategory} - } - {!required && !!errors.industry_id && {errors.industry_id}} -
- -
- - - - - {!required && !!errors.alamat_bisnis && {errors.alamat_bisnis}} -
- -
- - - - - {isPKP && !required && !!errors.nama_wajib_pajak && {errors.nama_wajib_pajak}} -
- -
- + + + className={`form-input mt-3 ${required ? 'cursor-no-drop' : ''}`} + disabled={isChekBox || required} + contentEditable={required} + readOnly={required} + onChange={handleInputChange} + aria-invalid={ + chekValid && isPKP && !required && !!errors.alamat_wajib_pajak + } + /> - {!required && !!errors.npwp && {errors.npwp}} -
+ {chekValid && isPKP && !required && !!errors.alamat_wajib_pajak && ( + {errors.alamat_wajib_pajak} + )} +
-
-
- -
- - - - - {isPKP && !required && !!errors.npwp_document && {errors.npwp_document}} -
- -
- - - - - {isPKP && !required && !!errors.sppkp_document && {errors.sppkp_document}} -
- +
+ + + + + {chekValid && isPKP && !required && !!errors.npwp_document && ( + {errors.npwp_document} + )} +
+ +
+ + + + + {chekValid && isPKP && !required && !!errors.sppkp_document && ( + {errors.sppkp_document} + )} +
+ - ) -} + ); +}; export default form; -- cgit v1.2.3 From 689ee880bde0fae548e55316789e8bae852fe7d7 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Wed, 11 Sep 2024 11:40:32 +0700 Subject: update mobile view --- .../modules/register/components/FormBisnis.tsx | 79 ++++++++++++++-------- 1 file changed, 52 insertions(+), 27 deletions(-) (limited to 'src-migrate/modules/register/components/FormBisnis.tsx') diff --git a/src-migrate/modules/register/components/FormBisnis.tsx b/src-migrate/modules/register/components/FormBisnis.tsx index 2080ae75..bc3e1405 100644 --- a/src-migrate/modules/register/components/FormBisnis.tsx +++ b/src-migrate/modules/register/components/FormBisnis.tsx @@ -292,7 +292,14 @@ const form: React.FC = ({ type, required, isPKP, chekValid }) => { />
-
+
-
+
-
-
+
+
= ({ type, required, isPKP, chekValid }) => { )}
-
+
= ({ type, required, isPKP, chekValid }) => {
-
+
- ( - - )} - /> +
+ ( + + )} + /> +
{selectedCategory && ( Kategori : {selectedCategory} @@ -404,7 +415,9 @@ const form: React.FC = ({ type, required, isPKP, chekValid }) => { name='alamat_bisnis' placeholder='Masukan alamat bisnis anda' value={!required ? form.alamat_bisnis : ''} - className={`form-input mt-3 ${required ? 'cursor-no-drop' : ''}`} + className={`form-input mt-3 max-h-11 ${ + required ? 'cursor-no-drop' : '' + }`} disabled={required} contentEditable={required} readOnly={required} @@ -431,7 +444,9 @@ const form: React.FC = ({ type, required, isPKP, chekValid }) => { name='nama_wajib_pajak' placeholder='Masukan nama lengkap anda' value={!required ? form.nama_wajib_pajak : ''} - className={`form-input mt-3 ${required ? 'cursor-no-drop' : ''}`} + className={`form-input mt-3 max-h-11 ${ + required ? 'cursor-no-drop' : '' + }`} disabled={required} contentEditable={required} readOnly={required} @@ -483,7 +498,9 @@ const form: React.FC = ({ type, required, isPKP, chekValid }) => { : form.alamat_wajib_pajak : '' } - className={`form-input mt-3 ${required ? 'cursor-no-drop' : ''}`} + className={`form-input max-h-11 mt-3 ${ + required ? 'cursor-no-drop' : '' + }`} disabled={isChekBox || required} contentEditable={required} readOnly={required} @@ -510,7 +527,9 @@ const form: React.FC = ({ type, required, isPKP, chekValid }) => { type='tel' id='npwp' name='npwp' - className={`form-input mt-3 ${required ? 'cursor-no-drop' : ''}`} + className={`form-input max-h-11 mt-3 ${ + required ? 'cursor-no-drop' : '' + }`} disabled={required} contentEditable={required} readOnly={required} @@ -567,7 +586,9 @@ const form: React.FC = ({ type, required, isPKP, chekValid }) => { type='tel' id='sppkp' name='sppkp' - className={`form-input mt-3 ${required ? 'cursor-no-drop' : ''}`} + className={`form-input max-h-11 mt-3 ${ + required ? 'cursor-no-drop' : '' + }`} disabled={required} contentEditable={required} readOnly={required} @@ -594,7 +615,9 @@ const form: React.FC = ({ type, required, isPKP, chekValid }) => { type='file' id='npwp_document' name='npwp_document' - className={`form-input mt-3 ${required ? 'cursor-no-drop' : ''}`} + className={`form-input ${ + type === 'bisnis' ? '' : 'border-none' + } mt-3 ${required ? 'cursor-no-drop' : ''}`} disabled={required} contentEditable={required} readOnly={required} @@ -619,7 +642,9 @@ const form: React.FC = ({ type, required, isPKP, chekValid }) => { type='file' id='sppkp_document' name='sppkp_document' - className={`form-input mt-3 ${required ? 'cursor-no-drop' : ''}`} + className={`form-input ${ + type === 'bisnis' ? '' : 'border-none' + } mt-3 ${required ? 'cursor-no-drop' : ''}`} disabled={required} contentEditable={required} readOnly={required} -- cgit v1.2.3 From 62ad06bf66519e0491355edd4171cff71992500d Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Wed, 11 Sep 2024 11:54:44 +0700 Subject: update mobile view --- src-migrate/modules/register/components/FormBisnis.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'src-migrate/modules/register/components/FormBisnis.tsx') diff --git a/src-migrate/modules/register/components/FormBisnis.tsx b/src-migrate/modules/register/components/FormBisnis.tsx index bc3e1405..6631cb3b 100644 --- a/src-migrate/modules/register/components/FormBisnis.tsx +++ b/src-migrate/modules/register/components/FormBisnis.tsx @@ -296,7 +296,7 @@ const form: React.FC = ({ type, required, isPKP, chekValid }) => { className={` ${ type === 'bisnis' ? 'mt-6 grid grid-cols-1 gap-y-4' - : 'mt-6 grid grid-rows-5 grid-flow-col gap-x-4 gap-y-2' + : 'mt-6 grid grid-cols-2 gap-x-4 gap-y-2' }`} onSubmit={handleSubmit} > @@ -380,7 +380,7 @@ const form: React.FC = ({ type, required, isPKP, chekValid }) => { -
+
Date: Thu, 12 Sep 2024 15:12:42 +0700 Subject: update new register --- .../modules/register/components/FormBisnis.tsx | 66 +++++++++++++++++++++- 1 file changed, 63 insertions(+), 3 deletions(-) (limited to 'src-migrate/modules/register/components/FormBisnis.tsx') 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 : ''} -- cgit v1.2.3 From aaf907c834343970e1d30b3ef49c13ed5f9d34ed Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Tue, 17 Sep 2024 09:01:04 +0700 Subject: add focus error when button submit click --- src-migrate/modules/register/components/FormBisnis.tsx | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) (limited to 'src-migrate/modules/register/components/FormBisnis.tsx') diff --git a/src-migrate/modules/register/components/FormBisnis.tsx b/src-migrate/modules/register/components/FormBisnis.tsx index dd9cd72f..2ac998c9 100644 --- a/src-migrate/modules/register/components/FormBisnis.tsx +++ b/src-migrate/modules/register/components/FormBisnis.tsx @@ -26,6 +26,7 @@ interface FormProps { required: boolean; isPKP: boolean; chekValid: boolean; + buttonSubmitClick: boolean; } interface industry_id { @@ -39,7 +40,13 @@ interface companyType { label: string; } -const form: React.FC = ({ type, required, isPKP, chekValid }) => { +const form: React.FC = ({ + type, + required, + isPKP, + chekValid, + buttonSubmitClick, +}) => { const { form, errors, updateForm, validate } = useRegisterStore(); const { control, watch, setValue } = useForm(); const [selectedCategory, setSelectedCategory] = useState(''); @@ -278,7 +285,7 @@ const form: React.FC = ({ type, required, isPKP, chekValid }) => { } }; loadIndustries(); - }, [chekValid, form, errors]); + }, [buttonSubmitClick]); const handleSubmit = async (e: ChangeEvent) => { e.preventDefault(); -- cgit v1.2.3 From 810c5da6e26fdfc4f29df75dca13c0fdb787f34a Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Wed, 18 Sep 2024 09:29:41 +0700 Subject: update auto scrool to when error --- .../modules/register/components/FormBisnis.tsx | 69 ++++++++++++++-------- 1 file changed, 46 insertions(+), 23 deletions(-) (limited to 'src-migrate/modules/register/components/FormBisnis.tsx') 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 = ({ chekValid, buttonSubmitClick, }) => { + console.log('buttonSubmitClick', buttonSubmitClick); + const { form, errors, updateForm, validate } = useRegisterStore(); const { control, watch, setValue } = useForm(); const [selectedCategory, setSelectedCategory] = useState(''); @@ -65,13 +67,15 @@ const form: React.FC = ({ const emailRef = useRef(null); const businessNameRef = useRef(null); - const comppanyTypeRef = useRef(null); + const companyTypeRef = 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); + const docsSppkpRef = useRef(null); + const docsNpwpRef = useRef(null); useEffect(() => { const loadCompanyTypes = async () => { @@ -248,44 +252,55 @@ const form: React.FC = ({ 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) => { e.preventDefault(); @@ -374,7 +389,7 @@ const form: React.FC = ({ 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 = ({ Nama Bisnis
-
+
= ({ 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 = ({ -
+
= ({ 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 = ({ 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 = ({ (opsional) )}

-
+
= ({ : 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 = ({ 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 = ({ 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 = ({ 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 = ({ 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 -- cgit v1.2.3 From c8ecabc13896f93571710881344ec8c2f8ae4b73 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Wed, 18 Sep 2024 09:36:21 +0700 Subject: delete console log --- src-migrate/modules/register/components/FormBisnis.tsx | 2 -- 1 file changed, 2 deletions(-) (limited to 'src-migrate/modules/register/components/FormBisnis.tsx') diff --git a/src-migrate/modules/register/components/FormBisnis.tsx b/src-migrate/modules/register/components/FormBisnis.tsx index 50f3522b..70ed6bee 100644 --- a/src-migrate/modules/register/components/FormBisnis.tsx +++ b/src-migrate/modules/register/components/FormBisnis.tsx @@ -47,8 +47,6 @@ const form: React.FC = ({ chekValid, buttonSubmitClick, }) => { - console.log('buttonSubmitClick', buttonSubmitClick); - const { form, errors, updateForm, validate } = useRegisterStore(); const { control, watch, setValue } = useForm(); const [selectedCategory, setSelectedCategory] = useState(''); -- cgit v1.2.3 From fad165af76bb008076e96199f173fbe27b7835a8 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Wed, 18 Sep 2024 17:18:47 +0700 Subject: update alamat yang sama --- src-migrate/modules/register/components/FormBisnis.tsx | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) (limited to 'src-migrate/modules/register/components/FormBisnis.tsx') diff --git a/src-migrate/modules/register/components/FormBisnis.tsx b/src-migrate/modules/register/components/FormBisnis.tsx index 70ed6bee..bf00c28e 100644 --- a/src-migrate/modules/register/components/FormBisnis.tsx +++ b/src-migrate/modules/register/components/FormBisnis.tsx @@ -48,6 +48,7 @@ const form: React.FC = ({ buttonSubmitClick, }) => { const { form, errors, updateForm, validate } = useRegisterStore(); + console.log('form', form); const { control, watch, setValue } = useForm(); const [selectedCategory, setSelectedCategory] = useState(''); const [isChekBox, setIsChekBox] = useState(false); @@ -128,9 +129,23 @@ const form: React.FC = ({ const handleInputChange = (event: ChangeEvent) => { const { name, value } = event.target; - updateForm('type_acc', `business`); + + updateForm('type_acc', 'business'); updateForm('is_pkp', `${isPKP}`); + + // Update form dengan nilai terbaru dari input yang berubah updateForm(name, value); + + // Jika checkbox aktif, sinkronisasi alamat_wajib_pajak dengan alamat_bisnis + if (isChekBox) { + if (name === 'alamat_wajib_pajak') { + updateForm('alamat_bisnis', value); + } else if (name === 'alamat_bisnis') { + updateForm('alamat_wajib_pajak', value); + } + } + + // Validasi setelah perubahan dilakukan validate(); }; @@ -188,6 +203,7 @@ const form: React.FC = ({ useEffect(() => { if (isChekBox) { updateForm('isChekBox', 'true'); + updateForm('alamat_wajib_pajak', `${form.alamat_bisnis}`); validate(); } else { updateForm('isChekBox', 'false'); -- cgit v1.2.3 From 6d5ace9505543bcfbc5c830b86613fef00101cbd Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Wed, 18 Sep 2024 17:20:01 +0700 Subject: delete console log --- src-migrate/modules/register/components/FormBisnis.tsx | 1 - 1 file changed, 1 deletion(-) (limited to 'src-migrate/modules/register/components/FormBisnis.tsx') diff --git a/src-migrate/modules/register/components/FormBisnis.tsx b/src-migrate/modules/register/components/FormBisnis.tsx index bf00c28e..042bf507 100644 --- a/src-migrate/modules/register/components/FormBisnis.tsx +++ b/src-migrate/modules/register/components/FormBisnis.tsx @@ -48,7 +48,6 @@ const form: React.FC = ({ buttonSubmitClick, }) => { const { form, errors, updateForm, validate } = useRegisterStore(); - console.log('form', form); const { control, watch, setValue } = useForm(); const [selectedCategory, setSelectedCategory] = useState(''); const [isChekBox, setIsChekBox] = useState(false); -- cgit v1.2.3 From c651d654c2c87d26aab184025b7d0e4d8e74e65f Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Thu, 19 Sep 2024 10:11:47 +0700 Subject: fix otp send 3 times --- .../modules/register/components/FormBisnis.tsx | 56 +--------------------- 1 file changed, 2 insertions(+), 54 deletions(-) (limited to 'src-migrate/modules/register/components/FormBisnis.tsx') diff --git a/src-migrate/modules/register/components/FormBisnis.tsx b/src-migrate/modules/register/components/FormBisnis.tsx index 042bf507..5ee19e58 100644 --- a/src-migrate/modules/register/components/FormBisnis.tsx +++ b/src-migrate/modules/register/components/FormBisnis.tsx @@ -256,15 +256,11 @@ const form: React.FC = ({ validate(); // Perform form validation } }; - - const mutation = useMutation({ - mutationFn: (data: RegisterProps) => registerUser(data), - }); + const isFormValid = useMemo(() => Object.keys(errors).length === 0, [errors]); useEffect(() => { const loadIndustries = async () => { - const response = await mutation.mutateAsync(form); - if (!response?.register) { + if (!isFormValid) { const options: ScrollIntoViewOptions = { behavior: 'smooth', block: 'center', @@ -314,53 +310,6 @@ const form: React.FC = ({ }; loadIndustries(); }, [buttonSubmitClick, chekValid]); - - const handleSubmit = async (e: ChangeEvent) => { - e.preventDefault(); - - const response = await mutation.mutateAsync(form); - - if (response?.register === true) { - const urlParams = new URLSearchParams({ - activation: 'otp', - email: form.email, - redirect: (router.query?.next || '/') as string, - }); - router.push(`${router.route}?${urlParams}`); - } - - const toastProps: UseToastOptions = { - duration: 5000, - isClosable: true, - position: 'top', - }; - - switch (response?.reason) { - case 'EMAIL_USED': - toast({ - ...toastProps, - title: 'Email sudah digunakan', - status: 'warning', - }); - break; - case 'NOT_ACTIVE': - const activationUrl = `${router.route}?activation=email`; - toast({ - ...toastProps, - title: 'Akun belum aktif', - description: ( - <> - Akun sudah terdaftar namun belum aktif.{' '} - - Klik untuk aktivasi akun - - - ), - status: 'warning', - }); - break; - } - }; return ( <> = ({ ? 'mt-6 grid grid-cols-1 gap-y-4' : 'mt-6 grid grid-cols-2 gap-x-4 gap-y-2' }`} - onSubmit={handleSubmit} >