@selfcommunity/react-ui 0.7.50-events.85 → 0.7.50-events.87

package/lib/cjs/components/EventHeader/EventHeader.d.ts

@@ -1,6 +1,6 @@
 import { SCEventType } from '@selfcommunity/types';
-import { EventSubscribeButtonProps } from '../EventSubscribeButton';
 import { EventActionsMenuProps } from '../../shared/EventActionsMenu';
+import { EventSubscribeButtonProps } from '../EventSubscribeButton';
 export interface EventHeaderProps {
     /**
      * Id of event object

package/lib/cjs/components/EventHeader/EventHeader.js

@@ -2,30 +2,32 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const styles_1 = require("@mui/material/styles");
 const material_1 = require("@mui/material");
-const types_1 = require("@selfcommunity/types");
+const styles_1 = require("@mui/material/styles");
+const system_1 = require("@mui/system");
 const react_core_1 = require("@selfcommunity/react-core");
-const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
+const types_1 = require("@selfcommunity/types");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
-const system_1 = require("@mui/system");
-const constants_1 = require("./constants");
+const pubsub_js_1 = tslib_1.__importDefault(require("pubsub-js"));
+const react_1 = require("react");
 const react_intl_1 = require("react-intl");
-const Bullet_1 = tslib_1.__importDefault(require("../../shared/Bullet"));
-const EventSubscribeButton_1 = tslib_1.__importDefault(require("../EventSubscribeButton"));
-const EventInviteButton_1 = tslib_1.__importDefault(require("../EventInviteButton"));
 const PubSub_1 = require("../../constants/PubSub");
-const pubsub_js_1 = tslib_1.__importDefault(require("pubsub-js"));
-const EditEventButton_1 = tslib_1.__importDefault(require("../EditEventButton"));
-const User_1 = tslib_1.__importDefault(require("../User"));
+const Bullet_1 = tslib_1.__importDefault(require("../../shared/Bullet"));
 const Calendar_1 = tslib_1.__importDefault(require("../../shared/Calendar"));
 const EventActionsMenu_1 = tslib_1.__importDefault(require("../../shared/EventActionsMenu"));
+const EditEventButton_1 = tslib_1.__importDefault(require("../EditEventButton"));
+const EventInviteButton_1 = tslib_1.__importDefault(require("../EventInviteButton"));
+const EventSubscribeButton_1 = tslib_1.__importDefault(require("../EventSubscribeButton"));
+const User_1 = tslib_1.__importDefault(require("../User"));
+const constants_1 = require("./constants");
+const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
 const classes = {
     root: `${constants_1.PREFIX}-root`,
     cover: `${constants_1.PREFIX}-cover`,
     time: `${constants_1.PREFIX}-time`,
     calendar: `${constants_1.PREFIX}-calendar`,
+    inProgress: `${constants_1.PREFIX}-in-progress`,
+    chip: `${constants_1.PREFIX}-chip`,
     info: `${constants_1.PREFIX}-info`,
     name: `${constants_1.PREFIX}-name`,
     visibility: `${constants_1.PREFIX}-visibility`,
@@ -36,7 +38,7 @@ const classes = {
 const Root = (0, styles_1.styled)(material_1.Box, {
     name: constants_1.PREFIX,
     slot: 'Root',
-    shouldForwardProp: (prop) => prop !== 'isEventAdmin'
+    shouldForwardProp: (prop) => prop !== 'isEventAdmin' && prop !== 'isEventFinished'
 })(() => ({}));
 /**
  * > API documentation for the Community-JS Event Header component. Learn about the available props and the CSS API.
@@ -85,14 +87,20 @@ function EventHeader(inProps) {
     const scUserContext = (0, react_core_1.useSCUser)();
     // HOOKS
     const { scEvent, setSCEvent } = (0, react_core_1.useSCFetchEvent)({ id: eventId, event });
+    const theme = (0, material_1.useTheme)();
+    const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'));
     // INTL
     const intl = (0, react_intl_1.useIntl)();
     // REFS
     const updatesSubscription = (0, react_1.useRef)(null);
     // CONST
     const isEventAdmin = (0, react_1.useMemo)(() => { var _a; return scUserContext.user && ((_a = scEvent === null || scEvent === void 0 ? void 0 : scEvent.managed_by) === null || _a === void 0 ? void 0 : _a.id) === scUserContext.user.id; }, [scUserContext.user, (_a = scEvent === null || scEvent === void 0 ? void 0 : scEvent.managed_by) === null || _a === void 0 ? void 0 : _a.id]);
-    const theme = (0, material_1.useTheme)();
-    const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'));
+    const isEventFinished = (0, react_1.useMemo)(() => {
+        if (scEvent && !scEvent.running) {
+            return new Date().getTime() > new Date(scEvent.end_date || scEvent.start_date).getTime();
+        }
+        return false;
+    }, [scEvent]);
     /**
      * Subscriber for pubsub callback
      */
@@ -136,7 +144,7 @@ function EventHeader(inProps) {
     return (
     // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
     // @ts-ignore
-    (0, jsx_runtime_1.jsxs)(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className), isEventAdmin: isEventAdmin }, rest, { children: [(0, jsx_runtime_1.jsx)(material_1.Paper, Object.assign({ style: _backgroundCover, classes: { root: classes.cover } }, { children: (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.calendar }, { children: (0, jsx_runtime_1.jsx)(Calendar_1.default, { day: new Date(scEvent.start_date).getDate() }) })) })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.info }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.time }, { children: scEvent.end_date && scEvent.end_date !== scEvent.start_date ? (new Date(scEvent.start_date).getDate() !== new Date(scEvent.end_date).getDate() ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventHeader.startEndTimeDiff", defaultMessage: "ui.eventHeader.startEndTimeDiff", values: {
+    (0, jsx_runtime_1.jsxs)(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className), isEventAdmin: isEventAdmin, isEventFinished: isEventFinished }, rest, { children: [(0, jsx_runtime_1.jsx)(material_1.Paper, Object.assign({ style: _backgroundCover, classes: { root: classes.cover } }, { children: (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.calendar }, { children: (0, jsx_runtime_1.jsx)(Calendar_1.default, { day: new Date(scEvent.start_date).getDate() }) })) })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.info }, { children: [scEvent.running && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", className: classes.inProgress }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventHeader.inProgress", defaultMessage: "ui.eventHeader.inProgress" }) }))), isEventFinished && ((0, jsx_runtime_1.jsx)(material_1.Chip, { icon: (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ fontSize: "small" }, { children: "calendar_off" })), label: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventHeader.finished", defaultMessage: "ui.eventHeader.finished" }) })), variant: "outlined", size: "small", className: classes.chip })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.time }, { children: scEvent.end_date && scEvent.end_date !== scEvent.start_date ? (new Date(scEvent.start_date).getDate() !== new Date(scEvent.end_date).getDate() ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventHeader.startEndTimeDiff", defaultMessage: "ui.eventHeader.startEndTimeDiff", values: {
                                 startDate: intl.formatDate(scEvent.start_date, {
                                     weekday: 'long',
                                     day: 'numeric',

package/lib/cjs/components/EventInfoWidget/EventInfoWidget.js

@@ -68,6 +68,6 @@ function EventInfoWidget(inProps) {
         return (0, jsx_runtime_1.jsx)(HiddenPlaceholder_1.default, {});
     }
     const description = expanded ? scEvent.description : getTruncatedText(scEvent.description, 220);
-    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: classes.root }, rest, { children: (0, jsx_runtime_1.jsxs)(material_1.CardContent, Object.assign({ className: classes.content }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.titleWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ fontSize: "small" }, { children: "info" })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.infoEventWidget.title", defaultMessage: "ui.infoEventWidget.title" }) }))] })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.textWrapper }, { children: (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ component: "span", variant: "body1" }, { children: [description, showButton && !expanded && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: "text", className: classes.showMore, onClick: handleToggleSummary }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.infoEventWidget.showMore", defaultMessage: "ui.infoEventWidget.showMore" }) })))] })) })), (0, jsx_runtime_1.jsx)(EventInfoDetails_1.default, { event: scEvent, hasCreatedInfo: true })] })) })));
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: classes.root }, rest, { children: (0, jsx_runtime_1.jsxs)(material_1.CardContent, Object.assign({ className: classes.content }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.titleWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ fontSize: "small" }, { children: "info" })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.infoEventWidget.title", defaultMessage: "ui.infoEventWidget.title" }) }))] })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.textWrapper }, { children: (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ component: "span", variant: "body1" }, { children: [description, showButton && !expanded && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: "text", className: classes.showMore, onClick: handleToggleSummary }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.infoEventWidget.showMore", defaultMessage: "ui.infoEventWidget.showMore" }) })))] })) })), (0, jsx_runtime_1.jsx)(EventInfoDetails_1.default, { event: scEvent, hasRecurringInfo: true, hasCreatedInfo: true })] })) })));
 }
 exports.default = EventInfoWidget;

