From da9a72d427b6ab4741089d3932ac148d01ef19b8 Mon Sep 17 00:00:00 2001
From: adrienne-deriv <103016120+adrienne-deriv@users.noreply.github.com>
Date: Wed, 18 Oct 2023 17:32:37 +0800
Subject: [PATCH] adrienne/thisyahlen: fixed an issue where mt5 password
 creation for demo is error (#10778)

* chore: fixed an issue where password creation for demo is error

* chore: revert current changes in merge conflict

* chore: revert current changes in merge conflict
---
 .../cfd/modals/MT5PasswordModal/MT5PasswordModal.tsx  | 11 ++++++++++-
 .../cfd/screens/Jurisdiction/JurisdictionScreen.tsx   |  6 ++++--
 .../src/features/cfd/screens/Success/Success.tsx      |  2 +-
 3 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/packages/wallets/src/features/cfd/modals/MT5PasswordModal/MT5PasswordModal.tsx b/packages/wallets/src/features/cfd/modals/MT5PasswordModal/MT5PasswordModal.tsx
index c59feafcd908..3a4aa134e756 100644
--- a/packages/wallets/src/features/cfd/modals/MT5PasswordModal/MT5PasswordModal.tsx
+++ b/packages/wallets/src/features/cfd/modals/MT5PasswordModal/MT5PasswordModal.tsx
@@ -6,6 +6,7 @@ import {
     useMT5AccountsList,
     useSettings,
     useSortedMT5Accounts,
+    useTradingPlatformPasswordChange,
 } from '@deriv/api';
 import { ModalWrapper, WalletButton } from '../../../../components/Base';
 import MT5PasswordIcon from '../../../../public/images/ic-mt5-password.svg';
@@ -31,6 +32,7 @@ const marketTypeToPlatformTitleMapper: Record<string, string> = {
 const MT5PasswordModal: React.FC<TProps> = ({ marketType, platform }) => {
     const [password, setPassword] = useState('');
     const { isSuccess, mutate } = useCreateMT5Account();
+    const { mutate: tradingPasswordChange } = useTradingPlatformPasswordChange();
     const { data: activeWallet } = useActiveWalletAccount();
     const { data: mt5Accounts } = useMT5AccountsList();
     const { data: availableMT5Accounts } = useAvailableMT5Accounts();
@@ -44,9 +46,16 @@ const MT5PasswordModal: React.FC<TProps> = ({ marketType, platform }) => {
             ? marketTypeToPlatformTitleMapper[platform]
             : marketTypeToTitleMapper[marketType];
 
-    const onSubmit = () => {
+    const onSubmit = async () => {
         const accountType = marketType === 'synthetic' ? 'gaming' : marketType;
 
+        // in order to create account, we need to set a password through trading_platform_password_change endpoint first
+        // then only mt5_create_account can be called, otherwise it will response an error for password required
+        await tradingPasswordChange({
+            new_password: password,
+            platform: 'mt5',
+        });
+
         mutate({
             payload: {
                 account_type: activeWallet?.is_virtual ? 'demo' : accountType,
diff --git a/packages/wallets/src/features/cfd/screens/Jurisdiction/JurisdictionScreen.tsx b/packages/wallets/src/features/cfd/screens/Jurisdiction/JurisdictionScreen.tsx
index d0f400ce776e..95f4743f6af7 100644
--- a/packages/wallets/src/features/cfd/screens/Jurisdiction/JurisdictionScreen.tsx
+++ b/packages/wallets/src/features/cfd/screens/Jurisdiction/JurisdictionScreen.tsx
@@ -47,8 +47,10 @@ const JurisdictionScreen: FC<TJurisdictionScreenProps> = ({ selectedJurisdiction
                     Add Your Deriv MT5 Financial account under Deriv (V) Ltd, regulated by the Vanuatu Financial
                     Services Commission.
                     <div className='wallets-jurisdiction-screen__tnc-checkbox'>
-                        <input type='checkbox' />
-                        <WalletText>I confirm and accept Deriv (V) Ltd’s Terms and Conditions</WalletText>
+                        <input id='tnc-checkbox' type='checkbox' />
+                        <label htmlFor='tnc-checkbox' style={{ cursor: 'pointer' }}>
+                            <WalletText>I confirm and accept Deriv (V) Ltd&lsquo;s Terms and Conditions</WalletText>
+                        </label>
                     </div>
                 </div>
             )}
diff --git a/packages/wallets/src/features/cfd/screens/Success/Success.tsx b/packages/wallets/src/features/cfd/screens/Success/Success.tsx
index 60a2f59a7b32..b38adb03d00f 100644
--- a/packages/wallets/src/features/cfd/screens/Success/Success.tsx
+++ b/packages/wallets/src/features/cfd/screens/Success/Success.tsx
@@ -54,7 +54,7 @@ const Success: React.FC<TSuccessProps> = ({ description, marketType, platform, r
                     platform={platform}
                 />
                 <WalletText lineHeight='3xs' size='2xs'>
-                    {marketTypeTitle} ({landingCompanyName})
+                    {marketTypeTitle} {!isDemo && `(${landingCompanyName})`}
                 </WalletText>
                 {/* <div className='wallets-success__info__text--type'></div> */}
                 <WalletText color='primary' lineHeight='sm' size='2xs'>