mobile updates, appeals fixes

2022-09-07 21:42:55 +03:00 · 2022-09-07 21:42:55 +03:00 · 97ddaffab2
commit 97ddaffab2
parent f2eb9d4540
11 changed files with 155 additions and 76 deletions
--- a/pages/components/Header/index.js
+++ b/pages/components/Header/index.js
@ -54,6 +54,7 @@ class Header extends React.Component
 		if (route.indexOf("/settings/") > -1) return "Настройки";
 		if (route.indexOf("/contract") === 0) return "Договоры";
 		if (route.indexOf("/support") === 0) return "Обращения";
+		if (route.indexOf("/events") === 0) return "События";

 		return null;
 	};
--- a/pages/contract/change/components/Comparison/index.js
+++ b/pages/contract/change/components/Comparison/index.js
@ -230,7 +230,7 @@ export default class Comparison extends React.Component
 					) }
 					{ calculation !== undefined && calculation !== null && calculation.insurance_price_result_comment !== null && (
 						<div className="form_field">
-							<p><span>{ calculation.insurance_price_result_comment.label }:</span> { numeral(calculation.insurance_price_result_comment.value).format(' ., ') }&nbsp;₽</p>
+							<p><span>{ calculation.insurance_price_result_comment.label }:</span> { calculation.insurance_price_result_comment.value }</p>
 						</div>
 					) }
 					{ calculation !== undefined && calculation !== null && calculation.number_paydate_comment !== null && (
@ -245,7 +245,7 @@ export default class Comparison extends React.Component
 					) }
 					{ calculation !== undefined && calculation !== null && calculation.sum_comment !== null && (
 						<div className="form_field">
-							<p><span>{ calculation.sum_comment.label }</span> { numeral(calculation.sum_comment.value).format(' ., ') }&nbsp;₽</p>
+							<p><span>{ calculation.sum_comment.label }</span> { calculation.sum_comment.value }</p>
 						</div>
 					) }
 					{/*}
--- a/pages/contract/change/components/Options/index.js
+++ b/pages/contract/change/components/Options/index.js
@ -51,7 +51,7 @@ class PaymentDate extends React.Component

 		return (
 			<div className="form_field">
-				<label>Дата платежа</label>
+				<label>Дата платежа:</label>
 				<DateInput 
 					placeholder="" 
 					value={ value } 
@ -108,7 +108,7 @@ class FixLastPayment extends React.Component
 			<div className="form_field">
 				<input type="checkbox" hidden id="fix_pay" name="fix_pay" checked={ value } disabled={ option.disable ? true : false } onChange={ this._handle_onChange } style={ option.disable ? { opacity: 0.5 } : {} } />
 				<label htmlFor="fix_pay" style={ option.disable ? { opacity: 0.5 } : {} }>
-					Фиксировать последний платеж
+					Не менять сумму последнего платежа
 				</label>
 				{ option.information !== undefined && option.information !== null && (
 					<div className="help_tooltip">
@ -173,7 +173,7 @@ class DateOffestType extends React.Component

 		return (
 			<div className="form_field">
-				<label>Тип каникул</label>
+				<label>Тип каникул:</label>
 				<div className="form_field">
 					{ (!option.disable || (option.disable && value === 100000001)) && (
 						<>
@ -246,7 +246,7 @@ class PeriodSelector extends React.Component
 		{
 			return (
 				<div className="form_field" style={ option.disable ? { opacity: 0.5 } : {} }>
-					<label>Увеличить график на</label>
+					<label>Увеличить срок договора на:</label>
 					<select value={ value } onChange={ this._handle_onChange } disabled={ option.disable ? true : false }>
 						{ periods.map((period, index) => (
 							<option key={ index } value={ period }>{ index + 1 } { pluralize( index + 1, 'месяца', 'месяц', 'месяца', 'месяцев') } ({ period } { pluralize( period, 'платежа', 'платеж', 'платежа', 'платежей') })</option>
@ -312,7 +312,7 @@ class SumSelector extends React.Component

 		return (
 			<div className="form_field">
-				<label style={ option.disable ? { opacity: 0.5 } : {} }>Увеличить платеж на (ЧДП)</label>
+				<label style={ option.disable ? { opacity: 0.5 } : {} }>Изменить сумму платежа</label>
 				<div className="input_with_notes" style={ option.disable ? { opacity: 0.5 } : {} }>
 					<input type="number" placeholder="Укажите сумму" defaultValue={ value } disabled={ option.disable ? true : false } onChange={ this._handle_onChange }/>
 					<span>от { numeral(min).format(' ., ') }&nbsp;₽</span>
@ -402,7 +402,7 @@ class InsurancePriceSelector extends React.Component

 		return (
 			<div className="form_field">
-				<label>Сумма пролонгации</label>
+				<label>Премия по полису КАСКО:</label>
 				<div className="input_with_notes">
 					{ option.disable ? (
 						<>{ numeral(value).format(' ., ') }&nbsp;₽</>
@ -481,7 +481,7 @@ class InsuranceDateFromSelector extends React.Component

 		return (
 			<div className="form_field">
-				<label>Дата начала пролонгации</label>
+				<label>Дата очередного периода по КАСКО:</label>
 				<DateInput 
 					placeholder="" 
 					value={ value } 
@ -665,6 +665,7 @@ export default class Options extends React.Component

 		return (
 			<div className="block">
+				<p className="title" style={{ fontSize: "16px" }}>{ options !== undefined && options !== null && options.number_planpayment_header.value }</p>
 				<p className="title">Параметры опций изменений графика платежей</p>
 				{ loading ? (
 					<div style={{ position: "absolute", left: "50%", top: "50%" }}>
--- a/pages/contract/change/components/VariantsList/index.js
+++ b/pages/contract/change/components/VariantsList/index.js
@ -8,6 +8,7 @@ export default class VariantsList extends React.Component
 	{
 		super(props);
 		this.state = {
+			opened: [], 
 		};
 	}

@ -65,9 +66,27 @@ export default class VariantsList extends React.Component
 		this.props.onOptions();
 	}

+	_handle_onMobileHelp = (index) => 
+	{
+		console.log("_handle_onMobileHelp", index);
+		const opened = [ ...this.state.opened ];
+
+		if (opened.indexOf(index) === -1) 
+		{
+			opened.push(index);
+		} 
+		else 
+		{
+			opened.splice(opened.indexOf(index), 1);
+		}
+	
+		this.setState({ opened: opened });
+	}
+
 	render() 
 	{
 		const { number, variants, variants_types, selected, blocked, loading } = this.props;
+		const { opened } = this.state;
 		console.log(variants_types);

 		return (
@ -80,7 +99,7 @@ export default class VariantsList extends React.Component
 							const disabled = this._checkVariant(variant.type);
 							const help = this._getVariantHelp(variant.type);

-							console.log("help", help);
+							console.log("opened", opened);

 							return (
 								<div className="form_field" key={ index }>
@ -89,19 +108,17 @@ export default class VariantsList extends React.Component
 									style={ disabled ? { color: "#A8026B", textDecoration: "line-through", } : {} }>{ variant.title }</label>
 									{ help !== null && (
 										<div className="help_tooltip">
-											<div className="help_icon">
+											<div className="help_icon" onClick={ () => this._handle_onMobileHelp(variant.type) }>
 												<svg width={ 24 } height={ 24 } fill="none" xmlns="http://www.w3.org/2000/svg" >
 													<path d="M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18Z" stroke="#8E94A7" strokeWidth={ 2 } strokeLinecap="round" strokeLinejoin="round" />
 													<path d="M11.25 11.25H12v5.25h.75" stroke="#8E94A7" strokeWidth={ 2 } strokeLinecap="round" strokeLinejoin="round" />
 													<path d="M12 9a1.125 1.125 0 1 0 0-2.25A1.125 1.125 0 0 0 12 9Z" fill="#8E94A7" />
 												</svg>
 											</div>
-											<div className="help_content">
-											{" "}
-												{/* opened */}
+											<div className={`help_content ${ opened.indexOf(variant.type) > -1 && "opened" }`}>
 												<div>
 													<p className="help_tooltip_content" dangerouslySetInnerHTML={{ __html: help }}/>
