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

package/dist/index.cjs.js

@@ -3251,7 +3251,8 @@ var validation$3 = {
 	confirmPassword: "Confirm password is required.",
 	enterFirstName: "First name is required.",
 	enterLastName: "Last name is required.",
-	enterPhone: "Phone number is required."
+	enterPhone: "Phone number is required.",
+	enterFieldName: "{{fieldName}} is required."
 };
 var buttons$n = {
 	account: "My account",
@@ -4204,7 +4205,8 @@ var validation$2 = {
 	confirmPassword: "Confirmer le mot de passe requis.",
 	enterFirstName: "Le prénom est requis.",
 	enterLastName: "Le nom de famille est requis.",
-	enterPhone: "Le numéro de téléphone est requis."
+	enterPhone: "Le numéro de téléphone est requis.",
+	enterFieldName: "{{fieldName}} est requis."
 };
 var buttons$h = {
 	account: "Accès abonné(e)s",
@@ -5147,7 +5149,8 @@ var validation$1 = {
 	enterPassword: "비밀번호는 필수 항목입니다.",
 	enterFirstName: "이름은 필수 항목입니다.",
 	enterLastName: "성은 필수 항목입니다.",
-	enterPhone: "전화번호는 필수 항목입니다."
+	enterPhone: "전화번호는 필수 항목입니다.",
+	enterFieldName: "{{fieldName}} 필수."
 };
 var buttons$b = {
 	account: "내 계정",
@@ -6196,7 +6199,8 @@ var validation = {
 	confirmPassword: "Confirmar la contraseña es obligatorio.",
 	enterFirstName: "El nombre es obligatorio.",
 	enterLastName: "El apellido es obligatorio.",
-	enterPhone: "El número de teléfono es obligatorio."
+	enterPhone: "El número de teléfono es obligatorio.",
+	enterFieldName: "{{fieldName}} es obligatorio."
 };
 var buttons$5 = {
 	account: "Mi cuenta",
@@ -12890,6 +12894,7 @@ const SET_FIRST_NAME_ERROR = "SET_FIRST_NAME_ERROR";
 const SET_LAST_NAME_ERROR = "SET_LAST_NAME_ERROR";
 const SET_PHONE_ERROR = "SET_PHONE_ERROR";
 const SET_TEXT_FIELD = "SET_TEXT_FIELD";
+const SET_TEXT_FIELD_ERROR = "SET_TEXT_FIELD_ERROR";
 const SET_MONTH = "SET_MONTH";
 const SET_YEAR = "SET_YEAR";
 const SET_TOKEN = "SET_TOKEN";
@@ -13839,6 +13844,11 @@ const RegisterContainer = _ref => {
           phoneError: action.payload,
           phone: null
         });
+      case SET_TEXT_FIELD_ERROR:
+        return lib_7({
+          ...state,
+          ...action.payload
+        });
       case SET_CONFIRM_PASSWORD_ERROR:
         return lib_7({
           ...state,
@@ -14989,26 +14999,69 @@ function TextInput(_ref) {
     fieldName,
     ...otherProps
   } = _ref;
+  const {
+    t
+  } = useTranslation("common");
   const {
     dispatch,
-    state
+    state: {
+      [fieldName]: stateFieldName,
+      [fieldName + "Error"]: fieldNameError,
+      loading
+    }
   } = React.useContext(store);
-  const handleInputChange = value => {
-    dispatch({
-      type: SET_TEXT_FIELD,
-      payload: {
-        [fieldName]: value
+  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
+            }
+          });
+        }
       }
-    });
-  };
-  if (state.loading) {
+    }
+  }, [dispatch, fieldNameState, 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);
   }
   return /*#__PURE__*/React__default['default'].createElement(Input, Object.assign({
     type: "text",
-    value: state[fieldName],
+    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],
-    onChange: e => handleInputChange(e.target.value)
+    onChange: e => handleInputChange(e.target.value),
+    onBlur: () => setFinishedTyping(true),
+    onFocus: () => setFinishedTyping(false)
   }, otherProps));
 }
 
