Merge pull request #653 from greenpeace/planet-6253

PLANET-6253 Add analytical cookies option in cookies block
greenpeace · Sep 6, 2021 · ec513e7 · ec513e7
2 parents 0dd4753 + dd20075
commit ec513e7
Show file tree

Hide file tree

Showing 4 changed files with 118 additions and 18 deletions.
diff --git 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
@@ -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 <Fragment>
     <section className={`block cookies-block ${className ?? ''}`}>
       {(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 => {
         />
       </Fragment>
       }
+      {((ENABLE_ANALYTICAL_COOKIES) && (isEditing || (analytical_cookies_name && analytical_cookies_description))) &&
+      <Fragment>
+        <label className="custom-control"
+              style={isSelected ? { pointerEvents: 'none' } : null}>
+          <input
+            type="checkbox"
+            tabIndex={isSelected ? '-1' : null}
+            name="analytical_cookies"
+            onChange={ () => {
+              if (analyticalCookiesChecked) {
+                setUserRevokedAnalytical(true);
+                setUserRevokedAllCookies(true);
+                if (allCookiesChecked) {
+                  setConsentCookie(ALL_COOKIES);
+                } else {
+                  setConsentCookie(ONLY_NECESSARY);
+                }
+              } else {
+                if (allCookiesChecked) {
+                  setConsentCookie(NECESSARY_ANALYTICAL_MARKETING);
+                } else {
+                  setConsentCookie(NECESSARY_ANALYTICAL);
+                }
+              }
+            } }
+            checked={analyticalCookiesChecked}
+            className="p4-custom-control-input"
+          />
+          <FrontendRichText
+            tagName="span"
+            className="custom-control-description"
+            placeholder={__('Enter analytical cookies name', 'planet4-blocks-backend')}
+            value={analytical_cookies_name}
+            onChange={toAttribute('analytical_cookies_name')}
+            keepPlaceholderOnFocus={true}
+            withoutInteractiveFormatting
+            multiline="false"
+            editable={isEditing}
+            allowedFormats={[]}
+          />
+        </label>
+        <FrontendRichText
+          tagName="p"
+          className="cookies-checkbox-description"
+          placeholder={__('Enter analytical cookies description', 'planet4-blocks-backend')}
+          value={analytical_cookies_description}
+          onChange={toAttribute('analytical_cookies_description')}
+          keepPlaceholderOnFocus={true}
+          withoutInteractiveFormatting
+          editable={isEditing}
+          allowedFormats={['core/bold', 'core/italic']}
+        />
+      </Fragment>
+      }
       {(isEditing || (all_cookies_name && all_cookies_description)) &&
       <Fragment>
         <label className="custom-control"
@@ -159,9 +232,17 @@ export const CookiesFrontend = props => {
             onChange={ () => {
               if (allCookiesChecked) {
                 setUserRevokedAllCookies(true);
-                setConsentCookie(ONLY_NECESSARY);
+                if (ENABLE_ANALYTICAL_COOKIES && analyticalCookiesChecked) {
+                  setConsentCookie(NECESSARY_ANALYTICAL);
+                } else {
+                  setConsentCookie(ONLY_NECESSARY);
+                }
               } else {
-                setConsentCookie(ALL_COOKIES);
+                if (ENABLE_ANALYTICAL_COOKIES && analyticalCookiesChecked) {
+                  setConsentCookie(NECESSARY_ANALYTICAL_MARKETING);
+                } else {
+                  setConsentCookie(ALL_COOKIES);
+                }
               }
             } }
             name="all_cookies"

diff --git a/classes/blocks/class-cookies.php b/classes/blocks/class-cookies.php
@@ -29,27 +29,35 @@ public function __construct() {
 				// todo: Remove when all content is migrated.
 				'render_callback' => [ self::class, 'render_frontend' ],
 				'attributes'      => [
-					'title'                         => [
+					'title'                          => [
 						'type'    => 'string',
 						'default' => '',
 					],
-					'description'                   => [
+					'description'                    => [
 						'type'    => 'string',
 						'default' => '',
 					],
-					'necessary_cookies_name'        => [
+					'necessary_cookies_name'         => [
 						'type'    => 'string',
 						'default' => '',
 					],
-					'necessary_cookies_description' => [
+					'necessary_cookies_description'  => [
 						'type'    => 'string',
 						'default' => '',
 					],
-					'all_cookies_name'              => [
+					'all_cookies_name'               => [
 						'type'    => 'string',
 						'default' => '',
 					],
-					'all_cookies_description'       => [
+					'all_cookies_description'        => [
+						'type'    => 'string',
+						'default' => '',
+					],
+					'analytical_cookies_name'        => [
+						'type'    => 'string',
+						'default' => '',
+					],
+					'analytical_cookies_description' => [
 						'type'    => 'string',
 						'default' => '',
 					],

diff --git a/classes/class-loader.php b/classes/class-loader.php
@@ -355,7 +355,8 @@ public function enqueue_editor_scripts( $hook ) {
 
 		// Variables reflected from PHP to JS.
 		$reflection_vars = [
-			'dateFormat' => get_option( 'date_format' ),
+			'dateFormat'                => get_option( 'date_format' ),
+			'enable_analytical_cookies' => $option_values['enable_analytical_cookies'] ?? '',
 		];
 		wp_localize_script( 'planet4-blocks-editor-script', 'p4bk_vars', $reflection_vars );
 
@@ -401,10 +402,12 @@ public function enqueue_public_assets() {
 		self::enqueue_local_script( 'post_action', 'public/js/post_action.js', [ 'jquery' ] );
 
 		// Variables reflected from PHP to JS.
+		$option_values   = get_option( 'planet4_options' );
 		$reflection_vars = [
-			'dateFormat' => get_option( 'date_format' ),
-			'siteUrl'    => site_url(),
-			'themeUrl'   => get_template_directory_uri(),
+			'dateFormat'                => get_option( 'date_format' ),
+			'siteUrl'                   => site_url(),
+			'themeUrl'                  => get_template_directory_uri(),
+			'enable_analytical_cookies' => $option_values['enable_analytical_cookies'] ?? '',
 		];
 		wp_localize_script( 'planet4-blocks-script', 'p4bk_vars', $reflection_vars );