evoleasing-account/components/questionnaire/forms/Form_2_Contacts/index.js

import React from "react";
import Head from 'next/head';
import Image from 'next/image';
import Link from "next/link";
import cookie from 'cookie';
import numeral from "numeral";
import pluralize from 'pluralize-ru';
import Select from 'react-select'
import { SpinnerCircular } from 'spinners-react';
import { connect } from "react-redux";
import { withRouter } from 'next/router';

import QuestionnaireForm from "../QuestionnaireForm";
import AddressSuggestsSelect from "../AddressSuggestsSelect";
import { reduxWrapper } from '../../../../store';

class Form_2_Contacts extends QuestionnaireForm 
{
	constructor(props)
	{
		super(props);
		this.state = {
			address_type: "legal", 
			address: "", 
			phone_check_loading: false, 
			phone_number_format_error: false, 

			fact_address: { 
				name: "", 
				fias_id: "", 
			}, 
			legal_address: { 
				title: "", 
				fias_id: "", 
			}, 
			postal_address: { 
				name: "", 
				fias_id: "", 
			}, 
		};
	}

	static getDerivedStateFromProps(nextProps, prevState)
	{
		return {
			observer: nextProps.observer, 
			user: nextProps.user, 
		};
	}

	componentDidMount()
	{
	}

	_handle_onFormSubmit = (event) => 
	{
		event.preventDefault();
		console.log("Form_2_Contacts", "_handle_onFormSubmit");
	}

	_check_fields_disabled = (values) => 
	{
		for(let i in values)
		{
			if(values[i] === "")
			{
				return true;
			}
		}

		return false;
	}

	render()
	{
		const { address_type, fact_address, postal_address, phone_check_loading, } = this.state;

		return (
			<React.Fragment>
				<form onSubmit={ this._handle_onFormSubmit } className="questionnaire questionnaire_2">
					<p className="title">2. Адреса лизингополучателя</p>

					<div className="form_field">
						<label>Фактический адрес</label>
						<AddressSuggestsSelect 
							value={ fact_address.title } 
							fias={ fact_address.fias_id } 
							onChange={ (data) => this._handle_onTextFieldChange("fact_address", data) } 
						/>
						<p>для юр.диц -  заполняется, если отличается от указанного в ЕГРЮЛ; для ИП - заполняется всегда</p>
					</div>

					<p>Прошу оригиналы  счетов-фактур и актов отказанных услуг по заключенному договору лизинга направлять:</p>

					<div className="form_field">
						<div style={{ width: "100%" }}>
							<div className="form_field checkbox">
								<input type="radio" hidden="" 
									value="legal" 
									id="address_type_legal" 
									name="address_type" 
									checked={ address_type === "legal" ? true : false } 
									onChange={ (event) => this._handle_onCheckboxFieldChange(event.target.name, event.target.value) } 
								/>
								<label htmlFor="address_type_legal" className="unselectable">По юридическому адресу, указанному в ЕГРЮЛ (для юрлиц)</label>
							</div>

							<div className="form_field checkbox">
								<input type="radio" hidden="" 
									value="fact" 
									id="address_type_fact" 
									name="address_type" 
									checked={ address_type === "fact" ? true : false } 
									onChange={ (event) => this._handle_onCheckboxFieldChange(event.target.name, event.target.value) } 
								/>
								<label htmlFor="address_type_fact" className="unselectable">По фактическому адресу, указанному в настоящей анкете</label>
							</div>

							<div className="form_field checkbox">
								<input type="radio" hidden="" 
									value="postal" 
									id="address_type_postal" 
									name="address_type" 
									checked={ address_type === "postal" ? true : false } 
									onChange={ (event) => this._handle_onCheckboxFieldChange(event.target.name, event.target.value) }
								/>
								<label htmlFor="address_type_postal" className="unselectable" style={{ width: "100%" }}>
									<span>По следующему адресу</span>
									<AddressSuggestsSelect 
										value={ postal_address.title } 
										fias={ postal_address.fias_id } 
										onChange={ (data) => this._handle_onTextFieldChange("postal_address", data) } 
										disabled={ address_type === "postal" ? false : true } 
									/>
								</label>
							</div>
						</div> 
					</div>

					<div className="action">
						<button type="submit" className="button button-blue" disabled={ false }>
							{ phone_check_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 {
		fact_address: state.questionnaire.fact_address, 
		legal_address: state.questionnaire.legal_address, 
		postal_address: state.questionnaire.postal_address, 
	}
}

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

export default connect(mapStateToProps)(Form_2_Contacts);