Merge branch 'master' into thisyahlen/91782/real_account_needed_for_c…

…ashier_popup
deriv-com · Apr 4, 2023 · 7dcf713 · 7dcf713
2 parents 2b0dab1 + 826faf5
commit 7dcf713
Show file tree

Hide file tree

Showing 34 changed files with 349 additions and 745 deletions.
diff --git a/packages/components/src/components/checkbox/checkbox.tsx b/packages/components/src/components/checkbox/checkbox.tsx
@@ -68,7 +68,7 @@ const Checkbox = React.forwardRef<HTMLInputElement, TCheckBoxProps>(
                     disabled={disabled}
                     onChange={onInputChange}
                     defaultChecked={checked}
-                    checked={value}
+                    checked={checked}
                     {...otherProps}
                 />
                 <span

diff --git a/packages/core/src/App/Components/Layout/Footer/toggle-language-settings.tsx b/packages/core/src/App/Components/Layout/Footer/toggle-language-settings.tsx
@@ -9,10 +9,11 @@ import LanguageSettings from '../../../Containers/SettingsModal/settings-languag
 const ToggleLanguageSettings = observer(() => {
     const { common, ui } = useStore();
     const { is_language_settings_modal_on, toggleLanguageSettingsModal } = ui;
-    const { current_language } = common;
+    const { current_language, is_language_changing } = common;
 
     const toggle_settings_class = classNames('ic-language', 'footer__link', {
         'ic-settings--active': is_language_settings_modal_on,
+        'ic-settings--disabled': is_language_changing,
     });
     return (
         <React.Fragment>

diff --git a/packages/core/src/App/Components/Layout/Header/toggle-menu-drawer.jsx b/packages/core/src/App/Components/Layout/Header/toggle-menu-drawer.jsx
@@ -164,7 +164,7 @@ const MenuLink = observer(
 
 const ToggleMenuDrawer = observer(({ platform_config }) => {
     const { common, ui, client, traders_hub, modules } = useStore();
-    const { app_routing_history, current_language } = common;
+    const { app_routing_history, current_language, is_language_changing } = common;
     const { disableApp, enableApp, is_dark_mode_on: is_dark_mode, setDarkMode: toggleTheme } = ui;
     const {
         account_status,
@@ -191,7 +191,7 @@ const ToggleMenuDrawer = observer(({ platform_config }) => {
     const [transitionExit, setTransitionExit] = React.useState(false);
     const [primary_routes_config, setPrimaryRoutesConfig] = React.useState([]);
     const [is_submenu_expanded, expandSubMenu] = React.useState(false);
-    const [is_language_changing, setIsLanguageChanging] = React.useState(false);
+    const [is_language_change, setIsLanguageChange] = React.useState(false);
 
     const { is_appstore } = React.useContext(PlatformContext);
     const timeout = React.useRef();
@@ -373,32 +373,36 @@ const ToggleMenuDrawer = observer(({ platform_config }) => {
     const GetLanguageRoutesTraderHub = React.useCallback(() => {
         return (
             <MobileDrawer.SubMenu
-                is_expanded={is_language_changing}
+                is_expanded={is_language_change}
                 has_subheader
                 submenu_title={localize('Language')}
                 onToggle={is_expanded => {
                     expandSubMenu(is_expanded);
-                    setIsLanguageChanging(is_changing => !is_changing);
+                    setIsLanguageChange(is_changing => !is_changing);
                 }}
                 submenu_toggle_class='dc-mobile-drawer__submenu-toggle--hidden'
             >
-                <div className='settings-language__language-container--pre-appstore'>
+                <div
+                    className={classNames('settings-language__language-container', {
+                        'settings-language__language-container--disabled': is_language_changing,
+                    })}
+                >
                     {Object.keys(getAllowedLanguages()).map(lang => (
                         <LanguageLink
                             key={lang}
-                            icon_classname='settings-language__language-flag--pre-appstore'
+                            icon_classname='settings-language__language-flag'
                             is_clickable
                             lang={lang}
                             toggleModal={() => {
                                 toggleDrawer();
-                                setIsLanguageChanging(is_changing => !is_changing);
+                                setIsLanguageChange(is_changing => !is_changing);
                             }}
                         />
                     ))}
                 </div>
             </MobileDrawer.SubMenu>
         );
-    }, [is_language_changing, toggleDrawer]);
+    }, [is_language_change, toggleDrawer, is_language_changing]);
 
     const HelpCentreRoute = has_border_bottom => {
         return (
@@ -425,8 +429,8 @@ const ToggleMenuDrawer = observer(({ platform_config }) => {
                 <div
                     className='settings-language__language-button_wrapper'
                     onClick={() => {
-                        if (!is_language_changing) {
-                            setIsLanguageChanging(true);
+                        if (!is_language_change) {
+                            setIsLanguageChange(true);
                         }
                     }}
                 >
@@ -443,7 +447,7 @@ const ToggleMenuDrawer = observer(({ platform_config }) => {
                 </div>
             </React.Fragment>
         ),
-        [current_language, is_language_changing]
+        [current_language, is_language_change]
     );
 
     return (
@@ -618,7 +622,7 @@ const ToggleMenuDrawer = observer(({ platform_config }) => {
                                 <ServerTime is_mobile />
                                 <NetworkStatus is_mobile />
                             </MobileDrawer.Footer>
-                            {is_language_changing && <GetLanguageRoutesTraderHub />}
+                            {is_language_change && <GetLanguageRoutesTraderHub />}
                         </React.Fragment>
                     </div>
                 </Div100vhContainer>

diff --git a/packages/core/src/App/Containers/AccountSignupModal/account-signup-modal.jsx b/packages/core/src/App/Containers/AccountSignupModal/account-signup-modal.jsx
@@ -115,6 +115,7 @@ const AccountSignup = ({ enableApp, isModalVisible, clients_country, onSignup, r
                                             className={classNames('account-signup__btn', {
                                                 'account-signup__btn--disabled': disableBtn(values, errors),
                                             })}
+                                            is_disabled={disableBtn(values, errors)}
                                             type='button'
                                             onClick={() => {
                                                 history_value.current = values;

diff --git a/packages/core/src/App/Containers/SetResidenceModal/set-residence-form.jsx b/packages/core/src/App/Containers/SetResidenceModal/set-residence-form.jsx
@@ -33,7 +33,7 @@ const SetResidenceForm = ({
                                 input_id='dt_core_set-residence-form_signup-residence-select'
                                 className={`${class_prefix}__residence-field`}
                                 type='text'
-                                label={localize('Choose country')}
+                                label={localize('Country of residence')}
                                 historyValue={history_value}
                                 error={touched.residence && errors.residence}
                                 required
@@ -46,7 +46,7 @@ const SetResidenceForm = ({
                         <MobileWrapper>
                             <SelectNative
                                 placeholder={localize('Please select')}
-                                label={localize('Choose country')}
+                                label={localize('Country of residence')}
                                 value={field.value}
                                 list_items={residence_list}
                                 error={touched.residence && errors.residence}

diff --git a/packages/core/src/App/Containers/SettingsModal/settings-language.jsx b/packages/core/src/App/Containers/SettingsModal/settings-language.jsx
@@ -12,7 +12,7 @@ const LanguageSettings = observer(() => {
 
     return (
         <div className='settings-language'>
-            <div className='settings-language__language-container--pre-appstore'>
+            <div className='settings-language__language-container'>
                 {Object.keys(getAllowedLanguages()).map(lang =>
                     isCurrentLanguage(lang, current_language) ? (
                         <LanguageLink key={lang} lang={lang} />

diff --git a/packages/core/src/Stores/client-store.js b/packages/core/src/Stores/client-store.js
@@ -1306,7 +1306,7 @@ export default class ClientStore extends BaseStore {
             currency = form_values.currency;
         }
         const { document_number, document_type, document_additional, ...required_form_values } = form_values;
-        required_form_values.citizen = this.account_settings.citizen || this.residence;
+        required_form_values.citizen = form_values?.citizen || this.account_settings.citizen || this.residence;
 
         const response = is_maltainvest_account
             ? await WS.newAccountRealMaltaInvest(required_form_values)
@@ -1591,7 +1591,9 @@ export default class ClientStore extends BaseStore {
             if (language !== 'EN' && language !== LocalStore.get(LANGUAGE_KEY)) {
                 window.history.replaceState({}, document.title, urlForLanguage(language));
             }
-            if (this.citizen) this.onSetCitizen(this.citizen);
+            if (this.citizen) {
+                await this.onSetCitizen(this.citizen);
+            }
             if (!this.is_virtual) {
                 this.setPrevRealAccountLoginid(this.loginid);
             }
@@ -2248,7 +2250,7 @@ export default class ClientStore extends BaseStore {
         });
     }
 
-    onSetCitizen(citizen) {
+    async onSetCitizen(citizen) {
         if (!citizen) return;
         WS.setSettings({
             set_settings: 1,

diff --git a/packages/core/src/sass/app/_common/components/settings-language.scss b/packages/core/src/sass/app/_common/components/settings-language.scss
@@ -11,18 +11,15 @@
         grid-gap: 1.6rem;
 
         @include mobile {
-            grid-template-columns: repeat(2, minmax(100%, 1fr));
+            grid-template-columns: repeat(2, minmax(50%, 1fr));
             grid-gap: 0.3rem;
             grid-template-rows: auto;
-        }
-
-        &--pre-appstore {
-            padding: 2.4rem;
 
             @include mobile {
-                padding: 0.8rem;
-                grid-template-columns: repeat(2, minmax(9rem, 1fr));
-                grid-gap: 0;
+                &--disabled {
+                    opacity: 0.5;
+                    pointer-events: none;
+                }
             }
         }
     }
@@ -63,13 +60,8 @@
 
             @include mobile {
                 margin-top: 1rem;
-                width: 5rem;
-                height: 4rem;
-
-                &--pre-appstore {
-                    width: 3.5rem;
-                    height: 2.5rem;
-                }
+                width: 4rem;
+                height: 5rem;
             }
         }
         &-name {

diff --git a/packages/core/src/sass/app/_common/layout/footer.scss b/packages/core/src/sass/app/_common/layout/footer.scss
@@ -162,6 +162,18 @@
     }
     &-language__icon {
         margin-right: 0.4rem;
+
+        &--disabled {
+            cursor: not-allowed;
+            opacity: 0.5;
+            pointer-events: none;
+        }
+    }
+
+    &--disabled {
+        cursor: not-allowed;
+        opacity: 0.5;
+        pointer-events: none;
     }
 }
 

diff --git a/packages/reports/src/Containers/open-positions.jsx b/packages/reports/src/Containers/open-positions.jsx
@@ -16,13 +16,12 @@ import {
     SelectNative,
 } from '@deriv/components';
 import {
-    urlFor,
     isAccumulatorContract,
     isMobile,
     isMultiplierContract,
     isVanillaContract,
     getTimePercentage,
-    website_name,
+    getUnsupportedContracts,
     getTotalProfit,
     getContractPath,
     getCurrentTick,
@@ -224,26 +223,15 @@ export const OpenPositionsTable = ({
     </React.Fragment>
 );
 
-const portfoliows_href = urlFor('user/portfoliows', { legacy: true });
-
 const getRowAction = row_obj =>
     row_obj.is_unsupported
         ? {
               component: (
                   <Localize
-                      i18n_default_text='This trade type is currently not supported on {{website_name}}. Please go to <0>Binary.com</0> for details.'
+                      i18n_default_text="The {{trade_type_name}} contract details aren't currently available. We're working on making them available soon."
                       values={{
-                          website_name,
+                          trade_type_name: getUnsupportedContracts()[row_obj.type]?.name,
                       }}
-                      components={[
-                          <a
-                              key={0}
-                              className='link link--orange'
-                              rel='noopener noreferrer'
-                              target='_blank'
-                              href={portfoliows_href}
-                          />,
-                      ]}
                   />
               ),
           }

diff --git a/packages/reports/src/Containers/profit-table.jsx b/packages/reports/src/Containers/profit-table.jsx
@@ -4,7 +4,7 @@ import { PropTypes as MobxPropTypes } from 'mobx-react';
 import React from 'react';
 import { withRouter } from 'react-router';
 import { DesktopWrapper, MobileWrapper, DataList, DataTable } from '@deriv/components';
-import { extractInfoFromShortcode, isForwardStarting, urlFor, website_name, getContractPath } from '@deriv/shared';
+import { extractInfoFromShortcode, isForwardStarting, getUnsupportedContracts, getContractPath } from '@deriv/shared';
 import { localize, Localize } from '@deriv/translations';
 import { ReportsTableRowLoader } from '../Components/Elements/ContentLoader';
 import CompositeCalendar from '../Components/Form/CompositeCalendar';
@@ -16,31 +16,21 @@ import PlaceholderComponent from '../Components/placeholder-component.jsx';
 import { ReportsMeta } from '../Components/reports-meta.jsx';
 import { getProfitTableColumnsTemplate } from 'Constants/data-table-constants';
 
-const profit_tablews_href = urlFor('user/profit_tablews', { legacy: true });
-
-const getRowAction = row_obj =>
-    getSupportedContracts()[extractInfoFromShortcode(row_obj.shortcode).category.toUpperCase()] &&
-    !isForwardStarting(row_obj.shortcode, row_obj.purchase_time_unix)
+const getRowAction = row_obj => {
+    const contract_type = extractInfoFromShortcode(row_obj.shortcode).category.toUpperCase();
+    return getSupportedContracts()[contract_type] && !isForwardStarting(row_obj.shortcode, row_obj.purchase_time_unix)
         ? getContractPath(row_obj.contract_id)
         : {
               component: (
                   <Localize
-                      i18n_default_text='This trade type is currently not supported on {{website_name}}. Please go to <0>Binary.com</0> for details.'
+                      i18n_default_text="The {{trade_type_name}} contract details aren't currently available. We're working on making them available soon."
                       values={{
-                          website_name,
+                          trade_type_name: getUnsupportedContracts()[contract_type]?.name,
                       }}
-                      components={[
-                          <a
-                              key={0}
-                              className='link link--orange'
-                              rel='noopener noreferrer'
-                              target='_blank'
-                              href={profit_tablews_href}
-                          />,
-                      ]}
                   />
               ),
           };
+};
 
 const ProfitTable = ({
     component_icon,

diff --git a/packages/reports/src/Containers/statement.jsx b/packages/reports/src/Containers/statement.jsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { withRouter } from 'react-router-dom';
 import { DesktopWrapper, MobileWrapper, DataList, DataTable, Text, Clipboard } from '@deriv/components';
-import { extractInfoFromShortcode, isForwardStarting, urlFor, website_name, getContractPath } from '@deriv/shared';
+import { extractInfoFromShortcode, isForwardStarting, getUnsupportedContracts, getContractPath } from '@deriv/shared';
 import { localize, Localize } from '@deriv/translations';
 import { ReportsTableRowLoader } from '../Components/Elements/ContentLoader';
 import { getSupportedContracts } from '_common/contract';
@@ -52,31 +52,21 @@ const DetailsComponent = ({ message = '', action_type = '' }) => {
     );
 };
 
-const statementws_href = urlFor('user/statementws', { legacy: true });
-
 const getRowAction = row_obj => {
     let action;
     if (row_obj.id && ['buy', 'sell'].includes(row_obj.action_type)) {
+        const contract_type = extractInfoFromShortcode(row_obj.shortcode).category.toUpperCase();
         action =
-            getSupportedContracts()[extractInfoFromShortcode(row_obj.shortcode).category.toUpperCase()] &&
+            getSupportedContracts()[contract_type] &&
             !isForwardStarting(row_obj.shortcode, row_obj.purchase_time || row_obj.transaction_time)
                 ? getContractPath(row_obj.id)
                 : {
                       component: (
                           <Localize
-                              i18n_default_text='This trade type is currently not supported on {{website_name}}. Please go to <0>Binary.com</0> for details.'
+                              i18n_default_text="The {{trade_type_name}} contract details aren't currently available. We're working on making them available soon."
                               values={{
-                                  website_name,
+                                  trade_type_name: getUnsupportedContracts()[contract_type]?.name,
                               }}
-                              components={[
-                                  <a
-                                      key={0}
-                                      className='link link--orange'
-                                      rel='noopener noreferrer'
-                                      target='_blank'
-                                      href={statementws_href}
-                                  />,
-                              ]}
                           />
                       ),
                   };