package/lib/cjs/components/EventInviteButton/EventInviteButton.js

@@ -246,7 +246,7 @@ function EventInviteButton(inProps) {
     /**
      * Renders root object
      */
-    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className), onClick: handleClose, variant: scEvent ? 'contained' : 'outlined', color: scEvent ? 'secondary' : 'inherit', startIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "add" }) }, rest, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventInviteButton", defaultMessage: "ui.eventInviteButton" }) })), open && ((0, jsx_runtime_1.jsx)(DialogRoot, Object.assign({ DialogContentProps: { dividers: false }, open: true, className: classes.dialogRoot, title: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: handleClose }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "arrow_back" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.dialogTitle }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventInviteButton.dialog.title", defaultMessage: "ui.eventInviteButton.dialog.title" }) })), (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ size: "small", color: "secondary", variant: "contained", onClick: handleSendInvitations, loading: isSending, disabled: !invited.length }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventInviteButton.dialog.button.end", defaultMessage: "ui.eventInviteButton.dialog.button.end" }) }))] }) }, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.dialogContent }, { children: [(0, jsx_runtime_1.jsx)(Autocomplete_1.default, { className: classes.autocomplete, loading: loading, size: "small", multiple: true, freeSolo: true, disableClearable: true, options: suggested, onChange: handleChange, onInputChange: handleInputChange, inputValue: value, filterOptions: filterOptions, value: invited, getOptionLabel: (option) => (option ? option.username : '...'), isOptionEqualToValue: (option, value) => (option ? value.id === option.id : false), renderTags: () => null, renderOption: (props, option) => ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ component: "li" }, props, { children: [(0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: option.username, src: option.avatar }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ ml: 1 }, { children: option.username }))] }))), renderInput: (params) => ((0, jsx_runtime_1.jsx)(material_1.TextField, Object.assign({}, params, { variant: "outlined", placeholder: `${intl.formatMessage(messages.placeholder)}`, InputProps: Object.assign(Object.assign({}, params.InputProps), { className: classes.input, startAdornment: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "start" }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ className: classes.icon }, { children: "search" })) })), params.InputProps.startAdornment] })) }) }))) }), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.invitedBox }, { children: invited.map((option, index) => ((0, jsx_runtime_1.jsx)(material_1.Chip, { avatar: (0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: option.username, src: option.avatar }), label: option.username, onDelete: () => {
+    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className), onClick: handleClose, variant: scEvent ? 'contained' : 'outlined', color: scEvent ? 'secondary' : 'inherit', startIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "add" }) }, rest, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventInviteButton", defaultMessage: "ui.eventInviteButton" }) })), open && ((0, jsx_runtime_1.jsx)(DialogRoot, Object.assign({ DialogContentProps: { dividers: false }, open: true, className: classes.dialogRoot, title: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: handleClose }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.dialogTitle }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventInviteButton.dialog.title", defaultMessage: "ui.eventInviteButton.dialog.title" }) })), (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ size: "small", color: "secondary", variant: "contained", onClick: handleSendInvitations, loading: isSending, disabled: !invited.length }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventInviteButton.dialog.button.end", defaultMessage: "ui.eventInviteButton.dialog.button.end" }) }))] }) }, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.dialogContent }, { children: [(0, jsx_runtime_1.jsx)(Autocomplete_1.default, { className: classes.autocomplete, loading: loading, size: "small", multiple: true, freeSolo: true, disableClearable: true, options: suggested, onChange: handleChange, onInputChange: handleInputChange, inputValue: value, filterOptions: filterOptions, value: invited, getOptionLabel: (option) => (option ? option.username : '...'), isOptionEqualToValue: (option, value) => (option ? value.id === option.id : false), renderTags: () => null, renderOption: (props, option) => ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ component: "li" }, props, { children: [(0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: option.username, src: option.avatar }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ ml: 1 }, { children: option.username }))] }))), renderInput: (params) => ((0, jsx_runtime_1.jsx)(material_1.TextField, Object.assign({}, params, { variant: "outlined", placeholder: `${intl.formatMessage(messages.placeholder)}`, InputProps: Object.assign(Object.assign({}, params.InputProps), { className: classes.input, startAdornment: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "start" }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ className: classes.icon }, { children: "search" })) })), params.InputProps.startAdornment] })) }) }))) }), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.invitedBox }, { children: invited.map((option, index) => ((0, jsx_runtime_1.jsx)(material_1.Chip, { avatar: (0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: option.username, src: option.avatar }), label: option.username, onDelete: () => {
                                     handleDelete(option);
                                 }, style: { marginRight: 8 } }, index))) })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.suggested }, { children: [list.length !== 0 && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h4", fontWeight: "bold" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventInviteButton.dialog.content.list", defaultMessage: "ui.eventInviteButton.dialog.content.list" }) }))), list.slice(0, 5).map((user, index) => ((0, jsx_runtime_1.jsx)(User_1.default, { elevation: 0, actions: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}), user: user, userId: user.id, buttonProps: { onClick: () => handleUserInvite(user) } }, index)))] }))] })) })))] }));
 }

package/lib/cjs/components/OnBoardingWidget/OnBoardingWidget.js

@@ -18,7 +18,6 @@ const App_1 = tslib_1.__importDefault(require("./Steps/App"));
 const HiddenPlaceholder_1 = tslib_1.__importDefault(require("../../shared/HiddenPlaceholder"));
 const Widget_1 = tslib_1.__importDefault(require("../Widget"));
 const Content_1 = tslib_1.__importDefault(require("./Steps/Content"));
-const Header_1 = tslib_1.__importDefault(require("../../assets/onBoarding/Header"));
 const Errors_1 = require("../../constants/Errors");
 const api_services_1 = require("@selfcommunity/api-services");
 const utils_1 = require("@selfcommunity/utils");
