@selfcommunity/react-templates 0.5.0-alpha.9 → 0.5.0-mui7.14

package/lib/cjs/components/CategoryFeed/CategoryFeed.js

@@ -74,24 +74,31 @@ function CategoryFeed(inProps) {
     // CONTEXT
     const scRoutingContext = (0, react_core_1.useSCRouting)();
     const scUserContext = (0, react_core_1.useSCUser)();
-    const { preferences, features } = (0, react_core_1.useSCPreferences)();
     const { enqueueSnackbar } = (0, notistack_1.useSnackbar)();
     // REF
-    const feedRef = (0, react_1.useRef)();
+    const feedRef = (0, react_1.useRef)(null);
     // Hooks
     const { scCategory } = (0, react_core_1.useSCFetchCategory)({ id: categoryId, category });
-    const isPaymentsEnabled = (0, react_1.useMemo)(() => preferences &&
-        features &&
-        features.includes(types_1.SCFeatureName.PAYMENTS) &&
-        react_core_1.SCPreferences.CONFIGURATIONS_PAYMENTS_ENABLED in preferences &&
-        preferences[react_core_1.SCPreferences.CONFIGURATIONS_PAYMENTS_ENABLED].value, [preferences]);
+    const isAdvertisingCustomAdvEnabled = (0, react_core_1.useSCPreferenceEnabled)(react_core_1.SCPreferences.ADVERTISING_CUSTOM_ADV_ENABLED);
+    const isAdvertisingCustomAdvOnlyForAnonUsersEnabled = (0, react_core_1.useSCPreferenceEnabled)(react_core_1.SCPreferences.ADVERTISING_CUSTOM_ADV_ONLY_FOR_ANONYMOUS_USERS_ENABLED);
+    const isPaymentsEnabled = (0, react_core_1.useSCPreferencesAndFeaturesEnabled)([react_core_1.SCPreferences.CONFIGURATIONS_PAYMENTS_ENABLED], [types_1.SCFeatureName.PAYMENTS]);
+    /**
+     * Render advertising above the feed
+     */
+    function renderAdvertising() {
+        if (isAdvertisingCustomAdvEnabled &&
+            ((isAdvertisingCustomAdvOnlyForAnonUsersEnabled && scUserContext.user === null) || !isAdvertisingCustomAdvOnlyForAnonUsersEnabled)) {
+            return (0, jsx_runtime_1.jsx)(react_ui_1.CustomAdv, { position: types_1.SCCustomAdvPosition.POSITION_ABOVE_FEED_CATEGORY, categoriesId: [scCategory.id] });
+        }
+        return null;
+    }
     // HANDLERS
     const handleComposerSuccess = (feedObject) => {
         // Not insert if the category does not match
         if (feedObject.categories.findIndex((c) => c.id === scCategory.id) === -1) {
             const messageId = feedObject.scheduled_at ? 'ui.composer.scheduled.success' : 'ui.composerIconButton.composer.success';
             enqueueSnackbar((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: messageId, defaultMessage: messageId }), {
-                action: (snackbarId) => ((0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes[`${feedObject.type.toUpperCase()}_ROUTE_NAME`], react_ui_1.ContributionUtils.getRouteData(feedObject)) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composerIconButton.composer.viewContribute", defaultMessage: "ui.composerIconButton.composer.viewContribute" }) }))),
+                action: () => ((0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes[`${feedObject.type.toUpperCase()}_ROUTE_NAME`], react_ui_1.ContributionUtils.getRouteData(feedObject)) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composerIconButton.composer.viewContribute", defaultMessage: "ui.composerIconButton.composer.viewContribute" }) }))),
                 variant: 'success',
                 autoHideDuration: 7000
             });
@@ -101,7 +108,7 @@ function CategoryFeed(inProps) {
         const feedUnit = {
             type: feedObject.type,
             [feedObject.type]: feedObject,
-            seen_by_id: [],
+            seen: false,
             has_boost: false
         };
         !feedObject.draft && feedRef && feedRef.current && feedRef.current.addFeedData(feedUnit, true);
@@ -123,10 +130,10 @@ function CategoryFeed(inProps) {
             feedObject: item[item.type],
             feedObjectType: item.type,
             feedObjectActivities: item.activities ? item.activities : null,
-            markRead: scUser ? !item.seen_by_id.includes(scUser.id) : null
+            markRead: scUser ? !item.seen : null
         }), itemIdGenerator: (item) => item[item.type].id, ItemProps: FeedObjectProps, ItemSkeleton: react_ui_1.FeedObjectSkeleton, ItemSkeletonProps: {
             template: react_ui_1.SCFeedObjectTemplateType.PREVIEW
-        }, FeedSidebarProps: FeedSidebarProps, HeaderComponent: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: ((scCategory.content_only_staff && react_core_1.UserUtils.isStaff(scUserContext.user)) || !scCategory.content_only_staff) && ((0, jsx_runtime_1.jsx)(react_ui_1.InlineComposerWidget, { onSuccess: handleComposerSuccess, defaultValue: { categories: [scCategory] }, feedType: types_1.SCFeedTypologyType.CATEGORY })) }), CustomAdvProps: { categoriesId: [scCategory.id] }, enabledCustomAdvPositions: [
+        }, FeedSidebarProps: FeedSidebarProps, HeaderComponent: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [((scCategory.content_only_staff && react_core_1.UserUtils.isStaff(scUserContext.user)) || !scCategory.content_only_staff) && ((0, jsx_runtime_1.jsx)(react_ui_1.InlineComposerWidget, { onSuccess: handleComposerSuccess, defaultValue: { categories: [scCategory] }, feedType: types_1.SCFeedTypologyType.CATEGORY })), renderAdvertising()] }), CustomAdvProps: { categoriesId: [scCategory.id] }, enabledCustomAdvPositions: [
             types_1.SCCustomAdvPosition.POSITION_FEED_SIDEBAR,
             types_1.SCCustomAdvPosition.POSITION_FEED,
             types_1.SCCustomAdvPosition.POSITION_BELOW_TOPBAR

package/lib/cjs/components/Course/Course.d.ts

@@ -23,4 +23,4 @@ export interface CourseProps {
     courseId?: number;
     viewDashboard?: boolean;
 }
-export default function Course(inProps: CourseProps): JSX.Element;
+export default function Course(inProps: CourseProps): import("react/jsx-runtime").JSX.Element;

package/lib/cjs/components/EventFeed/EventFeed.js

@@ -92,7 +92,7 @@ function EventFeed(inProps) {
     const { enqueueSnackbar } = (0, notistack_1.useSnackbar)();
     const { scEvent } = (0, react_core_1.useSCFetchEvent)({ id: eventId, event });
     // REF
-    const feedRef = (0, react_1.useRef)();
+    const feedRef = (0, react_1.useRef)(null);
     // CONST
     const authUserId = scUserContext.user ? scUserContext.user.id : null;
     (0, react_1.useEffect)(() => {
@@ -119,7 +119,7 @@ function EventFeed(inProps) {
             const feedUnit = {
                 type: feedObject.type,
                 [feedObject.type]: feedObject,
-                seen_by_id: [],
+                seen: false,
                 has_boost: false
             };
             !feedObject.draft && feedRef && feedRef.current && feedRef.current.addFeedData(feedUnit, true);
@@ -146,15 +146,12 @@ function EventFeed(inProps) {
                 status !== types_1.SCEventSubscriptionStatusType.NOT_GOING))) {
         return ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ mt: 2 }, { children: (0, jsx_runtime_1.jsx)(react_ui_1.EventInfoWidget, { className: classes.root, event: scEvent }) })));
     }
