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

package/lib/cjs/components/CourseDashboard/Student.js

@@ -52,6 +52,7 @@ const classes = {
     contrastBgColor: `${constants_1.PREFIX}-contrast-bg-color`
 };
 function getUrlNextLesson(course) {
+    var _a;
     const data = {
         id: course.id,
         slug: course.slug
@@ -63,7 +64,7 @@ function getUrlNextLesson(course) {
         });
         return data;
     }
-    course.sections.some((section) => {
+    (_a = course.sections) === null || _a === void 0 ? void 0 : _a.some((section) => {
         const isNextLessonInThisSection = section.num_lessons_completed < section.num_lessons;
         if (isNextLessonInThisSection) {
             Object.assign(data, {
@@ -76,7 +77,8 @@ function getUrlNextLesson(course) {
     return data;
 }
 function getIsNextLessonLocked(course) {
-    return course.sections.every((section) => {
+    var _a;
+    return (_a = course.sections) === null || _a === void 0 ? void 0 : _a.every((section) => {
         var _a, _b;
         return (section.num_lessons_completed < section.num_lessons &&
             ((_b = (_a = section.lessons) === null || _a === void 0 ? void 0 : _a.find((lesson) => lesson.completion_status === types_1.SCCourseLessonCompletionStatusType.UNCOMPLETED)) === null || _b === void 0 ? void 0 : _b.locked));
@@ -99,6 +101,8 @@ function Student(inProps) {
     const [loadingRequest, setLoadingRequest] = (0, react_1.useState)(false);
     // CONTEXTS
     const scRoutingContext = (0, react_core_1.useSCRouting)();
+    const scContext = (0, react_core_1.useSCContext)();
+    const scUserContext = (0, react_core_1.useSCUser)();
     // HOOKS
     const { scCourse, setSCCourse } = (0, react_core_1.useSCFetchCourse)({ id: courseId, course });
     const intl = (0, react_intl_1.useIntl)();
@@ -140,6 +144,9 @@ function Student(inProps) {
             utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
         });
     }, [scCourse, sentRequest, setLoadingRequest]);
+    const handleAnonymousAction = (0, react_1.useCallback)(() => {
+        scContext.settings.handleAnonymousAction();
+    }, [scContext.settings.handleAnonymousAction]);
     // MEMOS
     const actionButton = (0, react_1.useMemo)(() => {
         if (!scCourse) {
@@ -153,7 +160,7 @@ function Student(inProps) {
                             ? BUTTON_MESSAGES.start
                             : scCourse.user_completion_rate === 100
                                 ? BUTTON_MESSAGES.review
-                                : BUTTON_MESSAGES.continue, to: scCourse.join_status !== null ? scRoutingContext.url(react_core_1.SCRoutes.COURSE_LESSON_ROUTE_NAME, getUrlNextLesson(scCourse)) : undefined, disabled: scCourse.join_status !== null ? getIsNextLessonLocked(scCourse) : undefined, color: scCourse.user_completion_rate === 100 ? 'inherit' : undefined, variant: scCourse.user_completion_rate === 100 ? 'outlined' : undefined, loading: scCourse.join_status === null ? loadingRequest : undefined, onClick: scCourse.join_status === null ? handleRequest : undefined })), scCourse.privacy === types_1.SCCoursePrivacyType.PRIVATE &&
+                                : BUTTON_MESSAGES.continue, to: scCourse.join_status !== null ? scRoutingContext.url(react_core_1.SCRoutes.COURSE_LESSON_ROUTE_NAME, getUrlNextLesson(scCourse)) : undefined, disabled: scCourse.join_status !== null ? getIsNextLessonLocked(scCourse) : undefined, color: scCourse.user_completion_rate === 100 ? 'inherit' : undefined, variant: scCourse.user_completion_rate === 100 ? 'outlined' : undefined, loading: scCourse.join_status === null ? loadingRequest : undefined, onClick: !scUserContext.user ? handleAnonymousAction : scCourse.join_status === null ? handleRequest : undefined })), scCourse.privacy === types_1.SCCoursePrivacyType.PRIVATE &&
                     (scCourse.join_status === null || scCourse.join_status === types_1.SCCourseJoinStatusType.REQUESTED) && ((0, jsx_runtime_1.jsx)(ActionButton_1.default, { labelId: sentRequest ? BUTTON_MESSAGES.cancel : BUTTON_MESSAGES.request, color: "inherit", variant: "outlined", loading: loadingRequest, onClick: handleRequest }))] })));
     }, [scCourse, sentRequest, loadingRequest, handleRequest]);
     if (!scCourse) {

package/lib/cjs/components/CourseParticipantsButton/CourseParticipantsButton.js

@@ -71,6 +71,7 @@ function CourseParticipantsButton(inProps) {
     const { className, courseId, course, hideCaption = false, DialogProps = {} } = props, rest = tslib_1.__rest(props, ["className", "courseId", "course", "hideCaption", "DialogProps"]);
     // STATE
     const [loading, setLoading] = (0, react_1.useState)(true);
+    const [count, setCount] = (0, react_1.useState)(0);
     const [next, setNext] = (0, react_1.useState)(null);
     const [offset, setOffset] = (0, react_1.useState)(null);
     const [enrolled, setEnrolled] = (0, react_1.useState)([]);
@@ -87,17 +88,18 @@ function CourseParticipantsButton(inProps) {
         if (!scCourse) {
             return;
         }
-        if (!enrolled.length && participantsAvailable) {
+        if (!count && participantsAvailable) {
             api_services_1.CourseService.getCourseJoinedUsers(scCourse.id, { limit: 3 }).then((res) => {
                 setEnrolled([...res.results]);
                 setOffset(4);
+                setCount(res.count);
                 setLoading(false);
             });
         }
         else {
             setOffset(0);
         }
-    }, [scCourse, participantsAvailable, enrolled]);
+    }, [scCourse, participantsAvailable, count, setEnrolled, setOffset, setLoading]);
     (0, react_1.useEffect)(() => {
         if (open && offset !== null) {
             setLoading(true);
@@ -108,7 +110,7 @@ function CourseParticipantsButton(inProps) {
                 setOffset(null);
             });
         }
-    }, [open, enrolled, offset]);
+    }, [open, enrolled, offset, setLoading, setNext]);
     /**
      * Memoized fetchEnrolledUsers
      */
