@selfcommunity/react-ui 0.11.0-alpha.11 → 0.11.0-alpha.110

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

@@ -1,4 +1,5 @@
 import { SCCategoryType } from '@selfcommunity/types';
+import { CacheStrategies } from '@selfcommunity/utils';
 import { CategoryFollowButtonProps } from '../CategoryFollowButton';
 import { WidgetProps } from '../Widget';
 export interface CategoryProps extends WidgetProps {
@@ -32,6 +33,10 @@ export interface CategoryProps extends WidgetProps {
      * @default false
      */
     showTooltip?: boolean;
+    /**
+     * Override default cache strategy on fetch element
+     */
+    cacheStrategy?: CacheStrategies;
     /**
      * Any other properties
      */

package/lib/cjs/components/Category/Category.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_core_1 = require("@selfcommunity/react-core");
 const types_1 = require("@selfcommunity/types");
@@ -30,7 +29,7 @@ const classes = {
     autoFollowed: `${constants_1.PREFIX}-auto-followed`,
     actions: `${constants_1.PREFIX}-actions`
 };
-const Root = (0, styles_1.styled)(BaseItemButton_1.default, {
+const Root = (0, material_1.styled)(BaseItemButton_1.default, {
     name: constants_1.PREFIX,
     slot: 'Root'
 })(() => ({}));
@@ -69,21 +68,24 @@ function Category(inProps) {
         props: inProps,
         name: constants_1.PREFIX
     });
-    const { categoryId = null, category = null, className = null, elevation, autoHide = false, categoryFollowButtonProps = {}, showFollowers = true, showTooltip = false, ButtonBaseProps = null } = props, rest = tslib_1.__rest(props, ["categoryId", "category", "className", "elevation", "autoHide", "categoryFollowButtonProps", "showFollowers", "showTooltip", "ButtonBaseProps"]);
+    const { categoryId = null, category = null, className = null, elevation, variant, autoHide = false, categoryFollowButtonProps = {}, showFollowers = true, showTooltip = false, ButtonBaseProps = null, cacheStrategy } = props, rest = tslib_1.__rest(props, ["categoryId", "category", "className", "elevation", "variant", "autoHide", "categoryFollowButtonProps", "showFollowers", "showTooltip", "ButtonBaseProps", "cacheStrategy"]);
     // CONTEXT
     const scRoutingContext = (0, react_core_1.useSCRouting)();
     // STATE
-    const { scCategory, setSCCategory } = (0, react_core_1.useSCFetchCategory)({ id: categoryId, category });
+    const { scCategory } = (0, react_core_1.useSCFetchCategory)(Object.assign({ id: categoryId, category }, (cacheStrategy && { cacheStrategy })));
     // MEMO
-    const _ButtonBaseProps = (0, react_1.useMemo)(() => (ButtonBaseProps ? ButtonBaseProps : { component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.CATEGORY_ROUTE_NAME, scCategory) }), [ButtonBaseProps, scRoutingContext, scCategory]);
+    const _ButtonBaseProps = (0, react_1.useMemo)(() => ButtonBaseProps ? ButtonBaseProps : { component: react_core_1.Link, to: scCategory ? scRoutingContext.url(react_core_1.SCRoutes.CATEGORY_ROUTE_NAME, scCategory) : '' }, [ButtonBaseProps, scRoutingContext, scCategory]);
     // HOOKS
     const intl = (0, react_intl_1.useIntl)();
+    const categoryFollowEnabled = (0, react_core_1.useSCPreferenceEnabled)(react_core_1.SCPreferences.CONFIGURATIONS_CATEGORY_FOLLOW_ENABLED);
     if (!scCategory) {
-        return (0, jsx_runtime_1.jsx)(Skeleton_1.default, { elevation: elevation });
+        return (0, jsx_runtime_1.jsx)(Skeleton_1.default, Object.assign({ elevation: elevation }, (variant && { variant })));
     }
     // RENDER
     if (!autoHide) {
-        return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ disableTypography: showTooltip, elevation: elevation, className: (0, classnames_1.default)(classes.root, className, { [classes.followed]: scCategory.followed }, { [classes.autoFollowed]: scCategory.auto_follow === types_1.SCCategoryAutoFollowType.FORCED }), ButtonBaseProps: _ButtonBaseProps, image: (0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: scCategory.name, src: scCategory.image_medium, variant: "square", className: classes.categoryImage }), primary: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: showTooltip ? ((0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: scCategory.name }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.primary, component: "span", variant: "body1" }, { children: scCategory.name })) }))) : (scCategory.name) }), secondary: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: showTooltip ? ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.secondary, component: "p", variant: "body2" }, { children: showFollowers ? `${intl.formatMessage(messages.categoryFollowers, { total: scCategory.followers_counter })}` : scCategory.slogan }))) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: showFollowers ? `${intl.formatMessage(messages.categoryFollowers, { total: scCategory.followers_counter })}` : scCategory.slogan })) }), actions: (0, jsx_runtime_1.jsx)(CategoryFollowButton_1.default, Object.assign({ category: scCategory }, categoryFollowButtonProps)) }, rest)));
+        return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ disableTypography: showTooltip, elevation: elevation }, (variant && { variant }), { className: (0, classnames_1.default)(classes.root, className, { [classes.followed]: scCategory.followed }, { [classes.autoFollowed]: scCategory.auto_follow === types_1.SCCategoryAutoFollowType.FORCED }), ButtonBaseProps: _ButtonBaseProps, image: (0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: scCategory.name, src: scCategory.image_medium, variant: "square", className: classes.categoryImage }), primary: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: showTooltip ? ((0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: scCategory.name }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.primary, component: "span", variant: "body1" }, { children: scCategory.name })) }))) : (scCategory.name) }), secondary: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: showTooltip ? ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.secondary, component: "p", variant: "body2" }, { children: showFollowers && categoryFollowEnabled ? `${intl.formatMessage(messages.categoryFollowers, { total: scCategory.followers_counter })}` : scCategory.slogan }))) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: showFollowers && categoryFollowEnabled
+                        ? `${intl.formatMessage(messages.categoryFollowers, { total: scCategory.followers_counter })}`
+                        : scCategory.slogan })) }), actions: (0, jsx_runtime_1.jsx)(CategoryFollowButton_1.default, Object.assign({ category: scCategory }, categoryFollowButtonProps)) }, rest)));
     }
     return null;
 }

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

