Add single cookie consent API

CHANGELOG.md

@@ -8,6 +8,8 @@
   of the commit log.
 
 ## Unreleased
+
+* Add single cookie consent API ([PR #3854](https://github.com/alphagov/govuk_publishing_components/pull/3854))
 * Update popular links in super navigation header ([PR #3904](https://github.com/alphagov/govuk_publishing_components/pull/3904))
 * Allow custom text for GA4 scroll tracker ([PR #3896](https://github.com/alphagov/govuk_publishing_components/pull/3896))
 * Ensure analytics stops firing if a user disables usage cookies on our cookie settings page ([PR #3893](https://github.com/alphagov/govuk_publishing_components/pull/3893))

app/assets/javascripts/govuk_publishing_components/components/cookie-banner.js

@@ -10,10 +10,17 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
 
   CookieBanner.prototype.init = function () {
     this.$module.hideCookieMessage = this.hideCookieMessage.bind(this)
+    this.$module.showCookieMessage = this.showCookieMessage.bind(this)
     this.$module.showConfirmationMessage = this.showConfirmationMessage.bind(this)
     this.$module.setCookieConsent = this.setCookieConsent.bind(this)
     this.$module.rejectCookieConsent = this.rejectCookieConsent.bind(this)
     this.setupCookieMessage()
+
+    if (window.GOVUK.useSingleConsentApi) {
+      window.addEventListener('hide-cookie-banner', this.$module.hideCookieMessage)
+      window.addEventListener('show-cookie-banner', this.$module.showCookieMessage)
+      window.GOVUK.singleConsent.init()
+    }
   }
 
   CookieBanner.prototype.setupCookieMessage = function () {
@@ -34,10 +41,13 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
       this.$rejectCookiesButton.addEventListener('click', this.$module.rejectCookieConsent)
     }
 
-    this.showCookieMessage()
+    if (!window.GOVUK.useSingleConsentApi) {
+      this.showCookieMessage()
+    }
   }
 
   CookieBanner.prototype.showCookieMessage = function () {
+    window.removeEventListener('show-cookie-banner', this.$module.showCookieMessage)
     // Show the cookie banner if not in the cookie settings page or in an iframe
     if (!this.isInCookiesPage() && !this.isInIframe()) {
       var shouldHaveCookieMessage = (this.$module && window.GOVUK.cookie('cookies_preferences_set') !== 'true')
@@ -47,7 +57,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 (!window.GOVUK.useSingleConsentApi) {
+            window.GOVUK.setDefaultConsentCookie()
+          }
         }
 
         window.GOVUK.deleteUnconsentedCookies()
@@ -56,9 +68,12 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
   }
 
   CookieBanner.prototype.hideCookieMessage = function (event) {
+    window.removeEventListener('hide-cookie-banner', this.$module.hideCookieMessage)
     if (this.$module) {
       this.$module.hidden = true
-      window.GOVUK.cookie('cookies_preferences_set', 'true', { days: 365 })
+      if (!window.GOVUK.useSingleConsentApi) {
+        window.GOVUK.cookie('cookies_preferences_set', 'true', { days: 365 })
+      }
     }
 
     if (event.target) {
@@ -70,25 +85,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 (window.GOVUK.useSingleConsentApi) {
+      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 (!window.GOVUK.useSingleConsentApi) {
+      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 (window.GOVUK.useSingleConsentApi) {
+      window.GOVUK.singleConsent.setPreferences('reject')
+    } else {
+      window.GOVUK.setDefaultConsentCookie()
+      window.GOVUK.cookie('cookies_preferences_set', 'true', { days: 365 })
+    }
   }
 
   CookieBanner.prototype.showConfirmationMessage = function () {

app/assets/javascripts/govuk_publishing_components/domain-config.js

@@ -0,0 +1,73 @@
+window.GOVUK = window.GOVUK || {}
+window.GOVUK.vars = window.GOVUK.vars || {}
+window.GOVUK.vars.domains = [
+  {
+    // need to have this one at the start, see loadGa4 function
+    name: 'development',
+    domains: [
+      'localhost',
+      '127.0.0.1',
+      '0.0.0.0',
+      'dev.gov.uk'
+    ],
+    initialiseGA4: true,
+    id: 'GTM-MG7HG5W',
+    auth: 'bRiZ-jiEHtw6hHpGd6dF9w',
+    preview: 'env-3',
+    gaProperty: 'UA-UNSET',
+    gaPropertyCrossDomain: 'UA-UNSET',
+    consentApiUrl: 'staging'
+  },
+  {
+    name: 'production',
+    domains: [
+      'www.gov.uk',
+      'www-origin.publishing.service.gov.uk',
+      'assets.publishing.service.gov.uk'
+    ],
+    initialiseGA4: true,
+    id: 'GTM-MG7HG5W',
+    gaProperty: 'UA-26179049-1',
+    gaPropertyCrossDomain: 'UA-145652997-1',
+    consentApiUrl: 'production'
+  },
+  {
+    name: 'staging',
+    domains: [
+      'www.staging.publishing.service.gov.uk',
+      'www-origin.staging.publishing.service.gov.uk',
+      'assets.staging.publishing.service.gov.uk'
+    ],
+    initialiseGA4: true,
+    id: 'GTM-MG7HG5W',
+    auth: 'oJWs562CxSIjZKn_GlB5Bw',
+    preview: 'env-5',
+    gaProperty: 'UA-26179049-20',
+    gaPropertyCrossDomain: 'UA-145652997-1',
+    consentApiUrl: 'staging'
+  },
+  {
+    name: 'integration',
+    domains: [
+      'www.integration.publishing.service.gov.uk',
+      'www-origin.integration.publishing.service.gov.uk',
+      'assets.integration.publishing.service.gov.uk'
+    ],
+    initialiseGA4: true,
+    id: 'GTM-MG7HG5W',
+    auth: 'C7iYdcsOlYgGmiUJjZKrHQ',
+    preview: 'env-4',
+    gaProperty: 'UA-26179049-22',
+    gaPropertyCrossDomain: 'UA-145652997-1',
+    consentApiUrl: 'staging'
+  },
+  {
+    name: 'devdocs',
+    domains: [
+      'docs.publishing.service.gov.uk'
+    ],
+    initialiseGA4: true,
+    id: 'GTM-TNKCK97',
+    consentApiUrl: 'production'
+  }
+]

app/assets/javascripts/govuk_publishing_components/lib/cookie-settings.js

@@ -12,31 +12,39 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     document.querySelector('form[data-module=cookie-settings]')
       .addEventListener('submit', this.$module.submitSettingsForm)
 
-    this.setInitialFormValues()
+    if (window.GOVUK.useSingleConsentApi) {
+      window.GOVUK.singleConsent.init(this.setInitialFormValues.bind(this))
+    } else {
+      this.setInitialFormValues()
+    }
   }
 
   CookieSettings.prototype.setInitialFormValues = function () {
     if (!window.GOVUK.cookie('cookies_policy')) {
-      window.GOVUK.setDefaultConsentCookie()
+      if (!window.GOVUK.useSingleConsentApi) {
+        window.GOVUK.setDefaultConsentCookie()
+      }
     }
 
     var currentConsentCookie = window.GOVUK.cookie('cookies_policy')
-    var currentConsentCookieJSON = JSON.parse(currentConsentCookie)
+    if (currentConsentCookie) {
+      var currentConsentCookieJSON = JSON.parse(currentConsentCookie)
 
-    // We don't need the essential value as this cannot be changed by the user
-    delete currentConsentCookieJSON.essential
+      // We don't need the essential value as this cannot be changed by the user
+      delete currentConsentCookieJSON.essential
 
-    for (var cookieType in currentConsentCookieJSON) {
-      var radioButton
+      for (var cookieType in currentConsentCookieJSON) {
+        var radioButton
 
-      if (currentConsentCookieJSON[cookieType]) {
-        radioButton = document.querySelector('input[name=cookies-' + cookieType + '][value=on]')
-      } else {
-        radioButton = document.querySelector('input[name=cookies-' + cookieType + '][value=off]')
-      }
+        if (currentConsentCookieJSON[cookieType]) {
+          radioButton = document.querySelector('input[name=cookies-' + cookieType + '][value=on]')
+        } else {
+          radioButton = document.querySelector('input[name=cookies-' + cookieType + '][value=off]')
+        }
 
-      if (radioButton) {
-        radioButton.checked = true
+        if (radioButton) {
+          radioButton.checked = true
+        }
       }
     }
   }
@@ -62,13 +70,15 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
       }
     }
 
-    window.GOVUK.setConsentCookie(options)
-    window.GOVUK.setCookie('cookies_preferences_set', true, { days: 365 })
+    if (window.GOVUK.useSingleConsentApi) {
+      window.GOVUK.singleConsent.setPreferences(null, options)
+    } else {
+      window.GOVUK.setConsentCookie(options)
+      window.GOVUK.setCookie('cookies_preferences_set', true, { days: 365 })
+    }
 
     this.fireAnalyticsEvent(options)
-
     this.showConfirmationMessage()
-
     return false
   }
 

app/assets/javascripts/govuk_publishing_components/lib/govspeak/youtube-link-enhancement.js

@@ -163,7 +163,7 @@
 
   YoutubeLinkEnhancement.prototype.campaignCookiesAllowed = function () {
     var cookiePolicy = window.GOVUK.getConsentCookie()
-    return cookiePolicy !== null ? cookiePolicy.campaigns : true
+    return cookiePolicy !== null ? cookiePolicy.campaigns : false
   }
 
   YoutubeLinkEnhancement.nextId = function () {

app/assets/javascripts/govuk_publishing_components/lib/single-consent-functions.js

@@ -0,0 +1,59 @@
+/* global GovSingleConsent */
+// = require govuk-single-consent/dist/singleconsent.iife.js
+
+(function (root) {
+  'use strict'
+  window.GOVUK = window.GOVUK || {}
+
+  window.GOVUK.singleConsent = {
+    init: function (callback) {
+      if (!window.GOVUK.useSingleConsentApi) {
+        return
+      }
+      callback = callback || this.apiCallback
+      // determine where we are and set the consent api URL accordingly
+      if (!this.url) {
+        this.url = 'staging'
+        var environment = window.GOVUK.loadAnalytics.getEnvironment(window.GOVUK.analyticsGa4.core.trackFunctions.getHostname())
+        if (environment) {
+          this.url = environment.consentApiUrl
+        }
+      }
+      // create the consent API object
+      this.consentApiObj = new GovSingleConsent(callback, this.url)
+    },
+
+    apiCallback: function (consents, consentsPreferencesSet, error) {
+      if (error) {
+        console.error('Single consent error: ', error, window.location)
+        return
+      }
+      if (consentsPreferencesSet) {
+        if (consents && consents.usage) {
+          window.GOVUK.triggerEvent(window, 'cookie-consent')
+        }
+      } else {
+        window.GOVUK.triggerEvent(window, 'show-cookie-banner')
+      }
+    },
+
+    setPreferences: function (type, options) {
+      if (window.GOVUK.useSingleConsentApi) {
+        try {
+          switch (type) {
+            case 'accept':
+              this.consentApiObj.setConsents(GovSingleConsent.ACCEPT_ALL)
+              break
+            case 'reject':
+              this.consentApiObj.setConsents(GovSingleConsent.REJECT_ALL)
+              break
+            default:
+              this.consentApiObj.setConsents(options)
+          }
+        } catch (e) {
+          console.error('Single consent ' + type + ' error: ', e, window.location)
+        }
+      }
+    }
+  }
+}(window))