@selfcommunity/react-ui
Version:
React UI Components to integrate a Community created with SelfCommunity Platform.
75 lines (74 loc) • 4.93 kB
JavaScript
import { __rest } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { 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 = {}, AccountDeleteButtonProps = {}, showLanguageSwitcher = false, LanguageSwitcherProps = {}, startActions = null, endActions = null } = props, rest = __rest(props, ["className", "handleAssociationCreate", "showSocialAccountSection", "showCredentialsSection", "AccountCredentialProps", "AccountDeleteButtonProps", "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 (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: [startActions, showCredentialsSection && _jsx(AccountCredentials, Object.assign({ className: classes.credentials, user: scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user }, AccountCredentialProps)), showLanguageSwitcher && _jsx(LanguageSwitcher, Object.assign({ className: classes.languageSwitcher }, LanguageSwitcherProps)), showSocialAccountSection && (_jsx(UserSocialAssociation, { children: _jsxs(Typography, Object.assign({ variant: "body1", mb: 1, sx: { fontWeight: 'bold' } }, { children: [' ', intl.formatMessage(messages.socialTitle)] })), direction: "row", userId: scUserContext.user.id, onDeleteAssociation: handleOpenDeleteDialog, onCreateAssociation: handleAssociationCreate, deletingProvider: shouldUpdate ? provider : null })), openDeleteDialog && (_jsx(ConfirmDialog, { open: openDeleteDialog, title: intl.formatMessage(messages.dialogTitleMsg, { field: provider.provider }), btnConfirm: _jsx(FormattedMessage, { id: "ui.userProfileEditAccount.socialAssociations.dialog.confirm", defaultMessage: "ui.userProfileEditAccount.socialAssociations.dialog.confirm" }), onConfirm: handleDelete, onClose: () => setOpenDeleteDialog(false) })), endActions, _jsxs(Box, Object.assign({ className: classes.dangerZone }, { children: [_jsx(AccountDataPortabilityButton, { fullWidth: true, variant: "outlined", color: "primary" }), _jsx(AccountDeleteButton, Object.assign({ fullWidth: true, variant: "contained", color: "secondary" }, AccountDeleteButtonProps))] }))] })));
}