react-native-appboy-sdk - npm Package Compare versions

Comparing version 1.20.0 to 1.21.0

__tests__/index.test.js

@@ -70,3 +70,6 @@ const ReactAppboy = require('../index');
       requestContentCardsRefresh: jest.fn(),
-      hideCurrentInAppMessage: jest.fn()
+      hideCurrentInAppMessage: jest.fn(),
+      logInAppMessageClicked: jest.fn(),
+      logInAppMessageImpression: jest.fn(),
+      logInAppMessageButtonClicked: jest.fn()
     }
@@ -79,2 +82,4 @@ };
 
+const testInAppMessageJson = `{\"message\":\"body body\",\"type\":\"MODAL\",\"text_align_message\":\"CENTER\",\"click_action\":\"NONE\",\"message_close\":\"SWIPE\",\"extras\":{\"test\":\"123\",\"foo\":\"bar\"},\"header\":\"hello\",\"text_align_header\":\"CENTER\",\"image_url\":\"https:\\/\\/cdn-staging.braze.com\\/appboy\\/communication\\/marketing\\/slide_up\\/slide_up_message_parameters\\/images\\/5ba53198bf5cea446b153b77\\/0af410cf267a4686ac6cac571bd2be4da4c8e63c\\/original.jpg?1572663749\",\"image_style\":\"TOP\",\"btns\":[{\"id\":0,\"text\":\"button 1\",\"click_action\":\"URI\",\"uri\":\"https:\\/\\/www.google.com\",\"use_webview\":true,\"bg_color\":4294967295,\"text_color\":4279990479,\"border_color\":4279990479},{\"id\":1,\"text\":\"button 2\",\"click_action\":\"NONE\",\"bg_color\":4279990479,\"text_color\":4294967295,\"border_color\":4279990479}],\"close_btn_color\":4291085508,\"bg_color\":4294243575,\"frame_color\":3207803699,\"text_color\":4280624421,\"header_text_color\":4280624421,\"trigger_id\":\"NWJhNTMxOThiZjVjZWE0NDZiMTUzYjZiXyRfbXY9NWJhNTMxOThiZjVjZWE0NDZiMTUzYjc1JnBpPWNtcA==\"}`;
+
 afterEach(() => {
@@ -468,1 +473,121 @@ jest.clearAllMocks();
 });