-    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className), id: id, ref: feedRef, endpoint: Object.assign(Object.assign({}, api_services_1.Endpoints.GetEventFeed), { url: () => api_services_1.Endpoints.GetEventFeed.url({ id: scEvent.id }) }), widgets: _widgets, ItemComponent: react_ui_1.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: react_ui_1.FeedObjectSkeleton, ItemSkeletonProps: {
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className), id: id, ref: feedRef, endpoint: Object.assign(Object.assign({}, api_services_1.Endpoints.GetEventFeed), { url: () => api_services_1.Endpoints.GetEventFeed.url({ id: scEvent.id }) }), widgets: _widgets, ItemComponent: react_ui_1.FeedObject, itemPropsGenerator: (scUser, item) => ({
+            feedObject: item[item.type],
+            feedObjectType: item.type,
+            feedObjectActivities: item.activities ? item.activities : null,
+            markRead: scUser ? !(item === null || item === void 0 ? void 0 : item.seen) : null
+        }), itemIdGenerator: (item) => item[item.type].id, ItemProps: FeedObjectProps, ItemSkeleton: react_ui_1.FeedObjectSkeleton, ItemSkeletonProps: {
             template: react_ui_1.SCFeedObjectTemplateType.PREVIEW
         }, FeedSidebarProps: FeedSidebarProps, HeaderComponent: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_ui_1.EventInfoWidget, { className: classes.root, event: scEvent }), Boolean(scEvent &&
                     ((!scUserContext.user && scEvent.privacy === types_1.SCEventPrivacyType.PUBLIC) ||

package/lib/cjs/components/ExploreFeed/ExploreFeed.js

@@ -84,10 +84,22 @@ function ExploreFeed(inProps) {
     });
     const { id = 'explore_feed', className, widgets = WIDGETS, FeedObjectProps = {}, FeedSidebarProps = null, FeedProps = {} } = props;
     // CONTEXT
-    const { enqueueSnackbar } = (0, notistack_1.useSnackbar)();
     const scUserContext = (0, react_1.useContext)(react_core_1.SCUserContext);
+    const isAdvertisingCustomAdvEnabled = (0, react_core_1.useSCPreferenceEnabled)(react_core_1.SCPreferences.ADVERTISING_CUSTOM_ADV_ENABLED);
+    const isAdvertisingCustomAdvOnlyForAnonUsersEnabled = (0, react_core_1.useSCPreferenceEnabled)(react_core_1.SCPreferences.ADVERTISING_CUSTOM_ADV_ONLY_FOR_ANONYMOUS_USERS_ENABLED);
+    const { enqueueSnackbar } = (0, notistack_1.useSnackbar)();
     // REF
-    const feedRef = (0, react_1.useRef)();
+    const feedRef = (0, react_1.useRef)(null);
+    /**
+     * Render advertising above the feed
+     */
+    function renderAdvertising() {
+        if (isAdvertisingCustomAdvEnabled &&
+            ((isAdvertisingCustomAdvOnlyForAnonUsersEnabled && scUserContext.user === null) || !isAdvertisingCustomAdvOnlyForAnonUsersEnabled)) {
+            return (0, jsx_runtime_1.jsx)(react_ui_1.CustomAdv, { position: types_1.SCCustomAdvPosition.POSITION_ABOVE_FEED });
+        }
+        return null;
+    }
     // HANDLERS
     const handleComposerSuccess = (feedObject) => {
         const messageId = feedObject.scheduled_at ? 'ui.composer.scheduled.success' : 'ui.inlineComposerWidget.success';
@@ -99,7 +111,7 @@ function ExploreFeed(inProps) {
         const feedUnit = {
             type: feedObject.type,
             [feedObject.type]: feedObject,
-            seen_by_id: [],
+            seen: false,
             has_boost: false
         };
         !feedObject.draft && feedRef && feedRef.current && feedRef.current.addFeedData(feedUnit, true);
@@ -112,7 +124,7 @@ function ExploreFeed(inProps) {
                     const feedUnit = {
                         type: feedObject.type,
                         [feedObject.type]: feedObject,
-                        seen_by_id: [],
+                        seen: false,
                         has_boost: false
                     };
                     feedRef.current.addFeedData(feedUnit, true);
@@ -128,10 +140,10 @@ function ExploreFeed(inProps) {
             feedObject: item[item.type],
             feedObjectType: item.type,
             feedObjectActivities: item.activities ? item.activities : null,
-            markRead: scUser ? !item.seen_by_id.includes(scUser.id) : null
+            markRead: scUser ? !item.seen : null
         }), itemIdGenerator: (item) => item[item.type].id, ItemProps: FeedObjectProps, ItemSkeleton: react_ui_1.FeedObjectSkeleton, ItemSkeletonProps: {
             template: react_ui_1.SCFeedObjectTemplateType.PREVIEW
-        }, HeaderComponent: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_ui_1.InlineComposerWidget, { onSuccess: handleComposerSuccess }), react_core_1.UserUtils.isAdmin(scUserContext.user) && (0, jsx_runtime_1.jsx)(react_ui_1.OnBoardingWidget, { onGeneratedContent: handleAddGenerationContent })] }), FeedSidebarProps: FeedSidebarProps, enabledCustomAdvPositions: [
+        }, HeaderComponent: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_ui_1.InlineComposerWidget, { onSuccess: handleComposerSuccess }), react_core_1.UserUtils.isAdmin(scUserContext.user) && (0, jsx_runtime_1.jsx)(react_ui_1.OnBoardingWidget, { onGeneratedContent: handleAddGenerationContent }), renderAdvertising()] }), FeedSidebarProps: FeedSidebarProps, enabledCustomAdvPositions: [
             types_1.SCCustomAdvPosition.POSITION_FEED_SIDEBAR,
             types_1.SCCustomAdvPosition.POSITION_FEED,
             types_1.SCCustomAdvPosition.POSITION_BELOW_TOPBAR

package/lib/cjs/components/FeedObjectDetail/FeedObjectDetail.js

@@ -98,6 +98,6 @@ function FeedObjectDetail(inProps) {
     if (!obj) {
         return (0, jsx_runtime_1.jsx)(Skeleton_1.default, {});
     }
-    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className) }, { children: (0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ container: true, spacing: 2 }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ item: true, xs: 12, md: 7 }, { children: [(0, jsx_runtime_1.jsx)(react_ui_1.FeedObject, Object.assign({}, FeedObjectProps, { feedObject: obj, template: react_ui_1.SCFeedObjectTemplateType.DETAIL, onReply: handleReply })), renderAdvertising(), commentsEnabled && ((0, jsx_runtime_1.jsx)(react_ui_1.CommentsFeedObject, Object.assign({ showTitle: true, feedObject: obj, comments: comments }, CommentsFeedObjectProps), `comments_${obj.id}`))] })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, md: 5 }, { children: (0, jsx_runtime_1.jsx)(material_1.Hidden, Object.assign({ mdDown: true }, { children: (0, jsx_runtime_1.jsx)(react_ui_1.StickyBox, Object.assign({}, FeedSidebarProps, { children: (0, jsx_runtime_1.jsx)(react_ui_1.RelatedFeedObjectsWidget, Object.assign({ feedObject: obj, feedObjectId: obj.id }, RelatedFeedObjectProps), `related_${obj.id}`) })) })) }))] })) })));
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className) }, { children: (0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ container: true, width: "100%", spacing: 2 }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ size: { md: 7 } }, { children: [(0, jsx_runtime_1.jsx)(react_ui_1.FeedObject, Object.assign({}, FeedObjectProps, { feedObject: obj, template: react_ui_1.SCFeedObjectTemplateType.DETAIL, onReply: handleReply })), renderAdvertising(), commentsEnabled && ((0, jsx_runtime_1.jsx)(react_ui_1.CommentsFeedObject, Object.assign({ showTitle: true, feedObject: obj, comments: comments }, CommentsFeedObjectProps), `comments_${obj.id}`))] })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: { md: 5 } }, { children: (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ sx: { display: { sx: 'none', md: 'block' } } }, { children: (0, jsx_runtime_1.jsx)(react_ui_1.StickyBox, Object.assign({}, FeedSidebarProps, { children: (0, jsx_runtime_1.jsx)(react_ui_1.RelatedFeedObjectsWidget, Object.assign({ feedObject: obj, feedObjectId: obj.id }, RelatedFeedObjectProps), `related_${obj.id}`) })) })) }))] })) })));
 }
 exports.default = FeedObjectDetail;

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

