@pelcro/react-pelcro-js 3.26.0-beta.46 → 3.26.0-beta.48

package/dist/index.cjs.js

@@ -3252,6 +3252,8 @@ var validation$3 = {
 	enterFirstName: "First name is required.",
 	enterLastName: "Last name is required.",
 	enterPhone: "Phone number is required.",
+	enterCompany: "Company is required.",
+	enterTitle: "Title is required.",
 	enterFieldName: "{{fieldName}} is required."
 };
 var buttons$n = {
@@ -3566,7 +3568,9 @@ var labels$12 = {
 	required: "required",
 	firstName: "First name",
 	lastName: "Last name",
-	phone: "Phone"
+	phone: "Phone",
+	company: "Company",
+	title: "Title"
 };
 var messages$15 = {
 	alreadyHaveAccount: "Already have an account?",
@@ -3666,7 +3670,9 @@ var labels$11 = {
 	selectImage: "Upload new photo",
 	removeImage: "Remove current photo",
 	zoom: "Zoom",
-	tin: "Tax Identification Number"
+	tin: "Tax Identification Number",
+	company: "Company",
+	userTitle: "Title"
 };
 var messages$14 = {
 	userUpdated: "Thanks! Your profile was updated successfully.",
@@ -4206,6 +4212,8 @@ var validation$2 = {
 	enterFirstName: "Le prénom est requis.",
 	enterLastName: "Le nom de famille est requis.",
 	enterPhone: "Le numéro de téléphone est requis.",
+	enterCompany: "L'entreprise est obligatoire.",
+	enterTitle: "Le titre est obligatoire.",
 	enterFieldName: "{{fieldName}} est requis."
 };
 var buttons$h = {
@@ -4520,7 +4528,9 @@ var labels$M = {
 	required: "Champs obligatoires",
 	firstName: "Prénom",
 	lastName: "Nom de famille",
-	phone: "Téléphoner"
+	phone: "Téléphoner",
+	company: "Entreprise",
+	title: "Titre"
 };
 var messages$O = {
 	alreadyHaveAccount: "Vous avez déjà un compte?",
@@ -4621,7 +4631,9 @@ var labels$L = {
 	selectImage: "Télécharger une nouvelle photo",
 	removeImage: "supprimer la photo actuelle",
 	zoom: "Zoom",
-	tin: "Numéro d'identification fiscale"
+	tin: "Numéro d'identification fiscale",
+	company: "Entreprise",
+	userTitle: "Titre"
 };
 var messages$N = {
 	userUpdated: "Votre profil a été mis à jour avec succès.",
@@ -5150,6 +5162,8 @@ var validation$1 = {
 	enterFirstName: "이름은 필수 항목입니다.",
 	enterLastName: "성은 필수 항목입니다.",
 	enterPhone: "전화번호는 필수 항목입니다.",
+	enterCompany: "회사는 필수입니다.",
+	enterTitle: "제목은 필수 입력 사항입니다.",
 	enterFieldName: "{{fieldName}} 필수."
 };
 var buttons$b = {
@@ -5464,7 +5478,9 @@ var labels$u = {
 	required: "필수 항목",
 	firstName: "이름",
 	lastName: "성",
-	phone: "핸드폰"
+	phone: "핸드폰",
+	company: "회사",
+	title: "제목"
 };
 var messages$v = {
 	alreadyHaveAccount: "이미 계정이 있습니까?",
@@ -5564,7 +5580,9 @@ var labels$t = {
 	selectImage: "새로운 사진 업로드",
 	removeImage: "기존 사진 제거",
 	zoom: "확대",
-	tin: "세금 식별 번호"
+	tin: "세금 식별 번호",
+	company: "회사",
+	userTitle: "제목"
 };
 var messages$u = {
 	userUpdated: "감사합니다! 프로필이 성공적으로 업데이트되었습니다.",
@@ -6200,6 +6218,8 @@ var validation = {
 	enterFirstName: "El nombre es obligatorio.",
 	enterLastName: "El apellido es obligatorio.",
 	enterPhone: "El número de teléfono es obligatorio.",
+	enterCompany: "La empresa es obligatorio.",
+	enterTitle: "El título es obligatorio.",
 	enterFieldName: "{{fieldName}} es obligatorio."
 };
 var buttons$5 = {
@@ -6510,7 +6530,9 @@ var labels$c = {
 	required: "obligatorio",
 	firstName: "Nombre",
 	lastName: "Apellido",
-	phone: "Teléfono"
+	phone: "Teléfono",
+	company: "Empresa",
+	title: "Título"
 };
 var messages$c = {
 	alreadyHaveAccount: " ¿Ya tienes una cuenta?",
@@ -6610,7 +6632,9 @@ var labels$b = {
 	selectImage: "Subir nueva foto",
 	removeImage: "Eliminar foto actual",
 	zoom: "Acercar",
-	tin: "Número de Identificación Fiscal"
+	tin: "Número de Identificación Fiscal",
+	company: "Empresa",
+	userTitle: "Título"
 };
 var messages$b = {
 	userUpdated: "¡Gracias! Tu perfil se actualizó con éxito.",
@@ -12893,6 +12917,8 @@ const SET_PASSWORD_ERROR = "SET_PASSWORD_ERROR";
 const SET_FIRST_NAME_ERROR = "SET_FIRST_NAME_ERROR";
 const SET_LAST_NAME_ERROR = "SET_LAST_NAME_ERROR";
 const SET_PHONE_ERROR = "SET_PHONE_ERROR";
+const SET_COMPANY_ERROR = "SET_COMPANY_ERROR";
+const SET_TITLE_ERROR = "SET_TITLE_ERROR";
 const SET_TEXT_FIELD = "SET_TEXT_FIELD";
 const SET_TEXT_FIELD_ERROR = "SET_TEXT_FIELD_ERROR";
 const SET_MONTH = "SET_MONTH";
@@ -12930,6 +12956,8 @@ const SET_LAST_NAME = "SET_LAST_NAME";
 const SET_START_DATE = "SET_START_DATE";
 const SET_GIFT_MESSAGE = "SET_GIFT_MESSAGE";
 const SET_PHONE = "SET_PHONE";
+const SET_COMPANY = "SET_COMPANY";
+const SET_TITLE = "SET_TITLE";
 const SET_TIN = "SET_TIN";
 const GET_COUNTRIES_SUCCESS = "GET_COUNTRIES_SUCCESS";
 const GET_COUNTRIES_FETCH = "GET_COUNTRIES_FETCH";
@@ -13631,6 +13659,8 @@ const initialState$m = {
   firstName: "",
   lastName: "",
   phone: "",
+  company: "",
+  title: "",
   emailError: null,
   passwordError: null,
   confirmPassword: "",
@@ -13640,6 +13670,8 @@ const initialState$m = {
   firstNameError: null,
   lastNameError: null,
   phoneError: null,
+  companyError: null,
+  titleError: null,
   selectFields: {},
   alert: {
     type: "error",
@@ -13670,8 +13702,8 @@ const RegisterContainer = _ref => {
       firstName,
       lastName,
       phone,
-      organization,
-      jobTitle,
+      company,
+      title,
       selectFields
     } = filteredData;
     if (!hasSecurityTokenEnabled$1()) {
@@ -13692,10 +13724,10 @@ const RegisterContainer = _ref => {
         first_name: firstName,
         last_name: lastName,
         phone: phone,
+        title: title,
+        organization: company,
         security_token: securityToken,
         metadata: {
-          organization,
-          jobTitle,
           ...selectFields
         }
       }, (err, res) => {
@@ -13803,6 +13835,18 @@ const RegisterContainer = _ref => {
           phone: action.payload,
           phoneError: null
         });
+      case SET_COMPANY:
+        return lib_7({
+          ...state,
+          company: action.payload,
+          companyError: null
+        });
+      case SET_TITLE:
+        return lib_7({
+          ...state,
+          title: action.payload,
+          titleError: null
+        });
       case SET_TEXT_FIELD:
         return lib_7({
           ...state,
@@ -13844,6 +13888,18 @@ const RegisterContainer = _ref => {
           phoneError: action.payload,
           phone: null
         });
+      case SET_COMPANY_ERROR:
+        return lib_7({
+          ...state,
+          companyError: action.payload,
+          company: null
+        });
+      case SET_TITLE_ERROR:
+        return lib_7({
+          ...state,
+          titleError: action.payload,
+          title: null
+        });
       case SET_TEXT_FIELD_ERROR:
         return lib_7({
           ...state,
@@ -14905,98 +14961,10 @@ function hasSecurityTokenEnabled() {
   return Boolean((_window$Pelcro$site = window.Pelcro.site) === null || _window$Pelcro$site === void 0 ? void 0 : (_window$Pelcro$site$r4 = _window$Pelcro$site.read()) === null || _window$Pelcro$site$r4 === void 0 ? void 0 : _window$Pelcro$site$r4.security_key);
 }
 
-const Loader = props => /*#__PURE__*/React__default['default'].createElement("div", {
-  className: `pelcro-loader-wrapper ${props.className}`
-}, /*#__PURE__*/React__default['default'].createElement("svg", {
-  width: props.width,
-  height: props.height,
-  viewBox: "0 0 120 30",
-  xmlns: "http://www.w3.org/2000/svg",
-  fill: "currentColor",
-  "aria-label": props.label
-}, /*#__PURE__*/React__default['default'].createElement("circle", {
-  cx: "15",
-  cy: "15",
-  r: props.radius + 6
-}, /*#__PURE__*/React__default['default'].createElement("animate", {
-  attributeName: "r",
-  from: "15",
-  to: "15",
-  begin: "0s",
-  dur: "0.8s",
-  values: "15;9;15",
-  calcMode: "linear",
-  repeatCount: "indefinite"
-}), /*#__PURE__*/React__default['default'].createElement("animate", {
-  attributeName: "fillOpacity",
-  from: "1",
-  to: "1",
-  begin: "0s",
-  dur: "0.8s",
-  values: "1;.5;1",
-  calcMode: "linear",
-  repeatCount: "indefinite"
-})), /*#__PURE__*/React__default['default'].createElement("circle", {
-  cx: "60",
-  cy: "15",
-  r: props.radius,
-  attributeName: "fillOpacity",
-  from: "1",
-  to: "0.3"
-}, /*#__PURE__*/React__default['default'].createElement("animate", {
-  attributeName: "r",
-  from: "9",
-  to: "9",
-  begin: "0s",
-  dur: "0.8s",
-  values: "9;15;9",
-  calcMode: "linear",
-  repeatCount: "indefinite"
-}), /*#__PURE__*/React__default['default'].createElement("animate", {
-  attributeName: "fillOpacity",
-  from: "0.5",
-  to: "0.5",
-  begin: "0s",
-  dur: "0.8s",
-  values: ".5;1;.5",
-  calcMode: "linear",
-  repeatCount: "indefinite"
-})), /*#__PURE__*/React__default['default'].createElement("circle", {
-  cx: "105",
-  cy: "15",
-  r: props.radius + 6
-}, /*#__PURE__*/React__default['default'].createElement("animate", {
-  attributeName: "r",
-  from: "15",
-  to: "15",
-  begin: "0s",
-  dur: "0.8s",
-  values: "15;9;15",
-  calcMode: "linear",
-  repeatCount: "indefinite"
-}), /*#__PURE__*/React__default['default'].createElement("animate", {
-  attributeName: "fillOpacity",
-  from: "1",
-  to: "1",
-  begin: "0s",
-  dur: "0.8s",
-  values: "1;.5;1",
-  calcMode: "linear",
-  repeatCount: "indefinite"
-}))));
-Loader.defaultProps = {
-  height: 50,
-  width: 35,
-  color: "#32aea1",
-  label: "Loading data..",
-  radius: 9
-};
-
-function TextInput(_ref) {
-  var _window$Pelcro$user$r, _window$Pelcro$user$r2;
+function Title(_ref) {
   let {
+    initWithUserTitle = true,
     store,
-    fieldName,
     ...otherProps
   } = _ref;
   const {
@@ -15005,83 +14973,157 @@ function TextInput(_ref) {
   const {
     dispatch,
     state: {
-      [fieldName]: stateFieldName,
-      [fieldName + "Error"]: fieldNameError,
-      loading
+      title: stateTitle,
+      titleError
     }
   } = React.useContext(store);
-  const [fieldNameState, setFieldNameState] = React.useState(stateFieldName);
+  const [title, setTitle] = React.useState(stateTitle);
   const [finishedTyping, setFinishedTyping] = React.useState(false);
   const handleInputChange = React.useCallback(value => {
-    setFieldNameState(value);
+    setTitle(value);
     if (finishedTyping) {
-      if (fieldNameState !== null && fieldNameState !== void 0 && fieldNameState.length) {
+      if (title !== null && title !== void 0 && title.length) {
         dispatch({
-          type: SET_TEXT_FIELD,
-          payload: {
-            [fieldName]: value,
-            [fieldName + "Error"]: null
-          }
+          type: SET_TITLE,
+          payload: title
         });
       } else {
         if (otherProps.required) {
           dispatch({
-            type: SET_TEXT_FIELD_ERROR,
-            payload: {
-              [fieldName + "Error"]: t("validation.enterFieldName", {
-                fieldName: otherProps.label
-              }),
-              [fieldName]: null
-            }
+            type: SET_TITLE_ERROR,
+            payload: t("validation.enterTitle")
           });
         } else {
           dispatch({
-            type: SET_TEXT_FIELD,
-            payload: {
-              [fieldName]: value,
-              [fieldName + "Error"]: null
-            }
+            type: SET_TITLE,
+            payload: title
           });
         }
       }
     }
-  }, [dispatch, fieldNameState, finishedTyping] // eslint-disable-line react-hooks/exhaustive-deps
+  }, [dispatch, title, finishedTyping] // eslint-disable-line react-hooks/exhaustive-deps
   );
 
   React.useEffect(() => {
-    handleInputChange(fieldNameState);
-  }, [finishedTyping, fieldNameState, handleInputChange]);
-  if (loading) {
-    return /*#__PURE__*/React__default['default'].createElement(Loader, null);
-  }
+    handleInputChange(title);
+  }, [finishedTyping, title, handleInputChange]);
+
+  // Initialize title field with user's title
+  const loadTitleIntoField = () => {
+    var _window$Pelcro, _window$Pelcro$user, _window$Pelcro$user$r, _window$Pelcro2, _window$Pelcro2$user, _window$Pelcro2$user$;
+    handleInputChange((_window$Pelcro = window.Pelcro) === null || _window$Pelcro === void 0 ? void 0 : (_window$Pelcro$user = _window$Pelcro.user) === null || _window$Pelcro$user === void 0 ? void 0 : (_window$Pelcro$user$r = _window$Pelcro$user.read()) === null || _window$Pelcro$user$r === void 0 ? void 0 : _window$Pelcro$user$r.title);
+    dispatch({
+      type: SET_TITLE,
+      payload: (_window$Pelcro2 = window.Pelcro) === null || _window$Pelcro2 === void 0 ? void 0 : (_window$Pelcro2$user = _window$Pelcro2.user) === null || _window$Pelcro2$user === void 0 ? void 0 : (_window$Pelcro2$user$ = _window$Pelcro2$user.read()) === null || _window$Pelcro2$user$ === void 0 ? void 0 : _window$Pelcro2$user$.title
+    });
+  };
+  React.useEffect(() => {
+    if (initWithUserTitle) {
+      document.addEventListener("PelcroUserLoaded", () => {
+        loadTitleIntoField();
+      });
+      loadTitleIntoField();
+      return () => {
+        document.removeEventListener("PelcroUserLoaded", handleInputChange);
+      };
+    }
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
   return /*#__PURE__*/React__default['default'].createElement(Input, Object.assign({
     type: "text",
-    error: fieldNameError,
-    value: fieldNameState,
-    defaultValue: (_window$Pelcro$user$r = window.Pelcro.user.read()) === null || _window$Pelcro$user$r === void 0 ? void 0 : (_window$Pelcro$user$r2 = _window$Pelcro$user$r.metadata) === null || _window$Pelcro$user$r2 === void 0 ? void 0 : _window$Pelcro$user$r2[fieldName],
+    error: titleError,
+    value: title,
     onChange: e => handleInputChange(e.target.value),
     onBlur: () => setFinishedTyping(true),
     onFocus: () => setFinishedTyping(false)
   }, otherProps));
 }
 
-const RegisterTextInput = props => {
-  return /*#__PURE__*/React__default['default'].createElement(TextInput, Object.assign({}, props, {
-    store: store$m
-  }));
-};
+const RegisterJobTitle = props => /*#__PURE__*/React__default['default'].createElement(Title, Object.assign({
+  store: store$m
+}, props));
 
-const RegisterJobTitle = props => {
-  return /*#__PURE__*/React__default['default'].createElement(RegisterTextInput, Object.assign({
-    fieldName: "jobTitle"
-  }, props));
-};
+function Company(_ref) {
+  let {
+    initWithUserCompany = true,
+    store,
+    ...otherProps
+  } = _ref;
+  const {
+    t
+  } = useTranslation("common");
+  const {
+    dispatch,
+    state: {
+      company: stateCompany,
+      companyError
+    }
+  } = React.useContext(store);
+  const [company, setCompany] = React.useState(stateCompany);
+  const [finishedTyping, setFinishedTyping] = React.useState(false);
+  const handleInputChange = React.useCallback(value => {
+    setCompany(value);
+    if (finishedTyping) {
+      if (company !== null && company !== void 0 && company.length) {
+        dispatch({
+          type: SET_COMPANY,
+          payload: company
+        });
+      } else {
+        if (otherProps.required) {
+          dispatch({
+            type: SET_COMPANY_ERROR,
+            payload: t("validation.enterCompany")
+          });
+        } else {
+          dispatch({
+            type: SET_COMPANY,
+            payload: company
+          });
+        }
+      }
+    }
+  }, [dispatch, company, finishedTyping] // eslint-disable-line react-hooks/exhaustive-deps
+  );
 
-const RegisterCompany = props => {
-  return /*#__PURE__*/React__default['default'].createElement(RegisterTextInput, Object.assign({
-    fieldName: "organization"
-  }, props));
-};
+  React.useEffect(() => {
+    handleInputChange(company);
+  }, [finishedTyping, company, handleInputChange]);
+
+  // Initialize company field with user's company
+  const loadCompanyIntoField = () => {
+    var _window$Pelcro, _window$Pelcro$user, _window$Pelcro$user$r, _window$Pelcro$user$r2, _window$Pelcro2, _window$Pelcro2$user, _window$Pelcro2$user$, _window$Pelcro2$user$2;
+    handleInputChange((_window$Pelcro = window.Pelcro) === null || _window$Pelcro === void 0 ? void 0 : (_window$Pelcro$user = _window$Pelcro.user) === null || _window$Pelcro$user === void 0 ? void 0 : (_window$Pelcro$user$r = _window$Pelcro$user.read()) === null || _window$Pelcro$user$r === void 0 ? void 0 : (_window$Pelcro$user$r2 = _window$Pelcro$user$r.organization) === null || _window$Pelcro$user$r2 === void 0 ? void 0 : _window$Pelcro$user$r2.name);
+    dispatch({
+      type: SET_COMPANY,
+      payload: (_window$Pelcro2 = window.Pelcro) === null || _window$Pelcro2 === void 0 ? void 0 : (_window$Pelcro2$user = _window$Pelcro2.user) === null || _window$Pelcro2$user === void 0 ? void 0 : (_window$Pelcro2$user$ = _window$Pelcro2$user.read()) === null || _window$Pelcro2$user$ === void 0 ? void 0 : (_window$Pelcro2$user$2 = _window$Pelcro2$user$.organization) === null || _window$Pelcro2$user$2 === void 0 ? void 0 : _window$Pelcro2$user$2.name
+    });
+  };
+  React.useEffect(() => {
+    if (initWithUserCompany) {
+      document.addEventListener("PelcroUserLoaded", () => {
+        loadCompanyIntoField();
+      });
+      loadCompanyIntoField();
+      return () => {
+        document.removeEventListener("PelcroUserLoaded", handleInputChange);
+      };
+    }
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  return /*#__PURE__*/React__default['default'].createElement(Input, Object.assign({
+    type: "text",
+    error: companyError,
+    value: company,
+    onChange: e => handleInputChange(e.target.value),
+    onBlur: () => setFinishedTyping(true),
+    onFocus: () => setFinishedTyping(false)
+  }, otherProps));
+}
+
+const RegisterCompany = props => /*#__PURE__*/React__default['default'].createElement(Company, Object.assign({
+  store: store$m
+}, props));
 
 /**
  *
@@ -23487,6 +23529,93 @@ const NewsletterUpdateButton = _ref => {
   }, otherProps), name !== null && name !== void 0 ? name : t("labels.submit"));
 };
 
+const Loader = props => /*#__PURE__*/React__default['default'].createElement("div", {
+  className: `pelcro-loader-wrapper ${props.className}`
+}, /*#__PURE__*/React__default['default'].createElement("svg", {
+  width: props.width,
+  height: props.height,
+  viewBox: "0 0 120 30",
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "currentColor",
+  "aria-label": props.label
+}, /*#__PURE__*/React__default['default'].createElement("circle", {
+  cx: "15",
+  cy: "15",
+  r: props.radius + 6
+}, /*#__PURE__*/React__default['default'].createElement("animate", {
+  attributeName: "r",
+  from: "15",
+  to: "15",
+  begin: "0s",
+  dur: "0.8s",
+  values: "15;9;15",
+  calcMode: "linear",
+  repeatCount: "indefinite"
+}), /*#__PURE__*/React__default['default'].createElement("animate", {
+  attributeName: "fillOpacity",
+  from: "1",
+  to: "1",
+  begin: "0s",
+  dur: "0.8s",
+  values: "1;.5;1",
+  calcMode: "linear",
+  repeatCount: "indefinite"
+})), /*#__PURE__*/React__default['default'].createElement("circle", {
+  cx: "60",
+  cy: "15",
+  r: props.radius,
+  attributeName: "fillOpacity",
+  from: "1",
+  to: "0.3"
+}, /*#__PURE__*/React__default['default'].createElement("animate", {
+  attributeName: "r",
+  from: "9",
+  to: "9",
+  begin: "0s",
+  dur: "0.8s",
+  values: "9;15;9",
+  calcMode: "linear",
+  repeatCount: "indefinite"
+}), /*#__PURE__*/React__default['default'].createElement("animate", {
+  attributeName: "fillOpacity",
+  from: "0.5",
+  to: "0.5",
+  begin: "0s",
+  dur: "0.8s",
+  values: ".5;1;.5",
+  calcMode: "linear",
+  repeatCount: "indefinite"
+})), /*#__PURE__*/React__default['default'].createElement("circle", {
+  cx: "105",
+  cy: "15",
+  r: props.radius + 6
+}, /*#__PURE__*/React__default['default'].createElement("animate", {
+  attributeName: "r",
+  from: "15",
+  to: "15",
+  begin: "0s",
+  dur: "0.8s",
+  values: "15;9;15",
+  calcMode: "linear",
+  repeatCount: "indefinite"
+}), /*#__PURE__*/React__default['default'].createElement("animate", {
+  attributeName: "fillOpacity",
+  from: "1",
+  to: "1",
+  begin: "0s",
+  dur: "0.8s",
+  values: "1;.5;1",
+  calcMode: "linear",
+  repeatCount: "indefinite"
+}))));
+Loader.defaultProps = {
+  height: 50,
+  width: 35,
+  color: "#32aea1",
+  label: "Loading data..",
+  radius: 9
+};
+
 const NewsletterUpdateList = () => {
   const handleSelectNewsletter = event => {
     dispatch({
@@ -24165,7 +24294,7 @@ function SubscriptionManageMembersModal(_ref) {
 }
 SubscriptionManageMembersModal.viewId = "manage-members";
 
-var _window$Pelcro$user$r, _window$Pelcro$user$r2, _window$Pelcro$user$r3, _window$Pelcro$user$r4, _window$Pelcro$user$r5, _window$Pelcro$user$r6, _window$Pelcro$user$r7;
+var _window$Pelcro$user$r, _window$Pelcro$user$r2, _window$Pelcro$user$r3, _window$Pelcro$user$r4, _window$Pelcro$user$r5, _window$Pelcro$user$r6, _window$Pelcro$user$r7, _window$Pelcro$user$r8, _window$Pelcro$user$r9, _window$Pelcro$user$r10;
 const initialState$g = {
   email: (_window$Pelcro$user$r = window.Pelcro.user.read()) === null || _window$Pelcro$user$r === void 0 ? void 0 : _window$Pelcro$user$r.email,
   emailError: null,
@@ -24175,10 +24304,14 @@ const initialState$g = {
   lastNameError: null,
   username: (_window$Pelcro$user$r4 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r4 === void 0 ? void 0 : _window$Pelcro$user$r4.username,
   usernameError: null,
-  displayName: (_window$Pelcro$user$r5 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r5 === void 0 ? void 0 : _window$Pelcro$user$r5.display_name,
-  phone: (_window$Pelcro$user$r6 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r6 === void 0 ? void 0 : _window$Pelcro$user$r6.phone,
+  company: (_window$Pelcro$user$r5 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r5 === void 0 ? void 0 : (_window$Pelcro$user$r6 = _window$Pelcro$user$r5.organization) === null || _window$Pelcro$user$r6 === void 0 ? void 0 : _window$Pelcro$user$r6.name,
+  companyError: null,
+  title: (_window$Pelcro$user$r7 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r7 === void 0 ? void 0 : _window$Pelcro$user$r7.title,
+  titleError: null,
+  displayName: (_window$Pelcro$user$r8 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r8 === void 0 ? void 0 : _window$Pelcro$user$r8.display_name,
+  phone: (_window$Pelcro$user$r9 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r9 === void 0 ? void 0 : _window$Pelcro$user$r9.phone,
   phoneError: null,
-  tin: (_window$Pelcro$user$r7 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r7 === void 0 ? void 0 : _window$Pelcro$user$r7.tin,
+  tin: (_window$Pelcro$user$r10 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r10 === void 0 ? void 0 : _window$Pelcro$user$r10.tin,
   buttonDisabled: false,
   textFields: {},
   alert: {
@@ -24208,28 +24341,34 @@ const UserUpdateContainer = _ref => {
     loadUserDataIntoFields();
   }, []);
   const loadUserDataIntoFields = () => {
-    var _window$Pelcro$user$r8, _window$Pelcro$user$r9, _window$Pelcro$user$r10, _window$Pelcro$user$r11, _window$Pelcro$user$r12, _window$Pelcro$user$r13, _window$Pelcro$user$r14;
+    var _window$Pelcro$user$r11, _window$Pelcro$user$r12, _window$Pelcro$user$r13, _window$Pelcro$user$r14, _window$Pelcro$user$r15, _window$Pelcro$user$r16, _window$Pelcro$user$r17, _window$Pelcro$user$r18, _window$Pelcro$user$r19, _window$Pelcro$user$r20;
     const fields = [{
       type: SET_EMAIL,
-      payload: (_window$Pelcro$user$r8 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r8 === void 0 ? void 0 : _window$Pelcro$user$r8.email
+      payload: (_window$Pelcro$user$r11 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r11 === void 0 ? void 0 : _window$Pelcro$user$r11.email
     }, {
       type: SET_FIRST_NAME,
-      payload: (_window$Pelcro$user$r9 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r9 === void 0 ? void 0 : _window$Pelcro$user$r9.first_name
+      payload: (_window$Pelcro$user$r12 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r12 === void 0 ? void 0 : _window$Pelcro$user$r12.first_name
     }, {
       type: SET_LAST_NAME,
-      payload: (_window$Pelcro$user$r10 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r10 === void 0 ? void 0 : _window$Pelcro$user$r10.last_name
+      payload: (_window$Pelcro$user$r13 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r13 === void 0 ? void 0 : _window$Pelcro$user$r13.last_name
     }, {
       type: SET_USERNAME,
-      payload: (_window$Pelcro$user$r11 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r11 === void 0 ? void 0 : _window$Pelcro$user$r11.username
+      payload: (_window$Pelcro$user$r14 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r14 === void 0 ? void 0 : _window$Pelcro$user$r14.username
     }, {
       type: SET_DISPLAY_NAME,
-      payload: (_window$Pelcro$user$r12 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r12 === void 0 ? void 0 : _window$Pelcro$user$r12.display_name
+      payload: (_window$Pelcro$user$r15 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r15 === void 0 ? void 0 : _window$Pelcro$user$r15.display_name
     }, {
       type: SET_PHONE,
-      payload: (_window$Pelcro$user$r13 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r13 === void 0 ? void 0 : _window$Pelcro$user$r13.phone
+      payload: (_window$Pelcro$user$r16 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r16 === void 0 ? void 0 : _window$Pelcro$user$r16.phone
     }, {
       type: SET_TIN,
-      payload: (_window$Pelcro$user$r14 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r14 === void 0 ? void 0 : _window$Pelcro$user$r14.tin
+      payload: (_window$Pelcro$user$r17 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r17 === void 0 ? void 0 : _window$Pelcro$user$r17.tin
+    }, {
+      type: SET_COMPANY,
+      payload: (_window$Pelcro$user$r18 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r18 === void 0 ? void 0 : (_window$Pelcro$user$r19 = _window$Pelcro$user$r18.organization) === null || _window$Pelcro$user$r19 === void 0 ? void 0 : _window$Pelcro$user$r19.name
+    }, {
+      type: SET_TITLE,
+      payload: (_window$Pelcro$user$r20 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r20 === void 0 ? void 0 : _window$Pelcro$user$r20.title
     }];
     fields.filter(field => Boolean(field.payload)).forEach(field => {
       dispatch(field);
@@ -24244,7 +24383,9 @@ const UserUpdateContainer = _ref => {
       phone,
       tin,
       textFields,
-      displayName
+      displayName,
+      company,
+      title
     } = _ref2;
     window.Pelcro.user.update({
       auth_token: window.Pelcro.user.read().auth_token,
@@ -24257,6 +24398,8 @@ const UserUpdateContainer = _ref => {
       display_name: displayName,
       phone: phone,
       tin: tin,
+      organization: company,
+      title: title,
       metadata: {
         updated: "updated",
         ...textFields
@@ -24350,6 +24493,30 @@ const UserUpdateContainer = _ref => {
           usernameError: action.payload,
           username: ""
         });
+      case SET_COMPANY:
+        return lib_7({
+          ...state,
+          company: action.payload,
+          companyError: null
+        });
+      case SET_COMPANY_ERROR:
+        return lib_7({
+          ...state,
+          companyError: action.payload,
+          company: ""
+        });
+      case SET_TITLE:
+        return lib_7({
+          ...state,
+          title: action.payload,
+          titleError: null
+        });
+      case SET_TITLE_ERROR:
+        return lib_7({
+          ...state,
+          titleError: action.payload,
+          title: ""
+        });
       case SET_PHONE:
         return lib_7({
           ...state,
@@ -24802,6 +24969,102 @@ function UserUpdateModal(_ref) {
 }
 UserUpdateModal.viewId = "user-edit";
 
+function TextInput(_ref) {
+  var _window$Pelcro$user$r3, _window$Pelcro$user$r4;
+  let {
+    initWithFieldName = true,
+    store,
+    fieldName,
+    ...otherProps
+  } = _ref;
+  const {
+    t
+  } = useTranslation("common");
+  const {
+    dispatch,
+    state: {
+      [fieldName]: stateFieldName,
+      [fieldName + "Error"]: fieldNameError,
+      loading
+    }
+  } = React.useContext(store);
+  const [fieldNameState, setFieldNameState] = React.useState(stateFieldName);
+  const [finishedTyping, setFinishedTyping] = React.useState(false);
+  const handleInputChange = React.useCallback(value => {
+    setFieldNameState(value);
+    if (finishedTyping) {
+      if (fieldNameState !== null && fieldNameState !== void 0 && fieldNameState.length) {
+        dispatch({
+          type: SET_TEXT_FIELD,
+          payload: {
+            [fieldName]: value,
+            [fieldName + "Error"]: null
+          }
+        });
+      } else {
+        if (otherProps.required) {
+          dispatch({
+            type: SET_TEXT_FIELD_ERROR,
+            payload: {
+              [fieldName + "Error"]: t("validation.enterFieldName", {
+                fieldName: otherProps.label
+              }),
+              [fieldName]: null
+            }
+          });
+        } else {
+          dispatch({
+            type: SET_TEXT_FIELD,
+            payload: {
+              [fieldName]: value,
+              [fieldName + "Error"]: null
+            }
+          });
+        }
+      }
+    }
+  }, [dispatch, fieldNameState, finishedTyping] // eslint-disable-line react-hooks/exhaustive-deps
+  );
+
+  React.useEffect(() => {
+    handleInputChange(fieldNameState);
+  }, [finishedTyping, fieldNameState, handleInputChange]);
+
+  // Initialize field name field with user's first name
+  const loadFieldNameIntoField = () => {
+    var _window$Pelcro, _window$Pelcro$user, _window$Pelcro$user$r, _window$Pelcro$user$r2, _window$Pelcro2, _window$Pelcro2$user, _window$Pelcro2$user$, _window$Pelcro2$user$2;
+    handleInputChange((_window$Pelcro = window.Pelcro) === null || _window$Pelcro === void 0 ? void 0 : (_window$Pelcro$user = _window$Pelcro.user) === null || _window$Pelcro$user === void 0 ? void 0 : (_window$Pelcro$user$r = _window$Pelcro$user.read()) === null || _window$Pelcro$user$r === void 0 ? void 0 : (_window$Pelcro$user$r2 = _window$Pelcro$user$r.metadata) === null || _window$Pelcro$user$r2 === void 0 ? void 0 : _window$Pelcro$user$r2[fieldName]);
+    dispatch({
+      type: SET_TEXT_FIELD,
+      payload: (_window$Pelcro2 = window.Pelcro) === null || _window$Pelcro2 === void 0 ? void 0 : (_window$Pelcro2$user = _window$Pelcro2.user) === null || _window$Pelcro2$user === void 0 ? void 0 : (_window$Pelcro2$user$ = _window$Pelcro2$user.read()) === null || _window$Pelcro2$user$ === void 0 ? void 0 : (_window$Pelcro2$user$2 = _window$Pelcro2$user$.metadata) === null || _window$Pelcro2$user$2 === void 0 ? void 0 : _window$Pelcro2$user$2[fieldName]
+    });
+  };
+  React.useEffect(() => {
+    if (initWithFieldName) {
+      document.addEventListener("PelcroUserLoaded", () => {
+        loadFieldNameIntoField();
+      });
+      loadFieldNameIntoField();
+      return () => {
+        document.removeEventListener("PelcroUserLoaded", handleInputChange);
+      };
+    }
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  if (loading) {
+    return /*#__PURE__*/React__default['default'].createElement(Loader, null);
+  }
+  return /*#__PURE__*/React__default['default'].createElement(Input, Object.assign({
+    type: "text",
+    error: fieldNameError,
+    value: fieldNameState,
+    defaultValue: (_window$Pelcro$user$r3 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r3 === void 0 ? void 0 : (_window$Pelcro$user$r4 = _window$Pelcro$user$r3.metadata) === null || _window$Pelcro$user$r4 === void 0 ? void 0 : _window$Pelcro$user$r4[fieldName],
+    onChange: e => handleInputChange(e.target.value),
+    onBlur: () => setFinishedTyping(true),
+    onFocus: () => setFinishedTyping(false)
+  }, otherProps));
+}
+
 const UserUpdateTextInput = props => {
   return /*#__PURE__*/React__default['default'].createElement(TextInput, Object.assign({}, props, {
     store: store$g
@@ -36411,6 +36674,7 @@ exports.SubscriptionSuspendModal = SubscriptionSuspendModal;
 exports.SubscriptionSuspendView = SubscriptionSuspendView;
 exports.TaxAmount = TaxAmount;
 exports.TextArea = TextArea;
+exports.TextInput = TextInput;
 exports.Tooltip = Tooltip;
 exports.UserNameInput = UserNameInput;
 exports.UserUpdateButton = UserUpdateButton;