@pelcro/react-pelcro-js 3.26.0-beta.65 → 3.26.0-beta.66

package/dist/index.cjs.js

@@ -7647,6 +7647,7 @@ function _defineProperty$3(obj, key, value) {
   return obj;
 }
 
+/* eslint-disable valid-jsdoc */
 // Polyfill
 (() => {
   if (typeof window.CustomEvent === "function") return false;
@@ -7678,6 +7679,17 @@ const cartItemAdded = detail => createCustomEvent("PelcroElementsCartItemAdded",
  * Should fire when an item removed from the cart and expects the removed item to be sent
  */
 const cartItemRemoved = detail => createCustomEvent("PelcroElementsCartItemRemoved", detail);
+const displayLogin = detail => createCustomEvent("PelcroLoginDisplayed", detail);
+const displayRegister = detail => createCustomEvent("PelcroRegisterDisplayed", detail);
+const displaySelect = detail => createCustomEvent("PelcroSelectDisplayed", detail);
+const displayAddressCreate = detail => createCustomEvent("PelcroAddressCreateDisplayed", detail);
+const displayPaymentForm = detail => createCustomEvent("PelcroPaymentFormDisplayed", detail);
+const submitLogin = detail => createCustomEvent("PelcroLoginSubmitted", detail);
+const submitRegister = detail => createCustomEvent("PelcroRegisterSubmitted", detail);
+const submitSelect = detail => createCustomEvent("PelcroSelectSubmitted", detail);
+const submitAddressCreate = detail => createCustomEvent("PelcroAddressCreateSubmitted", detail);
+const submitAddressSelect = detail => createCustomEvent("PelcroAddressSelectSubmitted", detail);
+const submitPaymentForm = detail => createCustomEvent("PelcroPaymentFormSubmitted", detail);
 
 /**
  * Check if the browser support custom events
@@ -13119,8 +13131,14 @@ const LoginContainer = _ref => {
             content: getErrorMessages(err)
           }
         });
+        document.dispatchEvent(submitLogin({
+          submissionSuccess: false
+        }));
         onFailure(err);
       } else {
+        document.dispatchEvent(submitLogin({
+          submissionSuccess: true
+        }));
         onSuccess(res);
         if (enableReactGA4) {
           ReactGA4.event("Logged in", {
@@ -13801,8 +13819,14 @@ const RegisterContainer = _ref => {
               content: getErrorMessages(err)
             }
           });
+          document.dispatchEvent(submitRegister({
+            submissionSuccess: false
+          }));
           onFailure(err);
         } else {
+          document.dispatchEvent(submitRegister({
+            submissionSuccess: true
+          }));
           onSuccess(res);
         }
       });
@@ -14632,6 +14656,12 @@ function LoginModal(_ref) {
   const onPasswordlessRequest = () => {
     switchView("passwordless-request");
   };
+  React.useEffect(() => {
+    document.dispatchEvent(displayLogin({
+      product,
+      plan
+    }));
+  }, []);
   return /*#__PURE__*/React__default['default'].createElement(Modal, {
     id: "pelcro-login-modal",
     onDisplay: onDisplay,
@@ -15248,6 +15278,12 @@ function RegisterModal(props) {
     }
     return resetView();
   };
+  React.useEffect(() => {
+    document.dispatchEvent(displayRegister({
+      product,
+      plan
+    }));
+  }, []);
   return /*#__PURE__*/React__default['default'].createElement(Modal, {
     id: "pelcro-register-modal",
     onDisplay: props === null || props === void 0 ? void 0 : props.onDisplay,
@@ -15320,6 +15356,12 @@ function SelectModalWithHook(props) {
   } = usePelcro();
   const entitlementsProtectedElements = document.querySelectorAll("[data-pelcro-entitlements]");
   const entitlements = entitlementsProtectedElements.length > 0 ? getEntitlementsFromElem(entitlementsProtectedElements[0]) : null;
+  React.useEffect(() => {
+    document.dispatchEvent(displaySelect({
+      product,
+      plan
+    }));
+  }, []);
   return /*#__PURE__*/React__default['default'].createElement(SelectModalWithTrans, {
     isGift: isGift,
     disableGifting: isRenewingGift,
@@ -15605,7 +15647,8 @@ class SelectModal extends React.Component {
       this.props.setProductAndPlan(this.state.product, this.state.plan, this.state.isGift);
       const {
         product,
-        isGift
+        isGift,
+        plan
       } = this.state;
       const {
         setView
@@ -15615,6 +15658,11 @@ class SelectModal extends React.Component {
         switchToAddressView,
         switchToPaymentView
       } = usePelcro.getStore();
+      document.dispatchEvent(submitSelect({
+        submissionSuccess: true,
+        product,
+        plan
+      }));
       if (!isAuthenticated) {
         return setView("register");
       }
@@ -24811,20 +24859,37 @@ function SubscriptionCreateModal(_ref) {
   } = _ref;
   useTranslation("common");
   const {
-    switchView
+    switchView,
+    product,
+    plan
   } = usePelcro();
   const onSuccess = res => {
     var _otherProps$onSuccess;
     (_otherProps$onSuccess = otherProps.onSuccess) === null || _otherProps$onSuccess === void 0 ? void 0 : _otherProps$onSuccess.call(otherProps, res);
     trackSubscriptionOnGA();
+    document.dispatchEvent(submitPaymentForm({
+      submissionSuccess: true
+    }));
     return switchView("subscription-success");
   };
+  const onFailure = () => {
+    return document.dispatchEvent(submitPaymentForm({
+      submissionSuccess: false
+    }));
+  };
+  React.useEffect(() => {
+    document.dispatchEvent(displayPaymentForm({
+      product,
+      plan
+    }));
+  }, []);
   return /*#__PURE__*/React__default['default'].createElement(Modal, {
     id: "pelcro-subscription-create-modal",
     onDisplay: onDisplay,
     onClose: onClose
   }, /*#__PURE__*/React__default['default'].createElement(ModalBody, null, /*#__PURE__*/React__default['default'].createElement(SubscriptionCreateView, Object.assign({}, otherProps, {
-    onSuccess: onSuccess
+    onSuccess: onSuccess,
+    onFailure: onFailure
   }))), /*#__PURE__*/React__default['default'].createElement(ModalFooter, null, /*#__PURE__*/React__default['default'].createElement(Authorship, null)));
 }
 SubscriptionCreateModal.viewId = "subscription-create";
@@ -26205,12 +26270,18 @@ const AddressCreateContainer = _ref => {
             content: getErrorMessages(err)
           }
         });
+        document.dispatchEvent(submitAddressCreate({
+          submissionSuccess: false
+        }));
         onFailure(err);
         return dispatch({
           type: LOADING,
           payload: false
         });
       }
+      document.dispatchEvent(submitAddressCreate({
+        submissionSuccess: true
+      }));
       const newAddressId = String(getNewlyCreatedAddress(res.data.addresses).id);
       if (selectedMembership) {
         dispatch({
@@ -26831,7 +26902,9 @@ const AddressCreateModal = _ref => {
   const {
     switchView,
     switchToPaymentView,
-    resetView
+    resetView,
+    product,
+    plan
   } = usePelcro();
   const onSuccess = newAddressId => {
     var _otherProps$onSuccess;
@@ -26850,6 +26923,12 @@ const AddressCreateModal = _ref => {
     (_otherProps$onMembers = otherProps.onMembershipAdressUpdateSuccess) === null || _otherProps$onMembers === void 0 ? void 0 : _otherProps$onMembers.call(otherProps);
     resetView();
   };
+  React.useEffect(() => {
+    document.dispatchEvent(displayAddressCreate({
+      product,
+      plan
+    }));
+  }, []);
   return /*#__PURE__*/React__default['default'].createElement(Modal, {
     id: "pelcro-address-create-modal",
     onDisplay: onDisplay,
@@ -29780,6 +29859,9 @@ const AddressSelectContainer = _ref => {
         return onGiftRedemptionSuccess(res);
       });
     }
+    document.dispatchEvent(submitAddressSelect({
+      submissionSuccess: true
+    }));
     onSuccess(selectedAddressId);
   };
   const [state, dispatch] = useReducerWithSideEffects((state, action) => {

package/dist/index.esm.js

@@ -7617,6 +7617,7 @@ function _defineProperty$3(obj, key, value) {
   return obj;
 }
 
+/* eslint-disable valid-jsdoc */
 // Polyfill
 (() => {
   if (typeof window.CustomEvent === "function") return false;
@@ -7648,6 +7649,17 @@ const cartItemAdded = detail => createCustomEvent("PelcroElementsCartItemAdded",
  * Should fire when an item removed from the cart and expects the removed item to be sent
  */
 const cartItemRemoved = detail => createCustomEvent("PelcroElementsCartItemRemoved", detail);
+const displayLogin = detail => createCustomEvent("PelcroLoginDisplayed", detail);
+const displayRegister = detail => createCustomEvent("PelcroRegisterDisplayed", detail);
+const displaySelect = detail => createCustomEvent("PelcroSelectDisplayed", detail);
+const displayAddressCreate = detail => createCustomEvent("PelcroAddressCreateDisplayed", detail);
+const displayPaymentForm = detail => createCustomEvent("PelcroPaymentFormDisplayed", detail);
+const submitLogin = detail => createCustomEvent("PelcroLoginSubmitted", detail);
+const submitRegister = detail => createCustomEvent("PelcroRegisterSubmitted", detail);
+const submitSelect = detail => createCustomEvent("PelcroSelectSubmitted", detail);
+const submitAddressCreate = detail => createCustomEvent("PelcroAddressCreateSubmitted", detail);
+const submitAddressSelect = detail => createCustomEvent("PelcroAddressSelectSubmitted", detail);
+const submitPaymentForm = detail => createCustomEvent("PelcroPaymentFormSubmitted", detail);
 
 /**
  * Check if the browser support custom events
@@ -13089,8 +13101,14 @@ const LoginContainer = _ref => {
             content: getErrorMessages(err)
           }
         });
+        document.dispatchEvent(submitLogin({
+          submissionSuccess: false
+        }));
         onFailure(err);
       } else {
+        document.dispatchEvent(submitLogin({
+          submissionSuccess: true
+        }));
         onSuccess(res);
         if (enableReactGA4) {
           ReactGA4.event("Logged in", {
@@ -13771,8 +13789,14 @@ const RegisterContainer = _ref => {
               content: getErrorMessages(err)
             }
           });
+          document.dispatchEvent(submitRegister({
+            submissionSuccess: false
+          }));
           onFailure(err);
         } else {
+          document.dispatchEvent(submitRegister({
+            submissionSuccess: true
+          }));
           onSuccess(res);
         }
       });
@@ -14602,6 +14626,12 @@ function LoginModal(_ref) {
   const onPasswordlessRequest = () => {
     switchView("passwordless-request");
   };
+  useEffect(() => {
+    document.dispatchEvent(displayLogin({
+      product,
+      plan
+    }));
+  }, []);
   return /*#__PURE__*/React__default.createElement(Modal, {
     id: "pelcro-login-modal",
     onDisplay: onDisplay,
@@ -15218,6 +15248,12 @@ function RegisterModal(props) {
     }
     return resetView();
   };
+  useEffect(() => {
+    document.dispatchEvent(displayRegister({
+      product,
+      plan
+    }));
+  }, []);
   return /*#__PURE__*/React__default.createElement(Modal, {
     id: "pelcro-register-modal",
     onDisplay: props === null || props === void 0 ? void 0 : props.onDisplay,
@@ -15290,6 +15326,12 @@ function SelectModalWithHook(props) {
   } = usePelcro();
   const entitlementsProtectedElements = document.querySelectorAll("[data-pelcro-entitlements]");
   const entitlements = entitlementsProtectedElements.length > 0 ? getEntitlementsFromElem(entitlementsProtectedElements[0]) : null;
+  useEffect(() => {
+    document.dispatchEvent(displaySelect({
+      product,
+      plan
+    }));
+  }, []);
   return /*#__PURE__*/React__default.createElement(SelectModalWithTrans, {
     isGift: isGift,
     disableGifting: isRenewingGift,
@@ -15575,7 +15617,8 @@ class SelectModal extends Component {
       this.props.setProductAndPlan(this.state.product, this.state.plan, this.state.isGift);
       const {
         product,
-        isGift
+        isGift,
+        plan
       } = this.state;
       const {
         setView
@@ -15585,6 +15628,11 @@ class SelectModal extends Component {
         switchToAddressView,
         switchToPaymentView
       } = usePelcro.getStore();
+      document.dispatchEvent(submitSelect({
+        submissionSuccess: true,
+        product,
+        plan
+      }));
       if (!isAuthenticated) {
         return setView("register");
       }
@@ -24781,20 +24829,37 @@ function SubscriptionCreateModal(_ref) {
   } = _ref;
   useTranslation("common");
   const {
-    switchView
+    switchView,
+    product,
+    plan
   } = usePelcro();
   const onSuccess = res => {
     var _otherProps$onSuccess;
     (_otherProps$onSuccess = otherProps.onSuccess) === null || _otherProps$onSuccess === void 0 ? void 0 : _otherProps$onSuccess.call(otherProps, res);
     trackSubscriptionOnGA();
+    document.dispatchEvent(submitPaymentForm({
+      submissionSuccess: true
+    }));
     return switchView("subscription-success");
   };
+  const onFailure = () => {
+    return document.dispatchEvent(submitPaymentForm({
+      submissionSuccess: false
+    }));
+  };
+  useEffect(() => {
+    document.dispatchEvent(displayPaymentForm({
+      product,
+      plan
+    }));
+  }, []);
   return /*#__PURE__*/React__default.createElement(Modal, {
     id: "pelcro-subscription-create-modal",
     onDisplay: onDisplay,
     onClose: onClose
   }, /*#__PURE__*/React__default.createElement(ModalBody, null, /*#__PURE__*/React__default.createElement(SubscriptionCreateView, Object.assign({}, otherProps, {
-    onSuccess: onSuccess
+    onSuccess: onSuccess,
+    onFailure: onFailure
   }))), /*#__PURE__*/React__default.createElement(ModalFooter, null, /*#__PURE__*/React__default.createElement(Authorship, null)));
 }
 SubscriptionCreateModal.viewId = "subscription-create";
@@ -26175,12 +26240,18 @@ const AddressCreateContainer = _ref => {
             content: getErrorMessages(err)
           }
         });
+        document.dispatchEvent(submitAddressCreate({
+          submissionSuccess: false
+        }));
         onFailure(err);
         return dispatch({
           type: LOADING,
           payload: false
         });
       }
+      document.dispatchEvent(submitAddressCreate({
+        submissionSuccess: true
+      }));
       const newAddressId = String(getNewlyCreatedAddress(res.data.addresses).id);
       if (selectedMembership) {
         dispatch({
@@ -26801,7 +26872,9 @@ const AddressCreateModal = _ref => {
   const {
     switchView,
     switchToPaymentView,
-    resetView
+    resetView,
+    product,
+    plan
   } = usePelcro();
   const onSuccess = newAddressId => {
     var _otherProps$onSuccess;
@@ -26820,6 +26893,12 @@ const AddressCreateModal = _ref => {
     (_otherProps$onMembers = otherProps.onMembershipAdressUpdateSuccess) === null || _otherProps$onMembers === void 0 ? void 0 : _otherProps$onMembers.call(otherProps);
     resetView();
   };
+  useEffect(() => {
+    document.dispatchEvent(displayAddressCreate({
+      product,
+      plan
+    }));
+  }, []);
   return /*#__PURE__*/React__default.createElement(Modal, {
     id: "pelcro-address-create-modal",
     onDisplay: onDisplay,
@@ -29750,6 +29829,9 @@ const AddressSelectContainer = _ref => {
         return onGiftRedemptionSuccess(res);
       });
     }
+    document.dispatchEvent(submitAddressSelect({
+      submissionSuccess: true
+    }));
     onSuccess(selectedAddressId);
   };
   const [state, dispatch] = useReducerWithSideEffects((state, action) => {

package/package.json

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