add halloween23 promo. AG-26741

Squashed commit of the following:

commit ec86e04
Merge: 7fe9bfc 96e7cd5
Author: Slava Leleka <[email protected]>
Date:   Wed Oct 18 16:19:18 2023 +0300

    Merge branch 'master' into feature/AG-26741

commit 7fe9bfc
Author: Slava Leleka <[email protected]>
Date:   Wed Oct 18 14:35:27 2023 +0300

    fix setNotificationViewed if withDelay is set

commit f243127
Author: Slava Leleka <[email protected]>
Date:   Tue Oct 17 19:52:15 2023 +0300

    fix constants

commit c653378
Author: Slava Leleka <[email protected]>
Date:   Tue Oct 17 19:46:31 2023 +0300

    add halloween promo

Author: slavaleleka

src/assets/images/back-to-school-2023.svg

@@ -38,10 +38,18 @@ export interface PromoNotificationData {
     }
 }
 
+const CHECK_TIMEOUT_MS = 10 * 60 * 1000; // 10 minutes
+
+const MIN_PERIOD_MS = 30 * 60 * 1000; // 30 minutes
+
+const NOTIFICATION_DELAY_MS = 30 * 1000; // clear notification in 30 seconds
+
 const VIEWED_NOTIFICATIONS = 'viewed-notifications';
 const LAST_NOTIFICATION_TIME = 'viewed-notification-time';
 
