npm - @selfcommunity/react-ui - Versions diffs - 0.11.0-mui7.16 → 0.11.0-mui7.18 - Mend

@selfcommunity/react-ui 0.11.0-mui7.16 → 0.11.0-mui7.18

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (189) hide show

package/lib/esm/components/IncubatorListWidget/CreateIncubatorDialog/CreateIncubatorDialog.js CHANGED Viewed

@@ -2,14 +2,13 @@ import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
-import { TextField, Typography, FormGroup, styled } from '@mui/material';
+import { TextField, Typography, FormGroup, styled, Button } from '@mui/material';
 import { http, Endpoints } from '@selfcommunity/api-services';
 import { Logger } from '@selfcommunity/utils';
 import { useSCUser } from '@selfcommunity/react-core';
 import BaseDialog from '../../../shared/BaseDialog';
 import classNames from 'classnames';
 import { SCOPE_SC_UI } from '../../../constants/Errors';
-import { LoadingButton } from '@mui/lab';
 import { PREFIX } from '../constants';
 const messages = defineMessages({
     name: {
@@ -59,7 +58,7 @@ export default function CreateIncubatorDialog(props) {
                 slogan: slogan
             }
         })
-            .then((res) => {
+            .then(() => {
             setIsSubmitting(false);
             setSubmitted(true);
         })
@@ -77,7 +76,7 @@ export default function CreateIncubatorDialog(props) {
         dialogContent = (_jsx(Typography, Object.assign({ variant: 'subtitle2', className: classes.submittedMessage }, { children: _jsx(FormattedMessage, { id: "ui.incubatorListWidget.createIncubatorDialog.propose.success", defaultMessage: "ui.incubatorListWidget.createIncubatorDialog.propose.success" }) })));
     }
     else {
-        dialogContent = (_jsxs(_Fragment, { children: [_jsx(Typography, Object.assign({ component: 'span', className: classes.intro }, { children: _jsx(FormattedMessage, { id: "ui.incubatorsListDialog.createIncubatorDialog.intro", defaultMessage: "ui.incubatorsListDialog.createIncubatorDialog.intro" }) })), _jsxs(FormGroup, Object.assign({ className: classes.form }, { children: [_jsx(TextField, { required: true, error: Boolean(error), className: classes.name, placeholder: `${intl.formatMessage(messages.name)}`, margin: "normal", value: name, onChange: (event) => setName(event.target.value) }), _jsx(TextField, { multiline: true, error: Boolean(error), className: classes.slogan, placeholder: `${intl.formatMessage(messages.slogan)}`, margin: "normal", value: slogan, onChange: (event) => setSlogan(event.target.value) })] })), _jsx(LoadingButton, Object.assign({ loading: isSubmitting, disabled: !name || Boolean(error), variant: "contained", onClick: handleSubmit }, { children: _jsx(FormattedMessage, { id: "ui.incubatorListWidget.createIncubatorDialog.button", defaultMessage: "ui.incubatorListWidget.createIncubatorDialog.button" }) }))] }));
+        dialogContent = (_jsxs(_Fragment, { children: [_jsx(Typography, Object.assign({ component: 'span', className: classes.intro }, { children: _jsx(FormattedMessage, { id: "ui.incubatorsListDialog.createIncubatorDialog.intro", defaultMessage: "ui.incubatorsListDialog.createIncubatorDialog.intro" }) })), _jsxs(FormGroup, Object.assign({ className: classes.form }, { children: [_jsx(TextField, { required: true, error: Boolean(error), className: classes.name, placeholder: `${intl.formatMessage(messages.name)}`, margin: "normal", value: name, onChange: (event) => setName(event.target.value) }), _jsx(TextField, { multiline: true, error: Boolean(error), className: classes.slogan, placeholder: `${intl.formatMessage(messages.slogan)}`, margin: "normal", value: slogan, onChange: (event) => setSlogan(event.target.value) })] })), _jsx(Button, Object.assign({ loading: isSubmitting, disabled: !name || Boolean(error), variant: "contained", onClick: handleSubmit }, { children: _jsx(FormattedMessage, { id: "ui.incubatorListWidget.createIncubatorDialog.button", defaultMessage: "ui.incubatorListWidget.createIncubatorDialog.button" }) }))] }));
     }
     // RENDER
     return (_jsx(Root, Object.assign({ title: _jsx(FormattedMessage, { id: "ui.incubatorListWidget.createIncubatorDialog.title", defaultMessage: "ui.incubatorListWidget.createIncubatorDialog.title" }), open: open, onClose: onClose, className: classNames(classes.root, className) }, rest, { children: dialogContent })));

package/lib/esm/components/IncubatorSubscribeButton/IncubatorSubscribeButton.js CHANGED Viewed

@@ -1,9 +1,8 @@
 import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
-import { styled } from '@mui/material';
+import { Button, styled } from '@mui/material';
 import { SCOPE_SC_UI } from '../../constants/Errors';
-import { LoadingButton } from '@mui/lab';
 import { FormattedMessage } from 'react-intl';
 import classNames from 'classnames';
 import { CacheStrategies, Logger } from '@selfcommunity/utils';
@@ -13,11 +12,11 @@ const PREFIX = 'SCIncubatorSubscribeButton';
 const classes = {
     root: `${PREFIX}-root`
 };
-const Root = styled(LoadingButton, {
+const Root = styled(Button, {
     name: PREFIX,
     slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({}));
+    overridesResolver: (_props, styles) => styles.root
+})(() => ({}));
 /**
  * > API documentation for the Community-JS Incubator Subscribe Button component. Learn about the available props and the CSS API.

package/lib/esm/components/InviteUserEventButton/InviteUserEventButton.js CHANGED Viewed

@@ -1,7 +1,6 @@
 import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { LoadingButton } from '@mui/lab';
-import { styled } from '@mui/material';
+import { Button, styled } from '@mui/material';
 import { useThemeProps } from '@mui/system';
 import { EventService } from '@selfcommunity/api-services';
 import { useSCFetchEvent, useSCFetchUser } from '@selfcommunity/react-core';
@@ -14,7 +13,7 @@ const PREFIX = 'SCInviteUserEventButton';
 const classes = {
     root: `${PREFIX}-root`
 };
-const InviteButton = styled(LoadingButton, {
+const InviteButton = styled(Button, {
     name: PREFIX,
     slot: 'Root',
     overridesResolver: (_props, styles) => styles.root

package/lib/esm/components/LessonAppbar/LessonAppbar.js CHANGED Viewed

@@ -2,11 +2,10 @@ import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useThemeProps } from '@mui/system';
 import classNames from 'classnames';
-import { AppBar, Icon, IconButton, Toolbar, Typography, Box, styled } from '@mui/material';
+import { AppBar, Icon, IconButton, Toolbar, Typography, Box, styled, Button } from '@mui/material';
 import { PREFIX } from './constants';
 import { SCLessonActionsType } from '../../types';
 import { FormattedMessage } from 'react-intl';
-import { LoadingButton } from '@mui/lab';
 const classes = {
     root: `${PREFIX}-root`,
     startItems: `${PREFIX}-start-items`,
@@ -16,9 +15,9 @@ const classes = {
 const Root = styled(AppBar, {
     name: PREFIX,
     slot: 'Root',
-    overridesResolver: (props, styles) => [styles.root],
+    overridesResolver: (_props, styles) => [styles.root],
     shouldForwardProp: (prop) => prop !== 'open'
-})(({ theme }) => ({}));
+})(() => ({}));
 export default function LessonAppbar(inProps) {
     // PROPS
     const props = useThemeProps({
@@ -26,5 +25,5 @@ export default function LessonAppbar(inProps) {
         name: PREFIX
     });
     const { className = null, title = '', showComments, activePanel = null, handleOpen, onSave, editMode, onArrowBackClick, updating } = props, rest = __rest(props, ["className", "title", "showComments", "activePanel", "handleOpen", "onSave", "editMode", "onArrowBackClick", "updating"]);
-    return (_jsx(Root, Object.assign({ position: "fixed", open: Boolean(activePanel), className: classNames(classes.root, className) }, rest, { children: _jsxs(Toolbar, { children: [_jsxs(Box, Object.assign({ className: classes.startItems }, { children: [_jsx(IconButton, Object.assign({ edge: "start", onClick: onArrowBackClick }, { children: _jsx(Icon, { children: "arrow_back" }) })), _jsx(Typography, Object.assign({ variant: "h6", className: classes.title }, { children: title }))] })), editMode ? (_jsxs(_Fragment, { children: [_jsx(IconButton, Object.assign({ onClick: () => handleOpen(SCLessonActionsType.SETTINGS), color: "primary" }, { children: _jsx(Icon, { children: "settings" }) })), _jsx(LoadingButton, Object.assign({ variant: "contained", size: "small", onClick: onSave, loading: updating }, { children: _jsx(FormattedMessage, { id: "ui.lessonAppbar.button.save", defaultMessage: "ui.lessonAppbar.button.save" }) }))] })) : (_jsxs(Box, Object.assign({ className: classes.endItems }, { children: [showComments && (_jsx(IconButton, Object.assign({ onClick: () => handleOpen(SCLessonActionsType.COMMENTS) }, { children: _jsx(Icon, { children: "chat_bubble_outline" }) }))), _jsx(IconButton, Object.assign({ onClick: () => handleOpen(SCLessonActionsType.LESSONS) }, { children: _jsx(Icon, { children: "courses" }) }))] })))] }) })));
+    return (_jsx(Root, Object.assign({ position: "fixed", open: Boolean(activePanel), className: classNames(classes.root, className) }, rest, { children: _jsxs(Toolbar, { children: [_jsxs(Box, Object.assign({ className: classes.startItems }, { children: [_jsx(IconButton, Object.assign({ edge: "start", onClick: onArrowBackClick }, { children: _jsx(Icon, { children: "arrow_back" }) })), _jsx(Typography, Object.assign({ variant: "h6", className: classes.title }, { children: title }))] })), editMode ? (_jsxs(_Fragment, { children: [_jsx(IconButton, Object.assign({ onClick: () => handleOpen(SCLessonActionsType.SETTINGS), color: "primary" }, { children: _jsx(Icon, { children: "settings" }) })), _jsx(Button, Object.assign({ variant: "contained", size: "small", onClick: onSave, loading: updating }, { children: _jsx(FormattedMessage, { id: "ui.lessonAppbar.button.save", defaultMessage: "ui.lessonAppbar.button.save" }) }))] })) : (_jsxs(Box, Object.assign({ className: classes.endItems }, { children: [showComments && (_jsx(IconButton, Object.assign({ onClick: () => handleOpen(SCLessonActionsType.COMMENTS) }, { children: _jsx(Icon, { children: "chat_bubble_outline" }) }))), _jsx(IconButton, Object.assign({ onClick: () => handleOpen(SCLessonActionsType.LESSONS) }, { children: _jsx(Icon, { children: "courses" }) }))] })))] }) })));
 }

package/lib/esm/components/LessonEditForm/LessonEditForm.js CHANGED Viewed

@@ -3,11 +3,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { useThemeProps } from '@mui/system';
 import classNames from 'classnames';
-import { Box, Checkbox, FormControl, FormControlLabel, FormLabel, Radio, RadioGroup, styled } from '@mui/material';
+import { Box, Button, Checkbox, FormControl, FormControlLabel, FormLabel, Radio, RadioGroup, styled } from '@mui/material';
 import { PREFIX } from './constants';
 import { FormattedMessage } from 'react-intl';
 import { SCCourseLessonStatusType } from '@selfcommunity/types';
-import { LoadingButton } from '@mui/lab';
 const classes = {
     root: `${PREFIX}-root`,
     form: `${PREFIX}-form`,
@@ -37,5 +36,5 @@ export default function LessonEditForm(inProps) {
     /**
      * Rendering
      */
-    return (_jsxs(Root, Object.assign({ className: classNames(className, classes.root) }, rest, { children: [_jsxs(Box, Object.assign({ className: classes.form }, { children: [_jsxs(FormControl, { children: [_jsx(FormLabel, Object.assign({ id: "status" }, { children: _jsx(FormattedMessage, { id: "ui.lessonEditForm.status.title", defaultMessage: "ui.lessonEditForm.status.title" }) })), _jsxs(RadioGroup, Object.assign({ "aria-labelledby": "course-status-radio-buttons-group", name: "course-status-radio-buttons-group", value: settings.status, onChange: (e) => handleChange('status', e.target.value) }, { children: [_jsx(FormControlLabel, { value: SCCourseLessonStatusType.DRAFT, control: _jsx(Radio, {}), label: _jsx(FormattedMessage, { id: "ui.lessonEditForm.status.draft", defaultMessage: "ui.lessonEditForm.status.draft" }) }), _jsx(FormControlLabel, { value: SCCourseLessonStatusType.PUBLISHED, control: _jsx(Radio, {}), label: _jsx(FormattedMessage, { id: "ui.lessonEditForm.status.published", defaultMessage: "ui.lessonEditForm.status.published" }) })] }))] }), _jsxs(FormControl, Object.assign({ className: classes.settings }, { children: [_jsx(FormLabel, Object.assign({ id: "settings" }, { children: _jsx(FormattedMessage, { id: "ui.lessonEditForm.settings.title", defaultMessage: "ui.lessonEditForm.settings.title" }) })), _jsx(FormControlLabel, { control: _jsx(Checkbox, { checked: settings.comments_enabled, onChange: (e) => handleChange('comments_enabled', e.target.checked) }), label: _jsx(FormattedMessage, { id: "ui.lessonEditForm.settings.enableComments", defaultMessage: "ui.lessonEditForm.settings.enableComments" }) })] }))] })), _jsx(LoadingButton, Object.assign({ className: classes.button, variant: "contained", size: "small", onClick: onSave, loading: updating }, { children: _jsx(FormattedMessage, { id: "ui.lessonEditForm.button.save", defaultMessage: "ui.lessonEditForm.button.save" }) }))] })));
+    return (_jsxs(Root, Object.assign({ className: classNames(className, classes.root) }, rest, { children: [_jsxs(Box, Object.assign({ className: classes.form }, { children: [_jsxs(FormControl, { children: [_jsx(FormLabel, Object.assign({ id: "status" }, { children: _jsx(FormattedMessage, { id: "ui.lessonEditForm.status.title", defaultMessage: "ui.lessonEditForm.status.title" }) })), _jsxs(RadioGroup, Object.assign({ "aria-labelledby": "course-status-radio-buttons-group", name: "course-status-radio-buttons-group", value: settings.status, onChange: (e) => handleChange('status', e.target.value) }, { children: [_jsx(FormControlLabel, { value: SCCourseLessonStatusType.DRAFT, control: _jsx(Radio, {}), label: _jsx(FormattedMessage, { id: "ui.lessonEditForm.status.draft", defaultMessage: "ui.lessonEditForm.status.draft" }) }), _jsx(FormControlLabel, { value: SCCourseLessonStatusType.PUBLISHED, control: _jsx(Radio, {}), label: _jsx(FormattedMessage, { id: "ui.lessonEditForm.status.published", defaultMessage: "ui.lessonEditForm.status.published" }) })] }))] }), _jsxs(FormControl, Object.assign({ className: classes.settings }, { children: [_jsx(FormLabel, Object.assign({ id: "settings" }, { children: _jsx(FormattedMessage, { id: "ui.lessonEditForm.settings.title", defaultMessage: "ui.lessonEditForm.settings.title" }) })), _jsx(FormControlLabel, { control: _jsx(Checkbox, { checked: settings.comments_enabled, onChange: (e) => handleChange('comments_enabled', e.target.checked) }), label: _jsx(FormattedMessage, { id: "ui.lessonEditForm.settings.enableComments", defaultMessage: "ui.lessonEditForm.settings.enableComments" }) })] }))] })), _jsx(Button, Object.assign({ className: classes.button, variant: "contained", size: "small", onClick: onSave, loading: updating }, { children: _jsx(FormattedMessage, { id: "ui.lessonEditForm.button.save", defaultMessage: "ui.lessonEditForm.button.save" }) }))] })));
 }

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

@@ -11,8 +11,8 @@ import { DateTimePickerTabs, LocalizationProvider, MobileDateTimePicker } from '
 import { SCCourseTypologyType } from '@selfcommunity/types';
 import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
 import { useSCContext } from '@selfcommunity/react-core';
-import itLocale from 'date-fns/locale/it';
-import enLocale from 'date-fns/locale/en-US';
+import { it } from 'date-fns/locale/it';
+import { enUS } from 'date-fns/locale/en-US';
 import { CourseService } from '@selfcommunity/api-services';
 import { SCOPE_SC_UI } from '../../constants/Errors';
 import { Logger } from '@selfcommunity/utils';
@@ -133,7 +133,7 @@ export default function LessonReleaseMenu(inProps) {
             id: 'ui.lessonReleaseMenu.now.label',
             defaultMessage: 'ui.lessonReleaseMenu.now.label'
         });
-    return (_jsx(Root, Object.assign({ className: classNames(className, classes.root) }, rest, { children: course && course.type === SCCourseTypologyType.SCHEDULED ? (_jsx(LocalizationProvider, Object.assign({ dateAdapter: AdapterDateFns, adapterLocale: scContext.settings.locale.default === 'it' ? itLocale : enLocale, localeText: {
+    return (_jsx(Root, Object.assign({ className: classNames(className, classes.root) }, rest, { children: course && course.type === SCCourseTypologyType.SCHEDULED ? (_jsx(LocalizationProvider, Object.assign({ dateAdapter: AdapterDateFns, adapterLocale: scContext.settings.locale.default === 'it' ? it : enUS, localeText: {
                 okButtonLabel: `${intl.formatMessage(messages.pickerOkMessage)}`,
                 cancelButtonLabel: `${intl.formatMessage(messages.pickerCancelMessage)}`,
                 clearButtonLabel: `${intl.formatMessage(messages.pickerClearMessage)}`

package/lib/esm/components/LiveStreamForm/LiveStreamForm.js CHANGED Viewed

@@ -1,7 +1,6 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { LoadingButton } from '@mui/lab';
-import { Alert, Box, FormGroup, Paper, TextField, Typography, styled } from '@mui/material';
+import { Alert, Box, Button, FormGroup, Paper, TextField, Typography, styled } from '@mui/material';
 import { useThemeProps } from '@mui/system';
 import { SCCommunityEnvironment, SCCommunitySubscriptionTier } from '@selfcommunity/types';
 import classNames from 'classnames';
@@ -241,7 +240,7 @@ export default function LiveStreamForm(inProps) {
                             input: {
                                 endAdornment: (_jsx(Typography, Object.assign({ variant: "body2" }, { children: ((_b = field.description) === null || _b === void 0 ? void 0 : _b.length) ? LIVE_STREAM_DESCRIPTION_MAX_LENGTH - field.description.length : LIVE_STREAM_DESCRIPTION_MAX_LENGTH })))
                             }
-                        }, error: Boolean(((_c = field.description) === null || _c === void 0 ? void 0 : _c.length) > LIVE_STREAM_DESCRIPTION_MAX_LENGTH), helperText: ((_d = field.description) === null || _d === void 0 ? void 0 : _d.length) > LIVE_STREAM_DESCRIPTION_MAX_LENGTH ? (_jsx(FormattedMessage, { id: "ui.liveStreamForm.description.error.maxLength", defaultMessage: "ui.liveStreamForm.description.error.maxLength" })) : null }), _jsx(LiveStreamSettingsForm, { settings: field.settings, onChange: handleChangeSettings }), genericError && (_jsx(Box, Object.assign({ className: classes.genericError }, { children: _jsx(Alert, Object.assign({ variant: "filled", severity: "error" }, { children: genericError })) }))), _jsx(Box, Object.assign({ className: classes.actions }, { children: _jsx(LoadingButton, Object.assign({ loading: field.isSubmitting, disabled: !field.title ||
+                        }, error: Boolean(((_c = field.description) === null || _c === void 0 ? void 0 : _c.length) > LIVE_STREAM_DESCRIPTION_MAX_LENGTH), helperText: ((_d = field.description) === null || _d === void 0 ? void 0 : _d.length) > LIVE_STREAM_DESCRIPTION_MAX_LENGTH ? (_jsx(FormattedMessage, { id: "ui.liveStreamForm.description.error.maxLength", defaultMessage: "ui.liveStreamForm.description.error.maxLength" })) : null }), _jsx(LiveStreamSettingsForm, { settings: field.settings, onChange: handleChangeSettings }), genericError && (_jsx(Box, Object.assign({ className: classes.genericError }, { children: _jsx(Alert, Object.assign({ variant: "filled", severity: "error" }, { children: genericError })) }))), _jsx(Box, Object.assign({ className: classes.actions }, { children: _jsx(Button, Object.assign({ loading: field.isSubmitting, disabled: !field.title ||
                                 field.isSubmitting ||
                                 field.title.length > LIVE_STREAM_TITLE_MAX_LENGTH ||
                                 field.description.length > LIVE_STREAM_DESCRIPTION_MAX_LENGTH ||

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

@@ -1,7 +1,7 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState } from 'react';
-import { Avatar, Box, Stack, Typography, styled } from '@mui/material';
+import { Avatar, Box, Button, Stack, Typography, styled } from '@mui/material';
 import { Link, SCRoutes, useSCRouting } from '@selfcommunity/react-core';
 import { SCNotificationTypologyType } from '@selfcommunity/types';
 import { FormattedMessage } from 'react-intl';
@@ -9,7 +9,6 @@ import DateTimeAgo from '../../../shared/DateTimeAgo';
 import classNames from 'classnames';
 import { SCCourseTemplateType, SCNotificationObjectTemplateType } from '../../../types';
 import NotificationItem from '../../../shared/NotificationItem';
-import { LoadingButton } from '@mui/lab';
 import UserDeletedSnackBar from '../../../shared/UserDeletedSnackBar';
 import UserAvatar from '../../../shared/UserAvatar';
 import { PREFIX } from '../constants';
@@ -54,8 +53,6 @@ export default function CourseNotification(props) {
             }), { onClick: notificationObject.user.deleted ? () => setOpenAlert(true) : null }, { children: _jsx(UserAvatar, Object.assign({ hide: !notificationObject.user.community_badge, smaller: true }, { children: _jsx(Avatar, { alt: notificationObject.user.username, variant: "circular", src: notificationObject.user.avatar, classes: { root: classes.avatar } }) })) })), primary: _jsxs(Box, { children: [_jsx(Link, Object.assign({}, (!notificationObject.user.deleted && {
                         to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, notificationObject.user)
                     }), { onClick: notificationObject.user.deleted ? () => setOpenAlert(true) : null, className: classes.username }, { children: notificationObject.user.username })), ' ', _jsx(FormattedMessage, { id: `ui.notification.course.${notificationObject.type}`, defaultMessage: `ui.notification.course.${notificationObject.type}`, values: {
-                            // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                            // @ts-ignore
                             name: notificationObject.type === SCNotificationTypologyType.USER_COMMENTED_A_COURSE_LESSON
                                 ? notificationObject.comment.lesson_name
                                 : notificationObject.course.name,
@@ -71,8 +68,6 @@ export default function CourseNotification(props) {
                 }), { onClick: notificationObject.user.deleted ? () => setOpenAlert(true) : null }, { children: _jsx(UserAvatar, Object.assign({ hide: !notificationObject.user.community_badge, smaller: true }, { children: _jsx(Avatar, { className: classes.avatar, alt: notificationObject.user.username, variant: "circular", src: notificationObject.user.avatar }) })) })), primary: _jsxs(_Fragment, { children: [_jsx(Link, Object.assign({}, (!notificationObject.user.deleted && {
                             to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, notificationObject.user)
                         }), { onClick: notificationObject.user.deleted ? () => setOpenAlert(true) : null, className: classes.username }, { children: notificationObject.user.username })), ' ', _jsx(FormattedMessage, { id: `ui.notification.course.${notificationObject.type}`, defaultMessage: `ui.notification.course.${notificationObject.type}`, values: {
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                                // @ts-ignore
                                 name: notificationObject.type === SCNotificationTypologyType.USER_COMMENTED_A_COURSE_LESSON
                                     ? notificationObject.comment.lesson_name
                                     : notificationObject.course.name,
@@ -81,5 +76,5 @@ export default function CourseNotification(props) {
                                         : SCRoutes.COURSE_ROUTE_NAME, notificationObject.type === SCNotificationTypologyType.USER_COMMENTED_A_COURSE_LESSON
                                         ? formatLessonUrl(notificationObject)
                                         : notificationObject.course) }, { children: chunks })))
-                            } }), notificationObject.type === SCNotificationTypologyType.USER_COMMENTED_A_COURSE_LESSON ? (_jsx(Typography, { variant: "body2", dangerouslySetInnerHTML: { __html: notificationObject.comment.html } })) : (_jsx(CourseItem, { course: notificationObject.course, actions: _jsx(_Fragment, {}), template: SCCourseTemplateType.SNIPPET, elevation: 0 }))] }), actions: _jsxs(Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 }, { children: [_jsx(DateTimeAgo, { date: notificationObject.active_at, className: classes.activeAt }), _jsx(LoadingButton, Object.assign({ color: 'primary', variant: "outlined", size: "small", classes: { root: classes.seeButton }, component: Link, to: scRoutingContext.url(getRouteName(notificationObject), getRouteParams(notificationObject)) }, { children: _jsx(FormattedMessage, { id: "ui.notification.course.button.see", defaultMessage: "ui.notification.course.button.see" }) }))] })) }, rest)), openAlert && _jsx(UserDeletedSnackBar, { open: openAlert, handleClose: () => setOpenAlert(false) })] }));
+                            } }), notificationObject.type === SCNotificationTypologyType.USER_COMMENTED_A_COURSE_LESSON ? (_jsx(Typography, { variant: "body2", dangerouslySetInnerHTML: { __html: notificationObject.comment.html } })) : (_jsx(CourseItem, { course: notificationObject.course, actions: _jsx(_Fragment, {}), template: SCCourseTemplateType.SNIPPET, elevation: 0 }))] }), actions: _jsxs(Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 }, { children: [_jsx(DateTimeAgo, { date: notificationObject.active_at, className: classes.activeAt }), _jsx(Button, Object.assign({ color: "primary", variant: "outlined", size: "small", classes: { root: classes.seeButton }, component: Link, to: scRoutingContext.url(getRouteName(notificationObject), getRouteParams(notificationObject)) }, { children: _jsx(FormattedMessage, { id: "ui.notification.course.button.see", defaultMessage: "ui.notification.course.button.see" }) }))] })) }, rest)), openAlert && _jsx(UserDeletedSnackBar, { open: openAlert, handleClose: () => setOpenAlert(false) })] }));
 }

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

