486 lines
19 KiB
JavaScript
486 lines
19 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 Select from 'react-select';
|
||
import { connect } from "react-redux";
|
||
import { withRouter } from 'next/router';
|
||
|
||
import QuestionnaireForm from "../QuestionnaireForm";
|
||
import DateInput from '../../../../pages/components/DatePicker';
|
||
import citizenships from "../../../../lib/citizenships.json";
|
||
import AddressSuggestsSelect from "../AddressSuggestsSelect";
|
||
import { reduxWrapper } from '../../../../store';
|
||
|
||
class ShareholderForm extends React.Component
|
||
{
|
||
_handle_onTextFieldChange = this.props._handle_onTextFieldChange;
|
||
_handle_onCheckboxFieldChange = this.props._handle_onCheckboxFieldChange;
|
||
|
||
render()
|
||
{
|
||
const { index, shareholder } = this.props;
|
||
|
||
let citizenship = undefined;
|
||
if(shareholder.identity_document.citizenship_code !== "")
|
||
{
|
||
for(let i in citizenships)
|
||
{
|
||
if(parseInt(citizenships[i].value, 10) === parseInt(shareholder.identity_document.citizenship_code, 10))
|
||
{
|
||
citizenship = citizenships[i];
|
||
}
|
||
}
|
||
}
|
||
|
||
return (
|
||
<React.Fragment>
|
||
<div className="form_field">
|
||
<label>Фамилия</label>
|
||
<input type="text"
|
||
id={ `founded_persons[${ index }].lastname` }
|
||
name={ `founded_persons[${ index }].lastname` }
|
||
value={ shareholder.lastname }
|
||
placeholder="Введите фамилию"
|
||
onChange={ (event) => this._handle_onTextFieldChange(event.target.name, event.target.value) }
|
||
required={ true }
|
||
/>
|
||
</div>
|
||
|
||
<div className="form_field">
|
||
<label>Имя</label>
|
||
<input type="text"
|
||
id={ `founded_persons[${ index }].firstname` }
|
||
name={ `founded_persons[${ index }].firstname` }
|
||
value={ shareholder.firstname }
|
||
placeholder="Введите имя"
|
||
onChange={ (event) => this._handle_onTextFieldChange(event.target.name, event.target.value) }
|
||
required={ true }
|
||
/>
|
||
</div>
|
||
|
||
<div className="form_field">
|
||
<label>Отчество <small>если имеется</small></label>
|
||
<input type="text"
|
||
id={ `founded_persons[${ index }].middlename` }
|
||
name={ `founded_persons[${ index }].middlename` }
|
||
value={ shareholder.middlename }
|
||
placeholder="Введите отчество"
|
||
onChange={ (event) => this._handle_onTextFieldChange(event.target.name, event.target.value) }
|
||
required={ true }
|
||
/>
|
||
</div>
|
||
|
||
<div className="form_field ">
|
||
<div className="form_field">
|
||
<label>Серия и номер паспорта</label>
|
||
<div className="formgroup">
|
||
<div className="form_field">
|
||
<input type="text"
|
||
id={ `founded_persons[${ index }].identity_document.seria` }
|
||
name={ `founded_persons[${ index }].identity_document.seria` }
|
||
value={ shareholder.identity_document.seria }
|
||
placeholder="Введите серию"
|
||
onChange={ (event) => this._handle_onTextFieldChange(event.target.name, event.target.value) }
|
||
required={ true }
|
||
/>
|
||
</div>
|
||
<div className="form_field">
|
||
<input type="text"
|
||
id={ `founded_persons[${ index }].identity_document.docnumber` }
|
||
name={ `founded_persons[${ index }].identity_document.docnumber` }
|
||
value={ shareholder.identity_document.docnumber }
|
||
placeholder="Введите номер"
|
||
onChange={ (event) => this._handle_onTextFieldChange(event.target.name, event.target.value) }
|
||
required={ true }
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="form_field ">
|
||
<div className="form_field">
|
||
<label>Дата выдачи и код подразделения </label>
|
||
<div className="formgroup">
|
||
<div className="form_field">
|
||
<DateInput
|
||
//style={{ width: "calc(100% - 198px)" }}
|
||
placeholder="ДД.ММ.ГГГГ"
|
||
id={ `founded_persons[${ index }].identity_document.issuedate` }
|
||
name={ `founded_persons[${ index }].identity_document.issuedate` }
|
||
onChange={ (date) => this._handle_onTextFieldChange(`founded_persons[${ index }].identity_document.issuedate`, date) }
|
||
required={ true }
|
||
/>
|
||
</div>
|
||
<div className="form_field">
|
||
<input type="text"
|
||
id={ `founded_persons[${ index }].identity_document.icode` }
|
||
name={ `founded_persons[${ index }].identity_document.icode` }
|
||
value={ shareholder.identity_document.icode }
|
||
placeholder="Код подразделения"
|
||
onChange={ (event) => this._handle_onTextFieldChange(event.target.name, event.target.value) }
|
||
required={ true }
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="form_field">
|
||
<label>Кем выдан</label>
|
||
<input type="text"
|
||
id={ `founded_persons[${ index }].identity_document.issueby` }
|
||
name={ `founded_persons[${ index }].identity_document.issueby` }
|
||
value={ shareholder.identity_document.issueby }
|
||
placeholder="Введите наименование подразделения выдавшего документ"
|
||
onChange={ (event) => this._handle_onTextFieldChange(event.target.name, event.target.value) }
|
||
required={ true }
|
||
/>
|
||
</div>
|
||
|
||
<div className="form_field" style={{ flex: 1 }}>
|
||
<label>Место рождения</label>
|
||
<AddressSuggestsSelect
|
||
id={ `founded_persons[${ index }].identity_document.placebirth` }
|
||
value={ shareholder.identity_document.placebirth.title }
|
||
onChange={ (data) => this._handle_onTextFieldChange(`founded_persons[${ index }].identity_document.placebirth`, data.title) }
|
||
/>
|
||
</div>
|
||
|
||
<div className="form_field">
|
||
<label>Гражданство</label>
|
||
<Select
|
||
id={ `founded_persons[${ index }].identity_document.citizenship_code` }
|
||
name={ `founded_persons[${ index }].identity_document.citizenship_code` }
|
||
value={ citizenship }
|
||
options={ citizenships }
|
||
placeholder="Выберите страну"
|
||
noOptionsMessage={ ({ inputValue }) => !inputValue ? noOptionsText :"Ничего не найдено" }
|
||
isSearchable={ true }
|
||
className="autocomlete"
|
||
classNamePrefix="react-select"
|
||
onChange={ (element) => this._handle_onTextFieldChange(`founded_persons[${ index }].identity_document.citizenship_code`, element.value) }
|
||
required={ true }
|
||
/>
|
||
</div>
|
||
|
||
<div className="form_field">
|
||
<label>Адрес регистрации</label>
|
||
<AddressSuggestsSelect
|
||
id={ `founded_persons[${ index }].identity_document.registration_address` }
|
||
value={ shareholder.identity_document.registration_address.title }
|
||
fias={ shareholder.identity_document.registration_address.fias_id }
|
||
onChange={ (data) => this._handle_onTextFieldChange(`founded_persons[${ index }].identity_document.registration_address`, data) }
|
||
/>
|
||
</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;
|
||
|
||
_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, } = 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">
|
||
|
||
<div className="form_field checkbox">
|
||
<input type="checkbox" hidden=""
|
||
checked={ shareholder.founder_from_list }
|
||
id={ `founded_persons[${ index }].founder_from_list` }
|
||
name={ `founded_persons[${ index }].founder_from_list` }
|
||
onChange={ (event) => clearSignatorySelection(`founded_persons[${ index }]`, { founder_from_list: !shareholder.founder_from_list ? true : false, lastname: "", firstname: "", middlename: "", no_middle_name: false, }) }
|
||
/>
|
||
<label className="unselectable" htmlFor={ `founded_persons[${ index }].founder_from_list` }>Выбрать из списка</label>
|
||
</div>
|
||
|
||
<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.map((signatory, s_index) => {
|
||
const disabled = signatory.signatoryid !== shareholder.signatory_id ? this._checkSignatoryDisabled(signatory.signatoryid) : false;
|
||
return (
|
||
<div className="form_field checkbox" key={ s_index }>
|
||
<input type="radio" hidden=""
|
||
id={ `founded_persons[${ index }].signatory_${ signatory.signatoryid }` }
|
||
name={ `founded_persons[${ index }].signatory_${ signatory.signatoryid }` }
|
||
checked={ signatory.signatoryid === shareholder.signatory_id }
|
||
onChange={ () => changeSignatorySelection(`founded_persons[${ index }]`, { ...shareholder, ...{
|
||
founder_from_list: true,
|
||
signatory_id: signatory.signatoryid,
|
||
lastname: signatory.lastname,
|
||
firstname: signatory.firstname,
|
||
middlename: signatory.middlename,
|
||
} }) }
|
||
disabled={ disabled }
|
||
/>
|
||
<label className="unselectable" style={ disabled ? { opacity: "0.5" } : {} } htmlFor={ `founded_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>Доля в уставном капитале (%)</label>
|
||
<input type="text"
|
||
id={ `founded_persons[${ index }].founder_part` }
|
||
name={ `founded_persons[${ index }].founder_part` }
|
||
value={ shareholder.founder_part }
|
||
placeholder="Укажите размер доли"
|
||
onChange={ (event) => this._handle_onTextFieldChange(event.target.name, event.target.value) }
|
||
required={ true }
|
||
/>
|
||
</div>
|
||
|
||
<div className="form_field">
|
||
<label>Является ли бенифиальным владельцем</label>
|
||
<div className="formgroup">
|
||
<div className="form_field checkbox">
|
||
<input type="radio" hidden=""
|
||
value="1"
|
||
id={ `founded_persons[${ index }].is_beneficial_1` }
|
||
name={ `founded_persons[${ index }].is_beneficial` }
|
||
checked={ shareholder.is_beneficial ? false : true }
|
||
onChange={ (event) => this._handle_onCheckboxFieldChange(event.target.name, parseInt(event.target.value, 10)) }
|
||
/>
|
||
<label className="unselectable" htmlFor={ `founded_persons[${ index }].is_beneficial_1` }>Да</label>
|
||
</div>
|
||
<div className="form_field checkbox">
|
||
<input type="radio" hidden=""
|
||
value="0"
|
||
id={ `founded_persons[${ index }].is_beneficial_0` }
|
||
name={ `founded_persons[${ index }].is_beneficial` }
|
||
checked={ shareholder.is_beneficial ? false : true }
|
||
onChange={ (event) => this._handle_onCheckboxFieldChange(event.target.name, parseInt(event.target.value, 10)) }
|
||
/>
|
||
<label className="unselectable" htmlFor={ `founded_persons[${ index }].is_beneficial_0` }>Нет</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</React.Fragment>
|
||
)
|
||
}
|
||
}
|
||
|
||
class Form_4_Shareholders extends QuestionnaireForm
|
||
{
|
||
constructor(props)
|
||
{
|
||
super(props);
|
||
this.state = {
|
||
founded_persons: [],
|
||
founded_persons_template: {},
|
||
loading: false,
|
||
};
|
||
}
|
||
|
||
static getDerivedStateFromProps(nextProps, prevState)
|
||
{
|
||
return {
|
||
founded_persons: nextProps.founded_persons,
|
||
founded_persons_template: nextProps.founded_persons_template,
|
||
};
|
||
}
|
||
|
||
componentDidMount()
|
||
{
|
||
const { founded_persons_template } = this.state;
|
||
|
||
if(this.state.founded_persons.length === 0)
|
||
{
|
||
this._updateQuestionnaire({
|
||
founded_persons: [{ ...founded_persons_template }],
|
||
});
|
||
}
|
||
}
|
||
|
||
_handle_onAddShareholder = () =>
|
||
{
|
||
const founded_persons = [ ...this.state.founded_persons ];
|
||
const { founded_persons_template } = this.state;
|
||
|
||
if(founded_persons.length < 4)
|
||
{
|
||
founded_persons.push({ ...founded_persons_template });
|
||
|
||
this._updateQuestionnaire({
|
||
founded_persons,
|
||
});
|
||
}
|
||
}
|
||
|
||
_handle_onRemoveShareholder = (index) =>
|
||
{
|
||
const founded_persons = [ ...this.state.founded_persons ];
|
||
|
||
founded_persons.splice(index, 1);
|
||
|
||
this._updateQuestionnaire({
|
||
founded_persons,
|
||
});
|
||
}
|
||
|
||
_handle_onClearSignatorySelection = (name, values) =>
|
||
{
|
||
this._handle_onFieldChange(name, { ...this.state.founded_persons_template , ...values } );
|
||
}
|
||
|
||
_handle_onChangeSignatorySelection = (name, values) =>
|
||
{
|
||
this._handle_onFieldChange(name, { ...values } );
|
||
}
|
||
|
||
_handle_onFormSubmit = (event) =>
|
||
{
|
||
event.preventDefault();
|
||
console.log("Form_4_Shareholders", "_handle_onFormSubmit");
|
||
}
|
||
|
||
_check_fields_disabled = (values) =>
|
||
{
|
||
for(let i in values)
|
||
{
|
||
if(values[i] === "")
|
||
{
|
||
return true;
|
||
}
|
||
}
|
||
|
||
return false;
|
||
}
|
||
|
||
render()
|
||
{
|
||
const { signatories } = this.props;
|
||
const { founded_persons, loading, address, } = this.state;
|
||
|
||
return (
|
||
<form onSubmit={ this._handle_onFormSubmit } className="questionnaire questionnaire_4">
|
||
<p className="title">4. Сведения об участниках (акционерах) и бенефициарных владельцах</p>
|
||
<p>– физических лицах, владеющих долей в уставном капитале более 25%
|
||
<small>*бенефициарный владелец (в соответствии с Федеральным законом от 07.08.2001 No115-ФЗ «О противодействии легализации (отмыванию) доходов, полученных преступным путем, и финансированию терроризма») —
|
||
физическое лицо, которое в конечном счете прямо или косвенно (через третьих лиц) владеет (имеет преобладающее участие более 25 процентов в капитале) вышеуказанным лизингополучателем-юридическим лицом, либо
|
||
имеет возможность контролировать действия вышеуказанного лизингополучателя. Бенефициарным владельцем лизингополучателя-физического лица считается это лицо, за исключением случаев, если имеются основания
|
||
полагать, что бенефициарным владельцем является иное физическое лицо. В случае, если бенефициарным владельцем являются несколько человек, сведения предоставляются в отношении каждого.</small>
|
||
</p>
|
||
|
||
{ founded_persons.map((shareholder, index) => (
|
||
<Shareholder
|
||
key={ index }
|
||
index={ index }
|
||
shareholders={ founded_persons }
|
||
address={ address }
|
||
_handle_onTextFieldChange={ this._handle_onTextFieldChange }
|
||
_handle_onCheckboxFieldChange={ this._handle_onCheckboxFieldChange }
|
||
selectSignatory={ this._handle_onSelectSignatory }
|
||
removeShareholder={ this._handle_onRemoveShareholder }
|
||
clearSignatorySelection={ this._handle_onClearSignatorySelection }
|
||
changeSignatorySelection={ this._handle_onChangeSignatorySelection }
|
||
signatories={ signatories }
|
||
/>
|
||
)) }
|
||
|
||
<div className="action">
|
||
<button className="button button-blue" disabled={ false } onClick={ (event) => { event.preventDefault(); this._handle_onAddShareholder(); }}>Добавить еще одного владельца</button>
|
||
<button type="submit" className="button button-blue" disabled={ false }>
|
||
{ 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>
|
||
)
|
||
}
|
||
}
|
||
|
||
function mapStateToProps(state, ownProps)
|
||
{
|
||
return {
|
||
founded_persons: state.questionnaire.founded_persons,
|
||
founded_persons_template: state.questionnaire.founded_persons_template,
|
||
}
|
||
}
|
||
|
||
export const getServerSideProps = reduxWrapper.getServerSideProps(store =>
|
||
async ({ req, res, query }) =>
|
||
{
|
||
}
|
||
);
|
||
|
||
export default connect(mapStateToProps)(Form_4_Shareholders); |