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 --- src-migrate/modules/register/components/Form.tsx | 89 ++++---- .../modules/register/components/FormBisnis.tsx | 230 +++++++++++++++++++++ .../register/components/RegistrasiBisnis.tsx | 105 ++++++++++ .../register/components/RegistrasiIndividu.tsx | 11 + 4 files changed, 388 insertions(+), 47 deletions(-) create mode 100644 src-migrate/modules/register/components/FormBisnis.tsx create mode 100644 src-migrate/modules/register/components/RegistrasiBisnis.tsx create mode 100644 src-migrate/modules/register/components/RegistrasiIndividu.tsx (limited to 'src-migrate/modules/register/components') diff --git a/src-migrate/modules/register/components/Form.tsx b/src-migrate/modules/register/components/Form.tsx index b834f97a..7d18f4ee 100644 --- a/src-migrate/modules/register/components/Form.tsx +++ b/src-migrate/modules/register/components/Form.tsx @@ -9,7 +9,12 @@ import { useRouter } from "next/router"; import { UseToastOptions, useToast } from "@chakra-ui/react"; import Link from "next/link"; -const Form = () => { +interface FormProps { + type: string; + required: boolean; +} + +const Form: React.FC = ({ type, required }) => { const { form, isCheckedTNC, @@ -75,25 +80,9 @@ const Form = () => { return (
-
- - - -
- + {
- - - - - {!!errors.phone && {errors.phone}} -
- -
- + { {!!errors.email && {errors.email}}
- +
- + { {!!errors.password && {errors.password}}
- +
+ + + + + {!!errors.phone && {errors.phone}} +
+ + {type==='individu' && ( + <> + + + + + + + )} - - ) } 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 diff --git a/src-migrate/modules/register/components/RegistrasiBisnis.tsx b/src-migrate/modules/register/components/RegistrasiBisnis.tsx new file mode 100644 index 00000000..217b4c79 --- /dev/null +++ b/src-migrate/modules/register/components/RegistrasiBisnis.tsx @@ -0,0 +1,105 @@ +import { useState } from "react"; +import FormBisnis from "./FormBisnis"; +import Form from "./Form"; +import TermCondition from "./TermCondition"; +import FormCaptcha from "./FormCaptcha"; +import { Radio, RadioGroup, Stack, Divider } from '@chakra-ui/react' +import React from "react"; +import { + ChevronDownIcon, + ChevronRightIcon +} from '@heroicons/react/24/outline'; + +const RegistrasiBisnis = () => { + const [isPKP, setIsPKP] = useState(false); + const [isTerdaftar, setIsTerdaftar] = useState(false); + const [isIndividuRequired, setIsIndividuRequired] = useState(true); + const [isBisnisRequired, setIsBisnisRequired] = useState(true); + const [selectedValue, setSelectedValue] = useState('PKP'); + + const handleChange = (value: string) => { + setSelectedValue(value); + if (value === "PKP") { + setIsPKP(true); + setIsIndividuRequired(true); // Show and require Individu form + } else { + setIsPKP(false); + setIsIndividuRequired(false); // Hide and make optional the Individu form + } + }; + + const handleClick = () => { + setIsIndividuRequired(!isIndividuRequired) + }; + + const handleClickBisnis = () => { + setIsBisnisRequired(!isBisnisRequired) + }; + + return ( + <> +
+

Tipe Bisnis

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

Data Akun

+ {isIndividuRequired ? ( +
+ +
+ ) : ( + + )} +
+ {isIndividuRequired && ( +
+ +
+
+ )} +
+
+
+
+
+

Data Bisnis

+ {isBisnisRequired ? ( +
+ +
+ ) : ( + + )} +
+ {isBisnisRequired && ( +
+ +
+

Bisnis Terdaftar di Indoteknik?

+ + + Sudah Terdaftar + Belum Terdaftar + + +
+ +
+ )} +
+
+ + + + ); +}; + +export default RegistrasiBisnis; diff --git a/src-migrate/modules/register/components/RegistrasiIndividu.tsx b/src-migrate/modules/register/components/RegistrasiIndividu.tsx new file mode 100644 index 00000000..eff86124 --- /dev/null +++ b/src-migrate/modules/register/components/RegistrasiIndividu.tsx @@ -0,0 +1,11 @@ +import Form from "./Form"; +const RegistrasiIndividu = () => { + + return ( + <> + + + ); +}; + +export default RegistrasiIndividu; -- 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 +++++++++++++++------- .../register/components/RegistrasiBisnis.tsx | 29 ++++++- 2 files changed, 94 insertions(+), 33 deletions(-) (limited to 'src-migrate/modules/register/components') 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}} */}
- + */} ) } diff --git a/src-migrate/modules/register/components/RegistrasiBisnis.tsx b/src-migrate/modules/register/components/RegistrasiBisnis.tsx index 217b4c79..c093d556 100644 --- a/src-migrate/modules/register/components/RegistrasiBisnis.tsx +++ b/src-migrate/modules/register/components/RegistrasiBisnis.tsx @@ -1,4 +1,4 @@ -import { useState } from "react"; +import { useMemo, useState } from "react"; import FormBisnis from "./FormBisnis"; import Form from "./Form"; import TermCondition from "./TermCondition"; @@ -9,6 +9,10 @@ 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"; const RegistrasiBisnis = () => { const [isPKP, setIsPKP] = useState(false); @@ -16,6 +20,18 @@ const RegistrasiBisnis = () => { const [isIndividuRequired, setIsIndividuRequired] = useState(true); const [isBisnisRequired, setIsBisnisRequired] = useState(true); const [selectedValue, setSelectedValue] = useState('PKP'); + const { + form, + isCheckedTNC, + isValidCaptcha, + errors, + updateForm, + validate, + } = useRegisterStore() + const isFormValid = useMemo(() => Object.keys(errors).length === 0, [errors]) + const mutation = useMutation({ + mutationFn: (data: RegisterProps) => registerUser(data) + }) const handleChange = (value: string) => { setSelectedValue(value); @@ -38,8 +54,8 @@ const RegistrasiBisnis = () => { return ( <> -
-

Tipe Bisnis

+
+

Tipe Bisnis

PKP @@ -98,6 +114,13 @@ const RegistrasiBisnis = () => {
+ ); }; -- 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 ++++++++++----------- .../register/components/RegistrasiBisnis.tsx | 25 +++- 2 files changed, 90 insertions(+), 70 deletions(-) (limited to 'src-migrate/modules/register/components') 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 = () => { )}
- + ); }; -- cgit v1.2.3 From 0427b70917d7623d5de1969b99e9c198c38ccca7 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Tue, 20 Aug 2024 15:53:01 +0700 Subject: = ({ type, required }) => { {type==='individu' && ( <> - + {/* */}
+

+ - ); }; -- 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 ++++++----- .../register/components/RegistrasiBisnis.tsx | 44 ++++++++++++---------- .../modules/register/components/TermCondition.tsx | 2 +- 3 files changed, 37 insertions(+), 30 deletions(-) (limited to 'src-migrate/modules/register/components') 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 }) => {
-