@selfcommunity/react-ui 0.7.50-events.38 → 0.7.50-events.40

package/lib/cjs/components/EventSubscribeButton/EventSubscribeButton.js

@@ -0,0 +1,193 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const styles_1 = require("@mui/material/styles");
+const utils_1 = require("@selfcommunity/utils");
+const react_core_1 = require("@selfcommunity/react-core");
+const types_1 = require("@selfcommunity/types");
+const react_intl_1 = require("react-intl");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const system_1 = require("@mui/system");
+const Errors_1 = require("../../constants/Errors");
+const material_1 = require("@mui/material");
+const lab_1 = require("@mui/lab");
+const PREFIX = 'SCEventSubscribeButton';
+const classes = {
+    requestRoot: `${PREFIX}-request-root`,
+    selectRoot: `${PREFIX}-select-root`,
+    drawerRoot: `${PREFIX}-drawer-root`,
+    menuRoot: `${PREFIX}-menu-root`,
+    paper: `${PREFIX}-paper`,
+    item: `${PREFIX}-item`,
+    going: `${PREFIX}-going`,
+    notGoing: `${PREFIX}-not-going`
+};
+const options = [
+    {
+        value: types_1.SCEventSubscriptionStatusType.GOING,
+        label: react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.eventSubscribeButton.going", defaultMessage: "ui.eventSubscribeButton.going" })
+    },
+    {
+        value: types_1.SCEventSubscriptionStatusType.NOT_GOING,
+        label: react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.eventSubscribeButton.notGoing", defaultMessage: "ui.eventSubscribeButton.notGoing" })
+    }
+];
+const RequestRoot = (0, styles_1.styled)(lab_1.LoadingButton, {
+    name: PREFIX,
+    slot: 'RequestRoot'
+})(() => ({}));
+const SelectRoot = (0, styles_1.styled)(material_1.Button, {
+    name: PREFIX,
+    slot: 'SelectRoot'
+})(() => ({}));
+const SwipeableDrawerRoot = (0, styles_1.styled)(material_1.SwipeableDrawer, {
+    name: PREFIX,
+    slot: 'DrawerRoot'
+})(() => ({}));
+const MenuRoot = (0, styles_1.styled)(material_1.Menu, {
+    name: PREFIX,
+    slot: 'MenuRoot'
+})(() => ({}));
+/**
+ * > API documentation for the Community-JS Event Subscribe Button component. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {EventSubscribeButton} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCEventSubscribeButton` can be used when providing style overrides in the theme.
+
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCEventSubscribeButton-root|Styles applied to the root element.|
+
+ * @param inProps
+ */
+function EventSubscribeButton(inProps) {
+    var _a;
+    // PROPS
+    const props = (0, system_1.useThemeProps)({
+        props: inProps,
+        name: PREFIX
+    });
+    const { className, eventId, event, user, onSubscribe } = props, rest = tslib_1.__rest(props, ["className", "eventId", "event", "user", "onSubscribe"]);
+    // STATE
+    const [status, setStatus] = (0, react_1.useState)(null);
+    const [anchorEl, setAnchorEl] = react_1.default.useState(null);
+    const open = Boolean(anchorEl);
+    // CONTEXT
+    const scContext = (0, react_core_1.useSCContext)();
+    const scUserContext = (0, react_core_1.useSCUser)();
+    const scEventsManager = scUserContext.managers.events;
+    const theme = (0, material_1.useTheme)();
+    const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'));
+    // CONST
+    const authUserId = scUserContext.user ? scUserContext.user.id : null;
+    const { scEvent } = (0, react_core_1.useSCFetchEvent)({
+        id: eventId,
+        event,
+        cacheStrategy: authUserId ? utils_1.CacheStrategies.CACHE_FIRST : utils_1.CacheStrategies.STALE_WHILE_REVALIDATE
+    });
+    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]);
+    // HANDLERS
+    const handleOpen = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+    (0, react_1.useEffect)(() => {
+        /**
+         * Call scEventsManager.subscriptionStatus inside an effect
+         * to avoid warning rendering child during update parent state
+         */
+        if (authUserId) {
+            setStatus(scEventsManager === null || scEventsManager === void 0 ? void 0 : scEventsManager.subscriptionStatus(scEvent));
+        }
+    }, [authUserId, scEventsManager === null || scEventsManager === void 0 ? void 0 : scEventsManager.subscriptionStatus, scEvent]);
+    const toggleGoingToEvent = (user) => {
+        scEventsManager
+            .toggleEventAttendance(scEvent, user === null || user === void 0 ? void 0 : user.id)
+            .then(() => {
+            const _status = scEvent.privacy === types_1.SCEventPrivacyType.PRIVATE && scEvent.subscription_status !== types_1.SCEventSubscriptionStatusType.INVITED
+                ? types_1.SCEventSubscriptionStatusType.REQUESTED
+                : scEvent.subscription_status === types_1.SCEventSubscriptionStatusType.GOING
+                    ? types_1.SCEventSubscriptionStatusType.SUBSCRIBED
+                    : types_1.SCEventSubscriptionStatusType.GOING;
+            onSubscribe && onSubscribe(scEvent, _status);
+        })
+            .catch((e) => {
+            utils_1.Logger.error(Errors_1.SCOPE_SC_UI, e);
+        });
+    };
+    const toggleNotGoingToEvent = () => {
+        scEventsManager
+            .toggleEventNonattendance(scEvent)
+            .then(() => {
+            const _status = scEvent.subscription_status === types_1.SCEventSubscriptionStatusType.NOT_GOING
+                ? types_1.SCEventSubscriptionStatusType.SUBSCRIBED
+                : types_1.SCEventSubscriptionStatusType.NOT_GOING;
+            onSubscribe && onSubscribe(scEvent, _status);
+        })
+            .catch((e) => {
+            utils_1.Logger.error(Errors_1.SCOPE_SC_UI, e);
+        });
+    };
+    const handleToggleAction = (event) => {
+        const _status = event.target.value;
+        setAnchorEl(null);
+        if (!scUserContext.user) {
+            scContext.settings.handleAnonymousAction();
+        }
+        else {
+            (_status === types_1.SCEventSubscriptionStatusType.NOT_GOING && !(user === null || user === void 0 ? void 0 : user.id)) || (!_status && (user === null || user === void 0 ? void 0 : user.id)) ? toggleNotGoingToEvent() : toggleGoingToEvent();
+        }
+    };
+    function renderMenuItems() {
+        return (react_1.default.createElement(material_1.Box, null, options.map((option) => (react_1.default.createElement(material_1.MenuItem, { key: option.value, className: classes.item },
+            option.label,
+            react_1.default.createElement(material_1.Checkbox, { size: "small", checked: status === option.value, value: option.value, onChange: handleToggleAction, name: `${option.value}-option`, inputProps: { 'aria-label': `${option.label}` } }))))));
+    }
+    /**
+     * Get current translated status
+     */
+    const getStatus = (0, react_1.useMemo)(() => {
+        let _status;
+        switch (status) {
+            case types_1.SCEventSubscriptionStatusType.REQUESTED:
+                _status = react_1.default.createElement(react_intl_1.FormattedMessage, { defaultMessage: "ui.eventSubscribeButton.waitingApproval", id: "ui.eventSubscribeButton.waitingApproval" });
+                break;
+            case types_1.SCEventSubscriptionStatusType.GOING:
+                _status = react_1.default.createElement(react_intl_1.FormattedMessage, { defaultMessage: "ui.eventSubscribeButton.going", id: "ui.eventSubscribeButton.going" });
+                break;
+            case types_1.SCEventSubscriptionStatusType.INVITED:
+                _status = react_1.default.createElement(react_intl_1.FormattedMessage, { defaultMessage: "ui.eventSubscribeButton.accept", id: "ui.eventSubscribeButton.accept" });
+                break;
+            case types_1.SCEventSubscriptionStatusType.NOT_GOING:
+                _status = react_1.default.createElement(react_intl_1.FormattedMessage, { defaultMessage: "ui.eventSubscribeButton.notGoing", id: "ui.eventSubscribeButton.notGoing" });
+                break;
+            default:
+                (scEvent === null || scEvent === void 0 ? void 0 : scEvent.privacy) === types_1.SCEventPrivacyType.PUBLIC
+                    ? (_status = react_1.default.createElement(react_intl_1.FormattedMessage, { defaultMessage: "ui.eventSubscribeButton.label", id: "ui.eventSubscribeButton.label" }))
+                    : (_status = (react_1.default.createElement(react_intl_1.FormattedMessage, { defaultMessage: "ui.eventSubscribeButton.requestParticipation", id: "ui.eventSubscribeButton.requestParticipation" })));
+                break;
+        }
+        return _status;
+    }, [status, scEvent]);
+    if (!scEvent || (isEventAdmin && (user === null || user === void 0 ? void 0 : user.id) === scUserContext.user.id) || (isEventAdmin && !(user === null || user === void 0 ? void 0 : user.id))) {
+        return null;
+    }
+    return (react_1.default.createElement(react_1.default.Fragment, null, (scEvent === null || scEvent === void 0 ? void 0 : scEvent.privacy) !== types_1.SCEventPrivacyType.PRIVATE ? (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(SelectRoot, Object.assign({ className: (0, classnames_1.default)(classes.selectRoot, className, { [classes.going]: status && status === types_1.SCEventSubscriptionStatusType.GOING }, { [classes.notGoing]: status && status === types_1.SCEventSubscriptionStatusType.NOT_GOING }), onClick: handleOpen, endIcon: react_1.default.createElement(material_1.Icon, null, open ? 'expand_less' : 'expand_more'), startIcon: status &&
+                status !== types_1.SCEventSubscriptionStatusType.SUBSCRIBED && (react_1.default.createElement(material_1.Icon, null, status === types_1.SCEventSubscriptionStatusType.GOING ? 'circle_checked' : 'circle_closed')) }, rest), getStatus),
+        isMobile ? (react_1.default.createElement(SwipeableDrawerRoot, { className: classes.drawerRoot, PaperProps: { className: classes.paper }, open: open, onClose: handleClose, onOpen: handleOpen, anchor: "bottom", disableSwipeToOpen: true }, renderMenuItems())) : (react_1.default.createElement(MenuRoot, { className: classes.menuRoot, anchorEl: anchorEl, open: open, onClose: handleClose }, renderMenuItems())))) : (react_1.default.createElement(RequestRoot, Object.assign({ className: (0, classnames_1.default)(classes.requestRoot, className), variant: "outlined", size: "small", loading: scUserContext.user ? scEventsManager.isLoading(scEvent) : null, disabled: status === types_1.SCEventSubscriptionStatusType.REQUESTED }, rest), getStatus))));
+}
+exports.default = EventSubscribeButton;

