267 lines
7.7 KiB
JavaScript
267 lines
7.7 KiB
JavaScript
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 InputMask from 'react-input-mask';
|
||
import CurrencyInput from 'react-currency-input';
|
||
|
||
import QuestionnaireForm from "../QuestionnaireForm";
|
||
import { reduxWrapper } from '../../../../store';
|
||
|
||
class Form_1_Main extends QuestionnaireForm
|
||
{
|
||
constructor(props)
|
||
{
|
||
super(props);
|
||
this.state = {
|
||
main: {
|
||
title: "",
|
||
inn: "",
|
||
kpp: "",
|
||
email: "",
|
||
telephone: "",
|
||
websiteurl: "",
|
||
financial_loan: "",
|
||
is_individual_executive: false,
|
||
individual_executive_inn: "",
|
||
individual_executive_kpp: "",
|
||
individual_executive_oop: "",
|
||
individual_executive_docnum: "",
|
||
individual_executive_docdate: "",
|
||
high_level: "",
|
||
board_of_directors: "",
|
||
collective_executive: "",
|
||
individual_executive: "",
|
||
other_control: "",
|
||
nko: false,
|
||
accept: false,
|
||
},
|
||
loading: false,
|
||
};
|
||
}
|
||
|
||
static getDerivedStateFromProps(nextProps, prevState)
|
||
{
|
||
return {
|
||
main: nextProps.questionnaire.main,
|
||
};
|
||
}
|
||
|
||
componentDidMount()
|
||
{
|
||
}
|
||
|
||
_checkDisabled = () =>
|
||
{
|
||
const { main } = this.state;
|
||
const check = ["title", "inn", "kpp", "email", "telephone", "financial_loan"];
|
||
|
||
for(let i in check)
|
||
{
|
||
if(main[check[i]] === "")
|
||
{
|
||
return true;
|
||
}
|
||
}
|
||
|
||
return false;
|
||
}
|
||
|
||
_handle_onFormSubmit = (event) =>
|
||
{
|
||
event.preventDefault();
|
||
console.log("Form_1_Main", "_handle_onFormSubmit");
|
||
|
||
this._handle_onCheckboxFieldChange("step", 2);
|
||
setTimeout(() =>
|
||
{
|
||
this.props.onNextStep("contacts");
|
||
}, 10);
|
||
}
|
||
|
||
_check_fields_disabled = (values) =>
|
||
{
|
||
for(let i in values)
|
||
{
|
||
if(values[i] === "")
|
||
{
|
||
return true;
|
||
}
|
||
}
|
||
|
||
return false;
|
||
}
|
||
|
||
render()
|
||
{
|
||
const { checking } = this.props;
|
||
const { loading, main } = this.state;
|
||
const firstLetter = /(?!.*[DFIOQU])[A-VXY]/i;
|
||
const letter = /(?!.*[DFIOQU])[A-Z]/i;
|
||
const digit = /[0-9]/;
|
||
const fin_mask = [firstLetter, digit, letter, " ", digit, letter, digit];
|
||
|
||
return (
|
||
<React.Fragment>
|
||
<form onSubmit={ this._handle_onFormSubmit } className={`questionnaire questionnaire_1 ${ checking && "disabled" }`}>
|
||
<p className="title">1. Информация о лизингополучателе</p>
|
||
|
||
<div className="form_field">
|
||
<label>Краткое наименование</label>
|
||
<input type="text"
|
||
id="main.title"
|
||
name="main.title"
|
||
value={ main.title }
|
||
placeholder="Введите наименование"
|
||
onChange={ (event) => this._handle_onTextFieldChange(event.target.name, event.target.value) }
|
||
required={ true }
|
||
disabled={ checking }
|
||
/>
|
||
</div>
|
||
|
||
<div className="formgroup">
|
||
<div className="form_field">
|
||
<label>ИНН</label>
|
||
<input type="text"
|
||
id="main.inn"
|
||
name="main.inn"
|
||
value={ main.inn }
|
||
placeholder="Введите ИНН"
|
||
onChange={ (event) => this._handle_onTextFieldChange(event.target.name, event.target.value) }
|
||
required={ true }
|
||
disabled={ checking }
|
||
/>
|
||
</div>
|
||
<div className="form_field">
|
||
<label>КПП</label>
|
||
<input type="text"
|
||
id="main.kpp"
|
||
name="main.kpp"
|
||
value={ main.kpp }
|
||
placeholder="Введите КПП"
|
||
onChange={ (event) => this._handle_onTextFieldChange(event.target.name, event.target.value) }
|
||
required={ true }
|
||
disabled={ checking }
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="formgroup">
|
||
<div className="form_field">
|
||
<label>Телефон</label>
|
||
<InputMask
|
||
mask='+7 (999) 999 99 99'
|
||
id="main.telephone"
|
||
name="main.telephone"
|
||
value={ main.telephone }
|
||
placeholder="Введите номер"
|
||
onChange={ (event) => this._handle_onTextFieldChange(event.target.name, event.target.value) }
|
||
required={ true }
|
||
disabled={ checking } >
|
||
</InputMask>
|
||
|
||
</div>
|
||
|
||
<div className="form_field">
|
||
<label>Сайт</label>
|
||
<input type="text"
|
||
id="main.websiteurl"
|
||
name="main.websiteurl"
|
||
value={ main.websiteurl }
|
||
placeholder="Введите адрес сайта, если есть"
|
||
onChange={ (event) => this._handle_onTextFieldChange(event.target.name, event.target.value) }
|
||
disabled={ checking }
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="form_field">
|
||
<label>E-mail</label>
|
||
<input type="email"
|
||
id="main.email"
|
||
name="main.email"
|
||
value={ main.email }
|
||
placeholder="Укажите адрес электронной почты"
|
||
onChange={ (event) => this._handle_onTextFieldChange(event.target.name, event.target.value) }
|
||
disabled={ checking }
|
||
/>
|
||
<p>может использоваться для отправки лизингодателем юридически значимых сообщений в соответсвии с условиями договора лизинга, а так же для операций в электронном ПТС/ПСМ</p>
|
||
</div>
|
||
|
||
<div className="form_field">
|
||
<label>Финансовая нагрузка</label>
|
||
<CurrencyInput
|
||
id="main.financial_loan"
|
||
name="main.financial_loan"
|
||
value={ main.financial_loan }
|
||
precision="2"
|
||
placeholder="Укажите сумму"
|
||
onChangeEvent={ (event) => this._handle_onTextFieldChange(event.target.name, event.target.value) }
|
||
disabled={ checking }
|
||
/>
|
||
<p>сумма текущих ежемесячных платежей по действующим кредитам/договорам лизинга</p>
|
||
</div>
|
||
|
||
<div className="form_field">
|
||
<label><b>Организация является НКО</b></label>
|
||
<div>
|
||
<div className="form_field checkbox">
|
||
<input type="radio"
|
||
checked={ !main.nko }
|
||
hidden=""
|
||
id="main.nko_0"
|
||
name="main.nko"
|
||
onChange={ (event) => this._handle_onCheckboxFieldChange(event.target.name, !main.nko ? true : false) }
|
||
disabled={ main.nko && checking }
|
||
/>
|
||
<label htmlFor="main.nko_0" className="unselectable">Нет</label>
|
||
</div>
|
||
<div className="form_field checkbox">
|
||
<input type="radio"
|
||
checked={ main.nko }
|
||
hidden=""
|
||
id="main.nko_1"
|
||
name="main.nko"
|
||
onChange={ (event) => this._handle_onCheckboxFieldChange(event.target.name, !main.nko ? true : false) }
|
||
disabled={ !main.nko && checking }
|
||
/>
|
||
<label htmlFor="main.nko_1" className="unselectable">Да</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{ !checking && (
|
||
<div className="action">
|
||
<button type="submit" className="button button-blue" disabled={ this._checkDisabled() }>
|
||
{ loading ? (
|
||
<SpinnerCircular size={24} thickness={100} speed={100} color="rgba(255, 255, 255, 1)" secondaryColor="rgba(255, 255, 255, 0.5)" style={{ marginTop: "4px" }}/>
|
||
) : "Продолжить" }
|
||
</button>
|
||
</div>
|
||
) }
|
||
</form>
|
||
</React.Fragment>
|
||
)
|
||
}
|
||
}
|
||
|
||
function mapStateToProps(state, ownProps)
|
||
{
|
||
return {
|
||
questionnaire: state.questionnaire,
|
||
}
|
||
}
|
||
|
||
export const getServerSideProps = reduxWrapper.getServerSideProps(store =>
|
||
async ({ req, res, query }) =>
|
||
{
|
||
}
|
||
);
|
||
|
||
export default connect(mapStateToProps)(Form_1_Main); |