@selfcommunity/react-ui 0.11.0-alpha.8 → 0.11.0-alpha.80

package/lib/cjs/components/CategoryFollowButton/CategoryFollowButton.js

@@ -3,20 +3,21 @@ 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 utils_1 = require("@selfcommunity/utils");
 const react_core_1 = require("@selfcommunity/react-core");
+const types_1 = require("@selfcommunity/types");
 const Errors_1 = require("../../constants/Errors");
 const lab_1 = require("@mui/lab");
 const react_intl_1 = require("react-intl");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const system_1 = require("@mui/system");
-const types_1 = require("@selfcommunity/types");
+const BuyButton_1 = tslib_1.__importDefault(require("../BuyButton"));
 const PREFIX = 'SCCategoryFollowButton';
 const classes = {
     root: `${PREFIX}-root`
 };
-const FollowButton = (0, styles_1.styled)(lab_1.LoadingButton, {
+const Root = (0, material_1.styled)(lab_1.LoadingButton, {
     name: PREFIX,
     slot: 'Root',
     overridesResolver: (props, styles) => styles.root
@@ -44,24 +45,35 @@ const FollowButton = (0, styles_1.styled)(lab_1.LoadingButton, {
  * @param inProps
  */
 function CategoryFollowButton(inProps) {
+    var _a;
     // PROPS
     const props = (0, system_1.useThemeProps)({
         props: inProps,
         name: PREFIX
     });
-    const { className, categoryId, category, onFollow } = props, rest = tslib_1.__rest(props, ["className", "categoryId", "category", "onFollow"]);
+    const { className, categoryId, category, onFollow, disableBuyContentIfPaidContent, disabled } = props, rest = tslib_1.__rest(props, ["className", "categoryId", "category", "onFollow", "disableBuyContentIfPaidContent", "disabled"]);
     // CONTEXT
     const scContext = (0, react_core_1.useSCContext)();
     const scUserContext = (0, react_core_1.useSCUser)();
     const scCategoriesManager = scUserContext.managers.categories;
     // CONST
     const authUserId = scUserContext.user ? scUserContext.user.id : null;
-    const { scCategory, setSCCategory } = (0, react_core_1.useSCFetchCategory)({
+    const { preferences } = (0, react_core_1.useSCPreferences)();
+    // PAYMENTS
+    const { isPaymentsEnabled } = (0, react_core_1.useSCPaymentsEnabled)();
+    const { scCategory } = (0, react_core_1.useSCFetchCategory)({
         id: categoryId,
         category,
         cacheStrategy: authUserId ? utils_1.CacheStrategies.CACHE_FIRST : utils_1.CacheStrategies.STALE_WHILE_REVALIDATE
     });
     const [followed, setFollowed] = (0, react_1.useState)(null);
+    /**
+     * Check the button if is disabled
+     * Disable action follow/unfollow only if payments feature is active
+     * and the category is a paid content and the category isn't paid
+     */
+    const isActionFollowDisabled = (0, react_1.useMemo)(() => { var _a; return disabled || (scCategory && scUserContext.user && isPaymentsEnabled && ((_a = scCategory.paywalls) === null || _a === void 0 ? void 0 : _a.length) > 0 && !scCategory.payment_order); }, [disabled, scCategory, scUserContext.user, isPaymentsEnabled]);
+    const categoryFollowEnabled = (0, react_1.useMemo)(() => react_core_1.SCPreferences.CONFIGURATIONS_CATEGORY_FOLLOW_ENABLED in preferences && preferences[react_core_1.SCPreferences.CONFIGURATIONS_CATEGORY_FOLLOW_ENABLED].value, [preferences]);
     (0, react_1.useEffect)(() => {
         /**
          * Call scCategoriesManager.isFollowed inside an effect
@@ -89,9 +101,23 @@ function CategoryFollowButton(inProps) {
             followCategory();
         }
     };
-    if (!scCategory || (scCategory && followed && scCategory.auto_follow === types_1.SCCategoryAutoFollowType.FORCED)) {
+    if (!scCategory || !categoryFollowEnabled || (scCategory && followed && scCategory.auto_follow === types_1.SCCategoryAutoFollowType.FORCED)) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(FollowButton, Object.assign({ size: "small", variant: "outlined", onClick: handleFollowAction, loading: scUserContext.user ? followed === null || scCategoriesManager.isLoading(scCategory) : null, className: (0, classnames_1.default)(classes.root, className) }, rest, { children: followed && scUserContext.user ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.categoryFollowButton.unfollow", id: "ui.categoryFollowButton.unfollow" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.categoryFollowButton.follow", id: "ui.categoryFollowButton.follow" })) })));
+    if (scUserContext.user && (scCategoriesManager.isLoading(scCategory) || followed === null)) {
+        return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ size: "small", variant: "outlined", loading: true, className: (0, classnames_1.default)(classes.root, className) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.categoryFollowButton.follow", id: "ui.categoryFollowButton.follow" }) })));
+    }
+    /**
+     * if the category is a paid content and it isn't followed show the Buy button
+     */
+    if (scCategory &&
+        scUserContext.user &&
+        isPaymentsEnabled &&
+        ((_a = scCategory.paywalls) === null || _a === void 0 ? void 0 : _a.length) > 0 &&
+        !scCategory.payment_order &&
+        (!followed || scCategoriesManager.isLoading(scCategory))) {
+        return (0, jsx_runtime_1.jsx)(BuyButton_1.default, { contentType: types_1.SCContentType.CATEGORY, content: scCategory, disabled: disableBuyContentIfPaidContent });
+    }
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ size: "small", variant: "outlined", onClick: handleFollowAction, loading: scUserContext.user ? scCategoriesManager.isLoading(scCategory) : null, className: (0, classnames_1.default)(classes.root, className), disabled: isActionFollowDisabled }, rest, { children: followed && scUserContext.user ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.categoryFollowButton.unfollow", id: "ui.categoryFollowButton.unfollow" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.categoryFollowButton.follow", id: "ui.categoryFollowButton.follow" })) })));
 }
 exports.default = CategoryFollowButton;

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

@@ -1,4 +1,4 @@
-import { ButtonProps } from '@mui/material/Button/Button';
+import { ButtonProps } from '@mui/material';
 import { SCCategoryType } from '@selfcommunity/types';
 import { BaseDialogProps } from '../../shared/BaseDialog';
 export interface CategoryFollowersButtonProps extends Pick<ButtonProps, Exclude<keyof ButtonProps, 'onClick' | 'disabled'>> {

package/lib/cjs/components/CategoryFollowersButton/CategoryFollowersButton.js

@@ -3,8 +3,6 @@ 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 useMediaQuery_1 = tslib_1.__importDefault(require("@mui/material/useMediaQuery"));
 const system_1 = require("@mui/system");
 const api_services_1 = require("@selfcommunity/api-services");
 const react_core_1 = require("@selfcommunity/react-core");
@@ -25,13 +23,13 @@ const classes = {
     dialogRoot: `${PREFIX}-dialog-root`,
     endMessage: `${PREFIX}-end-message`
 };
-const Root = (0, styles_1.styled)(material_1.Button, {
+const Root = (0, material_1.styled)(material_1.Button, {
     name: PREFIX,
     slot: 'Root',
     overridesResolver: (_props, styles) => styles.root,
     shouldForwardProp: (prop) => prop !== 'followers'
 })(() => ({}));
-const DialogRoot = (0, styles_1.styled)(BaseDialog_1.default, {
+const DialogRoot = (0, material_1.styled)(BaseDialog_1.default, {
     name: PREFIX,
     slot: 'DialogRoot',
     overridesResolver: (_props, styles) => styles.dialogRoot
@@ -127,7 +125,7 @@ function CategoryFollowersButton(inProps) {
     const renderSurplus = (0, react_1.useCallback)(() => (0, buttonCounters_1.numberFormatter)(scCategory.followers_counter), [scCategory]);
     // RENDER
     const theme = (0, material_1.useTheme)();
-    const isMobile = (0, useMediaQuery_1.default)(theme.breakpoints.down('md'));
+    const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'));
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className), onClick: handleToggleDialogOpen, disabled: loading || !scCategory || scCategory.followers_counter === 0, 
                 // @ts-expect-error this is needed to use followers into SCCategoryFollowersButton
                 followers: scCategory === null || scCategory === void 0 ? void 0 : scCategory.followers_counter }, rest, { children: loading || !scCategory ? ((0, jsx_runtime_1.jsx)(AvatarGroupSkeleton_1.default, Object.assign({}, rest))) : ((0, jsx_runtime_1.jsx)(material_1.AvatarGroup, Object.assign({ total: scCategory.followers_counter, renderSurplus: renderSurplus }, { children: followers.map((c) => ((0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: c.username, src: c.avatar }, c.id))) }))) })), open && ((0, jsx_runtime_1.jsx)(DialogRoot, Object.assign({ className: classes.dialogRoot, title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.categoryFollowersButton.dialogTitle", id: "ui.categoryFollowersButton.dialogTitle", values: { total: scCategory.followers_counter } }), onClose: handleToggleDialogOpen, open: open }, DialogProps, { children: (0, jsx_runtime_1.jsx)(InfiniteScroll_1.default, Object.assign({ dataLength: followers.length, next: fetchFollowers, hasMoreNext: next !== null || loading, loaderNext: (0, jsx_runtime_1.jsx)(User_1.UserSkeleton, { elevation: 0 }), height: isMobile ? '100%' : 400, endMessage: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.endMessage }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.categoryFollowersButton.noOtherFollowers", defaultMessage: "ui.categoryFollowersButton.noOtherFollowers" }) })) }, { children: (0, jsx_runtime_1.jsx)(material_1.List, { children: followers.map((follower) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(User_1.default, { elevation: 0, user: follower }) }, follower.id))) }) })) })))] }));

