Pull request #709: AG-5127 prepare notification for black friday 2020

Merge in EXTENSIONS/browser-extension from feature/AG-5127 to master * commit '0bd0464ad2a4f28b87228b9be1fde8400ceb37e3': AG-5127 remove doublequote AG-5127 remove redundant empty lines AG-5127 remove todo comment AG-5127 add url from tds, remove todos AG-5127 remove new lines for update notification AG-5127 add line break AG-5127 fix notifications styles AG-5127 notification text style AG-5127 update scriptlets AG-5127 pass notification to the update notify AG-5127 popup layout for black friday AG-5127 display update popup on every load AG-5127 prepare notification for black friday 2020
AdguardTeam · Nov 18, 2020 · 223e8b8 · 223e8b8
2 parents c47d903 + 0bd0464
commit 223e8b8
Show file tree

Hide file tree

Showing 17 changed files with 119 additions and 110 deletions.
diff --git a/Extension/browser/chrome/icons/black-19-black-friday.png b/Extension/browser/chrome/icons/black-19-black-friday.png
diff --git a/Extension/browser/chrome/icons/black-38-black-friday.png b/Extension/browser/chrome/icons/black-38-black-friday.png
diff --git a/Extension/browser/chrome/icons/gray-19-halloween.png b/Extension/browser/chrome/icons/gray-19-halloween.png
diff --git a/Extension/browser/chrome/icons/gray-38-halloween.png b/Extension/browser/chrome/icons/gray-38-halloween.png
diff --git a/Extension/browser/chrome/icons/yellow-19-halloween.png b/Extension/browser/chrome/icons/yellow-19-halloween.png
diff --git a/Extension/browser/chrome/icons/yellow-38-halloween.png b/Extension/browser/chrome/icons/yellow-38-halloween.png
diff --git a/Extension/lib/content-script/content-utils.js b/Extension/lib/content-script/content-utils.js
@@ -183,14 +183,15 @@
     function showVersionUpdatedPopup(message) {
         const {
             title,
+            offer,
             description,
+            isAdguardTab,
             changelogHref,
             changelogText,
-            offer,
             offerButtonHref,
             offerButtonText,
+            showPromoNotification,
             disableNotificationText,
-            isAdguardTab,
         } = message;
 
         const updateIframeHtml = `<head></head>
@@ -212,10 +213,10 @@
                                         ${disableNotificationText}
                                     </a>
                                 </div>
-                                <div class="adguard-update-popup__offer">
+                                <div class="adguard-update-popup__offer${showPromoNotification ? ' adguard-update-popup__offer--promo' : ''}">
                                     ${offer}
                                 </div>
-                                <a href="${offerButtonHref}" class="adguard-update-popup__btn close-iframe" target="_blank">
+                                <a href="${offerButtonHref}" class="adguard-update-popup__btn close-iframe set-notification-viewed${showPromoNotification ? ' adguard-update-popup__btn--promo' : ''}" target="_blank">
                                     ${offerButtonText}
                                 </a>
                             </div>
@@ -237,6 +238,13 @@
                                 value: true,
                             });
                         }
+                        if (showPromoNotification
+                            && element.classList.contains('set-notification-viewed')) {
+                            contentPage.sendMessage({
+                                type: 'setNotificationViewed',
+                                withDelay: false,
+                            });
+                        }
                         // Remove iframe after click event fire on link
                         // NOTICE: if here is used value equal to 0,
                         // then iframe is closed early than link is clicked

diff --git a/Extension/lib/content-script/css/alert-popup.css b/Extension/lib/content-script/css/alert-popup.css
@@ -196,3 +196,27 @@
 .adguard-update-popup__btn:hover {
     background-color: rgba(0, 0, 0, 0.05);
 }
+
+.adguard-update-popup__offer--promo {
+    font-size: 20px;
+    line-height: 20px;
+    color: #2e2f30;
+    margin-bottom: 30px;
+}
+
+.adguard-update-popup__btn--promo {
+    border-radius: 4px;
+    color: #fff;
+    background-color: #000;
+    text-decoration: none;
+    font-size: 20px;
+    line-height: 32px;
+    min-width: 235px;
+    text-transform: uppercase;
+    -webkit-box-shadow: inset 0 0 0 1px rgba(151, 151, 151, 0.28);
+    box-shadow: inset 0 0 0 1px rgba(151, 151, 151, 0.28);
+}
+
+.adguard-update-popup__btn--promo:hover {
+    background-color: #000;
+}
diff --git a/Extension/lib/pages/popup-controller.js b/Extension/lib/pages/popup-controller.js
@@ -805,7 +805,7 @@ PopupController.prototype = {
             e.preventDefault();
             const { url } = self.options.notification;
             if (url) {
-                self.openLink(url);
+                self.openLink(`${url}&from=popup`);
                 popupPage.sendMessage({ type: 'setNotificationViewed', withDelay: false });
                 popupPage.closePopup();
             }

diff --git a/Extension/lib/ui-service.js b/Extension/lib/ui-service.js
@@ -400,19 +400,37 @@ adguard.ui = (function (adguard) { // jshint ignore:line
     function showVersionUpdatedPopup(currentVersion, previousVersion) {
         // Suppress for v3.0 hotfix
         // TODO: Remove this in the next update
-        if (adguard.utils.browser.getMajorVersionNumber(currentVersion) == adguard.utils.browser.getMajorVersionNumber(previousVersion)
+
+        const notification = adguard.notifications.getCurrentNotification();
+
+        if (!notification
+            && adguard.utils.browser.getMajorVersionNumber(currentVersion) == adguard.utils.browser.getMajorVersionNumber(previousVersion)
             && adguard.utils.browser.getMinorVersionNumber(currentVersion) == adguard.utils.browser.getMinorVersionNumber(previousVersion)) {
             return;
         }
+
+        let offer = adguard.i18n.getMessage('options_popup_version_update_offer');
+        let offerButtonHref = 'https://adguard.com/forward.html?action=learn_about_adguard&from=version_popup&app=browser_extension';
+        let offerButtonText = adguard.i18n.getMessage('options_popup_version_update_offer_button_text');
+
+        if (notification) {
+            // we replace \n because in update popup lines are displayed in one row,
+            // while on popup page in two or more
+            offer = notification.text.title.replace('\n', '');
+            offerButtonText = notification.text.btn.replace('\n', '');
+            offerButtonHref = `${notification.url}&from=version_popup`;
+        }
+
         const message = {
             type: 'show-version-updated-popup',
             title: adguard.i18n.getMessage('options_popup_version_update_title', currentVersion),
             description: getUpdateDescriptionMessage(currentVersion, previousVersion),
             changelogHref: 'https://adguard.com/forward.html?action=github_version_popup&from=version_popup&app=browser_extension',
             changelogText: adguard.i18n.getMessage('options_popup_version_update_changelog_text'),
-            offer: adguard.i18n.getMessage('options_popup_version_update_offer'),
-            offerButtonHref: 'https://adguard.com/forward.html?action=learn_about_adguard&from=version_popup&app=browser_extension',
-            offerButtonText: adguard.i18n.getMessage('options_popup_version_update_offer_button_text'),
+            showPromoNotification: !!notification,
+            offer,
+            offerButtonHref,
+            offerButtonText,
             disableNotificationText: adguard.i18n.getMessage('options_popup_version_update_disable_notification'),
         };
 

diff --git a/Extension/lib/utils/notifications.js b/Extension/lib/utils/notifications.js
@@ -25,51 +25,60 @@ adguard.notifications = (function (adguard) {
     const VIEWED_NOTIFICATIONS = 'viewed-notifications';
     const LAST_NOTIFICATION_TIME = 'viewed-notification-time';
 
-    const halloweenNotification = {
-        id: 'halloween2020',
+    const blackFridayNotification = {
+        id: 'blackFriday2020',
         locales: {
             en: {
-                btn: 'Get a treat',
-            },
-            de: {
-                btn: 'Angebot holen',
-            },
-            ko: {
-                btn: '더 읽기',
+                title: 'Black Friday at AdGuard',
+                btn: 'It\'s a big deal',
             },
             ru: {
-                btn: 'Кое-что для вас',
+                title: 'Скидки к Чёрной пятнице',
+                btn: 'Ого, для меня?',
+            },
+            de: {
+                title: 'Black Friday Deal',
+                btn: 'Zum Angebot',
             },
             ja: {
-                btn: '秘密の◯◯はこちら',
+                title: 'AdGuard BLACK FRIDAY',
+                btn: '最大割引を手に入れる',
+            },
+            ko: {
+                title: '블랙 \n프라이데이 \n세일',
+                btn: '최대 할인!',
             },
             zh_cn: {
-                btn: '万圣节的魔法',
+                title: '黑5 \n全球 \n狂欢',
+                btn: '疯狂购',
             },
             zh_tw: {
-                btn: '萬聖節的魔法',
+                title: '黑五 \n狂歡 \n購物節',
+                btn: '瘋狂大減價',
             },
             fr: {
-                btn: 'Prix promo',
+                title: 'Promo Black Friday',
+                btn: 'Ah, je veux voir !',
             },
             it: {
-                btn: 'Offerta speciale',
+                title: 'Sconti Black Friday',
+                btn: 'Vediamo un po\'',
             },
         },
         text: '',
-        url: 'https://adguard.com/forward.html?action=halloween2020_notify&from=popup&app=browser_extension',
-        from: '30 October 2020 00:00:01',
-        to: '3 November 2020 23:59:00',
+        url: 'https://adguard.com/forward.html?action=bf2020_notify&app=browser_extension',
+        from: '27 November 2020 12:00:01',
+        to: '1 December 2020 23:59:00',
         type: 'animated',
         get icons() {
-            return adguard.lazyGet(halloweenNotification, 'icons', () => ({
+            return adguard.lazyGet(blackFridayNotification, 'icons', () => ({
                 ICON_GREEN: {
-                    '19': adguard.getURL('icons/yellow-19-halloween.png'),
-                    '38': adguard.getURL('icons/yellow-38-halloween.png'),
+                    '19': adguard.getURL('icons/black-19-black-friday.png'),
+                    '38': adguard.getURL('icons/black-38-black-friday.png'),
                 },
                 ICON_GRAY: {
-                    '19': adguard.getURL('icons/gray-19-halloween.png'),
-                    '38': adguard.getURL('icons/gray-38-halloween.png'),
+                    '19': adguard.getURL('icons/gray-19.png'),
+                    '38': adguard.getURL('icons/gray-38.png'),
                 },
             }));
         },
@@ -91,7 +100,7 @@ adguard.notifications = (function (adguard) {
      * @property {string} type;
      */
     const notifications = {
-        halloween2020: halloweenNotification,
+        blackFriday2020: blackFridayNotification,
     };
 
     /**

diff --git a/Extension/pages/css/popup.css b/Extension/pages/css/popup.css
@@ -829,35 +829,39 @@ img .footer .platforms:first-child {
 
 .holiday-notify__close {
   top: 5px;
-  right: 5px;
+  right: 2px;
   position: absolute;
   z-index: 2;
-  width: 15px;
-  height: 15px;
+  width: 24px;
+  height: 24px;
   background-repeat: no-repeat;
-  background-position: 50%;
-  background-size: 15px;
-  background-image: url(../images/cross.svg);
+  background-size: cover;
+  background-image: url(../images/double-cross.svg);
   cursor: pointer;
 }
 
+.holiday-notify__close:before {
+  color: #13fc85;
+}
+
 .holiday-notify__content {
   width: 100%;
-  height: 138px;
+  height: 75px;
   font-weight: bold;
   position: relative;
   overflow: hidden;
   background-size: cover;
-  background-position: -22px;
-  background-image: url(../images/halloween2020-bg.svg);
+  background-image: url(../images/black-friday-bg.svg);
 }
 
 .holiday-notify__title {
-  display: none;
-  font-size: 24px;
-  line-height: 26px;
+  max-width: 110px;
+  padding-top: 14px;
+  padding-left: 22px;
+  font-size: 18px;
+  line-height: 18px;
   color: #fff;
-  margin-bottom: 25px;
+  font-weight: bold;
 }
 
 .holiday-notify__desc {
@@ -869,39 +873,18 @@ img .footer .platforms:first-child {
 
 .holiday-notify__btn {
   position: absolute;
-  bottom: 24px;
-  left: 16px;
+  bottom: 15px;
+  right: 34px;
+  width: 157px;
   display: inline-block;
   text-align: center;
-  padding: 11px 8px 10px 42px;
   line-height: 20px;
-  font-size: 16px;
+  padding: 8px 0;
+  font-size: 13px;
   border: 0;
   cursor: pointer;
-  border-radius: 23px;
-  background: #de6800;
-  color: #fff;
+  color: #000000;
   font-weight: bold;
-}
-
-.holiday-notify__btn:before {
-  content: '';
-  width: 10px;
-  height: 11px;
-  position: absolute;
-  top: -8px;
-  left: 17px;
-  background-repeat: no-repeat;
-  background-image: url(../images/pumpkin_tail.svg);
-}
-
-.holiday-notify__btn:after {
-  content: '';
-  width: 27px;
-  height: 18px;
-  position: absolute;
-  top: 10px;
-  left: 9px;
-  background-repeat: no-repeat;
-  background-image: url(../images/pumpkin_face.svg);
+  text-transform: uppercase;
+  background-color: transparent;
 }
diff --git a/Extension/pages/images/black-friday-bg.svg b/Extension/pages/images/black-friday-bg.svg
diff --git a/Extension/pages/images/double-cross.svg b/Extension/pages/images/double-cross.svg