From 4a4a0243a41e56b3b44b311faa7867d4adb8898b Mon Sep 17 00:00:00 2001
From: merelendor <merelendor@gmail.com>
Date: Thu, 25 Aug 2022 10:00:40 +0300
Subject: [PATCH] graphic change options fixes, help messages

---
 pages/components/DatePicker/index.js          |  63 +++++--
 .../change/components/Options/index.js        | 167 ++++++++++--------
 .../change/components/VariantsList/index.js   |  37 +++-
 3 files changed, 168 insertions(+), 99 deletions(-)

diff --git a/pages/components/DatePicker/index.js b/pages/components/DatePicker/index.js
index 1d605f9..f6f5b0f 100644
--- a/pages/components/DatePicker/index.js
+++ b/pages/components/DatePicker/index.js
@@ -43,26 +43,51 @@ export default class DateInput extends React.Component
 
 	render() 
 	{
-		const { id, placeholder, value, min, max } = this.props;
+		const { id, placeholder, value, min, max, disabled } = this.props;
 		const { readonly } = this.state;
 
-		return (
-            <div className="date_input_wrapper">
-                <DatePicker 
-					messages={ messages } 
-					onFocus={ this._handle_onFocus } 
-					onBlur={ this._handle_onBlur } 
-					parse={ formats } id={ id } 
-					placeholder={ placeholder } 
-					value={ value } 
-					min={ min } 
-					max={ max } 
-					onChange={ this._handle_onChange }
-					inputProps={{
-						component: props => <input {...props} readOnly />
-					}}
-				/>
-            </div>
-        )
+		if(disabled)
+		{
+			return (
+				<div className="date_input_wrapper" style={{ position: "relative" }}>
+					<DatePicker 
+						messages={ messages } 
+						onFocus={ this._handle_onFocus } 
+						onBlur={ this._handle_onBlur } 
+						parse={ formats } id={ id } 
+						placeholder={ placeholder } 
+						value={ value } 
+						min={ min } 
+						max={ max } 
+						onChange={ this._handle_onChange }
+						inputProps={{
+							component: props => <input {...props} readOnly />
+						}}
+					/>
+					<div style={{ position: "absolute", left: 0, top: 0, width: "100%", height: "100%", opacity: 0.0 }} onClick={ (event) => { event.stopPropagation(); event.preventDefault(); } }/>
+				</div>
+			)
+		}
+		else
+		{
+			return (
+				<div className="date_input_wrapper">
+					<DatePicker 
+						messages={ messages } 
+						onFocus={ this._handle_onFocus } 
+						onBlur={ this._handle_onBlur } 
+						parse={ formats } id={ id } 
+						placeholder={ placeholder } 
+						value={ value } 
+						min={ min } 
+						max={ max } 
+						onChange={ this._handle_onChange }
+						inputProps={{
+							component: props => <input {...props} readOnly />
+						}}
+					/>
+				</div>
+			)
+		}
     }
 }
