@selfcommunity/react-ui 0.10.2-alpha.8 → 0.10.2-courses.100

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

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const react_1 = require("react");
+const react_intl_1 = require("react-intl");
+const lab_1 = require("@mui/lab");
+const types_1 = require("@selfcommunity/types");
+const api_services_1 = require("@selfcommunity/api-services");
+const utils_1 = require("@selfcommunity/utils");
+const Errors_1 = require("../../constants/Errors");
+const notistack_1 = require("notistack");
+const OPTIONS = ['ui.editCourse.tab.users.table.select.joined', 'ui.editCourse.tab.users.table.select.manager'];
+function ChangeUserStatus(props) {
+    // PROPS
+    const { course, user } = props;
+    // STATES
+    const [value, setValue] = (0, react_1.useState)('');
+    const [loading, setLoading] = (0, react_1.useState)(false);
+    // CONTEXTS
+    const { enqueueSnackbar } = (0, notistack_1.useSnackbar)();
+    // EFFECTS
+    (0, react_1.useEffect)(() => {
+        setValue(`ui.editCourse.tab.users.table.select.${user.join_status}`);
+    }, [user, setValue]);
+    // HANDLERS
+    const handleChange = (0, react_1.useCallback)((e) => {
+        setLoading(true);
+        const newValue = e.target.value;
+        const data = {
+            joined: newValue.endsWith(types_1.SCCourseJoinStatusType.JOINED) ? [user.id] : undefined,
+            managers: newValue.endsWith(types_1.SCCourseJoinStatusType.MANAGER) ? [user.id] : undefined
+        };
+        api_services_1.CourseService.changeCourseUserRole(course.id, data)
+            .then(() => {
+            setValue(newValue);
+            setLoading(false);
+            enqueueSnackbar((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courseUsersTable.changeStatus.snackbar.success", defaultMessage: "ui.courseUsersTable.changeStatus.snackbar.success" }), {
+                variant: 'success',
+                autoHideDuration: 3000
+            });
+        })
+            .catch((error) => {
+            utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
+            enqueueSnackbar((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.common.error.action", defaultMessage: "ui.common.error.action" }), {
+                variant: 'error',
+                autoHideDuration: 3000
+            });
+        });
+    }, [course, user, setLoading, setValue]);
+    return ((0, jsx_runtime_1.jsx)(material_1.Select, Object.assign({ size: "small", value: value, onChange: handleChange }, { children: OPTIONS.map((option, i) => ((0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ value: option }, { children: (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ size: "small", color: "inherit", loading: loading, disabled: loading, sx: {
+                    padding: 0,
+                    ':hover': {
+                        backgroundColor: 'unset'
+                    }
+                } }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: option, defaultMessage: option }) })) })) }), i))) })));
+}
+exports.default = (0, react_1.memo)(ChangeUserStatus);

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

@@ -0,0 +1,17 @@
+import { Dispatch } from 'react';
+import { SCCourseType } from '@selfcommunity/types';
+declare type HeaderCellsType = {
+    id?: string;
+};
+export interface CourseUsersTableProps {
+    state: any;
+    dispatch: Dispatch<any>;
+    course: SCCourseType | null;
+    headerCells: HeaderCellsType[];
+    mode: 'dashboard' | 'edit' | 'requests';
+    emptyStatusTitle: string;
+    emptyStatusDescription?: string;
+}
+declare function CourseUsersTable(inProps: CourseUsersTableProps): JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof CourseUsersTable>;
+export default _default;

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

