evo/evoleasing-account
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixes for account, manager account layout

Browse Source
This commit is contained in:
merelendor 2022-08-27 02:07:10 +03:00
parent a8669dce42
commit 73e1ca9028
22 changed files with 1796 additions and 2041 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
pages/components/Footer/index.js
View File

@ -22,13 +22,9 @@ export default class Footer extends React.Component
render()
{
const { programs } = this.state;
const { authenticated } = this.props;
return (
<footer style={{ position: "relative" }}>
{ /* authenticated && (
<Manager style={{ position: "absolute", left: "60px", top: "-150px", minWidth: "730px", zIndex: 10, }} />
) */ }
<div className="container">
<ul className="column">
<li><b>Программы</b></li>

27
pages/components/Layout/Account/index.js Normal file
View File

@ -0,0 +1,27 @@
import React from "react";
import Manager from "../../Manager";
export default class AccountLayout extends React.Component
{
constructor(props)
{
super(props);
}
render()
{
return (
<main>
<section>
<div className="clear"></div>
<div className="overflow">
<div className="container">
{ this.props.children }
<Manager/>
</div>
</div>
</section>
</main>
)
}
}

114
pages/contract/agreement.js
View File

@ -20,6 +20,7 @@ import {
getContractRules,
getFile,
} from "../../actions";
import AccountLayout from "../components/Layout/Account";
class ContractPage extends React.Component
{
@ -137,66 +138,61 @@ class ContractPage extends React.Component
<meta name="description" content="ЛК Эволюция автолизинга" />
</Head>
<Header { ...this.props } />
<main>
<section>
<div className="clear"></div>
<div className="container">
<div className="title_wrapper">
<div className="left" style={{ flexDirection: "column" }}>
<h1 className="section_title">Договор №{ number }</h1>
<h5 style={{ fontSize: "14px" }}>
{ date !== undefined && date !== null && date !== null && (<> от {moment(date).format("DD.MM.YYYY")}</>) }
{ car !== undefined && car !== null ? ` - ${car.brand.name} ${car.model.name} | ${ car.reg_number !== null ? car.reg_number : "без рег. номера" } | ${ car.vin_number !== null ? car.vin_number : "без VIN номера" }` : "" }
</h5>
</div>
<Company { ...this.props }/>
</div>
<div className="aside_container about">
<InnerMenu number={ number } { ...this.props } />
<article>
{ loading ? (
<div className="table_row table_header" style={ { minHeight: 300, display: "flex", justifyContent: "center", alignItems: "center", } }>
<SpinnerCircular size={ 90 } thickness={ 51 } speed={ 100 } color="rgba(28, 1, 169, 1)" secondaryColor="rgba(236, 239, 244, 1)" />
</div>
) : (
<div className="dosc_list medium-icon">
{ unsigned !== undefined && unsigned !== null && unsigned.documents !== undefined && unsigned.documents !== null && unsigned.count > 0 && (
<>
<p className="list_title">К подписанию</p>
{ this._renderDocuments(unsigned.documents, "contracts") }
{ this._renderDocuments(unsigned.documents, "agreements") }
{ this._renderDocuments(unsigned.documents, "assignments") }
{ this._renderDocuments(unsigned.documents, "redemptions") }
</>
) }
{ signed !== undefined && signed !== null && signed.documents !== undefined && signed.documents !== null && signed.count > 0 && (
<>
<p className="list_title">Действующие</p>
{ this._renderDocuments(signed.documents, "contracts") }
{ this._renderDocuments(signed.documents, "agreements") }
{ this._renderDocuments(signed.documents, "assignments") }
{ this._renderDocuments(signed.documents, "redemptions") }
</>
) }
{ rules !== undefined && rules !== null && rules.map((document, index) => (
<div className="row" key={ index} >
<p className="doc_name i-pdf">
{ document.name }
<span style={{ width: "100%" }}>
Дата вступления в силу: { document.active_from }
</span>
</p>
<DownloadPdfButton url={ `${ process.env.NEXT_PUBLIC_MAIN_SITE }${ document.url }` } filename={ `${ document.filename }.pdf` } bitrix={ true } />
</div>
)) }
</div>
) }
</article>
</div>
<AccountLayout>
<div className="title_wrapper">
<div className="left" style={{ flexDirection: "column" }}>
<h1 className="section_title">Договор №{ number }</h1>
<h5 style={{ fontSize: "14px" }}>
{ date !== undefined && date !== null && date !== null && (<> от {moment(date).format("DD.MM.YYYY")}</>) }
{ car !== undefined && car !== null ? ` - ${car.brand.name} ${car.model.name} | ${ car.reg_number !== null ? car.reg_number : "без рег. номера" } | ${ car.vin_number !== null ? car.vin_number : "без VIN номера" }` : "" }
</h5>
</div>
</section>
</main>
<Footer authenticated={ true }/>
<Company { ...this.props }/>
</div>
<div className="aside_container about">
<InnerMenu number={ number } { ...this.props } />
<article>
{ loading ? (
<div className="table_row table_header" style={ { minHeight: 300, display: "flex", justifyContent: "center", alignItems: "center", } }>
<SpinnerCircular size={ 90 } thickness={ 51 } speed={ 100 } color="rgba(28, 1, 169, 1)" secondaryColor="rgba(236, 239, 244, 1)" />
</div>
) : (
<div className="dosc_list medium-icon">
{ unsigned !== undefined && unsigned !== null && unsigned.documents !== undefined && unsigned.documents !== null && unsigned.count > 0 && (
<>
<p className="list_title">К подписанию</p>
{ this._renderDocuments(unsigned.documents, "contracts") }
{ this._renderDocuments(unsigned.documents, "agreements") }
{ this._renderDocuments(unsigned.documents, "assignments") }
{ this._renderDocuments(unsigned.documents, "redemptions") }
</>
) }
{ signed !== undefined && signed !== null && signed.documents !== undefined && signed.documents !== null && signed.count > 0 && (
<>
<p className="list_title">Действующие</p>
{ this._renderDocuments(signed.documents, "contracts") }
{ this._renderDocuments(signed.documents, "agreements") }
{ this._renderDocuments(signed.documents, "assignments") }
{ this._renderDocuments(signed.documents, "redemptions") }
</>
) }
{ rules !== undefined && rules !== null && rules.map((document, index) => (
<div className="row" key={ index} >
<p className="doc_name i-pdf">
{ document.name }
<span style={{ width: "100%" }}>
Дата вступления в силу: { document.active_from }
</span>
</p>
<DownloadPdfButton url={ `${ process.env.NEXT_PUBLIC_MAIN_SITE }${ document.url }` } filename={ `${ document.filename }.pdf` } bitrix={ true } />
</div>
)) }
</div>
) }
</article>
</div>
</AccountLayout>
<Footer/>
</React.Fragment>
);
}

214
pages/contract/change/index.js
View File

@ -33,6 +33,7 @@ import {
} from "../../../actions";
import Options from "./components/Options";
import Comparison from "./components/Comparison";
import AccountLayout from "../../components/Layout/Account";
class ChangeGraphicPage extends React.Component
{
@ -280,123 +281,118 @@ class ChangeGraphicPage extends React.Component
<meta name="description" content="ЛК Эволюция автолизинга" />
</Head>
<Header { ...this.props } />
<main style={{ display: "flex", flexDirection: "column", flex: 1 }}>
<section>
<div className="clear"></div>
<div className="container">
<div className="title_wrapper">
<div className="left" style={{ flexDirection: "column" }}>
<h1 className="section_title">Договор №{ number }</h1>
<h5 style={{ fontSize: "14px" }}>
{ date !== undefined && date !== null && date !== null && ( <> от {moment(date).format("DD.MM.YYYY")}</> ) }
{ car !== undefined && car !== null ? ` - ${car.brand.name} ${car.model.name} | ${ car.reg_number !== null ? car.reg_number : "без рег. номера" } | ${ car.vin_number !== null ? car.vin_number : "без VIN номера" }` : "" }
</h5>
<AccountLayout>
<div className="title_wrapper">
<div className="left" style={{ flexDirection: "column" }}>
<h1 className="section_title">Договор №{ number }</h1>
<h5 style={{ fontSize: "14px" }}>
{ date !== undefined && date !== null && date !== null && ( <> от {moment(date).format("DD.MM.YYYY")}</> ) }
{ car !== undefined && car !== null ? ` - ${car.brand.name} ${car.model.name} | ${ car.reg_number !== null ? car.reg_number : "без рег. номера" } | ${ car.vin_number !== null ? car.vin_number : "без VIN номера" }` : "" }
</h5>
</div>
<Company { ...this.props }/>
</div>
{ loading ? (
<div className="aside_container about">
<InnerMenu number={ number } { ...this.props } />
<article className="changes">
<div className="container" style={{ display: "flex", alignItems: "center", justifyContent: "center", }}>
<SpinnerCircular size={ 90 } thickness={ 51 } speed={ 100 } color="rgba(28, 1, 169, 1)" secondaryColor="rgba(236, 239, 244, 1)" />
</div>
<Company { ...this.props }/>
</div>
{ loading ? (
<div className="aside_container about">
<InnerMenu number={ number } { ...this.props } />
<article className="changes">
<div className="container" style={{ display: "flex", alignItems: "center", justifyContent: "center", }}>
<SpinnerCircular size={ 90 } thickness={ 51 } speed={ 100 } color="rgba(28, 1, 169, 1)" secondaryColor="rgba(236, 239, 244, 1)" />
</div>
</article>
</div>
) : (
</article>
</div>
) : (
<>
{ mode_comparison || mode_calculation || mode_final ? (
<>
{ mode_comparison || mode_calculation || mode_final ? (
<>
{ mode_final ? (
<div className="aside_container about">
<FinalMessage number={ number } comment={ comment }/>
</div>
) : (
<div className="aside_container about">
<Comparison
signer={ signer }
signatories={ signatories }
calculations={ calculations }
calculation_id={ calculation_id }
editable={ editable }
current={ current }
calculated={ calculated }
onBack={ this._handle_onBack }
onOptions={ this._handle_onOptions }
onSigner={ this._handle_onSigner }
onSign={ this._handle_onSign }
/>
</div>
) }
</>
{ mode_final ? (
<div className="aside_container about">
<FinalMessage number={ number } comment={ comment }/>
</div>
) : (
<div className="aside_container about">
<InnerMenu number={ number } { ...this.props } />
<article className="changes">
{ mode_options ? (
<Options
dispatch={ this.props.dispatch }
number={ number }
variants={ variants }
variants_selected={ variants_selected }
options={ options }
onVariants={ this._handle_onVariants }
onCalculate={ this._handle_onCalculate }
/>
) : (
<>
{ variants !== null && (
<>
{ variants.enable_addcontract === false ? (
<div className="block alert">
<p>
Внимание! Существует активное неподписанное дополнительное
соглашение. Расчёт новых изменений невозможен
</p>
<Link href={`/contract/${ number }/agreement`}><a>Подробнее</a></Link>
</div>
) : (
<></>
) }
{ calculations !== undefined && calculations !== null && calculations.length > 0 && (
<div className="block">
<p className="title">Предварительные расчеты</p>
<CalculationsList number={ number } calculations={ calculations } onCalculation={ this._handle_onCalculation }/>
</div>
) }
<div className="block">
<p className="title">
Подписанты
<Link href=""><a>Добавить подписанта</a></Link>
</p>
<SignatoriesList signatories={ signatories }/>
</div>
<VariantsList
onOptions={ this._handle_onOptions }
onVariant={ this._handle_onVariantSelect }
variants={ variants }
variants_types={ variants_types }
selected={ variants_selected }
loading={ variants_loading }
blocked={ variants.enable_addcontract === false ? false : false }
/>
{/*}
{ variants.enable_addcontract !== false && (
) }
{*/}
</>
) }
</>
) }
</article>
<Comparison
signer={ signer }
signatories={ signatories }
calculations={ calculations }
calculation_id={ calculation_id }
editable={ editable }
current={ current }
calculated={ calculated }
onBack={ this._handle_onBack }
onOptions={ this._handle_onOptions }
onSigner={ this._handle_onSigner }
onSign={ this._handle_onSign }
/>
</div>
) }
</>
) : (
<div className="aside_container about">
<InnerMenu number={ number } { ...this.props } />
<article className="changes">
{ mode_options ? (
<Options
dispatch={ this.props.dispatch }
number={ number }
variants={ variants }
variants_selected={ variants_selected }
options={ options }
onVariants={ this._handle_onVariants }
onCalculate={ this._handle_onCalculate }
/>
) : (
<>
{ variants !== null && (
<>
{ variants.enable_addcontract === false ? (
<div className="block alert">
<p>
Внимание! Существует активное неподписанное дополнительное
соглашение. Расчёт новых изменений невозможен
</p>
<Link href={`/contract/${ number }/agreement`}><a>Подробнее</a></Link>
</div>
) : (
<></>
) }
{ calculations !== undefined && calculations !== null && calculations.length > 0 && (
<div className="block">
<p className="title">Предварительные расчеты</p>
<CalculationsList number={ number } calculations={ calculations } onCalculation={ this._handle_onCalculation }/>
</div>
) }
<div className="block">
<p className="title">
Подписанты
<Link href=""><a>Добавить подписанта</a></Link>
</p>
<SignatoriesList signatories={ signatories }/>
</div>
<VariantsList
onOptions={ this._handle_onOptions }
onVariant={ this._handle_onVariantSelect }
variants={ variants }
variants_types={ variants_types }
selected={ variants_selected }
loading={ variants_loading }
blocked={ variants.enable_addcontract === false ? false : false }
/>
{/*}
{ variants.enable_addcontract !== false && (
) }
{*/}
</>
) }
</>
) }
</article>
</div>
) }
</div>
</section>
</main>
<Footer authenticated={ true }/>
</>
) }
</AccountLayout>
<Footer/>
</React.Fragment>
);
}

6
pages/contract/components/PenaltiesCalculatorForm/index.js
View File

@ -72,10 +72,10 @@ export default class PenaltiesCalculatorForm extends React.Component
} = this.state;
return (
<div className="block-column">
<>
<div className="dropdown_block">
<div className="block_header">
<p>Счета-уведомления на пени</p>
<p>Расчёт планируемых пени</p>
</div>
</div>
<div className="block_with_form">
@ -93,7 +93,7 @@ export default class PenaltiesCalculatorForm extends React.Component
<button className="button button-blue" disabled={ fines_calculation_disabled } onClick={ this._handle_onApply }>Применить</button>
</form>
</div>
</div>
</>
);
}
}

337
pages/contract/documents.js
View File

@ -29,6 +29,7 @@ import {
getReconciliationFile,
getContractPenalties,
} from "../../actions";
import AccountLayout from "../components/Layout/Account";
const TYPES = {
upd: "УПД по очередным платежам",
@ -60,6 +61,8 @@ class ContractDocumentsPage extends React.Component
penalties_date: moment().format("YYYY.MM.DD"),
penalties_result: undefined,
};
this.penalties_form_ref = React.createRef();
}
static getDerivedStateFromProps(nextProps, prevState)
@ -110,6 +113,24 @@ class ContractDocumentsPage extends React.Component
this.setState({ period_date_start: ds, valid_date_start: ds });
}
}
if (prevState.loading && this.state.loading)
{
if(document.location.hash.indexOf("penalties") > -1)
{
setTimeout(() =>
{
if(this.penalties_form_ref.current !== undefined && this.penalties_form_ref.current !== null)
{
console.log("this.penalties_form_ref.current", this.penalties_form_ref.current);
this.penalties_form_ref.current.scrollIntoView({
behavior: 'smooth',
block: 'center',
});
}
}, 100);
}
}
}
_handle_onReconciliationFileRequest = () =>
@ -383,191 +404,185 @@ class ContractDocumentsPage extends React.Component
<meta name="description" content="ЛК Эволюция автолизинга" />
</Head>
<Header { ...this.props }/>
{ penalties ? (
<main>
<section>
<div className="clear"></div>
<div className="container">
<div className="title_wrapper">
<div className="left" style={{ alignItems: "center", flexWrap: "wrap", alignItems: "flex-start" }}>
<button className="back" onClick={ this._handle_onPenaltiesHide }>Назад</button>
<div style={{ flexDirection: "column" }}>
<h1 className="section_title">Расчет планируемых пени</h1>
<h5 style={{ fontSize: "14px" }}>
Договор №{ number }
{ date !== undefined && date !== null && date !== null && (
<> от {moment(date).format("DD.MM.YYYY")}</>
) }
{ car !== undefined && car !== null
? ` - ${car.brand.name} ${car.model.name} | ${
car.reg_number !== null
? car.reg_number
: "без рег. номера"
} | ${
car.vin_number !== null
? car.vin_number
: "без VIN номера"
}`
: "" }
</h5>
</div>
</div>
</div>
<div className="aside_container about">
<article className="fine">
<div className="fine_block">
<div className="fine_col">
<p>
<span>Пени на дату</span>
{ moment(penalties_date, "YYYY.MM.DD").format("DD.MM.YYYY") }
</p>
</div>
{ penalties_result === undefined ? (
<div
style={{ minHeight: 200, display: "flex", justifyContent: "center", alignItems: "center", }}
>
<SpinnerCircular size={ 90 } thickness={ 51 } speed={ 100 } color="rgba(28, 1, 169, 1)" secondaryColor="rgba(236, 239, 244, 1)" />
</div>
) : (
<>
{ penalties_result.length > 0 ? (
<div className="fine_col">
{ penalties_result.map((bill, index) => (
<p key={ index }>
{ moment(bill.dateBillout, "YYYY-MM-DD").format("MMMM") }
<span>{ numeral(bill.sumBill).format(' ., ') }&nbsp;₽</span>
</p>
)) }
</div>
) : (
<p>К сожалению на указанную дату расчет пени невозможен.</p>
) }
</>
)}
</div>
</article>
</div>
</div>
</section>
</main>
) : (
<main>
<section>
<div className="clear"></div>
<div className="container">
<div className="title_wrapper">
<div className="left" style={{ flexDirection: "column" }}>
<h1 className="section_title">Договор №{ number }</h1>
<AccountLayout>
{ penalties ? (
<>
<div className="title_wrapper">
<div className="left" style={{ alignItems: "center", flexWrap: "wrap", alignItems: "flex-start" }}>
<button className="back" onClick={ this._handle_onPenaltiesHide }>Назад</button>
<div style={{ flexDirection: "column" }}>
<h1 className="section_title">Расчет планируемых пени</h1>
<h5 style={{ fontSize: "14px" }}>
Договор №{ number }
{ date !== undefined && date !== null && date !== null && (
<> от {moment(date).format("DD.MM.YYYY")}</>
) }
) }
{ car !== undefined && car !== null
? ` - ${car.brand.name} ${car.model.name} | ${
car.reg_number !== null
? car.reg_number
: "без рег. номера"
} | ${
? car.reg_number
: "без рег. номера"
} | ${
car.vin_number !== null
? car.vin_number
: "без VIN номера"
}`
? car.vin_number
: "без VIN номера"
}`
: "" }
</h5>
</div>
<Company { ...this.props }/>
</div>
<div className="aside_container about">
<InnerMenu number={ number } { ...this.props }/>
<article>
{ loading ? (
</div>
<div className="aside_container about">
<article className="fine">
<div className="fine_block">
<div className="fine_col">
<p>
<span>Пени на дату</span>
{ moment(penalties_date, "YYYY.MM.DD").format("DD.MM.YYYY") }
</p>
</div>
{ penalties_result === undefined ? (
<div
className="table_row table_header"
style={{
minHeight: 300,
display: "flex",
justifyContent: "center",
alignItems: "center",
}}
style={{ minHeight: 200, display: "flex", justifyContent: "center", alignItems: "center", }}
>
<SpinnerCircular
size={90}
thickness={51}
speed={100}
color="rgba(28, 1, 169, 1)"
secondaryColor="rgba(236, 239, 244, 1)"
/>
<SpinnerCircular size={ 90 } thickness={ 51 } speed={ 100 } color="rgba(28, 1, 169, 1)" secondaryColor="rgba(236, 239, 244, 1)" />
</div>
) : (
<>
<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>
{ penalties_result.length > 0 ? (
<div className="fine_col">
{ penalties_result.map((bill, index) => (
<p key={ index }>
{ moment(bill.dateBillout, "YYYY-MM-DD").format("MMMM") }
<span>{ numeral(bill.sumBill).format(' ., ') }&nbsp;₽</span>
</p>
)) }
</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>*/}
) : (
<p>К сожалению на указанную дату расчет пени невозможен.</p>
) }
</>
)}
</div>
</article>
</div>
</>
) : (
<>
<div className="title_wrapper">
<div className="left" style={{ flexDirection: "column" }}>
<h1 className="section_title">Договор №{ number }</h1>
<h5 style={{ fontSize: "14px" }}>
{ date !== undefined && date !== null && date !== null && (
<> от {moment(date).format("DD.MM.YYYY")}</>
) }
{ car !== undefined && car !== null
? ` - ${car.brand.name} ${car.model.name} | ${
car.reg_number !== null
? car.reg_number
: "без рег. номера"
} | ${
car.vin_number !== null
? car.vin_number
: "без VIN номера"
}`
: "" }
</h5>
</div>
<Company { ...this.props }/>
</div>
<div className="aside_container about">
<InnerMenu number={ number } { ...this.props }/>
<article>
{ loading ? (
<div
className="table_row table_header"
style={{
minHeight: 300,
display: "flex",
justifyContent: "center",
alignItems: "center",
}}
>
<SpinnerCircular
size={90}
thickness={51}
speed={100}
color="rgba(28, 1, 169, 1)"
secondaryColor="rgba(236, 239, 244, 1)"
/>
</div>
) : (
<>
<div className="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="dropdown_blocks_list">
{documents !== undefined && documents !== null ? (
<div className="form_group">
<button
className="button button-blue"
disabled={reconciliation_disabled}
onClick={() => {
this._handle_onReconciliationFileRequest();
}}
>
<>
{this._renderDocuments(documents.upd, "upd")}
{this._renderDocuments(
documents.upd_avans,
"upd_avans"
)}
{this._renderDocuments(
documents.billfines,
"billfines"
{reconciliation_requested ? (
<SpinnerCircular size={ 24 } thickness={ 100 } speed={ 100 } color="rgba(255, 255, 255, 1)" secondaryColor="rgba(255, 255, 255, 0.5)"/>
) : (
"Скачать"
)}
</>
) : null}
{ documents !== undefined && documents !== null && documents.billfines !== undefined && documents.billfines !== null && documents.billfines.length > 0 && (
<PenaltiesCalculatorForm onPenalties={ this._handle_onPenaltiesShow }/>
) }
</button>
{/*<button className="button button-blue">Отправить в ЭДО</button>*/}
</div>
</>
) }
</article>
</div>
</div>
<div className="dropdown_blocks_list">
{documents !== undefined && documents !== null ? (
<>
{this._renderDocuments(documents.upd, "upd")}
{this._renderDocuments(
documents.upd_avans,
"upd_avans"
)}
{this._renderDocuments(
documents.billfines,
"billfines"
)}
</>
) : null}
{ documents !== undefined && documents !== null && documents.billfines !== undefined && documents.billfines !== null && documents.billfines.length > 0 && (
<div className="block-column" ref={ this.penalties_form_ref }>
<PenaltiesCalculatorForm onPenalties={ this._handle_onPenaltiesShow }/>
</div>
) }
</div>
</>
) }
</article>
</div>
</section>
</main>
) }
<Footer authenticated={ true }/>
</>
) }
</AccountLayout>
<Footer/>
</React.Fragment>
);
}

120
pages/contract/events.js
View File

@ -16,6 +16,7 @@ import InnerMenu from "./components/InnerMenu";
import NotificationMessage from "../components/Events/NotificationMessage";
import { getContractInfo, getFilteredEvents } from "../../actions";
import AccountLayout from "../components/Layout/Account";
class ContractPage extends React.Component
{
@ -75,69 +76,64 @@ class ContractPage extends React.Component
<meta name="description" content="ЛК Эволюция автолизинга" />
</Head>
<Header { ...this.props }/>
<main>
<section>
<div className="clear"></div>
<div className="container">
<div className="title_wrapper">
<div className="left" style={{ flexDirection: "column" }}>
<h1 className="section_title">Договор №{ number }</h1>
<h5 style={{ fontSize: "14px" }}>{ date !== undefined && date !== null && date !== null && (<> от { moment(date).format("DD.MM.YYYY") }</>)}{ car !== undefined && car !== null ? ` - ${ car.brand.name } ${ car.model.name } | ${ car.reg_number !== null ? car.reg_number : "без рег. номера" } | ${ car.vin_number !== null ? car.vin_number : "без VIN номера" }` : "" }</h5>
</div>
<Company { ...this.props }/>
</div>
<div className="aside_container about">
<InnerMenu number={ number } { ...this.props } />
<article>
{ filtered !== undefined ? (
<>
{ filtered.length > 0 ? (
<ul className="list events-list">
{ filtered.map((event, index) => (
<NotificationMessage event={ event } key={ index }/>
)) }
</ul>
) : (
<p>Нет событий по данному договору.</p>
) }
</>
) : (
<div className="container" style={{ display: "flex", alignItems: "center", justifyContent: "center", }}>
<SpinnerCircular size={ 90 } thickness={ 51 } speed={ 100 } color="rgba(28, 1, 169, 1)" secondaryColor="rgba(236, 239, 244, 1)" />
</div>
) }
{/*}
<li className="new">
<p className="name"><b>Внимание! Просрочена дата возврата СТС по договору: ХХ.ХХ.ХХХХ</b></p>
<p className="type">Важное</p>
<p className="date">10.01.2022</p>
<p className="action">
<a href="">Посмотрите порядок возврата СТС</a>&nbsp; или
&nbsp;<a href="">Загрузите скан СТС</a>
</p>
</li>
<li className="new">
<p className="name"><b>Внимание! Просрочена дата возврата СТС по договору: ХХ.ХХ.ХХХХ</b></p>
<p className="date">10.01.2022</p>
<p className="action">
<a href="">Посмотрите порядок возврата СТС</a>&nbsp; или
&nbsp;<a href="">Загрузите скан СТС</a>
</p>
</li>
<li className="new">
<p className="name">Внимание! Осталось ХХ дней до пролонгации КАСКО по договору №ХХХХ: ХХ.ХХ.ХХХХ. Не забудьте самостоятельно продлить полис ОСАГО</p>
<p className="date">10.01.2022</p>
<p className="action">
<a href="">Подробнее</a>
</p>
</li>
{*/}
</article>
</div>
<AccountLayout>
<div className="title_wrapper">
<div className="left" style={{ flexDirection: "column" }}>
<h1 className="section_title">Договор №{ number }</h1>
<h5 style={{ fontSize: "14px" }}>{ date !== undefined && date !== null && date !== null && (<> от { moment(date).format("DD.MM.YYYY") }</>)}{ car !== undefined && car !== null ? ` - ${ car.brand.name } ${ car.model.name } | ${ car.reg_number !== null ? car.reg_number : "без рег. номера" } | ${ car.vin_number !== null ? car.vin_number : "без VIN номера" }` : "" }</h5>
</div>
</section>
</main>
<Footer authenticated={ true }/>
<Company { ...this.props }/>
</div>
<div className="aside_container about">
<InnerMenu number={ number } { ...this.props } />
<article>
{ filtered !== undefined ? (
<>
{ filtered.length > 0 ? (
<ul className="list events-list">
{ filtered.map((event, index) => (
<NotificationMessage event={ event } key={ index }/>
)) }
</ul>
) : (
<p>Нет событий по данному договору.</p>
) }
</>
) : (
<div className="container" style={{ display: "flex", alignItems: "center", justifyContent: "center", }}>
<SpinnerCircular size={ 90 } thickness={ 51 } speed={ 100 } color="rgba(28, 1, 169, 1)" secondaryColor="rgba(236, 239, 244, 1)" />
</div>
) }
{/*}
<li className="new">
<p className="name"><b>Внимание! Просрочена дата возврата СТС по договору: ХХ.ХХ.ХХХХ</b></p>
<p className="type">Важное</p>
<p className="date">10.01.2022</p>
<p className="action">
<a href="">Посмотрите порядок возврата СТС</a>&nbsp; или
&nbsp;<a href="">Загрузите скан СТС</a>
</p>
</li>
<li className="new">
<p className="name"><b>Внимание! Просрочена дата возврата СТС по договору: ХХ.ХХ.ХХХХ</b></p>
<p className="date">10.01.2022</p>
<p className="action">
<a href="">Посмотрите порядок возврата СТС</a>&nbsp; или
&nbsp;<a href="">Загрузите скан СТС</a>
</p>
</li>
<li className="new">
<p className="name">Внимание! Осталось ХХ дней до пролонгации КАСКО по договору №ХХХХ: ХХ.ХХ.ХХХХ. Не забудьте самостоятельно продлить полис ОСАГО</p>
<p className="date">10.01.2022</p>
<p className="action">
<a href="">Подробнее</a>
</p>
</li>
{*/}
</article>
</div>
</AccountLayout>
<Footer/>
</React.Fragment>
);
}

337
pages/contract/fines.js
View File

@ -23,6 +23,7 @@ import {
getContractDocuments,
getReconciliationFile,
} from "../../actions";
import AccountLayout from "../components/Layout/Account";
const TYPES = {
upd: "УПД по очередным платежам",
@ -81,7 +82,7 @@ class ContractDocumentsPage extends React.Component
number: this.props.number,
})
.then(() => {
this.setState({ loading: false });
this.setState({ loading: false });
})
.catch(() => {});
}
@ -103,118 +104,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) =>
{
console.log("_handle_onPeriodDate_end", "date", 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) =>
{
console.log("group", group);
@ -230,100 +119,7 @@ class ContractDocumentsPage extends React.Component
}
this.setState({ opened: opened });
};
_renderDocuments = (documents, type) =>
{
const { number } = this.props;
const { opened } = this.state;
if (documents !== undefined && documents !== null)
{
if (documents.length > 0)
{
return (
<>
<div className="block-column">
<div
className={`dropdown_block ${ opened.indexOf(type) > -1 ? "open" : "" }`}
>
<div className="block_header default">
<p>{TYPES[type]}</p>
</div>
</div>
<div className="dosc_list medium-icon">
{ documents
.slice(0, opened.indexOf(type) > -1 ? documents.length : 3)
.map((doc, index) =>
{
console.log("doc", doc);
return (
<div className="row" key={index}>
<p
className="doc_name i-pdf i-medium"
data-format={ doc.extension }
>
{doc.num} от {moment(doc.date).format("DD.MM.YYYY")}
</p>
<DownloadPrintFormPdfButton
className="download-icon"
filename={`${number}_${doc.type}_${doc.num}.${doc.extension}`}
contract={number}
num={doc.num}
date={doc.date}
type={doc.type}
/>
</div>
);
}) }
{ opened.indexOf(type) < 0 && documents.length > 3 && (
<div
className="row click-more"
onClick={ () => this._handle_onGroup(type) }
>
<p>
Еще {documents.length - 3}{" "}
{ pluralize(
documents.length - 3,
"документов",
"документ",
"документа",
"документов"
) }
</p>
</div>
) }
</div>
</div>
</>
);
}
if (type !== "upd_avans" && type !== "billfines")
{
return (
<>
<div className="block-column">
<div
className={`dropdown_block ${ opened.indexOf(type) > -1 ? "open" : "" }`}
>
<div className="block_header">
<p>{ TYPES[ type ] }</p>
</div>
</div>
<div>
<p>Документов пока еще нет.</p>
<p>&nbsp;</p>
</div>
</div>
</>
);
}
}
return null;
};
}
_renderFines = (fines, type) =>
{
@ -473,7 +269,7 @@ class ContractDocumentsPage extends React.Component
</div>
</>
);
};
}
render()
{
@ -506,72 +302,67 @@ class ContractDocumentsPage extends React.Component
<meta name="description" content="ЛК Эволюция автолизинга" />
</Head>
<Header { ...this.props } />
<main>
<section>
<div className="clear"></div>
<div className="container">
<div className="title_wrapper">
<div className="left" style={{ flexDirection: "column" }}>
<h1 className="section_title">Договор №{number}</h1>
<h5 style={{ fontSize: "14px" }}>
{ date !== undefined && date !== null && date !== null && (
<> от {moment(date).format("DD.MM.YYYY")}</>
) }
{ car !== undefined && car !== null
? ` - ${car.brand.name} ${car.model.name} | ${
car.reg_number !== null
? car.reg_number
: "без рег. номера"
} | ${
car.vin_number !== null
? car.vin_number
: "без VIN номера"
}`
: "" }
</h5>
</div>
<Company { ...this.props }/>
</div>
<div className="aside_container about">
<InnerMenu number={ number } { ...this.props }/>
<article>
{ loading ? (
<div
className="table_row table_header"
style={{
minHeight: 300,
display: "flex",
justifyContent: "center",
alignItems: "center",
}}
>
<SpinnerCircular
size={90}
thickness={51}
speed={100}
color="rgba(28, 1, 169, 1)"
secondaryColor="rgba(236, 239, 244, 1)"
/>
</div>
) : (
<>
<div className="dropdown_blocks_list">
{documents !== undefined && documents !== null ? (
<>
{this._renderFines(documents.fines, "fines")}
</>
) : null}
</div>
</>
) }
</article>
</div>
<AccountLayout>
<div className="title_wrapper">
<div className="left" style={{ flexDirection: "column" }}>
<h1 className="section_title">Договор №{number}</h1>
<h5 style={{ fontSize: "14px" }}>
{ date !== undefined && date !== null && date !== null && (
<> от {moment(date).format("DD.MM.YYYY")}</>
) }
{ car !== undefined && car !== null
? ` - ${car.brand.name} ${car.model.name} | ${
car.reg_number !== null
? car.reg_number
: "без рег. номера"
} | ${
car.vin_number !== null
? car.vin_number
: "без VIN номера"
}`
: "" }
</h5>
</div>
</section>
</main>
<Footer authenticated={ true }/>
<Company { ...this.props }/>
</div>
<div className="aside_container about">
<InnerMenu number={ number } { ...this.props }/>
<article>
{ loading ? (
<div
className="table_row table_header"
style={{
minHeight: 300,
display: "flex",
justifyContent: "center",
alignItems: "center",
}}
>
<SpinnerCircular
size={90}
thickness={51}
speed={100}
color="rgba(28, 1, 169, 1)"
secondaryColor="rgba(236, 239, 244, 1)"
/>
</div>
) : (
<>
<div className="dropdown_blocks_list">
{documents !== undefined && documents !== null ? (
<>
{this._renderFines(documents.fines, "fines")}
</>
) : null}
</div>
</>
) }
</article>
</div>
</AccountLayout>
<Footer/>
</React.Fragment>
);
)
}
}
@ -592,7 +383,7 @@ export const getServerSideProps = reduxWrapper.getServerSideProps(
props: {
number: query.number,
},
};
}
}
);

302
pages/contract/index.js
View File

@ -15,6 +15,7 @@ import Company from "../components/Company";
import InnerMenu from "./components/InnerMenu";
import { getContract, getContractDebtInvoiceFile, getContractInfo, getContractPenaltyInvoiceFile } from './../../actions';
import AccountLayout from "../components/Layout/Account";
class ContractSchedulePage extends React.Component
{
@ -125,7 +126,6 @@ class ContractSchedulePage extends React.Component
{
this.setState({ penalty_invoice_file_loading: true }, () =>
{
/*
getContractPenaltyInvoiceFile({ contract: number })
.then(() =>
{
@ -135,7 +135,6 @@ class ContractSchedulePage extends React.Component
{
this.setState({ penalty_invoice_file_loading: false });
});
*/
});
}
}
@ -143,7 +142,7 @@ class ContractSchedulePage extends React.Component
_handle_onCalculatePenalty = () =>
{
const { number } = this.props;
this.props.router.push(`/contract/${ number }/documents`);
this.props.router.push(`/contract/${ number }/documents#penalties`);
}
render()
@ -180,158 +179,153 @@ class ContractSchedulePage extends React.Component
/>
</Head>
<Header { ...this.props }/>
<main>
<section>
<div className="clear"></div>
<div className="container">
<div className="title_wrapper">
<div className="left" style={{ flexDirection: 'column', }}>
<h1 className="section_title">Договор №{ number }</h1>
<p className="section_subtitle">{ date !== undefined && date !== null && date !== null && (<> от { moment(date).format("DD.MM.YYYY") }</>)}{ car !== undefined && car !== null ? ` - ${ car.brand.name } ${ car.model.name } | ${ car.reg_number !== null ? car.reg_number : 'без рег. номера' } | ${ car.vin_number !== null ? car.vin_number : 'без VIN номера' }` : '' }</p>
</div>
<Company { ...this.props }/>
</div>
<div className="aside_container about">
<InnerMenu number={ number } { ...this.props }/>
<article>
{ parseInt(avans, 10) > 0 && (
<div className="payments_actions">
<div className="avans">
<p>Сумма авансовых поступлений по договору: <span style={{ whiteSpace: "nowrap" }}>{ numeral(avans).format(' ., ') }&nbsp;₽</span></p>
</div>
</div>
) }
{/* Вариант 1 */}
<div className="payments_actions">
{ parseInt(debt, 10) > 0 && (
<div>
<p>Счёт на основной долг: { numeral(debt).format(' ., ') }&nbsp;₽</p>
<button className="button button-blue" onClick={ this._handle_onDownloadDebtFile } style={{ minWidth: 113 }}>
{ debt_invoice_file_loading ? (
<SpinnerCircular size={24} thickness={100} speed={100} color="rgba(255, 255, 255, 1)" secondaryColor="rgba(255, 255, 255, 0.5)" style={{ marginTop: "0px" }}/>
) :
("Скачать счет")
}
</button>
</div>
) }
{ parseInt(penalty, 10) > 0 && (
<div>
<p><span>Пени:</span> { numeral(penalty).format(' ., ') }&nbsp;₽</p>
<button className="button button-blue" onClick={ this._handle_onDownloadPenaltyFile } style={{ minWidth: 113 }}>
{ penalty_invoice_file_loading ? (
<SpinnerCircular size={24} thickness={100} speed={100} color="rgba(255, 255, 255, 1)" secondaryColor="rgba(255, 255, 255, 0.5)" style={{ marginTop: "0px" }}/>
) :
("Скачать счет")
}
</button>
<button className="button button-blue" onClick={ this._handle_onCalculatePenalty }>Рассчитать пени</button>
</div>
) }
</div>
<div className="contract_table schedule">
<div className="table_row table_header">
<div className="table_cell">№ платежа</div>
<div className="table_cell">Дата лизингового платежа</div>
<div className="table_cell">Лизинговый платеж с НДС ₽</div>
<div className="table_cell">НДС, 20% ₽</div>
<div className="table_cell">Статус платежа</div>
<div className="table_cell">Платежное поручение</div>
</div>
{ loading ? (
<div className="table_row table_header" style={{ minHeight: 300, display: "flex", justifyContent: "center", alignItems: "center" }}>
<SpinnerCircular size={90} thickness={51} speed={100} color="rgba(28, 1, 169, 1)" secondaryColor="rgba(236, 239, 244, 1)" />
</div>
) : (
<>
{ !full && (
<button className="show_more primary" onClick={ this._handle_onSetFull }>Показать прошедшие платежи</button>
) }
{ payments !== undefined && payments !== null && Object.values(payments).map((payment, index) =>
{
let pd = moment(payment.date, "DD-MM-YYYY");
if(!full && pd < last_pay_date) { return null; }
return (
<div className={ `table_row ${ opened.indexOf(payment.number) > -1 ? "opened" : "" }` } data-status={ payment.status === "NotPaid" && pd < today ? "notpaid" : statuses[payment.status] } key={ index } onClick={ () => this._handle_onSetOpen(payment.number) }>
<div className="table_cell" data-title="Платеж №">{ payment.number }</div>
<div className="table_cell" data-title="от">{ moment(payment.date, "DD-MM-YYYY").format("DD.MM.YYYY") }</div>
<div className="table_cell" data-title="На сумму" style={{ whiteSpace: "nowrap" }}>{ numeral(payment.total_amount).format(' ., ') }&nbsp;₽</div>
<div className="table_cell" data-title="НДС, 20%" style={{ whiteSpace: "nowrap" }}>{ numeral(payment.vat_amount).format(' ., ') }&nbsp;₽</div>
<div className="table_cell">
{ payment.status === "Paid" && "Оплачено" }
{ payment.status === "NotPaid" && "Не оплачено" }
{ payment.status === "HalfPaid" && (
<><span>Недоплата</span><br/><span style={{ whiteSpace: "nowrap" }}>{ numeral(payment.total_amount - payment.paid_amount).format(' ., ') }&nbsp;₽</span></>
) }
{ payment.status === "OverPaid" && (
<><span>Переплата</span> <span style={{ whiteSpace: "nowrap" }}>{ numeral(payment.total_amount).format(' ., ') }&nbsp;₽</span></>
) }
</div>
<div className="table_cell">
{ payment.invoices !== undefined && payment.invoices.map((invoice, invoice_index) =>
(
<React.Fragment key={invoice_index}>
<p style={{ paddingBottom: "15px", lineHeight: "18px" }}>№{ invoice.number } от { moment(invoice.date, "DD-MM-YYYY").format("DD.MM.YYYY") } на сумму <span style={{ whiteSpace: "nowrap" }}>{ numeral(invoice.total_amount).format(' ., ') }&nbsp;₽</span></p>
</React.Fragment>
)) }
</div>
<button className="toggle_cell" ></button>
</div>
)
}) }
{/*}
<div className="table_row" data-status="overpayment-2">
<div className="table_cell" data-title="Платеж №">11</div>
<div className="table_cell" data-title="от">21.02.2021</div>
<div className="table_cell" data-title="На сумму">239 724,05</div>
<div className="table_cell" data-title="НДС, 20% ₽">43 079,18</div>
<div className="table_cell"><span>Переплата</span> <span>15 000,00 ₽</span></div>
<div className="table_cell">№18432 от 20/01/2021 на сумму 255 000,00 ₽</div>
<button className="toggle_cell"></button>
</div>
<div className="table_row opened" data-status="overpayment-1">
<div className="table_cell" data-title="Платеж №">12</div>
<div className="table_cell" data-title="от">21.02.2021</div>
<div className="table_cell" data-title="На сумму">239 724,05</div>
<div className="table_cell" data-title="НДС, 20% ₽">43 079,18</div>
<div className="table_cell">Переплата 10 000,00 ₽</div>
<div className="table_cell">№34223 от 21/02/2021 на сумму 229 724,05 ₽</div>
<button className="toggle_cell"></button>
</div>
<div className="table_row" data-status="paid">
<div className="table_cell" data-title="Платеж №">13</div>
<div className="table_cell" data-title="от">21.02.2021</div>
<div className="table_cell" data-title="На сумму">239 724,05</div>
<div className="table_cell" data-title="НДС, 20% ₽">43 079,18</div>
<div className="table_cell">Оплачено </div>
<div className="table_cell">№44911 от 10/03/2021 на сумму 100 000,00 ₽
№49877 от 21/03/2021 на сумму 139 724,05 ₽</div>
<button className="toggle_cell"></button>
</div>
<div className="table_row">
<div className="table_cell" data-title="Платеж №">14</div>
<div className="table_cell" data-title="от">21.02.2021</div>
<div className="table_cell" data-title="На сумму">239 724,05</div>
<div className="table_cell" data-title="НДС, 20% ₽">43 079,18</div>
<div className="table_cell">Не оплачено </div>
<div className="table_cell">-</div>
<button className="toggle_cell"></button>
</div>
{*/}
</>
) }
</div>
</article>
</div>
<AccountLayout>
<div className="title_wrapper">
<div className="left" style={{ flexDirection: 'column', }}>
<h1 className="section_title">Договор №{ number }</h1>
<p className="section_subtitle">{ date !== undefined && date !== null && date !== null && (<> от { moment(date).format("DD.MM.YYYY") }</>)}{ car !== undefined && car !== null ? ` - ${ car.brand.name } ${ car.model.name } | ${ car.reg_number !== null ? car.reg_number : 'без рег. номера' } | ${ car.vin_number !== null ? car.vin_number : 'без VIN номера' }` : '' }</p>
</div>
</section>
</main>
<Footer authenticated={ true }/>
<Company { ...this.props }/>
</div>
<div className="aside_container about">
<InnerMenu number={ number } { ...this.props }/>
<article>
{ parseInt(avans, 10) > 0 && (
<div className="payments_actions">
<div className="avans">
<p>Сумма авансовых поступлений по договору: <span style={{ whiteSpace: "nowrap" }}>{ numeral(avans).format(' ., ') }&nbsp;₽</span></p>
</div>
</div>
) }
{/* Вариант 1 */}
<div className="payments_actions">
{ parseInt(debt, 10) > 0 && (
<div>
<p>Счёт на основной долг: { numeral(debt).format(' ., ') }&nbsp;₽</p>
<button className="button button-blue" onClick={ this._handle_onDownloadDebtFile } style={{ minWidth: 113 }}>
{ debt_invoice_file_loading ? (
<SpinnerCircular size={24} thickness={100} speed={100} color="rgba(255, 255, 255, 1)" secondaryColor="rgba(255, 255, 255, 0.5)" style={{ marginTop: "0px" }}/>
) :
("Скачать счет")
}
</button>
</div>
) }
{ parseInt(penalty, 10) > 0 && (
<div>
<p><span>Пени:</span> { numeral(penalty).format(' ., ') }&nbsp;₽</p>
<button className="button button-blue" onClick={ this._handle_onDownloadPenaltyFile } style={{ minWidth: 113 }}>
{ penalty_invoice_file_loading ? (
<SpinnerCircular size={24} thickness={100} speed={100} color="rgba(255, 255, 255, 1)" secondaryColor="rgba(255, 255, 255, 0.5)" style={{ marginTop: "0px" }}/>
) :
("Скачать счет")
}
</button>
<button className="button button-blue" onClick={ this._handle_onCalculatePenalty }>Рассчитать пени</button>
</div>
) }
</div>
<div className="contract_table schedule">
<div className="table_row table_header">
<div className="table_cell">№ платежа</div>
<div className="table_cell">Дата лизингового платежа</div>
<div className="table_cell">Лизинговый платеж с НДС ₽</div>
<div className="table_cell">НДС, 20% ₽</div>
<div className="table_cell">Статус платежа</div>
<div className="table_cell">Платежное поручение</div>
</div>
{ loading ? (
<div className="table_row table_header" style={{ minHeight: 300, display: "flex", justifyContent: "center", alignItems: "center" }}>
<SpinnerCircular size={90} thickness={51} speed={100} color="rgba(28, 1, 169, 1)" secondaryColor="rgba(236, 239, 244, 1)" />
</div>
) : (
<>
{ !full && (
<button className="show_more primary" onClick={ this._handle_onSetFull }>Показать прошедшие платежи</button>
) }
{ payments !== undefined && payments !== null && Object.values(payments).map((payment, index) =>
{
let pd = moment(payment.date, "DD-MM-YYYY");
if(!full && pd < last_pay_date) { return null; }
return (
<div className={ `table_row ${ opened.indexOf(payment.number) > -1 ? "opened" : "" }` } data-status={ payment.status === "NotPaid" && pd < today ? "notpaid" : statuses[payment.status] } key={ index } onClick={ () => this._handle_onSetOpen(payment.number) }>
<div className="table_cell" data-title="Платеж №">{ payment.number }</div>
<div className="table_cell" data-title="от">{ moment(payment.date, "DD-MM-YYYY").format("DD.MM.YYYY") }</div>
<div className="table_cell" data-title="На сумму" style={{ whiteSpace: "nowrap" }}>{ numeral(payment.total_amount).format(' ., ') }&nbsp;₽</div>
<div className="table_cell" data-title="НДС, 20%" style={{ whiteSpace: "nowrap" }}>{ numeral(payment.vat_amount).format(' ., ') }&nbsp;₽</div>
<div className="table_cell">
{ payment.status === "Paid" && "Оплачено" }
{ payment.status === "NotPaid" && "Не оплачено" }
{ payment.status === "HalfPaid" && (
<><span>Недоплата</span><br/><span style={{ whiteSpace: "nowrap" }}>{ numeral(payment.total_amount - payment.paid_amount).format(' ., ') }&nbsp;₽</span></>
) }
{ payment.status === "OverPaid" && (
<><span>Переплата</span> <span style={{ whiteSpace: "nowrap" }}>{ numeral(payment.total_amount).format(' ., ') }&nbsp;₽</span></>
) }
</div>
<div className="table_cell">
{ payment.invoices !== undefined && payment.invoices.map((invoice, invoice_index) =>
(
<React.Fragment key={invoice_index}>
<p style={{ paddingBottom: "15px", lineHeight: "18px" }}>№{ invoice.number } от { moment(invoice.date, "DD-MM-YYYY").format("DD.MM.YYYY") } на сумму <span style={{ whiteSpace: "nowrap" }}>{ numeral(invoice.total_amount).format(' ., ') }&nbsp;₽</span></p>
</React.Fragment>
)) }
</div>
<button className="toggle_cell" ></button>
</div>
)
}) }
{/*}
<div className="table_row" data-status="overpayment-2">
<div className="table_cell" data-title="Платеж №">11</div>
<div className="table_cell" data-title="от">21.02.2021</div>
<div className="table_cell" data-title="На сумму">239 724,05</div>
<div className="table_cell" data-title="НДС, 20% ₽">43 079,18</div>
<div className="table_cell"><span>Переплата</span> <span>15 000,00 ₽</span></div>
<div className="table_cell">№18432 от 20/01/2021 на сумму 255 000,00 ₽</div>
<button className="toggle_cell"></button>
</div>
<div className="table_row opened" data-status="overpayment-1">
<div className="table_cell" data-title="Платеж №">12</div>
<div className="table_cell" data-title="от">21.02.2021</div>
<div className="table_cell" data-title="На сумму">239 724,05</div>
<div className="table_cell" data-title="НДС, 20% ₽">43 079,18</div>
<div className="table_cell">Переплата 10 000,00 ₽</div>
<div className="table_cell">№34223 от 21/02/2021 на сумму 229 724,05 ₽</div>
<button className="toggle_cell"></button>
</div>
<div className="table_row" data-status="paid">
<div className="table_cell" data-title="Платеж №">13</div>
<div className="table_cell" data-title="от">21.02.2021</div>
<div className="table_cell" data-title="На сумму">239 724,05</div>
<div className="table_cell" data-title="НДС, 20% ₽">43 079,18</div>
<div className="table_cell">Оплачено </div>
<div className="table_cell">№44911 от 10/03/2021 на сумму 100 000,00 ₽
№49877 от 21/03/2021 на сумму 139 724,05 ₽</div>
<button className="toggle_cell"></button>
</div>
<div className="table_row">
<div className="table_cell" data-title="Платеж №">14</div>
<div className="table_cell" data-title="от">21.02.2021</div>
<div className="table_cell" data-title="На сумму">239 724,05</div>
<div className="table_cell" data-title="НДС, 20% ₽">43 079,18</div>
<div className="table_cell">Не оплачено </div>
<div className="table_cell">-</div>
<button className="toggle_cell"></button>
</div>
{*/}
</>
) }
</div>
</article>
</div>
</AccountLayout>
<Footer/>
</React.Fragment>
);
}

