Utkarsha/ts migration constant files in accounts package

packages/account/src/Components/Routes/__tests__/binary-link.spec.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import { Router } from 'react-router-dom';
 import { createBrowserHistory } from 'history';
 import { fireEvent, render, screen } from '@testing-library/react';
-import { PlatformContext } from '@deriv/shared';
 import { findRouteByPath } from '../helpers';
 import BinaryLink from '../binary-link';
 
@@ -20,11 +19,9 @@ describe('<BinaryLink />', () => {
 
     it('should show and trigger Navlink with path and active className', () => {
         render(
-            <PlatformContext.Provider value={{ is_appstore: false, is_deriv_crypto: false, is_pre_appstore: false }}>
-                <Router history={history}>
-                    <BinaryLink to='test-link'>Simple test link</BinaryLink>
-                </Router>
-            </PlatformContext.Provider>
+            <Router history={history}>
+                <BinaryLink to='test-link'>Simple test link</BinaryLink>
+            </Router>
         );
 
         expect(screen.getByText('Simple test link')).toBeInTheDocument();
@@ -35,28 +32,21 @@ describe('<BinaryLink />', () => {
 
     it('should show simple link text', () => {
         render(
-            <PlatformContext.Provider value={{ is_appstore: false, is_deriv_crypto: false, is_pre_appstore: false }}>
-                <Router history={history}>
-                    <BinaryLink>Simple test link without Navlink</BinaryLink>
-                </Router>
-            </PlatformContext.Provider>
+            <Router history={history}>
+                <BinaryLink>Simple test link without Navlink</BinaryLink>
+            </Router>
         );
 
         expect(screen.getByText('Simple test link without Navlink')).toBeInTheDocument();
     });
     it('should thorw error if the path is not found', () => {
         findRouteByPath.mockReturnValue('');
-
-        expect(() =>
+        const renderBinaryLink = () =>
             render(
-                <PlatformContext.Provider
-                    value={{ is_appstore: false, is_deriv_crypto: false, is_pre_appstore: false }}
-                >
-                    <Router history={history}>
-                        <BinaryLink to='test-link'>Simple test link</BinaryLink>
-                    </Router>
-                </PlatformContext.Provider>
-            )
-        ).toThrowError(/route not found: test-link/i);
+                <Router history={history}>
+                    <BinaryLink to='test-link'>Simple test link</BinaryLink>
+                </Router>
+            );
+        expect(renderBinaryLink).toThrowError(/route not found: test-link/i);
     });
 });

packages/account/src/Components/Routes/__tests__/binary-routes.spec.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import { Router } from 'react-router-dom';
 import { createBrowserHistory } from 'history';
 import { render, screen } from '@testing-library/react';
-import { PlatformContext } from '@deriv/shared';
 import BinaryRoutes from '../binary-routes';
 
 jest.mock('../route-with-sub-routes', () => jest.fn(() => <div>RouteWithSubRoutes</div>));
@@ -14,11 +13,9 @@ describe('<BinaryRoutes />', () => {
 
     it('should render BinaryRoutes with mocked route component', () => {
         render(
-            <PlatformContext.Provider value={{ is_appstore: false, is_deriv_crypto: false, is_pre_appstore: false }}>
-                <Router history={history}>
-                    <BinaryRoutes />
-                </Router>
-            </PlatformContext.Provider>
+            <Router history={history}>
+                <BinaryRoutes />
+            </Router>
         );
 
         expect(screen.getByText('RouteWithSubRoutes')).toBeInTheDocument();

packages/account/src/Components/Routes/binary-link.tsx

@@ -1,6 +1,5 @@
 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';
 
@@ -10,9 +9,8 @@ type TBinaryLink = {
 };
 
 const BinaryLink = ({ active_class, to, children, ...props }: React.PropsWithChildren<Partial<TBinaryLink>>) => {
-    const { is_appstore } = React.useContext(PlatformContext);
     const path = normalizePath(to as string);
-    const route = findRouteByPath(path, getRoutesConfig({ is_appstore }));
+    const route = findRouteByPath(path, getRoutesConfig());
 
     if (!route) {
         throw new Error(`Route not found: ${to}`);

packages/account/src/Components/Routes/binary-routes.tsx

@@ -1,14 +1,11 @@
 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 { TBinaryRoutes, TRoute } from 'Types';
 import RouteWithSubRoutes from './route-with-sub-routes';
 
 const BinaryRoutes = (props: TBinaryRoutes) => {
-    const { is_appstore } = React.useContext(PlatformContext);
-
     return (
         <React.Suspense
             fallback={
@@ -18,7 +15,7 @@ const BinaryRoutes = (props: TBinaryRoutes) => {
             }
         >
             <Switch>
-                {getRoutesConfig({ is_appstore }).map((route: TRoute, idx: number) => (
+                {getRoutesConfig().map((route: TRoute, idx: number) => (
                     <RouteWithSubRoutes key={idx} {...route} {...props} />
                 ))}
             </Switch>

packages/account/src/Constants/onfido-phrases.js → packages/account/src/Constants/onfido-phrases.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import { Localize } from '@deriv/translations';
+import { LocaleConfig } from 'onfido-sdk-ui';
 
-const getOnfidoPhrases = () => ({
+const getOnfidoPhrases = (): LocaleConfig['phrases'] => ({
     country_select: {
         alert_dropdown: {
             country_not_found: <Localize i18n_default_text='Country not found' />,

packages/account/src/Constants/routes-config.js → packages/account/src/Constants/routes-config.ts

@@ -20,13 +20,16 @@ import {
     AccountClosed,
     DeactivateAccount,
     LanguageSettings,
-} from 'Sections';
+} from '../Sections';
+
+import { TRoute, TRouteConfig } from '../Types';
 
 // Error Routes
 const Page404 = React.lazy(() => moduleLoader(() => import(/* webpackChunkName: "404" */ 'Modules/Page404')));
+export type TPage404 = typeof Page404;
 
 // Order matters
-const initRoutesConfig = ({ is_appstore }) => [
+const initRoutesConfig = (): TRouteConfig[] => [
     {
         path: routes.account_closed,
         component: AccountClosed,
@@ -112,27 +115,23 @@ const initRoutesConfig = ({ is_appstore }) => [
                     {
                         path: routes.self_exclusion,
                         component: SelfExclusion,
-                        getTitle: () => (is_appstore ? localize('Self-exclusion') : localize('Self exclusion')),
+                        getTitle: () => localize('Self exclusion'),
                     },
                     {
                         path: routes.account_limits,
                         component: AccountLimits,
-                        getTitle: () => (is_appstore ? localize('Withdrawal limits') : localize('Account limits')),
+                        getTitle: () => localize('Account limits'),
                     },
                     {
                         path: routes.login_history,
                         component: LoginHistory,
                         getTitle: () => localize('Login history'),
                     },
-                    ...(is_appstore
-                        ? []
-                        : [
-                              {
-                                  path: routes.api_token,
-                                  component: ApiToken,
-                                  getTitle: () => localize('API token'),
-                              },
-                          ]),
+                    {
+                        path: routes.api_token,
+                        component: ApiToken,
+                        getTitle: () => localize('API token'),
+                    },
                     {
                         path: routes.connected_apps,
                         component: ConnectedApps,
@@ -150,30 +149,18 @@ const initRoutesConfig = ({ is_appstore }) => [
                     },
                 ],
             },
-            // TO DO -- Please remove these comments after changing for dashboard routes
-            // It is possible to add a Deriv Dashboard only path.
-            // ...(is_appstore
-            //     ? [
-            //           {
-            //               component: Home,
-            //               getTitle: () => localize('Dashboard-only path'),
-            //               is_authenticated: false,
-            //               path: routes.resources,
-            //           },
-            //       ]
-            //     : []),
         ],
     },
 ];
 
-let routesConfig;
+let routesConfig: TRouteConfig[] | undefined;
 
 // 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;

packages/account/src/Types/common-prop.type.ts

@@ -1,7 +1,8 @@
 /** Add types that are shared between components */
 import { FormikHandlers, FormikProps, FormikValues } from 'formik';
 import { Authorize, IdentityVerificationAddDocumentResponse, ResidenceList } from '@deriv/api-types';
-import { Redirect } from 'react-router-dom';
+import { Redirect, RouteProps } from 'react-router-dom';
+import { TPage404 } from '../Constants/routes-config';
 
 export type TToken = {
     display_name: string;
@@ -65,7 +66,7 @@ export type TRoute = {
     icon?: string;
     default?: boolean;
     to?: string;
-    component?: ((cashier_routes?: TRoute[]) => JSX.Element) | typeof Redirect;
+    component?: ((props?: RouteProps['component']) => JSX.Element) | Partial<typeof Redirect> | TPage404;
     getTitle?: () => string;
     subroutes?: TRoute[];
 };