@pelcro/react-pelcro-js 3.2.0-beta.21 → 3.2.0-beta.24

package/dist/index.cjs.js

@@ -6469,16 +6469,16 @@ if (process.env.NODE_ENV === "development") {
 /**
  * List of zero-decimal currencies.
  * @see https://stripe.com/docs/currencies#zero-decimal
- * 
+ *
  */
 
-const ZERO_DECIMAL_CURRENCIES = ['BIF', 'CLP', 'DJF', 'GNF', 'JPY', 'KMF', 'KRW', 'MGA', 'PYG', 'RWF', 'UGX', 'VND', 'VUV', 'XAF', 'XOF', 'XPF'];
+const ZERO_DECIMAL_CURRENCIES = ["BIF", "CLP", "DJF", "GNF", "JPY", "KMF", "KRW", "MGA", "PYG", "RWF", "UGX", "VND", "VUV", "XAF", "XOF", "XPF"];
 /**
  * @param {string}
  * @return {boolean}
  */
 
-const isCurrencyZeroDecimal = currency => ZERO_DECIMAL_CURRENCIES.includes(currency);
+const isCurrencyZeroDecimal = currency => ZERO_DECIMAL_CURRENCIES.includes(currency.toUpperCase());
 const sortCountries = countries => {
   const sortable = [];
   delete countries.CA;
@@ -16765,7 +16765,7 @@ const UserUpdateEmail = props => {
     enableEmailEdit: enableEmailEdit
   }, props)), /*#__PURE__*/React__default['default'].createElement(Button, {
     variant: "icon",
-    className: "plc-absolute  plc-rounded-none plc-text-gray-500 plc-w-10 plc-h-10 plc-top-6 plc-right-0 hover:plc-text-gray-900 hover:plc-bg-transparent focus:plc-ring-0 focus:plc-shadow-none",
+    className: "plc-absolute  plc-rounded-none plc-text-gray-500 plc-w-10 plc-h-10 plc-top-7 plc-right-0 hover:plc-text-gray-900 hover:plc-bg-transparent focus:plc-ring-0 focus:plc-shadow-none",
     icon: enableEmailEdit ? /*#__PURE__*/React__default['default'].createElement(SvgXIcon, {
       className: "plc-w-6"
     }) : /*#__PURE__*/React__default['default'].createElement(SvgEdit, null),
@@ -19415,6 +19415,7 @@ const CartRemoveItemButton = ({
 
 const CartSubmit = ({
   name,
+  onClick,
   ...otherProps
 }) => {
   const {
@@ -19427,9 +19428,12 @@ const CartSubmit = ({
     t
   } = useTranslation("cart");
   return /*#__PURE__*/React__default['default'].createElement(Button, Object.assign({}, otherProps, {
-    onClick: () => dispatch({
-      type: HANDLE_SUBMIT
-    }),
+    onClick: () => {
+      dispatch({
+        type: HANDLE_SUBMIT
+      });
+      onClick === null || onClick === void 0 ? void 0 : onClick();
+    },
     disabled: buttonDisabled
   }), name !== null && name !== void 0 ? name : t("confirm"));
 };
@@ -19473,6 +19477,53 @@ 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
@@ -19480,6 +19531,9 @@ const CartView = props => {
   const {
     t
   } = useTranslation("cart");
+  React.useEffect(() => {
+    document.dispatchEvent(cartOpened(cartItems));
+  }, []);
   return /*#__PURE__*/React__default['default'].createElement("div", {
     id: "pelcro-cart-view"
   }, /*#__PURE__*/React__default['default'].createElement("div", {
@@ -19509,7 +19563,8 @@ const CartView = props => {
     }, calcAndFormatItemsTotal([item], item.currency)), /*#__PURE__*/React__default['default'].createElement(CartRemoveItemButton, {
       itemId: item.id,
       id: `pelcro-remove-product-${item.id}`,
-      "aria-label": "remove item from cart"
+      "aria-label": "remove item from cart",
+      onClick: () => document.dispatchEvent(cartItemRemoved(item))
     }));
   })), /*#__PURE__*/React__default['default'].createElement("div", {
     className: "plc-flex plc-items-center plc-justify-end plc-pt-2 plc-mt-2 plc-font-bold plc-border-t plc-border-gray-400 pelcro-cart-total-wrapper"
@@ -19630,7 +19685,8 @@ const ShopView = () => {
       className: "plc-font-bold pelcro-shop-product-description"
     }, item.description), /*#__PURE__*/React__default['default'].createElement(ShopSelectProductButton, {
       itemId: item.id,
-      className: "plc-mt-2"
+      className: "plc-mt-2",
+      onClick: () => document.dispatchEvent(cartItemAdded(item))
     }), /*#__PURE__*/React__default['default'].createElement(ShopPurchaseButton, {
       itemId: item.id,
       className: "plc-mt-2"

package/dist/index.esm.js

@@ -6439,16 +6439,16 @@ if (process.env.NODE_ENV === "development") {
 /**
  * List of zero-decimal currencies.
  * @see https://stripe.com/docs/currencies#zero-decimal
- * 
+ *
  */
 
-const ZERO_DECIMAL_CURRENCIES = ['BIF', 'CLP', 'DJF', 'GNF', 'JPY', 'KMF', 'KRW', 'MGA', 'PYG', 'RWF', 'UGX', 'VND', 'VUV', 'XAF', 'XOF', 'XPF'];
+const ZERO_DECIMAL_CURRENCIES = ["BIF", "CLP", "DJF", "GNF", "JPY", "KMF", "KRW", "MGA", "PYG", "RWF", "UGX", "VND", "VUV", "XAF", "XOF", "XPF"];
 /**
  * @param {string}
  * @return {boolean}
  */
 
-const isCurrencyZeroDecimal = currency => ZERO_DECIMAL_CURRENCIES.includes(currency);
+const isCurrencyZeroDecimal = currency => ZERO_DECIMAL_CURRENCIES.includes(currency.toUpperCase());
 const sortCountries = countries => {
   const sortable = [];
   delete countries.CA;
@@ -16735,7 +16735,7 @@ const UserUpdateEmail = props => {
     enableEmailEdit: enableEmailEdit
   }, props)), /*#__PURE__*/React__default.createElement(Button, {
     variant: "icon",
-    className: "plc-absolute  plc-rounded-none plc-text-gray-500 plc-w-10 plc-h-10 plc-top-6 plc-right-0 hover:plc-text-gray-900 hover:plc-bg-transparent focus:plc-ring-0 focus:plc-shadow-none",
+    className: "plc-absolute  plc-rounded-none plc-text-gray-500 plc-w-10 plc-h-10 plc-top-7 plc-right-0 hover:plc-text-gray-900 hover:plc-bg-transparent focus:plc-ring-0 focus:plc-shadow-none",
     icon: enableEmailEdit ? /*#__PURE__*/React__default.createElement(SvgXIcon, {
       className: "plc-w-6"
     }) : /*#__PURE__*/React__default.createElement(SvgEdit, null),
@@ -19385,6 +19385,7 @@ const CartRemoveItemButton = ({
 
 const CartSubmit = ({
   name,
+  onClick,
   ...otherProps
 }) => {
   const {
@@ -19397,9 +19398,12 @@ const CartSubmit = ({
     t
   } = useTranslation("cart");
   return /*#__PURE__*/React__default.createElement(Button, Object.assign({}, otherProps, {
-    onClick: () => dispatch({
-      type: HANDLE_SUBMIT
-    }),
+    onClick: () => {
+      dispatch({
+        type: HANDLE_SUBMIT
+      });
+      onClick === null || onClick === void 0 ? void 0 : onClick();
+    },
     disabled: buttonDisabled
   }), name !== null && name !== void 0 ? name : t("confirm"));
 };
@@ -19443,6 +19447,53 @@ 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
@@ -19450,6 +19501,9 @@ const CartView = props => {
   const {
     t
   } = useTranslation("cart");
+  useEffect(() => {
+    document.dispatchEvent(cartOpened(cartItems));
+  }, []);
   return /*#__PURE__*/React__default.createElement("div", {
     id: "pelcro-cart-view"
   }, /*#__PURE__*/React__default.createElement("div", {
@@ -19479,7 +19533,8 @@ const CartView = props => {
     }, calcAndFormatItemsTotal([item], item.currency)), /*#__PURE__*/React__default.createElement(CartRemoveItemButton, {
       itemId: item.id,
       id: `pelcro-remove-product-${item.id}`,
-      "aria-label": "remove item from cart"
+      "aria-label": "remove item from cart",
+      onClick: () => document.dispatchEvent(cartItemRemoved(item))
     }));
   })), /*#__PURE__*/React__default.createElement("div", {
     className: "plc-flex plc-items-center plc-justify-end plc-pt-2 plc-mt-2 plc-font-bold plc-border-t plc-border-gray-400 pelcro-cart-total-wrapper"
@@ -19600,7 +19655,8 @@ const ShopView = () => {
       className: "plc-font-bold pelcro-shop-product-description"
     }, item.description), /*#__PURE__*/React__default.createElement(ShopSelectProductButton, {
       itemId: item.id,
-      className: "plc-mt-2"
+      className: "plc-mt-2",
+      onClick: () => document.dispatchEvent(cartItemAdded(item))
     }), /*#__PURE__*/React__default.createElement(ShopPurchaseButton, {
       itemId: item.id,
       className: "plc-mt-2"

package/dist/pelcro.css

@@ -2514,8 +2514,8 @@ in order to scope selectors under pelcro-root
   bottom: 1rem;
 }
 
-.pelcro-root .plc-top-6 {
-  top: 1.5rem;
+.pelcro-root .plc-top-7 {
+  top: 1.75rem;
 }
 
 .pelcro-root .plc-top-16 {

package/package.json

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