@selfcommunity/react-ui 0.7.50-events.105 → 0.7.50-events.107

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, InputLabel, MenuItem, Radio, Select, TextField, Typography } from '@mui/material';
+import { Box, Button, Chip, FormControl, Grid, Icon, IconButton, InputLabel, MenuItem, Radio, Select, TextField, Typography } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import { useThemeProps } from '@mui/system';
 import { Endpoints, http } from '@selfcommunity/api-services';
@@ -81,7 +81,8 @@ export default function Events(inProps) {
     const [events, setEvents] = useState([]);
     const [loading, setLoading] = useState(true);
     const [next, setNext] = useState(null);
-    const [search, setSearch] = useState('');
+    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);
@@ -111,13 +112,13 @@ export default function Events(inProps) {
      * Fetches events list
      */
     const fetchEvents = () => {
-        search === '' && setLoading(true);
+        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: search })), (dateSearch !== SCEventDateFilterType.ANY && { date_filter: dateSearch })), (showFollowed && { follows: showFollowed })), (showPastEvents && { date_filter: SCEventDateFilterType.PAST })) : Object.assign(Object.assign(Object.assign({}, (search !== '' && { search: search })), { 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({ subscription_status: SCEventSubscriptionStatusType.GOING }, (showPastEvents && { past: showPastEvents }))))
         })
             .then((res) => {
             setEvents(res.data.results);
@@ -160,7 +161,8 @@ export default function Events(inProps) {
      * @param event
      */
     const handleOnChangeFilterName = (event) => {
-        setSearch(event.target.value);
+        setQuery(event.target.value);
+        setSearch(false);
     };
     /**
      * Handle change time frame
@@ -172,7 +174,9 @@ 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: search, label: _jsx(FormattedMessage, { id: "ui.events.filterByName", defaultMessage: "ui.events.filterByName" }), variant: "outlined", onChange: handleOnChangeFilterName, disabled: loading }) })), _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
+    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" }) })))
+                                } }) })), _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/RelatedEventsWidget/RelatedEventsWidget.js

@@ -1,11 +1,11 @@
 import { __rest } from "tslib";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Avatar, Button, CardActions, CardContent, Divider, List, ListItem, Stack, Typography, useThemeProps } from '@mui/material';
 import { styled } from '@mui/system';
 import { Endpoints, EventService, http } from '@selfcommunity/api-services';
 import { Link, SCCache, SCRoutes, useSCFetchEvent, useSCRouting, useSCUser } from '@selfcommunity/react-core';
 import { Logger } from '@selfcommunity/utils';
-import { useCallback, useEffect, useReducer, useState } from 'react';
+import { Fragment, useCallback, useEffect, useReducer, useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import 'swiper/css';
 import { SCOPE_SC_UI } from '../../constants/Errors';
@@ -119,5 +119,5 @@ export default function RelatedEventsWidget(inProps) {
     if (!scEvent || (state === null || state === void 0 ? void 0 : state.count) === 0) {
         return _jsx(HiddenPlaceholder, {});
     }
-    return (_jsxs(Root, Object.assign({ className: classes.root }, rest, { children: [_jsxs(CardContent, Object.assign({ className: classes.content }, { children: [_jsxs(Stack, Object.assign({ className: classes.header }, { children: [_jsx(Button, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, { id: (_a = scUserContext.user) === null || _a === void 0 ? void 0 : _a.id }), className: classes.avatarWrapper }, { children: _jsx(Avatar, { variant: "rounded", src: scEvent.managed_by.avatar, alt: scEvent.managed_by.username, className: classes.avatar }) })), _jsx(Typography, Object.assign({ variant: "h4" }, { children: _jsx("b", { children: intl.formatMessage(messages.title, { user: scEvent.managed_by.username }) }) }))] })), _jsx(Stack, Object.assign({ className: classes.eventWrapper }, { children: state === null || state === void 0 ? void 0 : state.results.map((_event, i, array) => (_jsxs(_Fragment, { children: [_jsx(Event, Object.assign({ event: _event, eventId: _event.id }, eventComponentProps, { className: classes.event }), i), i < array.length - 1 && _jsx(Divider, {})] }))) }))] })), state.count > state.visibleItems && (_jsx(CardActions, Object.assign({ className: classes.actions }, { children: _jsx(Button, Object.assign({ onClick: handleToggleDialogOpen, className: classes.actionButton }, { children: _jsx(Typography, Object.assign({ variant: "caption" }, { children: _jsx(FormattedMessage, { id: "ui.relatedEventsWidget.showAll", defaultMessage: "ui.relatedEventsWidget.showAll" }) })) })) }))), openDialog && (_jsx(DialogRoot, Object.assign({ className: classes.dialogRoot, title: intl.formatMessage(messages.title, { user: scEvent.managed_by.username }), onClose: handleToggleDialogOpen, open: openDialog }, dialogProps, { children: _jsx(InfiniteScroll, Object.assign({ dataLength: state.results.length, next: handleNext, hasMoreNext: Boolean(state.next), loaderNext: _jsx(EventSkeleton, Object.assign({ elevation: 0 }, eventComponentProps)), className: classes.infiniteScroll, endMessage: _jsx(Typography, Object.assign({ className: classes.endMessage }, { children: _jsx(FormattedMessage, { id: "ui.relatedEventsWidget.noMoreResults", defaultMessage: "ui.eventMembersWidget.noMoreResults" }) })) }, { children: _jsx(List, { children: state.results.map((event) => (_jsx(ListItem, { children: _jsx(Event, Object.assign({ elevation: 0, event: event }, eventComponentProps)) }, event.id))) }) })) })))] })));
+    return (_jsxs(Root, Object.assign({ className: classes.root }, rest, { children: [_jsxs(CardContent, Object.assign({ className: classes.content }, { children: [_jsxs(Stack, Object.assign({ className: classes.header }, { children: [_jsx(Button, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, { id: (_a = scUserContext.user) === null || _a === void 0 ? void 0 : _a.id }), className: classes.avatarWrapper }, { children: _jsx(Avatar, { variant: "rounded", src: scEvent.managed_by.avatar, alt: scEvent.managed_by.username, className: classes.avatar }) })), _jsx(Typography, Object.assign({ variant: "h4" }, { children: _jsx("b", { children: intl.formatMessage(messages.title, { user: scEvent.managed_by.username }) }) }))] })), _jsx(Stack, Object.assign({ className: classes.eventWrapper }, { children: state === null || state === void 0 ? void 0 : state.results.map((_event, i, array) => (_jsxs(Fragment, { children: [_jsx(Event, Object.assign({ event: _event, eventId: _event.id }, eventComponentProps, { className: classes.event })), i < array.length - 1 && _jsx(Divider, {})] }, i))) }))] })), state.count > state.visibleItems && (_jsx(CardActions, Object.assign({ className: classes.actions }, { children: _jsx(Button, Object.assign({ onClick: handleToggleDialogOpen, className: classes.actionButton }, { children: _jsx(Typography, Object.assign({ variant: "caption" }, { children: _jsx(FormattedMessage, { id: "ui.relatedEventsWidget.showAll", defaultMessage: "ui.relatedEventsWidget.showAll" }) })) })) }))), openDialog && (_jsx(DialogRoot, Object.assign({ className: classes.dialogRoot, title: intl.formatMessage(messages.title, { user: scEvent.managed_by.username }), onClose: handleToggleDialogOpen, open: openDialog }, dialogProps, { children: _jsx(InfiniteScroll, Object.assign({ dataLength: state.results.length, next: handleNext, hasMoreNext: Boolean(state.next), loaderNext: _jsx(EventSkeleton, Object.assign({ elevation: 0 }, eventComponentProps)), className: classes.infiniteScroll, endMessage: _jsx(Typography, Object.assign({ className: classes.endMessage }, { children: _jsx(FormattedMessage, { id: "ui.relatedEventsWidget.noMoreResults", defaultMessage: "ui.eventMembersWidget.noMoreResults" }) })) }, { children: _jsx(List, { children: state.results.map((event) => (_jsx(ListItem, { children: _jsx(Event, Object.assign({ elevation: 0, event: event }, eventComponentProps)) }, event.id))) }) })) })))] })));
 }

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

@@ -1,9 +1,9 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { CardActions, CardContent, Divider, Skeleton, Stack } from '@mui/material';
 import { styled } from '@mui/system';
+import { Fragment } from 'react';
 import 'swiper/css';
 import { EventSkeleton } from '../Event';
-import { UserSkeleton } from '../User';
 import Widget from '../Widget';
 import { PREFIX } from './constants';
 const classes = {
@@ -20,5 +20,5 @@ const Root = styled(Widget, {
     overridesResolver: (_props, styles) => styles.skeletonRoot
 })(() => ({}));
 export default function RelatedEventsWidgetSkeleton() {
-    return (_jsxs(Root, Object.assign({ className: classes.root }, { children: [_jsxs(CardContent, Object.assign({ className: classes.content }, { children: [_jsx(UserSkeleton, { className: classes.user, elevation: 0 }), _jsx(Stack, Object.assign({ className: classes.eventWrapper }, { children: [1, 2, 3, 4].map((_event, i, array) => (_jsxs(_Fragment, { children: [_jsx(EventSkeleton, { elevation: 0, className: classes.event }, i), i < array.length - 1 && _jsx(Divider, {})] }))) }))] })), _jsx(CardActions, Object.assign({ className: classes.actions }, { children: _jsx(Skeleton, { animation: "wave", width: "52px", height: "20px" }) }))] })));
+    return (_jsxs(Root, Object.assign({ className: classes.root }, { children: [_jsx(CardContent, Object.assign({ className: classes.content }, { children: _jsx(Stack, Object.assign({ className: classes.eventWrapper }, { children: [1, 2, 3, 4].map((_event, i, array) => (_jsxs(Fragment, { children: [_jsx(EventSkeleton, { elevation: 0, className: classes.event }), i < array.length - 1 && _jsx(Divider, {})] }, i))) })) })), _jsx(CardActions, Object.assign({ className: classes.actions }, { children: _jsx(Skeleton, { animation: "wave", width: "52px", height: "20px" }) }))] })));
 }

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

@@ -1,5 +1,5 @@
 import { SCEventType } from '@selfcommunity/types';
-import React from 'react';
+import { ReactNode } from 'react';
 export interface EventInfoDetailsProps {
     event: SCEventType;
     hideDateIcon?: boolean;
@@ -12,10 +12,11 @@ export interface EventInfoDetailsProps {
     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;
+    hasInProgress?: boolean;
+    beforeDateInfo?: ReactNode | null;
+    beforeRecurringInfo?: ReactNode | null;
+    beforePrivacyInfo?: ReactNode | null;
+    beforeLocationInfo?: ReactNode | null;
+    beforeCreatedInfo?: ReactNode | null;
 }
 export default function EventInfoDetails(inProps: EventInfoDetailsProps): JSX.Element;

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

@@ -1,12 +1,14 @@
 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';
 import { FormattedMessage, useIntl } from 'react-intl';
 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`
@@ -22,11 +24,11 @@ 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 = 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 privacy = useMemo(() => (event.privacy === SCEventPrivacyType.PUBLIC ? 'ui.eventInfoDetails.privacy.public' : 'ui.eventInfoDetails.privacy.private'), [event]);
+    const location = useMemo(() => (event.location === SCEventLocationType.ONLINE ? 'ui.eventInfoDetails.location.virtual' : 'ui.eventInfoDetails.location.inPerson'), [event]);
     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',
@@ -35,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',