+
+it('instantiates a BrazeInAppMessage object', () => {
+  const testMessageBody = "some message body";
+  const testMessageType = 'MODAL';
+  const testUri = "https:\\/\\/www.sometesturi.com";
+  const testImageUrl = "https:\\/\\/www.sometestimageuri.com";
+  const testZippedAssetsUrl = "https:\\/\\/www.sometestzippedassets.com";
+  const testUseWebView = true;
+  const testDuration = 42;
+  const testExtras = '{\"test\":\"123\",\"foo\":\"bar\"}';
+  const testClickAction = 'URI';
+  const testDismissType = 'SWIPE';
+  const testHeader = "some header";
+  const testButton0 = '{\"id\":0,\"text\":\"button 1\",\"click_action\":\"URI\",\"uri\":\"https:\\/\\/www.google.com\",\"use_webview\":true,\"bg_color\":4294967295,\"text_color\":4279990479,\"border_color\":4279990479}';
+  const testButton1 = '{\"id\":1,\"text\":\"button 2\",\"click_action\":\"NONE\",\"bg_color\":4279990479,\"text_color\":4294967295,\"border_color\":4279990479}';
+  const testButtonString = `[${testButton0}, ${testButton1}]`;
+  const testButtons = [];
+  testButtons.push(new ReactAppboy.BrazeButton(JSON.parse(testButton0)));
+  testButtons.push(new ReactAppboy.BrazeButton(JSON.parse(testButton1)));
+  const testJson = `{\"message\":\"${testMessageBody}\",\"type\":\"${testMessageType}\",\"text_align_message\":\"CENTER\",\"click_action\":\"${testClickAction}\",\"message_close\":\"SWIPE\",\"extras\":${testExtras},\"header\":\"${testHeader}\",\"text_align_header\":\"CENTER\",\"image_url\":\"${testImageUrl}\",\"image_style\":\"TOP\",\"btns\":${testButtonString},\"close_btn_color\":4291085508,\"bg_color\":4294243575,\"frame_color\":3207803699,\"text_color\":4280624421,\"header_text_color\":4280624421,\"trigger_id\":\"NWJhNTMxOThiZjVjZWE0NDZiMTUzYjZiXyRfbXY9NWJhNTMxOThiZjVjZWE0NDZiMTUzYjc1JnBpPWNtcA==\",\"uri\":\"${testUri}\",\"zipped_assets_url\":\"${testZippedAssetsUrl}\",\"duration\":${testDuration},\"message_close\":\"${testDismissType}\",\"use_webview\":${testUseWebView}}`
+  const inAppMessage = new ReactAppboy.BrazeInAppMessage(testJson);
+  expect(inAppMessage.message).toBe(testMessageBody);
+  expect(inAppMessage.messageType).toBe(testMessageType.toLowerCase());
+  expect(inAppMessage.uri).toBe(JSON.parse(`"${testUri}"`));
+  expect(inAppMessage.useWebView).toBe(testUseWebView);
+  expect(inAppMessage.zippedAssetsUrl).toBe(JSON.parse(`"${testZippedAssetsUrl}"`));
+  expect(inAppMessage.duration).toBe(testDuration);
+  expect(inAppMessage.extras).toEqual(JSON.parse(testExtras));
+  expect(inAppMessage.clickAction).toBe(testClickAction.toLowerCase());
+  expect(inAppMessage.dismissType).toBe(testDismissType.toLowerCase());
+  expect(inAppMessage.imageUrl).toBe(JSON.parse(`"${testImageUrl}"`));
+  expect(inAppMessage.header).toBe(testHeader);
+  expect(inAppMessage.inAppMessageJsonString).toBe(testJson);
+  expect(inAppMessage.buttons).toEqual(testButtons);
+});
+
+it('instantiates a BrazeInAppMessage object with the desired defaults', () => {
+  const defaultMessageBody = '';
+  const defaultMessageType = 'SLIDEUP';
+  const defaultUri = '';
+  const defaultImageUrl = '';
+  const defaultZippedAssetsUrl = '';
+  const defaultUseWebView = false;
+  const defaultDuration = 5;
+  const defaultExtras = {};
+  const defaultClickAction = 'NONE';
+  const defaultDismissType = 'AUTO_DISMISS';
+  const defaultHeader = '';
+  const defaultButtons = [];
+  const testJson = `{}`;
+  const inAppMessage = new ReactAppboy.BrazeInAppMessage(testJson);
+  expect(inAppMessage.message).toBe(defaultMessageBody);
+  expect(inAppMessage.messageType).toBe(defaultMessageType.toLowerCase());
+  expect(inAppMessage.uri).toBe(defaultUri);
+  expect(inAppMessage.useWebView).toBe(defaultUseWebView);
+  expect(inAppMessage.zippedAssetsUrl).toBe(defaultZippedAssetsUrl);
+  expect(inAppMessage.duration).toBe(defaultDuration);
+  expect(inAppMessage.extras).toEqual(defaultExtras);
+  expect(inAppMessage.clickAction).toBe(defaultClickAction.toLowerCase());
+  expect(inAppMessage.dismissType).toBe(defaultDismissType.toLowerCase());
+  expect(inAppMessage.imageUrl).toBe(defaultImageUrl);
+  expect(inAppMessage.header).toBe(defaultHeader);
+  expect(inAppMessage.inAppMessageJsonString).toBe(testJson);
+  expect(inAppMessage.buttons).toEqual(defaultButtons);
+});
+
+it('returns the original JSON when calling BrazeInAppMessage.toString()', () => {
+  const inAppMessage = new ReactAppboy.BrazeInAppMessage(testInAppMessageJson);
+  expect(inAppMessage.toString()).toBe(testInAppMessageJson);
+});
+
+test('it calls AppboyReactBridge.logInAppMessageClicked', () => {
+  const inAppMessage = new ReactAppboy.BrazeInAppMessage(testInAppMessageJson);
+  ReactAppboy.logInAppMessageClicked(inAppMessage);
+  expect(NativeModules.AppboyReactBridge.logInAppMessageClicked).toBeCalledWith(testInAppMessageJson);
+});
+
+test('it calls AppboyReactBridge.logInAppMessageImpression', () => {
+  const inAppMessage = new ReactAppboy.BrazeInAppMessage(testInAppMessageJson);
+  ReactAppboy.logInAppMessageImpression(inAppMessage);
+  expect(NativeModules.AppboyReactBridge.logInAppMessageImpression).toBeCalledWith(testInAppMessageJson);
+});
+
+test('it calls AppboyReactBridge.logInAppMessageButtonClicked', () => {
+  const inAppMessage = new ReactAppboy.BrazeInAppMessage(testInAppMessageJson);
+  const testId = 23;
+  ReactAppboy.logInAppMessageButtonClicked(inAppMessage, testId);
+  expect(NativeModules.AppboyReactBridge.logInAppMessageButtonClicked).toBeCalledWith(testInAppMessageJson, testId);
+});
+
+it('instantiates a BrazeButton object', () => {
+  const testId = 53;
+  const testClickAction = 'URI';
+  const testText = 'some text';
+  const testUri = "https:\\/\\/www.sometesturi.com";
+  const testUseWebView = true;
+  const testButtonJson = `{\"id\":${testId},\"text\":\"${testText}\",\"click_action\":\"${testClickAction}\",\"uri\":\"${testUri}\",\"use_webview\":${testUseWebView},\"bg_color\":4294967295,\"text_color\":4279990479,\"border_color\":4279990479}`;
+  const button = new ReactAppboy.BrazeButton(JSON.parse(testButtonJson));
+  expect(button.id).toBe(testId);
+  expect(button.clickAction).toBe(testClickAction.toLowerCase());
+  expect(button.text).toBe(testText);
+  expect(button.uri).toBe(JSON.parse(`"${testUri}"`));
+  expect(button.useWebView).toBe(testUseWebView);
+  expect(button.toString()).toBe("BrazeButton text:" + button.text + " uri:" + button.uri + " clickAction:"
+  + button.clickAction.toString() + " useWebView:" + button.useWebView.toString());
+});
+
+it('instantiates a BrazeButton object with the desired defaults', () => {
+  const defaultUri = '';
+  const defaultText= '';
+  const defaultUseWebView = false;
+  const defaultClickAction = 'NONE';
+  const defaultId = 0;
+  const inAppMessage = new ReactAppboy.BrazeButton(`{}`);
+  expect(inAppMessage.uri).toBe(defaultUri);
+  expect(inAppMessage.useWebView).toBe(defaultUseWebView);
+  expect(inAppMessage.text).toBe(defaultText);
+  expect(inAppMessage.clickAction).toBe(defaultClickAction.toLowerCase());
+  expect(inAppMessage.id).toBe(defaultId);
+});

