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)) &&