@selfcommunity/react-ui 0.10.2-courses.172 → 0.10.2-courses.174

package/lib/esm/components/EditCourse/Lessons/SectionRow.js

@@ -57,6 +57,9 @@ function SectionRow(props) {
         };
     }, []);
     // HANDLERS
+    const handleOpenDialog = useCallback(() => {
+        setOpen((prev) => !prev);
+    }, [setOpen]);
     const handleExpandAccordion = useCallback(() => setExpand((prev) => !prev), [setExpand]);
     const handleDragEnd = useCallback((e) => {
         if (!e.destination || e.destination.index === e.source.index) {
@@ -87,7 +90,7 @@ function SectionRow(props) {
     }, [course, section, handleManageSection]);
     const handleAddTempLesson = useCallback(() => {
         setLessons((prevLessons) => ((prevLessons === null || prevLessons === void 0 ? void 0 : prevLessons.length) > 0 ? [...prevLessons, getLesson(prevLessons.length + 1)] : [getLesson(1)]));
-    }, [setLessons]);
+    }, [setLessons, getLesson]);
     const handleAbleEditMode = useCallback(() => setTimeout(() => setEditMode(true)), [setEditMode]);
     const handleDisableEditMode = useCallback(() => setEditMode(false), [setEditMode]);
     const handleDeleteSection = useCallback(() => {
@@ -96,6 +99,7 @@ function SectionRow(props) {
             var _a;
             const tempSection = Object.assign(Object.assign({}, section), { num_lessons: ((_a = section.lessons) === null || _a === void 0 ? void 0 : _a.length) || 0 });
             handleManageSection(tempSection, ActionLessonType.DELETE);
+            handleOpenDialog();
             enqueueSnackbar(_jsx(FormattedMessage, { id: "ui.editCourse.tab.lessons.table.snackbar.delete", defaultMessage: "ui.editCourse.tab.lessons.table.snackbar.delete" }), {
                 variant: 'success',
                 autoHideDuration: 3000
@@ -108,7 +112,7 @@ function SectionRow(props) {
                 autoHideDuration: 3000
             });
         });
-    }, [course, section, handleManageSection]);
+    }, [course, section, handleManageSection, handleOpenDialog]);
     const handleManageLesson = useCallback((lesson, type, newRow) => {
         switch (type) {
             case ActionLessonType.ADD: {
@@ -132,14 +136,11 @@ function SectionRow(props) {
             }
         }
     }, [section, handleManageSection]);
-    const handleOpenDialog = useCallback(() => {
-        setOpen((prev) => !prev);
-    }, [setOpen]);
     return (_jsxs(Fragment, { children: [_jsxs(TableRow, Object.assign({}, provider.draggableProps, { ref: provider.innerRef, className: classes.tableBodyAccordion }, { children: [_jsx(TableCell, Object.assign({ component: "th", scope: "row" }, provider.dragHandleProps, { className: classNames(classes.cellWidth, classes.cellPadding) }, { children: _jsxs(Stack, Object.assign({ className: classes.tableBodyIconWrapper }, { children: [_jsx(IconButton, Object.assign({ "aria-label": "expand row", size: "small", onClick: handleExpandAccordion }, { children: expand ? _jsx(Icon, { children: "expand_less" }) : _jsx(Icon, { children: "expand_more" }) })), _jsx(Icon, Object.assign({ color: "disabled" }, { children: "drag" }))] })) })), _jsx(TableCell, { children: _jsx(FieldName, { endpoint: {
                                 url: () => isNewRow
                                     ? Endpoints.CreateCourseSection.url({ id: course.id })
                                     : Endpoints.PatchCourseSection.url({ id: course.id, section_id: section.id }),
                                 method: isNewRow ? Endpoints.CreateCourseSection.method : Endpoints.PatchCourseSection.method
-                            }, row: section, isNewRow: isNewRow, handleManageRow: handleManageSection, editMode: editMode, handleDisableEditMode: handleDisableEditMode }) }), _jsx(TableCell, Object.assign({ className: classes.cellAlignCenter }, { children: isDisabled ? (_jsx(Skeleton, { animation: false, variant: "rectangular", width: "250px", height: "53px", sx: { margin: 'auto', borderRadius: '5px' } })) : (_jsx(LessonReleaseMenu, { course: course, section: section })) })), _jsx(TableCell, Object.assign({ className: classes.cellAlignRight }, { children: _jsxs(Stack, Object.assign({ className: classes.actionsWrapper }, { children: [_jsx(AddButton, { label: "ui.editCourse.tab.lessons.table.lesson", handleAddRow: handleAddTempLesson, color: "primary", variant: "outlined", disabled: isDisabled }), _jsxs(MenuRow, Object.assign({ disabled: isDisabled }, { children: [_jsx(MenuItem, Object.assign({ onClick: handleAbleEditMode }, { children: _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.editCourse.tab.lessons.table.menu.rename", defaultMessage: "ui.editCourse.tab.lessons.table.menu.rename" }) })) })), _jsx(MenuItem, Object.assign({ onClick: handleOpenDialog }, { children: _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.editCourse.tab.lessons.table.menu.delete", defaultMessage: "ui.editCourse.tab.lessons.table.menu.delete" }) })) }))] }))] })) }))] })), _jsx(TableRow, { children: _jsxs(TableCell, Object.assign({ className: classes.tableBodyCollapseWrapper, colSpan: 4 }, { children: [_jsx(Collapse, Object.assign({ in: expand, timeout: "auto", unmountOnExit: true }, { children: _jsx(DragDropContext, Object.assign({ onDragEnd: handleDragEnd }, { children: _jsx(Table, { children: _jsx(Droppable, Object.assign({ droppableId: "droppable-2" }, { children: (outerProvider) => (_jsxs(TableBody, Object.assign({ ref: outerProvider.innerRef }, outerProvider.droppableProps, { children: [lessons.map((lesson, i, array) => (_jsx(Draggable, Object.assign({ draggableId: i.toString(), index: i, isDragDisabled: isDisabled }, { children: (innerProvider) => (_jsx(LessonRow, { provider: innerProvider, course: course, section: section, lesson: lesson, isNewRow: isNewLocalRow && i + 1 === array.length, handleManageLesson: handleManageLesson }, i)) }), i))), outerProvider.placeholder] }))) })) }) })) })), open && _jsx(ConfirmDialog, { open: true, onClose: handleOpenDialog, onConfirm: handleDeleteSection })] })) })] }));
+                            }, row: section, isNewRow: isNewRow, handleManageRow: handleManageSection, editMode: editMode, handleDisableEditMode: handleDisableEditMode }) }), _jsx(TableCell, Object.assign({ className: classes.cellAlignCenter }, { children: isDisabled ? (_jsx(Skeleton, { animation: false, variant: "rectangular", width: "250px", height: "38px", sx: { margin: 'auto', borderRadius: '5px' } })) : (_jsx(LessonReleaseMenu, { course: course, section: section })) })), _jsx(TableCell, Object.assign({ className: classes.cellAlignRight }, { children: _jsxs(Stack, Object.assign({ className: classes.actionsWrapper }, { children: [_jsx(AddButton, { label: "ui.editCourse.tab.lessons.table.lesson", handleAddRow: handleAddTempLesson, color: "primary", variant: "outlined", disabled: isDisabled }), _jsxs(MenuRow, Object.assign({ disabled: isDisabled }, { children: [_jsx(MenuItem, Object.assign({ onClick: handleAbleEditMode }, { children: _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.editCourse.tab.lessons.table.menu.rename", defaultMessage: "ui.editCourse.tab.lessons.table.menu.rename" }) })) })), _jsx(MenuItem, Object.assign({ onClick: handleOpenDialog }, { children: _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.editCourse.tab.lessons.table.menu.delete", defaultMessage: "ui.editCourse.tab.lessons.table.menu.delete" }) })) }))] }))] })) }))] })), _jsx(TableRow, { children: _jsxs(TableCell, Object.assign({ className: classes.tableBodyCollapseWrapper, colSpan: 4 }, { children: [_jsx(Collapse, Object.assign({ in: expand, timeout: "auto", unmountOnExit: true }, { children: _jsx(DragDropContext, Object.assign({ onDragEnd: handleDragEnd }, { children: _jsx(Table, { children: _jsx(Droppable, Object.assign({ droppableId: "droppable-2" }, { children: (outerProvider) => (_jsxs(TableBody, Object.assign({ ref: outerProvider.innerRef }, outerProvider.droppableProps, { children: [lessons.map((lesson, i, array) => (_jsx(Draggable, Object.assign({ draggableId: i.toString(), index: i, isDragDisabled: isDisabled }, { children: (innerProvider) => (_jsx(LessonRow, { provider: innerProvider, course: course, section: section, lesson: lesson, isNewRow: isNewLocalRow && i + 1 === array.length, handleManageLesson: handleManageLesson }, i)) }), i))), outerProvider.placeholder] }))) })) }) })) })), open && _jsx(ConfirmDialog, { open: true, onClose: handleOpenDialog, onConfirm: handleDeleteSection })] })) })] }));
 }
 export default memo(SectionRow);

