@selfcommunity/react-ui 0.11.0-alpha.9 → 0.11.0-alpha.91

package/lib/esm/components/NavigationMenuIconButton/DefaultDrawerContent.js

@@ -1,16 +1,17 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Box, Divider, Icon, List, ListItem, ListItemButton, ListItemIcon, ListItemText, Typography, useMediaQuery, useTheme, Zoom } from '@mui/material';
+import { Box, Divider, Icon, List, ListItem, ListItemButton, ListItemIcon, ListItemText, Typography, Zoom, styled, AccordionDetails, Accordion, AccordionSummary, Avatar } from '@mui/material';
 import { Link, SCPreferences, SCRoutes, useSCFetchCategories, useSCPreferences, useSCRouting, useSCUser } from '@selfcommunity/react-core';
 import { useEffect, useMemo, useState } from 'react';
 import Category from '../Category';
 import { FormattedMessage } from 'react-intl';
 import { sortByAttr } from '@selfcommunity/utils';
 import { SCFeatureName } from '@selfcommunity/types';
-import { styled } from '@mui/material/styles';
 import classNames from 'classnames';
 import { useThemeProps } from '@mui/system';
-import DefaultDrawerSkeleton from './DefaultDrawerSkeleton';
+import BaseItem from '../../shared/BaseItem';
+import FormazionePlaceholder from '../../assets/custom/formazione';
+import { DefaultCategoryTagName } from '../../constants/DefaultDrawerContent';
 const PREFIX = 'SCDefaultDrawerContent';
 const classes = {
     root: `${PREFIX}-root`,
@@ -28,20 +29,19 @@ export default function DefaultDrawerContent(inProps) {
         props: inProps,
         name: PREFIX
     });
-    const { className, CategoryItemProps = { showTooltip: true } } = props, rest = __rest(props, ["className", "CategoryItemProps"]);
+    const { className, CategoryItemProps = { showTooltip: true }, tagImage = '/' } = props, rest = __rest(props, ["className", "CategoryItemProps", "tagImage"]);
     // HOOKS
-    const { categories, isLoading } = useSCFetchCategories();
+    const { categories } = useSCFetchCategories();
     const [categoriesOrdered, setCategoriesOrdered] = useState([]);
     // ROUTING
     const scRoutingContext = useSCRouting();
     // CONTEXT
     const scUserContext = useSCUser();
-    const theme = useTheme();
-    const isMobile = useMediaQuery(theme.breakpoints.down('md'));
     // PREFERENCES
     const { preferences, features } = useSCPreferences();
     //STATE
     const [isHovered, setIsHovered] = useState({});
+    const [expanded, setExpanded] = useState(false);
     // MEMO
     const groupsEnabled = useMemo(() => preferences &&
         features &&
@@ -54,8 +54,15 @@ export default function DefaultDrawerContent(inProps) {
         features.includes(SCFeatureName.TAGGING) &&
         SCPreferences.CONFIGURATIONS_EVENTS_ENABLED in preferences &&
         preferences[SCPreferences.CONFIGURATIONS_EVENTS_ENABLED].value, [preferences, features]);
+    const coursesEnabled = useMemo(() => preferences &&
+        features &&
+        features.includes(SCFeatureName.COURSE) &&
+        SCPreferences.CONFIGURATIONS_COURSES_ENABLED in preferences &&
+        preferences[SCPreferences.CONFIGURATIONS_COURSES_ENABLED].value, [preferences, features]);
     const exploreStreamEnabled = preferences[SCPreferences.CONFIGURATIONS_EXPLORE_STREAM_ENABLED].value;
     const contentAvailable = preferences[SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY].value;
+    const showAllCategories = useMemo(() => SCPreferences.CONFIGURATIONS_SIDEBAR_SHOW_ALL_CATEGORIES_ENABLED in preferences &&
+        preferences[SCPreferences.CONFIGURATIONS_SIDEBAR_SHOW_ALL_CATEGORIES_ENABLED].value, [preferences]);
     // HANDLERS
     const handleMouseEnter = (index) => {
         setIsHovered((prevState) => {
@@ -67,16 +74,48 @@ export default function DefaultDrawerContent(inProps) {
             return Object.assign(Object.assign({}, prevState), { [index]: false });
         });
     };
+    const handleChange = (tagName) => (_event, isExpanded) => {
+        setExpanded(isExpanded ? tagName : false);
+    };
     // Order categories
     useEffect(() => {
-        setCategoriesOrdered(sortByAttr(categories, 'order'));
-    }, [categories]);
+        if (!scUserContext.user || (scUserContext.user && showAllCategories)) {
+            setCategoriesOrdered(sortByAttr(categories, 'order'));
+        }
+        else {
+            setCategoriesOrdered(sortByAttr(categories.filter((cat) => cat.followed), 'order'));
+        }
+    }, [scUserContext.user, showAllCategories, categories]);
     const getMouseEvents = (mouseEnter, mouseLeave) => ({
         onMouseEnter: mouseEnter,
         onMouseLeave: mouseLeave,
         onTouchStart: mouseEnter,
         onTouchMove: mouseLeave
     });
+    const taggedCategories = {};
+    const untaggedCategories = [];
+    categoriesOrdered.forEach((c) => {
+        var _a;
+        const visibleTags = ((_a = c.tags) !== null && _a !== void 0 ? _a : []).filter((tag) => tag.visible);
+        if (visibleTags.length > 0) {
+            visibleTags.forEach((tag) => {
+                if (!taggedCategories[tag.name])
+                    taggedCategories[tag.name] = [];
+                taggedCategories[tag.name].push(c);
+            });
+        }
+        else {
+            untaggedCategories.push(c);
+        }
+    });
     //order
