@dpgradio/creative 7.6.0-beta.1 → 8.0.0

package/README.md

@@ -30,9 +30,9 @@ Example:
 @import "@dpgradio/creative/styles/fonts/qmusic";
 
 body, html {
-  background-color: rgb(var(--q-teal));
+  background-color: rgb(var(--q-green));
   color: rgb(var(--q-grey) / 0.8);
-  font-family: 'QMarkMyWords';
+  font-family: 'BlackBones';
 }
 ```
 
@@ -61,11 +61,11 @@ await configuration.retrieveConfigForDetectedStation(appId) // Default, by hostn
 // Or, if you want to retrieve the config by hostnames only.
 await configuration.retrieveConfigByHostname(appId)
 // Or, if you want to retrieve the config for a specific station:
-await configuration.retrieveConfigByStation(stationId, appId)
+await configuration.retrieveConfigForStation(stationId, appId)
 
 // By default the first station ID (stationIdA) is used as the current station of the configuration.
 // If you want to use a different station, you can do so by calling setStation:
-await configuration.retrieveConfigByStations([stationIdA, stationIdB, stationIdC], appId)
+await configuration.retrieveConfigForStations([stationIdA, stationIdB, stationIdC], appId)
 configuration.setStation(stationIdC)
 ```
 You can change the station later on at any time without having to retrieve the config again.
@@ -152,6 +152,18 @@ dataLayer.pushVirtualPageView(brand) // brand is not required when the config is
 dataLayer.pushEvent(event, data)
 ```
 
+With Mixpanel
+```js
+import { mixpanel } from '@dpgradio/creative'
+import Mixpanel from 'mixpanel-browser'
+
+mixpanel.initialize(Mixpanel, {
+    mixpanelId: 'MIXPANEL ID',
+})
+
+mixpanel.trackEvent(event, data)
+```
+
 ## API
 
 With an initialized [configuration](#config):
@@ -354,6 +366,25 @@ const image = new ImageGeneratorProperties('https://static.qmusic.be/acties/joe-
 (await shareable.generateUsingImage(image)).openWhatsappUrl()
 ```
 
+## CSP
+
+Sometimes it's necessary to set strict Content Security Policy (CSP) headers. When that's the case a nicety of some of the methods in this package is that they support a random nonce to be passed in so extra sources (GTM, Privacy gate) don't need to be explicitly whitelisted (since they might be unknown at the time of development). Our datalayer and privacy gate initializers have an optional `nonce` parameter that can be passed in.
+
+```js
+import { privacy, dataLayer } from '@dpgradio/creative'
+
+privacy.initialize(privacyManagerId, websiteUrl, cmpCname, { nonce: "abc1234" })
+dataLayer.initialize({ nonce: "abc1234" })
+```
+
+Which then allows you to whitelist that nonce in your CSP header
+
+```
+Content-Security-Policy: script-src 'nonce-abc1234'
+```
+
+**!! Take note that this nonce need to be random on every request, as else this security is useless !!**
+
 ## Utilities
 
 This package provides a number of utility functions.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dpgradio/creative",