package/lib/esm/components/EditCourse/Lessons.js

@@ -105,9 +105,11 @@ function Lessons(props) {
     }, [setSections]);
     const handleManageSection = useCallback((section, type, newRow = false) => {
         switch (type) {
-            case ActionLessonType.ADD:
-                setCourse(Object.assign(Object.assign({}, course), { num_sections: course.num_sections + 1, sections: [...course.sections, section] }));
+            case ActionLessonType.ADD: {
+                const newSection = Object.assign(Object.assign({}, section), { lessons: [] });
+                setCourse(Object.assign(Object.assign({}, course), { num_sections: course.num_sections + 1, sections: [...course.sections, newSection] }));
                 break;
+            }
             case ActionLessonType.RENAME:
                 setCourse(Object.assign(Object.assign({}, course), { sections: course.sections.map((prevSection) => {
                         if (prevSection.id === section.id) {

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

@@ -43,7 +43,6 @@ function Users(props) {
     } } = props;
     // STATES
     const [state, dispatch] = useReducer(dataWidgetReducer, {
-        isLoadingPrevious: false,
         isLoadingNext: false,
         next: null,
         cacheKey: SCCache.getWidgetStateCacheKey(SCCache.USER_PARTECIPANTS_COURSES_STATE_CACHE_PREFIX_KEY, course.id),
@@ -100,6 +99,10 @@ function Users(props) {
                 type: actionWidgetTypes.LOAD_PREVIOUS_SUCCESS,
                 payload: { count: state.count + newUsers.length, results: newUsers, initialized: true }
             });
+            enqueueSnackbar(_jsx(FormattedMessage, { id: "ui.editCourse.tab.users.table.snackbar.success", defaultMessage: "ui.editCourse.tab.users.table.snackbar.success" }), {
+                variant: 'success',
+                autoHideDuration: 3000
+            });
         })
             .catch((error) => {
             dispatch({ type: actionWidgetTypes.LOAD_NEXT_FAILURE, payload: { errorLoadNext: error } });
@@ -113,6 +116,6 @@ function Users(props) {
     return (_jsxs(Box, { children: [_jsx(Typography, Object.assign({ variant: "h6", className: classes.contrastColor }, { children: _jsx(FormattedMessage, { id: "ui.editCourse.tab.users.title", defaultMessage: "ui.editCourse.tab.users.title", values: { usersNumber: state.results.length } }) })), _jsxs(Stack, Object.assign({ className: classes.usersStatusWrapper }, { children: [_jsx(Status, { course: course }), _jsx(AddUsersButton, { label: "ui.editCourse.tab.users.addUsersButton.label", endpoint: {
                             url: () => Endpoints.GetCourseSuggestedUsers.url({ id: course.id }),
                             method: Endpoints.GetCourseSuggestedUsers.method
-                        }, onConfirm: handleConfirm, isUpdating: state.isLoadingPrevious, className: classes.contrastBgColor })] })), _jsx(CourseUsersTable, { course: course, state: state, dispatch: dispatch, headerCells: headerCells, mode: "edit", emptyStatusTitle: "ui.courseUsersTable.empty.users.title", emptyStatusDescription: "ui.courseUsersTable.empty.users.description" })] }));
+                        }, onConfirm: handleConfirm, className: classes.contrastBgColor })] })), _jsx(CourseUsersTable, { course: course, state: state, dispatch: dispatch, headerCells: headerCells, mode: "edit", emptyStatusTitle: "ui.courseUsersTable.empty.users.title", emptyStatusDescription: "ui.courseUsersTable.empty.users.description" })] }));
 }
 export default memo(Users);

