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

mobile markup fixes, update for EDO show on main page

Browse Source
This commit is contained in:
merelendor 2023-10-30 01:51:30 +03:00
parent d41ef14204
commit 3737797216
11 changed files with 597 additions and 260 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
components/DealsStatus/components/DocumentsForm.js
View File

@ -274,6 +274,7 @@ export default class DocumentsForm extends Step
return c;
}
/*
_renderHeaderButtons = () =>
{
const { open, uploading, completed, loading, } = this.state;
@ -293,19 +294,20 @@ export default class DocumentsForm extends Step
return null;
}
*/
render()
{
const { index, statuscode_id, dealSelected, documents, questionnaire_status, } = this.props;
const { open, uploaded, uploading, loading } = this.state;
const { open, uploaded, uploading, loading, completed } = this.state;
return (
<div className={`${ this.status === statuscode_id ? "current" : statuscode_id > this.status ? "done" : "" }`}>
<p>№ { dealSelected }</p>
<span></span>
<div className="status_body">
<div className="status_body with_footer">
{ this._renderHeader("Сборка пакета документов") }
<div className="wrap form" style={{ display: open ? "block" : "none" }}>
<div className="wrap form" style={{ display: open ? "block" : "none", }}>
{ loading ? (
<div style={{ minHeight: 100, display: "flex", justifyContent: "center", alignItems: "center", }}>
<SpinnerCircular size={ 50 } thickness={ 51 } speed={ 100 } color="rgba(28, 1, 169, 1)" secondaryColor="rgba(236, 239, 244, 1)" />
@ -388,6 +390,15 @@ export default class DocumentsForm extends Step
</>
) }
</div>
{ open && !loading && (
<div className="status_footer">
{ this.status === statuscode_id && (
<div className="buttons">
<button className="button button button-blue" onClick={ this._handle_onSendFiles } disabled={ completed ? false : true }>Отправить документы</button>
</div>
) }
</div>
) }
</div>
</div>
)

6
components/DealsStatus/components/FinancialProgram.js
View File

@ -22,7 +22,7 @@ export default class FinancialProgram extends Step
<div className={`${ this.status === statuscode_id ? "current" : statuscode_id > this.status ? "done" : "" }`}>
<p>№ { dealSelected }</p>
<span></span>
<div className="status_body">
<div className="status_body with_footer">
{ this._renderHeader("Программа финансирования") }
<div className="wrap" style={{ display: open ? "block" : "none" }}>
<div className="single_text">
@ -33,6 +33,10 @@ export default class FinancialProgram extends Step
) }
</div>
</div>
{ open && (
<div className="status_footer">
</div>
) }
</div>
</div>
)

87
components/DealsStatus/components/Offers.js
View File

