@selfcommunity/react-ui 0.11.0-alpha.60 → 0.11.0-alpha.62

package/lib/esm/components/LessonReleaseMenu/LessonReleaseMenu.d.ts

@@ -0,0 +1,26 @@
+import { SCCourseSectionType, SCCourseType } from '@selfcommunity/types';
+export interface LessonReleaseMenuProps {
+    /**
+     * The lesson object
+     */
+    section: SCCourseSectionType;
+    /**
+     *
+     */
+    course: SCCourseType;
+    /**
+     * Overrides or extends the styles applied to the component.
+     * @default null
+     */
+    className?: string;
+    /**
+     * onSuccess Callback
+     */
+    onSuccess?: (data: SCCourseSectionType) => void;
+    /**
+     *
+     * Any other properties
+     */
+    [p: string]: any;
+}
+export default function LessonReleaseMenu(inProps: LessonReleaseMenuProps): JSX.Element;

package/lib/esm/components/LessonReleaseMenu/LessonReleaseMenu.js

@@ -0,0 +1,169 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { styled } from '@mui/material/styles';
+import { useThemeProps } from '@mui/system';
+import classNames from 'classnames';
+import { Box, Button, FormControl, FormControlLabel, Icon, IconButton, InputAdornment, Popover, Radio, RadioGroup, TextField, Typography } from '@mui/material';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+import { PREFIX, unitType } from './constants';
+import { DateTimePickerTabs, LocalizationProvider, MobileDateTimePicker } from '@mui/x-date-pickers';
+import { SCCourseTypologyType } from '@selfcommunity/types';
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
+import { useSCContext } from '@selfcommunity/react-core';
+import itLocale from 'date-fns/locale/it';
+import enLocale from 'date-fns/locale/en-US';
+import { CourseService } from '@selfcommunity/api-services';
+import { SCOPE_SC_UI } from '../../constants/Errors';
+import { Logger } from '@selfcommunity/utils';
+import { getDripDelayAndUnit } from '../../utils/course';
+import { useIsDisabled } from '../EditCourse/hooks';
+const messages = defineMessages({
+    pickerPlaceholder: {
+        id: 'ui.lessonReleaseMenu.scheduled.picker.placeholder',
+        defaultMessage: 'ui.lessonReleaseMenu.scheduled.picker.placeholder'
+    },
+    pickerCancelMessage: {
+        id: 'ui.lessonReleaseMenu.scheduled.picker.cancel',
+        defaultMessage: 'ui.lessonReleaseMenu.scheduled.picker.cancel'
+    },
+    pickerClearMessage: {
+        id: 'ui.lessonReleaseMenu.scheduled.picker.clear',
+        defaultMessage: 'ui.lessonReleaseMenu.scheduled.picker.clear'
+    },
+    pickerOkMessage: {
+        id: 'ui.lessonReleaseMenu.scheduled.picker.ok',
+        defaultMessage: 'ui.lessonReleaseMenu.scheduled.picker.ok'
+    }
+});
+const classes = {
+    root: `${PREFIX}-root`,
+    label: `${PREFIX}-label`,
+    picker: `${PREFIX}-picker`,
+    popoverRoot: `${PREFIX}-popover-root`,
+    popoverContent: `${PREFIX}-popover-content`,
+    popoverSelection: `${PREFIX}-popover-selection`,
+    popoverAction: `${PREFIX}-popover-action`
+};
+const Root = styled(FormControl, {
+    name: PREFIX,
+    slot: 'Root',
+    overridesResolver: (_props, styles) => [styles.root]
+})(() => ({}));
+const PopoverRoot = styled(Popover, {
+    name: PREFIX,
+    slot: 'PopoverRoot',
+    overridesResolver: (_props, styles) => styles.popoverRoot
+})(() => ({}));
+export default function LessonReleaseMenu(inProps) {
+    // PROPS
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX
+    });
+    const { className = null, course, section, onSuccess } = props, rest = __rest(props, ["className", "course", "section", "onSuccess"]);
+    // CONTEXT
+    const scContext = useSCContext();
+    // STATE
+    const [drippedAt, setDrippedAt] = useState(null);
+    const { delay, _unit } = getDripDelayAndUnit((section === null || section === void 0 ? void 0 : section.drip_delay) || 0);
+    const [dripDelay, setDripDelay] = useState(delay);
+    const [unit, setUnit] = useState(_unit);
+    const [anchorEl, setAnchorEl] = useState(null);
+    const [open, setOpen] = useState(false);
+    // HOOKS
+    const { isDisabled } = useIsDisabled();
+    //INTL
+    const intl = useIntl();
+    const handleUnitChange = (e) => {
+        setUnit(e.target.value);
+    };
+    // EFFECTS
+    useEffect(() => {
+        if (section && section.dripped_at) {
+            setDrippedAt(new Date(section.dripped_at));
+        }
+        else {
+            setDrippedAt(null);
+        }
+    }, [section, setDrippedAt]);
+    useEffect(() => {
+        if (section) {
+            setDripDelay(delay);
+        }
+    }, [section, setDripDelay]);
+    // HANDLERS
+    const handleClick = (event) => {
+        setAnchorEl(event.currentTarget);
+        setOpen(true);
+    };
+    const handleClose = () => {
+        setOpen(false);
+    };
+    const handleValueChange = (e) => {
+        setDripDelay(e.target.value);
+    };
+    const handleSave = () => {
+        const _delay = unit === unitType.DAYS ? dripDelay : dripDelay * 7;
+        CourseService.patchCourseSection(course.id, section.id, { drip_delay: _delay })
+            .then((data) => {
+            setOpen(false);
+            onSuccess(data);
+        })
+            .catch((e) => {
+            Logger.error(SCOPE_SC_UI, e);
+        });
+    };
+    const handleUpdate = (value) => {
+        CourseService.patchCourseSection(course.id, section.id, { dripped_at: value ? value.toISOString() : null })
+            .then((data) => {
+            setOpen(false);
+            onSuccess(data);
+        })
+            .catch((e) => {
+            Logger.error(SCOPE_SC_UI, e);
+        });
+    };
+    const placeholderStructured = dripDelay > 0
+        ? intl.formatMessage({
+            id: `ui.lessonReleaseMenu.structured.label.${unit}`,
+            defaultMessage: `ui.lessonReleaseMenu.structured.label.${unit}`
+        }, { total: dripDelay })
+        : intl.formatMessage({
+            id: 'ui.lessonReleaseMenu.now.label',
+            defaultMessage: 'ui.lessonReleaseMenu.now.label'
+        });
+    return (_jsx(Root, Object.assign({ className: classNames(className, classes.root) }, rest, { children: course && course.type === SCCourseTypologyType.SCHEDULED ? (_jsx(LocalizationProvider, Object.assign({ dateAdapter: AdapterDateFns, adapterLocale: scContext.settings.locale.default === 'it' ? itLocale : enLocale, localeText: {
+                okButtonLabel: `${intl.formatMessage(messages.pickerOkMessage)}`,
+                cancelButtonLabel: `${intl.formatMessage(messages.pickerCancelMessage)}`,
+                clearButtonLabel: `${intl.formatMessage(messages.pickerClearMessage)}`
+            } }, { children: _jsx(MobileDateTimePicker, { className: classes.picker, disablePast: true, label: drippedAt && (_jsx(FormattedMessage, { id: "ui.lessonReleaseMenu.scheduled.picker.placeholder", defaultMessage: "ui.lessonReleaseMenu.scheduled.picker.placeholder" })), value: drippedAt, slots: {
+                    //actionBar: PickerActionBar,
+                    tabs: (props) => _jsx(DateTimePickerTabs, Object.assign({}, props)),
+                    textField: (params) => (_jsx(TextField, Object.assign({}, params, { error: false, InputProps: Object.assign(Object.assign({}, params.InputProps), { placeholder: `${intl.formatMessage(messages.pickerPlaceholder)}`, endAdornment: (_jsx(InputAdornment, Object.assign({ position: "end" }, { children: _jsx(IconButton, Object.assign({ disabled: isDisabled }, { children: _jsx(Icon, { children: "expand_more" }) })) }))) }) })))
+                }, slotProps: {
+                    tabs: {
+                        hidden: false
+                    },
+                    toolbar: {
+                        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore,@typescript-eslint/ban-ts-comment
+                        // @ts-ignore
+                        toolbarTitle: (_jsx(FormattedMessage, { id: "ui.lessonReleaseMenu.scheduled.picker.placeholder", defaultMessage: "ui.lessonReleaseMenu.scheduled.picker.placeholder" }))
+                    },
+                    actionBar: {
+                        actions: ['cancel', 'clear', 'accept']
+                    }
+                }, onChange: (value) => setDrippedAt(value), onAccept: handleUpdate, onClear: () => setDrippedAt(null), disabled: isDisabled }) }))) : (_jsxs(_Fragment, { children: [_jsx(TextField, { size: "small", value: placeholderStructured, onClick: isDisabled ? undefined : handleClick, InputProps: {
+                        endAdornment: (_jsx(InputAdornment, Object.assign({ position: "end" }, { children: _jsx(IconButton, Object.assign({ onClick: handleClick, disabled: isDisabled }, { children: _jsx(Icon, { children: "expand_more" }) })) })))
+                    }, disabled: isDisabled }), _jsxs(PopoverRoot, Object.assign({ className: classes.popoverRoot, open: open, anchorEl: anchorEl, onClose: handleClose, anchorOrigin: {
+                        vertical: 'bottom',
+                        horizontal: 'left'
+                    }, transformOrigin: {
+                        vertical: 'top',
+                        horizontal: 'left'
+                    } }, { children: [_jsx(Typography, Object.assign({ variant: "h6" }, { children: _jsx(FormattedMessage, { id: "ui.lessonReleaseMenu.dialog.title", defaultMessage: "ui.lessonReleaseMenu.dialog.title" }) })), _jsxs(Box, Object.assign({ className: classes.popoverContent }, { children: [_jsxs(Box, Object.assign({ className: classes.popoverSelection }, { children: [_jsx(TextField, { type: "number", value: dripDelay, onChange: handleValueChange, InputProps: {
+                                                inputProps: {
+                                                    min: 0
+                                                }
+                                            } }), _jsx(FormControl, { children: _jsxs(RadioGroup, Object.assign({ value: unit, onChange: handleUnitChange }, { children: [_jsx(FormControlLabel, { value: unitType.DAYS, control: _jsx(Radio, { size: "small" }), label: _jsx(FormattedMessage, { id: "ui.lessonReleaseMenu.dialog.days", defaultMessage: "ui.lessonReleaseMenu.dialog.days" }) }), _jsx(FormControlLabel, { value: unitType.WEEKS, control: _jsx(Radio, { size: "small" }), label: _jsx(FormattedMessage, { id: "ui.lessonReleaseMenu.dialog.weeks", defaultMessage: "ui.lessonReleaseMenu.dialog.weeks" }) })] })) })] })), _jsx(Typography, Object.assign({ variant: "body1" }, { children: dripDelay > 0 ? (_jsx(FormattedMessage, { id: `ui.lessonReleaseMenu.dialog.info.structured.${unit}`, defaultMessage: `ui.lessonReleaseMenu.dialog.info.structured.${unit}`, values: { total: dripDelay } })) : (_jsx(FormattedMessage, { id: "ui.lessonReleaseMenu.dialog.info.now", defaultMessage: "ui.lessonReleaseMenu.dialog.info.now" })) })), _jsx(Button, Object.assign({ className: classes.popoverAction, variant: "contained", disabled: section.drip_delay === dripDelay, onClick: handleSave }, { children: _jsx(FormattedMessage, { id: "ui.lessonReleaseMenu.dialog.button.done", defaultMessage: "ui.lessonReleaseMenu.dialog.button.done" }) }))] }))] }))] })) })));
+}