package/lib/esm/components/LessonCommentObject/LessonCommentObject.js

@@ -177,15 +177,10 @@ export default function LessonCommentObject(inProps) {
      * @param comment
      */
     function renderComment(comment) {
-        if (!scUserContext.user || (scUserContext.user && !UserUtils.isStaff(scUserContext.user) && scUserContext.user.id !== comment.created_by.id)) {
-            // render the comment if user is logged and is staff (admin, moderator)
-            // or the comment author is the logged user
-            return null;
-        }
         const summaryHtml = getCommentContributionHtml(comment.html, scRoutingContext.url);
         return (_jsx(React.Fragment, { children: editComment && editComment.id === comment.id ? (_jsx(Box, Object.assign({ className: classes.comment }, { children: _jsx(CommentObjectReply, Object.assign({ text: comment.html, medias: comment.medias, autoFocus: true, id: `edit-${comment.id}`, onSave: handleUpdate, onCancel: handleCancel, editable: !isSavingComment, EditorProps: { uploadFile: true, uploadImage: false } }, CommentObjectReplyProps)) }))) : (_jsx(BaseItem, { elevation: 0, className: classes.comment, image: _jsx(Link, Object.assign({}, (!comment.created_by.deleted && { to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, comment.created_by) }), { onClick: comment.created_by.deleted ? () => setOpenAlert(true) : null }, { children: _jsx(UserAvatar, Object.assign({ hide: !obj.created_by.community_badge }, { children: _jsx(Avatar, { alt: obj.created_by.username, variant: "circular", src: comment.created_by.avatar, className: classes.avatar }) })) })), disableTypography: true, primary: _jsx(_Fragment, { children: _jsxs(Widget, Object.assign({ className: classes.content, elevation: elevation }, rest, { children: [_jsxs(CardContent, { children: [_jsx(Link, Object.assign({ className: classes.author }, (!comment.created_by.deleted && { to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, comment.created_by) }), { onClick: comment.created_by.deleted ? () => setOpenAlert(true) : null }, { children: _jsx(Typography, Object.assign({ component: "span" }, { children: comment.created_by.username })) })), _jsxs(_Fragment, { children: [_jsx(Bullet, {}), _jsx(DateTimeAgo, { date: comment.created_at, showStartIcon: false })] }), _jsx(Typography, { className: classes.textContent, variant: "body2", gutterBottom: true, dangerouslySetInnerHTML: { __html: summaryHtml } }), obj.medias && obj.medias.length > 0 && (_jsx(_Fragment, { children: obj.medias.map((media) => {
                                             return _jsx(LessonFilePreview, { className: classes.mediaContent, media: media }, media.id);
-                                        }) }))] }), scUserContext.user && (_jsx(Box, Object.assign({ className: classes.commentActionsMenu }, { children: _jsx(LessonCommentActionsMenu, { lesson: lessonObject, commentObject: comment, onDelete: handleDelete, onEdit: handleEdit }) })))] })) }) })) }, comment.id));
+                                        }) }))] }), scUserContext.user && scUserContext.user.id === comment.created_by.id && (_jsx(Box, Object.assign({ className: classes.commentActionsMenu }, { children: _jsx(LessonCommentActionsMenu, { lesson: lessonObject, commentObject: comment, onDelete: handleDelete, onEdit: handleEdit }) })))] })) }) })) }, comment.id));
     }
     /**
      * Render comments

package/lib/esm/components/LessonCommentObjects/LessonCommentObjects.js

@@ -86,7 +86,7 @@ export default function LessonCommentObjects(inProps) {
         id: lessonObject.id,
         lessonObject: lessonObject,
         pageSize: 8,
-        orderBy: SCCommentsOrderBy.CONNECTION_ASC,
+        orderBy: SCCommentsOrderBy.ADDED_AT_ASC,
         cacheStrategy
     });
     // EFFECTS
@@ -163,7 +163,6 @@ export default function LessonCommentObjects(inProps) {
         }
         commentsObject.updateLessonComments([...updated]);
     };
-    console.log(commentsObject.isLoadingNext);
     /**
      * Renders root object(if obj)
      */

