@selfcommunity/react-ui 0.7.50-events.110 → 0.7.50-events.112

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

@@ -10,7 +10,7 @@ const PREFIX = 'SCEventInfoDetails';
 const classes = {
     root: `${PREFIX}-root`,
     iconTextWrapper: `${PREFIX}-icon-text-wrapper`,
-    live: `${PREFIX}-live`,
+    inProgress: `${PREFIX}-in-progress`,
     link: `${PREFIX}-link`,
     url: `${PREFIX}-url`,
     creationWrapper: `${PREFIX}-creation-wrapper`
@@ -26,21 +26,25 @@ 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, hasInProgress = true, beforeDateInfo, beforeRecurringInfo, beforePrivacyInfo, beforeLocationInfo, beforeCreatedInfo } = props;
+    const { event, eventId, hideDateIcon = false, hideRecurringIcon = false, hidePrivacyIcon = false, hideLocationIcon = false, hideCreatedIcon = false, hasDateInfo = true, hasRecurringInfo = false, hasPrivacyInfo = true, hasLocationInfo = true, hasCreatedInfo = false, hasInProgress = false, beforeDateInfo, beforeRecurringInfo, beforePrivacyInfo, beforeLocationInfo, beforeCreatedInfo } = props;
     // HOOKS
     const intl = (0, react_intl_1.useIntl)();
