Merge branch 'feature/82781/diel_for_all' of github.com:matin-deriv/d…

…eriv-app into feature/82781/diel_for_all
amina-deriv · Jan 12, 2023 · cd3e48c · cd3e48c
2 parents 2e8d032 + 647f5cc
commit cd3e48c
Show file tree

Hide file tree

Showing 9 changed files with 58 additions and 26 deletions.
diff --git a/packages/appstore/src/components/onboarding-new/static-cfd-account-manager.scss b/packages/appstore/src/components/onboarding-new/static-cfd-account-manager.scss
@@ -1,11 +1,17 @@
 .static-cfd-account-manager {
     display: flex;
-    width: 37.3rem;
+    width: 38.3rem;
     margin-top: 2rem;
     margin-right: 2rem;
     align-items: center;
     justify-content: space-between;
 
+    &--with-margin {
+        @include desktop {
+            margin-bottom: 2rem;
+        }
+    }
+
     @include mobile {
         align-items: flex-start;
         width: 31rem;

diff --git a/packages/appstore/src/components/onboarding-new/static-cfd-account-manager.tsx b/packages/appstore/src/components/onboarding-new/static-cfd-account-manager.tsx
@@ -69,6 +69,7 @@ const StaticCFDAccountManager = ({
         <div
             className={classNames('static-cfd-account-manager', {
                 'static-cfd-account-manager--hidden': is_options_hidden,
+                'static-cfd-account-manager--with-margin': platform === 'options',
             })}
         >
             <div className='static-cfd-account-manager__icon'>

diff --git a/packages/appstore/src/components/onboarding-new/static-dashboard.scss b/packages/appstore/src/components/onboarding-new/static-dashboard.scss
@@ -75,7 +75,10 @@
         &__header {
             display: flex;
             flex-direction: column;
-            width: 70%;
+
+            &--limited-width {
+                width: 70%;
+            }
 
             @include mobile {
                 width: 100%;
@@ -155,13 +158,14 @@
             &--apps {
                 display: grid;
                 grid-template-columns: repeat(3, 1fr);
+                grid-column-gap: 3rem;
 
                 @include desktop {
                     margin-top: 1rem;
                 }
 
-                &-item {
-                    margin-left: 1rem;
+                &--with-gap {
+                    grid-column-gap: 3rem;
                 }
 
                 &--eu {

diff --git a/packages/appstore/src/components/onboarding-new/static-dashboard.tsx b/packages/appstore/src/components/onboarding-new/static-dashboard.tsx
@@ -111,7 +111,11 @@ const StaticDashboard = ({
                 {(isDesktop() || (isMobile() && index === 0)) && (
                     <div className='static-dashboard-wrapper__bordered--with-margin'>
                         <div className='static-dashboard-wrapper__header-and-description'>
-                            <div className='static-dashboard-wrapper__header'>
+                            <div
+                                className={classNames('static-dashboard-wrapper__header', {
+                                    'static-dashboard-wrapper__header--limited-width': has_account,
+                                })}
+                            >
                                 {isMobile() ? (
                                     <React.Fragment>
                                         <ButtonToggle
@@ -228,10 +232,7 @@ const StaticDashboard = ({
                                 </StaticCurrencySwitcherContainer>
                             )}
                         </div>
-                        <div
-                            className='static-dashboard-wrapper__body'
-                            style={has_applauncher_account && !isMobile() ? { height: '4rem' } : {}}
-                        >
+                        <div className='static-dashboard-wrapper__body'>
                             {!has_applauncher_account && (
                                 <StaticCFDAccountManager
                                     type='all'
@@ -251,10 +252,11 @@ const StaticDashboard = ({
                         <div
                             className={classNames('static-dashboard-wrapper__body--apps', {
                                 'static-dashboard-wrapper__body--apps--eu': is_eu_user,
+                                'static-dashboard-wrapper__body--apps--with-gap': has_account,
                             })}
                         >
                             {eu_user ? (
-                                <div className={'static-dashboard-wrapper__body--apps-item'}>
+                                <div className='static-dashboard-wrapper__body--apps-item'>
                                     <StaticTradingAppCard
                                         icon={'DTrader'}
                                         name={'DTrader'}
@@ -265,7 +267,7 @@ const StaticDashboard = ({
                                     />
                                 </div>
                             ) : (
-                                <div className={'static-dashboard-wrapper__body--apps-item'}>
+                                <div className='static-dashboard-wrapper__body--apps-item'>
                                     <StaticTradingAppCard
                                         icon={'DTrader'}
                                         name={'DTrader'}
@@ -280,7 +282,7 @@ const StaticDashboard = ({
 
                             {!eu_user && (
                                 <React.Fragment>
-                                    <div className={'static-dashboard-wrapper__body--apps-item'}>
+                                    <div className='static-dashboard-wrapper__body--apps-item'>
                                         <StaticTradingAppCard
                                             icon={'DBot'}
                                             name={'DBot'}
@@ -291,7 +293,7 @@ const StaticDashboard = ({
                                             has_divider
                                         />
                                     </div>
-                                    <div className={'static-dashboard-wrapper__body--apps-item'}>
+                                    <div className='static-dashboard-wrapper__body--apps-item'>
                                         <StaticTradingAppCard
                                             icon={'SmartTrader'}
                                             name={'SmartTrader'}
@@ -302,7 +304,7 @@ const StaticDashboard = ({
                                             has_divider
                                         />
                                     </div>
-                                    <div className={'static-dashboard-wrapper__body--apps-item'}>
+                                    <div className='static-dashboard-wrapper__body--apps-item'>
                                         <StaticTradingAppCard
                                             icon={'BinaryBot'}
                                             name={'BinaryBot'}
@@ -312,7 +314,7 @@ const StaticDashboard = ({
                                             is_item_blurry={is_blurry.platformlauncher}
                                         />
                                     </div>
-                                    <div className={'static-dashboard-wrapper__body--apps-item'}>
+                                    <div className='static-dashboard-wrapper__body--apps-item'>
                                         <StaticTradingAppCard
                                             icon={'DerivGo'}
                                             name={'DerivGo'}

diff --git a/packages/appstore/src/components/onboarding-new/static-trading-app-card.scss b/packages/appstore/src/components/onboarding-new/static-trading-app-card.scss
@@ -2,7 +2,11 @@
     width: 100%;
     display: inline-flex;
     align-items: center;
-    height: 5.5rem;
+    height: 6rem;
+
+    &--with-bot-margin {
+        margin-bottom: 1rem;
+    }
 
     @include mobile {
         border-bottom: 1px solid var(--general-hover);

diff --git a/packages/appstore/src/components/onboarding-new/static-trading-app-card.tsx b/packages/appstore/src/components/onboarding-new/static-trading-app-card.tsx
@@ -22,9 +22,13 @@ const StaticTradingAppCard = ({
         app_desc: description,
         link_to: '',
     };
-    const icon_size = 48;
+    const icon_size = isMobile() || has_applauncher_account ? 48 : 32;
     return (
-        <div className='static-trading-app-card'>
+        <div
+            className={classNames('static-trading-app-card', {
+                'static-trading-app-card--with-bot-margin': has_divider,
+            })}
+        >
             <TradigPlatformIconProps
                 icon={icon}
                 size={icon_size}
@@ -52,12 +56,7 @@ const StaticTradingAppCard = ({
                 >
                     {name}
                 </Text>
-                <Text
-                    className='description'
-                    color={is_item_blurry ? 'less-prominent' : 'prominent'}
-                    size='xxs'
-                    line_height='m'
-                >
+                <Text className='description' color={'less-prominent'} size='xxs' line_height='m'>
                     {app_desc}
                 </Text>
             </div>

diff --git a/packages/appstore/src/modules/tour-guide/tour-guide.tsx b/packages/appstore/src/modules/tour-guide/tour-guide.tsx
@@ -17,7 +17,14 @@ import { Button } from '@deriv/components';
 
 const TourGuide = () => {
     const { traders_hub, ui } = useStores();
-    const { is_tour_open, toggleIsTourOpen, setIsOnboardingVisited, content_flag, selectAccountType } = traders_hub;
+    const {
+        is_tour_open,
+        toggleIsTourOpen,
+        setIsOnboardingVisited,
+        content_flag,
+        selectAccountType,
+        is_onboarding_visited,
+    } = traders_hub;
     const { is_dark_mode_on } = ui;
 
     const history = useHistory();
@@ -91,7 +98,7 @@ const TourGuide = () => {
 
     return (
         <Joyride
-            run={is_tour_open}
+            run={!is_onboarding_visited && is_tour_open}
             continuous
             disableScrolling
             hideCloseButton

diff --git a/packages/core/src/App/Containers/Layout/header/trading-hub-header.jsx b/packages/core/src/App/Containers/Layout/header/trading-hub-header.jsx
@@ -246,6 +246,7 @@ const TradingHubHeader = ({
                                 is_mf={is_mf}
                                 is_eu={is_eu}
                                 is_eu_country={is_eu_country}
+                                setIsOnboardingVisited={setIsOnboardingVisited}
                             />
                         </div>
                         <div className='trading-hub-header__menu-right--items--notifications'>

diff --git a/packages/core/src/Stores/traders-hub-store.js b/packages/core/src/Stores/traders-hub-store.js
@@ -18,6 +18,7 @@ export default class TradersHubStore extends BaseStore {
     combined_cfd_mt5_accounts = [];
     selected_account_type;
     selected_region;
+    is_onboarding_visited = false;
     is_balance_calculating = false;
     is_failed_verification_modal_visible = false;
     is_regulators_compare_modal_visible = false;
@@ -57,6 +58,7 @@ export default class TradersHubStore extends BaseStore {
             is_balance_calculating: observable,
             is_tour_open: observable,
             modal_data: observable,
+            is_onboarding_visited: observable,
             platform_demo_balance: observable,
             platform_real_balance: observable,
             selected_account: observable,
@@ -94,6 +96,7 @@ export default class TradersHubStore extends BaseStore {
             startTrade: action.bound,
             toggleAccountTransferModal: action.bound,
             toggleAccountTypeModalVisibility: action.bound,
+            setIsOnboardingVisited: action.bound,
             toggleFailedVerificationModalVisibility: action.bound,
             openFailedVerificationModal: action.bound,
             toggleIsTourOpen: action.bound,
@@ -272,6 +275,11 @@ export default class TradersHubStore extends BaseStore {
     toggleAccountTypeModalVisibility() {
         this.is_account_type_modal_visible = !this.is_account_type_modal_visible;
     }
+
+    setIsOnboardingVisited(is_visited) {
+        this.is_onboarding_visited = is_visited;
+    }
+
     get is_eu_selected() {
         return this.selected_region === 'EU';
     }