@@ -33,6 +33,6 @@ const Root = (0, material_1.styled)(material_1.Box, {
  */
 function FeedObjectDetailSkeleton(props) {
     const { FeedObjectSkeletonProps = {}, CommentsFeedObjectSkeletonProps = {}, RelatedFeedObjectsSkeletonProps = {} } = props;
-    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: classes.root }, { children: (0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ container: true, spacing: 2 }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ item: true, xs: 12, md: 7 }, { children: [(0, jsx_runtime_1.jsx)(react_ui_1.FeedObjectSkeleton, Object.assign({ template: react_ui_1.SCFeedObjectTemplateType.DETAIL }, FeedObjectSkeletonProps)), (0, jsx_runtime_1.jsx)(react_ui_1.CommentsFeedObjectSkeleton, Object.assign({ count: 4 }, CommentsFeedObjectSkeletonProps))] })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, md: 5 }, { children: (0, jsx_runtime_1.jsx)(react_ui_1.RelatedFeedObjectsWidgetSkeleton, Object.assign({}, RelatedFeedObjectsSkeletonProps)) }))] })) })));
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: classes.root }, { children: (0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ container: true, width: "100%", spacing: 2 }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ size: { md: 7 } }, { children: [(0, jsx_runtime_1.jsx)(react_ui_1.FeedObjectSkeleton, Object.assign({ template: react_ui_1.SCFeedObjectTemplateType.DETAIL }, FeedObjectSkeletonProps)), (0, jsx_runtime_1.jsx)(react_ui_1.CommentsFeedObjectSkeleton, Object.assign({ count: 4 }, CommentsFeedObjectSkeletonProps))] })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: { md: 5 } }, { children: (0, jsx_runtime_1.jsx)(react_ui_1.RelatedFeedObjectsWidgetSkeleton, Object.assign({}, RelatedFeedObjectsSkeletonProps)) }))] })) })));
 }
 exports.default = FeedObjectDetailSkeleton;

package/lib/cjs/components/GroupFeed/GroupFeed.js

