@selfcommunity/react-ui 0.11.0-alpha.9 → 0.11.0-alpha.91

package/lib/esm/components/NavigationToolbarMobile/NavigationToolbarMobile.js

@@ -1,9 +1,8 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Badge, Button, IconButton, styled, Toolbar } from '@mui/material';
+import { Badge, Button, IconButton, styled, Toolbar, Icon } from '@mui/material';
 import { useCallback, useMemo, useState } from 'react';
 import { Link, SCPreferences, SCRoutes, UserUtils, useSCPreferences, useSCRouting, useSCUser } from '@selfcommunity/react-core';
-import Icon from '@mui/material/Icon';
 import { useThemeProps } from '@mui/system';
 import classNames from 'classnames';
 import NavigationToolbarMobileSkeleton from './Skeleton';
@@ -69,7 +68,7 @@ export default function NavigationToolbarMobile(inProps) {
         props: inProps,
         name: PREFIX
     });
-    const { className = '', disableSearch = false, preserveDesktopLogo = false, SearchAutocompleteProps = {}, children = null, startActions = null, endActions = null, NavigationMenuIconButtonComponent = NavigationMenuIconButton, NavigationSettingsIconButtonComponent = NavigationSettingsIconButton, ComposerIconButtonProps = {} } = props, rest = __rest(props, ["className", "disableSearch", "preserveDesktopLogo", "SearchAutocompleteProps", "children", "startActions", "endActions", "NavigationMenuIconButtonComponent", "NavigationSettingsIconButtonComponent", "ComposerIconButtonProps"]);
+    const { className = '', disableSearch = false, preserveDesktopLogo = false, SearchAutocompleteComponentProps = {}, children = null, startActions = null, endActions = null, NavigationMenuIconButtonComponent = NavigationMenuIconButton, NavigationSettingsIconButtonComponent = NavigationSettingsIconButton, ComposerIconButtonProps = {} } = props, rest = __rest(props, ["className", "disableSearch", "preserveDesktopLogo", "SearchAutocompleteComponentProps", "children", "startActions", "endActions", "NavigationMenuIconButtonComponent", "NavigationSettingsIconButtonComponent", "ComposerIconButtonProps"]);
     // CONTEXT
     const scUserContext = useSCUser();
     const scRoutingContext = useSCRouting();
@@ -96,10 +95,10 @@ export default function NavigationToolbarMobile(inProps) {
     // HANDLERS
     const handleOpenSearch = useCallback(() => {
         setSearchOpen(true);
-    }, []);
+    }, [setSearchOpen]);
     const handleCloseSearch = useCallback(() => {
         setSearchOpen(false);
-    }, []);
+    }, [setSearchOpen]);
     // RENDER
     if (scUserContext.loading) {
         return _jsx(NavigationToolbarMobileSkeleton, {});
@@ -107,7 +106,7 @@ export default function NavigationToolbarMobile(inProps) {
     const _children = children || (_jsxs(_Fragment, { children: [_jsx(NavigationMenuIconButtonComponent, {}), _jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.HOME_ROUTE_NAME, {}), className: classNames(className, classes.logo, {
                     [classes.logoFlex]: preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_URL].value
                 }) }, { children: !preserveDesktopLogo ? (_jsx("img", { src: preferences[SCPreferences.LOGO_NAVBAR_LOGO_MOBILE].value, alt: "logo" })) : (_jsx("img", { src: preferences[SCPreferences.LOGO_NAVBAR_LOGO].value, alt: "logo" })) })), preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_ENABLED].value && (_jsx(Link, Object.assign({ target: "blank", to: preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_URL].value, className: classes.customItem }, { children: _jsx("img", { src: preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_IMAGE].value, alt: "custom_item" }) })))] }));