72
pages/contract/materials.js
View File

@ -15,6 +15,7 @@ import InnerMenu from "./components/InnerMenu";
import DownloadPdfButton from "../components/DownloadPdfButton";
import { getContractInfo, getContractMaterials } from "../../actions";
import AccountLayout from "../components/Layout/Account";
class ContractPage extends React.Component
{
@ -81,45 +82,40 @@ class ContractPage extends React.Component
/>
</Head>
<Header { ...this.props }/>
<main>
<section>
<div className="clear"></div>
<div className="container">
<div className="title_wrapper">
<div className="left" style={{ flexDirection: 'column', }}>
<h1 className="section_title">Договор №{ number }</h1>
<h5 style={{ fontSize: '14px' }}>{ date !== undefined && date !== null && date !== null && (<> от { moment(date).format("DD.MM.YYYY") }</>)}{ car !== undefined && car !== null ? ` - ${ car.brand.name } ${ car.model.name } | ${ car.reg_number !== null ? car.reg_number : 'без рег. номера' } | ${ car.vin_number !== null ? car.vin_number : 'без VIN номера' }` : '' }</h5>
</div>
<Company { ...this.props }/>
</div>
<div className="aside_container about">
<InnerMenu number={ number } { ...this.props }/>
<article>
{ loading ? (
<div className="table_row table_header" style={{ minHeight: 300, display: "flex", justifyContent: "center", alignItems: "center" }}>
<SpinnerCircular size={90} thickness={51} speed={100} color="rgba(28, 1, 169, 1)" secondaryColor="rgba(236, 239, 244, 1)" />
</div>
) : (
<div className="dosc_list">
{ materials !== undefined && materials !== null && materials.map((document, index ) => (
<div className="row" key={ index }>
<p className="doc_name i-pdf">
{ document.name }
{ document.description !== null && document.description !== "" && (
<span style={{ width: "100%"}}>{ document.description }</span>
) }
</p>
<DownloadPdfButton url={ `${ process.env.NEXT_PUBLIC_MAIN_SITE }${ document.url }` } filename={ `${ document.filename }.pdf` } bitrix={ true }/>
</div>
)) }
</div>
) }
</article>
</div>
<AccountLayout>
<div className="title_wrapper">
<div className="left" style={{ flexDirection: 'column', }}>
<h1 className="section_title">Договор №{ number }</h1>
<h5 style={{ fontSize: '14px' }}>{ date !== undefined && date !== null && date !== null && (<> от { moment(date).format("DD.MM.YYYY") }</>)}{ car !== undefined && car !== null ? ` - ${ car.brand.name } ${ car.model.name } | ${ car.reg_number !== null ? car.reg_number : 'без рег. номера' } | ${ car.vin_number !== null ? car.vin_number : 'без VIN номера' }` : '' }</h5>
</div>
</section>
</main>
<Footer authenticated={ true }/>
<Company { ...this.props }/>
</div>
<div className="aside_container about">
<InnerMenu number={ number } { ...this.props }/>
<article>
{ loading ? (
<div className="table_row table_header" style={{ minHeight: 300, display: "flex", justifyContent: "center", alignItems: "center" }}>
<SpinnerCircular size={90} thickness={51} speed={100} color="rgba(28, 1, 169, 1)" secondaryColor="rgba(236, 239, 244, 1)" />
</div>
) : (
<div className="dosc_list">
{ materials !== undefined && materials !== null && materials.map((document, index ) => (
<div className="row" key={ index }>
<p className="doc_name i-pdf">
{ document.name }
{ document.description !== null && document.description !== "" && (
<span style={{ width: "100%"}}>{ document.description }</span>
) }
</p>
<DownloadPdfButton url={ `${ process.env.NEXT_PUBLIC_MAIN_SITE }${ document.url }` } filename={ `${ document.filename }.pdf` } bitrix={ true }/>
</div>
)) }
</div>
) }
</article>
</div>
</AccountLayout>
<Footer/>
</React.Fragment>
);
}

