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

package/lib/esm/components/FeedObject/Poll/Poll.js

@@ -1,15 +1,11 @@
 import { __rest } from "tslib";
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useState } from 'react';
-import { styled } from '@mui/material/styles';
-import Card from '@mui/material/Card';
 import { http, Endpoints } from '@selfcommunity/api-services';
 import { Logger } from '@selfcommunity/utils';
-import { Button, CardContent, CardHeader, Collapse, ListItem, Typography } from '@mui/material';
+import { Button, CardContent, CardHeader, Collapse, ListItem, Typography, styled, Card, List, Icon } from '@mui/material';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
-import List from '@mui/material/List';
 import Choice from './Choice';
-import Icon from '@mui/material/Icon';
 import { SCOPE_SC_UI } from '../../../constants/Errors';
 import classNames from 'classnames';
 import { PREFIX } from '../constants';
@@ -150,7 +146,7 @@ export default function PollObject(props) {
      */
     let objElement = _jsx(_Fragment, {});
     if (pollObject) {
-        objElement = (_jsxs(_Fragment, { children: [_jsx(CardHeader, { title: _jsx(_Fragment, { children: _jsx(Button, Object.assign({ className: classes.toggleButton, onClick: handleToggleCollapsedClick, "aria-expanded": collapsed, endIcon: _jsx(Icon, Object.assign({ className: classNames(classes.expandIcon, { [classes.collapsedIcon]: collapsed }) }, { children: "arrow_upward" })) }, { children: collapsed ? intl.formatMessage(messages.showPoll) : intl.formatMessage(messages.hidePoll) })) }) }), _jsx(Collapse, Object.assign({ in: !collapsed, timeout: "auto", unmountOnExit: true }, { children: _jsxs(CardContent, { children: [_jsx(Typography, Object.assign({ variant: "body1", className: classes.title }, { children: obj.title })), obj.expiration_at && Date.parse(obj.expiration_at) >= new Date().getTime() && (_jsxs(Typography, Object.assign({ variant: "body2", className: classes.expiration }, { children: [`${intl.formatMessage(messages.expDate)}`, `${intl.formatDate(Date.parse(obj.expiration_at), { year: 'numeric', month: 'numeric', day: 'numeric' })}`] }))), obj.closed && (_jsx(Typography, Object.assign({ variant: "body2", className: classes.closed }, { children: _jsx(FormattedMessage, { id: "ui.feedObject.poll.closed", defaultMessage: "ui.feedObject.poll.closed" }) }))), _jsx(List, { children: choices.map((choice, index) => (_jsx(ListItem, { children: _jsx(Choice, { elevation: 0, choiceObj: choice, feedObject: disabled ? null : feedObject, votes: votes, vote: vote, isVoting: isVoting, votable: votable }) }, index))) }), multipleChoices ? (_jsxs("div", Object.assign({ className: classes.votes }, { children: [_jsx(Icon, { children: "list" }), _jsx(Typography, { children: `${intl.formatMessage(messages.votes, { total: votes })}` })] }))) : (_jsxs("div", Object.assign({ className: classes.voters }, { children: [_jsx(Icon, { children: "people_alt" }), _jsx(Typography, { children: `${intl.formatMessage(messages.voters, { total: votes })}` })] })))] }) }))] }));
+        objElement = (_jsxs(_Fragment, { children: [_jsx(CardHeader, { title: _jsx(_Fragment, { children: _jsx(Button, Object.assign({ className: classes.toggleButton, onClick: handleToggleCollapsedClick, "aria-expanded": collapsed, endIcon: _jsx(Icon, Object.assign({ className: classNames(classes.expandIcon, { [classes.collapsedIcon]: collapsed }) }, { children: "arrow_upward" })) }, { children: collapsed ? intl.formatMessage(messages.showPoll) : intl.formatMessage(messages.hidePoll) })) }) }), _jsx(Collapse, Object.assign({ in: !collapsed, timeout: "auto", unmountOnExit: true }, { children: _jsxs(CardContent, { children: [_jsx(Typography, Object.assign({ variant: "body1", className: classes.title }, { children: obj.title })), obj.expiration_at && Date.parse(obj.expiration_at) >= new Date().getTime() && (_jsxs(Typography, Object.assign({ variant: "body2", className: classes.expiration }, { children: [`${intl.formatMessage(messages.expDate)}`, `${intl.formatDate(Date.parse(obj.expiration_at), { year: 'numeric', month: 'numeric', day: 'numeric' })}`] }))), obj.closed && (_jsx(Typography, Object.assign({ variant: "body2", className: classes.closed }, { children: _jsx(FormattedMessage, { id: "ui.feedObject.poll.closed", defaultMessage: "ui.feedObject.poll.closed" }) }))), _jsx(List, { children: choices.map((choice, index) => (_jsx(ListItem, { children: _jsx(Choice, { elevation: 0, choiceObj: choice, feedObject: disabled ? null : feedObject, votes: votes, vote: vote, isVoting: isVoting, votable: votable }) }, index))) }), !feedObject.draft && (_jsx(_Fragment, { children: multipleChoices ? (_jsxs("div", Object.assign({ className: classes.votes }, { children: [_jsx(Icon, { children: "list" }), _jsx(Typography, { children: `${intl.formatMessage(messages.votes, { total: votes })}` })] }))) : (_jsxs("div", Object.assign({ className: classes.voters }, { children: [_jsx(Icon, { children: "people_alt" }), _jsx(Typography, { children: `${intl.formatMessage(messages.voters, { total: votes })}` })] }))) }))] }) }))] }));
     }
     useEffect(() => {
         setChoices(pollObject.choices);

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

@@ -2,10 +2,8 @@ import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import Widget from '../Widget';
-import { styled } from '@mui/material/styles';
-import Skeleton from '@mui/material/Skeleton';
 import { SCFeedObjectTemplateType } from '../../types/feedObject';
-import { CardContent, CardHeader, useTheme } from '@mui/material';
+import { CardContent, CardHeader, useTheme, styled, Skeleton } from '@mui/material';
 import classNames from 'classnames';
 import { PREFIX } from './constants';
 const classes = {

package/lib/esm/components/FeedObjectMediaPreview/FeedObjectMediaPreview.js

@@ -1,8 +1,7 @@
 import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { styled } from '@mui/material/styles';
-import Box from '@mui/material/Box';
 import { useSCMediaClick } from '@selfcommunity/react-core';
+import { Box, styled } from '@mui/material';
 import { useThemeProps } from '@mui/system';
 import { File, Link, Share } from '../../shared/Media';
 import classNames from 'classnames';

package/lib/esm/components/FeedUpdatesWidget/FeedUpdatesWidget.js

@@ -1,8 +1,7 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
-import { styled } from '@mui/material/styles';
-import { Button, CardContent } from '@mui/material';
+import { Button, CardContent, styled } from '@mui/material';
 import PubSub from 'pubsub-js';
 import { FormattedMessage } from 'react-intl';
 import classNames from 'classnames';

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

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

package/lib/esm/components/FollowUserButton/FollowUserButton.js

@@ -1,7 +1,7 @@
 import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useContext, useEffect, useState } from 'react';
-import { styled } from '@mui/material/styles';
+import { styled } from '@mui/material';
 import { SCOPE_SC_UI } from '../../constants/Errors';
 import { LoadingButton } from '@mui/lab';
 import { FormattedMessage } from 'react-intl';

package/lib/esm/components/Footer/Footer.js

@@ -1,16 +1,13 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useMemo, useState } from 'react';
+import { useMemo } from 'react';
 import { useThemeProps } from '@mui/system';
-import { styled } from '@mui/material/styles';
-import { Box, Button, Typography } from '@mui/material';
+import { Box, Button, Typography, styled } from '@mui/material';
 import classNames from 'classnames';
-import { CustomMenuService } from '@selfcommunity/api-services';
-import { Logger, sortByAttr } from '@selfcommunity/utils';
-import { Link, SCPreferences, useSCPreferences } from '@selfcommunity/react-core';
-import { SCOPE_SC_UI } from '../../constants/Errors';
+import { sortByAttr } from '@selfcommunity/utils';
+import { Link, SCPreferences, useFetchMenuFooter, useSCPreferences } from '@selfcommunity/react-core';
 import FooterSkeleton from './Skeleton';
-import { PREFIX } from './constants';
+import { PREFIX, EXPLORE_MENU_ITEM } from './constants';
 const classes = {
     root: `${PREFIX}-root`,
     itemList: `${PREFIX}-item-list`,
@@ -20,7 +17,7 @@ const classes = {
 const Root = styled(Box, {
     name: PREFIX,
     slot: 'Root'
-})(({ theme }) => ({}));
+})(() => ({}));
 /**
  * > API documentation for the Community-JS Footer component. Learn about the available props and the CSS API.
  *
@@ -54,44 +51,23 @@ export default function Footer(inProps) {
         name: PREFIX
     });
     const { className, menu = null, startActions = null, endActions = null } = props, rest = __rest(props, ["className", "menu", "startActions", "endActions"]);
+    // HOOKS
+    const { _menu, loading } = useFetchMenuFooter(menu);
     // PREFERENCES
-    const scPreferences = useSCPreferences();
+    const { preferences } = useSCPreferences();
     const copyright = useMemo(() => {
-        return scPreferences.preferences && SCPreferences.TEXT_APPLICATION_COPYRIGHT in scPreferences.preferences
-            ? scPreferences.preferences[SCPreferences.TEXT_APPLICATION_COPYRIGHT].value.replace('$year', new Date().getFullYear())
+        return preferences && SCPreferences.TEXT_APPLICATION_COPYRIGHT in preferences
+            ? preferences[SCPreferences.TEXT_APPLICATION_COPYRIGHT].value.replace('$year', new Date().getFullYear())
             : null;
-    }, [scPreferences.preferences]);
-    // STATE
-    const [_menu, setMenu] = useState(menu);
-    const [loading, setLoading] = useState(!menu);
-    /**
-     * Fetches custom pages
-     */
-    function fetchMenu() {
-        setLoading(true);
-        CustomMenuService.getBaseCustomMenu()
-            .then((menu) => {
-            setMenu(menu);
-        })
-            .catch((error) => {
-            Logger.error(SCOPE_SC_UI, error);
-        })
-            .then(() => setLoading(false));
-    }
-    /**
-     * On mount, fetches legal and custom pages
-     */
-    useEffect(() => {
-        if (_menu) {
-            return;
-        }
-        fetchMenu();
-    }, []);
+    }, [preferences]);
+    const exploreStreamEnabled = preferences[SCPreferences.CONFIGURATIONS_EXPLORE_STREAM_ENABLED].value;
     /**
      * Renders root object
      */
     if (loading) {
         return _jsx(FooterSkeleton, {});
     }
