tri review

src/cmp/Cmp.js

@@ -7,20 +7,25 @@ import tagManagerModule from './tagManager';
 export default class Cmp extends ConsentString {
   constructor(result = null) {
     super(result.iabCookie);
+    this.clientId = result.clientId;
+  }
+
+  // will be usefull when all data are retrieved async
+  async _initialize(){
     this.setCmpId(52);
     this.setCmpVersion(1);
     this.setConsentLanguage('en');
     this.setConsentScreen(1);
     this.setGlobalVendorList(iabVendorList);
-    this.clientId = result.clientId;
     this.cmpLoaded = false;
     this.customVendorsAllowed = getCustomVendorsAllowed();
   }
 
   readyCmpAPI() {
     this.cmpLoaded = true;
     console.log(`[INFO][Module-CMP]: CMP loaded status is => ${this.cmpLoaded}`);
-    Promise.resolve();
+    // doesn't even return anything
+    // Promise.resolve();
   }
 
   ping(empty = null, callback = () => {}) {
@@ -45,21 +50,19 @@ export default class Cmp extends ConsentString {
     callback(result, true);
   }
 
-  showConsentTool() {
+  async showConsentTool() {
     console.log('[INFO][CMP-Module] showConsentTool() has been called.');
-    return new Promise((resolve, reject) => {
-      return import(
-        /* webpackMode: "lazy",
-        webpackPrefetch: true,
-        webpackChunkName: "ui" */
-        '../ui/main')
-        .then(appModule => appModule.default(this.clientId))
-        .then(userConsentObject => this.updateCmpAndWriteCookie(userConsentObject))
-        .then(() => tagManagerModule())
-        .then(() => cookies.requestHttpCookies('euconsent', this.getConsentString()))
-        .then(result => Promise.resolve(result))
-        .catch(err => console.error(err));
-    });
+    return import(
+      /* webpackMode: "lazy",
+      webpackPrefetch: true,
+      webpackChunkName: "ui" */
+      '../ui/main')
+      .then(appModule => appModule.default(this.clientId))
+      .then(userConsentObject => this.updateCmpAndWriteCookie(userConsentObject))
+      .then(() => tagManagerModule(this.getPurposesAllowed()))
+      .then(() => cookies.requestHttpCookies('euconsent', this.getConsentString()))
+      .then(result => result)
+      .catch(err => console.error(err));
   }
 
   setCustomVendorsAllowed(customVendorArray) {

src/cmp/index.js

@@ -1,11 +1,12 @@
 import Cmp from './Cmp';
 
-export default function initCmp(loaderData) {
+export default async function initCmp(loaderData) {
+
   console.log('[INFO][Module-Loader]: ', loaderData);
-  return new Promise((resolve, reject) => {
-    const cmp = new Cmp(loaderData);
-    if (!cmp) reject();
-    console.log('[INFO][Module-CMP]: ', cmp);
-    resolve(cmp);
-  });
+  const cmp = new Cmp(loaderData);
+  if (!cmp) throw 'cmp is NULL';
+
+  console.log('[INFO][Module-CMP]: ', cmp);
+  await cmp._initialize();
+  return cmp;
 }

src/cmp/isShowUi.js

@@ -1,5 +1,10 @@
 export default function (cookie) {
-  const isCookiePresent = (typeof cookie === 'string');
-  console.log('[INFO][Module-isShowUi]: ', !isCookiePresent);
-  return Promise.resolve(!isCookiePresent);
+  // make it sync
+  // wont make a difference to be async
+  return !(typeof cookie === 'string')
+
+  // const isCookiePresent = (typeof cookie === 'string');
+  // console.log('[INFO][Module-isShowUi]: ', !isCookiePresent);
+
+  // !isCookiePresent;
 }

src/cmp/tagManager.js

@@ -13,9 +13,8 @@ function updateConsentCookies(purposeArray) {
   }
 }
 
-export default function tagManagerModule() {
+export default function tagManagerModule(purposeArray) {
   return new Promise((resolve, reject) => {
-    const purposeArray = cmp.getPurposesAllowed();
     if (purposeArray === undefined || purposeArray.length == 0) {
       console.log('[INFO][Module-TMS] => No user consented purposes');
       resolve(false);

src/loader/utils/getClientId.js

@@ -1,7 +1,11 @@
 export default function getClientID() {
-  return new Promise((resolve, reject) => {
-    const scriptElement = document.getElementById('pluto-cmp-js-src');
-    const clientId = (scriptElement) ? scriptElement.getAttribute('client-id') : 0;
-    resolve(parseInt(clientId));
-  });
+
+  const scriptElement = document.getElementById('pluto-cmp-js-src');
+  return (scriptElement) ? scriptElement.getAttribute('client-id') : 0;
+
+  // return new Promise((resolve, reject) => {
+  //   const scriptElement = document.getElementById('pluto-cmp-js-src');
+  //   const clientId = (scriptElement) ? scriptElement.getAttribute('client-id') : 0;
+  //   resolve(parseInt(clientId));
+  // });
 }

src/loader/utils/isDataLayer.js

@@ -1,7 +1,5 @@
 // renameBug..
-export default function isDataLayer() {
-  return new Promise((resolve, reject) => {
-    const result = (typeof dataLayer !== 'undefined') ? true : false;
-    resolve(result);
-  });
+// use async if this will be promise in the future 
+export default async function isDataLayer() {
+  return typeof dataLayer !== 'undefined'
 }

src/main.js

@@ -5,17 +5,26 @@ import isShowUi from './cmp/isShowUi';
 import tagManagerModule from './cmp/tagManager';
 
 async function init() {
+
+  // prevent this script from running without window object
+  // e.g: SSR
+  if(typeof window === 'undefined') return;
+
+
+  // in async, use try catch instead
+  // or catch on execution
+
   const loaderData = await initLoader();
   const cmp = await initCmp(loaderData);
-  window.cmp = cmp; // TODO: remove this it should not be set globally
-  initApi(cmp)
-    .then(() => isShowUi(loaderData.iabCookie))
-    .then((bool) => {
-      if (bool) cmp.showConsentTool();
-      Promise.resolve(true);
-    })
-    .then(result => cmp.readyCmpAPI(result))
-    .then(() => tagManagerModule())
-    .catch(err => console.error(err));
+
+  await initApi(cmp);
+  const result = isShowUi(loaderData.iabCookie) ? await cmp.showConsentTool() : true;
+
+  // why do we need window.__cpm ?
+  cmp.readyCmpAPI(result);
+
+  tagManagerModule(cmp.getPurposesAllowed());
+
 }
-init();
+
+init().catch(e => console.log(e));

src/ui/main.js

@@ -46,20 +46,16 @@ const vm = new Vue(App).$mount('#cmp-app');
 
 // this function is called to load the UI, it accepts the clientId
 function renderVueApp(clientId) {
-  return new Promise((resolve, reject) => {
-    if (vm) {
-      vm.$store.commit('setClientId', parseInt(clientId, 10));
-      vm.$store.dispatch('setClientId', parseInt(clientId, 10));
-      vm.$store.commit('changeShowState', true);
-      EventBus.$on('save-selection', (value) => {
-        console.log('[INFO][CMP-UI] Resolving Promise (save-selection):', value);
-        resolve(value);
-      });
-    } else {
-      console.error('CMP-UI :: No App Present');
-      reject();
-    }
-  });
+  if(!vm) return Promise.reject(new Error('CMP-UI :: No App Present'));
+
+  vm.$store.commit('setClientId', parseInt(clientId, 10));
+  vm.$store.dispatch('setClientId', parseInt(clientId, 10));
+  vm.$store.commit('changeShowState', true);
+
+  return new Promise((resolve, reject) => EventBus.$on('save-selection', (value) => {
+    console.log('[INFO][CMP-UI] Resolving Promise (save-selection):', value);
+    resolve(value);
+  }));
 }
 
 export default renderVueApp;