Merge branch 'master' of github.com:thisyahlen-deriv/deriv-app into t…

…hisyahlen/WALL-2622/close_on_escape_key_by_default

.github/workflows/coveralls.yml

@@ -8,7 +8,7 @@ name: Coveralls
 jobs:
   build:
     name: Reporter
-    runs-on: Runner_8cores_Deriv
+    runs-on: Runner_8cores_Deriv-app
     steps:
       - name: Checkout
         uses: actions/checkout@v4

packages/appstore/src/components/cfds-listing/index.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
-import { Text, StaticUrl } from '@deriv/components';
-import { useCFDCanGetMoreMT5Accounts } from '@deriv/hooks';
 import { observer, useStore } from '@deriv/stores';
+import { Text, StaticUrl } from '@deriv/components';
 import { isMobile, formatMoney, getAuthenticationStatusInfo, Jurisdiction } from '@deriv/shared';
 import { localize, Localize } from '@deriv/translations';
 import ListingContainer from 'Components/containers/listing-container';
@@ -10,16 +9,9 @@ import TradingAppCard from 'Components/containers/trading-app-card';
 import PlatformLoader from 'Components/pre-loader/platform-loader';
 import CompareAccount from 'Components/compare-account';
 import GetMoreAccounts from 'Components/get-more-accounts';
-import { Actions } from 'Components/containers/trading-app-card-actions';
 import { getHasDivider } from 'Constants/utils';
-import { AvailableAccount, TDetailsOfEachMT5Loginid } from 'Types';
 import './cfds-listing.scss';
-
-type TDetailedExistingAccount = AvailableAccount &
-    TDetailsOfEachMT5Loginid &
-    Actions & {
-        key: string;
-    };
+import { useCFDCanGetMoreMT5Accounts } from '@deriv/hooks';
 
 const CFDsListing = observer(() => {
     const {
@@ -184,7 +176,7 @@ const CFDsListing = observer(() => {
 
             {is_landing_company_loaded ? (
                 <React.Fragment>
-                    {combined_cfd_mt5_accounts.map((existing_account: TDetailedExistingAccount, index: number) => {
+                    {combined_cfd_mt5_accounts.map((existing_account, index: number) => {
                         const list_size = combined_cfd_mt5_accounts.length;
                         const has_mt5_account_status =
                             existing_account.status || is_idv_revoked
@@ -271,11 +263,11 @@ const CFDsListing = observer(() => {
             )}
 
             {is_landing_company_loaded
-                ? available_ctrader_accounts.map((account: AvailableAccount) => {
+                ? available_ctrader_accounts.map(account => {
                       const existing_accounts = getExistingAccounts(account.platform, account.market_type);
                       const has_existing_accounts = existing_accounts.length > 0;
                       return has_existing_accounts ? (
-                          existing_accounts.map((existing_account: TDetailsOfEachMT5Loginid) => (
+                          existing_accounts.map(existing_account => (
                               <TradingAppCard
                                   action_type='multi-action'
                                   availability={selected_region}
@@ -346,11 +338,11 @@ const CFDsListing = observer(() => {
                 </React.Fragment>
             )}
             {is_landing_company_loaded ? (
-                available_dxtrade_accounts?.map((account: AvailableAccount) => {
+                available_dxtrade_accounts?.map(account => {
                     const existing_accounts = getExistingAccounts(account.platform, account.market_type);
                     const has_existing_accounts = existing_accounts.length > 0;
                     return has_existing_accounts ? (
-                        existing_accounts.map((existing_account: TDetailsOfEachMT5Loginid) => (
+                        existing_accounts.map(existing_account => (
                             <TradingAppCard
                                 action_type='multi-action'
                                 availability={selected_region}

packages/cfd/src/features/Containers/cfd-password-modal/cfd-create-password-form.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import { TCFDPasswordFormReusedProps, TCFDPasswordFormValues, TOnSubmitPassword } from './types';
+import ChangePasswordConfirmation from '../../../Containers/cfd-change-password-confirmation';
+import { CreatePassword } from './create-password';
+import { CFD_PLATFORMS } from '../../../Helpers/cfd-config';
+
+import { FormikHelpers } from 'formik';
+import { MultiStep } from '@deriv/components';
+
+type TCFDCreatePasswordFormProps = TCFDPasswordFormReusedProps & {
+    has_mt5_account: boolean;
+    submitPassword: TOnSubmitPassword;
+    is_real_financial_stp: boolean;
+};
+
+type TMultiStepRefProps = {
+    goNextStep: () => void;
+    goPrevStep: () => void;
+};
+
+export const CFDCreatePasswordForm = ({
+    has_mt5_account,
+    platform,
+    error_message,
+    validatePassword,
+    submitPassword,
+    is_real_financial_stp,
+}: TCFDCreatePasswordFormProps) => {
+    const multi_step_ref = React.useRef<TMultiStepRefProps>();
+    const [password, setPassword] = React.useState('');
+
+    const onSubmit: TOnSubmitPassword = (values, actions) => {
+        if (platform === CFD_PLATFORMS.MT5 && has_mt5_account) {
+            setPassword(values.password);
+            multi_step_ref.current?.goNextStep();
+        } else {
+            submitPassword(values, actions);
+        }
+    };
+
+    const steps = [
+        {
+            component: (
+                <CreatePassword
+                    password={password}
+                    platform={platform}
+                    error_message={error_message}
+                    validatePassword={validatePassword}
+                    onSubmit={onSubmit}
+                    is_real_financial_stp={is_real_financial_stp}
+                />
+            ),
+        },
+        {
+            component: (
+                <ChangePasswordConfirmation
+                    className='cfd-password-modal__change-password-confirmation'
+                    platform={platform}
+                    onConfirm={(_values: TCFDPasswordFormValues, actions: FormikHelpers<TCFDPasswordFormValues>) =>
+                        submitPassword({ password }, actions)
+                    }
+                    onCancel={() => multi_step_ref.current?.goPrevStep()}
+                />
+            ),
+        },
+    ];
+
+    return <MultiStep ref={multi_step_ref} steps={steps} />;
+};