@ -5,6 +5,56 @@ import { SpinnerCircular } from "spinners-react";
import { acceptDealOffers, downloadDealOffer, } from "../../../actions";
import Step from "./Step";
class OfferDownload extends React.Component
{
constructor(props)
{
super(props);
this.state = {
loading: false,
}
}
_handle_onOffer = (quote_number) =>
{
this.setState({ loading: true }, () =>
{
downloadDealOffer({ quote_number, filename: `ЛК Эволюция КП №${ quote_number }.pdf` })
.then(() => {
this.setState({ loading: false });
})
.catch(() => {
this.setState({ loading: false });
});
})
}
render()
{
const { offer } = this.props;
const { loading } = this.state;
return (
<div className="docs_list" style={{ cursor: "pointer" }} onClick={ () => this._handle_onOffer(offer.quote_number) }>
<div className="row">
<div className="small-icon">
{ loading ? (
<div style={{ width: "105px", height: "30px", display: "flex", alignItems: "center", justifyContent: "center", }}>
<SpinnerCircular size={ 22 } thickness={ 100 } speed={ 100 } color="rgba(236, 239, 244, 1)" secondaryColor="rgba(28, 1, 169, 1)" />
</div>
) : (
<p className="doc_name i-pdf">
КП
<span>№{ offer.quote_number }</span>
</p>
) }
</div>
</div>
</div>
)
}
}
export default class Offers extends Step
{
constructor(props)
@ -37,13 +87,6 @@ export default class Offers extends Step
this.setState({ checked });
}
_handle_onOffer = (quote_number) =>
{
downloadDealOffer({ quote_number, filename: `ЛК Эволюция КП №${ quote_number }.pdf` })
.then(() => {})
.catch(() => {});
}
_handle_onSend = (event) =>
{
event.preventDefault();
@ -79,6 +122,7 @@ export default class Offers extends Step
});
}
/*
_renderHeaderButtons = () =>
{
const { open, checked, loading } = this.state;
@ -98,6 +142,7 @@ export default class Offers extends Step
return null;
}
*/
render()
{
@ -108,7 +153,7 @@ export default class Offers extends Step
<div className={`${ this.status === statuscode_id ? "current" : statuscode_id > this.status ? "done" : "" }`}>
<p>№ { dealSelected }</p>
<span></span>
<div className="status_body">
<div className="status_body with_footer">
{ this._renderHeader("Выбор КП ") }
<div className="wrap" style={{ display: open ? "block" : "none" }}>
{ offers === undefined || loading ? (
@ -141,16 +186,16 @@ export default class Offers extends Step
<tr key={ offer_index }>
{ statuscode_id === this.status && offer.quote_status ? (
<td>
<div className="form_field checkbox">
<div className="form_field checkbox offer_selection">
<input type="checkbox" name="row" id={`offer_${ offer.quote_number }`} checked={ checked.indexOf(offer.quote_number) > -1 } onChange={ () => { this._handle_onCheckOffer(offer.quote_number) } }/>
<label htmlFor={`offer_${ offer.quote_number }`}></label>
<label htmlFor={`offer_${ offer.quote_number }`} data-text={`Выбрать коммерческое предложение`}></label>
</div>
</td>
) : (
<td>
<div className="form_field checkbox checkbox_disabled">
<input type="checkbox" name="row" id={`offer_${ offer.quote_number }`} checked={ true } onChange={ () => { } } style={{ filter: "grayscale", opacity: 0.5 }}/>
<label htmlFor={`offer_${ offer.quote_number }`} data-text="Принято"></label>
<label htmlFor={`offer_${ offer.quote_number }`} data-text={`Принято`}></label>
</div>
</td>
) }
@ -162,16 +207,7 @@ export default class Offers extends Step
<td data-title="Модель">{ offer.model_name }</td>
<td data-title="Объектов лизинга">{ offer.object_count }</td>
<td>
<div className="docs_list" style={{ cursor: "pointer" }} onClick={ () => this._handle_onOffer(offer.quote_number) }>
<div className="row">
<div className="small-icon">
<p className="doc_name i-pdf">
КП
<span>№{ offer.quote_number }</span>
</p>
</div>
</div>
</div>
<OfferDownload offer={ offer }/>
</td>
</tr>
)
@ -184,6 +220,15 @@ export default class Offers extends Step
</>
) }
</div>
{ open && !loading && (
<div className="status_footer">
{ checked.length > 0 && statuscode_id === this.status && (
<div className="buttons">
<button className="button button button-blue" onClick={ this._handle_onSend }>Согласовать</button>
</div>
) }
</div>
) }
</div>
</div>
)

6
components/DealsStatus/components/StatusDecisionMaking.js
View File

@ -27,7 +27,7 @@ export default class StatusDecisionMaking extends Step
<div className={`${ this.status === statuscode_id ? "current" : (statuscode_id > this.status) ? "done" : "" }`}>
<p>№ { dealSelected }</p>
<span></span>
<div className="status_body">
<div className="status_body with_footer">
{ this._renderHeader("Принятие решения по сделке") }
<div className="wrap" style={{ display: open ? "block" : "none" }}>
<div className="single_text">
@ -38,6 +38,10 @@ export default class StatusDecisionMaking extends Step
) }
</div>
</div>
{ open && (
<div className="status_footer">
</div>
) }
</div>
</div>
)

