@selfcommunity/react-ui 0.11.0-alpha.67 → 0.11.0-alpha.69

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

@@ -2,7 +2,7 @@ import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useMemo, useState } from 'react';
 import { Divider, Icon, IconButton, List, ListItem, ListItemButton, ListItemIcon, Menu, MenuItem, SwipeableDrawer, useMediaQuery, useTheme, styled } from '@mui/material';
-import { Link, SCPreferences, SCRoutes, UserUtils, useSCPreferences, useSCRouting, useSCUser } from '@selfcommunity/react-core';
+import { Link, SCPreferences, SCRoutes, UserUtils, useSCPaymentsEnabled, useSCPreferences, useSCRouting, useSCUser } from '@selfcommunity/react-core';
 import classNames from 'classnames';
 import { useThemeProps } from '@mui/system';
 import { FormattedMessage } from 'react-intl';
@@ -39,7 +39,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.
@@ -89,6 +91,9 @@ 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;
     // HANDLERS
     const handleOpen = (event) => {
         setAnchorEl(event.currentTarget);
@@ -136,11 +141,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
                     ? [
@@ -158,6 +169,13 @@ 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, {}, "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")
             ];
@@ -167,11 +185,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
                     ? [
@@ -189,6 +213,13 @@ 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, {}, "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.js

@@ -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.
@@ -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) &&
@@ -127,7 +130,9 @@ export default function NavigationToolbar(inProps) {
         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);

package/lib/esm/components/NavigationToolbarMobile/NavigationToolbarMobile.js

@@ -106,7 +106,7 @@ export default function NavigationToolbarMobile(inProps) {
     const _children = children || (_jsxs(_Fragment, { children: [_jsx(NavigationMenuIconButtonComponent, {}), _jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.HOME_ROUTE_NAME, {}), className: classNames(className, classes.logo, {
                     [classes.logoFlex]: preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_URL].value
                 }) }, { children: !preserveDesktopLogo ? (_jsx("img", { src: preferences[SCPreferences.LOGO_NAVBAR_LOGO_MOBILE].value, alt: "logo" })) : (_jsx("img", { src: preferences[SCPreferences.LOGO_NAVBAR_LOGO].value, alt: "logo" })) })), preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_ENABLED].value && (_jsx(Link, Object.assign({ target: "blank", to: preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_URL].value, className: classes.customItem }, { children: _jsx("img", { src: preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_IMAGE].value, alt: "custom_item" }) })))] }));