package/lib/cjs/components/CategoryHeader/CategoryHeader.js

@@ -3,15 +3,16 @@ 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 CategoryFollowButton_1 = tslib_1.__importDefault(require("../CategoryFollowButton"));
 const react_intl_1 = require("react-intl");
 const react_core_1 = require("@selfcommunity/react-core");
+const types_1 = require("@selfcommunity/types");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const system_1 = require("@mui/system");
 const CategoryFollowersButton_1 = tslib_1.__importDefault(require("../CategoryFollowersButton"));
 const constants_1 = require("./constants");
+const BuyButton_1 = tslib_1.__importDefault(require("../BuyButton"));
 const classes = {
     root: `${constants_1.PREFIX}-root`,
     cover: `${constants_1.PREFIX}-cover`,
@@ -22,7 +23,7 @@ const classes = {
     followed: `${constants_1.PREFIX}-followed`,
     action: `${constants_1.PREFIX}-action`
 };
-const Root = (0, styles_1.styled)(material_1.Box, {
+const Root = (0, material_1.styled)(material_1.Box, {
     name: constants_1.PREFIX,
     slot: 'Root'
 })(() => ({}));
@@ -57,6 +58,7 @@ const Root = (0, styles_1.styled)(material_1.Box, {
  * @param inProps
  */
 function CategoryHeader(inProps) {
+    var _a;
     // PROPS
     const props = (0, system_1.useThemeProps)({
         props: inProps,
@@ -65,6 +67,8 @@ function CategoryHeader(inProps) {
     const { className, categoryId, category, CategoryFollowButtonProps = {}, CategoryFollowersButtonProps = {} } = props, rest = tslib_1.__rest(props, ["className", "categoryId", "category", "CategoryFollowButtonProps", "CategoryFollowersButtonProps"]);
     // STATE
     const { scCategory, setSCCategory } = (0, react_core_1.useSCFetchCategory)({ id: categoryId, category });
+    // PAYMENTS
+    const { isPaymentsEnabled } = (0, react_core_1.useSCPaymentsEnabled)();
     /**
      * Handles callback follow/unfollow category
      */
@@ -76,6 +80,6 @@ function CategoryHeader(inProps) {
     if (!scCategory) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [(0, jsx_runtime_1.jsx)(material_1.Paper, { style: _backgroundCover, classes: { root: classes.cover } }), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.info }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h3", className: classes.name, gutterBottom: true }, { children: scCategory.name })), scCategory.slogan && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5", className: classes.slogan }, { children: scCategory.slogan }))), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.followed }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.followedCounter, component: "div" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.categoryHeader.followedBy", defaultMessage: "ui.categoryHeader.followedBy", values: { total: scCategory.followers_counter } }) })), (0, jsx_runtime_1.jsx)(CategoryFollowersButton_1.default, Object.assign({ category: scCategory, categoryId: scCategory === null || scCategory === void 0 ? void 0 : scCategory.id }, CategoryFollowersButtonProps))] })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.action }, { children: (0, jsx_runtime_1.jsx)(CategoryFollowButton_1.default, Object.assign({ category: scCategory, onFollow: handleFollow }, CategoryFollowButtonProps)) }))] }))] })));
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [(0, jsx_runtime_1.jsx)(material_1.Paper, { style: _backgroundCover, classes: { root: classes.cover } }), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.info }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h3", className: classes.name, gutterBottom: true }, { children: scCategory.name })), scCategory.slogan && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5", className: classes.slogan }, { children: scCategory.slogan }))), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.followed }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.followedCounter, component: "div" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.categoryHeader.followedBy", defaultMessage: "ui.categoryHeader.followedBy", values: { total: scCategory.followers_counter } }) })), (0, jsx_runtime_1.jsx)(CategoryFollowersButton_1.default, Object.assign({ category: scCategory, categoryId: scCategory === null || scCategory === void 0 ? void 0 : scCategory.id }, CategoryFollowersButtonProps))] })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.action }, { children: [isPaymentsEnabled && ((_a = scCategory.paywalls) === null || _a === void 0 ? void 0 : _a.length) > 0 && scCategory.payment_order && ((0, jsx_runtime_1.jsx)(BuyButton_1.default, { contentType: types_1.SCContentType.CATEGORY, content: scCategory })), (0, jsx_runtime_1.jsx)(CategoryFollowButton_1.default, Object.assign({ category: scCategory, onFollow: handleFollow }, CategoryFollowButtonProps))] }))] }))] })));
 }
 exports.default = CategoryHeader;

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

