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

package/lib/cjs/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/cjs/components/Notification/Course/Course.js

@@ -0,0 +1,88 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const material_1 = require("@mui/material");
+const react_core_1 = require("@selfcommunity/react-core");
+const types_1 = require("@selfcommunity/types");
+const react_intl_1 = require("react-intl");
+const DateTimeAgo_1 = tslib_1.__importDefault(require("../../../shared/DateTimeAgo"));
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const types_2 = require("../../../types");
+const NotificationItem_1 = tslib_1.__importDefault(require("../../../shared/NotificationItem"));
+const lab_1 = require("@mui/lab");
+const UserDeletedSnackBar_1 = tslib_1.__importDefault(require("../../../shared/UserDeletedSnackBar"));
+const UserAvatar_1 = tslib_1.__importDefault(require("../../../shared/UserAvatar"));
+const constants_1 = require("../constants");
+const Course_1 = tslib_1.__importDefault(require("../../Course"));
+const HiddenPlaceholder_1 = tslib_1.__importDefault(require("../../../shared/HiddenPlaceholder"));
+const utils_1 = require("./utils");
+const classes = {
+    root: `${constants_1.PREFIX}-course-root`,
+    avatar: `${constants_1.PREFIX}-avatar`,
+    actions: `${constants_1.PREFIX}-actions`,
+    seeButton: `${constants_1.PREFIX}see-button`,
+    activeAt: `${constants_1.PREFIX}-active-at`,
+    snippetTime: `${constants_1.PREFIX}-snippet-time`,
+    username: `${constants_1.PREFIX}-username`
+};
+const Root = (0, material_1.styled)(NotificationItem_1.default, {
+    name: constants_1.PREFIX,
+    slot: 'CourseRoot'
+})(() => ({}));
+/**
+ * This component render the content of the notification of type course
+ * @constructor
+ * @param props
+ */
+function CourseNotification(props) {
+    // PROPS
+    const { notificationObject, id = `n_${props.notificationObject['sid']}`, className, template = types_2.SCNotificationObjectTemplateType.DETAIL } = props, rest = tslib_1.__rest(props, ["notificationObject", "id", "className", "template"]);
+    // CONTEXT
+    const scRoutingContext = (0, react_core_1.useSCRouting)();
+    // STATE
+    const [openAlert, setOpenAlert] = (0, react_1.useState)(false);
+    // CONST
+    const isSnippetTemplate = template === types_2.SCNotificationObjectTemplateType.SNIPPET;
+    const isToastTemplate = template === types_2.SCNotificationObjectTemplateType.TOAST;
+    if (!notificationObject.course) {
+        return (0, jsx_runtime_1.jsx)(HiddenPlaceholder_1.default, {});
+    }
+    // RENDER
+    if (isSnippetTemplate || isToastTemplate) {
+        return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className, `${constants_1.PREFIX}-${template}`), template: template, isNew: notificationObject.is_new, disableTypography: true, image: (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({}, (!notificationObject.user.deleted && {
+                to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, notificationObject.user)
+            }), { onClick: notificationObject.user.deleted ? () => setOpenAlert(true) : null }, { children: (0, jsx_runtime_1.jsx)(UserAvatar_1.default, Object.assign({ hide: !notificationObject.user.community_badge, smaller: true }, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: notificationObject.user.username, variant: "circular", src: notificationObject.user.avatar, classes: { root: classes.avatar } }) })) })), primary: (0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({}, (!notificationObject.user.deleted && {
+                        to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, notificationObject.user)
+                    }), { onClick: notificationObject.user.deleted ? () => setOpenAlert(true) : null, className: classes.username }, { children: notificationObject.user.username })), ' ', (0, jsx_runtime_1.jsx)(react_intl_1.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 === types_1.SCNotificationTypologyType.USER_COMMENTED_A_COURSE_LESSON
+                                ? notificationObject.comment.lesson_name
+                                : notificationObject.course.name,
+                            link: (...chunks) => ((0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(notificationObject.type === types_1.SCNotificationTypologyType.USER_COMMENTED_A_COURSE_LESSON
+                                    ? react_core_1.SCRoutes.COURSE_LESSON_ROUTE_NAME
+                                    : react_core_1.SCRoutes.COURSE_ROUTE_NAME, notificationObject.type === types_1.SCNotificationTypologyType.USER_COMMENTED_A_COURSE_LESSON
+                                    ? (0, utils_1.formatLessonUrl)(notificationObject)
+                                    : notificationObject.course) }, { children: chunks })))
+                        } })] }), footer: isToastTemplate ? ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 }, { children: [(0, jsx_runtime_1.jsx)(DateTimeAgo_1.default, { date: notificationObject.active_at }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ color: "primary" }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url((0, utils_1.getRouteName)(notificationObject), (0, utils_1.getRouteParams)(notificationObject)) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.notification.course.button.see", defaultMessage: "ui.notification.course.button.see" }) })) }))] }))) : ((0, jsx_runtime_1.jsx)(DateTimeAgo_1.default, { date: notificationObject.active_at, className: classes.snippetTime })) }, rest)));
+    }
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className, `${constants_1.PREFIX}-${template}`), template: template, isNew: notificationObject.is_new, disableTypography: true, image: (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({}, (!notificationObject.user.deleted && {
+                    to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, notificationObject.user)
+                }), { onClick: notificationObject.user.deleted ? () => setOpenAlert(true) : null }, { children: (0, jsx_runtime_1.jsx)(UserAvatar_1.default, Object.assign({ hide: !notificationObject.user.community_badge, smaller: true }, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, { className: classes.avatar, alt: notificationObject.user.username, variant: "circular", src: notificationObject.user.avatar }) })) })), primary: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({}, (!notificationObject.user.deleted && {
+                            to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, notificationObject.user)
+                        }), { onClick: notificationObject.user.deleted ? () => setOpenAlert(true) : null, className: classes.username }, { children: notificationObject.user.username })), ' ', (0, jsx_runtime_1.jsx)(react_intl_1.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 === types_1.SCNotificationTypologyType.USER_COMMENTED_A_COURSE_LESSON
+                                    ? notificationObject.comment.lesson_name
+                                    : notificationObject.course.name,
+                                link: (...chunks) => ((0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(notificationObject.type === types_1.SCNotificationTypologyType.USER_COMMENTED_A_COURSE_LESSON
+                                        ? react_core_1.SCRoutes.COURSE_LESSON_ROUTE_NAME
+                                        : react_core_1.SCRoutes.COURSE_ROUTE_NAME, notificationObject.type === types_1.SCNotificationTypologyType.USER_COMMENTED_A_COURSE_LESSON
+                                        ? (0, utils_1.formatLessonUrl)(notificationObject)
+                                        : notificationObject.course) }, { children: chunks })))
+                            } }), notificationObject.type === types_1.SCNotificationTypologyType.USER_COMMENTED_A_COURSE_LESSON ? ((0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", dangerouslySetInnerHTML: { __html: notificationObject.comment.html } })) : ((0, jsx_runtime_1.jsx)(Course_1.default, { course: notificationObject.course, actions: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}), template: types_2.SCCourseTemplateType.SNIPPET, elevation: 0 }))] }), actions: (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 }, { children: [(0, jsx_runtime_1.jsx)(DateTimeAgo_1.default, { date: notificationObject.active_at, className: classes.activeAt }), (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ color: 'primary', variant: "outlined", size: "small", classes: { root: classes.seeButton }, component: react_core_1.Link, to: scRoutingContext.url((0, utils_1.getRouteName)(notificationObject), (0, utils_1.getRouteParams)(notificationObject)) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.notification.course.button.see", defaultMessage: "ui.notification.course.button.see" }) }))] })) }, rest)), openAlert && (0, jsx_runtime_1.jsx)(UserDeletedSnackBar_1.default, { open: openAlert, handleClose: () => setOpenAlert(false) })] }));
+}
+exports.default = CourseNotification;

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

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

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

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