-    return (_jsxs(Root, Object.assign({ className: classNames(className, classes.root) }, rest, { children: [_children, startActions, (contentAvailable || scUserContext.user) && !disableSearch && (_jsxs(_Fragment, { children: [_jsx(IconButton, Object.assign({ className: classes.search, onClick: handleOpenSearch }, { children: _jsx(Icon, { children: "search" }) })), _jsx(SearchDialog, { className: classes.searchDialog, fullScreen: true, open: searchOpen, SearchAutocompleteComponentProps: Object.assign(Object.assign({}, SearchAutocompleteComponentProps), { onClear: handleCloseSearch }) })] })), endActions, (!postOnlyStaffEnabled || (UserUtils.isStaff(scUserContext.user) && postOnlyStaffEnabled)) &&
+    return (_jsxs(Root, Object.assign({ className: classNames(className, classes.root) }, rest, { children: [_children, startActions, (contentAvailable || scUserContext.user) && !disableSearch && (_jsxs(_Fragment, { children: [_jsx(IconButton, Object.assign({ className: classes.search, onClick: handleOpenSearch }, { children: _jsx(Icon, { children: "search" }) })), _jsx(SearchDialog, { className: classes.searchDialog, fullScreen: true, open: searchOpen, SearchAutocompleteComponentProps: Object.assign(Object.assign({}, SearchAutocompleteComponentProps), { onClear: handleCloseSearch }) })] })), endActions, (!postOnlyStaffEnabled || UserUtils.isStaff(scUserContext.user) || UserUtils.isPublisher(scUserContext.user)) &&
                 (scUserContext.user || contentAvailable) &&
                 exploreStreamEnabled && _jsx(ComposerIconButton, Object.assign({}, ComposerIconButtonProps)), scUserContext.user && (groupsEnabled || eventsEnabled) && (_jsx(IconButton, Object.assign({ className: classes.notifications, component: Link, to: scRoutingContext.url(SCRoutes.USER_NOTIFICATIONS_ROUTE_NAME, {}) }, { 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" }) })) }))), scUserContext.user ? (_jsx(NavigationSettingsIconButtonComponent, { className: classes.settings })) : (_jsx(Button, Object.assign({ className: classes.login, color: "inherit", component: Link, to: scRoutingContext.url(SCRoutes.SIGNIN_ROUTE_NAME, {}) }, { children: _jsx(FormattedMessage, { id: "ui.appBar.navigation.login", defaultMessage: "ui.appBar.navigation.login" }) })))] })));
 }

package/lib/esm/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/esm/components/PaymentDetailDialog/PaymentDetailDialog.js

@@ -0,0 +1,37 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { Slide, styled } from '@mui/material';
+import { useThemeProps } from '@mui/system';
+import classNames from 'classnames';
+import { useSCPaymentsEnabled } from '@selfcommunity/react-core';
+import BaseDialog from '../../shared/BaseDialog';
+import { FormattedMessage } from 'react-intl';
+const PREFIX = 'SCPaymentProductsDialog';
+const classes = {
+    root: `${PREFIX}-root`
+};
+const Root = styled(BaseDialog, {
+    slot: 'Root',
+    name: PREFIX
+})(({ theme }) => ({}));
+const Transition = React.forwardRef(function Transition(props, ref) {
+    return _jsx(Slide, Object.assign({ direction: "up", ref: ref }, props));
+});
+const NoTransition = React.forwardRef(function NoTransition(props, ref) {
+    return _jsxs(React.Fragment, { children: [" ", props.children, " "] });
+});
+export default function PaymentDetailDialog(inProps) {
+    // PROPS
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX
+    });
+    const { className, disableInitialTransition = false } = props, rest = __rest(props, ["className", "disableInitialTransition"]);
+    // HOOKS
+    const { isPaymentsEnabled } = useSCPaymentsEnabled();
+    if (!isPaymentsEnabled) {
+        return null;
+    }
+    return (_jsx(Root, Object.assign({ maxWidth: 'sm', fullWidth: true, title: _jsx(FormattedMessage, { id: "ui.paymentDetailDialog.title", defaultMessage: "ui.paymentDetailDialog.title" }), scroll: 'paper', open: true }, (disableInitialTransition ? { TransitionComponent: NoTransition } : { TransitionComponent: Transition }), { className: classNames(classes.root, className), TransitionComponent: Transition }, rest, { children: _jsx(FormattedMessage, { id: "ui.paymentDetailDialog.content", defaultMessage: "ui.paymentDetailDialog.content" }) })));
+}

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

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

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

@@ -0,0 +1,2 @@
+import PaymentDetailDialog from './PaymentDetailDialog';
+export default PaymentDetailDialog;

package/lib/esm/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/esm/components/PaymentOrder/PaymentOrder.js

@@ -0,0 +1,77 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Chip, Stack, Typography, styled } from '@mui/material';
+import { useThemeProps } from '@mui/system';
+import classNames from 'classnames';
+import { useSCFetchPaymentOrder, useSCPaymentsEnabled } from '@selfcommunity/react-core';
+import { SCContentType } from '@selfcommunity/types';
+import { PREFIX } from './constants';
+import { FormattedMessage, useIntl } from 'react-intl';
+import Event from '../Event';
+import { CacheStrategies } from '@selfcommunity/utils';
+import Category from '../Category';
+import Course from '../Course';
+import Group from '../Group';
+import PaymentProduct from '../PaymentProduct';
+import PaymentOrderSkeleton from './Skeleton';
+import PaymentOrderPdfButton from '../PaymentOrderPdfButton';
+import { getConvertedAmount } from '../../utils/payment';
+import { SCCourseTemplateType } from '../../types/course';
+import { SCEventTemplateType } from '../../types/event';
+const classes = {
+    root: `${PREFIX}-root`,
+    img: `${PREFIX}-img`,
+    contentObject: `${PREFIX}-content-object`,
+    object: `${PREFIX}-object`,
+    status: `${PREFIX}-status`,
+    details: `${PREFIX}-details`
+};
+const Root = styled(Box, {
+    slot: 'Root',
+    name: PREFIX
+})(({ theme }) => ({}));
+export default function PaymentOrder(inProps) {
+    // PROPS
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX
+    });
+    const { className, paymentOrderId, paymentOrder, hidePaymentOrderPdfButton = false, PaymentOrderPdfButtonComponentProps = {} } = props, rest = __rest(props, ["className", "paymentOrderId", "paymentOrder", "hidePaymentOrderPdfButton", "PaymentOrderPdfButtonComponentProps"]);
+    // HOOKS
+    const { isPaymentsEnabled } = useSCPaymentsEnabled();
+    const { scPaymentOrder } = useSCFetchPaymentOrder({ id: paymentOrderId, paymentOrder });
+    const intl = useIntl();
+    if (!isPaymentsEnabled || !scPaymentOrder) {
+        return _jsx(PaymentOrderSkeleton, {});
+    }
+    const renderContent = () => {
+        var _a, _b;
+        let header;
+        const content = scPaymentOrder[scPaymentOrder.content_type];
+        if (scPaymentOrder.content_type === SCContentType.EVENT) {
+            header = (_jsx(Event, { event: content, cacheStrategy: CacheStrategies.NETWORK_ONLY, template: SCEventTemplateType.PREVIEW, actions: _jsx(_Fragment, {}), variant: "outlined", className: classes.object }));
+        }
+        else if (scPaymentOrder.content_type === SCContentType.CATEGORY) {
+            header = (_jsx(Category, { category: content, cacheStrategy: CacheStrategies.NETWORK_ONLY, actions: _jsx(_Fragment, {}), variant: "outlined", className: classes.object }));
+        }
+        else if (scPaymentOrder.content_type === SCContentType.COURSE) {
+            header = (_jsx(Course, { course: content, cacheStrategy: CacheStrategies.NETWORK_ONLY, template: SCCourseTemplateType.PREVIEW, actions: _jsx(_Fragment, {}), hideEventParticipants: true, hideEventPlanner: true, variant: "outlined", className: classes.object }));
+        }
+        else if (scPaymentOrder.content_type === SCContentType.GROUP) {
+            header = (_jsx(Group, { group: content, cacheStrategy: CacheStrategies.NETWORK_ONLY, hideActions: true, variant: "outlined", hideEventParticipants: true, hideEventPlanner: true, className: classes.object }));
+        }
+        else if (scPaymentOrder.content_type === SCContentType.COMMUNITY) {
+            header = (_jsx(_Fragment, { children: ((_a = scPaymentOrder.payment_price) === null || _a === void 0 ? void 0 : _a.payment_product) && (_jsx(PaymentProduct, { hidePaymentProductPrices: true, paymentProduct: (_b = scPaymentOrder.payment_price) === null || _b === void 0 ? void 0 : _b.payment_product })) }));
+        }
+        return (_jsx(Stack, Object.assign({ spacing: 2, justifyContent: "center", alignItems: "flex-start" }, { children: _jsx(Box, Object.assign({ className: classes.contentObject }, { children: header })) })));
+    };
+    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: [renderContent(), _jsxs(Box, Object.assign({ className: classes.details }, { children: [_jsx(Typography, Object.assign({ variant: "body2", color: "textSecondary" }, { children: _jsx(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'
+                                })
+                            } }) })), _jsx(Typography, Object.assign({ variant: "body2", color: "textSecondary" }, { children: _jsx(FormattedMessage, { id: "ui.paymentOrder.price", defaultMessage: "ui.paymentOrder.price", values: { price: getConvertedAmount(scPaymentOrder.payment_price) } }) })), _jsx(Typography, Object.assign({ variant: "body2", color: "textSecondary", component: "span" }, { children: _jsx(FormattedMessage, { id: "ui.paymentOrder.status", defaultMessage: "ui.paymentOrder.status" }) })), _jsx(Chip, { className: classes.status, variant: 'outlined', label: _jsx(FormattedMessage, { id: "ui.paymentOrder.status.paid", defaultMessage: "ui.paymentOrder.status.paid" }), color: "success", size: "small" }), _jsx("br", {}), scPaymentOrder && !hidePaymentOrderPdfButton && (_jsx(PaymentOrderPdfButton, Object.assign({ paymentOrder: scPaymentOrder, label: _jsx(FormattedMessage, { id: "ui.paymentOrder.ticket.view", defaultMessage: "ui.paymentOrder.ticket.view" }) }, PaymentOrderPdfButtonComponentProps)))] }))] })));
+}

