@pelcro/react-pelcro-js 3.2.0-beta.20 → 3.2.0-beta.23

package/dist/index.cjs.js

@@ -6469,10 +6469,10 @@ 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}
@@ -9776,6 +9776,7 @@ function Email({
   initWithUserEmail = true,
   disableEmailValidation,
   store,
+  enableEmailEdit,
   ...otherProps
 }) {
   const {
@@ -9801,6 +9802,10 @@ function Email({
     }
 
     if (isEmailValid(email)) {
+      dispatch({
+        type: SET_EMAIL_ERROR,
+        payload: null
+      });
       return dispatch({
         type: SET_EMAIL,
         payload: email
@@ -9821,6 +9826,11 @@ function Email({
       }
     }
   }, [dispatch, email, finishedTyping]);
+  React.useEffect(() => {
+    if (!enableEmailEdit) {
+      loadEmailIntoField();
+    }
+  }, [enableEmailEdit]);
   React.useEffect(() => {
     handleInputChange(email);
   }, [finishedTyping, email, handleInputChange]); // Initialize email field with user's email
@@ -16522,6 +16532,7 @@ SubscriptionCreateModal.viewId = "subscription-create";
 var _window$Pelcro$user$r, _window$Pelcro$user$r2, _window$Pelcro$user$r3, _window$Pelcro$user$r4, _window$Pelcro$user$r5;
 const initialState$e = {
   email: (_window$Pelcro$user$r = window.Pelcro.user.read()) === null || _window$Pelcro$user$r === void 0 ? void 0 : _window$Pelcro$user$r.email,
+  emailError: null,
   firstName: (_window$Pelcro$user$r2 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r2 === void 0 ? void 0 : _window$Pelcro$user$r2.first_name,
   lastName: (_window$Pelcro$user$r3 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r3 === void 0 ? void 0 : _window$Pelcro$user$r3.last_name,
   displayName: (_window$Pelcro$user$r4 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r4 === void 0 ? void 0 : _window$Pelcro$user$r4.display_name,
@@ -16640,6 +16651,11 @@ const UserUpdateContainer = ({
           email: action.payload
         });
 
+      case SET_EMAIL_ERROR:
+        return lib_7({ ...state,
+          emailError: action.payload
+        });
+
       case SET_FIRST_NAME:
         return lib_7({ ...state,
           firstName: action.payload
@@ -16696,9 +16712,67 @@ const UserUpdateContainer = ({
   })));
 };
 
-const UserUpdateEmail = props => /*#__PURE__*/React__default['default'].createElement(Email, Object.assign({
-  store: store$e
-}, props));
+var _path$i;
+
+function _extends$k() { _extends$k = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$k.apply(this, arguments); }
+
+function SvgEdit(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$k({
+    className: "plc-w-6 plc-h-6",
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 20 20",
+    fill: "currentColor"
+  }, props), _path$i || (_path$i = /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zm-2.207 2.207L3 14.172V17h2.828l8.38-8.379-2.83-2.828z"
+  })));
+}
+
+const UserUpdateEmail = props => {
+  const {
+    dispatch,
+    state: {
+      email,
+      emailError
+    }
+  } = React.useContext(store$e);
+  const [enableEmailEdit, setEnableEmailEdit] = React.useState(false);
+  const {
+    t
+  } = useTranslation("userEdit");
+
+  const handleEnableEmailEdit = () => {
+    if (enableEmailEdit) {
+      dispatch({
+        type: SET_EMAIL,
+        payload: email
+      });
+      dispatch({
+        type: SET_EMAIL_ERROR,
+        payload: null
+      });
+      setEnableEmailEdit(false);
+    } else {
+      setEnableEmailEdit(true);
+    }
+  };
+
+  return /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "plc-flex plc-items-start plc-relative"
+  }, /*#__PURE__*/React__default['default'].createElement(Email, Object.assign({
+    disabled: !enableEmailEdit,
+    store: store$e,
+    label: t("labels.email"),
+    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-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),
+    id: "pelcro-user-update-picture-button",
+    onClick: handleEnableEmailEdit
+  })));
+};
 
 const UserUpdateButton = ({
   name,
@@ -16707,7 +16781,8 @@ const UserUpdateButton = ({
 }) => {
   const {
     state: {
-      buttonDisabled
+      buttonDisabled,
+      emailError
     },
     dispatch
   } = React.useContext(store$e);
@@ -16721,8 +16796,8 @@ const UserUpdateButton = ({
       });
       onClick === null || onClick === void 0 ? void 0 : onClick();
     },
-    disabled: buttonDisabled,
-    isLoading: buttonDisabled
+    disabled: buttonDisabled || emailError,
+    isLoading: buttonDisabled && !emailError
   }, otherProps), name !== null && name !== void 0 ? name : t("labels.submit"));
 };
 
