Al-amin/31691/Change_of_social_icon_links_in_the_footer_for_uk_and_eu

src/javascript/app/common/content_visibility.js

@@ -1,8 +1,10 @@
-const Client           = require('../base/client');
+const isEuCountry      = require('./country_base').isEuCountry;
+const isUKCountry      = require('./country_base').isUKCountry;
 const BinarySocket     = require('../base/socket');
 const MetaTrader       = require('../pages/user/metatrader/metatrader');
 const State            = require('../../_common/storage').State;
 const updateTabDisplay = require('../../_common/tab_selector').updateTabDisplay;
+const Client = require('../base/client');
 
 /*
     data-show attribute controls element visibility based on
@@ -47,6 +49,7 @@ const updateTabDisplay = require('../../_common/tab_selector').updateTabDisplay;
 const visible_classname    = 'data-show-visible';
 const mt_company_rule      = 'mtcompany';
 const eu_country_rule      = 'eucountry';
+const uk_country_rule      = 'gbcountry';
 const options_blocked_rule = 'optionsblocked';
 
 const ContentVisibility = (() => {
@@ -113,19 +116,6 @@ const ContentVisibility = (() => {
         };
     };
 
-    const isEuCountry = () => {
-        const eu_shortcode_regex  = new RegExp('^(maltainvest|malta|iom)$');
-        const eu_excluded_regex   = new RegExp('^mt$');
-        const financial_shortcode = State.getResponse('landing_company.financial_company.shortcode');
-        const gaming_shortcode    = State.getResponse('landing_company.gaming_company.shortcode');
-        const clients_country     = Client.get('residence') || State.getResponse('website_status.clients_country');
-        return (
-            (financial_shortcode || gaming_shortcode) ?
-                (eu_shortcode_regex.test(financial_shortcode) || eu_shortcode_regex.test(gaming_shortcode)) :
-                eu_excluded_regex.test(clients_country)
-        );
-    };
-
     const isMT5FinRule = (rule) => /^mt5fin:/.test(rule);
 
     const parseMT5FinRule = (rule) => rule.match(/^mt5fin:(.+)$/)[1];
@@ -144,15 +134,18 @@ const ContentVisibility = (() => {
         const rule_set = new Set(names);
 
         const is_eu_country           = isEuCountry();
+        const is_uk_country           = isUKCountry();
         const rule_set_has_current    = rule_set.has(current_landing_company_shortcode);
         const rule_set_has_mt         = rule_set.has(mt_company_rule);
         const rule_set_has_eu_country = rule_set.has(eu_country_rule);
+        const rule_set_has_uk_country = rule_set.has(uk_country_rule);
         const options_blocked         = rule_set.has(options_blocked_rule);
 
         let show_element = false;
 
         if (client_has_mt_company && rule_set_has_mt) show_element = !is_exclude;
         else if (is_exclude !== rule_set_has_current) show_element = true;
+        if (rule_set_has_uk_country && is_uk_country) show_element = !is_exclude;
         if (rule_set_has_eu_country && is_eu_country) show_element = !is_exclude;
         else if (is_eu_country && current_landing_company_shortcode === 'default') { // for logged out EU clients, check if IP landing company matches
             const financial_shortcode = State.getResponse('landing_company.financial_company.shortcode');

src/javascript/app/common/country_base.js

@@ -19,6 +19,7 @@ const isEuCountry = () => {
 };
 
 const isIndonesia = () => State.getResponse('website_status.clients_country') === 'id';
+const isUKCountry = () => State.getResponse('website_status.clients_country') === 'gb' || Client.get('residence') === 'gb';
 
 const isExcludedFromCfd = () => {
     const cfd_excluded_regex = new RegExp('^fr$');
@@ -30,4 +31,5 @@ module.exports = {
     isEuCountry,
     isIndonesia,
     isExcludedFromCfd,
+    isUKCountry,
 };

src/templates/_common/_layout/footer.jsx

@@ -8,8 +8,8 @@ const FooterColumn = ({ header, items }) => (
     </div>
 );
 
-const SocialIcons = ({ networks }) => (
-    <div id='social-icons' className='social-icons flex-row'>
+const SocialIcons = ({ networks, dataShow }) => (
+    <div id='social-icons' className='social-icons flex-row' data-show={dataShow}>
         { networks.map((net, idx) => (
             <a key={idx} href={net.href} target='_blank' rel='noopener noreferrer'>
                 <img src={it.url_for(`images/pages/footer/${net.media}.svg`)} />
@@ -132,12 +132,13 @@ const Footer = () => (
                                 </a>
                             </div>
                             <SocialIcons
+                                dataShow='-eucountry'
                                 networks={[
-                                    { media: 'youtube',     href: 'https://www.youtube.com/user/BinaryTradingVideos' },
-                                    { media: 'facebook',    href: 'https://www.facebook.com/derivdotcom' },
-                                    { media: 'twitter',     href: 'https://www.twitter.com/derivdotcom' },
-                                    { media: 'telegram',    href: 'https://t.me/binarydotcom' },
-                                    { media: 'reddit',      href: 'https://www.reddit.com/user/Deriv_official/' },
+                                    { media: 'youtube',   href: 'https://www.youtube.com/user/BinaryTradingVideos' },
+                                    { media: 'facebook',  href: 'https://www.facebook.com/derivdotcom' },
+                                    { media: 'twitter',   href: 'https://www.twitter.com/derivdotcom' },
+                                    { media: 'telegram',  href: 'https://t.me/binarydotcom' },
+                                    { media: 'reddit',    href: 'https://www.reddit.com/user/Deriv_official/' },
                                 ]}
                             />
                         </div>
@@ -185,12 +186,26 @@ const Footer = () => (
                                 </div>
                             </div>
                             <SocialIcons
+                                dataShow='gbcountry'
                                 networks={[
-                                    { media: 'youtube',     href: 'https://www.youtube.com/user/BinaryTradingVideos' },
-                                    { media: 'facebook',    href: 'https://www.facebook.com/derivdotcom' },
-                                    { media: 'twitter',     href: 'https://www.twitter.com/derivdotcom' },
-                                    { media: 'telegram',    href: 'https://t.me/binarydotcom' },
-                                    { media: 'reddit',      href: 'https://www.reddit.com/user/Deriv_official/' },
+                                    { media: 'youtube', href: 'https://www.youtube.com/user/BinaryTradingVideos' },
+                                    { media: 'facebook', href: 'https://www.facebook.com/derivUK/' },
+                                    { media: 'twitter', href: 'https://www.twitter.com/deriv_uk/' },
+                                    { media: 'instagram', href: 'https://www.instagram.com/deriv_uk/' },
+                                    { media: 'telegram', href: 'https://t.me/binarydotcom' },
+                                    { media: 'reddit', href: 'https://www.reddit.com/user/Deriv_official/' },
+                                ]}
+                            />
+
+                            <SocialIcons
+                                dataShow='-gbcountry'
+                                networks={[
+                                    { media: 'youtube', href: 'https://www.youtube.com/user/BinaryTradingVideos' },
+                                    { media: 'facebook', href: 'https://www.facebook.com/derivEU/' },
+                                    { media: 'twitter', href: 'https://www.twitter.com/deriv_eu/' },
+                                    { media: 'instagram', href: 'https://www.instagram.com/deriv_eu/' },
+                                    { media: 'telegram', href: 'https://t.me/binarydotcom' },
+                                    { media: 'reddit', href: 'https://www.reddit.com/user/Deriv_official/' },
                                 ]}
                             />
                         </div>