Merge pull request #1 from msamprz/timepicker-bug-fixes

Timepicker rounding fix (must differ from binary-static)
zaki-hanafiah · May 3, 2019 · 45ecfdd · 45ecfdd
2 parents e6d41dc + a663e71
commit 45ecfdd
Show file tree

Hide file tree

Showing 38 changed files with 421 additions and 363 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -137,7 +137,7 @@
     "react-transition-group": "2.4.0",
     "scriptjs": "2.5.8",
     "sinon": "7.2.2",
-    "smartcharts-beta": "0.4.22",
+    "smartcharts-beta": "0.4.23",
     "tt-react-custom-scrollbars": "4.2.1-tt2",
     "url-polyfill": "1.0.9",
     "web-push-notifications": "3.2.15"

diff --git a/scripts/config/pages.js b/scripts/config/pages.js
@@ -128,6 +128,6 @@ module.exports = [
     ['graduates',                               'landing_pages/graduate_program',                 null,        'Binary.com Graduate Program',        'NOT-en'],
     // ['hackathon',                               'landing_pages/hackathon',                     null,        'Hackathon Competition',              'NOT-en'],
     ['introducing-usb',                            'landing_pages/usb',                           null,        'Introducing USB',                    'NOT-en'],
-    ['binarygrid',                                 'landing_pages/binary_grid',                   null,        'Our New Mobile Trading App',         'NOT-en'],
+    ['binary-grid',                                'landing_pages/binary_grid',                   null,        'Our New Mobile Trading App',         'NOT-en'],
     ['landing/signup-frame',                       'landing_pages/signup_frame',                  null,        'Sign up'],
 ];
diff --git a/...ownload/BIEL_Pillar_3_Report_20180601.pdf → ...ownload/BIEL_Pillar_3_Report_20190403.pdf b/...ownload/BIEL_Pillar_3_Report_20180601.pdf → ...ownload/BIEL_Pillar_3_Report_20190403.pdf
diff --git a/src/images/app_2/header/symbol.svg b/src/images/app_2/header/symbol.svg
diff --git a/src/javascript/_autogenerated/it.js b/src/javascript/_autogenerated/it.js
diff --git a/src/javascript/app_2/App/Components/Layout/Header/menu-links.jsx b/src/javascript/app_2/App/Components/Layout/Header/menu-links.jsx
@@ -16,7 +16,7 @@ const MenuLinks = ({ is_logged_in, items }) => (
                         null
                         :
                         <BinaryLink key={idx} to={item.link_to} className='header__menu-link' active_class='header__menu-link--active'>
-                            <span title={item.text} className='header__menu-link-text'>{item.icon}{item.text}</span>
+                            <span title={item.text} className='header__menu-link-text'>{item.icon}{item.text}{item.logo}</span>
                         </BinaryLink>
                 ))
             }

