@selfcommunity/react-templates 0.5.0-alpha.2 → 0.5.0-alpha.21

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

@@ -3,12 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const styles_1 = require("@mui/material/styles");
 const api_services_1 = require("@selfcommunity/api-services");
 const react_core_1 = require("@selfcommunity/react-core");
 const material_1 = require("@mui/material");
 const react_intl_1 = require("react-intl");
-const Chip_1 = tslib_1.__importDefault(require("@mui/material/Chip"));
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const system_1 = require("@mui/system");
 const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
@@ -33,7 +31,7 @@ const classes = {
     notRequestable: `${constants_1.PREFIX}-not-requestable`,
     endMessage: `${constants_1.PREFIX}-end-message`
 };
-const Root = (0, styles_1.styled)(material_1.Box, {
+const Root = (0, material_1.styled)(material_1.Box, {
     name: constants_1.PREFIX,
     slot: 'Root'
 })(() => ({}));
@@ -186,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)(Chip_1.default, { 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)(Chip_1.default, { 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, 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) }))] })));
 }
 exports.default = LoyaltyProgramDetail;

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

@@ -4,7 +4,6 @@ exports.PointElement = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const styles_1 = require("@mui/material/styles");
 const react_core_1 = require("@selfcommunity/react-core");
 const material_1 = require("@mui/material");
 const react_intl_1 = require("react-intl");
@@ -30,7 +29,7 @@ function PointElement({ message, points }) {
     }
 }
 exports.PointElement = PointElement;