516
pages/contract/services.js
View File

@ -16,6 +16,7 @@ import InnerMenu from "./components/InnerMenu";
import { getContractInfo, getContractHelpCard, getContractInsurance, getContractRegistration, getContractTelematic, } from './../../actions';
import DownloadPdfButton from "../components/DownloadPdfButton";
import AccountLayout from "../components/Layout/Account";
class ContractServicesPage extends React.Component
{
@ -163,274 +164,269 @@ class ContractServicesPage extends React.Component
/>
</Head>
<Header { ...this.props }/>
<main>
<section>
<div className="clear"></div>
<div className="container">
<div className="title_wrapper">
<div className="left" style={{ flexDirection: 'column', }}>
<h1 className="section_title">Договор №{ number }</h1>
<h5 style={{ fontSize: '14px' }}>{ date !== undefined && date !== null && date !== null && (<> от { moment(date).format("DD.MM.YYYY") }</>)}{ car !== undefined && car !== null ? ` - ${ car.brand.name } ${ car.model.name } | ${ car.reg_number !== null ? car.reg_number : 'без рег. номера' } | ${ car.vin_number !== null ? car.vin_number : 'без VIN номера' }` : '' }</h5>
<AccountLayout>
<div className="title_wrapper">
<div className="left" style={{ flexDirection: 'column', }}>
<h1 className="section_title">Договор №{ number }</h1>
<h5 style={{ fontSize: '14px' }}>{ date !== undefined && date !== null && date !== null && (<> от { moment(date).format("DD.MM.YYYY") }</>)}{ car !== undefined && car !== null ? ` - ${ car.brand.name } ${ car.model.name } | ${ car.reg_number !== null ? car.reg_number : 'без рег. номера' } | ${ car.vin_number !== null ? car.vin_number : 'без VIN номера' }` : '' }</h5>
</div>
<Company { ...this.props }/>
</div>
<div className="aside_container about">
<InnerMenu number={ number } { ...this.props }/>
<article>
{ loading ? (
<div className="table_row table_header" style={{ minHeight: 300, display: "flex", justifyContent: "center", alignItems: "center" }}>
<SpinnerCircular size={90} thickness={51} speed={100} color="rgba(28, 1, 169, 1)" secondaryColor="rgba(236, 239, 244, 1)" />
</div>
<Company { ...this.props }/>
</div>
<div className="aside_container about">
<InnerMenu number={ number } { ...this.props }/>
<article>
{ loading ? (
<div className="table_row table_header" style={{ minHeight: 300, display: "flex", justifyContent: "center", alignItems: "center" }}>
<SpinnerCircular size={90} thickness={51} speed={100} color="rgba(28, 1, 169, 1)" secondaryColor="rgba(236, 239, 244, 1)" />
) : (
<div className="dropdown_blocks_list zero-margin">
<div className={`dropdown_block ${ opened.indexOf("ratcard") > -1 ? 'open' : '' }`}>
<div className="block_header" onClick={ () => this._handle_onCard('ratcard') }>
<p className="with-icon">
<img src="/assets/images/lk/additional-1.svg" alt="Карта РАТ" width="32px" height="32px" />
Карта РАТ
</p>
<button className="block_toggle"></button>
</div>
) : (
<div className="dropdown_blocks_list zero-margin">
<div className={`dropdown_block ${ opened.indexOf("ratcard") > -1 ? 'open' : '' }`}>
<div className="block_header" onClick={ () => this._handle_onCard('ratcard') }>
<p className="with-icon">
<img src="/assets/images/lk/additional-1.svg" alt="Карта РАТ" width="32px" height="32px" />
Карта РАТ
</p>
<button className="block_toggle"></button>
</div>
{ helpcard !== undefined && helpcard !== null && helpcard.length > 0 ? (
helpcard.map((entry, index) => (
<React.Fragment key={ index }>
{ entry.card_number !== null ? (
<div className="block_body">
<div className="company">
<p className="title">РАТ</p>
<ul>
<li>Номер карты: <b>{ entry.card_number }</b></li>
<li>Тип карты: <b>{ entry.card_type }</b></li>
<li>Действует до: <b>{ moment(entry.date).format("DD.MM.YYYY") }</b></li>
</ul>
</div>
<>
{ entry && entry.description && (
<p dangerouslySetInnerHTML={{ __html: entry.description.replace(/;/g, ";<br/>") }}/>
) }
</>
</div>
) : (
<div className="block_body"><p>Нет данных</p></div>
) }
</React.Fragment>
))
) : (
<div className="block_body"><p>Нет данных</p></div>
) }
</div>
<div className={`dropdown_block ${ opened.indexOf("insurance") > -1 ? 'open' : '' }`}>
<div className="block_header" onClick={ () => this._handle_onCard('insurance') }>
<p className="with-icon">
<img src="/assets/images/lk/additional-2.svg" alt="Страхование" width="32px" height="32px" />
Страхование
</p>
<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>
{ helpcard !== undefined && helpcard !== null && helpcard.length > 0 ? (
helpcard.map((entry, index) => (
<React.Fragment key={ index }>
{ entry.card_number !== null ? (
<div className="block_body">
<div className="company">
<p className="title">РАТ</p>
<ul>
<li>Номер карты: <b>{ entry.card_number }</b></li>
<li>Тип карты: <b>{ entry.card_type }</b></li>
<li>Действует до: <b>{ moment(entry.date).format("DD.MM.YYYY") }</b></li>
</ul>
</div>
<>
{ entry && entry.description && (
<p dangerouslySetInnerHTML={{ __html: entry.description.replace(/;/g, ";<br/>") }}/>
) }
</>
</div>
</div>
{*/}
{ insurance !== undefined && insurance !== null ? (
<>
{ insurance.kasko !== undefined && insurance.kasko !== null && insurance.kasko !== "" && insurance.kasko.map !== undefined && insurance.kasko.map((entry, index) => (
<React.Fragment key={ index }>
<div className={ `company ${ entry.period_type === "prolong" && "filled" }` }>
<p className="title">КАСКО</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.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="Скачать счет на оплату"/>
</div>
) }
</div>
{ entry.description && (<p>{ entry.description }</p>) }
</React.Fragment>
)) }
{ insurance.osago !== undefined && insurance.osago !== null && insurance.osago !== "" && insurance.osago.map !== undefined && insurance.osago.map((entry, index) => (
<React.Fragment key={ index }>
<div className={ `company ${ entry.period_type === "prolong" && "filled" }` }>
<p className="title">ОСАГО</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.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="Скачать счет на оплату"/>
{/*}
<button className="button button-blue" onClick={ () => this._handle_onInvoice(entry.invoice_url) }>Скачать счет на оплату</button>
{*/}
</div>
) }
</div>
{ entry.description && (<p>{ entry.description }</p>) }
</React.Fragment>
)) }
{ insurance.nsib !== undefined && insurance.nsib !== null && insurance.nsib !== "" && insurance.nsib.map !== undefined && insurance.nsib.map((entry, index) => (
<React.Fragment key={ index }>
<div className={ `company ${ entry.period_type === "prolong" && "filled" }` }>
<p className="title">НСИБ</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.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="Скачать счет на оплату"/>
{/*}
<button className="button button-blue" onClick={ () => this._handle_onInvoice(entry.invoice_url) }>Скачать счет на оплату</button>
{*/}
</div>
) }
</div>
{ entry.description && (<p>{ entry.description }</p>) }
</React.Fragment>
)) }
{ 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>
<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.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="Скачать счет на оплату"/>
{/*}
<button className="button button-blue" onClick={ () => this._handle_onInvoice(entry.invoice_url) }>Скачать счет на оплату</button>
{*/}
</div>
) }
</div>
{ entry.description && (<p>{ entry.description }</p>) }
</React.Fragment>
)) }
</>
) : (
<div className="block_body"><p>Нет данных</p></div>
) }
</div>
</div>
<div className={`dropdown_block ${ opened.indexOf("registration") > -1 ? 'open' : '' }`}>
<div className="block_header" onClick={ () => this._handle_onCard('registration') }>
<p className="with-icon">
<img src="/assets/images/lk/additional-3.svg" alt="Регистрация" width="32px" height="32px" />
Регистрация
</p>
<button className="block_toggle"></button>
</div>
{ registration !== undefined && registration !== null && registration.length > 0 ? registration.map((entry, index) =>
(
<div className="block_body" key={ index }>
<div className="company">
<p className="title">ГИБДД</p>
<ul>
{ entry.package && (
<li>Пакет услуг: <b>{ entry.package }</b></li>
) }
{ entry.amount && (
<li>Стоимость: <b style={{ whiteSpace: "nowrap" }}>{ numeral(entry.amount).format(' ., ') } ₽</b></li>
) }
</ul>
</div>
</div>
)) : (
<div className="block_body"><p>Нет данных</p></div>
) }
</div>
<div className={`dropdown_block ${ opened.indexOf("telematic") > -1 ? 'open' : '' }`}>
<div className="block_header" onClick={ () => this._handle_onCard('telematic') }>
<p className="with-icon">
<img src="/assets/images/lk/additional-4.svg" alt="Телематика" width="32px" height="32px" />
Телематика
</p>
<button className="block_toggle"></button>
</div>
{ telematic !== undefined && telematic !== null && telematic.length > 0 ? telematic.map((entry, index) =>
(
<div className="block_body" key={ index }>
<div className="company">
<ul style={{ marginLeft: "0px" }}>
{ entry.provider && (
<li>Поставщик: <b>{ entry.provider }</b></li>
) }
{ entry.equipment && (
<li>Оборудование: <b>{ entry.equipment }</b></li>
) }
{ entry.amount && (
<li>Стоимость: <b style={{ whiteSpace: "nowrap" }}>{ numeral(entry.amount).format(' ., ') } ₽</b></li>
) }
</ul>
</div>
</div>
)) : (
<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>
</React.Fragment>
))
) : (
<div className="block_body"><p>Нет данных</p></div>
) }
</div>
<div className={`dropdown_block ${ opened.indexOf("insurance") > -1 ? 'open' : '' }`}>
<div className="block_header" onClick={ () => this._handle_onCard('insurance') }>
<p className="with-icon">
<img src="/assets/images/lk/additional-2.svg" alt="Страхование" width="32px" height="32px" />
Страхование
</p>
<button className="block_toggle"></button>
</div>
) }
</article>
</div>
</div>
</section>
</main>
<Footer authenticated={ true }/>
<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) => (
<React.Fragment key={ index }>
<div className={ `company ${ entry.period_type === "prolong" && "filled" }` }>
<p className="title">КАСКО</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.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="Скачать счет на оплату"/>
</div>
) }
</div>
{ entry.description && (<p>{ entry.description }</p>) }
</React.Fragment>
)) }
{ insurance.osago !== undefined && insurance.osago !== null && insurance.osago !== "" && insurance.osago.map !== undefined && insurance.osago.map((entry, index) => (
<React.Fragment key={ index }>
<div className={ `company ${ entry.period_type === "prolong" && "filled" }` }>
<p className="title">ОСАГО</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.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="Скачать счет на оплату"/>
{/*}
<button className="button button-blue" onClick={ () => this._handle_onInvoice(entry.invoice_url) }>Скачать счет на оплату</button>
{*/}
</div>
) }
</div>
{ entry.description && (<p>{ entry.description }</p>) }
</React.Fragment>
)) }
{ insurance.nsib !== undefined && insurance.nsib !== null && insurance.nsib !== "" && insurance.nsib.map !== undefined && insurance.nsib.map((entry, index) => (
<React.Fragment key={ index }>
<div className={ `company ${ entry.period_type === "prolong" && "filled" }` }>
<p className="title">НСИБ</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.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="Скачать счет на оплату"/>
{/*}
<button className="button button-blue" onClick={ () => this._handle_onInvoice(entry.invoice_url) }>Скачать счет на оплату</button>
{*/}
</div>
) }
</div>
{ entry.description && (<p>{ entry.description }</p>) }
</React.Fragment>
)) }
{ 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>
<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.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="Скачать счет на оплату"/>
{/*}
<button className="button button-blue" onClick={ () => this._handle_onInvoice(entry.invoice_url) }>Скачать счет на оплату</button>
{*/}
</div>
) }
</div>
{ entry.description && (<p>{ entry.description }</p>) }
</React.Fragment>
)) }
</>
) : (
<div className="block_body"><p>Нет данных</p></div>
) }
</div>
</div>
<div className={`dropdown_block ${ opened.indexOf("registration") > -1 ? 'open' : '' }`}>
<div className="block_header" onClick={ () => this._handle_onCard('registration') }>
<p className="with-icon">
<img src="/assets/images/lk/additional-3.svg" alt="Регистрация" width="32px" height="32px" />
Регистрация
</p>
<button className="block_toggle"></button>
</div>
{ registration !== undefined && registration !== null && registration.length > 0 ? registration.map((entry, index) =>
(
<div className="block_body" key={ index }>
<div className="company">
<p className="title">ГИБДД</p>
<ul>
{ entry.package && (
<li>Пакет услуг: <b>{ entry.package }</b></li>
) }
{ entry.amount && (
<li>Стоимость: <b style={{ whiteSpace: "nowrap" }}>{ numeral(entry.amount).format(' ., ') } ₽</b></li>
) }
</ul>
</div>
</div>
)) : (
<div className="block_body"><p>Нет данных</p></div>
) }
</div>
<div className={`dropdown_block ${ opened.indexOf("telematic") > -1 ? 'open' : '' }`}>
<div className="block_header" onClick={ () => this._handle_onCard('telematic') }>
<p className="with-icon">
<img src="/assets/images/lk/additional-4.svg" alt="Телематика" width="32px" height="32px" />
Телематика
</p>
<button className="block_toggle"></button>
</div>
{ telematic !== undefined && telematic !== null && telematic.length > 0 ? telematic.map((entry, index) =>
(
<div className="block_body" key={ index }>
<div className="company">
<ul style={{ marginLeft: "0px" }}>
{ entry.provider && (
<li>Поставщик: <b>{ entry.provider }</b></li>
) }
{ entry.equipment && (
<li>Оборудование: <b>{ entry.equipment }</b></li>
) }
{ entry.amount && (
<li>Стоимость: <b style={{ whiteSpace: "nowrap" }}>{ numeral(entry.amount).format(' ., ') } ₽</b></li>
) }
</ul>
</div>
</div>
)) : (
<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>
) }
</article>
</div>
</AccountLayout>
<Footer/>
</React.Fragment>
);
}

