Untitled

import React, {useState} from 'react';
import './RegistrationForm.scss'
import {useFormik} from "formik";
import * as Yup from 'yup';
import {translate} from '../../Module/Translate/Translate'

const Helpers = require('../../View/RegistrationStepper/helpers/helpers');

export default function RegistrationForm({onSubmit}: any) {
    const [initialValues] = useState(Helpers.getFormData());

    const formik = useFormik({
        initialValues: {
            firstName: initialValues.firstName ?? '',
            lastName: initialValues.lastName ?? '',
            email: initialValues.email ?? '',
            password: initialValues.password ?? '',
            repassword: initialValues.repassword ?? '',
            isPrivacyConfirmed: initialValues.isPrivacyConfirmed ?? '',
            isRODOConfirmed: initialValues.isRODOConfirmed ?? ''
        },
        validationSchema: Yup.object({
            firstName: Yup.string()
                    .required(translate('errors.fieldRequired')),
            lastName: Yup.string()
                    .required(translate('errors.fieldRequired')),
            password: Yup.string()
                    .min(8, translate('errors.leastCharactersPassword'))
                    .matches(/(?=.*[A-Z])/, translate('errors.containCapitalLetter'))
                    .matches(/(?=.*[0-9])/, translate('errors.containNumber'))
                    .matches(/(?=.*[!@#\$%\^&\*])/, translate('errors.containSpecialCharacter'))
                    .required(translate('errors.fieldRequired')),
            repassword: Yup.string()
                    .test('', translate('errors.passwordNotMatch'), function (value) {
                        return this.parent.password === value
                    })
                    .required(translate('errors.fieldRequired')),
            email: Yup.string()
                    .email(translate('errors.incorrectEmail'))
                    .required(translate('errors.fieldRequired')),
            isPrivacyConfirmed: Yup.boolean()
                    .oneOf([true], translate('errors.acceptRules'))
                    .required(translate('errors.fieldRequired')),
            isRODOConfirmed: Yup.boolean()
                    .oneOf([true], translate('errors.acceptRules'))
                    .required(translate('errors.fieldRequired')),
        }),
        onSubmit: (values: any, actions) => {
            let result = Object.assign({}, initialValues, values);
            result.isCompanyAccount = userType !== 'individual';
            onSubmit(result, actions);
        }
    })

    const passwordError = function () {
        if (formik.touched.password && formik.errors.password) {
            return <div className='error-feedback'>{formik.errors.password}</div>;
        } else if (formik.touched.repassword && formik.errors.repassword) {
            return <div className='error-feedback'>{formik.errors.repassword}</div>;
        }

        return null;
    }();

    const [passwordType, setPasswordType] = useState('password');
    const showPassword = () => setPasswordType('text');
    const hidePassword = () => setPasswordType('password');

    const [repasswordType, setRepasswordType] = useState('password');
    const showRepassword = () => setRepasswordType('text');
    const hideRepassword = () => setRepasswordType('password');

    const [userType, setValue] = useState('individual');

    function changeValue(event: any) {
        setValue(event.target.value);
    }

    function allFieldsIsFull() {
        return Object.keys(formik.values).every((val) => !!formik.values[val])
    }

    return (
            <form className="registration-form" onSubmit={formik.handleSubmit}>
                <div className="user-type form-group">
                    <div className="user-type_individual form-check form-check-inline">
                        <input className="custom-checkbox form-check-input" type="radio" name="profile_type"
                               id="profile_type1"
                               value="individual"
                               checked={userType === 'individual'}
                               onChange={changeValue}/>

                        <label className={`form-check-label ${userType === 'individual' ? 'active' : ''}`}
                               htmlFor="profile_type1">
                            {translate('registrationForm.individual')}
                        </label>
                    </div>

                    <div className="user-type_company form-check form-check-inline">
                        <input className="custom-checkbox form-check-input" type="radio" name="profile_type"
                               id="profile_type2"
                               value="company"
                               checked={userType === 'company'}
                               onChange={changeValue}/>

                        <label className={`form-check-label ${userType === 'company' ? 'active' : ''}`}
                               htmlFor="profile_type2">
                            {translate('registrationForm.company')}
                        </label>
                    </div>
                </div>

                <div className="form-group">
                    <label htmlFor="first_name"
                           className="d-none d-sm-block font-weight-bold registration-form_label">
                    <span
                            className={`visible-for-individual ${formik.touched.firstName && formik.errors.firstName ? 'error-label' : ''}`}>
                        {userType === 'individual' ? translate('registrationForm.firstName') : translate('registrationForm.companyName')}
                    </span>
                    </label>
                    <input
                            type="text"
                            name="firstName"
                            className={`registration-form_input form-control ${formik.touched.firstName && formik.errors.firstName ? 'error-input' : ''}`}
                            id="firstName"
                            autoComplete="off"
                            placeholder={userType === 'individual' ? translate('registrationForm.firstName') : translate('registrationForm.companyName')}
                            onChange={formik.handleChange}
                            onBlur={formik.handleBlur}
                            value={formik.values.firstName}/>
                    {formik.touched.firstName && formik.errors.firstName ?
                            <div className='error-feedback'>{formik.errors.firstName}</div> : null}
                </div>

                <div className="form-group">
                    <label htmlFor="last_name"
                           className="d-none d-sm-block font-weight-bold registration-form_label">
                    <span
                            className={`visible-for-individual ${formik.touched.lastName && formik.errors.lastName ? 'error-label' : ''}`}>
                        {userType === 'individual' ? translate('registrationForm.lastName') : translate('registrationForm.companyExtendedName')}
                        {userType === 'company' ?
                                <span className="optional-field"> {translate('registrationForm.optional')}</span> : ''}
                    </span>
                    </label>
                    <input
                            type="text"
                            name="lastName"
                            className={`registration-form_input form-control ${formik.touched.lastName && formik.errors.lastName ? 'error-input' : ''}`}
                            id="lastName"
                            autoComplete="off"
                            placeholder={userType === 'individual' ? translate('registrationForm.lastName') : translate('registrationForm.companyExtendedName')}
                            onChange={formik.handleChange}
                            onBlur={formik.handleBlur}
                            value={formik.values.lastName}/>
                    {formik.touched.lastName && formik.errors.lastName ?
                            <div className='error-feedback'>{formik.errors.lastName}</div> : null}
                </div>

                <div className="form-group">
                    <label htmlFor="email"
                           className={`d-none d-sm-block font-weight-bold registration-form_label ${formik.touched.email && formik.errors.email ? 'error-label' : ''}`}>
                        {translate('registrationForm.email')}
                    </label>
                    <input type="email"
                           name="email"
                           className={`registration-form_input form-control ${formik.touched.email && formik.errors.email ? 'error-input' : ''}`}
                           placeholder={translate('registrationForm.email')}
                           id="email"
                           autoComplete="off"
                           onChange={formik.handleChange}
                           onBlur={formik.handleBlur}
                           value={formik.values.email}/>
                    {formik.touched.email && formik.errors.email ?
                            <div className='error-feedback'>{formik.errors.email}</div> : null}
                </div>

                <div className="form-group">
                    <label htmlFor="password"
                           className={`d-none d-sm-block font-weight-bold registration-form_label ${passwordError ? 'error-label' : ''}`}>
                        {translate('registrationForm.password')}
                    </label>
                    <div className='form-password'>
                        <input type={passwordType}
                               name="password"
                               className={`form-password_input registration-form_input form-control ${passwordError ? 'error-input' : ''}`}
                               placeholder={translate('registrationForm.password')}
                               id="password"
                               autoComplete="off"
                               required
                               onChange={formik.handleChange}
                               onBlur={formik.handleBlur}
                               value={formik.values.password}/>
                        <div className='form-password_button'
                             onMouseDown={showPassword}
                             onMouseUp={hidePassword}
                             onMouseLeave={hidePassword}>
                            {translate('registrationForm.show')}
                        </div>
                    </div>
                    {passwordError ? passwordError :
                            (formik.touched.password ? null :
                                    <div className='notifications-feedback'>{translate('errors.needCharacters')}</div>)}
                </div>

                <div className="form-group">
                    <label htmlFor="password_confirmation"
                           className={`d-none d-sm-block font-weight-bold registration-form_label ${passwordError ? 'error-label' : ''}`}>
                        {translate('registrationForm.conformPassword')}
                    </label>
                    <div className='form-password'>
                        <input type={repasswordType}
                               name="repassword"
                               className={`form-password_input registration-form_input form-control ${passwordError ? 'error-input' : ''}`}
                               placeholder={translate('registrationForm.password')}
                               id="repassword"
                               autoComplete="off"
                               onChange={formik.handleChange}
                               onBlur={formik.handleBlur}
                               value={formik.values.repassword}/>
                        <div className='form-password_button'
                             onMouseDown={showRepassword}
                             onMouseUp={hideRepassword}
                             onMouseLeave={hideRepassword}>
                            {translate('registrationForm.show')}
                        </div>
                    </div>
                </div>
                <div className="registration-form-license form-group">
                    <div className="col-12 register-reminder-text px-0">
                        <ul className="list-unstyled pt-3">
                            <li className="form-check d-flex flex-column">
                                <input className="custom-checkbox form-check-input"
                                       type="checkbox"
                                       id="privacyPolicy"
                                       name="isPrivacyConfirmed"
                                       onChange={formik.handleChange}
                                       onBlur={formik.handleBlur}
                                       value={formik.values.isPrivacyConfirmed}
                                       checked={formik.values.isPrivacyConfirmed}/>
                                <label htmlFor="privacyPolicy">
                                    <div className="d-flex flex-column">
                                        <a target="_blank" className="registration-form_label fs18"
                                           href="../../zgoda/polityka-prywatnosci">
                                            {translate('registrationForm.privacyPolicy')}
                                        </a>
                                    </div>
                                </label>
                            </li>
                            {formik.touched.isPrivacyConfirmed && formik.errors.isPrivacyConfirmed ?
                                    <div className='error-feedback pb-2'>{formik.errors.isPrivacyConfirmed}</div> : null}
                            <li className="form-check d-flex flex-column pt-2">
                                <input className="custom-checkbox form-check-input"
                                       type="checkbox"
                                       id="summaryRodo"
                                       name="isRODOConfirmed"
                                       onChange={formik.handleChange}
                                       onBlur={formik.handleBlur}
                                       value={formik.values.isRODOConfirmed}
                                       checked={formik.values.isRODOConfirmed}/>
                                <label htmlFor="summaryRodo">
                                    <div className="d-flex flex-column">
                                        <a target="_blank" className="registration-form_label fs18"
                                           href="../../zgoda/rodo">
                                            {translate('registrationForm.rodo')}
                                        </a>
                                    </div>
                                </label>
                            </li>
                            {formik.touched.isRODOConfirmed && formik.errors.isRODOConfirmed ?
                                    <div className='error-feedback pb-2'>{formik.errors.isRODOConfirmed}</div> : null}
                        </ul>
                    </div>
                </div>

                <div className="form-group">
                    <div className="col-12 px-0">
                        <button type="submit"
                                className={`registration-form_button  w-100 py-3 fs18 fw700 ${formik.isValid && allFieldsIsFull() ? '' : 'inactive'}`}>
                            {translate('registrationUser.registrationPanel.register')}
                        </button>
                    </div>
                </div>

            </form>
    )
}