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 --- src-migrate/modules/register/components/Form.tsx | 20 +++---- .../modules/register/components/FormBisnis.tsx | 50 ++++++++-------- .../register/components/RegistrasiBisnis.tsx | 21 +++---- src-migrate/modules/register/index.tsx | 10 +++- .../modules/register/stores/useRegisterStore.ts | 68 ++++++++-------------- 5 files changed, 78 insertions(+), 91 deletions(-) (limited to 'src-migrate/modules/register') diff --git a/src-migrate/modules/register/components/Form.tsx b/src-migrate/modules/register/components/Form.tsx index c4789e9a..5e5e0a11 100644 --- a/src-migrate/modules/register/components/Form.tsx +++ b/src-migrate/modules/register/components/Form.tsx @@ -37,16 +37,16 @@ const Form: React.FC = ({ type, required, isBisnisRegist=false }) => updateForm(name, value) // if(!isBisnisRegist){ - updateForm('type_acc',`individu`) - updateForm('is_pkp','false') - updateForm('business_name','Iman') - updateForm('company_type_id','0') - updateForm('email_partner','it@fixcomart.co.id') - updateForm('industry_id','0') - updateForm('nama_wajib_pajak','Iman') - updateForm('npwp','958666666688888') - updateForm('npwp_document','adsdad.pdf') - updateForm('sppkp_document','fdddwedw.pdf') + // updateForm('type_acc',`individu`) + // updateForm('is_pkp','false') + // updateForm('business_name','Iman') + // updateForm('company_type_id','0') + // updateForm('email_partner','it@fixcomart.co.id') + // updateForm('industry_id','0') + // updateForm('nama_wajib_pajak','Iman') + // updateForm('npwp','958666666688888') + // updateForm('npwp_document','adsdad.pdf') + // updateForm('sppkp_document','fdddwedw.pdf') // } validate() } 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; diff --git a/src-migrate/modules/register/components/RegistrasiBisnis.tsx b/src-migrate/modules/register/components/RegistrasiBisnis.tsx index 6ace27f9..b8ea5fff 100644 --- a/src-migrate/modules/register/components/RegistrasiBisnis.tsx +++ b/src-migrate/modules/register/components/RegistrasiBisnis.tsx @@ -29,13 +29,11 @@ const RegistrasiBisnis = () => { const [selectedValueBisnis, setSelectedValueBisnis] = useState('false'); const { form, - formBisnis, isCheckedTNC, isValidCaptcha, errors, - updateFormBisnis, - validateFormBisnis, validate, + updateForm } = useRegisterStore() const isFormValid = useMemo(() => Object.keys(errors).length === 0, [errors]) const toast = useToast() @@ -45,18 +43,18 @@ const RegistrasiBisnis = () => { useEffect(() => { if (selectedValue === "PKP") { - updateFormBisnis("is_pkp", 'true'); - validateFormBisnis(); + updateForm("is_pkp", 'true'); + validate(); } else { - updateFormBisnis("is_pkp", 'false'); - validateFormBisnis(); + updateForm("is_pkp", 'false'); + validate(); } }, [selectedValue,]); const handleChange = (value: string) => { setSelectedValue(value); if (value === "PKP") { - validateFormBisnis(); + validate(); setIsIndividuRequired(true); setIsPKP(true); } else { @@ -68,9 +66,12 @@ const RegistrasiBisnis = () => { const handleChangeBisnis = (value: string) => { setSelectedValueBisnis(value); + console.log('value',value) if (value === "true") { + updateForm('is_terdaftar','true') setIsTerdaftar(true); } else { + updateForm('is_terdaftar','false') setIsTerdaftar(false); } }; @@ -85,8 +86,8 @@ const RegistrasiBisnis = () => { const handleSubmit = async () => { console.log("form",form) - console.log("form Bisnis",formBisnis) - const response = await mutation.mutateAsync(formBisnis) + console.log("form Bisnis",form) + const response = await mutation.mutateAsync(form) console.log("response",response) diff --git a/src-migrate/modules/register/index.tsx b/src-migrate/modules/register/index.tsx index da41a5bb..5df2476e 100644 --- a/src-migrate/modules/register/index.tsx +++ b/src-migrate/modules/register/index.tsx @@ -8,6 +8,7 @@ import Image from "next/image"; import IndoteknikLogo from "~/images/logo.png"; import AccountActivation from "../account-activation"; import { useState } from "react"; +import { useRegisterStore } from "./stores/useRegisterStore"; const LOGO_WIDTH = 150; const LOGO_HEIGHT = LOGO_WIDTH / 3; @@ -15,13 +16,20 @@ const LOGO_HEIGHT = LOGO_WIDTH / 3; const Register = () => { const [isIndividuClicked, setIsIndividuClicked] = useState(true); const [isBisnisClicked, setIsBisnisClicked] = useState(false); + const {resetForm, + updateForm + } = useRegisterStore() const handleIndividuClick = () => { + resetForm(); setIsIndividuClicked(true); setIsBisnisClicked(false); }; - + const handleBisnisClick = () => { + resetForm(); + updateForm("is_terdaftar", 'false') + updateForm("type_acc", 'business') setIsIndividuClicked(false); setIsBisnisClicked(true); }; diff --git a/src-migrate/modules/register/stores/useRegisterStore.ts b/src-migrate/modules/register/stores/useRegisterStore.ts index 75d2ab34..7bed1833 100644 --- a/src-migrate/modules/register/stores/useRegisterStore.ts +++ b/src-migrate/modules/register/stores/useRegisterStore.ts @@ -5,7 +5,6 @@ import { boolean, ZodError } from 'zod'; type State = { form: RegisterProps; - formBisnis: RegisterProps; errors: { [key in keyof RegisterProps]?: string; }; @@ -16,36 +15,16 @@ type State = { type Action = { updateForm: (name: string, value: string) => void; - updateFormBisnis: (name: string, value: string) => void; updateValidCaptcha: (value: boolean) => void; toggleCheckTNC: () => void; openTNC: () => void; closeTNC: () => void; validate: () => void; - validateFormBisnis: () => void; + resetForm: () => void; }; export const useRegisterStore = create((set, get) => ({ form: { - business_name: '', - company_type_id: '', - name: '', - email: '', - email_partner: '', - password: '', - phone: '', - sppkp_document: '', - npwp_document: '', - nameWajibPajak: '', - industry_id: '', - badanUsaha: '', - jenisUsaha: '', - npwp: '', - nama_wajib_pajak : '', - is_pkp: '', - type_acc:'' - }, - formBisnis: { company_type_id: '', business_name: '', name: '', @@ -56,19 +35,15 @@ export const useRegisterStore = create((set, get) => ({ phone: '', sppkp_document: '', npwp_document: '', - nameWajibPajak: '', industry_id: '', - badanUsaha: '', - jenisUsaha: '', npwp: '', - is_pkp:'', - type_acc:'' + is_pkp: '', + type_acc:'', + is_terdaftar:'' }, updateForm: (name, value) => set((state) => ({ form: { ...state.form, [name]: value } })), - updateFormBisnis: (name, value) => - set((state) => ({ formBisnis: { ...state.formBisnis, [name]: value } })), errors: {}, validate: () => { @@ -85,21 +60,6 @@ export const useRegisterStore = create((set, get) => ({ } } }, - - validateFormBisnis: () => { - try { - registerSchema.parse(get().formBisnis); - set({ errors: {} }); - } catch (error) { - if (error instanceof ZodError) { - const errors: State['errors'] = {}; - error.errors.forEach( - (e) => (errors[e.path[0] as keyof RegisterProps] = e.message) - ); - set({ errors }); - } - } - }, isCheckedTNC: false, toggleCheckTNC: () => set((state) => ({ isCheckedTNC: !state.isCheckedTNC })), @@ -110,4 +70,24 @@ export const useRegisterStore = create((set, get) => ({ isValidCaptcha: false, updateValidCaptcha: (value) => set(() => ({ isValidCaptcha: value })), + + resetForm: () => set({ + form: { + company_type_id: '', + business_name: '', + name: '', + nama_wajib_pajak : '', + email: '', + email_partner: '', + password: '', + phone: '', + sppkp_document: '', + npwp_document: '', + industry_id: '', + npwp: '', + is_pkp: '', + type_acc:'', + is_terdaftar:'' + }, + }), })); -- cgit v1.2.3