Feature/82781/diel_for_all (deriv-com#7311)

* fix: exit button issue

* fix: hide currency selection modal if user has an mf mt5 account

* fix: fixed an error in mobile mode and added isOnboardingVisited again

* fix: remove toggleExitTradersHubModal action from traders-hub-store

* fix: css styles

* fix: currency selector for EU demo

* fix: currency auto selecting first currency after refresh

* fix: tradershub header issues on mobile

* fix: multipliers_status_badge

* fix: demo_low_risk flg in tradershub store

* fix: add or remove modal

* fix: reloading of account_switcher

* chore: update currency switcher styles

* chore: hide derivx for low_risk_cr_eu clients for real and demo

* chore: update styles for currency switcher

* fix: mt5 dashboard fix

* fix: test cases

* fix: test case

* fix: fixed the alignment issue of password-selection-modal

* fix: switching on exit traders modal

* chore: show appropriate information on the account switcher in the old UI

* fix: next button disabled in eu signup

* fix: test case fix

* fix: account switcher

* fix: manage account in account switcher

* fix: dxtrade error

* fix: redirecting for traders_hub

* fix: header traders hub cursor pointer

* fix: acc switcher

* fix: fixing issues of the tour guide

* fix: change regulations to regulation

* fix: regulations v2

* fix: icon and message

* fix: cursor pointer for status badge

* fix: mf real account signup width

* fix: real account signup modal

* fix: place of birth for eu

* fix: tests

* fix: fixed the scroll issue and added a new condition to tour guide

* fix: removed the redundant line of trading-hub-header

* fix: made a small change for the handle scroll function

* fix: replaced interval with timeout

* fix: hide idv for EU

* fix: some capital characters

* fix: signup modal title

* fix: regulation compare table scroll smooth

* fix: compare account modal

* fix: responsive alignment

* fix: fix popup content

* fix: malta description fix and styles

* fix: regulation responsive scroll

* fix: compare account modal

* fix: update jurisdiction content

* fix: jurisdiction content

* fix: get_more_btn

* fix: regulators

* fix: css for account type dropdown

* fix: add options account for eu

* fix: onboarding content desc

* fix: onboarding content at stage 5

* fix: onboarding platform names

* chore: hide region for new accounts

* fix: add options account

* fix: design-difference-in-transfer-popup

* fix: regulator table scroll

* fix: success modal meesage

* fix: responsive scroll dashboard

* fix: regulation switcher appearing for high risk

* fix: 86699_stock_to_stocks

* fix: fix add new account

* fix: traders hub header dark theme icon

* fix: tooltip description for non-eu

* fix: dropdown icon for onboarding currency switcher

* fix: add short code text for derived and financial accounts

* fix: eu currency switcher showing in non-eu

* fix: change dmt5 to deriv mt5 in total assets

* fix: cfd learn more link

* test: fix tests

* fix: dark_mode_status_badge

* fix: add icon for deriv and financial accounts in receipt

* refactor: code refactoring

* fix: transfer now to top-up now

* fix: total assets to be shown based on selected region

* fix: total assets to be shown based on selected region

* fix: loginid error on logout

* fix: show popover in mobile

* fix: disable click on tourguide overlay and remove setting accountType on tour guide

* fix: onboarding footer

* fix: test failure

* fix: fixed the background color issue of onboarding in dark theme

* fix: region seitcher in mobile view

* fix: fixed the glitch issue with onboarding

* fix: fixed the issue of tour guide

* fix: dont show loader if user has no account when switching

* fix: deposit now style in cashier transfer modal

* fix: dashboard title size

* fix: decreased the delays

* fix: redirect to static pages

* fix: fixed the localization issue of tour guide

* fix: remove balance when account has mt5 status

* fix: regulation switcher glitch in high risk

* fix: onboarding labels

* fix: pointer display

* fix: status badge icon overflow and total assets currency in dark theme

* fix: success_message

* fix: minor issues in contents

* fix: account from field should be tha same as trading account

* trigger codecov

* fix: top-up to transfer

* fix: switch account to real for demo_low_risk

* fix: can create deriv x account if user has no cr account and status badge icon css

* fix: status badge color inconsistency and size

* fix: deriv x trade modal huawei css

* fix: jurisdiction modal content

* Account fix selected to (#27)

* fix: default selected to account

* fix: account transfer switch to default client acc

* fix: onboarding footer text padding

* fix: real account needed modal for mt5 if user has no cr account

* fix: eu onboarding footer

* fix: redirect_to_traders_hub_on_entering_mt5_url

* fix: redirect derivx url

* fix: icon design mismatch (#26)

* fix: simplified the conditions

* test: fix test

* fix: fixed all conflicts

* refactor: code refactoring

* fix: salutation

* fix: short code visibility

* fix: fix short code visibility

* refactor: code refactoring

* fix: remove icon for derivx trade modal

* fix: fixed the issue where is_pre_appstore was retrived from another place

* fix: add Assets alias to webpack/tsconfig, refactor imports

* test: fix jest config

* fix: default page should be demo in onboarding

* fix: freeze_mg_acc_on_cooling_perios

* fix: onboarding buttons

* fix: transfer_form_from_account_style

* fix: mt5 trade modal css alignment

* chore: hide disclaimer for low-risk clients

* fix: notification console error

* chore: add volatility in regulator modal

* fix: account_transfer_title

* chore: add disclamer to low risk eu

* fix: asterik_on_required_fields

* fix: adding loader to total asset balance on switching

* fix: loader

* fix: loader console error

* fix: regulation switcher glitch when switching

* fix: add back react content loader

* fix: safari styling shiii

* fix: close button on on boarding

* fix: Trader's hub title

* fix: disclaimer text change

* fix: all dem loaders

* fix: up/dpwn icon

* fix: dmt5 paswrd

* fix: low_risk flag in dbot

* fix: fix layout shift on safari

* fix: servererror component fix

* fix: circleci  and typo

* fix: header loader

* fix: investor password

* fix: merge conflicts

---------

Co-authored-by: amina-deriv <amina@deriv.com>
Co-authored-by: mahdiyeh-deriv <82078941+mahdiyeh-deriv@users.noreply.github.com>
Co-authored-by: Thisyahlen <thisyahlen@regentmarkets.com>
Co-authored-by: Hirad <hirad@re-work.dev>
Co-authored-by: mahdiyeh-fs <mahdiyeh@firstsource.tech>
Co-authored-by: Jim Daniels Wasswa <jim@deriv.com>
Co-authored-by: Thisyahlen Nair <thisyahlennair@Thisyahlens-MacBook-Pro.local>
Co-authored-by: Bahar <bahar@regentmarkets.com>
Co-authored-by: george-usynin-binary <heorhi@binary.com>
Co-authored-by: GeorgeUsynin <70709786+GeorgeUsynin@users.noreply.github.com>

e2e_tests/package.json

@@ -17,7 +17,7 @@
     "@babel/runtime-corejs3": "^7.12.5",
     "babel-jest": "^26.6.3",
     "core-js": "^3.8.1",
-    "eslint-plugin-jest-playwright": "^0.2.1",
+    "eslint-plugin-jest-playwright": "^0.9.0",
     "jest": "^26.6.3",
     "jest-playwright": "^0.0.1",
     "jest-playwright-preset": "^1.4.7",

package.json

@@ -23,12 +23,13 @@
         "@commitlint/config-nx-scopes": "^17.0.0",
         "@jest/globals": "^26.5.3",
         "@nrwl/nx-cloud": "latest",
+        "@testing-library/jest-dom": "^5.12.0",
         "@testing-library/react": "^12.0.0",
+        "@testing-library/user-event": "^13.5.0",
         "@types/jest": "^27.4.1",
         "@types/node": "^17.0.27",
         "@types/react": "^18.0.7",
         "@types/react-dom": "^18.0.0",
-        "@testing-library/user-event": "^13.5.0",
         "@types/react-router-dom": "^5.1.6",
         "@types/react-virtualized": "^9.21.21",
         "@typescript-eslint/eslint-plugin": "^5.8.0",
@@ -43,12 +44,15 @@
         "eslint-import-resolver-webpack": "^0.13.0",
         "eslint-plugin-import": "^2.23.4",
         "eslint-plugin-jest-dom": "^3.8.1",
+        "eslint-plugin-jest-playwright": "^0.9.0",
         "eslint-plugin-prettier": "^3.3.1",
         "eslint-plugin-react": "^7.22.0",
         "eslint-plugin-react-hooks": "^4.2.0",
         "eslint-plugin-testing-library": "^4.2.0",
         "husky": "^7.0.0",
         "jest": "^26.4.2",
+        "jest-chain": "^1.1.5",
+        "jest-extended": "^1.2.0",
         "lerna": "^5.5.1",
         "lint-staged": "^10.4.0",
         "nx": "^14.5.10",
@@ -60,9 +64,6 @@
         "stylelint-no-unsupported-browser-features": "^4.0.0",
         "stylelint-selector-bem-pattern": "^2.1.0",
         "stylelint-webpack-plugin": "^2.1.1",
-        "@testing-library/jest-dom": "^5.12.0",
-        "jest-chain": "^1.1.5",
-        "jest-extended": "^1.2.0",
         "ts-jest": "^26.4.2"
     },
     "scripts": {

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

@@ -3,11 +3,12 @@ import { Switch } from 'react-router-dom';
 import { PlatformContext } from '@deriv/shared';
 import { Localize } from '@deriv/translations';
 import getRoutesConfig from 'Constants/routes-config';
-import RouteWithSubRoutes from './route-with-sub-routes';
 import { TBinaryRoutes, TPlatformContext, TRoute } from 'Types';
+import RouteWithSubRoutes from './route-with-sub-routes';
 
 const BinaryRoutes = (props: TBinaryRoutes) => {
-    const { is_appstore, is_pre_appstore } = React.useContext<TPlatformContext>(PlatformContext);
+    const { is_pre_appstore } = props;
+    const { is_appstore } = React.useContext<TPlatformContext>(PlatformContext);
 
     return (
         <React.Suspense

packages/account/src/Components/language-settings/index.ts

@@ -0,0 +1,3 @@
+import LanguageRadioButton from './language-radio-button';
+
+export default LanguageRadioButton;

packages/account/src/Components/language-settings/language-radio-button.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { Text, Icon } from '@deriv/components';
+import classNames from 'classnames';
+import { getAllowedLanguages } from '@deriv/translations';
+
+type TLanguageRadioButton = {
+    is_current_language: boolean;
+    id: string;
+    language_code: string;
+    name: string;
+    onChange: React.ChangeEventHandler<HTMLInputElement>;
+};
+
+const LanguageRadioButton = ({ is_current_language, id, language_code, name, onChange }: TLanguageRadioButton) => {
+    const allowed_languages: Record<string, string> = getAllowedLanguages();
+    return (
+        <div
+            className={classNames('settings-language__language-link', {
+                'settings-language__language-link--active': is_current_language,
+            })}
+            id={`dt_settings_${language_code}_button`}
+        >
+            <input
+                type='radio'
+                id={id}
+                name={name}
+                onChange={onChange}
+                value={language_code}
+                className='settings-language__language--radio-button'
+            />
+            <label htmlFor={id}>
+                <div>
+                    <Icon
+                        icon={`IcFlag${id.replace('_', '-')}`}
+                        className='settings-language__language-link-flag settings-language__language-flag'
+                    />
+                </div>
+                <div>
+                    <Text
+                        size='xs'
+                        className={classNames('settings-language__language-name', {
+                            'settings-language__language-name--active': is_current_language,
+                        })}
+                    >
+                        {allowed_languages[language_code]}
+                    </Text>
+                </div>
+            </label>
+        </div>
+    );
+};
+
+export default LanguageRadioButton;

packages/account/src/Components/personal-details/__tests__/personal-details.spec.js

@@ -374,7 +374,7 @@ describe('<PersonalDetails/>', () => {
         runCommonFormfieldsTests();
     });
 
-    it('should not show disabled fields', () => {
+    it('should not enable fields which are disabled and empty', () => {
         renderwithRouter(
             <PlatformContext.Provider value={{ is_appstore: false }}>
                 <PersonalDetails
@@ -391,13 +391,13 @@ describe('<PersonalDetails/>', () => {
                 />
             </PlatformContext.Provider>
         );
-        expect(screen.getByRole('radio', { name: /mr/i })).toBeDisabled();
-        expect(screen.getByRole('radio', { name: /ms/i })).toBeDisabled();
+        expect(screen.getByRole('radio', { name: /mr/i })).not.toBeDisabled();
+        expect(screen.getByRole('radio', { name: /ms/i })).not.toBeDisabled();
         expect(screen.getByTestId('first_name')).toBeDisabled();
         expect(screen.getByTestId('last_name')).toBeDisabled();
         expect(screen.getByTestId('date_of_birth')).toBeDisabled();
-        expect(screen.getByTestId('place_of_birth')).toBeDisabled();
-        expect(screen.getByTestId('citizenship')).toBeDisabled();
+        expect(screen.getByTestId('place_of_birth')).not.toBeDisabled();
+        expect(screen.getByTestId('citizenship')).toBeEnabled(); // citizenship value is empty, so enable the field
     });
 
     it('should disable citizen field if the client is_fully_authenticated', () => {