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

package/dist/index.cjs.js

@@ -3824,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,
@@ -3851,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,
@@ -3878,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,
@@ -12277,32 +12286,25 @@ const RegisterButton = ({
   className,
   ...otherProps
 }) => {
-  var _window$Pelcro$site$r, _window$Pelcro$site$r2;
+  var _window$Pelcro$site$r;
 
   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 || 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]);
+    setDisabled(buttonDisabled || emailError || passwordError || !email.length || !password.length);
+  }, [buttonDisabled, emailError, passwordError, email, password]);
   return /*#__PURE__*/React__default['default'].createElement(Button, Object.assign({
     onClick: () => {
       dispatch({
@@ -12314,7 +12316,7 @@ const RegisterButton = ({
     isLoading: buttonDisabled,
     className: `${className} g-recaptcha`,
     "data-action": "register",
-    "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
+    "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
   }, otherProps), name !== null && name !== void 0 ? name : t("messages.createAccount"));
 };
 
@@ -12509,16 +12511,12 @@ function Phone({
   }, 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, _window$Pelcro$site$r4;
+  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;
 
   const {
     t
@@ -12530,7 +12528,6 @@ 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", {
@@ -12540,25 +12537,18 @@ 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 || supportsTap) && /*#__PURE__*/React__default['default'].createElement("div", {
+  }, /*#__PURE__*/React__default['default'].createElement(RegisterContainer, props, /*#__PURE__*/React__default['default'].createElement(AlertWithContext, null), showNameFields && /*#__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"),
-    errorId: "pelcro-input-firstName-error",
-    required: supportsTap ? true : false
+    errorId: "pelcro-input-firstName-error"
   }), /*#__PURE__*/React__default['default'].createElement(RegisterLastName, {
     wrapperClassName: "plc-ml-3",
     id: "pelcro-input-last-name",
     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, {
+    errorId: "pelcro-input-lastName-error"
+  })), /*#__PURE__*/React__default['default'].createElement(RegisterEmail, {
     id: "pelcro-input-email",
     errorId: "pelcro-input-email-error",
     label: t("labels.email"),
@@ -12604,9 +12594,9 @@ function RegisterView(props) {
  */
 
 function hasSecurityTokenEnabled() {
-  var _window$Pelcro$site, _window$Pelcro$site$r5;
+  var _window$Pelcro$site, _window$Pelcro$site$r4;
 
-  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);
+  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", {
@@ -15325,6 +15315,12 @@ const initialState$j = {
   updatedPrice: null,
   taxAmount: null,
   currentPlan: null,
+  firstName: "",
+  lastName: "",
+  phone: "",
+  firstNameError: null,
+  lastNameError: null,
+  phoneError: null,
   alert: {
     type: "error",
     content: ""
@@ -15441,8 +15437,14 @@ const PaymentMethodContainerWithoutStripe = ({
           }
         });
       } else {
+        console.log("First Name", state.firstName);
+        console.log("Last Name", state.lastName);
+        console.log("Phone", state.phone);
         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,
@@ -16968,6 +16970,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
@@ -17182,7 +17220,7 @@ const SubmitPaymentMethod = ({
   onClick,
   ...otherProps
 }) => {
-  var _plan$quantity;
+  var _plan$quantity, _window$Pelcro$site$r;
 
   const {
     plan
@@ -17193,6 +17231,12 @@ const SubmitPaymentMethod = ({
   const {
     dispatch,
     state: {
+      firstNameError,
+      lastNameError,
+      phoneError,
+      firstName,
+      lastName,
+      phone,
       disableSubmit,
       isLoading,
       updatedPrice
@@ -17201,6 +17245,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.length || supportsTap && !lastName.length || supportsTap && !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",
@@ -17212,7 +17268,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"));
@@ -17787,6 +17843,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));
+
 /**
  *
  */
@@ -17806,7 +17874,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", {
@@ -17828,7 +17899,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"
@@ -19582,30 +19671,16 @@ const UserUpdateButton = ({
   onClick,
   ...otherProps
 }) => {
-  var _window$Pelcro$site$r;
-
   const {
     state: {
       buttonDisabled,
-      email,
-      firstName,
-      lastName,
-      phone,
-      emailError,
-      firstNameError,
-      lastNameError,
-      phoneError
+      emailError
     },
     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({
@@ -19613,7 +19688,7 @@ const UserUpdateButton = ({
       });
       onClick === null || onClick === void 0 ? void 0 : onClick();
     },
-    disabled: isDisabled,
+    disabled: buttonDisabled || emailError,
     isLoading: buttonDisabled && !emailError
   }, otherProps), name !== null && name !== void 0 ? name : t("labels.submit"));
 };
@@ -19658,12 +19733,9 @@ 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", {
@@ -19682,22 +19754,19 @@ const UserUpdateView = props => {
     id: "pelcro-input-first-name",
     errorId: "pelcro-input-first-name-error",
     label: t("labels.firstName"),
-    autoFocus: true,
-    required: supportsTap ? true : false
+    autoFocus: true
   }), /*#__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"),
-    required: supportsTap ? true : false
+    label: t("labels.lastName")
   })), /*#__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"),
-    required: supportsTap ? true : false
+    label: t("labels.phone")
   })), /*#__PURE__*/React__default['default'].createElement(UserUpdateButton, {
     role: "submit",
     className: "plc-w-full plc-mt-2",
@@ -23002,10 +23071,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));
 

package/dist/index.esm.js

@@ -3794,7 +3794,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,
@@ -3821,7 +3824,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,
@@ -3848,7 +3854,10 @@ var labels$D = {
 	interval: "{{count}} {{interval}}",
 	interval_plural: "{{count}} {{interval}}",
 	tax: "+ 세금",
-	removeCoupon: "제거"
+	removeCoupon: "제거",
+	firstName: "이름",
+	lastName: "성",
+	phone: "핸드폰"
 };
 var checkoutForm_ko = {
 	messages: messages$G,
@@ -12247,32 +12256,25 @@ const RegisterButton = ({
   className,
   ...otherProps
 }) => {
-  var _window$Pelcro$site$r, _window$Pelcro$site$r2;
+  var _window$Pelcro$site$r;
 
   const {
     state: {
       emailError,
       passwordError,
-      firstNameError,
-      lastNameError,
-      phoneError,
       email,
       password,
-      firstName,
-      lastName,
-      phone,
       buttonDisabled
     },
     dispatch
   } = 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] = useState(true);
   useEffect(() => {
-    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]);
+    setDisabled(buttonDisabled || emailError || passwordError || !email.length || !password.length);
+  }, [buttonDisabled, emailError, passwordError, email, password]);
   return /*#__PURE__*/React__default.createElement(Button, Object.assign({
     onClick: () => {
       dispatch({
@@ -12284,7 +12286,7 @@ const RegisterButton = ({
     isLoading: buttonDisabled,
     className: `${className} g-recaptcha`,
     "data-action": "register",
-    "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
+    "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
   }, otherProps), name !== null && name !== void 0 ? name : t("messages.createAccount"));
 };
 
@@ -12479,16 +12481,12 @@ function Phone({
   }, otherProps));
 }
 
-const RegisterPhone = props => /*#__PURE__*/React__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, _window$Pelcro$site$r4;
+  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;
 
   const {
     t
@@ -12500,7 +12498,6 @@ 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.createElement("div", {
     id: "pelcro-register-view"
   }, /*#__PURE__*/React__default.createElement("div", {
@@ -12510,25 +12507,18 @@ function RegisterView(props) {
   }, title), /*#__PURE__*/React__default.createElement("p", null, subtitle)), /*#__PURE__*/React__default.createElement("form", {
     action: "javascript:void(0);",
     className: "plc-mt-2 pelcro-form"
-  }, /*#__PURE__*/React__default.createElement(RegisterContainer, props, /*#__PURE__*/React__default.createElement(AlertWithContext, null), (showNameFields || supportsTap) && /*#__PURE__*/React__default.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement(RegisterContainer, props, /*#__PURE__*/React__default.createElement(AlertWithContext, null), showNameFields && /*#__PURE__*/React__default.createElement("div", {
     className: "plc-flex plc-items-start"
   }, /*#__PURE__*/React__default.createElement(RegisterFirstName, {
     id: "pelcro-input-first-name",
     label: t("labels.firstName"),
-    errorId: "pelcro-input-firstName-error",
-    required: supportsTap ? true : false
+    errorId: "pelcro-input-firstName-error"
   }), /*#__PURE__*/React__default.createElement(RegisterLastName, {
     wrapperClassName: "plc-ml-3",
     id: "pelcro-input-last-name",
     label: t("labels.lastName"),
-    errorId: "pelcro-input-lastName-error",
-    required: supportsTap ? true : false
-  })), supportsTap && /*#__PURE__*/React__default.createElement(RegisterPhone, {
-    id: "pelcro-input-phone",
-    errorId: "pelcro-input-phone-error",
-    label: t("labels.phone"),
-    required: supportsTap ? true : false
-  }), /*#__PURE__*/React__default.createElement(RegisterEmail, {
+    errorId: "pelcro-input-lastName-error"
+  })), /*#__PURE__*/React__default.createElement(RegisterEmail, {
     id: "pelcro-input-email",
     errorId: "pelcro-input-email-error",
     label: t("labels.email"),
@@ -12574,9 +12564,9 @@ function RegisterView(props) {
  */
 
 function hasSecurityTokenEnabled() {
-  var _window$Pelcro$site, _window$Pelcro$site$r5;
+  var _window$Pelcro$site, _window$Pelcro$site$r4;
 
-  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);
+  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.createElement("div", {
@@ -15295,6 +15285,12 @@ const initialState$j = {
   updatedPrice: null,
   taxAmount: null,
   currentPlan: null,
+  firstName: "",
+  lastName: "",
+  phone: "",
+  firstNameError: null,
+  lastNameError: null,
+  phoneError: null,
   alert: {
     type: "error",
     content: ""
@@ -15411,8 +15407,14 @@ const PaymentMethodContainerWithoutStripe = ({
           }
         });
       } else {
+        console.log("First Name", state.firstName);
+        console.log("Last Name", state.lastName);
+        console.log("Phone", state.phone);
         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,
@@ -16938,6 +16940,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
@@ -17152,7 +17190,7 @@ const SubmitPaymentMethod = ({
   onClick,
   ...otherProps
 }) => {
-  var _plan$quantity;
+  var _plan$quantity, _window$Pelcro$site$r;
 
   const {
     plan
@@ -17163,6 +17201,12 @@ const SubmitPaymentMethod = ({
   const {
     dispatch,
     state: {
+      firstNameError,
+      lastNameError,
+      phoneError,
+      firstName,
+      lastName,
+      phone,
       disableSubmit,
       isLoading,
       updatedPrice
@@ -17171,6 +17215,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] = useState(true);
+  useEffect(() => {
+    if (supportsTap && isUserFirstName && isUserLastName && isUserPhone) {
+      setDisabled(disableSubmit);
+    } else {
+      setDisabled(disableSubmit || supportsTap && firstNameError || supportsTap && lastNameError || supportsTap && phoneError || supportsTap && !firstName.length || supportsTap && !lastName.length || supportsTap && !phone.length);
+    }
+  }, [disableSubmit, firstNameError, lastNameError, phoneError, firstName, lastName, phone]);
   return /*#__PURE__*/React__default.createElement(Button, Object.assign({
     role: "submit",
     className: "plc-w-full plc-py-3",
@@ -17182,7 +17238,7 @@ const SubmitPaymentMethod = ({
       });
       onClick === null || onClick === void 0 ? void 0 : onClick();
     },
-    disabled: disableSubmit
+    disabled: isDisabled
   }, otherProps), plan ? /*#__PURE__*/React__default.createElement("span", {
     className: "plc-capitalize "
   }, t("labels.pay"), " ", priceFormatted && priceFormatted) : t("labels.submit"));
@@ -17757,6 +17813,18 @@ const TaxAmount = () => {
   return null;
 };
 
+const IncludeFirstName = props => /*#__PURE__*/React__default.createElement(FirstName, Object.assign({
+  store: store$j
+}, props));
+
+const IncludeLastName = props => /*#__PURE__*/React__default.createElement(LastName, Object.assign({
+  store: store$j
+}, props));
+
+const IncludePhone = props => /*#__PURE__*/React__default.createElement(Phone, Object.assign({
+  store: store$j
+}, props));
+
 /**
  *
  */
@@ -17776,7 +17844,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.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.createElement("div", {
@@ -17798,7 +17869,25 @@ function PaymentMethodView({
     onFailure: onFailure
   }, /*#__PURE__*/React__default.createElement(BankRedirection, null), /*#__PURE__*/React__default.createElement(AlertWithContext, {
     className: "plc-mb-2"
-  }), /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(SelectedPaymentMethod, null), /*#__PURE__*/React__default.createElement(CheckoutForm, null), showCoupon && /*#__PURE__*/React__default.createElement("div", {
+  }), /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(SelectedPaymentMethod, null), supportsTap && (!isUserFirstName || !isUserLastName || !isUserPhone) && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
+    className: "plc-flex plc-items-start"
+  }, /*#__PURE__*/React__default.createElement(IncludeFirstName, {
+    id: "pelcro-input-first-name",
+    label: t("labels.firstName"),
+    errorId: "pelcro-input-firstName-error",
+    required: true
+  }), /*#__PURE__*/React__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.createElement(IncludePhone, {
+    id: "pelcro-input-phone",
+    errorId: "pelcro-input-phone-error",
+    label: t("labels.phone"),
+    required: true
+  })), /*#__PURE__*/React__default.createElement(CheckoutForm, null), showCoupon && /*#__PURE__*/React__default.createElement("div", {
     className: "plc-mb-2"
   }, /*#__PURE__*/React__default.createElement(CouponCode, null), /*#__PURE__*/React__default.createElement(DiscountedPrice, null)), /*#__PURE__*/React__default.createElement(TaxAmount, null), /*#__PURE__*/React__default.createElement("div", {
     className: "plc-grid plc-mt-4 plc-gap-y-2"
@@ -19552,30 +19641,16 @@ const UserUpdateButton = ({
   onClick,
   ...otherProps
 }) => {
-  var _window$Pelcro$site$r;
-
   const {
     state: {
       buttonDisabled,
-      email,
-      firstName,
-      lastName,
-      phone,
-      emailError,
-      firstNameError,
-      lastNameError,
-      phoneError
+      emailError
     },
     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 || 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.createElement(Button, Object.assign({
     onClick: () => {
       dispatch({
@@ -19583,7 +19658,7 @@ const UserUpdateButton = ({
       });
       onClick === null || onClick === void 0 ? void 0 : onClick();
     },
-    disabled: isDisabled,
+    disabled: buttonDisabled || emailError,
     isLoading: buttonDisabled && !emailError
   }, otherProps), name !== null && name !== void 0 ? name : t("labels.submit"));
 };
@@ -19628,12 +19703,9 @@ 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", {
@@ -19652,22 +19724,19 @@ const UserUpdateView = props => {
     id: "pelcro-input-first-name",
     errorId: "pelcro-input-first-name-error",
     label: t("labels.firstName"),
-    autoFocus: true,
-    required: supportsTap ? true : false
+    autoFocus: true
   }), /*#__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"),
-    required: supportsTap ? true : false
+    label: t("labels.lastName")
   })), /*#__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"),
-    required: supportsTap ? true : false
+    label: t("labels.phone")
   })), /*#__PURE__*/React__default.createElement(UserUpdateButton, {
     role: "submit",
     className: "plc-w-full plc-mt-2",
@@ -22972,10 +23041,12 @@ const GiftCreateEmail = props => /*#__PURE__*/React__default.createElement(Email
 }, props));
 
 const GiftCreateFirstName = props => /*#__PURE__*/React__default.createElement(FirstName, Object.assign({
+  initWithUserFirstName: false,
   store: store$7
 }, props));
 
 const GiftCreateLastName = props => /*#__PURE__*/React__default.createElement(LastName, Object.assign({
+  initWithUserLastName: false,
   store: store$7
 }, props));
 

package/package.json

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