react sample

import React, { FC, useEffect, useState } from 'react';
import styled from 'styled-components';
import { AuthWrapper } from '../../../../components/wrapper';
import { LinkText } from '../../../../components/ui';
import * as Yup from 'yup';
import Validation from '../../../../services/validation';
import { Formik, Form, Field } from 'formik';
import FormikField from '../../../../components/ui/FormikField/FormikField';
import { Http } from '../../../../services/Http';
import Storage from '../../../../services/Storage';
import ROUTES from '../../../../routes/routes';
import { UserInterface } from '../../../../constants/interfaces/User';
import { MAX_SCENARIO_LOGO_SIZE } from '../../../../constants/enums/scenarios';
import { Button } from '../../../../components/ui/Button';
import { getRawNumber } from '../../../../helpers/functions/phone-number';
import { LocationState, useHistory } from '../../../../tools/router';
import { useLocation } from 'react-router';
import {
    useResetProfileService,
    useTestInvitationService,
} from '../../store/services';
import { useUploadPhotoService } from '../../../UserProfile/store/services';
import { useShowMessage } from '../../../../components/ui/ErrorMessages/ErrorMessages';
import { useSelector } from 'react-redux';
import { getProfileState } from '../../../UserProfile/store/reducers';
import WebPhotoUpload from '../components/WebUpload';
import { ROLE_NAMES } from '../../../../constants/enums';
import { Variables } from '../../../../theme/variables';
const qs = require('query-string');

const StyledRegisterContent = styled.div``;
const StyledUploadPhotoSection = styled.div`
    margin-bottom: 14px;
`;

export const StyledInputDivs = styled.div<{ marginBottom?: string }>`
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    > div,
    p {
        flex: 1;
        margin-left: 12px;
        margin-right: 12px;
        margin-bottom: ${props =>
            !!props.marginBottom ? props.marginBottom : '16px'};
        min-width: 288px;
    }
`;

const StyledField = styled(Field)`
    flex: 1;
    min-width: 100px;
`;

const StyledSpan = styled.span`
    margin-right: 11px;
`;

export const StyledActionsDivs = styled.div<{ break?: boolean }>`
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: ${props => (props.break ? '48px' : '65px')};
    padding: 0px 12px;
    flex-wrap: wrap-reverse;
    flex-direction: ${props => (props.break ? 'column-reverse' : 'row')};
`;

export const StyledActionsLinks = styled.div<{ break?: boolean }>`
    display: flex;
    flex-direction: column;
    justify-content: ${props => (props.break ? 'center' : 'flex-start')};
    margin-bottom: 24px;
`;

export const StyledCreateButton = styled.div<{ break?: boolean }>`
    display: flex;
    justify-content: ${props => (props.break ? 'center' : 'flex-end')};
    margin-bottom: 24px;
`;

export const StyledActionsText = styled.div`
    font-family: ${props => props.theme.Fonts.manrope};
    font-size: 15px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    margin-left: 11px;
    color: ${props => props.theme.Colors.white};
`;

export const StyledNotice = styled.p`
    font-family: ${props => props.theme.Fonts.manrope};
    font-size: 13px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.45;
    letter-spacing: normal;
    margin: 0 22px !important;
    color: ${props => props.theme.Colors.paleGrey};
`;

const RegisterSchema = Yup.object().shape({
    firstName: Validation.firstName,
    lastName: Validation.lastName,
    email: Validation.email,
    password: Validation.password,
    phoneNumber: Validation.phoneNumber.required('Mobile Number is required'),
    invitationCode: Validation.invitationCode.required(
        'Invitation Code is required'
    ),
});