@@ -1,7 +1,7 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState } from 'react';
-import { Avatar, Box, Icon, Stack, Typography, styled } from '@mui/material';
+import { Avatar, Box, Button, Icon, Stack, Typography, styled } from '@mui/material';
 import { Link, SCRoutes, useSCRouting } from '@selfcommunity/react-core';
 import { SCEventLocationType, SCEventSubscriptionStatusType, SCNotificationTypologyType } from '@selfcommunity/types';
 import { FormattedMessage, useIntl } from 'react-intl';
@@ -9,7 +9,6 @@ import DateTimeAgo from '../../../shared/DateTimeAgo';
 import classNames from 'classnames';
 import { SCNotificationObjectTemplateType } from '../../../types';
 import NotificationItem from '../../../shared/NotificationItem';
-import { LoadingButton } from '@mui/lab';
 import UserDeletedSnackBar from '../../../shared/UserDeletedSnackBar';
 import UserAvatar from '../../../shared/UserAvatar';
 import { PREFIX } from '../constants';
@@ -61,8 +60,6 @@ export default function EventNotification(props) {
             }), { onClick: notificationObject.user.deleted ? () => setOpenAlert(true) : null }, { children: _jsx(UserAvatar, Object.assign({ hide: !notificationObject.user.community_badge, smaller: true }, { children: _jsx(Avatar, { alt: notificationObject.user.username, variant: "circular", src: notificationObject.user.avatar, classes: { root: classes.avatar } }) })) })), primary: _jsxs(Box, { children: [_jsx(Link, Object.assign({}, (!notificationObject.user.deleted && {
                         to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, notificationObject.user)
                     }), { onClick: notificationObject.user.deleted ? () => setOpenAlert(true) : null, className: classes.username }, { children: notificationObject.user.username })), ' ', _jsx(FormattedMessage, { id: `ui.notification.event.${notificationObject.type}`, defaultMessage: `ui.notification.event.${notificationObject.type}`, values: {
-                            // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                            // @ts-ignore
                             icon: (...chunks) => _jsx(Icon, { children: chunks }),
                             event: notificationObject.event.name,
                             link: (...chunks) => _jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, notificationObject.event) }, { children: chunks }))
@@ -74,21 +71,19 @@ export default function EventNotification(props) {
                                     month: 'long'
                                 }),
                                 hour: intl.formatDate(notificationObject.event.start_date, { hour: 'numeric', minute: 'numeric' })
