fix (cmp: showConsent) only show consent modal automatically if gdprApplies

CHANGELOG.md

@@ -1,4 +1,8 @@
-## [2.2.0](https://github.com/openmail/system1-cmp/compare/2.1.7...2.1.8) (2021-05-17)
+## [2.2.1](https://github.com/openmail/system1-cmp/compare/2.2.0...2.2.1) (2021-11-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
 

README.md

@@ -236,6 +236,7 @@ __tcfapi('init', 2, () => {}, {
 | `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 <sup>v2.1.4+</sup>                                    |
 | `shouldShowCloseX`     | optional boolean | `false`                                 | If `true`, a &times; icon will appear in the upper right on layers to accept-all and close <sup>v2.1.4+</sup>     |

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "system1-cmp",
-	"version": "2.2.0",
+	"version": "2.2.1",
 	"cmpVersion": 6,
 	"description": "System1 Consent Management Platform for TCF 1.1 GDPR Compliance",
 	"scripts": {

src/s1/lib/config.js

@@ -50,6 +50,7 @@ export const config = {
 	shouldUseStacks: true, // todo: stacks need individual purposes/special-features with toggles
 	theme,
 	scriptSrc: './tcf-2.0-cmp.js',
+	shouldAutoShowModal: true,
 	languageFilename: 'purposes/purposes-[LANG].json',
 	translationFilename: 'translations/translations-[LANG].json',
 	versionedFilename: 'vendor-list.json',

src/s1/lib/store.js

@@ -144,7 +144,8 @@ export default class Store {
 			gdprConsentUrlParam,
 			publisherCountryCode,
 			isServiceSpecific,
-			isSlimMode,	
+			isSlimMode,
+			shouldAutoShowModal
 		} = this.config;
 		const { vendors } = this.gvl;
 
@@ -190,7 +191,8 @@ export default class Store {
 			// tcModel.setAll();
 
 			// update internal models, show ui, dont save to cookie
-			this.updateCmp({ tcModel, shouldShowModal: true });
+
+			this.updateCmp({ tcModel, shouldShowModal: shouldAutoShowModal });
 			this.setDisplayLayer1();
 			this.hasShownModal = true;
 		} else {
@@ -590,6 +592,7 @@ export default class Store {
 			});
 		});
 
+
 		const gvlPromise = this.gvl.changeLanguage(language).then(() => {
 			if (this.tcModel) {
 				const { language } = this.gvl;

src/s1/reference/tcf-2.0.html

@@ -172,6 +172,10 @@ <h3>TCFString</h3>
 							Insertion Node:
 							<input id="domInsertionNode" type="text" value="" />
 						</li>
+						<li>
+							Should Auto Show Modal:
+							<input id="domAutoShowModal" type="checkbox" checked>
+						</li>
 					</ul>
 				</li>
 			</ul>
@@ -195,6 +199,7 @@ <h3>TCFString</h3>
 			const domDropShadow = document.querySelector('#domDropShadow');
 			const domCloseWithX = document.querySelector('#domCloseWithX');
 			const domInsertionNode = document.querySelector('#domInsertionNode');
+			const domAutoShowModal = document.querySelector('#domAutoShowModal');
 
 			const setupQaTools = function (store) {
 				const LANGUAGES = store.LANGUAGES;
@@ -248,6 +253,11 @@ <h3>TCFString</h3>
 				return params.get('closewithx') === 'true';
 			};
 
+			const shouldAutoShowModal = function () {
+				let params = new URLSearchParams(window.location.search);
+				return params.get('autoshowmodal') !== 'false';
+			};
+
 			const getInsertionNode = function () {
 				let params = new URLSearchParams(window.location.search);
 				return params.get('insertionnode');
@@ -281,6 +291,7 @@ <h3>TCFString</h3>
 				shouldUseStacks: shouldUseStacks(),
 				isSlimMode: shouldUseSlim(), 
 				shouldShowCloseX: shouldShowCloseX(),
+				shouldAutoShowModal: shouldAutoShowModal(),
 				insertionNode: getInsertionNode(),
 				// narrowedVendors: [1, 2, 3, 4, 5, 6],
 			};
@@ -296,7 +307,7 @@ <h3>TCFString</h3>
 					setupQaTools(store);
 					console.log('cmp: onInitComplete', store, error);
 					if (!store.isModalShowing) {
-						__tcfapi('showConsentTool', 2, function () {});
+						// __tcfapi('showConsentTool', 2, function () {});
 					}
 				},
 				config
@@ -392,6 +403,13 @@ <h3>TCFString</h3>
 					window.location.search = params.toString();
 				}, 350)
 			});
+
+			domAutoShowModal.checked = shouldAutoShowModal();
+			domAutoShowModal.addEventListener('change', function () {
+				let params = new URLSearchParams(window.location.search);
+				params.set('autoshowmodal', domAutoShowModal.checked);
+				window.location.search = params.toString();
+			});
 		</script>
 	</body>
 </html>