Cookie banner use single consent API

- update the cookie banner component JS to use the single consent API code - stores an internal variable to check whether or not to use the consent API - if false, behaviour should be as normal - if true, should yield setting of consent cookies entirely to the consent API code
alphagov · Feb 8, 2024 · 6c3656d · 6c3656d
1 parent a0e0dfa
commit 6c3656d
Showing 1 changed file with 30 additions and 7 deletions.
diff --git a/app/assets/javascripts/govuk_publishing_components/components/cookie-banner.js b/app/assets/javascripts/govuk_publishing_components/components/cookie-banner.js
@@ -13,7 +13,13 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     this.$module.showConfirmationMessage = this.showConfirmationMessage.bind(this)
     this.$module.setCookieConsent = this.setCookieConsent.bind(this)
     this.$module.rejectCookieConsent = this.rejectCookieConsent.bind(this)
+    this.$module.useConsentApi = window.GOVUK.singleConsent.useConsentApi()
     this.setupCookieMessage()
+
+    if (this.$module.useConsentApi) {
+      window.GOVUK.singleConsent.init()
+      window.addEventListener('cookie-consent', this.$module.hideCookieMessage)
+    }
   }
 
   CookieBanner.prototype.setupCookieMessage = function () {
@@ -47,7 +53,9 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
 
         // Set the default consent cookie if it isn't already present
         if (!window.GOVUK.cookie('cookies_policy')) {
-          window.GOVUK.setDefaultConsentCookie()
+          if (!this.$module.useConsentApi) {
+            window.GOVUK.setDefaultConsentCookie()
+          }
         }
 
         window.GOVUK.deleteUnconsentedCookies()
@@ -56,9 +64,12 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
   }
 
   CookieBanner.prototype.hideCookieMessage = function (event) {
+    window.removeEventListener('cookie-consent', this.$module.hideCookieMessage)
     if (this.$module) {
       this.$module.hidden = true
-      window.GOVUK.cookie('cookies_preferences_set', 'true', { days: 365 })
+      if (!this.$module.useConsentApi) {
+        window.GOVUK.cookie('cookies_preferences_set', 'true', { days: 365 })
+      }
     }
 
     if (event.target) {
@@ -70,25 +81,37 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     if (this.$acceptCookiesButton.getAttribute('data-cookie-types') === 'all') {
       this.$module.querySelector('.gem-c-cookie-banner__confirmation-message--accepted').hidden = false
     }
-    window.GOVUK.approveAllCookieTypes()
+    if (this.$module.useConsentApi) {
+      window.GOVUK.singleConsent.setPreferences('accept')
+    } else {
+      window.GOVUK.approveAllCookieTypes()
+      window.GOVUK.cookie('cookies_preferences_set', 'true', { days: 365 })
+    }
+
     this.$module.showConfirmationMessage()
     this.$module.cookieBannerConfirmationMessage.focus()
-    window.GOVUK.cookie('cookies_preferences_set', 'true', { days: 365 })
+
     if (window.GOVUK.analyticsInit) {
       window.GOVUK.analyticsInit()
     }
     if (window.GOVUK.globalBarInit) {
       window.GOVUK.globalBarInit.init()
     }
-    window.GOVUK.triggerEvent(window, 'cookie-consent')
+    if (!this.$module.useConsentApi) {
+      window.GOVUK.triggerEvent(window, 'cookie-consent')
+    }
   }
 
   CookieBanner.prototype.rejectCookieConsent = function () {
     this.$module.querySelector('.gem-c-cookie-banner__confirmation-message--rejected').hidden = false
     this.$module.showConfirmationMessage()
     this.$module.cookieBannerConfirmationMessage.focus()
-    window.GOVUK.cookie('cookies_preferences_set', 'true', { days: 365 })
-    window.GOVUK.setDefaultConsentCookie()
+    if (this.$module.useConsentApi) {
+      window.GOVUK.singleConsent.setPreferences('reject')
+    } else {
+      window.GOVUK.setDefaultConsentCookie()
+      window.GOVUK.cookie('cookies_preferences_set', 'true', { days: 365 })
+    }
   }
 
   CookieBanner.prototype.showConfirmationMessage = function () {