@dpgradio/creative 5.9.1 → 6.0.0

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.1",
+  "version": "6.0.0",
   "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/__test__/utils/phoneNumber.test.js

@@ -13,6 +13,12 @@ describe('removing explicitly given prefixes', () => {
 
     expect(result).toBe('+33634542211')
   })
+
+  test('it does not fail when the given number is null', () => {
+    const result = removePhoneNumberCountryPrefix(null, '+31')
+
+    expect(result).toBeNull()
+  })
 })
 
 jest.mock('../../config/config.js', () => ({

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/phoneNumber.js

@@ -6,6 +6,10 @@ const prefixes = {
 }
 
 export const removePhoneNumberCountryPrefix = (phoneNumber, prefix = null) => {
+  if (!phoneNumber) {
+    return phoneNumber
+  }
+
   prefix ||= prefixes[config('country_code')]
 
   if (prefix) {

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'])