@@ -127,8 +129,8 @@ function CourseParticipantsButton(inProps) {
         })
             .catch((error) => utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error))
             .then(() => setLoading(false));
-    }, [enrolled, scCourse, next]);
-    const renderSurplus = (0, react_1.useCallback)(() => (0, buttonCounters_1.numberFormatter)(enrolled.length), [enrolled]);
+    }, [enrolled, next, setLoading]);
+    const renderSurplus = (0, react_1.useCallback)(() => (0, buttonCounters_1.numberFormatter)(count), [count]);
     /**
      * Opens participants dialog
      */
@@ -141,8 +143,8 @@ function CourseParticipantsButton(inProps) {
     if (!participantsAvailable) {
         return (0, jsx_runtime_1.jsx)(HiddenPlaceholder_1.default, {});
     }
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className), onClick: handleToggleDialogOpen, disabled: loading || !scCourse || enrolled.length === 0, 
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className), onClick: handleToggleDialogOpen, disabled: loading || !scCourse || count === 0, 
                 // @ts-expect-error this is needed to use enrolled into SCCourseParticipantsButton
-                enrolled: enrolled }, rest, { children: [!hideCaption && ((0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: classes.participants }, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, { children: "people_alt" }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.courseParticipantsButton.participants", id: "ui.courseParticipantsButton.participants", values: { total: enrolled.length } })] }))), !enrolled.length && (loading || !scCourse) ? ((0, jsx_runtime_1.jsx)(AvatarGroupSkeleton_1.default, Object.assign({}, rest, (!participantsAvailable && { skeletonsAnimation: false }), { count: 4 }))) : ((0, jsx_runtime_1.jsx)(material_1.AvatarGroup, Object.assign({ total: enrolled.length, renderSurplus: renderSurplus }, { children: enrolled.map((c) => ((0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: c.username, src: c.avatar }, c.id))) })))] })), open && ((0, jsx_runtime_1.jsx)(DialogRoot, Object.assign({ className: classes.dialogRoot, title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.courseParticipantsButton.dialogTitle", id: "ui.courseParticipantsButton.dialogTitle", values: { total: enrolled.length } }), onClose: handleToggleDialogOpen, open: true }, DialogProps, { children: (0, jsx_runtime_1.jsx)(InfiniteScroll_1.default, Object.assign({ dataLength: enrolled.length, next: fetchEnrolledUsers, hasMoreNext: next !== null || loading, loaderNext: (0, jsx_runtime_1.jsx)(User_1.UserSkeleton, { elevation: 0 }), className: classes.infiniteScroll, endMessage: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.endMessage }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courseParticipantsButton.noOtherParticipants", defaultMessage: "ui.courseParticipantsButton.noOtherParticipants" }) })) }, { children: (0, jsx_runtime_1.jsx)(material_1.List, { children: enrolled.map((e) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(User_1.default, { elevation: 0, user: e }) }, e.id))) }) })) })))] }));
+                enrolled: enrolled }, rest, { children: [!hideCaption && ((0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: classes.participants }, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, { children: "people_alt" }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.courseParticipantsButton.participants", id: "ui.courseParticipantsButton.participants", values: { total: count } })] }))), !count && (loading || !scCourse) ? ((0, jsx_runtime_1.jsx)(AvatarGroupSkeleton_1.default, Object.assign({}, rest, (!participantsAvailable && { skeletonsAnimation: false }), { count: 4 }))) : ((0, jsx_runtime_1.jsx)(material_1.AvatarGroup, Object.assign({ total: count, renderSurplus: renderSurplus }, { children: enrolled.map((c) => ((0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: c.username, src: c.avatar }, c.id))) })))] })), open && ((0, jsx_runtime_1.jsx)(DialogRoot, Object.assign({ className: classes.dialogRoot, title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.courseParticipantsButton.dialogTitle", id: "ui.courseParticipantsButton.dialogTitle", values: { total: count } }), onClose: handleToggleDialogOpen, open: true }, DialogProps, { children: (0, jsx_runtime_1.jsx)(InfiniteScroll_1.default, Object.assign({ dataLength: count, next: fetchEnrolledUsers, hasMoreNext: next !== null || loading, loaderNext: (0, jsx_runtime_1.jsx)(User_1.UserSkeleton, { elevation: 0 }), className: classes.infiniteScroll, endMessage: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.endMessage }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courseParticipantsButton.noOtherParticipants", defaultMessage: "ui.courseParticipantsButton.noOtherParticipants" }) })) }, { children: (0, jsx_runtime_1.jsx)(material_1.List, { children: enrolled.map((e) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(User_1.default, { elevation: 0, user: e }) }, e.id))) }) })) })))] }));
 }
 exports.default = CourseParticipantsButton;

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

@@ -46,7 +46,6 @@ function Users(props) {
     } } = props;
     // STATES
     const [state, dispatch] = (0, react_1.useReducer)(widget_1.dataWidgetReducer, {
-        isLoadingPrevious: false,
         isLoadingNext: false,
         next: null,
         cacheKey: react_core_1.SCCache.getWidgetStateCacheKey(react_core_1.SCCache.USER_PARTECIPANTS_COURSES_STATE_CACHE_PREFIX_KEY, course.id),
@@ -103,6 +102,10 @@ function Users(props) {
                 type: widget_1.actionWidgetTypes.LOAD_PREVIOUS_SUCCESS,
                 payload: { count: state.count + newUsers.length, results: newUsers, initialized: true }
             });
+            enqueueSnackbar((0, jsx_runtime_1.jsx)(react_intl_1.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: widget_1.actionWidgetTypes.LOAD_NEXT_FAILURE, payload: { errorLoadNext: error } });
@@ -116,6 +119,6 @@ function Users(props) {
     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 }), (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, isUpdating: state.isLoadingPrevious, className: classes.contrastBgColor })] })), (0, jsx_runtime_1.jsx)(CourseUsersTable_1.default, { 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 })] })), (0, jsx_runtime_1.jsx)(CourseUsersTable_1.default, { course: course, state: state, dispatch: dispatch, headerCells: headerCells, mode: "edit", emptyStatusTitle: "ui.courseUsersTable.empty.users.title", emptyStatusDescription: "ui.courseUsersTable.empty.users.description" })] }));
 }
 exports.default = (0, react_1.memo)(Users);