-    return (_jsxs(Root, Object.assign({}, rest, { className: classNames(classes.root, className) }, { children: [startActions, _jsx(Box, Object.assign({ className: classes.itemList }, { children: sortByAttr(_menu.items, 'order').map((item, index) => (_jsx(Button, Object.assign({ component: Link, className: classes.item, to: item.url, variant: "text" }, { children: item.label }), item.id))) })), endActions, _jsx(Typography, { textAlign: "center", className: classes.copyright, variant: "body2", dangerouslySetInnerHTML: { __html: copyright } })] })));
+    return (_jsxs(Root, Object.assign({}, rest, { className: classNames(classes.root, className) }, { children: [startActions, _jsx(Box, Object.assign({ className: classes.itemList }, { children: sortByAttr(_menu.items, 'order')
+                    .filter((item) => exploreStreamEnabled || item.url !== EXPLORE_MENU_ITEM)
+                    .map((item) => (_jsx(Button, Object.assign({ component: Link, className: classes.item, to: item.url, variant: "text" }, { children: item.label }), item.id))) })), endActions, _jsx(Typography, { textAlign: "center", className: classes.copyright, variant: "body2", dangerouslySetInnerHTML: { __html: copyright } })] })));
 }

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

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

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

@@ -1 +1,2 @@
 export declare const PREFIX = "SCFooter";