\ No newline at end of file
diff --git a/pages/contract/change/components/Options/index.js b/pages/contract/change/components/Options/index.js
index 3a6d3f4..8909fa6 100644
--- a/pages/contract/change/components/Options/index.js
+++ b/pages/contract/change/components/Options/index.js
@@ -46,10 +46,11 @@ class PaymentDate extends React.Component
 
 	render()
 	{
+		const { option } = this.props;
 		const { value, min, max } = this.state;
 
 		return (
-			<div className="form_field">
+			<div className="form_field" style={ option.disable ? { opacity: 0.5 } : {} }>
 				<label>Дата платежа</label>
 				<DateInput 
 					placeholder="" 
@@ -58,6 +59,7 @@ class PaymentDate extends React.Component
 					max={ max } 
 					id={"date_to"} 
 					onChange={ this._handle_onChange } 
+					disabled={ option.disable ? true : false } 
 				/>
 			</div>
 		)
@@ -98,31 +100,34 @@ class FixLastPayment extends React.Component
 
 	render()
 	{
+		const { option } = this.props;
 		const { value } = this.state;
 
 		return (
 			<div className="form_field">
-				<input type="checkbox" hidden id="fix_pay" name="fix_pay" checked={ value } onChange={ this._handle_onChange }/>
-				<label htmlFor="fix_pay">
+				<input type="checkbox" hidden id="fix_pay" name="fix_pay" checked={ value } disabled={ option.disable ? true : false } onChange={ this._handle_onChange } style={ option.disable ? { opacity: 0.5 } : {} } />
+				<label htmlFor="fix_pay" style={ option.disable ? { opacity: 0.5 } : {} }>
 					Фиксировать последний платеж
 				</label>
-				<div className="help_tooltip">
-					<div className="help_icon">
-						<svg width={ 24 } height={ 24 } fill="none" xmlns="http://www.w3.org/2000/svg" >
-						<path d="M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18Z" stroke="#8E94A7" strokeWidth={ 2 } strokeLinecap="round" strokeLinejoin="round" />
-						<path d="M11.25 11.25H12v5.25h.75" stroke="#8E94A7" strokeWidth={ 2 } strokeLinecap="round" strokeLinejoin="round" />
-						<path d="M12 9a1.125 1.125 0 1 0 0-2.25A1.125 1.125 0 0 0 12 9Z" fill="#8E94A7" />
-						</svg>
-					</div>
-					<div className="help_content ">
-						{" "}
-						{/* opened */}
-						<div>
-							<p>Какой-то описательный текст</p>
-							<p className="button">Закрыть</p>
+				{ option.information !== undefined && option.information !== null && (
+					<div className="help_tooltip">
+						<div className="help_icon">
+							<svg width={ 24 } height={ 24 } fill="none" xmlns="http://www.w3.org/2000/svg">
+								<path d="M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18Z" stroke="#8E94A7" strokeWidth={ 2 } strokeLinecap="round" strokeLinejoin="round" />
+								<path d="M11.25 11.25H12v5.25h.75" stroke="#8E94A7" strokeWidth={ 2 } strokeLinecap="round" strokeLinejoin="round" />
+								<path d="M12 9a1.125 1.125 0 1 0 0-2.25A1.125 1.125 0 0 0 12 9Z" fill="#8E94A7" />
+							</svg>
+						</div>
+						<div className="help_content ">
+							{" "}
+							{/* opened */}
+							<div>
+								<p dangerouslySetInnerHTML={{ __html: option.information }}/>
+								<p className="button">Закрыть</p>
+							</div>
 						</div>
 					</div>
-				</div>
+				) }
 			</div>
 		)
 	}
@@ -162,17 +167,18 @@ class DateOffestType extends React.Component
 
 	render()
 	{
+		const { option } = this.props;
 		const { value } = this.state;
 
 		return (
-			<div className="form_field">
+			<div className="form_field" style={ option.disable ? { opacity: 0.5 } : {} }>
 				<label>Тип каникул</label>
 				<div className="form_field">
-					<input type="radio" hidden id="weeekend_type_1" name="weeekend_type" checked={ value === 100000001 ? true : false } onChange={ () => this._handle_onChange(100000001) }/>
+					<input type="radio" hidden id="weeekend_type_1" name="weeekend_type" checked={ value === 100000001 ? true : false } disabled={ option.disable ? true : false } onChange={ () => this._handle_onChange(100000001) }/>
 					<label htmlFor="weeekend_type_1">С увеличением срока</label>
 				</div>
 				<div className="form_field">
-					<input type="radio" hidden id="weeekend_type_2" name="weeekend_type" checked={ value === 100000000 ? true : false } onChange={ () => this._handle_onChange(100000000) }/>
+					<input type="radio" hidden id="weeekend_type_2" name="weeekend_type" checked={ value === 100000000 ? true : false } disabled={ option.disable ? true : false } onChange={ () => this._handle_onChange(100000000) }/>
 					<label htmlFor="weeekend_type_2">Без изменения срока</label>
 				</div>
 			</div>
@@ -224,14 +230,15 @@ class PeriodSelector extends React.Component
 
 	render()
 	{
+		const { option } = this.props;
 		const { value, periods } = this.state;
 
 		if(value !== null)
 		{
 			return (
-				<div className="form_field">
+				<div className="form_field" style={ option.disable ? { opacity: 0.5 } : {} }>
 					<label>Увеличить график на</label>
-					<select value={ value } onChange={ this._handle_onChange }>
+					<select value={ value } onChange={ this._handle_onChange } disabled={ option.disable ? true : false }>
 						{ periods.map((period, index) => (
 							<option key={ index } value={ period }>{ index + 1 } { pluralize( index + 1, 'месяца', 'месяц', 'месяца', 'месяцев') } ({ period } { pluralize( period, 'платежа', 'платеж', 'платежа', 'платежей') })</option>
 						)) }
@@ -291,33 +298,36 @@ class SumSelector extends React.Component
 
 	render()
 	{
+		const { option } = this.props;
 		const { value, min, max } = this.state;
 
 		return (
 			<div className="form_field">
-				<label>Увеличить платеж на (ЧДП)</label>
-				<div className="input_with_notes">
-					<input type="number" placeholder="Укажите сумму" defaultValue={ value } onChange={ this._handle_onChange }/>
+				<label style={ option.disable ? { opacity: 0.5 } : {} }>Увеличить платеж на (ЧДП)</label>
+				<div className="input_with_notes" style={ option.disable ? { opacity: 0.5 } : {} }>
+					<input type="number" placeholder="Укажите сумму" defaultValue={ value } disabled={ option.disable ? true : false } onChange={ this._handle_onChange }/>
 					<span>от { numeral(min).format(' ., ') }&nbsp;₽</span>
 					<span>до { numeral(max).format(' ., ') }&nbsp;₽</span>
 				</div>
-				<div className="help_tooltip">
-					<div className="help_icon">
-						<svg width={ 24 } height={ 24 } fill="none" xmlns="http://www.w3.org/2000/svg">
-							<path d="M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18Z" stroke="#8E94A7" strokeWidth={ 2 } strokeLinecap="round" strokeLinejoin="round" />
-							<path d="M11.25 11.25H12v5.25h.75" stroke="#8E94A7" strokeWidth={ 2 } strokeLinecap="round" strokeLinejoin="round" />
-							<path d="M12 9a1.125 1.125 0 1 0 0-2.25A1.125 1.125 0 0 0 12 9Z" fill="#8E94A7" />
-						</svg>
-					</div>
-					<div className="help_content ">
-						{" "}
-						{/* opened */}
-						<div>
-							<p>Какой-то описательный текст</p>
-							<p className="button">Закрыть</p>
+				{ option.information !== undefined && option.information !== null && (
+					<div className="help_tooltip">
+						<div className="help_icon">
+							<svg width={ 24 } height={ 24 } fill="none" xmlns="http://www.w3.org/2000/svg">
+								<path d="M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18Z" stroke="#8E94A7" strokeWidth={ 2 } strokeLinecap="round" strokeLinejoin="round" />
+								<path d="M11.25 11.25H12v5.25h.75" stroke="#8E94A7" strokeWidth={ 2 } strokeLinecap="round" strokeLinejoin="round" />
+								<path d="M12 9a1.125 1.125 0 1 0 0-2.25A1.125 1.125 0 0 0 12 9Z" fill="#8E94A7" />
+							</svg>
+						</div>
+						<div className="help_content ">
+							{" "}
+							{/* opened */}
+							<div>
+								<p dangerouslySetInnerHTML={{ __html: option.information }}/>
+								<p className="button">Закрыть</p>
+							</div>
 						</div>
 					</div>
-				</div>
+				) }
 			</div>
 		)
 	}
@@ -351,52 +361,63 @@ class InsurancePriceSelector extends React.Component
 
 	_handle_onChange = (event) => 
 	{
-		const { onOption } = this.props;
+		const { option, onOption } = this.props;
 		const { min, max } = this.state;
 
-		const value = parseFloat(event.target.value.replace('/[^\d]/m', ''));
-		if(value >= min && value <= max && !isNaN(value))
-		{
-			this.setState({ value: value }, () => 
+		//if(option.disable)
+		//{
+		//	console.log("////", option.disable);
+		//	this.setState({ value: this.state.value });
+		//}
+		//else
+		//{
+			const value = parseFloat(event.target.value.replace('/[^\d]/m', ''));
+			if(value >= min && value <= max && !isNaN(value))
 			{
-				onOption(this.state.value, false);
-			});
-		}
-		else
-		{
-			onOption(this.state.value, true);
-		}
+				this.setState({ value: value }, () => 
+				{
+					onOption(this.state.value, false);
+				});
+			}
+			else
+			{
+				onOption(this.state.value, true);
+			}
+		//}
 	}
 
 	render()
 	{
+		const { option } = this.props;
 		const { value, min, max } = this.state;
 
 		return (
 			<div className="form_field">
-				<label>Сумма пролонгации</label>
-				<div className="input_with_notes">
-				<input type="number" placeholder="Укажите сумму" defaultValue={ value } onChange={ this._handle_onChange }/>
+				<label style={ option.disable ? { opacity: 0.5 } : {} }>Сумма пролонгации</label>
+				<div className="input_with_notes" style={ option.disable ? { opacity: 0.5 } : {} }>
+					<input type="number" placeholder="Укажите сумму" defaultValue={ value } disabled={ option.disable ? true : false } onChange={ this._handle_onChange }/>
 					<span>от { numeral(min).format(' ., ') }&nbsp;₽</span>
 					<span>до { numeral(max).format(' ., ') }&nbsp;₽</span>
 				</div>
-				<div className="help_tooltip">
-					<div className="help_icon">
-						<svg width={ 24 } height={ 24 } fill="none" xmlns="http://www.w3.org/2000/svg">
-							<path d="M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18Z" stroke="#8E94A7" strokeWidth={ 2 } strokeLinecap="round" strokeLinejoin="round" />
-							<path d="M11.25 11.25H12v5.25h.75" stroke="#8E94A7" strokeWidth={ 2 } strokeLinecap="round" strokeLinejoin="round" />
-							<path d="M12 9a1.125 1.125 0 1 0 0-2.25A1.125 1.125 0 0 0 12 9Z" fill="#8E94A7" />
-						</svg>
-					</div>
-					<div className="help_content ">
-						{" "}
-						{/* opened */}
-						<div>
-							<p>Какой-то описательный текст</p>
-							<p className="button">Закрыть</p>
+				{ option.information !== undefined && option.information !== null && (
+					<div className="help_tooltip">
+						<div className="help_icon">
+							<svg width={ 24 } height={ 24 } fill="none" xmlns="http://www.w3.org/2000/svg">
+								<path d="M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18Z" stroke="#8E94A7" strokeWidth={ 2 } strokeLinecap="round" strokeLinejoin="round" />
+								<path d="M11.25 11.25H12v5.25h.75" stroke="#8E94A7" strokeWidth={ 2 } strokeLinecap="round" strokeLinejoin="round" />
+								<path d="M12 9a1.125 1.125 0 1 0 0-2.25A1.125 1.125 0 0 0 12 9Z" fill="#8E94A7" />
+							</svg>
+						</div>
+						<div className="help_content ">
+							{" "}
+							{/* opened */}
+							<div>
+								<p dangerouslySetInnerHTML={{ __html: option.information }}/>
+								<p className="button">Закрыть</p>
+							</div>
 						</div>
 					</div>
-				</div>
+				) }
 			</div>
 		)
 	}
@@ -440,10 +461,11 @@ class InsuranceDateFromSelector extends React.Component
 
 	render()
 	{
+		const { option } = this.props;
 		const { value, min, max } = this.state;
 
 		return (
-			<div className="form_field">
+			<div className="form_field" style={ option.disable ? { opacity: 0.5 } : {} }>
 				<label>Дата начала пролонгации</label>
 				<DateInput 
 					placeholder="" 
@@ -452,6 +474,7 @@ class InsuranceDateFromSelector extends React.Component
 					max={ max } 
 					id={"date_to"} 
 					onChange={ this._handle_onChange } 
+					disabled={ option.disable ? true : false } 
 				/>
 			</div>
 		)
diff --git a/pages/contract/change/components/VariantsList/index.js b/pages/contract/change/components/VariantsList/index.js
index 544ba1f..5b969eb 100644
--- a/pages/contract/change/components/VariantsList/index.js
+++ b/pages/contract/change/components/VariantsList/index.js
@@ -25,6 +25,21 @@ export default class VariantsList extends React.Component
 		}
 	}
 
+	_getVariantHelp = (type) => 
+	{
+		const { variants } = this.props;
+
+		for(let i in variants.types)
+		{
+			if(variants.types[i].name === type)
+			{
+				return variants.types[i].information;
+			}
+		}
+
+		return null;
+	}
+
 	_checkVariant = (type) => 
 	{
 		const { variants } = this.props;
@@ -52,7 +67,9 @@ export default class VariantsList extends React.Component
 
 	render() 
 	{
-		const { number, variants_types, selected, blocked, loading } = this.props;
+		const { number, variants, variants_types, selected, blocked, loading } = this.props;
+		console.log("variants_typesvariants_typesvariants_typesvariants_typesvariants_types");
+		console.log(variants_types);
 
 		return (
 			<div className="block" style={{ position: "relative" }}>
@@ -62,11 +79,13 @@ export default class VariantsList extends React.Component
 						{ variants_types.map((variant, index) => 
 						{
 							const disabled = this._checkVariant(variant.type);
+							const help = this._getVariantHelp(variant.type);
+
 							return (
 								<div className="form_field" key={ index }>
 									<input type="checkbox" hidden id={ `variant_${ index }` } name="variants" disabled={ disabled } checked={ selected.indexOf(variant.type) > -1 ? true : false } onChange={ () => { this._handle_onVariant(variant.type) } }/>
 									<label htmlFor={ `variant_${ index }` } className="unselectable" 
-									style={ disabled ? { color: "#A8026B", textDecoration: "line-through", } : {} }>{ variant.title }<br/><small>{ variant.type }</small></label>
+									style={ disabled ? { color: "#A8026B", textDecoration: "line-through", } : {} }>{ variant.title }</label>
 									<div className="help_tooltip">
 										<div className="help_icon">
 											<svg width={ 24 } height={ 24 } fill="none" xmlns="http://www.w3.org/2000/svg" >
@@ -75,14 +94,16 @@ export default class VariantsList extends React.Component
 												<path d="M12 9a1.125 1.125 0 1 0 0-2.25A1.125 1.125 0 0 0 12 9Z" fill="#8E94A7" />
 											</svg>
 										</div>
-										<div className="help_content ">
+										{ help !== null && (
+											<div className="help_content">
 											{" "}
-											{/* opened */}
-											<div>
-												<p>{ variant.help }</p>
-												<p className="button">Закрыть</p>
+												{/* opened */}
+												<div>
+													<p dangerouslySetInnerHTML={{ __html: help }}/>
+													<p className="button">Закрыть</p>
+												</div>
 											</div>
-										</div>
+										) }
 									</div>
 								</div>
 							)