contract invoices update

actions/companyActions.js

@@ -33,6 +33,10 @@ export const getCompanyInfo = ({ dispatch }) =>
 		})
 		.then((response) => 
 		{
+			console.log({ company: response.data });
+//			const eventTrack = new CustomEvent("_track", { detail: { type: "error", title: "Ошибка", content: "Ошибка при вызове метода offerprintform" } });
+//			window.dispatchEvent(eventTrack);
+
 			getEDOOperatorList({ dispatch }).then(() => {}).catch(() => {});
 			//console.log("getCompanyInfo", "response", response.data);
 

actions/index.js

@@ -17,3 +17,4 @@ export * from './feedbackActions';
 export * from './dealsActions';
 export * from './edoActions';
 export * from './signActions';
+export * from './invoicesActions';

actions/invoicesActions.js

@@ -0,0 +1,106 @@
+import axios from 'axios';
+import fileDownload from 'js-file-download';
+
+import * as actionTypes from '../constants/actionTypes';
+
+if(process.browser)
+{
+	FormData.prototype.appendObject = function(obj, namespace) 
+	{
+		let keyName;
+		for (var key in obj) 
+		{
+			if (obj.hasOwnProperty(key)) 
+			{
+				keyName = [namespace, '[', key, ']'].join('');
+				this.append(keyName, obj[key]);
+			}
+		}
+	};	
+}
+
+export const getContractInvoices = ({ dispatch, number }) => 
+{
+	return new Promise((resolve, reject) => 
+	{
+		axios.post(`${ process.env.NEXT_PUBLIC_SELF_API_HOST }/api/contract/invoices`, { number }, 
+		{
+			withCredentials: true, 
+		})
+		.then(async (response) => 
+		{
+			console.log("getContractInvoices", { response: response.data });
+			dispatch({ type: actionTypes.INVOICES_LIST, data: { number, invoices: response.data } });
+			resolve();
+		})
+		.catch((error) => 
+		{
+			console.error(error);
+			reject();
+		});
+	});
+}
+
+export const downloadInvoiceFile = ({ payload, filename }) => 
+{
+	const url = `${ process.env.NEXT_PUBLIC_SELF_API_HOST }/api/contract/invoice/download`;
+
+	return new Promise((resolve, reject) => 
+	{
+		axios.get(url, {
+			params: payload, 
+			responseType: 'blob', 
+		})
+		.then((response) => 
+		{
+			fileDownload(response.data, filename);
+			resolve();
+		})
+		.catch((error) => 
+		{
+			console.error("ACTION", "sign", "downloadInvoiceFile()", "ERROR");
+			console.error(error);
+
+			const eventMessage = new CustomEvent("_message", { detail: { type: "error", title: "Ошибка", content: "Ошибка при вызове метода GetWMDoc" } });
+			window.dispatchEvent(eventMessage);
+
+			reject(error.data);
+		});
+	});
+}
+
+export const getInvoiceKASKO = ({ number }) => 
+{
+	axios.post(`${ process.env.NEXT_PUBLIC_SELF_API_HOST }/api/contract/invoice/kasko`, { number }, 
+	{
+		withCredentials: true, 
+	})
+	.then(async (response) => 
+	{
+		console.log("getInvoiceKASKO", { response: response.data });
+		resolve();
+	})
+	.catch((error) => 
+	{
+		console.error(error);
+		reject();
+	});
+}
+
+export const getInvoiceFinGap = ({ number }) => 
+{
+	axios.post(`${ process.env.NEXT_PUBLIC_SELF_API_HOST }/api/contract/invoice/fingap`, { number }, 
+	{
+		withCredentials: true, 
+	})
+	.then(async (response) => 
+	{
+		console.log("getInvoiceFinGap", { response: response.data });
+		resolve();
+	})
+	.catch((error) => 
+	{
+		console.error(error);
+		reject();
+	});
+}

components/DealsStatus/DealsListDeal.js

@@ -59,7 +59,7 @@ export default class DealsListDeal extends React.Component
 		const step = statuscode_id - 100;
 
 		return (
-			<div className="list_item">
+			<div className="list_item deal_list_item" onClick={() => { onSelectDeal(opp_number, index) }}>
 				<div>
 					<p>№ { opp_number }</p>
 				</div>
@@ -79,7 +79,7 @@ export default class DealsListDeal extends React.Component
 					<p>{ statuses[ statuscode_id ].title }</p>
 				</div>
 				<div>
-					<button className="button" onClick={() => { onSelectDeal(opp_number, index) }} >
+					<button className="button">
 						{ statuscode_id === 105 || statuscode_id === 107 ? (
 							"Подробнее"
 						) : (

components/DealsStatus/components/DocumentsForm.js

@@ -77,9 +77,11 @@ class QuestionnaireForm extends React.Component
 
 			case "up_to_date":
 			{
+				return (
 					<div className="message ok">
 						<p>Вам не требуется актуализация данных анкеты Клиента</p>
 					</div>
+				)
 			}
 
 			default:

components/DealsStatus/components/LeasingRegistration.js

@@ -178,7 +178,7 @@ export default class LeasingRegistration extends Step
 		return documents;
 	}
 
-	_render_preparedContracts = () => 
+	_render_preparedContracts = (type) => 
 	{
 		const { dealSelected } = this.props;
 		const { edo, paper, checked } = this.state;
@@ -212,8 +212,11 @@ export default class LeasingRegistration extends Step
 		}
 
 		return (
+			<div className="block deal_contracts_group_item" key={ type.key }>
+				{ !edo && ( <div className="left"><p><b>{ type.title }</b></p></div> )}
+				<div className="right" style={ edo ? { width: "100%" } : {} }>
 					<div className="block-column">
-				<div className="docs_list acts_list-checkbox medium-icon">
+						<div className={ `${ contracts.length === 0 ? "documents" : ""} docs_list acts_list-checkbox medium-icon` }>
 							{ contracts.length > 0 ? 
 								contracts.map((contract, index) => (
 									<div className="row" key={ index }>
@@ -239,16 +242,21 @@ export default class LeasingRegistration extends Step
 							</div>
 						) }
 					</div>
+				</div>
+			</div>
 		)
 	}
 
-	_render_signingPlanContracts = () => 
+	_render_signingPlanContracts = (type) => 
 	{
 		const contracts = this.props.contracts['signing_plan_contracts'];
 		const { onDealContractsUpdate, dealSelected } = this.props;
 		console.log("_render_signingPlanContracts", { contracts });
 
 		return (
+			<div className="block deal_contracts_group_item" key={ type.key }>
+				<div className="left"><p><b>{ type.title }</b></p></div>
+				<div className="right">
 					<div className="documents deal_contract_sign_list">
 						{ contracts.length > 0 ? 
 							contracts.map((contract, index) => (
@@ -264,15 +272,20 @@ export default class LeasingRegistration extends Step
 							<p className="empty">Нет договоров</p>
 						) }
 					</div>
+				</div>
+			</div>
 		)
 	}
 
-	_render_signingFactContracts = () => 
+	_render_signingFactContracts = (type) => 
 	{
 		const contracts = this.props.contracts['signing_fact_contracts'];
 		console.log("_render_signingFactContracts", { contracts });
 
 		return (
+			<div className="block deal_contracts_group_item" key={ type.key }>
+				<div className="left"><p><b>{ type.title }</b></p></div>
+				<div className="right">
 					<div className="documents">
 						{ contracts.length > 0 ? 
 							contracts.map((contract, index) => (
@@ -286,15 +299,20 @@ export default class LeasingRegistration extends Step
 							<p className="empty">Нет договоров</p>
 						) }
 					</div>
+				</div>
+			</div>
 		)
 	}
 
-	_render_issuedContracts = () => 
+	_render_issuedContracts = (type) => 
 	{
 		const contracts = this.props.contracts['issued_contracts'];
 		console.log("_render_issuedContracts", { contracts });
 
 		return (
+			<div className="block deal_contracts_group_item" key={ type.key }>
+				<div className="left"><p><b>{ type.title }</b></p></div>
+				<div className="right">
 					<div className="documents">
 						{ contracts.length > 0 ? 
 							contracts.map((contract, index) => (
@@ -313,18 +331,24 @@ export default class LeasingRegistration extends Step
 							<p className="empty">Нет договоров</p>
 						) }
 					</div>
+				</div>
+			</div>
 		)
 	}
 
-	_render_annuledContracts = () => 
+	_render_annuledContracts = (type) => 
 	{
 		const contracts = this.props.contracts['annulled_contracts'];
 		console.log("_render_annuledContracts", { contracts });
 
+		if(contracts.length > 0)
+		{
 			return (
+				<div className="block deal_contracts_group_item" key={ type.key }>
+					<div className="left"><p><b>{ type.title }</b></p></div>
+					<div className="right">
 						<div className="documents">
-				{ contracts.length > 0 ? 
+							{ contracts.map((contract, index) => (
-					contracts.map((contract, index) => (
 									<div className="document" key={ index }>
 										<div className="icon formal"></div>
 										<div className="title">
@@ -336,11 +360,14 @@ export default class LeasingRegistration extends Step
 											</div>
 										</div>
 									</div>
-				)) : (
+							)) }
-					<p className="empty">Нет договоров</p>
+						</div>
-				) }
+					</div>
 				</div>
 			)
+		} else {
+			return null;
+		}
 	}
 
 	_render_contracts = (type) => 
@@ -349,31 +376,31 @@ export default class LeasingRegistration extends Step
 
 		if(contracts !== undefined)
 		{
-			switch (type)
+			switch (type.key)
 			{
 				case "prepared_contracts":
 				{
-					return this._render_preparedContracts();
+					return this._render_preparedContracts(type);
 				}
 
 				case "signing_plan_contracts":
 				{
-					return this._render_signingPlanContracts();
+					return this._render_signingPlanContracts(type);
 				}
 
 				case "signing_fact_contracts":
 				{
-					return this._render_signingFactContracts();
+					return this._render_signingFactContracts(type);
 				}
 
 				case "issued_contracts":
 				{
-					return this._render_issuedContracts();
+					return this._render_issuedContracts(type);
 				}
 
 				case "annulled_contracts":
 				{
-					return this._render_annuledContracts();
+					return this._render_annuledContracts(type);
 				}
 			}
 		}
@@ -399,26 +426,9 @@ export default class LeasingRegistration extends Step
 							<div style={{ minHeight: 200, 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>
-						) : (
+						) : 
-							<>
+							this.types.map((type, index) => this._render_contracts(type) ) 
-								{ this.types.map((type, index) => (
+						}
-									<div className="block deal_contracts_group_item" key={ index }>
-										{ edo ? (
-											<>
-												{ type.key !== "prepared_contracts" && (
-													<div className="left"><p><b>{ type.title }</b></p></div>
-												) }
-											</>
-										) : (
-											<div className="left"><p><b>{ type.title }</b></p></div>									
-										) }
-										<div className="right" style={ edo && type.key === "prepared_contracts" ? { width: "100%" } : {} }>
-											{ this._render_contracts(type.key) }
-										</div>
-									</div>
-								)) }
-							</>
-						) }
 					</div>
 				</div>
 			</div>

constants/actionTypes.js

@@ -59,3 +59,5 @@ export const EDO_LOADED = 'EDO_LOADED';
 export const EDO_OPERATORS_LIST = 'EDO_OPERATORS_LIST';
 export const EDO_INVITES_LIST = 'EDO_INVITES_LIST';
 export const EDO_RESET = 'EDO_RESET';
+
+export const INVOICES_LIST = 'INVOICES_LIST';

css/main/style.css

@@ -114,7 +114,7 @@ main .title_wrapper .right {
 }
 main .title_wrapper .company-dropdown {
   position: relative;
-  z-index: 5;
+  z-index: 15;
 }
 main .title_wrapper .company-dropdown .arrow {
   cursor: pointer;
@@ -7148,3 +7148,82 @@ main .dropdown_blocks_list.zero-margin.gibdd .dropdown_block .block_body .fines_
 .offer_selection:hover {
   text-decoration: underline;
 }
+.deal_list_item {
+  cursor: pointer;
+}
+.contract_invoices_list {
+  display: flex;
+  gap: 40px 20px;
+  flex-wrap: wrap;
+  padding-bottom: 40px;
+}
+.contract_invoices_list .invoice {
+  max-width: 23%;
+  width: 23%;
+  min-height: 90px;
+  border-bottom: solid 1px var(--gray-light);
+  border-left: solid 1px var(--gray-light);
+  padding-bottom: 10px;
+  align-items: flex-start;
+  justify-content: space-between;
+  display: flex;
+  flex-direction: column;
+}
+@media all and (max-width: 1280px) {
+  .contract_invoices_list .invoice {
+    max-width: 31%;
+    width: 31%;
+  }
+}
+@media all and (max-width: 900px) {
+  .contract_invoices_list .invoice {
+    max-width: 47%;
+    width: 47%;
+  }
+}
+@media all and (max-width: 400px) {
+  .contract_invoices_list .invoice {
+    max-width: 100%;
+    width: 100%;
+  }
+}
+.contract_invoices_list .invoice p {
+  line-height: 15px;
+  color: var(--text_not_active);
+}
+@media all and (max-width: 1280px) {
+  .contract_invoices_list .invoice p {
+    font-size: 13px;
+  }
+}
+.contract_invoices_list .invoice .actions {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  justify-content: flex-start;
+  width: 100%;
+  padding-left: 10px;
+}
+.contract_invoices_list .invoice .actions .icon {
+  margin-top: 5px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 56px;
+  height: 56px;
+  min-width: 56px;
+  min-height: 56px;
+  position: relative;
+  background: url(/assets/images/icons/icon-file.svg) no-repeat left center;
+  background-size: contain;
+  padding: 0;
+  zoom: 0.65;
+}
+.contract_invoices_list .invoice .actions .icon .extension {
+  font-weight: 600;
+  font-size: 12px;
+  color: #fff;
+}
+.contract_invoices_list .invoice .actions .download {
+  min-width: 82px;
+}

css/main/style.less

@@ -121,7 +121,7 @@ main {
 
 		.company-dropdown {
 			position: relative;
-            z-index: 5;
+			z-index: 15;
 
 			.arrow {
 				cursor: pointer;
@@ -8180,3 +8180,87 @@ main .dropdown_blocks_list.zero-margin.gibdd .dropdown_block {
 		text-decoration: underline;
 	}
 }
+
+.deal_list_item {
+	cursor: pointer;
+}
+
+.contract_invoices_list {
+	display: flex;
+    gap: 40px 20px;
+    flex-wrap: wrap;
+	padding-bottom: 40px;
+
+	.invoice {
+		max-width: 23%;
+		width: 23%;
+		min-height: 90px;
+		border-bottom: solid 1px var(--gray-light);
+		border-left: solid 1px var(--gray-light);
+		padding-bottom: 10px;
+
+		align-items: flex-start;
+		justify-content: space-between;
+		display: flex;
+		flex-direction: column;
+
+		@media all and (max-width: 1280px) {
+			max-width: 31%;
+			width: 31%;
+		}
+
+		@media all and (max-width: 900px) {
+			max-width: 47%;
+			width: 47%;
+		}
+
+		@media all and (max-width: 400px) {
+			max-width: 100%;
+			width: 100%;
+		}
+
+		p {
+			line-height: 15px;
+			color: var(--text_not_active);
+
+			@media all and (max-width: 1280px) {
+				font-size: 13px;
+			}				
+		}
+
+		.actions {
+			display: flex;
+			flex-direction: row;
+			align-items: flex-start;
+			justify-content: flex-start;
+			width: 100%;
+			padding-left: 10px;
+
+			.icon {
+				margin-top: 5px;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				width: 56px;
+				height: 56px;
+				min-width: 56px;
+				min-height: 56px;
+				position: relative;
+				background: url(/assets/images/icons/icon-file.svg) no-repeat left center;
+				background-size: contain;
+				padding: 0;
+				zoom: 0.65;
+
+				.extension {
+					font-weight: 600;
+					font-size: 12px;
+					color: #fff;
+				}
+			}
+
+			.download {
+				min-width: 82px;
+			}
+		}
+	}
+}

css/var.css

@@ -635,7 +635,9 @@ div {
   margin-top: 35px;
   margin-bottom: 15px;
 }
-.contracts_list_title {
+.contracts_list_title,
+.invoices_title,
+.schedule_title {
   font-size: 26px;
   font-weight: 700;
   line-height: 35px;
@@ -682,3 +684,9 @@ div {
   background: url("/assets/images/icons/close-white.svg") no-repeat center;
   background-size: 16px;
 }
+.invoices_title {
+  margin-top: 0px;
+}
+.schedule_title {
+  margin-bottom: 15px;
+}

css/var.less

@@ -732,3 +732,13 @@ div {
 		}
 	}
 }
+
+.invoices_title {
+	&:extend(.contracts_list_title);
+	margin-top: 0px;
+}
+
+.schedule_title {
+	&:extend(.contracts_list_title);
+	margin-bottom: 15px;
+}

pages/api/contract/invoice/download.js

@@ -0,0 +1,76 @@
+import fs from 'fs';
+import axios from 'axios';
+import { Cookies } from 'react-cookie';
+import cookie from 'cookie';
+import moment from 'moment';
+import jwt from 'jsonwebtoken';
+import { inspect } from 'util';
+
+export default async function handler(req, res) 
+{
+	console.log("\n\n", "API", "/contract/invoice/download");
+
+	const { entity_id, code } = req.query;
+	const payload = { 
+		entityId: entity_id, 
+		reportCodes: [ code ], 
+		createDocument: false, 
+		openFile: true, 
+	};
+
+	console.log({ payload });
+
+	return new Promise(async (resolve) => 
+	{
+		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({ acc_number: client_jwt_decoded.acc_number }, process.env.JWT_SECRET_CRM, { noTimestamp: true });
+
+				try
+				{
+					axios.post(`${ process.env.CRM_API_HOST }/File/GetWMDoc`, payload, {
+						responseType: 'arraybuffer', 
+						headers: {
+							"Authorization": `Bearer ${ crm_jwt }`, 
+							"Content-Type": "application/json", 
+						}, 
+					})
+					.then((crm_response) => 
+					{
+						res.status(200).send(crm_response.data);
+						resolve();
+					})
+					.catch((error) => 
+					{
+						console.error(error);
+						console.error(error.data);
+
+						res.status(500).send(error.data);
+						resolve();
+					});
+				}
+				catch(e)
+				{
+					console.error(e);
+					res.status(500).send(e);
+					resolve();
+				}
+			}
+			else
+			{
+				res.status(403).send();
+				resolve();
+			}
+		}
+		else
+		{
+			res.status(403).send();
+			resolve();
+		}
+	});
+}

pages/api/contract/invoice/fingap.js

@@ -0,0 +1,6 @@
+import CRMRequestGet from '../../../../lib/CRMRequestGet';
+
+export default async function handler(req, res) 
+{
+	await CRMRequestGet({ req, res, path: `${ process.env.CRM_API_HOST }/lk/Contract/GetFinGap`, params: { contract_number: req.body.number } });
+}

pages/api/contract/invoice/kasko.js

@@ -0,0 +1,6 @@
+import CRMRequestGet from '../../../../lib/CRMRequestGet';
+
+export default async function handler(req, res) 
+{
+	await CRMRequestGet({ req, res, path: `${ process.env.CRM_API_HOST }/lk/Contract/GetKasko`, params: { contract_number: req.body.number } });
+}

pages/api/contract/invoices.js

@@ -0,0 +1,6 @@
+import CRMRequestGet from '../../../lib/CRMRequestGet';
+
+export default async function handler(req, res) 
+{
+	await CRMRequestGet({ req, res, path: `${ process.env.CRM_API_HOST }/lk/Contract/GetInvoices`, params: { contract_number: req.body.number } });
+}

pages/components/Layout/Account/index.js

@@ -18,6 +18,22 @@ export default class AccountLayout extends React.Component
 			window.addEventListener("_track", this._handle_onTrack);
 			window.addEventListener("_move", this._handle_onMove);
 			window.addEventListener("_message", this._handle_onMessage);
+
+			const store = global.store.getState();
+			const { company, user } = store;
+
+			console.log("LAYOUT", "CDM", { store });
+
+			const payload = {
+				userID: user.email !== undefined && user.email !== null && user.email !== "" ? user.email : user.phone, 
+				companyID: company.active, 
+			};
+
+			if(payload.companyID !== undefined && payload.companyID !== null && payload.companyID !== "")
+			{
+				console.log("LAYOUT", "CDM", { payload });
+				ym(process.env.YANDEX_METRIKA_ID, 'userParams', payload);
+			}
 		}
 
 		console.log("CDM", { state: this.state });
@@ -37,6 +53,8 @@ export default class AccountLayout extends React.Component
 	{
 		//event.detail.path
 		console.log("LAYOUT", "_handle_onTrack", { event, props: this.props });
+
+		console.log({ ym });
 	}
 
 	_handle_onMove = (event) => 

pages/contract/index.js

@@ -14,10 +14,84 @@ import Footer from '../components/Footer';
 import Company from "../components/Company";
 import InnerMenu from "./components/InnerMenu";
 
-import { getContract, getContractDebtInvoiceFile, getContractInfo, getContractPenaltyInvoiceFile } from './../../actions';
+import { downloadInvoiceFile, getContract, getContractDebtInvoiceFile, getContractInfo, getContractInvoices, getContractPenaltyInvoiceFile, signGetGUIDEntity, signGetWMDoc } from './../../actions';
 import AccountLayout from "../components/Layout/Account";
 import ContractHeader from "./components/ContractHeader";
 
+class Invoice extends React.Component
+{
+	constructor(props)
+	{
+		super(props);
+		this.state = {
+			loading: false, 
+		}
+	}
+
+	_handle_downloadFile = () => 
+	{
+		const { group, contract_number } = this.props;
+
+		this.setState({ loading: true }, async () => 
+		{
+			switch(group.type)
+			{
+				case "kaskoProlong":
+				{
+				}
+				break;
+
+				case "fingapProlong":
+				{
+					
+				}
+				break;
+
+				default:
+				{
+					const guid_result = await signGetGUIDEntity({ contract_number });
+					console.log({ guid_result, code: group.code });
+					await downloadInvoiceFile({ payload: { entity_id: guid_result.entityid, code: group.code }, filename: `ЛК Эволюция - договор ${ contract_number } - ${ group.title }.pdf` });
+				}
+				break;
+			}
+
+			this.setState({ loading: false });
+		});
+	}
+
+	render()
+	{
+		const { group, invoices } = this.props;
+		const { loading } = this.state;
+
+		console.log({ invoices }, group.type)
+
+		if(invoices[group.type])
+		{
+			return (
+				<div className="invoice">
+					<p>{ group.title }</p>
+					<div className="actions">
+						<div className="icon">
+							<span className="extension">PDF</span>
+						</div>
+						<div className="download">
+							{ loading ? (
+								<SpinnerCircular style={{ margin: "8px 30px 0px", }} size={ 22 } thickness={ 100 } speed={ 100 } color="rgba(236, 239, 244, 1)" secondaryColor="rgba(28, 1, 169, 1)"/>
+							) : (
+								<button className="button blue" onClick={ this._handle_downloadFile }>Скачать</button>
+							) }
+						</div>
+					</div>
+				</div>
+			)
+		}
+
+		return null;
+	}
+}
+
 class ContractSchedulePage extends React.Component 
 {
 	constructor(props)
@@ -30,6 +104,7 @@ class ContractSchedulePage extends React.Component
 			avans: null, 
 			debt: null, 
 			penalty: null, 
+			invoices: {}, 
 			full: false, 
 			opened: [], 
 			debt_invoice_file_loading: false, 
@@ -45,6 +120,7 @@ class ContractSchedulePage extends React.Component
 			avans: nextProps.avans, 
 			debt: nextProps.debt, 
 			penalty: nextProps.penalty, 
+			invoices: nextProps.invoices, 
 		};
 	}
 
@@ -63,10 +139,18 @@ class ContractSchedulePage extends React.Component
 					getContractInfo({ dispatch, number });
 				}
 
-				getContract({ dispatch, number }).then(() => 
+				getContract({ dispatch, number })
+				.then(() => 
 				{
 					this.setState({ loading: false });
-				}).catch(() => {});
+				})
+				.catch(() => {});
+
+				getContractInvoices({ dispatch, number, })
+				.then(() => 
+				{
+				})
+				.catch(() => {});
 			});
 		}
 	}
