@segment/analytics-browser-actions-braze 1.0.0

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@segment/analytics-browser-actions-braze",
+  "version": "1.0.0",
+  "license": "MIT",
+  "exports": {
+    ".": {
+      "require": "./dist/cjs/index.js",
+      "import": "./dist/esm/index.js"
+    },
+    "./debounce": {
+      "require": "./dist/cjs/debounce/index.js",
+      "import": "./dist/esm/debounce/index.js"
+    }
+  },
+  "scripts": {
+    "build": "yarn build:esm && yarn build:cjs",
+    "build:cjs": "tsc --module commonjs --outDir ./dist/cjs",
+    "build:esm": "tsc --outDir ./dist/esm"
+  },
+  "typesVersions": {
+    "*": {
+      "*": [
+        "dist/esm/index.d.ts"
+      ],
+      "debounce": [
+        "dist/esm/debounce/index.d.ts"
+      ]
+    }
+  },
+  "typings": "./dist/esm",
+  "dependencies": {
+    "@braze/web-sdk": "npm:@braze/web-sdk@^4.1.0",
+    "@braze/web-sdk-v3": "npm:@braze/web-sdk@^3.5.1",
+    "@segment/actions-core": "^3.71.0",
+    "@segment/browser-destination-runtime": "^1.0.0"
+  },
+  "peerDependencies": {
+    "@segment/analytics-next": "*"
+  }
+}

package/src/__tests__/__snapshots__/initialization.test.ts.snap

@@ -0,0 +1,24 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`initialization can load braze: 
+      NodeList [
+        <script
+          src="https://js.appboycdn.com/web-sdk/3.5/appboy.no-amd.min.js"
+          type="text/javascript"
+        />,
+        <script>
+          // the emptiness
+        </script>,
+      ]
+     1`] = `
+NodeList [
+  <script
+    src="https://js.appboycdn.com/web-sdk/3.5/appboy.no-amd.min.js"
+    status="loaded"
+    type="text/javascript"
+  />,
+  <script>
+    // the emptiness
+  </script>,
+]
+`;

package/src/__tests__/__snapshots__/integration.test.ts.snap

@@ -0,0 +1,96 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`loads different versions from CDN 3.0: 
+      NodeList [
+        <script
+          src="https://js.appboycdn.com/web-sdk/3.0/appboy.no-amd.min.js"
+          type="text/javascript"
+        />,
+        <script>
+          // the emptiness
+        </script>,
+      ]
+     1`] = `
+NodeList [
+  <script
+    src="https://js.appboycdn.com/web-sdk/3.0/appboy.no-amd.min.js"
+    status="loaded"
+    type="text/javascript"
+  />,
+  <script>
+    // the emptiness
+  </script>,
+]
+`;
+
+exports[`loads different versions from CDN 3.1: 
+      NodeList [
+        <script
+          src="https://js.appboycdn.com/web-sdk/3.1/appboy.no-amd.min.js"
+          status="loaded"
+          type="text/javascript"
+        />,
+        <script>
+          // the emptiness
+        </script>,
+      ]
+     1`] = `
+NodeList [
+  <script
+    src="https://js.appboycdn.com/web-sdk/3.1/appboy.no-amd.min.js"
+    status="loaded"
+    type="text/javascript"
+  />,
+  <script>
+    // the emptiness
+  </script>,
+]
+`;
+
+exports[`loads different versions from CDN 3.5: 
+      NodeList [
+        <script
+          src="https://js.appboycdn.com/web-sdk/3.5/appboy.no-amd.min.js"
+          status="loaded"
+          type="text/javascript"
+        />,
+        <script>
+          // the emptiness
+        </script>,
+      ]
+     1`] = `
+NodeList [
+  <script
+    src="https://js.appboycdn.com/web-sdk/3.5/appboy.no-amd.min.js"
+    status="loaded"
+    type="text/javascript"
+  />,
+  <script>
+    // the emptiness
+  </script>,
+]
+`;
+
+exports[`loads different versions from CDN undefined version: 
+      NodeList [
+        <script
+          src="https://js.appboycdn.com/web-sdk/4.6/braze.no-module.min.js"
+          status="loaded"
+          type="text/javascript"
+        />,
+        <script>
+          // the emptiness
+        </script>,
+      ]
+     1`] = `
+NodeList [
+  <script
+    src="https://js.appboycdn.com/web-sdk/4.6/braze.no-module.min.js"
+    status="loaded"
+    type="text/javascript"
+  />,
+  <script>
+    // the emptiness
+  </script>,
+]
+`;