package/lib/esm/shared/AccordionLessons/AccordionLessons.d.ts

@@ -1,7 +1,8 @@
 import { HTMLAttributes } from 'react';
-import { SCCourseType } from '@selfcommunity/types';
+import { SCCourseJoinStatusType, SCCourseType } from '@selfcommunity/types';
 export interface AccordionLessonsProps {
     course: SCCourseType | null;
+    viewerJoinStatus?: SCCourseJoinStatusType;
     className?: HTMLAttributes<HTMLDivElement>['className'];
 }
 export default function AccordionLessons(inProps: AccordionLessonsProps): JSX.Element;

package/lib/esm/shared/AccordionLessons/AccordionLessons.js

@@ -1,19 +1,30 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Accordion, AccordionDetails, AccordionSummary, Box, Icon, styled, Typography, useMediaQuery, useTheme, useThemeProps } from '@mui/material';
+import { Accordion, AccordionDetails, AccordionSummary, Box, Button, Icon, styled, Typography, useMediaQuery, useTheme, useThemeProps } from '@mui/material';
 import { FormattedMessage } from 'react-intl';
 import classNames from 'classnames';
 import { useCallback, useState } from 'react';
-import { SCCourseLessonCompletionStatusType } from '@selfcommunity/types';
+import { SCCourseJoinStatusType, SCCourseLessonCompletionStatusType } from '@selfcommunity/types';
+import { SCRoutes, useSCRouting } from '@selfcommunity/react-core';
 import { PREFIX } from './constants';
 import AccordionLessonSkeleton from './Skeleton';