@@ -155,7 +239,7 @@ class ContractSchedulePage extends React.Component
 	render()
 	{
 		const { number } = this.props;
-		const { loading, contracts_info, payments, avans, debt, penalty, full, opened, debt_invoice_file_loading, penalty_invoice_file_loading } = this.state;
+		const { loading, contracts_info, payments, avans, debt, penalty, full, opened, debt_invoice_file_loading, penalty_invoice_file_loading, invoices, } = this.state;
 
 		let { date, car, status } = contracts_info[ number ] !== undefined ? contracts_info[ number ] : {};
 
@@ -166,6 +250,15 @@ class ContractSchedulePage extends React.Component
 
 		//console.log("avans", avans);
 
+		const invoice_types = [
+			{ type: "firstPayment", title: "Счет на аванс", code: "Invoice_Payment", }, 
+			{ type: "nextPayment", title: "Счет на очередной платеж", code: "InvoicePlanPayment_attach", }, 
+			{ type: "osagoInvoice", title: "Счет ОСАГО", code: "OSAGO_Pay_contract", }, 
+			{ type: "kaskoInvoice", title: "Счет КАСКО", code: "KASKO_Pay_contract", }, 
+			{ type: "kaskoProlong", title: "Счет на пролонгацию КАСКО", }, 
+			{ type: "fingapInvoice", title: "Счет EvoSafeFinance", code: "Fingap_Pay_contract", }, 
+			{ type: "fingapProlong", title: "Счет на пролонгацию EvoSafeFinance", }, 
+		];
 
 		const statuses = {
 			"NotPaid": "", 
@@ -203,7 +296,9 @@ class ContractSchedulePage extends React.Component
 									</div>
 								</div>
 							) }
