@pelcro/react-pelcro-js 3.8.1 → 3.9.0-beta.2

package/dist/index.cjs.js

@@ -3245,7 +3245,10 @@ var validation$2 = {
 	validEmail: "le courriel n’est pas valide",
 	enterEmail: "Un courriel est requis.",
 	enterPassword: "Mot de passe requis.",
-	confirmPassword: "Confirmer le mot de passe requis."
+	confirmPassword: "Confirmer le mot de passe requis.",
+	enterFirstName: "Le prénom est requis.",
+	enterLastName: "Le nom de famille est requis.",
+	enterPhone: "Le numéro de téléphone est requis."
 };
 var buttons$e = {
 	account: "Accès abonné(e)s",
@@ -3334,7 +3337,10 @@ var validation$1 = {
 	validEmail: "Email address is not valid.",
 	enterEmail: "Email address is required.",
 	enterPassword: "Password is required.",
-	confirmPassword: "Confirm password is required."
+	confirmPassword: "Confirm password is required.",
+	enterFirstName: "First name is required.",
+	enterLastName: "Last name is required.",
+	enterPhone: "Phone number is required."
 };
 var buttons$d = {
 	account: "My account",
@@ -3422,7 +3428,10 @@ var common_en = {
 var validation = {
 	validEmail: "이메일 주소가 유효하지 않습니다.",
 	enterEmail: "이메일 주소는 필수 항목입니다.",
-	enterPassword: "비밀번호는 필수 항목입니다."
+	enterPassword: "비밀번호는 필수 항목입니다.",
+	enterFirstName: "이름은 필수 항목입니다.",
+	enterLastName: "성은 필수 항목입니다.",
+	enterPhone: "전화번호는 필수 항목입니다."
 };
 var buttons$c = {
 	account: "내 계정",
@@ -4083,7 +4092,8 @@ var labels$w = {
 	emailPlaceholder: "Enter email",
 	required: "required",
 	firstName: "First name",
-	lastName: "Last name"
+	lastName: "Last name",
+	phone: "Phone"
 };
 var messages$z = {
 	alreadyHaveAccount: "Already have an account?",
@@ -4178,7 +4188,8 @@ var labels$v = {
 	emailPlaceholder: "Courriel",
 	required: "Champs obligatoires",
 	firstName: "Prénom",
-	lastName: "Nom de famille"
+	lastName: "Nom de famille",
+	phone: "Téléphoner"
 };
 var messages$y = {
 	alreadyHaveAccount: "Vous avez déjà un compte?",
@@ -4274,7 +4285,8 @@ var labels$u = {
 	emailPlaceholder: "이메일 입력",
 	required: "필수 항목",
 	firstName: "이름",
-	lastName: "성"
+	lastName: "성",
+	phone: "핸드폰"
 };
 var messages$x = {
 	alreadyHaveAccount: "이미 계정이 있습니까?",
@@ -10808,6 +10820,9 @@ const SET_EMAIL = "SET_EMAIL";
 const SET_PASSWORD = "SET_PASSWORD";
 const SET_EMAIL_ERROR = "SET_EMAIL_ERROR";
 const SET_PASSWORD_ERROR = "SET_PASSWORD_ERROR";
+const SET_FIRST_NAME_ERROR = "SET_FIRST_NAME_ERROR";
+const SET_LAST_NAME_ERROR = "SET_LAST_NAME_ERROR";
+const SET_PHONE_ERROR = "SET_PHONE_ERROR";
 const SET_TEXT_FIELD = "SET_TEXT_FIELD";
 const SET_TOKEN = "SET_TOKEN";
 const SET_GIFT_CODE = "SET_GIFT_CODE";
@@ -11440,14 +11455,18 @@ facebookLoginRenderProps.FacebookLogin;
 const initialState$k = {
   email: "",
   password: "",
+  firstName: "",
+  lastName: "",
+  phone: "",
   emailError: null,
   passwordError: null,
   confirmPassword: "",
   confirmPasswordError: null,
   confirmPasswordUsed: false,
   buttonDisabled: false,
-  firstName: null,
-  lastName: null,
+  firstNameError: null,
+  lastNameError: null,
+  phoneError: null,
   selectFields: {},
   alert: {
     type: "error",
@@ -11478,6 +11497,7 @@ const RegisterContainer = ({
       password,
       firstName,
       lastName,
+      phone,
       organization,
       jobTitle,
       selectFields
@@ -11503,6 +11523,7 @@ const RegisterContainer = ({
         password,
         first_name: firstName,
         last_name: lastName,
+        phone: phone,
         security_token: securityToken,
         metadata: {
           organization,
@@ -11592,12 +11613,20 @@ const RegisterContainer = ({
 
       case SET_FIRST_NAME:
         return lib_7({ ...state,
-          firstName: action.payload
+          firstName: action.payload,
+          firstNameError: null
         });
 
       case SET_LAST_NAME:
         return lib_7({ ...state,
-          lastName: action.payload
+          lastName: action.payload,
+          lastNameError: null
+        });
+
+      case SET_PHONE:
+        return lib_7({ ...state,
+          phone: action.payload,
+          phoneError: null
         });
 
       case SET_TEXT_FIELD:
@@ -11623,6 +11652,24 @@ const RegisterContainer = ({
           password: ""
         });
 
+      case SET_FIRST_NAME_ERROR:
+        return lib_7({ ...state,
+          firstNameError: action.payload,
+          firstName: ""
+        });
+
+      case SET_LAST_NAME_ERROR:
+        return lib_7({ ...state,
+          lastNameError: action.payload,
+          lastName: ""
+        });
+
+      case SET_PHONE_ERROR:
+        return lib_7({ ...state,
+          phoneError: action.payload,
+          phone: null
+        });
+
       case SET_CONFIRM_PASSWORD_ERROR:
         return lib_7({ ...state,
           confirmPasswordError: action.payload,
@@ -12230,25 +12277,32 @@ const RegisterButton = ({
   className,
   ...otherProps
 }) => {
-  var _window$Pelcro$site$r;
+  var _window$Pelcro$site$r, _window$Pelcro$site$r2;
 
   const {
     state: {
       emailError,
       passwordError,
+      firstNameError,
+      lastNameError,
+      phoneError,
       email,
       password,
+      firstName,
+      lastName,
+      phone,
       buttonDisabled
     },
     dispatch
   } = React.useContext(store$k);
+  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("register");
   const [isDisabled, setDisabled] = React.useState(true);
   React.useEffect(() => {
-    setDisabled(buttonDisabled || emailError || passwordError || !email.length || !password.length);
-  }, [buttonDisabled, emailError, passwordError, email, password]);
+    setDisabled(buttonDisabled || emailError || passwordError || firstNameError || lastNameError || phoneError || !email.length || !password.length || supportsTap && !firstName.length || supportsTap && !lastName.length || supportsTap && !phone.length);
+  }, [buttonDisabled, emailError, passwordError, firstNameError, lastNameError, phoneError, email, password, firstName, lastName, phone]);
   return /*#__PURE__*/React__default['default'].createElement(Button, Object.assign({
     onClick: () => {
       dispatch({
@@ -12260,121 +12314,68 @@ const RegisterButton = ({
     isLoading: buttonDisabled,
     className: `${className} g-recaptcha`,
     "data-action": "register",
-    "data-sitekey": (_window$Pelcro$site$r = window.Pelcro.site.read()) === null || _window$Pelcro$site$r === void 0 ? void 0 : _window$Pelcro$site$r.security_key
+    "data-sitekey": (_window$Pelcro$site$r2 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r2 === void 0 ? void 0 : _window$Pelcro$site$r2.security_key
   }, otherProps), name !== null && name !== void 0 ? name : t("messages.createAccount"));
 };
 
-const Loader = props => /*#__PURE__*/React__default['default'].createElement("div", {
-  className: `pelcro-loader-wrapper ${props.className}`
-}, /*#__PURE__*/React__default['default'].createElement("svg", {
-  width: props.width,
-  height: props.height,
-  viewBox: "0 0 120 30",
-  xmlns: "http://www.w3.org/2000/svg",
-  fill: "currentColor",
-  "aria-label": props.label
-}, /*#__PURE__*/React__default['default'].createElement("circle", {
-  cx: "15",
-  cy: "15",
-  r: props.radius + 6
-}, /*#__PURE__*/React__default['default'].createElement("animate", {
-  attributeName: "r",
-  from: "15",
-  to: "15",
-  begin: "0s",
-  dur: "0.8s",
-  values: "15;9;15",
-  calcMode: "linear",
-  repeatCount: "indefinite"
-}), /*#__PURE__*/React__default['default'].createElement("animate", {
-  attributeName: "fillOpacity",
-  from: "1",
-  to: "1",
-  begin: "0s",
-  dur: "0.8s",
-  values: "1;.5;1",
-  calcMode: "linear",
-  repeatCount: "indefinite"
-})), /*#__PURE__*/React__default['default'].createElement("circle", {
-  cx: "60",
-  cy: "15",
-  r: props.radius,
-  attributeName: "fillOpacity",
-  from: "1",
-  to: "0.3"
-}, /*#__PURE__*/React__default['default'].createElement("animate", {
-  attributeName: "r",
-  from: "9",
-  to: "9",
-  begin: "0s",
-  dur: "0.8s",
-  values: "9;15;9",
-  calcMode: "linear",
-  repeatCount: "indefinite"
-}), /*#__PURE__*/React__default['default'].createElement("animate", {
-  attributeName: "fillOpacity",
-  from: "0.5",
-  to: "0.5",
-  begin: "0s",
-  dur: "0.8s",
-  values: ".5;1;.5",
-  calcMode: "linear",
-  repeatCount: "indefinite"
-})), /*#__PURE__*/React__default['default'].createElement("circle", {
-  cx: "105",
-  cy: "15",
-  r: props.radius + 6
-}, /*#__PURE__*/React__default['default'].createElement("animate", {
-  attributeName: "r",
-  from: "15",
-  to: "15",
-  begin: "0s",
-  dur: "0.8s",
-  values: "15;9;15",
-  calcMode: "linear",
-  repeatCount: "indefinite"
-}), /*#__PURE__*/React__default['default'].createElement("animate", {
-  attributeName: "fillOpacity",
-  from: "1",
-  to: "1",
-  begin: "0s",
-  dur: "0.8s",
-  values: "1;.5;1",
-  calcMode: "linear",
-  repeatCount: "indefinite"
-}))));
-Loader.defaultProps = {
-  height: 50,
-  width: 35,
-  color: "#32aea1",
-  label: "Loading data..",
-  radius: 9
-};
-
 function FirstName({
+  initWithUserFirstName = true,
   store,
   ...otherProps
 }) {
+  const {
+    t
+  } = useTranslation("common");
   const {
     dispatch,
-    state
+    state: {
+      firstName: stateFirstName,
+      firstNameError
+    }
   } = React.useContext(store);
+  const [firstName, setFirstName] = React.useState(stateFirstName);
+  const [finishedTyping, setFinishedTyping] = React.useState(false);
+  const handleInputChange = React.useCallback(value => {
+    setFirstName(value);
 
-  const handleInputChange = value => {
-    dispatch({
-      type: SET_FIRST_NAME,
-      payload: 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")
+      });
+    }
+  }, [dispatch, firstName, finishedTyping]);
+  React.useEffect(() => {
+    handleInputChange(firstName);
+  }, [finishedTyping, firstName, handleInputChange]); // Initialize first name field with user's first name
 
-  if (state.loading) {
-    return /*#__PURE__*/React__default['default'].createElement(Loader, null);
-  }
+  const loadFirstNameIntoField = () => {
+    handleInputChange(window.Pelcro.user.read().first_name);
+  };
 
+  React.useEffect(() => {
+    if (initWithUserFirstName) {
+      document.addEventListener("PelcroUserLoaded", () => {
+        loadFirstNameIntoField();
+      });
+      loadFirstNameIntoField();
+      return () => {
+        document.removeEventListener("PelcroUserLoaded", handleInputChange);
+      };
+    }
+  }, []);
   return /*#__PURE__*/React__default['default'].createElement(Input, Object.assign({
     type: "text",
-    value: state.firstName,
-    onChange: e => handleInputChange(e.target.value)
+    error: firstNameError,
+    value: firstName,
+    onChange: e => handleInputChange(e.target.value),
+    onBlur: () => setFinishedTyping(true),
+    onFocus: () => setFinishedTyping(false)
   }, otherProps));
 }
 
@@ -12383,29 +12384,63 @@ const RegisterFirstName = props => /*#__PURE__*/React__default['default'].create
 }, props));
 
 function LastName({
+  initWithUserLastName = true,
   store,
   ...otherProps
 }) {
+  const {
+    t
+  } = useTranslation("common");
   const {
     dispatch,
-    state
+    state: {
+      lastName: stateLastName,
+      lastNameError
+    }
   } = React.useContext(store);
+  const [lastName, setLastName] = React.useState(stateLastName);
+  const [finishedTyping, setFinishedTyping] = React.useState(false);
+  const handleInputChange = React.useCallback(value => {
+    setLastName(value);
 
-  const handleInputChange = value => {
-    dispatch({
-      type: SET_LAST_NAME,
-      payload: 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")
+      });
+    }
+  }, [dispatch, lastName, finishedTyping]);
+  React.useEffect(() => {
+    handleInputChange(lastName);
+  }, [finishedTyping, lastName, handleInputChange]); // Initialize last name field with user's last name
 
-  if (state.loading) {
-    return /*#__PURE__*/React__default['default'].createElement(Loader, null);
-  }
+  const loadLastNameIntoField = () => {
+    handleInputChange(window.Pelcro.user.read().last_name);
+  };
 
+  React.useEffect(() => {
+    if (initWithUserLastName) {
+      document.addEventListener("PelcroUserLoaded", () => {
+        loadLastNameIntoField();
+      });
+      loadLastNameIntoField();
+      return () => {
+        document.removeEventListener("PelcroUserLoaded", handleInputChange);
+      };
+    }
+  }, []);
   return /*#__PURE__*/React__default['default'].createElement(Input, Object.assign({
     type: "text",
-    value: state.lastName,
-    onChange: e => handleInputChange(e.target.value)
+    error: lastNameError,
+    value: lastName,
+    onChange: e => handleInputChange(e.target.value),
+    onBlur: () => setFinishedTyping(true),
+    onFocus: () => setFinishedTyping(false)
   }, otherProps));
 }
 
@@ -12413,12 +12448,77 @@ const RegisterLastName = props => /*#__PURE__*/React__default['default'].createE
   store: store$k
 }, props));
 
+function Phone({
+  initWithUserPhone = true,
+  store,
+  ...otherProps
+}) {
+  const {
+    t
+  } = useTranslation("common");
+  const {
+    dispatch,
+    state: {
+      phone: statePhone,
+      phoneError
+    }
+  } = React.useContext(store);
+  const [phone, setPhone] = React.useState(statePhone);
+  const [finishedTyping, setFinishedTyping] = React.useState(false);
+  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")
+      });
+    }
+  }, [dispatch, phone, finishedTyping]);
+  React.useEffect(() => {
+    handleInputChange(phone);
+  }, [finishedTyping, phone, handleInputChange]); // Initialize phone field with user's phone
+
+  const loadPhoneIntoField = () => {
+    handleInputChange(window.Pelcro.user.read().phone);
+  };
+
+  React.useEffect(() => {
+    if (initWithUserPhone) {
+      document.addEventListener("PelcroUserLoaded", () => {
+        loadPhoneIntoField();
+      });
+      loadPhoneIntoField();
+      return () => {
+        document.removeEventListener("PelcroUserLoaded", handleInputChange);
+      };
+    }
+  }, []);
+  return /*#__PURE__*/React__default['default'].createElement(Input, Object.assign({
+    type: "tel",
+    error: phoneError,
+    value: phone,
+    onChange: e => handleInputChange(e.target.value),
+    onBlur: () => setFinishedTyping(true),
+    onFocus: () => setFinishedTyping(false)
+  }, otherProps));
+}
+
+const RegisterPhone = props => /*#__PURE__*/React__default['default'].createElement(Phone, Object.assign({
+  store: store$k
+}, props));
+
 /**
  *
  */
 
 function RegisterView(props) {
-  var _product$paywall$regi, _product$paywall, _product$paywall$regi2, _product$paywall2, _window$Pelcro$site$r, _window$Pelcro$site$r2, _window$Pelcro$site$r3, _window$Pelcro, _window$Pelcro$uiSett;
+  var _product$paywall$regi, _product$paywall, _product$paywall$regi2, _product$paywall2, _window$Pelcro$site$r, _window$Pelcro$site$r2, _window$Pelcro$site$r3, _window$Pelcro, _window$Pelcro$uiSett, _window$Pelcro$site$r4;
 
   const {
     t
@@ -12430,6 +12530,7 @@ function RegisterView(props) {
   const subtitle = (_product$paywall$regi2 = product === null || product === void 0 ? void 0 : (_product$paywall2 = product.paywall) === null || _product$paywall2 === void 0 ? void 0 : _product$paywall2.register_subtitle) !== null && _product$paywall$regi2 !== void 0 ? _product$paywall$regi2 : t("subtitle");
   const socialLoginEnabled = ((_window$Pelcro$site$r = window.Pelcro.site.read()) === null || _window$Pelcro$site$r === void 0 ? void 0 : _window$Pelcro$site$r.facebook_app_id) || ((_window$Pelcro$site$r2 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r2 === void 0 ? void 0 : _window$Pelcro$site$r2.google_app_id) || ((_window$Pelcro$site$r3 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r3 === void 0 ? void 0 : _window$Pelcro$site$r3.auth0_client_id);
   const showNameFields = (_window$Pelcro = window.Pelcro) === null || _window$Pelcro === void 0 ? void 0 : (_window$Pelcro$uiSett = _window$Pelcro.uiSettings) === null || _window$Pelcro$uiSett === void 0 ? void 0 : _window$Pelcro$uiSett.enableNameFieldsInRegister;
+  const supportsTap = Boolean((_window$Pelcro$site$r4 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r4 === void 0 ? void 0 : _window$Pelcro$site$r4.tap_gateway_settings);
   return /*#__PURE__*/React__default['default'].createElement("div", {
     id: "pelcro-register-view"
   }, /*#__PURE__*/React__default['default'].createElement("div", {
@@ -12439,16 +12540,25 @@ function RegisterView(props) {
   }, title), /*#__PURE__*/React__default['default'].createElement("p", null, subtitle)), /*#__PURE__*/React__default['default'].createElement("form", {
     action: "javascript:void(0);",
     className: "plc-mt-2 pelcro-form"
-  }, /*#__PURE__*/React__default['default'].createElement(RegisterContainer, props, /*#__PURE__*/React__default['default'].createElement(AlertWithContext, null), showNameFields && /*#__PURE__*/React__default['default'].createElement("div", {
+  }, /*#__PURE__*/React__default['default'].createElement(RegisterContainer, props, /*#__PURE__*/React__default['default'].createElement(AlertWithContext, null), (showNameFields || supportsTap) && /*#__PURE__*/React__default['default'].createElement("div", {
     className: "plc-flex plc-items-start"
   }, /*#__PURE__*/React__default['default'].createElement(RegisterFirstName, {
     id: "pelcro-input-first-name",
-    label: t("labels.firstName")
+    label: t("labels.firstName"),
+    errorId: "pelcro-input-firstName-error",
+    required: supportsTap ? true : false
   }), /*#__PURE__*/React__default['default'].createElement(RegisterLastName, {
     wrapperClassName: "plc-ml-3",
     id: "pelcro-input-last-name",
-    label: t("labels.lastName")
-  })), /*#__PURE__*/React__default['default'].createElement(RegisterEmail, {
+    label: t("labels.lastName"),
+    errorId: "pelcro-input-lastName-error",
+    required: supportsTap ? true : false
+  })), supportsTap && /*#__PURE__*/React__default['default'].createElement(RegisterPhone, {
+    id: "pelcro-input-phone",
+    errorId: "pelcro-input-phone-error",
+    label: t("labels.phone"),
+    required: supportsTap ? true : false
+  }), /*#__PURE__*/React__default['default'].createElement(RegisterEmail, {
     id: "pelcro-input-email",
     errorId: "pelcro-input-email-error",
     label: t("labels.email"),
@@ -12494,11 +12604,98 @@ function RegisterView(props) {
  */
 
 function hasSecurityTokenEnabled() {
-  var _window$Pelcro$site, _window$Pelcro$site$r4;
+  var _window$Pelcro$site, _window$Pelcro$site$r5;
 
-  return Boolean((_window$Pelcro$site = window.Pelcro.site) === null || _window$Pelcro$site === void 0 ? void 0 : (_window$Pelcro$site$r4 = _window$Pelcro$site.read()) === null || _window$Pelcro$site$r4 === void 0 ? void 0 : _window$Pelcro$site$r4.security_key);
+  return Boolean((_window$Pelcro$site = window.Pelcro.site) === null || _window$Pelcro$site === void 0 ? void 0 : (_window$Pelcro$site$r5 = _window$Pelcro$site.read()) === null || _window$Pelcro$site$r5 === void 0 ? void 0 : _window$Pelcro$site$r5.security_key);
 }
 
+const Loader = props => /*#__PURE__*/React__default['default'].createElement("div", {
+  className: `pelcro-loader-wrapper ${props.className}`
+}, /*#__PURE__*/React__default['default'].createElement("svg", {
+  width: props.width,
+  height: props.height,
+  viewBox: "0 0 120 30",
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "currentColor",
+  "aria-label": props.label
+}, /*#__PURE__*/React__default['default'].createElement("circle", {
+  cx: "15",
+  cy: "15",
+  r: props.radius + 6
+}, /*#__PURE__*/React__default['default'].createElement("animate", {
+  attributeName: "r",
+  from: "15",
+  to: "15",
+  begin: "0s",
+  dur: "0.8s",
+  values: "15;9;15",
+  calcMode: "linear",
+  repeatCount: "indefinite"
+}), /*#__PURE__*/React__default['default'].createElement("animate", {
+  attributeName: "fillOpacity",
+  from: "1",
+  to: "1",
+  begin: "0s",
+  dur: "0.8s",
+  values: "1;.5;1",
+  calcMode: "linear",
+  repeatCount: "indefinite"
+})), /*#__PURE__*/React__default['default'].createElement("circle", {
+  cx: "60",
+  cy: "15",
+  r: props.radius,
+  attributeName: "fillOpacity",
+  from: "1",
+  to: "0.3"
+}, /*#__PURE__*/React__default['default'].createElement("animate", {
+  attributeName: "r",
+  from: "9",
+  to: "9",
+  begin: "0s",
+  dur: "0.8s",
+  values: "9;15;9",
+  calcMode: "linear",
+  repeatCount: "indefinite"
+}), /*#__PURE__*/React__default['default'].createElement("animate", {
+  attributeName: "fillOpacity",
+  from: "0.5",
+  to: "0.5",
+  begin: "0s",
+  dur: "0.8s",
+  values: ".5;1;.5",
+  calcMode: "linear",
+  repeatCount: "indefinite"
+})), /*#__PURE__*/React__default['default'].createElement("circle", {
+  cx: "105",
+  cy: "15",
+  r: props.radius + 6
+}, /*#__PURE__*/React__default['default'].createElement("animate", {
+  attributeName: "r",
+  from: "15",
+  to: "15",
+  begin: "0s",
+  dur: "0.8s",
+  values: "15;9;15",
+  calcMode: "linear",
+  repeatCount: "indefinite"
+}), /*#__PURE__*/React__default['default'].createElement("animate", {
+  attributeName: "fillOpacity",
+  from: "1",
+  to: "1",
+  begin: "0s",
+  dur: "0.8s",
+  values: "1;.5;1",
+  calcMode: "linear",
+  repeatCount: "indefinite"
+}))));
+Loader.defaultProps = {
+  height: 50,
+  width: 35,
+  color: "#32aea1",
+  label: "Loading data..",
+  radius: 9
+};
+
 function TextInput({
   store,
   fieldName,
@@ -19114,9 +19311,12 @@ const initialState$f = {
   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,
+  firstNameError: null,
   lastName: (_window$Pelcro$user$r3 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r3 === void 0 ? void 0 : _window$Pelcro$user$r3.last_name,
+  lastNameError: null,
   displayName: (_window$Pelcro$user$r4 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r4 === void 0 ? void 0 : _window$Pelcro$user$r4.display_name,
   phone: (_window$Pelcro$user$r5 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r5 === void 0 ? void 0 : _window$Pelcro$user$r5.phone,
+  phoneError: null,
   buttonDisabled: false,
   textFields: {},
   alert: {
@@ -19228,17 +19428,26 @@ const UserUpdateContainer = ({
 
       case SET_EMAIL:
         return lib_7({ ...state,
-          email: action.payload
+          email: action.payload,
+          emailError: null
         });
 
       case SET_EMAIL_ERROR:
         return lib_7({ ...state,
-          emailError: action.payload
+          emailError: action.payload,
+          email: ""
         });
 
       case SET_FIRST_NAME:
         return lib_7({ ...state,
-          firstName: action.payload
+          firstName: action.payload,
+          firstNameError: null
+        });
+
+      case SET_FIRST_NAME_ERROR:
+        return lib_7({ ...state,
+          firstNameError: action.payload,
+          firstName: ""
         });
 
       case SET_DISPLAY_NAME:
@@ -19248,12 +19457,26 @@ const UserUpdateContainer = ({
 
       case SET_LAST_NAME:
         return lib_7({ ...state,
-          lastName: action.payload
+          lastName: action.payload,
+          lastNameError: null
+        });
+
+      case SET_LAST_NAME_ERROR:
+        return lib_7({ ...state,
+          lastNameError: action.payload,
+          lastName: ""
         });
 
       case SET_PHONE:
         return lib_7({ ...state,
-          phone: action.payload
+          phone: action.payload,
+          phoneError: null
+        });
+
+      case SET_PHONE_ERROR:
+        return lib_7({ ...state,
+          phoneError: action.payload,
+          phone: ""
         });
 
       case SHOW_ALERT:
@@ -19359,16 +19582,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 || firstNameError || lastNameError || phoneError || !(email !== null && email !== void 0 && email.length) || 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({
@@ -19376,7 +19613,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"));
 };
@@ -19389,31 +19626,6 @@ const UserUpdateLastName = props => /*#__PURE__*/React__default['default'].creat
   store: store$f
 }, props));
 
-function Phone({
-  store,
-  ...otherProps
-}) {
-  const {
-    dispatch,
-    state: {
-      phone
-    }
-  } = React.useContext(store);
-
-  const handleInputChange = value => {
-    dispatch({
-      type: SET_PHONE,
-      payload: value
-    });
-  };
-
-  return /*#__PURE__*/React__default['default'].createElement(Input, Object.assign({
-    type: "tel",
-    value: phone,
-    onChange: e => handleInputChange(e.target.value)
-  }, otherProps));
-}
-
 const UserUpdatePhone = props => /*#__PURE__*/React__default['default'].createElement(Phone, Object.assign({
   store: store$f
 }, props));
@@ -19446,9 +19658,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", {
@@ -19467,19 +19682,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",