-    const privacy = (0, react_1.useMemo)(() => (event.privacy === types_1.SCEventPrivacyType.PUBLIC ? 'ui.eventInfoDetails.privacy.public' : 'ui.eventInfoDetails.privacy.private'), [event]);
-    const location = (0, react_1.useMemo)(() => (event.location === types_1.SCEventLocationType.ONLINE ? 'ui.eventInfoDetails.location.virtual' : 'ui.eventInfoDetails.location.inPerson'), [event]);
-    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: classes.root }, { children: [beforeDateInfo, hasDateInfo && ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.iconTextWrapper }, { children: [!hideDateIcon && (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ fontSize: "small" }, { children: "CalendarIcon" })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventInfoDetails.date.startEndTime", defaultMessage: "ui.eventInfoDetails.date.startEndTime", values: {
-                                date: intl.formatDate(event.running ? event.running_start_date : event.next_start_date, {
-                                    weekday: 'long',
-                                    day: 'numeric',
-                                    year: 'numeric',
-                                    month: 'long'
-                                }),
-                                start: intl.formatDate(event.running ? event.running_start_date : event.next_start_date, { hour: 'numeric', minute: 'numeric' })
-                            } }) })), hasInProgress && ((0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventInfoDetails.inProgress", defaultMessage: "ui.eventInfoDetails.inProgress" }) }, { children: (0, jsx_runtime_1.jsx)(material_1.Box, { className: classes.live }) })))] }))), beforeRecurringInfo, hasRecurringInfo && event.recurring !== types_1.SCEventRecurrenceType.NEVER && ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.iconTextWrapper }, { children: [!hideRecurringIcon && (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ fontSize: "small" }, { children: "frequency" })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.eventInfoDetails.frequency.${event.recurring}.placeholder`, defaultMessage: `ui.eventInfoDetails.frequency.${event.recurring}.placeholder` }) }))] }))), beforePrivacyInfo, hasPrivacyInfo && ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.iconTextWrapper }, { children: [!hidePrivacyIcon && (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ fontSize: "small" }, { children: event.privacy === types_1.SCEventPrivacyType.PUBLIC ? 'public' : 'private' })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: privacy, defaultMessage: privacy }) })), "-", (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: location, defaultMessage: location }) }))] }))), beforeLocationInfo, hasLocationInfo && ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.iconTextWrapper }, { children: [!hideLocationIcon && ((0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ fontSize: "small" }, { children: event.location === types_1.SCEventLocationType.ONLINE ? 'play_circle_outline' : 'add_location_alt' }))), event.location === types_1.SCEventLocationType.ONLINE ? ((0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: event.link, target: "_blank", className: classes.link }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", className: classes.url }, { children: event.link })) }))) : ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", className: classes.url }, { children: event.geolocation })))] }))), beforeCreatedInfo, hasCreatedInfo && ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.creationWrapper }, { children: [!hideCreatedIcon && (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ fontSize: "small" }, { children: "create" })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventInfoDetails.date.create", defaultMessage: "ui.eventInfoDetails.date.create", values: {
-                                date: intl.formatDate(event.created_at, {
+    const { scEvent } = (0, react_core_1.useSCFetchEvent)({ id: eventId, event });
+    const privacy = (0, react_1.useMemo)(() => (scEvent && scEvent.privacy === types_1.SCEventPrivacyType.PUBLIC ? 'ui.eventInfoDetails.privacy.public' : 'ui.eventInfoDetails.privacy.private'), [scEvent]);
+    const location = (0, react_1.useMemo)(() => (scEvent && scEvent.location === types_1.SCEventLocationType.ONLINE ? 'ui.eventInfoDetails.location.virtual' : 'ui.eventInfoDetails.location.inPerson'), [scEvent]);
+    if (!scEvent) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: classes.root }, { children: [beforeDateInfo, hasDateInfo && ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.iconTextWrapper }, { children: [!hideDateIcon && (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ fontSize: "small" }, { children: scEvent.active ? 'CalendarIcon' : 'calendar_off' })), (0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: !scEvent.active ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventInfoDetails.deleted.tooltip", defaultMessage: "ui.eventInfoDetails.deleted.tooltip" })) : null }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventInfoDetails.date.startEndTime", defaultMessage: "ui.eventInfoDetails.date.startEndTime", values: {
+                                    date: intl.formatDate(scEvent.running ? scEvent.running_start_date : scEvent.next_start_date, {
+                                        weekday: 'long',
+                                        day: 'numeric',
+                                        year: 'numeric',
+                                        month: 'long'
+                                    }),
+                                    start: intl.formatDate(scEvent.running ? scEvent.running_start_date : scEvent.next_start_date, { hour: 'numeric', minute: 'numeric' })
+                                } }) })) })), hasInProgress && scEvent.active && scEvent.running && ((0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventInfoDetails.inProgress", defaultMessage: "ui.eventInfoDetails.inProgress" }) }, { children: (0, jsx_runtime_1.jsx)(material_1.Box, { className: classes.inProgress }) })))] }))), beforeRecurringInfo, hasRecurringInfo && scEvent.recurring !== types_1.SCEventRecurrenceType.NEVER && ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.iconTextWrapper }, { children: [!hideRecurringIcon && (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ fontSize: "small" }, { children: "frequency" })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.eventInfoDetails.frequency.${scEvent.recurring}.placeholder`, defaultMessage: `ui.eventInfoDetails.frequency.${scEvent.recurring}.placeholder` }) }))] }))), beforePrivacyInfo, hasPrivacyInfo && ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.iconTextWrapper }, { children: [!hidePrivacyIcon && (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ fontSize: "small" }, { children: scEvent.privacy === types_1.SCEventPrivacyType.PUBLIC ? 'public' : 'private' })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: privacy, defaultMessage: privacy }) })), "-", (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: location, defaultMessage: location }) }))] }))), beforeLocationInfo, hasLocationInfo && ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.iconTextWrapper }, { children: [!hideLocationIcon && ((0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ fontSize: "small" }, { children: scEvent.location === types_1.SCEventLocationType.ONLINE ? 'play_circle_outline' : 'add_location_alt' }))), scEvent.location === types_1.SCEventLocationType.ONLINE ? ((0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scEvent.link, target: "_blank", className: classes.link }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", className: classes.url }, { children: scEvent.link })) }))) : ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", className: classes.url }, { children: scEvent.geolocation })))] }))), beforeCreatedInfo, hasCreatedInfo && ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.creationWrapper }, { children: [!hideCreatedIcon && (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ fontSize: "small" }, { children: "create" })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventInfoDetails.date.create", defaultMessage: "ui.eventInfoDetails.date.create", values: {
+                                date: intl.formatDate(scEvent.created_at, {
                                     weekday: 'long',
                                     day: 'numeric',
                                     year: 'numeric',

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

@@ -25,6 +25,11 @@ export interface EventProps extends WidgetProps {
      * @default null
      */
     actions?: React.ReactNode;
+    /**
+     * Hide in progress
+     * @default false
+     */
+    hideInProgress?: boolean;
     /**
      * Hide participants
      * @default false

package/lib/esm/components/Event/Event.js

@@ -1,11 +1,12 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Avatar, Box, Button, CardActions, CardContent, CardMedia, Divider, Typography } from '@mui/material';
+import { Avatar, Box, Button, CardActions, CardContent, CardMedia, Chip, Divider, Typography } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import { useThemeProps } from '@mui/system';
 import { Link, SCRoutes, useSCFetchEvent, useSCRouting } from '@selfcommunity/react-core';
 import { SCEventLocationType } from '@selfcommunity/types';
 import classNames from 'classnames';
+import { useMemo } from 'react';
 import { FormattedMessage, useIntl } from 'react-intl';
 import BaseItem from '../../shared/BaseItem';
 import Calendar from '../../shared/Calendar';
@@ -23,6 +24,7 @@ const classes = {
     snippetRoot: `${PREFIX}-snippet-root`,
     detailImageWrapper: `${PREFIX}-detail-image-wrapper`,
     detailImage: `${PREFIX}-detail-image`,
+    detailInProgress: `${PREFIX}-detail-in-progress`,
     detailNameWrapper: `${PREFIX}-detail-name-wrapper`,
     detailName: `${PREFIX}-detail-name`,
     detailContent: `${PREFIX}-detail-content`,
@@ -32,11 +34,14 @@ const classes = {
     detailActions: `${PREFIX}-detail-actions`,
     previewImageWrapper: `${PREFIX}-preview-image-wrapper`,
     previewImage: `${PREFIX}-preview-image`,
+    previewInProgress: `${PREFIX}-preview-in-progress`,
     previewNameWrapper: `${PREFIX}-preview-name-wrapper`,
     previewName: `${PREFIX}-preview-name`,
     previewContent: `${PREFIX}-preview-content`,
     previewActions: `${PREFIX}-preview-actions`,
+    snippetImage: `${PREFIX}-snippet-image`,
     snippetAvatar: `${PREFIX}-snippet-avatar`,
+    snippetInProgress: `${PREFIX}-snippet-in-progress`,
     snippetPrimary: `${PREFIX}-snippet-primary`,
     snippetSecondary: `${PREFIX}-snippet-secondary`,
     snippetActions: `${PREFIX}-snippet-actions`
@@ -99,9 +104,10 @@ export default function Event(inProps) {
         props: inProps,
         name: PREFIX
     });
-    const { id = `event_object_${props.eventId ? props.eventId : props.event ? props.event.id : ''}`, eventId = null, event = null, className = null, template = SCEventTemplateType.SNIPPET, hideEventParticipants = false, hideEventPlanner = false, actions, EventParticipantsButtonComponentProps = {}, EventSkeletonComponentProps = {} } = props, rest = __rest(props, ["id", "eventId", "event", "className", "template", "hideEventParticipants", "hideEventPlanner", "actions", "EventParticipantsButtonComponentProps", "EventSkeletonComponentProps"]);
+    const { id = `event_object_${props.eventId ? props.eventId : props.event ? props.event.id : ''}`, eventId = null, event = null, className = null, template = SCEventTemplateType.SNIPPET, hideInProgress = false, hideEventParticipants = false, hideEventPlanner = false, actions, EventParticipantsButtonComponentProps = {}, EventSkeletonComponentProps = {} } = props, rest = __rest(props, ["id", "eventId", "event", "className", "template", "hideInProgress", "hideEventParticipants", "hideEventPlanner", "actions", "EventParticipantsButtonComponentProps", "EventSkeletonComponentProps"]);
     // STATE
     const { scEvent } = useSCFetchEvent({ id: eventId, event });
+    const inProgress = useMemo(() => scEvent && scEvent.active && scEvent.running, [scEvent]);
     // CONTEXT
     const scRoutingContext = useSCRouting();
     // HOOKS
@@ -117,13 +123,13 @@ export default function Event(inProps) {
      */
     let contentObj;
     if (template === SCEventTemplateType.DETAIL) {
-        contentObj = (_jsxs(DetailRoot, Object.assign({ className: classes.detailRoot }, { children: [_jsxs(Box, Object.assign({ className: classes.detailImageWrapper }, { children: [_jsx(CardMedia, { component: "img", image: scEvent.image_medium, alt: scEvent.name, className: classes.detailImage }), _jsx(Calendar, { day: new Date(scEvent.start_date).getDate() })] })), _jsxs(CardContent, Object.assign({ className: classes.detailContent }, { children: [_jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, scEvent), className: classes.detailNameWrapper }, { children: _jsx(Typography, Object.assign({ variant: "h3", className: classes.detailName }, { children: scEvent.name })) })), _jsx(EventInfoDetails, { event: scEvent }), !hideEventPlanner && (_jsx(User, { user: scEvent.managed_by, elevation: 0, secondary: _jsx(Typography, Object.assign({ variant: "caption" }, { children: _jsx(FormattedMessage, { id: "ui.myEventsWidget.planner", defaultMessage: "ui.myEventsWidget.planner" }) })), actions: _jsx(_Fragment, {}), className: classes.detailUser })), !hideEventParticipants && (_jsxs(_Fragment, { children: [_jsx(Divider, { className: classes.detailFirstDivider }), _jsx(EventParticipantsButton, Object.assign({ event: scEvent }, EventParticipantsButtonComponentProps))] })), _jsx(Divider, { className: classes.detailSecondDivider })] })), actions !== null && actions !== void 0 ? actions : (_jsx(CardActions, Object.assign({ className: classes.detailActions }, { children: _jsx(Button, Object.assign({ size: "small", variant: "outlined", component: Link, to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, scEvent) }, { children: _jsx(FormattedMessage, { defaultMessage: "ui.event.see", id: "ui.event.see" }) })) })))] })));
+        contentObj = (_jsxs(DetailRoot, Object.assign({ className: classes.detailRoot }, { children: [_jsxs(Box, Object.assign({ className: classes.detailImageWrapper }, { children: [_jsx(CardMedia, { component: "img", image: scEvent.image_medium, alt: scEvent.name, className: classes.detailImage }), !hideInProgress && inProgress && (_jsx(Chip, { size: "small", component: "div", label: _jsx(FormattedMessage, { id: "ui.event.inProgress", defaultMessage: "ui.event.inProgress" }), className: classes.detailInProgress })), _jsx(Calendar, { day: new Date(scEvent.start_date).getDate() })] })), _jsxs(CardContent, Object.assign({ className: classes.detailContent }, { children: [scEvent.active ? (_jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, scEvent), className: classes.detailNameWrapper }, { children: _jsx(Typography, Object.assign({ variant: "h3", className: classes.detailName }, { children: scEvent.name })) }))) : (_jsx(Box, Object.assign({ className: classes.detailNameWrapper }, { children: _jsx(Typography, Object.assign({ variant: "h3", className: classes.detailName }, { children: scEvent.name })) }))), _jsx(EventInfoDetails, { event: scEvent }), !hideEventPlanner && (_jsx(User, { user: scEvent.managed_by, elevation: 0, secondary: _jsx(Typography, Object.assign({ variant: "caption" }, { children: _jsx(FormattedMessage, { id: "ui.myEventsWidget.planner", defaultMessage: "ui.myEventsWidget.planner" }) })), actions: _jsx(_Fragment, {}), className: classes.detailUser })), !hideEventParticipants && (_jsxs(_Fragment, { children: [_jsx(Divider, { className: classes.detailFirstDivider }), _jsx(EventParticipantsButton, Object.assign({ event: scEvent }, EventParticipantsButtonComponentProps))] })), _jsx(Divider, { className: classes.detailSecondDivider })] })), actions !== null && actions !== void 0 ? actions : (_jsx(CardActions, Object.assign({ className: classes.detailActions }, { children: _jsx(Button, Object.assign({ size: "small", variant: "outlined", component: Link, to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, scEvent) }, { children: _jsx(FormattedMessage, { defaultMessage: "ui.event.see", id: "ui.event.see" }) })) })))] })));
     }
     else if (template === SCEventTemplateType.PREVIEW) {
-        contentObj = (_jsxs(PreviewRoot, Object.assign({ className: classes.previewRoot }, { children: [_jsx(Box, Object.assign({ position: "relative", className: classes.previewImageWrapper }, { children: _jsx(CardMedia, { component: "img", height: "100px", image: scEvent.image_medium, alt: scEvent.name, className: classes.previewImage }) })), _jsxs(CardContent, Object.assign({ className: classes.previewContent }, { children: [_jsx(EventInfoDetails, { event: scEvent, hidePrivacyIcon: true, hasLocationInfo: false, beforePrivacyInfo: _jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, scEvent), className: classes.previewNameWrapper }, { children: _jsx(Typography, Object.assign({ variant: "h5", className: classes.previewName }, { children: scEvent.name })) })) }), !hideEventParticipants && _jsx(EventParticipantsButton, Object.assign({ event: scEvent, hideCaption: true }, EventParticipantsButtonComponentProps))] })), actions !== null && actions !== void 0 ? actions : (_jsx(CardActions, Object.assign({ className: classes.previewActions }, { children: _jsx(Button, Object.assign({ size: "small", variant: "outlined", component: Link, to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, scEvent) }, { children: _jsx(FormattedMessage, { defaultMessage: "ui.event.see", id: "ui.event.see" }) })) })))] })));
+        contentObj = (_jsxs(PreviewRoot, Object.assign({ className: classes.previewRoot }, { children: [_jsxs(Box, Object.assign({ position: "relative", className: classes.previewImageWrapper }, { children: [_jsx(CardMedia, { component: "img", image: scEvent.image_medium, alt: scEvent.name, className: classes.previewImage }), !hideInProgress && inProgress && (_jsx(Chip, { size: "small", component: "div", label: _jsx(FormattedMessage, { id: "ui.event.inProgress", defaultMessage: "ui.event.inProgress" }), className: classes.previewInProgress }))] })), _jsxs(CardContent, Object.assign({ className: classes.previewContent }, { children: [_jsx(EventInfoDetails, { event: scEvent, hidePrivacyIcon: true, hasLocationInfo: false, beforePrivacyInfo: _jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, scEvent), className: classes.previewNameWrapper }, { children: _jsx(Typography, Object.assign({ variant: "h5", className: classes.previewName }, { children: scEvent.name })) })) }), !hideEventParticipants && _jsx(EventParticipantsButton, Object.assign({ event: scEvent, hideCaption: true }, EventParticipantsButtonComponentProps))] })), actions !== null && actions !== void 0 ? actions : (_jsx(CardActions, Object.assign({ className: classes.previewActions }, { children: _jsx(Button, Object.assign({ size: "small", variant: "outlined", component: Link, to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, scEvent) }, { children: _jsx(FormattedMessage, { defaultMessage: "ui.event.see", id: "ui.event.see" }) })) })))] })));
     }
     else {
-        contentObj = (_jsx(SnippetRoot, { elevation: 0, square: true, disableTypography: true, className: classes.snippetRoot, image: _jsx(Avatar, { variant: "square", alt: scEvent.name, src: scEvent.image_medium, className: classes.snippetAvatar }), primary: _jsxs(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, scEvent), className: classes.snippetPrimary }, { children: [_jsx(Typography, Object.assign({ component: "span" }, { children: `${intl.formatDate(scEvent.start_date, {
+        contentObj = (_jsx(SnippetRoot, { elevation: 0, square: true, disableTypography: true, className: classes.snippetRoot, image: _jsxs(Box, Object.assign({ className: classes.snippetImage }, { children: [_jsx(Avatar, { variant: "square", alt: scEvent.name, src: scEvent.image_medium, className: classes.snippetAvatar }), ' ', !hideInProgress && inProgress && (_jsx(Chip, { size: "small", component: "div", label: _jsx(FormattedMessage, { id: "ui.event.inProgress", defaultMessage: "ui.event.inProgress" }), className: classes.snippetInProgress }))] })), primary: _jsxs(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, scEvent), className: classes.snippetPrimary }, { children: [_jsx(Typography, Object.assign({ component: "span" }, { children: `${intl.formatDate(scEvent.start_date, {
                             weekday: 'long',
                             month: 'long',
                             day: 'numeric'

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

@@ -118,7 +118,7 @@ export default function EventHeader(inProps) {
     /**
      * Handles callback subscribe/unsubscribe event
      */
-    const handleSubscribe = (event, status) => {
+    const handleSubscribe = (_event, status) => {
         setSCEvent(Object.assign({}, scEvent, { subscription_status: status }));
     };
     /**

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

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

package/lib/esm/components/EventMembersWidget/EventMembersWidget.js

@@ -17,6 +17,7 @@ import Widget from '../Widget';
 import { PREFIX } from './constants';
 import Skeleton from './Skeleton';
 import TabContentComponent from './TabContentComponent';
+import { TabValueEnum } from './types';
 const classes = {
     root: `${PREFIX}-root`,
     content: `${PREFIX}-content`,
@@ -59,18 +60,29 @@ export default function EventMembersWidget(inProps) {
         cacheStrategy,
         visibleItems: limit
     }, stateWidgetInitializer);
+    const [participantsCount, setParticipantsCount] = useState(0);
     const [invitedCount, setInvitedCount] = useState(0);
     const [requestsCount, setRequestsCount] = useState(0);
     const [requestsUsers, setRequestsUsers] = useState([]);
     const [tabValue, setTabValue] = useState('1');
-    const [refresh, setRefresh] = useState(false);
+    const [refresh, setRefresh] = useState(null);
     // CONTEXT
     const scUserContext = useSCUser();
     // HOOKS
     const { scEvent } = useSCFetchEvent({ id: eventId, event });
     // CONSTS
     const hasAllow = useMemo(() => { var _a; return ((_a = scUserContext.user) === null || _a === void 0 ? void 0 : _a.id) === (scEvent === null || scEvent === void 0 ? void 0 : scEvent.managed_by.id); }, [scUserContext, scEvent]);
-    const title = useMemo(() => (tabValue === '1' ? 'ui.eventMembersWidget.participants' : 'ui.eventMembersWidget.invited'), [tabValue]);
+    const title = useMemo(() => {
+        switch (tabValue) {
+            case TabValueEnum.THREE:
+                return 'ui.eventMembersWidget.requests';
+            case TabValueEnum.TWO:
+                return 'ui.eventMembersWidget.invited';
+            case TabValueEnum.ONE:
+            default:
+                return 'ui.eventMembersWidget.participants';
+        }
+    }, [tabValue]);
     // CALLBACKS
     const _initParticipants = useCallback(() => {
         if (!participants.initialized && !participants.isLoadingNext) {
@@ -78,13 +90,14 @@ export default function EventMembersWidget(inProps) {
             EventService.getUsersGoingToEvent(scEvent.id, Object.assign({}, endpointQueryParams))
                 .then((payload) => {
                 dispatchParticipants({ type: actionWidgetTypes.LOAD_NEXT_SUCCESS, payload: Object.assign(Object.assign({}, payload), { initialized: true }) });
+                setParticipantsCount(payload.count);
             })
                 .catch((error) => {
                 dispatchParticipants({ type: actionWidgetTypes.LOAD_NEXT_FAILURE, payload: { errorLoadNext: error } });
                 Logger.error(SCOPE_SC_UI, error);
             });
         }
-    }, [participants.isLoadingNext, participants.initialized, dispatchParticipants, scEvent]);
+    }, [participants.isLoadingNext, participants.initialized, scEvent]);
     const _initInvited = useCallback(() => {
         if (!invited.initialized && !invited.isLoadingNext && hasAllow) {
             dispatchInvited({ type: actionWidgetTypes.LOADING_NEXT });
@@ -98,7 +111,7 @@ export default function EventMembersWidget(inProps) {
                 Logger.error(SCOPE_SC_UI, error);
             });
         }
-    }, [invited.isLoadingNext, invited.initialized, dispatchInvited, scUserContext.user, scEvent]);
+    }, [invited.isLoadingNext, invited.initialized, scUserContext.user, scEvent]);
     const _initRequests = useCallback(() => {
         if (!requests.initialized && !requests.isLoadingNext && hasAllow) {
             dispatchRequests({ type: actionWidgetTypes.LOADING_NEXT });
@@ -113,15 +126,19 @@ export default function EventMembersWidget(inProps) {
                 Logger.error(SCOPE_SC_UI, error);
             });
         }
-    }, [requests.isLoadingNext, requests.initialized, dispatchRequests, scUserContext.user, scEvent]);
+    }, [requests.isLoadingNext, requests.initialized, scUserContext.user, scEvent]);
     // EFFECTS
     useEffect(() => {
         let _t;
         if (scUserContext.user && scEvent) {
             _t = setTimeout(() => {
-                if (refresh) {
+                if (refresh === TabValueEnum.ONE) {
+                    _initParticipants();
+                    setRefresh(null);
+                }
+                else if (refresh === TabValueEnum.TWO) {
                     _initInvited();
-                    setRefresh(false);
+                    setRefresh(null);
                 }
                 else {
                     _initParticipants();
@@ -138,6 +155,15 @@ export default function EventMembersWidget(inProps) {
     const handleTabChange = useCallback((_evt, newTabValue) => {
         setTabValue(newTabValue);
     }, []);
+    const handleRefresh = useCallback((_tabValue) => {
+        if (_tabValue === TabValueEnum.ONE) {
+            dispatchParticipants({ type: actionWidgetTypes.RESET });
+        }
+        else if (_tabValue === TabValueEnum.TWO) {
+            dispatchInvited({ type: actionWidgetTypes.RESET });
+        }
+        setRefresh(_tabValue);
+    }, []);
     if (!scEvent && !participants.initialized) {
         return _jsx(Skeleton, {});
     }
@@ -145,14 +171,14 @@ export default function EventMembersWidget(inProps) {
     if (!scEvent) {
         return _jsx(HiddenPlaceholder, {});
     }
-    return (_jsx(Root, Object.assign({ className: classes.root }, rest, { children: _jsxs(CardContent, Object.assign({ className: classes.content }, { children: [_jsx(Typography, Object.assign({ variant: "h5", className: classes.title }, { children: _jsx(FormattedMessage, { id: title, defaultMessage: title }) })), _jsxs(TabContext, Object.assign({ value: tabValue }, { children: [_jsxs(TabList, Object.assign({ className: classes.tabsWrapper, onChange: handleTabChange, textColor: "primary", indicatorColor: "primary", variant: "fullWidth" }, { children: [_jsx(Tab, { label: _jsxs(Stack, Object.assign({ className: classes.tabLabelWrapper }, { children: [_jsx(Typography, Object.assign({ variant: "h3" }, { children: participants.count })), _jsx(Typography, Object.assign({ variant: "subtitle2" }, { children: _jsx(FormattedMessage, { id: "ui.eventMembersWidget.participants", defaultMessage: "ui.eventMembersWidget.participants" }) }))] })), value: "1" }), hasAllow && (_jsx(Tab, { label: _jsxs(Stack, Object.assign({ className: classes.tabLabelWrapper }, { children: [_jsx(Typography, Object.assign({ variant: "h3" }, { children: invitedCount })), _jsx(Typography, Object.assign({ variant: "subtitle2" }, { children: _jsx(FormattedMessage, { id: "ui.eventMembersWidget.invited", defaultMessage: "ui.eventMembersWidget.invited" }) }))] })), value: "2" })), hasAllow && (_jsx(Tab, { label: _jsxs(Stack, Object.assign({ className: classes.tabLabelWrapper }, { children: [_jsx(Typography, Object.assign({ variant: "h3" }, { children: requestsCount })), _jsx(Typography, Object.assign({ variant: "subtitle2" }, { children: _jsx(FormattedMessage, { id: "ui.eventMembersWidget.requests", defaultMessage: "ui.eventMembersWidget.requests" }) }))] })), value: "3" }))] })), _jsx(TabPanel, Object.assign({ value: "1", className: classes.tabPanel }, { children: _jsx(TabContentComponent, { tabValue: "1", state: participants, dispatch: dispatchParticipants, userProps: userProps, dialogProps: dialogProps }) })), hasAllow && (_jsx(TabPanel, Object.assign({ value: "2", className: classes.tabPanel }, { children: _jsx(TabContentComponent, { tabValue: "2", state: invited, dispatch: dispatchInvited, userProps: userProps, dialogProps: dialogProps, actionProps: {
+    return (_jsx(Root, Object.assign({ className: classes.root }, rest, { children: _jsxs(CardContent, Object.assign({ className: classes.content }, { children: [_jsx(Typography, Object.assign({ variant: "h5", className: classes.title }, { children: _jsx(FormattedMessage, { id: title, defaultMessage: title }) })), _jsxs(TabContext, Object.assign({ value: tabValue }, { children: [_jsxs(TabList, Object.assign({ className: classes.tabsWrapper, onChange: handleTabChange, textColor: "primary", indicatorColor: "primary", variant: "fullWidth" }, { children: [_jsx(Tab, { label: _jsxs(Stack, Object.assign({ className: classes.tabLabelWrapper }, { children: [_jsx(Typography, Object.assign({ variant: "h3" }, { children: participantsCount })), _jsx(Typography, Object.assign({ variant: "subtitle2" }, { children: _jsx(FormattedMessage, { id: "ui.eventMembersWidget.participants", defaultMessage: "ui.eventMembersWidget.participants" }) }))] })), value: TabValueEnum.ONE }), hasAllow && (_jsx(Tab, { label: _jsxs(Stack, Object.assign({ className: classes.tabLabelWrapper }, { children: [_jsx(Typography, Object.assign({ variant: "h3" }, { children: invitedCount })), _jsx(Typography, Object.assign({ variant: "subtitle2" }, { children: _jsx(FormattedMessage, { id: "ui.eventMembersWidget.invited", defaultMessage: "ui.eventMembersWidget.invited" }) }))] })), value: TabValueEnum.TWO })), hasAllow && (_jsx(Tab, { label: _jsxs(Stack, Object.assign({ className: classes.tabLabelWrapper }, { children: [_jsx(Typography, Object.assign({ variant: "h3" }, { children: requestsCount })), _jsx(Typography, Object.assign({ variant: "subtitle2" }, { children: _jsx(FormattedMessage, { id: "ui.eventMembersWidget.requests", defaultMessage: "ui.eventMembersWidget.requests" }) }))] })), value: TabValueEnum.THREE }))] })), _jsx(TabPanel, Object.assign({ value: TabValueEnum.ONE, className: classes.tabPanel }, { children: _jsx(TabContentComponent, { tabValue: TabValueEnum.ONE, state: participants, dispatch: dispatchParticipants, userProps: userProps, dialogProps: dialogProps, handleRefresh: handleRefresh }) })), hasAllow && (_jsx(TabPanel, Object.assign({ value: TabValueEnum.TWO, className: classes.tabPanel }, { children: _jsx(TabContentComponent, { tabValue: TabValueEnum.TWO, state: invited, dispatch: dispatchInvited, userProps: userProps, dialogProps: dialogProps, actionProps: {
                                     scEvent,
                                     setCount: setInvitedCount
-                                }, setRefresh: setRefresh }) }))), hasAllow && (_jsx(TabPanel, Object.assign({ value: "3", className: classes.tabPanel }, { children: _jsx(TabContentComponent, { tabValue: "3", state: requests, dispatch: dispatchRequests, userProps: userProps, dialogProps: dialogProps, actionProps: {
+                                }, handleRefresh: handleRefresh }) }))), hasAllow && (_jsx(TabPanel, Object.assign({ value: TabValueEnum.THREE, className: classes.tabPanel }, { children: _jsx(TabContentComponent, { tabValue: TabValueEnum.THREE, state: requests, dispatch: dispatchRequests, userProps: userProps, dialogProps: dialogProps, actionProps: {
                                     scEvent,
                                     count: requestsCount,
                                     setCount: setRequestsCount,
                                     users: requestsUsers,
                                     setUsers: setRequestsUsers
-                                } }) })))] }))] })) })));
+                                }, handleRefresh: handleRefresh }) })))] }))] })) })));
 }

package/lib/esm/components/EventMembersWidget/TabContentComponent.d.ts

@@ -2,8 +2,9 @@ import { SCEventType, SCUserType } from '@selfcommunity/types';
 import { Dispatch, SetStateAction } from 'react';
 import { BaseDialogProps } from '../../shared/BaseDialog';
 import { UserProps } from '../User';
+import { TabValueType } from './types';
 interface TabComponentProps {
-    tabValue: '1' | '2' | '3';
+    tabValue: TabValueType;
     state: any;
     dispatch: Dispatch<any>;
     /**
@@ -23,7 +24,7 @@ interface TabComponentProps {
         users?: SCUserType[];
         setUsers?: Dispatch<SetStateAction<SCUserType[]>>;
     };
-    setRefresh?: Dispatch<SetStateAction<boolean>>;
+    handleRefresh?: (tabValue: TabValueType) => void;
 }
 export default function TabContentComponent(props: TabComponentProps): JSX.Element;
 export {};

package/lib/esm/components/EventMembersWidget/TabContentComponent.js

@@ -3,9 +3,11 @@ import { Button, List, ListItem, styled, Typography } from '@mui/material';
 import { Endpoints, http } from '@selfcommunity/api-services';
 import { Logger } from '@selfcommunity/utils';
 import { useSnackbar } from 'notistack';
-import { useCallback, useMemo, useState } from 'react';
+import PubSub from 'pubsub-js';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { SCOPE_SC_UI } from '../../constants/Errors';
+import { SCGroupEventType, SCTopicType } from '../../constants/PubSub';
 import BaseDialog from '../../shared/BaseDialog';
 import InfiniteScroll from '../../shared/InfiniteScroll';
 import { actionWidgetTypes } from '../../utils/widget';
@@ -14,6 +16,7 @@ import EventInviteButton from '../EventInviteButton';
 import InviteUserEventButton from '../InviteUserEventButton';
 import User, { UserSkeleton } from '../User';
 import { PREFIX } from './constants';
+import { TabValueEnum } from './types';
 const classes = {
     actionButton: `${PREFIX}-action-button`,
     eventButton: `${PREFIX}-event-button`,
@@ -28,13 +31,25 @@ const DialogRoot = styled(BaseDialog, {
 })(() => ({}));
 export default function TabContentComponent(props) {
     // PROPS
-    const { state, dispatch, userProps, dialogProps, actionProps, setRefresh, tabValue } = props;
+    const { tabValue, state, dispatch, userProps, dialogProps, actionProps, handleRefresh } = props;
     // STATE
     const [openDialog, setOpenDialog] = useState(false);
+    // REFS
+    const updatesInvited = useRef(null);
+    const updatesParticipants = useRef(null);
     // HOOKS
     const { enqueueSnackbar } = useSnackbar();
     // CONSTS
-    const users = useMemo(() => (tabValue === '3' ? actionProps === null || actionProps === void 0 ? void 0 : actionProps.users : state.results), [tabValue, actionProps, state]);
+    const users = useMemo(() => (tabValue === TabValueEnum.THREE ? actionProps === null || actionProps === void 0 ? void 0 : actionProps.users : state.results), [tabValue, actionProps, state]);
+    // EFFECTS
+    useEffect(() => {
+        updatesInvited.current = PubSub.subscribe(`${SCTopicType.EVENT}.${SCGroupEventType.INVITE_MEMBER}`, handleInviteMember);
+        updatesParticipants.current = PubSub.subscribe(`${SCTopicType.EVENT}.${SCGroupEventType.ADD_MEMBER}`, handleToggleMember);
+        return () => {
+            updatesInvited.current && PubSub.unsubscribe(updatesInvited.current);
+            updatesParticipants.current && PubSub.unsubscribe(updatesParticipants.current);
+        };
+    }, []);
     // HANDLERS
     /**
      * Handles pagination
@@ -52,13 +67,19 @@ export default function TabContentComponent(props) {
             .catch((error) => {
             Logger.error(SCOPE_SC_UI, error);
         });
-    }, [dispatch, state.next, state.isLoadingNext, state.initialized]);
+    }, [state.next, state.isLoadingNext, state.initialized]);
     const handleToggleDialogOpen = useCallback(() => {
         setOpenDialog((prev) => !prev);
     }, []);
+    const handleToggleMember = useCallback(() => {
+        handleRefresh === null || handleRefresh === void 0 ? void 0 : handleRefresh(TabValueEnum.ONE);
+    }, []);
+    const handleInviteMember = useCallback(() => {
+        handleRefresh === null || handleRefresh === void 0 ? void 0 : handleRefresh(TabValueEnum.TWO);
+    }, []);
     const getActionsComponent = useCallback((userId) => {
-        if (tabValue === '2' && actionProps) {
-            const handleInvitations = (invited) => {
+        if (tabValue === TabValueEnum.TWO && actionProps) {
+            const _handleInvitations = (invited) => {
                 var _a, _b;
                 if (invited) {
                     (_a = actionProps.setCount) === null || _a === void 0 ? void 0 : _a.call(actionProps, (prev) => prev - 1);
@@ -67,9 +88,9 @@ export default function TabContentComponent(props) {
                     (_b = actionProps.setCount) === null || _b === void 0 ? void 0 : _b.call(actionProps, (prev) => prev + 1);
                 }
             };
-            return _jsx(InviteUserEventButton, { event: actionProps.scEvent, userId: userId, handleInvitations: handleInvitations });
+            return _jsx(InviteUserEventButton, { event: actionProps.scEvent, userId: userId, handleInvitations: _handleInvitations });
         }
-        else if (tabValue === '3' && actionProps) {
+        else if (tabValue === TabValueEnum.THREE && actionProps) {
             const handleConfirm = (id) => {
                 if (id) {
                     actionProps.setCount((prev) => prev - 1);
@@ -89,22 +110,21 @@ export default function TabContentComponent(props) {
             return _jsx(AcceptRequestUserEventButton, { event: actionProps.scEvent, userId: userId, handleConfirm: handleConfirm });
         }
         return undefined;
-    }, [tabValue, actionProps, dispatch, setRefresh]);
-    if (tabValue === '1' && (actionProps === null || actionProps === void 0 ? void 0 : actionProps.count) === 0) {
+    }, [tabValue, actionProps]);
+    if (tabValue === TabValueEnum.ONE && (actionProps === null || actionProps === void 0 ? void 0 : actionProps.count) === 0) {
         return (_jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.eventMembersWidget.noParticipants", defaultMessage: "ui.eventMembersWidget.noParticipants" }) })));
     }
-    if (tabValue === '2' && state.count === 0 && actionProps) {
+    else if (tabValue === TabValueEnum.TWO && state.count === 0 && actionProps) {
         const date = actionProps.scEvent.end_date || actionProps.scEvent.start_date;
         const disabled = new Date(date).getTime() < new Date().getTime();
         const handleInvitations = (invited) => {
             if (invited) {
-                dispatch({ type: actionWidgetTypes.RESET });
-                setRefresh(true);
+                handleRefresh === null || handleRefresh === void 0 ? void 0 : handleRefresh(tabValue);
             }
         };
         return (_jsx(EventInviteButton, { event: actionProps.scEvent, className: classes.eventButton, handleInvitations: handleInvitations, disabled: disabled }));
     }
-    if (tabValue === '3' && (actionProps === null || actionProps === void 0 ? void 0 : actionProps.count) === 0) {
+    else if (tabValue === TabValueEnum.THREE && (actionProps === null || actionProps === void 0 ? void 0 : actionProps.count) === 0) {
         return (_jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.eventMembersWidget.noOtherRequests", defaultMessage: "ui.eventMembersWidget.noOtherRequests" }) })));
     }
     return (_jsxs(_Fragment, { children: [_jsx(List, { children: users === null || users === void 0 ? void 0 : users.map((user) => (_jsx(ListItem, { children: _jsx(User, Object.assign({ elevation: 0, user: user }, userProps, { actions: getActionsComponent(user.id) })) }, user.id))) }), state.count > state.visibleItems && (_jsx(Button, Object.assign({ onClick: handleToggleDialogOpen, className: classes.actionButton }, { children: _jsx(Typography, Object.assign({ variant: "caption" }, { children: _jsx(FormattedMessage, { id: "ui.eventMembersWidget.showAll", defaultMessage: "ui.eventMembersWidget.showAll" }) })) }))), openDialog && (_jsx(DialogRoot, Object.assign({ className: classes.dialogRoot, title: _jsx(FormattedMessage, { defaultMessage: "ui.eventMembersWidget.title", id: "ui.eventMembersWidget.title" }), onClose: handleToggleDialogOpen, open: openDialog }, dialogProps, { children: _jsx(InfiniteScroll, Object.assign({ dataLength: state.results.length, next: handleNext, hasMoreNext: Boolean(state.next), loaderNext: _jsx(UserSkeleton, Object.assign({ elevation: 0 }, userProps)), className: classes.infiniteScroll, endMessage: _jsx(Typography, Object.assign({ className: classes.endMessage }, { children: _jsx(FormattedMessage, { id: "ui.eventMembersWidget.noMoreResults", defaultMessage: "ui.eventMembersWidget.noMoreResults" }) })) }, { children: _jsx(List, { children: state.results.map((user) => (_jsx(ListItem, { children: _jsx(User, Object.assign({ elevation: 0, user: user }, userProps)) }, user.id))) }) })) })))] }));

package/lib/esm/components/EventMembersWidget/types.d.ts

@@ -0,0 +1,6 @@
+export declare type TabValueType = '1' | '2' | '3';
+export declare enum TabValueEnum {
+    ONE = "1",
+    TWO = "2",
+    THREE = "3"
+}

package/lib/esm/components/EventMembersWidget/types.js

@@ -0,0 +1,6 @@
+export var TabValueEnum;
+(function (TabValueEnum) {
+    TabValueEnum["ONE"] = "1";
+    TabValueEnum["TWO"] = "2";
+    TabValueEnum["THREE"] = "3";
+})(TabValueEnum || (TabValueEnum = {}));

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

@@ -1,4 +1,4 @@
-import { SCEventType, SCUserType } from '@selfcommunity/types';
+import { SCEventSubscriptionStatusType, SCEventType, SCUserType } from '@selfcommunity/types';
 export interface EventSubscribeButtonProps {
     /**
      * Overrides or extends the styles applied to the component.
@@ -25,7 +25,7 @@ export interface EventSubscribeButtonProps {
      * @param user
      * @param joined
      */
-    onSubscribe?: (event: SCEventType, status: string | null) => any;
+    onSubscribe?: (event: SCEventType, status: SCEventSubscriptionStatusType | null) => any;
     /**
      * Others properties
      */

package/lib/esm/components/EventSubscribeButton/EventSubscribeButton.js

@@ -8,9 +8,11 @@ import { getEventStatus, useSCContext, useSCFetchEvent, useSCUser } from '@selfc
 import { SCEventPrivacyType, SCEventSubscriptionStatusType } from '@selfcommunity/types';
 import { CacheStrategies, Logger } from '@selfcommunity/utils';
 import classNames from 'classnames';
-import React, { useEffect, useMemo, useState } from 'react';
+import PubSub from 'pubsub-js';
+import { useEffect, useMemo, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { SCOPE_SC_UI } from '../../constants/Errors';
+import { SCGroupEventType, SCTopicType } from '../../constants/PubSub';
 const PREFIX = 'SCEventSubscribeButton';
 const classes = {
     requestRoot: `${PREFIX}-request-root`,
@@ -81,7 +83,7 @@ export default function EventSubscribeButton(inProps) {
     // STATE
     const [status, setStatus] = useState(undefined);
     const [loading, setLoading] = useState(false);
-    const [anchorEl, setAnchorEl] = React.useState(null);
+    const [anchorEl, setAnchorEl] = useState(null);
     const open = Boolean(anchorEl);
     // CONTEXT
     const scContext = useSCContext();
@@ -116,15 +118,16 @@ export default function EventSubscribeButton(inProps) {
     const toggleEventAttendance = (eventStatus) => {
         setLoading(true);
         const isGoing = eventStatus === SCEventSubscriptionStatusType.GOING ||
-            !scEvent.subscription_status ||
+            !(scEvent === null || scEvent === void 0 ? void 0 : scEvent.subscription_status) ||
             (scEvent === null || scEvent === void 0 ? void 0 : scEvent.subscription_status) === SCEventSubscriptionStatusType.INVITED;
         const toggleAction = isGoing
-            ? scEventsManager.toggleEventAttendance(scEvent, user ? user === null || user === void 0 ? void 0 : user.id : null)
+            ? scEventsManager.toggleEventAttendance(scEvent, (user === null || user === void 0 ? void 0 : user.id) || null)
             : scEventsManager.toggleEventNonattendance(scEvent);
         toggleAction
             .then(() => {
-            onSubscribe && onSubscribe(scEvent, getEventStatus(scEvent, isGoing));
+            onSubscribe === null || onSubscribe === void 0 ? void 0 : onSubscribe(scEvent, getEventStatus(scEvent, isGoing));
             setLoading(false);
+            PubSub.publish(`${SCTopicType.EVENT}.${SCGroupEventType.ADD_MEMBER}`, scUserContext.user);
         })
             .catch((e) => {
             Logger.error(SCOPE_SC_UI, e);

package/lib/esm/components/FeedObject/FeedObject.js

@@ -37,6 +37,7 @@ import { MAX_SUMMARY_LENGTH } from '../../constants/Feed';
 import Composer from '../Composer';
 import FeedObjectMediaPreview from '../FeedObjectMediaPreview';
 import { PREFIX } from './constants';
+import { MEDIA_EMBED_SC_SHARED_EVENT } from '../../constants/Media';
 const messages = defineMessages({
     visibleToAll: {
         id: 'ui.feedObject.visibleToAll',
@@ -134,7 +135,7 @@ const Root = styled(Widget, {
  * @param inProps
  */
 export default function FeedObject(inProps) {
-    var _a;
+    var _a, _b, _c, _d, _f, _g, _h, _j, _k, _l, _m;
     // PROPS
     const props = useThemeProps({
         props: inProps,
@@ -163,6 +164,8 @@ export default function FeedObject(inProps) {
     const [isReplying, setIsReplying] = useState(false);
     const [selectedActivities, setSelectedActivities] = useState(getInitialSelectedActivitiesType());
     const [expanded, setExpanded] = useState(summaryExpanded);
+    const hasEvent = useMemo(() => { var _a; return (obj === null || obj === void 0 ? void 0 : obj.medias.length) && ((_a = obj.medias[0].embed) === null || _a === void 0 ? void 0 : _a.embed_type) === MEDIA_EMBED_SC_SHARED_EVENT; }, [obj === null || obj === void 0 ? void 0 : obj.medias]);
+    const _hideFollowAction = useMemo(() => { var _a, _b, _c, _d; return hideFollowAction || (hasEvent && ((_d = (_c = (_b = (_a = obj === null || obj === void 0 ? void 0 : obj.medias) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.embed) === null || _c === void 0 ? void 0 : _c.metadata) === null || _d === void 0 ? void 0 : _d.active) === false); }, [hideFollowAction, hasEvent, obj]);
     // INTL
     const intl = useIntl();
     /**
@@ -428,7 +431,8 @@ export default function FeedObject(inProps) {
         template === SCFeedObjectTemplateType.SEARCH) {
         objElement = (_jsx(React.Fragment, { children: obj ? (_jsxs(Box, Object.assign({ className: classNames({ [classes.deleted]: obj && obj.deleted }) }, { children: [obj.categories.length > 0 && (_jsxs("div", Object.assign({ className: classes.category }, { children: [_jsxs(_Fragment, { children: [obj.group && (_jsx("div", Object.assign({ className: classes.group }, { children: _jsx(Chip, { color: "secondary", size: "small", icon: _jsx(Icon, { children: "groups" }), component: Link, to: scRoutingContext.url(SCRoutes.GROUP_ROUTE_NAME, obj.group), clickable: true }, obj.group.id) }))), obj.event && (_jsx("div", Object.assign({ className: classes.event }, { children: _jsx(Chip, { color: "secondary", size: "small", label: obj.event.name, icon: _jsx(Icon, { children: "CalendarIcon" }), component: Link, to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, obj.event), clickable: true }, obj.event.id) })))] }), obj.categories.map((c) => (_jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.CATEGORY_ROUTE_NAME, c) }, { children: _jsx(Typography, Object.assign({ variant: "overline" }, { children: c.name })) }), c.id)))] }))), obj.group && !obj.categories.length && (_jsx("div", Object.assign({ className: classes.group }, { children: _jsx(Chip, { color: "secondary", size: "small", icon: _jsx(Icon, { children: "groups" }), label: obj.group.name, component: Link, to: scRoutingContext.url(SCRoutes.GROUP_ROUTE_NAME, obj.group), clickable: true }, obj.group.id) }))), obj.event && !obj.categories.length && (_jsx("div", Object.assign({ className: classes.event }, { children: _jsx(Chip, { color: "secondary", size: "small", icon: _jsx(Icon, { children: "CalendarIcon" }), label: obj.event.name, component: Link, to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, obj.event), clickable: true }, obj.event.id) }))), _jsx(CardHeader, { className: classes.header, avatar: _jsx(Link, Object.assign({}, (!obj.author.deleted && { to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, obj.author) }), { onClick: obj.author.deleted ? () => setOpenAlert(true) : null }, { children: _jsx(UserAvatar, Object.assign({ hide: !obj.author.community_badge }, { children: _jsx(Avatar, Object.assign({ "aria-label": "recipe", src: obj.author.avatar, className: classes.avatar }, { children: obj.author.username })) })) })), title: _jsx(Link, Object.assign({}, (!obj.author.deleted && { to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, obj.author) }), { onClick: obj.author.deleted ? () => setOpenAlert(true) : null, className: classes.username }, { children: obj.author.username })), subheader: _jsxs(_Fragment, { children: [_jsx(Link, Object.assign({ to: scRoutingContext.url(getContributionRouteName(obj), getRouteData(obj)), className: classes.activityAt }, { children: _jsx(DateTimeAgo, { component: 'span', date: obj.added_at }) })), obj.location && (_jsxs(_Fragment, { children: [_jsx(Bullet, {}), _jsxs(Box, Object.assign({ className: classes.location }, { children: [_jsx(Icon, { children: "add_location_alt" }), (_a = obj.location) === null || _a === void 0 ? void 0 : _a.location] }))] })), _jsx(Bullet, {}), _jsx(Box, Object.assign({ className: classes.tag }, { children: obj.addressing.length > 0 ? (_jsx(Tags, { tags: obj.addressing, TagChipProps: { disposable: false, clickable: false } })) : obj.group ? (_jsx(Tooltip, Object.assign({ title: `${intl.formatMessage(messages.visibleToGroup, { group: obj.group.name })}` }, { children: _jsx(Icon, Object.assign({ color: "disabled", fontSize: "small" }, { children: "groups" })) }))) : (_jsx(Tooltip, Object.assign({ title: `${intl.formatMessage(messages.visibleToAll)}` }, { children: _jsx(Icon, Object.assign({ color: "disabled", fontSize: "small" }, { children: "public" })) }))) }))] }), action: renderHeaderAction() }), _jsxs(CardContent, Object.assign({ classes: { root: classes.content } }, { children: [_jsx(Box, Object.assign({ className: classes.titleSection }, { children: 'title' in obj && (_jsx(_Fragment, { children: template === SCFeedObjectTemplateType.DETAIL ? (_jsx(Typography, Object.assign({ variant: "body1", gutterBottom: true, className: classes.title }, { children: obj.title }))) : (_jsx(Link, Object.assign({ to: scRoutingContext.url(getContributionRouteName(obj), getRouteData(obj)) }, { children: _jsx(Typography, Object.assign({ variant: "body1", gutterBottom: true, className: classes.title }, { children: obj.title })) }))) })) })), _jsx(Box, Object.assign({ className: classes.textSection }, { children: getContributionSummary(obj, template) })), _jsx(Box, Object.assign({ className: classes.mediasSection }, { children: _jsx(FeedObjectMediaPreview, Object.assign({ medias: obj.medias }, FeedObjectMediaPreviewProps)) })), _jsx(Box, Object.assign({ className: classes.pollsSection }, { children: obj['poll'] && (_jsx(PollObject, Object.assign({ visible: pollVisible ||
                                         template === SCFeedObjectTemplateType.DETAIL ||
-                                        Boolean(obj.type !== SCContributionType.DISCUSSION && !obj.html && !obj.medias.length), feedObject: obj, pollObject: obj['poll'], onChange: handleChangePoll, onToggleVisibility: handleTogglePollVisibility }, PollObjectProps))) })), _jsx(Box, Object.assign({ className: classes.infoSection }, { children: _jsxs(Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 }, { children: [!hideParticipantsPreview && (_jsx(ContributorsFeedObject, Object.assign({ feedObject: obj, feedObjectType: obj.type }, ContributorsFeedObjectProps, { cacheStrategy: cacheStrategy }))), !hideFollowAction && _jsx(Follow, Object.assign({ feedObject: obj, feedObjectType: obj.type, handleFollow: handleFollow }, FollowButtonProps))] })) }))] })), _jsxs(CardActions, Object.assign({ className: classes.actionsSection }, { children: [_jsx(Actions, Object.assign({ feedObjectId: feedObjectId, feedObjectType: feedObjectType, feedObject: obj, hideCommentAction: template === SCFeedObjectTemplateType.DETAIL, handleExpandActivities: template === SCFeedObjectTemplateType.PREVIEW ? handleExpandActivities : null, VoteActionProps: { onVoteAction: handleVoteSuccess } }, ActionsProps)), (template === SCFeedObjectTemplateType.DETAIL || expandedActivities) && (_jsx(Box, Object.assign({ className: classes.replyContent }, { children: _jsx(CommentObjectReplyComponent, Object.assign({ id: `reply-feedObject-${obj.id}`, onReply: handleReply, editable: !isReplying || Boolean(obj) }, CommentObjectReplyComponentProps), Number(isReplying)) })))] })), template === SCFeedObjectTemplateType.PREVIEW && (obj.comment_count > 0 || (feedObjectActivities && feedObjectActivities.length > 0)) && (_jsx(Collapse, Object.assign({ in: expandedActivities, timeout: "auto", classes: { root: classes.activitiesSection } }, { children: _jsx(CardContent, Object.assign({ className: classes.activitiesContent }, { children: _jsx(Activities, Object.assign({ feedObject: obj, feedObjectActivities: feedObjectActivities, activitiesType: selectedActivities, onSetSelectedActivities: handleSelectedActivities, comments: comments, CommentsObjectProps: {
+                                        Boolean(obj.type !== SCContributionType.DISCUSSION && !obj.html && !obj.medias.length), feedObject: obj, pollObject: obj['poll'], onChange: handleChangePoll, onToggleVisibility: handleTogglePollVisibility }, PollObjectProps))) })), _jsx(Box, Object.assign({ className: classes.infoSection }, { children: _jsxs(Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 }, { children: [!hideParticipantsPreview && (_jsx(ContributorsFeedObject, Object.assign({ feedObject: obj, feedObjectType: obj.type }, ContributorsFeedObjectProps, { cacheStrategy: cacheStrategy }))), !_hideFollowAction && _jsx(Follow, Object.assign({ feedObject: obj, feedObjectType: obj.type, handleFollow: handleFollow }, FollowButtonProps))] })) }))] })), _jsxs(CardActions, Object.assign({ className: classes.actionsSection }, { children: [_jsx(Actions, Object.assign({ feedObjectId: feedObjectId, feedObjectType: feedObjectType, feedObject: obj, hideCommentAction: template === SCFeedObjectTemplateType.DETAIL || (hasEvent && !((_c = (_b = obj === null || obj === void 0 ? void 0 : obj.medias[0].embed) === null || _b === void 0 ? void 0 : _b.metadata) === null || _c === void 0 ? void 0 : _c.active)), handleExpandActivities: template === SCFeedObjectTemplateType.PREVIEW ? handleExpandActivities : null, hideVoteAction: hasEvent && !((_f = (_d = obj === null || obj === void 0 ? void 0 : obj.medias[0].embed) === null || _d === void 0 ? void 0 : _d.metadata) === null || _f === void 0 ? void 0 : _f.active), hideShareAction: hasEvent && !((_h = (_g = obj === null || obj === void 0 ? void 0 : obj.medias[0].embed) === null || _g === void 0 ? void 0 : _g.metadata) === null || _h === void 0 ? void 0 : _h.active), VoteActionProps: { onVoteAction: handleVoteSuccess } }, ActionsProps)), (template === SCFeedObjectTemplateType.DETAIL && (!hasEvent || ((_m = (_l = (_k = (_j = obj === null || obj === void 0 ? void 0 : obj.medias) === null || _j === void 0 ? void 0 : _j[0]) === null || _k === void 0 ? void 0 : _k.embed) === null || _l === void 0 ? void 0 : _l.metadata) === null || _m === void 0 ? void 0 : _m.active) === true)) ||
+                                (expandedActivities && (_jsx(Box, Object.assign({ className: classes.replyContent }, { children: _jsx(CommentObjectReplyComponent, Object.assign({ id: `reply-feedObject-${obj.id}`, onReply: handleReply, editable: !isReplying || Boolean(obj) }, CommentObjectReplyComponentProps), Number(isReplying)) }))))] })), template === SCFeedObjectTemplateType.PREVIEW && (obj.comment_count > 0 || (feedObjectActivities && feedObjectActivities.length > 0)) && (_jsx(Collapse, Object.assign({ in: expandedActivities, timeout: "auto", classes: { root: classes.activitiesSection } }, { children: _jsx(CardContent, Object.assign({ className: classes.activitiesContent }, { children: _jsx(Activities, Object.assign({ feedObject: obj, feedObjectActivities: feedObjectActivities, activitiesType: selectedActivities, onSetSelectedActivities: handleSelectedActivities, comments: comments, CommentsObjectProps: {
                                     CommentComponentProps: Object.assign({ onDelete: handleDeleteComment, truncateContent: true, CommentsObjectComponentProps: { inPlaceLoadMoreContents: false } }, CommentComponentProps),
                                     CommentObjectSkeletonProps: CommentObjectSkeletonProps
                                 }, cacheStrategy: cacheStrategy }, ActivitiesProps), selectedActivities) })) }))), composerOpen && (_jsx(Composer, { open: composerOpen, feedObject: obj, onClose: handleToggleEdit, onSuccess: handleEditSuccess, maxWidth: "sm", fullWidth: true }))] }))) : (_jsx(FeedObjectSkeleton, Object.assign({ template: template }, FeedObjectSkeletonProps))) }));

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

@@ -75,6 +75,7 @@ const messages = defineMessages({
     }
 });
 export default function ContributionActionsMenu(props) {
+    var _a, _b, _c;
     // PROPS
     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
@@ -719,7 +720,13 @@ export default function ContributionActionsMenu(props) {
     /**
      * Renders component
      */
-    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, { children: [_jsx(IconButton, Object.assign({ ref: (ref) => {
+    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, { children: [_jsx(IconButton
+            // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+            // @ts-ignore
+            , Object.assign({ 
+                // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                // @ts-ignore
+                disabled: contributionObj && ((_a = contributionObj === null || contributionObj === void 0 ? void 0 : contributionObj.medias) === null || _a === void 0 ? void 0 : _a.length) && !((_c = (_b = contributionObj.medias[0].embed) === null || _b === void 0 ? void 0 : _b.metadata) === null || _c === void 0 ? void 0 : _c.active), ref: (ref) => {
                     popperRef.current = ref;
                 }, "aria-haspopup": "true", onClick: handleOpen, className: classes.button, size: "small" }, { children: contributionObj && (contributionObj.collapsed || contributionObj.deleted) ? (_jsxs("span", Object.assign({ className: classes.visibilityIcons }, { children: [contributionObj.collapsed ? _jsx(Icon, { children: "visibility_off" }) : _jsx(Icon, { children: "delete" }), _jsx(Icon, { children: "expand_more" })] }))) : (_jsx(Icon, { children: "more_vert" })) })), isMobile ? (_jsx(SwipeableDrawer, Object.assign({ open: open, onClose: handleClose, onOpen: handleOpen, anchor: "bottom", disableSwipeToOpen: true }, { children: renderContent() }))) : (_jsx(PopperRoot, Object.assign({ open: open, anchorEl: popperRef.current, role: undefined, transition: true, className: classes.popperRoot }, PopperProps, { placement: "bottom-end" }, { children: ({ TransitionProps, placement }) => (_jsx(Grow, Object.assign({}, TransitionProps, { style: { transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom' } }, { children: _jsx(Paper, Object.assign({ variant: 'outlined', className: classes.paper }, { children: _jsx(ClickAwayListener, Object.assign({ onClickAway: handleClose }, { children: renderContent() })) })) }))) }))), openConfirmDialog && (_jsx(ConfirmDialog, Object.assign({ open: openConfirmDialog }, (currentAction === DELETE_CONTRIBUTION
                 ? {