Skip to content
This repository was archived by the owner on Feb 22, 2024. It is now read-only.

Commit c120b5e

Browse files
pavel-latyshou-deriv“pavel-latyshou-deriv”virtualpowwa
authored
pavel-latyshou/DEL/ MLT - Banner and Pop-Up for Binary to inform clients about the closure of business (#6952)
* done: popup and banner * lint fix * replace gaming to options * fix moblie design * text correction * add margin to banner on 360px * add border radius * lint fix * fix dissaper when switching between accs * add belg check * merge conf * fix popup eu showing * gaming account check fix * lint fix * geming acc check for poup * mobile title focus * belgimun gaming and austria gaming acc check * modile popup fix * lint fix Co-authored-by: “pavel-latyshou-deriv” <“pavel.latyshou@regentmarkets.com”> Co-authored-by: Kevin <70131533+kevinw-binary@users.noreply.github.com>
1 parent 13323ae commit c120b5e

File tree

9 files changed

+258
-13
lines changed

9 files changed

+258
-13
lines changed

‎src/javascript/app/base/page.js‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,9 @@ const createElement = require('../../_common/utility').createElement;
2828
const isLoginPages = require('../../_common/utility').isLoginPages;
2929
const isProduction = require('../../config').isProduction;
3030
const ClosePopup = require('../common/game_close_popup');
31-
const CloseBanner = require('../common/game_close_banner');
31+
const EuClosePopup = require('../common/eu_close_popup');
32+
const EuCloseBanner = require('../common/eu_close_baner');
33+
const CloseBanner = require('../common/game_close_banner');
3234
const RedirectBanner = require('../common/redirect_banner');
3335
const DerivBanner = require('../common/deriv_banner');
3436
require('../../_common/lib/polyfills/array.includes');
@@ -127,16 +129,23 @@ const Page = (() => {
127129
BinarySocket.wait('authorize', 'website_status', 'get_account_status').then(() => {
128130
RealityCheck.onLoad();
129131
RedirectBanner.loginOnLoad();
130-
131132
Menu.init();
132133
const is_uk_residence = (Client.get('residence') === 'gb' || State.getResponse('website_status.clients_country') === 'gb');
133134
const is_iom_client = (Client.get('residence') === 'im' || State.getResponse('website_status.clients_country') === 'im');
135+
const is_be_client = (Client.get('residence') === 'be' || State.getResponse('website_status.clients_country') === 'be') && Client.hasAccountType('gaming');
136+
const is_at_client = (Client.get('residence') === 'at' || State.getResponse('website_status.clients_country') === 'at') && Client.hasAccountType('gaming');
137+
const mlt_check = ClientBase.get('landing_company_shortcode') === 'malta';
138+
const mf_check = ClientBase.get('landing_company_shortcode') === 'maltainvest';
134139
if (is_uk_residence && Client.hasAccountType('gaming')) {
140+
CloseBanner.onLoad();
135141
ClosePopup.loginOnLoad();
136142
CloseBanner.onLoad();
137143
} else if (is_iom_client && Client.hasAccountType('gaming')) {
138-
ClosePopup.loginOnLoad();
139144
CloseBanner.onLoad();
145+
ClosePopup.loginOnLoad();
146+
} else if (mlt_check && !mf_check || is_be_client && !mf_check || is_at_client && !mf_check) {
147+
EuClosePopup.loginOnLoad();
148+
EuCloseBanner.onLoad();
140149
} else {
141150
DerivBanner.loginOnLoad();
142151
}

‎src/javascript/app/common/eu_close_baner.js‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
const getElementById = require('../../_common/common_functions').getElementById;
2+
const BinarySocket = require('../base/socket');
3+
const Client = require('../base/client');
4+
const State = require('../../_common/storage').State;
5+
const isEuCountry = require('../common/country_base').isEuCountry;
6+
7+
const EuCloseBanner = (() => {
8+
let el_close_banner_container, el_gaming_popup, el_learn_more;
9+
const onLoad = () => {
10+
BinarySocket.wait('authorize', 'website_status', 'landing_company').then(() => {
11+
const is_be_client = (Client.get('residence') === 'be' || State.getResponse('website_status.clients_country') === 'be');
12+
if (isEuCountry() || (is_be_client && Client.hasAccountType('gaming'))) {
13+
el_gaming_popup = getElementById('eu-close-popup');
14+
el_close_banner_container = getElementById('eu_close_banner_container');
15+
el_close_banner_container.setVisibility(1);
16+
el_learn_more = getElementById('eu_close_banner_btn');
17+
}
18+
el_learn_more.addEventListener('click', onShowPopup);
19+
});
20+
21+
};
22+
23+
const onShowPopup = () => {
24+
el_gaming_popup.setVisibility(1);
25+
const el_top_bar = getElementById('topbar');
26+
const top_popup = getElementById('top_popup');
27+
el_top_bar.style.zIndex = 0;
28+
document.body.style.overflow = 'hidden';
29+
top_popup.scrollLeft = 0;
30+
top_popup.scrollTop = 0;
31+
};
32+
33+
return { onLoad, onShowPopup };
34+
35+
})();
36+
37+
module.exports = EuCloseBanner;

‎src/javascript/app/common/eu_close_popup.js‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
const getElementById = require('../../_common/common_functions').getElementById;
2+
3+
const EuClosePopup = (() => {
4+
let el_gaming_popup, el_accept_btn;
5+
6+
// const onLoad = () => {
7+
// el_gaming_popup = getElementById('eu-close-popup');
8+
// el_accept_btn = getElementById('accept-btn');
9+
// el_gaming_popup.setVisibility(0);
10+
// el_accept_btn.addEventListener('click', onClosePopup);
11+
// };
12+
const loginOnLoad = () => {
13+
el_gaming_popup = getElementById('eu-close-popup');
14+
el_accept_btn = getElementById('eu-accept-btn');
15+
el_gaming_popup.setVisibility(1);
16+
el_accept_btn.addEventListener('click', onClosePopup);
17+
};
18+
19+
const onClosePopup = () => {
20+
el_gaming_popup.setVisibility(0);
21+
const el_top_bar = getElementById('topbar');
22+
el_top_bar.style.zIndex = 4;
23+
document.body.style.overflow = 'auto';
24+
};
25+
26+
return { loginOnLoad, onClosePopup };
27+
})();
28+
29+
module.exports = EuClosePopup;

‎src/javascript/app/common/game_close_banner.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,13 +18,14 @@ const CloseBanner = (() => {
1818
el_close_banner_container = getElementById('close_banner_container');
1919
el_close_banner_container.setVisibility(1);
2020
el_learn_more = getElementById('close_banner_btn');
21+
el_learn_more.addEventListener('click', onShowPopup);
2122
} else if (is_iom_client && !client_account) {
2223
el_gaming_popup = getElementById('gaming-close-popup-iom');
2324
el_close_banner_container = getElementById('close_banner_container_iom');
2425
el_close_banner_container.setVisibility(1);
2526
el_learn_more = getElementById('close_banner_btn_iom');
27+
el_learn_more.addEventListener('click', onShowPopup);
2628
}
27-
el_learn_more.addEventListener('click', onShowPopup);
2829
});
2930

3031
};

‎src/javascript/app/pages/trade/tradepage.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,6 @@ const State = require('../../../_common/storage').State;
2121
const TradePage = (() => {
2222
let events_initialized = 0;
2323
State.remove('is_trading');
24-
2524
const onLoad = () => {
2625
BinarySocket.wait('authorize', 'website_status', 'landing_company').then(() => {
2726
const is_uk_residence = (Client.get('residence') === 'gb' || State.getResponse('website_status.clients_country') === 'gb');

‎src/sass/_common/components.scss‎

Lines changed: 114 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -530,6 +530,118 @@
530530
}
531531
}
532532

533+
#eu_close_banner_container {
534+
display: flex;
535+
justify-content: space-between;
536+
position: relative;
537+
background-color: rgb(242, 242, 242);
538+
margin-bottom: 30px;
539+
border-radius: 5px;
540+
padding-right: 0;
541+
padding-left: 0;
542+
margin-top: 30px;
543+
544+
.close_banner_img {
545+
display: flex;
546+
max-height: 100px;
547+
max-width: 238px;
548+
width: 100%;
549+
height: 100%;
550+
}
551+
h3 {
552+
line-height: 1 !important;
553+
}
554+
.close_banner {
555+
556+
position: relative;
557+
558+
&_text {
559+
display: flex;
560+
justify-content: center;
561+
gap: 10px;
562+
563+
&_wrapper {
564+
display: flex;
565+
flex-direction: column;
566+
justify-content: center;
567+
}
568+
h3 {
569+
flex: none;
570+
font-size: 16px;
571+
margin-top: 8px;
572+
margin-bottom: 8px;
573+
font-weight: 700;
574+
line-height: 1;
575+
// margin: 0 64px 0 0;
576+
color: rgb(0, 0, 0);
577+
}
578+
p {
579+
margin-top: 8px;
580+
margin-bottom: 8px;
581+
font-size: 16px;
582+
font-weight: normal;
583+
color: rgb(0, 0, 0);
584+
585+
}
586+
}
587+
&_btn {
588+
cursor: pointer;
589+
display: flex;
590+
align-items: center;
591+
justify-content: center;
592+
align-self: center;
593+
margin: 0 40px;
594+
padding: 0 16px;
595+
height: 32px;
596+
line-height: 32px;
597+
color: $COLOR_WHITE;
598+
border-radius: 4px;
599+
background-color: $COLOR_GREEN;
600+
font-size: 1rem;
601+
font-weight: normal;
602+
}
603+
&_btn p {
604+
min-width: 100px;
605+
display: flex;
606+
align-items: center;
607+
justify-content: center;
608+
}
609+
610+
}
611+
}
612+
@media (min-width: 703px) {
613+
#eu_close_banner_container .close_banner_text p {
614+
width: 110%;
615+
}
616+
}
617+
618+
@media (max-width: 506px) {
619+
#eu_close_banner_container .close_banner_text_wrapper {
620+
padding: 7px 0px 7px 8px;
621+
width: 240px !important;
622+
background-image: url('../../images/close-banner/orange-bg.png');
623+
background-repeat: no-repeat;
624+
background-size: 99% 100%;
625+
}
626+
}
627+
628+
@media (max-width: 360px) {
629+
#eu_close_banner_container {
630+
justify-content: unset;
631+
margin-left: 10px;
632+
margin-right: 10px;
633+
634+
}
635+
#eu_close_banner_container .close_banner_btn {
636+
position: absolute;
637+
left: 235px;
638+
margin: 10px !important;
639+
width: 60px;
640+
font-size: 1rem !important;
641+
margin-left: 8px !important;
642+
}
643+
}
644+
533645
.banner_container {
534646
margin: 0 auto;
535647
display: flex;
@@ -783,12 +895,6 @@
783895
display: none !important;
784896
}
785897
}
786-
// @media (max-width: 700px) {
787-
// .close_banner_text_wrapper {
788-
// padding-left: 20px;
789-
// width: 300px !important;
790-
// }
791-
// }
792898
@media (max-width: 700px) {
793899
.close_banner_text_wrapper {
794900
border-radius: 8px 0px 0px 8px !important;
@@ -808,7 +914,7 @@
808914
.close_banner_text_wrapper {
809915
// height: 70px;
810916
padding-left: 20px;
811-
width: 300px !important;
917+
width: 330px !important;
812918
background-image: url('../../images/close-banner/orange-bg.png');
813919
background-repeat: no-repeat;
814920
background-size: cover;
@@ -824,7 +930,7 @@
824930
}
825931
.close_banner_text_wrapper {
826932
padding: 15px 0px 15px 8px;
827-
width: 235px !important;
933+
width: 240px !important;
828934
background-image: url('../../images/close-banner/orange-bg.png');
829935
background-repeat: no-repeat;
830936
background-size: 99% 100%;

‎src/templates/_common/_layout/layout.jsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,8 @@ import GamingClosePopupIom from '../components/gaming_close_popup_iom.jsx';
1111
import GamingClosePopup from '../components/gaming_close_popup.jsx';
1212
import GameCloseBanner from '../components/game_close_banner.jsx';
1313
import GameCloseBannerIom from '../components/game_close_banner_iom.jsx';
14+
import EuCloseBanner from '../components/eu_close_banner.jsx';
15+
import EuClosePopup from '../components/eu_close_popup.jsx';
1416
import RedirectBanner from '../components/EU_UK_redirect_banner.jsx';
1517

1618
export const CONTENT_PLACEHOLDER = 'CONTENT_PLACEHOLDER';
@@ -56,6 +58,8 @@ const Layout = () => {
5658
<a href='javascript:;' id='scrollup' />
5759
<GameCloseBanner />
5860
<GameCloseBannerIom />
61+
<EuCloseBanner />
62+
<EuClosePopup />
5963
<RedirectBanner />
6064
<InnerContent />
6165
</div>

‎src/templates/_common/components/eu_close_banner.jsx‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
4+
const EuCloseBanner = ({ has_margin }) => (
5+
<div
6+
id='eu_close_banner_container'
7+
className={`container invisible ${has_margin ? 'has_margin' : ''}`}
8+
>
9+
<div className='close_banner_text'>
10+
<img
11+
src={it.url_for('images/close-banner/icon_left.png')}
12+
className='close_banner_img'
13+
/>
14+
<div className='close_banner_text_wrapper'>
15+
<h3>Your Options Account is scheduled to be closed</h3>
16+
<p>Withdraw all funds from your Options Account.</p>
17+
</div>
18+
</div>
19+
<div id='eu_close_banner_btn' className='close_banner_btn'><p>{it.L('Learn more')}</p></div>
20+
</div>
21+
);
22+
23+
EuCloseBanner.propTypes = {
24+
has_margin: PropTypes.bool,
25+
};
26+
27+
export default EuCloseBanner;

‎src/templates/_common/components/eu_close_popup.jsx‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import React from 'react';
2+
3+
const EuClosePopup = () => (
4+
<div id='eu-close-popup' className='invisible gaming-close-popup'>
5+
<div id='top_popup' className='popup-content'>
6+
<div className='pop-up-header' onFocus={true}>
7+
<h3>Your Options Account is scheduled to be closed</h3>
8+
<p className='subtitle'>
9+
As part of the changes in our product line-up,
10+
we are closing Options Accounts belonging to our clients in Europe.
11+
</p>
12+
<div className='deriv_banner_close' />
13+
</div>
14+
<div className='popup-content-body'>
15+
<strong>What this means for you</strong>
16+
<p>
17+
You are no longer able to trade options on any of our platforms.
18+
Also, you can’t make deposits into your Options Account.
19+
</p>
20+
<strong>Withdrawal all your funds</strong>
21+
<p>You will lose access to your Options Account when it gets closed,
22+
so be sure to withdraw all your funds. (If you have a CFDs Account,
23+
you can also transfer the funds from your Options Account to your CFDs Account.)
24+
</p>
25+
</div>
26+
<footer>
27+
<button id='eu-accept-btn' className='accept-btn'>OK, I understand</button>
28+
</footer>
29+
</div>
30+
</div>
31+
);
32+
33+
export default EuClosePopup;

0 commit comments

Comments
 (0)