@selfcommunity/react-ui 0.8.0-alpha.0 → 0.8.0-alpha.10

package/lib/cjs/components/EventForm/utils.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.combineDateAndTime = exports.getLaterDaysDate = exports.getLaterHoursDate = exports.getNewDate = void 0;
+const date_fns_1 = require("date-fns");
+function getNewDate(date) {
+    if (date) {
+        return new Date(date);
+    }
+    return new Date();
+}
+exports.getNewDate = getNewDate;
+function getLaterHoursDate(h) {
+    return (0, date_fns_1.addHours)(getNewDate(), h);
+}
+exports.getLaterHoursDate = getLaterHoursDate;
+function getLaterDaysDate(d) {
+    return (0, date_fns_1.addDays)(getNewDate(), d);
+}
+exports.getLaterDaysDate = getLaterDaysDate;
+const combineDateAndTime = (date, time) => {
+    const combined = date;
+    combined.setHours(time.getHours());
+    combined.setMinutes(time.getMinutes());
+    combined.setSeconds(time.getSeconds());
+    combined.setMilliseconds(time.getMilliseconds());
+    return combined.toISOString();
+};
+exports.combineDateAndTime = combineDateAndTime;

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

@@ -176,6 +176,6 @@ function EventHeader(inProps) {
                                     month: 'long'
                                 }),
                                 hour: intl.formatDate(scEvent.start_date, { hour: 'numeric', minute: 'numeric' })
-                            } })) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5", className: classes.name }, { children: scEvent.name })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.visibility }, { children: [(0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: scEvent.privacy === types_1.SCEventPrivacyType.PUBLIC ? ((0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: classes.visibilityItem }, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, { children: "public" }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventHeader.visibility.public", defaultMessage: "ui.eventHeader.visibility.public" })] }))) : ((0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: classes.visibilityItem }, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, { children: "private" }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventHeader.visibility.private", defaultMessage: "ui.eventHeader.visibility.private" })] }))) }), (0, jsx_runtime_1.jsx)(Bullet_1.default, {}), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.visibilityItem }, { children: scEvent.location === types_1.SCEventLocationType.PERSON ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventHeader.location.live", defaultMessage: "ui.eventHeader.location.live" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventHeader.location.online", defaultMessage: "ui.eventHeader.location.online" })) }))] })), (0, jsx_runtime_1.jsx)(User_1.default, { className: classes.planner, userId: scEvent.managed_by.id, secondary: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventHeader.user.manager", defaultMessage: "ui.eventHeader.user.manager" }), elevation: 0, actions: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isEventAdmin ? ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.multiActions }, { children: [(0, jsx_runtime_1.jsx)(EventInviteButton_1.default, { size: isMobile ? 'small' : 'medium', event: scEvent, eventId: scEvent.id, disabled: isEventFinished }), (0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsx)(EditEventButton_1.default, { size: isMobile ? 'small' : 'medium', event: scEvent, eventId: scEvent.id, onEditSuccess: (data) => setSCEvent(data), disabled: isEventFinished }), (0, jsx_runtime_1.jsx)(EventActionsMenu_1.default, Object.assign({ event: scEvent }, EventActionsProps))] })] }))) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(EventSubscribeButton_1.default, Object.assign({ event: scEvent, onSubscribe: handleSubscribe }, EventSubscribeButtonProps, { disabled: isEventFinished })), (0, jsx_runtime_1.jsx)(EventActionsMenu_1.default, Object.assign({ event: scEvent }, EventActionsProps))] })) }) })] }))] })));
+                            } })) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5", className: classes.name }, { children: scEvent.name })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.visibility }, { children: [(0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: scEvent.privacy === types_1.SCEventPrivacyType.PUBLIC ? ((0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: classes.visibilityItem }, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, { children: "public" }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventHeader.visibility.public", defaultMessage: "ui.eventHeader.visibility.public" })] }))) : ((0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: classes.visibilityItem }, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, { children: "private" }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventHeader.visibility.private", defaultMessage: "ui.eventHeader.visibility.private" })] }))) }), (0, jsx_runtime_1.jsx)(Bullet_1.default, {}), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.visibilityItem }, { children: scEvent.location === types_1.SCEventLocationType.PERSON ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventHeader.location.live", defaultMessage: "ui.eventHeader.location.live" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventHeader.location.online", defaultMessage: "ui.eventHeader.location.online" })) }))] })), (0, jsx_runtime_1.jsx)(User_1.default, { className: classes.planner, userId: scEvent.managed_by.id, secondary: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventHeader.user.manager", defaultMessage: "ui.eventHeader.user.manager" }), elevation: 0, actions: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isEventAdmin ? ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.multiActions }, { children: [(0, jsx_runtime_1.jsx)(EventInviteButton_1.default, { size: isMobile ? 'small' : 'medium', event: scEvent, eventId: scEvent.id, disabled: isEventFinished }), (0, jsx_runtime_1.jsxs)(material_1.Box, { children: [!isMobile && ((0, jsx_runtime_1.jsx)(EditEventButton_1.default, { size: isMobile ? 'small' : 'medium', event: scEvent, eventId: scEvent.id, onEditSuccess: (data) => setSCEvent(data), disabled: isEventFinished })), (0, jsx_runtime_1.jsx)(EventActionsMenu_1.default, Object.assign({ event: scEvent, onEditSuccess: (data) => setSCEvent(data) }, EventActionsProps))] })] }))) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(EventSubscribeButton_1.default, Object.assign({ event: scEvent, onSubscribe: handleSubscribe }, EventSubscribeButtonProps, { disabled: isEventFinished })), (0, jsx_runtime_1.jsx)(EventActionsMenu_1.default, Object.assign({ event: scEvent, onEditSuccess: (data) => setSCEvent(data) }, EventActionsProps))] })) }) })] }))] })));
 }
 exports.default = EventHeader;

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