-							{/* Вариант 1 */}
+							{ invoices[number] !== undefined && (
+								<div><p className="invoices_title">Подготовленные счета</p></div>
+							) }
 							<div className="payments_actions">
 								{ parseInt(debt, 10) > 0 && (
 									<div>
@@ -231,6 +326,12 @@ class ContractSchedulePage extends React.Component
 									</div>
 								) }
 							</div>
+							<div className="contract_invoices_list">
+								{ invoices[number] !== undefined && invoice_types.map((group, index) => (
+									<Invoice group={ group } contract_number={ number } invoices={ invoices[number] } key={ index }/>
+								)) }
+							</div>
+							<div><p className="schedule_title">График платежей</p></div>
 							<div className="contract_table schedule">
 								<div className="table_row table_header">
 									<div className="table_cell">№ платежа</div>
@@ -345,6 +446,7 @@ function mapStateToProps(state, ownProps)
 		avans: state.contract.avans, 
 		debt: state.contract.debt, 
 		penalty: state.contract.penalty, 
+		invoices: state.invoices.list, 
 		//schedule: state.payments, 
 	}
 }

pages/contract/services.js

@@ -68,7 +68,7 @@ class Insurance extends React.Component
 								id={ entry.invoice_url } 
 								filename={ `${ entry.number }.${ entry.invoice_extension}` } 
 								title="Скачать счет на оплату" 
