Merge pull request #199 from DFE-Digital/cookie-banner

Cookies banner with javascript
DFE-Digital · Aug 19, 2024 · 67cb45b · 67cb45b
2 parents 8c94fa3 + a559c33
commit 67cb45b
Show file tree

Hide file tree

Showing 4 changed files with 116 additions and 26 deletions.
diff --git a/app/controllers/cookie_preferences_controller.rb b/app/controllers/cookie_preferences_controller.rb
@@ -7,29 +7,32 @@ def create
         value: cookie_preferences_params[:consent],
         expires: 1.year.from_now,
       }
-      cookies["hide-cookies-banner"] = {
-        value: "0",
-        expires: 1.year.from_now,
-      }
 
-      redirect_back(fallback_location: "/")
+      respond_to do |format|
+        format.json do
+          render json: {
+            status: "ok",
+            message:,
+          }
+        end
+
+        format.html do
+          flash[:success] = "You’ve set your cookie preferences."
+          redirect_to "/pages/cookies"
+        end
+      end
     else
       render :new, status: :unprocessable_entity
     end
   end
 
-  def hide
-    cookies["hide-cookies-banner"] = {
-      value: "1",
-      expires: 1.year.from_now,
-    }
-
-    redirect_back(fallback_location: "/")
-  end
-
 private
 
   def cookie_preferences_params
     params.require(:cookie_preferences).permit(:consent)
   end
+
+  def message
+    %(You’ve #{cookie_preferences_params[:consent] == 'accept' ? 'accepted' : 'rejected'} analytics cookies.)
+  end
 end
diff --git a/app/javascript/application.js b/app/javascript/application.js
@@ -1,3 +1,5 @@
 import { initAll } from "govuk-frontend";
 
-initAll();
+import "./cookie-banner"
+
+initAll();
diff --git a/app/javascript/cookie-banner.js b/app/javascript/cookie-banner.js
@@ -0,0 +1,49 @@
+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("cookie_preferences[consent]", e.target.value);
+
+        fetch(cookieFormEl.action, {
+            method: "POST",
+            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");
+            });
+
+        e.preventDefault();
+    });
+
+    const hideBannerEl = document.querySelector(".js-hide-cookie-banner");
+    hideBannerEl.addEventListener("click", (e) => {
+        e.preventDefault();
+
+        cookieBannerEl.setAttribute("hidden", "");
+    });
+}
diff --git a/app/views/shared/cookies/_banner.html.erb b/app/views/shared/cookies/_banner.html.erb
@@ -1,12 +1,48 @@
-<% case cookies["consented-to-cookies"] %>
-<% when "reject" %>
-  <% unless cookies["hide-cookies-banner"] == "1" %>
-    <%= render partial: "shared/cookies/rejected" %>
-  <% end %>
-<% when "accept" %>
-  <% unless cookies["hide-cookies-banner"] == "1" %>
-    <%= render partial: "shared/cookies/accepted" %>
-  <% end %>
-<% else %>
-  <%= render partial: "shared/cookies/not_set" %>
+<% if cookies["consented-to-cookies"].nil? %>
+  <div class="govuk-cookie-banner js-cookie-banner" data-nosnippet role="region" aria-label="Cookies on Teacher School Hub Finder">
+    <div class="govuk-cookie-banner__message govuk-width-container js-cookie-banner__form">
+      <div class="govuk-grid-row">
+        <div class="govuk-grid-column-two-thirds">
+          <h2 class="govuk-cookie-banner__heading govuk-heading-m">Cookies on Teacher School Hub Finder</h2>
+
+          <div class="govuk-cookie-banner__content">
+            <p>We use some essential cookies to make this service work.</p>
+            <p>We’d like to set additional cookies so we can remember your settings, understand how people use the service and make improvements.</p>
+          </div>
+        </div>
+      </div>
+
+      <%= form_with model: CookiePreferences.new, scope: "cookie_preferences", url: cookie_preferences_path, class: "js-cookie-form" do |f| %>
+        <div class="govuk-button-group">
+          <%= f.button "Accept additional cookies", name: "cookie_preferences[consent]", value: "accept", class: "govuk-button", data: { module: "govuk-button" } %>
+
+          <%= f.button "Reject additional cookies", name: "cookie_preferences[consent]", value: "reject", class: "govuk-button", data: { module: "govuk-button" } %>
+
+          <%= govuk_link_to "View cookies", pages_cookies_path %>
+        </div>
+      <% end %>
+    </div>
+
+    <div class="govuk-cookie-banner__message govuk-width-container js-cookie-banner__success" role="alert" hidden>
+      <div class="govuk-grid-row">
+        <div class="govuk-grid-column-two-thirds">
+
+          <div class="govuk-cookie-banner__content">
+            <p class="govuk-body">
+              <span class="js-cookie-message">
+                You’ve set your cookie preferences.
+              </span>
+              You can <%= govuk_link_to "change your cookie settings", pages_cookies_path %> at any time.
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <div class="govuk-button-group">
+        <button class="govuk-button js-hide-cookie-banner">
+          Hide this message
+        </button>
+      </div>
+    </div>
+  </div>
 <% end %>