package/lib/esm/components/LessonReleaseMenu/constants.d.ts

@@ -0,0 +1,5 @@
+export declare const PREFIX = "SCLessonReleaseMenu";
+export declare enum unitType {
+    DAYS = "days",
+    WEEKS = "weeks"
+}

package/lib/esm/components/LessonReleaseMenu/constants.js

@@ -0,0 +1,6 @@
+export const PREFIX = 'SCLessonReleaseMenu';
+export var unitType;
+(function (unitType) {
+    unitType["DAYS"] = "days";
+    unitType["WEEKS"] = "weeks";
+})(unitType || (unitType = {}));

package/lib/esm/components/LessonReleaseMenu/index.d.ts

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

package/lib/esm/components/LessonReleaseMenu/index.js

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

package/lib/esm/components/NavigationMenuIconButton/DefaultDrawerContent.js

@@ -1,6 +1,6 @@
 import { __rest } from "tslib";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Box, Divider, Icon, List, ListItem, ListItemButton, ListItemIcon, ListItemText, Typography, useMediaQuery, useTheme, Zoom } from '@mui/material';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Divider, Icon, List, ListItem, ListItemButton, ListItemIcon, ListItemText, Typography, Zoom } from '@mui/material';
 import { Link, SCPreferences, SCRoutes, useSCFetchCategories, useSCPreferences, useSCRouting, useSCUser } from '@selfcommunity/react-core';
 import { useEffect, useMemo, useState } from 'react';
 import Category from '../Category';
