diff --git a/src/images/pages/warning_scam_message/ic-account-cross.svg b/src/images/pages/warning_scam_message/ic-account-cross.svg new file mode 100644 index 0000000000000..81fa18c776a0e --- /dev/null +++ b/src/images/pages/warning_scam_message/ic-account-cross.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/images/pages/warning_scam_message/ic-account-dont-get-scam.svg b/src/images/pages/warning_scam_message/ic-account-dont-get-scam.svg new file mode 100644 index 0000000000000..fea9213e32c2d --- /dev/null +++ b/src/images/pages/warning_scam_message/ic-account-dont-get-scam.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/images/pages/warning_scam_message/ic-account-tick.svg b/src/images/pages/warning_scam_message/ic-account-tick.svg new file mode 100644 index 0000000000000..8b79910ac316f --- /dev/null +++ b/src/images/pages/warning_scam_message/ic-account-tick.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/javascript/app/base/client.js b/src/javascript/app/base/client.js index d061e9de41e97..f7e5ed2df5a50 100644 --- a/src/javascript/app/base/client.js +++ b/src/javascript/app/base/client.js @@ -120,6 +120,9 @@ const Client = (() => { if (response.logout !== 1) return; removeCookies('login', 'loginid', 'loginid_list', 'email', 'residence', 'settings'); // backward compatibility removeCookies('reality_check', 'affiliate_token', 'affiliate_tracking', 'onfido_token', 'hide_guide'); + // clear local storage + localStorage.removeItem('read_scam_message'); + localStorage.removeItem('new_user_account'); // clear elev.io session storage sessionStorage.removeItem('_elevaddon-6app'); sessionStorage.removeItem('_elevaddon-6create'); diff --git a/src/javascript/app/base/page.js b/src/javascript/app/base/page.js index d9a9222d45984..98c46ffe50881 100644 --- a/src/javascript/app/base/page.js +++ b/src/javascript/app/base/page.js @@ -1,37 +1,38 @@ -const Cookies = require('js-cookie'); -const moment = require('moment'); -const Client = require('./client'); -const Contents = require('./contents'); -const Header = require('./header'); -const Footer = require('./footer'); -const Menu = require('./menu'); -const BinarySocket = require('./socket'); -const TrafficSource = require('../common/traffic_source'); -const RealityCheck = require('../pages/user/reality_check/reality_check'); -const Login = require('../../_common/base/login'); -const ClientBase = require('../../_common/base/client_base'); -const elementInnerHtml = require('../../_common/common_functions').elementInnerHtml; -const getElementById = require('../../_common/common_functions').getElementById; -const Crowdin = require('../../_common/crowdin'); -const GTM = require('../../_common/gtm'); -const Language = require('../../_common/language'); -const PushNotification = require('../../_common/lib/push_notification'); -const localize = require('../../_common/localize').localize; -const isMobile = require('../../_common/os_detect').isMobile; -const LocalStore = require('../../_common/storage').LocalStore; -const State = require('../../_common/storage').State; -const scrollToTop = require('../../_common/scroll').scrollToTop; -const toISOFormat = require('../../_common/string_util').toISOFormat; -const Url = require('../../_common/url'); -const createElement = require('../../_common/utility').createElement; -const isLoginPages = require('../../_common/utility').isLoginPages; -const isProduction = require('../../config').isProduction; -const ClosePopup = require('../common/game_close_popup'); -const EuClosePopup = require('../common/eu_close_popup'); -const EuCloseBanner = require('../common/eu_close_baner'); -const CloseBanner = require('../common/game_close_banner'); -const RedirectBanner = require('../common/redirect_banner'); -const DerivBanner = require('../common/deriv_banner'); +const Cookies = require('js-cookie'); +const moment = require('moment'); +const Client = require('./client'); +const Contents = require('./contents'); +const Header = require('./header'); +const Footer = require('./footer'); +const Menu = require('./menu'); +const BinarySocket = require('./socket'); +const TrafficSource = require('../common/traffic_source'); +const RealityCheck = require('../pages/user/reality_check/reality_check'); +const Login = require('../../_common/base/login'); +const ClientBase = require('../../_common/base/client_base'); +const elementInnerHtml = require('../../_common/common_functions').elementInnerHtml; +const getElementById = require('../../_common/common_functions').getElementById; +const Crowdin = require('../../_common/crowdin'); +const GTM = require('../../_common/gtm'); +const Language = require('../../_common/language'); +const PushNotification = require('../../_common/lib/push_notification'); +const localize = require('../../_common/localize').localize; +const isMobile = require('../../_common/os_detect').isMobile; +const LocalStore = require('../../_common/storage').LocalStore; +const State = require('../../_common/storage').State; +const scrollToTop = require('../../_common/scroll').scrollToTop; +const toISOFormat = require('../../_common/string_util').toISOFormat; +const Url = require('../../_common/url'); +const createElement = require('../../_common/utility').createElement; +const isLoginPages = require('../../_common/utility').isLoginPages; +const isProduction = require('../../config').isProduction; +const WarningScamMessage = require('../pages/user/warning_scam_message'); +const ClosePopup = require('../common/game_close_popup'); +const EuClosePopup = require('../common/eu_close_popup'); +const EuCloseBanner = require('../common/eu_close_baner'); +const CloseBanner = require('../common/game_close_banner'); +const RedirectBanner = require('../common/redirect_banner'); +const DerivBanner = require('../common/deriv_banner'); const { removeLoadingImage } = require('../../_common/utility'); require('../../_common/lib/polyfills/array.includes'); require('../../_common/lib/polyfills/string.includes'); @@ -128,6 +129,8 @@ const Page = (() => { }, 1000); RealityCheck.onLoad(); Menu.init(); + const is_brazil_client = State.getResponse('website_status.clients_country') === 'br'; + const read_scam_message = localStorage.getItem('read_scam_message') || false; const is_uk_residence = (Client.get('residence') === 'gb' || State.getResponse('website_status.clients_country') === 'gb'); const is_iom_client = (Client.get('residence') === 'im' || State.getResponse('website_status.clients_country') === 'im'); const is_be_client = (Client.get('residence') === 'be' || State.getResponse('website_status.clients_country') === 'be') && Client.hasAccountType('gaming'); @@ -135,6 +138,7 @@ const Page = (() => { const mlt_check = ClientBase.get('landing_company_shortcode') === 'malta'; const mf_check = ClientBase.get('landing_company_shortcode') === 'maltainvest'; const virtual_account = Client.get('landing_company_shortcode') === 'virtual'; + if (is_brazil_client && !read_scam_message) { WarningScamMessage.has_read_warning_scam_message(); } if (!is_iom_client || is_uk_residence && !Client.hasAccountType('gaming') || mf_check || mlt_check) RedirectBanner.loginOnLoad(); if (is_uk_residence && Client.hasAccountType('gaming')) { CloseBanner.onLoad(); diff --git a/src/javascript/app/pages/user/warning_scam_message.js b/src/javascript/app/pages/user/warning_scam_message.js new file mode 100644 index 0000000000000..c6df8dbde6b2c --- /dev/null +++ b/src/javascript/app/pages/user/warning_scam_message.js @@ -0,0 +1,50 @@ +const getElementById = require('../../../_common/common_functions').getElementById; +const BinarySocket = require('../../base/socket'); +const Client = require('../../base/client'); +const State = require('../../../_common/storage').State; + +const WarningScamMessage = (()=>{ + const urlParams = new URLSearchParams(window.location.search); + const actionParams = urlParams.get('action'); + let warning_scam_message, warning_scam_message_button, warning_scam_message_checkbox; + + if (actionParams === 'signup') { + localStorage.setItem('new_user_account', true); + } + + const has_read_warning_scam_message = () => { + BinarySocket.wait('authorize', 'website_status').then(()=> { + const is_logged_in = !!Client.isLoggedIn(); + const is_brazil = State.getResponse('website_status.clients_country') === 'br'; + const is_message_read = !!localStorage.getItem('read_scam_message'); + const is_new_account = !!localStorage.getItem('new_user_account'); + + if (is_logged_in && is_brazil && !is_message_read && !is_new_account) { + warning_scam_message = getElementById('warning_scam_message'); + warning_scam_message_checkbox = getElementById('warning_scam_message_checkbox'); + } + warning_scam_message.setVisibility(1); + warning_scam_message_checkbox.addEventListener('change', acknowledgeMessage); + }); + }; + + const acknowledgeMessage = () => { + warning_scam_message_button = getElementById('warning_scam_message_button'); + if (warning_scam_message_button.classList.contains('button-disabled')) { + warning_scam_message_button.classList.remove('button-disabled'); + } else { + warning_scam_message_button.classList.add('button-disabled'); + } + + warning_scam_message_button.addEventListener('click',closePopup); + }; + + const closePopup = () => { + localStorage.setItem('read_scam_message', true); + warning_scam_message.setVisibility(0); + }; + + return { has_read_warning_scam_message, acknowledgeMessage, closePopup }; +})(); + +module.exports = WarningScamMessage; diff --git a/src/sass/static/pages.scss b/src/sass/static/pages.scss index db705ca3c1bf2..2d01435a7d9e6 100644 --- a/src/sass/static/pages.scss +++ b/src/sass/static/pages.scss @@ -843,6 +843,124 @@ body #not_authenticated_financial ul.checked > li { } } +.lightbox .warning-scam-message-content { + padding: 25px; + padding-bottom: 20px; + + .warning-scam-message-title { + @media (min-width: 320px) and (max-width: 767px) { + font-size: 20px; + margin-bottom: 8px; + } + } + .warning-scam-message-subtitle { + @media (min-width: 320px) and (max-width: 767px) { + font-size: 14px; + } + } + .warning-scam-message-title-secondary { + color: $COLOR_BLACK; + @media (min-width: 320px) and (max-width: 767px) { + font-size: 18px; + margin-bottom: 8px; + } + } + .warning-scam-message-text-secondary { + font-size: 16px; + margin-bottom: 24px; + @media (min-width: 320px) and (max-width: 767px) { + font-size: 14px; + } + } + .warning-scam-message-info-message { + display: flex; + padding-left: 16px; + margin-bottom: 24px; + } + .warning-scam-message-content-info-message { + display: flex; + padding-left: 8px; + margin-bottom: 24px; + } + .warning-scam-message-scam-title-text { + font-weight: 300; + margin-bottom: 0; + color: $COLOR_BLACK; + @media (min-width: 320px) and (max-width: 767px) { + font-size: 16px; + } + } + .warning-scam-message-correct-content { + display: flex; + border: solid $COLOR_GREEN; + border-radius: 4px; + padding: 16px 8px; + margin-bottom: 24px; + flex-direction: column; + justify-content: center; + @media (min-width: 320px) and (max-width: 767px) { + padding: 22px 8px; + } + } + .warning-scam-message-wrong-content { + display: flex; + border: solid $COLOR_RED; + border-radius: 4px; + padding: 16px 8px; + margin-bottom: 24px; + flex-direction: column; + justify-content: center; + @media (min-width: 320px) and (max-width: 767px) { + padding: 22px 8px; + } + } + .warning-scam-message-link-container { + display: flex; + margin-left: 24px; + border-radius: 4px; + border: solid $COLOR_GRAY_SHADE; + background-color: $COLOR_LIGHT_GRAY; + justify-content: center; + align-items: center; + } + .warning-scam-message-link { + margin: 8px 0; + @media (min-width: 320px) and (max-width: 767px) { + font-size: 16px; + } + } + .warning-scam-message-checkbox-container { + display: flex; + } + .warning-scam-message-button-icon-container { + padding: 24px; + display: flex; + justify-content: space-between; + @media (min-width: 320px) and (max-width: 767px) { + padding-top: 40px; + flex-direction: column-reverse; + align-items: center; + justify-content: center; + } + } + #warning_scam_message_button { + margin-bottom: 0; + @media (min-width: 320px) and (max-width: 767px) { + margin-bottom: 24px; + } + } + .warning-scam-message-acknowledge-message { + @media (min-width: 320px) and (max-width: 767px) { + font-size: 14px; + } + } + .icon-sm { + height: 16px; + width: 16px; + margin: 3px 8px 0 0; + } +} + .lightbox #set_currency { padding: 25px; padding-bottom: 20px; diff --git a/src/templates/_common/_layout/layout.jsx b/src/templates/_common/_layout/layout.jsx index 1f6ef4aa3001c..56af2f8e95555 100644 --- a/src/templates/_common/_layout/layout.jsx +++ b/src/templates/_common/_layout/layout.jsx @@ -13,6 +13,7 @@ import GameCloseBanner from '../components/game_close_banner.jsx'; import GameCloseBannerIom from '../components/game_close_banner_iom.jsx'; import EuCloseBanner from '../components/eu_close_banner.jsx'; import EuClosePopup from '../components/eu_close_popup.jsx'; +import WarningScamMessage from '../../app/user/warning_scam_message.jsx'; import RedirectBanner from '../components/EU_UK_redirect_banner.jsx'; export const CONTENT_PLACEHOLDER = 'CONTENT_PLACEHOLDER'; @@ -71,6 +72,7 @@ const Layout = () => { + ); diff --git a/src/templates/app/user/warning_scam_message.jsx b/src/templates/app/user/warning_scam_message.jsx new file mode 100644 index 0000000000000..c959cf4290122 --- /dev/null +++ b/src/templates/app/user/warning_scam_message.jsx @@ -0,0 +1,50 @@ +import React from 'react'; + +const WarningScamMessage = () => ( + +
+
+

{it.L('Beware of the fake links.')}

+

{it.L('A link can contain the word "Binary" and still be fake.')}

+

{it.L('Do not get lured to fake "Binary" pages!')}

+

{it.L('You may see links to websites with a fake Binary login page where you’ll get scammed for your money. ')}

+
+ +

{it.L('Do not trust and give away your credentials on fake websites, ads or emails.')}

+
+
+
+ +

+ {it.L('Only log in to your account at this secure link, never elsewhere.')} +

+
+
+

https://binary.com

+
+
+
+
+ +

+ {it.L('Fake links often contain the word that looks like "Binary" but look out for these differences.')} +

+
+
+

{it.L('Examples')}: https://binakyos.me

+
+
+
+ + +
+
+ + +
+
+
+ +); + +export default WarningScamMessage;