158
pages/documents/calendar.js
View File

@ -18,6 +18,7 @@ import CalendarCellModal from "../components/Modal/calendar";
import { getCalendar } from '../../actions';
import { MatchMedia } from '../../utils/mediaqueries';
import AccountLayout from "../components/Layout/Account";
class CalendarPage extends React.Component
{
@ -235,88 +236,83 @@ class CalendarPage extends React.Component
/>
</Head>
<Header { ...this.props }/>
<main>
<section>
<div className="clear"></div>
<div className="container">
<div className="title_wrapper">
<div className="left">
{/*[{ perweek ? 1 : 0 }, { current_week }, { selected_week }, { weeks_in_month }]*/}
<h1 className="section_title">Календарь оплат</h1>
</div>
<Company { ...this.props }/>
</div>
<div className="aside_container about">
<InnerMenu { ...this.props }/>
<article>
<div className="calendar_wrapper">
<div className="form_field">
{ periods_list.length > 0 && (
<select id="calendar_month" value={ periods_list.indexOf(selected_period) < 0 ? periods_list[periods_list.length - 1] : selected_period } onChange={ (event) => this._handle_onChangePeriod(event.target.value, 0) }>
{ periods !== null && periods_list.map((period, index) => (
<option key={ index } value={ period }>{ moment(period, "YYYYMM").format('MMMM YYYY') }</option>
)) }
</select>
) }
</div>
<div className="calendar_nav">
<button onClick={ () => this._handle_onWeek_prev() } disabled={ moment(selected_period, "YYYYMM").add(selected_week * 7, "day") <= moment(periods_list[0], "YYYYMM") ? true : false }>Предыдущая неделя</button>
<button onClick={ () => this._handle_onWeek_next() } disabled={ moment(selected_period, "YYYYMM").add(selected_week * 7, "day") >= moment(periods_list[periods_list.length - 1], "YYYYMM").add(1, "month") ? true : false }>Следующая неделя</button>
</div>
<div className="calendar_grid">
<div className="grid_header">
<div className="grid_cell">Пн</div>
<div className="grid_cell">Вт</div>
<div className="grid_cell">Ср</div>
<div className="grid_cell">Чт</div>
<div className="grid_cell">Пт</div>
<div className="grid_cell">Сб</div>
<div className="grid_cell">Вс</div>
</div>
<div className="grid_body">
{ render_weeks.map((week, week_index) =>
{
return (
<div className={week_index == 0 ? "grid_week active" : "grid_week"} key={"week_" + week_index}>
{ week.map((day, index) => {
if(day.payment)
{
return (
<div key={ index } style={{ cursor: "pointer" }} className={`grid_cell payment ${ !perweek && day.date.month() !== month ? 'disabled' : '' } ${ day.date.format("YYYYMMDD") === moment().format("YYYYMMDD") ? 'current' : '' } `} onClick={ () => this._handle_onDayClick(day) }>
<div className="cell_header">
<p><span>{ day.date.format("DD") }</span> { day.date.format("MMM").toLocaleLowerCase() } <span className="year">{ day.date.format("Y").toLocaleLowerCase() }</span></p>
</div>
<div className="cell_body">{ day.payment && (
<p>
Общий платеж
<span style={ day.payment.total > 1000000 ? { fontSize: '14px', whiteSpace: "nowrap" } : { whiteSpace: "nowrap" }}>{ numeral(day.payment.total).format(' ., ') }&nbsp;₽</span>
</p>
)}
</div>
</div>
)
}
return (
<div key={ index } className={`grid_cell ${ !perweek && day.date.month() !== month ? 'disabled' : '' } ${ day.date.format("YYYYMMDD") === moment().format("YYYYMMDD") ? 'current' : '' } `}>
<div className="cell_header">
<p><span>{ day.date.format("DD") }</span> { day.date.format("MMM").toLocaleLowerCase() } <span className="year">{ day.date.format("Y").toLocaleLowerCase() }</span></p>
</div>
</div>
)
}) }
</div>
)
}) }
</div>
</div>
</div>
</article>
</div>
<AccountLayout>
<div className="title_wrapper">
<div className="left">
{/*[{ perweek ? 1 : 0 }, { current_week }, { selected_week }, { weeks_in_month }]*/}
<h1 className="section_title">Календарь оплат</h1>
</div>
</section>
<CalendarCellModal open={ this.state.modalOpened } selected_payment={ selected_payment } close={ () => this.toggleModal() }/>
</main>
<Footer authenticated={ true }/>
<Company { ...this.props }/>
</div>
<div className="aside_container about">
<InnerMenu { ...this.props }/>
<article>
<div className="calendar_wrapper">
<div className="form_field">
{ periods_list.length > 0 && (
<select id="calendar_month" value={ periods_list.indexOf(selected_period) < 0 ? periods_list[periods_list.length - 1] : selected_period } onChange={ (event) => this._handle_onChangePeriod(event.target.value, 0) }>
{ periods !== null && periods_list.map((period, index) => (
<option key={ index } value={ period }>{ moment(period, "YYYYMM").format('MMMM YYYY') }</option>
)) }
</select>
) }
</div>
<div className="calendar_nav">
<button onClick={ () => this._handle_onWeek_prev() } disabled={ moment(selected_period, "YYYYMM").add(selected_week * 7, "day") <= moment(periods_list[0], "YYYYMM") ? true : false }>Предыдущая неделя</button>
<button onClick={ () => this._handle_onWeek_next() } disabled={ moment(selected_period, "YYYYMM").add(selected_week * 7, "day") >= moment(periods_list[periods_list.length - 1], "YYYYMM").add(1, "month") ? true : false }>Следующая неделя</button>
</div>
<div className="calendar_grid">
<div className="grid_header">
<div className="grid_cell">Пн</div>
<div className="grid_cell">Вт</div>
<div className="grid_cell">Ср</div>
<div className="grid_cell">Чт</div>
<div className="grid_cell">Пт</div>
<div className="grid_cell">Сб</div>
<div className="grid_cell">Вс</div>
</div>
<div className="grid_body">
{ render_weeks.map((week, week_index) =>
{
return (
<div className={week_index == 0 ? "grid_week active" : "grid_week"} key={"week_" + week_index}>
{ week.map((day, index) => {
if(day.payment)
{
return (
<div key={ index } style={{ cursor: "pointer" }} className={`grid_cell payment ${ !perweek && day.date.month() !== month ? 'disabled' : '' } ${ day.date.format("YYYYMMDD") === moment().format("YYYYMMDD") ? 'current' : '' } `} onClick={ () => this._handle_onDayClick(day) }>
<div className="cell_header">
<p><span>{ day.date.format("DD") }</span> { day.date.format("MMM").toLocaleLowerCase() } <span className="year">{ day.date.format("Y").toLocaleLowerCase() }</span></p>
</div>
<div className="cell_body">{ day.payment && (
<p>
Общий платеж
<span style={ day.payment.total > 1000000 ? { fontSize: '14px', whiteSpace: "nowrap" } : { whiteSpace: "nowrap" }}>{ numeral(day.payment.total).format(' ., ') }&nbsp;₽</span>
</p>
)}
</div>
</div>
)
}
return (
<div key={ index } className={`grid_cell ${ !perweek && day.date.month() !== month ? 'disabled' : '' } ${ day.date.format("YYYYMMDD") === moment().format("YYYYMMDD") ? 'current' : '' } `}>
<div className="cell_header">
<p><span>{ day.date.format("DD") }</span> { day.date.format("MMM").toLocaleLowerCase() } <span className="year">{ day.date.format("Y").toLocaleLowerCase() }</span></p>
</div>
</div>
)
}) }
</div>
)
}) }
</div>
</div>
</div>
</article>
</div>
</AccountLayout>
<CalendarCellModal open={ this.state.modalOpened } selected_payment={ selected_payment } close={ () => this.toggleModal() }/>
<Footer/>
</React.Fragment>
)
}

