From 166de609841210e42e7079740a74012d088ecd84 Mon Sep 17 00:00:00 2001
From: Jim Carlton <imucup@gmail.com>
Date: Wed, 11 Dec 2024 13:46:55 +1100
Subject: [PATCH] Cookie consent - updates documentation config, cleans up js

---
 .../cookie-consent/_cookie-consent.hbs        | 28 +----------
 src/components/cookie-consent/blank.hbs       |  4 ++
 .../cookie-consent/cookie-consent-config.js   |  2 +-
 .../cookie-consent/cookie-consent.js          | 47 +++++++++++++++----
 src/components/cookie-consent/theme.hbs       |  4 ++
 src/global/handlebars/layouts/layout.hbs      |  2 +-
 6 files changed, 51 insertions(+), 36 deletions(-)

diff --git a/src/components/cookie-consent/_cookie-consent.hbs b/src/components/cookie-consent/_cookie-consent.hbs
index 96e251a3..b3b4f14c 100644
--- a/src/components/cookie-consent/_cookie-consent.hbs
+++ b/src/components/cookie-consent/_cookie-consent.hbs
@@ -1,31 +1,7 @@
 {{#if-equals type "banner"}}
-{{!-- <div class="nsw-cookie-banner js-cookie-banner" role="alert">
-  <div class="nsw-cookie-banner__wrapper {{#if-equals type "auto opt in"}}js-cookie-banner-auto-opt-in{{else}}js-cookie-banner-opt-in{{/if-equals}}">
-    <span class="nsw-cookie-banner__main-message">
-      <div class="nsw-cookie-banner__content">
-        <div class="nsw-cookie-banner__title">{{title}}</div>
-        <p>{{{content}}}</p>
-      </div>
-      <div class="nsw-cookie-banner__buttons-container">
-        <button class="nsw-button nsw-button--dark js-cookie-banner-accept">{{#if ctaAccept}}{{ctaAccept}}{{else}}Accept all cookies{{/if}}</button>
-        {{#if ctaReject}}<button href="{{ctaHref}}" class="nsw-button nsw-button--dark js-cookie-banner-reject">{{#if ctaReject}}{{ctaReject}}{{else}}Reject cookies{{/if}}</button>{{/if}}
-        <a href="{{urlManageCookies}}" class="nsw-button nsw-button--dark-outline">Manage your cookies</a>
-      </div>
-    </span>
-    {{#if confirmationMessage}}
-    <span class="nsw-cookie-banner__confirmation-message" hidden="true">
-      <div class="nsw-cookie-banner__content">
-        <p>{{{confirmationMessage}}}</p>
-      </div>
-      <div class="nsw-cookie-banner__buttons-container">
-        <button class="nsw-button nsw-button--dark js-cookie-banner-dismiss">Hide this message</button>
-      </div>
-    </span>
-    {{/if}}
-  </div>
-</div> --}}
+<a href="#" class="js-open-banner-cookie-consent" aria-haspopup="dialog">Trigger consent banner</a>
 {{/if-equals}}
 
 {{#if-equals type "dialog"}}
-<a href="#" class="js-open-dialog-cookie-consent" aria-haspopup="dialog">Cookie preferences</a>
+<a href="#" class="js-open-dialog-cookie-consent-preferences" aria-haspopup="dialog">Trigger cookie preferences</a>
 {{/if-equals}}
diff --git a/src/components/cookie-consent/blank.hbs b/src/components/cookie-consent/blank.hbs
index 5e0beb7a..845f7ad5 100644
--- a/src/components/cookie-consent/blank.hbs
+++ b/src/components/cookie-consent/blank.hbs
@@ -6,5 +6,9 @@ model:
   cookie-consent-4: json/cookie-consent-4.json
 ---
 
+<p>
 {{>_cookie-consent model.cookie-consent-1 type="banner"}}
+</p>
+<p>
 {{>_cookie-consent model.cookie-consent-4 type="dialog"}}
+</p>
\ No newline at end of file
diff --git a/src/components/cookie-consent/cookie-consent-config.js b/src/components/cookie-consent/cookie-consent-config.js
index 08403cdf..df95d82d 100644
--- a/src/components/cookie-consent/cookie-consent-config.js
+++ b/src/components/cookie-consent/cookie-consent-config.js
@@ -27,7 +27,7 @@ waitForCookieConsent(() => {
             acceptAllBtn: 'Accept all',
             acceptNecessaryBtn: 'Reject all',
             showPreferencesBtn: 'Manage your preferences',
-            confirmationMessage: 'Thanks for making your selection. View and update your cookie preferences <a href="#cookie-consent" class="js-open-dialog-cookie-consent" aria-haspopup="dialog">here</a>.',
+            confirmationMessage: 'Thanks for making your selection. View and update your cookie preferences <a href="#cookie-consent" class="js-open-dialog-cookie-consent-preferences" aria-haspopup="dialog">here</a>.',
           },
           preferencesModal: {
             title: 'Manage cookie preferences',
diff --git a/src/components/cookie-consent/cookie-consent.js b/src/components/cookie-consent/cookie-consent.js
index 5c448a05..7eeca821 100644
--- a/src/components/cookie-consent/cookie-consent.js
+++ b/src/components/cookie-consent/cookie-consent.js
@@ -54,7 +54,7 @@ class CookieConsent {
 
     // Create the dialog dynamically
     const preferencesDialogHtml = `
-      <div class="js-cookie-consent nsw-cookie-dialog nsw-dialog nsw-dialog--single-action js-dialog js-dialog-dismiss" id="cookie-consent" role="dialog" aria-labelledby="cookie-consent-dialog">
+      <div class="js-cookie-consent nsw-cookie-dialog nsw-dialog nsw-dialog--single-action js-dialog js-dialog-dismiss" id="cookie-consent-preferences" role="dialog" aria-labelledby="cookie-consent-dialog">
         <div class="nsw-dialog__wrapper">
           <div class="nsw-dialog__container">
             <div class="nsw-dialog__top">
@@ -97,7 +97,7 @@ class CookieConsent {
     `
 
     // Append to the body
-    const dialogContainer = document.querySelector('.js-open-dialog-cookie-consent')
+    const dialogContainer = document.querySelector('.js-open-dialog-cookie-consent-preferences')
 
     // Initialise dialog
     if (dialogContainer) {
@@ -141,7 +141,7 @@ class CookieConsent {
             <div class="nsw-cookie-banner__buttons-container">
               ${consentModal.acceptAllBtn ? `<button class="nsw-button nsw-button--dark js-close-dialog ${!consentModal.confirmationMessage ? 'js-dismiss-cookie-banner' : ''}" data-role="accept-all">${consentModal.acceptAllBtn}</button>` : ''}
               ${consentModal.acceptNecessaryBtn ? `<button class="nsw-button nsw-button--dark js-cookie-banner-reject  ${!consentModal.confirmationMessage ? 'js-dismiss-cookie-banner' : ''}" data-role="reject-all">${consentModal.acceptNecessaryBtn}</button>` : ''}
-              <a href="#cookie-consent" class="nsw-button nsw-button--dark-outline js-open-dialog-cookie-consent" aria-haspopup="dialog">${consentModal.showPreferencesBtn || 'Manage your cookies'}</a>
+              <a href="#cookie-consent" class="nsw-button nsw-button--dark-outline js-open-dialog-cookie-consent-preferences" aria-haspopup="dialog">${consentModal.showPreferencesBtn || 'Manage your cookies'}</a>
             </div>
           </span>
           <span class="nsw-cookie-banner__confirmation-message" hidden="true">
@@ -171,11 +171,10 @@ class CookieConsent {
       this.attachEventListeners()
 
       // Immediately hide the banner if user has preferences set
-      // const preferences = CookieConsentAPI.getUserPreferences()
-      // if (preferences && preferences.acceptedCategories.length > 0) {
-      //   console.log('User has already made a selection')
-      //   this.consentBannerElement.setAttribute('hidden', 'true')
-      // }
+      const preferences = CookieConsentAPI.getUserPreferences()
+      if (preferences && preferences.acceptedCategories.length > 0) {
+        this.consentBannerElement.setAttribute('hidden', 'true')
+      }
     } else {
       console.error('Banner element not created')
     }
@@ -218,6 +217,17 @@ class CookieConsent {
       if (target.matches('.js-dismiss-cookie-banner')) {
         this.hideConsentBanner()
       }
+
+      // Manual trigger of cookie consent banner
+      if (target.matches('.js-open-banner-cookie-consent')) {
+        event.preventDefault()
+        this.showConsentBanner()
+      }
+
+      // Manual trigger of cookie consent preferences dialog
+      if (target.matches('.js-open-dialog-cookie-consent-preferences')) {
+        event.preventDefault()
+      }
     })
   }
 
@@ -291,6 +301,27 @@ class CookieConsent {
     }
   }
 
+  showConsentBanner() {
+    if (this.consentBannerElement) {
+      const description = this.consentBannerElement.querySelector('.nsw-cookie-banner__description')
+      const confirmationMessage = this.consentBannerElement.querySelector('.nsw-cookie-banner__confirmation-message')
+
+      if (this.consentBannerConfirmationMessage && confirmationMessage) {
+        // Hide the confirmation message if it's present
+        confirmationMessage.setAttribute('hidden', 'true')
+      }
+
+      if (description) {
+        // Show the main description
+        description.removeAttribute('hidden')
+      }
+
+      this.consentBannerElement.removeAttribute('hidden')
+    } else {
+      console.warn('Consent banner element not found.')
+    }
+  }
+
   hideConsentBanner() {
     if (this.consentBannerElement) {
       // Add a hidden attribute for transition
diff --git a/src/components/cookie-consent/theme.hbs b/src/components/cookie-consent/theme.hbs
index 79dfa513..80148633 100644
--- a/src/components/cookie-consent/theme.hbs
+++ b/src/components/cookie-consent/theme.hbs
@@ -7,6 +7,10 @@ model:
 ---
 
 {{#>_theme}}
+<p>
 {{>_cookie-consent model.cookie-consent-1 type="banner"}}
+</p>
+<p>
 {{>_cookie-consent model.cookie-consent-4 type="dialog"}}
+</p>
 {{/_theme}}
\ No newline at end of file
diff --git a/src/global/handlebars/layouts/layout.hbs b/src/global/handlebars/layouts/layout.hbs
index 4b6ff086..876b7fd6 100644
--- a/src/global/handlebars/layouts/layout.hbs
+++ b/src/global/handlebars/layouts/layout.hbs
@@ -71,7 +71,7 @@
                 acceptAllBtn: 'Accept all',
                 acceptNecessaryBtn: 'Reject all',
                 showPreferencesBtn: 'Manage your preferences',
-                confirmationMessage: `Thanks for making your selection. View and update your cookie preferences <a href="#cookie-consent" class="js-open-dialog-cookie-consent" aria-haspopup="dialog">here</a>.`
+                confirmationMessage: `Thanks for making your selection. View and update your cookie preferences <a href="#cookie-consent" class="js-open-dialog-cookie-consent-preferences" aria-haspopup="dialog">here</a>.`
               },
               preferencesModal: {
                 title: 'Manage cookie preferences',