package/lib/esm/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/esm/components/PaymentOrder/Skeleton.js

@@ -0,0 +1,58 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AvatarGroup, Box, CardContent, Stack, useTheme, Skeleton, styled } from '@mui/material';
+import { useThemeProps } from '@mui/system';
+import classNames from 'classnames';
+import { PREFIX } from './constants';
+import Widget from '../Widget';
+const classes = {
+    root: `${PREFIX}-skeleton-root`,
+    skeletonPreviewRoot: `${PREFIX}-skeleton-preview-root`,
+    skeletonPreviewContent: `${PREFIX}-skeleton-preview-content`,
+    skeletonPreviewName: `${PREFIX}-skeleton-preview-name`,
+    skeletonPreviewActions: `${PREFIX}-skeleton-preview-actions`
+};
+const Root = styled(Box, {
+    name: PREFIX,
+    slot: 'SkeletonRoot'
+})(() => ({}));
+const SkeletonPreviewRoot = styled(Widget, {
+    name: 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.|
+ *
+ */
+export default function PaymentOrderSkeleton(inProps) {
+    // PROPS
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX
+    });
+    const { className } = props, rest = __rest(props, ["className"]);
+    const theme = useTheme();
+    /**
+     * Renders event object
+     */
+    let contentObj;
+    contentObj = (_jsxs(SkeletonPreviewRoot, Object.assign({ className: classes.skeletonPreviewRoot }, { children: [_jsx(Box, Object.assign({ position: "relative" }, { children: _jsx(Skeleton, { variant: "rectangular", width: "100%", height: "80px" }) })), _jsxs(CardContent, Object.assign({ className: classes.skeletonPreviewContent }, { children: [_jsxs(Stack, Object.assign({ direction: "row", alignItems: "center", gap: "8px" }, { children: [_jsx(Skeleton, { variant: "circular", width: "21px", height: "21px" }), _jsx(Skeleton, { width: "50%", height: "20px" })] })), _jsx(Skeleton, { width: "67%", height: "25px", className: classes.skeletonPreviewName }), _jsx(Stack, Object.assign({ direction: "row", alignItems: "center", gap: "8px", marginBottom: "2px" }, { children: _jsx(Skeleton, { width: "27%", height: "18px" }) })), _jsx(Stack, Object.assign({ direction: "row", gap: "8px", alignItems: "center" }, { children: _jsxs(AvatarGroup, { children: [_jsx(Skeleton, { variant: "circular", width: `${theme.selfcommunity.user.avatar.sizeSmall}px`, height: `${theme.selfcommunity.user.avatar.sizeSmall}px` }), _jsx(Skeleton, { variant: "circular", width: `${theme.selfcommunity.user.avatar.sizeSmall}px`, height: `${theme.selfcommunity.user.avatar.sizeSmall}px` }), _jsx(Skeleton, { variant: "circular", width: `${theme.selfcommunity.user.avatar.sizeSmall}px`, height: `${theme.selfcommunity.user.avatar.sizeSmall}px` })] }) }))] }))] })));
+    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: [contentObj, _jsxs(Stack, Object.assign({ direction: "column", alignItems: "flex-start", gap: "8px", marginTop: "8px" }, { children: [_jsx(Skeleton, { width: "50%", height: "18px" }), _jsx(Skeleton, { width: "35%", height: "18px" }), _jsx(Skeleton, { width: "20%", height: "18px" })] }))] })));
+}

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

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

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

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

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

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

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