@@ -12,6 +12,8 @@ const HiddenPlaceholder_1 = tslib_1.__importDefault(require("../../shared/Hidden
 const Widget_1 = tslib_1.__importDefault(require("../Widget"));
 const constants_1 = require("./constants");
 const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
+const pubsub_js_1 = tslib_1.__importDefault(require("pubsub-js"));
+const PubSub_1 = require("../../constants/PubSub");
 const classes = {
     root: `${constants_1.PREFIX}-root`,
     content: `${constants_1.PREFIX}-content`,
@@ -45,7 +47,9 @@ function EventInfoWidget(inProps) {
     const [showButton, setShowButton] = (0, react_1.useState)(!summaryExpanded);
     const [loading, setLoading] = (0, react_1.useState)(true);
     // HOOKS
-    const { scEvent } = (0, react_core_1.useSCFetchEvent)({ id: eventId, event });
+    const { scEvent, setSCEvent } = (0, react_core_1.useSCFetchEvent)({ id: eventId, event });
+    // REFS
+    const updatesSubscription = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
         setLoading(false);
     }, []);
@@ -67,6 +71,25 @@ function EventInfoWidget(inProps) {
     const showInfo = (0, react_1.useMemo)(() => (scEvent === null || scEvent === void 0 ? void 0 : scEvent.privacy) === types_1.SCEventPrivacyType.PUBLIC ||
         [types_1.SCEventSubscriptionStatusType.SUBSCRIBED, types_1.SCEventSubscriptionStatusType.GOING, types_1.SCEventSubscriptionStatusType.NOT_GOING].indexOf(scEvent === null || scEvent === void 0 ? void 0 : scEvent.subscription_status) > -1, [scEvent]);
     const description = (0, react_1.useMemo)(() => (expanded ? scEvent === null || scEvent === void 0 ? void 0 : scEvent.description : getTruncatedText(scEvent === null || scEvent === void 0 ? void 0 : scEvent.description, 220)), [expanded, scEvent]);
+    /**
+     * Subscriber for pubsub callback
+     */
+    const onChangeGroupHandler = (0, react_1.useCallback)((_msg, data) => {
+        if (data && scEvent.id === data.id) {
+            setSCEvent(data);
+        }
+    }, [scEvent, setSCEvent]);
+    /**
+     * On mount, subscribe to receive groups updates (only edit)
+     */
+    (0, react_1.useEffect)(() => {
+        if (scEvent) {
+            updatesSubscription.current = pubsub_js_1.default.subscribe(`${PubSub_1.SCTopicType.EVENT}.${PubSub_1.SCGroupEventType.EDIT}`, onChangeGroupHandler);
+        }
+        return () => {
+            updatesSubscription.current && pubsub_js_1.default.unsubscribe(updatesSubscription.current);
+        };
+    }, [scEvent]);
     // RENDER
     if (!scEvent && loading) {
         return (0, jsx_runtime_1.jsx)(Skeleton_1.default, {});

package/lib/cjs/components/Events/Events.js

@@ -20,6 +20,8 @@ const Event_1 = tslib_1.__importStar(require("../Event"));
 const Skeleton_1 = tslib_1.__importDefault(require("../Events/Skeleton"));
 const constants_1 = require("./constants");
 const PastEventsFilter_1 = tslib_1.__importDefault(require("./PastEventsFilter"));
+const pubsub_js_1 = tslib_1.__importDefault(require("pubsub-js"));
+const PubSub_1 = require("../../constants/PubSub");
 const classes = {
     root: `${constants_1.PREFIX}-root`,
     filters: `${constants_1.PREFIX}-filters`,
@@ -101,6 +103,8 @@ function Events(inProps) {
     const authUserId = scUserContext.user ? scUserContext.user.id : null;
     const theme = (0, material_1.useTheme)();
     const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'));
+    // REFS
+    const updatesSubscription = (0, react_1.useRef)(null);
     // HANDLERS
     const handleChipClick = () => {
         setShowFollowed(!showFollowed);
@@ -146,6 +150,28 @@ function Events(inProps) {
             query === '' && fetchEvents();
         }
     }, [contentAvailability, dateSearch, showFollowed, showPastEvents, showMyEvents, query]);
+    /**
+     * Subscriber for pubsub callback
+     */
+    const onDeleteEventHandler = (0, react_1.useCallback)((_msg, deleted) => {
+        setEvents((prev) => {
+            if (prev.some((e) => e.id === deleted)) {
+                return prev.filter((e) => e.id !== deleted);
+            }
+            return prev;
+        });
+    }, [events]);
+    /**
+     * On mount, subscribe to receive event updates (only delete)
+     */
+    (0, react_1.useEffect)(() => {
+        if (events) {
+            updatesSubscription.current = pubsub_js_1.default.subscribe(`${PubSub_1.SCTopicType.EVENT}.${PubSub_1.SCGroupEventType.DELETE}`, onDeleteEventHandler);
+        }
+        return () => {
+            updatesSubscription.current && pubsub_js_1.default.unsubscribe(updatesSubscription.current);
+        };
+    }, [events]);
     const handleNext = (0, react_1.useMemo)(() => () => {
         if (!next) {
             return;
@@ -191,14 +217,14 @@ function Events(inProps) {
                                 variant: showMyEvents ? 'filled' : 'outlined', label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.events.filterByCreatedByMe", defaultMessage: "ui.events.filterByCreatedByMe" }), onClick: () => setShowMyEvents(!showMyEvents), 
                                 // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
                                 // @ts-ignore
-                                showFollowed: showMyEvents, deleteIcon: showMyEvents ? (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) : null, onDelete: showMyEvents ? handleDeleteClick : null, disabled: loading }) })))] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, md: 4 }, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { className: classes.search, size: 'small', fullWidth: true, value: query, label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.events.filterByName", defaultMessage: "ui.events.filterByName" }), variant: "outlined", onChange: handleOnChangeFilterName, disabled: loading, onKeyUp: (e) => {
+                                showFollowed: showMyEvents, deleteIcon: showMyEvents ? (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) : null, onDelete: showMyEvents ? handleDeleteClick : null, disabled: loading }) })))] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, md: 4 }, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { className: classes.search, size: 'small', fullWidth: true, value: query, label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.events.filterByName", defaultMessage: "ui.events.filterByName" }), variant: "outlined", onChange: handleOnChangeFilterName, disabled: loading || (!events.length && !query), onKeyUp: (e) => {
                                     e.preventDefault();
                                     if (e.key === 'Enter') {
                                         fetchEvents(true);
                                     }
                                 }, InputProps: {
-                                    endAdornment: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "end" }, { children: isMobile ? ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: () => fetchEvents(true), disabled: loading }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "search" }) }))) : ((0, jsx_runtime_1.jsx)(material_1.Button, { size: "small", variant: "contained", color: "secondary", onClick: () => fetchEvents(true), endIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "search" }), disabled: loading })) })))
-                                } }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, md: 2 }, { children: (0, jsx_runtime_1.jsxs)(material_1.FormControl, Object.assign({ fullWidth: true }, { children: [(0, jsx_runtime_1.jsx)(material_1.InputLabel, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.events.filterByDate", defaultMessage: "ui.events.filterByDate" }) }), (0, jsx_runtime_1.jsx)(material_1.Select, Object.assign({ disabled: showPastEvents || loading, size: 'small', label: (0, jsx_runtime_1.jsx)(react_intl_1.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) => ((0, jsx_runtime_1.jsxs)(material_1.MenuItem, Object.assign({ value: option.value }, { children: [(0, jsx_runtime_1.jsx)(material_1.Radio, { checked: dateSearch === option.value, value: option.value, name: "radio-button-select", inputProps: { 'aria-label': option.label } }), option.label] }), option.value))) }))] })) })), authUserId && ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true }, { children: (0, jsx_runtime_1.jsx)(exports.EventsChipRoot
+                                    endAdornment: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "end" }, { children: isMobile ? ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: () => fetchEvents(true), disabled: loading || (!events.length && !query) }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "search" }) }))) : ((0, jsx_runtime_1.jsx)(material_1.Button, { size: "small", variant: "contained", color: "secondary", onClick: () => fetchEvents(true), endIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "search" }), disabled: loading || (!events.length && !query) })) })))
+                                } }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, md: 2 }, { children: (0, jsx_runtime_1.jsxs)(material_1.FormControl, Object.assign({ fullWidth: true }, { children: [(0, jsx_runtime_1.jsx)(material_1.InputLabel, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.events.filterByDate", defaultMessage: "ui.events.filterByDate" }) }), (0, jsx_runtime_1.jsx)(material_1.Select, Object.assign({ disabled: showPastEvents || loading || (!events.length && dateSearch === types_1.SCEventDateFilterType.ANY), size: 'small', label: (0, jsx_runtime_1.jsx)(react_intl_1.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) => ((0, jsx_runtime_1.jsxs)(material_1.MenuItem, Object.assign({ value: option.value }, { children: [(0, jsx_runtime_1.jsx)(material_1.Radio, { checked: dateSearch === option.value, value: option.value, name: "radio-button-select", inputProps: { 'aria-label': option.label } }), option.label] }), option.value))) }))] })) })), authUserId && ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true }, { children: (0, jsx_runtime_1.jsx)(exports.EventsChipRoot
                             // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
                             // @ts-ignore
                             , { 
@@ -210,7 +236,7 @@ function Events(inProps) {
                                 variant: showFollowed ? 'filled' : 'outlined', label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.events.filterByFollowedInterest", defaultMessage: "ui.events.filterByFollowedInterest" }), onClick: handleChipClick, 
                                 // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
                                 // @ts-ignore
-                                showFollowed: showFollowed, deleteIcon: showFollowed ? (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) : null, onDelete: showFollowed ? handleDeleteClick : null, disabled: loading }) }))), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true }, { children: (0, jsx_runtime_1.jsx)(PastEventsFilter_1.default, { showPastEvents: showPastEvents, handleClick: handleChipPastClick, handleDeleteClick: handleDeletePastClick, disabled: dateSearch !== types_1.SCEventDateFilterType.ANY || loading }) }))] })) }))), (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: loading ? ((0, jsx_runtime_1.jsx)(Skeleton_1.default, Object.assign({}, EventsSkeletonComponentProps, { EventSkeletonProps: EventSkeletonComponentProps }))) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: !events.length ? ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.noResults }, { children: (onlyStaffEnabled && !react_core_1.UserUtils.isStaff(scUserContext.user)) ||
+                                showFollowed: showFollowed, deleteIcon: showFollowed ? (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) : null, onDelete: showFollowed ? handleDeleteClick : null, disabled: loading || (!events.length && !showFollowed) }) }))), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true }, { children: (0, jsx_runtime_1.jsx)(PastEventsFilter_1.default, { showPastEvents: showPastEvents, handleClick: handleChipPastClick, handleDeleteClick: handleDeletePastClick, disabled: dateSearch !== types_1.SCEventDateFilterType.ANY || loading || (!events.length && !showPastEvents) }) }))] })) }))), (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: loading ? ((0, jsx_runtime_1.jsx)(Skeleton_1.default, Object.assign({}, EventsSkeletonComponentProps, { EventSkeletonProps: EventSkeletonComponentProps }))) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: !events.length ? ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.noResults }, { children: (onlyStaffEnabled && !react_core_1.UserUtils.isStaff(scUserContext.user)) ||
                             (onlyStaffEnabled && react_core_1.UserUtils.isStaff(scUserContext.user) && general) ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Event_1.EventSkeleton, Object.assign({}, EventSkeletonComponentProps)), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.events.noEvents.title", defaultMessage: "ui.events.noEvents.title" }) }))] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Event_1.EventSkeleton, Object.assign({}, EventSkeletonComponentProps, { skeletonsAnimation: false, actions: (0, jsx_runtime_1.jsx)(CreateEventButton_1.default, {}) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.events.noEvents.title.onlyStaff", defaultMessage: "ui.events.noEvents.title.onlyStaff" }) }))] })) }))) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ container: true, spacing: { xs: 2 }, className: classes.events }, GridContainerComponentProps, { children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [events.map((event) => ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, sm: 12, md: 6, className: classes.item }, GridItemComponentProps, { children: (0, jsx_runtime_1.jsx)(Event_1.default, Object.assign({ event: event, eventId: event.id }, EventComponentProps)) }), event.id))), authUserId && events.length % 2 !== 0 && ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, sm: 12, md: 6, className: classes.itemSkeleton }, GridItemComponentProps, { children: (0, jsx_runtime_1.jsx)(Event_1.EventSkeleton, Object.assign({}, EventSkeletonComponentProps, { skeletonsAnimation: false, actions: (0, jsx_runtime_1.jsx)(CreateEventButton_1.default, Object.assign({ variant: "outlined", color: "primary", size: "small" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.events.skeleton.action.add", defaultMessage: "ui.events.skeleton.action.add" }) })) })) }), 'skeleton-item'))] }) })), Boolean(next) && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ color: "secondary", variant: "text", onClick: handleNext, className: classes.showMore }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.events.button.seeMore", defaultMessage: "ui.events.button.seeMore" }) })))] })) })) })] }));
     /**
      * Renders root object (if content availability community option is false and user is anonymous, component is hidden)

package/lib/cjs/components/MyEventsWidget/MyEventsWidget.js

@@ -20,6 +20,8 @@ const Event_1 = tslib_1.__importDefault(require("../Event"));
 const Widget_1 = tslib_1.__importDefault(require("../Widget"));
 const constants_1 = require("./constants");
 const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
+const pubsub_js_1 = tslib_1.__importDefault(require("pubsub-js"));
+const PubSub_1 = require("../../constants/PubSub");
 const classes = {
     root: `${constants_1.PREFIX}-root`,
     titleWrapper: `${constants_1.PREFIX}-title-wrapper`,
@@ -64,8 +66,14 @@ function MyEventsWidget(inProps) {
     // CONTEXT
     const scUserContext = (0, react_core_1.useSCUser)();
     const scRoutingContext = (0, react_core_1.useSCRouting)();
-    const { features } = (0, react_core_1.useSCPreferences)();
-    const eventsEnabled = (0, react_1.useMemo)(() => features && features.includes(types_1.SCFeatureName.EVENT) && features.includes(types_1.SCFeatureName.TAGGING), [features]);
+    const { preferences, features } = (0, react_core_1.useSCPreferences)();
+    const eventsEnabled = (0, react_1.useMemo)(() => preferences &&
+        features &&
+        features.includes(types_1.SCFeatureName.TAGGING) &&
+        react_core_1.SCPreferences.CONFIGURATIONS_EVENTS_ENABLED in preferences &&
+        preferences[react_core_1.SCPreferences.CONFIGURATIONS_EVENTS_ENABLED].value, [preferences, features]);
+    // REFS
+    const updatesSubscription = (0, react_1.useRef)(null);
     /**
      * Initialize component
      * Fetch data only if the component is not initialized and it is not loading data
@@ -120,6 +128,30 @@ function MyEventsWidget(inProps) {
             _fetchNext();
         }
     }, [eventIndex, state.results]);
+    /**
+     * Subscriber for pubsub callback
+     */
+    const onDeleteEventHandler = (0, react_1.useCallback)((_msg, deleted) => {
+        const _events = [...state.results];
+        if (_events.some((e) => e.id === deleted)) {
+            const updatedEvents = _events.filter((e) => e.id !== deleted);
+            dispatch({
+                type: widget_1.actionWidgetTypes.SET_RESULTS,
+                payload: { results: updatedEvents }
+            });
+        }
+    }, [state.results]);
+    /**
+     * On mount, subscribe to receive event updates (only delete)
+     */
+    (0, react_1.useEffect)(() => {
+        if (state.results) {
+            updatesSubscription.current = pubsub_js_1.default.subscribe(`${PubSub_1.SCTopicType.EVENT}.${PubSub_1.SCGroupEventType.DELETE}`, onDeleteEventHandler);
+        }
+        return () => {
+            updatesSubscription.current && pubsub_js_1.default.unsubscribe(updatesSubscription.current);
+        };
+    }, [state.results]);
     // RENDER
     if (!eventsEnabled || (state.initialized && state.count === 0)) {
         return (0, jsx_runtime_1.jsx)(HiddenPlaceholder_1.default, {});

package/lib/cjs/components/NavigationToolbar/NavigationToolbar.js

@@ -110,12 +110,21 @@ function NavigationToolbar(inProps) {
         return _preferences;
     }, [scPreferences.preferences]);
     const privateMessagingEnabled = (0, react_1.useMemo)(() => scPreferences.features.includes(types_1.SCFeatureName.PRIVATE_MESSAGING), [scPreferences.features]);