@@ -1,16 +1,13 @@
 "use strict";
 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 Skeleton_1 = tslib_1.__importDefault(require("@mui/material/Skeleton"));
 const constants_1 = require("./constants");
 const classes = {
     root: `${constants_1.PREFIX}-skeleton-root`,
-    cover: `${constants_1.PREFIX}-skeleton-cover`,
+    cover: `${constants_1.PREFIX}-skeleton-cover`
 };
-const Root = (0, styles_1.styled)(material_1.Box, {
+const Root = (0, material_1.styled)(material_1.Box, {
     name: constants_1.PREFIX,
     slot: 'SkeletonRoot'
 })(() => ({}));
@@ -35,6 +32,6 @@ const Root = (0, styles_1.styled)(material_1.Box, {
  *
  */
 function CategoryHeaderSkeleton() {
-    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: classes.root }, { children: [(0, jsx_runtime_1.jsx)(Skeleton_1.default, { sx: { height: 230 }, animation: "wave", variant: "rectangular", className: classes.cover }), (0, jsx_runtime_1.jsx)(material_1.Box, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", sx: { height: 20, maxWidth: 300, width: '100%', margin: '0 auto' } }) }), (0, jsx_runtime_1.jsx)(material_1.Box, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", sx: { height: 20, maxWidth: 300, width: '100%', margin: '0 auto' } }) })] })));
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: classes.root }, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { sx: { height: 230 }, animation: "wave", variant: "rectangular", className: classes.cover }), (0, jsx_runtime_1.jsx)(material_1.Box, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", sx: { height: 20, maxWidth: 300, width: '100%', margin: '0 auto' } }) }), (0, jsx_runtime_1.jsx)(material_1.Box, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", sx: { height: 20, maxWidth: 300, width: '100%', margin: '0 auto' } }) })] })));
 }
 exports.default = CategoryHeaderSkeleton;

package/lib/cjs/components/CategoryTrendingFeedWidget/CategoryTrendingFeedWidget.js

@@ -3,8 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = tslib_1.__importStar(require("react"));
-const styles_1 = require("@mui/material/styles");
-const List_1 = tslib_1.__importDefault(require("@mui/material/List"));
 const material_1 = require("@mui/material");
 const Widget_1 = tslib_1.__importDefault(require("../Widget"));
 const api_services_1 = require("@selfcommunity/api-services");
@@ -30,11 +28,11 @@ const classes = {
     dialogRoot: `${constants_1.PREFIX}-dialog-root`,
     endMessage: `${constants_1.PREFIX}-end-message`
 };
