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

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

@@ -1,7 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { styled } from '@mui/material/styles';
-import { Box, Card, CardContent, ListSubheader, Skeleton, useMediaQuery, useTheme } from '@mui/material';
-import List from '@mui/material/List';
+import { Box, Card, CardContent, ListSubheader, Skeleton, useMediaQuery, useTheme, styled, List } from '@mui/material';
 import PrivateMessageThreadItemSkeleton from '../PrivateMessageThreadItem/Skeleton';
 import { PREFIX } from './constants';
 const classes = {

package/lib/esm/components/PrivateMessageThreadItem/PrivateMessageThreadItem.js

@@ -1,16 +1,13 @@
 import { __awaiter, __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useContext, useState } from 'react';
-import { styled } from '@mui/material/styles';
-import { ListItem, Typography, IconButton, Box, useTheme, Button } from '@mui/material';
+import { ListItem, Typography, IconButton, Box, useTheme, Button, styled, Icon, useMediaQuery } from '@mui/material';
 import PrivateMessageThreadItemSkeleton from './Skeleton';
 import { useIntl } from 'react-intl';
 import { SCMessageFileType, SCPrivateMessageStatusType } from '@selfcommunity/types';
-import Icon from '@mui/material/Icon';
 import classNames from 'classnames';
 import { useThemeProps } from '@mui/system';
 import { SCUserContext } from '@selfcommunity/react-core';
-import useMediaQuery from '@mui/material/useMediaQuery';
 import PrivateMessageSettingsIconButton from '../PrivateMessageSettingsIconButton';
 import { bytesToSize } from '../../utils/sizeCoverter';
 import BaseDialog from '../../shared/BaseDialog';
@@ -130,18 +127,18 @@ export default function PrivateMessageThreadItem(inProps) {
             let type = m.file.mimetype;
             switch (true) {
                 case type.startsWith(SCMessageFileType.IMAGE):
-                    section = (_jsx(Box, Object.assign({ className: classes.img }, { children: _jsx("img", { src: m.file.thumbnail, loading: "lazy", alt: 'img', onClick: () => setOpenDialog(true) }) })));
+                    section = (_jsx(Box, Object.assign({ className: classes.img }, { children: _jsx("img", { src: m.file.thumbnail, loading: "lazy", alt: "img", onClick: () => setOpenDialog(true) }) })));
                     break;
                 case type.startsWith(SCMessageFileType.VIDEO):
                     if (!isSupportedVideoFormat(m.file.filename)) {
                         section = defaultSection;
                     }
                     else {
-                        section = (_jsxs(Box, Object.assign({ className: classNames(classes.img, classes.video) }, { children: [_jsx("img", { src: m.file.thumbnail, loading: "lazy", alt: 'img' }), _jsx(IconButton, Object.assign({ onClick: () => setOpenDialog(true) }, { children: _jsx(Icon, { children: "play_circle_outline" }) }))] })));
+                        section = (_jsxs(Box, Object.assign({ className: classNames(classes.img, classes.video) }, { children: [_jsx("img", { src: m.file.thumbnail, loading: "lazy", alt: "img" }), _jsx(IconButton, Object.assign({ onClick: () => setOpenDialog(true) }, { children: _jsx(Icon, { children: "play_circle_outline" }) }))] })));
                     }
                     break;
                 case type.startsWith(SCMessageFileType.DOCUMENT):
-                    section = (_jsxs(Box, Object.assign({ className: m.file.filename.endsWith('.pdf') ? classes.document : classes.other }, { children: [m.file.filename.endsWith('.pdf') && _jsx("img", { src: m.file.thumbnail, loading: "lazy", alt: 'img' }), _jsxs(Button, Object.assign({ onClick: () => handleDownload(m.file), startIcon: _jsx(Icon, { children: "download" }) }, { children: [_jsx(Typography, { children: m.file.filename }), _jsx(Typography, { children: bytesToSize(m.file.filesize) })] }))] })));
+                    section = (_jsxs(Box, Object.assign({ className: m.file.filename.endsWith('.pdf') ? classes.document : classes.other }, { children: [m.file.filename.endsWith('.pdf') && _jsx("img", { src: m.file.thumbnail, loading: "lazy", alt: "img" }), _jsxs(Button, Object.assign({ onClick: () => handleDownload(m.file), startIcon: _jsx(Icon, { children: "download" }) }, { children: [_jsx(Typography, { children: m.file.filename }), _jsx(Typography, { children: bytesToSize(m.file.filesize) })] }))] })));
                     break;
                 default:
                     // section = <Icon>hide_image</Icon>;
@@ -162,5 +159,5 @@ export default function PrivateMessageThreadItem(inProps) {
             message.status !== SCPrivateMessageStatusType.HIDDEN && _jsx(PrivateMessageSettingsIconButton, { onMenuItemDeleteClick: handleMenuItemClick }) }, { children: [message.group && ((_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.username) !== message.sender.username && (_jsx(Typography, Object.assign({ color: "secondary", variant: "h4", className: classes.username }, { children: message.sender.username }))), _jsxs(_Fragment, { children: [hasFile && message.status !== SCPrivateMessageStatusType.HIDDEN ? (renderMessageFile(message)) : (_jsx(Box, Object.assign({ className: classes.text }, { children: _jsx(Typography, { component: "span", dangerouslySetInnerHTML: { __html: message.message } }) }))), _jsx(Typography, Object.assign({ className: classes.messageTime, color: "text.secondary" }, { children: `${intl.formatDate(message.created_at, {
                             hour: 'numeric',
                             minute: 'numeric'
-                        })}` }))] }), openDialog && (_jsx(_Fragment, { children: (message === null || message === void 0 ? void 0 : message.file.mimetype.startsWith(SCMessageFileType.VIDEO)) ? (_jsx(DialogRoot, Object.assign({ open: openDialog, onClose: () => setOpenDialog(false), className: classes.dialogRoot }, { children: _jsx(AutoPlayer, { url: message === null || message === void 0 ? void 0 : message.file.url, width: '100%', enableAutoplay: false }) }))) : (_jsx(LightBox, { images: [{ src: message === null || message === void 0 ? void 0 : message.file.url, key: message.file.uuid }], onClose: () => setOpenDialog(false), toolbarButtons: _jsx(IconButton, Object.assign({ onClick: () => handleDownload(message === null || message === void 0 ? void 0 : message.file), className: classes.downloadButton }, { children: _jsx(Icon, { children: "download" }) }), 'download') })) }))] })));
+                        })}` }))] }), openDialog && (_jsx(_Fragment, { children: (message === null || message === void 0 ? void 0 : message.file.mimetype.startsWith(SCMessageFileType.VIDEO)) ? (_jsx(DialogRoot, Object.assign({ open: openDialog, onClose: () => setOpenDialog(false), className: classes.dialogRoot }, { children: _jsx(AutoPlayer, { url: message === null || message === void 0 ? void 0 : message.file.url, width: "100%" }) }))) : (_jsx(LightBox, { images: [{ src: message === null || message === void 0 ? void 0 : message.file.url, key: message.file.uuid }], onClose: () => setOpenDialog(false), toolbarButtons: _jsx(IconButton, Object.assign({ onClick: () => handleDownload(message === null || message === void 0 ? void 0 : message.file), className: classes.downloadButton }, { children: _jsx(Icon, { children: "download" }) }), "download") })) }))] })));
 }

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

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

package/lib/esm/components/RelatedEventsWidget/RelatedEventsWidget.js

@@ -49,7 +49,6 @@ const DialogRoot = styled(BaseDialog, {
     overridesResolver: (_props, styles) => styles.dialogRoot
 })(() => ({}));
 export default function RelatedEventsWidget(inProps) {
-    var _a;
     // PROPS
     const props = useThemeProps({
         props: inProps,
@@ -119,5 +118,5 @@ export default function RelatedEventsWidget(inProps) {
     if (!scEvent || (state === null || state === void 0 ? void 0 : state.count) === 0) {
         return _jsx(HiddenPlaceholder, {});
     }
-    return (_jsxs(Root, Object.assign({ className: classes.root }, rest, { children: [_jsxs(CardContent, Object.assign({ className: classes.content }, { children: [_jsxs(Stack, Object.assign({ className: classes.header }, { children: [_jsx(Button, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, { id: (_a = scUserContext.user) === null || _a === void 0 ? void 0 : _a.id }), className: classes.avatarWrapper }, { children: _jsx(Avatar, { variant: "rounded", src: scEvent.managed_by.avatar, alt: scEvent.managed_by.username, className: classes.avatar }) })), _jsx(Typography, Object.assign({ variant: "h4" }, { children: _jsx("b", { children: intl.formatMessage(messages.title, { user: scEvent.managed_by.username }) }) }))] })), _jsx(Stack, Object.assign({ className: classes.eventWrapper }, { children: state === null || state === void 0 ? void 0 : state.results.map((_event, i, array) => (_jsxs(Fragment, { children: [_jsx(Event, Object.assign({ event: _event, eventId: _event.id }, eventComponentProps, { className: classes.event })), i < array.length - 1 && _jsx(Divider, {})] }, i))) }))] })), state.count > state.visibleItems && (_jsx(CardActions, Object.assign({ className: classes.actions }, { children: _jsx(Button, Object.assign({ onClick: handleToggleDialogOpen, className: classes.actionButton }, { children: _jsx(Typography, Object.assign({ variant: "caption" }, { children: _jsx(FormattedMessage, { id: "ui.relatedEventsWidget.showAll", defaultMessage: "ui.relatedEventsWidget.showAll" }) })) })) }))), _jsx(DialogRoot, Object.assign({ className: classes.dialogRoot, title: intl.formatMessage(messages.title, { user: scEvent.managed_by.username }), onClose: handleToggleDialogOpen, open: openDialog }, dialogProps, { children: _jsx(InfiniteScroll, Object.assign({ dataLength: state.results.length, next: handleNext, hasMoreNext: Boolean(state.next), loaderNext: _jsx(EventSkeleton, Object.assign({ elevation: 0 }, eventComponentProps)), className: classes.infiniteScroll, endMessage: _jsx(Typography, Object.assign({ className: classes.endMessage }, { children: _jsx(FormattedMessage, { id: "ui.relatedEventsWidget.noMoreResults", defaultMessage: "ui.eventMembersWidget.noMoreResults" }) })) }, { children: _jsx(List, { children: state.results.map((event) => (_jsx(ListItem, { children: _jsx(Event, Object.assign({ elevation: 0, event: event }, eventComponentProps)) }, event.id))) }) })) }))] })));
+    return (_jsxs(Root, Object.assign({ className: classes.root }, rest, { children: [_jsxs(CardContent, Object.assign({ className: classes.content }, { children: [_jsxs(Stack, Object.assign({ className: classes.header }, { children: [_jsx(Button, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, scEvent.managed_by), className: classes.avatarWrapper }, { children: _jsx(Avatar, { variant: "rounded", src: scEvent.managed_by.avatar, alt: scEvent.managed_by.username, className: classes.avatar }) })), _jsx(Typography, Object.assign({ variant: "h4" }, { children: _jsx("b", { children: intl.formatMessage(messages.title, { user: scEvent.managed_by.username }) }) }))] })), _jsx(Stack, Object.assign({ className: classes.eventWrapper }, { children: state === null || state === void 0 ? void 0 : state.results.map((_event, i, array) => (_jsxs(Fragment, { children: [_jsx(Event, Object.assign({ event: _event, eventId: _event.id }, eventComponentProps, { className: classes.event })), i < array.length - 1 && _jsx(Divider, {})] }, i))) }))] })), state.count > state.visibleItems && (_jsx(CardActions, Object.assign({ className: classes.actions }, { children: _jsx(Button, Object.assign({ onClick: handleToggleDialogOpen, className: classes.actionButton }, { children: _jsx(Typography, Object.assign({ variant: "caption" }, { children: _jsx(FormattedMessage, { id: "ui.relatedEventsWidget.showAll", defaultMessage: "ui.relatedEventsWidget.showAll" }) })) })) }))), _jsx(DialogRoot, Object.assign({ className: classes.dialogRoot, title: intl.formatMessage(messages.title, { user: scEvent.managed_by.username }), onClose: handleToggleDialogOpen, open: openDialog }, dialogProps, { children: _jsx(InfiniteScroll, Object.assign({ dataLength: state.results.length, next: handleNext, hasMoreNext: Boolean(state.next), loaderNext: _jsx(EventSkeleton, Object.assign({ elevation: 0 }, eventComponentProps)), className: classes.infiniteScroll, endMessage: _jsx(Typography, Object.assign({ className: classes.endMessage }, { children: _jsx(FormattedMessage, { id: "ui.relatedEventsWidget.noMoreResults", defaultMessage: "ui.eventMembersWidget.noMoreResults" }) })) }, { children: _jsx(List, { children: state.results.map((event) => (_jsx(ListItem, { children: _jsx(Event, Object.assign({ elevation: 0, event: event }, eventComponentProps)) }, event.id))) }) })) }))] })));
 }

package/lib/esm/components/RelatedFeedObjectsWidget/RelatedFeedObjectsWidget.js

@@ -1,9 +1,7 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useEffect, useMemo, useReducer, useState } from 'react';
-import { styled } from '@mui/material/styles';
-import List from '@mui/material/List';
-import { Button, CardContent, ListItem, Typography, useMediaQuery, useTheme } from '@mui/material';
+import { Button, CardContent, ListItem, Typography, useMediaQuery, useTheme, styled, List } from '@mui/material';
 import { SCOPE_SC_UI } from '../../constants/Errors';
 import { SCCache, SCPreferences, useSCFetchFeedObject, useSCPreferences, useSCUser } from '@selfcommunity/react-core';
 import FeedObject, { FeedObjectSkeleton } from '../FeedObject';

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

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

package/lib/esm/components/SearchAutocomplete/SearchAutocomplete.js

@@ -1,7 +1,6 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Autocomplete, Avatar, Box, Fade, IconButton, styled, TextField, Typography } from '@mui/material';
-import Icon from '@mui/material/Icon';
+import { Autocomplete, Avatar, Box, Fade, IconButton, styled, TextField, Typography, Icon } from '@mui/material';
 import { useEffect, useState } from 'react';
 import classNames from 'classnames';
 import { useThemeProps } from '@mui/system';

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

@@ -6,7 +6,10 @@ export interface SearchDialogProps extends DialogProps {
      * @default null
      */
     className?: string;
-    SearchAutocompleteProps: SearchAutocompleteProps;
+    /**
+     * Overrides props for the SearchAutocomplete component.
+     */
+    SearchAutocompleteComponentProps: SearchAutocompleteProps;
     /**
      * Other props
      */

package/lib/esm/components/SearchDialog/SearchDialog.js

@@ -28,6 +28,6 @@ export default function Search(inProps) {
         props: inProps,
         name: PREFIX
     });
-    const { className, SearchAutocompleteProps = { autoFocus: true } } = props, rest = __rest(props, ["className", "SearchAutocompleteProps"]);
-    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: _jsx(DialogContent, { children: _jsx(SearchAutocomplete, Object.assign({ className: classes.search, blurOnSelect: false, open: true, disablePortal: true }, SearchAutocompleteProps)) }) })));
+    const { className, SearchAutocompleteComponentProps = { autoFocus: true } } = props, rest = __rest(props, ["className", "SearchAutocompleteComponentProps"]);
+    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: _jsx(DialogContent, { children: _jsx(SearchAutocomplete, Object.assign({ className: classes.search, blurOnSelect: false, open: true, disablePortal: true }, SearchAutocompleteComponentProps)) }) })));
 }

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

@@ -1,7 +1,6 @@
 import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { styled } from '@mui/material/styles';
-import { Avatar, AvatarGroup, Skeleton, useTheme } from '@mui/material';
+import { Avatar, AvatarGroup, Skeleton, useTheme, styled } from '@mui/material';
 import { useThemeProps } from '@mui/system';
 const PREFIX = 'SCAvatarGroupSkeleton';
 const classes = {

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

@@ -1,8 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Widget from '../Widget';
-import { styled } from '@mui/material/styles';
-import Skeleton from '@mui/material/Skeleton';
-import { CardContent } from '@mui/material';
+import { styled, Skeleton, CardContent } from '@mui/material';
 const PREFIX = 'SCGenericSkeleton';
 const classes = {
     root: `${PREFIX}-root`,

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

@@ -1,7 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { styled } from '@mui/material/styles';
-import { List, ListItem, useTheme } from '@mui/material';
-import Skeleton from '@mui/material/Skeleton';
+import { List, ListItem, useTheme, styled, Skeleton } from '@mui/material';
 import NotificationItem from '../../shared/NotificationItem';
 import { SCNotificationObjectTemplateType } from '../../types/notification';
 import { PREFIX } from './constants';

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

@@ -2,7 +2,7 @@ import { CardProps } from '@mui/material';
 export interface SnippetNotificationsProps extends CardProps {
     /**
      * Id of the UserNotification
-     * @default `notification_<notificationObject.sid>`
+     * @default `notification_notificationObject.sid`
      */
     id?: string;
     /**

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

@@ -1,7 +1,6 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useRef, useState } from 'react';
-import { styled } from '@mui/material/styles';
 import CommentNotification from '../Notification/Comment';
 import UserFollowNotification from '../Notification/UserFollow';
 import UndeletedForNotification from '../Notification/UndeletedFor';
@@ -17,7 +16,7 @@ import VoteUpNotification from '../Notification/VoteUp';
 import { SCOPE_SC_UI } from '../../constants/Errors';
 import PubSub from 'pubsub-js';
 import ContributionFollowNotification from '../Notification/ContributionFollow';
-import { Avatar, Box, MenuItem, MenuList, Typography } from '@mui/material';
+import { Avatar, Box, MenuItem, MenuList, Typography, styled } from '@mui/material';
 import IncubatorApprovedNotification from '../Notification/IncubatorApproved';
 import classNames from 'classnames';
 import Skeleton from './Skeleton';
@@ -35,6 +34,7 @@ import { PREFIX } from './constants';
 import GroupNotification from '../Notification/Group';
 import EventNotification from '../Notification/Event/Event';
 import LiveStreamNotification from '../Notification/LiveStream';
+import CourseNotification from '../Notification/Course';
 const classes = {
     root: `${PREFIX}-root`,
     notificationsWrap: `${PREFIX}-notifications-wrap`,
@@ -268,6 +268,14 @@ export default function SnippetNotifications(inProps) {
             n.type === SCNotificationTypologyType.USER_REQUESTED_TO_JOIN_EVENT) {
             return _jsx(EventNotification, { notificationObject: n, template: SCNotificationObjectTemplateType.SNIPPET }, i);
         }
+        else if (n.type === SCNotificationTypologyType.USER_ADDED_TO_COURSE ||
+            n.type === SCNotificationTypologyType.MANAGER_ADDED_TO_COURSE ||
+            n.type === SCNotificationTypologyType.USER_COMMENTED_A_COURSE_LESSON ||
+            n.type === SCNotificationTypologyType.USER_INVITED_TO_JOIN_COURSE ||
+            n.type === SCNotificationTypologyType.USER_ACCEPTED_TO_JOIN_COURSE ||
+            n.type === SCNotificationTypologyType.USER_REQUESTED_TO_JOIN_COURSE) {
+            return _jsx(CourseNotification, { notificationObject: n, template: SCNotificationObjectTemplateType.SNIPPET }, i);
+        }
         else if (type === SCNotificationTypologyType.LIVE_STREAM_STARTED) {
             content = _jsx(LiveStreamNotification, { notificationObject: n, template: SCNotificationObjectTemplateType.SNIPPET }, i);
         }

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

@@ -1,6 +1,5 @@
-import { TextFieldProps } from '@mui/material/TextField';
-import { AutocompleteProps } from '@mui/material';
-import { SCTagType } from '@selfcommunity/types/src/index';
+import { AutocompleteProps, TextFieldProps } from '@mui/material';
+import { SCTagType } from '@selfcommunity/types';
 import { TagChipProps } from '../../shared/TagChip';
 export interface TagAutocompleteProps extends Pick<AutocompleteProps<SCTagType | null, any, any, any>, Exclude<keyof AutocompleteProps<SCTagType | null, any, any, any>, 'open' | 'onOpen' | 'onClose' | 'onChange' | 'filterSelectedOptions' | 'disableCloseOnSelect' | 'options' | 'getOptionLabel' | 'value' | 'selectOnFocus' | 'clearOnBlur' | 'blurOnSelect' | 'handleHomeEndKeys' | 'noOptionsText' | 'isOptionEqualToValue' | 'renderTags' | 'renderOption' | 'renderInput'>> {
     defaultValue: SCTagType[] | any;

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

@@ -2,12 +2,10 @@ import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import React, { useEffect, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
-import Autocomplete from '@mui/material/Autocomplete';
-import TextField from '@mui/material/TextField';
 import parse from 'autosuggest-highlight/parse';
 import match from 'autosuggest-highlight/match';
+import { Autocomplete, TextField, styled } from '@mui/material';
 import { useSCFetchAddressingTagList } from '@selfcommunity/react-core';
-import { styled } from '@mui/material/styles';
 import { useThemeProps } from '@mui/system';
 import TagChip from '../../shared/TagChip';
 const PREFIX = 'SCTagAutocomplete';
@@ -17,7 +15,7 @@ const classes = {
 const Root = styled(Autocomplete, {
     name: PREFIX,
     slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
+    overridesResolver: (_props, styles) => styles.root
 })(() => ({}));
 /**
  * > API documentation for the Community-JS Tag Autocomplete component. Learn about the available props and the CSS API.
@@ -73,7 +71,7 @@ const TagAutocomplete = (inProps) => {
     const handleClose = () => {
         setOpen(false);
     };
-    const handleChange = (event, newValue) => {
+    const handleChange = (_event, newValue) => {
         setValue(newValue);
     };
     // Render

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

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

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

@@ -1,7 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useRef } from 'react';
-import { styled } from '@mui/material/styles';
-import { Box } from '@mui/material';
+import { Box, styled } from '@mui/material';
 import { SCNotification, useSCAlertMessages, useSCContext, useSCUser } from '@selfcommunity/react-core';
 import { SCNotificationTopicType, SCNotificationTypologyType } from '@selfcommunity/types';
 import PubSub from 'pubsub-js';
@@ -25,6 +24,7 @@ import ContributionNotification from '../Notification/Contribution';
 import GroupNotification from '../Notification/Group';
 import EventNotification from '../Notification/Event/Event';
 import LiveStreamNotification from '../Notification/LiveStream';
+import CourseNotification from '../Notification/Course';
 const Root = styled(Box, {
     name: PREFIX,
     slot: 'Root'
@@ -124,6 +124,14 @@ export default function UserToastNotifications(inProps) {
                 type === SCNotificationTypologyType.USER_REQUESTED_TO_JOIN_EVENT) {
                 content = _jsx(EventNotification, { notificationObject: n.notification_obj, template: SCNotificationObjectTemplateType.TOAST });
             }
+            else if (type === SCNotificationTypologyType.USER_ADDED_TO_COURSE ||
+                type === SCNotificationTypologyType.MANAGER_ADDED_TO_COURSE ||
+                type === SCNotificationTypologyType.USER_COMMENTED_A_COURSE_LESSON ||
+                type === SCNotificationTypologyType.USER_INVITED_TO_JOIN_COURSE ||
+                type === SCNotificationTypologyType.USER_ACCEPTED_TO_JOIN_COURSE ||
+                type === SCNotificationTypologyType.USER_REQUESTED_TO_JOIN_COURSE) {
+                content = _jsx(CourseNotification, { notificationObject: n.notification_obj, template: SCNotificationObjectTemplateType.TOAST });
+            }
             else if (type === SCNotificationTypologyType.LIVE_STREAM_STARTED) {
                 content = _jsx(LiveStreamNotification, { notificationObject: n.notification_obj, template: SCNotificationObjectTemplateType.TOAST });
             }
@@ -157,17 +165,9 @@ export default function UserToastNotifications(inProps) {
              * - the enqueue message is persistent (it remains on the screen while the others replace each other) if type notification_banner
              */
             const messageKey = data.data.feed_serialization_id ? data.data.feed_serialization_id : data.data.id;
-            enqueueSnackbar(getContent(data.data), {
-                preventDuplicate: true,
-                key: messageKey,
-                variant: 'notification',
-                persist: data.data.activity_type === SCNotificationTypologyType.NOTIFICATION_BANNER ? true : false,
-                anchorOrigin: { horizontal: 'left', vertical: 'bottom' },
-                action: null,
-                SnackbarProps: {
+            enqueueSnackbar(getContent(data.data), Object.assign(Object.assign({ preventDuplicate: true, key: messageKey, variant: 'notification', persist: data.data.activity_type === SCNotificationTypologyType.NOTIFICATION_BANNER }, (data.data.activity_type !== SCNotificationTypologyType.NOTIFICATION_BANNER && { autoHideDuration: 10000 })), { anchorOrigin: { horizontal: 'left', vertical: 'bottom' }, action: null, SnackbarProps: {
                     id: messageKey
-                }
-            });
+                } }));
         }
     };
     /**

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

@@ -1,7 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Button, useTheme } from '@mui/material';
-import { styled } from '@mui/material/styles';
-import Skeleton from '@mui/material/Skeleton';
+import { Button, useTheme, styled, Skeleton } from '@mui/material';
 import BaseItem from '../../shared/BaseItem';
 import { PREFIX } from './constants';
 const classes = {

package/lib/esm/components/User/User.js

@@ -1,7 +1,6 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Avatar, Badge, Button, Chip } from '@mui/material';
-import { styled } from '@mui/material/styles';
+import { Avatar, Badge, Button, Chip, styled } from '@mui/material';
 import { useThemeProps } from '@mui/system';
 import { Link, SCPreferences, SCRoutes, useSCFetchUser, useSCPreferences, useSCRouting } from '@selfcommunity/react-core';
 import classNames from 'classnames';

package/lib/esm/components/UserActionIconButton/UserActionIconButton.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, { useEffect, useMemo, useState } from 'react';
-import { styled } from '@mui/material/styles';
-import { Divider, Icon, IconButton, List, ListItem, ListItemButton, ListItemText, Menu, MenuItem, Slide, SwipeableDrawer, useMediaQuery, useTheme } from '@mui/material';
+import { Divider, Icon, IconButton, List, ListItem, ListItemButton, ListItemText, Menu, MenuItem, Slide, SwipeableDrawer, useMediaQuery, useTheme, styled } from '@mui/material';
 import { Link, UserUtils, useSCContext, useSCFetchUser, useSCUser } from '@selfcommunity/react-core';
 import { http, Endpoints } from '@selfcommunity/api-services';
 import classNames from 'classnames';

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

@@ -0,0 +1,41 @@
+import { BaseDialogProps } from '../../shared/BaseDialog';
+import { PaymentMethod as StripePaymentMethod } from '@stripe/stripe-js';
+export interface UserAddPaymentMethodDialogProps extends BaseDialogProps {
+    /**
+     * Overrides or extends the styles applied to the component.
+     * @default null
+     */
+    className?: string;
+    /**
+     * Callback handle address
+     * @param address
+     */
+    handlePaymentMethod?: (paymentMethod: StripePaymentMethod) => void;
+    /**
+     * Any other properties
+     */
+    [p: string]: any;
+}
+/**
+ * > API documentation for the Community-JS User Add Payment Method Dialog. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {UserAddPaymentMethodDialog} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCUserAddPaymentMethodDialog` can be used when providing style overrides in the theme.
+
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCUserAddPaymentMethodDialog-root|Styles applied to the root element.|
+
+ * @param inProps
+ */
+export default function UserAddPaymentMethodDialog(inProps: UserAddPaymentMethodDialogProps): JSX.Element;