-                            } }) })), _jsxs(Typography, Object.assign({ component: "p", variant: "body2" }, { children: [_jsx(FormattedMessage, { id: `ui.notification.event.privacy.${notificationObject.event.privacy}`, defaultMessage: `ui.notification.event.privacy.${notificationObject.event.privacy}` }), ' ', "-", ' ', notificationObject.event.location === SCEventLocationType.PERSON ? (_jsx(FormattedMessage, { id: `ui.notification.event.address.live.label`, defaultMessage: `ui.notification.event.address.live.label` })) : (_jsx(FormattedMessage, { id: `ui.notification.event.address.online.label`, defaultMessage: `ui.notification.event.address.online.label` }))] }))] }), footer: isToastTemplate ? (_jsxs(Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 }, { children: [_jsx(DateTimeAgo, { date: notificationObject.active_at }), _jsx(Typography, Object.assign({ color: "primary" }, { children: notificationObject.type === SCNotificationTypologyType.USER_REQUESTED_TO_JOIN_EVENT ? (_jsx(LoadingButton, Object.assign({ disabled: disabled, loading: loading, color: 'primary', variant: "text", size: "small", onClick: () => acceptRequest(notificationObject.event) }, { children: disabled ? (_jsx(FormattedMessage, { id: "ui.notification.event.button.accepted", defaultMessage: "ui.notification.event.button.accepted" })) : (_jsx(FormattedMessage, { id: "ui.notification.event.button.accept", defaultMessage: "ui.notification.event.button.accept" })) }))) : (_jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, notificationObject.event) }, { children: _jsx(FormattedMessage, { id: "ui.notification.event.button.see", defaultMessage: "ui.notification.event.button.see" }) }))) }))] }))) : (_jsx(DateTimeAgo, { date: notificationObject.active_at, className: classes.snippetTime })) }, rest)));
+                            } }) })), _jsxs(Typography, Object.assign({ component: "p", variant: "body2" }, { children: [_jsx(FormattedMessage, { id: `ui.notification.event.privacy.${notificationObject.event.privacy}`, defaultMessage: `ui.notification.event.privacy.${notificationObject.event.privacy}` }), ' ', "-", ' ', notificationObject.event.location === SCEventLocationType.PERSON ? (_jsx(FormattedMessage, { id: `ui.notification.event.address.live.label`, defaultMessage: `ui.notification.event.address.live.label` })) : (_jsx(FormattedMessage, { id: `ui.notification.event.address.online.label`, defaultMessage: `ui.notification.event.address.online.label` }))] }))] }), footer: isToastTemplate ? (_jsxs(Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 }, { children: [_jsx(DateTimeAgo, { date: notificationObject.active_at }), _jsx(Typography, Object.assign({ color: "primary" }, { children: notificationObject.type === SCNotificationTypologyType.USER_REQUESTED_TO_JOIN_EVENT ? (_jsx(Button, Object.assign({ disabled: disabled, loading: loading, color: "primary", variant: "text", size: "small", onClick: () => acceptRequest(notificationObject.event) }, { children: disabled ? (_jsx(FormattedMessage, { id: "ui.notification.event.button.accepted", defaultMessage: "ui.notification.event.button.accepted" })) : (_jsx(FormattedMessage, { id: "ui.notification.event.button.accept", defaultMessage: "ui.notification.event.button.accept" })) }))) : (_jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, notificationObject.event) }, { children: _jsx(FormattedMessage, { id: "ui.notification.event.button.see", defaultMessage: "ui.notification.event.button.see" }) }))) }))] }))) : (_jsx(DateTimeAgo, { date: notificationObject.active_at, className: classes.snippetTime })) }, rest)));
     }
     return (_jsxs(_Fragment, { children: [_jsx(Root, Object.assign({ id: id, className: classNames(classes.root, className, `${PREFIX}-${template}`), template: template, isNew: notificationObject.is_new, disableTypography: true, image: _jsx(Link, Object.assign({}, (!notificationObject.user.deleted && {
                     to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, notificationObject.user)
                 }), { onClick: notificationObject.user.deleted ? () => setOpenAlert(true) : null }, { children: _jsx(UserAvatar, Object.assign({ hide: !notificationObject.user.community_badge, smaller: true }, { children: _jsx(Avatar, { className: classes.avatar, alt: notificationObject.user.username, variant: "circular", src: notificationObject.user.avatar }) })) })), primary: _jsxs(_Fragment, { children: [_jsx(Link, Object.assign({}, (!notificationObject.user.deleted && {
                             to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, notificationObject.user)
                         }), { onClick: notificationObject.user.deleted ? () => setOpenAlert(true) : null, className: classes.username }, { children: notificationObject.user.username })), ' ', _jsx(FormattedMessage, { id: `ui.notification.${notificationObject.type}`, defaultMessage: `ui.notification.${notificationObject.type}`, values: {
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                                // @ts-ignore
                                 icon: (...chunks) => _jsx(Icon, { children: chunks }),
                                 event: notificationObject.event.name,
                                 link: (...chunks) => _jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, notificationObject.event) }, { children: chunks }))
-                            } }), _jsx(EventItem, { event: notificationObject.event, actions: _jsx(_Fragment, {}), elevation: 0 })] }), actions: _jsxs(Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 }, { children: [_jsx(DateTimeAgo, { date: notificationObject.active_at, className: classes.activeAt }), _jsx(LoadingButton, Object.assign({}, (notificationObject.type === SCNotificationTypologyType.USER_REQUESTED_TO_JOIN_EVENT && {
+                            } }), _jsx(EventItem, { event: notificationObject.event, actions: _jsx(_Fragment, {}), elevation: 0 })] }), actions: _jsxs(Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 }, { children: [_jsx(DateTimeAgo, { date: notificationObject.active_at, className: classes.activeAt }), _jsx(Button, Object.assign({}, (notificationObject.type === SCNotificationTypologyType.USER_REQUESTED_TO_JOIN_EVENT && {
                             disabled: disabled
-                        }), { loading: loading, color: 'primary', variant: "outlined", size: "small", classes: { root: classes.seeButton } }, (notificationObject.type !== SCNotificationTypologyType.USER_REQUESTED_TO_JOIN_EVENT && {
+                        }), { loading: loading, color: "primary", variant: "outlined", size: "small", classes: { root: classes.seeButton } }, (notificationObject.type !== SCNotificationTypologyType.USER_REQUESTED_TO_JOIN_EVENT && {
                             component: Link,
                             to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, notificationObject.event)
                         }), { onClick: notificationObject.type === SCNotificationTypologyType.USER_REQUESTED_TO_JOIN_EVENT

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

@@ -1,7 +1,7 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useContext, useEffect, useState } from 'react';
-import { Avatar, Box, Stack, Typography, styled } from '@mui/material';
+import { Avatar, Box, Button, Stack, Typography, styled } from '@mui/material';
 import { Link, SCRoutes, SCUserContext, useSCRouting } from '@selfcommunity/react-core';
 import { SCGroupSubscriptionStatusType, SCNotificationTypologyType } from '@selfcommunity/types';
 import { FormattedMessage } from 'react-intl';
@@ -9,7 +9,6 @@ import DateTimeAgo from '../../../shared/DateTimeAgo';
 import classNames from 'classnames';
 import { SCNotificationObjectTemplateType } from '../../../types';
 import NotificationItem from '../../../shared/NotificationItem';
-import { LoadingButton } from '@mui/lab';
 import UserDeletedSnackBar from '../../../shared/UserDeletedSnackBar';
 import UserAvatar from '../../../shared/UserAvatar';
 import { PREFIX } from '../constants';
@@ -63,7 +62,7 @@ export default function GroupNotification(props) {
                                 ? scRoutingContext.url(SCRoutes.GROUP_MEMBERS_ROUTE_NAME, notificationObject.group)
                                 : scRoutingContext.url(SCRoutes.GROUP_ROUTE_NAME, notificationObject.group) }, { children: _jsx(FormattedMessage, { id: "ui.notification.group.button.see", defaultMessage: "ui.notification.group.button.see" }) })) })))] }))) }, rest)));
     }