@@ -16765,21 +16840,6 @@ const UserUpdatePhone = props => /*#__PURE__*/React__default['default'].createEl
 
 var userSolidIcon = "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20class%3D%22plc-h-5%20plc-w-5%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22white%22%3E%20%20%3Cpath%20transform%3D%22translate%280%2C2%29%22%20fill-rule%3D%22evenodd%22%20d%3D%22M10%209a3%203%200%20100-6%203%203%200%20000%206zm-7%209a7%207%200%201114%200H3z%22%20clip-rule%3D%22evenodd%22%20%2F%3E%3C%2Fsvg%3E";
 
-var _path$i;
-
-function _extends$k() { _extends$k = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$k.apply(this, arguments); }
-
-function SvgEdit(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$k({
-    className: "plc-w-6 plc-h-6",
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 20 20",
-    fill: "currentColor"
-  }, props), _path$i || (_path$i = /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zm-2.207 2.207L3 14.172V17h2.828l8.38-8.379-2.83-2.828z"
-  })));
-}
-
 const UserUpdateProfilePic = ({
   onClick,
   ...otherProps
@@ -16820,18 +16880,14 @@ const UserUpdateView = props => {
     className: "plc-mt-2 pelcro-form"
   }, /*#__PURE__*/React__default['default'].createElement(UserUpdateContainer, props, /*#__PURE__*/React__default['default'].createElement(AlertWithContext, null), /*#__PURE__*/React__default['default'].createElement(UserUpdateProfilePic, {
     onClick: props.onPictureClick
-  }), /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "plc-flex plc-items-start"
-  }, /*#__PURE__*/React__default['default'].createElement(UserUpdateEmail, {
-    label: t("labels.email"),
-    autoFocus: true
-  })), /*#__PURE__*/React__default['default'].createElement("div", {
+  }), /*#__PURE__*/React__default['default'].createElement(UserUpdateEmail, null), /*#__PURE__*/React__default['default'].createElement("div", {
     className: "plc-flex plc-items-start"
   }, /*#__PURE__*/React__default['default'].createElement(UserUpdateFirstName, {
     autoComplete: "first-name",
     id: "pelcro-input-first-name",
     errorId: "pelcro-input-first-name-error",
-    label: t("labels.firstName")
+    label: t("labels.firstName"),
+    autoFocus: true
   }), /*#__PURE__*/React__default['default'].createElement(UserUpdateLastName, {
     wrapperClassName: "plc-ml-3",
     autoComplete: "last-name",
@@ -19359,6 +19415,7 @@ const CartRemoveItemButton = ({
 
 const CartSubmit = ({
   name,
+  onClick,
   ...otherProps
 }) => {
   const {
@@ -19371,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"));
 };
@@ -19417,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
@@ -19424,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", {
@@ -19453,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"
@@ -19574,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,10 +6439,10 @@ 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}
@@ -9746,6 +9746,7 @@ function Email({
   initWithUserEmail = true,
   disableEmailValidation,
   store,
+  enableEmailEdit,
   ...otherProps
 }) {
   const {
@@ -9771,6 +9772,10 @@ function Email({
     }
 
     if (isEmailValid(email)) {
+      dispatch({
+        type: SET_EMAIL_ERROR,
+        payload: null
+      });
       return dispatch({
         type: SET_EMAIL,
         payload: email
@@ -9791,6 +9796,11 @@ function Email({
       }
     }
   }, [dispatch, email, finishedTyping]);
+  useEffect(() => {
+    if (!enableEmailEdit) {
+      loadEmailIntoField();
+    }
+  }, [enableEmailEdit]);
   useEffect(() => {
     handleInputChange(email);
   }, [finishedTyping, email, handleInputChange]); // Initialize email field with user's email
@@ -16492,6 +16502,7 @@ SubscriptionCreateModal.viewId = "subscription-create";
 var _window$Pelcro$user$r, _window$Pelcro$user$r2, _window$Pelcro$user$r3, _window$Pelcro$user$r4, _window$Pelcro$user$r5;
 const initialState$e = {
   email: (_window$Pelcro$user$r = window.Pelcro.user.read()) === null || _window$Pelcro$user$r === void 0 ? void 0 : _window$Pelcro$user$r.email,
+  emailError: null,
   firstName: (_window$Pelcro$user$r2 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r2 === void 0 ? void 0 : _window$Pelcro$user$r2.first_name,
   lastName: (_window$Pelcro$user$r3 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r3 === void 0 ? void 0 : _window$Pelcro$user$r3.last_name,
   displayName: (_window$Pelcro$user$r4 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r4 === void 0 ? void 0 : _window$Pelcro$user$r4.display_name,
@@ -16610,6 +16621,11 @@ const UserUpdateContainer = ({
           email: action.payload
         });
 
+      case SET_EMAIL_ERROR:
+        return lib_7({ ...state,
+          emailError: action.payload
+        });
+
       case SET_FIRST_NAME:
         return lib_7({ ...state,
           firstName: action.payload
@@ -16666,9 +16682,67 @@ const UserUpdateContainer = ({
   })));
 };
 
-const UserUpdateEmail = props => /*#__PURE__*/React__default.createElement(Email, Object.assign({
-  store: store$e
-}, props));
+var _path$i;
+
+function _extends$k() { _extends$k = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$k.apply(this, arguments); }
+
+function SvgEdit(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$k({
+    className: "plc-w-6 plc-h-6",
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 20 20",
+    fill: "currentColor"
+  }, props), _path$i || (_path$i = /*#__PURE__*/React.createElement("path", {
+    d: "M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zm-2.207 2.207L3 14.172V17h2.828l8.38-8.379-2.83-2.828z"
+  })));
+}
+
+const UserUpdateEmail = props => {
+  const {
+    dispatch,
+    state: {
+      email,
+      emailError
+    }
+  } = useContext(store$e);
+  const [enableEmailEdit, setEnableEmailEdit] = useState(false);
+  const {
+    t
+  } = useTranslation("userEdit");
+
+  const handleEnableEmailEdit = () => {
+    if (enableEmailEdit) {
+      dispatch({
+        type: SET_EMAIL,
+        payload: email
+      });
+      dispatch({
+        type: SET_EMAIL_ERROR,
+        payload: null
+      });
+      setEnableEmailEdit(false);
+    } else {
+      setEnableEmailEdit(true);
+    }
+  };
+
+  return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("div", {
+    className: "plc-flex plc-items-start plc-relative"
+  }, /*#__PURE__*/React__default.createElement(Email, Object.assign({
+    disabled: !enableEmailEdit,
+    store: store$e,
+    label: t("labels.email"),
+    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-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),
+    id: "pelcro-user-update-picture-button",
+    onClick: handleEnableEmailEdit
+  })));
+};
 
 const UserUpdateButton = ({
   name,
@@ -16677,7 +16751,8 @@ const UserUpdateButton = ({
 }) => {
   const {
     state: {
-      buttonDisabled
+      buttonDisabled,
+      emailError
     },
     dispatch
   } = useContext(store$e);
@@ -16691,8 +16766,8 @@ const UserUpdateButton = ({
       });
       onClick === null || onClick === void 0 ? void 0 : onClick();
     },
-    disabled: buttonDisabled,
-    isLoading: buttonDisabled
+    disabled: buttonDisabled || emailError,
+    isLoading: buttonDisabled && !emailError
   }, otherProps), name !== null && name !== void 0 ? name : t("labels.submit"));
 };
 
@@ -16735,21 +16810,6 @@ const UserUpdatePhone = props => /*#__PURE__*/React__default.createElement(Phone
 
 var userSolidIcon = "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20class%3D%22plc-h-5%20plc-w-5%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22white%22%3E%20%20%3Cpath%20transform%3D%22translate%280%2C2%29%22%20fill-rule%3D%22evenodd%22%20d%3D%22M10%209a3%203%200%20100-6%203%203%200%20000%206zm-7%209a7%207%200%201114%200H3z%22%20clip-rule%3D%22evenodd%22%20%2F%3E%3C%2Fsvg%3E";
 
-var _path$i;
-
-function _extends$k() { _extends$k = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$k.apply(this, arguments); }
-
-function SvgEdit(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$k({
-    className: "plc-w-6 plc-h-6",
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 20 20",
-    fill: "currentColor"
-  }, props), _path$i || (_path$i = /*#__PURE__*/React.createElement("path", {
-    d: "M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zm-2.207 2.207L3 14.172V17h2.828l8.38-8.379-2.83-2.828z"
-  })));
-}
-
 const UserUpdateProfilePic = ({
   onClick,
   ...otherProps
@@ -16790,18 +16850,14 @@ const UserUpdateView = props => {
     className: "plc-mt-2 pelcro-form"
   }, /*#__PURE__*/React__default.createElement(UserUpdateContainer, props, /*#__PURE__*/React__default.createElement(AlertWithContext, null), /*#__PURE__*/React__default.createElement(UserUpdateProfilePic, {
     onClick: props.onPictureClick
-  }), /*#__PURE__*/React__default.createElement("div", {
-    className: "plc-flex plc-items-start"
-  }, /*#__PURE__*/React__default.createElement(UserUpdateEmail, {
-    label: t("labels.email"),
-    autoFocus: true
-  })), /*#__PURE__*/React__default.createElement("div", {
+  }), /*#__PURE__*/React__default.createElement(UserUpdateEmail, null), /*#__PURE__*/React__default.createElement("div", {
     className: "plc-flex plc-items-start"
   }, /*#__PURE__*/React__default.createElement(UserUpdateFirstName, {
     autoComplete: "first-name",
     id: "pelcro-input-first-name",
     errorId: "pelcro-input-first-name-error",
-    label: t("labels.firstName")
+    label: t("labels.firstName"),
+    autoFocus: true
   }), /*#__PURE__*/React__default.createElement(UserUpdateLastName, {
     wrapperClassName: "plc-ml-3",
     autoComplete: "last-name",
@@ -19329,6 +19385,7 @@ const CartRemoveItemButton = ({
 
 const CartSubmit = ({
   name,
+  onClick,
   ...otherProps
 }) => {
   const {
@@ -19341,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"));
 };
@@ -19387,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
@@ -19394,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", {
@@ -19423,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"
@@ -19544,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,6 +2514,10 @@ in order to scope selectors under pelcro-root
   bottom: 1rem;
 }
 
+.pelcro-root .plc-top-7 {
+  top: 1.75rem;
+}
+
 .pelcro-root .plc-top-16 {
   top: 4rem;
 }
@@ -2555,6 +2559,11 @@ in order to scope selectors under pelcro-root
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.pelcro-root .focus\:plc-shadow-none:focus {
+  --tw-shadow: 0 0 #0000;
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 * {
   --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
   --tw-ring-offset-width: 0px;
@@ -2576,6 +2585,12 @@ in order to scope selectors under pelcro-root
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
+.pelcro-root .focus\:plc-ring-0:focus {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
 .pelcro-root .focus\:plc-ring-2:focus {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -2755,6 +2770,11 @@ in order to scope selectors under pelcro-root
   color: rgba(107, 114, 128, var(--tw-text-opacity));
 }
 
+.pelcro-root .hover\:plc-text-gray-900:hover {
+  --tw-text-opacity: 1;
+  color: rgba(17, 24, 39, var(--tw-text-opacity));
+}
+
 .pelcro-root .focus\:plc-text-black:focus {
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));

package/package.json

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