-    const groupsEnabled = (0, react_1.useMemo)(() => scPreferences.features && scPreferences.features.includes(types_1.SCFeatureName.GROUPING) && scPreferences.features.includes(types_1.SCFeatureName.TAGGING), [scPreferences.features]);
-    const eventsEnabled = (0, react_1.useMemo)(() => scPreferences.features && scPreferences.features.includes(types_1.SCFeatureName.EVENT) && scPreferences.features.includes(types_1.SCFeatureName.TAGGING), [scPreferences.features]);
+    const groupsEnabled = (0, react_1.useMemo)(() => scPreferences.preferences &&
+        scPreferences.features &&
+        scPreferences.features.includes(types_1.SCFeatureName.TAGGING) &&
+        scPreferences.features.includes(types_1.SCFeatureName.GROUPING) &&
+        react_core_1.SCPreferences.CONFIGURATIONS_GROUPS_ENABLED in scPreferences.preferences &&
+        scPreferences.preferences[react_core_1.SCPreferences.CONFIGURATIONS_GROUPS_ENABLED].value, [scPreferences.preferences, scPreferences.features]);
+    const eventsEnabled = (0, react_1.useMemo)(() => scPreferences.preferences &&
+        scPreferences.features &&
+        scPreferences.features.includes(types_1.SCFeatureName.TAGGING) &&
+        react_core_1.SCPreferences.CONFIGURATIONS_EVENTS_ENABLED in preferences &&
+        scPreferences.preferences[react_core_1.SCPreferences.CONFIGURATIONS_EVENTS_ENABLED].value, [scPreferences.preferences, scPreferences.features]);
     const showComposer = (0, react_1.useMemo)(() => {
         return (!disableComposer &&
             (!scPreferences.preferences[react_core_1.SCPreferences.CONFIGURATIONS_POST_ONLY_STAFF_ENABLED].value || react_core_1.UserUtils.isStaff(scUserContext.user)));
-    }, [scPreferences, disableComposer, scUserContext.user]);
+    }, [preferences, disableComposer, scUserContext.user]);
     // STATE
     const [anchorNotification, setAnchorNotification] = react_1.default.useState(null);
     // HANDLERS