package/lib/cjs/components/EventSubscribeButton/index.d.ts

@@ -0,0 +1,3 @@
+import EventSubscribeButton, { EventSubscribeButtonProps } from './EventSubscribeButton';
+export default EventSubscribeButton;
+export { EventSubscribeButtonProps };

package/lib/cjs/components/EventSubscribeButton/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const EventSubscribeButton_1 = tslib_1.__importDefault(require("./EventSubscribeButton"));
+exports.default = EventSubscribeButton_1.default;

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

@@ -1,23 +1,23 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importStar(require("react"));
-const styles_1 = require("@mui/material/styles");
 const material_1 = require("@mui/material");
+const styles_1 = require("@mui/material/styles");
+const system_1 = require("@mui/system");
 const api_services_1 = require("@selfcommunity/api-services");
 const react_core_1 = require("@selfcommunity/react-core");
 const types_1 = require("@selfcommunity/types");
-const Event_1 = tslib_1.__importStar(require("../Event"));
-const react_intl_1 = require("react-intl");
+const utils_1 = require("@selfcommunity/utils");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
-const system_1 = require("@mui/system");
+const react_1 = tslib_1.__importStar(require("react"));
+const react_intl_1 = require("react-intl");
 const Errors_1 = require("../../constants/Errors");
-const utils_1 = require("@selfcommunity/utils");
-const HiddenPlaceholder_1 = tslib_1.__importDefault(require("../../shared/HiddenPlaceholder"));
-const constants_1 = require("./constants");
-const Skeleton_1 = tslib_1.__importDefault(require("../Events/Skeleton"));
 const Pagination_1 = require("../../constants/Pagination");