CHANGELOG.md

@@ -0,1 +1,19 @@
+## 1.21.0
+
+##### Added
+- Added support for working with in-app messages in the JavaScript layer. In-App Messages can be instantiated using the `BrazeInAppMessage` class. The resulting object can be passed into the analytics methods: `logInAppMessageClicked`, `logInAppMessageImpression`, and `logInAppMessageButtonClicked` (along with the button index). See the README for additional implementation details or the `AppboyProject` sample app for an integration example.
+- Added `ReactAppboy.requestGeofences()` to request a Braze Geofences update for a manually provided GPS coordinate. Automatic Braze Geofence requests must be disabled to properly use this method.
+
+##### ⚠ Breaking
+- Updated the native Android bridge to [Braze Android SDK 8.0.1](https://github.com/Appboy/appboy-android-sdk/blob/master/CHANGELOG.md#801).
+- Updated the native iOS bridge to [Braze iOS SDK 3.26.0](https://github.com/Appboy/appboy-ios-sdk/releases/tag/3.26.0).
+
+##### Changed
+- Improved Typescript definitions for `setCustomUserAttribute` and `incrementCustomUserAttribute`.
+  - Thanks @janczizikow!
+
+##### Fixed
+- Fixed incorrect TypeScript definition for `ContentCard`.
+  - Thanks @Hannes-Sandahl-Mpya!
+
 ## 1.20.0
@@ -2,0 +20,0 @@

index.d.ts

@@ -220,3 +220,3 @@ // Definitions by: ahanriat <https://github.com/ahanriat>
   key: string,
-  value: any,
+  value: number | boolean | string | string[] | Date | null,
   callback?: Callback
@@ -273,3 +273,3 @@ ): void;
   key: string,
-  value: any,
+  value: number,
   callback?: Callback
@@ -356,3 +356,3 @@ ): void;
   expiresAt: number;