package/lib/cjs/components/NavigationToolbarMobile/NavigationToolbarMobile.js

@@ -80,8 +80,17 @@ function NavigationToolbarMobile(inProps) {
     // STATE
     const [searchOpen, setSearchOpen] = (0, react_1.useState)(false);
     // MEMO
-    const groupsEnabled = (0, react_1.useMemo)(() => features && features.includes(types_1.SCFeatureName.GROUPING) && features.includes(types_1.SCFeatureName.TAGGING), [features]);
-    const eventsEnabled = (0, react_1.useMemo)(() => features && features.includes(types_1.SCFeatureName.EVENT) && features.includes(types_1.SCFeatureName.TAGGING), [features]);
+    const groupsEnabled = (0, react_1.useMemo)(() => preferences &&
+        features &&
+        features.includes(types_1.SCFeatureName.TAGGING) &&
+        features.includes(types_1.SCFeatureName.GROUPING) &&
+        react_core_1.SCPreferences.CONFIGURATIONS_GROUPS_ENABLED in preferences &&
+        preferences[react_core_1.SCPreferences.CONFIGURATIONS_GROUPS_ENABLED].value, [preferences, features]);
+    const eventsEnabled = (0, react_1.useMemo)(() => preferences &&
+        features &&
+        features.includes(types_1.SCFeatureName.TAGGING) &&
+        react_core_1.SCPreferences.CONFIGURATIONS_EVENTS_ENABLED in preferences &&
+        preferences[react_core_1.SCPreferences.CONFIGURATIONS_EVENTS_ENABLED].value, [preferences, features]);
     const exploreStreamEnabled = preferences[react_core_1.SCPreferences.CONFIGURATIONS_EXPLORE_STREAM_ENABLED].value;
     const postOnlyStaffEnabled = preferences[react_core_1.SCPreferences.CONFIGURATIONS_POST_ONLY_STAFF_ENABLED].value;
     const contentAvailable = preferences[react_core_1.SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY].value;

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

@@ -26,6 +26,7 @@ const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
 const notistack_1 = require("notistack");
 const constants_2 = require("../PlatformWidget/constants");
 const header_1 = tslib_1.__importDefault(require("../../assets/onBoarding/header"));
+const BaseDialog_1 = tslib_1.__importDefault(require("../../shared/BaseDialog"));
 const classes = {
     root: `${constants_1.PREFIX}-root`,
     content: `${constants_1.PREFIX}-content`,
@@ -54,7 +55,7 @@ const OnBoardingWidget = (inProps) => {
     });
     const { className, GenerateContentsParams = {}, onGeneratedContent = null, onHeightChange } = props, rest = tslib_1.__rest(props, ["className", "GenerateContentsParams", "onGeneratedContent", "onHeightChange"]);
     // STATE
-    const [isLoading, setIsLoading] = (0, react_1.useState)(true);
+    const [loading, setLoading] = (0, react_1.useState)(true);
     const [initialized, setInitialized] = (0, react_1.useState)(false);
     const [steps, setSteps] = (0, react_1.useState)([]);
     const nextStep = (0, react_1.useMemo)(() => {
@@ -70,6 +71,7 @@ const OnBoardingWidget = (inProps) => {
     const prevContentsStep = (0, react_core_1.usePreviousValue)(currentContentsStep);
     const currentCategoriesStep = steps === null || steps === void 0 ? void 0 : steps.find((s) => s.step === types_1.SCOnBoardingStepType.CATEGORIES);
     const prevCategoriesStep = (0, react_core_1.usePreviousValue)(currentCategoriesStep);
+    const [showCategoriesModal, setShowCategoriesModal] = (0, react_1.useState)(false);
     // CONTEXT
     const scUserContext = (0, react_core_1.useSCUser)();
     const isAdmin = (0, react_1.useMemo)(() => react_core_1.UserUtils.isCommunityCreator(scUserContext.user), [scUserContext.user]);
@@ -82,6 +84,7 @@ const OnBoardingWidget = (inProps) => {
     // HOOKS
     const theme = (0, material_1.useTheme)();
     const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'));
+    const { categories, isLoading } = (0, react_core_1.useSCFetchCategories)();
     // HANDLERS
     const completeStep = (s) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
         if (s.status !== types_1.SCOnBoardingStepStatusType.COMPLETED) {
@@ -114,14 +117,14 @@ const OnBoardingWidget = (inProps) => {
             const contentStep = res.results.find((step) => step.step === types_1.SCOnBoardingStepType.CONTENTS);
             setIsGenerating(res.results.some((step) => step.status === 'in_progress'));
             setSteps(res.results);
-            setIsLoading(false);
+            setLoading(false);
             if (contentStep.status === types_1.SCOnBoardingStepStatusType.IN_PROGRESS && contentStep.results.length !== 0 && onGeneratedContent) {
                 onGeneratedContent(contentStep.results);
             }
         })
             .catch((error) => {
             utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
-            setIsLoading(false);
+            setLoading(false);
         });
     });
     const handleChange = (newStep) => {
@@ -132,17 +135,22 @@ const OnBoardingWidget = (inProps) => {
         onHeightChange && onHeightChange();
     };
     const generateContent = (stepId) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
-        yield api_services_1.OnBoardingService.startAStep(stepId, GenerateContentsParams)
-            .then(() => {
-            setIsGenerating(true);
-        })
-            .catch((error) => {
-            utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
-            enqueueSnackbar((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.common.error.action", defaultMessage: "ui.common.error.action" }), {
-                variant: 'error',
-                autoHideDuration: 3000
+        if (!isLoading && !categories.length) {
+            setShowCategoriesModal(true);
+        }
+        else {
+            yield api_services_1.OnBoardingService.startAStep(stepId, GenerateContentsParams)
+                .then(() => {
+                setIsGenerating(true);
+            })
+                .catch((error) => {
+                utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
+                enqueueSnackbar((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.common.error.action", defaultMessage: "ui.common.error.action" }), {
+                    variant: 'error',
+                    autoHideDuration: 3000
+                });
             });
-        });
+        }
     });
     const handlePreferencesUpdate = () => {
         api_services_1.PreferenceService.getAllPreferences().then((preferences) => {
@@ -154,7 +162,7 @@ const OnBoardingWidget = (inProps) => {
     // EFFECTS
     (0, react_1.useEffect)(() => {
         if (prevContentsStep &&
-            prevCategoriesStep.status === types_1.SCOnBoardingStepStatusType.IN_PROGRESS &&
+            prevContentsStep.status === types_1.SCOnBoardingStepStatusType.IN_PROGRESS &&
             (currentContentsStep === null || currentContentsStep === void 0 ? void 0 : currentContentsStep.status) === types_1.SCOnBoardingStepStatusType.COMPLETED) {
             showSuccessAlert(currentContentsStep);
         }
@@ -235,6 +243,6 @@ const OnBoardingWidget = (inProps) => {
                                     // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
                                     // @ts-ignore
                                     icon: (...chunks) => ((0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ color: "secondary", fontSize: "medium" }, { children: chunks })))
-                                } }) }))) }) })), (0, jsx_runtime_1.jsx)(material_1.AccordionDetails, { children: (0, jsx_runtime_1.jsx)(Widget_1.default, Object.assign({ className: classes.content, elevation: 0 }, { children: isLoading ? ((0, jsx_runtime_1.jsx)(Skeleton_1.default, {})) : ((0, jsx_runtime_1.jsxs)(material_1.CardContent, { children: [(0, jsx_runtime_1.jsx)(material_1.List, Object.assign({ className: isMobile ? classes.stepsMobile : classes.steps }, { children: steps === null || steps === void 0 ? void 0 : steps.map((step) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: isMobile ? ((0, jsx_runtime_1.jsx)(material_1.Chip, { size: "small", label: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.onBoardingWidget.${step.step}`, defaultMessage: `ui.onBoardingWidget.${step.step}` }), ' ', step.status === types_1.SCOnBoardingStepStatusType.COMPLETED && ((0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ color: (step === null || step === void 0 ? void 0 : step.status) === types_1.SCOnBoardingStepStatusType.COMPLETED && (step === null || step === void 0 ? void 0 : step.step) !== (_step === null || _step === void 0 ? void 0 : _step.step) ? 'success' : 'inherit' }, { children: "check" })))] }), onClick: () => handleChange(step), variant: step.step === (_step === null || _step === void 0 ? void 0 : _step.step) ? 'filled' : 'outlined', color: step.status === types_1.SCOnBoardingStepStatusType.COMPLETED ? 'success' : 'default' })) : ((0, jsx_runtime_1.jsxs)(material_1.ListItemButton, Object.assign({ onClick: () => handleChange(step), selected: (step === null || step === void 0 ? void 0 : step.step) === (_step === null || _step === void 0 ? void 0 : _step.step) }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(material_1.Checkbox, { edge: "start", checked: step.status === types_1.SCOnBoardingStepStatusType.COMPLETED, tabIndex: -1, disableRipple: true, inputProps: { 'aria-labelledby': step.step }, size: 'small' }) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.onBoardingWidget.${step.step}`, defaultMessage: `ui.onBoardingWidget.${step.step}` }) })] }))) }, step.id))) })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.stepContent }, { children: (0, jsx_runtime_1.jsx)(material_1.Fade, Object.assign({ in: true, timeout: 2400 }, { children: (0, jsx_runtime_1.jsx)(material_1.Box, { children: getStepContent() }) })) }))] })) })) })] })) })));
+                                } }) }))) }) })), (0, jsx_runtime_1.jsx)(material_1.AccordionDetails, { children: (0, jsx_runtime_1.jsx)(Widget_1.default, Object.assign({ className: classes.content, elevation: 0 }, { children: loading ? ((0, jsx_runtime_1.jsx)(Skeleton_1.default, {})) : ((0, jsx_runtime_1.jsxs)(material_1.CardContent, { children: [(0, jsx_runtime_1.jsx)(material_1.List, Object.assign({ className: isMobile ? classes.stepsMobile : classes.steps }, { children: steps === null || steps === void 0 ? void 0 : steps.map((step) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: isMobile ? ((0, jsx_runtime_1.jsx)(material_1.Chip, { size: "small", label: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.onBoardingWidget.${step.step}`, defaultMessage: `ui.onBoardingWidget.${step.step}` }), ' ', step.status === types_1.SCOnBoardingStepStatusType.COMPLETED && ((0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ color: (step === null || step === void 0 ? void 0 : step.status) === types_1.SCOnBoardingStepStatusType.COMPLETED && (step === null || step === void 0 ? void 0 : step.step) !== (_step === null || _step === void 0 ? void 0 : _step.step) ? 'success' : 'inherit' }, { children: "check" })))] }), onClick: () => handleChange(step), variant: step.step === (_step === null || _step === void 0 ? void 0 : _step.step) ? 'filled' : 'outlined', color: step.status === types_1.SCOnBoardingStepStatusType.COMPLETED ? 'success' : 'default' })) : ((0, jsx_runtime_1.jsxs)(material_1.ListItemButton, Object.assign({ onClick: () => handleChange(step), selected: (step === null || step === void 0 ? void 0 : step.step) === (_step === null || _step === void 0 ? void 0 : _step.step) }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(material_1.Checkbox, { edge: "start", checked: step.status === types_1.SCOnBoardingStepStatusType.COMPLETED, tabIndex: -1, disableRipple: true, inputProps: { 'aria-labelledby': step.step }, size: 'small' }) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.onBoardingWidget.${step.step}`, defaultMessage: `ui.onBoardingWidget.${step.step}` }) })] }))) }, step.id))) })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.stepContent }, { children: [(0, jsx_runtime_1.jsx)(material_1.Fade, Object.assign({ in: true, timeout: 2400 }, { children: (0, jsx_runtime_1.jsx)(material_1.Box, { children: getStepContent() }) })), showCategoriesModal && ((0, jsx_runtime_1.jsx)(BaseDialog_1.default, Object.assign({ title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.ai.no.categories", defaultMessage: "ui.onBoardingWidget.ai.no.categories" }), DialogContentProps: { dividers: false }, open: showCategoriesModal, onClose: () => setShowCategoriesModal(false), actions: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ color: "secondary", onClick: () => setShowCategoriesModal(false) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.ai.no.categories.cancel", defaultMessage: "ui.onBoardingWidget.ai.no.categories.cancel" }) })) }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ color: "primary", href: isStage ? constants_2.CONSOLE_STAGE : constants_2.CONSOLE_PROD, onClick: () => setShowCategoriesModal(false), target: "_blank", startIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ fontSize: "small" }, { children: "edit" })) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.ai.no.categories.link", defaultMessage: "ui.onBoardingWidget.ai.no.categories.link" }) })) })))] }))] })) })) })] })) })));
 };
 exports.default = OnBoardingWidget;

