Traders hub beta

.gitignore

@@ -19,8 +19,8 @@ packages/account/lib/
 packages/components/.out
 packages/components/src/components/icon/icons-manifest.js
 packages/p2p/lib/
-packages/appstore/dist/
 packages/appstore/lib/
+packages/appstore/.out
 .env
 nx-cloud.env
 

__mocks__/fileMock.js

@@ -0,0 +1 @@
+module.exports = 'file-mock-stub';

packages/account/package.json

@@ -45,7 +45,8 @@
         "react": "^16.14.0",
         "react-dom": "^16.14.0",
         "react-router": "^5.2.0",
-        "react-router-dom": "^5.2.0"
+        "react-router-dom": "^5.2.0",
+        "react-i18next": "^11.11.0"
     },
     "devDependencies": {
         "@babel/eslint-parser": "^7.17.0",

packages/account/src/Components/Routes/binary-routes.jsx

@@ -5,7 +5,7 @@ import getRoutesConfig from 'Constants/routes-config';
 import RouteWithSubRoutes from './route-with-sub-routes.jsx';
 
 const BinaryRoutes = props => {
-    const { is_appstore } = React.useContext(PlatformContext);
+    const { is_appstore, is_pre_appstore } = React.useContext(PlatformContext);
     return (
         <React.Suspense
             fallback={() => {
@@ -17,7 +17,7 @@ const BinaryRoutes = props => {
             }}
         >
             <Switch>
-                {getRoutesConfig({ is_appstore }).map((route, idx) => (
+                {getRoutesConfig({ is_appstore, is_pre_appstore }).map((route, idx) => (
                     <RouteWithSubRoutes key={idx} {...route} {...props} />
                 ))}
             </Switch>

packages/account/src/Constants/routes-config.js

@@ -18,13 +18,14 @@ import {
     LoginHistory,
     AccountClosed,
     DeactivateAccount,
+    LanguageSettings,
 } from 'Sections';
 
 // Error Routes
 const Page404 = React.lazy(() => moduleLoader(() => import(/* webpackChunkName: "404" */ 'Modules/Page404')));
 
 // Order matters
-const initRoutesConfig = ({ is_appstore }) => [
+const initRoutesConfig = ({ is_appstore, is_pre_appstore }) => [
     {
         path: routes.account_closed,
         component: AccountClosed,
@@ -70,6 +71,15 @@ const initRoutesConfig = ({ is_appstore }) => [
                         component: FinancialAssessment,
                         getTitle: () => localize('Financial assessment'),
                     },
+                    ...(is_pre_appstore
+                        ? [
+                              {
+                                  path: routes.languages,
+                                  component: LanguageSettings,
+                                  getTitle: () => localize('Languages'),
+                              },
+                          ]
+                        : []),
                 ],
             },
             {
@@ -159,9 +169,9 @@ let routesConfig;
 // For default page route if page/path is not found, must be kept at the end of routes_config array
 const route_default = { component: Page404, getTitle: () => localize('Error 404') };
 
-const getRoutesConfig = ({ is_appstore }) => {
+const getRoutesConfig = ({ is_appstore, is_pre_appstore }) => {
     if (!routesConfig) {
-        routesConfig = initRoutesConfig({ is_appstore });
+        routesConfig = initRoutesConfig({ is_appstore, is_pre_appstore });
         routesConfig.push(route_default);
     }
     return routesConfig;

packages/account/src/Containers/account.jsx

@@ -1,13 +1,14 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { withRouter } from 'react-router-dom';
-import { VerticalTab, FadeWrapper, PageOverlay, Loading, Text } from '@deriv/components';
+import { VerticalTab, FadeWrapper, PageOverlay, Loading, Text, Icon } from '@deriv/components';
 import { routes as shared_routes, isMobile, matchRoute, getSelectedRoute, PlatformContext } from '@deriv/shared';
 import { localize } from '@deriv/translations';
 import { connect } from 'Stores/connect';
 import { flatten } from '../Helpers/flatten';
 import AccountLimitInfo from '../Sections/Security/AccountLimits/account-limits-info.jsx';
 import 'Styles/account.scss';
+import { useHistory } from 'react-router';
 
 const AccountLogout = ({ logout, history }) => {
     return (
@@ -19,7 +20,27 @@ const AccountLogout = ({ logout, history }) => {
             }}
         >
             <div className='dc-vertical-tab__header-group account__logout-tab'>
-                <Text color='general' size='xxs' weight='normal'>
+                <Text size='xxs' weight='normal'>
+                    {localize('Log out')}
+                </Text>
+            </div>
+        </div>
+    );
+};
+
+const TradingHubLogout = ({ logout }) => {
+    const history = useHistory();
+    return (
+        <div
+            className='dc-vertical-tab__header-account__logout-tab'
+            onClick={() => {
+                logout();
+                history.push(shared_routes.index);
+            }}
+        >
+            <div className='dc-vertical-tab__header-account__logout'>
+                <Icon icon='IcLogout' className='dc-vertical-tab__header-account__logout--icon' />
+                <Text size='xs' weight='bold'>
                     {localize('Log out')}
                 </Text>
             </div>
@@ -30,11 +51,13 @@ const AccountLogout = ({ logout, history }) => {
 const PageOverlayWrapper = ({
     is_from_derivgo,
     is_appstore,
+    is_pre_appstore,
     list_groups,
     logout,
     onClickClose,
     selected_route,
     subroutes,
+    history,
 }) => {
     if (isMobile() && selected_route) {
         return (
@@ -74,6 +97,7 @@ const PageOverlayWrapper = ({
                 is_full_width
                 list={subroutes}
                 list_groups={list_groups}
+                extra_content={is_pre_appstore && <TradingHubLogout logout={logout} />}
             />
         </PageOverlay>
     );
@@ -97,7 +121,7 @@ const Account = ({
     should_allow_authentication,
     toggleAccount,
 }) => {
-    const { is_appstore } = React.useContext(PlatformContext);
+    const { is_appstore, is_pre_appstore } = React.useContext(PlatformContext);
     const subroutes = flatten(routes.map(i => i.subroutes));
     let list_groups = [...routes];
     list_groups = list_groups.map(route_group => ({
@@ -165,12 +189,14 @@ const Account = ({
                 <PageOverlayWrapper
                     is_from_derivgo={is_from_derivgo}
                     is_appstore={is_appstore}
+                    is_pre_appstore={is_pre_appstore}
                     list_groups={list_groups}
                     logout={logout}
                     onClickClose={onClickClose}
                     platform={platform}
                     selected_route={selected_route}
                     subroutes={subroutes}
+                    history={history}
                 />
             </div>
         </FadeWrapper>

packages/account/src/Sections/Profile/LanguageSettings/index.js

@@ -0,0 +1,3 @@
+import LanguageSettings from './language-settings';
+
+export default LanguageSettings;

packages/account/src/Sections/Profile/LanguageSettings/language-settings.jsx

@@ -0,0 +1,90 @@
+import React from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import { useTranslation } from 'react-i18next';
+import { DesktopWrapper, Icon } from '@deriv/components';
+import { localize, getAllowedLanguages } from '@deriv/translations';
+import { connect } from 'Stores/connect';
+import FormSubHeader from 'Components/form-sub-header';
+
+const isCurrentLanguage = (lang, current_language) => lang === current_language;
+
+const NonClickableLink = ({ children, lang }) => (
+    <div
+        id={`dt_settings_${lang}_button`}
+        className={classNames('settings-language__language-link', {
+            'settings-language__language-link--active': isCurrentLanguage(lang),
+        })}
+    >
+        {children}
+    </div>
+);
+
+const LanguageLink = ({ lang }) => (
+    <React.Fragment>
+        <Icon
+            icon={`IcFlag${lang.replace('_', '-')}`}
+            className={'settings-language__language-link-flag settings-language__language-flag'}
+            type={lang.replace(/(\s|_)/, '-').toLowerCase()}
+        />
+        <span
+            className={classNames('settings-language__language-name', {
+                'settings-language__language-name--active': isCurrentLanguage(lang),
+            })}
+        >
+            {getAllowedLanguages()[lang]}
+        </span>
+    </React.Fragment>
+);
+
+const LanguageSettings = ({ changeCurrentLanguage, current_language, toggleSettingsModal, changeLanguage }) => {
+    const { i18n } = useTranslation();
+
+    return (
+        <div className='settings-language'>
+            <DesktopWrapper>
+                <FormSubHeader title={localize('Languages')} />
+            </DesktopWrapper>
+            <div className='settings-language__language-container'>
+                {Object.keys(getAllowedLanguages()).map(key =>
+                    isCurrentLanguage(key) ? (
+                        <NonClickableLink lang={key} key={key}>
+                            <LanguageLink lang={key} />
+                        </NonClickableLink>
+                    ) : (
+                        <span
+                            id={`dt_settings_${key}_button`}
+                            key={key}
+                            onClick={async () => {
+                                await changeLanguage(key, changeCurrentLanguage);
+                                await i18n.changeLanguage?.(key);
+                                toggleSettingsModal();
+                            }}
+                            className={classNames('settings-language__language-link', {
+                                'settings-language__language-link--active': isCurrentLanguage(key, current_language),
+                            })}
+                        >
+                            <LanguageLink lang={key} key={key} />
+                        </span>
+                    )
+                )}
+            </div>
+        </div>
+    );
+};
+
+LanguageLink.propTypes = {
+    lang: PropTypes.string,
+};
+
+NonClickableLink.propTypes = {
+    children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
+    lang: PropTypes.string,
+};
+
+export default connect(({ common, ui }) => ({
+    changeCurrentLanguage: common.changeCurrentLanguage,
+    current_language: common.current_language,
+    toggleSettingsModal: ui.toggleSettingsModal,
+    changeLanguage: common.changeLanguage,
+}))(LanguageSettings);

packages/account/src/Sections/index.js

@@ -14,6 +14,7 @@ import ConnectedApps from 'Sections/Security/ConnectedApps';
 import LoginHistory from 'Sections/Security/LoginHistory';
 import AccountClosed from 'Sections/Security/AccountClosed';
 import DeactivateAccount from 'Sections/Security/DeactivateAccount'; // TODO: Remove once mobile team has changed this link
+import LanguageSettings from 'Sections/Profile/LanguageSettings';
 
 export {
     AccountLimits,
@@ -32,4 +33,5 @@ export {
     LoginHistory,
     AccountClosed,
     DeactivateAccount,
+    LanguageSettings,
 };

packages/account/src/Styles/account.scss

@@ -24,6 +24,22 @@ $MIN_HEIGHT_FLOATING: calc(
             padding-left: 4.4rem;
             background-color: var(--general-main-1);
         }
+        &__header {
+            &-account__logout {
+                margin-top: 1rem;
+                align-items: center;
+                justify-content: center;
+                display: flex;
+                border: 2px solid var(--border-normal-1);
+                padding: 1rem;
+                border-radius: 0.5rem;
+                cursor: pointer;
+
+                &--icon {
+                    margin-right: 0.8rem;
+                }
+            }
+        }
     }
 
     .dc-vertical-tab--dashboard {

packages/appstore/.storybook/main.js

@@ -0,0 +1,48 @@
+const svg_loaders = [
+    {
+        loader: 'babel-loader',
+        options: {
+            cacheDirectory: true,
+            rootMode: 'upward',
+        },
+    },
+    {
+        loader: 'react-svg-loader',
+        options: {
+            jsx: true,
+            svgo: {
+                plugins: [
+                    { removeTitle: false },
+                    { removeUselessStrokeAndFill: false },
+                    { removeUknownsAndDefaults: false },
+                ],
+                floatPrecision: 2,
+            },
+        },
+    },
+];
+
+module.exports = {
+    stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(ts|tsx|mdx)'],
+    addons: ['@storybook/addon-essentials', '@storybook/addon-docs', '@storybook/addon-links'],
+    framework: '@storybook/react',
+    core: {
+        builder: 'webpack5',
+    },
+    webpackFinal: async config => {
+        config.module.rules.forEach(rule => {
+            const regex_string = rule.test.toString();
+            if (regex_string.includes('svg')) {
+                rule.test = new RegExp(regex_string.replace('svg', ''));
+            }
+        });
+
+        config.module.rules.push({
+            test: /\.svg$/,
+            exclude: /node_modules|public\//,
+            use: svg_loaders,
+        });
+
+        return config;
+    },
+};

packages/appstore/.storybook/preview-body.html

@@ -0,0 +1 @@
+<div id="root" class="theme theme--light"></div>

packages/appstore/.storybook/preview.js

@@ -0,0 +1 @@
+import '!style-loader!css-loader!sass-loader!./scss-loader.scss';

packages/appstore/.storybook/scss-loader.scss

@@ -0,0 +1,11 @@
+@import '~@deriv/shared/src/styles/reset.scss';
+@import '~@deriv/shared/src/styles/constants.scss';
+@import '~@deriv/shared/src/styles/themes.scss';
+
+body {
+    font-family: 'IBM Plex Sans', sans-serif;
+    margin: 0;
+    padding: 1rem;
+    display: block;
+    box-sizing: border-box;
+}