@@ -0,0 +1,105 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const react_1 = require("react");
+const react_intl_1 = require("react-intl");
+const RowSkeleton_1 = tslib_1.__importDefault(require("./RowSkeleton"));
+const lab_1 = require("@mui/lab");
+const types_1 = require("@selfcommunity/types");
+const constants_1 = require("./constants");
+const EmptyStatus_1 = tslib_1.__importDefault(require("../EmptyStatus"));
+const SeeProgressButton_1 = tslib_1.__importDefault(require("./SeeProgressButton"));
+const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
+const widget_1 = require("../../utils/widget");
+const api_services_1 = require("@selfcommunity/api-services");
+const utils_1 = require("@selfcommunity/utils");
+const Errors_1 = require("../../constants/Errors");
+const ChangeUsersStatus_1 = tslib_1.__importDefault(require("./ChangeUsersStatus"));
+const react_core_1 = require("@selfcommunity/react-core");
+const RequestButton_1 = tslib_1.__importDefault(require("./RequestButton"));
+const classes = {
+    search: `${constants_1.PREFIX}-search`,
+    avatarWrapper: `${constants_1.PREFIX}-avatar-wrapper`,
+    progressWrapper: `${constants_1.PREFIX}-progress-wrapper`,
+    progress: `${constants_1.PREFIX}-progress`,
+    loadingButton: `${constants_1.PREFIX}-loading-button`
+};
+const Root = (0, material_1.styled)(material_1.Box, {
+    name: constants_1.PREFIX,
+    slot: 'Root',
+    overridesResolver: (_props, styles) => styles.root
+})(() => ({}));
+function filteredUsers(users, value) {
+    return users.filter((user) => (user.username || user.real_name).includes(value));
+}
+function CourseUsersTable(inProps) {
+    // PROPS
+    const props = (0, material_1.useThemeProps)({
+        props: inProps,
+        name: constants_1.PREFIX
+    });
+    const { course, state, dispatch, headerCells, mode, emptyStatusTitle, emptyStatusDescription } = props;
+    // STATES
+    const [users, setUsers] = (0, react_1.useState)(null);
+    const [tempUsers, setTempUsers] = (0, react_1.useState)(null);
+    const [value, setValue] = (0, react_1.useState)('');
+    // CONTEXTS
+    const scUserContext = (0, react_core_1.useSCUser)();
+    // HOOKS
+    const intl = (0, react_intl_1.useIntl)();
+    // EFFECTS
+    (0, react_1.useEffect)(() => {
+        setUsers(state.results);
+    }, [state.results]);
+    // HANDLERS
+    const handleChange = (0, react_1.useCallback)((e) => {
+        const _value = e.target.value;
+        if (_value.length > 0) {
+            if (!tempUsers) {
+                setTempUsers(users);
+                setUsers((prevUsers) => filteredUsers(prevUsers, _value));
+            }
+            else {
+                setUsers(filteredUsers(tempUsers, _value));
+            }
+        }
+        else {
+            setUsers(tempUsers);
+            setTempUsers(null);
+        }
+        setValue(_value);
+    }, [users, tempUsers, setValue]);
+    const handleNext = (0, react_1.useCallback)(() => {
+        dispatch({ type: widget_1.actionWidgetTypes.LOADING_NEXT });
+        api_services_1.http
+            .request({
+            url: state.next,
+            method: 'GET'
+        })
+            .then((res) => {
+            dispatch({ type: widget_1.actionWidgetTypes.LOAD_NEXT_SUCCESS, payload: res.data });
+        })
+            .catch((error) => {
+            dispatch({ type: widget_1.actionWidgetTypes.LOAD_NEXT_FAILURE, payload: { errorLoadNext: error } });
+            utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
+        });
+    }, [state.next, dispatch]);
+    if (!course || !users) {
+        return (0, jsx_runtime_1.jsx)(Skeleton_1.default, {});
+    }
+    return ((0, jsx_runtime_1.jsxs)(Root, { children: [(0, jsx_runtime_1.jsx)(material_1.TextField, { placeholder: intl.formatMessage({
+                    id: 'ui.courseUsersTable.searchBar.placeholder',
+                    defaultMessage: 'ui.courseUsersTable.searchBar.placeholder'
+                }), InputProps: {
+                    startAdornment: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "start" }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "search" }) })))
+                }, value: value, onChange: handleChange, disabled: users.length === 0 && value.length === 0, fullWidth: true, className: classes.search }), (0, jsx_runtime_1.jsx)(material_1.TableContainer, { children: (0, jsx_runtime_1.jsxs)(material_1.Table, { children: [(0, jsx_runtime_1.jsx)(material_1.TableHead, { children: (0, jsx_runtime_1.jsx)(material_1.TableRow, { children: headerCells.map((cell, i, array) => {
+                                    if (mode !== 'edit' && i === array.length - 1) {
+                                        return (0, jsx_runtime_1.jsx)(material_1.TableCell, { width: "14%" }, i);
+                                    }
+                                    return ((0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ width: mode === 'dashboard' ? '20%' : '25%' }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: cell.id, defaultMessage: cell.id }) })) }), i));
+                                }) }) }), (0, jsx_runtime_1.jsxs)(material_1.TableBody, { children: [users.length === 0 && (0, jsx_runtime_1.jsx)(RowSkeleton_1.default, { animation: false, editMode: mode !== 'dashboard' }), users.length > 0 &&
+                                    users.map((user, i) => ((0, jsx_runtime_1.jsxs)(material_1.TableRow, { children: [(0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.avatarWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: user.username, src: user.avatar }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: user.username }))] })) }), mode === 'dashboard' && ((0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.progressWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.LinearProgress, { className: classes.progress, variant: "determinate", value: user.user_completion_rate }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: `${Math.round(user.user_completion_rate)}%` }))] })) })), mode === 'edit' && ((0, jsx_runtime_1.jsx)(material_1.TableCell, { children: user.join_status !== types_1.SCCourseJoinStatusType.CREATOR && scUserContext.user.id !== user.id ? ((0, jsx_runtime_1.jsx)(ChangeUsersStatus_1.default, { course: course, user: user })) : ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.editCourse.tab.users.table.select.${user.join_status}`, defaultMessage: `ui.editCourse.tab.users.table.select.${user.join_status}` }) }))) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: new Date(mode === 'requests' ? user.date_joined : user.joined_at).toLocaleDateString() })) }), (0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: new Date(mode === 'requests' ? user.date_joined : user.last_active_at).toLocaleDateString() })) }), mode === 'dashboard' && ((0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsx)(SeeProgressButton_1.default, { course: course, user: user }) })), mode === 'requests' && ((0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsx)(RequestButton_1.default, { course: course, user: user }) }))] }, i))), state.isLoadingNext && (0, jsx_runtime_1.jsx)(RowSkeleton_1.default, { editMode: mode !== 'dashboard' })] })] }) }), users.length > 0 && ((0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ size: "small", variant: "outlined", color: "inherit", loading: state.isLoadingNext, disabled: !state.next, className: classes.loadingButton, onClick: handleNext }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.courseUsersTable.btn.label", defaultMessage: "ui.courseUsersTable.btn.label" }) })) }))), users.length === 0 && value.length === 0 && (0, jsx_runtime_1.jsx)(EmptyStatus_1.default, { icon: "face", title: emptyStatusTitle, description: emptyStatusDescription })] }));
+}
+exports.default = (0, react_1.memo)(CourseUsersTable);

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

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

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

@@ -0,0 +1,75 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const lab_1 = require("@mui/lab");
+const material_1 = require("@mui/material");
+const api_services_1 = require("@selfcommunity/api-services");
+const react_1 = require("react");
+const Errors_1 = require("../../constants/Errors");
+const utils_1 = require("@selfcommunity/utils");
+const react_intl_1 = require("react-intl");
+const notistack_1 = require("notistack");
+const constants_1 = require("./constants");
+const pubsub_js_1 = tslib_1.__importDefault(require("pubsub-js"));
+const PubSub_1 = require("../../constants/PubSub");
+const classes = {
+    requestButtonWrapper: `${constants_1.PREFIX}-request-button-wrapper`
+};
+function RequestButton(props) {
+    // PROPS
+    const { course, user } = props;
+    // STATES
+    const [acceptLoading, setAcceptLoading] = (0, react_1.useState)(false);
+    const [rejectLoading, setRejectLoading] = (0, react_1.useState)(false);
+    // HOOKS
+    const { enqueueSnackbar } = (0, notistack_1.useSnackbar)();
+    // HANDLERS
+    const handleAccept = (0, react_1.useCallback)(() => {
+        setAcceptLoading(true);
+        const data = {
+            users: [user.id]
+        };
+        api_services_1.CourseService.inviteOrAcceptUsersToCourse(course.id, data)
+            .then(() => {
+            setAcceptLoading(false);
+            pubsub_js_1.default.publish(`${PubSub_1.SCTopicType.COURSE}.${PubSub_1.SCGroupEventType.ADD_MEMBER}`, user);
+            pubsub_js_1.default.publish(`${PubSub_1.SCTopicType.COURSE}.${PubSub_1.SCGroupEventType.REMOVE_MEMBER}`, user);
+            enqueueSnackbar((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.editCourse.tab.requests.table.snackbar.accepted", defaultMessage: "ui.editCourse.tab.requests.table.snackbar.accepted" }), {
+                variant: 'success',
+                autoHideDuration: 3000
+            });
+        })
+            .catch((error) => {
+            utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
+            enqueueSnackbar((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.common.error.action", defaultMessage: "ui.common.error.action" }), {
+                variant: 'error',
+                autoHideDuration: 3000
+            });
+        });
+    }, [course, user, setAcceptLoading]);
+    const handleReject = (0, react_1.useCallback)(() => {
+        setRejectLoading(true);
+        const params = {
+            user: user.id
+        };
+        api_services_1.CourseService.leaveOrRemoveCourseRequest(course.id, params)
+            .then(() => {
+            setRejectLoading(false);
+            pubsub_js_1.default.publish(`${PubSub_1.SCTopicType.COURSE}.${PubSub_1.SCGroupEventType.REMOVE_MEMBER}`, user);
+            enqueueSnackbar((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.editCourse.tab.requests.table.snackbar.rejected", defaultMessage: "ui.editCourse.tab.requests.table.snackbar.rejected" }), {
+                variant: 'success',
+                autoHideDuration: 3000
+            });
+        })
+            .catch((error) => {
+            utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
+            enqueueSnackbar((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.common.error.action", defaultMessage: "ui.common.error.action" }), {
+                variant: 'error',
+                autoHideDuration: 3000
+            });
+        });
+    }, [course, user, setRejectLoading]);
+    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.requestButtonWrapper }, { children: [(0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ size: "small", color: "primary", variant: "outlined", onClick: handleAccept, loading: acceptLoading, disabled: acceptLoading }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "check" }) })), (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ size: "small", color: "inherit", variant: "outlined", onClick: handleReject, loading: rejectLoading, disabled: rejectLoading }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) }))] })));
+}
+exports.default = (0, react_1.memo)(RequestButton);

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

@@ -0,0 +1,8 @@
+import { SkeletonOwnProps } from '@mui/material';
+interface CourseUsersTableRowSkeletonProps {
+    header?: boolean;
+    animation?: SkeletonOwnProps['animation'];
+    editMode?: boolean;
+}
+export default function CourseUsersTableRowSkeleton(props: CourseUsersTableRowSkeletonProps): JSX.Element;
+export {};

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

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+function CourseUsersTableRowSkeleton(props) {
+    const { header = false, animation = 'wave', editMode = false } = props;
+    return ((0, jsx_runtime_1.jsx)(material_1.TableRow, { children: Array.from(new Array(editMode ? 4 : 5)).map((_, i, array) => {
+            if (!editMode && i === array.length - 1) {
+                return ((0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ width: "14%" }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: animation, variant: "rounded", width: "139px", height: "29px" }) }), i));
+            }
+            return ((0, jsx_runtime_1.jsxs)(material_1.TableCell, Object.assign({ width: !editMode ? '20%' : '25%' }, { children: [!header && i === 0 && ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", alignItems: "center", gap: "16px" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: animation, variant: "circular", width: "30px", height: "30px" }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: animation, variant: "text", width: "118px", height: "24px" })] }))), ((!header && i > 0) || header) && (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: animation, variant: "text", width: "78px", height: "24px" })] }), i));
+        }) }));
+}
+exports.default = CourseUsersTableRowSkeleton;

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { SCCourseType, SCUserType } from '@selfcommunity/types';
+interface SeeProgressButtonProps {
+    course: SCCourseType;
+    user: SCUserType;
+}
+declare function SeeProgressButton(props: SeeProgressButtonProps): JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof SeeProgressButton>;
+export default _default;

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

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const react_1 = require("react");
+const react_intl_1 = require("react-intl");
+const BaseDialog_1 = tslib_1.__importDefault(require("../BaseDialog"));
+const react_core_1 = require("@selfcommunity/react-core");
+const constants_1 = require("./constants");
+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 classes = {
+    dialogRoot: `${constants_1.PREFIX}-dialog-root`,
+    contentWrapper: `${constants_1.PREFIX}-content-wrapper`,
+    infoOuterWrapper: `${constants_1.PREFIX}-info-outer-wrapper`,
+    infoInnerWrapper: `${constants_1.PREFIX}-info-inner-wrapper`,
+    avatarWrapper: `${constants_1.PREFIX}-avatar-wrapper`,
+    avatar: `${constants_1.PREFIX}-avatar`
+};
+const DialogRoot = (0, material_1.styled)(BaseDialog_1.default, {
+    name: constants_1.PREFIX,
+    slot: 'DialogRoot',
+    overridesResolver: (_props, styles) => styles.dialogRoot
+})(() => ({}));
+function SeeProgressButton(props) {
+    // PROPS
+    const { course, user } = props;
+    // STATES
+    const [open, setOpen] = (0, react_1.useState)(false);
+    const [student, setStudent] = (0, react_1.useState)(null);
+    // CONTEXTS
+    const scRoutingContext = (0, react_core_1.useSCRouting)();
+    // HOOKS
+    const theme = (0, material_1.useTheme)();
+    const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'));
+    // EFFECTS
+    (0, react_1.useEffect)(() => {
+        if (open && !student) {
+            api_services_1.CourseService.getSpecificCourseInfo(course.id, { user: user.id })
+                .then((data) => setStudent(data))
+                .catch((error) => utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error));
+        }
+    }, [open, student, course, user]);
+    // HANDLERS
+    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 })] })) })))] }));
+}
+exports.default = (0, react_1.memo)(SeeProgressButton);

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

@@ -0,0 +1 @@
+export default function CourseUsersTableSkeleton(): JSX.Element;

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

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const RowSkeleton_1 = tslib_1.__importDefault(require("./RowSkeleton"));
+const constants_1 = require("./constants");
+const Root = (0, material_1.styled)(material_1.Box, {
+    name: constants_1.PREFIX,
+    slot: 'SkeletonRoot',
+    overridesResolver: (_props, styles) => styles.skeletonRoot
+})(() => ({}));
+function CourseUsersTableSkeleton() {
+    return ((0, jsx_runtime_1.jsxs)(Root, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "rectangular", width: "100%", height: "53px" }), (0, jsx_runtime_1.jsx)(material_1.TableContainer, { children: (0, jsx_runtime_1.jsxs)(material_1.Table, { children: [(0, jsx_runtime_1.jsx)(material_1.TableHead, { children: (0, jsx_runtime_1.jsx)(RowSkeleton_1.default, { header: true, editMode: true }) }), (0, jsx_runtime_1.jsx)(material_1.TableBody, { children: (0, jsx_runtime_1.jsx)(RowSkeleton_1.default, { editMode: true }) })] }) })] }));
+}
+exports.default = CourseUsersTableSkeleton;

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

@@ -0,0 +1 @@
+export declare const PREFIX = "SCCourseUsersTable";

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

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PREFIX = void 0;
+exports.PREFIX = 'SCCourseUsersTable';

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

@@ -0,0 +1,4 @@
+import CourseUsersTable, { CourseUsersTableProps } from './CourseUsersTable';
+import CourseUsersTableSkeleton from './Skeleton';
+export default CourseUsersTable;
+export { CourseUsersTableProps, CourseUsersTableSkeleton };

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

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CourseUsersTableSkeleton = void 0;
+const tslib_1 = require("tslib");
+const CourseUsersTable_1 = tslib_1.__importDefault(require("./CourseUsersTable"));
+const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
+exports.CourseUsersTableSkeleton = Skeleton_1.default;
+exports.default = CourseUsersTable_1.default;

package/lib/cjs/shared/DateTimeAgo/index.d.ts

@@ -8,7 +8,7 @@ export interface DateTimeAgoProps {
      * Date obj
      * @default null
      */
-    date: Date;
+    date: Date | string;
     /**
      * Handles icon showing
      * @default true

package/lib/cjs/shared/EmptyStatus/EmptyStatus.d.ts

@@ -0,0 +1,11 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export interface EmptyStatusProps {
+    icon: string;
+    title: string;
+    description?: string;
+    actions?: ReactNode;
+    className?: HTMLAttributes<HTMLDivElement>['className'];
+}
+declare function EmptyStatus(props: EmptyStatusProps): JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof EmptyStatus>;
+export default _default;

package/lib/cjs/shared/EmptyStatus/EmptyStatus.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const react_intl_1 = require("react-intl");
+const react_1 = require("react");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const PREFIX = 'SCEmptyStatus';
+const classes = {
+    root: `${PREFIX}-root`,
+    box: `${PREFIX}-box`,
+    rotatedBox: `${PREFIX}-rotated-box`,
+    icon: `${PREFIX}-icon`
+};
+const Root = (0, material_1.styled)(material_1.Stack, {
+    name: PREFIX,
+    slot: 'Root',
+    overridesResolver: (_props, styles) => styles.root
+})(() => ({}));
+function EmptyStatus(props) {
+    // PROPS
+    const { icon, title, description, actions, className } = props;
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, { children: [(0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ className: classes.box }, { children: (0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ className: classes.rotatedBox }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ className: classes.icon, color: "disabled", fontSize: "large" }, { children: icon })) })) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: title, defaultMessage: title }) })), description && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: description, defaultMessage: description }) }))), actions] })));
+}
+exports.default = (0, react_1.memo)(EmptyStatus);

package/lib/cjs/shared/EmptyStatus/index.d.ts

@@ -0,0 +1,3 @@
+import EmptyStatus, { EmptyStatusProps } from './EmptyStatus';
+export default EmptyStatus;
+export { EmptyStatusProps };

package/lib/cjs/shared/EmptyStatus/index.js

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

package/lib/cjs/shared/EventInfoDetails/index.js

@@ -12,6 +12,7 @@ const classes = {
     iconTextWrapper: `${PREFIX}-icon-text-wrapper`,
     inProgress: `${PREFIX}-in-progress`,
     link: `${PREFIX}-link`,
+    joinLive: `${PREFIX}-join-live`,
     url: `${PREFIX}-url`,
     creationWrapper: `${PREFIX}-creation-wrapper`
 };
@@ -29,9 +30,24 @@ function EventInfoDetails(inProps) {
     const { event, eventId, hideDateIcon = false, hideRecurringIcon = false, hidePrivacyIcon = false, hideLocationIcon = false, hideCreatedIcon = false, hasDateInfo = true, hasRecurringInfo = false, hasPrivacyInfo = true, hasLocationInfo = true, hasCreatedInfo = false, hasInProgress = false, beforeDateInfo, beforeRecurringInfo, beforePrivacyInfo, beforeLocationInfo, beforeCreatedInfo } = props;
     // HOOKS
     const intl = (0, react_intl_1.useIntl)();
-    const { scEvent } = (0, react_core_1.useSCFetchEvent)({ id: eventId, event });
+    const { scEvent } = (0, react_core_1.useSCFetchEvent)({ id: eventId, event, autoSubscribe: false });
+    // CONTEXT
+    const scRoutingContext = (0, react_core_1.useSCRouting)();
+    const scUserContext = (0, react_1.useContext)(react_core_1.SCUserContext);
+    const { preferences, features } = (0, react_core_1.useSCPreferences)();
+    const liveStreamEnabled = (0, react_1.useMemo)(() => preferences &&
+        features &&
+        features.includes(types_1.SCFeatureName.LIVE_STREAM) &&
+        react_core_1.SCPreferences.CONFIGURATIONS_LIVE_STREAM_ENABLED in preferences &&
+        preferences[react_core_1.SCPreferences.CONFIGURATIONS_LIVE_STREAM_ENABLED].value, [preferences, features]);
     const privacy = (0, react_1.useMemo)(() => (scEvent && scEvent.privacy === types_1.SCEventPrivacyType.PUBLIC ? 'ui.eventInfoDetails.privacy.public' : 'ui.eventInfoDetails.privacy.private'), [scEvent]);
     const location = (0, react_1.useMemo)(() => scEvent && scEvent.location === types_1.SCEventLocationType.ONLINE ? 'ui.eventInfoDetails.location.virtual' : 'ui.eventInfoDetails.location.inPerson', [scEvent]);
+    const disableJoinEvent = (0, react_1.useMemo)(() => Boolean(!liveStreamEnabled ||
+        !scEvent ||
+        !scUserContext.user ||
+        (scEvent.live_stream &&
+            scEvent.live_stream.host.id !== scUserContext.user.id &&
+            (scEvent.live_stream.closed_at_by_host || (scEvent.live_stream.last_started_at && scEvent.live_stream.last_finished_at)))), [scUserContext.user, scEvent]);
     if (!scEvent) {
         return null;
     }
@@ -43,7 +59,7 @@ function EventInfoDetails(inProps) {
                                         month: 'long'
                                     }),
                                     start: intl.formatDate(scEvent.running ? scEvent.running_start_date : scEvent.next_start_date ? scEvent.next_start_date : scEvent.start_date, { hour: 'numeric', minute: 'numeric' })
-                                } }) })) })), hasInProgress && scEvent.active && scEvent.running && ((0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventInfoDetails.inProgress", defaultMessage: "ui.eventInfoDetails.inProgress" }) }, { children: (0, jsx_runtime_1.jsx)(material_1.Box, { className: classes.inProgress }) })))] }))), beforeRecurringInfo, hasRecurringInfo && scEvent.recurring !== types_1.SCEventRecurrenceType.NEVER && ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.iconTextWrapper }, { children: [!hideRecurringIcon && (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ fontSize: "small" }, { children: "frequency" })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.eventInfoDetails.frequency.${scEvent.recurring}.placeholder`, defaultMessage: `ui.eventInfoDetails.frequency.${scEvent.recurring}.placeholder` }) }))] }))), beforePrivacyInfo, hasPrivacyInfo && ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.iconTextWrapper }, { children: [!hidePrivacyIcon && (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ fontSize: "small" }, { children: scEvent.privacy === types_1.SCEventPrivacyType.PUBLIC ? 'public' : 'private' })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: privacy, defaultMessage: privacy }) })), "-", (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: location, defaultMessage: location }) }))] }))), beforeLocationInfo, hasLocationInfo && ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.iconTextWrapper }, { children: [!hideLocationIcon && ((0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ fontSize: "small" }, { children: scEvent.location === types_1.SCEventLocationType.ONLINE ? 'play_circle_outline' : 'add_location_alt' }))), scEvent.location === types_1.SCEventLocationType.ONLINE ? ((0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scEvent.link, target: "_blank", className: classes.link }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", className: classes.url }, { children: scEvent.link })) }))) : ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", className: classes.url }, { children: scEvent.geolocation })))] }))), beforeCreatedInfo, hasCreatedInfo && ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.creationWrapper }, { children: [!hideCreatedIcon && (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ fontSize: "small" }, { children: "create" })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventInfoDetails.date.create", defaultMessage: "ui.eventInfoDetails.date.create", values: {
+                                } }) })) })), hasInProgress && scEvent.active && scEvent.running && ((0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventInfoDetails.inProgress", defaultMessage: "ui.eventInfoDetails.inProgress" }) }, { children: (0, jsx_runtime_1.jsx)(material_1.Box, { className: classes.inProgress }) })))] }))), beforeRecurringInfo, hasRecurringInfo && scEvent.recurring !== types_1.SCEventRecurrenceType.NEVER && ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.iconTextWrapper }, { children: [!hideRecurringIcon && (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ fontSize: "small" }, { children: "frequency" })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.eventInfoDetails.frequency.${scEvent.recurring}.placeholder`, defaultMessage: `ui.eventInfoDetails.frequency.${scEvent.recurring}.placeholder` }) }))] }))), beforePrivacyInfo, hasPrivacyInfo && ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.iconTextWrapper }, { children: [!hidePrivacyIcon && (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ fontSize: "small" }, { children: scEvent.privacy === types_1.SCEventPrivacyType.PUBLIC ? 'public' : 'private' })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: privacy, defaultMessage: privacy }) })), "-", (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: location, defaultMessage: location }) }))] }))), beforeLocationInfo, hasLocationInfo && ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.iconTextWrapper }, { children: [!hideLocationIcon && ((0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ fontSize: "small" }, { children: scEvent.location === types_1.SCEventLocationType.ONLINE ? 'play_circle_outline' : 'add_location_alt' }))), scEvent.location === types_1.SCEventLocationType.ONLINE ? (scEvent.live_stream ? ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: "contained", color: "secondary", component: react_core_1.Link, disabled: disableJoinEvent, to: scRoutingContext.url(react_core_1.SCRoutes.LIVESTREAM_ROUTE_NAME, scEvent.live_stream), className: classes.joinLive }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.eventInfoDetails.live.join", id: "ui.eventInfoDetails.live.join" }) }))) : ((0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scEvent.link, target: "_blank", className: classes.link }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", className: classes.url }, { children: scEvent.link })) })))) : ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", className: classes.url }, { children: scEvent.geolocation })))] }))), beforeCreatedInfo, hasCreatedInfo && ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.creationWrapper }, { children: [!hideCreatedIcon && (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ fontSize: "small" }, { children: "create" })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventInfoDetails.date.create", defaultMessage: "ui.eventInfoDetails.date.create", values: {
                                 date: intl.formatDate(scEvent.created_at, {
                                     weekday: 'long',
                                     day: 'numeric',

package/lib/cjs/shared/LessonCommentActionsMenu/index.d.ts

@@ -0,0 +1,41 @@
+import { SCCourseCommentType, SCCourseLessonType } from '@selfcommunity/types';
+export interface LessonCommentActionsMenuProps {
+    /**
+     * Overrides or extends the styles applied to the component.
+     * @default null
+     */
+    className?: string;
+    /**
+     * Course Lesson obj
+     * @default null
+     */
+    lesson: SCCourseLessonType;
+    /**
+     * Course CommentObject id
+     * @default null
+     */
+    commentObjectId?: number;
+    /**
+     * Course Comment obj
+     * @default null
+     */
+    commentObject: SCCourseCommentType;
+    /**
+     * Handle edit obj
+     */
+    onEdit?: (obj: SCCourseCommentType) => void;
+    /**
+     * Handle delete obj
+     */
+    onDelete?: (obj: SCCourseCommentType) => void;
+    /**
+     * Props to spread to popper
+     * @default empty object
+     */
+    PopperProps?: any;
+    /**
+     * Any other properties
+     */
+    [p: string]: any;
+}
+export default function LessonCommentActionsMenu(props: LessonCommentActionsMenuProps): JSX.Element;