pre-release part 1 fixes, contract info refactoring

actions/authActions.js

@@ -144,7 +144,7 @@ export const sendSmsCode = ({ dispatch, phone, code }) =>
 	});
 }
 
-export const logout = ({ dispatch }) => 
+export const logout = ({ dispatch, redirect = true }) => 
 {
 	return new Promise((resolve, reject) => 
 	{
@@ -156,9 +156,14 @@ export const logout = ({ dispatch }) =>
 		dispatch({ type: actionTypes.USER, data: {} });
 		dispatch({ type: actionTypes.COMPANY, data: {} });
 		dispatch({ type: actionTypes.CONTRACTS_INFO_RESET, data: {} });
+		dispatch({ type: actionTypes.EVENTS_RESET, data: {} });
+		dispatch({ type: actionTypes.SUPPORT_RESET, data: {} });
 
 		resolve();
-		Router.push('/');
+		if(redirect)
+		{
+			Router.push('/');
+		}
 	});
 }
 
@@ -235,3 +240,52 @@ export const getUsers = ({ dispatch }) =>
 		});
 	});
 }
+
+export const sendSwitchAccount = ({ dispatch, acc_number }) => 
+{
+	console.log("ACTION", "sendSwitchAccount()", `${ process.env.NEXT_PUBLIC_SELF_API_HOST }/api/auth/switch/`);
+
+	dispatch({ type: actionTypes.USER, data: {} });
+	dispatch({ type: actionTypes.COMPANY, data: {} });
+	dispatch({ type: actionTypes.CONTRACTS_INFO_RESET, data: {} });
+	dispatch({ type: actionTypes.EVENTS_RESET, data: {} });
+	dispatch({ type: actionTypes.SUPPORT_RESET, data: {} });
+
+	return new Promise((resolve, reject) => 
+	{
+		axios.post(`${ process.env.NEXT_PUBLIC_SELF_API_HOST }/api/auth/switch/`, { acc_number })
+		.then((response) => 
+		{
+			console.log("sendSwitchAccount RESPONSE");
+			console.log(response.data);
+
+			if(response.data.status === "success")
+			{
+				const cookies = new Cookies();
+				cookies.set('jwt', response.data.token, new Date(moment().add(7, 'day').toDate()));
+
+				getCompanyInfo({ dispatch })
+				.then(() => 
+				{
+					resolve();
+					Router.push('/');	
+				})
+				.catch(() => 
+				{
+					reject();
+				});
+			}
+			else
+			{
+				reject();
+			}
+		})
+		.catch((error) => 
+		{
+			console.error("sendSwitchAccount", "error");
+			console.error(error);
+
+			reject();
+		});
+	});
+}

actions/contractActions.js

@@ -71,7 +71,7 @@ export const getContractInfo = ({ dispatch, number, }) =>
 		})
 		.then((response) => 
 		{
-			const info = { date: response.data.dl_date, car: response.data.car };
+			const info = { date: response.data.dl_date, car: response.data.car, status: response.data.status };
 			dispatch({ type: actionTypes.CONTRACT_INFO, data: info });
 
 			const contract = {};

actions/fileActions.js

@@ -154,8 +154,7 @@ export const getReconciliationFile = ({ contract, date_from, date_to, filename }
 		})
 		.then((response) => 
 		{
-			console.log(response.data);
+			fileDownload(response.data, filename);
-			//fileDownload(response.data, filename);
 			resolve();
 		})
 		.catch((error) => 

constants/actionTypes.js

@@ -29,8 +29,10 @@ export const CONTRACT_CALCULATED = 'CONTRACT_CALCULATED';
 export const CALENDAR = 'CALENDAR';
 export const EVENTS = 'EVENTS';
 export const EVENTS_FILTERED = 'EVENTS_FILTERED';
+export const EVENTS_RESET = 'EVENTS_RESET';
 
 export const SUPPORT_THEMES = 'SUPPORT_THEMES';
 export const SUPPORT_THEMES_SEARCHED = 'SUPPORT_THEMES_SEARCHED';
 export const SUPPORT_APPEALS = 'SUPPORT_APPEALS';
 export const SUPPORT_APPEAL = 'SUPPORT_APPEAL';
+export const SUPPORT_RESET = 'SUPPORT_RESET';

css/forms/style.less

@@ -758,7 +758,7 @@
     }
 
     .modal {
-        max-width: 640px;
+        max-width: 700px;
         width: 100%;
         background: #fff;
         margin: 100px auto;
@@ -834,7 +834,7 @@
     }
 
     .modal {
-        max-width: 640px;
+        max-width: 700px;
         width: 100%;
         background: #fff;
         margin: 100px auto;

css/main/style.less

@@ -4588,6 +4588,13 @@ main .dropdown_blocks_list .dropdown_block .block_body {
             }
         }
     }
+
+	.help_tooltip_content {
+		ul {
+			list-style: unset;
+			margin-left: 10px;
+		}
+	}
 }
 
 .calc {
@@ -4660,6 +4667,13 @@ main .dropdown_blocks_list .dropdown_block .block_body {
             right: 0;
             top: 5px;
         }
+
+		.help_tooltip_content {
+			ul {
+				list-style: unset;
+			    margin-left: 10px;
+			}
+		}
     }
 }
 

pages/api/file/download.js