@@ -10,7 +10,6 @@ import { SCFeatureName } from '@selfcommunity/types';
 import { styled } from '@mui/material/styles';
 import classNames from 'classnames';
 import { useThemeProps } from '@mui/system';
-import DefaultDrawerSkeleton from './DefaultDrawerSkeleton';
 const PREFIX = 'SCDefaultDrawerContent';
 const classes = {
     root: `${PREFIX}-root`,
@@ -30,14 +29,12 @@ export default function DefaultDrawerContent(inProps) {
     });
     const { className, CategoryItemProps = { showTooltip: true } } = props, rest = __rest(props, ["className", "CategoryItemProps"]);
     // HOOKS
-    const { categories, isLoading } = useSCFetchCategories();
+    const { categories } = useSCFetchCategories();
     const [categoriesOrdered, setCategoriesOrdered] = useState([]);
     // ROUTING
     const scRoutingContext = useSCRouting();
     // CONTEXT
     const scUserContext = useSCUser();
-    const theme = useTheme();
-    const isMobile = useMediaQuery(theme.breakpoints.down('md'));
     // PREFERENCES
     const { preferences, features } = useSCPreferences();
     //STATE
@@ -54,6 +51,11 @@ export default function DefaultDrawerContent(inProps) {
         features.includes(SCFeatureName.TAGGING) &&
         SCPreferences.CONFIGURATIONS_EVENTS_ENABLED in preferences &&
         preferences[SCPreferences.CONFIGURATIONS_EVENTS_ENABLED].value, [preferences, features]);
+    const coursesEnabled = useMemo(() => preferences &&
+        features &&
+        features.includes(SCFeatureName.TAGGING) &&
+        SCPreferences.CONFIGURATIONS_COURSES_ENABLED in preferences &&
+        preferences[SCPreferences.CONFIGURATIONS_COURSES_ENABLED].value, [preferences, features]);
     const exploreStreamEnabled = preferences[SCPreferences.CONFIGURATIONS_EXPLORE_STREAM_ENABLED].value;
     const contentAvailable = preferences[SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY].value;
     // HANDLERS
@@ -78,5 +80,5 @@ export default function DefaultDrawerContent(inProps) {
         onTouchMove: mouseLeave
     });
     //order