package/lib/cjs/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/cjs/shared/AccordionLessons/AccordionLessons.js

@@ -7,16 +7,27 @@ const react_intl_1 = require("react-intl");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const react_1 = require("react");
 const types_1 = require("@selfcommunity/types");
+const react_core_1 = require("@selfcommunity/react-core");
 const constants_1 = require("./constants");
 const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
+const react_core_2 = require("@selfcommunity/react-core");
 const classes = {
     root: `${constants_1.PREFIX}-root`,
     empty: `${constants_1.PREFIX}-empty`,
     accordion: `${constants_1.PREFIX}-accordion`,
     summary: `${constants_1.PREFIX}-summary`,
     details: `${constants_1.PREFIX}-details`,
-    circle: `${constants_1.PREFIX}-circle`
+    circle: `${constants_1.PREFIX}-circle`,
+    link: `${constants_1.PREFIX}-link`
 };
+function getUrlLesson(course, section, lesson) {
+    return {
+        id: course.id,
+        slug: course.slug,
+        section_id: section.id,
+        lesson_id: lesson.id
+    };
+}
 const Root = (0, material_1.styled)(material_1.Box, {
     name: constants_1.PREFIX,
     slot: 'Root',
@@ -29,12 +40,14 @@ function AccordionLessons(inProps) {
         props: inProps,
         name: constants_1.PREFIX
     });
-    const { course, className } = props;
+    const { course, viewerJoinStatus, className } = props;
     //STATES
     const [expanded, setExpanded] = (0, react_1.useState)(false);
     // HOOKS
     const theme = (0, material_1.useTheme)();
     const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('sm'));