package/lib/cjs/components/SuggestedEventsWidget/SuggestedEventsWidget.js

@@ -20,6 +20,8 @@ const Widget_1 = tslib_1.__importDefault(require("../Widget"));
 const Arrow_1 = tslib_1.__importDefault(require("./Arrow"));
 const constants_1 = require("./constants");
 const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
+const pubsub_js_1 = tslib_1.__importDefault(require("pubsub-js"));
+const PubSub_1 = require("../../constants/PubSub");
 const classes = {
     root: `${constants_1.PREFIX}-root`,
     content: `${constants_1.PREFIX}-content`,
@@ -58,6 +60,8 @@ function SuggestedEventsWidget(inProps) {
     const scRoutingContext = (0, react_core_1.useSCRouting)();
     //HOOKS
     const theme = (0, material_1.useTheme)();
+    // REFS
+    const updatesSubscription = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
         api_services_1.SuggestionService.getEventSuggestion(Object.assign({}, endpointQueryParams))
             .then((payload) => {
@@ -106,6 +110,28 @@ function SuggestedEventsWidget(inProps) {
             }
         }
     }, [count, hideMarginLeft, hideMarginRight]);
+    /**
+     * Subscriber for pubsub callback
+     */
+    const onDeleteEventHandler = (0, react_1.useCallback)((_msg, deleted) => {
+        setEvents((prev) => {
+            if (prev.some((e) => e.id === deleted)) {
+                return prev.filter((e) => e.id !== deleted);
+            }
+            return prev;
+        });
+    }, [events]);
+    /**
+     * On mount, subscribe to receive event updates (only delete)
+     */
+    (0, react_1.useEffect)(() => {
+        if (events) {
+            updatesSubscription.current = pubsub_js_1.default.subscribe(`${PubSub_1.SCTopicType.EVENT}.${PubSub_1.SCGroupEventType.DELETE}`, onDeleteEventHandler);
+        }
+        return () => {
+            updatesSubscription.current && pubsub_js_1.default.unsubscribe(updatesSubscription.current);
+        };
+    }, [events]);
     // RENDER
     if (!events && loading) {
         return (0, jsx_runtime_1.jsx)(Skeleton_1.default, {});

package/lib/cjs/components/UserSubscribedGroupsWidget/UserSubscribedGroupsWidget.js

@@ -73,8 +73,13 @@ function UserSubscribedGroupsWidget(inProps) {
     // CONTEXT
     const scUserContext = (0, react_core_1.useSCUser)();
     const isMe = (0, react_1.useMemo)(() => scUserContext.user && userId === scUserContext.user.id, [scUserContext.user, userId]);
-    const { features } = (0, react_core_1.useSCPreferences)();
-    const groupsEnabled = (0, react_1.useMemo)(() => features.includes(types_1.SCFeatureName.GROUPING) && features.includes(types_1.SCFeatureName.TAGGING), [features]);
+    const { preferences, features } = (0, react_core_1.useSCPreferences)();
+    const groupsEnabled = (0, react_1.useMemo)(() => preferences &&
+        features &&
+        features.includes(types_1.SCFeatureName.TAGGING) &&
+        features.includes(types_1.SCFeatureName.GROUPING) &&
+        react_core_1.SCPreferences.CONFIGURATIONS_GROUPS_ENABLED in preferences &&
+        preferences[react_core_1.SCPreferences.CONFIGURATIONS_GROUPS_ENABLED].value, [preferences, features]);
     // STATE
     const [state, dispatch] = (0, react_1.useReducer)(widget_1.dataWidgetReducer, {
         isLoadingNext: false,

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

@@ -12,6 +12,7 @@ export declare enum SCTopicType {
 export declare enum SCGroupEventType {
     CREATE = "create",
     EDIT = "edit",
+    DELETE = "delete",
     MEMBERS = "members",
     ADD_MEMBER = "members.add_member",
     INVITE_MEMBER = "members.invite_member",

package/lib/cjs/constants/PubSub.js

@@ -16,6 +16,7 @@ var SCGroupEventType;
 (function (SCGroupEventType) {
     SCGroupEventType["CREATE"] = "create";
     SCGroupEventType["EDIT"] = "edit";
+    SCGroupEventType["DELETE"] = "delete";
     SCGroupEventType["MEMBERS"] = "members";
     SCGroupEventType["ADD_MEMBER"] = "members.add_member";
     SCGroupEventType["INVITE_MEMBER"] = "members.invite_member";

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

@@ -18,6 +18,10 @@ export interface EventActionsMenuProps extends IconButtonProps {
      * Handles callback on delete confirm
      */
     onDeleteConfirm?: () => void;
+    /**
+     * Handles on edit success
+     */
+    onEditSuccess?: (data: SCEventType) => any;
     /**
      * Any other properties
      */

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

@@ -15,6 +15,9 @@ const api_services_1 = require("@selfcommunity/api-services");
 const EventActionsMenu_1 = require("../../constants/EventActionsMenu");
 const utils_1 = require("@selfcommunity/utils");
 const notistack_1 = require("notistack");
+const pubsub_js_1 = tslib_1.__importDefault(require("pubsub-js"));
+const PubSub_1 = require("../../constants/PubSub");
+const EventForm_1 = tslib_1.__importDefault(require("../../components/EventForm"));
 const PREFIX = 'SCEventActionsMenu';
 const classes = {
     root: `${PREFIX}-root`,
@@ -69,16 +72,17 @@ function EventActionsMenu(inProps) {
         props: inProps,
         name: PREFIX
     });
-    const { className, event, eventId, onDeleteConfirm } = props, rest = tslib_1.__rest(props, ["className", "event", "eventId", "onDeleteConfirm"]);
+    const { className, event, eventId, onDeleteConfirm, onEditSuccess } = props, rest = tslib_1.__rest(props, ["className", "event", "eventId", "onDeleteConfirm", "onEditSuccess"]);
     // STATE
     const [anchorEl, setAnchorEl] = (0, react_1.useState)(null);
     const [openConfirmDialog, setOpenConfirmDialog] = (0, react_1.useState)(false);
+    const [openEdit, setOpenEdit] = (0, react_1.useState)(false);
     // HOOKS
     const theme = (0, material_1.useTheme)();
     const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'));
     const scRoutingContext = (0, react_core_1.useSCRouting)();
     const scUserContext = (0, react_core_1.useSCUser)();
-    const { scEvent } = (0, react_core_1.useSCFetchEvent)({ id: eventId, event });
+    const { scEvent, setSCEvent } = (0, react_core_1.useSCFetchEvent)({ id: eventId, event });
     const isEventAdmin = (0, react_1.useMemo)(() => { var _a; return scUserContext.user && ((_a = scEvent === null || scEvent === void 0 ? void 0 : scEvent.managed_by) === null || _a === void 0 ? void 0 : _a.id) === scUserContext.user.id; }, [scUserContext.user, (_a = scEvent === null || scEvent === void 0 ? void 0 : scEvent.managed_by) === null || _a === void 0 ? void 0 : _a.id]);
     const isEventFinished = (0, react_1.useMemo)(() => {
         if (scEvent && !scEvent.running) {
@@ -93,10 +97,17 @@ function EventActionsMenu(inProps) {
     const handleClose = () => {
         setAnchorEl(null);
     };
+    const handleEditClick = () => {
+        setOpenEdit((o) => !o);
+    };
     const handleCloseDialog = () => {
         setOpenConfirmDialog(false);
         setAnchorEl(null);
     };
+    const handleEditSuccess = (data) => {
+        setSCEvent(data);
+        onEditSuccess && onEditSuccess(data);
+    };
     /**
      * Handles thread deletion
      */
@@ -105,6 +116,7 @@ function EventActionsMenu(inProps) {
             .then(() => {
             onDeleteConfirm();
             handleCloseDialog();
+            pubsub_js_1.default.publish(`${PubSub_1.SCTopicType.EVENT}.${PubSub_1.SCGroupEventType.DELETE}`, scEvent.id);
         })
             .catch((error) => {
             setOpenConfirmDialog(false);
@@ -147,6 +159,7 @@ function EventActionsMenu(inProps) {
             isEventAdmin &&
                 !isEventFinished && [
                 (0, jsx_runtime_1.jsx)(material_1.Divider, {}, "divider"),
+                isMobile && ((0, jsx_runtime_1.jsxs)(material_1.MenuItem, Object.assign({ className: classes.item, onClick: handleEditClick }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "edit" }) }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.shared.eventActionsMenu.item.edit", defaultMessage: "ui.shared.eventActionsMenu.item.edit" })] }), "edit")),
                 (0, jsx_runtime_1.jsxs)(material_1.MenuItem, Object.assign({ className: classes.item, onClick: () => handleAction(EventActionsMenu_1.CANCEL_EVENT) }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "close" }) }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.shared.eventActionsMenu.item.cancel", defaultMessage: "ui.shared.eventActionsMenu.item.cancel" })] }), "cancel")
             ]
         ];
@@ -154,6 +167,6 @@ function EventActionsMenu(inProps) {
     if (!scEvent) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { onClick: handleOpen }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "more_vert" }) })), isMobile ? ((0, jsx_runtime_1.jsx)(SwipeableDrawerRoot, Object.assign({ className: classes.drawerRoot, anchor: "bottom", open: Boolean(anchorEl), onClose: handleClose, onOpen: handleOpen, PaperProps: { className: classes.paper }, disableSwipeToOpen: true }, { children: (0, jsx_runtime_1.jsx)(material_1.List, { children: renderList() }) }))) : ((0, jsx_runtime_1.jsx)(MenuRoot, Object.assign({ className: classes.menuRoot, anchorEl: anchorEl, open: Boolean(anchorEl), onClose: handleClose, PaperProps: { className: classes.paper } }, { children: renderList() }))), openConfirmDialog && ((0, jsx_runtime_1.jsx)(ConfirmDialog_1.default, { open: openConfirmDialog, title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.shared.eventActionsMenu.dialog.msg", defaultMessage: "ui.shared.eventActionsMenu.dialog.msg" }), btnConfirm: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.shared.eventActionsMenu.dialog.confirm", defaultMessage: "ui.shared.eventActionsMenu.dialog.confirm" }), onConfirm: handleDeleteThread, onClose: handleCloseDialog }))] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { onClick: handleOpen }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "more_vert" }) })), isMobile ? ((0, jsx_runtime_1.jsx)(SwipeableDrawerRoot, Object.assign({ className: classes.drawerRoot, anchor: "bottom", open: Boolean(anchorEl), onClose: handleClose, onOpen: handleOpen, PaperProps: { className: classes.paper }, disableSwipeToOpen: true }, { children: (0, jsx_runtime_1.jsx)(material_1.List, { children: renderList() }) }))) : ((0, jsx_runtime_1.jsx)(MenuRoot, Object.assign({ className: classes.menuRoot, anchorEl: anchorEl, open: Boolean(anchorEl), onClose: handleClose, PaperProps: { className: classes.paper } }, { children: renderList() }))), openConfirmDialog && ((0, jsx_runtime_1.jsx)(ConfirmDialog_1.default, { open: openConfirmDialog, title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.shared.eventActionsMenu.dialog.msg", defaultMessage: "ui.shared.eventActionsMenu.dialog.msg" }), btnConfirm: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.shared.eventActionsMenu.dialog.confirm", defaultMessage: "ui.shared.eventActionsMenu.dialog.confirm" }), onConfirm: handleDeleteThread, onClose: handleCloseDialog })), openEdit && (0, jsx_runtime_1.jsx)(EventForm_1.default, { onClose: handleEditClick, event: scEvent, onSuccess: handleEditSuccess })] }));
 }
 exports.default = EventActionsMenu;