+export declare const EXPLORE_MENU_ITEM = "/explore/";

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

@@ -1 +1,2 @@
 export const PREFIX = 'SCFooter';
+export const EXPLORE_MENU_ITEM = '/explore/';

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

@@ -0,0 +1,14 @@
+import { FooterProps } from '../Footer/Footer';
+import { WidgetProps } from '../Widget';
+export interface FooterWidgetProps extends WidgetProps {
+    /**
+     * Props to spread to footer
+     * @default undefined
+     */
+    footerProps?: FooterProps;
+    /**
+     * Other props
+     */
+    [p: string]: any;
+}
+export default function FooterWidget(inProps: FooterWidgetProps): JSX.Element;

package/lib/esm/components/FooterWidget/FooterWidget.js

@@ -0,0 +1,25 @@
+import { __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import Footer from '../Footer/Footer';
+import { CardContent, styled, useThemeProps } from '@mui/material';
+import Widget from '../Widget';
+import { PREFIX } from './constants';
+const classes = {
+    root: `${PREFIX}-root`,
+    content: `${PREFIX}-content`
+};
+const Root = styled(Widget, {
+    name: PREFIX,
+    slot: 'Root',
+    overridesResolver: (_props, styles) => styles.root
+})(() => ({}));
+export default function FooterWidget(inProps) {
+    // PROPS
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX
+    });
+    // CONST
+    const { footerProps } = props, rest = __rest(props, ["footerProps"]);
+    return (_jsx(Root, Object.assign({ className: classes.root }, rest, { children: _jsx(CardContent, Object.assign({ className: classes.content }, { children: _jsx(Footer, Object.assign({}, footerProps)) })) })));
+}

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

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

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

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

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

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

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

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

package/lib/esm/components/FriendshipUserButton/FriendshipUserButton.js

@@ -1,7 +1,7 @@
 import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useContext, useEffect, useState } from 'react';
-import { styled } from '@mui/material/styles';
+import { styled } from '@mui/material';
 import { SCConnectionStatus } from '@selfcommunity/types';
 import classNames from 'classnames';
 import { useThemeProps } from '@mui/system';

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

@@ -1,5 +1,6 @@
 import { ButtonBaseProps } from '@mui/material';
 import { SCGroupType } from '@selfcommunity/types';