-const Root = (0, styles_1.styled)(Widget_1.default, {
+const Root = (0, material_1.styled)(Widget_1.default, {
     name: constants_1.PREFIX,
     slot: 'Root'
 })(() => ({}));
-const DialogRoot = (0, styles_1.styled)(BaseDialog_1.default, {
+const DialogRoot = (0, material_1.styled)(BaseDialog_1.default, {
     name: constants_1.PREFIX,
     slot: 'DialogRoot'
 })(() => ({}));
@@ -182,9 +180,9 @@ function CategoryTrendingFeedWidget(inProps) {
     if (!state.initialized) {
         return (0, jsx_runtime_1.jsx)(Skeleton_1.default, {});
     }
-    const content = ((0, jsx_runtime_1.jsxs)(material_1.CardContent, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.title, variant: "h5" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.categoryTrendingFeedWidget.title", defaultMessage: "ui.categoryTrendingFeedWidget.title" }) })), !state.count ? ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.noResults, variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.categoryTrendingFeedWidget.noResults", defaultMessage: "ui.categoryTrendingFeedWidget.noResults" }) }))) : ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(List_1.default, { children: state.results.slice(0, state.visibleItems).map((obj) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(FeedObject_1.default, Object.assign({ elevation: 0, feedObject: obj[obj.type] }, FeedObjectProps)) }, obj[obj.type].id))) }), state.count > state.visibleItems && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ className: classes.showMore }, (isMobile
+    const content = ((0, jsx_runtime_1.jsxs)(material_1.CardContent, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.title, variant: "h5" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.categoryTrendingFeedWidget.title", defaultMessage: "ui.categoryTrendingFeedWidget.title" }) })), !state.count ? ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.noResults, variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.categoryTrendingFeedWidget.noResults", defaultMessage: "ui.categoryTrendingFeedWidget.noResults" }) }))) : ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.List, { children: state.results.slice(0, state.visibleItems).map((obj) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(FeedObject_1.default, Object.assign({ elevation: 0, feedObject: obj[obj.type] }, FeedObjectProps)) }, obj[obj.type].id))) }), state.count > state.visibleItems && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ className: classes.showMore }, (isMobile
                         ? { onClick: handleToggleDialogOpen }
-                        : { component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.CATEGORY_TRENDING_FEED_ROUTE_NAME, scCategory) }), { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.categoryTrendingFeedWidget.button.showAll", defaultMessage: "ui.categoryTrendingFeedWidget.button.showAll" }) })))] })), openDialog && ((0, jsx_runtime_1.jsx)(DialogRoot, Object.assign({ className: classes.dialogRoot, title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.categoryTrendingFeedWidget.title", id: "ui.categoryTrendingFeedWidget.title", values: { total: state.count } }), onClose: handleToggleDialogOpen, open: openDialog }, DialogProps, { children: (0, jsx_runtime_1.jsx)(InfiniteScroll_1.default, Object.assign({ dataLength: state.results.length, next: handleNext, hasMoreNext: Boolean(state.next), loaderNext: (0, jsx_runtime_1.jsx)(FeedObject_1.FeedObjectSkeleton, Object.assign({ elevation: 0 }, FeedObjectProps)), height: isMobile ? '100%' : 400, endMessage: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.endMessage }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.categoryTrendingFeedWidget.noMoreResults", defaultMessage: "ui.categoryTrendingFeedWidget.noMoreResults" }) })) }, { children: (0, jsx_runtime_1.jsx)(List_1.default, { children: state.results.map((obj) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(FeedObject_1.default, Object.assign({ elevation: 0, feedObject: obj[obj.type] }, FeedObjectProps)) }, obj[obj.type].id))) }) })) })))] }));
+                        : { component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.CATEGORY_TRENDING_FEED_ROUTE_NAME, scCategory) }), { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.categoryTrendingFeedWidget.button.showAll", defaultMessage: "ui.categoryTrendingFeedWidget.button.showAll" }) })))] })), openDialog && ((0, jsx_runtime_1.jsx)(DialogRoot, Object.assign({ className: classes.dialogRoot, title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.categoryTrendingFeedWidget.title", id: "ui.categoryTrendingFeedWidget.title", values: { total: state.count } }), onClose: handleToggleDialogOpen, open: openDialog }, DialogProps, { children: (0, jsx_runtime_1.jsx)(InfiniteScroll_1.default, Object.assign({ dataLength: state.results.length, next: handleNext, hasMoreNext: Boolean(state.next), loaderNext: (0, jsx_runtime_1.jsx)(FeedObject_1.FeedObjectSkeleton, Object.assign({ elevation: 0 }, FeedObjectProps)), height: isMobile ? '100%' : 400, endMessage: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.endMessage }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.categoryTrendingFeedWidget.noMoreResults", defaultMessage: "ui.categoryTrendingFeedWidget.noMoreResults" }) })) }, { children: (0, jsx_runtime_1.jsx)(material_1.List, { children: state.results.map((obj) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(FeedObject_1.default, Object.assign({ elevation: 0, feedObject: obj[obj.type] }, FeedObjectProps)) }, obj[obj.type].id))) }) })) })))] }));
     return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: content })));
 }
 exports.default = CategoryTrendingFeedWidget;

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

@@ -3,8 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const Widget_1 = tslib_1.__importDefault(require("../Widget"));
-const List_1 = tslib_1.__importDefault(require("@mui/material/List"));
-const styles_1 = require("@mui/material/styles");
 const Skeleton_1 = tslib_1.__importDefault(require("../FeedObject/Skeleton"));
 const material_1 = require("@mui/material");
 const constants_1 = require("./constants");
@@ -12,7 +10,7 @@ const classes = {
     root: `${constants_1.PREFIX}-skeleton-root`,
     list: `${constants_1.PREFIX}-list`
 };
-const Root = (0, styles_1.styled)(Widget_1.default, {
+const Root = (0, material_1.styled)(Widget_1.default, {
     name: constants_1.PREFIX,
     slot: 'SkeletonRoot'
 })(() => ({}));
@@ -38,6 +36,6 @@ const Root = (0, styles_1.styled)(Widget_1.default, {
  *
  */
 function CategoryTrendingFeedWidgetSkeleton(props) {
-    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: classes.root }, props, { children: (0, jsx_runtime_1.jsx)(material_1.CardContent, { children: (0, jsx_runtime_1.jsx)(List_1.default, Object.assign({ className: classes.list }, { children: [...Array(4)].map((post, index) => ((0, jsx_runtime_1.jsx)(Skeleton_1.default, { elevation: 0 }, index))) })) }) })));
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: classes.root }, props, { children: (0, jsx_runtime_1.jsx)(material_1.CardContent, { children: (0, jsx_runtime_1.jsx)(material_1.List, Object.assign({ className: classes.list }, { children: [...Array(4)].map((post, index) => ((0, jsx_runtime_1.jsx)(Skeleton_1.default, { elevation: 0 }, index))) })) }) })));
 }
 exports.default = CategoryTrendingFeedWidgetSkeleton;

package/lib/cjs/components/CategoryTrendingUsersWidget/CategoryTrendingUsersWidget.js

@@ -3,8 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = tslib_1.__importStar(require("react"));
-const styles_1 = require("@mui/material/styles");
-const List_1 = tslib_1.__importDefault(require("@mui/material/List"));
 const material_1 = require("@mui/material");
 const Widget_1 = tslib_1.__importDefault(require("../Widget"));
 const api_services_1 = require("@selfcommunity/api-services");
@@ -29,11 +27,11 @@ const classes = {
     dialogRoot: `${constants_1.PREFIX}-dialog-root`,
     endMessage: `${constants_1.PREFIX}-end-message`
 };