package/lib/cjs/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/cjs/components/Notification/Course/utils.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.formatLessonUrl = exports.getRouteParams = exports.getRouteName = void 0;
+const course_1 = require("../../../types/course");
+const types_1 = require("@selfcommunity/types");
+const react_core_1 = require("@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
+    };
+}
+exports.formatLessonUrl = formatLessonUrl;
+function formatCourseRequestsUrl(notificationObject) {
+    return {
+        id: notificationObject.course.id,
+        slug: notificationObject.course.slug,
+        tab: course_1.SCCourseEditTabType.REQUESTS
+    };
+}
+const getRouteName = (notificationObject) => {
+    switch (notificationObject.type) {
+        case types_1.SCNotificationTypologyType.USER_COMMENTED_A_COURSE_LESSON:
+            return react_core_1.SCRoutes.COURSE_LESSON_COMMENTS_ROUTE_NAME;
+        case types_1.SCNotificationTypologyType.USER_REQUESTED_TO_JOIN_COURSE:
+            return react_core_1.SCRoutes.COURSE_EDIT_ROUTE_NAME;
+        default:
+            return react_core_1.SCRoutes.COURSE_ROUTE_NAME;
+    }
+};
+exports.getRouteName = getRouteName;
+const getRouteParams = (notificationObject) => {
+    switch (notificationObject.type) {
+        case types_1.SCNotificationTypologyType.USER_COMMENTED_A_COURSE_LESSON:
+            return formatLessonUrl(notificationObject);
+        case types_1.SCNotificationTypologyType.USER_REQUESTED_TO_JOIN_COURSE:
+            return formatCourseRequestsUrl(notificationObject);
+        default:
+            return notificationObject.course;
+    }
+};
+exports.getRouteParams = getRouteParams;

package/lib/cjs/components/Notification/DeletedFor/DeletedFor.js

@@ -2,9 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const styles_1 = require("@mui/material/styles");
 const material_1 = require("@mui/material");
-const Icon_1 = tslib_1.__importDefault(require("@mui/material/Icon"));
 const react_intl_1 = require("react-intl");
 const contribution_1 = require("../../../utils/contribution");
 const DateTimeAgo_1 = tslib_1.__importDefault(require("../../../shared/DateTimeAgo"));
@@ -46,7 +44,7 @@ const classes = {
     contributionYouWroteLabel: `${constants_1.PREFIX}-contribution-you-wrote-label`,
     contributionText: `${constants_1.PREFIX}-contribution-text`
 };
