contract info reducer, minor updates

actions/authActions.js

@@ -155,6 +155,7 @@ export const logout = ({ dispatch }) =>
 		dispatch({ type: actionTypes.AUTH, data: { logged: false, observer: false } });
 		dispatch({ type: actionTypes.USER, data: {} });
 		dispatch({ type: actionTypes.COMPANY, data: {} });
+		dispatch({ type: actionTypes.CONTRACTS_INFO_RESET, data: {} });
 
 		resolve();
 		Router.push('/');

actions/contractActions.js

@@ -74,6 +74,11 @@ export const getContractInfo = ({ dispatch, number, }) =>
 			const info = { date: response.data.dl_date, car: response.data.car };
 			dispatch({ type: actionTypes.CONTRACT_INFO, data: info });
 
+			const contract = {};
+			contract[`${ number }`] = info;
+
+			dispatch({ type: actionTypes.CONTRACTS_INFO, data: contract });
+
 			resolve(info);
 		})
 		.catch((error) => 
@@ -298,16 +303,6 @@ export const getContractDocuments = ({ dispatch, number, }) =>
 					documents.billfines = rows;
 					pr();
 				});	
-			}), new Promise((pr) => 
-			{
-				let query = nSQL(response.data.fines).query("select");
-				query = query.orderBy({ date: "desc" });
-
-				query.exec().then((rows) => 
-				{
-					documents.fines = rows;
-					pr();
-				});	
 			})])
 			.then(() => 
 			{
@@ -325,6 +320,45 @@ export const getContractDocuments = ({ dispatch, number, }) =>
 	});
 }
 
+export const getContractFines = ({ dispatch, number, }) => 
+{
+	console.log("ACTION", "getContractFines");
+
+	return new Promise((resolve, reject) => 
+	{
+		axios.post(`${ process.env.NEXT_PUBLIC_SELF_API_HOST }/api/contract/fines`, {
+			number: number
+		}, 
+		{
+			withCredentials: true, 
+		})
+		.then(async (response) => 
+		{
+
+			console.log("ACTION", "getContractFines", "response.data", response.data);
+
+			let fines = [];
+
+			let query = nSQL(response.data.fines).query("select");
+			query = query.orderBy({ date: "desc" });
+			query.exec().then((rows) => 
+			{
+				fines = rows;
+
+				console.log("fines");
+				console.log(fines);
+				dispatch({ type: actionTypes.CONTRACT_FINES, data: { fines: fines } });
+				resolve();	
+			});
+		})
+		.catch((error) => 
+		{
+			console.error(error);
+			reject();
+		});
+	});
+}
+
 export const getContractRules = ({ dispatch, date, }) => 
 {
 	return new Promise((resolve, reject) => 

constants/actionTypes.js

@@ -4,6 +4,8 @@ export const COMPANY = 'COMPANY';
 export const COMPANIES = 'COMPANIES';
 export const ADMIN = 'ADMIN';
 export const CONTRACTS = 'CONTRACTS';
+export const CONTRACTS_INFO = 'CONTRACTS_INFO';
+export const CONTRACTS_INFO_RESET = 'CONTRACTS_INFO_RESET';
 export const CONTRACT = 'CONTRACT';
 export const CONTRACT_PAYMENTS = 'CONTRACT_PAYMENTS';
 export const CONTRACT_INFO = 'CONTRACT_INFO';
@@ -13,6 +15,7 @@ export const CONTRACT_REGISTRATION = 'CONTRACT_REGISTRATION';
 export const CONTRACT_TELEMATIC = 'CONTRACT_TELEMATIC';
 export const CONTRACT_AGREEMENT = 'CONTRACT_AGREEMENT';
 export const CONTRACT_DOCUMENTS = 'CONTRACT_DOCUMENTS';
+export const CONTRACT_FINES = 'CONTRACT_FINES';
 export const CONTRACT_RULES = 'CONTRACT_RULES';
 export const CONTRACT_MATERIALS = 'CONTRACT_MATERIALS';
 

pages/api/contract/documents.js

@@ -23,50 +23,34 @@ export default async function handler(req, res)
 				upd: [], 
 				upd_avans: [], 
 				billfines: [], 
-				fines: [], 
 			};
 
-			await Promise.all([ 
+			axios.get(`${ process.env.CRM_API_HOST }/lk/Contract/GetUPDListByContract`, {
-				new Promise((resolve) => {
+				params: { ...client_jwt_decoded, contract_number: req.body.number }, 
-					axios.get(`${ process.env.CRM_API_HOST }/lk/Contract/GetUPDListByContract`, {
+				headers: { "Authorization": `Bearer ${ crm_jwt }`, }, 
-						params: { ...client_jwt_decoded, contract_number: req.body.number }, 
+			})
-						headers: { "Authorization": `Bearer ${ crm_jwt }`, }, 
+			.then((crm_response) => 
-					})
-					.then((crm_response) => 
-					{ 
-						console.log(inspect(crm_response.data, true, null, true));
-						for(let i in crm_response.data)
-						{
-							if(crm_response.data[i].type === "UPD")
-							{
-								result.upd = crm_response.data[i].upd;
-							}
-							if(crm_response.data[i].type === "UPD_Avans")
-							{
-								result.upd_avans = crm_response.data[i].upd;
-							}
-							if(crm_response.data[i].type === "BillFine")
-							{
-								result.billfines = crm_response.data[i].upd;
-							}
-						}
-						resolve();
-					})
-					.catch((error) => { console.error(error); resolve(); });
-				}), 
-				new Promise((resolve) => {
-					axios.get(`${ process.env.CRM_API_HOST }/lk/Contract/GetFineGIBDDList`, {
-						params: { ...client_jwt_decoded, contract_number: req.body.number }, 
-						headers: { "Authorization": `Bearer ${ crm_jwt }`, }, 
-					})
-					.then((crm_response) => { result.fines = crm_response.data; resolve(); })
-					.catch((error) => { console.error(error); resolve(); });
-				}), 
-			])
-			.then(() => 
 			{ 
+				console.log(inspect(crm_response.data, true, null, true));
+				for(let i in crm_response.data)
+				{
+					if(crm_response.data[i].type === "UPD")
+					{
+						result.upd = crm_response.data[i].upd;
+					}
+					if(crm_response.data[i].type === "UPD_Avans")
+					{
+						result.upd_avans = crm_response.data[i].upd;
+					}
+					if(crm_response.data[i].type === "BillFine")
+					{
+						result.billfines = crm_response.data[i].upd;
+					}
+				}
+
 				res.status(200).json(result);
-			});
+			})
+			.catch((error) => { console.error(error); resolve(); });
 		}
 		else
 		{

pages/api/contract/fines.js

@@ -0,0 +1,44 @@
+// 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 '../../../lib/cors';
+import { inspect } from 'util';
+
+export default async function handler(req, res) 
+{
+	await cors(req, res);
+
+	if(req.headers.cookie !== undefined)
+	{
+		const cookies = cookie.parse(req.headers?.cookie ? req.headers?.cookie : "");
+		if(cookies.jwt !== undefined && cookies.jwt !== null)
+		{
+			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 });
+
+			const result = {
+				fines: [], 
+			};
+
+			axios.get(`${ process.env.CRM_API_HOST }/lk/Contract/GetFineGIBDDList`, {
+				params: { ...client_jwt_decoded, contract_number: req.body.number }, 
+				headers: { "Authorization": `Bearer ${ crm_jwt }`, }, 
+			})
+			.then((crm_response) => 
+			{ 
+				result.fines = crm_response.data;
+
+				res.status(200).json(result);
+			})
+			.catch((error) => { console.error(error); });
+
+		}
+		else
+		{
+			res.status(403);
+		}
+	}
+}