package/src/__tests__/__snapshots__/trackPurchase.test.ts.snap

@@ -0,0 +1,97 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`reports products when present (v3.5) 1`] = `
+Array [
+  "p_123",
+  399,
+  "BGP",
+  2,
+  Object {
+    "banana": "yellow",
+    "products": Array [
+      Object {
+        "currency": "BGP",
+        "price": 399,
+        "product_id": "p_123",
+        "quantity": 2,
+      },
+      Object {
+        "price": 0,
+        "product_id": "p_456",
+      },
+    ],
+  },
+]
+`;
+
+exports[`reports products when present (v3.5) 2`] = `
+Array [
+  "p_456",
+  0,
+  "USD",
+  1,
+  Object {
+    "banana": "yellow",
+    "products": Array [
+      Object {
+        "currency": "BGP",
+        "price": 399,
+        "product_id": "p_123",
+        "quantity": 2,
+      },
+      Object {
+        "price": 0,
+        "product_id": "p_456",
+      },
+    ],
+  },
+]
+`;
+
+exports[`reports products when present (v4.1) 1`] = `
+Array [
+  "p_123",
+  399,
+  "BGP",
+  2,
+  Object {
+    "banana": "yellow",
+    "products": Array [
+      Object {
+        "currency": "BGP",
+        "price": 399,
+        "product_id": "p_123",
+        "quantity": 2,
+      },
+      Object {
+        "price": 0,
+        "product_id": "p_456",
+      },
+    ],
+  },
+]
+`;
+
+exports[`reports products when present (v4.1) 2`] = `
+Array [
+  "p_456",
+  0,
+  "USD",
+  1,
+  Object {
+    "banana": "yellow",
+    "products": Array [
+      Object {
+        "currency": "BGP",
+        "price": 399,
+        "product_id": "p_123",
+        "quantity": 2,
+      },
+      Object {
+        "price": 0,
+        "product_id": "p_456",
+      },
+    ],
+  },
+]
+`;

package/src/__tests__/debounce.test.ts