-const Root = (0, styles_1.styled)(NotificationItem_1.default, {
+const Root = (0, material_1.styled)(NotificationItem_1.default, {
     name: constants_1.PREFIX,
     slot: 'DeletedForRoot',
     overridesResolver: (props, styles) => styles.root
@@ -69,6 +67,6 @@ function DeletedForNotification(props) {
     /**
      * Renders root object
      */
-    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className, `${constants_1.PREFIX}-${template}`), template: template, isNew: notificationObject.is_new, disableTypography: true, image: (0, jsx_runtime_1.jsx)(material_1.Avatar, Object.assign({ variant: "circular", classes: { root: classes.flagIcon } }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "outlined_flag" }) })), primary: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isSnippetTemplate ? ((0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes[`${contributionType.toUpperCase()}_ROUTE_NAME`], (0, contribution_1.getRouteData)(notificationObject[contributionType])) }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "div", color: "inherit", className: classes.flagText }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.notification.deletedFor.${(0, utils_1.camelCase)(notificationObject.type)}Snippet`, defaultMessage: `ui.notification.deletedFor.${(0, utils_1.camelCase)(notificationObject.type)}Snippet` }) })) }))) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [template === types_1.SCNotificationObjectTemplateType.DETAIL && notificationObject.is_new && (0, jsx_runtime_1.jsx)(NewChip_1.default, {}), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "div", color: "inherit", className: classes.flagText }, { children: intl.formatMessage(messages[(0, utils_1.camelCase)(notificationObject.type)], { b: (...chunks) => (0, jsx_runtime_1.jsx)("strong", { children: chunks }) }) }))] })) }), secondary: (template === types_1.SCNotificationObjectTemplateType.DETAIL || template === types_1.SCNotificationObjectTemplateType.SNIPPET) && ((0, jsx_runtime_1.jsx)(DateTimeAgo_1.default, { date: notificationObject.active_at, className: classes.activeAt })), footer: isSnippetTemplate ? null : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.contributionWrap }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: 'body2', color: 'inherit', classes: { root: classes.contributionYouWroteLabel } }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.notification.deletedFor.youWrote", defaultMessage: "ui.notification.deletedFor.youWrote" }) })), (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes[`${contributionType.toUpperCase()}_ROUTE_NAME`], (0, contribution_1.getRouteData)(notificationObject[contributionType])), className: classes.contributionText }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: 'span', color: 'inherit', variant: "body2" }, { children: (0, contribution_1.getContributionSnippet)(notificationObject[contributionType]) })) }))] })), template === types_1.SCNotificationObjectTemplateType.TOAST && ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 }, { children: [(0, jsx_runtime_1.jsx)(DateTimeAgo_1.default, { date: notificationObject.active_at }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ color: "primary", component: 'div' }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes[`${notificationObject[contributionType]['type'].toUpperCase()}_ROUTE_NAME`], (0, contribution_1.getRouteData)(notificationObject[contributionType])) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userToastNotifications.viewContribution", defaultMessage: 'ui.userToastNotifications.viewContribution' }) })) }))] })))] })) }, rest)));
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className, `${constants_1.PREFIX}-${template}`), template: template, isNew: notificationObject.is_new, disableTypography: true, image: (0, jsx_runtime_1.jsx)(material_1.Avatar, Object.assign({ variant: "circular", classes: { root: classes.flagIcon } }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "outlined_flag" }) })), primary: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isSnippetTemplate ? ((0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes[`${contributionType.toUpperCase()}_ROUTE_NAME`], (0, contribution_1.getRouteData)(notificationObject[contributionType])) }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "div", color: "inherit", className: classes.flagText }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.notification.deletedFor.${(0, utils_1.camelCase)(notificationObject.type)}Snippet`, defaultMessage: `ui.notification.deletedFor.${(0, utils_1.camelCase)(notificationObject.type)}Snippet` }) })) }))) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [template === types_1.SCNotificationObjectTemplateType.DETAIL && notificationObject.is_new && (0, jsx_runtime_1.jsx)(NewChip_1.default, {}), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "div", color: "inherit", className: classes.flagText }, { children: intl.formatMessage(messages[(0, utils_1.camelCase)(notificationObject.type)], { b: (...chunks) => (0, jsx_runtime_1.jsx)("strong", { children: chunks }) }) }))] })) }), secondary: (template === types_1.SCNotificationObjectTemplateType.DETAIL || template === types_1.SCNotificationObjectTemplateType.SNIPPET) && ((0, jsx_runtime_1.jsx)(DateTimeAgo_1.default, { date: notificationObject.active_at, className: classes.activeAt })), footer: isSnippetTemplate ? null : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.contributionWrap }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: 'body2', color: 'inherit', classes: { root: classes.contributionYouWroteLabel } }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.notification.deletedFor.youWrote", defaultMessage: "ui.notification.deletedFor.youWrote" }) })), (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes[`${contributionType.toUpperCase()}_ROUTE_NAME`], (0, contribution_1.getRouteData)(notificationObject[contributionType])), className: classes.contributionText }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: 'span', color: 'inherit', variant: "body2" }, { children: (0, contribution_1.getContributionSnippet)(notificationObject[contributionType]) })) }))] })), template === types_1.SCNotificationObjectTemplateType.TOAST && ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 }, { children: [(0, jsx_runtime_1.jsx)(DateTimeAgo_1.default, { date: notificationObject.active_at }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ color: "primary", component: 'div' }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes[`${notificationObject[contributionType]['type'].toUpperCase()}_ROUTE_NAME`], (0, contribution_1.getRouteData)(notificationObject[contributionType])) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userToastNotifications.viewContribution", defaultMessage: 'ui.userToastNotifications.viewContribution' }) })) }))] })))] })) }, rest)));
 }
 exports.default = DeletedForNotification;

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

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const styles_1 = require("@mui/material/styles");
 const material_1 = require("@mui/material");
 const react_core_1 = require("@selfcommunity/react-core");
 const types_1 = require("@selfcommunity/types");
