Merge pull request #71 from binary-com/dev

V20190520_0

README.md

@@ -1,11 +1,11 @@
 Deriv App
 =============
 
-This repository contains the static HTML, Javascript, CSS, and images content of the [DTrader](http://deriv.app) website.
+This repository contains the static HTML, Javascript, CSS, and images content of the [Deriv](http://deriv.app) website.
 
 ## Installation
 
-In order to work on your own version of the DTrader Javascript and CSS, please **fork this project**.
+In order to work on your own version of the Deriv Javascript and CSS, please **fork this project**.
 
 You will also need to install the following on your development machine:
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "deriv-app",
   "version": "3.8.0",
-  "description": "DTrader content",
+  "description": "Deriv content",
   "scripts": {
     "test": "grunt test",
     "livereload": "sudo -p 'enter password for sudo:' grunt livereload",
@@ -15,7 +15,7 @@
   "keywords": [
     "deriv"
   ],
-  "author": "DTrader",
+  "author": "Deriv",
   "license": "Apache License 2.0",
   "bugs": {
     "url": "https://github.com/binary-com/deriv-app/issues"
@@ -83,15 +83,15 @@
     "grunt-webpack": "3.1.3",
     "jsdom": "9.12.0",
     "jsdom-global": "2.1.1",
-    "load-grunt-config": "1.0.1",
+    "load-grunt-config": "1.0.2",
     "load-grunt-tasks": "3.5.2",
     "mocha": "5.2.0",
     "mock-local-storage": "1.1.7",
     "node-gettext": "2.0.0",
     "node-sass": "4.11.0",
     "postcss-scss": "0.4.1",
     "react-render-html": "0.6.0",
-    "react-svg-loader": "^2.1.0",
+    "react-svg-loader": "3.0.1",
     "sitemap": "1.13.0",
     "stylelint": "10.0.0",
     "stylelint-formatter-pretty": "1.0.3",
@@ -101,7 +101,7 @@
     "time-grunt": "1.4.0",
     "uglifyjs-webpack-plugin": "1.3.0",
     "webpack": "4.17.2",
-    "webpack-bundle-analyzer": "3.0.2",
+    "webpack-bundle-analyzer": "3.3.2",
     "webpack-dev-server": "3.1.14",
     "webpack-manifest-plugin": "2.0.4",
     "webpack-merge": "4.1.4",
@@ -126,7 +126,7 @@
     "react-router-dom": "5.0.0",
     "react-transition-group": "2.4.0",
     "sinon": "7.2.2",
-    "smartcharts-beta": "0.4.26",
+    "smartcharts-beta": "0.4.27",
     "tt-react-custom-scrollbars": "4.2.1-tt2",
     "url-polyfill": "1.0.9",
     "web-push-notifications": "3.2.15"

scripts/config/pages.js

@@ -3,5 +3,5 @@ module.exports = [
 
     // ==================== Section: "app" ====================
     // According to its section path ('app') would be saved to: /{lang}/index.html
-    ['index',                                   'app/app',                                   null,         'Trusted by traders since 2000',     'NOT-en',          'app'],
+    ['index',                                   'app/app',                                   null,         'Deriv App',     'NOT-en',          'app'],
 ];

scripts/render.js

@@ -204,7 +204,7 @@ const createContextBuilder = async (sections) => {
         ],
         css_files  : css_files_list[section],
         languages  : config.languages,
-        broker_name: 'DTrader',
+        broker_name: 'Deriv',
         static_hash: static_hash[section],
     });
 
@@ -240,7 +240,7 @@ async function compile(page) {
 
     const tasks = languages.map(async lang => {
         const model = {
-            website_name   : 'DTrader',
+            website_name   : 'Deriv',
             title          : page.title,
             layout         : page.layout,
             language       : lang.toUpperCase(),

src/javascript/_common/lib/push_notification.js

@@ -17,7 +17,7 @@ const BinaryPushwoosh = (() => {
                 logLevel                : 'error', // or info or debug
                 applicationCode         : 'D04E6-FA474',
                 safariWebsitePushID     : 'web.com.binary',
-                defaultNotificationTitle: 'DTrader',
+                defaultNotificationTitle: 'Deriv',
                 defaultNotificationImage: urlForCurrentDomain('https://style.binary.com/images/logo/logomark.png'),
             }]);
             initialised = true;

src/javascript/app/App/Components/Animations/fade-wrapper.jsx

@@ -0,0 +1,38 @@
+import PropTypes      from 'prop-types';
+import React          from 'react';
+import posed,
+{ PoseGroup }         from 'react-pose';
+
+const FadeDiv = posed.div({
+    enter: {
+        opacity   : 1,
+        transition: { duration: 300 },
+    },
+    exit: {
+        opacity   : 0,
+        transition: { duration: 300 },
+    },
+});
+
+const FadeWrapper = ({
+    children,
+    className,
+    keyname,
+    is_visible,
+}) => (
+    <PoseGroup>
+        {is_visible &&
+            <FadeDiv className={className} key={keyname}>
+                {children}
+            </FadeDiv>
+        }
+    </PoseGroup>
+);
+
+FadeWrapper.propTypes = {
+    children  : PropTypes.node,
+    is_visible: PropTypes.bool,
+    keyname   : PropTypes.string,
+};
+
+export { FadeWrapper };

src/javascript/app/App/Components/Animations/index.js

@@ -0,0 +1 @@
+export * from './fade-wrapper.jsx';

src/javascript/app/App/Components/Elements/ContractDrawer/contract-drawer.jsx

@@ -2,34 +2,64 @@ import classNames            from 'classnames';
 import PropTypes             from 'prop-types';
 import React, { Component }  from 'react';
 import { withRouter }        from 'react-router';
-import Localize              from 'App/Components/Elements/localize.jsx';
 import { Icon, IconBack }    from 'Assets/Common';
-import routes                from 'Constants/routes';
+import Localize              from 'App/Components/Elements/localize.jsx';
+import { UnderlyingIcon }    from 'App/Components/Elements/underlying-icon.jsx';
+import ContractAudit         from 'App/Components/Elements/PositionsDrawer/result-details.jsx';
+import ContractTypeCell      from 'App/Components/Elements/PositionsDrawer/contract-type-cell.jsx';
 import ProfitLossCardContent from 'Modules/Reports/Components/profit-loss-card-content.jsx';
-import MarketSymbolIconRow   from 'Modules/Reports/Components/market-symbol-icon-row.jsx';
 import ContractCardBody      from './contract-card-body.jsx';
 import ContractCardFooter    from './contract-card-footer.jsx';
 import ContractCardHeader    from './contract-card-header.jsx';
 import ContractCard          from './contract-card.jsx';
-import ContractAudit         from '../ContractAudit/contract-audit.jsx';
+import {
+    getDurationPeriod,
+    getDurationTime,
+    getDurationUnitText }    from '../../../../Stores/Modules/Portfolio/Helpers/details';
+import {
+    getEndTime,
+    isUserSold }             from '../../../../Stores/Modules/Contract/Helpers/logic';
 import Money                 from '../money.jsx';
 
 class ContractDrawer extends Component {
+    state = {
+        is_shade_on: false,
+    }
+
+    handleShade = (shade) => {
+        this.setState({ is_shade_on: shade });
+    }
+
     getBodyContent () {
         const {
             buy_price,
             currency,
+            exit_tick,
+            is_sold,
             payout,
             profit,
         } = this.props.contract_info;
+        const { contract_info } = this.props;
+        const exit_spot = isUserSold(contract_info) ? '-' : exit_tick;
 
         return (
-            <ContractCard contract_info={this.props.contract_info}>
+            <ContractCard contract_info={contract_info}>
                 <ContractCardHeader>
-                    <MarketSymbolIconRow
-                        show_description={true}
-                        payload={this.props.contract_info}
-                    />
+                    <div className={classNames(
+                        'contract-card__grid',
+                        'contract-card__grid-underlying-trade'
+                    )}
+                    >
+                        <div className='contract-card__underlying-name'>
+                            <UnderlyingIcon market={contract_info.underlying} />
+                            <span className='contract-card__symbol'>
+                                {contract_info.display_name}
+                            </span>
+                        </div>
+                        <div className='contract-card__type'>
+                            <ContractTypeCell type={contract_info.contract_type} />
+                        </div>
+                    </div>
                 </ContractCardHeader>
                 <ContractCardBody>
                     <ProfitLossCardContent
@@ -48,19 +78,28 @@ class ContractDrawer extends Component {
                             />
                         </span>
                     </div>
-                    <ContractAudit contract={this.props.contract_info} />
+                    <ContractAudit
+                        contract_info={contract_info}
+                        contract_end_time={getEndTime(contract_info)}
+                        is_shade_visible={this.handleShade}
+                        duration={getDurationTime(contract_info)}
+                        duration_unit={getDurationUnitText(getDurationPeriod(contract_info))}
+                        exit_spot={exit_spot}
+                        has_result={!!(is_sold)}
+                    />
                 </ContractCardFooter>
             </ContractCard>
         );
     }
 
     render() {
+        if (!this.props.contract_info) return null;
         const body_content = this.getBodyContent();
         return (
             <div className={classNames('contract-drawer', {})}>
                 <div
                     className='contract-drawer__heading'
-                    onClick={() => this.props.history.push(routes.reports)}
+                    onClick={() => this.props.history.goBack()}
                 >
                     <Icon icon={IconBack} />
                     <h2><Localize str={this.props.heading || 'Contract'} /></h2>

src/javascript/app/App/Components/Elements/Errors/error-boundary.jsx

@@ -1,15 +1,17 @@
-import PropTypes from 'prop-types';
-import React     from 'react';
+import PropTypes      from 'prop-types';
+import React          from 'react';
+import { connect }    from 'Stores/connect';
+import ErrorComponent from './index';
 
-export default class ErrorBoundary extends React.Component {
+class ErrorBoundary extends React.Component {
     constructor(props) {
         super(props);
         this.state = { hasError: false };
     }
 
     componentDidCatch = (error, info) => {
-        // eslint-disable-next-line no-underscore-dangle
-        window.__response_error = this.props.root_store;
+        if (window.TrackJS) window.TrackJS.console.log(this.props.root_store);
+
         this.setState({
             hasError: true,
             error,
@@ -18,12 +20,16 @@ export default class ErrorBoundary extends React.Component {
     };
 
     render = () => this.state.hasError ? (
-        <div className='error-box'>
-            {this.state.error.message}
-        </div>
+        <ErrorComponent message={this.state.error.message} should_show_refresh={true} />
     ) : this.props.children;
 }
 
 ErrorBoundary.propTypes = {
     root_store: PropTypes.object,
 };
+
+export default connect((store) => (
+    {
+        root_store: store,
+    }
+))(ErrorBoundary);

src/javascript/app/App/Components/Elements/ToastMessage/__tests__/toast.spec.jsx → src/javascript/app/App/Components/Elements/NotificationMessage/__tests__/notification.spec.jsx

@@ -2,13 +2,13 @@ import React                  from 'react';
 import { expect }             from 'chai';
 import { configure, shallow } from 'enzyme';
 import Adapter                from 'enzyme-adapter-react-16';
-import Toast                  from '../toast.jsx';
+import Notification           from '../notification.jsx';
 
 configure({ adapter: new Adapter() });
 
-describe('Toast', () => {
-    it('should render one <Toast /> component', () => {
-        const wrapper = shallow(<Toast />);
+describe('Notification', () => {
+    it('should render one <Notification /> component', () => {
+        const wrapper = shallow(<Notification />);
         expect(wrapper).to.have.length(1);
     });
 });

src/javascript/app/App/Components/Elements/ToastMessage/close-button.jsx → src/javascript/app/App/Components/Elements/NotificationMessage/close-button.jsx

@@ -1,16 +1,17 @@
 import PropTypes from 'prop-types';
 import React     from 'react';
 
-const CloseButton = ({ onClick }) => (
+const CloseButton = ({ onClick, className }) => (
     <button
-        className='toast__close-button'
+        className={className}
         type='button'
         onClick={onClick}
     />
 );
 
 CloseButton.propTypes = {
-    onClick: PropTypes.func.isRequired,
+    className: PropTypes.string,
+    onClick  : PropTypes.func.isRequired,
 };
 
 export default CloseButton;

src/javascript/app/App/Components/Elements/NotificationMessage/constants.js

@@ -0,0 +1,23 @@
+export const default_delay = 3000;
+
+export const max_display_notifications = 3;
+
+export const types = {
+    danger       : 'notification--danger',
+    info         : 'notification--info',
+    success      : 'notification--success',
+    warning      : 'notification--warning',
+    contract_sold: 'notification--info',
+};
+
+export const sortNotifications = (() => {
+    const notification_order = {
+        contract_sold: 1,
+        danger       : 2,
+        warning      : 3,
+        info         : 4,
+        success      : 5,
+    };
+
+    return (a, b) => notification_order[a.type] - notification_order[b.type];
+})();

src/javascript/app/App/Components/Elements/NotificationMessage/index.js

@@ -0,0 +1,2 @@
+export default from './notification.jsx';
+export * from './constants.js';