+    // CONTEXTS
+    const scRoutingContext = (0, react_core_1.useSCRouting)();
     // HANDLERS
     const handleChange = (0, react_1.useCallback)((panel) => (_, newExpanded) => {
         setExpanded(newExpanded ? panel : false);
@@ -44,6 +57,6 @@ function AccordionLessons(inProps) {
     }
     return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, { children: ((_a = course.sections) === null || _a === void 0 ? void 0 : _a.length) > 0 ? (course.sections.map((section) => ((0, jsx_runtime_1.jsxs)(material_1.Accordion, Object.assign({ className: classes.accordion, expanded: expanded === section.id, onChange: handleChange(section.id), disableGutters: true, elevation: 0, square: true }, { children: [(0, jsx_runtime_1.jsxs)(material_1.AccordionSummary, Object.assign({ className: classes.summary, expandIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "expand_less" }) }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "span", variant: "body1" }, { children: section.name })), !isMobile && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "span", variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.table.lessons.title", defaultMessage: "ui.course.table.lessons.title", values: {
                                     lessonsNumber: section.lessons.length
-                                } }) })))] })), section.lessons.map((lesson) => ((0, jsx_runtime_1.jsxs)(material_1.AccordionDetails, Object.assign({ className: classes.details }, { children: [lesson.completion_status === types_1.SCCourseLessonCompletionStatusType.COMPLETED ? ((0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ fontSize: "small", color: "primary" }, { children: "circle_checked" }))) : lesson.locked ? ((0, jsx_runtime_1.jsx)(material_1.Icon, { children: "private" })) : ((0, jsx_runtime_1.jsx)(material_1.Box, { className: classes.circle })), (0, jsx_runtime_1.jsx)(material_1.Typography, { children: lesson.name })] }), lesson.id)))] }), section.id)))) : ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", className: classes.empty }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.accordionLessons.empty", defaultMessage: "ui.course.accordionLessons.empty" }) }))) })));
+                                } }) })))] })), section.lessons.map((lesson) => ((0, jsx_runtime_1.jsxs)(material_1.AccordionDetails, Object.assign({ className: classes.details }, { children: [lesson.completion_status === types_1.SCCourseLessonCompletionStatusType.COMPLETED ? ((0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ fontSize: "small", color: "primary" }, { children: "circle_checked" }))) : lesson.locked ? ((0, jsx_runtime_1.jsx)(material_1.Icon, { children: "private" })) : ((0, jsx_runtime_1.jsx)(material_1.Box, { className: classes.circle })), course.join_status === null || viewerJoinStatus === types_1.SCCourseJoinStatusType.CREATOR || lesson.locked ? ((0, jsx_runtime_1.jsx)(material_1.Typography, { children: lesson.name })) : ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ component: react_core_2.Link, to: scRoutingContext.url(react_core_1.SCRoutes.COURSE_LESSON_ROUTE_NAME, getUrlLesson(course, section, lesson)), variant: "text", color: "inherit", className: classes.link }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, { children: lesson.name }) })))] }), lesson.id)))] }), section.id)))) : ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", className: classes.empty }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.course.accordionLessons.empty", defaultMessage: "ui.course.accordionLessons.empty" }) }))) })));
 }
 exports.default = AccordionLessons;

package/lib/cjs/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/cjs/shared/AddUsersButton/AddUsersButton.js

@@ -43,7 +43,7 @@ function AddUsersButton(inProps) {
         props: inProps,
         name: PREFIX
     });
-    const { label, variant = 'outlined', color = 'inherit', size = 'small', isUpdating = false, endpoint = api_services_1.Endpoints.GetCourseSuggestedUsers, endpointQueryParams = { limit: Pagination_1.DEFAULT_PAGINATION_LIMIT, offset: Pagination_1.DEFAULT_PAGINATION_OFFSET, search: '' }, onConfirm, className } = props, rest = tslib_1.__rest(props, ["label", "variant", "color", "size", "isUpdating", "endpoint", "endpointQueryParams", "onConfirm", "className"]);
+    const { label, variant = 'outlined', color = 'inherit', size = 'small', endpoint = api_services_1.Endpoints.GetCourseSuggestedUsers, endpointQueryParams = { limit: Pagination_1.DEFAULT_PAGINATION_LIMIT, offset: Pagination_1.DEFAULT_PAGINATION_OFFSET, search: '' }, onConfirm, className } = props, rest = tslib_1.__rest(props, ["label", "variant", "color", "size", "endpoint", "endpointQueryParams", "onConfirm", "className"]);
     // STATES
     const [openDialog, setOpenDialog] = (0, react_1.useState)(false);
     const [invited, setInvited] = (0, react_1.useState)([]);
