From 5a6bae7e874b9245ffad805489c47fb07d345fe0 Mon Sep 17 00:00:00 2001 From: Jonathan Li Kam Wa Date: Wed, 29 Sep 2021 12:20:30 -0400 Subject: [PATCH 1/5] Show save button by default on the CMP --- src/s1/lib/store.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/s1/lib/store.js b/src/s1/lib/store.js index 11403522..806ffffe 100644 --- a/src/s1/lib/store.js +++ b/src/s1/lib/store.js @@ -23,7 +23,7 @@ export default class Store { shouldAutoResizeModal = false; manualVendorConsents = new Set(); // vendor-consent management partially automatic and partially manual depending on the consent screen isModalShowing = false; - isSaveShowing = false; + isSaveShowing = true; hasSession = false; hasConsentedAll; gvl; @@ -371,7 +371,7 @@ export default class Store { save() { // close the cmp and persist settings - this.updateCmp({ shouldShowModal: false, shouldSaveCookie: true, shouldShowSave: false }); + this.updateCmp({ shouldShowModal: false, shouldSaveCookie: true, shouldShowSave: true }); } toggleAll() { @@ -383,7 +383,7 @@ export default class Store { tcModel, shouldShowModal: false, shouldSaveCookie: true, - shouldShowSave: false, + shouldShowSave: true, }); return tcModel; } From c0ceaebd12ad086d5fb8f1c8fab601c84496c1b7 Mon Sep 17 00:00:00 2001 From: Jonathan Li Kam Wa Date: Wed, 29 Sep 2021 12:34:14 -0400 Subject: [PATCH 2/5] Update CMP version to 2.2.2 and update changelog. --- CHANGELOG.md | 17 +++++++++++++---- package.json | 2 +- 2 files changed, 14 insertions(+), 5 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 358b5708..af976f88 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,12 +1,20 @@ -## [2.2.1](https://github.com/openmail/system1-cmp/compare/2.2.0...2.2.1) (2021-11-28) +## [2.2.2](https://github.com/openmail/system1-cmp/compare/2.2.1...2.2.2) (2021-09-29) + ### Refactor + +- [x] Show the `save` button by default on the banner + +## [2.2.1](https://github.com/openmail/system1-cmp/compare/2.2.0...2.2.1) (2021-09-28) + +### Refactor + - [x] Added `config.shouldAutoShowModal` to allow disabling auto show modal after `init` ## [2.2.0](https://github.com/openmail/system1-cmp/compare/2.1.7...2.2.0) (2021-05-17) ### Feat -- [x] Upgrade vendor list and script to download vendor list +- [x] Upgrade vendor list and script to download vendor list - [x] Add relative position modal solution - [x] Add `updateConfig` API to switch between relative and static position - [x] Pass theme colors through to anchors @@ -29,7 +37,7 @@ - [x] Upgrades cmpapi and cmpcore - [x] Updates global vendor list -- [x] Adds Device Storage to Vendor Stack to display cookieMaxAgeSeconds +- [x] Adds Device Storage to Vendor Stack to display cookieMaxAgeSeconds - [x] Splits legal-disclosure for legibility in Purpose Stack - [x] Refactor error logger @@ -41,11 +49,12 @@ - [x] Adds full width mode with feature flag - [x] Adds drop shadow toggle feature flag - [x] Adds close with × buttom feature flag -- [x] Adds default background color override +- [x] Adds default background color override ## [2.1.3](https://github.com/openmail/system1-cmp/compare/2.1.2...2.1.3) (2020-11-03) ### Chore + - [x] Update to vendor list versino 62 ## [2.1.2](https://github.com/openmail/system1-cmp/compare/2.1.1...2.1.2) (2020-10-20) diff --git a/package.json b/package.json index d966d4ba..afc3eb96 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "system1-cmp", - "version": "2.2.1", + "version": "2.2.2", "cmpVersion": 6, "description": "System1 Consent Management Platform for TCF 1.1 GDPR Compliance", "scripts": { From 0358dade58354a804995d4293c94f2ceb43bdcd3 Mon Sep 17 00:00:00 2001 From: Jonathan Li Kam Wa Date: Thu, 30 Sep 2021 10:32:23 -0400 Subject: [PATCH 3/5] revert previous comit to default isSaveShowing to false --- src/s1/lib/store.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/s1/lib/store.js b/src/s1/lib/store.js index 806ffffe..11403522 100644 --- a/src/s1/lib/store.js +++ b/src/s1/lib/store.js @@ -23,7 +23,7 @@ export default class Store { shouldAutoResizeModal = false; manualVendorConsents = new Set(); // vendor-consent management partially automatic and partially manual depending on the consent screen isModalShowing = false; - isSaveShowing = true; + isSaveShowing = false; hasSession = false; hasConsentedAll; gvl; @@ -371,7 +371,7 @@ export default class Store { save() { // close the cmp and persist settings - this.updateCmp({ shouldShowModal: false, shouldSaveCookie: true, shouldShowSave: true }); + this.updateCmp({ shouldShowModal: false, shouldSaveCookie: true, shouldShowSave: false }); } toggleAll() { @@ -383,7 +383,7 @@ export default class Store { tcModel, shouldShowModal: false, shouldSaveCookie: true, - shouldShowSave: true, + shouldShowSave: false, }); return tcModel; } From e4339ee30a0a5704084810f3037bd0b5723ec745 Mon Sep 17 00:00:00 2001 From: Jonathan Li Kam Wa Date: Thu, 30 Sep 2021 10:50:55 -0400 Subject: [PATCH 4/5] Add shouldAlwaysShowSaveButton option, to always show the save button when true --- src/s1/lib/config.js | 1 + src/s1/lib/store.js | 28 +++++++++++++++------------- src/s1/reference/tcf-2.0.html | 18 ++++++++++++++++++ 3 files changed, 34 insertions(+), 13 deletions(-) diff --git a/src/s1/lib/config.js b/src/s1/lib/config.js index 3f003072..70fb6e01 100644 --- a/src/s1/lib/config.js +++ b/src/s1/lib/config.js @@ -51,6 +51,7 @@ export const config = { theme, scriptSrc: './tcf-2.0-cmp.js', shouldAutoShowModal: true, + shouldAlwaysShowSaveButton: false, languageFilename: 'purposes/purposes-[LANG].json', translationFilename: 'translations/translations-[LANG].json', versionedFilename: 'vendor-list.json', diff --git a/src/s1/lib/store.js b/src/s1/lib/store.js index 11403522..713165a0 100644 --- a/src/s1/lib/store.js +++ b/src/s1/lib/store.js @@ -145,7 +145,7 @@ export default class Store { publisherCountryCode, isServiceSpecific, isSlimMode, - shouldAutoShowModal + shouldAutoShowModal, } = this.config; const { vendors } = this.gvl; @@ -178,7 +178,7 @@ export default class Store { cmpVersion, isServiceSpecific, publisherCountryCode, - consentScreen: ( isSlimMode ? CONSENT_SCREENS.SLIM_LAYER0 : CONSENT_SCREENS.STACKS_LAYER1 ), + consentScreen: isSlimMode ? CONSENT_SCREENS.SLIM_LAYER0 : CONSENT_SCREENS.STACKS_LAYER1, }); // Handle a new user @@ -255,7 +255,9 @@ export default class Store { updateCmp = ({ tcModel, shouldShowModal, shouldSaveCookie, shouldShowSave, isConsentByUrl = false }) => { const tcModelNew = this.autoToggleVendorConsents(tcModel); const isModalShowing = shouldShowModal !== undefined ? shouldShowModal : this.isModalShowing; - const isSaveShowing = shouldShowSave !== undefined ? shouldShowSave : this.isSaveShowing; + const alwaysShowSave = this.config.shouldAlwaysShowSaveButton; + const isSaveShowing = + alwaysShowSave || shouldShowSave !== undefined ? alwaysShowSave || shouldShowSave : this.isSaveShowing; const encodedTCString = TCString.encode(tcModelNew); const shouldAutoResizeModal = isSaveShowing ? false : this.shouldAutoResizeModal; const maxHeightModal = shouldShowSave ? this.theme.maxHeightModal : this.maxHeightModal; @@ -332,7 +334,7 @@ export default class Store { const { theme } = this; const maxHeightModal = shouldAutoResizeModal && dynamicMaxHeightModal ? dynamicMaxHeightModal : theme.maxHeightModal; - const minHeightModal = shouldAutoResizeModal && dynamicMaxHeightModal ? 0 : (theme.minHeightModal || 0); + const minHeightModal = shouldAutoResizeModal && dynamicMaxHeightModal ? 0 : theme.minHeightModal || 0; // only set if there's a change if (shouldAutoResizeModal !== this.shouldAutoResizeModal || maxHeightModal !== this.maxHeightModal) { this.setState({ @@ -528,19 +530,20 @@ export default class Store { if (!this.tcModel) { return; } - if (this.hasShownModal) { // reset on subsequent display + if (this.hasShownModal) { + // reset on subsequent display this.updateConfig({ isSlimMode: false, theme: { - isBannerInline: false - } + isBannerInline: false, + }, }); } const { isSlimMode } = this.config; this.hasShownModal = true; let tcModel = this.tcModel.clone(); - - tcModel.consentScreen = ( isSlimMode ? CONSENT_SCREENS.SLIM_LAYER0 : CONSENT_SCREENS.STACKS_LAYER1 ); + + tcModel.consentScreen = isSlimMode ? CONSENT_SCREENS.SLIM_LAYER0 : CONSENT_SCREENS.STACKS_LAYER1; this.updateCmp({ shouldShowModal, @@ -592,7 +595,6 @@ export default class Store { }); }); - const gvlPromise = this.gvl.changeLanguage(language).then(() => { if (this.tcModel) { const { language } = this.gvl; @@ -609,13 +611,13 @@ export default class Store { } updateConfig(newConfig) { - const {theme = config.theme } = newConfig; + const { theme = config.theme } = newConfig; Object.assign(this.config, { ...newConfig, theme: { ...this.config.theme, - ...theme - } + ...theme, + }, }); } } diff --git a/src/s1/reference/tcf-2.0.html b/src/s1/reference/tcf-2.0.html index 95562708..645eb8ce 100644 --- a/src/s1/reference/tcf-2.0.html +++ b/src/s1/reference/tcf-2.0.html @@ -176,6 +176,10 @@

TCFString

Should Auto Show Modal: +
  • + Should Always Show the Save Button: + +
    • @@ -200,6 +204,7 @@

    TCFString

    const domCloseWithX = document.querySelector('#domCloseWithX'); const domInsertionNode = document.querySelector('#domInsertionNode'); const domAutoShowModal = document.querySelector('#domAutoShowModal'); + const domAlwaysShowSaveButton = document.querySelector('#domAlwaysShowSaveButton'); const setupQaTools = function (store) { const LANGUAGES = store.LANGUAGES; @@ -258,6 +263,11 @@

    TCFString

    return params.get('autoshowmodal') !== 'false'; }; + const shouldAlwaysShowSaveButton = function () { + let params = new URLSearchParams(window.location.search); + return params.get('alwaysshowsavebutton') === 'true'; + }; + const getInsertionNode = function () { let params = new URLSearchParams(window.location.search); return params.get('insertionnode'); @@ -292,6 +302,7 @@

    TCFString

    isSlimMode: shouldUseSlim(), shouldShowCloseX: shouldShowCloseX(), shouldAutoShowModal: shouldAutoShowModal(), + shouldAlwaysShowSaveButton: shouldAlwaysShowSaveButton(), insertionNode: getInsertionNode(), // narrowedVendors: [1, 2, 3, 4, 5, 6], }; @@ -410,6 +421,13 @@

    TCFString

    params.set('autoshowmodal', domAutoShowModal.checked); window.location.search = params.toString(); }); + + domAlwaysShowSaveButton.checked = shouldAlwaysShowSaveButton(); + domAlwaysShowSaveButton.addEventListener('change', function () { + let params = new URLSearchParams(window.location.search); + params.set('alwaysshowsavebutton', domAlwaysShowSaveButton.checked); + window.location.search = params.toString(); + }); From 681b38b78fe3c1e725d3047dbbd7848c85582027 Mon Sep 17 00:00:00 2001 From: Jonathan Li Kam Wa Date: Thu, 30 Sep 2021 11:04:38 -0400 Subject: [PATCH 5/5] update README --- README.md | 52 ++++++++++++++++++++++++++-------------------------- 1 file changed, 26 insertions(+), 26 deletions(-) diff --git a/README.md b/README.md index 35d8e327..03ad9965 100644 --- a/README.md +++ b/README.md @@ -13,7 +13,6 @@ Feel free to fork this CMP and submit to IAB for private use. - - [SDK / Package Details](#sdk--package-details) - [Installation / Use](#installation--use) - [API](#api) @@ -197,7 +196,7 @@ Calling `__tcfapi('changeConfig', 2, () => {}, {isSlimMode: true, theme: {isInli * @param callback // required function, called when changeLanguage completes, called with `store` and result * @param config // required object, merges with existing config object providing during `init()` */ -__tcfapi('changeConfig', 2, (store) => {}, {theme: {isInlineMode: false}}); // changes config to use inline-mode +__tcfapi('changeConfig', 2, (store) => {}, { theme: { isInlineMode: false } }); // changes config to use inline-mode ``` ## Configuration / Config @@ -218,29 +217,30 @@ __tcfapi('init', 2, () => {}, { }); ``` -| Config Property | Type | Default | Detail | -| ---------------------- | ---------------- | --------------------------------------- | ----------------------------------------------------------------------------------------------------------------- | -| `canLog` | optional boolean | `false` | true enables DPL logging for health monitoring. Add `#s1&debug=true` to URL for easy DPL debugging | -| `canDebug` | optional boolean | `false` | true enables internal console logging for debugging | -| `baseUrl` | optional string | `./config/2.0` | relative or absolute url to load the global vendor list. Combines with `versionedFilename` to load vendorlist. | -| `versionedFilename` | optional string | `vendor-list.json` | file name of the global vendor list. | -| `narrowedVendors` | optional array | `[]` | Only show select vendors. Example [1,4,5,19] | -| `language` | optional string | null | 2-character language code to initialize CMP with. If no language matches, CMP boots with `en` Ex 'en', 'ja', 'it' | -| `languageFilename` | optional string | `purposes/purposes-[LANG].json` | file name template for gvl localized purpose json files | -| `translationFilename` | optional string | `translations/translations-[LANG].json` | file name template for custom localized json files for UI layer | -| `cookieDomain` | optional string | null | manage consent across subdomains. Example `.mysite.com` | -| `gdprApplies` | optional boolean | `false` | Please pass `true` if being used on EU traffic where active consent is required | -| `ccpaApplies` | optional boolean | `false` | Please pass `true` if being used on USA:CA traffic where "Do Not Sell" initiates CMP passively | -| `experimentId` | optional string | `control` | use to indicate changes / upgrades in your CMP implementation for reporting / monitoring purposes. | -| `business` | optional string | `dev` | used to correlate CMP events for monitoring across a businessline. | -| `theme` | optional object | [details below](#theme) | Override styling choices using the following properties. | -| `publisherCountryCode` | optional string | `US` | String representing country code of parent website business | -| `isServiceSpecific` | optional boolean | `true` | true uses publisher consent, false uses global consent | -| `shouldAutoShowModal` | optional boolean | `true` | true will automatically display UI modal after init, false will not | -| `shouldUseStacks` | optional boolean | `true` | true uses stacks on Layer1, TODO stacks need purposes/custom-features toggle to be compliant | -| `isSlimMode` | optional boolean | `false` | If `true`, initial banner is low profile, full width banner v2.1.4+ | -| `shouldShowCloseX` | optional boolean | `false` | If `true`, a × icon will appear in the upper right on layers to accept-all and close v2.1.4+ | -| `insertionNode` | optional string | `` | UI will be appended to this element using `querySelector`. Default behavior appends to body v2.2.0+ | +| Config Property | Type | Default | Detail | +| ---------------------------- | ---------------- | --------------------------------------- | ----------------------------------------------------------------------------------------------------------------- | +| `canLog` | optional boolean | `false` | true enables DPL logging for health monitoring. Add `#s1&debug=true` to URL for easy DPL debugging | +| `canDebug` | optional boolean | `false` | true enables internal console logging for debugging | +| `baseUrl` | optional string | `./config/2.0` | relative or absolute url to load the global vendor list. Combines with `versionedFilename` to load vendorlist. | +| `versionedFilename` | optional string | `vendor-list.json` | file name of the global vendor list. | +| `narrowedVendors` | optional array | `[]` | Only show select vendors. Example [1,4,5,19] | +| `language` | optional string | null | 2-character language code to initialize CMP with. If no language matches, CMP boots with `en` Ex 'en', 'ja', 'it' | +| `languageFilename` | optional string | `purposes/purposes-[LANG].json` | file name template for gvl localized purpose json files | +| `translationFilename` | optional string | `translations/translations-[LANG].json` | file name template for custom localized json files for UI layer | +| `cookieDomain` | optional string | null | manage consent across subdomains. Example `.mysite.com` | +| `gdprApplies` | optional boolean | `false` | Please pass `true` if being used on EU traffic where active consent is required | +| `ccpaApplies` | optional boolean | `false` | Please pass `true` if being used on USA:CA traffic where "Do Not Sell" initiates CMP passively | +| `experimentId` | optional string | `control` | use to indicate changes / upgrades in your CMP implementation for reporting / monitoring purposes. | +| `business` | optional string | `dev` | used to correlate CMP events for monitoring across a businessline. | +| `theme` | optional object | [details below](#theme) | Override styling choices using the following properties. | +| `publisherCountryCode` | optional string | `US` | String representing country code of parent website business | +| `isServiceSpecific` | optional boolean | `true` | true uses publisher consent, false uses global consent | +| `shouldAutoShowModal` | optional boolean | `true` | true will automatically display UI modal after init, false will not | +| `shouldAlwaysShowSaveButton` | optional boolean | `false` | true will always show the save button on the UI. False will only display the save button when a change is made | +| `shouldUseStacks` | optional boolean | `true` | true uses stacks on Layer1, TODO stacks need purposes/custom-features toggle to be compliant | +| `isSlimMode` | optional boolean | `false` | If `true`, initial banner is low profile, full width banner v2.1.4+ | +| `shouldShowCloseX` | optional boolean | `false` | If `true`, a × icon will appear in the upper right on layers to accept-all and close v2.1.4+ | +| `insertionNode` | optional string | `` | UI will be appended to this element using `querySelector`. Default behavior appends to body v2.2.0+ | ### theme @@ -256,7 +256,7 @@ Themeing is a bit limited right now. Pass in a `config.theme` object during init | `textLinkColor` | optional string | null | Example: `#0099ff` | | `secondaryColor` | optional string | null | Example: `#869cc0` | | `featuresColor` | optional string | null | Example: `#d0d3d7` | -| `backgroundColor` | optional string | null | Example: `#d0d3d7` Sets the background color of the banners. v2.1.4+ | +| `backgroundColor` | optional string | null | Example: `#d0d3d7` Sets the background color of the banners. v2.1.4+ | | `isFullWidth` | optional boolean | false | Removes rounded corners and makes banners full width - matching style layout slimMode v2.1.4+ | | `isBannerInline` | optional boolean | false | Renders CMP inline instead of overlaying layout. Subsequent CMP views open in modal v2.2.0+ | | `shouldShowDropShadow` | optional boolean | true | When set to `true`, displays the drop shadoq on banners v2.1.4+ |