Skip to content
This repository has been archived by the owner on Sep 12, 2024. It is now read-only.

Commit

Permalink
Merge pull request #464 from vinu-deriv/Vinu/bot-1814/dbot-migration-…
Browse files Browse the repository at this point in the history 
…message

[Bot]feat: updated the content and duration of deriv bot migration banner
  • Loading branch information
@farabi-deriv
farabi-deriv authored Jun 27, 2024
2 parents b698352 + cba6da1 commit 265d051
Show file tree
Hide file tree
Showing 8 changed files with 83 additions and 208 deletions.
3 changes: 3 additions & 0 deletions public/images/ic-megaphone.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
153 changes: 0 additions & 153 deletions public/images/move-to-deriv.svg
View file

This file was deleted.

31 changes: 31 additions & 0 deletions public/images/upgrade-to-deriv-bot.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
11 changes: 7 additions & 4 deletions src/components/Banner/fixed-dbot-banner.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,16 @@ import './fixed-dbot-banner.scss';
const FixedDbotBanner = () => (
<div className='fixed-banner__container'>
<div className='fixed-banner__content'>
<div className='fixed-banner__icon-info icon-info'></div>
<img className='fixed-banner__icon' alt='move to deriv' src='/public/images/ic-megaphone.svg' />
<div>
<span>{translate('For improved features and an overall better performance, ')}</span>
<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('switch to Deriv Bot')}
{translate('Upgrade to Deriv Bot')}
</a>
<span>{translate(' now.')}</span>
<span>{translate(' to continue trading.')}</span>
</div>
</div>
</div>
Expand Down
6 changes: 2 additions & 4 deletions src/components/Banner/fixed-dbot-banner.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
justify-content: center;
background-color: #ffeabf;
height: 56px;

font-size: var(--font-size-s);
@include mobile {
height: unset;
}
Expand Down Expand Up @@ -37,10 +37,8 @@
}
}

&__icon-info {
&__icon {
margin-right: 0.5rem;
font-size: 1.4rem;
transform: rotate(180deg);
}
}

Expand Down
41 changes: 11 additions & 30 deletions src/components/Banner/move-to-dbot-banner.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ const shouldShowPopup = () => {
return true;
}

const allowed_delay = 7; // One week in days
const allowed_delay = 1; // One week in days
const last_popup_date = new Date(last_deriv_redirect_popup_time);
const current_date = new Date();

Expand Down Expand Up @@ -60,45 +60,26 @@ const MoveToDbotBanner = () => {
<div>
{open_modal && (
<DerivAppModal
title={translate('Discover Deriv Bot')}
title={translate('Important notice')}
close_on_outside_click={false}
primary_button={{
title: translate('Explore Deriv Bot'),
title: translate('Upgrade to Deriv Bot'),
onClick: visitDerivBot,
}}
secondary_button={{
title: translate('No, thanks'),
onClick: closeModal,
}}
onClose={closeModal}
>
<div className={container_class}>
<div className={`${container_class}__icon-container`}>
<img alt='move to deriv' src='/public/images/move-to-deriv.svg' />
</div>
<div className={`${container_class}__title`}>
{translate('Take your bot trading to the next level')}
<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}__content`}>
<div>{translate('On Deriv Bot, you\'ll enjoy:')}</div>
<ul>
<li>
{translate('New features and tools with faster execution and enhanced stability')}
</li>
<li>{translate('The ability to use your existing XML files from Binary Bot')}</li>
<li>
{translate(
'A familiar drag-and-drop interface; create and customise your trading bot easily'
)}
</li>
</ul>
<div>
<span>{translate('What are you waiting for?')}</span>{' '}
<span>
<strong>{translate('Explore Deriv Bot')}</strong>
</span>{' '}
<span>{translate('today and unlock new trading possibilities!')}</span>
</div>
<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.'
)}
</p>
</div>
</div>
</DerivAppModal>
Expand Down
19 changes: 11 additions & 8 deletions src/components/Banner/move-to-dbot-banner.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,33 +12,36 @@

.mv-dbot-banner {
text-align: center;
padding: 32px 108px;
padding: 16px 24px;
width: 440px;
@include mobile {
padding: 28px;
padding: 16px;
width: 100%;
}

&__title {
font-size: var(--font-size-l);
font-size: 20px;
font-weight: bold;
margin-bottom: 16px;

@include mobile {
font-size: var(--font-size-n);
}
}

&__content {
margin-top: 8px;
font-size: var(--font-size-s);
line-height: 20px;
text-align: left;
ol,
ul {
list-style: disc;
p {
line-height: 20px;
padding: 0px 32px;
}
}
&__icon-container {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 24px;
margin-bottom: 16px;
}
}
27 changes: 18 additions & 9 deletions src/components/common/deriv-app-modal/deriv-app-modal.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,14 +56,16 @@
justify-content: center;
align-items: center;
color: var(--text-prominent);
padding: 24px;
padding: 20px 24px;
font-size: 1rem;
@include mobile {
padding: 16px 24px;
}

&:after {
content: '\00d7';
font-weight: 200;
font-size: 24px;
margin-top: -2px;
}
&:hover {
background: transparent;
Expand All @@ -72,10 +74,14 @@
}

&-title {
font-size: var(--font-size-l);
font-size: var(--font-size-n);
font-weight: bold;
margin: 0;
padding: 16px;
padding: 0 24px;
@include mobile {
padding: 0 16px;
font-size: var(--font-size-s);
}
}
}

Expand All @@ -96,9 +102,12 @@
display: flex;
justify-content: flex-end;
align-items: center;
padding: 8px 16px;
padding: 16px 24px;
border: none;
border-top: 1px solid var(--border-normal);
@include mobile {
padding: 16px;
}
&__btn-container {
@include mobile {
display: flex;
Expand All @@ -108,15 +117,15 @@
}
&__btn-container,
* {
margin: 4px;
font-weight: 600;
font-size: medium;
font-weight: 700;
font-size: var(--font-size-s);
text-transform: none;
line-height: 20px;
}
&-primary-btn {
background: var(--button-primary-default);
border: 2px solid var(--button-primary-default);
padding-inline: 18px;
padding: 8px 18px;
&:hover {
background: var(--button-primary-hover);
}
Expand Down

0 comments on commit 265d051

Please sign in to comment.