@@ -17,6 +16,7 @@ const UserDeletedSnackBar_1 = tslib_1.__importDefault(require("../../../shared/U
 const UserAvatar_1 = tslib_1.__importDefault(require("../../../shared/UserAvatar"));
 const constants_1 = require("../constants");
 const Event_1 = tslib_1.__importDefault(require("../../Event"));
+const api_services_1 = require("@selfcommunity/api-services");
 const classes = {
     root: `${constants_1.PREFIX}-event-root`,
     avatar: `${constants_1.PREFIX}-avatar`,
@@ -26,7 +26,7 @@ const classes = {
     snippetTime: `${constants_1.PREFIX}-snippet-time`,
     username: `${constants_1.PREFIX}-username`
 };
-const Root = (0, styles_1.styled)(NotificationItem_1.default, {
+const Root = (0, material_1.styled)(NotificationItem_1.default, {
     name: constants_1.PREFIX,
     slot: 'EventRoot'
 })(() => ({}));
@@ -42,10 +42,20 @@ function EventNotification(props) {
     const scRoutingContext = (0, react_core_1.useSCRouting)();
     // STATE
     const [openAlert, setOpenAlert] = (0, react_1.useState)(false);
+    const [loading, setLoading] = (0, react_1.useState)(false);
+    const [disabled, setDisabled] = (0, react_1.useState)(notificationObject.event.subscription_status !== types_1.SCEventSubscriptionStatusType.REQUESTED);
     // CONST
     const isSnippetTemplate = template === types_2.SCNotificationObjectTemplateType.SNIPPET;
     const isToastTemplate = template === types_2.SCNotificationObjectTemplateType.TOAST;
     const intl = (0, react_intl_1.useIntl)();
+    //HANDLERS
+    const acceptRequest = (event) => {
+        setLoading(true);
+        api_services_1.EventService.inviteOrAcceptEventRequest(event.id, { users: [notificationObject.user.id] }).then(() => {
+            setLoading(false);
+            setDisabled(true);
+        });
+    };
     // RENDER
     if (isSnippetTemplate || isToastTemplate) {
         return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className, `${constants_1.PREFIX}-${template}`), template: template, isNew: notificationObject.is_new, disableTypography: true, image: (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({}, (!notificationObject.user.deleted && {
@@ -66,7 +76,7 @@ function EventNotification(props) {
                                     month: 'long'
                                 }),
                                 hour: intl.formatDate(notificationObject.event.start_date, { hour: 'numeric', minute: 'numeric' })
-                            } }) })), (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ component: "p", variant: "body2" }, { children: [(0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.notification.event.privacy.${notificationObject.event.privacy}`, defaultMessage: `ui.notification.event.privacy.${notificationObject.event.privacy}` }), ' ', "-", ' ', notificationObject.event.location === types_1.SCEventLocationType.PERSON ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.notification.event.address.live.label`, defaultMessage: `ui.notification.event.address.live.label` })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.notification.event.address.online.label`, defaultMessage: `ui.notification.event.address.online.label` }))] }))] }), footer: isToastTemplate ? ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 }, { children: [(0, jsx_runtime_1.jsx)(DateTimeAgo_1.default, { date: notificationObject.active_at }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ color: "primary" }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes.EVENT_ROUTE_NAME, notificationObject.event) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.notification.event.button.see", defaultMessage: "ui.notification.event.button.see" }) })) }))] }))) : ((0, jsx_runtime_1.jsx)(DateTimeAgo_1.default, { date: notificationObject.active_at, className: classes.snippetTime })) }, rest)));
+                            } }) })), (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ component: "p", variant: "body2" }, { children: [(0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.notification.event.privacy.${notificationObject.event.privacy}`, defaultMessage: `ui.notification.event.privacy.${notificationObject.event.privacy}` }), ' ', "-", ' ', notificationObject.event.location === types_1.SCEventLocationType.PERSON ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.notification.event.address.live.label`, defaultMessage: `ui.notification.event.address.live.label` })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.notification.event.address.online.label`, defaultMessage: `ui.notification.event.address.online.label` }))] }))] }), footer: isToastTemplate ? ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 }, { children: [(0, jsx_runtime_1.jsx)(DateTimeAgo_1.default, { date: notificationObject.active_at }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ color: "primary" }, { children: notificationObject.type === types_1.SCNotificationTypologyType.USER_REQUESTED_TO_JOIN_EVENT ? ((0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ disabled: disabled, loading: loading, color: 'primary', variant: "text", size: "small", onClick: () => acceptRequest(notificationObject.event) }, { children: disabled ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.notification.event.button.accepted", defaultMessage: "ui.notification.event.button.accepted" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.notification.event.button.accept", defaultMessage: "ui.notification.event.button.accept" })) }))) : ((0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes.EVENT_ROUTE_NAME, notificationObject.event) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.notification.event.button.see", defaultMessage: "ui.notification.event.button.see" }) }))) }))] }))) : ((0, jsx_runtime_1.jsx)(DateTimeAgo_1.default, { date: notificationObject.active_at, className: classes.snippetTime })) }, rest)));
     }
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className, `${constants_1.PREFIX}-${template}`), template: template, isNew: notificationObject.is_new, disableTypography: true, image: (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({}, (!notificationObject.user.deleted && {
                     to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, notificationObject.user)
@@ -78,6 +88,13 @@ function EventNotification(props) {
                                 icon: (...chunks) => (0, jsx_runtime_1.jsx)(material_1.Icon, { children: chunks }),
                                 event: notificationObject.event.name,
                                 link: (...chunks) => (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes.EVENT_ROUTE_NAME, notificationObject.event) }, { children: chunks }))
-                            } }), (0, jsx_runtime_1.jsx)(Event_1.default, { event: notificationObject.event, actions: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}), elevation: 0 })] }), actions: (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 }, { children: [(0, jsx_runtime_1.jsx)(DateTimeAgo_1.default, { date: notificationObject.active_at, className: classes.activeAt }), (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ color: 'primary', variant: "outlined", size: "small", classes: { root: classes.seeButton }, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.EVENT_ROUTE_NAME, notificationObject.event) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.notification.event.button.see", defaultMessage: "ui.notification.event.button.see" }) }))] })) }, rest)), openAlert && (0, jsx_runtime_1.jsx)(UserDeletedSnackBar_1.default, { open: openAlert, handleClose: () => setOpenAlert(false) })] }));
+                            } }), (0, jsx_runtime_1.jsx)(Event_1.default, { event: notificationObject.event, actions: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}), elevation: 0 })] }), actions: (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 }, { children: [(0, jsx_runtime_1.jsx)(DateTimeAgo_1.default, { date: notificationObject.active_at, className: classes.activeAt }), (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({}, (notificationObject.type === types_1.SCNotificationTypologyType.USER_REQUESTED_TO_JOIN_EVENT && {
+                            disabled: disabled
+                        }), { loading: loading, color: 'primary', variant: "outlined", size: "small", classes: { root: classes.seeButton } }, (notificationObject.type !== types_1.SCNotificationTypologyType.USER_REQUESTED_TO_JOIN_EVENT && {
+                            component: react_core_1.Link,
+                            to: scRoutingContext.url(react_core_1.SCRoutes.EVENT_ROUTE_NAME, notificationObject.event)
+                        }), { onClick: notificationObject.type === types_1.SCNotificationTypologyType.USER_REQUESTED_TO_JOIN_EVENT
+                                ? () => acceptRequest(notificationObject.event)
+                                : null }, { children: notificationObject.type === types_1.SCNotificationTypologyType.USER_REQUESTED_TO_JOIN_EVENT ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: disabled ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.notification.event.button.accepted", defaultMessage: "ui.notification.event.button.accepted" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.notification.event.button.accept", defaultMessage: "ui.notification.event.button.accept" })) })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.notification.event.button.see", defaultMessage: "ui.notification.event.button.see" })) }))] })) }, rest)), openAlert && (0, jsx_runtime_1.jsx)(UserDeletedSnackBar_1.default, { open: openAlert, handleClose: () => setOpenAlert(false) })] }));
 }
 exports.default = EventNotification;

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

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const styles_1 = require("@mui/material/styles");
 const material_1 = require("@mui/material");
 const react_core_1 = require("@selfcommunity/react-core");
 const types_1 = require("@selfcommunity/types");
