@segment/analytics-browser-actions-koala 1.0.0

package/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "@segment/analytics-browser-actions-koala",
+  "version": "1.0.0",
+  "license": "MIT",
+  "main": "./dist/cjs",
+  "module": "./dist/esm",
+  "scripts": {
+    "build": "yarn build:esm && yarn build:cjs",
+    "build:cjs": "tsc --module commonjs --outDir ./dist/cjs",
+    "build:esm": "tsc --outDir ./dist/esm"
+  },
+  "typings": "./dist/esm",
+  "dependencies": {
+    "@segment/actions-core": "^3.71.0",
+    "@segment/browser-destination-runtime": "^1.0.0"
+  },
+  "peerDependencies": {
+    "@segment/analytics-next": "*"
+  }
+}

package/src/generated-types.ts

@@ -0,0 +1,8 @@
+// Generated file. DO NOT MODIFY IT BY HAND.
+
+export interface Settings {
+  /**
+   * Please enter your Public API Key found in your Koala workspace settings.
+   */
+  project_slug: string
+}

package/src/identifyVisitor/__tests__/index.test.ts

@@ -0,0 +1,70 @@
+import type { Subscription } from '@segment/browser-destination-runtime/types'
+import { Analytics, Context } from '@segment/analytics-next'
+import KoalaDestination, { destination } from '../../index'
+
+import { loadScript } from '@segment/browser-destination-runtime/load-script'
+jest.mock('@segment/browser-destination-runtime/load-script')
+beforeEach(async () => {
+  ;(loadScript as jest.Mock).mockResolvedValue(true)
+})
+
+const subscriptions: Subscription[] = [
+  {
+    partnerAction: 'identifyVisitor',
+    name: 'Identify Visitor',
+    enabled: true,
+    subscribe: 'type = "identify"',
+    mapping: {
+      traits: {
+        '@path': '$.traits'
+      }
+    }
+  }
+]
+
+describe('Koala.identifyVisitor', () => {
+  test('it maps traits and passes them into ko.identify', async () => {
+    window.ko = {
+      ready: jest.fn(),
+      track: jest.fn().mockResolvedValueOnce(undefined),
+      identify: jest.fn().mockResolvedValueOnce(undefined)
+    }
+    window.KoalaSDK = {
+      load: jest.fn().mockResolvedValueOnce(window.ko)
+    }
+
+    const [event] = await KoalaDestination({
+      subscriptions,
+      project_slug: 'koala-test'
+    })
+
+    const ajs = new Analytics({ writeKey: 'w_123' })
+    await event.load(Context.system(), ajs)
+    jest.spyOn(destination.actions.identifyVisitor, 'perform')
+
+    await event.identify?.(
+      new Context({
+        type: 'identify',
+        traits: {
+          name: 'Matt'
+        }
+      })
+    )
+
+    expect(destination.actions.identifyVisitor.perform).toHaveBeenCalledWith(
+      expect.anything(),
+      expect.objectContaining({
+        payload: {
+          traits: {
+            name: 'Matt'
+          }
+        }
+      })
+    )
+    expect(window.ko.identify).toHaveBeenCalledWith(
+      expect.objectContaining({
+        name: 'Matt'
+      })
+    )
+  })
+})

package/src/identifyVisitor/generated-types.ts

@@ -0,0 +1,10 @@
+// Generated file. DO NOT MODIFY IT BY HAND.
+
+export interface Payload {
+  /**
+   * Traits to associate with the visitor in Koala.
+   */
+  traits: {
+    [k: string]: unknown
+  }
+}

package/src/identifyVisitor/index.ts

@@ -0,0 +1,28 @@
+import type { BrowserActionDefinition } from '@segment/browser-destination-runtime/types'
+import type { Settings } from '../generated-types'
+import type { Payload } from './generated-types'
+import type { Koala } from '../types'
+
+const action: BrowserActionDefinition<Settings, Koala, Payload> = {
+  title: 'Identify Visitor',
+  description: 'Update visitor traits in Koala.',
+  defaultSubscription: 'type = "identify"',
+  platform: 'web',
+  fields: {
+    traits: {
+      type: 'object',
+      label: 'Traits',
+      description: 'Traits to associate with the visitor in Koala.',
+      required: true,
+      default: { '@path': '$.traits' },
+      defaultObjectUI: 'object'
+    }
+  },
+  perform: (koala, { payload }) => {
+    if (payload?.traits) {
+      return koala.identify(payload.traits)
+    }
+  }
+}
+
+export default action

package/src/index.ts

@@ -0,0 +1,66 @@
+import type { Settings } from './generated-types'
+import type { BrowserDestinationDefinition } from '@segment/browser-destination-runtime/types'
+import type { KoalaSDK, Koala } from './types'
+import { defaultValues } from '@segment/actions-core'
+import { browserDestination } from '@segment/browser-destination-runtime/shim'
+import { initScript } from './init-script'
+import trackEvent from './trackEvent'
+import identifyVisitor from './identifyVisitor'
+
+declare global {
+  interface Window {
+    ko: Koala
+    KoalaSDK: KoalaSDK
+  }
+}
+
+export const destination: BrowserDestinationDefinition<Settings, Koala> = {
+  name: 'Koala',
+  slug: 'actions-koala',
+  description: 'Connect Koala in Segment to send visitor events or traits to Koala.',
+  mode: 'device',
+  settings: {
+    project_slug: {
+      type: 'string',
+      label: 'Public API Key',
+      description: 'Please enter your Public API Key found in your Koala workspace settings.',
+      required: true
+    }
+  },
+
+  initialize: async ({ settings, analytics }, deps) => {
+    initScript()
+    await deps.loadScript(`https://cdn.koala.live/v1/${settings.project_slug}/umd.js`)
+
+    const ko = await window.KoalaSDK.load({
+      project: settings.project_slug,
+      hookSegment: false
+    })
+
+    void analytics.ready(() => ko.ready(() => ko.identify(analytics.user().traits() as Record<string, unknown>)))
+
+    return ko
+  },
+
+  actions: {
+    trackEvent,
+    identifyVisitor
+  },
+
+  presets: [
+    {
+      name: 'Track Event',
+      subscribe: 'type = "track"',
+      partnerAction: 'trackEvent',
+      mapping: defaultValues(trackEvent.fields)
+    },
+    {
+      name: 'Identify Visitor',
+      subscribe: 'type = "identify"',
+      partnerAction: 'identifyVisitor',
+      mapping: defaultValues(identifyVisitor.fields)
+    }
+  ]
+}
+
+export default browserDestination(destination)