pages/contract/agreement.js

@@ -21,6 +21,7 @@ import {
 	getFile,
 } from "../../actions";
 import AccountLayout from "../components/Layout/Account";
+import ContractHeader from "./components/ContractHeader";
 
 class ContractPage extends React.Component 
 {
@@ -141,11 +142,7 @@ class ContractPage extends React.Component
 				<AccountLayout>
 					<div className="title_wrapper">
 						<div className="left" style={{ flexDirection: "column" }}>
-							<h1 className="section_title">Договор №{ number }</h1>
+							<ContractHeader number={ number } date={ date } car={ car }/>
-							<h5 style={{ fontSize: "14px" }}>
-								{ date !== undefined && date !== null && date !== null && (<> от {moment(date).format("DD.MM.YYYY")}</>) }
-								{ car !== undefined && car !== null ? ` - ${car.brand.name} ${car.model.name} | ${ car.reg_number !== null ? car.reg_number : "без рег. номера" } | ${ car.vin_number !== null ? car.vin_number : "без VIN номера" }` : "" }
-							</h5>
 						</div>
 						<Company { ...this.props }/>
 					</div>

pages/contract/change/index.js

@@ -34,6 +34,7 @@ import {
 import Options from "./components/Options";
 import Comparison from "./components/Comparison";
 import AccountLayout from "../../components/Layout/Account";
+import ContractHeader from "../components/ContractHeader";
 
 class ChangeGraphicPage extends React.Component 
 {
@@ -284,11 +285,7 @@ class ChangeGraphicPage extends React.Component
 				<AccountLayout>
 					<div className="title_wrapper">
 						<div className="left" style={{ flexDirection: "column" }}>
-							<h1 className="section_title">Договор №{ number }</h1>
+							<ContractHeader number={ number } date={ date } car={ car }/>
-							<h5 style={{ fontSize: "14px" }}>
-								{ date !== undefined && date !== null && date !== null && ( <> от {moment(date).format("DD.MM.YYYY")}</> ) }
-								{ car !== undefined && car !== null ? ` - ${car.brand.name} ${car.model.name} | ${ car.reg_number !== null ? car.reg_number : "без рег. номера" } | ${ car.vin_number !== null ? car.vin_number : "без VIN номера" }` : "" }
-							</h5>
 						</div>
 						<Company { ...this.props }/>
 					</div>

pages/contract/components/ContractHeader/index.js

@@ -0,0 +1,32 @@
+import React from "react";
+import moment from "moment";
+
+export default class ContractHeader extends React.Component 
+{
+	constructor(props) 
+	{
+		super(props);
+		this.state = {
+		};
+	}
+
+	componentDidMount() 
+	{
+	}
+
+	render() 
+	{
+		const { number, date, car } = this.props;
+
+		return (
+			<>
+				<h1 className="section_title">Договор №{ number }</h1>
+				<h5 style={{ fontSize: "14px" }}>
+					{ date !== undefined && date !== null && date !== null && ( <> от { moment(date).format("DD.MM.YYYY") }</> ) }
+					{ car !== undefined && car !== null ? ` - ${ car.brand.name } ${ car.model.name } | ${ car.reg_number !== null ? car.reg_number : "без рег. номера" } | ${ car.vin_number !== null ? car.vin_number : "без VIN номера" }`
+					: "" }
+				</h5>
+			</>
+		)
+	}
+}

pages/contract/documents.js

@@ -30,6 +30,7 @@ import {
 	getContractPenalties, 
 } from "../../actions";
 import AccountLayout from "../components/Layout/Account";
+import ContractHeader from "./components/ContractHeader";
 
 const TYPES = {
 	upd: "УПД по очередным платежам",
@@ -414,20 +415,8 @@ class ContractDocumentsPage extends React.Component
 										<h1 className="section_title">Расчет планируемых пени</h1>
 										<h5 style={{ fontSize: "14px" }}>
 											Договор №{ number }
-											{ date !== undefined && date !== null && date !== null && (
+											{ date !== undefined && date !== null && date !== null && ( <> от {moment(date).format("DD.MM.YYYY")}</> ) }
-												<> от {moment(date).format("DD.MM.YYYY")}</>
+											{ car !== undefined && car !== null ? ` - ${car.brand.name} ${car.model.name} | ${ car.reg_number !== null ? car.reg_number : "без рег. номера" } | ${ car.vin_number !== null ? car.vin_number : "без VIN номера" }` : "" }
-												) }
-											{ car !== undefined && car !== null
-											? ` - ${car.brand.name} ${car.model.name} | ${
-												car.reg_number !== null
-												? car.reg_number
-												: "без рег. номера"
-											} | ${
-												car.vin_number !== null
-												? car.vin_number
-												: "без VIN номера"
-											}`
-											: "" }
 										</h5>
 									</div>
 								</div>
@@ -471,23 +460,7 @@ class ContractDocumentsPage extends React.Component
 						<>
 							<div className="title_wrapper">
 								<div className="left" style={{ flexDirection: "column" }}>
-									<h1 className="section_title">Договор №{ number }</h1>
+									<ContractHeader number={ number } date={ date } car={ car }/>
-									<h5 style={{ fontSize: "14px" }}>
-										{ date !== undefined && date !== null && date !== null && (
-											<> от {moment(date).format("DD.MM.YYYY")}</>
-										) }
-										{ car !== undefined && car !== null
-										? ` - ${car.brand.name} ${car.model.name} | ${
-											car.reg_number !== null
-												? car.reg_number
-												: "без рег. номера"
-											} | ${
-											car.vin_number !== null
-												? car.vin_number
-												: "без VIN номера"
-											}`
-										: "" }
-									</h5>
 								</div>
 								<Company { ...this.props }/>
 							</div>

pages/contract/events.js

@@ -17,6 +17,7 @@ import NotificationMessage from "../components/Events/NotificationMessage";
 
 import { getContractInfo, getFilteredEvents } from "../../actions";
 import AccountLayout from "../components/Layout/Account";
+import ContractHeader from "./components/ContractHeader";
 
 class ContractPage extends React.Component 
 {
@@ -79,8 +80,7 @@ class ContractPage extends React.Component
 				<AccountLayout>
 					<div className="title_wrapper">
 						<div className="left" style={{ flexDirection: "column" }}>
-							<h1 className="section_title">Договор №{ number }</h1>
+							<ContractHeader number={ number } date={ date } car={ car }/>
-							<h5 style={{ fontSize: "14px" }}>{ date !== undefined && date !== null && date !== null && (<> от { moment(date).format("DD.MM.YYYY") }</>)}{ car !== undefined && car !== null ? ` - ${ car.brand.name } ${ car.model.name } | ${ car.reg_number !== null ? car.reg_number : "без рег. номера" } | ${ car.vin_number !== null ? car.vin_number : "без VIN номера" }` : "" }</h5>
 						</div>
 						<Company { ...this.props }/>
 					</div>

pages/contract/fines.js

@@ -20,10 +20,10 @@ import DownloadFinesPdfButton from "../components/DownloadFinesPdfButton";
 
 import {
   getContractInfo, 
-  getContractDocuments,
+  getContractFines, 
-  getReconciliationFile,
 } from "../../actions";
 import AccountLayout from "../components/Layout/Account";
+import ContractHeader from "./components/ContractHeader";
 
 const TYPES = {
   upd: "УПД по очередным платежам",
@@ -33,34 +33,35 @@ const TYPES = {
   fines: "Штрафы ГИБДД",
 };
 
-class ContractDocumentsPage extends React.Component 
+class ContractFinesPage extends React.Component 
 {
 	constructor(props) 
 	{
 		super(props);
 		this.state = {
-			opened: [],
+			all: false, 
 			date: null, 
 			car: null, 
 			contract_date: null, 
 			documents: null, 
+			fines: null, 
 			loading: false, 
 			valid_date_start: null, 
 			valid_date_end: null, 
 			period_date_start: null, 
 			period_date_end: null, 
-			reconciliation_requested: false,
+			contracts_info: [], 
-			reconciliation_disabled: false,
 		};
 	}
 
 	static getDerivedStateFromProps(nextProps, prevState) 
 	{
 		return {
+			contracts_info: nextProps.contracts_info, 
 			date: nextProps.date,
 			car: nextProps.car,
 			contract_date: nextProps.contract_date,
-			documents: nextProps.documents,
+			fines: nextProps.fines,
 		};
 	}
 
@@ -68,16 +69,15 @@ class ContractDocumentsPage extends React.Component
 	{
 		if (!this.state.loading && this.props.number !== undefined) 
 		{
-			const de = moment().toDate();
 			this.setState(
-				{ loading: true, period_date_end: de, valid_date_end: de },
+				{ loading: true },
 				() => {
 					getContractInfo({
 						dispatch: this.props.dispatch,
 						number: this.props.number,
 					});
 
-					getContractDocuments({
+					getContractFines({
 						dispatch: this.props.dispatch,
 						number: this.props.number,
 					})
@@ -104,31 +104,17 @@ class ContractDocumentsPage extends React.Component
 		}
 	}
 
-	_handle_onGroup = (group) => 
+	_handle_onShowMore = () => 
 	{
-		console.log("group", group);
+		this.setState({ all: true });
-		const opened = [...this.state.opened];
-
-		if (opened.indexOf(group) < 0) 
-		{
-			opened.push(group);
-		} 
-		else 
-		{
-			opened.splice(opened.indexOf(group), 1);
-		}
-
-		this.setState({ opened: opened });
 	}
 
-	_renderFines = (fines, type) => 
+	_renderFines = (fines) => 
 	{
-		console.log("_renderFines");
+		console.log("_renderFines", "fines", fines);
-		console.log("fines");
-		console.log(fines);
 
 		const { number } = this.props;
-		const { opened } = this.state;
+		const { all } = this.state;
 
 		const status = {
 			NotPaid: "danger",
@@ -140,18 +126,8 @@ class ContractDocumentsPage extends React.Component
 		{
 			return (
 				<>
-					<div className="block-column">
-						<div
-							className={`dropdown_block ${
-								opened.indexOf("fines") > -1 ? "open" : ""
-							}`}
-						>
-							<div className="block_header">
-								<p>{ TYPES["fines"] }</p>
-							</div>
-						</div>
 						<div className="dropdown_blocks_list">
-							{ fines.slice(0, opened.indexOf("fines") > -1 ? fines.length : 3).map((fine, fine_index) => (
+							{ fines.slice(0, all ? fines.length : 3).map((fine, fine_index) => (
 								<div className="dropdown_block open" key={fine_index}>
 									<div className="block_body">
 										<div className="fines_detail">
@@ -219,7 +195,7 @@ class ContractDocumentsPage extends React.Component
 									{*/}
 								</div>
 							)) }
-							{ opened.indexOf(type) < 0 && fines.length > 3 && (
+							{ !all && fines.length > 3 && (
 								<div
 									className="row"
 									style={{
@@ -227,7 +203,7 @@ class ContractDocumentsPage extends React.Component
 										justifyContent: "center",
 										corsor: "pointer",
 									}}
-									onClick={() => this._handle_onGroup(type)}
+									onClick={ this._handle_onShowMore } 
 								>
 									<p style={{ paddingTop: "15px", color: "#747474" }}>
 										Еще {fines.length - 3}{" "}
@@ -242,7 +218,6 @@ class ContractDocumentsPage extends React.Component
 								</div>
 							) }
 						</div>
-					</div>
 				</>
 			);
 		}
@@ -250,18 +225,6 @@ class ContractDocumentsPage extends React.Component
 		return (
 			<>
 				<div className="block-column">
-					<div
-						className={`dropdown_block ${
-							opened.indexOf(type) > -1 ? "open" : ""
-						}`}
-					>
-						<div
-							className="block_header"
-							onClick={ () => this._handle_onGroup(type) }
-						>
-							<p>{ TYPES[type] }</p>
-						</div>
-					</div>
 					<div style={{ display: "flex", alignItems: "center" }}>
 						<p>Штрафов не найдено.</p>
 						<p>&nbsp;</p>
@@ -279,21 +242,11 @@ class ContractDocumentsPage extends React.Component
 			date,
 			car,
 			contract_date,
-			documents,
+			fines,
-			period_date_start,
-			period_date_end,
-			valid_date_start,
-			valid_date_end,
-			reconciliation_requested,
-			reconciliation_disabled,
-			opened,
 		} = this.state;
 
-		console.log("documentsdocumentsdocumentsdocumentsdocuments");
+		console.log("fines");
-		console.log(documents);
+		console.log(fines);
-
-		console.log("opened");
-		console.log(opened);
 
 		return (
 			<React.Fragment>
@@ -305,23 +258,7 @@ class ContractDocumentsPage extends React.Component
 				<AccountLayout>
 					<div className="title_wrapper">
 						<div className="left" style={{ flexDirection: "column" }}>
-							<h1 className="section_title">Договор №{number}</h1>
+							<ContractHeader number={ number } date={ date } car={ car }/>
-							<h5 style={{ fontSize: "14px" }}>
-								{ date !== undefined && date !== null && date !== null && (
-									<> от {moment(date).format("DD.MM.YYYY")}</>
-								) }
-								{ car !== undefined && car !== null
-								? ` - ${car.brand.name} ${car.model.name} | ${
-									car.reg_number !== null
-										? car.reg_number
-										: "без рег. номера"
-									} | ${
-									car.vin_number !== null
-										? car.vin_number
-										: "без VIN номера"
-									}`
-								: "" }
-							</h5>
 						</div>
 						<Company { ...this.props }/>
 					</div>
@@ -329,34 +266,31 @@ class ContractDocumentsPage extends React.Component
 						<InnerMenu number={ number } { ...this.props }/>
 						<article>
 							{ loading ? (
-								<div
+								<div className="table_row table_header" style={{ minHeight: 300, display: "flex", justifyContent: "center", alignItems: "center", }}>
-									className="table_row table_header"
+									<SpinnerCircular size={ 90 } thickness={ 51 } speed={ 100 } color="rgba(28, 1, 169, 1)" secondaryColor="rgba(236, 239, 244, 1)" />
-									style={{
-										minHeight: 300,
-										display: "flex",
-										justifyContent: "center",
-										alignItems: "center",
-									}}
-								>
-									<SpinnerCircular
-										size={90}
-										thickness={51}
-										speed={100}
-										color="rgba(28, 1, 169, 1)"
-										secondaryColor="rgba(236, 239, 244, 1)"
-									/>
 								</div>
 							) : (
+								<div className="dropdown_blocks_list zero-margin gibdd">
+									<div className={`dropdown_block open`}>
+										<div className="block_body full">
+											<div className="company">
+												<p className="title lower">Штрафы ГИБДД</p>
+												{fines !== undefined && fines !== null ? (
+													<>
+														{this._renderFines(fines)}
+													</>
+												) : null}
+											</div>
+										</div>
+									</div>
+								</div>
+							) }
+								{/*}
 								<>
 									<div className="dropdown_blocks_list">
-										{documents !== undefined && documents !== null ? (
-											<>
-												{this._renderFines(documents.fines, "fines")}
-											</>
-										) : null}
 									</div>
 								</>
-							) }
+								{*/}
 						</article>
 					</div>
 				</AccountLayout>
@@ -369,10 +303,11 @@ class ContractDocumentsPage extends React.Component
 function mapStateToProps(state, ownProps) 
 {
 	return {
+		contracts_info: state.contracts_info, 
 		contract_date: state.contract.date, 
 		date: state.contract.date, 
 		car: state.contract.car, 
-		documents: state.contract.documents,
+		fines: state.contract.fines, 
 	};
 }
 
@@ -387,7 +322,7 @@ export const getServerSideProps = reduxWrapper.getServerSideProps(
 	}
 );
 
-export default withRouter(connect(mapStateToProps)(ContractDocumentsPage));
+export default withRouter(connect(mapStateToProps)(ContractFinesPage));
 
 {
 /*}

pages/contract/gibdd.js

@@ -21,6 +21,7 @@ import {
   getContractRegistration,
   getContractTelematic,
 } from "./../../actions";
+import ContractHeader from "./components/ContractHeader";
 
 class ContractServicesPage extends React.Component {
   constructor(props) {
@@ -126,100 +127,55 @@ class ContractServicesPage extends React.Component {
 					<section>
 						<div className="clear"></div>
 						<div className="container">
-						<div className="title_wrapper">
+							<div className="title_wrapper">
-							<div className="left" style={{ flexDirection: "column" }}>
+								<div className="left" style={{ flexDirection: "column" }}>
-							<h1 className="section_title">Договор №{number}</h1>
+									<ContractHeader number={ number } date={ date } car={ car }/>
-							<h5 style={{ fontSize: "14px" }}>
+								</div>
-								{date !== undefined && date !== null && date !== null && (
+								<Company { ...this.props }/>
-								<> от {moment(date).format("DD.MM.YYYY")}</>
-								)}
-								{car !== undefined && car !== null
-								? ` - ${car.brand.name} ${car.model.name} | ${
-									car.reg_number !== null
-										? car.reg_number
-										: "без рег. номера"
-									} | ${
-									car.vin_number !== null
-										? car.vin_number
-										: "без VIN номера"
-									}`
-								: ""}
-							</h5>
 							</div>
-							<Company { ...this.props }/>
+							<div className="aside_container about">
-						</div>
+								<InnerMenu number={number} {...this.props} />
-						<div className="aside_container about">
+								<article>
-							<InnerMenu number={number} {...this.props} />
+									{ loading ? (
-							<article>
+										<div className="table_row table_header" style={{ minHeight: 300, display: "flex", justifyContent: "center", alignItems: "center", }} >
-							{loading ? (
+											<SpinnerCircular size={ 90 } thickness={ 51 } speed={ 100 } color="rgba(28, 1, 169, 1)" secondaryColor="rgba(236, 239, 244, 1)" />
-								<div
+										</div>
-								className="table_row table_header"
+									) : (
-								style={{
+										<div className="dropdown_blocks_list zero-margin gibdd">
-									minHeight: 300,
+											<div className={`dropdown_block open`}>
-									display: "flex",
+												<div className="block_body full">
-									justifyContent: "center",
+													<div className="company">
-									alignItems: "center",
+														<p className="title lower">Штрафы ГИБДД</p>
-								}}
+														<ul>
-								>
+															<li>Номер постановления: <b>3432434242334</b></li>
-								<SpinnerCircular
+															<li>Страховая: <b>3 400 000,00 ₽</b></li>
-									size={90}
+															<li>Статус: <b>Оплачен</b></li>
-									thickness={51}
+															<li>Дата: <b>01/01/2020 </b></li>
-									speed={100}
+															<li>Штраф:{" "}<b>п. 1.15 - Несоблюдение правил парковки </b></li>
-									color="rgba(28, 1, 169, 1)"
+															<li>
-									secondaryColor="rgba(236, 239, 244, 1)"
+																<div className="dosc_list medium-icon">
-								/>
+																	<div className="row">
-								</div>
+																		<p className="doc_name i-pdf extension">
-							) : (
+																		№ 01/20/2020 (.PDF)
-								<div className="dropdown_blocks_list zero-margin gibdd">
+																		<span style={{"width":"100%"}}>Постановление</span>
-								<div className={`dropdown_block open`}>
+																		</p>
-									<div className="block_body full">
+																	</div>
-									<div className="company">
+																	<div className="row">
-										<p className="title lower">Штрафы ГИБДД</p>
+																		<p className="doc_name i-pdf extension">
-										<ul>
+																		Договор
-										<li>
+																		<span style={{"width":"100%"}}>2021_3866 от 25.06.2021</span>
-											Номер постановления: <b>3432434242334</b>
+																		</p>
-										</li>
+																	</div>
-										<li>
+																</div>
-											Страховая: <b>3 400 000,00 ₽</b>
+															</li>
-										</li>
+														</ul>
-										<li>
+													</div>
-											Статус: <b>Оплачен</b>
+												</div>
-										</li>
-										<li>
-											Дата: <b>01/01/2020 </b>
-										</li>
-										<li>
-											Штраф:{" "}
-											<b>п. 1.15 - Несоблюдение правил парковки </b>
-										</li>
-										<li>
-											<div className="dosc_list medium-icon">
-											<div className="row">
-												<p className="doc_name i-pdf extension">
-												№ 01/20/2020 (.PDF)
-												<span style={{"width":"100%"}}>
-												Постановление
-												</span>
-												</p>
 											</div>
-											<div className="row">
+										</div>
-												<p className="doc_name i-pdf extension">
+									) }
-												Договор
+								</article>
-												<span style={{"width":"100%"}}>
+							</div>
-													2021_3866 от 25.06.2021
-												</span>
-												</p>
-											</div>
-											</div>
-										</li>
-										</ul>
-									</div>
-									</div>
-								</div>
-								</div>
-							)}
-							</article>
-						</div>
 						</div>
 					</section>
 				</main>

pages/contract/index.js

@@ -16,6 +16,7 @@ import InnerMenu from "./components/InnerMenu";
 
 import { getContract, getContractDebtInvoiceFile, getContractInfo, getContractPenaltyInvoiceFile } from './../../actions';
 import AccountLayout from "../components/Layout/Account";
+import ContractHeader from "./components/ContractHeader";
 
 class ContractSchedulePage extends React.Component 
 {
@@ -24,6 +25,7 @@ class ContractSchedulePage extends React.Component
 		super(props);
 		this.state = {
 			loading: false, 
+			contracts_info: {}, 
 			payments: null, 
 			avans: null, 
 			debt: null, 
@@ -40,6 +42,7 @@ class ContractSchedulePage extends React.Component
 	static getDerivedStateFromProps(nextProps, prevState)
 	{
 		return {
+			contracts_info: nextProps.contracts_info, 
 			date: nextProps.date, 
 			car: nextProps.car, 
 			payments: nextProps.payments, 
@@ -51,13 +54,19 @@ class ContractSchedulePage extends React.Component
 
 	componentDidMount()
 	{
-		if(!this.state.loading && this.props.number !== undefined)
+		console.log("ContractSchedulePage", "this.state", this.state);
+		const { number } = this.props;
+
+		if(!this.state.loading && number !== undefined)
 		{
 			this.setState({ loading: true }, () => 
 			{
-				getContractInfo({ dispatch: this.props.dispatch, number: this.props.number });
+				if(this.state.contracts_info[ number ] === undefined)
+				{
+					getContractInfo({ dispatch: this.props.dispatch, number: number });
+				}
 
-				getContract({ dispatch: this.props.dispatch, number: this.props.number }).then(() => {
+				getContract({ dispatch: this.props.dispatch, number: number }).then(() => {
 					this.setState({ loading: false });
 				}).catch(() => {});
 			});	
@@ -147,8 +156,10 @@ class ContractSchedulePage extends React.Component
 
 	render()
 	{
-		const { payments, avans, debt, penalty, date, car, full, opened, loading, debt_invoice_file_loading, penalty_invoice_file_loading } = this.state;
 		const { number } = this.props;
+		const { loading, contracts_info, payments, avans, debt, penalty, full, opened, debt_invoice_file_loading, penalty_invoice_file_loading } = this.state;
+
+		let { date, car } = contracts_info[ number ] !== undefined ? contracts_info[ number ] : {};
 
 		console.log(".".repeat(50));
 		console.log("this.state", this.state);
@@ -182,8 +193,7 @@ class ContractSchedulePage extends React.Component
 				<AccountLayout>
 					<div className="title_wrapper">
 						<div className="left" style={{ flexDirection: 'column', }}>
-							<h1 className="section_title">Договор №{ number }</h1>
+							<ContractHeader number={ number } date={ date } car={ car }/>
-							<p className="section_subtitle">{ date !== undefined && date !== null && date !== null && (<> от { moment(date).format("DD.MM.YYYY") }</>)}{ car !== undefined && car !== null ? ` - ${ car.brand.name } ${ car.model.name } | ${ car.reg_number !== null ? car.reg_number : 'без рег. номера' } | ${ car.vin_number !== null ? car.vin_number : 'без VIN номера' }` : '' }</p>
 						</div>
 						<Company { ...this.props }/>
 					</div>
@@ -335,6 +345,7 @@ function mapStateToProps(state, ownProps)
 {
 	return {
 		company: state.company, 
+		contracts_info: state.contracts_info, 
 		payments: state.contract.payments, 
 		avans: state.contract.avans, 
 		debt: state.contract.debt, 

pages/contract/materials.js

@@ -16,6 +16,7 @@ import DownloadPdfButton from "../components/DownloadPdfButton";
 
 import { getContractInfo, getContractMaterials } from "../../actions";
 import AccountLayout from "../components/Layout/Account";
+import ContractHeader from "./components/ContractHeader";
 
 class ContractPage extends React.Component 
 {
@@ -85,8 +86,7 @@ class ContractPage extends React.Component
 				<AccountLayout>
 					<div className="title_wrapper">
 						<div className="left" style={{ flexDirection: 'column', }}>
-							<h1 className="section_title">Договор №{ number }</h1>
+							<ContractHeader number={ number } date={ date } car={ car }/>
-							<h5 style={{ fontSize: '14px' }}>{ date !== undefined && date !== null && date !== null && (<> от { moment(date).format("DD.MM.YYYY") }</>)}{ car !== undefined && car !== null ? ` - ${ car.brand.name } ${ car.model.name } | ${ car.reg_number !== null ? car.reg_number : 'без рег. номера' } | ${ car.vin_number !== null ? car.vin_number : 'без VIN номера' }` : '' }</h5>
 						</div>
 						<Company { ...this.props }/>
 					</div>

pages/contract/penalties.js

@@ -134,20 +134,8 @@ class ContractPage extends React.Component
 										<h1 className="section_title">Расчет планируемых пени</h1>
 										<h5 style={{ fontSize: "14px" }}>
 											Договор №{ number }
-											{ date !== undefined && date !== null && date !== null && (
+											{ date !== undefined && date !== null && date !== null && ( <> от {moment(date).format("DD.MM.YYYY")}</> ) }
-												<> от {moment(date).format("DD.MM.YYYY")}</>
+											{ car !== undefined && car !== null ? ` - ${car.brand.name} ${car.model.name} | ${ car.reg_number !== null ? car.reg_number : "без рег. номера" } | ${ car.vin_number !== null ? car.vin_number : "без VIN номера" }` : "" }
-												) }
-											{ car !== undefined && car !== null
-											? ` - ${car.brand.name} ${car.model.name} | ${
-												car.reg_number !== null
-												? car.reg_number
-												: "без рег. номера"
-											} | ${
-												car.vin_number !== null
-												? car.vin_number
-												: "без VIN номера"
-											}`
-											: "" }
 										</h5>
 									</div>
 								</div>

pages/contract/services.js

@@ -17,6 +17,7 @@ import InnerMenu from "./components/InnerMenu";
 import { getContractInfo, getContractHelpCard, getContractInsurance, getContractRegistration, getContractTelematic, } from './../../actions';
 import DownloadPdfButton from "../components/DownloadPdfButton";
 import AccountLayout from "../components/Layout/Account";
+import ContractHeader from "./components/ContractHeader";
 
 class ContractServicesPage extends React.Component 
 {
@@ -167,8 +168,7 @@ class ContractServicesPage extends React.Component
 				<AccountLayout>
 					<div className="title_wrapper">
 						<div className="left" style={{ flexDirection: 'column', }}>
-							<h1 className="section_title">Договор №{ number }</h1>
+							<ContractHeader number={ number } date={ date } car={ car }/>
-							<h5 style={{ fontSize: '14px' }}>{ date !== undefined && date !== null && date !== null && (<> от { moment(date).format("DD.MM.YYYY") }</>)}{ car !== undefined && car !== null ? ` - ${ car.brand.name } ${ car.model.name } | ${ car.reg_number !== null ? car.reg_number : 'без рег. номера' } | ${ car.vin_number !== null ? car.vin_number : 'без VIN номера' }` : '' }</h5>
 						</div>
 						<Company { ...this.props }/>
 					</div>

reducers/contractReducer.js

@@ -1,5 +1,3 @@
-import { HYDRATE } from 'next-redux-wrapper';
-
 import * as actionTypes from '../constants/actionTypes';
 import initialState from "./initialState";
 
@@ -7,14 +5,6 @@ const contractReducer = (state = initialState.contract, action) =>
 {
 	switch (action.type) 
 	{
-		case HYDRATE: 
-		{
-			return { 
-				...state, 
-				...action.payload.contract, 
-			};
-		}
-
 		case actionTypes.CONTRACT: 
 		{
 			return {
@@ -91,6 +81,14 @@ const contractReducer = (state = initialState.contract, action) =>
 			};
 		}
 
+		case actionTypes.CONTRACT_FINES: 
+		{
+			return {
+				...state, 
+				fines: action.data.fines, 
+			};
+		}
+
 		case actionTypes.CONTRACT_RULES: 
 		{
 			return {

reducers/contractsInfoReducer.js

@@ -0,0 +1,49 @@
+import { HYDRATE } from 'next-redux-wrapper';
+
+import * as actionTypes from '../constants/actionTypes';
+import initialState from "./initialState";
+
+const contractsInfoReducer = (state = initialState.contracts_info, action) => 
+{
+	switch (action.type) 
+	{
+		case HYDRATE: 
+		{
+			return { 
+				...state, 
+				...action.payload.contracts_info, 
+			};
+		}
+
+		case actionTypes.CONTRACTS_INFO: 
+		{
+			console.log("actionTypes.CONTRACTS_INFO");
+			console.log("state", state);
+			console.log("action.data", action.data);
+			console.log("-".repeat(100));
+			console.log({
+				...state, ...action.data, 
+			});
+			console.log("=".repeat(100));
+
+			return {
+				...state, ...action.data, 
+			};
+		}
+
+		case actionTypes.CONTRACTS_INFO_RESET: 
+		{
+			console.log("actionTypes.CONTRACTS_INFO_RESET");
+			console.log("state", state);
+			console.log("action.data", action.data);
+
+			return {};
+		}
+
+		default: {
+			return state;
+		}
+	}
+};
+
+export default contractsInfoReducer;

reducers/initialState.js

@@ -1,33 +1,40 @@
 export const defaultState = { 
-	auth: {
+	auth: 
+	{ 
 		logged: false, 
 		observer: false, 
 	}, 
-	user: {
+	user: 
+	{ 
 		name: "", 
 		lastname: "", 
 		secondname: "", 
 		phone: "", 
 	}, 
-	companies: {
+	companies: 
+	{ 
 		list: null, 
 	}, 
-	admin: {
+	admin: 
+	{ 
 		list: null, 
 	}, 
-	company: {
+	company: 
+	{ 
 		title: "", 
 		inn: "", 
 		kpp: "", 
 		ogrn: "", 
 	}, 
+	contracts_info: {}, 
 	contracts: 
 	{ 
 		list: null, 
 		page: 1, 
 		pages: 1, 
 	}, 
-	contract: {
+	contract: 
+	{ 
 		payments: null, 
 		avans: null, 
 		debt: null, 
@@ -38,14 +45,17 @@ export const defaultState = {
 		helpcard: null, 
 		registration: null, 
 		telematic: null, 
-		agreement: {
+		agreement: 
+		{ 
 			unsigned: null, 
 			signed: null, 
 		}, 
 		documents: null, 
+		fines: null, 
 		rules: null, 
 		materials: null, 
-		change: {
+		change: 
+		{ 
 			signatories: null, 
 			calculations: null, 
 			variants: null, 

store/index.js

@@ -11,6 +11,7 @@ import calendarReducer from '../reducers/calendarReducer';
 import eventsReducer from '../reducers/eventsReducer';
 import supportReducer from '../reducers/supportReducer';
 import adminReducer from '../reducers/adminReducer';
+import contractsInfoReducer from '../reducers/contractsInfoReducer';
 
 const combinedReducer = combineReducers({ 
 	auth: authReducer, 
@@ -23,6 +24,7 @@ const combinedReducer = combineReducers({
 	events: eventsReducer, 
 	support: supportReducer, 
 	admin: adminReducer, 
+	contracts_info: contractsInfoReducer, 
 });
 
 const makeStore = (context) => 
@@ -40,7 +42,7 @@ const makeStore = (context) =>
 
         const persistConfig = {
             key: 'nextjs', 
-            whitelist: [ 'auth', 'user', 'company', 'companies' ], 
+            whitelist: [ 'auth', 'user', 'company', 'companies', 'contracts_info', ], 
             storage
         };