@@ -24,7 +23,7 @@ const classes = {
     activeAt: `${constants_1.PREFIX}-active-at`,
     username: `${constants_1.PREFIX}-username`
 };
-const Root = (0, styles_1.styled)(NotificationItem_1.default, {
+const Root = (0, material_1.styled)(NotificationItem_1.default, {
     name: constants_1.PREFIX,
     slot: 'GroupRoot'
 })(() => ({}));

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

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const styles_1 = require("@mui/material/styles");
 const material_1 = require("@mui/material");
 const react_core_1 = require("@selfcommunity/react-core");
 const react_intl_1 = require("react-intl");
@@ -25,7 +24,7 @@ const classes = {
     activeAt: `${constants_1.PREFIX}-active-at`,
     viewIncubatorButton: `${constants_1.PREFIX}-view-incubator-button`
 };
-const Root = (0, styles_1.styled)(NotificationItem_1.default, {
+const Root = (0, material_1.styled)(NotificationItem_1.default, {
     name: constants_1.PREFIX,
     slot: 'IncubatorApprovedRoot'
 })(() => ({}));

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

@@ -2,9 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const styles_1 = require("@mui/material/styles");
 const material_1 = require("@mui/material");
-const Icon_1 = tslib_1.__importDefault(require("@mui/material/Icon"));
 const react_core_1 = require("@selfcommunity/react-core");
 const utils_1 = require("@selfcommunity/utils");
 const react_intl_1 = require("react-intl");
@@ -29,7 +27,7 @@ const classes = {
     contributionYouWroteLabel: `${constants_1.PREFIX}-contribution-you-wrote-label`,
     contributionText: `${constants_1.PREFIX}-contribution-text`
 };
-const Root = (0, styles_1.styled)(NotificationItem_1.default, {
+const Root = (0, material_1.styled)(NotificationItem_1.default, {
     name: constants_1.PREFIX,
     slot: 'KindlyNoticeFlagRoot'
 })(() => ({}));
@@ -51,6 +49,6 @@ function KindlyNoticeFlagNotification(props) {
     /**
      * Renders root object
      */
-    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className, `${constants_1.PREFIX}-${template}`), template: template, isNew: notificationObject.is_new, disableTypography: true, image: (0, jsx_runtime_1.jsx)(material_1.Avatar, Object.assign({ variant: "circular", classes: { root: classes.flagIcon } }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "outlined_flag" }) })), primary: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isSnippetTemplate ? ((0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes[`${contributionType.toUpperCase()}_ROUTE_NAME`], (0, contribution_1.getRouteData)(notificationObject[contributionType])) }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "div", color: "inherit", className: classes.flagText }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.notification.kindlyNoticeFlag.kindlyNoticeFlagSnippet`, defaultMessage: `ui.notification.kindlyNoticeFlag.kindlyNoticeFlagSnippet` }) })) }))) : ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "div", color: "inherit", className: classes.flagText }, { children: intl.formatMessage(messages[(0, utils_1.camelCase)(notificationObject.type)], { b: (...chunks) => (0, jsx_runtime_1.jsx)("strong", { children: chunks }) }) }))) }), secondary: (template === types_1.SCNotificationObjectTemplateType.DETAIL || template === types_1.SCNotificationObjectTemplateType.SNIPPET) && ((0, jsx_runtime_1.jsx)(DateTimeAgo_1.default, { date: notificationObject.active_at, className: classes.activeAt })), footer: !isSnippetTemplate && ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.contributionWrap }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: 'body2', color: 'inherit', component: 'div', classes: { root: classes.contributionYouWroteLabel } }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.notification.undeletedFor.youWrote", defaultMessage: "ui.notification.undeletedFor.youWrote" }) })), (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes[`${contributionType.toUpperCase()}_ROUTE_NAME`], (0, contribution_1.getRouteData)(notificationObject[contributionType])), className: classes.contributionText }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: 'span', variant: "body2" }, { children: (0, contribution_1.getContributionSnippet)(notificationObject[contributionType]) })) }))] }))) }, rest)));
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className, `${constants_1.PREFIX}-${template}`), template: template, isNew: notificationObject.is_new, disableTypography: true, image: (0, jsx_runtime_1.jsx)(material_1.Avatar, Object.assign({ variant: "circular", classes: { root: classes.flagIcon } }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "outlined_flag" }) })), primary: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isSnippetTemplate ? ((0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes[`${contributionType.toUpperCase()}_ROUTE_NAME`], (0, contribution_1.getRouteData)(notificationObject[contributionType])) }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "div", color: "inherit", className: classes.flagText }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.notification.kindlyNoticeFlag.kindlyNoticeFlagSnippet`, defaultMessage: `ui.notification.kindlyNoticeFlag.kindlyNoticeFlagSnippet` }) })) }))) : ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "div", color: "inherit", className: classes.flagText }, { children: intl.formatMessage(messages[(0, utils_1.camelCase)(notificationObject.type)], { b: (...chunks) => (0, jsx_runtime_1.jsx)("strong", { children: chunks }) }) }))) }), secondary: (template === types_1.SCNotificationObjectTemplateType.DETAIL || template === types_1.SCNotificationObjectTemplateType.SNIPPET) && ((0, jsx_runtime_1.jsx)(DateTimeAgo_1.default, { date: notificationObject.active_at, className: classes.activeAt })), footer: !isSnippetTemplate && ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.contributionWrap }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: 'body2', color: 'inherit', component: 'div', classes: { root: classes.contributionYouWroteLabel } }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.notification.undeletedFor.youWrote", defaultMessage: "ui.notification.undeletedFor.youWrote" }) })), (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes[`${contributionType.toUpperCase()}_ROUTE_NAME`], (0, contribution_1.getRouteData)(notificationObject[contributionType])), className: classes.contributionText }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: 'span', variant: "body2" }, { children: (0, contribution_1.getContributionSnippet)(notificationObject[contributionType]) })) }))] }))) }, rest)));
 }
 exports.default = KindlyNoticeFlagNotification;

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