-  type: ContentCardType;
+  type: ContentCardType[keyof ContentCardType];
   viewed: boolean;
@@ -520,4 +520,79 @@ clicked: boolean;
 
+/**
+ * Logs a click for the provided in-app message data
+ * @param {BrazeInAppMessage} inAppMessage
+ */
+export function logInAppMessageClicked(
+  inAppMessage: BrazeInAppMessage
+): void;
+
+/**
+ * Logs an impression for the provided in-app message data
+ * @param {BrazeInAppMessage} inAppMessage
+ */
+export function logInAppMessageImpression(
+  inAppMessage: BrazeInAppMessage
+): void;
+
+/**
+ * Logs a button click for the provided in-app message button data
+ * @param {BrazeInAppMessage} inAppMessage
+ * @param {number} buttonId
+ */
+export function logInAppMessageButtonClicked(
+  inAppMessage: BrazeInAppMessage,
+  buttonId: number
+): void;
+
+export class BrazeInAppMessage {
+  constructor(_data: string)
+  inAppMessageJsonString: string
+  message: string
+  header: string
+  uri: string
+  imageUrl: string
+  zippedAssetsUrl: string
+  useWebView: boolean
+  duration: number
+  clickAction: BrazeClickAction[keyof BrazeClickAction]
+  dismissType: BrazeDismissType[keyof BrazeDismissType]
+  messageType: BrazeMessageType[keyof BrazeMessageType]
+  extras: {[key: string]: string}
+  buttons: [BrazeButton]
+  toString(): string;
+}
+
+export class BrazeButton {
+  constructor(_data: string)
+  text: string
+  uri: string
+  useWebView: boolean
+  clickAction: BrazeClickAction[keyof BrazeClickAction]
+  id: number
+  toString(): string;
+}
+
 type MonthsAsNumber = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
 
