Merge pull request #3 from msamprz/reports-redesign

Reports redesign
msamprz · Jun 13, 2019 · 1389326 · 1389326
2 parents 7e0c0d8 + 39d7f39
commit 1389326
Show file tree

Hide file tree

Showing 20 changed files with 129 additions and 69 deletions.
diff --git a/src/javascript/app/App/Components/Elements/Popover/popover.jsx b/src/javascript/app/App/Components/Elements/Popover/popover.jsx
@@ -26,7 +26,7 @@ class Popover extends React.PureComponent {
             is_open         : !this.state.is_open && Boolean(this.props.message),
             target_rectangle: this.target_reference.current.getBoundingClientRect(),
         });
-    }
+    };
 
     render() {
         const {
@@ -35,6 +35,7 @@ class Popover extends React.PureComponent {
             classNameBubble,
             classNameTarget,
             classNameTargetIcon,
+            disable_target_icon,
             has_error,
             icon,
             margin,
@@ -49,11 +50,13 @@ class Popover extends React.PureComponent {
                 onMouseLeave={this.toggleIsOpen}
             >
                 <div className={classNames(classNameTarget, 'popover__target')} ref={this.target_reference}>
-                    <i className={message ? 'popover__target__icon' : 'popover__target__icon--disabled'}>
-                        {(icon === 'info')     && <Icon icon='IconInfoOutline' className={icon_class_name} /> }
-                        {(icon === 'question') && <Icon icon='IconQuestion'    className={icon_class_name} />}
-                        {(icon === 'dot')      && <Icon icon='IconRedDot'      className={icon_class_name} />}
-                    </i>
+                    { !disable_target_icon &&
+                        <i className={message ? 'popover__target__icon' : 'popover__target__icon--disabled'}>
+                            {(icon === 'info')     && <Icon icon='IconInfoOutline' className={icon_class_name} /> }
+                            {(icon === 'question') && <Icon icon='IconQuestion'    className={icon_class_name} />}
+                            {(icon === 'dot')      && <Icon icon='IconRedDot'      className={icon_class_name} />}
+                        </i>
+                    }
 
                     { children }
                 </div>
@@ -79,6 +82,7 @@ Popover.propTypes = {
     classNameBubble    : PropTypes.string,
     classNameTarget    : PropTypes.string,
     classNameTargetIcon: PropTypes.string,
+    disable_target_icon: PropTypes.bool,
     has_error          : PropTypes.bool,
     icon               : PropTypes.string,
     margin             : PropTypes.number,

diff --git a/src/javascript/app/App/Components/Elements/VerticalTabs/vertical-tab-content-container.jsx b/src/javascript/app/App/Components/Elements/VerticalTabs/vertical-tab-content-container.jsx
@@ -24,9 +24,12 @@ class VerticalTabContentContainer extends React.PureComponent {
                     })}
                     >
                         {
-                            action_bar.map(({ icon, onClick, title }) => (
-                                <Icon className='vertical-tab__action-bar--icon' key={title} icon={icon} onClick={onClick} />
-                            ))
+                            action_bar.map(({ component, icon, onClick, title }) => {
+                                const Component = component;
+                                return (
+                                    component ? <Component key={title} /> : <Icon className='vertical-tab__action-bar--icon' key={title} icon={icon} onClick={onClick} />
+                                );
+                            })
                         }
                     </div>
                 }

diff --git a/src/javascript/app/App/Components/Elements/VerticalTabs/vertical-tab.jsx b/src/javascript/app/App/Components/Elements/VerticalTabs/vertical-tab.jsx
@@ -60,9 +60,10 @@ class VerticalTab extends React.PureComponent {
 VerticalTab.propTypes = {
     action_bar: PropTypes.arrayOf(
         PropTypes.shape({
-            icon   : PropTypes.string,
-            onClick: PropTypes.func,
-            title  : PropTypes.string,
+            component: PropTypes.func,
+            icon     : PropTypes.string,
+            onClick  : PropTypes.func,
+            title    : PropTypes.string,
         })
     ),
     action_bar_classname: PropTypes.string,

diff --git a/src/javascript/app/Assets/Reports/icon-demo.jsx b/src/javascript/app/Assets/Reports/icon-demo.jsx
@@ -14,4 +14,4 @@ IconDemo.propTypes = {
     onClick      : PropTypes.func,
 };
 
-export { IconDemo };
+export default IconDemo;
diff --git a/src/javascript/app/Assets/icon.jsx b/src/javascript/app/Assets/icon.jsx
@@ -36,7 +36,7 @@ class Icon extends React.PureComponent {
             IconWarning           : React.lazy(() => import('./Common/icon-warning.jsx')),
             IconWip               : React.lazy(() => import('./Common/icon-wip.jsx')),
             IconWithdrawal        : React.lazy(() => import('./Common/icon-withdrawal.jsx')),
-            
+
             // Contract
             ContractIconClose: React.lazy(() => import('./Contract/icon-close.jsx')),
             IconEndTime      : React.lazy(() => import('./Contract/icon-end-time.jsx')),
@@ -61,6 +61,7 @@ class Icon extends React.PureComponent {
             IconTrade           : React.lazy(() => import('./Header/NavBar/icon-trade.jsx')),
 
             // Reports
+            IconDemo         : React.lazy(() => import('./Reports/icon-demo.jsx')),
             IconOpenPositions: React.lazy(() => import('./Reports/icon-open-positions.jsx')),
             IconProfitTable  : React.lazy(() => import('./Reports/icon-profit-table.jsx')),
             IconStatement    : React.lazy(() => import('./Reports/icon-statement.jsx')),
@@ -105,7 +106,7 @@ class Icon extends React.PureComponent {
 
         const IconLazy = this.icons[this.props.icon];
         if (!IconLazy) return <div />;
-        
+
         return (
             <React.Suspense fallback={<div />}>
                 <IconLazy {...options} />

diff --git a/src/javascript/app/Constants/contract.js b/src/javascript/app/Constants/contract.js
@@ -127,5 +127,5 @@ const getContractConfig = is_high_low => ({
     ...getUnsupportedContracts(),
 });
 
-export const getContractTypeDisplay = (type, is_high_low = false) => (getContractConfig(is_high_low)[type] ? getContractConfig(is_high_low)[type].name : '');
-export const getContractTypePosition = (type, is_high_low = false) => (getContractConfig(is_high_low)[type] ? getContractConfig(is_high_low)[type].position : 'top');
+export const getContractTypeDisplay = (type, is_high_low = false) => (getContractConfig(is_high_low)[type.toUpperCase()] ? getContractConfig(is_high_low)[type.toUpperCase()].name : '');
+export const getContractTypePosition = (type, is_high_low = false) => (getContractConfig(is_high_low)[type.toUpperCase()] ? getContractConfig(is_high_low)[type.toUpperCase()].position : 'top');
diff --git a/src/javascript/app/Modules/Reports/Components/market-symbol-icon-row.jsx b/src/javascript/app/Modules/Reports/Components/market-symbol-icon-row.jsx
@@ -1,8 +1,10 @@
-import PropTypes                from 'prop-types';
-import React                    from 'react';
-import { UnderlyingIcon }       from 'App/Components/Elements/underlying-icon.jsx';
-import Icon                     from 'Assets/icon.jsx';
-import { getMarketInformation } from '../Helpers/market-underyling';
+import PropTypes                  from 'prop-types';
+import React                      from 'react';
+import { UnderlyingIcon }         from 'App/Components/Elements/underlying-icon.jsx';
+import { Popover }                from 'App/Components/Elements/Popover';
+import Icon                       from 'Assets/icon.jsx';
+import { getContractTypeDisplay } from 'Constants';
+import { getMarketInformation }   from '../Helpers/market-underyling';
 
 const MarketSymbolIconRow = ({ payload, show_description }) => {
     const should_show_category_icon = typeof payload.shortcode === 'string';
@@ -12,12 +14,26 @@ const MarketSymbolIconRow = ({ payload, show_description }) => {
         return (
             <div className='market-symbol-icon'>
                 <div className='market-symbol-icon-name'>
-                    <UnderlyingIcon market={market_information.underlying} />
+                    <Popover
+                        classNameBubble='market-symbol-icon__tooltip'
+                        alignment='top'
+                        message={payload.display_name}
+                        disable_target_icon
+                    >
+                        <UnderlyingIcon market={market_information.underlying} />
+                    </Popover>
                     {show_description && payload.display_name}
                 </div>
 
                 <div className='market-symbol-icon-category'>
-                    <Icon icon='IconTradeType' type={market_information.category} />
+                    <Popover
+                        classNameBubble='market-symbol-icon__tooltip'
+                        alignment='top'
+                        message={getContractTypeDisplay(market_information.category)}
+                        disable_target_icon
+                    >
+                        <Icon icon='IconTradeType' type={market_information.category} />
+                    </Popover>
                     {show_description && market_information.category}
                 </div>
             </div>

diff --git a/src/javascript/app/Modules/Reports/Containers/reports.jsx b/src/javascript/app/Modules/Reports/Containers/reports.jsx
@@ -62,8 +62,8 @@ class Reports extends React.Component {
                 title: localize('Close'),
             },
             {
-                icon : () => <WalletInformation />,
-                title: 'Hey!',
+                component: () => <WalletInformation />,
+                title    : 'Hey!',
             },
         ];
         return (

diff --git a/src/javascript/app/Modules/Reports/Containers/wallet-information.jsx b/src/javascript/app/Modules/Reports/Containers/wallet-information.jsx
@@ -3,7 +3,6 @@ import Icon         from 'Assets/icon.jsx';
 import Label        from 'App/Components/Elements/Label/label.jsx';
 import Localize     from 'App/Components/Elements/localize.jsx';
 import Money        from 'App/Components/Elements/money.jsx';
-import { IconDemo } from 'Assets/Reports/icon-demo.jsx';
 import { connect }  from 'Stores/connect';
 
 const WalletInformation = ({
@@ -14,7 +13,7 @@ const WalletInformation = ({
 }) => (
     <div className='account-wallet'>
         {!is_virtual && <Icon icon='IconAccountsCurrency' type={currency.toLowerCase()} />}
-        {is_virtual && <IconDemo />}
+        {is_virtual && <Icon icon='IconDemo' />}
         <span className='description'>
             <Localize str={`${is_virtual ? 'Practice' : currency.toUpperCase()} wallet`} />
         </span>

diff --git a/src/javascript/app/Modules/Reports/Helpers/market-underyling.js b/src/javascript/app/Modules/Reports/Helpers/market-underyling.js
@@ -5,7 +5,7 @@ export const getMarketInformation = (payload) => {
     };
 
     const pattern = new RegExp('^([A-Z]+)_((OTC_[A-Z0-9]+)|R_[\\d]{2,3}|[A-Z]+)_'); // Used to get market name from shortcode
-    const extracted = pattern.exec(payload.shortcode);
+    const extracted = pattern.exec(typeof payload === 'string' ? payload : payload.shortcode);
     if (extracted !== null) {
         market_info.category   = extracted[1].toLowerCase();
         market_info.underlying = extracted[2];

diff --git a/src/javascript/app/Stores/Modules/Portfolio/Helpers/__tests__/format-response.js b/src/javascript/app/Stores/Modules/Portfolio/Helpers/__tests__/format-response.js
@@ -3,19 +3,22 @@ import React                       from 'react';
 import { formatPortfolioPosition } from '../format-response';
 
 describe('formatPortfolioPosition', () => {
+    const mock_active_symbols = [ { display_name: 'Volatility 25 Index', symbol: 'R_25' } ];
     const portfolio_pos = {
         buy_price     : 2500.5,
         contract_id   : 1234,
         contract_type : 'ASIANU',
         longcode      : 'test \n test \n test',
         payout        : 3500.1,
         symbol        : 'R_25',
+        shortcode     : 'ASIANU_R_25_',
         transaction_id: 5678,
     };
 
     it('should return an object with values in object passed as argument', () => {
-        expect(formatPortfolioPosition(portfolio_pos)).to.eql({
+        expect(formatPortfolioPosition(portfolio_pos, mock_active_symbols)).to.eql({
             details        :'test <br /> test <br /> test',
+            display_name   :'Volatility 25 Index',
             id             : 1234,
             indicative     : 0,
             is_unsupported : true,

diff --git a/src/javascript/app/Stores/Modules/Portfolio/Helpers/format-response.js b/src/javascript/app/Stores/Modules/Portfolio/Helpers/format-response.js
@@ -1,12 +1,19 @@
 import { getUnsupportedContracts } from 'Constants';
+import { getSymbolDisplayName }    from '../../Trading/Helpers/active-symbols';
+import { getMarketInformation }    from '../../../../Modules/Reports/Helpers/market-underyling';
 
-export const formatPortfolioPosition = (portfolio_pos) => {
-    const purchase = parseFloat(portfolio_pos.buy_price);
-    const payout   = parseFloat(portfolio_pos.payout);
+export const formatPortfolioPosition = (portfolio_pos, active_symbols = []) => {
+    const purchase     = parseFloat(portfolio_pos.buy_price);
+    const payout       = parseFloat(portfolio_pos.payout);
+    const display_name = getSymbolDisplayName(
+        active_symbols,
+        getMarketInformation(portfolio_pos.shortcode).underlying
+    );
 
     return {
         contract_info : portfolio_pos,
         details       : portfolio_pos.longcode.replace(/\n/g, '<br />'),
+        display_name,
         id            : portfolio_pos.contract_id,
         indicative    : 0,
         payout,

diff --git a/src/javascript/app/Stores/Modules/Portfolio/portfolio-store.js b/src/javascript/app/Stores/Modules/Portfolio/portfolio-store.js
@@ -51,7 +51,7 @@ export default class PortfolioStore extends BaseStore {
         this.error = '';
         if (response.portfolio.contracts) {
             this.positions = response.portfolio.contracts
-                .map(pos => formatPortfolioPosition(pos))
+                .map(pos => formatPortfolioPosition(pos, this.root_store.modules.trade.active_symbols))
                 .sort((pos1, pos2) => pos2.reference - pos1.reference); // new contracts first
         }
     }
@@ -187,7 +187,7 @@ export default class PortfolioStore extends BaseStore {
 
     @action.bound
     pushNewPosition(new_pos) {
-        this.positions.unshift(formatPortfolioPosition(new_pos));
+        this.positions.unshift(formatPortfolioPosition(new_pos, this.root_store.modules.trade.active_symbols));
     }
 
     @action.bound

diff --git a/src/javascript/app/Stores/Modules/Profit/Helpers/format-response.js b/src/javascript/app/Stores/Modules/Profit/Helpers/format-response.js
@@ -1,15 +1,21 @@
-import { formatMoney } from '_common/base/currency_base';
-import { toMoment }    from 'Utils/Date';
+import { formatMoney }          from '_common/base/currency_base';
+import { toMoment }             from 'Utils/Date';
+import { getMarketInformation } from '../../../../Modules/Reports/Helpers/market-underyling';
+import { getSymbolDisplayName } from '../../Trading/Helpers/active-symbols';
 
-export const formatProfitTableTransactions = (transaction, currency) => {
-    const format_string = 'DD MMM YYYY - HH:mm:ss';
-    const purchase_time = `${toMoment(+transaction.purchase_time).format(format_string)  }`;
-    const sell_time     = `${toMoment(+transaction.sell_time).format(format_string)  }`;
-    const payout        = parseFloat(transaction.payout);
-    const sell_price    = parseFloat(transaction.sell_price);
-    const buy_price     = parseFloat(transaction.buy_price);
-    const profit_loss  = formatMoney(currency, Number(sell_price - buy_price), true);
+export const formatProfitTableTransactions = (transaction, currency, active_symbols = []) => {
+    const format_string           = 'DD MMM YYYY - HH:mm:ss';
+    const purchase_time           = `${toMoment(+transaction.purchase_time).format(format_string)}`;
+    const sell_time               = `${toMoment(+transaction.sell_time).format(format_string)}`;
+    const payout                  = parseFloat(transaction.payout);
+    const sell_price              = parseFloat(transaction.sell_price);
+    const buy_price               = parseFloat(transaction.buy_price);
+    const profit_loss             = formatMoney(currency, Number(sell_price - buy_price), true);
     const should_exclude_currency = true;
+    const display_name            = getSymbolDisplayName(
+        active_symbols,
+        getMarketInformation(transaction.shortcode).underlying
+    );
 
     return {
         ...transaction,
@@ -20,6 +26,7 @@ export const formatProfitTableTransactions = (transaction, currency) => {
             profit_loss,
             sell_time,
             purchase_time,
+            display_name,
         },
     };
 };
diff --git a/src/javascript/app/Stores/Modules/Profit/profit-store.js b/src/javascript/app/Stores/Modules/Profit/profit-store.js
@@ -63,6 +63,7 @@ export default class ProfitTableStore extends BaseStore {
             .map(transaction => formatProfitTableTransactions(
                 transaction,
                 this.root_store.client.currency,
+                this.root_store.modules.trade.active_symbols,
             ));
 
         this.data           = [...this.data, ...formatted_transactions];

diff --git a/src/javascript/app/Stores/Modules/Statement/Helpers/__tests__/format-response.spec.js b/src/javascript/app/Stores/Modules/Statement/Helpers/__tests__/format-response.spec.js
@@ -6,7 +6,7 @@ describe('formatStatementTransaction', () => {
     const constant = {
         id: 1234,
         action_type: 'buy',
-    }
+    };
 
     const currency = 'USD';
     let transaction = {
@@ -23,18 +23,19 @@ describe('formatStatementTransaction', () => {
     };
 
     let expected_result = {
-        action     : toTitleCase(constant.action_type),
-        action_type: constant.action_type,
-        date       : '29 Nov 1973 - 21:33:09',
-        refid      : constant.id,
-        payout     : '1,000.00',
-        amount     : '2,000.00',
-        balance    : '3,000.00',
-        desc       : 'test <br /> test <br /> test',
-        id         : constant.id,
-        app_id     : constant.id,
-        shortcode  : 'shortcode',
-    }
+        action      : toTitleCase(constant.action_type),
+        action_type : constant.action_type,
+        date        : '29 Nov 1973 - 21:33:09',
+        display_name: '',
+        refid       : constant.id,
+        payout      : '1,000.00',
+        amount      : '2,000.00',
+        balance     : '3,000.00',
+        desc        : 'test <br /> test <br /> test',
+        id          : constant.id,
+        app_id      : constant.id,
+        shortcode   : 'shortcode',
+    };
 
     it('should return an object with values of object passed as argument', () => {
         expect(formatStatementTransaction(transaction, currency)).to.eql(expected_result);

diff --git a/src/javascript/app/Stores/Modules/Statement/Helpers/format-response.js b/src/javascript/app/Stores/Modules/Statement/Helpers/format-response.js
@@ -1,27 +1,35 @@
-import { formatMoney } from '_common/base/currency_base';
-import { localize }    from '_common/localize';
-import { toTitleCase } from '_common/string_util';
-import { toMoment }    from 'Utils/Date';
+import { formatMoney }          from '_common/base/currency_base';
+import { localize }             from '_common/localize';
+import { toTitleCase }          from '_common/string_util';
+import { toMoment }             from 'Utils/Date';
+import { getSymbolDisplayName } from '../../Trading/Helpers/active-symbols';
+import { getMarketInformation } from '../../../../Modules/Reports/Helpers/market-underyling';
 
-export const formatStatementTransaction = (transaction, currency) => {
-    const format_string = 'DD MMM YYYY - HH:mm:ss';
-    const transaction_time   = toMoment(transaction.transaction_time).format(format_string);
-    const payout     = parseFloat(transaction.payout);
-    const amount     = parseFloat(transaction.amount);
-    const balance    = parseFloat(transaction.balance_after);
+export const formatStatementTransaction = (transaction, currency, active_symbols = []) => {
+    const format_string           = 'DD MMM YYYY - HH:mm:ss';
+    const transaction_time        = toMoment(transaction.transaction_time).format(format_string);
+    const payout                  = parseFloat(transaction.payout);
+    const amount                  = parseFloat(transaction.amount);
+    const balance                 = parseFloat(transaction.balance_after);
     const should_exclude_currency = true;
+    const shortcode               = ['buy', 'sell'].includes(transaction.action_type) ? transaction.shortcode : null;
+    const display_name            = shortcode ? getSymbolDisplayName(
+        active_symbols,
+        getMarketInformation(shortcode).underlying
+    ) : '';
 
     return {
         action     : localize(toTitleCase(transaction.action_type) /* localize-ignore */), // handled in static_strings_app.js: 'Buy', 'Sell', 'Deposit', 'Withdrawal'
         date       : transaction_time,
+        display_name,
         refid      : transaction.transaction_id,
         payout     : isNaN(payout) ? '-' : formatMoney(currency, payout, should_exclude_currency),
         amount     : isNaN(amount) ? '-' : formatMoney(currency, amount, should_exclude_currency),
         balance    : isNaN(balance) ? '-' : formatMoney(currency, balance, should_exclude_currency),
         desc       : transaction.longcode.replace(/\n/g, '<br />'),
         id         : transaction.contract_id,
         app_id     : transaction.app_id,
-        shortcode  : ['buy', 'sell'].includes(transaction.action_type) ? transaction.shortcode : null,
+        shortcode,
         action_type: transaction.action_type,
     };
 };