@@ -2,9 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const styles_1 = require("@mui/material/styles");
 const material_1 = require("@mui/material");
-const Icon_1 = tslib_1.__importDefault(require("@mui/material/Icon"));
 const utils_1 = require("@selfcommunity/utils");
 const react_core_1 = require("@selfcommunity/react-core");
 const react_intl_1 = require("react-intl");
@@ -49,7 +47,7 @@ const classes = {
     contributionYouWroteLabel: `${constants_1.PREFIX}-contribution-you-wrote-label`,
     contributionText: `${constants_1.PREFIX}-contribution-text`
 };
-const Root = (0, styles_1.styled)(NotificationItem_1.default, {
+const Root = (0, material_1.styled)(NotificationItem_1.default, {
     name: constants_1.PREFIX,
     slot: 'KindlyNoticeForRoot'
 })(() => ({}));
@@ -71,7 +69,7 @@ function KindlyNoticeForNotification(props) {
     /**
      * Renders root object
      */
-    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className, `${constants_1.PREFIX}-${template}`), template: template, isNew: notificationObject.is_new, disableTypography: true, image: (0, jsx_runtime_1.jsx)(material_1.Avatar, Object.assign({ variant: "circular", classes: { root: classes.flagIcon } }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "outlined_flag" }) })), primary: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isSnippetTemplate ? ((0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes[`${contributionType.toUpperCase()}_ROUTE_NAME`], (0, contribution_1.getRouteData)(notificationObject[contributionType])) }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "div", color: "inherit", className: classes.flagText }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.notification.kindlyNoticeFor.${(0, utils_1.camelCase)(notificationObject.type)}Snippet`, defaultMessage: `ui.notification.kindlyNoticeFor.${(0, utils_1.camelCase)(notificationObject.type)}Snippet` }) })) }))) : ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "div", color: "inherit", className: classes.flagText }, { children: intl.formatMessage(messages[(0, utils_1.camelCase)(notificationObject.type)], { b: (...chunks) => (0, jsx_runtime_1.jsx)("strong", { children: chunks }) }) }))) }), secondary: (template === types_1.SCNotificationObjectTemplateType.DETAIL || template === types_1.SCNotificationObjectTemplateType.SNIPPET) && ((0, jsx_runtime_1.jsx)(DateTimeAgo_1.default, { date: notificationObject.active_at, className: classes.activeAt })), footer: isSnippetTemplate ? null : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.contributionWrap }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: 'body2', color: 'inherit', component: 'div', classes: { root: classes.contributionYouWroteLabel } }, { children: intl.formatMessage(messages.youWrote, {
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className, `${constants_1.PREFIX}-${template}`), template: template, isNew: notificationObject.is_new, disableTypography: true, image: (0, jsx_runtime_1.jsx)(material_1.Avatar, Object.assign({ variant: "circular", classes: { root: classes.flagIcon } }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "outlined_flag" }) })), primary: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isSnippetTemplate ? ((0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes[`${contributionType.toUpperCase()}_ROUTE_NAME`], (0, contribution_1.getRouteData)(notificationObject[contributionType])) }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "div", color: "inherit", className: classes.flagText }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.notification.kindlyNoticeFor.${(0, utils_1.camelCase)(notificationObject.type)}Snippet`, defaultMessage: `ui.notification.kindlyNoticeFor.${(0, utils_1.camelCase)(notificationObject.type)}Snippet` }) })) }))) : ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "div", color: "inherit", className: classes.flagText }, { children: intl.formatMessage(messages[(0, utils_1.camelCase)(notificationObject.type)], { b: (...chunks) => (0, jsx_runtime_1.jsx)("strong", { children: chunks }) }) }))) }), secondary: (template === types_1.SCNotificationObjectTemplateType.DETAIL || template === types_1.SCNotificationObjectTemplateType.SNIPPET) && ((0, jsx_runtime_1.jsx)(DateTimeAgo_1.default, { date: notificationObject.active_at, className: classes.activeAt })), footer: isSnippetTemplate ? null : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.contributionWrap }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: 'body2', color: 'inherit', component: 'div', classes: { root: classes.contributionYouWroteLabel } }, { children: intl.formatMessage(messages.youWrote, {
                                 b: (...chunks) => (0, jsx_runtime_1.jsx)("strong", { children: chunks })
                             }) })), (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes[`${contributionType.toUpperCase()}_ROUTE_NAME`], (0, contribution_1.getRouteData)(notificationObject[contributionType])), className: classes.contributionText }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: 'span', variant: "body2" }, { children: (0, contribution_1.getContributionSnippet)(notificationObject[contributionType]) })) }))] })), template === types_1.SCNotificationObjectTemplateType.TOAST && ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 }, { children: [(0, jsx_runtime_1.jsx)(DateTimeAgo_1.default, { date: notificationObject.active_at }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ color: "primary", component: 'div' }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes[`${notificationObject[contributionType]['type'].toUpperCase()}_ROUTE_NAME`], (0, contribution_1.getRouteData)(notificationObject[contributionType])) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userToastNotifications.viewContribution", defaultMessage: 'ui.userToastNotifications.viewContribution' }) })) }))] })))] })) }, rest)));
 }

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

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const styles_1 = require("@mui/material/styles");
 const material_1 = require("@mui/material");
 const react_core_1 = require("@selfcommunity/react-core");
 const react_intl_1 = require("react-intl");
@@ -25,7 +24,7 @@ const classes = {
     snippetTime: `${constants_1.PREFIX}-snippet-time`,
     username: `${constants_1.PREFIX}-username`
 };