@@ -76,9 +76,9 @@ function GroupFeed(inProps) {
     const scUserContext = (0, react_core_1.useSCUser)();
     const scGroupsManager = scUserContext.managers.groups;
     const { enqueueSnackbar } = (0, notistack_1.useSnackbar)();
-    const { scGroup, setSCGroup } = (0, react_core_1.useSCFetchGroup)({ id: groupId, group });
+    const { scGroup } = (0, react_core_1.useSCFetchGroup)({ id: groupId, group });
     // REF
-    const feedRef = (0, react_1.useRef)();
+    const feedRef = (0, react_1.useRef)(null);
     // CONST
     const authUserId = scUserContext.user ? scUserContext.user.id : null;
     (0, react_1.useEffect)(() => {
@@ -95,7 +95,7 @@ function GroupFeed(inProps) {
         var _a;
         const messageId = feedObject.scheduled_at ? 'ui.composer.scheduled.success' : 'ui.composerIconButton.composer.success';
         enqueueSnackbar((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: messageId, defaultMessage: messageId }), {
-            action: (snackbarId) => ((0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes[`${feedObject.type.toUpperCase()}_ROUTE_NAME`], react_ui_1.ContributionUtils.getRouteData(feedObject)) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composerIconButton.composer.viewContribute", defaultMessage: "ui.composerIconButton.composer.viewContribute" }) }))),
+            action: () => ((0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes[`${feedObject.type.toUpperCase()}_ROUTE_NAME`], react_ui_1.ContributionUtils.getRouteData(feedObject)) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composerIconButton.composer.viewContribute", defaultMessage: "ui.composerIconButton.composer.viewContribute" }) }))),
             variant: 'success',
             autoHideDuration: 7000
         });
@@ -104,7 +104,7 @@ function GroupFeed(inProps) {
             const feedUnit = {
                 type: feedObject.type,
                 [feedObject.type]: feedObject,
-                seen_by_id: [],
+                seen: false,
                 has_boost: false
             };
             !feedObject.draft && feedRef && feedRef.current && feedRef.current.addFeedData(feedUnit, true);
@@ -123,15 +123,12 @@ function GroupFeed(inProps) {
     else if (scGroup && status !== types_1.SCGroupSubscriptionStatusType.SUBSCRIBED) {
         return (0, jsx_runtime_1.jsx)(react_ui_1.GroupInfoWidget, { className: classes.root, groupId: scGroup === null || scGroup === void 0 ? void 0 : scGroup.id });
     }
-    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className), id: id, ref: feedRef, endpoint: Object.assign(Object.assign({}, api_services_1.Endpoints.GetGroupFeed), { url: () => api_services_1.Endpoints.GetGroupFeed.url({ id: scGroup.id }) }), widgets: _widgets, ItemComponent: react_ui_1.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: react_ui_1.FeedObjectSkeleton, ItemSkeletonProps: {
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className), id: id, ref: feedRef, endpoint: Object.assign(Object.assign({}, api_services_1.Endpoints.GetGroupFeed), { url: () => api_services_1.Endpoints.GetGroupFeed.url({ id: scGroup.id }) }), widgets: _widgets, ItemComponent: react_ui_1.FeedObject, itemPropsGenerator: (scUser, item) => ({
+            feedObject: item[item.type],
+            feedObjectType: item.type,
+            feedObjectActivities: item.activities ? item.activities : null,
+            markRead: scUser ? !(item === null || item === void 0 ? void 0 : item.seen) : null
+        }), itemIdGenerator: (item) => item[item.type].id, ItemProps: FeedObjectProps, ItemSkeleton: react_ui_1.FeedObjectSkeleton, ItemSkeletonProps: {
             template: react_ui_1.SCFeedObjectTemplateType.PREVIEW
         }, FeedSidebarProps: FeedSidebarProps, HeaderComponent: scGroup &&
             scGroup.subscription_status === types_1.SCGroupSubscriptionStatusType.SUBSCRIBED && ((0, jsx_runtime_1.jsx)(react_ui_1.InlineComposerWidget, { onSuccess: handleComposerSuccess, defaultValue: { group: scGroup }, label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "templates.groupFeed.composer.label", defaultMessage: "templates.groupFeed.composer.label" }), feedType: types_1.SCFeedTypologyType.GROUP })), CustomAdvProps: { position: types_1.SCCustomAdvPosition.POSITION_FEED, groupsId: [scGroup.id] }, enabledCustomAdvPositions: [

package/lib/cjs/components/LoyaltyProgramDetail/LoyaltyProgramDetail.js

@@ -117,7 +117,7 @@ function LoyaltyProgramDetail(inProps) {
                 }
             });
         })
-            .catch((error) => {
+            .catch(() => {
             setOpen(false);
             let _snackBar = enqueueSnackbar((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "templates.loyaltyProgramDetail.prize.request.error", defaultMessage: "templates.loyaltyProgramDetail.prize.request.error" }), {
                 variant: 'error',
@@ -184,6 +184,6 @@ function LoyaltyProgramDetail(inProps) {
     if (loading) {
         return (0, jsx_runtime_1.jsx)(Skeleton_1.default, {});
     }
-    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [points !== 0 && ((0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: classes.title, variant: "h5" }, { children: [!isMobile && (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.loyaltyProgramWidget.title", defaultMessage: "ui.loyaltyProgramWidget.title" }), (0, jsx_runtime_1.jsx)(material_1.Chip, { className: classes.userPoints, component: "span", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "templates.loyaltyProgramDetail.userPoints", defaultMessage: "templates.loyaltyProgramDetail.userPoints", values: { total: points } }) })] }))), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.sectionTitle }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "templates.loyaltyProgramDetail.community", defaultMessage: "templates.loyaltyProgramDetail.community" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.sectionInfo }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "templates.loyaltyProgramDetail.description", defaultMessage: "templates.loyaltyProgramDetail.description" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.sectionTitle }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "templates.loyaltyProgramDetail.listTitle", defaultMessage: "templates.loyaltyProgramDetail.listTitle" }) })), (0, jsx_runtime_1.jsx)(PointsList_1.default, { className: classes.pointsSection }), prizes.length !== 0 && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.sectionTitle }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "templates.loyaltyProgramDetail.prizes", defaultMessage: "templates.loyaltyProgramDetail.prizes" }) }))), (0, jsx_runtime_1.jsx)(react_ui_1.InfiniteScroll, Object.assign({ dataLength: prizes.length, next: handleNext, hasMoreNext: Boolean(next), loaderNext: (0, jsx_runtime_1.jsx)(PrizeItemSkeleton_1.default, {}), endMessage: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: prizes.length !== 0 ? ((0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: classes.endMessage }, { children: [(0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "templates.loyaltyProgramDetail.content.end.message", defaultMessage: "templates.loyaltyProgramDetail.content.end.message" }), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ color: 'secondary', onClick: handleScrollUp }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "templates.loyaltyProgramDetail.content.end.button", defaultMessage: "templates.loyaltyProgramDetail.content.end.button" }) }))] }))) : null }) }, { children: (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ container: true, spacing: !isMobile ? 3 : 0, direction: isMobile ? 'column' : 'row', className: classes.prizeSection }, { children: prizes.map((prize) => ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, sm: 12, md: 6, lg: 4, xl: 3 }, { children: (0, jsx_runtime_1.jsxs)(material_1.Card, Object.assign({ className: classes.card }, { children: [(0, jsx_runtime_1.jsx)(material_1.CardMedia, { component: "img", image: prize.image }), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.prizePoints }, { children: (0, jsx_runtime_1.jsx)(material_1.Chip, { className: points <= prize.points ? classes.notRequestable : null, label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "templates.loyaltyProgramDetail.prize.points", defaultMessage: "templates.loyaltyProgramDetail.prize.points", values: { total: prize.points } }) }) })), (0, jsx_runtime_1.jsxs)(material_1.CardContent, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", className: classes.cardTitle }, { children: prize.title })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", className: classes.cardContent }, { children: prize.description }))] }), (0, jsx_runtime_1.jsxs)(material_1.CardActions, { children: [prize.link && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "medium", color: "secondary", href: prize.link, target: "_blank", className: classes.actionButton }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "templates.loyaltyProgramDetail.button.more", defaultMessage: "templates.loyaltyProgramDetail.button.more" }) }))), ((!prize.link && prize.active && points >= prize.points) || (prize.active && points >= prize.points)) && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: "outlined", className: classes.actionButton, disabled: points < prize.points, onClick: () => handleOpenAlert(prize.id) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "templates.loyaltyProgramDetail.button.request", defaultMessage: "templates.loyaltyProgramDetail.button.request" }) })))] })] })) }), prize.id))) })) })), open && ((0, jsx_runtime_1.jsx)(react_ui_1.ConfirmDialog, { open: open, title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "templates.loyaltyProgramDetail.dialog.msg", defaultMessage: "templates.loyaltyProgramDetail.dialog.msg" }), btnConfirm: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "templates.loyaltyProgramDetail.dialog.confirm", defaultMessage: "templates.loyaltyProgramDetail.dialog.confirm" }), onConfirm: () => requestPrize(prizeRequested), onClose: () => setOpen(false) }))] })));
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [points !== 0 && ((0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: classes.title, variant: "h5" }, { children: [!isMobile && (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.loyaltyProgramWidget.title", defaultMessage: "ui.loyaltyProgramWidget.title" }), (0, jsx_runtime_1.jsx)(material_1.Chip, { className: classes.userPoints, component: "span", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "templates.loyaltyProgramDetail.userPoints", defaultMessage: "templates.loyaltyProgramDetail.userPoints", values: { total: points } }) })] }))), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.sectionTitle }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "templates.loyaltyProgramDetail.community", defaultMessage: "templates.loyaltyProgramDetail.community" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.sectionInfo }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "templates.loyaltyProgramDetail.description", defaultMessage: "templates.loyaltyProgramDetail.description" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.sectionTitle }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "templates.loyaltyProgramDetail.listTitle", defaultMessage: "templates.loyaltyProgramDetail.listTitle" }) })), (0, jsx_runtime_1.jsx)(PointsList_1.default, { className: classes.pointsSection }), prizes.length !== 0 && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.sectionTitle }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "templates.loyaltyProgramDetail.prizes", defaultMessage: "templates.loyaltyProgramDetail.prizes" }) }))), (0, jsx_runtime_1.jsx)(react_ui_1.InfiniteScroll, Object.assign({ dataLength: prizes.length, next: handleNext, hasMoreNext: Boolean(next), loaderNext: (0, jsx_runtime_1.jsx)(PrizeItemSkeleton_1.default, {}), endMessage: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: prizes.length !== 0 ? ((0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: classes.endMessage }, { children: [(0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "templates.loyaltyProgramDetail.content.end.message", defaultMessage: "templates.loyaltyProgramDetail.content.end.message" }), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ color: 'secondary', onClick: handleScrollUp }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "templates.loyaltyProgramDetail.content.end.button", defaultMessage: "templates.loyaltyProgramDetail.content.end.button" }) }))] }))) : null }) }, { children: (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ container: true, width: "100%", spacing: !isMobile ? 3 : 0, direction: isMobile ? 'column' : 'row', className: classes.prizeSection }, { children: prizes.map((prize) => ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: { md: 6, lg: 4, xl: 3 } }, { children: (0, jsx_runtime_1.jsxs)(material_1.Card, Object.assign({ className: classes.card }, { children: [(0, jsx_runtime_1.jsx)(material_1.CardMedia, { component: "img", image: prize.image }), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.prizePoints }, { children: (0, jsx_runtime_1.jsx)(material_1.Chip, { className: points <= prize.points ? classes.notRequestable : null, label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "templates.loyaltyProgramDetail.prize.points", defaultMessage: "templates.loyaltyProgramDetail.prize.points", values: { total: prize.points } }) }) })), (0, jsx_runtime_1.jsxs)(material_1.CardContent, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", className: classes.cardTitle }, { children: prize.title })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", className: classes.cardContent }, { children: prize.description }))] }), (0, jsx_runtime_1.jsxs)(material_1.CardActions, { children: [prize.link && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "medium", color: "secondary", href: prize.link, target: "_blank", className: classes.actionButton }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "templates.loyaltyProgramDetail.button.more", defaultMessage: "templates.loyaltyProgramDetail.button.more" }) }))), ((!prize.link && prize.active && points >= prize.points) || (prize.active && points >= prize.points)) && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: "outlined", className: classes.actionButton, disabled: points < prize.points, onClick: () => handleOpenAlert(prize.id) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "templates.loyaltyProgramDetail.button.request", defaultMessage: "templates.loyaltyProgramDetail.button.request" }) })))] })] })) }), prize.id))) })) })), open && ((0, jsx_runtime_1.jsx)(react_ui_1.ConfirmDialog, { open: open, title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "templates.loyaltyProgramDetail.dialog.msg", defaultMessage: "templates.loyaltyProgramDetail.dialog.msg" }), btnConfirm: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "templates.loyaltyProgramDetail.dialog.confirm", defaultMessage: "templates.loyaltyProgramDetail.dialog.confirm" }), onConfirm: () => requestPrize(prizeRequested), onClose: () => setOpen(false) }))] })));
 }
 exports.default = LoyaltyProgramDetail;

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

@@ -25,7 +25,7 @@ const classes = {
 };
 function PointElement({ message, points }) {
     if (points > 0) {
-        return ((0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ item: true, xs: 12, sm: 12, md: 6 }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ component: "div", className: classes.element }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: message }), (0, jsx_runtime_1.jsxs)(material_1.Typography, { children: ["+", (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "templates.loyaltyProgramDetail.points", defaultMessage: "templates.loyaltyProgramDetail.points", values: { total: points } })] })] })), (0, jsx_runtime_1.jsx)(material_1.Divider, {})] })));
+        return ((0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ size: { md: 6 } }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ component: "div", className: classes.element }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: message }), (0, jsx_runtime_1.jsxs)(material_1.Typography, { children: ["+", (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "templates.loyaltyProgramDetail.points", defaultMessage: "templates.loyaltyProgramDetail.points", values: { total: points } })] })] })), (0, jsx_runtime_1.jsx)(material_1.Divider, {})] })));
     }
 }
 exports.PointElement = PointElement;
