diff --git a/.nvmrc b/.nvmrc index 348076b9..47c0a98a 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1 +1 @@ -10.15.3 +12.13.0 diff --git a/CHANGELOG.md b/CHANGELOG.md index 57fc1068..caad1668 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/package.json b/package.json index ebe644e1..9a7e3d25 100644 --- a/package.json +++ b/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", diff --git a/src/s1/components/app.jsx b/src/s1/components/app.jsx index 8e7b0934..eb804cf0 100644 --- a/src/s1/components/app.jsx +++ b/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 (
{!consentScreen || (consentScreen === CONSENT_SCREENS.STACKS_LAYER1 && ( - + ))} {consentScreen === CONSENT_SCREENS.PURPOSES_LAYER2 && ( - + )} {consentScreen === CONSENT_SCREENS.VENDORS_LAYER3 && ( - + )}
); diff --git a/src/s1/components/banner/purposeList.jsx b/src/s1/components/banner/purposeList.jsx index d4060363..66ef30f2 100644 --- a/src/s1/components/banner/purposeList.jsx +++ b/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 }); } diff --git a/src/s1/components/banner/vendorList.jsx b/src/s1/components/banner/vendorList.jsx index 56e66928..c5b22ac5 100644 --- a/src/s1/components/banner/vendorList.jsx +++ b/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 }); } diff --git a/src/s1/lib/localize.js b/src/s1/lib/localize.js index e37a7fe2..4b49cf05 100644 --- a/src/s1/lib/localize.js +++ b/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}`, }); }); }; diff --git a/src/s1/lib/logger.js b/src/s1/lib/logger.js index 66fc0d86..93c42bcb 100644 --- a/src/s1/lib/logger.js +++ b/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); } }; diff --git a/src/s1/lib/store.js b/src/s1/lib/store.js index 73ab1505..60458076 100644 --- a/src/s1/lib/store.js +++ b/src/s1/lib/store.js @@ -33,7 +33,7 @@ export default class Store { listeners = new Set(); constructor(options) { - const { theme, language } = this.config; + const { theme } = this.config; Object.assign(this, { ...options, theme: { @@ -41,9 +41,9 @@ export default class Store { ...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}`, }); }); diff --git a/src/s1/reference/tcf-2.0.html b/src/s1/reference/tcf-2.0.html index 6f54e70c..f777e45e 100644 --- a/src/s1/reference/tcf-2.0.html +++ b/src/s1/reference/tcf-2.0.html @@ -119,9 +119,9 @@

TCFString

  • Language: - +
  • TCFString 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 diff --git a/src/s1/tcf-2.0-cmp.js b/src/s1/tcf-2.0-cmp.js index 6a679275..9a41830b 100644 --- a/src/s1/tcf-2.0-cmp.js +++ b/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(() => { diff --git a/src/s1/tcf-2.0-loader.js b/src/s1/tcf-2.0-loader.js index f1145353..06996692 100644 --- a/src/s1/tcf-2.0-loader.js +++ b/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'); diff --git a/yarn.lock b/yarn.lock index c7edea73..dbbe06a8 100644 --- a/yarn.lock +++ b/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"