@selfcommunity/react-ui 0.11.0-alpha.66 → 0.11.0-alpha.68

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

@@ -11,6 +11,9 @@ const utils_1 = require("@selfcommunity/utils");
 const types_1 = require("@selfcommunity/types");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const system_1 = require("@mui/system");
+const BaseItem_1 = tslib_1.__importDefault(require("../../shared/BaseItem"));
+const formazione_1 = tslib_1.__importDefault(require("../../assets/custom/formazione"));
+const DefaultDrawerContent_1 = require("../../constants/DefaultDrawerContent");
 const PREFIX = 'SCDefaultDrawerContent';
 const classes = {
     root: `${PREFIX}-root`,
@@ -28,7 +31,7 @@ function DefaultDrawerContent(inProps) {
         props: inProps,
         name: PREFIX
     });
-    const { className, CategoryItemProps = { showTooltip: true } } = props, rest = tslib_1.__rest(props, ["className", "CategoryItemProps"]);
+    const { className, CategoryItemProps = { showTooltip: true }, tagImage = '/' } = props, rest = tslib_1.__rest(props, ["className", "CategoryItemProps", "tagImage"]);
     // HOOKS
     const { categories } = (0, react_core_1.useSCFetchCategories)();
     const [categoriesOrdered, setCategoriesOrdered] = (0, react_1.useState)([]);
@@ -40,6 +43,7 @@ function DefaultDrawerContent(inProps) {
     const { preferences, features } = (0, react_core_1.useSCPreferences)();
     //STATE
     const [isHovered, setIsHovered] = (0, react_1.useState)({});
+    const [expanded, setExpanded] = (0, react_1.useState)(false);
     // MEMO
     const groupsEnabled = (0, react_1.useMemo)(() => preferences &&
         features &&
@@ -59,6 +63,8 @@ function DefaultDrawerContent(inProps) {
         preferences[react_core_1.SCPreferences.CONFIGURATIONS_COURSES_ENABLED].value, [preferences, features]);
     const exploreStreamEnabled = preferences[react_core_1.SCPreferences.CONFIGURATIONS_EXPLORE_STREAM_ENABLED].value;
     const contentAvailable = preferences[react_core_1.SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY].value;
+    const showAllCategories = (0, react_1.useMemo)(() => react_core_1.SCPreferences.CONFIGURATIONS_SIDEBAR_SHOW_ALL_CATEGORIES_ENABLED in preferences &&
+        preferences[react_core_1.SCPreferences.CONFIGURATIONS_SIDEBAR_SHOW_ALL_CATEGORIES_ENABLED].value, [preferences]);
     // HANDLERS
     const handleMouseEnter = (index) => {
         setIsHovered((prevState) => {
@@ -70,17 +76,49 @@ function DefaultDrawerContent(inProps) {
             return Object.assign(Object.assign({}, prevState), { [index]: false });
         });
     };
+    const handleChange = (tagName) => (_event, isExpanded) => {
+        setExpanded(isExpanded ? tagName : false);
+    };
     // Order categories
     (0, react_1.useEffect)(() => {
-        setCategoriesOrdered((0, utils_1.sortByAttr)(categories, 'order'));
-    }, [categories]);
+        if (!scUserContext.user || (scUserContext.user && showAllCategories)) {
+            setCategoriesOrdered((0, utils_1.sortByAttr)(categories, 'order'));
+        }
+        else {
+            setCategoriesOrdered((0, utils_1.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 ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(className, classes.root) }, rest, { children: [(0, jsx_runtime_1.jsxs)(material_1.List, Object.assign({ className: classes.navigation }, { children: [scUserContext.user && ((0, jsx_runtime_1.jsx)(material_1.ListItem, Object.assign({ disablePadding: true }, { children: (0, jsx_runtime_1.jsxs)(material_1.ListItemButton, Object.assign({ component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.HOME_ROUTE_NAME, {}) }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "home" }) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.home", defaultMessage: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.home" }) })] })) }))), coursesEnabled && (scUserContext.user || contentAvailable) && ((0, jsx_runtime_1.jsx)(material_1.ListItem, Object.assign({ disablePadding: true }, { children: (0, jsx_runtime_1.jsxs)(material_1.ListItemButton, Object.assign({ component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.COURSES_ROUTE_NAME, {}) }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "courses" }) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.courses", defaultMessage: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.courses" }) })] })) }))), groupsEnabled && scUserContext.user && ((0, jsx_runtime_1.jsx)(material_1.ListItem, Object.assign({ disablePadding: true }, { children: (0, jsx_runtime_1.jsxs)(material_1.ListItemButton, Object.assign({ component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.GROUPS_ROUTE_NAME, {}) }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "groups" }) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.groups", defaultMessage: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.groups" }) })] })) }))), eventsEnabled && (scUserContext.user || contentAvailable) && ((0, jsx_runtime_1.jsx)(material_1.ListItem, Object.assign({ disablePadding: true }, { children: (0, jsx_runtime_1.jsxs)(material_1.ListItemButton, Object.assign({ component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.EVENTS_ROUTE_NAME, {}) }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "CalendarIcon" }) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.events", defaultMessage: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.events" }) })] })) }))), exploreStreamEnabled && (contentAvailable || scUserContext.user) && ((0, jsx_runtime_1.jsx)(material_1.ListItem, Object.assign({ disablePadding: true }, { children: (0, jsx_runtime_1.jsxs)(material_1.ListItemButton, Object.assign({ component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.EXPLORE_ROUTE_NAME, {}) }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "explore" }) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.explore", defaultMessage: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.explore" }) })] })) })))] })), (0, jsx_runtime_1.jsx)(material_1.Divider, {}), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "subtitle1", className: classes.title }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationMenuIconButton.defaultDrawerContent.category.title", defaultMessage: "ui.navigationMenuIconButton.defaultDrawerContent.category.title" }) })), !categoriesOrdered.length && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", className: classes.noResults }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationMenuIconButton.defaultDrawerContent.category.noResults", defaultMessage: "ui.navigationMenuIconButton.defaultDrawerContent.category.noResults" }) }))), categoriesOrdered.map((c, index) => ((0, jsx_runtime_1.jsx)(material_1.Zoom, Object.assign({ in: true, style: { transform: isHovered[c.id] && 'scale(1.05)' } }, { children: (0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(Category_1.default, Object.assign({ ButtonBaseProps: { component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.CATEGORY_ROUTE_NAME, c) }, elevation: 0, category: c, actions: null }, CategoryItemProps, getMouseEvents(() => handleMouseEnter(c.id), () => handleMouseLeave(c.id)))) }, c.id) }), index)))] })));
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(className, classes.root) }, rest, { children: [(0, jsx_runtime_1.jsxs)(material_1.List, Object.assign({ className: classes.navigation }, { children: [scUserContext.user && ((0, jsx_runtime_1.jsx)(material_1.ListItem, Object.assign({ disablePadding: true }, { children: (0, jsx_runtime_1.jsxs)(material_1.ListItemButton, Object.assign({ component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.HOME_ROUTE_NAME, {}) }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "home" }) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.home", defaultMessage: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.home" }) })] })) }))), coursesEnabled && (scUserContext.user || contentAvailable) && ((0, jsx_runtime_1.jsx)(material_1.ListItem, Object.assign({ disablePadding: true }, { children: (0, jsx_runtime_1.jsxs)(material_1.ListItemButton, Object.assign({ component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.COURSES_ROUTE_NAME, {}) }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "courses" }) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.courses", defaultMessage: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.courses" }) })] })) }))), groupsEnabled && scUserContext.user && ((0, jsx_runtime_1.jsx)(material_1.ListItem, Object.assign({ disablePadding: true }, { children: (0, jsx_runtime_1.jsxs)(material_1.ListItemButton, Object.assign({ component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.GROUPS_ROUTE_NAME, {}) }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "groups" }) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.groups", defaultMessage: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.groups" }) })] })) }))), eventsEnabled && (scUserContext.user || contentAvailable) && ((0, jsx_runtime_1.jsx)(material_1.ListItem, Object.assign({ disablePadding: true }, { children: (0, jsx_runtime_1.jsxs)(material_1.ListItemButton, Object.assign({ component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.EVENTS_ROUTE_NAME, {}) }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "CalendarIcon" }) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.events", defaultMessage: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.events" }) })] })) }))), exploreStreamEnabled && (contentAvailable || scUserContext.user) && ((0, jsx_runtime_1.jsx)(material_1.ListItem, Object.assign({ disablePadding: true }, { children: (0, jsx_runtime_1.jsxs)(material_1.ListItemButton, Object.assign({ component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.EXPLORE_ROUTE_NAME, {}) }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "explore" }) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.explore", defaultMessage: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.explore" }) })] })) })))] })), (0, jsx_runtime_1.jsx)(material_1.Divider, {}), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "subtitle1", className: classes.title }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationMenuIconButton.defaultDrawerContent.category.title", defaultMessage: "ui.navigationMenuIconButton.defaultDrawerContent.category.title" }) })), !categoriesOrdered.length && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", className: classes.noResults }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationMenuIconButton.defaultDrawerContent.category.noResults", defaultMessage: "ui.navigationMenuIconButton.defaultDrawerContent.category.noResults" }) }))), (0, jsx_runtime_1.jsxs)(jsx_runtime_1.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 ((0, jsx_runtime_1.jsxs)(material_1.Accordion, Object.assign({ expanded: expanded === tagName, onChange: handleChange(tagName), elevation: 0, onFocus: (e) => e.stopPropagation(), onClick: (e) => e.stopPropagation() }, { children: [(0, jsx_runtime_1.jsx)(material_1.AccordionSummary, Object.assign({ expandIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "expand_more" }) }, { children: (0, jsx_runtime_1.jsx)(BaseItem_1.default, { elevation: 0, image: (0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: tagName, src: tagName === DefaultDrawerContent_1.DefaultCategoryTagName ? formazione_1.default : tagImage, variant: "square" }), primary: tagName, disableTypography: false }) })), (0, jsx_runtime_1.jsx)(material_1.AccordionDetails, { children: (0, jsx_runtime_1.jsx)(material_1.List, { children: categories.map((c) => ((0, jsx_runtime_1.jsx)(material_1.Zoom, Object.assign({ in: true }, { children: (0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(Category_1.default, Object.assign({ ButtonBaseProps: {
+                                                        component: react_core_1.Link,
+                                                        to: scRoutingContext.url(react_core_1.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 && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: untaggedCategories.map((c, index) => ((0, jsx_runtime_1.jsx)(material_1.Zoom, Object.assign({ in: true, style: { transform: isHovered[c.id] && 'scale(1.05)' } }, { children: (0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(Category_1.default, Object.assign({ ButtonBaseProps: { component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.CATEGORY_ROUTE_NAME, c) }, elevation: 0, category: c, actions: null }, CategoryItemProps, getMouseEvents(() => handleMouseEnter(c.id), () => handleMouseLeave(c.id)))) }, c.id) }), index))) }))] })] })));
 }
 exports.default = DefaultDrawerContent;