@@ -51,6 +51,6 @@ function PointsList(props) {
     /**
      * Renders the component (if not hidden by autoHide prop)
      */
-    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className), container: true, spacing: 2 }, rest, { children: [preferences[react_core_1.SCPreferences.CONFIGURATIONS_POST_TYPE_ENABLED].value && ((0, jsx_runtime_1.jsx)(PointElement, { message: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "templates.loyaltyProgramDetail.points.post", defaultMessage: "templates.loyaltyProgramDetail.points.post" }), points: _preferences[react_core_1.SCPreferences.POINTS_MAKE_POST] })), preferences[react_core_1.SCPreferences.CONFIGURATIONS_DISCUSSION_TYPE_ENABLED].value && ((0, jsx_runtime_1.jsx)(PointElement, { message: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "templates.loyaltyProgramDetail.points.discussion", defaultMessage: "templates.loyaltyProgramDetail.points.discussion" }), points: _preferences[react_core_1.SCPreferences.POINTS_MAKE_DISCUSSION] })), (0, jsx_runtime_1.jsx)(PointElement, { message: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "templates.loyaltyProgramDetail.points.comment", defaultMessage: "templates.loyaltyProgramDetail.points.comment" }), points: _preferences[react_core_1.SCPreferences.POINTS_MAKE_COMMENT] }), (0, jsx_runtime_1.jsx)(PointElement, { message: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "templates.loyaltyProgramDetail.points.appreciation", defaultMessage: "templates.loyaltyProgramDetail.points.appreciation" }), points: _preferences[react_core_1.SCPreferences.POINTS_RECEIVE_VOTE] }), (0, jsx_runtime_1.jsx)(PointElement, { message: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "templates.loyaltyProgramDetail.points.follower", defaultMessage: "templates.loyaltyProgramDetail.points.follower" }), points: _preferences[react_core_1.SCPreferences.POINTS_CONNECTION_OR_FOLLOWER] }), (0, jsx_runtime_1.jsx)(PointElement, { message: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "templates.loyaltyProgramDetail.points.share", defaultMessage: "templates.loyaltyProgramDetail.points.share" }), points: _preferences[react_core_1.SCPreferences.POINTS_SOCIAL_SHARE] }), (0, jsx_runtime_1.jsx)(PointElement, { message: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "templates.loyaltyProgramDetail.points.app", defaultMessage: "templates.loyaltyProgramDetail.points.app" }), points: _preferences[react_core_1.SCPreferences.POINTS_APP_USED] }), (0, jsx_runtime_1.jsx)(PointElement, { message: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "templates.loyaltyProgramDetail.points.visit", defaultMessage: "templates.loyaltyProgramDetail.points.visit" }), points: _preferences[react_core_1.SCPreferences.POINTS_DAILY_VISIT] })] })));
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className), container: true, width: "100%", spacing: 2 }, rest, { children: [preferences[react_core_1.SCPreferences.CONFIGURATIONS_POST_TYPE_ENABLED].value && ((0, jsx_runtime_1.jsx)(PointElement, { message: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "templates.loyaltyProgramDetail.points.post", defaultMessage: "templates.loyaltyProgramDetail.points.post" }), points: _preferences[react_core_1.SCPreferences.POINTS_MAKE_POST] })), preferences[react_core_1.SCPreferences.CONFIGURATIONS_DISCUSSION_TYPE_ENABLED].value && ((0, jsx_runtime_1.jsx)(PointElement, { message: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "templates.loyaltyProgramDetail.points.discussion", defaultMessage: "templates.loyaltyProgramDetail.points.discussion" }), points: _preferences[react_core_1.SCPreferences.POINTS_MAKE_DISCUSSION] })), (0, jsx_runtime_1.jsx)(PointElement, { message: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "templates.loyaltyProgramDetail.points.comment", defaultMessage: "templates.loyaltyProgramDetail.points.comment" }), points: _preferences[react_core_1.SCPreferences.POINTS_MAKE_COMMENT] }), (0, jsx_runtime_1.jsx)(PointElement, { message: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "templates.loyaltyProgramDetail.points.appreciation", defaultMessage: "templates.loyaltyProgramDetail.points.appreciation" }), points: _preferences[react_core_1.SCPreferences.POINTS_RECEIVE_VOTE] }), (0, jsx_runtime_1.jsx)(PointElement, { message: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "templates.loyaltyProgramDetail.points.follower", defaultMessage: "templates.loyaltyProgramDetail.points.follower" }), points: _preferences[react_core_1.SCPreferences.POINTS_CONNECTION_OR_FOLLOWER] }), (0, jsx_runtime_1.jsx)(PointElement, { message: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "templates.loyaltyProgramDetail.points.share", defaultMessage: "templates.loyaltyProgramDetail.points.share" }), points: _preferences[react_core_1.SCPreferences.POINTS_SOCIAL_SHARE] }), (0, jsx_runtime_1.jsx)(PointElement, { message: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "templates.loyaltyProgramDetail.points.app", defaultMessage: "templates.loyaltyProgramDetail.points.app" }), points: _preferences[react_core_1.SCPreferences.POINTS_APP_USED] }), (0, jsx_runtime_1.jsx)(PointElement, { message: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "templates.loyaltyProgramDetail.points.visit", defaultMessage: "templates.loyaltyProgramDetail.points.visit" }), points: _preferences[react_core_1.SCPreferences.POINTS_DAILY_VISIT] })] })));
 }
 exports.default = PointsList;