6
components/DealsStatus/components/StatusDecisionRefuse.js
View File

@ -27,13 +27,17 @@ export default class StatusDecisionRefuse extends Step
<div className={`${ this.status === statuscode_id ? "current" : (statuscode_id > this.status) ? "done" : "" }`}>
<p>№ { dealSelected }</p>
<span></span>
<div className="status_body">
<div className="status_body with_footer">
{ this._renderHeader("Требуется изменение параметров") }
<div className="wrap" style={{ display: open ? "block" : "none" }}>
<div className="single_text">
<p>Продолжение оформления заблокировано</p>
</div>
</div>
{ open && (
<div className="status_footer">
</div>
) }
</div>
</div>
)

6
components/DealsStatus/components/StatusDocumentsCheck.js
View File

@ -22,7 +22,7 @@ export default class StatusDocumentsCheck extends Step
<div className={`${ statuscode_id === this.status ? "current" : statuscode_id > this.status ? "done" : "" }`}>
<p>№ { dealSelected }</p>
<span></span>
<div className="status_body">
<div className="status_body with_footer">
{ this._renderHeader("Проверка документов") }
<div className="wrap" style={{ display: open ? "block" : "none" }}>
<div className="single_text">
@ -33,6 +33,10 @@ export default class StatusDocumentsCheck extends Step
) }
</div>
</div>
{ open && (
<div className="status_footer">
</div>
) }
</div>
</div>
)

6
components/DealsStatus/components/StatusPositiveDecision.js
View File

@ -22,7 +22,7 @@ export default class StatusPositiveDecision extends Step
<div className={`${ this.status === statuscode_id ? "current" : statuscode_id > this.status ? "done" : "" }`}>
<p>№ { dealSelected }</p>
<span></span>
<div className="status_body">
<div className="status_body with_footer">
{ this._renderHeader("Принято положительное решение") }
<div className="wrap" style={{ display: open ? "block" : "none" }}>
<div className="single_text">
@ -33,6 +33,10 @@ export default class StatusPositiveDecision extends Step
) }
</div>
</div>
{ open && (
<div className="status_footer">
</div>
) }
</div>
</div>
)

4
components/DealsStatus/index.js
View File

@ -180,6 +180,8 @@ class DealsStatus extends React.Component
const { questionnaire_status, onQuestionnaire, } = this.props;
return (
<>
{ deals.list !== undefined && deals.list !== null && deals.list.length > 0 && (
<>
<div>
<p className="deals_list_title">Статусы сделок</p>
@ -208,6 +210,8 @@ class DealsStatus extends React.Component
/>
{*/}
</>
) }
</>
)
}
}

122
css/main/style.css
View File

