From a53600fb85b522474e3f59c431239bb74fbcbb3e Mon Sep 17 00:00:00 2001
From: merelendor <merelendor@gmail.com>
Date: Tue, 27 Sep 2022 19:49:07 +0300
Subject: [PATCH] hotfix for forms submission by enter key on calculations
 form, possible fix for double calculation call

---
 .../change/components/Options/index.js        | 83 ++++++++++++-------
 .../change/components/VariantsList/index.js   | 10 ++-
 2 files changed, 58 insertions(+), 35 deletions(-)

diff --git a/pages/contract/change/components/Options/index.js b/pages/contract/change/components/Options/index.js
index 4a0c01c..d2440e7 100644
--- a/pages/contract/change/components/Options/index.js
+++ b/pages/contract/change/components/Options/index.js
@@ -323,6 +323,15 @@ class SumSelector extends React.Component
 		}
 	}
 
+	_handle_onKeyDown = (event) => 
+	{
+		if(event.keyCode === 13)
+		{
+			event.preventDefault();
+			this.props.onSubmit(event);
+		}
+	}
+
 	_handle_onMin = () => 
 	{
 		const { onOption } = this.props;
@@ -366,7 +375,7 @@ class SumSelector extends React.Component
 			<div className="form_field">
 				<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 }/>
+					<input type="number" placeholder="Укажите сумму" defaultValue={ value } disabled={ option.disable ? true : false } onChange={ this._handle_onChange } onKeyDown={ this._handle_onKeyDown }/>
 					<span className="interactive" style={{ textDecoration: "underline" }} onClick={ this._handle_onMin }>от { numeral(min).format(' ., ') }&nbsp;₽</span>
 					<span className="interactive" style={{ textDecoration: "underline" }} onClick={ this._handle_onMax }>до { numeral(max).format(' ., ') }&nbsp;₽</span>
 				</div>
@@ -446,6 +455,15 @@ class InsurancePriceSelector extends React.Component
 		//}
 	}
 
+	_handle_onKeyDown = (event) => 
+	{
+		if(event.keyCode === 13)
+		{
+			event.preventDefault();
+			this.props.onSubmit(event);
+		}
+	}
+
 	_handle_onMin = () => 
 	{
 		const { min } = this.state;
@@ -479,7 +497,7 @@ class InsurancePriceSelector extends React.Component
 						<>{ numeral(value).format(' ., ') }&nbsp;₽</>
 					) : (
 						<>
-							<input type="number" placeholder="Укажите сумму" defaultValue={ value } disabled={ option.disable ? true : false } onChange={ this._handle_onChange }/>
+							<input type="number" placeholder="Укажите сумму" defaultValue={ value } disabled={ option.disable ? true : false } onChange={ this._handle_onChange } onKeyDown={ this._handle_onKeyDown }/>
 							<span className="interactive" style={{ textDecoration: "underline" }} onClick={ this._handle_onMin }>от { numeral(min).format(' ., ') }&nbsp;₽</span>
 							<span className="interactive" style={{ textDecoration: "underline" }} onClick={ this._handle_onMax }>до { numeral(max).format(' ., ') }&nbsp;₽</span>
 						</>
@@ -622,37 +640,39 @@ export default class Options extends React.Component
 
 	_handle_onCalculate = (event) => 
 	{
+		event.preventDefault(); 
+		event.stopPropagation();
+
 		const { sending, number_paydate, period_new, fix_last_payment_available, date_offset_type, sum, insurance_price_result, datefrom, } = this.state;
 		const { number, options, variants, onCalculate } = this.props;
 
-		event.preventDefault();
-		console.log(this.props);
-
-		const selected = {
-			number_planpayment: options.number_planpayment.value, 
-		};
-
-		if(number_paydate !== null) { selected.number_paydate = moment(number_paydate).format(); }
-		if(period_new !== null) { selected.period_new = period_new; }
-		//if(fix_last_payment_available !== null) { selected.fix_last_payment_available = fix_last_payment_available; }
-		if(date_offset_type !== null) { selected.date_offset_type = date_offset_type; }
-		if(sum !== null) { selected.sum = sum; }
-		if(insurance_price_result !== null) { selected.insurance_price_result = insurance_price_result; }
-		//if(early_redemption_change !== null) { selected.early_redemption_change = early_redemption_change; }
-		if(datefrom !== null) { selected.datefrom = moment(datefrom).format(); }
-
 		if(!sending)
 		{
-			const v = {};
-			for(let i in variants.types) { v[ variants.types[i].name ] = variants.types[i].value; }
-			const payload = { 
-				...{ contract_number: number }, 
-				...v, 
-				...selected 
-			};
-
 			this.setState({ sending: true, }, () => 
 			{
+				console.log("_handle_onCalculate ?");
+
+				const selected = {
+					number_planpayment: options.number_planpayment.value, 
+				};
+
+				if(number_paydate !== null) { selected.number_paydate = moment(number_paydate).format(); }
+				if(period_new !== null) { selected.period_new = period_new; }
+				//if(fix_last_payment_available !== null) { selected.fix_last_payment_available = fix_last_payment_available; }
+				if(date_offset_type !== null) { selected.date_offset_type = date_offset_type; }
+				if(sum !== null) { selected.sum = sum; }
+				if(insurance_price_result !== null) { selected.insurance_price_result = insurance_price_result; }
+				//if(early_redemption_change !== null) { selected.early_redemption_change = early_redemption_change; }
+				if(datefrom !== null) { selected.datefrom = moment(datefrom).format(); }
+
+				const v = {};
+				for(let i in variants.types) { v[ variants.types[i].name ] = variants.types[i].value; }
+				const payload = { 
+					...{ contract_number: number }, 
+					...v, 
+					...selected 
+				};
+
 				getContractGraphicChangeCalculate(payload)
 				.then((calculation) => 
 				{
@@ -665,7 +685,7 @@ export default class Options extends React.Component
 						alert("К сожалению, при расчёте возникла ошибка.\n\nДля расчёта вариантов изменения графика обратитесь, пожалуйста, в Службу клиентского сервиса по адресу электронной почты clint@evoleasing.ru или по телефону Горячей линии 8 800 333 75 75.");
 					});
 				});
-			});	
+			});
 		}
 	}
 