package/lib/cjs/components/LoyaltyProgramDetail/Skeleton.js

@@ -45,6 +45,6 @@ const Root = (0, material_1.styled)(material_1.Box, {
 function LoyaltyProgramDetailSkeleton() {
     const theme = (0, material_1.useTheme)();
     const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'));
-    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: classes.root }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: classes.title, component: 'div' }, { children: [!isMobile && (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 30, width: 140, variant: "text" }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "circular", width: 172, height: 30, className: classes.chip })] })), (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: classes.sectionTitle }, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 20, width: '50%', variant: "text" }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 17, width: '80%', variant: "text", className: classes.subTitle })] })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.sectionTitle }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 20, width: 146 }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ container: true, spacing: 2, className: classes.pointsList }, { children: [...Array(8)].map((prize, index) => ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, sm: 12, md: 6 }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 15, width: "100%" }) }), index))) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.sectionTitle }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 20, width: 140, variant: "text" }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ container: true, spacing: isMobile ? 3 : 6 }, { children: [...Array(6)].map((prize, index) => ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, sm: 12, md: 6, lg: 4 }, { children: (0, jsx_runtime_1.jsx)(PrizeItemSkeleton_1.default, {}) }), index))) }))] })));
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: classes.root }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: classes.title, component: 'div' }, { children: [!isMobile && (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 30, width: 140, variant: "text" }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "circular", width: 172, height: 30, className: classes.chip })] })), (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: classes.sectionTitle }, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 20, width: '50%', variant: "text" }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 17, width: '80%', variant: "text", className: classes.subTitle })] })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.sectionTitle }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 20, width: 146 }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ container: true, width: "100%", spacing: 2, className: classes.pointsList }, { children: [...Array(8)].map((_prize, index) => ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: { md: 6 } }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 15, width: "100%" }) }), index))) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.sectionTitle }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 20, width: 140, variant: "text" }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ container: true, width: "100%", spacing: isMobile ? 3 : 6 }, { children: [...Array(6)].map((_prize, index) => ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: { md: 6, lg: 4 } }, { children: (0, jsx_runtime_1.jsx)(PrizeItemSkeleton_1.default, {}) }), index))) }))] })));
 }
 exports.default = LoyaltyProgramDetailSkeleton;

package/lib/cjs/components/MainFeed/MainFeed.js

