Suisin/74071/ts migration account 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();
     });
@@ -300,13 +317,10 @@ describe('<AccountLimits/>', () => {
             </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);
@@ -330,8 +344,8 @@ 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 }}>
                 <BrowserRouter>
@@ -343,8 +357,8 @@ 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 }}>
                 <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-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) => {

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

@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types';
 import * as React from 'react';
 import classNames from 'classnames';
 import { Loading, ThemedScrollbars, Text, ButtonLink } from '@deriv/components';
@@ -7,13 +6,54 @@ import { Localize, localize } from '@deriv/translations';
 import LoadErrorMessage from 'Components/load-error-message';
 import DemoMessage from 'Components/demo-message';
 import AccountLimitsArticle from './account-limits-article';
-import AccountLimitsContext from './account-limits-context';
+import AccountLimitsContext, { TAccountLimitsContext } from './account-limits-context';
 import AccountLimitsExtraInfo from './account-limits-extra-info';
 import AccountLimitsFooter from './account-limits-footer';
 import AccountLimitsOverlay from './account-limits-overlay';
 import AccountLimitsTableCell from './account-limits-table-cell';
 import AccountLimitsTableHeader from './account-limits-table-header';
-import AccountLimitsTurnoverLimitRow from './account-limits-turnover-limit-row';
+import AccountLimitsTurnoverLimitRow, { TAccountLimitsCollection } from './account-limits-turnover-limit-row';
+import { FormikValues } from 'formik';
+
+type TAccountLimits = {
+    account_limits: {
+        api_initial_load_error?: string;
+        open_positions?: React.ReactNode;
+        account_balance: string | number;
+        daily_transfers?: object;
+        payout: string | number;
+        lifetime_limit?: number;
+        market_specific: {
+            commodities: TAccountLimitsCollection[];
+            cryptocurrency: TAccountLimitsCollection[];
+            forex: TAccountLimitsCollection[];
+            indices: TAccountLimitsCollection[];
+            synthetic_index: TAccountLimitsCollection[];
+        };
+        num_of_days?: number;
+        num_of_days_limit: string | number;
+        remainder: string | number;
+        withdrawal_for_x_days_monetary?: number;
+        withdrawal_since_inception_monetary: string | number;
+    };
+    currency: string;
+    footer_ref?: React.RefObject<HTMLElement>;
+    is_app_settings?: boolean;
+    getLimits: () => Promise<{ data: object }>;
+    is_fully_authenticated: boolean;
+    is_from_derivgo?: boolean;
+    is_switching: boolean;
+    is_virtual: boolean;
+    overlay_ref: HTMLDivElement;
+    setIsOverlayShown?: (is_overlay_shown: boolean | undefined) => void;
+    setIsPopupOverlayShown?: (is_popup_overlay_shown: boolean) => void;
+    should_bypass_scrollbars?: boolean;
+    should_show_article?: boolean;
+};
+
+type TPlarformContext = {
+    is_appstore: boolean;
+};
 
 const AccountLimits = ({
     account_limits,
@@ -29,11 +69,11 @@ const AccountLimits = ({
     setIsOverlayShown: setIsPopupOverlayShown,
     should_bypass_scrollbars,
     should_show_article,
-}) => {
+}: TAccountLimits) => {
     const isMounted = useIsMounted();
     const [is_loading, setLoading] = React.useState(false);
     const [is_overlay_shown, setIsOverlayShown] = React.useState(false);
-    const { is_appstore } = React.useContext(PlatformContext);
+    const { is_appstore } = React.useContext<Partial<TPlarformContext>>(PlatformContext);
 
     React.useEffect(() => {
         if (is_virtual) {
@@ -67,6 +107,7 @@ const AccountLimits = ({
     if (is_virtual) {
         return (
             <div
+                data-testid='dt_account_demo_message_wrapper'
                 className={classNames('account__demo-message-wrapper', {
                     'account__demo-message-wrapper-dashboard': is_appstore,
                 })}
@@ -85,7 +126,7 @@ const AccountLimits = ({
         num_of_days_limit,
         remainder,
         withdrawal_since_inception_monetary,
-    } = account_limits;
+    }: TAccountLimits['account_limits'] = account_limits;
 
     if (api_initial_load_error) {
         return <LoadErrorMessage error_message={api_initial_load_error} />;
@@ -96,17 +137,14 @@ const AccountLimits = ({
     }
 
     const { commodities, forex, indices, synthetic_index } = { ...market_specific };
-    const forex_ordered = forex?.slice().sort((a, b) => (a.name > b.name ? 1 : b.name > a.name ? -1 : 0));
-    // sort submarkets by names alphabetically and put 'market' at the beginning
+    const forex_ordered = forex
+        ?.slice()
+        .sort((a: FormikValues, b: FormikValues) => (a.name > b.name ? 1 : b.name > a.name ? -1 : 0));
     const derived_ordered = synthetic_index
         ?.slice()
-        .sort((a, b) =>
-            a.level === 'submarket' && b.level === 'submarket'
-                ? a.name.localeCompare(b.name)
-                : a.level.localeCompare(b.level)
-        );
+        .sort((a: FormikValues, b: FormikValues) => (a.level < b.level ? 1 : -1));
 
-    const context_value = {
+    const context_value: TAccountLimitsContext = {
         currency,
         footer_ref,
         overlay_ref,
@@ -163,12 +201,7 @@ const AccountLimits = ({
                                             <Localize i18n_default_text='*Maximum account cash balance' />
                                         </AccountLimitsTableCell>
                                         <AccountLimitsTableCell align='right'>
-                                            {/* null or 0 are expected form BE when max balance limit is not set */}
-                                            {account_balance ? (
-                                                formatMoney(currency, account_balance, true)
-                                            ) : (
-                                                <Localize i18n_default_text='Not set' />
-                                            )}
+                                            {formatMoney(currency, account_balance, true)}
                                         </AccountLimitsTableCell>
                                     </tr>
                                     <tr>
@@ -255,11 +288,13 @@ const AccountLimits = ({
                                                 <React.Fragment>
                                                     <tr>
                                                         <AccountLimitsTableCell>
-                                                            {is_appstore ? (
-                                                                <Localize i18n_default_text='Total withdrawal limit' />
-                                                            ) : (
-                                                                <Localize i18n_default_text='Total withdrawal allowed' />
-                                                            )}
+                                                            <Localize
+                                                                i18n_default_text={
+                                                                    is_appstore
+                                                                        ? 'Total withdrawal limit'
+                                                                        : 'Total withdrawal allowed'
+                                                                }
+                                                            />
                                                             {is_appstore && !is_fully_authenticated && (
                                                                 <React.Fragment>
                                                                     <Text
@@ -340,21 +375,4 @@ const AccountLimits = ({
     );
 };
 
-AccountLimits.propTypes = {
-    account_limits: PropTypes.object,
-    currency: PropTypes.string.isRequired,
-    footer_ref: PropTypes.shape({ current: PropTypes.any }),
-    is_app_settings: PropTypes.bool,
-    getLimits: PropTypes.func.isRequired,
-    is_fully_authenticated: PropTypes.bool.isRequired,
-    is_from_derivgo: PropTypes.bool,
-    is_switching: PropTypes.bool.isRequired,
-    is_virtual: PropTypes.bool.isRequired,
-    overlay_ref: PropTypes.shape({ current: PropTypes.any }),
-    setIsOverlayShown: PropTypes.func,
-    setIsPopupOverlayShown: PropTypes.func,
-    should_bypass_scrollbars: PropTypes.bool,
-    should_show_article: PropTypes.bool,
-};
-
 export default AccountLimits;

packages/account/src/Components/account-limits/index.ts

@@ -0,0 +1,3 @@
+import AccountLimits from './account-limits';
+
+export default AccountLimits;

packages/account/src/Sections/Security/AccountLimits/account-limits.jsx

@@ -1,4 +1,4 @@
-import AccountLimits from 'Components/account-limits/account-limits.jsx';
+import AccountLimits from 'Components/account-limits/account-limits';
 import 'Components/account-limits/account-limits.scss';
 import { connect } from 'Stores/connect';
 

packages/account/src/Sections/Security/AccountLimits/index.js

@@ -1 +1 @@
-export default from './account-limits.jsx';
+export default from './account-limits';