Merge branch 'binary-com:master' into migrate_svg_to_bvi_dvl

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

@@ -1,7 +1,6 @@
 import React from 'react';
 import { NavLink } from 'react-router-dom';
-import { PlatformContext } from '@deriv/shared';
-import getRoutesConfig from 'Constants/routes-config';
+import getRoutesConfig from '../../Constants/routes-config';
 import { findRouteByPath, normalizePath } from './helpers';
 
 type TBinaryLink = {
@@ -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 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/Components/Routes/helpers.ts

@@ -1,6 +1,6 @@
 import { match, matchPath, RouteProps } from 'react-router';
 import { routes } from '@deriv/shared';
-import { TRouteConfig } from 'Types';
+import { TRouteConfig } from '../../Types';
 
 export const normalizePath = (path: string) => (path.startsWith('/') ? path : `/${path || ''}`); // Default to '/'
 

packages/account/src/Components/Routes/route-with-sub-routes.tsx

@@ -11,7 +11,7 @@ import {
     default_title,
 } from '@deriv/shared';
 import { getLanguage } from '@deriv/translations';
-import { TBinaryRoutes, TRoute, TRouteConfig } from 'Types';
+import { TBinaryRoutes, TRoute, TRouteConfig } from '../../Types';
 
 type TRouteWithSubRoutesProps = TRouteConfig & TBinaryRoutes;
 
@@ -32,9 +32,9 @@ const RouteWithSubRoutes = (route: TRouteWithSubRoutesProps) => {
             redirectToLogin(route.is_logged_in, getLanguage());
         } else {
             const default_subroute: TRoute = (route.routes ?? []).reduce(
-                (acc, cur) => ({
+                (acc: TRoute, cur: TRoute) => ({
                     ...acc,
-                    ...cur.subroutes?.find(subroute => subroute.default),
+                    ...cur.subroutes?.find((subroute: TRoute) => subroute.default),
                 }),
                 {}
             );

packages/account/src/Components/error-component/error-component.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
 import { PageError } from '@deriv/components';
-import { localize } from '@deriv/translations';
+import { Localize } from '@deriv/translations';
 import { routes } from '@deriv/shared';
 
 type TErrorComponent = {
-    header: React.ReactElement;
-    message: React.ReactNode;
-    redirect_label: React.ReactElement;
-    redirectOnClick: () => void;
+    header: JSX.Element | string;
+    message: JSX.Element | string;
+    redirect_label: string;
+    redirectOnClick: (() => void) | null;
     should_show_refresh: boolean;
 };
 
@@ -18,18 +18,28 @@ const ErrorComponent = ({
     redirectOnClick,
     should_show_refresh = true,
 }: Partial<TErrorComponent>) => {
-    const refresh_message: string = should_show_refresh ? localize('Please refresh this page to continue.') : '';
+    const refresh_message: JSX.Element | string = should_show_refresh ? (
+        <Localize i18n_default_text='Please refresh this page to continue.' />
+    ) : (
+        ''
+    );
 
     return (
         <PageError
-            header={header || localize('Oops, something went wrong.')}
+            header={header || <Localize i18n_default_text='Oops, something went wrong.' />}
             messages={
                 message
                     ? [message, refresh_message]
-                    : [localize('Sorry, an error occured while processing your request.'), refresh_message]
+                    : [
+                          <Localize
+                              i18n_default_text='Sorry, an error occurred while processing your request.'
+                              key={0}
+                          />,
+                          refresh_message,
+                      ]
             }
             redirect_urls={[routes.trade]}
-            redirect_labels={[redirect_label || localize('Refresh')]}
+            redirect_labels={[redirect_label ?? <Localize i18n_default_text='Refresh' />]}
             buttonOnClick={redirectOnClick ?? (() => location.reload())}
         />
     );

packages/account/src/Components/forms/idv-form.tsx

@@ -57,7 +57,7 @@ const IDVForm = ({
                 if (needs_additional_document) {
                     return {
                         id: key,
-                        text: new_display_name || display_name,
+                        text: display_name ?? new_display_name, // Display document name from API if available, else use the one from the helper function
                         additional: {
                             display_name: document_data[key].additional?.display_name,
                             format: document_data[key].additional?.format,
@@ -70,7 +70,7 @@ const IDVForm = ({
                 }
                 return {
                     id: key,
-                    text: new_display_name || display_name,
+                    text: display_name ?? new_display_name, // Display document name from API if available, else use the one from the helper function
                     value: format,
                     sample_image,
                     example_format,
@@ -153,7 +153,7 @@ const IDVForm = ({
                                                                     }
                                                                 }}
                                                                 onChange={handleChange}
-                                                                onItemSelection={(item: TDocumentList) => {
+                                                                onItemSelection={(item: TDocument) => {
                                                                     if (
                                                                         item.text === 'No results found' ||
                                                                         !item.text

packages/account/src/Components/forms/personal-details-form.jsx

@@ -15,11 +15,11 @@ import {
 } from '@deriv/components';
 import { getLegalEntityName, isDesktop, isMobile, routes, validPhone } from '@deriv/shared';
 import { Localize, localize } from '@deriv/translations';
-import FormSubHeader from '../form-sub-header';
-import PoiNameDobExample from '../../Assets/ic-poi-name-dob-example.svg';
 import InlineNoteWithIcon from '../inline-note-with-icon';
-import FormBodySection from '../form-body-section';
 import { DateOfBirthField, FormInputField } from './form-fields.jsx';
+import FormBodySection from '../form-body-section';
+import FormSubHeader from '../form-sub-header';
+import PoiNameDobExample from '../../Assets/ic-poi-name-dob-example.svg';
 import { getEmploymentStatusList } from '../../Sections/Assessment/FinancialAssessment/financial-information-list';
 import { isFieldImmutable } from '../../Helpers/utils';
 

packages/account/src/Components/poi/poi-confirm-with-example-form-container/__tests__/poi-confirm-with-example-form-container.spec.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { render, screen, waitFor } from '@testing-library/react';
+import { act, render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import PoiConfirmWithExampleFormContainer from '../poi-confirm-with-example-form-container';
 
@@ -21,16 +21,17 @@ jest.mock('@deriv/shared', () => ({
     })),
     WS: {
         wait: jest.fn(() => Promise.resolve()),
-        setSettings: jest.fn(() =>
-            Promise.resolve({
-                data: { error: '' },
-            })
-        ),
+        setSettings: jest.fn(() => Promise.resolve({ error: '' })),
         authorized: {
             storage: {
                 getSettings: jest.fn(() =>
                     Promise.resolve({
-                        response: { error: '', get_settings: {} },
+                        error: '',
+                        get_settings: {
+                            first_name: 'test first name1',
+                            last_name: 'test last name1',
+                            date_of_birth: '2003-08-03',
+                        },
                     })
                 ),
             },
@@ -71,6 +72,7 @@ describe('<PoiConfirmWithExampleFormContainer/>', () => {
         expect(input_fields[2].name).toBe('date_of_birth');
     });
     it('should change fields and trigger submit', async () => {
+        jest.useFakeTimers();
         render(<PoiConfirmWithExampleFormContainer {...mock_props} />);
 
         const checkbox_el: HTMLInputElement = await screen.findByRole('checkbox');
@@ -97,9 +99,14 @@ describe('<PoiConfirmWithExampleFormContainer/>', () => {
 
         const button_el = screen.getByRole('button');
         userEvent.click(button_el);
+        await userEvent.click(button_el);
+        act(() => {
+            jest.advanceTimersByTime(500);
+        });
 
         await waitFor(() => {
             expect(mock_props.onFormConfirm).toHaveBeenCalled();
         });
+        jest.useRealTimers();
     });
 });

packages/account/src/Components/poi/poi-confirm-with-example-form-container/poi-confirm-with-example-form-container.tsx

@@ -90,7 +90,10 @@ const PoiConfirmWithExampleFormContainer = ({
                 setRestState({ ...rest_state, api_error: response.error.message });
                 return;
             }
-            setRestState({ ...rest_state, ...response.get_settings });
+            const { first_name, last_name, date_of_birth } = response?.get_settings ?? {
+                ...rest_state.form_initial_values,
+            };
+            setRestState({ ...rest_state, form_initial_values: { first_name, last_name, date_of_birth } });
             setChecked(true);
             setIsLoading(false);
 

packages/account/src/Components/reset-trading-password-modal/reset-trading-password-modal.tsx

@@ -1,17 +1,17 @@
 import React, { ChangeEvent } from 'react';
-import PropTypes from 'prop-types';
 import { Formik, Form, FormikValues, FormikErrors } from 'formik';
 import { useHistory } from 'react-router-dom';
 import { Button, Dialog, Icon, PasswordInput, PasswordMeter, Text, FormSubmitButton } from '@deriv/components';
 import { getErrorMessages, validPassword, validLength, WS, getCFDPlatformLabel } from '@deriv/shared';
 import { localize, Localize } from '@deriv/translations';
+import { TPlatforms } from '../../Types';
 import './reset-trading-password-modal.scss';
 
 type TResetTradingPassword = {
     setDialogTitleFunc?: (value: boolean) => void;
     toggleResetTradingPasswordModal: (value: boolean) => void;
     verification_code: string;
-    platform: 'dxtrade' | 'mt5' | 'derivez';
+    platform: TPlatforms;
 };
 
 const ResetTradingPassword = ({
@@ -249,13 +249,3 @@ export const ResetTradingPasswordModal = ({
         </Dialog>
     );
 };
-
-ResetTradingPasswordModal.propTypes = {
-    disableApp: PropTypes.func,
-    enableApp: PropTypes.func,
-    is_loading: PropTypes.bool,
-    is_visible: PropTypes.bool,
-    toggleResetTradingPasswordModal: PropTypes.func,
-    verification_code: PropTypes.string,
-    platform: PropTypes.string,
-};

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

@@ -26,7 +26,7 @@ import {
 const Page404 = React.lazy(() => moduleLoader(() => import(/* webpackChunkName: "404" */ 'Modules/Page404')));
 
 // Order matters
-const initRoutesConfig = ({ is_appstore }) => [
+const initRoutesConfig = () => [
     {
         path: routes.account_closed,
         component: AccountClosed,
@@ -112,27 +112,25 @@ 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,18 +148,6 @@ 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,
-            //           },
-            //       ]
-            //     : []),
         ],
     },
 ];
@@ -171,9 +157,9 @@ let routesConfig;
 // 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 getRoutesConfig = ({ is_appstore }) => {
+const getRoutesConfig = () => {
     if (!routesConfig) {
-        routesConfig = initRoutesConfig({ is_appstore });
+        routesConfig = initRoutesConfig();
         routesConfig.push(route_default);
     }
     return routesConfig;