-    return (_jsxs(Root, Object.assign({ className: classNames(className, classes.root) }, rest, { children: [_children, startActions, (contentAvailable || scUserContext.user) && !disableSearch && (_jsxs(_Fragment, { children: [_jsx(IconButton, Object.assign({ className: classes.search, onClick: handleOpenSearch }, { children: _jsx(Icon, { children: "search" }) })), _jsx(SearchDialog, { className: classes.searchDialog, fullScreen: true, open: searchOpen, SearchAutocompleteProps: Object.assign(Object.assign({}, SearchAutocompleteProps), { onClear: handleCloseSearch }) })] })), endActions, (!postOnlyStaffEnabled || (UserUtils.isStaff(scUserContext.user) && postOnlyStaffEnabled)) &&
+    return (_jsxs(Root, Object.assign({ className: classNames(className, classes.root) }, rest, { children: [_children, startActions, (contentAvailable || scUserContext.user) && !disableSearch && (_jsxs(_Fragment, { children: [_jsx(IconButton, Object.assign({ className: classes.search, onClick: handleOpenSearch }, { children: _jsx(Icon, { children: "search" }) })), _jsx(SearchDialog, { className: classes.searchDialog, fullScreen: true, open: searchOpen, SearchAutocompleteComponentProps: Object.assign(Object.assign({}, SearchAutocompleteComponentProps), { onClear: handleCloseSearch }) })] })), endActions, (!postOnlyStaffEnabled || UserUtils.isStaff(scUserContext.user) || UserUtils.isPublisher(scUserContext.user)) &&
                 (scUserContext.user || contentAvailable) &&
                 exploreStreamEnabled && _jsx(ComposerIconButton, Object.assign({}, ComposerIconButtonProps)), scUserContext.user && (groupsEnabled || eventsEnabled) && (_jsx(IconButton, Object.assign({ className: classes.notifications, component: Link, to: scRoutingContext.url(SCRoutes.USER_NOTIFICATIONS_ROUTE_NAME, {}) }, { children: _jsx(Badge, Object.assign({ badgeContent: scUserContext.user.unseen_notification_banners_counter + scUserContext.user.unseen_interactions_counter, color: "secondary" }, { children: _jsx(Icon, { children: "notifications_active" }) })) }))), scUserContext.user ? (_jsx(NavigationSettingsIconButtonComponent, { className: classes.settings })) : (_jsx(Button, Object.assign({ className: classes.login, color: "inherit", component: Link, to: scRoutingContext.url(SCRoutes.SIGNIN_ROUTE_NAME, {}) }, { children: _jsx(FormattedMessage, { id: "ui.appBar.navigation.login", defaultMessage: "ui.appBar.navigation.login" }) })))] })));
 }

package/lib/esm/components/NavigationToolbarMobile/Skeleton.js

@@ -1,7 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Toolbar } from '@mui/material';
-import { styled } from '@mui/material/styles';
-import Skeleton from '@mui/material/Skeleton';
+import { Toolbar, styled, Skeleton } from '@mui/material';
 import { PREFIX } from './constants';
 const classes = {
     root: `${PREFIX}-skeleton-root`,

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

@@ -1,8 +1,6 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { styled } from '@mui/material/styles';
-import { Avatar, Box, Stack, Typography } from '@mui/material';
-import Icon from '@mui/material/Icon';
+import { Avatar, Box, Stack, Typography, styled, Icon } from '@mui/material';
 import { camelCase } from '@selfcommunity/utils';
 import { Link, useSCRouting, SCRoutes } from '@selfcommunity/react-core';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';

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

@@ -1,8 +1,7 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useState } from 'react';
-import { styled } from '@mui/material/styles';
-import { Avatar, Stack, Typography } from '@mui/material';
+import { Avatar, Stack, Typography, styled } from '@mui/material';
 import { Link, SCRoutes, useSCRouting } from '@selfcommunity/react-core';
 import { SCContributionType, SCNotificationTypologyType } from '@selfcommunity/types';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';

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

@@ -1,8 +1,7 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useState } from 'react';
-import { styled } from '@mui/material/styles';
-import { Avatar, Stack, Typography } from '@mui/material';
+import { Avatar, Stack, Typography, styled } from '@mui/material';
 import { SCContributionType } from '@selfcommunity/types';
 import { Link, SCRoutes, useSCRouting } from '@selfcommunity/react-core';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';

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

@@ -1,8 +1,7 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React, { useState } from 'react';
-import { styled } from '@mui/material/styles';
-import { Avatar, Stack, Typography } from '@mui/material';
+import { Avatar, Stack, Typography, styled } from '@mui/material';
 import { Link, SCRoutes, useSCRouting } from '@selfcommunity/react-core';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import DateTimeAgo from '../../../shared/DateTimeAgo';

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,85 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Avatar, Box, Stack, Typography, styled } 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/DeletedFor/DeletedFor.js

@@ -1,8 +1,6 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { styled } from '@mui/material/styles';
-import { Avatar, Box, Stack, Typography } from '@mui/material';
-import Icon from '@mui/material/Icon';
+import { Avatar, Box, Stack, Typography, styled, Icon } from '@mui/material';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { getContributionType, getContributionSnippet, getRouteData } from '../../../utils/contribution';
 import DateTimeAgo from '../../../shared/DateTimeAgo';

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

@@ -1,10 +1,9 @@
 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, Icon, Stack, Typography } from '@mui/material';