-    return (_jsxs(Root, Object.assign({ className: classNames(className, classes.root) }, rest, { children: [isMobile && (_jsxs(_Fragment, { children: [_jsxs(List, Object.assign({ className: classes.navigation }, { children: [_jsx(ListItem, Object.assign({ disablePadding: true }, { children: _jsxs(ListItemButton, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.HOME_ROUTE_NAME, {}) }, { children: [_jsx(ListItemIcon, { children: _jsx(Icon, { children: "home" }) }), _jsx(ListItemText, { primary: _jsx(FormattedMessage, { id: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.home", defaultMessage: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.home" }) })] })) })), groupsEnabled && scUserContext.user && (_jsx(ListItem, Object.assign({ disablePadding: true }, { children: _jsxs(ListItemButton, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.GROUPS_ROUTE_NAME, {}) }, { children: [_jsx(ListItemIcon, { children: _jsx(Icon, { children: "groups" }) }), _jsx(ListItemText, { primary: _jsx(FormattedMessage, { id: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.groups", defaultMessage: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.groups" }) })] })) }))), eventsEnabled && (scUserContext.user || contentAvailable) && (_jsx(ListItem, Object.assign({ disablePadding: true }, { children: _jsxs(ListItemButton, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.EVENTS_ROUTE_NAME, {}) }, { children: [_jsx(ListItemIcon, { children: _jsx(Icon, { children: "CalendarIcon" }) }), _jsx(ListItemText, { primary: _jsx(FormattedMessage, { id: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.events", defaultMessage: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.events" }) })] })) }))), exploreStreamEnabled && (contentAvailable || scUserContext.user) && (_jsx(ListItem, Object.assign({ disablePadding: true }, { children: _jsxs(ListItemButton, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.EXPLORE_ROUTE_NAME, {}) }, { children: [_jsx(ListItemIcon, { children: _jsx(Icon, { children: "explore" }) }), _jsx(ListItemText, { primary: _jsx(FormattedMessage, { id: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.explore", defaultMessage: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.explore" }) })] })) })))] })), _jsx(Divider, {})] })), _jsx(Typography, Object.assign({ variant: "subtitle1", className: classes.title }, { children: _jsx(FormattedMessage, { id: "ui.navigationMenuIconButton.defaultDrawerContent.category.title", defaultMessage: "ui.navigationMenuIconButton.defaultDrawerContent.category.title" }) })), isLoading ? (_jsx(DefaultDrawerSkeleton, {})) : (_jsxs(_Fragment, { children: [!categoriesOrdered.length && (_jsx(Typography, Object.assign({ variant: "body1", className: classes.noResults }, { children: _jsx(FormattedMessage, { id: "ui.navigationMenuIconButton.defaultDrawerContent.category.noResults", defaultMessage: "ui.navigationMenuIconButton.defaultDrawerContent.category.noResults" }) }))), categoriesOrdered.map((c, index) => (_jsx(Zoom, Object.assign({ in: true, style: { transform: isHovered[c.id] && 'scale(1.05)' } }, { children: _jsx(ListItem, { children: _jsx(Category, Object.assign({ ButtonBaseProps: { component: Link, to: scRoutingContext.url(SCRoutes.CATEGORY_ROUTE_NAME, c) }, elevation: 0, category: c, actions: null }, CategoryItemProps, getMouseEvents(() => handleMouseEnter(c.id), () => handleMouseLeave(c.id)))) }, c.id) }), index)))] }))] })));
+    return (_jsxs(Root, Object.assign({ className: classNames(className, classes.root) }, rest, { children: [_jsxs(List, Object.assign({ className: classes.navigation }, { children: [scUserContext.user && (_jsx(ListItem, Object.assign({ disablePadding: true }, { children: _jsxs(ListItemButton, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.HOME_ROUTE_NAME, {}) }, { children: [_jsx(ListItemIcon, { children: _jsx(Icon, { children: "home" }) }), _jsx(ListItemText, { primary: _jsx(FormattedMessage, { id: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.home", defaultMessage: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.home" }) })] })) }))), coursesEnabled && (scUserContext.user || contentAvailable) && (_jsx(ListItem, Object.assign({ disablePadding: true }, { children: _jsxs(ListItemButton, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.COURSES_ROUTE_NAME, {}) }, { children: [_jsx(ListItemIcon, { children: _jsx(Icon, { children: "courses" }) }), _jsx(ListItemText, { primary: _jsx(FormattedMessage, { id: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.courses", defaultMessage: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.courses" }) })] })) }))), groupsEnabled && scUserContext.user && (_jsx(ListItem, Object.assign({ disablePadding: true }, { children: _jsxs(ListItemButton, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.GROUPS_ROUTE_NAME, {}) }, { children: [_jsx(ListItemIcon, { children: _jsx(Icon, { children: "groups" }) }), _jsx(ListItemText, { primary: _jsx(FormattedMessage, { id: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.groups", defaultMessage: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.groups" }) })] })) }))), eventsEnabled && (scUserContext.user || contentAvailable) && (_jsx(ListItem, Object.assign({ disablePadding: true }, { children: _jsxs(ListItemButton, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.EVENTS_ROUTE_NAME, {}) }, { children: [_jsx(ListItemIcon, { children: _jsx(Icon, { children: "CalendarIcon" }) }), _jsx(ListItemText, { primary: _jsx(FormattedMessage, { id: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.events", defaultMessage: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.events" }) })] })) }))), exploreStreamEnabled && (contentAvailable || scUserContext.user) && (_jsx(ListItem, Object.assign({ disablePadding: true }, { children: _jsxs(ListItemButton, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.EXPLORE_ROUTE_NAME, {}) }, { children: [_jsx(ListItemIcon, { children: _jsx(Icon, { children: "explore" }) }), _jsx(ListItemText, { primary: _jsx(FormattedMessage, { id: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.explore", defaultMessage: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.explore" }) })] })) })))] })), _jsx(Divider, {}), _jsx(Typography, Object.assign({ variant: "subtitle1", className: classes.title }, { children: _jsx(FormattedMessage, { id: "ui.navigationMenuIconButton.defaultDrawerContent.category.title", defaultMessage: "ui.navigationMenuIconButton.defaultDrawerContent.category.title" }) })), !categoriesOrdered.length && (_jsx(Typography, Object.assign({ variant: "body1", className: classes.noResults }, { children: _jsx(FormattedMessage, { id: "ui.navigationMenuIconButton.defaultDrawerContent.category.noResults", defaultMessage: "ui.navigationMenuIconButton.defaultDrawerContent.category.noResults" }) }))), _jsxs(_Fragment, { children: [Object.entries(taggedCategories).map(([tagName, categories]) => {
+                        var _a;
+                        if (!categories.length || !((_a = categories[0].tags) === null || _a === void 0 ? void 0 : _a.length))
+                            return null;
+                        return (_jsxs(Accordion, Object.assign({ expanded: expanded === tagName, onChange: handleChange(tagName), elevation: 0, onFocus: (e) => e.stopPropagation(), onClick: (e) => e.stopPropagation() }, { children: [_jsx(AccordionSummary, Object.assign({ expandIcon: _jsx(Icon, { children: "expand_more" }) }, { children: _jsx(BaseItem, { elevation: 0, image: _jsx(Avatar, { alt: tagName, src: tagName === DefaultCategoryTagName ? FormazionePlaceholder : tagImage, variant: "square" }), primary: tagName, disableTypography: false }) })), _jsx(AccordionDetails, { children: _jsx(List, { children: categories.map((c) => (_jsx(Zoom, Object.assign({ in: true }, { children: _jsx(ListItem, { children: _jsx(Category, Object.assign({ ButtonBaseProps: {
+                                                        component: Link,
+                                                        to: scRoutingContext.url(SCRoutes.CATEGORY_ROUTE_NAME, c)
+                                                    }, elevation: 0, category: c, actions: null }, CategoryItemProps, getMouseEvents(() => handleMouseEnter(c.id), () => handleMouseLeave(c.id)))) }) }), c.id))) }) })] }), tagName));
+                    }), untaggedCategories.length > 0 && (_jsx(_Fragment, { children: untaggedCategories.map((c, index) => (_jsx(Zoom, Object.assign({ in: true, style: { transform: isHovered[c.id] && 'scale(1.05)' } }, { children: _jsx(ListItem, { children: _jsx(Category, Object.assign({ ButtonBaseProps: { component: Link, to: scRoutingContext.url(SCRoutes.CATEGORY_ROUTE_NAME, c) }, elevation: 0, category: c, actions: null }, CategoryItemProps, getMouseEvents(() => handleMouseEnter(c.id), () => handleMouseLeave(c.id)))) }, c.id) }), index))) }))] })] })));
 }

package/lib/esm/components/NavigationMenuIconButton/DefaultDrawerSkeleton.d.ts

@@ -1,6 +1,6 @@
 import { BoxProps } from '@mui/material';
 export declare const PREFIX = "SCDefaultDrawerSkeleton";