package/lib/cjs/shared/Media/Link/DisplayComponent.js

@@ -12,10 +12,15 @@ const LazyLoad_1 = require("../../../constants/LazyLoad");
 const Skeleton_1 = tslib_1.__importDefault(require("@mui/material/Skeleton"));
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const constants_1 = require("./constants");
+const material_1 = require("@mui/material");
 const filter_1 = tslib_1.__importDefault(require("./filter"));
 const classes = {
     displayRoot: `${constants_1.PREFIX}-display-root`,
     displayLink: `${constants_1.PREFIX}-link`,
+    displayHtmlWrap: `${constants_1.PREFIX}-html-wrap`,
+    displayHtml: `${constants_1.PREFIX}-html`,
+    displayHtmlPlaceholder: `${constants_1.PREFIX}-html-placeholder`,
+    displayHtmlLoading: `${constants_1.PREFIX}-html-loading`,
     displayVideo: `${constants_1.PREFIX}-video`,
     thumbnail: `${constants_1.PREFIX}-thumbnail`,
     thumbnailFullWidth: `${constants_1.PREFIX}-thumbnail`,
@@ -40,12 +45,23 @@ exports.default = (props) => {
     // RENDER
     /**
      * Renders link display
-     * @param (link)
-     * @param(key)
+     * @param media
+     * @param key
      */
-    const renderPreview = (link, key) => {
-        const domain = new URL(link.embed.metadata.url).hostname.replace('www.', '');
-        return ((0, jsx_runtime_1.jsxs)(Box_1.default, Object.assign({ className: classes.displayLink }, { children: [link.embed.metadata.images && link.embed.metadata.images.length > 0 && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: fullWidth ? ((0, jsx_runtime_1.jsx)(Box_1.default, { className: (0, classnames_1.default)(classes.thumbnailFullWidth, classes.image), style: { background: `url(${link.image})`, paddingBottom: `${100 / link.image_width / link.image_height}%` } })) : ((0, jsx_runtime_1.jsx)(Box_1.default, { className: (0, classnames_1.default)(classes.thumbnail, classes.image), style: { background: `url(${link.image})` } })) })), (0, jsx_runtime_1.jsxs)(Box_1.default, Object.assign({ className: classes.snippet }, { children: [(0, jsx_runtime_1.jsx)("b", Object.assign({ className: classes.snippetTitle }, { children: link.embed.metadata.title })), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("p", Object.assign({ className: classes.snippetDescription }, { children: link.embed.metadata.description })), (0, jsx_runtime_1.jsx)("a", Object.assign({ href: link.embed.metadata.url, target: '_blank', onClick: () => handleLinkClick(link) }, { children: domain }))] })), (0, jsx_runtime_1.jsx)("div", { style: { clear: 'both' } })] }), key));
+    const renderPreview = (media, key) => {
+        // if (media.embed.metadata.html) {
+        // 	return renderHtml(media, key);
+        // }
+        const domain = new URL(media.embed.metadata.url).hostname.replace('www.', '');
+        return ((0, jsx_runtime_1.jsxs)(Box_1.default, Object.assign({ className: classes.displayLink }, { children: [media.embed.metadata.images && media.embed.metadata.images.length > 0 && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: fullWidth ? ((0, jsx_runtime_1.jsx)(Box_1.default, { className: (0, classnames_1.default)(classes.thumbnailFullWidth, classes.image), style: { background: `url(${media.image})`, paddingBottom: `${100 / media.image_width / media.image_height}%` } })) : ((0, jsx_runtime_1.jsx)(Box_1.default, { className: (0, classnames_1.default)(classes.thumbnail, classes.image), style: { background: `url(${media.image})` } })) })), (0, jsx_runtime_1.jsxs)(Box_1.default, Object.assign({ className: classes.snippet }, { children: [(0, jsx_runtime_1.jsx)("b", Object.assign({ className: classes.snippetTitle }, { children: media.embed.metadata.title })), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("p", Object.assign({ className: classes.snippetDescription }, { children: media.embed.metadata.description })), (0, jsx_runtime_1.jsx)("a", Object.assign({ href: media.embed.metadata.url, target: '_blank', onClick: () => handleLinkClick(media) }, { children: domain }))] })), (0, jsx_runtime_1.jsx)("div", { style: { clear: 'both' } })] }), key));
+    };
+    /**
+     * Render html embed
+     * @param media
+     * @param key
+     */
+    const renderHtml = (media, key) => {
+        return ((0, jsx_runtime_1.jsxs)(Box_1.default, Object.assign({ className: classes.displayHtmlWrap }, { children: [(0, jsx_runtime_1.jsx)("div", { dangerouslySetInnerHTML: { __html: media.embed.metadata.html }, className: classes.displayHtml }), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: classes.displayHtmlPlaceholder, style: { paddingTop: `${(100 * media.embed.metadata.height) / media.embed.metadata.width}%`, maxHeight: media.embed.metadata.height } }, { children: (0, jsx_runtime_1.jsx)(material_1.CircularProgress, { size: 20, className: classes.displayHtmlLoading }) }))] }), key));
     };
     /**
      * Renders component