const WebView: FC = () => {
    const profile: UserInterface | undefined = useSelector(getProfileState);

    const history = useHistory();
    const handleFileUpload = useUploadPhotoService();
    const handleTestInvitation = useTestInvitationService();
    const handleResetProfile = useResetProfileService();

    const location = useLocation<LocationState>();
    const showMessage = useShowMessage();
    const formRef: any = React.createRef();

    const [currentImage, setCurrentImage] = useState({
        url: '',
        files: '',
    });

    const [invite] = useState(
        qs.parse(location.search).code ? qs.parse(location.search).code : null
    );

    useEffect(() => {
        if (invite) {
            handleTestInvitation(invite);
        }
        return () => {
            handleResetProfile();
        };
    }, [invite, handleTestInvitation, handleResetProfile]);

    const loginAction = (): void => {
        history.push('/login');
    };

    const handleUpload = (e: any) => {
        e.persist();
        let files = e.target.files[0];
        if (!files) return;
        if (files.size >= MAX_SCENARIO_LOGO_SIZE) {
            showMessage('File size must be less than 10mb', 'error');
            return;
        } else if (!files.type.includes('image')) {
            showMessage('File must be an image', 'error');
            return;
        }
        setCurrentImage({
            url: files ? URL.createObjectURL(files) : '',
            files: files ? files : '',
        });
    };

    const checkIfEmailIsUnique = (email: string) => {
        /*const state =
            formRef && formRef.current && formRef.current.state
                ? formRef.current.state
                : null;

        console.log(state, 'state');
        state.errors.phoneNumber = 'bleee';*/

        return false;
    };

    return (
        <AuthWrapper width="760px" header="Create Your Dashboard Account">
            <StyledRegisterContent>
                <StyledUploadPhotoSection>
                    <WebPhotoUpload
                        handleChange={handleUpload}
                        currentImage={currentImage.url}
                    />
                </StyledUploadPhotoSection>
                <Formik
                    ref={formRef}
                    initialValues={{
                        firstName:
                            profile && profile.firstName
                                ? profile.firstName
                                : '',
                        lastName:
                            profile && profile.lastName ? profile.lastName : '',
                        password: '',
                        phoneNumber: undefined,
                        email: profile && profile.email ? profile.email : '',
                        invitationCode:
                            profile && profile.invitationCode
                                ? profile && profile.invitationCode
                                : '',
                    }}
                    enableReinitialize={true}
                    onSubmit={(values, { setFieldError }) => {
                        const registerValues = {
                            firstName: values.firstName,
                            lastName: values.lastName,
                            email:
                                profile && profile.email
                                    ? profile.email
                                    : values.email,
                            password: values.password,
                            phoneNumber:
                                values.phoneNumber &&
                                getRawNumber(values.phoneNumber),
                            invitationCode:
                                profile && profile.invitationCode
                                    ? profile.invitationCode
                                    : values.invitationCode,
                        };
                        const result = checkIfEmailIsUnique(
                            registerValues.email
                        );
                        setFieldError('phoneNumber', 'TODO: implement this');
                        if (!result) return;

                        Http.register(registerValues).then((response: any) => {
                            if (response.status === 'error') {
                                showMessage(response.message, 'error');
                            } else {
                                if (
                                    response.user.role.name ===
                                    ROLE_NAMES.TRAINEE
                                ) {
                                    history.push(
                                        `/trainee-splash/${response.user.firstName}`
                                    );
                                } else {
                                    Storage.set('token', response.token);
                                    if (currentImage.files !== '') {
                                        const formData = new FormData();
                                        formData.set(
                                            'picture',
                                            currentImage.files
                                        );
                                        handleFileUpload(formData);
                                    }
                                    history.push(ROUTES.PROGRESS);
                                }
                            }
                        });
                    }}
                    validationSchema={RegisterSchema}
                >
                    {({ values, handleChange }) => (
                        <Form>
                            <StyledInputDivs>
                                <StyledField
                                    type="text"
                                    disabled={
                                        !!profile && profile.invitationCode
                                    }
                                    component={FormikField}
                                    name="invitationCode"
                                    label="Invite Code"
                                    colorTheme="darkThree"
                                    fontSize="15px"
                                    labelFontSize="15px"
                                    height="64px"
                                    labelFontWeight={600}
                                    errorPadding="8px 5px 0 10px"
                                />

                                <StyledField
                                    type="email"
                                    disabled={!!profile && profile.email}
                                    component={FormikField}
                                    name="email"
                                    label="Email Address"
                                    colorTheme="darkThree"
                                    fontSize="15px"
                                    labelFontSize="15px"
                                    height="64px"
                                    labelFontWeight={600}
                                    errorPadding="8px 5px 0 10px"
                                />
                            </StyledInputDivs>
                            <StyledInputDivs>
                                <StyledField
                                    type="text"
                                    component={FormikField}
                                    name="firstName"
                                    label="First Name"
                                    colorTheme="darkThree"
                                    fontSize="15px"
                                    labelFontSize="15px"
                                    height="64px"
                                    labelFontWeight={600}
                                    errorPadding="8px 5px 0 10px"
                                />

                                <StyledField
                                    type="text"
                                    component={FormikField}
                                    name="lastName"
                                    label="Last Name"
                                    colorTheme="darkThree"
                                    fontSize="15px"
                                    labelFontSize="15px"
                                    height="64px"
                                    labelFontWeight={600}
                                    errorPadding="8px 5px 0 10px"
                                />
                            </StyledInputDivs>
                            <StyledInputDivs marginBottom="9px">
                                <StyledField
                                    type="phone"
                                    component={FormikField}
                                    name="phoneNumber"
                                    autoComplete="new-phone"
                                    label="Mobile Number"
                                    colorTheme="darkThree"
                                    value={values.phoneNumber}
                                    fontSize="15px"
                                    labelFontSize="15px"
                                    height="64px"
                                    labelFontWeight={600}
                                    errorPadding="8px 5px 0 10px"
                                />

                                <StyledField
                                    type="password"
                                    autoComplete="new-password"
                                    component={FormikField}
                                    name="password"
                                    label="Password"
                                    colorTheme="darkThree"
                                    fontSize="15px"
                                    labelFontSize="15px"
                                    height="64px"
                                    labelFontWeight={600}
                                    errorPadding="8px 5px 0 10px"
                                />
                            </StyledInputDivs>
                            <StyledInputDivs>
                                <StyledNotice>
                                    We will send an SMS to verify your mobile
                                    number. Carrier fees may apply.
                                </StyledNotice>

                                <StyledNotice>
                                    Password must be 8 characters long and
                                    include at least one special character and
                                    number.
                                </StyledNotice>
                            </StyledInputDivs>
                            <StyledActionsDivs>
                                <StyledActionsLinks>
                                    <StyledActionsText>
                                        <StyledSpan>
                                            Already have an account?
                                        </StyledSpan>
                                        <LinkText
                                            fontSize={15}
                                            color={Variables.Colors.softBlue}
                                            onClick={loginAction}
                                        >
                                            Log In
                                        </LinkText>
                                    </StyledActionsText>
                                </StyledActionsLinks>
                                <StyledCreateButton>
                                    <Button
                                        type="submit"
                                        width="232px"
                                        fontSize={15}
                                    >
                                        Create Account
                                    </Button>
                                </StyledCreateButton>
                            </StyledActionsDivs>
                        </Form>
                    )}
                </Formik>
            </StyledRegisterContent>
        </AuthWrapper>
    );
};

export default WebView;