+const HiddenPlaceholder_1 = tslib_1.__importDefault(require("../../shared/HiddenPlaceholder"));
 const CreateEventButton_1 = tslib_1.__importDefault(require("../CreateEventButton"));
+const Event_1 = tslib_1.__importStar(require("../Event"));
+const Skeleton_1 = tslib_1.__importDefault(require("../Events/Skeleton"));
+const constants_1 = require("./constants");
 const classes = {
     root: `${constants_1.PREFIX}-root`,
     filters: `${constants_1.PREFIX}-filters`,
@@ -76,7 +76,7 @@ function Events(inProps) {
         props: inProps,
         name: constants_1.PREFIX
     });
-    const { endpointQueryParams = { limit: 8, offset: Pagination_1.DEFAULT_PAGINATION_OFFSET }, className, EventComponentProps = {}, showFilters = false, filters, general = true } = props, rest = tslib_1.__rest(props, ["endpointQueryParams", "className", "EventComponentProps", "showFilters", "filters", "general"]);
+    const { endpointQueryParams = { limit: 8, offset: Pagination_1.DEFAULT_PAGINATION_OFFSET }, className, EventComponentProps = {}, showFilters = false, filters, general = false } = props, rest = tslib_1.__rest(props, ["endpointQueryParams", "className", "EventComponentProps", "showFilters", "filters", "general"]);
     // STATE
     const [events, setEvents] = (0, react_1.useState)([]);
     const [loading, setLoading] = (0, react_1.useState)(true);
