@pelcro/react-pelcro-js 3.2.0-beta.29 → 3.2.0-beta.31

package/dist/index.cjs.js

@@ -6849,6 +6849,53 @@ var ReactGA = _objectSpread({}, Defaults, {
   OutboundLink: OutboundLink
 });
 
+// Polyfill
+(() => {
+  if (typeof window.CustomEvent === "function") return false;
+
+  function CustomEvent(event, params = {
+    bubbles: false,
+    cancelable: false,
+    detail: undefined
+  }) {
+    const evt = document.createEvent("CustomEvent");
+    evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
+    return evt;
+  }
+
+  CustomEvent.prototype = window.Event.prototype;
+  window.CustomEvent = CustomEvent;
+})();
+/**
+ * Should fire when the cart is opened and expects the cartItems inside the card to be sent
+ */
+
+
+const cartOpened = detail => createCustomEvent("PelcroElementsCartOpened", detail);
+/**
+ * Should fire when an item added to the cart and expects the added item to be sent
+ */
+
+const cartItemAdded = detail => createCustomEvent("PelcroElementsCartItemAdded", detail);
+/**
+ * Should fire when an item removed from the cart and expects the removed item to be sent
+ */
+
+const cartItemRemoved = detail => createCustomEvent("PelcroElementsCartItemRemoved", detail);
+/**
+ * Check if the browser support custom events
+ */
+
+function createCustomEvent(name, detail) {
+  try {
+    return new CustomEvent(name, {
+      detail
+    });
+  } catch (e) {
+    console.warn("Pelcro - Events are not supported in the browser");
+  }
+}
+
 class PelcroActions {
   constructor(storeSetter, storeGetter) {
     _defineProperty$3(this, "resetState", () => {
@@ -7010,14 +7057,16 @@ class PelcroActions {
       switchView("login");
     });
 
-    _defineProperty$3(this, "addToCart", itemSkuId => {
-      const itemToAdd = window.Pelcro.ecommerce.products.getBySkuId(Number(itemSkuId));
+    _defineProperty$3(this, "addToCart", item => {
+      const itemToAdd = window.Pelcro.ecommerce.products.getBySkuId(Number(item.id));
 
       if (!itemToAdd) {
         console.error("invalid item SKU id");
         return false;
-      }
+      } //Dispatch PelcroElementsCartItemAdded event when the item got added successfully
+
 
+      document.dispatchEvent(cartItemAdded(item));
       const {
         cartItems
       } = this.get();
@@ -20523,53 +20572,6 @@ const CartTotalPrice = () => {
   return null;
 };
 
-// Polyfill
-(() => {
-  if (typeof window.CustomEvent === "function") return false;
-
-  function CustomEvent(event, params = {
-    bubbles: false,
-    cancelable: false,
-    detail: undefined
-  }) {
-    const evt = document.createEvent("CustomEvent");
-    evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
-    return evt;
-  }
-
-  CustomEvent.prototype = window.Event.prototype;
-  window.CustomEvent = CustomEvent;
-})();
-/**
- * Should fire when the cart is opened and expects the cartItems inside the card to be sent
- */
-
-
-const cartOpened = detail => createCustomEvent("PelcroElementsCartOpened", detail);
-/**
- * Should fire when an item added to the cart and expects the added item to be sent
- */
-
-const cartItemAdded = detail => createCustomEvent("PelcroElementsCartItemAdded", detail);
-/**
- * Should fire when an item removed from the cart and expects the removed item to be sent
- */
-
-const cartItemRemoved = detail => createCustomEvent("PelcroElementsCartItemRemoved", detail);
-/**
- * Check if the browser support custom events
- */
-
-function createCustomEvent(name, detail) {
-  try {
-    return new CustomEvent(name, {
-      detail
-    });
-  } catch (e) {
-    console.warn("Pelcro - Events are not supported in the browser");
-  }
-}
-
 const CartView = props => {
   const {
     cartItems
@@ -20660,7 +20662,7 @@ const CartModal = ({
 CartModal.viewId = "cart";
 
 const ShopSelectProductButton = ({
-  itemId,
+  item,
   onClick,
   ...otherProps
 }) => {
@@ -20676,7 +20678,7 @@ const ShopSelectProductButton = ({
   const handleClick = () => {
     setDisabled(true);
     setTextContent(t("buttons.added"));
-    addToCart(itemId);
+    addToCart(item);
     onClick === null || onClick === void 0 ? void 0 : onClick();
     setTimeout(() => {
       setDisabled(false);
@@ -20685,8 +20687,8 @@ const ShopSelectProductButton = ({
   };
 
   return /*#__PURE__*/React__default['default'].createElement(Button, Object.assign({
-    "data-sku-id": itemId,
-    id: `pelcro-shop-select-${itemId}`,
+    "data-sku-id": item.id,
+    id: `pelcro-shop-select-${item.id}`,
     onClick: handleClick,
     disabled: disabled
   }, otherProps), textContent);
@@ -20730,9 +20732,8 @@ const ShopView = () => {
     }, item.name), /*#__PURE__*/React__default['default'].createElement("p", {
       className: "plc-font-bold pelcro-shop-product-description"
     }, item.description), /*#__PURE__*/React__default['default'].createElement(ShopSelectProductButton, {
-      itemId: item.id,
-      className: "plc-mt-2",
-      onClick: () => document.dispatchEvent(cartItemAdded(item))
+      item: item,
+      className: "plc-mt-2"
     }), /*#__PURE__*/React__default['default'].createElement(ShopPurchaseButton, {
       itemId: item.id,
       className: "plc-mt-2"

package/dist/index.esm.js

@@ -6819,6 +6819,53 @@ var ReactGA = _objectSpread({}, Defaults, {
   OutboundLink: OutboundLink
 });
 
+// Polyfill
+(() => {
+  if (typeof window.CustomEvent === "function") return false;
+
+  function CustomEvent(event, params = {
+    bubbles: false,
+    cancelable: false,
+    detail: undefined
+  }) {
+    const evt = document.createEvent("CustomEvent");
+    evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
+    return evt;
+  }
+
+  CustomEvent.prototype = window.Event.prototype;
+  window.CustomEvent = CustomEvent;
+})();
+/**
+ * Should fire when the cart is opened and expects the cartItems inside the card to be sent
+ */
+
+
+const cartOpened = detail => createCustomEvent("PelcroElementsCartOpened", detail);
+/**
+ * Should fire when an item added to the cart and expects the added item to be sent
+ */
+
+const cartItemAdded = detail => createCustomEvent("PelcroElementsCartItemAdded", detail);
+/**
+ * Should fire when an item removed from the cart and expects the removed item to be sent
+ */
+
+const cartItemRemoved = detail => createCustomEvent("PelcroElementsCartItemRemoved", detail);
+/**
+ * Check if the browser support custom events
+ */
+
+function createCustomEvent(name, detail) {
+  try {
+    return new CustomEvent(name, {
+      detail
+    });
+  } catch (e) {
+    console.warn("Pelcro - Events are not supported in the browser");
+  }
+}
+
 class PelcroActions {
   constructor(storeSetter, storeGetter) {
     _defineProperty$3(this, "resetState", () => {
@@ -6980,14 +7027,16 @@ class PelcroActions {
       switchView("login");
     });
 
-    _defineProperty$3(this, "addToCart", itemSkuId => {
-      const itemToAdd = window.Pelcro.ecommerce.products.getBySkuId(Number(itemSkuId));
+    _defineProperty$3(this, "addToCart", item => {
+      const itemToAdd = window.Pelcro.ecommerce.products.getBySkuId(Number(item.id));
 
       if (!itemToAdd) {
         console.error("invalid item SKU id");
         return false;
-      }
+      } //Dispatch PelcroElementsCartItemAdded event when the item got added successfully
+
 
+      document.dispatchEvent(cartItemAdded(item));
       const {
         cartItems
       } = this.get();
@@ -20493,53 +20542,6 @@ const CartTotalPrice = () => {
   return null;
 };
 
-// Polyfill
-(() => {
-  if (typeof window.CustomEvent === "function") return false;
-
-  function CustomEvent(event, params = {
-    bubbles: false,
-    cancelable: false,
-    detail: undefined
-  }) {
-    const evt = document.createEvent("CustomEvent");
-    evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
-    return evt;
-  }
-
-  CustomEvent.prototype = window.Event.prototype;
-  window.CustomEvent = CustomEvent;
-})();
-/**
- * Should fire when the cart is opened and expects the cartItems inside the card to be sent
- */
-
-
-const cartOpened = detail => createCustomEvent("PelcroElementsCartOpened", detail);
-/**
- * Should fire when an item added to the cart and expects the added item to be sent
- */
-
-const cartItemAdded = detail => createCustomEvent("PelcroElementsCartItemAdded", detail);
-/**
- * Should fire when an item removed from the cart and expects the removed item to be sent
- */
-
-const cartItemRemoved = detail => createCustomEvent("PelcroElementsCartItemRemoved", detail);
-/**
- * Check if the browser support custom events
- */
-
-function createCustomEvent(name, detail) {
-  try {
-    return new CustomEvent(name, {
-      detail
-    });
-  } catch (e) {
-    console.warn("Pelcro - Events are not supported in the browser");
-  }
-}
-
 const CartView = props => {
   const {
     cartItems
@@ -20630,7 +20632,7 @@ const CartModal = ({
 CartModal.viewId = "cart";
 
 const ShopSelectProductButton = ({
-  itemId,
+  item,
   onClick,
   ...otherProps
 }) => {
@@ -20646,7 +20648,7 @@ const ShopSelectProductButton = ({
   const handleClick = () => {
     setDisabled(true);
     setTextContent(t("buttons.added"));
-    addToCart(itemId);
+    addToCart(item);
     onClick === null || onClick === void 0 ? void 0 : onClick();
     setTimeout(() => {
       setDisabled(false);
@@ -20655,8 +20657,8 @@ const ShopSelectProductButton = ({
   };
 
   return /*#__PURE__*/React__default.createElement(Button, Object.assign({
-    "data-sku-id": itemId,
-    id: `pelcro-shop-select-${itemId}`,
+    "data-sku-id": item.id,
+    id: `pelcro-shop-select-${item.id}`,
     onClick: handleClick,
     disabled: disabled
   }, otherProps), textContent);
@@ -20700,9 +20702,8 @@ const ShopView = () => {
     }, item.name), /*#__PURE__*/React__default.createElement("p", {
       className: "plc-font-bold pelcro-shop-product-description"
     }, item.description), /*#__PURE__*/React__default.createElement(ShopSelectProductButton, {
-      itemId: item.id,
-      className: "plc-mt-2",
-      onClick: () => document.dispatchEvent(cartItemAdded(item))
+      item: item,
+      className: "plc-mt-2"
     }), /*#__PURE__*/React__default.createElement(ShopPurchaseButton, {
       itemId: item.id,
       className: "plc-mt-2"

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pelcro/react-pelcro-js",
   "description": "Pelcro's React UI Elements",
-  "version": "3.2.0-beta.29",
+  "version": "3.2.0-beta.31",
   "license": "MIT",
   "private": false,
   "main": "dist/index.cjs.js",