@@ -86,17 +86,16 @@ function AddUsersButton(inProps) {
      * @param reason
      */
     const handleToggleDialogOpen = (0, react_1.useCallback)(() => {
-        if (!isUpdating) {
-            setOpenDialog((prev) => !prev);
-        }
-    }, [isUpdating, setOpenDialog]);
+        setOpenDialog((prev) => !prev);
+    }, [setOpenDialog]);
     /**
      * Handles action confirm
      */
     const handleConfirm = (0, react_1.useCallback)(() => {
         onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm(invited);
         setInvited([]);
-    }, [invited, onConfirm]);
+        handleToggleDialogOpen();
+    }, [invited, onConfirm, handleToggleDialogOpen]);
     // HANDLERS AUTOCOMPLETE
     const handleInputChange = (0, react_1.useCallback)((_, newValue, reason) => {
         switch (reason) {
@@ -129,7 +128,7 @@ function AddUsersButton(inProps) {
     const handleDelete = (0, react_1.useCallback)((userToDelete) => {
         setInvited((prev) => prev.filter((user) => user.id !== userToDelete.id));
     }, [setInvited]);
-    return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Root, Object.assign({ onClick: handleToggleDialogOpen, variant: variant, color: color, size: size, className: (0, classnames_1.default)(classes.root, className) }, rest, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: label, defaultMessage: label }) })), openDialog && ((0, jsx_runtime_1.jsx)(DialogRoot, Object.assign({ DialogContentProps: { dividers: false }, open: true, onClose: handleToggleDialogOpen, title: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.addUserButton.dialog.title", defaultMessage: "ui.addUserButton.dialog.title" }) })), actions: (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ onClick: handleConfirm, size: "medium", variant: "contained", autoFocus: true, disabled: !invited.length, loading: isUpdating }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.addUserButton.dialog.confirm", defaultMessage: "ui.addUserButton.dialog.confirm" }) })) })), className: classes.dialogRoot }, { children: (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.dialogAutocompleteWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.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: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.addUserButton.autocomplete.loading", defaultMessage: "ui.addUserButton.autocomplete.loading" }), noOptionsText: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.addUserButton.autocomplete.noResults", defaultMessage: "ui.addUserButton.autocomplete.noResults" }), renderTags: () => null, popupIcon: null, disableClearable: true, renderOption: (props, option) => ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ component: "li", flexDirection: "row", gap: "5px" }, props, { children: [(0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: option.username, src: option.avatar }), (0, jsx_runtime_1.jsx)(material_1.Typography, { children: option.username })] }))), renderInput: (params) => ((0, jsx_runtime_1.jsx)(material_1.TextField, Object.assign({}, params, { variant: "outlined", placeholder: `${intl.formatMessage(messages.placeholder)}`, InputProps: Object.assign({}, params.InputProps) }))) }), (0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ className: classes.dialogChipWrapper }, { children: invited.map((option, index) => ((0, jsx_runtime_1.jsx)(material_1.Chip, { avatar: (0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: option.username, src: option.avatar }), label: option.username, onDelete: () => {
+    return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Root, Object.assign({ onClick: handleToggleDialogOpen, variant: variant, color: color, size: size, className: (0, classnames_1.default)(classes.root, className) }, rest, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: label, defaultMessage: label }) })), openDialog && ((0, jsx_runtime_1.jsx)(DialogRoot, Object.assign({ DialogContentProps: { dividers: false }, open: true, onClose: handleToggleDialogOpen, title: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.addUserButton.dialog.title", defaultMessage: "ui.addUserButton.dialog.title" }) })), actions: (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ onClick: handleConfirm, size: "medium", variant: "contained", autoFocus: true, disabled: !invited.length }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.addUserButton.dialog.confirm", defaultMessage: "ui.addUserButton.dialog.confirm" }) })) })), className: classes.dialogRoot }, { children: (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.dialogAutocompleteWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.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: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.addUserButton.autocomplete.loading", defaultMessage: "ui.addUserButton.autocomplete.loading" }), noOptionsText: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.addUserButton.autocomplete.noResults", defaultMessage: "ui.addUserButton.autocomplete.noResults" }), renderTags: () => null, popupIcon: null, disableClearable: true, renderOption: (props, option) => ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ component: "li", flexDirection: "row", gap: "5px" }, props, { children: [(0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: option.username, src: option.avatar }), (0, jsx_runtime_1.jsx)(material_1.Typography, { children: option.username })] }))), renderInput: (params) => ((0, jsx_runtime_1.jsx)(material_1.TextField, Object.assign({}, params, { variant: "outlined", placeholder: `${intl.formatMessage(messages.placeholder)}`, InputProps: Object.assign({}, params.InputProps) }))) }), (0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ className: classes.dialogChipWrapper }, { children: invited.map((option, index) => ((0, jsx_runtime_1.jsx)(material_1.Chip, { avatar: (0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: option.username, src: option.avatar }), label: option.username, onDelete: () => {
                                     handleDelete(option);
                                 } }, index))) }))] })) })))] }));
 }

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

