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 --- src-migrate/modules/register/components/Form.tsx | 152 ++-- .../modules/register/components/FormBisnis.tsx | 776 ++++++++++++--------- .../register/components/RegistrasiBisnis.tsx | 190 ++--- .../register/components/RegistrasiIndividu.tsx | 31 +- src-migrate/modules/register/index.tsx | 170 +++-- 5 files changed, 764 insertions(+), 555 deletions(-) (limited to 'src-migrate/modules') diff --git a/src-migrate/modules/register/components/Form.tsx b/src-migrate/modules/register/components/Form.tsx index 29c21f62..118d9d69 100644 --- a/src-migrate/modules/register/components/Form.tsx +++ b/src-migrate/modules/register/components/Form.tsx @@ -1,90 +1,98 @@ -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 TermCondition from "./TermCondition"; -import FormCaptcha from "./FormCaptcha"; -import { useRouter } from "next/router"; -import { UseToastOptions, useToast } from "@chakra-ui/react"; -import Link from "next/link"; +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 TermCondition from './TermCondition'; +import FormCaptcha from './FormCaptcha'; +import { useRouter } from 'next/router'; +import { UseToastOptions, useToast } from '@chakra-ui/react'; +import Link from 'next/link'; interface FormProps { type: string; required: boolean; isBisnisRegist: boolean; + chekValid: boolean; } -const Form: React.FC = ({ type, required, isBisnisRegist=false }) => { - const { - form, - isCheckedTNC, - isValidCaptcha, - errors, - updateForm, - validate, - } = useRegisterStore() +const Form: React.FC = ({ + type, + required, + isBisnisRegist = false, + chekValid = false, +}) => { + const { form, isCheckedTNC, isValidCaptcha, errors, updateForm, validate } = + useRegisterStore(); - const isFormValid = useMemo(() => Object.keys(errors).length === 0, [errors]) + const isFormValid = useMemo(() => Object.keys(errors).length === 0, [errors]); - const router = useRouter() - const toast = useToast() + const router = useRouter(); + const toast = useToast(); const handleInputChange = (event: ChangeEvent) => { const { name, value } = event.target; - updateForm(name, value) - validate() - } + updateForm(name, value); + validate(); + }; const mutation = useMutation({ - mutationFn: (data: RegisterProps) => registerUser(data) - }) + 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(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}`) + 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) { case 'EMAIL_USED': toast({ ...toastProps, title: 'Email sudah digunakan', - status: 'warning' - }) + 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 + description: ( + <> + Akun sudah terdaftar namun belum aktif.{' '} + + Klik untuk aktivasi akun + + + ), + status: 'warning', + }); + break; } - } - + }; return ( -
- +
- + = ({ type, required, isBisnisRegist=false }) => placeholder='Masukan nama lengkap anda' value={form.name} onChange={handleInputChange} - aria-invalid={!!errors.name} + aria-invalid={chekValid && !!errors.name} /> - {!!errors.name && {errors.name}} + {chekValid && !!errors.name && ( + {errors.name} + )}
- + = ({ type, required, isBisnisRegist=false }) => placeholder='Masukan alamat email anda' value={form.email} onChange={handleInputChange} - autoComplete="username" - aria-invalid={!!errors.email} + autoComplete='username' + aria-invalid={chekValid && !!errors.email} /> - {!!errors.email && {errors.email}} + {chekValid && !!errors.email && ( + {errors.email} + )}
- +
- + = ({ type, required, isBisnisRegist=false }) => placeholder='••••••••••••' value={form.password} onChange={handleInputChange} - autoComplete="current-password" - aria-invalid={!!errors.password} + autoComplete='current-password' + aria-invalid={chekValid && !!errors.password} /> - {!!errors.password && {errors.password}} + {chekValid && !!errors.password && ( + {errors.password} + )}
- + = ({ type, required, isBisnisRegist=false }) => placeholder='08xxxxxxxx' value={form.phone} onChange={handleInputChange} - aria-invalid={!!errors.phone} + aria-invalid={chekValid && !!errors.phone} /> - {!!errors.phone && {errors.phone}} + {chekValid && !!errors.phone && ( + {errors.phone} + )}
- - - -
- ) -} + ); +}; -export default Form \ No newline at end of file +export default Form; 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; diff --git a/src-migrate/modules/register/components/RegistrasiBisnis.tsx b/src-migrate/modules/register/components/RegistrasiBisnis.tsx index 1d8317f1..36476ab9 100644 --- a/src-migrate/modules/register/components/RegistrasiBisnis.tsx +++ b/src-migrate/modules/register/components/RegistrasiBisnis.tsx @@ -1,67 +1,60 @@ -import { ChangeEvent, useEffect, useMemo, useState } from "react"; -import FormBisnis from "./FormBisnis"; -import Form from "./Form"; -import TermCondition from "./TermCondition"; -import FormCaptcha from "./FormCaptcha"; -import { Radio, RadioGroup, Stack, Divider, Button } from '@chakra-ui/react' -import React from "react"; -import { - ChevronDownIcon, - ChevronRightIcon -} from '@heroicons/react/24/outline'; -import { useRegisterStore } from "../stores/useRegisterStore"; -import { useMutation } from "react-query"; -import { RegisterProps } from "~/types/auth"; -import { registerUser } from "~/services/auth"; -import router from "next/router"; -import { useRouter } from "next/router"; -import { UseToastOptions, useToast } from "@chakra-ui/react"; -import Link from "next/link"; - -const RegistrasiBisnis = () => { +import { ChangeEvent, useEffect, useMemo, useState } from 'react'; +import FormBisnis from './FormBisnis'; +import Form from './Form'; +import TermCondition from './TermCondition'; +import FormCaptcha from './FormCaptcha'; +import { Radio, RadioGroup, Stack, Divider, Button } from '@chakra-ui/react'; +import React from 'react'; +import { ChevronDownIcon, ChevronRightIcon } from '@heroicons/react/24/outline'; +import { useRegisterStore } from '../stores/useRegisterStore'; +import { useMutation } from 'react-query'; +import { RegisterProps } from '~/types/auth'; +import { registerUser } from '~/services/auth'; +import router from 'next/router'; +import { useRouter } from 'next/router'; +import { UseToastOptions, useToast } from '@chakra-ui/react'; +import Link from 'next/link'; +interface FormProps { + chekValid: boolean; +} +const RegistrasiBisnis: React.FC = ({ chekValid }) => { const [isPKP, setIsPKP] = useState(true); const [isTerdaftar, setIsTerdaftar] = useState(false); const [isDropIndividu, setIsDropIndividu] = useState(true); const [isBisnisClicked, setisBisnisClicked] = useState(true); const [selectedValue, setSelectedValue] = useState('PKP'); const [selectedValueBisnis, setSelectedValueBisnis] = useState('false'); - const { - form, - isCheckedTNC, - isValidCaptcha, - errors, - validate, - updateForm - } = useRegisterStore() - const isFormValid = useMemo(() => Object.keys(errors).length === 0, [errors]) - const toast = useToast() + const { form, isCheckedTNC, isValidCaptcha, errors, validate, updateForm } = + useRegisterStore(); + const isFormValid = useMemo(() => Object.keys(errors).length === 0, [errors]); + const toast = useToast(); const mutation = useMutation({ - mutationFn: (data: RegisterProps) => registerUser(data) - }) + mutationFn: (data: RegisterProps) => registerUser(data), + }); useEffect(() => { - if (selectedValue === "PKP") { - updateForm("is_pkp", 'true'); + if (selectedValue === 'PKP') { + updateForm('is_pkp', 'true'); validate(); } else { - updateForm("is_pkp", 'false'); + updateForm('is_pkp', 'false'); validate(); } - }, [selectedValue,]); - + }, [selectedValue]); + useEffect(() => { if (isTerdaftar) { - updateForm("is_terdaftar", 'true'); + updateForm('is_terdaftar', 'true'); validate(); } else { - updateForm("is_terdaftar", 'false'); + updateForm('is_terdaftar', 'false'); validate(); } - }, [isTerdaftar,]); + }, [isTerdaftar]); - const handleChange = (value: string) => { + const handleChange = (value: string) => { setSelectedValue(value); - if (value === "PKP") { + if (value === 'PKP') { validate(); setIsPKP(true); } else { @@ -70,10 +63,10 @@ const RegistrasiBisnis = () => { setIsPKP(false); } }; - + const handleChangeBisnis = (value: string) => { setSelectedValueBisnis(value); - if (value === "true") { + if (value === 'true') { validate(); setIsTerdaftar(true); } else { @@ -83,81 +76,114 @@ const RegistrasiBisnis = () => { }; const handleClick = () => { - setIsDropIndividu(!isDropIndividu) + setIsDropIndividu(!isDropIndividu); }; const handleClickBisnis = () => { - setisBisnisClicked(!isBisnisClicked) + setisBisnisClicked(!isBisnisClicked); }; return ( <> - -
-
-
-

+

+
+
+

Data Akun

{isDropIndividu ? ( -
- +
+
) : ( - + )}
{isDropIndividu && (
- -
+ +
)}
-
-
-
-

+

+
+
+

Data Bisnis

{isBisnisClicked ? ( -
- +
+
) : ( - + )}
{isBisnisClicked && (
- +
-

Bisnis Terdaftar di Indoteknik?

- +

+ Bisnis Terdaftar di Indoteknik? +

+ - Sudah Terdaftar - Belum Terdaftar + + Sudah Terdaftar + + + Belum Terdaftar +
-
-

Tipe Bisnis

- - - PKP - Non-PKP - - -
- +
+

Tipe Bisnis

+ + + + PKP + + + Non-PKP + + + +
+
)}
- -

- + +

); }; diff --git a/src-migrate/modules/register/components/RegistrasiIndividu.tsx b/src-migrate/modules/register/components/RegistrasiIndividu.tsx index 5503db2a..3997e767 100644 --- a/src-migrate/modules/register/components/RegistrasiIndividu.tsx +++ b/src-migrate/modules/register/components/RegistrasiIndividu.tsx @@ -1,24 +1,27 @@ -import Form from "./Form"; -import { useRegisterStore } from "../stores/useRegisterStore"; -import { useEffect } from "react"; -const RegistrasiIndividu = () => { - const { - form, - errors, - updateForm, - validate - } = useRegisterStore() +import Form from './Form'; +import { useRegisterStore } from '../stores/useRegisterStore'; +import { useEffect } from 'react'; +interface FormProps { + chekValid: boolean; +} +const RegistrasiIndividu: React.FC = ({ chekValid }) => { + const { form, errors, updateForm, validate } = useRegisterStore(); useEffect(() => { - updateForm("is_pkp", 'false'); - updateForm("is_terdaftar", 'false'); - updateForm("type_acc", 'individu'); + updateForm('is_pkp', 'false'); + updateForm('is_terdaftar', 'false'); + updateForm('type_acc', 'individu'); validate(); }, []); return ( <> - + ); }; diff --git a/src-migrate/modules/register/index.tsx b/src-migrate/modules/register/index.tsx index 31e09088..d91af9e3 100644 --- a/src-migrate/modules/register/index.tsx +++ b/src-migrate/modules/register/index.tsx @@ -1,118 +1,130 @@ -import PageContent from "~/modules/page-content"; -import Form from "./components/Form"; -import RegistrasiIndividu from "./components/RegistrasiIndividu"; -import RegistrasiBisnis from "./components/RegistrasiBisnis"; -import FormBisnis from "./components/FormBisnis"; -import Link from "next/link"; -import Image from "next/image"; -import IndoteknikLogo from "~/images/logo.png"; -import AccountActivation from "../account-activation"; -import { useMemo, useState } from "react"; -import { useRegisterStore } from "./stores/useRegisterStore"; -import FormCaptcha from "./components/FormCaptcha"; -import TermCondition from "./components/TermCondition"; -import { Button } from '@chakra-ui/react' -import { useMutation } from "react-query"; -import { UseToastOptions, useToast } from "@chakra-ui/react"; -import { RegisterProps } from "~/types/auth"; -import { registerUser } from "~/services/auth"; -import { useRouter } from "next/router"; +import PageContent from '~/modules/page-content'; +import RegistrasiIndividu from './components/RegistrasiIndividu'; +import RegistrasiBisnis from './components/RegistrasiBisnis'; +import Link from 'next/link'; +import Image from 'next/image'; +import IndoteknikLogo from '~/images/logo.png'; +import AccountActivation from '../account-activation'; +import { useMemo, useState } from 'react'; +import { useRegisterStore } from './stores/useRegisterStore'; +import FormCaptcha from './components/FormCaptcha'; +import TermCondition from './components/TermCondition'; +import { Button } from '@chakra-ui/react'; +import { useMutation } from 'react-query'; +import { UseToastOptions, useToast } from '@chakra-ui/react'; +import { RegisterProps } from '~/types/auth'; +import { registerUser } from '~/services/auth'; +import { useRouter } from 'next/router'; const LOGO_WIDTH = 150; const LOGO_HEIGHT = LOGO_WIDTH / 3; const Register = () => { const [isIndividuClicked, setIsIndividuClicked] = useState(true); + const [notValid, setNotValid] = useState(false); const [isBisnisClicked, setIsBisnisClicked] = useState(false); - const {form, isCheckedTNC, isValidCaptcha, resetForm,errors, - updateForm - } = useRegisterStore() + const { form, isCheckedTNC, isValidCaptcha, resetForm, errors, updateForm } = + useRegisterStore(); - const isFormValid = useMemo(() => Object.keys(errors).length === 0, [errors]) - const toast = useToast() - const router = useRouter() + const isFormValid = useMemo(() => Object.keys(errors).length === 0, [errors]); + const toast = useToast(); + const router = useRouter(); const mutation = useMutation({ - mutationFn: (data: RegisterProps) => registerUser(data) - }) + mutationFn: (data: RegisterProps) => registerUser(data), + }); const handleIndividuClick = () => { resetForm(); setIsIndividuClicked(true); setIsBisnisClicked(false); }; - + const handleBisnisClick = () => { resetForm(); - updateForm("is_terdaftar", 'false') - updateForm("type_acc", 'business') + updateForm('is_terdaftar', 'false'); + updateForm('type_acc', 'business'); setIsIndividuClicked(false); setIsBisnisClicked(true); }; const handleSubmit = async () => { - const response = await mutation.mutateAsync(form) + if (!isFormValid) { + setNotValid(true); + return; + } else { + setNotValid(false); + } + 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}`) + 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) { case 'EMAIL_USED': toast({ ...toastProps, title: 'Email sudah digunakan', - status: 'warning' - }) + 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 + description: ( + <> + Akun sudah terdaftar namun belum aktif.{' '} + + Klik untuk aktivasi akun + + + ), + status: 'warning', + }); + break; } }; return ( -
-
-
-
- +
+
+
+
+ Logo Indoteknik -

+

Daftar Akun Indoteknik

-

+

Buat akun sekarang lebih mudah dan terverifikasi

-