@selfcommunity/react-ui 0.11.0-alpha.8 → 0.11.0-alpha.80

package/lib/esm/shared/ContributionActionsMenu/index.js

@@ -1,10 +1,7 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useContext, useMemo, useRef, useState } from 'react';
-import { styled } from '@mui/material/styles';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
-import Popper from '@mui/material/Popper';
-import Icon from '@mui/material/Icon';
 import CentralProgress from '../CentralProgress';
 import { SCOPE_SC_UI } from '../../constants/Errors';
 import { copyTextToClipboard, Logger } from '@selfcommunity/utils';
@@ -12,12 +9,12 @@ import { useSnackbar } from 'notistack';
 import { getContributionRouteName, getRouteData } from '../../utils/contribution';
 import classNames from 'classnames';
 import ConfirmDialog from '../ConfirmDialog/ConfirmDialog';
-import { Badge, Box, CircularProgress, ClickAwayListener, Collapse, Divider, Grow, IconButton, ListItemIcon, ListItemText, MenuItem, MenuList, Paper, SwipeableDrawer, Typography, useMediaQuery, useTheme } from '@mui/material';
+import { Badge, Box, CircularProgress, ClickAwayListener, Collapse, Divider, Grow, IconButton, ListItemIcon, ListItemText, MenuItem, MenuList, Paper, SwipeableDrawer, Typography, useMediaQuery, useTheme, styled, Popper, Icon } from '@mui/material';
 import { MODERATION_CONTRIBUTION_STATE_DELETED, MODERATION_CONTRIBUTION_STATE_HIDDEN, MODERATION_TYPE_ACTION_DELETE, MODERATION_TYPE_ACTION_HIDE, REPORT_AGGRESSIVE, REPORT_OFFTOPIC, REPORT_POORCONTENT, REPORT_SPAM, REPORT_VULGAR, REPORTS } from '../../constants/Flagging';
 import { Endpoints, http } from '@selfcommunity/api-services';
-import { SCContext, SCUserContext, UserUtils, useSCFetchCommentObject, useSCFetchFeedObject, useSCRouting } from '@selfcommunity/react-core';
+import { SCContext, SCPreferences, SCUserContext, UserUtils, useSCFetchCommentObject, useSCFetchFeedObject, useSCPreferences, useSCRouting } from '@selfcommunity/react-core';
 import { SCContributionType } from '@selfcommunity/types';
