@selfcommunity/react-ui 0.7.0-alpha.36 → 0.7.0-alpha.360

package/lib/esm/components/UserProfileBlocked/UserProfileBlocked.d.ts

@@ -0,0 +1,57 @@
+import { SCUserType } from '@selfcommunity/types';
+export interface UserProfileBlockedProps {
+    /**
+     * Overrides or extends the styles applied to the component.
+     * @default null
+     */
+    className?: string;
+    /**
+     * Id of user object
+     * @default null
+     */
+    userId?: number;
+    /**
+     * User Object
+     * @default null
+     */
+    user?: SCUserType;
+    /**
+     * Prefetch blockedBy
+     * @default null
+     */
+    blockedByUser?: boolean | null;
+    /**
+     * Enable sync status blockedBy
+     * @default false
+     */
+    syncBlockedByUserStatus?: boolean;
+    /**
+     * Any other properties
+     */
+    [p: string]: any;
+}
+/**
+ * > API documentation for the Community-JS User Profile Blocked component. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {UserProfileBlocked} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCUserProfileBlocked` can be used when providing style overrides in the theme.
+
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCUserProfileBlocked-root|Styles applied to the root element.|
+ |info|.SCUserProfileBlocked-info|Styles applied to info text element.|
+ |button|.SCUserProfileBlocked-button|Styles applied to the unblock button element.|
+
+ * @param inProps
+ */
+export default function UserProfileBlocked(inProps: UserProfileBlockedProps): JSX.Element;

package/lib/esm/components/UserProfileBlocked/UserProfileBlocked.js

@@ -0,0 +1,89 @@
+import { __rest } from "tslib";
+import React, { useMemo } from 'react';
+import { styled } from '@mui/material/styles';
+import { Box, Divider, Typography } from '@mui/material';
+import { FormattedMessage } from 'react-intl';
+import { useSCFetchUser, useSCFetchUserBlockedBy, useSCUser } from '@selfcommunity/react-core';
+import classNames from 'classnames';
+import { useThemeProps } from '@mui/system';
+import { LoadingButton } from '@mui/lab';
+import { useSnackbar } from 'notistack';
+import { SCOPE_SC_UI } from '../../constants/Errors';
+import { Logger } from '@selfcommunity/utils';
+const PREFIX = 'SCUserProfileBlocked';
+const classes = {
+    root: `${PREFIX}-root`,
+    info: `${PREFIX}-info`,
+    button: `${PREFIX}-button`
+};
+const Root = styled(Box, {
+    name: PREFIX,
+    slot: 'Root',
+    overridesResolver: (props, styles) => styles.root
+})(() => ({
+    textAlign: 'center'
+}));
+/**
+ * > API documentation for the Community-JS User Profile Blocked component. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {UserProfileBlocked} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCUserProfileBlocked` can be used when providing style overrides in the theme.
+
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCUserProfileBlocked-root|Styles applied to the root element.|
+ |info|.SCUserProfileBlocked-info|Styles applied to info text element.|
+ |button|.SCUserProfileBlocked-button|Styles applied to the unblock button element.|
+
+ * @param inProps
+ */
+export default function UserProfileBlocked(inProps) {
+    // PROPS
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX
+    });
+    const { className = null, userId = null, user = null, blockedByUser = null, syncBlockedByUserStatus = false } = props, rest = __rest(props, ["className", "userId", "user", "blockedByUser", "syncBlockedByUserStatus"]);
+    // CONTEXT
+    const scUserContext = useSCUser();
+    const { enqueueSnackbar } = useSnackbar();
+    // HOOKS
+    const { scUser } = useSCFetchUser({ id: userId, user });
+    const { blockedBy, loading: loadingBlockedBy } = useSCFetchUserBlockedBy({ user: scUser, blockedByUser, sync: syncBlockedByUserStatus });
+    // CONST
+    const isMe = useMemo(() => scUserContext.user && (scUser === null || scUser === void 0 ? void 0 : scUser.id) === scUserContext.user.id, [scUserContext.user, scUser]);
+    /**
+     * Handle block action
+     */
+    const handleBlock = useMemo(() => () => {
+        scUserContext.managers.blockedUsers.block(scUser).catch((error) => {
+            Logger.error(SCOPE_SC_UI, error);
+            enqueueSnackbar(React.createElement(FormattedMessage, { id: "ui.common.error.action", defaultMessage: "ui.common.error.action" }), {
+                variant: 'error',
+                autoHideDuration: 3000
+            });
+        });
+    }, [scUserContext.managers.blockedUsers, scUser]);
+    if (!scUser || !scUserContext.user || loadingBlockedBy) {
+        return null;
+    }
+    return (React.createElement(Root, Object.assign({ className: classNames(classes.root, className) }, rest),
+        React.createElement(Divider, null),
+        !isMe && blockedBy && (React.createElement(Typography, { variant: "body1", className: classes.info },
+            React.createElement(FormattedMessage, { id: "ui.userProfileBlocked.blockedUserBy", defaultMessage: "ui.userProfileBlocked.blockedUserBy" }))),
+        !isMe && scUserContext.managers.blockedUsers.isBlocked(scUser) && (React.createElement(React.Fragment, null,
+            React.createElement(Typography, { variant: "body1", className: classes.info },
+                React.createElement(FormattedMessage, { id: "ui.userProfileBlocked.blockedUser", defaultMessage: "ui.userProfileBlocked.blockedUser" })),
+            React.createElement(LoadingButton, { variant: "contained", className: classes.button, loading: scUserContext.managers.blockedUsers.loading, disabled: scUserContext.managers.blockedUsers.loading, onClick: handleBlock },
+                React.createElement(FormattedMessage, { id: "ui.userProfileBlocked.unBlockUser", defaultMessage: "ui.userProfileBlocked.unBlockUser" }))))));
+}