-const Root = (0, styles_1.styled)(Widget_1.default, {
+const Root = (0, material_1.styled)(Widget_1.default, {
     name: constants_1.PREFIX,
     slot: 'Root'
 })(() => ({}));
-const DialogRoot = (0, styles_1.styled)(BaseDialog_1.default, {
+const DialogRoot = (0, material_1.styled)(BaseDialog_1.default, {
     name: constants_1.PREFIX,
     slot: 'DialogRoot'
 })(() => ({}));
@@ -89,6 +87,10 @@ function CategoryTrendingUsersWidget(inProps) {
     const scPreferencesContext = (0, react_core_1.useSCPreferences)();
     const contentAvailability = (0, react_1.useMemo)(() => react_core_1.SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY in scPreferencesContext.preferences &&
         scPreferencesContext.preferences[react_core_1.SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY].value, [scPreferencesContext]);
+    const followOrConnectionEnabled = (0, react_1.useMemo)(() => (react_core_1.SCPreferences.CONFIGURATIONS_FOLLOW_ENABLED in scPreferencesContext.preferences &&
+        scPreferencesContext.preferences[react_core_1.SCPreferences.CONFIGURATIONS_FOLLOW_ENABLED].value) ||
+        (react_core_1.SCPreferences.CONFIGURATIONS_CONNECTION_ENABLED in scPreferencesContext.preferences &&
+            scPreferencesContext.preferences[react_core_1.SCPreferences.CONFIGURATIONS_CONNECTION_ENABLED].value), [scPreferencesContext.preferences]);
     // HOOKS
     const theme = (0, material_1.useTheme)();
     const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'));
@@ -115,7 +117,10 @@ function CategoryTrendingUsersWidget(inProps) {
     (0, react_1.useEffect)(() => {
         var _a;
         let _t;
-        if (scUserContext.user !== undefined && catId && (contentAvailability || (!contentAvailability && ((_a = scUserContext.user) === null || _a === void 0 ? void 0 : _a.id)))) {
+        if (scUserContext.user !== undefined &&
+            catId &&
+            (contentAvailability || (!contentAvailability && ((_a = scUserContext.user) === null || _a === void 0 ? void 0 : _a.id))) &&
+            followOrConnectionEnabled) {
             _t = setTimeout(_initComponent);
             return () => {
                 _t && clearTimeout(_t);
@@ -168,13 +173,13 @@ function CategoryTrendingUsersWidget(inProps) {
         setOpenDialog((prev) => !prev);
     };
     // RENDER
-    if ((!contentAvailability && !scUserContext.user) || (autoHide && !state.count && state.initialized)) {
+    if (!followOrConnectionEnabled || (!contentAvailability && !scUserContext.user) || (autoHide && !state.count && state.initialized)) {
         return (0, jsx_runtime_1.jsx)(HiddenPlaceholder_1.default, {});
     }
     if (!state.initialized) {
         return (0, jsx_runtime_1.jsx)(Skeleton_1.default, {});
     }
-    const content = ((0, jsx_runtime_1.jsxs)(material_1.CardContent, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.title, variant: "h5" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.categoryTrendingUsersWidget.title", defaultMessage: "ui.categoryTrendingUsersWidget.title" }) })), !state.count ? ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.noResults, variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.categoryTrendingUsersWidget.noResults", defaultMessage: "ui.categoryTrendingUsersWidget.noResults" }) }))) : ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(List_1.default, { children: state.results.slice(0, state.visibleItems).map((user) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(User_1.default, Object.assign({ elevation: 0, user: user }, UserProps)) }, user.id))) }), state.count > state.visibleItems && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ className: classes.showMore, onClick: handleToggleDialogOpen }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.categoryTrendingUsersWidget.button.showAll", defaultMessage: "ui.categoryTrendingUsersWidget.button.showAll" }) })))] })), openDialog && ((0, jsx_runtime_1.jsx)(DialogRoot, Object.assign({ className: classes.dialogRoot, title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.categoryTrendingUsersWidget.title", id: "ui.categoryTrendingUsersWidget.title", values: { total: state.count } }), onClose: handleToggleDialogOpen, open: openDialog }, DialogProps, { children: (0, jsx_runtime_1.jsx)(InfiniteScroll_1.default, Object.assign({ dataLength: state.results.length, next: handleNext, hasMoreNext: Boolean(state.next), loaderNext: (0, jsx_runtime_1.jsx)(User_1.UserSkeleton, Object.assign({ elevation: 0 }, UserProps)), height: isMobile ? '100%' : 400, endMessage: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.endMessage }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.categoryTrendingUsersWidget.noMoreResults", defaultMessage: "ui.categoryTrendingUsersWidget.noMoreResults" }) })) }, { children: (0, jsx_runtime_1.jsx)(List_1.default, { children: state.results.map((user) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(User_1.default, Object.assign({ elevation: 0, user: user }, UserProps)) }, user.id))) }) })) })))] }));
+    const content = ((0, jsx_runtime_1.jsxs)(material_1.CardContent, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.title, variant: "h5" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.categoryTrendingUsersWidget.title", defaultMessage: "ui.categoryTrendingUsersWidget.title" }) })), !state.count ? ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.noResults, variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.categoryTrendingUsersWidget.noResults", defaultMessage: "ui.categoryTrendingUsersWidget.noResults" }) }))) : ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.List, { children: state.results.slice(0, state.visibleItems).map((user) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(User_1.default, Object.assign({ elevation: 0, user: user }, UserProps)) }, user.id))) }), state.count > state.visibleItems && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ className: classes.showMore, onClick: handleToggleDialogOpen }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.categoryTrendingUsersWidget.button.showAll", defaultMessage: "ui.categoryTrendingUsersWidget.button.showAll" }) })))] })), openDialog && ((0, jsx_runtime_1.jsx)(DialogRoot, Object.assign({ className: classes.dialogRoot, title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.categoryTrendingUsersWidget.title", id: "ui.categoryTrendingUsersWidget.title", values: { total: state.count } }), onClose: handleToggleDialogOpen, open: openDialog }, DialogProps, { children: (0, jsx_runtime_1.jsx)(InfiniteScroll_1.default, Object.assign({ dataLength: state.results.length, next: handleNext, hasMoreNext: Boolean(state.next), loaderNext: (0, jsx_runtime_1.jsx)(User_1.UserSkeleton, Object.assign({ elevation: 0 }, UserProps)), height: isMobile ? '100%' : 400, endMessage: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.endMessage }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.categoryTrendingUsersWidget.noMoreResults", defaultMessage: "ui.categoryTrendingUsersWidget.noMoreResults" }) })) }, { children: (0, jsx_runtime_1.jsx)(material_1.List, { children: state.results.map((user) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(User_1.default, Object.assign({ elevation: 0, user: user }, UserProps)) }, user.id))) }) })) })))] }));
     return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: content })));
 }
 exports.default = CategoryTrendingUsersWidget;

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

@@ -3,8 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const Widget_1 = tslib_1.__importDefault(require("../Widget"));
-const List_1 = tslib_1.__importDefault(require("@mui/material/List"));
-const styles_1 = require("@mui/material/styles");
 const Skeleton_1 = tslib_1.__importDefault(require("../User/Skeleton"));
 const material_1 = require("@mui/material");
 const constants_1 = require("./constants");
@@ -12,7 +10,7 @@ const classes = {
     root: `${constants_1.PREFIX}-skeleton-root`,
     list: `${constants_1.PREFIX}-list`
 };
