diff --git a/src/scripts/core/core_vendor_lists.js b/src/scripts/core/core_vendor_lists.js index 37121fb6..0bbd3a49 100644 --- a/src/scripts/core/core_vendor_lists.js +++ b/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()); } diff --git a/src/scripts/poi-list/poi.group.scss b/src/scripts/poi-list/poi.group.scss index 0466504a..e423103d 100644 --- a/src/scripts/poi-list/poi.group.scss +++ b/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 { diff --git a/src/scripts/userview/locale/userview_default_locale.json b/src/scripts/userview/locale/userview_default_locale.json index b33db623..6c67cf5d 100644 --- a/src/scripts/userview/locale/userview_default_locale.json +++ b/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 Google Chrome or Firefox.\"." } diff --git a/src/scripts/userview/userview_constants.js b/src/scripts/userview/userview_constants.js index 7cb2bd32..f9bab298 100644 --- a/src/scripts/userview/userview_constants.js +++ b/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', diff --git a/src/scripts/userview/view/oil.advanced.settings.standard.js b/src/scripts/userview/view/oil.advanced.settings.standard.js index 20785de2..c2f00a1c 100644 --- a/src/scripts/userview/view/oil.advanced.settings.standard.js +++ b/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 = () => { ${getLabel(OIL_LABELS.ATTR_LABEL_CPC_PURPOSE_DESC)} + + ${getLabel(OIL_LABELS.ATTR_LABEL_CPC_FEATURE_DESC)} + ${getLabel(OIL_LABELS.ATTR_LABEL_THIRD_PARTY)} @@ -65,6 +68,11 @@ const ContentSnippet = () => { ${buildPurposeEntries(getPurposes())} ${buildPurposeEntries(getCustomPurposes())} +
+ ${getLabel(OIL_LABELS.ATTR_LABEL_CPC_FEATURE_DESC)} +
+ ${buildFeatureEntries(getFeatures())} + ${buildIabVendorList()} ${buildCustomVendorList()} @@ -93,6 +101,16 @@ const PurposeContainerSnippet = ({id, header, text, value}) => { ` }; +const FeatureContainerSnippet = ({header, text}) => { + return ` +
+
+
${header}
+
${text}
+
+
` +}; + const IsCustomVendorsEnables = () => { return !!getCustomVendorListUrl(); }; @@ -163,6 +181,9 @@ const buildVendorListEntry = (element) => { `; @@ -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) => { diff --git a/src/styles/cpc_standard.scss b/src/styles/cpc_standard.scss index 6370eb4d..0d64b736 100644 --- a/src/styles/cpc_standard.scss +++ b/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; } }