CLDC-1618 Include cookie banner JS

app/controllers/cookies_controller.rb

@@ -18,6 +18,12 @@ class CookiesController < ApplicationController
 
         redirect_to cookies_path
       end
+      format.json do
+        render json: {
+          status: "ok",
+          message: %(You’ve #{analytics_consent == 'on' ? 'accepted' : 'rejected'} analytics cookies.),
+        }
+      end
     end
   end
 

app/frontend/application.js

@@ -4,18 +4,19 @@
 // files to reference that code so it'll be compiled.
 
 // Polyfills for IE
+import '@stimulus/polyfills'
 import '@webcomponents/webcomponentsjs'
 import 'core-js/stable'
-import 'regenerator-runtime/runtime'
-import '@stimulus/polyfills'
 import 'custom-event-polyfill'
 import 'intersection-observer'
+import 'regenerator-runtime/runtime'
 
 //
 import { initAll as GOVUKFrontend } from 'govuk-frontend'
 import { initAll as GOVUKPrototypeComponents } from 'govuk-prototype-components'
-import './styles/application.scss'
 import './controllers'
+import './cookie-banner'
+import './styles/application.scss'
 
 require.context('govuk-frontend/govuk/assets')
 

app/frontend/cookie-banner.js

@@ -0,0 +1,57 @@
+const cookieBannerEl = document.querySelector('.js-cookie-banner')
+
+if (cookieBannerEl) {
+  const cookieFormEl = document.querySelector('.js-cookie-form')
+
+  cookieFormEl.addEventListener('click', (e) => {
+    if (e.target.tagName !== 'BUTTON') {
+      return
+    }
+
+    const body = new FormData(cookieFormEl)
+    body.append('cookies_form[accept_analytics_cookies]', e.target.value)
+
+    fetch(cookieFormEl.action, {
+      method: 'PUT',
+      headers: {
+        Accept: 'application/json',
+      },
+      body,
+    })
+      .then((res) => {
+        if (res.status >= 200 && res.status < 300) {
+          return res
+        }
+
+        throw new Error(res)
+      })
+      .then((res) => res.json())
+      .then(({ message }) => {
+        const messageEl = cookieBannerEl.querySelector('.js-cookie-message')
+        messageEl.textContent = message
+
+        cookieBannerEl
+          .querySelector('.js-cookie-banner__form')
+          .setAttribute('hidden', '')
+        cookieBannerEl
+          .querySelector('.js-cookie-banner__success')
+          .removeAttribute('hidden')
+      })
+
+    const gaSrc = window.analyticsScript
+    if (e.target.value === 'on' && gaSrc) {
+      const scriptEl = document.createElement('script')
+      scriptEl.src = gaSrc
+      document.body.appendChild(scriptEl)
+    }
+
+    e.preventDefault()
+  })
+
+  const hideBannerEl = document.querySelector('.js-hide-cookie-banner')
+  hideBannerEl.addEventListener('click', (e) => {
+    e.preventDefault()
+
+    cookieBannerEl.setAttribute('hidden', '')
+  })
+}