@@ -12,6 +12,7 @@ const AccordionLessons_1 = tslib_1.__importDefault(require("../AccordionLessons"
 const api_services_1 = require("@selfcommunity/api-services");
 const utils_1 = require("@selfcommunity/utils");
 const Errors_1 = require("../../constants/Errors");
+const UserAvatar_1 = tslib_1.__importDefault(require("../UserAvatar"));
 const classes = {
     dialogRoot: `${constants_1.PREFIX}-dialog-root`,
     contentWrapper: `${constants_1.PREFIX}-content-wrapper`,
@@ -48,6 +49,8 @@ function SeeProgressButton(props) {
     const handleToggleOpen = (0, react_1.useCallback)(() => {
         setOpen((prev) => !prev);
     }, [setOpen]);
-    return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [isMobile ? ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ size: "small", color: "inherit", onClick: handleToggleOpen }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "chevron_right" }) }))) : ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "outlined", size: "small", color: "inherit", onClick: handleToggleOpen }, { 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.action.btn.label", defaultMessage: "ui.courseUsersTable.action.btn.label" }) })) }))), open && ((0, jsx_runtime_1.jsx)(DialogRoot, Object.assign({ DialogContentProps: { dividers: isMobile }, open: true, scroll: "paper", onClose: handleToggleOpen, title: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h3" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courseUsersTable.dialog.title", defaultMessage: "ui.courseUsersTable.dialog.title" }) })), className: classes.dialogRoot }, { children: (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.contentWrapper }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.infoOuterWrapper }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.infoInnerWrapper }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.avatarWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.Avatar, { className: classes.avatar, src: user.avatar, alt: user.username }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: user.username }))] })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_PRIVATE_MESSAGES_ROUTE_NAME, user), variant: "outlined", size: "small", color: "inherit" }, { 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.dialog.btn.label", defaultMessage: "ui.courseUsersTable.dialog.btn.label" }) })) }))] })), student ? ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courseUsersTable.dialog.info.text1", defaultMessage: "ui.courseUsersTable.dialog.info.text1", values: { lessonsCompleted: student.num_lessons_completed } }) }))) : ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "text", width: "100px", height: "21px" })), student ? ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courseUsersTable.dialog.info.text2", defaultMessage: "ui.courseUsersTable.dialog.info.text2", values: { courseCompleted: student.user_completion_rate } }) }))) : ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "text", width: "100px", height: "21px" }))] })), (0, jsx_runtime_1.jsx)(AccordionLessons_1.default, { course: student })] })) })))] }));
+    return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [isMobile ? ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ size: "small", color: "inherit", onClick: handleToggleOpen }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "chevron_right" }) }))) : ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "outlined", size: "small", color: "inherit", onClick: handleToggleOpen }, { 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.action.btn.label", defaultMessage: "ui.courseUsersTable.action.btn.label" }) })) }))), open && ((0, jsx_runtime_1.jsx)(DialogRoot, Object.assign({ DialogContentProps: { dividers: isMobile }, open: true, scroll: "paper", onClose: handleToggleOpen, title: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h3" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courseUsersTable.dialog.title", defaultMessage: "ui.courseUsersTable.dialog.title" }) })), className: classes.dialogRoot }, { children: (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.contentWrapper }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.infoOuterWrapper }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.infoInnerWrapper }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.avatarWrapper }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({}, (!course.created_by.deleted && {
+                                                    to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, course.created_by)
+                                                }), { children: (0, jsx_runtime_1.jsx)(UserAvatar_1.default, Object.assign({ hide: !course.created_by.community_badge, smaller: true }, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, { className: classes.avatar, src: user.avatar, alt: user.username }) })) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: user.username }))] })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_PRIVATE_MESSAGES_ROUTE_NAME, user), variant: "outlined", size: "small", color: "inherit" }, { 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.dialog.btn.label", defaultMessage: "ui.courseUsersTable.dialog.btn.label" }) })) }))] })), student ? ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courseUsersTable.dialog.info.text1", defaultMessage: "ui.courseUsersTable.dialog.info.text1", values: { lessonsCompleted: student.num_lessons_completed } }) }))) : ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "text", width: "100px", height: "21px" })), student ? ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courseUsersTable.dialog.info.text2", defaultMessage: "ui.courseUsersTable.dialog.info.text2", values: { courseCompleted: student.user_completion_rate } }) }))) : ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "text", width: "100px", height: "21px" }))] })), (0, jsx_runtime_1.jsx)(AccordionLessons_1.default, { course: student, viewerJoinStatus: course.join_status })] })) })))] }));
 }
 exports.default = (0, react_1.memo)(SeeProgressButton);

package/lib/esm/components/CourseDashboard/Student.js

