diff --git a/app/controllers/cookies_controller.rb b/app/controllers/cookies_controller.rb index 50d874e92..0e78fa1bc 100644 --- a/app/controllers/cookies_controller.rb +++ b/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 diff --git a/app/frontend/application.js b/app/frontend/application.js index ff4bae81a..36b730098 100644 --- a/app/frontend/application.js +++ b/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') diff --git a/app/frontend/cookie-banner.js b/app/frontend/cookie-banner.js new file mode 100644 index 000000000..ec1466f3a --- /dev/null +++ b/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', '') + }) +}