@selfcommunity/react-ui 0.10.2-courses.191 → 0.10.2-courses.193

package/lib/cjs/components/CourseForm/CourseForm.js

@@ -254,11 +254,11 @@ function CourseForm(inProps) {
     /**
      * Renders root object
      */
-    return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: _step === Course_1.SCCourseFormStepType.GENERAL ? classes.stepOne : classes.stepTwo }, { children: [_step === Course_1.SCCourseFormStepType.GENERAL && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: Object.values(types_1.SCCourseTypologyType).map((option, index) => ((0, jsx_runtime_1.jsx)(material_1.Card, Object.assign({ className: (0, classnames_1.default)(classes.card, { [classes.selected]: option === field.type }, { [classes.disabled]: !courseAdvancedEnabled && option !== types_1.SCCourseTypologyType.SELF }) }, { children: (0, jsx_runtime_1.jsx)(material_1.CardActionArea, Object.assign({ onClick: () => setField((prev) => (Object.assign(Object.assign({}, prev), { ['type']: option }))) }, { children: (0, jsx_runtime_1.jsxs)(material_1.CardContent, { children: [(0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ variant: "subtitle2", className: classes.cardTitle }, { children: [(0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.courseForm.${option}.title`, defaultMessage: `ui.courseForm.${option}.title` }), !courseAdvancedEnabled && option !== types_1.SCCourseTypologyType.SELF && ((0, jsx_runtime_1.jsx)(material_1.Chip, { variant: "outlined", color: "warning", size: "small", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courseForm.comingSoon.chip", defaultMessage: "ui.courseForm.comingSoon.chip" }) }))] })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.courseForm.${option}.info`, defaultMessage: `ui.courseForm.${option}.info` }) }))] }) })) }), index))) })), _step === Course_1.SCCourseFormStepType.CUSTOMIZATION && ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [course && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5", className: classes.contrastColor }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courseForm.edit.title.general", defaultMessage: "ui.courseForm.edit.title.general" }) }))), (0, jsx_runtime_1.jsxs)(material_1.FormGroup, Object.assign({ className: (0, classnames_1.default)(classes.form, _step === Course_1.SCCourseFormStepType.CUSTOMIZATION ? classes.stepCustomization : undefined) }, { children: [(0, jsx_runtime_1.jsx)(material_1.Paper, Object.assign({ style: _backgroundCover, classes: { root: classes.cover } }, { children: (0, jsx_runtime_1.jsx)(UploadCourseCover_1.default, { isUploading: field.isSubmitting, onChange: handleChangeCover }) })), (0, jsx_runtime_1.jsx)(material_1.TextField, { required: true, className: classes.name, placeholder: `${intl.formatMessage(messages.name)}`, margin: "normal", value: field.name, name: "name", onChange: handleChange, InputProps: {
+    return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: _step === Course_1.SCCourseFormStepType.GENERAL ? classes.stepOne : classes.stepTwo }, { children: [_step === Course_1.SCCourseFormStepType.GENERAL && ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: Object.values(types_1.SCCourseTypologyType).map((option, index) => ((0, jsx_runtime_1.jsx)(material_1.Card, Object.assign({ className: (0, classnames_1.default)(classes.card, { [classes.selected]: option === field.type }, { [classes.disabled]: !courseAdvancedEnabled && option !== types_1.SCCourseTypologyType.SELF }) }, { children: (0, jsx_runtime_1.jsx)(material_1.CardActionArea, Object.assign({ onClick: () => setField((prev) => (Object.assign(Object.assign({}, prev), { ['type']: option }))) }, { children: (0, jsx_runtime_1.jsxs)(material_1.CardContent, { children: [(0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ variant: "subtitle2", className: classes.cardTitle }, { children: [(0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.courseForm.${option}.title`, defaultMessage: `ui.courseForm.${option}.title` }), !courseAdvancedEnabled && option !== types_1.SCCourseTypologyType.SELF && ((0, jsx_runtime_1.jsx)(material_1.Chip, { variant: "outlined", color: "warning", size: "small", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courseForm.comingSoon.chip", defaultMessage: "ui.courseForm.comingSoon.chip" }) }))] })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.courseForm.${option}.info`, defaultMessage: `ui.courseForm.${option}.info` }) }))] }) })) }), index))) })), _step === Course_1.SCCourseFormStepType.CUSTOMIZATION && ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [course && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5", className: classes.contrastColor }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courseForm.edit.title.general", defaultMessage: "ui.courseForm.edit.title.general" }) }))), (0, jsx_runtime_1.jsxs)(material_1.FormGroup, Object.assign({ className: (0, classnames_1.default)(classes.form, _step === Course_1.SCCourseFormStepType.CUSTOMIZATION && course ? classes.stepCustomization : undefined) }, { children: [(0, jsx_runtime_1.jsx)(material_1.Paper, Object.assign({ style: _backgroundCover, classes: { root: classes.cover } }, { children: (0, jsx_runtime_1.jsx)(UploadCourseCover_1.default, { isUploading: field.isSubmitting, onChange: handleChangeCover }) })), (0, jsx_runtime_1.jsx)(material_1.TextField, { required: true, className: classes.name, placeholder: `${intl.formatMessage(messages.name)}`, margin: "normal", value: field.name, name: "name", onChange: handleChange, InputProps: {
                                                 endAdornment: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: Course_1.COURSE_TITLE_MAX_LENGTH - field.name.length }))
                                             }, error: Boolean(field.name.length > Course_1.COURSE_TITLE_MAX_LENGTH) || Boolean(error['nameError']), helperText: field.name.length > Course_1.COURSE_TITLE_MAX_LENGTH ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courseForm.name.error.maxLength", defaultMessage: "ui.courseForm.name.error.maxLength" })) : error['nameError'] ? (error['nameError']) : null }), (0, jsx_runtime_1.jsx)(material_1.TextField, { multiline: true, className: classes.description, placeholder: `${intl.formatMessage(messages.description)}`, margin: "normal", value: field.description, name: "description", onChange: handleChange, InputProps: {
                                                 endAdornment: ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: ((_a = field.description) === null || _a === void 0 ? void 0 : _a.length) ? Course_1.COURSE_DESCRIPTION_MAX_LENGTH - field.description.length : Course_1.COURSE_DESCRIPTION_MAX_LENGTH })))