@@ -9,7 +9,7 @@ import { SCCourseJoinStatusType, SCCourseLessonCompletionStatusType, SCCoursePri
 import { FormattedMessage, useIntl } from 'react-intl';
 import ActionButton from './Student/ActionButton';
 import { CLAPPING } from '../../assets/courses/clapping';
-import { SCRoutes, useSCFetchCourse, useSCRouting, Link } from '@selfcommunity/react-core';
+import { SCRoutes, useSCFetchCourse, useSCRouting, Link, useSCUser, useSCContext } from '@selfcommunity/react-core';
 import AccordionLessons from '../../shared/AccordionLessons';
 import { CourseService } from '@selfcommunity/api-services';
 import { Logger } from '@selfcommunity/utils';
@@ -50,6 +50,7 @@ const classes = {
     contrastBgColor: `${PREFIX}-contrast-bg-color`
 };
 function getUrlNextLesson(course) {
+    var _a;
     const data = {
         id: course.id,
         slug: course.slug
@@ -61,7 +62,7 @@ function getUrlNextLesson(course) {
         });
         return data;
     }
-    course.sections.some((section) => {
+    (_a = course.sections) === null || _a === void 0 ? void 0 : _a.some((section) => {
         const isNextLessonInThisSection = section.num_lessons_completed < section.num_lessons;
         if (isNextLessonInThisSection) {
             Object.assign(data, {
@@ -74,7 +75,8 @@ function getUrlNextLesson(course) {
     return data;
 }
 function getIsNextLessonLocked(course) {
-    return course.sections.every((section) => {
+    var _a;
+    return (_a = course.sections) === null || _a === void 0 ? void 0 : _a.every((section) => {
         var _a, _b;
         return (section.num_lessons_completed < section.num_lessons &&
             ((_b = (_a = section.lessons) === null || _a === void 0 ? void 0 : _a.find((lesson) => lesson.completion_status === SCCourseLessonCompletionStatusType.UNCOMPLETED)) === null || _b === void 0 ? void 0 : _b.locked));
@@ -97,6 +99,8 @@ function Student(inProps) {
     const [loadingRequest, setLoadingRequest] = useState(false);
     // CONTEXTS
     const scRoutingContext = useSCRouting();
+    const scContext = useSCContext();
+    const scUserContext = useSCUser();
     // HOOKS
     const { scCourse, setSCCourse } = useSCFetchCourse({ id: courseId, course });
     const intl = useIntl();
@@ -138,6 +142,9 @@ function Student(inProps) {
             Logger.error(SCOPE_SC_UI, error);
         });
     }, [scCourse, sentRequest, setLoadingRequest]);
+    const handleAnonymousAction = useCallback(() => {
+        scContext.settings.handleAnonymousAction();
+    }, [scContext.settings.handleAnonymousAction]);
     // MEMOS
     const actionButton = useMemo(() => {
         if (!scCourse) {
@@ -151,7 +158,7 @@ function Student(inProps) {
                             ? BUTTON_MESSAGES.start
                             : scCourse.user_completion_rate === 100
                                 ? BUTTON_MESSAGES.review
-                                : BUTTON_MESSAGES.continue, to: scCourse.join_status !== null ? scRoutingContext.url(SCRoutes.COURSE_LESSON_ROUTE_NAME, getUrlNextLesson(scCourse)) : undefined, disabled: scCourse.join_status !== null ? getIsNextLessonLocked(scCourse) : undefined, color: scCourse.user_completion_rate === 100 ? 'inherit' : undefined, variant: scCourse.user_completion_rate === 100 ? 'outlined' : undefined, loading: scCourse.join_status === null ? loadingRequest : undefined, onClick: scCourse.join_status === null ? handleRequest : undefined })), scCourse.privacy === SCCoursePrivacyType.PRIVATE &&
+                                : BUTTON_MESSAGES.continue, to: scCourse.join_status !== null ? scRoutingContext.url(SCRoutes.COURSE_LESSON_ROUTE_NAME, getUrlNextLesson(scCourse)) : undefined, disabled: scCourse.join_status !== null ? getIsNextLessonLocked(scCourse) : undefined, color: scCourse.user_completion_rate === 100 ? 'inherit' : undefined, variant: scCourse.user_completion_rate === 100 ? 'outlined' : undefined, loading: scCourse.join_status === null ? loadingRequest : undefined, onClick: !scUserContext.user ? handleAnonymousAction : scCourse.join_status === null ? handleRequest : undefined })), scCourse.privacy === SCCoursePrivacyType.PRIVATE &&
                     (scCourse.join_status === null || scCourse.join_status === SCCourseJoinStatusType.REQUESTED) && (_jsx(ActionButton, { labelId: sentRequest ? BUTTON_MESSAGES.cancel : BUTTON_MESSAGES.request, color: "inherit", variant: "outlined", loading: loadingRequest, onClick: handleRequest }))] })));
     }, [scCourse, sentRequest, loadingRequest, handleRequest]);
     if (!scCourse) {

package/lib/esm/components/CourseParticipantsButton/CourseParticipantsButton.js

@@ -69,6 +69,7 @@ export default function CourseParticipantsButton(inProps) {
     const { className, courseId, course, hideCaption = false, DialogProps = {} } = props, rest = __rest(props, ["className", "courseId", "course", "hideCaption", "DialogProps"]);
     // STATE
     const [loading, setLoading] = useState(true);
+    const [count, setCount] = useState(0);
     const [next, setNext] = useState(null);
     const [offset, setOffset] = useState(null);
     const [enrolled, setEnrolled] = useState([]);
@@ -85,17 +86,18 @@ export default function CourseParticipantsButton(inProps) {
         if (!scCourse) {
             return;
         }
-        if (!enrolled.length && participantsAvailable) {
+        if (!count && participantsAvailable) {
             CourseService.getCourseJoinedUsers(scCourse.id, { limit: 3 }).then((res) => {
                 setEnrolled([...res.results]);
                 setOffset(4);
+                setCount(res.count);
                 setLoading(false);
             });
         }
         else {
             setOffset(0);
         }
-    }, [scCourse, participantsAvailable, enrolled]);
+    }, [scCourse, participantsAvailable, count, setEnrolled, setOffset, setLoading]);
     useEffect(() => {
         if (open && offset !== null) {
             setLoading(true);
@@ -106,7 +108,7 @@ export default function CourseParticipantsButton(inProps) {
                 setOffset(null);
             });
         }
-    }, [open, enrolled, offset]);
+    }, [open, enrolled, offset, setLoading, setNext]);
     /**
      * Memoized fetchEnrolledUsers
      */