@ -5844,7 +5844,14 @@ main .dropdown_blocks_list.zero-margin.gibdd .dropdown_block .block_body .fines_
width: 100%;
display: block;
}
.contractStatus_modal .single_status > div .status_body.with_footer .wrap {
padding-bottom: 0px;
border: 0px;
}
.contractStatus_modal .single_status > div .status_body .status_header {
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
display: flex;
align-items: center;
justify-content: flex-start;
@ -5945,6 +5952,110 @@ main .dropdown_blocks_list.zero-margin.gibdd .dropdown_block .block_body .fines_
.contractStatus_modal .single_status > div .status_body .status_header .button_arrow .up {
background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.375 11.25L9 5.625L14.625 11.25' stroke='%238E94A7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.contractStatus_modal .single_status > div .status_body .status_footer {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 0 30px;
padding: 0px 0;
position: relative;
cursor: pointer;
border-bottom: solid var(--inactive);
padding-bottom: 30px;
margin-bottom: 30px;
}
@media all and (max-width: 920px) {
.contractStatus_modal .single_status > div .status_body .status_footer {
gap: 0 12px;
font-size: 12px;
min-height: 50px;
}
}
@media all and (max-width: 768px) {
.contractStatus_modal .single_status > div .status_body .status_footer {
flex-wrap: wrap;
height: auto;
}
}
.contractStatus_modal .single_status > div .status_body .status_footer .background {
background-color: #edeff5;
position: absolute;
left: -65px;
top: 0px;
width: calc(100% + 65px);
height: 50px;
z-index: 1;
}
@media all and (max-width: 920px) {
.contractStatus_modal .single_status > div .status_body .status_footer .background {
left: 0;
}
}
@media all and (max-width: 768px) {
.contractStatus_modal .single_status > div .status_body .status_footer .background {
left: -48px;
width: calc(100% + 96px);
}
}
.contractStatus_modal .single_status > div .status_body .status_footer i {
z-index: 2;
white-space: nowrap;
min-width: 40px;
}
@media all and (max-width: 768px) {
.contractStatus_modal .single_status > div .status_body .status_footer i {
display: none;
}
}
.contractStatus_modal .single_status > div .status_body .status_footer p {
z-index: 2;
white-space: nowrap;
}
@media all and (max-width: 768px) {
.contractStatus_modal .single_status > div .status_body .status_footer p {
max-width: calc(100% - 70px);
white-space: unset;
width: 100%;
}
}
.contractStatus_modal .single_status > div .status_body .status_footer .buttons {
z-index: 2;
width: 100%;
display: flex;
justify-content: flex-end;
padding-right: 4px;
}
@media all and (max-width: 768px) {
.contractStatus_modal .single_status > div .status_body .status_footer .buttons {
justify-content: flex-start;
width: 100%;
margin-top: 10px;
}
}
.contractStatus_modal .single_status > div .status_body .status_footer .button_arrow {
min-width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
z-index: 2;
margin-left: -30px;
}
@media all and (max-width: 920px) {
.contractStatus_modal .single_status > div .status_body .status_footer .button_arrow {
margin-left: -12px;
}
}
.contractStatus_modal .single_status > div .status_body .status_footer .button_arrow .icon {
width: 18px;
height: 18px;
}
.contractStatus_modal .single_status > div .status_body .status_footer .button_arrow .down {
background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.625 6.75L9 12.375L3.375 6.75' stroke='%238E94A7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.contractStatus_modal .single_status > div .status_body .status_footer .button_arrow .up {
background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.375 11.25L9 5.625L14.625 11.25' stroke='%238E94A7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.contractStatus_modal .single_status > div .status_body .header {
visibility: visible !important;
}
@ -6730,6 +6841,7 @@ main .dropdown_blocks_list.zero-margin.gibdd .dropdown_block .block_body .fines_
display: flex;
gap: 0px 20px;
margin-left: 80px;
height: fit-content !important;
}
.edo_banner .buttons a {
margin-top: 10px;
@ -6824,6 +6936,7 @@ main .dropdown_blocks_list.zero-margin.gibdd .dropdown_block .block_body .fines_
flex-direction: column;
align-items: flex-start;
gap: 15px 0px;
padding-bottom: 40px;
}
.edo_operators_settings_list_item {
margin-left: 40px;
@ -7012,8 +7125,17 @@ main .dropdown_blocks_list.zero-margin.gibdd .dropdown_block .block_body .fines_
padding-bottom: 15px;
border-top: solid 1px #edeff5;
}
.checkbox_disabled label {
cursor: default !important;
}
.checkbox_disabled label:before {
filter: grayscale();
opacity: 0.5;
cursor: default !important;
}
.offer_selection {
color: var(--blue);
}
.offer_selection:hover {
text-decoration: underline;
}

128
css/main/style.less
View File

@ -6639,7 +6639,18 @@ main .dropdown_blocks_list.zero-margin.gibdd .dropdown_block {
width: 100%;
display: block;
&.with_footer {
.wrap {
padding-bottom: 0px;
border: 0px;
}
}
.status_header {
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
display: flex;
align-items: center;
justify-content: flex-start;
@ -6743,6 +6754,113 @@ main .dropdown_blocks_list.zero-margin.gibdd .dropdown_block {
}
}
.status_footer {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 0 30px;
padding: 0px 0;
position: relative;
cursor: pointer;
border-bottom: solid var(--inactive);
padding-bottom: 30px;
margin-bottom: 30px;
@media all and (max-width: 920px) {
gap: 0 12px;
font-size: 12px;
min-height: 50px;
}
@media all and (max-width: 768px) {
flex-wrap: wrap;
height: auto;
}
.background {
background-color: rgb(237, 239, 245);
position: absolute;
left: -65px;
top: 0px;
width: calc(100% + 65px);
height: 50px;
z-index: 1;
@media all and (max-width: 920px) {
left: 0;
}
@media all and (max-width: 768px) {
left: -48px;
width: calc(100% + 96px);
}
}
i {
z-index: 2;
white-space: nowrap;
min-width: 40px;
@media all and (max-width: 768px) {
display: none;
}
}
p {
z-index: 2;
white-space: nowrap;
@media all and (max-width: 768px) {
max-width: calc(100% - 70px);
white-space: unset;
width: 100%;
}
}
.buttons {
z-index: 2;
width: 100%;
display: flex;
justify-content: flex-end;
padding-right: 4px;
@media all and (max-width: 768px) {
justify-content: flex-start;
width: 100%;
margin-top: 10px;
}
}
.button_arrow {
min-width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
z-index: 2;
margin-left: -30px;
@media all and (max-width: 920px) {
margin-left: -12px;
}
.icon {
width: 18px;
height: 18px;
}
.down {
background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.625 6.75L9 12.375L3.375 6.75' stroke='%238E94A7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.up {
background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.375 11.25L9 5.625L14.625 11.25' stroke='%238E94A7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
}
}
.header {
visibility: visible !important;
}
@ -7690,6 +7808,7 @@ main .dropdown_blocks_list.zero-margin.gibdd .dropdown_block {
display: flex;
gap: 0px 20px;
margin-left: 80px;
height: fit-content !important;
a {
margin-top: 10px;
@ -7806,6 +7925,7 @@ main .dropdown_blocks_list.zero-margin.gibdd .dropdown_block {
flex-direction: column;
align-items: flex-start;
gap: 15px 0px;
padding-bottom: 40px;
}
.edo_operators_settings_list_item {
@ -8034,6 +8154,7 @@ main .dropdown_blocks_list.zero-margin.gibdd .dropdown_block {
.checkbox_disabled {
label {
cursor: default !important;
&:before {
filter: grayscale();
opacity: 0.5;
@ -8041,3 +8162,10 @@ main .dropdown_blocks_list.zero-margin.gibdd .dropdown_block {
}
}
}
.offer_selection {
color: var(--blue);
&:hover {
text-decoration: underline;
}
}

15
pages/components/AnnouncementsList/index.js
View File

@ -58,7 +58,8 @@ class AnnouncementsList extends React.Component
this.state = {
company: {},
announcements: [],
width: 1920
width: 1920,
operators: null,
};
}
@ -72,7 +73,9 @@ class AnnouncementsList extends React.Component
static getDerivedStateFromProps(nextProps, prevState)
{
return {};
return {
operators: nextProps.operators,
};
}
render()
@ -88,12 +91,13 @@ class AnnouncementsList extends React.Component
prevArrow: <PrevArrow />
};
const { announcements } = this.state;
const { announcements, operators, } = this.state;
return (
<div className="feed">
<div className="feed_list">
<Slider { ...settings }>
{ operators !== undefined && operators !== null && operators.length === 0 && (
<div className="feed_item edo_banner">
<p className="item_title">Электронный документооборот</p>
<p className="item_desc title">
@ -106,6 +110,7 @@ class AnnouncementsList extends React.Component
<a href={ "/settings/digital" } className="item_link">Получить приглашение в ЭДО</a>
</div>
</div>
) }
{ announcements !== undefined && announcements !== null && announcements.map(( announcement, index ) => (
<div className="feed_item" key={ index }>
<p className="item_title">{ announcement.title }</p>
@ -124,7 +129,9 @@ class AnnouncementsList extends React.Component
function mapStateToProps(state, ownProps)
{
return {};
return {
operators: state.edo.operators,
};
}
export default connect(mapStateToProps)(AnnouncementsList);