diff --git a/assets/src/blocks/Cookies/CookiesBlock.js b/assets/src/blocks/Cookies/CookiesBlock.js
index c886d4c59..49960fcf1 100644
--- a/assets/src/blocks/Cookies/CookiesBlock.js
+++ b/assets/src/blocks/Cookies/CookiesBlock.js
@@ -38,6 +38,14 @@ export class CookiesBlock {
type: 'string',
default: ''
},
+ analytical_cookies_name: {
+ type: 'string',
+ default: ''
+ },
+ analytical_cookies_description: {
+ type: 'string',
+ default: ''
+ },
},
edit: CookiesEditor,
save() {
diff --git a/assets/src/blocks/Cookies/CookiesFrontend.js b/assets/src/blocks/Cookies/CookiesFrontend.js
index 75ec44f97..8c7b00683 100644
--- a/assets/src/blocks/Cookies/CookiesFrontend.js
+++ b/assets/src/blocks/Cookies/CookiesFrontend.js
@@ -1,12 +1,17 @@
import { Fragment } from '@wordpress/element';
import { FrontendRichText } from '../../components/FrontendRichText/FrontendRichText';
-import { removeCookie, useCookie, writeCookie } from './useCookie';
+import { removeCookie, useCookie, writeCookie, readCookie } from './useCookie';
import { useState, useEffect } from 'react';
const { __ } = wp.i18n;
const CONSENT_COOKIE = 'greenpeace';
const ONLY_NECESSARY = '1';
const ALL_COOKIES = '2';
+const NECESSARY_ANALYTICAL = '3';
+const NECESSARY_ANALYTICAL_MARKETING = '4';
+
+// Planet4 settings(Planet4>>Cookies text>>Enable Analytical Cookies).
+const ENABLE_ANALYTICAL_COOKIES = window.p4bk_vars.enable_analytical_cookies;
const showCookieNotice = () => {
// the .cookie-notice element belongs to the P4 Master Theme
@@ -31,6 +36,8 @@ export const CookiesFrontend = props => {
description,
necessary_cookies_name,
necessary_cookies_description,
+ analytical_cookies_name,
+ analytical_cookies_description,
all_cookies_name,
all_cookies_description,
isEditing,
@@ -41,10 +48,12 @@ export const CookiesFrontend = props => {
// Whether consent was revoked by the user since current page load.
const [userRevokedNecessary, setUserRevokedNecessary] = useState(false);
const [userRevokedAllCookies, setUserRevokedAllCookies] = useState(false);
+ const [userRevokedAnalytical, setUserRevokedAnalytical] = useState(false);
const [consentCookie, setConsentCookie, removeConsentCookie] = useCookie(CONSENT_COOKIE);
- const necessaryCookiesChecked = [ONLY_NECESSARY, ALL_COOKIES].includes(consentCookie);
- const allCookiesChecked = ALL_COOKIES === consentCookie;
- const hasConsent = allCookiesChecked || necessaryCookiesChecked;
+ const necessaryCookiesChecked = [ONLY_NECESSARY, NECESSARY_ANALYTICAL, ALL_COOKIES, NECESSARY_ANALYTICAL_MARKETING].includes(consentCookie);
+ const analyticalCookiesChecked = [NECESSARY_ANALYTICAL, NECESSARY_ANALYTICAL_MARKETING].includes(consentCookie);
+ const allCookiesChecked = ALL_COOKIES === consentCookie || NECESSARY_ANALYTICAL_MARKETING === consentCookie;
+ const hasConsent = allCookiesChecked || necessaryCookiesChecked || analyticalCookiesChecked;
const updateNoTrackCookie = () => {
if (hasConsent) {
@@ -53,7 +62,7 @@ export const CookiesFrontend = props => {
writeCookie('no_track', 'true');
}
};
- useEffect(updateNoTrackCookie, [hasConsent, userRevokedNecessary]);
+ useEffect(updateNoTrackCookie, [hasConsent, userRevokedNecessary, userRevokedAnalytical]);
const toggleCookieNotice = () => {
if (hasConsent) {
@@ -72,6 +81,12 @@ export const CookiesFrontend = props => {
}
useEffect(toggleHubSpotConsent, [allCookiesChecked, userRevokedAllCookies])
+ // Make the necessary cookies checked by default on user's first visit.
+ // Here if the No cookies set(absence of 'greenpeace' & 'no_track' cookies) consider as first visit of user.
+ if (!consentCookie && !readCookie('no_track') && !userRevokedNecessary) {
+ setConsentCookie(ONLY_NECESSARY);
+ }
+
return
{(isEditing || title) &&
@@ -117,7 +132,11 @@ export const CookiesFrontend = props => {
setUserRevokedAllCookies(true);
removeConsentCookie();
} else {
- setConsentCookie(ONLY_NECESSARY);
+ if (ENABLE_ANALYTICAL_COOKIES && analyticalCookiesChecked) {
+ setConsentCookie(NECESSARY_ANALYTICAL);
+ } else {
+ setConsentCookie(ONLY_NECESSARY);
+ }
}
} }
checked={necessaryCookiesChecked}
@@ -149,6 +168,60 @@ export const CookiesFrontend = props => {
/>
}
+ {((ENABLE_ANALYTICAL_COOKIES) && (isEditing || (analytical_cookies_name && analytical_cookies_description))) &&
+
+
+
+
+ }
{(isEditing || (all_cookies_name && all_cookies_description)) &&