@selfcommunity/react-ui 0.7.50-events.86 → 0.7.50-events.88

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';
@@ -24,6 +23,7 @@ import { SCOnBoardingStepStatusType, SCOnBoardingStepType } from '@selfcommunity
 import OnBoardingWidgetSkeleton from './Skeleton';
 import { closeSnackbar, useSnackbar } from 'notistack';
 import { CONSOLE_PROD, CONSOLE_STAGE } from '../PlatformWidget/constants';
+import HeaderPlaceholder from '../../assets/onBoarding/header';
 const classes = {
     root: `${PREFIX}-root`,
     content: `${PREFIX}-content`,
@@ -215,7 +215,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: HeaderPlaceholder })) : (_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 }),

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

@@ -7,9 +7,9 @@ import classNames from 'classnames';
 import { PREFIX } from '../../constants';
 import { Button, CardMedia, Icon, Tab, Tabs, Typography } from '@mui/material';
 import { FormattedMessage } from 'react-intl';
-import Ios from '../../../../assets/onBoarding/Ios';
-import Android from '../../../../assets/onBoarding/Android';
 import { SCOnBoardingStepStatusType } from '@selfcommunity/types';
+import AndroidPlaceholder from '../../../../assets/onBoarding/android';
+import IosPlaceholder from '../../../../assets/onBoarding/ios';
 const classes = {
     root: `${PREFIX}-app-root`,
     title: `${PREFIX}-app-title`,
@@ -53,7 +53,7 @@ export default function App(inProps) {
                                         // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
                                         // @ts-ignore
                                         b: (...chunks) => _jsx("strong", { children: chunks })
-                                    } }) })), _jsx(CardMedia, Object.assign({ className: classes.image, component: "div" }, { children: _jsx(Ios, {}) }))] })), tab === 1 && (_jsxs(_Fragment, { children: [_jsx(Typography, Object.assign({ className: classes.summary }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.app.android", defaultMessage: "ui.onBoardingWidget.step.app.android" }) })), _jsx(Typography, Object.assign({ className: classes.step }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.app.android.a", defaultMessage: "ui.onBoardingWidget.step.app.android.a", values: {
+                                    } }) })), _jsx(CardMedia, { className: classes.image, component: "img", src: IosPlaceholder })] })), tab === 1 && (_jsxs(_Fragment, { children: [_jsx(Typography, Object.assign({ className: classes.summary }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.app.android", defaultMessage: "ui.onBoardingWidget.step.app.android" }) })), _jsx(Typography, Object.assign({ className: classes.step }, { children: _jsx(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) => _jsx(Icon, Object.assign({ fontSize: "medium" }, { children: chunks })),
@@ -67,5 +67,5 @@ export default function App(inProps) {
                                         // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
                                         // @ts-ignore
                                         b: (...chunks) => _jsx("strong", { children: chunks })
-                                    } }) })), _jsx(CardMedia, Object.assign({ className: classes.image, component: "div" }, { children: _jsx(Android, {}) }))] })), _jsx(Button, Object.assign({ className: classes.button, size: "small", variant: "outlined", color: "secondary", onClick: onCompleteAction, disabled: (step === null || step === void 0 ? void 0 : step.status) === SCOnBoardingStepStatusType.COMPLETED || (step === null || step === void 0 ? void 0 : step.status) === SCOnBoardingStepStatusType.IN_PROGRESS }, { children: "Ok!" }))] }))] })));
+                                    } }) })), _jsx(CardMedia, { className: classes.image, component: "img", src: AndroidPlaceholder })] })), _jsx(Button, Object.assign({ className: classes.button, size: "small", variant: "outlined", color: "secondary", onClick: onCompleteAction, disabled: (step === null || step === void 0 ? void 0 : step.status) === SCOnBoardingStepStatusType.COMPLETED || (step === null || step === void 0 ? void 0 : step.status) === SCOnBoardingStepStatusType.IN_PROGRESS }, { children: "Ok!" }))] }))] })));
 }

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

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { styled } from '@mui/material/styles';
 import { Alert, Button, CardMedia, Icon, Typography } from '@mui/material';
 import Box from '@mui/material/Box';