96
pages/documents/finals.js
View File

@ -15,6 +15,7 @@ import InnerMenu from "./components/InnerMenu";
import Company from "../components/Company";
import { getContractsList } from '../../actions';
import AccountLayout from "../components/Layout/Account";
class FinalsPage extends React.Component
{
@ -86,57 +87,52 @@ class FinalsPage extends React.Component
/>
</Head>
<Header { ...this.props }/>
<main>
<section>
<div className="clear"></div>
<div className="container">
<div className="title_wrapper">
<div className="left">
<h1 className="section_title">Закрывающие документы</h1>
</div>
<Company { ...this.props }/>
</div>
<div className="aside_container about">
<InnerMenu { ...this.props }/>
<article>
<div className="contract_search">
<form onSubmit={ (event) => { event.preventDefault(); } }>
<div className="form_field single">
<input type="search" value={ search } placeholder="Поиск по номеру договора, марке и модели транспорта, VIN и госномеру ТС" onChange={ (event) => {
this._handle_onChange_search(event.target.value);
} }/>
</div>
<button className="button" disabled={ search !== "" ? false : true } onClick={ this._handle_onSearch }>Поиск</button>
</form>
</div>
{ loading ? (
<div className="table_row table_header" style={{ minHeight: 300, display: "flex", justifyContent: "center", alignItems: "center" }}>
<SpinnerCircular size={90} thickness={51} speed={100} color="rgba(28, 1, 169, 1)" secondaryColor="rgba(236, 239, 244, 1)" />
</div>
) : (
<div className="dosc_list" style={ contracts !== undefined && contracts !== null && contracts.length > 0 ? {} : { display: "flex", justifyContent: "center" }}>
{ contracts !== undefined && contracts !== null && (
<>
{ contracts.length > 0 ? contracts.map((contract, index) => (
<div className="row" key={ index }>
<p className="doc_name i-doc full">
<Link href={ `/contract/${ contract.number }/documents` }><a>Договор { contract.number } от { moment(contract.date).format("DD.MM.YYYY") }</a></Link>
<span>{ contract.car.brand.name } { contract.car.model.name } | { contract.car.reg_number !== undefined && contract.car.reg_number !== null ? contract.car.reg_number : "без рег. номера" } | { contract.car.vin_number }</span>
</p>
</div>
)) : (
<p>Нет договоров для отображения</p>
) }
</>
) }
</div>
) }
</article>
</div>
<AccountLayout>
<div className="title_wrapper">
<div className="left">
<h1 className="section_title">Закрывающие документы</h1>
</div>
</section>
</main>
<Footer authenticated={ true }/>
<Company { ...this.props }/>
</div>
<div className="aside_container about">
<InnerMenu { ...this.props }/>
<article>
<div className="contract_search">
<form onSubmit={ (event) => { event.preventDefault(); } }>
<div className="form_field single">
<input type="search" value={ search } placeholder="Поиск по номеру договора, марке и модели транспорта, VIN и госномеру ТС" onChange={ (event) => {
this._handle_onChange_search(event.target.value);
} }/>
</div>
<button className="button" disabled={ search !== "" ? false : true } onClick={ this._handle_onSearch }>Поиск</button>
</form>
</div>
{ loading ? (
<div className="table_row table_header" style={{ minHeight: 300, display: "flex", justifyContent: "center", alignItems: "center" }}>
<SpinnerCircular size={90} thickness={51} speed={100} color="rgba(28, 1, 169, 1)" secondaryColor="rgba(236, 239, 244, 1)" />
</div>
) : (
<div className="dosc_list" style={ contracts !== undefined && contracts !== null && contracts.length > 0 ? {} : { display: "flex", justifyContent: "center" }}>
{ contracts !== undefined && contracts !== null && (
<>
{ contracts.length > 0 ? contracts.map((contract, index) => (
<div className="row" key={ index }>
<p className="doc_name i-doc full">
<Link href={ `/contract/${ contract.number }/documents` }><a>Договор { contract.number } от { moment(contract.date).format("DD.MM.YYYY") }</a></Link>
<span>{ contract.car.brand.name } { contract.car.model.name } | { contract.car.reg_number !== undefined && contract.car.reg_number !== null ? contract.car.reg_number : "без рег. номера" } | { contract.car.vin_number }</span>
</p>
</div>
)) : (
<p>Нет договоров для отображения</p>
) }
</>
) }
</div>
) }
</article>
</div>
</AccountLayout>
<Footer/>
</React.Fragment>
)
}

128
pages/documents/reconciliations.js
View File

@ -17,6 +17,7 @@ import DateInput from '../components/DatePicker';
import { getContractsList, getReconciliationFile } from '../../actions';
import { eachSeries } from "async";
import AccountLayout from "../components/Layout/Account";
class ReconciliationsPage extends React.Component
@ -226,73 +227,68 @@ class ReconciliationsPage extends React.Component
/>
</Head>
<Header { ...this.props }/>
<main>
<section>
<div className="clear"></div>
<div className="container">
<div className="title_wrapper">
<div className="left">
<h1 className="section_title">Акты сверок</h1>
</div>
<Company { ...this.props }/>
</div>
<div className="aside_container about">
<InnerMenu { ...this.props }/>
<article>
<div className="acts_wrapper" style={{ flex: 1, justifyContent: "center" }}>
{ loading ? (
<div className="table_row table_header" style={{ minHeight: 300, display: "flex", justifyContent: "center", alignItems: "center" }}>
<SpinnerCircular size={90} thickness={51} speed={100} color="rgba(28, 1, 169, 1)" secondaryColor="rgba(236, 239, 244, 1)" />
</div>
) : (
<>
{ contracts !== undefined && contracts !== null && contracts.length > 0 ? (
<>
<div className="dosc_list acts_list-checkbox">
<div className="row">
<p className="doc_name">
<input type="checkbox" name="all" id="all" checked={ checked_all } onChange={ this._handle_onAllContracts } />
<label htmlFor="all">Все договоры</label>
</p>
</div>
{ contracts !== undefined && contracts !== null && contracts.map((contract, index) => (
<div className="row" key={ index }>
<p className="doc_name i-pdf">
<input type="checkbox" checked={ checked_all || checked.indexOf(contract.number) > -1 } name={ `contract_${ contract.number }` } id={ `contract_${ contract.number }` } onChange={ () => this._handle_onContract(contract.number) }/>
<label htmlFor={ `contract_${ contract.number }` }>№{ contract.number } от { moment(contract.date).format("DD.MM.YYYY") }</label>
</p>
</div>
)) }
</div>
<div className="reconciliation_form small" style={{ alignContent: "flex-start" }}>
<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>
<button className="button button-blue" disabled={ reconciliation_disabled } onClick={ () => { this._handle_onReconciliationFiles() }}>
<>
{ 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>
</>
) : (
<p>Нет договоров для запроса актов сверок</p>
) }
</>
) }
</div>
</article>
</div>
<AccountLayout>
<div className="title_wrapper">
<div className="left">
<h1 className="section_title">Акты сверок</h1>
</div>
</section>
</main>
<Footer authenticated={ true }/>
<Company { ...this.props }/>
</div>
<div className="aside_container about">
<InnerMenu { ...this.props }/>
<article>
<div className="acts_wrapper" style={{ flex: 1, justifyContent: "center" }}>
{ loading ? (
<div className="table_row table_header" style={{ minHeight: 300, display: "flex", justifyContent: "center", alignItems: "center" }}>
<SpinnerCircular size={90} thickness={51} speed={100} color="rgba(28, 1, 169, 1)" secondaryColor="rgba(236, 239, 244, 1)" />
</div>
) : (
<>
{ contracts !== undefined && contracts !== null && contracts.length > 0 ? (
<>
<div className="dosc_list acts_list-checkbox">
<div className="row">
<p className="doc_name">
<input type="checkbox" name="all" id="all" checked={ checked_all } onChange={ this._handle_onAllContracts } />
<label htmlFor="all">Все договоры</label>
</p>
</div>
{ contracts !== undefined && contracts !== null && contracts.map((contract, index) => (
<div className="row" key={ index }>
<p className="doc_name i-pdf">
<input type="checkbox" checked={ checked_all || checked.indexOf(contract.number) > -1 } name={ `contract_${ contract.number }` } id={ `contract_${ contract.number }` } onChange={ () => this._handle_onContract(contract.number) }/>
<label htmlFor={ `contract_${ contract.number }` }>№{ contract.number } от { moment(contract.date).format("DD.MM.YYYY") }</label>
</p>
</div>
)) }
</div>
<div className="reconciliation_form small" style={{ alignContent: "flex-start" }}>
<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>
<button className="button button-blue" disabled={ reconciliation_disabled } onClick={ () => { this._handle_onReconciliationFiles() }}>
<>
{ 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>
</>
) : (
<p>Нет договоров для запроса актов сверок</p>
) }
</>
) }
</div>
</article>
</div>
</AccountLayout>
<Footer/>
</React.Fragment>
)
}

199
pages/events.js
View File

