246 lines
7.5 KiB
JavaScript
246 lines
7.5 KiB
JavaScript
import React from "react";
|
||
import Head from "next/head";
|
||
import Image from "next/image";
|
||
import { connect } from "react-redux";
|
||
import { withRouter } from "next/router";
|
||
import moment from "moment";
|
||
import { SpinnerCircular } from "spinners-react";
|
||
|
||
import { reduxWrapper } from "../../store";
|
||
|
||
import Header from "../components/Header";
|
||
import Footer from "../components/Footer";
|
||
import Company from "../components/Company";
|
||
import InnerMenu from "./components/InnerMenu";
|
||
|
||
import {
|
||
getSupportThemes,
|
||
} from "../../actions";
|
||
import AccountLayout from "../components/Layout/Account";
|
||
|
||
class ContractPage extends React.Component
|
||
{
|
||
constructor(props)
|
||
{
|
||
super(props);
|
||
this.state = {
|
||
themes: null,
|
||
question_selected: undefined,
|
||
appeals: null,
|
||
appeal: null,
|
||
searched: null,
|
||
loading: false,
|
||
query: "",
|
||
};
|
||
|
||
this.question_refs = [];
|
||
}
|
||
|
||
static getDerivedStateFromProps(nextProps, prevState)
|
||
{
|
||
return {
|
||
themes: nextProps.themes,
|
||
appeals: nextProps.appeals,
|
||
appeal: nextProps.appeal,
|
||
searched: nextProps.searched,
|
||
};
|
||
}
|
||
|
||
componentDidMount()
|
||
{
|
||
if (!this.state.loading)
|
||
{
|
||
this.setState({ loading: true }, () =>
|
||
{
|
||
getSupportThemes({ dispatch: this.props.dispatch })
|
||
.then(() =>
|
||
{
|
||
let question_selected = undefined;
|
||
let found = false;
|
||
|
||
for(let t in this.state.themes)
|
||
{
|
||
for(let q in this.state.themes[t].questions)
|
||
{
|
||
if(this.props.router.asPath.indexOf(this.state.themes[t].questions[q].id) > -1)
|
||
{
|
||
this.question_refs[this.state.themes[t].questions[q].id] = React.createRef();
|
||
question_selected = this.state.themes[t].questions[q].id;
|
||
found = true;
|
||
}
|
||
}
|
||
}
|
||
|
||
this.setState({ loading: false, question_selected: question_selected }, () =>
|
||
{
|
||
if(question_selected !== undefined)
|
||
{
|
||
setTimeout(() => {
|
||
this.question_refs[question_selected].current.scrollIntoView({
|
||
behavior: 'smooth',
|
||
block: 'center',
|
||
});
|
||
}, 100);
|
||
}
|
||
});
|
||
})
|
||
.catch(() => {});
|
||
});
|
||
}
|
||
}
|
||
|
||
componentWillUnmount()
|
||
{
|
||
}
|
||
|
||
_handle_onQuestion = (question) =>
|
||
{
|
||
if(this.state.question_selected === question)
|
||
{
|
||
this.setState({ question_selected: undefined });
|
||
}
|
||
else
|
||
{
|
||
this.setState({ question_selected: question });
|
||
}
|
||
}
|
||
|
||
_handle_onRequest = (question) =>
|
||
{
|
||
this.props.router.push(`/support/request#${ question }`);
|
||
}
|
||
|
||
_handle_onChangeSearchQuery = (value) =>
|
||
{
|
||
this.setState({ query: value });
|
||
}
|
||
|
||
render()
|
||
{
|
||
const { loading, themes, question_selected, searched, appleals, query } = this.state;
|
||
console.log("themes", themes);
|
||
|
||
return (
|
||
<React.Fragment>
|
||
<Head>
|
||
<title>ЛК Эволюция автолизинга</title>
|
||
<meta name="description" content="ЛК Эволюция автолизинга" />
|
||
</Head>
|
||
<Header { ...this.props } />
|
||
<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>
|
||
{ 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 }` }>
|
||
<div className={ `block_header` } onClick={ () => this._handle_onQuestion(question.id) }>
|
||
<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>
|
||
) }
|
||
{ question.request && (
|
||
<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>
|
||
);
|
||
}
|
||
}
|
||
|
||
function mapStateToProps(state, ownProps)
|
||
{
|
||
return {
|
||
themes: state.support.themes,
|
||
searched: state.support.searched,
|
||
appeals: state.support.appeals,
|
||
appeal: state.support.appeal,
|
||
};
|
||
}
|
||
|
||
export const getServerSideProps = reduxWrapper.getServerSideProps(
|
||
(store) =>
|
||
async ({ req, res, query }) => {
|
||
return {
|
||
props: {
|
||
},
|
||
};
|
||
}
|
||
);
|
||
|
||
export default withRouter(connect(mapStateToProps)(ContractPage));
|