+import { Avatar, Box, Icon, Stack, Typography, styled } from '@mui/material';
 import { Link, SCRoutes, useSCRouting } from '@selfcommunity/react-core';
-import { SCEventLocationType } from '@selfcommunity/types';
+import { SCEventLocationType, SCEventSubscriptionStatusType, SCNotificationTypologyType } from '@selfcommunity/types';
 import { FormattedMessage, useIntl } from 'react-intl';
 import DateTimeAgo from '../../../shared/DateTimeAgo';
 import classNames from 'classnames';
@@ -15,6 +14,7 @@ import UserDeletedSnackBar from '../../../shared/UserDeletedSnackBar';
 import UserAvatar from '../../../shared/UserAvatar';
 import { PREFIX } from '../constants';
 import { default as EventItem } from '../../Event';
+import { EventService } from '@selfcommunity/api-services';
 const classes = {
     root: `${PREFIX}-event-root`,
     avatar: `${PREFIX}-avatar`,
@@ -40,10 +40,20 @@ export default function EventNotification(props) {
     const scRoutingContext = useSCRouting();
     // STATE
     const [openAlert, setOpenAlert] = useState(false);
+    const [loading, setLoading] = useState(false);
+    const [disabled, setDisabled] = useState(notificationObject.event.subscription_status !== SCEventSubscriptionStatusType.REQUESTED);
     // CONST
     const isSnippetTemplate = template === SCNotificationObjectTemplateType.SNIPPET;
     const isToastTemplate = template === SCNotificationObjectTemplateType.TOAST;
     const intl = useIntl();
+    //HANDLERS
+    const acceptRequest = (event) => {
+        setLoading(true);
+        EventService.inviteOrAcceptEventRequest(event.id, { users: [notificationObject.user.id] }).then(() => {
+            setLoading(false);
+            setDisabled(true);
+        });
+    };
     // 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 && {
@@ -64,7 +74,7 @@ export default function EventNotification(props) {
                                     month: 'long'
                                 }),
                                 hour: intl.formatDate(notificationObject.event.start_date, { hour: 'numeric', minute: 'numeric' })
-                            } }) })), _jsxs(Typography, Object.assign({ component: "p", variant: "body2" }, { children: [_jsx(FormattedMessage, { id: `ui.notification.event.privacy.${notificationObject.event.privacy}`, defaultMessage: `ui.notification.event.privacy.${notificationObject.event.privacy}` }), ' ', "-", ' ', notificationObject.event.location === SCEventLocationType.PERSON ? (_jsx(FormattedMessage, { id: `ui.notification.event.address.live.label`, defaultMessage: `ui.notification.event.address.live.label` })) : (_jsx(FormattedMessage, { id: `ui.notification.event.address.online.label`, defaultMessage: `ui.notification.event.address.online.label` }))] }))] }), 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(SCRoutes.EVENT_ROUTE_NAME, notificationObject.event) }, { children: _jsx(FormattedMessage, { id: "ui.notification.event.button.see", defaultMessage: "ui.notification.event.button.see" }) })) }))] }))) : (_jsx(DateTimeAgo, { date: notificationObject.active_at, className: classes.snippetTime })) }, rest)));
+                            } }) })), _jsxs(Typography, Object.assign({ component: "p", variant: "body2" }, { children: [_jsx(FormattedMessage, { id: `ui.notification.event.privacy.${notificationObject.event.privacy}`, defaultMessage: `ui.notification.event.privacy.${notificationObject.event.privacy}` }), ' ', "-", ' ', notificationObject.event.location === SCEventLocationType.PERSON ? (_jsx(FormattedMessage, { id: `ui.notification.event.address.live.label`, defaultMessage: `ui.notification.event.address.live.label` })) : (_jsx(FormattedMessage, { id: `ui.notification.event.address.online.label`, defaultMessage: `ui.notification.event.address.online.label` }))] }))] }), 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: notificationObject.type === SCNotificationTypologyType.USER_REQUESTED_TO_JOIN_EVENT ? (_jsx(LoadingButton, Object.assign({ disabled: disabled, loading: loading, color: 'primary', variant: "text", size: "small", onClick: () => acceptRequest(notificationObject.event) }, { children: disabled ? (_jsx(FormattedMessage, { id: "ui.notification.event.button.accepted", defaultMessage: "ui.notification.event.button.accepted" })) : (_jsx(FormattedMessage, { id: "ui.notification.event.button.accept", defaultMessage: "ui.notification.event.button.accept" })) }))) : (_jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, notificationObject.event) }, { children: _jsx(FormattedMessage, { id: "ui.notification.event.button.see", defaultMessage: "ui.notification.event.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)
@@ -76,5 +86,12 @@ export default function EventNotification(props) {
                                 icon: (...chunks) => _jsx(Icon, { children: chunks }),
                                 event: notificationObject.event.name,
                                 link: (...chunks) => _jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, notificationObject.event) }, { children: chunks }))