@@ -7,10 +7,12 @@ import classNames from 'classnames';
 import { useEffect, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { PREFIX } from '../../constants';
-import CategoryA from '../../../../assets/onBoarding/CategoryA';
-import CategoryB from '../../../../assets/onBoarding/CategoryB';
 import ProgressBar from '../../../../shared/ProgressBar';
 import { SCOnBoardingStepStatusType } from '@selfcommunity/types';
+import { Player } from '@lottiefiles/react-lottie-player';
+import CategoryAPlaceholder from '../../../../assets/onBoarding/categoryA';
+import CategoryBPlaceholder from '../../../../assets/onBoarding/categoryB';
+import animatedProgress from '../../../../assets/onBoarding/progress/category_progress.json';
 const classes = {
     root: `${PREFIX}-category-root`,
     title: `${PREFIX}-category-title`,
@@ -18,7 +20,9 @@ const classes = {
     image: `${PREFIX}-category-image`,
     action: `${PREFIX}-category-action`,
     button: `${PREFIX}-category-button`,
-    success: `${PREFIX}-success`
+    success: `${PREFIX}-success`,
+    progress: `${PREFIX}-category-progress`,
+    animationProgress: `${PREFIX}-category-animation-progress`
 };
 function CircledLetter({ letter, statement }) {
     return (_jsxs(Box, Object.assign({ component: "span", sx: { display: 'flex', alignItems: 'center', gap: 1, mb: 1.5 } }, { children: [_jsx(Box, Object.assign({ component: "span", sx: {
@@ -65,15 +69,15 @@ export default function Category(inProps) {
             return () => clearInterval(intervalId);
         }
     }, [step.status, step.completion_percentage]);
-    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, { children: [_jsx(Typography, Object.assign({ variant: "h4", className: classes.title }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.categories", defaultMessage: "ui.onBoardingWidget.categories" }) })), _jsx(Typography, Object.assign({ className: classes.summary }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.category.summary", defaultMessage: "ui.onBoardingWidget.step.category.summary" }) })), _jsx(Typography, { children: _jsx(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) => _jsx(CircledLetter, { letter: "a", statement: chunks }),
-                        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                        // @ts-ignore
-                        iconB: (...chunks) => _jsx(CircledLetter, { letter: "b", statement: chunks }),
-                        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                        // @ts-ignore
-                        iconC: (...chunks) => _jsx(CircledLetter, { letter: "c", statement: chunks })
-                    } }) }), _jsx(CardMedia, Object.assign({ className: classes.image, component: "div" }, { children: _jsx(CategoryA, {}) })), _jsx(CardMedia, Object.assign({ className: classes.image, component: "div" }, { children: _jsx(CategoryB, {}) })), _jsx(Box, Object.assign({ component: "span", className: classes.action }, { children: (step === null || step === void 0 ? void 0 : step.status) === SCOnBoardingStepStatusType.COMPLETED ? (_jsx(Alert, Object.assign({ severity: "success" }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.categories.success", defaultMessage: "ui.onBoardingWidget.step.categories.success" }) }))) : (step === null || step === void 0 ? void 0 : step.status) === SCOnBoardingStepStatusType.IN_PROGRESS ? (_jsx(ProgressBar, { value: progress, loadingMessage: _jsx(Typography, Object.assign({ variant: "h4" }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.categories.loading", defaultMessage: "ui.onBoardingWidget.step.categories.loading" }) })) })) : (_jsx(Button, Object.assign({ size: "small", variant: "contained", color: "secondary", onClick: handleCategoriesCreation, endIcon: _jsx(Icon, { children: hover ? 'ai_stars' : 'magic_wand' }), onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false) }, { children: _jsx(FormattedMessage, { defaultMessage: "ui.onBoardingWidget.step.category.button", id: "ui.onBoardingWidget.step.category.button" }) }))) }))] })));
+    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, { children: [_jsx(Typography, Object.assign({ variant: "h4", className: classes.title }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.categories", defaultMessage: "ui.onBoardingWidget.categories" }) })), _jsx(Typography, Object.assign({ className: classes.summary }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.category.summary", defaultMessage: "ui.onBoardingWidget.step.category.summary" }) })), (step === null || step === void 0 ? void 0 : step.status) !== SCOnBoardingStepStatusType.IN_PROGRESS && (_jsxs(_Fragment, { children: [_jsx(Typography, { children: _jsx(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) => _jsx(CircledLetter, { letter: "a", statement: chunks }),
+                                // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                                // @ts-ignore
+                                iconB: (...chunks) => _jsx(CircledLetter, { letter: "b", statement: chunks }),
+                                // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                                // @ts-ignore
+                                iconC: (...chunks) => _jsx(CircledLetter, { letter: "c", statement: chunks })
+                            } }) }), _jsx(CardMedia, { className: classes.image, component: "img", src: CategoryAPlaceholder }), _jsx(CardMedia, { className: classes.image, component: "img", src: CategoryBPlaceholder })] })), _jsx(Box, Object.assign({ component: "span", className: classes.action }, { children: (step === null || step === void 0 ? void 0 : step.status) === SCOnBoardingStepStatusType.COMPLETED ? (_jsx(Alert, Object.assign({ severity: "success" }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.categories.success", defaultMessage: "ui.onBoardingWidget.step.categories.success" }) }))) : (step === null || step === void 0 ? void 0 : step.status) === SCOnBoardingStepStatusType.IN_PROGRESS ? (_jsxs(Box, Object.assign({ className: classes.progress }, { children: [_jsx(Player, { autoplay: true, loop: true, src: animatedProgress, className: classes.animationProgress, controls: false }), _jsx(ProgressBar, { value: progress, hideBar: true, loadingMessage: _jsx(Typography, Object.assign({ variant: "h4" }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.categories.loading", defaultMessage: "ui.onBoardingWidget.step.categories.loading" }) })) })] }))) : (_jsx(Button, Object.assign({ size: "small", variant: "contained", color: "secondary", onClick: handleCategoriesCreation, endIcon: _jsx(Icon, { children: hover ? 'ai_stars' : 'magic_wand' }), onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false) }, { children: _jsx(FormattedMessage, { defaultMessage: "ui.onBoardingWidget.step.category.button", id: "ui.onBoardingWidget.step.category.button" }) }))) }))] })));
 }

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

