EL-1863: Cookie page updated popup (#375)

- add notification banner for user, when they choose cookie policy
- update cookie notification to Jinja2 component

fala/assets-src/sass/main.scss

@@ -179,3 +179,7 @@ body.fala-dev {
     border-color: transparent;
   }
 }
+
+.hidden {
+  display: none;
+}

fala/assets-src/scripts/cookies.js

@@ -58,17 +58,26 @@ if (cookiePolicyForm) {
   cookiePolicyForm.addEventListener("submit", (e) => {
     e.preventDefault();
     const selectedValue = document.querySelector("input[name='cookies']:checked").value;
+    const notificationBanner = document.getElementById('cookieChoiceNotificationBanner');
     if (selectedValue === "Allowed") {
       setCookie("cookiePermission", "Allowed", 30);
       tagMan();
       if (cookieBanner) {
         cookieBanner.hidden = true;
       }
+      if (notificationBanner) {
+        notificationBanner.classList.remove("hidden");
+        notificationBanner.scrollIntoView()
+      }
     } else if (selectedValue === "Rejected") {
       setCookie("cookiePermission", "Rejected", 30);
       if (cookieBanner) {
         cookieBanner.hidden = true;
       }
+      if (notificationBanner) {
+        notificationBanner.classList.remove("hidden");
+        notificationBanner.scrollIntoView()
+      }
     }
   });
 };

fala/templates/adviser/cookies.html

@@ -3,11 +3,30 @@
 {% block pageTitle %}Cookies{% endblock %}
 
 {%- from 'govuk_frontend_jinja/components/radios/macro.html' import govukRadios -%}
+{%- from 'govuk_frontend_jinja/components/notification-banner/macro.html' import govukNotificationBanner -%}
 
 {% block content %}
   <div class="govuk-grid-column-full">
     <div id="google_translate_element" class="govuk-!-margin-bottom-6"></div>
 
+    <div class="govuk-grid-row">
+      <div class="govuk-grid-column-two-thirds">
+        {{ govukNotificationBanner({
+          'type': 'success',
+          'role': 'alert',
+          'titleText': 'Success',
+          'text': 'Your cookie settings were saved',
+          'html': '<h3 class="govuk-notification-banner__heading">Your cookie settings were saved</h3>
+                   <p>Other government services may set additional cookies. These will have a separate cookie policy and banner.</p>
+                   <p class="govuk-body"><a class="govuk-notification-banner__link" href="/">Go back to the page you were looking at</a></p>',
+          'classes': 'hidden',
+          'attributes': {
+            'id': 'cookieChoiceNotificationBanner'
+          }
+        }) }}
+      </div>
+    </div>
+
     <h1 class="govuk-heading-xl">Cookies</h1>
 
     <p class="govuk-body">