+interface BrazeClickAction {
+  'NEWS_FEED': 'news_feed',
+  'URI': 'uri',
+  'NONE': 'none'
+}
+export const ClickAction: BrazeClickAction;
+
+interface BrazeDismissType {
+  'SWIPE': 'swipe',
+  'AUTO_DISMISS': 'auto_dismiss'
+}
+export const DismissType: BrazeDismissType;
+
+interface BrazeMessageType {
+  'SLIDEUP': 'slideup',
+  'MODAL': 'modal',
+  'FULL': 'full',
+  'HTML_FULL': 'html_full'
+}
+export const MessageType: BrazeMessageType;
+
 interface BrazeCardCategory {
@@ -524,0 +599,0 @@ ADVERTISING: 'advertising';

index.js

@@ -606,2 +606,30 @@ const AppboyReactBridge = require('react-native').NativeModules.AppboyReactBridge;
 
+  /**
+   * Logs a click for the provided in-app message data
+   * @param {BrazeInAppMessage} inAppMessage
+   */
+  logInAppMessageClicked: function(inAppMessage) {
+    const inAppMessageString = inAppMessage.toString();
+    AppboyReactBridge.logInAppMessageClicked(inAppMessageString);
+  },
+
+  /**
+   * Logs an impression for the provided in-app message data
+   * @param {BrazeInAppMessage} inAppMessage
+   */
+  logInAppMessageImpression: function(inAppMessage) {
+    const inAppMessageString = inAppMessage.toString();
+    AppboyReactBridge.logInAppMessageImpression(inAppMessageString);
+  },
+
+  /**
+   * Logs a button click for the provided in-app message button data
+   * @param {BrazeInAppMessage} inAppMessage
+   * @param {number} buttonId
+   */
+  logInAppMessageButtonClicked: function(inAppMessage, buttonId) {
+    const inAppMessageString = inAppMessage.toString();
+    AppboyReactBridge.logInAppMessageButtonClicked(inAppMessageString, buttonId);
+  },
+
   // Events
@@ -619,2 +647,143 @@ /**
 
+  BrazeInAppMessage: class {
+    constructor(_data) {
+      this.inAppMessageJsonString = _data;
+      let inAppMessageJson = JSON.parse(this.inAppMessageJsonString);
+      let messageJson = inAppMessageJson["message"];
+      if (typeof messageJson === 'string') {
+        this.message = messageJson;
+      } else {
+        this.message = '';
+      }
+      let headerJson = inAppMessageJson["header"];
+      if (typeof headerJson === 'string') {
+        this.header = headerJson;
+      } else {
+        this.header = '';
+      }
+      let uriJson = inAppMessageJson["uri"];
+      if (typeof uriJson === 'string') {
+        this.uri = uriJson;
+      } else {
+        this.uri = '';
+      }
+      let imageUrlJson = inAppMessageJson["image_url"];
+      if (typeof imageUrlJson === 'string') {
+        this.imageUrl = imageUrlJson;
+      } else {
+        this.imageUrl = '';
+      }
+      let zippedAssetsUrlJson = inAppMessageJson["zipped_assets_url"];
+      if (typeof zippedAssetsUrlJson === 'string') {
+        this.zippedAssetsUrl = zippedAssetsUrlJson;
+      } else {
+        this.zippedAssetsUrl = '';
+      }
+      let useWebViewJson = inAppMessageJson["use_webview"];
+      if (typeof useWebViewJson === 'boolean') {
+        this.useWebView = useWebViewJson;
+      } else {
+        this.useWebView = false;
+      }
+      let durationJson = inAppMessageJson["duration"];
+      if (typeof durationJson === 'number') {
+        this.duration = durationJson;
+      } else {
+        this.duration = 5;
+      }
+      let clickActionJson = inAppMessageJson["click_action"];
+      this.clickAction = ReactAppboy.ClickAction['NONE'];
+      if (typeof clickActionJson === 'string') {
+        Object.values(ReactAppboy.ClickAction).forEach(action => {
+          if (action.toLowerCase().endsWith(clickActionJson
+            .toLowerCase())) {
+            this.clickAction = action;
+          }
+        });
+      }
+      let dismissTypeJson = inAppMessageJson["message_close"];
+      this.dismissType = ReactAppboy.DismissType['AUTO_DISMISS'];
+      if (typeof dismissTypeJson === 'string') {
+        Object.values(ReactAppboy.DismissType).forEach(type => {
+          if (type.toLowerCase().endsWith(dismissTypeJson
+            .toLowerCase())) {
+            this.dismissType = type;
+          }
+        });
+      }
+      let messageTypeJson = inAppMessageJson["type"];
+      this.messageType = ReactAppboy.MessageType['SLIDEUP'];
+      if (typeof messageTypeJson === 'string') {
+        Object.values(ReactAppboy.MessageType).forEach(type => {
+          if (type.toLowerCase().endsWith(messageTypeJson
+            .toLowerCase())) {
+            this.messageType = type;
+          }
+        });
+      }
+      let extrasJson = inAppMessageJson["extras"];
+      this.extras = {};
+      if (typeof extrasJson === 'object') {
+        Object.keys(extrasJson).forEach(key=> {
+          if (typeof extrasJson[key] === 'string') {
+            this.extras[key] = extrasJson[key];
+          }
+        });
+      }
+      this.buttons = [];
+      let buttonsJson = inAppMessageJson["btns"];
+      if (typeof buttonsJson === 'object' && Array.isArray(buttonsJson)) {
+        buttonsJson.forEach(buttonJson => {
+          this.buttons.push(new ReactAppboy.BrazeButton(buttonJson));
+        });
+      }
+    }
+    toString() {
+      return this.inAppMessageJsonString;
+    }
+  },
+
+  BrazeButton: class {
+    constructor(buttonJson) {
+      let textJson = buttonJson['text'];
+      if (typeof textJson === 'string') {
+        this.text = textJson;
+      } else {
+        this.text = '';
+      }
+      let uriJson = buttonJson['uri'];
+      if (typeof uriJson === 'string') {
+        this.uri = uriJson;
+      } else {
+        this.uri = '';
+      }
+      let useWebViewJson = buttonJson["use_webview"];
+      if (typeof useWebViewJson === 'boolean') {
+        this.useWebView = useWebViewJson;
+      } else {
+        this.useWebView = false;
+      }
+      let clickActionJson = buttonJson["click_action"];
+      this.clickAction = ReactAppboy.ClickAction['NONE'];
+      if (typeof clickActionJson === 'string') {
+        Object.values(ReactAppboy.ClickAction).forEach(action => {
+          if (action.toLowerCase().endsWith(clickActionJson
+            .toLowerCase())) {
+            this.clickAction = action;
+          }
+        });
+      }
+      let idJson = buttonJson["id"];
+      if (typeof idJson === 'number') {
+        this.id = idJson;
+      } else {
+        this.id = 0;
+      }
+    }
+    toString() {
+      return "BrazeButton text:" + this.text + " uri:" + this.uri + " clickAction:"
+          + this.clickAction.toString() + " useWebView:" + this.useWebView.toString();
+    }
+  },
+
   // Enums
@@ -654,4 +823,22 @@ CardCategory: {
   },
+
+  ClickAction: {
+    'NEWS_FEED': 'news_feed',
+    'URI': 'uri',
+    'NONE': 'none'
+  },
+
+  DismissType: {
+    'SWIPE': 'swipe',
+    'AUTO_DISMISS': 'auto_dismiss'
+  },
+
+  MessageType: {
+    'SLIDEUP': 'slideup',
+    'MODAL': 'modal',
+    'FULL': 'full',
+    'HTML_FULL': 'html_full'
+  }
 };
 
 module.exports = ReactAppboy;

package.json

 {
   "name": "react-native-appboy-sdk",
-  "version": "1.20.0",
+  "version": "1.21.0",
   "description": "Braze SDK for React Native.",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -23,5 +23,9 @@ <img src="https://raw.githubusercontent.com/Appboy/appboy-react-sdk/master/braze-logo.png" width="300" title="Braze Logo" />
 
-```
+```zsh
 cd AppboyProject/
 yarn install
+
+# In a separate tab:
+cd AppboyProject/
+npx react-native start
 ```
@@ -33,3 +37,3 @@
 From the `AppboyProject` directory:
-```
+```zsh
 sudo gem install cocoapods
@@ -39,3 +43,3 @@ cd ios/
 cd ../
-react-native run-ios
+npx react-native run-ios
 ```
@@ -45,6 +49,21 @@
 From the `AppboyProject` directory:
+```zsh
+npx react-native run-android
 ```
-react-native run-android
-```
 
+## In-App Messages
+### Integration
+
+Native in-app messages display automatically out of the box on Android and iOS.
+
+To get the in-app message data implement the `IInAppMessageManagerListener` delegate as described in our public documentation [for Android](https://www.braze.com/docs/developer_guide/platform_integration_guides/android/in-app_messaging/customization/#setting-a-custom-manager-listener) and [for iOS](https://www.braze.com/docs/developer_guide/platform_integration_guides/ios/in-app_messaging/customization/). This data can then be received in the JavaScript layer and used to instantiate a `BrazeInAppMessage`. A sample implementation of this is contained in AppboyProject.
+
+### Disabling automatic display
+To disable automatic in-app message display for Android, your `beforeInAppMessageDisplayed` method implementation should return `InAppMessageOperation.DISCARD`.
+
+To disable automatic in-app message display for iOS, your `beforeInAppMessageDisplayed` delegate implementation should return `ABKInAppMessageDisplayChoice.discardInAppMessage`.
+
+### Analytics
+To log analytics using your `BrazeInAppMessage`, pass the instance into the `logInAppMessageClicked`, `logInAppMessageImpression`, and `logInAppMessageButtonClicked` (along with the button index) methods available on `ReactAppboy`.
+
 ## Style
@@ -51,0 +70,0 @@ - Generally we try to mimic the Braze Web SDK's Javascript interface where appropriate.

No alert changes

Improved metrics

Total package byte prevSize

202907

increased by11.84%

Number of lines in readme file

72

increased by35.85%

Worsened metrics

Lines of code

2075

decreased by-14.33%

No dependency changes