@@ -217,7 +216,7 @@ const OnBoardingWidget = (inProps) => {
     if (!isAdmin) {
         return (0, jsx_runtime_1.jsx)(HiddenPlaceholder_1.default, {});
     }
-    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: (0, jsx_runtime_1.jsxs)(AccordionRoot, Object.assign({ defaultExpanded: true, onChange: handleExpand, className: classes.accordionRoot, expanded: expanded }, { children: [(0, jsx_runtime_1.jsx)(material_1.AccordionSummary, Object.assign({ expandIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ fontSize: "medium" }, { children: "expand_more" })), "aria-controls": "accordion", id: "onBoarding-accordion" }, { children: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: expanded ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!isMobile ? ((0, jsx_runtime_1.jsx)(material_1.CardMedia, Object.assign({ className: classes.logo, component: "div" }, { children: (0, jsx_runtime_1.jsx)(Header_1.default, {}) }))) : ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h4", textAlign: "center" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.accordion.expanded.title.mobile", defaultMessage: "ui.onBoardingWidget.accordion.expanded.title.mobile", values: {
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: (0, jsx_runtime_1.jsxs)(AccordionRoot, Object.assign({ defaultExpanded: true, onChange: handleExpand, className: classes.accordionRoot, expanded: expanded }, { children: [(0, jsx_runtime_1.jsx)(material_1.AccordionSummary, Object.assign({ expandIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ fontSize: "medium" }, { children: "expand_more" })), "aria-controls": "accordion", id: "onBoarding-accordion" }, { children: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: expanded ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!isMobile ? ((0, jsx_runtime_1.jsx)(material_1.CardMedia, { className: classes.logo, component: "img", src: "/onBoarding/header.svg" })) : ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h4", textAlign: "center" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.accordion.expanded.title.mobile", defaultMessage: "ui.onBoardingWidget.accordion.expanded.title.mobile", values: {
                                             // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
                                             // @ts-ignore
                                             b: (chunks) => (0, jsx_runtime_1.jsx)("strong", { children: chunks }),

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

@@ -10,8 +10,6 @@ const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const constants_1 = require("../../constants");
 const material_1 = require("@mui/material");
 const react_intl_1 = require("react-intl");
-const Ios_1 = tslib_1.__importDefault(require("../../../../assets/onBoarding/Ios"));
-const Android_1 = tslib_1.__importDefault(require("../../../../assets/onBoarding/Android"));
 const types_1 = require("@selfcommunity/types");
 const classes = {
     root: `${constants_1.PREFIX}-app-root`,
@@ -56,7 +54,7 @@ function App(inProps) {
                                         // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
                                         // @ts-ignore
                                         b: (...chunks) => (0, jsx_runtime_1.jsx)("strong", { children: chunks })
-                                    } }) })), (0, jsx_runtime_1.jsx)(material_1.CardMedia, Object.assign({ className: classes.image, component: "div" }, { children: (0, jsx_runtime_1.jsx)(Ios_1.default, {}) }))] })), tab === 1 && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.summary }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.app.android", defaultMessage: "ui.onBoardingWidget.step.app.android" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.step }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.app.android.a", defaultMessage: "ui.onBoardingWidget.step.app.android.a", values: {
+                                    } }) })), (0, jsx_runtime_1.jsx)(material_1.CardMedia, { className: classes.image, component: "img", src: "/onBoarding/ios.png" })] })), tab === 1 && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.summary }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.app.android", defaultMessage: "ui.onBoardingWidget.step.app.android" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.step }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.app.android.a", defaultMessage: "ui.onBoardingWidget.step.app.android.a", values: {
                                         // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
                                         // @ts-ignore
                                         icon: (...chunks) => (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ fontSize: "medium" }, { children: chunks })),
@@ -70,6 +68,6 @@ function App(inProps) {
                                         // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
                                         // @ts-ignore
                                         b: (...chunks) => (0, jsx_runtime_1.jsx)("strong", { children: chunks })
-                                    } }) })), (0, jsx_runtime_1.jsx)(material_1.CardMedia, Object.assign({ className: classes.image, component: "div" }, { children: (0, jsx_runtime_1.jsx)(Android_1.default, {}) }))] })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ className: classes.button, size: "small", variant: "outlined", color: "secondary", onClick: onCompleteAction, disabled: (step === null || step === void 0 ? void 0 : step.status) === types_1.SCOnBoardingStepStatusType.COMPLETED || (step === null || step === void 0 ? void 0 : step.status) === types_1.SCOnBoardingStepStatusType.IN_PROGRESS }, { children: "Ok!" }))] }))] })));
+                                    } }) })), (0, jsx_runtime_1.jsx)(material_1.CardMedia, { className: classes.image, component: "img", src: "/onBoarding/android.png" })] })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ className: classes.button, size: "small", variant: "outlined", color: "secondary", onClick: onCompleteAction, disabled: (step === null || step === void 0 ? void 0 : step.status) === types_1.SCOnBoardingStepStatusType.COMPLETED || (step === null || step === void 0 ? void 0 : step.status) === types_1.SCOnBoardingStepStatusType.IN_PROGRESS }, { children: "Ok!" }))] }))] })));
 }
 exports.default = App;

package/lib/cjs/components/OnBoardingWidget/Steps/Category/Category.js

@@ -10,10 +10,9 @@ const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const react_1 = require("react");
 const react_intl_1 = require("react-intl");
 const constants_1 = require("../../constants");
-const CategoryA_1 = tslib_1.__importDefault(require("../../../../assets/onBoarding/CategoryA"));
-const CategoryB_1 = tslib_1.__importDefault(require("../../../../assets/onBoarding/CategoryB"));
 const ProgressBar_1 = tslib_1.__importDefault(require("../../../../shared/ProgressBar"));
 const types_1 = require("@selfcommunity/types");
