@selfcommunity/react-templates 0.3.55 → 0.4.0-alpha.0

package/lib/esm/components/EventFeed/EventFeed.js

@@ -0,0 +1,142 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useRef } from 'react';
+import { styled } from '@mui/material/styles';
+import { ContributionUtils, EventInfoWidget, EventLocationWidget, EventMembersWidget, Feed, FeedObject, FeedObjectSkeleton, InlineComposerWidget, RelatedEventsWidget, SCFeedObjectTemplateType } from '@selfcommunity/react-ui';
+import { Endpoints } from '@selfcommunity/api-services';
+import { Link, SCRoutes, useSCFetchEvent, useSCRouting, useSCUser } from '@selfcommunity/react-core';
+import { SCCustomAdvPosition, SCEventPrivacyType, SCEventSubscriptionStatusType, SCFeedTypologyType } from '@selfcommunity/types';
+import { useThemeProps } from '@mui/system';
+import classNames from 'classnames';
+import { FormattedMessage } from 'react-intl';
+import { useSnackbar } from 'notistack';
+import { PREFIX } from './constants';
+import EventFeedSkeleton from './Skeleton';
+import { Box } from '@mui/material';
+const classes = {
+    root: `${PREFIX}-root`
+};
+const Root = styled(Feed, {
+    name: PREFIX,
+    slot: 'Root'
+})(() => ({}));
+// Widgets for feed
+const WIDGETS = [
+    {
+        type: 'widget',
+        component: EventLocationWidget,
+        componentProps: {},
+        column: 'right',
+        position: 0
+    },
+    {
+        type: 'widget',
+        component: EventMembersWidget,
+        componentProps: {},
+        column: 'right',
+        position: 1
+    },
+    {
+        type: 'widget',
+        component: RelatedEventsWidget,
+        componentProps: {},
+        column: 'right',
+        position: 2
+    }
+];
+/**
+ * > API documentation for the Community-JS Group Feed Template. Learn about the available props and the CSS API.
+ *
+ *
+ * This component renders a specific event's feed.
+
+ #### Import
+
+ ```jsx
+ import {EventFeed} from '@selfcommunity/react-templates';
+ ```
+
+ #### Component Name
+
+ The name `SCEventFeedTemplate` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCEventFeedTemplate-root|Styles applied to the root element.|
+ *
+ * @param inProps
+ */
+export default function EventFeed(inProps) {
+    // PROPS
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX
+    });
+    const { id = 'event_feed', className, event, eventId, widgets = WIDGETS, FeedObjectProps = {}, FeedSidebarProps = null, FeedProps = {} } = props;
+    // CONTEXT
+    const scRoutingContext = useSCRouting();
+    const scUserContext = useSCUser();
+    const { enqueueSnackbar } = useSnackbar();
+    // REF
+    const feedRef = useRef();
+    // Hooks
+    const { scEvent, setSCEvent } = useSCFetchEvent({ id: eventId, event });
+    // HANDLERS
+    const handleComposerSuccess = (feedObject) => {
+        var _a;
+        enqueueSnackbar(_jsx(FormattedMessage, { id: "ui.composerIconButton.composer.success", defaultMessage: "ui.composerIconButton.composer.success" }), {
+            action: (snackbarId) => (_jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes[`${feedObject.type.toUpperCase()}_ROUTE_NAME`], ContributionUtils.getRouteData(feedObject)) }, { children: _jsx(FormattedMessage, { id: "ui.composerIconButton.composer.viewContribute", defaultMessage: "ui.composerIconButton.composer.viewContribute" }) }))),
+            variant: 'success',
+            autoHideDuration: 7000
+        });
+        if (((_a = feedObject.event) === null || _a === void 0 ? void 0 : _a.id) === scEvent.id) {
+            // Hydrate feedUnit
+            const feedUnit = {
+                type: feedObject.type,
+                [feedObject.type]: feedObject,
+                seen_by_id: [],
+                has_boost: false
+            };
+            feedRef && feedRef.current && feedRef.current.addFeedData(feedUnit, true);
+        }
+    };
+    // WIDGETS
+    const _widgets = useMemo(() => widgets.map((w) => {
+        if (scEvent) {
+            return Object.assign(Object.assign({}, w), { componentProps: Object.assign(Object.assign({}, w.componentProps), { eventId: scEvent.id }) });
+        }
+        return w;
+    }), [widgets, scEvent]);
+    if (!scEvent) {
+        return _jsx(EventFeedSkeleton, {});
+    }
+    else if (scEvent.privacy === SCEventPrivacyType.PRIVATE &&
+        scEvent.subscription_status !== SCEventSubscriptionStatusType.SUBSCRIBED &&
+        scEvent.subscription_status !== SCEventSubscriptionStatusType.INVITED &&
+        scEvent.subscription_status !== SCEventSubscriptionStatusType.GOING &&
+        scEvent.subscription_status !== SCEventSubscriptionStatusType.NOT_GOING) {
+        return (_jsx(Box, Object.assign({ mt: 2 }, { children: _jsx(EventInfoWidget, { className: classes.root, event: scEvent }) })));
+    }
+    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className), id: id, ref: feedRef, endpoint: Object.assign(Object.assign({}, Endpoints.GetEventFeed), { url: () => Endpoints.GetEventFeed.url({ id: scEvent.id }) }), widgets: _widgets, ItemComponent: FeedObject, itemPropsGenerator: (scUser, item) => {
+            var _a;
+            return ({
+                feedObject: item[item.type],
+                feedObjectType: item.type,
+                feedObjectActivities: item.activities ? item.activities : null,
+                markRead: scUser ? !((_a = item === null || item === void 0 ? void 0 : item.seen_by_id) === null || _a === void 0 ? void 0 : _a.includes(scUser.id)) : null
+            });
+        }, itemIdGenerator: (item) => item[item.type].id, ItemProps: FeedObjectProps, ItemSkeleton: FeedObjectSkeleton, ItemSkeletonProps: {
+            template: SCFeedObjectTemplateType.PREVIEW
+        }, FeedSidebarProps: FeedSidebarProps, HeaderComponent: _jsxs(_Fragment, { children: [_jsx(EventInfoWidget, { className: classes.root, event: scEvent }), Boolean(scEvent &&
+                    ((!scUserContext.user && scEvent.privacy === SCEventPrivacyType.PUBLIC) ||
+                        (scUserContext.user &&
+                            (scEvent.subscription_status === SCEventSubscriptionStatusType.SUBSCRIBED ||
+                                scEvent.subscription_status === SCEventSubscriptionStatusType.INVITED ||
+                                scEvent.subscription_status === SCEventSubscriptionStatusType.GOING ||
+                                scEvent.subscription_status === SCEventSubscriptionStatusType.NOT_GOING)))) && (_jsx(InlineComposerWidget, { onSuccess: handleComposerSuccess, defaultValue: { event: scEvent }, label: _jsx(FormattedMessage, { id: "templates.eventFeed.composer.label", defaultMessage: "templates.eventFeed.composer.label" }), feedType: SCFeedTypologyType.EVENT }))] }), CustomAdvProps: { position: SCCustomAdvPosition.POSITION_FEED, groupsId: [scEvent.id] }, enabledCustomAdvPositions: [
+            SCCustomAdvPosition.POSITION_FEED_SIDEBAR,
+            SCCustomAdvPosition.POSITION_FEED,
+            SCCustomAdvPosition.POSITION_BELOW_TOPBAR
+        ] }, FeedProps)));
+}

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

