From 948dff7c889fc7a22d283b3bd7dcb0e35cb2786c Mon Sep 17 00:00:00 2001
From: Aizad Ridzo <103104395+aizad-deriv@users.noreply.github.com>
Date: Mon, 12 Aug 2024 20:14:19 +0800
Subject: [PATCH] Aizad/WALL-4579/Change Password Button to Forgot Password
 Link on MT5TradeModal (#16379)

* chore: Replace password button with Forgot Password link

* chore: update stylings

* chore: translate new string within component

* chore: remove edit svg

* chore: made changes based on comments

* chore: added optinal value string

* chore: update default value placement
---
 .../MT5TradeDetailsItem.scss                  | 16 ++---
 .../MT5TradeDetailsItem.tsx                   | 62 ++++++++++++-------
 .../screens/MT5TradeScreen/MT5TradeScreen.tsx |  4 +-
 .../wallets/src/public/images/ic-edit.svg     | 10 ---
 4 files changed, 48 insertions(+), 44 deletions(-)
 delete mode 100644 packages/wallets/src/public/images/ic-edit.svg

diff --git a/packages/wallets/src/features/cfd/screens/MT5TradeScreen/MT5TradeDetailsItem/MT5TradeDetailsItem.scss b/packages/wallets/src/features/cfd/screens/MT5TradeScreen/MT5TradeDetailsItem/MT5TradeDetailsItem.scss
index 5e583abfab7c..88e3101860f2 100644
--- a/packages/wallets/src/features/cfd/screens/MT5TradeScreen/MT5TradeDetailsItem/MT5TradeDetailsItem.scss
+++ b/packages/wallets/src/features/cfd/screens/MT5TradeScreen/MT5TradeDetailsItem/MT5TradeDetailsItem.scss
@@ -21,19 +21,19 @@
         align-items: center;
         gap: 0.8rem;
         padding-right: 0.8rem;
-        font-family: 'Courier', monospace;
-
-        & .wallets-text {
-            font-family: 'Courier', serif;
-        }
 
         & .wallets-clipboard {
             border: none;
             border-radius: none;
         }
-    }
 
-    &__edit {
-        cursor: pointer;
+        &--mono-text {
+            font-family: 'Courier', serif;
+        }
+
+        &--forgot-link {
+            text-decoration: underline;
+            cursor: pointer;
+        }
     }
 }
diff --git a/packages/wallets/src/features/cfd/screens/MT5TradeScreen/MT5TradeDetailsItem/MT5TradeDetailsItem.tsx b/packages/wallets/src/features/cfd/screens/MT5TradeScreen/MT5TradeDetailsItem/MT5TradeDetailsItem.tsx
index 0cce2068ee8c..66615c9a306d 100644
--- a/packages/wallets/src/features/cfd/screens/MT5TradeScreen/MT5TradeDetailsItem/MT5TradeDetailsItem.tsx
+++ b/packages/wallets/src/features/cfd/screens/MT5TradeScreen/MT5TradeDetailsItem/MT5TradeDetailsItem.tsx
@@ -1,55 +1,69 @@
 import React, { FC } from 'react';
 import classNames from 'classnames';
-import { Tooltip } from '@deriv-com/ui';
-import { WalletClipboard, WalletText } from '../../../../../components/Base';
+import { Localize } from '@deriv-com/translations';
+import { Text, useDevice } from '@deriv-com/ui';
+import { WalletClipboard } from '../../../../../components/Base';
 import { useModal } from '../../../../../components/ModalProvider';
-import useDevice from '../../../../../hooks/useDevice';
-import EditIcon from '../../../../../public/images/ic-edit.svg';
 import { ChangePassword } from '../../ChangePassword';
 import './MT5TradeDetailsItem.scss';
 
 type TMT5TradeDetailsItemProps = {
     label?: string;
-    value: string;
+    value?: string;
     variant?: 'clipboard' | 'info' | 'password';
 };
 