@@ -213,7 +213,8 @@ function Events(inProps) {
                     filteredEvents.map((event) => (react_1.default.createElement(material_1.Grid, { item: true, xs: 12, sm: 8, md: 6, key: event.id, className: classes.item },
                         react_1.default.createElement(Event_1.default, Object.assign({ event: event, eventId: event.id }, EventComponentProps))))),
                     filteredEvents.length <= 3 && (react_1.default.createElement(material_1.Grid, { item: true, xs: 12, sm: 8, md: 6, key: 'skeleton-item', className: classes.itemSkeleton },
-                        react_1.default.createElement(Event_1.EventSkeleton, { action: react_1.default.createElement(CreateEventButton_1.default, null) }))))),
+                        react_1.default.createElement(Event_1.EventSkeleton, { action: react_1.default.createElement(CreateEventButton_1.default, { variant: "outlined", color: "primary", size: "small" },
+                                react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.events.skeleton.action.add", defaultMessage: "ui.events.skeleton.action.add" })) }))))),
             Boolean(next) && (react_1.default.createElement(material_1.Button, { color: "secondary", variant: "text", onClick: handleNext, className: classes.showMore },
                 react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.events.button.seeMore", defaultMessage: "ui.events.button.seeMore" }))))))));
     /**

package/lib/cjs/components/FeedObject/FeedObject.js

@@ -440,7 +440,7 @@ function FeedObject(inProps) {
                     obj.group && (react_1.default.createElement("div", { className: classes.group },
                         react_1.default.createElement(material_1.Chip, { color: "secondary", size: "small", key: obj.group.id, icon: react_1.default.createElement(Icon_1.default, null, "groups"), component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.GROUP_ROUTE_NAME, obj.group), clickable: true }))),
                     obj.event && (react_1.default.createElement("div", { className: classes.event },
-                        react_1.default.createElement(material_1.Chip, { color: "secondary", size: "small", key: obj.event.id, icon: react_1.default.createElement(Icon_1.default, null, "CalendarIcon"), component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.EVENT_ROUTE_NAME, obj.event), clickable: true })))),
+                        react_1.default.createElement(material_1.Chip, { color: "secondary", size: "small", key: obj.event.id, label: obj.event.name, icon: react_1.default.createElement(Icon_1.default, null, "CalendarIcon"), component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.EVENT_ROUTE_NAME, obj.event), clickable: true })))),
                 obj.categories.map((c) => (react_1.default.createElement(react_core_1.Link, { to: scRoutingContext.url(react_core_1.SCRoutes.CATEGORY_ROUTE_NAME, c), key: c.id },
                     react_1.default.createElement(material_1.Typography, { variant: "overline" }, c.name)))))),
             obj.group && !obj.categories.length && (react_1.default.createElement("div", { className: classes.group },

package/lib/cjs/components/NavigationToolbar/NavigationToolbar.d.ts

@@ -85,6 +85,8 @@ export interface NavigationToolbarProps extends ToolbarProps {
  |navigation|.SCNavigationToolbar-navigation|Styles applied to the navigation container element|
  |home|.SCNavigationToolbar-home|Styles applied to the home button|
  |explore|.SCNavigationToolbar-explore|Styles applied to the explore button|
+ |groups|.SCNavigationToolbar-groups|Styles applied to the group button|
+ |events|.SCNavigationToolbar-events|Styles applied to the event button|
  |search|.SCNavigationToolbar-search|Styles applied to the search component|
  |composer|.SCNavigationToolbar-composer|Styles applied to the composer component|
  |profile|.SCNavigationToolbar-profile|Styles applied to the profile button|

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

@@ -24,6 +24,7 @@ const classes = {
     navigation: `${constants_1.PREFIX}-navigation`,
     home: `${constants_1.PREFIX}-home`,
     explore: `${constants_1.PREFIX}-explore`,
+    events: `${constants_1.PREFIX}-events`,
     groups: `${constants_1.PREFIX}-groups`,
     search: `${constants_1.PREFIX}-search`,
     composer: `${constants_1.PREFIX}-composer`,
@@ -76,6 +77,8 @@ const PREFERENCES = [
  |navigation|.SCNavigationToolbar-navigation|Styles applied to the navigation container element|
  |home|.SCNavigationToolbar-home|Styles applied to the home button|
  |explore|.SCNavigationToolbar-explore|Styles applied to the explore button|
+ |groups|.SCNavigationToolbar-groups|Styles applied to the group button|
+ |events|.SCNavigationToolbar-events|Styles applied to the event button|
  |search|.SCNavigationToolbar-search|Styles applied to the search component|
  |composer|.SCNavigationToolbar-composer|Styles applied to the composer component|
  |profile|.SCNavigationToolbar-profile|Styles applied to the profile button|
@@ -107,6 +110,7 @@ function NavigationToolbar(inProps) {
     }, [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 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)));
@@ -136,7 +140,11 @@ function NavigationToolbar(inProps) {
                 [classes.active]: value.startsWith(scRoutingContext.url(react_core_1.SCRoutes.GROUPS_SUBSCRIBED_ROUTE_NAME, {})) ||
                     value.startsWith(scRoutingContext.url(react_core_1.SCRoutes.GROUPS_ROUTE_NAME, {}))
             }), "aria-label": "Groups", to: scRoutingContext.url(react_core_1.SCRoutes.GROUPS_SUBSCRIBED_ROUTE_NAME, {}), component: react_core_1.Link },
-            react_1.default.createElement(Icon_1.default, null, "groups")))));
+            react_1.default.createElement(Icon_1.default, null, "groups"))),
+        eventsEnabled && scUserContext.user && (react_1.default.createElement(material_1.IconButton, { className: (0, classnames_1.default)(classes.events, {
+                [classes.active]: value.startsWith(scRoutingContext.url(react_core_1.SCRoutes.EVENT_ROUTE_NAME, {}))
+            }), "aria-label": "Groups", to: scRoutingContext.url(react_core_1.SCRoutes.EVENTS_ROUTE_NAME, {}), component: react_core_1.Link },
+            react_1.default.createElement(Icon_1.default, null, "CalendarIcon")))));
     return (react_1.default.createElement(Root, Object.assign({ className: (0, classnames_1.default)(className, classes.root) }, rest),
         react_1.default.createElement(NavigationMenuIconButtonComponent, null),
         react_1.default.createElement(react_core_1.Link, { to: scRoutingContext.url(react_core_1.SCRoutes.HOME_ROUTE_NAME, {}), className: classes.logo },

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

@@ -14,6 +14,7 @@ const NavigationSettingsIconButton_1 = tslib_1.__importDefault(require("../Navig
 const NavigationMenuIconButton_1 = tslib_1.__importDefault(require("../NavigationMenuIconButton"));
 const constants_1 = require("./constants");
 const types_1 = require("@selfcommunity/types");
+const ComposerIconButton_1 = tslib_1.__importDefault(require("../ComposerIconButton"));
 const classes = {
     root: `${constants_1.PREFIX}-root`,
     logo: `${constants_1.PREFIX}-logo`,
@@ -79,6 +80,10 @@ function NavigationToolbarMobile(inProps) {
     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 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;
     // HANDLERS
     const handleOpenSearch = (0, react_1.useCallback)(() => {
         setSearchOpen(true);
@@ -100,12 +105,17 @@ function NavigationToolbarMobile(inProps) {
     return (react_1.default.createElement(Root, Object.assign({ className: (0, classnames_1.default)(className, classes.root) }, rest),
         _children,
         startActions,
-        (preferences[react_core_1.SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY].value || scUserContext.user) && !disableSearch && (react_1.default.createElement(react_1.default.Fragment, null,
+        (contentAvailable || scUserContext.user) && !disableSearch && (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement(material_1.IconButton, { className: classes.search, onClick: handleOpenSearch },
                 react_1.default.createElement(Icon_1.default, null, "search")),
             react_1.default.createElement(SearchDialog_1.default, { className: classes.searchDialog, fullScreen: true, open: searchOpen, SearchAutocompleteProps: Object.assign(Object.assign({}, SearchAutocompleteProps), { onClear: handleCloseSearch }) }))),
         endActions,
-        scUserContext.user && groupsEnabled && (react_1.default.createElement(material_1.IconButton, { className: classes.notifications, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_NOTIFICATIONS_ROUTE_NAME, {}) },
+        (!postOnlyStaffEnabled || (react_core_1.UserUtils.isStaff(scUserContext.user) && postOnlyStaffEnabled)) &&
+            groupsEnabled &&
+            eventsEnabled &&
+            (scUserContext.user || contentAvailable) &&
+            exploreStreamEnabled && react_1.default.createElement(ComposerIconButton_1.default, null),
+        scUserContext.user && (groupsEnabled || eventsEnabled) && (react_1.default.createElement(material_1.IconButton, { className: classes.notifications, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_NOTIFICATIONS_ROUTE_NAME, {}) },
             react_1.default.createElement(material_1.Badge, { badgeContent: scUserContext.user.unseen_notification_banners_counter + scUserContext.user.unseen_interactions_counter, color: "secondary" },
                 react_1.default.createElement(Icon_1.default, null, "notifications_active")))),
         scUserContext.user ? (react_1.default.createElement(NavigationSettingsIconButtonComponent, { className: classes.settings })) : (react_1.default.createElement(material_1.Button, { className: classes.login, color: "inherit", component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.SIGNIN_ROUTE_NAME, {}) },

package/lib/cjs/components/User/User.d.ts

@@ -1,6 +1,6 @@
-import React from 'react';
 import { ButtonBaseProps } from '@mui/material';
 import { SCUserType } from '@selfcommunity/types';
+import React, { ReactNode } from 'react';
 import { FollowUserButtonProps } from '../FollowUserButton/FollowUserButton';
 import { FriendshipButtonProps } from '../FriendshipUserButton/FriendshipUserButton';
 import { WidgetProps } from '../Widget';
@@ -49,6 +49,7 @@ export interface UserProps extends WidgetProps {
      * @default {}
      */
     buttonProps?: ButtonBaseProps | null;
+    secondary?: ReactNode | null;
     /**
      * Any other properties
      */

package/lib/cjs/components/User/User.js

@@ -1,19 +1,19 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importStar(require("react"));
-const styles_1 = require("@mui/material/styles");
-const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
 const material_1 = require("@mui/material");
+const styles_1 = require("@mui/material/styles");
+const system_1 = require("@mui/system");
 const react_core_1 = require("@selfcommunity/react-core");
-const react_intl_1 = require("react-intl");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
-const ConnectionUserButton_1 = tslib_1.__importDefault(require("../ConnectionUserButton"));
-const system_1 = require("@mui/system");
+const react_1 = tslib_1.__importStar(require("react"));
+const react_intl_1 = require("react-intl");
 const BaseItemButton_1 = tslib_1.__importDefault(require("../../shared/BaseItemButton"));
-const UserDeletedSnackBar_1 = tslib_1.__importDefault(require("../../shared/UserDeletedSnackBar"));
 const UserAvatar_1 = tslib_1.__importDefault(require("../../shared/UserAvatar"));
+const UserDeletedSnackBar_1 = tslib_1.__importDefault(require("../../shared/UserDeletedSnackBar"));
+const ConnectionUserButton_1 = tslib_1.__importDefault(require("../ConnectionUserButton"));
 const constants_1 = require("./constants");
+const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
 const messages = (0, react_intl_1.defineMessages)({
     userFollowers: {
         id: 'ui.user.userFollowers',
@@ -67,7 +67,7 @@ function User(inProps) {
         props: inProps,
         name: constants_1.PREFIX
     });
-    const { userId = null, user = null, handleIgnoreAction, className = null, followConnectUserButtonProps = {}, showFollowers = false, elevation, badgeContent = null, actions = null, isGroupAdmin = false, buttonProps = null } = props, rest = tslib_1.__rest(props, ["userId", "user", "handleIgnoreAction", "className", "followConnectUserButtonProps", "showFollowers", "elevation", "badgeContent", "actions", "isGroupAdmin", "buttonProps"]);
+    const { userId = null, user = null, handleIgnoreAction, className = null, followConnectUserButtonProps = {}, showFollowers = false, elevation, badgeContent = null, actions = null, isGroupAdmin = false, buttonProps = null, secondary = null } = props, rest = tslib_1.__rest(props, ["userId", "user", "handleIgnoreAction", "className", "followConnectUserButtonProps", "showFollowers", "elevation", "badgeContent", "actions", "isGroupAdmin", "buttonProps", "secondary"]);
     // STATE
     const { scUser, setSCUser } = (0, react_core_1.useSCFetchUser)({ id: userId, user });
     // CONTEXT
@@ -109,7 +109,7 @@ function User(inProps) {
                 react_1.default.createElement(material_1.Avatar, { alt: scUser.username, src: scUser.avatar, className: classes.avatar }))) : (react_1.default.createElement(UserAvatar_1.default, { hide: !hasBadge },
                 react_1.default.createElement(material_1.Avatar, { alt: scUser.username, src: scUser.avatar, className: classes.avatar }))), primary: (hasBadge && preferences) || isGroupAdmin ? (react_1.default.createElement(react_1.default.Fragment, null,
                 scUser.username,
-                react_1.default.createElement(material_1.Chip, { component: "span", className: isGroupAdmin ? classes.groupAdminBadgeLabel : classes.staffBadgeLabel, size: "small", label: isGroupAdmin ? (react_1.default.createElement(react_intl_1.FormattedMessage, { defaultMessage: "ui.user.group.admin", id: "ui.user.group.admin" })) : (preferences[react_core_1.SCPreferences.STAFF_STAFF_BADGE_LABEL]) }))) : (scUser.username), secondary: showFollowers ? `${intl.formatMessage(messages.userFollowers, { total: scUser.followers_counter })}` : scUser.description, actions: actions !== null && actions !== void 0 ? actions : renderAuthenticatedActions() })),
+                react_1.default.createElement(material_1.Chip, { component: "span", className: isGroupAdmin ? classes.groupAdminBadgeLabel : classes.staffBadgeLabel, size: "small", label: isGroupAdmin ? (react_1.default.createElement(react_intl_1.FormattedMessage, { defaultMessage: "ui.user.group.admin", id: "ui.user.group.admin" })) : (preferences[react_core_1.SCPreferences.STAFF_STAFF_BADGE_LABEL]) }))) : (scUser.username), secondary: secondary || (showFollowers ? `${intl.formatMessage(messages.userFollowers, { total: scUser.followers_counter })}` : scUser.description), actions: actions !== null && actions !== void 0 ? actions : renderAuthenticatedActions() })),
         openAlert && react_1.default.createElement(UserDeletedSnackBar_1.default, { open: openAlert, handleClose: () => setOpenAlert(false) })));
 }
 exports.default = User;

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

@@ -1,4 +1,4 @@
-import { SCUserType, SCGroupType } from '@selfcommunity/types';
+import { SCUserType, SCGroupType, SCEventType } from '@selfcommunity/types';
 /**
  * Define topics for pubsub
  */
@@ -21,3 +21,7 @@ export interface SCGroupMembersEventType {
     group: SCGroupType;
     user?: SCUserType;
 }
+export interface SCEventMembersEventType {
+    event: SCEventType;
+    user?: SCUserType;
+}