package/lib/cjs/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/cjs/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/cjs/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

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

@@ -33,7 +33,7 @@ function NavigationMenuDrawer(inProps) {
         props: inProps,
         name: PREFIX
     });
-    const { className = null, showDrawerHeader = true, drawerHeaderContent = (0, jsx_runtime_1.jsx)(DefaultHeaderContent_1.default, {}), drawerContent = (0, jsx_runtime_1.jsx)(DefaultDrawerContent_1.default, {}), showDrawerFooterContent = true, drawerFooterContent = null, ScrollContainerProps = { hideTracksWhenNotNeeded: true }, CreateLiveStreamButtonComponentProps = {}, open, onClose } = props, rest = tslib_1.__rest(props, ["className", "showDrawerHeader", "drawerHeaderContent", "drawerContent", "showDrawerFooterContent", "drawerFooterContent", "ScrollContainerProps", "CreateLiveStreamButtonComponentProps", "open", "onClose"]);
+    const { className = null, showDrawerHeader = true, defaultDrawerContentProps = null, drawerHeaderContent = (0, jsx_runtime_1.jsx)(DefaultHeaderContent_1.default, {}), drawerContent = (0, jsx_runtime_1.jsx)(DefaultDrawerContent_1.default, Object.assign({}, defaultDrawerContentProps)), showDrawerFooterContent = true, drawerFooterContent = null, ScrollContainerProps = { hideTracksWhenNotNeeded: true }, CreateLiveStreamButtonComponentProps = {}, open, onClose } = props, rest = tslib_1.__rest(props, ["className", "showDrawerHeader", "defaultDrawerContentProps", "drawerHeaderContent", "drawerContent", "showDrawerFooterContent", "drawerFooterContent", "ScrollContainerProps", "CreateLiveStreamButtonComponentProps", "open", "onClose"]);
     const footerContent = (() => {
         if (typeof drawerFooterContent === 'function') {
             return drawerFooterContent({ handleCloseMenuDrawer: onClose });

package/lib/cjs/components/NavigationSettingsIconButton/NavigationSettingsIconButton.js

@@ -41,7 +41,9 @@ const PREFERENCES = [
     react_core_1.SCPreferences.CONFIGURATIONS_DISCUSSION_TYPE_ENABLED,
     react_core_1.SCPreferences.ADDONS_LOYALTY_POINTS_COLLECTION,
     react_core_1.SCPreferences.CONFIGURATIONS_ONBOARDING_ENABLED,
-    react_core_1.SCPreferences.CONFIGURATIONS_ONBOARDING_HIDDEN
+    react_core_1.SCPreferences.CONFIGURATIONS_ONBOARDING_HIDDEN,
+    react_core_1.SCPreferences.ADDONS_PRIVATE_MESSAGES_ENABLED,
+    react_core_1.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.
@@ -91,6 +93,9 @@ function NavigationSettingsIconButton(inProps) {
         PREFERENCES.map((p) => (_preferences[p] = p in scPreferences.preferences ? scPreferences.preferences[p].value : null));
         return _preferences;
     }, [scPreferences.preferences]);
+    const { isPaymentsEnabled } = (0, react_core_1.useSCPaymentsEnabled)();
+    const connectionEnabled = react_core_1.SCPreferences.CONFIGURATIONS_CONNECTION_ENABLED in scPreferences.preferences &&
+        scPreferences.preferences[react_core_1.SCPreferences.CONFIGURATIONS_CONNECTION_ENABLED].value;
     // HANDLERS
     const handleOpen = (event) => {
         setAnchorEl(event.currentTarget);
@@ -138,11 +143,13 @@ function NavigationSettingsIconButton(inProps) {
                 (0, jsx_runtime_1.jsx)(material_1.ListItem, Object.assign({ className: classes.item }, { children: (0, jsx_runtime_1.jsx)(material_1.ListItemButton, Object.assign({ component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, scUserContext.user) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationSettingsIconButton.profile", defaultMessage: "ui.navigationSettingsIconButton.profile" }) })) }), "profile"),
                 preferences[react_core_1.SCPreferences.CONFIGURATIONS_FOLLOW_ENABLED] && ((0, jsx_runtime_1.jsx)(material_1.ListItem, Object.assign({ className: classes.item }, { children: (0, jsx_runtime_1.jsx)(material_1.ListItemButton, Object.assign({ component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_FOLLOWINGS_ROUTE_NAME, scUserContext.user) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationSettingsIconButton.followings", defaultMessage: "ui.navigationSettingsIconButton.followings" }) })) }), "followings")),
                 preferences[react_core_1.SCPreferences.CONFIGURATIONS_FOLLOW_ENABLED] && ((0, jsx_runtime_1.jsx)(material_1.ListItem, Object.assign({ className: classes.item }, { children: (0, jsx_runtime_1.jsx)(material_1.ListItemButton, Object.assign({ component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_FOLLOWERS_ROUTE_NAME, scUserContext.user) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationSettingsIconButton.followers", defaultMessage: "ui.navigationSettingsIconButton.followers" }) })) }), "followers")),
-                !preferences[react_core_1.SCPreferences.CONFIGURATIONS_FOLLOW_ENABLED] && ((0, jsx_runtime_1.jsx)(material_1.ListItem, Object.assign({ className: classes.item }, { children: (0, jsx_runtime_1.jsx)(material_1.ListItemButton, Object.assign({ component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_CONNECTIONS_ROUTE_NAME, scUserContext.user) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationSettingsIconButton.connections", defaultMessage: "ui.navigationSettingsIconButton.connections" }) })) }), "connections")),
+                connectionEnabled && ((0, jsx_runtime_1.jsx)(material_1.ListItem, Object.assign({ className: classes.item }, { children: (0, jsx_runtime_1.jsx)(material_1.ListItemButton, Object.assign({ component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_CONNECTIONS_ROUTE_NAME, scUserContext.user) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationSettingsIconButton.connections", defaultMessage: "ui.navigationSettingsIconButton.connections" }) })) }), "connections")),
                 preferences[react_core_1.SCPreferences.ADDONS_LOYALTY_POINTS_COLLECTION] && ((0, jsx_runtime_1.jsx)(material_1.ListItem, Object.assign({ className: classes.item }, { children: (0, jsx_runtime_1.jsx)(material_1.ListItemButton, Object.assign({ component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.LOYALTY_ROUTE_NAME, {}) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationSettingsIconButton.loyalty", defaultMessage: "ui.navigationSettingsIconButton.loyalty" }) })) }), "loyaltyProgram")),
+                preferences[react_core_1.SCPreferences.CONFIGURATIONS_POST_TYPE_ENABLED] && preferences[react_core_1.SCPreferences.CONFIGURATIONS_SCHEDULED_POSTS_ENABLED] && ((0, jsx_runtime_1.jsx)(material_1.ListItem, Object.assign({ className: classes.item }, { children: (0, jsx_runtime_1.jsx)(material_1.ListItemButton, Object.assign({ component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_SCHEDULED_POSTS_ROUTE_NAME, scUserContext.user) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationSettingsIconButton.postsScheduled", defaultMessage: "ui.navigationSettingsIconButton.postsScheduled" }) })) }), "scheduledPosts")),
                 preferences[react_core_1.SCPreferences.CONFIGURATIONS_POST_TYPE_ENABLED] && ((0, jsx_runtime_1.jsx)(material_1.ListItem, Object.assign({ className: classes.item }, { children: (0, jsx_runtime_1.jsx)(material_1.ListItemButton, Object.assign({ component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_FOLLOWED_POSTS_ROUTE_NAME, scUserContext.user) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationSettingsIconButton.postsFollowed", defaultMessage: "ui.navigationSettingsIconButton.postsFollowed" }) })) }), "followedPosts")),
+                preferences[react_core_1.SCPreferences.CONFIGURATIONS_DISCUSSION_TYPE_ENABLED] && preferences[react_core_1.SCPreferences.CONFIGURATIONS_SCHEDULED_POSTS_ENABLED] && ((0, jsx_runtime_1.jsx)(material_1.ListItem, Object.assign({ className: classes.item }, { children: (0, jsx_runtime_1.jsx)(material_1.ListItemButton, Object.assign({ component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_SCHEDULED_DISCUSSIONS_ROUTE_NAME, scUserContext.user) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationSettingsIconButton.discussionsScheduled", defaultMessage: "ui.navigationSettingsIconButton.discussionsScheduled" }) })) }), "scheduledDiscussions")),
                 preferences[react_core_1.SCPreferences.CONFIGURATIONS_DISCUSSION_TYPE_ENABLED] && ((0, jsx_runtime_1.jsx)(material_1.ListItem, Object.assign({ className: classes.item }, { children: (0, jsx_runtime_1.jsx)(material_1.ListItemButton, Object.assign({ component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_FOLLOWED_DISCUSSIONS_ROUTE_NAME, scUserContext.user) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationSettingsIconButton.discussionsFollowed", defaultMessage: "ui.navigationSettingsIconButton.discussionsFollowed" }) })) }), "followedDiscussions")),
-                (0, jsx_runtime_1.jsx)(material_1.ListItem, Object.assign({ className: classes.item }, { children: (0, jsx_runtime_1.jsx)(material_1.ListItemButton, Object.assign({ component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_PRIVATE_MESSAGES_ROUTE_NAME, {}) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationSettingsIconButton.privateMessages", defaultMessage: "ui.navigationSettingsIconButton.privateMessages" }) })) }), "privateMessages"),
+                preferences[react_core_1.SCPreferences.ADDONS_PRIVATE_MESSAGES_ENABLED] && ((0, jsx_runtime_1.jsx)(material_1.ListItem, Object.assign({ className: classes.item }, { children: (0, jsx_runtime_1.jsx)(material_1.ListItemButton, Object.assign({ component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_PRIVATE_MESSAGES_ROUTE_NAME, {}) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationSettingsIconButton.privateMessages", defaultMessage: "ui.navigationSettingsIconButton.privateMessages" }) })) }), "privateMessages")),
                 ...items.map((item, index) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, Object.assign({ className: classes.item }, { children: (0, jsx_runtime_1.jsx)(material_1.ListItemButton, Object.assign({ component: react_core_1.Link, to: item.href }, { children: item.label })) }), `custom_item_${index}`))),
                 ...(isAdmin
                     ? [
@@ -160,6 +167,13 @@ function NavigationSettingsIconButton(inProps) {
                     ]
                     : []),
                 (0, jsx_runtime_1.jsx)(material_1.ListItem, Object.assign({ className: classes.item }, { children: (0, jsx_runtime_1.jsx)(material_1.ListItemButton, Object.assign({ component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_SETTINGS_ROUTE_NAME, scUserContext.user) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationSettingsIconButton.settings", defaultMessage: "ui.navigationSettingsIconButton.settings" }) })) }), "settings"),
+                ...(isPaymentsEnabled
+                    ? [
+                        (0, jsx_runtime_1.jsx)(material_1.Divider, {}, "payments_divider"),
+                        (0, jsx_runtime_1.jsx)(material_1.ListItem, Object.assign({ className: classes.item }, { children: (0, jsx_runtime_1.jsx)(material_1.ListItemButton, Object.assign({ component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_PAYMENTS_HISTORY_ORDERS_ROUTE_NAME, scUserContext.user) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationSettingsIconButton.historyOrders", defaultMessage: "ui.navigationSettingsIconButton.historyOrders" }) })) }), "paymentsHistoryOrder"),
+                        (0, jsx_runtime_1.jsx)(material_1.ListItem, Object.assign({ className: classes.item }, { children: (0, jsx_runtime_1.jsx)(material_1.ListItemButton, Object.assign({ component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_PAYMENT_METHODS_ROUTE_NAME, scUserContext.user) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationSettingsIconButton.myPaymentMethods", defaultMessage: "ui.navigationSettingsIconButton.myPaymentMethods" }) })) }), "myPaymentMethods")
+                    ]
+                    : []),
                 (0, jsx_runtime_1.jsx)(material_1.Divider, {}, "divider"),
                 (0, jsx_runtime_1.jsx)(material_1.ListItem, Object.assign({ className: classes.item }, { children: (0, jsx_runtime_1.jsx)(material_1.ListItemButton, Object.assign({ onClick: handleLogout }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationSettingsIconButton.logout", defaultMessage: "ui.navigationSettingsIconButton.logout" }) })) }), "logout")
             ];
@@ -169,11 +183,13 @@ function NavigationSettingsIconButton(inProps) {
                 (0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ className: classes.item, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, scUserContext.user) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationSettingsIconButton.profile", defaultMessage: "ui.navigationSettingsIconButton.profile" }) }), "profile"),
                 preferences[react_core_1.SCPreferences.CONFIGURATIONS_FOLLOW_ENABLED] && ((0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ className: classes.item, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_FOLLOWINGS_ROUTE_NAME, scUserContext.user) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationSettingsIconButton.followings", defaultMessage: "ui.navigationSettingsIconButton.followings" }) }), "followings")),
                 preferences[react_core_1.SCPreferences.CONFIGURATIONS_FOLLOW_ENABLED] && ((0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ className: classes.item, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_FOLLOWERS_ROUTE_NAME, scUserContext.user) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationSettingsIconButton.followers", defaultMessage: "ui.navigationSettingsIconButton.followers" }) }), "followers")),
-                !preferences[react_core_1.SCPreferences.CONFIGURATIONS_FOLLOW_ENABLED] && ((0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ className: classes.item, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_CONNECTIONS_ROUTE_NAME, scUserContext.user) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationSettingsIconButton.connections", defaultMessage: "ui.navigationSettingsIconButton.connections" }) }), "connections")),
+                connectionEnabled && ((0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ className: classes.item, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_CONNECTIONS_ROUTE_NAME, scUserContext.user) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationSettingsIconButton.connections", defaultMessage: "ui.navigationSettingsIconButton.connections" }) }), "connections")),
                 preferences[react_core_1.SCPreferences.ADDONS_LOYALTY_POINTS_COLLECTION] && ((0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ className: classes.item, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.LOYALTY_ROUTE_NAME, {}) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationSettingsIconButton.loyalty", defaultMessage: "ui.navigationSettingsIconButton.loyalty" }) }), "loyaltyProgram")),
+                preferences[react_core_1.SCPreferences.CONFIGURATIONS_POST_TYPE_ENABLED] && preferences[react_core_1.SCPreferences.CONFIGURATIONS_SCHEDULED_POSTS_ENABLED] && ((0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ className: classes.item, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_SCHEDULED_POSTS_ROUTE_NAME, scUserContext.user) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationSettingsIconButton.postsScheduled", defaultMessage: "ui.navigationSettingsIconButton.postsScheduled" }) }), "scheduledPosts")),
                 preferences[react_core_1.SCPreferences.CONFIGURATIONS_POST_TYPE_ENABLED] && ((0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ className: classes.item, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_FOLLOWED_POSTS_ROUTE_NAME, scUserContext.user) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationSettingsIconButton.postsFollowed", defaultMessage: "ui.navigationSettingsIconButton.postsFollowed" }) }), "followedPosts")),
+                preferences[react_core_1.SCPreferences.CONFIGURATIONS_DISCUSSION_TYPE_ENABLED] && preferences[react_core_1.SCPreferences.CONFIGURATIONS_SCHEDULED_POSTS_ENABLED] && ((0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ className: classes.item, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_SCHEDULED_DISCUSSIONS_ROUTE_NAME, scUserContext.user) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationSettingsIconButton.discussionsScheduled", defaultMessage: "ui.navigationSettingsIconButton.discussionsScheduled" }) }), "scheduledDiscussions")),
                 preferences[react_core_1.SCPreferences.CONFIGURATIONS_DISCUSSION_TYPE_ENABLED] && ((0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ className: classes.item, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_FOLLOWED_DISCUSSIONS_ROUTE_NAME, scUserContext.user) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationSettingsIconButton.discussionsFollowed", defaultMessage: "ui.navigationSettingsIconButton.discussionsFollowed" }) }), "followedDiscussions")),
-                (0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ className: classes.item, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_PRIVATE_MESSAGES_ROUTE_NAME, {}) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationSettingsIconButton.privateMessages", defaultMessage: "ui.navigationSettingsIconButton.privateMessages" }) }), "privateMessages"),
+                preferences[react_core_1.SCPreferences.ADDONS_PRIVATE_MESSAGES_ENABLED] && ((0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ className: classes.item, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_PRIVATE_MESSAGES_ROUTE_NAME, {}) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationSettingsIconButton.privateMessages", defaultMessage: "ui.navigationSettingsIconButton.privateMessages" }) }), "privateMessages")),
                 ...items.map((item, index) => ((0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ className: classes.item, component: react_core_1.Link, to: item.href }, { children: item.label }), `custom_item_${index}`))),
                 ...(isAdmin
                     ? [
@@ -191,6 +207,13 @@ function NavigationSettingsIconButton(inProps) {
                     ]
                     : []),
                 (0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ className: classes.item, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_SETTINGS_ROUTE_NAME, scUserContext.user) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationSettingsIconButton.settings", defaultMessage: "ui.navigationSettingsIconButton.settings" }) }), "settings"),
+                ...(isPaymentsEnabled
+                    ? [
+                        (0, jsx_runtime_1.jsx)(material_1.Divider, {}, "payments_divider"),
+                        (0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ className: classes.item, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_PAYMENTS_HISTORY_ORDERS_ROUTE_NAME, scUserContext.user) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationSettingsIconButton.historyOrders", defaultMessage: "ui.navigationSettingsIconButton.historyOrders" }) }), "historyOrders"),
+                        (0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ className: classes.item, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_PAYMENT_METHODS_ROUTE_NAME, scUserContext.user) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationSettingsIconButton.myPaymentMethods", defaultMessage: "ui.navigationSettingsIconButton.myPaymentMethods" }) }), "myPaymentMethods")
+                    ]
+                    : []),
                 (0, jsx_runtime_1.jsx)(material_1.Divider, {}, "divider"),
                 (0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ className: classes.item, onClick: handleLogout }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationSettingsIconButton.logout", defaultMessage: "ui.navigationSettingsIconButton.logout" }) }), "logout")
             ];

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

@@ -48,7 +48,8 @@ const PREFERENCES = [
     react_core_1.SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_ENABLED,
     react_core_1.SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_URL,
     react_core_1.SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_IMAGE,
-    react_core_1.SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_TEXT
+    react_core_1.SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_TEXT,
+    react_core_1.SCPreferences.ADDONS_PRIVATE_MESSAGES_ENABLED
 ];
 /**
  * > API documentation for the Community-JS NavigationToolbar component. Learn about the available props and the CSS API.
@@ -109,7 +110,9 @@ function NavigationToolbar(inProps) {
         PREFERENCES.map((p) => (_preferences[p] = p in scPreferences.preferences ? scPreferences.preferences[p].value : null));
         return _preferences;
     }, [scPreferences.preferences]);
-    const privateMessagingEnabled = (0, react_1.useMemo)(() => scPreferences.features.includes(types_1.SCFeatureName.PRIVATE_MESSAGING), [scPreferences.features]);
+    const privateMessagingEnabled = (0, react_1.useMemo)(() => scPreferences.preferences &&
+        react_core_1.SCPreferences.ADDONS_PRIVATE_MESSAGES_ENABLED in scPreferences.preferences &&
+        scPreferences.preferences[react_core_1.SCPreferences.ADDONS_PRIVATE_MESSAGES_ENABLED].value, [scPreferences.preferences]);
     const groupsEnabled = (0, react_1.useMemo)(() => scPreferences.preferences &&
         scPreferences.features &&
         scPreferences.features.includes(types_1.SCFeatureName.TAGGING) &&
@@ -129,7 +132,9 @@ function NavigationToolbar(inProps) {
         scPreferences.preferences[react_core_1.SCPreferences.CONFIGURATIONS_COURSES_ENABLED].value, [scPreferences.preferences, scPreferences.features]);
     const showComposer = (0, react_1.useMemo)(() => {
         return (!disableComposer &&
-            (!scPreferences.preferences[react_core_1.SCPreferences.CONFIGURATIONS_POST_ONLY_STAFF_ENABLED].value || react_core_1.UserUtils.isStaff(scUserContext.user)));
+            (!scPreferences.preferences[react_core_1.SCPreferences.CONFIGURATIONS_POST_ONLY_STAFF_ENABLED].value ||
+                react_core_1.UserUtils.isStaff(scUserContext.user) ||
+                react_core_1.UserUtils.isPublisher(scUserContext.user)));
     }, [preferences, disableComposer, scUserContext.user]);
     // STATE
     const [anchorNotification, setAnchorNotification] = react_1.default.useState(null);

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

@@ -108,7 +108,7 @@ function NavigationToolbarMobile(inProps) {
     const _children = children || ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(NavigationMenuIconButtonComponent, {}), (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes.HOME_ROUTE_NAME, {}), className: (0, classnames_1.default)(className, classes.logo, {
                     [classes.logoFlex]: preferences[react_core_1.SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_URL].value
                 }) }, { children: !preserveDesktopLogo ? ((0, jsx_runtime_1.jsx)("img", { src: preferences[react_core_1.SCPreferences.LOGO_NAVBAR_LOGO_MOBILE].value, alt: "logo" })) : ((0, jsx_runtime_1.jsx)("img", { src: preferences[react_core_1.SCPreferences.LOGO_NAVBAR_LOGO].value, alt: "logo" })) })), preferences[react_core_1.SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_ENABLED].value && ((0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ target: "blank", to: preferences[react_core_1.SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_URL].value, className: classes.customItem }, { children: (0, jsx_runtime_1.jsx)("img", { src: preferences[react_core_1.SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_IMAGE].value, alt: "custom_item" }) })))] }));
-    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(className, classes.root) }, rest, { children: [_children, startActions, (contentAvailable || scUserContext.user) && !disableSearch && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: classes.search, onClick: handleOpenSearch }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "search" }) })), (0, jsx_runtime_1.jsx)(SearchDialog_1.default, { className: classes.searchDialog, fullScreen: true, open: searchOpen, SearchAutocompleteComponentProps: Object.assign(Object.assign({}, SearchAutocompleteComponentProps), { onClear: handleCloseSearch }) })] })), endActions, (!postOnlyStaffEnabled || (react_core_1.UserUtils.isStaff(scUserContext.user) && postOnlyStaffEnabled)) &&
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(className, classes.root) }, rest, { children: [_children, startActions, (contentAvailable || scUserContext.user) && !disableSearch && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: classes.search, onClick: handleOpenSearch }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "search" }) })), (0, jsx_runtime_1.jsx)(SearchDialog_1.default, { className: classes.searchDialog, fullScreen: true, open: searchOpen, SearchAutocompleteComponentProps: Object.assign(Object.assign({}, SearchAutocompleteComponentProps), { onClear: handleCloseSearch }) })] })), endActions, (!postOnlyStaffEnabled || react_core_1.UserUtils.isStaff(scUserContext.user) || react_core_1.UserUtils.isPublisher(scUserContext.user)) &&
                 (scUserContext.user || contentAvailable) &&
                 exploreStreamEnabled && (0, jsx_runtime_1.jsx)(ComposerIconButton_1.default, Object.assign({}, ComposerIconButtonProps)), scUserContext.user && (groupsEnabled || eventsEnabled) && ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: classes.notifications, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_NOTIFICATIONS_ROUTE_NAME, {}) }, { children: (0, jsx_runtime_1.jsx)(material_1.Badge, Object.assign({ badgeContent: scUserContext.user.unseen_notification_banners_counter + scUserContext.user.unseen_interactions_counter, color: "secondary" }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "notifications_active" }) })) }))), scUserContext.user ? ((0, jsx_runtime_1.jsx)(NavigationSettingsIconButtonComponent, { className: classes.settings })) : ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ className: classes.login, color: "inherit", component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.SIGNIN_ROUTE_NAME, {}) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.appBar.navigation.login", defaultMessage: "ui.appBar.navigation.login" }) })))] })));
 }

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

@@ -4,7 +4,7 @@ import { SCNotificationAggregatedType } from '@selfcommunity/types';
 export interface NotificationProps extends CardProps, VirtualScrollerItemProps {
     /**
      * Id of the UserNotification
-     * @default `notification_<notificationObject.sid>`
+     * @default `notification_notificationObject.sid`
      */
     id?: string;
     /**

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

@@ -0,0 +1,6 @@
+import { BaseDialogProps } from '../../shared/BaseDialog';
+export interface PaymentDetailDialogProps extends BaseDialogProps {
+    className?: string;
+    disableInitialTransition?: boolean;
+}
+export default function PaymentDetailDialog(inProps: PaymentDetailDialogProps): JSX.Element;

package/lib/cjs/components/PaymentDetailDialog/PaymentDetailDialog.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = tslib_1.__importDefault(require("react"));
+const material_1 = require("@mui/material");
+const system_1 = require("@mui/system");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const react_core_1 = require("@selfcommunity/react-core");
+const BaseDialog_1 = tslib_1.__importDefault(require("../../shared/BaseDialog"));
+const react_intl_1 = require("react-intl");
+const PREFIX = 'SCPaymentProductsDialog';
+const classes = {
+    root: `${PREFIX}-root`
+};
+const Root = (0, material_1.styled)(BaseDialog_1.default, {
+    slot: 'Root',
+    name: PREFIX
+})(({ theme }) => ({}));
+const Transition = react_1.default.forwardRef(function Transition(props, ref) {
+    return (0, jsx_runtime_1.jsx)(material_1.Slide, Object.assign({ direction: "up", ref: ref }, props));
+});
+const NoTransition = react_1.default.forwardRef(function NoTransition(props, ref) {
+    return (0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [" ", props.children, " "] });
+});
+function PaymentDetailDialog(inProps) {
+    // PROPS
+    const props = (0, system_1.useThemeProps)({
+        props: inProps,
+        name: PREFIX
+    });
+    const { className, disableInitialTransition = false } = props, rest = tslib_1.__rest(props, ["className", "disableInitialTransition"]);
+    // HOOKS
+    const { isPaymentsEnabled } = (0, react_core_1.useSCPaymentsEnabled)();
+    if (!isPaymentsEnabled) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ maxWidth: 'sm', fullWidth: true, title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentDetailDialog.title", defaultMessage: "ui.paymentDetailDialog.title" }), scroll: 'paper', open: true }, (disableInitialTransition ? { TransitionComponent: NoTransition } : { TransitionComponent: Transition }), { className: (0, classnames_1.default)(classes.root, className), TransitionComponent: Transition }, rest, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentDetailDialog.content", defaultMessage: "ui.paymentDetailDialog.content" }) })));
+}
+exports.default = PaymentDetailDialog;

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

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

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

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

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

@@ -0,0 +1,10 @@
+import { SCPaymentOrder } from '@selfcommunity/types';
+import { PaymentOrderPdfButtonProps } from '../PaymentOrderPdfButton';
+export interface PaymentOrderProps {
+    className?: string;
+    paymentOrderId?: number;
+    paymentOrder?: SCPaymentOrder;
+    hidePaymentOrderPdfButton?: boolean;
+    PaymentOrderPdfButtonComponentProps?: PaymentOrderPdfButtonProps;
+}
+export default function PaymentOrder(inProps: PaymentOrderProps): JSX.Element;

package/lib/cjs/components/PaymentOrder/PaymentOrder.js

@@ -0,0 +1,80 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const system_1 = require("@mui/system");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const react_core_1 = require("@selfcommunity/react-core");
+const types_1 = require("@selfcommunity/types");
+const constants_1 = require("./constants");
+const react_intl_1 = require("react-intl");
+const Event_1 = tslib_1.__importDefault(require("../Event"));
+const utils_1 = require("@selfcommunity/utils");
+const Category_1 = tslib_1.__importDefault(require("../Category"));
+const Course_1 = tslib_1.__importDefault(require("../Course"));
+const Group_1 = tslib_1.__importDefault(require("../Group"));
+const PaymentProduct_1 = tslib_1.__importDefault(require("../PaymentProduct"));
+const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
+const PaymentOrderPdfButton_1 = tslib_1.__importDefault(require("../PaymentOrderPdfButton"));
+const payment_1 = require("../../utils/payment");
+const course_1 = require("../../types/course");
+const event_1 = require("../../types/event");
+const classes = {
+    root: `${constants_1.PREFIX}-root`,
+    img: `${constants_1.PREFIX}-img`,
+    contentObject: `${constants_1.PREFIX}-content-object`,
+    object: `${constants_1.PREFIX}-object`,
+    status: `${constants_1.PREFIX}-status`,
+    details: `${constants_1.PREFIX}-details`
+};
+const Root = (0, material_1.styled)(material_1.Box, {
+    slot: 'Root',
+    name: constants_1.PREFIX
+})(({ theme }) => ({}));
+function PaymentOrder(inProps) {
+    // PROPS
+    const props = (0, system_1.useThemeProps)({
+        props: inProps,
+        name: constants_1.PREFIX
+    });
+    const { className, paymentOrderId, paymentOrder, hidePaymentOrderPdfButton = false, PaymentOrderPdfButtonComponentProps = {} } = props, rest = tslib_1.__rest(props, ["className", "paymentOrderId", "paymentOrder", "hidePaymentOrderPdfButton", "PaymentOrderPdfButtonComponentProps"]);
+    // HOOKS
+    const { isPaymentsEnabled } = (0, react_core_1.useSCPaymentsEnabled)();
+    const { scPaymentOrder } = (0, react_core_1.useSCFetchPaymentOrder)({ id: paymentOrderId, paymentOrder });
+    const intl = (0, react_intl_1.useIntl)();
+    if (!isPaymentsEnabled || !scPaymentOrder) {
+        return (0, jsx_runtime_1.jsx)(Skeleton_1.default, {});
+    }
+    const renderContent = () => {
+        var _a, _b;
+        let header;
+        const content = scPaymentOrder[scPaymentOrder.content_type];
+        if (scPaymentOrder.content_type === types_1.SCContentType.EVENT) {
+            header = ((0, jsx_runtime_1.jsx)(Event_1.default, { event: content, cacheStrategy: utils_1.CacheStrategies.NETWORK_ONLY, template: event_1.SCEventTemplateType.PREVIEW, actions: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}), variant: "outlined", className: classes.object }));
+        }
+        else if (scPaymentOrder.content_type === types_1.SCContentType.CATEGORY) {
+            header = ((0, jsx_runtime_1.jsx)(Category_1.default, { category: content, cacheStrategy: utils_1.CacheStrategies.NETWORK_ONLY, actions: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}), variant: "outlined", className: classes.object }));
+        }
+        else if (scPaymentOrder.content_type === types_1.SCContentType.COURSE) {
+            header = ((0, jsx_runtime_1.jsx)(Course_1.default, { course: content, cacheStrategy: utils_1.CacheStrategies.NETWORK_ONLY, template: course_1.SCCourseTemplateType.PREVIEW, actions: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}), hideEventParticipants: true, hideEventPlanner: true, variant: "outlined", className: classes.object }));
+        }
+        else if (scPaymentOrder.content_type === types_1.SCContentType.GROUP) {
+            header = ((0, jsx_runtime_1.jsx)(Group_1.default, { group: content, cacheStrategy: utils_1.CacheStrategies.NETWORK_ONLY, hideActions: true, variant: "outlined", hideEventParticipants: true, hideEventPlanner: true, className: classes.object }));
+        }
+        else if (scPaymentOrder.content_type === types_1.SCContentType.COMMUNITY) {
+            header = ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: ((_a = scPaymentOrder.payment_price) === null || _a === void 0 ? void 0 : _a.payment_product) && ((0, jsx_runtime_1.jsx)(PaymentProduct_1.default, { hidePaymentProductPrices: true, paymentProduct: (_b = scPaymentOrder.payment_price) === null || _b === void 0 ? void 0 : _b.payment_product })) }));
+        }
+        return ((0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ spacing: 2, justifyContent: "center", alignItems: "flex-start" }, { children: (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.contentObject }, { children: header })) })));
+    };
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [renderContent(), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.details }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", color: "textSecondary" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrder.date", defaultMessage: "ui.paymentOrder.date", values: {
+                                date: intl.formatDate(new Date(scPaymentOrder.created_at), {
+                                    year: 'numeric',
+                                    month: 'numeric',
+                                    day: 'numeric',
+                                    hour: 'numeric',
+                                    minute: 'numeric'
+                                })
+                            } }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", color: "textSecondary" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrder.price", defaultMessage: "ui.paymentOrder.price", values: { price: (0, payment_1.getConvertedAmount)(scPaymentOrder.payment_price) } }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", color: "textSecondary", component: "span" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrder.status", defaultMessage: "ui.paymentOrder.status" }) })), (0, jsx_runtime_1.jsx)(material_1.Chip, { className: classes.status, variant: 'outlined', label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrder.status.paid", defaultMessage: "ui.paymentOrder.status.paid" }), color: "success", size: "small" }), (0, jsx_runtime_1.jsx)("br", {}), scPaymentOrder && !hidePaymentOrderPdfButton && ((0, jsx_runtime_1.jsx)(PaymentOrderPdfButton_1.default, Object.assign({ paymentOrder: scPaymentOrder, label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paymentOrder.ticket.view", defaultMessage: "ui.paymentOrder.ticket.view" }) }, PaymentOrderPdfButtonComponentProps)))] }))] })));
+}
+exports.default = PaymentOrder;

package/lib/cjs/components/PaymentOrder/Skeleton.d.ts

@@ -0,0 +1,30 @@
+import { BoxProps } from '@mui/material';
+export interface PaymentOrderSkeletonProps extends BoxProps {
+    /**
+     * Overrides or extends the styles applied to the component.
+     * @default null
+     */
+    className?: string;
+}
+/**
+ * > API documentation for the Community-JS PaymentOrder Skeleton component. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {PaymentOrderSkeleton} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCPaymentOrder-skeleton-root` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCPaymentOrder-skeleton-root|Styles applied to the root element.|
+ |image|.SCPaymentOrder-skeleton-image|Styles applied to the image element.|
+ *
+ */
+export default function PaymentOrderSkeleton(inProps: PaymentOrderSkeletonProps): JSX.Element;

package/lib/cjs/components/PaymentOrder/Skeleton.js

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const system_1 = require("@mui/system");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const constants_1 = require("./constants");
+const Widget_1 = tslib_1.__importDefault(require("../Widget"));
+const classes = {
+    root: `${constants_1.PREFIX}-skeleton-root`,
+    skeletonPreviewRoot: `${constants_1.PREFIX}-skeleton-preview-root`,
+    skeletonPreviewContent: `${constants_1.PREFIX}-skeleton-preview-content`,
+    skeletonPreviewName: `${constants_1.PREFIX}-skeleton-preview-name`,
+    skeletonPreviewActions: `${constants_1.PREFIX}-skeleton-preview-actions`
+};
+const Root = (0, material_1.styled)(material_1.Box, {
+    name: constants_1.PREFIX,
+    slot: 'SkeletonRoot'
+})(() => ({}));
+const SkeletonPreviewRoot = (0, material_1.styled)(Widget_1.default, {
+    name: constants_1.PREFIX,
+    slot: 'SkeletonPreviewRoot'
+})(() => ({}));
+/**
+ * > API documentation for the Community-JS PaymentOrder Skeleton component. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {PaymentOrderSkeleton} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCPaymentOrder-skeleton-root` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCPaymentOrder-skeleton-root|Styles applied to the root element.|
+ |image|.SCPaymentOrder-skeleton-image|Styles applied to the image element.|
+ *
+ */
+function PaymentOrderSkeleton(inProps) {
+    // PROPS
+    const props = (0, system_1.useThemeProps)({
+        props: inProps,
+        name: constants_1.PREFIX
+    });
+    const { className } = props, rest = tslib_1.__rest(props, ["className"]);
+    const theme = (0, material_1.useTheme)();
+    /**
+     * Renders event object
+     */
+    let contentObj;
+    contentObj = ((0, jsx_runtime_1.jsxs)(SkeletonPreviewRoot, Object.assign({ className: classes.skeletonPreviewRoot }, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ position: "relative" }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rectangular", width: "100%", height: "80px" }) })), (0, jsx_runtime_1.jsxs)(material_1.CardContent, Object.assign({ className: classes.skeletonPreviewContent }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", alignItems: "center", gap: "8px" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "circular", width: "21px", height: "21px" }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { width: "50%", height: "20px" })] })), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { width: "67%", height: "25px", className: classes.skeletonPreviewName }), (0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ direction: "row", alignItems: "center", gap: "8px", marginBottom: "2px" }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { width: "27%", height: "18px" }) })), (0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ direction: "row", gap: "8px", alignItems: "center" }, { children: (0, jsx_runtime_1.jsxs)(material_1.AvatarGroup, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "circular", width: `${theme.selfcommunity.user.avatar.sizeSmall}px`, height: `${theme.selfcommunity.user.avatar.sizeSmall}px` }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "circular", width: `${theme.selfcommunity.user.avatar.sizeSmall}px`, height: `${theme.selfcommunity.user.avatar.sizeSmall}px` }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "circular", width: `${theme.selfcommunity.user.avatar.sizeSmall}px`, height: `${theme.selfcommunity.user.avatar.sizeSmall}px` })] }) }))] }))] })));
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [contentObj, (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "column", alignItems: "flex-start", gap: "8px", marginTop: "8px" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { width: "50%", height: "18px" }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { width: "35%", height: "18px" }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { width: "20%", height: "18px" })] }))] })));
+}
+exports.default = PaymentOrderSkeleton;

package/lib/cjs/components/PaymentOrder/constants.d.ts

@@ -0,0 +1 @@
+export declare const PREFIX = "SCPaymentOrder";

package/lib/cjs/components/PaymentOrder/constants.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PREFIX = void 0;
+exports.PREFIX = 'SCPaymentOrder';

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

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

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

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