@@ -85,9 +85,21 @@ function MainFeed(inProps) {
     const { id = 'main_feed', className, widgets = WIDGETS, FeedObjectProps = {}, FeedSidebarProps = null, FeedProps = {} } = props;
     //CONTEXT
     const scUserContext = (0, react_1.useContext)(react_core_1.SCUserContext);
+    const isAdvertisingCustomAdvEnabled = (0, react_core_1.useSCPreferenceEnabled)(react_core_1.SCPreferences.ADVERTISING_CUSTOM_ADV_ENABLED);
+    const isAdvertisingCustomAdvOnlyForAnonUsersEnabled = (0, react_core_1.useSCPreferenceEnabled)(react_core_1.SCPreferences.ADVERTISING_CUSTOM_ADV_ONLY_FOR_ANONYMOUS_USERS_ENABLED);
     const { enqueueSnackbar } = (0, notistack_1.useSnackbar)();
     // REF
-    const feedRef = (0, react_1.useRef)();
+    const feedRef = (0, react_1.useRef)(null);
+    /**
+     * Render advertising above the feed
+     */
+    function renderAdvertising() {
+        if (isAdvertisingCustomAdvEnabled &&
+            ((isAdvertisingCustomAdvOnlyForAnonUsersEnabled && scUserContext.user === null) || !isAdvertisingCustomAdvOnlyForAnonUsersEnabled)) {
+            return (0, jsx_runtime_1.jsx)(react_ui_1.CustomAdv, { position: types_1.SCCustomAdvPosition.POSITION_ABOVE_FEED });
+        }
+        return null;
+    }
     // Ckeck user is authenticated
     if (!scUserContext.user) {
         return null;
@@ -103,7 +115,7 @@ function MainFeed(inProps) {
         const feedUnit = {
             type: feedObject.type,
             [feedObject.type]: feedObject,
-            seen_by_id: [],
+            seen: false,
             has_boost: false
         };
         !feedObject.draft && feedRef && feedRef.current && feedRef.current.addFeedData(feedUnit, true);
@@ -116,7 +128,7 @@ function MainFeed(inProps) {
                     const feedUnit = {
                         type: feedObject.type,
                         [feedObject.type]: feedObject,
-                        seen_by_id: [],
+                        seen: false,
                         has_boost: false
                     };
                     feedRef.current.addFeedData(feedUnit, true);
@@ -128,10 +140,10 @@ function MainFeed(inProps) {
             feedObject: item[item.type],
             feedObjectType: item.type,
             feedObjectActivities: item.activities ? item.activities : null,
-            markRead: scUser ? !item.seen_by_id.includes(scUser.id) : null
+            markRead: scUser ? !item.seen : null
         }), itemIdGenerator: (item) => item[item.type].id, ItemProps: FeedObjectProps, ItemSkeleton: react_ui_1.FeedObjectSkeleton, ItemSkeletonProps: {
             template: react_ui_1.SCFeedObjectTemplateType.PREVIEW
-        }, FeedSidebarProps: FeedSidebarProps, HeaderComponent: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_ui_1.InlineComposerWidget, { onSuccess: handleComposerSuccess }), react_core_1.UserUtils.isAdmin(scUserContext.user) && (0, jsx_runtime_1.jsx)(react_ui_1.OnBoardingWidget, { onGeneratedContent: handleAddGenerationContent })] }), requireAuthentication: true, disablePaginationLinks: true, enabledCustomAdvPositions: [
+        }, FeedSidebarProps: FeedSidebarProps, HeaderComponent: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_ui_1.InlineComposerWidget, { onSuccess: handleComposerSuccess }), react_core_1.UserUtils.isAdmin(scUserContext.user) && (0, jsx_runtime_1.jsx)(react_ui_1.OnBoardingWidget, { onGeneratedContent: handleAddGenerationContent }), renderAdvertising()] }), requireAuthentication: true, disablePaginationLinks: true, enabledCustomAdvPositions: [
             types_1.SCCustomAdvPosition.POSITION_FEED_SIDEBAR,
             types_1.SCCustomAdvPosition.POSITION_FEED,
             types_1.SCCustomAdvPosition.POSITION_BELOW_TOPBAR

package/lib/cjs/components/UserFeed/UserFeed.js

@@ -89,7 +89,7 @@ function UserFeed(inProps) {
     // Hooks
     const { scUser } = (0, react_core_1.useSCFetchUser)({ id: userId, user });
     // REF
-    const feedRef = (0, react_1.useRef)();
+    const feedRef = (0, react_1.useRef)(null);
     // HANDLERS
     const handleComposerSuccess = (feedObject) => {
         const messageId = feedObject.scheduled_at ? 'ui.composer.scheduled.success' : 'ui.inlineComposerWidget.success';
@@ -101,7 +101,7 @@ function UserFeed(inProps) {
         const feedUnit = {
             type: feedObject.type,
             [feedObject.type]: feedObject,
-            seen_by_id: [],
+            seen: false,
             has_boost: false
         };
         !feedObject.draft && feedRef && feedRef.current && feedRef.current.addFeedData(feedUnit, true);
@@ -113,7 +113,7 @@ function UserFeed(inProps) {
     if (scUser === null) {
         return (0, jsx_runtime_1.jsx)(index_1.UserFeedSkeleton, {});
     }
-    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className), ref: feedRef, endpoint: Object.assign(Object.assign({}, api_services_1.Endpoints.UserFeed), { url: () => api_services_1.Endpoints.UserFeed.url({ id: scUser.id }) }), widgets: _widgets, ItemComponent: react_ui_1.FeedObject, itemPropsGenerator: (scUser, item) => ({
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className), ref: feedRef, endpoint: Object.assign(Object.assign({}, api_services_1.Endpoints.UserFeed), { url: () => api_services_1.Endpoints.UserFeed.url({ id: scUser.id }) }), widgets: _widgets, ItemComponent: react_ui_1.FeedObject, itemPropsGenerator: (_scUser, item) => ({
             feedObject: item[item.type],
             feedObjectType: item.type,
             feedObjectActivities: item.activities ? item.activities : null

package/lib/cjs/components/UserProfile/UserProfile.js

@@ -256,6 +256,6 @@ function UserProfile(inProps) {
                                         })
                                     } }) }))), scUser.location && ((0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: classes.info }, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, { children: "add_location_alt" }), " ", scUser.location] }))), taggingEnabled && ((0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ direction: "row", spacing: 2, className: classes.tags }, { children: scUser.tags
                                     .filter((t) => t.visible)
-                                    .map((tag) => ((0, jsx_runtime_1.jsx)(react_ui_1.TagChip, { tag: tag, clickable: false, disposable: false }, tag.id))) }), `tags_${scUser.id}`)), (0, jsx_runtime_1.jsx)(UserFeed_1.default, Object.assign({ className: classes.feed, user: scUser, widgets: _widgets, FeedObjectProps: FeedObjectProps, FeedSidebarProps: FeedSidebarProps }, UserFeedProps), `feed_${scUser.id}`)] })) })) }))] })));
+                                    .map((tag) => ((0, jsx_runtime_1.jsx)(react_ui_1.TagChip, { tag: tag, clickable: false, disposable: false, showDescription: true }, tag.id))) }), `tags_${scUser.id}`)), (0, jsx_runtime_1.jsx)(UserFeed_1.default, Object.assign({ className: classes.feed, user: scUser, widgets: _widgets, FeedObjectProps: FeedObjectProps, FeedSidebarProps: FeedSidebarProps }, UserFeedProps), `feed_${scUser.id}`)] })) })) }))] })));
 }
 exports.default = UserProfile;

package/lib/esm/components/CategoryFeed/CategoryFeed.js

@@ -1,9 +1,9 @@
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo, useRef } from 'react';
 import { styled } from '@mui/material';
-import { CategoryTrendingFeedWidget, CategoryTrendingUsersWidget, ContributionUtils, Feed, FeedObject, FeedObjectSkeleton, HiddenPurchasableContent, InlineComposerWidget, SCFeedObjectTemplateType } from '@selfcommunity/react-ui';
+import { CategoryTrendingFeedWidget, CategoryTrendingUsersWidget, ContributionUtils, Feed, FeedObject, FeedObjectSkeleton, HiddenPurchasableContent, InlineComposerWidget, SCFeedObjectTemplateType, CustomAdv } from '@selfcommunity/react-ui';
 import { Endpoints } from '@selfcommunity/api-services';