@@ -2,8 +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 Skeleton_1 = tslib_1.__importDefault(require("@mui/material/Skeleton"));
 const material_1 = require("@mui/material");
 const BaseItem_1 = tslib_1.__importDefault(require("../../shared/BaseItem"));
 const constants_1 = require("./constants");
@@ -15,7 +13,7 @@ const classes = {
     button: `${constants_1.PREFIX}-button`,
     action: `${constants_1.PREFIX}-action`
 };
-const Root = (0, styles_1.styled)(BaseItem_1.default, {
+const Root = (0, material_1.styled)(BaseItem_1.default, {
     name: constants_1.PREFIX,
     slot: 'SkeletonRoot'
 })(() => ({}));
@@ -41,6 +39,6 @@ const Root = (0, styles_1.styled)(BaseItem_1.default, {
  */
 function CategorySkeleton(props) {
     const theme = (0, material_1.useTheme)();
-    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: classes.root }, props, { image: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", variant: "rectangular", width: theme.selfcommunity.category.icon.sizeMedium, height: theme.selfcommunity.category.icon.sizeMedium, className: classes.image }), primary: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", height: 10, width: 120, className: classes.primary }), secondary: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", height: 10, width: 70, className: classes.secondary }), actions: props.actions !== undefined ? (props.actions) : ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: "outlined", disabled: true, className: classes.button }, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", height: 10, width: 50, className: classes.action }) }))) })));
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: classes.root }, props, { image: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "rectangular", width: theme.selfcommunity.category.icon.sizeMedium, height: theme.selfcommunity.category.icon.sizeMedium, className: classes.image }), primary: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 10, width: 120, className: classes.primary }), secondary: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 10, width: 70, className: classes.secondary }), actions: props.actions !== undefined ? (props.actions) : ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: "outlined", disabled: true, className: classes.button }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 10, width: 50, className: classes.action }) }))) })));
 }
 exports.default = CategorySkeleton;

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