-const MT5TradeDetailsItem: FC<TMT5TradeDetailsItemProps> = ({ label, value, variant = 'clipboard' }) => {
+const MT5TradeDetailsItem: FC<TMT5TradeDetailsItemProps> = ({ label, value = '', variant = 'clipboard' }) => {
     const { isDesktop } = useDevice();
     const { show } = useModal();
+
+    const textSize = isDesktop ? 'xs' : 'sm';
+
     return (
         <div
             className={classNames('wallets-mt5-trade-details-item', {
                 'wallets-mt5-trade-details-item--info': variant === 'info',
             })}
         >
-            {variant !== 'info' && (
+            {variant === 'clipboard' && (
                 <React.Fragment>
-                    <WalletText color='less-prominent' size={isDesktop ? 'xs' : 'sm'}>
+                    <Text color='less-prominent' size={textSize}>
                         {label}
-                    </WalletText>
+                    </Text>
                     <div className='wallets-mt5-trade-details-item__values'>
-                        <WalletText size={isDesktop ? 'xs' : 'sm'} weight='bold'>
+                        <Text
+                            className='wallets-mt5-trade-details-item__values--mono-text'
+                            size={textSize}
+                            weight='bold'
+                        >
                             {value}
-                        </WalletText>
-                        {variant === 'clipboard' && <WalletClipboard popoverAlignment='left' textCopy={value} />}
-                        {variant === 'password' && (
-                            <Tooltip
-                                as='button'
-                                onClick={() => show(<ChangePassword />)}
-                                tooltipContent='Change password'
-                                tooltipPosition='left'
-                            >
-                                <EditIcon className='wallets-mt5-trade-details-item__edit' />
-                            </Tooltip>
-                        )}
+                        </Text>
+                        <WalletClipboard popoverAlignment='left' textCopy={value} />
+                    </div>
+                </React.Fragment>
+            )}
+            {variant === 'password' && (
+                <React.Fragment>
+                    <Text color='less-prominent' size={textSize}>
+                        {label}
+                    </Text>
+                    <div className='wallets-mt5-trade-details-item__values'>
+                        <Text
+                            as='a'
+                            className='wallets-mt5-trade-details-item__values--forgot-link'
+                            onClick={() => show(<ChangePassword />)}
+                            size={textSize}
+                            weight='bold'
+                        >
+                            <Localize i18n_default_text=' Forgot Password?' />
+                        </Text>
                     </div>
                 </React.Fragment>
             )}
             {variant === 'info' && (
-                <WalletText color='less-prominent' size={isDesktop ? 'xs' : 'sm'}>
+                <Text color='less-prominent' size={textSize}>
                     {value}
-                </WalletText>
+                </Text>
             )}
         </div>
     );
diff --git a/packages/wallets/src/features/cfd/screens/MT5TradeScreen/MT5TradeScreen.tsx b/packages/wallets/src/features/cfd/screens/MT5TradeScreen/MT5TradeScreen.tsx
index beb056d8de62..190ea7801995 100644
--- a/packages/wallets/src/features/cfd/screens/MT5TradeScreen/MT5TradeScreen.tsx
+++ b/packages/wallets/src/features/cfd/screens/MT5TradeScreen/MT5TradeScreen.tsx
@@ -167,13 +167,13 @@ const MT5TradeScreen: FC<MT5TradeScreenProps> = ({ mt5Account }) => {
                                 value={details?.server_info?.environment ?? 'Deriv-Server'}
                             />
                             <MT5TradeDetailsItem label='Login ID' value={loginId ?? '12345678'} />
-                            <MT5TradeDetailsItem label='Password' value='********' variant='password' />
+                            <MT5TradeDetailsItem label='Password' variant='password' />
                         </Fragment>
                     )}
                     {getModalState('platform') === dxtradePlatform && (
                         <Fragment>
                             <MT5TradeDetailsItem label='Username' value={details?.login ?? '12345678'} />
-                            <MT5TradeDetailsItem label='Password' value='********' variant='password' />
+                            <MT5TradeDetailsItem label='Password' variant='password' />
                         </Fragment>
                     )}
                     {getModalState('platform') === ctraderPlatform && (
diff --git a/packages/wallets/src/public/images/ic-edit.svg b/packages/wallets/src/public/images/ic-edit.svg
deleted file mode 100644
index 11fa8f91964e..000000000000
--- a/packages/wallets/src/public/images/ic-edit.svg
+++ /dev/null
@@ -1,10 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_7020_6491)">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M11.1464 1.14667C12.1701 0.122984 13.8299 0.122984 14.8536 1.14667C15.8772 2.17036 15.8772 3.83009 14.8536 4.85378L3.70711 16.0002H0V12.2931L11.1464 1.14667ZM14.1464 1.85378C13.5133 1.22062 12.4867 1.22062 11.8536 1.85378L11.2071 2.50021L13.5 4.79311L14.1464 4.14667C14.7796 3.51351 14.7796 2.48694 14.1464 1.85378ZM12.7929 5.50021L10.5 3.20732L2.70712 11.0002L5.00001 13.2931L12.7929 5.50021ZM1 12.7073L2.00001 11.7073L4.29291 14.0002L3.29289 15.0002H1V12.7073Z" fill="#333333"/>
-</g>
-<defs>
-<clipPath id="clip0_7020_6491">
-<rect width="16" height="16" fill="white"/>
-</clipPath>
-</defs>
-</svg>