Merge branch 'master' into f-vanilla-financial

eslint-local-rules/index.js

@@ -0,0 +1,22 @@
+module.exports = {
+    /** This rule is used to prevent the use of `React` namespace. ex: `React.useEffect` -> `useEffect` */
+    'no-react-namespace': {
+        create(context) {
+            return {
+                MemberExpression(node) {
+                    if (node.object.type === 'Identifier' && node.object.name === 'React') {
+                        context.report({
+                            node,
+                            message: `Use ${node.property.name} instead of React.${node.property.name}.`,
+                            fix: fixer => {
+                                const start = node.object.range[0];
+                                const end = node.object.range[1] + 1;
+                                return fixer.removeRange([start, end]);
+                            },
+                        });
+                    }
+                },
+            };
+        },
+    },
+};

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

@@ -3,6 +3,7 @@ import { Router } from 'react-router-dom';
 import { createBrowserHistory } from 'history';
 import { render, screen } from '@testing-library/react';
 import { PlatformContext } from '@deriv/shared';
+import { StoreProvider, mockStore } from '@deriv/stores';
 import BinaryRoutes from '../binary-routes';
 
 jest.mock('../route-with-sub-routes', () => jest.fn(() => <div>RouteWithSubRoutes</div>));
@@ -13,12 +14,23 @@ describe('<BinaryRoutes />', () => {
     const history = createBrowserHistory();
 
     it('should render BinaryRoutes with mocked route component', () => {
+        const mock = mockStore({
+            modules: {
+                common: {
+                    current_language: 'EN',
+                },
+            },
+        });
+        const wrapper = ({ children }: { children: JSX.Element }) => (
+            <StoreProvider store={mock}>{children}</StoreProvider>
+        );
         render(
             <PlatformContext.Provider value={{ is_appstore: false, is_deriv_crypto: false, is_pre_appstore: false }}>
                 <Router history={history}>
-                    <BinaryRoutes />
+                    <BinaryRoutes is_logged_in is_logging_in={false} />
                 </Router>
-            </PlatformContext.Provider>
+            </PlatformContext.Provider>,
+            { wrapper }
         );
 
         expect(screen.getByText('RouteWithSubRoutes')).toBeInTheDocument();

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

@@ -1,11 +1,14 @@
 import React from 'react';
 import { Switch } from 'react-router-dom';
 import { Localize } from '@deriv/translations';
+import { observer, useStore } from '@deriv/stores';
 import getRoutesConfig from '../../Constants/routes-config';
 import { TBinaryRoutes, TRoute } from '../../Types';
 import RouteWithSubRoutes from './route-with-sub-routes';
 
-const BinaryRoutes = (props: TBinaryRoutes) => {
+const BinaryRoutes = observer((props: TBinaryRoutes) => {
+    const { common } = useStore();
+    const { current_language } = common;
     return (
         <React.Suspense
             fallback={
@@ -16,11 +19,11 @@ const BinaryRoutes = (props: TBinaryRoutes) => {
         >
             <Switch>
                 {getRoutesConfig().map((route: TRoute, idx: number) => (
-                    <RouteWithSubRoutes key={idx} {...route} {...props} />
+                    <RouteWithSubRoutes key={`${idx}_${current_language}`} {...route} {...props} />
                 ))}
             </Switch>
         </React.Suspense>
     );
-};
+});
 
 export default BinaryRoutes;

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

@@ -380,9 +380,7 @@ describe('<AccountLimits/>', () => {
         );
 
         expect(
-            screen.getByRole('cell', {
-                name: /your account is fully authenticated and your withdrawal limits have been lifted\./i,
-            })
+            screen.getByText(/your account is fully authenticated and your withdrawal limits have been lifted\./i)
         ).toBeInTheDocument();
     });
 
@@ -473,7 +471,7 @@ describe('<AccountLimits/>', () => {
         expect(formatMoney).toHaveBeenCalledWith(store.client.currency, remainder, true);
     });
 
-    it('should show limit_notice message when is_appstore is true and is_fully_authenticated is false in mobile mode', () => {
+    it('should show limit_notice message when is_appstore is false and is_fully_authenticated is false in mobile mode', () => {
         store = mockStore({
             client: {
                 ...mock.client,
@@ -483,7 +481,7 @@ describe('<AccountLimits/>', () => {
         (isMobile as jest.Mock).mockReturnValue(true);
         (isDesktop as jest.Mock).mockReturnValue(false);
         render(
-            <PlatformContext.Provider value={{ is_appstore: true, is_deriv_crypto: false, is_pre_appstore: false }}>
+            <PlatformContext.Provider value={{ is_appstore: false, is_deriv_crypto: false, is_pre_appstore: false }}>
                 <BrowserRouter>
                     <StoreProvider store={store}>
                         <AccountLimits {...props} />

packages/account/src/Components/account-limits/account-limits.scss

@@ -71,11 +71,7 @@
     }
 
     &__text-container {
-        margin: 1.2rem 0;
-
-        &:last-child {
-            margin-bottom: 0;
-        }
+        margin: 1.2rem 1.2rem 1.2rem 0;
     }
 
     &__popover {

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

@@ -37,10 +37,18 @@ const AccountLimits = observer(
         should_show_article = true,
     }: TAccountLimits) => {
         const { client, common } = useStore();
-        const { account_limits, currency, getLimits, is_virtual, is_switching } = client;
+        const {
+            account_limits,
+            account_status,
+            currency,
+            getLimits,
+            is_fully_authenticated,
+            is_virtual,
+            is_switching,
+        } = client;
         const { is_from_derivgo } = common;
         const isMounted = useIsMounted();
-        const [is_loading, setLoading] = React.useState(false);
+        const [is_loading, setLoading] = React.useState(true);
         const [is_overlay_shown, setIsOverlayShown] = React.useState(false);
         const { is_appstore } = React.useContext(PlatformContext);
 
@@ -58,10 +66,10 @@ const AccountLimits = observer(
         }, []);
 
         React.useEffect(() => {
-            if (!is_virtual && account_limits && is_loading) {
+            if (!is_virtual && account_limits && is_loading && Object.keys(account_status).length > 0) {
                 setLoading(false);
             }
-        }, [account_limits, is_virtual, is_loading]);
+        }, [account_limits, is_virtual, is_loading, account_status]);
 
         React.useEffect(() => {
             if (typeof setIsPopupOverlayShown === 'function') {
@@ -71,7 +79,7 @@ const AccountLimits = observer(
 
         const toggleOverlay = () => setIsOverlayShown(!is_overlay_shown);
 
-        if (is_switching) {
+        if (is_switching || is_loading) {
             return <Loading is_fullscreen={false} />;
         }
 
@@ -103,10 +111,6 @@ const AccountLimits = observer(
             return <LoadErrorMessage error_message={api_initial_load_error} />;
         }
 
-        if (is_switching || is_loading) {
-            return <Loading is_fullscreen={false} />;
-        }
-
         const { commodities, forex, indices, synthetic_index } = { ...market_specific };
         const forex_ordered = forex?.slice().sort((a: FormikValues, b: FormikValues) => a.name.localeCompare(b.name));
         const derived_ordered = synthetic_index

packages/account/src/Components/account-limits/withdrawal-limits-table.tsx

@@ -72,18 +72,7 @@ const WithdrawalLimitsTable = observer(
                         </tr>
                     </thead>
                     <tbody>
-                        {is_fully_authenticated ? (
-                            <tr>
-                                <AccountLimitsTableCell>
-                                    <Text size='xxs' color='prominent'>
-                                        {localize(
-                                            'Your account is fully authenticated and your withdrawal limits have been lifted.'
-                                        )}
-                                    </Text>
-                                </AccountLimitsTableCell>
-                                <AccountLimitsTableCell />
-                            </tr>
-                        ) : (
+                        {!is_fully_authenticated && (
                             <React.Fragment>
                                 <tr>
                                     <AccountLimitsTableCell>
@@ -113,16 +102,18 @@ const WithdrawalLimitsTable = observer(
                         )}
                     </tbody>
                 </table>
-                {(!is_appstore || isMobile()) && (
-                    <div className='da-account-limits__text-container'>
-                        <Text as='p' size='xxs' color='less-prominent' line_height='xs'>
-                            {is_fully_authenticated ? (
-                                <Localize i18n_default_text='Your account is fully authenticated and your withdrawal limits have been lifted.' />
-                            ) : (
-                                <Localize i18n_default_text='Stated limits are subject to change without prior notice.' />
-                            )}
-                        </Text>
-                    </div>
+                {!is_appstore && (
+                    <tr>
+                        <div className='da-account-limits__text-container'>
+                            <Text as='p' size='xxs' color='less-prominent' line_height='xs'>
+                                {is_fully_authenticated ? (
+                                    <Localize i18n_default_text='Your account is fully authenticated and your withdrawal limits have been lifted.' />
+                                ) : (
+                                    <Localize i18n_default_text='Stated limits are subject to change without prior notice.' />
+                                )}
+                            </Text>
+                        </div>
+                    </tr>
                 )}
             </React.Fragment>
         );

packages/account/src/Components/address-details/__tests__/address-details.spec.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
+import { FormikProps, FormikValues } from 'formik';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
-import AddressDetails from '../address-details';
 import { isDesktop, isMobile, PlatformContext } from '@deriv/shared';
-import { FormikProps, FormikValues } from 'formik';
+import AddressDetails from '../address-details';
 
 jest.mock('@deriv/shared', () => ({
     ...jest.requireActual('@deriv/shared'),
@@ -19,6 +19,15 @@ jest.mock('../../real-account-signup/helpers/utils.ts', () => ({
     })),
 }));
 
+jest.mock('@deriv/components', () => {
+    const original_module = jest.requireActual('@deriv/components');
+
+    return {
+        ...original_module,
+        Loading: jest.fn(() => 'mockedLoading'),
+    };
+});
+
 describe('<AddressDetails/>', () => {
     const address_line_1 = 'First line of address';
     const address_line_1_marked = 'First line of address*';
@@ -108,6 +117,31 @@ describe('<AddressDetails/>', () => {
         expect(required_fields).toHaveLength(2);
     });
 
+    it('should call fetchResidenceList if states list is empty', async () => {
+        render(<AddressDetails {...mock_props} />);
+        expect(mock_props.fetchStatesList).toHaveBeenCalled();
+    });
+
+    it('should not call fetchResidenceList if states list is empty', async () => {
+        render(
+            <AddressDetails
+                {...mock_props}
+                states_list={[
+                    { text: 'State 1', value: 'State 1' },
+                    { text: 'State 2', value: 'State 2' },
+                ]}
+            />
+        );
+
+        expect(mock_props.fetchStatesList).not.toHaveBeenCalled();
+        expect(screen.queryByText('mockedLoading')).not.toBeInTheDocument();
+    });
+
+    it('should show a loader when states list is not fully fetched', async () => {
+        render(<AddressDetails {...mock_props} states_list={[]} />);
+        expect(screen.getByText('mockedLoading')).toBeInTheDocument();
+    });
+
     it('should render AddressDetails component and trigger buttons', async () => {
         render(<AddressDetails {...mock_props} />);
 

packages/account/src/Components/address-details/address-details.tsx

@@ -1,5 +1,5 @@
-import { Formik, Field, FormikProps, FormikValues } from 'formik';
 import React from 'react';
+import { Formik, Field, FormikProps, FormikValues } from 'formik';
 import { StatesList } from '@deriv/api-types';
 import {
     Modal,
@@ -102,16 +102,24 @@ const AddressDetails = ({
     const [address_state_to_display, setAddressStateToDisplay] = React.useState('');
 
     React.useEffect(() => {
-        const { cancel, promise } = makeCancellablePromise(props.fetchStatesList());
-        promise.then(() => {
+        let cancelFn: (() => void) | undefined;
+        if (states_list.length) {
             setHasFetchedStatesList(true);
-            if (props.value.address_state) {
-                setAddressStateToDisplay(getLocation(states_list, props.value.address_state, 'text'));
-            }
-        });
+        } else {
+            const { cancel, promise } = makeCancellablePromise(props.fetchStatesList());
+            cancelFn = cancel;
+            promise.then(() => {
+                setHasFetchedStatesList(true);
+                if (props.value?.address_state) {
+                    setAddressStateToDisplay(getLocation(states_list, props.value?.address_state, 'text'));
+                }
+            });
+        }
         return () => {
             setHasFetchedStatesList(false);
-            cancel();
+            if (cancelFn) {
+                cancelFn();
+            }
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);