feat: update braze plugin to use braze 2.0 sdk (#766)

Co-authored-by: Alan Charles <[email protected]>

Author: alanjcharles

example/ios/AnalyticsReactNativeExample/AppDelegate.mm

@@ -5,8 +5,14 @@
 #import <React/RCTAppSetupUtils.h>
 #import <segment_analytics_react_native-Swift.h>
 //  #import <Firebase.h>
+
 // #import <CleverTap-iOS-SDK/CleverTap.h>
 // #import <clevertap-react-native/CleverTapReactManager.h>
+
+//#import "BrazeReactUtils.h"
+//#import "BrazeReactBridge.h"
+//#import <BrazeKit/BrazeKit-Swift.h>
+
 #if RCT_NEW_ARCH_ENABLED
 #import <React/CoreModulesPlugins.h>
 #import <React/RCTCxxBridgeDelegate.h>
@@ -25,25 +31,42 @@ @interface AppDelegate () <RCTCxxBridgeDelegate, RCTTurboModuleManagerDelegate>
 }
 @end
 #endif
+
+
 @implementation AppDelegate
+
+//enable for Braze Plugin
+//static NSString *const apiKey = @"<YOUR API KEY>";
+//static NSString *const endpoint = @"<YOUR ENDPOINT>";
+
+
 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
 {
+  
+// enable for Braze Plugin
+//  id<RCTBridgeDelegate> moduleInitializer = [[BrazeReactBridge alloc] init];
   RCTAppSetupPrepareApp(application);
   RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];
+  
+  
 #if RCT_NEW_ARCH_ENABLED
   _contextContainer = std::make_shared<facebook::react::ContextContainer const>();
   _reactNativeConfig = std::make_shared<facebook::react::EmptyReactNativeConfig const>();
   _contextContainer->insert("ReactNativeConfig", _reactNativeConfig);
   _bridgeAdapter = [[RCTSurfacePresenterBridgeAdapter alloc] initWithBridge:bridge contextContainer:_contextContainer];
   bridge.surfacePresenter = _bridgeAdapter.surfacePresenter;
 #endif
+  
   NSDictionary *initProps = [self prepareInitialProps];
   UIView *rootView = RCTAppSetupDefaultRootView(bridge, @"AnalyticsReactNativeExample", initProps);
   if (@available(iOS 13.0, *)) {
     rootView.backgroundColor = [UIColor systemBackgroundColor];
   } else {
     rootView.backgroundColor = [UIColor whiteColor];
   }
+
+  
+  
   self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
   UIViewController *rootViewController = [UIViewController new];
   rootViewController.view = rootView;
@@ -55,6 +78,16 @@ - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(
   // integrate CleverTap SDK using the autoIntegrate option
   // [CleverTap autoIntegrate]; 
   // [[CleverTapReactManager sharedInstance] applicationDidLaunchWithOptions:launchOptions];
+  
+//  enable for braze plugin
+//  BRZConfiguration *configuration = [[BRZConfiguration alloc] initWithApiKey:apiKey
+//                                                                    endpoint:endpoint];
+  // - Enable logging and customize the configuration here
+//  configuration.logger.level = BRZLoggerLevelInfo;
+//  Braze *braze = [BrazeReactBridge initBraze:configuration];
+//  AppDelegate.braze = braze;
+
+  
   return YES;
 }
 
@@ -122,4 +155,19 @@ - (Class)getModuleClassFromName:(const char *)name
   return RCTAppSetupDefaultModuleFromClass(moduleClass);
 }
 #endif
+
+// enable for Braze Plugin
+
+//#pragma mark - AppDelegate.braze
+//
+//static Braze *_braze = nil;
+//
+//+ (Braze *)braze {
+//  return _braze;
+//}
+//
+//+ (void)setBraze:(Braze *)braze {
+//  _braze = braze;
+//}
+
 @end

example/ios/Podfile.lock

@@ -298,7 +298,7 @@ PODS:
     - React
   - RNGestureHandler (2.6.0):
     - React-Core
-  - segment-analytics-react-native (2.12.0):
+  - segment-analytics-react-native (2.13.0):
     - React-Core
     - sovran-react-native
   - segment-analytics-react-native-plugin-idfa (0.6.0):
@@ -478,7 +478,7 @@ SPEC CHECKSUMS:
   RNCAsyncStorage: 0c357f3156fcb16c8589ede67cc036330b6698ca
   RNCMaskedView: 0e1bc4bfa8365eba5fbbb71e07fbdc0555249489
   RNGestureHandler: 920eb17f5b1e15dae6e5ed1904045f8f90e0b11e
-  segment-analytics-react-native: f28f404167ef4e2b4f5d5decf9526180393512f4
+  segment-analytics-react-native: bd1f13ea95bad2313a9c7130da032af0e9a6da60
   segment-analytics-react-native-plugin-idfa: c9335ec0327b8f5f35c78bbf0bf7821e9137537e
   sovran-react-native: fd3dc8f1a4b14acdc4ad25fc6b4ac4f52a2a2a15
   Yoga: 0b84a956f7393ef1f37f3bb213c516184e4a689d