-    return (_jsxs(_Fragment, { children: [_jsx(Root, Object.assign({ id: id, className: classNames(classes.root, className, `${PREFIX}-${template}`), template: template, isNew: notificationObject.is_new, disableTypography: true, actions: _jsxs(Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 }, { children: [_jsx(DateTimeAgo, { date: notificationObject.active_at, className: classes.activeAt }), status && status !== SCGroupSubscriptionStatusType.SUBSCRIBED && (_jsx(LoadingButton, Object.assign({ color: 'primary', variant: "outlined", size: "small", classes: { root: classes.acceptButton }, component: Link, loading: scUserContext.user ? status === null || manager.isLoading(notificationObject.group) : null, to: notificationObject.type === SCNotificationTypologyType.USER_REQUESTED_TO_JOIN_GROUP ||
+    return (_jsxs(_Fragment, { children: [_jsx(Root, Object.assign({ id: id, className: classNames(classes.root, className, `${PREFIX}-${template}`), template: template, isNew: notificationObject.is_new, disableTypography: true, actions: _jsxs(Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 }, { children: [_jsx(DateTimeAgo, { date: notificationObject.active_at, className: classes.activeAt }), status && status !== SCGroupSubscriptionStatusType.SUBSCRIBED && (_jsx(Button, Object.assign({ color: "primary", variant: "outlined", size: "small", classes: { root: classes.acceptButton }, component: Link, loading: scUserContext.user ? status === null || manager.isLoading(notificationObject.group) : null, to: notificationObject.type === SCNotificationTypologyType.USER_REQUESTED_TO_JOIN_GROUP ||
                                 notificationObject.type === SCNotificationTypologyType.USER_ACCEPTED_TO_JOIN_GROUP
                                 ? scRoutingContext.url(SCRoutes.GROUP_MEMBERS_ROUTE_NAME, notificationObject.group)
                                 : scRoutingContext.url(SCRoutes.GROUP_ROUTE_NAME, notificationObject.group) }, { children: _jsx(FormattedMessage, { id: "ui.notification.group.button.see", defaultMessage: "ui.notification.group.button.see" }) })))] })) }, rest)), openAlert && _jsx(UserDeletedSnackBar, { open: openAlert, handleClose: () => setOpenAlert(false) })] }));

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

@@ -1,14 +1,13 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState } from 'react';
-import { Avatar, Box, Icon, Stack, Typography, styled } from '@mui/material';
+import { Avatar, Box, Button, Icon, Stack, Typography, styled } from '@mui/material';
 import { Link, SCRoutes, useSCRouting } from '@selfcommunity/react-core';
 import { FormattedMessage } from 'react-intl';
 import DateTimeAgo from '../../../shared/DateTimeAgo';
 import classNames from 'classnames';
 import { SCNotificationObjectTemplateType } from '../../../types';
 import NotificationItem from '../../../shared/NotificationItem';
-import { LoadingButton } from '@mui/lab';
 import UserDeletedSnackBar from '../../../shared/UserDeletedSnackBar';
 import UserAvatar from '../../../shared/UserAvatar';
 import { PREFIX } from '../constants';
@@ -51,8 +50,6 @@ export default function LiveStreamNotification(props) {
             }), { onClick: notificationObject.live_stream.host.deleted ? () => setOpenAlert(true) : null }, { children: _jsx(UserAvatar, Object.assign({ hide: !notificationObject.live_stream.host.community_badge, smaller: true }, { children: _jsx(Avatar, { alt: notificationObject.live_stream.host.username, variant: "circular", src: notificationObject.live_stream.host.avatar, classes: { root: classes.avatar } }) })) })), primary: _jsxs(Box, { children: [_jsx(Link, Object.assign({}, (!notificationObject.live_stream.host.deleted && {
                         to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, notificationObject.live_stream.host)
                     }), { onClick: notificationObject.live_stream.host.deleted ? () => setOpenAlert(true) : null, className: classes.username }, { children: notificationObject.live_stream.host.username })), ' ', _jsx(FormattedMessage, { id: `ui.notification.${notificationObject.type}.title`, defaultMessage: `ui.notification.${notificationObject.type}.title`, values: {
-                            // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                            // @ts-ignore
                             icon: (...chunks) => _jsx(Icon, { children: chunks }),
                             live: notificationObject.live_stream.title,
                             link: (...chunks) => _jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.LIVESTREAM_ROUTE_NAME, notificationObject.live_stream) }, { children: chunks }))
@@ -63,9 +60,7 @@ export default function LiveStreamNotification(props) {
                 }), { onClick: notificationObject.live_stream.host.deleted ? () => setOpenAlert(true) : null }, { children: _jsx(UserAvatar, Object.assign({ hide: !notificationObject.live_stream.host.community_badge, smaller: true }, { children: _jsx(Avatar, { className: classes.avatar, alt: notificationObject.live_stream.host.username, variant: "circular", src: notificationObject.live_stream.host.avatar }) })) })), primary: _jsxs(_Fragment, { children: [_jsx(Link, Object.assign({}, (!notificationObject.live_stream.host.deleted && {
                             to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, notificationObject.live_stream.host)
                         }), { onClick: notificationObject.live_stream.host.deleted ? () => setOpenAlert(true) : null, className: classes.username }, { children: notificationObject.live_stream.host.username })), ' ', _jsx(FormattedMessage, { id: `ui.notification.${notificationObject.type}`, defaultMessage: `ui.notification.${notificationObject.type}`, values: {
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                                // @ts-ignore
                                 live: notificationObject.live_stream.title,
                                 link: (...chunks) => _jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.LIVESTREAM_ROUTE_NAME, notificationObject.live_stream) }, { children: chunks }))
-                            } }), _jsx(LiveStream, { liveStream: notificationObject.live_stream, hideInProgress: !inProgress, actions: _jsx(_Fragment, {}), elevation: 0 })] }), actions: _jsxs(Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 }, { children: [_jsx(DateTimeAgo, { date: notificationObject.active_at, className: classes.activeAt }), _jsx(LoadingButton, Object.assign({ color: 'primary', variant: "outlined", size: "small", classes: { root: classes.seeButton }, component: Link, disabled: Boolean(notificationObject.live_stream.closed_at_by_host), to: scRoutingContext.url(SCRoutes.LIVESTREAM_ROUTE_NAME, notificationObject.live_stream) }, { children: _jsx(FormattedMessage, { id: "ui.notification.live_stream_started.join", defaultMessage: "ui.notification.live_stream_started.join" }) }))] })) }, rest)), openAlert && _jsx(UserDeletedSnackBar, { open: openAlert, handleClose: () => setOpenAlert(false) })] }));
+                            } }), _jsx(LiveStream, { liveStream: notificationObject.live_stream, hideInProgress: !inProgress, actions: _jsx(_Fragment, {}), elevation: 0 })] }), actions: _jsxs(Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 }, { children: [_jsx(DateTimeAgo, { date: notificationObject.active_at, className: classes.activeAt }), _jsx(Button, Object.assign({ color: "primary", variant: "outlined", size: "small", classes: { root: classes.seeButton }, component: Link, disabled: Boolean(notificationObject.live_stream.closed_at_by_host), to: scRoutingContext.url(SCRoutes.LIVESTREAM_ROUTE_NAME, notificationObject.live_stream) }, { children: _jsx(FormattedMessage, { id: "ui.notification.live_stream_started.join", defaultMessage: "ui.notification.live_stream_started.join" }) }))] })) }, rest)), openAlert && _jsx(UserDeletedSnackBar, { open: openAlert, handleClose: () => setOpenAlert(false) })] }));
 }

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