+const react_lottie_player_1 = require("@lottiefiles/react-lottie-player");
 const classes = {
     root: `${constants_1.PREFIX}-category-root`,
     title: `${constants_1.PREFIX}-category-title`,
@@ -21,7 +20,9 @@ const classes = {
     image: `${constants_1.PREFIX}-category-image`,
     action: `${constants_1.PREFIX}-category-action`,
     button: `${constants_1.PREFIX}-category-button`,
-    success: `${constants_1.PREFIX}-success`
+    success: `${constants_1.PREFIX}-success`,
+    progress: `${constants_1.PREFIX}-category-progress`,
+    animationProgress: `${constants_1.PREFIX}-category-animation-progress`
 };
 function CircledLetter({ letter, statement }) {
     return ((0, jsx_runtime_1.jsxs)(Box_1.default, Object.assign({ component: "span", sx: { display: 'flex', alignItems: 'center', gap: 1, mb: 1.5 } }, { children: [(0, jsx_runtime_1.jsx)(Box_1.default, Object.assign({ component: "span", sx: {
@@ -68,16 +69,16 @@ function Category(inProps) {
             return () => clearInterval(intervalId);
         }
     }, [step.status, step.completion_percentage]);
-    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h4", className: classes.title }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.categories", defaultMessage: "ui.onBoardingWidget.categories" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.summary }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.category.summary", defaultMessage: "ui.onBoardingWidget.step.category.summary" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.category.generation.steps", defaultMessage: "ui.onBoardingWidget.step.category.generation.steps", values: {
-                        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                        // @ts-ignore
-                        iconA: (...chunks) => (0, jsx_runtime_1.jsx)(CircledLetter, { letter: "a", statement: chunks }),
-                        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                        // @ts-ignore
-                        iconB: (...chunks) => (0, jsx_runtime_1.jsx)(CircledLetter, { letter: "b", statement: chunks }),
-                        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                        // @ts-ignore
-                        iconC: (...chunks) => (0, jsx_runtime_1.jsx)(CircledLetter, { letter: "c", statement: chunks })
-                    } }) }), (0, jsx_runtime_1.jsx)(material_1.CardMedia, Object.assign({ className: classes.image, component: "div" }, { children: (0, jsx_runtime_1.jsx)(CategoryA_1.default, {}) })), (0, jsx_runtime_1.jsx)(material_1.CardMedia, Object.assign({ className: classes.image, component: "div" }, { children: (0, jsx_runtime_1.jsx)(CategoryB_1.default, {}) })), (0, jsx_runtime_1.jsx)(Box_1.default, Object.assign({ component: "span", className: classes.action }, { children: (step === null || step === void 0 ? void 0 : step.status) === types_1.SCOnBoardingStepStatusType.COMPLETED ? ((0, jsx_runtime_1.jsx)(material_1.Alert, Object.assign({ severity: "success" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.categories.success", defaultMessage: "ui.onBoardingWidget.step.categories.success" }) }))) : (step === null || step === void 0 ? void 0 : step.status) === types_1.SCOnBoardingStepStatusType.IN_PROGRESS ? ((0, jsx_runtime_1.jsx)(ProgressBar_1.default, { value: progress, loadingMessage: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h4" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.categories.loading", defaultMessage: "ui.onBoardingWidget.step.categories.loading" }) })) })) : ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: "contained", color: "secondary", onClick: handleCategoriesCreation, endIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: hover ? 'ai_stars' : 'magic_wand' }), onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.onBoardingWidget.step.category.button", id: "ui.onBoardingWidget.step.category.button" }) }))) }))] })));
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h4", className: classes.title }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.categories", defaultMessage: "ui.onBoardingWidget.categories" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.summary }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.category.summary", defaultMessage: "ui.onBoardingWidget.step.category.summary" }) })), (step === null || step === void 0 ? void 0 : step.status) !== types_1.SCOnBoardingStepStatusType.IN_PROGRESS && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.category.generation.steps", defaultMessage: "ui.onBoardingWidget.step.category.generation.steps", values: {
+                                // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                                // @ts-ignore
+                                iconA: (...chunks) => (0, jsx_runtime_1.jsx)(CircledLetter, { letter: "a", statement: chunks }),
+                                // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                                // @ts-ignore
+                                iconB: (...chunks) => (0, jsx_runtime_1.jsx)(CircledLetter, { letter: "b", statement: chunks }),
+                                // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                                // @ts-ignore
+                                iconC: (...chunks) => (0, jsx_runtime_1.jsx)(CircledLetter, { letter: "c", statement: chunks })
+                            } }) }), (0, jsx_runtime_1.jsx)(material_1.CardMedia, { className: classes.image, component: "img", src: "/onBoarding/categoryA.svg" }), (0, jsx_runtime_1.jsx)(material_1.CardMedia, { className: classes.image, component: "img", src: "/onBoarding/categoryB.svg" })] })), (0, jsx_runtime_1.jsx)(Box_1.default, Object.assign({ component: "span", className: classes.action }, { children: (step === null || step === void 0 ? void 0 : step.status) === types_1.SCOnBoardingStepStatusType.COMPLETED ? ((0, jsx_runtime_1.jsx)(material_1.Alert, Object.assign({ severity: "success" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.categories.success", defaultMessage: "ui.onBoardingWidget.step.categories.success" }) }))) : (step === null || step === void 0 ? void 0 : step.status) === types_1.SCOnBoardingStepStatusType.IN_PROGRESS ? ((0, jsx_runtime_1.jsxs)(Box_1.default, Object.assign({ className: classes.progress }, { children: [(0, jsx_runtime_1.jsx)(react_lottie_player_1.Player, { autoplay: true, loop: true, src: "/onBoarding/progress/category_progress.json", className: classes.animationProgress, controls: false }), (0, jsx_runtime_1.jsx)(ProgressBar_1.default, { value: progress, hideBar: true, loadingMessage: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h4" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.categories.loading", defaultMessage: "ui.onBoardingWidget.step.categories.loading" }) })) })] }))) : ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: "contained", color: "secondary", onClick: handleCategoriesCreation, endIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: hover ? 'ai_stars' : 'magic_wand' }), onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.onBoardingWidget.step.category.button", id: "ui.onBoardingWidget.step.category.button" }) }))) }))] })));
 }
 exports.default = Category;

package/lib/cjs/components/OnBoardingWidget/Steps/Content/Content.js

@@ -12,11 +12,14 @@ const constants_1 = require("../../constants");
 const react_intl_1 = require("react-intl");
 const types_1 = require("@selfcommunity/types");
 const ProgressBar_1 = tslib_1.__importDefault(require("../../../../shared/ProgressBar"));
+const react_lottie_player_1 = require("@lottiefiles/react-lottie-player");
 const classes = {
     root: `${constants_1.PREFIX}-content-root`,
     title: `${constants_1.PREFIX}-content-title`,
     summary: `${constants_1.PREFIX}-content-summary`,
-    action: `${constants_1.PREFIX}-content-action`
+    action: `${constants_1.PREFIX}-content-action`,
+    progress: `${constants_1.PREFIX}-content-progress`,
+    animationProgress: `${constants_1.PREFIX}-content-animation-progress`
 };
 const Root = (0, styles_1.styled)(Box_1.default, {
     name: constants_1.PREFIX,
@@ -48,6 +51,6 @@ function Content(inProps) {
             return () => clearInterval(intervalId);
         }
     }, [step.status, step.completion_percentage]);
-    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h4", className: classes.title }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.contents", defaultMessage: "ui.onBoardingWidget.contents" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.summary }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.content.summary", defaultMessage: "ui.onBoardingWidget.step.content.summary" }) })), (0, jsx_runtime_1.jsx)(Box_1.default, Object.assign({ component: "span", className: classes.action }, { children: (step === null || step === void 0 ? void 0 : step.status) === types_1.SCOnBoardingStepStatusType.COMPLETED ? ((0, jsx_runtime_1.jsx)(material_1.Alert, Object.assign({ severity: "success" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.contents.success", defaultMessage: "ui.onBoardingWidget.step.contents.success" }) }))) : (step === null || step === void 0 ? void 0 : step.status) === types_1.SCOnBoardingStepStatusType.IN_PROGRESS ? ((0, jsx_runtime_1.jsx)(ProgressBar_1.default, { value: progress, loadingMessage: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h4" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.contents.loading", defaultMessage: "ui.onBoardingWidget.step.contents.loading" }) })) })) : ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: "contained", color: "secondary", onClick: handleContentCreation, endIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: hover ? 'ai_stars' : 'magic_wand' }), onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.onBoardingWidget.step.content.button", id: "ui.onBoardingWidget.step.content.button" }) }))) }))] })));
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h4", className: classes.title }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.contents", defaultMessage: "ui.onBoardingWidget.contents" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.summary }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.content.summary", defaultMessage: "ui.onBoardingWidget.step.content.summary" }) })), (0, jsx_runtime_1.jsx)(Box_1.default, Object.assign({ component: "span", className: classes.action }, { children: (step === null || step === void 0 ? void 0 : step.status) === types_1.SCOnBoardingStepStatusType.COMPLETED ? ((0, jsx_runtime_1.jsx)(material_1.Alert, Object.assign({ severity: "success" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.contents.success", defaultMessage: "ui.onBoardingWidget.step.contents.success" }) }))) : (step === null || step === void 0 ? void 0 : step.status) === types_1.SCOnBoardingStepStatusType.IN_PROGRESS ? ((0, jsx_runtime_1.jsxs)(Box_1.default, Object.assign({ className: classes.progress }, { children: [(0, jsx_runtime_1.jsx)(react_lottie_player_1.Player, { autoplay: true, loop: true, src: "/onBoarding/progress/content_progress.json", className: classes.animationProgress, controls: false }), (0, jsx_runtime_1.jsx)(ProgressBar_1.default, { value: progress, hideBar: true, loadingMessage: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h4" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.contents.loading", defaultMessage: "ui.onBoardingWidget.step.contents.loading" }) })) })] }))) : ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: "contained", color: "secondary", onClick: handleContentCreation, endIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: hover ? 'ai_stars' : 'magic_wand' }), onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.onBoardingWidget.step.content.button", id: "ui.onBoardingWidget.step.content.button" }) }))) }))] })));
 }
 exports.default = Content;

