@pelcro/react-pelcro-js 3.2.0-beta.20 → 3.2.0-beta.21

package/dist/index.cjs.js

@@ -9776,6 +9776,7 @@ function Email({
   initWithUserEmail = true,
   disableEmailValidation,
   store,
+  enableEmailEdit,
   ...otherProps
 }) {
   const {
@@ -9801,6 +9802,10 @@ function Email({
     }
 
     if (isEmailValid(email)) {
+      dispatch({
+        type: SET_EMAIL_ERROR,
+        payload: null
+      });
       return dispatch({
         type: SET_EMAIL,
         payload: email
@@ -9821,6 +9826,11 @@ function Email({
       }
     }
   }, [dispatch, email, finishedTyping]);
+  React.useEffect(() => {
+    if (!enableEmailEdit) {
+      loadEmailIntoField();
+    }
+  }, [enableEmailEdit]);
   React.useEffect(() => {
     handleInputChange(email);
   }, [finishedTyping, email, handleInputChange]); // Initialize email field with user's email
@@ -16522,6 +16532,7 @@ SubscriptionCreateModal.viewId = "subscription-create";
 var _window$Pelcro$user$r, _window$Pelcro$user$r2, _window$Pelcro$user$r3, _window$Pelcro$user$r4, _window$Pelcro$user$r5;
 const initialState$e = {
   email: (_window$Pelcro$user$r = window.Pelcro.user.read()) === null || _window$Pelcro$user$r === void 0 ? void 0 : _window$Pelcro$user$r.email,
+  emailError: null,
   firstName: (_window$Pelcro$user$r2 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r2 === void 0 ? void 0 : _window$Pelcro$user$r2.first_name,
   lastName: (_window$Pelcro$user$r3 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r3 === void 0 ? void 0 : _window$Pelcro$user$r3.last_name,
   displayName: (_window$Pelcro$user$r4 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r4 === void 0 ? void 0 : _window$Pelcro$user$r4.display_name,
@@ -16640,6 +16651,11 @@ const UserUpdateContainer = ({
           email: action.payload
         });
 
+      case SET_EMAIL_ERROR:
+        return lib_7({ ...state,
+          emailError: action.payload
+        });
+
       case SET_FIRST_NAME:
         return lib_7({ ...state,
           firstName: action.payload
@@ -16696,9 +16712,67 @@ const UserUpdateContainer = ({
   })));
 };
 
-const UserUpdateEmail = props => /*#__PURE__*/React__default['default'].createElement(Email, Object.assign({
-  store: store$e
-}, props));
+var _path$i;
+
+function _extends$k() { _extends$k = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$k.apply(this, arguments); }
+
+function SvgEdit(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$k({
+    className: "plc-w-6 plc-h-6",
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 20 20",
+    fill: "currentColor"
+  }, props), _path$i || (_path$i = /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zm-2.207 2.207L3 14.172V17h2.828l8.38-8.379-2.83-2.828z"
+  })));
+}
+
+const UserUpdateEmail = props => {
+  const {
+    dispatch,
+    state: {
+      email,
+      emailError
+    }
+  } = React.useContext(store$e);
+  const [enableEmailEdit, setEnableEmailEdit] = React.useState(false);
+  const {
+    t
+  } = useTranslation("userEdit");
+
+  const handleEnableEmailEdit = () => {
+    if (enableEmailEdit) {
+      dispatch({
+        type: SET_EMAIL,
+        payload: email
+      });
+      dispatch({
+        type: SET_EMAIL_ERROR,
+        payload: null
+      });
+      setEnableEmailEdit(false);
+    } else {
+      setEnableEmailEdit(true);
+    }
+  };
+
+  return /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "plc-flex plc-items-start plc-relative"
+  }, /*#__PURE__*/React__default['default'].createElement(Email, Object.assign({
+    disabled: !enableEmailEdit,
+    store: store$e,
+    label: t("labels.email"),
+    enableEmailEdit: enableEmailEdit
+  }, props)), /*#__PURE__*/React__default['default'].createElement(Button, {
+    variant: "icon",
+    className: "plc-absolute  plc-rounded-none plc-text-gray-500 plc-w-10 plc-h-10 plc-top-6 plc-right-0 hover:plc-text-gray-900 hover:plc-bg-transparent focus:plc-ring-0 focus:plc-shadow-none",
+    icon: enableEmailEdit ? /*#__PURE__*/React__default['default'].createElement(SvgXIcon, {
+      className: "plc-w-6"
+    }) : /*#__PURE__*/React__default['default'].createElement(SvgEdit, null),
+    id: "pelcro-user-update-picture-button",
+    onClick: handleEnableEmailEdit
+  })));
+};
 
 const UserUpdateButton = ({
   name,
@@ -16707,7 +16781,8 @@ const UserUpdateButton = ({
 }) => {
   const {
     state: {
-      buttonDisabled
+      buttonDisabled,
+      emailError
     },
     dispatch
   } = React.useContext(store$e);
@@ -16721,8 +16796,8 @@ const UserUpdateButton = ({
       });
       onClick === null || onClick === void 0 ? void 0 : onClick();
     },
-    disabled: buttonDisabled,
-    isLoading: buttonDisabled
+    disabled: buttonDisabled || emailError,
+    isLoading: buttonDisabled && !emailError
   }, otherProps), name !== null && name !== void 0 ? name : t("labels.submit"));
 };
 