package/lib/esm/components/UserProfileBlocked/index.d.ts

@@ -0,0 +1,3 @@
+import UserProfileBlocked, { UserProfileBlockedProps } from './UserProfileBlocked';
+export default UserProfileBlocked;
+export { UserProfileBlockedProps };

package/lib/esm/components/UserProfileBlocked/index.js

@@ -0,0 +1,2 @@
+import UserProfileBlocked from './UserProfileBlocked';
+export default UserProfileBlocked;

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

@@ -0,0 +1,55 @@
+import React from 'react';
+import { AccountCredentialProps } from './AccountCredentials';
+import { LanguageSwitcherProps } from '../../../shared/LanguageSwitcher';
+export interface AccountProps {
+    /**
+     * Overrides or extends the styles applied to the component.
+     * @default null
+     */
+    className?: string;
+    /**
+     * Handles create association callback
+     * @param provider
+     */
+    handleAssociationCreate?: (provider: any) => void;
+    /**
+     * If true, shows email and password section
+     * @default false
+     */
+    showCredentialsSection?: boolean;
+    /**
+     * If true, shows social account section
+     * @default true
+     */
+    showSocialAccountSection?: boolean;
+    /**
+     * If true, shows language switcher
+     * @default false
+     */
+    showLanguageSwitcher?: boolean;
+    /**
+     * Props to apply to LanguageSwitcher component
+     * @default {}
+     */
+    LanguageSwitcherProps?: LanguageSwitcherProps;
+    /**
+     * Actions to be inserted before credentials section
+     * @default null
+     */
+    startActions?: React.ReactNode | null;
+    /**
+     * Actions to be inserted after social associations section
+     * @default null
+     */
+    endActions?: React.ReactNode | null;
+    /**
+     * Props to apply to Account credential section
+     * @default {}
+     */
+    AccountCredentialProps?: AccountCredentialProps;
+    /**
+     * Any other properties
+     */
+    [p: string]: any;
+}
+export default function Account(props: AccountProps): JSX.Element;

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