package/lib/esm/components/UserAddPaymentMethodDialog/UserAddPaymentMethodDialog.js

@@ -0,0 +1,91 @@
+import { __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useEffect, useState } from 'react';
+import { styled, useTheme } from '@mui/material/styles';
+import { useSCPaymentsEnabled, useSCUser } from '@selfcommunity/react-core';
+import { useThemeProps } from '@mui/system';
+import { PREFIX } from './constants';
+import BaseDialog from '../../shared/BaseDialog';
+import { FormattedMessage, useIntl } from 'react-intl';
+import { loadStripe } from '@stripe/stripe-js';
+import { StripeCurrency } from '../../types/payment';
+import { Box, CircularProgress } from '@mui/material';
+import { Elements } from '@stripe/react-stripe-js';
+import { getDefaultAppearanceStyle, getDefaultLocale } from '../../utils/payment';
+import UserAddPaymentMethodForm from '../UserAddPaymentMethodForm';
+const classes = {
+    root: `${PREFIX}-root`,
+    loading: `${PREFIX}-loading`
+};
+const Root = styled(BaseDialog, {
+    name: PREFIX,
+    slot: 'Root'
+})(() => ({
+    [`& .MuiDialogContent-root`]: {
+        overflowX: 'hidden'
+    },
+    [`& .${classes.loading}`]: {
+        marginTop: '200px'
+    }
+}));
+/**
+ * > API documentation for the Community-JS User Add Payment Method Dialog. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {UserAddPaymentMethodDialog} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCUserAddPaymentMethodDialog` can be used when providing style overrides in the theme.
+
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCUserAddPaymentMethodDialog-root|Styles applied to the root element.|
+
+ * @param inProps
+ */
+export default function UserAddPaymentMethodDialog(inProps) {
+    // PROPS
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX
+    });
+    const { className = null, handlePaymentMethod, open = false } = props, rest = __rest(props, ["className", "handlePaymentMethod", "open"]);
+    // CONTEXT
+    const scUserContext = useSCUser();
+    // STATE
+    const [isLoadingInit, setIsLoadingInit] = React.useState(true);
+    const [customer, setCustomer] = useState(null);
+    // HOOKS
+    const { isPaymentsEnabled, stripePublicKey, stripeConnectedAccountId } = useSCPaymentsEnabled();
+    const intl = useIntl();
+    const stripePromise = isPaymentsEnabled && stripePublicKey && stripeConnectedAccountId && loadStripe
+        ? loadStripe(stripePublicKey, { stripeAccount: stripeConnectedAccountId, locale: getDefaultLocale(intl).locale })
+        : null;
+    const theme = useTheme();
+    const elementsOptions = Object.assign(Object.assign({ mode: 'setup', currency: StripeCurrency.EUR, paymentMethodCreation: 'manual', loader: 'always' }, getDefaultAppearanceStyle(theme)), getDefaultLocale(intl));
+    const handleClose = () => {
+        handlePaymentMethod === null || handlePaymentMethod === void 0 ? void 0 : handlePaymentMethod(null);
+    };
+    const handleSuccess = (paymentMethod) => {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        handlePaymentMethod === null || handlePaymentMethod === void 0 ? void 0 : handlePaymentMethod(paymentMethod);
+    };
+    useEffect(() => {
+        /* getAccountCustomer().then((customer) => {
+                setCustomer(customer);
+                setIsLoadingInit(false);
+            }); */
+    }, []);
+    if (!isPaymentsEnabled || !scUserContext.user) {
+        return null;
+    }
+    return (_jsx(Root, Object.assign({ title: _jsx(FormattedMessage, { defaultMessage: "ui.userAddPaymentMethodDialog.title", id: "ui.userAddPaymentMethodDialog.title" }), open: open }, { children: isLoadingInit ? (_jsx(Box, Object.assign({ className: classes.loading }, { children: _jsx(CircularProgress, {}) }))) : (_jsx(Elements, Object.assign({ stripe: stripePromise, options: elementsOptions }, { children: _jsx(UserAddPaymentMethodForm, { customer: customer, handleSuccess: handleSuccess, handleClose: handleClose }) }))) })));
+}

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

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

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

@@ -0,0 +1 @@
+export const PREFIX = 'SCUserAddPaymentMethodDialog';

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

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

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

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

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

@@ -0,0 +1,40 @@
+import { BaseDialogProps } from '../../shared/BaseDialog';
+import { PaymentMethod as StripePaymentMethod } from '@stripe/stripe-js';
+export interface UserAddPaymentMethodFormProps extends BaseDialogProps {
+    /**
+     * Overrides or extends the styles applied to the component.
+     * @default null
+     */
+    className?: string;
+    customer: any;
+    collectBillingAddress?: boolean;
+    handleSuccess?: (paymentMethod: StripePaymentMethod) => void;
+    handleClose?: () => void;
+    /**
+     * Any other properties
+     */
+    [p: string]: any;
+}
+/**
+ * > API documentation for the Community-JS User Add Payment Method Form. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {UserAddPaymentMethodForm} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCUserAddPaymentMethodForm` can be used when providing style overrides in the theme.
+
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCUserAddPaymentMethodForm-root|Styles applied to the root element.|
+
+ * @param inProps
+ */
+export default function UserAddPaymentMethodForm(inProps: UserAddPaymentMethodFormProps): JSX.Element;