-                                            }, error: Boolean(((_b = field.description) === null || _b === void 0 ? void 0 : _b.length) > Course_1.COURSE_DESCRIPTION_MAX_LENGTH), helperText: ((_c = field.description) === null || _c === void 0 ? void 0 : _c.length) > Course_1.COURSE_DESCRIPTION_MAX_LENGTH ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courseForm.description.error.maxLength", defaultMessage: "ui.courseForm.description.error.maxLength" })) : null }), (0, jsx_runtime_1.jsx)(CategoryAutocomplete_1.default, { defaultValue: field.categories, TextFieldProps: { label: intl.formatMessage(Object.keys(field.categories).length ? messages.category : messages.categoryEmpty) }, multiple: true, onChange: handleOnChangeCategory }), course && (0, jsx_runtime_1.jsx)(Edit_1.default, { course: course, onPrivacyChange: (privacy) => setField((prev) => (Object.assign(Object.assign({}, prev), { ['privacy']: privacy }))) })] }))] })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: (0, classnames_1.default)(classes.actions, _step === Course_1.SCCourseFormStepType.CUSTOMIZATION ? classes.stepCustomization : undefined) }, { children: (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ size: "small", loading: field.isSubmitting, disabled: _step === Course_1.SCCourseFormStepType.GENERAL
+                                            }, error: Boolean(((_b = field.description) === null || _b === void 0 ? void 0 : _b.length) > Course_1.COURSE_DESCRIPTION_MAX_LENGTH), helperText: ((_c = field.description) === null || _c === void 0 ? void 0 : _c.length) > Course_1.COURSE_DESCRIPTION_MAX_LENGTH ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courseForm.description.error.maxLength", defaultMessage: "ui.courseForm.description.error.maxLength" })) : null }), (0, jsx_runtime_1.jsx)(CategoryAutocomplete_1.default, { defaultValue: field.categories, TextFieldProps: { label: intl.formatMessage(Object.keys(field.categories).length ? messages.category : messages.categoryEmpty) }, multiple: true, onChange: handleOnChangeCategory }), course && (0, jsx_runtime_1.jsx)(Edit_1.default, { course: course, onPrivacyChange: (privacy) => setField((prev) => (Object.assign(Object.assign({}, prev), { ['privacy']: privacy }))) })] }))] })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: (0, classnames_1.default)(classes.actions, _step === Course_1.SCCourseFormStepType.CUSTOMIZATION && course ? classes.stepCustomization : undefined) }, { children: (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ size: "small", loading: field.isSubmitting, disabled: _step === Course_1.SCCourseFormStepType.GENERAL
                                     ? !field.type || Object.keys(error).length !== 0
                                     : _step === Course_1.SCCourseFormStepType.CUSTOMIZATION &&
                                         (!field.name ||

package/lib/cjs/components/EditCourse/Requests.js

@@ -67,7 +67,7 @@ function Requests(props) {
         }
     }, [state.isLoadingNext, state.initialized, course, dispatch, endpointQueryParams]);
     // HANDLERS
-    const handleRemoveUser = (0, react_1.useCallback)((_msg, user) => {
+    const handleRejectUser = (0, react_1.useCallback)((_msg, user) => {
         dispatch({
             type: widget_1.actionWidgetTypes.SET_RESULTS,
             payload: { count: state.results.length - 1, results: state.results.filter((result) => result.id !== user.id) }
@@ -84,11 +84,11 @@ function Requests(props) {
         }
     }, [scUserContext.user, _init]);
     (0, react_1.useEffect)(() => {
-        updatedUsers.current = pubsub_js_1.default.subscribe(`${PubSub_1.SCTopicType.COURSE}.${PubSub_1.SCGroupEventType.REMOVE_MEMBER}`, handleRemoveUser);
+        updatedUsers.current = pubsub_js_1.default.subscribe(`${PubSub_1.SCTopicType.COURSE}.${PubSub_1.SCCourseEventType.REJECT_MEMBER}`, handleRejectUser);
         return () => {
             updatedUsers.current && pubsub_js_1.default.unsubscribe(updatedUsers.current);
         };
-    }, [handleRemoveUser]);
+    }, [handleRejectUser]);
     return ((0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h6", className: classes.contrastColor }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.editCourse.tab.requests.title", defaultMessage: "ui.editCourse.tab.requests.title", values: { requestsNumber: state.results.length } }) })), (0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ className: classes.usersStatusWrapper }, { children: (0, jsx_runtime_1.jsx)(Status_1.default, { course: course, handleTabChange: handleTabChange }) })), (0, jsx_runtime_1.jsx)(CourseUsersTable_1.default, { course: course, state: state, dispatch: dispatch, headerCells: headerCells, mode: course_1.SCCourseUsersTableModeType.REQUESTS, emptyStatusTitle: "ui.courseUsersTable.empty.requests.title" })] }));
 }
 exports.default = (0, react_1.memo)(Requests);

package/lib/cjs/components/EditCourse/Users.js

@@ -35,7 +35,8 @@ const headerCells = [
     },
     {
         id: 'ui.editCourse.tab.users.table.header.latestActivity'
-    }
+    },
+    {}
 ];
 function Users(props) {
     // PROPS
@@ -58,6 +59,7 @@ function Users(props) {
     const { enqueueSnackbar } = (0, notistack_1.useSnackbar)();
     // REFS
     const updatedUsers = (0, react_1.useRef)(null);
+    const removedUsers = (0, react_1.useRef)(null);
     // CALLBACKS
     const _init = (0, react_1.useCallback)(() => {
         if (!state.initialized && !state.isLoadingNext) {
@@ -76,6 +78,12 @@ function Users(props) {
     const handleAddUser = (0, react_1.useCallback)((_msg, user) => {
         dispatch({ type: widget_1.actionWidgetTypes.LOAD_PREVIOUS_SUCCESS, payload: { count: state.count + 1, results: [user], initialized: true } });
     }, [state.count, dispatch]);
+    const handleRemoveUser = (0, react_1.useCallback)((_msg, user) => {
+        dispatch({
+            type: widget_1.actionWidgetTypes.SET_RESULTS,
+            payload: { count: state.count - 1, results: state.results.filter((result) => result.id !== user.id), initialized: true }
+        });
+    }, [state.count, state.results, dispatch]);
     // EFFECTS
     (0, react_1.useEffect)(() => {
         let _t;
@@ -87,11 +95,13 @@ function Users(props) {
         }
     }, [scUserContext.user, _init]);
     (0, react_1.useEffect)(() => {
-        updatedUsers.current = pubsub_js_1.default.subscribe(`${PubSub_1.SCTopicType.COURSE}.${PubSub_1.SCGroupEventType.ADD_MEMBER}`, handleAddUser);
+        updatedUsers.current = pubsub_js_1.default.subscribe(`${PubSub_1.SCTopicType.COURSE}.${PubSub_1.SCCourseEventType.ADD_MEMBER}`, handleAddUser);
+        removedUsers.current = pubsub_js_1.default.subscribe(`${PubSub_1.SCTopicType.COURSE}.${PubSub_1.SCCourseEventType.REMOVE_MEMBER}`, handleRemoveUser);
         return () => {
             updatedUsers.current && pubsub_js_1.default.unsubscribe(updatedUsers.current);
+            removedUsers.current && pubsub_js_1.default.unsubscribe(removedUsers.current);
         };
-    }, [handleAddUser]);
+    }, [handleAddUser, handleRemoveUser]);
     const handleConfirm = (0, react_1.useCallback)((newUsers) => {
         const data = {
             joined: newUsers.map((user) => user.id)
@@ -116,7 +126,7 @@ function Users(props) {
             });
         });
     }, [course, dispatch]);
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h6", className: classes.contrastColor }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.editCourse.tab.users.title", defaultMessage: "ui.editCourse.tab.users.title", values: { usersNumber: state.results.length } }) })), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.usersStatusWrapper }, { children: [(0, jsx_runtime_1.jsx)(Status_1.default, { course: course, handleTabChange: handleTabChange }), (0, jsx_runtime_1.jsx)(AddUsersButton_1.default, { label: "ui.editCourse.tab.users.addUsersButton.label", endpoint: {
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h6", className: classes.contrastColor }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.editCourse.tab.users.title", defaultMessage: "ui.editCourse.tab.users.title", values: { usersNumber: state.count } }) })), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.usersStatusWrapper }, { children: [(0, jsx_runtime_1.jsx)(Status_1.default, { course: course, handleTabChange: handleTabChange }), (0, jsx_runtime_1.jsx)(AddUsersButton_1.default, { label: "ui.editCourse.tab.users.addUsersButton.label", endpoint: {
                             url: () => api_services_1.Endpoints.GetCourseSuggestedUsers.url({ id: course.id }),
                             method: api_services_1.Endpoints.GetCourseSuggestedUsers.method
                         }, onConfirm: handleConfirm })] })), (0, jsx_runtime_1.jsx)(CourseUsersTable_1.default, { course: course, state: state, dispatch: dispatch, headerCells: headerCells, mode: course_1.SCCourseUsersTableModeType.EDIT, emptyStatusTitle: "ui.courseUsersTable.empty.users.title", emptyStatusDescription: "ui.courseUsersTable.empty.users.description" })] }));