@@ -731,6 +751,7 @@ export default class Options extends React.Component
 	{
 		const { loading, sending, } = this.state;
 		const { variants, options } = this.props;
+					/*this._checkAllowCalculate() ? this._handle_onCalculate : {}*/
 
 		return (
 			<div className="block">
@@ -741,7 +762,7 @@ export default class Options extends React.Component
 						<SpinnerCircular size={ 90 } thickness={ 51 } speed={ 100 } color="rgba(28, 1, 169, 1)" secondaryColor="rgba(236, 239, 244, 1)" style={{ marginTop: "-45px", marginLeft: "-45px", }}/>
 					</div>
 				) : (
-					<form className="calc">
+					<form className="calc" onSubmit={ this._handle_onCalculate }>
 						{ options !== undefined && options !== null && options.number_paydate !== undefined && options.number_paydate !== null && options.number_paydate.visible && (
 							<PaymentDate option={ options.number_paydate } onOption={ this._handle_onPaymentDateChange } />
 						) }
@@ -755,17 +776,17 @@ export default class Options extends React.Component
 							<PeriodSelector option={ options.period_new } onOption={ this._handle_onPeriodChange } />
 						) }
 						{ options !== undefined && options !== null && options.sum !== undefined && options.sum !== null && options.sum.visible && (
-							<SumSelector option={ options.sum } onOption={ this._handle_onSumChange } />
+							<SumSelector option={ options.sum } onOption={ this._handle_onSumChange } onSubmit={ this._handle_onCalculate }/>
 						) }
 						{ options !== undefined && options !== null && options.insurance_price_result !== undefined && options.insurance_price_result !== null && options.insurance_price_result.visible && (
-							<InsurancePriceSelector option={ options.insurance_price_result } onOption={ this._handle_onInsurancePriceChange } /> 
+							<InsurancePriceSelector option={ options.insurance_price_result } onOption={ this._handle_onInsurancePriceChange } onSubmit={ this._handle_onCalculate }/> 
 						) }
 						{ options !== undefined && options !== null && options.datefrom !== undefined && options.datefrom !== null && options.datefrom.visible && (
 							<InsuranceDateFromSelector option={ options.datefrom } onOption={ this._handle_onInsuranceDateFromChange } /> 
 						) }
 						<div className="btn_group">
 							<button className="button button-gray" onClick={ this._handle_onBack }>Назад</button>
-							<button className="button button-blue" onClick={ this._handle_onCalculate } disabled={ this._checkAllowCalculate() ? false : true } style={{ minWidth: 350 }}>
+							<button type="submit" className="button button-blue" disabled={ this._checkAllowCalculate() ? false : true } style={{ minWidth: 350 }}>
 								{ sending ? (
 									<SpinnerCircular size={24} thickness={100} speed={100} color="rgba(255, 255, 255, 1)" secondaryColor="rgba(255, 255, 255, 0.5)" style={{ marginTop: "0px" }}/>
 								) : ( "Рассчитать график" ) }
diff --git a/pages/contract/change/components/VariantsList/index.js b/pages/contract/change/components/VariantsList/index.js
index 07ef201..8750392 100644
--- a/pages/contract/change/components/VariantsList/index.js
+++ b/pages/contract/change/components/VariantsList/index.js
@@ -61,8 +61,10 @@ export default class VariantsList extends React.Component
 		return false;
 	}
 
-	_handle_onOptions = () => 
+	_handle_onOptions = (event) => 
 	{
+		event.preventDefault();
+
 		this.props.onOptions();
 	}
 
@@ -95,7 +97,7 @@ export default class VariantsList extends React.Component
 			<div className="block" style={{ position: "relative" }}>
 				<p className="title">Варианты изменения графиков</p>
 				<div style={ loading ? { opacity: 0.5, } : {} }>
-					<form onSubmit={ (e) => e.preventDefault() }>
+					<form onSubmit={ this._handle_onOptions }>
 						{ variants_types !== undefined && variants_types !== null && variants_types.map((variant, index) => 
 						{
 							const disabled = this._checkVariant(variant.type);
@@ -129,8 +131,8 @@ export default class VariantsList extends React.Component
 							)
 						}) }
 						{ selected !== undefined && selected !== null && (
-							<button className="button button-blue" disabled={ blocked || loading ? true : selected.length > 0 ? false : true } onClick={ this._handle_onOptions }>Далее</button>
-						)}
+							<button type="submit" className="button button-blue" disabled={ blocked || loading ? true : selected.length > 0 ? false : true }>Далее</button>
+						) }
 					</form>
 				</div>
 				{ loading && (