@@ -0,0 +1,133 @@
+import { Analytics, Context } from '@segment/analytics-next'
+import brazeDestination from '../index'
+
+let ajs: Analytics
+
+describe('debounce', () => {
+  beforeEach(async () => {
+    ajs = new Analytics({
+      writeKey: 'w_123'
+    })
+  })
+
+  test('changes the integration object', async () => {
+    const [debounce] = await brazeDestination({
+      api_key: 'b_123',
+      endpoint: 'endpoint',
+      doNotLoadFontAwesome: true,
+      sdkVersion: '3.5',
+      subscriptions: [
+        {
+          partnerAction: 'debounce',
+          name: 'Debounce',
+          enabled: true,
+          subscribe: 'type = "identify"',
+          mapping: {}
+        }
+      ]
+    })
+
+    await debounce.load(Context.system(), ajs)
+    const ctx = await debounce.identify?.(
+      new Context({
+        type: 'identify',
+        userId: 'hasbulla',
+        anonymousId: 'the goat',
+        traits: {}
+      })
+    )
+
+    expect(ctx.event.integrations['Braze Web Mode (Actions)']).toBe(true)
+  })
+
+  test('does not send the event to braze if IDs are the same', async () => {
+    const [debounce] = await brazeDestination({
+      api_key: 'b_123',
+      endpoint: 'endpoint',
+      doNotLoadFontAwesome: true,
+      sdkVersion: '3.5',
+      subscriptions: [
+        {
+          partnerAction: 'debounce',
+          name: 'Debounce',
+          enabled: true,
+          subscribe: 'type = "identify"',
+          mapping: {}
+        }
+      ]
+    })
+
+    await ajs.register(debounce)
+
+    const ctx = await ajs.identify('hasbulla', {
+      goat: true
+    })
+    expect(ctx.event.integrations['Braze Web Mode (Actions)']).toBe(true)
+
+    const secondCtx = await ajs.identify('hasbulla', {
+      goat: true
+    })
+    expect(secondCtx.event.integrations['Braze Web Mode (Actions)']).toBe(false)
+  })
+
+  test('ignores blank anonymous ids', async () => {
+    const [debounce] = await brazeDestination({
+      api_key: 'b_123',
+      endpoint: 'endpoint',
+      doNotLoadFontAwesome: true,
+      sdkVersion: '4.1',
+      subscriptions: [
+        {
+          partnerAction: 'debounce',
+          name: 'Debounce',
+          enabled: true,
+          subscribe: 'type = "identify"',
+          mapping: {}
+        }
+      ]
+    })
+
+    await ajs.register(debounce)
+
+    const ctx = await ajs.identify()
+    expect(ctx.event.integrations['Braze Web Mode (Actions)']).toBe(true)
+
+    const secondCtx = await ajs.identify()
+    expect(secondCtx.event.integrations['Braze Web Mode (Actions)']).toBe(false)
+  })
+
+  test('send events on trait changes', async () => {
+    const [debounce] = await brazeDestination({
+      api_key: 'b_123',
+      endpoint: 'endpoint',
+      doNotLoadFontAwesome: true,
+      sdkVersion: '4.1',
+      subscriptions: [
+        {
+          partnerAction: 'debounce',
+          name: 'Debounce',
+          enabled: true,
+          subscribe: 'type = "identify"',
+          mapping: {}
+        }
+      ]
+    })
+
+    await ajs.register(debounce)
+
+    const ctx = await ajs.identify('hasbulla', {
+      goat: true
+    })
+    expect(ctx.event.integrations['Braze Web Mode (Actions)']).toBe(true)
+
+    const sameCtx = await ajs.identify('hasbulla', {
+      goat: true
+    })
+    expect(sameCtx.event.integrations['Braze Web Mode (Actions)']).toBe(false)
+
+    const changedTraits = await ajs.identify('hasbulla', {
+      weight: 'feather'
+    })
+    expect(changedTraits.event.integrations['Braze Web Mode (Actions)']).toBe(true)
+  })
+})

package/src/__tests__/initialization.test.ts