@@ -125,8 +127,8 @@ export default function CourseParticipantsButton(inProps) {
         })
             .catch((error) => Logger.error(SCOPE_SC_UI, error))
             .then(() => setLoading(false));
-    }, [enrolled, scCourse, next]);
-    const renderSurplus = useCallback(() => numberFormatter(enrolled.length), [enrolled]);
+    }, [enrolled, next, setLoading]);
+    const renderSurplus = useCallback(() => numberFormatter(count), [count]);
     /**
      * Opens participants dialog
      */
@@ -139,7 +141,7 @@ export default function CourseParticipantsButton(inProps) {
     if (!participantsAvailable) {
         return _jsx(HiddenPlaceholder, {});
     }
-    return (_jsxs(_Fragment, { children: [_jsxs(Root, Object.assign({ className: classNames(classes.root, className), onClick: handleToggleDialogOpen, disabled: loading || !scCourse || enrolled.length === 0, 
+    return (_jsxs(_Fragment, { children: [_jsxs(Root, Object.assign({ className: classNames(classes.root, className), onClick: handleToggleDialogOpen, disabled: loading || !scCourse || count === 0, 
                 // @ts-expect-error this is needed to use enrolled into SCCourseParticipantsButton
-                enrolled: enrolled }, rest, { children: [!hideCaption && (_jsxs(Typography, Object.assign({ className: classes.participants }, { children: [_jsx(Icon, { children: "people_alt" }), _jsx(FormattedMessage, { defaultMessage: "ui.courseParticipantsButton.participants", id: "ui.courseParticipantsButton.participants", values: { total: enrolled.length } })] }))), !enrolled.length && (loading || !scCourse) ? (_jsx(AvatarGroupSkeleton, Object.assign({}, rest, (!participantsAvailable && { skeletonsAnimation: false }), { count: 4 }))) : (_jsx(AvatarGroup, Object.assign({ total: enrolled.length, renderSurplus: renderSurplus }, { children: enrolled.map((c) => (_jsx(Avatar, { alt: c.username, src: c.avatar }, c.id))) })))] })), open && (_jsx(DialogRoot, Object.assign({ className: classes.dialogRoot, title: _jsx(FormattedMessage, { defaultMessage: "ui.courseParticipantsButton.dialogTitle", id: "ui.courseParticipantsButton.dialogTitle", values: { total: enrolled.length } }), onClose: handleToggleDialogOpen, open: true }, DialogProps, { children: _jsx(InfiniteScroll, Object.assign({ dataLength: enrolled.length, next: fetchEnrolledUsers, hasMoreNext: next !== null || loading, loaderNext: _jsx(UserSkeleton, { elevation: 0 }), className: classes.infiniteScroll, endMessage: _jsx(Typography, Object.assign({ className: classes.endMessage }, { children: _jsx(FormattedMessage, { id: "ui.courseParticipantsButton.noOtherParticipants", defaultMessage: "ui.courseParticipantsButton.noOtherParticipants" }) })) }, { children: _jsx(List, { children: enrolled.map((e) => (_jsx(ListItem, { children: _jsx(User, { elevation: 0, user: e }) }, e.id))) }) })) })))] }));
+                enrolled: enrolled }, rest, { children: [!hideCaption && (_jsxs(Typography, Object.assign({ className: classes.participants }, { children: [_jsx(Icon, { children: "people_alt" }), _jsx(FormattedMessage, { defaultMessage: "ui.courseParticipantsButton.participants", id: "ui.courseParticipantsButton.participants", values: { total: count } })] }))), !count && (loading || !scCourse) ? (_jsx(AvatarGroupSkeleton, Object.assign({}, rest, (!participantsAvailable && { skeletonsAnimation: false }), { count: 4 }))) : (_jsx(AvatarGroup, Object.assign({ total: count, renderSurplus: renderSurplus }, { children: enrolled.map((c) => (_jsx(Avatar, { alt: c.username, src: c.avatar }, c.id))) })))] })), open && (_jsx(DialogRoot, Object.assign({ className: classes.dialogRoot, title: _jsx(FormattedMessage, { defaultMessage: "ui.courseParticipantsButton.dialogTitle", id: "ui.courseParticipantsButton.dialogTitle", values: { total: count } }), onClose: handleToggleDialogOpen, open: true }, DialogProps, { children: _jsx(InfiniteScroll, Object.assign({ dataLength: count, next: fetchEnrolledUsers, hasMoreNext: next !== null || loading, loaderNext: _jsx(UserSkeleton, { elevation: 0 }), className: classes.infiniteScroll, endMessage: _jsx(Typography, Object.assign({ className: classes.endMessage }, { children: _jsx(FormattedMessage, { id: "ui.courseParticipantsButton.noOtherParticipants", defaultMessage: "ui.courseParticipantsButton.noOtherParticipants" }) })) }, { children: _jsx(List, { children: enrolled.map((e) => (_jsx(ListItem, { children: _jsx(User, { elevation: 0, user: e }) }, e.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/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))) }))] })) })))] }));
 }