-                            } }), _jsx(EventItem, { event: notificationObject.event, actions: _jsx(_Fragment, {}), 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(SCRoutes.EVENT_ROUTE_NAME, notificationObject.event) }, { children: _jsx(FormattedMessage, { id: "ui.notification.event.button.see", defaultMessage: "ui.notification.event.button.see" }) }))] })) }, rest)), openAlert && _jsx(UserDeletedSnackBar, { open: openAlert, handleClose: () => setOpenAlert(false) })] }));
+                            } }), _jsx(EventItem, { event: notificationObject.event, actions: _jsx(_Fragment, {}), 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({}, (notificationObject.type === SCNotificationTypologyType.USER_REQUESTED_TO_JOIN_EVENT && {
+                            disabled: disabled
+                        }), { loading: loading, color: 'primary', variant: "outlined", size: "small", classes: { root: classes.seeButton } }, (notificationObject.type !== SCNotificationTypologyType.USER_REQUESTED_TO_JOIN_EVENT && {
+                            component: Link,
+                            to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, notificationObject.event)
+                        }), { onClick: notificationObject.type === SCNotificationTypologyType.USER_REQUESTED_TO_JOIN_EVENT
+                                ? () => acceptRequest(notificationObject.event)
+                                : null }, { children: notificationObject.type === SCNotificationTypologyType.USER_REQUESTED_TO_JOIN_EVENT ? (_jsx(_Fragment, { children: disabled ? (_jsx(FormattedMessage, { id: "ui.notification.event.button.accepted", defaultMessage: "ui.notification.event.button.accepted" })) : (_jsx(FormattedMessage, { id: "ui.notification.event.button.accept", defaultMessage: "ui.notification.event.button.accept" })) })) : (_jsx(FormattedMessage, { id: "ui.notification.event.button.see", defaultMessage: "ui.notification.event.button.see" })) }))] })) }, rest)), openAlert && _jsx(UserDeletedSnackBar, { open: openAlert, handleClose: () => setOpenAlert(false) })] }));
 }

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

@@ -1,8 +1,7 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useContext, useEffect, useState } from 'react';
-import { styled } from '@mui/material/styles';
-import { Avatar, Box, Stack, Typography } from '@mui/material';
+import { Avatar, Box, Stack, Typography, styled } from '@mui/material';
 import { Link, SCRoutes, SCUserContext, useSCRouting } from '@selfcommunity/react-core';
 import { SCGroupSubscriptionStatusType, SCNotificationTypologyType } from '@selfcommunity/types';
 import { FormattedMessage } from 'react-intl';

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

@@ -1,7 +1,6 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { styled } from '@mui/material/styles';
-import { Avatar, Button, Stack, Typography } from '@mui/material';
+import { Avatar, Button, Stack, Typography, styled } from '@mui/material';
 import { Link, useSCRouting, SCRoutes } from '@selfcommunity/react-core';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import DateTimeAgo from '../../../shared/DateTimeAgo';

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

@@ -1,8 +1,6 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { styled } from '@mui/material/styles';
-import { Avatar, Box, Typography } from '@mui/material';
-import Icon from '@mui/material/Icon';
+import { Avatar, Box, Typography, styled, Icon } from '@mui/material';
 import { Link, useSCRouting, SCRoutes } from '@selfcommunity/react-core';
 import { camelCase } from '@selfcommunity/utils';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';

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

