2023-04-06 13:46:32 +03:00

687 lines
26 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 { get as _get } from 'lodash';
import QuestionnaireForm from "../QuestionnaireForm";
import CalendarDatePicker from '../../../CalendarDatePicker';
import citizenships from "../../../../lib/citizenships.json";
import { reduxWrapper } from '../../../../store';
import AddressSuggests from "../../AddressSuggests";
import InputMask from 'react-input-mask';
import { getCitizenshipTitleByCode } from "../../../../utils/citizenship";
import { saveQuestionnaire } from "../../../../actions";
import SuggestsInput from "../../SuggestsInput";
class ShareholderForm extends React.Component
{
_handle_onTextFieldChange = this.props._handle_onTextFieldChange;
_handle_onCheckboxFieldChange = this.props._handle_onCheckboxFieldChange;
_handle_onFieldChange = this.props._handle_onFieldChange;
_checkStrValue = this.props._checkStrValue;
_handle_onCitizenshipChange = (name, value) =>
{
console.log("_handle_onCitizenshipChange", value);
let citizenship = getCitizenshipTitleByCode(value);
this._handle_onFieldChange(name, {
title: citizenship,
code: value,
});
}
render()
{
const { index, shareholder, checking } = this.props;
let citizenship = { label: getCitizenshipTitleByCode(shareholder.identity_document.citizenship.code), code: shareholder.identity_document.citizenship.code };
console.log("shareholder", "citizenship", citizenship);
console.log("shareholder", shareholder);
return (
<React.Fragment>
<div className="form_field">
<label>Фамилия <sup className="required_label">*</sup></label>
<SuggestsInput
type="lastname"
id={ `founder_persons[${ index }].lastname` }
name={ `founder_persons[${ index }].lastname` }
value={ this._checkStrValue(shareholder.lastname) }
placeholder="Введите фамилию"
onChange={ (value) => this._handle_onTextFieldChange(`founder_persons[${ index }].lastname`, value) }
required={ true }
disabled={ checking }
/>
</div>
<div className="form_field">
<label>Имя <sup className="required_label">*</sup></label>
<SuggestsInput
type="firstname"
id={ `founder_persons[${ index }].firstname` }
name={ `founder_persons[${ index }].firstname` }
value={ this._checkStrValue(shareholder.firstname) }
placeholder="Введите имя"
onChange={ (value) => this._handle_onTextFieldChange(`founder_persons[${ index }].firstname`, value) }
required={ true }
disabled={ checking }
/>
</div>
<div className="form_field">
<label>Отчество <sup className="required_label">*</sup><small>если имеется</small></label>
<SuggestsInput
type="middlename"
id={ `founder_persons[${ index }].middlename` }
name={ `founder_persons[${ index }].middlename` }
value={ this._checkStrValue(shareholder.middlename) }
placeholder="Введите отчество"
onChange={ (value) => this._handle_onTextFieldChange(`founder_persons[${ index }].middlename`, value) }
required={ false }
disabled={ checking }
/>
</div>
<div className="form_field">
<label>Должность <sup className="required_label">*</sup><small>если имеется</small></label>
<input type="text"
id={ `founder_persons[${ index }].jobtitle` }
name={ `founder_persons[${ index }].jobtitle` }
value={ this._checkStrValue(shareholder.jobtitle) }
placeholder="Введите должность"
onChange={ (event) => this._handle_onTextFieldChange(event.target.name, event.target.value) }
required={ false }
disabled={ checking }
/>
</div>
<div className="form_field">
<label>Телефон <sup className="required_label">*</sup></label>
<InputMask
mask='+7 (999) 999 99 99'
id={ `founder_persons[${ index }].telephone` }
name={ `founder_persons[${ index }].telephone` }
value={ this._checkStrValue(shareholder.telephone) }
placeholder="Введите номер телефона"
onChange={ (event) => 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="text"
id={ `founder_persons[${ index }].email` }
name={ `founder_persons[${ index }].email` }
value={ this._checkStrValue(shareholder.email) }
placeholder="Введите E-mail"
onChange={ (event) => this._handle_onTextFieldChange(event.target.name, event.target.value) }
required={ true }
disabled={ checking }
/>
</div>
<div className="form_field ">
<div className="form_field">
<label>Серия и номер паспорта <sup className="required_label">*</sup></label>
<div className="formgroup">
<div className="form_field">
<InputMask
mask='9999'
id={ `founder_persons[${ index }].identity_document.seria` }
name={ `founder_persons[${ index }].identity_document.seria` }
value={ this._checkStrValue(shareholder.identity_document.seria) }
placeholder="Введите серию"
onChange={ (event) => this._handle_onTextFieldChange(event.target.name, event.target.value) }
required={ true }
disabled={ checking }
/>
</div>
<div className="form_field">
<InputMask
mask='999999'
id={ `founder_persons[${ index }].identity_document.docnumber` }
name={ `founder_persons[${ index }].identity_document.docnumber` }
value={ this._checkStrValue(shareholder.identity_document.docnumber) }
placeholder="Введите номер"
onChange={ (event) => this._handle_onTextFieldChange(event.target.name, event.target.value) }
required={ true }
disabled={ checking }
/>
</div>
</div>
</div>
</div>
<div className="form_field ">
<div className="form_field">
<label>Дата выдачи и код подразделения <sup className="required_label">*</sup></label>
<div className="formgroup">
<div className="form_field">
<CalendarDatePicker
//style={{ width: "calc(100% - 198px)" }}
placeholder="ДД.ММ.ГГГГ"
id={ `founder_persons[${ index }].identity_document.issuedate` }
value={ this._checkStrValue(shareholder.identity_document.issuedate) !== "" ? this._checkStrValue(shareholder.identity_document.issuedate) : null }
onChange={ (date) => this._handle_onTextFieldChange(`founder_persons[${ index }].identity_document.issuedate`, date) }
required={ true }
disabled={ checking }
/>
</div>
<div className="form_field">
<InputMask
mask='999-999'
id={ `founder_persons[${ index }].identity_document.code` }
name={ `founder_persons[${ index }].identity_document.code` }
value={ this._checkStrValue(shareholder.identity_document.code) }
placeholder="Введите код"
onChange={ (event) => this._handle_onTextFieldChange(event.target.name, event.target.value) }
required={ true }
disabled={ checking }
/>
</div>
</div>
</div>
</div>
<div className="form_field">
<label>Кем выдан <sup className="required_label">*</sup></label>
<input type="text"
id={ `founder_persons[${ index }].identity_document.issueby` }
name={ `founder_persons[${ index }].identity_document.issueby` }
value={ this._checkStrValue(shareholder.identity_document.issueby) }
placeholder="Введите наименование подразделения выдавшего документ"
onChange={ (event) => this._handle_onTextFieldChange(event.target.name, event.target.value) }
required={ true }
disabled={ checking }
/>
</div>
<div className="form_field" style={{ flex: 1 }}>
<label>Место рождения <sup className="required_label">*</sup></label>
<AddressSuggests
id={ `founder_persons[${ index }].identity_document.placebirth` }
value={ this._checkStrValue(shareholder.identity_document.placebirth) }
onChange={ (data) => this._handle_onTextFieldChange(`founder_persons[${ index }].identity_document.placebirth`, data.title) }
required={ true }
disabled={ checking }
/>
</div>
<div className="form_field">
<label>Гражданство <sup className="required_label">*</sup></label>
<Select
id={ `founder_persons[${ index }].identity_document.citizenship` }
name={ `founder_persons[${ index }].identity_document.citizenship` }
options={ [ ...citizenships ] }
placeholder="Выберите страну"
noOptionsMessage={ ({ inputValue }) => !inputValue ? noOptionsText :"Ничего не найдено" }
isSearchable={ true }
className="autocomlete"
classNamePrefix="react-select"
value={ citizenship.code !== null ? citizenship : undefined }
onChange={ (element) => this._handle_onCitizenshipChange(`founder_persons[${ index }].identity_document.citizenship`, element.value) }
required={ true }
isDisabled={ checking }
/>
</div>
<div className="form_field">
<label>Адрес регистрации <sup className="required_label">*</sup></label>
<AddressSuggests
id={ `founder_persons[${ index }].identity_document.registration_address` }
value={ this._checkStrValue(shareholder.identity_document.registration_address.name) }
fias={ this._checkStrValue(shareholder.identity_document.registration_address.fias_id) }
onChange={ (data) => this._handle_onTextFieldChange(`founder_persons[${ index }].identity_document.registration_address`, data) }
required={ true }
disabled={ checking }
/>
</div>
</React.Fragment>
)
}
}
class Shareholder extends React.Component
{
constructor(props)
{
super(props);
this.state = {};
}
_handle_onTextFieldChange = this.props._handle_onTextFieldChange;
_handle_onCheckboxFieldChange = this.props._handle_onCheckboxFieldChange;
_checkStrValue = this.props._checkStrValue;
_checkSignatoryDisabled = (signatory_id) =>
{
const { shareholders } = this.props;
for(let i in shareholders)
{
if(shareholders[i].signatory_id === signatory_id)
{
return true;
}
}
return false;
}
render()
{
const { index, shareholders, removeShareholder, signatories, changeSignatorySelection, clearSignatorySelection, checking } = this.props;
const shareholder = shareholders[index];
return (
<React.Fragment>
<div className="added_person">
{ index > 0 && (
<div className="form_field">
<label>Физическое лицо { index + 1 }</label>
<div className="formgroup control">
{ !checking && (
<div className="form_field checkbox">
<input type="checkbox" hidden=""
checked={ shareholder.founder_from_list }
id={ `founder_persons[${ index }].founder_from_list` }
name={ `founder_persons[${ index }].founder_from_list` }
onChange={ (event) => clearSignatorySelection(`founder_persons[${ index }]`, { founder_from_list: !shareholder.founder_from_list ? true : false, lastname: "", firstname: "", middlename: "", no_middle_name: false, }) }
/>
<label className="unselectable" htmlFor={ `founder_persons[${ index }].founder_from_list` }>Выбрать из списка</label>
</div>
) }
{ !checking && (
<button className="delete" onClick={ (event) => { event.preventDefault(); removeShareholder(index) } }>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20.25 5.25L3.75 5.25001" stroke="#ED0A34" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
<path d="M9.75 9.75V15.75" stroke="#ED0A34" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
<path d="M14.25 9.75V15.75" stroke="#ED0A34" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
<path d="M18.75 5.25V19.5C18.75 19.6989 18.671 19.8897 18.5303 20.0303C18.3897 20.171 18.1989 20.25 18 20.25H6C5.80109 20.25 5.61032 20.171 5.46967 20.0303C5.32902 19.8897 5.25 19.6989 5.25 19.5V5.25" stroke="#ED0A34" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
<path d="M15.75 5.25V3.75C15.75 3.35218 15.592 2.97064 15.3107 2.68934C15.0294 2.40804 14.6478 2.25 14.25 2.25H9.75C9.35218 2.25 8.97064 2.40804 8.68934 2.68934C8.40804 2.97064 8.25 3.35218 8.25 3.75V5.25" stroke="#ED0A34" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
</button>
) }
</div>
</div>
) }
{ index > 0 ? (
<React.Fragment>
{ shareholder.founder_from_list ? (
<div className="feed">
<div className="feed_list">
{ signatories !== undefined && signatories !== null && signatories.map((signatory, s_index) => {
const disabled = signatory.signatoryid !== shareholder.signatory_id ? this._checkSignatoryDisabled(signatory.signatoryid) : false;
if(checking)
{
if(shareholder.signatory_id !== signatory.signatoryid)
{
return null;
}
}
return (
<div className="form_field checkbox" key={ s_index }>
<input type="radio" hidden=""
id={ `founder_persons[${ index }].signatory_${ signatory.signatoryid }` }
name={ `founder_persons[${ index }].signatory_${ signatory.signatoryid }` }
checked={ signatory.signatoryid === shareholder.signatory_id }
onChange={ () => changeSignatorySelection(`founder_persons[${ index }]`, { ...shareholder, ...{
founder_from_list: true,
signatory_id: signatory.signatoryid,
lastname: _checkStrValue(signatory.lastname),
firstname: _checkStrValue(signatory.firstname),
middlename: _checkStrValue(signatory.middlename),
} }) }
disabled={ disabled }
/>
<label className="unselectable" style={ disabled ? { opacity: "0.5" } : {} } htmlFor={ `founder_persons[${ index }].signatory_${ signatory.signatoryid }` }>
<div className="feed_item user">
<img src="/assets/images/icons/avatar.svg" alt="" />
<div>
<p className="item_title">{ signatory.lastname } { signatory.firstname } { signatory.middlename }</p>
<p className="item_desc">
<span>{ signatory.jobtitle }</span>
</p>
</div>
</div>
</label>
</div>
);
}) }
</div>
</div>
) : (
<ShareholderForm index={ index } shareholder={ shareholder } { ...this.props } />
) }
</React.Fragment>
) : (
<ShareholderForm index={ index } shareholder={ shareholder } { ...this.props } />
) }
<div className="form_field">
<label>Доля в уставном капитале (%) <sup className="required_label">*</sup></label>
<InputMask
mask='999'
formatChars={{ '9': '[0-9]', }}
id={ `founder_persons[${ index }].founder_part` }
name={ `founder_persons[${ index }].founder_part` }
value={ this._checkStrValue(shareholder.founder_part) }
placeholder="Укажите размер доли"
onChange={ (event) => this._handle_onTextFieldChange(event.target.name, event.target.value > 100 ? 100 : event.target.value) }
required={ true }
disabled={ checking }
/>
</div>
<div className="form_field">
<label>Является ли бенифиальным владельцем</label>
<div className="formgroup">
<div className="form_field checkbox">
<input type="radio" hidden=""
value="1"
id={ `founder_persons[${ index }].is_beneficial_1` }
name={ `founder_persons[${ index }].is_beneficial` }
checked={ shareholder.is_beneficial ? true : false }
onChange={ (event) => this._handle_onCheckboxFieldChange(event.target.name, parseInt(event.target.value, 10)) }
disabled={ checking }
/>
<label className="unselectable" htmlFor={ `founder_persons[${ index }].is_beneficial_1` }>Да</label>
</div>
<div className="form_field checkbox">
<input type="radio" hidden=""
value="0"
id={ `founder_persons[${ index }].is_beneficial_0` }
name={ `founder_persons[${ index }].is_beneficial` }
checked={ shareholder.is_beneficial ? false : true }
onChange={ (event) => this._handle_onCheckboxFieldChange(event.target.name, parseInt(event.target.value, 10)) }
disabled={ checking }
/>
<label className="unselectable" htmlFor={ `founder_persons[${ index }].is_beneficial_0` }>Нет</label>
</div>
</div>
</div>
</div>
</React.Fragment>
)
}
}
class Form_4_Shareholders extends QuestionnaireForm
{
constructor(props)
{
super(props);
this.state = {
founder_persons: [],
founder_persons_template: {
signatory_id: null,
lastname: null,
firstname: null,
middlename: null,
no_middle_name: false,
jobtitle: null,
telephone: null,
email: null,
founder_from_list: true,
founder_number: 0,
founder_part: null,
is_beneficial: false,
identity_document:
{
doctype: null,
seria: null,
docnumber: null,
issuedate: null,
code: null,
issueby: null,
issueby_search_dadata: null,
placebirth: null,
citizenship: {
title: null,
code: null,
},
registration_address: {
name: null,
fias_id: null,
}
}
},
loading: false,
status: "empty",
};
}
static getDerivedStateFromProps(nextProps, prevState)
{
return {
founder_persons: nextProps.questionnaire.founder_persons,
status: nextProps.questionnaire.status,
};
}
componentDidMount()
{
console.log("Form_4_Shareholders", "this.state", this.state);
console.log("Form_4_Shareholders", "global.store.getState()", global.store.getState());
const founder_persons_template = JSON.parse(JSON.stringify(this.state.founder_persons_template));
if(this.state.founder_persons.length === 0)
{
this._updateQuestionnaire({
founder_persons: [{ ...founder_persons_template, ...{ founder_from_list: false, founder_number: this.state.founder_persons.length + 1 } }],
});
}
}
_handle_onAddShareholder = () =>
{
console.log("_handle_onAddShareholder");
const founder_persons = [ ...this.state.founder_persons ];
const founder_persons_template = JSON.parse(JSON.stringify(this.state.founder_persons_template));
console.log("_handle_onAddShareholder", { founder_persons_template });
if(founder_persons.length < 4)
{
founder_persons.push(founder_persons_template);
this._updateQuestionnaire({
founder_persons,
});
}
}
_handle_onRemoveShareholder = (index) =>
{
const founder_persons = [ ...this.state.founder_persons ];
founder_persons.splice(index, 1);
this._updateQuestionnaire({
founder_persons,
});
}
_handle_onClearSignatorySelection = (name, values) =>
{
const founder_persons_template = JSON.parse(JSON.stringify(this.state.founder_persons_template));
const update = { ...founder_persons_template , ...values };
console.log("_handle_onClearSignatorySelection", update);
this._handle_onFieldChange(name, update );
}
_handle_onChangeSignatorySelection = (name, values) =>
{
console.log("_handle_onChangeSignatorySelection");
console.log(name, values);
this._handle_onFieldChange(name, { ...values } );
}
_handle_onFormSubmit = (event) =>
{
event.preventDefault();
console.log("Form_4_Shareholders", "_handle_onFormSubmit");
this._handle_onCheckboxFieldChange("step", 5);
setTimeout(() =>
{
saveQuestionnaire();
this.props.onNextStep("regulatory");
}, 10);
}
_checkDisabled = () =>
{
const { founder_persons } = this.state;
const check_all = [
"founder_part",
];
const check = [
"lastname",
"firstname",
"telephone",
"email",
"identity_document.seria",
"identity_document.docnumber",
"identity_document.issuedate",
"identity_document.icode",
"identity_document.issueby",
"identity_document.placebirth",
"identity_document.citizenship.code",
"identity_document.registration_address.title",
];
for(let f in founder_persons)
{
for(let i in check_all)
{
if(_get(founder_persons[f], check_all[i]) === "")
{
console.log("1. EMPTY", f, check_all[i]);
return true;
}
}
if(!founder_persons[f].founder_from_list)
{
for(let i in check)
{
if(_get(founder_persons[f], check[i]) === "")
{
console.log("2. EMPTY", f, check[i]);
return true;
}
}
}
else
{
if(founder_persons[f].signatory_id === null)
{
console.log("3. EMPTY", f, "signatory_id");
console.log("founder_persons[f]");
console.log(founder_persons[f]);
return true;
}
}
}
return false;
}
render()
{
const { signatories, checking } = this.props;
const { founder_persons, loading, address, status, } = this.state;
return (
<form onSubmit={ this._handle_onFormSubmit } className={`questionnaire questionnaire_4 ${ checking && "disabled" }`}>
<p className="title">4. Сведения об участниках (акционерах) и бенефициарных владельцах</p>
<p> физических лицах, владеющих долей в уставном капитале более 25%
<small>*бенефициарный владелец (в соответствии с Федеральным законом от 07.08.2001 No115-ФЗ «О противодействии легализации (отмыванию) доходов, полученных преступным путем, и финансированию терроризма»)
физическое лицо, которое в конечном счете прямо или косвенно (через третьих лиц) владеет (имеет преобладающее участие более 25 процентов в капитале) вышеуказанным лизингополучателем-юридическим лицом, либо
имеет возможность контролировать действия вышеуказанного лизингополучателя. Бенефициарным владельцем лизингополучателя-физического лица считается это лицо, за исключением случаев, если имеются основания
полагать, что бенефициарным владельцем является иное физическое лицо. В случае, если бенефициарным владельцем являются несколько человек, сведения предоставляются в отношении каждого.</small>
</p>
{ founder_persons.map((shareholder, index) => (
<Shareholder
key={ index }
index={ index }
shareholders={ founder_persons }
address={ address }
_handle_onTextFieldChange={ this._handle_onTextFieldChange }
_handle_onCheckboxFieldChange={ this._handle_onCheckboxFieldChange }
_handle_onFieldChange={ this._handle_onFieldChange }
_checkStrValue={ this._checkStrValue }
removeShareholder={ this._handle_onRemoveShareholder }
clearSignatorySelection={ this._handle_onClearSignatorySelection }
changeSignatorySelection={ this._handle_onChangeSignatorySelection }
signatories={ signatories }
checking={ checking }
/>
)) }
{ !checking && (
<div className="action">
{ founder_persons.length < 4 ? (
<button className="button button-blue" disabled={ false } onClick={ (event) => { event.preventDefault(); this._handle_onAddShareholder(); }}>Добавить еще одного владельца</button>
) : (
<div></div>
) }
<div>
<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>
{ status !== "empty" && (
<>
<br/><br/>
<a style={{ cursor: "pointer" }} onClick={ this._handle_onReset }>Отменить изменения в анкете</a>
</>
) }
</div>
</div>
) }
</form>
)
}
}
function mapStateToProps(state, ownProps)
{
return {
questionnaire: state.questionnaire,
}
}
export const getServerSideProps = reduxWrapper.getServerSideProps(store =>
async ({ req, res, query }) =>
{
}
);
export default connect(mapStateToProps)(Form_4_Shareholders);