package/src/init-script.ts

@@ -0,0 +1,17 @@
+/* eslint-disable */
+// @ts-nocheck
+export function initScript() {
+  if (window.ko) {
+    return
+  }
+
+  window.ko = []
+  ;['identify', 'track', 'removeListeners', 'open', 'on', 'off', 'qualify', 'ready'].forEach(function (method) {
+    ko[method] = function () {
+      let args = Array.from(arguments)
+      args.unshift(method)
+      ko.push(args)
+      return ko
+    }
+  })
+}

package/src/trackEvent/__tests__/index.test.ts

@@ -0,0 +1,76 @@
+import type { Subscription } from '@segment/browser-destination-runtime/types'
+import { Analytics, Context } from '@segment/analytics-next'
+import KoalaDestination, { destination } from '../../index'
+
+import { loadScript } from '@segment/browser-destination-runtime/load-script'
+jest.mock('@segment/browser-destination-runtime/load-script')
+beforeEach(async () => {
+  ;(loadScript as jest.Mock).mockResolvedValue(true)
+})
+
+const subscriptions: Subscription[] = [
+  {
+    partnerAction: 'trackEvent',
+    name: 'Track Event',
+    enabled: true,
+    subscribe: 'type = "track"',
+    mapping: {
+      event: {
+        '@path': '$.event'
+      },
+      properties: {
+        '@path': '$.properties'
+      }
+    }
+  }
+]
+
+describe('Koala.trackEvent', () => {
+  test('it maps the event name and properties and passes them into ko.track', async () => {
+    window.ko = {
+      ready: jest.fn(),
+      track: jest.fn().mockResolvedValueOnce(undefined),
+      identify: jest.fn().mockResolvedValueOnce(undefined)
+    }
+    window.KoalaSDK = {
+      load: jest.fn().mockResolvedValueOnce(window.ko)
+    }
+
+    const [event] = await KoalaDestination({
+      subscriptions,
+      project_slug: 'koala-test'
+    })
+
+    const ajs = new Analytics({ writeKey: 'w_123' })
+    await event.load(Context.system(), ajs)
+    jest.spyOn(destination.actions.trackEvent, 'perform')
+
+    await event.track?.(
+      new Context({
+        type: 'track',
+        event: 'Form Submitted',
+        properties: {
+          is_new_subscriber: true
+        }
+      })
+    )
+
+    expect(destination.actions.trackEvent.perform).toHaveBeenCalledWith(
+      expect.anything(),
+      expect.objectContaining({
+        payload: {
+          event: 'Form Submitted',
+          properties: {
+            is_new_subscriber: true
+          }
+        }
+      })
+    )
+    expect(window.ko.track).toHaveBeenCalledWith(
+      'Form Submitted',
+      expect.objectContaining({
+        is_new_subscriber: true
+      })
+    )
+  })
+})

package/src/trackEvent/generated-types.ts

@@ -0,0 +1,14 @@
+// Generated file. DO NOT MODIFY IT BY HAND.
+
+export interface Payload {
+  /**
+   * The event name.
+   */
+  event: string
+  /**
+   * Properties to send with the event.
+   */
+  properties?: {
+    [k: string]: unknown
+  }
+}

package/src/trackEvent/index.ts

@@ -0,0 +1,35 @@
+import type { BrowserActionDefinition } from '@segment/browser-destination-runtime/types'
+import type { Settings } from '../generated-types'
+import type { Payload } from './generated-types'
+import type { Koala } from '../types'
+
+const action: BrowserActionDefinition<Settings, Koala, Payload> = {
+  title: 'Track Event',
+  description: 'Send visitor events to Koala.',
+  defaultSubscription: 'type = "track"',
+  platform: 'web',
+  fields: {
+    event: {
+      type: 'string',
+      required: true,
+      description: 'The event name.',
+      label: 'Event Name',
+      default: { '@path': '$.event' }
+    },
+    properties: {
+      type: 'object',
+      required: false,
+      description: 'Properties to send with the event.',
+      label: 'Event Properties',
+      default: { '@path': '$.properties' },
+      defaultObjectUI: 'object'
+    }
+  },
+  perform: (koala, { payload }) => {
+    if (payload?.event) {
+      return koala.track(payload.event, payload.properties)
+    }
+  }
+}
+
+export default action

package/src/types.ts

@@ -0,0 +1,9 @@
+export interface Koala {
+  ready: (fn?: () => Promise<unknown> | unknown) => Promise<void>
+  track: (event: string, data?: { [key: string]: unknown }) => Promise<void>
+  identify: (traits: Record<string, unknown>) => Promise<void>
+}
+
+export interface KoalaSDK {
+  load: (options: { project: string; hookSegment?: boolean }) => Promise<Koala>
+}

package/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.build.json",
+  "compilerOptions": {
+    "rootDir": "./src",
+    "baseUrl": "."
+  },
+  "include": ["src"],
+  "exclude": ["dist", "**/__tests__"]
+}