adrienne/feat: responsive view for success and password modal (deriv-…

…com#10871) * chore: backup * chore: added responsive view for success and password modal * chore: reverted test changes * chore: removed unused scss file * chore: removed unused scss file * chore: fix eslint issues * chore: fix eslint issues * chore: removed unused css and fix padding issue in header step modal * chore: refactored code based on reviews * chore: remove usage of children * chore: fix eslint issues
aum-deriv · Oct 24, 2023 · 2c115b5 · 2c115b5
1 parent 024f9ba
commit 2c115b5
Show file tree

Hide file tree

Showing 15 changed files with 186 additions and 26 deletions.
diff --git a/packages/wallets/src/components/Base/ModalStepWrapper/ModalStepWrapper.scss b/packages/wallets/src/components/Base/ModalStepWrapper/ModalStepWrapper.scss
@@ -12,7 +12,7 @@
         grid-template-rows: 9% auto;
 
         &--fixed {
-            grid-template-rows: 9% auto 8%;
+            grid-template-rows: 7% auto 8%;
         }
     }
 
@@ -23,15 +23,18 @@
         justify-content: space-between;
         align-items: center;
 
-        &-close-icon {
+        &--close-icon {
             cursor: pointer;
         }
 
         @include mobile {
+            display: grid;
+            grid-template-columns: auto 5%;
             background-color: #ffffff;
             position: relative;
             z-index: 99;
             width: 100%;
+            padding: 0 2rem;
         }
     }
 

