From 973e210b29ce98c5d38ff20c4e069e2a23a73613 Mon Sep 17 00:00:00 2001
From: merelendor <merelendor@gmail.com>
Date: Fri, 22 Sep 2023 12:31:59 +0300
Subject: [PATCH] updates for deals contracts

---
 components/DealsStatus/SingleDeal.js | 167 +++++++++++++++++++--------
 css/main/style.css                   |  64 ++++++++++
 css/main/style.less                  |  76 ++++++++++++
 pages/_document.js                   |   4 +-
 4 files changed, 263 insertions(+), 48 deletions(-)

diff --git a/components/DealsStatus/SingleDeal.js b/components/DealsStatus/SingleDeal.js
index 83e3103..a96f598 100644
--- a/components/DealsStatus/SingleDeal.js
+++ b/components/DealsStatus/SingleDeal.js
@@ -522,6 +522,13 @@ class SigningTypeSelection extends Step
 		super(props);
 		this.state = {
 			open: false, 
+			checked: {
+				prepared_contracts: [], 
+				signing_plan_contracts: [], 
+				signing_fact_contracts: [], 
+				issued_contracts: [], 
+				annulled_contracts: [], 
+			}, 
 		};
 		this.status = [ 107 ];
 		this.types = [
@@ -550,25 +557,30 @@ class SigningTypeSelection extends Step
 
 	_render_preparedContracts = () => 
 	{
+		const checked = this.state.checked.prepared_contracts;
+
 		const contracts = this.props.contracts['prepared_contracts'];
 		console.log("_render_preparedContracts", { contracts });
 
 		return (
 			<div className="block-column">
 				<div className="dosc_list acts_list-checkbox medium-icon">
-					{ contracts.map((contract, index) => (
-						<div className="row" key={ index }>
-							<div className="doc_name i-doc i-medium blue deals_contracts" style={{ alignItems: "flex-start" }}>
-								<input type="checkbox" name="" id="" checked="" onChange={ () => {} }/>
-								<label htmlFor="">№{ contract.name }</label>
-								<div className="info">
-									<span>{ moment(contract.date).format('MM.DD.YYYY') }</span>
-									<span>{ contract.brand_name }</span>
-									<span>{ contract.model_name }</span>
+					{ contracts.length > 0 ? 
+						contracts.map((contract, index) => (
+							<div className="row" key={ index }>
+								<div className="doc_name i-doc i-medium blue deals_contracts" style={{ alignItems: "flex-start" }}>
+									<input type="checkbox" name="" id="" checked={ checked.indexOf(contract.name) > -1 ? true : false } onChange={ () => {} }/>
+									<label htmlFor="">№{ contract.name }</label>
+									<div className="info">
+										<span>{ moment(contract.date).format('MM.DD.YYYY') }</span>
+										<span>{ contract.brand_name }</span>
+										<span>{ contract.model_name }</span>
+									</div>
 								</div>
 							</div>
-						</div>						
-					)) }
+					)) : (
+						<p className="empty">Нет договоров</p>
+					) }
 				</div>
 				<div className="block_footer_btn">
 					<button className="button button-blue">Подписать в ЭДО</button>
@@ -584,17 +596,36 @@ class SigningTypeSelection extends Step
 		console.log("_render_signingPlanContracts", { contracts });
 
 		return (
-			<div className="horizontal_dropzone_files">
-				{ contracts.map((contract, index) => (
-					<div className="contract" key={ index }>
-						<div className="doc_icon">
+			<div className="documents">
+				{ contracts.length > 0 ? 
+					contracts.map((contract, index) => (
+						<div className="document" key={ index }>
+							<div className="icon">
+								<span className="extension">PDF</span>
+							</div>
+							<div className="title">
+								<p>{ contract.name }</p>
+								<div className="description">
+									<span>{ moment(contract.date).format("DD.MM.YYYY") }</span>
+									<span>{ contract.brand_name }</span>
+									<span>{ contract.model_name }</span>
+								</div>
+							</div>
+							{ index === 0 && (
+								<div className="actions">
+									<button className="button blue">Перейти в ЭДО</button>
+								</div>
+							) }
+							{ index === 1 && (
+								<div className="actions">
+									<button className="button blue">Скачать документ</button>
+									<button className="button blue">Загрузить подписанный экземпляр</button>
+								</div>
+							) }
 						</div>
-						<div className="title">
-							<span>{ contract.name }</span>
-							<span>{ moment().format("DD.MM.YYYY") }</span>
-						</div>
-					</div>
-				)) }
+				)) : (
+					<p className="empty">Нет договоров</p>
+				) }
 			</div>
 		)
 	}
@@ -605,14 +636,25 @@ class SigningTypeSelection extends Step
 		console.log("_render_issuedContracts", { contracts });
 
 		return (
-			<div className="block-column">
-				<div className="dosc_list medium-icon">
-					<div className="row">
-						<p className="doc_name i-doc i-medium" >
-							<a href="#">Скачать №129/2023 от 01.01.2023 - Ожидание оплаты</a>
-						</p>
-					</div>
-				</div>
+			<div className="documents">
+				{ contracts.length > 0 ? 
+					contracts.map((contract, index) => (
+						<div className="document" key={ index }>
+							<div className="icon">
+								<span className="extension">PDF</span>
+							</div>
+							<div className="title">
+								<p>{ contract.name }</p>
+								<div className="description">
+									<span>{ moment(contract.date).format("DD.MM.YYYY") }</span>
+									<span>{ contract.brand_name }</span>
+									<span>{ contract.model_name }</span>
+								</div>
+							</div>
+						</div>
+				)) : (
+					<p className="empty">Нет договоров</p>
+				) }
 			</div>
 		)
 	}
@@ -623,14 +665,36 @@ class SigningTypeSelection extends Step
 		console.log("_render_signingFactContracts", { contracts });
 
 		return (
-			<div className="block-column">
-				<div className="dosc_list medium-icon">
-					<div className="row">
-						<p className="doc_name i-doc i-medium">
-							№123/2023 от 01.01.2023
-						</p>
-					</div>
-				</div>
+			<div className="documents">
+				{ contracts.length > 0 ? 
+					contracts.map((contract, index) => (
+						<div className="document" key={ index }>
+							<div className="icon">
+								<span className="extension">PDF</span>
+							</div>
+							<div className="title">
+								<p>{ contract.name }</p>
+								<div className="description">
+									<span>{ moment(contract.date).format("DD.MM.YYYY") }</span>
+									<span>{ contract.brand_name }</span>
+									<span>{ contract.model_name }</span>
+								</div>
+							</div>
+							{ index === 0 && (
+								<div className="actions">
+									<button className="button blue">Перейти в ЭДО</button>
+								</div>
+							) }
+							{ index === 1 && (
+								<div className="actions">
+									<button className="button blue">Скачать документ</button>
+									<button className="button blue">Загрузить подписанный экземпляр</button>
+								</div>
+							) }
+						</div>
+				)) : (
+					<p className="empty">Нет договоров</p>
+				) }
 			</div>
 		)
 	}