package/lib/cjs/constants/Event.d.ts

@@ -1,2 +1,2 @@
 export declare const EVENT_TITLE_MAX_LENGTH = 50;
-export declare const EVENT_DESCRIPTION_MAX_LENGTH = 150;
+export declare const EVENT_DESCRIPTION_MAX_LENGTH = 500;

package/lib/cjs/constants/Event.js

@@ -2,4 +2,4 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.EVENT_DESCRIPTION_MAX_LENGTH = exports.EVENT_TITLE_MAX_LENGTH = void 0;
 exports.EVENT_TITLE_MAX_LENGTH = 50;
-exports.EVENT_DESCRIPTION_MAX_LENGTH = 150;
+exports.EVENT_DESCRIPTION_MAX_LENGTH = 500;

package/lib/cjs/shared/EventInfoDetails/index.d.ts

@@ -3,14 +3,17 @@ import React from 'react';
 export interface EventInfoDetailsProps {
     event: SCEventType;
     hideDateIcon?: boolean;
+    hideRecurringIcon?: boolean;
     hidePrivacyIcon?: boolean;
     hideLocationIcon?: boolean;
     hideCreatedIcon?: boolean;
     hasDateInfo?: boolean;
+    hasRecurringInfo?: boolean;
     hasPrivacyInfo?: boolean;
     hasLocationInfo?: boolean;
     hasCreatedInfo?: boolean;
     beforeDateInfo?: React.ReactNode | null;
+    beforeRecurringInfo?: React.ReactNode | null;
     beforePrivacyInfo?: React.ReactNode | null;
     beforeLocationInfo?: React.ReactNode | null;
     beforeCreatedInfo?: React.ReactNode | null;

package/lib/cjs/shared/EventInfoDetails/index.js

@@ -4,13 +4,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
 const react_core_1 = require("@selfcommunity/react-core");
 const types_1 = require("@selfcommunity/types");
-const date_fns_1 = require("date-fns");
-const locale_1 = require("date-fns/locale");
 const react_intl_1 = require("react-intl");
-const LOCALE_MAP = {
-    en: locale_1.enUS,
-    it: locale_1.it
-};
 const PREFIX = 'SCEventInfoDetails';
 const classes = {
     root: `${PREFIX}-root`,
@@ -30,21 +24,26 @@ function EventInfoDetails(inProps) {
         props: inProps,
         name: PREFIX
     });
-    const { event, hideDateIcon = false, hidePrivacyIcon = false, hideLocationIcon = false, hideCreatedIcon = false, hasDateInfo = true, hasPrivacyInfo = true, hasLocationInfo = true, hasCreatedInfo = false, beforeDateInfo, beforePrivacyInfo, beforeLocationInfo, beforeCreatedInfo } = props;
+    const { event, hideDateIcon = false, hideRecurringIcon = false, hidePrivacyIcon = false, hideLocationIcon = false, hideCreatedIcon = false, hasDateInfo = true, hasRecurringInfo = false, hasPrivacyInfo = true, hasLocationInfo = true, hasCreatedInfo = false, beforeDateInfo, beforeRecurringInfo, beforePrivacyInfo, beforeLocationInfo, beforeCreatedInfo } = props;
     // HOOKS
     const intl = (0, react_intl_1.useIntl)();
     const privacy = event.privacy === types_1.SCEventPrivacyType.PUBLIC ? 'ui.eventInfoDetails.privacy.public' : 'ui.eventInfoDetails.privacy.private';
     const location = event.location === types_1.SCEventLocationType.ONLINE ? 'ui.eventInfoDetails.location.virtual' : 'ui.eventInfoDetails.location.inPerson';
-    const formatDateEventDate = (date) => {
-        return (0, date_fns_1.format)(new Date(date), "EEEE d MMMM' - Ore 'H:mm", {
-            locale: LOCALE_MAP[intl.locale]
-        }).replace(/([a-z/ì]+) (\d{2}) ([a-z]+) - Ore (\d{2}):(\d{2})/, (_, weekDay, day, month, hour, minute) => `${weekDay.charAt(0).toUpperCase() + weekDay.slice(1)} ${day} ${month.charAt(0).toUpperCase() + month.slice(1)} - Ore ${hour}:${minute}`);
-    };
-    const formatDateCreateDate = (date) => {
-        return (0, date_fns_1.format)(new Date(date), "'Creato il 'd MMMM y", {
-            locale: LOCALE_MAP[intl.locale]
-        }).replace(/Creato il (\d{1})+ ([a-z]+) (\d{4})/, (_, day, month, year) => `Creato il ${day} ${month.charAt(0).toUpperCase() + month.slice(1)} ${year}`);
-    };
-    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: classes.root }, { children: [beforeDateInfo, hasDateInfo && ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.iconTextWrapper }, { children: [!hideDateIcon && (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ fontSize: "small" }, { children: "CalendarIcon" })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: formatDateEventDate(event.start_date) }))] }))), beforePrivacyInfo, hasPrivacyInfo && ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.iconTextWrapper }, { children: [!hidePrivacyIcon && (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ fontSize: "small" }, { children: event.privacy === types_1.SCEventPrivacyType.PUBLIC ? 'public' : 'private' })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: privacy, defaultMessage: privacy }) })), "-", (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: location, defaultMessage: location }) }))] }))), beforeLocationInfo, hasLocationInfo && ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.iconTextWrapper }, { children: [!hideLocationIcon && ((0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ fontSize: "small" }, { children: event.location === types_1.SCEventLocationType.ONLINE ? 'play_circle_outline' : 'add_location_alt' }))), event.location === types_1.SCEventLocationType.ONLINE ? ((0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: event.link, target: "_blank", className: classes.link }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", className: classes.url }, { children: event.link })) }))) : ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", className: classes.url }, { children: event.geolocation })))] }))), beforeCreatedInfo, hasCreatedInfo && ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.creationWrapper }, { children: [!hideCreatedIcon && (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ fontSize: "small" }, { children: "create" })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: formatDateCreateDate(event.created_at) }))] })))] })));
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: classes.root }, { children: [beforeDateInfo, hasDateInfo && ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.iconTextWrapper }, { children: [!hideDateIcon && (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ fontSize: "small" }, { children: "CalendarIcon" })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventInfoDetails.date.startEndTime", defaultMessage: "ui.eventInfoDetails.date.startEndTime", values: {
+                                date: intl.formatDate(event.running ? event.running_start_date : event.next_start_date, {
+                                    weekday: 'long',
+                                    day: 'numeric',
+                                    year: 'numeric',
+                                    month: 'long'
+                                }),
+                                start: intl.formatDate(event.running ? event.running_start_date : event.next_start_date, { hour: 'numeric', minute: 'numeric' })
+                            } }) }))] }))), beforeRecurringInfo, hasRecurringInfo && event.recurring !== types_1.SCEventRecurrenceType.NEVER && ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.iconTextWrapper }, { children: [!hideRecurringIcon && (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ fontSize: "small" }, { children: "frequency" })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.eventInfoDetails.frequency.${event.recurring}.placeholder`, defaultMessage: `ui.eventInfoDetails.frequency.${event.recurring}.placeholder` }) }))] }))), beforePrivacyInfo, hasPrivacyInfo && ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.iconTextWrapper }, { children: [!hidePrivacyIcon && (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ fontSize: "small" }, { children: event.privacy === types_1.SCEventPrivacyType.PUBLIC ? 'public' : 'private' })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: privacy, defaultMessage: privacy }) })), "-", (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: location, defaultMessage: location }) }))] }))), beforeLocationInfo, hasLocationInfo && ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.iconTextWrapper }, { children: [!hideLocationIcon && ((0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ fontSize: "small" }, { children: event.location === types_1.SCEventLocationType.ONLINE ? 'play_circle_outline' : 'add_location_alt' }))), event.location === types_1.SCEventLocationType.ONLINE ? ((0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: event.link, target: "_blank", className: classes.link }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", className: classes.url }, { children: event.link })) }))) : ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", className: classes.url }, { children: event.geolocation })))] }))), beforeCreatedInfo, hasCreatedInfo && ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.creationWrapper }, { children: [!hideCreatedIcon && (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ fontSize: "small" }, { children: "create" })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventInfoDetails.date.create", defaultMessage: "ui.eventInfoDetails.date.create", values: {
+                                date: intl.formatDate(event.created_at, {
+                                    weekday: 'long',
+                                    day: 'numeric',
+                                    year: 'numeric',
+                                    month: 'long'
+                                })
+                            } }) }))] })))] })));
 }
 exports.default = EventInfoDetails;

package/lib/cjs/shared/ProgressBar/index.d.ts

@@ -15,6 +15,11 @@ export interface ProgressBarProps extends LinearProgressProps {
      * @default null
      */
     loadingMessage?: React.ReactNode;
+    /**
+     * Hides the bar, rendering just the massage and percentage
+     * @default false
+     */
+    hideBar?: boolean;
     /**
      * Any other properties
      */

package/lib/cjs/shared/ProgressBar/index.js

@@ -19,7 +19,7 @@ const Root = (0, styles_1.styled)(material_1.Box, {
     overridesResolver: (props, styles) => styles.root
 })(() => ({}));
 function ProgressBar(props) {
-    const { className, value, loadingMessage = null } = props, rest = tslib_1.__rest(props, ["className", "value", "loadingMessage"]);
-    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.message }, { children: loadingMessage })), (0, jsx_runtime_1.jsx)(LinearProgress_1.default, Object.assign({ variant: "determinate", color: "success", className: classes.bar, value: value }, rest)), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.progress }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", color: "text.secondary" }, { children: `${Math.round(value)}%` })) }))] })));
+    const { className, value, loadingMessage = null, hideBar = false } = props, rest = tslib_1.__rest(props, ["className", "value", "loadingMessage", "hideBar"]);
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.message }, { children: loadingMessage })), !hideBar && (0, jsx_runtime_1.jsx)(LinearProgress_1.default, Object.assign({ variant: "determinate", color: "success", className: classes.bar, value: value }, rest)), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.progress }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", color: "text.secondary" }, { children: `${Math.round(value)}%` })) }))] })));
 }
 exports.default = ProgressBar;

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

@@ -1,6 +1,6 @@
 import { SCEventType } from '@selfcommunity/types';
-import { EventSubscribeButtonProps } from '../EventSubscribeButton';
 import { EventActionsMenuProps } from '../../shared/EventActionsMenu';
+import { EventSubscribeButtonProps } from '../EventSubscribeButton';
 export interface EventHeaderProps {
     /**
      * Id of event object

package/lib/esm/components/EventHeader/EventHeader.js

@@ -1,29 +1,31 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useCallback, useEffect, useMemo, useRef } from 'react';
+import { Box, Chip, Icon, Paper, Typography, useMediaQuery, useTheme } from '@mui/material';
 import { styled } from '@mui/material/styles';
-import { Box, Icon, Paper, Typography, useMediaQuery, useTheme } from '@mui/material';
-import { SCEventLocationType, SCEventPrivacyType } from '@selfcommunity/types';
+import { useThemeProps } from '@mui/system';
 import { SCPreferences, useSCFetchEvent, useSCPreferences, useSCUser } from '@selfcommunity/react-core';
-import EventHeaderSkeleton from './Skeleton';
+import { SCEventLocationType, SCEventPrivacyType } from '@selfcommunity/types';
 import classNames from 'classnames';
-import { useThemeProps } from '@mui/system';
-import { PREFIX } from './constants';
+import PubSub from 'pubsub-js';
+import { useCallback, useEffect, useMemo, useRef } from 'react';
 import { FormattedMessage, useIntl } from 'react-intl';
-import Bullet from '../../shared/Bullet';
-import EventSubscribeButton from '../EventSubscribeButton';
-import EventInviteButton from '../EventInviteButton';
 import { SCGroupEventType, SCTopicType } from '../../constants/PubSub';
-import PubSub from 'pubsub-js';
-import EditEventButton from '../EditEventButton';
-import User from '../User';
+import Bullet from '../../shared/Bullet';
 import Calendar from '../../shared/Calendar';
 import EventActionsMenu from '../../shared/EventActionsMenu';
+import EditEventButton from '../EditEventButton';
+import EventInviteButton from '../EventInviteButton';
+import EventSubscribeButton from '../EventSubscribeButton';
+import User from '../User';
+import { PREFIX } from './constants';
+import EventHeaderSkeleton from './Skeleton';
 const classes = {
     root: `${PREFIX}-root`,
     cover: `${PREFIX}-cover`,
     time: `${PREFIX}-time`,
     calendar: `${PREFIX}-calendar`,
+    inProgress: `${PREFIX}-in-progress`,
+    chip: `${PREFIX}-chip`,
     info: `${PREFIX}-info`,
     name: `${PREFIX}-name`,
     visibility: `${PREFIX}-visibility`,
@@ -34,7 +36,7 @@ const classes = {
 const Root = styled(Box, {
     name: PREFIX,
     slot: 'Root',
-    shouldForwardProp: (prop) => prop !== 'isEventAdmin'
+    shouldForwardProp: (prop) => prop !== 'isEventAdmin' && prop !== 'isEventFinished'
 })(() => ({}));
 /**
  * > API documentation for the Community-JS Event Header component. Learn about the available props and the CSS API.
@@ -83,14 +85,20 @@ export default function EventHeader(inProps) {
     const scUserContext = useSCUser();
     // HOOKS
     const { scEvent, setSCEvent } = useSCFetchEvent({ id: eventId, event });
+    const theme = useTheme();
+    const isMobile = useMediaQuery(theme.breakpoints.down('md'));
     // INTL
     const intl = useIntl();
     // REFS
     const updatesSubscription = useRef(null);
     // CONST
     const isEventAdmin = useMemo(() => { var _a; return scUserContext.user && ((_a = scEvent === null || scEvent === void 0 ? void 0 : scEvent.managed_by) === null || _a === void 0 ? void 0 : _a.id) === scUserContext.user.id; }, [scUserContext.user, (_a = scEvent === null || scEvent === void 0 ? void 0 : scEvent.managed_by) === null || _a === void 0 ? void 0 : _a.id]);
-    const theme = useTheme();
-    const isMobile = useMediaQuery(theme.breakpoints.down('md'));
+    const isEventFinished = useMemo(() => {
+        if (scEvent && !scEvent.running) {
+            return new Date().getTime() > new Date(scEvent.end_date || scEvent.start_date).getTime();
+        }
+        return false;
+    }, [scEvent]);
     /**
      * Subscriber for pubsub callback
      */
@@ -134,7 +142,7 @@ export default function EventHeader(inProps) {
     return (
     // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
     // @ts-ignore
-    _jsxs(Root, Object.assign({ id: id, className: classNames(classes.root, className), isEventAdmin: isEventAdmin }, rest, { children: [_jsx(Paper, Object.assign({ style: _backgroundCover, classes: { root: classes.cover } }, { children: _jsx(Box, Object.assign({ className: classes.calendar }, { children: _jsx(Calendar, { day: new Date(scEvent.start_date).getDate() }) })) })), _jsxs(Box, Object.assign({ className: classes.info }, { children: [_jsx(Typography, Object.assign({ className: classes.time }, { children: scEvent.end_date && scEvent.end_date !== scEvent.start_date ? (new Date(scEvent.start_date).getDate() !== new Date(scEvent.end_date).getDate() ? (_jsx(FormattedMessage, { id: "ui.eventHeader.startEndTimeDiff", defaultMessage: "ui.eventHeader.startEndTimeDiff", values: {
+    _jsxs(Root, Object.assign({ id: id, className: classNames(classes.root, className), isEventAdmin: isEventAdmin, isEventFinished: isEventFinished }, rest, { children: [_jsx(Paper, Object.assign({ style: _backgroundCover, classes: { root: classes.cover } }, { children: _jsx(Box, Object.assign({ className: classes.calendar }, { children: _jsx(Calendar, { day: new Date(scEvent.start_date).getDate() }) })) })), _jsxs(Box, Object.assign({ className: classes.info }, { children: [scEvent.running && (_jsx(Typography, Object.assign({ variant: "body1", className: classes.inProgress }, { children: _jsx(FormattedMessage, { id: "ui.eventHeader.inProgress", defaultMessage: "ui.eventHeader.inProgress" }) }))), isEventFinished && (_jsx(Chip, { icon: _jsx(Icon, Object.assign({ fontSize: "small" }, { children: "calendar_off" })), label: _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.eventHeader.finished", defaultMessage: "ui.eventHeader.finished" }) })), variant: "outlined", size: "small", className: classes.chip })), _jsx(Typography, Object.assign({ className: classes.time }, { children: scEvent.end_date && scEvent.end_date !== scEvent.start_date ? (new Date(scEvent.start_date).getDate() !== new Date(scEvent.end_date).getDate() ? (_jsx(FormattedMessage, { id: "ui.eventHeader.startEndTimeDiff", defaultMessage: "ui.eventHeader.startEndTimeDiff", values: {
                                 startDate: intl.formatDate(scEvent.start_date, {
                                     weekday: 'long',
                                     day: 'numeric',

package/lib/esm/components/EventInfoWidget/EventInfoWidget.js

@@ -66,5 +66,5 @@ export default function EventInfoWidget(inProps) {
         return _jsx(HiddenPlaceholder, {});
     }
     const description = expanded ? scEvent.description : getTruncatedText(scEvent.description, 220);
-    return (_jsx(Root, Object.assign({ className: classes.root }, rest, { children: _jsxs(CardContent, Object.assign({ className: classes.content }, { children: [_jsxs(Stack, Object.assign({ className: classes.titleWrapper }, { children: [_jsx(Icon, Object.assign({ fontSize: "small" }, { children: "info" })), _jsx(Typography, Object.assign({ variant: "h5" }, { children: _jsx(FormattedMessage, { id: "ui.infoEventWidget.title", defaultMessage: "ui.infoEventWidget.title" }) }))] })), _jsx(Box, Object.assign({ className: classes.textWrapper }, { children: _jsxs(Typography, Object.assign({ component: "span", variant: "body1" }, { children: [description, showButton && !expanded && (_jsx(Button, Object.assign({ size: "small", variant: "text", className: classes.showMore, onClick: handleToggleSummary }, { children: _jsx(FormattedMessage, { id: "ui.infoEventWidget.showMore", defaultMessage: "ui.infoEventWidget.showMore" }) })))] })) })), _jsx(EventInfoDetails, { event: scEvent, hasCreatedInfo: true })] })) })));
+    return (_jsx(Root, Object.assign({ className: classes.root }, rest, { children: _jsxs(CardContent, Object.assign({ className: classes.content }, { children: [_jsxs(Stack, Object.assign({ className: classes.titleWrapper }, { children: [_jsx(Icon, Object.assign({ fontSize: "small" }, { children: "info" })), _jsx(Typography, Object.assign({ variant: "h5" }, { children: _jsx(FormattedMessage, { id: "ui.infoEventWidget.title", defaultMessage: "ui.infoEventWidget.title" }) }))] })), _jsx(Box, Object.assign({ className: classes.textWrapper }, { children: _jsxs(Typography, Object.assign({ component: "span", variant: "body1" }, { children: [description, showButton && !expanded && (_jsx(Button, Object.assign({ size: "small", variant: "text", className: classes.showMore, onClick: handleToggleSummary }, { children: _jsx(FormattedMessage, { id: "ui.infoEventWidget.showMore", defaultMessage: "ui.infoEventWidget.showMore" }) })))] })) })), _jsx(EventInfoDetails, { event: scEvent, hasRecurringInfo: true, hasCreatedInfo: true })] })) })));
 }

package/lib/esm/components/EventInviteButton/EventInviteButton.js

@@ -244,7 +244,7 @@ export default function EventInviteButton(inProps) {
     /**
      * Renders root object
      */
-    return (_jsxs(React.Fragment, { children: [_jsx(Root, Object.assign({ className: classNames(classes.root, className), onClick: handleClose, variant: scEvent ? 'contained' : 'outlined', color: scEvent ? 'secondary' : 'inherit', startIcon: _jsx(Icon, { children: "add" }) }, rest, { children: _jsx(FormattedMessage, { id: "ui.eventInviteButton", defaultMessage: "ui.eventInviteButton" }) })), open && (_jsx(DialogRoot, Object.assign({ DialogContentProps: { dividers: false }, open: true, className: classes.dialogRoot, title: _jsxs(_Fragment, { children: [_jsx(IconButton, Object.assign({ onClick: handleClose }, { children: _jsx(Icon, { children: "arrow_back" }) })), _jsx(Typography, Object.assign({ className: classes.dialogTitle }, { children: _jsx(FormattedMessage, { id: "ui.eventInviteButton.dialog.title", defaultMessage: "ui.eventInviteButton.dialog.title" }) })), _jsx(LoadingButton, Object.assign({ size: "small", color: "secondary", variant: "contained", onClick: handleSendInvitations, loading: isSending, disabled: !invited.length }, { children: _jsx(FormattedMessage, { id: "ui.eventInviteButton.dialog.button.end", defaultMessage: "ui.eventInviteButton.dialog.button.end" }) }))] }) }, { children: _jsxs(Box, Object.assign({ className: classes.dialogContent }, { children: [_jsx(Autocomplete, { className: classes.autocomplete, loading: loading, size: "small", multiple: true, freeSolo: true, disableClearable: true, options: suggested, onChange: handleChange, onInputChange: handleInputChange, inputValue: value, filterOptions: filterOptions, value: invited, getOptionLabel: (option) => (option ? option.username : '...'), isOptionEqualToValue: (option, value) => (option ? value.id === option.id : false), renderTags: () => null, renderOption: (props, option) => (_jsxs(Box, Object.assign({ component: "li" }, props, { children: [_jsx(Avatar, { alt: option.username, src: option.avatar }), _jsx(Typography, Object.assign({ ml: 1 }, { children: option.username }))] }))), renderInput: (params) => (_jsx(TextField, Object.assign({}, params, { variant: "outlined", placeholder: `${intl.formatMessage(messages.placeholder)}`, InputProps: Object.assign(Object.assign({}, params.InputProps), { className: classes.input, startAdornment: (_jsxs(_Fragment, { children: [_jsx(InputAdornment, Object.assign({ position: "start" }, { children: _jsx(Icon, Object.assign({ className: classes.icon }, { children: "search" })) })), params.InputProps.startAdornment] })) }) }))) }), _jsx(Box, Object.assign({ className: classes.invitedBox }, { children: invited.map((option, index) => (_jsx(Chip, { avatar: _jsx(Avatar, { alt: option.username, src: option.avatar }), label: option.username, onDelete: () => {
+    return (_jsxs(React.Fragment, { children: [_jsx(Root, Object.assign({ className: classNames(classes.root, className), onClick: handleClose, variant: scEvent ? 'contained' : 'outlined', color: scEvent ? 'secondary' : 'inherit', startIcon: _jsx(Icon, { children: "add" }) }, rest, { children: _jsx(FormattedMessage, { id: "ui.eventInviteButton", defaultMessage: "ui.eventInviteButton" }) })), open && (_jsx(DialogRoot, Object.assign({ DialogContentProps: { dividers: false }, open: true, className: classes.dialogRoot, title: _jsxs(_Fragment, { children: [_jsx(IconButton, Object.assign({ onClick: handleClose }, { children: _jsx(Icon, { children: "close" }) })), _jsx(Typography, Object.assign({ className: classes.dialogTitle }, { children: _jsx(FormattedMessage, { id: "ui.eventInviteButton.dialog.title", defaultMessage: "ui.eventInviteButton.dialog.title" }) })), _jsx(LoadingButton, Object.assign({ size: "small", color: "secondary", variant: "contained", onClick: handleSendInvitations, loading: isSending, disabled: !invited.length }, { children: _jsx(FormattedMessage, { id: "ui.eventInviteButton.dialog.button.end", defaultMessage: "ui.eventInviteButton.dialog.button.end" }) }))] }) }, { children: _jsxs(Box, Object.assign({ className: classes.dialogContent }, { children: [_jsx(Autocomplete, { className: classes.autocomplete, loading: loading, size: "small", multiple: true, freeSolo: true, disableClearable: true, options: suggested, onChange: handleChange, onInputChange: handleInputChange, inputValue: value, filterOptions: filterOptions, value: invited, getOptionLabel: (option) => (option ? option.username : '...'), isOptionEqualToValue: (option, value) => (option ? value.id === option.id : false), renderTags: () => null, renderOption: (props, option) => (_jsxs(Box, Object.assign({ component: "li" }, props, { children: [_jsx(Avatar, { alt: option.username, src: option.avatar }), _jsx(Typography, Object.assign({ ml: 1 }, { children: option.username }))] }))), renderInput: (params) => (_jsx(TextField, Object.assign({}, params, { variant: "outlined", placeholder: `${intl.formatMessage(messages.placeholder)}`, InputProps: Object.assign(Object.assign({}, params.InputProps), { className: classes.input, startAdornment: (_jsxs(_Fragment, { children: [_jsx(InputAdornment, Object.assign({ position: "start" }, { children: _jsx(Icon, Object.assign({ className: classes.icon }, { children: "search" })) })), params.InputProps.startAdornment] })) }) }))) }), _jsx(Box, Object.assign({ className: classes.invitedBox }, { children: invited.map((option, index) => (_jsx(Chip, { avatar: _jsx(Avatar, { alt: option.username, src: option.avatar }), label: option.username, onDelete: () => {
                                     handleDelete(option);
                                 }, style: { marginRight: 8 } }, index))) })), _jsxs(Box, Object.assign({ className: classes.suggested }, { children: [list.length !== 0 && (_jsx(Typography, Object.assign({ variant: "h4", fontWeight: "bold" }, { children: _jsx(FormattedMessage, { id: "ui.eventInviteButton.dialog.content.list", defaultMessage: "ui.eventInviteButton.dialog.content.list" }) }))), list.slice(0, 5).map((user, index) => (_jsx(User, { elevation: 0, actions: _jsx(_Fragment, {}), user: user, userId: user.id, buttonProps: { onClick: () => handleUserInvite(user) } }, index)))] }))] })) })))] }));
 }

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

@@ -16,7 +16,6 @@ import App from './Steps/App';
 import HiddenPlaceholder from '../../shared/HiddenPlaceholder';
 import Widget from '../Widget';
 import Content from './Steps/Content';
-import Header from '../../assets/onBoarding/Header';
 import { SCOPE_SC_UI } from '../../constants/Errors';
 import { OnBoardingService, PreferenceService } from '@selfcommunity/api-services';
 import { Logger } from '@selfcommunity/utils';
@@ -215,7 +214,7 @@ const OnBoardingWidget = (inProps) => {
     if (!isAdmin) {
         return _jsx(HiddenPlaceholder, {});
     }
-    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: _jsxs(AccordionRoot, Object.assign({ defaultExpanded: true, onChange: handleExpand, className: classes.accordionRoot, expanded: expanded }, { children: [_jsx(AccordionSummary, Object.assign({ expandIcon: _jsx(Icon, Object.assign({ fontSize: "medium" }, { children: "expand_more" })), "aria-controls": "accordion", id: "onBoarding-accordion" }, { children: _jsx(_Fragment, { children: expanded ? (_jsxs(_Fragment, { children: [!isMobile ? (_jsx(CardMedia, Object.assign({ className: classes.logo, component: "div" }, { children: _jsx(Header, {}) }))) : (_jsx(Typography, Object.assign({ variant: "h4", textAlign: "center" }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.accordion.expanded.title.mobile", defaultMessage: "ui.onBoardingWidget.accordion.expanded.title.mobile", values: {
+    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: _jsxs(AccordionRoot, Object.assign({ defaultExpanded: true, onChange: handleExpand, className: classes.accordionRoot, expanded: expanded }, { children: [_jsx(AccordionSummary, Object.assign({ expandIcon: _jsx(Icon, Object.assign({ fontSize: "medium" }, { children: "expand_more" })), "aria-controls": "accordion", id: "onBoarding-accordion" }, { children: _jsx(_Fragment, { children: expanded ? (_jsxs(_Fragment, { children: [!isMobile ? (_jsx(CardMedia, { className: classes.logo, component: "img", src: "/onBoarding/header.svg" })) : (_jsx(Typography, Object.assign({ variant: "h4", textAlign: "center" }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.accordion.expanded.title.mobile", defaultMessage: "ui.onBoardingWidget.accordion.expanded.title.mobile", values: {
                                             // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
                                             // @ts-ignore
                                             b: (chunks) => _jsx("strong", { children: chunks }),