@@ -16765,21 +16840,6 @@ const UserUpdatePhone = props => /*#__PURE__*/React__default['default'].createEl
 
 var userSolidIcon = "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20class%3D%22plc-h-5%20plc-w-5%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22white%22%3E%20%20%3Cpath%20transform%3D%22translate%280%2C2%29%22%20fill-rule%3D%22evenodd%22%20d%3D%22M10%209a3%203%200%20100-6%203%203%200%20000%206zm-7%209a7%207%200%201114%200H3z%22%20clip-rule%3D%22evenodd%22%20%2F%3E%3C%2Fsvg%3E";
 
-var _path$i;
-
-function _extends$k() { _extends$k = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$k.apply(this, arguments); }
-
-function SvgEdit(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$k({
-    className: "plc-w-6 plc-h-6",
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 20 20",
-    fill: "currentColor"
-  }, props), _path$i || (_path$i = /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zm-2.207 2.207L3 14.172V17h2.828l8.38-8.379-2.83-2.828z"
-  })));
-}
-
 const UserUpdateProfilePic = ({
   onClick,
   ...otherProps
@@ -16820,18 +16880,14 @@ const UserUpdateView = props => {
     className: "plc-mt-2 pelcro-form"
   }, /*#__PURE__*/React__default['default'].createElement(UserUpdateContainer, props, /*#__PURE__*/React__default['default'].createElement(AlertWithContext, null), /*#__PURE__*/React__default['default'].createElement(UserUpdateProfilePic, {
     onClick: props.onPictureClick
-  }), /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "plc-flex plc-items-start"
-  }, /*#__PURE__*/React__default['default'].createElement(UserUpdateEmail, {
-    label: t("labels.email"),
-    autoFocus: true
-  })), /*#__PURE__*/React__default['default'].createElement("div", {
+  }), /*#__PURE__*/React__default['default'].createElement(UserUpdateEmail, null), /*#__PURE__*/React__default['default'].createElement("div", {
     className: "plc-flex plc-items-start"
   }, /*#__PURE__*/React__default['default'].createElement(UserUpdateFirstName, {
     autoComplete: "first-name",
     id: "pelcro-input-first-name",
     errorId: "pelcro-input-first-name-error",
-    label: t("labels.firstName")
+    label: t("labels.firstName"),
+    autoFocus: true
   }), /*#__PURE__*/React__default['default'].createElement(UserUpdateLastName, {
     wrapperClassName: "plc-ml-3",
     autoComplete: "last-name",

package/dist/index.esm.js

@@ -9746,6 +9746,7 @@ function Email({
   initWithUserEmail = true,
   disableEmailValidation,
   store,
+  enableEmailEdit,
   ...otherProps
 }) {
   const {
@@ -9771,6 +9772,10 @@ function Email({
     }
 
     if (isEmailValid(email)) {
+      dispatch({
+        type: SET_EMAIL_ERROR,
+        payload: null
+      });
       return dispatch({
         type: SET_EMAIL,
         payload: email
@@ -9791,6 +9796,11 @@ function Email({
       }
     }
   }, [dispatch, email, finishedTyping]);
+  useEffect(() => {
+    if (!enableEmailEdit) {
+      loadEmailIntoField();
+    }
+  }, [enableEmailEdit]);
   useEffect(() => {
     handleInputChange(email);
   }, [finishedTyping, email, handleInputChange]); // Initialize email field with user's email
@@ -16492,6 +16502,7 @@ SubscriptionCreateModal.viewId = "subscription-create";
 var _window$Pelcro$user$r, _window$Pelcro$user$r2, _window$Pelcro$user$r3, _window$Pelcro$user$r4, _window$Pelcro$user$r5;
 const initialState$e = {
   email: (_window$Pelcro$user$r = window.Pelcro.user.read()) === null || _window$Pelcro$user$r === void 0 ? void 0 : _window$Pelcro$user$r.email,
+  emailError: null,
   firstName: (_window$Pelcro$user$r2 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r2 === void 0 ? void 0 : _window$Pelcro$user$r2.first_name,
   lastName: (_window$Pelcro$user$r3 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r3 === void 0 ? void 0 : _window$Pelcro$user$r3.last_name,
   displayName: (_window$Pelcro$user$r4 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r4 === void 0 ? void 0 : _window$Pelcro$user$r4.display_name,
@@ -16610,6 +16621,11 @@ const UserUpdateContainer = ({
           email: action.payload
         });
 
+      case SET_EMAIL_ERROR:
+        return lib_7({ ...state,
+          emailError: action.payload
+        });
+
       case SET_FIRST_NAME:
         return lib_7({ ...state,
           firstName: action.payload
@@ -16666,9 +16682,67 @@ const UserUpdateContainer = ({
   })));
 };
 
-const UserUpdateEmail = props => /*#__PURE__*/React__default.createElement(Email, Object.assign({
-  store: store$e
-}, props));
+var _path$i;
+
+function _extends$k() { _extends$k = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$k.apply(this, arguments); }
+
+function SvgEdit(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$k({
+    className: "plc-w-6 plc-h-6",
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 20 20",
+    fill: "currentColor"
+  }, props), _path$i || (_path$i = /*#__PURE__*/React.createElement("path", {
+    d: "M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zm-2.207 2.207L3 14.172V17h2.828l8.38-8.379-2.83-2.828z"
+  })));
+}
+
+const UserUpdateEmail = props => {
+  const {
+    dispatch,
+    state: {
+      email,
+      emailError
+    }
+  } = useContext(store$e);
+  const [enableEmailEdit, setEnableEmailEdit] = useState(false);
+  const {
+    t
+  } = useTranslation("userEdit");
+
+  const handleEnableEmailEdit = () => {
+    if (enableEmailEdit) {
+      dispatch({
+        type: SET_EMAIL,
+        payload: email
+      });
+      dispatch({
+        type: SET_EMAIL_ERROR,
+        payload: null
+      });
+      setEnableEmailEdit(false);
+    } else {
+      setEnableEmailEdit(true);
+    }
+  };
+
+  return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("div", {
+    className: "plc-flex plc-items-start plc-relative"
+  }, /*#__PURE__*/React__default.createElement(Email, Object.assign({
+    disabled: !enableEmailEdit,
+    store: store$e,
+    label: t("labels.email"),
+    enableEmailEdit: enableEmailEdit
+  }, props)), /*#__PURE__*/React__default.createElement(Button, {
+    variant: "icon",
+    className: "plc-absolute  plc-rounded-none plc-text-gray-500 plc-w-10 plc-h-10 plc-top-6 plc-right-0 hover:plc-text-gray-900 hover:plc-bg-transparent focus:plc-ring-0 focus:plc-shadow-none",
+    icon: enableEmailEdit ? /*#__PURE__*/React__default.createElement(SvgXIcon, {
+      className: "plc-w-6"
+    }) : /*#__PURE__*/React__default.createElement(SvgEdit, null),
+    id: "pelcro-user-update-picture-button",
+    onClick: handleEnableEmailEdit
+  })));
+};
 
 const UserUpdateButton = ({
   name,
@@ -16677,7 +16751,8 @@ const UserUpdateButton = ({
 }) => {
   const {
     state: {
-      buttonDisabled
+      buttonDisabled,
+      emailError
     },
     dispatch
   } = useContext(store$e);
@@ -16691,8 +16766,8 @@ const UserUpdateButton = ({
       });
       onClick === null || onClick === void 0 ? void 0 : onClick();
     },
-    disabled: buttonDisabled,
-    isLoading: buttonDisabled
+    disabled: buttonDisabled || emailError,
+    isLoading: buttonDisabled && !emailError
   }, otherProps), name !== null && name !== void 0 ? name : t("labels.submit"));
 };
 
@@ -16735,21 +16810,6 @@ const UserUpdatePhone = props => /*#__PURE__*/React__default.createElement(Phone
 
 var userSolidIcon = "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20class%3D%22plc-h-5%20plc-w-5%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22white%22%3E%20%20%3Cpath%20transform%3D%22translate%280%2C2%29%22%20fill-rule%3D%22evenodd%22%20d%3D%22M10%209a3%203%200%20100-6%203%203%200%20000%206zm-7%209a7%207%200%201114%200H3z%22%20clip-rule%3D%22evenodd%22%20%2F%3E%3C%2Fsvg%3E";
 
-var _path$i;
-
-function _extends$k() { _extends$k = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$k.apply(this, arguments); }
-
-function SvgEdit(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$k({
-    className: "plc-w-6 plc-h-6",
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 20 20",
-    fill: "currentColor"
-  }, props), _path$i || (_path$i = /*#__PURE__*/React.createElement("path", {
-    d: "M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zm-2.207 2.207L3 14.172V17h2.828l8.38-8.379-2.83-2.828z"
-  })));
-}
-
 const UserUpdateProfilePic = ({
   onClick,
   ...otherProps
@@ -16790,18 +16850,14 @@ const UserUpdateView = props => {
     className: "plc-mt-2 pelcro-form"
   }, /*#__PURE__*/React__default.createElement(UserUpdateContainer, props, /*#__PURE__*/React__default.createElement(AlertWithContext, null), /*#__PURE__*/React__default.createElement(UserUpdateProfilePic, {
     onClick: props.onPictureClick
-  }), /*#__PURE__*/React__default.createElement("div", {
-    className: "plc-flex plc-items-start"
-  }, /*#__PURE__*/React__default.createElement(UserUpdateEmail, {
-    label: t("labels.email"),
-    autoFocus: true
-  })), /*#__PURE__*/React__default.createElement("div", {
+  }), /*#__PURE__*/React__default.createElement(UserUpdateEmail, null), /*#__PURE__*/React__default.createElement("div", {
     className: "plc-flex plc-items-start"
   }, /*#__PURE__*/React__default.createElement(UserUpdateFirstName, {
     autoComplete: "first-name",
     id: "pelcro-input-first-name",
     errorId: "pelcro-input-first-name-error",
-    label: t("labels.firstName")
+    label: t("labels.firstName"),
+    autoFocus: true
   }), /*#__PURE__*/React__default.createElement(UserUpdateLastName, {
     wrapperClassName: "plc-ml-3",
     autoComplete: "last-name",

package/dist/pelcro.css

@@ -2514,6 +2514,10 @@ in order to scope selectors under pelcro-root
   bottom: 1rem;
 }
 
+.pelcro-root .plc-top-6 {
+  top: 1.5rem;
+}
+
 .pelcro-root .plc-top-16 {
   top: 4rem;
 }
@@ -2555,6 +2559,11 @@ in order to scope selectors under pelcro-root
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.pelcro-root .focus\:plc-shadow-none:focus {
+  --tw-shadow: 0 0 #0000;
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 * {
   --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
   --tw-ring-offset-width: 0px;
@@ -2576,6 +2585,12 @@ in order to scope selectors under pelcro-root
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
+.pelcro-root .focus\:plc-ring-0:focus {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
 .pelcro-root .focus\:plc-ring-2:focus {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -2755,6 +2770,11 @@ in order to scope selectors under pelcro-root
   color: rgba(107, 114, 128, var(--tw-text-opacity));
 }
 
+.pelcro-root .hover\:plc-text-gray-900:hover {
+  --tw-text-opacity: 1;
+  color: rgba(17, 24, 39, var(--tw-text-opacity));
+}
+
 .pelcro-root .focus\:plc-text-black:focus {
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));

package/package.json

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