Merge remote-tracking branch 'origin/master' into #191-oil-shown

# Conflicts:
#	test/specs/userview/userview_handle-optin.spec.js

docs/src/docs/03-configuration.adoc

@@ -87,6 +87,24 @@ A POI-List file must be a json containing an object with a single property `comp
 }
 ----
 
+===== Group-wide vendor whitelist and vendor blacklist
+
+Equal in function to the `iabVendorWhitelist` and `iabVendorBlacklist` configuration parameters you can limit vendor consent for every site that's part of your group.
+
+To do this, you want to extend your POI-List with either one of those elements:
+
+[source,json]
+----
+{
+  "companyList": [
+    "Super Comp"
+  ],
+  "iabVendorWhitelist": [1,2,3],
+  "iabVendorBlacklist": [9,10]
+}
+----
+
+**The values from the group-wide list override the values defined in a single site's configuration.** More information on what these parameters do, see the <<Blacklisting and Whitelisting>> section.
 
 
 === Functional Configuration Parameters
@@ -105,7 +123,7 @@ This is a full list of configurable options.
 | gdpr_applies_globally | Flag to indicate that publisher is from the EU, thus showing the OIL layer to every user. The flag is passed to vendors. | true
 | iabVendorBlacklist | Array of vendor IDs to exclude from consent. <<blacklisting-and-whitelisting, Details here>> | None
 | iabVendorListUrl | Vendorlist to use | https://vendorlist.consensu.org/vendorlist.json
-| iabVendorWhitelist | Array of vendor IDs to include in consent. If it is set, values in `iabVendorBlacklist` are ignored. <<blacklisting-and-whitelisting, Details here>> | none
+| iabVendorWhitelist | Array of vendor IDs to include in consent. If it is set, values in `iabVendorBlacklist` are ignored. <<blacklisting-and-whitelisting, Details here>>. When white- or blacklisting you might also be interested in the `show_limited_vendors_only` parameter. | none
 | <<texts-locale-object,locale>> | Object including locale version, id and labels. You can define the standard labels for all legal texts and buttons and set a version for it. <<locale-object, See here for details>> | None
 | locale_url | As an alternative to passing a locale object, set this to a JSON file with the locale configuration. See link:https://github.com/as-ideas/oil/blob/master/test/fixtures/config/deDE_01_locale.json[See here for an example file] | None
 | persist_min_tracking | If minimum tracking should result in removing all OIL cookies from the users browser and close the layer and store this selection in the oil cookie. | true
@@ -315,7 +333,7 @@ When preview_mode is not set in configuration and no consent cookie is found, th
 
 === Blacklisting and Whitelisting
 
-With *iabVendorWhitelist* and *iabVendorBlacklist* you can exclude specific vendors from the consent (blacklist) or include only the ones you want (whitelist). You can only use one method at the time - either whitelist or blacklist.
+With *iabVendorWhitelist* and *iabVendorBlacklist* you can exclude specific vendors from the consent (blacklist) or include only the ones you want (whitelist). You can only use one method at a time - either whitelist or blacklist.
 
 As an example, the vendorlist may contain vendors with vendor IDs 1 to 10. In the example the user accepts everything, he just pressed "OK". The consent-string would normally contain (by getVendorConsents) this data:
 

etc/appConfig.js

@@ -189,6 +189,18 @@ module.exports = {
     chunks: ['oilstub', 'oil'],
     chunksSortMode: 'dependency',
     inject: 'head'
+  }, {
+    filename: 'demos/poi-group-whitelist.html',
+    template: path.resolve(sourcePath, 'demos', 'poi-group-whitelist.html'),
+    chunks: ['oilstub', 'oil'],
+    chunksSortMode: 'dependency',
+    inject: 'head'
+  }, {
+    filename: 'demos/poi-group-blacklist.html',
+    template: path.resolve(sourcePath, 'demos', 'poi-group-blacklist.html'),
+    chunks: ['oilstub', 'oil'],
+    chunksSortMode: 'dependency',
+    inject: 'head'
   }, {
     filename: 'demos/tealium-integration-test.html',
     template: path.resolve(sourcePath, 'demos', 'tealium-integration-test.html'),

src/demos/poi-group-blacklist.html

@@ -0,0 +1,27 @@
+<!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">
+      {
+        "advanced_settings": true,
+        "poi_activate_poi": true,
+        "theme": "dark",
+        "poi_group_name": "withBlacklist",
+        "poi_hub_origin": "https://oil.axelspringer.com",
+        "poi_hub_path": "/demos/complete-integration-mypass.html",
+        "iabVendorBlacklist": [2,8],
+        "show_limited_vendors_only": true
+      }
+    </script>
+    <!-- end::oil-config[] -->
+  </head>
+
+  <body>
+    <h1>Blacklist from POI test</h1>
+  </body>
+</html>

src/demos/poi-group-whitelist.html

@@ -0,0 +1,26 @@
+<!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">
+      {
+        "advanced_settings": true,
+        "poi_activate_poi": true,
+        "poi_group_name": "withWhitelist",
+        "poi_hub_origin": "https://oil.axelspringer.com",
+        "poi_hub_path": "/demos/complete-integration-mypass.html",
+        "iabVendorWhitelist": [2,8],
+        "show_limited_vendors_only": true
+      }
+    </script>
+    <!-- end::oil-config[] -->
+  </head>
+
+  <body>
+    <h1>Whitelist from POI test</h1>
+  </body>
+</html>

src/poi-lists/withBlacklist.json

@@ -0,0 +1,9 @@
+{
+  "companyList": [
+    "Supercompany 1",
+    "Boring Co. 2",
+    "Ultra Inc.",
+    "Special Tech Ltd."
+  ],
+  "iabVendorBlacklist": [1,2,3]
+}

src/poi-lists/withWhitelist.json

@@ -0,0 +1,9 @@
+{
+  "companyList": [
+    "Supercompany 1",
+    "Boring Co. 2",
+    "Ultra Inc.",
+    "Special Tech Ltd."
+  ],
+  "iabVendorWhitelist": [1,2,3]
+}

src/scripts/core/core_config.js

@@ -165,6 +165,14 @@ export function getIabVendorWhitelist() {
   return getConfigValue(OIL_CONFIG.ATTR_IAB_VENDOR_WHITELIST, undefined);
 }
 
+export function setIabVendorBlacklist(value) {
+  setConfigValue(OIL_CONFIG.ATTR_IAB_VENDOR_BLACKLIST, value);
+}
+
+export function setIabVendorWhitelist(value) {
+  setConfigValue(OIL_CONFIG.ATTR_IAB_VENDOR_WHITELIST, value);
+}
+
 export function getPoiGroupName() {
   return getConfigValue(OIL_CONFIG.ATTR_POI_GROUP_NAME, 'default');
 }

src/scripts/poi-list/oil.list.js

@@ -17,7 +17,9 @@ export function renderOilGroupListTemplate(renderMethod) {
 export function renderOilThirdPartyListTemplate(renderMethod) {
   loadVendorList()
     .then(() => {
-      renderMethod(oilThirdPartyListTemplate(getVendorsToDisplay()))
+      getGroupList().then(() => {
+        renderMethod(oilThirdPartyListTemplate(getVendorsToDisplay()))
+      })
     });
 }
 

src/scripts/poi-list/poi.group.list.js

@@ -1,6 +1,6 @@
 import { fetchJsonData } from '../core/core_utils';
 import { logError } from '../core/core_log';
-import { getPoiGroupName } from '../core/core_config';
+import { getPoiGroupName, setIabVendorWhitelist, setIabVendorBlacklist } from '../core/core_config';
 
 let cachedGroupList;
 
@@ -13,6 +13,15 @@ export function getGroupList() {
       fetchJsonData(__webpack_public_path__ + 'poi-lists/' + groupName + '.json')
         .then(response => {
           cachedGroupList = response.companyList;
+
+          if(response.iabVendorWhitelist && response.iabVendorWhitelist.length) {
+            setIabVendorWhitelist(response.iabVendorWhitelist);
+          }
+
+          if(response.iabVendorBlacklist && response.iabVendorBlacklist.length) {
+            setIabVendorBlacklist(response.iabVendorBlacklist);
+          }
+
           resolve(cachedGroupList);
         })
         .catch(error => {

src/scripts/userview/userview_modal.js

@@ -56,6 +56,7 @@ export function renderOil(props) {
     if (props.noCookie) {
       renderOilContentToWrapper(oilNoCookiesTemplate());
     } else if (props.advancedSettings) {
+      // we do not need to load vendor list and poi groups here - this is only invoked via oilShowPreferenceCenter() method that has done it before
       renderOilContentToWrapper(findAdvancedSettingsTemplate());
     } else {
       startTimeOut();
@@ -73,40 +74,55 @@ export function oilShowPreferenceCenter() {
   // We need to make sure the vendor list is loaded before showing the cpc
   loadVendorList()
     .then(() => {
-      let wrapper = document.querySelector('.as-oil');
-      let entryNode = document.querySelector('#oil-preference-center');
-      if (wrapper) {
-        renderOil({advancedSettings: true});
-      } else if (entryNode) {
-        entryNode.innerHTML = findAdvancedSettingsInlineTemplate();
-        addOilHandlers(getOilDOMNodes());
-      } else {
-        logError('No wrapper for the CPC with the id #oil-preference-center was found.');
-        return;
-      }
-      let consentData = getSoiConsentData();
-      let currentPrivacySettings;
-      if (consentData) {
-        currentPrivacySettings = consentData.getPurposesAllowed();
-      } else {
-        currentPrivacySettings = getAdvancedSettingsPurposesDefault() ? getPurposeIds() : [];
-      }
-      applyPrivacySettings(currentPrivacySettings);
+      // then we want the group list because it may contain group-wide iabVendorWhitelist or iabVendorBlacklist
+      import('../poi-list/poi.group.list.js').then(poi_group_list => {
+        poi_group_list.getGroupList().then(() => {
+          let wrapper = document.querySelector('.as-oil');
+          let entryNode = document.querySelector('#oil-preference-center');
+          if (wrapper) {
+            renderOil({advancedSettings: true});
+          } else if (entryNode) {
+            entryNode.innerHTML = findAdvancedSettingsInlineTemplate();
+            addOilHandlers(getOilDOMNodes());
+          } else {
+            logError('No wrapper for the CPC with the id #oil-preference-center was found.');
+            return;
+          }
+          let consentData = getSoiConsentData();
+          let currentPrivacySettings;
+          if (consentData) {
+            currentPrivacySettings = consentData.getPurposesAllowed();
+          } else {
+            currentPrivacySettings = getAdvancedSettingsPurposesDefault() ? getPurposeIds() : [];
+          }
+          applyPrivacySettings(currentPrivacySettings);
+        })
+      })
     })
     .catch((error) => logError(error));
 }
 
 export function handleOptIn() {
-  (isPoiActive() ? handlePoiOptIn() : handleSoiOptIn()).then(() => {
-    let commandCollectionExecutor = getGlobalOilObject('commandCollectionExecutor');
-    if (commandCollectionExecutor) {
-      commandCollectionExecutor();
-    }
-    manageDomElementActivation();
-  });
+  if (isPoiActive()) {
+    import('../poi-list/poi.group.list.js').then(poi_group_list => {
+      poi_group_list.getGroupList().then(() => {
+        (handlePoiOptIn()).then(onOptInComplete);
+      })
+    });
+  } else {
+    (handleSoiOptIn()).then(onOptInComplete);
+  }
   animateOptInButton();
 }
 
+function onOptInComplete() {
+  let commandCollectionExecutor = getGlobalOilObject('commandCollectionExecutor');
+  if (commandCollectionExecutor) {
+    commandCollectionExecutor();
+  }
+  manageDomElementActivation();
+}
+
 function shouldRenderOilLayer(props) {
   // first condition makes sure that optIn has to be true and nothing else is allowed. So leave it as ugly as it is
   return props.optIn !== true && gdprApplies();
@@ -150,7 +166,7 @@ function findAdvancedSettingsInlineTemplate() {
 }
 
 function attachCpcEventHandlers() {
-  if(isOptoutConfirmRequired()){
+  if (isOptoutConfirmRequired()) {
     activateOptoutConfirm();
   }
 

test/e2e/limited_vendors_test.js

@@ -45,6 +45,56 @@ module.exports = {
         browser.waitForElementNotPresent(OIL_LAYER_THIRD_PARTY_LIST_ELEMENT + ':nth-child(3) ' + OIL_THIRD_PARTY_NAME, 1000);
         browser.end();
       });
+  },
+
+  'third party list includes three entries defined through group poi list': function (browser) {
+    executeIfCompatible(
+      browser,
+      [
+        {name: 'IE', version: '9.0', reason: 'CORS HEADER deactivated in IE9 per default - see https://id-jira.axelspringer.de/browse/OIL-217.'}
+      ],
+      () => {
+        browser
+          .url(browser.globals.launch_url_host1 + 'demos/poi-group-whitelist.html')
+          .useXpath()
+          .waitForElementPresent(OIL_LAYER, 2000, false);
+        browser
+          .click(OIL_ADVANCED_SETTINGS)
+          .pause(200)
+          .waitForElementPresent(OIL_ADVANCED_SETTINGS_WRAPPER, 1000, false)
+          .pause(200)
+          .useCss()
+          .expect.element(OIL_LAYER_THIRD_PARTY_LIST_ELEMENT + ':nth-child(1) ' + OIL_THIRD_PARTY_NAME).text.to.equal('Exponential Interactive, Inc');
+        browser.expect.element(OIL_LAYER_THIRD_PARTY_LIST_ELEMENT + ':nth-child(2) ' + OIL_THIRD_PARTY_NAME).text.to.equal('Captify Technologies Limited');
+        browser.expect.element(OIL_LAYER_THIRD_PARTY_LIST_ELEMENT + ':nth-child(3) ' + OIL_THIRD_PARTY_NAME).text.to.equal('affilinet');
+        browser.waitForElementNotPresent(OIL_LAYER_THIRD_PARTY_LIST_ELEMENT + ':nth-child(4) ' + OIL_THIRD_PARTY_NAME, 1000);
+        browser.end();
+      });
+  },
+
+  'third party list includes only entries defined through blacklist in poi group json': function (browser) {
+    executeIfCompatible(
+      browser,
+      [
+        {name: 'IE', version: '9.0', reason: 'CORS HEADER deactivated in IE9 per default - see https://id-jira.axelspringer.de/browse/OIL-217.'}
+      ],
+      () => {
+        browser
+          .url(browser.globals.launch_url_host1 + 'demos/poi-group-blacklist.html')
+          .useXpath()
+          .waitForElementPresent(OIL_LAYER, 2000, false);
+        browser
+          .click(OIL_ADVANCED_SETTINGS)
+          .pause(200)
+          .waitForElementPresent(OIL_ADVANCED_SETTINGS_WRAPPER, 1000, false)
+          .pause(200)
+          .useCss()
+          .expect.element(OIL_LAYER_THIRD_PARTY_LIST_ELEMENT + ':nth-child(1) ' + OIL_THIRD_PARTY_NAME).text.to.equal('Roq.ad GmbH');
+        browser.expect.element(OIL_LAYER_THIRD_PARTY_LIST_ELEMENT + ':nth-child(2) ' + OIL_THIRD_PARTY_NAME).text.to.equal('AdSpirit GmbH');
+        browser.expect.element(OIL_LAYER_THIRD_PARTY_LIST_ELEMENT + ':nth-child(3) ' + OIL_THIRD_PARTY_NAME).text.to.equal('Vibrant Media Limited');
+        browser.expect.element(OIL_LAYER_THIRD_PARTY_LIST_ELEMENT + ':nth-child(4) ' + OIL_THIRD_PARTY_NAME).text.to.equal('Emerse Sverige AB');
+        browser.end();
+      });
   }
 
 };