@@ -9,11 +9,15 @@ import { PREFIX } from '../../constants';
 import { FormattedMessage } from 'react-intl';
 import { SCOnBoardingStepStatusType } from '@selfcommunity/types';
 import ProgressBar from '../../../../shared/ProgressBar';
+import { Player } from '@lottiefiles/react-lottie-player';
+import animatedProgress from '../../../../assets/onBoarding/progress/content_progress.json';
 const classes = {
     root: `${PREFIX}-content-root`,
     title: `${PREFIX}-content-title`,
     summary: `${PREFIX}-content-summary`,
-    action: `${PREFIX}-content-action`
+    action: `${PREFIX}-content-action`,
+    progress: `${PREFIX}-content-progress`,
+    animationProgress: `${PREFIX}-content-animation-progress`
 };
 const Root = styled(Box, {
     name: PREFIX,
@@ -45,5 +49,5 @@ export default function Content(inProps) {
             return () => clearInterval(intervalId);
         }
     }, [step.status, step.completion_percentage]);
-    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, { children: [_jsx(Typography, Object.assign({ variant: "h4", className: classes.title }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.contents", defaultMessage: "ui.onBoardingWidget.contents" }) })), _jsx(Typography, Object.assign({ className: classes.summary }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.content.summary", defaultMessage: "ui.onBoardingWidget.step.content.summary" }) })), _jsx(Box, Object.assign({ component: "span", className: classes.action }, { children: (step === null || step === void 0 ? void 0 : step.status) === SCOnBoardingStepStatusType.COMPLETED ? (_jsx(Alert, Object.assign({ severity: "success" }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.contents.success", defaultMessage: "ui.onBoardingWidget.step.contents.success" }) }))) : (step === null || step === void 0 ? void 0 : step.status) === SCOnBoardingStepStatusType.IN_PROGRESS ? (_jsx(ProgressBar, { value: progress, loadingMessage: _jsx(Typography, Object.assign({ variant: "h4" }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.contents.loading", defaultMessage: "ui.onBoardingWidget.step.contents.loading" }) })) })) : (_jsx(Button, Object.assign({ size: "small", variant: "contained", color: "secondary", onClick: handleContentCreation, endIcon: _jsx(Icon, { children: hover ? 'ai_stars' : 'magic_wand' }), onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false) }, { children: _jsx(FormattedMessage, { defaultMessage: "ui.onBoardingWidget.step.content.button", id: "ui.onBoardingWidget.step.content.button" }) }))) }))] })));
+    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, { children: [_jsx(Typography, Object.assign({ variant: "h4", className: classes.title }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.contents", defaultMessage: "ui.onBoardingWidget.contents" }) })), _jsx(Typography, Object.assign({ className: classes.summary }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.content.summary", defaultMessage: "ui.onBoardingWidget.step.content.summary" }) })), _jsx(Box, Object.assign({ component: "span", className: classes.action }, { children: (step === null || step === void 0 ? void 0 : step.status) === SCOnBoardingStepStatusType.COMPLETED ? (_jsx(Alert, Object.assign({ severity: "success" }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.contents.success", defaultMessage: "ui.onBoardingWidget.step.contents.success" }) }))) : (step === null || step === void 0 ? void 0 : step.status) === SCOnBoardingStepStatusType.IN_PROGRESS ? (_jsxs(Box, Object.assign({ className: classes.progress }, { children: [_jsx(Player, { autoplay: true, loop: true, src: animatedProgress, className: classes.animationProgress, controls: false }), _jsx(ProgressBar, { value: progress, hideBar: true, loadingMessage: _jsx(Typography, Object.assign({ variant: "h4" }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.contents.loading", defaultMessage: "ui.onBoardingWidget.step.contents.loading" }) })) })] }))) : (_jsx(Button, Object.assign({ size: "small", variant: "contained", color: "secondary", onClick: handleContentCreation, endIcon: _jsx(Icon, { children: hover ? 'ai_stars' : 'magic_wand' }), onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false) }, { children: _jsx(FormattedMessage, { defaultMessage: "ui.onBoardingWidget.step.content.button", id: "ui.onBoardingWidget.step.content.button" }) }))) }))] })));
 }

