https://hapus.wales/app/themes/phw-hapus-theme/assets/js/cookie-banner.js

1document.addEventListener('DOMContentLoaded', () => {
2	if (!window.cookies) {
3		console.error(
4			'Cookie functions not found. Check parent theme is enabled or functions are included if parent theme not available.'
5		);
6		return;
7	}
8
9	if (!gtag) {
10		console.error('gtag function not found. Ensure Google Tag Manager is correctly installed.');
11		return;
12	}
13	const banner = document.getElementById('cookie-banner');
14	const consentCookie = window.cookies.getCookie('userConsent');
15	let userConsent = null;
16
17	// Parse existing consent if available
18	if (consentCookie) {
19		try {
20			userConsent = JSON.parse(consentCookie);
21		} catch (e) {
22			userConsent = null;
23		}
24	}
25
26	if (!userConsent) {
27		// Show banner if no consent found
28		if (banner) {
29			showBanner(banner);
30		}
31
32		// Get buttons
33		const acceptBtn = document.getElementById('accept-cookies');
34		const rejectBtn = document.getElementById('reject-cookies');
35
36		// Set up button event listeners
37		if (acceptBtn) {
38			acceptBtn.addEventListener('click', function () {
39				acceptConsent();
40			});
41		}
42		if (rejectBtn) {
43			rejectBtn.addEventListener('click', function () {
44				rejectConsent();
45			});
46		}
47	} else {
48		if (banner) {
49			hideBanner(banner); // Hide banner
50		}
51	}
52
53	// Declare form and banner elements
54	const cookiePreferencesForm = document.getElementById('update-cookie-preferences');
55	const notificationBanner = document.getElementById('update-cookie-preferences-notification-banner');
56	const radioGroup = document.querySelectorAll('input[name="cookies-usage"]');
57
58	// Add submit handler for update-cookie-preferences form
59	if (cookiePreferencesForm) {
60		setCookiePreferencesRadios(userConsent); // Set initial radio button state based on existing consent
61		cookiePreferencesForm.addEventListener('submit', function (e) {
62			e.preventDefault();
63
64			const formData = new FormData(e.target);
65			const analytics = formData.get('cookies-usage');
66
67			// Reset notification banner
68			resetNotificationBanner(notificationBanner); // Initial reset
69
70			// Determine user choice and process
71			let result = null;
72			if (analytics === 'enabled') {
73				result = acceptConsent();
74			} else if (analytics === 'disabled') {
75				result = rejectConsent();
76			} else {
77				// No valid selection
78				if (notificationBanner) {
79					notificationBanner.textContent = acfOptions.selectPreference;
80				}
81				return;
82			}
83			// Show notification based on result
84			if (notificationBanner) {
85				if (result && result.success) {
86					notificationBanner.textContent = acfOptions.settingsSaved;
87				} else {
88					console.error('Error updating consent:', result && result.error ? result.error : 'Unknown error');
89					notificationBanner.textContent = acfOptions.errorUpdating;
90				}
91			}
92		});
93		// Attach change event listeners to radios to reset banner on change
94		radioGroup?.forEach(radio => {
95			radio.addEventListener('change', () => resetNotificationBanner(notificationBanner));
96		});
97	}
98});
99
100// Define constant for cookie expiry days
101const COOKIE_EXPIRY_DAYS = 365;
102
103const hideBanner = banner => {
104	banner.style.display = 'none';
105};
106
107const showBanner = banner => {
108	banner.style.display = 'block';
109};
110
111// Function to reset/hide notification banner
112const resetNotificationBanner = (notificationBanner) => {
113  if (notificationBanner) {
114    notificationBanner.textContent = "";
115  }
116};
117
118// Initialize GTM dataLayer if not already present
119window.dataLayer = window.dataLayer || [];
120function gtag() {
121	window.dataLayer.push(arguments);
122}
123
124// Trigger GTM consent update
125const triggerGTMConsentUpdate = consentCategories => {
126	const consentStatus = {
127		analytics_storage: consentCategories.includes('analytics') ? 'granted' : 'denied',
128		ad_storage: consentCategories.includes('ad_storage') ? 'granted' : 'denied',
129		ad_user_data: consentCategories.includes('ad_user_data') ? 'granted' : 'denied',
130		ad_personalization: consentCategories.includes('ad_personalization') ? 'granted' : 'denied'
131	};
132	gtag('consent', 'update', consentStatus);
133};
134
135// Accept and reject consent handlers
136const acceptConsent = () => {
137	try {
138		const consentCategories = ['analytics', 'ad_storage', 'ad_user_data', 'ad_personalization']; // Includes all categories (confirmed by Sarah @ PHW)

139		window.cookies.setCookie('userConsent', JSON.stringify(consentCategories), COOKIE_EXPIRY_DAYS);
140		triggerGTMConsentUpdate(consentCategories);
141		const banner = document.getElementById('cookie-banner');
142		hideBanner(banner);
143		return { success: true };
144	} catch (error) {
145     	return { success: false, error: "Failed to set consent. " + (error && error.message ? error.message : "") };
146	}
147};
148
149const rejectConsent = () => {
150	try {
151		window.cookies.setCookie('userConsent', JSON.stringify([]), COOKIE_EXPIRY_DAYS);
152		triggerGTMConsentUpdate([]);
153		const banner = document.getElementById('cookie-banner');
154		hideBanner(banner);
155		return { success: true };
156	} catch (error) {
157     	return { success: false, error: "Failed to reject consent. " + (error && error.message ? error.message : "") };
158	}
159};
160
161// Set radio buttons in update-cookie-preferences block based on consent
162function setCookiePreferencesRadios(userConsent) {
163	const consent = Array.isArray(userConsent) ? userConsent : [];
164	const analyticsConsent = consent.includes('analytics');
165
166	const analyticsRadio = document.getElementById('analyticsRadio');
167	const noAnalyticsRadio = document.getElementById('noAnalyticsRadio');
168
169	if (analyticsRadio && noAnalyticsRadio) {
170		if (analyticsConsent) {
171			analyticsRadio.checked = true;
172		} else {
173			noAnalyticsRadio.checked = true;
174		}
175	}
176}