Niloofar Sadeghi | components and shared ts migration [parent branch] (…

…binary-com#7307)

* chore: ts migration for test case

* chore: remove .jsx

* refactor: ts migration for account limits article  and tests

* chore: remove all .jsx

* refactor: ts migration for account-limit-overlay

* chore: remove .jsx from files

* chore: update to use React.ComponentProps

* chore: change test case format

* refactor: ts migration for self-exclusion-article

* refactor: ts migration for self-excllusiono-wrapper

* chore: remove .jsx

* Revert "fix: 🐛 resolved issue with trade. odal (binary-com#7291)" (binary-com#7364)

This reverts commit b6f7e4c.

* refactor: ts migration for account-limits.js

* Farzin/85054/Call `resetWithrawForm` on `CryptoWithdrawForm` component `onunmount` (binary-com#7331)

* fix(cashier): 🐛 call `resetWithrawForm` on `CryptoWithdrawForm` component `onunmount`

* test(cashier): ✅ fix failing test

Co-authored-by: Farzin Mirzaie <farzin@deriv.com>

* refactor: ts migration for self-exclusion-modal

* Niloofar Sadeghi / Task - Refactor tests in the language.spec.js file (binary-com#7325)

* refactor: language tests

* fix: typo

Co-authored-by: Niloofar Sadeghi <niloofar.sadeghi@firstsource.tech>

* refactor: proposal tests (binary-com#7327)

Co-authored-by: Niloofar Sadeghi <niloofar.sadeghi@firstsource.tech>

* Niloofar Sadeghi / Task - Refactor tests in the error.spec.js file (binary-com#7324)

* refactor: errors validator tests

* fix: typo

Co-authored-by: Niloofar Sadeghi <niloofar.sadeghi@firstsource.tech>

* Niloofar Sadeghi / Task - Refactor tests in the binary-link.spec.tsx file (binary-com#7288)

* refactor: binary-link tests

* refactor: improve testids namings

Co-authored-by: Niloofar Sadeghi <niloofar.sadeghi@firstsource.tech>

* refactor: money tests (binary-com#7353)

* refactor: toggle-positions tests (binary-com#7287)

Co-authored-by: Niloofar Sadeghi <niloofar.sadeghi@firstsource.tech>

* refactor: toggle-button tests (binary-com#7328)

Co-authored-by: Niloofar Sadeghi <niloofar.sadeghi@firstsource.tech>

* Niloofar Sadeghi / Task - Refactor tests in the toggle-button-group.spec.tsx file (binary-com#7330)

* refactor: toggle-button-group tests

* fix: test issue

Co-authored-by: Niloofar Sadeghi <niloofar.sadeghi@firstsource.tech>

* refactor: open-positions-table tests (binary-com#7374)

* Niloofar Sadeghi / Task - Refactor tests in the marker-spot-label.spec.tsx file (binary-com#7355)

* refactor: remove extra files from reports

* refactor: marker-spot-label tests

* Niloofar Sadeghi / Task - Refactor tests in the binary-link.spec.tsx file (binary-com#7286)

* refactor: binary-link tests

* test: added more tests

Co-authored-by: Niloofar Sadeghi <niloofar.sadeghi@firstsource.tech>

* Niloofar Sadeghi / Task - Refactor tests in the contract-type-dialog.spec.tsx file (binary-com#7285)

* refactor: contract-type-dialog tests

* test: added more tests

* fix: circle/ci issue

Co-authored-by: Niloofar Sadeghi <niloofar.sadeghi@firstsource.tech>

* Niloofar Sadeghi / Task - Refactor tests in the platform-dropdown.spec.tsx file (binary-com#7282)

* refactor: platform-dropdown tests

* refactor: improve testids namings

Co-authored-by: Niloofar Sadeghi <niloofar.sadeghi@firstsource.tech>

* Farzin/76563/Replace `DepositStore` with hooks (binary-com#7180)

* refactor(cashier): 🔥 remove `is_deposit_locked` from `DepositStore`

* refactor(cashier): 🔥 remove `submitFundsProtection` from `DepositStore`

* fix(cashier): 💚 fix CI build

* fix(cashier): 💚 fix CI build

* test(hooks): ✅ add more test cases for `useDepositLocked` hook

Co-authored-by: Farzin Mirzaie <farzin@deriv.com>

* Adrienne / Github actions Lighthouse report workflow (binary-com#7317)

* chore: added checks to job to run only on pull requests

* chore: fixed issues with testing

* chore: testing github actions running on local branch

* chore: added workflow_dispatch event to test out manually

* chore: added workflow_dispatch event to test out manually

* chore: added workflow_dispatch event to test out manually

* chore: fix typo

* chore: fix issue where lighthouse config file is not found

* chore: fix issue where lighthouse config file is not found

* chore: test with hardcoded url

* chore: test with updated permissions

* chore: reverted changes due to lack of token permission

* chore: reverted changes due to lack of token permission

* chore: added progress comment

* chore: added progress comment

* chore: test

* chore: reverted test

* chore: reverted test

* chore: commented config path for lighthouse assertions

* chore: fixed syntax on like 38 where it expects a string instead of mapping

* translations: 📚 sync translations with crowdin (binary-com#7361)

Co-authored-by: DerivFE <80095553+DerivFE@users.noreply.github.com>

Co-authored-by: Jim Daniels Wasswa <104334373+jim-deriv@users.noreply.github.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: DerivFE <80095553+DerivFE@users.noreply.github.com>

* feat: change file extension

* refactor: dropdownlist component ts migration

* fix: ref types

* fix: group types

* fix: review comments

* build: add alias to react-virtualized to bind it to its community types

* build: remove specific usage of react-virtualized type

* chore: remove manual type declaration for react-virtualized

* chore: change usage of react-virtualized to work with alias

* fix: review comments

* fix: review comments

* refactor: migrate calendar component to typescript

* chore: remove unnecessary check for undefined

* refactor: input with checkbox ts migration

* refactor: update fragment

* refactor: input with checkbox ts migration

* refactor: migrate to typescript

* refactor: remove manual type insertion

* refactor: rename decade to years

* fix: fix rowHeight issue

* refactor: input with checkbox ts migration

* feat: migrate data-list-cell to typescript

* feat: migrate data-list-row to typescript

* feat: export RowRenderPropType type

* refactor: input with checkbox ts migration

* feat: update autosizer import path

* feat: remove file extension from import statement

Co-authored-by: Niloofar Sadeghi <93518187+niloofar-deriv@users.noreply.github.com>

* feat: update CellMeasurer import path

* feat: update MeasuredCellParent import path

* feat: update List import path

* feat: update List import path

* refactor: migrate contract-card to ts

* refactor: input with checkbox ts migration

* ci: update List import path

* chore: update type declaration to use union instead of intersection

* chore: remove unnecessary export

* refactor: ts migration for self exclusion confirm page and tests

* chore: remove .jsx from files

* refactor: ts migration for self exclusion form and test

* chore: remove .jsx

* refactor: input with checkbox ts migration

* refactor: resolve type mismatches

* refactor: dropdown component ts migration

* Update packages/components/src/components/data-list/data-list-cell.tsx

chore: update type name

Co-authored-by: Niloofar Sadeghi <93518187+niloofar-deriv@users.noreply.github.com>

* feat: update type names

* feat: update index file extenstion to ts

* feat: update measure return type

* feat: update destination link return type

* feat: update measure to be optional

* chore: update CellType usage

* chore: remove redundant CELL assignment

* fix: nodes type

* refactor: ts migration for self-exclusion-inputs

* build: update package-lock.json

* feat: update types and usages

* feat: update wrong prop(className)

* fix: circle/ci issue

* fix: circle/ci issue

* fix: circle/ci issue

* fix: circle/ci issue

* feat: add generic types

* feat: update data source type

* build: add @types/classnames

* build: update package-lock.json

* feat: add optional changing instead of if condition

* feat: disable eslint error

* feat: remove generic types and use static types instead

* refactor: ts migration for self-exclusion

* refactor: ts migration for self-exclusion

* chore: edited code based on commits

* chore: resolve conflicts

* refactor: evgeniy/76943/verticaltab ts migration

* refactor: ts migration for address details and test

* Merge branch 'develop' of github.com:binary-com/deriv-app into niloo/84471/ts-migration-parent

* chore: edited based on comments

* refactor: setSelectedIndex props types fix

* refactor: side notes array is set incorrectly

* refactor: review suggestion implementation

* refactor: exclamation mark replacing

* fix: dropdown issue

* fix: review comment

* fix: circle/ci issue

* fix: circle/ci issue

* fix: conflicts

* chore: update sorting for derived_ordered

* chore: update code to be same as in production

* fix: security issue

* fix: sonar issues

* fix: dropdown issue

* build: Trigger Build

* fix: ts errors

* fix: circle/ci issue

* fix: circle/ci issue

* fix: vercel failed

* fix: vercel failed

* fix: vercel failed

* test: git guard

* fix: git guard

* fix: review comments

---------

Co-authored-by: tay suisin <suisin@regentmarkets.com>
Co-authored-by: Farrah Mae Ochoa <farrah@deriv.com>
Co-authored-by: Matin shafiei <matin@deriv.com>
Co-authored-by: Farzin Mirzaie <72082844+farzin-deriv@users.noreply.github.com>
Co-authored-by: Farzin Mirzaie <farzin@deriv.com>
Co-authored-by: Niloofar Sadeghi <niloofar.sadeghi@firstsource.tech>
Co-authored-by: adrienne-deriv <103016120+adrienne-deriv@users.noreply.github.com>
Co-authored-by: Jim Daniels Wasswa <104334373+jim-deriv@users.noreply.github.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: DerivFE <80095553+DerivFE@users.noreply.github.com>
Co-authored-by: Ako <ali.hosseini@re-work.dev>
Co-authored-by: Jim Daniels Wasswa <jim@deriv.com>
Co-authored-by: yaswanth-deriv <121096908+yaswanth-deriv@users.noreply.github.com>
Co-authored-by: “yauheni-kryzhyk-deriv” <“yauheni@deriv.me”>

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) => {