121 lines
4.0 KiB
JavaScript
121 lines
4.0 KiB
JavaScript
import React from "react";
|
|
import DateInput from "../../../../components/DatePicker";
|
|
|
|
export default class Options extends React.Component
|
|
{
|
|
constructor(props)
|
|
{
|
|
super(props);
|
|
this.state = {
|
|
date: null,
|
|
car: null,
|
|
contract_date: null,
|
|
agreement: null,
|
|
rules: null,
|
|
loading: false,
|
|
};
|
|
}
|
|
|
|
componentDidMount()
|
|
{
|
|
}
|
|
|
|
_handle_onBack = (event) =>
|
|
{
|
|
event.preventDefault();
|
|
this.props.onVariants();
|
|
}
|
|
|
|
_handle_onCalculate = (event) =>
|
|
{
|
|
event.preventDefault();
|
|
this.props.onCalculate();
|
|
}
|
|
|
|
render()
|
|
{
|
|
const { loading, date, car, contract_date, agreement, rules } = this.state;
|
|
const { number } = this.props;
|
|
|
|
return (
|
|
<div className="block">
|
|
<p className="title">Параметры опций изменений графика платежей</p>
|
|
<form className="calc">
|
|
<div className="form_field">
|
|
<label>Дата платежа</label>
|
|
<DateInput placeholder="" id={"date_to"} onChange={ (date) => this.setState({ date_to: date }) } />
|
|
</div>
|
|
<div className="form_field">
|
|
<input type="checkbox" hidden id="fix_pay" name="fix_pay" />
|
|
<label htmlFor="fix_pay">
|
|
Фиксировать послединий платеж
|
|
</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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="form_field">
|
|
<label>Тип каникул</label>
|
|
<div className="form_field">
|
|
<input type="radio" hidden id="weeekend_type_1" name="weeekend_type" />
|
|
<label htmlFor="weeekend_type_1">
|
|
Фиксировать послединий платеж
|
|
</label>
|
|
</div>
|
|
<div className="form_field">
|
|
<input type="radio" hidden id="weeekend_type_2" name="weeekend_type" />
|
|
<label htmlFor="weeekend_type_2">
|
|
Фиксировать послединий платеж
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div className="form_field">
|
|
<label>Увеличить график на</label>
|
|
<select>
|
|
<option>1 месяц (37 платеж)</option>
|
|
</select>
|
|
</div>
|
|
<div className="form_field">
|
|
<label>Увеличить график на</label>
|
|
<input type="number" placeholder="Укажите сумму" />
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="btn_group">
|
|
<button className="button button-gray" onClick={ this._handle_onBack }>Назад</button>
|
|
<button className="button button-blue" onClick={ this._handle_onCalculate }>Рассчитать график</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
);
|
|
}
|
|
} |