@@ -0,0 +1,139 @@
+import { Analytics, Context } from '@segment/analytics-next'
+import { Subscription } from '@segment/browser-destination-runtime'
+import brazeDestination, { destination } from '../index'
+
+describe('initialization', () => {
+  const settings = {
+    safariWebsitePushId: 'safari',
+    allowCrawlerActivity: true,
+    doNotLoadFontAwesome: true,
+    enableLogging: false,
+    localization: 'pt',
+    minimumIntervalBetweenTriggerActionsInSeconds: 60,
+    openInAppMessagesInNewTab: true,
+    sessionTimeoutInSeconds: 60,
+    requireExplicitInAppMessageDismissal: true,
+    allowUserSuppliedJavascript: true,
+    contentSecurityNonce: 'bar',
+    endpoint: 'endpoint',
+    sdkVersion: '3.5'
+  }
+
+  beforeEach(async () => {
+    jest.restoreAllMocks()
+    jest.resetAllMocks()
+  })
+
+  test('can load braze', async () => {
+    const [event] = await brazeDestination({
+      api_key: 'b_123',
+      subscriptions: [
+        {
+          partnerAction: 'trackPurchase',
+          name: 'Log Custom Event',
+          enabled: true,
+          subscribe: 'type = "track"',
+          mapping: {
+            eventName: {
+              '@path': '$.event'
+            },
+            eventProperties: {
+              '@path': '$.properties'
+            }
+          }
+        }
+      ],
+      ...settings
+    })
+
+    jest.spyOn(destination.actions.trackPurchase, 'perform')
+    jest.spyOn(destination, 'initialize')
+
+    await event.load(Context.system(), {} as Analytics)
+    expect(destination.initialize).toHaveBeenCalled()
+
+    const ctx = await event.track?.(
+      new Context({
+        type: 'track',
+        properties: {
+          banana: '📞'
+        }
+      })
+    )
+
+    expect(destination.actions.trackPurchase.perform).toHaveBeenCalled()
+    expect(ctx).not.toBeUndefined()
+
+    const scripts = window.document.querySelectorAll('script')
+
+    expect(scripts).toMatchSnapshot(`
+      NodeList [
+        <script
+          src="https://js.appboycdn.com/web-sdk/3.5/appboy.no-amd.min.js"
+          type="text/javascript"
+        />,
+        <script>
+          // the emptiness
+        </script>,
+      ]
+    `)
+  })
+
+  test('can defer braze initialization when deferUntilIdentified is on', async () => {
+    const [updateUserProfile, trackEvent] = await brazeDestination({
+      api_key: 'b_123',
+      deferUntilIdentified: true,
+      subscriptions: destination.presets?.map((sub) => ({ ...sub, enabled: true })) as Subscription[],
+      ...settings
+    })
+
+    jest.spyOn(destination.actions.trackEvent, 'perform')
+    const initializeSpy = jest.spyOn(destination, 'initialize')
+
+    const analytics = new Analytics({ writeKey: '123' })
+
+    await analytics.register(updateUserProfile, trackEvent)
+
+    // Spy on the braze APIs now that braze has been loaded.
+    const { instance: braze } = await initializeSpy.mock.results[0].value
+    const openSessionSpy = jest.spyOn(braze, 'openSession')
+    const logCustomEventSpy = jest.spyOn(braze, 'logCustomEvent')
+
+    await analytics.track?.({
+      type: 'track',
+      event: 'UFC',
+      properties: {
+        goat: 'hasbulla'
+      }
+    })
+
+    expect(destination.actions.trackEvent.perform).toHaveBeenCalledWith(
+      expect.objectContaining({
+        instance: expect.objectContaining({
+          logCustomEvent: expect.any(Function)
+        })
+      }),
+
+      expect.objectContaining({
+        payload: { eventName: 'UFC', eventProperties: { goat: 'hasbulla' } }
+      })
+    )
+
+    expect(analytics.user().id()).toBe(null)
+    expect(openSessionSpy).not.toHaveBeenCalled()
+    expect(logCustomEventSpy).not.toHaveBeenCalled()
+
+    await analytics.identify('27413')
+
+    await analytics.track?.({
+      type: 'track',
+      event: 'FIFA',
+      properties: {
+        goat: 'deno'
+      }
+    })
+
+    expect(openSessionSpy).toHaveBeenCalled()
+    expect(logCustomEventSpy).toHaveBeenCalledWith('FIFA', { goat: 'deno' })
+  })
+})

package/src/__tests__/integration.test.ts