example/src/App.tsx

@@ -39,6 +39,9 @@ import { AmplitudeSessionPlugin } from '@segment/analytics-react-native-plugin-a
 //@ts-ignore
 // import { ClevertapPlugin } from '@segment/analytics-react-native-plugin-clevertap';
 
+//@ts-ignore
+// import { BrazePlugin } from '@segment/analytics-react-native-plugin-braze';
+
 const segmentClient = createClient({
   writeKey: 'WRITE_KEY',
   trackAppLifecycleEvents: true,
@@ -66,6 +69,8 @@ segmentClient.add({ plugin: LoggerPlugin });
 
 segmentClient.add({ plugin: new AmplitudeSessionPlugin() });
 
+// segmentClient.add({ plugin: new BrazePlugin() });
+
 // segmentClient.add({ plugin: new ClevertapPlugin() });
 
 // segmentClient.add({

packages/plugins/plugin-braze/package.json

@@ -50,7 +50,7 @@
     "@segment/analytics-react-native": "*"
   },
   "dependencies": {
-    "react-native-appboy-sdk": "^1.32.0"
+    "@braze/react-native-sdk": "^2.0.2"
   },
   "devDependencies": {
     "@semantic-release/changelog": "^6.0.1",

packages/plugins/plugin-braze/src/BrazePlugin.tsx

@@ -5,10 +5,7 @@ import {
   TrackEventType,
   UserInfoState,
 } from '@segment/analytics-react-native';
-import ReactAppboy, {
-  GenderTypes,
-  MonthsAsNumber,
-} from 'react-native-appboy-sdk';
+import Braze, { GenderTypes, MonthsAsNumber } from '@braze/react-native-sdk';
 import flush from './methods/flush';
 import track from './methods/track';
 
@@ -28,7 +25,7 @@ export class BrazePlugin extends DestinationPlugin {
       return;
     } else {
       if (event.userId) {
-        ReactAppboy.changeUser(event.userId);
+        Braze.changeUser(event.userId);
       }
 
       if (event.traits?.birthday !== undefined) {
@@ -39,7 +36,7 @@ export class BrazePlugin extends DestinationPlugin {
           !isNaN(birthday.getTime())
         ) {
           const data = new Date(event.traits.birthday);
-          ReactAppboy.setDateOfBirth(
+          Braze.setDateOfBirth(
             data.getFullYear(),
             // getMonth is zero indexed
             (data.getMonth() + 1) as MonthsAsNumber,
@@ -53,37 +50,37 @@ export class BrazePlugin extends DestinationPlugin {
       }
 
       if (event.traits?.email !== undefined) {
-        ReactAppboy.setEmail(event.traits.email);
+        Braze.setEmail(event.traits.email);
       }
 
       if (event.traits?.firstName !== undefined) {
-        ReactAppboy.setFirstName(event.traits.firstName);
+        Braze.setFirstName(event.traits.firstName);
       }
 
       if (event.traits?.lastName !== undefined) {
-        ReactAppboy.setLastName(event.traits.lastName);
+        Braze.setLastName(event.traits.lastName);
       }
 
       if (event.traits?.gender !== undefined) {
         const validGenders = ['m', 'f', 'n', 'o', 'p', 'u'];
         const isValidGender = validGenders.indexOf(event.traits.gender) > -1;
         if (isValidGender) {
-          ReactAppboy.setGender(
+          Braze.setGender(
             event.traits.gender as GenderTypes[keyof GenderTypes]
           );
         }
       }
 
       if (event.traits?.phone !== undefined) {
-        ReactAppboy.setPhoneNumber(event.traits.phone);
+        Braze.setPhoneNumber(event.traits.phone);
       }
 
       if (event.traits?.address !== undefined) {
         if (event.traits.address.city !== undefined) {
-          ReactAppboy.setHomeCity(event.traits.address.city);
+          Braze.setHomeCity(event.traits.address.city);
         }
         if (event.traits?.address.country !== undefined) {
-          ReactAppboy.setCountry(event.traits.address.country);
+          Braze.setCountry(event.traits.address.country);
         }
       }
 
@@ -99,7 +96,7 @@ export class BrazePlugin extends DestinationPlugin {
 
       Object.entries(event.traits ?? {}).forEach(([key, value]) => {
         if (appBoyTraits.indexOf(key) < 0) {
-          ReactAppboy.setCustomUserAttribute(key, value as any);
+          Braze.setCustomUserAttribute(key, value as any);
         }
       });
 

packages/plugins/plugin-braze/src/methods/__mocks__/react-native-appboy-sdk.ts renamed to packages/plugins/plugin-braze/src/methods/__mocks__/@braze/react-native-sdk.ts

@@ -1,5 +1,5 @@
 import flush from '../flush';
-import { requestImmediateDataFlush } from '../__mocks__/react-native-appboy-sdk';
+import { requestImmediateDataFlush } from '../__mocks__/@braze/react-native-sdk';
 
 describe('#flush', () => {
   beforeEach(() => {

packages/plugins/plugin-braze/src/methods/__tests__/flush.test.ts

@@ -9,7 +9,7 @@ import {
   setGender,
   setHomeCity,
   setCustomUserAttribute,
-} from '../__mocks__/react-native-appboy-sdk';
+} from '../__mocks__/@braze/react-native-sdk';
 import type { IdentifyEventType } from '@segment/analytics-react-native';
 import { BrazePlugin } from '../../BrazePlugin';
 

packages/plugins/plugin-braze/src/methods/__tests__/identify.test.ts

@@ -4,7 +4,7 @@ import {
   logCustomEvent,
   logPurchase,
   setAttributionData,
-} from '../__mocks__/react-native-appboy-sdk';
+} from '../__mocks__/@braze/react-native-sdk';
 
 describe('#track', () => {
   beforeEach(() => {

packages/plugins/plugin-braze/src/methods/__tests__/track.test.ts

@@ -1,5 +1,5 @@
-import ReactAppboy from 'react-native-appboy-sdk';
+import Braze from '@braze/react-native-sdk';
 
 export default () => {
-  ReactAppboy.requestImmediateDataFlush();
+  Braze.requestImmediateDataFlush();
 };

packages/plugins/plugin-braze/src/methods/flush.ts

@@ -1,4 +1,4 @@
-import ReactAppboy from 'react-native-appboy-sdk';
+import Braze from '@braze/react-native-sdk';
 import type { TrackEventType, JsonMap } from '@segment/analytics-react-native';
 
 const attributionProperties = {
@@ -17,7 +17,7 @@ export default (payload: TrackEventType) => {
       const adGroup = attributionData.ad_group ?? attributionProperties.adGroup;
       const creative =
         attributionData.ad_creative ?? attributionProperties.creative;
-      ReactAppboy.setAttributionData(network, campaign, adGroup, creative);
+      Braze.setAttributionData(network, campaign, adGroup, creative);
     }
   }
 
@@ -53,7 +53,7 @@ export default (payload: TrackEventType) => {
             appBoyProperties,
             productDict
           );
-          ReactAppboy.logPurchase(
+          Braze.logPurchase(
             productId,
             String(productRevenue),
             currency,
@@ -62,7 +62,7 @@ export default (payload: TrackEventType) => {
           );
         });
       } else {
-        ReactAppboy.logPurchase(
+        Braze.logPurchase(
           payload.event,
           String(revenue),
           currency,
@@ -71,10 +71,10 @@ export default (payload: TrackEventType) => {
         );
       }
     } else {
-      ReactAppboy.logPurchase(payload.event, String(revenue), currency, 1);
+      Braze.logPurchase(payload.event, String(revenue), currency, 1);
     }
   } else {
-    ReactAppboy.logCustomEvent(payload.event, payload.properties);
+    Braze.logCustomEvent(payload.event, payload.properties);
   }
 
   return payload;

packages/plugins/plugin-braze/src/methods/track.ts

@@ -1091,6 +1091,11 @@
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
   integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
 
+"@braze/react-native-sdk@^2.0.2":
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/@braze/react-native-sdk/-/react-native-sdk-2.0.2.tgz#6d0576dd6c69c9ddd77de3b8f43a67c8235613b8"
+  integrity sha512-rY1GQdlFfxmYpJhMMw5c0arbyWZG4K8dbV7mEZTC8uxB+vWnwyULy4uuHejbtM3p/AF2vF9wbnlyZhzVQYY1vw==
+
 "@changesets/apply-release-plan@^6.0.2":
   version "6.0.2"
   resolved "https://registry.yarnpkg.com/@changesets/apply-release-plan/-/apply-release-plan-6.0.2.tgz#6937f39425c93a70b1e155d76cfa06bf7255c992"
@@ -10560,11 +10565,6 @@ react-native-adjust@^4.29.4:
   resolved "https://registry.yarnpkg.com/react-native-adjust/-/react-native-adjust-4.29.6.tgz#cf7cc4fdfe516f10a4f42b9df73826c0898fd0c3"
   integrity sha512-6XShRFrqx/kif0iPutaS4gj6LhZtzPIpH3MAxxKOoqwWWX0UPVQ9boQC4j2BtFjmerVQG1p2LGwsdylsGOiJ2g==
 
-react-native-appboy-sdk@^1.32.0:
-  version "1.36.0"
-  resolved "https://registry.yarnpkg.com/react-native-appboy-sdk/-/react-native-appboy-sdk-1.36.0.tgz#fdda158ba8e6fb87dda7ab8c89510686fe13c02c"
-  integrity sha512-ZveH33LRxJNVEc5ym/tYVpKEEeQwMShV/5Afdum5NZjeTi2Mh/ghTVlCp3t+Icb1BWDnMjke3myiqISYyFXMFw==
-
 react-native-appsflyer@^6.9.4:
   version "6.9.4"
   resolved "https://registry.yarnpkg.com/react-native-appsflyer/-/react-native-appsflyer-6.9.4.tgz#35d8adbee93d169a7af3770739e8fe04de2d2680"