-								class={ "services_invoice_button" } 
+								className={ "services_invoice_button" } 
 								log={{ 
 									contract_number: number, 
 									document_type: `${ entry.period_type !== undefined ? entry.period_type : "current" }_polis_${ type }_invoice`, 

reducers/initialState.js

@@ -165,6 +165,9 @@ export const defaultState = {
 		page: 1, 
 		pages: 1, 
 	}, 
+	invoices: {
+		list: {}, 
+	}, 
 	contract: 
 	{ 
 		payments: null, 

reducers/invoicesReducer.js

@@ -0,0 +1,24 @@
+import * as actionTypes from '../constants/actionTypes';
+import initialState from "./initialState";
+
+const invoicesReducer = (state = initialState.invoices, action) => 
+{
+	switch (action.type) 
+	{
+		case actionTypes.INVOICES_LIST: 
+		{
+			const shrink = {};
+			shrink[ action.data.number ] = action.data.invoices;
+
+			return {
+				list: { ...state.list, ...shrink }, 
+			};
+		}
+
+		default: {
+			return state;
+		}
+	}
+};
+
+export default invoicesReducer;

store/index.js

@@ -7,6 +7,7 @@ import companyReducer from '../reducers/companyReducer';
 import companiesReducer from '../reducers/companiesReducer';
 import contractsReducer from '../reducers/contractsReducer';
 import contractReducer from '../reducers/contractReducer';
+import invoicesReducer from '../reducers/invoicesReducer';
 import calendarReducer from '../reducers/calendarReducer';
 import eventsReducer from '../reducers/eventsReducer';
 import supportReducer from '../reducers/supportReducer';
@@ -35,6 +36,7 @@ const combinedReducer = combineReducers({
 	questionnaire: questionnaireReducer, 
 	deals: dealsReducer, 
 	edo: edoReducer, 
+	invoices: invoicesReducer, 
 });
 
 const makeStore = (context) => 
@@ -52,7 +54,7 @@ const makeStore = (context) =>
 
 		const persistConfig = {
 			key: 'lkevoleasing', 
-			whitelist: [ 'auth', 'user', 'company', 'events', 'companies', 'contracts_info', 'contract_events', 'contract_fines', 'questionnaire', 'edo' ], 
+			whitelist: [ 'auth', 'user', 'company', 'events', 'companies', 'contracts_info', 'invoices', 'contract_events', 'contract_fines', 'questionnaire', 'edo' ], 
 			storage
 		};