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

package/lib/esm/components/EventSubscribeButton/EventSubscribeButton.js

@@ -3,8 +3,8 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { LoadingButton } from '@mui/lab';
 import { Box, Button, Checkbox, CircularProgress, FormControlLabel, Icon, Menu, MenuItem, SwipeableDrawer, useMediaQuery, useTheme, styled } from '@mui/material';
 import { useThemeProps } from '@mui/system';
-import { useSCContext, useSCFetchEvent, useSCUser } from '@selfcommunity/react-core';
-import { SCEventPrivacyType, SCEventSubscriptionStatusType } from '@selfcommunity/types';
+import { useSCContext, useSCFetchEvent, useSCPaymentsEnabled, useSCUser } from '@selfcommunity/react-core';
+import { SCContentType, SCEventPrivacyType, SCEventSubscriptionStatusType } from '@selfcommunity/types';
 import { CacheStrategies, Logger } from '@selfcommunity/utils';
 import classNames from 'classnames';
 import PubSub from 'pubsub-js';
@@ -12,6 +12,7 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { SCOPE_SC_UI } from '../../constants/Errors';
 import { SCGroupEventType, SCTopicType } from '../../constants/PubSub';
+import BuyButton from '../BuyButton';
 const PREFIX = 'SCEventSubscribeButton';
 const classes = {
     requestRoot: `${PREFIX}-request-root`,
@@ -45,6 +46,10 @@ const SwipeableDrawerRoot = styled(SwipeableDrawer, {
     name: PREFIX,
     slot: 'DrawerRoot'
 })(() => ({}));
+const BuyButtonRoot = styled(BuyButton, {
+    name: PREFIX,
+    slot: 'BuyButtonRoot'
+})(() => ({}));
 const MenuRoot = styled(Menu, {
     name: PREFIX,
     slot: 'MenuRoot'
@@ -72,7 +77,7 @@ const MenuRoot = styled(Menu, {
  * @param inProps
  */
 export default function EventSubscribeButton(inProps) {
-    var _a;
+    var _a, _b;
     // PROPS
     const props = useThemeProps({
         props: inProps,
@@ -90,6 +95,8 @@ export default function EventSubscribeButton(inProps) {
     const scEventsManager = scUserContext.managers.events;
     const theme = useTheme();
     const isMobile = useMediaQuery(theme.breakpoints.down('md'));
+    // PAYMENTS
+    const { isPaymentsEnabled } = useSCPaymentsEnabled();
     // CONST
     const authUserId = scUserContext.user ? scUserContext.user.id : null;
     const { scEvent, setSCEvent } = useSCFetchEvent({
@@ -116,10 +123,11 @@ export default function EventSubscribeButton(inProps) {
     }, [authUserId, scEventsManager === null || scEventsManager === void 0 ? void 0 : scEventsManager.subscriptionStatus, scEvent]);
     const toggleEventAttendance = useCallback((eventStatus) => {
         setLoading(true);
+        const _event = Object.assign(Object.assign({}, scEvent), { subscription_status: status });
         const isGoing = eventStatus === SCEventSubscriptionStatusType.GOING ||
-            !(scEvent === null || scEvent === void 0 ? void 0 : scEvent.subscription_status) ||
-            (scEvent === null || scEvent === void 0 ? void 0 : scEvent.subscription_status) === SCEventSubscriptionStatusType.INVITED;
-        const toggleAction = isGoing ? scEventsManager.toggleEventAttendance(scEvent) : scEventsManager.toggleEventNonattendance(scEvent);
+            !(_event === null || _event === void 0 ? void 0 : _event.subscription_status) ||
+            (_event === null || _event === void 0 ? void 0 : _event.subscription_status) === SCEventSubscriptionStatusType.INVITED;
+        const toggleAction = isGoing ? scEventsManager.toggleEventAttendance(_event) : scEventsManager.toggleEventNonattendance(_event);
         toggleAction
             .then((data) => {
             onSubscribe ? onSubscribe(data) : setSCEvent(data);
@@ -129,7 +137,7 @@ export default function EventSubscribeButton(inProps) {
             .catch((e) => {
             Logger.error(SCOPE_SC_UI, e);
         });
-    }, [scEvent, scEventsManager, onSubscribe, setLoading]);
+    }, [scEvent, scEventsManager, status, onSubscribe, setLoading]);
     const handleToggleAction = useCallback((event) => {
         setAnchorEl(null);
         if (!scUserContext.user) {
@@ -171,6 +179,9 @@ export default function EventSubscribeButton(inProps) {
     if (!scEvent || (isEventAdmin && (user === null || user === void 0 ? void 0 : user.id) === scUserContext.user.id) || (isEventAdmin && !(user === null || user === void 0 ? void 0 : user.id))) {
         return null;
     }
-    return (_jsx(_Fragment, { children: (scEvent === null || scEvent === void 0 ? void 0 : scEvent.privacy) === SCEventPrivacyType.PRIVATE && (!status || status === SCEventSubscriptionStatusType.REQUESTED) ? (_jsx(RequestRoot, Object.assign({ className: classNames(classes.requestRoot, className), variant: "outlined", size: "small", loading: scUserContext.user ? scEventsManager.isLoading(scEvent) : null, onClick: handleToggleAction }, rest, { children: getStatus }))) : (_jsxs(_Fragment, { children: [_jsx(SelectRoot, Object.assign({ className: classNames(classes.selectRoot, className, { [classes.going]: status && status === SCEventSubscriptionStatusType.GOING }, { [classes.notGoing]: status && status === SCEventSubscriptionStatusType.NOT_GOING }), onClick: handleOpen, endIcon: _jsx(Icon, { children: open ? 'expand_less' : 'expand_more' }), startIcon: status &&
-                        status !== SCEventSubscriptionStatusType.SUBSCRIBED && (_jsx(Icon, { children: status === SCEventSubscriptionStatusType.GOING ? 'circle_checked' : 'circle_closed' })) }, rest, { children: getStatus })), open && (_jsx(_Fragment, { children: isMobile ? (_jsx(SwipeableDrawerRoot, Object.assign({ className: classes.drawerRoot, PaperProps: { className: classes.paper }, open: true, onClose: handleClose, onOpen: handleOpen, anchor: "bottom", disableSwipeToOpen: true }, { children: renderMenuItems() }))) : (_jsx(MenuRoot, Object.assign({ className: classes.menuRoot, anchorEl: anchorEl, open: true, onClose: handleClose }, { children: renderMenuItems() }))) }))] })) }));
+    return (_jsx(_Fragment, { children: isPaymentsEnabled &&
+            ((_b = scEvent.paywalls) === null || _b === void 0 ? void 0 : _b.length) > 0 &&
+            (scEvent.privacy === SCEventPrivacyType.PUBLIC ||
+                (scEvent.privacy === SCEventPrivacyType.PRIVATE && status && status !== SCEventSubscriptionStatusType.REQUESTED)) ? (_jsx(BuyButtonRoot, { contentType: SCContentType.EVENT, content: scEvent, showTicket: true })) : (_jsx(_Fragment, { children: (scEvent === null || scEvent === void 0 ? void 0 : scEvent.privacy) === SCEventPrivacyType.PRIVATE && (!status || status === SCEventSubscriptionStatusType.REQUESTED) ? (_jsx(RequestRoot, Object.assign({ className: classNames(classes.requestRoot, className), variant: "outlined", size: "small", loading: scUserContext.user ? scEventsManager.isLoading(scEvent) : null, onClick: handleToggleAction }, rest, { children: getStatus }))) : (_jsxs(_Fragment, { children: [_jsx(SelectRoot, Object.assign({ className: classNames(classes.selectRoot, className, { [classes.going]: status && status === SCEventSubscriptionStatusType.GOING }, { [classes.notGoing]: status && status === SCEventSubscriptionStatusType.NOT_GOING }), onClick: handleOpen, endIcon: _jsx(Icon, { children: open ? 'expand_less' : 'expand_more' }), startIcon: status &&
+                            status !== SCEventSubscriptionStatusType.SUBSCRIBED && (_jsx(Icon, { children: status === SCEventSubscriptionStatusType.GOING ? 'circle_checked' : 'circle_closed' })) }, rest, { children: getStatus })), open && (_jsx(_Fragment, { children: isMobile ? (_jsx(SwipeableDrawerRoot, Object.assign({ className: classes.drawerRoot, PaperProps: { className: classes.paper }, open: true, onClose: handleClose, onOpen: handleOpen, anchor: "bottom", disableSwipeToOpen: true }, { children: renderMenuItems() }))) : (_jsx(MenuRoot, Object.assign({ className: classes.menuRoot, anchorEl: anchorEl, open: true, onClose: handleClose }, { children: renderMenuItems() }))) }))] })) })) }));
 }

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

@@ -9,11 +9,11 @@ import { StickyBoxProps } from '../../shared/StickyBox';
 /**
  * FeedSidebarProps has the same props as StickyBoxProps type
  */
-export type FeedSidebarProps = StickyBoxProps;
+export declare type FeedSidebarProps = StickyBoxProps;
 /**
  * FeedRef props
  */
-export type FeedRef = {
+export declare type FeedRef = {
     addFeedData: (obj: any, syncPagination?: boolean) => void;
     refresh: () => void;
     getCurrentFeedObjectIds: () => number[];

package/lib/esm/components/Feed/Skeleton.d.ts

@@ -11,7 +11,7 @@ interface FeedSkeletonMap {
      */
     className?: string;
 }
-export type FeedSkeletonProps = React.PropsWithChildren<FeedSkeletonMap>;
+export declare type FeedSkeletonProps = React.PropsWithChildren<FeedSkeletonMap>;
 /**
  * > API documentation for the Community-JS Feed Skeleton component. Learn about the available props and the CSS API.
 

package/lib/esm/components/FeedObject/Activities/Activities.d.ts

@@ -6,7 +6,7 @@ import { CacheStrategies } from '@selfcommunity/utils';
 export interface ActivitiesProps {
     /**
      * Id of the FeedObjectActivities
-     * @default `feed_object_activities_<feedObjectId | feedObject.id>`
+     * @default `feed_object_activities_feedObjectId`
      */
     id?: string;
     /**

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

@@ -89,5 +89,5 @@ export default function Activities(props) {
             (Boolean(commentsObject.feedObject.comment_count) ||
                 (feedObjectActivities && feedObjectActivities.length > 0) ||
                 comments.length > 0 ||
-                (feedObject && feedObject.comment_count > 0)) ? (_jsxs(Box, Object.assign({ className: classes.activities }, (existFeedObjectActivities ? {} : { style: { minHeight: `${Math.min(skeletonsCount, feedObject.comment_count) * 80}px` } }), { children: [_jsx(ActivitiesMenu, { selectedActivities: selectedActivities, hideRelevantActivitiesItem: !existFeedObjectActivities, onChange: handleSelectActivitiesType }), selectedActivities === SCFeedObjectActivitiesType.RELEVANCE_ACTIVITIES ? renderRelevantActivities() : renderComments()] }))) : null })));
+                (feedObject && feedObject.comment_count > 0)) ? (_jsxs(Box, Object.assign({ className: classes.activities }, (existFeedObjectActivities ? {} : { style: { minHeight: `${Math.min(skeletonsCount, feedObject === null || feedObject === void 0 ? void 0 : feedObject.comment_count) * 80}px` } }), { children: [_jsx(ActivitiesMenu, { selectedActivities: selectedActivities, hideRelevantActivitiesItem: !existFeedObjectActivities, onChange: handleSelectActivitiesType }), selectedActivities === SCFeedObjectActivitiesType.RELEVANCE_ACTIVITIES ? renderRelevantActivities() : renderComments()] }))) : null })));
 }

package/lib/esm/components/FeedObject/Activities/ActivitiesMenu/ActivitiesMenu.js

@@ -49,6 +49,7 @@ export default function ActivitiesMenu(props) {
     const theme = useTheme();
     const isMobile = useMediaQuery(theme.breakpoints.down('md'));
     const followEnabled = scPreferencesContext.preferences[SCPreferences.CONFIGURATIONS_FOLLOW_ENABLED].value;
+    const connectionEnabled = scPreferencesContext.preferences[SCPreferences.CONFIGURATIONS_CONNECTION_ENABLED].value;
     const [anchorEl, setAnchorEl] = React.useState(null);
     const open = Boolean(anchorEl);
     // INTL
@@ -66,7 +67,7 @@ export default function ActivitiesMenu(props) {
         };
     };
     function renderMenuContent() {
-        return (_jsxs(Box, { children: [!hideRelevantActivitiesItem && (_jsx(ListItemButton, Object.assign({ selected: selectedActivities === SCFeedObjectActivitiesType.RELEVANCE_ACTIVITIES, onClick: handleChangeActivitiesType(SCFeedObjectActivitiesType.RELEVANCE_ACTIVITIES) }, { children: _jsx(ListItemText, { primary: _jsx("b", { children: intl.formatMessage(messages.relevantActivities) }), secondary: _jsx(FormattedMessage, { id: 'ui.feedObject.activitiesMenu.relevantActivitiesDesc', defaultMessage: 'ui.feedObject.activitiesMenu.relevantActivitiesDesc' }) }) }))), _jsx(ListItemButton, Object.assign({ selected: selectedActivities === SCFeedObjectActivitiesType.RECENT_COMMENTS, onClick: handleChangeActivitiesType(SCFeedObjectActivitiesType.RECENT_COMMENTS) }, { children: _jsx(ListItemText, { primary: _jsx("b", { children: intl.formatMessage(messages.recentComments) }), secondary: _jsx(FormattedMessage, { id: 'ui.feedObject.activitiesMenu.recentCommentsDesc', defaultMessage: 'ui.feedObject.activitiesMenu.recentCommentsDesc' }) }) })), _jsx(ListItemButton, Object.assign({ selected: selectedActivities === SCFeedObjectActivitiesType.FIRST_COMMENTS, onClick: handleChangeActivitiesType(SCFeedObjectActivitiesType.FIRST_COMMENTS) }, { children: _jsx(ListItemText, { primary: _jsx("b", { children: intl.formatMessage(messages.firstComments) }), secondary: _jsx(FormattedMessage, { id: 'ui.feedObject.activitiesMenu.firstCommentsDesc', defaultMessage: 'ui.feedObject.activitiesMenu.firstCommentsDesc' }) }) })), scUserContext.user && (_jsx(ListItemButton, Object.assign({ selected: selectedActivities === SCFeedObjectActivitiesType.CONNECTIONS_COMMENTS, onClick: handleChangeActivitiesType(SCFeedObjectActivitiesType.CONNECTIONS_COMMENTS) }, { children: _jsx(ListItemText, { primary: _jsx("b", { children: followEnabled ? intl.formatMessage(messages.followedComments) : intl.formatMessage(messages.connectionsComments) }), secondary: followEnabled ? (_jsx(FormattedMessage, { id: 'ui.feedObject.activitiesMenu.followedCommentsDesc', defaultMessage: 'ui.feedObject.activitiesMenu.followedCommentsDesc' })) : (_jsx(FormattedMessage, { id: 'ui.feedObject.activitiesMenu.connectionsCommentsDesc', defaultMessage: 'ui.feedObject.activitiesMenu.connectionsCommentsDesc' })) }) })))] }));
+        return (_jsxs(Box, { children: [!hideRelevantActivitiesItem && (_jsx(ListItemButton, Object.assign({ selected: selectedActivities === SCFeedObjectActivitiesType.RELEVANCE_ACTIVITIES, onClick: handleChangeActivitiesType(SCFeedObjectActivitiesType.RELEVANCE_ACTIVITIES) }, { children: _jsx(ListItemText, { primary: _jsx("b", { children: intl.formatMessage(messages.relevantActivities) }), secondary: _jsx(FormattedMessage, { id: 'ui.feedObject.activitiesMenu.relevantActivitiesDesc', defaultMessage: 'ui.feedObject.activitiesMenu.relevantActivitiesDesc' }) }) }))), _jsx(ListItemButton, Object.assign({ selected: selectedActivities === SCFeedObjectActivitiesType.RECENT_COMMENTS, onClick: handleChangeActivitiesType(SCFeedObjectActivitiesType.RECENT_COMMENTS) }, { children: _jsx(ListItemText, { primary: _jsx("b", { children: intl.formatMessage(messages.recentComments) }), secondary: _jsx(FormattedMessage, { id: 'ui.feedObject.activitiesMenu.recentCommentsDesc', defaultMessage: 'ui.feedObject.activitiesMenu.recentCommentsDesc' }) }) })), _jsx(ListItemButton, Object.assign({ selected: selectedActivities === SCFeedObjectActivitiesType.FIRST_COMMENTS, onClick: handleChangeActivitiesType(SCFeedObjectActivitiesType.FIRST_COMMENTS) }, { children: _jsx(ListItemText, { primary: _jsx("b", { children: intl.formatMessage(messages.firstComments) }), secondary: _jsx(FormattedMessage, { id: 'ui.feedObject.activitiesMenu.firstCommentsDesc', defaultMessage: 'ui.feedObject.activitiesMenu.firstCommentsDesc' }) }) })), scUserContext.user && (_jsx(ListItemButton, Object.assign({ selected: selectedActivities === SCFeedObjectActivitiesType.CONNECTIONS_COMMENTS, onClick: handleChangeActivitiesType(SCFeedObjectActivitiesType.CONNECTIONS_COMMENTS) }, { children: (followEnabled || connectionEnabled) && (_jsx(ListItemText, { primary: _jsx("b", { children: followEnabled ? intl.formatMessage(messages.followedComments) : intl.formatMessage(messages.connectionsComments) }), secondary: followEnabled ? (_jsx(FormattedMessage, { id: 'ui.feedObject.activitiesMenu.followedCommentsDesc', defaultMessage: 'ui.feedObject.activitiesMenu.followedCommentsDesc' })) : (_jsx(FormattedMessage, { id: 'ui.feedObject.activitiesMenu.connectionsCommentsDesc', defaultMessage: 'ui.feedObject.activitiesMenu.connectionsCommentsDesc' })) })) })))] }));
     }
     /**
      * Renders root object

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

@@ -16,7 +16,7 @@ import { FeedObjectMediaPreviewProps } from '../FeedObjectMediaPreview';
 export interface FeedObjectProps extends CardProps, VirtualScrollerItemProps {
     /**
      * Id of the feedObject
-     * @default `feed_object_<feedObjectType>_<feedObjectId | feedObject.id>`
+     * @default `feed_object_feedObjectType_feedObjectId`
      */
     id?: string;
     /**

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

@@ -27,7 +27,7 @@ import { SCContributionType } from '@selfcommunity/types';
 import { Endpoints, http } from '@selfcommunity/api-services';
 import { CacheStrategies, Logger, LRUCache } from '@selfcommunity/utils';
 import { catchUnauthorizedActionByBlockedUser } from '../../utils/errors';
-import { Link, SCCache, SCRoutes, UserUtils, useSCContext, useSCFetchFeedObject, useSCRouting, useSCUser } from '@selfcommunity/react-core';
+import { Link, SCCache, SCPreferences, SCRoutes, UserUtils, useSCContext, useSCFetchFeedObject, useSCPreferences, useSCRouting, useSCUser } from '@selfcommunity/react-core';
 import UserDeletedSnackBar from '../../shared/UserDeletedSnackBar';
 import UserAvatar from '../../shared/UserAvatar';
 import { MAX_SUMMARY_LENGTH } from '../../constants/Feed';
@@ -35,6 +35,7 @@ import Composer from '../Composer';
 import FeedObjectMediaPreview from '../FeedObjectMediaPreview';
 import { PREFIX } from './constants';
 import { MEDIA_EMBED_SC_SHARED_EVENT } from '../../constants/Media';
+import Vote from './Actions/Vote';
 const messages = defineMessages({
     visibleToAll: {
         id: 'ui.feedObject.visibleToAll',
@@ -73,7 +74,8 @@ const classes = {
     replyContent: `${PREFIX}-reply-content`,
     activitiesSection: `${PREFIX}-activities-section`,
     activitiesContent: `${PREFIX}-activities-content`,
-    followButton: `${PREFIX}-follow-button`
+    followButton: `${PREFIX}-follow-button`,
+    vote: `${PREFIX}-vote`
 };
 const Root = styled(Widget, {
     name: PREFIX,
@@ -132,7 +134,7 @@ const Root = styled(Widget, {
  * @param inProps
  */
 export default function FeedObject(inProps) {
-    var _a, _b, _c, _d, _f, _g, _h;
+    var _a, _b, _c, _d, _f, _g, _h, _j;
     // PROPS
     const props = useThemeProps({
         props: inProps,
@@ -144,6 +146,9 @@ export default function FeedObject(inProps) {
     const scRoutingContext = useSCRouting();
     const scUserContext = useSCUser();
     const { enqueueSnackbar } = useSnackbar();
+    const { preferences } = useSCPreferences();
+    const allShareEnabled = SCPreferences.ADDONS_SHARE_POST_ENABLED in preferences && preferences[SCPreferences.ADDONS_SHARE_POST_ENABLED].value;
+    const commentsEnabled = SCPreferences.CONFIGURATIONS_COMMENTS_ENABLED in preferences && preferences[SCPreferences.CONFIGURATIONS_COMMENTS_ENABLED].value;
     // OBJECTS
     const { obj, setObj, error } = useSCFetchFeedObject({ id: feedObjectId, feedObject, feedObjectType, cacheStrategy });
     const objId = obj ? obj.id : null;
@@ -163,6 +168,7 @@ export default function FeedObject(inProps) {
     const [expanded, setExpanded] = useState(summaryExpanded);
     const hasEvent = useMemo(() => { var _a; return (obj === null || obj === void 0 ? void 0 : obj.medias.length) > 0 && ((_a = obj.medias[0].embed) === null || _a === void 0 ? void 0 : _a.embed_type) === MEDIA_EMBED_SC_SHARED_EVENT; }, [obj === null || obj === void 0 ? void 0 : obj.medias]);
     const _hideFollowAction = useMemo(() => { var _a, _b, _c, _d; return hideFollowAction || (hasEvent && ((_d = (_c = (_b = (_a = obj === null || obj === void 0 ? void 0 : obj.medias) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.embed) === null || _c === void 0 ? void 0 : _c.metadata) === null || _d === void 0 ? void 0 : _d.active) === false); }, [hideFollowAction, hasEvent, obj]);
+    const visibleTags = ((_a = obj.addressing) !== null && _a !== void 0 ? _a : []).filter((tag) => tag.visible);
     // INTL
     const intl = useIntl();
     /**
@@ -234,7 +240,7 @@ export default function FeedObject(inProps) {
     /**
      * Handle flag obj
      */
-    const handleFlag = useCallback((obj, type, flagged) => {
+    const handleFlag = useCallback((_obj, _type, flagged) => {
         enqueueSnackbar(flagged ? (_jsx(FormattedMessage, { id: "ui.feedObject.flagSent", defaultMessage: "ui.feedObject.flagSent" })) : (_jsx(FormattedMessage, { id: "ui.feedObject.flagRemoved", defaultMessage: "ui.feedObject.flagRemoved" })), {
             autoHideDuration: 3000
         });
@@ -426,9 +432,13 @@ export default function FeedObject(inProps) {
     else if (template === SCFeedObjectTemplateType.PREVIEW ||
         template === SCFeedObjectTemplateType.DETAIL ||
         template === SCFeedObjectTemplateType.SEARCH) {
-        objElement = (_jsx(React.Fragment, { children: obj ? (_jsxs(Box, Object.assign({ className: classNames({ [classes.deleted]: obj && obj.deleted }) }, { children: [obj.categories.length > 0 && (_jsxs("div", Object.assign({ className: classes.category }, { children: [_jsxs(_Fragment, { children: [obj.group && (_jsx(Chip, { className: classes.group, color: "secondary", size: "small", icon: _jsx(Icon, { children: "groups" }), component: Link, to: scRoutingContext.url(SCRoutes.GROUP_ROUTE_NAME, obj.group), clickable: true }, obj.group.id)), obj.event && (_jsx(Chip, { className: classes.event, color: "secondary", size: "small", label: obj.event.name, icon: _jsx(Icon, { children: "CalendarIcon" }), component: Link, to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, obj.event), clickable: true }, obj.event.id))] }), obj.categories.map((c) => (_jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.CATEGORY_ROUTE_NAME, c) }, { children: _jsx(Typography, Object.assign({ variant: "overline" }, { children: c.name })) }), c.id)))] }))), obj.group && !obj.categories.length && (_jsx("div", Object.assign({ className: classes.group }, { children: _jsx(Chip, { color: "secondary", size: "small", icon: _jsx(Icon, { children: "groups" }), label: obj.group.name, component: Link, to: scRoutingContext.url(SCRoutes.GROUP_ROUTE_NAME, obj.group), clickable: true }, obj.group.id) }))), obj.event && !obj.categories.length && (_jsx(Chip, { className: classes.event, color: "secondary", size: "small", icon: _jsx(Icon, { children: "CalendarIcon" }), label: obj.event.name, component: Link, to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, obj.event), clickable: true }, obj.event.id)), _jsx(CardHeader, { className: classes.header, avatar: _jsx(Link, Object.assign({}, (!obj.author.deleted && { to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, obj.author) }), { onClick: obj.author.deleted ? () => setOpenAlert(true) : null }, { children: _jsx(UserAvatar, Object.assign({ hide: !obj.author.community_badge }, { children: _jsx(Avatar, Object.assign({ "aria-label": "recipe", src: obj.author.avatar, className: classes.avatar }, { children: obj.author.username })) })) })), title: _jsx(Link, Object.assign({}, (!obj.author.deleted && { to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, obj.author) }), { onClick: obj.author.deleted ? () => setOpenAlert(true) : null, className: classes.username }, { children: obj.author.username })), subheader: _jsxs(_Fragment, { children: [_jsx(Link, Object.assign({ to: scRoutingContext.url(getContributionRouteName(obj), getRouteData(obj)), className: classes.activityAt }, { children: _jsx(DateTimeAgo, { component: 'span', date: obj.added_at }) })), obj.location && (_jsxs(_Fragment, { children: [_jsx(Bullet, {}), _jsxs(Box, Object.assign({ className: classes.location }, { children: [_jsx(Icon, { children: "add_location_alt" }), (_a = obj.location) === null || _a === void 0 ? void 0 : _a.location] }))] })), _jsx(Bullet, {}), _jsx(Box, Object.assign({ className: classes.tag }, { children: obj.addressing.length > 0 ? (_jsx(Tags, { tags: obj.addressing, TagChipProps: { disposable: false, clickable: false } })) : obj.group ? (_jsx(Tooltip, Object.assign({ title: `${intl.formatMessage(messages.visibleToGroup, { group: obj.group.name })}` }, { children: _jsx(Icon, Object.assign({ color: "disabled", fontSize: "small" }, { children: "groups" })) }))) : (_jsx(Tooltip, Object.assign({ title: `${intl.formatMessage(messages.visibleToAll)}` }, { children: _jsx(Icon, Object.assign({ color: "disabled", fontSize: "small" }, { children: "public" })) }))) }))] }), action: renderHeaderAction() }), _jsxs(CardContent, Object.assign({ classes: { root: classes.content } }, { children: [_jsx(Box, Object.assign({ className: classes.titleSection }, { children: 'title' in obj && (_jsx(_Fragment, { children: template === SCFeedObjectTemplateType.DETAIL ? (_jsx(Typography, Object.assign({ variant: "body1", gutterBottom: true, className: classes.title }, { children: obj.title }))) : (_jsx(Link, Object.assign({ to: scRoutingContext.url(getContributionRouteName(obj), getRouteData(obj)) }, { children: _jsx(Typography, Object.assign({ variant: "body1", gutterBottom: true, className: classes.title }, { children: obj.title })) }))) })) })), _jsx(Box, Object.assign({ className: classes.textSection }, { children: getContributionSummary(obj, template) })), _jsx(Box, Object.assign({ className: classes.mediasSection }, { children: _jsx(FeedObjectMediaPreview, Object.assign({ medias: obj.medias }, FeedObjectMediaPreviewProps)) })), _jsx(Box, Object.assign({ className: classes.pollsSection }, { children: obj['poll'] && (_jsx(PollObject, Object.assign({ visible: pollVisible ||
+        objElement = (_jsx(React.Fragment, { children: obj ? (_jsxs(Box, Object.assign({ className: classNames({ [classes.deleted]: obj && obj.deleted }) }, { children: [obj.categories.length > 0 && (_jsxs("div", Object.assign({ className: classes.category }, { children: [_jsxs(_Fragment, { children: [obj.group && (_jsx(Chip, { className: classes.group, color: "secondary", size: "small", icon: _jsx(Icon, { children: "groups" }), component: Link, to: scRoutingContext.url(SCRoutes.GROUP_ROUTE_NAME, obj.group), clickable: true }, obj.group.id)), obj.event && (_jsx(Chip, { className: classes.event, color: "secondary", size: "small", label: obj.event.name, icon: _jsx(Icon, { children: "CalendarIcon" }), component: Link, to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, obj.event), clickable: true }, obj.event.id))] }), obj.categories.map((c) => (_jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.CATEGORY_ROUTE_NAME, c) }, { children: _jsx(Typography, Object.assign({ variant: "overline" }, { children: c.name })) }), c.id)))] }))), obj.group && !obj.categories.length && (_jsx("div", Object.assign({ className: classes.group }, { children: _jsx(Chip, { color: "secondary", size: "small", icon: _jsx(Icon, { children: "groups" }), label: obj.group.name, component: Link, to: scRoutingContext.url(SCRoutes.GROUP_ROUTE_NAME, obj.group), clickable: true }, obj.group.id) }))), obj.event && !obj.categories.length && (_jsx(Chip, { className: classes.event, color: "secondary", size: "small", icon: _jsx(Icon, { children: "CalendarIcon" }), label: obj.event.name, component: Link, to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, obj.event), clickable: true }, obj.event.id)), _jsx(CardHeader, { className: classes.header, avatar: _jsx(Link, Object.assign({}, (!obj.author.deleted && { to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, obj.author) }), { onClick: obj.author.deleted ? () => setOpenAlert(true) : null }, { children: _jsx(UserAvatar, Object.assign({ hide: !obj.author.community_badge }, { children: _jsx(Avatar, Object.assign({ "aria-label": "recipe", src: obj.author.avatar, className: classes.avatar }, { children: obj.author.username })) })) })), title: _jsx(Link, Object.assign({}, (!obj.author.deleted && { to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, obj.author) }), { onClick: obj.author.deleted ? () => setOpenAlert(true) : null, className: classes.username }, { children: obj.author.username })), subheader: _jsxs(_Fragment, { children: [_jsx(Link, Object.assign({ to: scRoutingContext.url(getContributionRouteName(obj), getRouteData(obj)), className: classes.activityAt }, { children: _jsx(DateTimeAgo, { component: 'span', date: obj.added_at }) })), obj.location && (_jsxs(_Fragment, { children: [_jsx(Bullet, {}), _jsxs(Box, Object.assign({ className: classes.location }, { children: [_jsx(Icon, { children: "add_location_alt" }), (_b = obj.location) === null || _b === void 0 ? void 0 : _b.location] }))] })), visibleTags.length > 0 || (obj.group && _jsx(Bullet, {})), _jsx(Box, Object.assign({ className: classes.tag }, { children: obj.addressing.length > 0 ? (_jsx(Tags, { tags: obj.addressing, TagChipProps: { disposable: false, clickable: false } })) : obj.group ? (_jsx(Tooltip, Object.assign({ title: `${intl.formatMessage(messages.visibleToGroup, { group: obj.group.name })}` }, { children: _jsx(Icon, Object.assign({ color: "disabled", fontSize: "small" }, { children: "groups" })) }))) : (_jsxs(_Fragment, { children: [_jsx(Bullet, {}), _jsx(Tooltip, Object.assign({ title: `${intl.formatMessage(messages.visibleToAll)}` }, { children: _jsx(Icon, Object.assign({ color: "disabled", fontSize: "small" }, { children: "public" })) }))] })) }))] }), action: renderHeaderAction() }), _jsxs(CardContent, Object.assign({ classes: { root: classes.content } }, { children: [_jsx(Box, Object.assign({ className: classes.titleSection }, { children: 'title' in obj && (_jsx(_Fragment, { children: template === SCFeedObjectTemplateType.DETAIL ? (_jsx(Typography, Object.assign({ variant: "body1", gutterBottom: true, className: classes.title }, { children: obj.title }))) : (_jsx(Link, Object.assign({ to: scRoutingContext.url(getContributionRouteName(obj), getRouteData(obj)) }, { children: _jsx(Typography, Object.assign({ variant: "body1", gutterBottom: true, className: classes.title }, { children: obj.title })) }))) })) })), _jsx(Box, Object.assign({ className: classes.textSection }, { children: getContributionSummary(obj, template) })), _jsx(Box, Object.assign({ className: classes.mediasSection }, { children: _jsx(FeedObjectMediaPreview, Object.assign({ medias: obj.medias }, FeedObjectMediaPreviewProps)) })), _jsx(Box, Object.assign({ className: classes.pollsSection }, { children: obj['poll'] && (_jsx(PollObject, Object.assign({ visible: pollVisible ||
                                         template === SCFeedObjectTemplateType.DETAIL ||
-                                        Boolean(obj.type !== SCContributionType.DISCUSSION && !obj.html && !obj.medias.length), feedObject: obj, pollObject: obj['poll'], onChange: handleChangePoll, onToggleVisibility: handleTogglePollVisibility }, PollObjectProps))) })), _jsx(Box, Object.assign({ className: classes.infoSection }, { children: _jsxs(Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 }, { children: [!hideParticipantsPreview && (_jsx(ContributorsFeedObject, Object.assign({ feedObject: obj, feedObjectType: obj.type }, ContributorsFeedObjectProps, { cacheStrategy: cacheStrategy }))), !_hideFollowAction && _jsx(Follow, Object.assign({ feedObject: obj, feedObjectType: obj.type, handleFollow: handleFollow }, FollowButtonProps))] })) }))] })), _jsxs(CardActions, Object.assign({ className: classes.actionsSection }, { children: [_jsx(Actions, Object.assign({ feedObjectId: feedObjectId, feedObjectType: feedObjectType, feedObject: obj, hideCommentAction: template === SCFeedObjectTemplateType.DETAIL || (hasEvent && !((_c = (_b = obj === null || obj === void 0 ? void 0 : obj.medias[0].embed) === null || _b === void 0 ? void 0 : _b.metadata) === null || _c === void 0 ? void 0 : _c.active)), handleExpandActivities: template === SCFeedObjectTemplateType.PREVIEW ? handleExpandActivities : null, VoteActionProps: { onVoteAction: handleVoteSuccess } }, ActionsProps)), ((template === SCFeedObjectTemplateType.DETAIL && (!hasEvent || ((_h = (_g = (_f = (_d = obj === null || obj === void 0 ? void 0 : obj.medias) === null || _d === void 0 ? void 0 : _d[0]) === null || _f === void 0 ? void 0 : _f.embed) === null || _g === void 0 ? void 0 : _g.metadata) === null || _h === void 0 ? void 0 : _h.active))) || expandedActivities) && (_jsx(Box, Object.assign({ className: classes.replyContent }, { children: _jsx(CommentObjectReplyComponent, Object.assign({ id: `reply-feedObject-${obj.id}`, onReply: handleReply, editable: !isReplying || Boolean(obj) }, CommentObjectReplyComponentProps), Number(isReplying)) })))] })), template === SCFeedObjectTemplateType.PREVIEW && (obj.comment_count > 0 || (feedObjectActivities && feedObjectActivities.length > 0)) && (_jsx(Collapse, Object.assign({ in: expandedActivities, timeout: "auto", classes: { root: classes.activitiesSection } }, { children: _jsx(CardContent, Object.assign({ className: classes.activitiesContent }, { children: _jsx(Activities, Object.assign({ feedObject: obj, feedObjectActivities: feedObjectActivities, activitiesType: selectedActivities, onSetSelectedActivities: handleSelectedActivities, comments: comments, CommentsObjectProps: {
+                                        Boolean(obj.type !== SCContributionType.DISCUSSION && !obj.html && !obj.medias.length), feedObject: obj, pollObject: obj['poll'], onChange: handleChangePoll, onToggleVisibility: handleTogglePollVisibility }, PollObjectProps))) })), !obj.draft && (_jsx(Box, Object.assign({ className: classes.infoSection }, { children: _jsxs(Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 }, { children: [!commentsEnabled && !allShareEnabled ? (_jsx(Vote, { feedObjectId: feedObjectId || (feedObject === null || feedObject === void 0 ? void 0 : feedObject.id), feedObjectType: feedObjectType, feedObject: obj, inlineAction: true, onVoteAction: handleVoteSuccess, className: classes.vote })) : (!hideParticipantsPreview && (_jsx(ContributorsFeedObject, Object.assign({ feedObject: obj, feedObjectType: obj.type }, ContributorsFeedObjectProps, { cacheStrategy: cacheStrategy })))), !_hideFollowAction && _jsx(Follow, Object.assign({ feedObject: obj, feedObjectType: obj.type, handleFollow: handleFollow }, FollowButtonProps))] })) })))] })), _jsxs(CardActions, Object.assign({ className: classes.actionsSection }, { children: [_jsx(Actions, Object.assign({ feedObjectId: feedObjectId, feedObjectType: feedObjectType, feedObject: obj, hideVoteAction: !allShareEnabled && !commentsEnabled, hideCommentAction: !commentsEnabled || template === SCFeedObjectTemplateType.DETAIL || (hasEvent && !((_d = (_c = obj === null || obj === void 0 ? void 0 : obj.medias[0].embed) === null || _c === void 0 ? void 0 : _c.metadata) === null || _d === void 0 ? void 0 : _d.active)), hideShareAction: !allShareEnabled, handleExpandActivities: template === SCFeedObjectTemplateType.PREVIEW ? handleExpandActivities : null, VoteActionProps: { onVoteAction: handleVoteSuccess } }, ActionsProps)), commentsEnabled &&
+                                ((template === SCFeedObjectTemplateType.DETAIL && (!hasEvent || ((_j = (_h = (_g = (_f = obj === null || obj === void 0 ? void 0 : obj.medias) === null || _f === void 0 ? void 0 : _f[0]) === null || _g === void 0 ? void 0 : _g.embed) === null || _h === void 0 ? void 0 : _h.metadata) === null || _j === void 0 ? void 0 : _j.active))) ||
+                                    expandedActivities) && (_jsx(Box, Object.assign({ className: classes.replyContent }, { children: _jsx(CommentObjectReplyComponent, Object.assign({ id: `reply-feedObject-${obj.id}`, onReply: handleReply, editable: !isReplying || Boolean(obj) }, CommentObjectReplyComponentProps), Number(isReplying)) })))] })), commentsEnabled &&
+                        template === SCFeedObjectTemplateType.PREVIEW &&
+                        (obj.comment_count > 0 || (feedObjectActivities && feedObjectActivities.length > 0)) && (_jsx(Collapse, Object.assign({ in: expandedActivities, timeout: "auto", classes: { root: classes.activitiesSection } }, { children: _jsx(CardContent, Object.assign({ className: classes.activitiesContent }, { children: _jsx(Activities, Object.assign({ feedObject: obj, feedObjectActivities: feedObjectActivities, activitiesType: selectedActivities, onSetSelectedActivities: handleSelectedActivities, comments: comments, CommentsObjectProps: {
                                     CommentComponentProps: Object.assign({ onDelete: handleDeleteComment, truncateContent: true, CommentsObjectComponentProps: { inPlaceLoadMoreContents: false } }, CommentComponentProps),
                                     CommentObjectSkeletonProps: CommentObjectSkeletonProps
                                 }, cacheStrategy: cacheStrategy }, ActivitiesProps), selectedActivities) })) }))), composerOpen && (_jsx(Composer, { open: composerOpen, feedObject: obj, onClose: handleToggleEdit, onSuccess: handleEditSuccess, maxWidth: "sm", fullWidth: true }))] }))) : (_jsx(FeedObjectSkeleton, Object.assign({ template: template }, FeedObjectSkeletonProps))) }));
@@ -437,7 +447,7 @@ export default function FeedObject(inProps) {
         objElement = (_jsx(React.Fragment, { children: obj ? (_jsxs(React.Fragment, { children: [obj.categories.length > 0 && (_jsxs("div", Object.assign({ className: classes.category }, { children: [_jsxs(_Fragment, { children: [obj.group && (_jsx("div", Object.assign({ className: classes.group }, { children: _jsx(Chip, { color: "secondary", size: "small", icon: _jsx(Icon, { children: "groups" }), component: Link, to: scRoutingContext.url(SCRoutes.GROUP_ROUTE_NAME, obj.group), clickable: true }, obj.group.id) }))), obj.event && (_jsx(Chip, { className: classes.event, color: "secondary", size: "small", icon: _jsx(Icon, { children: "CalendarIcon" }), component: Link, to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, obj.event), clickable: true }, obj.event.id))] }), obj.categories.map((c) => (_jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.CATEGORY_ROUTE_NAME, c) }, { children: _jsx(Typography, Object.assign({ variant: "overline" }, { children: c.name })) }), c.id)))] }))), obj.group && !obj.categories.length && (_jsx("div", Object.assign({ className: classes.group }, { children: _jsx(Chip, { color: "secondary", size: "small", icon: _jsx(Icon, { children: "groups" }), label: obj.group.name, component: Link, to: scRoutingContext.url(SCRoutes.GROUP_ROUTE_NAME, obj.group), clickable: true }, obj.group.id) }))), obj.event && !obj.categories.length && (_jsx("div", Object.assign({ className: classes.event }, { children: _jsx(Chip, { color: "secondary", size: "small", icon: _jsx(Icon, { children: "groups" }), label: obj.event.name, component: Link, to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, obj.event), clickable: true }, obj.event.id) }))), _jsx(CardHeader, { classes: { root: classes.header }, avatar: _jsx(Link, Object.assign({}, (!obj.author.deleted && { to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, obj.author) }), { onClick: obj.author.deleted ? () => setOpenAlert(true) : null, className: classes.username }, { children: _jsx(UserAvatar, Object.assign({ hide: !obj.author.community_badge }, { children: _jsx(Avatar, Object.assign({ "aria-label": "recipe", src: obj.author.avatar, className: classes.avatar }, { children: obj.author.username })) })) })), title: _jsx(Link, Object.assign({}, (!obj.author.deleted && { to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, obj.author) }), { onClick: obj.author.deleted ? () => setOpenAlert(true) : null, className: classes.username }, { children: obj.author.username })), subheader: _jsx(Link, Object.assign({ to: scRoutingContext.url(getContributionRouteName(obj), getRouteData(obj)), className: classes.activityAt }, { children: _jsx(DateTimeAgo, { date: obj.added_at }) })) }), _jsxs(CardContent, Object.assign({ classes: { root: classes.content } }, { children: [_jsx(Box, Object.assign({ className: classes.titleSection }, { children: 'title' in obj && (_jsx(Link, Object.assign({ to: scRoutingContext.url(getContributionRouteName(obj), getRouteData(obj)) }, { children: _jsx(Typography, Object.assign({ variant: "body1", gutterBottom: true, className: classes.title }, { children: obj.title })) }))) })), _jsx(Box, Object.assign({ className: classes.textSection }, { children: getContributionSummary(obj, template) })), _jsx(Box, Object.assign({ className: classes.mediasSection }, { children: _jsx(FeedObjectMediaPreview, Object.assign({ medias: obj.medias }, FeedObjectMediaPreviewProps)) })), _jsx(Box, Object.assign({ className: classes.pollsSection }, { children: obj['poll'] && (_jsx(PollObject, Object.assign({ feedObject: obj, pollObject: obj['poll'], onChange: handleChangePoll, visible: Boolean(obj.type !== SCContributionType.DISCUSSION && !obj.html && !obj.medias.length) }, PollObjectProps))) }))] }))] })) : (_jsx(FeedObjectSkeleton, Object.assign({ template: template }, FeedObjectSkeletonProps))) }));
     }
     else {
-        objElement = (_jsx(React.Fragment, { children: obj ? (_jsx(BaseItem, { elevation: 0, className: classes.snippet, image: _jsx(Link, Object.assign({}, (!obj.author.deleted && { to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, obj.author) }), { onClick: obj.author.deleted ? () => setOpenAlert(true) : null }, { children: _jsx(UserAvatar, Object.assign({ hide: !obj.author.community_badge }, { children: _jsx(Avatar, { alt: obj.author.username, variant: "circular", src: obj.author.avatar, className: classes.avatar }) })) })), primary: _jsxs(Box, { children: [_jsx(Link, Object.assign({}, (!obj.author.deleted && { to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, obj.author) }), { onClick: obj.author.deleted ? () => setOpenAlert(true) : null, className: classes.username }, { children: obj.author.username })), _jsx(Typography, Object.assign({ variant: "body2", className: classes.snippetContent }, { children: _jsx(Link, Object.assign({ to: scRoutingContext.url(getContributionRouteName(obj), getRouteData(obj)) }, { children: getContributionSnippet(obj) })) }))] }), disableTypography: true, secondary: _jsxs(Stack, Object.assign({ direction: "row", justifyContent: "space-between", spacing: 2, alignItems: "center" }, { children: [_jsx(Link, Object.assign({ to: scRoutingContext.url(getContributionRouteName(obj), getRouteData(obj)), className: classes.activityAt }, { children: _jsx(DateTimeAgo, { component: "span", date: obj.added_at }) })), _jsx(Button, Object.assign({ component: Link, to: scRoutingContext.url(getContributionRouteName(obj), getRouteData(obj)), variant: "text", color: "secondary", size: "small" }, { children: _jsx(FormattedMessage, { id: "ui.feedObject.comment", defaultMessage: "ui.feedObject.comment" }) }))] })) })) : (_jsx(FeedObjectSkeleton, Object.assign({}, FeedObjectSkeletonProps))) }));
+        objElement = (_jsx(React.Fragment, { children: obj ? (_jsx(BaseItem, { elevation: 0, className: classes.snippet, image: _jsx(Link, Object.assign({}, (!obj.author.deleted && { to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, obj.author) }), { onClick: obj.author.deleted ? () => setOpenAlert(true) : null }, { children: _jsx(UserAvatar, Object.assign({ hide: !obj.author.community_badge }, { children: _jsx(Avatar, { alt: obj.author.username, variant: "circular", src: obj.author.avatar, className: classes.avatar }) })) })), primary: _jsxs(Box, { children: [_jsx(Link, Object.assign({}, (!obj.author.deleted && { to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, obj.author) }), { onClick: obj.author.deleted ? () => setOpenAlert(true) : null, className: classes.username }, { children: obj.author.username })), _jsx(Typography, Object.assign({ variant: "body2", className: classes.snippetContent }, { children: _jsx(Link, Object.assign({ to: scRoutingContext.url(getContributionRouteName(obj), getRouteData(obj)) }, { children: getContributionSnippet(obj) })) }))] }), disableTypography: true, secondary: _jsxs(Stack, Object.assign({ direction: "row", justifyContent: "space-between", spacing: 2, alignItems: "center" }, { children: [_jsx(Link, Object.assign({ to: scRoutingContext.url(getContributionRouteName(obj), getRouteData(obj)), className: classes.activityAt }, { children: _jsx(DateTimeAgo, { component: "span", date: obj.added_at }) })), commentsEnabled && (_jsx(Button, Object.assign({ component: Link, to: scRoutingContext.url(getContributionRouteName(obj), getRouteData(obj)), variant: "text", color: "secondary", size: "small" }, { children: _jsx(FormattedMessage, { id: "ui.feedObject.comment", defaultMessage: "ui.feedObject.comment" }) })))] })) })) : (_jsx(FeedObjectSkeleton, Object.assign({}, FeedObjectSkeletonProps))) }));
     }
     /**
      * Renders root object

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

@@ -47,5 +47,5 @@ export default function Choice(props) {
     /**
      * Renders root element
      */
-    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: [_jsx(Typography, Object.assign({ className: classes.label }, { children: choiceObj.choice })), _jsx(LinearProgressWithLabel, { className: classes.progress, value: renderVotes(choiceObj.vote_count, votes) }), _jsx(LoadingButton, Object.assign({ loading: isVoting === choiceObj.id, variant: choiceObj.voted ? 'contained' : 'outlined', size: "small", disabled: disabled || isVoting !== null || votable, className: classes.vote, onClick: handleVoteAction }, { children: choiceObj.voted ? (_jsx(Icon, { children: "check" })) : (_jsx(FormattedMessage, { id: "ui.feedObject.poll.choice.vote", defaultMessage: "ui.feedObject.poll.choice.vote" })) }))] })));
+    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: [_jsx(Typography, Object.assign({ className: classes.label }, { children: choiceObj.choice })), _jsx(LinearProgressWithLabel, { className: classes.progress, value: renderVotes(choiceObj.vote_count, votes) }), _jsx(LoadingButton, Object.assign({ loading: isVoting === choiceObj.id, variant: choiceObj.voted ? 'contained' : 'outlined', size: "small", disabled: disabled || isVoting !== null || votable || feedObject.draft, className: classes.vote, onClick: handleVoteAction }, { children: choiceObj.voted ? (_jsx(Icon, { children: "check" })) : (_jsx(FormattedMessage, { id: "ui.feedObject.poll.choice.vote", defaultMessage: "ui.feedObject.poll.choice.vote" })) }))] })));
 }

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

@@ -146,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/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

@@ -69,9 +69,9 @@ export default function Group(inProps) {
         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();
@@ -87,7 +87,7 @@ export default function Group(inProps) {
      * @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

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

@@ -4,7 +4,7 @@ import { useMemo, useState } from 'react';
 import { useThemeProps } from '@mui/system';
 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';
@@ -14,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',
@@ -46,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`
 };
@@ -90,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,
@@ -107,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` }));
@@ -162,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);
@@ -178,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]);
@@ -214,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 })
@@ -252,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 }) }))] }))] }) })));
 }

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

@@ -2,8 +2,8 @@ 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 { Avatar, Box, Icon, Paper, Typography, useMediaQuery, useTheme, styled } from '@mui/material';
-import { SCGroupPrivacyType, SCGroupSubscriptionStatusType } from '@selfcommunity/types';
-import { SCPreferences, useSCFetchGroup, useSCPreferences, useSCUser } from '@selfcommunity/react-core';
+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';
@@ -19,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`,
@@ -69,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,
@@ -86,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
@@ -148,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)))] }))] })));
 }