-const Root = (0, styles_1.styled)(NotificationItem_1.default, {
+const Root = (0, material_1.styled)(NotificationItem_1.default, {
     name: constants_1.PREFIX,
     slot: 'LiveStreamRoot'
 })(() => ({}));

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

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = tslib_1.__importStar(require("react"));
-const styles_1 = require("@mui/material/styles");
 const material_1 = require("@mui/material");
 const react_core_1 = require("@selfcommunity/react-core");
 const react_intl_1 = require("react-intl");
@@ -29,7 +28,7 @@ const classes = {
     activeAt: `${constants_1.PREFIX}-active-at`,
     contributionText: `${constants_1.PREFIX}-contribution-text`
 };
-const Root = (0, styles_1.styled)(NotificationItem_1.default, {
+const Root = (0, material_1.styled)(NotificationItem_1.default, {
     name: constants_1.PREFIX,
     slot: 'MentionRoot'
 })(() => ({}));

package/lib/cjs/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/cjs/components/Notification/Notification.js

@@ -3,8 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const styles_1 = require("@mui/material/styles");
-const CardContent_1 = tslib_1.__importDefault(require("@mui/material/CardContent"));
 const Comment_1 = tslib_1.__importDefault(require("./Comment"));
 const UserFollow_1 = tslib_1.__importDefault(require("./UserFollow"));
 const UndeletedFor_1 = tslib_1.__importDefault(require("./UndeletedFor"));
@@ -20,7 +18,6 @@ const KindlyNoticeFlag_1 = tslib_1.__importDefault(require("./KindlyNoticeFlag")
 const VoteUp_1 = tslib_1.__importDefault(require("./VoteUp"));
 const Event_1 = tslib_1.__importDefault(require("./Event/Event"));
 const LiveStream_1 = tslib_1.__importDefault(require("./LiveStream/LiveStream"));
-const Icon_1 = tslib_1.__importDefault(require("@mui/material/Icon"));
 const Errors_1 = require("../../constants/Errors");
 const contribution_1 = require("../../utils/contribution");
 const ContributionFollow_1 = tslib_1.__importDefault(require("./ContributionFollow"));
@@ -39,6 +36,7 @@ const UserDeletedSnackBar_1 = tslib_1.__importDefault(require("../../shared/User
 const UserAvatar_1 = tslib_1.__importDefault(require("../../shared/UserAvatar"));
 const constants_1 = require("./constants");
 const Group_1 = tslib_1.__importDefault(require("./Group"));
+const Course_1 = tslib_1.__importDefault(require("./Course"));
 const messages = (0, react_intl_1.defineMessages)({
     receivePrivateMessage: {
         id: 'ui.notification.receivePrivateMessage',
@@ -58,7 +56,7 @@ const classes = {
     stopButton: `${constants_1.PREFIX}-stop-button`,
     showOtherAggregated: `${constants_1.PREFIX}-show-other-aggregated`
 };
-const Root = (0, styles_1.styled)(Widget_1.default, {
+const Root = (0, material_1.styled)(Widget_1.default, {
     name: constants_1.PREFIX,
     slot: 'Root'
 })(() => ({}));
@@ -227,7 +225,7 @@ function UserNotification(inProps) {
                 notificationObject.aggregated[0].type === types_1.SCNotificationTypologyType.VOTE_UP ||
                 notificationObject.aggregated[0].type === types_1.SCNotificationTypologyType.CONTRIBUTION)) {
             const contribution = (0, contribution_1.getContribution)(notificationObject);
-            return ((0, jsx_runtime_1.jsx)(material_1.CardHeader, { className: classes.header, titleTypographyProps: { className: classes.title, variant: 'subtitle1' }, title: (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url((0, contribution_1.getContributionRouteName)(contribution), (0, contribution_1.getRouteData)(notificationObject[contribution.type])) }, { children: (0, contribution_1.getContributionSnippet)(contribution) })), action: contribution && ((0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: contribution.suspended ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: 'ui.notification.notificationSuspended', defaultMessage: 'ui.notification.notificationSuspended' })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: 'ui.notification.notificationSuspend', defaultMessage: 'ui.notification.notificationSuspend' })) }, { children: (0, jsx_runtime_1.jsx)(LoadingButton_1.default, Object.assign({ variant: "text", size: "small", loading: loadingSuspendNotification, color: 'inherit', classes: { root: classes.stopButton }, onClick: () => handleStopContentNotification(contribution) }, { children: contribution.suspended ? (0, jsx_runtime_1.jsx)(Icon_1.default, Object.assign({ color: 'primary' }, { children: "notifications_off" })) : (0, jsx_runtime_1.jsx)(Icon_1.default, Object.assign({ color: 'inherit' }, { children: "notifications_active" })) })) }))) }));
+            return ((0, jsx_runtime_1.jsx)(material_1.CardHeader, { className: classes.header, titleTypographyProps: { className: classes.title, variant: 'subtitle1' }, title: (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url((0, contribution_1.getContributionRouteName)(contribution), (0, contribution_1.getRouteData)(notificationObject[contribution.type])) }, { children: (0, contribution_1.getContributionSnippet)(contribution) })), action: contribution && ((0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: contribution.suspended ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: 'ui.notification.notificationSuspended', defaultMessage: 'ui.notification.notificationSuspended' })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: 'ui.notification.notificationSuspend', defaultMessage: 'ui.notification.notificationSuspend' })) }, { children: (0, jsx_runtime_1.jsx)(LoadingButton_1.default, Object.assign({ variant: "text", size: "small", loading: loadingSuspendNotification, color: 'inherit', classes: { root: classes.stopButton }, onClick: () => handleStopContentNotification(contribution) }, { children: contribution.suspended ? (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ color: 'primary' }, { children: "notifications_off" })) : (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ color: 'inherit' }, { children: "notifications_active" })) })) }))) }));
         }
         return null;
     }
@@ -309,6 +307,14 @@ function UserNotification(inProps) {
             n.type === types_1.SCNotificationTypologyType.USER_REQUESTED_TO_JOIN_EVENT) {
             return (0, jsx_runtime_1.jsx)(Event_1.default, { notificationObject: n }, i);
         }
+        else if (n.type === types_1.SCNotificationTypologyType.USER_ADDED_TO_COURSE ||
+            n.type === types_1.SCNotificationTypologyType.MANAGER_ADDED_TO_COURSE ||
+            n.type === types_1.SCNotificationTypologyType.USER_COMMENTED_A_COURSE_LESSON ||
+            n.type === types_1.SCNotificationTypologyType.USER_INVITED_TO_JOIN_COURSE ||
+            n.type === types_1.SCNotificationTypologyType.USER_ACCEPTED_TO_JOIN_COURSE ||
+            n.type === types_1.SCNotificationTypologyType.USER_REQUESTED_TO_JOIN_COURSE) {
+            return (0, jsx_runtime_1.jsx)(Course_1.default, { notificationObject: n }, i);
+        }
         else if (n.type === types_1.SCNotificationTypologyType.LIVE_STREAM_STARTED) {
             return (0, jsx_runtime_1.jsx)(LiveStream_1.default, { notificationObject: n }, i);
         }