+import { CacheStrategies } from '@selfcommunity/utils/src/utils/cache';
 import { WidgetProps } from '../Widget';
 import { GroupSubscribeButtonProps } from '../GroupSubscribeButton';
 export interface GroupProps extends WidgetProps {
@@ -17,7 +18,7 @@ export interface GroupProps extends WidgetProps {
      * Props to spread to group subscribe/unsubscribe button
      * @default {}
      */
-    groupSubscribeButtonProps?: GroupSubscribeButtonProps;
+    GroupSubscribeButtonComponentProps?: GroupSubscribeButtonProps;
     /**
      * Badge content to show as group avatar badge if show reaction is true.
      */
@@ -37,6 +38,10 @@ export interface GroupProps extends WidgetProps {
      * @default {}
      */
     buttonProps?: ButtonBaseProps;
+    /**
+     * Override default cache strategy on fetch element
+     */
+    cacheStrategy?: CacheStrategies;
     /**
      * Any other properties
      */

package/lib/esm/components/Group/Group.js

@@ -1,10 +1,9 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useMemo, useState } from 'react';
-import { styled } from '@mui/material/styles';
-import { Avatar, Button, Icon, Stack, useMediaQuery, useTheme } from '@mui/material';
+import { Avatar, Button, Icon, Stack, useMediaQuery, useTheme, styled } from '@mui/material';
 import { SCGroupPrivacyType, SCGroupSubscriptionStatusType } from '@selfcommunity/types';
-import { Link, SCRoutes, useSCFetchGroup, useSCRouting, useSCUser } from '@selfcommunity/react-core';
+import { Link, SCRoutes, useSCFetchGroup, useSCPaymentsEnabled, useSCRouting, useSCUser } from '@selfcommunity/react-core';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import classNames from 'classnames';
 import { useThemeProps } from '@mui/system';
@@ -30,8 +29,8 @@ const classes = {
 const Root = styled(BaseItemButton, {
     name: PREFIX,
     slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({}));
+    overridesResolver: (_props, styles) => styles.root
+})(() => ({}));
 /**
  * > API documentation for the Community-JS Group component. Learn about the available props and the CSS API.
  *
@@ -64,15 +63,15 @@ const Root = styled(BaseItemButton, {
  * @param inProps
  */
 export default function Group(inProps) {
-    var _a;
+    var _a, _b;
     // PROPS
     const props = useThemeProps({
         props: inProps,
         name: PREFIX
     });
-    const { groupId = null, group = null, className = null, elevation, hideActions = false, actionRedirect = false, groupSubscribeButtonProps = {} } = props, rest = __rest(props, ["groupId", "group", "className", "elevation", "hideActions", "actionRedirect", "groupSubscribeButtonProps"]);
+    const { groupId = null, group = null, className = null, elevation, hideActions = false, actionRedirect = false, GroupSubscribeButtonComponentProps = {}, cacheStrategy } = props, rest = __rest(props, ["groupId", "group", "className", "elevation", "hideActions", "actionRedirect", "GroupSubscribeButtonComponentProps", "cacheStrategy"]);
     // STATE
-    const { scGroup } = useSCFetchGroup({ id: groupId, group });
+    const { scGroup } = useSCFetchGroup(Object.assign({ id: groupId, group }, (cacheStrategy && { cacheStrategy })));
     // CONTEXT
     const scRoutingContext = useSCRouting();
     const scUserContext = useSCUser();
@@ -83,12 +82,14 @@ export default function Group(inProps) {
     const intl = useIntl();
     const theme = useTheme();
     const isMobile = useMediaQuery(theme.breakpoints.down('md'));
+    // PAYMENTS
+    const { isPaymentsEnabled } = useSCPaymentsEnabled();
     /**
      * Render authenticated actions
      * @return {JSX.Element}
      */
     function renderAuthenticatedActions() {
-        return (_jsxs(Stack, Object.assign({ className: classes.actions, direction: "row", alignItems: "center", justifyContent: "center", spacing: 2 }, { children: [isGroupAdmin && _jsx(Icon, { children: "face" }), actionRedirect ? (_jsx(Button, Object.assign({ size: "small", variant: "outlined", component: Link, to: scRoutingContext.url(SCRoutes.GROUP_ROUTE_NAME, scGroup) }, { children: scGroup.subscription_status === SCGroupSubscriptionStatusType.SUBSCRIBED ? (_jsx(FormattedMessage, { defaultMessage: "ui.group.status.enter", id: "ui.group.status.enter" })) : (_jsx(FormattedMessage, { defaultMessage: "ui.group.status.discover", id: "ui.group.status.discover" })) }))) : (_jsx(GroupSubscribeButton, Object.assign({ group: group, groupId: groupId }, groupSubscribeButtonProps)))] })));
+        return (_jsxs(Stack, Object.assign({ className: classes.actions, direction: "row", alignItems: "center", justifyContent: "center", spacing: 2 }, { children: [isGroupAdmin && _jsx(Icon, { children: "face" }), actionRedirect ? (_jsx(Button, Object.assign({ size: "small", variant: "outlined", component: Link, to: scRoutingContext.url(SCRoutes.GROUP_ROUTE_NAME, scGroup) }, { children: scGroup.subscription_status === SCGroupSubscriptionStatusType.SUBSCRIBED ? (_jsx(FormattedMessage, { defaultMessage: "ui.group.status.enter", id: "ui.group.status.enter" })) : (_jsx(FormattedMessage, { defaultMessage: "ui.group.status.discover", id: "ui.group.status.discover" })) }))) : (_jsx(GroupSubscribeButton, Object.assign({ group: group, groupId: groupId }, GroupSubscribeButtonComponentProps)))] })));
     }
     /**
      * Renders group object
@@ -101,5 +102,5 @@ export default function Group(inProps) {
      */
     return (_jsxs(_Fragment, { children: [_jsx(Root, Object.assign({ elevation: elevation }, rest, { className: classNames(classes.root, className), ButtonBaseProps: { component: Link, to: scRoutingContext.url(SCRoutes.GROUP_ROUTE_NAME, scGroup) }, image: _jsx(Avatar, { alt: scGroup.name, src: scGroup.image_medium, className: classes.avatar }), primary: _jsxs(_Fragment, { children: [isMobile
                             ? formatCroppedName(scGroup.name, GROUP_NAME_MAX_LENGTH_MOBILE)
-                            : formatCroppedName(scGroup.name, GROUP_NAME_MAX_LENGTH_DESKTOP), ' ', _jsx(Icon, Object.assign({ className: classes.icon }, { children: (group === null || group === void 0 ? void 0 : group.privacy) === SCGroupPrivacyType.PRIVATE ? 'private' : 'public' }))] }), secondary: `${intl.formatMessage(messages.groupMembers, { total: scGroup.subscribers_counter })}`, actions: hideActions ? null : renderAuthenticatedActions() })), openAlert && _jsx(UserDeletedSnackBar, { open: openAlert, handleClose: () => setOpenAlert(false) })] }));
+                            : formatCroppedName(scGroup.name, GROUP_NAME_MAX_LENGTH_DESKTOP), ' ', _jsx(Icon, Object.assign({ className: classes.icon }, { children: (group === null || group === void 0 ? void 0 : group.privacy) === SCGroupPrivacyType.PRIVATE ? 'private' : 'public' })), isPaymentsEnabled && ((_b = scGroup.paywalls) === null || _b === void 0 ? void 0 : _b.length) && (_jsxs(_Fragment, { children: ["\u00A0", _jsx(Icon, { children: "pagamenti" })] }))] }), secondary: `${intl.formatMessage(messages.groupMembers, { total: scGroup.subscribers_counter })}`, actions: hideActions ? null : renderAuthenticatedActions() })), openAlert && _jsx(UserDeletedSnackBar, { open: openAlert, handleClose: () => setOpenAlert(false) })] }));
 }

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

