Untitled

import React, { useState, useEffect } from 'react'
import '../../assets/styles/registrationStyle.css'
import '../../assets/styles/main.css'
import backgroundImage from '../../assets/images/backgroundRegistration.jpg';
import logo from '../../assets/images/logo.png';
import dashbordRegistration from '../../assets/images/dashbordRegistration.png';
import logoMobile from '../../assets/images/logoMobile.png';
import InputField from '../../common/components/inputs/InputField'
import Button from '../../common/components/buttons/Button';
import { MdOutlineMail } from "react-icons/md";
import { BsPerson } from "react-icons/bs";
import { FiPhone } from "react-icons/fi";
import { CiLock } from "react-icons/ci";
import LinkButton from '../../common/components/links/Link';
import { useDispatch, useSelector } from 'react-redux';
import { useNavigate } from 'react-router-dom';
import { toast } from 'react-toastify'
import { register, reset } from '../../app/authSlice.js'
import Spiner from '../../common/utils/Spiner.jsx';


function RegistrationPage() {

    const [firstName, setFirstName] = useState('')
    const [lastName, setLastName] = useState('')
    const [email, setEmail] = useState('')
    const [phone, setPhone] = useState('')
    const [password, setPassword] = useState('')
    const [passwordConfirm, setPasswordConfirm] = useState('')

    const { user, isLoding, isError, isSuccess, message } = useSelector((state) => state.auth);
    const dispatch = useDispatch();
    const navigate = useNavigate()

    useEffect(() => {
        if (isError) {
            toast.error(message)

        }
        if (isSuccess || user) {
            navigate('/')
        }
        dispatch(reset())

    }, [user, isError, isSuccess, message, navigate, dispatch])

    const handleRegistration = (e) => {
        e.preventDefault();

        const userData = {
            name: firstName + lastName,
            email,
            phone,
            password,
            passwordConfirm,
            role: 'partner'
        }
        dispatch(register(userData))
    }

    // if (isLoading) {
    //     return <Spiner />
    // }


    return (
        <>
            <div className='registration relative w-full h-screen flex justify-center items-center flex-col'>
                <div className='flex justify-center items-center'>
                    <div className='registration-shadow'></div>
                    <div className='cardOneRegistration relative'>
                        <img src={backgroundImage} alt="background registration" className='backgroundImageRegistration' />
                        <div className='absolute top-10 left-10 mb-10'>
                            <img src={logo} alt="logo" className=' logoRegistration mb-8' />
                            <p className='text-sm mr-10 mb-10'>
                                Transforming call center operations globally Elevate productivity, track targets, streamline payments effortlessly
                            </p>
                            <img src={dashbordRegistration} alt="dashbord registration" className='imageDashbordRegistration ml-6' />
                        </div>
                    </div>
                    <div className='cardTwoRegistration '>
                        <div className=' titlesRegistration mt-10 ml-11 mr-11 mb-5'>
                            <img src={logoMobile} alt="logo" className=' logoMobile  mb-8' />
                            <h1>Welcom to heylead 👋</h1>
                            <p>You can register now </p>
                            <span>Enter all information that requared</span>
                        </div>
                        <div className='ml-11 mr-11'>
                            <form>
                                <div className='relative flex justify-between mb-5'>
                                    <label htmlFor="inputs" className='input-field-label firstName '><span><BsPerson className='iconForm' />First name</span></label>
                                    <InputField id='inputs' type='text' className='input-field-input' value={firstName} name='firstName' onChange={(e) => setFirstName(e.target.value)} />
                                    <label htmlFor="inputs" className='input-field-label lastName'><span><BsPerson className='iconForm' />Last name</span></label>
                                    <InputField id='inputs' type='text' className='input-field-input' value={lastName} name='LastName' onChange={(e) => setLastName(e.target.value)} />
                                </div>
                                <div className=' relative mb-5'>
                                    <label htmlFor="inputs" className='input-field-label email '><span><MdOutlineMail className='iconForm' />Email</span></label>
                                    <InputField type='email' className='input-field-input-full mb-5' value={email} name='email' onChange={(e) => setEmail(e.target.value)} />
                                    <label htmlFor="inputs" className='input-field-label number'><span><FiPhone className='iconForm' />Phone number</span></label>
                                    <InputField type='text' className='input-field-input-full ' value={phone} name='phone' onChange={(e) => setPhone(e.target.value)} />
                                </div>
                                <div className='relative flex justify-between mb-5'>
                                    <label htmlFor="inputs" className='input-field-label password'><span><CiLock className='iconForm' />Password</span></label>
                                    <InputField type='password' className='input-field-input-password ' value={password} name='password' onChange={(e) => setPassword(e.target.value)} />
                                    <label htmlFor="inputs" className='input-field-label confirmPassword '><span><CiLock className='iconForm' />Confirm Password</span></label>
                                    <InputField type='password' className='input-field-input-confirmPassword' value={passwordConfirm} name='confirmPassword' onChange={(e) => setPasswordConfirm(e.target.value)} />
                                </div>
                                <LinkButton to='/forgotPassword' className='forgetPasswordMobile' >Forgot your password ?</LinkButton>
                                <Button type='submit' className='btn mb-5' onClick={handleRegistration}disabled={isLoding}>{isLoding ? <Spiner /> : 'continue'}</Button>
                                <div className='links flex items-center justify-between text-xs'>
                                    <LinkButton to='/forgotPassword' className='forgetPassword' >Forgot your password ?</LinkButton>
                                    <LinkButton to='/login' >Allready  have an account ?</LinkButton>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <div className='textCopyRight'>
                <p className=' text-center text-xs pt-10 pb-1'>&copy; {new Date().getFullYear()} Hey Lead. All rights reserved.</p>
            </div>
        </>
    )
}

export default RegistrationPage