location.reload())}
+ />
+ );
+};
+
+ErrorComponent.propTypes = {
+ message: PropTypes.oneOfType([PropTypes.node, PropTypes.string, PropTypes.object]),
+ type: PropTypes.string,
+};
+
+export default ErrorComponent;
diff --git a/packages/reports/src/Components/Errors/index.js b/packages/reports/src/Components/Errors/index.js
new file mode 100644
index 000000000000..dc12ba08a1e7
--- /dev/null
+++ b/packages/reports/src/Components/Errors/index.js
@@ -0,0 +1 @@
+export default from './error-component.jsx';
diff --git a/packages/trader/src/App/Components/Form/CompositeCalendar/calendar-icon.jsx b/packages/reports/src/Components/Form/CompositeCalendar/calendar-icon.jsx
similarity index 100%
rename from packages/trader/src/App/Components/Form/CompositeCalendar/calendar-icon.jsx
rename to packages/reports/src/Components/Form/CompositeCalendar/calendar-icon.jsx
diff --git a/packages/trader/src/App/Components/Form/CompositeCalendar/composite-calendar-mobile.jsx b/packages/reports/src/Components/Form/CompositeCalendar/composite-calendar-mobile.jsx
similarity index 100%
rename from packages/trader/src/App/Components/Form/CompositeCalendar/composite-calendar-mobile.jsx
rename to packages/reports/src/Components/Form/CompositeCalendar/composite-calendar-mobile.jsx
diff --git a/packages/trader/src/App/Components/Form/CompositeCalendar/composite-calendar.jsx b/packages/reports/src/Components/Form/CompositeCalendar/composite-calendar.jsx
similarity index 100%
rename from packages/trader/src/App/Components/Form/CompositeCalendar/composite-calendar.jsx
rename to packages/reports/src/Components/Form/CompositeCalendar/composite-calendar.jsx
diff --git a/packages/trader/src/App/Components/Form/CompositeCalendar/index.js b/packages/reports/src/Components/Form/CompositeCalendar/index.js
similarity index 100%
rename from packages/trader/src/App/Components/Form/CompositeCalendar/index.js
rename to packages/reports/src/Components/Form/CompositeCalendar/index.js
diff --git a/packages/trader/src/App/Components/Form/CompositeCalendar/list-item.jsx b/packages/reports/src/Components/Form/CompositeCalendar/list-item.jsx
similarity index 100%
rename from packages/trader/src/App/Components/Form/CompositeCalendar/list-item.jsx
rename to packages/reports/src/Components/Form/CompositeCalendar/list-item.jsx
diff --git a/packages/trader/src/App/Components/Form/CompositeCalendar/side-list.jsx b/packages/reports/src/Components/Form/CompositeCalendar/side-list.jsx
similarity index 100%
rename from packages/trader/src/App/Components/Form/CompositeCalendar/side-list.jsx
rename to packages/reports/src/Components/Form/CompositeCalendar/side-list.jsx
diff --git a/packages/trader/src/App/Components/Form/CompositeCalendar/two-month-picker.jsx b/packages/reports/src/Components/Form/CompositeCalendar/two-month-picker.jsx
similarity index 100%
rename from packages/trader/src/App/Components/Form/CompositeCalendar/two-month-picker.jsx
rename to packages/reports/src/Components/Form/CompositeCalendar/two-month-picker.jsx
diff --git a/packages/reports/src/Components/Routes/__tests__/helpers.spec.js b/packages/reports/src/Components/Routes/__tests__/helpers.spec.js
new file mode 100644
index 000000000000..324d5d33967a
--- /dev/null
+++ b/packages/reports/src/Components/Routes/__tests__/helpers.spec.js
@@ -0,0 +1,66 @@
+import React from 'react';
+import { expect } from 'chai';
+import * as Helpers from '../helpers';
+import { routes } from '@deriv/shared';
+import getRoutesConfig from 'Constants/routes-config';
+
+describe('Helpers', () => {
+ describe('findRouteByPath', () => {
+ it('should return undefined when path is not in routes_config', () => {
+ expect(Helpers.findRouteByPath('invalidRoute', getRoutesConfig())).to.be.undefined;
+ });
+ it('should return route_info when path is in routes_config and is not nested', () => {
+ const result = Helpers.findRouteByPath(routes.reports, getRoutesConfig());
+ expect(result.path).to.equal(routes.reports);
+ });
+ it('should return route_info of parent route when path is in routes_config child level and is nested', () => {
+ const reports_routes_length = getRoutesConfig().find(r => r.path === routes.reports).routes.length;
+ expect(Helpers.findRouteByPath(routes.profit, getRoutesConfig())).to.have.all.keys(
+ 'path',
+ 'component',
+ 'is_authenticated',
+ 'routes',
+ 'icon_component',
+ 'getTitle'
+ );
+ expect(Helpers.findRouteByPath(routes.profit, getRoutesConfig()).routes).to.be.instanceof(Array);
+ expect(Helpers.findRouteByPath(routes.profit, getRoutesConfig()).routes).to.have.length(
+ reports_routes_length
+ );
+ expect(Helpers.findRouteByPath(routes.profit, getRoutesConfig()).is_authenticated).to.be.equal(true);
+ expect(Helpers.findRouteByPath(routes.profit, getRoutesConfig()).path).to.be.equal(routes.reports);
+ });
+ });
+
+ describe('isRouteVisible', () => {
+ it('should return true if route needs user to be authenticated and user is logged in', () => {
+ expect(Helpers.isRouteVisible({ path: '/contract', is_authenticated: true }, true)).to.equal(true);
+ });
+ it('should return false if route needs user to be authenticated and user is not logged in', () => {
+ expect(Helpers.isRouteVisible({ path: '/contract', is_authenticated: true }, false)).to.equal(false);
+ });
+ it('should return true if route does not need user to be authenticated and user is not logged in', () => {
+ expect(Helpers.isRouteVisible({ path: '/contract', is_authenticated: false }, false)).to.equal(true);
+ });
+ it('should return true if route does not need user to be authenticated and user is logged in', () => {
+ expect(Helpers.isRouteVisible({ path: '/contract', is_authenticated: false }, true)).to.equal(true);
+ });
+ });
+
+ describe('getPath', () => {
+ it('should return param values in params as a part of path', () => {
+ expect(Helpers.getPath('/contract/:contract_id', { contract_id: 37511105068 })).to.equal(
+ '/contract/37511105068'
+ );
+ expect(
+ Helpers.getPath('/something_made_up/:something_made_up_param1/:something_made_up_param2', {
+ something_made_up_param1: '789',
+ something_made_up_param2: '123456',
+ })
+ ).to.equal('/something_made_up/789/123456');
+ });
+ it('should return path as before if there is no params', () => {
+ expect(Helpers.getPath('/contract')).to.equal('/contract');
+ });
+ });
+});
diff --git a/packages/reports/src/Components/Routes/__tests__/route-with-sub-routes.spec.js b/packages/reports/src/Components/Routes/__tests__/route-with-sub-routes.spec.js
new file mode 100644
index 000000000000..9e9946f2265f
--- /dev/null
+++ b/packages/reports/src/Components/Routes/__tests__/route-with-sub-routes.spec.js
@@ -0,0 +1,32 @@
+import React from 'react';
+import { expect } from 'chai';
+import { configure, shallow } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import { RouteWithSubRoutesRender } from '../route-with-sub-routes.jsx';
+import { Redirect } from 'react-router-dom';
+import { PlatformContext } from '@deriv/shared';
+
+configure({ adapter: new Adapter() });
+
+describe('', () => {
+ it('should render one component', () => {
+ const comp = (
+
+
+
+ );
+ const wrapper = shallow(comp);
+ expect(wrapper).to.have.length(1);
+ });
+ it('should have props as passed as route', () => {
+ const route = { path: '/', component: Redirect, title: '', exact: true, to: '/root' };
+ const comp = (
+
+
+
+ );
+ const wrapper = shallow(comp);
+ expect(wrapper.prop('exact')).to.equal(true);
+ expect(wrapper.prop('path')).to.equal('/');
+ });
+});
diff --git a/packages/reports/src/Components/Routes/binary-link.jsx b/packages/reports/src/Components/Routes/binary-link.jsx
new file mode 100644
index 000000000000..55f99c6324b8
--- /dev/null
+++ b/packages/reports/src/Components/Routes/binary-link.jsx
@@ -0,0 +1,33 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { NavLink } from 'react-router-dom';
+import { PlatformContext } from '@deriv/shared';
+import getRoutesConfig from 'Constants/routes-config';
+import { findRouteByPath, normalizePath } from './helpers';
+
+const BinaryLink = ({ active_class, to, children, ...props }) => {
+ const { is_appstore } = React.useContext(PlatformContext);
+
+ const path = normalizePath(to);
+ const route = findRouteByPath(path, getRoutesConfig({ is_appstore }));
+
+ if (!route) {
+ throw new Error(`Route not found: ${to}`);
+ }
+
+ return to ? (
+
+ {children}
+
+ ) : (
+ {children}
+ );
+};
+
+BinaryLink.propTypes = {
+ active_class: PropTypes.string,
+ children: PropTypes.oneOfType([PropTypes.object, PropTypes.array, PropTypes.string]),
+ to: PropTypes.string,
+};
+
+export default BinaryLink;
diff --git a/packages/reports/src/Components/Routes/binary-routes.jsx b/packages/reports/src/Components/Routes/binary-routes.jsx
new file mode 100644
index 000000000000..5a1f542af729
--- /dev/null
+++ b/packages/reports/src/Components/Routes/binary-routes.jsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import { Switch } from 'react-router-dom';
+import { PlatformContext } from '@deriv/shared';
+import { Localize } from '@deriv/translations';
+import getRoutesConfig from '../../Constants/routes-config';
+import RouteWithSubRoutes from './route-with-sub-routes.jsx';
+
+const BinaryRoutes = props => {
+ const { is_appstore } = React.useContext(PlatformContext);
+
+ return (
+ {
+ return (
+
+
+
+ );
+ }}
+ >
+
+ {getRoutesConfig({ is_appstore }).map(route => (
+
+ ))}
+
+
+ );
+};
+
+export default BinaryRoutes;
diff --git a/packages/reports/src/Components/Routes/helpers.js b/packages/reports/src/Components/Routes/helpers.js
new file mode 100644
index 000000000000..6a16bfb56965
--- /dev/null
+++ b/packages/reports/src/Components/Routes/helpers.js
@@ -0,0 +1,34 @@
+import { matchPath } from 'react-router';
+
+export const normalizePath = path => (/^\//.test(path) ? path : `/${path || ''}`); // Default to '/'
+
+export const findRouteByPath = (path, routes_config) => {
+ let result;
+
+ routes_config.some(route_info => {
+ let match_path;
+ try {
+ match_path = matchPath(path, route_info);
+ } catch (e) {
+ if (/undefined/.test(e.message)) {
+ return undefined;
+ }
+ }
+
+ if (match_path) {
+ result = route_info;
+ return true;
+ } else if (route_info.routes) {
+ result = findRouteByPath(path, route_info.routes);
+ return result;
+ }
+ return false;
+ });
+
+ return result;
+};
+
+export const isRouteVisible = (route, is_logged_in) => !(route && route.is_authenticated && !is_logged_in);
+
+export const getPath = (route_path, params = {}) =>
+ Object.keys(params).reduce((p, name) => p.replace(`:${name}`, params[name]), route_path);
diff --git a/packages/reports/src/Components/Routes/index.js b/packages/reports/src/Components/Routes/index.js
new file mode 100644
index 000000000000..061bdf961719
--- /dev/null
+++ b/packages/reports/src/Components/Routes/index.js
@@ -0,0 +1,4 @@
+export BinaryLink from './binary-link.jsx';
+export default from './binary-routes.jsx';
+export * from './helpers';
+export RouteWithSubRoutes from './route-with-sub-routes.jsx';
diff --git a/packages/reports/src/Components/Routes/route-with-sub-routes.jsx b/packages/reports/src/Components/Routes/route-with-sub-routes.jsx
new file mode 100644
index 000000000000..ce6f23915d0a
--- /dev/null
+++ b/packages/reports/src/Components/Routes/route-with-sub-routes.jsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import { Redirect, Route } from 'react-router-dom';
+import { redirectToLogin, isEmptyObject, routes, removeBranchName, default_title } from '@deriv/shared';
+import { getLanguage } from '@deriv/translations';
+
+const RouteWithSubRoutes = route => {
+ const renderFactory = props => {
+ let result = null;
+ if (route.component === Redirect) {
+ let to = route.to;
+
+ // This if clause has been added just to remove '/index' from url in localhost env.
+ if (route.path === routes.index) {
+ const { location } = props;
+ to = location.pathname.toLowerCase().replace(route.path, '');
+ }
+ result = ;
+ } else if (route.is_authenticated && !route.is_logging_in && !route.is_logged_in) {
+ redirectToLogin(route.is_logged_in, getLanguage());
+ } else {
+ const default_subroute = route.routes ? route.routes.find(r => r.default) : {};
+ const has_default_subroute = !isEmptyObject(default_subroute);
+ const pathname = removeBranchName(location.pathname);
+ result = (
+
+ {has_default_subroute && pathname === route.path && }
+
+
+ );
+ }
+
+ const title = route.getTitle?.() || '';
+ document.title = `${title} | ${default_title}`;
+ return result;
+ };
+
+ return ;
+};
+
+export { RouteWithSubRoutes as RouteWithSubRoutesRender }; // For tests
+
+export default RouteWithSubRoutes;
diff --git a/packages/trader/src/Modules/Reports/Components/account-statistics.jsx b/packages/reports/src/Components/account-statistics.jsx
similarity index 100%
rename from packages/trader/src/Modules/Reports/Components/account-statistics.jsx
rename to packages/reports/src/Components/account-statistics.jsx
diff --git a/packages/trader/src/Modules/Reports/Components/amount-cell.jsx b/packages/reports/src/Components/amount-cell.jsx
similarity index 80%
rename from packages/trader/src/Modules/Reports/Components/amount-cell.jsx
rename to packages/reports/src/Components/amount-cell.jsx
index 74342892adb0..b2d3d7a74068 100644
--- a/packages/trader/src/Modules/Reports/Components/amount-cell.jsx
+++ b/packages/reports/src/Components/amount-cell.jsx
@@ -1,6 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
-import { getProfitOrLoss } from 'Modules/Reports/Helpers/profit-loss';
+import { getProfitOrLoss } from '../Helpers/profit-loss';
const AmountCell = ({ value }) => {
const status = getProfitOrLoss(value);
diff --git a/packages/trader/src/Modules/Reports/Components/currency-wrapper.jsx b/packages/reports/src/Components/currency-wrapper.jsx
similarity index 100%
rename from packages/trader/src/Modules/Reports/Components/currency-wrapper.jsx
rename to packages/reports/src/Components/currency-wrapper.jsx
diff --git a/packages/trader/src/Modules/Reports/Components/empty-portfolio-message.jsx b/packages/reports/src/Components/empty-portfolio-message.jsx
similarity index 100%
rename from packages/trader/src/Modules/Reports/Components/empty-portfolio-message.jsx
rename to packages/reports/src/Components/empty-portfolio-message.jsx
diff --git a/packages/trader/src/Modules/Reports/Components/empty-trade-history-message.jsx b/packages/reports/src/Components/empty-trade-history-message.jsx
similarity index 100%
rename from packages/trader/src/Modules/Reports/Components/empty-trade-history-message.jsx
rename to packages/reports/src/Components/empty-trade-history-message.jsx
diff --git a/packages/trader/src/Modules/Reports/Components/filter-component.jsx b/packages/reports/src/Components/filter-component.jsx
similarity index 95%
rename from packages/trader/src/Modules/Reports/Components/filter-component.jsx
rename to packages/reports/src/Components/filter-component.jsx
index 9f9588b6a130..316995b171ff 100644
--- a/packages/trader/src/Modules/Reports/Components/filter-component.jsx
+++ b/packages/reports/src/Components/filter-component.jsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
import { FilterDropdown } from '@deriv/components';
import { localize } from '@deriv/translations';
import { connect } from 'Stores/connect';
-import CompositeCalendar from 'App/Components/Form/CompositeCalendar/composite-calendar.jsx';
+import CompositeCalendar from './Form/CompositeCalendar';
const FilterComponent = ({
action_type,
diff --git a/packages/reports/src/Components/index.js b/packages/reports/src/Components/index.js
new file mode 100644
index 000000000000..d498bb957778
--- /dev/null
+++ b/packages/reports/src/Components/index.js
@@ -0,0 +1,3 @@
+import EmptyPortfolioMessage from './empty-portfolio-message.jsx';
+
+export default EmptyPortfolioMessage;
diff --git a/packages/trader/src/Modules/Reports/Components/indicative-cell.jsx b/packages/reports/src/Components/indicative-cell.jsx
similarity index 92%
rename from packages/trader/src/Modules/Reports/Components/indicative-cell.jsx
rename to packages/reports/src/Components/indicative-cell.jsx
index af1b3521a4f6..0bf9029340e1 100644
--- a/packages/trader/src/Modules/Reports/Components/indicative-cell.jsx
+++ b/packages/reports/src/Components/indicative-cell.jsx
@@ -1,7 +1,7 @@
import PropTypes from 'prop-types';
import React from 'react';
import { Icon, Money, DesktopWrapper, ContractCard } from '@deriv/components';
-import { getCardLabels } from 'Constants/contract';
+import { getCardLabels } from '_common/contract';
import { connect } from 'Stores/connect';
const IndicativeCell = ({ amount, currency, contract_info, is_footer, onClickSell, is_sell_requested }) => {
@@ -48,6 +48,6 @@ IndicativeCell.propTypes = {
onClickSell: PropTypes.func,
};
-export default connect(({ modules }) => ({
- onClickSell: modules.portfolio.onClickSell,
+export default connect(({ portfolio }) => ({
+ onClickSell: portfolio.onClickSell,
}))(IndicativeCell);
diff --git a/packages/trader/src/Modules/Reports/Components/market-symbol-icon-row.jsx b/packages/reports/src/Components/market-symbol-icon-row.jsx
similarity index 100%
rename from packages/trader/src/Modules/Reports/Components/market-symbol-icon-row.jsx
rename to packages/reports/src/Components/market-symbol-icon-row.jsx
diff --git a/packages/trader/src/Modules/Reports/Components/placeholder-component.jsx b/packages/reports/src/Components/placeholder-component.jsx
similarity index 92%
rename from packages/trader/src/Modules/Reports/Components/placeholder-component.jsx
rename to packages/reports/src/Components/placeholder-component.jsx
index 54d43f05c528..b8d9717abc41 100644
--- a/packages/trader/src/Modules/Reports/Components/placeholder-component.jsx
+++ b/packages/reports/src/Components/placeholder-component.jsx
@@ -1,6 +1,6 @@
import PropTypes from 'prop-types';
import React from 'react';
-import Loading from '../../../templates/_common/components/loading';
+import Loading from '_common/components/loading.jsx';
const PlaceholderComponent = props => {
const EmptyMessageComponent = props.empty_message_component;
diff --git a/packages/trader/src/Modules/Reports/Components/profit_loss_cell.jsx b/packages/reports/src/Components/profit_loss_cell.jsx
similarity index 81%
rename from packages/trader/src/Modules/Reports/Components/profit_loss_cell.jsx
rename to packages/reports/src/Components/profit_loss_cell.jsx
index b968cb81d03f..bc454d179b2b 100644
--- a/packages/trader/src/Modules/Reports/Components/profit_loss_cell.jsx
+++ b/packages/reports/src/Components/profit_loss_cell.jsx
@@ -1,6 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
-import { getProfitOrLoss } from 'Modules/Reports/Helpers/profit-loss';
+import { getProfitOrLoss } from '../Helpers/profit-loss';
const ProfitLossCell = ({ value, children }) => {
const status = getProfitOrLoss(value);
diff --git a/packages/trader/src/Modules/Reports/Components/reports-meta.jsx b/packages/reports/src/Components/reports-meta.jsx
similarity index 100%
rename from packages/trader/src/Modules/Reports/Components/reports-meta.jsx
rename to packages/reports/src/Components/reports-meta.jsx
diff --git a/packages/trader/src/Modules/Reports/Constants/data-table-constants.js b/packages/reports/src/Constants/data-table-constants.js
similarity index 98%
rename from packages/trader/src/Modules/Reports/Constants/data-table-constants.js
rename to packages/reports/src/Constants/data-table-constants.js
index 75d0bb5dc178..a6cf33b3daff 100644
--- a/packages/trader/src/Modules/Reports/Constants/data-table-constants.js
+++ b/packages/reports/src/Constants/data-table-constants.js
@@ -3,9 +3,10 @@ import React from 'react';
import { Icon, Label, Money, ContractCard } from '@deriv/components';
import { isMobile, getCurrencyDisplayCode, getTotalProfit, shouldShowCancellation } from '@deriv/shared';
import { localize, Localize } from '@deriv/translations';
-import ProgressSliderStream from 'App/Containers/ProgressSliderStream';
-import { getCardLabels } from 'Constants/contract';
-import { getProfitOrLoss } from 'Modules/Reports/Helpers/profit-loss';
+import ProgressSliderStream from '../Containers/progress-slider-stream.jsx';
+
+import { getCardLabels } from '_common/contract';
+import { getProfitOrLoss } from '../Helpers/profit-loss';
import IndicativeCell from '../Components/indicative-cell.jsx';
import MarketSymbolIconRow from '../Components/market-symbol-icon-row.jsx';
import ProfitLossCell from '../Components/profit_loss_cell.jsx';
diff --git a/packages/reports/src/Constants/routes-config.js b/packages/reports/src/Constants/routes-config.js
new file mode 100644
index 000000000000..d767b7b05c2d
--- /dev/null
+++ b/packages/reports/src/Constants/routes-config.js
@@ -0,0 +1,60 @@
+import React from 'react';
+import { routes, makeLazyLoader, moduleLoader } from '@deriv/shared';
+import { Loading } from '@deriv/components';
+import { localize } from '@deriv/translations';
+
+const Page404 = React.lazy(() => import(/* webpackChunkName: "404" */ 'Modules/Page404'));
+
+const lazyLoadReportComponent = makeLazyLoader(
+ () => moduleLoader(() => import(/* webpackChunkName: "reports-routes" */ 'Containers')),
+ () =>
+);
+
+// Order matters
+const initRoutesConfig = () => {
+ return [
+ {
+ path: routes.reports,
+ component: lazyLoadReportComponent('Reports'),
+ is_authenticated: true,
+ getTitle: () => localize('Reports'),
+ icon_component: 'IcReports',
+ routes: [
+ {
+ path: routes.positions,
+ component: lazyLoadReportComponent('OpenPositions'),
+ getTitle: () => localize('Open positions'),
+ icon_component: 'IcOpenPositions',
+ default: true,
+ },
+ {
+ path: routes.profit,
+ component: lazyLoadReportComponent('ProfitTable'),
+ getTitle: () => localize('Profit table'),
+ icon_component: 'IcProfitTable',
+ },
+ {
+ path: routes.statement,
+ component: lazyLoadReportComponent('Statement'),
+ getTitle: () => localize('Statement'),
+ icon_component: 'IcStatement',
+ },
+ ],
+ },
+ ];
+};
+
+let routesConfig;
+
+// For default page route if page/path is not found, must be kept at the end of routes_config array
+const route_default = { component: Page404, getTitle: () => localize('Error 404') };
+
+const getRoutesConfig = () => {
+ if (!routesConfig) {
+ routesConfig = initRoutesConfig();
+ routesConfig.push(route_default);
+ }
+ return routesConfig;
+};
+
+export default getRoutesConfig;
diff --git a/packages/trader/src/Modules/Reports/Containers/__tests__/open-positions.spec.js b/packages/reports/src/Containers/__tests__/open-positions.spec.js
similarity index 91%
rename from packages/trader/src/Modules/Reports/Containers/__tests__/open-positions.spec.js
rename to packages/reports/src/Containers/__tests__/open-positions.spec.js
index cae4c669d486..a1c2eed51a47 100644
--- a/packages/trader/src/Modules/Reports/Containers/__tests__/open-positions.spec.js
+++ b/packages/reports/src/Containers/__tests__/open-positions.spec.js
@@ -19,7 +19,7 @@ describe('OpenPositions', () => {
);
it('should render one component', async () => {
- const OpenPositions = (await import('../../index')).default.OpenPositions;
+ const OpenPositions = (await import('../index')).default.OpenPositions;
const wrapper = shallow();
expect(wrapper).to.have.length(1);
});
diff --git a/packages/reports/src/Containers/index.js b/packages/reports/src/Containers/index.js
new file mode 100644
index 000000000000..0523dc131e09
--- /dev/null
+++ b/packages/reports/src/Containers/index.js
@@ -0,0 +1,11 @@
+import OpenPositions from './open-positions.jsx';
+import ProfitTable from './profit-table.jsx';
+import Statement from './statement.jsx';
+import Reports from './reports.jsx';
+
+export default {
+ OpenPositions,
+ ProfitTable,
+ Statement,
+ Reports,
+};
diff --git a/packages/trader/src/Modules/Reports/Containers/open-positions.jsx b/packages/reports/src/Containers/open-positions.jsx
similarity index 86%
rename from packages/trader/src/Modules/Reports/Containers/open-positions.jsx
rename to packages/reports/src/Containers/open-positions.jsx
index 7368f5318571..1d109e55e0a7 100644
--- a/packages/trader/src/Modules/Reports/Containers/open-positions.jsx
+++ b/packages/reports/src/Containers/open-positions.jsx
@@ -12,19 +12,27 @@ import {
ContractCard,
usePrevious,
} from '@deriv/components';
-import { urlFor, isMobile, isMultiplierContract, getTimePercentage, website_name, getTotalProfit } from '@deriv/shared';
+import {
+ urlFor,
+ isMobile,
+ isMultiplierContract,
+ getTimePercentage,
+ website_name,
+ getTotalProfit,
+ getContractPath,
+} from '@deriv/shared';
import { localize, Localize } from '@deriv/translations';
-import { ReportsTableRowLoader } from 'App/Components/Elements/ContentLoader';
-import { getContractPath } from 'App/Components/Routes/helpers';
-import { getContractDurationType } from 'Modules/Reports/Helpers/market-underlying';
-import EmptyTradeHistoryMessage from 'Modules/Reports/Components/empty-trade-history-message.jsx';
+import { ReportsTableRowLoader } from '../Components/Elements/ContentLoader';
+import { getContractDurationType } from '../Helpers/market-underlying';
+
+import EmptyTradeHistoryMessage from '../Components/empty-trade-history-message.jsx';
import {
getOpenPositionsColumnsTemplate,
getMultiplierOpenPositionsColumnsTemplate,
-} from 'Modules/Reports/Constants/data-table-constants';
-import PositionsCard from 'App/Components/Elements/PositionsDrawer/PositionsDrawerCard/positions-drawer-card.jsx';
-import PlaceholderComponent from 'Modules/Reports/Components/placeholder-component.jsx';
-import { getCardLabels } from 'Constants/contract';
+} from 'Constants/data-table-constants';
+import PositionsDrawerCard from '../Components/Elements/PositionsDrawerCard';
+import PlaceholderComponent from '../Components/placeholder-component.jsx';
+import { getCardLabels } from '_common/contract';
import { connect } from 'Stores/connect';
const EmptyPlaceholderWrapper = props => (
@@ -42,7 +50,16 @@ const EmptyPlaceholderWrapper = props => (
);
-const MobileRowRenderer = ({ row, is_footer, columns_map, server_time, onClickCancel, onClickSell, measure }) => {
+const MobileRowRenderer = ({
+ row,
+ is_footer,
+ columns_map,
+ server_time,
+ onClickCancel,
+ onClickSell,
+ measure,
+ ...props
+}) => {
React.useEffect(() => {
if (!is_footer) {
measure();
@@ -77,7 +94,7 @@ const MobileRowRenderer = ({ row, is_footer, columns_map, server_time, onClickCa
if (isMultiplierContract(type)) {
return (
-
);
}
@@ -289,6 +307,7 @@ const OpenPositions = ({
onClickSell,
onMount,
server_time,
+ ...props
}) => {
const [active_index, setActiveIndex] = React.useState(is_multiplier ? 1 : 0);
// Tabs should be visible only when there is at least one active multiplier contract
@@ -300,8 +319,8 @@ const OpenPositions = ({
* For mobile, we show portfolio stepper in header even for reports pages.
* `onMount` in portfolio store will be invoked from portfolio stepper component in `trade-header-extensions.jsx`
*/
- if (!isMobile()) onMount();
+ onMount();
checkForMultiplierContract();
// eslint-disable-next-line react-hooks/exhaustive-deps
@@ -349,13 +368,14 @@ const OpenPositions = ({
return map;
}, {});
- const mobileRowRenderer = props => (
+ const mobileRowRenderer = args => (
);
@@ -424,18 +444,38 @@ OpenPositions.propTypes = {
onClickSell: PropTypes.func,
onMount: PropTypes.func,
server_time: PropTypes.object,
+ addToast: PropTypes.func,
+ current_focus: PropTypes.string,
+ onClickRemove: PropTypes.func,
+ getContractById: PropTypes.func,
+ is_mobile: PropTypes.bool,
+ removeToast: PropTypes.func,
+ setCurrentFocus: PropTypes.func,
+ should_show_cancellation_warning: PropTypes.bool,
+ toggleCancellationWarning: PropTypes.func,
+ toggleUnsupportedContractModal: PropTypes.func,
};
-export default connect(({ modules, client, common, ui }) => ({
- active_positions: modules.portfolio.active_positions,
+export default connect(({ client, common, ui, portfolio, contract_trade }) => ({
+ active_positions: portfolio.active_positions,
currency: client.currency,
- error: modules.portfolio.error,
- getPositionById: modules.portfolio.getPositionById,
- is_loading: modules.portfolio.is_loading,
- is_multiplier: modules.trade.is_multiplier,
+ error: portfolio.error,
+ getPositionById: portfolio.getPositionById,
+ is_loading: portfolio.is_loading,
+ is_multiplier: portfolio.is_multiplier,
NotificationMessages: ui.notification_messages_ui,
- onClickCancel: modules.portfolio.onClickCancel,
- onClickSell: modules.portfolio.onClickSell,
- onMount: modules.portfolio.onMount,
+ onClickCancel: portfolio.onClickCancel,
+ onClickSell: portfolio.onClickSell,
+ onMount: portfolio.onMount,
server_time: common.server_time,
+ addToast: ui.addToast,
+ current_focus: ui.current_focus,
+ onClickRemove: portfolio.removePositionById,
+ getContractById: contract_trade.getContractById,
+ is_mobile: ui.is_mobile,
+ removeToast: ui.removeToast,
+ setCurrentFocus: ui.setCurrentFocus,
+ should_show_cancellation_warning: ui.should_show_cancellation_warning,
+ toggleCancellationWarning: ui.toggleCancellationWarning,
+ toggleUnsupportedContractModal: ui.toggleUnsupportedContractModal,
}))(withRouter(OpenPositions));
diff --git a/packages/trader/src/Modules/Reports/Containers/profit-table.jsx b/packages/reports/src/Containers/profit-table.jsx
similarity index 95%
rename from packages/trader/src/Modules/Reports/Containers/profit-table.jsx
rename to packages/reports/src/Containers/profit-table.jsx
index 9469288002ca..e5368fbf6054 100644
--- a/packages/trader/src/Modules/Reports/Containers/profit-table.jsx
+++ b/packages/reports/src/Containers/profit-table.jsx
@@ -4,17 +4,17 @@ import { PropTypes as MobxPropTypes } from 'mobx-react';
import React from 'react';
import { withRouter } from 'react-router';
import { DesktopWrapper, MobileWrapper, DataList, DataTable } from '@deriv/components';
-import { extractInfoFromShortcode, isForwardStarting, urlFor, website_name } from '@deriv/shared';
+import { extractInfoFromShortcode, isForwardStarting, urlFor, website_name, getContractPath } from '@deriv/shared';
import { localize, Localize } from '@deriv/translations';
-import { ReportsTableRowLoader } from 'App/Components/Elements/ContentLoader';
-import CompositeCalendar from 'App/Components/Form/CompositeCalendar';
-import { getContractPath } from 'App/Components/Routes/helpers';
-import { getSupportedContracts } from 'Constants';
+import { ReportsTableRowLoader } from '../Components/Elements/ContentLoader';
+import CompositeCalendar from '../Components/Form/CompositeCalendar';
+import { getSupportedContracts } from '_common/contract';
+
import { connect } from 'Stores/connect';
import EmptyTradeHistoryMessage from '../Components/empty-trade-history-message.jsx';
import PlaceholderComponent from '../Components/placeholder-component.jsx';
import { ReportsMeta } from '../Components/reports-meta.jsx';
-import { getProfitTableColumnsTemplate } from '../Constants/data-table-constants';
+import { getProfitTableColumnsTemplate } from 'Constants/data-table-constants';
const getRowAction = row_obj =>
getSupportedContracts()[extractInfoFromShortcode(row_obj.shortcode).category.toUpperCase()] &&
diff --git a/packages/reports/src/Containers/progress-slider-stream.jsx b/packages/reports/src/Containers/progress-slider-stream.jsx
new file mode 100644
index 000000000000..024822c3d65c
--- /dev/null
+++ b/packages/reports/src/Containers/progress-slider-stream.jsx
@@ -0,0 +1,36 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { ProgressSlider } from '@deriv/components';
+import { getCurrentTick } from '@deriv/shared';
+import { connect } from 'Stores/connect';
+import { getCardLabels } from '_common/contract';
+
+const ProgressSliderStream = ({ contract_info, is_loading, server_time }) => {
+ if (!contract_info) {
+ return ;
+ }
+ const current_tick = contract_info.tick_count && getCurrentTick(contract_info);
+
+ return (
+
+ );
+};
+
+ProgressSliderStream.propTypes = {
+ contract_info: PropTypes.object,
+ is_loading: PropTypes.bool,
+ server_time: PropTypes.object,
+};
+
+export default connect(({ common, portfolio }) => ({
+ is_loading: portfolio.is_loading,
+ server_time: common.server_time,
+}))(ProgressSliderStream);
diff --git a/packages/trader/src/Modules/Reports/Containers/reports.jsx b/packages/reports/src/Containers/reports.jsx
similarity index 99%
rename from packages/trader/src/Modules/Reports/Containers/reports.jsx
rename to packages/reports/src/Containers/reports.jsx
index 33b0e8a509a2..6d55e1a02d8a 100644
--- a/packages/trader/src/Modules/Reports/Containers/reports.jsx
+++ b/packages/reports/src/Containers/reports.jsx
@@ -32,7 +32,6 @@ const Reports = ({
}) => {
React.useEffect(() => {
toggleReports(true);
-
return () => {
setVisibilityRealityCheck(1);
toggleReports(false);
diff --git a/packages/reports/src/Containers/routes.jsx b/packages/reports/src/Containers/routes.jsx
new file mode 100644
index 000000000000..585ad7a9d3f8
--- /dev/null
+++ b/packages/reports/src/Containers/routes.jsx
@@ -0,0 +1,39 @@
+import { PropTypes as MobxPropTypes } from 'mobx-react';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { withRouter } from 'react-router';
+import BinaryRoutes from 'Components/Routes';
+import { connect } from 'Stores/connect';
+import ErrorComponent from 'Components/Errors';
+
+const Routes = props => {
+ if (props.has_error) {
+ return ;
+ }
+
+ return (
+
+ );
+};
+
+Routes.propTypes = {
+ error: MobxPropTypes.objectOrObservableObject,
+ has_error: PropTypes.bool,
+ is_logged_in: PropTypes.bool,
+ is_virtual: PropTypes.bool,
+};
+
+// need to wrap withRouter around connect
+// to prevent updates on from being blocked
+export default withRouter(
+ connect(({ client, common }) => ({
+ is_logged_in: client.is_logged_in,
+ is_logging_in: client.is_logging_in,
+ error: common.error,
+ has_error: common.has_error,
+ }))(Routes)
+);
diff --git a/packages/trader/src/Modules/Reports/Containers/statement.jsx b/packages/reports/src/Containers/statement.jsx
similarity index 98%
rename from packages/trader/src/Modules/Reports/Containers/statement.jsx
rename to packages/reports/src/Containers/statement.jsx
index 1d5b36935b9d..71ab00441f6e 100644
--- a/packages/trader/src/Modules/Reports/Containers/statement.jsx
+++ b/packages/reports/src/Containers/statement.jsx
@@ -3,11 +3,10 @@ import PropTypes from 'prop-types';
import React from 'react';
import { withRouter } from 'react-router-dom';
import { DesktopWrapper, MobileWrapper, DataList, DataTable, Text, Clipboard } from '@deriv/components';
-import { extractInfoFromShortcode, isForwardStarting, urlFor, website_name } from '@deriv/shared';
+import { extractInfoFromShortcode, isForwardStarting, urlFor, website_name, getContractPath } from '@deriv/shared';
import { localize, Localize } from '@deriv/translations';
-import { ReportsTableRowLoader } from 'App/Components/Elements/ContentLoader';
-import { getContractPath } from 'App/Components/Routes/helpers';
-import { getSupportedContracts } from 'Constants';
+import { ReportsTableRowLoader } from '../Components/Elements/ContentLoader';
+import { getSupportedContracts } from '_common/contract';
import { connect } from 'Stores/connect';
import { getStatementTableColumnsTemplate } from '../Constants/data-table-constants';
import PlaceholderComponent from '../Components/placeholder-component.jsx';
diff --git a/packages/reports/src/Helpers/digits.js b/packages/reports/src/Helpers/digits.js
new file mode 100644
index 000000000000..6ad31ce7e17c
--- /dev/null
+++ b/packages/reports/src/Helpers/digits.js
@@ -0,0 +1,5 @@
+const digitCategoriesMap = ['even_odd', 'match_diff', 'over_under'];
+const digitTypesMap = ['DIGITDIFF', 'DIGITMATCH', 'DIGITOVER', 'DIGITUNDER', 'DIGITEVEN', 'DIGITODD'];
+
+export const isDigitTradeType = trade_type => digitCategoriesMap.includes(trade_type);
+export const isDigitContractType = contract_type => digitTypesMap.includes(contract_type);
diff --git a/packages/trader/src/Modules/Reports/Helpers/market-underlying.js b/packages/reports/src/Helpers/market-underlying.js
similarity index 95%
rename from packages/trader/src/Modules/Reports/Helpers/market-underlying.js
rename to packages/reports/src/Helpers/market-underlying.js
index 82363678b752..e40f15c4dc0f 100644
--- a/packages/trader/src/Modules/Reports/Helpers/market-underlying.js
+++ b/packages/reports/src/Helpers/market-underlying.js
@@ -1,4 +1,4 @@
-import { getMarketNamesMap, getContractConfig } from 'Constants';
+import { getMarketNamesMap, getContractConfig } from '_common/contract';
import { localize } from '@deriv/translations';
/**
diff --git a/packages/trader/src/Modules/Reports/Helpers/profit-loss.js b/packages/reports/src/Helpers/profit-loss.js
similarity index 100%
rename from packages/trader/src/Modules/Reports/Helpers/profit-loss.js
rename to packages/reports/src/Helpers/profit-loss.js
diff --git a/packages/reports/src/Modules/Page404/Components/Page404.jsx b/packages/reports/src/Modules/Page404/Components/Page404.jsx
new file mode 100644
index 000000000000..981431ce85c8
--- /dev/null
+++ b/packages/reports/src/Modules/Page404/Components/Page404.jsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import { PageError } from '@deriv/components';
+import { routes, getUrlBase } from '@deriv/shared';
+
+import { localize } from '@deriv/translations';
+
+const Page404 = () => (
+
+);
+
+export default Page404;
diff --git a/packages/reports/src/Modules/Page404/index.js b/packages/reports/src/Modules/Page404/index.js
new file mode 100644
index 000000000000..ccb77a533cf4
--- /dev/null
+++ b/packages/reports/src/Modules/Page404/index.js
@@ -0,0 +1 @@
+export default from './Components/Page404.jsx';
diff --git a/packages/reports/src/Modules/SmartChart/Components/Markers/__tests__/marker-spot-label.spec.js b/packages/reports/src/Modules/SmartChart/Components/Markers/__tests__/marker-spot-label.spec.js
new file mode 100644
index 000000000000..26403c0342da
--- /dev/null
+++ b/packages/reports/src/Modules/SmartChart/Components/Markers/__tests__/marker-spot-label.spec.js
@@ -0,0 +1,52 @@
+import React from 'react';
+import { expect } from 'chai';
+import { configure, shallow, mount } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import MarkerSpotLabel from '../marker-spot-label.jsx';
+
+configure({ adapter: new Adapter() });
+
+describe('MarkerSpotLabel', () => {
+ it('should render one component', () => {
+ const wrapper = shallow();
+ expect(wrapper).to.have.length(1);
+ });
+ it('should have class .chart-spot-label__time-value-container--top if align_label top is passed in props', () => {
+ const wrapper = shallow();
+ expect(wrapper.find('.chart-spot-label__time-value-container--top').exists()).to.be.true;
+ });
+ it('should have class .chart-spot-label__time-value-container--bottom if align_label bottom is passed in props', () => {
+ const wrapper = shallow();
+ expect(wrapper.find('.chart-spot-label__time-value-container--bottom').exists()).to.be.true;
+ });
+ it('should have class .chart-spot-label__time-value-container--top if no align_label is passed in props', () => {
+ const wrapper = shallow();
+ expect(wrapper.find('.chart-spot-label__time-value-container--top').exists()).to.be.true;
+ expect(wrapper.find('.chart-spot-label__time-value-container--bottom').exists()).to.be.false;
+ });
+ it('should toggle label on hover if has_hover_toggle is passed in props', async () => {
+ const wrapper = mount();
+ expect(wrapper.find('.chart-spot-label__info-container').exists()).to.be.false;
+
+ wrapper.find('.marker-hover-container').simulate('mouseenter');
+ wrapper.update();
+ expect(wrapper.find('.chart-spot-label__info-container').exists()).to.be.true;
+
+ wrapper.find('.marker-hover-container').simulate('mouseleave');
+ wrapper.update();
+ expect(wrapper.find('.chart-spot-label__info-container').exists()).to.be.false;
+ });
+ it('should not toggle label on hover if has_label_toggle is not passed in props', () => {
+ const wrapper = shallow();
+ expect(wrapper.find('.chart-spot-label__info-container').exists()).to.be.true;
+ expect(wrapper.find('.marker-hover-container').exists()).to.equal(false);
+ });
+ it('should have class .chart-spot-label__value-container--won if status won is passed in props', () => {
+ const wrapper = shallow();
+ expect(wrapper.find('.chart-spot-label__value-container--won').exists()).to.be.true;
+ });
+ it('should have class .chart-spot-label__value-container--lost if status lost is passed in props', () => {
+ const wrapper = shallow();
+ expect(wrapper.find('.chart-spot-label__value-container--lost').exists()).to.be.true;
+ });
+});
diff --git a/packages/reports/src/Modules/SmartChart/Components/Markers/__tests__/marker-spot.spec.js b/packages/reports/src/Modules/SmartChart/Components/Markers/__tests__/marker-spot.spec.js
new file mode 100644
index 000000000000..4327cb046a54
--- /dev/null
+++ b/packages/reports/src/Modules/SmartChart/Components/Markers/__tests__/marker-spot.spec.js
@@ -0,0 +1,20 @@
+import React from 'react';
+import { expect } from 'chai';
+import { configure, shallow } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import MarkerSpot from '../marker-spot.jsx';
+
+configure({ adapter: new Adapter() });
+
+describe('MarkerSpot', () => {
+ it('should render one component', () => {
+ const wrapper = shallow();
+ expect(wrapper).to.have.length(1);
+ });
+ it('should not have class .chart-spot__spot--lost or .chart-spot__spot--won if no status is passed in props', () => {
+ const wrapper = shallow();
+ expect(wrapper.find('.chart-spot__spot--lost').exists()).to.be.false;
+ expect(wrapper.find('.chart-spot__spot--lost').exists()).to.be.false;
+ expect(wrapper.find('.chart-spot').exists()).to.be.true;
+ });
+});
diff --git a/packages/reports/src/Modules/SmartChart/Components/Markers/marker-line.jsx b/packages/reports/src/Modules/SmartChart/Components/Markers/marker-line.jsx
new file mode 100644
index 000000000000..c4a5c7083a7e
--- /dev/null
+++ b/packages/reports/src/Modules/SmartChart/Components/Markers/marker-line.jsx
@@ -0,0 +1,38 @@
+import classNames from 'classnames';
+import { observer } from 'mobx-react';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { Icon } from '@deriv/components';
+
+const MarkerLine = ({ label, line_style, marker_config, status }) => {
+ // TODO: Find a more elegant solution
+ if (!marker_config) return ;
+ return (
+
+ {label === marker_config.LINE_END.content_config.label && (
+
+ )}
+ {label === marker_config.LINE_START.content_config.label && (
+
+ )}
+
+ );
+};
+
+MarkerLine.propTypes = {
+ label: PropTypes.string,
+ line_style: PropTypes.string,
+ marker_config: PropTypes.object,
+ status: PropTypes.oneOf(['won', 'lost']),
+};
+export default observer(MarkerLine);
diff --git a/packages/reports/src/Modules/SmartChart/Components/Markers/marker-spot-label.jsx b/packages/reports/src/Modules/SmartChart/Components/Markers/marker-spot-label.jsx
new file mode 100644
index 000000000000..bfcb77a258f9
--- /dev/null
+++ b/packages/reports/src/Modules/SmartChart/Components/Markers/marker-spot-label.jsx
@@ -0,0 +1,82 @@
+import classNames from 'classnames';
+import { observer } from 'mobx-react';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { Icon, Text } from '@deriv/components';
+import { addComma, toMoment } from '@deriv/shared';
+
+import MarkerSpot from './marker-spot.jsx';
+
+const MarkerSpotLabel = ({
+ align_label,
+ has_hover_toggle,
+ spot_className,
+ spot_count,
+ spot_epoch,
+ spot_value,
+ status,
+}) => {
+ const [show_label, setShowLabel] = React.useState(!has_hover_toggle);
+
+ const handleHoverToggle = () => {
+ setShowLabel(!show_label);
+ };
+
+ let marker_spot = ;
+
+ if (has_hover_toggle) {
+ marker_spot = (
+
+ {marker_spot}
+
+ );
+ }
+
+ return (
+
+ {show_label && (
+
+
+
+
+
+ {toMoment(+spot_epoch).format('HH:mm:ss')}
+
+
+
+
{addComma(spot_value)}
+
+
+
+ )}
+ {marker_spot}
+
{spot_count}
+);
+
+MarkerSpot.propTypes = {
+ className: PropTypes.string,
+ spot_count: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+};
+
+export default observer(MarkerSpot);
diff --git a/packages/reports/src/Modules/SmartChart/Helpers/symbol.js b/packages/reports/src/Modules/SmartChart/Helpers/symbol.js
new file mode 100644
index 000000000000..00d2fadba0c6
--- /dev/null
+++ b/packages/reports/src/Modules/SmartChart/Helpers/symbol.js
@@ -0,0 +1,10 @@
+export const symbolChange = onSymbolChange =>
+ onSymbolChange &&
+ (symbol => {
+ onSymbolChange({
+ target: {
+ name: 'symbol',
+ value: symbol,
+ },
+ });
+ });
diff --git a/packages/trader/src/Stores/Modules/Profit/Helpers/format-request.js b/packages/reports/src/Stores/Modules/Profit/Helpers/format-request.js
similarity index 100%
rename from packages/trader/src/Stores/Modules/Profit/Helpers/format-request.js
rename to packages/reports/src/Stores/Modules/Profit/Helpers/format-request.js
diff --git a/packages/trader/src/Stores/Modules/Profit/Helpers/format-response.js b/packages/reports/src/Stores/Modules/Profit/Helpers/format-response.js
similarity index 81%
rename from packages/trader/src/Stores/Modules/Profit/Helpers/format-response.js
rename to packages/reports/src/Stores/Modules/Profit/Helpers/format-response.js
index db7e776c2249..f691a0a7b596 100644
--- a/packages/trader/src/Stores/Modules/Profit/Helpers/format-response.js
+++ b/packages/reports/src/Stores/Modules/Profit/Helpers/format-response.js
@@ -1,7 +1,4 @@
-import { formatMoney, toMoment } from '@deriv/shared';
-
-import { getMarketInformation } from '../../../../Modules/Reports/Helpers/market-underlying';
-import { getSymbolDisplayName } from '../../Trading/Helpers/active-symbols';
+import { formatMoney, toMoment, getSymbolDisplayName, getMarketInformation } from '@deriv/shared';
export const formatProfitTableTransactions = (transaction, currency, active_symbols = []) => {
const format_string = 'DD MMM YYYY HH:mm:ss';
diff --git a/packages/trader/src/Stores/Modules/Profit/profit-store.js b/packages/reports/src/Stores/Modules/Profit/profit-store.js
similarity index 98%
rename from packages/trader/src/Stores/Modules/Profit/profit-store.js
rename to packages/reports/src/Stores/Modules/Profit/profit-store.js
index 00c4c07e137c..adc04536f095 100644
--- a/packages/trader/src/Stores/Modules/Profit/profit-store.js
+++ b/packages/reports/src/Stores/Modules/Profit/profit-store.js
@@ -72,7 +72,7 @@ export default class ProfitTableStore extends BaseStore {
formatProfitTableTransactions(
transaction,
this.root_store.client.currency,
- this.root_store.modules.trade.active_symbols
+ this.root_store.active_symbols.active_symbols
)
);
diff --git a/packages/trader/src/Stores/Modules/Statement/Helpers/__tests__/format-response.spec.js b/packages/reports/src/Stores/Modules/Statement/Helpers/__tests__/format-response.spec.js
similarity index 100%
rename from packages/trader/src/Stores/Modules/Statement/Helpers/__tests__/format-response.spec.js
rename to packages/reports/src/Stores/Modules/Statement/Helpers/__tests__/format-response.spec.js
diff --git a/packages/trader/src/Stores/Modules/Statement/Helpers/format-response.js b/packages/reports/src/Stores/Modules/Statement/Helpers/format-response.js
similarity index 88%
rename from packages/trader/src/Stores/Modules/Statement/Helpers/format-response.js
rename to packages/reports/src/Stores/Modules/Statement/Helpers/format-response.js
index 39992f536a7b..3111f2e37825 100644
--- a/packages/trader/src/Stores/Modules/Statement/Helpers/format-response.js
+++ b/packages/reports/src/Stores/Modules/Statement/Helpers/format-response.js
@@ -1,9 +1,5 @@
-import { formatMoney, toTitleCase, toMoment } from '@deriv/shared';
-
+import { formatMoney, toTitleCase, toMoment, getMarketInformation, getSymbolDisplayName } from '@deriv/shared';
import { localize } from '@deriv/translations';
-import { getMarketInformation } from 'Modules/Reports/Helpers/market-underlying';
-
-import { getSymbolDisplayName } from '../../Trading/Helpers/active-symbols';
export const formatStatementTransaction = (transaction, currency, active_symbols = []) => {
const format_string = 'DD MMM YYYY HH:mm:ss';
diff --git a/packages/trader/src/Stores/Modules/Statement/statement-store.js b/packages/reports/src/Stores/Modules/Statement/statement-store.js
similarity index 99%
rename from packages/trader/src/Stores/Modules/Statement/statement-store.js
rename to packages/reports/src/Stores/Modules/Statement/statement-store.js
index c7b70a83c6ed..fe03f89b329b 100644
--- a/packages/trader/src/Stores/Modules/Statement/statement-store.js
+++ b/packages/reports/src/Stores/Modules/Statement/statement-store.js
@@ -91,7 +91,7 @@ export default class StatementStore extends BaseStore {
formatStatementTransaction(
transaction,
this.root_store.client.currency,
- this.root_store.modules.trade.active_symbols
+ this.root_store.active_symbols.active_symbols
)
);
diff --git a/packages/reports/src/Stores/Modules/index.js b/packages/reports/src/Stores/Modules/index.js
new file mode 100644
index 000000000000..4f8e6853040f
--- /dev/null
+++ b/packages/reports/src/Stores/Modules/index.js
@@ -0,0 +1,9 @@
+import ProfitTableStore from './Profit/profit-store';
+import StatementStore from './Statement/statement-store';
+
+export default class ModulesStore {
+ constructor(root_store) {
+ this.profit_table = new ProfitTableStore({ root_store });
+ this.statement = new StatementStore({ root_store });
+ }
+}
diff --git a/packages/reports/src/Stores/base-store.js b/packages/reports/src/Stores/base-store.js
new file mode 100644
index 000000000000..3a803f0c2a40
--- /dev/null
+++ b/packages/reports/src/Stores/base-store.js
@@ -0,0 +1,537 @@
+import { action, intercept, observable, reaction, toJS, when } from 'mobx';
+import { isProduction, isEmptyObject } from '@deriv/shared';
+
+import Validator from '../Utils/Validator';
+
+/**
+ * BaseStore class is the base class for all defined stores in the application. It handles some stuff such as:
+ * 1. Creating snapshot object from the store.
+ * 2. Saving the store's snapshot in local/session storage and keeping them in sync.
+ */
+export default class BaseStore {
+ /**
+ * An enum object to define LOCAL_STORAGE and SESSION_STORAGE
+ */
+ static STORAGES = Object.freeze({
+ LOCAL_STORAGE: Symbol('LOCAL_STORAGE'),
+ SESSION_STORAGE: Symbol('SESSION_STORAGE'),
+ });
+
+ @observable
+ validation_errors = {};
+
+ @observable
+ validation_rules = {};
+
+ preSwitchAccountDisposer = null;
+ pre_switch_account_listener = null;
+
+ switchAccountDisposer = null;
+ switch_account_listener = null;
+
+ logoutDisposer = null;
+ logout_listener = null;
+
+ clientInitDisposer = null;
+ client_init_listener = null;
+
+ networkStatusChangeDisposer = null;
+ network_status_change_listener = null;
+
+ themeChangeDisposer = null;
+ theme_change_listener = null;
+
+ realAccountSignupEndedDisposer = null;
+ real_account_signup_ended_listener = null;
+
+ @observable partial_fetch_time = 0;
+
+ /**
+ * Constructor of the base class that gets properties' name of child which should be saved in storages
+ *
+ * @param {Object} options - An object that contains the following properties:
+ * @property {Object} root_store - An object that contains the root store of the app.
+ * @property {String[]} local_storage_properties - A list of properties' names that should be kept in localStorage.
+ * @property {String[]} session_storage_properties - A list of properties' names that should be kept in sessionStorage.
+ * @property {Object} validation_rules - An object that contains the validation rules for each property of the store.
+ * @property {String} store_name - Explicit store name for browser application storage (to bypass minification)
+ */
+ constructor(options = {}) {
+ const { root_store, local_storage_properties, session_storage_properties, validation_rules, store_name } =
+ options;
+
+ Object.defineProperty(this, 'root_store', {
+ enumerable: false,
+ writable: true,
+ });
+ Object.defineProperty(this, 'local_storage_properties', {
+ enumerable: false,
+ writable: true,
+ });
+ Object.defineProperty(this, 'session_storage_properties', {
+ enumerable: false,
+ writable: true,
+ });
+
+ const has_local_or_session_storage =
+ (local_storage_properties && local_storage_properties.length) ||
+ (session_storage_properties && session_storage_properties.length);
+
+ if (has_local_or_session_storage) {
+ if (!store_name) {
+ throw new Error('store_name is required for local/session storage');
+ }
+
+ Object.defineProperty(this, 'store_name', {
+ value: store_name,
+ enumerable: false,
+ writable: false,
+ });
+ }
+
+ this.root_store = root_store;
+ this.local_storage_properties = local_storage_properties || [];
+ this.session_storage_properties = session_storage_properties || [];
+ this.setValidationRules(validation_rules);
+
+ this.setupReactionForLocalStorage();
+ this.setupReactionForSessionStorage();
+ this.retrieveFromStorage();
+ }
+
+ /**
+ * Returns an snapshot of the current store
+ *
+ * @param {String[]} properties - A list of properties' names that should be in the snapshot.
+ *
+ * @return {Object} Returns a cloned object of the store.
+ */
+ getSnapshot(properties) {
+ let snapshot = toJS(this);
+
+ if (!isEmptyObject(this.root_store)) {
+ snapshot.root_store = this.root_store;
+ }
+
+ if (properties && properties.length) {
+ snapshot = properties.reduce((result, p) => Object.assign(result, { [p]: snapshot[p] }), {});
+ }
+
+ return snapshot;
+ }
+
+ /**
+ * Sets up a reaction on properties which are mentioned in `local_storage_properties`
+ * and invokes `saveToStorage` when there are any changes on them.
+ *
+ */
+ setupReactionForLocalStorage() {
+ if (this.local_storage_properties.length) {
+ reaction(
+ () => this.local_storage_properties.map(i => this[i]),
+ () => this.saveToStorage(this.local_storage_properties, BaseStore.STORAGES.LOCAL_STORAGE)
+ );
+ }
+ }
+
+ /**
+ * Sets up a reaction on properties which are mentioned in `session_storage_properties`
+ * and invokes `saveToStorage` when there are any changes on them.
+ *
+ */
+ setupReactionForSessionStorage() {
+ if (this.session_storage_properties.length) {
+ reaction(
+ () => this.session_storage_properties.map(i => this[i]),
+ () => this.saveToStorage(this.session_storage_properties, BaseStore.STORAGES.SESSION_STORAGE)
+ );
+ }
+ }
+
+ /**
+ * Removes properties that are not passed from the snapshot of the store and saves it to the passed storage
+ *
+ * @param {String[]} properties - A list of the store's properties' names which should be saved in the storage.
+ * @param {Symbol} storage - A symbol object that defines the storage which the snapshot should be stored in it.
+ *
+ */
+ saveToStorage(properties, storage) {
+ const snapshot = JSON.stringify(this.getSnapshot(properties), (key, value) => {
+ if (value !== null) return value;
+ return undefined;
+ });
+
+ if (storage === BaseStore.STORAGES.LOCAL_STORAGE) {
+ localStorage.setItem(this.store_name, snapshot);
+ } else if (storage === BaseStore.STORAGES.SESSION_STORAGE) {
+ sessionStorage.setItem(this.store_name, snapshot);
+ }
+ }
+
+ /**
+ * Retrieves saved snapshot of the store and assigns to the current instance.
+ *
+ */
+ @action
+ retrieveFromStorage() {
+ const local_storage_snapshot = JSON.parse(localStorage.getItem(this.store_name, {}));
+ const session_storage_snapshot = JSON.parse(sessionStorage.getItem(this.store_name, {}));
+
+ const snapshot = { ...local_storage_snapshot, ...session_storage_snapshot };
+
+ Object.keys(snapshot).forEach(k => (this[k] = snapshot[k]));
+ }
+
+ /**
+ * Sets validation error messages for an observable property of the store
+ *
+ * @param {String} propertyName - The observable property's name
+ * @param [{String}] messages - An array of strings that contains validation error messages for the particular property.
+ *
+ */
+ @action
+ setValidationErrorMessages(propertyName, messages) {
+ const is_different = () =>
+ !!this.validation_errors[propertyName]
+ .filter(x => !messages.includes(x))
+ .concat(messages.filter(x => !this.validation_errors[propertyName].includes(x))).length;
+ if (!this.validation_errors[propertyName] || is_different()) {
+ this.validation_errors[propertyName] = messages;
+ }
+ }
+
+ /**
+ * Sets validation rules
+ *
+ * @param {object} rules
+ *
+ */
+ @action
+ setValidationRules(rules = {}) {
+ Object.keys(rules).forEach(key => {
+ this.addRule(key, rules[key]);
+ });
+ }
+
+ /**
+ * Adds rules to the particular property
+ *
+ * @param {String} property
+ * @param {String} rules
+ *
+ */
+ @action
+ addRule(property, rules) {
+ this.validation_rules[property] = rules;
+
+ intercept(this, property, change => {
+ this.validateProperty(property, change.newValue);
+ return change;
+ });
+ }
+
+ /**
+ * Validates a particular property of the store
+ *
+ * @param {String} property - The name of the property in the store
+ * @param {object} value - The value of the property, it can be undefined.
+ *
+ */
+ @action
+ validateProperty(property, value) {
+ const trigger = this.validation_rules[property].trigger;
+ const inputs = { [property]: value !== undefined ? value : this[property] };
+ const validation_rules = { [property]: this.validation_rules[property].rules || [] };
+
+ if (!!trigger && Object.hasOwnProperty.call(this, trigger)) {
+ inputs[trigger] = this[trigger];
+ validation_rules[trigger] = this.validation_rules[trigger].rules || [];
+ }
+
+ const validator = new Validator(inputs, validation_rules, this);
+
+ validator.isPassed();
+
+ Object.keys(inputs).forEach(key => {
+ this.setValidationErrorMessages(key, validator.errors.get(key));
+ });
+ }
+
+ /**
+ * Validates all properties which validation rule has been set for.
+ *
+ */
+ @action
+ validateAllProperties() {
+ const validation_rules = Object.keys(this.validation_rules);
+ const validation_errors = Object.keys(this.validation_errors);
+
+ validation_rules.forEach(p => {
+ this.validateProperty(p, this[p]);
+ });
+
+ // Remove keys that are present in error, but not in rules:
+ validation_errors.forEach(error => {
+ if (!validation_rules.includes(error)) {
+ delete this.validation_errors[error];
+ }
+ });
+ }
+
+ @action.bound
+ onSwitchAccount(listener) {
+ if (listener) {
+ this.switch_account_listener = listener;
+
+ this.switchAccountDisposer = when(
+ () => this.root_store.client.switch_broadcast,
+ () => {
+ try {
+ const result = this.switch_account_listener();
+ if (result && result.then && typeof result.then === 'function') {
+ result.then(() => {
+ this.root_store.client.switchEndSignal();
+ this.onSwitchAccount(this.switch_account_listener);
+ });
+ } else {
+ throw new Error('Switching account listeners are required to return a promise.');
+ }
+ } catch (error) {
+ // there is no listener currently active. so we can just ignore the error raised from treating
+ // a null object as a function. Although, in development mode, we throw a console error.
+ if (!isProduction()) {
+ console.error(error); // eslint-disable-line
+ }
+ }
+ }
+ );
+ }
+ }
+
+ @action.bound
+ onPreSwitchAccount(listener) {
+ if (listener) {
+ this.pre_switch_account_listener = listener;
+ this.preSwitchAccountDisposer = when(
+ () => this.root_store.client.pre_switch_broadcast,
+ () => {
+ try {
+ const result = this.pre_switch_account_listener();
+ if (result && result.then && typeof result.then === 'function') {
+ result.then(() => {
+ this.root_store.client.setPreSwitchAccount(false);
+ this.onPreSwitchAccount(this.pre_switch_account_listener);
+ });
+ } else {
+ throw new Error('Pre-switch account listeners are required to return a promise.');
+ }
+ } catch (error) {
+ // there is no listener currently active. so we can just ignore the error raised from treating
+ // a null object as a function. Although, in development mode, we throw a console error.
+ if (!isProduction()) {
+ console.error(error); // eslint-disable-line
+ }
+ }
+ }
+ );
+ }
+ }
+
+ @action.bound
+ onLogout(listener) {
+ this.logoutDisposer = when(
+ () => this.root_store.client.has_logged_out,
+ async () => {
+ try {
+ const result = this.logout_listener();
+ if (result && result.then && typeof result.then === 'function') {
+ result.then(() => {
+ this.root_store.client.setLogout(false);
+ this.onLogout(this.logout_listener);
+ });
+ } else {
+ throw new Error('Logout listeners are required to return a promise.');
+ }
+ } catch (error) {
+ // there is no listener currently active. so we can just ignore the error raised from treating
+ // a null object as a function. Although, in development mode, we throw a console error.
+ if (!isProduction()) {
+ console.error(error); // eslint-disable-line
+ }
+ }
+ }
+ );
+ this.logout_listener = listener;
+ }
+
+ @action.bound
+ onClientInit(listener) {
+ this.clientInitDisposer = when(
+ () => this.root_store.client.initialized_broadcast,
+ async () => {
+ try {
+ const result = this.client_init_listener();
+ if (result && result.then && typeof result.then === 'function') {
+ result.then(() => {
+ this.root_store.client.setInitialized(false);
+ this.onClientInit(this.client_init_listener);
+ });
+ } else {
+ throw new Error('Client init listeners are required to return a promise.');
+ }
+ } catch (error) {
+ // there is no listener currently active. so we can just ignore the error raised from treating
+ // a null object as a function. Although, in development mode, we throw a console error.
+ if (!isProduction()) {
+ console.error(error); // eslint-disable-line
+ }
+ }
+ }
+ );
+ this.client_init_listener = listener;
+ }
+
+ @action.bound
+ onNetworkStatusChange(listener) {
+ this.networkStatusChangeDisposer = reaction(
+ () => this.root_store.common.is_network_online,
+ is_online => {
+ try {
+ this.network_status_change_listener(is_online);
+ } catch (error) {
+ // there is no listener currently active. so we can just ignore the error raised from treating
+ // a null object as a function. Although, in development mode, we throw a console error.
+ if (!isProduction()) {
+ console.error(error); // eslint-disable-line
+ }
+ }
+ }
+ );
+
+ this.network_status_change_listener = listener;
+ }
+
+ @action.bound
+ onThemeChange(listener) {
+ this.themeChangeDisposer = reaction(
+ () => this.root_store.ui.is_dark_mode_on,
+ is_dark_mode_on => {
+ try {
+ this.theme_change_listener(is_dark_mode_on);
+ } catch (error) {
+ // there is no listener currently active. so we can just ignore the error raised from treating
+ // a null object as a function. Although, in development mode, we throw a console error.
+ if (!isProduction()) {
+ console.error(error); // eslint-disable-line
+ }
+ }
+ }
+ );
+
+ this.theme_change_listener = listener;
+ }
+
+ @action.bound
+ onRealAccountSignupEnd(listener) {
+ this.realAccountSignupEndedDisposer = when(
+ () => this.root_store.ui.has_real_account_signup_ended,
+ () => {
+ try {
+ const result = this.real_account_signup_ended_listener();
+ if (result && result.then && typeof result.then === 'function') {
+ result.then(() => {
+ this.root_store.ui.setRealAccountSignupEnd(false);
+ this.onRealAccountSignupEnd(this.real_account_signup_ended_listener);
+ });
+ } else {
+ throw new Error('Real account signup listeners are required to return a promise.');
+ }
+ } catch (error) {
+ // there is no listener currently active. so we can just ignore the error raised from treating
+ // a null object as a function. Although, in development mode, we throw a console error.
+ if (!isProduction()) {
+ console.error(error); // eslint-disable-line
+ }
+ }
+ }
+ );
+
+ this.real_account_signup_ended_listener = listener;
+ }
+
+ @action.bound
+ disposePreSwitchAccount() {
+ if (typeof this.preSwitchAccountDisposer === 'function') {
+ this.preSwitchAccountDisposer();
+ }
+ this.pre_switch_account_listener = null;
+ }
+
+ @action.bound
+ disposeSwitchAccount() {
+ if (typeof this.switchAccountDisposer === 'function') {
+ this.switchAccountDisposer();
+ }
+ this.switch_account_listener = null;
+ }
+
+ @action.bound
+ disposeLogout() {
+ if (typeof this.logoutDisposer === 'function') {
+ this.logoutDisposer();
+ }
+ this.logout_listener = null;
+ }
+
+ @action.bound
+ disposeClientInit() {
+ if (typeof this.clientInitDisposer === 'function') {
+ this.clientInitDisposer();
+ }
+ this.client_init_listener = null;
+ }
+
+ @action.bound
+ disposeNetworkStatusChange() {
+ if (typeof this.networkStatusChangeDisposer === 'function') {
+ this.networkStatusChangeDisposer();
+ }
+ this.network_status_change_listener = null;
+ }
+
+ @action.bound
+ disposeThemeChange() {
+ if (typeof this.themeChangeDisposer === 'function') {
+ this.themeChangeDisposer();
+ }
+ this.theme_change_listener = null;
+ }
+
+ @action.bound
+ disposeRealAccountSignupEnd() {
+ if (typeof this.realAccountSignupEndedDisposer === 'function') {
+ this.realAccountSignupEndedDisposer();
+ }
+ this.real_account_signup_ended_listener = null;
+ }
+
+ @action.bound
+ onUnmount() {
+ this.disposePreSwitchAccount();
+ this.disposeSwitchAccount();
+ this.disposeLogout();
+ this.disposeClientInit();
+ this.disposeNetworkStatusChange();
+ this.disposeThemeChange();
+ this.disposeRealAccountSignupEnd();
+ }
+
+ @action.bound
+ assertHasValidCache(loginid, ...reactions) {
+ // account was changed when this was unmounted.
+ if (this.root_store.client.loginid !== loginid) {
+ reactions.forEach(act => act());
+ this.partial_fetch_time = false;
+ }
+ }
+}
diff --git a/packages/reports/src/Stores/connect.js b/packages/reports/src/Stores/connect.js
new file mode 100644
index 000000000000..4ef42c8d18b6
--- /dev/null
+++ b/packages/reports/src/Stores/connect.js
@@ -0,0 +1,31 @@
+import { useObserver } from 'mobx-react';
+import React from 'react';
+
+const isClassComponent = Component =>
+ !!(typeof Component === 'function' && Component.prototype && Component.prototype.isReactComponent);
+
+export const MobxContent = React.createContext(null);
+
+function injectStorePropsToComponent(propsToSelectFn, BaseComponent) {
+ const Component = own_props => {
+ const store = React.useContext(MobxContent);
+
+ let ObservedComponent = BaseComponent;
+
+ if (isClassComponent(BaseComponent)) {
+ const FunctionalWrapperComponent = props => ;
+ ObservedComponent = FunctionalWrapperComponent;
+ }
+
+ return useObserver(() => ObservedComponent({ ...own_props, ...propsToSelectFn(store, own_props) }));
+ };
+
+ Component.displayName = BaseComponent.name;
+ return Component;
+}
+
+export const MobxContentProvider = ({ store, children }) => {
+ return {children};
+};
+
+export const connect = propsToSelectFn => Component => injectStorePropsToComponent(propsToSelectFn, Component);
diff --git a/packages/reports/src/Stores/index.js b/packages/reports/src/Stores/index.js
new file mode 100644
index 000000000000..f0495d2fb985
--- /dev/null
+++ b/packages/reports/src/Stores/index.js
@@ -0,0 +1,19 @@
+import ModulesStore from './Modules';
+
+export default class RootStore {
+ constructor(core_store) {
+ this.client = core_store.client;
+ this.common = core_store.common;
+ this.modules = new ModulesStore(this, core_store);
+ this.ui = core_store.ui;
+ this.gtm = core_store.gtm;
+ this.rudderstack = core_store.rudderstack;
+ this.pushwoosh = core_store.pushwoosh;
+ this.notifications = core_store.notifications;
+ this.contract_replay = core_store.contract_replay;
+ this.contract_trade = core_store.contract_trade;
+ this.portfolio = core_store.portfolio;
+ this.chart_barrier_store = core_store.chart_barrier_store;
+ this.active_symbols = core_store.active_symbols;
+ }
+}
diff --git a/packages/reports/src/Utils/Validator/__tests__/error.spec.js b/packages/reports/src/Utils/Validator/__tests__/error.spec.js
new file mode 100644
index 000000000000..d99897f955be
--- /dev/null
+++ b/packages/reports/src/Utils/Validator/__tests__/error.spec.js
@@ -0,0 +1,53 @@
+import { expect } from 'chai';
+import Errors from '../errors';
+
+describe('Error', () => {
+ let errors;
+ beforeEach(() => {
+ errors = new Errors();
+ errors.add('Error', 100);
+ });
+
+ describe('.add', () => {
+ it('should add error to errors', () => {
+ errors.add('Error', 101);
+ expect(errors.errors).to.have.property('Error').with.length(2);
+ });
+ it('should not add error if already existed', () => {
+ errors.add('Error', 100);
+ expect(errors.errors).to.have.property('Error').with.length(1);
+ });
+ });
+
+ describe('.all', () => {
+ it('should return all errors', () => {
+ expect(errors.all()).to.be.eql({
+ Error: [100],
+ });
+ });
+ });
+
+ describe('.first', () => {
+ it('should return first error if attribute exists', () => {
+ expect(errors.first('Error')).to.eql(100);
+ });
+ });
+
+ describe('.get', () => {
+ it('should return data if attribute exists', () => {
+ expect(errors.get('Error')).to.eql([100]);
+ });
+ it('should return [] if attribute does not exist', () => {
+ expect(errors.get('')).to.eql([]);
+ });
+ });
+
+ describe('.has', () => {
+ it('should return true if attribute exists', () => {
+ expect(errors.has('Error')).to.be.true;
+ });
+ it('should return false if attribute does not exists', () => {
+ expect(errors.has('')).to.be.false;
+ });
+ });
+});
diff --git a/packages/reports/src/Utils/Validator/errors.js b/packages/reports/src/Utils/Validator/errors.js
new file mode 100644
index 000000000000..8c3307765b64
--- /dev/null
+++ b/packages/reports/src/Utils/Validator/errors.js
@@ -0,0 +1,40 @@
+class Errors {
+ constructor() {
+ this.errors = {};
+ }
+
+ add(attribute, message) {
+ if (!this.has(attribute)) {
+ this.errors[attribute] = [];
+ }
+
+ if (this.errors[attribute].indexOf(message) === -1) {
+ this.errors[attribute].push(message);
+ }
+ }
+
+ all() {
+ return this.errors;
+ }
+
+ first(attribute) {
+ if (this.has(attribute)) {
+ return this.errors[attribute][0];
+ }
+ return null;
+ }
+
+ get(attribute) {
+ if (this.has(attribute)) {
+ return this.errors[attribute];
+ }
+
+ return [];
+ }
+
+ has(attribute) {
+ return Object.prototype.hasOwnProperty.call(this.errors, attribute);
+ }
+}
+
+export default Errors;
diff --git a/packages/reports/src/Utils/Validator/index.js b/packages/reports/src/Utils/Validator/index.js
new file mode 100644
index 000000000000..1b7f5cfa8611
--- /dev/null
+++ b/packages/reports/src/Utils/Validator/index.js
@@ -0,0 +1 @@
+export default from './validator';
diff --git a/packages/reports/src/Utils/Validator/validator.js b/packages/reports/src/Utils/Validator/validator.js
new file mode 100644
index 000000000000..c8aa2ce59dff
--- /dev/null
+++ b/packages/reports/src/Utils/Validator/validator.js
@@ -0,0 +1,112 @@
+import { template } from '_common/utility';
+import { getPreBuildDVRs } from '@deriv/shared';
+import Error from './errors';
+
+class Validator {
+ constructor(input, rules, store = null) {
+ this.input = input;
+ this.rules = rules;
+ this.store = store;
+ this.errors = new Error();
+
+ this.error_count = 0;
+ }
+
+ /**
+ * Add failure and error message for given rule
+ *
+ * @param {string} attribute
+ * @param {object} rule
+ */
+ addFailure(attribute, rule, error_message) {
+ let message = error_message || rule.options.message || getPreBuildDVRs()[rule.name].message();
+ if (rule.name === 'length') {
+ message = template(message, [
+ rule.options.min === rule.options.max ? rule.options.min : `${rule.options.min}-${rule.options.max}`,
+ ]);
+ } else if (rule.name === 'min') {
+ message = template(message, [rule.options.min]);
+ } else if (rule.name === 'not_equal') {
+ message = template(message, [rule.options.name1, rule.options.name2]);
+ }
+ this.errors.add(attribute, message);
+ this.error_count++;
+ }
+
+ /**
+ * Runs validator
+ *
+ * @return {boolean} Whether it passes; true = passes, false = fails
+ */
+ check() {
+ Object.keys(this.input).forEach(attribute => {
+ if (!Object.prototype.hasOwnProperty.call(this.rules, attribute)) {
+ return;
+ }
+
+ this.rules[attribute].forEach(rule => {
+ const ruleObject = Validator.getRuleObject(rule);
+
+ if (!ruleObject.validator && typeof ruleObject.validator !== 'function') {
+ return;
+ }
+
+ if (ruleObject.options.condition && !ruleObject.options.condition(this.store)) {
+ return;
+ }
+
+ if (this.input[attribute] === '' && ruleObject.name !== 'req') {
+ return;
+ }
+
+ let is_valid, error_message;
+ if (ruleObject.name === 'number') {
+ const { is_ok, message } = ruleObject.validator(
+ this.input[attribute],
+ ruleObject.options,
+ this.store,
+ this.input
+ );
+ is_valid = is_ok;
+ error_message = message;
+ } else {
+ is_valid = ruleObject.validator(this.input[attribute], ruleObject.options, this.store, this.input);
+ }
+
+ if (!is_valid) {
+ this.addFailure(attribute, ruleObject, error_message);
+ }
+ });
+ });
+ return !this.error_count;
+ }
+
+ /**
+ * Determine if validation passes
+ *
+ * @return {boolean}
+ */
+ isPassed() {
+ return this.check();
+ }
+
+ /**
+ * Converts the rule array to an object
+ *
+ * @param {array} rule
+ * @return {object}
+ */
+ static getRuleObject(rule) {
+ const is_rule_string = typeof rule === 'string';
+ const rule_object = {
+ name: is_rule_string ? rule : rule[0],
+ options: is_rule_string ? {} : rule[1] || {},
+ };
+
+ rule_object.validator = rule_object.name === 'custom' ? rule[1].func : getPreBuildDVRs()[rule_object.name].func;
+
+ return rule_object;
+ }
+}
+
+export default Validator;
diff --git a/packages/reports/src/_common/__tests__/utility.js b/packages/reports/src/_common/__tests__/utility.js
new file mode 100644
index 000000000000..f138acbc03e1
--- /dev/null
+++ b/packages/reports/src/_common/__tests__/utility.js
@@ -0,0 +1,16 @@
+const expect = require('chai').expect;
+const Utility = require('../utility');
+
+describe('Utility', () => {
+ describe('.template()', () => {
+ it('works as expected', () => {
+ expect(Utility.template('abc [_1] abc', ['2'])).to.eq('abc 2 abc');
+ expect(Utility.template('[_1] [_2]', ['1', '2'])).to.eq('1 2');
+ expect(Utility.template('[_1] [_1]', ['1'])).to.eq('1 1');
+ });
+
+ it('does not replace twice', () => {
+ expect(Utility.template('[_1] [_2]', ['[_2]', 'abc'])).to.eq('[_2] abc');
+ });
+ });
+});
diff --git a/packages/reports/src/_common/base/server_time.js b/packages/reports/src/_common/base/server_time.js
new file mode 100644
index 000000000000..b639380b27a5
--- /dev/null
+++ b/packages/reports/src/_common/base/server_time.js
@@ -0,0 +1,25 @@
+const PromiseClass = require('../utility').PromiseClass;
+
+const ServerTime = (() => {
+ let clock_started = false;
+ const pending = new PromiseClass();
+ let common_store;
+
+ const init = store => {
+ if (!clock_started) {
+ common_store = store;
+ pending.resolve(common_store.server_time);
+ clock_started = true;
+ }
+ };
+
+ const get = () => (clock_started && common_store.server_time ? common_store.server_time.clone() : undefined);
+
+ return {
+ init,
+ get,
+ timePromise: () => (clock_started ? Promise.resolve(common_store.server_time) : pending.promise),
+ };
+})();
+
+module.exports = ServerTime;
diff --git a/packages/reports/src/_common/components/loading.jsx b/packages/reports/src/_common/components/loading.jsx
new file mode 100644
index 000000000000..1e1379209e36
--- /dev/null
+++ b/packages/reports/src/_common/components/loading.jsx
@@ -0,0 +1,15 @@
+import classNames from 'classnames';
+import React from 'react';
+
+const Loading = ({ className, is_invisible, theme, id }) => (
+
+ {Array.from(new Array(5)).map((x, inx) => (
+
+ ))}
+
+ {Array.from(new Array(5)).map((x, inx) => (
+
+ ))}
+
+
+ {error ? (
+
+ {error}
+
+ ) : (
+
+
+
+ {localize(
+ 'You have no open positions for this asset. To view other open positions, click Go to Reports'
+ )}
+
+
+ )}
+
+