@@ -22130,7 +22183,7 @@ function PaymentMethodView(_ref) {
   }, t("labels.amount")), /*#__PURE__*/React__default['default'].createElement("br", null), /*#__PURE__*/React__default['default'].createElement("span", {
     className: "plc-text-xl plc-font-semibold plc-text-primary-600"
   }, (_calcAndFormatItemsTo = calcAndFormatItemsTotal(order, (_order$ = order[0]) === null || _order$ === void 0 ? void 0 : _order$.currency)) !== null && _calcAndFormatItemsTo !== void 0 ? _calcAndFormatItemsTo : getFormattedPriceByLocal(order === null || order === void 0 ? void 0 : order.price, order === null || order === void 0 ? void 0 : order.currency, getPageOrDefaultLanguage())))), cardProcessor === "stripe" && !showSubscriptionButton && !showOrderButton && /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "plc-flex plc-items-center plc-w-full plc-px-4 plc-py-2 plc-text-center plc-text-green-600 plc-border plc-border-green-400 plc-rounded plc-bg-green-50"
+    className: "plc-flex plc-items-center plc-w-full plc-px-4 plc-py-2 plc-text-center plc-text-green-600 plc-border plc-border-green-400 plc-rounded plc-bg-green-50 pelcro-stripe-compliance"
   }, /*#__PURE__*/React__default['default'].createElement(SvgLock, {
     className: "plc-w-5 plc-h-5 plc-mr-1"
   }), /*#__PURE__*/React__default['default'].createElement("span", null, t("messages.youAreSafe"), /*#__PURE__*/React__default['default'].createElement(Link, {

package/dist/index.esm.js

@@ -3221,7 +3221,8 @@ var validation$3 = {
 	confirmPassword: "Confirm password is required.",
 	enterFirstName: "First name is required.",
 	enterLastName: "Last name is required.",
-	enterPhone: "Phone number is required."
+	enterPhone: "Phone number is required.",
+	enterFieldName: "{{fieldName}} is required."
 };
 var buttons$n = {
 	account: "My account",
@@ -4174,7 +4175,8 @@ var validation$2 = {
 	confirmPassword: "Confirmer le mot de passe requis.",
 	enterFirstName: "Le prénom est requis.",
 	enterLastName: "Le nom de famille est requis.",
-	enterPhone: "Le numéro de téléphone est requis."
+	enterPhone: "Le numéro de téléphone est requis.",
+	enterFieldName: "{{fieldName}} est requis."
 };
 var buttons$h = {
 	account: "Accès abonné(e)s",
@@ -5117,7 +5119,8 @@ var validation$1 = {
 	enterPassword: "비밀번호는 필수 항목입니다.",
 	enterFirstName: "이름은 필수 항목입니다.",
 	enterLastName: "성은 필수 항목입니다.",
-	enterPhone: "전화번호는 필수 항목입니다."
+	enterPhone: "전화번호는 필수 항목입니다.",
+	enterFieldName: "{{fieldName}} 필수."
 };
 var buttons$b = {
 	account: "내 계정",
@@ -6166,7 +6169,8 @@ var validation = {
 	confirmPassword: "Confirmar la contraseña es obligatorio.",
 	enterFirstName: "El nombre es obligatorio.",
 	enterLastName: "El apellido es obligatorio.",
-	enterPhone: "El número de teléfono es obligatorio."
+	enterPhone: "El número de teléfono es obligatorio.",
+	enterFieldName: "{{fieldName}} es obligatorio."
 };
 var buttons$5 = {
 	account: "Mi cuenta",
@@ -12860,6 +12864,7 @@ const SET_FIRST_NAME_ERROR = "SET_FIRST_NAME_ERROR";
 const SET_LAST_NAME_ERROR = "SET_LAST_NAME_ERROR";
 const SET_PHONE_ERROR = "SET_PHONE_ERROR";
 const SET_TEXT_FIELD = "SET_TEXT_FIELD";
+const SET_TEXT_FIELD_ERROR = "SET_TEXT_FIELD_ERROR";
 const SET_MONTH = "SET_MONTH";
 const SET_YEAR = "SET_YEAR";
 const SET_TOKEN = "SET_TOKEN";
@@ -13809,6 +13814,11 @@ const RegisterContainer = _ref => {
           phoneError: action.payload,
           phone: null
         });
+      case SET_TEXT_FIELD_ERROR:
+        return lib_7({
+          ...state,
+          ...action.payload
+        });
       case SET_CONFIRM_PASSWORD_ERROR:
         return lib_7({
           ...state,
@@ -14959,26 +14969,69 @@ function TextInput(_ref) {
     fieldName,
     ...otherProps
   } = _ref;
+  const {
+    t
+  } = useTranslation("common");
   const {
     dispatch,
-    state
+    state: {
+      [fieldName]: stateFieldName,
+      [fieldName + "Error"]: fieldNameError,
+      loading
+    }
   } = useContext(store);
-  const handleInputChange = value => {
-    dispatch({
-      type: SET_TEXT_FIELD,
-      payload: {
-        [fieldName]: value
+  const [fieldNameState, setFieldNameState] = useState(stateFieldName);
+  const [finishedTyping, setFinishedTyping] = useState(false);
+  const handleInputChange = 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
+            }
+          });
+        }
       }
-    });
-  };
-  if (state.loading) {
+    }
+  }, [dispatch, fieldNameState, finishedTyping] // eslint-disable-line react-hooks/exhaustive-deps
+  );
+
+  useEffect(() => {
+    handleInputChange(fieldNameState);
+  }, [finishedTyping, fieldNameState, handleInputChange]);
+  if (loading) {
     return /*#__PURE__*/React__default.createElement(Loader, null);
   }
   return /*#__PURE__*/React__default.createElement(Input, Object.assign({
     type: "text",
-    value: state[fieldName],
+    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],
-    onChange: e => handleInputChange(e.target.value)
+    onChange: e => handleInputChange(e.target.value),
+    onBlur: () => setFinishedTyping(true),
+    onFocus: () => setFinishedTyping(false)
   }, otherProps));
 }
 
