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

package/lib/esm/components/GroupHeader/GroupHeader.js

@@ -1,10 +1,9 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useRef } from 'react';
-import { styled } from '@mui/material/styles';
-import { Avatar, Box, Icon, Paper, Typography, useMediaQuery, useTheme } from '@mui/material';
-import { SCGroupPrivacyType, SCGroupSubscriptionStatusType } from '@selfcommunity/types';
-import { SCPreferences, useSCFetchGroup, useSCPreferences, useSCUser } from '@selfcommunity/react-core';
+import { Avatar, Box, Icon, Paper, Typography, useMediaQuery, useTheme, styled } from '@mui/material';
+import { SCContentType, SCGroupPrivacyType, SCGroupSubscriptionStatusType } from '@selfcommunity/types';
+import { SCPreferences, useSCFetchGroup, useSCPaymentsEnabled, useSCPreferences, useSCUser } from '@selfcommunity/react-core';
 import GroupHeaderSkeleton from './Skeleton';
 import classNames from 'classnames';
 import { useThemeProps } from '@mui/system';
@@ -20,6 +19,7 @@ import GroupInviteButton from '../GroupInviteButton';
 import { SCGroupEventType, SCTopicType } from '../../constants/PubSub';
 import PubSub from 'pubsub-js';
 import GroupActionsMenu from '../GroupActionsMenu';