package/lib/esm/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/esm/constants/Event.js

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

package/lib/esm/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/esm/shared/EventInfoDetails/index.js

@@ -1,14 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Icon, Stack, styled, Typography, useThemeProps } from '@mui/material';
 import { Link } from '@selfcommunity/react-core';
-import { SCEventLocationType, SCEventPrivacyType } from '@selfcommunity/types';
-import { format } from 'date-fns';
-import { enUS, it } from 'date-fns/locale';
+import { SCEventLocationType, SCEventPrivacyType, SCEventRecurrenceType } from '@selfcommunity/types';
 import { FormattedMessage, useIntl } from 'react-intl';
-const LOCALE_MAP = {
-    en: enUS,
-    it
-};
 const PREFIX = 'SCEventInfoDetails';
 const classes = {
     root: `${PREFIX}-root`,
@@ -28,20 +22,25 @@ export default 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 = useIntl();
     const privacy = event.privacy === SCEventPrivacyType.PUBLIC ? 'ui.eventInfoDetails.privacy.public' : 'ui.eventInfoDetails.privacy.private';
     const location = event.location === SCEventLocationType.ONLINE ? 'ui.eventInfoDetails.location.virtual' : 'ui.eventInfoDetails.location.inPerson';
-    const formatDateEventDate = (date) => {
-        return 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 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 (_jsxs(Root, Object.assign({ className: classes.root }, { children: [beforeDateInfo, hasDateInfo && (_jsxs(Stack, Object.assign({ className: classes.iconTextWrapper }, { children: [!hideDateIcon && _jsx(Icon, Object.assign({ fontSize: "small" }, { children: "CalendarIcon" })), _jsx(Typography, Object.assign({ variant: "body1" }, { children: formatDateEventDate(event.start_date) }))] }))), beforePrivacyInfo, hasPrivacyInfo && (_jsxs(Stack, Object.assign({ className: classes.iconTextWrapper }, { children: [!hidePrivacyIcon && _jsx(Icon, Object.assign({ fontSize: "small" }, { children: event.privacy === SCEventPrivacyType.PUBLIC ? 'public' : 'private' })), _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: privacy, defaultMessage: privacy }) })), "-", _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: location, defaultMessage: location }) }))] }))), beforeLocationInfo, hasLocationInfo && (_jsxs(Stack, Object.assign({ className: classes.iconTextWrapper }, { children: [!hideLocationIcon && (_jsx(Icon, Object.assign({ fontSize: "small" }, { children: event.location === SCEventLocationType.ONLINE ? 'play_circle_outline' : 'add_location_alt' }))), event.location === SCEventLocationType.ONLINE ? (_jsx(Link, Object.assign({ to: event.link, target: "_blank", className: classes.link }, { children: _jsx(Typography, Object.assign({ variant: "body1", className: classes.url }, { children: event.link })) }))) : (_jsx(Typography, Object.assign({ variant: "body1", className: classes.url }, { children: event.geolocation })))] }))), beforeCreatedInfo, hasCreatedInfo && (_jsxs(Stack, Object.assign({ className: classes.creationWrapper }, { children: [!hideCreatedIcon && _jsx(Icon, Object.assign({ fontSize: "small" }, { children: "create" })), _jsx(Typography, Object.assign({ variant: "body1" }, { children: formatDateCreateDate(event.created_at) }))] })))] })));
+    return (_jsxs(Root, Object.assign({ className: classes.root }, { children: [beforeDateInfo, hasDateInfo && (_jsxs(Stack, Object.assign({ className: classes.iconTextWrapper }, { children: [!hideDateIcon && _jsx(Icon, Object.assign({ fontSize: "small" }, { children: "CalendarIcon" })), _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(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 !== SCEventRecurrenceType.NEVER && (_jsxs(Stack, Object.assign({ className: classes.iconTextWrapper }, { children: [!hideRecurringIcon && _jsx(Icon, Object.assign({ fontSize: "small" }, { children: "frequency" })), _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: `ui.eventInfoDetails.frequency.${event.recurring}.placeholder`, defaultMessage: `ui.eventInfoDetails.frequency.${event.recurring}.placeholder` }) }))] }))), beforePrivacyInfo, hasPrivacyInfo && (_jsxs(Stack, Object.assign({ className: classes.iconTextWrapper }, { children: [!hidePrivacyIcon && _jsx(Icon, Object.assign({ fontSize: "small" }, { children: event.privacy === SCEventPrivacyType.PUBLIC ? 'public' : 'private' })), _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: privacy, defaultMessage: privacy }) })), "-", _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: location, defaultMessage: location }) }))] }))), beforeLocationInfo, hasLocationInfo && (_jsxs(Stack, Object.assign({ className: classes.iconTextWrapper }, { children: [!hideLocationIcon && (_jsx(Icon, Object.assign({ fontSize: "small" }, { children: event.location === SCEventLocationType.ONLINE ? 'play_circle_outline' : 'add_location_alt' }))), event.location === SCEventLocationType.ONLINE ? (_jsx(Link, Object.assign({ to: event.link, target: "_blank", className: classes.link }, { children: _jsx(Typography, Object.assign({ variant: "body1", className: classes.url }, { children: event.link })) }))) : (_jsx(Typography, Object.assign({ variant: "body1", className: classes.url }, { children: event.geolocation })))] }))), beforeCreatedInfo, hasCreatedInfo && (_jsxs(Stack, Object.assign({ className: classes.creationWrapper }, { children: [!hideCreatedIcon && _jsx(Icon, Object.assign({ fontSize: "small" }, { children: "create" })), _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(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'
+                                })
+                            } }) }))] })))] })));
 }