+import { Link } from '@selfcommunity/react-core';
 const classes = {
     root: `${PREFIX}-root`,
     empty: `${PREFIX}-empty`,
     accordion: `${PREFIX}-accordion`,
     summary: `${PREFIX}-summary`,
     details: `${PREFIX}-details`,
-    circle: `${PREFIX}-circle`
+    circle: `${PREFIX}-circle`,
+    link: `${PREFIX}-link`
 };
+function getUrlLesson(course, section, lesson) {
+    return {
+        id: course.id,
+        slug: course.slug,
+        section_id: section.id,
+        lesson_id: lesson.id
+    };
+}
 const Root = styled(Box, {
     name: PREFIX,
     slot: 'Root',
@@ -26,12 +37,14 @@ export default function AccordionLessons(inProps) {
         props: inProps,
         name: PREFIX
     });
-    const { course, className } = props;
+    const { course, viewerJoinStatus, className } = props;
     //STATES
     const [expanded, setExpanded] = useState(false);
     // HOOKS
     const theme = useTheme();
     const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
+    // CONTEXTS
+    const scRoutingContext = useSCRouting();
     // HANDLERS
     const handleChange = useCallback((panel) => (_, newExpanded) => {
         setExpanded(newExpanded ? panel : false);
@@ -41,5 +54,5 @@ export default function AccordionLessons(inProps) {
     }
     return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, { children: ((_a = course.sections) === null || _a === void 0 ? void 0 : _a.length) > 0 ? (course.sections.map((section) => (_jsxs(Accordion, Object.assign({ className: classes.accordion, expanded: expanded === section.id, onChange: handleChange(section.id), disableGutters: true, elevation: 0, square: true }, { children: [_jsxs(AccordionSummary, Object.assign({ className: classes.summary, expandIcon: _jsx(Icon, { children: "expand_less" }) }, { children: [_jsx(Typography, Object.assign({ component: "span", variant: "body1" }, { children: section.name })), !isMobile && (_jsx(Typography, Object.assign({ component: "span", variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.course.table.lessons.title", defaultMessage: "ui.course.table.lessons.title", values: {
                                     lessonsNumber: section.lessons.length
-                                } }) })))] })), section.lessons.map((lesson) => (_jsxs(AccordionDetails, Object.assign({ className: classes.details }, { children: [lesson.completion_status === SCCourseLessonCompletionStatusType.COMPLETED ? (_jsx(Icon, Object.assign({ fontSize: "small", color: "primary" }, { children: "circle_checked" }))) : lesson.locked ? (_jsx(Icon, { children: "private" })) : (_jsx(Box, { className: classes.circle })), _jsx(Typography, { children: lesson.name })] }), lesson.id)))] }), section.id)))) : (_jsx(Typography, Object.assign({ variant: "body1", className: classes.empty }, { children: _jsx(FormattedMessage, { id: "ui.course.accordionLessons.empty", defaultMessage: "ui.course.accordionLessons.empty" }) }))) })));
+                                } }) })))] })), section.lessons.map((lesson) => (_jsxs(AccordionDetails, Object.assign({ className: classes.details }, { children: [lesson.completion_status === SCCourseLessonCompletionStatusType.COMPLETED ? (_jsx(Icon, Object.assign({ fontSize: "small", color: "primary" }, { children: "circle_checked" }))) : lesson.locked ? (_jsx(Icon, { children: "private" })) : (_jsx(Box, { className: classes.circle })), course.join_status === null || viewerJoinStatus === SCCourseJoinStatusType.CREATOR || lesson.locked ? (_jsx(Typography, { children: lesson.name })) : (_jsx(Button, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.COURSE_LESSON_ROUTE_NAME, getUrlLesson(course, section, lesson)), variant: "text", color: "inherit", className: classes.link }, { children: _jsx(Typography, { children: lesson.name }) })))] }), lesson.id)))] }), section.id)))) : (_jsx(Typography, Object.assign({ variant: "body1", className: classes.empty }, { children: _jsx(FormattedMessage, { id: "ui.course.accordionLessons.empty", defaultMessage: "ui.course.accordionLessons.empty" }) }))) })));
 }

package/lib/esm/shared/AddUsersButton/AddUsersButton.d.ts

