FIX: refactor notifications position based on different promo banners (#13679)

website/client/src/components/snackbars/notifications.vue

@@ -103,7 +103,7 @@ export default {
       removalIntervalId: null,
       notificationTopY: '0px',
       preventMultipleWatchExecution: false,
-      gemsPromoBannerHeight: null,
+      eventPromoBannerHeight: null,
       sleepingBannerHeight: null,
     };
   },
@@ -113,6 +113,9 @@ export default {
       userSleeping: 'user.data.preferences.sleep',
       currentEvent: 'worldState.data.currentEvent',
     }),
+    isEventActive () {
+      return Boolean(this.currentEvent?.event);
+    },
     notificationsTopPosClass () {
       const base = 'notifications-top-pos-';
       let modifier = '';
@@ -132,10 +135,8 @@ export default {
         scrollPosToCheck += this.sleepingBannerHeight;
       }
 
-      if (this.currentEvent
-          && this.currentEvent.event
-      ) {
-        scrollPosToCheck += this.gemsPromoBannerHeight ?? 0;
+      if (this.isEventActive) {
+        scrollPosToCheck += this.eventPromoBannerHeight ?? 0;
       }
 
       return scrollPosToCheck;
@@ -169,7 +170,7 @@ export default {
       this.preventMultipleWatchExecution = false;
     },
     currentEvent: function currentEventChanged () {
-      this.gemsPromoBannerHeight = getBannerHeight('gems-promo');
+      this.updateEventBannerHeight();
     },
   },
   async mounted () {
@@ -355,10 +356,31 @@ export default {
     }, 16),
 
     updateBannerHeightAndScrollY () {
-      this.gemsPromoBannerHeight = getBannerHeight('gems-promo');
+      this.updateEventBannerHeight();
       this.sleepingBannerHeight = getBannerHeight('damage-paused');
       this.updateScrollY();
     },
+
+    updateEventBannerHeight () {
+      if (this.isEventActive) {
+        this.eventPromoBannerHeight = getBannerHeight(this.currentEventBannerName());
+      }
+    },
+
+    currentEventBannerName () {
+      // if there are any other types of promo bars
+      // this method needs to be updated
+
+      if (this.currentEvent?.promo) {
+        return 'gift-promo';
+      }
+
+      if (this.currentEvent?.gemsPromo) {
+        return 'gems-promo';
+      }
+
+      return '';
+    },
   },
 };
 </script>