fix (errors/languages) use error schema message and fix config language

.nvmrc

@@ -1 +1 @@
-10.15.3
+12.13.0

CHANGELOG.md

@@ -1,3 +1,15 @@
+## [2.0.1](https://github.com/openmail/system1-cmp/compare/v2.0.0...v2.0.1) (2020-08-31)
+
+### Refactor
+
+- [x] Switch to node 12
+- [x] Animate modal on first reveal
+
+### Fix
+
+- [x] Update logging Error and Save schemas
+- [x] Fix initial language configuration
+
 ## [2.0.0](https://github.com/openmail/system1-cmp/compare/v1.5.6...v2.0.0) (2020-08-14)
 
 ### Refactor

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "system1-cmp",
-	"version": "2.0.0",
+	"version": "2.0.1",
 	"description": "System1 Consent Management Platform for TCF 1.1 GDPR Compliance",
 	"scripts": {
 		"clean": "rimraf ./dist",
@@ -106,7 +106,7 @@
 	"dependencies": {
 		"@iabtcf/cmpapi": "^1.1.0-3",
 		"@iabtcf/core": "^1.1.0-3",
-		"@s1/dpl": "3.0.15",
+		"@s1/dpl": "3.0.16",
 		"classnames": "^2.2.5",
 		"codemirror": "^5.34.0",
 		"core-js": "^2.5.3",

src/s1/components/app.jsx

@@ -12,6 +12,7 @@ export default class App extends Component {
 
 	state = {
 		store: this.props.store,
+		shouldShowModal: false,
 	};
 
 	updateState(store) {
@@ -25,26 +26,39 @@ export default class App extends Component {
 	componentDidMount() {
 		const { store } = this.props;
 		store.subscribe(this.updateState.bind(this));
+		setTimeout(this.componentDidUpdate.bind(this), 100); // delay reveal on first load
+	}
+
+	componentDidUpdate() {
+		const {
+			store: { isModalShowing },
+			shouldShowModal,
+		} = this.state;
+		if (shouldShowModal !== isModalShowing) {
+			this.setState({
+				shouldShowModal: isModalShowing,
+			});
+		}
 	}
 
 	render(props, state) {
-		const { store } = state;
-		const { isModalShowing, tcModel } = store;
+		const { store, shouldShowModal } = state;
+		const { tcModel } = store;
 		const { consentScreen } = tcModel;
 
 		return (
 			<div class={style.gdpr}>
 				{!consentScreen ||
 					(consentScreen === CONSENT_SCREENS.STACKS_LAYER1 && (
-						<BannerStacks store={store} isShowing={isModalShowing && tcModel} />
+						<BannerStacks store={store} isShowing={shouldShowModal && tcModel} />
 					))}
 
 				{consentScreen === CONSENT_SCREENS.PURPOSES_LAYER2 && (
-					<BannerPurposes store={store} isShowing={isModalShowing && tcModel} />
+					<BannerPurposes store={store} isShowing={shouldShowModal && tcModel} />
 				)}
 
 				{consentScreen === CONSENT_SCREENS.VENDORS_LAYER3 && (
-					<BannerVendors store={store} isShowing={isModalShowing && tcModel} />
+					<BannerVendors store={store} isShowing={shouldShowModal && tcModel} />
 				)}
 			</div>
 		);

src/s1/components/banner/purposeList.jsx

@@ -55,7 +55,7 @@ export default class PurposeList extends Component {
 		logger(LOG_EVENTS.CMPClick, {
 			action: 'click',
 			category: 'toggleSpecialFeatures',
-			label: id,
+			label: `${id}`,
 		});
 	}
 
@@ -66,7 +66,7 @@ export default class PurposeList extends Component {
 		logger(LOG_EVENTS.CMPClick, {
 			action: 'click',
 			category: 'togglePurpose',
-			label: id,
+			label: `${id}`, // force string
 		});
 	}
 
@@ -77,7 +77,7 @@ export default class PurposeList extends Component {
 		logger(LOG_EVENTS.CMPClick, {
 			action: 'click',
 			category: 'toggleStack',
-			label: id,
+			label: `${id}`, // force string
 		});
 	}
 

src/s1/components/banner/vendorList.jsx

@@ -42,7 +42,7 @@ export default class VendorList extends Component {
 		logger(LOG_EVENTS.CMPClick, {
 			action: 'click',
 			category: 'toggleVendor',
-			label: id,
+			label: `${id}`, // force string
 		});
 	}
 

src/s1/lib/localize.js

@@ -2,10 +2,6 @@ import { GVL } from '@iabtcf/core';
 import { DEFAULT_LANGUAGE, LANGUAGES } from '../constants';
 import logger, { EVENTS as LOG_EVENTS } from './logger';
 
-// import translations from '../../lib/translations';
-// import translations from '../config/2.0/custom/en.json';
-
-// const translations = {};
 const translations = {};
 
 export function findLangage(optLang) {
@@ -48,7 +44,7 @@ export const localize = (language) => {
 		.then((json) => flatten(json))
 		.catch((e) => {
 			logger(LOG_EVENTS.CMPError, {
-				errorMessage: `localizeError: ${e}`,
+				message: `localizeError: ${e}`,
 			});
 		});
 };

src/s1/lib/logger.js

@@ -24,7 +24,7 @@ export const logger = (logger, payload) => {
 		}
 		logger.log(loggerPayload);
 	} else {
-		debug('logger (isDisabled)', loggerPayload);
+		debug('logger (isDisabled)', logger, loggerPayload);
 	}
 };
 

src/s1/lib/store.js

@@ -33,17 +33,17 @@ export default class Store {
 	listeners = new Set();
 
 	constructor(options) {
-		const { theme, language } = this.config;
+		const { theme } = this.config;
 		Object.assign(this, {
 			...options,
 			theme: {
 				...theme,
 				...options.theme,
 			},
 		});
+		const { language } = this.config;
 		const { tcfApi, gvl } = options;
 		const { readyPromise } = gvl;
-
 		const localizePromise = localize(language);
 		localizePromise.then((translations) => {
 			this.setState({
@@ -55,7 +55,7 @@ export default class Store {
 			.then(this.onReady.bind(this))
 			.catch((e) => {
 				logger(LOG_EVENTS.CMPError, {
-					errorMessage: `storeReadyError: ${e}`,
+					message: `storeReadyError: ${e}`,
 				});
 			});
 

src/s1/reference/tcf-2.0.html

@@ -119,9 +119,9 @@ <h3>TCFString</h3>
 						<li><button id="btnShowConsentTool">Show Consent Tool</button></li>
 						<li>
 							Language:
-							<select id="selectLanguage"
-								><option>Loading...</option></select
-							>
+							<select id="selectLanguage">
+								<option>Loading...</option>
+							</select>
 						</li>
 						<li>
 							<a href="https://github.com/Openmail/system1-cmp/tree/potench/tcf-2.0-v.0" target="_github"
@@ -168,7 +168,7 @@ <h3>TCFString</h3>
 				business: 'reference',
 				gdprApplies: true,
 				ccpaApplies: false,
-				canLog: false,
+				canLog: true,
 				canDebug: true,
 				// baseUrl: './config/2.0',
 				baseUrl: 'https://s.flocdn.com/cmp/2.0.0/config/2.0', // base url

src/s1/tcf-2.0-cmp.js

@@ -68,7 +68,7 @@ export const setup = (configOpt) => {
 		[INIT]: (callback) => {
 			if (!store || !init) {
 				logger(LOG_EVENTS.CMPError, {
-					errorMessage: `initError: ${errorMessage}`,
+					message: `initError: ${errorMessage}`,
 				});
 				callback(init(store), new Error(`CMP: initError: ${errorMessage}`));
 			} else {
@@ -80,7 +80,7 @@ export const setup = (configOpt) => {
 				readyPromise
 					.catch((e) => {
 						logger(LOG_EVENTS.CMPError, {
-							errorMessage: `gvlInitError: ${e}`,
+							message: `gvlInitError: ${e}`,
 						});
 					})
 					.finally(() => {

src/s1/tcf-2.0-loader.js

@@ -32,7 +32,7 @@
 			// 2. create global cmp / __tcfapi request queues
 			return (function (window, document, script, commandQueue, scriptEl, scriptParentEl) {
 				var tcfToCmpMap = function (command, version, callback, parameter) {
-					window[cmp].call(this, command, parameter, callback);
+					window[cmp].call(this, command, parameter, callback || function () {});
 				};
 				var cmpToTcfMap = function (command, parameter, callback) {
 					window[__tcfapi].call(this, command, 2, callback || function () {}, parameter);
@@ -41,68 +41,66 @@
 				// remap tcfapi
 				window[__tcfapi] = window[__tcfapi] || tcfToCmpMap;
 
-				window[cmp] =
-					window[cmp] ||
-					function (command, parameter, callback) {
-						// tcfAPI is loaded already
-						if (window[__tcfapi] !== tcfToCmpMap) {
-							// __tcfapi takes over here
-							window[cmp] = cmpToTcfMap;
-							return window[cmp].apply(this, arguments);
-						}
+				window[cmp] = function (command, parameter, callback) {
+					// tcfAPI is loaded already
+					if (window[__tcfapi] !== tcfToCmpMap) {
+						// __tcfapi takes over here
+						window[cmp] = cmpToTcfMap;
+						return window[cmp].apply(this, arguments);
+					}
 
-						if (!command) {
-							return;
-						}
+					if (!command) {
+						return;
+					}
+
+					(window[cmp][commandQueue] = window[cmp][commandQueue] || []).push({
+						command,
+						parameter,
+						callback,
+					});
 
-						(window[cmp][commandQueue] = window[cmp][commandQueue] || []).push({
-							command,
-							parameter,
-							callback,
-						});
+					// if 'init', then we need to load the seed file
+					if (command === 'init') {
+						if (scriptEl) {
+							return log(parameter[logging], 'CMP Error: Only call init once.');
+						}
+						if (!parameter || !parameter[scriptSrc]) {
+							return log(
+								parameter[logging],
+								// eslint-disable-next-line quotes
+								"CMP Error: Provide src to load CMP. cmp('init', { scriptSrc: './cmp.js'})"
+							);
+						}
 
-						// if 'init', then we need to load the seed file
-						if (command === 'init') {
-							if (scriptEl) {
-								return log(parameter[logging], 'CMP Error: Only call init once.');
+						var loadCmp = function () {
+							scriptEl = document.createElement(script);
+							scriptEl.async = 1;
+							scriptEl.src = parameter[scriptSrc];
+							scriptParentEl = document.getElementsByTagName(script)[0];
+							if (scriptParentEl && scriptParentEl.parentNode) {
+								scriptParentEl.parentNode.insertBefore(scriptEl, scriptParentEl);
+							} else {
+								document.body.appendChild(scriptEl);
 							}
-							if (!parameter || !parameter[scriptSrc]) {
+						};
+
+						if (!shouldPolyfill) {
+							loadCmp();
+						} else {
+							// load polyfills
+							var regex = new RegExp('[^/]+$');
+							var pSrc = parameter[polyfillSrc] || parameter[scriptSrc].replace(regex, 'polyfills.js');
+							if (!pSrc) {
 								return log(
 									parameter[logging],
 									// eslint-disable-next-line quotes
-									"CMP Error: Provide src to load CMP. cmp('init', { scriptSrc: './cmp.js'})"
+									"CMP Error: Provide polyfillSrc to load CMP. cmp('init', { polyfillSrc: './polyfills.js'})"
 								);
 							}
-
-							var loadCmp = function () {
-								scriptEl = document.createElement(script);
-								scriptEl.async = 1;
-								scriptEl.src = parameter[scriptSrc];
-								scriptParentEl = document.getElementsByTagName(script)[0];
-								if (scriptParentEl && scriptParentEl.parentNode) {
-									scriptParentEl.parentNode.insertBefore(scriptEl, scriptParentEl);
-								} else {
-									document.body.appendChild(scriptEl);
-								}
-							};
-
-							if (!shouldPolyfill) {
-								loadCmp();
-							} else {
-								// load polyfills
-								var regex = new RegExp('[^/]+$');
-								var pSrc = parameter[polyfillSrc] || parameter[scriptSrc].replace(regex, 'polyfills.js');
-								if (!pSrc) {
-									return log(
-										parameter[logging],
-										// eslint-disable-next-line quotes
-										"CMP Error: Provide polyfillSrc to load CMP. cmp('init', { polyfillSrc: './polyfills.js'})"
-									);
-								}
-								loadScript(pSrc, loadCmp);
-							}
+							loadScript(pSrc, loadCmp);
 						}
-					};
+					}
+				};
 				// 4. return temporary cmp command queue
 				return window[cmp];
 			})(window, document, 'script', 'commandQueue');

yarn.lock

@@ -969,10 +969,10 @@
     "@types/istanbul-reports" "^1.1.1"
     "@types/yargs" "^13.0.0"
 
-"@s1/dpl@3.0.15":
-  version "3.0.15"
-  resolved "https://system1.jfrog.io/system1/api/npm/npm-virtual/@s1/dpl/-/@s1/dpl-3.0.15.tgz#b2170d65ddb540c555b00e3c2b129d50392c2344"
-  integrity sha1-shcNZd21QMVVsA48KxKdUDksI0Q=
+"@s1/dpl@3.0.16":
+  version "3.0.16"
+  resolved "https://system1.jfrog.io/system1/api/npm/npm-virtual/@s1/dpl/-/@s1/dpl-3.0.16.tgz#f135cd8958f05cb15fdc8659364bb4d1a0d2362b"
+  integrity sha1-8TXNiVjwXLFf3IZZNku00aDSNis=
   dependencies:
     "@babel/runtime" "^7.10.5"
     doctoc "^1.4.0"