@ -11,11 +11,13 @@ import { reduxWrapper } from "../store";
import Header from "./components/Header";
import Footer from "./components/Footer";
import Company from "./components/Company";
import Manager from "./components/Manager";
import InnerMenu from "./components/Events/InnerMenu";
import NotificationMessage from "./components/Events/NotificationMessage";
import { getFilteredEvents } from "../actions";
import AccountLayout from "./components/Layout/Account";
class EventsPage extends React.Component
{
@ -85,108 +87,103 @@ class EventsPage extends React.Component
<meta name="description" content="ЛК Эволюция автолизинга" />
</Head>
<Header {...this.props} />
<main>
<section>
<div className="clear"></div>
<div className="container">
<div className="title_wrapper">
<div className="left" style={{ flexDirection: "column" }}>
<h1 className="section_title">События</h1>
</div>
<Company { ...this.props }/>
</div>
<div className="aside_container about">
<InnerMenu { ...this.props }/>
<article>
<div className="contract_search">
<form onSubmit={ (event) => { event.preventDefault(); } }>
<div className="form_field full">
<input type="search" value={ search } placeholder="Поиск" onChange={ (event) => {
this._handle_onChange_search(event.target.value);
} }/>
</div>
<button className="button" disabled={ search !== "" ? false : true } onClick={ this._handle_onSearch }>Поиск</button>
</form>
</div>
{ events_loaded && (
<>
{ filtered !== undefined ? (
<>
{ filtered.length > 0 ? (
<ul className="list events-list">
{ filtered.map((event, index) => (
<NotificationMessage event={ event } key={ index } { ...this.props }/>
)) }
</ul>
) : (
<p>Нет событий по выбранным условиям.</p>
) }
</>
) : (
<>
{ events.length > 0 ? (
<ul className="list events-list">
{ events.map((event, index) => (
<NotificationMessage event={ event } key={ index } { ...this.props }/>
)) }
</ul>
) : (
<p>У Вас нет событий по договорам.</p>
) }
</>
)}
</>
) }
{/*}
<li className="new">
<p className="name">
<b>
Внимание! { events_loaded === true ? "events_loaded" : "!!!events_loaded" } Просрочена дата возврата СТС по договору:
ХХ.ХХ.ХХХХ
</b>
</p>
<p className="type">Важное</p>
<p className="date">10.01.2022</p>
<p className="action">
<a href="">Посмотрите порядок возврата СТС</a>&nbsp; или
&nbsp;<a href="">Загрузите скан СТС</a>
</p>
</li>
{*/}
{/*}
<li className="new">
<p className="name">
<b>
Внимание! Просрочена дата возврата СТС по договору:
ХХ.ХХ.ХХХХ
</b>
</p>
<p className="date">10.01.2022</p>
<p className="action">
<a href="">Посмотрите порядок возврата СТС</a>&nbsp; или
&nbsp;<a href="">Загрузите скан СТС</a>
</p>
</li>
{*/}
{/*}
<li className="new">
<p className="name">
Внимание! Осталось ХХ дней до пролонгации КАСКО по
договору №ХХХХ: ХХ.ХХ.ХХХХ. Не забудьте самостоятельно
продлить полис ОСАГО
</p>
<p className="date">10.01.2022</p>
<p className="action">
<a href="">Подробнее</a>
</p>
</li>
{*/}
</article>
</div>
<AccountLayout>
<div className="title_wrapper">
<div className="left" style={{ flexDirection: "column" }}>
<h1 className="section_title">События</h1>
</div>
</section>
</main>
<Footer authenticated={ true }/>
<Company { ...this.props }/>
</div>
<div className="aside_container about">
<InnerMenu { ...this.props }/>
<article>
<div className="contract_search">
<form onSubmit={ (event) => { event.preventDefault(); } }>
<div className="form_field full">
<input type="search" value={ search } placeholder="Поиск" onChange={ (event) => {
this._handle_onChange_search(event.target.value);
} }/>
</div>
<button className="button" disabled={ search !== "" ? false : true } onClick={ this._handle_onSearch }>Поиск</button>
</form>
</div>
{ events_loaded && (
<>
{ filtered !== undefined ? (
<>
{ filtered.length > 0 ? (
<ul className="list events-list">
{ filtered.map((event, index) => (
<NotificationMessage event={ event } key={ index } { ...this.props }/>
)) }
</ul>
) : (
<p>Нет событий по выбранным условиям.</p>
) }
</>
) : (
<>
{ events.length > 0 ? (
<ul className="list events-list">
{ events.map((event, index) => (
<NotificationMessage event={ event } key={ index } { ...this.props }/>
)) }
</ul>
) : (
<p>У Вас нет событий по договорам.</p>
) }
</>
)}
</>
) }
{/*}
<li className="new">
<p className="name">
<b>
Внимание! { events_loaded === true ? "events_loaded" : "!!!events_loaded" } Просрочена дата возврата СТС по договору:
ХХ.ХХ.ХХХХ
</b>
</p>
<p className="type">Важное</p>
<p className="date">10.01.2022</p>
<p className="action">
<a href="">Посмотрите порядок возврата СТС</a>&nbsp; или
&nbsp;<a href="">Загрузите скан СТС</a>
</p>
</li>
{*/}
{/*}
<li className="new">
<p className="name">
<b>
Внимание! Просрочена дата возврата СТС по договору:
ХХ.ХХ.ХХХХ
</b>
</p>
<p className="date">10.01.2022</p>
<p className="action">
<a href="">Посмотрите порядок возврата СТС</a>&nbsp; или
&nbsp;<a href="">Загрузите скан СТС</a>
</p>
</li>
{*/}
{/*}
<li className="new">
<p className="name">
Внимание! Осталось ХХ дней до пролонгации КАСКО по
договору №ХХХХ: ХХ.ХХ.ХХХХ. Не забудьте самостоятельно
продлить полис ОСАГО
</p>
<p className="date">10.01.2022</p>
<p className="action">
<a href="">Подробнее</a>
</p>
</li>
{*/}
</article>
</div>
</AccountLayout>
<Footer/>
</React.Fragment>
);
}

243
pages/index.js
View File

@ -17,6 +17,7 @@ import Company from "./components/Company";
import DateInput from './components/DatePicker';
import Pagination from './components/Pagination';
import Manager from "./components/Manager";
import AccountLayout from "./components/Layout/Account";
import AnnouncementsList from "./components/AnnouncementsList";
@ -173,133 +174,123 @@ class IndexPage extends React.Component
/>
</Head>
<Header { ...this.props }/>
<main>
<section>
<div className="clear"></div>
<div className="overflow">
<div className="container">
<div className="title_wrapper">
<div className="left">
<h1 className="section_title">Личный кабинет</h1>
</div>
<div className="right">
<Company company={ company } { ...this.props }/>
</div>
</div>
<AnnouncementsList />
<div className="contract_search">
<form onSubmit={ (event) => { event.preventDefault(); } }>
<div className="form_field">
<input type="search" value={ search } placeholder="Поиск" onChange={ (event) => {
this._handle_onChange_search(event.target.value);
} }/>
</div>
<div className="form_field">
{/*
<input type={ date_from_type } id="date_from" className="date_input" value="" placeholder="Дата договора от" onFocus={ () => this.setState({ date_from_type: "date" }) } onBlur={ () => { this.setState({ date_from_type: "text" }) } } onChange={ (date) => {
this._handle_onChange_date_from(date);
} }/>
<label htmlFor="date_from">Дата<br/>договора от</label>
*/}
<DateInput placeholder="Дата договора от" id={ "date_from" } onChange={ (date) => this.setState({ date_from: date }) }/>
</div>
<div className="form_field">
{/*<input type={ date_to_type } id="date_for" className="date_input" value="" placeholder="Дата договора по" onFocus={ () => this.setState({ date_from_type: "date" }) } onBlur={ () => { this.setState({ date_from_type: "text" }) } } onChange={ (date) => {
this._handle_onChange_date_to(date);
} }/>
<label htmlFor="date_for">Дата<br/>договора по</label>*/}
<DateInput placeholder="Дата договора по" id={ "date_to" } onChange={ (date) => this.setState({ date_to: date }) }/>
</div>
<button className="button" disabled={ search !== "" || date_from !== "" || date_to !== "" ? false : true } onClick={ this._handle_onSearch }>Поиск</button>
</form>
</div>
{ loading ? (
<div className="table_row table_header" style={{ minHeight: 450, display: "flex", justifyContent: "center", alignItems: "center" }}>
<SpinnerCircular size={90} thickness={51} speed={100} color="rgba(28, 1, 169, 1)" secondaryColor="rgba(236, 239, 244, 1)" />
</div>
) : (
<div className="contract_table">
<div className="table_row table_header">
<div className={`table_cell caret ${ sort_number === "asc" ? "reverse" : "" }`} onClick={ this._handle_onChangeSort_number }>Номер договора</div>
<div className={`table_cell caret ${ sort_date === "asc" ? "reverse" : "" }`} onClick={ this._handle_onChangeSort_date }>Дата договора</div>
<div className="table_cell">Автомобиль</div>
<div className="table_cell">Гос.номер / VIN</div>
<div className={`table_cell caret ${ sort_status === "asc" ? "reverse" : "" }`} onClick={ this._handle_onChangeSort_status }>Статус</div>
<div className="table_cell">Следующий платеж</div>
<div className="table_cell">Дополнительные услуги</div>
</div>
{ contracts !== null && (
<>
{ contracts.length > 0 ? contracts.map((contract, index) => (
<Link href={`/contract/${ contract.number }/payments`} key={ index }>
<div className="table_row" key={ index } style={{ cursor: "pointer" }}>
<div className="table_cell"><a>{ contract.number }</a></div>
<div className="table_cell">{ moment(contract.date).format("DD.MM.YYYY") }</div>
<div className="table_cell">{ contract.car?.brand?.name } { contract.car?.model?.name }</div>
<div className="table_cell">
{ contract.car?.reg_number !== null ? contract.car?.reg_number : "Без рег. номера" }
<span>{ contract.car?.vin_number }</span>
</div>
<div className="table_cell">
<p className={ contract_status[contract.status] }>{ contract.status }</p>
{ contract.debt_leasing !== undefined && contract.debt_leasing !== null && parseFloat(contract.debt_leasing) > 0 && (
<p className="contract_debt">
<span>Задолжность:</span>
{ numeral(contract.debt_leasing).format(' ., ') }&nbsp;₽
</p>
) }
{ contract.debt_penalty_fee !== undefined && contract.debt_penalty_fee !== null && parseFloat(contract.debt_penalty_fee) > 0 && (
<p className="contract_debt">
<span>Пени:</span>
{ numeral(contract.debt_penalty_fee).format(' ., ') }&nbsp;₽
</p>
) }
</div>
<div className="table_cell">
{ contract.current_payment_date !== null ? (
<>{ moment(contract.current_payment_date).format("DD.MM.YYYY") }<b className="price" style={{ whiteSpace: "nowrap" }}>{ numeral(contract.current_payment_amount).format(' ., ') }&nbsp;₽</b></>
) : "-" }
</div>
<div className="table_cell">
<div className="service_list">
{ contract.telematics_exists && <i title="Телематика" data-additional-service="1" onClick={ (event) => { event.stopPropagation(); event.preventDefault(); this._handle_onService(`/contract/${ contract.number }/services#telematic`) } }></i> }
{ contract.rat_exists && <i title="РАТ" data-additional-service="2" onClick={ (event) => { event.stopPropagation(); event.preventDefault(); this._handle_onService(`/contract/${ contract.number }/services#ratcard`) } }></i> }
{ contract.gibddreg_exists && <i title="Регистрация в ГИБДД" data-additional-service="3" onClick={ (event) => { event.stopPropagation(); event.preventDefault(); this._handle_onService(`/contract/${ contract.number }/services#registration`) } }></i> }
{ contract.fuelcard_exists && <i title="Топливные карты" data-additional-service="4" onClick={ (event) => { event.stopPropagation(); event.preventDefault(); this._handle_onService(`/contract/${ contract.number }/services#fuelcards`) } }></i> }
{ 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> }
</div>
</div>
</div>
</Link>
)) : (
<div className="table_row">
<div className="table_cell">-</div>
<div className="table_cell">-</div>
<div className="table_cell">-</div>
<div className="table_cell">-</div>
<div className="table_cell">-</div>
<div className="table_cell">-</div>
<div className="table_cell">-</div>
</div>
) }
</>
) }
</div>
) }
{ !all && (
<Pagination page={ page } pages={ pages } onPage={ this._handle_onPage } onAll={ this._handle_onAll } all={ all } showAll={ true }/>
) }
<Manager/>
</div>
<AccountLayout>
<div className="title_wrapper">
<div className="left">
<h1 className="section_title">Личный кабинет</h1>
</div>
</section>
</main>
<Footer authenticated={ true }/>
<div className="right">
<Company company={ company } { ...this.props }/>
</div>
</div>
<AnnouncementsList />
<div className="contract_search">
<form onSubmit={ (event) => { event.preventDefault(); } }>
<div className="form_field">
<input type="search" value={ search } placeholder="Поиск" onChange={ (event) => {
this._handle_onChange_search(event.target.value);
} }/>
</div>
<div className="form_field">
{/*
<input type={ date_from_type } id="date_from" className="date_input" value="" placeholder="Дата договора от" onFocus={ () => this.setState({ date_from_type: "date" }) } onBlur={ () => { this.setState({ date_from_type: "text" }) } } onChange={ (date) => {
this._handle_onChange_date_from(date);
} }/>
<label htmlFor="date_from">Дата<br/>договора от</label>
*/}
<DateInput placeholder="Дата договора от" id={ "date_from" } onChange={ (date) => this.setState({ date_from: date }) }/>
</div>
<div className="form_field">
{/*<input type={ date_to_type } id="date_for" className="date_input" value="" placeholder="Дата договора по" onFocus={ () => this.setState({ date_from_type: "date" }) } onBlur={ () => { this.setState({ date_from_type: "text" }) } } onChange={ (date) => {
this._handle_onChange_date_to(date);
} }/>
<label htmlFor="date_for">Дата<br/>договора по</label>*/}
<DateInput placeholder="Дата договора по" id={ "date_to" } onChange={ (date) => this.setState({ date_to: date }) }/>
</div>
<button className="button" disabled={ search !== "" || date_from !== "" || date_to !== "" ? false : true } onClick={ this._handle_onSearch }>Поиск</button>
</form>
</div>
{ loading ? (
<div className="table_row table_header" style={{ minHeight: 450, display: "flex", justifyContent: "center", alignItems: "center" }}>
<SpinnerCircular size={90} thickness={51} speed={100} color="rgba(28, 1, 169, 1)" secondaryColor="rgba(236, 239, 244, 1)" />
</div>
) : (
<div className="contract_table">
<div className="table_row table_header">
<div className={`table_cell caret ${ sort_number === "asc" ? "reverse" : "" }`} onClick={ this._handle_onChangeSort_number }>Номер договора</div>
<div className={`table_cell caret ${ sort_date === "asc" ? "reverse" : "" }`} onClick={ this._handle_onChangeSort_date }>Дата договора</div>
<div className="table_cell">Автомобиль</div>
<div className="table_cell">Гос.номер / VIN</div>
<div className={`table_cell caret ${ sort_status === "asc" ? "reverse" : "" }`} onClick={ this._handle_onChangeSort_status }>Статус</div>
<div className="table_cell">Следующий платеж</div>
<div className="table_cell">Дополнительные услуги</div>
</div>
{ contracts !== null && (
<>
{ contracts.length > 0 ? contracts.map((contract, index) => (
<Link href={`/contract/${ contract.number }/payments`} key={ index }>
<div className="table_row" key={ index } style={{ cursor: "pointer" }}>
<div className="table_cell"><a>{ contract.number }</a></div>
<div className="table_cell">{ moment(contract.date).format("DD.MM.YYYY") }</div>
<div className="table_cell">{ contract.car?.brand?.name } { contract.car?.model?.name }</div>
<div className="table_cell">
{ contract.car?.reg_number !== null ? contract.car?.reg_number : "Без рег. номера" }
<span>{ contract.car?.vin_number }</span>
</div>
<div className="table_cell">
<p className={ contract_status[contract.status] }>{ contract.status }</p>
{ contract.debt_leasing !== undefined && contract.debt_leasing !== null && parseFloat(contract.debt_leasing) > 0 && (
<p className="contract_debt">
<span>Задолжность:</span>
{ numeral(contract.debt_leasing).format(' ., ') }&nbsp;₽
</p>
) }
{ contract.debt_penalty_fee !== undefined && contract.debt_penalty_fee !== null && parseFloat(contract.debt_penalty_fee) > 0 && (
<p className="contract_debt">
<span>Пени:</span>
{ numeral(contract.debt_penalty_fee).format(' ., ') }&nbsp;₽
</p>
) }
</div>
<div className="table_cell">
{ contract.current_payment_date !== null ? (
<>{ moment(contract.current_payment_date).format("DD.MM.YYYY") }<b className="price" style={{ whiteSpace: "nowrap" }}>{ numeral(contract.current_payment_amount).format(' ., ') }&nbsp;₽</b></>
) : "-" }
</div>
<div className="table_cell">
<div className="service_list">
{ contract.telematics_exists && <i title="Телематика" data-additional-service="1" onClick={ (event) => { event.stopPropagation(); event.preventDefault(); this._handle_onService(`/contract/${ contract.number }/services#telematic`) } }></i> }
{ contract.rat_exists && <i title="РАТ" data-additional-service="2" onClick={ (event) => { event.stopPropagation(); event.preventDefault(); this._handle_onService(`/contract/${ contract.number }/services#ratcard`) } }></i> }
{ contract.gibddreg_exists && <i title="Регистрация в ГИБДД" data-additional-service="3" onClick={ (event) => { event.stopPropagation(); event.preventDefault(); this._handle_onService(`/contract/${ contract.number }/services#registration`) } }></i> }
{ contract.fuelcard_exists && <i title="Топливные карты" data-additional-service="4" onClick={ (event) => { event.stopPropagation(); event.preventDefault(); this._handle_onService(`/contract/${ contract.number }/services#fuelcards`) } }></i> }
{ 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> }
</div>
</div>
</div>
</Link>
)) : (
<div className="table_row">
<div className="table_cell">-</div>
<div className="table_cell">-</div>
<div className="table_cell">-</div>
<div className="table_cell">-</div>
<div className="table_cell">-</div>
<div className="table_cell">-</div>
<div className="table_cell">-</div>
</div>
) }
</>
) }
</div>
) }
{ !all && (
<Pagination page={ page } pages={ pages } onPage={ this._handle_onPage } onAll={ this._handle_onAll } all={ all } showAll={ true }/>
) }
</AccountLayout>
<Footer/>
</React.Fragment>
)
}