@@ -4,11 +4,6 @@ import { SCUserType } from '@selfcommunity/types';
 import { EndpointType } from '@selfcommunity/api-services';
 export interface AddUsersButtonProps extends ButtonProps {
     label: string;
-    /**
-     * Handles component update
-     * @default false
-     */
-    isUpdating?: boolean;
     /**
      * Event API Endpoint
      * @default Endpoints.GetCourseSuggestedUsers

package/lib/esm/shared/AddUsersButton/AddUsersButton.js

@@ -41,7 +41,7 @@ function AddUsersButton(inProps) {
         props: inProps,
         name: PREFIX
     });
-    const { label, variant = 'outlined', color = 'inherit', size = 'small', isUpdating = false, endpoint = Endpoints.GetCourseSuggestedUsers, endpointQueryParams = { limit: DEFAULT_PAGINATION_LIMIT, offset: DEFAULT_PAGINATION_OFFSET, search: '' }, onConfirm, className } = props, rest = __rest(props, ["label", "variant", "color", "size", "isUpdating", "endpoint", "endpointQueryParams", "onConfirm", "className"]);
+    const { label, variant = 'outlined', color = 'inherit', size = 'small', endpoint = Endpoints.GetCourseSuggestedUsers, endpointQueryParams = { limit: DEFAULT_PAGINATION_LIMIT, offset: DEFAULT_PAGINATION_OFFSET, search: '' }, onConfirm, className } = props, rest = __rest(props, ["label", "variant", "color", "size", "endpoint", "endpointQueryParams", "onConfirm", "className"]);
     // STATES
     const [openDialog, setOpenDialog] = useState(false);
     const [invited, setInvited] = useState([]);
@@ -84,17 +84,16 @@ function AddUsersButton(inProps) {
      * @param reason
      */
     const handleToggleDialogOpen = useCallback(() => {
-        if (!isUpdating) {
-            setOpenDialog((prev) => !prev);
-        }
-    }, [isUpdating, setOpenDialog]);
+        setOpenDialog((prev) => !prev);
+    }, [setOpenDialog]);
     /**
      * Handles action confirm
      */
     const handleConfirm = useCallback(() => {
         onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm(invited);
         setInvited([]);
-    }, [invited, onConfirm]);
+        handleToggleDialogOpen();
+    }, [invited, onConfirm, handleToggleDialogOpen]);
     // HANDLERS AUTOCOMPLETE
     const handleInputChange = useCallback((_, newValue, reason) => {
         switch (reason) {
@@ -127,7 +126,7 @@ function AddUsersButton(inProps) {
     const handleDelete = useCallback((userToDelete) => {
         setInvited((prev) => prev.filter((user) => user.id !== userToDelete.id));
     }, [setInvited]);
-    return (_jsxs(Fragment, { children: [_jsx(Root, Object.assign({ onClick: handleToggleDialogOpen, variant: variant, color: color, size: size, className: classNames(classes.root, className) }, rest, { children: _jsx(FormattedMessage, { id: label, defaultMessage: label }) })), openDialog && (_jsx(DialogRoot, Object.assign({ DialogContentProps: { dividers: false }, open: true, onClose: handleToggleDialogOpen, title: _jsx(Typography, Object.assign({ variant: "h5" }, { children: _jsx(FormattedMessage, { id: "ui.addUserButton.dialog.title", defaultMessage: "ui.addUserButton.dialog.title" }) })), actions: _jsx(LoadingButton, Object.assign({ onClick: handleConfirm, size: "medium", variant: "contained", autoFocus: true, disabled: !invited.length, loading: isUpdating }, { children: _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.addUserButton.dialog.confirm", defaultMessage: "ui.addUserButton.dialog.confirm" }) })) })), className: classes.dialogRoot }, { children: _jsxs(Stack, Object.assign({ className: classes.dialogAutocompleteWrapper }, { children: [_jsx(Autocomplete, { loading: loading, size: "small", multiple: true, options: suggested, onChange: handleChange, onInputChange: handleInputChange, inputValue: value, filterOptions: filterOptions, value: invited, getOptionLabel: (option) => (option === null || option === void 0 ? void 0 : option.username) || '...', isOptionEqualToValue: (option, value) => (option === null || option === void 0 ? void 0 : option.id) === value.id, loadingText: _jsx(FormattedMessage, { id: "ui.addUserButton.autocomplete.loading", defaultMessage: "ui.addUserButton.autocomplete.loading" }), noOptionsText: _jsx(FormattedMessage, { id: "ui.addUserButton.autocomplete.noResults", defaultMessage: "ui.addUserButton.autocomplete.noResults" }), renderTags: () => null, popupIcon: null, disableClearable: true, renderOption: (props, option) => (_jsxs(Stack, Object.assign({ component: "li", flexDirection: "row", gap: "5px" }, props, { children: [_jsx(Avatar, { alt: option.username, src: option.avatar }), _jsx(Typography, { children: option.username })] }))), renderInput: (params) => (_jsx(TextField, Object.assign({}, params, { variant: "outlined", placeholder: `${intl.formatMessage(messages.placeholder)}`, InputProps: Object.assign({}, params.InputProps) }))) }), _jsx(Stack, Object.assign({ className: classes.dialogChipWrapper }, { children: invited.map((option, index) => (_jsx(Chip, { avatar: _jsx(Avatar, { alt: option.username, src: option.avatar }), label: option.username, onDelete: () => {
+    return (_jsxs(Fragment, { children: [_jsx(Root, Object.assign({ onClick: handleToggleDialogOpen, variant: variant, color: color, size: size, className: classNames(classes.root, className) }, rest, { children: _jsx(FormattedMessage, { id: label, defaultMessage: label }) })), openDialog && (_jsx(DialogRoot, Object.assign({ DialogContentProps: { dividers: false }, open: true, onClose: handleToggleDialogOpen, title: _jsx(Typography, Object.assign({ variant: "h5" }, { children: _jsx(FormattedMessage, { id: "ui.addUserButton.dialog.title", defaultMessage: "ui.addUserButton.dialog.title" }) })), actions: _jsx(LoadingButton, Object.assign({ onClick: handleConfirm, size: "medium", variant: "contained", autoFocus: true, disabled: !invited.length }, { children: _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.addUserButton.dialog.confirm", defaultMessage: "ui.addUserButton.dialog.confirm" }) })) })), className: classes.dialogRoot }, { children: _jsxs(Stack, Object.assign({ className: classes.dialogAutocompleteWrapper }, { children: [_jsx(Autocomplete, { loading: loading, size: "small", multiple: true, options: suggested, onChange: handleChange, onInputChange: handleInputChange, inputValue: value, filterOptions: filterOptions, value: invited, getOptionLabel: (option) => (option === null || option === void 0 ? void 0 : option.username) || '...', isOptionEqualToValue: (option, value) => (option === null || option === void 0 ? void 0 : option.id) === value.id, loadingText: _jsx(FormattedMessage, { id: "ui.addUserButton.autocomplete.loading", defaultMessage: "ui.addUserButton.autocomplete.loading" }), noOptionsText: _jsx(FormattedMessage, { id: "ui.addUserButton.autocomplete.noResults", defaultMessage: "ui.addUserButton.autocomplete.noResults" }), renderTags: () => null, popupIcon: null, disableClearable: true, renderOption: (props, option) => (_jsxs(Stack, Object.assign({ component: "li", flexDirection: "row", gap: "5px" }, props, { children: [_jsx(Avatar, { alt: option.username, src: option.avatar }), _jsx(Typography, { children: option.username })] }))), renderInput: (params) => (_jsx(TextField, Object.assign({}, params, { variant: "outlined", placeholder: `${intl.formatMessage(messages.placeholder)}`, InputProps: Object.assign({}, params.InputProps) }))) }), _jsx(Stack, Object.assign({ className: classes.dialogChipWrapper }, { children: invited.map((option, index) => (_jsx(Chip, { avatar: _jsx(Avatar, { alt: option.username, src: option.avatar }), label: option.username, onDelete: () => {
                                     handleDelete(option);
                                 } }, index))) }))] })) })))] }));
 }

package/lib/esm/shared/CourseUsersTable/SeeProgressButton.js

@@ -9,6 +9,7 @@ import AccordionLessons from '../AccordionLessons';
 import { CourseService } from '@selfcommunity/api-services';
 import { Logger } from '@selfcommunity/utils';
 import { SCOPE_SC_UI } from '../../constants/Errors';
+import UserAvatar from '../UserAvatar';
 const classes = {
     dialogRoot: `${PREFIX}-dialog-root`,
     contentWrapper: `${PREFIX}-content-wrapper`,
@@ -45,6 +46,8 @@ function SeeProgressButton(props) {
     const handleToggleOpen = useCallback(() => {
         setOpen((prev) => !prev);
     }, [setOpen]);
-    return (_jsxs(Fragment, { children: [isMobile ? (_jsx(IconButton, Object.assign({ size: "small", color: "inherit", onClick: handleToggleOpen }, { children: _jsx(Icon, { children: "chevron_right" }) }))) : (_jsx(Button, Object.assign({ variant: "outlined", size: "small", color: "inherit", onClick: handleToggleOpen }, { children: _jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedMessage, { id: "ui.courseUsersTable.action.btn.label", defaultMessage: "ui.courseUsersTable.action.btn.label" }) })) }))), open && (_jsx(DialogRoot, Object.assign({ DialogContentProps: { dividers: isMobile }, open: true, scroll: "paper", onClose: handleToggleOpen, title: _jsx(Typography, Object.assign({ variant: "h3" }, { children: _jsx(FormattedMessage, { id: "ui.courseUsersTable.dialog.title", defaultMessage: "ui.courseUsersTable.dialog.title" }) })), className: classes.dialogRoot }, { children: _jsxs(Stack, Object.assign({ className: classes.contentWrapper }, { children: [_jsxs(Stack, Object.assign({ className: classes.infoOuterWrapper }, { children: [_jsxs(Stack, Object.assign({ className: classes.infoInnerWrapper }, { children: [_jsxs(Stack, Object.assign({ className: classes.avatarWrapper }, { children: [_jsx(Avatar, { className: classes.avatar, src: user.avatar, alt: user.username }), _jsx(Typography, Object.assign({ variant: "body1" }, { children: user.username }))] })), _jsx(Button, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.USER_PRIVATE_MESSAGES_ROUTE_NAME, user), variant: "outlined", size: "small", color: "inherit" }, { children: _jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedMessage, { id: "ui.courseUsersTable.dialog.btn.label", defaultMessage: "ui.courseUsersTable.dialog.btn.label" }) })) }))] })), student ? (_jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.courseUsersTable.dialog.info.text1", defaultMessage: "ui.courseUsersTable.dialog.info.text1", values: { lessonsCompleted: student.num_lessons_completed } }) }))) : (_jsx(Skeleton, { animation: "wave", variant: "text", width: "100px", height: "21px" })), student ? (_jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.courseUsersTable.dialog.info.text2", defaultMessage: "ui.courseUsersTable.dialog.info.text2", values: { courseCompleted: student.user_completion_rate } }) }))) : (_jsx(Skeleton, { animation: "wave", variant: "text", width: "100px", height: "21px" }))] })), _jsx(AccordionLessons, { course: student })] })) })))] }));
+    return (_jsxs(Fragment, { children: [isMobile ? (_jsx(IconButton, Object.assign({ size: "small", color: "inherit", onClick: handleToggleOpen }, { children: _jsx(Icon, { children: "chevron_right" }) }))) : (_jsx(Button, Object.assign({ variant: "outlined", size: "small", color: "inherit", onClick: handleToggleOpen }, { children: _jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedMessage, { id: "ui.courseUsersTable.action.btn.label", defaultMessage: "ui.courseUsersTable.action.btn.label" }) })) }))), open && (_jsx(DialogRoot, Object.assign({ DialogContentProps: { dividers: isMobile }, open: true, scroll: "paper", onClose: handleToggleOpen, title: _jsx(Typography, Object.assign({ variant: "h3" }, { children: _jsx(FormattedMessage, { id: "ui.courseUsersTable.dialog.title", defaultMessage: "ui.courseUsersTable.dialog.title" }) })), className: classes.dialogRoot }, { children: _jsxs(Stack, Object.assign({ className: classes.contentWrapper }, { children: [_jsxs(Stack, Object.assign({ className: classes.infoOuterWrapper }, { children: [_jsxs(Stack, Object.assign({ className: classes.infoInnerWrapper }, { children: [_jsxs(Stack, Object.assign({ className: classes.avatarWrapper }, { children: [_jsx(Link, Object.assign({}, (!course.created_by.deleted && {
+                                                    to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, course.created_by)
+                                                }), { children: _jsx(UserAvatar, Object.assign({ hide: !course.created_by.community_badge, smaller: true }, { children: _jsx(Avatar, { className: classes.avatar, src: user.avatar, alt: user.username }) })) })), _jsx(Typography, Object.assign({ variant: "body1" }, { children: user.username }))] })), _jsx(Button, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.USER_PRIVATE_MESSAGES_ROUTE_NAME, user), variant: "outlined", size: "small", color: "inherit" }, { children: _jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedMessage, { id: "ui.courseUsersTable.dialog.btn.label", defaultMessage: "ui.courseUsersTable.dialog.btn.label" }) })) }))] })), student ? (_jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.courseUsersTable.dialog.info.text1", defaultMessage: "ui.courseUsersTable.dialog.info.text1", values: { lessonsCompleted: student.num_lessons_completed } }) }))) : (_jsx(Skeleton, { animation: "wave", variant: "text", width: "100px", height: "21px" })), student ? (_jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.courseUsersTable.dialog.info.text2", defaultMessage: "ui.courseUsersTable.dialog.info.text2", values: { courseCompleted: student.user_completion_rate } }) }))) : (_jsx(Skeleton, { animation: "wave", variant: "text", width: "100px", height: "21px" }))] })), _jsx(AccordionLessons, { course: student, viewerJoinStatus: course.join_status })] })) })))] }));
 }
 export default memo(SeeProgressButton);