-const Root = (0, styles_1.styled)(Widget_1.default, {
+const Root = (0, material_1.styled)(Widget_1.default, {
     name: constants_1.PREFIX,
     slot: 'SkeletonRoot'
 })(() => ({}));
@@ -38,6 +36,6 @@ const Root = (0, styles_1.styled)(Widget_1.default, {
  *
  */
 function CategoryTrendingPeopleWidgetSkeleton(props) {
-    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: classes.root }, props, { children: (0, jsx_runtime_1.jsx)(material_1.CardContent, { children: (0, jsx_runtime_1.jsx)(List_1.default, Object.assign({ className: classes.list }, { children: [...Array(4)].map((person, index) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { elevation: 0 }) }, index))) })) }) })));
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: classes.root }, props, { children: (0, jsx_runtime_1.jsx)(material_1.CardContent, { children: (0, jsx_runtime_1.jsx)(material_1.List, Object.assign({ className: classes.list }, { children: [...Array(4)].map((person, index) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { elevation: 0 }) }, index))) })) }) })));
 }
 exports.default = CategoryTrendingPeopleWidgetSkeleton;

package/lib/cjs/components/ChangeCover/ChangeCover.js

@@ -3,15 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = tslib_1.__importStar(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 Icon_1 = tslib_1.__importDefault(require("@mui/material/Icon"));
 const react_intl_1 = require("react-intl");
 const ConfirmDialog_1 = tslib_1.__importDefault(require("../../shared/ConfirmDialog/ConfirmDialog"));
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
-const CircularProgress_1 = tslib_1.__importDefault(require("@mui/material/CircularProgress"));
 const system_1 = require("@mui/system");
 const Errors_1 = require("../../constants/Errors");
 const utils_1 = require("@selfcommunity/utils");
@@ -22,7 +19,7 @@ const classes = {
     addMenuItem: `${constants_1.PREFIX}-add-menuItem`,
     delMenuItem: `${constants_1.PREFIX}-del-menuItem`
 };
-const Root = (0, styles_1.styled)(material_1.Box, {
+const Root = (0, material_1.styled)(material_1.Box, {
     name: constants_1.PREFIX,
     slot: 'Root'
 })(() => ({}));
@@ -169,12 +166,12 @@ function ChangeCover(inProps) {
      * Renders change cover menu items
      */
     function renderMenuItems() {
-        return ((0, jsx_runtime_1.jsx)(material_1.Box, { children: loading ? ((0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ sx: { justifyContent: 'center' } }, { children: (0, jsx_runtime_1.jsx)(CircularProgress_1.default, { size: 15 }) }))) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("input", { type: "file", onChange: handleUpload, ref: fileInput, hidden: true, accept: ".gif,.png,.jpg,.jpeg" }), (0, jsx_runtime_1.jsxs)(material_1.MenuItem, Object.assign({ disabled: loading, onClick: () => fileInput.current.click(), className: classes.addMenuItem }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "add_circle_outline" }) }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.changeCover.button.upload", defaultMessage: "ui.changeCover.button.upload" })] })), hasCover && ((0, jsx_runtime_1.jsxs)(material_1.MenuItem, Object.assign({ className: classes.delMenuItem, onClick: () => setOpenDeleteCoverDialog(true) }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "delete" }) }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.changeCover.button.delete", defaultMessage: "ui.changeCover.button.delete" })] })))] })) }));
+        return ((0, jsx_runtime_1.jsx)(material_1.Box, { children: loading ? ((0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ sx: { justifyContent: 'center' } }, { children: (0, jsx_runtime_1.jsx)(material_1.CircularProgress, { size: 15 }) }))) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("input", { type: "file", onChange: handleUpload, ref: fileInput, hidden: true, accept: ".gif,.png,.jpg,.jpeg" }), (0, jsx_runtime_1.jsxs)(material_1.MenuItem, Object.assign({ disabled: loading, onClick: () => fileInput.current.click(), className: classes.addMenuItem }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "add_circle_outline" }) }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.changeCover.button.upload", defaultMessage: "ui.changeCover.button.upload" })] })), hasCover && ((0, jsx_runtime_1.jsxs)(material_1.MenuItem, Object.assign({ className: classes.delMenuItem, onClick: () => setOpenDeleteCoverDialog(true) }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "delete" }) }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.changeCover.button.delete", defaultMessage: "ui.changeCover.button.delete" })] })))] })) }));
     }
     /**
      * Renders change cover menu
      */
-    const cc = ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: "contained", disabled: loading, onClick: handleOpen }, rest, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "photo_camera" }) })), open && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isMobile ? ((0, jsx_runtime_1.jsx)(material_1.SwipeableDrawer, Object.assign({ open: true, onClose: handleClose, onOpen: handleOpen, anchor: "bottom", disableSwipeToOpen: true }, { children: renderMenuItems() }))) : ((0, jsx_runtime_1.jsx)(material_1.Menu, Object.assign({ anchorEl: anchorEl, open: true, onClose: handleClose }, { children: renderMenuItems() }))) })), !isMobile && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ className: classes.helpPopover, variant: "contained", onClick: handleClickHelpButton }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "help_outline" }) })), isOpen && ((0, jsx_runtime_1.jsx)(material_1.Popover, Object.assign({ open: isOpen, anchorEl: anchorElPopover, onClose: handleCloseHelpPopover, anchorOrigin: {
+    const cc = ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: "contained", disabled: loading, onClick: handleOpen }, rest, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "photo_camera" }) })), open && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isMobile ? ((0, jsx_runtime_1.jsx)(material_1.SwipeableDrawer, Object.assign({ open: true, onClose: handleClose, onOpen: handleOpen, anchor: "bottom", disableSwipeToOpen: true }, { children: renderMenuItems() }))) : ((0, jsx_runtime_1.jsx)(material_1.Menu, Object.assign({ anchorEl: anchorEl, open: true, onClose: handleClose }, { children: renderMenuItems() }))) })), !isMobile && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ className: classes.helpPopover, variant: "contained", onClick: handleClickHelpButton }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "help_outline" }) })), isOpen && ((0, jsx_runtime_1.jsx)(material_1.Popover, Object.assign({ open: isOpen, anchorEl: anchorElPopover, onClose: handleCloseHelpPopover, anchorOrigin: {
                             vertical: 'bottom',
                             horizontal: 'right'
                         } }, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ sx: { p: '10px' } }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "h3" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.changeCover.button.uploadA", defaultMessage: "ui.changeCover.button.uploadA" }) })), (0, jsx_runtime_1.jsx)(material_1.Divider, {}), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "span" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.changeCover.info", defaultMessage: "ui.changeCover.info", values: {

package/lib/cjs/components/ChangeGroupCover/ChangeGroupCover.js

@@ -3,10 +3,8 @@ 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_core_1 = require("@selfcommunity/react-core");
-const Icon_1 = tslib_1.__importDefault(require("@mui/material/Icon"));
 const react_intl_1 = require("react-intl");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const system_1 = require("@mui/system");
@@ -18,7 +16,7 @@ const utils_1 = require("@selfcommunity/utils");
 const classes = {
     root: `${constants_1.PREFIX}-root`
 };
-const Root = (0, styles_1.styled)(lab_1.LoadingButton, {
+const Root = (0, material_1.styled)(lab_1.LoadingButton, {
     name: constants_1.PREFIX,
     slot: 'Root'
 })(() => ({}));
@@ -131,7 +129,7 @@ function ChangeGroupCover(inProps) {
      * Renders root object (if not hidden by autoHide prop)
      */
     if (!autoHide) {
-        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("input", { type: "file", onChange: handleUpload, ref: fileInput, hidden: true, accept: ".gif,.png,.jpg,.jpeg" }), (0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className), size: "medium", variant: "contained", disabled: loading, onClick: () => fileInput.current.click(), loading: loading }, rest, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "image" }) }))] }));
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("input", { type: "file", onChange: handleUpload, ref: fileInput, hidden: true, accept: ".gif,.png,.jpg,.jpeg" }), (0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className), size: "medium", variant: "contained", disabled: loading, onClick: () => fileInput.current.click(), loading: loading }, rest, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "image" }) }))] }));
     }
     return null;
 }