-const PROMO_LINK = `https://${FORWARDER_DOMAIN}/forward.html?action=back_to_school_23_vpn&from=popup&app=vpn_extension`;
+const TDS_PROMO_ACTION = 'halloween_23_vpn';
+
+const PROMO_LINK = `https://${FORWARDER_DOMAIN}/forward.html?action=${TDS_PROMO_ACTION}&from=popup&app=vpn_extension`;
 
 const normalizeLanguage = (locale: string): string | null => {
     if (!locale) {
@@ -51,185 +59,199 @@ const normalizeLanguage = (locale: string): string | null => {
     return locale.toLowerCase().replace('-', '_');
 };
 
-const backToSchoolPromo23Notification = {
-    id: 'backToSchool23',
+const HALLOWEEN_23_ID = 'halloween23';
+
+const halloween23PromoNotification = {
+    id: HALLOWEEN_23_ID,
     locales: {
         en: {
-            title: 'Back to school: Quiz and prize',
-            btn: 'Test yourself',
+            title: 'Fact or fiction?',
+            btn: 'Investigate',
         },
         ru: {
-            title: 'Снова в школу: квиз и приз',
-            btn: 'Пройти',
+            title: 'Верю не верю',
+            btn: 'Давайте проверим',
         },
         es: {
-            title: 'Vuelta al cole: quiz y recompensa',
-            btn: 'Hacer el quiz',
+            title: '¿Realidad o ficción?',
+            btn: '¡Adivinar!',
         },
         de: {
-            title: 'Back to School: Quiz und Preis',
-            btn: 'Quiz los',
+            title: 'Falsch oder wahr?',
+            btn: 'Kommen Sie klar',
         },
         fr: {
-            title: 'La rentrée avec AdGuard : Quiz et cadeaux',
-            btn: 'Passez le Quiz',
+            title: 'Fait ou fiction ?',
+            btn: 'Examinons',
         },
         it: {
-            title: 'A Scuola con AdGuard: un quiz e un regalo',
-            btn: 'Supera il Quiz',
+            title: 'Fatto o finzione?',
+            btn: 'Esaminiamo',
         },
         ko: {
-            title: '백 투 스쿨: 퀴즈 및 할인',
-            btn: '퀴즈게임 시작',
+            title: '사실일까, 괴담일까?',
+            btn: '퀴즈 시작',
         },
         ja: {
-            title: 'Back to School セールとクイズ',
-            btn: 'クイズに挑戦！',
+            title: '事実か怪談か？',
+            btn: 'クイズに挑戦する',
         },
         zh_cn: {
-            title: '开学特惠：小测验大惊喜',
-            btn: '测试自己',
+            title: '万圣节答题小游戏',
+            btn: '开始玩儿',
         },
         zh_tw: {
-            title: '開學特惠：小測驗大驚喜',
-            btn: '測試自己',
+            title: '萬聖節答題小遊戲',
+            btn: '開始玩',
         },
         uk: {
-            title: 'Знову до школи: іспит і приз',
-            btn: 'Скласти',
+            title: 'Факт чи вигадка?',
+            btn: 'Вгадай!',
         },
         pt_br: {
-            title: 'Volta às aulas: quiz e prêmio',
-            btn: 'Fazer o quiz',
+            title: 'Realidade ou ficção?',
+            btn: 'Adivinhar',
         },
         pt_pt: {
-            title: 'Volta às aulas: quiz e prémio',
-            btn: 'Fazer o quiz',
+            title: 'Realidade ou ficção?',
+            btn: 'Adivinhar',
         },
         ar: {
-            title: 'العودة إلى المدرسة: مسابقة وجائزة',
-            btn: 'حل الاختبار',
+            title: 'حقيقة أم خيال؟',
+            btn: '!يخمن',
         },
         be: {
-            title: 'Зноў у школу: віктарына і прызы',
-            btn: 'Прайсці',
+            title: 'Факт ці выдумка?',
+            btn: 'Адгадайце!',
         },
         bg: {
-            title: 'Отново в училище: тест и награда',
-            btn: 'Преминете',
+            title: 'Факт или измислица?',
+            btn: 'Познайте!',
         },
         ca: {
-            title: "Tornada a l'escola: qüestionari i premi",
-            btn: 'Passar',
+            title: 'Realitat o ficció?',
+            btn: 'Endevina!',
         },
         cs: {
-            title: 'Zpátky do školy: kvíz a cena',
-            btn: 'Projít',
+            title: 'Pravda nebo fikce?',
+            btn: 'Tipni si!',
         },
         da: {
-            title: 'Tilbage til skolen: quiz og præmie',
-            btn: 'Test deg selv',
+            title: 'Fakta eller fiktion?',
+            btn: 'Gætte!',
         },
         el: {
-            title: 'Επιστροφή στο σχολείο',
-            btn: 'Περάστε',
+            title: 'Σωστό ή λάθος?',
+            btn: 'Εικασία!',
         },
         es_419: {
-            title: 'Vuelta al cole: quiz y recompensa',
-            btn: 'Hacer el quiz',
+            title: '¿Realidad o ficción?',
+            btn: '¡Adivinar!',
         },
         fa: {
-            title: 'بازگشت به مدرسه: مسابقه و جایزه',
-            btn: 'امتحان را پاس کنید',
+            title: 'واقعیت یا تخیل؟',
+            btn: '!حدس بزن',
         },
         fi: {
-            title: 'Takaisin kouluun: tietokilpailu ja palkinto',
-            btn: 'Läpäise',
+            title: 'Totta vai tarua?',
+            btn: 'Arvaus!',
         },
         he: {
-            title: 'חזרה לבית הספר: חידון ופרס',
-            btn: 'לעבור',
+            title: '?עובדה או בדיה',
+            btn: '!לְנַחֵשׁ',
         },
         hr: {
-            title: 'Povratak u školu: kviz i nagrada',
-            btn: 'Provjerite se',
+            title: 'Činjenica ili fikcija?',
+            btn: 'Pogodite!',
         },
         hu: {
-            title: 'Vissza az iskolába: egy kvíz és egy díj',
-            btn: 'Teszteld magad',
+            title: 'Tény vagy fikció?',
+            btn: 'Találd ki!',
         },
         hy: {
-            title: 'Վերադառնալ դպրոց',
-            btn: 'Ստուգեք ինքներդ',
+            title: 'Փաստ, թե հորինված.',
+            btn: 'Գուշակիր',
         },
         id: {
-            title: 'Kembali ke Sekolah: kuis dan Hadiah',
-            btn: 'Uji dirimu',
+            title: 'Fakta atau Fiksi?',
+            btn: 'Tebakan!',
         },
         lt: {
-            title: 'Atgal į mokyklą: viktorina ir prizas',
-            btn: 'Išbandyk save',
+            title: 'Faktas ar fikcija?',
+            btn: 'Atspėk!',
         },
         ms: {
-            title: 'Kembali ke Sekolah: kuiz dan Hadiah',
-            btn: 'Uji diri sendiri',
+            title: 'Fakta atau fiksyen?',
+            btn: 'Teka!',
         },
         nb: {
-            title: 'Tilbake til skolen: quiz og premie',
-            btn: 'Test deg selv',
+            title: 'Fakta eller fiksjon?',
+            btn: 'Gjett!',
         },
         nl: {
-            title: 'Terug naar school: quiz en prijs',
-            btn: 'Test jezelf',
+            title: 'Feit of Fictie?',
+            btn: 'Gok!',
         },
         pl: {
-            title: 'Powrót do szkoły: quiz i nagroda',
-            btn: 'Sprawdź się',
+            title: 'Fakt czy fikcja?',
+            btn: 'Zgadywać!',
         },
         ro: {
-            title: 'Înapoi la școală: test și premiu',
-            btn: 'Testați-vă',
+            title: 'Realitate sau fictiune?',
+            btn: 'Ghici!',
         },
         sk: {
-            title: 'Späť do školy: kvíz a cena',
-            btn: 'Otestujte sa',
+            title: 'Skutočnosť alebo fikcia?',
+            btn: 'Hádaj!',
         },
         sl: {
-            title: 'Nazaj v šolo: kviz in nagrada',
-            btn: 'Preizkusite se',
+            title: 'Dejstvo ali fikcija?',
+            btn: 'Ugani!',
         },
         'sr-Latn': {
-            title: 'Povratak u školu: kviz i nagrada',
-            btn: 'Proverite sami',
+            title: 'Tačno ili netačno?',
+            btn: 'Izgleda!',
         },
         sv: {
-            title: 'Tillbaka till skolan: quiz och pris',
-            btn: 'Testa dig själv',
+            title: 'Fakta eller påhitt?',
+            btn: 'Gissa!',
         },
         tr: {
-            title: 'Okula Dönüş: Sınav ve Ödül',
-            btn: 'Kendinizi test edin',
+            title: 'Gerçek mi kurgu mu?',
+            btn: 'Tahmin etmek!',
         },
         vi: {
-            title: 'Back to School: câu đố và giải thưởng',
-            btn: 'Tự kiểm tra',
+            title: 'Sự thật hay hư cấu?',
+            btn: 'Đoán!',
+        },
+        hi: {
+            title: 'तथ्य या कल्पना?',
+            btn: 'अनुमान लगाना!',
+        },
+        et: {
+            title: 'Fakt või väljamõeldis?',
+            btn: 'Arva ära!',
+        },
+        th: {
+            title: 'เรื่องจริงหรือนิยาย?',
+            btn: 'เดา!',
         },
     },
     // will be selected for locale, see usage of getNotificationText
     text: null,
     url: PROMO_LINK,
-    from: '28 August 2023 12:00:00',
-    to: '3 September 2023 23:59:00',
+    from: '25 October 2023 12:00:00',
+    to: '1 November 2023 23:59:00',
     type: 'animated',
     get icons() {
-        return lazyGet(backToSchoolPromo23Notification, 'icons', () => ({
+        return lazyGet(halloween23PromoNotification, 'icons', () => ({
             ENABLED: {
-                19: getUrl('assets/images/icons/bts2023-on-19.png'),
-                38: getUrl('assets/images/icons/bts2023-on-38.png'),
+                19: getUrl('assets/images/icons/halloween23-on-19.png'),
+                38: getUrl('assets/images/icons/halloween23-on-38.png'),
             },
             DISABLED: {
-                19: getUrl('assets/images/icons/bts2023-off-19.png'),
-                38: getUrl('assets/images/icons/bts2023-off-38.png'),
+                19: getUrl('assets/images/icons/halloween23-off-19.png'),
+                38: getUrl('assets/images/icons/halloween23-off-38.png'),
             },
         }));
     },
@@ -252,7 +274,7 @@ const backToSchoolPromo23Notification = {
  */
 
 const notifications: { [key: string]: PromoNotificationData } = {
-    backToSchoolPromo23: backToSchoolPromo23Notification,
+    [HALLOWEEN_23_ID]: halloween23PromoNotification,
 };
 
 /**
@@ -315,9 +337,6 @@ initNotifications();
 
 let currentNotification: PromoNotificationData | null;
 let notificationCheckTime: number;
-const checkTimeoutMs = 10 * 60 * 1000; // 10 minutes
-const minPeriod = 30 * 60 * 1000; // 30 minutes
-const NOTIFICATION_DELAY = 30 * 1000; // clear notification in 30 seconds
 let timeoutId: number;
 
 /**
@@ -329,7 +348,9 @@ const setNotificationViewed = async (withDelay: boolean): Promise<void> => {
         clearTimeout(timeoutId);
         timeoutId = setTimeout(() => {
             setNotificationViewed(false);
-        }, NOTIFICATION_DELAY) as any; // TODO setup tsconfig to fix types
+        }, NOTIFICATION_DELAY_MS) as any; // TODO setup tsconfig to fix types
+        // do not continue if `withDelay` is true, otherwise it may set a notification as viewed
+        return;
     }
 
     if (currentNotification) {
@@ -357,14 +378,14 @@ const getCurrentNotification = async (): Promise<PromoNotificationData | null> =
     const currentTime = new Date().getTime();
 
     const timeSinceLastNotification = currentTime - (await getLastNotificationTime());
-    if (timeSinceLastNotification < minPeriod) {
+    if (timeSinceLastNotification < MIN_PERIOD_MS) {
         // Just a check to not show the notification too often
         return null;
     }
 
     // Check not often than once in 10 minutes
     const timeSinceLastCheck = currentTime - notificationCheckTime;
-    if (notificationCheckTime > 0 && timeSinceLastCheck <= checkTimeoutMs) {
+    if (notificationCheckTime > 0 && timeSinceLastCheck <= CHECK_TIMEOUT_MS) {
         return currentNotification;
     }
 

src/assets/images/halloween23.svg

@@ -55,7 +55,7 @@ const PromoNotificationModal = observer(() => {
                     onClick={onCloseHandler}
                 >
                     <svg className="icon icon--button">
-                        <use xlinkHref="#cross_gray" />
+                        <use xlinkHref="#cross-white" />
                     </svg>
                 </div>
                 <div className="notify__content">