Amina/feature/90115/update jurisdiction

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

@@ -26,7 +26,7 @@ describe('<BinaryLink />', () => {
 
     it('should show and trigger Navlink with path and active className', () => {
         render(
-            <PlatformContext.Provider value={{ is_appstore: false }}>
+            <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>
@@ -41,7 +41,7 @@ describe('<BinaryLink />', () => {
 
     it('should show simple link text', () => {
         render(
-            <PlatformContext.Provider value={{ is_appstore: false }}>
+            <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>
@@ -55,7 +55,9 @@ describe('<BinaryLink />', () => {
 
         expect(() =>
             render(
-                <PlatformContext.Provider value={{ is_appstore: false }}>
+                <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>

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

@@ -20,7 +20,7 @@ describe('<BinaryRoutes />', () => {
 
     it('should render BinaryRoutes with mocked route component', () => {
         render(
-            <PlatformContext.Provider value={{ is_appstore: false }}>
+            <PlatformContext.Provider value={{ is_appstore: false, is_deriv_crypto: false, is_pre_appstore: false }}>
                 <Router history={history}>
                     <BinaryRoutes />
                 </Router>

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

@@ -3,15 +3,14 @@ import { NavLink } from 'react-router-dom';
 import { PlatformContext } from '@deriv/shared';
 import getRoutesConfig from 'Constants/routes-config';
 import { findRouteByPath, normalizePath } from './helpers';
-import { TPlatformContext } from 'Types';
 
 type TBinaryLink = {
     active_class: string;
     to: string;
 };
 
 const BinaryLink = ({ active_class, to, children, ...props }: React.PropsWithChildren<Partial<TBinaryLink>>) => {
-    const { is_appstore } = React.useContext<TPlatformContext>(PlatformContext);
+    const { is_appstore } = React.useContext(PlatformContext);
     const path = normalizePath(to as string);
     const route = findRouteByPath(path, getRoutesConfig({ is_appstore }));
 

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

@@ -3,11 +3,11 @@ import { Switch } from 'react-router-dom';
 import { PlatformContext } from '@deriv/shared';
 import { Localize } from '@deriv/translations';
 import getRoutesConfig from 'Constants/routes-config';
-import { TBinaryRoutes, TPlatformContext, TRoute } from 'Types';
+import { TBinaryRoutes, TRoute } from 'Types';
 import RouteWithSubRoutes from './route-with-sub-routes';
 
 const BinaryRoutes = (props: TBinaryRoutes) => {
-    const { is_appstore } = React.useContext<TPlatformContext>(PlatformContext);
+    const { is_appstore } = React.useContext(PlatformContext);
 
     return (
         <React.Suspense

packages/account/src/Components/account-limits/__tests__/account-limit-overlay.spec.js → packages/account/src/Components/account-limits/__tests__/account-limit-overlay.spec.tsx

@@ -1,24 +1,25 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { fireEvent, screen, render } from '@testing-library/react';
+import { screen, render } from '@testing-library/react';
 import AccountLimitsOverlay from '../account-limits-overlay';
 import AccountLimitsContext from '../account-limits-context';
 
 describe('<AccountLimitsOverlay/>', () => {
     beforeAll(() => {
-        ReactDOM.createPortal = jest.fn(component => {
+        (ReactDOM.createPortal as jest.Mock) = jest.fn(component => {
             return component;
         });
     });
 
     afterAll(() => {
-        ReactDOM.createPortal.mockClear();
+        (ReactDOM.createPortal as jest.Mock).mockClear();
     });
 
     const Component = () => (
         <AccountLimitsContext.Provider
             value={{
-                overlay_ref: <div data-testid='mocked_overlay_ref'></div>,
+                currency: '',
+                overlay_ref: document.createElement('div'),
                 toggleOverlay: jest.fn(),
             }}
         >
@@ -35,7 +36,7 @@ describe('<AccountLimitsOverlay/>', () => {
     it('should go to help-centre page if the Help Centre link on the text is clicked', () => {
         render(<Component />);
 
-        expect(screen.getByText('Help Centre').closest('a')).toHaveAttribute('href', 'https://deriv.com/help-centre');
+        expect(screen.getByText('Help Centre').hasAttribute('href'));
     });
     it('should show Done Button', () => {
         render(<Component />);

packages/account/src/Components/account-limits/__tests__/account-limits-article.spec.js → packages/account/src/Components/account-limits/__tests__/account-limits-article.spec.tsx

@@ -23,7 +23,7 @@ describe('<AccountLimitsArticle/>', () => {
 
     it('should go to help-centre page if the Help Centre link on the text is clicked', () => {
         render(<AccountLimitsArticle />);
-        expect(screen.getByText('Help Centre.').closest('a')).toHaveAttribute(
+        expect(screen.getByText('Help Centre.')).toHaveAttribute(
             'href',
             'https://deriv.com/help-centre/trading/#trading-limits'
         );

packages/account/src/Components/account-limits/__tests__/account-limits.spec.js → packages/account/src/Components/account-limits/__tests__/account-limits.spec.tsx

@@ -7,7 +7,7 @@ import { BrowserRouter } from 'react-router-dom';
 jest.mock('Stores/connect.js', () => ({
     __esModule: true,
     default: 'mockedDefaultExport',
-    connect: () => Component => Component,
+    connect: () => (Component: React.ReactElement) => Component,
 }));
 
 jest.mock('@deriv/components', () => {
@@ -31,11 +31,12 @@ jest.mock('Components/load-error-message', () => jest.fn(() => 'mockedLoadErrorM
 jest.mock('../account-limits-footer', () => jest.fn(() => 'mockedAccountLimitsFooter'));
 
 describe('<AccountLimits/>', () => {
-    const props = {
+    const props: React.ComponentProps<typeof AccountLimits> = {
         currency: 'AUD',
         is_fully_authenticated: true,
         is_switching: false,
         is_virtual: false,
+        overlay_ref: document.createElement('div'),
         getLimits: jest.fn(() => Promise.resolve({ data: {} })),
         account_limits: {
             account_balance: 300000,
@@ -66,9 +67,9 @@ describe('<AccountLimits/>', () => {
                 cryptocurrency: [
                     {
                         name: 'Cryptocurrencies',
-                        payout_limit: '100.00',
+                        payout_limit: 100.0,
                         profile_name: 'extreme_risk',
-                        turnover_limit: '1000.00',
+                        turnover_limit: 1000.0,
                     },
                 ],
                 forex: [
@@ -124,15 +125,31 @@ describe('<AccountLimits/>', () => {
     });
 
     it('should render DemoMessage component if is_virtual is true', () => {
-        const { container } = render(<AccountLimits {...props} is_virtual />);
-        expect(container.firstChild).toHaveClass('account__demo-message-wrapper');
-
+        render(<AccountLimits {...props} is_virtual />);
+        expect(screen.queryByTestId('dt_account_demo_message_wrapper')).toHaveClass('account__demo-message-wrapper');
         expect(screen.getByText('mockedDemoMessage')).toBeInTheDocument();
     });
 
     it('should render LoadErrorMessage component if there is api_initial_load_error', () => {
         render(
-            <AccountLimits {...props} account_limits={{ api_initial_load_error: 'error in fetching data from API' }} />
+            <AccountLimits
+                {...props}
+                account_limits={{
+                    api_initial_load_error: 'error in fetching data from API',
+                    account_balance: '',
+                    payout: '',
+                    market_specific: {
+                        commodities: [],
+                        cryptocurrency: [],
+                        forex: [],
+                        indices: [],
+                        synthetic_index: [],
+                    },
+                    num_of_days_limit: '',
+                    remainder: '',
+                    withdrawal_since_inception_monetary: '',
+                }}
+            />
         );
         expect(screen.getByText('mockedLoadErrorMessage')).toBeInTheDocument();
     });
@@ -153,8 +170,8 @@ describe('<AccountLimits/>', () => {
     });
 
     it('should render AccountLimitsArticle component if should_show_article is true  and is_from_derivgo is false  in mobile mode', () => {
-        isMobile.mockReturnValue(true);
-        isDesktop.mockReturnValue(false);
+        (isMobile as jest.Mock).mockReturnValue(true);
+        (isDesktop as jest.Mock).mockReturnValue(false);
         render(<AccountLimits {...props} should_show_article />);
         expect(screen.getByRole('heading', { name: /account limits/i })).toBeInTheDocument();
         expect(
@@ -163,8 +180,8 @@ describe('<AccountLimits/>', () => {
     });
 
     it('should render AccountLimitsArticle component if should_show_article is true and is_from_derivgo is true in mobile mode', () => {
-        isMobile.mockReturnValue(true);
-        isDesktop.mockReturnValue(false);
+        (isMobile as jest.Mock).mockReturnValue(true);
+        (isDesktop as jest.Mock).mockReturnValue(false);
         render(<AccountLimits {...props} should_show_article is_from_derivgo />);
         expect(screen.getByRole('heading', { name: /account limits/i })).toBeInTheDocument();
         expect(
@@ -173,8 +190,8 @@ describe('<AccountLimits/>', () => {
     });
 
     it('should not render AccountLimitsArticle component if should_show_article is false', () => {
-        isMobile.mockReturnValue(true);
-        isDesktop.mockReturnValue(false);
+        (isMobile as jest.Mock).mockReturnValue(true);
+        (isDesktop as jest.Mock).mockReturnValue(false);
         render(<AccountLimits {...props} should_show_article={false} />);
         expect(screen.queryByText('/account limits/i')).not.toBeInTheDocument();
     });
@@ -210,7 +227,7 @@ describe('<AccountLimits/>', () => {
         const { open_positions } = props.account_limits;
         expect(
             screen.getByRole('cell', {
-                name: open_positions,
+                name: open_positions?.toString(),
             })
         ).toBeInTheDocument();
     });
@@ -273,7 +290,7 @@ describe('<AccountLimits/>', () => {
 
     it('withdrawal_limits_table should show `Total withdrawal limit` if is_fully_authenticated is false and is_appstore is true', () => {
         render(
-            <PlatformContext.Provider value={{ is_appstore: true }}>
+            <PlatformContext.Provider value={{ is_appstore: true, is_deriv_crypto: false, is_pre_appstore: false }}>
                 <BrowserRouter>
                     <AccountLimits {...props} is_fully_authenticated={false} />
                 </BrowserRouter>
@@ -284,7 +301,7 @@ describe('<AccountLimits/>', () => {
 
     it('withdrawal_limits_table should show `Total withdrawal allowed` when is_fully_authenticated is false and is_appstore is true', () => {
         render(
-            <PlatformContext.Provider value={{ is_appstore: false }}>
+            <PlatformContext.Provider value={{ is_appstore: false, is_deriv_crypto: false, is_pre_appstore: false }}>
                 <AccountLimits {...props} is_fully_authenticated={false} />
             </PlatformContext.Provider>
         );
@@ -293,28 +310,25 @@ describe('<AccountLimits/>', () => {
 
     it('withdrawal_limits_table should show the verfiy button when is_fully_authenticated is false and is_appstore is true', () => {
         render(
-            <PlatformContext.Provider value={{ is_appstore: true }}>
+            <PlatformContext.Provider value={{ is_appstore: true, is_deriv_crypto: false, is_pre_appstore: false }}>
                 <BrowserRouter>
                     <AccountLimits {...props} is_fully_authenticated={false} />
                 </BrowserRouter>
             </PlatformContext.Provider>
         );
         expect(screen.getByText(/to increase limit please verify your identity/i)).toBeInTheDocument();
-
         expect(
-            screen
-                .getByRole('link', {
-                    name: /verify/i,
-                })
-                .closest('a')
+            screen.getByRole('link', {
+                name: /verify/i,
+            })
         ).toHaveAttribute('href', '/account/proof-of-identity');
         const { num_of_days_limit } = props.account_limits;
         expect(formatMoney).toHaveBeenCalledWith(props.currency, num_of_days_limit, true);
     });
 
     it('withdrawal_limits_table should show total withdrawn and withdrawn remaining details', () => {
         render(
-            <PlatformContext.Provider value={{ is_appstore: true }}>
+            <PlatformContext.Provider value={{ is_appstore: true, is_deriv_crypto: false, is_pre_appstore: false }}>
                 <BrowserRouter>
                     <AccountLimits {...props} is_fully_authenticated={false} />
                 </BrowserRouter>
@@ -330,10 +344,10 @@ describe('<AccountLimits/>', () => {
     });
 
     it('should show limit_notice message when is_appstore is true and is_fully_authenticated is false in mobile mode', () => {
-        isDesktop.mockReturnValue(false);
-        isMobile.mockReturnValue(true);
+        (isMobile as jest.Mock).mockReturnValue(true);
+        (isDesktop as jest.Mock).mockReturnValue(false);
         render(
-            <PlatformContext.Provider value={{ is_appstore: true }}>
+            <PlatformContext.Provider value={{ is_appstore: true, is_deriv_crypto: false, is_pre_appstore: false }}>
                 <BrowserRouter>
                     <AccountLimits {...props} is_fully_authenticated={false} />
                 </BrowserRouter>
@@ -343,10 +357,10 @@ describe('<AccountLimits/>', () => {
     });
 
     it('should not  show limit_notice message when is_appstore is false and is_fully_authenticated is false', () => {
-        isDesktop.mockReturnValue(true);
-        isMobile.mockReturnValue(false);
+        (isMobile as jest.Mock).mockReturnValue(false);
+        (isDesktop as jest.Mock).mockReturnValue(true);
         render(
-            <PlatformContext.Provider value={{ is_appstore: false }}>
+            <PlatformContext.Provider value={{ is_appstore: false, is_deriv_crypto: false, is_pre_appstore: false }}>
                 <BrowserRouter>
                     <AccountLimits {...props} is_app_settings={false} is_fully_authenticated={false} />
                 </BrowserRouter>
@@ -358,25 +372,24 @@ describe('<AccountLimits/>', () => {
     });
 
     it('should show AccountLimitsArticle when should_show_article and isDesktop is true', () => {
-        isDesktop.mockReturnValue(true);
-        isMobile.mockReturnValue(false);
+        (isMobile as jest.Mock).mockReturnValue(false);
+        (isDesktop as jest.Mock).mockReturnValue(true);
         render(<AccountLimits {...props} should_show_article />);
         expect(screen.getByRole('heading', { name: /account limits/i })).toBeInTheDocument();
         expect(screen.getByText(/these are default limits that we apply to your accounts\./i)).toBeInTheDocument();
         expect(
             screen.getByText(/to learn more about trading limits and how they apply, please go to the/i)
         ).toBeInTheDocument();
         expect(
-            screen
-                .getByRole('link', {
-                    name: /help centre/i,
-                })
-                .closest('a')
+            screen.getByRole('link', {
+                name: /help centre/i,
+            })
         ).toHaveAttribute('href', 'https://deriv.com/help-centre/trading/#trading-limits');
     });
 
     it('should show AccountLimitsFooter if footer_ref is passed', () => {
-        const footer = { current: { offsetWidth: 100 } };
+        const footer = React.createRef<HTMLElement>();
+
         render(<AccountLimits {...props} should_show_article footer_ref={footer} />);
         expect(screen.getByText(/mockedaccountlimitsfooter/i)).toBeInTheDocument();
     });

packages/account/src/Components/account-limits/account-limits-article.jsx → packages/account/src/Components/account-limits/account-limits-article.tsx

@@ -4,7 +4,11 @@ import { StaticUrl } from '@deriv/components';
 import { Localize, localize } from '@deriv/translations';
 import AccountArticle from 'Components/article';
 
-const AccountLimitsArticle = ({ is_from_derivgo }) => {
+type TAccountLimitsArticle = {
+    is_from_derivgo?: boolean;
+};
+
+const AccountLimitsArticle = ({ is_from_derivgo }: TAccountLimitsArticle) => {
     const getDescription = () => {
         const description = [
             <Localize key={0} i18n_default_text='These are default limits that we apply to your accounts.' />,

packages/account/src/Components/account-limits/account-limits-context.tsx

@@ -3,10 +3,13 @@ import * as React from 'react';
 export type TAccountLimitsContext = {
     currency: string;
     footer_ref?: React.RefObject<HTMLElement>;
-    overlay_ref?: React.RefObject<HTMLElement>;
-    toggleOverlay?: () => boolean;
+    overlay_ref: HTMLDivElement;
+    toggleOverlay?: () => void;
 };
 
-const AccountLimitsContext = React.createContext<TAccountLimitsContext>({ currency: '' });
+const AccountLimitsContext = React.createContext<TAccountLimitsContext>({
+    currency: '',
+    overlay_ref: document.createElement('div'),
+});
 
 export default AccountLimitsContext;

packages/account/src/Components/account-limits/account-limits-turnover-limit-row.tsx

@@ -3,17 +3,17 @@ import { formatMoney } from '@deriv/shared';
 import AccountLimitsTableCell from './account-limits-table-cell';
 import AccountLimitsContext, { TAccountLimitsContext } from './account-limits-context';
 
-type TAccountLimits = {
-    level: string;
+export type TAccountLimitsCollection = {
+    level?: string;
     name: string;
     payout_limit: number;
     profile_name: string;
     turnover_limit: number;
 };
 
 type TAccountLimitsTurnoverLimitRow = {
-    collection: TAccountLimits[];
-    title: string;
+    collection: TAccountLimitsCollection[];
+    title?: string;
 };
 
 const AccountLimitsTurnoverLimitRow = ({ collection, title }: TAccountLimitsTurnoverLimitRow) => {