diff --git a/packages/wallets/src/components/Base/ModalStepWrapper/ModalStepWrapper.tsx b/packages/wallets/src/components/Base/ModalStepWrapper/ModalStepWrapper.tsx
@@ -29,7 +29,7 @@ const ModalStepWrapper: FC<PropsWithChildren<TModalStepWrapperProps>> = ({
                 <WalletText size='md' weight='bold'>
                     {title}
                 </WalletText>
-                <CloseIcon className='wallets-modal-step-wrapper__header-close-icon' onClick={hide} />
+                <CloseIcon className='wallets-modal-step-wrapper__header--close-icon' onClick={hide} />
             </div>
             <div className='wallets-modal-step-wrapper__body'>
                 {children}

diff --git a/packages/wallets/src/components/Base/WalletButtonGroup/WalletButtonGroup.scss b/packages/wallets/src/components/Base/WalletButtonGroup/WalletButtonGroup.scss
@@ -0,0 +1,15 @@
+.wallets-button-group {
+    display: grid;
+    width: 100%;
+    gap: 1.2rem;
+    grid-auto-columns: minmax(0, 1fr);
+    grid-auto-flow: column;
+
+    &--flex {
+        grid-auto-columns: auto;
+    }
+
+    &--vertical {
+        flex-direction: column;
+    }
+}
diff --git a/packages/wallets/src/components/Base/WalletButtonGroup/WalletButtonGroup.tsx b/packages/wallets/src/components/Base/WalletButtonGroup/WalletButtonGroup.tsx
@@ -0,0 +1,23 @@
+import React, { FC, PropsWithChildren } from 'react';
+import classNames from 'classnames';
+import './WalletButtonGroup.scss';
+
+type TWalletButtonGroupProps = {
+    isFlex?: boolean;
+    isVertical?: boolean;
+};
+
+const WalletButtonGroup: FC<PropsWithChildren<TWalletButtonGroupProps>> = ({ children, isFlex, isVertical }) => {
+    return (
+        <div
+            className={classNames('wallets-button-group', {
+                'wallets-button-group--flex': isFlex,
+                'wallets-button-group--vertical': isVertical,
+            })}
+        >
+            {children}
+        </div>
+    );
+};
+
+export default WalletButtonGroup;
diff --git a/packages/wallets/src/components/Base/WalletButtonGroup/index.ts b/packages/wallets/src/components/Base/WalletButtonGroup/index.ts
@@ -0,0 +1 @@
+export { default as WalletButtonGroup } from './WalletButtonGroup';
diff --git a/packages/wallets/src/components/Base/index.ts b/packages/wallets/src/components/Base/index.ts
@@ -6,6 +6,7 @@ export * from './ProgressBar';
 export * from './Tabs';
 export * from './WalletAlertMessage';
 export * from './WalletButton';
+export * from './WalletButtonGroup';
 export * from './WalletClipboard';
 export * from './WalletDropdown';
 export * from './WalletText';

diff --git a/packages/wallets/src/components/WalletMarketCurrencyIcon/WalletMarketCurrencyIcon.tsx b/packages/wallets/src/components/WalletMarketCurrencyIcon/WalletMarketCurrencyIcon.tsx
@@ -7,6 +7,7 @@ import SwapFreeMT5Icon from '../../public/images/mt5-swap-free.svg';
 import { WalletCardIcon } from '../WalletCardIcon';
 import { WalletGradientBackground } from '../WalletGradientBackground';
 import type { useSortedMT5Accounts } from '@deriv/api';
+import useDevice from '../../hooks/useDevice';
 import './WalletMarketCurrencyIcon.scss';
 
 const marketTypeToIconMapper: Record<string, ComponentType<SVGAttributes<SVGElement>>> = {
@@ -28,6 +29,8 @@ type TWalletMarketCurrencyIconProps = {
 };
 
 const WalletMarketCurrencyIcon = ({ currency, isDemo, marketType, platform }: TWalletMarketCurrencyIconProps) => {
+    const { isMobile } = useDevice();
+
     const MarketTypeIcon =
         marketType === 'all' && Object.keys(marketTypeToPlatformIconMapper).includes(platform)
             ? marketTypeToPlatformIconMapper[platform]
@@ -42,7 +45,7 @@ const WalletMarketCurrencyIcon = ({ currency, isDemo, marketType, platform }: TW
                 }`}
             >
                 <WalletGradientBackground currency={currency} hasShine isDemo={isDemo} type='card'>
-                    <WalletCardIcon type={isDemo ? 'Demo' : currency} />
+                    <WalletCardIcon size={isMobile ? 'xl' : 'lg'} type={isDemo ? 'Demo' : currency} />
                 </WalletGradientBackground>
             </div>
         </div>

diff --git a/...s/wallets/src/features/cfd/modals/DxtradeEnterPasswordModal/DxtradeEnterPasswordModal.tsx b/...s/wallets/src/features/cfd/modals/DxtradeEnterPasswordModal/DxtradeEnterPasswordModal.tsx
@@ -63,6 +63,7 @@ const DxtradeEnterPasswordModal = () => {
                     icon={<DxTradePasswordIcon />}
                     onPasswordChange={e => setPassword(e.target.value)}
                     onPrimaryClick={onSubmit}
+                    password={password}
                     platform='dxtrade'
                 />
             )}

diff --git a/packages/wallets/src/features/cfd/modals/MT5PasswordModal/MT5PasswordModal.tsx b/packages/wallets/src/features/cfd/modals/MT5PasswordModal/MT5PasswordModal.tsx
@@ -7,10 +7,11 @@ import {
     useSettings,
     useTradingPlatformPasswordChange,
 } from '@deriv/api';
-import { ModalWrapper, WalletButton } from '../../../../components/Base';
+import { ModalStepWrapper, ModalWrapper, WalletButton, WalletButtonGroup } from '../../../../components/Base';
 import { useModal } from '../../../../components/ModalProvider';
 import MT5PasswordIcon from '../../../../public/images/ic-mt5-password.svg';
 import { TMarketTypes, TPlatforms } from '../../../../types';
+import useDevice from '../../../../hooks/useDevice';
 import { MarketTypeToTitleMapper, PlatformToTitleMapper } from '../../constants';
 import { CreatePassword, EnterPassword, Success } from '../../screens';
 
@@ -28,6 +29,7 @@ const MT5PasswordModal: React.FC<TProps> = ({ marketType, platform }) => {
     const { data: availableMT5Accounts } = useAvailableMT5Accounts();
     const { data: settings } = useSettings();
     const { hide } = useModal();
+    const { isMobile } = useDevice();
 
     const hasMT5Account = mt5Accounts?.find(account => account.login);
     const isDemo = activeWallet?.is_virtual;
@@ -68,6 +70,70 @@ const MT5PasswordModal: React.FC<TProps> = ({ marketType, platform }) => {
         });
     };
 
+    const renderTitle = () => {
+        if (!isSuccess && hasMT5Account) return `Enter your ${PlatformToTitleMapper.mt5} password`;
+        return '';
+    };
+
+    const renderFooter = () => {
+        if (isSuccess) return <WalletButton isFullWidth onClick={hide} size='lg' text='Continue' />;
+        if (hasMT5Account)
+            return (
+                <WalletButtonGroup>
+                    <WalletButton isFullWidth size='lg' text='Forgot password?' variant='outlined' />
+                    <WalletButton disabled={!password} isFullWidth onClick={onSubmit} size='lg' text='Add account' />
+                </WalletButtonGroup>
+            );
+        return (
+            <WalletButton
+                disabled={!password}
+                isFullWidth
+                onClick={onSubmit}
+                size='lg'
+                text='Create Deriv MT5 Password'
+            />
+        );
+    };
+
+    if (isMobile) {
+        return (
+            <ModalStepWrapper renderFooter={renderFooter} title={renderTitle()}>
+                {isSuccess && (
+                    <Success
+                        description={`You can now start practicing trading with your ${marketTypeTitle} ${
+                            isDemo ? ' demo' : 'real'
+                        } account.`}
+                        displayBalance={
+                            mt5Accounts?.find(account => account.market_type === marketType)?.display_balance || ''
+                        }
+                        marketType={marketType}
+                        platform={platform}
+                        renderButton={() => <WalletButton isFullWidth onClick={hide} size='lg' text='Continue' />}
+                        title={`Your ${marketTypeTitle} ${isDemo ? ' demo' : 'real'} account is ready`}
+                    />
+                )}
+                {!isSuccess &&
+                    (hasMT5Account ? (
+                        <EnterPassword
+                            marketType={marketType}
+                            onPasswordChange={e => setPassword(e.target.value)}
+                            onPrimaryClick={onSubmit}
+                            password={password}
+                            platform='mt5'
+                        />
+                    ) : (
+                        <CreatePassword
+                            icon={<MT5PasswordIcon />}
+                            onPasswordChange={e => setPassword(e.target.value)}
+                            onPrimaryClick={onSubmit}
+                            password={password}
+                            platform='mt5'
+                        />
+                    ))}
+            </ModalStepWrapper>
+        );
+    }
+
     return (
         <ModalWrapper hideCloseButton={isSuccess}>
             {isSuccess && (
@@ -90,13 +156,15 @@ const MT5PasswordModal: React.FC<TProps> = ({ marketType, platform }) => {
                         marketType={marketType}
                         onPasswordChange={e => setPassword(e.target.value)}
                         onPrimaryClick={onSubmit}
+                        password={password}
                         platform='mt5'
                     />
                 ) : (
                     <CreatePassword
                         icon={<MT5PasswordIcon />}
                         onPasswordChange={e => setPassword(e.target.value)}
                         onPrimaryClick={onSubmit}
+                        password={password}
                         platform='mt5'
                     />
                 ))}

diff --git a/packages/wallets/src/features/cfd/screens/CreatePassword/CreatePassword.scss b/packages/wallets/src/features/cfd/screens/CreatePassword/CreatePassword.scss
@@ -10,6 +10,10 @@
     border-radius: 8px;
     background: var(--system-light-8-primary-background, #fff);
 
+    @include mobile {
+        width: 100%;
+    }
+
     &-title {
         font-weight: 700;
         font-size: 18px;

diff --git a/packages/wallets/src/features/cfd/screens/CreatePassword/CreatePassword.tsx b/packages/wallets/src/features/cfd/screens/CreatePassword/CreatePassword.tsx
@@ -3,15 +3,21 @@ import PasswordShowIcon from '../../../../public/images/ic-password-show.svg';
 import './CreatePassword.scss';
 import { TPlatforms } from '../../../../types';
 import { PlatformToTitleMapper } from '../../constants';
+import { WalletButton } from '../../../../components/Base';
+import useDevice from '../../../../hooks/useDevice';
 
+// TODO: Refactor the unnecessary props out once FlowProvider is integrated
 type TProps = {
     icon: React.ReactNode;
     onPasswordChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
     onPrimaryClick: () => void;
+    password: string;
     platform: TPlatforms.All;
 };
 
-const CreatePassword: React.FC<TProps> = ({ icon, onPasswordChange, onPrimaryClick, platform }) => {
+const CreatePassword: React.FC<TProps> = ({ icon, onPasswordChange, onPrimaryClick, password, platform }) => {
+    const { isMobile } = useDevice();
+
     const title = PlatformToTitleMapper[platform];
     return (
         <div className='wallets-create-password'>
@@ -24,9 +30,14 @@ const CreatePassword: React.FC<TProps> = ({ icon, onPasswordChange, onPrimaryCli
                 <input onChange={onPasswordChange} placeholder={`${title} password`} type='password' />
                 <PasswordShowIcon className='wallets-create-password-input-trailing-icon' />
             </div>
-            <button className='wallets-create-password-button' onClick={onPrimaryClick}>
-                Create {title} password
-            </button>
+            {!isMobile && (
+                <WalletButton
+                    disabled={!password}
+                    onClick={onPrimaryClick}
+                    size='lg'
+                    text={`Create ${title} password`}
+                />
+            )}
         </div>
     );
 };

diff --git a/packages/wallets/src/features/cfd/screens/EnterPassword/EnterPassword.scss b/packages/wallets/src/features/cfd/screens/EnterPassword/EnterPassword.scss
@@ -8,13 +8,23 @@
     background: var(--system-light-8-primary-background, #fff);
     box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.25);
 
+    @include mobile {
+        justify-content: flex-start;
+        border-radius: 0;
+        box-shadow: none;
+    }
+
     &--container {
         display: flex;
-        width: 400px;
-        padding: 0 24px 24px;
+        width: 40rem;
+        padding: 0 2.4rem 2.4rem;
         flex-direction: column;
         align-items: flex-start;
         gap: 8px;
+
+        @include mobile {
+            width: 100%;
+        }
     }
 
     &-title {

diff --git a/packages/wallets/src/features/cfd/screens/EnterPassword/EnterPassword.tsx b/packages/wallets/src/features/cfd/screens/EnterPassword/EnterPassword.tsx
@@ -3,13 +3,16 @@ import PasswordShowIcon from '../../../../public/images/ic-password-show.svg';
 import './EnterPassword.scss';
 import { TMarketTypes, TPlatforms } from '../../../../types';
 import { PlatformToTitleMapper } from '../../constants';
+import useDevice from '../../../../hooks/useDevice';
 
+// TODO: Refactor the unnecessary props out once FlowProvider is integrated
 type TProps = {
     isLoading?: boolean;
     marketType: TMarketTypes.CreateOtherCFDAccount;
     onPasswordChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
     onPrimaryClick?: () => void;
     onSecondaryClick?: () => void;
+    password: string;
     platform: TPlatforms.All;
 };
 
@@ -19,32 +22,38 @@ const EnterPassword: React.FC<TProps> = ({
     onPasswordChange,
     onPrimaryClick,
     onSecondaryClick,
+    password,
     platform,
 }) => {
+    const { isDesktop } = useDevice();
     const title = PlatformToTitleMapper[platform];
     return (
-        <React.Fragment>
-            <div className='wallets-enter-password'>
-                <div className='wallets-enter-password--container'>
-                    <div className='wallets-enter-password-title'>Enter your {title} password</div>
-                    <span className='wallets-enter-password-subtitle'>
-                        Enter your {title} password to add a {title} {marketType} account.
-                    </span>
-                    <div className='wallets-enter-password-input'>
-                        <input onChange={onPasswordChange} placeholder={`${title} password`} type='password' />
-                        <PasswordShowIcon className='wallets-create-password-input-trailing-icon' />
-                    </div>
+        <div className='wallets-enter-password'>
+            <div className='wallets-enter-password--container'>
+                {isDesktop && <div className='wallets-enter-password-title'>Enter your {title} password</div>}
+                <span className='wallets-enter-password-subtitle'>
+                    Enter your {title} password to add a {title} {marketType} account.
+                </span>
+                <div className='wallets-enter-password-input'>
+                    <input onChange={onPasswordChange} placeholder={`${title} password`} type='password' />
+                    <PasswordShowIcon className='wallets-create-password-input-trailing-icon' />
                 </div>
+            </div>
+            {isDesktop && (
                 <div className='wallets-enter-password-buttons'>
                     <button className='wallets-enter-password-forgot-password-button' onClick={onSecondaryClick}>
                         Forgot password?
                     </button>
-                    <button className='wallets-enter-password-add-button' disabled={isLoading} onClick={onPrimaryClick}>
+                    <button
+                        className='wallets-enter-password-add-button'
+                        disabled={isLoading || !password}
+                        onClick={onPrimaryClick}
+                    >
                         Add account
                     </button>
                 </div>
-            </div>
-        </React.Fragment>
+            )}
+        </div>
     );
 };