@@ -30,6 +30,18 @@ export default async function handler(req, res)
 				})
 				.then((crm_response) => 
 				{
+					console.log("GET FILE crm_response");
+					for(let i in crm_response)
+					{
+						if(i !== "data")
+						{
+							console.log(i);
+							console.log(crm_response[i]);
+							console.log(".".repeat(50));
+						}
+					}
+					console.log("-".repeat(50));
+
 					res.status(200).send(crm_response.data);
 				})
 				.catch((error) => 

pages/components/DownloadFileById/index.js

@@ -0,0 +1,47 @@
+import React from "react";
+import { SpinnerCircular } from 'spinners-react';
+
+import { getFile } from "../../../actions";
+
+export default class DownloadFileById extends React.Component 
+{
+	constructor(props)
+	{
+		super(props);
+		this.state = {
+			downloading: false, 
+		};
+	}
+
+	_handle_onDownloadFile = () => 
+	{
+		const { id, filename } = this.props;
+		const { downloading } = this.state;
+
+		if(!downloading)
+		{
+			this.setState({ downloading: true }, () => 
+			{
+				getFile({ id, filename })
+				.then(() => { this.setState({ downloading: false }); })
+				.catch(() => { this.setState({ downloading: false }); });	
+			});
+		}
+	}
+
+	render() 
+	{
+		const { id, filename, url, bitrix, title } = this.props;
+		const { downloading } = this.state;
+
+		return (
+			<span style={{ position: "relative" }} onClick={ this._handle_onDownloadFile }>
+				{ downloading ? (
+					<SpinnerCircular style={{ position: "absolute", top: "0px", left: "10px", }} size={ 18 } thickness={ 100 } speed={ 100 } color="rgba(255, 255, 255, 1)" secondaryColor="rgba(28, 1, 169, 1)" />
+				) : ( 
+					this.props.children 
+				) }
+			</span>
+		)
+	}
+}

pages/components/DownloadPdfButton/index.js

@@ -43,8 +43,9 @@ export default class DownloadPdfButton extends React.Component
 		const { id, filename, url, bitrix, title } = this.props;
 		const { downloading } = this.state;
 
+		const s = this.props.style !== undefined ? this.props.style : {};
 		return (
-			<a style={ { cursor: "pointer", opacity: (bitrix && url === null) || (!bitrix && id === null) ? 0.5 : 1.0 }} className="button button-blue" onClick={ () => { (bitrix && url === null) || (!bitrix && id === null) ? {} : this._handle_onDownloadFile() }}>
+			<a style={{ ...{ cursor: "pointer", opacity: (bitrix && url === null) || (!bitrix && id === null) ? 0.5 : 1.0 }, ...s }} className="button button-blue" onClick={ () => { (bitrix && url === null) || (!bitrix && id === null) ? {} : this._handle_onDownloadFile() }}>
 				{ downloading ? (
 					<SpinnerCircular size={24} thickness={100} speed={100} color="rgba(255, 255, 255, 1)" secondaryColor="rgba(255, 255, 255, 0.5)" />
 				) : title !== undefined ? title : "Скачать" }

pages/components/Events/NotificationMessage/index.js

@@ -30,9 +30,9 @@ export default class NotificationMessage extends React.Component
 
 				return (
 					<li className="new">
-						<p className="name"><b>Внимание! { days_left === 0 ? "Сегодня последний день" : `${ pluralize(days_left, "Осталось", "Остался", "Осталось", "Осталось") } ${ days_left } ${ pluralize(days_left, "дней", "день", "дня", "дней") } до` } пролонгации КАСКО по договору №{ event.contract_number } (полис { event.add_info }). Не забудьте самостоятельно продлить полис КАСКО!</b></p>
+						<p className="name"><b>Внимание! { days_left === 0 ? "Сегодня последний день" : `${ pluralize(days_left, "Осталось", "Остался", "Осталось", "Осталось") } ${ days_left } ${ pluralize(days_left, "дней", "день", "дня", "дней") } до` } пролонгации КАСКО по договору №{ event.contract_number } (полис { event.add_info }).</b></p>
 						{ event.important && (<p className="type">Важное</p>) }
-						<p className="date">{ event.event_date }</p>
+						<p className="date">{ moment(event.event_date).format("DD.MM.YYYY") }</p>
 						<p className="action">
 							<a className="interactive" onClick={ () => this._handle_onLink(`/contract/${ event.contract_number }/services#insurance`) }>Подробнее</a>
 						</p>
@@ -48,7 +48,7 @@ export default class NotificationMessage extends React.Component
 					<li className="new">
 						<p className="name"><b>Внимание! { days_left === 0 ? "Сегодня последний день" : `${ pluralize(days_left, "Осталось", "Остался", "Осталось", "Осталось") } ${ days_left } ${ pluralize(days_left, "дней", "день", "дня", "дней") } до` } пролонгации ОСАГО по договору №{ event.contract_number } (полис { event.add_info }). Не забудьте самостоятельно продлить полис ОСАГО!</b></p>
 						{ event.important && (<p className="type">Важное</p>) }
-						<p className="date">{ event.event_date }</p>
+						<p className="date">{ moment(event.event_date).format("DD.MM.YYYY") }</p>
 						<p className="action">
 							<a className="interactive" onClick={ () => this._handle_onLink(`/contract/${ event.contract_number }/services#insurance`) }>Подробнее</a>
 						</p>
@@ -62,9 +62,9 @@ export default class NotificationMessage extends React.Component
 
 				return (
 					<li className="new">
-						<p className="name"><b>Внимание! { days_left === 0 ? "Сегодня последний день" : `${ pluralize(days_left, "Осталось", "Остался", "Осталось", "Осталось") } ${ days_left } ${ pluralize(days_left, "дней", "день", "дня", "дней") } до` } пролонгации FinGAP по договору №{ event.contract_number }. Не забудьте самостоятельно продлить полис FinGAP!</b></p>
+						<p className="name"><b>Внимание! { days_left === 0 ? "Сегодня последний день" : `${ pluralize(days_left, "Осталось", "Остался", "Осталось", "Осталось") } ${ days_left } ${ pluralize(days_left, "дней", "день", "дня", "дней") } до` } пролонгации Safe Finance по договору №{ event.contract_number }.</b></p>
 						{ event.important && (<p className="type">Важное</p>) }
-						<p className="date">{ event.event_date }</p>
+						<p className="date">{ moment(event.event_date).format("DD.MM.YYYY") }</p>
 						<p className="action">
 							<a className="interactive" onClick={ () => this._handle_onLink(`/contract/${ event.contract_number }/services#insurance`) }>Подробнее</a>
 						</p>
@@ -78,7 +78,7 @@ export default class NotificationMessage extends React.Component
 					<li className="new">
 						<p className="name"><b>Внимание! Получен штраф ГИБДД по договору №{ event.contract_number } на сумму { event.add_info }.</b></p>
 						{ event.important && (<p className="type">Важное</p>) }
-						<p className="date">{ event.event_date }</p>
+						<p className="date">{ moment(event.event_date).format("DD.MM.YYYY") }</p>
 						<p className="action">
 							<Link href={`/contract/${ event.contract_number }/fines`}>
 								<a>Подробнее</a>
@@ -96,9 +96,9 @@ export default class NotificationMessage extends React.Component
 					<li className="new">
 						<p className="name"><b>Внимание! { days_left === 0 ? "Сегодня дата" : `${ pluralize(days_left, "Осталось", "Остался", "Осталось", "Осталось") } ${ days_left } ${ pluralize(days_left, "дней", "день", "дня", "дней") } до даты` } окончания договора №{ event.contract_number }.</b></p>
 						{ event.important && (<p className="type">Важное</p>) }
-						<p className="date">{ event.event_date }</p>
+						<p className="date">{ moment(event.event_date).format("DD.MM.YYYY") }</p>
 						<p className="action">
-							<Link href={`/contract/${ event.contract_number }`}>
+							<Link href={`/support/faq#68b86ac533992ce7db73d9b6f4e1bfc0`}>
 								<a>Посмотрите порядок оформления выкупа</a>
 							</Link>
 						</p>
@@ -110,9 +110,9 @@ export default class NotificationMessage extends React.Component
 			{
 				return (
 					<li className="new">
-						<p className="name"><b>Сформировано новое ДС №{ event.add_info} от { event.event_date } по договору №{ event.contract_number } от (НЕТ ДАТЫ). Срок подписания (НЕТ ДАТЫ).</b></p>
+						<p className="name"><b>Сформировано новое ДС №{ event.add_info} от { moment(event.event_date).format("DD.MM.YYYY") } по договору №{ event.contract_number }. Срок подписания (НЕТ ДАТЫ).</b></p>
 						{ event.important && (<p className="type">Важное</p>) }
-						<p className="date">{ event.event_date }</p>
+						<p className="date">{ moment(event.event_date).format("DD.MM.YYYY") }</p>
 						<p className="action">
 							<Link href={`/contract/${ event.contract_number }/agreement`}>
 								<a>Посмотреть дополнительное соглашение</a>
@@ -132,7 +132,7 @@ export default class NotificationMessage extends React.Component
 							<p className="name"><b>Приближается дата возврата СТС по договору №{ event.contract_number }. Посмотрите порядок возврата СТС или загрузите скан СТС по ссылке.</b></p>
 						) }
 						{ event.important && (<p className="type">Важное</p>) }
-						<p className="date">{ event.event_date }</p>
+						<p className="date">{ moment(event.event_date).format("DD.MM.YYYY") }</p>
 						<p className="action">
 							<Link href="/support/faq#68249d3b3ef51d25ff5f9433e8a7d60a">
 								<a>Посмотрите порядок возврата СТС</a>

pages/components/Header/index.js

@@ -26,6 +26,7 @@ class Header extends React.Component
 		return {
 			observer: nextProps.observer, 
 			events: nextProps.events, 
+			events_loaded: nextProps.events_loaded, 
 			appeals: nextProps.appeals, 
 		};
 	}
@@ -42,7 +43,7 @@ class Header extends React.Component
 	{
 		if(!prevState.events_loaded)
 		{
-			this.setState({ events_loaded: true });
+			//this.setState({ events_loaded: true });
 		}
 	}
 
@@ -211,7 +212,7 @@ class Header extends React.Component
 							<a data-icon="phone" className="button">Телефон</a>
 						</li>
 						<li>
-							<a data-icon="notify" data-notify={ events.length } className="button" onClick={ this._handle_onToggleNotifications }>
+							<a data-icon="notify" data-notify={ events !== undefined && events !== null ? events.length : 0 } className="button" onClick={ this._handle_onToggleNotifications }>
 								Уведомления
 							</a>
 							<div className={`backdrop ${ notificationsOpened && "opened" }`}>
@@ -255,6 +256,7 @@ function mapStateToProps(state, ownProps)
 	return {
 		observer: state.auth.observer, 
 		events: state.events.list, 
+		events_loaded: state.events.loaded, 
 		appeals: state.support.appeals.new, 
 	}
 }

pages/components/Modal/calendar.js

@@ -32,6 +32,14 @@ class CalendarCellModal extends Component
 		const {menuOpened, activeLink} = this.state;
 		const { selected_payment } = this.props;
 		
+		const types = {
+			leasing: "Платеж", 
+			kasko: "КАСКО", 
+			osago: "ОСАГО", 
+			fingap: "Safe Finance", 
+		};
+		console.log("selected_payment", selected_payment);
+
 		return (
 			<div className={this.props.open ? "fade opened" : "fade"}>
 				<div className="modal">
@@ -46,6 +54,7 @@ class CalendarCellModal extends Component
 						<div className="payment_table">
 							<div className="table_row table_header">
 								<div className="table_cell">Договор</div>
+								<div className="table_cell">Тип платежа</div>
 								<div className="table_cell">Платеж</div>
 							</div>
 							{ selected_payment && selected_payment.payments.map((payment, index) => (
@@ -55,6 +64,9 @@ class CalendarCellModal extends Component
 											<a>№{ payment.contract.number } от { moment(payment.contract.date, "DD-MM-YYYY").format("DD.MM.YYYY") }</a>
 										</Link>
 									</div>
+									<div className="table_cell">
+										{ types[payment.type] }
+									</div>
 									<div className="table_cell">
 										<b style={{ whiteSpace: "nowrap" }}>{ numeral(payment.total_amount).format(' ., ') } ₽</b>
 									</div>

pages/contract/agreement.js

@@ -30,22 +30,18 @@ class ContractPage extends React.Component
 		super(props);
 		this.state = 
 		{
-			date: null,
+			loading: false,
-			car: null,
+			contracts_info: {}, 
-			contract_date: null,
 			unsigned: null,
 			signed: null,
 			rules: null,
-			loading: false,
 		};
 	}
 
 	static getDerivedStateFromProps(nextProps, prevState) 
 	{
 		return {
-			date: nextProps.date, 
+			contracts_info: nextProps.contracts_info, 
-			car: nextProps.car, 
-			contract_date: nextProps.contract_date, 
 			unsigned: nextProps.unsigned, 
 			signed: nextProps.signed, 
 			rules: nextProps.rules, 
@@ -54,38 +50,49 @@ class ContractPage extends React.Component
 
 	componentDidMount() 
 	{
-		if (!this.state.loading && this.props.number !== undefined) 
+		const { dispatch, number} = this.props;
+
+		if (!this.state.loading && number !== undefined) 
 		{
 			this.setState({ loading: true }, () => 
 			{
-				getContractInfo({
+				if(this.state.contracts_info[ number ] === undefined)
-					dispatch: this.props.dispatch,
+				{
-					number: this.props.number,
+					getContractInfo({ dispatch, number })
-				})
+					.then((contract_info) => 
-				.then((info) => {
+					{
-					console.log("info", info);
+						const { date } = contract_info;
-
+						this._loadData(date);	
-					getContractRules({
+					});
-						dispatch: this.props.dispatch,
+				}
-						date: moment(info.date, "YYYY-MM-DD").format("DD.MM.YYYY"),
+				else
-					})
+				{
-					.then(() => {})
+					const { date } = this.state.contracts_info[ number ];
-					.catch(() => {});
+					this._loadData(date);
-				})
+				}
-				.catch(() => {});
-
-				getContractAgreement({
-					dispatch: this.props.dispatch,
-					number: this.props.number,
-				})
-				.then(() => {
-					this.setState({ loading: false });
-				})
-				.catch(() => {});
 			});
 		}
 	}
 
+	_loadData = (date) => 
+	{
+		const { dispatch, number} = this.props;
+
+		getContractRules({
+			dispatch,
+			date: moment(date, "YYYY-MM-DD").format("DD.MM.YYYY"),
+		})
+		.then(() => {})
+		.catch(() => {});
+
+		getContractAgreement({ dispatch, number, })
+		.then(() => 
+		{
+			this.setState({ loading: false });
+		})
+		.catch(() => {});
+	}
+
 	_renderDocuments = (documents, type) => 
 	{
 		const types = {
@@ -119,7 +126,9 @@ class ContractPage extends React.Component
 	render() 
 	{
 		const { number } = this.props;
-		const { loading, date, car, contract_date, unsigned, signed, rules } = this.state;
+		const { loading, contracts_info, unsigned, signed, rules } = this.state;
+
+		let { date, car, status } = contracts_info[ number ] !== undefined ? contracts_info[ number ] : {};
 
 		console.log("rules", rules);
 		console.log("unsigned", unsigned);
@@ -147,7 +156,7 @@ class ContractPage extends React.Component
 						<Company { ...this.props }/>
 					</div>
 					<div className="aside_container about">
-						<InnerMenu number={ number } { ...this.props } />
+						<InnerMenu number={ number } status={ status } { ...this.props } />
 						<article>
 							{ loading ? (
 								<div className="table_row table_header" style={ { minHeight: 300, display: "flex", justifyContent: "center", alignItems: "center", } }>
@@ -198,9 +207,7 @@ class ContractPage extends React.Component
 function mapStateToProps(state, ownProps) 
 {
 	return {
-		contract_date: state.contract.date,
+		contracts_info: state.contracts_info, 
-		date: state.contract.date,
-		car: state.contract.car,
 		unsigned: state.contract.agreement.unsigned,
 		signed: state.contract.agreement.signed,
 		rules: state.contract.rules,

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

@@ -80,6 +80,8 @@ export default class VariantsList extends React.Component
 							const disabled = this._checkVariant(variant.type);
 							const help = this._getVariantHelp(variant.type);
 
+							console.log("help", help);
+
 							return (
 								<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) } }/>
@@ -94,14 +96,14 @@ export default class VariantsList extends React.Component
 													<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">
+											<div className="help_content">
-												{" "}
+											{" "}
-													{/* opened */}
+												{/* opened */}
-													<div>
+												<div>
-														<p dangerouslySetInnerHTML={{ __html: help }}/>
+													<p className="help_tooltip_content" dangerouslySetInnerHTML={{ __html: help }}/>
-														<p className="button">Закрыть</p>
+													<p className="button">Закрыть</p>
-													</div>
 												</div>
+											</div>
 										</div>
 									) }
 								</div>

pages/contract/components/InnerMenu/index.js

@@ -61,7 +61,7 @@ export default class InnerMenu extends React.Component
 	render()
 	{
 		const { menuOpened, count_events, count_fines } = this.state;
-		const { number } = this.props;
+		const { number, status } = this.props;
 
 		return (
 			<aside>
@@ -74,11 +74,13 @@ export default class InnerMenu extends React.Component
 							<a className={ this.props.router && this.props.router.asPath.indexOf("payments") > -1 ? "active" : "" }>График платежей</a>
 						</Link>
 					</li>
-					<li>
+					{ status !== undefined && status !== null && [46, 36, 37, 35].indexOf(status) > -1 && (
-						<Link href={`/contract/${ number }/change`} shallow>
+						<li>
-							<a className={ this.props.router && this.props.router.asPath.indexOf("change") > -1 ? "active" : "" }>Изменить график</a>
+							<Link href={`/contract/${ number }/change`} shallow>
-						</Link>
+								<a className={ this.props.router && this.props.router.asPath.indexOf("change") > -1 ? "active" : "" }>Изменить график</a>
-					</li>
+							</Link>
+						</li>
+					) }
 					<li>
 						<Link href={`/contract/${ number }/services`} shallow>
 							<a className={ this.props.router && this.props.router.asPath.indexOf("services") > -1 ? "active" : "" }>Дополнительные услуги</a>

pages/contract/components/ReconciliationForm/index.js

@@ -0,0 +1,204 @@
+import React from "react";
+import moment from "moment";
+import { SpinnerCircular } from "spinners-react";
+
+import DateInput from "../../../components/DatePicker";
+
+import { getReconciliationFile } from "../../../../actions";
+
+export default class ReconciliationForm extends React.Component 
+{
+	constructor(props) 
+	{
+		super(props);
+		this.state = {
+			loading: false, 
+			valid_date_start: null, 
+			valid_date_end: null, 
+			period_date_start: null, 
+			period_date_end: null, 
+			reconciliation_requested: false, 
+			reconciliation_disabled: false, 
+		};
+	}
+
+	componentDidMount() 
+	{
+		const de = moment().toDate();
+		this.setState( { period_date_end: de, valid_date_end: de }, );
+	}
+
+	componentDidUpdate(prevProps, prevState) 
+	{
+		if (this.state.period_date_start === null && this.props.contract_date !== null) 
+		{
+			const ds = moment(this.props.contract_date).toDate();
+			this.setState({ period_date_start: ds, valid_date_start: ds });
+		}
+	}
+
+	_handle_onReconciliationFileRequest = () => 
+	{
+		const { number } = this.props;
+		const { reconciliation_requested, period_date_start, period_date_end } = this.state;
+
+		if (!reconciliation_requested) 
+		{
+			this.setState({ reconciliation_requested: true }, () => 
+			{
+				const date_from = moment(period_date_start).format("YYYY-MM-DD");
+				const date_to = moment(period_date_end).format("YYYY-MM-DD");
+
+				getReconciliationFile({
+					contract: number,
+					date_from: date_from,
+					date_to: date_to,
+					filename: `${ number }_reconciliation_${ date_from }_${ date_to }.pdf`,
+				})
+				.then(() => {
+					this.setState({ reconciliation_requested: false });
+				})
+				.catch(() => {
+					this.setState({ reconciliation_requested: false });
+				});
+			});
+		}
+	};
+
+	_handle_onPeriodDate_start = (date) => 
+	{
+		const {
+			valid_date_start,
+			valid_date_end,
+			period_date_start,
+			period_date_end,
+		} = this.state;
+
+		const md = moment(date, "DD.MM.YYYY");
+
+		if (md.isValid()) 
+		{
+			if (date >= valid_date_start && date <= valid_date_end) 
+			{
+				if (date < period_date_end) 
+				{
+					this.setState({
+						period_date_start: date,
+						reconciliation_disabled: false,
+					});
+				} 
+				else 
+				{
+					this.setState({
+						period_date_start: date,
+						reconciliation_disabled: true,
+					});
+				}
+			} 
+			else 
+			{
+				this.setState({
+					period_date_start: date,
+					reconciliation_disabled: true,
+				});
+			}
+		} 
+		else 
+		{
+			this.setState({ reconciliation_disabled: true });
+		}
+	};
+
+	_handle_onPeriodDate_end = (date) => 
+	{
+		const {
+			valid_date_start,
+			valid_date_end,
+			period_date_start,
+			period_date_end,
+		} = this.state;
+
+		if (moment(date).isValid()) 
+		{
+			if (date >= valid_date_start && date <= valid_date_end) 
+			{
+				if (date > period_date_start) 
+				{
+					this.setState({
+						period_date_end: date,
+						reconciliation_disabled: false,
+					});
+				} 
+				else 
+				{
+					this.setState({
+						period_date_end: date,
+						reconciliation_disabled: true,
+					});
+				}
+			} 
+			else 
+			{
+				this.setState({ period_date_end: date, reconciliation_disabled: true });
+			}
+		} 
+		else 
+		{
+			this.setState({ reconciliation_disabled: true });
+		}
+	};
+
+	render() 
+	{
+		const {
+			period_date_start,
+			period_date_end,
+			valid_date_start,
+			valid_date_end,
+			reconciliation_requested,
+			reconciliation_disabled,
+		} = this.state;
+
+		return (
+			<div className="reconciliation_form">
+				<p>Акт сверки</p>
+				<div className="form_group">
+					<div className="form_field">
+						<DateInput 
+							placeholder="Дата начала периода" 
+							value={ period_date_start } 
+							min={ valid_date_start } 
+							max={ valid_date_end } 
+							onChange={ this._handle_onPeriodDate_start } 
+						/>
+					</div>
+					<div className="form_field">
+						<DateInput 
+							placeholder="Дата окончания периода" 
+							value={ period_date_end } 
+							min={ valid_date_start } 
+							max={ valid_date_end } 
+							onChange={ this._handle_onPeriodDate_end } 
+						/>
+					</div>
+				</div>
+				<div className="form_group">
+					<button
+						className="button button-blue"
+						disabled={ reconciliation_disabled }
+						onClick={ () => { this._handle_onReconciliationFileRequest(); }}
+					>
+						<>
+							{ reconciliation_requested ? (
+								<SpinnerCircular size={ 24 } thickness={ 100 } speed={ 100 } color="rgba(255, 255, 255, 1)" secondaryColor="rgba(255, 255, 255, 0.5)"/>
+							) : (
+								"Скачать"
+							) }
+						</>
+					</button>
+					{/*<button className="button button-blue">Отправить в ЭДО</button>*/}
+				</div>
+			</div>
+		);
+	}
+}

pages/contract/documents.js

@@ -31,6 +31,7 @@ import {
 } from "../../actions";
 import AccountLayout from "../components/Layout/Account";
 import ContractHeader from "./components/ContractHeader";
+import ReconciliationForm from "./components/ReconciliationForm";
 
 const TYPES = {
 	upd: "УПД по очередным платежам",
@@ -46,12 +47,13 @@ class ContractDocumentsPage extends React.Component
 	{
 		super(props);
 		this.state = {
+			loading: false, 
+			contracts_info: {}, 
 			opened: [], 
 			date: null, 
 			car: null, 
 			contract_date: null, 
 			documents: null, 
-			loading: false, 
 			valid_date_start: null, 
 			valid_date_end: null, 
 			period_date_start: null, 
@@ -69,52 +71,36 @@ class ContractDocumentsPage extends React.Component
 	static getDerivedStateFromProps(nextProps, prevState) 
 	{
 		return {
-			date: nextProps.date,
+			contracts_info: nextProps.contracts_info, 
-			car: nextProps.car,
-			contract_date: nextProps.contract_date,
 			documents: nextProps.documents,
 		};
 	}
 
 	componentDidMount() 
 	{
-		if (!this.state.loading && this.props.number !== undefined) 
+		const { dispatch, number} = this.props;
-		{
-			const de = moment().toDate();
-			this.setState(
-				{ loading: true, period_date_end: de, valid_date_end: de },
-				() => {
-					getContractInfo({
-						dispatch: this.props.dispatch,
-						number: this.props.number,
-					});
 
-					getContractDocuments({
+		if(!this.state.loading && number !== undefined) 
-						dispatch: this.props.dispatch,
+		{
-						number: this.props.number,
+			if(this.state.contracts_info[ number ] === undefined)
-					})
+			{
-					.then(() => {
+				getContractInfo({ dispatch, number });
+			}
+	
+			this.setState({ loading: true }, () => 
+			{
+				getContractDocuments({ dispatch, number, })
+				.then(() => 
+				{
 					this.setState({ loading: false });
-					})
+				})
-					.catch(() => {});
+				.catch(() => {});
-				}
+			});
-			);
 		}
 	}
 
 	componentDidUpdate(prevProps, prevState) 
 	{
-		if (this.state.period_date_start === null) 
-		{
-			if (
-				prevState.contract_date === null &&
-				this.state.contract_date !== null
-			) {
-				const ds = moment(this.state.contract_date).toDate();
-				this.setState({ period_date_start: ds, valid_date_start: ds });
-			}
-		}
-
 		if (prevState.loading && this.state.loading)
 		{
 			if(document.location.hash.indexOf("penalties") > -1)
@@ -134,116 +120,6 @@ class ContractDocumentsPage extends React.Component
 		}
 	}
 
-	_handle_onReconciliationFileRequest = () => 
-	{
-		const { number } = this.props;
-		const { reconciliation_requested, period_date_start, period_date_end } = this.state;
-
-		if (!reconciliation_requested) 
-		{
-			this.setState({ reconciliation_requested: true }, () => 
-			{
-				const date_from = moment(period_date_start).format("YYYY-MM-DD");
-				const date_to = moment(period_date_end).format("YYYY-MM-DD");
-
-				getReconciliationFile({
-					contract: number,
-					date_from: date_from,
-					date_to: date_to,
-					filename: `${number}_reconciliation_${date_from}_${date_to}.pdf`,
-				})
-				.then(() => {
-					this.setState({ reconciliation_requested: false });
-				})
-				.catch(() => {
-					this.setState({ reconciliation_requested: false });
-				});
-			});
-		}
-	};
-
-	_handle_onPeriodDate_start = (date) => 
-	{
-		const {
-			valid_date_start,
-			valid_date_end,
-			period_date_start,
-			period_date_end,
-		} = this.state;
-		const md = moment(date, "DD.MM.YYYY");
-
-		if (md.isValid()) 
-		{
-			if (date >= valid_date_start && date <= valid_date_end) 
-			{
-				if (date < period_date_end) 
-				{
-					this.setState({
-						period_date_start: date,
-						reconciliation_disabled: false,
-					});
-				} 
-				else 
-				{
-					this.setState({
-						period_date_start: date,
-						reconciliation_disabled: true,
-					});
-				}
-			} 
-			else 
-			{
-				this.setState({
-				period_date_start: date,
-				reconciliation_disabled: true,
-				});
-			}
-		} 
-		else 
-		{
-			this.setState({ reconciliation_disabled: true });
-		}
-	};
-
-	_handle_onPeriodDate_end = (date) => 
-	{
-		const {
-			valid_date_start,
-			valid_date_end,
-			period_date_start,
-			period_date_end,
-		} = this.state;
-
-		if (moment(date).isValid()) 
-		{
-			if (date >= valid_date_start && date <= valid_date_end) 
-			{
-				if (date > period_date_start) 
-				{
-					this.setState({
-						period_date_end: date,
-						reconciliation_disabled: false,
-					});
-				} 
-				else 
-				{
-					this.setState({
-						period_date_end: date,
-						reconciliation_disabled: true,
-					});
-				}
-			} 
-			else 
-			{
-				this.setState({ period_date_end: date, reconciliation_disabled: true });
-			}
-		} 
-		else 
-		{
-			this.setState({ reconciliation_disabled: true });
-		}
-	};
-
 	_handle_onGroup = (group) => 
 	{
 		const opened = [...this.state.opened];
@@ -380,23 +256,9 @@ class ContractDocumentsPage extends React.Component
 	render() 
 	{
 		const { number } = this.props;
-		const {
+		const { loading, contracts_info, documents, penalties, penalties_date, penalties_result, } = this.state;
-			loading,
+
-			date,
+		let { date, car, status } = contracts_info[ number ] !== undefined ? contracts_info[ number ] : {};
-			car,
-			contract_date,
-			documents,
-			period_date_start,
-			period_date_end,
-			valid_date_start,
-			valid_date_end,
-			reconciliation_requested,
-			reconciliation_disabled,
-			opened,
-			penalties, 
-			penalties_date, 
-			penalties_result, 
-		} = this.state;
 
 		return (
 			<React.Fragment>
@@ -465,7 +327,7 @@ class ContractDocumentsPage extends React.Component
 								<Company { ...this.props }/>
 							</div>
 							<div className="aside_container about">
-								<InnerMenu number={ number } { ...this.props }/>
+								<InnerMenu number={ number } status={ status } { ...this.props }/>
 								<article>
 									{ loading ? (
 										<div
@@ -487,47 +349,7 @@ class ContractDocumentsPage extends React.Component
 										</div>
 									) : (
 										<>
-											<div className="reconciliation_form">
+											<ReconciliationForm number={ number } contract_date={ date }/>
-												<p>Акт сверки</p>
-												<div className="form_group">
-													<div className="form_field">
-														<DateInput
-															placeholder="Дата начала периода"
-															value={period_date_start}
-															min={valid_date_start}
-															max={valid_date_end}
-															onChange={this._handle_onPeriodDate_start}
-														/>
-													</div>
-													<div className="form_field">
-														<DateInput
-															placeholder="Дата окончания периода"
-															value={period_date_end}
-															min={valid_date_start}
-															max={valid_date_end}
-															onChange={this._handle_onPeriodDate_end}
-														/>
-													</div>
-												</div>
-												<div className="form_group">
-													<button
-														className="button button-blue"
-														disabled={reconciliation_disabled}
-														onClick={() => {
-															this._handle_onReconciliationFileRequest();
-														}}
-													>
-														<>
-															{reconciliation_requested ? (
-																<SpinnerCircular size={ 24 } thickness={ 100 } speed={ 100 } color="rgba(255, 255, 255, 1)" secondaryColor="rgba(255, 255, 255, 0.5)"/>
-															) : (
-																"Скачать"
-															)}
-														</>
-													</button>
-													{/*<button className="button button-blue">Отправить в ЭДО</button>*/}
-												</div>
-											</div>
 											<div className="dropdown_blocks_list">
 												{documents !== undefined && documents !== null ? (
 													<>
@@ -564,9 +386,7 @@ class ContractDocumentsPage extends React.Component
 function mapStateToProps(state, ownProps) 
 {
 	return {
-		contract_date: state.contract.date,
+		contracts_info: state.contracts_info, 
-		date: state.contract.date,
-		car: state.contract.car,
 		documents: state.contract.documents,
 	};
 }
@@ -583,19 +403,3 @@ export const getServerSideProps = reduxWrapper.getServerSideProps(
 );
 
 export default withRouter(connect(mapStateToProps)(ContractDocumentsPage));
-
-{
-/*}
-	<div className="block_body">
-		<div className="transaction_detail">
-			<p>№ постановления: <b>3432434242334</b></p>
-			<ul>
-				<li>Сумма: <b>3 000,00 р.</b></li>
-				<li>Дата:  <b>01/01/2020</b></li>
-				<li>Статус: <b className="success">Оплачен</b></li>
-				<li>Штраф: п. 1.15 - Несоблюдение правил парковки </li>
-			</ul>
-		</div>
-	</div>
-{*/
-}

pages/contract/events.js

@@ -25,21 +25,17 @@ class ContractPage extends React.Component
 	{
 		super(props);
 		this.state = {
-			date: null,
+			loading: true,
-			car: null,
+			contracts_info: {}, 
-			contract_date: null,
 			events_loaded: false, 
 			filtered: undefined, 
-			loading: true,
 		};
 	}
 
 	static getDerivedStateFromProps(nextProps, prevState) 
 	{
 		return {
-			date: nextProps.date,
+			contracts_info: nextProps.contracts_info, 
-			car: nextProps.car,
-			contract_date: nextProps.contract_date,
 			events_loaded: nextProps.events_loaded,
 			filtered: nextProps.filtered,
 		};
@@ -47,11 +43,16 @@ class ContractPage extends React.Component
 
 	componentDidMount() 
 	{
-		getContractInfo({ dispatch: this.props.dispatch, number: this.props.number });
+		const { dispatch, number} = this.props;
+
+		if(this.state.contracts_info[ number ] === undefined)
+		{
+			getContractInfo({ dispatch, number });
+		}
 
 		if(this.state.events_loaded)
 		{
-			getFilteredEvents({ dispatch: this.props.dispatch, contract: this.props.number });
+			getFilteredEvents({ dispatch, contract: number });
 		}
 	}
 
@@ -66,9 +67,9 @@ class ContractPage extends React.Component
 	render() 
 	{
 		const { number } = this.props;
-		const { loading, date, car, contract_date, events_loaded, filtered, } = this.state;
+		const { loading, contracts_info, events_loaded, filtered, } = this.state;
 
-		//console.log("rules", rules);
+		let { date, car, status } = contracts_info[ number ] !== undefined ? contracts_info[ number ] : {};
 
 		return (
 			<React.Fragment>
@@ -85,7 +86,7 @@ class ContractPage extends React.Component
 						<Company { ...this.props }/>
 					</div>
 					<div className="aside_container about">
-						<InnerMenu number={ number } { ...this.props } />
+						<InnerMenu number={ number } status={ status } { ...this.props } />
 						<article>
 							{ filtered !== undefined ? (
 								<>
@@ -142,9 +143,7 @@ class ContractPage extends React.Component
 function mapStateToProps(state, ownProps) 
 {
 	return {
-		contract_date: state.contract.date,
+		contracts_info: state.contracts_info, 
-		date: state.contract.date,
-		car: state.contract.car,
 		events_loaded: state.events.loaded, 
 		filtered: state.events.filtered, 
 	};

pages/contract/fines.js

@@ -39,18 +39,10 @@ class ContractFinesPage extends React.Component
 	{
 		super(props);
 		this.state = {
-			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, 
 			contracts_info: [], 
+			fines: null, 
+			all: false, 
 		};
 	}
 
@@ -58,50 +50,34 @@ class ContractFinesPage extends React.Component
 	{
 		return {
 			contracts_info: nextProps.contracts_info, 
-			date: nextProps.date,
-			car: nextProps.car,
-			contract_date: nextProps.contract_date,
 			fines: nextProps.fines,
 		};
 	}
 
 	componentDidMount() 
 	{
-		if (!this.state.loading && this.props.number !== undefined) 
+		const { dispatch, number} = this.props;
-		{
-			this.setState(
-				{ loading: true },
-				() => {
-					getContractInfo({
-						dispatch: this.props.dispatch,
-						number: this.props.number,
-					});
 
-					getContractFines({
+		if(!this.state.loading && number !== undefined) 
-						dispatch: this.props.dispatch,
+		{
-						number: this.props.number,
+			this.setState({ loading: true }, () => 
-					})
+			{
-					.then(() => {
+				if(this.state.contracts_info[ number ] === undefined)
-						this.setState({ loading: false });
+				{
-					})
+					getContractInfo({ dispatch, number });
-					.catch(() => {});
 				}
-			);
+	
+				getContractFines({ dispatch, number }).then(() => 
+				{
+					this.setState({ loading: false });
+				})
+				.catch(() => {});
+			});
 		}
 	}
 
 	componentDidUpdate(prevProps, prevState) 
 	{
-		if (this.state.period_date_start === null) 
-		{
-			if (
-				prevState.contract_date === null &&
-				this.state.contract_date !== null
-			) {
-				const ds = moment(this.state.contract_date).toDate();
-				this.setState({ period_date_start: ds, valid_date_start: ds });
-			}
-		}
 	}
 
 	_handle_onShowMore = () => 
@@ -242,13 +218,9 @@ class ContractFinesPage extends React.Component
 	render() 
 	{
 		const { number } = this.props;
-		const {
+		const { loading, contracts_info, fines, } = this.state;
-			loading,
+
-			date,
+		let { date, car, status } = contracts_info[ number ] !== undefined ? contracts_info[ number ] : {};
-			car,
-			contract_date,
-			fines,
-		} = this.state;
 
 		console.log("fines");
 		console.log(fines);
@@ -268,7 +240,7 @@ class ContractFinesPage extends React.Component
 						<Company { ...this.props }/>
 					</div>
 					<div className="aside_container about">
-						<InnerMenu number={ number } { ...this.props }/>
+						<InnerMenu number={ number } status={ status } { ...this.props }/>
 						<article>
 							{ loading ? (
 								<div className="table_row table_header" style={{ minHeight: 300, display: "flex", justifyContent: "center", alignItems: "center", }}>

pages/contract/index.js

@@ -30,8 +30,6 @@ class ContractSchedulePage extends React.Component
 			avans: null, 
 			debt: null, 
 			penalty: null, 
-			date: null, 
-			car: null, 
 			full: false, 
 			opened: [], 
 			debt_invoice_file_loading: false, 
@@ -43,8 +41,6 @@ class ContractSchedulePage extends React.Component
 	{
 		return {
 			contracts_info: nextProps.contracts_info, 
-			date: nextProps.date, 
-			car: nextProps.car, 
 			payments: nextProps.payments, 
 			avans: nextProps.avans, 
 			debt: nextProps.debt, 
@@ -55,7 +51,7 @@ class ContractSchedulePage extends React.Component
 	componentDidMount()
 	{
 		console.log("ContractSchedulePage", "this.state", this.state);
-		const { number } = this.props;
+		const { dispatch, number } = this.props;
 
 		if(!this.state.loading && number !== undefined)
 		{
@@ -63,10 +59,11 @@ class ContractSchedulePage extends React.Component
 			{
 				if(this.state.contracts_info[ number ] === undefined)
 				{
-					getContractInfo({ dispatch: this.props.dispatch, number: number });
+					getContractInfo({ dispatch, number });
 				}
 
-				getContract({ dispatch: this.props.dispatch, number: number }).then(() => {
+				getContract({ dispatch, number }).then(() => 
+				{
 					this.setState({ loading: false });
 				}).catch(() => {});
 			});	
@@ -159,7 +156,7 @@ class ContractSchedulePage extends React.Component
 		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 ] : {};
+		let { date, car, status } = contracts_info[ number ] !== undefined ? contracts_info[ number ] : {};
 
 		console.log("RENDER", "payments");
 		console.log(payments);
@@ -193,7 +190,7 @@ class ContractSchedulePage extends React.Component
 						<Company { ...this.props }/>
 					</div>
 					<div className="aside_container about">
-						<InnerMenu number={ number } { ...this.props }/>
+						<InnerMenu number={ number } status={ status } { ...this.props }/>
 						<article>
 							{ parseInt(avans, 10) > 0 && (
 								<div className="payments_actions"> 
@@ -339,14 +336,11 @@ class ContractSchedulePage extends React.Component
 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, 
 		penalty: state.contract.penalty, 
-		date: state.contract.date, 
-		car: state.contract.car, 
 		//schedule: state.payments, 
 	}
 }

pages/contract/materials.js

@@ -24,20 +24,16 @@ class ContractPage extends React.Component
 	{
 		super(props);
 		this.state = {
-			date: null, 
-			car: null, 
-			contract_date: null, 
-			materials: null, 
 			loading: false, 
+			contracts_info: {}, 
+			materials: null, 
 		}
 	}
 
 	static getDerivedStateFromProps(nextProps, prevState)
 	{
 		return {
-			date: nextProps.date, 
+			contracts_info: nextProps.contracts_info, 
-			car: nextProps.car, 
-			contract_date: nextProps.contract_date, 
 			materials: nextProps.materials, 
 		};
 	}
@@ -68,10 +64,10 @@ class ContractPage extends React.Component
 
 	render()
 	{
-		const { loading, date, car, materials, } = this.state;
+		const { loading, contracts_info, materials, } = this.state;
 		const { number } = this.props;
 
-		console.log("materials", materials);
+		let { date, car, status } = contracts_info[ number ] !== undefined ? contracts_info[ number ] : {};
 
 		return (
 			<React.Fragment>
@@ -91,7 +87,7 @@ class ContractPage extends React.Component
 						<Company { ...this.props }/>
 					</div>
 					<div className="aside_container about">
-						<InnerMenu number={ number } { ...this.props }/>
+						<InnerMenu number={ number } status={ status } { ...this.props }/>
 						<article>
 							{ loading ? (
 								<div className="table_row table_header" style={{ minHeight: 300, display: "flex", justifyContent: "center", alignItems: "center" }}>
@@ -124,9 +120,7 @@ class ContractPage extends React.Component
 function mapStateToProps(state, ownProps)
 {
 	return {
-		contract_date: state.contract.date, 
+		contracts_info: state.contracts_info, 
-		date: state.contract.date, 
-		car: state.contract.car, 
 		materials: state.contract.materials, 
 	}
 }

pages/contract/penalties.js

@@ -28,18 +28,20 @@ class ContractPage extends React.Component
 	{
 		super(props);
 		this.state = {
+			loading: false, 
+			contracts_info: {}, 
 			date: null, 
 			car: null, 
 			contract_date: null, 
 			agreement: null, 
 			rules: null, 
-			loading: false,
 		};
 	}
 
 	static getDerivedStateFromProps(nextProps, prevState) 
 	{
 		return {
+			contracts_info: nextProps.contracts_info, 
 			date: nextProps.date, 
 			car: nextProps.car, 
 			contract_date: nextProps.contract_date, 
@@ -104,9 +106,11 @@ class ContractPage extends React.Component
 
 	render() 
 	{
-		const { loading, date, car, contract_date, agreement, rules } = this.state;
+		const { loading, contracts_info, contract_date, agreement, rules } = this.state;
 		const { number } = this.props;
 
+		let { date, car, status } = contracts_info[ number ] !== undefined ? contracts_info[ number ] : {};
+
 		console.log("rules", rules);
 
 		const types = {
@@ -182,6 +186,7 @@ class ContractPage 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,

pages/contract/services.js

@@ -18,6 +18,7 @@ import { getContractInfo, getContractHelpCard, getContractInsurance, getContract
 import DownloadPdfButton from "../components/DownloadPdfButton";
 import AccountLayout from "../components/Layout/Account";
 import ContractHeader from "./components/ContractHeader";
+import DownloadFileById from "../components/DownloadFileById";
 
 class ContractServicesPage extends React.Component 
 {
@@ -25,11 +26,11 @@ class ContractServicesPage extends React.Component
 	{
 		super(props);
 		this.state = { 
+			loading: false, 
+			contracts_info: {}, 
 			opened: [], 
 			date: null, 
 			car: null, 
-			contract_date: null, 
-			loading: false, 
 			helpcard: null, 
 			insurance: null, 
 			registration: null, 
@@ -41,9 +42,9 @@ class ContractServicesPage extends React.Component
 	static getDerivedStateFromProps(nextProps, prevState)
 	{
 		return {
+			contracts_info: nextProps.contracts_info, 
 			date: nextProps.date, 
 			car: nextProps.car, 
-			contract_date: nextProps.contract_date, 
 			helpcard: nextProps.helpcard, 
 			insurance: nextProps.insurance, 
 			registration: nextProps.registration, 
@@ -54,17 +55,22 @@ class ContractServicesPage extends React.Component
 	componentDidMount()
 	{
 		console.log("document.location.hash", document.location.hash);
+		const { dispatch, number } = this.props;
 
-		if(!this.state.loading && this.props.number !== undefined)
+		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, number });
+				}
+
 				Promise.all([
-					new Promise((resolve) => { getContractHelpCard({ dispatch: this.props.dispatch, number: this.props.number }).then(resolve())}), 
+					new Promise((resolve) => { getContractHelpCard({ dispatch, number }).then(resolve())}), 
-					new Promise((resolve) => { getContractInsurance({ dispatch: this.props.dispatch, number: this.props.number }).then(resolve())}), 
+					new Promise((resolve) => { getContractInsurance({ dispatch, number }).then(resolve())}), 
-					new Promise((resolve) => { getContractRegistration({ dispatch: this.props.dispatch, number: this.props.number }).then(resolve())}), 
+					new Promise((resolve) => { getContractRegistration({ dispatch, number }).then(resolve())}), 
-					new Promise((resolve) => { getContractTelematic({ dispatch: this.props.dispatch, number: this.props.number }).then(resolve())}), 
+					new Promise((resolve) => { getContractTelematic({ dispatch, number }).then(resolve())}), 
 				])
 				.then(() => {
 					this.setState({ loading: false });
@@ -140,20 +146,10 @@ class ContractServicesPage extends React.Component
 
 	render()
 	{
-		const { opened, loading, date, car, contract_date, helpcard, insurance, registration, telematic, } = this.state;
+		const { loading, contracts_info, opened, helpcard, insurance, registration, telematic, } = this.state;
 		const { number } = this.props;
 
-		console.log("helpcard");
+		let { date, car, status } = contracts_info[ number ] !== undefined ? contracts_info[ number ] : {};
-		console.log(helpcard);
-
-		console.log("insurance");
-		console.log(insurance);
-
-		console.log("registration");
-		console.log(registration);
-
-		console.log("telematic");
-		console.log(telematic);
 
 		return (
 			<React.Fragment>
@@ -173,7 +169,7 @@ class ContractServicesPage extends React.Component
 						<Company { ...this.props }/>
 					</div>
 					<div className="aside_container about">
-						<InnerMenu number={ number } { ...this.props }/>
+						<InnerMenu number={ number } status={ status } { ...this.props }/>
 						<article>
 							{ loading ? (
 								<div className="table_row table_header" style={{ minHeight: 300, display: "flex", justifyContent: "center", alignItems: "center" }}>
@@ -228,23 +224,6 @@ class ContractServicesPage extends React.Component
 											<button className="block_toggle"></button>
 										</div>
 										<div className="block_body full">
-											{/*}
-											<div className="company filled">
-												<p className="title">КАСКО</p>
-												<ul>
-													<li>Страховая компания: <b>Согласие</b></li>
-													<li>Сайт: <b>www.sogl.ru</b></li>
-													<li>Телефон: <b>34234324324324</b></li>
-													<li>Номер полиса: <b style={{ color: "#1C01A9" }}>34234324324324</b></li>
-													<li>Период действия: <b>01/01/2020 - 01/01/2025</b></li>
-													<li>Страховая сумма: <b style={{ whiteSpace: "nowrap" }}>3 400 000,00 ₽&nbsp;₽</b></li>
-													<li className="alert">Обращаем Ваше внимание, что пролонгация полиса ОСАГО на второй и последующие периоды осуществляется Лизингополучателем самостоятельно</li>
-												</ul>
-												<div className="action">
-													<button className="button button-blue">Скачать счет на оплату</button>
-												</div>
-											</div>
-											{*/}
 											{ insurance !== undefined && insurance !== null ? (
 												<>
 													{ insurance.kasko !== undefined && insurance.kasko !== null && insurance.kasko !== "" && insurance.kasko.map !== undefined && insurance.kasko.map((entry, index) => (
@@ -255,16 +234,18 @@ class ContractServicesPage extends React.Component
 																	{ entry.company && (<li>Страховая компания: <b>{ entry.company }</b></li>) }
 																	{ entry.site && (<li>Сайт: <b>{ entry.site }</b></li>) }
 																	{ entry.phone && (<li>Телефон: <b>{ entry.phone }</b></li>) }
-																	{ entry.number && (<li>Номер полиса: <b style={ entry.url !== null ? { color: "#1C01A9", cursor: "pointer", } : {} } onClick={ () => { entry.url !== null ? this._handle_onContract(entry.url) : {} } }>{ entry.number }</b></li>) }
+																	{ entry.number && (
+																		<li>Номер полиса: <DownloadFileById id={ entry.url } filename={ `${ entry.number }.pdf` }>
+																				<b style={ entry.url !== null ? { color: "#1C01A9", cursor: "pointer", } : {} } onClick={ () => { entry.url !== null ? this._handle_onContract(entry.url) : {} } }>{ entry.number }</b>
+																			</DownloadFileById>
+																		</li>
+																	) }
 																	{ entry.period && (<li>Период действия: <b>{ entry.period }</b></li>) }
 																	{ entry.amount && (<li>Страховая сумма: <b style={{ whiteSpace: "nowrap" }}>{ numeral(entry.amount).format(' ., ') }&nbsp;₽</b></li>) }
-																	{ entry.period_type === "prolong" && (
-																		<li className="alert">Обращаем Ваше внимание, что пролонгация полиса КАСКО на второй и последующие периоды осуществляется Лизингополучателем самостоятельно</li>
-																	) }
 																</ul>
 																{ entry.period_type === "prolong" && entry.invoice_url !== null && (
 																	<div className="action">
-																		<DownloadPdfButton id={ entry.invoice_url } title="Скачать счет на оплату"/>
+																		<DownloadPdfButton id={ entry.invoice_url } filename={ `${ entry.number }.pdf` } title="Скачать счет на оплату" style={{ width: "195px" }}/>
 																	</div>
 																) }
 															</div>
@@ -279,16 +260,21 @@ class ContractServicesPage extends React.Component
 																	{ entry.company && (<li>Страховая компания: <b>{ entry.company }</b></li>) }
 																	{ entry.site && (<li>Сайт: <b>{ entry.site }</b></li>) }
 																	{ entry.phone && (<li>Телефон: <b>{ entry.phone }</b></li>) }
-																	{ entry.number && (<li>Номер полиса: <b style={ entry.url !== null ? { color: "#1C01A9", cursor: "pointer", } : {} } onClick={ () => { entry.url !== null ? this._handle_onContract(entry.url) : {} } }>{ entry.number }</b></li>) }
+																	{ entry.number && (
+																		<li>Номер полиса: <DownloadFileById id={ entry.url } filename={ `${ entry.number }.pdf` }>
+																				<b style={ entry.url !== null ? { color: "#1C01A9", cursor: "pointer", } : {} } onClick={ () => { entry.url !== null ? this._handle_onContract(entry.url) : {} } }>{ entry.number }</b>
+																			</DownloadFileById>
+																		</li>
+																	) }
 																	{ entry.period && (<li>Период действия: <b>{ entry.period }</b></li>) }
 																	{ entry.amount && (<li>Страховая сумма: <b style={{ whiteSpace: "nowrap" }}>{ numeral(entry.amount).format(' ., ') }&nbsp;₽</b></li>) }
+																	{ entry.period_type === "prolong" && (
+																		<li className="alert">Обращаем Ваше внимание, что пролонгация полиса ОСАГО на второй и последующие периоды осуществляется Лизингополучателем самостоятельно</li>
+																	) }
 																</ul>
 																{ entry.period_type === "prolong" && entry.invoice_url !== null && (
 																	<div className="action">
-																		<DownloadPdfButton id={ entry.invoice_url } title="Скачать счет на оплату"/>
+																		<DownloadPdfButton id={ entry.invoice_url } filename={ `${ entry.number }.pdf` } title="Скачать счет на оплату" style={{ width: "195px" }}/>
-																		{/*}
-																		<button className="button button-blue" onClick={ () => this._handle_onInvoice(entry.invoice_url) }>Скачать счет на оплату</button>
-																		{*/}
 																	</div>
 																) }
 															</div>
@@ -303,16 +289,18 @@ class ContractServicesPage extends React.Component
 																	{ entry.company && (<li>Страховая компания: <b>{ entry.company }</b></li>) }
 																	{ entry.site && (<li>Сайт: <b>{ entry.site }</b></li>) }
 																	{ entry.phone && (<li>Телефон: <b>{ entry.phone }</b></li>) }
-																	{ entry.number && (<li>Номер полиса: <b style={ entry.url !== null ? { color: "#1C01A9", cursor: "pointer", } : {} } onClick={ () => { entry.url !== null ? this._handle_onContract(entry.url) : {} } }>{ entry.number }</b></li>) }
+																	{ entry.number && (
+																		<li>Номер полиса: <DownloadFileById id={ entry.url } filename={ `${ entry.number }.pdf` }>
+																				<b style={ entry.url !== null ? { color: "#1C01A9", cursor: "pointer", } : {} } onClick={ () => { entry.url !== null ? this._handle_onContract(entry.url) : {} } }>{ entry.number }</b>
+																			</DownloadFileById>
+																		</li>
+																	) }
 																	{ entry.period && (<li>Период действия: <b>{ entry.period }</b></li>) }
 																	{ entry.amount && (<li>Страховая сумма: <b style={{ whiteSpace: "nowrap" }}>{ numeral(entry.amount).format(' ., ') }&nbsp;₽</b></li>) }
 																</ul>
 																{ entry.period_type === "prolong" && entry.invoice_url !== null && (
 																	<div className="action">
-																		<DownloadPdfButton id={ entry.invoice_url } title="Скачать счет на оплату"/>
+																		<DownloadPdfButton id={ entry.invoice_url } filename={ `${ entry.number }.pdf` } title="Скачать счет на оплату" style={{ width: "195px" }}/>
-																		{/*}
-																		<button className="button button-blue" onClick={ () => this._handle_onInvoice(entry.invoice_url) }>Скачать счет на оплату</button>
-																		{*/}
 																	</div>
 																) }
 															</div>
@@ -322,24 +310,23 @@ class ContractServicesPage extends React.Component
 													{ insurance.fingap !== undefined && insurance.fingap !== null && insurance.fingap !== "" && insurance.fingap.map !== undefined && insurance.fingap.map((entry, index) => (
 														<React.Fragment key={ index }>
 															<div className= { `company ${ entry.period_type === "prolong" && "filled" }` }>
-																<p className="title">FinGAP</p>
+																<p className="title">Safe Finance</p>
 																<ul>
 																	{ entry.company && (<li>Страховая компания: <b>{ entry.company }</b></li>) }
 																	{ entry.site && (<li>Сайт: <b>{ entry.site }</b></li>) }
 																	{ entry.phone && (<li>Телефон: <b>{ entry.phone }</b></li>) }
-																	{ entry.number && (<li>Номер полиса: <b style={ entry.url !== null ? { color: "#1C01A9", cursor: "pointer", } : {} } onClick={ () => { entry.url !== null ? this._handle_onContract(entry.url) : {} } }>{ entry.number }</b></li>) }
+																	{ entry.number && (
+																		<li>Номер полиса: <DownloadFileById id={ entry.url } filename={ `${ entry.number }.docx` }>
+																				<b style={ entry.url !== null ? { color: "#1C01A9", cursor: "pointer", } : {} }>{ entry.number }</b>
+																			</DownloadFileById>
+																		</li>
+																	) }
 																	{ entry.period && (<li>Период действия: <b>{ entry.period }</b></li>) }
 																	{ entry.amount && (<li>Страховая сумма: <b style={{ whiteSpace: "nowrap" }}>{ numeral(entry.amount).format(' ., ') }&nbsp;₽</b></li>) }
-																	{ entry.period_type === "prolong" && (
-																		<li className="alert">Обращаем Ваше внимание, что пролонгация полиса FinGAP на второй и последующие периоды осуществляется Лизингополучателем самостоятельно</li>
-																	) }
 																</ul>
 																{ entry.period_type === "prolong" && entry.invoice_url !== null && (
 																	<div className="action">
-																		<DownloadPdfButton id={ entry.invoice_url } title="Скачать счет на оплату"/>
+																		<DownloadPdfButton id={ entry.invoice_url } filename={ `${ entry.number }.pdf` } title="Скачать счет на оплату" style={{ width: "195px" }}/>
-																		{/*}
-																		<button className="button button-blue" onClick={ () => this._handle_onInvoice(entry.invoice_url) }>Скачать счет на оплату</button>
-																		{*/}
 																	</div>
 																) }
 															</div>
@@ -407,18 +394,6 @@ class ContractServicesPage extends React.Component
 										)) : (
 											<div className="block_body"><p>Нет данных</p></div>
 										)}
-										{/*}
-										<div className="block_body">
-											<div className="company">
-												<ul>
-												<li>Сайт: <b>www.telematic.ru</b></li>
-												<li>Логин: <b>test</b></li>
-												<li>Пароль: <b>test</b></li>
-												</ul>
-											</div>
-											<p>Текстовый контент Текстовый контент Текстовый контент Текстовый контент Текстовый контент Текстовый контент Текстовый контент Текстовый контент Текстовый контент Текстовый контент Текстовый контент Текстовый контент Текстовый контент Текстовый контент Текстовый контент Текстовый контент Текстовый контент Текстовый контент Текстовый контент</p>
-										</div>
-										{*/}
 									</div>
 
 								</div>
@@ -435,7 +410,7 @@ class ContractServicesPage extends React.Component
 function mapStateToProps(state, ownProps)
 {
 	return {
-		contract_date: state.contract.date, 
+		contracts_info: state.contracts_info, 
 		date: state.contract.date, 
 		car: state.contract.car, 
 		helpcard: state.contract.helpcard, 

pages/index.js

@@ -266,7 +266,7 @@ class IndexPage extends React.Component
 														{ contract.kasko_exists && <i title="КАСКО" data-additional-service="5" onClick={ (event) => { event.stopPropagation(); event.preventDefault(); this._handle_onService(`/contract/${ contract.number }/services#insurance`) } }></i> }
 														{ contract.osago_exists && <i title="ОСАГО" data-additional-service="6" onClick={ (event) => { event.stopPropagation(); event.preventDefault(); this._handle_onService(`/contract/${ contract.number }/services#insurance`) } }></i> }
 														{ contract.nsib_exists && <i title="НСИБ" data-additional-service="7" onClick={ (event) => { event.stopPropagation(); event.preventDefault(); this._handle_onService(`/contract/${ contract.number }/services#insurance`) } }></i> }
-														{ contract.fingap_exists && <i title="FinGAP" data-additional-service="8" onClick={ (event) => { event.stopPropagation(); event.preventDefault(); this._handle_onService(`/contract/${ contract.number }/services#insurance`) } }></i> }
+														{ contract.fingap_exists && <i title="Safe Finance" data-additional-service="8" onClick={ (event) => { event.stopPropagation(); event.preventDefault(); this._handle_onService(`/contract/${ contract.number }/services#insurance`) } }></i> }
 													</div>
 												</div>
 											</div>

pages/settings/admin.js

@@ -46,12 +46,26 @@ class Form extends React.Component
 
 	_handle_onChangeCompanies_all = () => 
 	{
-		const { selected_companies_all } = this.state;
+		const { companies } = this.props;
-		this.setState({ selected_companies_all: selected_companies_all ? false : true });
+		const { selected_companies_all, selected_companies_list } = this.state;
+
+		const all = selected_companies_all ? false : true;
+		const selected_companies = [];
+
+		if(all)
+		{
+			for(let i in companies)
+			{
+				selected_companies.push(companies[i]);
+			}
+		}
+
+		this.setState({ selected_companies_all: selected_companies_all ? false : true, selected_companies_list: selected_companies });
 	}
 
 	_handle_onCompanySelect = (company) => 
 	{
+		const { companies } = this.props;
 		const { selected_companies_list } = this.state;
 		const selected_companies = [];
 
@@ -72,7 +86,13 @@ class Form extends React.Component
 			selected_companies.push(company);
 		}
 
-		this.setState({ selected_companies_list: selected_companies });
+		let all = false;
+		if(companies.length === selected_companies.length)
+		{
+			all = true;
+		}
+
+		this.setState({ selected_companies_all: all, selected_companies_list: selected_companies });
 	}
 
 	render()
@@ -98,21 +118,38 @@ class Form extends React.Component
 								Все организации
 							</label>
 						</div>
-						{ companies !== undefined && companies !== null && companies.map((company, index) => (
+						{ companies !== undefined && companies !== null && companies.map((company, index) => 
-							<div className="list_item">
+						{
-								<input type="checkbox" value={ company.inn } name="companies_list" id={ `company_${ index }` } hidden onChange={ () => this._handle_onCompanySelect(company) }/>
+							let checked = false;
-								<label htmlFor={ `company_${ index }` }>
+							if(selected_companies_all)
-									{ company.title }
+							{
-									<span>ИНН: { company.inn } { company.kpp !== undefined && company.kpp !== null && `КПП: ${ company.kpp }` }</span>
+								checked = true;
-								</label>
+							}
-							</div>
+							else
-						)) }
+							{
+								for(let i in selected_companies_list)
+								{
+									if(selected_companies_list[i].acc_number === company.acc_number)
+									{
+										checked = true;
+										break;
+									}
+								}
+							}
+
+							return (
+								<div className="list_item" key={ index }>
+									<input type="checkbox" checked={ checked } value={ company.inn } name="companies_list" id={ `company_${ index }` } hidden onChange={ () => this._handle_onCompanySelect(company) }/>
+									<label htmlFor={ `company_${ index }` }>
+										{ company.title }
+										<span>ИНН: { company.inn } { company.kpp !== undefined && company.kpp !== null && `КПП: ${ company.kpp }` }</span>
+									</label>
+								</div>
+							)
+						}) }
 					</div>
 				</div>
 				<div className="table_cell" data-title="Статус">-</div>
-				<div className="table_cell delete" style={{ position: 'relative' }}>
-					<button className="delete_user" title="Удалить пользователя"></button>
-				</div>
 			</div>
 		)
 	}
@@ -173,6 +210,11 @@ class AdminPage extends React.Component
 		this.setState({ add: false, edit: false });
 	}
 
+	_handle_onCancel = () => 
+	{
+		this.setState({ add: false, edit: false });		
+	}
+
 	render()
 	{
 		const { user, users, companies, add, edit } = this.state;
@@ -211,7 +253,10 @@ class AdminPage extends React.Component
 								<p>Настройки доступа к личному кабинету</p>
 								<div>
 									{ add || edit ? (
-										<button className="button button-blue" onClick={ this._handle_onSave }>Сохранить</button>
+										<>
+											<button className="button button-blue" onClick={ this._handle_onCancel }>Отменить</button>
+											<button className="button button-blue" onClick={ this._handle_onSave }>Сохранить</button>
+										</>
 									) : (
 										<>
 											<button className="button button-blue" onClick={ this._handle_onAdd }>Добавить пользователя</button>
@@ -226,8 +271,10 @@ class AdminPage extends React.Component
 									<div className="table_cell">Почта</div>
 									<div className="table_cell">Роль</div>
 									<div className="table_cell">Доступные организации</div>
-									<div className="table_cell">Статус</div>
+									<div className="table_cell" style={ !edit ? { border: "none", } : {} }>Статус</div>
-									<div className="table_cell"></div>
+									{ edit && (
+										<div className="table_cell" style={{ border: "none", }}></div>
+									) }
 								</div>
 								{ users !== undefined && users !== null && users.map((entry, index) => 
 								{ 
@@ -240,8 +287,9 @@ class AdminPage extends React.Component
 												<div className="table_cell" data-title="Роль">Администратор</div>
 												<div className="table_cell" data-title="Доступные организации">Все организации</div>
 												<div className="table_cell" data-title="Статус">Активен</div>
-												<div className="table_cell delete" style={{ position: 'relative' }}>
+												{ edit && (
-												</div>
+													<div className="table_cell delete" style={{ position: 'relative' }}></div>
+												) }
 											</div>
 										)
 									}
@@ -260,8 +308,11 @@ class AdminPage extends React.Component
 													<p key={ c_index }>{ company.title }</p>
 												)) }</div>
 												<div className="table_cell" data-title="Статус">Активен</div>
-												<div className="table_cell delete" style={{ position: 'relative' }}>
+												{ edit && (
-												</div>
+													<div className="table_cell delete" style={{ position: 'relative' }}>
+														<button className="delete_user" title="Удалить пользователя"></button>
+													</div>
+												) }
 											</div>
 										)
 									}

pages/support/index.js

@@ -118,6 +118,7 @@ class ContractPage extends React.Component
 	render() 
 	{
 		const { loading, themes, question_selected, searched, appleals, query } = this.state;
+		console.log("themes", themes);
 
 		return (
 			<React.Fragment>
@@ -145,8 +146,7 @@ class ContractPage extends React.Component
 									<div className="contract_search">
 										<form onSubmit={(event) => { event.preventDefault(); }}>
 											<div className="form_field full">
-												<input type="search" value={ query } placeholder="Поиск" onChange={(event) => { this._handle_onChangeSearchQuery(event.target.value);} }
+												<input type="search" value={ query } placeholder="Поиск" onChange={(event) => { this._handle_onChangeSearchQuery(event.target.value);} }/>
-												/>
 											</div>
 											<button className="button" disabled={ query !== "" ? false : true } onClick={ this._handle_onSearch }>
 												Поиск
@@ -161,8 +161,8 @@ class ContractPage extends React.Component
 												<div className="dropdown_blocks_list">
 													{ theme.questions.map((question) => 
 													(
-														<div ref={ this.question_refs[question.id] } className={ `dropdown_block ${ question.id === question_selected && "open" }` } key={ `question_${ question.id }` } onClick={ () => this._handle_onQuestion(question.id) }>
+														<div ref={ this.question_refs[question.id] } className={ `dropdown_block ${ question.id === question_selected && "open" }` } key={ `question_${ question.id }` }>
-															<div className={ `block_header` }>
+															<div className={ `block_header` } onClick={ () => this._handle_onQuestion(question.id) }>
 																<p>{ question.title }</p>
 																<button></button>
 															</div>

pages/support/request.js

@@ -152,24 +152,6 @@ class SupportRequestPage extends React.Component
 					let opened_theme, opened_question;
 					let found = false;
 
-					opened_theme = 0;
-					for(let t in this.state.themes)
-					{
-						opened_question = 0;
-						for(let q in this.state.themes[t].questions)
-						{
-							if(this.props.router.asPath.indexOf(this.state.themes[t].questions[q].id) > -1)
-							{
-								found = true;
-								break;
-							}
-							opened_question++;
-						}
-
-						if(found) { break; }
-						opened_theme++;
-					}
-
 					let themes_filtered = [];
 					for(let t in this.state.themes)
 					{
@@ -189,6 +171,24 @@ class SupportRequestPage extends React.Component
 						}
 					}
 
+					opened_theme = 0;
+					for(let t in themes_filtered)
+					{
+						opened_question = 0;
+						for(let q in themes_filtered[t].questions)
+						{
+							if(this.props.router.asPath.indexOf(themes_filtered[t].questions[q].id) > -1)
+							{
+								found = true;
+								break;
+							}
+							opened_question++;
+						}
+
+						if(found) { break; }
+						opened_theme++;
+					}
+
 					this.setState({ loading: false, themes_filtered, opened_theme: found ? opened_theme : 0, opened_question: found ? opened_question : 0 });
 				})
 				.catch(() => {});
@@ -370,6 +370,7 @@ class SupportRequestPage extends React.Component
 
 		const procedure = themes_filtered !== undefined && themes_filtered !== null ? themes_filtered[ opened_theme ].questions[ opened_question ] : undefined;
 
+		console.log("themes", themes);
 		console.log("themes_filtered", themes_filtered);
 
 		return (

pages/switch.js

@@ -12,7 +12,7 @@ import Footer from './components/Footer';
 import MainHeader from "./components/MainHeader";
 import FormRequest from "./components/FormRequest";
 
-import { sendOffstageToken, switchAccount } from '../actions';
+import { sendOffstageToken, sendSwitchAccount } from '../actions';
 
 class SwitchPage extends React.Component 
 {
@@ -32,7 +32,9 @@ class SwitchPage extends React.Component
 
 	componentDidMount()
 	{
-		switchAccount({ dispatch: this.props.dispatch, acc_number: this.props.account })
+		const { dispatch } = this.props;
+
+		sendSwitchAccount({ dispatch, acc_number: this.props.account })
 		.then(() => 
 		{
 			this.setState({ error: false });

public/assets/images/icons/additional-service-8.svg

@@ -1,5 +1,27 @@
-<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<?xml version="1.0" encoding="utf-8"?>
-<path d="M24.8571 1.3335H6C4.89543 1.3335 4 2.22677 4 3.33134V16.2928C4 20.1237 10.453 24.9829 14.451 27.4229C15.0533 27.7906 15.8038 27.7906 16.4062 27.4229C20.4041 24.9829 26.8571 20.1237 26.8571 16.2928V3.33134C26.8571 2.22677 25.9617 1.3335 24.8571 1.3335Z" stroke="#8E94A7" stroke-width="2" stroke-linejoin="round"/>
+<!-- Generator: Adobe Illustrator 25.2.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<path d="M14.8906 7.78906H10.3203V10.7188H14.1406C14.4948 10.7188 14.7578 10.7995 14.9297 10.9609C15.1068 11.1172 15.1953 11.3281 15.1953 11.5938C15.1953 11.8594 15.1068 12.0703 14.9297 12.2266C14.7526 12.3828 14.4896 12.4609 14.1406 12.4609H10.3203V16.2344C10.3203 16.7135 10.2109 17.0703 9.99219 17.3047C9.77865 17.5339 9.5026 17.6484 9.16406 17.6484C8.82031 17.6484 8.53906 17.5312 8.32031 17.2969C8.10677 17.0625 8 16.7083 8 16.2344V7.42188C8 7.08854 8.04948 6.81771 8.14844 6.60938C8.2474 6.39583 8.40104 6.24219 8.60938 6.14844C8.82292 6.04948 9.09375 6 9.42188 6H14.8906C15.2604 6 15.5339 6.08333 15.7109 6.25C15.8932 6.41146 15.9844 6.625 15.9844 6.89062C15.9844 7.16146 15.8932 7.38021 15.7109 7.54688C15.5339 7.70833 15.2604 7.78906 14.8906 7.78906Z" fill="#8E94A7"/>
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-<path d="M23.7832 14.5078V16.1543C23.7832 16.373 23.7617 16.5488 23.7188 16.6816C23.6758 16.8105 23.5957 16.9277 23.4785 17.0332C23.3652 17.1387 23.2188 17.2402 23.0391 17.3379C22.5195 17.6191 22.0195 17.8242 21.5391 17.9531C21.0586 18.082 20.5352 18.1465 19.9688 18.1465C19.3086 18.1465 18.707 18.0449 18.1641 17.8418C17.6211 17.6387 17.1582 17.3438 16.7754 16.957C16.3926 16.5703 16.0977 16.1016 15.8906 15.5508C15.6875 15 15.5859 14.3848 15.5859 13.7051C15.5859 13.0371 15.6855 12.4258 15.8848 11.8711C16.084 11.3164 16.377 10.8457 16.7637 10.459C17.1504 10.0723 17.6211 9.77734 18.1758 9.57422C18.7305 9.36719 19.3594 9.26367 20.0625 9.26367C20.6406 9.26367 21.1523 9.3418 21.5977 9.49805C22.043 9.65039 22.4043 9.84375 22.6816 10.0781C22.959 10.3125 23.168 10.5605 23.3086 10.8223C23.4492 11.084 23.5195 11.3164 23.5195 11.5195C23.5195 11.7383 23.4375 11.9258 23.2734 12.082C23.1133 12.2344 22.9199 12.3105 22.6934 12.3105C22.5684 12.3105 22.4473 12.2812 22.3301 12.2227C22.2168 12.1641 22.1211 12.082 22.043 11.9766C21.8281 11.6406 21.6465 11.3867 21.498 11.2148C21.3496 11.043 21.1484 10.8984 20.8945 10.7812C20.6445 10.6641 20.3242 10.6055 19.9336 10.6055C19.5312 10.6055 19.1719 10.6758 18.8555 10.8164C18.5391 10.9531 18.2676 11.1543 18.041 11.4199C17.8184 11.6816 17.6465 12.0039 17.5254 12.3867C17.4082 12.7695 17.3496 13.1934 17.3496 13.6582C17.3496 14.666 17.5801 15.4414 18.041 15.9844C18.5059 16.5273 19.1523 16.7988 19.9805 16.7988C20.3828 16.7988 20.7598 16.7461 21.1113 16.6406C21.4668 16.5352 21.8262 16.3848 22.1895 16.1895V14.7949H20.8418C20.5176 14.7949 20.2715 14.7461 20.1035 14.6484C19.9395 14.5508 19.8574 14.3848 19.8574 14.1504C19.8574 13.959 19.9258 13.8008 20.0625 13.6758C20.2031 13.5508 20.3926 13.4883 20.6309 13.4883H22.6055C22.8477 13.4883 23.0527 13.5098 23.2207 13.5527C23.3887 13.5957 23.5234 13.6914 23.625 13.8398C23.7305 13.9883 23.7832 14.2109 23.7832 14.5078Z" fill="#8E94A7"/>
+	 viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;stroke:#8E94A7;stroke-width:2;stroke-linejoin:round;}
+	.st1{fill:#8E94A7;}
+</style>
+<path class="st0" d="M24.9,1.3H6c-1.1,0-2,0.9-2,2v13c0,3.8,6.5,8.7,10.5,11.1c0.6,0.4,1.4,0.4,2,0c4-2.4,10.5-7.3,10.5-11.1v-13
+	C26.9,2.2,26,1.3,24.9,1.3z"/>
+<g>
+	<path class="st1" d="M17,14.2c0,0.7-0.2,1.3-0.5,1.8c-0.4,0.5-0.9,1-1.6,1.3c-0.7,0.3-1.5,0.5-2.4,0.5c-1.1,0-2-0.2-2.8-0.6
+		c-0.5-0.3-0.9-0.7-1.3-1.2c-0.3-0.5-0.5-1-0.5-1.5c0-0.3,0.1-0.5,0.3-0.7c0.2-0.2,0.4-0.3,0.7-0.3c0.2,0,0.4,0.1,0.6,0.2
+		s0.3,0.4,0.4,0.7c0.1,0.4,0.3,0.7,0.5,0.9c0.2,0.2,0.4,0.4,0.7,0.6s0.7,0.2,1.2,0.2c0.7,0,1.2-0.2,1.7-0.5s0.6-0.7,0.6-1.2
+		c0-0.4-0.1-0.7-0.3-0.9c-0.2-0.2-0.5-0.4-0.9-0.5c-0.4-0.1-0.8-0.3-1.5-0.4c-0.8-0.2-1.5-0.4-2-0.7c-0.5-0.3-1-0.6-1.3-1
+		c-0.3-0.4-0.5-1-0.5-1.6c0-0.6,0.2-1.2,0.5-1.7c0.3-0.5,0.8-0.9,1.5-1.1c0.6-0.3,1.4-0.4,2.3-0.4c0.7,0,1.3,0.1,1.8,0.3
+		c0.5,0.2,0.9,0.4,1.3,0.7c0.3,0.3,0.6,0.6,0.7,0.9c0.2,0.3,0.2,0.6,0.2,0.9c0,0.3-0.1,0.5-0.3,0.7c-0.2,0.2-0.4,0.3-0.7,0.3
+		c-0.3,0-0.5-0.1-0.6-0.2s-0.3-0.3-0.4-0.6c-0.2-0.4-0.5-0.8-0.7-1c-0.3-0.2-0.8-0.4-1.4-0.4c-0.6,0-1.1,0.1-1.4,0.4
+		c-0.4,0.3-0.5,0.6-0.5,0.9c0,0.2,0.1,0.4,0.2,0.6S10.8,9.9,11,10s0.4,0.2,0.7,0.3s0.6,0.2,1.1,0.3c0.6,0.1,1.2,0.3,1.7,0.5
+		c0.5,0.2,1,0.4,1.3,0.7s0.6,0.6,0.9,1C16.9,13.1,17,13.6,17,14.2z"/>
+	<path class="st1" d="M18.6,9.4h0.5V8.8c0-0.7,0.1-1.2,0.3-1.6c0.2-0.4,0.5-0.7,0.9-0.9s0.9-0.3,1.6-0.3c1.2,0,1.8,0.3,1.8,0.9
+		c0,0.2-0.1,0.4-0.2,0.5s-0.3,0.2-0.5,0.2c-0.1,0-0.2,0-0.4,0s-0.4,0-0.5,0c-0.4,0-0.6,0.1-0.7,0.3c-0.1,0.2-0.2,0.5-0.2,1v0.5h0.5
+		c0.8,0,1.2,0.2,1.2,0.7c0,0.3-0.1,0.6-0.3,0.7s-0.5,0.1-0.9,0.1h-0.5v5.6c0,0.4-0.1,0.7-0.3,1c-0.2,0.2-0.5,0.3-0.8,0.3
+		c-0.3,0-0.5-0.1-0.7-0.3c-0.2-0.2-0.3-0.5-0.3-1v-5.6h-0.6c-0.3,0-0.6-0.1-0.7-0.2c-0.2-0.1-0.3-0.3-0.3-0.6
+		C17.6,9.6,17.9,9.4,18.6,9.4z"/>
+</g>
 </svg>

public/assets/images/icons/additional-service-fg.svg

@@ -0,0 +1,5 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M24.8571 1.3335H6C4.89543 1.3335 4 2.22677 4 3.33134V16.2928C4 20.1237 10.453 24.9829 14.451 27.4229C15.0533 27.7906 15.8038 27.7906 16.4062 27.4229C20.4041 24.9829 26.8571 20.1237 26.8571 16.2928V3.33134C26.8571 2.22677 25.9617 1.3335 24.8571 1.3335Z" stroke="#8E94A7" stroke-width="2" stroke-linejoin="round"/>
+<path d="M14.8906 7.78906H10.3203V10.7188H14.1406C14.4948 10.7188 14.7578 10.7995 14.9297 10.9609C15.1068 11.1172 15.1953 11.3281 15.1953 11.5938C15.1953 11.8594 15.1068 12.0703 14.9297 12.2266C14.7526 12.3828 14.4896 12.4609 14.1406 12.4609H10.3203V16.2344C10.3203 16.7135 10.2109 17.0703 9.99219 17.3047C9.77865 17.5339 9.5026 17.6484 9.16406 17.6484C8.82031 17.6484 8.53906 17.5312 8.32031 17.2969C8.10677 17.0625 8 16.7083 8 16.2344V7.42188C8 7.08854 8.04948 6.81771 8.14844 6.60938C8.2474 6.39583 8.40104 6.24219 8.60938 6.14844C8.82292 6.04948 9.09375 6 9.42188 6H14.8906C15.2604 6 15.5339 6.08333 15.7109 6.25C15.8932 6.41146 15.9844 6.625 15.9844 6.89062C15.9844 7.16146 15.8932 7.38021 15.7109 7.54688C15.5339 7.70833 15.2604 7.78906 14.8906 7.78906Z" fill="#8E94A7"/>
+<path d="M23.7832 14.5078V16.1543C23.7832 16.373 23.7617 16.5488 23.7188 16.6816C23.6758 16.8105 23.5957 16.9277 23.4785 17.0332C23.3652 17.1387 23.2188 17.2402 23.0391 17.3379C22.5195 17.6191 22.0195 17.8242 21.5391 17.9531C21.0586 18.082 20.5352 18.1465 19.9688 18.1465C19.3086 18.1465 18.707 18.0449 18.1641 17.8418C17.6211 17.6387 17.1582 17.3438 16.7754 16.957C16.3926 16.5703 16.0977 16.1016 15.8906 15.5508C15.6875 15 15.5859 14.3848 15.5859 13.7051C15.5859 13.0371 15.6855 12.4258 15.8848 11.8711C16.084 11.3164 16.377 10.8457 16.7637 10.459C17.1504 10.0723 17.6211 9.77734 18.1758 9.57422C18.7305 9.36719 19.3594 9.26367 20.0625 9.26367C20.6406 9.26367 21.1523 9.3418 21.5977 9.49805C22.043 9.65039 22.4043 9.84375 22.6816 10.0781C22.959 10.3125 23.168 10.5605 23.3086 10.8223C23.4492 11.084 23.5195 11.3164 23.5195 11.5195C23.5195 11.7383 23.4375 11.9258 23.2734 12.082C23.1133 12.2344 22.9199 12.3105 22.6934 12.3105C22.5684 12.3105 22.4473 12.2812 22.3301 12.2227C22.2168 12.1641 22.1211 12.082 22.043 11.9766C21.8281 11.6406 21.6465 11.3867 21.498 11.2148C21.3496 11.043 21.1484 10.8984 20.8945 10.7812C20.6445 10.6641 20.3242 10.6055 19.9336 10.6055C19.5312 10.6055 19.1719 10.6758 18.8555 10.8164C18.5391 10.9531 18.2676 11.1543 18.041 11.4199C17.8184 11.6816 17.6465 12.0039 17.5254 12.3867C17.4082 12.7695 17.3496 13.1934 17.3496 13.6582C17.3496 14.666 17.5801 15.4414 18.041 15.9844C18.5059 16.5273 19.1523 16.7988 19.9805 16.7988C20.3828 16.7988 20.7598 16.7461 21.1113 16.6406C21.4668 16.5352 21.8262 16.3848 22.1895 16.1895V14.7949H20.8418C20.5176 14.7949 20.2715 14.7461 20.1035 14.6484C19.9395 14.5508 19.8574 14.3848 19.8574 14.1504C19.8574 13.959 19.9258 13.8008 20.0625 13.6758C20.2031 13.5508 20.3926 13.4883 20.6309 13.4883H22.6055C22.8477 13.4883 23.0527 13.5098 23.2207 13.5527C23.3887 13.5957 23.5234 13.6914 23.625 13.8398C23.7305 13.9883 23.7832 14.2109 23.7832 14.5078Z" fill="#8E94A7"/>
+</svg>

reducers/eventsReducer.js

@@ -23,6 +23,17 @@ const eventsReducer = (state = initialState.events, action) =>
 			};
 		}
 
+		case actionTypes.EVENTS_RESET: 
+		{
+			return {
+				themes: null, 
+				searched: null, 
+				appeals: { list: null, new: 0 }, 
+				appeal: null, 
+				request: null, 
+			};
+		}
+
 		default: {
 			return state;
 		}

reducers/supportReducer.js

@@ -47,6 +47,14 @@ const supportReducer = (state = initialState.support, action) =>
 			};
 		}
 
+		case actionTypes.SUPPORT_RESET: 
+		{
+			return {
+				...state, 
+				appeal: action.data.appeal, 
+			};
+		}
+
 		default: {
 			return state;
 		}