evoleasing-account/components/questionnaire/forms/Form_9_Status/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 numeral from "numeral";
import pluralize from "pluralize-ru";
import { SpinnerCircular } from "spinners-react";
import { connect } from "react-redux";
import { withRouter } from 'next/router';
import moment from "moment";

import QuestionnaireForm from "../QuestionnaireForm";
import { reduxWrapper } from '../../../../store';
import DigitalSignaturesList from "../DigitalSignaturesList";
import { downloadQuestionnaire, uploadSignedFile } from "../../../../actions";
import FormMessage from "../FormMessage";

class Form_9_Status extends QuestionnaireForm 
{
	constructor(props) 
	{
		super(props);
		this.state = {
			sign: {}, 
			uploading: false, 
			file: null, 
			sent: null, 
			company: {}, 
			error_file_size: false, 
		};

		this.ref_file_input = React.createRef();
	}

	static getDerivedStateFromProps(nextProps, prevState) 
	{
		return {
			sign: nextProps.questionnaire.sign, 
			step: nextProps.questionnaire.step, 
			company: nextProps.company, 
		};
	}

	componentDidMount() 
	{		
	}

	_handle_onFileUpload = () => 
	{
		this.ref_file_input.current.click();
	}

	_handle_onFileChange = (event) => 
	{		
		const file = event.target.files[0];

		const error_file_size = file.size > ( 1024 * 1024 * process.env.NEXT_PUBLIC_UPLOAD_SCAN_FILESIZE_LIMIT_MB) ? true : false;
		this.setState({ file: file, error_file_size, filename: file.name });
	}

	_handle_onSend = () => 
	{
		const { file, company, uploading } = this.state;

		if(!uploading)
		{
			this.setState({ uploading: true }, () => 
			{
				uploadSignedFile(file, company.questionnaire_id)
				.then(() => 
				{
					this.setState({ uploading: false, sent: true }, () => 
					{
						this.props.onSuccess();
					});
				})
				.catch(() => 
				{
					this.setState({ uploading: false, sent: false });
				});
			});
		}
	}

	render() 
	{
		const { sign, file, uploading, sent, error_file_size, filename } = this.state;
		//console.log("Form_9_Status", "render", { sign });


		return (
			<React.Fragment>
				{ sign.digital && (
					<React.Fragment>
						<FormMessage 
							type="success" 
							title="Анкета заполнена и подписана" 
							message="Вы заполнили и подписали анкету лизингополучателя посредством ЭЦП. Анкета передана в обрабатывающий центр. Если у сотрудников возникнут вопросы мы свяжемся с Вами. Спасибо!"
						/>
						<div className="questionnaire status_action">
							<button className="button button-blue" style={{ width: "100%", minWidth: "255px" }} onClick={ () => this.props.router.push("/") }>Перейти на главную страницу </button>
						</div>
					</React.Fragment>
				) }
				{ !sign.digital && (
					<React.Fragment>
						<input type="file" id="file" multiple={ false } ref={ this.ref_file_input } style={{ display: "none" }} onChange={ this._handle_onFileChange }/>
						{ file === null ? (
							<React.Fragment>
								<FormMessage 
									type="moderate" 
									title="Анкета заполнена и ожидает вашего подписания" 
									message="Вы заполнили анкету лизингополучателя для подписания в режиме загрузки скана анкеты. Пожалуйста, загрузите скан подписанной анкеты."
								/>
								<div className="questionnaire status_action">
									<>
										<button className="button button-blue" style={{ width: "100%", minWidth: "255px" }} onClick={ this._handle_onFileUpload }>Загрузить подписанный документ</button>
									</>
								</div>
							</React.Fragment>
						) : (
							<React.Fragment>
								{ !sent ? (
									<React.Fragment>
										{ error_file_size ? (
											<FormMessage 
												type="error" 
												title="Ошибка" 
												message={`Файл «${ filename }» превышает допустимый лимит в ${ process.env.NEXT_PUBLIC_UPLOAD_SCAN_FILESIZE_LIMIT_MB }мб и не может быть загружен.`} 
												style={{ marginLeft: "0px" }} 
											/>
										) : (
											<FormMessage 
												type="moderate" 
												title="Анкета заполнена, подписана и ожидает отправки" 
												message="Вы заполнили и подписали анкету лизингополучателя в режиме загрузки скана анкеты. Пожалуйста, отправьте подписанный документ."
											/>
										) }
										<div className="questionnaire status_action" style={{ width: "100%" }}>
											<div className="dosc_list medium-icon">
												<div className="row">
													<p className="doc_name i-pdf extension">
														{ file.name }
														<span style={{width: "100%"}}>Подписанный скан анкеты</span>
													</p>
													{ error_file_size ? (
														<button className="button button-blue" style={{ width: "100%", minWidth: "255px" }} onClick={ this._handle_onFileUpload }>Загрузить другой документ</button>
													) : (
														<button className="button button-blue" style={{ width: "130px" }} onClick={ this._handle_onSend }>
															{ uploading ? (
																<SpinnerCircular size={ 24 } thickness={ 50 } speed={ 100 } color="rgba(28, 1, 169, 1)" secondaryColor="rgba(236, 239, 244, 1)" />
															) : "Отправить" }
														</button>
													) }
												</div>
											</div>
										</div>
									</React.Fragment>
								) : (
									<React.Fragment>
										<FormMessage 
											type="success" 
											title="Анкета заполнена и подписана" 
											message="Вы заполнили и подписали анкету лизингополучателя посредством загрузки скана анкеты. Анкета передана в обрабатывающий центр. Если у сотрудников возникнут вопросы мы свяжемся с Вами. Спасибо!"
										/>
										<div className="questionnaire status_action">
											<button className="button button-blue" style={{ width: "100%", minWidth: "255px" }} onClick={ () => this.props.router.push("/") }>Перейти на главную страницу </button>
										</div>
									</React.Fragment>
								) }
							</React.Fragment>
						)}
					</React.Fragment>
				) }
			</React.Fragment>
		);
	}
}

function mapStateToProps(state, ownProps)
{
	return {
		questionnaire: state.questionnaire, 
		company: state.company, 
	}
}

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

export default connect(mapStateToProps)(Form_9_Status);