Added features and 3rd party details

src/scripts/core/core_vendor_lists.js

@@ -81,6 +81,10 @@ export function getPurposeIds() {
   return getPurposes().map(({ id }) => id);
 }
 
+export function getFeatures() {
+  return cachedVendorList ? cachedVendorList.features : expandIdsToObjects(DEFAULT_VENDOR_LIST.featureIds);
+}
+
 export function getVendors() {
   return cachedVendorList ? cachedVendorList.vendors : expandIdsToObjects(buildDefaultVendorIdList());
 }

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

@@ -68,7 +68,7 @@
   .as-oil-third-party-description, .as-oil-third-party-purpose {
     font-size: 12px;
   }
-  .as-oil-third-party-link {
+  .as-oil-third-party-link, .as-oil-third-party-purposes, .as-oil-third-party-legitimate-interest-purposes, .as-oil-third-party-features {
     color: $background-color-dark;
     font-size: 12px;
     opacity: .5;
@@ -78,6 +78,10 @@
       color: $text-color-primary-dark;
     }
   }
+
+  .as-oil-third-party-purposes, .as-oil-third-party-legitimate-interest-purposes, .as-oil-third-party-features {
+    margin: 0;
+  }
 }
 
 @keyframes fadein {

src/scripts/userview/locale/userview_default_locale.json

@@ -18,10 +18,14 @@
     "label_cpc_purpose_optout_confirm_text": "This setting will significantly affect your experience on our website.",
     "label_cpc_purpose_optout_confirm_proceed": "Continue",
     "label_cpc_purpose_optout_confirm_cancel": "Cancel",
+    "label_cpc_feature_desc": "Feature",
     "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_thirdparty_list_heading": "Your consent for third party software",
     "label_thirdparty_list_text": "Here is a list of third party software.",
+    "label_thirdparty_list_purposes": "Purposes:",
+    "label_thirdparty_list_leg_int_purposes": "Legitimate interest purposes:",
+    "label_thirdparty_list_features": "Features:",
     "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. So you can do it in <a href=\"https://support.google.com/chrome/answer/95647?co=GENIE.Platform%3DDesktop&amp;hl=en-GB\" class=\"as-oil__intro-txt--link\" target=\"_blank\">Google Chrome</a> or <a href=\"https://support.mozilla.org/en-US/kb/cookies-information-websites-store-on-your-computer\" class=\"as-oil__intro-txt--link\" target=\"_blank\">Firefox</a>.\"."
   }

src/scripts/userview/userview_constants.js