-  "version": "7.6.0-beta.1",
+  "version": "8.0.0",
   "description": "Support package for standalone Javascript applications",
   "main": "src/index.js",
   "scripts": {
@@ -10,7 +10,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/dpgradio/creative.git"
+    "url": "git+https://github.com/dpgradio/creative.git"
   },
   "keywords": [
     "qmusic"

package/src/analytics/dataLayer.js

@@ -5,13 +5,37 @@ import loadScript from '../utils/loadScript.js'
 
 class DataLayer {
   constructor() {
+    if (typeof window === 'undefined') {
+      return
+    }
+
     window.dataLayer = window.dataLayer || []
     this.campaignDetails = {}
     this.userInformation = {}
   }
 
-  initialize(gtmId = 'GTM-TW99VZN') {
-    loadScript(`https://www.googletagmanager.com/gtm.js?id=${gtmId}`)
+  /**
+   * @param {Object} parameters   The parameters object.
+   * @param {string} [parameters.gtmId]   The GTM ID - Defaults to our default GTM tag
+   * @param {string} [parameters.nonce]   The nonce value for the script tag (Used for CSP).
+   */
+  initialize(parameters) {
+    // Backwards compatability
+    if (typeof parameters === 'string') {
+      parameters = { gtmId: parameters }
+
+      // Deprecation warning in development
+      if (process.env.NODE_ENV === 'development') {
+        console.warn(
+          '@dpgmedia/creative',
+          'DEPRECATION WARNING: new Datalayer(gtmId) is deprecated, please use new Datalayer({ gtmId }) instead.'
+        )
+      }
+    }
+
+    const { gtmId = 'GTM-TW99VZN', nonce } = parameters || {}
+
+    loadScript(`https://www.googletagmanager.com/gtm.js?id=${gtmId}`, { nonce })
 
     this.pushGtmStart()
     this.pushUserWhenAuthenticated()

package/src/analytics/mixpanel.js

@@ -1,4 +1,4 @@
-import { privacy } from '../privacy/privacy'
+import privacy from '../privacy/privacy.js'
 
 class Mixpanel {
   constructor() {
@@ -7,11 +7,11 @@ class Mixpanel {
     this.mixpanel = null
   }
 
-  initialize(Mixpanel, { mixpanelId, track_pageview = true }) {
+  initialize(Mixpanel, { mixpanelId, trackPageview = true }) {
     this.mixpanel = Mixpanel
     privacy.push('analytics', () => {
       this.mixpanel.init(mixpanelId, {
-        track_pageview,
+        track_pageview: trackPageview,
         persistence: 'localStorage',
         api_host: 'https://api-eu.mixpanel.com',
       })
@@ -20,10 +20,12 @@ class Mixpanel {
         const { eventName, properties } = this.trackBacklog.shift()
         this.mixpanel.track(eventName, properties)
       }
+
+      this.trackingEvents = true
     })
   }
 
-  trackEvent(eventName, properties) {
+  pushEvent(eventName, properties) {
     if (this.trackingEvents) {
       this.mixpanel.track(eventName, properties)
     } else {

package/src/app/hybrid.js

@@ -17,6 +17,10 @@ class Hybrid {
   }
 
   constructor() {
+    if (typeof window === 'undefined') {
+      return
+    }
+
     // Hook this on window so it can be required in multiple packs
     window._hybridEventSubscriptions = window._hybridEventSubscriptions || {}
 

package/src/config/config.js

@@ -18,10 +18,10 @@ class Configuration {
   /**
    * Retrieve the configuration for the current hostname or present query parameter and the given app (optional).
    */
-  async retrieveConfigForDetectedStation(appId = null) {
+  async retrieveConfigForDetectedStation(appId = null, { parameterName = 'stationId' } = {}) {
     const parameters = new URLSearchParams(window.location.search)
-    if (parameters.has('stationId')) {
-      return this.retrieveConfigForStation(parameters.get('stationId'), appId)
+    if (parameters.has(parameterName)) {
+      return this.retrieveConfigForStation(parameters.get(parameterName), appId)
     }
     return this.retrieveConfigByHostname(appId)
   }

package/src/privacy/privacy.js

@@ -3,6 +3,10 @@ import loadScript from '../utils/loadScript.js'
 
 class Privacy {
   constructor() {
+    if (typeof window === 'undefined') {
+      return
+    }
+
     window._privacy = window._privacy || []
 
     this.consent = undefined
@@ -15,11 +19,14 @@ class Privacy {
    * @param {string}  privacyManagerId   e.g. '148844'
    * @param {string}  websiteUrl         e.g. 'https://qmusic.nl'
    * @param {string}  cmpCname           e.g. 'https://cmp.qmusic.nl'
+   * @param {Object}  options            Additional options.
+   * @param {string}  [options.nonce]    The nonce value for the script tag (Used for CSP).
    */
   initialize(
     privacyManagerId = config('privacy_manager_id'),
     websiteUrl = config('website_url'),
-    cmpCname = config('cmp_cname')
+    cmpCname = config('cmp_cname'),
+    { nonce = undefined } = {}
   ) {
     window.cmpProperties = {
       privacyManagerId,
@@ -28,7 +35,7 @@ class Privacy {
       language: 'nl',
     }
 
-    loadScript('https://myprivacy-static.dpgmedia.net/consent.js')
+    loadScript('https://myprivacy-static.dpgmedia.net/consent.js', { nonce })
 
     this.requestConsentInformation()
   }
@@ -49,10 +56,39 @@ class Privacy {
       this.consentSubscribers.forEach((subscriber) => subscriber(null))
     }, timeoutTime)
 
-    this.pushFunctional(() => {
-      clearTimeout(timeout)
-      this.consent = new Consent(window._privacy.consentString, window._privacy.purposesProvider.enabledPurposes)
-      this.consentSubscribers.forEach((subscriber) => subscriber(this.consent))
+    this.pushConsentGiven((consentData) => {
+      let updatedConsentData = {
+        consentString: consentData.tcString,
+        purposes: new Set(consentData.dpgConsentString.split('|')),
+      }
+      const iabPurposePromises = []
+
+      // We have 10 IAB purposes, so we create 10 promises that resolve with the purpose number or null if the purpose is not given.
+      for (let i = 1; i < 11; i++) {
+        iabPurposePromises.push(
+          new Promise((resolve) => {
+            this.push(
+              i,
+              () => resolve(i), // Resolve with the purpose number
+              () => resolve(null) // Resolve without a value, indicating that the purpose is not given
+            )
+          })
+        )
+      }
+
+      Promise.all(iabPurposePromises).then((purposeConsents) => {
+        updatedConsentData = purposeConsents.reduce((acc, purpose) => {
+          if (purpose) {
+            acc.purposes.add(purpose)
+          }
+          return acc
+        }, updatedConsentData)
+
+        this.consent = new Consent(updatedConsentData)
+        this.consentSubscribers.forEach((subscriber) => subscriber(this.consent))
+
+        clearTimeout(timeout)
+      })
     })
   }
 
@@ -75,8 +111,12 @@ class Privacy {
     })
   }
 
-  push(type, callback) {
-    window._privacy.push([type, callback])
+  push(type, successCallback, failCallback = () => {}) {
+    window._privacy.push([type, successCallback, failCallback])
+  }
+
+  pushConsentGiven(callback) {
+    this.push('consentgiven', callback)
   }
 
   pushFunctional(callback) {
@@ -84,16 +124,14 @@ class Privacy {
   }
 }
 
-const targetedAdvertisingPurposes = [3, 4]
-
 class Consent {
-  constructor(consentString, purposes) {
-    this.consentString = consentString
-    this.purposes = purposes
+  constructor(consentData) {
+    this.consentString = consentData.consentString
+    this.purposes = consentData.purposes
   }
 
   allowsTargetedAdvertising() {
-    return targetedAdvertisingPurposes.every((purpose) => this.purposes.has(purpose.toString()))
+    return this.purposes.has('targeted_advertising')
   }
 }
 

package/src/share/ShareResult.js

@@ -1,4 +1,4 @@
-import openLink from '../utils/openLink.js'
+import openExternalUrl from '../utils/openExternalUrl.js'
 
 export default class ShareResult {
   constructor(shareable, { url, image }) {
@@ -20,14 +20,14 @@ export default class ShareResult {
   }
 
   openFacebookUrl() {
-    openLink(this.facebookUrl())
+    openExternalUrl(this.facebookUrl())
   }
 
   openWhatsappUrl() {
-    openLink(this.whatsappUrl())
+    openExternalUrl(this.whatsappUrl())
   }
 
   openInstagramUrl() {
-    openLink(this.instagramUrl())
+    openExternalUrl(this.instagramUrl())
   }
 }

package/src/share/Shareable.js

@@ -1,5 +1,3 @@
-// eslint-disable-next-line import/no-unresolved -- TODO: Needs a rewrite to fetch
-import axios from 'axios'
 import ShareResult from './ShareResult.js'
 
 export default class Shareable {
@@ -36,21 +34,21 @@ export default class Shareable {
     return this
   }
 
-  generateUsingImage(imageGeneratorProperties) {
-    return new Promise((resolve, reject) => {
-      axios({
-        url: 'https://dba1du5ckc.execute-api.eu-west-3.amazonaws.com/prod/',
-        method: 'post',
-        data: {
-          title: this.title,
-          description: this.description,
-          image_generator: imageGeneratorProperties.toJson(),
-          redirect_url: this.redirectUrl,
-          domain: this.domain,
-        },
-      })
-        .then((response) => resolve(new ShareResult(this, response.data)))
-        .catch(reject)
+  async generateUsingImage(imageGeneratorProperties) {
+    const response = await fetch('https://dba1du5ckc.execute-api.eu-west-3.amazonaws.com/prod/', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        title: this.title,
+        description: this.description,
+        image_generator: imageGeneratorProperties.toJson(),
+        redirect_url: this.redirectUrl,
+        domain: this.domain,
+      }),
     })
+    const data = await response.json()
+    return new ShareResult(this, data)
   }
 }

package/src/utils/loadScript.js

@@ -1,12 +1,15 @@
 // From: https://github.com/medialaan/radio-radioplayer-frontend/blob/develop/src/general/utils/loadScript.js
 // TODO: Refactor
 
-export default function loadScript(url, { timeout = undefined } = {}) {
+export default function loadScript(url, { timeout = undefined, nonce = undefined } = {}) {
   return new Promise((resolve, reject) => {
     let script = document.createElement('script')
     const firstScript = document.getElementsByTagName('script')[0]
     script.async = true
     script.defer = true
+    if (nonce) {
+      script.nonce = nonce
+    }
 
     const loadScriptTimeout = timeout ? setTimeout(() => reject(`Loading script [${url}] blocked.`), timeout) : null
 

package/styles/colors/qmusic.css

@@ -1,17 +1,13 @@
 :root {
   --q-red: 237 54 36;
-  --q-grey: 61 61 61;
-  --q-teal: 0 191 179;
-  --q-yellow: 249 212 35;
-  --q-purple: 210 110 230;
-  --q-green: 151 215 0;
-  --q-blue: 2 134 255;
+  --q-red-dark: 217 46 32;
 
-  --q-red-dark: 205 34 17;
-  --q-blue-dark: 9 0 134;
+  --q-grey: 61 61 61;
+  --q-grey-light: 230 230 230;
+  --q-grey-dark: 43 43 43;
 
-  --q-blue-light: 91 194 231;
-  --q-teal-light: 184 229 209;
-  --q-grey-light: 249 249 250;
-  --q-purple-light: 244 224 249;
+  --q-green: 168 216 50;
+  --q-yellow: 249 243 197;
+  --q-purple: 252 104 182;
+  --q-blue: 124 186 247;
 }

package/styles/fonts/qmusic.css

@@ -41,8 +41,11 @@
 }
 
 @font-face {
-	font-family: QMarkMyWords;
-	src: url(https://fonts.qmusic.be/qmarkmywords-webfont.ttf), url(https://fonts.qmusic.be/qmarkmywords-webfont.eot), url(https://fonts.qmusic.be/qmarkmywords-webfont.woff), url(https://fonts.qmusic.be/qmarkmywords-webfont.woff2), url(https://fonts.qmusic.be/qmarkmywords-webfont.svg);
-	font-weight: 400;
-	font-style: normal
+	font-family: BlackBones;
+	src: url(https://fonts.qmusic.be/black-bones.ttf), url(https://fonts.qmusic.be/black-bones.eot), url(https://fonts.qmusic.be/black-bones.woff), url(https://fonts.qmusic.be/black-bones.woff2), url(https://fonts.qmusic.be/black-bones.svg);
+   	font-weight: normal;
+	font-style: normal;
+	font-display: fallback;
 }
+
+