@@ -0,0 +1,2 @@
+import PaymentOrder from './PaymentOrder';
+export default PaymentOrder;

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

@@ -0,0 +1,52 @@
+import React from 'react';
+import { SCPaymentOrder } from '@selfcommunity/types';
+export interface PaymentOrderPdfButtonProps {
+    /**
+     * Overrides or extends the styles applied to the component.
+     * @default null
+     */
+    className?: string;
+    /**
+     * Content id
+     */
+    paymentOrderId?: number | string;
+    /**
+     * Payment Order
+     */
+    paymentOrder?: SCPaymentOrder;
+    /**
+     * Handle click
+     */
+    handleClick?: () => void;
+    /**
+     * Override button label
+     */
+    label?: React.ReactNode;
+    /**
+     * Others properties
+     */
+    [p: string]: any;
+}
+/**
+ * > API documentation for the Community-JS PaymentOrderPdfButton component. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {PaymentOrderPdfButton} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `PaymentOrderPdfButton` can be used when providing style overrides in the theme.
+
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCPaymentOrderPdfButton-root|Styles applied to the root element.|
+
+ * @param inProps
+ */
+export default function PaymentOrderPdfButton(inProps: PaymentOrderPdfButtonProps): JSX.Element;

package/lib/esm/components/PaymentOrderPdfButton/PaymentOrderPdfButton.js

