@mparticle/web-braze-kit 3.0.0 → 3.0.3

package/CHANGELOG.md

@@ -2,6 +2,16 @@
 
 --
 
+#### 3.0.3 - 2022-08-24
+-   feat: Add logging for debugging
+
+#### 3.0.2 - 2022-06-16
+-   fix: add register_inapp and pushPrimer variables
+
+#### 3.0.1 - 2022-05-18
+
+-   consume initOptions customFlags - this allows a customer to pass a callback to include additional options that mParticle doesn't support in the UI
+
 #### 3.0.0 - 2022-03-28
 
 ⚠️ **Breaking** - If you reference any of the below deprecations and implement mParticle via snippet, you will have to make changes to your codebase before June 8, 2022 to be compatible with both version 2 and version 3 of the Braze SDK to ensure your code continues to work.

package/README.md

@@ -1,29 +1,29 @@
 ![Braze Logo](https://github.com/mparticle-integrations/mparticle-javascript-integration-appboy/blob/master/braze-logo.png)
 
 ⚠️⚠️⚠️
-# Notice! Timeline for Breaking Changes for mParticle Web Braze Kit- 3/28/2022 - 6/8/2022
+# Notice! Timeline for Breaking Changes for mParticle Web Braze Kit- 3/28/2022 - 6/14/2022
 This repository renames and replaces our [mParticle Appboy Web Kit](https://github.com/mparticle-integrations/mparticle-javascript-integration-appboy), which will be archived in the future.
 
-Braze has breaking changes between version 2.5.2 and 3.5.0 of their SDK.  As a result, we too are updating our [mParticle Braze web kit](https://github.com/mparticle-integrations/mparticle-javascript-integration-appboy) to support Braze’s Web SDK version 3.5.0.  The updated mParticle Braze Web kit will be available via CDN on June 8, 2022 and is currently available on NPM as [@mparticle/web-braze-kit](https://www.npmjs.com/package/@mparticle/web-braze-kit) v3.0.0.
+Braze has breaking changes between version 2.5.2 and 3.5.0 of their SDK.  As a result, we too are updating our [mParticle Braze web kit](https://github.com/mparticle-integrations/mparticle-javascript-integration-appboy) to support Braze’s Web SDK version 3.5.0.  The updated mParticle Braze Web kit will be available via CDN on June 14, 2022 and is currently available on NPM as [@mparticle/web-braze-kit](https://www.npmjs.com/package/@mparticle/web-braze-kit) v3.0.1.
 
 **How do you know if your code is affected?**
 
-You may notice errors on your site if you load mParticle [via snippet](https://docs.mparticle.com/developers/sdk/web/getting-started/#add-the-sdk-snippet) (as most of our clients do), and you reference any deprecated Braze APIs starting 6/8/2022.
+You may notice errors on your site if you load mParticle [via snippet](https://docs.mparticle.com/developers/sdk/web/getting-started/#add-the-sdk-snippet) (as most of our clients do), and you reference any deprecated Braze APIs starting 6/14/2022.
 
 We highly recommend that you review the changes between version 2 and 3 of the Braze Web SDK to understand these changes, which can be found [here](https://www.braze.com/docs/developer_guide/platform_integration_guides/web/changelog/#300).  To summarize:
 * The `appboy.ab` namespace has been removed and everything lives under the `appboy` namespace now.
 * `InAppMessage.Button` has been renamed to `InAppMessageButton`
 
-If you reference any of the above deprecations, you will have to makes changes to your codebase before June 8, 2022 to be compatible with both version 2 and version 3 of the Braze SDK to ensure your code continues to work. We recommend a 3 step approach. Here are some code samples of what this code could look like today (step 1), preparing for the update (step 2) and after the change is live (step 3). 
+If you reference any of the above deprecations, you will have to makes changes to your codebase before June 14, 2022 to be compatible with both version 2 and version 3 of the Braze SDK to ensure your code continues to work. We recommend a 3 step approach. Here are some code samples of what this code could look like today (step 1), preparing for the update (step 2) and after the change is live (step 3). 
 
-The below recommendations apply only to customers who load mParticle [via snippet](https://docs.mparticle.com/developers/sdk/web/getting-started/#add-the-sdk-snippet).  Customers who [self host via NPM](https://docs.mparticle.com/developers/sdk/web/self-hosting/) can ignore step 1 and jump straight to step 3 after updating their mParticle Braze kit to v3.0.0.
+The below recommendations apply only to customers who load mParticle [via snippet](https://docs.mparticle.com/developers/sdk/web/getting-started/#add-the-sdk-snippet).  Customers who [self host via NPM](https://docs.mparticle.com/developers/sdk/web/self-hosting/) can ignore step 1 and jump straight to step 3 after updating their mParticle Braze kit to v3.0.1.
 
 Step 1: Legacy code sample. If your code references the `ab` namespace (like below) or `InAppMessage.Button`, you should change it following Step 2’s example:
 ```javascript
 let banner = new appboy.ab.Banner(‘test’);
 ```
 
-Step 2: Rollout code sample to be used before June 8, 2022:
+Step 2: Rollout code sample to be used before June 14, 2022:
 ```javascript
 let banner;
 if (appboy.hasOwnProperty(‘ab’)) {
@@ -32,7 +32,7 @@ if (appboy.hasOwnProperty(‘ab’)) {
     banner = new appboy.Banner(‘test’);
 }
 ```
-Step 3: After June 8, 2022, you can simplify your code to the following once the mParticle Braze Web kit has been released to our CDN:
+Step 3: After June 14, 2022, you can simplify your code to the following once the mParticle Braze Web kit has been released to our CDN:
 ```javascript
 let banner = new appboy.Banner(‘test’);
 ```

package/dist/BrazeKit.common.js

@@ -305,7 +305,7 @@ window.appboy = appboy_min;
 
 var name = 'Appboy',
     moduleId = 28,
-    version = '2.0.7',
+    version = '3.0.3',
     MessageType = {
         PageView: 3,
         PageEvent: 4,
@@ -328,7 +328,8 @@ var constructor = function() {
     var self = this,
         forwarderSettings,
         options = {},
-        reportingService;
+        reportingService,
+        mpCustomFlags;
 
     self.name = name;
 
@@ -384,10 +385,20 @@ var constructor = function() {
                         sanitizedProductName
                     );
                 }
+                var price = parseFloat(product.Price);
+
+                kitLogger(
+                    'appboy.logPurchase',
+                    sanitizedProductName,
+                    price,
+                    event.CurrencyCode,
+                    product.Quantity,
+                    sanitizedProperties
+                );
 
                 reportEvent = appboy.logPurchase(
                     sanitizedProductName,
-                    parseFloat(product.Price),
+                    price,
                     event.CurrencyCode,
                     product.Quantity,
                     sanitizedProperties
@@ -413,6 +424,9 @@ var constructor = function() {
         }
         sanitizedEventName = getSanitizedValueForAppboy(eventName);
         sanitizedAttrs = getSanitizedCustomProperties(attrs);
+
+        kitLogger('appboy.logCustomEvent', sanitizedEventName, sanitizedAttrs);
+
         var reportEvent = appboy.logCustomEvent(
             sanitizedEventName,
             sanitizedAttrs
@@ -429,6 +443,13 @@ var constructor = function() {
                     ", removeUserAttribute or setUserAttribute must set 'dob' to a date"
                 );
             } else {
+                kitLogger(
+                    'appoy.getUser().setDateOfBirth',
+                    value.getFullYear(),
+                    value.getMonth() + 1,
+                    value.getDate()
+                );
+
                 appboy
                     .getUser()
                     .setDateOfBirth(
@@ -440,6 +461,9 @@ var constructor = function() {
         } else if (key === '$Age') {
             if (typeof value === 'number') {
                 var year = new Date().getFullYear() - value;
+
+                kitLogger('appboy.getUser().setDateOfBirth', year, 1, 1);
+
                 appboy.getUser().setDateOfBirth(year, 1, 1);
             } else {
                 return '$Age must be a number';
@@ -457,6 +481,12 @@ var constructor = function() {
             }
             var params = [];
             params.push(value);
+
+            kitLogger(
+                'appboy.getUser().' + DefaultAttributeMethods[key],
+                params
+            );
+
             var u = appboy.getUser();
             //This method uses the setLastName, setFirstName, setEmail, setCountry, setHomeCity, setPhoneNumber, setAvatarImageUrl, setDateOfBirth, setGender, setEmailNotificationSubscriptionType, and setPushNotificationSubscriptionType methods
             if (!u[DefaultAttributeMethods[key]].apply(u, params)) {
@@ -481,10 +511,17 @@ var constructor = function() {
             );
         }
 
+        kitLogger(
+            'appboy.logCustomEvent',
+            sanitizedEventName,
+            sanitizedProperties
+        );
+
         var reportEvent = appboy.logCustomEvent(
             sanitizedEventName,
             sanitizedProperties
         );
+
         return reportEvent === true;
     }
 
@@ -540,6 +577,13 @@ var constructor = function() {
     function removeUserAttribute(key) {
         if (!(key in DefaultAttributeMethods)) {
             var sanitizedKey = getSanitizedValueForAppboy(key);
+
+            kitLogger(
+                'appboy.getUser().setCustomUserAttribute',
+                sanitizedKey,
+                null
+            );
+
             appboy.getUser().setCustomUserAttribute(sanitizedKey, null);
         } else {
             return setDefaultAttribute(key, null);
@@ -553,6 +597,13 @@ var constructor = function() {
             if (value != null && sanitizedValue == null) {
                 return 'Value did not pass validation for ' + key;
             }
+
+            kitLogger(
+                'appboy.getUser().setCustomUserAttribute',
+                sanitizedKey,
+                sanitizedValue
+            );
+
             appboy
                 .getUser()
                 .setCustomUserAttribute(sanitizedKey, sanitizedValue);
@@ -566,8 +617,12 @@ var constructor = function() {
         // Other versions use onUserIdentified, which is called after setUserIdentity from core SDK
         if (window.mParticle.getVersion().split('.')[0] === '1') {
             if (type == window.mParticle.IdentityType.CustomerId) {
+                kitLogger('appboy.changeUser', id);
+
                 appboy.changeUser(id);
             } else if (type == window.mParticle.IdentityType.Email) {
+                kitLogger('appboy.getUser().setEmail', id);
+
                 appboy.getUser().setEmail(id);
             } else {
                 return (
@@ -593,26 +648,31 @@ var constructor = function() {
                 ];
         }
 
+        kitLogger('appboy.changeUser', appboyUserIDType);
+
         appboy.changeUser(appboyUserIDType);
 
         if (userIdentities.email) {
+            kitLogger('appboy.getUser().setEmail', userIdentities.email);
+
             appboy.getUser().setEmail(userIdentities.email);
         }
     }
 
     function primeAppBoyWebPush() {
-        // The following code block is Braze's best practice for implementing
-        // their push primer.  It should not be changed unless Braze updates it
+        // The following code block is based on Braze's best practice for implementing
+        // their push primer.  We only modify it to include pushPrimer and register_inapp settings.
         // https://www.braze.com/docs/developer_guide/platform_integration_guides/web/push_notifications/integration/#soft-push-prompts
         appboy.subscribeToInAppMessage(function(inAppMessage) {
             var shouldDisplay = true;
-
+            var pushPrimer = false;
             if (inAppMessage instanceof appboy.InAppMessage) {
                 // Read the key-value pair for msg-id
                 var msgId = inAppMessage.extras['msg-id'];
 
                 // If this is our push primer message
                 if (msgId == 'push-primer') {
+                    pushPrimer = true;
                     // We don't want to display the soft push prompt to users on browsers that don't support push, or if the user
                     // has already granted/blocked permission
                     if (
@@ -633,8 +693,11 @@ var constructor = function() {
                 }
             }
 
-            // Display the message
-            if (shouldDisplay) {
+            // Display the message if it's a push primer message and shouldDisplay is true
+            if (
+                (pushPrimer && shouldDisplay) ||
+                (!pushPrimer && forwarderSettings.register_inapp === 'True')
+            ) {
                 appboy.display.showInAppMessage(inAppMessage);
             }
         });
@@ -643,12 +706,35 @@ var constructor = function() {
     function openSession(forwarderSettings) {
         appboy.openSession();
         if (forwarderSettings.softPushCustomEventName) {
+            kitLogger(
+                'appboy.logCustomEvent',
+                forwarderSettings.softPushCustomEventName
+            );
+
             appboy.logCustomEvent(forwarderSettings.softPushCustomEventName);
         }
     }
 
-    function initForwarder(settings, service, testMode) {
+    function initForwarder(
+        settings,
+        service,
+        testMode,
+        trackerId,
+        userAttributes,
+        userIdentities,
+        appVersion,
+        appName,
+        customFlags
+    ) {
+        // check to see if there is a logger for backwards compatibility, and if not, mock one to avoid errors
+        if (!self.logger) {
+            // create a logger
+            self.logger = {
+                verbose: function() {},
+            };
+        }
         // eslint-disable-line no-unused-vars
+        mpCustomFlags = customFlags;
         try {
             forwarderSettings = settings;
             reportingService = service;
@@ -683,6 +769,14 @@ var constructor = function() {
                     options.baseUrl = customUrl;
                 }
             }
+
+            if (mpCustomFlags && mpCustomFlags[moduleId.toString()]) {
+                var brazeFlags = mpCustomFlags[moduleId.toString()];
+                if (typeof brazeFlags.initOptions === 'function') {
+                    brazeFlags.initOptions(options);
+                }
+            }
+
             if (testMode !== true) {
                 appboy.initialize(forwarderSettings.apiKey, options);
                 finishAppboyInitialization(forwarderSettings);
@@ -791,6 +885,35 @@ var constructor = function() {
     this.onUserIdentified = onUserIdentified;
     this.removeUserAttribute = removeUserAttribute;
     this.decodeClusterSetting = decodeClusterSetting;
+
+    /* An example output of this logger if we pass in a purchase event for 1 iPhone
+     with a SKU of iphoneSku that cost $999 with a product attribute of 
+     color: blue would be:
+     mParticle - Braze Web Kit log:
+     appboy.logPurchase:
+     iphone,
+     999,
+     USD,
+     1,
+     {\"color\":\"blue\",\"Sku":"iphoneSKU"},\n`;
+     */
+    function kitLogger(method) {
+        var msg = 'mParticle - Braze Web Kit log:';
+
+        var nonMethodArguments = Array.prototype.slice.call(arguments, 1);
+        msg += '\n' + method + ':\n';
+
+        nonMethodArguments.forEach(function(arg) {
+            if (isObject(arg) || Array.isArray(arg)) {
+                msg += JSON.stringify(arg);
+            } else {
+                msg += arg;
+            }
+            msg += ',\n';
+        });
+
+        self.logger.verbose(msg);
+    }
 };
 
 function getId() {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@mparticle/web-braze-kit",
-    "version": "3.0.0",
+    "version": "3.0.3",
     "author": "mParticle Developers <developers@mparticle.com> (https://www.mparticle.com)",
     "description": "mParticle integration sdk for Braze",
     "main": "dist/BrazeKit.common.js",
@@ -31,7 +31,7 @@
     },
     "dependencies": {
         "@braze/web-sdk": "^3.5.0",
-        "@mparticle/web-sdk": "^2.11.3"
+        "@mparticle/web-sdk": "^2.17.0"
     },
     "license": "Apache-2.0"
 }