@@ -0,0 +1,21 @@
+/**
+ * > API documentation for the Community-JS Group Feed Skeleton Template. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {GroupFeedSkeleton} from '@selfcommunity/react-templates';
+ ```
+
+ #### Component Name
+
+ The name `SCGroupFeedTemplate-skeleton-root` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCGroupFeedTemplate-skeleton-root|Styles applied to the root element.|
+ *
+ */
+export default function EventFeedSkeleton(): JSX.Element;

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

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { styled } from '@mui/material/styles';
+import { FeedObjectSkeleton, SCFeedObjectTemplateType, FeedSkeleton, GenericSkeleton, InlineComposerWidgetSkeleton } from '@selfcommunity/react-ui';
+import { PREFIX } from './constants';
+const classes = {
+    root: `${PREFIX}-skeleton-root`
+};
+const Root = styled(FeedSkeleton, {
+    name: PREFIX,
+    slot: 'SkeletonRoot'
+})(() => ({}));
+/**
+ * > API documentation for the Community-JS Group Feed Skeleton Template. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {GroupFeedSkeleton} from '@selfcommunity/react-templates';
+ ```
+
+ #### Component Name
+
+ The name `SCGroupFeedTemplate-skeleton-root` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCGroupFeedTemplate-skeleton-root|Styles applied to the root element.|
+ *
+ */
+export default function EventFeedSkeleton() {
+    return (_jsxs(Root, Object.assign({ className: classes.root, sidebar: _jsxs(React.Fragment, { children: [_jsx(GenericSkeleton, { sx: { mb: 2 } }), _jsx(GenericSkeleton, { sx: { mb: 2 } })] }) }, { children: [_jsx(InlineComposerWidgetSkeleton, {}), Array.from({ length: 5 }).map((e, i) => (_jsx(FeedObjectSkeleton, { template: SCFeedObjectTemplateType.DETAIL }, i)))] })));
+}

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

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

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

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

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

@@ -0,0 +1,4 @@
+import EventFeedSkeleton from './Skeleton';
+import EventFeed, { EventFeedProps } from './EventFeed';
+export default EventFeed;
+export { EventFeedProps, EventFeedSkeleton };

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

@@ -0,0 +1,4 @@
+import EventFeedSkeleton from './Skeleton';
+import EventFeed from './EventFeed';
+export default EventFeed;
+export { EventFeedSkeleton };

package/lib/esm/components/ExploreFeed/ExploreFeed.js

@@ -1,6 +1,7 @@
-import React, { useMemo, useRef } from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext, useMemo, useRef } from 'react';
 import { styled } from '@mui/material/styles';
-import { CategoriesPopularWidget, Feed, FeedObject, FeedObjectSkeleton, SCFeedObjectTemplateType, InlineComposerWidget, LoyaltyProgramWidget, UserSuggestionWidget, PlatformWidget } from '@selfcommunity/react-ui';
+import { CategoriesPopularWidget, Feed, FeedObject, FeedObjectSkeleton, SCFeedObjectTemplateType, InlineComposerWidget, LoyaltyProgramWidget, UserSuggestionWidget, PlatformWidget, OnBoardingWidget } from '@selfcommunity/react-ui';
 import { Endpoints } from '@selfcommunity/api-services';
 import { useThemeProps } from '@mui/system';
 import classNames from 'classnames';
@@ -8,6 +9,7 @@ import { SCCustomAdvPosition } from '@selfcommunity/types';
 import { FormattedMessage } from 'react-intl';
 import { useSnackbar } from 'notistack';
 import { PREFIX } from './constants';
+import { SCUserContext, UserUtils } from '@selfcommunity/react-core';
 const classes = {
     root: `${PREFIX}-root`
 };