@@ -317,6 +323,6 @@ function UserNotification(inProps) {
     /**
      * Renders root object
      */
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [renderNotificationHeader(), (0, jsx_runtime_1.jsxs)(CardContent_1.default, Object.assign({ className: classes.content }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: classes.unCollapsed }, { children: notificationObject.aggregated.slice(0, showMaxAggregated).map((n, i) => renderAggregatedItem(n, i)) })), notificationObject.aggregated.length > showMaxAggregated && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.ListItemButton, Object.assign({ onClick: setStateAggregated, classes: { root: classes.showOtherAggregated } }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: 'ui.notification.showOthers', defaultMessage: 'ui.notification.showOthers' }) }), openOtherAggregated ? (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "expand_less" }) : (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "expand_more" })] })), (0, jsx_runtime_1.jsx)(material_1.Collapse, Object.assign({ in: openOtherAggregated, timeout: "auto", unmountOnExit: true, classes: { root: classes.collapsed } }, { children: notificationObject.aggregated.slice(showMaxAggregated).map((n, i) => renderAggregatedItem(n, i)) }))] }))] }))] })), openAlert && (0, jsx_runtime_1.jsx)(UserDeletedSnackBar_1.default, { open: openAlert, handleClose: () => setOpenAlert(false) })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [renderNotificationHeader(), (0, jsx_runtime_1.jsxs)(material_1.CardContent, Object.assign({ className: classes.content }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: classes.unCollapsed }, { children: notificationObject.aggregated.slice(0, showMaxAggregated).map((n, i) => renderAggregatedItem(n, i)) })), notificationObject.aggregated.length > showMaxAggregated && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.ListItemButton, Object.assign({ onClick: setStateAggregated, classes: { root: classes.showOtherAggregated } }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: 'ui.notification.showOthers', defaultMessage: 'ui.notification.showOthers' }) }), openOtherAggregated ? (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "expand_less" }) : (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "expand_more" })] })), (0, jsx_runtime_1.jsx)(material_1.Collapse, Object.assign({ in: openOtherAggregated, timeout: "auto", unmountOnExit: true, classes: { root: classes.collapsed } }, { children: notificationObject.aggregated.slice(showMaxAggregated).map((n, i) => renderAggregatedItem(n, i)) }))] }))] }))] })), openAlert && (0, jsx_runtime_1.jsx)(UserDeletedSnackBar_1.default, { open: openAlert, handleClose: () => setOpenAlert(false) })] }));
 }
 exports.default = UserNotification;

package/lib/cjs/components/Notification/PrivateMessage/PrivateMessage.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const styles_1 = require("@mui/material/styles");
 const material_1 = require("@mui/material");
 const react_core_1 = require("@selfcommunity/react-core");
 const react_intl_1 = require("react-intl");
@@ -32,7 +31,7 @@ const classes = {
     messageWrap: `${constants_1.PREFIX}-message-wrap`,
     message: `${constants_1.PREFIX}-message`
 };
-const Root = (0, styles_1.styled)(NotificationItem_1.default, {
+const Root = (0, material_1.styled)(NotificationItem_1.default, {
     name: constants_1.PREFIX,
     slot: 'PrivateMessageRoot'
 })(() => ({}));

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

@@ -3,16 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = tslib_1.__importDefault(require("react"));
-const CardContent_1 = tslib_1.__importDefault(require("@mui/material/CardContent"));
-const styles_1 = require("@mui/material/styles");
 const material_1 = require("@mui/material");
-const Skeleton_1 = tslib_1.__importDefault(require("@mui/material/Skeleton"));
 const Widget_1 = tslib_1.__importDefault(require("../Widget"));
 const constants_1 = require("./constants");
 const classes = {
     root: `${constants_1.PREFIX}-skeleton-root`
 };
-const Root = (0, styles_1.styled)(Widget_1.default, {
+const Root = (0, material_1.styled)(Widget_1.default, {
     name: constants_1.PREFIX,
     slot: 'SkeletonRoot'
 })(() => ({}));
@@ -38,7 +35,7 @@ const Root = (0, styles_1.styled)(Widget_1.default, {
  */
 function NotificationSkeleton(props) {
     const theme = (0, material_1.useTheme)();
-    const notification = ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(material_1.CardHeader, { avatar: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", variant: "circular", width: theme.selfcommunity.user.avatar.sizeMedium, height: theme.selfcommunity.user.avatar.sizeMedium }), title: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", height: 10, width: "80%", style: { marginBottom: 6 } }), subheader: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", height: 10, width: "40%" }) }) }));
-    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: classes.root }, props, { children: [(0, jsx_runtime_1.jsxs)(CardContent_1.default, Object.assign({ sx: { paddingBottom: 1 } }, { children: [(0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", height: 20, style: { marginBottom: 0 } }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", height: 15, width: "60%", style: { marginBottom: 0 } })] })), [...Array(Math.floor(Math.random() * 5) + 1)].map((x, i) => ((0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: notification }, i)))] })));
+    const notification = ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(material_1.CardHeader, { avatar: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "circular", width: theme.selfcommunity.user.avatar.sizeMedium, height: theme.selfcommunity.user.avatar.sizeMedium }), title: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 10, width: "80%", style: { marginBottom: 6 } }), subheader: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 10, width: "40%" }) }) }));
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: classes.root }, props, { children: [(0, jsx_runtime_1.jsxs)(material_1.CardContent, Object.assign({ sx: { paddingBottom: 1 } }, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 20, style: { marginBottom: 0 } }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 15, width: "60%", style: { marginBottom: 0 } })] })), [...Array(Math.floor(Math.random() * 5) + 1)].map((x, i) => ((0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: notification }, i)))] })));
 }
 exports.default = NotificationSkeleton;