package/lib/cjs/components/Notification/Course/Course.d.ts

@@ -0,0 +1,15 @@
+import { SCNotificationCourseActivityType } from '@selfcommunity/types';
+import { NotificationItemProps } from '../../../shared/NotificationItem';
+export interface NotificationCourseProps extends Pick<NotificationItemProps, Exclude<keyof NotificationItemProps, 'image' | 'disableTypography' | 'primary' | 'primaryTypographyProps' | 'secondary' | 'secondaryTypographyProps' | 'actions' | 'footer' | 'isNew'>> {
+    /**
+     * Notification obj
+     * @default null
+     */
+    notificationObject: SCNotificationCourseActivityType;
+}
+/**
+ * This component render the content of the notification of type course
+ * @constructor
+ * @param props
+ */
+export default function CourseNotification(props: NotificationCourseProps): JSX.Element;

package/lib/cjs/components/Notification/Course/Course.js

@@ -0,0 +1,75 @@
+"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 react_core_1 = require("@selfcommunity/react-core");
+const react_intl_1 = require("react-intl");
+const DateTimeAgo_1 = tslib_1.__importDefault(require("../../../shared/DateTimeAgo"));
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const types_1 = require("../../../types");
+const NotificationItem_1 = tslib_1.__importDefault(require("../../../shared/NotificationItem"));
+const lab_1 = require("@mui/lab");
+const UserDeletedSnackBar_1 = tslib_1.__importDefault(require("../../../shared/UserDeletedSnackBar"));
+const UserAvatar_1 = tslib_1.__importDefault(require("../../../shared/UserAvatar"));
+const constants_1 = require("../constants");
+const Course_1 = tslib_1.__importDefault(require("../../Course"));
+const HiddenPlaceholder_1 = tslib_1.__importDefault(require("../../../shared/HiddenPlaceholder"));
+const classes = {
+    root: `${constants_1.PREFIX}-course-root`,
+    avatar: `${constants_1.PREFIX}-avatar`,
+    actions: `${constants_1.PREFIX}-actions`,
+    seeButton: `${constants_1.PREFIX}see-button`,
+    activeAt: `${constants_1.PREFIX}-active-at`,
+    snippetTime: `${constants_1.PREFIX}-snippet-time`,
+    username: `${constants_1.PREFIX}-username`
+};
+const Root = (0, styles_1.styled)(NotificationItem_1.default, {
+    name: constants_1.PREFIX,
+    slot: 'CourseRoot'
+})(() => ({}));
+/**
+ * This component render the content of the notification of type course
+ * @constructor
+ * @param props
+ */
+function CourseNotification(props) {
+    // PROPS
+    const { notificationObject, id = `n_${props.notificationObject['sid']}`, className, template = types_1.SCNotificationObjectTemplateType.DETAIL } = props, rest = tslib_1.__rest(props, ["notificationObject", "id", "className", "template"]);
+    // CONTEXT
+    const scRoutingContext = (0, react_core_1.useSCRouting)();
+    // STATE
+    const [openAlert, setOpenAlert] = (0, react_1.useState)(false);
+    // CONST
+    const isSnippetTemplate = template === types_1.SCNotificationObjectTemplateType.SNIPPET;
+    const isToastTemplate = template === types_1.SCNotificationObjectTemplateType.TOAST;
+    if (!notificationObject.course) {
+        return (0, jsx_runtime_1.jsx)(HiddenPlaceholder_1.default, {});
+    }
+    // RENDER
+    if (isSnippetTemplate || isToastTemplate) {
+        return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className, `${constants_1.PREFIX}-${template}`), template: template, isNew: notificationObject.is_new, disableTypography: true, image: (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({}, (!notificationObject.course.created_by.deleted && {
+                to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, notificationObject.course.created_by)
+            }), { onClick: notificationObject.course.created_by.deleted ? () => setOpenAlert(true) : null }, { children: (0, jsx_runtime_1.jsx)(UserAvatar_1.default, Object.assign({ hide: !notificationObject.course.created_by.community_badge, smaller: true }, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: notificationObject.course.created_by.username, variant: "circular", src: notificationObject.course.created_by.avatar, classes: { root: classes.avatar } }) })) })), primary: (0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({}, (!notificationObject.course.created_by.deleted && {
+                        to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, notificationObject.course.created_by)
+                    }), { onClick: notificationObject.course.created_by.deleted ? () => setOpenAlert(true) : null, className: classes.username }, { children: notificationObject.course.created_by.username })), ' ', (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.notification.course.${notificationObject.type}`, defaultMessage: `ui.notification.course.${notificationObject.type}`, values: {
+                            // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                            // @ts-ignore
+                            course: notificationObject.course.name,
+                            link: (...chunks) => (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes.COURSE_ROUTE_NAME, notificationObject.course) }, { children: chunks }))
+                        } })] }), footer: isToastTemplate ? ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 }, { children: [(0, jsx_runtime_1.jsx)(DateTimeAgo_1.default, { date: notificationObject.active_at }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ color: "primary" }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes.COURSE_ROUTE_NAME, notificationObject.course) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.notification.course.button.see", defaultMessage: "ui.notification.course.button.see" }) })) }))] }))) : ((0, jsx_runtime_1.jsx)(DateTimeAgo_1.default, { date: notificationObject.active_at, className: classes.snippetTime })) }, rest)));
+    }
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className, `${constants_1.PREFIX}-${template}`), template: template, isNew: notificationObject.is_new, disableTypography: true, image: (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({}, (!notificationObject.course.created_by.deleted && {
+                    to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, notificationObject.course.created_by)
+                }), { onClick: notificationObject.course.created_by.deleted ? () => setOpenAlert(true) : null }, { children: (0, jsx_runtime_1.jsx)(UserAvatar_1.default, Object.assign({ hide: !notificationObject.course.created_by.community_badge, smaller: true }, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, { className: classes.avatar, alt: notificationObject.course.created_by.username, variant: "circular", src: notificationObject.course.created_by.avatar }) })) })), primary: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({}, (!notificationObject.course.created_by.deleted && {
+                            to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, notificationObject.course.created_by)
+                        }), { onClick: notificationObject.course.created_by.deleted ? () => setOpenAlert(true) : null, className: classes.username }, { children: notificationObject.course.created_by.username })), ' ', (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.notification.course.${notificationObject.type}`, defaultMessage: `ui.notification.course.${notificationObject.type}`, values: {
+                                // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                                // @ts-ignore
+                                course: notificationObject.course.name,
+                                link: (...chunks) => (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes.COURSE_ROUTE_NAME, notificationObject.course) }, { children: chunks }))
+                            } }), (0, jsx_runtime_1.jsx)(Course_1.default, { course: notificationObject.course, actions: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}), template: types_1.SCCourseTemplateType.SNIPPET, elevation: 0 })] }), actions: (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 }, { children: [(0, jsx_runtime_1.jsx)(DateTimeAgo_1.default, { date: notificationObject.active_at, className: classes.activeAt }), (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ color: 'primary', variant: "outlined", size: "small", classes: { root: classes.seeButton }, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.COURSE_ROUTE_NAME, notificationObject.course) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.notification.course.button.see", defaultMessage: "ui.notification.course.button.see" }) }))] })) }, rest)), openAlert && (0, jsx_runtime_1.jsx)(UserDeletedSnackBar_1.default, { open: openAlert, handleClose: () => setOpenAlert(false) })] }));
+}
+exports.default = CourseNotification;

package/lib/cjs/components/Notification/Course/index.d.ts

@@ -0,0 +1,3 @@
+import CourseNotification, { NotificationCourseProps } from './Course';
+export default CourseNotification;
+export { NotificationCourseProps };

package/lib/cjs/components/Notification/Course/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const Course_1 = tslib_1.__importDefault(require("./Course"));
+exports.default = Course_1.default;

package/lib/cjs/components/Notification/Notification.js

@@ -39,6 +39,7 @@ const UserDeletedSnackBar_1 = tslib_1.__importDefault(require("../../shared/User
 const UserAvatar_1 = tslib_1.__importDefault(require("../../shared/UserAvatar"));
 const constants_1 = require("./constants");
 const Group_1 = tslib_1.__importDefault(require("./Group"));
+const Course_1 = tslib_1.__importDefault(require("./Course"));
 const messages = (0, react_intl_1.defineMessages)({
     receivePrivateMessage: {
         id: 'ui.notification.receivePrivateMessage',
@@ -309,6 +310,13 @@ function UserNotification(inProps) {
             n.type === types_1.SCNotificationTypologyType.USER_REQUESTED_TO_JOIN_EVENT) {
             return (0, jsx_runtime_1.jsx)(Event_1.default, { notificationObject: n }, i);
         }
+        else if (n.type === types_1.SCNotificationTypologyType.USER_ADDED_TO_COURSE ||
+            n.type === types_1.SCNotificationTypologyType.USER_COMMENTED_A_COURSE_LESSON ||
+            n.type === types_1.SCNotificationTypologyType.USER_INVITED_TO_JOIN_COURSE ||
+            n.type === types_1.SCNotificationTypologyType.USER_ACCEPTED_TO_JOIN_COURSE ||
+            n.type === types_1.SCNotificationTypologyType.USER_REQUESTED_TO_JOIN_COURSE) {
+            return (0, jsx_runtime_1.jsx)(Course_1.default, { notificationObject: n }, i);
+        }
         else if (n.type === types_1.SCNotificationTypologyType.LIVE_STREAM_STARTED) {
             return (0, jsx_runtime_1.jsx)(LiveStream_1.default, { notificationObject: n }, i);
         }

package/lib/cjs/components/SnippetNotifications/SnippetNotifications.js

@@ -37,6 +37,7 @@ const constants_1 = require("./constants");
 const Group_1 = tslib_1.__importDefault(require("../Notification/Group"));
 const Event_1 = tslib_1.__importDefault(require("../Notification/Event/Event"));
 const LiveStream_1 = tslib_1.__importDefault(require("../Notification/LiveStream"));
+const Course_1 = tslib_1.__importDefault(require("../Notification/Course"));
 const classes = {
     root: `${constants_1.PREFIX}-root`,
     notificationsWrap: `${constants_1.PREFIX}-notifications-wrap`,
@@ -270,6 +271,13 @@ function SnippetNotifications(inProps) {
             n.type === types_2.SCNotificationTypologyType.USER_REQUESTED_TO_JOIN_EVENT) {
             return (0, jsx_runtime_1.jsx)(Event_1.default, { notificationObject: n, template: types_1.SCNotificationObjectTemplateType.SNIPPET }, i);
         }
+        else if (n.type === types_2.SCNotificationTypologyType.USER_ADDED_TO_COURSE ||
+            n.type === types_2.SCNotificationTypologyType.USER_COMMENTED_A_COURSE_LESSON ||
+            n.type === types_2.SCNotificationTypologyType.USER_INVITED_TO_JOIN_COURSE ||
+            n.type === types_2.SCNotificationTypologyType.USER_ACCEPTED_TO_JOIN_COURSE ||
+            n.type === types_2.SCNotificationTypologyType.USER_REQUESTED_TO_JOIN_COURSE) {
+            return (0, jsx_runtime_1.jsx)(Course_1.default, { notificationObject: n, template: types_1.SCNotificationObjectTemplateType.SNIPPET }, i);
+        }
         else if (type === types_2.SCNotificationTypologyType.LIVE_STREAM_STARTED) {
             content = (0, jsx_runtime_1.jsx)(LiveStream_1.default, { notificationObject: n, template: types_1.SCNotificationObjectTemplateType.SNIPPET }, i);
         }

package/lib/cjs/components/ToastNotifications/ToastNotifications.js

@@ -28,6 +28,7 @@ const Contribution_1 = tslib_1.__importDefault(require("../Notification/Contribu
 const Group_1 = tslib_1.__importDefault(require("../Notification/Group"));
 const Event_1 = tslib_1.__importDefault(require("../Notification/Event/Event"));
 const LiveStream_1 = tslib_1.__importDefault(require("../Notification/LiveStream"));
+const Course_1 = tslib_1.__importDefault(require("../Notification/Course"));
 const Root = (0, styles_1.styled)(material_1.Box, {
     name: constants_1.PREFIX,
     slot: 'Root'
@@ -127,6 +128,13 @@ function UserToastNotifications(inProps) {
                 type === types_1.SCNotificationTypologyType.USER_REQUESTED_TO_JOIN_EVENT) {
                 content = (0, jsx_runtime_1.jsx)(Event_1.default, { notificationObject: n.notification_obj, template: types_2.SCNotificationObjectTemplateType.TOAST });
             }
+            else if (type === types_1.SCNotificationTypologyType.USER_ADDED_TO_COURSE ||
+                n.type === types_1.SCNotificationTypologyType.USER_COMMENTED_A_COURSE_LESSON ||
+                type === types_1.SCNotificationTypologyType.USER_INVITED_TO_JOIN_COURSE ||
+                type === types_1.SCNotificationTypologyType.USER_ACCEPTED_TO_JOIN_COURSE ||
+                type === types_1.SCNotificationTypologyType.USER_REQUESTED_TO_JOIN_COURSE) {
+                content = (0, jsx_runtime_1.jsx)(Course_1.default, { notificationObject: n.notification_obj, template: types_2.SCNotificationObjectTemplateType.TOAST });
+            }
             else if (type === types_1.SCNotificationTypologyType.LIVE_STREAM_STARTED) {
                 content = (0, jsx_runtime_1.jsx)(LiveStream_1.default, { notificationObject: n.notification_obj, template: types_2.SCNotificationObjectTemplateType.TOAST });
             }

package/lib/cjs/constants/PubSub.d.ts

@@ -29,7 +29,9 @@ export declare enum SCCourseEventType {
     EDIT = "edit",
     DELETE = "delete",
     ADD_MEMBER = "members.add_member",
-    INVITE_MEMBER = "members.invite_member"
+    INVITE_MEMBER = "members.invite_member",
+    REMOVE_MEMBER = "members.remove_member",
+    REJECT_MEMBER = "members.reject_member"
 }
 /**
  * Category event types

package/lib/cjs/constants/PubSub.js

@@ -35,6 +35,8 @@ var SCCourseEventType;
     SCCourseEventType["DELETE"] = "delete";
     SCCourseEventType["ADD_MEMBER"] = "members.add_member";
     SCCourseEventType["INVITE_MEMBER"] = "members.invite_member";
+    SCCourseEventType["REMOVE_MEMBER"] = "members.remove_member";
+    SCCourseEventType["REJECT_MEMBER"] = "members.reject_member";
 })(SCCourseEventType = exports.SCCourseEventType || (exports.SCCourseEventType = {}));
 /**
  * Category event types

package/lib/cjs/shared/CourseUsersTable/CourseUsersTable.js

@@ -20,6 +20,9 @@ const ChangeUsersStatus_1 = tslib_1.__importDefault(require("./ChangeUsersStatus
 const react_core_1 = require("@selfcommunity/react-core");
 const RequestButton_1 = tslib_1.__importDefault(require("./RequestButton"));
 const course_1 = require("../../types/course");
+const RemoveButton_1 = tslib_1.__importDefault(require("./RemoveButton"));
+const ConfirmDialog_1 = tslib_1.__importDefault(require("../ConfirmDialog/ConfirmDialog"));
+const course_2 = require("../../types/course");
 const classes = {
     root: `${constants_1.PREFIX}-root`,
     search: `${constants_1.PREFIX}-search`,
@@ -34,7 +37,7 @@ const Root = (0, material_1.styled)(material_1.Box, {
     overridesResolver: (_props, styles) => styles.root
 })(() => ({}));
 function filteredUsers(users, value) {
-    return users.filter((user) => (user.username || user.real_name).includes(value));
+    return users.filter((user) => (user.username || user.real_name).toLowerCase().includes(value.toLowerCase()));
 }
 function CourseUsersTable(inProps) {
     // PROPS
@@ -47,6 +50,9 @@ function CourseUsersTable(inProps) {
     const [users, setUsers] = (0, react_1.useState)(null);
     const [tempUsers, setTempUsers] = (0, react_1.useState)(null);
     const [value, setValue] = (0, react_1.useState)('');
+    const [dialog, setDialog] = (0, react_1.useState)(null);
+    // REFS
+    const ref = (0, react_1.useRef)(null);
     // CONTEXTS
     const scUserContext = (0, react_core_1.useSCUser)();
     // HOOKS
@@ -88,6 +94,19 @@ function CourseUsersTable(inProps) {
             utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
         });
     }, [state.next, dispatch]);
+    const handleOpenDialog = (0, react_1.useCallback)((tab) => {
+        setDialog(tab);
+    }, [setDialog]);
+    const handleConfirm = (0, react_1.useCallback)(() => {
+        switch (dialog.tab) {
+            case course_2.SCCourseEditTabType.USERS:
+                ref.current.handleManageUser(dialog.user);
+                break;
+            case course_2.SCCourseEditTabType.REQUESTS:
+                ref.current.handleManageUser(dialog.request);
+        }
+        handleOpenDialog(null);
+    }, [dialog, handleOpenDialog]);
     if (!users) {
         return (0, jsx_runtime_1.jsx)(Skeleton_1.default, {});
     }
@@ -97,11 +116,13 @@ function CourseUsersTable(inProps) {
                 }), InputProps: {
                     startAdornment: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "start" }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "search" }) })))
                 }, value: value, onChange: handleChange, disabled: users.length === 0 && value.length === 0, fullWidth: true, className: classes.search }), (0, jsx_runtime_1.jsx)(material_1.TableContainer, { children: (0, jsx_runtime_1.jsxs)(material_1.Table, { children: [(0, jsx_runtime_1.jsx)(material_1.TableHead, { children: (0, jsx_runtime_1.jsx)(material_1.TableRow, { children: headerCells.map((cell, i, array) => {
-                                    if (mode !== course_1.SCCourseUsersTableModeType.EDIT && i === array.length - 1) {
+                                    if (i === array.length - 1) {
                                         return (0, jsx_runtime_1.jsx)(material_1.TableCell, { width: "14%" }, i);
                                     }
                                     return ((0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ width: mode === course_1.SCCourseUsersTableModeType.DASHBOARD ? '20%' : '25%' }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: cell.id, defaultMessage: cell.id }) })) }), i));
                                 }) }) }), (0, jsx_runtime_1.jsxs)(material_1.TableBody, { children: [users.length > 0 &&
-                                    users.map((user, i) => ((0, jsx_runtime_1.jsxs)(material_1.TableRow, { children: [(0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.avatarWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: user.username, src: user.avatar }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: user.username }))] })) }), mode === course_1.SCCourseUsersTableModeType.DASHBOARD && ((0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.progressWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.LinearProgress, { className: classes.progress, variant: "determinate", value: user.user_completion_rate }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: `${Math.round(user.user_completion_rate)}%` }))] })) })), mode === course_1.SCCourseUsersTableModeType.EDIT && ((0, jsx_runtime_1.jsx)(material_1.TableCell, { children: user.join_status !== types_1.SCCourseJoinStatusType.CREATOR && scUserContext.user.id !== user.id ? ((0, jsx_runtime_1.jsx)(ChangeUsersStatus_1.default, { course: course, user: user })) : ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.editCourse.tab.users.table.select.${user.join_status}`, defaultMessage: `ui.editCourse.tab.users.table.select.${user.join_status}` }) }))) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: new Date(mode === course_1.SCCourseUsersTableModeType.REQUESTS ? user.date_joined : user.joined_at || new Date()).toLocaleDateString() })) }), (0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: new Date(mode === course_1.SCCourseUsersTableModeType.REQUESTS ? user.date_joined : user.last_active_at || new Date()).toLocaleDateString() })) }), mode === course_1.SCCourseUsersTableModeType.DASHBOARD && ((0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsx)(SeeProgressButton_1.default, { course: course, user: user }) })), mode === course_1.SCCourseUsersTableModeType.REQUESTS && ((0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsx)(RequestButton_1.default, { course: course, user: user }) }))] }, i))), state.isLoadingNext && (0, jsx_runtime_1.jsx)(RowSkeleton_1.default, { editMode: mode !== course_1.SCCourseUsersTableModeType.DASHBOARD })] })] }) }), users.length > 0 && ((0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ size: "small", variant: "outlined", color: "inherit", loading: state.isLoadingNext, disabled: !state.next, className: classes.loadingButton, onClick: handleNext }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courseUsersTable.btn.label", defaultMessage: "ui.courseUsersTable.btn.label" }) })) }))), users.length === 0 && value.length === 0 && (0, jsx_runtime_1.jsx)(EmptyStatus_1.default, { icon: "face", title: emptyStatusTitle, description: emptyStatusDescription })] })));
+                                    users.map((user, i) => ((0, jsx_runtime_1.jsxs)(material_1.TableRow, { children: [(0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.avatarWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: user.username, src: user.avatar }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: user.username }))] })) }), mode === course_1.SCCourseUsersTableModeType.DASHBOARD && ((0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.progressWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.LinearProgress, { className: classes.progress, variant: "determinate", value: user.user_completion_rate }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: `${Math.round(user.user_completion_rate)}%` }))] })) })), mode === course_1.SCCourseUsersTableModeType.EDIT && ((0, jsx_runtime_1.jsx)(material_1.TableCell, { children: user.join_status !== types_1.SCCourseJoinStatusType.CREATOR && scUserContext.user.id !== user.id ? ((0, jsx_runtime_1.jsx)(ChangeUsersStatus_1.default, { course: course, user: user })) : ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.editCourse.tab.users.table.select.${user.join_status}`, defaultMessage: `ui.editCourse.tab.users.table.select.${user.join_status}` }) }))) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: new Date(mode === course_1.SCCourseUsersTableModeType.REQUESTS ? user.date_joined : user.joined_at || new Date()).toLocaleDateString() })) }), (0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: new Date(mode === course_1.SCCourseUsersTableModeType.REQUESTS ? user.date_joined : user.last_active_at || new Date()).toLocaleDateString() })) }), mode === course_1.SCCourseUsersTableModeType.EDIT &&
+                                                user.join_status !== types_1.SCCourseJoinStatusType.CREATOR &&
+                                                scUserContext.user.id !== user.id ? ((0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsx)(RemoveButton_1.default, { ref: ref, course: course, user: user, handleOpenDialog: handleOpenDialog }) })) : (mode === course_1.SCCourseUsersTableModeType.EDIT && (0, jsx_runtime_1.jsx)(material_1.TableCell, {})), mode === course_1.SCCourseUsersTableModeType.DASHBOARD && ((0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsx)(SeeProgressButton_1.default, { course: course, user: user }) })), mode === course_1.SCCourseUsersTableModeType.REQUESTS && ((0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsx)(RequestButton_1.default, { ref: ref, course: course, user: user, handleOpenDialog: handleOpenDialog }) }))] }, i))), state.isLoadingNext && (0, jsx_runtime_1.jsx)(RowSkeleton_1.default, { editMode: mode !== course_1.SCCourseUsersTableModeType.DASHBOARD })] })] }) }), users.length > 0 && ((0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ size: "small", variant: "outlined", color: "inherit", loading: state.isLoadingNext, disabled: !state.next, className: classes.loadingButton, onClick: handleNext }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courseUsersTable.btn.label", defaultMessage: "ui.courseUsersTable.btn.label" }) })) }))), users.length === 0 && value.length === 0 && (0, jsx_runtime_1.jsx)(EmptyStatus_1.default, { icon: "face", title: emptyStatusTitle, description: emptyStatusDescription }), dialog && (0, jsx_runtime_1.jsx)(ConfirmDialog_1.default, { open: true, onClose: () => handleOpenDialog(null), onConfirm: handleConfirm })] })));
 }
 exports.default = (0, react_1.memo)(CourseUsersTable);

package/lib/cjs/shared/CourseUsersTable/RemoveButton.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { SCCourseType, SCUserType } from '@selfcommunity/types';
+import { SCCourseEditManageUserProps, SCCourseEditManageUserRef } from '../../types/course';
+interface RemoveButtonProps {
+    course: SCCourseType;
+    user: SCUserType;
+    handleOpenDialog: (tab: SCCourseEditManageUserProps) => void;
+}
+declare const _default: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<RemoveButtonProps & import("react").RefAttributes<SCCourseEditManageUserRef>>>;
+export default _default;

package/lib/cjs/shared/CourseUsersTable/RemoveButton.js

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const lab_1 = require("@mui/lab");
+const material_1 = require("@mui/material");
+const api_services_1 = require("@selfcommunity/api-services");
+const react_1 = require("react");
+const Errors_1 = require("../../constants/Errors");
+const utils_1 = require("@selfcommunity/utils");
+const react_intl_1 = require("react-intl");
+const notistack_1 = require("notistack");
+const pubsub_js_1 = tslib_1.__importDefault(require("pubsub-js"));
+const PubSub_1 = require("../../constants/PubSub");
+const course_1 = require("../../types/course");
+function RemoveButton(props, ref) {
+    // PROPS
+    const { course, user, handleOpenDialog } = props;
+    // STATES
+    const [loading, setLoading] = (0, react_1.useState)(false);
+    // HOOKS
+    const { enqueueSnackbar } = (0, notistack_1.useSnackbar)();
+    // HANDLERS
+    const handleSubmit = (0, react_1.useCallback)((userToRemove) => {
+        setLoading(true);
+        const params = {
+            user: userToRemove.id
+        };
+        api_services_1.CourseService.leaveOrRemoveCourseRequest(course.id, params)
+            .then(() => {
+            setLoading(false);
+            pubsub_js_1.default.publish(`${PubSub_1.SCTopicType.COURSE}.${PubSub_1.SCCourseEventType.REMOVE_MEMBER}`, userToRemove);
+            enqueueSnackbar((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.editCourse.tab.users.table.snackbar.removed", defaultMessage: "ui.editCourse.tab.users.table.snackbar.removed" }), {
+                variant: 'success',
+                autoHideDuration: 3000
+            });
+        })
+            .catch((error) => {
+            utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
+            enqueueSnackbar((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.common.error.action", defaultMessage: "ui.common.error.action" }), {
+                variant: 'error',
+                autoHideDuration: 3000
+            });
+        });
+    }, [course, setLoading]);
+    (0, react_1.useImperativeHandle)(ref, () => ({
+        handleManageUser: (userToRemove) => handleSubmit(userToRemove)
+    }), [handleSubmit]);
+    return ((0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ size: "small", color: "inherit", variant: "outlined", onClick: () => handleOpenDialog({ tab: course_1.SCCourseEditTabType.USERS, user }), loading: loading, disabled: loading }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) })));
+}
+exports.default = (0, react_1.memo)((0, react_1.forwardRef)(RemoveButton));

package/lib/cjs/shared/CourseUsersTable/RequestButton.d.ts

@@ -1,9 +1,10 @@
 /// <reference types="react" />
 import { SCCourseType, SCUserType } from '@selfcommunity/types';
+import { SCCourseEditManageUserProps, SCCourseEditManageUserRef } from '../../types/course';
 interface RequestButtonProps {
     course: SCCourseType;
     user: SCUserType;
+    handleOpenDialog: (tab: SCCourseEditManageUserProps) => void;
 }
-declare function RequestButton(props: RequestButtonProps): JSX.Element;
-declare const _default: import("react").MemoExoticComponent<typeof RequestButton>;
+declare const _default: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<RequestButtonProps & import("react").RefAttributes<SCCourseEditManageUserRef>>>;
 export default _default;

package/lib/cjs/shared/CourseUsersTable/RequestButton.js

@@ -13,12 +13,13 @@ const notistack_1 = require("notistack");
 const constants_1 = require("./constants");
 const pubsub_js_1 = tslib_1.__importDefault(require("pubsub-js"));
 const PubSub_1 = require("../../constants/PubSub");
+const course_1 = require("../../types/course");
 const classes = {
     requestButtonWrapper: `${constants_1.PREFIX}-request-button-wrapper`
 };
-function RequestButton(props) {
+function RequestButton(props, ref) {
     // PROPS
-    const { course, user } = props;
+    const { course, user, handleOpenDialog } = props;
     // STATES
     const [acceptLoading, setAcceptLoading] = (0, react_1.useState)(false);
     const [rejectLoading, setRejectLoading] = (0, react_1.useState)(false);
@@ -33,8 +34,8 @@ function RequestButton(props) {
         api_services_1.CourseService.inviteOrAcceptUsersToCourse(course.id, data)
             .then(() => {
             setAcceptLoading(false);
-            pubsub_js_1.default.publish(`${PubSub_1.SCTopicType.COURSE}.${PubSub_1.SCGroupEventType.ADD_MEMBER}`, user);
-            pubsub_js_1.default.publish(`${PubSub_1.SCTopicType.COURSE}.${PubSub_1.SCGroupEventType.REMOVE_MEMBER}`, user);
+            pubsub_js_1.default.publish(`${PubSub_1.SCTopicType.COURSE}.${PubSub_1.SCCourseEventType.ADD_MEMBER}`, user);
+            pubsub_js_1.default.publish(`${PubSub_1.SCTopicType.COURSE}.${PubSub_1.SCCourseEventType.REJECT_MEMBER}`, user);
             enqueueSnackbar((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.editCourse.tab.requests.table.snackbar.accepted", defaultMessage: "ui.editCourse.tab.requests.table.snackbar.accepted" }), {
                 variant: 'success',
                 autoHideDuration: 3000
@@ -48,15 +49,15 @@ function RequestButton(props) {
             });
         });
     }, [course, user, setAcceptLoading]);
-    const handleReject = (0, react_1.useCallback)(() => {
+    const handleReject = (0, react_1.useCallback)((userToReject) => {
         setRejectLoading(true);
         const params = {
-            user: user.id
+            user: userToReject.id
         };
         api_services_1.CourseService.leaveOrRemoveCourseRequest(course.id, params)
             .then(() => {
             setRejectLoading(false);
-            pubsub_js_1.default.publish(`${PubSub_1.SCTopicType.COURSE}.${PubSub_1.SCGroupEventType.REMOVE_MEMBER}`, user);
+            pubsub_js_1.default.publish(`${PubSub_1.SCTopicType.COURSE}.${PubSub_1.SCCourseEventType.REJECT_MEMBER}`, userToReject);
             enqueueSnackbar((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.editCourse.tab.requests.table.snackbar.rejected", defaultMessage: "ui.editCourse.tab.requests.table.snackbar.rejected" }), {
                 variant: 'success',
                 autoHideDuration: 3000
@@ -69,7 +70,10 @@ function RequestButton(props) {
                 autoHideDuration: 3000
             });
         });
-    }, [course, user, setRejectLoading]);
-    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.requestButtonWrapper }, { children: [(0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ size: "small", color: "primary", variant: "outlined", onClick: handleAccept, loading: acceptLoading, disabled: acceptLoading }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "check" }) })), (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ size: "small", color: "inherit", variant: "outlined", onClick: handleReject, loading: rejectLoading, disabled: rejectLoading }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) }))] })));
+    }, [course, setRejectLoading]);
+    (0, react_1.useImperativeHandle)(ref, () => ({
+        handleManageUser: (userToReject) => handleReject(userToReject)
+    }), [handleReject]);
+    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.requestButtonWrapper }, { children: [(0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ size: "small", color: "primary", variant: "outlined", onClick: handleAccept, loading: acceptLoading, disabled: acceptLoading }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "check" }) })), (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ size: "small", color: "inherit", variant: "outlined", onClick: () => handleOpenDialog({ tab: course_1.SCCourseEditTabType.REQUESTS, request: user }), loading: rejectLoading, disabled: rejectLoading }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) }))] })));
 }
-exports.default = (0, react_1.memo)(RequestButton);
+exports.default = (0, react_1.memo)((0, react_1.forwardRef)(RequestButton));

package/lib/cjs/types/course.d.ts

@@ -1,3 +1,4 @@
+import { SCUserType } from '@selfcommunity/types';
 export declare enum SCCourseTemplateType {
     SNIPPET = "snippet",
     PREVIEW = "preview"
@@ -23,3 +24,11 @@ export declare enum SCCourseUsersTableModeType {
     EDIT = "edit",
     REQUESTS = "requests"
 }
+export interface SCCourseEditManageUserProps {
+    tab: SCCourseEditTabType;
+    user?: SCUserType;
+    request?: SCUserType;
+}
+export interface SCCourseEditManageUserRef {
+    handleManageUser: (user: SCUserType) => void;
+}

package/lib/esm/components/CourseForm/CourseForm.js

@@ -1,5 +1,5 @@
 import { __rest } from "tslib";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { LoadingButton } from '@mui/lab';
 import { Box, CardActionArea, Card, CardContent, FormGroup, Paper, TextField, Typography, Chip } from '@mui/material';
 import { styled } from '@mui/material/styles';
@@ -252,11 +252,11 @@ export default function CourseForm(inProps) {
     /**
      * Renders root object
      */
-    return (_jsxs(Fragment, { children: [_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: _jsxs(Box, Object.assign({ className: _step === SCCourseFormStepType.GENERAL ? classes.stepOne : classes.stepTwo }, { children: [_step === SCCourseFormStepType.GENERAL && (_jsx(_Fragment, { children: Object.values(SCCourseTypologyType).map((option, index) => (_jsx(Card, Object.assign({ className: classNames(classes.card, { [classes.selected]: option === field.type }, { [classes.disabled]: !courseAdvancedEnabled && option !== SCCourseTypologyType.SELF }) }, { children: _jsx(CardActionArea, Object.assign({ onClick: () => setField((prev) => (Object.assign(Object.assign({}, prev), { ['type']: option }))) }, { children: _jsxs(CardContent, { children: [_jsxs(Typography, Object.assign({ variant: "subtitle2", className: classes.cardTitle }, { children: [_jsx(FormattedMessage, { id: `ui.courseForm.${option}.title`, defaultMessage: `ui.courseForm.${option}.title` }), !courseAdvancedEnabled && option !== SCCourseTypologyType.SELF && (_jsx(Chip, { variant: "outlined", color: "warning", size: "small", label: _jsx(FormattedMessage, { id: "ui.courseForm.comingSoon.chip", defaultMessage: "ui.courseForm.comingSoon.chip" }) }))] })), _jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedMessage, { id: `ui.courseForm.${option}.info`, defaultMessage: `ui.courseForm.${option}.info` }) }))] }) })) }), index))) })), _step === SCCourseFormStepType.CUSTOMIZATION && (_jsxs(Fragment, { children: [course && (_jsx(Typography, Object.assign({ variant: "h5", className: classes.contrastColor }, { children: _jsx(FormattedMessage, { id: "ui.courseForm.edit.title.general", defaultMessage: "ui.courseForm.edit.title.general" }) }))), _jsxs(FormGroup, Object.assign({ className: classNames(classes.form, _step === SCCourseFormStepType.CUSTOMIZATION ? classes.stepCustomization : undefined) }, { children: [_jsx(Paper, Object.assign({ style: _backgroundCover, classes: { root: classes.cover } }, { children: _jsx(UploadCourseCover, { isUploading: field.isSubmitting, onChange: handleChangeCover }) })), _jsx(TextField, { required: true, className: classes.name, placeholder: `${intl.formatMessage(messages.name)}`, margin: "normal", value: field.name, name: "name", onChange: handleChange, InputProps: {
+    return (_jsxs(Fragment, { children: [_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: _jsxs(Box, Object.assign({ className: _step === SCCourseFormStepType.GENERAL ? classes.stepOne : classes.stepTwo }, { children: [_step === SCCourseFormStepType.GENERAL && (_jsx(Fragment, { children: Object.values(SCCourseTypologyType).map((option, index) => (_jsx(Card, Object.assign({ className: classNames(classes.card, { [classes.selected]: option === field.type }, { [classes.disabled]: !courseAdvancedEnabled && option !== SCCourseTypologyType.SELF }) }, { children: _jsx(CardActionArea, Object.assign({ onClick: () => setField((prev) => (Object.assign(Object.assign({}, prev), { ['type']: option }))) }, { children: _jsxs(CardContent, { children: [_jsxs(Typography, Object.assign({ variant: "subtitle2", className: classes.cardTitle }, { children: [_jsx(FormattedMessage, { id: `ui.courseForm.${option}.title`, defaultMessage: `ui.courseForm.${option}.title` }), !courseAdvancedEnabled && option !== SCCourseTypologyType.SELF && (_jsx(Chip, { variant: "outlined", color: "warning", size: "small", label: _jsx(FormattedMessage, { id: "ui.courseForm.comingSoon.chip", defaultMessage: "ui.courseForm.comingSoon.chip" }) }))] })), _jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedMessage, { id: `ui.courseForm.${option}.info`, defaultMessage: `ui.courseForm.${option}.info` }) }))] }) })) }), index))) })), _step === SCCourseFormStepType.CUSTOMIZATION && (_jsxs(Fragment, { children: [course && (_jsx(Typography, Object.assign({ variant: "h5", className: classes.contrastColor }, { children: _jsx(FormattedMessage, { id: "ui.courseForm.edit.title.general", defaultMessage: "ui.courseForm.edit.title.general" }) }))), _jsxs(FormGroup, Object.assign({ className: classNames(classes.form, _step === SCCourseFormStepType.CUSTOMIZATION && course ? classes.stepCustomization : undefined) }, { children: [_jsx(Paper, Object.assign({ style: _backgroundCover, classes: { root: classes.cover } }, { children: _jsx(UploadCourseCover, { isUploading: field.isSubmitting, onChange: handleChangeCover }) })), _jsx(TextField, { required: true, className: classes.name, placeholder: `${intl.formatMessage(messages.name)}`, margin: "normal", value: field.name, name: "name", onChange: handleChange, InputProps: {
                                                 endAdornment: _jsx(Typography, Object.assign({ variant: "body2" }, { children: COURSE_TITLE_MAX_LENGTH - field.name.length }))
                                             }, error: Boolean(field.name.length > COURSE_TITLE_MAX_LENGTH) || Boolean(error['nameError']), helperText: field.name.length > COURSE_TITLE_MAX_LENGTH ? (_jsx(FormattedMessage, { id: "ui.courseForm.name.error.maxLength", defaultMessage: "ui.courseForm.name.error.maxLength" })) : error['nameError'] ? (error['nameError']) : null }), _jsx(TextField, { multiline: true, className: classes.description, placeholder: `${intl.formatMessage(messages.description)}`, margin: "normal", value: field.description, name: "description", onChange: handleChange, InputProps: {
                                                 endAdornment: (_jsx(Typography, Object.assign({ variant: "body2" }, { children: ((_a = field.description) === null || _a === void 0 ? void 0 : _a.length) ? COURSE_DESCRIPTION_MAX_LENGTH - field.description.length : COURSE_DESCRIPTION_MAX_LENGTH })))
-                                            }, error: Boolean(((_b = field.description) === null || _b === void 0 ? void 0 : _b.length) > COURSE_DESCRIPTION_MAX_LENGTH), helperText: ((_c = field.description) === null || _c === void 0 ? void 0 : _c.length) > COURSE_DESCRIPTION_MAX_LENGTH ? (_jsx(FormattedMessage, { id: "ui.courseForm.description.error.maxLength", defaultMessage: "ui.courseForm.description.error.maxLength" })) : null }), _jsx(CategoryAutocomplete, { defaultValue: field.categories, TextFieldProps: { label: intl.formatMessage(Object.keys(field.categories).length ? messages.category : messages.categoryEmpty) }, multiple: true, onChange: handleOnChangeCategory }), course && _jsx(CourseEdit, { course: course, onPrivacyChange: (privacy) => setField((prev) => (Object.assign(Object.assign({}, prev), { ['privacy']: privacy }))) })] }))] })), _jsx(Box, Object.assign({ className: classNames(classes.actions, _step === SCCourseFormStepType.CUSTOMIZATION ? classes.stepCustomization : undefined) }, { children: _jsx(LoadingButton, Object.assign({ size: "small", loading: field.isSubmitting, disabled: _step === SCCourseFormStepType.GENERAL
+                                            }, error: Boolean(((_b = field.description) === null || _b === void 0 ? void 0 : _b.length) > COURSE_DESCRIPTION_MAX_LENGTH), helperText: ((_c = field.description) === null || _c === void 0 ? void 0 : _c.length) > COURSE_DESCRIPTION_MAX_LENGTH ? (_jsx(FormattedMessage, { id: "ui.courseForm.description.error.maxLength", defaultMessage: "ui.courseForm.description.error.maxLength" })) : null }), _jsx(CategoryAutocomplete, { defaultValue: field.categories, TextFieldProps: { label: intl.formatMessage(Object.keys(field.categories).length ? messages.category : messages.categoryEmpty) }, multiple: true, onChange: handleOnChangeCategory }), course && _jsx(CourseEdit, { course: course, onPrivacyChange: (privacy) => setField((prev) => (Object.assign(Object.assign({}, prev), { ['privacy']: privacy }))) })] }))] })), _jsx(Box, Object.assign({ className: classNames(classes.actions, _step === SCCourseFormStepType.CUSTOMIZATION && course ? classes.stepCustomization : undefined) }, { children: _jsx(LoadingButton, Object.assign({ size: "small", loading: field.isSubmitting, disabled: _step === SCCourseFormStepType.GENERAL
                                     ? !field.type || Object.keys(error).length !== 0
                                     : _step === SCCourseFormStepType.CUSTOMIZATION &&
                                         (!field.name ||