package/lib/esm/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/esm/shared/ProgressBar/index.js

@@ -17,6 +17,6 @@ const Root = styled(Box, {
     overridesResolver: (props, styles) => styles.root
 })(() => ({}));
 export default function ProgressBar(props) {
-    const { className, value, loadingMessage = null } = props, rest = __rest(props, ["className", "value", "loadingMessage"]);
-    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, { children: [_jsx(Box, Object.assign({ className: classes.message }, { children: loadingMessage })), _jsx(LinearProgress, Object.assign({ variant: "determinate", color: "success", className: classes.bar, value: value }, rest)), _jsx(Box, Object.assign({ className: classes.progress }, { children: _jsx(Typography, Object.assign({ variant: "body2", color: "text.secondary" }, { children: `${Math.round(value)}%` })) }))] })));
+    const { className, value, loadingMessage = null, hideBar = false } = props, rest = __rest(props, ["className", "value", "loadingMessage", "hideBar"]);
+    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, { children: [_jsx(Box, Object.assign({ className: classes.message }, { children: loadingMessage })), !hideBar && _jsx(LinearProgress, Object.assign({ variant: "determinate", color: "success", className: classes.bar, value: value }, rest)), _jsx(Box, Object.assign({ className: classes.progress }, { children: _jsx(Typography, Object.assign({ variant: "body2", color: "text.secondary" }, { children: `${Math.round(value)}%` })) }))] })));
 }