@mparticle/web-braze-kit 3.0.8 → 3.0.9

package/README.md

@@ -8,7 +8,7 @@ You can now select what version of the Braze SDK you want to use when setting up
 Please review the [Braze Changelog](https://www.braze.com/docs/developer_guide/platform_integration_guides/web/changelog#400) and [V4 migration guide](https://github.com/braze-inc/braze-web-sdk/blob/master/UPGRADE_GUIDE.md) to learn about the differences between V3 and V4 and what changes you will need to make in your code. The most significant breaking changes are the replacement of the `appboy` class name with `braze`, in addition to the removal and renaming of several APIs.
 
 You can opt into the latest major version of the Braze Web SDK whether you implement mParticle's Web SDK using npm or our snippet/CDN.
-* Customers who self-host mParticle via npm - You can use @mparticle/web-braze-kit version 4.0.0 in your package.json now! This has been available since 10/15/2022.
+* Customers who self-host mParticle via npm - You should add @mparticle/web-braze-kit version 4.0.0 or greater in your package.json now! You must also select `Version 4` under `Braze Web SDK Version`  in the Braze connection settings.
 * Customers who load mParticle via snippet/CDN - Opting in is available via the mParticle UI in your Braze connection settings.
 
 Note that the following is only one example.  Everywhere you manually call `appboy` needs to be updated similar to the below. If you are using NPM, you can skip to step 3.  Please be sure to test your site fully in development prior to releasing.
@@ -19,7 +19,7 @@ Note that the following is only one example.  Everywhere you manually call `appb
 window.appboy.display.destroyFeed();
 ```
 
-Step 2: Roll out code changes to be used before February 15, 2023:
+Step 2: Roll out code changes prior to opting in to V4
 ```javascript
 if (window.appboy) {
 	window.appboy.display.destroyFeed();
@@ -27,16 +27,18 @@ if (window.appboy) {
 	window.braze.destroyFeed();
 }
 ```
-Step 3: After February 1, 2023, you can simplify your code after the mParticle Braze Web kit, which includes Braze SDK V4, has been released to our CDN:
+Step 3: Opt into Version 4.  Simply navigate to your connection settings and selection `Version 4` from the new Braze Web SDK Version drop down.  
+
+Step 4: After you opt in, you can simplify your code. We recommend testing and waiting at least 24 hours between opting in and removing previous instances of `appboy` and doing thorough testing of your application in a development environment to ensure everything is working:
 ```javascript
 window.braze.destroyFeed();
 ```
 
-Step 4: Push Notifications via service-worker.js
-If you use Push Notifications, we have updated the `service-worker.js` file.  In our testing, Braze’s push notifications work as expected regardless of what version of the service-worker is used, but we recommend updating this file to ensure future compatibility.  In your `service-worker.js` file, update the code to reference `https://static.mparticle.com/sdk/js/braze/service-worker-4.2.0.js` instead of `https://static.mparticle.com/sdk/js/braze/service-worker-3.5.0.js`.  Your `service-worker.js` file should now contain:
+Step 5: Push Notifications via service-worker.js
+If you use Push Notifications, we have updated the `service-worker.js` file.  In our testing, Braze’s push notifications work as expected regardless of what version of the service-worker is used, but we recommend updating this file to ensure future compatibility.  In your `service-worker.js` file, update the code to reference `https://static.mparticle.com/sdk/js/braze/service-worker-4.2.1.js` instead of `https://static.mparticle.com/sdk/js/braze/service-worker-3.5.0.js`.  Your `service-worker.js` file should now contain:
 
 ```javascript
-self.imports('https://static.mparticle.com/sdk/js/braze/service-worker-4.2.0.js')
+self.imports('https://static.mparticle.com/sdk/js/braze/service-worker-4.2.1.js')
 ```
 
 ### Transition from @mparticle/web-appboy-kit to @mparticle/web-braze-kit

package/dist/BrazeKit.common.js

@@ -306,12 +306,13 @@ window.appboy = appboy_min;
 var name = 'Appboy',
     suffix = 'v3',
     moduleId = 28,
-    version = '3.0.8',
+    version = '3.0.9',
     MessageType = {
         PageView: 3,
         PageEvent: 4,
         Commerce: 16,
-    };
+    },
+    CommerceEventType = mParticle.CommerceEventType;
 
 var clusterMapping = {
     '01': 'sdk.iad-01.braze.com',
@@ -357,32 +358,94 @@ var constructor = function () {
         dob: 'setDateOfBirth',
     };
 
+    var bundleCommerceEventData = false;
+
+    // A purchase event can either log a single event with all products
+    // or multiple purchase events (one per product)
     function logPurchaseEvent(event) {
         var reportEvent = false;
+
+        if (bundleCommerceEventData) {
+            reportEvent = logSinglePurchaseEventWithProducts(event);
+        } else {
+            reportEvent = logPurchaseEventPerProduct(event);
+        }
+        return reportEvent === true;
+    }
+
+    function logSinglePurchaseEventWithProducts(event) {
+        var quantity = 1;
+        var eventAttributes = mergeObjects(event.EventAttributes, {
+            products: [],
+        });
+        var eventName = getCommerceEventName(event.EventCategory);
+
+        // All commerce events except for promotion/impression events will have a
+        // ProductAction property, but if this ever changes in the future, this
+        // check will prevent errors
+        if (!event.ProductAction) {
+            return false;
+        }
+
+        if (event.ProductAction.TransactionId) {
+            eventAttributes['Transaction Id'] =
+                event.ProductAction.TransactionId;
+        }
+
+        if (
+            event.ProductAction.ProductList &&
+            event.ProductAction.ProductList.length
+        ) {
+            eventAttributes.products = addProducts(
+                event.ProductAction.ProductList
+            );
+        }
+
+        kitLogger(
+            'appboy.logPurchase',
+            eventName,
+            event.ProductAction.TotalAmount,
+            event.CurrencyCode,
+            quantity,
+            eventAttributes
+        );
+
+        reportEvent = appboy.logPurchase(
+            eventName,
+            event.ProductAction.TotalAmount,
+            event.CurrencyCode,
+            quantity,
+            eventAttributes
+        );
+    }
+
+    function logPurchaseEventPerProduct(event) {
         if (event.ProductAction.ProductList) {
-            event.ProductAction.ProductList.forEach(function (product) {
-                if (product.Attributes == null) {
-                    product.Attributes = {};
-                }
-                product.Attributes['Sku'] = product.Sku;
+            event.ProductAction.ProductList.forEach(function(product) {
+                var productName;
 
-                var sanitizedProductName;
                 if (forwarderSettings.forwardSkuAsProductName === 'True') {
-                    sanitizedProductName = getSanitizedValueForAppboy(
-                        String(product.Sku)
-                    );
+                    productName = product.Sku;
                 } else {
-                    sanitizedProductName = getSanitizedValueForAppboy(
-                        String(product.Name)
-                    );
+                    productName = product.Name;
+                }
+                var sanitizedProductName = getSanitizedValueForAppboy(
+                    productName
+                );
+
+                if (product.Attributes == null) {
+                    product.Attributes = {};
                 }
 
+                product.Attributes['Sku'] = product.Sku;
+
                 var productAttributes = mergeObjects(product.Attributes, {
                     'Transaction Id': event.ProductAction.TransactionId,
                 });
 
-                var sanitizedProperties =
-                    getSanitizedCustomProperties(productAttributes);
+                var sanitizedProperties = getSanitizedCustomProperties(
+                    productAttributes
+                );
 
                 if (sanitizedProperties == null) {
                     return (
@@ -413,6 +476,57 @@ var constructor = function () {
         return reportEvent === true;
     }
 
+    function getCommerceEventName(eventType) {
+        const eventNamePrefix = 'eCommerce';
+        let eventName;
+
+        switch (eventType) {
+            case CommerceEventType.ProductAddToCart:
+                eventName = 'add_to_cart';
+                break;
+            case CommerceEventType.ProductRemoveFromCart:
+                eventName = 'remove_from_cart';
+                break;
+            case CommerceEventType.ProductCheckout:
+                eventName = 'checkout';
+                break;
+            case CommerceEventType.ProductCheckoutOption:
+                eventName = 'checkout_option';
+                break;
+            case CommerceEventType.ProductClick:
+                eventName = 'click';
+                break;
+            case CommerceEventType.ProductViewDetail:
+                eventName = 'view_detail';
+                break;
+            case CommerceEventType.ProductPurchase:
+                eventName = 'purchase';
+                break;
+            case CommerceEventType.ProductRefund:
+                eventName = 'refund';
+                break;
+            case CommerceEventType.ProductAddToWishlist:
+                eventName = 'add_to_wishlist';
+                break;
+            case CommerceEventType.ProductRemoveFromWishlist:
+                eventName = 'remove_from_wishlist';
+                break;
+            case CommerceEventType.PromotionView:
+                eventName = 'view';
+                break;
+            case CommerceEventType.PromotionClick:
+                eventName = 'click';
+                break;
+            case CommerceEventType.ProductImpression:
+                eventName = 'Impression';
+                break;
+            default:
+                eventName = 'unknown';
+                break;
+        }
+        return [eventNamePrefix, eventName].join(' - ');
+    }
+
     function logAppboyPageViewEvent(event) {
         var sanitizedEventName,
             sanitizedAttrs,
@@ -536,29 +650,8 @@ var constructor = function () {
     function processEvent(event) {
         var reportEvent = false;
 
-        if (
-            event.EventDataType == MessageType.Commerce &&
-            event.EventCategory == mParticle.CommerceEventType.ProductPurchase
-        ) {
-            reportEvent = logPurchaseEvent(event);
-        } else if (event.EventDataType == MessageType.Commerce) {
-            var listOfPageEvents =
-                mParticle.eCommerce.expandCommerceEvent(event);
-            if (listOfPageEvents != null) {
-                for (var i = 0; i < listOfPageEvents.length; i++) {
-                    // finalLoopResult keeps track of if any logAppBoyEvent in this loop returns true or not
-                    var finalLoopResult = false;
-                    try {
-                        reportEvent = logAppboyEvent(listOfPageEvents[i]);
-                        if (reportEvent === true) {
-                            finalLoopResult = true;
-                        }
-                    } catch (err) {
-                        return 'Error logging page event' + err.message;
-                    }
-                }
-                reportEvent = finalLoopResult === true;
-            }
+        if (event.EventDataType == MessageType.Commerce) {
+            reportEvent = logCommerceEvent(event);
         } else if (event.EventDataType == MessageType.PageEvent) {
             reportEvent = logAppboyEvent(event);
         } else if (event.EventDataType == MessageType.PageView) {
@@ -578,6 +671,155 @@ var constructor = function () {
         }
     }
 
+    // mParticle commerce events use different appboy methods depending on if they are
+    // a purchase event or a non-purchase commerce event
+    function logCommerceEvent(event) {
+        if (event.EventCategory === CommerceEventType.ProductPurchase) {
+            reportEvent = logPurchaseEvent(event);
+            return reportEvent === true;
+        } else {
+            reportEvent = logNonPurchaseCommerceEvent(event);
+            return reportEvent === true;
+        }
+    }
+
+    // A non-purchase commerce event can either log a single event with all products
+    // or one event per product when the commerce event is expanded
+    function logNonPurchaseCommerceEvent(event) {
+        if (bundleCommerceEventData) {
+            return logNonPurchaseCommerceEventWithProducts(event);
+        } else {
+            return logExpandedNonPurchaseCommerceEvents(event);
+        }
+    }
+
+    function logNonPurchaseCommerceEventWithProducts(mpEvent) {
+        const commerceEventAttrs = {};
+        const eventName = getCommerceEventName(mpEvent.EventCategory);
+        try {
+            switch (mpEvent.EventCategory) {
+                case CommerceEventType.PromotionClick:
+                case CommerceEventType.PromotionView:
+                    commerceEventAttrs.promotions = addPromotions(
+                        mpEvent.PromotionAction
+                    );
+                    break;
+                case CommerceEventType.ProductImpression:
+                    commerceEventAttrs.impressions = addImpressions(
+                        mpEvent.ProductImpressions
+                    );
+                    break;
+                default:
+                    if (mpEvent.ProductAction.ProductList) {
+                        commerceEventAttrs.products = addProducts(
+                            mpEvent.ProductAction.ProductList
+                        );
+                    }
+                    var transactionId = mpEvent.ProductAction.TransactionId;
+                    if (transactionId) {
+                        commerceEventAttrs['Transaction Id'] = transactionId;
+                    }
+            }
+
+            var sanitizedProperties = getSanitizedCustomProperties(
+                mpEvent.EventAttributes
+            );
+
+            const brazeEvent = {
+                EventName: eventName,
+                EventAttributes: mergeObjects(
+                    commerceEventAttrs,
+                    sanitizedProperties
+                ),
+            };
+
+            reportEvent = logAppboyEvent(brazeEvent);
+            return reportEvent;
+        } catch (err) {
+            return 'Error logging commerce event' + err.message;
+        }
+    }
+
+    function addPromotions(promotionAction) {
+        if (promotionAction && promotionAction.PromotionList) {
+            return promotionAction.PromotionList;
+        }
+        return [];
+    }
+
+    function addImpressions(productImpressions) {
+        if (productImpressions.length) {
+            return productImpressions.map(function(impression) {
+                return {
+                    'Product Impression List': impression.ProductImpressionList,
+                    products: addProducts(impression.ProductList),
+                };
+            });
+        } else {
+            return [];
+        }
+    }
+
+    function addProducts(productList) {
+        const productArray = [];
+        if (!productList || productList.length === 0) {
+            return productArray;
+        }
+
+        productList.forEach(function(product) {
+            {
+                var sanitizedProduct = parseProduct(
+                    getSanitizedCustomProperties(product)
+                );
+                productArray.push(sanitizedProduct);
+            }
+        });
+
+        return productArray;
+    }
+
+    function parseProduct(_product) {
+        var product = {};
+
+        for (var key in _product) {
+            switch (key) {
+                case 'Sku':
+                    product.Id = _product[key];
+                    break;
+                case 'CouponCode':
+                    product['Coupon Code'] = _product[key];
+                    break;
+                case 'TotalAmount':
+                    product['Total Product Amount'] = _product[key];
+                    break;
+                default:
+                    product[key] = _product[key];
+            }
+        }
+
+        return product;
+    }
+
+    function logExpandedNonPurchaseCommerceEvents(event) {
+        var listOfPageEvents = mParticle.eCommerce.expandCommerceEvent(event);
+        if (listOfPageEvents !== null) {
+            for (var i = 0; i < listOfPageEvents.length; i++) {
+                // finalLoopResult keeps track of if any logAppBoyEvent in this loop returns true or not
+                var finalLoopResult = false;
+                try {
+                    reportEvent = logAppboyEvent(listOfPageEvents[i]);
+                    if (reportEvent === true) {
+                        finalLoopResult = true;
+                    }
+                } catch (err) {
+                    return 'Error logging page event' + err.message;
+                }
+            }
+            reportEvent = finalLoopResult === true;
+        }
+        return reportEvent;
+    }
+
     function removeUserAttribute(key) {
         if (!(key in DefaultAttributeMethods)) {
             var sanitizedKey = getSanitizedValueForAppboy(key);
@@ -667,7 +909,7 @@ var constructor = function () {
         // 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) {
+        appboy.subscribeToInAppMessage(function(inAppMessage) {
             var shouldDisplay = true;
             var pushPrimer = false;
             if (inAppMessage instanceof appboy.InAppMessage) {
@@ -689,7 +931,7 @@ var constructor = function () {
                     if (inAppMessage.buttons[0] != null) {
                         // Prompt the user when the first button is clicked
                         inAppMessage.buttons[0].subscribeToClickedEvent(
-                            function () {
+                            function() {
                                 appboy.registerAppboyPushMessages();
                             }
                         );
@@ -737,19 +979,21 @@ var constructor = function () {
         if (!self.logger) {
             // create a logger
             self.logger = {
-                verbose: function () {},
+                verbose: function() {},
             };
         }
         // eslint-disable-line no-unused-vars
         mpCustomFlags = customFlags;
         try {
             forwarderSettings = settings;
+            bundleCommerceEventData =
+                forwarderSettings.bundleCommerceEventData === 'True';
             reportingService = service;
             // 30 min is Appboy default
             options.sessionTimeoutInSeconds =
                 forwarderSettings.ABKSessionTimeoutKey || 1800;
             options.sdkFlavor = 'mparticle';
-            options.enableHtmlInAppMessages =
+            options.allowUserSuppliedJavascript =
                 forwarderSettings.enableHtmlInAppMessages == 'True';
             options.doNotLoadFontAwesome =
                 forwarderSettings.doNotLoadFontAwesome == 'True';
@@ -910,7 +1154,7 @@ var constructor = function () {
         var nonMethodArguments = Array.prototype.slice.call(arguments, 1);
         msg += '\n' + method + ':\n';
 
-        nonMethodArguments.forEach(function (arg) {
+        nonMethodArguments.forEach(function(arg) {
             if (isObject(arg) || Array.isArray(arg)) {
                 msg += JSON.stringify(arg);
             } else {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@mparticle/web-braze-kit",
-    "version": "3.0.8",
+    "version": "3.0.9",
     "author": "mParticle Developers <developers@mparticle.com> (https://www.mparticle.com)",
     "description": "mParticle integration sdk for Braze",
     "main": "dist/BrazeKit.common.js",