@@ -19,13 +19,12 @@ import LiveStreamNotification from './LiveStream/LiveStream';
 import { SCOPE_SC_UI } from '../../constants/Errors';
 import { getContribution, getContributionRouteName, getContributionSnippet, getRouteData } from '../../utils/contribution';
 import ContributionFollowNotification from './ContributionFollow';
-import { Avatar, CardHeader, Collapse, ListItemButton, ListItemText, Tooltip, styled, CardContent, Icon } from '@mui/material';
+import { Avatar, CardHeader, Collapse, ListItemButton, ListItemText, Tooltip, styled, CardContent, Icon, Button } from '@mui/material';
 import IncubatorApprovedNotification from './IncubatorApproved';
 import { Endpoints, http } from '@selfcommunity/api-services';
 import { Link, SCRoutes, useSCRouting } from '@selfcommunity/react-core';
 import ContributionNotification from './Contribution';
 import classNames from 'classnames';
-import LoadingButton from '@mui/lab/LoadingButton';
 import Widget from '../Widget';
 import { useThemeProps } from '@mui/system';
 import { Logger } from '@selfcommunity/utils';
@@ -139,7 +138,7 @@ export default function UserNotification(inProps) {
     function handleStopContentNotification(contribution) {
         setLoadingSuspendNotification(true);
         performSuspendNotification(contribution)
-            .then((data) => {
+            .then(() => {
             const newObj = obj;
             newObj[contribution.type].suspended = !newObj[contribution.type].suspended;
             setObj(newObj);
@@ -184,7 +183,9 @@ export default function UserNotification(inProps) {
             let messageNotification = notificationObject.aggregated[0];
             return (_jsx(CardHeader, { className: classes.header, avatar: _jsx(Link, Object.assign({}, (!messageNotification.message.sender.deleted && {
                     to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, messageNotification.message.sender)
-                }), { onClick: messageNotification.message.sender.deleted ? () => setOpenAlert(true) : null }, { children: _jsx(UserAvatar, Object.assign({ hide: !messageNotification.message.sender.community_badge, smaller: true }, { children: _jsx(Avatar, { className: classes.avatar, alt: messageNotification.message.sender.username, variant: "circular", src: messageNotification.message.sender.avatar }) })) })), titleTypographyProps: { className: classes.title, variant: 'subtitle1' }, title: _jsxs(_Fragment, { children: [_jsx(Link, Object.assign({}, (!messageNotification.message.sender.deleted && {
+                }), { onClick: messageNotification.message.sender.deleted ? () => setOpenAlert(true) : null }, { children: _jsx(UserAvatar, Object.assign({ hide: !messageNotification.message.sender.community_badge, smaller: true }, { children: _jsx(Avatar, { className: classes.avatar, alt: messageNotification.message.sender.username, variant: "circular", src: messageNotification.message.sender.avatar }) })) })), slotProps: {
+                    title: { className: classes.title, variant: 'subtitle1' }
+                }, title: _jsxs(_Fragment, { children: [_jsx(Link, Object.assign({}, (!messageNotification.message.sender.deleted && {
                             to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, messageNotification.message.sender)
                         }), { onClick: messageNotification.message.sender.deleted ? () => setOpenAlert(true) : null, className: classes.username }, { children: messageNotification.message.sender.username })), ' ', intl.formatMessage(messages.receivePrivateMessage, {
                             total: notificationObject.aggregated.length,
@@ -202,7 +203,9 @@ export default function UserNotification(inProps) {
             let groupNotification = notificationObject.aggregated[0];
             return (_jsx(CardHeader, { className: classes.header, avatar: _jsx(Link, Object.assign({}, (!groupNotification.user.deleted && {
                     to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, groupNotification.user)
-                }), { onClick: groupNotification.user.deleted ? () => setOpenAlert(true) : null }, { children: _jsx(UserAvatar, Object.assign({ hide: !groupNotification.user.community_badge, smaller: true }, { children: _jsx(Avatar, { className: classes.avatar, alt: groupNotification.user.username, variant: "circular", src: groupNotification.user.avatar }) })) })), titleTypographyProps: { className: classes.title, variant: 'subtitle1' }, title: _jsxs(_Fragment, { children: [_jsx(Link, Object.assign({}, (!groupNotification.user.deleted && {
+                }), { onClick: groupNotification.user.deleted ? () => setOpenAlert(true) : null }, { children: _jsx(UserAvatar, Object.assign({ hide: !groupNotification.user.community_badge, smaller: true }, { children: _jsx(Avatar, { className: classes.avatar, alt: groupNotification.user.username, variant: "circular", src: groupNotification.user.avatar }) })) })), slotProps: {
+                    title: { className: classes.title, variant: 'subtitle1' }
+                }, title: _jsxs(_Fragment, { children: [_jsx(Link, Object.assign({}, (!groupNotification.user.deleted && {
                             to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, groupNotification.user)
                         }), { onClick: groupNotification.user.deleted ? () => setOpenAlert(true) : null, className: classes.username }, { children: groupNotification.user.username })), ' ', _jsx(FormattedMessage, { id: `ui.notification.${notificationObject.aggregated[0].type}`, defaultMessage: `ui.notification.${notificationObject.aggregated[0].type}`, values: {
                                 group: groupNotification.group.name,
@@ -223,7 +226,12 @@ export default function UserNotification(inProps) {
                 notificationObject.aggregated[0].type === SCNotificationTypologyType.VOTE_UP ||
                 notificationObject.aggregated[0].type === SCNotificationTypologyType.CONTRIBUTION)) {
             const contribution = getContribution(notificationObject);
-            return (_jsx(CardHeader, { className: classes.header, titleTypographyProps: { className: classes.title, variant: 'subtitle1' }, title: _jsx(Link, Object.assign({ to: scRoutingContext.url(getContributionRouteName(contribution), getRouteData(notificationObject[contribution.type])) }, { children: getContributionSnippet(contribution) })), action: contribution && (_jsx(Tooltip, Object.assign({ title: contribution.suspended ? (_jsx(FormattedMessage, { id: 'ui.notification.notificationSuspended', defaultMessage: 'ui.notification.notificationSuspended' })) : (_jsx(FormattedMessage, { id: 'ui.notification.notificationSuspend', defaultMessage: 'ui.notification.notificationSuspend' })) }, { children: _jsx(LoadingButton, Object.assign({ variant: "text", size: "small", loading: loadingSuspendNotification, color: 'inherit', classes: { root: classes.stopButton }, onClick: () => handleStopContentNotification(contribution) }, { children: contribution.suspended ? _jsx(Icon, Object.assign({ color: 'primary' }, { children: "notifications_off" })) : _jsx(Icon, Object.assign({ color: 'inherit' }, { children: "notifications_active" })) })) }))) }));
+            return (_jsx(CardHeader, { className: classes.header, slotProps: {
+                    title: {
+                        className: classes.title,
+                        variant: 'subtitle1'
+                    }
+                }, title: _jsx(Link, Object.assign({ to: scRoutingContext.url(getContributionRouteName(contribution), getRouteData(notificationObject[contribution.type])) }, { children: getContributionSnippet(contribution) })), action: contribution && (_jsx(Tooltip, Object.assign({ title: contribution.suspended ? (_jsx(FormattedMessage, { id: 'ui.notification.notificationSuspended', defaultMessage: 'ui.notification.notificationSuspended' })) : (_jsx(FormattedMessage, { id: 'ui.notification.notificationSuspend', defaultMessage: 'ui.notification.notificationSuspend' })) }, { children: _jsx(Button, Object.assign({ variant: "text", size: "small", loading: loadingSuspendNotification, color: "inherit", classes: { root: classes.stopButton }, onClick: () => handleStopContentNotification(contribution) }, { children: contribution.suspended ? _jsx(Icon, Object.assign({ color: 'primary' }, { children: "notifications_off" })) : _jsx(Icon, Object.assign({ color: 'inherit' }, { children: "notifications_active" })) })) }))) }));
         }
         return null;
     }

package/lib/esm/components/Notification/PrivateMessage/PrivateMessage.js CHANGED Viewed

@@ -1,14 +1,13 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useContext, useEffect, useMemo, useState } from 'react';
-import { Avatar, Box, Stack, Typography, styled } from '@mui/material';
+import { Avatar, Box, Button, Stack, Typography, styled } from '@mui/material';
 import { Link, SCPreferences, SCRoutes, SCUserContext, useSCPreferences, useSCRouting } from '@selfcommunity/react-core';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import DateTimeAgo from '../../../shared/DateTimeAgo';
 import classNames from 'classnames';
 import { SCNotificationObjectTemplateType } from '../../../types';
 import NotificationItem from '../../../shared/NotificationItem';
-import { LoadingButton } from '@mui/lab';
 import UserDeletedSnackBar from '../../../shared/UserDeletedSnackBar';
 import UserAvatar from '../../../shared/UserAvatar';
 import { PREFIX } from '../constants';
@@ -94,7 +93,7 @@ export default function PrivateMessageNotification(props) {
                                 ? scRoutingContext.url(SCRoutes.GROUP_MESSAGES_ROUTE_NAME, notificationObject.message.group)
                                 : scRoutingContext.url(SCRoutes.USER_PRIVATE_MESSAGES_ROUTE_NAME, notificationObject.message.sender) }, { children: scUserContext.user && follower ? (_jsx(FormattedMessage, { id: "ui.userToastNotifications.replyMessage", defaultMessage: 'ui.userToastNotifications.replyMessage' })) : (_jsx(FormattedMessage, { id: "ui.userToastNotifications.viewMessage", defaultMessage: 'ui.userToastNotifications.viewMessage' })) })) }))] }))) }, rest)));
     }
-    return (_jsxs(_Fragment, { children: [_jsx(Root, Object.assign({ id: id, className: classNames(classes.root, className, `${PREFIX}-${template}`), template: template, isNew: notificationObject.is_new, disableTypography: true, actions: _jsxs(Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 }, { children: [_jsx(DateTimeAgo, { date: notificationObject.active_at, className: classes.activeAt }), _jsx(LoadingButton, Object.assign({ color: 'primary', variant: "outlined", size: "small", classes: { root: classes.replyButton }, component: Link, loading: notificationObject.message.sender.deleted
+    return (_jsxs(_Fragment, { children: [_jsx(Root, Object.assign({ id: id, className: classNames(classes.root, className, `${PREFIX}-${template}`), template: template, isNew: notificationObject.is_new, disableTypography: true, actions: _jsxs(Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 }, { children: [_jsx(DateTimeAgo, { date: notificationObject.active_at, className: classes.activeAt }), _jsx(Button, Object.assign({ color: "primary", variant: "outlined", size: "small", classes: { root: classes.replyButton }, component: Link, loading: notificationObject.message.sender.deleted
                                 ? null
                                 : scUserContext.user
                                     ? follower === null || manager.isLoading(notificationObject.message.sender)

package/lib/esm/components/OnBoardingWidget/Steps/Appearance/Appearance.js CHANGED Viewed

@@ -13,7 +13,6 @@ import { formatColorLabel, formatLogoLabel } from '../../../../utils/onBoarding'
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { SCOPE_SC_UI } from '../../../../constants/Errors';
 import { Logger } from '@selfcommunity/utils';
-import { LoadingButton } from '@mui/lab';
 import ScrollContainer from '../../../../shared/ScrollContainer';
 const messages = defineMessages({
     titleField: {
@@ -178,9 +177,9 @@ export default function Appearance(inProps) {
     }, []);
     return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, { children: [_jsx(Typography, Object.assign({ variant: "h4", className: classes.title, alignSelf: "self-start" }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.appearance", defaultMessage: "ui.onBoardingWidget.appearance" }) })), _jsx(Typography, Object.assign({ className: classes.summary }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.appearance.summary", defaultMessage: "ui.onBoardingWidget.step.appearance.summary" }) })), _jsx(Button, Object.assign({ variant: "outlined", size: "small", color: "primary", onClick: handleOpen }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.appearance.button", defaultMessage: "ui.onBoardingWidget.step.appearance.button" }) })), _jsxs(DrawerRoot, Object.assign({ className: classes.drawerRoot, anchor: "right", open: Boolean(anchorEl), onClose: handleClose }, { children: [_jsxs(Box, Object.assign({ className: classes.drawerHeader }, { children: [_jsx(Typography, Object.assign({ variant: "h4", color: "primary" }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.appearance.header.title", defaultMessage: "ui.onBoardingWidget.step.appearance.header.title" }) })), _jsx(IconButton, Object.assign({ className: classes.drawerHeaderAction, onClick: handleClose }, { children: _jsx(Icon, { children: "close" }) }))] })), _jsxs(Tabs, Object.assign({ value: tab, onChange: handleTabChange, variant: "scrollable", scrollButtons: "auto", "aria-label": "scrollable-tabs" }, { children: [_jsx(Tab, { value: AppearanceTabType.COLOR, label: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.appearance.colors.title", defaultMessage: "ui.onBoardingWidget.step.appearance.colors.title" }) }), _jsx(Tab, { value: AppearanceTabType.LOGO, label: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.appearance.logo.title", defaultMessage: "ui.onBoardingWidget.step.appearance.logo.title" }) }), _jsx(Tab, { value: AppearanceTabType.SLOGAN, label: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.appearance.titleSlogan.title", defaultMessage: "ui.onBoardingWidget.step.appearance.titleSlogan.title" }) })] })), _jsx(ScrollContainer, { children: _jsxs(Box, Object.assign({ className: classes.drawerContent }, { children: [tab === AppearanceTabType.COLOR && (_jsxs(Box, Object.assign({ className: classes.colorContainer }, { children: [preferences
                                             .filter((item) => item.section === SCPreferenceSection.COLORS)
-                                            .map((color) => (_jsxs(React.Fragment, { children: [_jsx(Typography, Object.assign({ variant: "h6" }, { children: formatColorLabel(color) })), _jsx(Box, { children: _jsx(MuiColorInput, { inputRef: colorRef, className: classes.color, format: "hex", value: color.value, onChange: (value) => handleColorChange(value, color.name), isAlphaHidden: true, PopoverProps: { onClose: handleClosePopover } }) })] }, color.id))), _jsx(LoadingButton, Object.assign({ loading: loading || updating, disabled: loading || updating || Object.keys(data).length === 0, variant: "outlined", size: "small", color: "primary", onClick: updatePreference }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.appearance.titleSlogan.button", defaultMessage: "ui.onBoardingWidget.step.appearance.titleSlogan.button" }) }))] }))), tab === AppearanceTabType.LOGO && (_jsx(_Fragment, { children: preferences
+                                            .map((color) => (_jsxs(React.Fragment, { children: [_jsx(Typography, Object.assign({ variant: "h6" }, { children: formatColorLabel(color) })), _jsx(Box, { children: _jsx(MuiColorInput, { inputRef: colorRef, className: classes.color, format: "hex", value: color.value, onChange: (value) => handleColorChange(value, color.name), isAlphaHidden: true, PopoverProps: { onClose: handleClosePopover } }) })] }, color.id))), _jsx(Button, Object.assign({ loading: loading || updating, disabled: loading || updating || Object.keys(data).length === 0, variant: "outlined", size: "small", color: "primary", onClick: updatePreference }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.appearance.titleSlogan.button", defaultMessage: "ui.onBoardingWidget.step.appearance.titleSlogan.button" }) }))] }))), tab === AppearanceTabType.LOGO && (_jsx(_Fragment, { children: preferences
                                         .filter((item) => item.section === SCPreferenceSection.LOGO)
-                                        .map((logo) => (_jsxs(React.Fragment, { children: [_jsx(Typography, Object.assign({ variant: "h6" }, { children: formatLogoLabel(logo.name) })), _jsxs(Box, Object.assign({ className: classes.logoContainer }, { children: [_jsx("img", { src: logo.value, className: classes.logo }), _jsx("input", { type: "file", onChange: (event) => handleUpload(event, logo.name), hidden: true, accept: ".gif,.png,.jpg,.jpeg", id: logo.name }), _jsx(LoadingButton, Object.assign({ className: classes.uploadButton, onClick: () => document.getElementById(`${logo.name}`).click(), loading: Boolean(loadingLogo) && Boolean(logo.name === loadingLogo), disabled: Boolean(loadingLogo) && Boolean(logo.name !== loadingLogo) }, { children: _jsx(Icon, { children: "upload" }) }))] }))] }, logo.id))) })), tab === AppearanceTabType.SLOGAN && (_jsxs(Box, { children: [_jsx(TextField, { multiline: true, fullWidth: true, label: `${intl.formatMessage(messages.titleField)}`, margin: "normal", value: ((_a = preferences === null || preferences === void 0 ? void 0 : preferences.find((item) => item.section === 'text' && item.name === 'application_slogan1')) === null || _a === void 0 ? void 0 : _a.value) || '', name: "application_slogan1", onChange: handleChange, slotProps: {
+                                        .map((logo) => (_jsxs(React.Fragment, { children: [_jsx(Typography, Object.assign({ variant: "h6" }, { children: formatLogoLabel(logo.name) })), _jsxs(Box, Object.assign({ className: classes.logoContainer }, { children: [_jsx("img", { src: logo.value, className: classes.logo }), _jsx("input", { type: "file", onChange: (event) => handleUpload(event, logo.name), hidden: true, accept: ".gif,.png,.jpg,.jpeg", id: logo.name }), _jsx(Button, Object.assign({ className: classes.uploadButton, onClick: () => document.getElementById(`${logo.name}`).click(), loading: Boolean(loadingLogo) && Boolean(logo.name === loadingLogo), disabled: Boolean(loadingLogo) && Boolean(logo.name !== loadingLogo) }, { children: _jsx(Icon, { children: "upload" }) }))] }))] }, logo.id))) })), tab === AppearanceTabType.SLOGAN && (_jsxs(Box, { children: [_jsx(TextField, { multiline: true, fullWidth: true, label: `${intl.formatMessage(messages.titleField)}`, margin: "normal", value: ((_a = preferences === null || preferences === void 0 ? void 0 : preferences.find((item) => item.section === 'text' && item.name === 'application_slogan1')) === null || _a === void 0 ? void 0 : _a.value) || '', name: "application_slogan1", onChange: handleChange, slotProps: {
                                                 input: {
                                                     endAdornment: (_jsx(Typography, Object.assign({ variant: "body2" }, { children: ((_c = (_b = preferences === null || preferences === void 0 ? void 0 : preferences.find((item) => item.section === 'text' && item.name === 'application_slogan1')) === null || _b === void 0 ? void 0 : _b.value) === null || _c === void 0 ? void 0 : _c.length)
                                                             ? 50 - ((_d = preferences === null || preferences === void 0 ? void 0 : preferences.find((item) => item.section === 'text' && item.name === 'application_slogan1')) === null || _d === void 0 ? void 0 : _d.value.length)
@@ -192,5 +191,5 @@ export default function Appearance(inProps) {
                                                             ? 150 - ((_k = preferences === null || preferences === void 0 ? void 0 : preferences.find((item) => item.section === 'text' && item.name === 'application_slogan2')) === null || _k === void 0 ? void 0 : _k.value.length)
                                                             : 150 })))
                                                 }
-                                            }, error: Boolean(((_m = (_l = preferences === null || preferences === void 0 ? void 0 : preferences.find((item) => item.section === 'text' && item.name === 'application_slogan2')) === null || _l === void 0 ? void 0 : _l.value) === null || _m === void 0 ? void 0 : _m.length) > 150) }), _jsx(LoadingButton, Object.assign({ loading: updating, disabled: updating || Object.keys(data).length === 0, variant: "outlined", size: "small", color: "primary", onClick: updatePreference }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.appearance.titleSlogan.button", defaultMessage: "ui.onBoardingWidget.step.appearance.titleSlogan.button" }) }))] }))] })) })] }))] })));
+                                            }, error: Boolean(((_m = (_l = preferences === null || preferences === void 0 ? void 0 : preferences.find((item) => item.section === 'text' && item.name === 'application_slogan2')) === null || _l === void 0 ? void 0 : _l.value) === null || _m === void 0 ? void 0 : _m.length) > 150) }), _jsx(Button, Object.assign({ loading: updating, disabled: updating || Object.keys(data).length === 0, variant: "outlined", size: "small", color: "primary", onClick: updatePreference }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.appearance.titleSlogan.button", defaultMessage: "ui.onBoardingWidget.step.appearance.titleSlogan.button" }) }))] }))] })) })] }))] })));
 }

package/lib/esm/components/PaymentOrders/PaymentOrders.js CHANGED Viewed

@@ -3,7 +3,6 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { useCallback, useEffect, useState } from 'react';
 import { Box, Chip, Paper, Table, TableBody, Skeleton, TableCell, TableContainer, TableHead, TableRow, Typography, Stack, CircularProgress, styled, Grid, TextField, InputAdornment, IconButton, Icon, Button, useTheme, useMediaQuery, MenuItem } from '@mui/material';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
-import LoadingButton from '@mui/lab/LoadingButton';
 import { useInView } from 'react-intersection-observer';
 import { PaymentService } from '@selfcommunity/api-services';
 import { useThemeProps } from '@mui/system';
@@ -22,8 +21,8 @@ import { SCOPE_SC_UI } from '../../constants/Errors';
 import HiddenPlaceholder from '../../shared/HiddenPlaceholder';
 import { LocalizationProvider, MobileDatePicker } from '@mui/x-date-pickers';
 import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
-import itLocale from 'date-fns/locale/it';
-import enLocale from 'date-fns/locale/en-US';
+import { it } from 'date-fns/locale/it';
+import { enUS } from 'date-fns/locale/en-US';
 import Category from '../Category';
 const PREFIX = 'SCPaymentOrders';
 const messages = defineMessages({
@@ -207,7 +206,7 @@ export default function PaymentOrders(inProps) {
     const skeleton = () => {
         return (_jsxs(TableRow, Object.assign({ ref: ref }, { children: [_jsx(TableCell, Object.assign({ component: "th", scope: "row" }, { children: _jsx(Skeleton, { variant: "text", height: 40, width: 20 }) })), _jsx(TableCell, Object.assign({ component: "th", scope: "row" }, { children: _jsx(Skeleton, { variant: "text", height: 40, width: 30 }) })), _jsx(TableCell, Object.assign({ component: "th", scope: "row" }, { children: _jsx(Skeleton, { variant: "text", height: 80, width: 250 }) })), _jsx(TableCell, Object.assign({ component: "th", scope: "row" }, { children: _jsx(Skeleton, { variant: "text", height: 40, width: 65 }) })), _jsx(TableCell, Object.assign({ component: "th", scope: "row" }, { children: _jsx(Skeleton, { variant: "text", height: 40, width: 65 }) })), _jsx(TableCell, Object.assign({ component: "th", scope: "row" }, { children: _jsx(Skeleton, { variant: "text", height: 40, width: 65 }) })), _jsx(TableCell, Object.assign({ component: "th", scope: "row" }, { children: _jsx(Skeleton, { variant: "text", height: 40, width: 65 }) })), _jsx(TableCell, Object.assign({ component: "th", scope: "row" }, { children: _jsx(Skeleton, { variant: "text", height: 40, width: 65 }) }))] })));
     };
-    return (_jsxs(Root, Object.assign({ variant: "outlined", className: classNames(classes.root, className) }, rest, { children: [_jsxs(Grid, Object.assign({ container: true, width: "100%", className: classes.filters, gap: 3 }, { children: [_jsx(Grid, Object.assign({ size: { md: 3 } }, { children: _jsx(TextField, { className: classes.search, size: "small", fullWidth: true, value: query, label: _jsx(FormattedMessage, { id: "ui.paymentOrders.search", defaultMessage: "ui.paymentOrders.search" }), variant: "outlined", onChange: handleChange, disabled: isLoading, onKeyUp: (e) => {
+    return (_jsxs(Root, Object.assign({ variant: "outlined", className: classNames(classes.root, className) }, rest, { children: [_jsxs(Grid, Object.assign({ container: true, width: "100%", className: classes.filters, gap: 3 }, { children: [_jsx(Grid, Object.assign({ size: { xs: 12, md: 3 } }, { children: _jsx(TextField, { className: classes.search, size: "small", fullWidth: true, value: query, label: _jsx(FormattedMessage, { id: "ui.paymentOrders.search", defaultMessage: "ui.paymentOrders.search" }), variant: "outlined", onChange: handleChange, disabled: isLoading, onKeyUp: (e) => {
                                 e.preventDefault();
                                 if (e.key === 'Enter') {
                                     fetchInvoices();
@@ -219,7 +218,7 @@ export default function PaymentOrders(inProps) {
                                                     fetchInvoices('');
                                                 }, disabled: isLoading }, { children: _jsx(Icon, { children: "close" }) }))), isMobile ? (_jsx(IconButton, { onClick: () => fetchInvoices(), disabled: isLoading })) : (_jsx(Button, { size: "small", variant: "contained", color: "secondary", onClick: () => fetchInvoices(), endIcon: _jsx(Icon, { children: "search" }), disabled: isLoading }))] })))
                                 }
-                            } }) })), _jsx(Grid, Object.assign({ size: { md: 3 } }, { children: _jsx(TextField, Object.assign({ select: true, fullWidth: true, disabled: isLoading, size: "small", label: _jsx(FormattedMessage, { id: "ui.paymentOrders.contentTypeFilter", defaultMessage: "ui.paymentOrders.contentTypeFilter" }), value: contentTypeFilter, onChange: handleContentTypeChange }, { children: options.map((option) => (_jsx(MenuItem, Object.assign({ value: option.value }, { children: option.label }), option.value))) })) })), _jsx(Grid, Object.assign({ size: { sm: 8, md: 4 } }, { children: _jsx(LocalizationProvider, Object.assign({ dateAdapter: AdapterDateFns, adapterLocale: scContext.settings.locale.default === 'it' ? itLocale : enLocale, localeText: {
+                            } }) })), _jsx(Grid, Object.assign({ size: { xs: 12, md: 3 } }, { children: _jsx(TextField, Object.assign({ select: true, fullWidth: true, disabled: isLoading, size: "small", label: _jsx(FormattedMessage, { id: "ui.paymentOrders.contentTypeFilter", defaultMessage: "ui.paymentOrders.contentTypeFilter" }), value: contentTypeFilter, onChange: handleContentTypeChange }, { children: options.map((option) => (_jsx(MenuItem, Object.assign({ value: option.value }, { children: option.label }), option.value))) })) })), _jsx(Grid, Object.assign({ size: { xs: 12, sm: 8, md: 4 } }, { children: _jsx(LocalizationProvider, Object.assign({ dateAdapter: AdapterDateFns, adapterLocale: scContext.settings.locale.default === 'it' ? it : enUS, localeText: {
                                 cancelButtonLabel: `${intl.formatMessage(messages.pickerCancelAction)}`,
                                 clearButtonLabel: `${intl.formatMessage(messages.pickerClearAction)}`
                             } }, { children: _jsxs(Grid, Object.assign({ container: true, width: "100%", spacing: 2 }, { children: [_jsx(Grid, Object.assign({ size: 6 }, { children: _jsx(MobileDatePicker, { className: classes.picker, label: _jsx(FormattedMessage, { id: "ui.paymentOrders.dateFrom", defaultMessage: "ui.paymentOrders.dateFrom" }), value: startDate, slots: {
@@ -263,5 +262,5 @@ export default function PaymentOrders(inProps) {
                                                         hour: 'numeric',
                                                         minute: 'numeric'
                                                     })
-                                                    : '-' })), _jsx(TableCell, Object.assign({ scope: "row" }, { children: _jsx(Chip, { variant: 'outlined', label: _jsx(FormattedMessage, { id: "ui.paymentOrders.status.paid", defaultMessage: "ui.paymentOrders.status.paid" }), color: "success", size: "small" }) })), _jsx(TableCell, Object.assign({ scope: "row" }, { children: _jsxs(Stack, Object.assign({ direction: "row", justifyContent: "left", alignItems: "center", spacing: 2 }, { children: [order.content_type === SCContentType.EVENT && _jsx(PaymentOrderPdfButton, { paymentOrder: order }), Boolean(!order.paid && order.billing_reason === 'subscription_create') && (_jsx(LoadingButton, Object.assign({ size: "small", variant: "contained", disabled: true }, { children: _jsx(FormattedMessage, { id: "ui.paymentOrders.pay", defaultMessage: "ui.paymentOrders.pay" }) })))] })) }))] }, index))), orders.length < 1 && (_jsx(TableRow, { children: _jsx(TableCell, Object.assign({ align: "left", colSpan: 6 }, { children: _jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedMessage, { id: "ui.paymentOrders.noOrders", defaultMessage: "ui.paymentOrders.noOrders" }) })) })) })), hasMore && _jsx(_Fragment, { children: skeleton() })] })] })) }))) : (_jsx(CircularProgress, {})) }))] })));
+                                                    : '-' })), _jsx(TableCell, Object.assign({ scope: "row" }, { children: _jsx(Chip, { variant: 'outlined', label: _jsx(FormattedMessage, { id: "ui.paymentOrders.status.paid", defaultMessage: "ui.paymentOrders.status.paid" }), color: "success", size: "small" }) })), _jsx(TableCell, Object.assign({ scope: "row" }, { children: _jsxs(Stack, Object.assign({ direction: "row", justifyContent: "left", alignItems: "center", spacing: 2 }, { children: [order.content_type === SCContentType.EVENT && _jsx(PaymentOrderPdfButton, { paymentOrder: order }), Boolean(!order.paid && order.billing_reason === 'subscription_create') && (_jsx(Button, Object.assign({ size: "small", variant: "contained", disabled: true }, { children: _jsx(FormattedMessage, { id: "ui.paymentOrders.pay", defaultMessage: "ui.paymentOrders.pay" }) })))] })) }))] }, index))), orders.length < 1 && (_jsx(TableRow, { children: _jsx(TableCell, Object.assign({ align: "left", colSpan: 6 }, { children: _jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedMessage, { id: "ui.paymentOrders.noOrders", defaultMessage: "ui.paymentOrders.noOrders" }) })) })) })), hasMore && _jsx(_Fragment, { children: skeleton() })] })] })) }))) : (_jsx(CircularProgress, {})) }))] })));
 }

package/lib/esm/components/PaymentProducts/Skeleton.js CHANGED Viewed

@@ -39,5 +39,5 @@ export default function PaymentProductsSkeleton(inProps) {
     // HOOKS
     const theme = useTheme();
     const isMobile = useMediaQuery(theme.breakpoints.down('md'));
-    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: _jsx(Grid, Object.assign({ container: true, width: "100%", spacing: { xs: 3 }, className: classes.products }, { children: [...Array(isMobile ? 1 : 2)].map((_product, index) => (_jsx(Grid, { children: _jsx(PaymentProductSkeleton, Object.assign({ elevation: 0, variant: "outlined" }, PaymentProductSkeletonProps)) }, index))) })) })));
+    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: _jsx(Grid, Object.assign({ container: true, width: "100%", spacing: { xs: 3 }, className: classes.products }, { children: [...Array(isMobile ? 1 : 2)].map((_product, index) => (_jsx(Grid, Object.assign({ size: 12 }, { children: _jsx(PaymentProductSkeleton, Object.assign({ elevation: 0, variant: "outlined" }, PaymentProductSkeletonProps)) }), index))) })) })));
 }