1381 lines
58 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

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 Select from 'react-select';
import { connect } from "react-redux";
import { withRouter } from 'next/router';
import debounce from 'debounce-promise';
import { get as _get } from 'lodash';
import QuestionnaireForm from "../QuestionnaireForm";
import CalendarDatePicker from '../../../CalendarDatePicker';
import FilesList from "../FilesList";
import Modal from "../../../../pages/components/Modal/modal";
import countries from "../../../../lib/countries.json";
import citizenships from "../../../../lib/citizenships.json";
import doctypes_personal from "../../../../lib/doctypes_personal.json";
import doctypes_corporate from "../../../../lib/doctypes_corporate.json";
import { reduxWrapper } from '../../../../store';
import moment from "moment";
import AddressSuggests from "../../AddressSuggests";
import InputMask from 'react-input-mask';
import SuggestsInput from "../../SuggestsInput";
import { getCitizenshipTitleByCode } from "../../../../utils/citizenship";
import { removeAttachmentFiles, saveQuestionnaire, getSuggests } from "../../../../actions";
import DocumentIssuerSuggestsInput from "../../DocumentIssuerSuggestsInput";
import FormMessage from "../FormMessage";
const is_valid_inn = (i) =>
{
if ( i.match(/\D/) ) return false;
var inn = i.match(/(\d)/g);
if ( inn.length == 10 )
{
return inn[9] == String(((
2*inn[0] + 4*inn[1] + 10*inn[2] +
3*inn[3] + 5*inn[4] + 9*inn[5] +
4*inn[6] + 6*inn[7] + 8*inn[8]
) % 11) % 10);
}
else if ( inn.length == 12 )
{
return inn[10] == String(((
7*inn[0] + 2*inn[1] + 4*inn[2] +
10*inn[3] + 3*inn[4] + 5*inn[5] +
9*inn[6] + 4*inn[7] + 6*inn[8] +
8*inn[9]
) % 11) % 10) && inn[11] == String(((
3*inn[0] + 7*inn[1] + 2*inn[2] +
4*inn[3] + 10*inn[4] + 3*inn[5] +
5*inn[6] + 9*inn[7] + 4*inn[8] +
6*inn[9] + 8*inn[10]
) % 11) % 10);
}
return false;
}
const suggestsInnDebounce = (query) =>
{
return getSuggests("inn", { query });
}
const suggestsInn = debounce(suggestsInnDebounce, 200);
class Form_3_Signer extends QuestionnaireForm
{
constructor(props)
{
super(props);
this.state = {
main: {
title: null,
inn: null,
kpp: null,
email: null,
telephone: null,
websiteurl: null,
financial_loan: null,
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: "",
},
head_person: {
lastname: "",
firstname: "",
middlename: "",
no_middle_name: false,
jobtitle: "Генеральный директор",
telephone: "",
email: "",
identity_document: {
doctype: "",
seria: "",
docnumber: "",
issuedate: "",
code: "",
issueby: "",
issueby_search_dadata: "",
placebirth: "",
citizenship: {
title: "",
code: "",
},
registration_address: {
name: "",
fias_id: "",
}
},
evo_assignment_date: "",
evo_credentials_dateend: "",
evo_indefinite: false,
},
signatory_person: {
not_head_person: false,
lastname: "",
firstname: "",
middlename: "",
no_middle_name: false,
jobtitle: "",
signer_rule_basic: "",
signer_rule_basic_add: "",
docdate: "",
docnumber: "",
delegation_agreement: false,
telephone: "",
email: "",
identity_document: {
doctype: "",
seria: "",
docnumber: "",
issuedate: "",
code: "",
issueby: "",
issueby_search_dadata: "",
placebirth: "",
citizenship: {
title: "",
code: "",
},
registration_address: {
name: "",
fias_id: "",
}
}
},
delegation_files: [],
head_person_files: [],
signatory_person_files: [],
signatory_corporate_files: [],
loading: false,
modal_show_personal_data: false,
status: "empty",
errors: [],
};
this.ref_form = React.createRef();
this.ref_submit = React.createRef();
}
static getDerivedStateFromProps(nextProps, prevState)
{
return {
main: nextProps.questionnaire.main,
head_person: nextProps.questionnaire.head_person,
head_person_files: nextProps.questionnaire.head_person_files,
delegation_files: nextProps.questionnaire.delegation_files,
signatory_person: nextProps.questionnaire.signatory_person,
signatory_person_files: nextProps.questionnaire.signatory_person_files,
signatory_corporate_files: nextProps.questionnaire.signatory_corporate_files,
status: nextProps.questionnaire.status,
};
}
componentDidMount()
{
const { main } = this.state;
if( main.inn !== null && main.inn.length === 12)
{
this._handle_onCheckboxFieldChange("head_person.evo_indefinite", true);
}
}
_handle_onCitizenshipChange = (name, value) =>
{
let citizenship = getCitizenshipTitleByCode(value);
this._handle_onFieldChange(name, {
title: citizenship,
code: value,
});
}
_handle_onIssuerCodeChange = (branch, option) =>
{
this._removeError(`${ branch }.identity_document.code`);
if(typeof option === "string")
{
this._handle_onTextFieldChange(`${ branch }.identity_document.code`, option);
}
else
{
this._handle_onBranchChange([
{ name: `${ branch }.identity_document.code`, value: option.data.code },
{ name: `${ branch }.identity_document.issueby`, value: option.value },
]);
this._removeError(`${ branch }.identity_document.issueby`);
}
}
_handle_onIssuerChange = (branch, option) =>
{
this._removeError(`${ branch }.identity_document.issueby`);
if(typeof option === "string")
{
this._handle_onTextFieldChange(`${ branch }.identity_document.issueby`, option);
}
else
{
this._handle_onBranchChange([
{ name: `${ branch }.identity_document.code`, value: option.data.code },
{ name: `${ branch }.identity_document.issueby`, value: option.value },
]);
this._removeError(`${ branch }.identity_document.code`);
}
}
_handle_onIndefiniteChange = () =>
{
const { head_person } = this.state;
const indefinite = !head_person.evo_indefinite ? true : false;
this._handle_onCheckboxFieldChange("head_person.evo_indefinite", indefinite);
if(!indefinite)
{
setTimeout(() =>
{
this._handle_onCheckboxFieldChange("head_person.evo_credentials_dateend", "");
}, 10);
}
}
_handle_onChangeDelegationAgreement = () =>
{
const { signatory_person, delegation_files } = this.state;
if(!signatory_person.delegation_agreement)
{
this._handle_onCheckboxFieldChange("signatory_person.delegation_agreement", true);
}
else
{
removeAttachmentFiles(delegation_files);
this._handle_onBranchChange([
{ name: "signatory_person.delegation_agreement", value: false, },
{ name: "main.individual_executive_inn", value: "", },
{ name: "main.individual_executive_kpp", value: "", },
{ name: "main.individual_executive_oop", value: "", },
{ name: "main.individual_executive_docnum", value: "", },
{ name: "main.individual_executive_docdate", value: "", },
{ name: "delegation_files", value: [], },
]);
}
}
_handle_onInnChange = (inn) =>
{
this._handle_onTextFieldChange("main.individual_executive_inn", inn);
suggestsInn(inn.replace(/[^\d]+/g, ''))
.then((result) =>
{
if(result?.suggestions.length > 0)
{
if(inn.replace(/[^\d]+/g, '').length > 10)
{
this._handle_onTextFieldChange("main.individual_executive_oop", result?.suggestions[0]?.data?.name?.full_with_opf);
}
else
{
this._handle_onBranchChange([ {
name: "main.individual_executive_oop",
value: result?.suggestions[0]?.data?.name?.full_with_opf,
}, {
name: "main.individual_executive_kpp",
value: result?.suggestions[0]?.data?.kpp,
}]);
}
}
})
.catch(() =>
{
});
}
_handle_onDocumentTypeChange = (branch, element) =>
{
this._handle_onBranchChange([
{ name: `${ branch }.identity_document.doctype`, value: element.value },
{ name: `${ branch }.identity_document.citizenship_code`, value: parseInt(element.value, 10) === 100000000 ? 643 : null },
]);
}
_handle_onNextPage = (event) =>
{
event.preventDefault();
const errors = [];
const { main, head_person, signatory_person,
delegation_files, head_person_files, signatory_person_files, signatory_corporate_files,
} = this.state;
const head_person_check = [
"lastname",
"firstname",
"jobtitle",
"email",
"identity_document.seria",
"identity_document.docnumber",
"identity_document.issuedate",
"identity_document.placebirth",
"identity_document.citizenship_code",
"identity_document.registration_address.name",
"evo_assignment_date",
];
if(parseInt(_get(head_person, "identity_document.doctype"), 10) === 100000000)
{
head_person_check.push("identity_document.code");
head_person_check.push("identity_document.issueby");
}
for(let i in head_person_check)
{
const v = _get(head_person, head_person_check[i]);
if(v === "" || v === null)
{
errors.push(`head_person.${ head_person_check[i] }`);
}
}
if(head_person.evo_assignment_date !== undefined && head_person.evo_assignment_date !== null && head_person.evo_assignment_date !== "")
{
try
{
const date = moment(head_person.evo_assignment_date);
const today = moment();
if(date > today)
{
errors.push(`head_person.evo_assignment_date`);
errors.push(`head_person.evo_assignment_date_invalid`);
}
}
catch(e)
{
errors.push(`head_person.evo_assignment_date`);
errors.push(`head_person.evo_assignment_date_invalid`);
}
}
if(!head_person.evo_indefinite)
{
if(head_person.evo_credentials_dateend === "")
{
errors.push(`head_person.evo_credentials_dateend`);
}
if(head_person.evo_credentials_dateend !== undefined && head_person.evo_credentials_dateend !== null && head_person.evo_credentials_dateend !== "")
{
try
{
const date = moment(head_person.evo_credentials_dateend);
const today = moment();
if(date < today)
{
errors.push(`head_person.evo_credentials_dateend`);
errors.push(`head_person.evo_credentials_dateend_invalid`);
}
}
catch(e)
{
errors.push(`head_person.evo_credentials_dateend`);
errors.push(`head_person.evo_credentials_dateend_invalid`);
}
}
}
if(head_person.telephone === "" || head_person.telephone === null || isNaN(parseInt(head_person.telephone.replace(/[^\d]+/g, ''), 10)) || parseInt(head_person.telephone.replace(/[^\d]+/g, ''), 10).toString().length < 11)
{
errors.push(`head_person.telephone`);
}
const email_regex = new RegExp(/[^@\s]+@[^@\s]+\.[^@\s]+/);
if(!email_regex.test(head_person.email))
{
errors.push(`head_person.email`);
}
//переданы
if(signatory_person.delegation_agreement)
{
const main_check = [
"individual_executive_inn",
"individual_executive_kpp",
"individual_executive_oop",
"individual_executive_docnum",
"individual_executive_docdate",
];
for(let i in main_check)
{
let v = _get(main, main_check[i]);
if(main_check[i] === "individual_executive_inn")
{
if(!is_valid_inn(v.replace(/[^\d]+/g, '')))
{
errors.push(`main.individual_executive_inn`);
}
}
else
{
if(v === "" || v === null)
{
errors.push(`main.${ main_check[i] }`);
}
}
}
if(delegation_files.length === 0) { errors.push(`delegation_files`); }
}
//иной подписант
if(signatory_person.not_head_person)
{
const signatory_person_check = [
"lastname",
"firstname",
"jobtitle",
"signer_rule_basic",
"email",
"identity_document.seria",
"identity_document.docnumber",
"identity_document.issuedate",
"identity_document.placebirth",
"identity_document.citizenship.code",
"identity_document.registration_address.name",
];
if(parseInt(_get(signatory_person, "identity_document.doctype"), 10) === 100000000)
{
signatory_person_check.push("identity_document.code");
signatory_person_check.push("identity_document.issueby");
}
if(parseInt(signatory_person.signer_rule_basic, 10) === 100000003)
{
signatory_person_check.push("signer_rule_basic_add");
}
if(signatory_person.telephone === "" || signatory_person.telephone === null || isNaN(parseInt(signatory_person.telephone.replace(/[^\d]+/g, ''), 10)) || parseInt(signatory_person.telephone.replace(/[^\d]+/g, ''), 10).toString().length < 11)
{
errors.push(`signatory_person.telephone`);
}
const email_regex = new RegExp(/[^@\s]+@[^@\s]+\.[^@\s]+/);
if(!email_regex.test(signatory_person.email))
{
errors.push(`signatory_person.email`);
}
if(signatory_person_files.length === 0) { errors.push(`signatory_person_files`); }
if(parseInt(signatory_person.signer_rule_basic, 10) === 100000000 || parseInt(signatory_person.signer_rule_basic, 10) === 100000003)
{
signatory_person_check.push("docdate");
signatory_person_check.push("docnumber");
if(signatory_corporate_files.length === 0) { errors.push(`signatory_corporate_files`); }
}
for(let i in signatory_person_check)
{
let v = _get(signatory_person, signatory_person_check[i]);
if(v === "" || v === null)
{
errors.push(`signatory_person.${ signatory_person_check[i] }`);
}
}
}
if(head_person_files.length === 0) { errors.push(`head_person_files`); }
this.setState({ errors }, () =>
{
console.log("_handle_onNextPage", { errors });
window.scroll(0, 0);
if(errors.length === 0)
{
this.ref_submit.current.click();
}
});
}
_handle_onFormSubmit = (event) =>
{
event.preventDefault();
this._handle_onCheckboxFieldChange("step", 4);
setTimeout(() =>
{
saveQuestionnaire();
this.props.onNextStep("shareholders");
}, 10);
}
render()
{
const { checking } = this.props;
const { loading, main, head_person, signatory_person, status, errors,
head_person_files,
signatory_person_files,
signatory_corporate_files,
delegation_files,
} = this.state;
console.log({ errors });
let head_person_citizenship = { label: getCitizenshipTitleByCode(head_person.identity_document.citizenship.code), code: head_person.identity_document.citizenship.code };
let signatory_person_citizenship = { label: getCitizenshipTitleByCode(signatory_person.identity_document.citizenship.code), code: signatory_person.identity_document.citizenship.code };
return (
<React.Fragment>
<form ref={ this.ref_form } onSubmit={ this._handle_onFormSubmit } onKeyDown={(e) => {if (e.key === 'Enter') e.preventDefault() }} className={`questionnaire questionnaire_3 ${ checking && "disabled" }`}>
<p className="title">3. Информация о единоличном исполнительном органе, подписанте договора лизинга</p>
{ errors.length > 0 &&
(
<FormMessage type="error" title="Ошибка" message="Пожалуйста, проверьте корректность заполнения данных в форме."/>
) }
<div className="form_field">
<label>Фамилия <sup className="required_label">*</sup></label>
<SuggestsInput
className={ errors.indexOf("head_person.lastname") > -1 ? "error" : "" }
type="lastname"
id="head_person.lastname"
name="head_person.lastname"
value={ this._checkStrValue(head_person.lastname) }
placeholder="Введите фамилию"
onChange={ (value) => { this._removeError("head_person.lastname"); this._handle_onTextFieldChange("head_person.lastname", value); } }
required={ true }
disabled={ checking }
/>
</div>
<div className="form_field">
<label>Имя <sup className="required_label">*</sup></label>
<SuggestsInput
className={ errors.indexOf("head_person.firstname") > -1 ? "error" : "" }
type="firstname"
id="head_person.firstname"
name="head_person.firstname"
value={ this._checkStrValue(head_person.firstname) }
placeholder="Введите имя"
onChange={ (value) => { this._removeError("head_person.firstname"); this._handle_onTextFieldChange("head_person.firstname", value) } }
required={ true }
disabled={ checking }
/>
</div>
<div className="form_field">
<label>Отчество <small>если имеется</small></label>
<SuggestsInput
type="middlename"
id="head_person.middlename"
name="head_person.middlename"
value={ this._checkStrValue(head_person.middlename) }
placeholder="Введите отчество"
onChange={ (value) => { this._removeError("head_person.middlename"); this._handle_onTextFieldChange("head_person.middlename", value) } }
required={ false }
disabled={ checking }
/>
</div>
<div className="form_field">
<label>Тип документа <sup className="required_label">*</sup></label>
<Select
id="head_person.identity_document.doctype"
name="head_person.identity_document.doctype"
options={ doctypes_personal }
placeholder="Выберите тип документа"
noOptionsMessage={ ({ inputValue }) => !inputValue ? noOptionsText :"Ничего не найдено" }
isSearchable={ false }
className="autocomlete"
classNamePrefix="react-select"
value={ doctypes_personal.filter((type) => head_person.identity_document.doctype === type.value) }
onChange={ (element) => this._handle_onDocumentTypeChange("head_person", element) }
required={ true }
isDisabled={ checking }
/>
</div>
<div className="formgroup">
<div className="form_field">
<label>Серия паспорта <sup className="required_label">*</sup></label>
<InputMask
className={ errors.indexOf("head_person.identity_document.seria") > -1 ? "error" : "" }
mask='9999'
id="head_person.identity_document.seria"
name="head_person.identity_document.seria"
value={ this._checkStrValue(head_person.identity_document.seria) }
placeholder="Введите серию"
onChange={ (event) => { this._removeError("head_person.identity_document.seria"); this._handle_onTextFieldChange(event.target.name, event.target.value) } }
required={ true }
disabled={ checking }
/>
</div>
<div className="form_field">
<label>Номер паспорта <sup className="required_label">*</sup></label>
<InputMask
className={ errors.indexOf("head_person.identity_document.docnumber") > -1 ? "error" : "" }
mask='999999'
id="head_person.identity_document.docnumber"
name="head_person.identity_document.docnumber"
value={ this._checkStrValue(head_person.identity_document.docnumber) }
placeholder="Введите номер"
onChange={ (event) => { this._removeError("head_person.identity_document.docnumber"); this._handle_onTextFieldChange(event.target.name, event.target.value) } }
required={ true }
disabled={ checking }>
</InputMask>
</div>
</div>
<div className="formgroup">
<div className="form_field">
<label>Дата выдачи <sup className="required_label">*</sup></label>
<CalendarDatePicker
className={ errors.indexOf("head_person.identity_document.issuedate") > -1 ? "error" : "" }
placeholder="ДД.ММ.ГГГГ"
max={ moment().toDate() }
id={ "head_person.identity_document.issuedate" }
value={ this._checkStrValue(head_person.identity_document.issuedate) !== "" ? this._checkStrValue(head_person.identity_document.issuedate) : null }
onChange={ (date) => { this._removeError("head_person.identity_document.issuedate"); this._handle_onTextFieldChange("head_person.identity_document.issuedate", date); } }
required={ true }
disabled={ checking }
/>
</div>
{ parseInt(head_person.identity_document.doctype, 10) === 100000000 && (
<div className="form_field">
<label>Код подразделения <sup className="required_label">*</sup></label>
<DocumentIssuerSuggestsInput
className={ errors.indexOf("head_person.identity_document.code") > -1 ? "error" : "" }
type="issuer"
id="head_person.identity_document.code"
name="head_person.identity_document.code"
value={ this._checkStrValue(head_person.identity_document.code) }
placeholder="Введите код"
onChange={ (value) => { this._removeError("head_person.identity_document.code"); this._handle_onIssuerCodeChange("head_person", value); } }
maxResults={ 5 }
required={ true }
disabled={ checking }
/>
</div>
) }
</div>
{ parseInt(head_person.identity_document.doctype, 10) === 100000000 && (
<div className="form_field">
<label>Кем выдан <sup className="required_label">*</sup></label>
<DocumentIssuerSuggestsInput
className={ errors.indexOf("head_person.identity_document.issueby") > -1 ? "error" : "" }
type="issuer"
id="head_person.identity_document.issueby"
name="head_person.identity_document.issueby"
value={ this._checkStrValue(head_person.identity_document.issueby) }
placeholder="Введите наименование подразделения выдавшего документ"
onChange={ (value) => { this._removeError("head_person.identity_document.issueby"); this._handle_onIssuerChange("head_person", value); } }
required={ true }
disabled={ checking }
/>
</div>
) }
<div className="form_field">
<label>Место рождения <sup className="required_label">*</sup></label>
<AddressSuggests
className={ errors.indexOf("head_person.identity_document.placebirth") > -1 ? "error" : "" }
id={ "head_person.identity_document.placebirth" }
value={ this._checkStrValue(head_person.identity_document.placebirth) }
placeholder="Укажите место рождения"
onChange={ (data) => { this._removeError("head_person.identity_document.placebirth"); this._handle_onTextFieldChange("head_person.identity_document.placebirth", data.name) } }
required={ true }
disabled={ checking }
/>
</div>
{ parseInt(head_person.identity_document.doctype, 10) !== 100000000 && (
<div className="form_field">
<label>Гражданство <sup className="required_label">*</sup></label>
<Select
id="head_person.identity_document.citizenship"
name="head_person.identity_document.citizenship"
options={ citizenships }
placeholder="Выберите страну"
noOptionsMessage={ ({ inputValue }) => !inputValue ? noOptionsText :"Ничего не найдено" }
isSearchable={ true }
className="autocomlete"
classNamePrefix="react-select"
value={ head_person_citizenship.code !== null ? head_person_citizenship : undefined }
onChange={ (element) => { this._removeError("head_person.identity_document.citizenship"); this._handle_onCitizenshipChange(`head_person.identity_document.citizenship`, element.value) } }
required={ true }
isDisabled={ checking }
/>
</div>
) }
<div className="form_field">
<label>Адрес регистрации <sup className="required_label">*</sup></label>
<AddressSuggests
className={ errors.indexOf("head_person.identity_document.registration_address.name") > -1 ? "error" : "" }
value={ this._checkStrValue(head_person.identity_document.registration_address.name) }
fias={ this._checkStrValue(head_person.identity_document.registration_address.fias_id) }
placeholder="Укажите адрес регистрации"
onChange={ (data) => { this._removeError("head_person.identity_document.registration_address.name"); this._handle_onTextFieldChange("head_person.identity_document.registration_address", data) } }
required={ true }
disabled={ checking }
/>
</div>
<div className="form_field">
<label>Должность <sup className="required_label">*</sup></label>
<input type="text"
className={ errors.indexOf("head_person.jobtitle") > -1 ? "error" : "" }
id="head_person.jobtitle"
name="head_person.jobtitle"
value={ this._checkStrValue(head_person.jobtitle) }
placeholder="Укажите должность"
onChange={ (event) => { this._removeError(event.target.name); this._handle_onTextFieldChange(event.target.name, event.target.value); } }
required={ true }
disabled={ checking }
/>
</div>
<div className="form_field">
<label>Телефон <sup className="required_label">*</sup></label>
<InputMask
className={ errors.indexOf("head_person.telephone") > -1 ? "error" : "" }
mask='+7 (999) 999 99 99'
id={ "head_person.telephone" }
name={ "head_person.telephone" }
value={ this._checkStrValue(head_person.telephone) }
placeholder="Введите номер телефона"
onChange={ (event) => { if(event.target.value !== "" && !isNaN(parseInt(event.target.value.replace(/[^\d]+/g, ''), 10)) && parseInt(event.target.value.replace(/[^\d]+/g, ''), 10) > 7) { this._removeError("head_person.telephone"); } this._handle_onTextFieldChange(event.target.name, event.target.value); } }
required={ true }
disabled={ checking }
/>
</div>
<div className="form_field">
<label>Адрес E-mail <sup className="required_label">*</sup></label>
<input type="email"
className={ errors.indexOf("head_person.email") > -1 ? "error" : "" }
id={ "head_person.email" }
name={ "head_person.email" }
value={ this._checkStrValue(head_person.email) }
placeholder="Введите E-mail"
onChange={ (event) => { this._removeError(event.target.name); this._handle_onTextFieldChange(event.target.name, event.target.value); } }
pattern="[^@\s]+@[^@\s]+\.[^@\s]+"
required={ true }
disabled={ checking }
/>
</div>
{ errors.indexOf("head_person.evo_assignment_date_invalid") > -1 &&
(
<FormMessage type="error" title="Ошибка" message="Пожалуйста, укажите прошедшую дату."/>
) }
<div className="form_field picker">
<label>Дата назначения <sup className="required_label">*</sup></label>
<div style={{ display: "flex", flexWrap: "wrap", width: "calc(100% - 198px)"}}>
<CalendarDatePicker
className={ errors.indexOf("head_person.evo_assignment_date") > -1 ? "error" : "" }
placeholder="ДД.ММ.ГГГГ"
max={ moment().toDate() }
id={ "head_person.evo_assignment_date" }
value={ this._checkStrValue(head_person.evo_assignment_date) !== "" ? this._checkStrValue(head_person.evo_assignment_date) : null }
onChange={ (date) => { this._removeError([ "head_person.evo_assignment_date", "head_person.evo_assignment_date_invalid" ]); this._handle_onTextFieldChange("head_person.evo_assignment_date", date) } }
required={ true }
disabled={ checking }
style={{maxWidth: "320px"}}
/>
<div className="form_field checkbox" style={{width: "auto", marginLeft: "28px"}}>
<input type="checkbox"
hidden=""
id="head_person.evo_indefinite"
name="head_person.evo_indefinite"
checked={ head_person.evo_indefinite }
onChange={ (event) => this._handle_onIndefiniteChange() }
disabled={ checking }
/>
<label htmlFor="head_person.evo_indefinite" className="unselectable">Полномочия бессрочны</label>
</div>
</div>
</div>
{ !head_person.evo_indefinite && (
<React.Fragment>
{ errors.indexOf("head_person.evo_credentials_dateend_invalid") > -1 &&
(
<FormMessage type="error" title="Ошибка" message="Срок полномочий пройден. Пожалуйста, введите корректную дату."/>
) }
<div className="form_field picker">
<label>Дата окончания полномочий <sup className="required_label">*</sup></label>
<div style={{ display: "flex", flexWrap: "wrap", width: "calc(100% - 198px)" }}>
<CalendarDatePicker
className={ errors.indexOf("head_person.evo_credentials_dateend") > -1 ? "error" : "" }
min={ moment().toDate() }
placeholder="ДД.ММ.ГГГГ"
id={ "head_person.evo_credentials_dateend" }
value={ this._checkStrValue(head_person.evo_credentials_dateend) !== "" ? this._checkStrValue(head_person.evo_credentials_dateend) : null }
onChange={ (date) => { this._removeError([ "head_person.evo_credentials_dateend", "head_person.evo_credentials_dateend_invalid" ]); this._handle_onTextFieldChange("head_person.evo_credentials_dateend", date) } }
required={ true }
disabled={ checking }
style={{maxWidth: "320px"}}
/>
</div>
</div>
</React.Fragment>
) }
{ errors.indexOf("head_person_files") > -1 &&
(
<FormMessage type="error" title="Ошибка" message="Пожалуйста, приложите как минимум одно отсканированное изображение или фотографию документа, подтверждающего личность."/>
) }
<FilesList
maxFiles={ 2 }
name="head_person_files"
files={ head_person_files }
onAddFile={ (name, files) => { this._removeError("head_person_files"); this._handle_onAddFile(name, files); } }
onRemoveFile={ this._handle_onRemoveFile }
checking={ checking }
title="Прикрепить скан паспорта единоличного исполнительного органа"
/>
<input type="text" id="head_person_files_error_check" onChange={ () => {} } value={ head_person_files.length > 0 ? head_person_files.length : "" } required={ true } style={{ opacity: 0.0, height: "0px", marginTop: "-25px", display: "flex" }}/>
{ main.inn !== null && main.inn.length < 11 &&
(
<React.Fragment>
<div className="form_field">
<div className="form_field checkbox">
<input type="checkbox"
hidden=""
id="signatory_person.delegation_agreement"
name="signatory_person.delegation_agreement"
checked={ signatory_person.delegation_agreement }
onChange={ this._handle_onChangeDelegationAgreement }
disabled={ checking }
/>
<label htmlFor="signatory_person.delegation_agreement" className="unselectable">Полномочия единоличного исполнительного органа переданы управляющей организации или управляющему</label>
</div>
</div>
{ signatory_person.delegation_agreement && (
<React.Fragment>
<p className="title">Информация об управляющей организации или управляющем</p>
{ errors.indexOf("main.individual_executive_inn") > -1 &&
(
<FormMessage type="error" title="Ошибка" message="Указанный вами ИНН невалиден, пожалуйста, убедитесь в правильности ввода."/>
) }
<div className="formgroup" style={{ width: "100%" }}>
<div className="form_field" style={{ flexDirection: "row", flexWrap: "nowrap" }}>
<label>ИНН <sup className="required_label">*</sup></label>
<InputMask
className={ errors.indexOf("main.individual_executive_inn") > -1 ? "error" : "" }
style={{ width: "100%" }}
mask='999999999999'
//maskPlaceholder={ main.individual_executive_inn !== null && main.individual_executive_inn.replace(/[^\d.-]+/g, '').length < 11 ? "_" : " " }
alwaysShowMask={ false }
id="main.individual_executive_inn"
name="main.individual_executive_inn"
value={ this._checkStrValue(main.individual_executive_inn) }
placeholder="Введите ИНН"
onChange={ (event) => { this._removeError(event.target.name); this._handle_onInnChange(event.target.value); } }
required={ true }
disabled={ checking }
/>
</div>
{ main.individual_executive_inn !== null && main.individual_executive_inn.replace(/[^\d.-]+/g, '').length < 11 && (
<div className="form_field" style={{ flexDirection: "row", flexWrap: "nowrap" }}>
<label>КПП <sup className="required_label">*</sup></label>
<InputMask
className={ errors.indexOf("main.individual_executive_kpp") > -1 ? "error" : "" }
style={{ width: "100%" }}
mask='9999999999'
alwaysShowMask={ false }
id="main.individual_executive_kpp"
name="main.individual_executive_kpp"
value={ this._checkStrValue(main.individual_executive_kpp) }
placeholder="Введите КПП"
onChange={ (event) => { this._removeError(event.target.name); this._handle_onTextFieldChange(event.target.name, event.target.value); } }
required={ true }
disabled={ checking }
/>
</div>
) }
</div>
<div className="form_field">
<p style={{ paddingBottom: "15px" }}><label>Организационно-правовая форма и полное наименование управляющей организации или управляющего <sup className="required_label">*</sup></label></p>
<input type="text"
className={ errors.indexOf("main.individual_executive_oop") > -1 ? "error" : "" }
style={{ width: "100%" }}
id="main.individual_executive_oop"
name="main.individual_executive_oop"
value={ this._checkStrValue(main.individual_executive_oop) }
placeholder="Укажите наименование"
onChange={ (event) => { this._removeError(event.target.name); this._handle_onTextFieldChange(event.target.name, event.target.value); } }
required={ true }
disabled={ checking }
/>
</div>
<div className="formgroup" style={{ width: "100%", }}>
<div className="form_field">
<label style={{ width: "100%", marginBottom: "12px" }}>Номер договора о передаче полномочий управляющей организации /управляющему <sup className="required_label">*</sup></label>
<input type="text"
className={ errors.indexOf("main.individual_executive_docnum") > -1 ? "error" : "" }
style={{ width: "100%" }}
id="main.individual_executive_docnum"
name="main.individual_executive_docnum"
value={ this._checkStrValue(main.individual_executive_docnum) }
placeholder="Номер договора"
onChange={ (event) => { this._removeError(event.target.name); this._handle_onTextFieldChange(event.target.name, event.target.value); } }
disabled={ checking }
/>
</div>
<div className="form_field" style={{ alignItems: "flex-end" }}>
<label style={{ width: "100%", alignSelf: "flex-start" }}>Дата договора <sup className="required_label">*</sup></label>
<CalendarDatePicker
className={ errors.indexOf("main.individual_executive_docdate") > -1 ? "error" : "" }
style={{ width: "100%", }}
placeholder="ДД.ММ.ГГГГ"
max={ moment().toDate() }
id={ "main.individual_executive_docdate" }
value={ this._checkStrValue(main.individual_executive_docdate) !== "" ? this._checkStrValue(main.individual_executive_docdate) : null }
onChange={ (date) => { this._removeError("main.individual_executive_docdate"); this._handle_onTextFieldChange("main.individual_executive_docdate", date); } }
required={ true }
disabled={ checking }
/>
</div>
</div>
{ errors.indexOf("delegation_files") > -1 &&
(
<FormMessage type="error" title="Ошибка" message="Пожалуйста, приложите как минимум одно отсканированное изображение или фотографию документа, подтверждающего передачу полномочий."/>
) }
<FilesList
maxFiles={ 2 }
name="delegation_files"
files={ delegation_files }
onAddFile={ (name, files) => { this._removeError("delegation_files"); this._handle_onAddFile(name, files); } }
onRemoveFile={ this._handle_onRemoveFile }
checking={ checking }
/>
<input type="text" id="delegation_files_error_check" onChange={ () => {} } value={ delegation_files.length > 0 ? delegation_files.length : "" } required={ true } style={{ opacity: 0.0, height: "0px", marginTop: "-25px", display: "flex" }}/>
</React.Fragment>
) }
</React.Fragment>
) }
<div className="form_field">
<div className="form_field checkbox">
<input type="checkbox"
hidden=""
id="signatory_person.not_head_person"
name="signatory_person.not_head_person"
checked={ signatory_person.not_head_person }
onChange={ (event) => this._handle_onCheckboxFieldChange(event.target.name, !signatory_person.not_head_person ? true : false) }
disabled={ checking }
/>
<label htmlFor="signatory_person.not_head_person" className="unselectable">Подписант отличается от единоличного исполнительного органа</label>
</div>
</div>
{ signatory_person.not_head_person && (
<React.Fragment>
<p className="title">Информация о подписанте <small>(заполняется если подписант договора лизинга отличается от единоличного исполнительного органа)</small></p>
<div className="form_field">
<label>Фамилия <sup className="required_label">*</sup></label>
<SuggestsInput
className={ errors.indexOf("signatory_person.lastname") > -1 ? "error" : "" }
type="lastname"
id="signatory_person.lastname"
name="signatory_person.lastname"
value={ this._checkStrValue(signatory_person.lastname) }
placeholder="Введите фамилию"
onChange={ (value) => { this._removeError("signatory_person.lastname"); this._handle_onTextFieldChange("signatory_person.lastname", value); } }
required={ true }
disabled={ checking }
/>
</div>
<div className="form_field">
<label>Имя <sup className="required_label">*</sup></label>
<SuggestsInput
className={ errors.indexOf("signatory_person.firstname") > -1 ? "error" : "" }
type="firstname"
id="signatory_person.firstname"
name="signatory_person.firstname"
value={ this._checkStrValue(signatory_person.firstname) }
placeholder="Введите имя"
onChange={ (value) => { this._removeError("signatory_person.firstname"); this._handle_onTextFieldChange("signatory_person.firstname", value); } }
required={ true }
disabled={ checking }
/>
</div>
<div className="form_field">
<label>Отчество <small>если имеется</small></label>
<SuggestsInput
type="middlename"
id="signatory_person.middlename"
name="signatory_person.middlename"
value={ this._checkStrValue(signatory_person.middlename) }
placeholder="Введите имя"
onChange={ (value) => this._handle_onTextFieldChange("signatory_person.middlename", value) }
required={ false }
disabled={ checking }
/>
</div>
<div className="form_field">
<label>Тип документа <sup className="required_label">*</sup></label>
<Select
id="signatory_person.identity_document.doctype"
name="signatory_person.identity_document.doctype"
options={ doctypes_personal }
placeholder="Выберите тип документа"
noOptionsMessage={ ({ inputValue }) => !inputValue ? noOptionsText :"Ничего не найдено" }
isSearchable={ false }
className="autocomlete"
classNamePrefix="react-select"
value={ doctypes_personal.filter((type) => signatory_person.identity_document.doctype === type.value) }
onChange={ (element) => this._handle_onDocumentTypeChange("signatory_person", element) }
required={ true }
isDisabled={ checking }
/>
</div>
<div className="formgroup">
<div className="form_field">
<label>Серия паспорта <sup className="required_label">*</sup></label>
<InputMask
className={ errors.indexOf("signatory_person.identity_document.seria") > -1 ? "error" : "" }
mask='9999'
id="signatory_person.identity_document.seria"
name="signatory_person.identity_document.seria"
value={ this._checkStrValue(signatory_person.identity_document.seria) }
placeholder="Введите серию"
onChange={ (event) => { this._removeError(event.target.name); this._handle_onTextFieldChange(event.target.name, event.target.value); } }
required={ true }
disabled={ checking }
/>
</div>
<div className="form_field">
<label>Номер паспорта <sup className="required_label">*</sup></label>
<InputMask
className={ errors.indexOf("signatory_person.identity_document.docnumber") > -1 ? "error" : "" }
mask='999999'
id="signatory_person.identity_document.docnumber"
name="signatory_person.identity_document.docnumber"
value={ this._checkStrValue(signatory_person.identity_document.docnumber) }
placeholder="Введите номер"
onChange={ (event) => { this._removeError(event.target.name); this._handle_onTextFieldChange(event.target.name, event.target.value); } }
required={ true }
disabled={ checking }
/>
</div>
</div>
<div className="formgroup">
<div className="form_field">
<label>Дата выдачи <sup className="required_label">*</sup></label>
<CalendarDatePicker
className={ errors.indexOf("signatory_person.identity_document.issuedate") > -1 ? "error" : "" }
style={{ width: "calc(100% - 198px)" }}
placeholder="ДД.ММ.ГГГГ"
max={ moment().toDate() }
id={ "signatory_person.identity_document.issuedate" }
value={ this._checkStrValue(signatory_person.identity_document.issuedate) !== "" ? this._checkStrValue(signatory_person.identity_document.issuedate) : null }
onChange={ (date) => { this._removeError("signatory_person.identity_document.issuedate"); this._handle_onTextFieldChange("signatory_person.identity_document.issuedate", date); } }
required={ true }
disabled={ checking }
/>
</div>
<div className="form_field">
<label>Код подразделения <sup className="required_label">*</sup></label>
<DocumentIssuerSuggestsInput
className={ errors.indexOf("signatory_person.identity_document.code") > -1 ? "error" : "" }
type="issuer"
id="signatory_person.identity_document.code"
name="signatory_person.identity_document.code"
value={ this._checkStrValue(signatory_person.identity_document.code) }
placeholder="Введите код"
onChange={ (value) => { this._removeError("signatory_person.identity_document.code"); this._handle_onIssuerCodeChange("signatory_person", value); } }
maxResults={ 5 }
required={ true }
disabled={ checking }
/>
</div>
</div>
<div className="form_field">
<label>Кем выдан <sup className="required_label">*</sup></label>
<DocumentIssuerSuggestsInput
className={ errors.indexOf("signatory_person.identity_document.issueby") > -1 ? "error" : "" }
type="issuer"
id="signatory_person.identity_document.issueby"
name="signatory_person.identity_document.issueby"
value={ this._checkStrValue(signatory_person.identity_document.issueby) }
placeholder="Введите наименование подразделения выдавшего документ"
onChange={ (value) => { this._removeError("signatory_person.identity_document.issueby"); this._handle_onIssuerChange("signatory_person", value); } }
required={ true }
disabled={ checking }
/>
</div>
<div className="form_field">
<label>Место рождения <sup className="required_label">*</sup></label>
<AddressSuggests
className={ errors.indexOf("signatory_person.identity_document.placebirth") > -1 ? "error" : "" }
id={ "signatory_person.identity_document.placebirth" }
value={ this._checkStrValue(signatory_person.identity_document.placebirth) }
placeholder="Укажите место рождения"
onChange={ (data) => { this._removeError("signatory_person.identity_document.placebirth"); this._handle_onTextFieldChange("signatory_person.identity_document.placebirth", data.name); } }
required={ true }
disabled={ checking }
/>
</div>
{ parseInt(signatory_person.identity_document.doctype, 10) !== 100000000 && (
<div className="form_field">
<label>Гражданство <sup className="required_label">*</sup></label>
<Select
className={ errors.indexOf("signatory_person.identity_document.placebirth") > -1 ? "autocomlete error" : "autocomlete" }
id="signatory_person.identity_document.citizenship"
name="signatory_person.identity_document.citizenship"
options={ citizenships }
placeholder="Выберите страну"
noOptionsMessage={ ({ inputValue }) => !inputValue ? noOptionsText :"Ничего не найдено" }
isSearchable={ true }
classNamePrefix="react-select"
value={ signatory_person_citizenship.code !== null ? signatory_person_citizenship : undefined }
onChange={ (element) => { this._removeError("signatory_person.identity_document.citizenship"); this._handle_onCitizenshipChange(`signatory_person.identity_document.citizenship`, element.value); } }
required={ true }
isDisabled={ checking }
/>
</div>
) }
<div className="form_field">
<label>Адрес регистрации <sup className="required_label">*</sup></label>
<AddressSuggests
className={ errors.indexOf("signatory_person.identity_document.registration_address.name") > -1 ? "error" : "" }
value={ this._checkStrValue(signatory_person.identity_document.registration_address.name) }
fias={ this._checkStrValue(signatory_person.identity_document.registration_address.fias_id) }
onChange={ (data) => { this._removeError("signatory_person.identity_document.registration_address.name"); this._handle_onTextFieldChange("signatory_person.identity_document.registration_address", data); } }
required={ true }
disabled={ checking }
/>
</div>
<div className="form_field">
<label>Должность <sup className="required_label">*</sup></label>
<input type="text"
className={ errors.indexOf("signatory_person.jobtitle") > -1 ? "error" : "" }
id="signatory_person.jobtitle"
name="signatory_person.jobtitle"
value={ this._checkStrValue(signatory_person.jobtitle) }
placeholder="Укажите должность"
onChange={ (event) => { this._removeError("signatory_person.jobtitle"); this._handle_onTextFieldChange(event.target.name, event.target.value); } }
required={ true }
disabled={ checking }
/>
</div>
<div className="formgroup">
<div className="form_field">
<label>Телефон <sup className="required_label">*</sup></label>
<InputMask
className={ errors.indexOf("signatory_person.telephone") > -1 ? "error" : "" }
id={ "signatory_person.telephone" }
name={ "signatory_person.telephone" }
value={ this._checkStrValue(signatory_person.telephone) }
placeholder="Введите номер телефона"
onChange={ (event) => { this._removeError("signatory_person.telephone"); this._handle_onTextFieldChange(event.target.name, event.target.value); } }
required={ true }
disabled={ checking }
mask='+7 (999) 999 99 99'
/>
</div>
<div className="form_field">
<label>E-mail <sup className="required_label">*</sup></label>
<input type="email"
className={ errors.indexOf("signatory_person.email") > -1 ? "error" : "" }
id="signatory_person.email"
name="signatory_person.email"
value={ this._checkStrValue(signatory_person.email) }
placeholder="E-mail"
onChange={ (event) => { this._removeError("signatory_person.email"); this._handle_onTextFieldChange(event.target.name, event.target.value); } }
pattern="[^@\s]+@[^@\s]+\.[^@\s]+"
required={ true }
disabled={ checking }
/>
</div>
</div>
{ errors.indexOf("signatory_person_files") > -1 &&
(
<FormMessage type="error" title="Ошибка" message="Пожалуйста, приложите как минимум одно отсканированное изображение или фотографию документа, подтверждающего личность."/>
) }
<FilesList
maxFiles={ 2 }
title="Прикрепить скан паспорта подписанта"
name="signatory_person_files"
files={ signatory_person_files }
onAddFile={ (name, files) => { this._removeError("signatory_person_files"); this._handle_onAddFile(name, files); } }
onRemoveFile={ this._handle_onRemoveFile }
checking={ checking }
/>
<input type="text" id="signatory_person_files_error_check" onChange={ () => {} } value={ signatory_person_files.length > 0 ? signatory_person_files.length : "" } required={ true } style={{ opacity: 0.0, height: "0px", marginTop: "-25px", display: "flex" }}/>
<p><b>Реквизиты документа подтверждающие полномочия на подписание договора лизинга</b></p>
<div className="form_field">
<label>Право подписи на основании <sup className="required_label">*</sup></label>
<Select
id="signatory_person.signer_rule_basic"
name="signatory_person.signer_rule_basic"
options={ doctypes_corporate }
placeholder="Вид документа"
noOptionsMessage={ ({ inputValue }) => !inputValue ? noOptionsText :"Ничего не найдено" }
isSearchable={ true }
className="autocomlete"
classNamePrefix="react-select"
value={ doctypes_corporate.filter((type) => signatory_person.signer_rule_basic === type.value) }
onChange={ (element) => { this._removeError("signatory_person.signer_rule_basic"); this._handle_onTextFieldChange(`signatory_person.signer_rule_basic`, element.value); } }
required={ true }
isDisabled={ checking }
/>
</div>
{ parseInt(signatory_person.signer_rule_basic, 10) === 100000003 && (
<div className="form_field">
<label>Наименование документа <sup className="required_label">*</sup></label>
<input type="text"
className={ errors.indexOf("signatory_person.signer_rule_basic_add") > -1 ? "error" : "" }
id="signatory_person.signer_rule_basic_add"
name="signatory_person.signer_rule_basic_add"
value={ this._checkStrValue(signatory_person.signer_rule_basic_add) }
placeholder="Наименование документа"
onChange={ (event) => { this._removeError("signatory_person.signer_rule_basic_add"); this._handle_onTextFieldChange(event.target.name, event.target.value); } }
required={ true }
disabled={ checking }
/>
</div>
) }
{ (parseInt(signatory_person.signer_rule_basic, 10) === 100000000 || parseInt(signatory_person.signer_rule_basic, 10) === 100000003) && (
<>
<div className="formgroup">
<div className="form_field">
<label>Номер документа <sup className="required_label">*</sup></label>
<input type="text"
className={ errors.indexOf("signatory_person.docnumber") > -1 ? "error" : "" }
id="signatory_person.docnumber"
name="signatory_person.docnumber"
value={ this._checkStrValue(signatory_person.docnumber) }
placeholder="Номер документа"
onChange={ (event) => { this._removeError("signatory_person.docnumber"); this._handle_onTextFieldChange(event.target.name, event.target.value); } }
required={ true }
disabled={ checking }
/>
</div>
<div className="form_field">
<label>Дата документа <sup className="required_label">*</sup></label>
<CalendarDatePicker
className={ errors.indexOf("signatory_person.docdate") > -1 ? "error" : "" }
style={{ width: "calc(100% - 198px)" }}
placeholder="ДД.ММ.ГГГГ"
max={ moment().toDate() }
id={ "signatory_person.docdate" }
value={ this._checkStrValue(signatory_person.docdate) !== "" ? this._checkStrValue(signatory_person.docdate) : null }
onChange={ (date) => { this._removeError("signatory_person.docdate"); this._handle_onTextFieldChange("signatory_person.docdate", date); } }
required={ true }
disabled={ checking }
/>
</div>
</div>
{ errors.indexOf("signatory_corporate_files") > -1 &&
(
<FormMessage type="error" title="Ошибка" message="Пожалуйста, приложите как минимум одно отсканированное изображение или фотографию документа, подтверждающего право подписи."/>
) }
<FilesList
maxFiles={ 2 }
title="Прикрепить скан документа на право подписи"
name="signatory_corporate_files"
files={ signatory_corporate_files }
onAddFile={ (name, files) => { this._removeError("signatory_corporate_files"); this._handle_onAddFile(name, files); } }
onRemoveFile={ this._handle_onRemoveFile }
checking={ checking }
/>
<input type="text" id="signatory_corporate_files_error_check" onChange={ () => {} } value={ signatory_corporate_files.length > 0 ? signatory_corporate_files.length : "" } required={ true } style={{ opacity: 0.0, height: "0px", marginTop: "-25px", display: "flex" }}/>
</>
) }
</React.Fragment>
) }
{ !checking && (
<div className="action">
<button type="button" className="button button-blue" onClick={ this._handle_onNextPage }>
{ 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>
<button ref={ this.ref_submit } type="submit" style={{ display: "none" }}/>
{ status !== "empty" && (
<>
<br/><br/>
<a style={{ cursor: "pointer" }} onClick={ this._handle_onReset }>Отменить изменения в анкете</a>
</>
) }
</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_3_Signer);