@@ -1,7 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Button, useTheme } from '@mui/material';
-import { styled } from '@mui/material/styles';
-import Skeleton from '@mui/material/Skeleton';
+import { Button, useTheme, styled, Skeleton } from '@mui/material';
 import BaseItem from '../../shared/BaseItem';
 import { PREFIX } from './constants';
 const classes = {

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

@@ -1,10 +1,8 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useMemo, useState } from 'react';
-import { styled } from '@mui/material/styles';
-import { Divider, IconButton, List, ListItemIcon, Menu, MenuItem, SwipeableDrawer, useMediaQuery, useTheme } from '@mui/material';
+import { Divider, IconButton, List, ListItemIcon, Menu, MenuItem, SwipeableDrawer, useMediaQuery, useTheme, 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 { SCRoutes, useSCFetchGroup, useSCRouting, useSCUser } from '@selfcommunity/react-core';

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

@@ -1,6 +1,5 @@
-import { TextFieldProps } from '@mui/material/TextField';
-import { AutocompleteProps } from '@mui/material';
-import { SCGroupType } from '@selfcommunity/types/src/index';
+import { AutocompleteProps, TextFieldProps } from '@mui/material';
+import { SCGroupType } from '@selfcommunity/types';
 export interface GroupAutocompleteProps extends Pick<AutocompleteProps<SCGroupType | null, any, any, any>, Exclude<keyof AutocompleteProps<SCGroupType | null, any, any, any>, 'open' | 'onOpen' | 'onClose' | 'onChange' | 'filterSelectedOptions' | 'disableCloseOnSelect' | 'options' | 'getOptionLabel' | 'value' | 'selectOnFocus' | 'clearOnBlur' | 'blurOnSelect' | 'handleHomeEndKeys' | 'clearIcon' | 'noOptionsText' | 'isOptionEqualToValue' | 'renderTags' | 'renderOption' | 'renderInput'>> {
     /**
      * The maximum number of groups that will be visible when not focused.

package/lib/esm/components/GroupAutocomplete/GroupAutocomplete.js

@@ -2,14 +2,10 @@ import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useEffect, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
-import Autocomplete from '@mui/material/Autocomplete';
-import TextField from '@mui/material/TextField';
-import CircularProgress from '@mui/material/CircularProgress';
 import parse from 'autosuggest-highlight/parse';
 import match from 'autosuggest-highlight/match';
-import { Avatar, Box, Typography } from '@mui/material';
+import { Avatar, Box, Typography, styled, Autocomplete, TextField, CircularProgress } from '@mui/material';
 import { useSCFetchGroups } from '@selfcommunity/react-core';
-import { styled } from '@mui/material/styles';
 import { useThemeProps } from '@mui/system';
 const PREFIX = 'SCGroupAutocomplete';
 const classes = {

package/lib/esm/components/GroupForm/GroupForm.js

@@ -2,10 +2,9 @@ import { __rest } from "tslib";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo, useState } from 'react';
 import { useThemeProps } from '@mui/system';
-import { styled } from '@mui/material/styles';
-import { Avatar, Box, Divider, FormGroup, Icon, Paper, Stack, Switch, TextField, Typography } from '@mui/material';
+import { Avatar, Box, Divider, FormGroup, Icon, Paper, Stack, Switch, TextField, Typography, styled } from '@mui/material';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
-import { SCPreferences, useSCPreferences } from '@selfcommunity/react-core';
+import { SCPreferences, UserUtils, useSCPaymentsEnabled, useSCPreferences, useSCUser } from '@selfcommunity/react-core';
 import classNames from 'classnames';
 import { PREFIX } from './constants';
 import BaseDialog from '../../shared/BaseDialog';
@@ -15,11 +14,13 @@ import ChangeGroupCover from '../ChangeGroupCover';
 import { GROUP_DESCRIPTION_MAX_LENGTH, GROUP_TITLE_MAX_LENGTH } from '../../constants/Group';
 import GroupInviteButton from '../GroupInviteButton';
 import PubSub from 'pubsub-js';
-import { SCGroupPrivacyType } from '@selfcommunity/types';
+import { SCContentType, SCGroupPrivacyType } from '@selfcommunity/types';
 import { SCOPE_SC_UI } from '../../constants/Errors';
 import { formatHttpErrorCode, GroupService } from '@selfcommunity/api-services';
 import { Logger } from '@selfcommunity/utils';
 import { SCGroupEventType, SCTopicType } from '../../constants/PubSub';
+import PaywallsConfigurator from '../PaywallsConfigurator';
+import { ContentAccessType } from '../PaywallsConfigurator/constants';
 const messages = defineMessages({
     name: {
         id: 'ui.groupForm.name.placeholder',
@@ -47,6 +48,7 @@ const classes = {
     privacySectionInfo: `${PREFIX}-privacy-section-info`,
     visibilitySection: `${PREFIX}-visibility-section`,
     visibilitySectionInfo: `${PREFIX}-visibility-section-info`,
+    paywallsConfiguratorWrap: `${PREFIX}-paywalls-configurator-wrap`,
     inviteSection: `${PREFIX}-invite-section`,
     error: `${PREFIX}-error`
 };
@@ -91,7 +93,7 @@ const Root = styled(BaseDialog, {
  * @param inProps
  */
 export default function GroupForm(inProps) {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f, _g;
     //PROPS
     const props = useThemeProps({
         props: inProps,
@@ -108,17 +110,25 @@ export default function GroupForm(inProps) {
         isPublic: group && group.privacy === SCGroupPrivacyType.PUBLIC,
         isVisible: group ? group.visible : true,
         invitedUsers: null,
-        isSubmitting: false
+        isSubmitting: false,
+        products: ((_a = group === null || group === void 0 ? void 0 : group.paywalls) === null || _a === void 0 ? void 0 : _a.map((p) => p.id)) || [],
+        contentAccessType: ((_b = group === null || group === void 0 ? void 0 : group.paywalls) === null || _b === void 0 ? void 0 : _b.length) ? ContentAccessType.PAID : ContentAccessType.FREE
     };
+    // CONTEXT
+    const scUserContext = useSCUser();
     // STATE
     const [field, setField] = useState(initialFieldState);
     const [error, setError] = useState({});
     // INTL
     const intl = useIntl();
+    // CONST
+    const isStaff = useMemo(() => scUserContext.user && UserUtils.isStaff(scUserContext.user), [scUserContext.user]);
     // PREFERENCES
     const scPreferences = useSCPreferences();
     const visibilityEnabled = useMemo(() => scPreferences.preferences[SCPreferences.CONFIGURATIONS_GROUPS_VISIBILITY_ENABLED].value, [scPreferences.preferences]);
     const privateEnabled = useMemo(() => scPreferences.preferences[SCPreferences.CONFIGURATIONS_GROUPS_PRIVATE_ENABLED].value, [scPreferences.preferences]);
+    // PAYMENTS
+    const { isPaymentsEnabled } = useSCPaymentsEnabled();
     const _backgroundCover = Object.assign({}, (field.emotionalImageOriginal
         ? { background: `url('${field.emotionalImageOriginal}') center / cover` }
         : { background: `url('${scPreferences.preferences[SCPreferences.IMAGES_USER_DEFAULT_COVER].value}') center / cover` }));
@@ -163,6 +173,7 @@ export default function GroupForm(inProps) {
         }
     }
     const handleSubmit = () => {
+        var _a;
         setField((prev) => (Object.assign(Object.assign({}, prev), { ['isSubmitting']: true })));
         const formData = new FormData();
         formData.append('name', field.name);
@@ -179,6 +190,12 @@ export default function GroupForm(inProps) {
         if (field.emotionalImageOriginalFile) {
             formData.append('emotional_image_original', field.emotionalImageOriginalFile);
         }
+        if (field.products.length && field.contentAccessType === ContentAccessType.PAID && (isStaff || (group && ((_a = group.paywalls) === null || _a === void 0 ? void 0 : _a.length)))) {
+            formData.append(`products`, JSON.stringify(field.products));
+        }
+        else {
+            formData.append(`products`, '[]');
+        }
         if (!group) {
             for (const key in field.invitedUsers) {
                 formData.append(key, field.invitedUsers[key]);
@@ -193,10 +210,10 @@ export default function GroupForm(inProps) {
         }
         groupService
             .then((data) => {
-            onSuccess && onSuccess(data);
+            onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(data);
             notifyChanges(data);
-            onClose && onClose();
             setField((prev) => (Object.assign(Object.assign({}, prev), { ['isSubmitting']: false })));
+            onClose === null || onClose === void 0 ? void 0 : onClose();
         })
             .catch((e) => {
             setError(Object.assign(Object.assign({}, error), formatHttpErrorCode(e)));
@@ -215,17 +232,29 @@ export default function GroupForm(inProps) {
             setError(error);
         }
     };
+    const handleChangeContentAccessType = (type) => {
+        setField((prev) => (Object.assign(Object.assign({}, prev), { contentAccessType: type })));
+    };
+    const handleChangePaymentsProducts = (products) => {
+        setField((prev) => (Object.assign(Object.assign({}, prev), { products: products.map((product) => product.id) })));
+    };
+    const handleClose = (_event, reason) => {
+        if (reason === 'backdropClick' || reason === 'escapeKeyDown') {
+            return;
+        }
+        onClose === null || onClose === void 0 ? void 0 : onClose();
+    };
     /**
      * Renders root object
      */
-    return (_jsx(Root, Object.assign({ DialogContentProps: { dividers: false }, title: group ? (_jsx(FormattedMessage, { id: "ui.groupForm.title.edit", defaultMessage: "ui.groupForm.title.edit" })) : (_jsx(FormattedMessage, { id: "ui.groupForm.title", defaultMessage: "ui.groupForm.title" })), open: open, onClose: onClose, className: classNames(classes.root, className), actions: _jsx(LoadingButton, Object.assign({ loading: field.isSubmitting, disabled: !field.name ||
+    return (_jsx(Root, Object.assign({ DialogContentProps: { dividers: false }, title: group ? (_jsx(FormattedMessage, { id: "ui.groupForm.title.edit", defaultMessage: "ui.groupForm.title.edit" })) : (_jsx(FormattedMessage, { id: "ui.groupForm.title", defaultMessage: "ui.groupForm.title" })), open: open, disableEscapeKeyDown: true, onClose: handleClose, className: classNames(classes.root, className), actions: _jsx(LoadingButton, Object.assign({ loading: field.isSubmitting, disabled: !field.name ||
                 Object.keys(error).length !== 0 ||
                 field.name.length > GROUP_TITLE_MAX_LENGTH ||
                 field.name.description > GROUP_DESCRIPTION_MAX_LENGTH, variant: "contained", onClick: handleSubmit, color: "secondary" }, { children: group ? (_jsx(FormattedMessage, { id: "ui.groupForm.button.edit", defaultMessage: "ui.groupForm.button.edit" })) : (_jsx(FormattedMessage, { id: "ui.groupForm.button.create", defaultMessage: "ui.groupForm.button.create" })) })) }, rest, { children: _jsxs(_Fragment, { children: [_jsxs(_Fragment, { children: [_jsxs(Paper, Object.assign({ style: _backgroundCover, classes: { root: classes.cover } }, { children: [_jsx(Box, Object.assign({ className: classes.avatar }, { children: _jsx(Avatar, { children: field.imageOriginal ? _jsx("img", { src: field.imageOriginal, alt: "avatar" }) : _jsx(Icon, { children: "icon_image" }) }) })), _jsxs(_Fragment, { children: [_jsx(ChangeGroupPicture, { isCreationMode: true, onChange: handleChangeAvatar }), _jsx(ChangeGroupCover, { isCreationMode: true, onChange: handleChangeCover })] })] })), _jsx(Typography, Object.assign({ className: classNames(classes.header, { [classes.error]: error.emotionalImageOriginalError || error.imageOriginalError }), align: "center" }, { children: error.emotionalImageOriginalError || error.imageOriginalError ? (_jsx(FormattedMessage, { id: "ui.groupForm.header.error", defaultMessage: "ui.groupForm.header.error" })) : (_jsx(FormattedMessage, { id: "ui.groupForm.header", defaultMessage: "ui.groupForm.header" })) }))] }), _jsxs(FormGroup, Object.assign({ className: classes.form }, { children: [_jsx(TextField, { required: true, className: classes.name, placeholder: `${intl.formatMessage(messages.name)}`, margin: "normal", value: field.name, name: "name", onChange: handleChange, InputProps: {
                                 endAdornment: _jsx(Typography, Object.assign({ variant: "body2" }, { children: GROUP_TITLE_MAX_LENGTH - field.name.length }))
-                            }, error: Boolean(((_a = field === null || field === void 0 ? void 0 : field.name) === null || _a === void 0 ? void 0 : _a.length) > GROUP_TITLE_MAX_LENGTH), helperText: ((_b = field === null || field === void 0 ? void 0 : field.name) === null || _b === void 0 ? void 0 : _b.length) > GROUP_TITLE_MAX_LENGTH ? (_jsx(FormattedMessage, { id: "ui.groupForm.name.error.maxLength", defaultMessage: "ui.groupForm.name.error.maxLength" })) : null }), _jsx(TextField, { multiline: true, className: classes.description, placeholder: `${intl.formatMessage(messages.description)}`, margin: "normal", value: field.description, name: "description", onChange: handleChange, InputProps: {
-                                endAdornment: (_jsx(Typography, Object.assign({ variant: "body2" }, { children: ((_c = field.description) === null || _c === void 0 ? void 0 : _c.length) ? GROUP_DESCRIPTION_MAX_LENGTH - field.description.length : GROUP_DESCRIPTION_MAX_LENGTH })))
-                            }, error: Boolean(((_d = field.description) === null || _d === void 0 ? void 0 : _d.length) > GROUP_DESCRIPTION_MAX_LENGTH), helperText: ((_e = field.description) === null || _e === void 0 ? void 0 : _e.length) > GROUP_DESCRIPTION_MAX_LENGTH ? (_jsx(FormattedMessage, { id: "ui.groupForm.description.error.maxLength", defaultMessage: "ui.groupForm.description.error.maxLength" })) : null }), privateEnabled && (_jsxs(Box, Object.assign({ className: classes.privacySection }, { children: [_jsx(Typography, Object.assign({ variant: "h4" }, { children: _jsx(FormattedMessage, { id: "ui.groupForm.privacy.title", defaultMessage: "ui.groupForm.privacy.title", values: {
+                            }, error: Boolean(((_c = field === null || field === void 0 ? void 0 : field.name) === null || _c === void 0 ? void 0 : _c.length) > GROUP_TITLE_MAX_LENGTH), helperText: ((_d = field === null || field === void 0 ? void 0 : field.name) === null || _d === void 0 ? void 0 : _d.length) > GROUP_TITLE_MAX_LENGTH ? (_jsx(FormattedMessage, { id: "ui.groupForm.name.error.maxLength", defaultMessage: "ui.groupForm.name.error.maxLength" })) : null }), _jsx(TextField, { multiline: true, className: classes.description, placeholder: `${intl.formatMessage(messages.description)}`, margin: "normal", value: field.description, name: "description", onChange: handleChange, InputProps: {
+                                endAdornment: (_jsx(Typography, Object.assign({ variant: "body2" }, { children: ((_e = field.description) === null || _e === void 0 ? void 0 : _e.length) ? GROUP_DESCRIPTION_MAX_LENGTH - field.description.length : GROUP_DESCRIPTION_MAX_LENGTH })))
+                            }, error: Boolean(((_f = field.description) === null || _f === void 0 ? void 0 : _f.length) > GROUP_DESCRIPTION_MAX_LENGTH), helperText: ((_g = field.description) === null || _g === void 0 ? void 0 : _g.length) > GROUP_DESCRIPTION_MAX_LENGTH ? (_jsx(FormattedMessage, { id: "ui.groupForm.description.error.maxLength", defaultMessage: "ui.groupForm.description.error.maxLength" })) : null }), privateEnabled && (_jsxs(Box, Object.assign({ className: classes.privacySection }, { children: [_jsx(Typography, Object.assign({ variant: "h4" }, { children: _jsx(FormattedMessage, { id: "ui.groupForm.privacy.title", defaultMessage: "ui.groupForm.privacy.title", values: {
                                             // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
                                             // @ts-ignore
                                             b: (chunks) => _jsx("strong", { children: chunks })
@@ -253,5 +282,5 @@ export default function GroupForm(inProps) {
                                                 // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
                                                 // @ts-ignore
                                                 b: (chunks) => _jsx("strong", { children: chunks })
-                                            } })) }))] })) })))] })), !group && (_jsxs(_Fragment, { children: [_jsx(Divider, {}), _jsx(Box, Object.assign({ className: classes.inviteSection }, { children: _jsx(GroupInviteButton, { handleInvitations: handleInviteSection }) }))] }))] }) })));
+                                            } })) }))] })) })))] })), isPaymentsEnabled && isStaff && (_jsx(Box, Object.assign({ className: classes.paywallsConfiguratorWrap }, { children: _jsx(PaywallsConfigurator, Object.assign({}, (group && { contentId: group.id }), { contentType: SCContentType.GROUP, onChangeContentAccessType: handleChangeContentAccessType, onChangePaymentProducts: handleChangePaymentsProducts })) }))), !group && (_jsxs(_Fragment, { children: [_jsx(Divider, {}), _jsx(Box, Object.assign({ className: classes.inviteSection }, { children: _jsx(GroupInviteButton, { handleInvitations: handleInviteSection }) }))] }))] }) })));
 }