Farabi/grwt-9029/v2-migration-banner

src/javascript/app/base/socket_general.js

@@ -16,6 +16,7 @@ const LocalStore             = require('../../_common/storage').LocalStore;
 const State                  = require('../../_common/storage').State;
 const getPropertyValue       = require('../../_common/utility').getPropertyValue;
 const isLoginPages           = require('../../_common/utility').isLoginPages;
+const MigrationModal         = require('../../../templates/_common/components/migration-modal.jsx').default;
 
 const BinarySocketGeneral = (() => {
     const onOpen = (is_ready) => {
@@ -38,6 +39,10 @@ const BinarySocketGeneral = (() => {
         switch (response.msg_type) {
             case 'website_status':
                 if (response.website_status) {
+                    if (response.website_status.message === 'migrated') {
+                        MigrationModal.show();
+                        return;
+                    }
                     const is_available = !BinarySocket.isSiteDown(response.website_status.site_status);
                     if (is_available && BinarySocket.getAvailability().is_down) {
                         window.location.reload();

src/sass/_common/migration-modal.scss

@@ -0,0 +1,41 @@
+.migration-modal {
+    &__header {
+        background-color: var(--semantic-color-slate-solid-surface-normal-low);
+    }
+    &__content {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 1.6rem;
+        text-align: left;
+    }
+    &__title {
+        font-size: $FONT_SIZE_XL;
+        font-weight: bold;
+        margin: 0 0 0.4rem;
+    }
+    &__description {
+        font-size: $FONT_SIZE_N;
+        margin: 0 0 0.8rem;
+    }
+    &__cta {
+        margin-top: 1.2rem;
+        width: 100%;
+    }
+    &__support {
+        margin-top: 0.8rem;
+        width: 100%;
+        text-align: center;
+        font-size: $FONT_SIZE_S;
+    }
+    &__support-link {
+        /* stylelint-disable declaration-no-important */
+        color: $COLOR_DRIV_RED !important;
+        /* stylelint-enable declaration-no-important */
+        text-decoration: none;
+
+        &:hover {
+            text-decoration: underline;
+        }
+    }
+}

src/sass/common.scss

@@ -6,6 +6,7 @@
 
 /* main style */
 @import '_common/components';
+@import '_common/migration-modal';
 //@import '_common/footer';
 @import '_common/header';
 @import '_common/wallet_header.scss';

src/templates/_common/components/migration-modal.jsx

@@ -0,0 +1,105 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Button, Modal } from '@deriv-com/quill-ui';
+
+const { localize } = require('../../../javascript/_common/localize');
+
+const getHomeLoginUrl = () => {
+    const hostname   = window.location.hostname;
+    const is_staging = /staging-smarttrader/.test(hostname);
+    const tld_match  = hostname.match(/deriv\.(com|me|be)/);
+    const tld        = tld_match ? tld_match[1] : 'com';
+    const subdomain  = is_staging ? 'staging-home' : 'home';
+    return `https://${subdomain}.deriv.${tld}/dashboard/login`;
+};
+
+const getHelpCentreUrl = () => {
+    const hostname  = window.location.hostname;
+    const tld_match = hostname.match(/deriv\.(com|me|be)/);
+    const tld       = tld_match ? tld_match[1] : 'com';
+    return `https://trade.deriv.${tld}/help-centre`;
+};
+
+const MigrationModalComponent = () => {
+    const is_mobile = window.innerWidth < 770;
+
+    return (
+        <Modal
+            isOpened
+            isNonExpandable
+            isMobile={is_mobile}
+            showHandleBar={false}
+            showCrossIcon={false}
+            disableCloseOnOverlay
+            showPrimaryButton={false}
+            hasFooter={false}
+            className='migration-modal'
+        >
+            <Modal.Header
+                image={
+                    <img
+                        src='/images/pages/header/ic_smarttrader.png'
+                        alt='SmartTrader'
+                        width={96}
+                        height={96}
+                    />
+                }
+                className='migration-modal__header'
+            />
+            <Modal.Body>
+                <div className='migration-modal__content'>
+                    <p className='migration-modal__title'>
+                        {localize('Your platform has been upgraded')}
+                    </p>
+                    <p className='migration-modal__description'>
+                        {localize('We\'ve made improvements to give you a better trading experience. Please log in again to continue.')}
+                    </p>
+                    <Button
+                        className='migration-modal__cta'
+                        color='coral'
+                        fullWidth
+                        label={localize('Log in')}
+                        size='lg'
+                        variant='primary'
+                        onClick={() => window.location.assign(getHomeLoginUrl())}
+                    />
+                    <p className='migration-modal__support'>
+                        {localize('Having trouble logging in?')}{' '}
+                        <a
+                            className='migration-modal__support-link'
+                            href={getHelpCentreUrl()}
+                            rel='noopener noreferrer'
+                            target='_blank'
+                        >
+                            {localize('Contact support')}
+                        </a>
+                    </p>
+                </div>
+            </Modal.Body>
+        </Modal>
+    );
+};
+
+const MigrationModal = (() => {
+    let container = null;
+
+    const show = () => {
+        if (container) return;
+        container = document.createElement('div');
+        container.id = 'migration_modal_container';
+        document.body.appendChild(container);
+        ReactDOM.render(<MigrationModalComponent />, container);
+    };
+
+    const remove = () => {
+        if (container) {
+            ReactDOM.unmountComponentAtNode(container);
+            container.remove();
+            container = null;
+        }
+    };
+
+    return { show, remove };
+})();
+
+export default MigrationModal;