@dpgradio/creative 5.9.2 → 6.0.0-beta.1

package/README.md

@@ -241,10 +241,12 @@ const image = new ImageGeneratorProperties('https://static.qmusic.be/acties/joe-
 
 This package provides a number of utility functions.
 
-| Function                        | Description                                                                              |
-| ------------------------------- | ---------------------------------------------------------------------------------------- |
-| `loadScript(url, { timeout })`  | Dynammically loads a JS script.                                                          |
-| `openLink(url)`                 | App-compatible link opener.                                                              |
-| `tap(value, callback)`          | Invokes `callback` with the `value` and then returns `value`.                            |
-| `cdnImageUrl(endpoint[, size])` | Get a full image URL for an endpoint in a given size (`w480`, `w800`, `w1200`, `w2400`). |
-| `cdnUrl(endpoint)`              | Get a full CDN URL for a given endpoint.                                                 |
+| Function                                                  | Description                                                                              |
+| --------------------------------------------------------- | ---------------------------------------------------------------------------------------- |
+| `loadScript(url, { timeout })`                            | Dynammically loads a JS script.                                                          |
+| `openLink(url)`                                           | App-compatible link opener.                                                              |
+| `tap(value, callback)`                                    | Invokes `callback` with the `value` and then returns `value`.                            |
+| `cdnImageUrl(endpoint[, size])`                           | Get a full image URL for an endpoint in a given size (`w480`, `w800`, `w1200`, `w2400`). |
+| `cdnUrl(endpoint)`                                        | Get a full CDN URL for a given endpoint.                                                 |
+| `removePhoneNumberCountryPrefix(phoneNumber, [, prefix])` | Removes a country prefix from a phone number based on the station config `country_code`. |
+| `onLocalStorageChange(key, callback)`                     | Calls `callback` when the value of `key` in `localStorage` changes.                      |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dpgradio/creative",
-  "version": "5.9.2",
+  "version": "6.0.0-beta.1",
   "description": "Support package for standalone Javascript applications",
   "main": "src/index.js",
   "scripts": {

package/src/__test__/utils/onLocalStorageChange.test.js

@@ -0,0 +1,38 @@
+import { describe, expect, test } from '@jest/globals'
+import { onLocalStorageChange } from '../../utils/onLocalStorageChange.js'
+
+describe('removing explicitly given prefixes', () => {
+  test('it returns the current value when immediate is set to true', () => {
+    localStorage.setItem('country_code', 'NL')
+
+    let result
+
+    onLocalStorageChange('country_code', (value) => (result = value), true)
+
+    expect(result).toBe('NL')
+  })
+
+  test('it watches for new values', async () => {
+    let result
+
+    onLocalStorageChange('country_code', (value) => (result = value))
+
+    // A local storage event is only fired when a change is made from another tab
+    // so, we fake it here
+    window.dispatchEvent(Object.assign(new Event('storage'), { key: 'country_code', newValue: 'BE' }))
+
+    expect(result).toBe('BE')
+  })
+
+  test('it watches replaces the current value with new values when immediate is true', () => {
+    localStorage.setItem('country_code', 'NL')
+
+    let result
+
+    onLocalStorageChange('country_code', (value) => (result = value), true)
+
+    window.dispatchEvent(Object.assign(new Event('storage'), { key: 'country_code', newValue: 'BE' }))
+
+    expect(result).toBe('BE')
+  })
+})

package/src/app/hybrid.js

@@ -13,20 +13,22 @@ class Hybrid {
     // Hook this on window so it can be required in multiple packs
     window._hybridEventSubscriptions = window._hybridEventSubscriptions || {}
 
-    this.appInfo = this.detectApp(window.appVersion || navigator.userAgent)
-
     this._cachedRadioTokenOnLoad = undefined
     this.on('appLoad', (context) => {
       this._cachedRadioTokenOnLoad = context?.radioToken ?? null
     })
   }
 
+  appInfo() {
+    return this.detectApp(window.appVersion || navigator.userAgent)
+  }
+
   isNativeApp() {
-    return this.appInfo.platform !== 'browser'
+    return this.appInfo().platform !== 'browser'
   }
 
   isVersion({ android, ios }) {
-    const { platform, buildName, buildVersion } = this.appInfo
+    const { platform, buildName, buildVersion } = this.appInfo()
 
     return (
       (platform === 'Android' && android[buildName] && android[buildName] <= parseInt(buildVersion, 10)) ||

package/src/index.js

@@ -14,3 +14,5 @@ export { default as openLink } from './utils/openLink.js'
 export { default as tap } from './utils/tap.js'
 export { cdnImageUrl, cdnUrl } from './utils/cdnUrl.js'
 export { removePhoneNumberCountryPrefix } from './utils/phoneNumber.js'
+export { setupAirbrake, gtmFilter } from './utils/setupAirbrake.js'
+export { onLocalStorageChange } from './utils/onLocalStorageChange.js'

package/src/utils/onLocalStorageChange.js

@@ -0,0 +1,11 @@
+export const onLocalStorageChange = (key, callback, immediate) => {
+  window.addEventListener('storage', (change) => {
+    if (change.key == key) {
+      callback(change.newValue)
+    }
+  })
+
+  if (immediate) {
+    callback(localStorage.getItem(key))
+  }
+}

package/src/utils/setupAirbrake.js

@@ -0,0 +1,41 @@
+export const setupAirbrake = async (
+  AirbrakeNotifier,
+  { projectId, projectKey, version, environment = 'production' },
+  app = null
+) => {
+  if (!projectId || !Number.isInteger(projectId)) {
+    return
+  }
+
+  const airbrake = new AirbrakeNotifier({ projectId, projectKey, environment })
+
+  airbrake.addFilter(gtmFilter)
+
+  if (version) {
+    airbrake.addFilter((notice) => {
+      notice.context = {
+        ...notice.context,
+        version,
+      }
+      return notice
+    })
+  }
+
+  if (app) {
+    app.config.errorHandler = (error, _vm, info) => airbrake.notify({ error, params: { info } })
+  }
+
+  return airbrake
+}
+
+export const rejectErrorMessagesContaining = (notice, phrases) =>
+  phrases.some((phrase) => notice.errors[0]?.message?.includes(phrase)) ? null : notice
+
+export const rejectErrorsFromFilesContaining = (notice, phrases) =>
+  phrases.some((phrase) => notice.errors[0]?.backtrace.some((backtraceItem) => backtraceItem.file.includes(phrase)))
+    ? null
+    : notice
+
+export const gtmFilter = (notice) =>
+  rejectErrorMessagesContaining(notice, ['dpg_snowplow', '__tcfapi']) &&
+  rejectErrorsFromFilesContaining(notice, ['mychannels', 'gtm.js'])

package/styles/colors/joe.css

@@ -1,21 +1,7 @@
 :root {
-  --joe-lime: 206 220 0;
-
-  --joe-purple: 150 4 99;
-  --joe-purple-dark: 92 29 84;
-  --joe-purple-light: 220 50 130;
-
-  --joe-green: 3 112 108;
-  --joe-green-dark: 9 76 89;
-  --joe-green-light: 20 160 140;
-
-  --joe-red: 186 22 52;
-  --joe-red-dark: 154 23 54;
-  --joe-red-light: 240 40 70;
-
-  --joe-blue: 7 77 163;
-  --joe-blue-dark: 44 45 119;
-  --joe-blue-light: 0 130 220;
+  --joe-primary: 30 100 200;
+  --joe-secondary: 20 50 140;
+  --joe-accent: 220 60 150;
 
   --joe-text: 78 78 78;
 }