feat (vendors: cookieMaxAgeSeconds) adds UI to display cookieMaxAgeSeconds in vendor stack

CHANGELOG.md

@@ -1,4 +1,14 @@
-## [2.1.4](https://github.com/openmail/system1-cmp/compare/2.1.2...2.1.3) (2020-11-05)
+## [2.1.5](https://github.com/openmail/system1-cmp/compare/2.1.4...2.1.5) (2021-02-26)
+
+### Feat
+
+- [x] Upgrades cmpapi and cmpcore
+- [x] Updates global vendor list
+- [x] Adds Device Storage to Vendor Stack to display cookieMaxAgeSeconds 
+- [x] Splits legal-disclosure for legibility in Purpose Stack
+- [x] Refactor error logger
+
+## [2.1.4](https://github.com/openmail/system1-cmp/compare/2.1.3...2.1.4) (2020-11-05)
 
 ### Feat
 

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "system1-cmp",
-	"version": "2.1.4",
+	"version": "2.1.5",
 	"cmpVersion": 5,
 	"description": "System1 Consent Management Platform for TCF 1.1 GDPR Compliance",
 	"scripts": {
@@ -109,8 +109,8 @@
 		"webpack-dev-server": "^2.4.4"
 	},
 	"dependencies": {
-		"@iabtcf/cmpapi": "1.1.3",
-		"@iabtcf/core": "1.1.3",
+		"@iabtcf/cmpapi": "1.1.4",
+		"@iabtcf/core": "1.1.4",
 		"@s1/dpl": "3.2.1",
 		"classnames": "^2.2.5",
 		"codemirror": "^5.34.0",

src/s1/components/banner/purposeList.jsx

@@ -147,7 +147,7 @@ export default class PurposeList extends Component {
 								) : null}
 								<div className={[style.itemDetails].join(' ')} style={{ color: theme.textLightColor }}>
 									<p>{description}</p>
