@selfcommunity/react-ui 0.7.0-alpha.99 → 0.7.0

package/lib/esm/components/UserProfileEdit/Section/AccountCredentials.js

@@ -1,21 +1,10 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
+import { __rest } from "tslib";
 import React, { useState } from 'react';
 import { styled } from '@mui/material/styles';
 import { Box, Button, CircularProgress, FormGroup, IconButton, InputAdornment, Popover, Typography } from '@mui/material';
 import classNames from 'classnames';
-import { useThemeProps } from '@mui/system';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
-import { formatHttpError, UserService } from '@selfcommunity/api-services';
+import { formatHttpErrorCode, UserService } from '@selfcommunity/api-services';
 import { SCOPE_SC_UI } from '../../../constants/Errors';
 import { Logger } from '@selfcommunity/utils';
 import BaseDialog from '../../../shared/BaseDialog';
@@ -24,6 +13,7 @@ import EmailTextField from '../../../shared/EmailTextField';
 import { LoadingButton } from '@mui/lab';
 import Icon from '@mui/material/Icon';
 import { useSnackbar } from 'notistack';
+import { PREFIX } from '../constants';
 const messages = defineMessages({
     changePasswordTitle: {
         id: 'ui.userProfileEditAccountCredentials.changePassword',
@@ -32,59 +22,32 @@ const messages = defineMessages({
     confirmPasswordError: {
         id: 'ui.userProfileEditAccountCredentials.confirmPassword.error',
         defaultMessage: 'ui.userProfileEditAccountCredentials.confirmPassword.error'
-    },
-    emptyEmailError: {
-        id: 'ui.userProfileEditAccountCredentials.email.empty.error',
-        defaultMessage: 'ui.userProfileEditAccountCredentials.email.empty.error'
     }
 });
-const PREFIX = 'SCAccountCredential';
-const DIALOG_PREFIX = `${PREFIX}-password-dialog`;
 const classes = {
-    root: `${PREFIX}-root`,
+    root: `${PREFIX}-account-credentials-root`,
     email: `${PREFIX}-email`,
     success: `${PREFIX}-success`,
     error: `${PREFIX}-error`,
-    form: `${DIALOG_PREFIX}-password-form`,
-    formField: `${DIALOG_PREFIX}-form-field`,
-    password: `${DIALOG_PREFIX}-password`,
-    confirmChangeButton: `${DIALOG_PREFIX}-confirm-change-button`
+    dialogRoot: `${PREFIX}-password-dialog-root`,
+    form: `${PREFIX}-password-form`,
+    formField: `${PREFIX}-form-field`,
+    password: `${PREFIX}-password`,
+    confirmChangeButton: `${PREFIX}-confirm-change-button`
 };
 const Root = styled(Box, {
     name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({
-    [`& .${classes.email}, .${classes.password}`]: {
-        margin: theme.spacing(1, 0, 1, 0),
-        fontWeight: 'bold'
-    }
-}));
-const PasswordDialog = styled(BaseDialog, {
-    name: DIALOG_PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({
-    '& .MuiDialogContent-root': {
-        [`& .${classes.form}`]: {
-            [`& .${classes.formField}`]: {
-                margin: theme.spacing(1, 1, 1, 0)
-            }
-        }
-    },
-    [`& .${classes.confirmChangeButton}`]: {
-        marginTop: theme.spacing(1)
-    }
-}));
-export default function AccountCredentials(inProps) {
+    slot: 'AccountCredentialsRoot'
+})(() => ({}));
+const PasswordDialogRoot = styled(BaseDialog, {
+    name: PREFIX,
+    slot: 'PasswordDialogRoot'
+})(() => ({}));
+export default function AccountCredentials(props) {
     var _a;
     // PROPS
-    const props = useThemeProps({
-        props: inProps,
-        name: PREFIX
-    });
-    // CONTEXT
-    const { className = null, user } = props, rest = __rest(props, ["className", "user"]);
+    const { className = null, user, skipEmailValidation = false } = props, rest = __rest(props, ["className", "user", "skipEmailValidation"]);
+    const { enqueueSnackbar } = useSnackbar();
     // STATE
     const [openChangePasswordDialog, setOpenChangePasswordDialog] = useState(false);
     const initialFieldState = {
@@ -106,7 +69,6 @@ export default function AccountCredentials(inProps) {
     const [isSubmitting, setIsSubmitting] = useState(false);
     const [anchorEl, setAnchorEl] = useState(null);
     const open = Boolean(anchorEl);
-    const { enqueueSnackbar, closeSnackbar } = useSnackbar();
     // INTL
     const intl = useIntl();
     // HANDLERS
@@ -122,6 +84,9 @@ export default function AccountCredentials(inProps) {
         if (!value) {
             setError((prev) => (Object.assign(Object.assign({}, prev), { [name]: value })));
         }
+        else {
+            setError((prev) => (Object.assign(Object.assign({}, prev), { [name]: '' })));
+        }
     };
     const handleEmailBlur = (e) => {
         if (!e.target.value) {
@@ -150,7 +115,7 @@ export default function AccountCredentials(inProps) {
         })
             .catch((error) => {
             setIsSubmittingPassword(false);
-            const _error = formatHttpError(error);
+            const _error = formatHttpErrorCode(error);
             Logger.error(SCOPE_SC_UI, error);
             if (_error.passwordError) {
                 setError((prev) => (Object.assign(Object.assign({}, prev), { ['password']: _error.passwordError.error })));
@@ -164,30 +129,27 @@ export default function AccountCredentials(inProps) {
         e.preventDefault();
         e.stopPropagation();
         setIsSubmitting(true);
-        UserService.changeUserMail(user === null || user === void 0 ? void 0 : user.id, field.email, true)
+        UserService.changeUserMail(user === null || user === void 0 ? void 0 : user.id, field.email, !skipEmailValidation, !skipEmailValidation)
             .then((res) => {
-            handleVerifyEmail(res.validation_code);
-        })
-            .catch((error) => {
-            setIsSubmitting(false);
-            const _error = formatHttpError(error);
-            setError((prev) => (Object.assign(Object.assign({}, prev), { ['email']: _error.error })));
-        });
-    };
-    const handleVerifyEmail = (code) => {
-        UserService.confirmChangeUserMail(user === null || user === void 0 ? void 0 : user.id, field.email, code)
-            .then(() => {
             setIsEditing(false);
             setIsSubmitting(false);
-            enqueueSnackbar(React.createElement(FormattedMessage, { id: "ui.userProfileEditAccountCredentials.email.success", defaultMessage: "ui.userProfileEditAccountCredentials.email.success" }), {
-                variant: 'success',
-                autoHideDuration: 1500
-            });
+            if (skipEmailValidation) {
+                enqueueSnackbar(React.createElement(FormattedMessage, { id: "ui.userProfileEditAccountCredentials.email.success", defaultMessage: "ui.userProfileEditAccountCredentials.email.success" }), {
+                    variant: 'success',
+                    autoHideDuration: 3000
+                });
+            }
+            else {
+                enqueueSnackbar(React.createElement(FormattedMessage, { id: "ui.userProfileEditAccountCredentials.email.successConfirm", defaultMessage: "ui.userProfileEditAccountCredentials.email.successConfirm" }), {
+                    variant: 'warning',
+                    autoHideDuration: 5000
+                });
+            }
         })
             .catch((error) => {
-            const _error = formatHttpError(error);
-            setError((prev) => (Object.assign(Object.assign({}, prev), { ['email']: _error.error })));
             setIsSubmitting(false);
+            const _error = formatHttpErrorCode(error);
+            setError((prev) => (Object.assign(Object.assign({}, prev), { ['email']: _error.newEmailError ? `newEmailError.${_error.newEmailError.error}` : _error.error })));
         });
     };
     if (!user) {
@@ -198,19 +160,19 @@ export default function AccountCredentials(inProps) {
             React.createElement(Typography, { variant: "body1", className: classes.email },
                 React.createElement(FormattedMessage, { id: "ui.userProfileEditAccountCredentials.email", defaultMessage: "ui.userProfileEditAccountCredentials.email" })),
             React.createElement(React.Fragment, null, isSubmitting ? (React.createElement(CircularProgress, null)) : (React.createElement(React.Fragment, null,
-                React.createElement(EmailTextField, { name: "email", disabled: !isEditing || isSubmitting, size: "small", value: field.email, onChange: handleChange, onBlur: handleEmailBlur, error: Boolean(error.email), helperText: error.email, InputProps: {
+                React.createElement(EmailTextField, { name: "email", disabled: !isEditing || isSubmitting, size: "small", value: field.email, onChange: handleChange, onBlur: handleEmailBlur, error: Boolean(error.email), helperText: error.email && (React.createElement(FormattedMessage, { id: `ui.userProfileEditAccountCredentials.email.error.${error.email}`, defaultMessage: `ui.userProfileEditAccountCredentials.email.error.${error.email}` })), InputProps: {
                         endAdornment: (React.createElement(InputAdornment, { position: "end" }, !isEditing ? (React.createElement(IconButton, { onClick: () => setIsEditing(true), edge: "end" },
-                            React.createElement(Icon, null, "edit"))) : error.email ? (React.createElement(Icon, { color: "error" }, "error")) : (React.createElement(IconButton, { onClick: handleSubmitEmail, edge: "end", color: "primary", disabled: !field.email },
+                            React.createElement(Icon, null, "edit"))) : error.email ? (React.createElement(Icon, { color: "error" }, "error")) : (React.createElement(IconButton, { onClick: handleSubmitEmail, edge: "end", color: "primary", disabled: !field.email || error.email },
                             React.createElement(Icon, null, "check")))))
                     } })))),
             React.createElement(Typography, { variant: "body1", className: classes.password },
                 React.createElement(FormattedMessage, { id: "ui.userProfileEditAccountCredentials.passwordLabel", defaultMessage: "ui.userProfileEditAccountCredentials.passwordLabel" })),
             React.createElement(Button, { size: "small", variant: "outlined", onClick: () => setOpenChangePasswordDialog(true), sx: { mb: 1 } },
                 React.createElement(FormattedMessage, { id: "ui.userProfileEditAccountCredentials.changePassword", defaultMessage: "ui.userProfileEditAccountCredentials.changePassword" }))),
-        openChangePasswordDialog && (React.createElement(PasswordDialog, Object.assign({ title: intl.formatMessage(messages.changePasswordTitle), open: openChangePasswordDialog, onClose: handleCloseDialog }, rest),
+        openChangePasswordDialog && (React.createElement(PasswordDialogRoot, Object.assign({ className: classes.dialogRoot, title: intl.formatMessage(messages.changePasswordTitle), open: openChangePasswordDialog, onClose: handleCloseDialog }, rest),
             React.createElement(FormGroup, { className: classes.form },
-                React.createElement(PasswordTextField, { className: classes.formField, name: "password", disabled: isSubmittingPassword, label: React.createElement(FormattedMessage, { id: "ui.userProfileEditAccountCredentials.password", defaultMessage: "ui.userProfileEditAccountCredentials.password" }), size: "medium", value: field.password, onChange: handleChange, error: Boolean(error.password), helperText: error.password }),
-                React.createElement(PasswordTextField, { name: "newPassword", className: classes.formField, disabled: isSubmittingPassword, label: React.createElement(FormattedMessage, { id: "ui.userProfileEditAccountCredentials.newPassword", defaultMessage: "ui.userProfileEditAccountCredentials.newPassword" }), size: "medium", value: field.newPassword, onChange: handleChange, error: Boolean(error.newPassword), helperText: error.newPassword, InputProps: {
+                React.createElement(PasswordTextField, { className: classes.formField, name: "password", disabled: isSubmittingPassword, label: React.createElement(FormattedMessage, { id: "ui.userProfileEditAccountCredentials.password", defaultMessage: "ui.userProfileEditAccountCredentials.password" }), size: "medium", value: field.password, onChange: handleChange, error: Boolean(error.password), helperText: error.password && (React.createElement(FormattedMessage, { id: `ui.userProfileEditAccountCredentials.password.error.${error.password}`, defaultMessage: `ui.userProfileEditAccountCredentials.password.error.${error.password}` })) }),
+                React.createElement(PasswordTextField, { name: "newPassword", className: classes.formField, disabled: isSubmittingPassword, label: React.createElement(FormattedMessage, { id: "ui.userProfileEditAccountCredentials.newPassword", defaultMessage: "ui.userProfileEditAccountCredentials.newPassword" }), size: "medium", value: field.newPassword, onChange: handleChange, error: Boolean(error.newPassword), helperText: error.newPassword && (React.createElement(FormattedMessage, { id: `ui.userProfileEditAccountCredentials.newPassword.error.${error.newPassword}`, defaultMessage: `ui.userProfileEditAccountCredentials.newPassword.error.${error.newPassword}` })), InputProps: {
                         endAdornment: (React.createElement(InputAdornment, { position: "end" },
                             React.createElement(IconButton, { "aria-label": "info", onClick: handlePopoverOpen, edge: "end" }, React.createElement(Icon, null, "info"))))
                     } }),
@@ -225,7 +187,6 @@ export default function AccountCredentials(inProps) {
                         React.createElement(Typography, { component: 'span', sx: { whiteSpace: 'pre-line' } },
                             React.createElement(FormattedMessage, { id: "ui.userProfileEditAccountCredentials.newPassword.info", defaultMessage: "ui.userProfileEditAccountCredentials.newPassword.info" })))),
                 React.createElement(PasswordTextField, { name: "confirmPassword", className: classes.formField, disabled: isSubmittingPassword, label: React.createElement(FormattedMessage, { id: "ui.userProfileEditAccountCredentials.confirmPassword", defaultMessage: "ui.userProfileEditAccountCredentials.confirmPassword" }), size: "medium", value: field.confirmPassword, onChange: handleChange, onBlur: validateInput, error: Boolean(error.confirmPassword), helperText: error.confirmPassword })),
-            React.createElement(LoadingButton, { className: classes.confirmChangeButton, loading: isSubmittingPassword, disabled: !field.confirmPassword || Boolean(error.password) || Boolean(error.newPassword), variant: "contained", onClick: handleSubmitPassword },
+            React.createElement(LoadingButton, { className: classes.confirmChangeButton, loading: isSubmittingPassword, disabled: !field.confirmPassword || Boolean(error.confirmPassword) || Boolean(error.password) || Boolean(error.newPassword), variant: "contained", onClick: handleSubmitPassword },
                 React.createElement(FormattedMessage, { id: "ui.userProfileEditAccountCredentials.changePassword", defaultMessage: "ui.userProfileEditAccountCredentials.changePassword" }))))));
 }
-//# sourceMappingURL=AccountCredentials.js.map

package/lib/esm/components/UserProfileEdit/Section/PublicInfo.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { SCUserProfileFields } from '../../../types';
 export interface PublicInfoProps {
     /**
@@ -18,11 +19,24 @@ export interface PublicInfoProps {
     /**
      * Callback on edit data with success
      */
-    onEditSuccess?: (editedField?: {}) => void;
+    onEditSuccess?: (editedField?: Record<string, any>) => void;
+    /**
+     * Callback on edit data with error
+     */
+    onEditFailure?: (editedField?: Record<string, any>) => void;
+    /**
+     * Actions to be inserted at the start
+     * @default null
+     */
+    startActions?: React.ReactNode | null;
+    /**
+     * Actions to be inserted at the end
+     * @default null
+     */
+    endActions?: React.ReactNode | null;
     /**
      * Any other properties
      */
     [p: string]: any;
 }
-export default function PublicInfo(inProps: PublicInfoProps): JSX.Element;
-//# sourceMappingURL=PublicInfo.d.ts.map
+export default function PublicInfo(props: PublicInfoProps): JSX.Element;

package/lib/esm/components/UserProfileEdit/Section/PublicInfo.js

@@ -1,32 +1,27 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import React, { useEffect, useMemo, useState } from 'react';
+import { __rest } from "tslib";
+import React, { useMemo, useState } from 'react';
 import { styled } from '@mui/material/styles';
-import { Box, CircularProgress, IconButton, InputAdornment, MenuItem, TextField } from '@mui/material';
+import { Box, CircularProgress, IconButton, InputAdornment, MenuItem, TextField, useMediaQuery, useTheme } from '@mui/material';
 import Icon from '@mui/material/Icon';
-import { defineMessages, useIntl } from 'react-intl';
-import { http, Endpoints, formatHttpError } from '@selfcommunity/api-services';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+import { Endpoints, formatHttpErrorCode, http } from '@selfcommunity/api-services';
 import { camelCase, Logger } from '@selfcommunity/utils';
-import { SCPreferences, useSCPreferences, useSCUser } from '@selfcommunity/react-core';
+import { SCPreferences, useSCContext, useSCPreferences, useSCUser } from '@selfcommunity/react-core';
 import { DEFAULT_FIELDS } from '../../../constants/UserProfile';
 import classNames from 'classnames';
 import { DatePicker, LocalizationProvider } from '@mui/x-date-pickers';
 import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
 import UsernameTextField from '../../../shared/UsernameTextField';
 import { useDeepCompareEffectNoCheck } from 'use-deep-compare-effect';
-import { useThemeProps } from '@mui/system';
 import { SCUserProfileFields } from '../../../types';
 import MetadataField from '../../../shared/MetadataField';
 import { SCOPE_SC_UI } from '../../../constants/Errors';
+import { format, isBefore, isValid, parseISO, startOfHour } from 'date-fns';
+import itLocale from 'date-fns/locale/it';
+import enLocale from 'date-fns/locale/en-US';
+import { LoadingButton } from '@mui/lab';
+import { useSnackbar } from 'notistack';
+import { PREFIX } from '../constants';
 const messages = defineMessages({
     genderMale: {
         id: 'ui.userProfileEditPublicInfo.genderMale',
@@ -41,34 +36,24 @@ const messages = defineMessages({
         defaultMessage: 'ui.userProfileEditPublicInfo.genderUnspecified'
     }
 });
-const PREFIX = 'SCUserProfileEditSectionPublicInfo';
 const classes = {
-    root: `${PREFIX}-root`,
-    field: `${PREFIX}-field`
+    root: `${PREFIX}-public-info-root`,
+    field: `${PREFIX}-field`,
+    btnSave: `${PREFIX}-btn-save`
 };
 const Root = styled(Box, {
     name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({
-    [`& .${classes.field}`]: {
-        margin: theme.spacing(1, 0, 1, 0)
-    },
-    [`& .${classes.field} .MuiSelect-icon`]: {
-        right: theme.spacing(5)
-    }
-}));
+    slot: 'PublicInfoRoot'
+})(() => ({}));
 const GENDERS = ['Male', 'Female', 'Unspecified'];
-export default function PublicInfo(inProps) {
-    var _a;
+const DATEPICKER_MINDATE = new Date(1000, 1, 1);
+export default function PublicInfo(props) {
     // PROPS
-    const props = useThemeProps({
-        props: inProps,
-        name: PREFIX
-    });
-    const { id = null, className = null, fields = [...DEFAULT_FIELDS], onEditSuccess = null, editingField } = props, rest = __rest(props, ["id", "className", "fields", "onEditSuccess", "editingField"]);
+    const { id = null, className = null, fields = [...DEFAULT_FIELDS], onEditSuccess = null, onEditFailure = null, startActions = null, endActions = null } = props, rest = __rest(props, ["id", "className", "fields", "onEditSuccess", "onEditFailure", "startActions", "endActions"]);
     // CONTEXT
+    const scContext = useSCContext();
     const scUserContext = useSCUser();
+    const { enqueueSnackbar } = useSnackbar();
     // PREFERENCES
     const scPreferences = useSCPreferences();
     const metadataDefinitions = useMemo(() => {
@@ -78,72 +63,75 @@ export default function PublicInfo(inProps) {
             }
             catch (e) {
                 Logger.error(SCOPE_SC_UI, 'Error on parse user metadata.');
-                console.log(scPreferences.preferences[SCPreferences.CONFIGURATIONS_USER_METADATA_DEFINITIONS]);
                 return {};
             }
         }
         return null;
     }, [scPreferences.preferences]);
     // STATE
-    const [user, setUser] = useState(scUserContext.user);
+    const theme = useTheme();
+    const isMobile = useMediaQuery(theme.breakpoints.down('md'));
+    const [user, setUser] = useState();
     const [error, setError] = useState({});
-    const [editing, setEditing] = useState((_a = [editingField]) !== null && _a !== void 0 ? _a : []);
+    const [editing, setEditing] = useState([]);
     const [saving, setSaving] = useState([]);
-    const [editedField, setEditedField] = useState({});
     // INTL
     const intl = useIntl();
     // EFFECTS
     useDeepCompareEffectNoCheck(() => {
-        setUser(scUserContext.user);
+        if (scUserContext.user) {
+            setUser(Object.assign({}, scUserContext.user));
+            // eslint-disable-next-line @typescript-eslint/no-empty-function
+            return () => { };
+        }
     }, [scUserContext.user]);
     // HANDLERS
-    const handleEdit = (field) => {
-        return (event) => {
-            setEditing([...editing, editingField !== null && editingField !== void 0 ? editingField : field]);
-            if (error[`${camelCase(field)}Error`]) {
-                delete error[`${camelCase(field)}Error`];
-                setError(error);
-            }
-        };
+    const handleSave = () => {
+        setSaving([...editing]);
+        setError({});
+        const data = {};
+        editing.map((f) => {
+            data[f] = f === SCUserProfileFields.DATE_OF_BIRTH && user[f] ? format(user[f], 'yyyy-MM-dd') : user[f];
+        });
+        http
+            .request({
+            url: Endpoints.UserPatch.url({ id: user.id }),
+            method: Endpoints.UserPatch.method,
+            data
+        })
+            .then((res) => {
+            scUserContext.updateUser(res.data);
+            setEditing([]);
+            setSaving([]);
+            enqueueSnackbar(React.createElement(FormattedMessage, { id: "ui.userInfo.save.success", defaultMessage: "ui.userInfo.save.success" }), {
+                variant: 'success',
+                autoHideDuration: 3000
+            });
+            onEditSuccess && onEditSuccess();
+        })
+            .catch((e) => {
+            setError(Object.assign(Object.assign({}, error), formatHttpErrorCode(e)));
+            setSaving([]);
+            enqueueSnackbar(React.createElement(FormattedMessage, { id: "ui.common.error.action", defaultMessage: "ui.common.error.action" }), {
+                variant: 'error',
+                autoHideDuration: 3000
+            });
+            onEditFailure && onEditFailure();
+        });
     };
-    const handleSave = (field) => {
+    const handleChange = (field) => {
         return (event) => {
-            if (user[field] === scUserContext.user[field]) {
-                setEditing(editing.filter((f) => f !== field));
-                return;
+            setUser(Object.assign(Object.assign({}, user), { [event.target.name]: event.target.value }));
+            setEditing([...editing, field]);
+            if (!event.target.value && event.target.name in metadataDefinitions && metadataDefinitions[event.target.name].mandatory) {
+                setError(Object.assign(Object.assign({}, error), { [`${camelCase(event.target.name)}Error`]: { error: 'invalid' } }));
+            }
+            else if (error[`${camelCase(event.target.name)}Error`]) {
+                delete error[`${camelCase(event.target.name)}Error`];
+                setError(error);
             }
-            setSaving([...saving, editingField !== null && editingField !== void 0 ? editingField : field]);
-            http
-                .request({
-                url: Endpoints.UserPatch.url({ id: user.id }),
-                method: Endpoints.UserPatch.method,
-                data: { [field]: user[field] }
-            })
-                .then((res) => {
-                scUserContext.updateUser(res.data);
-            })
-                .catch((error) => {
-                setError(Object.assign(Object.assign({}, error), formatHttpError(error)));
-            })
-                .then(() => {
-                setEditing(editing.filter((f) => f !== field));
-                setSaving(saving.filter((f) => f !== field));
-                if (onEditSuccess) {
-                    editingField ? onEditSuccess(editedField) : onEditSuccess();
-                }
-            });
         };
     };
-    const handleChange = (event) => {
-        setEditedField({ [event.target.name]: event.target.value });
-        setUser(Object.assign(Object.assign({}, user), { [event.target.name]: event.target.value }));
-    };
-    useEffect(() => {
-        if (editingField && typeof document !== 'undefined') {
-            const element = document.getElementById(editingField);
-            element && element.focus();
-        }
-    }, [editingField]);
     // RENDER
     const renderField = (field) => {
         const isEditing = editing.includes(field);
@@ -151,15 +139,15 @@ export default function PublicInfo(inProps) {
         const camelField = camelCase(field);
         const _error = error !== null && error[`${camelField}Error`] && error[`${camelField}Error`].error;
         const component = { element: TextField };
-        let label = intl.formatMessage({
-            id: `ui.userProfileInfo.${camelField}`,
-            defaultMessage: `ui.userProfileInfo.${field}`
-        });
+        let label = metadataDefinitions[field]
+            ? metadataDefinitions[field].label
+            : intl.formatMessage({
+                id: `ui.userInfo.${camelField}`,
+                defaultMessage: `ui.userInfo.${camelField}`
+            });
         let props = {
             InputProps: {
-                endAdornment: (React.createElement(InputAdornment, { position: "end" }, !isEditing ? (React.createElement(IconButton, { onClick: handleEdit(field), edge: "end" },
-                    React.createElement(Icon, null, "edit"))) : isSaving ? (React.createElement(CircularProgress, { size: 10 })) : (React.createElement(IconButton, { onClick: handleSave(field), edge: "end", color: user[field] === scUserContext.user[field] ? 'default' : 'primary' },
-                    React.createElement(Icon, null, "check")))))
+                endAdornment: React.createElement(InputAdornment, { position: "end" }, isSaving && React.createElement(CircularProgress, { size: 10 }))
             }
         };
         let content = null;
@@ -170,18 +158,56 @@ export default function PublicInfo(inProps) {
             case SCUserProfileFields.DATE_JOINED:
                 return null;
             case SCUserProfileFields.DATE_OF_BIRTH:
-                return (React.createElement(LocalizationProvider, { dateAdapter: AdapterDateFns, key: field },
+                return (React.createElement(LocalizationProvider, { dateAdapter: AdapterDateFns, key: field, adapterLocale: scContext.settings.locale.default === 'it' ? itLocale : enLocale },
                     React.createElement(DatePicker, { label: intl.formatMessage({
-                            id: `ui.userProfileInfo.${camelCase(field)}`,
-                            defaultMessage: `ui.userProfileInfo.${field}`
-                        }), value: user[field], onChange: (newValue) => {
-                            setUser(Object.assign(Object.assign({}, user), { [field]: newValue.toJSON().split('T')[0] })); // FIX for ensuring API format
-                        }, disableFuture: true, disabled: !isEditing || isSaving, renderInput: (params) => {
-                            const { InputProps } = params, rest = __rest(params, ["InputProps"]);
-                            InputProps.endAdornment = (React.createElement(React.Fragment, null,
-                                InputProps.endAdornment,
-                                props.InputProps.endAdornment));
-                            return React.createElement(TextField, Object.assign({}, rest, { className: classes.field, fullWidth: true, InputProps: InputProps }));
+                            id: `ui.userInfo.${camelCase(field)}`,
+                            defaultMessage: `ui.userInfo.${field}`
+                        }), defaultValue: user[field] ? parseISO(user[field]) : null, minDate: DATEPICKER_MINDATE, onChange: (newValue) => {
+                            const u = user;
+                            const field = SCUserProfileFields.DATE_OF_BIRTH;
+                            const camelField = camelCase(field);
+                            if ((isValid(newValue) && isBefore(startOfHour(DATEPICKER_MINDATE), newValue) && isBefore(newValue, new Date())) || !newValue) {
+                                if (error[`${camelField}Error`]) {
+                                    const _error = Object.assign({}, error);
+                                    delete _error[`${camelField}Error`];
+                                    setError(_error);
+                                }
+                                u[field] = newValue;
+                            }
+                            else {
+                                u[field] = null;
+                                setError({
+                                    [`${camelField}Error`]: {
+                                        error: intl.formatMessage({ id: 'ui.publicInfo.dateOfBirth.error', defaultMessage: 'ui.publicInfo.dateOfBirth.error' })
+                                    }
+                                });
+                            }
+                            setUser(u);
+                            setEditing([...editing, field]);
+                        }, disableFuture: true, disabled: isSaving, slots: {
+                            inputAdornment: (params) => {
+                                // eslint-disable-next-line @typescript-eslint/ban-ts-ignore,@typescript-eslint/ban-ts-comment
+                                // @ts-ignore
+                                const _a = params.children.props, { children } = _a, rest = __rest(_a, ["children"]);
+                                return (React.createElement(InputAdornment, { position: 'end' },
+                                    React.createElement(IconButton, Object.assign({}, rest), children),
+                                    isSaving && React.createElement(CircularProgress, { size: 10 })));
+                            }
+                        }, 
+                        // onAccept={isMobile ? handleSave(SCUserProfileFields.DATE_OF_BIRTH) : null}
+                        slotProps: {
+                            textField: {
+                                className: classes.field,
+                                fullWidth: true,
+                                variant: 'outlined',
+                                helperText: _error || null,
+                                InputProps: {
+                                    endAdornment: isMobile && (React.createElement(React.Fragment, null,
+                                        React.createElement(IconButton, { disabled: !isEditing },
+                                            React.createElement(Icon, null, "CalendarIcon")),
+                                        isSaving ? React.createElement(CircularProgress, { size: 10 }) : null))
+                                }
+                            }
                         } })));
             case SCUserProfileFields.BIO:
                 props.multiline = true;
@@ -199,17 +225,23 @@ export default function PublicInfo(inProps) {
                 return null;
             default:
                 if (metadataDefinitions && metadataDefinitions[field]) {
-                    return (React.createElement(MetadataField, Object.assign({ id: field, key: field }, props, { className: classes.field, name: field, fullWidth: true, label: label, value: user[field] || '', onChange: handleChange, disabled: !isEditing || isSaving, error: _error, helperText: _error, metadata: metadataDefinitions[field] })));
+                    return (React.createElement(MetadataField, Object.assign({ id: field, key: field, className: classes.field, name: field, fullWidth: true, label: label, value: user[field] || '', onChange: handleChange(field), disabled: isSaving, error: Boolean(_error), helperText: _error && React.createElement(FormattedMessage, { id: `ui.userInfo.metadata.error.${_error}`, defaultMessage: `ui.userInfo.metadata.error.${_error}` }), metadata: metadataDefinitions[field] }, props)));
                 }
                 break;
         }
-        return (React.createElement(component.element, Object.assign({ id: field, key: field }, props, { className: classes.field, name: field, fullWidth: true, label: label, value: user[field] || '', onChange: handleChange, disabled: !isEditing || isSaving, error: _error, helperText: _error }), content));
+        return (React.createElement(component.element, Object.assign({ id: field, key: field }, props, { className: classes.field, name: field, fullWidth: true, label: label, value: user[field] || '', onChange: handleChange(field), disabled: isSaving, error: Boolean(_error), helperText: _error && React.createElement(FormattedMessage, { id: `ui.userInfo.${camelField}.error.${_error}`, defaultMessage: `ui.userInfo.${camelField}.error.${_error}` }) }), content));
     };
-    if (fields.length === 0 || !user) {
+    // FIELDS
+    const _fields = [...fields, ...Object.keys(metadataDefinitions)];
+    if (_fields.length === 0 || !user) {
         return null;
     }
-    return (React.createElement(Root, Object.assign({ id: id, className: classNames(classes.root, className) }, rest), fields.map((field) => {
-        return renderField(field);
-    })));
+    return (React.createElement(Root, Object.assign({ id: id, className: classNames(classes.root, className) }, rest),
+        startActions,
+        _fields.map((field) => {
+            return renderField(field);
+        }),
+        React.createElement(LoadingButton, { className: classes.btnSave, fullWidth: true, variant: "contained", color: "secondary", onClick: handleSave, loading: saving.length > 0, disabled: saving.length > 0 || !editing.length || Object.keys(error).length > 0 },
+            React.createElement(FormattedMessage, { id: 'ui.userInfo.button.save', defaultMessage: 'ui.userInfo.button.save' })),
+        endActions));
 }
-//# sourceMappingURL=PublicInfo.js.map

package/lib/esm/components/UserProfileEdit/Section/Settings.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { SCUserProfileSettings } from '../../../types';
 export interface SettingsProps {
     /**
@@ -19,10 +20,19 @@ export interface SettingsProps {
      * Callback on edit data with success
      */
     onEditSuccess?: () => void;
+    /**
+     * Actions to be inserted at the start
+     * @default null
+     */
+    startActions?: React.ReactNode | null;
+    /**
+     * Actions to be inserted at the end
+     * @default null
+     */
+    endActions?: React.ReactNode | null;
     /**
      * Any other properties
      */
     [p: string]: any;
 }
-export default function Settings(inProps: SettingsProps): JSX.Element;
-//# sourceMappingURL=Settings.d.ts.map
+export default function Settings(props: SettingsProps): JSX.Element;