package/lib/cjs/components/ChangeGroupPicture/ChangeGroupPicture.js

@@ -3,9 +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 Icon_1 = tslib_1.__importDefault(require("@mui/material/Icon"));
 const react_core_1 = require("@selfcommunity/react-core");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const system_1 = require("@mui/system");
@@ -24,7 +22,7 @@ const messages = (0, react_intl_1.defineMessages)({
 const classes = {
     root: `${constants_1.PREFIX}-root`
 };
-const Root = (0, styles_1.styled)(lab_1.LoadingButton, {
+const Root = (0, material_1.styled)(lab_1.LoadingButton, {
     name: constants_1.PREFIX,
     slot: 'Root'
 })(() => ({}));
@@ -129,7 +127,7 @@ function ChangeGroupPicture(inProps) {
      * Renders the component (if not hidden by autoHide prop)
      */
     if (!autoHide) {
-        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("input", { type: "file", onChange: handleUpload, ref: fileInput, hidden: true, accept: ".gif,.png,.jpg,.jpeg" }), (0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className), size: "small", variant: "contained", disabled: loading, onClick: () => fileInput.current.click(), loading: loading }, rest, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "photo_camera" }) }))] }));
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("input", { type: "file", onChange: handleUpload, ref: fileInput, hidden: true, accept: ".gif,.png,.jpg,.jpeg" }), (0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className), size: "small", variant: "contained", disabled: loading, onClick: () => fileInput.current.click(), loading: loading }, rest, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "photo_camera" }) }))] }));
     }
     return null;
 }

package/lib/cjs/components/ChangePicture/ChangePicture.js

@@ -3,11 +3,9 @@ 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 ChangePictureDialog_1 = tslib_1.__importDefault(require("./ChangePictureDialog/ChangePictureDialog"));
 const react_intl_1 = require("react-intl");
-const Icon_1 = tslib_1.__importDefault(require("@mui/material/Icon"));
 const react_core_1 = require("@selfcommunity/react-core");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const system_1 = require("@mui/system");
@@ -16,7 +14,7 @@ const classes = {
     root: `${constants_1.PREFIX}-root`,
     dialog: `${constants_1.PREFIX}-dialog`
 };