@@ -0,0 +1,84 @@
+import { __rest } from "tslib";
+import React, { useState } from 'react';
+import { styled } from '@mui/material/styles';
+import { Box, Typography } from '@mui/material';
+import classNames from 'classnames';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+import ConfirmDialog from '../../../shared/ConfirmDialog/ConfirmDialog';
+import UserSocialAssociation from '../../UserSocialAssociation';
+import { UserService } from '@selfcommunity/api-services';
+import { SCOPE_SC_UI } from '../../../constants/Errors';
+import { Logger } from '@selfcommunity/utils';
+import { useSCUser } from '@selfcommunity/react-core';
+import AccountCredentials from './AccountCredentials';
+import AccountDataPortabilityButton from '../../AccountDataPortabilityButton';
+import AccountDeleteButton from '../../AccountDeleteButton';
+import LanguageSwitcher from '../../../shared/LanguageSwitcher';
+import { PREFIX } from '../constants';
+const messages = defineMessages({
+    socialTitle: {
+        id: 'ui.userProfileEditAccount.socialAssociations.title',
+        defaultMessage: 'ui.userProfileEditAccount.socialAssociations.title'
+    },
+    dialogTitleMsg: {
+        id: 'ui.userProfileEditAccount.socialAssociations.dialog.msg',
+        defaultMessage: 'ui.userProfileEditAccount.socialAssociations.dialog.msg'
+    },
+    deleteDialogMsg: {
+        id: 'ui.userProfileEditAccount.socialAssociations.dialog.msg',
+        defaultMessage: 'ui.userProfileEditAccount.socialAssociations.dialog.msg'
+    }
+});
+const classes = {
+    root: `${PREFIX}-account-root`,
+    credentials: `${PREFIX}-credentials`,
+    languageSwitcher: `${PREFIX}-language-switcher`,
+    dangerZone: `${PREFIX}-danger-zone`
+};
+const Root = styled(Box, {
+    name: PREFIX,
+    slot: 'AccountRoot'
+})(() => ({}));
+export default function Account(props) {
+    // CONTEXT
+    const scUserContext = useSCUser();
+    // PROPS
+    const { className = null, handleAssociationCreate, showSocialAccountSection = true, showCredentialsSection = false, AccountCredentialProps = {}, showLanguageSwitcher = false, LanguageSwitcherProps = {}, startActions = null, endActions = null } = props, rest = __rest(props, ["className", "handleAssociationCreate", "showSocialAccountSection", "showCredentialsSection", "AccountCredentialProps", "showLanguageSwitcher", "LanguageSwitcherProps", "startActions", "endActions"]);
+    // STATE
+    const [provider, setProvider] = useState(null);
+    const [openDeleteDialog, setOpenDeleteDialog] = useState(false);
+    const [shouldUpdate, setShouldUpdate] = useState(false);
+    // INTL
+    const intl = useIntl();
+    function handleDelete() {
+        const data = { user_id: scUserContext.user.id, provider: provider.provider, ext_id: provider.ext_id };
+        UserService.deleteProviderAssociation(data)
+            .then(() => {
+            setShouldUpdate(true);
+            setOpenDeleteDialog(false);
+        })
+            .catch((error) => {
+            console.log(error);
+            Logger.error(SCOPE_SC_UI, error);
+        });
+    }
+    const handleOpenDeleteDialog = (p) => {
+        setOpenDeleteDialog(true);
+        setProvider(p);
+    };
+    if (!scUserContext.user) {
+        return;
+    }
+    return (React.createElement(Root, Object.assign({ className: classNames(classes.root, className) }, rest),
+        startActions,
+        showCredentialsSection && React.createElement(AccountCredentials, Object.assign({ className: classes.credentials, user: scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user }, AccountCredentialProps)),
+        showLanguageSwitcher && React.createElement(LanguageSwitcher, Object.assign({ className: classes.languageSwitcher }, LanguageSwitcherProps)),
+        showSocialAccountSection && (React.createElement(UserSocialAssociation, { children: React.createElement(Typography, { variant: "body1", mb: 1, sx: { fontWeight: 'bold' } },
+                ' ',
+                intl.formatMessage(messages.socialTitle)), direction: "row", userId: scUserContext.user.id, onDeleteAssociation: handleOpenDeleteDialog, onCreateAssociation: handleAssociationCreate, deletingProvider: shouldUpdate ? provider : null })),
+        openDeleteDialog && (React.createElement(ConfirmDialog, { open: openDeleteDialog, title: intl.formatMessage(messages.dialogTitleMsg, { field: provider.provider }), btnConfirm: React.createElement(FormattedMessage, { id: "ui.userProfileEditAccount.socialAssociations.dialog.confirm", defaultMessage: "ui.userProfileEditAccount.socialAssociations.dialog.confirm" }), onConfirm: handleDelete, onClose: () => setOpenDeleteDialog(false) })),
+        endActions,
+        React.createElement(Box, { className: classes.dangerZone },
+            React.createElement(AccountDataPortabilityButton, { fullWidth: true, variant: "outlined", color: "primary" }),
+            React.createElement(AccountDeleteButton, { fullWidth: true, variant: "contained", color: "secondary" }))));
+}

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