192
pages/settings/admin.js
View File

@ -18,6 +18,7 @@ import Pagination from '../components/Pagination';
import Company from "../components/Company";
import { getUsers, sendPhoneChangeNumber, sendPhoneChangeNumberSmsCode, setUserPhone } from '../../actions';
import AccountLayout from "../components/Layout/Account";
class Form extends React.Component
{
@ -196,116 +197,111 @@ class AdminPage extends React.Component
/>
</Head>
<Header { ...this.props }/>
<main>
<section>
<div className="clear"></div>
<div className="container">
<div className="title_wrapper">
<div className="left">
<h1 className="section_title">Личный кабинет</h1>
<AccountLayout>
<div className="title_wrapper">
<div className="left">
<h1 className="section_title">Личный кабинет</h1>
</div>
<Company { ...this.props }/>
</div>
<div className="aside_container about">
<InnerMenu { ...this.props }/>
<article>
<div className="settings_user_control">
<p>Настройки доступа к личному кабинету</p>
<div>
{ add || edit ? (
<button className="button button-blue" onClick={ this._handle_onSave }>Сохранить</button>
) : (
<>
<button className="button button-blue" onClick={ this._handle_onAdd }>Добавить пользователя</button>
<button className="button button-blue" onClick={ this._handle_onEdit }>Редактировать</button>
</>
) }
</div>
<Company { ...this.props }/>
</div>
<div className="aside_container about">
<InnerMenu { ...this.props }/>
<article>
<div className="settings_user_control">
<p>Настройки доступа к личному кабинету</p>
<div>
{ add || edit ? (
<button className="button button-blue" onClick={ this._handle_onSave }>Сохранить</button>
) : (
<>
<button className="button button-blue" onClick={ this._handle_onAdd }>Добавить пользователя</button>
<button className="button button-blue" onClick={ this._handle_onEdit }>Редактировать</button>
</>
) }
</div>
</div>
<div className="settings_table editable">
<div className="table_header table_row">
<div className="table_cell">ФИО пользователя</div>
<div className="table_cell">Почта</div>
<div className="table_cell">Роль</div>
<div className="table_cell">Доступные организации</div>
<div className="table_cell">Статус</div>
<div className="table_cell"></div>
</div>
{ users !== undefined && users !== null && users.map((entry, index) =>
{
if(entry.email === user.email)
{
return (
<div className="table_row" key={ index }>
<div className="table_cell" data-title="ФИО пользователя">{ entry.name } (Вы)</div>
<div className="table_cell" data-title="Почта">{ entry.email }</div>
<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' }}>
</div>
</div>
)
}
return null;
}) }
{ users !== undefined && users !== null && users.map((entry, index) =>
{
if(entry.email !== user.email)
{
return (
<div className="table_row" key={ index }>
<div className="table_cell" data-title="ФИО пользователя">{ entry.name }</div>
<div className="table_cell" data-title="Почта">{ entry.email }</div>
<div className="table_cell" data-title="Роль">Администратор</div>
<div className="table_cell" data-title="Доступные организации">{ entry.companies.map((company, c_index) => (
<p key={ c_index }>{ company.title }</p>
)) }</div>
<div className="table_cell" data-title="Статус">Активен</div>
<div className="table_cell delete" style={{ position: 'relative' }}>
</div>
</div>
)
}
return null;
}) }
{/*}
{ user !== undefined && user !== null && user.email !== undefined && user.email !== null && (
<div className="table_row">
<div className="table_cell" data-title="ФИО пользователя">{ `${ user.lastname } ${ user.name } ${ user.secondname }` }</div>
<div className="table_cell" data-title="Почта">{ user.email }</div>
<div className="settings_table editable">
<div className="table_header table_row">
<div className="table_cell">ФИО пользователя</div>
<div className="table_cell">Почта</div>
<div className="table_cell">Роль</div>
<div className="table_cell">Доступные организации</div>
<div className="table_cell">Статус</div>
<div className="table_cell"></div>
</div>
{ users !== undefined && users !== null && users.map((entry, index) =>
{
if(entry.email === user.email)
{
return (
<div className="table_row" key={ index }>
<div className="table_cell" data-title="ФИО пользователя">{ entry.name } (Вы)</div>
<div className="table_cell" data-title="Почта">{ entry.email }</div>
<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' }}>
</div>
</div>
) }
{*/}
{/*}
<div className="table_row">
<div className="table_cell" data-title="ФИО пользователя">Иванов Иван Иванович</div>
<div className="table_cell" data-title="Почта">iivanov@mail.com</div>
<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' }}>
<button className="delete_user" title="Удалить пользователя"></button>
)
}
return null;
}) }
{ users !== undefined && users !== null && users.map((entry, index) =>
{
if(entry.email !== user.email)
{
return (
<div className="table_row" key={ index }>
<div className="table_cell" data-title="ФИО пользователя">{ entry.name }</div>
<div className="table_cell" data-title="Почта">{ entry.email }</div>
<div className="table_cell" data-title="Роль">Администратор</div>
<div className="table_cell" data-title="Доступные организации">{ entry.companies.map((company, c_index) => (
<p key={ c_index }>{ company.title }</p>
)) }</div>
<div className="table_cell" data-title="Статус">Активен</div>
<div className="table_cell delete" style={{ position: 'relative' }}>
</div>
</div>
)
}
return null;
}) }
{/*}
{ user !== undefined && user !== null && user.email !== undefined && user.email !== null && (
<div className="table_row">
<div className="table_cell" data-title="ФИО пользователя">{ `${ user.lastname } ${ user.name } ${ user.secondname }` }</div>
<div className="table_cell" data-title="Почта">{ user.email }</div>
<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' }}>
</div>
{*/}
{ add && (
<Form companies={ companies }/>
) }
{/*}
{*/}
</div>
</article>
) }
{*/}
{/*}
<div className="table_row">
<div className="table_cell" data-title="ФИО пользователя">Иванов Иван Иванович</div>
<div className="table_cell" data-title="Почта">iivanov@mail.com</div>
<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' }}>
<button className="delete_user" title="Удалить пользователя"></button>
</div>
</div>
{*/}
{ add && (
<Form companies={ companies }/>
) }
{/*}
{*/}
</div>
</div>
</section>
</main>
<Footer authenticated={ true }/>
</article>
</div>
</AccountLayout>
<Footer/>
</React.Fragment>
)
}

96
pages/settings/password.js
View File

@ -17,6 +17,7 @@ import Pagination from '../components/Pagination';
import Company from "../components/Company";
import { sendNewPassword } from '../../actions';
import AccountLayout from "../components/Layout/Account";
class IndexPage extends React.Component
{
@ -138,57 +139,52 @@ class IndexPage extends React.Component
/>
</Head>
<Header { ...this.props }/>
<main>
<section>
<div className="clear"></div>
<div className="container">
<div className="title_wrapper">
<div className="left">
<h1 className="section_title">Смена пароля</h1>
</div>
<Company { ...this.props }/>
</div>
<div className="aside_container about">
<InnerMenu { ...this.props }/>
<article>
{ password_form_step === 1 && (
<div className={`login recovery`}>
<form onSubmit={ this._handle_onPasswordSubmit } className="newPass_form">
<p className="message full">Введите Ваш текущий пароль</p>
<div className="form_field">
<input type="password" name="password" value={ password } placeholder="Текущий пароль" onChange={ (event) => this._handle_onPasswordChange(event.target.value) } />
</div>
<p style={{ width: "100%" }}>{ password_error ? 'Ошибка: неверный пароль' : `\u00A0` }</p>
<p style={{ width: "100%" }} className="message"><br/></p>
<p style={{ width: "100%" }} className="message"><br/></p>
<p className="message full">Введите новый пароль и повторите новый пароль</p>
<div className="form_field">
<input type="password" name="new_password" value={ new_password } placeholder="Новый пароль" onChange={ (event) => this._handle_onNewPasswordChange(event.target.value) } />
</div>
<div className="form_field">
<input type="password" name="new_password_repeat" value={ new_password_repeat } placeholder="Новый пароль (повторите)" onChange={ (event) => this._handle_onNewPasswordRepeatChange(event.target.value) } />
</div>
<button type="submit" className="button button-blue" disabled={ new_password_submit_disabled }>
{ new_password_check_loading ? (
<SpinnerCircular size={24} thickness={100} speed={100} color="rgba(255, 255, 255, 1)" secondaryColor="rgba(255, 255, 255, 0.5)" style={{ marginTop: "4px" }}/>
) : "Изменить пароль" }
</button>
</form>
<p className="full">{ new_password_error ? 'Внимание: пароли не совпадают' : `\u00A0` }</p>
<p className="full">{ new_password.length < 6 ? 'Внимание: минимальная длина пароля - 6 символов' : `\u00A0` }</p>
</div>
) }
{ password_form_step === 2 && (
<div className={`login recovery`}>
<p className="message full">Ваш пароль был успешно изменен.</p>
</div>
) }
</article>
</div>
<AccountLayout>
<div className="title_wrapper">
<div className="left">
<h1 className="section_title">Смена пароля</h1>
</div>
</section>
</main>
<Footer authenticated={ true }/>
<Company { ...this.props }/>
</div>
<div className="aside_container about">
<InnerMenu { ...this.props }/>
<article>
{ password_form_step === 1 && (
<div className={`login recovery`}>
<form onSubmit={ this._handle_onPasswordSubmit } className="newPass_form">
<p className="message full">Введите Ваш текущий пароль</p>
<div className="form_field">
<input type="password" name="password" value={ password } placeholder="Текущий пароль" onChange={ (event) => this._handle_onPasswordChange(event.target.value) } />
</div>
<p style={{ width: "100%" }}>{ password_error ? 'Ошибка: неверный пароль' : `\u00A0` }</p>
<p style={{ width: "100%" }} className="message"><br/></p>
<p style={{ width: "100%" }} className="message"><br/></p>
<p className="message full">Введите новый пароль и повторите новый пароль</p>
<div className="form_field">
<input type="password" name="new_password" value={ new_password } placeholder="Новый пароль" onChange={ (event) => this._handle_onNewPasswordChange(event.target.value) } />
</div>
<div className="form_field">
<input type="password" name="new_password_repeat" value={ new_password_repeat } placeholder="Новый пароль (повторите)" onChange={ (event) => this._handle_onNewPasswordRepeatChange(event.target.value) } />
</div>
<button type="submit" className="button button-blue" disabled={ new_password_submit_disabled }>
{ new_password_check_loading ? (
<SpinnerCircular size={24} thickness={100} speed={100} color="rgba(255, 255, 255, 1)" secondaryColor="rgba(255, 255, 255, 0.5)" style={{ marginTop: "4px" }}/>
) : "Изменить пароль" }
</button>
</form>
<p className="full">{ new_password_error ? 'Внимание: пароли не совпадают' : `\u00A0` }</p>
<p className="full">{ new_password.length < 6 ? 'Внимание: минимальная длина пароля - 6 символов' : `\u00A0` }</p>
</div>
) }
{ password_form_step === 2 && (
<div className={`login recovery`}>
<p className="message full">Ваш пароль был успешно изменен.</p>
</div>
) }
</article>
</div>
</AccountLayout>
<Footer/>
</React.Fragment>
)
}

142
pages/settings/phone.js
View File

@ -18,6 +18,7 @@ import Pagination from '../components/Pagination';
import Company from "../components/Company";
import { sendPhoneChangeNumber, sendPhoneChangeNumberSmsCode, setUserPhone } from '../../actions';
import AccountLayout from "../components/Layout/Account";
class IndexPage extends React.Component
{
@ -165,80 +166,75 @@ class IndexPage extends React.Component
/>
</Head>
<Header { ...this.props }/>
<main>
<section>
<div className="clear"></div>
<div className="container">
<div className="title_wrapper">
<div className="left">
<h1 className="section_title">Вход по номеру телефона</h1>
</div>
<Company { ...this.props }/>
</div>
<div className="aside_container about">
<InnerMenu { ...this.props }/>
<article>
{ phone_form_step !== 2 && phone_form_step !== 3 && (
<>
{ user.phone !== undefined && user.phone !== null && user.phone !== "" ? (
<p>Номер для авторизации <strong>+{ user.phone.replace(/[^0-9.]/g, '') }</strong>. Вы можете изменить номер телефона для авторизации.</p>
) : (
<p>У Вас отсутствует привязанный номер телефона. Вы можете добавить номер телефона для авторизации.</p>
) }
</>
) }
<p><br/></p>
<div className={`login recovery`}>
{ phone_form_step === 1 && (
<>
<form onSubmit={ this._handle_onPhoneSubmit }>
<div className="form_field">
<input type="text" name="phone" value={ phone } placeholder="Введите номер телефона, например +7 900 111 22 33" onChange={ (event) => this._handle_onPhoneChange(event.target.value) } required={ true }/>
</div>
<button type="submit" className="button button-blue" disabled={ phone_login_disabled }>
{ phone_check_loading ? (
<SpinnerCircular size={24} thickness={100} speed={100} color="rgba(255, 255, 255, 1)" secondaryColor="rgba(255, 255, 255, 0.5)" style={{ marginTop: "4px" }}/>
) : "Получить код" }
</button>
</form>
<p>{ phone_number_error ? 'Ошибка: нет аккаунта с таким номером телефона' : `\u00A0` }</p>
<p>{ phone_number_format_error ? 'Ошибка: номер должен начинаться на +7' : `\u00A0` }</p>
</>
) }
{ phone_form_step === 2 && (
<>
<p className="message">На номер <strong>+{ phone.replace(/[^0-9.]/g, '') }</strong> отправлен код подтверждения.</p>
<form onSubmit={ this._handle_onCodeSubmit }>
<div className="form_field">
<input type="text" name="phone_code" value={ phone_code } placeholder="Введите код из СМС" onChange={ (event) => this._handle_onPhoneCodeChange(event.target.value) } />
</div>
<button type="submit" className="button button-blue" disabled={ phone_code_submit_disabled }>
{ code_check_loading ? (
<SpinnerCircular size={24} thickness={100} speed={100} color="rgba(255, 255, 255, 1)" secondaryColor="rgba(255, 255, 255, 0.5)" style={{ marginTop: "4px" }}/>
) : "Отправить код" }
</button>
</form>
<div className="resend" style={{ justifyContent: "flex-start" }}>
{ timer !== 0 ? (
<p>Запросить код повторно можно через: { timer } { pluralize(timer, 'секунд', 'секунду', 'секунды', 'секунд') }</p>
) : (
<button className="button button-blue transparent" onClick={ (event) => this._handle_onResendCode(event) }>Запросить код повторно</button>
) }
{/* disabled={ phone_code_resend_disabled }*/}
</div>
<p>{ phone_sms_code_error ? 'Ошибка: Вы указали неверный код' : `\u00A0` }</p>
</>
) }
{ phone_form_step === 3 && (
<p className="message">Вы успешно привязали номер <strong>+{ phone.replace(/[^0-9.]/g, '') }</strong> к Вашей учетной записи.</p>
) }
</div>
</article>
</div>
<AccountLayout>
<div className="title_wrapper">
<div className="left">
<h1 className="section_title">Вход по номеру телефона</h1>
</div>
</section>
</main>
<Footer authenticated={ true }/>
<Company { ...this.props }/>
</div>
<div className="aside_container about">
<InnerMenu { ...this.props }/>
<article>
{ phone_form_step !== 2 && phone_form_step !== 3 && (
<>
{ user.phone !== undefined && user.phone !== null && user.phone !== "" ? (
<p>Номер для авторизации <strong>+{ user.phone.replace(/[^0-9.]/g, '') }</strong>. Вы можете изменить номер телефона для авторизации.</p>
) : (
<p>У Вас отсутствует привязанный номер телефона. Вы можете добавить номер телефона для авторизации.</p>
) }
</>
) }
<p><br/></p>
<div className={`login recovery`}>
{ phone_form_step === 1 && (
<>
<form onSubmit={ this._handle_onPhoneSubmit }>
<div className="form_field">
<input type="text" name="phone" value={ phone } placeholder="Введите номер телефона, например +7 900 111 22 33" onChange={ (event) => this._handle_onPhoneChange(event.target.value) } required={ true }/>
</div>
<button type="submit" className="button button-blue" disabled={ phone_login_disabled }>
{ phone_check_loading ? (
<SpinnerCircular size={24} thickness={100} speed={100} color="rgba(255, 255, 255, 1)" secondaryColor="rgba(255, 255, 255, 0.5)" style={{ marginTop: "4px" }}/>
) : "Получить код" }
</button>
</form>
<p>{ phone_number_error ? 'Ошибка: нет аккаунта с таким номером телефона' : `\u00A0` }</p>
<p>{ phone_number_format_error ? 'Ошибка: номер должен начинаться на +7' : `\u00A0` }</p>
</>
) }
{ phone_form_step === 2 && (
<>
<p className="message">На номер <strong>+{ phone.replace(/[^0-9.]/g, '') }</strong> отправлен код подтверждения.</p>
<form onSubmit={ this._handle_onCodeSubmit }>
<div className="form_field">
<input type="text" name="phone_code" value={ phone_code } placeholder="Введите код из СМС" onChange={ (event) => this._handle_onPhoneCodeChange(event.target.value) } />
</div>
<button type="submit" className="button button-blue" disabled={ phone_code_submit_disabled }>
{ code_check_loading ? (
<SpinnerCircular size={24} thickness={100} speed={100} color="rgba(255, 255, 255, 1)" secondaryColor="rgba(255, 255, 255, 0.5)" style={{ marginTop: "4px" }}/>
) : "Отправить код" }
</button>
</form>
<div className="resend" style={{ justifyContent: "flex-start" }}>
{ timer !== 0 ? (
<p>Запросить код повторно можно через: { timer } { pluralize(timer, 'секунд', 'секунду', 'секунды', 'секунд') }</p>
) : (
<button className="button button-blue transparent" onClick={ (event) => this._handle_onResendCode(event) }>Запросить код повторно</button>
) }
{/* disabled={ phone_code_resend_disabled }*/}
</div>
<p>{ phone_sms_code_error ? 'Ошибка: Вы указали неверный код' : `\u00A0` }</p>
</>
) }
{ phone_form_step === 3 && (
<p className="message">Вы успешно привязали номер <strong>+{ phone.replace(/[^0-9.]/g, '') }</strong> к Вашей учетной записи.</p>
) }
</div>
</article>
</div>
</AccountLayout>
<Footer/>
</React.Fragment>
)
}

