@pelcro/react-pelcro-js 3.9.0-beta.5 → 3.9.0-beta.7

package/dist/index.cjs.js

@@ -12340,22 +12340,24 @@ function FirstName({
   const handleInputChange = React.useCallback(value => {
     setFirstName(value);
 
-    if (firstName !== null && firstName !== void 0 && firstName.length) {
-      dispatch({
-        type: SET_FIRST_NAME,
-        payload: firstName
-      });
-    } else {
-      if (finishedTyping && otherProps.required) {
-        dispatch({
-          type: SET_FIRST_NAME_ERROR,
-          payload: t("validation.enterFirstName")
-        });
-      } else {
+    if (finishedTyping) {
+      if (firstName !== null && firstName !== void 0 && firstName.length) {
         dispatch({
           type: SET_FIRST_NAME,
-          payload: value
+          payload: firstName
         });
+      } else {
+        if (otherProps.required) {
+          dispatch({
+            type: SET_FIRST_NAME_ERROR,
+            payload: t("validation.enterFirstName")
+          });
+        } else {
+          dispatch({
+            type: SET_FIRST_NAME,
+            payload: firstName
+          });
+        }
       }
     }
   }, [dispatch, firstName, finishedTyping]);
@@ -12365,6 +12367,10 @@ function FirstName({
 
   const loadFirstNameIntoField = () => {
     handleInputChange(window.Pelcro.user.read().first_name);
+    dispatch({
+      type: SET_FIRST_NAME,
+      payload: window.Pelcro.user.read().first_name
+    });
   };
 
   React.useEffect(() => {
@@ -12375,6 +12381,10 @@ function FirstName({
       loadFirstNameIntoField();
       return () => {
         document.removeEventListener("PelcroUserLoaded", handleInputChange);
+        dispatch({
+          type: SET_FIRST_NAME,
+          payload: ""
+        });
       };
     }
   }, []);
@@ -12412,22 +12422,24 @@ function LastName({
   const handleInputChange = React.useCallback(value => {
     setLastName(value);
 
-    if (lastName !== null && lastName !== void 0 && lastName.length) {
-      dispatch({
-        type: SET_LAST_NAME,
-        payload: lastName
-      });
-    } else {
-      if (finishedTyping && otherProps.required) {
-        dispatch({
-          type: SET_LAST_NAME_ERROR,
-          payload: t("validation.enterLastName")
-        });
-      } else {
+    if (finishedTyping) {
+      if (lastName !== null && lastName !== void 0 && lastName.length) {
         dispatch({
           type: SET_LAST_NAME,
-          payload: value
+          payload: lastName
         });
+      } else {
+        if (otherProps.required) {
+          dispatch({
+            type: SET_LAST_NAME_ERROR,
+            payload: t("validation.enterLastName")
+          });
+        } else {
+          dispatch({
+            type: SET_LAST_NAME,
+            payload: lastName
+          });
+        }
       }
     }
   }, [dispatch, lastName, finishedTyping]);
@@ -12437,6 +12449,10 @@ function LastName({
 
   const loadLastNameIntoField = () => {
     handleInputChange(window.Pelcro.user.read().last_name);
+    dispatch({
+      type: SET_LAST_NAME,
+      payload: window.Pelcro.user.read().last_name
+    });
   };
 
   React.useEffect(() => {
@@ -12447,6 +12463,10 @@ function LastName({
       loadLastNameIntoField();
       return () => {
         document.removeEventListener("PelcroUserLoaded", handleInputChange);
+        dispatch({
+          type: SET_LAST_NAME,
+          payload: ""
+        });
       };
     }
   }, []);
@@ -12484,22 +12504,24 @@ function Phone({
   const handleInputChange = React.useCallback(value => {
     setPhone(value);
 
-    if (phone !== null && phone !== void 0 && phone.length) {
-      dispatch({
-        type: SET_PHONE,
-        payload: phone
-      });
-    } else {
-      if (finishedTyping && otherProps.required) {
-        dispatch({
-          type: SET_PHONE_ERROR,
-          payload: t("validation.enterPhone")
-        });
-      } else {
+    if (finishedTyping) {
+      if (phone !== null && phone !== void 0 && phone.length) {
         dispatch({
           type: SET_PHONE,
-          payload: value
+          payload: phone
         });
+      } else {
+        if (otherProps.required) {
+          dispatch({
+            type: SET_PHONE_ERROR,
+            payload: t("validation.enterPhone")
+          });
+        } else {
+          dispatch({
+            type: SET_PHONE,
+            payload: phone
+          });
+        }
       }
     }
   }, [dispatch, phone, finishedTyping]);
@@ -12509,6 +12531,10 @@ function Phone({
 
   const loadPhoneIntoField = () => {
     handleInputChange(window.Pelcro.user.read().phone);
+    dispatch({
+      type: SET_PHONE,
+      payload: window.Pelcro.user.read().phone
+    });
   };
 
   React.useEffect(() => {
@@ -12519,6 +12545,10 @@ function Phone({
       loadPhoneIntoField();
       return () => {
         document.removeEventListener("PelcroUserLoaded", handleInputChange);
+        dispatch({
+          type: SET_PHONE,
+          payload: ""
+        });
       };
     }
   }, []);
@@ -17269,6 +17299,14 @@ const SubmitPaymentMethod = ({
   const isUserPhone = Boolean(window.Pelcro.user.read().phone);
   const [isDisabled, setDisabled] = React.useState(true);
   React.useEffect(() => {
+    console.log("Support Tap", supportsTap);
+    console.log("firstNameError", firstNameError);
+    console.log("lastNameError", lastNameError);
+    console.log("phoneError", phoneError);
+    console.log("firstName", firstName);
+    console.log("lastName", lastName);
+    console.log("phone", phone);
+
     if (supportsTap && isUserFirstName && isUserLastName && isUserPhone) {
       setDisabled(disableSubmit);
     } else {
@@ -19689,16 +19727,30 @@ const UserUpdateButton = ({
   onClick,
   ...otherProps
 }) => {
+  var _window$Pelcro$site$r;
+
   const {
     state: {
       buttonDisabled,
-      emailError
+      email,
+      firstName,
+      lastName,
+      phone,
+      emailError,
+      firstNameError,
+      lastNameError,
+      phoneError
     },
     dispatch
   } = React.useContext(store$f);
+  const supportsTap = Boolean((_window$Pelcro$site$r = window.Pelcro.site.read()) === null || _window$Pelcro$site$r === void 0 ? void 0 : _window$Pelcro$site$r.tap_gateway_settings);
   const {
     t
   } = useTranslation("userEdit");
+  const [isDisabled, setDisabled] = React.useState(true);
+  React.useEffect(() => {
+    setDisabled(buttonDisabled || emailError || !(email !== null && email !== void 0 && email.length) || supportsTap && firstNameError || supportsTap && lastNameError || supportsTap && phoneError || supportsTap && !(firstName !== null && firstName !== void 0 && firstName.length) || supportsTap && !(lastName !== null && lastName !== void 0 && lastName.length) || supportsTap && !(phone !== null && phone !== void 0 && phone.length));
+  }, [email, firstName, lastName, phone, buttonDisabled, emailError, firstNameError, lastNameError, phoneError]);
   return /*#__PURE__*/React__default['default'].createElement(Button, Object.assign({
     onClick: () => {
       dispatch({
@@ -19706,7 +19758,7 @@ const UserUpdateButton = ({
       });
       onClick === null || onClick === void 0 ? void 0 : onClick();
     },
-    disabled: buttonDisabled || emailError,
+    disabled: isDisabled,
     isLoading: buttonDisabled && !emailError
   }, otherProps), name !== null && name !== void 0 ? name : t("labels.submit"));
 };
@@ -19751,9 +19803,12 @@ const UserUpdateProfilePic = ({
 };
 
 const UserUpdateView = props => {
+  var _window$Pelcro$site$r;
+
   const {
     t
   } = useTranslation("userEdit");
+  const supportsTap = Boolean((_window$Pelcro$site$r = window.Pelcro.site.read()) === null || _window$Pelcro$site$r === void 0 ? void 0 : _window$Pelcro$site$r.tap_gateway_settings);
   return /*#__PURE__*/React__default['default'].createElement("div", {
     id: "pelcro-user-update-view"
   }, /*#__PURE__*/React__default['default'].createElement("div", {
@@ -19772,19 +19827,22 @@ const UserUpdateView = props => {
     id: "pelcro-input-first-name",
     errorId: "pelcro-input-first-name-error",
     label: t("labels.firstName"),
-    autoFocus: true
+    autoFocus: true,
+    required: supportsTap ? true : false
   }), /*#__PURE__*/React__default['default'].createElement(UserUpdateLastName, {
     wrapperClassName: "plc-ml-3",
     autoComplete: "last-name",
     id: "pelcro-input-last-name",
     errorId: "pelcro-input-last-name-error",
-    label: t("labels.lastName")
+    label: t("labels.lastName"),
+    required: supportsTap ? true : false
   })), /*#__PURE__*/React__default['default'].createElement("div", {
     className: "plc-flex plc-items-start"
   }, /*#__PURE__*/React__default['default'].createElement(UserUpdatePhone, {
     id: "pelcro-input-phone",
     errorId: "pelcro-input-phone-error",
-    label: t("labels.phone")
+    label: t("labels.phone"),
+    required: supportsTap ? true : false
   })), /*#__PURE__*/React__default['default'].createElement(UserUpdateButton, {
     role: "submit",
     className: "plc-w-full plc-mt-2",

package/dist/index.esm.js

@@ -12310,22 +12310,24 @@ function FirstName({
   const handleInputChange = useCallback(value => {
     setFirstName(value);
 
-    if (firstName !== null && firstName !== void 0 && firstName.length) {
-      dispatch({
-        type: SET_FIRST_NAME,
-        payload: firstName
-      });
-    } else {
-      if (finishedTyping && otherProps.required) {
-        dispatch({
-          type: SET_FIRST_NAME_ERROR,
-          payload: t("validation.enterFirstName")
-        });
-      } else {
+    if (finishedTyping) {
+      if (firstName !== null && firstName !== void 0 && firstName.length) {
         dispatch({
           type: SET_FIRST_NAME,
-          payload: value
+          payload: firstName
         });
+      } else {
+        if (otherProps.required) {
+          dispatch({
+            type: SET_FIRST_NAME_ERROR,
+            payload: t("validation.enterFirstName")
+          });
+        } else {
+          dispatch({
+            type: SET_FIRST_NAME,
+            payload: firstName
+          });
+        }
       }
     }
   }, [dispatch, firstName, finishedTyping]);
@@ -12335,6 +12337,10 @@ function FirstName({
 
   const loadFirstNameIntoField = () => {
     handleInputChange(window.Pelcro.user.read().first_name);
+    dispatch({
+      type: SET_FIRST_NAME,
+      payload: window.Pelcro.user.read().first_name
+    });
   };
 
   useEffect(() => {
@@ -12345,6 +12351,10 @@ function FirstName({
       loadFirstNameIntoField();
       return () => {
         document.removeEventListener("PelcroUserLoaded", handleInputChange);
+        dispatch({
+          type: SET_FIRST_NAME,
+          payload: ""
+        });
       };
     }
   }, []);
@@ -12382,22 +12392,24 @@ function LastName({
   const handleInputChange = useCallback(value => {
     setLastName(value);
 
-    if (lastName !== null && lastName !== void 0 && lastName.length) {
-      dispatch({
-        type: SET_LAST_NAME,
-        payload: lastName
-      });
-    } else {
-      if (finishedTyping && otherProps.required) {
-        dispatch({
-          type: SET_LAST_NAME_ERROR,
-          payload: t("validation.enterLastName")
-        });
-      } else {
+    if (finishedTyping) {
+      if (lastName !== null && lastName !== void 0 && lastName.length) {
         dispatch({
           type: SET_LAST_NAME,
-          payload: value
+          payload: lastName
         });
+      } else {
+        if (otherProps.required) {
+          dispatch({
+            type: SET_LAST_NAME_ERROR,
+            payload: t("validation.enterLastName")
+          });
+        } else {
+          dispatch({
+            type: SET_LAST_NAME,
+            payload: lastName
+          });
+        }
       }
     }
   }, [dispatch, lastName, finishedTyping]);
@@ -12407,6 +12419,10 @@ function LastName({
 
   const loadLastNameIntoField = () => {
     handleInputChange(window.Pelcro.user.read().last_name);
+    dispatch({
+      type: SET_LAST_NAME,
+      payload: window.Pelcro.user.read().last_name
+    });
   };
 
   useEffect(() => {
@@ -12417,6 +12433,10 @@ function LastName({
       loadLastNameIntoField();
       return () => {
         document.removeEventListener("PelcroUserLoaded", handleInputChange);
+        dispatch({
+          type: SET_LAST_NAME,
+          payload: ""
+        });
       };
     }
   }, []);
@@ -12454,22 +12474,24 @@ function Phone({
   const handleInputChange = useCallback(value => {
     setPhone(value);
 
-    if (phone !== null && phone !== void 0 && phone.length) {
-      dispatch({
-        type: SET_PHONE,
-        payload: phone
-      });
-    } else {
-      if (finishedTyping && otherProps.required) {
-        dispatch({
-          type: SET_PHONE_ERROR,
-          payload: t("validation.enterPhone")
-        });
-      } else {
+    if (finishedTyping) {
+      if (phone !== null && phone !== void 0 && phone.length) {
         dispatch({
           type: SET_PHONE,
-          payload: value
+          payload: phone
         });
+      } else {
+        if (otherProps.required) {
+          dispatch({
+            type: SET_PHONE_ERROR,
+            payload: t("validation.enterPhone")
+          });
+        } else {
+          dispatch({
+            type: SET_PHONE,
+            payload: phone
+          });
+        }
       }
     }
   }, [dispatch, phone, finishedTyping]);
@@ -12479,6 +12501,10 @@ function Phone({
 
   const loadPhoneIntoField = () => {
     handleInputChange(window.Pelcro.user.read().phone);
+    dispatch({
+      type: SET_PHONE,
+      payload: window.Pelcro.user.read().phone
+    });
   };
 
   useEffect(() => {
@@ -12489,6 +12515,10 @@ function Phone({
       loadPhoneIntoField();
       return () => {
         document.removeEventListener("PelcroUserLoaded", handleInputChange);
+        dispatch({
+          type: SET_PHONE,
+          payload: ""
+        });
       };
     }
   }, []);
@@ -17239,6 +17269,14 @@ const SubmitPaymentMethod = ({
   const isUserPhone = Boolean(window.Pelcro.user.read().phone);
   const [isDisabled, setDisabled] = useState(true);
   useEffect(() => {
+    console.log("Support Tap", supportsTap);
+    console.log("firstNameError", firstNameError);
+    console.log("lastNameError", lastNameError);
+    console.log("phoneError", phoneError);
+    console.log("firstName", firstName);
+    console.log("lastName", lastName);
+    console.log("phone", phone);
+
     if (supportsTap && isUserFirstName && isUserLastName && isUserPhone) {
       setDisabled(disableSubmit);
     } else {
@@ -19659,16 +19697,30 @@ const UserUpdateButton = ({
   onClick,
   ...otherProps
 }) => {
+  var _window$Pelcro$site$r;
+
   const {
     state: {
       buttonDisabled,
-      emailError
+      email,
+      firstName,
+      lastName,
+      phone,
+      emailError,
+      firstNameError,
+      lastNameError,
+      phoneError
     },
     dispatch
   } = useContext(store$f);
+  const supportsTap = Boolean((_window$Pelcro$site$r = window.Pelcro.site.read()) === null || _window$Pelcro$site$r === void 0 ? void 0 : _window$Pelcro$site$r.tap_gateway_settings);
   const {
     t
   } = useTranslation("userEdit");
+  const [isDisabled, setDisabled] = useState(true);
+  useEffect(() => {
+    setDisabled(buttonDisabled || emailError || !(email !== null && email !== void 0 && email.length) || supportsTap && firstNameError || supportsTap && lastNameError || supportsTap && phoneError || supportsTap && !(firstName !== null && firstName !== void 0 && firstName.length) || supportsTap && !(lastName !== null && lastName !== void 0 && lastName.length) || supportsTap && !(phone !== null && phone !== void 0 && phone.length));
+  }, [email, firstName, lastName, phone, buttonDisabled, emailError, firstNameError, lastNameError, phoneError]);
   return /*#__PURE__*/React__default.createElement(Button, Object.assign({
     onClick: () => {
       dispatch({
@@ -19676,7 +19728,7 @@ const UserUpdateButton = ({
       });
       onClick === null || onClick === void 0 ? void 0 : onClick();
     },
-    disabled: buttonDisabled || emailError,
+    disabled: isDisabled,
     isLoading: buttonDisabled && !emailError
   }, otherProps), name !== null && name !== void 0 ? name : t("labels.submit"));
 };
@@ -19721,9 +19773,12 @@ const UserUpdateProfilePic = ({
 };
 
 const UserUpdateView = props => {
+  var _window$Pelcro$site$r;
+
   const {
     t
   } = useTranslation("userEdit");
+  const supportsTap = Boolean((_window$Pelcro$site$r = window.Pelcro.site.read()) === null || _window$Pelcro$site$r === void 0 ? void 0 : _window$Pelcro$site$r.tap_gateway_settings);
   return /*#__PURE__*/React__default.createElement("div", {
     id: "pelcro-user-update-view"
   }, /*#__PURE__*/React__default.createElement("div", {
@@ -19742,19 +19797,22 @@ const UserUpdateView = props => {
     id: "pelcro-input-first-name",
     errorId: "pelcro-input-first-name-error",
     label: t("labels.firstName"),
-    autoFocus: true
+    autoFocus: true,
+    required: supportsTap ? true : false
   }), /*#__PURE__*/React__default.createElement(UserUpdateLastName, {
     wrapperClassName: "plc-ml-3",
     autoComplete: "last-name",
     id: "pelcro-input-last-name",
     errorId: "pelcro-input-last-name-error",
-    label: t("labels.lastName")
+    label: t("labels.lastName"),
+    required: supportsTap ? true : false
   })), /*#__PURE__*/React__default.createElement("div", {
     className: "plc-flex plc-items-start"
   }, /*#__PURE__*/React__default.createElement(UserUpdatePhone, {
     id: "pelcro-input-phone",
     errorId: "pelcro-input-phone-error",
-    label: t("labels.phone")
+    label: t("labels.phone"),
+    required: supportsTap ? true : false
   })), /*#__PURE__*/React__default.createElement(UserUpdateButton, {
     role: "submit",
     className: "plc-w-full plc-mt-2",

package/package.json

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