@@ -11,6 +11,9 @@ export const OIL_LABELS = {
   ATTR_LABEL_THIRD_PARTY: 'label_third_party',
   ATTR_LABEL_THIRD_PARTY_LIST_HEADING: 'label_thirdparty_list_heading',
   ATTR_LABEL_THIRD_PARTY_LIST_TEXT: 'label_thirdparty_list_text',
+  ATTR_LABEL_THIRD_PARTY_LIST_PURPOSES: 'label_thirdparty_list_purposes',
+  ATTR_LABEL_THIRD_PARTY_LIST_LEG_INT_PURPOSES: 'label_thirdparty_list_leg_int_purposes',
+  ATTR_LABEL_THIRD_PARTY_LIST_FEATURES: 'label_thirdparty_list_features',
   ATTR_LABEL_CUSTOM_THIRD_PARTY_HEADING: 'label_custom_thirdparty_heading',
 
   // CPC labels
@@ -23,6 +26,7 @@ export const OIL_LABELS = {
   ATTR_LABEL_CPC_PURPOSE_OPTOUT_TEXT: 'label_cpc_purpose_optout_confirm_text',
   ATTR_LABEL_CPC_PURPOSE_OPTOUT_PROCEED: 'label_cpc_purpose_optout_confirm_proceed',
   ATTR_LABEL_CPC_PURPOSE_OPTOUT_CANCEL: 'label_cpc_purpose_optout_confirm_cancel',
+  ATTR_LABEL_CPC_FEATURE_DESC: 'label_cpc_feature_desc',
 
   // NO COOKIES ALLOWED labels
   ATTR_LABEL_NO_COOKIES_HEADING: 'label_nocookie_head',

src/scripts/userview/view/oil.advanced.settings.standard.js

@@ -5,7 +5,7 @@ import { getLabel, getLabelWithDefault, getTheme } from '../userview_config';
 import { getCustomPurposes, getCustomVendorListUrl } 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 { getCustomVendorList, getFeatures, getPurposes, getVendorList, getVendorsToDisplay } from '../../core/core_vendor_lists';
 import { BackButton, YesButton } from './components/oil.buttons';
 
 
@@ -49,6 +49,9 @@ const ContentSnippet = () => {
     <a href="#as-oil-cpc-purposes" onclick='${OIL_GLOBAL_OBJECT_NAME}._switchLeftMenuClass(this)' class="as-oil-cpc__category-link ${CLASS_NAME_FOR_ACTIVE_MENU_SECTION}">
       ${getLabel(OIL_LABELS.ATTR_LABEL_CPC_PURPOSE_DESC)}
     </a>
+    <a href="#as-oil-cpc-features" onclick='${OIL_GLOBAL_OBJECT_NAME}._switchLeftMenuClass(this)' class="as-oil-cpc__category-link">
+      ${getLabel(OIL_LABELS.ATTR_LABEL_CPC_FEATURE_DESC)}
+    </a>
     <a href="#as-oil-cpc-third-parties" onclick='${OIL_GLOBAL_OBJECT_NAME}._switchLeftMenuClass(this)' class="as-oil-cpc__category-link">
       ${getLabel(OIL_LABELS.ATTR_LABEL_THIRD_PARTY)}
     </a>
@@ -65,6 +68,11 @@ const ContentSnippet = () => {
     ${buildPurposeEntries(getPurposes())}
     ${buildPurposeEntries(getCustomPurposes())}
 
+    <div class="as-oil-cpc__row-title" id="as-oil-cpc-features">
+      ${getLabel(OIL_LABELS.ATTR_LABEL_CPC_FEATURE_DESC)}
+    </div>
+    ${buildFeatureEntries(getFeatures())}
+
     ${buildIabVendorList()}
     ${buildCustomVendorList()}
   </div>
@@ -93,6 +101,16 @@ const PurposeContainerSnippet = ({id, header, text, value}) => {
 </div>`
 };
 
+const FeatureContainerSnippet = ({header, text}) => {
+  return `
+<div class="as-oil-cpc__feature">
+    <div class="as-oil-cpc__feature-container">
+        <div class="as-oil-cpc__feature-header">${header}</div>
+        <div class="as-oil-cpc__feature-text">${text}</div>
+    </div>
+</div>`
+};
+
 const IsCustomVendorsEnables = () => {
   return !!getCustomVendorListUrl();
 };
@@ -163,6 +181,9 @@ const buildVendorListEntry = (element) => {
               </span>
               <div class='as-oil-third-party-toggle-part' style='display: none;'>
                 <a class='as-oil-third-party-link' href='${element.policyUrl}'>${element.policyUrl}</a>
+                <p class='as-oil-third-party-purposes'>${getLabel(OIL_LABELS.ATTR_LABEL_THIRD_PARTY_LIST_PURPOSES)} ${element.purposeIds.join(', ')}</p>
+                <p class='as-oil-third-party-legitimate-interest-purposes'>${getLabel(OIL_LABELS.ATTR_LABEL_THIRD_PARTY_LIST_LEG_INT_PURPOSES)} ${element.legIntPurposeIds.join(', ')}</p>
+                <p class='as-oil-third-party-features'>${getLabel(OIL_LABELS.ATTR_LABEL_THIRD_PARTY_LIST_FEATURES)} ${element.featureIds.join(', ')}</p>
               </div>
             </div>
           `;
@@ -191,6 +212,17 @@ const formatPurposeId = (id) => {
   return id < 10 ? `0${id}` : id;
 };
 
+const buildFeatureEntries = (list) => {
+  return list.map(feature => FeatureContainerSnippet({
+    header: getLabelWithDefault(`label_cpc_feature_${formatFeatureId(feature.id)}_text`, feature.name || `Error: Missing text for feature with id ${feature.id}!`),
+    text: getLabelWithDefault(`label_cpc_feature_${formatFeatureId(feature.id)}_desc`, feature.description || '')
+  })).join('');
+};
+
+const formatFeatureId = (id) => {
+  return id < 10 ? `0${id}` : id;
+};
+
 function activateAll() {
   let elements = document.querySelectorAll('.as-js-purpose-slider');
   forEach(elements, (domNode) => {

src/styles/cpc_standard.scss

@@ -115,30 +115,30 @@
   border-right: 2px solid #3f7ddf;
 }
 
-.as-oil-cpc__purpose {
+.as-oil-cpc__purpose, .as-oil-cpc__feature {
   border: 1px solid #eaeaea;
   border-radius: 5px;
   padding: 20px;
   margin: 16px 0;
 }
 
-.as-oil-cpc__purpose-container {
+.as-oil-cpc__purpose-container, .as-oil-cpc__feature-container {
   position: relative;
 }
 
-.as-oil-cpc__purpose-header {
+.as-oil-cpc__purpose-header, .as-oil-cpc__feature-header  {
   font-size: 1rem;
   font-weight: 500;
   margin: 0 75px 30px 0;
 }
 
-.as-oil-cpc__purpose-text {
+.as-oil-cpc__purpose-text, .as-oil-cpc__feature-text {
   font-size: 0.9rem;
   color: lighten($text-color-primary-light, 30%);
 }
 
 .dark {
-  .as-oil-cpc__purpose-text {
+  .as-oil-cpc__purpose-text, .as-oil-cpc__feature-text {
     color: darken($text-color-primary-dark, 30%);
   }
 }
@@ -193,7 +193,7 @@
     .as-oil-back-button__text {
       color: $text-color-primary-dark !important;
     }
-    .as-oil-cpc__purpose {
+    .as-oil-cpc__purpose, .as-oil-cpc__feature {
       background-color: $cpc-background-dark;
     }
   }