Hubert / Fixes for mx uk revert (#4200)

* Revert "Revert "URGENT - Banner and modal to inform UK clients of MX account closure. (#4166)" (#4196)" This reverts commit d47f948. * Fullscreen MX dialog * fixes for notification * wait for settings before showing full-screen error * Proper padding for mobile and autoscroll * Update styling Co-authored-by: Matin shafiei <[email protected]> Co-authored-by: Mohammadreza Ghorbani <[email protected]> Co-authored-by: Hubert Koster <[email protected]>
deriv-com · Oct 28, 2021 · 32eb8d7 · 32eb8d7 · vercel · Oct 28, 2021
1 parent d47f948
commit 32eb8d7
Show file tree

Hide file tree

Showing 40 changed files with 985 additions and 3,694 deletions.
diff --git a/packages/account/src/Components/self-exclusion/self-exclusion-confirm-page.jsx b/packages/account/src/Components/self-exclusion/self-exclusion-confirm-page.jsx
@@ -7,9 +7,8 @@ import SelfExclusionContext from './self-exclusion-context';
 import SelfExclusionConfirmLimits from './self-exclusion-confirm-limits.jsx';
 
 const SelfExclusionConfirmPage = () => {
-    const { backFromConfirmLimits, currency, currency_display, exclusion_texts, is_eu, state } = React.useContext(
-        SelfExclusionContext
-    );
+    const { backFromConfirmLimits, currency, currency_display, exclusion_texts, is_eu, state } =
+        React.useContext(SelfExclusionContext);
     const { isSubmitting, values } = useFormikContext();
 
     if (state.show_confirm) {

diff --git a/packages/bot-skeleton/src/scratch/hooks/field.js b/packages/bot-skeleton/src/scratch/hooks/field.js
@@ -53,8 +53,7 @@ const FieldCheckbox = () => {
                     'path',
                     {
                         fill: 'var(--text-general)',
-                        d:
-                            'M6 10.086L3.707 7.793a1 1 0 00-1.414 1.414l3 3a1 1 0 001.414 0l7-7a1 1 0 10-1.414-1.414L6 10.086z',
+                        d: 'M6 10.086L3.707 7.793a1 1 0 00-1.414 1.414l3 3a1 1 0 001.414 0l7-7a1 1 0 10-1.414-1.414L6 10.086z',
                     },
                     el_field_group
                 );

diff --git a/packages/cashier/src/Stores/base-store.js b/packages/cashier/src/Stores/base-store.js
@@ -57,13 +57,8 @@ export default class BaseStore {
      *     @property {String}   store_name - Explicit store name for browser application storage (to bypass minification)
      */
     constructor(options = {}) {
-        const {
-            root_store,
-            local_storage_properties,
-            session_storage_properties,
-            validation_rules,
-            store_name,
-        } = options;
+        const { root_store, local_storage_properties, session_storage_properties, validation_rules, store_name } =
+            options;
 
         Object.defineProperty(this, 'root_store', {
             enumerable: false,

diff --git a/packages/components/src/components/data-table/data-table.jsx b/packages/components/src/components/data-table/data-table.jsx
@@ -99,16 +99,8 @@ class DataTable extends React.PureComponent {
     };
 
     render() {
-        const {
-            children,
-            className,
-            columns,
-            content_loader,
-            data_source,
-            footer,
-            getActionColumns,
-            getRowSize,
-        } = this.props;
+        const { children, className, columns, content_loader, data_source, footer, getActionColumns, getRowSize } =
+            this.props;
 
         const TableData = (
             <React.Fragment>

diff --git a/packages/components/src/components/icon/common/ic-amplifier.svg b/packages/components/src/components/icon/common/ic-amplifier.svg
diff --git a/packages/components/src/components/icon/icons.js b/packages/components/src/components/icon/icons.js
@@ -149,6 +149,7 @@ import './common/ic-alert-danger.svg';
 import './common/ic-alert-info.svg';
 import './common/ic-alert-success.svg';
 import './common/ic-alert-warning.svg';
+import './common/ic-amplifier.svg';
 import './common/ic-archive.svg';
 import './common/ic-arrow-down-bold.svg';
 import './common/ic-arrow-down.svg';

diff --git a/packages/components/src/components/mobile-dialog/mobile-dialog.jsx b/packages/components/src/components/mobile-dialog/mobile-dialog.jsx
@@ -8,16 +8,8 @@ import Text from '../text/text.jsx';
 import Div100vhContainer from '../div100vh-container';
 
 const MobileDialog = props => {
-    const {
-        title,
-        visible,
-        children,
-        has_full_height,
-        portal_element_id,
-        renderTitle,
-        wrapper_classname,
-        footer,
-    } = props;
+    const { title, visible, children, has_full_height, portal_element_id, renderTitle, wrapper_classname, footer } =
+        props;
 
     const footer_ref = React.useRef(false);
     const [footer_height, setHeight] = React.useState(0);

diff --git a/packages/components/stories/data-table/data-table.stories.js b/packages/components/stories/data-table/data-table.stories.js
@@ -33,17 +33,18 @@ const mock_columns = [
 
 const handleRowAction = row_obj => console.log(row_obj);
 
-const handleActionColumns = () => ({ row_obj, is_header, is_footer }) => {
-    if (is_header || is_footer) {
-        return <div className='test__row-action' />;
-    }
-    console.log(row_obj);
-    return (
-        <div className='test__row-action'>
-            <h1>Nither header nor footer!</h1>
-        </div>
-    );
-};
+const handleActionColumns =
+    () =>
+    ({ row_obj, is_header, is_footer }) => {
+        if (is_header || is_footer) {
+            return <div className='test__row-action' />;
+        }
+        return (
+            <div className='test__row-action'>
+                <h1>Neither header nor footer!</h1>
+            </div>
+        );
+    };
 
 const handleScroll = e => {
     const { scrollTop, scrollHeight, clientHeight } = e.target;

diff --git a/packages/components/stories/icon/icons.js b/packages/components/stories/icon/icons.js
@@ -155,6 +155,7 @@ export const icons = {
         'IcAlertInfo',
         'IcAlertSuccess',
         'IcAlertWarning',
+        'IcAmplifier',
         'IcArchive',
         'IcArrowDownBold',
         'IcArrowDown',

diff --git a/packages/core/src/App/Components/Elements/Errors/error-component.jsx b/packages/core/src/App/Components/Elements/Errors/error-component.jsx
@@ -4,6 +4,8 @@ import { useHistory } from 'react-router-dom';
 import { PageError } from '@deriv/components';
 import { routes } from '@deriv/shared';
 import { localize } from '@deriv/translations';
+import { connect } from 'Stores/connect';
+import { CloseMXAccountContent } from 'App/Containers/CloseMXAccountModal/close-mx-account-modal.jsx';
 
 const ErrorComponent = ({
     header,
@@ -12,6 +14,11 @@ const ErrorComponent = ({
     redirectOnClick,
     should_clear_error_on_click,
     setError,
+    showNotificationMessageByKey,
+    showCloseMXAccountPopup,
+    removeNotificationMessageByKey,
+    type,
+    is_iom,
     redirect_to = routes.trade,
     should_show_refresh = true,
 }) => {
@@ -28,6 +35,37 @@ const ErrorComponent = ({
 
     const refresh_message = should_show_refresh ? localize('Please refresh this page to continue.') : '';
 
+    if (type === 'mx_removal') {
+        return (
+            <div className='close-mx-account--is-fullscreen'>
+                <div className='close-mx-account'>
+                    <div className='close-mx-account__content'>
+                        <CloseMXAccountContent
+                            is_iom={is_iom}
+                            is_fullscreen={true}
+                            showNotificationMessageByKey={showNotificationMessageByKey}
+                            showCloseMXAccountPopup={showCloseMXAccountPopup}
+                            removeNotificationMessageByKey={removeNotificationMessageByKey}
+                        />
+                    </div>
+                </div>
+            </div>
+        );
+    }
+
+    if (localStorage.getItem('hide_close_mx_account_notification')) {
+        return (
+            <PageError
+                header={header || localize('Something’s not right')}
+                messages={message ? [message, refresh_message] : []}
+                redirect_urls={[]}
+                redirect_labels={[]}
+                buttonOnClick={() => ({})}
+                should_clear_error_on_click={false}
+                setError={setError}
+            />
+        );
+    }
     return (
         <PageError
             header={header || localize('Something’s not right')}
@@ -50,4 +88,8 @@ ErrorComponent.propTypes = {
     type: PropTypes.string,
 };
 
-export default ErrorComponent;
+export default connect(({ client, ui }) => ({
+    removeNotificationMessageByKey: ui.removeNotificationMessageByKey,
+    showCloseMXAccountPopup: ui.showCloseMXAccountPopup,
+    is_iom: client.residence === 'im',
+}))(ErrorComponent);
diff --git a/packages/core/src/App/Components/Elements/NotificationMessage/notification-close-mx.jsx b/packages/core/src/App/Components/Elements/NotificationMessage/notification-close-mx.jsx
@@ -0,0 +1,43 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { isMobile } from '@deriv/shared';
+import { Button, Icon, Text } from '@deriv/components';
+
+const NotificationCloseMX = ({ header, message, secondary_btn, img_src, img_alt, onClose }) => (
+    <div className='close-mx notification-banner'>
+        <div className='notification-banner--left'>
+            <Text as='h4' size={isMobile() ? 'xs' : 's'} weight='bold' className='notification-banner__title'>
+                {header}
+            </Text>
+            <Text as='p' size={isMobile() ? 'xxs' : 'xs'} className='notification-banner__description' line_height='xs'>
+                {message}
+            </Text>
+            {!!secondary_btn && (
+                <div className='notification-banner__btn-wrapper'>
+                    <Button className='notification-banner__btn' secondary small onClick={secondary_btn.onClick}>
+                        {secondary_btn.text}
+                    </Button>
+                </div>
+            )}
+        </div>
+        <div className='notification-banner--right'>
+            <div className='notification-banner__bg' />
+            <img className='notification-banner__img' src={img_src} alt={img_alt} />
+            <Icon className='notification-banner__close-icon' icon='IcCloseLight' onClick={onClose} />
+        </div>
+    </div>
+);
+
+NotificationCloseMX.propTypes = {
+    header: PropTypes.string,
+    img_alt: PropTypes.string,
+    img_src: PropTypes.string,
+    message: PropTypes.string,
+    onClose: PropTypes.func,
+    secondary_btn: PropTypes.shape({
+        text: PropTypes.string,
+        onClick: PropTypes.func,
+    }),
+};
+
+export default NotificationCloseMX;
diff --git a/packages/core/src/App/Components/Elements/NotificationMessage/notification.jsx b/packages/core/src/App/Components/Elements/NotificationMessage/notification.jsx
@@ -9,6 +9,7 @@ import NotificationBanner from './notification-banner.jsx';
 import { default_delay, types } from './constants';
 import NotificationPromo from './notification-promo.jsx';
 import { BinaryLink } from '../../Routes';
+import NotificationCloseMX from './notification-close-mx.jsx';
 
 const Notification = ({ data, removeNotificationMessage }) => {
     const linear_progress_container_ref = React.useRef(null);
@@ -40,6 +41,17 @@ const Notification = ({ data, removeNotificationMessage }) => {
                     onClose={destroy}
                 />
             );
+        case 'close_mx':
+            return (
+                <NotificationCloseMX
+                    header={data.header}
+                    message={data.message}
+                    secondary_btn={data.secondary_btn}
+                    img_src={data.img_src}
+                    img_alt={data.img_alt}
+                    onClose={destroy}
+                />
+            );
         case 'promotions':
             return (
                 <NotificationPromo
@@ -147,6 +159,7 @@ Notification.propTypes = {
             'news',
             'announce',
             'promotions',
+            'close_mx',
         ]).isRequired,
     }),
     removeNotificationMessage: PropTypes.func,

diff --git a/packages/core/src/App/Containers/AccountSignupModal/account-signup-modal.jsx b/packages/core/src/App/Containers/AccountSignupModal/account-signup-modal.jsx
@@ -79,8 +79,9 @@ const AccountSignup = ({
         const residence = values;
         setSelectedResidence(residence);
         if (residence) {
-            const selected_country = residence_list.find(item => item.text.toLowerCase() === residence.toLowerCase())
-                .value;
+            const selected_country = residence_list.find(
+                item => item.text.toLowerCase() === residence.toLowerCase()
+            ).value;
             if (isEuCountrySelected(selected_country)) {
                 setIsEuResident(true);
             } else {