-													<p className="button">Закрыть</p>
+													<p className="button" onClick={ () => this._handle_onMobileHelp(variant.type) }>Закрыть</p>
 												</div>
 											</div>
 										</div>
--- a/pages/contract/change/index.js
+++ b/pages/contract/change/index.js
@ -57,11 +57,11 @@ class ChangeGraphicPage extends React.Component
 			variants_unavailable: [], 
 			variants_loading: false, 
 			variants_types: [
-				{ title: "Изменить дату платежа", type: "change_payment_date", help: "Это подсказка по Изменить дату платежа" }, 
-				{ title: "Изменение параметров страхования", type: "insurance_change", help: "Это подсказка по Изменение параметров страхования" }, 
+				{ title: "Изменение даты платежей", type: "change_payment_date", help: "Это подсказка по Изменить дату платежа" }, 
+				{ title: "Включение КАСКО в график", type: "insurance_change", help: "Это подсказка по Изменение параметров страхования" }, 
 				//{ title: "Изменение выкупного платежа", type: "last_payment_change", help: "Это подсказка по Изменение формулировки выкупной платеж" }, 
 				{ title: "Лизинговые каникулы", type: "date_offset_change", help: "Это подсказка по Лизинговые каникулы" }, 
-				{ title: "Изменение кол-ва платежей", type: "contract_term_change", help: "Это подсказка по Изменение кол-ва платежей" }, 
+				{ title: "Увеличение срока договора лизинга", type: "contract_term_change", help: "Это подсказка по Изменение кол-ва платежей" }, 
 				{ title: "Изменение суммы платежей", type: "sum_pay_change", help: "Это подсказка по Изменение суммы платежей" }, 
 				{ title: "Досрочный выкуп", type: "early_redemption_change", help: "Это подсказка по Досрочный выкуп" }, 
 				//{ title: "Изменение Лизингополучателя", type: "", help: "Это подсказка по Изменение Лизингополучателя" }, 
--- a/pages/events.js
+++ b/pages/events.js
@ -165,7 +165,7 @@ class EventsPage extends React.Component
 							</div>
 							{ events_loaded && (
 								<>
-									{ filtered !== undefined ? this._renderEvents(filtered) : this._rederEvents(events) }
+									{ filtered !== undefined ? this._renderEvents(filtered) : this._renderEvents(events) }
 								</>
 							) }
 						</article>
--- a/pages/support/appeals.js
+++ b/pages/support/appeals.js
@ -21,6 +21,7 @@ import {
 	setAppealsRead,
 } from "../../actions";
 import AccountLayout from "../components/Layout/Account";
+import RequestFile from "./components/RequestFile";

 class SupportAppealsPage extends React.Component 
 {
@ -136,13 +137,14 @@ class SupportAppealsPage extends React.Component
 													<>
 														{ appeals.list.map((appeal, index) => 
 														{
+															console.log("appeal >>>>>>>", appeal);
 															if(active) { if(appeal.status !== "active") { return null; } }

 															return (
 																<div className="appeal_item" key={ index }>
 																	<div className="item_header">
 																		<p>Номер обращения: <b>{ appeal.number } от { moment(appeal.created_date, "YYYY-MM-DD").format("DD.MM.YYYY") }</b></p>
-																		<p>Отвественный сотрудник ОРК: <b>{ appeal.owner }</b></p>
+																		<p>Ваш персональный менеджер: <b>{ appeal.owner }</b></p>
 																		{ appeal.contracts.length > 0 && (
 																			<p>Договор{ appeal.contracts.length > 1 && "ы" }: <b>{ appeal.contracts.map((contract, contract_index) => (<span key={ contract_index }>№ { contract }{ contract_index < appeal.contracts.length - 1 && ", " }</span>)) }</b></p>																		
 																		) }
@ -152,21 +154,24 @@ class SupportAppealsPage extends React.Component
 																		<div className="item_text">
 																			<p><b>Тема запроса</b></p>
 																			<p>{ appeal.subject }</p>
+																			{ appeal.documents.length > 0 && (
+																				<div className="dosc_list medium-icon">
+																					{ appeal.documents.map((file, index) => {
+																						if(file.doc_direction !== "outgoing") { return null; }
+																						return (<RequestFile key={ `template_${ index }` } id={ file.doc_url } filename={ file.doc_name } extension={ file.doc_extension }/>)
+																					}) }
+																				</div>
+																			) }
 																		</div>
 																		<div className="item_text">
-																			<p><b>Ответ ОРК</b></p>
+																			<p><b>Ответ службы клиентского сервиса</b></p>
 																			<p>{ appeal.answer === "" ? "Без ответа" : appeal.answer }</p>
 																			{ appeal.documents.length > 0 && (
 																				<div className="dosc_list medium-icon">
-																					{ appeal.documents.map((document, document_index) => 
-																					(
-																						<div className="row" key={ document_index }>
-																							<p className="doc_name i-pdf extension" data-format={ document.doc_extension }>
-																								{ document.doc_name }
-																								<span>Скачать документ</span>
-																							</p>
-																						</div>
-																					)) }
+																					{ appeal.documents.map((file, index) => {
+																						if(file.doc_direction !== "incoming") { return null; }
+																						(<RequestFile key={ `template_${ index }` } id={ file.doc_url } filename={ file.doc_name } extension={ file.doc_extension }/>)
+																					}) }
 																				</div>
 																			) }
 																		</div>
--- a/pages/support/components/RequestFile/index.js
+++ b/pages/support/components/RequestFile/index.js
@ -0,0 +1,48 @@
+import React from "react";
+import { SpinnerCircular } from "spinners-react";
+
+import { getFile } from "../../../../actions";
+
+export default class RequestFile 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 { filename, extension } = this.props;
+		const { downloading } = this.state;
+
+		return (
+			<div className="row interactive" onClick={ this._handle_onDownloadFile }>
+				<p className="doc_name i-pdf extension" data-format={ extension } style={{ flexDirection: "column", display: "flex", alignItems: "flex-start", }}>
+					{ filename }
+					<span style={{ position: "relative", color: downloading ? "#8e94a780" : "#8e94a7", }}>
+						Скачать шаблон{ downloading ? (<SpinnerCircular size={ 20 } thickness={ 100 } speed={ 100 } color="rgba(236, 239, 244, 1)" secondaryColor="rgba(28, 1, 169, 1)" style={{ position: "absolute", right: 0, marginRight: "-26px", top: 0, }} />) : null }
+					</span>
+				</p>
+			</div>
+		)
+	}
+}
--- a/pages/support/components/TemplateFile/index.js
+++ b/pages/support/components/TemplateFile/index.js
@ -0,0 +1,48 @@
+import React from "react";
+import { SpinnerCircular } from "spinners-react";
+
+import { getBitrixFile } from "../../../../actions";
+
+export default class TemplateFile extends React.Component
+{
+	constructor(props)
+	{
+		super(props);
+		this.state = {
+			downloading: false
+		}
+	}
+
+	_handle_onDownloadFile = () => 
+	{
+		const { filename, url } = this.props.template;
+		const { downloading } = this.state;
+
+		if(!downloading)
+		{
+			this.setState({ downloading: true }, () => 
+			{
+				getBitrixFile({ url, filename })
+				.then(() => { this.setState({ downloading: false }); })
+				.catch(() => { this.setState({ downloading: false }); });
+			});
+		}
+	}
+
+	render()
+	{
+		const { template } = this.props;
+		const { downloading } = this.state;
+
+		return (
+			<div className="row interactive" onClick={ this._handle_onDownloadFile }>
+				<p className="doc_name i-pdf extension" data-format={ template.extension } style={{ flexDirection: "column", display: "flex", alignItems: "flex-start", }}>
+					{ template.filename }
+					<span style={{ position: "relative", color: downloading ? "#8e94a780" : "#8e94a7", }}>
+						Скачать шаблон{ downloading ? (<SpinnerCircular size={ 20 } thickness={ 100 } speed={ 100 } color="rgba(236, 239, 244, 1)" secondaryColor="rgba(28, 1, 169, 1)" style={{ position: "absolute", right: 0, marginRight: "-26px", top: 0, }} />) : null }
+					</span>
+				</p>
+			</div>
+		)
+	}
+}
--- a/pages/support/index.js
+++ b/pages/support/index.js
@ -12,11 +12,12 @@ import Header from "../components/Header";
 import Footer from "../components/Footer";
 import Company from "../components/Company";
 import InnerMenu from "./components/InnerMenu";
+import AccountLayout from "../components/Layout/Account";
+import TemplateFile from "./components/TemplateFile";

 import {
 	getSupportThemes,
 } from "../../actions";
-import AccountLayout from "../components/Layout/Account";

 class ContractPage extends React.Component 
 {
@ -182,12 +183,7 @@ class ContractPage extends React.Component
 																		<div className="column_text_block">
 																			<p><b>Шаблоны документов</b></p>
 																			<div className="dosc_list medium-icon">
-																				{ question.templates.map((template, index) => 
-																				(
-																					<div className="row" key={ `template_${ index }` }>
-																						<p className="doc_name i-pdf extension" data-format={ template.extension }>{ template.filename }</p>
-																					</div>
-																				)) }
+																				{ question.templates.map((template, index) => (<TemplateFile key={ `template_${ index }` } template={ template } />)) }
 																			</div>
 																		</div>
 																	) }
--- a/pages/support/request.js
+++ b/pages/support/request.js
@ -15,6 +15,8 @@ import Footer from "../components/Footer";
 import Company from "../components/Company";
 import InnerMenu from "./components/InnerMenu";
 import SuccessMessage from "./components/SuccessMessage";
+import AccountLayout from "../components/Layout/Account";
+import TemplateFile from "./components/TemplateFile";

 import {
 	getSupportThemes,
@ -23,46 +25,7 @@ import {
 	sendNewAppeal,
 	sendAppealAttachments
 } from "../../actions";
-import AccountLayout from "../components/Layout/Account";

-class TemplateFile extends React.Component
-{
-	constructor(props)
-	{
-		super(props);
-		this.state = {
-			downloading: false
-		}
-	}
-
-	_handle_onDownloadFile = () => 
-	{
-		const { filename, url } = this.props.template;
-		const { downloading } = this.state;
-
-		if(!downloading)
-		{
-			this.setState({ downloading: true }, () => 
-			{
-				getBitrixFile({ url, filename })
-				.then(() => { this.setState({ downloading: false }); })
-				.catch(() => { this.setState({ downloading: false }); });
-			});
-		}
-	}
-
-	render()
-	{
-		const { template } = this.props;
-		const { downloading } = this.state;
-
-		return (
-			<div className="row interactive" onClick={ this._handle_onDownloadFile }>
-				<p className="doc_name i-pdf extension" data-format={ template.extension }>{ template.filename }<span style={{ position: "relative", color: downloading ? "#8e94a780" : "#8e94a7", width: "100%" }}>Скачать шаблон{ downloading ? (<SpinnerCircular size={ 20 } thickness={ 100 } speed={ 100 } color="rgba(236, 239, 244, 1)" secondaryColor="rgba(28, 1, 169, 1)" style={{ position: "absolute", right: 0, marginRight: "-26px", top: 0, }} />) : null }</span></p>
-			</div>
-		)
-	}
-}
 class FileDropzone extends React.Component
 {
 	constructor(props)