evoleasing-account/pages/questionnaire/index.js

import React from "react";
import Head from 'next/head';
import Image from 'next/image';
import Link from "next/link";
import cookie from 'cookie';
import { connect } from "react-redux";
import numeral from "numeral";
import pluralize from 'pluralize-ru';
import { SpinnerCircular } from 'spinners-react';

import { withRouter } from 'next/router';
import { reduxWrapper } from '../../store';

import InnerMenu from "./components/InnerMenu";
import Header from '../components/Header';
import Footer from '../components/Footer';

import { sendPhoneChangeNumber, sendPhoneChangeNumberSmsCode, setUserPhone, getQuestionnaire } from '../../actions';
import AccountLayout from "../components/Layout/Account";
import Form_1_Main from "./components/forms/Form_1_Main";
import Form_2_Contacts from "./components/forms/Form_2_Contacts";
import Form_3_Signer from "./components/forms/Form_3_Signer";
import Form_4_Shareholders from "./components/forms/Form_4_Shareholders";
import Form_5_Regulatory from "./components/forms/Form_5_Regulatory";
import Form_6_NonProfit from "./components/forms/Form_6_NonProfit";
import Form_7_Check from "./components/forms/Form_7_Check";
import Form_8_Signing from "./components/forms/Form_8_Signing";

class QuestionnairePage extends React.Component 
{
	constructor(props)
	{
		super(props);
		this.state = {
			phone: "", 
			phone_check_loading: false, 
			phone_number_format_error: false, 
		};
	}

	componentDidMount()
	{
		getQuestionnaire({ dispatch: this.props.dispatch });
	}

	_handle_onPhoneSubmit = (event) => 
	{
		event.preventDefault();

		const { user, phone, phone_check_loading } = this.state;

		if(!phone_check_loading)
		{
			this.setState({ phone_check_loading: true }, () => 
			{
				sendPhoneChangeNumber({ email: user.email, phone })
				.then(() => 
				{
					this.setState({ phone_check_loading: false, phone_number_error: false, timer: 60, phone_form_step: 2, }, () => 
					{
						this.timer_ref = setInterval(() => 
						{
							const t = this.state.timer - 1;
							this.setState({ timer: t, }, () => 
							{
								if(t === 0)
								{
									clearInterval(this.timer_ref);
								}
							});
						}, 1000);
					});
				})
				.catch(() => 
				{
					this.setState({ phone_number_error: true, phone_check_loading: false });
				});
			});
		}
	}

	_handle_onCodeSubmit = (event) => 
	{
		event.preventDefault();

		const { phone, phone_code, code_check_loading } = this.state;

		if(!code_check_loading)
		{
			this.setState({ code_check_loading: true }, () => 
			{
				sendPhoneChangeNumberSmsCode({ phone, code: phone_code })
				.then(() => 
				{
					const new_user = { ...this.state.user };
					new_user.phone = phone;
			
					setUserPhone({ dispatch: this.props.dispatch, user: new_user });
			
					this.setState({ phone_sms_code_error: false, code_check_loading: false, phone_form_step: 3 });
				})
				.catch(() => 
				{
					this.setState({ phone_sms_code_error: true, code_check_loading: false });
				});	
			});
		}
	}

	_handle_onResendCode = (event) => 
	{
		this.setState({ phone_sms_code_error: false }, () => 
		{
			this._handle_onPhoneSubmit(event);
		});
	}

	_handle_onPhoneChange = (value) => 
	{
		const phone_number_format_error = value.length > 1 && (value[0] !== "+" || value[1] !== "7") ? true : false;
		this.setState({ phone: value, phone_login_disabled: this._check_fields_disabled([ value ]), phone_number_error: false, phone_number_format_error: phone_number_format_error });
	}

	_handle_onPhoneCodeChange = (value) => 
	{
		this.setState({ phone_code: value, phone_code_submit_disabled: this._check_fields_disabled([ value ]), phone_sms_code_error: false });
	}

	_check_fields_disabled = (values) => 
	{
		for(let i in values)
		{
			if(values[i] === "")
			{
				return true;
			}
		}

		return false;
	}

	_renderForm = () => 
	{
		const route = this.props.router.asPath;

		if (route.indexOf("#main") > -1) return (<Form_1_Main/>);
		if (route.indexOf("#contacts") > -1) return (<Form_2_Contacts/>);
		if (route.indexOf("#signer") > -1) return (<Form_3_Signer/>);
		if (route.indexOf("#shareholders") > -1) return (<Form_4_Shareholders/>);
		if (route.indexOf("#regulatory") > -1) return (<Form_5_Regulatory/>);
		if (route.indexOf("#non-profit") > -1) return (<Form_6_NonProfit/>);
		if (route.indexOf("#check") > -1) return (<Form_7_Check/>);
		if (route.indexOf("#signing") > -1) return (<Form_8_Signing/>);

		return (<Form_1_Main/>);
	}
	
	render()
	{
		const { phone, phone_check_loading, phone_number_format_error } = this.state;

		return (
			<React.Fragment>
				<Head>
					<title>ЛК Эволюция автолизинга - Анкета лизингополучателя</title>
					<meta
						name="description"
						content="ЛК Эволюция автолизинга - Анкета лизингополучателя"
					/>
				</Head>
				<Header { ...this.props }/>
				<AccountLayout>
					<div className="title_wrapper">
						<div className="left">
							<h1 className="section_title">Анкета лизингополучателя</h1>
						</div>
					</div>
					<div className="aside_container about">
						<InnerMenu { ...this.props }/>
						<article>
							{ this._renderForm() }
						</article>
					</div>
				</AccountLayout>
				<Footer/>
			</React.Fragment>
		)
	}
}

function mapStateToProps(state, ownProps)
{
	return {
		observer: state.auth.observer, 
		user: state.user, 
	}
}

export const getServerSideProps = reduxWrapper.getServerSideProps(store => 
	async ({ req, res, query }) => 
	{
		let props = {};

		if(req.headers.cookie !== undefined)
		{
			const cookies = cookie.parse(req.headers?.cookie ? req.headers?.cookie : "");

			if(cookies.jwt === undefined || cookies.jwt === null)
			{
				res.statusCode = 302;
				res.setHeader('Location', `/login`);
			}
			else
			{
				//const tokenValid = await checkToken(cookies.jwt);
				const tokenValid = true;
				if(!tokenValid)
				{
					res.statusCode = 302;
					res.setHeader('Location', `/login`);
				}
			}
		}
		else
		{
			res.statusCode = 302;
			res.setHeader('Location', `/login`);
		}
	
		return { props: props };
	}
);

export default withRouter(connect(mapStateToProps)(QuestionnairePage));