-    return (_jsxs(Root, Object.assign({ className: classNames(className, classes.root) }, rest, { children: [isMobile && (_jsxs(_Fragment, { children: [_jsxs(List, Object.assign({ className: classes.navigation }, { children: [_jsx(ListItem, Object.assign({ disablePadding: true }, { children: _jsxs(ListItemButton, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.HOME_ROUTE_NAME, {}) }, { children: [_jsx(ListItemIcon, { children: _jsx(Icon, { children: "home" }) }), _jsx(ListItemText, { primary: _jsx(FormattedMessage, { id: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.home", defaultMessage: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.home" }) })] })) })), groupsEnabled && scUserContext.user && (_jsx(ListItem, Object.assign({ disablePadding: true }, { children: _jsxs(ListItemButton, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.GROUPS_ROUTE_NAME, {}) }, { children: [_jsx(ListItemIcon, { children: _jsx(Icon, { children: "groups" }) }), _jsx(ListItemText, { primary: _jsx(FormattedMessage, { id: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.groups", defaultMessage: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.groups" }) })] })) }))), eventsEnabled && (scUserContext.user || contentAvailable) && (_jsx(ListItem, Object.assign({ disablePadding: true }, { children: _jsxs(ListItemButton, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.EVENTS_ROUTE_NAME, {}) }, { children: [_jsx(ListItemIcon, { children: _jsx(Icon, { children: "CalendarIcon" }) }), _jsx(ListItemText, { primary: _jsx(FormattedMessage, { id: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.events", defaultMessage: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.events" }) })] })) }))), exploreStreamEnabled && (contentAvailable || scUserContext.user) && (_jsx(ListItem, Object.assign({ disablePadding: true }, { children: _jsxs(ListItemButton, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.EXPLORE_ROUTE_NAME, {}) }, { children: [_jsx(ListItemIcon, { children: _jsx(Icon, { children: "explore" }) }), _jsx(ListItemText, { primary: _jsx(FormattedMessage, { id: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.explore", defaultMessage: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.explore" }) })] })) })))] })), _jsx(Divider, {})] })), _jsx(Typography, Object.assign({ variant: "subtitle1", className: classes.title }, { children: _jsx(FormattedMessage, { id: "ui.navigationMenuIconButton.defaultDrawerContent.category.title", defaultMessage: "ui.navigationMenuIconButton.defaultDrawerContent.category.title" }) })), isLoading ? (_jsx(DefaultDrawerSkeleton, {})) : (_jsxs(_Fragment, { children: [!categoriesOrdered.length && (_jsx(Typography, Object.assign({ variant: "body1", className: classes.noResults }, { children: _jsx(FormattedMessage, { id: "ui.navigationMenuIconButton.defaultDrawerContent.category.noResults", defaultMessage: "ui.navigationMenuIconButton.defaultDrawerContent.category.noResults" }) }))), categoriesOrdered.map((c, index) => (_jsx(Zoom, Object.assign({ in: true, style: { transform: isHovered[c.id] && 'scale(1.05)' } }, { children: _jsx(ListItem, { children: _jsx(Category, Object.assign({ ButtonBaseProps: { component: Link, to: scRoutingContext.url(SCRoutes.CATEGORY_ROUTE_NAME, c) }, elevation: 0, category: c, actions: null }, CategoryItemProps, getMouseEvents(() => handleMouseEnter(c.id), () => handleMouseLeave(c.id)))) }, c.id) }), index)))] }))] })));
+    return (_jsxs(Root, Object.assign({ className: classNames(className, classes.root) }, rest, { children: [_jsxs(List, Object.assign({ className: classes.navigation }, { children: [scUserContext.user && (_jsx(ListItem, Object.assign({ disablePadding: true }, { children: _jsxs(ListItemButton, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.HOME_ROUTE_NAME, {}) }, { children: [_jsx(ListItemIcon, { children: _jsx(Icon, { children: "home" }) }), _jsx(ListItemText, { primary: _jsx(FormattedMessage, { id: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.home", defaultMessage: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.home" }) })] })) }))), coursesEnabled && (scUserContext.user || contentAvailable) && (_jsx(ListItem, Object.assign({ disablePadding: true }, { children: _jsxs(ListItemButton, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.COURSES_ROUTE_NAME, {}) }, { children: [_jsx(ListItemIcon, { children: _jsx(Icon, { children: "courses" }) }), _jsx(ListItemText, { primary: _jsx(FormattedMessage, { id: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.courses", defaultMessage: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.courses" }) })] })) }))), groupsEnabled && scUserContext.user && (_jsx(ListItem, Object.assign({ disablePadding: true }, { children: _jsxs(ListItemButton, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.GROUPS_ROUTE_NAME, {}) }, { children: [_jsx(ListItemIcon, { children: _jsx(Icon, { children: "groups" }) }), _jsx(ListItemText, { primary: _jsx(FormattedMessage, { id: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.groups", defaultMessage: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.groups" }) })] })) }))), eventsEnabled && (scUserContext.user || contentAvailable) && (_jsx(ListItem, Object.assign({ disablePadding: true }, { children: _jsxs(ListItemButton, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.EVENTS_ROUTE_NAME, {}) }, { children: [_jsx(ListItemIcon, { children: _jsx(Icon, { children: "CalendarIcon" }) }), _jsx(ListItemText, { primary: _jsx(FormattedMessage, { id: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.events", defaultMessage: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.events" }) })] })) }))), exploreStreamEnabled && (contentAvailable || scUserContext.user) && (_jsx(ListItem, Object.assign({ disablePadding: true }, { children: _jsxs(ListItemButton, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.EXPLORE_ROUTE_NAME, {}) }, { children: [_jsx(ListItemIcon, { children: _jsx(Icon, { children: "explore" }) }), _jsx(ListItemText, { primary: _jsx(FormattedMessage, { id: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.explore", defaultMessage: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.explore" }) })] })) })))] })), _jsx(Divider, {}), _jsx(Typography, Object.assign({ variant: "subtitle1", className: classes.title }, { children: _jsx(FormattedMessage, { id: "ui.navigationMenuIconButton.defaultDrawerContent.category.title", defaultMessage: "ui.navigationMenuIconButton.defaultDrawerContent.category.title" }) })), !categoriesOrdered.length && (_jsx(Typography, Object.assign({ variant: "body1", className: classes.noResults }, { children: _jsx(FormattedMessage, { id: "ui.navigationMenuIconButton.defaultDrawerContent.category.noResults", defaultMessage: "ui.navigationMenuIconButton.defaultDrawerContent.category.noResults" }) }))), categoriesOrdered.map((c, index) => (_jsx(Zoom, Object.assign({ in: true, style: { transform: isHovered[c.id] && 'scale(1.05)' } }, { children: _jsx(ListItem, { children: _jsx(Category, Object.assign({ ButtonBaseProps: { component: Link, to: scRoutingContext.url(SCRoutes.CATEGORY_ROUTE_NAME, c) }, elevation: 0, category: c, actions: null }, CategoryItemProps, getMouseEvents(() => handleMouseEnter(c.id), () => handleMouseLeave(c.id)))) }, c.id) }), index)))] })));
 }

