Merge branch 'master' into ts-onramp-cashier

packages/bot-web-ui/package.json

@@ -82,6 +82,6 @@
         "react": "^16.14.0",
         "react-content-loader": "^4.3.2",
         "react-dom": "^16.14.0",
-        "react-transition-group": "^4.3.0"
+        "react-transition-group": "4.4.2"
     }
 }

packages/cashier/.eslintignore

@@ -1,6 +1,6 @@
 build/*.js
 src/**/__tests__/*.js
-src/_common/lib/**/*.js
+src/utils/lib/**/*.js
 .eslintrc.js
 .stylelintrc.js
 lib

packages/cashier/build/constants.js

@@ -18,7 +18,6 @@ const {
 const IS_RELEASE = process.env.NODE_ENV === 'production' || process.env.NODE_ENV === 'staging';
 
 const ALIASES = {
-    _common: path.resolve(__dirname, '../src/_common'),
     Components: path.resolve(__dirname, '../src/components'),
     Config: path.resolve(__dirname, '../src/config'),
     Containers: path.resolve(__dirname, '../src/containers'),
@@ -36,7 +35,7 @@ const rules = (is_test_env = false, is_mocha_only = false) => [
         ? [
               {
                   test: /\.(js|jsx|ts|tsx)$/,
-                  exclude: /node_modules|__tests__|(build\/.*\.js$)|(_common\/lib)/,
+                  exclude: /node_modules|__tests__|(build\/.*\.js$)|(utils\/lib)/,
                   include: /src/,
                   loader: 'eslint-loader',
                   enforce: 'pre',

packages/cashier/build/webpack.config.js

@@ -47,7 +47,7 @@ module.exports = function (env) {
                 'react-router-dom': 'react-router-dom',
                 'react-router': 'react-router',
                 mobx: 'mobx',
-                'mobx-react': 'mobx-react',
+                'mobx-react-lite': 'mobx-react-lite',
                 '@deriv/shared': '@deriv/shared',
                 '@deriv/components': '@deriv/components',
                 '@deriv/translations': '@deriv/translations',

packages/cashier/jest.config.js

@@ -8,7 +8,6 @@ module.exports = {
         '^.+\\.svg$': '<rootDir>/../../__mocks__/styleMock.js',
         '^Stores/(.*)$': '<rootDir>/src/stores/$1',
         '^Constants/(.*)$': '<rootDir>/src/constants/$1',
-        '^_common/(.*)$': '<rootDir>/src/_common/$1',
         '^Config/(.*)$': '<rootDir>/src/config/$1',
         '^Components/(.*)$': '<rootDir>/src/components/$1',
         '^Utils/(.*)$': '<rootDir>/src/utils/$1',

packages/cashier/src/app.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { setWebsocket } from '@deriv/shared';
-import { init } from '_common/server_time';
+import { init } from 'Utils/server_time';
 import Routes from 'Containers/routes';
 import { MobxContentProvider } from 'Stores/connect';
 

packages/cashier/src/components/crypto-fiat-converter/crypto-fiat-converter.tsx

@@ -24,14 +24,17 @@ type TCryptoFiatConverterProps = {
     from_currency: string;
     hint: string | TReactChildren;
     is_timer_visible: boolean;
-    onChangeConverterFromAmount: (event: TReactChangeEvent, from_currency: string, to_currency: string) => void;
+    onChangeConverterFromAmount: (
+        event: { target: { value: string } },
+        from_currency: string,
+        to_currency: string
+    ) => void;
     onChangeConverterToAmount: (event: TReactChangeEvent, from_currency: string, to_currency: string) => void;
     resetConverter: () => void;
     to_currency: string;
     validateFromAmount: () => void;
     validateToAmount: () => void;
 };
-let changed_event_amount: TReactChangeEvent;
 
 const Timer = ({ onComplete }: TTimerProps) => {
     const initial_time = 60;
@@ -150,9 +153,8 @@ const CryptoFiatConverter = ({
                         {is_timer_visible && (
                             <Timer
                                 onComplete={() => {
-                                    changed_event_amount.target.value = converter_from_amount;
                                     onChangeConverterFromAmount(
-                                        { ...changed_event_amount },
+                                        { target: { value: converter_from_amount } },
                                         from_currency,
                                         to_currency
                                     );

packages/cashier/src/containers/cashier/__tests__/cashier.spec.js

@@ -35,7 +35,7 @@ jest.mock('@deriv/shared', () => {
     };
 });
 
-jest.mock('../account-prompt-dialog', () => jest.fn(() => 'mockedAccountPromptDialog'));
+jest.mock('Components/account-prompt-dialog', () => jest.fn(() => 'mockedAccountPromptDialog'));
 jest.mock('Components/error-dialog', () => jest.fn(() => 'mockedErrorDialog'));
 jest.mock('Pages/deposit', () => jest.fn(() => 'mockedDeposit'));
 jest.mock('Pages/withdrawal', () => jest.fn(() => 'mockedWithdrawal'));

packages/cashier/src/containers/cashier/cashier.jsx

@@ -4,6 +4,7 @@ import { withRouter } from 'react-router-dom';
 import {
     Button,
     DesktopWrapper,
+    Div100vhContainer,
     FadeWrapper,
     MobileWrapper,
     PageOverlay,
@@ -13,7 +14,7 @@ import {
 import { localize } from '@deriv/translations';
 import { getSelectedRoute, getStaticUrl, isMobile, routes, WS } from '@deriv/shared';
 import { connect } from 'Stores/connect';
-import AccountPromptDialog from './account-prompt-dialog';
+import AccountPromptDialog from 'Components/account-prompt-dialog';
 import ErrorDialog from 'Components/error-dialog';
 import './cashier.scss';
 
@@ -162,15 +163,15 @@ const Cashier = ({
                         />
                     </DesktopWrapper>
                     <MobileWrapper>
-                        <div className='cashier__wrapper--is-mobile'>
+                        <Div100vhContainer className='cashier__wrapper--is-mobile' height_offset='80px'>
                             {selected_route && (
                                 <selected_route.component
                                     component_icon={selected_route.icon_component}
                                     history={history}
                                     menu_options={getMenuOptions()}
                                 />
                             )}
-                        </div>
+                        </Div100vhContainer>
                     </MobileWrapper>
                 </PageOverlay>
             </div>

packages/cashier/src/containers/cashier/cashier.scss

@@ -59,7 +59,6 @@
             // TODO: Replace the media query with Mobile/Tablet mixin after syncing the responsive.js and devices.scss
             @media (max-width: 926px) {
                 width: 100vw;
-                min-height: calc(100vh - 80px);
             }
 
             @include mobile {

packages/cashier/src/containers/routes/routes.jsx

@@ -1,4 +1,3 @@
-import { PropTypes as MobxPropTypes } from 'mobx-react';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { withRouter } from 'react-router';
@@ -15,7 +14,7 @@ const Routes = ({ error, has_error, is_logged_in, is_logging_in, passthrough })
 };
 
 Routes.propTypes = {
-    error: MobxPropTypes.objectOrObservableObject,
+    error: PropTypes.any,
     has_error: PropTypes.bool,
     is_logged_in: PropTypes.bool,
     is_logging_in: PropTypes.bool,

packages/cashier/src/pages/p2p-cashier/p2p-cashier.jsx

@@ -6,7 +6,7 @@ import { routes, WS } from '@deriv/shared';
 import { Loading } from '@deriv/components';
 import P2P from '@deriv/p2p';
 import { connect } from 'Stores/connect';
-import { get, init, timePromise } from '_common/server_time';
+import { get, init, timePromise } from 'Utils/server_time';
 
 /* P2P will use the same websocket connection as Deriv/Binary, we need to pass it as a prop */
 const P2PCashier = ({

packages/cashier/src/pages/payment-agent/payment-agent-deposit/payment-agent-deposit.jsx

@@ -1,4 +1,3 @@
-import { PropTypes as MobxPropTypes } from 'mobx-react';
 import { toJS } from 'mobx';
 import PropTypes from 'prop-types';
 import React from 'react';
@@ -90,7 +89,7 @@ PaymentAgentDeposit.propTypes = {
     onChangePaymentMethod: PropTypes.func,
     payment_agent_list: PropTypes.array,
     selected_bank: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    supported_banks: MobxPropTypes.arrayOrObservableArray,
+    supported_banks: PropTypes.any,
 };
 
 export default connect(({ modules }) => ({

packages/cashier/src/pages/withdrawal/crypto-withdraw-receipt/crypto-withdraw-receipt.jsx

@@ -5,7 +5,7 @@ import { isCryptocurrency, isMobile } from '@deriv/shared';
 import { localize, Localize } from '@deriv/translations';
 import { connect } from 'Stores/connect';
 import RecentTransaction from 'Components/recent-transaction';
-import { getAccountText } from '_common/utility';
+import { getAccountText } from 'Utils/utility';
 import './crypto-withdraw-receipt.scss';
 
 const Status = () => {

packages/cashier/src/stores/connect.js

@@ -1,4 +1,4 @@
-import { useObserver } from 'mobx-react';
+import { useObserver } from 'mobx-react-lite';
 import React from 'react';
 
 const isClassComponent = Component =>

packages/cashier/src/utils/validator/validator.js

@@ -1,5 +1,5 @@
 import { getPreBuildDVRs } from '@deriv/shared';
-import { template } from '_common/utility';
+import { template } from '../utility';
 import Error from './errors';
 
 class Validator {

packages/cfd/package.json

@@ -106,6 +106,6 @@
         "react-dom": "^16.14.0",
         "react-router": "^5.2.0",
         "react-router-dom": "^5.2.0",
-        "react-transition-group": "^4.3.0"
+        "react-transition-group": "4.4.2"
     }
 }

packages/cfd/src/Containers/jurisdiction-modal.tsx

@@ -3,7 +3,13 @@ import { Button, Modal, DesktopWrapper, MobileDialog, MobileWrapper, UILoader }
 import { localize, Localize } from '@deriv/translations';
 import { connect } from 'Stores/connect';
 import RootStore from 'Stores/index';
-import { GetAccountSettingsResponse, GetSettings, LandingCompany, GetAccountStatus } from '@deriv/api-types';
+import {
+    GetAccountSettingsResponse,
+    GetSettings,
+    LandingCompany,
+    GetAccountStatus,
+    DetailsOfEachMT5Loginid,
+} from '@deriv/api-types';
 import JurisdictionModalContent from './jurisdiction-modal-content';
 import { WS, getIdentityStatusInfo } from '@deriv/shared';
 import { TTradingPlatformAvailableAccount } from '../Components/props.types';
@@ -47,6 +53,7 @@ type TJurisdictionModalProps = TCompareAccountsReusedProps & {
     setJurisdictionSelectedShortcode: (shortcode: string) => void;
     toggleCFDVerificationModal: () => void;
     account_status: GetAccountStatus;
+    mt5_login_list: DetailsOfEachMT5Loginid[];
 };
 
 const JurisdictionModal = ({
@@ -67,6 +74,7 @@ const JurisdictionModal = ({
     setJurisdictionSelectedShortcode,
     toggleCFDVerificationModal,
     account_status,
+    mt5_login_list,
 }: TJurisdictionModalProps) => {
     const [checked, setChecked] = React.useState(false);
     const [has_submitted_personal_details, setHasSubmittedPersonalDetails] = React.useState(false);
@@ -92,13 +100,26 @@ const JurisdictionModal = ({
     const poa_failed = poa_status === 'suspected' || poa_status === 'rejected' || poa_status === 'expired';
     const poi_poa_not_submitted = poi_status === 'none' || poa_status === 'none';
 
-    React.useEffect(() => {
-        if (is_jurisdiction_modal_visible) {
-            if ((poa_status === 'pending' || poi_status === 'pending') && !is_eu) {
+    const selectSVGJurisdiction = () => {
+        if (account_type.type && !is_eu) {
+            const created_svg_accounts = mt5_login_list.filter(
+                data =>
+                    data.market_type === account_type.type &&
+                    data.landing_company_short === 'svg' &&
+                    data.account_type === 'real'
+            );
+            if (!created_svg_accounts.length && (poa_status === 'pending' || poi_status === 'pending')) {
                 setJurisdictionSelectedShortcode('svg');
             } else {
                 setJurisdictionSelectedShortcode('');
             }
+        } else {
+            setJurisdictionSelectedShortcode('');
+        }
+    };
+    React.useEffect(() => {
+        if (is_jurisdiction_modal_visible) {
+            selectSVGJurisdiction();
             if (!has_submitted_personal_details) {
                 let get_settings_response: GetSettings = {};
                 if (!account_settings) {
@@ -347,4 +368,5 @@ export default connect(({ modules, ui, client }: RootStore) => ({
     toggleCFDVerificationModal: modules.cfd.toggleCFDVerificationModal,
     setJurisdictionSelectedShortcode: modules.cfd.setJurisdictionSelectedShortcode,
     account_status: client.account_status,
+    mt5_login_list: client.mt5_login_list,
 }))(JurisdictionModal);

packages/components/package.json

@@ -83,7 +83,7 @@
     "react-router-dom": "^5.2.0",
     "react-swipeable": "^5.5.1",
     "react-tiny-popover": "^5.1.0",
-    "react-transition-group": "^4.3.0",
+    "react-transition-group": "4.4.2",
     "react-virtualized": "^9.22.2"
   }
 }

packages/components/src/components/autocomplete/autocomplete.jsx

@@ -33,6 +33,7 @@ const Autocomplete = React.memo(props => {
         autoComplete,
         className,
         dropdown_offset,
+        historyValue,
         error,
         has_updating_list = true,
         input_id,
@@ -65,10 +66,18 @@ const Autocomplete = React.memo(props => {
     React.useEffect(() => {
         if (has_updating_list) {
             setFilteredItems(list_items);
-            setActiveIndex(null);
-            setInputValue('');
+            if (historyValue) {
+                const index = filtered_items.findIndex(object => {
+                    return object.text === historyValue;
+                });
+                setInputValue(historyValue);
+                setActiveIndex(index);
+            } else {
+                setInputValue('');
+                setActiveIndex(null);
+            }
         }
-    }, [list_items, has_updating_list]);
+    }, [list_items, has_updating_list, historyValue]);
 
     React.useEffect(() => {
         if (should_show_list && list_item_ref.current) {

packages/components/src/components/composite-checkbox/composite-checkbox.jsx

@@ -44,7 +44,7 @@ CompositeCheckbox.propTypes = {
     label: PropTypes.string.isRequired,
     id: PropTypes.string,
     description: PropTypes.string.isRequired,
-    children: PropTypes.oneOfType(PropTypes.node, PropTypes.arrayOf(PropTypes.node)),
+    children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
 };
 
 export default CompositeCheckbox;

packages/components/src/components/dropdown/display-text.jsx

@@ -56,7 +56,7 @@ DisplayText.propTypes = {
     list: listPropType(),
     name: PropTypes.string,
     placeholder: PropTypes.string,
-    value: PropTypes.string,
+    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     is_align_text_left: PropTypes.bool,
 };