Sync appstore branch with master (#5056)

* salar / Hotfix/multiplier eu (#4989)

* Add helper function for EU countries

* Show digital options banner to VRTC-only EU clients

* Add comment to remove duplicate code

* Fix: apply more compliance conditions

* Fix issue for EU residence

* Apply prettier

* Fix mobx issue for residence

* Fix: prevent calls on undefined

* Fix: check for blockly div first

* Apply prettier

* export_components_which_needed_to_be_used_in_app_store (#4972)

* refactor_payment_agent_component_for_app_store (#4968)

* translations: 📚 sync translations with crowdin (#5005)

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

* refactor: investor password (#4992)

* Nuri/Refactor: Refactor compare account (#4969)

* refactor compare account

* retrigger circleci

* retrigger deployment

* removed unused text

* likhith/OrderConfirmCompleted error status displayed on slow n/w (#4832)

* Resolved: #56123 - OrderConfirmCompleted error status displayed on slow n/w

* Refactored code

* Fixed lint errors

* implemented review comment

* Resolved eslint issues

* Resolved Console.log error

* Added comments to changes

* Resolved lint errors

* Removed unwanted component

* fix storybook build (#4997)

* MaryiaF/fix: TrackJS error - i.resetVirtualBalance is not a function (#4892)

* MaryiaF/fix: TrackJS error - i.resetVirtualBalance is not a function

* MaryiaF/fix: TrackJS error - i.resetVirtualBalance is not a function

* Maryia/Fix for styles of POI & POA steps in Settings and CFD modals (#4761)

* Maryia/fixed styles of poa upload block

* Maryia/fixed cfd poa modal for responsive mode

* Maryia/fix for POI step style in CFD modal

* Maryia/fixed style of upload criteria in CFD modal POA step

* Maryia/refactoring as per deriv app code standard

* Maryia/replaced px with rem

* Maryia/fix for the upload box style requiring nesting inside list

* Maryia/fixed POI styles

* Hirad/Cfd dashboard container JS to TS (#4941)

* Changed cfd-dashboard container from javascript to typescript

* fix--Fixed the default export of the cfd-dashboard

* Pulled from master

* fix--Invisible tab menu should be fixed

* Auto styling is done

* IDV notification changes and refactoring (#5001)

* Akmal / Add trustpilot notification (#4974)

* Add trustpilot notification

* Fix formatting

* Add undefined check

* Vijayasree/Manage Account modal from Cashier Onboarding links are broken on iphoneSE (#4948)

* Manage Account modal from Cashier Onboarding links are broken on iphone SE

* Manage Account modal from Cashier Onboarding links are broken on iphone SE

* Manage Account modal from Cashier Onboarding links are broken on iphoneSE

* Update account-wizard.scss

Co-authored-by: Matin shafiei <matin@binary.com>

* likhith/Added jest config and test cases for App-Content component (#4876)

* Added jest config and test cases for App-Content component

* Added test cases for App Content component

* Fixed lint errors

* Removed lint errors and configured webpack

* Reordered webpack extension array

* Implemented review comments

* implemented review comments

* george / added test for "PaymentAgentList" component (#4825)

* added test for "PaymentAgentList" component

* fixed a spelling error

* refactored code, changed query method

* code refactoring

* george / added tests for OnRampProviderCard (#4880)

* added tests for OnRampProviderCard

* code refactoring (add data-testid into Icon component)

* naming refactoring data-testid

* naming refactoring

* add new prop (data_testid) to Icon component

* code refactoring using icon prop data_testid

* add prop types for data_testid

* likhith/Removed unused functions from Cashier container and added test cases (#4821)

* likhith/added testcases to cashier-container

* added loader check test case

* Variable change

* Fixed variable scoping

* Refactored code inline with  naming conventions

* Removed code smells

* Improved code visibility

* Removed unused functionality in CashierComponent

* Removed unused imports

* Removed unused property and improved test cases

* modified input data

* Incorporated review comments

* Incorporated review comments

* Added test cases to order and order-table (#4916)

* fix test cases because of refactoring the component (#5029)

* Nijil/Pass correct value to SelectNative value prop from PA dropdown (#5034)

* fix: pass correct value to SelectNative value prop

* minor refactor

* translations: 📚 sync translations with crowdin (#5039)

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

* MaryiaF/fix: bold the menu option when the user has gone by the child… (#4965)

* MaryiaF/fix: bold the menu option when the user has gone by the child menu items and then navigated one of them to the corresponding page

* MaryiaF/refactor:  solution with switching to the bold menu item

* MaryiaF/chore: revert intent

* MaryiaF/refactor: use Text component instead of spane in toggle-menu-drawer file

* MaryiaF/refactor: remove unuseful  style and change import

* Merge branch 'master' of github.com:binary-com/deriv-app into 57685_2

* MaryiaF/fix: all the sub menus are not supposed to be in bold in first visit, 1 of the sub menu should be bold during the visit

* MaryiaF/fix: condition when the menu item should be bold

* MaryiaF/fix: remove console.log

* Revert "Merge branch 'master' of github.com:binary-com/deriv-app into 57685_2"

This reverts commit 2c19bed.

Co-authored-by: Carol Sachdeva <58209918+carol-binary@users.noreply.github.com>

* <SearchBox /> test coverage (#4900)

Co-authored-by: Carol Sachdeva <58209918+carol-binary@users.noreply.github.com>

* Artsem / <Verification /> test coverage (#4890)

* <Verification /> test coverage

* remove redundant import

* fix testid naming

* fix testid and elements naming

* remove redundant mockProps()

Co-authored-by: Carol Sachdeva <58209918+carol-binary@users.noreply.github.com>

* Amina/test_coverage_for_poi-verified_component_in_account_package (#5006)

* poi-verified-spec

* poi-verified-spec

Co-authored-by: Carol Sachdeva <58209918+carol-binary@users.noreply.github.com>

* Amina/test_coverage_for_poa_unverified_component_in_account_package (#4993)

* unverified-spec

* poa-unverified

Co-authored-by: Carol Sachdeva <58209918+carol-binary@users.noreply.github.com>

* Amina/test coverage for poa-submitted (#4990)

* test_coverage_for_poa_submitted

* fix

Co-authored-by: Carol Sachdeva <58209918+carol-binary@users.noreply.github.com>

* george / test coverage for "recent transaction" component (#4838)

* added tests for RecentTransaction component

* fixed condition for cashier transaction icon

* removed code duplication

* refactored code

* code refactoring (add data-testid into Item component)

* code refactoring

* naming refactoring data-testid

* naming refactoring

* add new prop (data_testid) to Icon component

* code refactoring using icon prop data_testid

* add prop types for data_testid

Co-authored-by: Carol Sachdeva <58209918+carol-binary@users.noreply.github.com>

* translations: 📚 sync translations with crowdin (#5048)

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

Co-authored-by: Salar Hafezi <76559464+salarhfz-fs@users.noreply.github.com>
Co-authored-by: Bahar <bahar@firstsource.tech>
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: njazuli-deriv <78890281+njazuli-deriv@users.noreply.github.com>
Co-authored-by: Likhith Kolayari <98398322+likhith-deriv@users.noreply.github.com>
Co-authored-by: Maryia Frantsava <88426229+maryiafrantsava-deriv@users.noreply.github.com>
Co-authored-by: Maryia <87321516+maryia-deriv@users.noreply.github.com>
Co-authored-by: hirad-rewok <91878582+hirad-rewok@users.noreply.github.com>
Co-authored-by: Akmal Djumakhodjaev <akmal@binary.com>
Co-authored-by: vijayasree-deriv <98810931+vijayasree-deriv@users.noreply.github.com>
Co-authored-by: Matin shafiei <matin@binary.com>
Co-authored-by: george-usynin-deriv <89790856+george-usynin-deriv@users.noreply.github.com>
Co-authored-by: Nijil Nirmal <62882794+nijil-binary@users.noreply.github.com>
Co-authored-by: Carol Sachdeva <58209918+carol-binary@users.noreply.github.com>
Co-authored-by: Artsem Kavaleu <88381164+artsemkavaleu-deriv@users.noreply.github.com>
Co-authored-by: amina-deriv <84661147+amina-deriv@users.noreply.github.com>

packages/account/src/Components/poa-submitted/__tests__/poa-submitted.spec.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import { BrowserRouter } from 'react-router-dom';
+import { screen, render } from '@testing-library/react';
+import { Submitted } from '../submitted';
+
+jest.mock('Components/poa-continue-trading-button/continue-trading-button.jsx', () => ({
+    ContinueTradingButton: jest.fn(() => <div data-testid='continue-trading-button' />),
+}));
+
+describe('<Submitted />', () => {
+    const renderWithRouter = component => {
+        return render(<BrowserRouter>{component}</BrowserRouter>);
+    };
+
+    it('should render the Submitted component', () => {
+        renderWithRouter(<Submitted needs_poi />);
+        expect(screen.getByText('Your proof of address was submitted successfully')).toBeInTheDocument();
+    });
+
+    it('should show submit_poi message if needs_poi is true', () => {
+        renderWithRouter(<Submitted needs_poi />);
+        expect(screen.getByText('You must also submit a proof of identity.')).toBeInTheDocument();
+    });
+
+    it('should show review message if needs_poi is false', () => {
+        renderWithRouter(<Submitted needs_poi />);
+        expect(screen.getByText('Your document is being reviewed, please check back in 1-3 days.')).toBeInTheDocument();
+    });
+
+    it('should show ContinueTradingButton if needs_poi is false and is_description_enabled is false', () => {
+        renderWithRouter(<Submitted needs_poi={false} is_description_enabled={false} />);
+        expect(screen.getByTestId('continue-trading-button')).toBeInTheDocument();
+    });
+});

packages/account/src/Components/poa-unverified/__tests__/unverified.spec.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { screen, render } from '@testing-library/react';
+import { Unverified } from '../unverified';
+
+jest.mock('Components/icon-message-content', () => () => <div data-testid='mockedIconMessageContent' />);
+
+describe('<Unverified/>', () => {
+    it('should render Unverified component', () => {
+        render(<Unverified />);
+        expect(screen.getByTestId('mockedIconMessageContent')).toBeInTheDocument();
+    });
+});

packages/account/src/Components/poi-verified/__tests__/verified.spec.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import { screen, render } from '@testing-library/react';
+import { Button } from '@deriv/components';
+import { Verified } from '../verified';
+
+jest.mock('Components/poa-button', () => () => <div data-testid='poa-button' />);
+
+describe('<Verified/>', () => {
+    const message = 'Your proof of identity is verified';
+    const redirect_button = <Button>Lorem epsom</Button>;
+    const needs_poa_msg = 'To continue trading, you must also submit a proof of address.';
+
+    it('should render Verified component', () => {
+        render(<Verified />);
+        expect(screen.getByText(message)).toBeInTheDocument();
+    });
+
+    it('should show icon with message if needs_poa is false', () => {
+        const { container } = render(<Verified />);
+        expect(container.getElementsByClassName('dc-icon').length).toBe(1);
+        expect(screen.getByText(message)).toBeInTheDocument();
+    });
+
+    it('should show redirect button if needs_poa and is_from_external are false and have redirect_button', () => {
+        render(<Verified redirect_button={redirect_button} />);
+        expect(screen.getByRole('button')).toBeInTheDocument();
+    });
+
+    it('should not show redirect button if redirect_button is not passed', () => {
+        render(<Verified />);
+        expect(screen.queryByRole('button')).not.toBeInTheDocument();
+    });
+
+    it('should show poa buttons and the message if needs_poa is true and is_from_external is false ', () => {
+        render(<Verified needs_poa redirect_button={redirect_button} />);
+        expect(screen.getByTestId('poa-button')).toBeInTheDocument();
+        expect(screen.getByText(needs_poa_msg)).toBeInTheDocument();
+        expect(screen.getByRole('button')).toBeInTheDocument();
+    });
+});

packages/bot-skeleton/src/scratch/blocks/Binary/Trade Definition/trade_definition_multiplier.js

@@ -181,7 +181,7 @@ Blockly.Blocks.trade_definition_multiplier = {
                         return [option, option];
                     });
 
-                    multiplier_list_dropdown.updateOptions(multiplier_options, {
+                    multiplier_list_dropdown?.updateOptions(multiplier_options, {
                         default_value: should_use_default_value ? undefined : multiplier_list_dropdown.getValue(),
                     });
                 }

packages/bot-web-ui/src/app/app.jsx

@@ -28,7 +28,7 @@ const App = ({ passthrough }) => {
     React.useEffect(() => {
         showDigitalOptionsMaltainvestError(core.client, common);
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [core.client.is_options_blocked]);
+    }, [core.client.is_options_blocked, core.client.account_settings.country_code]);
 
     React.useEffect(() => {
         GTM.init(root_store_instance.current);

packages/bot-web-ui/src/stores/app-store.js

@@ -1,5 +1,5 @@
 import { action, reaction } from 'mobx';
-import { showDigitalOptionsUnavailableError } from '@deriv/shared';
+import { isEuResidenceWithOnlyVRTC, showDigitalOptionsUnavailableError } from '@deriv/shared';
 import { localize } from '@deriv/translations';
 import { runIrreversibleEvents, ApiHelpers, DBot } from '@deriv/bot-skeleton';
 
@@ -14,7 +14,6 @@ export default class AppStore {
     onMount() {
         const { blockly_store, core, main_content } = this.root_store;
         const { client, common, ui } = core;
-
         this.showDigitalOptionsMaltainvestError(client, common);
 
         blockly_store.startLoading();
@@ -26,6 +25,7 @@ export default class AppStore {
         this.registerCurrencyReaction.call(this);
         this.registerOnAccountSwitch.call(this);
         this.registerLandingCompanyChangeReaction.call(this);
+        this.registerResidenceChangeReaction.call(this);
 
         window.addEventListener('click', this.onClickOutsideBlockly);
         window.addEventListener('beforeunload', this.onBeforeUnload);
@@ -53,6 +53,9 @@ export default class AppStore {
         if (typeof this.disposeLandingCompanyChangeReaction === 'function') {
             this.disposeLandingCompanyChangeReaction();
         }
+        if (typeof this.disposeResidenceChangeReaction === 'function') {
+            this.disposeResidenceChangeReaction();
+        }
 
         window.removeEventListener('click', this.onClickOutsideBlockly);
         window.removeEventListener('beforeunload', this.onBeforeUnload);
@@ -112,7 +115,6 @@ export default class AppStore {
             () => client.switch_broadcast,
             switch_broadcast => {
                 if (!switch_broadcast) return;
-
                 this.showDigitalOptionsMaltainvestError(client, common);
 
                 const { active_symbols, contracts_for } = ApiHelpers.instance;
@@ -141,7 +143,36 @@ export default class AppStore {
         this.disposeLandingCompanyChangeReaction = reaction(
             () => client.landing_company_shortcode,
             () => {
-                if (client.has_maltainvest_account || client.is_options_blocked) {
+                if (
+                    (!client.is_logged_in && client.is_eu_country) ||
+                    client.has_maltainvest_account ||
+                    isEuResidenceWithOnlyVRTC(client.active_accounts) ||
+                    client.is_options_blocked
+                ) {
+                    showDigitalOptionsUnavailableError(common.showError, {
+                        text: localize(
+                            'We’re working to have this available for you soon. If you have another account, switch to that account to continue trading. You may add a DMT5 Financial.'
+                        ),
+                        title: localize('DBot is not available for this account'),
+                        link: localize('Go to DMT5 dashboard'),
+                    });
+                }
+            }
+        );
+    }
+
+    registerResidenceChangeReaction() {
+        const { client, common } = this.root_store.core;
+
+        this.disposeResidenceChangeReaction = reaction(
+            () => client.account_settings.country_code,
+            () => {
+                if (
+                    (!client.is_logged_in && client.is_eu_country) ||
+                    client.has_maltainvest_account ||
+                    isEuResidenceWithOnlyVRTC(client.active_accounts) ||
+                    client.is_options_blocked
+                ) {
                     showDigitalOptionsUnavailableError(common.showError, {
                         text: localize(
                             'We’re working to have this available for you soon. If you have another account, switch to that account to continue trading. You may add a DMT5 Financial.'
@@ -192,16 +223,23 @@ export default class AppStore {
     }
 
     onClickOutsideBlockly = event => {
-        const path = event.path || (event.composedPath && event.composedPath());
-        const is_click_outside_blockly = !path.some(el => el.classList && el.classList.contains('injectionDiv'));
+        if (document.querySelector('.injectionDiv')) {
+            const path = event.path || (event.composedPath && event.composedPath());
+            const is_click_outside_blockly = !path.some(el => el.classList && el.classList.contains('injectionDiv'));
 
-        if (is_click_outside_blockly) {
-            Blockly.hideChaff(/* allowToolbox */ false);
+            if (is_click_outside_blockly) {
+                Blockly?.hideChaff(/* allowToolbox */ false);
+            }
         }
     };
 
     showDigitalOptionsMaltainvestError = (client, common) => {
-        if (client.has_maltainvest_account || client.is_options_blocked) {
+        if (
+            (!client.is_logged_in && client.is_eu_country) ||
+            client.has_maltainvest_account ||
+            isEuResidenceWithOnlyVRTC(client.active_accounts) ||
+            client.is_options_blocked
+        ) {
             showDigitalOptionsUnavailableError(common.showError, {
                 text: localize(
                     'We’re working to have this available for you soon. If you have another account, switch to that account to continue trading. You may add a DMT5 Financial.'

packages/cashier/build/webpack.config.js

@@ -10,6 +10,12 @@ module.exports = function (env, argv) {
         entry: {
             cashier: path.resolve(__dirname, '../src', 'index.js'),
             'cashier-store': path.resolve(__dirname, '../src', 'Stores/cashier-store'),
+            'account-transfer': 'Containers/account-transfer',
+            deposit: 'Containers/deposit',
+            'on-ramp': 'Containers/on-ramp',
+            'payment-agent': 'Containers/payment-agent',
+            'payment-agent-transfer': 'Containers/payment-agent-transfer',
+            withdrawal: 'Containers/withdrawal',
         },
         mode: IS_RELEASE ? 'production' : 'development',
         module: {

packages/cashier/src/Components/Form/payment-agent-deposit.jsx

@@ -0,0 +1,93 @@
+import { PropTypes as MobxPropTypes } from 'mobx-react';
+import { toJS } from 'mobx';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { Accordion, DesktopWrapper, Dropdown, MobileWrapper, SelectNative, Text } from '@deriv/components';
+import { localize, Localize } from '@deriv/translations';
+import { isMobile } from '@deriv/shared';
+import { connect } from 'Stores/connect';
+import PaymentAgentDetails from '../payment-agent-details.jsx';
+import 'Sass/payment-agent-list.scss';
+
+const PaymentAgentDeposit = ({ onChangePaymentMethod, payment_agent_list, selected_bank, supported_banks }) => {
+    const list_with_default = [
+        { text: <Localize i18n_default_text='All payment agents' />, value: 0 },
+        ...supported_banks,
+    ];
+
+    return (
+        <React.Fragment>
+            <Text as='p' size='xs' weight='bold' color='prominent' className='payment-agent-list__list-header'>
+                <Localize i18n_default_text='Payment agents' />
+            </Text>
+            <div className='payment-agent-list__list-line' />
+            <div className='payment-agent-list__list-selector'>
+                <Text as='p' size={isMobile() ? 'xxs' : 'xs'} line_height='s' className='cashier__paragraph'>
+                    <Localize i18n_default_text='Choose a payment agent and contact them for instructions.' />
+                </Text>
+                {supported_banks.length > 1 && (
+                    <div>
+                        <DesktopWrapper>
+                            <Dropdown
+                                id='payment_methods'
+                                className='payment-agent-list__drop-down payment-agent-list__filter'
+                                classNameDisplay='cashier__drop-down-display payment-agent-list__filter-display'
+                                classNameDisplaySpan='cashier__drop-down-display-span'
+                                classNameItems='cashier__drop-down-items'
+                                list={list_with_default}
+                                name='payment_methods'
+                                value={selected_bank}
+                                onChange={onChangePaymentMethod}
+                            />
+                        </DesktopWrapper>
+                        <MobileWrapper>
+                            <SelectNative
+                                placeholder={localize('Please select')}
+                                name='payment_methods'
+                                list_items={supported_banks}
+                                value={selected_bank === 0 ? '' : selected_bank.toString()}
+                                label={selected_bank === 0 ? localize('All payment agents') : localize('Type')}
+                                onChange={e =>
+                                    onChangePaymentMethod({
+                                        target: {
+                                            name: 'payment_methods',
+                                            value: e.target.value ? e.target.value.toLowerCase() : 0,
+                                        },
+                                    })
+                                }
+                                use_text={false}
+                            />
+                        </MobileWrapper>
+                    </div>
+                )}
+            </div>
+            <Accordion
+                className='payment-agent-list__accordion'
+                list={payment_agent_list.map(payment_agent => ({
+                    header: payment_agent.name,
+                    content: (
+                        <PaymentAgentDetails
+                            payment_agent_email={payment_agent.email}
+                            payment_agent_phones={toJS(payment_agent.phones)}
+                            payment_agent_urls={toJS(payment_agent.urls)}
+                        />
+                    ),
+                }))}
+            />
+        </React.Fragment>
+    );
+};
+
+PaymentAgentDeposit.propTypes = {
+    onChangePaymentMethod: PropTypes.func,
+    payment_agent_list: PropTypes.array,
+    selected_bank: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    supported_banks: MobxPropTypes.arrayOrObservableArray,
+};
+
+export default connect(({ modules }) => ({
+    onChangePaymentMethod: modules.cashier.payment_agent.onChangePaymentMethod,
+    payment_agent_list: modules.cashier.payment_agent.filtered_list,
+    selected_bank: modules.cashier.payment_agent.selected_bank,
+    supported_banks: modules.cashier.payment_agent.supported_banks,
+}))(PaymentAgentDeposit);

packages/cashier/src/Components/__tests__/cashier-container.spec.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import CashierContainer from '../cashier-container';
+
+jest.mock('@deriv/components', () => ({
+    ...jest.requireActual('@deriv/components'),
+    Loading: () => <div>Loading</div>,
+}));
+
+describe('<CashierContainer/>', () => {
+    const props = {
+        iframe_url: 'https://www.test_url.com',
+        clearIframe: jest.fn(),
+    };
+
+    it('should render the component with iframe when iframe_url value is passed', () => {
+        const { queryByTestId } = render(<CashierContainer {...props} />);
+        const el_loader = screen.queryByText('Loading');
+
+        expect(el_loader).not.toBeInTheDocument();
+        expect(queryByTestId('doughflow_section')).toBeTruthy();
+    });
+
+    it('should render the loading when is_loading is true', () => {
+        const { queryByTestId } = render(<CashierContainer {...props} iframe_url='' is_loading />);
+        const el_loader = screen.queryByText('Loading');
+
+        expect(el_loader).toBeInTheDocument();
+        expect(queryByTestId('doughflow_section')).toBeNull();
+    });
+
+    it('will display doughflow and loader if all props are provided', () => {
+        const { queryByTestId } = render(<CashierContainer {...props} is_loading />);
+        const el_loader = screen.queryByText('Loading');
+
+        expect(el_loader).toBeInTheDocument();
+        expect(queryByTestId('doughflow_section')).toBeTruthy();
+    });
+});