diff --git a/src/javascript/app_2/App/Constants/header-links.js b/src/javascript/app_2/App/Constants/header-links.js
@@ -1,14 +1,12 @@
-import React        from 'react';
-import { localize } from '_common/localize';
-import {
-    // IconStatement,
-    IconTrade }     from 'Assets/Header/NavBar/index';
-import { routes }   from 'Constants/index';
+import React             from 'react';
+import { localize }      from '_common/localize';
+// import { IconStatement } from 'Assets/Header/NavBar/index';
+import { routes }        from 'Constants/index';
 
 const header_links = [
     {
-        icon   : <IconTrade className='header__icon' />,
-        text   : localize('Trade'),
+        logo   : <div className='header__logo'>{localize('BETA')}</div>,
+        text   : localize('BinaryNex'),
         link_to: routes.trade,
     },
     // {

diff --git a/src/javascript/app_2/Modules/Trading/Components/Elements/purchase-button.jsx b/src/javascript/app_2/Modules/Trading/Components/Elements/purchase-button.jsx
@@ -12,21 +12,26 @@ const PurchaseButton = ({
     is_disabled,
     is_high_low,
     is_loading,
+    should_fade,
     onClickPurchase,
     type,
 }) => {
     const getIconType = () => {
-        if (is_loading) return '';
+        if (!should_fade && is_loading) return '';
         return (is_high_low) ? `${type.toLowerCase()}_barrier` : type.toLowerCase();
     };
+
     return (
         <Button
             is_disabled={is_contract_mode || is_disabled}
             id={`purchase_${type}`}
             className={classNames(
                 'btn-purchase',
-                { 'btn-purchase--disabled': (is_contract_mode || is_disabled) && !is_loading },
-                { 'btn-purchase--animated': is_loading })}
+                {
+                    'btn-purchase--disabled'       : (is_contract_mode || is_disabled) && !is_loading,
+                    'btn-purchase--animated--slide': is_loading && !should_fade,
+                    'btn-purchase--animated--fade' : is_loading && should_fade,
+                })}
             has_effect
             onClick={() => { onClickPurchase(info.id, info.stake, type); }}
         >
@@ -40,14 +45,14 @@ const PurchaseButton = ({
                     </div>
                     <div className='btn-purchase__text_wrapper'>
                         <span className='btn-purchase__text'>
-                            {!is_loading && localize('[_1]', getContractTypeDisplay(type, is_high_low))}
+                            {(!should_fade && is_loading) ? '' : localize('[_1]', getContractTypeDisplay(type, is_high_low))}
                         </span>
                     </div>
                 </div>
                 <div className='btn-purchase__effect-detail' />
                 <div className='btn-purchase__info btn-purchase__info--right'>
                     <div className='btn-purchase__text_wrapper'>
-                        <span className='btn-purchase__text'>{is_loading || is_disabled ? '' : info.returns}</span>
+                        <span className='btn-purchase__text'>{!(is_loading || is_disabled) ? info.returns : ''}</span>
                     </div>
                 </div>
             </React.Fragment>

diff --git a/src/javascript/app_2/Modules/Trading/Components/Elements/purchase-fieldset.jsx b/src/javascript/app_2/Modules/Trading/Components/Elements/purchase-fieldset.jsx
@@ -12,15 +12,15 @@ import PurchaseButton from 'Modules/Trading/Components/Elements/purchase-button.
 class PurchaseFieldset extends React.PureComponent {
     state = {
         show_tooltip: false,
+        should_fade : false,
     }
 
-    onMouseEnter = () => {
-        this.setState({ show_tooltip: true });
+    componentDidMount() {
+        this.setState({ should_fade: true });
     }
 
-    onMouseLeave = () => {
-        this.setState({ show_tooltip: false });
-    }
+    onMouseEnter = () => this.setState({ show_tooltip: true });
+    onMouseLeave = () => this.setState({ show_tooltip: false });
 
     render() {
         const {
@@ -50,6 +50,7 @@ class PurchaseFieldset extends React.PureComponent {
                 is_high_low={is_high_low}
                 is_loading={is_loading}
                 onClickPurchase={onClickPurchase}
+                should_fade={this.state.should_fade}
                 type={type}
             />
         );
@@ -68,6 +69,7 @@ class PurchaseFieldset extends React.PureComponent {
                         proposal_info={info}
                         has_increased={info.has_increased}
                         is_loading={is_loading}
+                        should_fade={this.state.should_fade}
                         is_visible={!is_contract_mode}
                     />
                     <div

diff --git a/src/javascript/app_2/Modules/Trading/Components/Form/Purchase/contract-info.jsx b/src/javascript/app_2/Modules/Trading/Components/Form/Purchase/contract-info.jsx
@@ -1,56 +1,71 @@
-import classNames        from 'classnames';
-import PropTypes         from 'prop-types';
-import React             from 'react';
-import { localize }      from '_common/localize';
-import Money             from 'App/Components/Elements/money.jsx';
-import Tooltip           from 'App/Components/Elements/tooltip.jsx';
-import { IconPriceMove } from 'Assets/Trading/icon-price-move.jsx';
+import classNames            from 'classnames';
+import PropTypes             from 'prop-types';
+import React                 from 'react';
+import { getLocalizedBasis } from 'Stores/Modules/Trading/Constants/contract';
+import { localize }          from '_common/localize';
+import Money                 from 'App/Components/Elements/money.jsx';
+import Tooltip               from 'App/Components/Elements/tooltip.jsx';
+import { IconPriceMove }     from 'Assets/Trading/icon-price-move.jsx';
 
 const ContractInfo = ({
     basis,
     currency,
     has_increased,
     is_loading,
+    should_fade,
     is_visible,
     proposal_info,
 }) => {
-    const is_loaded_with_error = proposal_info.has_error || !proposal_info.id;
+    const localized_basis = getLocalizedBasis();
+    const stakeOrPayout = () => {
+        switch (basis) {
+            case 'stake':
+                return localized_basis.payout;
+            case 'payout':
+                return localized_basis.stake;
+            default:
+                return basis;
+        }
+    };
 
+    const has_error_or_not_loaded = proposal_info.has_error || !proposal_info.id;
     return (
-        <React.Fragment>
-            {is_loading ?
-                <div className='trade-container__loader'>
-                    <div className='trade-container__loader--loading' />
+        <div className='trade-container__price'>
+            <div className={classNames(
+                'trade-container__price-info',
+                {
+                    'trade-container__price-info--disabled': has_error_or_not_loaded,
+                    'trade-container__price-info--slide'   : is_loading && !should_fade,
+                    'trade-container__price-info--fade'    : is_loading && should_fade,
+                })}
+            >
+                <div className='trade-container__price-info-basis'>
+                    {has_error_or_not_loaded
+                        ? stakeOrPayout()
+                        : localize('[_1]', proposal_info.obj_contract_basis.text)
+                    }
                 </div>
-                :
-                <div className='trade-container__price'>
-                    <div className={classNames('trade-container__price-info', { 'trade-container__price-info--disabled': is_loaded_with_error })}>
-                        <div className='trade-container__price-info-basis'>{is_loaded_with_error ? basis : localize('[_1]', proposal_info.obj_contract_basis.text)}</div>
-                        <div className='trade-container__price-info-value'>
-                            {is_loaded_with_error ?
-                                ''
-                                :
-                                <Money amount={proposal_info.obj_contract_basis.value} className='trade-container__price-info-currency' currency={currency} />
-                            }
-                        </div>
-                        {is_visible &&
-                        <div className='trade-container__price-info-movement'>
-                            {!is_loaded_with_error && has_increased !== null && <IconPriceMove type={has_increased ? 'profit' : 'loss'} />}
-                        </div>
-                        }
-                    </div>
-                    <span>
-                        <Tooltip
-                            alignment='left'
-                            className={classNames('trade-container__price-tooltip', { 'trade-container__price-tooltip--disabled': is_loaded_with_error })}
-                            classNameIcon='trade-container__price-tooltip-i'
-                            icon='info'
-                            message={is_loaded_with_error ? '' : proposal_info.message}
-                        />
-                    </span>
+                <div className='trade-container__price-info-value'>
+                    {!has_error_or_not_loaded &&
+                    <Money amount={proposal_info.obj_contract_basis.value} className='trade-container__price-info-currency' currency={currency} />
+                    }
                 </div>
-            }
-        </React.Fragment>
+                {is_visible &&
+                <div className='trade-container__price-info-movement'>
+                    {(!has_error_or_not_loaded && has_increased !== null) &&
+                        <IconPriceMove type={has_increased ? 'profit' : 'loss'} />
+                    }
+                </div>
+                }
+            </div>
+            <Tooltip
+                alignment='left'
+                className={classNames('trade-container__price-tooltip', { 'trade-container__price-tooltip--disabled': has_error_or_not_loaded })}
+                classNameIcon='trade-container__price-tooltip-i'
+                icon='info'
+                message={has_error_or_not_loaded ? '' : proposal_info.message}
+            />
+        </div>
     );
 };
 ContractInfo.propTypes = {

diff --git a/src/javascript/app_2/Modules/Trading/Containers/purchase.jsx b/src/javascript/app_2/Modules/Trading/Containers/purchase.jsx
@@ -21,17 +21,17 @@ const Purchase = ({
     trade_types,
     validation_errors,
 }) => {
+    const is_high_low = /high_low/.test(contract_type.toLowerCase());
+    const isLoading = info => {
+        const has_validation_error = Object.values(validation_errors).some(e => e.length);
+        return !has_validation_error && !info.has_error && !info.id;
+    };
+
     const components = [];
     Object.keys(trade_types).map((type, index) => {
-        const info        = proposal_info[type] || {};
-        const is_disabled = !is_purchase_enabled
-            || !is_trade_enabled
-            || !info.id
-            || !is_client_allowed_to_visit;
-        const is_high_low         = /high_low/.test(contract_type.toLowerCase());
-        const is_validation_error = Object.values(validation_errors).some(e => e.length);
-        const is_loading          = !is_validation_error && !info.has_error && !info.id;
-        const is_proposal_error   = info.has_error && !info.has_error_details;
+        const info              = proposal_info[type] || {};
+        const is_disabled       = !is_purchase_enabled || !is_trade_enabled || !info.id || !is_client_allowed_to_visit;
+        const is_proposal_error = info.has_error && !info.has_error_details;
 
         const purchase_fieldset = (
             <PurchaseFieldset
@@ -43,7 +43,7 @@ const Purchase = ({
                 is_contract_mode={is_contract_mode}
                 is_disabled={is_disabled}
                 is_high_low={is_high_low}
-                is_loading={is_loading}
+                is_loading={isLoading(info)}
                 // is_purchase_confirm_on={is_purchase_confirm_on}
                 is_proposal_error={is_proposal_error}
                 // is_purchase_locked={is_purchase_locked}
@@ -53,13 +53,17 @@ const Purchase = ({
                 type={type}
             />
         );
-        const contract_type_position = getContractTypePosition(type);
-        if (contract_type_position === 'top') {
-            components.unshift(purchase_fieldset);
-        } else if (contract_type_position === 'bottom') {
-            components.push(purchase_fieldset);
-        } else {
-            components.push(purchase_fieldset);
+
+        switch (getContractTypePosition(type)) {
+            case 'top':
+                components.unshift(purchase_fieldset);
+                break;
+            case 'bottom':
+                components.push(purchase_fieldset);
+                break;
+            default:
+                components.push(purchase_fieldset);
+                break;
         }
     });
 

diff --git a/src/javascript/app_2/Stores/Modules/Trading/Helpers/end-time.js b/src/javascript/app_2/Stores/Modules/Trading/Helpers/end-time.js
@@ -1,7 +1,7 @@
 const getClosestTime = (
     time,
     interval,
-) => time.minute(Math.round(time.minute() / interval) * interval);
+) => time.minute((Math.ceil(time.minute() / interval) * interval));
 
 export const getSelectedTime = (
     server_time,

diff --git a/src/sass/app_2/_common/layout/header.scss b/src/sass/app_2/_common/layout/header.scss
@@ -41,6 +41,7 @@
             display: flex;
             justify-content: center;
             align-items: center;
+            padding-right: 0.8em;
         }
         &--notify-toggle {
             order: 2;
@@ -128,6 +129,19 @@
             }
         }
     }
+    &__logo {
+        background-color: $COLOR_RED;
+        border-radius: 10px;
+        color: $COLOR_WHITE;
+        display: inline-block;
+        font-size: 1.4rem;
+        font-weight: normal;
+        height: 20px;
+        line-height: 1.43;
+        margin-left: 0.8rem;
+        text-align: center;
+        width: 50px;
+    }
     &__icon {
         margin-right: 0.8em;
     }