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 --- src-migrate/modules/register/components/Form.tsx | 33 +--------- .../modules/register/components/FormBisnis.tsx | 39 +++--------- .../register/components/RegistrasiBisnis.tsx | 59 +----------------- src-migrate/modules/register/index.tsx | 71 ++++++++++++++++++++-- src-migrate/validations/auth.ts | 37 +---------- 5 files changed, 84 insertions(+), 155 deletions(-) (limited to 'src-migrate') diff --git a/src-migrate/modules/register/components/Form.tsx b/src-migrate/modules/register/components/Form.tsx index 5e5e0a11..29c21f62 100644 --- a/src-migrate/modules/register/components/Form.tsx +++ b/src-migrate/modules/register/components/Form.tsx @@ -16,7 +16,6 @@ interface FormProps { } const Form: React.FC = ({ type, required, isBisnisRegist=false }) => { - console.log("isBisnisRegist",isBisnisRegist) const { form, isCheckedTNC, @@ -27,7 +26,6 @@ const Form: React.FC = ({ type, required, isBisnisRegist=false }) => } = useRegisterStore() const isFormValid = useMemo(() => Object.keys(errors).length === 0, [errors]) - console.log("errors",errors) const router = useRouter() const toast = useToast() @@ -35,19 +33,6 @@ const Form: React.FC = ({ type, required, isBisnisRegist=false }) => const handleInputChange = (event: ChangeEvent) => { const { name, value } = event.target; 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') - // } validate() } @@ -93,7 +78,7 @@ const Form: React.FC = ({ type, required, isBisnisRegist=false }) => break } } - console.log(!isFormValid,!isCheckedTNC,mutation.isLoading,!isValidCaptcha) + return (
@@ -167,21 +152,7 @@ const Form: React.FC = ({ type, required, isBisnisRegist=false }) => {!!errors.phone && {errors.phone}} - {type==='individu' && ( - <> - - - - - - - )} + 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}} - - {/* */} ) } diff --git a/src-migrate/modules/register/components/RegistrasiBisnis.tsx b/src-migrate/modules/register/components/RegistrasiBisnis.tsx index c158e2f4..443ff0a0 100644 --- a/src-migrate/modules/register/components/RegistrasiBisnis.tsx +++ b/src-migrate/modules/register/components/RegistrasiBisnis.tsx @@ -14,7 +14,6 @@ import { useMutation } from "react-query"; import { RegisterProps } from "~/types/auth"; import { registerUser } from "~/services/auth"; import router from "next/router"; -import toast from "react-hot-toast"; import { useRouter } from "next/router"; import { UseToastOptions, useToast } from "@chakra-ui/react"; import Link from "next/link"; @@ -22,7 +21,6 @@ import Link from "next/link"; const RegistrasiBisnis = () => { const [isPKP, setIsPKP] = useState(true); const [isTerdaftar, setIsTerdaftar] = useState(false); - const [isIndividuRequired, setIsIndividuRequired] = useState(true); const [isDropIndividu, setIsDropIndividu] = useState(true); const [isBisnisClicked, setisBisnisClicked] = useState(true); const [selectedValue, setSelectedValue] = useState('PKP'); @@ -55,19 +53,16 @@ const RegistrasiBisnis = () => { setSelectedValue(value); if (value === "PKP") { validate(); - setIsIndividuRequired(true); setIsPKP(true); } else { validate(); setIsPKP(false); - setIsIndividuRequired(false); // Hide and make optional the Individu form setIsPKP(false); } }; const handleChangeBisnis = (value: string) => { setSelectedValueBisnis(value); - console.log('value',value) if (value === "true") { validate(); updateForm('is_terdaftar','true') @@ -87,46 +82,6 @@ const RegistrasiBisnis = () => { setisBisnisClicked(!isBisnisClicked) }; - const handleSubmit = async () => { - console.log("form",form) - console.log("form Bisnis",form) - const response = await mutation.mutateAsync(form) - - console.log("response",response) - - 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 ( <> @@ -192,19 +147,9 @@ const RegistrasiBisnis = () => { )} +

- - - + ); }; diff --git a/src-migrate/modules/register/index.tsx b/src-migrate/modules/register/index.tsx index 5df2476e..bb94d170 100644 --- a/src-migrate/modules/register/index.tsx +++ b/src-migrate/modules/register/index.tsx @@ -7,8 +7,16 @@ import Link from "next/link"; import Image from "next/image"; import IndoteknikLogo from "~/images/logo.png"; import AccountActivation from "../account-activation"; -import { useState } from "react"; +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; @@ -16,10 +24,17 @@ const LOGO_HEIGHT = LOGO_WIDTH / 3; const Register = () => { const [isIndividuClicked, setIsIndividuClicked] = useState(true); const [isBisnisClicked, setIsBisnisClicked] = useState(false); - const {resetForm, + const {form, isCheckedTNC, isValidCaptcha, resetForm,errors, updateForm } = useRegisterStore() + const isFormValid = useMemo(() => Object.keys(errors).length === 0, [errors]) + const toast = useToast() + const router = useRouter() + const mutation = useMutation({ + mutationFn: (data: RegisterProps) => registerUser(data) + }) + const handleIndividuClick = () => { resetForm(); setIsIndividuClicked(true); @@ -33,12 +48,46 @@ const Register = () => { setIsIndividuClicked(false); setIsBisnisClicked(true); }; + const handleSubmit = async () => { + 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 (
-
-
+
+
{
)}
+
+ + + +
Sudah punya akun Indoteknik?{" "} diff --git a/src-migrate/validations/auth.ts b/src-migrate/validations/auth.ts index 5cc3dc67..443c0d80 100644 --- a/src-migrate/validations/auth.ts +++ b/src-migrate/validations/auth.ts @@ -27,15 +27,9 @@ export const registerSchema = z npwp: z.string().optional(), }) .superRefine((data, ctx) => { - console.log("data.is_terdaftar", data.is_terdaftar); - console.log("data.is_pkp", data.is_pkp); - console.log("data.type_acc", data.type_acc); - - // Correct the typo in 'bussiness' to 'business' if (data.type_acc === 'business') { if (data.is_terdaftar === 'false') { if (data.is_pkp === 'false') { - // Validation for is_pkp === 'false' if (!data.business_name) { ctx.addIssue({ code: 'custom', @@ -58,7 +52,6 @@ export const registerSchema = z }); } } else { - // Validation for is_pkp === 'true' or other values const requiredFields: { field: keyof typeof data; message: string }[] = [ { field: 'business_name', message: 'Nama perusahaan harus diisi' }, { field: 'company_type_id', message: 'Badan usaha wajib dipilih' }, @@ -79,7 +72,6 @@ export const registerSchema = z } }); - // Email validation for `email_partner` if (!data.email_partner || !z.string().email().safeParse(data.email_partner).success) { ctx.addIssue({ code: 'custom', @@ -90,7 +82,6 @@ export const registerSchema = z } }else{ if (data.is_pkp === 'false') { - // Validation for is_pkp === 'false' if (!data.business_name) { ctx.addIssue({ code: 'custom', @@ -99,33 +90,11 @@ export const registerSchema = z }); } } else { - // Validation for is_pkp === 'true' or other values - const requiredFields: { field: keyof typeof data; message: string }[] = [ - { field: 'business_name', message: 'Nama perusahaan harus diisi' }, - { field: 'company_type_id', message: 'Badan usaha wajib dipilih' }, - { field: 'industry_id', message: 'Jenis usaha harus dipilih' }, - { field: 'sppkp_document', message: 'Document harus diisi' }, - { field: 'npwp_document', message: 'Document harus diisi' }, - { field: 'npwp', message: 'Format NPWP tidak valid, NPWP harus terdiri dari 15 digit angka.' }, - { field: 'nama_wajib_pajak', message: 'Nama wajib pajak harus diisi' }, - ]; - - requiredFields.forEach(({ field, message }) => { - if (!data[field]) { - ctx.addIssue({ - code: 'custom', - path: [field], - message, - }); - } - }); - - // Email validation for `email_partner` - if (!data.email_partner || !z.string().email().safeParse(data.email_partner).success) { + if (!data.business_name) { ctx.addIssue({ code: 'custom', - path: ['email_partner'], - message: 'Email partner harus diisi dengan format example@mail.com', + path: ['business_name'], + message: 'Nama perusahaan harus diisi', }); } } -- cgit v1.2.3