-export type DefaultDrawerSkeletonProps = BoxProps;
+export declare type DefaultDrawerSkeletonProps = BoxProps;
 /**
  * > API documentation for the Community-JS Default Drawer Skeleton component. Learn about the available props and the CSS API.
 

package/lib/esm/components/NavigationMenuIconButton/DefaultDrawerSkeleton.js

@@ -1,7 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { styled } from '@mui/material/styles';
 import CategorySkeleton from '../Category/Skeleton';
-import { Box, ListItem } from '@mui/material';
+import { Box, ListItem, styled } from '@mui/material';
 export const PREFIX = 'SCDefaultDrawerSkeleton';
 const classes = {
     root: `${PREFIX}-skeleton-root`

package/lib/esm/components/NavigationMenuIconButton/DefaultHeaderContent.d.ts

@@ -1,3 +1,3 @@
 import { BoxProps } from '@mui/material';
-export type DefaultHeaderContentProps = BoxProps;
+export declare type DefaultHeaderContentProps = BoxProps;
 export default function DefaultHeaderContent(inProps: DefaultHeaderContentProps): JSX.Element;

package/lib/esm/components/NavigationMenuIconButton/DefaultHeaderContent.js

@@ -2,8 +2,7 @@ import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Link, SCPreferences, SCRoutes, useSCPreferences, useSCRouting } from '@selfcommunity/react-core';
 import { useMemo } from 'react';
-import { styled } from '@mui/material/styles';
-import { Box } from '@mui/material';
+import { Box, styled } from '@mui/material';
 import classNames from 'classnames';
 import { useThemeProps } from '@mui/system';
 const PREFIX = 'SCDefaultHeaderContent';

package/lib/esm/components/NavigationMenuIconButton/NavigationMenuDrawer.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { DrawerProps } from '@mui/material';
+import { DefaultDrawerContentProps } from './DefaultDrawerContent';
 import { CreateLiveStreamButtonProps } from '../CreateLiveStreamButton';
 export interface NavigationMenuDrawerProps extends DrawerProps {
     /**
@@ -17,6 +18,11 @@ export interface NavigationMenuDrawerProps extends DrawerProps {
      * @default null
      */
     drawerContent?: React.ReactNode;
+    /**
+     * Default Drawer Content props content
+     * @default null
+     */
+    defaultDrawerContentProps?: DefaultDrawerContentProps;
     /**
      * Hide drawer footer
      * @default true
@@ -26,7 +32,9 @@ export interface NavigationMenuDrawerProps extends DrawerProps {
      * Custom Drawer footer content
      * @default null
      */
