@selfcommunity/react-ui
Version:
React UI Components to integrate a Community created with SelfCommunity Platform.
78 lines (77 loc) • 5.73 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const styles_1 = require("@mui/material/styles");
const material_1 = require("@mui/material");
const classnames_1 = tslib_1.__importDefault(require("classnames"));
const react_intl_1 = require("react-intl");
const ConfirmDialog_1 = tslib_1.__importDefault(require("../../../shared/ConfirmDialog/ConfirmDialog"));
const UserSocialAssociation_1 = tslib_1.__importDefault(require("../../UserSocialAssociation"));
const api_services_1 = require("@selfcommunity/api-services");
const Errors_1 = require("../../../constants/Errors");
const utils_1 = require("@selfcommunity/utils");
const react_core_1 = require("@selfcommunity/react-core");
const AccountCredentials_1 = tslib_1.__importDefault(require("./AccountCredentials"));
const AccountDataPortabilityButton_1 = tslib_1.__importDefault(require("../../AccountDataPortabilityButton"));
const AccountDeleteButton_1 = tslib_1.__importDefault(require("../../AccountDeleteButton"));
const LanguageSwitcher_1 = tslib_1.__importDefault(require("../../../shared/LanguageSwitcher"));
const constants_1 = require("../constants");
const messages = (0, react_intl_1.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: `${constants_1.PREFIX}-account-root`,
credentials: `${constants_1.PREFIX}-credentials`,
languageSwitcher: `${constants_1.PREFIX}-language-switcher`,
dangerZone: `${constants_1.PREFIX}-danger-zone`
};
const Root = (0, styles_1.styled)(material_1.Box, {
name: constants_1.PREFIX,
slot: 'AccountRoot'
})(() => ({}));
function Account(props) {
// CONTEXT
const scUserContext = (0, react_core_1.useSCUser)();
// PROPS
const { className = null, handleAssociationCreate, showSocialAccountSection = true, showCredentialsSection = false, AccountCredentialProps = {}, AccountDeleteButtonProps = {}, showLanguageSwitcher = false, LanguageSwitcherProps = {}, startActions = null, endActions = null } = props, rest = tslib_1.__rest(props, ["className", "handleAssociationCreate", "showSocialAccountSection", "showCredentialsSection", "AccountCredentialProps", "AccountDeleteButtonProps", "showLanguageSwitcher", "LanguageSwitcherProps", "startActions", "endActions"]);
// STATE
const [provider, setProvider] = (0, react_1.useState)(null);
const [openDeleteDialog, setOpenDeleteDialog] = (0, react_1.useState)(false);
const [shouldUpdate, setShouldUpdate] = (0, react_1.useState)(false);
// INTL
const intl = (0, react_intl_1.useIntl)();
function handleDelete() {
const data = { user_id: scUserContext.user.id, provider: provider.provider, ext_id: provider.ext_id };
api_services_1.UserService.deleteProviderAssociation(data)
.then(() => {
setShouldUpdate(true);
setOpenDeleteDialog(false);
})
.catch((error) => {
console.log(error);
utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
});
}
const handleOpenDeleteDialog = (p) => {
setOpenDeleteDialog(true);
setProvider(p);
};
if (!scUserContext.user) {
return;
}
return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [startActions, showCredentialsSection && (0, jsx_runtime_1.jsx)(AccountCredentials_1.default, Object.assign({ className: classes.credentials, user: scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user }, AccountCredentialProps)), showLanguageSwitcher && (0, jsx_runtime_1.jsx)(LanguageSwitcher_1.default, Object.assign({ className: classes.languageSwitcher }, LanguageSwitcherProps)), showSocialAccountSection && ((0, jsx_runtime_1.jsx)(UserSocialAssociation_1.default, { children: (0, jsx_runtime_1.jsxs)(material_1.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 && ((0, jsx_runtime_1.jsx)(ConfirmDialog_1.default, { open: openDeleteDialog, title: intl.formatMessage(messages.dialogTitleMsg, { field: provider.provider }), btnConfirm: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userProfileEditAccount.socialAssociations.dialog.confirm", defaultMessage: "ui.userProfileEditAccount.socialAssociations.dialog.confirm" }), onConfirm: handleDelete, onClose: () => setOpenDeleteDialog(false) })), endActions, (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.dangerZone }, { children: [(0, jsx_runtime_1.jsx)(AccountDataPortabilityButton_1.default, { fullWidth: true, variant: "outlined", color: "primary" }), (0, jsx_runtime_1.jsx)(AccountDeleteButton_1.default, Object.assign({ fullWidth: true, variant: "contained", color: "secondary" }, AccountDeleteButtonProps))] }))] })));
}
exports.default = Account;