feat(payments): PAYPAL-903 Product Page Banners (Cornerstone) - creat… (

bigcommerce#1948)

* feat(payments): PAYPAL-903 Product Page Banners (Cornerstone) - create custom price event

* feat(payments): PAYPAL-903 Product Page Banners (Cornerstone) - create custom price event
- CR fixes

Co-authored-by: Alex Saiannyi <67792608+bc-alexsaiannyi@users.noreply.github.com>

CHANGELOG.md

@@ -1,6 +1,7 @@
 # Changelog
 
 ## Draft
+- Added custom event for product price change on PDP page. [#1948](https://github.com/bigcommerce/cornerstone/pull/1948)
 - Fixed announcement of subscription message. [#1952](https://github.com/bigcommerce/cornerstone/pull/1952)
 - Error message on PLPs not announced by screen reader. [#1956](https://github.com/bigcommerce/cornerstone/pull/1956)
 - Add Play/Pause button to carousel. [#1944](https://github.com/bigcommerce/cornerstone/pull/1944)

assets/js/theme/common/product-details.js

@@ -7,6 +7,7 @@ import modalFactory, { showAlertModal, modalTypes } from '../global/modal';
 import { isEmpty, isPlainObject } from 'lodash';
 import { normalizeFormData } from './utils/api';
 import { isBrowserIE, convertIntoArray } from './utils/ie-helpers';
+import bannerUtils from './utils/banner-utils';
 
 export default class ProductDetails extends ProductDetailsBase {
     constructor($scope, context, productAttributesData = {}) {
@@ -40,6 +41,7 @@ export default class ProductDetails extends ProductDetailsBase {
             utils.api.productAttributes.optionChange($productId, $form.serialize(), 'products/bulk-discount-rates', optionChangeCallback);
         } else {
             this.updateProductAttributes(productAttributesData);
+            bannerUtils.dispatchProductBannerEvent(productAttributesData);
         }
 
         $productOptionsElement.show();
@@ -181,6 +183,7 @@ export default class ProductDetails extends ProductDetailsBase {
             const productAttributesContent = response.content || {};
             this.updateProductAttributes(productAttributesData);
             this.updateView(productAttributesData, productAttributesContent);
+            bannerUtils.dispatchProductBannerEvent(productAttributesData);
         });
     }
 

assets/js/theme/common/utils/banner-utils.js

@@ -0,0 +1,29 @@
+import { isBrowserIE } from './ie-helpers';
+
+const bannerUtils = {
+    dispatchProductBannerEvent: (productAttributes) => {
+        if (!productAttributes.price || isBrowserIE) return;
+
+        let price = 0;
+
+        if (!productAttributes.price.price_range) {
+            if (productAttributes.price.without_tax) {
+                price = productAttributes.price.without_tax.value;
+            }
+
+            if (productAttributes.price.with_tax) {
+                price = productAttributes.price.with_tax.value;
+            }
+        }
+
+        const evt = new CustomEvent('bigcommerce.productpricechange', {
+            detail: {
+                amount: price,
+            },
+        });
+
+        window.dispatchEvent(evt);
+    },
+};
+
+export default bannerUtils;