package/lib/esm/components/NavigationToolbar/NavigationToolbar.js

@@ -25,6 +25,7 @@ const classes = {
     explore: `${PREFIX}-explore`,
     events: `${PREFIX}-events`,
     groups: `${PREFIX}-groups`,
+    courses: `${PREFIX}-courses`,
     search: `${PREFIX}-search`,
     composer: `${PREFIX}-composer`,
     profile: `${PREFIX}-profile`,
@@ -120,6 +121,11 @@ export default function NavigationToolbar(inProps) {
         scPreferences.features.includes(SCFeatureName.EVENT) &&
         SCPreferences.CONFIGURATIONS_EVENTS_ENABLED in scPreferences.preferences &&
         scPreferences.preferences[SCPreferences.CONFIGURATIONS_EVENTS_ENABLED].value, [scPreferences.preferences, scPreferences.features]);
+    const coursesEnabled = useMemo(() => scPreferences.preferences &&
+        scPreferences.features &&
+        scPreferences.features.includes(SCFeatureName.TAGGING) &&
+        SCPreferences.CONFIGURATIONS_COURSES_ENABLED in scPreferences.preferences &&
+        scPreferences.preferences[SCPreferences.CONFIGURATIONS_COURSES_ENABLED].value, [scPreferences.preferences, scPreferences.features]);
     const showComposer = useMemo(() => {
         return (!disableComposer &&
             (!scPreferences.preferences[SCPreferences.CONFIGURATIONS_POST_ONLY_STAFF_ENABLED].value || UserUtils.isStaff(scUserContext.user)));
@@ -140,7 +146,12 @@ export default function NavigationToolbar(inProps) {
         return _jsx(NavigationToolbarSkeleton, {});
     }
     const _children = children || (_jsxs(Box, Object.assign({ className: classes.navigation }, { children: [scUserContext.user && (_jsx(IconButton, Object.assign({ className: classNames(classes.home, { [classes.active]: value.startsWith(scRoutingContext.url(SCRoutes.HOME_ROUTE_NAME, {})) }), "aria-label": "Home", to: scRoutingContext.url(SCRoutes.HOME_ROUTE_NAME, {}), component: Link }, { children: _jsx(Icon, { children: "home" }) }))), preferences[SCPreferences.CONFIGURATIONS_EXPLORE_STREAM_ENABLED] &&
-                (preferences[SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY] || scUserContext.user) && (_jsx(IconButton, Object.assign({ className: classNames(classes.explore, { [classes.active]: value.startsWith(scRoutingContext.url(SCRoutes.EXPLORE_ROUTE_NAME, {})) }), "aria-label": "Explore", to: scRoutingContext.url(SCRoutes.EXPLORE_ROUTE_NAME, {}), component: Link }, { children: _jsx(Icon, { children: "explore" }) }))), groupsEnabled && scUserContext.user && (_jsx(IconButton, Object.assign({ className: classNames(classes.groups, {
+                (preferences[SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY] || scUserContext.user) &&
+                (!scUserContext.user || (!groupsEnabled && !coursesEnabled && !eventsEnabled)) && (_jsx(IconButton, Object.assign({ className: classNames(classes.explore, {
+                    [classes.active]: value.startsWith(scRoutingContext.url(SCRoutes.EXPLORE_ROUTE_NAME, {}))
+                }), "aria-label": "Explore", to: scRoutingContext.url(SCRoutes.EXPLORE_ROUTE_NAME, {}), component: Link }, { children: _jsx(Icon, { children: "explore" }) }))), coursesEnabled && (scUserContext.user || preferences[SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY]) && (_jsx(IconButton, Object.assign({ className: classNames(classes.courses, {
+                    [classes.active]: value.startsWith(scRoutingContext.url(SCRoutes.COURSES_ROUTE_NAME, {}))
+                }), "aria-label": "Courses", to: scRoutingContext.url(SCRoutes.COURSES_ROUTE_NAME, {}), component: Link }, { children: _jsx(Icon, { children: "courses" }) }))), groupsEnabled && scUserContext.user && (_jsx(IconButton, Object.assign({ className: classNames(classes.groups, {
                     [classes.active]: value.startsWith(scRoutingContext.url(SCRoutes.GROUPS_SUBSCRIBED_ROUTE_NAME, {})) ||
                         value.startsWith(scRoutingContext.url(SCRoutes.GROUPS_ROUTE_NAME, {}))
                 }), "aria-label": "Groups", to: scRoutingContext.url(SCRoutes.GROUPS_SUBSCRIBED_ROUTE_NAME, {}), component: Link }, { children: _jsx(Icon, { children: "groups" }) }))), eventsEnabled && (scUserContext.user || preferences[SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY]) && (_jsx(IconButton, Object.assign({ className: classNames(classes.events, {

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

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

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

@@ -0,0 +1,86 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import { styled } from '@mui/material/styles';
+import { Avatar, Box, Stack, Typography } from '@mui/material';
+import { Link, SCRoutes, useSCRouting } from '@selfcommunity/react-core';
+import { SCNotificationTypologyType } from '@selfcommunity/types';
+import { FormattedMessage } from 'react-intl';
+import DateTimeAgo from '../../../shared/DateTimeAgo';
+import classNames from 'classnames';
+import { SCCourseTemplateType, SCNotificationObjectTemplateType } from '../../../types';
+import NotificationItem from '../../../shared/NotificationItem';
+import { LoadingButton } from '@mui/lab';
+import UserDeletedSnackBar from '../../../shared/UserDeletedSnackBar';
+import UserAvatar from '../../../shared/UserAvatar';
+import { PREFIX } from '../constants';
+import { default as CourseItem } from '../../Course';
+import HiddenPlaceholder from '../../../shared/HiddenPlaceholder';
+import { formatLessonUrl, getRouteName, getRouteParams } from './utils';
+const classes = {
+    root: `${PREFIX}-course-root`,
+    avatar: `${PREFIX}-avatar`,
+    actions: `${PREFIX}-actions`,
+    seeButton: `${PREFIX}see-button`,
+    activeAt: `${PREFIX}-active-at`,
+    snippetTime: `${PREFIX}-snippet-time`,
+    username: `${PREFIX}-username`
+};
+const Root = styled(NotificationItem, {
+    name: PREFIX,
+    slot: 'CourseRoot'
+})(() => ({}));
+/**
+ * This component render the content of the notification of type course
+ * @constructor
+ * @param props
+ */
+export default function CourseNotification(props) {
+    // PROPS
+    const { notificationObject, id = `n_${props.notificationObject['sid']}`, className, template = SCNotificationObjectTemplateType.DETAIL } = props, rest = __rest(props, ["notificationObject", "id", "className", "template"]);
+    // CONTEXT
+    const scRoutingContext = useSCRouting();
+    // STATE
+    const [openAlert, setOpenAlert] = useState(false);
+    // CONST
+    const isSnippetTemplate = template === SCNotificationObjectTemplateType.SNIPPET;
+    const isToastTemplate = template === SCNotificationObjectTemplateType.TOAST;
+    if (!notificationObject.course) {
+        return _jsx(HiddenPlaceholder, {});
+    }
+    // RENDER
+    if (isSnippetTemplate || isToastTemplate) {
+        return (_jsx(Root, Object.assign({ id: id, className: classNames(classes.root, className, `${PREFIX}-${template}`), template: template, isNew: notificationObject.is_new, disableTypography: true, image: _jsx(Link, Object.assign({}, (!notificationObject.user.deleted && {
+                to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, notificationObject.user)
+            }), { onClick: notificationObject.user.deleted ? () => setOpenAlert(true) : null }, { children: _jsx(UserAvatar, Object.assign({ hide: !notificationObject.user.community_badge, smaller: true }, { children: _jsx(Avatar, { alt: notificationObject.user.username, variant: "circular", src: notificationObject.user.avatar, classes: { root: classes.avatar } }) })) })), primary: _jsxs(Box, { children: [_jsx(Link, Object.assign({}, (!notificationObject.user.deleted && {
+                        to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, notificationObject.user)
+                    }), { onClick: notificationObject.user.deleted ? () => setOpenAlert(true) : null, className: classes.username }, { children: notificationObject.user.username })), ' ', _jsx(FormattedMessage, { id: `ui.notification.course.${notificationObject.type}`, defaultMessage: `ui.notification.course.${notificationObject.type}`, values: {
+                            // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                            // @ts-ignore
+                            name: notificationObject.type === SCNotificationTypologyType.USER_COMMENTED_A_COURSE_LESSON
+                                ? notificationObject.comment.lesson_name
+                                : notificationObject.course.name,
+                            link: (...chunks) => (_jsx(Link, Object.assign({ to: scRoutingContext.url(notificationObject.type === SCNotificationTypologyType.USER_COMMENTED_A_COURSE_LESSON
+                                    ? SCRoutes.COURSE_LESSON_ROUTE_NAME
+                                    : SCRoutes.COURSE_ROUTE_NAME, notificationObject.type === SCNotificationTypologyType.USER_COMMENTED_A_COURSE_LESSON
+                                    ? formatLessonUrl(notificationObject)
+                                    : notificationObject.course) }, { children: chunks })))
+                        } })] }), footer: isToastTemplate ? (_jsxs(Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 }, { children: [_jsx(DateTimeAgo, { date: notificationObject.active_at }), _jsx(Typography, Object.assign({ color: "primary" }, { children: _jsx(Link, Object.assign({ to: scRoutingContext.url(getRouteName(notificationObject), getRouteParams(notificationObject)) }, { children: _jsx(FormattedMessage, { id: "ui.notification.course.button.see", defaultMessage: "ui.notification.course.button.see" }) })) }))] }))) : (_jsx(DateTimeAgo, { date: notificationObject.active_at, className: classes.snippetTime })) }, rest)));
+    }
+    return (_jsxs(_Fragment, { children: [_jsx(Root, Object.assign({ id: id, className: classNames(classes.root, className, `${PREFIX}-${template}`), template: template, isNew: notificationObject.is_new, disableTypography: true, image: _jsx(Link, Object.assign({}, (!notificationObject.user.deleted && {
+                    to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, notificationObject.user)
+                }), { onClick: notificationObject.user.deleted ? () => setOpenAlert(true) : null }, { children: _jsx(UserAvatar, Object.assign({ hide: !notificationObject.user.community_badge, smaller: true }, { children: _jsx(Avatar, { className: classes.avatar, alt: notificationObject.user.username, variant: "circular", src: notificationObject.user.avatar }) })) })), primary: _jsxs(_Fragment, { children: [_jsx(Link, Object.assign({}, (!notificationObject.user.deleted && {
+                            to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, notificationObject.user)
+                        }), { onClick: notificationObject.user.deleted ? () => setOpenAlert(true) : null, className: classes.username }, { children: notificationObject.user.username })), ' ', _jsx(FormattedMessage, { id: `ui.notification.course.${notificationObject.type}`, defaultMessage: `ui.notification.course.${notificationObject.type}`, values: {
+                                // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                                // @ts-ignore
+                                name: notificationObject.type === SCNotificationTypologyType.USER_COMMENTED_A_COURSE_LESSON
+                                    ? notificationObject.comment.lesson_name
+                                    : notificationObject.course.name,
+                                link: (...chunks) => (_jsx(Link, Object.assign({ to: scRoutingContext.url(notificationObject.type === SCNotificationTypologyType.USER_COMMENTED_A_COURSE_LESSON
+                                        ? SCRoutes.COURSE_LESSON_ROUTE_NAME
+                                        : SCRoutes.COURSE_ROUTE_NAME, notificationObject.type === SCNotificationTypologyType.USER_COMMENTED_A_COURSE_LESSON
+                                        ? formatLessonUrl(notificationObject)
+                                        : notificationObject.course) }, { children: chunks })))
+                            } }), notificationObject.type === SCNotificationTypologyType.USER_COMMENTED_A_COURSE_LESSON ? (_jsx(Typography, { variant: "body2", dangerouslySetInnerHTML: { __html: notificationObject.comment.html } })) : (_jsx(CourseItem, { course: notificationObject.course, actions: _jsx(_Fragment, {}), template: SCCourseTemplateType.SNIPPET, elevation: 0 }))] }), actions: _jsxs(Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 }, { children: [_jsx(DateTimeAgo, { date: notificationObject.active_at, className: classes.activeAt }), _jsx(LoadingButton, Object.assign({ color: 'primary', variant: "outlined", size: "small", classes: { root: classes.seeButton }, component: Link, to: scRoutingContext.url(getRouteName(notificationObject), getRouteParams(notificationObject)) }, { children: _jsx(FormattedMessage, { id: "ui.notification.course.button.see", defaultMessage: "ui.notification.course.button.see" }) }))] })) }, rest)), openAlert && _jsx(UserDeletedSnackBar, { open: openAlert, handleClose: () => setOpenAlert(false) })] }));
+}

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

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

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

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

package/lib/esm/components/Notification/Course/utils.d.ts

@@ -0,0 +1,5 @@
+import { SCNotificationCourseActivityType } from '@selfcommunity/types';
+declare function formatLessonUrl(notificationObject: SCNotificationCourseActivityType): any;
+declare const getRouteName: (notificationObject: SCNotificationCourseActivityType) => "course_edit" | "course_lesson_comments" | "course";
+declare const getRouteParams: (notificationObject: SCNotificationCourseActivityType) => any;
+export { getRouteName, getRouteParams, formatLessonUrl };

package/lib/esm/components/Notification/Course/utils.js

@@ -0,0 +1,39 @@
+import { SCCourseEditTabType } from '../../../types/course';
+import { SCNotificationTypologyType } from '@selfcommunity/types';
+import { SCRoutes } from '@selfcommunity/react-core';
+function formatLessonUrl(notificationObject) {
+    return {
+        id: notificationObject.course.id,
+        slug: notificationObject.course.slug,
+        section_id: notificationObject.comment.section_id,
+        lesson_id: notificationObject.comment.lesson_id
+    };
+}
+function formatCourseRequestsUrl(notificationObject) {
+    return {
+        id: notificationObject.course.id,
+        slug: notificationObject.course.slug,
+        tab: SCCourseEditTabType.REQUESTS
+    };
+}
+const getRouteName = (notificationObject) => {
+    switch (notificationObject.type) {
+        case SCNotificationTypologyType.USER_COMMENTED_A_COURSE_LESSON:
+            return SCRoutes.COURSE_LESSON_COMMENTS_ROUTE_NAME;
+        case SCNotificationTypologyType.USER_REQUESTED_TO_JOIN_COURSE:
+            return SCRoutes.COURSE_EDIT_ROUTE_NAME;
+        default:
+            return SCRoutes.COURSE_ROUTE_NAME;
+    }
+};
+const getRouteParams = (notificationObject) => {
+    switch (notificationObject.type) {
+        case SCNotificationTypologyType.USER_COMMENTED_A_COURSE_LESSON:
+            return formatLessonUrl(notificationObject);
+        case SCNotificationTypologyType.USER_REQUESTED_TO_JOIN_COURSE:
+            return formatCourseRequestsUrl(notificationObject);
+        default:
+            return notificationObject.course;
+    }
+};
+export { getRouteName, getRouteParams, formatLessonUrl };

package/lib/esm/components/Notification/Notification.js

@@ -37,6 +37,7 @@ import UserDeletedSnackBar from '../../shared/UserDeletedSnackBar';
 import UserAvatar from '../../shared/UserAvatar';
 import { PREFIX } from './constants';
 import GroupNotification from './Group';
+import CourseNotification from './Course';
 const messages = defineMessages({
     receivePrivateMessage: {
         id: 'ui.notification.receivePrivateMessage',
@@ -307,6 +308,14 @@ export default function UserNotification(inProps) {
             n.type === SCNotificationTypologyType.USER_REQUESTED_TO_JOIN_EVENT) {
             return _jsx(EventNotification, { notificationObject: n }, i);
         }
+        else if (n.type === SCNotificationTypologyType.USER_ADDED_TO_COURSE ||
+            n.type === SCNotificationTypologyType.MANAGER_ADDED_TO_COURSE ||
+            n.type === SCNotificationTypologyType.USER_COMMENTED_A_COURSE_LESSON ||
+            n.type === SCNotificationTypologyType.USER_INVITED_TO_JOIN_COURSE ||
+            n.type === SCNotificationTypologyType.USER_ACCEPTED_TO_JOIN_COURSE ||
+            n.type === SCNotificationTypologyType.USER_REQUESTED_TO_JOIN_COURSE) {
+            return _jsx(CourseNotification, { notificationObject: n }, i);
+        }
         else if (n.type === SCNotificationTypologyType.LIVE_STREAM_STARTED) {
             return _jsx(LiveStreamNotification, { notificationObject: n }, i);
         }

package/lib/esm/components/SnippetNotifications/SnippetNotifications.js

@@ -35,6 +35,7 @@ import { PREFIX } from './constants';
 import GroupNotification from '../Notification/Group';
 import EventNotification from '../Notification/Event/Event';
 import LiveStreamNotification from '../Notification/LiveStream';
+import CourseNotification from '../Notification/Course';
 const classes = {
     root: `${PREFIX}-root`,
     notificationsWrap: `${PREFIX}-notifications-wrap`,
@@ -268,6 +269,14 @@ export default function SnippetNotifications(inProps) {
             n.type === SCNotificationTypologyType.USER_REQUESTED_TO_JOIN_EVENT) {
             return _jsx(EventNotification, { notificationObject: n, template: SCNotificationObjectTemplateType.SNIPPET }, i);
         }
+        else if (n.type === SCNotificationTypologyType.USER_ADDED_TO_COURSE ||
+            n.type === SCNotificationTypologyType.MANAGER_ADDED_TO_COURSE ||
+            n.type === SCNotificationTypologyType.USER_COMMENTED_A_COURSE_LESSON ||
+            n.type === SCNotificationTypologyType.USER_INVITED_TO_JOIN_COURSE ||
+            n.type === SCNotificationTypologyType.USER_ACCEPTED_TO_JOIN_COURSE ||
+            n.type === SCNotificationTypologyType.USER_REQUESTED_TO_JOIN_COURSE) {
+            return _jsx(CourseNotification, { notificationObject: n, template: SCNotificationObjectTemplateType.SNIPPET }, i);
+        }
         else if (type === SCNotificationTypologyType.LIVE_STREAM_STARTED) {
             content = _jsx(LiveStreamNotification, { notificationObject: n, template: SCNotificationObjectTemplateType.SNIPPET }, i);
         }

package/lib/esm/components/TagAutocomplete/TagAutocomplete.js

@@ -17,7 +17,7 @@ const classes = {
 const Root = styled(Autocomplete, {
     name: PREFIX,
     slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
+    overridesResolver: (_props, styles) => styles.root
 })(() => ({}));
 /**
  * > API documentation for the Community-JS Tag Autocomplete component. Learn about the available props and the CSS API.
@@ -73,7 +73,7 @@ const TagAutocomplete = (inProps) => {
     const handleClose = () => {
         setOpen(false);
     };
-    const handleChange = (event, newValue) => {
+    const handleChange = (_event, newValue) => {
         setValue(newValue);
     };
     // Render

package/lib/esm/components/ToastNotifications/ToastNotifications.js

@@ -25,6 +25,7 @@ import ContributionNotification from '../Notification/Contribution';
 import GroupNotification from '../Notification/Group';
 import EventNotification from '../Notification/Event/Event';
 import LiveStreamNotification from '../Notification/LiveStream';
+import CourseNotification from '../Notification/Course';
 const Root = styled(Box, {
     name: PREFIX,
     slot: 'Root'
@@ -124,6 +125,14 @@ export default function UserToastNotifications(inProps) {
                 type === SCNotificationTypologyType.USER_REQUESTED_TO_JOIN_EVENT) {
                 content = _jsx(EventNotification, { notificationObject: n.notification_obj, template: SCNotificationObjectTemplateType.TOAST });
             }
+            else if (type === SCNotificationTypologyType.USER_ADDED_TO_COURSE ||
+                type === SCNotificationTypologyType.MANAGER_ADDED_TO_COURSE ||
+                type === SCNotificationTypologyType.USER_COMMENTED_A_COURSE_LESSON ||
+                type === SCNotificationTypologyType.USER_INVITED_TO_JOIN_COURSE ||
+                type === SCNotificationTypologyType.USER_ACCEPTED_TO_JOIN_COURSE ||
+                type === SCNotificationTypologyType.USER_REQUESTED_TO_JOIN_COURSE) {
+                content = _jsx(CourseNotification, { notificationObject: n.notification_obj, template: SCNotificationObjectTemplateType.TOAST });
+            }
             else if (type === SCNotificationTypologyType.LIVE_STREAM_STARTED) {
                 content = _jsx(LiveStreamNotification, { notificationObject: n.notification_obj, template: SCNotificationObjectTemplateType.TOAST });
             }

package/lib/esm/components/UserCreatedCoursesWidget/Skeleton.d.ts

@@ -0,0 +1,21 @@
+/**
+ * > API documentation for the Community-JS User Profile Categories Followed Widget Skeleton component. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {UserCreatedCoursesWidgetSkeleton} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCUserCategoriesFollowedWidget-skeleton-root` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCUserCreatedCoursesWidget-skeleton-root|Styles applied to the root element.|
+ *
+ */
+export default function UserCreatedCoursesWidgetSkeleton(props: any): JSX.Element;