From 01024ab0c28aa580b214d896af15b94c674bd8bf Mon Sep 17 00:00:00 2001 From: George Usynin <103181646+george-usynin-binary@users.noreply.github.com> Date: Tue, 6 Sep 2022 13:03:16 +0300 Subject: [PATCH] george / rm65047 / convert routes, cashier, error-component components to TS (#6361) * perf(cashier routes): convert csahier routes to TS * perf(cashier routes): convert error-component to TS * refactor(error-dialog, types): refactor error-dialog types, move error type to shared types * perf(cashier): convert cashier to TS * perf(types): refactor types * refactor(routes with sub routes): refactor default subroute * refactor(types): add/refactor server error type * test: refactor pathname * refactor(route types): refactor route types * fix: fix ts error in React.Suspense --- .../components/error-dialog/error-dialog.tsx | 22 +++--- .../{routes-config.js => routes-config.ts} | 12 +-- .../{cashier.spec.js => cashier.spec.tsx} | 6 +- .../cashier/{cashier.jsx => cashier.tsx} | 78 ++++++++++--------- .../cashier/src/containers/cashier/index.js | 3 - .../cashier/src/containers/cashier/index.ts | 3 + .../src/containers/{index.js => index.ts} | 0 ...spec.js => route-with-sub-routes.spec.tsx} | 2 +- .../{routes.spec.js => routes.spec.tsx} | 2 +- .../src/containers/routes/binary-routes.jsx | 29 ------- .../src/containers/routes/binary-routes.tsx | 32 ++++++++ ...onent.spec.js => error-component.spec.tsx} | 14 ++-- ...rror-component.jsx => error-component.tsx} | 16 +--- .../routes/error-component/index.js | 3 - .../routes/error-component/index.ts | 3 + .../cashier/src/containers/routes/index.js | 3 - .../cashier/src/containers/routes/index.ts | 3 + ...b-routes.jsx => route-with-sub-routes.tsx} | 19 +++-- .../cashier/src/containers/routes/routes.jsx | 34 -------- .../cashier/src/containers/routes/routes.tsx | 30 +++++++ .../src/pages/p2p-cashier/p2p-cashier.jsx | 46 ++++++----- .../cashier/src/types/shared/error.types.ts | 19 +++++ packages/cashier/src/types/shared/index.ts | 3 + .../cashier/src/types/shared/routes.types.ts | 20 +++++ .../src/types/shared/websocket.types.ts | 5 ++ .../src/types/stores/client-store.types.ts | 2 + .../src/types/stores/common-store.types.ts | 18 +++++ .../src/types/stores/ui-store.types.ts | 2 + 28 files changed, 246 insertions(+), 183 deletions(-) rename packages/cashier/src/constants/{routes-config.js => routes-config.ts} (88%) rename packages/cashier/src/containers/cashier/__tests__/{cashier.spec.js => cashier.spec.tsx} (97%) rename packages/cashier/src/containers/cashier/{cashier.jsx => cashier.tsx} (86%) delete mode 100644 packages/cashier/src/containers/cashier/index.js create mode 100644 packages/cashier/src/containers/cashier/index.ts rename packages/cashier/src/containers/{index.js => index.ts} (100%) rename packages/cashier/src/containers/routes/__tests__/{route-with-sub-routes.spec.js => route-with-sub-routes.spec.tsx} (99%) rename packages/cashier/src/containers/routes/__tests__/{routes.spec.js => routes.spec.tsx} (95%) delete mode 100644 packages/cashier/src/containers/routes/binary-routes.jsx create mode 100644 packages/cashier/src/containers/routes/binary-routes.tsx rename packages/cashier/src/containers/routes/error-component/__tests__/{error-component.spec.js => error-component.spec.tsx} (90%) rename packages/cashier/src/containers/routes/error-component/{error-component.jsx => error-component.tsx} (78%) delete mode 100644 packages/cashier/src/containers/routes/error-component/index.js create mode 100644 packages/cashier/src/containers/routes/error-component/index.ts delete mode 100644 packages/cashier/src/containers/routes/index.js create mode 100644 packages/cashier/src/containers/routes/index.ts rename packages/cashier/src/containers/routes/{route-with-sub-routes.jsx => route-with-sub-routes.tsx} (70%) delete mode 100644 packages/cashier/src/containers/routes/routes.jsx create mode 100644 packages/cashier/src/containers/routes/routes.tsx create mode 100644 packages/cashier/src/types/shared/error.types.ts create mode 100644 packages/cashier/src/types/shared/routes.types.ts create mode 100644 packages/cashier/src/types/shared/websocket.types.ts diff --git a/packages/cashier/src/components/error-dialog/error-dialog.tsx b/packages/cashier/src/components/error-dialog/error-dialog.tsx index ffffafcccac7..d30581334615 100644 --- a/packages/cashier/src/components/error-dialog/error-dialog.tsx +++ b/packages/cashier/src/components/error-dialog/error-dialog.tsx @@ -4,16 +4,12 @@ import { Dialog } from '@deriv/components'; import { localize, Localize } from '@deriv/translations'; import { routes } from '@deriv/shared'; import { connect } from 'Stores/connect'; -import { RootStore, TReactElement } from 'Types'; +import { RootStore, TError, TReactElement } from 'Types'; type TErrorDialogProps = { disableApp: () => void; enableApp: () => void; - error: { - message?: string; - code?: string; - setErrorMessage?: (message: string) => void; - }; + error: TError | Record; }; type TSetDetails = { @@ -36,6 +32,13 @@ const ErrorDialog = ({ disableApp, enableApp, error = {} }: TErrorDialogProps) = message: '', }); + const dismissError = React.useCallback(() => { + if (error.setErrorMessage) { + error.setErrorMessage('', null, false); + } + setErrorVisibility(false); + }, [error]); + const mapErrorToDetails = React.useCallback( (error_code?: string, error_message?: string) => { if ( @@ -118,13 +121,6 @@ const ErrorDialog = ({ disableApp, enableApp, error = {} }: TErrorDialogProps) = setIsVisible(is_error_visible); }; - const dismissError = React.useCallback(() => { - if (error.setErrorMessage) { - error.setErrorMessage(''); - } - setErrorVisibility(false); - }, [error]); - return ( moduleLoader(() => import(/* webpackChunkName: "404" */ 'Components/page-404'))); +export type TPage404 = typeof Page404; // Order matters -const initRoutesConfig = () => [ +const initRoutesConfig = (): TRouteConfig[] => [ { path: routes.cashier, component: Cashier, @@ -72,14 +74,14 @@ const initRoutesConfig = () => [ }, ]; -let routesConfig; +let routesConfig: undefined | TRouteConfig[]; // 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 route_default: TRoute = { component: Page404, getTitle: () => localize('Error 404') }; -const getRoutesConfig = ({ is_appstore }) => { +const getRoutesConfig = (): TRouteConfig[] => { if (!routesConfig) { - routesConfig = initRoutesConfig({ is_appstore }); + routesConfig = initRoutesConfig(); routesConfig.push(route_default); } return routesConfig; diff --git a/packages/cashier/src/containers/cashier/__tests__/cashier.spec.js b/packages/cashier/src/containers/cashier/__tests__/cashier.spec.tsx similarity index 97% rename from packages/cashier/src/containers/cashier/__tests__/cashier.spec.js rename to packages/cashier/src/containers/cashier/__tests__/cashier.spec.tsx index dd93ceda203f..68a921a0cc79 100644 --- a/packages/cashier/src/containers/cashier/__tests__/cashier.spec.js +++ b/packages/cashier/src/containers/cashier/__tests__/cashier.spec.tsx @@ -4,7 +4,7 @@ import { createBrowserHistory } from 'history'; import { Router } from 'react-router'; import { isMobile } from '@deriv/shared'; import getRoutesConfig from 'Constants/routes-config'; -import Cashier from '../cashier.jsx'; +import Cashier from '../cashier'; jest.mock('Stores/connect', () => ({ __esModule: true, @@ -58,7 +58,7 @@ describe('', () => { is_p2p_enabled: true, is_onramp_tab_visible: true, is_visible: true, - routes: getRoutesConfig({})[0].routes, + routes: getRoutesConfig()[0].routes, routeBackInApp: jest.fn(), onMount: jest.fn(), setAccountSwitchListener: jest.fn(), @@ -121,7 +121,7 @@ describe('', () => { }); it('should show the selected route page on mobile', () => { - isMobile.mockReturnValue(true); + (isMobile as jest.Mock).mockReturnValue(true); renderWithRouter(); diff --git a/packages/cashier/src/containers/cashier/cashier.jsx b/packages/cashier/src/containers/cashier/cashier.tsx similarity index 86% rename from packages/cashier/src/containers/cashier/cashier.jsx rename to packages/cashier/src/containers/cashier/cashier.tsx index 427097a930ae..501fa5d7877e 100644 --- a/packages/cashier/src/containers/cashier/cashier.jsx +++ b/packages/cashier/src/containers/cashier/cashier.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import PropTypes from 'prop-types'; +import { RouteComponentProps } from 'react-router'; import { withRouter } from 'react-router-dom'; import { Button, @@ -11,13 +11,50 @@ import { VerticalTab, Loading, } from '@deriv/components'; -import { localize } from '@deriv/translations'; import { getSelectedRoute, getStaticUrl, isMobile, routes, WS } from '@deriv/shared'; -import { connect } from 'Stores/connect'; +import { localize } from '@deriv/translations'; import AccountPromptDialog from 'Components/account-prompt-dialog'; import ErrorDialog from 'Components/error-dialog'; +import { connect } from 'Stores/connect'; +import { TClientStore, TCommonStore, TError, TRootStore, TRoute, TUiStore } from 'Types'; import './cashier.scss'; +type TCashierProps = RouteComponentProps & { + error: TError; + is_account_transfer_visible: boolean; + is_account_setting_loaded: TClientStore['is_account_setting_loaded']; + is_cashier_onboarding: boolean; + is_crypto: boolean; + is_crypto_transactions_visible: boolean; + is_loading: boolean; + is_logged_in: TClientStore['is_logged_in']; + is_logging_in: TClientStore['is_logging_in']; + is_from_derivgo: TCommonStore['is_from_derivgo']; + is_onramp_tab_visible: boolean; + is_p2p_enabled: boolean; + is_payment_agent_transfer_visible: boolean; + is_payment_agent_visible: boolean; + is_visible: TUiStore['is_cashier_visible']; + p2p_notification_count: number; + routes: TRoute[]; + tab_index: number; + onMount: (should_remount?: boolean) => void; + setAccountSwitchListener: () => void; + setTabIndex: (index: number) => void; + routeBackInApp: TCommonStore['routeBackInApp']; + toggleCashier: TUiStore['toggleCashier']; +}; + +type TCashierOptions = { + count?: number; + default?: boolean; + has_side_note: boolean; + icon?: string; + label: string; + path?: string; + value: TRoute['component']; +}; + const Cashier = ({ error, history, @@ -45,7 +82,7 @@ const Cashier = ({ setTabIndex, tab_index, toggleCashier, -}) => { +}: TCashierProps) => { React.useEffect(() => { toggleCashier(); // we still need to populate the tabs shown on cashier @@ -65,7 +102,7 @@ const Cashier = ({ const onClickClose = () => routeBackInApp(history); const getMenuOptions = () => { - const options = []; + const options: TCashierOptions[] = []; routes_config.forEach(route => { if ( !route.is_invisible && @@ -179,36 +216,7 @@ const Cashier = ({ ); }; -Cashier.propTypes = { - error: PropTypes.object, - history: PropTypes.object, - is_account_transfer_visible: PropTypes.bool, - is_account_setting_loaded: PropTypes.bool, - is_cashier_onboarding: PropTypes.bool, - is_crypto: PropTypes.bool, - is_crypto_transactions_visible: PropTypes.bool, - is_loading: PropTypes.bool, - is_logged_in: PropTypes.bool, - is_logging_in: PropTypes.bool, - is_from_derivgo: PropTypes.bool, - is_onramp_tab_visible: PropTypes.bool, - is_p2p_enabled: PropTypes.bool, - is_payment_agent_transfer_visible: PropTypes.bool, - is_payment_agent_visible: PropTypes.bool, - is_virtual: PropTypes.bool, - is_visible: PropTypes.bool, - location: PropTypes.object, - onMount: PropTypes.func, - p2p_notification_count: PropTypes.number, - routeBackInApp: PropTypes.func, - routes: PropTypes.arrayOf(PropTypes.object), - setAccountSwitchListener: PropTypes.func, - setTabIndex: PropTypes.func, - tab_index: PropTypes.number, - toggleCashier: PropTypes.func, -}; - -export default connect(({ client, common, modules, ui }) => ({ +export default connect(({ client, common, modules, ui }: TRootStore) => ({ error: modules.cashier.withdraw.error, is_cashier_onboarding: modules.cashier.general_store.is_cashier_onboarding, is_account_transfer_visible: modules.cashier.account_transfer.is_account_transfer_visible, diff --git a/packages/cashier/src/containers/cashier/index.js b/packages/cashier/src/containers/cashier/index.js deleted file mode 100644 index 621028d502e5..000000000000 --- a/packages/cashier/src/containers/cashier/index.js +++ /dev/null @@ -1,3 +0,0 @@ -import Cashier from './cashier.jsx'; - -export default Cashier; diff --git a/packages/cashier/src/containers/cashier/index.ts b/packages/cashier/src/containers/cashier/index.ts new file mode 100644 index 000000000000..bd3cd84ed3a9 --- /dev/null +++ b/packages/cashier/src/containers/cashier/index.ts @@ -0,0 +1,3 @@ +import Cashier from './cashier'; + +export default Cashier; diff --git a/packages/cashier/src/containers/index.js b/packages/cashier/src/containers/index.ts similarity index 100% rename from packages/cashier/src/containers/index.js rename to packages/cashier/src/containers/index.ts diff --git a/packages/cashier/src/containers/routes/__tests__/route-with-sub-routes.spec.js b/packages/cashier/src/containers/routes/__tests__/route-with-sub-routes.spec.tsx similarity index 99% rename from packages/cashier/src/containers/routes/__tests__/route-with-sub-routes.spec.js rename to packages/cashier/src/containers/routes/__tests__/route-with-sub-routes.spec.tsx index 4496e5f6e482..9c4717ed9e42 100644 --- a/packages/cashier/src/containers/routes/__tests__/route-with-sub-routes.spec.js +++ b/packages/cashier/src/containers/routes/__tests__/route-with-sub-routes.spec.tsx @@ -2,7 +2,7 @@ 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 { RouteWithSubRoutesRender } from '../route-with-sub-routes'; import { Redirect } from 'react-router-dom'; configure({ adapter: new Adapter() }); diff --git a/packages/cashier/src/containers/routes/__tests__/routes.spec.js b/packages/cashier/src/containers/routes/__tests__/routes.spec.tsx similarity index 95% rename from packages/cashier/src/containers/routes/__tests__/routes.spec.js rename to packages/cashier/src/containers/routes/__tests__/routes.spec.tsx index 304aecef22e0..91e980ea8637 100644 --- a/packages/cashier/src/containers/routes/__tests__/routes.spec.js +++ b/packages/cashier/src/containers/routes/__tests__/routes.spec.tsx @@ -10,7 +10,7 @@ jest.mock('Stores/connect.js', () => ({ connect: () => Component => Component, })); -jest.mock('../binary-routes', () => () =>
BinaryRoutes
); +jest.mock('../binary-routes', () => jest.fn(() => 'BinaryRoutes')); describe('', () => { it('should show error messages when "has_error = true"', () => { diff --git a/packages/cashier/src/containers/routes/binary-routes.jsx b/packages/cashier/src/containers/routes/binary-routes.jsx deleted file mode 100644 index 8c331893583f..000000000000 --- a/packages/cashier/src/containers/routes/binary-routes.jsx +++ /dev/null @@ -1,29 +0,0 @@ -import React from 'react'; -import { Switch } from 'react-router-dom'; -import { Localize, PlatformContext } from '@deriv/shared'; -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, idx) => ( - - ))} - - - ); -}; - -export default BinaryRoutes; diff --git a/packages/cashier/src/containers/routes/binary-routes.tsx b/packages/cashier/src/containers/routes/binary-routes.tsx new file mode 100644 index 000000000000..1df8f215db5b --- /dev/null +++ b/packages/cashier/src/containers/routes/binary-routes.tsx @@ -0,0 +1,32 @@ +import React from 'react'; +import { Switch } from 'react-router-dom'; +import { Localize } from '@deriv/shared'; +import getRoutesConfig from 'Constants/routes-config'; +import RouteWithSubRoutes from './route-with-sub-routes'; + +type TBinaryRoutesProps = { + is_logged_in: boolean; + is_logging_in: boolean; +}; + +const Loading = () => { + return ( +
+ +
+ ); +}; + +const BinaryRoutes = (props: TBinaryRoutesProps) => { + return ( + }> + + {getRoutesConfig().map((route, idx: number) => ( + + ))} + + + ); +}; + +export default BinaryRoutes; diff --git a/packages/cashier/src/containers/routes/error-component/__tests__/error-component.spec.js b/packages/cashier/src/containers/routes/error-component/__tests__/error-component.spec.tsx similarity index 90% rename from packages/cashier/src/containers/routes/error-component/__tests__/error-component.spec.js rename to packages/cashier/src/containers/routes/error-component/__tests__/error-component.spec.tsx index 6e3d7feaa138..e11e241e5253 100644 --- a/packages/cashier/src/containers/routes/error-component/__tests__/error-component.spec.js +++ b/packages/cashier/src/containers/routes/error-component/__tests__/error-component.spec.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { screen, render, fireEvent } from '@testing-library/react'; -import ErrorComponent from '../error-component.jsx'; +import ErrorComponent from '../error-component'; import { Router } from 'react-router-dom'; import { createBrowserHistory } from 'history'; @@ -11,7 +11,7 @@ describe('', () => { return render({component}); }; const reloadFn = () => { - window.location.reload(true); + window.location.reload(); }; beforeAll(() => { Object.defineProperty(window, 'location', { @@ -40,7 +40,7 @@ describe('', () => { it('do not show refresh message when should_show_refresh is false', () => { const refreshRequestText = screen.queryByText('Please refresh this page to continue.'); renderWithRouter(); - expect(refreshRequestText).toBeNull(); + expect(refreshRequestText).not.toBeInTheDocument(); }); it('should show default message when header message is not passed', () => { const header = ''; @@ -66,13 +66,9 @@ describe('', () => { }); it('should trigger the history.listen and call the setError function when redirect button get clicked', () => { const redirectOnClick = jest.fn(); - const history = createBrowserHistory(); const setError = jest.fn(); - render( - - - - ); + renderWithRouter(); + fireEvent.click(screen.getByText('testlabel')); if (typeof setError === 'function') { expect(setError).toHaveBeenCalledTimes(1); diff --git a/packages/cashier/src/containers/routes/error-component/error-component.jsx b/packages/cashier/src/containers/routes/error-component/error-component.tsx similarity index 78% rename from packages/cashier/src/containers/routes/error-component/error-component.jsx rename to packages/cashier/src/containers/routes/error-component/error-component.tsx index fbc790d32df8..9ccbb0b6b69b 100644 --- a/packages/cashier/src/containers/routes/error-component/error-component.jsx +++ b/packages/cashier/src/containers/routes/error-component/error-component.tsx @@ -1,9 +1,9 @@ -import PropTypes from 'prop-types'; import React from 'react'; import { useHistory } from 'react-router-dom'; import { PageError } from '@deriv/components'; import { routes } from '@deriv/shared'; import { Localize } from '@deriv/translations'; +import { TCommonStore } from 'Types'; const ErrorComponent = ({ header, @@ -14,7 +14,7 @@ const ErrorComponent = ({ setError, redirect_to = routes.trade, should_show_refresh = true, -}) => { +}: TCommonStore['error']) => { const history = useHistory(); React.useEffect(() => { @@ -55,16 +55,4 @@ const ErrorComponent = ({ ); }; -ErrorComponent.propTypes = { - header: PropTypes.oneOfType([PropTypes.string, PropTypes.node]), - message: PropTypes.oneOfType([PropTypes.node, PropTypes.string, PropTypes.object]), - redirect_label: PropTypes.string, - redirect_to: PropTypes.string, - redirectOnClick: PropTypes.func, - setError: PropTypes.func, - should_clear_error_on_click: PropTypes.bool, - should_show_refresh: PropTypes.bool, - type: PropTypes.string, -}; - export default ErrorComponent; diff --git a/packages/cashier/src/containers/routes/error-component/index.js b/packages/cashier/src/containers/routes/error-component/index.js deleted file mode 100644 index 7673d0bd01f2..000000000000 --- a/packages/cashier/src/containers/routes/error-component/index.js +++ /dev/null @@ -1,3 +0,0 @@ -import ErrorComponent from './error-component.jsx'; - -export default ErrorComponent; diff --git a/packages/cashier/src/containers/routes/error-component/index.ts b/packages/cashier/src/containers/routes/error-component/index.ts new file mode 100644 index 000000000000..8585809410a1 --- /dev/null +++ b/packages/cashier/src/containers/routes/error-component/index.ts @@ -0,0 +1,3 @@ +import ErrorComponent from './error-component'; + +export default ErrorComponent; diff --git a/packages/cashier/src/containers/routes/index.js b/packages/cashier/src/containers/routes/index.js deleted file mode 100644 index 45af7ceb129e..000000000000 --- a/packages/cashier/src/containers/routes/index.js +++ /dev/null @@ -1,3 +0,0 @@ -import Routes from './routes.jsx'; - -export default Routes; diff --git a/packages/cashier/src/containers/routes/index.ts b/packages/cashier/src/containers/routes/index.ts new file mode 100644 index 000000000000..1c741ab9d547 --- /dev/null +++ b/packages/cashier/src/containers/routes/index.ts @@ -0,0 +1,3 @@ +import Routes from './routes'; + +export default Routes; diff --git a/packages/cashier/src/containers/routes/route-with-sub-routes.jsx b/packages/cashier/src/containers/routes/route-with-sub-routes.tsx similarity index 70% rename from packages/cashier/src/containers/routes/route-with-sub-routes.jsx rename to packages/cashier/src/containers/routes/route-with-sub-routes.tsx index c333f68c67d1..36a985b0615e 100644 --- a/packages/cashier/src/containers/routes/route-with-sub-routes.jsx +++ b/packages/cashier/src/containers/routes/route-with-sub-routes.tsx @@ -1,18 +1,26 @@ import React from 'react'; +import { RouteComponentProps } from 'react-router'; import { Redirect, Route } from 'react-router-dom'; import { alternateLinkTagChange, canonicalLinkTagChange, redirectToLogin, - isEmptyObject, routes, removeBranchName, default_title, } from '@deriv/shared'; import { getLanguage } from '@deriv/translations'; +import { TClientStore, TRouteConfig, TRoute } from 'Types'; -const RouteWithSubRoutes = route => { - const renderFactory = props => { +type TRouteWithSubRoutesProps = TRouteConfig & { + is_logged_in: TClientStore['is_logged_in']; + is_logging_in: TClientStore['is_logging_in']; +}; + +type TDefaultSubroute = TRoute | undefined; + +const RouteWithSubRoutes = (route: TRouteWithSubRoutesProps) => { + const renderFactory = (props: RouteComponentProps) => { let result = null; if (route.component === Redirect) { let to = route.to; @@ -26,12 +34,11 @@ const RouteWithSubRoutes = route => { } 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 default_subroute: TDefaultSubroute = route.routes?.find(r => r.default); const pathname = removeBranchName(location.pathname); result = ( - {has_default_subroute && pathname === route.path && } + {!!default_subroute && pathname === route.path && } ); diff --git a/packages/cashier/src/containers/routes/routes.jsx b/packages/cashier/src/containers/routes/routes.jsx deleted file mode 100644 index d81878b0b591..000000000000 --- a/packages/cashier/src/containers/routes/routes.jsx +++ /dev/null @@ -1,34 +0,0 @@ -import PropTypes from 'prop-types'; -import React from 'react'; -import { withRouter } from 'react-router'; -import { connect } from 'Stores/connect'; -import BinaryRoutes from './binary-routes.jsx'; -import ErrorComponent from './error-component'; - -const Routes = ({ error, has_error, is_logged_in, is_logging_in, passthrough }) => { - if (has_error) { - return ; - } - - return ; -}; - -Routes.propTypes = { - error: PropTypes.any, - has_error: PropTypes.bool, - is_logged_in: PropTypes.bool, - is_logging_in: PropTypes.bool, - is_virtual: PropTypes.bool, - passthrough: PropTypes.object, -}; - -// 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/cashier/src/containers/routes/routes.tsx b/packages/cashier/src/containers/routes/routes.tsx new file mode 100644 index 000000000000..ef00cade523d --- /dev/null +++ b/packages/cashier/src/containers/routes/routes.tsx @@ -0,0 +1,30 @@ +import React from 'react'; +import { RouteComponentProps, withRouter } from 'react-router'; +import { connect } from 'Stores/connect'; +import { TClientStore, TCommonStore, TRootStore } from 'Types'; +import BinaryRoutes from './binary-routes'; +import ErrorComponent from './error-component'; + +type TRoutesProps = RouteComponentProps & { + error: TCommonStore['error']; + has_error: TCommonStore['has_error']; + is_logged_in: TClientStore['is_logged_in']; + is_logging_in: TClientStore['is_logging_in']; +}; + +const Routes = ({ error, has_error, is_logged_in, is_logging_in }: TRoutesProps) => { + if (has_error) { + return ; + } + + return ; +}; + +// need to wrap withRouter around connect +// to prevent updates on from being blocked +export default connect(({ client, common }: TRootStore) => ({ + is_logged_in: client.is_logged_in, + is_logging_in: client.is_logging_in, + error: common.error, + has_error: common.has_error, +}))(withRouter(Routes)); diff --git a/packages/cashier/src/pages/p2p-cashier/p2p-cashier.jsx b/packages/cashier/src/pages/p2p-cashier/p2p-cashier.jsx index b0cabc53bb00..0bb43fdd7bfe 100644 --- a/packages/cashier/src/pages/p2p-cashier/p2p-cashier.jsx +++ b/packages/cashier/src/pages/p2p-cashier/p2p-cashier.jsx @@ -141,27 +141,25 @@ P2PCashier.propTypes = { setCurrentFocus: PropTypes.func, }; -export default withRouter( - connect(({ client, common, modules, notifications, ui }) => ({ - addNotificationMessage: notifications.addNotificationMessage, - balance: client.balance, - currency: client.currency, - filterNotificationMessages: notifications.filterNotificationMessages, - local_currency_config: client.local_currency_config, - loginid: client.loginid, - is_dark_mode_on: ui.is_dark_mode_on, - is_logging_in: client.is_logging_in, - is_virtual: client.is_virtual, - Notifications: ui.notification_messages_ui, - platform: common.platform, - refreshNotifications: notifications.refreshNotifications, - removeNotificationByKey: notifications.removeNotificationByKey, - removeNotificationMessage: notifications.removeNotificationMessage, - residence: client.residence, - setNotificationCount: modules.cashier.general_store.setNotificationCount, - setOnRemount: modules.cashier.general_store.setOnRemount, - is_mobile: ui.is_mobile, - setCurrentFocus: ui.setCurrentFocus, - current_focus: ui.current_focus, - }))(P2PCashier) -); +export default connect(({ client, common, modules, notifications, ui }) => ({ + addNotificationMessage: notifications.addNotificationMessage, + balance: client.balance, + currency: client.currency, + filterNotificationMessages: notifications.filterNotificationMessages, + local_currency_config: client.local_currency_config, + loginid: client.loginid, + is_dark_mode_on: ui.is_dark_mode_on, + is_logging_in: client.is_logging_in, + is_virtual: client.is_virtual, + Notifications: ui.notification_messages_ui, + platform: common.platform, + refreshNotifications: notifications.refreshNotifications, + removeNotificationByKey: notifications.removeNotificationByKey, + removeNotificationMessage: notifications.removeNotificationMessage, + residence: client.residence, + setNotificationCount: modules.cashier.general_store.setNotificationCount, + setOnRemount: modules.cashier.general_store.setOnRemount, + is_mobile: ui.is_mobile, + setCurrentFocus: ui.setCurrentFocus, + current_focus: ui.current_focus, +}))(withRouter(P2PCashier)); diff --git a/packages/cashier/src/types/shared/error.types.ts b/packages/cashier/src/types/shared/error.types.ts new file mode 100644 index 000000000000..bb50f607fd69 --- /dev/null +++ b/packages/cashier/src/types/shared/error.types.ts @@ -0,0 +1,19 @@ +import { TServerError } from 'Types'; + +// Type of the instance of the ErrorStore +export type TError = { + code?: string; + fields: string; + is_ask_authentication: boolean; + is_ask_financial_risk_approval: boolean; + is_ask_uk_funds_protection: boolean; + is_self_exclusion_max_turnover_set: boolean; + is_show_full_page: boolean; + message?: string; + onClickButton: (() => void) | null; + setErrorMessage: ( + error: TServerError | string, + onClickButton: TError['onClickButton'], + is_show_full_page: boolean + ) => void; +}; diff --git a/packages/cashier/src/types/shared/index.ts b/packages/cashier/src/types/shared/index.ts index f9e5944749c5..f3a0d2a8358e 100644 --- a/packages/cashier/src/types/shared/index.ts +++ b/packages/cashier/src/types/shared/index.ts @@ -1,2 +1,5 @@ export * from './crypto-transaction-details.types'; +export * from './error.types'; export * from './props.types'; +export * from './routes.types'; +export * from './websocket.types'; diff --git a/packages/cashier/src/types/shared/routes.types.ts b/packages/cashier/src/types/shared/routes.types.ts new file mode 100644 index 000000000000..5828c7d951e4 --- /dev/null +++ b/packages/cashier/src/types/shared/routes.types.ts @@ -0,0 +1,20 @@ +import { Redirect } from 'react-router-dom'; +import { TPage404 } from 'Constants/routes-config'; + +export type TRoute = { + default?: boolean; + exact?: boolean; + id?: string; + icon_component?: string; + is_invisible?: boolean; + path?: string; + to?: string; + component: ((cashier_routes?: TRoute[]) => JSX.Element) | TPage404 | typeof Redirect; + getTitle: () => string; +}; + +export type TRouteConfig = TRoute & { + is_modal?: boolean; + is_authenticated?: boolean; + routes?: TRoute[]; +}; diff --git a/packages/cashier/src/types/shared/websocket.types.ts b/packages/cashier/src/types/shared/websocket.types.ts new file mode 100644 index 000000000000..6e8b81bc6745 --- /dev/null +++ b/packages/cashier/src/types/shared/websocket.types.ts @@ -0,0 +1,5 @@ +export type TServerError = { + code: string; + message: string; + details?: { [key: string]: string }; +}; diff --git a/packages/cashier/src/types/stores/client-store.types.ts b/packages/cashier/src/types/stores/client-store.types.ts index 06ce905676f3..45e536f01fdf 100644 --- a/packages/cashier/src/types/stores/client-store.types.ts +++ b/packages/cashier/src/types/stores/client-store.types.ts @@ -9,8 +9,10 @@ export type TClientStore = { currency: string; current_currency_type?: string; current_fiat_currency?: string; + is_account_setting_loaded: boolean; is_deposit_lock: boolean; is_identity_verification_needed: boolean; + is_logged_in: boolean; is_logging_in: boolean; is_switching: boolean; is_virtual: boolean; diff --git a/packages/cashier/src/types/stores/common-store.types.ts b/packages/cashier/src/types/stores/common-store.types.ts index 5a162b371afc..86e6efb0041c 100644 --- a/packages/cashier/src/types/stores/common-store.types.ts +++ b/packages/cashier/src/types/stores/common-store.types.ts @@ -1,4 +1,22 @@ +import { RouteComponentProps } from 'react-router'; + +type TError = { + header: string | JSX.Element; + message: string | JSX.Element; + type?: string; + redirect_label: string; + redirect_to: string; + should_clear_error_on_click: boolean; + should_show_refresh: boolean; + redirectOnClick: () => void; + setError: (has_error: boolean, error: TError | null) => void; +}; + export type TCommonStore = { + error: TError; + is_from_derivgo: boolean; + has_error: boolean; platform: string; + routeBackInApp: (history: Pick, additional_platform_path?: string[]) => void; routeTo: (pathname: string) => void; }; diff --git a/packages/cashier/src/types/stores/ui-store.types.ts b/packages/cashier/src/types/stores/ui-store.types.ts index d4c40da1649c..078110fee212 100644 --- a/packages/cashier/src/types/stores/ui-store.types.ts +++ b/packages/cashier/src/types/stores/ui-store.types.ts @@ -1,9 +1,11 @@ export type TUiStore = { current_focus: string | null; + is_cashier_visible: boolean; is_dark_mode_on: boolean; is_mobile: boolean; disableApp: () => void; enableApp: () => void; setCurrentFocus: (value: string) => void; toggleAccountsDialog: () => void; + toggleCashier: () => void; };