@@ -1,6 +1,5 @@
-import { TextFieldProps } from '@mui/material/TextField';
-import { AutocompleteProps } from '@mui/material';
-import { SCCategoryType } from '@selfcommunity/types/src/index';
+import { AutocompleteProps, TextFieldProps } from '@mui/material';
+import { SCCategoryType } from '@selfcommunity/types';
 export interface CategoryAutocompleteProps extends Pick<AutocompleteProps<SCCategoryType | null, any, any, any>, Exclude<keyof AutocompleteProps<SCCategoryType | null, any, any, any>, 'open' | 'onOpen' | 'onClose' | 'onChange' | 'filterSelectedOptions' | 'disableCloseOnSelect' | 'options' | 'getOptionLabel' | 'value' | 'selectOnFocus' | 'clearOnBlur' | 'blurOnSelect' | 'handleHomeEndKeys' | 'clearIcon' | 'noOptionsText' | 'isOptionEqualToValue' | 'renderTags' | 'renderOption' | 'renderInput'>> {
     /**
      * The maximum number of categories that will be visible when not focused.
@@ -22,6 +21,11 @@ export interface CategoryAutocompleteProps extends Pick<AutocompleteProps<SCCate
      * @param value
      */
     onChange?: (value: any) => void;
+    /**
+     * Feed API Query Params
+     * @default [{'limit': 10, 'offset': 0}]
+     */
+    endpointQueryParams?: Record<string, string | number | boolean>;
 }
 /**
  * > API documentation for the Community-JS Category Autocomplete component. Learn about the available props and the CSS API.

package/lib/cjs/components/CategoryAutocomplete/CategoryAutocomplete.js

@@ -2,26 +2,21 @@
 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 react_1 = require("react");
 const react_intl_1 = require("react-intl");
-const Autocomplete_1 = tslib_1.__importDefault(require("@mui/material/Autocomplete"));
-const TextField_1 = tslib_1.__importDefault(require("@mui/material/TextField"));
-const CircularProgress_1 = tslib_1.__importDefault(require("@mui/material/CircularProgress"));
-const Checkbox_1 = tslib_1.__importDefault(require("@mui/material/Checkbox"));
 const parse_1 = tslib_1.__importDefault(require("autosuggest-highlight/parse"));
 const match_1 = tslib_1.__importDefault(require("autosuggest-highlight/match"));
 const material_1 = require("@mui/material");
 const react_core_1 = require("@selfcommunity/react-core");
-const styles_1 = require("@mui/material/styles");
 const system_1 = require("@mui/system");
 const PREFIX = 'SCCategoryAutocomplete';
 const classes = {
     root: `${PREFIX}-root`
 };
-const Root = (0, styles_1.styled)(Autocomplete_1.default, {
+const Root = (0, material_1.styled)(material_1.Autocomplete, {
     name: PREFIX,
     slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
+    overridesResolver: (_props, styles) => styles.root
 })(() => ({}));
 /**
  * > API documentation for the Community-JS Category Autocomplete component. Learn about the available props and the CSS API.
@@ -51,22 +46,20 @@ const CategoryAutocomplete = (inProps) => {
         name: PREFIX
     });
     // Props
-    const { onChange, multiple = false, defaultValue = multiple ? [] : null, limitCountCategories = 0, checkboxSelect = false, disabled = false, TextFieldProps = {
+    const { onChange, multiple = false, defaultValue = multiple ? [] : null, limitCountCategories = 0, checkboxSelect = false, disabled = false, endpointQueryParams = {}, TextFieldProps = {
         variant: 'outlined',
         label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.categoryAutocomplete.label", defaultMessage: "ui.categoryAutocomplete.label" })
-    } } = props, rest = tslib_1.__rest(props, ["onChange", "multiple", "defaultValue", "limitCountCategories", "checkboxSelect", "disabled", "TextFieldProps"]);
+    } } = props, rest = tslib_1.__rest(props, ["onChange", "multiple", "defaultValue", "limitCountCategories", "checkboxSelect", "disabled", "endpointQueryParams", "TextFieldProps"]);
     // State
     const [open, setOpen] = (0, react_1.useState)(false);
-    // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-    // @ts-ignore
     const [value, setValue] = (0, react_1.useState)(typeof defaultValue === 'string' ? null : defaultValue);
     // HOOKS
-    const { categories, isLoading } = (0, react_core_1.useSCFetchCategories)();
+    const { categories, isLoading } = (0, react_core_1.useSCFetchCategories)({ endpointQueryParams });
     (0, react_1.useEffect)(() => {
         if (value === null) {
             return;
         }
-        onChange && onChange(value);
+        onChange === null || onChange === void 0 ? void 0 : onChange(value);
     }, [value]);
     (0, react_1.useEffect)(() => {
         if (!isLoading && typeof defaultValue === 'string') {
@@ -80,7 +73,7 @@ const CategoryAutocomplete = (inProps) => {
     const handleClose = () => {
         setOpen(false);
     };
-    const handleChange = (event, value) => {
+    const handleChange = (_event, value) => {
         let newValue = null;
         if (multiple && limitCountCategories > 0) {
             const [...rest] = value;
@@ -97,9 +90,9 @@ const CategoryAutocomplete = (inProps) => {
         }, renderOption: (props, option, { selected, inputValue }) => {
             const matches = (0, match_1.default)(option.name, inputValue);
             const parts = (0, parse_1.default)(option.name, matches);
-            return ((0, jsx_runtime_1.jsxs)("li", Object.assign({}, props, { children: [checkboxSelect && (0, jsx_runtime_1.jsx)(Checkbox_1.default, { style: { marginRight: 8 }, checked: selected }), (0, jsx_runtime_1.jsx)(material_1.Chip, { label: (0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: parts.map((part, index) => ((0, jsx_runtime_1.jsx)("span", Object.assign({ style: { fontWeight: part.highlight ? 700 : 400 } }, { children: part.text }), index))) }) })] })));
+            return ((0, jsx_runtime_1.jsxs)("li", Object.assign({}, props, { children: [checkboxSelect && (0, jsx_runtime_1.jsx)(material_1.Checkbox, { style: { marginRight: 8 }, checked: selected }), (0, jsx_runtime_1.jsx)(material_1.Chip, { label: (0, jsx_runtime_1.jsx)(react_1.Fragment, { children: parts.map((part, index) => ((0, jsx_runtime_1.jsx)("span", Object.assign({ style: { fontWeight: part.highlight ? 700 : 400 } }, { children: part.text }), index))) }) })] })));
         }, renderInput: (params) => {
-            return ((0, jsx_runtime_1.jsx)(TextField_1.default, Object.assign({}, params, TextFieldProps, { margin: "dense", InputProps: Object.assign(Object.assign({}, params.InputProps), { autoComplete: 'categories', endAdornment: ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [isLoading ? (0, jsx_runtime_1.jsx)(CircularProgress_1.default, { color: "inherit", size: 20 }) : null, params.InputProps.endAdornment] })) }) })));
+            return ((0, jsx_runtime_1.jsx)(material_1.TextField, Object.assign({}, params, TextFieldProps, { margin: "dense", InputProps: Object.assign(Object.assign({}, params.InputProps), { autoComplete: 'categories', endAdornment: ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [isLoading ? (0, jsx_runtime_1.jsx)(material_1.CircularProgress, { color: "inherit", size: 20 }) : null, params.InputProps.endAdornment] })) }) })));
         } }, rest)));
 };
 exports.default = CategoryAutocomplete;

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

@@ -21,6 +21,10 @@ export interface CategoryFollowButtonProps {
      * @param followed
      */
     onFollow?: (category: SCCategoryType, followed: boolean) => any;