@@ -0,0 +1,71 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useState } from 'react';
+import classNames from 'classnames';
+import { Button, Icon, Tooltip, styled } from '@mui/material';
+import { useThemeProps } from '@mui/system';
+import { useSCContext, useSCFetchPaymentOrder, useSCPaymentsEnabled, useSCUser } from '@selfcommunity/react-core';
+import { FormattedMessage } from 'react-intl';
+import PdfPreviewDialog from '../PdfPreviewDialog';
+import { Endpoints } from '@selfcommunity/api-services';
+const PREFIX = 'SCPaymentOrderPdfButton';
+const classes = {
+    root: `${PREFIX}-root`
+};
+const Root = styled(Button, {
+    name: PREFIX,
+    slot: 'root'
+})(() => ({}));
+/**
+ * > API documentation for the Community-JS PaymentOrderPdfButton component. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {PaymentOrderPdfButton} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `PaymentOrderPdfButton` can be used when providing style overrides in the theme.
+
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCPaymentOrderPdfButton-root|Styles applied to the root element.|
+
+ * @param inProps
+ */
+export default function PaymentOrderPdfButton(inProps) {
+    // PROPS
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX
+    });
+    const { className, paymentOrderId, paymentOrder, handleClick, PdfPreviewDialogComponentProps = {}, label } = props, rest = __rest(props, ["className", "paymentOrderId", "paymentOrder", "handleClick", "PdfPreviewDialogComponentProps", "label"]);
+    // STATE
+    const [open, setOpen] = useState(false);
+    // CONTEXT
+    const scContext = useSCContext();
+    const scUserContext = useSCUser();
+    const { isPaymentsEnabled } = useSCPaymentsEnabled();
+    const { scPaymentOrder } = useSCFetchPaymentOrder({ id: paymentOrderId, paymentOrder });
+    // HANDLERS
+    const handleClose = useCallback(() => {
+        setOpen(false);
+    }, [open]);
+    const handlePaymentOrderPdf = useCallback((e) => {
+        if (handleClick) {
+            handleClick();
+        }
+        else if (!open) {
+            setOpen(true);
+        }
+    }, [open, handleClick]);
+    if (!scUserContext.user || !isPaymentsEnabled || !scPaymentOrder) {
+        return null;
+    }
+    return (_jsxs(_Fragment, { children: [_jsx(Tooltip, Object.assign({ title: !scPaymentOrder ? (_jsx(FormattedMessage, { id: "ui.paymentOrderPdfButton.disabled", defaultMessage: "ui.paymentOrderPdfButton.disabled" })) : (_jsx(FormattedMessage, { id: "ui.paymentOrder.ticket.view", defaultMessage: "ui.paymentOrder.ticket.view" })) }, { children: _jsx(Root, Object.assign({ className: classNames(classes.root, className), variant: "contained", onClick: handlePaymentOrderPdf }, rest, { children: label ? label : _jsx(Icon, { children: "picture_as_pdf" }) })) })), open && (_jsx(PdfPreviewDialog, Object.assign({ open: true, onClose: handleClose }, PdfPreviewDialogComponentProps, { pdfUrl: `${new URL(scContext.settings.portal)}${Endpoints.GetPaymentOrderPdf.url({ id: scPaymentOrder.id })}` })))] }));
+}

package/lib/esm/components/PaymentOrderPdfButton/index.d.ts

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

package/lib/esm/components/PaymentOrderPdfButton/index.js

@@ -0,0 +1,2 @@
+import PaymentOrderPdfButton from './PaymentOrderPdfButton';
+export default PaymentOrderPdfButton;

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

@@ -0,0 +1,17 @@
+import { SCContentType } from '@selfcommunity/types';
+export interface PaymentOrdersProps {
+    /**
+     * Overrides or extends the styles applied to the component.
+     * @default null
+     */
+    className?: string;
+    /**
+     * The content name used to prefilter the results shown
+     */
+    contentName?: string;
+    /**
+     * The content type used to prefilter the results shown
+     */
+    contentType?: SCContentType;
+}
+export default function PaymentOrders(inProps: PaymentOrdersProps): JSX.Element;