@selfcommunity/react-ui 0.7.50-events.106 → 0.7.50-events.108

package/lib/esm/components/Events/Events.js

@@ -1,6 +1,6 @@
 import { __rest } from "tslib";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Box, Button, Chip, FormControl, Grid, Icon, IconButton, InputLabel, MenuItem, Radio, Select, TextField, Typography } from '@mui/material';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Button, Chip, FormControl, Grid, Icon, IconButton, InputAdornment, InputLabel, MenuItem, Radio, Select, TextField, Typography, useMediaQuery, useTheme } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import { useThemeProps } from '@mui/system';
 import { Endpoints, http } from '@selfcommunity/api-services';
@@ -24,7 +24,8 @@ const classes = {
     item: `${PREFIX}-item`,
     itemSkeleton: `${PREFIX}-item-skeleton`,
     noResults: `${PREFIX}-no-results`,
-    showMore: `${PREFIX}-show-more`
+    showMore: `${PREFIX}-show-more`,
+    search: `${PREFIX}-search`
 };
 const options = [
     { value: SCEventDateFilterType.ANY, label: _jsx(FormattedMessage, { id: "ui.events.select.any", defaultMessage: "ui.events.select.any" }) },
@@ -82,10 +83,10 @@ export default function Events(inProps) {
     const [loading, setLoading] = useState(true);
     const [next, setNext] = useState(null);
     const [query, setQuery] = useState('');
-    const [search, setSearch] = useState(false);
     const [dateSearch, setDateSearch] = useState(options[0].value);
     const [showFollowed, setShowFollowed] = useState(false);
     const [showPastEvents, setShowPastEvents] = useState(false);
+    const [showMyEvents, setShowMyEvents] = useState(false);
     // CONTEXT
     const scUserContext = useContext(SCUserContext);
     const scPreferencesContext = useContext(SCPreferencesContext);
@@ -95,6 +96,8 @@ export default function Events(inProps) {
         scPreferencesContext.preferences[SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY].value;
     // CONST
     const authUserId = scUserContext.user ? scUserContext.user.id : null;
+    const theme = useTheme();
+    const isMobile = useMediaQuery(theme.breakpoints.down('md'));
     // HANDLERS
     const handleChipClick = () => {
         setShowFollowed(!showFollowed);
@@ -111,14 +114,14 @@ export default function Events(inProps) {
     /**
      * Fetches events list
      */
-    const fetchEvents = () => {
+    const fetchEvents = (search) => {
         setLoading(true);
         return http
             .request({
             url: endpoint.url({}),
             method: endpoint.method,
             params: Object.assign(Object.assign({}, endpointQueryParams), (general
-                ? Object.assign(Object.assign(Object.assign(Object.assign({}, (search && { search: query })), (dateSearch !== SCEventDateFilterType.ANY && { date_filter: dateSearch })), (showFollowed && { follows: showFollowed })), (showPastEvents && { date_filter: SCEventDateFilterType.PAST })) : Object.assign({ subscription_status: SCEventSubscriptionStatusType.GOING }, (showPastEvents && { past: showPastEvents }))))
+                ? Object.assign(Object.assign(Object.assign(Object.assign({}, (search && { search: query })), (dateSearch !== SCEventDateFilterType.ANY && { date_filter: dateSearch })), (showFollowed && { follows: showFollowed })), (showPastEvents && { date_filter: SCEventDateFilterType.PAST })) : Object.assign(Object.assign({ subscription_status: SCEventSubscriptionStatusType.GOING }, (showPastEvents && { past: showPastEvents })), (showMyEvents && { created_by: authUserId }))))
         })
             .then((res) => {
             setEvents(res.data.results);
@@ -137,9 +140,9 @@ export default function Events(inProps) {
             return;
         }
         else {
-            fetchEvents();
+            query === '' && fetchEvents();
         }
-    }, [contentAvailability, search, dateSearch, showFollowed, showPastEvents]);
+    }, [contentAvailability, dateSearch, showFollowed, showPastEvents, showMyEvents, query]);
     const handleNext = useMemo(() => () => {
         if (!next) {
             return;
@@ -162,7 +165,6 @@ export default function Events(inProps) {
      */
     const handleOnChangeFilterName = (event) => {
         setQuery(event.target.value);
-        setSearch(false);
     };
     /**
      * Handle change time frame
@@ -174,8 +176,25 @@ export default function Events(inProps) {
     /**
      * Renders events list
      */
-    const c = (_jsxs(_Fragment, { children: [showFilters && (_jsx(Grid, Object.assign({ container: true, className: classes.filters, gap: 2 }, { children: filters ? (filters) : !general ? (_jsx(Grid, Object.assign({ item: true }, { children: _jsx(PastEventsFilter, { showPastEvents: showPastEvents, handleClick: handleChipPastClick, handleDeleteClick: handleDeletePastClick, autoHide: !events.length && !showPastEvents }) }))) : (_jsxs(_Fragment, { children: [_jsx(Grid, Object.assign({ item: true, xs: 12, md: 4 }, { children: _jsx(TextField, { size: 'small', fullWidth: true, value: query, label: _jsx(FormattedMessage, { id: "ui.events.filterByName", defaultMessage: "ui.events.filterByName" }), variant: "outlined", onChange: handleOnChangeFilterName, disabled: loading, InputProps: {
-                                    endAdornment: (_jsx(IconButton, Object.assign({ onClick: () => setSearch(true) }, { children: _jsx(Icon, { children: "search" }) })))
+    const c = (_jsxs(_Fragment, { children: [showFilters && (_jsx(Grid, Object.assign({ container: true, className: classes.filters, gap: 2 }, { children: filters ? (filters) : !general ? (_jsxs(_Fragment, { children: [_jsx(Grid, Object.assign({ item: true }, { children: _jsx(PastEventsFilter, { showPastEvents: showPastEvents, handleClick: handleChipPastClick, handleDeleteClick: handleDeletePastClick, autoHide: !events.length && !showPastEvents }) })), (events.length !== 0 || (events.length === 0 && showMyEvents)) && (_jsx(Grid, Object.assign({ item: true }, { children: _jsx(EventsChipRoot
+                            // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                            // @ts-ignore
+                            , { 
+                                // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                                // @ts-ignore
+                                color: showMyEvents ? 'secondary' : 'default', 
+                                // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                                // @ts-ignore
+                                variant: showMyEvents ? 'filled' : 'outlined', label: _jsx(FormattedMessage, { id: "ui.events.filterByCreatedByMe", defaultMessage: "ui.events.filterByCreatedByMe" }), onClick: () => setShowMyEvents(!showMyEvents), 
+                                // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                                // @ts-ignore
+                                showFollowed: showMyEvents, deleteIcon: showMyEvents ? _jsx(Icon, { children: "close" }) : null, onDelete: showMyEvents ? handleDeleteClick : null }) })))] })) : (_jsxs(_Fragment, { children: [_jsx(Grid, Object.assign({ item: true, xs: 12, md: 4 }, { children: _jsx(TextField, { className: classes.search, size: 'small', fullWidth: true, value: query, label: _jsx(FormattedMessage, { id: "ui.events.filterByName", defaultMessage: "ui.events.filterByName" }), variant: "outlined", onChange: handleOnChangeFilterName, disabled: loading, onKeyUp: (e) => {
+                                    e.preventDefault();
+                                    if (e.key === 'Enter') {
+                                        fetchEvents(true);
+                                    }
+                                }, InputProps: {
+                                    endAdornment: (_jsx(InputAdornment, Object.assign({ position: "end" }, { children: isMobile ? (_jsx(IconButton, Object.assign({ onClick: () => fetchEvents(true) }, { children: _jsx(Icon, { children: "search" }) }))) : (_jsx(Button, { size: "small", variant: "contained", color: "secondary", onClick: () => fetchEvents(true), endIcon: _jsx(Icon, { children: "search" }) })) })))
                                 } }) })), _jsx(Grid, Object.assign({ item: true, xs: 12, md: 2 }, { children: _jsxs(FormControl, Object.assign({ fullWidth: true }, { children: [_jsx(InputLabel, { children: _jsx(FormattedMessage, { id: "ui.events.filterByDate", defaultMessage: "ui.events.filterByDate" }) }), _jsx(Select, Object.assign({ disabled: showPastEvents, size: 'small', label: _jsx(FormattedMessage, { id: "ui.events.filterByDate", defaultMessage: "ui.events.filterByDate" }), value: dateSearch, onChange: handleOnChangeTimeFrame, renderValue: (selected) => options.find((option) => option.value === selected).label }, { children: options.map((option) => (_jsxs(MenuItem, Object.assign({ value: option.value }, { children: [_jsx(Radio, { checked: dateSearch === option.value, value: option.value, name: "radio-button-select", inputProps: { 'aria-label': option.label } }), option.label] }), option.value))) }))] })) })), authUserId && (_jsx(Grid, Object.assign({ item: true }, { children: _jsx(EventsChipRoot
                             // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
                             // @ts-ignore

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

@@ -3,7 +3,7 @@ import { WidgetProps } from '../Widget';
 export interface MyEventsWidgetProps extends WidgetProps {
     /**
      * Feed API Query Params
-     * @default [{'limit': 20, 'offset': 0}]
+     * @default [{'limit': 20, 'offset': 0, subscription_status: 'going'}]
      */
     endpointQueryParams?: Record<string, string | number>;
     /**

package/lib/esm/components/MyEventsWidget/MyEventsWidget.js

@@ -5,19 +5,19 @@ import { styled } from '@mui/material/styles';
 import { Box, useThemeProps } from '@mui/system';
 import { Endpoints, EventService, http } from '@selfcommunity/api-services';
 import { SCCache, SCRoutes, useSCPreferences, useSCRouting, useSCUser } from '@selfcommunity/react-core';
-import { SCFeatureName } from '@selfcommunity/types';
+import { SCEventSubscriptionStatusType, SCFeatureName } from '@selfcommunity/types';
 import { Logger } from '@selfcommunity/utils';
 import { useCallback, useEffect, useMemo, useReducer, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { SCOPE_SC_UI } from '../../constants/Errors';
 import { DEFAULT_PAGINATION_LIMIT, DEFAULT_PAGINATION_OFFSET } from '../../constants/Pagination';
 import HiddenPlaceholder from '../../shared/HiddenPlaceholder';
+import { SCEventTemplateType } from '../../types/event';
 import { actionWidgetTypes, dataWidgetReducer, stateWidgetInitializer } from '../../utils/widget';
+import Event from '../Event';
 import Widget from '../Widget';
 import { PREFIX } from './constants';
 import Skeleton from './Skeleton';
-import { SCEventTemplateType } from '../../types/event';
-import Event from '../Event';
 const classes = {
     root: `${PREFIX}-root`,
     titleWrapper: `${PREFIX}-title-wrapper`,
@@ -45,7 +45,11 @@ export default function MyEventsWidget(inProps) {
         name: PREFIX
     });
     // CONST
-    const { endpointQueryParams = { limit: DEFAULT_PAGINATION_LIMIT, offset: DEFAULT_PAGINATION_OFFSET }, cacheStrategy } = props, rest = __rest(props, ["endpointQueryParams", "cacheStrategy"]);
+    const { endpointQueryParams = {
+        limit: DEFAULT_PAGINATION_LIMIT,
+        offset: DEFAULT_PAGINATION_OFFSET,
+        subscription_status: SCEventSubscriptionStatusType.GOING
+    }, cacheStrategy } = props, rest = __rest(props, ["endpointQueryParams", "cacheStrategy"]);
     // STATE
     const [state, dispatch] = useReducer(dataWidgetReducer, {
         isLoadingNext: false,

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

@@ -91,7 +91,6 @@ const OnBoardingWidget = (inProps) => {
                     }
                     return item;
                 }));
-                setStep(nextStep);
             })
                 .catch((error) => {
                 Logger.error(SCOPE_SC_UI, error);
@@ -106,9 +105,6 @@ const OnBoardingWidget = (inProps) => {
             variant: 'success',
             autoHideDuration: 7000
         });
-        if (_step.step === step.step) {
-            setStep(nextStep);
-        }
     };
     const getSteps = () => __awaiter(void 0, void 0, void 0, function* () {
         yield OnBoardingService.getAllSteps()

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

@@ -4,7 +4,7 @@ import { Alert, Button, CardMedia, Icon, Typography } from '@mui/material';
 import Box from '@mui/material/Box';
 import { useThemeProps } from '@mui/system';
 import classNames from 'classnames';
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { PREFIX } from '../../constants';
 import ProgressBar from '../../../../shared/ProgressBar';
@@ -69,6 +69,25 @@ export default function Category(inProps) {
             return () => clearInterval(intervalId);
         }
     }, [step.status, step.completion_percentage]);
+    const getLoadingMessage = useMemo(() => {
+        let message;
+        if (progress <= 10) {
+            message = (_jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.categories.loading.a", defaultMessage: "ui.onBoardingWidget.step.categories.loading.a" }));
+        }
+        else if (progress <= 20) {
+            message = (_jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.categories.loading.b", defaultMessage: "ui.onBoardingWidget.step.categories.loading.b" }));
+        }
+        else if (progress <= 40) {
+            message = (_jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.categories.loading.c", defaultMessage: "ui.onBoardingWidget.step.categories.loading.c" }));
+        }
+        else if (progress <= 60) {
+            message = (_jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.categories.loading.d", defaultMessage: "ui.onBoardingWidget.step.categories.loading.d" }));
+        }
+        else {
+            message = (_jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.categories.loading.e", defaultMessage: "ui.onBoardingWidget.step.categories.loading.e" }));
+        }
+        return message;
+    }, [progress]);
     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
@@ -79,5 +98,5 @@ export default function Category(inProps) {
                                 // 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" }) }))) }))] })));
+                            } }) }), _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: getLoadingMessage })) })] }))) : (_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

@@ -4,7 +4,7 @@ import { Alert, Button, Icon, Typography } from '@mui/material';
 import Box from '@mui/material/Box';
 import { useThemeProps } from '@mui/system';
 import classNames from 'classnames';
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { PREFIX } from '../../constants';
 import { FormattedMessage } from 'react-intl';
 import { SCOnBoardingStepStatusType } from '@selfcommunity/types';
@@ -49,5 +49,24 @@ 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 ? (_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" }) }))) }))] })));
+    const getLoadingMessage = useMemo(() => {
+        let message;
+        if (progress <= 10) {
+            message = _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.contents.loading.a", defaultMessage: "ui.onBoardingWidget.step.contents.loading.a" });
+        }
+        else if (progress <= 20) {
+            message = _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.contents.loading.b", defaultMessage: "ui.onBoardingWidget.step.contents.loading.b" });
+        }
+        else if (progress <= 40) {
+            message = _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.contents.loading.c", defaultMessage: "ui.onBoardingWidget.step.contents.loading.c" });
+        }
+        else if (progress <= 60) {
+            message = _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.contents.loading.d", defaultMessage: "ui.onBoardingWidget.step.contents.loading.d" });
+        }
+        else {
+            message = _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.contents.loading.e", defaultMessage: "ui.onBoardingWidget.step.contents.loading.e" });
+        }
+        return message;
+    }, [progress]);
+    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: getLoadingMessage })) })] }))) : (_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/ContributionsActionsMenu.d.ts

@@ -14,5 +14,6 @@ export declare const EDIT_CONTRIBUTION = "_edit_contribution";
 export declare const DELETE_CONTRIBUTION = "_delete_contribution";
 export declare const RESTORE_CONTRIBUTION = "_restore_contribution";
 export declare const SUSPEND_NOTIFICATION_CONTRIBUTION = "_suspend_notification_contribution";
+export declare const SUSPEND_NOTIFICATION_EVENT = "_suspend_notification_event";
 export declare const MODERATE_CONTRIBUTION_HIDDEN = "_moderate_contribution_hidden";
 export declare const MODERATE_CONTRIBUTION_DELETED = "_moderate_contribution_deleted";

package/lib/esm/constants/ContributionsActionsMenu.js

@@ -14,5 +14,6 @@ export const EDIT_CONTRIBUTION = '_edit_contribution';
 export const DELETE_CONTRIBUTION = '_delete_contribution';
 export const RESTORE_CONTRIBUTION = '_restore_contribution';
 export const SUSPEND_NOTIFICATION_CONTRIBUTION = '_suspend_notification_contribution';
+export const SUSPEND_NOTIFICATION_EVENT = '_suspend_notification_event';
 export const MODERATE_CONTRIBUTION_HIDDEN = '_moderate_contribution_hidden';
 export const MODERATE_CONTRIBUTION_DELETED = '_moderate_contribution_deleted';

package/lib/esm/shared/ContributionActionsMenu/index.d.ts

@@ -54,6 +54,10 @@ export interface ContributionActionsMenuProps {
      * Handle suspend notification obj
      */
     onSuspendNotificationContribution?: (obj: SCCommentType | SCFeedObjectType) => void;
+    /**
+     * Handle suspend notification event embedded in obj
+     */
+    onSuspendNotificationEvent?: (obj: SCCommentType | SCFeedObjectType) => void;
     /**
      * Props to spread to popper
      * @default empty object

package/lib/esm/shared/ContributionActionsMenu/index.js

@@ -17,7 +17,7 @@ import { MODERATION_CONTRIBUTION_STATE_DELETED, MODERATION_CONTRIBUTION_STATE_HI
 import { Endpoints, http } from '@selfcommunity/api-services';
 import { SCContext, SCUserContext, UserUtils, useSCFetchCommentObject, useSCFetchFeedObject, useSCRouting } from '@selfcommunity/react-core';
 import { SCContributionType } from '@selfcommunity/types';
-import { DELETE_CONTRIBUTION, DELETE_CONTRIBUTION_SECTION, EDIT_CONTRIBUTION, FLAG_CONTRIBUTION_SECTION, GENERAL_SECTION, GET_CONTRIBUTION_PERMALINK, HIDE_CONTRIBUTION_SECTION, MODERATE_CONTRIBUTION_DELETED, MODERATE_CONTRIBUTION_HIDDEN, RESTORE_CONTRIBUTION, SUSPEND_NOTIFICATION_CONTRIBUTION } from '../../constants/ContributionsActionsMenu';
+import { DELETE_CONTRIBUTION, DELETE_CONTRIBUTION_SECTION, EDIT_CONTRIBUTION, FLAG_CONTRIBUTION_SECTION, GENERAL_SECTION, GET_CONTRIBUTION_PERMALINK, HIDE_CONTRIBUTION_SECTION, MODERATE_CONTRIBUTION_DELETED, MODERATE_CONTRIBUTION_HIDDEN, RESTORE_CONTRIBUTION, SUSPEND_NOTIFICATION_CONTRIBUTION, SUSPEND_NOTIFICATION_EVENT } from '../../constants/ContributionsActionsMenu';
 const PREFIX = 'SCContributionActionsMenu';
 const classes = {
     root: `${PREFIX}-root`,
@@ -76,7 +76,7 @@ const messages = defineMessages({
 });
 export default function ContributionActionsMenu(props) {
     // PROPS
-    const { className, feedObjectId, feedObject, feedObjectType = SCContributionType.POST, commentObjectId, commentObject, onFlagContribution, onEditContribution, onHideContribution, onDeleteContribution, onRestoreContribution, onSuspendNotificationContribution, PopperProps = {} } = props, rest = __rest(props, ["className", "feedObjectId", "feedObject", "feedObjectType", "commentObjectId", "commentObject", "onFlagContribution", "onEditContribution", "onHideContribution", "onDeleteContribution", "onRestoreContribution", "onSuspendNotificationContribution", "PopperProps"]);
+    const { className, feedObjectId, feedObject, feedObjectType = SCContributionType.POST, commentObjectId, commentObject, onFlagContribution, onEditContribution, onHideContribution, onDeleteContribution, onRestoreContribution, onSuspendNotificationContribution, onSuspendNotificationEvent, PopperProps = {} } = props, rest = __rest(props, ["className", "feedObjectId", "feedObject", "feedObjectType", "commentObjectId", "commentObject", "onFlagContribution", "onEditContribution", "onHideContribution", "onDeleteContribution", "onRestoreContribution", "onSuspendNotificationContribution", "onSuspendNotificationEvent", "PopperProps"]);
     // INTL
     const intl = useIntl();
     // CONTEXT
@@ -171,7 +171,7 @@ export default function ContributionActionsMenu(props) {
         }
     }
     /**
-     * Performs  notification suspension
+     * Performs notification suspension
      */
     const performSuspendNotification = useMemo(() => () => {
         return http
@@ -186,14 +186,30 @@ export default function ContributionActionsMenu(props) {
             return Promise.resolve(res.data);
         });
     }, [contributionObj]);
+    /**
+     * Performs notification suspension of event embedded
+     */
+    const performSuspendNotificationEvent = useMemo(() => () => {
+        const _endpoint = contributionObj.event.show_on_feed ? Endpoints.HideEvent : Endpoints.ShowEvent;
+        return http
+            .request({
+            url: _endpoint.url({ id: contributionObj.event.id }),
+            method: _endpoint.method
+        })
+            .then((res) => {
+            if (res.status >= 300) {
+                return Promise.reject(res);
+            }
+            return Promise.resolve(res.data);
+        });
+    }, [contributionObj]);
     /**
      * Handles stop notification for contributionObj
-     * @param contribution
      */
     function handleSuspendContentNotification() {
         setCurrentActionLoading(SUSPEND_NOTIFICATION_CONTRIBUTION);
         performSuspendNotification()
-            .then((data) => {
+            .then(() => {
             const _feedObj = Object.assign({}, feedObj, { suspended: !feedObj.suspended });
             setFeedObj(_feedObj);
             onSuspendNotificationContribution && onSuspendNotificationContribution(_feedObj);
@@ -209,6 +225,29 @@ export default function ContributionActionsMenu(props) {
             });
         });
     }
+    /**
+     * Handles stop notification for event embedded in contributionObj
+     */
+    function handleSuspendEventNotification() {
+        setCurrentActionLoading(SUSPEND_NOTIFICATION_EVENT);
+        performSuspendNotificationEvent()
+            .then(() => {
+            const _eventObj = Object.assign({}, feedObj.event, { show_on_feed: !feedObj.event.show_on_feed });
+            const _feedObj = Object.assign({}, feedObj, { event: _eventObj });
+            setFeedObj(_feedObj);
+            onSuspendNotificationEvent && onSuspendNotificationEvent(_feedObj);
+            setCurrentActionLoading(null);
+        })
+            .catch((error) => {
+            Logger.error(SCOPE_SC_UI, error);
+            setCurrentAction(null);
+            setCurrentActionLoading(null);
+            enqueueSnackbar(_jsx(FormattedMessage, { id: "ui.contributionActionMenu.actionError", defaultMessage: "ui.contributionActionMenu.actionError" }), {
+                variant: 'error',
+                autoHideDuration: 3000
+            });
+        });
+    }
     /**
      * Get Status Flag
      */
@@ -353,7 +392,7 @@ export default function ContributionActionsMenu(props) {
         else if (contributionObj && !isLoading && !isFlagging && type !== 'undefined') {
             setIsFlagging(true);
             performFlag(type)
-                .then((data) => {
+                .then(() => {
                 setFlagType(flagType === type ? null : type);
                 setIsFlagging(false);
                 onFlagContribution && onFlagContribution(contributionObj, type, flagType !== type);
@@ -441,6 +480,10 @@ export default function ContributionActionsMenu(props) {
             setCurrentAction(SUSPEND_NOTIFICATION_CONTRIBUTION);
             handleSuspendContentNotification();
         }
+        else if (action === SUSPEND_NOTIFICATION_EVENT) {
+            setCurrentAction(SUSPEND_NOTIFICATION_EVENT);
+            handleSuspendEventNotification();
+        }
         else if (action === MODERATE_CONTRIBUTION_HIDDEN) {
             setCurrentAction(MODERATE_CONTRIBUTION_HIDDEN);
             setOpenConfirmDialog(true);
@@ -494,7 +537,7 @@ export default function ContributionActionsMenu(props) {
             if (currentAction === DELETE_CONTRIBUTION) {
                 setCurrentActionLoading(DELETE_CONTRIBUTION);
                 performDeleteContribution()
-                    .then((data) => {
+                    .then(() => {
                     const _contributionObj = Object.assign({}, contributionObj, { deleted: true });
                     onDeleteContribution && onDeleteContribution(_contributionObj);
                     performPostConfirmAction(true);
@@ -507,7 +550,7 @@ export default function ContributionActionsMenu(props) {
             else if (currentAction === RESTORE_CONTRIBUTION) {
                 setCurrentActionLoading(RESTORE_CONTRIBUTION);
                 performRestoreContribution()
-                    .then((data) => {
+                    .then(() => {
                     const _contributionObj = Object.assign({}, contributionObj, { deleted: false });
                     onRestoreContribution && onRestoreContribution(_contributionObj);
                     performPostConfirmAction(true);
@@ -520,7 +563,7 @@ export default function ContributionActionsMenu(props) {
             else if (currentAction === MODERATE_CONTRIBUTION_HIDDEN) {
                 setCurrentActionLoading(MODERATE_CONTRIBUTION_HIDDEN);
                 performModerationContribution(MODERATION_TYPE_ACTION_HIDE, hideFlagType)
-                    .then((data) => {
+                    .then(() => {
                     const _contributionObj = Object.assign({}, contributionObj, { collapsed: !contributionObj.collapsed });
                     setHideType(hideType === hideFlagType ? null : hideFlagType);
                     setHideFlagType(null);
@@ -535,7 +578,7 @@ export default function ContributionActionsMenu(props) {
             else if (currentAction === MODERATE_CONTRIBUTION_DELETED) {
                 setCurrentActionLoading(MODERATE_CONTRIBUTION_DELETED);
                 performModerationContribution(MODERATION_TYPE_ACTION_DELETE, deleteFlagType)
-                    .then((data) => {
+                    .then(() => {
                     const _contributionObj = Object.assign({}, contributionObj, { deleted: !contributionObj.deleted });
                     setDeleteType(deleteType === deleteFlagType ? null : deleteFlagType);
                     setDeleteFlagType(null);
@@ -578,9 +621,9 @@ export default function ContributionActionsMenu(props) {
         return name;
     }
     /**
-     * action
-     * @param actionId
-     */
+       * action
+       * @param sectionId
+       */
     function handleOpenSection(sectionId) {
         if (sectionId) {
             if (sectionId === openSection) {
@@ -651,11 +694,21 @@ export default function ContributionActionsMenu(props) {
             contributionObj &&
             contributionObj.type !== SCContributionType.COMMENT);
     }
+    /**
+     * Can authenticated user suspend notification for the event related to the contribution
+     */
+    function canSuspendNotificationEvent() {
+        return (scUserContext.user &&
+            scUserContext.user.id !== contributionObj.author.id &&
+            contributionObj &&
+            contributionObj.type !== SCContributionType.COMMENT &&
+            Boolean(contributionObj.event));
+    }
     /**
      * Renders section general
      */
     function renderGeneralSection() {
-        return (_jsxs(Box, { children: [_jsxs(MenuItem, Object.assign({ className: classes.subItem, disabled: isFlagging }, { children: [_jsx(ListItemIcon, { children: _jsx(Icon, { children: "link" }) }), _jsx(ListItemText, { primary: _jsx(FormattedMessage, { id: "ui.contributionActionMenu.permanentLink", defaultMessage: "ui.contributionActionMenu.permanentLink" }), onClick: () => handleAction(GET_CONTRIBUTION_PERMALINK), classes: { root: classes.itemText } })] })), canModifyContribution() && (_jsxs(MenuItem, Object.assign({ className: classes.subItem, disabled: isFlagging }, { children: [_jsx(ListItemIcon, { children: _jsx(Icon, { children: "edit" }) }), _jsx(ListItemText, { primary: _jsx(FormattedMessage, { id: "ui.contributionActionMenu.editContribution", defaultMessage: "ui.contributionActionMenu.editContribution" }), onClick: () => handleAction(EDIT_CONTRIBUTION), classes: { root: classes.itemText } })] }))), canDeleteContribution() && (_jsxs(MenuItem, Object.assign({ className: classes.subItem, disabled: isFlagging }, { children: [_jsx(ListItemIcon, { children: currentActionLoading === DELETE_CONTRIBUTION || currentActionLoading === RESTORE_CONTRIBUTION ? (_jsx(CircularProgress, { size: 20 })) : (_jsx(Icon, { children: "delete" })) }), contributionObj.deleted ? (_jsx(ListItemText, { primary: _jsx(FormattedMessage, { id: "ui.contributionActionMenu.restoreContribution", defaultMessage: "ui.contributionActionMenu.restoreContribution" }), onClick: () => handleAction(RESTORE_CONTRIBUTION), classes: { root: classes.itemText } })) : (_jsx(ListItemText, { primary: _jsx(FormattedMessage, { id: "ui.contributionActionMenu.deleteContribution", defaultMessage: "ui.contributionActionMenu.deleteContribution" }), onClick: () => handleAction(DELETE_CONTRIBUTION), classes: { root: classes.itemText } }))] }))), canSuspendNotificationContribution() && (_jsxs(MenuItem, Object.assign({ className: classes.subItem, disabled: isFlagging }, { children: [_jsx(ListItemIcon, { children: currentActionLoading === SUSPEND_NOTIFICATION_CONTRIBUTION ? (_jsx(CircularProgress, { size: 20 })) : contributionObj['suspended'] ? (_jsx(Icon, { children: "notifications_active" })) : (_jsx(Icon, { children: "notifications_off" })) }), _jsx(ListItemText, { primary: contributionObj['suspended'] ? (_jsx(FormattedMessage, { id: "ui.contributionActionMenu.enableNotificationContribution", defaultMessage: "ui.contributionActionMenu.enableNotificationContribution" })) : (_jsx(FormattedMessage, { id: "ui.contributionActionMenu.suspendNotificationContribution", defaultMessage: "ui.contributionActionMenu.suspendNotificationContribution" })), onClick: () => handleAction(SUSPEND_NOTIFICATION_CONTRIBUTION), classes: { root: classes.itemText } })] })))] }, GENERAL_SECTION));
+        return (_jsxs(Box, { children: [_jsxs(MenuItem, Object.assign({ className: classes.subItem, disabled: isFlagging }, { children: [_jsx(ListItemIcon, { children: _jsx(Icon, { children: "link" }) }), _jsx(ListItemText, { primary: _jsx(FormattedMessage, { id: "ui.contributionActionMenu.permanentLink", defaultMessage: "ui.contributionActionMenu.permanentLink" }), onClick: () => handleAction(GET_CONTRIBUTION_PERMALINK), classes: { root: classes.itemText } })] })), canModifyContribution() && (_jsxs(MenuItem, Object.assign({ className: classes.subItem, disabled: isFlagging }, { children: [_jsx(ListItemIcon, { children: _jsx(Icon, { children: "edit" }) }), _jsx(ListItemText, { primary: _jsx(FormattedMessage, { id: "ui.contributionActionMenu.editContribution", defaultMessage: "ui.contributionActionMenu.editContribution" }), onClick: () => handleAction(EDIT_CONTRIBUTION), classes: { root: classes.itemText } })] }))), canDeleteContribution() && (_jsxs(MenuItem, Object.assign({ className: classes.subItem, disabled: isFlagging }, { children: [_jsx(ListItemIcon, { children: currentActionLoading === DELETE_CONTRIBUTION || currentActionLoading === RESTORE_CONTRIBUTION ? (_jsx(CircularProgress, { size: 20 })) : (_jsx(Icon, { children: "delete" })) }), contributionObj.deleted ? (_jsx(ListItemText, { primary: _jsx(FormattedMessage, { id: "ui.contributionActionMenu.restoreContribution", defaultMessage: "ui.contributionActionMenu.restoreContribution" }), onClick: () => handleAction(RESTORE_CONTRIBUTION), classes: { root: classes.itemText } })) : (_jsx(ListItemText, { primary: _jsx(FormattedMessage, { id: "ui.contributionActionMenu.deleteContribution", defaultMessage: "ui.contributionActionMenu.deleteContribution" }), onClick: () => handleAction(DELETE_CONTRIBUTION), classes: { root: classes.itemText } }))] }))), canSuspendNotificationContribution() && (_jsxs(MenuItem, Object.assign({ className: classes.subItem, disabled: isFlagging }, { children: [_jsx(ListItemIcon, { children: currentActionLoading === SUSPEND_NOTIFICATION_CONTRIBUTION ? (_jsx(CircularProgress, { size: 20 })) : contributionObj['suspended'] ? (_jsx(Icon, { children: "notifications_active" })) : (_jsx(Icon, { children: "notifications_off" })) }), _jsx(ListItemText, { primary: contributionObj['suspended'] ? (_jsx(FormattedMessage, { id: "ui.contributionActionMenu.enableNotificationContribution", defaultMessage: "ui.contributionActionMenu.enableNotificationContribution" })) : (_jsx(FormattedMessage, { id: "ui.contributionActionMenu.suspendNotificationContribution", defaultMessage: "ui.contributionActionMenu.suspendNotificationContribution" })), onClick: () => handleAction(SUSPEND_NOTIFICATION_CONTRIBUTION), classes: { root: classes.itemText } })] }))), canSuspendNotificationEvent() && (_jsxs(MenuItem, Object.assign({ className: classes.subItem, disabled: isFlagging }, { children: [_jsx(ListItemIcon, { children: currentActionLoading === SUSPEND_NOTIFICATION_EVENT ? (_jsx(CircularProgress, { size: 20 })) : contributionObj.event['show_on_feed'] ? (_jsx(Icon, { children: "notifications_active" })) : (_jsx(Icon, { children: "notifications_off" })) }), _jsx(ListItemText, { primary: !contributionObj.event['show_on_feed'] ? (_jsx(FormattedMessage, { id: "ui.contributionActionMenu.enableNotificationContribution", defaultMessage: "ui.contributionActionMenu.enableNotificationContribution" })) : (_jsx(FormattedMessage, { id: "ui.contributionActionMenu.suspendNotificationContribution", defaultMessage: "ui.contributionActionMenu.suspendNotificationContribution" })), onClick: () => handleAction(SUSPEND_NOTIFICATION_EVENT), classes: { root: classes.itemText } })] })))] }, GENERAL_SECTION));
     }
     /**
      * Renders contribution menu content

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

@@ -12,6 +12,7 @@ export interface EventInfoDetailsProps {
     hasPrivacyInfo?: boolean;
     hasLocationInfo?: boolean;
     hasCreatedInfo?: boolean;
+    hasInProgress?: boolean;
     beforeDateInfo?: ReactNode | null;
     beforeRecurringInfo?: ReactNode | null;
     beforePrivacyInfo?: ReactNode | null;

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Icon, Stack, styled, Typography, useThemeProps } from '@mui/material';
+import { Box, Icon, Stack, styled, Tooltip, Typography, useThemeProps } from '@mui/material';
 import { Link } from '@selfcommunity/react-core';
 import { SCEventLocationType, SCEventPrivacyType, SCEventRecurrenceType } from '@selfcommunity/types';
 import { useMemo } from 'react';
@@ -8,6 +8,7 @@ const PREFIX = 'SCEventInfoDetails';
 const classes = {
     root: `${PREFIX}-root`,
     iconTextWrapper: `${PREFIX}-icon-text-wrapper`,
+    live: `${PREFIX}-live`,
     link: `${PREFIX}-link`,
     url: `${PREFIX}-url`,
     creationWrapper: `${PREFIX}-creation-wrapper`
@@ -23,7 +24,7 @@ export default function EventInfoDetails(inProps) {
         props: inProps,
         name: PREFIX
     });
-    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;
+    const { event, hideDateIcon = false, hideRecurringIcon = false, hidePrivacyIcon = false, hideLocationIcon = false, hideCreatedIcon = false, hasDateInfo = true, hasRecurringInfo = false, hasPrivacyInfo = true, hasLocationInfo = true, hasCreatedInfo = false, hasInProgress = true, beforeDateInfo, beforeRecurringInfo, beforePrivacyInfo, beforeLocationInfo, beforeCreatedInfo } = props;
     // HOOKS
     const intl = useIntl();
     const privacy = useMemo(() => (event.privacy === SCEventPrivacyType.PUBLIC ? 'ui.eventInfoDetails.privacy.public' : 'ui.eventInfoDetails.privacy.private'), [event]);
@@ -36,7 +37,7 @@ export default function EventInfoDetails(inProps) {
                                     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: {
+                            } }) })), hasInProgress && (_jsx(Tooltip, Object.assign({ title: _jsx(FormattedMessage, { id: "ui.eventInfoDetails.inProgress", defaultMessage: "ui.eventInfoDetails.inProgress" }) }, { children: _jsx(Box, { className: classes.live }) })))] }))), 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',