Merge pull request #466 from deriv-com/sandeep/bot-1933/update-depric…

…ation-content chore: 🔥 updated migration content
deriv-com · Jul 23, 2024 · 40623e0 · 40623e0
2 parents 6e6f3c9 + 79d4fd2
commit 40623e0
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 12 deletions.
diff --git a/src/components/Banner/fixed-dbot-banner.jsx b/src/components/Banner/fixed-dbot-banner.jsx
@@ -11,10 +11,13 @@ const FixedDbotBanner = () => (
                 <span>
                     <strong>{translate('Important: ')}</strong>
                 </span>
-                <span>{translate('Binary Bot will be discontinued soon. ')}</span>
-                <a className='fixed-banner__visit-deriv-bot' href='#' onClick={visitDerivBot}>
-                    {translate('Upgrade to Deriv Bot')}
-                </a>
+                <span>{translate('Binary Bot will be discontinued on')} </span>
+                <strong>
+                    <span>{translate('31 August 2024.')} </span>
+                    <a className='fixed-banner__visit-deriv-bot' href='#' onClick={visitDerivBot}>
+                        {translate('Upgrade to Deriv Bot')}
+                    </a>
+                </strong>
                 <span>{translate(' to continue trading.')}</span>
             </div>
         </div>

diff --git a/src/components/Banner/fixed-dbot-banner.scss b/src/components/Banner/fixed-dbot-banner.scss
@@ -28,6 +28,7 @@
     &__visit-deriv-bot {
         color: var(--text-prominent);
         text-decoration: underline;
+        font-weight: bold;
         &:hover {
             text-decoration: underline;
         }

diff --git a/src/components/Banner/move-to-dbot-banner.jsx b/src/components/Banner/move-to-dbot-banner.jsx
@@ -8,7 +8,7 @@ import { visitDerivBot } from './redirect-to-dbot';
 import './move-to-dbot-banner.scss';
 
 const updateLastPopupTime = () => {
-    localStorage.setItem('last_deriv_redirect_popup_time', new Date().toString());
+    localStorage.setItem('migration_popup_timer', new Date().toString());
 };
 
 const daysBetween = (date1, date2) => {
@@ -18,15 +18,15 @@ const daysBetween = (date1, date2) => {
 };
 
 const shouldShowPopup = () => {
-    const last_deriv_redirect_popup_time = localStorage.getItem('last_deriv_redirect_popup_time');
+    const migration_popup_timer = localStorage.getItem('migration_popup_timer');
 
-    if (!last_deriv_redirect_popup_time) {
+    if (!migration_popup_timer) {
         updateLastPopupTime();
         return true;
     }
 
     const allowed_delay = 1; // One week in days
-    const last_popup_date = new Date(last_deriv_redirect_popup_time);
+    const last_popup_date = new Date(migration_popup_timer);
     const current_date = new Date();
 
     if (daysBetween(last_popup_date, current_date) >= allowed_delay) {
@@ -39,7 +39,7 @@ const shouldShowPopup = () => {
 
 const MoveToDbotBanner = () => {
     const container_class = 'mv-dbot-banner';
-    const [open_modal, setOpenModal] = useState(false);
+    const [open_modal, setOpenModal] = useState(true);
 
     useEffect(() => {
         try {
@@ -72,14 +72,22 @@ const MoveToDbotBanner = () => {
                         <div className={`${container_class}__icon-container`}>
                             <img alt='move to deriv' src='/public/images/upgrade-to-deriv-bot.svg' />
                         </div>
-                        <div className={`${container_class}__title`}>{translate('Binary bot is retiring soon')} </div>
+                        <div className={`${container_class}__title`}>
+                            {translate('Binary bot is retiring on 31 August 2024')}
+                        </div>
                         <div className={`${container_class}__content`}>
-                            <p>{translate('Binary bot will be discontinued soon.')}</p>
                             <p>
                                 {translate(
-                                    'Import your existing strategies (XML files) to Deriv Bot today and enjoy a faster, more efficient trading experience with advanced features.'
+                                    'Follow these steps to keep trading with your favourite strategies on Deriv Bot:'
                                 )}
                             </p>
+                            <ol className={`${container_class}__orderd-list`}>
+                                <li>{translate('Download your Binary Bot strategy in XML format.')}</li>
+                                <li>{translate('Switch to Deriv Bot and import your strategy.')}</li>
+                                <li>{translate('Run your updated strategy to check its performance.')}</li>
+                                <li>{translate('Save the updated strategy for quicker re-imports.')}</li>
+                            </ol>
+                            <p>{translate('Upgrade today and experience seamless trading on Deriv Bot.')}</p>
                         </div>
                     </div>
                 </DerivAppModal>

diff --git a/src/components/Banner/move-to-dbot-banner.scss b/src/components/Banner/move-to-dbot-banner.scss
@@ -44,4 +44,9 @@
         justify-content: center;
         margin-bottom: 16px;
     }
+
+    &__orderd-list {
+        margin: 0;
+        padding: 0 16px;
+    }
 }