updates for deals contracts

2023-09-22 12:31:59 +03:00 · 2023-09-22 12:31:59 +03:00 · 973e210b29
commit 973e210b29
parent 9cd9a6916b
4 changed files with 263 additions and 48 deletions
--- 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,16 +557,19 @@ 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) => (
+					{ 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="" onChange={ () => {} }/>
+									<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>
@ -568,7 +578,9 @@ class SigningTypeSelection extends Step
 									</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">
-							<span>{ contract.name }</span>
-							<span>{ moment().format("DD.MM.YYYY") }</span>
+								<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>
 		)
 	}
@ -605,15 +636,26 @@ 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 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 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,15 +705,26 @@ 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 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">
--- 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;
--- 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;
+					}
+				}
 			}
 		}
 	}
--- 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>