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

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: "내 계정",
@@ -3815,7 +3824,10 @@ var labels$F = {
 	interval: "{{count}} {{interval}}",
 	interval_plural: "{{count}} {{interval}}s",
 	tax: "+ Tax",
-	removeCoupon: "REMOVE"
+	removeCoupon: "REMOVE",
+	firstName: "First name",
+	lastName: "Last name",
+	phone: "Phone"
 };
 var checkoutForm_en = {
 	messages: messages$I,
@@ -3842,7 +3854,10 @@ var labels$E = {
 	interval: "{{count}} {{interval}}",
 	interval_plural: "{{count}} {{interval}}s",
 	tax: "+ Taxe",
-	removeCoupon: "RETIRER"
+	removeCoupon: "RETIRER",
+	firstName: "Prénom",
+	lastName: "Nom de famille",
+	phone: "Téléphoner"
 };
 var checkoutForm_fr = {
 	messages: messages$H,
@@ -3869,7 +3884,10 @@ var labels$D = {
 	interval: "{{count}} {{interval}}",
 	interval_plural: "{{count}} {{interval}}",
 	tax: "+ 세금",
-	removeCoupon: "제거"
+	removeCoupon: "제거",
+	firstName: "이름",
+	lastName: "성",
+	phone: "핸드폰"
 };
 var checkoutForm_ko = {
 	messages: messages$G,
@@ -4083,7 +4101,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 +4197,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 +4294,8 @@ var labels$u = {
 	emailPlaceholder: "이메일 입력",
 	required: "필수 항목",
 	firstName: "이름",
-	lastName: "성"
+	lastName: "성",
+	phone: "핸드폰"
 };
 var messages$x = {
 	alreadyHaveAccount: "이미 계정이 있습니까?",
@@ -7235,8 +7256,7 @@ class PelcroActions {
         return this.set({
           view: "login"
         });
-      } // console.log(this.get().isAuthenticated(), );
-
+      }
 
       if (["passwordless-request"].includes(view) && (this.get().isAuthenticated() || !((_window$Pelcro$site$r = window.Pelcro.site.read()) !== null && _window$Pelcro$site$r !== void 0 && _window$Pelcro$site$r.passwordless_enabled))) {
         return this.set({
@@ -10808,6 +10828,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 +11463,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 +11505,7 @@ const RegisterContainer = ({
       password,
       firstName,
       lastName,
+      phone,
       organization,
       jobTitle,
       selectFields
@@ -11503,6 +11531,7 @@ const RegisterContainer = ({
         password,
         first_name: firstName,
         last_name: lastName,
+        phone: phone,
         security_token: securityToken,
         metadata: {
           organization,
@@ -11592,12 +11621,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 +11660,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,
@@ -12264,117 +12319,77 @@ const RegisterButton = ({
   }, 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 => {
+    if (finishedTyping) {
+      if (firstName !== null && firstName !== void 0 && firstName.length) {
+        dispatch({
+          type: SET_FIRST_NAME,
+          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]);
+  React.useEffect(() => {
+    handleInputChange(firstName);
+  }, [finishedTyping, firstName, handleInputChange]); // Initialize first name field with user's first name
+
+  const loadFirstNameIntoField = () => {
+    handleInputChange(window.Pelcro.user.read().first_name);
     dispatch({
       type: SET_FIRST_NAME,
-      payload: value
+      payload: window.Pelcro.user.read().first_name
     });
   };
 
-  if (state.loading) {
-    return /*#__PURE__*/React__default['default'].createElement(Loader, null);
-  }
-
+  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 +12398,76 @@ 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 => {
+    if (finishedTyping) {
+      if (lastName !== null && lastName !== void 0 && lastName.length) {
+        dispatch({
+          type: SET_LAST_NAME,
+          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]);
+  React.useEffect(() => {
+    handleInputChange(lastName);
+  }, [finishedTyping, lastName, handleInputChange]); // Initialize last name field with user's last name
+
+  const loadLastNameIntoField = () => {
+    handleInputChange(window.Pelcro.user.read().last_name);
     dispatch({
       type: SET_LAST_NAME,
-      payload: value
+      payload: window.Pelcro.user.read().last_name
     });
   };
 
-  if (state.loading) {
-    return /*#__PURE__*/React__default['default'].createElement(Loader, null);
-  }
-
+  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,6 +12475,80 @@ 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 (finishedTyping) {
+      if (phone !== null && phone !== void 0 && phone.length) {
+        dispatch({
+          type: SET_PHONE,
+          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]);
+  React.useEffect(() => {
+    handleInputChange(phone);
+  }, [finishedTyping, phone, handleInputChange]); // Initialize phone field with user's phone
+
+  const loadPhoneIntoField = () => {
+    handleInputChange(window.Pelcro.user.read().phone);
+    dispatch({
+      type: SET_PHONE,
+      payload: 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));
+}
+
 /**
  *
  */
@@ -12443,11 +12579,13 @@ function RegisterView(props) {
     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"
   }), /*#__PURE__*/React__default['default'].createElement(RegisterLastName, {
     wrapperClassName: "plc-ml-3",
     id: "pelcro-input-last-name",
-    label: t("labels.lastName")
+    label: t("labels.lastName"),
+    errorId: "pelcro-input-lastName-error"
   })), /*#__PURE__*/React__default['default'].createElement(RegisterEmail, {
     id: "pelcro-input-email",
     errorId: "pelcro-input-email-error",
@@ -12499,6 +12637,93 @@ function hasSecurityTokenEnabled() {
   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);
 }
 
+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,
@@ -15128,6 +15353,12 @@ const initialState$j = {
   updatedPrice: null,
   taxAmount: null,
   currentPlan: null,
+  firstName: "",
+  lastName: "",
+  phone: "",
+  firstNameError: null,
+  lastNameError: null,
+  phoneError: null,
   alert: {
     type: "error",
     content: ""
@@ -15246,6 +15477,9 @@ const PaymentMethodContainerWithoutStripe = ({
       } else {
         window.Pelcro.payment.authorize({
           auth_token: window.Pelcro.user.read().auth_token,
+          first_name: window.Pelcro.user.read().first_name || state.firstName,
+          last_name: window.Pelcro.user.read().last_name || state.lastName,
+          phone: window.Pelcro.user.read().phone || state.phone,
           site_id: window.Pelcro.siteid,
           amount: totalAmount,
           currency: (plan === null || plan === void 0 ? void 0 : plan.currency) || (invoice === null || invoice === void 0 ? void 0 : invoice.currency) || window.Pelcro.site.read().default_currency,
@@ -16771,6 +17005,42 @@ const PaymentMethodContainerWithoutStripe = ({
           percentOff: action.payload
         });
 
+      case SET_FIRST_NAME:
+        return lib_7({ ...state,
+          firstName: action.payload,
+          firstNameError: null
+        });
+
+      case SET_LAST_NAME:
+        return lib_7({ ...state,
+          lastName: action.payload,
+          lastNameError: null
+        });
+
+      case SET_PHONE:
+        return lib_7({ ...state,
+          phone: action.payload,
+          phoneError: null
+        });
+
+      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 SHOW_ALERT:
         return lib_7({ ...state,
           alert: action.payload
@@ -16985,7 +17255,7 @@ const SubmitPaymentMethod = ({
   onClick,
   ...otherProps
 }) => {
-  var _plan$quantity;
+  var _plan$quantity, _window$Pelcro$site$r;
 
   const {
     plan
@@ -16996,6 +17266,12 @@ const SubmitPaymentMethod = ({
   const {
     dispatch,
     state: {
+      firstNameError,
+      lastNameError,
+      phoneError,
+      firstName,
+      lastName,
+      phone,
       disableSubmit,
       isLoading,
       updatedPrice
@@ -17004,6 +17280,18 @@ const SubmitPaymentMethod = ({
   const planQuantity = (_plan$quantity = plan === null || plan === void 0 ? void 0 : plan.quantity) !== null && _plan$quantity !== void 0 ? _plan$quantity : 1;
   const price = updatedPrice !== null && updatedPrice !== void 0 ? updatedPrice : plan === null || plan === void 0 ? void 0 : plan.amount;
   const priceFormatted = getFormattedPriceByLocal(price * planQuantity, plan === null || plan === void 0 ? void 0 : plan.currency, getPageOrDefaultLanguage());
+  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 isUserFirstName = Boolean(window.Pelcro.user.read().first_name);
+  const isUserLastName = Boolean(window.Pelcro.user.read().last_name);
+  const isUserPhone = Boolean(window.Pelcro.user.read().phone);
+  const [isDisabled, setDisabled] = React.useState(true);
+  React.useEffect(() => {
+    if (supportsTap && isUserFirstName && isUserLastName && isUserPhone) {
+      setDisabled(disableSubmit);
+    } else {
+      setDisabled(disableSubmit || 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));
+    }
+  }, [disableSubmit, firstNameError, lastNameError, phoneError, firstName, lastName, phone]);
   return /*#__PURE__*/React__default['default'].createElement(Button, Object.assign({
     role: "submit",
     className: "plc-w-full plc-py-3",
@@ -17015,7 +17303,7 @@ const SubmitPaymentMethod = ({
       });
       onClick === null || onClick === void 0 ? void 0 : onClick();
     },
-    disabled: disableSubmit
+    disabled: isDisabled
   }, otherProps), plan ? /*#__PURE__*/React__default['default'].createElement("span", {
     className: "plc-capitalize "
   }, t("labels.pay"), " ", priceFormatted && priceFormatted) : t("labels.submit"));
@@ -17590,6 +17878,18 @@ const TaxAmount = () => {
   return null;
 };
 
+const IncludeFirstName = props => /*#__PURE__*/React__default['default'].createElement(FirstName, Object.assign({
+  store: store$j
+}, props));
+
+const IncludeLastName = props => /*#__PURE__*/React__default['default'].createElement(LastName, Object.assign({
+  store: store$j
+}, props));
+
+const IncludePhone = props => /*#__PURE__*/React__default['default'].createElement(Phone, Object.assign({
+  store: store$j
+}, props));
+
 /**
  *
  */
@@ -17609,7 +17909,10 @@ function PaymentMethodView({
   } = useTranslation("checkoutForm");
   const cardProcessor = getSiteCardProcessor();
   const supportsVantiv = Boolean((_window$Pelcro$site$r = window.Pelcro.site.read()) === null || _window$Pelcro$site$r === void 0 ? void 0 : _window$Pelcro$site$r.vantiv_gateway_settings);
-  Boolean((_window$Pelcro$site$r2 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r2 === void 0 ? void 0 : _window$Pelcro$site$r2.tap_gateway_settings);
+  const supportsTap = Boolean((_window$Pelcro$site$r2 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r2 === void 0 ? void 0 : _window$Pelcro$site$r2.tap_gateway_settings);
+  const isUserFirstName = Boolean(window.Pelcro.user.read().first_name);
+  const isUserLastName = Boolean(window.Pelcro.user.read().last_name);
+  const isUserPhone = Boolean(window.Pelcro.user.read().phone);
   return /*#__PURE__*/React__default['default'].createElement("div", {
     className: "plc-flex plc-flex-col plc-items-center plc-mt-4 sm:plc-px-8 pelcro-payment-block"
   }, cardProcessor === "stripe" && /*#__PURE__*/React__default['default'].createElement("div", {
@@ -17631,7 +17934,25 @@ function PaymentMethodView({
     onFailure: onFailure
   }, /*#__PURE__*/React__default['default'].createElement(BankRedirection, null), /*#__PURE__*/React__default['default'].createElement(AlertWithContext, {
     className: "plc-mb-2"
-  }), /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement(SelectedPaymentMethod, null), /*#__PURE__*/React__default['default'].createElement(CheckoutForm, null), showCoupon && /*#__PURE__*/React__default['default'].createElement("div", {
+  }), /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement(SelectedPaymentMethod, null), supportsTap && (!isUserFirstName || !isUserLastName || !isUserPhone) && /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "plc-flex plc-items-start"
+  }, /*#__PURE__*/React__default['default'].createElement(IncludeFirstName, {
+    id: "pelcro-input-first-name",
+    label: t("labels.firstName"),
+    errorId: "pelcro-input-firstName-error",
+    required: true
+  }), /*#__PURE__*/React__default['default'].createElement(IncludeLastName, {
+    wrapperClassName: "plc-ml-3",
+    id: "pelcro-input-last-name",
+    label: t("labels.lastName"),
+    errorId: "pelcro-input-lastName-error",
+    required: true
+  })), /*#__PURE__*/React__default['default'].createElement(IncludePhone, {
+    id: "pelcro-input-phone",
+    errorId: "pelcro-input-phone-error",
+    label: t("labels.phone"),
+    required: true
+  })), /*#__PURE__*/React__default['default'].createElement(CheckoutForm, null), showCoupon && /*#__PURE__*/React__default['default'].createElement("div", {
     className: "plc-mb-2"
   }, /*#__PURE__*/React__default['default'].createElement(CouponCode, null), /*#__PURE__*/React__default['default'].createElement(DiscountedPrice, null)), /*#__PURE__*/React__default['default'].createElement(TaxAmount, null), /*#__PURE__*/React__default['default'].createElement("div", {
     className: "plc-grid plc-mt-4 plc-gap-y-2"
@@ -19114,9 +19435,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 +19552,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 +19581,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 +19706,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({
@@ -19376,7 +19737,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 +19750,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 +19782,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 +19806,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",
@@ -22784,10 +23126,12 @@ const GiftCreateEmail = props => /*#__PURE__*/React__default['default'].createEl
 }, props));
 
 const GiftCreateFirstName = props => /*#__PURE__*/React__default['default'].createElement(FirstName, Object.assign({
+  initWithUserFirstName: false,
   store: store$7
 }, props));
 
 const GiftCreateLastName = props => /*#__PURE__*/React__default['default'].createElement(LastName, Object.assign({
+  initWithUserLastName: false,
   store: store$7
 }, props));
 
@@ -30554,6 +30898,9 @@ exports.GiftRedeemModal = GiftRedeemModal;
 exports.GiftRedeemSubmitButton = GiftRedeemSubmitButton;
 exports.GiftRedeemView = GiftRedeemView;
 exports.GoogleLoginButton = GoogleLoginButton;
+exports.IncludeFirstName = IncludeFirstName;
+exports.IncludeLastName = IncludeLastName;
+exports.IncludePhone = IncludePhone;
 exports.Input = Input;
 exports.InvoiceDetailsContainer = InvoiceDetailsContainer;
 exports.InvoiceDetailsDownloadButton = InvoiceDetailsDownloadButton;