-    drawerFooterContent?: React.ReactNode;
+    drawerFooterContent?: React.ReactNode | ((props: {
+        handleCloseMenuDrawer: (event: any, reason: 'backdropClick' | 'escapeKeyDown') => void;
+    }) => React.ReactNode);
     /**
      * Props to spread to ScrollContainer component
      * This lib use 'react-custom-scrollbars' component to perform scrollbars

package/lib/esm/components/NavigationMenuIconButton/NavigationMenuDrawer.js

@@ -1,15 +1,13 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useMemo } from 'react';
-import { styled } from '@mui/material/styles';
-import { Box, Divider, Drawer, Icon, IconButton, List } from '@mui/material';
+import React from 'react';
+import { Box, Divider, Drawer, Icon, IconButton, List, styled } from '@mui/material';
 import classNames from 'classnames';
 import { useThemeProps } from '@mui/system';
 import ScrollContainer from '../../shared/ScrollContainer';
 import DefaultDrawerContent from './DefaultDrawerContent';
 import DefaultHeaderContent from './DefaultHeaderContent';
 import CreateLiveStreamButton from '../CreateLiveStreamButton';
-import { useSCUser } from '@selfcommunity/react-core';
 const PREFIX = 'SCNavigationMenuDrawer';
 const classes = {
     root: `${PREFIX}-root`,
@@ -28,14 +26,22 @@ const Root = styled(Drawer, {
     overridesResolver: (props, styles) => styles.root
 })(({ theme }) => ({}));
 export default function NavigationMenuDrawer(inProps) {
-    var _a;
     // PROPS
     const props = useThemeProps({
         props: inProps,
         name: PREFIX
     });
-    const { className = null, showDrawerHeader = true, drawerHeaderContent = _jsx(DefaultHeaderContent, {}), drawerContent = _jsx(DefaultDrawerContent, {}), showDrawerFooterContent = true, drawerFooterContent = null, ScrollContainerProps = { hideTracksWhenNotNeeded: true }, CreateLiveStreamButtonComponentProps = {}, open, onClose } = props, rest = __rest(props, ["className", "showDrawerHeader", "drawerHeaderContent", "drawerContent", "showDrawerFooterContent", "drawerFooterContent", "ScrollContainerProps", "CreateLiveStreamButtonComponentProps", "open", "onClose"]);
-    const scUserContext = useSCUser();
-    const canCreateLiveStream = useMemo(() => { var _a, _b; return (_b = (_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission) === null || _b === void 0 ? void 0 : _b.create_live_stream; }, [(_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission]);
-    return (_jsxs(Root, Object.assign({ anchor: "left", className: classNames(classes.root, className), open: open, onClose: onClose }, rest, { children: [showDrawerHeader && (_jsxs(_Fragment, { children: [_jsxs(Box, Object.assign({ className: classes.drawerHeader }, { children: [drawerHeaderContent, _jsx(IconButton, Object.assign({ className: classes.drawerHeaderAction, onClick: onClose }, { children: _jsx(Icon, { children: "close" }) }))] })), _jsx(Divider, {})] })), _jsx(ScrollContainer, Object.assign({}, ScrollContainerProps, { children: _jsx(List, Object.assign({ className: classes.drawerContent, onClick: onClose }, { children: drawerContent })) })), showDrawerFooterContent && (_jsx(_Fragment, { children: _jsx(Box, Object.assign({ className: classes.drawerFooter }, { children: drawerFooterContent ? (drawerFooterContent) : (_jsx(Box, Object.assign({ className: classes.drawerFooterLiveStream }, { children: _jsx(CreateLiveStreamButton, Object.assign({ color: "primary", className: classes.drawerFooterLiveStreamButton, fullWidth: true }, CreateLiveStreamButtonComponentProps)) }))) })) }))] })));
+    const { className = null, showDrawerHeader = true, defaultDrawerContentProps = null, drawerHeaderContent = _jsx(DefaultHeaderContent, {}), drawerContent = _jsx(DefaultDrawerContent, Object.assign({}, defaultDrawerContentProps)), showDrawerFooterContent = true, drawerFooterContent = null, ScrollContainerProps = { hideTracksWhenNotNeeded: true }, CreateLiveStreamButtonComponentProps = {}, open, onClose } = props, rest = __rest(props, ["className", "showDrawerHeader", "defaultDrawerContentProps", "drawerHeaderContent", "drawerContent", "showDrawerFooterContent", "drawerFooterContent", "ScrollContainerProps", "CreateLiveStreamButtonComponentProps", "open", "onClose"]);
+    const footerContent = (() => {
+        if (typeof drawerFooterContent === 'function') {
+            return drawerFooterContent({ handleCloseMenuDrawer: onClose });
+        }
+        if (React.isValidElement(drawerFooterContent)) {
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            return React.cloneElement(drawerFooterContent, { handleCloseMenuDrawer: onClose });
+        }
+        return drawerFooterContent;
+    })();
+    return (_jsxs(Root, Object.assign({ anchor: "left", className: classNames(classes.root, className), open: open, onClose: onClose }, rest, { children: [showDrawerHeader && (_jsxs(_Fragment, { children: [_jsxs(Box, Object.assign({ className: classes.drawerHeader }, { children: [drawerHeaderContent, _jsx(IconButton, Object.assign({ className: classes.drawerHeaderAction, onClick: onClose }, { children: _jsx(Icon, { children: "close" }) }))] })), _jsx(Divider, {})] })), _jsx(ScrollContainer, Object.assign({}, ScrollContainerProps, { children: _jsx(List, Object.assign({ className: classes.drawerContent, onClick: onClose }, { children: drawerContent })) })), showDrawerFooterContent && (_jsx(_Fragment, { children: _jsx(Box, Object.assign({ component: "div", className: classes.drawerFooter }, { children: footerContent || (_jsx(Box, Object.assign({ className: classes.drawerFooterLiveStream }, { children: _jsx(CreateLiveStreamButton, Object.assign({ color: "primary", className: classes.drawerFooterLiveStreamButton, fullWidth: true }, CreateLiveStreamButtonComponentProps)) }))) })) }))] })));
 }

package/lib/esm/components/NavigationMenuIconButton/NavigationMenuIconButton.js

@@ -1,8 +1,7 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useState } from 'react';
-import { styled } from '@mui/material/styles';
-import { Icon, IconButton } from '@mui/material';
+import { Icon, IconButton, styled } from '@mui/material';
 import classNames from 'classnames';
 import { useThemeProps } from '@mui/system';
 import { SCPreferences, useSCPreferences, useSCUser } from '@selfcommunity/react-core';

package/lib/esm/components/NavigationSettingsIconButton/NavigationSettingsIconButton.js

@@ -1,16 +1,16 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useMemo, useState } from 'react';
-import { styled } from '@mui/material/styles';
-import { Divider, Icon, IconButton, List, ListItem, ListItemButton, ListItemIcon, Menu, MenuItem, SwipeableDrawer, useMediaQuery, useTheme } from '@mui/material';
-import { Link, SCPreferences, SCRoutes, UserUtils, useSCPreferences, useSCRouting, useSCUser } from '@selfcommunity/react-core';
+import { Divider, Icon, IconButton, List, ListItem, ListItemButton, ListItemIcon, Menu, MenuItem, SwipeableDrawer, useMediaQuery, useTheme, styled } from '@mui/material';
+import { Link, SCPreferences, SCRoutes, useFetchMenuFooter, UserUtils, useSCPaymentsEnabled, useSCPreferences, useSCRouting, useSCUser } from '@selfcommunity/react-core';
 import classNames from 'classnames';
 import { useThemeProps } from '@mui/system';
 import { FormattedMessage } from 'react-intl';
 import { PreferenceService, UserService } from '@selfcommunity/api-services';
 import { SCOPE_SC_UI } from '../../constants/Errors';
-import { Logger } from '@selfcommunity/utils';
+import { Logger, sortByAttr } from '@selfcommunity/utils';
 import { SCPreferenceName } from '@selfcommunity/types';
+import { EXPLORE_MENU_ITEM } from '../Footer/constants';
 const PREFIX = 'SCNavigationSettingsIconButton';
 const classes = {
     root: `${PREFIX}-root`,
@@ -22,17 +22,17 @@ const classes = {
 const Root = styled(IconButton, {
     name: PREFIX,
     slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
+    overridesResolver: (_props, styles) => styles.root
 })(() => ({}));
 const SwipeableDrawerRoot = styled(SwipeableDrawer, {
     name: PREFIX,
     slot: 'Root',
-    overridesResolver: (props, styles) => styles.drawerRoot
+    overridesResolver: (_props, styles) => styles.drawerRoot
 })(() => ({}));
 const MenuRoot = styled(Menu, {
     name: PREFIX,
     slot: 'Root',
-    overridesResolver: (props, styles) => styles.menuRoot
+    overridesResolver: (_props, styles) => styles.menuRoot
 })(() => ({}));
 const PREFERENCES = [
     SCPreferences.CONFIGURATIONS_FOLLOW_ENABLED,
@@ -40,7 +40,9 @@ const PREFERENCES = [
     SCPreferences.CONFIGURATIONS_DISCUSSION_TYPE_ENABLED,
     SCPreferences.ADDONS_LOYALTY_POINTS_COLLECTION,
     SCPreferences.CONFIGURATIONS_ONBOARDING_ENABLED,
-    SCPreferences.CONFIGURATIONS_ONBOARDING_HIDDEN
+    SCPreferences.CONFIGURATIONS_ONBOARDING_HIDDEN,
+    SCPreferences.ADDONS_PRIVATE_MESSAGES_ENABLED,
+    SCPreferences.CONFIGURATIONS_SCHEDULED_POSTS_ENABLED
 ];
 /**
  * > API documentation for the Community-JS Navigation Settings Icon Button component. Learn about the available props and the CSS API.
@@ -83,6 +85,7 @@ export default function NavigationSettingsIconButton(inProps) {
     const theme = useTheme();
     const isMobile = useMediaQuery(theme.breakpoints.down('md'));
     const scRoutingContext = useSCRouting();
+    const { _menu } = useFetchMenuFooter(null);
     // PREFERENCES
     const scPreferences = useSCPreferences();
     const preferences = useMemo(() => {
@@ -90,6 +93,11 @@ export default function NavigationSettingsIconButton(inProps) {
         PREFERENCES.map((p) => (_preferences[p] = p in scPreferences.preferences ? scPreferences.preferences[p].value : null));
         return _preferences;
     }, [scPreferences.preferences]);
+    const { isPaymentsEnabled } = useSCPaymentsEnabled();
+    const connectionEnabled = SCPreferences.CONFIGURATIONS_CONNECTION_ENABLED in scPreferences.preferences &&
+        scPreferences.preferences[SCPreferences.CONFIGURATIONS_CONNECTION_ENABLED].value;
+    const exploreStreamEnabled = SCPreferences.CONFIGURATIONS_EXPLORE_STREAM_ENABLED in scPreferences.preferences &&
+        scPreferences.preferences[SCPreferences.CONFIGURATIONS_EXPLORE_STREAM_ENABLED].value;
     // HANDLERS
     const handleOpen = (event) => {
         setAnchorEl(event.currentTarget);
@@ -137,11 +145,17 @@ export default function NavigationSettingsIconButton(inProps) {
                 _jsx(ListItem, Object.assign({ className: classes.item }, { children: _jsx(ListItemButton, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, scUserContext.user) }, { children: _jsx(FormattedMessage, { id: "ui.navigationSettingsIconButton.profile", defaultMessage: "ui.navigationSettingsIconButton.profile" }) })) }), "profile"),
                 preferences[SCPreferences.CONFIGURATIONS_FOLLOW_ENABLED] && (_jsx(ListItem, Object.assign({ className: classes.item }, { children: _jsx(ListItemButton, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.USER_PROFILE_FOLLOWINGS_ROUTE_NAME, scUserContext.user) }, { children: _jsx(FormattedMessage, { id: "ui.navigationSettingsIconButton.followings", defaultMessage: "ui.navigationSettingsIconButton.followings" }) })) }), "followings")),
                 preferences[SCPreferences.CONFIGURATIONS_FOLLOW_ENABLED] && (_jsx(ListItem, Object.assign({ className: classes.item }, { children: _jsx(ListItemButton, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.USER_PROFILE_FOLLOWERS_ROUTE_NAME, scUserContext.user) }, { children: _jsx(FormattedMessage, { id: "ui.navigationSettingsIconButton.followers", defaultMessage: "ui.navigationSettingsIconButton.followers" }) })) }), "followers")),
-                !preferences[SCPreferences.CONFIGURATIONS_FOLLOW_ENABLED] && (_jsx(ListItem, Object.assign({ className: classes.item }, { children: _jsx(ListItemButton, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.USER_PROFILE_CONNECTIONS_ROUTE_NAME, scUserContext.user) }, { children: _jsx(FormattedMessage, { id: "ui.navigationSettingsIconButton.connections", defaultMessage: "ui.navigationSettingsIconButton.connections" }) })) }), "connections")),
+                connectionEnabled && (_jsx(ListItem, Object.assign({ className: classes.item }, { children: _jsx(ListItemButton, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.USER_PROFILE_CONNECTIONS_ROUTE_NAME, scUserContext.user) }, { children: _jsx(FormattedMessage, { id: "ui.navigationSettingsIconButton.connections", defaultMessage: "ui.navigationSettingsIconButton.connections" }) })) }), "connections")),
                 preferences[SCPreferences.ADDONS_LOYALTY_POINTS_COLLECTION] && (_jsx(ListItem, Object.assign({ className: classes.item }, { children: _jsx(ListItemButton, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.LOYALTY_ROUTE_NAME, {}) }, { children: _jsx(FormattedMessage, { id: "ui.navigationSettingsIconButton.loyalty", defaultMessage: "ui.navigationSettingsIconButton.loyalty" }) })) }), "loyaltyProgram")),
+                preferences[SCPreferences.CONFIGURATIONS_POST_TYPE_ENABLED] &&
+                    preferences[SCPreferences.CONFIGURATIONS_SCHEDULED_POSTS_ENABLED] &&
+                    (UserUtils.isStaff(scUserContext.user) || UserUtils.isPublisher(scUserContext.user)) && (_jsx(ListItem, Object.assign({ className: classes.item }, { children: _jsx(ListItemButton, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.USER_PROFILE_SCHEDULED_POSTS_ROUTE_NAME, scUserContext.user) }, { children: _jsx(FormattedMessage, { id: "ui.navigationSettingsIconButton.postsScheduled", defaultMessage: "ui.navigationSettingsIconButton.postsScheduled" }) })) }), "scheduledPosts")),
                 preferences[SCPreferences.CONFIGURATIONS_POST_TYPE_ENABLED] && (_jsx(ListItem, Object.assign({ className: classes.item }, { children: _jsx(ListItemButton, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.USER_PROFILE_FOLLOWED_POSTS_ROUTE_NAME, scUserContext.user) }, { children: _jsx(FormattedMessage, { id: "ui.navigationSettingsIconButton.postsFollowed", defaultMessage: "ui.navigationSettingsIconButton.postsFollowed" }) })) }), "followedPosts")),
+                preferences[SCPreferences.CONFIGURATIONS_DISCUSSION_TYPE_ENABLED] &&
+                    preferences[SCPreferences.CONFIGURATIONS_SCHEDULED_POSTS_ENABLED] &&
+                    (UserUtils.isStaff(scUserContext.user) || UserUtils.isPublisher(scUserContext.user)) && (_jsx(ListItem, Object.assign({ className: classes.item }, { children: _jsx(ListItemButton, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.USER_PROFILE_SCHEDULED_DISCUSSIONS_ROUTE_NAME, scUserContext.user) }, { children: _jsx(FormattedMessage, { id: "ui.navigationSettingsIconButton.discussionsScheduled", defaultMessage: "ui.navigationSettingsIconButton.discussionsScheduled" }) })) }), "scheduledDiscussions")),
                 preferences[SCPreferences.CONFIGURATIONS_DISCUSSION_TYPE_ENABLED] && (_jsx(ListItem, Object.assign({ className: classes.item }, { children: _jsx(ListItemButton, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.USER_PROFILE_FOLLOWED_DISCUSSIONS_ROUTE_NAME, scUserContext.user) }, { children: _jsx(FormattedMessage, { id: "ui.navigationSettingsIconButton.discussionsFollowed", defaultMessage: "ui.navigationSettingsIconButton.discussionsFollowed" }) })) }), "followedDiscussions")),
-                _jsx(ListItem, Object.assign({ className: classes.item }, { children: _jsx(ListItemButton, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.USER_PRIVATE_MESSAGES_ROUTE_NAME, {}) }, { children: _jsx(FormattedMessage, { id: "ui.navigationSettingsIconButton.privateMessages", defaultMessage: "ui.navigationSettingsIconButton.privateMessages" }) })) }), "privateMessages"),
+                preferences[SCPreferences.ADDONS_PRIVATE_MESSAGES_ENABLED] && (_jsx(ListItem, Object.assign({ className: classes.item }, { children: _jsx(ListItemButton, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.USER_PRIVATE_MESSAGES_ROUTE_NAME, {}) }, { children: _jsx(FormattedMessage, { id: "ui.navigationSettingsIconButton.privateMessages", defaultMessage: "ui.navigationSettingsIconButton.privateMessages" }) })) }), "privateMessages")),
                 ...items.map((item, index) => (_jsx(ListItem, Object.assign({ className: classes.item }, { children: _jsx(ListItemButton, Object.assign({ component: Link, to: item.href }, { children: item.label })) }), `custom_item_${index}`))),
                 ...(isAdmin
                     ? [
@@ -159,6 +173,19 @@ export default function NavigationSettingsIconButton(inProps) {
                     ]
                     : []),
                 _jsx(ListItem, Object.assign({ className: classes.item }, { children: _jsx(ListItemButton, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.USER_PROFILE_SETTINGS_ROUTE_NAME, scUserContext.user) }, { children: _jsx(FormattedMessage, { id: "ui.navigationSettingsIconButton.settings", defaultMessage: "ui.navigationSettingsIconButton.settings" }) })) }), "settings"),
+                ...(isPaymentsEnabled
+                    ? [
+                        _jsx(Divider, {}, "payments_divider"),
+                        _jsx(ListItem, Object.assign({ className: classes.item }, { children: _jsx(ListItemButton, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.USER_PAYMENTS_HISTORY_ORDERS_ROUTE_NAME, scUserContext.user) }, { children: _jsx(FormattedMessage, { id: "ui.navigationSettingsIconButton.historyOrders", defaultMessage: "ui.navigationSettingsIconButton.historyOrders" }) })) }), "paymentsHistoryOrder"),
+                        _jsx(ListItem, Object.assign({ className: classes.item }, { children: _jsx(ListItemButton, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.USER_PAYMENT_METHODS_ROUTE_NAME, scUserContext.user) }, { children: _jsx(FormattedMessage, { id: "ui.navigationSettingsIconButton.myPaymentMethods", defaultMessage: "ui.navigationSettingsIconButton.myPaymentMethods" }) })) }), "myPaymentMethods")
+                    ]
+                    : []),
+                _jsx(Divider, {}, "footer_divider"),
+                ...[
+                    sortByAttr(_menu.items, 'order')
+                        .filter((item) => exploreStreamEnabled || item.url !== EXPLORE_MENU_ITEM)
+                        .map((item) => (_jsx(ListItem, Object.assign({ className: classes.item }, { children: _jsx(ListItemButton, Object.assign({ component: Link, to: item.url }, { children: item.label })) }), item.id)))
+                ],
                 _jsx(Divider, {}, "divider"),
                 _jsx(ListItem, Object.assign({ className: classes.item }, { children: _jsx(ListItemButton, Object.assign({ onClick: handleLogout }, { children: _jsx(FormattedMessage, { id: "ui.navigationSettingsIconButton.logout", defaultMessage: "ui.navigationSettingsIconButton.logout" }) })) }), "logout")
             ];
@@ -168,11 +195,17 @@ export default function NavigationSettingsIconButton(inProps) {
                 _jsx(MenuItem, Object.assign({ className: classes.item, component: Link, to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, scUserContext.user) }, { children: _jsx(FormattedMessage, { id: "ui.navigationSettingsIconButton.profile", defaultMessage: "ui.navigationSettingsIconButton.profile" }) }), "profile"),
                 preferences[SCPreferences.CONFIGURATIONS_FOLLOW_ENABLED] && (_jsx(MenuItem, Object.assign({ className: classes.item, component: Link, to: scRoutingContext.url(SCRoutes.USER_PROFILE_FOLLOWINGS_ROUTE_NAME, scUserContext.user) }, { children: _jsx(FormattedMessage, { id: "ui.navigationSettingsIconButton.followings", defaultMessage: "ui.navigationSettingsIconButton.followings" }) }), "followings")),
                 preferences[SCPreferences.CONFIGURATIONS_FOLLOW_ENABLED] && (_jsx(MenuItem, Object.assign({ className: classes.item, component: Link, to: scRoutingContext.url(SCRoutes.USER_PROFILE_FOLLOWERS_ROUTE_NAME, scUserContext.user) }, { children: _jsx(FormattedMessage, { id: "ui.navigationSettingsIconButton.followers", defaultMessage: "ui.navigationSettingsIconButton.followers" }) }), "followers")),
-                !preferences[SCPreferences.CONFIGURATIONS_FOLLOW_ENABLED] && (_jsx(MenuItem, Object.assign({ className: classes.item, component: Link, to: scRoutingContext.url(SCRoutes.USER_PROFILE_CONNECTIONS_ROUTE_NAME, scUserContext.user) }, { children: _jsx(FormattedMessage, { id: "ui.navigationSettingsIconButton.connections", defaultMessage: "ui.navigationSettingsIconButton.connections" }) }), "connections")),
+                connectionEnabled && (_jsx(MenuItem, Object.assign({ className: classes.item, component: Link, to: scRoutingContext.url(SCRoutes.USER_PROFILE_CONNECTIONS_ROUTE_NAME, scUserContext.user) }, { children: _jsx(FormattedMessage, { id: "ui.navigationSettingsIconButton.connections", defaultMessage: "ui.navigationSettingsIconButton.connections" }) }), "connections")),
                 preferences[SCPreferences.ADDONS_LOYALTY_POINTS_COLLECTION] && (_jsx(MenuItem, Object.assign({ className: classes.item, component: Link, to: scRoutingContext.url(SCRoutes.LOYALTY_ROUTE_NAME, {}) }, { children: _jsx(FormattedMessage, { id: "ui.navigationSettingsIconButton.loyalty", defaultMessage: "ui.navigationSettingsIconButton.loyalty" }) }), "loyaltyProgram")),
+                preferences[SCPreferences.CONFIGURATIONS_POST_TYPE_ENABLED] &&
+                    preferences[SCPreferences.CONFIGURATIONS_SCHEDULED_POSTS_ENABLED] &&
+                    (UserUtils.isStaff(scUserContext.user) || UserUtils.isPublisher(scUserContext.user)) && (_jsx(MenuItem, Object.assign({ className: classes.item, component: Link, to: scRoutingContext.url(SCRoutes.USER_PROFILE_SCHEDULED_POSTS_ROUTE_NAME, scUserContext.user) }, { children: _jsx(FormattedMessage, { id: "ui.navigationSettingsIconButton.postsScheduled", defaultMessage: "ui.navigationSettingsIconButton.postsScheduled" }) }), "scheduledPosts")),
                 preferences[SCPreferences.CONFIGURATIONS_POST_TYPE_ENABLED] && (_jsx(MenuItem, Object.assign({ className: classes.item, component: Link, to: scRoutingContext.url(SCRoutes.USER_PROFILE_FOLLOWED_POSTS_ROUTE_NAME, scUserContext.user) }, { children: _jsx(FormattedMessage, { id: "ui.navigationSettingsIconButton.postsFollowed", defaultMessage: "ui.navigationSettingsIconButton.postsFollowed" }) }), "followedPosts")),
+                preferences[SCPreferences.CONFIGURATIONS_DISCUSSION_TYPE_ENABLED] &&
+                    preferences[SCPreferences.CONFIGURATIONS_SCHEDULED_POSTS_ENABLED] &&
+                    (UserUtils.isStaff(scUserContext.user) || UserUtils.isPublisher(scUserContext.user)) && (_jsx(MenuItem, Object.assign({ className: classes.item, component: Link, to: scRoutingContext.url(SCRoutes.USER_PROFILE_SCHEDULED_DISCUSSIONS_ROUTE_NAME, scUserContext.user) }, { children: _jsx(FormattedMessage, { id: "ui.navigationSettingsIconButton.discussionsScheduled", defaultMessage: "ui.navigationSettingsIconButton.discussionsScheduled" }) }), "scheduledDiscussions")),
                 preferences[SCPreferences.CONFIGURATIONS_DISCUSSION_TYPE_ENABLED] && (_jsx(MenuItem, Object.assign({ className: classes.item, component: Link, to: scRoutingContext.url(SCRoutes.USER_PROFILE_FOLLOWED_DISCUSSIONS_ROUTE_NAME, scUserContext.user) }, { children: _jsx(FormattedMessage, { id: "ui.navigationSettingsIconButton.discussionsFollowed", defaultMessage: "ui.navigationSettingsIconButton.discussionsFollowed" }) }), "followedDiscussions")),
-                _jsx(MenuItem, Object.assign({ className: classes.item, component: Link, to: scRoutingContext.url(SCRoutes.USER_PRIVATE_MESSAGES_ROUTE_NAME, {}) }, { children: _jsx(FormattedMessage, { id: "ui.navigationSettingsIconButton.privateMessages", defaultMessage: "ui.navigationSettingsIconButton.privateMessages" }) }), "privateMessages"),
+                preferences[SCPreferences.ADDONS_PRIVATE_MESSAGES_ENABLED] && (_jsx(MenuItem, Object.assign({ className: classes.item, component: Link, to: scRoutingContext.url(SCRoutes.USER_PRIVATE_MESSAGES_ROUTE_NAME, {}) }, { children: _jsx(FormattedMessage, { id: "ui.navigationSettingsIconButton.privateMessages", defaultMessage: "ui.navigationSettingsIconButton.privateMessages" }) }), "privateMessages")),
                 ...items.map((item, index) => (_jsx(MenuItem, Object.assign({ className: classes.item, component: Link, to: item.href }, { children: item.label }), `custom_item_${index}`))),
                 ...(isAdmin
                     ? [
@@ -190,6 +223,19 @@ export default function NavigationSettingsIconButton(inProps) {
                     ]
                     : []),
                 _jsx(MenuItem, Object.assign({ className: classes.item, component: Link, to: scRoutingContext.url(SCRoutes.USER_PROFILE_SETTINGS_ROUTE_NAME, scUserContext.user) }, { children: _jsx(FormattedMessage, { id: "ui.navigationSettingsIconButton.settings", defaultMessage: "ui.navigationSettingsIconButton.settings" }) }), "settings"),
+                ...(isPaymentsEnabled
+                    ? [
+                        _jsx(Divider, {}, "payments_divider"),
+                        _jsx(MenuItem, Object.assign({ className: classes.item, component: Link, to: scRoutingContext.url(SCRoutes.USER_PAYMENTS_HISTORY_ORDERS_ROUTE_NAME, scUserContext.user) }, { children: _jsx(FormattedMessage, { id: "ui.navigationSettingsIconButton.historyOrders", defaultMessage: "ui.navigationSettingsIconButton.historyOrders" }) }), "historyOrders"),
+                        _jsx(MenuItem, Object.assign({ className: classes.item, component: Link, to: scRoutingContext.url(SCRoutes.USER_PAYMENT_METHODS_ROUTE_NAME, scUserContext.user) }, { children: _jsx(FormattedMessage, { id: "ui.navigationSettingsIconButton.myPaymentMethods", defaultMessage: "ui.navigationSettingsIconButton.myPaymentMethods" }) }), "myPaymentMethods")
+                    ]
+                    : []),
+                _jsx(Divider, {}, "footer_divider"),
+                ...[
+                    sortByAttr(_menu.items, 'order')
+                        .filter((item) => exploreStreamEnabled || item.url !== EXPLORE_MENU_ITEM)
+                        .map((item) => (_jsx(MenuItem, Object.assign({ className: classes.item, component: Link, to: item.url }, { children: item.label }), item.id)))
+                ],
                 _jsx(Divider, {}, "divider"),
                 _jsx(MenuItem, Object.assign({ className: classes.item, onClick: handleLogout }, { children: _jsx(FormattedMessage, { id: "ui.navigationSettingsIconButton.logout", defaultMessage: "ui.navigationSettingsIconButton.logout" }) }), "logout")
             ];

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

@@ -17,7 +17,7 @@ export interface NavigationToolbarProps extends ToolbarProps {
     /**
      * Searchbar props
      */
