update contract graphic change

actions/contractActions.js

@@ -473,7 +473,7 @@ export const getContractGraphicChangeOptions = ({ dispatch, number, variants })
 		{
 			console.log("ACTION", "getContractGraphicChangeOptions", "response.data", response.data);
 
-			dispatch({ type: actionTypes.CONTRACT_CHANGE, data: { options: response.data } });
+			dispatch({ type: actionTypes.CONTRACT_CHANGE, data: { options: response.data.planpayments[0] } });
 			resolve();
 		})
 		.catch((error) => 
@@ -485,22 +485,21 @@ export const getContractGraphicChangeOptions = ({ dispatch, number, variants })
 	});
 }
 
-export const getContractGraphicChangeCalculate = ({ dispatch, number, calculation }) => 
+export const getContractGraphicChangeCalculate = (calculation) => 
 {
-	console.log("ACTION", "getContractGraphicChangeCurrent", { number });
+	console.log("ACTION", "getContractGraphicChangeCurrent", calculation);
 
 	return new Promise((resolve, reject) => 
 	{
-		axios.post(`${ process.env.NEXT_PUBLIC_SELF_API_HOST }/api/contract/change/calculations`, { number }, 
+		
+		axios.post(`${ process.env.NEXT_PUBLIC_SELF_API_HOST }/api/contract/change/graphic/calculate`, { calculation }, 
 		{
 			withCredentials: true, 
 		})
 		.then(async (response) => 
 		{
 			console.log("ACTION", "getContractGraphicChangeCurrent", "response.data", response.data);
-
+			resolve(response.data);
-			dispatch({ type: actionTypes.CONTRACT_CHANGE, data: { calculations: response.data.pre_calculations } });
-			resolve();
 		})
 		.catch((error) => 
 		{

actions/eventsActions.js

@@ -33,12 +33,11 @@ export const getEvents = ({ dispatch, type, contract }) =>
 		})
 		.then((response) => 
 		{
-			console.log("getEvents", "response", response.data);
+			console.log("ACTION", "getEvents()", "response", response.data);
 			const events = response.data;
 			const filtered_events = [];
 
-			console.log("events");
+			console.log("ACTION", "getEvents()", "events", events);
-			console.log(events);
 
 			dispatch({ type: actionTypes.EVENTS, data: { list: events, loaded: true } });
 			resolve();

lib/CRMRequestGet/index.js

@@ -7,7 +7,7 @@ import jwt from 'jsonwebtoken';
 import { cors } from '../cors';
 import { inspect } from 'util';
 
-export default async function CRMRequest(req, res, path, params) 
+export default async function CRMRequestGet(req, res, path, params) 
 {
 	await cors(req, res);
 
@@ -16,7 +16,7 @@ export default async function CRMRequest(req, res, path, params)
 		const cookies = cookie.parse(req.headers?.cookie ? req.headers?.cookie : "");
 
 		console.log("-".repeat(50));
-		console.log("CRMRequest", "req.body");
+		console.log("CRMRequestGet", "req.body");
 		console.log(req.body);
 
 		if(cookies.jwt !== undefined && cookies.jwt !== null)
@@ -25,7 +25,7 @@ export default async function CRMRequest(req, res, path, params)
 			console.log(cookies.jwt);
 
 			var client_jwt_decoded = jwt.verify(cookies.jwt, process.env.JWT_SECRET_CLIENT);
-			var crm_jwt = jwt.sign(client_jwt_decoded, process.env.JWT_SECRET_CRM, { noTimestamp: true });
+			var crm_jwt = jwt.sign({ acc_number: client_jwt_decoded.acc_number }, process.env.JWT_SECRET_CRM, { noTimestamp: true });
 
 			console.log("client_jwt_decoded", client_jwt_decoded);
 			console.log("crm_jwt", crm_jwt);
@@ -36,7 +36,7 @@ export default async function CRMRequest(req, res, path, params)
 			try
 			{
 				await axios.get(path, {
-					params: { ...client_jwt_decoded, ...params }, 
+					params: { ...{ acc_number: client_jwt_decoded.acc_number }, ...params }, 
 					headers: {
 						"Authorization": `Bearer ${ crm_jwt }`, 
 					}, 

lib/CRMRequestPost/index.js

@@ -0,0 +1,68 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import axios from 'axios';
+import { Cookies } from 'react-cookie';
+import cookie from 'cookie';
+import moment from 'moment';
+import jwt from 'jsonwebtoken';
+import { cors } from '../cors';
+import { inspect } from 'util';
+
+export default async function CRMRequestPost(req, res, path, params) 
+{
+	await cors(req, res);
+
+	if(req.headers.cookie !== undefined)
+	{
+		const cookies = cookie.parse(req.headers?.cookie ? req.headers?.cookie : "");
+
+		console.log("-".repeat(50));
+		console.log("CRMRequestPost", "req.body");
+		console.log(req.body);
+
+		if(cookies.jwt !== undefined && cookies.jwt !== null)
+		{
+			console.log("cookies.jwt");
+			console.log(cookies.jwt);
+
+			var client_jwt_decoded = jwt.verify(cookies.jwt, process.env.JWT_SECRET_CLIENT);
+			var crm_jwt = jwt.sign({ acc_number: client_jwt_decoded.acc_number }, process.env.JWT_SECRET_CRM, { noTimestamp: true });
+
+			const payload = { ...{ acc_number: client_jwt_decoded.acc_number }, ...params };
+			console.log("path", path);
+			console.log("payload", payload);
+
+			try
+			{
+				await axios.post(path, payload, 
+				{
+					headers: {
+						//"Content-Type": "application/json", 
+						"Authorization": `Bearer ${ crm_jwt }`, 
+					}, 
+					withCredentials: true, 
+				})
+				.then((crm_response) => 
+				{
+					console.log("crm_response for", path);
+					console.log(inspect(crm_response.data, true, null, true));
+
+					res.status(200).json(crm_response.data);
+				})
+				.catch((error) => 
+				{
+					console.error(error);
+					res.status(500);
+				});
+			}
+			catch(e)
+			{
+				console.error(e);
+				res.status(500);
+			}
+		}
+		else
+		{
+			res.status(403);
+		}
+	}
+}

pages/api/contract/change/calculations.js

@@ -1,7 +1,7 @@
 // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
-import CRMRequest from '../../../../lib/CRMRequest';
+import CRMRequestGet from '../../../../lib/CRMRequestGet';
 
 export default async function handler(req, res) 
 {
-	await CRMRequest(req, res, `${ process.env.CRM_API_HOST }/lk/add-contract/GetPreCalculations`, { contract_number: req.body.number });
+	await CRMRequestGet(req, res, `${ process.env.CRM_API_HOST }/lk/add-contract/GetPreCalculations`, { contract_number: req.body.number });
 }

pages/api/contract/change/graphic/calculate.js

@@ -1,7 +1,9 @@
 // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
-import CRMRequest from '../../../../../lib/CRMRequest';
+import CRMRequestPost from '../../../../../lib/CRMRequestPost';
 
 export default async function handler(req, res) 
 {
-	await CRMRequest(req, res, `${ process.env.CRM_API_HOST }/lk/add-contract/CreateCalculation`, { contract_number: req.body.number });
+	console.log("WTF BODY");
+	console.log(req.body);
+	await CRMRequestPost(req, res, `${ process.env.CRM_API_HOST }/lk/add-contract/CreateCalculation`, req.body.calculation);
 }

pages/api/contract/change/graphic/calculation.js

@@ -1,7 +1,7 @@
 // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
-import CRMRequest from '../../../../../lib/CRMRequest';
+import CRMRequestGet from '../../../../../lib/CRMRequestGet';
 
 export default async function handler(req, res) 
 {
-	await CRMRequest(req, res, `${ process.env.CRM_API_HOST }/lk/add-contract/GetPreCalculationGraph`, { addcontract_number: req.body.calculation });
+	await CRMRequestGet(req, res, `${ process.env.CRM_API_HOST }/lk/add-contract/GetPreCalculationGraph`, { addcontract_number: req.body.calculation });
 }

pages/api/contract/change/graphic/current.js

@@ -1,7 +1,7 @@
 // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
-import CRMRequest from '../../../../../lib/CRMRequest';
+import CRMRequestGet from '../../../../../lib/CRMRequestGet';
 
 export default async function handler(req, res) 
 {
-	await CRMRequest(req, res, `${ process.env.CRM_API_HOST }/lk/add-contract/GetCurrentGraph`, { contract_number: req.body.number });
+	await CRMRequestGet(req, res, `${ process.env.CRM_API_HOST }/lk/add-contract/GetCurrentGraph`, { contract_number: req.body.number });
 }

pages/api/contract/change/options.js

@@ -1,5 +1,5 @@
 // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
-import CRMRequest from '../../../../lib/CRMRequest';
+import CRMRequestGet from '../../../../lib/CRMRequestGet';
 
 export default async function handler(req, res) 
 {
@@ -8,5 +8,5 @@ export default async function handler(req, res)
 	console.log(req.body.variants);
 	console.log("-".repeat(50));
 
-	await CRMRequest(req, res, `${ process.env.CRM_API_HOST }/lk/add-contract/GetTypeOptions`, { ...{ contract_number: req.body.number }, ...req.body.variants });
+	await CRMRequestGet(req, res, `${ process.env.CRM_API_HOST }/lk/add-contract/GetTypeOptions`, { ...{ contract_number: req.body.number }, ...req.body.variants });
 }

pages/api/contract/change/signatories.js

@@ -1,7 +1,7 @@
 // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
-import CRMRequest from '../../../../lib/CRMRequest';
+import CRMRequestGet from '../../../../lib/CRMRequestGet';
 
 export default async function handler(req, res) 
 {
-	await CRMRequest(req, res, `${ process.env.CRM_API_HOST }/lk/add-contract/GetSignatories`, {});
+	await CRMRequestGet(req, res, `${ process.env.CRM_API_HOST }/lk/add-contract/GetSignatories`, {});
 }

pages/api/contract/change/variants.js

@@ -1,5 +1,5 @@
 // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
-import CRMRequest from '../../../../lib/CRMRequest';
+import CRMRequestGet from '../../../../lib/CRMRequestGet';
 
 export default async function handler(req, res) 
 {
@@ -7,5 +7,5 @@ export default async function handler(req, res)
 	console.log(req.body.variants);
 	console.log("-".repeat(50));
 
-	await CRMRequest(req, res, `${ process.env.CRM_API_HOST }/lk/add-contract/GetAvaliableGraphChangeTypes`, { ...{ contract_number: req.body.number }, ...req.body.variants });
+	await CRMRequestGet(req, res, `${ process.env.CRM_API_HOST }/lk/add-contract/GetAvaliableGraphChangeTypes`, { ...{ contract_number: req.body.number }, ...req.body.variants });
 }

pages/components/Company/index.js

@@ -42,7 +42,7 @@ class Company extends React.Component
 
 		return (
 			<div className="right company-dropdown" onClick={ this._handleOnClick }>
-				<p align="right" className={ companies !== null && companies.length > 1 && "arrow" }>{/*  className="arrow" */}
+				<p align="right" className={ companies !== null && companies.length > 1 ? "arrow" : "" }>{/*  className="arrow" */}
 					<b>{ company.title }</b><br/>
 					{company.inn != null && <span>ИНН: { company.inn } </span>}
 					{company.kpp != null && <span>КПП: { company.kpp }</span>}

pages/components/Header/NotificationsList/index.js

@@ -15,7 +15,7 @@ export default class NotificationsList extends React.Component
 	render() 
 	{
 		const { events } = this.props;
-		console.log("events", events);
+		console.log("NotificationsList", "events", events);
 
 		return (
 			<>

pages/components/Header/index.js

@@ -143,7 +143,7 @@ class Header extends React.Component
 	render() 
 	{
 		const { observer, menuOpened, notificationsOpened, messagesOpened, events, events_loaded, appeals } = this.state;
-		console.log("events", events);
+		console.log("Header", "events", events);
 
 		return (
 			<header>

pages/contract/change/components/Options/index.js

@@ -1,19 +1,480 @@
 import React from "react";
-import { getContractGraphicChangeOptions } from "../../../../../actions";
+import { SpinnerCircular } from "spinners-react";
+import moment from "moment";
+import pluralize from 'pluralize-ru';
+import numeral from "numeral";
+
 import DateInput from "../../../../components/DatePicker";
 
+import { getContractGraphicChangeOptions, getContractGraphicChangeCalculate } from "../../../../../actions";
+
+class PaymentDate extends React.Component
+{
+	constructor(props)
+	{
+		super(props);
+		this.state = {
+			value: null, 
+			min: null, 
+			max: null, 
+		}
+	}
+
+	componentDidMount()
+	{
+		const { option, onOption } = this.props;
+
+		this.setState({
+			value: moment(option.value).toDate(), 
+			min: moment(option.from).toDate(), 
+			max: moment(option.to).toDate(), 
+		}, () => 
+		{
+			onOption(this.state.value);
+		});
+	}
+
+	_handle_onChange = (value) => 
+	{
+		const { onOption } = this.props;
+
+		this.setState({ value }, () => 
+		{
+			onOption(value);
+		});
+	}
+
+	render()
+	{
+		const { value, min, max } = this.state;
+
+		return (
+			<div className="form_field">
+				<label>Дата платежа</label>
+				<DateInput 
+					placeholder="" 
+					value={ value } 
+					min={ min } 
+					max={ max } 
+					id={"date_to"} 
+					onChange={ this._handle_onChange } 
+				/>
+			</div>
+		)
+	}
+}
+
+class FixLastPayment extends React.Component
+{
+	constructor(props)
+	{
+		super(props);
+		this.state = {
+			value: false, 
+		};
+	}
+
+	componentDidMount()
+	{
+		const { option, onOption } = this.props;
+
+		this.setState({
+			value: option.value, 
+		}, () => 
+		{
+			onOption(this.state.value);
+		});
+	}
+
+	_handle_onChange = () => 
+	{
+		const { onOption } = this.props;
+
+		this.setState({ value: this.state.value ? false : true }, () => 
+		{
+			onOption(this.state.value);
+		});
+	}
+
+	render()
+	{
+		const { value } = this.state;
+
+		return (
+			<div className="form_field">
+				<input type="checkbox" hidden id="fix_pay" name="fix_pay" checked={ value } onChange={ this._handle_onChange }/>
+				<label htmlFor="fix_pay">
+					Фиксировать послединий платеж
+				</label>
+				<div className="help_tooltip">
+					<div className="help_icon">
+						<svg width={ 24 } height={ 24 } fill="none" xmlns="http://www.w3.org/2000/svg" >
+						<path d="M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18Z" stroke="#8E94A7" strokeWidth={ 2 } strokeLinecap="round" strokeLinejoin="round" />
+						<path d="M11.25 11.25H12v5.25h.75" stroke="#8E94A7" strokeWidth={ 2 } strokeLinecap="round" strokeLinejoin="round" />
+						<path d="M12 9a1.125 1.125 0 1 0 0-2.25A1.125 1.125 0 0 0 12 9Z" fill="#8E94A7" />
+						</svg>
+					</div>
+					<div className="help_content ">
+						{" "}
+						{/* opened */}
+						<div>
+							<p>Какой-то описательный текст</p>
+							<p className="button">Закрыть</p>
+						</div>
+					</div>
+				</div>
+			</div>
+		)
+	}
+}
+
+class DateOffestType extends React.Component
+{
+	constructor(props)
+	{
+		super(props);
+		this.state = {
+			value: null, 
+		}
+	}
+
+	componentDidMount()
+	{
+		const { option, onOption } = this.props;
+
+		this.setState({
+			value: parseInt(option.value, 10), 
+		}, () => 
+		{
+			onOption(this.state.value);
+		});
+	}
+
+	_handle_onChange = (value) => 
+	{
+		const { onOption } = this.props;
+
+		this.setState({ value: parseInt(value, 10) }, () => 
+		{
+			onOption(this.state.value);
+		});
+	}
+
+	render()
+	{
+		const { value } = this.state;
+
+		return (
+			<div className="form_field">
+				<label>Тип каникул</label>
+				<div className="form_field">
+					<input type="radio" hidden id="weeekend_type_1" name="weeekend_type" checked={ value === 100000001 ? true : false } onChange={ () => this._handle_onChange(100000001) }/>
+					<label htmlFor="weeekend_type_1">С увеличением срока</label>
+				</div>
+				<div className="form_field">
+					<input type="radio" hidden id="weeekend_type_2" name="weeekend_type" checked={ value === 100000000 ? true : false } onChange={ () => this._handle_onChange(100000000) }/>
+					<label htmlFor="weeekend_type_2">Без изменения срока</label>
+				</div>
+			</div>
+		)
+	}
+}
+
+class PeriodSelector extends React.Component
+{
+	constructor(props)
+	{
+		super(props);
+		this.state = {
+			value: null, 
+			periods: [], 
+		}
+	}
+
+	componentDidMount()
+	{
+		const { option, onOption } = this.props;
+		const periods = [];
+
+		if(option.min !== undefined && option.min !== null)
+		{
+			for(let i = parseInt(option.min, 10); i <= parseInt(option.max, 10); i++)
+			{
+				periods.push(i);
+			}	
+
+			this.setState({
+				value: periods[0], periods 
+			}, () => 
+			{
+				onOption(this.state.value);
+			});
+		}
+	}
+
+	_handle_onChange = (event) => 
+	{
+		const { onOption } = this.props;
+
+		this.setState({ value: parseInt(event.target.value, 10) }, () => 
+		{
+			onOption(this.state.value);
+		});
+	}
+
+	render()
+	{
+		const { value, periods } = this.state;
+
+		if(value !== null)
+		{
+			return (
+				<div className="form_field">
+					<label>Увеличить график на</label>
+					<select value={ value } onChange={ this._handle_onChange }>
+						{ periods.map((period, index) => (
+							<option key={ index } value={ period }>{ index + 1 } { pluralize( index + 1, 'месяца', 'месяц', 'месяца', 'месяцев') } ({ period } { pluralize( period, 'платежа', 'платеж', 'платежа', 'платежей') })</option>
+						)) }
+					</select>
+				</div>
+			)
+		}
+
+		return null;
+	}
+}
+
+class SumSelector extends React.Component
+{
+	constructor(props)
+	{
+		super(props);
+		this.state = {
+			value: "", 
+			min: null, 
+			max: null, 
+		}
+	}
+
+	componentDidMount()
+	{
+		const { option, onOption } = this.props;
+
+		this.setState({
+			value: option.min, 
+			min: option.min, 
+			max: option.max,  
+		}, () => 
+		{
+			onOption(this.state.value, false);
+		});
+	}
+
+	_handle_onChange = (event) => 
+	{
+		const { onOption } = this.props;
+		const { min, max } = this.state;
+
+		const value = parseFloat(event.target.value.replace('/[^\d]/m', ''));
+		if(value >= min && value <= max && !isNaN(value))
+		{
+			this.setState({ value: value }, () => 
+			{
+				onOption(this.state.value, false);
+			});
+		}
+		else
+		{
+			onOption(this.state.value, true);
+		}
+	}
+
+	render()
+	{
+		const { value, min, max } = this.state;
+
+		return (
+			<div className="form_field">
+				<label>Увеличить платеж на (ЧДП)</label>
+				<input type="number" placeholder="Укажите сумму" defaultValue={ value } onChange={ this._handle_onChange }/>
+				<div style={{ position: "absolute", left: 214, top: 46, fontSize: 12 }}>от { numeral(min).format(' ., ') }&nbsp;₽</div>
+				<div style={{ position: "absolute", left: 440, top: 46, fontSize: 12 }}>до { numeral(max).format(' ., ') }&nbsp;₽</div>
+				<div className="help_tooltip">
+					<div className="help_icon">
+						<svg width={ 24 } height={ 24 } fill="none" xmlns="http://www.w3.org/2000/svg">
+							<path d="M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18Z" stroke="#8E94A7" strokeWidth={ 2 } strokeLinecap="round" strokeLinejoin="round" />
+							<path d="M11.25 11.25H12v5.25h.75" stroke="#8E94A7" strokeWidth={ 2 } strokeLinecap="round" strokeLinejoin="round" />
+							<path d="M12 9a1.125 1.125 0 1 0 0-2.25A1.125 1.125 0 0 0 12 9Z" fill="#8E94A7" />
+						</svg>
+					</div>
+					<div className="help_content ">
+						{" "}
+						{/* opened */}
+						<div>
+							<p>Какой-то описательный текст</p>
+							<p className="button">Закрыть</p>
+						</div>
+					</div>
+				</div>
+			</div>
+		)
+	}
+}
+
+class InsurancePriceSelector extends React.Component
+{
+	constructor(props)
+	{
+		super(props);
+		this.state = {
+			value: "", 
+			min: null, 
+			max: null, 
+		}
+	}
+
+	componentDidMount()
+	{
+		const { option, onOption } = this.props;
+
+		this.setState({
+			value: option.min, 
+			min: option.min, 
+			max: option.max,  
+		}, () => 
+		{
+			onOption(this.state.value, false);
+		});
+	}
+
+	_handle_onChange = (event) => 
+	{
+		const { onOption } = this.props;
+		const { min, max } = this.state;
+
+		const value = parseFloat(event.target.value.replace('/[^\d]/m', ''));
+		if(value >= min && value <= max && !isNaN(value))
+		{
+			this.setState({ value: value }, () => 
+			{
+				onOption(this.state.value, false);
+			});
+		}
+		else
+		{
+			onOption(this.state.value, true);
+		}
+	}
+
+	render()
+	{
+		const { value, min, max } = this.state;
+
+		return (
+			<div className="form_field">
+				<label>Сумма пролонгации</label>
+				<input type="number" placeholder="Укажите сумму" defaultValue={ value } onChange={ this._handle_onChange }/>
+				<div style={{ position: "absolute", left: 214, top: 46, fontSize: 12 }}>от { numeral(min).format(' ., ') }&nbsp;₽</div>
+				<div style={{ position: "absolute", left: 440, top: 46, fontSize: 12 }}>до { numeral(max).format(' ., ') }&nbsp;₽</div>
+				<div className="help_tooltip">
+					<div className="help_icon">
+						<svg width={ 24 } height={ 24 } fill="none" xmlns="http://www.w3.org/2000/svg">
+							<path d="M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18Z" stroke="#8E94A7" strokeWidth={ 2 } strokeLinecap="round" strokeLinejoin="round" />
+							<path d="M11.25 11.25H12v5.25h.75" stroke="#8E94A7" strokeWidth={ 2 } strokeLinecap="round" strokeLinejoin="round" />
+							<path d="M12 9a1.125 1.125 0 1 0 0-2.25A1.125 1.125 0 0 0 12 9Z" fill="#8E94A7" />
+						</svg>
+					</div>
+					<div className="help_content ">
+						{" "}
+						{/* opened */}
+						<div>
+							<p>Какой-то описательный текст</p>
+							<p className="button">Закрыть</p>
+						</div>
+					</div>
+				</div>
+			</div>
+		)
+	}
+}
+
+class InsuranceDateFromSelector extends React.Component
+{
+	constructor(props)
+	{
+		super(props);
+		this.state = {
+			value: null, 
+			min: null, 
+			max: null, 
+		}
+	}
+
+	componentDidMount()
+	{
+		const { option, onOption } = this.props;
+
+		this.setState({
+			value: moment(option.value !== null ? option.value : option.from).toDate(), 
+			min: moment(option.from).toDate(), 
+			max: moment(option.to).toDate(), 
+		}, () => 
+		{
+			onOption(this.state.value);
+		});
+	}
+
+	_handle_onChange = (value) => 
+	{
+		const { onOption } = this.props;
+
+		this.setState({ value }, () => 
+		{
+			onOption(value);
+		});
+	}
+
+	render()
+	{
+		const { value, min, max } = this.state;
+
+		return (
+			<div className="form_field">
+				<label>Дата начала пролонгации</label>
+				<DateInput 
+					placeholder="" 
+					value={ value } 
+					min={ min } 
+					max={ max } 
+					id={"date_to"} 
+					onChange={ this._handle_onChange } 
+				/>
+			</div>
+		)
+	}
+}
+
 export default class Options extends React.Component 
 {
 	constructor(props) 
 	{
 		super(props);
 		this.state = {
+			loading: true, 
+			sending: false, 
 			date: null, 
 			car: null, 
 			contract_date: null, 
 			agreement: null, 
 			rules: null, 
-			loading: true, 
+			number_paydate: null, 
+			period_new: null, 
+			fix_last_payment_available: false, 
+			date_offset_type: null, 
+			sum: null, 
+			insurance_price_result: null, 
+			datefrom: null, 
+			errors: {}, 
 		};
 	}
 
@@ -30,12 +491,10 @@ export default class Options extends React.Component
 			}
 		}
 
-		console.log("varianst_for_options", varianst_for_options);
-
 		getContractGraphicChangeOptions({ dispatch, number, variants: varianst_for_options })
 		.then(() => 
 		{
-			
+			this.setState({ loading: false });
 		})
 		.catch(() => 
 		{
@@ -51,95 +510,163 @@ export default class Options extends React.Component
 
 	_handle_onCalculate = (event) => 
 	{
+		const { sending, number_paydate, period_new, fix_last_payment_available, date_offset_type, sum, insurance_price_result, datefrom, } = this.state;
+		const { number, options, variants, onCalculate } = this.props;
+
 		event.preventDefault();
-		this.props.onCalculate();
+		console.log(this.props);
+
+		if(!sending)
+		{
+			const v = {};
+			for(let i in variants.types) { v[ variants.types[i].name ] = variants.types[i].value; }
+			const payload = { 
+				...{ contract_number: number }, 
+				...v, 
+				...{ 
+					number_paydate: number_paydate !== null ? moment(number_paydate).format() : null, 
+					period_new, 
+					fix_last_payment_available, 
+					date_offset_type, 
+					sum: sum === null ? 0 : sum, 
+					insurance_price_result: insurance_price_result === null ? 0 : insurance_price_result, 
+					datefrom: datefrom !== null ? moment(datefrom).format() : null, 
+					early_redemption_change: false, 
+					number_planpayment: options.number_planpayment.value, 
+				} 
+			};
+			console.log(payload);
+
+			this.setState({ sending: true, }, () => 
+			{
+				getContractGraphicChangeCalculate(payload)
+				.then((calculation) => 
+				{
+					console.log("calculationcalculationcalculationcalculationcalculation");
+					console.log(calculation);
+
+					/*
+					onCalculate()
+					.then(() => 
+					{
+	
+					})
+					.catch(() => 
+					{
+						this.setState({ sending: false, });		
+					});
+					*/
+				})
+				.catch(() => 
+				{
+				});
+			});	
+		}
+	}
+
+	_handle_onPaymentDateChange = (date) => 
+	{
+		this.setState({ number_paydate: date });
+	}
+
+	_handle_onFixLastPaymentChange = (value) => 
+	{
+		this.setState({ fix_last_payment_available: value });
+	}
+
+	_handle_onDateOffsetTypeChange = (value) => 
+	{
+		this.setState({ date_offset_type: value });
+	}
+
+	_handle_onPeriodChange = (value) => 
+	{
+		this.setState({ period_new: value });
+	}
+
+	_handle_onSumChange = (value, error) => 
+	{
+		const { errors } = this.state;
+
+		if(error) { errors['sum'] = true; } else { delete errors['sum']; }
+
+		this.setState({ sum: value, errors });
+	}
+
+	_handle_onInsurancePriceChange = (value, error) => 
+	{
+		const { errors } = this.state;
+
+		if(error) { errors['insurance_price_result'] = true; } else { delete errors['insurance_price_result']; }
+
+		this.setState({ insurance_price_result: value, errors });
+	}
+
+	_handle_onInsuranceDateFromChange = (date) => 
+	{
+		this.setState({ datefrom: date });
+	}
+
+	_checkAllowCalculate = () => 
+	{
+		const { errors } = this.state;
+
+		for(let i in errors)
+		{
+			if(errors[i])
+			{
+				return false;
+			}
+		}
+
+		return true;
 	}
 
 	render() 
 	{
-		const { loading, date, car, contract_date, agreement, rules } = this.state;
+		const { loading, sending, } = this.state;
-		const { variants } = this.props;
+		const { variants, options } = this.props;
-
-		console.log("Change", "Options", "render()", "variants", variants);
 
 		return (
 			<div className="block">
 				<p className="title">Параметры опций изменений графика платежей</p>
-				<form className="calc">
+				{ loading ? (
-					<div className="form_field">
+					<div style={{ position: "absolute", left: "50%", top: "50%" }}>
-						<label>Дата платежа</label>
+						<SpinnerCircular size={ 90 } thickness={ 51 } speed={ 100 } color="rgba(28, 1, 169, 1)" secondaryColor="rgba(236, 239, 244, 1)" style={{ marginTop: "-45px", marginLeft: "-45px", }}/>
-						<DateInput placeholder="" id={"date_to"} onChange={ (date) => this.setState({ date_to: date }) } />
 					</div>
-					<div className="form_field">
+				) : (
-						<input type="checkbox" hidden id="fix_pay" name="fix_pay" />
+					<form className="calc">
-						<label htmlFor="fix_pay">
+						{ options !== undefined && options !== null && options.number_paydate !== undefined && options.number_paydate !== null && options.number_paydate.visible && (
-							Фиксировать послединий платеж
+							<PaymentDate option={ options.number_paydate } onOption={ this._handle_onPaymentDateChange } />
-						</label>
+						) }
-						<div className="help_tooltip">
+						{ options !== undefined && options !== null && options.fix_last_payment_available !== undefined && options.fix_last_payment_available !== null && options.fix_last_payment_available.visible && (
-							<div className="help_icon">
+							<FixLastPayment option={ options.fix_last_payment_available } onOption={ this._handle_onFixLastPaymentChange } />
-								<svg width={ 24 } height={ 24 } fill="none" xmlns="http://www.w3.org/2000/svg" >
+						) }
-								<path d="M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18Z" stroke="#8E94A7" strokeWidth={ 2 } strokeLinecap="round" strokeLinejoin="round" />
+						{ options !== undefined && options !== null && options.date_offset_type !== undefined && options.date_offset_type !== null && options.date_offset_type.visible && (
-								<path d="M11.25 11.25H12v5.25h.75" stroke="#8E94A7" strokeWidth={ 2 } strokeLinecap="round" strokeLinejoin="round" />
+							<DateOffestType option={ options.date_offset_type } onOption={ this._handle_onDateOffsetTypeChange } />
-								<path d="M12 9a1.125 1.125 0 1 0 0-2.25A1.125 1.125 0 0 0 12 9Z" fill="#8E94A7" />
+						) }
-								</svg>
+						{ options !== undefined && options !== null && options.period_new !== undefined && options.period_new !== null && options.period_new.visible && (
-							</div>
+							<PeriodSelector option={ options.period_new } onOption={ this._handle_onPeriodChange } />
-							<div className="help_content ">
+						) }
-								{" "}
+						{ options !== undefined && options !== null && options.sum !== undefined && options.sum !== null && options.sum.visible && (
-								{/* opened */}
+							<SumSelector option={ options.sum } onOption={ this._handle_onSumChange } />
-								<div>
+						) }
-									<p>Какой-то описательный текст</p>
+						{ options !== undefined && options !== null && options.insurance_price_result !== undefined && options.insurance_price_result !== null && options.insurance_price_result.visible && (
-									<p className="button">Закрыть</p>
+							<InsurancePriceSelector option={ options.insurance_price_result } onOption={ this._handle_onInsurancePriceChange } /> 
-								</div>
+						) }
-							</div>
+						{ options !== undefined && options !== null && options.datefrom !== undefined && options.datefrom !== null && options.datefrom.visible && (
+							<InsuranceDateFromSelector option={ options.datefrom } onOption={ this._handle_onInsuranceDateFromChange } /> 
+						) }
+						<div className="btn_group">
+							<button className="button button-gray" onClick={ this._handle_onBack }>Назад</button>
+							<button className="button button-blue" onClick={ this._handle_onCalculate } disabled={ this._checkAllowCalculate() ? false : true } style={{ minWidth: 350 }}>
+								{ sending ? (
+									<SpinnerCircular size={24} thickness={100} speed={100} color="rgba(255, 255, 255, 1)" secondaryColor="rgba(255, 255, 255, 0.5)" style={{ marginTop: "0px" }}/>
+								) : ( "Рассчитать график" ) }
+							</button>
 						</div>
-					</div>
+					</form>
-					<div className="form_field">
+				) }
-						<label>Тип каникул</label>
-						<div className="form_field">
-							<input type="radio" hidden id="weeekend_type_1" name="weeekend_type" />
-							<label htmlFor="weeekend_type_1">
-								Фиксировать послединий платеж
-							</label>
-						</div>
-						<div className="form_field">
-							<input type="radio" hidden id="weeekend_type_2" name="weeekend_type" />
-							<label htmlFor="weeekend_type_2">
-								Фиксировать послединий платеж
-							</label>
-						</div>
-					</div>
-					<div className="form_field">
-						<label>Увеличить график на</label>
-						<select>
-							<option>1 месяц (37 платеж)</option>
-						</select>
-					</div>
-					<div className="form_field">
-						<label>Увеличить график на</label>
-						<input type="number" placeholder="Укажите сумму" />
-						<div className="help_tooltip">
-							<div className="help_icon">
-								<svg width={ 24 } height={ 24 } fill="none" xmlns="http://www.w3.org/2000/svg">
-									<path d="M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18Z" stroke="#8E94A7" strokeWidth={ 2 } strokeLinecap="round" strokeLinejoin="round" />
-									<path d="M11.25 11.25H12v5.25h.75" stroke="#8E94A7" strokeWidth={ 2 } strokeLinecap="round" strokeLinejoin="round" />
-									<path d="M12 9a1.125 1.125 0 1 0 0-2.25A1.125 1.125 0 0 0 12 9Z" fill="#8E94A7" />
-								</svg>
-							</div>
-							<div className="help_content ">
-								{" "}
-								{/* opened */}
-								<div>
-									<p>Какой-то описательный текст</p>
-									<p className="button">Закрыть</p>
-								</div>
-							</div>
-						</div>
-					</div>
-					<div className="btn_group">
-						<button className="button button-gray" onClick={ this._handle_onBack }>Назад</button>
-						<button className="button button-blue" onClick={ this._handle_onCalculate }>Рассчитать график</button>
-					</div>
-				</form>
 			</div>
 		);
 	}

pages/contract/change/components/VariantsList/index.js

@@ -66,7 +66,7 @@ export default class VariantsList extends React.Component
 								<div className="form_field" key={ index }>
 									<input type="checkbox" hidden id={ `variant_${ index }` } name="variants" disabled={ disabled } checked={ selected.indexOf(variant.type) > -1 ? true : false } onChange={ () => { this._handle_onVariant(variant.type) } }/>
 									<label htmlFor={ `variant_${ index }` } className="unselectable" 
-									style={ disabled ? { color: "#A8026B", textDecoration: "line-through", } : {} }>{ variant.title }</label>
+									style={ disabled ? { color: "#A8026B", textDecoration: "line-through", } : {} }>{ variant.title }<br/><small>{ variant.type }</small></label>
 									<div className="help_tooltip">
 										<div className="help_icon">
 											<svg width={ 24 } height={ 24 } fill="none" xmlns="http://www.w3.org/2000/svg" >

pages/contract/change/index.js

@@ -93,9 +93,6 @@ class ChangeGraphicPage extends React.Component
 
 	componentDidMount() 
 	{
-		
-
-		console.log("ChangePage", "MOUNT", "document.location.hash", document.location.hash);
 		if(document.location.hash !== undefined && document.location.hash !== null && document.location.hash !== "")
 		{
 			if (!this.state.loading && this.props.number !== undefined) 
@@ -149,7 +146,6 @@ class ChangeGraphicPage extends React.Component
 
 	componentDidUpdate(prevProps, prevState)
 	{
-		//console.log("ChangePage", "CDM", "document.location.hash", document.location.hash);
 		if(document.location.hash)
 		{
 		}
@@ -175,8 +171,6 @@ class ChangeGraphicPage extends React.Component
 
 		this.setState({ variants_selected: selected, variants_loading: true }, () => 
 		{
-			console.log(this.state.variants_selected);
-
 			const { variants_selected, variants_types } = this.state;
 			const variants = {};
 
@@ -192,9 +186,6 @@ class ChangeGraphicPage extends React.Component
 				}
 			}
 
-			console.log("variantsvariantsvariantsvariantsvariants???????????");
-			console.log(variants);
-
 			getContractGraphicChangeVariants({ dispatch: this.props.dispatch, number: this.props.number, variants })
 			.then(() => 
 			{
@@ -240,8 +231,6 @@ class ChangeGraphicPage extends React.Component
 		const { loading, mode_options, mode_comparison, mode_calculation, mode_final, date, car, contract_date, agreement, rules, signer, signatories, calculations, calculation_id, variants, variants_loading, variants_selected, variants_types, variants_unavailable, options, current, calculated, } = this.state;
 		const { number } = this.props;
 
-		console.log("render", "signatories", signatories);
-
 		return (
 			<React.Fragment>
 				<Head>
@@ -303,6 +292,7 @@ class ChangeGraphicPage extends React.Component
 														dispatch={ this.props.dispatch } 
 														number={ number } 
 														variants={ variants } 
+														variants_selected={ variants_selected } 
 														options={ options } 
 														onVariants={ this._handle_onVariants } 
 														onCalculate={ this._handle_onCalculate }