Merge branch master of github.com:binary-com/deriv-app into maryia/87…

…354/task-add-turbos

packages/account/src/Sections/Profile/PersonalDetails/__tests__/personal-details.spec.js

@@ -22,33 +22,6 @@ jest.mock('@deriv/shared/src/services/ws-methods', () => ({
 
 describe('<PersonalDetailsForm />', () => {
     const history = createBrowserHistory();
-    const mock_props = {
-        authentication_status: {},
-        is_eu: true,
-        is_mf: false,
-        is_uk: false,
-        is_svg: false,
-        is_virtual: false,
-        residence_list: [{}],
-        states_list: [],
-        refreshNotifications: jest.fn(),
-        showPOAAddressMismatchSuccessNotification: jest.fn(),
-        showPOAAddressMismatchFailureNotification: jest.fn(),
-        Notifications: '',
-        fetchResidenceList: jest.fn(),
-        fetchStatesList: jest.fn(),
-        has_residence: false,
-        account_settings: {},
-        getChangeableFields: jest
-            .fn()
-            .mockReturnValue(['first_name', 'last_name', 'phone', 'address_line_1', 'address_city']),
-        current_landing_company: {},
-        history: {},
-        is_social_signup: false,
-        updateAccountStatus: jest.fn(),
-        has_poa_address_mismatch: false,
-        is_language_changing: false,
-    };
 
     const promise = Promise.resolve();
     const fetchResidenceList = jest.fn(() => promise);

packages/components/src/components/themed-scrollbars/themed-scrollbars.scss

@@ -3,6 +3,7 @@
     overflow-y: auto;
     overflow-x: hidden;
     position: relative;
+    scroll-behavior: smooth;
     /* Firefox only */
     scrollbar-color: var(--state-active) var(--general-main-1);
     scrollbar-width: thin;

packages/core/src/App/Containers/Layout/__tests__/app-contents.spec.js

@@ -0,0 +1,97 @@
+import React from 'react';
+import { BrowserRouter } from 'react-router-dom';
+import { render, screen, waitFor } from '@testing-library/react';
+import { mockStore, StoreProvider } from '@deriv/stores';
+import { ThemedScrollbars } from '@deriv/components';
+import AppContents from '../app-contents';
+
+let child_ref;
+
+const MockComp = props => {
+    child_ref = React.useRef();
+    return (
+        <div {...props} ref={child_ref}>
+            {props.children}
+        </div>
+    );
+};
+
+jest.mock('@deriv/shared', () => ({
+    ...jest.requireActual('@deriv/shared'),
+    isMobile: jest.fn().mockReturnValue(true),
+    WS: {
+        wait: jest.fn().mockResolvedValue(true),
+    },
+}));
+
+jest.mock('@deriv/components', () => ({
+    ...jest.requireActual('@deriv/components'),
+    ThemedScrollbars: props => <MockComp {...props}>{props.children}</MockComp>,
+}));
+
+describe('<AppContents/>', () => {
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
+    afterEach(() => {
+        jest.restoreAllMocks();
+    });
+
+    const mock = {
+        common: {
+            platform: 'dtrader',
+        },
+        gtm: {
+            pushDataLayer: jest.fn(),
+        },
+    };
+
+    const store = mockStore(mock);
+
+    const renderComponent = (store_config = store) => {
+        const new_store = {
+            ...store_config,
+        };
+        return render(
+            <BrowserRouter>
+                <StoreProvider store={new_store}>
+                    <AppContents />
+                </StoreProvider>
+            </BrowserRouter>
+        );
+    };
+
+    it('should render the Cookie banner with Accept reject button', () => {
+        const new_store = {
+            ...store,
+            client: {
+                ...store.client,
+                is_eu_country: true,
+            },
+        };
+
+        renderComponent(new_store);
+
+        waitFor(async () => {
+            expect(await screen.findByText('Don’t accept')).toBeInTheDocument();
+            expect(await screen.findByText('Accept')).toBeInTheDocument();
+        });
+    });
+
+    it('should not render the cookie banner when it is not a eu country', () => {
+        renderComponent();
+
+        waitFor(() => {
+            expect(screen.queryByText('Don’t accept')).not.toBeInTheDocument();
+            expect(screen.queryByText('Accept')).not.toBeInTheDocument();
+        });
+    });
+
+    it('should move scroll to top', async () => {
+        renderComponent();
+
+        await waitFor(() => {
+            expect(child_ref.current.scrollTop).toBe(0);
+        });
+    });
+});

packages/core/src/App/Containers/Layout/app-contents.jsx

@@ -1,57 +1,55 @@
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
-import { withRouter } from 'react-router';
-import WS from 'Services/ws-methods';
+import { useLocation, withRouter } from 'react-router';
 import { DesktopWrapper, MobileWrapper, ThemedScrollbars } from '@deriv/components';
-import { CookieStorage, isMobile, TRACKING_STATUS_KEY, PlatformContext, platforms, routes } from '@deriv/shared';
+import { CookieStorage, isMobile, TRACKING_STATUS_KEY, PlatformContext, platforms, routes, WS } from '@deriv/shared';
 import { RudderStack } from '@deriv/analytics';
-import { connect } from 'Stores/connect';
 import CookieBanner from '../../Components/Elements/CookieBanner/cookie-banner.jsx';
+import { useStore, observer } from '@deriv/stores';
 import { getLanguage } from '@deriv/translations';
 
 const tracking_status_cookie = new CookieStorage(TRACKING_STATUS_KEY);
 
-const AppContents = ({
-    children,
-    is_app_disabled,
-    is_cashier_visible,
-    is_dark_mode,
-    is_eu_country,
-    is_logged_in,
-    is_logging_in,
-    is_cfd_page,
-    is_positions_drawer_on,
-    is_route_modal_on,
-    notifyAppInstall,
-    platform,
-    pushDataLayer,
-    setAppContentsScrollRef,
-}) => {
+const AppContents = observer(({ children }) => {
     const [show_cookie_banner, setShowCookieBanner] = React.useState(false);
     const [is_gtm_tracking, setIsGtmTracking] = React.useState(false);
     const { is_appstore } = React.useContext(PlatformContext);
+    const {
+        client,
+        common: { platform },
+        gtm: { pushDataLayer },
+        ui,
+    } = useStore();
+
+    const { is_eu_country, is_logged_in, is_logging_in, user_id } = client;
+    const {
+        is_app_disabled,
+        is_cashier_visible,
+        is_cfd_page,
+        is_positions_drawer_on,
+        is_route_modal_on,
+        notifyAppInstall,
+        setAppContentsScrollRef,
+        is_dark_mode_on: is_dark_mode,
+    } = ui;
 
     const tracking_status = tracking_status_cookie.get(TRACKING_STATUS_KEY);
 
     const scroll_ref = React.useRef(null);
+    const child_ref = React.useRef(null);
+
+    const location = useLocation();
 
     const current_page = window.location.hostname + window.location.pathname;
 
     React.useEffect(() => {
-        // rudderstack page view trigger
-        WS.wait('authorize').then(response => {
-            if (response.error) return;
-            const user_id = response.authorize?.user_id;
-
-            if (is_logged_in && user_id) {
-                RudderStack.identifyEvent(user_id, {
-                    language: getLanguage().toLowerCase() || 'en',
-                });
-                RudderStack.pageView(current_page);
-            }
-        });
-
+        if (is_logged_in && user_id) {
+            RudderStack.identifyEvent(user_id, {
+                language: getLanguage().toLowerCase() || 'en',
+            });
+            RudderStack.pageView(current_page);
+        }
         if (scroll_ref.current) setAppContentsScrollRef(scroll_ref);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
@@ -74,6 +72,13 @@ const AppContents = ({
         }
     }, [tracking_status, is_logged_in, is_eu_country, is_logging_in]);
 
+    React.useEffect(() => {
+        // Gets the reference of the child element and scrolls it to the top
+        if (child_ref.current) {
+            child_ref.current.scrollTop = 0;
+        }
+    }, [location?.pathname]);
+
     React.useEffect(() => {
         const handleInstallPrompt = e => {
             // Prevent the mini-infobar from appearing on mobile
@@ -119,9 +124,11 @@ const AppContents = ({
             <DesktopWrapper>
                 {/* Calculate height of user screen and offset height of header and footer */}
                 {window.location.pathname === routes.onboarding ? (
-                    <ThemedScrollbars style={{ maxHeight: '', height: '100%' }}>{children}</ThemedScrollbars>
+                    <ThemedScrollbars style={{ maxHeight: '', height: '100%' }} refSetter={child_ref}>
+                        {children}
+                    </ThemedScrollbars>
                 ) : (
-                    <ThemedScrollbars height='calc(100vh - 84px)' has_horizontal>
+                    <ThemedScrollbars height='calc(100vh - 84px)' has_horizontal refSetter={child_ref}>
                         {children}
                     </ThemedScrollbars>
                 )}
@@ -136,42 +143,10 @@ const AppContents = ({
             )}
         </div>
     );
-};
+});
 
 AppContents.propTypes = {
     children: PropTypes.any,
-    is_app_disabled: PropTypes.bool,
-    is_cashier_visible: PropTypes.bool,
-    is_logged_in: PropTypes.bool,
-    is_cfd_page: PropTypes.bool,
-    is_positions_drawer_on: PropTypes.bool,
-    is_route_modal_on: PropTypes.bool,
-    is_dark_mode: PropTypes.bool,
-    is_eu_country: PropTypes.bool,
-    is_logging_in: PropTypes.bool,
-    identifyEvent: PropTypes.func,
-    pageView: PropTypes.func,
-    pushDataLayer: PropTypes.func,
-    notifyAppInstall: PropTypes.func,
-    platform: PropTypes.string,
-    setAppContentsScrollRef: PropTypes.func,
 };
 
-export default withRouter(
-    connect(({ client, common, gtm, ui }) => ({
-        is_eu_country: client.is_eu_country,
-        is_eu: client.is_eu,
-        is_logged_in: client.is_logged_in,
-        is_logging_in: client.is_logging_in,
-        pushDataLayer: gtm.pushDataLayer,
-        is_app_disabled: ui.is_app_disabled,
-        is_cashier_visible: ui.is_cashier_visible,
-        is_dark_mode: ui.is_dark_mode_on,
-        is_cfd_page: ui.is_cfd_page,
-        is_positions_drawer_on: ui.is_positions_drawer_on,
-        is_route_modal_on: ui.is_route_modal_on,
-        notifyAppInstall: ui.notifyAppInstall,
-        platform: common.platform,
-        setAppContentsScrollRef: ui.setAppContentsScrollRef,
-    }))(AppContents)
-);
+export default withRouter(AppContents);

packages/stores/src/mockStore.ts

@@ -277,6 +277,7 @@ const mock = (): TStores & { is_mock: boolean } => {
             },
             current_focus: null,
             is_cashier_visible: false,
+            is_app_disabled: false,
             is_closing_create_real_account_modal: false,
             is_dark_mode_on: false,
             is_language_settings_modal_on: false,
@@ -316,6 +317,7 @@ const mock = (): TStores & { is_mock: boolean } => {
             is_chart_layout_default: false,
             toggleNeedRealAccountForCashierModal: jest.fn(),
             setIsAcuityModalOpen: jest.fn(),
+            setAppContentsScrollRef: jest.fn(),
             is_switch_to_deriv_account_modal_visible: false,
             openSwitchToRealAccountModal: jest.fn(),
             is_top_up_virtual_open: false,

packages/stores/types.ts

@@ -439,6 +439,7 @@ type TUiStore = {
     is_dark_mode_on: boolean;
     is_reports_visible: boolean;
     is_language_settings_modal_on: boolean;
+    is_app_disabled: boolean;
     is_link_expired_modal_visible: boolean;
     is_mobile: boolean;
     sub_section_index: number;
@@ -491,6 +492,7 @@ type TUiStore = {
     populateHeaderExtensions: (header_items: JSX.Element | null) => void;
     populateSettingsExtensions: (menu_items: Array<TPopulateSettingsExtensionsMenuItem> | null) => void;
     setShouldShowCooldownModal: (value: boolean) => void;
+    setAppContentsScrollRef: (ref: React.MutableRefObject<null | HTMLDivElement>) => void;
     populateFooterExtensions: (
         footer_extensions:
             | [

packages/trader/src/Modules/Trading/Components/Form/TradeParams/strike.jsx

@@ -55,9 +55,7 @@ const Strike = observer(() => {
                             components={[<strong key={0} />]}
                             values={{
                                 trade_type:
-                                    vanilla_trade_type === 'VANILLALONGCALL'
-                                        ? localize('Call')
-                                        : localize('Put'),
+                                    vanilla_trade_type === 'VANILLALONGCALL' ? localize('Call') : localize('Put'),
                                 payout_status:
                                     vanilla_trade_type === 'VANILLALONGCALL' ? localize('above') : localize('below'),
                             }}

packages/trader/src/Modules/Trading/Containers/strike-param-modal.jsx

@@ -28,9 +28,7 @@ const StrikeParamModal = ({ is_open, toggleModal, strike, onChange, name, strike
                             components={[<strong key={0} />]}
                             values={{
                                 trade_type:
-                                    vanilla_trade_type === 'VANILLALONGCALL'
-                                        ? localize('Call')
-                                        : localize('Put'),
+                                    vanilla_trade_type === 'VANILLALONGCALL' ? localize('Call') : localize('Put'),
                                 payout_status:
                                     vanilla_trade_type === 'VANILLALONGCALL' ? localize('above') : localize('below'),
                             }}