@@ -0,0 +1,156 @@
+import { Analytics, Context } from '@segment/analytics-next'
+import braze, { destination } from '..'
+import type { Subscription } from '@segment/browser-destination-runtime/types'
+
+const example: Subscription[] = [
+  {
+    partnerAction: 'trackEvent',
+    name: 'Log Custom Event',
+    enabled: true,
+    subscribe: 'type = "track"',
+    mapping: {
+      name: {
+        '@path': '$.name'
+      },
+      properties: {
+        '@path': '$.properties'
+      }
+    }
+  }
+]
+
+test('can load braze', async () => {
+  const [trackEvent] = await braze({
+    api_key: 'api_key',
+    endpoint: 'sdk.iad-01.braze.com',
+    subscriptions: example,
+    doNotLoadFontAwesome: true,
+    sdkVersion: '3.5'
+  })
+
+  jest.spyOn(destination.actions.trackEvent, 'perform')
+  jest.spyOn(destination, 'initialize')
+
+  await trackEvent.load(Context.system(), {} as Analytics)
+  expect(destination.initialize).toHaveBeenCalled()
+
+  const ctx = await trackEvent.track?.(
+    new Context({
+      type: 'track',
+      properties: {
+        banana: '📞'
+      }
+    })
+  )
+
+  expect(destination.actions.trackEvent.perform).toHaveBeenCalled()
+  expect(ctx).not.toBeUndefined()
+})
+
+describe('loads different versions from CDN', () => {
+  test('3.0', async () => {
+    const [trackEvent] = await braze({
+      api_key: 'api_key',
+      endpoint: 'sdk.iad-01.braze.com',
+      sdkVersion: '3.0',
+      doNotLoadFontAwesome: true,
+      subscriptions: example
+    })
+
+    await trackEvent.load(Context.system(), {} as Analytics)
+
+    const scripts = window.document.querySelectorAll('script')
+    expect(scripts).toMatchSnapshot(`
+      NodeList [
+        <script
+          src="https://js.appboycdn.com/web-sdk/3.0/appboy.no-amd.min.js"
+          type="text/javascript"
+        />,
+        <script>
+          // the emptiness
+        </script>,
+      ]
+    `)
+  })
+
+  test('3.1', async () => {
+    const [trackEvent] = await braze({
+      api_key: 'api_key',
+      endpoint: 'sdk.iad-01.braze.com',
+      sdkVersion: '3.1',
+      doNotLoadFontAwesome: true,
+      subscriptions: example
+    })
+
+    await trackEvent.load(Context.system(), {} as Analytics)
+
+    const scripts = window.document.querySelectorAll('script')
+    // loads the service worker
+    expect(scripts).toMatchSnapshot(`
+      NodeList [
+        <script
+          src="https://js.appboycdn.com/web-sdk/3.1/appboy.no-amd.min.js"
+          status="loaded"
+          type="text/javascript"
+        />,
+        <script>
+          // the emptiness
+        </script>,
+      ]
+    `)
+  })
+
+  test('3.5', async () => {
+    const [trackEvent] = await braze({
+      api_key: 'api_key',
+      endpoint: 'sdk.iad-01.braze.com',
+      sdkVersion: '3.5',
+      doNotLoadFontAwesome: true,
+      subscriptions: example
+    })
+
+    await trackEvent.load(Context.system(), {} as Analytics)
+
+    const scripts = window.document.querySelectorAll('script')
+    // loads the service worker
+    expect(scripts).toMatchSnapshot(`
+      NodeList [
+        <script
+          src="https://js.appboycdn.com/web-sdk/3.5/appboy.no-amd.min.js"
+          status="loaded"
+          type="text/javascript"
+        />,
+        <script>
+          // the emptiness
+        </script>,
+      ]
+    `)
+  })
+
+  test('undefined version', async () => {
+    //@ts-expect-error sdkVersion is expected but undefined
+    const [trackEvent] = await braze({
+      api_key: 'api_key',
+      endpoint: 'sdk.iad-01.braze.com',
+      doNotLoadFontAwesome: true,
+      subscriptions: example
+    })
+
+    await trackEvent.load(Context.system(), {} as Analytics)
+
+    const scripts = window.document.querySelectorAll('script')
+    // loads the service worker
+    expect(scripts).toMatchSnapshot(`
+      NodeList [
+        <script
+          src="https://js.appboycdn.com/web-sdk/4.6/braze.no-module.min.js"
+          status="loaded"
+          type="text/javascript"
+        />,
+        <script>
+          // the emptiness
+        </script>,
+      ]
+    `)
+  })
+})