-import { Link, SCPreferences, SCRoutes, UserUtils, useSCFetchCategory, useSCPreferences, useSCRouting, useSCUser } from '@selfcommunity/react-core';
+import { Link, SCPreferences, SCRoutes, UserUtils, useSCFetchCategory, useSCPreferenceEnabled, useSCPreferencesAndFeaturesEnabled, useSCRouting, useSCUser } from '@selfcommunity/react-core';
 import { SCCustomAdvPosition, SCFeatureName, SCFeedTypologyType } from '@selfcommunity/types';
 import { CategoryFeedSkeleton } from './index';
 import { useThemeProps } from '@mui/system';
@@ -71,24 +71,31 @@ export default function CategoryFeed(inProps) {
     // CONTEXT
     const scRoutingContext = useSCRouting();
     const scUserContext = useSCUser();
-    const { preferences, features } = useSCPreferences();
     const { enqueueSnackbar } = useSnackbar();
     // REF
-    const feedRef = useRef();
+    const feedRef = useRef(null);
     // Hooks
     const { scCategory } = useSCFetchCategory({ id: categoryId, category });
-    const isPaymentsEnabled = useMemo(() => preferences &&
-        features &&
-        features.includes(SCFeatureName.PAYMENTS) &&
-        SCPreferences.CONFIGURATIONS_PAYMENTS_ENABLED in preferences &&
-        preferences[SCPreferences.CONFIGURATIONS_PAYMENTS_ENABLED].value, [preferences]);
+    const isAdvertisingCustomAdvEnabled = useSCPreferenceEnabled(SCPreferences.ADVERTISING_CUSTOM_ADV_ENABLED);
+    const isAdvertisingCustomAdvOnlyForAnonUsersEnabled = useSCPreferenceEnabled(SCPreferences.ADVERTISING_CUSTOM_ADV_ONLY_FOR_ANONYMOUS_USERS_ENABLED);
+    const isPaymentsEnabled = useSCPreferencesAndFeaturesEnabled([SCPreferences.CONFIGURATIONS_PAYMENTS_ENABLED], [SCFeatureName.PAYMENTS]);
+    /**
+     * Render advertising above the feed
+     */
+    function renderAdvertising() {
+        if (isAdvertisingCustomAdvEnabled &&
+            ((isAdvertisingCustomAdvOnlyForAnonUsersEnabled && scUserContext.user === null) || !isAdvertisingCustomAdvOnlyForAnonUsersEnabled)) {
+            return _jsx(CustomAdv, { position: SCCustomAdvPosition.POSITION_ABOVE_FEED_CATEGORY, categoriesId: [scCategory.id] });
+        }
+        return null;
+    }
     // HANDLERS
     const handleComposerSuccess = (feedObject) => {
         // Not insert if the category does not match
         if (feedObject.categories.findIndex((c) => c.id === scCategory.id) === -1) {
             const messageId = feedObject.scheduled_at ? 'ui.composer.scheduled.success' : 'ui.composerIconButton.composer.success';
             enqueueSnackbar(_jsx(FormattedMessage, { id: messageId, defaultMessage: messageId }), {
-                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" }) }))),
+                action: () => (_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
             });
@@ -98,7 +105,7 @@ export default function CategoryFeed(inProps) {
         const feedUnit = {
             type: feedObject.type,
             [feedObject.type]: feedObject,
-            seen_by_id: [],
+            seen: false,
             has_boost: false
         };
         !feedObject.draft && feedRef && feedRef.current && feedRef.current.addFeedData(feedUnit, true);
@@ -120,10 +127,10 @@ export default function CategoryFeed(inProps) {
             feedObject: item[item.type],
             feedObjectType: item.type,
             feedObjectActivities: item.activities ? item.activities : null,
-            markRead: scUser ? !item.seen_by_id.includes(scUser.id) : null
+            markRead: scUser ? !item.seen : null
         }), itemIdGenerator: (item) => item[item.type].id, ItemProps: FeedObjectProps, ItemSkeleton: FeedObjectSkeleton, ItemSkeletonProps: {
             template: SCFeedObjectTemplateType.PREVIEW
-        }, FeedSidebarProps: FeedSidebarProps, HeaderComponent: _jsx(_Fragment, { children: ((scCategory.content_only_staff && UserUtils.isStaff(scUserContext.user)) || !scCategory.content_only_staff) && (_jsx(InlineComposerWidget, { onSuccess: handleComposerSuccess, defaultValue: { categories: [scCategory] }, feedType: SCFeedTypologyType.CATEGORY })) }), CustomAdvProps: { categoriesId: [scCategory.id] }, enabledCustomAdvPositions: [
+        }, FeedSidebarProps: FeedSidebarProps, HeaderComponent: _jsxs(_Fragment, { children: [((scCategory.content_only_staff && UserUtils.isStaff(scUserContext.user)) || !scCategory.content_only_staff) && (_jsx(InlineComposerWidget, { onSuccess: handleComposerSuccess, defaultValue: { categories: [scCategory] }, feedType: SCFeedTypologyType.CATEGORY })), renderAdvertising()] }), CustomAdvProps: { categoriesId: [scCategory.id] }, enabledCustomAdvPositions: [
             SCCustomAdvPosition.POSITION_FEED_SIDEBAR,
             SCCustomAdvPosition.POSITION_FEED,
             SCCustomAdvPosition.POSITION_BELOW_TOPBAR

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

@@ -23,4 +23,4 @@ export interface CourseProps {
     courseId?: number;
     viewDashboard?: boolean;
 }
-export default function Course(inProps: CourseProps): JSX.Element;
+export default function Course(inProps: CourseProps): import("react/jsx-runtime").JSX.Element;

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

@@ -89,7 +89,7 @@ export default function EventFeed(inProps) {
     const { enqueueSnackbar } = useSnackbar();
     const { scEvent } = useSCFetchEvent({ id: eventId, event });
     // REF
-    const feedRef = useRef();
+    const feedRef = useRef(null);
     // CONST
     const authUserId = scUserContext.user ? scUserContext.user.id : null;
     useEffect(() => {
@@ -116,7 +116,7 @@ export default function EventFeed(inProps) {
             const feedUnit = {
                 type: feedObject.type,
                 [feedObject.type]: feedObject,
-                seen_by_id: [],
+                seen: false,
                 has_boost: false
             };
             !feedObject.draft && feedRef && feedRef.current && feedRef.current.addFeedData(feedUnit, true);
@@ -143,15 +143,12 @@ export default function EventFeed(inProps) {
                 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: {
+    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) => ({
+            feedObject: item[item.type],
+            feedObjectType: item.type,
+            feedObjectActivities: item.activities ? item.activities : null,
+            markRead: scUser ? !(item === null || item === void 0 ? void 0 : item.seen) : 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) ||