Merge pull request #4 from tv2/feature/TV2DK-2494

TV2DK-2494: Maintain temporary settings across screens in PR
tv2 · Jul 8, 2019 · c6354ce · c6354ce
2 parents 9b594fe + 6f3f58b
commit c6354ce
Show file tree

Hide file tree

Showing 10 changed files with 185 additions and 6 deletions.
diff --git a/etc/appConfig.js b/etc/appConfig.js
@@ -75,6 +75,18 @@ module.exports = {
     chunks: ['oilstub', 'oil'],
     chunksSortMode: 'dependency',
     inject: 'head'
+  }, {
+    filename: 'demos/cpc-custom-purposes-default.html',
+    template: path.resolve(sourcePath, 'demos', 'cpc-custom-purposes-default.html'),
+    chunks: ['oilstub', 'oil'],
+    chunksSortMode: 'dependency',
+    inject: 'head'
+  }, {
+    filename: 'demos/cpc-custom-purposes-preserve.html',
+    template: path.resolve(sourcePath, 'demos', 'cpc-custom-purposes-preserve.html'),
+    chunks: ['oilstub', 'oil'],
+    chunksSortMode: 'dependency',
+    inject: 'head'
   }, {
     filename: 'demos/english-version.html',
     template: path.resolve(sourcePath, 'demos', 'english-version.html'),

diff --git a/src/demos/cpc-custom-purposes-preserve.html b/src/demos/cpc-custom-purposes-preserve.html
@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="x-ua-compatible" content="ie=edge">
+  <title>Test Page</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <!-- tag::oil-config[] -->
+  <script id="oil-configuration" type="application/configuration">
+      {
+        "config_version": 1,
+        "advanced_settings": true,
+        "poi_group_name": "testGroup",
+        "timeout": -1,
+        "publicPath": "/",
+        "locale": {
+          "version": 1,
+          "localeId": "de",
+          "texts": {
+            "label_intro_heading": "We use cookies and other technologies",
+            "label_intro": "The website uses cookies, web beacons, JavaScript and similar technologies.",
+            "label_button_yes": "OK",
+            "label_button_back": "Back",
+            "label_button_advanced_settings": "More information",
+            "label_cpc_heading": "Please select a privacy setting:",
+            "label_cpc_text": "cpc_text",
+            "label_cpc_activate_all": "Activate all",
+            "label_cpc_deactivate_all": "Deactivate all",
+            "label_cpc_purpose_desc": "Purposes",
+            "label_cpc_purpose_01_text": "Accessing a Device",
+            "label_cpc_purpose_01_desc": "Allow storing or accessing information on a user’s device.",
+            "label_cpc_purpose_02_text": "Advertising Personalisation",
+            "label_cpc_purpose_02_desc": "Allow processing of a user’s data to provide and inform personalised advertising (including delivery, measurement, and reporting) based on a user’s preferences or interests known or inferred from data collected across multiple sites, apps, or devices; and/or accessing or storing information on devices for that purpose.",
+            "label_cpc_purpose_03_text": "Analytics",
+            "label_cpc_purpose_03_desc": "Allow processing of a user’s data to deliver content or advertisements and measure the delivery of such content or advertisements, extract insights and generate reports to understand service usage; and/or accessing or storing information on devices for that purpose.",
+            "label_cpc_purpose_04_text": "Content Personalisation",
+            "label_cpc_purpose_04_desc": "Allow processing of a user’s data to provide and inform personalised content (including delivery, measurement, and reporting) based on a user’s preferences or interests known or inferred from data collected across multiple sites, apps, or devices; and/or accessing or storing information on devices for that purpose.",
+            "label_cpc_purpose_05_text": "Matching Data to Offline Sources",
+            "label_cpc_purpose_05_desc": "Combining data from offline sources that were initially collected in other contexts",
+            "label_cpc_purpose_06_text": "Linking Devices",
+            "label_cpc_purpose_06_desc": "Allow processing of a user’s data to connect such user across multiple devices.",
+            "label_cpc_purpose_07_text": "Precise Geographic Location data",
+            "label_cpc_purpose_07_desc": "Allow processing of a user’s precise geographic location data in support of a purpose for which that certain third party has consent",
+            "label_poi_group_list_heading": "Your consent for companies of the group",
+            "label_poi_group_list_text": "Here is a list of companies of the group:",
+            "label_third_party": "Third Parties",
+            "label_thirdparty_list_heading": "Your consent for third party software",
+            "label_thirdparty_list_text": "Your consent",
+            "label_nocookie_head": "In order to be able to provide our services in the best possible way, cookies must be activated in your browser.",
+            "label_nocookie_text": "Please activate Cookies in the properties of your Browsers."
+          }
+        },
+        "customPurposes": [{
+          "id": 25,
+          "name": "Custom Purpose 1",
+          "description": "Lorem!"
+        },
+        {
+          "id": 26,
+          "name": "Custom Purpose 2",
+          "description": "Lorem2!"
+        }],
+        "advanced_settings_purposes_preserve": true
+      }
+  </script>
+  <!-- end::oil-config[] -->
+  <style>
+    body {
+      font-family: 'Nunito', sans-serif;
+      font-size: 60px;
+      color: #f7f7f7;
+      height: 100%;
+      background: linear-gradient(20deg, #3a871a 0%, #a5ba10 50%, #cfcd26 100%);
+      padding: 0;
+      margin: 0;
+    }
+
+    .demoname {
+      padding: 24px;
+    }
+  </style>
+</head>
+
+<body>
+<div class="demoname">Group A Site A</div>
+</body>
+</html>
diff --git a/src/scripts/core/core_config.js b/src/scripts/core/core_config.js
@@ -235,6 +235,10 @@ export function getAdvancedSettingsPurposesDefault() {
   return getConfigValue(OIL_CONFIG.ATTR_ADVANCED_SETTINGS_PURPOSES_DEFAULT, false);
 }
 
+export function getAdvancedSettingsPurposesPreserve() {
+  return getConfigValue(OIL_CONFIG.ATTR_ADVANCED_SETTINGS_PURPOSES_PRESERVE, false);
+}
+
 export function getDefaultToOptin() {
   return getConfigValue(OIL_CONFIG.ATTR_DEFAULT_TO_OPTIN, false);
 }

diff --git a/src/scripts/core/core_constants.js b/src/scripts/core/core_constants.js
@@ -30,6 +30,7 @@ export const OIL_CONFIG = {
   ATTR_IAB_VENDOR_WHITELIST: 'iabVendorWhitelist',
   ATTR_SHOW_LIMITED_VENDORS_ONLY: 'show_limited_vendors_only',
   ATTR_ADVANCED_SETTINGS_PURPOSES_DEFAULT: 'advanced_settings_purposes_default',
+  ATTR_ADVANCED_SETTINGS_PURPOSES_PRESERVE: 'advanced_settings_purposes_preserve',
   ATTR_DEFAULT_TO_OPTIN: 'default_to_optin',
   ATTR_GDPR_APPLIES_GLOBALLY: 'gdpr_applies_globally',
   ATTR_GDPR_APPLIES: 'gdpr_applies',

diff --git a/src/scripts/core/core_pending_purposes.js b/src/scripts/core/core_pending_purposes.js
@@ -0,0 +1,36 @@
+import { logInfo } from './core_log';
+
+export let pendingPurposes = false;
+
+export function getPendingPurposes() {
+  return pendingPurposes;
+}
+
+export function setPendingPurposes(purposes) {
+  pendingPurposes = purposes;
+  logInfo('set pending purposes', pendingPurposes)
+}
+
+export function addPendingPurpose(str) {
+  const id = parseInt(str, 10);
+  if (pendingPurposes.indexOf(id) === -1) {
+    pendingPurposes.push(id);
+    logInfo('add pending purpose', id)
+  }
+}
+
+export function removePendingPurpose(str) {
+  const id = parseInt(str, 10);
+  if (pendingPurposes.indexOf(id) !== -1) {
+    pendingPurposes = pendingPurposes.filter(i => i !== id);
+    logInfo('remove pending purpose', id)
+  }
+}
+
+export function setPendingPurpose(Id, value) {
+  if(value) {
+    addPendingPurpose(Id);
+  } else {
+    removePendingPurpose(Id);
+  }
+}
diff --git a/src/scripts/userview/userview_modal.js b/src/scripts/userview/userview_modal.js
@@ -25,12 +25,13 @@ import * as AdvancedSettingsStandard from './view/oil.advanced.settings.standard
 import * as AdvancedSettingsTabs from './view/oil.advanced.settings.tabs';
 import { logError, logInfo } from '../core/core_log';
 import { getCpcType, getTheme, getTimeOutValue, isOptoutConfirmRequired, isPersistMinimumTracking } from './userview_config';
-import { gdprApplies, getAdvancedSettingsPurposesDefault, isPoiActive, getCustomPurposeIds } from '../core/core_config';
+import { gdprApplies, getAdvancedSettingsPurposesDefault, isPoiActive, getCustomPurposeIds, getAdvancedSettingsPurposesPreserve } from '../core/core_config';
 import { applyPrivacySettings, getPrivacySettings, getSoiConsentData } from './userview_privacy';
 import { activateOptoutConfirm } from './userview_optout_confirm';
 import { getPurposeIds, loadVendorListAndCustomVendorList } from '../core/core_vendor_lists';
 import { manageDomElementActivation } from '../core/core_tag_management';
 import { sendConsentInformationToCustomVendors } from '../core/core_custom_vendors';
+import { getPendingPurposes, setPendingPurposes } from '../core/core_pending_purposes';
 
 // Initialize our Oil wrapper and save it ...
 
@@ -98,6 +99,9 @@ export function oilShowPreferenceCenter() {
           } else {
             currentPrivacySettings = getAdvancedSettingsPurposesDefault() ? [...getPurposeIds(), ...getCustomPurposeIds()] : [];
           }
+          if (!getPendingPurposes() && getAdvancedSettingsPurposesPreserve()) {
+            setPendingPurposes(currentPrivacySettings);
+          }
           applyPrivacySettings(currentPrivacySettings);
         });
       });