-    SearchAutocompleteProps?: SearchAutocompleteProps;
+    SearchAutocompleteComponentProps?: SearchAutocompleteProps;
     /**
      * The navigation path
      */

package/lib/esm/components/NavigationToolbar/NavigationToolbar.js

@@ -1,8 +1,7 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Avatar, Badge, Box, Button, IconButton, styled, Toolbar, Tooltip } from '@mui/material';
+import { Avatar, Badge, Box, Button, IconButton, styled, Toolbar, Tooltip, Icon } from '@mui/material';
 import React, { useMemo } from 'react';
-import Icon from '@mui/material/Icon';
 import { useThemeProps } from '@mui/system';
 import classNames from 'classnames';
 import NavigationToolbarSkeleton from './Skeleton';
@@ -25,6 +24,7 @@ const classes = {
     explore: `${PREFIX}-explore`,
     events: `${PREFIX}-events`,
     groups: `${PREFIX}-groups`,
+    courses: `${PREFIX}-courses`,
     search: `${PREFIX}-search`,
     composer: `${PREFIX}-composer`,
     profile: `${PREFIX}-profile`,
@@ -46,7 +46,8 @@ const PREFERENCES = [
     SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_ENABLED,
     SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_URL,
     SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_IMAGE,
-    SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_TEXT
+    SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_TEXT,
+    SCPreferences.ADDONS_PRIVATE_MESSAGES_ENABLED
 ];
 /**
  * > API documentation for the Community-JS NavigationToolbar component. Learn about the available props and the CSS API.
@@ -96,7 +97,7 @@ export default function NavigationToolbar(inProps) {
         props: inProps,
         name: PREFIX
     });
-    const { value = '', className = '', disableSearch = false, disableComposer = false, SearchAutocompleteProps = {}, startActions = null, endActions = null, NavigationSettingsIconButtonComponent = NavigationSettingsIconButton, NavigationMenuIconButtonComponentProps = {}, NavigationMenuIconButtonComponent = NavigationMenuIconButton, children = null, NotificationMenuProps = {}, ComposerIconButtonProps = {}, onOpenNotificationMenu, onCloseNotificationMenu } = props, rest = __rest(props, ["value", "className", "disableSearch", "disableComposer", "SearchAutocompleteProps", "startActions", "endActions", "NavigationSettingsIconButtonComponent", "NavigationMenuIconButtonComponentProps", "NavigationMenuIconButtonComponent", "children", "NotificationMenuProps", "ComposerIconButtonProps", "onOpenNotificationMenu", "onCloseNotificationMenu"]);
+    const { value = '', className = '', disableSearch = false, disableComposer = false, SearchAutocompleteComponentProps = {}, startActions = null, endActions = null, NavigationSettingsIconButtonComponent = NavigationSettingsIconButton, NavigationMenuIconButtonComponentProps = {}, NavigationMenuIconButtonComponent = NavigationMenuIconButton, children = null, NotificationMenuProps = {}, ComposerIconButtonProps = {}, onOpenNotificationMenu, onCloseNotificationMenu } = props, rest = __rest(props, ["value", "className", "disableSearch", "disableComposer", "SearchAutocompleteComponentProps", "startActions", "endActions", "NavigationSettingsIconButtonComponent", "NavigationMenuIconButtonComponentProps", "NavigationMenuIconButtonComponent", "children", "NotificationMenuProps", "ComposerIconButtonProps", "onOpenNotificationMenu", "onCloseNotificationMenu"]);
     // CONTEXT
     const scUserContext = useSCUser();
     const scRoutingContext = useSCRouting();
@@ -107,7 +108,9 @@ export default function NavigationToolbar(inProps) {
         PREFERENCES.map((p) => (_preferences[p] = p in scPreferences.preferences ? scPreferences.preferences[p].value : null));
         return _preferences;
     }, [scPreferences.preferences]);
-    const privateMessagingEnabled = useMemo(() => scPreferences.features.includes(SCFeatureName.PRIVATE_MESSAGING), [scPreferences.features]);
+    const privateMessagingEnabled = useMemo(() => scPreferences.preferences &&
+        SCPreferences.ADDONS_PRIVATE_MESSAGES_ENABLED in scPreferences.preferences &&
+        scPreferences.preferences[SCPreferences.ADDONS_PRIVATE_MESSAGES_ENABLED].value, [scPreferences.preferences]);
     const groupsEnabled = useMemo(() => scPreferences.preferences &&
         scPreferences.features &&
         scPreferences.features.includes(SCFeatureName.TAGGING) &&
@@ -120,9 +123,16 @@ export default function NavigationToolbar(inProps) {
         scPreferences.features.includes(SCFeatureName.EVENT) &&
         SCPreferences.CONFIGURATIONS_EVENTS_ENABLED in scPreferences.preferences &&
         scPreferences.preferences[SCPreferences.CONFIGURATIONS_EVENTS_ENABLED].value, [scPreferences.preferences, scPreferences.features]);
+    const coursesEnabled = useMemo(() => scPreferences.preferences &&
+        scPreferences.features &&
+        scPreferences.features.includes(SCFeatureName.COURSE) &&
+        SCPreferences.CONFIGURATIONS_COURSES_ENABLED in scPreferences.preferences &&
+        scPreferences.preferences[SCPreferences.CONFIGURATIONS_COURSES_ENABLED].value, [scPreferences.preferences, scPreferences.features]);
     const showComposer = useMemo(() => {
         return (!disableComposer &&
-            (!scPreferences.preferences[SCPreferences.CONFIGURATIONS_POST_ONLY_STAFF_ENABLED].value || UserUtils.isStaff(scUserContext.user)));
+            (!scPreferences.preferences[SCPreferences.CONFIGURATIONS_POST_ONLY_STAFF_ENABLED].value ||
+                UserUtils.isStaff(scUserContext.user) ||
+                UserUtils.isPublisher(scUserContext.user)));
     }, [preferences, disableComposer, scUserContext.user]);
     // STATE
     const [anchorNotification, setAnchorNotification] = React.useState(null);
@@ -140,13 +150,18 @@ export default function NavigationToolbar(inProps) {
         return _jsx(NavigationToolbarSkeleton, {});
     }
     const _children = children || (_jsxs(Box, Object.assign({ className: classes.navigation }, { children: [scUserContext.user && (_jsx(IconButton, Object.assign({ className: classNames(classes.home, { [classes.active]: value.startsWith(scRoutingContext.url(SCRoutes.HOME_ROUTE_NAME, {})) }), "aria-label": "Home", to: scRoutingContext.url(SCRoutes.HOME_ROUTE_NAME, {}), component: Link }, { children: _jsx(Icon, { children: "home" }) }))), preferences[SCPreferences.CONFIGURATIONS_EXPLORE_STREAM_ENABLED] &&
-                (preferences[SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY] || scUserContext.user) && (_jsx(IconButton, Object.assign({ className: classNames(classes.explore, { [classes.active]: value.startsWith(scRoutingContext.url(SCRoutes.EXPLORE_ROUTE_NAME, {})) }), "aria-label": "Explore", to: scRoutingContext.url(SCRoutes.EXPLORE_ROUTE_NAME, {}), component: Link }, { children: _jsx(Icon, { children: "explore" }) }))), groupsEnabled && scUserContext.user && (_jsx(IconButton, Object.assign({ className: classNames(classes.groups, {
+                (preferences[SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY] || scUserContext.user) &&
+                (!scUserContext.user || (!groupsEnabled && !coursesEnabled && !eventsEnabled)) && (_jsx(IconButton, Object.assign({ className: classNames(classes.explore, {
+                    [classes.active]: value.startsWith(scRoutingContext.url(SCRoutes.EXPLORE_ROUTE_NAME, {}))
+                }), "aria-label": "Explore", to: scRoutingContext.url(SCRoutes.EXPLORE_ROUTE_NAME, {}), component: Link }, { children: _jsx(Icon, { children: "explore" }) }))), coursesEnabled && (scUserContext.user || preferences[SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY]) && (_jsx(IconButton, Object.assign({ className: classNames(classes.courses, {
+                    [classes.active]: value.startsWith(scRoutingContext.url(SCRoutes.COURSES_ROUTE_NAME, {}))
+                }), "aria-label": "Courses", to: scRoutingContext.url(SCRoutes.COURSES_ROUTE_NAME, {}), component: Link }, { children: _jsx(Icon, { children: "courses" }) }))), groupsEnabled && scUserContext.user && (_jsx(IconButton, Object.assign({ className: classNames(classes.groups, {
                     [classes.active]: value.startsWith(scRoutingContext.url(SCRoutes.GROUPS_SUBSCRIBED_ROUTE_NAME, {})) ||
                         value.startsWith(scRoutingContext.url(SCRoutes.GROUPS_ROUTE_NAME, {}))
                 }), "aria-label": "Groups", to: scRoutingContext.url(SCRoutes.GROUPS_SUBSCRIBED_ROUTE_NAME, {}), component: Link }, { children: _jsx(Icon, { children: "groups" }) }))), eventsEnabled && (scUserContext.user || preferences[SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY]) && (_jsx(IconButton, Object.assign({ className: classNames(classes.events, {
                     [classes.active]: value.startsWith(scRoutingContext.url(SCRoutes.EVENTS_ROUTE_NAME, {}))
                 }), "aria-label": "Events", to: scRoutingContext.url(SCRoutes.EVENTS_ROUTE_NAME, {}), component: Link }, { children: _jsx(Icon, { children: "CalendarIcon" }) })))] })));
-    return (_jsxs(Root, Object.assign({ className: classNames(className, classes.root) }, rest, { children: [_jsx(NavigationMenuIconButtonComponent, Object.assign({}, NavigationMenuIconButtonComponentProps)), _jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.HOME_ROUTE_NAME, {}), className: classes.logo }, { children: _jsx("img", { src: preferences[SCPreferences.LOGO_NAVBAR_LOGO], alt: "logo" }) })), !scUserContext.user && !preferences[SCPreferences.ADDONS_CLOSED_COMMUNITY] && (_jsx(Button, Object.assign({ color: "inherit", component: Link, to: scRoutingContext.url(SCRoutes.SIGNUP_ROUTE_NAME, {}), className: classes.register }, { children: _jsx(FormattedMessage, { id: "ui.appBar.navigation.register", defaultMessage: "ui.appBar.navigation.register" }) }))), preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_ENABLED] && (_jsx(_Fragment, { children: preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_TEXT] ? (_jsx(Tooltip, Object.assign({ title: preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_TEXT] }, { children: _jsx(Link, Object.assign({ target: "blank", to: preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_URL], className: classes.customItem }, { children: _jsx("img", { src: preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_IMAGE], alt: "custom_item" }) })) }))) : (_jsx(Link, Object.assign({ target: "blank", to: preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_URL], className: classes.customItem }, { children: _jsx("img", { src: preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_IMAGE], alt: "custom_item" }) }))) })), _children, (preferences[SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY] || scUserContext.user) && !disableSearch ? (_jsx(SearchAutocomplete, Object.assign({ className: classes.search, blurOnSelect: true }, SearchAutocompleteProps))) : (_jsx(Box, { className: classes.search })), startActions, scUserContext.user ? (_jsxs(_Fragment, { children: [showComposer && _jsx(ComposerIconButton, Object.assign({ className: classes.composer }, ComposerIconButtonProps)), _jsx(Tooltip, Object.assign({ title: scUserContext.user.username }, { children: _jsx(IconButton, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, scUserContext.user), "aria-label": "Profile", className: classes.profile }, { children: _jsx(Avatar, { alt: scUserContext.user.username, src: scUserContext.user.avatar }) })) })), _jsxs(_Fragment, { children: [_jsx(IconButton, Object.assign({ className: classNames(classes.notification, {
+    return (_jsxs(Root, Object.assign({ className: classNames(className, classes.root) }, rest, { children: [_jsx(NavigationMenuIconButtonComponent, Object.assign({}, NavigationMenuIconButtonComponentProps)), _jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.HOME_ROUTE_NAME, {}), className: classes.logo }, { children: _jsx("img", { src: preferences[SCPreferences.LOGO_NAVBAR_LOGO], alt: "logo" }) })), !scUserContext.user && !preferences[SCPreferences.ADDONS_CLOSED_COMMUNITY] && (_jsx(Button, Object.assign({ color: "inherit", component: Link, to: scRoutingContext.url(SCRoutes.SIGNUP_ROUTE_NAME, {}), className: classes.register }, { children: _jsx(FormattedMessage, { id: "ui.appBar.navigation.register", defaultMessage: "ui.appBar.navigation.register" }) }))), preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_ENABLED] && (_jsx(_Fragment, { children: preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_TEXT] ? (_jsx(Tooltip, Object.assign({ title: preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_TEXT] }, { children: _jsx(Link, Object.assign({ target: "blank", to: preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_URL], className: classes.customItem }, { children: _jsx("img", { src: preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_IMAGE], alt: "custom_item" }) })) }))) : (_jsx(Link, Object.assign({ target: "blank", to: preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_URL], className: classes.customItem }, { children: _jsx("img", { src: preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_IMAGE], alt: "custom_item" }) }))) })), _children, (preferences[SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY] || scUserContext.user) && !disableSearch ? (_jsx(SearchAutocomplete, Object.assign({ className: classes.search, blurOnSelect: true }, SearchAutocompleteComponentProps))) : (_jsx(Box, { className: classes.search })), startActions, scUserContext.user ? (_jsxs(_Fragment, { children: [showComposer && _jsx(ComposerIconButton, Object.assign({ className: classes.composer }, ComposerIconButtonProps)), _jsx(Tooltip, Object.assign({ title: scUserContext.user.username }, { children: _jsx(IconButton, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, scUserContext.user), "aria-label": "Profile", className: classes.profile }, { children: _jsx(Avatar, { alt: scUserContext.user.username, src: scUserContext.user.avatar }) })) })), _jsxs(_Fragment, { children: [_jsx(IconButton, Object.assign({ className: classNames(classes.notification, {
                                     [classes.active]: value.startsWith(scRoutingContext.url(SCRoutes.USER_NOTIFICATIONS_ROUTE_NAME, {}))
                                 }), "aria-label": "Notification", onClick: handleOpenNotificationMenu }, { children: _jsx(Badge, Object.assign({ badgeContent: scUserContext.user.unseen_notification_banners_counter + scUserContext.user.unseen_interactions_counter, color: "secondary" }, { children: _jsx(Icon, { children: "notifications_active" }) })) })), Boolean(anchorNotification) && (_jsx(NotificationMenu, Object.assign({ className: classes.notificationsMenu, id: "notification-menu", anchorEl: anchorNotification, open: true, onClose: handleCloseNotificationMenu, onClick: handleCloseNotificationMenu, transformOrigin: { horizontal: 'right', vertical: 'top' }, anchorOrigin: { horizontal: 'right', vertical: 'bottom' } }, NotificationMenuProps)))] }), privateMessagingEnabled && (_jsx(IconButton, Object.assign({ className: classNames(classes.messages, {
                             [classes.active]: value.startsWith(scRoutingContext.url(SCRoutes.USER_PRIVATE_MESSAGES_ROUTE_NAME, {}))

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

@@ -1,7 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Toolbar } from '@mui/material';
-import { styled } from '@mui/material/styles';
-import Skeleton from '@mui/material/Skeleton';
+import { Toolbar, styled, Skeleton } from '@mui/material';
 import { PREFIX } from './constants';
 const classes = {
     root: `${PREFIX}-skeleton-root`,

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

@@ -16,7 +16,7 @@ export interface NavigationToolbarMobileProps extends ToolbarProps {
     /**
      * Props spread to SearchAutocomplete component
      */
-    SearchAutocompleteProps?: SearchAutocompleteProps;
+    SearchAutocompleteComponentProps?: SearchAutocompleteProps;
     /**
      * Actions to be inserted before composer IconButton
      */