Feat: Added a second timer for the OSH banner and refactored the code…

… so we have displayBannerTC instead of displayBanner. (#577) * Feat: Added a second timer for the OSH banner and refactored the code so we have displayBannerTC instead of displayBanner. * Slight update to a variable and changed an ID. * Changed to querySelector to select the globalBanner based on its aria.
hmrc · Jan 28, 2025 · 24014dc · 24014dc
1 parent e7b3e32
commit 24014dc
Show file tree

Hide file tree

Showing 8 changed files with 73 additions and 55 deletions.
diff --git a/app/assets/javascripts/custom.js b/app/assets/javascripts/custom.js
@@ -1,63 +1,81 @@
 
-window.addEventListener('DOMContentLoaded', function() {
+window.addEventListener('DOMContentLoaded', function () {
 
     // =====================================================
     // Back link mimics browser back functionality
     // =====================================================
     var backLink = document.querySelector('.govuk-back-link');
     const referrer = this.document.referrer;
 
-    if(referrer != "" && this.window.history.length > 1 && referrer.includes('gov.uk/')){
-        backLink.style.display = 'block-inline'; 
-        backLink.addEventListener('click', function(e){
+    if (referrer != "" && this.window.history.length > 1 && referrer.includes('gov.uk/')) {
+        backLink.style.display = 'block-inline';
+        backLink.addEventListener('click', function (e) {
             e.preventDefault();
             window.history.back();
         });
     } else {
-        backLink.style.display = 'none'; 
+        backLink.style.display = 'none';
     }
 
     //Timer for notification banner
     //date format ( YYYY-MM-DD )
     //If BST then time needs to be 1 hour earlier
 
-    let currentDate = new Date().getTime()
+    const currentDate = new Date().getTime()
 
     //may need to implement a way to dynamically assign these values depending on future complexity
-    let globalNotificationBanner = document.getElementsByClassName('govuk-notification-banner')[0]
-    let individualNotificationBanner = document.getElementsByClassName('govuk-notification-banner')[1]
+    let globalNotificationBanner = document.querySelector('[aria-labelledby = "globalBanner"]')
+    let tcNotificationBanner = document.querySelector('[aria-labelledby = "tcBanner"]')
+    let oshNotificationBanner = document.querySelector('[aria-labelledby = "oshBanner"]')
 
     // =====================================================
-    // Timing for individual banners
+    // Timing for individual TC banner
     // =====================================================
 
-    //Change these to required start and end times
-    let individualStartTime = new Date("2025-01-07T09:00:00Z").getTime();
-    //No end date given for current banner, set it to next year for now
-    let individualEndTime = new Date("2025-05-06T00:00:01Z").getTime();
+    if (tcNotificationBanner) {
+        //Change these to required start and end times
+        const tcStartTime = new Date("2025-01-07T09:00:00Z").getTime();
+        //No end date given for current banner, set it to next year for now
+        const tcEndTime = new Date("2025-05-06T00:00:01Z").getTime();
 
-    if((currentDate > individualStartTime ) && (currentDate < individualEndTime)){
-        //Notification banner should be displayed
-        if (individualNotificationBanner) {
-            individualNotificationBanner.style.display = 'block'
+        if ((currentDate > tcStartTime) && (currentDate < tcEndTime)) {
+            //Notification banner should be displayed
+            tcNotificationBanner.style.display = 'block'
+        } else {
+            //Notification will not be displayed
+            tcNotificationBanner.style.display = 'none'
         }
-    } else {
-        //Notification will not be displayed
-        if (individualNotificationBanner) {
-            individualNotificationBanner.style.display = 'none'
+    }
+
+    // =====================================================
+    // Timing for individual OSH banner
+    // =====================================================
+
+    if (oshNotificationBanner) {
+        //Change these to required start and end times
+        const oshStartTime = new Date("2025-01-07T09:00:00Z").getTime();
+        //No end date given for current banner, set it to next year for now
+        const oshEndTime = new Date("2025-02-01T07:00:00Z").getTime();
+
+        if ((currentDate > oshStartTime) && (currentDate < oshEndTime)) {
+            //Notification banner should be displayed
+            oshNotificationBanner.style.display = 'block'
+        } else {
+            //Notification will not be displayed
+            oshNotificationBanner.style.display = 'none'
         }
     }
 
     // =====================================================
     // Timing for global banners
     // =====================================================
 
-     //Change these to required start and end times
-     let globalStartTime = new Date("2024-09-10T07:00:00Z").getTime();
-     //No end date given for current banner, set it to next year for now
-     let globalEndTime = new Date("2024-09-10T19:00:01Z").getTime();
+    //Change these to required start and end times
+    let globalStartTime = new Date("2024-09-10T07:00:00Z").getTime();
+    //No end date given for current banner, set it to next year for now
+    let globalEndTime = new Date("2024-09-10T19:00:01Z").getTime();
 
-     if((currentDate > globalStartTime ) && (currentDate < globalEndTime)){
+    if ((currentDate > globalStartTime) && (currentDate < globalEndTime)) {
         //Notification banner should be displayed
         if (globalNotificationBanner) {
             globalNotificationBanner.style.display = 'block'
@@ -71,30 +89,30 @@ window.addEventListener('DOMContentLoaded', function() {
 });
 
 // dynamically re-position nuance divs before footer for accessibility
-window.addEventListener('load', function() {
+window.addEventListener('load', function () {
 
-    var waitForEl = function(selector, callback, count) {
+    var waitForEl = function (selector, callback, count) {
         if (document.querySelector(selector) !== null) {
             callback();
         } else {
-            setTimeout(function() {
-              count++;
-              if(count<3) {
-                waitForEl(selector, callback, count);
-              }
+            setTimeout(function () {
+                count++;
+                if (count < 3) {
+                    waitForEl(selector, callback, count);
+                }
             }, 1000);
-      }
+        }
     }
 
     waitForEl(
         "#inqChatStage",
-         function() {
+        function () {
             var footer = document.querySelector('#footer');
             if (footer !== null) {
                 document.body.appendChild(footer);
             }
-         },
-         0
+        },
+        0
     );
 
 });
diff --git a/app/controllers/CiapiController/CiapiController.scala b/app/controllers/CiapiController/CiapiController.scala
@@ -45,7 +45,7 @@ class CiapiController @Inject()(appConfig: AppConfig,
   def childBenefit: Action[AnyContent] = Action.async { implicit request =>
     if (config.showCHBCUI) {
       auditHelper.audit(DAv3AuditModel("childBenefit"))
-      Future.successful(Ok(askHMRCOnlineCIAPIView(displayBanner = false)))
+      Future.successful(Ok(askHMRCOnlineCIAPIView()))
     } else {
       Future.successful(NotFound)
     }
@@ -126,7 +126,7 @@ class CiapiController @Inject()(appConfig: AppConfig,
   def askHmrcOnline: Action[AnyContent] = Action.async { implicit request =>
     if (config.showTCCUI) {
       auditHelper.audit(DAv3AuditModel("askHmrcOnline"))
-      Future.successful(Ok(askHMRCOnlineCIAPIView(displayBanner = true)))
+      Future.successful(Ok(askHMRCOnlineCIAPIView(displayBannerTC = true)))
     } else {
       Future.successful(NotFound)
     }

diff --git a/app/views/CIAPIViews/AskHMRCOnlineCIAPIView.scala.html b/app/views/CIAPIViews/AskHMRCOnlineCIAPIView.scala.html
@@ -19,9 +19,9 @@
 
 @this(main_template: MainTemplateCUI, appConfig: AppConfig)
 
-@(displayBanner: Boolean = false, displayBannerOSH: Boolean = false)(implicit request: Request[_], messages: play.api.i18n.Messages)
+@(displayBannerTC: Boolean = false, displayBannerOSH: Boolean = false)(implicit request: Request[_], messages: play.api.i18n.Messages)
 
-@main_template(title = messages("ciapi.page.title"), displayBanner = displayBanner, displayBannerOSH = displayBannerOSH) {
+@main_template(title = messages("ciapi.page.title"), displayBannerTC = displayBannerTC, displayBannerOSH = displayBannerOSH) {
     <div class="cui-wrapper">
         <div id="cui-messaging-container">
             <div id="nuanMessagingFrame">

diff --git a/app/views/templates/GovukWrapper.scala.html b/app/views/templates/GovukWrapper.scala.html
@@ -53,7 +53,7 @@
     navTitle: Option[String] = None,
     showHelpForm: Boolean = true,
     showBackLink: Boolean = true,
-    displayBanner: Boolean = false
+    displayBannerTC: Boolean = false
 )(implicit request: Request[_], messages: play.api.i18n.Messages)
 
 @content = {
@@ -75,8 +75,8 @@
 @beforeContentBlock = {
     @if(showBackLink) { @govukBackLink(BackLink(href="#", content=Text(messages("global.back")))) }
     @govukNotificationBanner(NotificationBanner(titleId = Some("globalBanner"), title = Text(messages("globalNotification.banner.title")), content = HtmlContent(messages("globalNotification.banner.p"))))
-    @if(displayBanner) {
-        @govukNotificationBanner(NotificationBanner(titleId = Some("individualBanner"), title = Text(messages("individualNotification.banner.title")), content = HtmlContent(messages("individualNotification.banner.p"))))
+    @if(displayBannerTC) {
+        @govukNotificationBanner(NotificationBanner(titleId = Some("tcBanner"), title = Text(messages("tcNotification.banner.title")), content = HtmlContent(messages("tcNotification.banner.p"))))
     }
 }
 

diff --git a/app/views/templates/GovukWrapperCUI.scala.html b/app/views/templates/GovukWrapperCUI.scala.html
@@ -49,7 +49,7 @@
     mainContent: Html = HtmlFormat.empty,
     scriptElem: Option[Html] = None,
     navTitle: Option[String] = None,
-    displayBanner: Boolean = false,
+    displayBannerTC: Boolean = false,
     displayBannerOSH: Boolean = false
 )(implicit request: Request[_], messages: play.api.i18n.Messages)
 
@@ -72,8 +72,8 @@
 @beforeContentBlock = {
     @govukBackLink(BackLink(href="#", content=Text(messages("global.back"))))
     @govukNotificationBanner(NotificationBanner(titleId = Some("globalBanner"), title = Text(messages("globalNotification.banner.title")), content = HtmlContent(messages("globalNotification.banner.p"))))
-    @if(displayBanner) {
-        @govukNotificationBanner(NotificationBanner(titleId = Some("individualBanner"), title = Text(messages("individualNotification.banner.title")), content = HtmlContent(messages("individualNotification.banner.p"))))
+    @if(displayBannerTC) {
+        @govukNotificationBanner(NotificationBanner(titleId = Some("tcBanner"), title = Text(messages("tcNotification.banner.title")), content = HtmlContent(messages("tcNotification.banner.p"))))
     }
     @if(displayBannerOSH) {
         @govukNotificationBanner(NotificationBanner(titleId = Some("oshBanner"), title = Text(messages("oshNotification.banner.title")), content = HtmlContent(messages("oshNotification.banner.p"))))

diff --git a/app/views/templates/MainTemplate.scala.html b/app/views/templates/MainTemplate.scala.html
@@ -28,7 +28,7 @@
     navTitle: Option[String] = None,
     showHelpForm: Boolean = true,
     showBackLink: Boolean = true,
-    displayBanner: Boolean = false)(mainContent: Html)(implicit request : Request[_], messages: Messages)
+    displayBannerTC: Boolean = false)(mainContent: Html)(implicit request : Request[_], messages: Messages)
 
 @scriptElem = {
 
@@ -46,5 +46,5 @@
                scriptElem = Some(scriptElem),
                showHelpForm = showHelpForm,
                showBackLink = showBackLink,
-               displayBanner = displayBanner
+               displayBannerTC = displayBannerTC
 )
diff --git a/app/views/templates/MainTemplateCUI.scala.html b/app/views/templates/MainTemplateCUI.scala.html
@@ -24,7 +24,7 @@
     webChatClient: WebChatClient
 )
 
-@(title: String, sidebar: Option[Html] = None, displayBanner: Boolean = false, displayBannerOSH: Boolean = false)(mainContent: Html)(implicit request : Request[_], messages: Messages)
+@(title: String, sidebar: Option[Html] = None, displayBannerTC: Boolean = false, displayBannerOSH: Boolean = false)(mainContent: Html)(implicit request : Request[_], messages: Messages)
 
 @sidebarContent = {
     @if(sidebar.isDefined) {
@@ -52,6 +52,6 @@
                sidebar = sidebarContent,
                mainContent = mainContent,
                scriptElem = Some(scriptElem),
-               displayBanner = displayBanner,
+               displayBannerTC = displayBannerTC,
                displayBannerOSH = displayBannerOSH
 )
diff --git a/conf/messages b/conf/messages
@@ -21,14 +21,14 @@ global.closed.time.sun=Closed Sundays.
 #Beta Banner
 global.banner.phase = BETA
 
-#Individual Page Notification Banner
-individualNotification.banner.title = Important
-individualNotification.banner.p = <p id= "individualBanner" class="govuk-notification-banner__heading">Tax Credits are ending on 5 April 2025. <a href="https://www.tax.service.gov.uk/personal-account/tax-credits-are-ending" target="_blank">Find more information from your Personal Tax Account.</a></p>
-
 #Global Notification Banner
 globalNotification.banner.title = Important
 globalNotification.banner.p = <p id= "globalBanner" class="govuk-notification-banner__heading">Phone lines are unavailable due to a technical issue we’re working to resolve. You can still use the online services as normal.</p>
 
+#TC Notification Banner
+tcNotification.banner.title = Important
+tcNotification.banner.p = <p id= "tcBanner" class="govuk-notification-banner__heading">Tax Credits are ending on 5 April 2025. <a href="https://www.tax.service.gov.uk/personal-account/tax-credits-are-ending" target="_blank">Find more information from your Personal Tax Account.</a></p>
+
 #OSH Notification Banner
 oshNotification.banner.title = Important
 oshNotification.banner.p = <p id= "oshBanner" class="govuk-notification-banner__heading">This service is for technical queries with your online account. If your question is about completing Self Assessment, call 0300 200 3310.</p>