@pelcro/react-pelcro-js 3.9.0-beta.1 → 3.9.0-beta.11

package/dist/index.cjs.js

@@ -3823,8 +3823,11 @@ var labels$F = {
 	"for": "for",
 	interval: "{{count}} {{interval}}",
 	interval_plural: "{{count}} {{interval}}s",
-	tax: "+ Tax",
-	removeCoupon: "REMOVE"
+	tax: "Tax",
+	removeCoupon: "REMOVE",
+	firstName: "First name",
+	lastName: "Last name",
+	phone: "Phone"
 };
 var checkoutForm_en = {
 	messages: messages$I,
@@ -3850,8 +3853,11 @@ var labels$E = {
 	"for": "pour",
 	interval: "{{count}} {{interval}}",
 	interval_plural: "{{count}} {{interval}}s",
-	tax: "+ Taxe",
-	removeCoupon: "RETIRER"
+	tax: "Taxe",
+	removeCoupon: "RETIRER",
+	firstName: "Prénom",
+	lastName: "Nom de famille",
+	phone: "Téléphoner"
 };
 var checkoutForm_fr = {
 	messages: messages$H,
@@ -3877,8 +3883,11 @@ var labels$D = {
 	"for": "관련",
 	interval: "{{count}} {{interval}}",
 	interval_plural: "{{count}} {{interval}}",
-	tax: "+ 세금",
-	removeCoupon: "제거"
+	tax: "세금",
+	removeCoupon: "제거",
+	firstName: "이름",
+	lastName: "성",
+	phone: "핸드폰"
 };
 var checkoutForm_ko = {
 	messages: messages$G,
@@ -7247,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({
@@ -12277,32 +12285,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,11 +12315,12 @@ 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"));
 };
 
 function FirstName({
+  initWithUserFirstName = true,
   store,
   ...otherProps
 }) {
@@ -12337,21 +12339,50 @@ function FirstName({
   const handleInputChange = React.useCallback(value => {
     setFirstName(value);
 
-    if (firstName !== null && firstName !== void 0 && firstName.length) {
-      dispatch({
-        type: SET_FIRST_NAME,
-        payload: firstName
-      });
-    } else if (finishedTyping && otherProps.required) {
-      dispatch({
-        type: SET_FIRST_NAME_ERROR,
-        payload: t("validation.enterFirstName")
-      });
+    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]);
+  }, [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: 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",
     error: firstNameError,
@@ -12367,6 +12398,7 @@ const RegisterFirstName = props => /*#__PURE__*/React__default['default'].create
 }, props));
 
 function LastName({
+  initWithUserLastName = true,
   store,
   ...otherProps
 }) {
@@ -12385,21 +12417,50 @@ function LastName({
   const handleInputChange = React.useCallback(value => {
     setLastName(value);
 
-    if (lastName !== null && lastName !== void 0 && lastName.length) {
-      dispatch({
-        type: SET_LAST_NAME,
-        payload: lastName
-      });
-    } else if (finishedTyping && otherProps.required) {
-      dispatch({
-        type: SET_LAST_NAME_ERROR,
-        payload: t("validation.enterLastName")
-      });
+    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]);
+  }, [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: 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",
     error: lastNameError,
@@ -12415,6 +12476,7 @@ const RegisterLastName = props => /*#__PURE__*/React__default['default'].createE
 }, props));
 
 function Phone({
+  initWithUserPhone = true,
   store,
   ...otherProps
 }) {
@@ -12433,21 +12495,50 @@ function Phone({
   const handleInputChange = React.useCallback(value => {
     setPhone(value);
 
-    if (phone !== null && phone !== void 0 && phone.length) {
-      dispatch({
-        type: SET_PHONE,
-        payload: phone
-      });
-    } else if (finishedTyping && otherProps.required) {
-      dispatch({
-        type: SET_PHONE_ERROR,
-        payload: t("validation.enterPhone")
-      });
+    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]);
+  }, [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,
@@ -12458,16 +12549,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
@@ -12479,7 +12566,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", {
@@ -12489,25 +12575,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"),
@@ -12553,9 +12632,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", {
@@ -15274,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: ""
@@ -15392,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,
@@ -16917,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
@@ -17131,7 +17255,7 @@ const SubmitPaymentMethod = ({
   onClick,
   ...otherProps
 }) => {
-  var _plan$quantity;
+  var _plan$quantity, _window$Pelcro$site$r;
 
   const {
     plan
@@ -17142,6 +17266,12 @@ const SubmitPaymentMethod = ({
   const {
     dispatch,
     state: {
+      firstNameError,
+      lastNameError,
+      phoneError,
+      firstName,
+      lastName,
+      phone,
       disableSubmit,
       isLoading,
       updatedPrice
@@ -17150,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",
@@ -17161,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"));
@@ -17709,7 +17851,7 @@ const SelectedPaymentMethod = () => {
 };
 
 const TaxAmount = () => {
-  var _plan$quantity;
+  var _plan$quantity, _window$Pelcro$site, _window$Pelcro$site$r;
 
   const {
     t
@@ -17724,18 +17866,31 @@ const TaxAmount = () => {
   } = usePelcro();
   const planQuantity = (_plan$quantity = plan === null || plan === void 0 ? void 0 : plan.quantity) !== null && _plan$quantity !== void 0 ? _plan$quantity : 1;
   const priceFormatted = getFormattedPriceByLocal(taxAmount * planQuantity, plan === null || plan === void 0 ? void 0 : plan.currency, getPageOrDefaultLanguage());
+  const isTaxInclusive = (_window$Pelcro$site = window.Pelcro.site) === null || _window$Pelcro$site === void 0 ? void 0 : (_window$Pelcro$site$r = _window$Pelcro$site.read()) === null || _window$Pelcro$site$r === void 0 ? void 0 : _window$Pelcro$site$r.tax_inclusive;
 
   if (taxAmount) {
     return /*#__PURE__*/React__default['default'].createElement("div", {
       className: "plc-text-center pelcro-tax-amount"
-    }, t("labels.tax"), " ", /*#__PURE__*/React__default['default'].createElement("span", {
+    }, isTaxInclusive && "(", isTaxInclusive ? `Includes ${t("labels.tax")}` : `+ ${t("labels.tax")}`, " ", /*#__PURE__*/React__default['default'].createElement("span", {
       className: "plc-font-bold"
-    }, priceFormatted));
+    }, priceFormatted), isTaxInclusive && ")");
   }
 
   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));
+
 /**
  *
  */
@@ -17755,7 +17910,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", {
@@ -17777,7 +17935,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"
@@ -19553,7 +19729,7 @@ const UserUpdateButton = ({
   } = 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));
+    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: () => {
@@ -22951,10 +23127,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));
 
@@ -30721,6 +30899,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;

package/dist/index.esm.js

@@ -3793,8 +3793,11 @@ var labels$F = {
 	"for": "for",
 	interval: "{{count}} {{interval}}",
 	interval_plural: "{{count}} {{interval}}s",
-	tax: "+ Tax",
-	removeCoupon: "REMOVE"
+	tax: "Tax",
+	removeCoupon: "REMOVE",
+	firstName: "First name",
+	lastName: "Last name",
+	phone: "Phone"
 };
 var checkoutForm_en = {
 	messages: messages$I,
@@ -3820,8 +3823,11 @@ var labels$E = {
 	"for": "pour",
 	interval: "{{count}} {{interval}}",
 	interval_plural: "{{count}} {{interval}}s",
-	tax: "+ Taxe",
-	removeCoupon: "RETIRER"
+	tax: "Taxe",
+	removeCoupon: "RETIRER",
+	firstName: "Prénom",
+	lastName: "Nom de famille",
+	phone: "Téléphoner"
 };
 var checkoutForm_fr = {
 	messages: messages$H,
@@ -3847,8 +3853,11 @@ var labels$D = {
 	"for": "관련",
 	interval: "{{count}} {{interval}}",
 	interval_plural: "{{count}} {{interval}}",
-	tax: "+ 세금",
-	removeCoupon: "제거"
+	tax: "세금",
+	removeCoupon: "제거",
+	firstName: "이름",
+	lastName: "성",
+	phone: "핸드폰"
 };
 var checkoutForm_ko = {
 	messages: messages$G,
@@ -7217,8 +7226,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({
@@ -12247,32 +12255,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,11 +12285,12 @@ 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"));
 };
 
 function FirstName({
+  initWithUserFirstName = true,
   store,
   ...otherProps
 }) {
@@ -12307,21 +12309,50 @@ function FirstName({
   const handleInputChange = useCallback(value => {
     setFirstName(value);
 
-    if (firstName !== null && firstName !== void 0 && firstName.length) {
-      dispatch({
-        type: SET_FIRST_NAME,
-        payload: firstName
-      });
-    } else if (finishedTyping && otherProps.required) {
-      dispatch({
-        type: SET_FIRST_NAME_ERROR,
-        payload: t("validation.enterFirstName")
-      });
+    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]);
   useEffect(() => {
     handleInputChange(firstName);
-  }, [finishedTyping, firstName, handleInputChange]);
+  }, [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: window.Pelcro.user.read().first_name
+    });
+  };
+
+  useEffect(() => {
+    if (initWithUserFirstName) {
+      document.addEventListener("PelcroUserLoaded", () => {
+        loadFirstNameIntoField();
+      });
+      loadFirstNameIntoField();
+      return () => {
+        document.removeEventListener("PelcroUserLoaded", handleInputChange);
+      };
+    }
+  }, []);
   return /*#__PURE__*/React__default.createElement(Input, Object.assign({
     type: "text",
     error: firstNameError,
@@ -12337,6 +12368,7 @@ const RegisterFirstName = props => /*#__PURE__*/React__default.createElement(Fir
 }, props));
 
 function LastName({
+  initWithUserLastName = true,
   store,
   ...otherProps
 }) {
@@ -12355,21 +12387,50 @@ function LastName({
   const handleInputChange = useCallback(value => {
     setLastName(value);
 
-    if (lastName !== null && lastName !== void 0 && lastName.length) {
-      dispatch({
-        type: SET_LAST_NAME,
-        payload: lastName
-      });
-    } else if (finishedTyping && otherProps.required) {
-      dispatch({
-        type: SET_LAST_NAME_ERROR,
-        payload: t("validation.enterLastName")
-      });
+    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]);
   useEffect(() => {
     handleInputChange(lastName);
-  }, [finishedTyping, lastName, handleInputChange]);
+  }, [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: window.Pelcro.user.read().last_name
+    });
+  };
+
+  useEffect(() => {
+    if (initWithUserLastName) {
+      document.addEventListener("PelcroUserLoaded", () => {
+        loadLastNameIntoField();
+      });
+      loadLastNameIntoField();
+      return () => {
+        document.removeEventListener("PelcroUserLoaded", handleInputChange);
+      };
+    }
+  }, []);
   return /*#__PURE__*/React__default.createElement(Input, Object.assign({
     type: "text",
     error: lastNameError,
@@ -12385,6 +12446,7 @@ const RegisterLastName = props => /*#__PURE__*/React__default.createElement(Last
 }, props));
 
 function Phone({
+  initWithUserPhone = true,
   store,
   ...otherProps
 }) {
@@ -12403,21 +12465,50 @@ function Phone({
   const handleInputChange = useCallback(value => {
     setPhone(value);
 
-    if (phone !== null && phone !== void 0 && phone.length) {
-      dispatch({
-        type: SET_PHONE,
-        payload: phone
-      });
-    } else if (finishedTyping && otherProps.required) {
-      dispatch({
-        type: SET_PHONE_ERROR,
-        payload: t("validation.enterPhone")
-      });
+    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]);
   useEffect(() => {
     handleInputChange(phone);
-  }, [finishedTyping, phone, handleInputChange]);
+  }, [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
+    });
+  };
+
+  useEffect(() => {
+    if (initWithUserPhone) {
+      document.addEventListener("PelcroUserLoaded", () => {
+        loadPhoneIntoField();
+      });
+      loadPhoneIntoField();
+      return () => {
+        document.removeEventListener("PelcroUserLoaded", handleInputChange);
+      };
+    }
+  }, []);
   return /*#__PURE__*/React__default.createElement(Input, Object.assign({
     type: "tel",
     error: phoneError,
@@ -12428,16 +12519,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
@@ -12449,7 +12536,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", {
@@ -12459,25 +12545,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"),
@@ -12523,9 +12602,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", {
@@ -15244,6 +15323,12 @@ const initialState$j = {
   updatedPrice: null,
   taxAmount: null,
   currentPlan: null,
+  firstName: "",
+  lastName: "",
+  phone: "",
+  firstNameError: null,
+  lastNameError: null,
+  phoneError: null,
   alert: {
     type: "error",
     content: ""
@@ -15362,6 +15447,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,
@@ -16887,6 +16975,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
@@ -17101,7 +17225,7 @@ const SubmitPaymentMethod = ({
   onClick,
   ...otherProps
 }) => {
-  var _plan$quantity;
+  var _plan$quantity, _window$Pelcro$site$r;
 
   const {
     plan
@@ -17112,6 +17236,12 @@ const SubmitPaymentMethod = ({
   const {
     dispatch,
     state: {
+      firstNameError,
+      lastNameError,
+      phoneError,
+      firstName,
+      lastName,
+      phone,
       disableSubmit,
       isLoading,
       updatedPrice
@@ -17120,6 +17250,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 !== 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.createElement(Button, Object.assign({
     role: "submit",
     className: "plc-w-full plc-py-3",
@@ -17131,7 +17273,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"));
@@ -17679,7 +17821,7 @@ const SelectedPaymentMethod = () => {
 };
 
 const TaxAmount = () => {
-  var _plan$quantity;
+  var _plan$quantity, _window$Pelcro$site, _window$Pelcro$site$r;
 
   const {
     t
@@ -17694,18 +17836,31 @@ const TaxAmount = () => {
   } = usePelcro();
   const planQuantity = (_plan$quantity = plan === null || plan === void 0 ? void 0 : plan.quantity) !== null && _plan$quantity !== void 0 ? _plan$quantity : 1;
   const priceFormatted = getFormattedPriceByLocal(taxAmount * planQuantity, plan === null || plan === void 0 ? void 0 : plan.currency, getPageOrDefaultLanguage());
+  const isTaxInclusive = (_window$Pelcro$site = window.Pelcro.site) === null || _window$Pelcro$site === void 0 ? void 0 : (_window$Pelcro$site$r = _window$Pelcro$site.read()) === null || _window$Pelcro$site$r === void 0 ? void 0 : _window$Pelcro$site$r.tax_inclusive;
 
   if (taxAmount) {
     return /*#__PURE__*/React__default.createElement("div", {
       className: "plc-text-center pelcro-tax-amount"
-    }, t("labels.tax"), " ", /*#__PURE__*/React__default.createElement("span", {
+    }, isTaxInclusive && "(", isTaxInclusive ? `Includes ${t("labels.tax")}` : `+ ${t("labels.tax")}`, " ", /*#__PURE__*/React__default.createElement("span", {
       className: "plc-font-bold"
-    }, priceFormatted));
+    }, priceFormatted), isTaxInclusive && ")");
   }
 
   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));
+
 /**
  *
  */
@@ -17725,7 +17880,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", {
@@ -17747,7 +17905,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"
@@ -19523,7 +19699,7 @@ const UserUpdateButton = ({
   } = 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));
+    setDisabled(buttonDisabled || emailError || !(email !== null && email !== void 0 && email.length) || supportsTap && firstNameError || supportsTap && lastNameError || supportsTap && phoneError || supportsTap && !(firstName !== null && firstName !== void 0 && firstName.length) || supportsTap && !(lastName !== null && lastName !== void 0 && lastName.length) || supportsTap && !(phone !== null && phone !== void 0 && phone.length));
   }, [email, firstName, lastName, phone, buttonDisabled, emailError, firstNameError, lastNameError, phoneError]);
   return /*#__PURE__*/React__default.createElement(Button, Object.assign({
     onClick: () => {
@@ -22921,10 +23097,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));
 
@@ -30615,4 +30793,4 @@ const QrCodeModal = ({
 };
 QrCodeModal.viewId = "qrcode";
 
-export { AddressCreateCity, AddressCreateContainer, AddressCreateCountrySelect, AddressCreateFirstName, AddressCreateLastName, AddressCreateLine1, AddressCreateLine2, AddressCreateModal, AddressCreatePostalCode, AddressCreateSetDefault, AddressCreateStateSelect, AddressCreateSubmit, AddressCreateTextInput, AddressCreateView, AddressSelectContainer, AddressSelectList, AddressSelectModal, AddressSelectSubmit, AddressSelectView, AddressUpdateCity, AddressUpdateContainer, AddressUpdateCountrySelect, AddressUpdateFirstName, AddressUpdateLastName, AddressUpdateLine1, AddressUpdateLine2, AddressUpdateModal, AddressUpdatePostalCode, AddressUpdateSetDefault, AddressUpdateStateSelect, AddressUpdateSubmit, AddressUpdateTextInput, AddressUpdateView, AlertWithContext as Alert, Alert as AlertElement, ApplyCouponButton, Auth0LoginButton, Badge, BankRedirection, Button, CartContainer, CartModal, CartRemoveItemButton, CartSubmit, CartTotalPrice, CartView, Checkbox, CheckoutForm, ConfirmPassword, CouponCode, CouponCodeField, DashboardWithHook as Dashboard, DashboardOpenButton, DatePicker, DiscountedPrice, Email, EmailVerifyContainer, EmailVerifyModal, EmailVerifyResendButton, EmailVerifyView, FacebookLoginButton, GiftCreateContainer, GiftCreateEmail, GiftCreateFirstName, GiftCreateLastName, GiftCreateMessage, GiftCreateModal, GiftCreateStartDate, GiftCreateSubmitButton, GiftCreateView, GiftRedeemCode, GiftRedeemContainer, GiftRedeemModal, GiftRedeemSubmitButton, GiftRedeemView, GoogleLoginButton, Input, InvoiceDetailsContainer, InvoiceDetailsDownloadButton, InvoiceDetailsModal, InvoiceDetailsPayButton, InvoiceDetailsView, InvoicePaymentContainer, InvoicePaymentModal, InvoicePaymentView, Link, LoginButton, LoginContainer, LoginEmail, LoginModal, LoginPassword, LoginRequestLoginToken, LoginView, Logout, MeterModal, MeterView, Modal, ModalBody, ModalFooter, NewsletterWithHook as NewsLetter, NewsletterUpdateButton, NewsletterUpdateContainer, NewsletterUpdateList, NewsletterUpdateModal, NewsletterUpdateView, Notification, OrderConfirmModal, OrderCreateContainer, OrderCreateModal, OrderCreateSubmitButton, OrderCreateView, Password, PasswordChangeButton, PasswordChangeConfirmNewPassword, PasswordChangeContainer, PasswordChangeCurrentPassword, PasswordChangeModal, PasswordChangeNewPassword, PasswordChangeView, PasswordForgotButton, PasswordForgotContainer, PasswordForgotEmail, PasswordForgotModal, PasswordForgotView, PasswordResetButton, PasswordResetConfirmPassword, PasswordResetContainer, PasswordResetEmail, PasswordResetModal, PasswordResetPassword, PasswordResetView, PasswordlessRequestContainer, PasswordlessRequestEmail, PasswordlessRequestModal, PasswordlessRequestView, PasswordlessRequestViewButton, PaymentCreateContainer, PaymentCreateView, PaymentMethodContainer, PaymentMethodSelectContainer, PaymentMethodSelectList, PaymentMethodSelectModal, PaymentMethodSelectSubmit, PaymentMethodSelectView, PaymentMethodUpdateContainer, PaymentMethodUpdateModal, PaymentMethodUpdateView, PaymentMethodView, PaymentSuccessModal, PaymentSuccessView, PaypalSubscribeButton, PelcroCardCVC, PelcroCardExpiry, PelcroCardNumber, PelcroModalController, PelcroPaymentRequestButton, ProfilePicChangeButton, ProfilePicChangeContainer, ProfilePicChangeCropper, ProfilePicChangeModal, ProfilePicChangeRemoveButton, ProfilePicChangeSelectButton, ProfilePicChangeView, ProfilePicChangeZoom, QrCodeModal, QrCodeView, Radio, RegisterButton, RegisterCompany, RegisterContainer, RegisterEmail, RegisterFirstName, RegisterJobTitle, RegisterLastName, RegisterModal, RegisterPassword, RegisterView, Select, SelectModalWithHook as SelectModal, SelectedPaymentMethod, ShopPurchaseButton, ShopSelectProductButton, ShopView, SubmitPaymentMethod, SubscriptionCancelModal, SubscriptionCreateContainer, SubscriptionCreateModal, SubscriptionCreateView, SubscriptionRenewContainer, SubscriptionRenewModal, SubscriptionRenewView, SubscriptionSuspendContainer, SubscriptionSuspendModal, SubscriptionSuspendView, TaxAmount, TextArea, Tooltip, UserUpdateButton, UserUpdateContainer, UserUpdateDisplayName, UserUpdateEmail, UserUpdateFirstName, UserUpdateLastName, UserUpdateModal, UserUpdatePhone, UserUpdateProfilePic, UserUpdateTextInput, UserUpdateView, VerifyLinkTokenContainer, VerifyLinkTokenLoader, VerifyLinkTokenModal, VerifyLinkTokenView, authenticatedButtons, i18next as i18n, init$1 as initButtons, init as initContentEntitlement, invoicePaymentSubmitButton, notify, unauthenticatedButtons, usePelcro };
+export { AddressCreateCity, AddressCreateContainer, AddressCreateCountrySelect, AddressCreateFirstName, AddressCreateLastName, AddressCreateLine1, AddressCreateLine2, AddressCreateModal, AddressCreatePostalCode, AddressCreateSetDefault, AddressCreateStateSelect, AddressCreateSubmit, AddressCreateTextInput, AddressCreateView, AddressSelectContainer, AddressSelectList, AddressSelectModal, AddressSelectSubmit, AddressSelectView, AddressUpdateCity, AddressUpdateContainer, AddressUpdateCountrySelect, AddressUpdateFirstName, AddressUpdateLastName, AddressUpdateLine1, AddressUpdateLine2, AddressUpdateModal, AddressUpdatePostalCode, AddressUpdateSetDefault, AddressUpdateStateSelect, AddressUpdateSubmit, AddressUpdateTextInput, AddressUpdateView, AlertWithContext as Alert, Alert as AlertElement, ApplyCouponButton, Auth0LoginButton, Badge, BankRedirection, Button, CartContainer, CartModal, CartRemoveItemButton, CartSubmit, CartTotalPrice, CartView, Checkbox, CheckoutForm, ConfirmPassword, CouponCode, CouponCodeField, DashboardWithHook as Dashboard, DashboardOpenButton, DatePicker, DiscountedPrice, Email, EmailVerifyContainer, EmailVerifyModal, EmailVerifyResendButton, EmailVerifyView, FacebookLoginButton, GiftCreateContainer, GiftCreateEmail, GiftCreateFirstName, GiftCreateLastName, GiftCreateMessage, GiftCreateModal, GiftCreateStartDate, GiftCreateSubmitButton, GiftCreateView, GiftRedeemCode, GiftRedeemContainer, GiftRedeemModal, GiftRedeemSubmitButton, GiftRedeemView, GoogleLoginButton, IncludeFirstName, IncludeLastName, IncludePhone, Input, InvoiceDetailsContainer, InvoiceDetailsDownloadButton, InvoiceDetailsModal, InvoiceDetailsPayButton, InvoiceDetailsView, InvoicePaymentContainer, InvoicePaymentModal, InvoicePaymentView, Link, LoginButton, LoginContainer, LoginEmail, LoginModal, LoginPassword, LoginRequestLoginToken, LoginView, Logout, MeterModal, MeterView, Modal, ModalBody, ModalFooter, NewsletterWithHook as NewsLetter, NewsletterUpdateButton, NewsletterUpdateContainer, NewsletterUpdateList, NewsletterUpdateModal, NewsletterUpdateView, Notification, OrderConfirmModal, OrderCreateContainer, OrderCreateModal, OrderCreateSubmitButton, OrderCreateView, Password, PasswordChangeButton, PasswordChangeConfirmNewPassword, PasswordChangeContainer, PasswordChangeCurrentPassword, PasswordChangeModal, PasswordChangeNewPassword, PasswordChangeView, PasswordForgotButton, PasswordForgotContainer, PasswordForgotEmail, PasswordForgotModal, PasswordForgotView, PasswordResetButton, PasswordResetConfirmPassword, PasswordResetContainer, PasswordResetEmail, PasswordResetModal, PasswordResetPassword, PasswordResetView, PasswordlessRequestContainer, PasswordlessRequestEmail, PasswordlessRequestModal, PasswordlessRequestView, PasswordlessRequestViewButton, PaymentCreateContainer, PaymentCreateView, PaymentMethodContainer, PaymentMethodSelectContainer, PaymentMethodSelectList, PaymentMethodSelectModal, PaymentMethodSelectSubmit, PaymentMethodSelectView, PaymentMethodUpdateContainer, PaymentMethodUpdateModal, PaymentMethodUpdateView, PaymentMethodView, PaymentSuccessModal, PaymentSuccessView, PaypalSubscribeButton, PelcroCardCVC, PelcroCardExpiry, PelcroCardNumber, PelcroModalController, PelcroPaymentRequestButton, ProfilePicChangeButton, ProfilePicChangeContainer, ProfilePicChangeCropper, ProfilePicChangeModal, ProfilePicChangeRemoveButton, ProfilePicChangeSelectButton, ProfilePicChangeView, ProfilePicChangeZoom, QrCodeModal, QrCodeView, Radio, RegisterButton, RegisterCompany, RegisterContainer, RegisterEmail, RegisterFirstName, RegisterJobTitle, RegisterLastName, RegisterModal, RegisterPassword, RegisterView, Select, SelectModalWithHook as SelectModal, SelectedPaymentMethod, ShopPurchaseButton, ShopSelectProductButton, ShopView, SubmitPaymentMethod, SubscriptionCancelModal, SubscriptionCreateContainer, SubscriptionCreateModal, SubscriptionCreateView, SubscriptionRenewContainer, SubscriptionRenewModal, SubscriptionRenewView, SubscriptionSuspendContainer, SubscriptionSuspendModal, SubscriptionSuspendView, TaxAmount, TextArea, Tooltip, UserUpdateButton, UserUpdateContainer, UserUpdateDisplayName, UserUpdateEmail, UserUpdateFirstName, UserUpdateLastName, UserUpdateModal, UserUpdatePhone, UserUpdateProfilePic, UserUpdateTextInput, UserUpdateView, VerifyLinkTokenContainer, VerifyLinkTokenLoader, VerifyLinkTokenModal, VerifyLinkTokenView, authenticatedButtons, i18next as i18n, init$1 as initButtons, init as initContentEntitlement, invoicePaymentSubmitButton, notify, unauthenticatedButtons, usePelcro };

package/package.json

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