@@ -80,11 +82,12 @@ export default function ExploreFeed(inProps) {
     const { id = 'explore_feed', className, widgets = WIDGETS, FeedObjectProps = {}, FeedSidebarProps = null, FeedProps = {} } = props;
     // CONTEXT
     const { enqueueSnackbar } = useSnackbar();
+    const scUserContext = useContext(SCUserContext);
     // REF
     const feedRef = useRef();
     // HANDLERS
     const handleComposerSuccess = (feedObject) => {
-        enqueueSnackbar(React.createElement(FormattedMessage, { id: "ui.inlineComposerWidget.success", defaultMessage: "ui.inlineComposerWidget.success" }), {
+        enqueueSnackbar(_jsx(FormattedMessage, { id: "ui.inlineComposerWidget.success", defaultMessage: "ui.inlineComposerWidget.success" }), {
             variant: 'success',
             autoHideDuration: 3000
         });
@@ -97,18 +100,34 @@ export default function ExploreFeed(inProps) {
         };
         feedRef && feedRef.current && feedRef.current.addFeedData(feedUnit, true);
     };
+    const handleAddGenerationContent = (feedObjects) => {
+        if (feedRef && feedRef.current) {
+            const currentFeedObjectIds = feedRef.current.getCurrentFeedObjectIds();
+            feedObjects.forEach((feedObject) => {
+                if (!currentFeedObjectIds.includes(feedObject.id)) {
+                    const feedUnit = {
+                        type: feedObject.type,
+                        [feedObject.type]: feedObject,
+                        seen_by_id: [],
+                        has_boost: false
+                    };
+                    feedRef.current.addFeedData(feedUnit, true);
+                }
+            });
+        }
+    };
     // WIDGETS
     const _widgets = useMemo(() => widgets.map((w) => {
         return Object.assign(Object.assign({}, w), { componentProps: Object.assign({}, w.componentProps) });
     }), [widgets]);
-    return (React.createElement(Root, Object.assign({ id: id, className: classNames(classes.root, className), ref: feedRef, endpoint: Endpoints.ExploreFeed, widgets: _widgets, ItemComponent: FeedObject, itemPropsGenerator: (scUser, item) => ({
+    return (_jsx(Root, Object.assign({ id: id, className: classNames(classes.root, className), ref: feedRef, endpoint: Endpoints.ExploreFeed, widgets: _widgets, ItemComponent: FeedObject, itemPropsGenerator: (scUser, item) => ({
             feedObject: item[item.type],
             feedObjectType: item.type,
             feedObjectActivities: item.activities ? item.activities : null,
             markRead: scUser ? !item.seen_by_id.includes(scUser.id) : null
         }), itemIdGenerator: (item) => item[item.type].id, ItemProps: FeedObjectProps, ItemSkeleton: FeedObjectSkeleton, ItemSkeletonProps: {
             template: SCFeedObjectTemplateType.PREVIEW
-        }, HeaderComponent: React.createElement(InlineComposerWidget, { onSuccess: handleComposerSuccess }), FeedSidebarProps: FeedSidebarProps, enabledCustomAdvPositions: [
+        }, HeaderComponent: _jsxs(_Fragment, { children: [_jsx(InlineComposerWidget, { onSuccess: handleComposerSuccess }), UserUtils.isAdmin(scUserContext.user) && _jsx(OnBoardingWidget, { onGeneratedContent: handleAddGenerationContent })] }), FeedSidebarProps: FeedSidebarProps, enabledCustomAdvPositions: [
             SCCustomAdvPosition.POSITION_FEED_SIDEBAR,
             SCCustomAdvPosition.POSITION_FEED,
             SCCustomAdvPosition.POSITION_BELOW_TOPBAR

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

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { styled } from '@mui/material/styles';
 import { FeedObjectSkeleton, SCFeedObjectTemplateType, FeedSkeleton, GenericSkeleton, InlineComposerWidgetSkeleton } from '@selfcommunity/react-ui';
@@ -30,9 +31,5 @@ const Root = styled(FeedSkeleton, {
  *
  */
 export default function ExploreFeedSkeleton() {
-    return (React.createElement(Root, { className: classes.root, sidebar: React.createElement(React.Fragment, null,
-            React.createElement(GenericSkeleton, { sx: { mb: 2 } }),
-            React.createElement(GenericSkeleton, { sx: { mb: 2 } })) },
-        React.createElement(InlineComposerWidgetSkeleton, null),
-        Array.from({ length: 5 }).map((e, i) => (React.createElement(FeedObjectSkeleton, { key: i, template: SCFeedObjectTemplateType.DETAIL })))));
+    return (_jsxs(Root, Object.assign({ className: classes.root, sidebar: _jsxs(React.Fragment, { children: [_jsx(GenericSkeleton, { sx: { mb: 2 } }), _jsx(GenericSkeleton, { sx: { mb: 2 } })] }) }, { children: [_jsx(InlineComposerWidgetSkeleton, {}), Array.from({ length: 5 }).map((e, i) => (_jsx(FeedObjectSkeleton, { template: SCFeedObjectTemplateType.DETAIL }, i)))] })));
 }

package/lib/esm/components/FeedObjectDetail/FeedObjectDetail.js

@@ -1,4 +1,5 @@
-import React, { useMemo, useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
 import { styled } from '@mui/material/styles';
 import { Box, Grid, Hidden } from '@mui/material';
 import { CommentsFeedObject, CustomAdv, FeedObject, RelatedFeedObjectsWidget, SCFeedObjectTemplateType, StickyBox } from '@selfcommunity/react-ui';
@@ -70,7 +71,7 @@ export default function FeedObjectDetail(inProps) {
         if (preferences[SCPreferences.ADVERTISING_CUSTOM_ADV_ENABLED] &&
             ((preferences[SCPreferences.ADVERTISING_CUSTOM_ADV_ONLY_FOR_ANONYMOUS_USERS_ENABLED] && scUserContext.user === null) ||
                 !preferences[SCPreferences.ADVERTISING_CUSTOM_ADV_ONLY_FOR_ANONYMOUS_USERS_ENABLED])) {
-            return (React.createElement(CustomAdv, Object.assign({ position: SCCustomAdvPosition.POSITION_BELOW_FEED_OBJECT }, (obj.categories.length && { categoriesId: obj.categories.map((c) => c.id) }))));
+            return (_jsx(CustomAdv, Object.assign({ position: SCCustomAdvPosition.POSITION_BELOW_FEED_OBJECT }, (obj.categories.length && { categoriesId: obj.categories.map((c) => c.id) }))));
         }
         return null;
     }
@@ -88,20 +89,10 @@ export default function FeedObjectDetail(inProps) {
         }, 300);
     }
     if (error) {
-        return (React.createElement(Box, null,
-            React.createElement(FormattedMessage, { id: "templates.feedObjectDetail.contributionNotFound", defaultMessage: "templates.feedObjectDetail.contributionNotFound" })));
+        return (_jsx(Box, { children: _jsx(FormattedMessage, { id: "templates.feedObjectDetail.contributionNotFound", defaultMessage: "templates.feedObjectDetail.contributionNotFound" }) }));
     }
     if (!obj) {
-        return React.createElement(FeedObjectDetailSkeleton, null);
+        return _jsx(FeedObjectDetailSkeleton, {});
     }
-    return (React.createElement(Root, { id: id, className: classNames(classes.root, className) },
-        React.createElement(Grid, { container: true, spacing: 2 },
-            React.createElement(Grid, { item: true, xs: 12, md: 7 },
-                React.createElement(FeedObject, Object.assign({}, FeedObjectProps, { feedObject: obj, template: SCFeedObjectTemplateType.DETAIL, onReply: handleReply })),
-                renderAdvertising(),
-                React.createElement(CommentsFeedObject, Object.assign({ key: `comments_${obj.id}`, showTitle: true, feedObject: obj, comments: comments }, CommentsFeedObjectProps))),
-            React.createElement(Grid, { item: true, xs: 12, md: 5 },
-                React.createElement(Hidden, { mdDown: true },
-                    React.createElement(StickyBox, Object.assign({}, FeedSidebarProps),
-                        React.createElement(RelatedFeedObjectsWidget, Object.assign({ key: `related_${obj.id}`, feedObject: obj }, RelatedFeedObjectProps))))))));
+    return (_jsx(Root, Object.assign({ id: id, className: classNames(classes.root, className) }, { children: _jsxs(Grid, Object.assign({ container: true, spacing: 2 }, { children: [_jsxs(Grid, Object.assign({ item: true, xs: 12, md: 7 }, { children: [_jsx(FeedObject, Object.assign({}, FeedObjectProps, { feedObject: obj, template: SCFeedObjectTemplateType.DETAIL, onReply: handleReply })), renderAdvertising(), _jsx(CommentsFeedObject, Object.assign({ showTitle: true, feedObject: obj, comments: comments }, CommentsFeedObjectProps), `comments_${obj.id}`)] })), _jsx(Grid, Object.assign({ item: true, xs: 12, md: 5 }, { children: _jsx(Hidden, Object.assign({ mdDown: true }, { children: _jsx(StickyBox, Object.assign({}, FeedSidebarProps, { children: _jsx(RelatedFeedObjectsWidget, Object.assign({ feedObject: obj }, RelatedFeedObjectProps), `related_${obj.id}`) })) })) }))] })) })));
 }

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { CommentsFeedObjectSkeleton, FeedObjectSkeleton, SCFeedObjectTemplateType, RelatedFeedObjectsWidgetSkeleton } from '@selfcommunity/react-ui';
 import { Box, Grid } from '@mui/material';
 import { styled } from '@mui/material/styles';
@@ -32,11 +32,5 @@ const Root = styled(Box, {
  */
 export default function FeedObjectDetailSkeleton(props) {
     const { FeedObjectSkeletonProps = {}, CommentsFeedObjectSkeletonProps = {}, RelatedFeedObjectsSkeletonProps = {} } = props;
-    return (React.createElement(Root, { className: classes.root },
-        React.createElement(Grid, { container: true, spacing: 2 },
-            React.createElement(Grid, { item: true, xs: 12, md: 7 },
-                React.createElement(FeedObjectSkeleton, Object.assign({ template: SCFeedObjectTemplateType.DETAIL }, FeedObjectSkeletonProps)),
-                React.createElement(CommentsFeedObjectSkeleton, Object.assign({ count: 4 }, CommentsFeedObjectSkeletonProps))),
-            React.createElement(Grid, { item: true, xs: 12, md: 5 },
-                React.createElement(RelatedFeedObjectsWidgetSkeleton, Object.assign({}, RelatedFeedObjectsSkeletonProps))))));
+    return (_jsx(Root, Object.assign({ className: classes.root }, { children: _jsxs(Grid, Object.assign({ container: true, spacing: 2 }, { children: [_jsxs(Grid, Object.assign({ item: true, xs: 12, md: 7 }, { children: [_jsx(FeedObjectSkeleton, Object.assign({ template: SCFeedObjectTemplateType.DETAIL }, FeedObjectSkeletonProps)), _jsx(CommentsFeedObjectSkeleton, Object.assign({ count: 4 }, CommentsFeedObjectSkeletonProps))] })), _jsx(Grid, Object.assign({ item: true, xs: 12, md: 5 }, { children: _jsx(RelatedFeedObjectsWidgetSkeleton, Object.assign({}, RelatedFeedObjectsSkeletonProps)) }))] })) })));
 }

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { styled } from '@mui/material/styles';
 import { Box } from '@mui/material';
 import { GroupHeader } from '@selfcommunity/react-ui';
@@ -55,9 +55,7 @@ export default function Group(inProps) {
         setSCGroup(Object.assign({}, scGroup, { subscription_status: status }));
     };
     if (!scGroup) {
-        return React.createElement(GroupSkeletonTemplate, null);
+        return _jsx(GroupSkeletonTemplate, {});
     }
-    return (React.createElement(Root, { id: id, className: classNames(classes.root, className) },
-        React.createElement(GroupHeader, { groupId: scGroup.id, GroupSubscribeButtonProps: { onSubscribe: handleSubscribe } }),
-        React.createElement(GroupFeed, Object.assign({ className: classes.feed, group: scGroup, widgets: widgets, FeedObjectProps: FeedObjectProps, FeedSidebarProps: FeedSidebarProps }, GroupFeedProps))));
+    return (_jsxs(Root, Object.assign({ id: id, className: classNames(classes.root, className) }, { children: [_jsx(GroupHeader, { groupId: scGroup.id, GroupSubscribeButtonProps: { onSubscribe: handleSubscribe } }), _jsx(GroupFeed, Object.assign({ className: classes.feed, group: scGroup, widgets: widgets, FeedObjectProps: FeedObjectProps, FeedSidebarProps: FeedSidebarProps }, GroupFeedProps))] })));
 }

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import GroupFeedSkeleton from '../GroupFeed/Skeleton';
@@ -32,7 +32,5 @@ const Root = styled(Box, {
  *
  */
 export default function GroupSkeletonTemplate() {
-    return (React.createElement(Root, { className: classes.root },
-        React.createElement(GroupHeaderSkeleton, null),
-        React.createElement(GroupFeedSkeleton, null)));
+    return (_jsxs(Root, Object.assign({ className: classes.root }, { children: [_jsx(GroupHeaderSkeleton, {}), _jsx(GroupFeedSkeleton, {})] })));
 }

package/lib/esm/components/GroupFeed/GroupFeed.js

@@ -1,4 +1,5 @@
-import React, { useMemo, useRef } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo, useRef } from 'react';
 import { styled } from '@mui/material/styles';
 import { ContributionUtils, Feed, FeedObject, FeedObjectSkeleton, GroupInfoWidget, GroupMembersWidget, InlineComposerWidget, SCFeedObjectTemplateType } from '@selfcommunity/react-ui';
 import { Endpoints } from '@selfcommunity/api-services';
@@ -75,9 +76,8 @@ export default function GroupFeed(inProps) {
     // HANDLERS
     const handleComposerSuccess = (feedObject) => {
         var _a;
-        enqueueSnackbar(React.createElement(FormattedMessage, { id: "ui.composerIconButton.composer.success", defaultMessage: "ui.composerIconButton.composer.success" }), {
-            action: (snackbarId) => (React.createElement(Link, { to: scRoutingContext.url(SCRoutes[`${feedObject.type.toUpperCase()}_ROUTE_NAME`], ContributionUtils.getRouteData(feedObject)) },
-                React.createElement(FormattedMessage, { id: "ui.composerIconButton.composer.viewContribute", defaultMessage: "ui.composerIconButton.composer.viewContribute" }))),
+        enqueueSnackbar(_jsx(FormattedMessage, { id: "ui.composerIconButton.composer.success", defaultMessage: "ui.composerIconButton.composer.success" }), {
+            action: (snackbarId) => (_jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes[`${feedObject.type.toUpperCase()}_ROUTE_NAME`], ContributionUtils.getRouteData(feedObject)) }, { children: _jsx(FormattedMessage, { id: "ui.composerIconButton.composer.viewContribute", defaultMessage: "ui.composerIconButton.composer.viewContribute" }) }))),
             variant: 'success',
             autoHideDuration: 7000
         });
@@ -100,12 +100,12 @@ export default function GroupFeed(inProps) {
         return w;
     }), [widgets, scGroup]);
     if (!scGroup) {
-        return React.createElement(GroupFeedSkeleton, null);
+        return _jsx(GroupFeedSkeleton, {});
     }
     else if (scGroup && scGroup.subscription_status !== SCGroupSubscriptionStatusType.SUBSCRIBED) {
-        return React.createElement(GroupInfoWidget, { className: classes.root, groupId: scGroup === null || scGroup === void 0 ? void 0 : scGroup.id });
+        return _jsx(GroupInfoWidget, { className: classes.root, groupId: scGroup === null || scGroup === void 0 ? void 0 : scGroup.id });
     }
-    return (React.createElement(Root, Object.assign({ className: classNames(classes.root, className), id: id, ref: feedRef, endpoint: Object.assign(Object.assign({}, Endpoints.GetGroupFeed), { url: () => Endpoints.GetGroupFeed.url({ id: scGroup.id }) }), widgets: _widgets, ItemComponent: FeedObject, itemPropsGenerator: (scUser, item) => {
+    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className), id: id, ref: feedRef, endpoint: Object.assign(Object.assign({}, Endpoints.GetGroupFeed), { url: () => Endpoints.GetGroupFeed.url({ id: scGroup.id }) }), widgets: _widgets, ItemComponent: FeedObject, itemPropsGenerator: (scUser, item) => {
             var _a;
             return ({
                 feedObject: item[item.type],
@@ -116,7 +116,7 @@ export default function GroupFeed(inProps) {
         }, itemIdGenerator: (item) => item[item.type].id, ItemProps: FeedObjectProps, ItemSkeleton: FeedObjectSkeleton, ItemSkeletonProps: {
             template: SCFeedObjectTemplateType.PREVIEW
         }, FeedSidebarProps: FeedSidebarProps, HeaderComponent: scGroup &&
-            scGroup.subscription_status === SCGroupSubscriptionStatusType.SUBSCRIBED && (React.createElement(InlineComposerWidget, { onSuccess: handleComposerSuccess, defaultValue: { group: scGroup }, label: React.createElement(FormattedMessage, { id: "templates.groupFeed.composer.label", defaultMessage: "templates.groupFeed.composer.label" }), feedType: SCFeedTypologyType.GROUP })), CustomAdvProps: { position: SCCustomAdvPosition.POSITION_FEED, groupsId: [scGroup.id] }, enabledCustomAdvPositions: [
+            scGroup.subscription_status === SCGroupSubscriptionStatusType.SUBSCRIBED && (_jsx(InlineComposerWidget, { onSuccess: handleComposerSuccess, defaultValue: { group: scGroup }, label: _jsx(FormattedMessage, { id: "templates.groupFeed.composer.label", defaultMessage: "templates.groupFeed.composer.label" }), feedType: SCFeedTypologyType.GROUP })), CustomAdvProps: { position: SCCustomAdvPosition.POSITION_FEED, groupsId: [scGroup.id] }, enabledCustomAdvPositions: [
             SCCustomAdvPosition.POSITION_FEED_SIDEBAR,
             SCCustomAdvPosition.POSITION_FEED,
             SCCustomAdvPosition.POSITION_BELOW_TOPBAR

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

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { styled } from '@mui/material/styles';
 import { FeedObjectSkeleton, SCFeedObjectTemplateType, FeedSkeleton, GenericSkeleton, InlineComposerWidgetSkeleton } from '@selfcommunity/react-ui';
@@ -30,9 +31,5 @@ const Root = styled(FeedSkeleton, {
  *
  */
 export default function GroupFeedSkeleton() {
-    return (React.createElement(Root, { className: classes.root, sidebar: React.createElement(React.Fragment, null,
-            React.createElement(GenericSkeleton, { sx: { mb: 2 } }),
-            React.createElement(GenericSkeleton, { sx: { mb: 2 } })) },
-        React.createElement(InlineComposerWidgetSkeleton, null),
-        Array.from({ length: 5 }).map((e, i) => (React.createElement(FeedObjectSkeleton, { key: i, template: SCFeedObjectTemplateType.DETAIL })))));
+    return (_jsxs(Root, Object.assign({ className: classes.root, sidebar: _jsxs(React.Fragment, { children: [_jsx(GenericSkeleton, { sx: { mb: 2 } }), _jsx(GenericSkeleton, { sx: { mb: 2 } })] }) }, { children: [_jsx(InlineComposerWidgetSkeleton, {}), Array.from({ length: 5 }).map((e, i) => (_jsx(FeedObjectSkeleton, { template: SCFeedObjectTemplateType.DETAIL }, i)))] })));
 }

package/lib/esm/components/LoyaltyProgramDetail/LoyaltyProgramDetail.js

@@ -1,5 +1,6 @@
 import { __rest } from "tslib";
-import React, { useContext, useEffect, useMemo, useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useContext, useEffect, useMemo, useState } from 'react';
 import { styled } from '@mui/material/styles';
 import { http, Endpoints, UserService, LoyaltyService } from '@selfcommunity/api-services';
 import { SCUserContext } from '@selfcommunity/react-core';
@@ -106,7 +107,7 @@ export default function LoyaltyProgramDetail(inProps) {
             .then((data) => {
             setPoints((prev) => prev - data.prize_points);
             setOpen(false);
-            let _snackBar = enqueueSnackbar(React.createElement(FormattedMessage, { id: "templates.loyaltyProgramDetail.prize.request.success", defaultMessage: "templates.loyaltyProgramDetail.prize.request.success" }), {
+            let _snackBar = enqueueSnackbar(_jsx(FormattedMessage, { id: "templates.loyaltyProgramDetail.prize.request.success", defaultMessage: "templates.loyaltyProgramDetail.prize.request.success" }), {
                 variant: 'success',
                 autoHideDuration: 3000,
                 SnackbarProps: {
@@ -118,7 +119,7 @@ export default function LoyaltyProgramDetail(inProps) {
         })
             .catch((error) => {
             setOpen(false);
-            let _snackBar = enqueueSnackbar(React.createElement(FormattedMessage, { id: "templates.loyaltyProgramDetail.prize.request.error", defaultMessage: "templates.loyaltyProgramDetail.prize.request.error" }), {
+            let _snackBar = enqueueSnackbar(_jsx(FormattedMessage, { id: "templates.loyaltyProgramDetail.prize.request.error", defaultMessage: "templates.loyaltyProgramDetail.prize.request.error" }), {
                 variant: 'error',
                 autoHideDuration: 3000,
                 SnackbarProps: {
@@ -181,37 +182,7 @@ export default function LoyaltyProgramDetail(inProps) {
         return null;
     }
     if (loading) {
-        return React.createElement(Skeleton, null);
+        return _jsx(Skeleton, {});
     }
-    return (React.createElement(Root, Object.assign({ className: classNames(classes.root, className) }, rest),
-        points !== 0 && (React.createElement(Typography, { className: classes.title, variant: "h5" },
-            !isMobile && React.createElement(FormattedMessage, { id: "ui.loyaltyProgramWidget.title", defaultMessage: "ui.loyaltyProgramWidget.title" }),
-            React.createElement(Chip, { className: classes.userPoints, component: "span", label: React.createElement(FormattedMessage, { id: "templates.loyaltyProgramDetail.userPoints", defaultMessage: "templates.loyaltyProgramDetail.userPoints", values: { total: points } }) }))),
-        React.createElement(Typography, { className: classes.sectionTitle },
-            React.createElement(FormattedMessage, { id: "templates.loyaltyProgramDetail.community", defaultMessage: "templates.loyaltyProgramDetail.community" })),
-        React.createElement(Typography, { className: classes.sectionInfo },
-            React.createElement(FormattedMessage, { id: "templates.loyaltyProgramDetail.description", defaultMessage: "templates.loyaltyProgramDetail.description" })),
-        React.createElement(Typography, { className: classes.sectionTitle },
-            React.createElement(FormattedMessage, { id: "templates.loyaltyProgramDetail.listTitle", defaultMessage: "templates.loyaltyProgramDetail.listTitle" })),
-        React.createElement(PointsList, { className: classes.pointsSection }),
-        prizes.length !== 0 && (React.createElement(Typography, { className: classes.sectionTitle },
-            React.createElement(FormattedMessage, { id: "templates.loyaltyProgramDetail.prizes", defaultMessage: "templates.loyaltyProgramDetail.prizes" }))),
-        React.createElement(InfiniteScroll, { dataLength: prizes.length, next: handleNext, hasMoreNext: Boolean(next), loaderNext: React.createElement(PrizeItemSkeleton, null), endMessage: React.createElement(React.Fragment, null, prizes.length !== 0 ? (React.createElement(Typography, { className: classes.endMessage },
-                React.createElement(FormattedMessage, { id: "templates.loyaltyProgramDetail.content.end.message", defaultMessage: "templates.loyaltyProgramDetail.content.end.message" }),
-                React.createElement(Button, { color: 'secondary', onClick: handleScrollUp },
-                    React.createElement(FormattedMessage, { id: "templates.loyaltyProgramDetail.content.end.button", defaultMessage: "templates.loyaltyProgramDetail.content.end.button" })))) : null) },
-            React.createElement(Grid, { container: true, spacing: !isMobile ? 3 : 0, direction: isMobile ? 'column' : 'row', className: classes.prizeSection }, prizes.map((prize) => (React.createElement(Grid, { item: true, xs: 12, sm: 12, md: 6, lg: 4, xl: 3, key: prize.id },
-                React.createElement(Card, { className: classes.card },
-                    React.createElement(CardMedia, { component: "img", image: prize.image }),
-                    React.createElement(Box, { className: classes.prizePoints },
-                        React.createElement(Chip, { className: points <= prize.points ? classes.notRequestable : null, label: React.createElement(FormattedMessage, { id: "templates.loyaltyProgramDetail.prize.points", defaultMessage: "templates.loyaltyProgramDetail.prize.points", values: { total: prize.points } }) })),
-                    React.createElement(CardContent, null,
-                        React.createElement(Typography, { variant: "body1", className: classes.cardTitle }, prize.title),
-                        React.createElement(Typography, { variant: "body2", className: classes.cardContent }, prize.description)),
-                    React.createElement(CardActions, null,
-                        prize.link && (React.createElement(Button, { size: "medium", color: "secondary", href: prize.link, target: "_blank", className: classes.actionButton },
-                            React.createElement(FormattedMessage, { id: "templates.loyaltyProgramDetail.button.more", defaultMessage: "templates.loyaltyProgramDetail.button.more" }))),
-                        ((!prize.link && prize.active && points >= prize.points) || (prize.active && points >= prize.points)) && (React.createElement(Button, { size: "small", variant: "outlined", className: classes.actionButton, disabled: points < prize.points, onClick: () => handleOpenAlert(prize.id) },
-                            React.createElement(FormattedMessage, { id: "templates.loyaltyProgramDetail.button.request", defaultMessage: "templates.loyaltyProgramDetail.button.request" })))))))))),
-        open && (React.createElement(ConfirmDialog, { open: open, title: React.createElement(FormattedMessage, { id: "templates.loyaltyProgramDetail.dialog.msg", defaultMessage: "templates.loyaltyProgramDetail.dialog.msg" }), btnConfirm: React.createElement(FormattedMessage, { id: "templates.loyaltyProgramDetail.dialog.confirm", defaultMessage: "templates.loyaltyProgramDetail.dialog.confirm" }), onConfirm: () => requestPrize(prizeRequested), onClose: () => setOpen(false) }))));
+    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: [points !== 0 && (_jsxs(Typography, Object.assign({ className: classes.title, variant: "h5" }, { children: [!isMobile && _jsx(FormattedMessage, { id: "ui.loyaltyProgramWidget.title", defaultMessage: "ui.loyaltyProgramWidget.title" }), _jsx(Chip, { className: classes.userPoints, component: "span", label: _jsx(FormattedMessage, { id: "templates.loyaltyProgramDetail.userPoints", defaultMessage: "templates.loyaltyProgramDetail.userPoints", values: { total: points } }) })] }))), _jsx(Typography, Object.assign({ className: classes.sectionTitle }, { children: _jsx(FormattedMessage, { id: "templates.loyaltyProgramDetail.community", defaultMessage: "templates.loyaltyProgramDetail.community" }) })), _jsx(Typography, Object.assign({ className: classes.sectionInfo }, { children: _jsx(FormattedMessage, { id: "templates.loyaltyProgramDetail.description", defaultMessage: "templates.loyaltyProgramDetail.description" }) })), _jsx(Typography, Object.assign({ className: classes.sectionTitle }, { children: _jsx(FormattedMessage, { id: "templates.loyaltyProgramDetail.listTitle", defaultMessage: "templates.loyaltyProgramDetail.listTitle" }) })), _jsx(PointsList, { className: classes.pointsSection }), prizes.length !== 0 && (_jsx(Typography, Object.assign({ className: classes.sectionTitle }, { children: _jsx(FormattedMessage, { id: "templates.loyaltyProgramDetail.prizes", defaultMessage: "templates.loyaltyProgramDetail.prizes" }) }))), _jsx(InfiniteScroll, Object.assign({ dataLength: prizes.length, next: handleNext, hasMoreNext: Boolean(next), loaderNext: _jsx(PrizeItemSkeleton, {}), endMessage: _jsx(_Fragment, { children: prizes.length !== 0 ? (_jsxs(Typography, Object.assign({ className: classes.endMessage }, { children: [_jsx(FormattedMessage, { id: "templates.loyaltyProgramDetail.content.end.message", defaultMessage: "templates.loyaltyProgramDetail.content.end.message" }), _jsx(Button, Object.assign({ color: 'secondary', onClick: handleScrollUp }, { children: _jsx(FormattedMessage, { id: "templates.loyaltyProgramDetail.content.end.button", defaultMessage: "templates.loyaltyProgramDetail.content.end.button" }) }))] }))) : null }) }, { children: _jsx(Grid, Object.assign({ container: true, spacing: !isMobile ? 3 : 0, direction: isMobile ? 'column' : 'row', className: classes.prizeSection }, { children: prizes.map((prize) => (_jsx(Grid, Object.assign({ item: true, xs: 12, sm: 12, md: 6, lg: 4, xl: 3 }, { children: _jsxs(Card, Object.assign({ className: classes.card }, { children: [_jsx(CardMedia, { component: "img", image: prize.image }), _jsx(Box, Object.assign({ className: classes.prizePoints }, { children: _jsx(Chip, { className: points <= prize.points ? classes.notRequestable : null, label: _jsx(FormattedMessage, { id: "templates.loyaltyProgramDetail.prize.points", defaultMessage: "templates.loyaltyProgramDetail.prize.points", values: { total: prize.points } }) }) })), _jsxs(CardContent, { children: [_jsx(Typography, Object.assign({ variant: "body1", className: classes.cardTitle }, { children: prize.title })), _jsx(Typography, Object.assign({ variant: "body2", className: classes.cardContent }, { children: prize.description }))] }), _jsxs(CardActions, { children: [prize.link && (_jsx(Button, Object.assign({ size: "medium", color: "secondary", href: prize.link, target: "_blank", className: classes.actionButton }, { children: _jsx(FormattedMessage, { id: "templates.loyaltyProgramDetail.button.more", defaultMessage: "templates.loyaltyProgramDetail.button.more" }) }))), ((!prize.link && prize.active && points >= prize.points) || (prize.active && points >= prize.points)) && (_jsx(Button, Object.assign({ size: "small", variant: "outlined", className: classes.actionButton, disabled: points < prize.points, onClick: () => handleOpenAlert(prize.id) }, { children: _jsx(FormattedMessage, { id: "templates.loyaltyProgramDetail.button.request", defaultMessage: "templates.loyaltyProgramDetail.button.request" }) })))] })] })) }), prize.id))) })) })), open && (_jsx(ConfirmDialog, { open: open, title: _jsx(FormattedMessage, { id: "templates.loyaltyProgramDetail.dialog.msg", defaultMessage: "templates.loyaltyProgramDetail.dialog.msg" }), btnConfirm: _jsx(FormattedMessage, { id: "templates.loyaltyProgramDetail.dialog.confirm", defaultMessage: "templates.loyaltyProgramDetail.dialog.confirm" }), onConfirm: () => requestPrize(prizeRequested), onClose: () => setOpen(false) }))] })));
 }

package/lib/esm/components/LoyaltyProgramDetail/PointsList.js

@@ -1,5 +1,6 @@
 import { __rest } from "tslib";
-import React, { useMemo } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
 import { styled } from '@mui/material/styles';
 import { SCPreferences, useSCPreferences } from '@selfcommunity/react-core';
 import { Divider, Grid, Typography } from '@mui/material';
@@ -22,13 +23,7 @@ const classes = {
 };
 export function PointElement({ message, points }) {
     if (points > 0) {
-        return (React.createElement(Grid, { item: true, xs: 12, sm: 12, md: 6 },
-            React.createElement(Typography, { component: "div", className: classes.element },
-                React.createElement(Typography, null, message),
-                React.createElement(Typography, null,
-                    "+",
-                    React.createElement(FormattedMessage, { id: "templates.loyaltyProgramDetail.points", defaultMessage: "templates.loyaltyProgramDetail.points", values: { total: points } }))),
-            React.createElement(Divider, null)));
+        return (_jsxs(Grid, Object.assign({ item: true, xs: 12, sm: 12, md: 6 }, { children: [_jsxs(Typography, Object.assign({ component: "div", className: classes.element }, { children: [_jsx(Typography, { children: message }), _jsxs(Typography, { children: ["+", _jsx(FormattedMessage, { id: "templates.loyaltyProgramDetail.points", defaultMessage: "templates.loyaltyProgramDetail.points", values: { total: points } })] })] })), _jsx(Divider, {})] })));
     }
 }
 const Root = styled(Grid, {
@@ -53,13 +48,5 @@ export default function PointsList(props) {
     /**
      * Renders the component (if not hidden by autoHide prop)
      */
-    return (React.createElement(Root, Object.assign({ className: classNames(classes.root, className), container: true, spacing: 2 }, rest),
-        preferences[SCPreferences.CONFIGURATIONS_POST_TYPE_ENABLED].value && (React.createElement(PointElement, { message: React.createElement(FormattedMessage, { id: "templates.loyaltyProgramDetail.points.post", defaultMessage: "templates.loyaltyProgramDetail.points.post" }), points: _preferences[SCPreferences.POINTS_MAKE_POST] })),
-        preferences[SCPreferences.CONFIGURATIONS_DISCUSSION_TYPE_ENABLED].value && (React.createElement(PointElement, { message: React.createElement(FormattedMessage, { id: "templates.loyaltyProgramDetail.points.discussion", defaultMessage: "templates.loyaltyProgramDetail.points.discussion" }), points: _preferences[SCPreferences.POINTS_MAKE_DISCUSSION] })),
-        React.createElement(PointElement, { message: React.createElement(FormattedMessage, { id: "templates.loyaltyProgramDetail.points.comment", defaultMessage: "templates.loyaltyProgramDetail.points.comment" }), points: _preferences[SCPreferences.POINTS_MAKE_COMMENT] }),
-        React.createElement(PointElement, { message: React.createElement(FormattedMessage, { id: "templates.loyaltyProgramDetail.points.appreciation", defaultMessage: "templates.loyaltyProgramDetail.points.appreciation" }), points: _preferences[SCPreferences.POINTS_RECEIVE_VOTE] }),
-        React.createElement(PointElement, { message: React.createElement(FormattedMessage, { id: "templates.loyaltyProgramDetail.points.follower", defaultMessage: "templates.loyaltyProgramDetail.points.follower" }), points: _preferences[SCPreferences.POINTS_CONNECTION_OR_FOLLOWER] }),
-        React.createElement(PointElement, { message: React.createElement(FormattedMessage, { id: "templates.loyaltyProgramDetail.points.share", defaultMessage: "templates.loyaltyProgramDetail.points.share" }), points: _preferences[SCPreferences.POINTS_SOCIAL_SHARE] }),
-        React.createElement(PointElement, { message: React.createElement(FormattedMessage, { id: "templates.loyaltyProgramDetail.points.app", defaultMessage: "templates.loyaltyProgramDetail.points.app" }), points: _preferences[SCPreferences.POINTS_APP_USED] }),
-        React.createElement(PointElement, { message: React.createElement(FormattedMessage, { id: "templates.loyaltyProgramDetail.points.visit", defaultMessage: "templates.loyaltyProgramDetail.points.visit" }), points: _preferences[SCPreferences.POINTS_DAILY_VISIT] })));
+    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className), container: true, spacing: 2 }, rest, { children: [preferences[SCPreferences.CONFIGURATIONS_POST_TYPE_ENABLED].value && (_jsx(PointElement, { message: _jsx(FormattedMessage, { id: "templates.loyaltyProgramDetail.points.post", defaultMessage: "templates.loyaltyProgramDetail.points.post" }), points: _preferences[SCPreferences.POINTS_MAKE_POST] })), preferences[SCPreferences.CONFIGURATIONS_DISCUSSION_TYPE_ENABLED].value && (_jsx(PointElement, { message: _jsx(FormattedMessage, { id: "templates.loyaltyProgramDetail.points.discussion", defaultMessage: "templates.loyaltyProgramDetail.points.discussion" }), points: _preferences[SCPreferences.POINTS_MAKE_DISCUSSION] })), _jsx(PointElement, { message: _jsx(FormattedMessage, { id: "templates.loyaltyProgramDetail.points.comment", defaultMessage: "templates.loyaltyProgramDetail.points.comment" }), points: _preferences[SCPreferences.POINTS_MAKE_COMMENT] }), _jsx(PointElement, { message: _jsx(FormattedMessage, { id: "templates.loyaltyProgramDetail.points.appreciation", defaultMessage: "templates.loyaltyProgramDetail.points.appreciation" }), points: _preferences[SCPreferences.POINTS_RECEIVE_VOTE] }), _jsx(PointElement, { message: _jsx(FormattedMessage, { id: "templates.loyaltyProgramDetail.points.follower", defaultMessage: "templates.loyaltyProgramDetail.points.follower" }), points: _preferences[SCPreferences.POINTS_CONNECTION_OR_FOLLOWER] }), _jsx(PointElement, { message: _jsx(FormattedMessage, { id: "templates.loyaltyProgramDetail.points.share", defaultMessage: "templates.loyaltyProgramDetail.points.share" }), points: _preferences[SCPreferences.POINTS_SOCIAL_SHARE] }), _jsx(PointElement, { message: _jsx(FormattedMessage, { id: "templates.loyaltyProgramDetail.points.app", defaultMessage: "templates.loyaltyProgramDetail.points.app" }), points: _preferences[SCPreferences.POINTS_APP_USED] }), _jsx(PointElement, { message: _jsx(FormattedMessage, { id: "templates.loyaltyProgramDetail.points.visit", defaultMessage: "templates.loyaltyProgramDetail.points.visit" }), points: _preferences[SCPreferences.POINTS_DAILY_VISIT] })] })));
 }

package/lib/esm/components/LoyaltyProgramDetail/PrizeItemSkeleton.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { styled } from '@mui/material/styles';
 import { Typography, CardContent, Skeleton, CardActions, CardMedia, Button } from '@mui/material';
 import { Widget } from '@selfcommunity/react-ui';
@@ -29,16 +29,5 @@ const Root = styled(Widget, {
  *
  */
 export default function PrizeItemSkeleton() {
-    return (React.createElement(Root, { className: classes.root },
-        React.createElement(CardMedia, null,
-            React.createElement(Skeleton, { animation: "wave", variant: "rectangular", width: "100%", height: 137 })),
-        React.createElement(CardContent, null,
-            React.createElement(Typography, { className: classes.content },
-                React.createElement(Skeleton, { animation: "wave", height: 20, width: "80%", variant: "text" }),
-                React.createElement(Skeleton, { animation: "wave", height: 10, width: "70%", variant: "text", style: { marginTop: 8 } }))),
-        React.createElement(CardActions, { className: classes.actions },
-            React.createElement(Button, { disabled: true, variant: 'outlined', size: 'small' },
-                React.createElement(Skeleton, { animation: "wave", height: 10, width: 50, variant: "text" })),
-            React.createElement(Button, { disabled: true, variant: 'text', size: 'small' },
-                React.createElement(Skeleton, { animation: "wave", height: 20, width: 70, variant: "text" })))));
+    return (_jsxs(Root, Object.assign({ className: classes.root }, { children: [_jsx(CardMedia, { children: _jsx(Skeleton, { animation: "wave", variant: "rectangular", width: "100%", height: 137 }) }), _jsx(CardContent, { children: _jsxs(Typography, Object.assign({ className: classes.content }, { children: [_jsx(Skeleton, { animation: "wave", height: 20, width: "80%", variant: "text" }), _jsx(Skeleton, { animation: "wave", height: 10, width: "70%", variant: "text", style: { marginTop: 8 } })] })) }), _jsxs(CardActions, Object.assign({ className: classes.actions }, { children: [_jsx(Button, Object.assign({ disabled: true, variant: 'outlined', size: 'small' }, { children: _jsx(Skeleton, { animation: "wave", height: 10, width: 50, variant: "text" }) })), _jsx(Button, Object.assign({ disabled: true, variant: 'text', size: 'small' }, { children: _jsx(Skeleton, { animation: "wave", height: 20, width: 70, variant: "text" }) }))] }))] })));
 }