+    /**
+     * Disable action if feature payments is enabled and the content is paid item
+     */
+    disableBuyContentIfPaidContent?: boolean;
     /**
      * Others properties
      */

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.d.ts

@@ -27,6 +27,11 @@ export interface CategoryHeaderProps {
      * @default {}
      */
     CategoryFollowersButtonProps?: Pick<CategoryFollowersButtonProps, Exclude<keyof CategoryFollowersButtonProps, 'category' | 'categoryId'>>;
+    /**
+     * shows category tags
+     * @default false
+     */
+    showTags?: boolean;
     /**
      * Any other properties
      */
@@ -56,6 +61,7 @@ export interface CategoryHeaderProps {
  |name|.SCCategoryHeader-name|Styles applied to the name element.|
  |slogan|.SCCategoryHeader-slogan|Styles applied to the slogan element.|
  |info|.SCCategoryHeader-info|Styles applied to the info element.|
+ |tags|.SCCategoryHeader-tags|Styles applied to the tags elements.|
  |followedCounter|.SCCategoryHeader-followed-by-counter|Styles applied to the followers counter element.|
  |followed|.SCCategoryHeader-followed|Styles applied to the followers avatars section.|
  |action|.SCCategoryHeader-action|Styles applied to the action section.|

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

@@ -3,26 +3,29 @@ 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 TagChip_1 = tslib_1.__importDefault(require("../../shared/TagChip"));
 const classes = {
     root: `${constants_1.PREFIX}-root`,
     cover: `${constants_1.PREFIX}-cover`,
     name: `${constants_1.PREFIX}-name`,
     slogan: `${constants_1.PREFIX}-slogan`,
     info: `${constants_1.PREFIX}-info`,
+    tags: `${constants_1.PREFIX}-tags`,
     followedCounter: `${constants_1.PREFIX}-followed-counter`,
     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'
 })(() => ({}));
@@ -50,6 +53,7 @@ const Root = (0, styles_1.styled)(material_1.Box, {
  |name|.SCCategoryHeader-name|Styles applied to the name element.|
  |slogan|.SCCategoryHeader-slogan|Styles applied to the slogan element.|
  |info|.SCCategoryHeader-info|Styles applied to the info element.|
+ |tags|.SCCategoryHeader-tags|Styles applied to the tags elements.|
  |followedCounter|.SCCategoryHeader-followed-by-counter|Styles applied to the followers counter element.|
  |followed|.SCCategoryHeader-followed|Styles applied to the followers avatars section.|
  |action|.SCCategoryHeader-action|Styles applied to the action section.|
@@ -57,14 +61,18 @@ const Root = (0, styles_1.styled)(material_1.Box, {
  * @param inProps
  */
 function CategoryHeader(inProps) {
+    var _a, _b;
     // PROPS
     const props = (0, system_1.useThemeProps)({
         props: inProps,
         name: constants_1.PREFIX
     });
-    const { className, categoryId, category, CategoryFollowButtonProps = {}, CategoryFollowersButtonProps = {} } = props, rest = tslib_1.__rest(props, ["className", "categoryId", "category", "CategoryFollowButtonProps", "CategoryFollowersButtonProps"]);
+    const { className, categoryId, category, CategoryFollowButtonProps = {}, CategoryFollowersButtonProps = {}, showTags = false } = props, rest = tslib_1.__rest(props, ["className", "categoryId", "category", "CategoryFollowButtonProps", "CategoryFollowersButtonProps", "showTags"]);
     // STATE
     const { scCategory, setSCCategory } = (0, react_core_1.useSCFetchCategory)({ id: categoryId, category });
+    const categoryFollowEnabled = (0, react_core_1.useSCPreferenceEnabled)(react_core_1.SCPreferences.CONFIGURATIONS_CATEGORY_FOLLOW_ENABLED);
+    // PAYMENTS
+    const { isPaymentsEnabled } = (0, react_core_1.useSCPaymentsEnabled)();
     /**
      * Handles callback follow/unfollow category
      */
@@ -76,6 +84,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 }))), showTags && ((_a = scCategory.tags) === null || _a === void 0 ? void 0 : _a.length) > 0 && ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.tags }, { children: scCategory.tags.map((t) => ((0, jsx_runtime_1.jsx)(TagChip_1.default, { tag: t, disposable: false, clickable: false }, t.id))) }))), categoryFollowEnabled && ((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 && ((_b = scCategory.paywalls) === null || _b === void 0 ? void 0 : _b.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;