+import BuyButton from '../BuyButton';
 const classes = {
     root: `${PREFIX}-root`,
     cover: `${PREFIX}-cover`,
@@ -70,7 +70,7 @@ const Root = styled(Box, {
  * @param inProps
  */
 export default function GroupHeader(inProps) {
-    var _a;
+    var _a, _b;
     // PROPS
     const props = useThemeProps({
         props: inProps,
@@ -87,6 +87,8 @@ export default function GroupHeader(inProps) {
     const { scGroup, setSCGroup } = useSCFetchGroup({ id: groupId, group });
     const theme = useTheme();
     const isMobile = useMediaQuery(theme.breakpoints.down('md'));
+    // PAYMENTS
+    const { isPaymentsEnabled } = useSCPaymentsEnabled();
     // REFS
     const updatesSubscription = useRef(null);
     // CONST
@@ -149,7 +151,12 @@ export default function GroupHeader(inProps) {
     const _backgroundCover = Object.assign({}, (scGroup.emotional_image
         ? { background: `url('${scGroup.emotional_image}') center / cover` }
         : { background: `url('${scPreferences.preferences[SCPreferences.IMAGES_USER_DEFAULT_COVER].value}') center / cover` }));
-    return (_jsxs(Root, Object.assign({ id: id, className: classNames(classes.root, className) }, rest, { children: [_jsxs(Paper, Object.assign({ style: _backgroundCover, classes: { root: classes.cover } }, { children: [_jsx(Box, Object.assign({ className: classes.avatar }, { children: _jsx(Avatar, { children: _jsx("img", { alt: "group", src: scGroup.image_big ? scGroup.image_big : '' }) }) })), isGroupAdmin && (_jsxs(_Fragment, { children: [_jsx(ChangeGroupPicture, Object.assign({ groupId: scGroup.id, onChange: handleChangeAvatar, className: classes.changePicture }, ChangePictureProps)), _jsx("div", Object.assign({ className: classes.changeCover }, { children: _jsx(ChangeGroupCover, Object.assign({ groupId: scGroup.id, onChange: handleChangeCover }, ChangeCoverProps)) }))] }))] })), _jsxs(Box, Object.assign({ className: classes.info }, { children: [isGroupAdmin && !isMobile && (_jsxs(Box, Object.assign({ className: classes.multiActions }, { children: [_jsx(EditGroupButton, { group: scGroup, groupId: scGroup.id, onEditSuccess: (data) => setSCGroup(data) }), _jsx(GroupActionsMenu, Object.assign({ group: scGroup, onEditSuccess: (data) => setSCGroup(data) }, GroupActionsProps))] }))), _jsx(Typography, Object.assign({ variant: "h5", className: classes.name }, { children: scGroup.name })), privateEnabled && (_jsxs(Box, Object.assign({ className: classes.visibility }, { children: [privateEnabled && (_jsx(_Fragment, { children: scGroup.privacy === SCGroupPrivacyType.PUBLIC ? (_jsxs(Typography, Object.assign({ className: classes.visibilityItem }, { children: [_jsx(Icon, { children: "public" }), _jsx(FormattedMessage, { id: "ui.groupHeader.visibility.public", defaultMessage: "ui.groupHeader.visibility.public" })] }))) : (_jsxs(Typography, Object.assign({ className: classes.visibilityItem }, { children: [_jsx(Icon, { children: "private" }), _jsx(FormattedMessage, { id: "ui.groupHeader.visibility.private", defaultMessage: "ui.groupHeader.visibility.private" })] }))) })), visibilityEnabled && (_jsxs(_Fragment, { children: [privateEnabled && _jsx(Bullet, {}), scGroup.visible ? (_jsxs(Typography, Object.assign({ className: classes.visibilityItem }, { children: [_jsx(Icon, { children: "visibility" }), _jsx(FormattedMessage, { id: "ui.groupHeader.visibility.visible", defaultMessage: "ui.groupHeader.visibility.visible" })] }))) : (_jsxs(Typography, Object.assign({ className: classes.visibilityItem }, { children: [_jsx(Icon, { children: "visibility_off" }), _jsx(FormattedMessage, { id: "ui.groupHeader.visibility.hidden", defaultMessage: "ui.groupHeader.visibility.hidden" })] })))] }))] }))), _jsx(_Fragment, { children: ((scGroup && scGroup.privacy === SCGroupPrivacyType.PUBLIC) ||
+    return (_jsxs(Root, Object.assign({ id: id, className: classNames(classes.root, className) }, rest, { children: [_jsxs(Paper, Object.assign({ style: _backgroundCover, classes: { root: classes.cover } }, { children: [_jsx(Box, Object.assign({ className: classes.avatar }, { children: _jsx(Avatar, { children: _jsx("img", { alt: "group", src: scGroup.image_big ? scGroup.image_big : '' }) }) })), isGroupAdmin && (_jsxs(_Fragment, { children: [_jsx(ChangeGroupPicture, Object.assign({ groupId: scGroup.id, onChange: handleChangeAvatar, className: classes.changePicture }, ChangePictureProps)), _jsx("div", Object.assign({ className: classes.changeCover }, { children: _jsx(ChangeGroupCover, Object.assign({ groupId: scGroup.id, onChange: handleChangeCover }, ChangeCoverProps)) }))] }))] })), _jsxs(Box, Object.assign({ className: classes.info }, { children: [isGroupAdmin && !isMobile && (_jsxs(Box, Object.assign({ className: classes.multiActions }, { children: [_jsx(EditGroupButton, { group: scGroup, groupId: scGroup.id, onEditSuccess: (data) => setSCGroup(data) }), _jsx(GroupActionsMenu, Object.assign({ group: scGroup, onEditSuccess: (data) => setSCGroup(data) }, GroupActionsProps))] }))), _jsx(Typography, Object.assign({ variant: "h5", className: classes.name }, { children: scGroup.name })), privateEnabled && (_jsxs(Box, Object.assign({ className: classes.visibility }, { children: [privateEnabled && (_jsx(_Fragment, { children: scGroup.privacy === SCGroupPrivacyType.PUBLIC ? (_jsxs(Typography, Object.assign({ className: classes.visibilityItem }, { children: [_jsx(Icon, { children: "public" }), _jsx(FormattedMessage, { id: "ui.groupHeader.visibility.public", defaultMessage: "ui.groupHeader.visibility.public" })] }))) : (_jsxs(Typography, Object.assign({ className: classes.visibilityItem }, { children: [_jsx(Icon, { children: "private" }), _jsx(FormattedMessage, { id: "ui.groupHeader.visibility.private", defaultMessage: "ui.groupHeader.visibility.private" })] }))) })), visibilityEnabled && (_jsxs(_Fragment, { children: [privateEnabled && _jsx(Bullet, {}), scGroup.visible ? (_jsxs(Typography, Object.assign({ className: classes.visibilityItem }, { children: [_jsx(Icon, { children: "visibility" }), _jsx(FormattedMessage, { id: "ui.groupHeader.visibility.visible", defaultMessage: "ui.groupHeader.visibility.visible" })] }))) : (_jsxs(Typography, Object.assign({ className: classes.visibilityItem }, { children: [_jsx(Icon, { children: "visibility_off" }), _jsx(FormattedMessage, { id: "ui.groupHeader.visibility.hidden", defaultMessage: "ui.groupHeader.visibility.hidden" })] })))] })), isPaymentsEnabled &&
+                                ((_b = scGroup.paywalls) === null || _b === void 0 ? void 0 : _b.length) > 0 &&
+                                (scGroup.privacy === SCGroupPrivacyType.PUBLIC ||
+                                    (scGroup.privacy === SCGroupPrivacyType.PRIVATE &&
+                                        scGroup.subscription_status &&
+                                        scGroup.subscription_status !== SCGroupSubscriptionStatusType.REQUESTED)) && (_jsx(BuyButton, { size: "md", variant: "text", startIcon: _jsx(Icon, { children: "dredit-card" }), contentType: SCContentType.GROUP, content: scGroup, label: _jsx(FormattedMessage, { id: "ui.groupHeader.paid", defaultMessage: "ui.groupHeader.paid" }) }))] }))), _jsx(_Fragment, { children: ((scGroup && scGroup.privacy === SCGroupPrivacyType.PUBLIC) ||
                             scGroup.subscription_status === SCGroupSubscriptionStatusType.SUBSCRIBED ||
                             isGroupAdmin) && (_jsxs(Box, Object.assign({ className: classes.members }, { children: [_jsx(Typography, Object.assign({ className: classes.membersCounter, component: "div" }, { children: _jsx(FormattedMessage, { id: "ui.groupHeader.members", defaultMessage: "ui.groupHeader.members", values: { total: scGroup.subscribers_counter } }) })), _jsx(GroupMembersButton, Object.assign({ groupId: scGroup === null || scGroup === void 0 ? void 0 : scGroup.id, group: scGroup, autoHide: !isGroupAdmin }, GroupMembersButtonProps), scGroup.subscribers_counter)] }))) }), isGroupAdmin ? (_jsxs(Box, { children: [_jsx(GroupInviteButton, { group: scGroup, groupId: scGroup.id }), isMobile && _jsx(GroupActionsMenu, Object.assign({ group: scGroup, onEditSuccess: (data) => setSCGroup(data) }, GroupActionsProps))] })) : (_jsx(GroupSubscribeButton, Object.assign({ group: scGroup, onSubscribe: handleSubscribe }, GroupSubscribeButtonProps)))] }))] })));
 }

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

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

package/lib/esm/components/GroupInfoWidget/GroupInfoWidget.js

@@ -1,8 +1,7 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useRef } from 'react';
-import { styled } from '@mui/material/styles';
-import { CardContent, Icon, Typography } from '@mui/material';
+import { CardContent, Icon, Typography, styled } from '@mui/material';
 import classNames from 'classnames';
 import Widget from '../Widget';
 import { useThemeProps } from '@mui/system';

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

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

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

@@ -1,4 +1,4 @@
-import { ButtonProps } from '@mui/material/Button/Button';
+import { ButtonProps } from '@mui/material';
 import { SCGroupType } from '@selfcommunity/types';
 export interface GroupInviteButtonProps extends ButtonProps {
     /**

package/lib/esm/components/GroupInviteButton/GroupInviteButton.js

@@ -2,15 +2,13 @@ import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React, { useContext, useEffect, useMemo, useState } from 'react';
 import { useThemeProps } from '@mui/system';
-import { styled } from '@mui/material/styles';
-import { Avatar, Box, Button, Chip, Icon, IconButton, InputAdornment, TextField, Typography } from '@mui/material';
+import { Avatar, Box, Button, Chip, Icon, IconButton, InputAdornment, TextField, Typography, Autocomplete, styled } from '@mui/material';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { SCUserContext, useSCFetchGroup } from '@selfcommunity/react-core';
 import classNames from 'classnames';
 import BaseDialog from '../../shared/BaseDialog';
 import { LoadingButton } from '@mui/lab';
 import { GroupService } from '@selfcommunity/api-services';
-import Autocomplete from '@mui/material/Autocomplete';
 import User from '../User';
 import { SCOPE_SC_UI } from '../../constants/Errors';
 import { Logger } from '@selfcommunity/utils';

package/lib/esm/components/GroupInvitedWidget/GroupInvitedWidget.js

@@ -1,9 +1,7 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useCallback, useEffect, useMemo, useReducer, useRef, useState } from 'react';
-import { styled } from '@mui/material/styles';
-import List from '@mui/material/List';
-import { Button, CardContent, ListItem, Typography, useMediaQuery, useTheme } from '@mui/material';
+import { Button, CardContent, ListItem, Typography, useMediaQuery, useTheme, styled, List } from '@mui/material';
 import Widget from '../Widget';
 import { http, Endpoints, GroupService } from '@selfcommunity/api-services';
 import { CacheStrategies, isInteger, Logger } from '@selfcommunity/utils';
@@ -193,7 +191,7 @@ export default function GroupInvitedWidget(inProps) {
         setOpenDialog((prev) => !prev);
     };
     // RENDER
-    if ((!state.count && state.initialized) || !contentAvailability || !scGroup || !state.count || !state.results.length || !isGroupAdmin) {
+    if ((!state.count && state.initialized) || (!contentAvailability && !scUserContext.user) || !scGroup || !isGroupAdmin) {
         return _jsx(HiddenPlaceholder, {});
     }
     if (!state.initialized) {

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { CategoryTrendingPeopleWidgetSkeleton } from '../CategoryTrendingUsersWidget';
-import { styled } from '@mui/material/styles';
+import { styled } from '@mui/material';
 import { PREFIX } from './constants';
 const classes = {
     root: `${PREFIX}-skeleton-root`

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

@@ -1,4 +1,4 @@
-import { ButtonProps } from '@mui/material/Button/Button';
+import { ButtonProps } from '@mui/material';
 import { SCGroupType } from '@selfcommunity/types';
 import { BaseDialogProps } from '../../shared/BaseDialog';
 export interface GroupMembersButtonProps extends Pick<ButtonProps, Exclude<keyof ButtonProps, 'onClick' | 'disabled'>> {

package/lib/esm/components/GroupMembersButton/GroupMembersButton.js

@@ -1,8 +1,6 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Avatar, AvatarGroup, Button, List, ListItem, Typography, useTheme } from '@mui/material';
-import { styled } from '@mui/material/styles';
-import useMediaQuery from '@mui/material/useMediaQuery';
+import { Avatar, AvatarGroup, Button, styled, List, ListItem, Typography, useTheme, useMediaQuery } from '@mui/material';
 import { useThemeProps } from '@mui/system';
 import { Endpoints, GroupService, http } from '@selfcommunity/api-services';
 import { useSCFetchGroup } from '@selfcommunity/react-core';

package/lib/esm/components/GroupMembersWidget/GroupMembersWidget.js

@@ -1,9 +1,7 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React, { useEffect, useMemo, useReducer, useState } from 'react';
-import { styled } from '@mui/material/styles';
-import List from '@mui/material/List';
-import { Button, CardActions, CardContent, ListItem, Typography, useMediaQuery, useTheme } from '@mui/material';
+import { Button, CardActions, CardContent, ListItem, Typography, useMediaQuery, useTheme, styled, List } from '@mui/material';
 import Widget from '../Widget';
 import { http, Endpoints, GroupService } from '@selfcommunity/api-services';
 import { CacheStrategies, isInteger, Logger } from '@selfcommunity/utils';
@@ -96,6 +94,8 @@ export default function GroupMembersWidget(inProps) {
     // MEMO
     const contentAvailability = useMemo(() => SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY in scPreferencesContext.preferences &&
         scPreferencesContext.preferences[SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY].value, [scPreferencesContext.preferences]);
+    const privateMessagingEnabled = useMemo(() => SCPreferences.ADDONS_PRIVATE_MESSAGES_ENABLED in scPreferencesContext.preferences &&
+        scPreferencesContext.preferences[SCPreferences.ADDONS_PRIVATE_MESSAGES_ENABLED].value, [scPreferencesContext.preferences]);
     // HOOKS
     const theme = useTheme();
     const isMobile = useMediaQuery(theme.breakpoints.down('md'));
@@ -191,7 +191,7 @@ export default function GroupMembersWidget(inProps) {
     }
     const content = (_jsxs(_Fragment, { children: [_jsxs(CardContent, { children: [_jsx(Typography, Object.assign({ className: classes.title, variant: "h5" }, { children: _jsx(FormattedMessage, { id: "ui.groupMembersWidget.title", defaultMessage: "ui.groupMembersWidget.title" }) })), !state.count ? (_jsx(Typography, Object.assign({ className: classes.noResults, variant: "body2" }, { children: _jsx(FormattedMessage, { id: "ui.groupMembersWidget.subtitle.noResults", defaultMessage: "" }) }))) : (_jsxs(React.Fragment, { children: [_jsx(List, { children: state.results.slice(0, state.visibleItems).map((user) => {
                                     var _a, _b;
-                                    return (_jsx(ListItem, { children: _jsx(User, { elevation: 0, actions: isGroupAdmin ? (_jsx(GroupSettingsIconButton, { group: scGroup, user: user, onRemoveSuccess: () => handleRefresh(user.id) })) : ((_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.id) !== user.id ? (_jsx(Button, Object.assign({ size: "small", variant: "outlined", component: Link, to: scRoutingContext.url(SCRoutes.USER_PRIVATE_MESSAGES_ROUTE_NAME, user) }, { children: _jsx(FormattedMessage, { id: "ui.groupSettingsIconButton.item.message", defaultMessage: "ui.groupSettingsIconButton.item.message" }) }))) : null, isGroupAdmin: ((_b = scGroup === null || scGroup === void 0 ? void 0 : scGroup.managed_by) === null || _b === void 0 ? void 0 : _b.id) === user.id, user: user, userId: user.id }) }, user.id));
+                                    return (_jsx(ListItem, { children: _jsx(User, { elevation: 0, actions: isGroupAdmin ? (_jsx(GroupSettingsIconButton, { group: scGroup, user: user, onRemoveSuccess: () => handleRefresh(user.id) })) : ((_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.id) !== user.id && privateMessagingEnabled ? (_jsx(Button, Object.assign({ size: "small", variant: "outlined", component: Link, to: scRoutingContext.url(SCRoutes.USER_PRIVATE_MESSAGES_ROUTE_NAME, user) }, { children: _jsx(FormattedMessage, { id: "ui.groupSettingsIconButton.item.message", defaultMessage: "ui.groupSettingsIconButton.item.message" }) }))) : null, isGroupAdmin: ((_b = scGroup === null || scGroup === void 0 ? void 0 : scGroup.managed_by) === null || _b === void 0 ? void 0 : _b.id) === user.id, user: user, userId: user.id }) }, user.id));
                                 }) }), state.count > state.visibleItems && (_jsx(Button, Object.assign({ className: classes.showMore, onClick: handleToggleDialogOpen }, { children: _jsx(FormattedMessage, { id: "ui.groupMembersWidget.button.showMore", defaultMessage: "ui.groupMembersWidget.button.showMore" }) })))] })), openDialog && (_jsx(DialogRoot, Object.assign({ className: classes.dialogRoot, title: _jsx(FormattedMessage, { defaultMessage: "ui.groupMembersWidget.dialogTitle", id: "ui.groupMembersWidget.dialogTitle", values: { total: scGroup.subscribers_counter } }), onClose: handleToggleDialogOpen, open: openDialog }, DialogProps, { children: _jsx(InfiniteScroll, Object.assign({ dataLength: state.results.length, next: handleNext, hasMoreNext: Boolean(state.next), loaderNext: _jsx(UserSkeleton, Object.assign({ elevation: 0 }, UserProps)), height: isMobile ? '100%' : 400, endMessage: _jsx(Typography, Object.assign({ className: classes.endMessage }, { children: _jsx(FormattedMessage, { id: "ui.groupMembersWidget.noMoreResults", defaultMessage: "ui.groupMembersWidget.noMoreResults" }) })) }, { children: _jsx(List, { children: state.results.map((user) => {
                                     var _a, _b;
                                     return (_jsx(ListItem, { children: _jsx(User, { elevation: 0, actions: isGroupAdmin ? (_jsx(GroupSettingsIconButton, { group: scGroup, user: user, onRemoveSuccess: () => handleRefresh(user.id) })) : ((_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.id) !== user.id ? (_jsx(Button, Object.assign({ size: "small", variant: "outlined", component: Link, to: scRoutingContext.url(SCRoutes.USER_PRIVATE_MESSAGES_ROUTE_NAME, user) }, { children: _jsx(FormattedMessage, { id: "ui.groupSettingsIconButton.item.message", defaultMessage: "ui.groupSettingsIconButton.item.message" }) }))) : null, isGroupAdmin: ((_b = scGroup === null || scGroup === void 0 ? void 0 : scGroup.managed_by) === null || _b === void 0 ? void 0 : _b.id) === user.id, user: user, userId: user.id }) }, user.id));

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { CategoryTrendingPeopleWidgetSkeleton } from '../CategoryTrendingUsersWidget';
-import { styled } from '@mui/material/styles';
+import { styled } from '@mui/material';
 import { PREFIX } from './constants';
 const classes = {
     root: `${PREFIX}-skeleton-root`

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

@@ -4,7 +4,7 @@ import { CacheStrategies } from '@selfcommunity/utils';
 import { BaseDialogProps } from '../../shared/BaseDialog';
 import { VirtualScrollerItemProps } from '../../types/virtualScroller';
 import { UserProps } from '../User';
-import { GroupSubscribeButtonProps } from '../GroupSubscribeButton';
+import { AcceptRequestUserGroupButtonProps } from '../AcceptRequestUserGroupButton';
 export interface GroupRequestsWidgetProps extends VirtualScrollerItemProps, WidgetProps {
     /**
      * Group Object
@@ -16,6 +16,11 @@ export interface GroupRequestsWidgetProps extends VirtualScrollerItemProps, Widg
      * @default null
      */
     groupId?: number | string;
+    /**
+     * Hides this component
+     * @default true
+     */
+    autoHide?: boolean;
     /**
      * Limit the number of users to show
      * @default false
@@ -40,7 +45,7 @@ export interface GroupRequestsWidgetProps extends VirtualScrollerItemProps, Widg
      * Props to spread to group subscribe button component
      * @default {}
      */
-    GroupSubscribeButtonProps?: GroupSubscribeButtonProps;
+    AcceptRequestUserGroupButtonComponentProps?: AcceptRequestUserGroupButtonProps;
     /**
      * onSubscribeAction callback
      * @param user

package/lib/esm/components/GroupRequestsWidget/GroupRequestsWidget.js

@@ -1,9 +1,7 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useEffect, useMemo, useReducer, useState } from 'react';
-import { styled } from '@mui/material/styles';
-import List from '@mui/material/List';
-import { Button, CardContent, ListItem, Typography, useMediaQuery, useTheme } from '@mui/material';
+import { Button, CardContent, ListItem, Typography, useMediaQuery, useTheme, List, styled } from '@mui/material';
 import Widget from '../Widget';
 import { http, Endpoints, GroupService } from '@selfcommunity/api-services';
 import { CacheStrategies, isInteger, Logger } from '@selfcommunity/utils';
@@ -19,7 +17,7 @@ import { useThemeProps } from '@mui/system';
 import HiddenPlaceholder from '../../shared/HiddenPlaceholder';
 import { PREFIX } from './constants';
 import User, { UserSkeleton } from '../User';
-import GroupSubscribeButton from '../GroupSubscribeButton';
+import AcceptRequestUserGroupButton from '../AcceptRequestUserGroupButton';
 const classes = {
     root: `${PREFIX}-root`,
     title: `${PREFIX}-title`,
@@ -73,7 +71,7 @@ export default function GroupRequestsWidget(inProps) {
         props: inProps,
         name: PREFIX
     });
-    const { groupId, group, limit = 5, className, cacheStrategy = CacheStrategies.NETWORK_ONLY, onHeightChange, onStateChange, UserProps = {}, DialogProps = {}, GroupSubscribeButtonProps = {}, onSubscribeActon } = props, rest = __rest(props, ["groupId", "group", "limit", "className", "cacheStrategy", "onHeightChange", "onStateChange", "UserProps", "DialogProps", "GroupSubscribeButtonProps", "onSubscribeActon"]);
+    const { groupId, group, autoHide = true, limit = 5, className, cacheStrategy = CacheStrategies.NETWORK_ONLY, onHeightChange, onStateChange, UserProps = {}, DialogProps = {}, AcceptRequestUserGroupButtonComponentProps = {}, onSubscribeActon } = props, rest = __rest(props, ["groupId", "group", "autoHide", "limit", "className", "cacheStrategy", "onHeightChange", "onStateChange", "UserProps", "DialogProps", "AcceptRequestUserGroupButtonComponentProps", "onSubscribeActon"]);
     // STATE
     const [state, dispatch] = useReducer(dataWidgetReducer, {
         isLoadingNext: false,
@@ -99,6 +97,7 @@ export default function GroupRequestsWidget(inProps) {
      * Fetch data only if the component is not initialized and it is not loading data
      */
     const _initComponent = useMemo(() => () => {
+        console.log('initComponent');
         if (!state.initialized && !state.isLoadingNext) {
             dispatch({ type: actionWidgetTypes.LOADING_NEXT });
             GroupService.getGroupWaitingApprovalSubscribers(scGroup.id, { limit })
@@ -115,6 +114,7 @@ export default function GroupRequestsWidget(inProps) {
     useEffect(() => {
         var _a;
         let _t;
+        console.log(scGroup, scUserContext.user);
         if ((contentAvailability || (!contentAvailability && ((_a = scUserContext.user) === null || _a === void 0 ? void 0 : _a.id))) && scGroup && scUserContext.user !== undefined) {
             _t = setTimeout(_initComponent);
             return () => {
@@ -179,12 +179,12 @@ export default function GroupRequestsWidget(inProps) {
         onSubscribeActon && onSubscribeActon(user);
     }, [dispatch, state.count, state.results, onSubscribeActon]);
     // RENDER
-    if ((!state.count && state.initialized) || !contentAvailability || !scGroup || !state.count || !state.results.length || !isGroupAdmin) {
+    if ((autoHide && !state.count && state.initialized) || (!contentAvailability && !scUserContext.user) || !scGroup || !isGroupAdmin) {
         return _jsx(HiddenPlaceholder, {});
     }
     if (!state.initialized) {
         return _jsx(Skeleton, {});
     }
-    const content = (_jsxs(CardContent, { children: [_jsx(Typography, Object.assign({ className: classes.title, variant: "h5" }, { children: _jsx(FormattedMessage, { id: "ui.groupRequestsWidget.title", defaultMessage: "ui.groupRequestsWidget.title" }) })), _jsxs(React.Fragment, { children: [_jsx(List, { children: state.results.slice(0, state.visibleItems).map((user) => (_jsx(ListItem, { children: _jsx(User, { elevation: 0, actions: _jsx(GroupSubscribeButton, Object.assign({ group: scGroup, groupId: scGroup === null || scGroup === void 0 ? void 0 : scGroup.id, user: user, onSubscribe: () => handleSubscribeAction(user) }, GroupSubscribeButtonProps)), user: user, userId: user.id }) }, user.id))) }), state.count > state.visibleItems && (_jsx(Button, Object.assign({ className: classes.showMore, onClick: handleToggleDialogOpen }, { children: _jsx(FormattedMessage, { id: "ui.groupRequestsWidget.button.showMore", defaultMessage: "ui.groupRequestsWidget.button.showMore" }) })))] }), openDialog && (_jsx(DialogRoot, Object.assign({ className: classes.dialogRoot, title: _jsx(FormattedMessage, { defaultMessage: "ui.groupRequestsWidget.dialogTitle", id: "ui.groupRequestsWidget.dialogTitle", values: { total: scGroup.subscribers_counter } }), onClose: handleToggleDialogOpen, open: openDialog }, DialogProps, { children: _jsx(InfiniteScroll, Object.assign({ dataLength: state.results.length, next: handleNext, hasMoreNext: Boolean(state.next), loaderNext: _jsx(UserSkeleton, Object.assign({ elevation: 0 }, UserProps)), height: isMobile ? '100%' : 400, endMessage: _jsx(Typography, Object.assign({ className: classes.endMessage }, { children: _jsx(FormattedMessage, { id: "ui.groupRequestsWidget.noMoreResults", defaultMessage: "ui.groupRequestsWidget.noMoreResults" }) })) }, { children: _jsx(List, { children: state.results.map((user) => (_jsx(ListItem, { children: _jsx(User, { elevation: 0, actions: _jsx(GroupSubscribeButton, Object.assign({ group: scGroup, groupId: scGroup === null || scGroup === void 0 ? void 0 : scGroup.id, user: user, onSubscribe: () => handleSubscribeAction(user) }, GroupSubscribeButtonProps)), user: user, userId: user.id }) }, user.id))) }) })) })))] }));
+    const content = (_jsxs(CardContent, { children: [_jsx(Typography, Object.assign({ className: classes.title, variant: "h5" }, { children: _jsx(FormattedMessage, { id: "ui.groupRequestsWidget.title", defaultMessage: "ui.groupRequestsWidget.title" }) })), state.results.length === 0 && (_jsx(Typography, Object.assign({ variant: "body1", mt: 2 }, { children: _jsx(FormattedMessage, { id: "ui.groupRequestsWidget.noRequests", defaultMessage: "ui.groupRequestsWidget.noRequests" }) }))), _jsxs(React.Fragment, { children: [_jsx(List, { children: state.results.slice(0, state.visibleItems).map((user) => (_jsx(ListItem, { children: _jsx(User, { elevation: 0, actions: _jsx(AcceptRequestUserGroupButton, Object.assign({ group: scGroup, groupId: scGroup === null || scGroup === void 0 ? void 0 : scGroup.id, user: user, handleConfirm: () => handleSubscribeAction(user) }, AcceptRequestUserGroupButtonComponentProps)), user: user, userId: user.id }) }, user.id))) }), state.count > state.visibleItems && (_jsx(Button, Object.assign({ className: classes.showMore, onClick: handleToggleDialogOpen }, { children: _jsx(FormattedMessage, { id: "ui.groupRequestsWidget.button.showMore", defaultMessage: "ui.groupRequestsWidget.button.showMore" }) })))] }), openDialog && (_jsx(DialogRoot, Object.assign({ className: classes.dialogRoot, title: _jsx(FormattedMessage, { defaultMessage: "ui.groupRequestsWidget.dialogTitle", id: "ui.groupRequestsWidget.dialogTitle", values: { total: scGroup.subscribers_counter } }), onClose: handleToggleDialogOpen, open: openDialog }, DialogProps, { children: _jsx(InfiniteScroll, Object.assign({ dataLength: state.results.length, next: handleNext, hasMoreNext: Boolean(state.next), loaderNext: _jsx(UserSkeleton, Object.assign({ elevation: 0 }, UserProps)), height: isMobile ? '100%' : 400, endMessage: _jsx(Typography, Object.assign({ className: classes.endMessage }, { children: _jsx(FormattedMessage, { id: "ui.groupRequestsWidget.noMoreResults", defaultMessage: "ui.groupRequestsWidget.noMoreResults" }) })) }, { children: _jsx(List, { children: state.results.map((user) => (_jsx(ListItem, { children: _jsx(User, { elevation: 0, actions: _jsx(AcceptRequestUserGroupButton, Object.assign({ group: scGroup, groupId: scGroup === null || scGroup === void 0 ? void 0 : scGroup.id, user: user, handleConfirm: () => handleSubscribeAction(user) }, AcceptRequestUserGroupButtonComponentProps)), user: user, userId: user.id }) }, user.id))) }) })) })))] }));
     return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: content })));
 }

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { CategoryTrendingPeopleWidgetSkeleton } from '../CategoryTrendingUsersWidget';
-import { styled } from '@mui/material/styles';
+import { styled } from '@mui/material';
 import { PREFIX } from './constants';
 const classes = {
     root: `${PREFIX}-skeleton-root`

package/lib/esm/components/GroupSettingsIconButton/GroupSettingsIconButton.js

@@ -1,13 +1,11 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
-import { styled } from '@mui/material/styles';
-import { SwipeableDrawer, MenuItem, IconButton, Menu, useTheme, useMediaQuery, List, ListItem } from '@mui/material';
+import { useMemo, useState } from 'react';
+import { SwipeableDrawer, MenuItem, IconButton, Menu, useTheme, useMediaQuery, List, ListItem, styled, Icon } from '@mui/material';
 import { FormattedMessage } from 'react-intl';
-import Icon from '@mui/material/Icon';
 import classNames from 'classnames';
 import { useThemeProps } from '@mui/system';
-import { Link, SCRoutes, useSCRouting, useSCUser } from '@selfcommunity/react-core';
+import { Link, SCPreferences, SCRoutes, useSCPreferences, useSCRouting, useSCUser } from '@selfcommunity/react-core';
 import ConfirmDialog from '../../shared/ConfirmDialog/ConfirmDialog';
 import { GroupService } from '@selfcommunity/api-services';
 import { SCGroupEventType, SCTopicType } from '../../constants/PubSub';
@@ -71,6 +69,8 @@ export default function GroupSettingsIconButton(inProps) {
     const scRoutingContext = useSCRouting();
     // CONTEXT
     const scUserContext = useSCUser();
+    const { preferences } = useSCPreferences();
+    const privateMessagingEnabled = useMemo(() => SCPreferences.ADDONS_PRIVATE_MESSAGES_ENABLED in preferences && preferences[SCPreferences.ADDONS_PRIVATE_MESSAGES_ENABLED].value, [preferences]);
     // HANDLERS
     const handleOpen = (event) => {
         setAnchorEl(event.currentTarget);
@@ -120,13 +120,13 @@ export default function GroupSettingsIconButton(inProps) {
     const renderList = () => {
         if (isMobile) {
             return [
-                _jsx(ListItem, Object.assign({ className: classes.item, component: Link, to: scRoutingContext.url(SCRoutes.USER_PRIVATE_MESSAGES_ROUTE_NAME, user) }, { children: _jsx(FormattedMessage, { id: "ui.groupSettingsIconButton.item.message", defaultMessage: "ui.groupSettingsIconButton.item.message" }) }), "message"),
+                privateMessagingEnabled && (_jsx(ListItem, Object.assign({ className: classes.item, component: Link, to: scRoutingContext.url(SCRoutes.USER_PRIVATE_MESSAGES_ROUTE_NAME, user) }, { children: _jsx(FormattedMessage, { id: "ui.groupSettingsIconButton.item.message", defaultMessage: "ui.groupSettingsIconButton.item.message" }) }), "message")),
                 _jsx(ListItem, Object.assign({ className: classes.item, onClick: handleOpenDialog }, { children: _jsx(FormattedMessage, { id: "ui.groupSettingsIconButton.item.remove", defaultMessage: "ui.groupSettingsIconButton.item.remove" }) }), "delete")
             ];
         }
         else {
             return [
-                _jsx(MenuItem, Object.assign({ className: classes.item, component: Link, to: scRoutingContext.url(SCRoutes.USER_PRIVATE_MESSAGES_ROUTE_NAME, user) }, { children: _jsx(FormattedMessage, { id: "ui.groupSettingsIconButton.item.message", defaultMessage: "ui.groupSettingsIconButton.item.message" }) }), "message"),
+                privateMessagingEnabled && (_jsx(MenuItem, Object.assign({ className: classes.item, component: Link, to: scRoutingContext.url(SCRoutes.USER_PRIVATE_MESSAGES_ROUTE_NAME, user) }, { children: _jsx(FormattedMessage, { id: "ui.groupSettingsIconButton.item.message", defaultMessage: "ui.groupSettingsIconButton.item.message" }) }), "message")),
                 _jsx(MenuItem, Object.assign({ className: classes.item, onClick: handleOpenDialog }, { children: _jsx(FormattedMessage, { id: "ui.groupSettingsIconButton.item.remove", defaultMessage: "ui.groupSettingsIconButton.item.remove" }) }), "delete")
             ];
         }

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

@@ -1,4 +1,4 @@
-import { SCGroupType, SCUserType } from '@selfcommunity/types';
+import { SCGroupType } from '@selfcommunity/types';
 export interface GroupSubscribeButtonProps {
     /**
      * Overrides or extends the styles applied to the component.
@@ -15,15 +15,10 @@ export interface GroupSubscribeButtonProps {
      * @default null
      */
     groupId?: number;
-    /**
-     * The user to be accepted into the group
-     * @default null
-     */
-    user?: SCUserType;
     /**
      * onSubscribe callback
-     * @param user
-     * @param joined
+     * @param group
+     * @param status
      */
     onSubscribe?: (group: SCGroupType, status: string | null) => any;
     /**

package/lib/esm/components/GroupSubscribeButton/GroupSubscribeButton.js

@@ -1,10 +1,10 @@
 import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useMemo, useState } from 'react';
-import { styled } from '@mui/material/styles';
+import { styled } from '@mui/material';
 import { CacheStrategies, Logger } from '@selfcommunity/utils';
-import { useSCContext, useSCFetchGroup, useSCUser } from '@selfcommunity/react-core';
-import { SCGroupPrivacyType, SCGroupSubscriptionStatusType } from '@selfcommunity/types';
+import { useSCContext, useSCFetchGroup, useSCPaymentsEnabled, useSCUser } from '@selfcommunity/react-core';
+import { SCContentType, SCGroupPrivacyType, SCGroupSubscriptionStatusType } from '@selfcommunity/types';
 import { LoadingButton } from '@mui/lab';
 import { FormattedMessage } from 'react-intl';
 import classNames from 'classnames';
@@ -12,6 +12,7 @@ import { useThemeProps } from '@mui/system';
 import { SCOPE_SC_UI } from '../../constants/Errors';
 import { SCGroupEventType, SCTopicType } from '../../constants/PubSub';
 import PubSub from 'pubsub-js';
+import BuyButton from '../BuyButton';
 const PREFIX = 'SCGroupSubscribeButton';
 const classes = {
     root: `${PREFIX}-root`
@@ -21,6 +22,12 @@ const Root = styled(LoadingButton, {
     slot: 'Root',
     overridesResolver: (props, styles) => styles.root
 })(({ theme }) => ({}));
+const BuyButtonRoot = styled(BuyButton, {
+    name: PREFIX,
+    slot: 'BuyButtonRoot'
+})(({ theme }) => ({
+    marginTop: theme.spacing()
+}));
 /**
  * > API documentation for the Community-JS Group Subscribe Button component. Learn about the available props and the CSS API.
 
@@ -44,19 +51,21 @@ const Root = styled(LoadingButton, {
  * @param inProps
  */
 export default function GroupSubscribeButton(inProps) {
-    var _a;
+    var _a, _b;
     // PROPS
     const props = useThemeProps({
         props: inProps,
         name: PREFIX
     });
-    const { className, groupId, group, user, onSubscribe } = props, rest = __rest(props, ["className", "groupId", "group", "user", "onSubscribe"]);
+    const { className, groupId, group, onSubscribe } = props, rest = __rest(props, ["className", "groupId", "group", "onSubscribe"]);
     // STATE
     const [status, setStatus] = useState(null);
     // CONTEXT
     const scContext = useSCContext();
     const scUserContext = useSCUser();
     const scGroupsManager = scUserContext.managers.groups;
+    // PAYMENTS
+    const { isPaymentsEnabled } = useSCPaymentsEnabled();
     // CONST
     const authUserId = scUserContext.user ? scUserContext.user.id : null;
     const { scGroup } = useSCFetchGroup({
@@ -74,6 +83,14 @@ export default function GroupSubscribeButton(inProps) {
             setStatus(scGroupsManager.subscriptionStatus(scGroup));
         }
     }, [authUserId, scGroupsManager.subscriptionStatus, scGroup]);
+    /**
+     * Define if the buyButton is visible
+     */
+    const showBuyButton = !isGroupAdmin &&
+        isPaymentsEnabled &&
+        ((_b = scGroup.paywalls) === null || _b === void 0 ? void 0 : _b.length) > 0 &&
+        (scGroup.privacy === SCGroupPrivacyType.PUBLIC ||
+            (scGroup.privacy === SCGroupPrivacyType.PRIVATE && status && status !== SCGroupSubscriptionStatusType.REQUESTED));
     /**
      * Notify UI when a member is added to a group
      * @param group
@@ -84,14 +101,16 @@ export default function GroupSubscribeButton(inProps) {
             PubSub.publish(`${SCTopicType.GROUP}.${SCGroupEventType.ADD_MEMBER}`, { group, user });
         }
     }
-    const subscribe = (user) => {
+    const subscribe = () => {
         scGroupsManager
-            .subscribe(scGroup, user === null || user === void 0 ? void 0 : user.id)
+            .subscribe(scGroup)
             .then(() => {
             const _status = scGroup.privacy === SCGroupPrivacyType.PRIVATE && scGroup.subscription_status !== SCGroupSubscriptionStatusType.INVITED
                 ? SCGroupSubscriptionStatusType.REQUESTED
                 : SCGroupSubscriptionStatusType.SUBSCRIBED;
-            notifyChanges(scGroup, user);
+            if (_status === SCGroupSubscriptionStatusType.SUBSCRIBED) {
+                notifyChanges(scGroup, scUserContext.user);
+            }
             onSubscribe && onSubscribe(scGroup, _status);
         })
             .catch((e) => {
@@ -113,7 +132,7 @@ export default function GroupSubscribeButton(inProps) {
             scContext.settings.handleAnonymousAction();
         }
         else {
-            status === SCGroupSubscriptionStatusType.SUBSCRIBED && !(user === null || user === void 0 ? void 0 : user.id) ? unsubscribe() : (user === null || user === void 0 ? void 0 : user.id) ? subscribe(user) : subscribe();
+            status === SCGroupSubscriptionStatusType.SUBSCRIBED ? unsubscribe() : subscribe();
         }
     };
     /**
@@ -139,8 +158,11 @@ export default function GroupSubscribeButton(inProps) {
         }
         return _status;
     }, [status, scGroup]);
-    if (!scGroup || (isGroupAdmin && (user === null || user === void 0 ? void 0 : user.id) === scUserContext.user.id) || (isGroupAdmin && !(user === null || user === void 0 ? void 0 : user.id))) {
+    if (!scGroup || isGroupAdmin) {
         return null;
     }
-    return (_jsx(Root, Object.assign({ size: "small", variant: "outlined", onClick: handleSubscribeAction, loading: scUserContext.user ? scGroupsManager.isLoading(scGroup) : null, disabled: status === SCGroupSubscriptionStatusType.REQUESTED, className: classNames(classes.root, className) }, rest, { children: isGroupAdmin ? _jsx(FormattedMessage, { defaultMessage: "ui.groupSubscribeButton.accept", id: "ui.groupSubscribeButton.accept" }) : getStatus })));
+    if (showBuyButton) {
+        return _jsx(BuyButtonRoot, { contentType: SCContentType.GROUP, content: scGroup });
+    }
+    return (_jsx(Root, Object.assign({ size: "small", variant: "outlined", onClick: handleSubscribeAction, loading: scUserContext.user ? scGroupsManager.isLoading(scGroup) : null, disabled: status === SCGroupSubscriptionStatusType.REQUESTED, className: classNames(classes.root, className) }, rest, { children: getStatus })));
 }

package/lib/esm/components/Groups/Groups.js

@@ -1,10 +1,9 @@
 import { __rest } from "tslib";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { styled } from '@mui/material/styles';
-import { Box, Button, Grid, TextField, Typography, useMediaQuery, useTheme } from '@mui/material';
+import { Box, Button, Grid, Icon, IconButton, InputAdornment, TextField, Typography, useMediaQuery, useTheme, styled } from '@mui/material';
 import { Endpoints, GroupService, http } from '@selfcommunity/api-services';
-import { Logger, sortByAttr } from '@selfcommunity/utils';
+import { Logger } from '@selfcommunity/utils';
 import { SCPreferences, useSCPreferences, useSCUser } from '@selfcommunity/react-core';
 import Skeleton from './Skeleton';
 import { FormattedMessage } from 'react-intl';
@@ -21,6 +20,7 @@ import { SCGroupEventType, SCTopicType } from '../../constants/PubSub';
 const classes = {
     root: `${PREFIX}-root`,
     filters: `${PREFIX}-filter`,
+    search: `${PREFIX}-search`,
     groups: `${PREFIX}-groups`,
     item: `${PREFIX}-item`,
     noResults: `${PREFIX}-no-results`,
@@ -94,13 +94,14 @@ export default function Groups(inProps) {
     /**
      * Fetches groups list
      */
-    const fetchGroups = () => {
+    const fetchGroups = (searchValue = search) => {
+        setLoading(true);
         let groupService;
         if (general) {
-            groupService = GroupService.searchGroups(Object.assign(Object.assign({}, endpointQueryParams), (search !== '' && { search: search })));
+            groupService = GroupService.searchGroups(Object.assign(Object.assign({}, endpointQueryParams), (searchValue && { search: searchValue })));
         }
         else {
-            groupService = GroupService.getUserGroups(Object.assign(Object.assign({}, endpointQueryParams), (search !== '' && { search: search })));
+            groupService = GroupService.getUserGroups(Object.assign(Object.assign({}, endpointQueryParams), (searchValue && { search: searchValue })));
         }
         groupService
             .then((res) => {
@@ -122,7 +123,7 @@ export default function Groups(inProps) {
         else {
             fetchGroups();
         }
-    }, [contentAvailability, authUserId, search]);
+    }, [contentAvailability, authUserId]);
     /**
      * Subscriber for pubsub callback
      */
@@ -161,15 +162,6 @@ export default function Groups(inProps) {
             .catch((error) => console.log(error))
             .then(() => setLoading(false));
     }, [next]);
-    /**
-     * Get groups filtered
-     */
-    const getFilteredGroups = () => {
-        if (search) {
-            return groups.filter((g) => g.name.toLowerCase().includes(search.toLowerCase()));
-        }
-        return groups;
-    };
     /**
      * Handle change filter name
      * @param event
@@ -180,12 +172,21 @@ export default function Groups(inProps) {
     /**
      * Renders groups list
      */
-    const filteredGroups = sortByAttr(getFilteredGroups(), 'order');
-    const content = (_jsxs(_Fragment, { children: [showFilters && groups.length !== 0 && (_jsx(Grid, Object.assign({ container: true, direction: "row", justifyContent: "center", alignItems: "center", className: classes.filters }, { children: filters ? (filters) : (_jsx(Grid, Object.assign({ item: true, xs: 12, md: 6 }, { children: _jsx(TextField, { fullWidth: true, value: search, label: _jsx(FormattedMessage, { id: "ui.groups.filterByName", defaultMessage: "ui.groups.filterByName" }), variant: "outlined", onChange: handleOnChangeFilterName, disabled: loading }) }))) }))), _jsx(_Fragment, { children: !groups.length ? (_jsx(Box, Object.assign({ className: classes.noResults }, { children: !onlyStaffEnabled ? (_jsxs(_Fragment, { children: [_jsx(Typography, Object.assign({ variant: "h4" }, { children: _jsx(FormattedMessage, { id: "ui.groups.noGroups.title", defaultMessage: "ui.groups.noGroups.title" }) })), _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.groups.noGroups.subtitle", defaultMessage: "ui.groups.noGroups.subtitle" }) }))] })) : (_jsxs(_Fragment, { children: [_jsx(Typography, Object.assign({ variant: "h4" }, { children: _jsx(FormattedMessage, { id: "ui.groups.noGroups.title.onlyStaff", defaultMessage: "ui.groups.noGroups.title.onlyStaff" }) })), _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.groups.noGroups.subtitle.onlyStaff", defaultMessage: "ui.groups.noGroups.subtitle.onlyStaff" }) }))] })) }))) : (_jsx(InfiniteScroll, Object.assign({ dataLength: groups.length, next: handleNext, hasMoreNext: Boolean(next), loaderNext: isMobile ? _jsx(GroupSkeleton, {}) : _jsx(Skeleton, { groupsNumber: 2 }), endMessage: _jsx(Typography, Object.assign({ component: "div", className: classes.endMessage }, { children: _jsx(FormattedMessage, { id: "ui.groups.endMessage", defaultMessage: "ui.groups.endMessage", values: {
+    const content = (_jsxs(_Fragment, { children: [showFilters && (groups.length !== 0 || search.length !== 0) && (_jsx(Grid, Object.assign({ container: true, direction: "row", justifyContent: "center", alignItems: "center", className: classes.filters }, { children: filters ? (filters) : (_jsx(Grid, Object.assign({ item: true, xs: 12, md: 6 }, { children: _jsx(TextField, { className: classes.search, fullWidth: true, value: search, label: _jsx(FormattedMessage, { id: "ui.groups.filterByName", defaultMessage: "ui.groups.filterByName" }), variant: "outlined", onChange: handleOnChangeFilterName, disabled: loading, onKeyUp: (e) => {
+                            e.preventDefault();
+                            if (e.key === 'Enter') {
+                                fetchGroups();
+                            }
+                        }, InputProps: {
+                            endAdornment: (_jsxs(InputAdornment, Object.assign({ position: "end" }, { children: [search.length > 0 && (_jsx(IconButton, Object.assign({ onClick: () => {
+                                            setSearch('');
+                                            fetchGroups('');
+                                        }, disabled: loading }, { children: _jsx(Icon, { children: "close" }) }))), isMobile ? (_jsx(IconButton, Object.assign({ onClick: () => fetchGroups(), disabled: loading }, { children: _jsx(Icon, { children: "search" }) }))) : (_jsx(Button, { size: "small", variant: "contained", color: "secondary", onClick: () => fetchGroups(), endIcon: _jsx(Icon, { children: "search" }), disabled: loading }))] })))
+                        } }) }))) }))), _jsx(_Fragment, { children: !groups.length ? (_jsx(Box, Object.assign({ className: classes.noResults }, { children: search.length ? (_jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.groups.noResults", defaultMessage: "ui.groups.noResults" }) }))) : !onlyStaffEnabled ? (_jsxs(_Fragment, { children: [_jsx(Typography, Object.assign({ variant: "h4" }, { children: _jsx(FormattedMessage, { id: "ui.groups.noGroups.title", defaultMessage: "ui.groups.noGroups.title" }) })), _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.groups.noGroups.subtitle", defaultMessage: "ui.groups.noGroups.subtitle" }) }))] })) : (_jsxs(_Fragment, { children: [_jsx(Typography, Object.assign({ variant: "h4" }, { children: _jsx(FormattedMessage, { id: "ui.groups.noGroups.title.onlyStaff", defaultMessage: "ui.groups.noGroups.title.onlyStaff" }) })), _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.groups.noGroups.subtitle.onlyStaff", defaultMessage: "ui.groups.noGroups.subtitle.onlyStaff" }) }))] })) }))) : (_jsx(InfiniteScroll, Object.assign({ dataLength: groups.length, next: handleNext, hasMoreNext: Boolean(next), loaderNext: isMobile ? _jsx(GroupSkeleton, {}) : _jsx(Skeleton, { groupsNumber: 2 }), endMessage: _jsx(Typography, Object.assign({ component: "div", className: classes.endMessage }, { children: _jsx(FormattedMessage, { id: "ui.groups.endMessage", defaultMessage: "ui.groups.endMessage", values: {
                                 // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
                                 // @ts-ignore
                                 button: (chunk) => (_jsx(Button, Object.assign({ color: "secondary", variant: "text", onClick: handleScrollUp }, { children: chunk })))
-                            } }) })) }, { children: _jsx(Grid, Object.assign({ container: true, spacing: { xs: 2 }, className: classes.groups }, { children: filteredGroups.map((group) => (_jsx(Grid, Object.assign({ item: true, xs: 12, sm: 8, md: 6, className: classes.item }, { children: _jsx(Group, Object.assign({ group: group, groupId: group.id, actionRedirect: true }, GroupComponentProps)) }), group.id))) })) }))) })] }));
+                            } }) })) }, { children: _jsx(Grid, Object.assign({ container: true, spacing: { xs: 2 }, className: classes.groups }, { children: groups.map((group) => (_jsx(Grid, Object.assign({ item: true, xs: 12, sm: 8, md: 6, className: classes.item }, { children: _jsx(Group, Object.assign({ group: group, groupId: group.id, actionRedirect: true }, GroupComponentProps)) }), group.id))) })) }))) })] }));
     // RENDER
     if (!contentAvailability && !scUserContext.user) {
         return _jsx(HiddenPlaceholder, {});

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

@@ -1,8 +1,8 @@
 import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { styled } from '@mui/material/styles';
+;
 import { PREFIX } from './constants';
-import { Box, Grid } from '@mui/material';
+import { Box, Grid, styled } from '@mui/material';
 import classNames from 'classnames';
 import { GroupSkeleton } from '../Group';
 const classes = {