diff --git a/src/scripts/userview/userview_privacy.js b/src/scripts/userview/userview_privacy.js
@@ -2,7 +2,9 @@ import {getSoiCookie} from '../core/core_cookies';
 import {PRIVACY_FULL_TRACKING} from '../core/core_constants';
 import {logInfo} from '../core/core_log';
 import {forEach} from './userview_modal';
-import {getPurposes} from '../core/core_vendor_lists';
+import {getPurposes, getPurposeIds} from '../core/core_vendor_lists';
+import {getAdvancedSettingsPurposesPreserve, getCustomPurposeIds} from '../core/core_config';
+import {getPendingPurposes} from '../core/core_pending_purposes';
 
 export function getSoiConsentData() {
   let soiCookie = getSoiCookie();
@@ -19,21 +21,36 @@ export function getSoiConsentData() {
  *  "{}": if there are multiple checkboxes
  */
 export function getPrivacySettings() {
+  const pendingPurposes = getPendingPurposes();
   if (document.querySelector('.as-js-purpose-slider')) {
     let result = {};
     forEach(document.querySelectorAll('.as-js-purpose-slider'), (element) => {
       let element_id = element.dataset ? element.dataset.id : element.getAttribute('data-id');
       result[element_id] = element.checked;
     }, this);
     return result;
+  } else if (pendingPurposes && getAdvancedSettingsPurposesPreserve()) {
+    const result = {};
+    [...getPurposeIds(), ...getCustomPurposeIds()].forEach((id) => {
+      result[id] = pendingPurposes.indexOf(id) !== -1;
+    });
+    return result;
   }
   return PRIVACY_FULL_TRACKING;
 }
 
 export function applyPrivacySettings(allowedPurposes) {
-  logInfo('Apply privacy settings from cookie', allowedPurposes);
+  logInfo('Apply privacy settings', allowedPurposes, getPendingPurposes() );
+  const pendingPurposes = getPendingPurposes();
 
-  if (allowedPurposes === 1) {
+  if (pendingPurposes && getAdvancedSettingsPurposesPreserve()) {
+    forEach(document.querySelectorAll('.as-js-purpose-slider'), (domNode) => {
+      if (domNode) {
+        const id = parseInt(domNode.getAttribute('data-id'), 10);
+        domNode.checked = pendingPurposes.indexOf(id) !== -1;
+      }
+    });
+  } else if (allowedPurposes === 1) {
     forEach(document.querySelectorAll('.as-js-purpose-slider'), (domNode) => {
       domNode && (domNode.checked = true);
     });

diff --git a/src/scripts/userview/view/oil.advanced.settings.standard.js b/src/scripts/userview/view/oil.advanced.settings.standard.js
@@ -2,12 +2,12 @@ import '../../../styles/cpc_standard.scss';
 import { OIL_LABELS } from '../userview_constants';
 import { forEach } from '../userview_modal';
 import { getLabel, getLabelWithDefault, getTheme } from '../userview_config';
-import { getCustomPurposes, getCustomVendorListUrl } from '../../core/core_config';
+import { getCustomPurposes, getCustomVendorListUrl, getAdvancedSettingsPurposesPreserve } from '../../core/core_config';
 import { JS_CLASS_BUTTON_OPTIN, OIL_GLOBAL_OBJECT_NAME } from '../../core/core_constants';
 import { setGlobalOilObject } from '../../core/core_utils';
 import { getCustomVendorList, getPurposes, getVendorList, getVendorsToDisplay } from '../../core/core_vendor_lists';
 import { BackButton, YesButton } from './components/oil.buttons';
-
+import { setPendingPurpose } from '../../core/core_pending_purposes';
 
 const CLASS_NAME_FOR_ACTIVE_MENU_SECTION = 'as-oil-cpc__category-link--active';
 
@@ -39,6 +39,11 @@ export function attachCpcHandlers() {
   forEach(document.querySelectorAll('.as-js-btn-deactivate-all'), (domNode) => {
     domNode && domNode.addEventListener('click', deactivateAll, false);
   });
+  if (getAdvancedSettingsPurposesPreserve()) {
+    forEach(document.querySelectorAll('.as-js-purpose-slider'), (domNode) => {
+      domNode && domNode.addEventListener('click', handleToggle, false);
+    });
+  }
 }
 
 
@@ -204,6 +209,14 @@ export function deactivateAll() {
   });
 }
 
+function handleToggle(event) {
+  if (event && event.target) {
+    const val = event.target.checked || false;
+    const id = event.target.getAttribute('data-id') || 0;
+    setPendingPurpose(id, val);
+  }
+}
+
 function switchLeftMenuClass(element) {
   let allElementsInMenu = element.parentNode.children;
 

diff --git a/test/fixtures/config/full.config.html b/test/fixtures/config/full.config.html
@@ -8,6 +8,7 @@
   "iabVendorBlacklist": true,
   "iabVendorWhitelist": true,
   "advanced_settings_purposes_default": true,
+  "advanced_settings_purposes_preserve": true,
   "default_to_optin": true,
   "poi_group_name": true,
   "privacy_page_url": true,

diff --git a/test/specs/core/core_config.spec.js b/test/specs/core/core_config.spec.js
@@ -1,6 +1,7 @@
 import {
   gdprApplies,
   getAdvancedSettingsPurposesDefault,
+  getAdvancedSettingsPurposesPreserve,
   getConfigValue,
   getCookieExpireInDays,
   getCustomPurposes,
@@ -124,6 +125,7 @@ describe('core_config', () => {
 
     const DEFAULT_COOKIE_EXPIRES_IN = 31;
     const DEFAULT_ADVANCED_SETTINGS_PURPOSES_DEFAULT = false;
+    const DEFAULT_ADVANCED_SETTINGS_PURPOSES_PRESERVE = false;
     const DEFAULT_DEFAULT_TO_OPTIN = false;
     const DEFAULT_POI_GROUP = 'default';
     const DEFAULT_CUSTOM_PURPOSES = [];
@@ -137,6 +139,7 @@ describe('core_config', () => {
       expect(getIabVendorBlacklist()).toEqual(true);
       expect(getDefaultToOptin()).toEqual(true);
       expect(getAdvancedSettingsPurposesDefault()).toEqual(true);
+      expect(getAdvancedSettingsPurposesPreserve()).toEqual(true);
       expect(getCustomPurposes()).toEqual(true);
       expect(getLocaleUrl()).toEqual(true);
       expect(getCookieExpireInDays()).toEqual(true);
@@ -151,6 +154,7 @@ describe('core_config', () => {
       expect(getIabVendorBlacklist()).toBeFalsy();
       expect(getDefaultToOptin()).toEqual(DEFAULT_DEFAULT_TO_OPTIN);
       expect(getAdvancedSettingsPurposesDefault()).toEqual(DEFAULT_ADVANCED_SETTINGS_PURPOSES_DEFAULT);
+      expect(getAdvancedSettingsPurposesPreserve()).toEqual(DEFAULT_ADVANCED_SETTINGS_PURPOSES_PRESERVE);
       expect(getCustomPurposes()).toEqual(DEFAULT_CUSTOM_PURPOSES);
       expect(getLocaleUrl()).toBeUndefined();
       expect(getCookieExpireInDays()).toEqual(DEFAULT_COOKIE_EXPIRES_IN);