@@ -1,8 +1,6 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { styled } from '@mui/material/styles';
-import { Avatar, Box, Stack, Typography } from '@mui/material';
-import Icon from '@mui/material/Icon';
+import { Avatar, Box, Stack, Typography, styled, Icon } from '@mui/material';
 import { camelCase } from '@selfcommunity/utils';
 import { Link, useSCRouting, SCRoutes } from '@selfcommunity/react-core';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';

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

@@ -1,8 +1,7 @@
 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, Icon, Stack, Typography } from '@mui/material';
+import { Avatar, Box, Icon, Stack, Typography, styled } from '@mui/material';
 import { Link, SCRoutes, useSCRouting } from '@selfcommunity/react-core';
 import { FormattedMessage } from 'react-intl';
 import DateTimeAgo from '../../../shared/DateTimeAgo';

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

@@ -1,8 +1,7 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React, { useState } from 'react';
-import { styled } from '@mui/material/styles';
-import { Avatar, Box, Stack, Typography } from '@mui/material';
+import { Avatar, Box, Stack, Typography, styled } from '@mui/material';
 import { Link, SCRoutes, useSCRouting } from '@selfcommunity/react-core';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { getRouteData, getContributionType, getContributionSnippet, getContribution } from '../../../utils/contribution';

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