@@ -0,0 +1,23 @@
+import { SCUserType } from '@selfcommunity/types';
+export interface AccountCredentialProps {
+    /**
+     * The user obj
+     */
+    user?: SCUserType;
+    /**
+     * Overrides or extends the styles applied to the component.
+     * @default null
+     */
+    className?: string;
+    /**
+     * Skip email validation when change email
+     * If skipEmailValidation=false it is required email validation (an email will be sent to the user)
+     * @default false
+     */
+    skipEmailValidation?: boolean;
+    /**
+     * Any other properties
+     */
+    [p: string]: any;
+}
+export default function AccountCredentials(props: AccountCredentialProps): JSX.Element;

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

@@ -0,0 +1,192 @@
+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 { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+import { formatHttpErrorCode, UserService } from '@selfcommunity/api-services';
+import { SCOPE_SC_UI } from '../../../constants/Errors';
+import { Logger } from '@selfcommunity/utils';
+import BaseDialog from '../../../shared/BaseDialog';
+import PasswordTextField from '../../../shared/PasswordTextField';
+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',
+        defaultMessage: 'ui.userProfileEditAccountCredentials.changePassword'
+    },
+    confirmPasswordError: {
+        id: 'ui.userProfileEditAccountCredentials.confirmPassword.error',
+        defaultMessage: 'ui.userProfileEditAccountCredentials.confirmPassword.error'
+    }
+});
+const classes = {
+    root: `${PREFIX}-account-credentials-root`,
+    email: `${PREFIX}-email`,
+    success: `${PREFIX}-success`,
+    error: `${PREFIX}-error`,
+    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: 'AccountCredentialsRoot'
+})(() => ({}));
+const PasswordDialogRoot = styled(BaseDialog, {
+    name: PREFIX,
+    slot: 'PasswordDialogRoot'
+})(() => ({}));
+export default function AccountCredentials(props) {
+    var _a;
+    // PROPS
+    const { className = null, user, skipEmailValidation = false } = props, rest = __rest(props, ["className", "user", "skipEmailValidation"]);
+    const { enqueueSnackbar } = useSnackbar();
+    // STATE
+    const [openChangePasswordDialog, setOpenChangePasswordDialog] = useState(false);
+    const initialFieldState = {
+        email: (_a = user === null || user === void 0 ? void 0 : user.email) !== null && _a !== void 0 ? _a : '',
+        password: '',
+        newPassword: '',
+        confirmPassword: ''
+    };
+    const initialErrorState = {
+        email: '',
+        password: '',
+        newPassword: '',
+        confirmPassword: ''
+    };
+    const [field, setField] = useState(initialFieldState);
+    const [error, setError] = useState(initialErrorState);
+    const [isEditing, setIsEditing] = useState(false);
+    const [isSubmittingPassword, setIsSubmittingPassword] = useState(false);
+    const [isSubmitting, setIsSubmitting] = useState(false);
+    const [anchorEl, setAnchorEl] = useState(null);
+    const open = Boolean(anchorEl);
+    // INTL
+    const intl = useIntl();
+    // HANDLERS
+    const handlePopoverOpen = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+    const handlePopoverClose = () => {
+        setAnchorEl(null);
+    };
+    const handleChange = (event) => {
+        const { name, value } = event.target;
+        setField((prev) => (Object.assign(Object.assign({}, prev), { [name]: value })));
+        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) {
+            setField((prev) => (Object.assign(Object.assign({}, prev), { ['email']: user === null || user === void 0 ? void 0 : user.email })));
+            setIsEditing(false);
+        }
+    };
+    const validateInput = () => {
+        if (field.newPassword !== field.confirmPassword) {
+            setError((prev) => (Object.assign(Object.assign({}, prev), { ['confirmPassword']: intl.formatMessage(messages.confirmPasswordError) })));
+        }
+    };
+    const handleCloseDialog = () => {
+        setOpenChangePasswordDialog(false);
+        setField(initialFieldState);
+        setError(initialErrorState);
+    };
+    const handleSubmitPassword = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        setIsSubmittingPassword(true);
+        UserService.changeUserPassword(user === null || user === void 0 ? void 0 : user.id, field.password, field.newPassword)
+            .then(() => {
+            setIsSubmittingPassword(false);
+            handleCloseDialog();
+        })
+            .catch((error) => {
+            setIsSubmittingPassword(false);
+            const _error = formatHttpErrorCode(error);
+            Logger.error(SCOPE_SC_UI, error);
+            if (_error.passwordError) {
+                setError((prev) => (Object.assign(Object.assign({}, prev), { ['password']: _error.passwordError.error })));
+            }
+            if (_error.newPasswordError) {
+                setError((prev) => (Object.assign(Object.assign({}, prev), { ['newPassword']: _error.newPasswordError.error })));
+            }
+        });
+    };
+    const handleSubmitEmail = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setIsSubmitting(true);
+        UserService.changeUserMail(user === null || user === void 0 ? void 0 : user.id, field.email, !skipEmailValidation, !skipEmailValidation)
+            .then((res) => {
+            setIsEditing(false);
+            setIsSubmitting(false);
+            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) => {
+            setIsSubmitting(false);
+            const _error = formatHttpErrorCode(error);
+            setError((prev) => (Object.assign(Object.assign({}, prev), { ['email']: _error.newEmailError ? `newEmailError.${_error.newEmailError.error}` : _error.error })));
+        });
+    };
+    if (!user) {
+        return;
+    }
+    return (React.createElement(Root, Object.assign({ className: classNames(classes.root, className) }, rest),
+        React.createElement(React.Fragment, null,
+            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 && (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 || 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(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(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"))))
+                    } }),
+                React.createElement(Popover, { open: open, anchorEl: anchorEl, anchorOrigin: {
+                        vertical: 'center',
+                        horizontal: 'left'
+                    }, transformOrigin: {
+                        vertical: 'center',
+                        horizontal: 'right'
+                    }, onClose: handlePopoverClose },
+                    React.createElement(Box, { sx: { p: '10px' } },
+                        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.confirmPassword) || Boolean(error.password) || Boolean(error.newPassword), variant: "contained", onClick: handleSubmitPassword },
+                React.createElement(FormattedMessage, { id: "ui.userProfileEditAccountCredentials.changePassword", defaultMessage: "ui.userProfileEditAccountCredentials.changePassword" }))))));
+}

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,21 +19,24 @@ export interface PublicInfoProps {
     /**
      * Callback on edit data with success
      */
-    onEditSuccess?: (editedField?: {}) => void;
+    onEditSuccess?: (editedField?: Record<string, any>) => void;
     /**
-     * Callback on delete social association success
+     * Callback on edit data with error
+     */
+    onEditFailure?: (editedField?: Record<string, any>) => void;
+    /**
+     * Actions to be inserted at the start
      * @default null
      */
-    onAssociationDelete?: () => void;
+    startActions?: React.ReactNode | null;
     /**
-     * Callback on create social association
-     * default null
+     * Actions to be inserted at the end
+     * @default null
      */
-    onAssociationCreate?: (provider: string) => void;
+    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;