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 + src-migrate/modules/register/index.tsx | 126 ++++++++--- .../modules/register/stores/useRegisterStore.ts | 1 + 6 files changed, 481 insertions(+), 81 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') 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; diff --git a/src-migrate/modules/register/index.tsx b/src-migrate/modules/register/index.tsx index 00931284..9b3f5509 100644 --- a/src-migrate/modules/register/index.tsx +++ b/src-migrate/modules/register/index.tsx @@ -1,43 +1,101 @@ -import PageContent from "~/modules/page-content" -import Form from "./components/Form" -import Link from "next/link" -import Image from "next/image" -import IndoteknikLogo from "~/images/logo.png" -import AccountActivation from "../account-activation" +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 { useState } from "react"; const LOGO_WIDTH = 150; const LOGO_HEIGHT = LOGO_WIDTH / 3; const Register = () => { + const [isIndividuClicked, setIsIndividuClicked] = useState(true); + const [isBisnisClicked, setIsBisnisClicked] = useState(false); + + const handleIndividuClick = () => { + setIsIndividuClicked(true); + setIsBisnisClicked(false); + }; + + const handleBisnisClick = () => { + setIsIndividuClicked(false); + setIsBisnisClicked(true); + }; + return (
-
-
- - Logo Indoteknik - - -

- Daftar Akun Indoteknik -

-

- Buat akun sekarang lebih mudah dan terverifikasi -

- - - -
- Sudah punya akun Indoteknik?{' '} - - Masuk +
+
+
+ + Logo Indoteknik -
-
- Akun anda belum aktif?{' '} - - Aktivasi - +

+ Daftar Akun Indoteknik +

+

+ Buat akun sekarang lebih mudah dan terverifikasi +

+ + +
+
+

Individu

+
+
+

Bisnis

+
+
+
+ {isIndividuClicked && ( +
+ +
+ )} + {isBisnisClicked && ( +
+ +
+ )} +
+
+
+ Sudah punya akun Indoteknik?{" "} + + Masuk + +
+
+ Akun anda belum aktif?{" "} + + Aktivasi + +
+
@@ -48,7 +106,7 @@ const Register = () => {
- ) -} + ); +}; -export default Register \ No newline at end of file +export default Register; diff --git a/src-migrate/modules/register/stores/useRegisterStore.ts b/src-migrate/modules/register/stores/useRegisterStore.ts index d8abf52b..1438ccc2 100644 --- a/src-migrate/modules/register/stores/useRegisterStore.ts +++ b/src-migrate/modules/register/stores/useRegisterStore.ts @@ -29,6 +29,7 @@ export const useRegisterStore = create((set, get) => ({ email: '', password: '', phone: '', + document: File, }, updateForm: (name, value) => set((state) => ({ form: { ...state.form, [name]: value } })), -- cgit v1.2.3