LIBWEB-1233 Braze - allow deferring initialization (segmentio#829)

packages/browser-destinations/src/destinations/braze/__tests__/initialization.test.ts

@@ -1,4 +1,5 @@
 import { Analytics, Context } from '@segment/analytics-next'
+import { Subscription } from 'src/lib/browser-destinations'
 import brazeDestination, { destination } from '../index'
 
 describe('initialization', () => {
@@ -77,4 +78,62 @@ describe('initialization', () => {
       ]
     `)
   })
+
+  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' })
+  })
 })

packages/browser-destinations/src/destinations/braze/__tests__/trackEvent.test.ts

@@ -31,10 +31,10 @@ testSdkVersions.forEach((sdkVersion) => {
       jest.spyOn(destination.actions.trackEvent, 'perform')
       const initializeSpy = jest.spyOn(destination, 'initialize')
 
-      await trackEvent.load(Context.system(), {} as Analytics)
+      await trackEvent.load(Context.system(), new Analytics({ writeKey: '123' }))
 
       // Spy on the braze APIs now that braze has been loaded.
-      const braze = await initializeSpy.mock.results[0].value
+      const { instance: braze } = await initializeSpy.mock.results[0].value
       const logCustomEventSpy = jest.spyOn(braze, 'logCustomEvent')
 
       await trackEvent.track?.(
@@ -49,7 +49,9 @@ testSdkVersions.forEach((sdkVersion) => {
 
       expect(destination.actions.trackEvent.perform).toHaveBeenCalledWith(
         expect.objectContaining({
-          logCustomEvent: expect.any(Function)
+          instance: expect.objectContaining({
+            logCustomEvent: expect.any(Function)
+          })
         }),
 
         expect.objectContaining({

packages/browser-destinations/src/destinations/braze/__tests__/trackPurchase.test.ts

@@ -30,10 +30,10 @@ testSdkVersions.forEach((sdkVersion) => {
       ]
     })
 
-    await trackPurchase.load(Context.system(), {} as Analytics)
+    await trackPurchase.load(Context.system(), new Analytics({ writeKey: '123' }))
 
     // Spy on the braze APIs now that braze has been loaded.
-    const braze = await initializeSpy.mock.results[0].value
+    const { instance: braze } = await initializeSpy.mock.results[0].value
     const brazeLogPurchase = jest.spyOn(braze, 'logPurchase').mockReturnValue(true)
 
     await trackPurchase.track?.(

packages/browser-destinations/src/destinations/braze/__tests__/updateUserProfile.test.ts

@@ -54,7 +54,7 @@ describe('updateUserProfile', () => {
       ]
     })
 
-    await event.load(Context.system(), {} as Analytics)
+    await event.load(Context.system(), new Analytics({ writeKey: '123' }))
     await event.identify?.(
       new Context({
         type: 'identify',
@@ -66,7 +66,9 @@ describe('updateUserProfile', () => {
 
     expect(destination.actions.updateUserProfile.perform).toHaveBeenCalledWith(
       expect.objectContaining({
-        changeUser: expect.any(Function)
+        instance: expect.objectContaining({
+          changeUser: expect.any(Function)
+        })
       }),
 
       expect.objectContaining({
@@ -115,7 +117,9 @@ describe('updateUserProfile', () => {
 
     expect(destination.actions.updateUserProfile.perform).toHaveBeenCalledWith(
       expect.objectContaining({
-        changeUser: expect.any(Function)
+        instance: expect.objectContaining({
+          changeUser: expect.any(Function)
+        })
       }),
 
       expect.objectContaining({

packages/browser-destinations/src/destinations/braze/braze-types.ts

@@ -2,3 +2,8 @@ import type braze from '@braze/web-sdk'
 import type appboy from '@braze/web-sdk-v3'
 
 export type BrazeType = typeof braze | typeof appboy
+
+export type BrazeDestinationClient = {
+  instance: BrazeType
+  ready: () => boolean
+}

packages/browser-destinations/src/destinations/braze/debounce/index.ts

@@ -1,4 +1,4 @@
-import { BrazeType } from '../braze-types'
+import { BrazeDestinationClient } from '../braze-types'
 import type { ID, SegmentEvent, User } from '@segment/analytics-next'
 import type { BrowserActionDefinition } from '../../../lib/browser-destinations'
 import type { Settings } from '../generated-types'
@@ -37,7 +37,7 @@ function shouldSendToBraze(event: SegmentEvent) {
   return JSON.stringify(cachedUser.traits) !== JSON.stringify(traits)
 }
 
-const action: BrowserActionDefinition<Settings, BrazeType, Payload> = {
+const action: BrowserActionDefinition<Settings, BrazeDestinationClient, Payload> = {
   title: 'Debounce Middleware',
   description:
     'When enabled, it ensures that only events where at least one changed trait value are sent to Braze, and events with duplicate traits are not sent.',

packages/browser-destinations/src/destinations/braze/index.ts

@@ -8,7 +8,7 @@ import updateUserProfile from './updateUserProfile'
 import trackPurchase from './trackPurchase'
 import debounce, { resetUserCache } from './debounce'
 import { defaultValues, DestinationDefinition } from '@segment/actions-core'
-import { BrazeType } from './braze-types'
+import { BrazeDestinationClient } from './braze-types'
 
 declare global {
   interface Window {
@@ -49,7 +49,7 @@ const presets: DestinationDefinition['presets'] = [
   }
 ]
 
-export const destination: BrowserDestinationDefinition<Settings, BrazeType> = {
+export const destination: BrowserDestinationDefinition<Settings, BrazeDestinationClient> = {
   name: 'Braze Web Mode (Actions)',
   slug: 'actions-braze-web',
   mode: 'device',
@@ -121,6 +121,14 @@ export const destination: BrowserDestinationDefinition<Settings, BrazeType> = {
       type: 'boolean',
       required: false
     },
+    deferUntilIdentified: {
+      description:
+        'If enabled, this setting delays initialization of the Braze SDK until the user has been identified. When enabled, events for anonymous users will no longer be sent to Braze.',
+      label: 'Only Track Known Users',
+      default: false,
+      type: 'boolean',
+      required: false
+    },
     appVersion: {
       description:
         'Version to which user events sent to Braze will be associated with. [See more details](https://js.appboycdn.com/web-sdk/latest/doc/modules/appboy.html#initializationoptions)',
@@ -266,7 +274,7 @@ export const destination: BrowserDestinationDefinition<Settings, BrazeType> = {
         'By default, sessions time out after 30 minutes of inactivity. Provide a value for this configuration option to override that default with a value of your own.'
     }
   },
-  initialize: async ({ settings }, dependencies) => {
+  initialize: async ({ settings, analytics }, dependencies) => {
     try {
       const {
         endpoint,
@@ -277,6 +285,7 @@ export const destination: BrowserDestinationDefinition<Settings, BrazeType> = {
         versionSettings,
         // @ts-expect-error same as above.
         subscriptions,
+        deferUntilIdentified,
         ...expectedConfig
       } = settings
 
@@ -290,28 +299,45 @@ export const destination: BrowserDestinationDefinition<Settings, BrazeType> = {
         await dependencies.loadScript(`https://js.appboycdn.com/web-sdk/${version}/braze.no-module.min.js`)
       }
 
-      const brazeObject: BrazeType = version.indexOf('3.') === 0 ? window.appboy : window.braze
+      let initialized = false
 
-      brazeObject.initialize(api_key, {
-        baseUrl: window.BRAZE_BASE_URL || endpoint,
-        ...expectedConfig
-      })
+      const client: BrazeDestinationClient = {
+        instance: version.indexOf('3.') === 0 ? window.appboy : window.braze,
+        ready: () => {
+          if (initialized) {
+            return true
+          }
 
-      if (brazeObject.addSdkMetadata) {
-        brazeObject.addSdkMetadata([brazeObject.BrazeSdkMetadata.SEGMENT])
-      }
+          if (deferUntilIdentified && typeof analytics.user().id() !== 'string') {
+            return false
+          }
+
+          client.instance.initialize(api_key, {
+            baseUrl: window.BRAZE_BASE_URL || endpoint,
+            ...expectedConfig
+          })
+
+          if (typeof client.instance.addSdkMetadata === 'function') {
+            client.instance.addSdkMetadata([client.instance.BrazeSdkMetadata.SEGMENT])
+          }
+
+          if (automaticallyDisplayMessages) {
+            if ('display' in client.instance) {
+              client.instance.display.automaticallyShowNewInAppMessages()
+            } else {
+              client.instance.automaticallyShowInAppMessages()
+            }
+          }
+
+          client.instance.openSession()
 
-      if (automaticallyDisplayMessages) {
-        if ('display' in brazeObject) {
-          brazeObject.display.automaticallyShowNewInAppMessages()
-        } else {
-          brazeObject.automaticallyShowInAppMessages()
+          return (initialized = true)
         }
       }
 
-      brazeObject.openSession()
+      client.ready()
 
-      return brazeObject
+      return client
     } catch (e) {
       throw new Error(`Failed to initialize Braze ${e}`)
     }

packages/browser-destinations/src/destinations/braze/trackEvent/index.ts

@@ -1,9 +1,9 @@
 import type { BrowserActionDefinition } from '../../../lib/browser-destinations'
 import type { Settings } from '../generated-types'
 import type { Payload } from './generated-types'
-import { BrazeType } from '../braze-types'
+import { BrazeDestinationClient } from '../braze-types'
 
-const action: BrowserActionDefinition<Settings, BrazeType, Payload> = {
+const action: BrowserActionDefinition<Settings, BrazeDestinationClient, Payload> = {
   title: 'Track Event',
   description: 'Reports that the current user performed a custom named event.',
   defaultSubscription: 'type = "track" and event != "Order Completed"',
@@ -29,7 +29,11 @@ const action: BrowserActionDefinition<Settings, BrazeType, Payload> = {
     }
   },
   perform: (client, event) => {
-    client.logCustomEvent(event.payload.eventName, event.payload.eventProperties)
+    if (!client.ready()) {
+      return
+    }
+
+    client.instance.logCustomEvent(event.payload.eventName, event.payload.eventProperties)
   }
 }
 

packages/browser-destinations/src/destinations/braze/trackPurchase/index.ts

@@ -1,10 +1,10 @@
-import { BrazeType } from '../braze-types'
+import { BrazeDestinationClient } from '../braze-types'
 import { omit } from '@segment/actions-core'
 import type { BrowserActionDefinition } from '../../../lib/browser-destinations'
 import type { Settings } from '../generated-types'
 import type { Payload } from './generated-types'
 
-const action: BrowserActionDefinition<Settings, BrazeType, Payload> = {
+const action: BrowserActionDefinition<Settings, BrazeDestinationClient, Payload> = {
   title: 'Track Purchase',
   defaultSubscription: 'type = "track" and event = "Order Completed"',
   description: 'Reports that the current user made an in-app purchase.',
@@ -53,14 +53,18 @@ const action: BrowserActionDefinition<Settings, BrazeType, Payload> = {
     }
   },
   perform: (client, data) => {
+    if (!client.ready()) {
+      return
+    }
+
     const payload = data.payload
 
     const reservedKeys = Object.keys(action.fields.products.properties ?? {})
     const purchaseProperties = omit(payload.purchaseProperties, reservedKeys)
 
     if (purchaseProperties?.products && Array.isArray(purchaseProperties?.products)) {
       purchaseProperties?.products?.forEach((product) => {
-        const result = client.logPurchase(
+        const result = client.instance.logPurchase(
           (product.product_id as string | number).toString(),
           product.price,
           product.currency ?? 'USD',

packages/browser-destinations/src/destinations/braze/updateUserProfile/index.ts

@@ -3,9 +3,9 @@ import type { Settings } from '../generated-types'
 import type { Payload } from './generated-types'
 import * as braze from '@braze/web-sdk'
 import dayjs from '../../../lib/dayjs'
-import { BrazeType } from '../braze-types'
+import { BrazeDestinationClient } from '../braze-types'
 
-const action: BrowserActionDefinition<Settings, BrazeType, Payload> = {
+const action: BrowserActionDefinition<Settings, BrazeDestinationClient, Payload> = {
   title: 'Update User Profile',
   description: 'Updates a users profile attributes in Braze',
   defaultSubscription: 'type = "identify" or type = "group"',
@@ -149,12 +149,16 @@ const action: BrowserActionDefinition<Settings, BrazeType, Payload> = {
   },
 
   perform: (client, { payload }) => {
+    if (!client.ready()) {
+      return
+    }
+
     // TODO - addAlias / addToCustomAttributeArray?
     if (payload.external_id !== undefined) {
-      client.changeUser(payload.external_id)
+      client.instance.changeUser(payload.external_id)
     }
 
-    const user = client.getUser()
+    const user = client.instance.getUser()
     if (!user) return
 
     payload.country !== undefined && user.setCountry(payload.country)

packages/destination-actions/src/destinations/twilio/sendSMS.types.ts

@@ -0,0 +1,12 @@
+// Generated file. DO NOT MODIFY IT BY HAND.
+
+export interface Payload {
+  /**
+   * The Phone Number to send a SMS to
+   */
+  To: string
+  /**
+   * The message body
+   */
+  Body: string
+}