-									{descriptionLegal ? <p>{descriptionLegal}</p> : null}
+									{descriptionLegal ? <p>{descriptionLegal.split('\n').map(dl => <span className={style.desciptionLegalList}>{dl}</span>)}</p> : null}
 									{handleObjection ? (
 										<div className={style.objectLegitInterest}>
 											<Switch

src/s1/components/banner/purposeList.less

@@ -185,11 +185,19 @@
 			p {
 				padding-top: 10px;
 				margin: 0;
+				font-size: 13px;
 
 				@media @smartphone {
 					padding-top: 5px;
 				}
 			}
+			span.desciptionLegalList {
+				display: block;
+
+				&:nth-child(n + 2) {
+					margin-left: 10px;
+				}
+			}
 
 			.reference {
 				font-size: 0.8rem;

src/s1/components/banner/vendorList.jsx

@@ -5,7 +5,7 @@ import ChevronIcon from '../chevronicon/chevronicon';
 import Switch from '../switch/switch';
 import ExternalLinkIcon from '../externallinkicon/externallinkicon';
 import Label from '../label/label';
-import { lookup } from '../../lib/localize';
+import { lookup, secondsToNearestInt } from '../../lib/localize';
 
 import logger, { EVENTS as LOG_EVENTS } from '../../lib/logger';
 
@@ -80,6 +80,7 @@ export default class VendorList extends Component {
 				<ul class={[style.itemPurpose].join(' ')}>
 					{list.map((item) => {
 						const {
+							cookieMaxAgeSeconds,
 							name,
 							id,
 							policyUrl,
@@ -92,6 +93,7 @@ export default class VendorList extends Component {
 						const displayId = `${displayPrefix}-${id}`;
 						const isExpanded = expanded.has(displayId);
 						const canConsent = handleConsent && (purposes.length || specialFeatures.length);
+						const {unit: maxAgeUnit, value: maxAgeUnitVal} = secondsToNearestInt(cookieMaxAgeSeconds);
 
 						return (
 							<li
@@ -201,7 +203,11 @@ export default class VendorList extends Component {
 
 										{legIntPurposes.length > 0 && (
 											<div>
-												<h4>Purposes (Service-Specific Legitimate Interests)</h4>
+												<h4>
+													<LocalLabel localizeKey="purposesLegit" translations={translations}>
+													Purposes (Legitimate Interest)
+													</LocalLabel>
+												</h4>
 												<ul>
 													{legIntPurposes.map((key) => {
 														const { name: purposeName } = globalPurposes[key];
@@ -223,6 +229,39 @@ export default class VendorList extends Component {
 												</div>
 											</div>
 										)}
+										<div>
+											<h4>
+												<LocalLabel localizeKey="deviceStorage" translations={translations}>
+													Device Storage:
+												</LocalLabel>
+											</h4>
+											<p>
+												{` ${name} `}
+												{cookieMaxAgeSeconds > 0 ?
+													(
+														<span>
+															<LocalLabel localizeKey="deviceStorageMax" translations={translations}>
+																stores cookies with a maximum duration of about
+															</LocalLabel>
+															{` ${maxAgeUnitVal} `}
+															<LocalLabel localizeKey={`deviceStorageUnit${maxAgeUnit.replace(/^./, str => str.toUpperCase())}`} translations={translations}>
+																{maxAgeUnit}
+															</LocalLabel>
+															{` (${cookieMaxAgeSeconds.toLocaleString()} `}
+															<LocalLabel localizeKey="deviceStorageUnitSeconds" translations={translations}>
+																seconds
+															</LocalLabel>
+															)
+														</span>
+													) :
+													(
+														<LocalLabel localizeKey="deviceStorageMin" translations={translations}>
+															stores cookies for the duration of your browsing session.
+														</LocalLabel>
+													)
+												}
+											</p>
+										</div>
 									</div>
 								)}
 							</li>

src/s1/config/2.0/translations/translations-en.json

@@ -36,6 +36,15 @@
 		"purposesLegit": "Purposes (Legitimate Interest)",
 		"specialPurposes": "Special Purposes",
 		"features": "Features",
-		"specialFeatures": "Special Features"
+		"specialFeatures": "Special Features",
+		"deviceStorage": "Device Storage",
+		"deviceStorageMax": "stores cookies with a maximum duration of about",
+		"deviceStorageMin": "stores cookies for the duration of your browsing session.",
+		"deviceStorageSeconds": "seconds",
+		"deviceStorageMinutes": "minutes",
+		"deviceStorageHours": "hours",
+		"deviceStorageDays": "days",
+		"deviceStorageMonths": "months",
+		"deviceStorageYears": "years"
 	}
 }

src/s1/lib/localize.js

@@ -54,4 +54,46 @@ export const lookup = ({ label, prefix, localizeKey, translations } = {}) => {
 	return translations[key] || label;
 };
 
+export const secondsToNearestInt = (seconds) => {
+	const minutes = seconds / 60;
+	if (minutes < 1) {
+		return {
+			unit: 'seconds',
+			value: seconds
+		};
+	}
+	const hours = minutes / 60;
+	if (hours < 1) {
+		return {
+			unit: 'minutes',
+			value: Math.round(minutes)
+		};
+	}
+	const days = hours / 24;
+	if (days < 1) {
+		return {
+			unit: 'hours',
+			value: Math.round(hours)
+		};
+	}
+	const months = days / 30;
+	if (months < 1) {
+		return {
+			unit: 'days',
+			value: Math.round(days)
+		};
+	}
+	const years = months / 12;
+	if (years < 1) {
+		return {
+			unit: 'months',
+			value: Math.round(months)
+		};
+	}
+
+	return {
+		unit: 'years',
+		value: Math.round(years)
+	};
+}
 export default localize;

src/s1/tcf-2.0-cmp.js

@@ -132,18 +132,16 @@ export const setup = (configOpt) => {
 
 // 2. Process Anything in the Queue
 export const processCommandQueue = (() => {
-	const onErrorCache = global.onerror;
-	global.onerror = (message, file, line) => {
+	const errorLoggerListener = (event) => {
 		// just log the first error and then release the error handler
-		debug('cmp: error', message, file, line);
+		debug('cmp: error', event.message);
 		logger(LOG_EVENTS.CMPError, {
-			message: `${message} ${file && `(file: ${file})`}`,
+			message: event.message,
 		});
-		if (onErrorCache) {
-			onErrorCache(message, file, line);
-		}
-		global.onerror = onErrorCache;
+		global.removeEventListener('error', errorLoggerListener, false);
 	};
+	global.addEventListener('error', errorLoggerListener, false);
+
 	const { commandQueue = [] } = window[CMP_GLOBAL_NAME] || {};
 	const initIndex = commandQueue.findIndex(({ command }) => command === INIT);
 	const initCommandFirst = initIndex >= 0 ? commandQueue.splice(initIndex, 1).concat(commandQueue) : commandQueue;

yarn.lock

@@ -918,15 +918,15 @@
     exec-sh "^0.3.2"
     minimist "^1.2.0"
 
-"@iabtcf/cmpapi@1.1.3":
-  version "1.1.3"
-  resolved "https://system1.jfrog.io/system1/api/npm/npm-virtual/@iabtcf/cmpapi/-/cmpapi-1.1.3.tgz#6b601a34fd0d5885eb15ac845a11206b3b9a82e8"
-  integrity sha1-a2AaNP0NWIXrFayEWhEgazuagug=
+"@iabtcf/cmpapi@1.1.4":
+  version "1.1.4"
+  resolved "https://system1.jfrog.io/system1/api/npm/npm-virtual/@iabtcf/cmpapi/-/cmpapi-1.1.4.tgz#98e17e45caa668765eb12b16f8dd2a0263555f46"
+  integrity sha1-mOF+RcqmaHZesSsW+N0qAmNVX0Y=
 
-"@iabtcf/core@1.1.3":
-  version "1.1.3"
-  resolved "https://system1.jfrog.io/system1/api/npm/npm-virtual/@iabtcf/core/-/core-1.1.3.tgz#bacf690710cdb15ee858a95c5436371df27ac4f0"
-  integrity sha1-us9pBxDNsV7oWKlcVDY3HfJ6xPA=
+"@iabtcf/core@1.1.4":
+  version "1.1.4"
+  resolved "https://system1.jfrog.io/system1/api/npm/npm-virtual/@iabtcf/core/-/core-1.1.4.tgz#5ec102123d9f22ff0458315dffb38a7cae91f752"
+  integrity sha1-XsECEj2fIv8EWDFd/7OKfK6R91I=
   dependencies:
     global "^4.4.0"
     typescript "3.7"