@@ -641,14 +705,25 @@ class SigningTypeSelection extends Step
 		console.log("_render_annuledContracts", { contracts });
 
 		return (
-			<div className="block-column">
-				<div className="dosc_list medium-icon">
-					<div className="row">
-						<p className="doc_name i-doc i-medium">
-							№123/2023 от 01.01.2023
-						</p>
-					</div>
-				</div>
+			<div className="documents">
+				{ contracts.length > 0 ? 
+					contracts.map((contract, index) => (
+						<div className="document" key={ index }>
+							<div className="icon">
+								<span className="extension">PDF</span>
+							</div>
+							<div className="title">
+								<p>{ contract.name }</p>
+								<div className="description">
+									<span>{ moment(contract.date).format("DD.MM.YYYY") }</span>
+									<span>{ contract.brand_name }</span>
+									<span>{ contract.model_name }</span>
+								</div>
+							</div>
+						</div>
+				)) : (
+					<p className="empty">Нет договоров</p>
+				) }
 			</div>
 		)
 	}
@@ -704,7 +779,7 @@ class SigningTypeSelection extends Step
 				<span></span>
 				<div className="status_body">
 					{ this._renderHeader("Оформление лизинга") }
-					<div className="wrap form" style={{ display: open ? "block" : "none" }}>
+					<div className="wrap form contracts" style={{ display: open ? "block" : "none" }}>
 						{ this.types.map((type, index) => (
 							<div className="block" key={ index }>
 								<div className="left">
diff --git a/css/main/style.css b/css/main/style.css
index b0a8687..f9c3e9c 100644
--- a/css/main/style.css
+++ b/css/main/style.css
@@ -5925,6 +5925,70 @@ main .dropdown_blocks_list.zero-margin.gibdd .dropdown_block .block_body .fines_
   background-image: url("data:image/svg+xml,%3Csvg width='36' height='36' viewBox='0 0 36 36' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M28.1241 31.5H7.87305C7.57468 31.5 7.28853 31.3815 7.07755 31.1705C6.86657 30.9595 6.74805 30.6734 6.74805 30.375V5.625C6.74805 5.32663 6.86657 5.04048 7.07755 4.82951C7.28853 4.61853 7.57468 4.5 7.87305 4.5H21.3741L29.2491 12.375V30.375C29.2491 30.5227 29.22 30.669 29.1635 30.8055C29.107 30.942 29.0241 31.066 28.9196 31.1705C28.8152 31.275 28.6912 31.3578 28.5547 31.4144C28.4182 31.4709 28.2719 31.5 28.1241 31.5Z' stroke='%231C01A9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M21.375 4.5V12.375H29.2511' stroke='%231C01A9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M14.625 21.375H21.375' stroke='%231C01A9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M18 18V24.75' stroke='%231C01A9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
   background-repeat: no-repeat;
 }
+.contractStatus_modal .single_status > div .status_body .documents {
+  display: flex;
+  flex-direction: column;
+  grid-gap: 10px 0px;
+  margin-bottom: 30px;
+}
+.contractStatus_modal .single_status > div .status_body .documents .document {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+}
+.contractStatus_modal .single_status > div .status_body .documents .document .icon {
+  margin-top: 5px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 56px;
+  height: 56px;
+  min-width: 56px;
+  min-height: 56px;
+  position: relative;
+  background: url(/assets/images/icons/icon-file.svg) no-repeat left center;
+  background-size: contain;
+  padding: 0;
+  zoom: 0.65;
+}
+.contractStatus_modal .single_status > div .status_body .documents .document .icon .extension {
+  font-weight: 600;
+  font-size: 12px;
+  color: #fff;
+}
+.contractStatus_modal .single_status > div .status_body .documents .document .title {
+  display: flex;
+  flex-direction: column;
+}
+.contractStatus_modal .single_status > div .status_body .documents .document .title p {
+  font-weight: 600;
+  margin-left: 16px;
+}
+.contractStatus_modal .single_status > div .status_body .documents .document .description {
+  display: flex;
+  flex-direction: row;
+}
+.contractStatus_modal .single_status > div .status_body .documents .document .description span {
+  font-weight: 300;
+  margin-left: 16px;
+  margin-top: 2px;
+  color: #8e94a7;
+}
+.contractStatus_modal .single_status > div .status_body .documents .document .actions {
+  display: flex;
+  flex: 1;
+  gap: 0px 20px;
+  flex-direction: row;
+  justify-content: flex-end;
+  align-items: center;
+}
+.contractStatus_modal .single_status > div .status_body .documents .document .actions button {
+  white-space: nowrap;
+}
+.contractStatus_modal .single_status > div .status_body .documents .empty {
+  margin: 12px 0px 15px 0px;
+  color: #8e94a7;
+}
 .contractStatus_modal .bottom_button_close {
   display: flex;
   flex-direction: row;
diff --git a/css/main/style.less b/css/main/style.less
index d7a8605..503ffe2 100644
--- a/css/main/style.less
+++ b/css/main/style.less
@@ -6794,6 +6794,82 @@ main .dropdown_blocks_list.zero-margin.gibdd .dropdown_block {
 						}
 					}
 				}
+
+				.documents 
+				{
+					display: flex;
+					flex-direction: column;
+					grid-gap: 10px 0px;
+					margin-bottom: 30px;
+				
+					.document {
+						width: 100%;
+						display: flex;
+						flex-direction: row;
+
+						.icon {
+							margin-top: 5px;
+							display: flex;
+							align-items: center;
+							justify-content: center;
+							width: 56px;
+							height: 56px;
+							min-width: 56px;
+							min-height: 56px;
+							position: relative;
+							background: url(/assets/images/icons/icon-file.svg) no-repeat left center;
+							background-size: contain;
+							padding: 0;
+							zoom: 0.65;
+				
+							.extension {
+								font-weight: 600;
+								font-size: 12px;
+								color: #fff;
+							}
+						}
+
+						.title {
+							display: flex;
+							flex-direction: column;
+
+							p {
+								font-weight: 600;
+								margin-left: 16px;
+							}
+						}
+
+						.description {
+							display: flex;
+							flex-direction: row;
+
+							span {
+								font-weight: 300;
+								margin-left: 16px;
+								margin-top: 2px;
+								color: #8e94a7;	
+							}
+						}
+
+						.actions {
+							display: flex;
+							flex: 1;
+							gap: 0px 20px;
+							flex-direction: row;
+							justify-content: flex-end;
+							align-items: center;
+
+							button {
+								white-space: nowrap;
+							}
+						}
+					}
+
+					.empty { 
+						margin: 12px 0px 15px 0px;
+						color: #8e94a7;
+					}
+				}
 			}
 		}
 	}
diff --git a/pages/_document.js b/pages/_document.js
index 3d4903a..977a606 100644
--- a/pages/_document.js
+++ b/pages/_document.js
@@ -50,7 +50,7 @@ class Doc extends Document
 							k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
 							(window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");
 
-							ym(94928044, "init", { 
+							ym(${ process.env.YANDEX_METRIKA_ID }, "init", { 
 								clickmap:true, 
 								trackLinks:true, 
 								accurateTrackBounce:true, 
@@ -60,7 +60,7 @@ class Doc extends Document
 					/>
 					<noscript>
 						<div>
-							<img src="https://mc.yandex.ru/watch/94928044" style={{ position:'absolute', left:'-9999px' }} alt=""/>
+							<img src={`https://mc.yandex.ru/watch/${ process.env.YANDEX_METRIKA_ID }`} style={{ position:'absolute', left:'-9999px' }} alt=""/>
 						</div>
 					</noscript>
 				</body>