214
pages/support/appeals.js
View File

@ -20,6 +20,7 @@ import {
getFile,
setAppealsRead,
} from "../../actions";
import AccountLayout from "../components/Layout/Account";
class SupportAppealsPage extends React.Component
{
@ -86,124 +87,119 @@ class SupportAppealsPage extends React.Component
<meta name="description" content="ЛК Эволюция автолизинга" />
</Head>
<Header { ...this.props } />
<main>
<section>
<div className="clear"></div>
<div className="container">
<div className="title_wrapper">
<div className="left" style={{ flexDirection: "column" }}>
<h1 className="section_title">Мои обращения</h1>
</div>
<Company { ...this.props }/>
</div>
<div className="aside_container about">
<InnerMenu { ...this.props } />
<article>
<div className="appeal_list">
{ appeals !== undefined && appeals !== null && appeals.list !== undefined && appeals.list !== null && (
<AccountLayout>
<div className="title_wrapper">
<div className="left" style={{ flexDirection: "column" }}>
<h1 className="section_title">Мои обращения</h1>
</div>
<Company { ...this.props }/>
</div>
<div className="aside_container about">
<InnerMenu { ...this.props } />
<article>
<div className="appeal_list">
{ appeals !== undefined && appeals !== null && appeals.list !== undefined && appeals.list !== null && (
<>
{ appeals.list.length > 0 ? (
<>
{ appeals.list.length > 0 ? (
<>
{ appeals.list.map((appeal, index) =>
(
<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>
{ 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>
) }
<div className="status" style={{ backgroundColor: status[appeal.status].color }}>{ status[appeal.status].title }</div>
</div>
<div className="item_body">
<div className="item_text">
<p><b>Тема запроса</b></p>
<p>{ appeal.subject }</p>
</div>
<div className="item_text">
<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>
)) }
</div>
) }
</div>
</div>
</div>
)) }
</>
) : (
<p>У Вас пока нет обращений.</p>
) }
</>
)}
{/*}
<div className="appeal_item">
<div className="item_header">
<p>Номер обращения: <b>123 от 13.04.2022</b></p>
<p>Отвественный ОРК: <b>Иванов И.И.</b></p>
<p>Договор: <b>№2021_1655, №2021_1655</b></p>
<div className="status">Активное</div>
</div>
<div className="item_body">
<div className="item_text">
<p><b>Тема запроса</b></p>
<p>Текстовый контент</p>
</div>
<div className="item_text">
<p><b>Текст ответа ОРК</b></p>
<p>Текстовый контент</p>
</div>
</div>
</div>
<div className="appeal_item">
<div className="item_header">
<p>Номер обращения: <b>123 от 13.04.2022</b></p>
<p>Отвественный ОРК: <b>Иванов И.И.</b></p>
<p>Договор: <b>№2021_1655, №2021_1655</b></p>
</div>
<div className="item_body">
<div className="item_text">
<p><b>Тема запроса</b></p>
<p>Текстовый контент</p>
</div>
<div className="item_text">
<p><b>Текст ответа ОРК</b></p>
<p>Текстовый контент</p>
<div className="dosc_list medium-icon">
<div className="row">
<p className="doc_name i-pdf extension">
№2021_1655 от 20.04.2021
<span>2021_1655 от 20.04.2021</span>
</p>
{ appeals.list.map((appeal, index) =>
(
<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>
{ 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>
) }
<div className="status" style={{ backgroundColor: status[appeal.status].color }}>{ status[appeal.status].title }</div>
</div>
<div className="row">
<p className="doc_name i-pdf extension">
№2021_1655 от 20.04.2021
<span>2021_1655 от 20.04.2021</span>
</p>
<div className="item_body">
<div className="item_text">
<p><b>Тема запроса</b></p>
<p>{ appeal.subject }</p>
</div>
<div className="item_text">
<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>
)) }
</div>
) }
</div>
</div>
</div>
)) }
</>
) : (
<p>У Вас пока нет обращений.</p>
) }
</>
)}
{/*}
<div className="appeal_item">
<div className="item_header">
<p>Номер обращения: <b>123 от 13.04.2022</b></p>
<p>Отвественный ОРК: <b>Иванов И.И.</b></p>
<p>Договор: <b>№2021_1655, №2021_1655</b></p>
<div className="status">Активное</div>
</div>
<div className="item_body">
<div className="item_text">
<p><b>Тема запроса</b></p>
<p>Текстовый контент</p>
</div>
<div className="item_text">
<p><b>Текст ответа ОРК</b></p>
<p>Текстовый контент</p>
</div>
</div>
</div>
<div className="appeal_item">
<div className="item_header">
<p>Номер обращения: <b>123 от 13.04.2022</b></p>
<p>Отвественный ОРК: <b>Иванов И.И.</b></p>
<p>Договор: <b>№2021_1655, №2021_1655</b></p>
</div>
<div className="item_body">
<div className="item_text">
<p><b>Тема запроса</b></p>
<p>Текстовый контент</p>
</div>
<div className="item_text">
<p><b>Текст ответа ОРК</b></p>
<p>Текстовый контент</p>
<div className="dosc_list medium-icon">
<div className="row">
<p className="doc_name i-pdf extension">
№2021_1655 от 20.04.2021
<span>2021_1655 от 20.04.2021</span>
</p>
</div>
<div className="row">
<p className="doc_name i-pdf extension">
№2021_1655 от 20.04.2021
<span>2021_1655 от 20.04.2021</span>
</p>
</div>
</div>
</div>
{*/}
</div>
</article>
</div>
{*/}
</div>
</div>
</section>
</main>
<Footer authenticated={ true }/>
</article>
</div>
</AccountLayout>
<Footer/>
</React.Fragment>
);
}

182
pages/support/index.js
View File

@ -16,6 +16,7 @@ import InnerMenu from "./components/InnerMenu";
import {
getSupportThemes,
} from "../../actions";
import AccountLayout from "../components/Layout/Account";
class ContractPage extends React.Component
{
@ -125,100 +126,95 @@ class ContractPage extends React.Component
<meta name="description" content="ЛК Эволюция автолизинга" />
</Head>
<Header { ...this.props } />
<main>
<section>
<div className="clear"></div>
<div className="container">
<div className="title_wrapper">
<div className="left" style={{ flexDirection: "column" }}>
<h1 className="section_title">Обращения</h1>
</div>
<Company { ...this.props }/>
</div>
<div className="aside_container about">
<InnerMenu { ...this.props } />
<article>
{ loading ? (
<div className="container" style={{ display: "flex", alignItems: "center", justifyContent: "center", }}>
<SpinnerCircular size={ 90 } thickness={ 51 } speed={ 100 } color="rgba(28, 1, 169, 1)" secondaryColor="rgba(236, 239, 244, 1)" />
</div>
) : (
<>
<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);} }
/>
</div>
<button className="button" disabled={ query !== "" ? false : true } onClick={ this._handle_onSearch }>
Поиск
</button>
</form>
</div>
<div className="list faq-list">
{ themes !== undefined && themes !== null && themes.map((theme) =>
(
<div className="faq_item" key={ `theme_${ theme.id }` }>
<p className="item_title">{ theme.name }</p>
<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 className={ `block_header` }>
<p>{ question.title }</p>
<button></button>
</div>
<div className="block_body" style={{ paddingBottom: "20px" }}>
<div className="column full">
<div className="column_text_block">
<p><b>Процедура</b></p>
<p dangerouslySetInnerHTML={{ __html: question.answer }}/>
</div>
{ question.documents !== null && (
<div className="column_text_block">
<p><b>Документы</b></p>
<p dangerouslySetInnerHTML={{ __html: question.documents }}/>
</div>
) }
{ question.templates !== null && (
<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>
)) }
</div>
</div>
) }
<button className="button button-blue" onClick={ () => this._handle_onRequest(question.id) }>Создать обращение</button>
</div>
</div>
</div>
)) }
</div>
</div>
)) }
</div>
{/* Результат поиска */}
{ searched !== undefined && searched !== null && searched.map((question) => (
<div className="search_list" key={ `searched_${ question.id }` }>
<div className="search_item">
<p className="item_title">{ question.theme } / { question.name }</p>
<p>К каждой теме свободное <mark>html поле для миниинструкции</mark> (со ссылками на формы документов и документы). Привязка к теме обращения в CRM</p>
</div>
</div>
)) }
</>
) }
</article>
</div>
<AccountLayout>
<div className="title_wrapper">
<div className="left" style={{ flexDirection: "column" }}>
<h1 className="section_title">Обращения</h1>
</div>
</section>
</main>
<Footer authenticated={ true }/>
<Company { ...this.props }/>
</div>
<div className="aside_container about">
<InnerMenu { ...this.props } />
<article>
{ loading ? (
<div className="container" style={{ display: "flex", alignItems: "center", justifyContent: "center", }}>
<SpinnerCircular size={ 90 } thickness={ 51 } speed={ 100 } color="rgba(28, 1, 169, 1)" secondaryColor="rgba(236, 239, 244, 1)" />
</div>
) : (
<>
<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);} }
/>
</div>
<button className="button" disabled={ query !== "" ? false : true } onClick={ this._handle_onSearch }>
Поиск
</button>
</form>
</div>
<div className="list faq-list">
{ themes !== undefined && themes !== null && themes.map((theme) =>
(
<div className="faq_item" key={ `theme_${ theme.id }` }>
<p className="item_title">{ theme.name }</p>
<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 className={ `block_header` }>
<p>{ question.title }</p>
<button></button>
</div>
<div className="block_body" style={{ paddingBottom: "20px" }}>
<div className="column full">
<div className="column_text_block">
<p><b>Процедура</b></p>
<p dangerouslySetInnerHTML={{ __html: question.answer }}/>
</div>
{ question.documents !== null && (
<div className="column_text_block">
<p><b>Документы</b></p>
<p dangerouslySetInnerHTML={{ __html: question.documents }}/>
</div>
) }
{ question.templates !== null && (
<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>
)) }
</div>
</div>
) }
<button className="button button-blue" onClick={ () => this._handle_onRequest(question.id) }>Создать обращение</button>
</div>
</div>
</div>
)) }
</div>
</div>
)) }
</div>
{/* Результат поиска */}
{ searched !== undefined && searched !== null && searched.map((question) => (
<div className="search_list" key={ `searched_${ question.id }` }>
<div className="search_item">
<p className="item_title">{ question.theme } / { question.name }</p>
<p>К каждой теме свободное <mark>html поле для миниинструкции</mark> (со ссылками на формы документов и документы). Привязка к теме обращения в CRM</p>
</div>
</div>
)) }
</>
) }
</article>
</div>
</AccountLayout>
<Footer/>
</React.Fragment>
);
}

138
pages/support/request.js
View File

@ -23,6 +23,7 @@ import {
sendNewAppeal,
sendAppealAttachments
} from "../../actions";
import AccountLayout from "../components/Layout/Account";
class TemplateFile extends React.Component
{
@ -356,85 +357,80 @@ class SupportRequestPage extends React.Component
<meta name="description" content="ЛК Эволюция автолизинга" />
</Head>
<Header { ...this.props } />
<main>
<section>
<div className="clear"></div>
<div className="container">
<div className="title_wrapper">
<div className="left" style={{ alignItems: "center", flexWrap: "wrap" }}>
<button className="back" onClick={ this._handle_onBack }>Назад</button>
<h1 className="section_title">Новое обращение</h1>
</div>
<Company { ...this.props }/>
<AccountLayout>
<div className="title_wrapper">
<div className="left" style={{ alignItems: "center", flexWrap: "wrap" }}>
<button className="back" onClick={ this._handle_onBack }>Назад</button>
<h1 className="section_title">Новое обращение</h1>
</div>
<Company { ...this.props }/>
</div>
<div className="aside_container about">
{ loading ? (
<div className="container" style={{ display: "flex", alignItems: "center", justifyContent: "center", }}>
<SpinnerCircular size={ 90 } thickness={ 51 } speed={ 100 } color="rgba(28, 1, 169, 1)" secondaryColor="rgba(236, 239, 244, 1)" />
</div>
<div className="aside_container about">
{ loading ? (
<div className="container" style={{ display: "flex", alignItems: "center", justifyContent: "center", }}>
<SpinnerCircular size={ 90 } thickness={ 51 } speed={ 100 } color="rgba(28, 1, 169, 1)" secondaryColor="rgba(236, 239, 244, 1)" />
</div>
) : (
<>
{ success ? (
<SuccessMessage/>
) : (
<>
{ success ? (
<SuccessMessage/>
) : (
<article className="full">
<div className="new_appeal">
<div className="column">
<div className="dropdown_blocks_list appeal_list visible">
{ themes !== undefined && themes !== null && themes.map((theme, theme_index) =>
(
<React.Fragment key={ `theme_${ theme_index }` } >
<div className={ `appeal_item dropdown_block ${ theme_index === opened_theme && "open" }` } style={ theme_index === opened_theme ? { backgroundColor: "unset"} : {} } onClick={ () => this._handle_onChangeTheme(theme_index) }>
<div className="block_header">
<p style={{ fontWeight: "bold" }}>{ theme.name }</p>
<button className="rotate"></button>
</div>
</div>
{ theme_index === opened_theme && theme.questions.map((question, question_index) => (
<div key={ `question_${ question_index }` } className={ `appeal_item dropdown_block ${ question_index === opened_question && "open" }` } style={{ paddingLeft: "20px" }} onClick={ () => this.setState({ opened_question: question_index }) }>
<div className="block_header">
<p>{ question.title }</p>
<button className="rotate"></button>
</div>
</div>
) )}
</React.Fragment>
)) }
</div>
</div>
{ themes !== undefined && themes !== null && (
<div className="column">
<div className="column_text_block">
<p><b>Процедура</b></p>
<p dangerouslySetInnerHTML={{ __html: procedure.answer }}/>
<article className="full">
<div className="new_appeal">
<div className="column">
<div className="dropdown_blocks_list appeal_list visible">
{ themes !== undefined && themes !== null && themes.map((theme, theme_index) =>
(
<React.Fragment key={ `theme_${ theme_index }` } >
<div className={ `appeal_item dropdown_block ${ theme_index === opened_theme && "open" }` } style={ theme_index === opened_theme ? { backgroundColor: "unset"} : {} } onClick={ () => this._handle_onChangeTheme(theme_index) }>
<div className="block_header">
<p style={{ fontWeight: "bold" }}>{ theme.name }</p>
<button className="rotate"></button>
</div>
</div>
{ procedure.documents !== null && (
<div className="column_text_block">
<p><b>Документы</b></p>
<p dangerouslySetInnerHTML={{ __html: procedure.documents }}/>
</div>
) }
{ procedure.templates !== null && (
<div className="column_text_block">
<p><b>Документы</b></p>
<div className="dosc_list"> {/* medium-icon */}
{ procedure.templates.map((template, index) => (<TemplateFile key={ `template_${ index }` } template={ template } />)) }
{ theme_index === opened_theme && theme.questions.map((question, question_index) => (
<div key={ `question_${ question_index }` } className={ `appeal_item dropdown_block ${ question_index === opened_question && "open" }` } style={{ paddingLeft: "20px" }} onClick={ () => this.setState({ opened_question: question_index }) }>
<div className="block_header">
<p>{ question.title }</p>
<button className="rotate"></button>
</div>
</div>
) }
{ this._renderForm() }
</div>
) )}
</React.Fragment>
)) }
</div>
</div>
{ themes !== undefined && themes !== null && (
<div className="column">
<div className="column_text_block">
<p><b>Процедура</b></p>
<p dangerouslySetInnerHTML={{ __html: procedure.answer }}/>
</div>
{ procedure.documents !== null && (
<div className="column_text_block">
<p><b>Документы</b></p>
<p dangerouslySetInnerHTML={{ __html: procedure.documents }}/>
</div>
) }
{ procedure.templates !== null && (
<div className="column_text_block">
<p><b>Документы</b></p>
<div className="dosc_list"> {/* medium-icon */}
{ procedure.templates.map((template, index) => (<TemplateFile key={ `template_${ index }` } template={ template } />)) }
</div>
</div>
) }
{ this._renderForm() }
</div>
</article>
) }
</>
) }
</div>
</article>
) }
</div>
</div>
</section>
</main>
<Footer authenticated={ true }/>
</>
) }
</div>
</AccountLayout>
<Footer/>
</React.Fragment>
);
}