@mparticle/web-braze-kit 3.0.3 → 3.0.5

package/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 --
 
+#### 3.0.5 - 2022-10-20
+-   docs: Update README to alert developers about v4 kit upgrade date, add console warning to current CDN users (#15)
+
+#### 3.0.4 - 2022-09-06
+-   fix: Add Transaction Id to Purchase Commerce Events
+
 #### 3.0.3 - 2022-08-24
 -   feat: Add logging for debugging
 

package/README.md

@@ -1,50 +1,69 @@
 ![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/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.
+# Notice! Timeline for Breaking Changes for mParticle Web Braze Kit- 10/15/2022 - 2/15/2023
+Customers who use mParticle and Braze on their websites may require some code changes due to an update we are making to the mParticle Braze web kit.  The web kit, which previously used v3.5.0 of the Braze web SDK, will use Braze SDK 4.2.1 starting on 2/15/2023 on our CDN.
 
-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.
+* <b>The Braze web SDK has several breaking changes and if you load mParticle via snippet/CDN, you should <a href="#update-to-braze-sdk-version-4-from-version-3---10152022---2152023">follow these instructions to ensure your code continues to work when our changes go live to the CDN on 2/15/2023</a>.  If you self-host mParticle and the Braze Web Kit via npm, you can update sooner. Follow the instructions below whether you self-host or load mParticle via snippet/CDN.</b>.
+* <b>Note that if you are here looking at source code, the `master` branch will continue to contain Braze Web Kit version 3.X until 2/15/2023.  The `braze-v4-npm-master` branch currently contains the source code for v4.X, and this will be merged to `master` on 2/15/2023 to be available via CDN.  </b>
+* If you are using version 2 of the @mparticle/web-appboy-kit, you will need to <a href="#transition-from-mparticleweb-appboy-kit-to-mparticleweb-braze-kit">transition to @mparticle/web-braze-kit per the instructions here</a> before following the below instructions as well.
 
-**How do you know if your code is affected?**
+## Braze Web Kit Citical Updates and Timelines
 
-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.
+Braze occasionally makes breaking changes to their SDK, so if you call Braze directly in your code, you may have to update your code to ensure your website performs as expected after mParticle updates to the latest Braze SDKs.  This section communicates migration steps for customers to make to their codebase to ensure compatibility.
 
-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`
+Customers who implement mParticle via NPM and self-host our SDK can choose when they want to update their code and [@mParticle/web-braze-kit version](https://www.npmjs.com/package/@mparticle/web-braze-kit), but customers who implement mParticle via our snippet/CDN must pay close attention to the following timelines and instructions.
 
-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). 
+| mParticle Braze Web Kit Version |  Braze SDK Version Supported | Deadline/Date of CDN Release  | Link to Description |
+| ---|---|---|---|
+| v4.0.0 | v4.2.1 | 2/15/2023 | [Link](#update-to-braze-sdk-version-4-from-version-3---10152022---2152023) |
+| v3.0.4 | v3.5.0 | NA | [Link](#transition-from-mparticleweb-appboy-kit-to-mparticleweb-braze-kit) |
 
-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.
+### Update to Braze SDK Version 4 from Version 3 - 10/15/2022 - 2/15/2023
 
-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:
+Please review [Braze’s Changelog notes](https://www.braze.com/docs/developer_guide/platform_integration_guides/web/changelog#400) as well as Braze’s [migration guide](https://github.com/braze-inc/braze-web-sdk/blob/master/UPGRADE_GUIDE.md) between version 3 and 4 to understand these changes and what code updates are needed from your side.  The largest change is the move from class name `appboy` to `braze`. Braze also removed and renamed some APIs.  As a result, we are also updating our mParticle Braze web kit from 3.0.X to 4.0.X in order to support Braze’s Web SDK version 4.2.1.
+
+We plan to release the updated mParticle Braze Kit on two different time frames depending on how you load mParticle:
+* Customers who self-host mParticle via npm - You will be able to update manually from npm on 10/15/2022
+* Customers who load mParticle via snippet/CDN - We will push an update to the CDN on 2/15/2023 to make it automatically available.
+
+We want to allow our customers to take advantage of the latest from Braze, so we are releasing the kit update via npm earlier.  However, due to the sensitive nature of the breaking changes in Braze’s latest version, we want to give ample notice to all of our customers who are on the CDN since these customers will get the update automatically.  We want to respect the end-of-year code freezes that a lot of our customers have and allow plenty of time to make the required code changes.  Striking this balance is important for us, so if you are on the CDN but need the update sooner, you can [switch to self-hosting on npm](https://docs.mparticle.com/developers/sdk/web/self-hosting/).
+
+If you load mParticle via snippet/CDN, you will have to make changes to your codebase before February 15, 2023 to be compatible with both version 3 and version 4 of the Braze SDK to ensure your code continues to work. We recommend a three-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 following recommendations apply only to customers who load mParticle via snippet. Customers who self-host via npm can ignore step 1 and jump straight to step 3 after updating their mParticle Braze kit.  Note that this is only one example.  Everywhere you manually call `appboy` needs to be updated similar to the below, and please refer to the Braze Changelog and migration guide as referenced earlier:
+
+* Step 1: Legacy code sample. Find all the places where your code references the `appboy.display` namespace.  Braze has removed all instances of the `display` namespace:
 ```javascript
-let banner = new appboy.ab.Banner(‘test’);
+window.appboy.display.destroyFeed();
 ```
 
-Step 2: Rollout code sample to be used before June 14, 2022:
+Step 2: Roll out code changes to be used before February 15, 2023:
 ```javascript
-let banner;
-if (appboy.hasOwnProperty(‘ab’)) {
-    banner = new appboy.ab.Banner(‘test’);
-} else {
-    banner = new appboy.Banner(‘test’);
+	if (window.appboy) {
+window.appboy.display.destroyFeed();
+} else if (window.braze) {
+	window.braze.destroyFeed();
 }
 ```
-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:
+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:
 ```javascript
-let banner = new appboy.Banner(‘test’);
+window.braze.destroyFeed();
 ```
 
-**Push Notifications via service-worker.js**
-
-Additionally, if you are using 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 to ensure future compatibility.  In your `service-worker.js` file, update the code to reference `https://static.mparticle.com/sdk/js/braze/service-worker-3.5.0.js` instead of `https://static.mparticle.com/sdk/js/braze/service-worker.js`, ie:
+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:
 
 ```javascript
-self.importScripts('https://static.mparticle.com/sdk/js/braze/service-worker-3.5.0.js');
+self.imports('https://static.mparticle.com/sdk/js/braze/service-worker-4.2.0.js')
 ```
 
+### Transition from @mparticle/web-appboy-kit to @mparticle/web-braze-kit
+
+The legacy @mparticle/web-appboy-kit from npm includes version 2 of the Braze Web SDK.  As part of this update, we've created a new [Braze web kit repo](https://github.com/mparticle-integrations/mparticle-javascript-integration-braze) to replace our deprecated [Appboy web kit repo](https://github.com/mparticle-integrations/mparticle-javascript-integration-appboy).  If you are still using `@mparticle/web-appboy-kit`, you will need to consider the breaking changes Braze made between V2 and V3 of the Braze SDK (found [here](https://www.braze.com/docs/developer_guide/platform_integration_guides/web/changelog/#300)) as well as the instructions above to get from V2 to V4 of the Braze SDK.
+
+
+
 # License
 
 Copyright 2022 mParticle, Inc.
@@ -59,4 +78,4 @@ Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
-limitations under the License.
+limitations under the License.

package/dist/BrazeKit.common.js

@@ -305,7 +305,7 @@ window.appboy = appboy_min;
 
 var name = 'Appboy',
     moduleId = 28,
-    version = '3.0.3',
+    version = '3.0.5',
     MessageType = {
         PageView: 3,
         PageEvent: 4,
@@ -324,7 +324,7 @@ var clusterMapping = {
     EU02: 'sdk.fra-02.braze.eu',
 };
 
-var constructor = function() {
+var constructor = function () {
     var self = this,
         forwarderSettings,
         options = {},
@@ -358,7 +358,7 @@ var constructor = function() {
     function logPurchaseEvent(event) {
         var reportEvent = false;
         if (event.ProductAction.ProductList) {
-            event.ProductAction.ProductList.forEach(function(product) {
+            event.ProductAction.ProductList.forEach(function (product) {
                 if (product.Attributes == null) {
                     product.Attributes = {};
                 }
@@ -375,9 +375,12 @@ var constructor = function() {
                     );
                 }
 
-                var sanitizedProperties = getSanitizedCustomProperties(
-                    product.Attributes
-                );
+                var productAttributes = mergeObjects(product.Attributes, {
+                    'Transaction Id': event.ProductAction.TransactionId,
+                });
+
+                var sanitizedProperties =
+                    getSanitizedCustomProperties(productAttributes);
 
                 if (sanitizedProperties == null) {
                     return (
@@ -537,9 +540,8 @@ var constructor = function() {
         ) {
             reportEvent = logPurchaseEvent(event);
         } else if (event.EventDataType == MessageType.Commerce) {
-            var listOfPageEvents = mParticle.eCommerce.expandCommerceEvent(
-                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
@@ -663,7 +665,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) {
@@ -685,7 +687,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();
                             }
                         );
@@ -726,11 +728,14 @@ var constructor = function() {
         appName,
         customFlags
     ) {
+        console.warn(
+            'mParticle is upgrading the Braze web kit and Braze SDK that you are currently using from V3 to V4 on 2/15/2023.  You will AUTOMATICALLY receive this update if you see this message.  There are many breaking changes if you invoke deprecated Braze SDK methods in your code. Please see https://docs.mparticle.com/integrations/braze/event for more information and necessary upgrade steps to take to ensure code compatibility on 2/15/2023.'
+        );
         // 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() {},
+                verbose: function () {},
             };
         }
         // eslint-disable-line no-unused-vars
@@ -903,7 +908,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 {
@@ -958,6 +963,18 @@ if (window && window.mParticle && window.mParticle.addForwarder) {
     });
 }
 
+function mergeObjects() {
+    var resObj = {};
+    for (var i = 0; i < arguments.length; i += 1) {
+        var obj = arguments[i],
+            keys = Object.keys(obj);
+        for (var j = 0; j < keys.length; j += 1) {
+            resObj[keys[j]] = obj[keys[j]];
+        }
+    }
+    return resObj;
+}
+
 function isObject(val) {
     return (
         val != null && typeof val === 'object' && Array.isArray(val) === false
@@ -966,7 +983,7 @@ function isObject(val) {
 
 var BrazeKitDev = {
     register: register,
-    getVersion: function() {
+    getVersion: function () {
         return version;
     },
 };

package/package.json

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