@@ -4,7 +4,7 @@ import { SCNotificationAggregatedType } from '@selfcommunity/types';
 export interface NotificationProps extends CardProps, VirtualScrollerItemProps {
     /**
      * Id of the UserNotification
-     * @default `notification_<notificationObject.sid>`
+     * @default `notification_notificationObject.sid`
      */
     id?: string;
     /**

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

@@ -1,8 +1,6 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo, useState } from 'react';
-import { styled } from '@mui/material/styles';
-import CardContent from '@mui/material/CardContent';
 import CommentNotification from './Comment';
 import UserFollowNotification from './UserFollow';
 import UndeletedForNotification from './UndeletedFor';
@@ -18,11 +16,10 @@ import KindlyNoticeFlagNotification from './KindlyNoticeFlag';
 import VoteUpNotification from './VoteUp';
 import EventNotification from './Event/Event';
 import LiveStreamNotification from './LiveStream/LiveStream';
-import Icon from '@mui/material/Icon';
 import { SCOPE_SC_UI } from '../../constants/Errors';
 import { getContribution, getContributionRouteName, getContributionSnippet, getRouteData } from '../../utils/contribution';
 import ContributionFollowNotification from './ContributionFollow';
-import { Avatar, CardHeader, Collapse, ListItemButton, ListItemText, Tooltip } from '@mui/material';
+import { Avatar, CardHeader, Collapse, ListItemButton, ListItemText, Tooltip, styled, CardContent, Icon } from '@mui/material';
 import IncubatorApprovedNotification from './IncubatorApproved';
 import { Endpoints, http } from '@selfcommunity/api-services';
 import { Link, SCRoutes, useSCRouting } from '@selfcommunity/react-core';
@@ -37,6 +34,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 +305,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/Notification/PrivateMessage/PrivateMessage.js

@@ -1,8 +1,7 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useContext, useEffect, useMemo, useState } from 'react';
-import { styled } from '@mui/material/styles';
-import { Avatar, Box, Stack, Typography } from '@mui/material';
+import { Avatar, Box, Stack, Typography, styled } from '@mui/material';
 import { Link, SCPreferences, SCRoutes, SCUserContext, useSCPreferences, useSCRouting } from '@selfcommunity/react-core';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import DateTimeAgo from '../../../shared/DateTimeAgo';

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

@@ -1,9 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-import CardContent from '@mui/material/CardContent';
-import { styled } from '@mui/material/styles';
-import { CardHeader, useTheme } from '@mui/material';
-import Skeleton from '@mui/material/Skeleton';
+import { CardHeader, useTheme, styled, CardContent, Skeleton } from '@mui/material';
 import Widget from '../Widget';
 import { PREFIX } from './constants';
 const classes = {

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

@@ -1,8 +1,6 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { styled } from '@mui/material/styles';
-import { Avatar, Box, Stack, Typography } from '@mui/material';
-import Icon from '@mui/material/Icon';
+import { Avatar, Box, Stack, Typography, styled, Icon } from '@mui/material';
 import { Link, SCRoutes, useSCRouting } from '@selfcommunity/react-core';
 import { FormattedMessage } from 'react-intl';
 import { getContributionSnippet, getContributionType, getRouteData } from '../../../utils/contribution';

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

@@ -1,8 +1,6 @@
 import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { styled } from '@mui/material/styles';
-import { Avatar, Stack, Typography } from '@mui/material';
-import Icon from '@mui/material/Icon';
+import { Avatar, Stack, Typography, styled, Icon } from '@mui/material';
 import { SCNotificationTypologyType } from '@selfcommunity/types';
 import { defineMessages, useIntl } from 'react-intl';
 import DateTimeAgo from '../../../shared/DateTimeAgo';

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

@@ -1,8 +1,7 @@
 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, Stack, Typography } from '@mui/material';
+import { Avatar, Stack, Typography, styled } from '@mui/material';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import DateTimeAgo from '../../../shared/DateTimeAgo';
 import { SCNotificationTypologyType } from '@selfcommunity/types';

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

@@ -1,8 +1,7 @@
 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, Stack, Typography } from '@mui/material';
+import { Avatar, Stack, Typography, styled } from '@mui/material';
 import { Link, SCRoutes, useSCRouting } from '@selfcommunity/react-core';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import DateTimeAgo from '../../../shared/DateTimeAgo';

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

@@ -1,8 +1,7 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
-import { styled } from '@mui/material/styles';
-import { Avatar, Stack, Typography } from '@mui/material';
+import { Avatar, Stack, Typography, styled } from '@mui/material';
 import { Link, SCRoutes, useSCRouting } from '@selfcommunity/react-core';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import DateTimeAgo from '../../../shared/DateTimeAgo';

package/lib/esm/components/OnBoardingWidget/ActionsButton.js

@@ -1,8 +1,7 @@
 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 { Icon, IconButton, List, ListItem, ListItemButton, ListItemIcon, Menu, MenuItem, SwipeableDrawer, useMediaQuery, useTheme } from '@mui/material';
+import { Icon, IconButton, List, ListItem, ListItemButton, ListItemIcon, Menu, MenuItem, SwipeableDrawer, useMediaQuery, useTheme, styled } from '@mui/material';
 import classNames from 'classnames';
 import { useThemeProps } from '@mui/system';
 import { FormattedMessage } from 'react-intl';

package/lib/esm/components/OnBoardingWidget/OnBoardingWidget.js

@@ -1,9 +1,8 @@
 import { __awaiter, __rest } from "tslib";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useState } from 'react';
-import { Accordion, AccordionDetails, AccordionSummary, Box, Button, CardContent, CardMedia, Checkbox, Chip, Fade, Icon, IconButton, List, ListItem, ListItemButton, ListItemIcon, ListItemText, Typography, useMediaQuery, useTheme } from '@mui/material';
+import { Accordion, AccordionDetails, AccordionSummary, Box, Button, CardContent, CardMedia, Checkbox, Chip, Fade, Icon, IconButton, List, ListItem, ListItemButton, ListItemIcon, ListItemText, Typography, useMediaQuery, useTheme, styled } from '@mui/material';
 import { FormattedMessage } from 'react-intl';
-import { styled } from '@mui/material/styles';
 import classNames from 'classnames';
 import { useThemeProps } from '@mui/system';
 import Category from './Steps/Category';

package/lib/esm/components/OnBoardingWidget/Skeleton.js

@@ -1,7 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Chip, List, ListItem, ListItemButton, ListItemIcon, ListItemText, useMediaQuery, useTheme } from '@mui/material';
-import { styled } from '@mui/material/styles';
-import Skeleton from '@mui/material/Skeleton';
+import { Box, Chip, List, ListItem, ListItemButton, ListItemIcon, ListItemText, styled, Skeleton, useMediaQuery, useTheme } from '@mui/material';
 import { PREFIX } from './constants';
 const classes = {
     root: `${PREFIX}-skeleton-root`,

package/lib/esm/components/OnBoardingWidget/Steps/App/App.js

@@ -1,11 +1,9 @@
 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 Box from '@mui/material/Box';
 import { useThemeProps } from '@mui/system';
 import classNames from 'classnames';
 import { PREFIX } from '../../constants';
-import { Button, CardMedia, Icon, Tab, Tabs, Typography } from '@mui/material';
+import { Button, CardMedia, Icon, Tab, Tabs, Typography, Box, styled } from '@mui/material';
 import { FormattedMessage } from 'react-intl';
 import { SCOnBoardingStepStatusType } from '@selfcommunity/types';
 import AndroidPlaceholder from '../../../../assets/onBoarding/android';