diff --git a/src/components/register/RegisterSection.tsx b/src/components/register/RegisterSection.tsx
new file mode 100644
index 0000000..6736205
--- /dev/null
+++ b/src/components/register/RegisterSection.tsx
@@ -0,0 +1,161 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import GoogleIcon from '../../assets/googleIcon.svg';
+import Button from '../Button';
+import Input from '../Input';
+import Select from '../Select';
+import { SubmitHandler, useForm } from 'react-hook-form';
+import { extendedSchema, ExtendedFormFields } from '../../utils/schemas';
+import { useNavigate } from 'react-router-dom';
+import { useDispatch } from 'react-redux';
+import { useRegisterUserMutation } from '../../services/authAPI';
+import { setUserRegistered } from '../../state/register/registerSlice';
+import { useEffect } from 'react';
+import { QueryErrorData } from '../../utils/schemas';
+
+const RegisterSection = () => {
+ const navigate = useNavigate();
+ const dispatch = useDispatch();
+
+ const {
+ register,
+ setError,
+ handleSubmit,
+ formState: { errors, isSubmitting },
+ } = useForm
({
+ resolver: zodResolver(extendedSchema),
+ });
+ const [registerUser, { data, isLoading, isSuccess, isError, error }] = useRegisterUserMutation();
+ let loginData: any;
+
+ const onSubmit: SubmitHandler = async retrievedData => {
+ const { password, lastName, firstName, gender, phoneNumber, email } = retrievedData;
+
+ loginData = { password, lastName, firstName, gender, phoneNumber, email };
+ await registerUser({ email, password, lastName, firstName, gender, phoneNumber });
+ };
+ useEffect(() => {
+ const loginError = error as QueryErrorData;
+
+ if (isError) {
+ console.log(loginError);
+ setError('root', {
+ message: loginError.data?.error || loginError.data?.message,
+ });
+ if (/email is already used/gi.test(loginError.data?.error || (loginError.data?.message as string))) {
+ setTimeout(() => {
+ setError('root', {
+ message: 'Redirecting you to login page....',
+ });
+ setTimeout(() => {
+ navigate('/login');
+ }, 3000);
+ }, 2000);
+ }
+ return;
+ }
+ if (isSuccess) {
+ dispatch(setUserRegistered({ ...loginData }));
+ navigate('/register/success');
+ }
+ }, [isLoading, isError, error, isSuccess, data]);
+
+ return (
+ <>
+
+
+
New Customer?
+
Sign Up to continue
+
+
+
+
Existing Customer?
+
Go to Login Page to sign in
+
+
+