@@ -22100,7 +22153,7 @@ function PaymentMethodView(_ref) {
   }, t("labels.amount")), /*#__PURE__*/React__default.createElement("br", null), /*#__PURE__*/React__default.createElement("span", {
     className: "plc-text-xl plc-font-semibold plc-text-primary-600"
   }, (_calcAndFormatItemsTo = calcAndFormatItemsTotal(order, (_order$ = order[0]) === null || _order$ === void 0 ? void 0 : _order$.currency)) !== null && _calcAndFormatItemsTo !== void 0 ? _calcAndFormatItemsTo : getFormattedPriceByLocal(order === null || order === void 0 ? void 0 : order.price, order === null || order === void 0 ? void 0 : order.currency, getPageOrDefaultLanguage())))), cardProcessor === "stripe" && !showSubscriptionButton && !showOrderButton && /*#__PURE__*/React__default.createElement("div", {
-    className: "plc-flex plc-items-center plc-w-full plc-px-4 plc-py-2 plc-text-center plc-text-green-600 plc-border plc-border-green-400 plc-rounded plc-bg-green-50"
+    className: "plc-flex plc-items-center plc-w-full plc-px-4 plc-py-2 plc-text-center plc-text-green-600 plc-border plc-border-green-400 plc-rounded plc-bg-green-50 pelcro-stripe-compliance"
   }, /*#__PURE__*/React__default.createElement(SvgLock, {
     className: "plc-w-5 plc-h-5 plc-mr-1"
   }), /*#__PURE__*/React__default.createElement("span", null, t("messages.youAreSafe"), /*#__PURE__*/React__default.createElement(Link, {

package/package.json

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