-const Root = (0, styles_1.styled)(material_1.Button, {
+const Root = (0, material_1.styled)(material_1.Button, {
     name: constants_1.PREFIX,
     slot: 'Root'
 })(() => ({}));
@@ -65,7 +63,7 @@ function ChangePicture(inProps) {
      * Renders the component (if not hidden by autoHide prop)
      */
     if (!autoHide) {
-        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className), size: "small", variant: "contained", onClick: () => setOpenChangePictureDialog(true) }, rest, { children: iconButton ? ((0, jsx_runtime_1.jsx)(Icon_1.default, { children: "photo_camera" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.changePicture.button.change", defaultMessage: "ui.changePicture.button.change" })) })), openChangePictureDialog && ((0, jsx_runtime_1.jsx)(ChangePictureDialog_1.default, { className: classes.dialog, open: openChangePictureDialog, onChange: (avatar) => onChange && onChange(avatar), onClose: () => setOpenChangePictureDialog(false) }))] }));
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className), size: "small", variant: "contained", onClick: () => setOpenChangePictureDialog(true) }, rest, { children: iconButton ? ((0, jsx_runtime_1.jsx)(material_1.Icon, { children: "photo_camera" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.changePicture.button.change", defaultMessage: "ui.changePicture.button.change" })) })), openChangePictureDialog && ((0, jsx_runtime_1.jsx)(ChangePictureDialog_1.default, { className: classes.dialog, open: openChangePictureDialog, onChange: (avatar) => onChange && onChange(avatar), onClose: () => setOpenChangePictureDialog(false) }))] }));
     }
     return null;
 }

package/lib/cjs/components/ChangePicture/ChangePictureDialog/ChangePictureDialog.js

@@ -3,18 +3,13 @@ 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 Button_1 = tslib_1.__importDefault(require("@mui/material/Button"));
-const Typography_1 = tslib_1.__importDefault(require("@mui/material/Typography"));
 const material_1 = require("@mui/material");
-const Icon_1 = tslib_1.__importDefault(require("@mui/material/Icon"));
 const api_services_1 = require("@selfcommunity/api-services");
 const react_core_1 = require("@selfcommunity/react-core");
 const react_intl_1 = require("react-intl");
 const BaseDialog_1 = tslib_1.__importDefault(require("../../../shared/BaseDialog"));
 const ConfirmDialog_1 = tslib_1.__importDefault(require("../../../shared/ConfirmDialog/ConfirmDialog"));
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
-const CircularProgress_1 = tslib_1.__importDefault(require("@mui/material/CircularProgress"));
 const seamless_scroll_polyfill_1 = require("seamless-scroll-polyfill");
 const Errors_1 = require("../../../constants/Errors");
 const utils_1 = require("@selfcommunity/utils");
@@ -26,7 +21,7 @@ const classes = {
     imageItem: `${constants_1.PREFIX}-image-item`,
     primary: `${constants_1.PREFIX}-primary`
 };
-const Root = (0, styles_1.styled)(BaseDialog_1.default, {
+const Root = (0, material_1.styled)(BaseDialog_1.default, {
     name: constants_1.PREFIX,
     slot: 'DialogRoot'
 })(() => ({}));
@@ -181,13 +176,13 @@ function ChangePictureDialog(props) {
     /**
      * Renders root object
      */
-    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.dialogRoot, className), title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.changePicture.title", id: "ui.changePicture.title" }), onClose: onClose, open: open }, rest, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.upload }, { children: [alert ? ((0, jsx_runtime_1.jsx)(material_1.Alert, Object.assign({ color: "error", onClose: () => setAlert(false) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.changePicture.button.upload.alert", defaultMessage: "ui.changePicture.button.upload.alert" }) }))) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("input", { type: "file", onChange: handleUpload, ref: fileInput, hidden: true, accept: ".gif,.png,.jpg,.jpeg" }), (0, jsx_runtime_1.jsx)(Button_1.default, Object.assign({ disabled: loading || isDeletingAvatar, variant: "outlined", onClick: () => fileInput.current.click(), color: error ? 'error' : 'primary', startIcon: loading ? null : (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "folder_open" }) }, { children: loading ? ((0, jsx_runtime_1.jsx)(CircularProgress_1.default, { size: 15 })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: error ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.changePicture.button.upload.error", defaultMessage: "ui.changePicture.button.upload.error" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.changePicture.button.upload", defaultMessage: "ui.changePicture.button.upload" })) })) }))] })), (0, jsx_runtime_1.jsx)(Typography_1.default, Object.assign({ component: "span", fontSize: "small", color: "text.secondary", gutterBottom: true }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.changePicture.info", defaultMessage: "ui.changePicture.info", values: {
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.dialogRoot, className), title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.changePicture.title", id: "ui.changePicture.title" }), onClose: onClose, open: open }, rest, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.upload }, { children: [alert ? ((0, jsx_runtime_1.jsx)(material_1.Alert, Object.assign({ color: "error", onClose: () => setAlert(false) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.changePicture.button.upload.alert", defaultMessage: "ui.changePicture.button.upload.alert" }) }))) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("input", { type: "file", onChange: handleUpload, ref: fileInput, hidden: true, accept: ".gif,.png,.jpg,.jpeg" }), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ disabled: loading || isDeletingAvatar, variant: "outlined", onClick: () => fileInput.current.click(), color: error ? 'error' : 'primary', startIcon: loading ? null : (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "folder_open" }) }, { children: loading ? ((0, jsx_runtime_1.jsx)(material_1.CircularProgress, { size: 15 })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: error ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.changePicture.button.upload.error", defaultMessage: "ui.changePicture.button.upload.error" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.changePicture.button.upload", defaultMessage: "ui.changePicture.button.upload" })) })) }))] })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "span", fontSize: "small", color: "text.secondary", gutterBottom: true }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.changePicture.info", defaultMessage: "ui.changePicture.info", values: {
                                 // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
                                 // @ts-ignore
                                 li: (chunks) => (0, jsx_runtime_1.jsx)("li", { children: chunks }),
                                 // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
                                 // @ts-ignore
                                 ul: (chunks) => (0, jsx_runtime_1.jsx)("ul", { children: chunks })
-                            } }) }))] })), (0, jsx_runtime_1.jsx)(material_1.ImageList, Object.assign({ cols: 3, rowHeight: 'auto', id: "avatarsList", classes: { root: classes.imagesList } }, { children: avatars.map((avatar) => ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.imageItem }, { children: (0, jsx_runtime_1.jsxs)(material_1.ImageListItem, Object.assign({ className: primary === avatar.id ? classes.primary : '', onClick: () => selectPrimaryAvatar(avatar) }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar.avatar, loading: "lazy", alt: 'img' }), (0, jsx_runtime_1.jsx)(material_1.ImageListItemBar, { position: "top", actionIcon: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: () => handleOpen(avatar.id), size: "small" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "delete" }) })) })] }), avatar.id) }), avatar.id))) })), openDeleteAvatarDialog && ((0, jsx_runtime_1.jsx)(ConfirmDialog_1.default, { open: openDeleteAvatarDialog, title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.changePicture.dialog.msg", defaultMessage: "ui.changePicture.dialog.msg" }), btnConfirm: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.changePicture.dialog.confirm", defaultMessage: "ui.changePicture.dialog.confirm" }), onConfirm: deleteAvatar, isUpdating: isDeletingAvatar, onClose: () => setOpenDeleteAvatarDialog(false) }))] })));
+                            } }) }))] })), (0, jsx_runtime_1.jsx)(material_1.ImageList, Object.assign({ cols: 3, rowHeight: 'auto', id: "avatarsList", classes: { root: classes.imagesList } }, { children: avatars.map((avatar) => ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.imageItem }, { children: (0, jsx_runtime_1.jsxs)(material_1.ImageListItem, Object.assign({ className: primary === avatar.id ? classes.primary : '', onClick: () => selectPrimaryAvatar(avatar) }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar.avatar, loading: "lazy", alt: 'img' }), (0, jsx_runtime_1.jsx)(material_1.ImageListItemBar, { position: "top", actionIcon: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: () => handleOpen(avatar.id), size: "small" }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "delete" }) })) })] }), avatar.id) }), avatar.id))) })), openDeleteAvatarDialog && ((0, jsx_runtime_1.jsx)(ConfirmDialog_1.default, { open: openDeleteAvatarDialog, title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.changePicture.dialog.msg", defaultMessage: "ui.changePicture.dialog.msg" }), btnConfirm: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.changePicture.dialog.confirm", defaultMessage: "ui.changePicture.dialog.confirm" }), onConfirm: deleteAvatar, isUpdating: isDeletingAvatar, onClose: () => setOpenDeleteAvatarDialog(false) }))] })));
 }
 exports.default = ChangePictureDialog;

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

@@ -0,0 +1,14 @@
+import { SCCheckoutSessionUIMode, SCContentType, SCPurchasableContent } from '@selfcommunity/types';
+export interface CheckoutProps {
+    className?: string;
+    clientSecret?: string;
+    contentType?: SCContentType;
+    contentId?: number;
+    content?: SCPurchasableContent;
+    priceId?: number;
+    returnUrl?: string;
+    successUrl?: string;
+    uiMode?: SCCheckoutSessionUIMode;
+    onComplete?: () => void;
+}
+export default function Checkout(inProps: CheckoutProps): JSX.Element;