-import { DELETE_CONTRIBUTION, DELETE_CONTRIBUTION_SECTION, EDIT_CONTRIBUTION, FLAG_CONTRIBUTION_SECTION, GENERAL_SECTION, GET_CONTRIBUTION_PERMALINK, HIDE_CONTRIBUTION_SECTION, MODERATE_CONTRIBUTION_DELETED, MODERATE_CONTRIBUTION_HIDDEN, RESTORE_CONTRIBUTION, SUSPEND_NOTIFICATION_CONTRIBUTION, SUSPEND_NOTIFICATION_EVENT } from '../../constants/ContributionsActionsMenu';
+import { DELETE_CONTRIBUTION, DELETE_CONTRIBUTION_SECTION, EDIT_CONTRIBUTION, FLAG_CONTRIBUTION_SECTION, GENERAL_SECTION, GET_CONTRIBUTION_PERMALINK, HIDE_CONTRIBUTION_SECTION, MODERATE_CONTRIBUTION_DELETED, MODERATE_CONTRIBUTION_HIDDEN, PUBLISH_CONTRIBUTION, RESTORE_CONTRIBUTION, SUSPEND_NOTIFICATION_CONTRIBUTION, SUSPEND_NOTIFICATION_EVENT } from '../../constants/ContributionsActionsMenu';
 const PREFIX = 'SCContributionActionsMenu';
 const classes = {
     root: `${PREFIX}-root`,
@@ -37,12 +34,12 @@ const classes = {
 const PopperRoot = styled(Popper, {
     name: PREFIX,
     slot: 'Root',
-    overridesResolver: (props, styles) => styles.popperRoot
+    overridesResolver: (_props, styles) => styles.popperRoot
 })(() => ({}));
 const Root = styled(Box, {
     name: PREFIX,
     slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
+    overridesResolver: (_props, styles) => styles.root
 })(() => ({}));
 const messages = defineMessages({
     title: {
@@ -76,7 +73,7 @@ const messages = defineMessages({
 });
 export default function ContributionActionsMenu(props) {
     // PROPS
-    const { className, feedObjectId, feedObject, feedObjectType = SCContributionType.POST, commentObjectId, commentObject, onFlagContribution, onEditContribution, onHideContribution, onDeleteContribution, onRestoreContribution, onSuspendNotificationContribution, onSuspendNotificationEvent, PopperProps = {} } = props, rest = __rest(props, ["className", "feedObjectId", "feedObject", "feedObjectType", "commentObjectId", "commentObject", "onFlagContribution", "onEditContribution", "onHideContribution", "onDeleteContribution", "onRestoreContribution", "onSuspendNotificationContribution", "onSuspendNotificationEvent", "PopperProps"]);
+    const { className, feedObjectId, feedObject, feedObjectType = SCContributionType.POST, commentObjectId, commentObject, onFlagContribution, onEditContribution, onHideContribution, onDeleteContribution, onRestoreContribution, onPublishContribution, onSuspendNotificationContribution, onSuspendNotificationEvent, PopperProps = {} } = props, rest = __rest(props, ["className", "feedObjectId", "feedObject", "feedObjectType", "commentObjectId", "commentObject", "onFlagContribution", "onEditContribution", "onHideContribution", "onDeleteContribution", "onRestoreContribution", "onPublishContribution", "onSuspendNotificationContribution", "onSuspendNotificationEvent", "PopperProps"]);
     // INTL
     const intl = useIntl();
     // CONTEXT
@@ -87,6 +84,7 @@ export default function ContributionActionsMenu(props) {
     const scUserId = scUserContext.user ? scUserContext.user.id : null;
     const scRoutingContext = useSCRouting();
     const { enqueueSnackbar } = useSnackbar();
+    const { preferences } = useSCPreferences();
     // CONTRIBUTION STATE
     const { obj: feedObj, setObj: setFeedObj } = useSCFetchFeedObject({ id: feedObjectId, feedObject, feedObjectType });
     const { obj: commentObj, setObj: setCommentObj } = useSCFetchCommentObject({ id: commentObjectId, commentObject });
@@ -110,13 +108,20 @@ export default function ContributionActionsMenu(props) {
     // CONST
     const contributionObj = commentObj ? commentObj : feedObj;
     let popperRef = useRef(null);
+    const scheduledPostsEnabled = useMemo(() => preferences &&
+        SCPreferences.CONFIGURATIONS_SCHEDULED_POSTS_ENABLED in preferences &&
+        preferences[SCPreferences.CONFIGURATIONS_SCHEDULED_POSTS_ENABLED].value, [preferences]);
+    const postOnlyStaffEnabled = useMemo(() => preferences &&
+        SCPreferences.CONFIGURATIONS_POST_ONLY_STAFF_ENABLED in preferences &&
+        preferences[SCPreferences.CONFIGURATIONS_POST_ONLY_STAFF_ENABLED].value, [preferences]);
     /**
      * Intial extra sections to render, in addition to the GENERAL_SECTION
      * @return {array}
      */
     const getExtraSections = useMemo(() => () => {
         let _extra = [];
-        if (scUserContext.user &&
+        if (!postOnlyStaffEnabled &&
+            scUserContext.user &&
             Boolean(contributionObj) &&
             scUserId !== contributionObj.author.id &&
             !contributionObj.deleted &&
@@ -124,13 +129,13 @@ export default function ContributionActionsMenu(props) {
             _extra.push(FLAG_CONTRIBUTION_SECTION);
         }
         // Enable when backend is ready
-        if (UserUtils.isStaff(scUserContext.user)) {
+        if ((!postOnlyStaffEnabled && UserUtils.isAdmin(scUserContext.user)) || UserUtils.isModerator(scUserContext.user)) {
             // admin or moderator
             _extra.push(HIDE_CONTRIBUTION_SECTION);
             _extra.push(DELETE_CONTRIBUTION_SECTION);
         }
         return _extra;
-    }, [contributionObj, scUserId]);
+    }, [postOnlyStaffEnabled, contributionObj, scUserId]);
     /**
      * Extra sections to render in the popup
      */
@@ -335,6 +340,22 @@ export default function ContributionActionsMenu(props) {
             return Promise.resolve(res.data);
         });
     }, [contributionObj]);
+    /**
+     * Perform publish contribution
+     */
+    const performPublishContribution = useMemo(() => () => {
+        return http
+            .request({
+            url: Endpoints.PublishFeedObject.url({ type: contributionObj.type, id: contributionObj.id }),
+            method: Endpoints.PublishFeedObject.method
+        })
+            .then((res) => {
+            if (res.status >= 300) {
+                return Promise.reject(res);
+            }
+            return Promise.resolve(res.data);
+        });
+    }, [contributionObj]);
     /**
      * Fetch initial flag status
      */
@@ -471,6 +492,11 @@ export default function ContributionActionsMenu(props) {
             setOpenConfirmDialog(true);
             handleClose();
         }
+        else if (action === PUBLISH_CONTRIBUTION) {
+            setCurrentAction(PUBLISH_CONTRIBUTION);
+            setOpenConfirmDialog(true);
+            handleClose();
+        }
         else if (action === RESTORE_CONTRIBUTION) {
             setCurrentAction(RESTORE_CONTRIBUTION);
             setOpenConfirmDialog(true);
@@ -560,6 +586,19 @@ export default function ContributionActionsMenu(props) {
                     performPostConfirmAction(false);
                 });
             }
+            else if (currentAction === PUBLISH_CONTRIBUTION) {
+                setCurrentActionLoading(PUBLISH_CONTRIBUTION);
+                performPublishContribution()
+                    .then(() => {
+                    const _contributionObj = Object.assign({}, contributionObj, { deleted: false });
+                    onPublishContribution && onPublishContribution(_contributionObj);
+                    performPostConfirmAction(true);
+                })
+                    .catch((error) => {
+                    Logger.error(SCOPE_SC_UI, error);
+                    performPostConfirmAction(false);
+                });
+            }
             else if (currentAction === MODERATE_CONTRIBUTION_HIDDEN) {
                 setCurrentActionLoading(MODERATE_CONTRIBUTION_HIDDEN);
                 performModerationContribution(MODERATION_TYPE_ACTION_HIDE, hideFlagType)
@@ -683,7 +722,16 @@ export default function ContributionActionsMenu(props) {
      * Can authenticated user delete the contribution
      */
     function canDeleteContribution() {
-        return scUserContext.user && scUserContext.user.id === contributionObj.author.id && !deleteType;
+        return scUserContext.user && scUserContext.user.id === contributionObj.author.id;
+    }
+    /**
+     * Can authenticated user publish the contribution
+     */
+    function canPublishContribution() {
+        const user = scUserContext.user;
+        if (!user || contributionObj.deleted || !scheduledPostsEnabled || !feedObj.draft)
+            return false;
+        return user.id === contributionObj.author.id || (scheduledPostsEnabled && (UserUtils.isAdmin(user) || UserUtils.isModerator(user)));
     }
     /**
      * Can authenticated user suspend notification for the contribution
@@ -709,7 +757,7 @@ export default function ContributionActionsMenu(props) {
      * Renders section general
      */
     function renderGeneralSection() {
-        return (_jsxs(Box, { children: [_jsxs(MenuItem, Object.assign({ className: classes.subItem, disabled: isFlagging }, { children: [_jsx(ListItemIcon, { children: _jsx(Icon, { children: "link" }) }), _jsx(ListItemText, { primary: _jsx(FormattedMessage, { id: "ui.contributionActionMenu.permanentLink", defaultMessage: "ui.contributionActionMenu.permanentLink" }), onClick: () => handleAction(GET_CONTRIBUTION_PERMALINK), classes: { root: classes.itemText } })] })), canModifyContribution() && (_jsxs(MenuItem, Object.assign({ className: classes.subItem, disabled: isFlagging }, { children: [_jsx(ListItemIcon, { children: _jsx(Icon, { children: "edit" }) }), _jsx(ListItemText, { primary: _jsx(FormattedMessage, { id: "ui.contributionActionMenu.editContribution", defaultMessage: "ui.contributionActionMenu.editContribution" }), onClick: () => handleAction(EDIT_CONTRIBUTION), classes: { root: classes.itemText } })] }))), canDeleteContribution() && (_jsxs(MenuItem, Object.assign({ className: classes.subItem, disabled: isFlagging }, { children: [_jsx(ListItemIcon, { children: currentActionLoading === DELETE_CONTRIBUTION || currentActionLoading === RESTORE_CONTRIBUTION ? (_jsx(CircularProgress, { size: 20 })) : (_jsx(Icon, { children: "delete" })) }), contributionObj.deleted ? (_jsx(ListItemText, { primary: _jsx(FormattedMessage, { id: "ui.contributionActionMenu.restoreContribution", defaultMessage: "ui.contributionActionMenu.restoreContribution" }), onClick: () => handleAction(RESTORE_CONTRIBUTION), classes: { root: classes.itemText } })) : (_jsx(ListItemText, { primary: _jsx(FormattedMessage, { id: "ui.contributionActionMenu.deleteContribution", defaultMessage: "ui.contributionActionMenu.deleteContribution" }), onClick: () => handleAction(DELETE_CONTRIBUTION), classes: { root: classes.itemText } }))] }))), canSuspendNotificationContribution() && (_jsxs(MenuItem, Object.assign({ className: classes.subItem, disabled: isFlagging }, { children: [_jsx(ListItemIcon, { children: currentActionLoading === SUSPEND_NOTIFICATION_CONTRIBUTION ? (_jsx(CircularProgress, { size: 20 })) : contributionObj['suspended'] ? (_jsx(Icon, { children: "notifications_active" })) : (_jsx(Icon, { children: "notifications_off" })) }), _jsx(ListItemText, { primary: contributionObj['suspended'] ? (_jsx(FormattedMessage, { id: "ui.contributionActionMenu.enableNotificationContribution", defaultMessage: "ui.contributionActionMenu.enableNotificationContribution" })) : (_jsx(FormattedMessage, { id: "ui.contributionActionMenu.suspendNotificationContribution", defaultMessage: "ui.contributionActionMenu.suspendNotificationContribution" })), onClick: () => handleAction(SUSPEND_NOTIFICATION_CONTRIBUTION), classes: { root: classes.itemText } })] }))), canSuspendNotificationEvent() && (_jsxs(MenuItem, Object.assign({ className: classes.subItem, disabled: isFlagging }, { children: [_jsx(ListItemIcon, { children: currentActionLoading === SUSPEND_NOTIFICATION_EVENT ? (_jsx(CircularProgress, { size: 20 })) : contributionObj.event['show_on_feed'] ? (_jsx(Icon, { children: "notifications_active" })) : (_jsx(Icon, { children: "notifications_off" })) }), _jsx(ListItemText, { primary: !contributionObj.event['show_on_feed'] ? (_jsx(FormattedMessage, { id: "ui.contributionActionMenu.enableNotificationContribution", defaultMessage: "ui.contributionActionMenu.enableNotificationContribution" })) : (_jsx(FormattedMessage, { id: "ui.contributionActionMenu.suspendNotificationContribution", defaultMessage: "ui.contributionActionMenu.suspendNotificationContribution" })), onClick: () => handleAction(SUSPEND_NOTIFICATION_EVENT), classes: { root: classes.itemText } })] })))] }, GENERAL_SECTION));
+        return (_jsxs(Box, { children: [_jsxs(MenuItem, Object.assign({ className: classes.subItem, disabled: isFlagging }, { children: [_jsx(ListItemIcon, { children: _jsx(Icon, { children: "link" }) }), _jsx(ListItemText, { primary: _jsx(FormattedMessage, { id: "ui.contributionActionMenu.permanentLink", defaultMessage: "ui.contributionActionMenu.permanentLink" }), onClick: () => handleAction(GET_CONTRIBUTION_PERMALINK), classes: { root: classes.itemText } })] })), canModifyContribution() && (_jsxs(MenuItem, Object.assign({ className: classes.subItem, disabled: isFlagging }, { children: [_jsx(ListItemIcon, { children: _jsx(Icon, { children: "edit" }) }), _jsx(ListItemText, { primary: _jsx(FormattedMessage, { id: "ui.contributionActionMenu.editContribution", defaultMessage: "ui.contributionActionMenu.editContribution" }), onClick: () => handleAction(EDIT_CONTRIBUTION), classes: { root: classes.itemText } })] }))), canDeleteContribution() && (_jsxs(MenuItem, Object.assign({ className: classes.subItem, disabled: isFlagging }, { children: [_jsx(ListItemIcon, { children: currentActionLoading === DELETE_CONTRIBUTION || currentActionLoading === RESTORE_CONTRIBUTION ? (_jsx(CircularProgress, { size: 20 })) : (_jsx(Icon, { children: "delete" })) }), contributionObj.deleted ? (_jsx(ListItemText, { primary: _jsx(FormattedMessage, { id: "ui.contributionActionMenu.restoreContribution", defaultMessage: "ui.contributionActionMenu.restoreContribution" }), onClick: () => handleAction(RESTORE_CONTRIBUTION), classes: { root: classes.itemText } })) : (_jsx(ListItemText, { primary: _jsx(FormattedMessage, { id: "ui.contributionActionMenu.deleteContribution", defaultMessage: "ui.contributionActionMenu.deleteContribution" }), onClick: () => handleAction(DELETE_CONTRIBUTION), classes: { root: classes.itemText } }))] }))), canPublishContribution() && (_jsxs(MenuItem, Object.assign({ className: classes.subItem, disabled: isFlagging }, { children: [_jsx(ListItemIcon, { children: _jsx(Icon, { children: "upload" }) }), _jsx(ListItemText, { primary: _jsx(FormattedMessage, { id: "ui.contributionActionMenu.publishContribution", defaultMessage: "ui.contributionActionMenu.publishContribution" }), onClick: () => handleAction(PUBLISH_CONTRIBUTION), classes: { root: classes.itemText } })] }))), canSuspendNotificationContribution() && (_jsxs(MenuItem, Object.assign({ className: classes.subItem, disabled: isFlagging }, { children: [_jsx(ListItemIcon, { children: currentActionLoading === SUSPEND_NOTIFICATION_CONTRIBUTION ? (_jsx(CircularProgress, { size: 20 })) : contributionObj['suspended'] ? (_jsx(Icon, { children: "notifications_active" })) : (_jsx(Icon, { children: "notifications_off" })) }), _jsx(ListItemText, { primary: contributionObj['suspended'] ? (_jsx(FormattedMessage, { id: "ui.contributionActionMenu.enableNotificationContribution", defaultMessage: "ui.contributionActionMenu.enableNotificationContribution" })) : (_jsx(FormattedMessage, { id: "ui.contributionActionMenu.suspendNotificationContribution", defaultMessage: "ui.contributionActionMenu.suspendNotificationContribution" })), onClick: () => handleAction(SUSPEND_NOTIFICATION_CONTRIBUTION), classes: { root: classes.itemText } })] }))), canSuspendNotificationEvent() && (_jsxs(MenuItem, Object.assign({ className: classes.subItem, disabled: isFlagging }, { children: [_jsx(ListItemIcon, { children: currentActionLoading === SUSPEND_NOTIFICATION_EVENT ? (_jsx(CircularProgress, { size: 20 })) : contributionObj.event['show_on_feed'] ? (_jsx(Icon, { children: "notifications_active" })) : (_jsx(Icon, { children: "notifications_off" })) }), _jsx(ListItemText, { primary: !contributionObj.event['show_on_feed'] ? (_jsx(FormattedMessage, { id: "ui.contributionActionMenu.enableNotificationContribution", defaultMessage: "ui.contributionActionMenu.enableNotificationContribution" })) : (_jsx(FormattedMessage, { id: "ui.contributionActionMenu.suspendNotificationContribution", defaultMessage: "ui.contributionActionMenu.suspendNotificationContribution" })), onClick: () => handleAction(SUSPEND_NOTIFICATION_EVENT), classes: { root: classes.itemText } })] })))] }, GENERAL_SECTION));
     }
     /**
      * Renders contribution menu content
@@ -732,5 +780,9 @@ export default function ContributionActionsMenu(props) {
                 ? {
                     content: (_jsx(FormattedMessage, { id: "ui.contributionActionMenu.deleteContributionInfo", defaultMessage: "ui.contributionActionMenu.deleteContributionInfo" }))
                 }
-                : {}), { onConfirm: handleConfirmedAction, isUpdating: Boolean(currentActionLoading), onClose: () => setOpenConfirmDialog(false) })))] })));
+                : currentAction === PUBLISH_CONTRIBUTION
+                    ? {
+                        content: (_jsx(FormattedMessage, { id: "ui.contributionActionMenu.publishContributionInfo", defaultMessage: "ui.contributionActionMenu.publishContributionInfo" }))
+                    }
+                    : {}), { onConfirm: handleConfirmedAction, isUpdating: Boolean(currentActionLoading), onClose: () => setOpenConfirmDialog(false) })))] })));
 }

package/lib/esm/shared/CopyTextArea/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { BaseTextFieldProps } from '@mui/material/TextField/TextField';
+import { BaseTextFieldProps } from '@mui/material';
 export interface CopyTextFieldProps extends BaseTextFieldProps {
     className?: string;
     onChange?: (value: string) => void;

package/lib/esm/shared/CopyTextArea/index.js

@@ -1,8 +1,7 @@
 import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useRef, useState } from 'react';
-import { styled } from '@mui/material/styles';
-import { Icon, IconButton, InputAdornment, TextField, Tooltip } from '@mui/material';
+import { styled, Icon, IconButton, InputAdornment, TextField, Tooltip } from '@mui/material';
 import { useThemeProps } from '@mui/system';
 import { FormattedMessage } from 'react-intl';
 import classNames from 'classnames';

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

@@ -0,0 +1,9 @@
+import { SCCourseType } from '@selfcommunity/types';
+import { HTMLAttributes } from 'react';
+export interface CourseTypePopoverProps {
+    course: SCCourseType;
+    className?: HTMLAttributes<HTMLDivElement>['className'];
+}
+declare function CourseTypePopover(props: CourseTypePopoverProps): JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof CourseTypePopover>;
+export default _default;

package/lib/esm/shared/CourseTypePopover/CourseTypePopover.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Button, Icon, Popover, Stack, styled, Typography } from '@mui/material';
+import classNames from 'classnames';
+import { memo, useCallback, useState } from 'react';
+import { FormattedMessage, useIntl } from 'react-intl';
+const PREFIX = 'SCCourseTypePopover';
+const classes = {
+    root: `${PREFIX}-root`,
+    button: `${PREFIX}-button`,
+    contrastColor: `${PREFIX}-contrast-color`
+};
+const Root = styled(Stack, {
+    name: PREFIX,
+    slot: 'Root',
+    overridesResolver: (_props, styles) => styles.root
+})(() => ({}));
+function CourseTypePopover(props) {
+    // PROPS
+    const { course, className } = props;
+    // STATES
+    const [anchorEl, setAnchorEl] = useState(null);
+    const open = Boolean(anchorEl);
+    // INTL
+    const intl = useIntl();
+    // HANDLERS
+    const handleOpenPopover = useCallback((e) => {
+        setAnchorEl(e.currentTarget);
+    }, [setAnchorEl]);
+    const handlePopoverClose = useCallback(() => {
+        setAnchorEl(null);
+    }, [setAnchorEl]);
+    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, classes.contrastColor, className) }, { children: [_jsx(Icon, Object.assign({ fontSize: "small" }, { children: "courses" })), _jsx(Button, Object.assign({ variant: "text", color: "inherit", size: "small", className: classes.button, onClick: handleOpenPopover }, { children: _jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedMessage, { id: "ui.course.type", defaultMessage: "ui.course.type", values: {
+                            typeOfCourse: intl.formatMessage({
+                                id: `ui.course.type.${course.type}`,
+                                defaultMessage: `ui.course.type.${course.type}`
+                            })
+                        } }) })) })), open && (_jsx(Popover, Object.assign({ open: true, anchorEl: anchorEl, anchorOrigin: {
+                    vertical: 'bottom',
+                    horizontal: 'left'
+                }, transformOrigin: {
+                    vertical: 'top',
+                    horizontal: 'left'
+                }, onClose: handlePopoverClose }, { children: _jsx(Box, Object.assign({ sx: { padding: '10px' } }, { children: _jsx(Typography, Object.assign({ component: "span", variant: "body2", sx: { whiteSpace: 'pre-line' } }, { children: _jsx(FormattedMessage, { id: `ui.courseForm.${course.type}.info`, defaultMessage: `ui.courseForm.${course.type}.info` }) })) })) })))] })));
+}
+export default memo(CourseTypePopover);

package/lib/esm/shared/CourseTypePopover/index.d.ts

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

package/lib/esm/shared/CourseTypePopover/index.js

@@ -0,0 +1,2 @@
+import CourseTypePopover from './CourseTypePopover';
+export default CourseTypePopover;

package/lib/esm/shared/CourseUsersTable/ChangeUsersStatus.d.ts

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

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

@@ -0,0 +1,56 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { MenuItem, Select, Typography } from '@mui/material';
+import { memo, useCallback, useEffect, useState } from 'react';
+import { FormattedMessage } from 'react-intl';
+import { LoadingButton } from '@mui/lab';
+import { SCCourseJoinStatusType } from '@selfcommunity/types';
+import { CourseService } from '@selfcommunity/api-services';
+import { Logger } from '@selfcommunity/utils';
+import { SCOPE_SC_UI } from '../../constants/Errors';
+import { useSnackbar } from '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] = useState('');
+    const [loading, setLoading] = useState(false);
+    // CONTEXTS
+    const { enqueueSnackbar } = useSnackbar();
+    // EFFECTS
+    useEffect(() => {
+        setValue(`ui.editCourse.tab.users.table.select.${user.join_status || 'joined'}`);
+    }, [user, setValue]);
+    // HANDLERS
+    const handleChange = useCallback((e) => {
+        setLoading(true);
+        const newValue = e.target.value;
+        const data = {
+            joined: newValue.endsWith(SCCourseJoinStatusType.JOINED) ? [user.id] : undefined,
+            managers: newValue.endsWith(SCCourseJoinStatusType.MANAGER) ? [user.id] : undefined
+        };
+        CourseService.changeCourseUserRole(course.id, data)
+            .then(() => {
+            setValue(newValue);
+            setLoading(false);
+            enqueueSnackbar(_jsx(FormattedMessage, { id: "ui.courseUsersTable.changeStatus.snackbar.success", defaultMessage: "ui.courseUsersTable.changeStatus.snackbar.success" }), {
+                variant: 'success',
+                autoHideDuration: 3000
+            });
+        })
+            .catch((error) => {
+            Logger.error(SCOPE_SC_UI, error);
+            enqueueSnackbar(_jsx(FormattedMessage, { id: "ui.common.error.action", defaultMessage: "ui.common.error.action" }), {
+                variant: 'error',
+                autoHideDuration: 3000
+            });
+        });
+    }, [course, user, setLoading, setValue]);
+    return (_jsx(Select, Object.assign({ size: "small", value: value, onChange: handleChange }, { children: OPTIONS.map((option, i) => (_jsx(MenuItem, Object.assign({ value: option }, { children: _jsx(LoadingButton, Object.assign({ size: "small", color: "inherit", loading: loading, disabled: loading, sx: {
+                    padding: 0,
+                    ':hover': {
+                        backgroundColor: 'unset'
+                    }
+                } }, { children: _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: option, defaultMessage: option }) })) })) }), i))) })));
+}
+export default memo(ChangeUserStatus);

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

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

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

@@ -0,0 +1,152 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Avatar, Box, Icon, IconButton, InputAdornment, LinearProgress, Stack, styled, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TextField, Typography, useThemeProps } from '@mui/material';
+import { memo, useCallback, useEffect, useRef, useState } from 'react';
+import { FormattedDate, FormattedMessage, useIntl } from 'react-intl';
+import RowSkeleton from './RowSkeleton';
+import { LoadingButton } from '@mui/lab';
+import { SCCourseJoinStatusType } from '@selfcommunity/types';
+import { PREFIX } from './constants';
+import EmptyStatus from '../EmptyStatus';
+import SeeProgressButton from './SeeProgressButton';
+import CourseUsersTableSkeleton from './Skeleton';
+import { actionWidgetTypes } from '../../utils/widget';
+import { http } from '@selfcommunity/api-services';
+import { Logger } from '@selfcommunity/utils';
+import { SCOPE_SC_UI } from '../../constants/Errors';
+import ChangeUserStatus from './ChangeUsersStatus';
+import { useSCUser } from '@selfcommunity/react-core';
+import RequestButton from './RequestButton';
+import { SCCourseUsersTableModeType } from '../../types/course';
+import RemoveButton from './RemoveButton';
+import ConfirmDialog from '../ConfirmDialog/ConfirmDialog';
+import { SCCourseEditTabType } from '../../types/course';
+const classes = {
+    root: `${PREFIX}-root`,
+    search: `${PREFIX}-search`,
+    endAdornmentWrapper: `${PREFIX}-end-adornment-wrapper`,
+    searchButton: `${PREFIX}-search-button`,
+    avatarWrapper: `${PREFIX}-avatar-wrapper`,
+    progressWrapper: `${PREFIX}-progress-wrapper`,
+    progress: `${PREFIX}-progress`,
+    loadingButton: `${PREFIX}-loading-button`
+};
+const Root = styled(Box, {
+    name: PREFIX,
+    slot: 'Root',
+    overridesResolver: (_props, styles) => styles.root
+})(() => ({}));
+function CourseUsersTable(inProps) {
+    // PROPS
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX
+    });
+    const { state, dispatch, course, endpointSearch, endpointQueryParamsSearch = { statuses: JSON.stringify([SCCourseJoinStatusType.JOINED, SCCourseJoinStatusType.MANAGER]) }, headerCells, mode, emptyStatusTitle, emptyStatusDescription } = props;
+    // STATES
+    const [users, setUsers] = useState(null);
+    const [loadingSearch, setLoadingSearch] = useState(false);
+    const [value, setValue] = useState('');
+    const [dialog, setDialog] = useState(null);
+    // REFS
+    const buttonRef = useRef(null);
+    const inputRef = useRef(null);
+    // CONTEXTS
+    const scUserContext = useSCUser();
+    // INTL
+    const intl = useIntl();
+    // HANDLERS
+    const handleNext = useCallback(() => {
+        dispatch({ type: actionWidgetTypes.LOADING_NEXT });
+        http
+            .request({
+            url: state.next,
+            method: 'GET'
+        })
+            .then((res) => {
+            dispatch({ type: actionWidgetTypes.LOAD_NEXT_SUCCESS, payload: res.data });
+        })
+            .catch((error) => {
+            dispatch({ type: actionWidgetTypes.LOAD_NEXT_FAILURE, payload: { errorLoadNext: error } });
+            Logger.error(SCOPE_SC_UI, error);
+        });
+    }, [state.next, dispatch]);
+    const handleOpenDialog = useCallback((tab) => {
+        setDialog(tab);
+    }, [setDialog]);
+    const handleConfirm = useCallback(() => {
+        switch (dialog.tab) {
+            case SCCourseEditTabType.USERS:
+                buttonRef.current.handleManageUser(dialog.user);
+                break;
+            case SCCourseEditTabType.REQUESTS:
+                buttonRef.current.handleManageUser(dialog.request);
+        }
+        handleOpenDialog(null);
+    }, [dialog, handleOpenDialog]);
+    const handleSearchClear = useCallback(() => {
+        setUsers(state.results);
+        setValue('');
+    }, [setValue, setUsers, state.results]);
+    const handleChange = useCallback((e) => {
+        const _value = e.target.value;
+        if (_value.length === 0) {
+            handleSearchClear();
+        }
+        else {
+            setValue(_value);
+        }
+    }, [setValue, handleSearchClear]);
+    const handleSearchStart = useCallback(() => {
+        setLoadingSearch(true);
+        http
+            .request({
+            url: endpointSearch.url(),
+            method: endpointSearch.method,
+            params: Object.assign(Object.assign({}, endpointQueryParamsSearch), { search: value })
+        })
+            .then((res) => {
+            setUsers(res.data.results);
+            setLoadingSearch(false);
+        })
+            .catch((error) => {
+            dispatch({ type: actionWidgetTypes.LOAD_NEXT_FAILURE, payload: { errorLoadNext: error } });
+            Logger.error(SCOPE_SC_UI, error);
+        });
+    }, [value, endpointSearch, setUsers, setLoadingSearch, dispatch]);
+    const handleKeyUp = useCallback((e) => {
+        if (value.length > 0 && e.key === 'Enter') {
+            handleSearchStart();
+        }
+    }, [value, handleSearchStart]);
+    // EFFECTS
+    useEffect(() => {
+        setUsers(state.results);
+    }, [state.results, setUsers]);
+    useEffect(() => {
+        var _a;
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('keyup', handleKeyUp);
+        return () => {
+            var _a;
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('keyup', handleKeyUp);
+        };
+    }, [handleKeyUp]);
+    if (!users) {
+        return _jsx(CourseUsersTableSkeleton, {});
+    }
+    return (_jsxs(Root, Object.assign({ className: classes.root }, { children: [_jsx(TextField, { ref: inputRef, placeholder: intl.formatMessage({
+                    id: 'ui.courseUsersTable.searchBar.placeholder',
+                    defaultMessage: 'ui.courseUsersTable.searchBar.placeholder'
+                }), InputProps: {
+                    startAdornment: (_jsx(InputAdornment, Object.assign({ position: "start" }, { children: _jsx(Icon, { children: "search" }) }))),
+                    endAdornment: value.length > 0 ? (_jsxs(Stack, Object.assign({ className: classes.endAdornmentWrapper }, { children: [_jsx(InputAdornment, Object.assign({ position: "start" }, { children: _jsx(IconButton, Object.assign({ color: "inherit", onClick: handleSearchClear }, { children: _jsx(Icon, { children: "close" }) })) })), _jsx(InputAdornment, Object.assign({ position: "end" }, { children: _jsx(LoadingButton, Object.assign({ color: "primary", variant: "contained", onClick: handleSearchStart, loading: loadingSearch, disabled: loadingSearch, className: classes.searchButton }, { children: _jsx(Icon, { children: "search" }) })) }))] }))) : undefined
+                }, value: value, onChange: handleChange, disabled: users.length === 0 && value.length === 0, fullWidth: true, className: classes.search }), _jsx(TableContainer, { children: _jsxs(Table, { children: [_jsx(TableHead, { children: _jsx(TableRow, { children: headerCells.map((cell, i, array) => {
+                                    if (i === array.length - 1) {
+                                        return _jsx(TableCell, { width: "14%" }, i);
+                                    }
+                                    return (_jsx(TableCell, Object.assign({ width: mode === SCCourseUsersTableModeType.DASHBOARD ? '20%' : '25%' }, { children: _jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedMessage, { id: cell.id, defaultMessage: cell.id }) })) }), i));
+                                }) }) }), _jsxs(TableBody, { children: [users.length > 0 &&
+                                    users.map((user, i) => (_jsxs(TableRow, { children: [_jsx(TableCell, { children: _jsxs(Stack, Object.assign({ className: classes.avatarWrapper }, { children: [_jsx(Avatar, { alt: user.username, src: user.avatar }), _jsx(Typography, Object.assign({ variant: "body2" }, { children: user.username }))] })) }), mode === SCCourseUsersTableModeType.DASHBOARD && (_jsx(TableCell, { children: _jsxs(Stack, Object.assign({ className: classes.progressWrapper }, { children: [_jsx(LinearProgress, { className: classes.progress, variant: "determinate", value: user.user_completion_rate }), _jsx(Typography, Object.assign({ variant: "body1" }, { children: `${Math.round(user.user_completion_rate)}%` }))] })) })), mode === SCCourseUsersTableModeType.EDIT && (_jsx(TableCell, { children: user.join_status !== SCCourseJoinStatusType.CREATOR && scUserContext.user.id !== user.id ? (_jsx(ChangeUserStatus, { course: course, user: user })) : (_jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedMessage, { id: `ui.editCourse.tab.users.table.select.${user.join_status}`, defaultMessage: `ui.editCourse.tab.users.table.select.${user.join_status}` }) }))) })), _jsx(TableCell, { children: _jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedDate, { value: mode === SCCourseUsersTableModeType.REQUESTS ? user.date_joined : user.joined_at || new Date() }) })) }), _jsx(TableCell, { children: _jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedDate, { value: mode === SCCourseUsersTableModeType.REQUESTS ? user.date_joined : user.last_active_at || new Date() }) })) }), mode === SCCourseUsersTableModeType.EDIT &&
+                                                user.join_status !== SCCourseJoinStatusType.CREATOR &&
+                                                scUserContext.user.id !== user.id ? (_jsx(TableCell, { children: _jsx(RemoveButton, { ref: buttonRef, course: course, user: user, handleOpenDialog: handleOpenDialog }) })) : (mode === SCCourseUsersTableModeType.EDIT && _jsx(TableCell, {})), mode === SCCourseUsersTableModeType.DASHBOARD && (_jsx(TableCell, { children: _jsx(SeeProgressButton, { course: course, user: user }) })), mode === SCCourseUsersTableModeType.REQUESTS && (_jsx(TableCell, { children: _jsx(RequestButton, { ref: buttonRef, course: course, user: user, handleOpenDialog: handleOpenDialog }) }))] }, i))), state.isLoadingNext && _jsx(RowSkeleton, { editMode: mode !== SCCourseUsersTableModeType.DASHBOARD })] })] }) }), users.length > 0 && (_jsx(LoadingButton, Object.assign({ size: "small", variant: "outlined", color: "inherit", loading: state.isLoadingNext, disabled: value.length > 0 || !state.next, className: classes.loadingButton, onClick: handleNext }, { children: _jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedMessage, { id: "ui.courseUsersTable.btn.label", defaultMessage: "ui.courseUsersTable.btn.label" }) })) }))), users.length === 0 && (_jsx(EmptyStatus, { icon: "face", title: value.length > 0 ? 'ui.courseUsersTable.empty.search.title' : emptyStatusTitle, description: value.length > 0 ? 'ui.courseUsersTable.empty.search.description' : emptyStatusDescription })), dialog && _jsx(ConfirmDialog, { open: true, onClose: () => handleOpenDialog(null), onConfirm: handleConfirm })] })));
+}
+export default memo(CourseUsersTable);

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

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

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

@@ -0,0 +1,48 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { LoadingButton } from '@mui/lab';
+import { Icon } from '@mui/material';
+import { CourseService } from '@selfcommunity/api-services';
+import { forwardRef, memo, useCallback, useImperativeHandle, useState } from 'react';
+import { SCOPE_SC_UI } from '../../constants/Errors';
+import { Logger } from '@selfcommunity/utils';
+import { FormattedMessage } from 'react-intl';
+import { useSnackbar } from 'notistack';
+import PubSub from 'pubsub-js';
+import { SCCourseEventType, SCTopicType } from '../../constants/PubSub';
+import { SCCourseEditTabType } from '../../types/course';
+function RemoveButton(props, ref) {
+    // PROPS
+    const { course, user, handleOpenDialog } = props;
+    // STATES
+    const [loading, setLoading] = useState(false);
+    // HOOKS
+    const { enqueueSnackbar } = useSnackbar();
+    // HANDLERS
+    const handleSubmit = useCallback((userToRemove) => {
+        setLoading(true);
+        const params = {
+            user: userToRemove.id
+        };
+        CourseService.leaveOrRemoveCourseRequest(course.id, params)
+            .then(() => {
+            setLoading(false);
+            PubSub.publish(`${SCTopicType.COURSE}.${SCCourseEventType.REMOVE_MEMBER}`, userToRemove);
+            enqueueSnackbar(_jsx(FormattedMessage, { id: "ui.editCourse.tab.users.table.snackbar.removed", defaultMessage: "ui.editCourse.tab.users.table.snackbar.removed" }), {
+                variant: 'success',
+                autoHideDuration: 3000
+            });
+        })
+            .catch((error) => {
+            Logger.error(SCOPE_SC_UI, error);
+            enqueueSnackbar(_jsx(FormattedMessage, { id: "ui.common.error.action", defaultMessage: "ui.common.error.action" }), {
+                variant: 'error',
+                autoHideDuration: 3000
+            });
+        });
+    }, [course, setLoading]);
+    useImperativeHandle(ref, () => ({
+        handleManageUser: (userToRemove) => handleSubmit(userToRemove)
+    }), [handleSubmit]);
+    return (_jsx(LoadingButton, Object.assign({ size: "small", color: "inherit", variant: "outlined", onClick: () => handleOpenDialog({ tab: SCCourseEditTabType.USERS, user }), loading: loading, disabled: loading }, { children: _jsx(Icon, { children: "close" }) })));
+}
+export default memo(forwardRef(RemoveButton));

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

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