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 ++++++++++----------- .../register/components/RegistrasiBisnis.tsx | 25 +++- .../modules/register/stores/useRegisterStore.ts | 30 +++++ 3 files changed, 120 insertions(+), 70 deletions(-) (limited to 'src-migrate/modules') 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; diff --git a/src-migrate/modules/register/components/RegistrasiBisnis.tsx b/src-migrate/modules/register/components/RegistrasiBisnis.tsx index c093d556..2c429f2d 100644 --- a/src-migrate/modules/register/components/RegistrasiBisnis.tsx +++ b/src-migrate/modules/register/components/RegistrasiBisnis.tsx @@ -20,8 +20,10 @@ const RegistrasiBisnis = () => { const [isIndividuRequired, setIsIndividuRequired] = useState(true); const [isBisnisRequired, setIsBisnisRequired] = useState(true); const [selectedValue, setSelectedValue] = useState('PKP'); + const [selectedValueBisnis, setSelectedValueBisnis] = useState('true'); const { form, + formBisnis, isCheckedTNC, isValidCaptcha, errors, @@ -44,6 +46,15 @@ const RegistrasiBisnis = () => { } }; + const handleChangeBisnis = (value: string) => { + setSelectedValueBisnis(value); + if (value === "true") { + setIsBisnisRequired(true); // Show and require Individu form + } else { + setIsBisnisRequired(false); // Hide and make optional the Individu form + } + }; + const handleClick = () => { setIsIndividuRequired(!isIndividuRequired) }; @@ -52,6 +63,15 @@ const RegistrasiBisnis = () => { setIsBisnisRequired(!isBisnisRequired) }; + const handleSubmit = () => { + console.log("form",form) + console.log("form Bisnis",formBisnis) + }; + console.log("isFormValid",isFormValid) + console.log("isCheckedTNC",isCheckedTNC) + console.log("mutation.isLoading",mutation.isLoading) + console.log("isValidCaptcha",isValidCaptcha) + return ( <>
@@ -100,7 +120,7 @@ const RegistrasiBisnis = () => {

Bisnis Terdaftar di Indoteknik?

- + Sudah Terdaftar Belum Terdaftar @@ -112,15 +132,16 @@ const RegistrasiBisnis = () => { )}
- + ); }; diff --git a/src-migrate/modules/register/stores/useRegisterStore.ts b/src-migrate/modules/register/stores/useRegisterStore.ts index 1438ccc2..19a055ae 100644 --- a/src-migrate/modules/register/stores/useRegisterStore.ts +++ b/src-migrate/modules/register/stores/useRegisterStore.ts @@ -5,6 +5,7 @@ import { ZodError } from 'zod'; type State = { form: RegisterProps; + formBisnis: RegisterProps; errors: { [key in keyof RegisterProps]?: string; }; @@ -15,11 +16,13 @@ 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; }; export const useRegisterStore = create((set, get) => ({ @@ -31,8 +34,19 @@ export const useRegisterStore = create((set, get) => ({ phone: '', document: File, }, + formBisnis: { + company: '', + name: '', + email: '', + password: '', + phone: '', + document: File, + }, updateForm: (name, value) => set((state) => ({ form: { ...state.form, [name]: value } })), + + updateFormBisnis: (name, value) => + set((state) => ({ formBisnis: { ...state.formBisnis, [name]: value } })), errors: {}, validate: () => { @@ -49,6 +63,22 @@ 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 })), -- cgit v1.2.3