Thisyahlen/mt5 password modal (binary-com#10211)

* feat: added close icon and onclickoutside handler for modal * chore: updated code based on comments * chore: fix error * chore: add mt5 password modal to buttons * chore: add mt5 password modal to buttons * chore: update master --------- Co-authored-by: adrienne-rio <adrienne@deriv.com>
kate-deriv · Sep 21, 2023 · 1646a2f · 1646a2f
1 parent 057c6e0
commit 1646a2f
Show file tree

Hide file tree

Showing 5 changed files with 162 additions and 2 deletions.
diff --git a/...components/ExternalTradingPlatforms/AvailableMT5AccountsList/AvailableMT5AccountsList.tsx b/...components/ExternalTradingPlatforms/AvailableMT5AccountsList/AvailableMT5AccountsList.tsx
@@ -1,8 +1,11 @@
 import React from 'react';
-import { useSortedMT5Accounts } from '@deriv/api';
+import { useMT5AccountsList, useSortedMT5Accounts } from '@deriv/api';
 import DerivedMT5 from '../../../public/images/mt5-derived.svg';
 import FinancialMT5 from '../../../public/images/mt5-financial.svg';
 import SwapFreeMT5 from '../../../public/images/mt5-swap-free.svg';
+import { useModal } from '../../ModalProvider';
+import MT5CreatePassword from '../../MT5CreatePassword';
+import { MT5EnterPassword } from '../../MT5EnterPassword';
 import { SecondaryActionButton } from '../../SecondaryActionButton';
 import { TradingAccountCard } from '../../TradingAccountCard';
 import './AvailableMT5AccountsList.scss';
@@ -30,6 +33,19 @@ type TProps = {
 };
 
 const AvailableMT5AccountsList: React.FC<TProps> = ({ account }) => {
+    const { show } = useModal();
+    const { data } = useMT5AccountsList();
+
+    const hasMT5Account = data?.find(acc => acc?.loginid);
+
+    const ShowMT5PasswordModal = () => {
+        return hasMT5Account ? (
+            <MT5EnterPassword name={market_type_to_name_mapper[account.market_type || 'synthetic']} />
+        ) : (
+            <MT5CreatePassword />
+        );
+    };
+
     return (
         <TradingAccountCard
             leading={() => (
@@ -38,7 +54,7 @@ const AvailableMT5AccountsList: React.FC<TProps> = ({ account }) => {
                 </div>
             )}
             trailing={() => (
-                <SecondaryActionButton>
+                <SecondaryActionButton onClick={() => show(<ShowMT5PasswordModal />)}>
                     <p className='wallets-available-mt5__text'>Get</p>
                 </SecondaryActionButton>
             )}

diff --git a/packages/wallets/src/components/MT5EnterPassword/MT5EnterPassword.scss b/packages/wallets/src/components/MT5EnterPassword/MT5EnterPassword.scss
@@ -0,0 +1,108 @@
+.wallets-enter-password {
+    display: inline-flex;
+    padding: 20px 0px 24px;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    border-radius: 8px;
+    background: var(--system-light-8-primary-background, #fff);
+    box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.25);
+
+    &--container {
+        display: flex;
+        width: 400px;
+        padding: 0 24px 24px;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 8px;
+    }
+
+    &-title {
+        display: flex;
+        width: 400px;
+        align-items: center;
+        padding-bottom: 24px;
+        gap: 8px;
+        color: var(--system-light-1-prominent-text, #333);
+
+        /* desktop/paragraph/P1 - bold */
+        font-family: 'IBM Plex Sans';
+        font-size: 16px;
+        font-style: normal;
+        font-weight: 700;
+        line-height: 24px; /* 150% */
+    }
+
+    &-subtitle {
+        font-size: 14px;
+        color: #333333;
+        line-height: 20px;
+    }
+
+    &-input {
+        position: relative;
+        width: 100%;
+
+        & > input {
+            font-size: 14px;
+            padding: 1rem;
+            border: 1px solid #d6dadb;
+            border-bottom: 5px solid #e6e9e9;
+            border-radius: 5px;
+            margin-bottom: 20px;
+            outline: none;
+            width: 100%;
+
+            &::placeholder {
+                color: #999999;
+            }
+        }
+
+        &-trailing-icon {
+            position: absolute;
+            right: 20px;
+            top: 20%;
+            transform: scale(1.2);
+        }
+    }
+
+    &-buttons {
+        display: flex;
+        width: 400px;
+        padding-right: 24px;
+        justify-content: flex-end;
+        align-items: center;
+        gap: 8px;
+    }
+
+    &-forgot-password-button {
+        display: flex;
+        height: 40px;
+        padding: 10px 16px;
+        justify-content: center;
+        align-items: center;
+        border-radius: 4px;
+        background: var(--system-light-8-primary-background, #fff);
+        font-weight: 700;
+        cursor: pointer;
+        border: 2px solid var(--system-light-3-less-prominent-text, #999);
+    }
+
+    &-add-button {
+        display: flex;
+        height: 40px;
+        padding: 10px 16px;
+        justify-content: center;
+        align-items: center;
+        border-radius: 4px;
+        background: #ff444f;
+        border: none;
+        color: #ffffff;
+        font-weight: 700;
+        cursor: pointer;
+
+        &--disabled {
+            opacity: 0.32;
+        }
+    }
+}
diff --git a/packages/wallets/src/components/MT5EnterPassword/MT5EnterPassword.tsx b/packages/wallets/src/components/MT5EnterPassword/MT5EnterPassword.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import PasswordShowIcon from '../../public/images/ic-password-show.svg';
+import { useModal } from '../ModalProvider';
+import { WalletModal } from '../WalletModal';
+import './MT5EnterPassword.scss';
+
+type TProps = {
+    name?: string;
+};
+
+const MT5EnterPassword: React.FC<TProps> = ({ name }) => {
+    const { hide } = useModal();
+
+    return (
+        <WalletModal className='wallets-enter-password' has_close_icon onClickCloseIcon={hide}>
+            <div className='wallets-enter-password--container'>
+                <div className='wallets-enter-password-title'>Enter your Deriv MT5 password</div>
+                <span className='wallets-enter-password-subtitle'>
+                    Enter your Deriv MT5 password to add a Deriv MT5 {name} account.
+                </span>
+                <div className='wallets-enter-password-input'>
+                    <input placeholder='Deriv MT5 password' type='password' />
+                    <PasswordShowIcon className='wallets-create-password-input-trailing-icon' />
+                </div>
+            </div>
+            <div className='wallets-enter-password-buttons'>
+                <button className='wallets-enter-password-forgot-password-button'>Forgot password?</button>
+                <button className='wallets-enter-password-add-button'>Add account</button>
+            </div>
+        </WalletModal>
+    );
+};
+
+export default MT5EnterPassword;
diff --git a/packages/wallets/src/components/MT5EnterPassword/index.ts b/packages/wallets/src/components/MT5EnterPassword/index.ts
@@ -0,0 +1 @@
+export { default as MT5EnterPassword } from './MT5EnterPassword';
diff --git a/packages/wallets/src/components/index.ts b/packages/wallets/src/components/index.ts
@@ -3,6 +3,7 @@ export * from './DesktopWalletsList';
 export * from './ExternalTradingPlatforms';
 export * from './InlineMessage';
 export * from './Loader';
+export * from './MT5EnterPassword';
 export * from './OptionsAndMultipliersListing';
 export * from './PrimaryActionButton';
 export * from './ProgressBar';