Merge branch 'master' into nazanin/app_2_components_tests_elements

.stylelintrc.js

@@ -48,7 +48,7 @@ module.exports = {
         'no-extra-semicolons'                              : true,
         'no-invalid-double-slash-comments'                 : true,
         'number-leading-zero'                              : 'always',
-        'number-max-precision'                             : 2,
+        'number-max-precision'                             : 3,
         'number-no-trailing-zeros'                         : true,
         // 'plugin/selector-bem-pattern'                      : { preset: 'bem', implicitComponents: 'src/sass/app_2/**/*.scss' },
         'plugin/selector-bem-pattern'                      : { preset: 'bem', implicitComponents: 'src/sass/app_2/modules/trading.scss' },

scripts/js_texts/extracted_strings_app.js

@@ -34,6 +34,7 @@ module.exports = [
     'Barrier',
     'Barrier Change',
     'Bid',
+    'Binary Coin',
     'Binary Options Trading has been disabled on your account. Kindly [_1]contact customer support[_2] for assistance.',
     'Bitcoin',
     'Bitcoin Cash',

src/javascript/app/base/binary_loader.js

@@ -85,7 +85,9 @@ const BinaryLoader = (() => {
 
             ScrollToAnchor.init();
         });
-        BinarySocket.setOnReconnect(active_script.onReconnect);
+        if (active_script) {
+            BinarySocket.setOnReconnect(active_script.onReconnect);
+        }
     };
 
     const error_messages = {

src/javascript/app/pages/trade/purchase.js

@@ -425,13 +425,14 @@ const Purchase = (() => {
         if (el_epoch && el_epoch.classList) {
             el_epoch.classList.add('is-visible');
             el_epoch.setAttribute('style', `position: absolute; right: ${((el_epoch.parentElement.offsetWidth - el_epoch.nextSibling.offsetWidth) / 2) + adjustment}px`);
+            const last_digit_quote = last_tick_quote ? last_tick_quote.slice(-1) : '';
             if (contract_status === 'won') {
                 DigitTicker.markAsWon();
-                DigitTicker.markDigitAsWon(last_tick_quote.slice(-1));
+                DigitTicker.markDigitAsWon(last_digit_quote);
             }
             if (contract_status === 'lost') {
                 DigitTicker.markAsLost();
-                DigitTicker.markDigitAsLost(last_tick_quote.slice(-1));
+                DigitTicker.markDigitAsLost(last_digit_quote);
             }
         }
     };

src/javascript/app_2/App/Components/Form/DatePicker/date_picker.jsx

@@ -1,5 +1,6 @@
 import classNames           from 'classnames';
 import { observer }         from 'mobx-react';
+import PropTypes            from 'prop-types';
 import React                from 'react';
 import { CSSTransition }    from 'react-transition-group';
 import {
@@ -20,21 +21,20 @@ import Calendar             from '../../Elements/Calendar';
 
 class DatePicker extends React.Component {
     state = {
-        value                : this.props.value,
+        date_value           : '',
+        holidays             : [],
         is_datepicker_visible: false,
         is_clear_btn_visible : false,
-        holidays             : [],
+        value                : this.props.value,
         weekends             : [],
     };
 
     componentDidMount() {
         document.addEventListener('click', this.onClickOutside, true);
         const { mode, value } = this.props;
-        if (mode === 'duration') {
-            this.updateDatePickerValue(daysFromTodayTo(value));
-        } else {
-            this.updateDatePickerValue(formatDate(value, 'DD MMM YYYY'));
-        }
+        const initial_value = mode === 'duration' ? formatDate(addDays(toMoment(), 1), 'DD MMM YYYY') : formatDate(value, 'DD MMM YYYY');
+
+        this.updateDatePickerValue(initial_value);
 
         if (this.props.disable_trading_events) {
             this.onChangeCalendarMonth(getStartOfMonth(this.state.value));
@@ -73,7 +73,7 @@ class DatePicker extends React.Component {
         if (!isDateValid(value)) { value = ''; }
 
         if (this.props.mode === 'duration') {
-            this.updateDatePickerValue(daysFromTodayTo(value));
+            this.updateDatePickerValue(value);
         } else {
             this.updateDatePickerValue(formatDate(value, 'DD MMM YYYY'));
         }
@@ -82,7 +82,9 @@ class DatePicker extends React.Component {
 
     onChangeInput = (e) => {
         const value = e.target.value;
-        this.updateDatePickerValue(value);
+        const formatted_value = formatDate(addDays(toMoment(), value), 'DD MMM YYYY');
+        this.updateDatePickerValue(formatted_value);
+        this.props.onChange(e);
     }
 
     clearDatePickerInput = () => {
@@ -95,11 +97,16 @@ class DatePicker extends React.Component {
     // TODO: handle cases where user inputs date before min_date and date after max_date
     updateDatePickerValue = (value) => {
         const { date_format, mode, start_date } = this.props;
-
         this.setState({ value }, this.updateStore);
 
+        if (mode === 'duration') {
+            const new_value      = daysFromTodayTo(value);
+            const new_date_value = formatDate(value, 'DD MMM YYYY');
+            this.setState({ value: new_value, date_value: new_date_value }, this.updateStore);
+        }
+
         // update Calendar
-        const new_date = (mode === 'duration') ? addDays(toMoment(), value) : value;
+        const new_date = (mode === 'duration') ? formatDate(value, 'DD MMM YYYY') : value;
         if (this.calendar && (isDateValid(new_date) || !new_date)) {
             if (!new_date) {
                 const current_date = formatDate(start_date, date_format);
@@ -147,19 +154,20 @@ class DatePicker extends React.Component {
     }
 
     renderInputField = () => {
-        const { is_read_only, mode, name, validation_errors } = this.props;
+        const { is_read_only, mode, name, label, error_messages } = this.props;
         let { placeholder } = this.props;
-        let type, onChange;
+        let value, type, onChange;
 
         switch (mode) {
             case 'duration':
                 onChange = this.onChangeInput;
-                placeholder = placeholder || localize('Select a duration');
-                type = 'number';
+                type = 'text';
+                value = this.state.value;
                 break;
             default:
                 placeholder = placeholder || localize('Select a date');
                 type = 'text';
+                value = formatDate(this.props.value, 'DD MMM YYYY');
         }
 
         return (
@@ -168,14 +176,16 @@ class DatePicker extends React.Component {
                 classNameInput='trade-container__input'
                 data-tip={false}
                 data-value={this.state.value}
-                error_messages={validation_errors}
+                error_messages={error_messages}
+                is_autocomplete_disabled={true}
+                label={label}
                 is_read_only={is_read_only}
                 name={name}
                 onChange={onChange}
                 onClick={this.handleVisibility}
                 placeholder={placeholder}
                 type={type}
-                value={this.state.value}
+                value={value}
             />
         );
     };
@@ -221,11 +231,12 @@ class DatePicker extends React.Component {
                 { this.renderInputField() }
                 <IconCalendar
                     className={classNames('datepicker__icon datepicker__icon--calendar', {
-                        'datepicker__icon--is-hidden': this.state.is_clear_btn_visible,
+                        'datepicker__icon--is-hidden' : this.state.is_clear_btn_visible,
+                        'datepicker__icon--with-label': this.props.label,
                     })}
                     onClick={this.handleVisibility}
                 />
-                { this.props.is_clearable &&
+                {this.props.is_clearable &&
                     <IconClear
                         className={classNames('datepicker__icon datepicker__icon--clear', {
                             'datepicker__icon--is-hidden': !this.state.is_clear_btn_visible,
@@ -261,7 +272,7 @@ class DatePicker extends React.Component {
                             max_date={this.props.max_date}
                             min_date={this.props.min_date}
                             start_date={this.props.start_date}
-                            value={this.props.value}
+                            value={this.props.mode === 'duration' ? this.state.date_value : this.props.value}
                         />
                     </div>
                 </CSSTransition>
@@ -277,6 +288,8 @@ DatePicker.defaultProps = {
 
 DatePicker.propTypes = {
     ...Calendar.propTypes,
+    error_messages: PropTypes.array,
+    label         : PropTypes.string,
 };
 
 export default observer(DatePicker);

src/javascript/app_2/App/Components/Form/RangeSlider/range_slider.jsx

@@ -58,7 +58,7 @@ const RangeSlider = ({
                 {/* Calculate line width based on active value and size of range thumb */}
                 <div
                     className='range-slider__line'
-                    style={{ width: `calc(${value * 10}% - ${value < 4 ? '0.8rem' : '0.5rem'})` }}
+                    style={{ width: `calc(${value * 10}% - ${value < 4 ? '1.6rem' : '1rem'})` }}
                 />
             </label>
             <div className='range-slider__caption'>

src/javascript/app_2/App/Components/Form/TimePicker/dialog.jsx

@@ -85,8 +85,12 @@ Dialog.propTypes = {
     ]),
     onChange  : PropTypes.func,
     preClass  : PropTypes.string,
-    start_time: PropTypes.number,
-    value     : PropTypes.oneOfType([
+    start_time: PropTypes.oneOfType([
+        PropTypes.number,
+        PropTypes.string,
+        PropTypes.object,
+    ]),
+    value: PropTypes.oneOfType([
         PropTypes.number,
         PropTypes.string,
         PropTypes.object,

src/javascript/app_2/App/Components/Form/input_field.jsx

@@ -57,7 +57,7 @@ const InputField = ({
 
         if (type === 'number') {
             const is_empty = !e.target.value || e.target.value === '' || e.target.value === '  ';
-            const signed_regex = is_signed ? '[\+\-\.0-9]$' : '^';
+            const signed_regex = is_signed ? '[+\-\.0-9]$' : '^';
 
             const is_number = new RegExp(`${signed_regex}(\\d*)?${is_float ? '(\\.\\d+)?' : ''}$`)
                 .test(e.target.value);
@@ -161,7 +161,7 @@ const InputField = ({
         <div
             className={`input-field ${className || ''}`}
         >
-            <Tooltip alignment='left' message={has_error ? error_messages[0] : null }>
+            <Tooltip className={classNames('', { 'with-label': label })} alignment='left' message={has_error ? error_messages[0] : null }>
                 {!!label &&
                     <label htmlFor={name} className='input-label'>{label}</label>
                 }

src/javascript/app_2/Modules/Trading/Components/Form/DatePicker/index.js

@@ -0,0 +1 @@
+export default from './trading_date_picker.jsx';

src/javascript/app_2/Modules/Trading/Components/Form/DatePicker/trading_date_picker.jsx

@@ -0,0 +1,114 @@
+import PropTypes                      from 'prop-types';
+import { PropTypes as MobxPropTypes } from 'mobx-react';
+import React                          from 'react';
+import { connect }                    from 'Stores/connect';
+import {
+    isTimeValid,
+    setTime,
+    toMoment }                        from 'Utils/Date';
+import DatePicker                     from 'App/Components/Form/DatePicker';
+
+const TradingDatePicker = ({
+    duration_min_max,
+    duration_units_list,
+    validation_errors,
+    expiry_date,
+    expiry_type,
+    is_24_hours_contract,
+    mode,
+    name,
+    onChange,
+    server_time,
+    start_time,
+    start_date,
+    symbol,
+}) => {
+    let max_date_duration,
+        min_date_expiry,
+        has_today_btn,
+        is_read_only;
+    const moment_contract_start_date_time =
+        setTime(toMoment(start_date || server_time), (isTimeValid(start_time) ? start_time : server_time.format('HH:mm')));
+
+    const max_daily_duration = duration_min_max.daily ? duration_min_max.daily.max : 365 * 24 * 3600;
+
+    if (is_24_hours_contract) {
+        min_date_expiry   = moment_contract_start_date_time.clone().startOf('day');
+        max_date_duration = moment_contract_start_date_time.clone().add(
+            start_date ? 24 * 3600 : (max_daily_duration), 'second');
+    } else {
+        min_date_expiry   = moment_contract_start_date_time.clone().startOf('day');
+        max_date_duration = moment_contract_start_date_time.clone().add(max_daily_duration, 'second');
+
+    }
+    if (expiry_type === 'duration') {
+        min_date_expiry.add(1, 'day');
+        has_today_btn = false;
+        is_read_only = false;
+    } else {
+        has_today_btn = true;
+        is_read_only = true;
+    }
+
+    return (
+        <DatePicker
+            alignment='left'
+            disable_year_selector
+            disable_trading_events
+            error_messages={validation_errors.duration || []}
+            has_today_btn={has_today_btn}
+            is_nativepicker={false}
+            is_read_only={is_read_only}
+            label={duration_units_list.length === 1 ? duration_units_list[0].text : null}
+            mode={mode}
+            name={name}
+            onChange={onChange}
+            min_date={min_date_expiry}
+            max_date={max_date_duration}
+            start_date={start_date}
+            underlying={symbol}
+            value={expiry_date}
+        />
+    );
+};
+
+TradingDatePicker.propTypes = {
+    duration: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.number,
+    ]),
+    duration_min_max   : PropTypes.object,
+    duration_units_list: MobxPropTypes.arrayOrObservableArray,
+    expiry_date        : PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.number,
+    ]),
+    expiry_type         : PropTypes.string,
+    is_24_hours_contract: PropTypes.bool,
+    mode                : PropTypes.string,
+    name                : PropTypes.string,
+    onChange            : PropTypes.func,
+    server_time         : PropTypes.object,
+    start_date          : PropTypes.oneOfType([
+        PropTypes.number,
+        PropTypes.string,
+    ]),
+    start_time       : PropTypes.string,
+    symbol           : PropTypes.string,
+    validation_errors: PropTypes.object,
+};
+
+export default connect(
+    ({ modules, common }) => ({
+        duration_min_max   : modules.trade.duration_min_max,
+        duration_units_list: modules.trade.duration_units_list,
+        expiry_date        : modules.trade.expiry_date,
+        expiry_type        : modules.trade.expiry_type,
+        onChange           : modules.trade.onChange,
+        server_time        : common.server_time,
+        start_date         : modules.trade.start_date,
+        start_time         : modules.trade.start_time,
+        symbol             : modules.trade.symbol,
+        validation_errors  : modules.trade.validation_errors,
+    })
+)(TradingDatePicker);

src/javascript/app_2/Modules/Trading/Components/Form/TimePicker/index.js

@@ -0,0 +1 @@
+export default from './trading_time_picker.jsx';