-const Root = (0, styles_1.styled)(material_1.Grid, {
+const Root = (0, material_1.styled)(material_1.Grid, {
     name: constants_1.PREFIX,
     slot: 'PointsListRoot'
 })(() => ({}));

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

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-const styles_1 = require("@mui/material/styles");
 const material_1 = require("@mui/material");
 const react_ui_1 = require("@selfcommunity/react-ui");
 const constants_1 = require("./constants");
@@ -10,7 +9,7 @@ const classes = {
     content: `${constants_1.PREFIX}-content`,
     actions: `${constants_1.PREFIX}-actions`
 };
-const Root = (0, styles_1.styled)(react_ui_1.Widget, {
+const Root = (0, material_1.styled)(react_ui_1.Widget, {
     name: constants_1.PREFIX,
     slot: 'PrizeItemSkeletonRoot'
 })(() => ({}));

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

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const styles_1 = require("@mui/material/styles");
 const material_1 = require("@mui/material");
 const PrizeItemSkeleton_1 = tslib_1.__importDefault(require("./PrizeItemSkeleton"));
 const constants_1 = require("./constants");
@@ -14,7 +13,7 @@ const classes = {
     pointsList: `${constants_1.PREFIX}-points-list`,
     chip: `${constants_1.PREFIX}-chip`
 };
-const Root = (0, styles_1.styled)(material_1.Box, {
+const Root = (0, material_1.styled)(material_1.Box, {
     name: constants_1.PREFIX,
     slot: 'SkeletonRoot'
 })(() => ({}));

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

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const styles_1 = require("@mui/material/styles");
+const material_1 = require("@mui/material");
 const react_ui_1 = require("@selfcommunity/react-ui");
 const api_services_1 = require("@selfcommunity/api-services");
 const react_core_1 = require("@selfcommunity/react-core");
@@ -16,7 +16,7 @@ const constants_1 = require("./constants");
 const classes = {
     root: `${constants_1.PREFIX}-root`
 };
-const Root = (0, styles_1.styled)(react_ui_1.Feed, {
+const Root = (0, material_1.styled)(react_ui_1.Feed, {
     name: constants_1.PREFIX,
     slot: 'Root'
 })(() => ({}));
@@ -94,7 +94,8 @@ function MainFeed(inProps) {
     }
     // HANDLERS
     const handleComposerSuccess = (feedObject) => {
-        enqueueSnackbar((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.inlineComposerWidget.success", defaultMessage: "ui.inlineComposerWidget.success" }), {
+        const messageId = feedObject.scheduled_at ? 'ui.composer.scheduled.success' : 'ui.inlineComposerWidget.success';
+        enqueueSnackbar((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: messageId, defaultMessage: messageId }), {
             variant: 'success',
             autoHideDuration: 3000
         });
@@ -102,10 +103,10 @@ function MainFeed(inProps) {
         const feedUnit = {
             type: feedObject.type,
             [feedObject.type]: feedObject,
-            seen_by_id: [],
+            seen: false,
             has_boost: false
         };
-        feedRef && feedRef.current && feedRef.current.addFeedData(feedUnit, true);
+        !feedObject.draft && feedRef && feedRef.current && feedRef.current.addFeedData(feedUnit, true);
     };
     const handleAddGenerationContent = (feedObjects) => {
         if (feedRef && feedRef.current) {
@@ -115,7 +116,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);
@@ -127,7 +128,7 @@ 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: [

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

@@ -3,13 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = tslib_1.__importDefault(require("react"));
-const styles_1 = require("@mui/material/styles");
+const material_1 = require("@mui/material");
 const react_ui_1 = require("@selfcommunity/react-ui");
 const constants_1 = require("./constants");
 const classes = {
     root: `${constants_1.PREFIX}-skeleton-root`
 };
-const Root = (0, styles_1.styled)(react_ui_1.FeedSkeleton, {
+const Root = (0, material_1.styled)(react_ui_1.FeedSkeleton, {
     name: constants_1.PREFIX,
     slot: 'SkeletonRoot'
 })(() => ({}));

package/lib/cjs/components/NotificationFeed/NotificationFeed.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const styles_1 = require("@mui/material/styles");
+const material_1 = require("@mui/material");
 const react_ui_1 = require("@selfcommunity/react-ui");
 const api_services_1 = require("@selfcommunity/api-services");
 const react_core_1 = require("@selfcommunity/react-core");
@@ -14,7 +14,7 @@ const constants_1 = require("./constants");
 const classes = {
     root: `${constants_1.PREFIX}-root`
 };
-const Root = (0, styles_1.styled)(react_ui_1.Feed, {
+const Root = (0, material_1.styled)(react_ui_1.Feed, {
     name: constants_1.PREFIX,
     slot: 'Root'
 })(() => ({}));

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

@@ -3,13 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = tslib_1.__importDefault(require("react"));
-const styles_1 = require("@mui/material/styles");
+const material_1 = require("@mui/material");
 const react_ui_1 = require("@selfcommunity/react-ui");
 const constants_1 = require("./constants");
 const classes = {
     root: `${constants_1.PREFIX}-skeleton-root`
 };
-const Root = (0, styles_1.styled)(react_ui_1.FeedSkeleton, {
+const Root = (0, material_1.styled)(react_ui_1.FeedSkeleton, {
     name: constants_1.PREFIX,
     slot: 'SkeletonRoot'
 })(() => ({}));

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

@@ -3,13 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = tslib_1.__importDefault(require("react"));
-const styles_1 = require("@mui/material/styles");
+const material_1 = require("@mui/material");
 const react_ui_1 = require("@selfcommunity/react-ui");
 const constants_1 = require("./constants");
 const classes = {
     root: `${constants_1.PREFIX}-skeleton-root`
 };
-const Root = (0, styles_1.styled)(react_ui_1.FeedSkeleton, {
+const Root = (0, material_1.styled)(react_ui_1.FeedSkeleton, {
     name: constants_1.PREFIX,
     slot: 'SkeletonRoot'
 })(() => ({}));

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

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const styles_1 = require("@mui/material/styles");
+const material_1 = require("@mui/material");
 const api_services_1 = require("@selfcommunity/api-services");
 const react_core_1 = require("@selfcommunity/react-core");
 const react_ui_1 = require("@selfcommunity/react-ui");
@@ -16,7 +16,7 @@ const constants_1 = require("./constants");
 const classes = {
     root: `${constants_1.PREFIX}-root`
 };
-const Root = (0, styles_1.styled)(react_ui_1.Feed, {
+const Root = (0, material_1.styled)(react_ui_1.Feed, {
     name: constants_1.PREFIX,
     slot: 'Root'
 })(() => ({}));
@@ -92,7 +92,8 @@ function UserFeed(inProps) {
     const feedRef = (0, react_1.useRef)();
     // HANDLERS
     const handleComposerSuccess = (feedObject) => {
-        enqueueSnackbar((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.inlineComposerWidget.success", defaultMessage: "ui.inlineComposerWidget.success" }), {
+        const messageId = feedObject.scheduled_at ? 'ui.composer.scheduled.success' : 'ui.inlineComposerWidget.success';
+        enqueueSnackbar((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: messageId, defaultMessage: messageId }), {
             variant: 'success',
             autoHideDuration: 3000
         });
@@ -100,10 +101,10 @@ function UserFeed(inProps) {
         const feedUnit = {
             type: feedObject.type,
             [feedObject.type]: feedObject,
-            seen_by_id: [],
+            seen: false,
             has_boost: false
         };
-        feedRef && feedRef.current && feedRef.current.addFeedData(feedUnit, true);
+        !feedObject.draft && feedRef && feedRef.current && feedRef.current.addFeedData(feedUnit, true);
     };
     // WIDGETS
     const _widgets = (0, react_1.useMemo)(() => widgets.map((w) => {

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

@@ -3,14 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
-const styles_1 = require("@mui/material/styles");
 const react_ui_1 = require("@selfcommunity/react-ui");
 const Skeleton_1 = tslib_1.__importDefault(require("../UserFeed/Skeleton"));
 const constants_1 = require("./constants");
 const classes = {
     root: `${constants_1.PREFIX}-skeleton-root`
 };
-const Root = (0, styles_1.styled)(material_1.Box, {
+const Root = (0, material_1.styled)(material_1.Box, {
     name: constants_1.PREFIX,
     slot: 'SkeletonRoot'
 })(() => ({}));

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

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const styles_1 = require("@mui/material/styles");
 const material_1 = require("@mui/material");
 const react_ui_1 = require("@selfcommunity/react-ui");
 const UserFeed_1 = tslib_1.__importDefault(require("../UserFeed"));
@@ -23,7 +22,7 @@ const classes = {
     feed: `${constants_1.PREFIX}-feed`,
     actions: `${constants_1.PREFIX}-actions`
 };
-const Root = (0, styles_1.styled)(material_1.Box, {
+const Root = (0, material_1.styled)(material_1.Box, {
     name: constants_1.PREFIX,
     slot: 'Root'
 })(() => ({}));
@@ -186,13 +185,16 @@ function UserProfile(inProps) {
     const isMe = (0, react_1.useMemo)(() => scUserContext.user && (scUser === null || scUser === void 0 ? void 0 : scUser.id) === scUserContext.user.id, [scUserContext.user, scUser]);
     const followEnabled = (0, react_1.useMemo)(() => react_core_1.SCPreferences.CONFIGURATIONS_FOLLOW_ENABLED in scPreferencesContext.preferences &&
         scPreferencesContext.preferences[react_core_1.SCPreferences.CONFIGURATIONS_FOLLOW_ENABLED].value, [scPreferencesContext.preferences]);
-    const privateMessagingEnabled = (0, react_1.useMemo)(() => features.includes(types_1.SCFeatureName.PRIVATE_MESSAGING), [features]);
+    const connectionEnabled = react_core_1.SCPreferences.CONFIGURATIONS_CONNECTION_ENABLED in scPreferencesContext.preferences &&
+        scPreferencesContext.preferences[react_core_1.SCPreferences.CONFIGURATIONS_CONNECTION_ENABLED].value;
+    const privateMessagingEnabled = (0, react_1.useMemo)(() => react_core_1.SCPreferences.ADDONS_PRIVATE_MESSAGES_ENABLED in scPreferencesContext.preferences &&
+        scPreferencesContext.preferences[react_core_1.SCPreferences.ADDONS_PRIVATE_MESSAGES_ENABLED].value, [scPreferencesContext.preferences]);
     const _widgets = (0, react_1.useMemo)(() => {
         var _a, _b;
         if (widgets !== null) {
             return widgets;
         }
-        if (!scUser) {
+        if (!scUser || (!followEnabled && !connectionEnabled)) {
             return [];
         }
         let _widgets = [];

package/lib/esm/components/Category/Category.js

@@ -1,6 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { styled } from '@mui/material/styles';
-import { Box } from '@mui/material';
+import { Box, styled } from '@mui/material';
 import { CategoryHeader } from '@selfcommunity/react-ui';
 import CategoryFeed from '../CategoryFeed';
 import { useSCFetchCategory } from '@selfcommunity/react-core';

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

@@ -1,6 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box } from '@mui/material';
-import { styled } from '@mui/material/styles';
+import { Box, styled } from '@mui/material';
 import CategoryFeedSkeleton from '../CategoryFeed/Skeleton';
 import { CategoryHeaderSkeleton } from '@selfcommunity/react-ui';
 import { PREFIX } from './constants';

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

@@ -1,10 +1,10 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { useMemo, useRef } from 'react';
-import { styled } from '@mui/material/styles';
-import { CategoryTrendingFeedWidget, CategoryTrendingUsersWidget, ContributionUtils, Feed, FeedObject, FeedObjectSkeleton, InlineComposerWidget, SCFeedObjectTemplateType } from '@selfcommunity/react-ui';
+import { styled } from '@mui/material';
+import { CategoryTrendingFeedWidget, CategoryTrendingUsersWidget, ContributionUtils, Feed, FeedObject, FeedObjectSkeleton, HiddenPurchasableContent, InlineComposerWidget, SCFeedObjectTemplateType } from '@selfcommunity/react-ui';
 import { Endpoints } from '@selfcommunity/api-services';
-import { Link, SCRoutes, UserUtils, useSCFetchCategory, useSCRouting, useSCUser } from '@selfcommunity/react-core';
-import { SCCustomAdvPosition, SCFeedTypologyType } from '@selfcommunity/types';
+import { Link, SCPreferences, SCRoutes, UserUtils, useSCFetchCategory, useSCPreferences, useSCRouting, useSCUser } from '@selfcommunity/react-core';
+import { SCCustomAdvPosition, SCFeatureName, SCFeedTypologyType } from '@selfcommunity/types';
 import { CategoryFeedSkeleton } from './index';
 import { useThemeProps } from '@mui/system';
 import classNames from 'classnames';
@@ -61,6 +61,7 @@ const WIDGETS = [
  * @param inProps
  */
 export default function CategoryFeed(inProps) {
+    var _a;
     // PROPS
     const props = useThemeProps({
         props: inProps,
@@ -70,17 +71,24 @@ export default function CategoryFeed(inProps) {
     // CONTEXT
     const scRoutingContext = useSCRouting();
     const scUserContext = useSCUser();
+    const { preferences, features } = useSCPreferences();
     const { enqueueSnackbar } = useSnackbar();
     // REF
     const feedRef = useRef();
     // 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]);
     // HANDLERS
     const handleComposerSuccess = (feedObject) => {
         // Not insert if the category does not match
         if (feedObject.categories.findIndex((c) => c.id === scCategory.id) === -1) {
-            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" }) }))),
+            const messageId = feedObject.scheduled_at ? 'ui.composer.scheduled.success' : 'ui.composerIconButton.composer.success';
+            enqueueSnackbar(_jsx(FormattedMessage, { id: messageId, defaultMessage: messageId }), {
+                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
             });
@@ -90,10 +98,10 @@ export default function CategoryFeed(inProps) {
         const feedUnit = {
             type: feedObject.type,
             [feedObject.type]: feedObject,
-            seen_by_id: [],
+            seen: false,
             has_boost: false
         };
-        feedRef && feedRef.current && feedRef.current.addFeedData(feedUnit, true);
+        !feedObject.draft && feedRef && feedRef.current && feedRef.current.addFeedData(feedUnit, true);
     };
     // WIDGETS
     const _widgets = useMemo(() => widgets.map((w) => {
@@ -105,11 +113,14 @@ export default function CategoryFeed(inProps) {
     if (!scCategory) {
         return _jsx(CategoryFeedSkeleton, {});
     }
+    else if (scCategory && isPaymentsEnabled && !scCategory.followed && !scCategory.payment_order && ((_a = scCategory.paywalls) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+        return _jsx(HiddenPurchasableContent, {});
+    }
     return (_jsx(Root, Object.assign({ id: id, className: classNames(classes.root, className), ref: feedRef, endpoint: Object.assign(Object.assign({}, Endpoints.CategoryFeed), { url: () => Endpoints.CategoryFeed.url({ id: scCategory.id }) }), 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
+            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: [

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-import { styled } from '@mui/material/styles';
+import { styled } from '@mui/material';
 import { FeedObjectSkeleton, SCFeedObjectTemplateType, FeedSkeleton, GenericSkeleton, InlineComposerWidgetSkeleton } from '@selfcommunity/react-ui';
 import { PREFIX } from './constants';
 const classes = {

package/lib/esm/components/Event/Event.js

@@ -1,6 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { styled } from '@mui/material/styles';
-import { Box } from '@mui/material';
+import { Box, styled } from '@mui/material';
 import { EventHeader } from '@selfcommunity/react-ui';
 import { useSCFetchEvent, useSCUser } from '@selfcommunity/react-core';
 import { SCEventPrivacyType, SCEventSubscriptionStatusType } from '@selfcommunity/types';

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

@@ -1,6 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box } from '@mui/material';
-import { styled } from '@mui/material/styles';
+import { Box, styled } from '@mui/material';
 import EventFeedSkeleton from '../EventFeed/Skeleton';
 import { EventHeaderSkeleton } from '@selfcommunity/react-ui';
 import { PREFIX } from './constants';

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

@@ -1,6 +1,6 @@
 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 { useEffect, useMemo, useRef, useState } from 'react';
+import { styled, Box } from '@mui/material';
 import { ContributionUtils, EventInfoWidget, EventLocationWidget, EventMediaWidget, 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';
@@ -11,7 +11,6 @@ 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`
 };
@@ -81,18 +80,33 @@ export default function EventFeed(inProps) {
         name: PREFIX
     });
     const { id = 'event_feed', className, event, eventId, widgets = WIDGETS, FeedObjectProps = {}, FeedSidebarProps = null, FeedProps = {} } = props;
+    // STATUS
+    const [status, setStatus] = useState(undefined);
     // CONTEXT
     const scRoutingContext = useSCRouting();
     const scUserContext = useSCUser();
+    const scEventsManager = scUserContext.managers.events;
     const { enqueueSnackbar } = useSnackbar();
+    const { scEvent } = useSCFetchEvent({ id: eventId, event });
     // REF
     const feedRef = useRef();
-    // Hooks
-    const { scEvent } = useSCFetchEvent({ id: eventId, event });
+    // CONST
+    const authUserId = scUserContext.user ? scUserContext.user.id : null;
+    useEffect(() => {
+        var _a;
+        /**
+         * Call scEventsManager.subscriptionStatus inside an effect
+         * to avoid warning rendering child during update parent state
+         */
+        if (authUserId) {
+            setStatus((_a = scEventsManager === null || scEventsManager === void 0 ? void 0 : scEventsManager.subscriptionStatus) === null || _a === void 0 ? void 0 : _a.call(scEventsManager, scEvent));
+        }
+    }, [authUserId, scEventsManager === null || scEventsManager === void 0 ? void 0 : scEventsManager.subscriptionStatus, scEvent]);
     // HANDLERS
     const handleComposerSuccess = (feedObject) => {
         var _a;
-        enqueueSnackbar(_jsx(FormattedMessage, { id: "ui.composerIconButton.composer.success", defaultMessage: "ui.composerIconButton.composer.success" }), {
+        const messageId = feedObject.scheduled_at ? 'ui.composer.scheduled.success' : 'ui.composerIconButton.composer.success';
+        enqueueSnackbar(_jsx(FormattedMessage, { id: messageId, defaultMessage: messageId }), {
             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
@@ -102,10 +116,10 @@ export default function EventFeed(inProps) {
             const feedUnit = {
                 type: feedObject.type,
                 [feedObject.type]: feedObject,
-                seen_by_id: [],
+                seen: false,
                 has_boost: false
             };
-            feedRef && feedRef.current && feedRef.current.addFeedData(feedUnit, true);
+            !feedObject.draft && feedRef && feedRef.current && feedRef.current.addFeedData(feedUnit, true);
         }
     };
     // WIDGETS
@@ -116,35 +130,32 @@ export default function EventFeed(inProps) {
         return w;
     }), [widgets, scEvent]);
     if (scUserContext.user === undefined ||
+        (scUserContext.user && status === undefined) ||
         !scEvent ||
-        (scUserContext.user &&
-            ((scEvent.privacy === SCEventPrivacyType.PUBLIC && !scEvent.subscription_status) ||
-                scEvent.subscription_status === SCEventSubscriptionStatusType.INVITED)) ||
+        (scUserContext.user && scEvent.privacy === SCEventPrivacyType.PUBLIC && !status) ||
         (scEvent && ((eventId !== undefined && scEvent.id !== eventId) || (event && scEvent.id !== event.id)))) {
         return _jsx(EventFeedSkeleton, {});
     }
     else if (scEvent.privacy === SCEventPrivacyType.PRIVATE &&
-        scEvent.subscription_status !== SCEventSubscriptionStatusType.SUBSCRIBED &&
-        scEvent.subscription_status !== SCEventSubscriptionStatusType.GOING &&
-        scEvent.subscription_status !== SCEventSubscriptionStatusType.NOT_GOING) {
+        (status === SCEventSubscriptionStatusType.INVITED ||
+            (status !== SCEventSubscriptionStatusType.SUBSCRIBED &&
+                status !== SCEventSubscriptionStatusType.GOING &&
+                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) ||
                         (scUserContext.user &&
-                            (scEvent.subscription_status === SCEventSubscriptionStatusType.SUBSCRIBED ||
-                                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: [
+                            (status === SCEventSubscriptionStatusType.SUBSCRIBED ||
+                                status === SCEventSubscriptionStatusType.GOING ||
+                                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

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-import { styled } from '@mui/material/styles';
+import { styled } from '@mui/material';
 import { FeedObjectSkeleton, SCFeedObjectTemplateType, FeedSkeleton, GenericSkeleton, InlineComposerWidgetSkeleton } from '@selfcommunity/react-ui';
 import { PREFIX } from './constants';
 const classes = {