@selfcommunity/react-ui 0.11.0-alpha.9 → 0.11.0-alpha.91

package/lib/esm/components/AccountVerify/AccountVerify.js

@@ -1,9 +1,8 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
-import { styled } from '@mui/material/styles';
 import { useSCUser } from '@selfcommunity/react-core';
-import { Alert, Box, CircularProgress } from '@mui/material';
+import { Alert, Box, CircularProgress, styled } from '@mui/material';
 import classNames from 'classnames';
 import { useThemeProps } from '@mui/system';
 import { AccountService } from '@selfcommunity/api-services';

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

@@ -1,5 +1,5 @@
 import { BottomNavigationProps as MuiBottomNavigationProps } from '@mui/material';
-export type BottomNavigationProps = MuiBottomNavigationProps;
+export declare type BottomNavigationProps = MuiBottomNavigationProps;
 /**
  * > API documentation for the Community-JS Bottom Navigation component. Learn about the available props and the CSS API.
  *

package/lib/esm/components/BottomNavigation/BottomNavigation.js

@@ -60,7 +60,7 @@ export default function BottomNavigation(inProps) {
     // PREFERENCES
     const { preferences, features } = useSCPreferences();
     // MEMO
-    const privateMessagingEnabled = useMemo(() => features.includes(SCFeatureName.PRIVATE_MESSAGING), [features]);
+    const privateMessagingEnabled = useMemo(() => SCPreferences.ADDONS_PRIVATE_MESSAGES_ENABLED in preferences && preferences[SCPreferences.ADDONS_PRIVATE_MESSAGES_ENABLED].value, [preferences]);
     const groupsEnabled = useMemo(() => preferences &&
         features &&
         features.includes(SCFeatureName.TAGGING) &&
@@ -73,6 +73,11 @@ export default function BottomNavigation(inProps) {
         features.includes(SCFeatureName.EVENT) &&
         SCPreferences.CONFIGURATIONS_EVENTS_ENABLED in preferences &&
         preferences[SCPreferences.CONFIGURATIONS_EVENTS_ENABLED].value, [preferences, features]);
+    const coursesEnabled = useMemo(() => preferences &&
+        features &&
+        features.includes(SCFeatureName.COURSE) &&
+        SCPreferences.CONFIGURATIONS_COURSES_ENABLED in preferences &&
+        preferences[SCPreferences.CONFIGURATIONS_COURSES_ENABLED].value, [preferences, features]);
     const exploreStreamEnabled = preferences[SCPreferences.CONFIGURATIONS_EXPLORE_STREAM_ENABLED].value;
     const postOnlyStaffEnabled = preferences[SCPreferences.CONFIGURATIONS_POST_ONLY_STAFF_ENABLED].value;
     const contentAvailable = preferences[SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY].value;
@@ -82,16 +87,26 @@ export default function BottomNavigation(inProps) {
             ? children
             : [
                 _jsx(BottomNavigationAction, { className: classes.action, component: Link, to: scUserContext.user ? scRoutingContext.url(SCRoutes.HOME_ROUTE_NAME, {}) : '/', value: scUserContext.user ? scRoutingContext.url(SCRoutes.HOME_ROUTE_NAME, {}) : '/', icon: _jsx(Icon, { children: "home" }) }, "home"),
-                (scUserContext.user || contentAvailable) && exploreStreamEnabled ? (_jsx(BottomNavigationAction, { className: classes.action, component: Link, to: scRoutingContext.url(SCRoutes.EXPLORE_ROUTE_NAME, {}), value: scRoutingContext.url(SCRoutes.EXPLORE_ROUTE_NAME, {}), icon: _jsx(Icon, { children: "explore" }) }, "explore")) : null,
-                (!postOnlyStaffEnabled || (UserUtils.isStaff(scUserContext.user) && postOnlyStaffEnabled)) &&
+                // (scUserContext.user || contentAvailable) && exploreStreamEnabled ? (
+                //   <BottomNavigationAction
+                //     key="explore"
+                //     className={classes.action}
+                //     component={Link}
+                //     to={scRoutingContext.url(SCRoutes.EXPLORE_ROUTE_NAME, {})}
+                //     value={scRoutingContext.url(SCRoutes.EXPLORE_ROUTE_NAME, {})}
+                //     icon={<Icon>explore</Icon>}
+                //   />
+                // ) : null,
+                (!postOnlyStaffEnabled || UserUtils.isStaff(scUserContext.user) || UserUtils.isPublisher(scUserContext.user)) &&
                     ((groupsEnabled && !eventsEnabled) || (!groupsEnabled && eventsEnabled)) &&
                     !exploreStreamEnabled ? (_jsx(BottomNavigationAction, { className: classNames(classes.composer, classes.action), component: ComposerIconButton, disableRipple: true }, "composer")) : null,
+                coursesEnabled && (scUserContext.user || contentAvailable) ? (_jsx(BottomNavigationAction, { className: classes.action, component: Link, to: scRoutingContext.url(SCRoutes.COURSES_ROUTE_NAME, {}), value: scRoutingContext.url(SCRoutes.COURSES_ROUTE_NAME, {}), icon: _jsx(Icon, { children: "courses" }) }, "courses")) : null,
                 groupsEnabled && scUserContext.user ? (_jsx(BottomNavigationAction, { className: classes.action, component: Link, to: scRoutingContext.url(SCRoutes.GROUPS_SUBSCRIBED_ROUTE_NAME, {}), value: scRoutingContext.url(SCRoutes.GROUPS_SUBSCRIBED_ROUTE_NAME, {}), icon: _jsx(Icon, { children: "groups" }) }, "groups")) : null,
                 (!postOnlyStaffEnabled || (UserUtils.isStaff(scUserContext.user) && postOnlyStaffEnabled)) &&
                     groupsEnabled &&
                     eventsEnabled &&
                     !exploreStreamEnabled ? (_jsx(BottomNavigationAction, { className: classNames(classes.composer, classes.action), component: ComposerIconButton, disableRipple: true }, "composer")) : null,
-                eventsEnabled ? (_jsx(BottomNavigationAction, { className: classes.action, component: Link, to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, {}), value: scRoutingContext.url(SCRoutes.EVENTS_ROUTE_NAME, {}), icon: _jsx(Icon, { children: "CalendarIcon" }) }, "events")) : null,
+                eventsEnabled && (scUserContext.user || contentAvailable) ? (_jsx(BottomNavigationAction, { className: classes.action, component: Link, to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, {}), value: scRoutingContext.url(SCRoutes.EVENTS_ROUTE_NAME, {}), icon: _jsx(Icon, { children: "CalendarIcon" }) }, "events")) : null,
                 scUserContext.user && !groupsEnabled && !eventsEnabled ? (_jsx(BottomNavigationAction, { className: classes.action, component: Link, to: scRoutingContext.url(SCRoutes.USER_NOTIFICATIONS_ROUTE_NAME, {}), value: scRoutingContext.url(SCRoutes.USER_NOTIFICATIONS_ROUTE_NAME, {}), icon: _jsx(Badge, Object.assign({ badgeContent: scUserContext.user.unseen_notification_banners_counter + scUserContext.user.unseen_interactions_counter, color: "secondary" }, { children: _jsx(Icon, { children: "notifications_active" }) })) }, "notifications")) : null,
                 privateMessagingEnabled && scUserContext.user ? (_jsx(BottomNavigationAction, { className: classes.action, component: Link, to: scRoutingContext.url(SCRoutes.USER_PRIVATE_MESSAGES_ROUTE_NAME, {}), value: scRoutingContext.url(SCRoutes.USER_PRIVATE_MESSAGES_ROUTE_NAME, {}), icon: _jsx(Badge, Object.assign({ badgeContent: 0, color: "secondary" }, { children: _jsx(Icon, { children: "email" }) })) }, "messages")) : null
             ] })));

package/lib/esm/components/BroadcastMessages/BroadcastMessages.js

@@ -1,8 +1,7 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useRef, useState } from 'react';
-import { styled } from '@mui/material/styles';
-import { Avatar, Box, Button, CardContent } from '@mui/material';
+import { Avatar, Box, Button, CardContent, styled } from '@mui/material';
 import PubSub from 'pubsub-js';
 import { useThemeProps } from '@mui/system';
 import { SCNotificationTopicType, SCNotificationTypologyType } from '@selfcommunity/types';

package/lib/esm/components/BroadcastMessages/Message.js

@@ -1,9 +1,7 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useContext, useEffect, useMemo, useState } from 'react';
-import { Avatar, Box, CardContent, CardHeader, CardMedia, Chip, CircularProgress, Fade, IconButton, ListItem, ListItemAvatar, ListItemText, Typography } from '@mui/material';
-import { styled } from '@mui/material/styles';
-import Icon from '@mui/material/Icon';
+import { Avatar, Box, CardContent, CardHeader, CardMedia, Chip, CircularProgress, Fade, IconButton, ListItem, ListItemAvatar, ListItemText, Typography, styled, Icon } from '@mui/material';
 import { FormattedMessage } from 'react-intl';
 import { SCOPE_SC_UI } from '../../constants/Errors';
 import MarkRead from '../../shared/MarkRead';

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

@@ -1,7 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-import { Box, CardContent, CardHeader, Skeleton, useTheme } from '@mui/material';
-import { styled } from '@mui/material/styles';
+import { Box, CardContent, CardHeader, Skeleton, useTheme, styled } from '@mui/material';
 import Widget from '../Widget';
 import { PREFIX } from './constants';
 const messageClasses = {

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

@@ -0,0 +1,73 @@
+import { SCContentType, SCPaymentProduct, SCPurchasableContent } from '@selfcommunity/types';
+import React from 'react';
+import { PaymentOrderPdfButtonProps } from '../PaymentOrderPdfButton';
+export interface BuyButtonProps {
+    /**
+     * Overrides or extends the styles applied to the component.
+     * @default null
+     */
+    className?: string;
+    /**
+     * Content type
+     */
+    contentType: SCContentType;
+    /**
+     * Content id
+     */
+    contentId?: number | string;
+    /**
+     * Purchasable Content
+     */
+    content?: SCPurchasableContent;
+    /**
+     * Prefetched products
+     */
+    prefetchedProducts?: SCPaymentProduct[];
+    /**
+     * onPurchase callback
+     * @param user
+     * @param joined
+     */
+    onPurchase?: (contentType: SCContentType, id: number) => any;
+    /**
+     * show ticket button if content is already paid
+     */
+    showTicket?: boolean;
+    /**
+     * Props to spread to the PaymentOrderPdfButton component
+     * @default {}
+     */
+    PaymentOrderPdfButtonComponentProps?: PaymentOrderPdfButtonProps;
+    /**
+     * Overrides the button label.
+     * @default null
+     */
+    label?: React.ReactNode;
+    /**
+     * Others properties
+     */
+    [p: string]: any;
+}
+/**
+ * > API documentation for the Community-JS Buy Button component. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {BuyButton} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `BuyButton` can be used when providing style overrides in the theme.
+
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCBuyButton-root|Styles applied to the root element.|
+
+ * @param inProps
+ */
+export default function BuyButton(inProps: BuyButtonProps): JSX.Element;

package/lib/esm/components/BuyButton/BuyButton.js

@@ -0,0 +1,193 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { LoadingButton } from '@mui/lab';
+import { Icon, styled, SwipeableDrawer, Tooltip, Typography, useMediaQuery, useTheme } from '@mui/material';
+import { useThemeProps } from '@mui/system';
+import { useSCContext, useSCUser } from '@selfcommunity/react-core';
+import { SCContentType, SCCourseJoinStatusType, SCEventSubscriptionStatusType, SCGroupSubscriptionStatusType } from '@selfcommunity/types';
+import classNames from 'classnames';
+import { useCallback, useEffect, useState } from 'react';
+import { FormattedMessage } from 'react-intl';
+import PaywallsDialog from '../PaywallsDialog';
+import { CategoryApiClient, CourseApiClient, EventApiClient, GroupApiClient } from '@selfcommunity/api-services';
+import { capitalize } from '@selfcommunity/utils';
+import Paywalls from '../Paywalls';
+import PaymentOrderPdfButton from '../PaymentOrderPdfButton';
+const PREFIX = 'SCBuyButton';
+const classes = {
+    requestRoot: `${PREFIX}-request-root`,
+    selectRoot: `${PREFIX}-select-root`,
+    drawerRoot: `${PREFIX}-drawer-root`,
+    menuRoot: `${PREFIX}-menu-root`,
+    paper: `${PREFIX}-paper`,
+    item: `${PREFIX}-item`,
+    going: `${PREFIX}-going`,
+    notGoing: `${PREFIX}-not-going`
+};
+const RequestRoot = styled(LoadingButton, {
+    name: PREFIX,
+    slot: 'RequestRoot'
+})(() => ({}));
+const SwipeableDrawerRoot = styled(SwipeableDrawer, {
+    name: PREFIX,
+    slot: 'DrawerRoot'
+})(() => ({}));
+/**
+ * > API documentation for the Community-JS Buy Button component. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {BuyButton} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `BuyButton` can be used when providing style overrides in the theme.
+
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCBuyButton-root|Styles applied to the root element.|
+
+ * @param inProps
+ */
+export default function BuyButton(inProps) {
+    // PROPS
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX
+    });
+    const { className, contentId, contentType, content, disabled, onPurchase, showTicket = false, PaymentOrderPdfButtonComponentProps = {}, label } = props, rest = __rest(props, ["className", "contentId", "contentType", "content", "disabled", "onPurchase", "showTicket", "PaymentOrderPdfButtonComponentProps", "label"]);
+    // STATE
+    const [open, setOpen] = useState(false);
+    // CONTEXT
+    const scContext = useSCContext();
+    const scUserContext = useSCUser();
+    const theme = useTheme();
+    const isMobile = useMediaQuery(theme.breakpoints.down('md'));
+    // CONST
+    const [purchased, setPurchased] = useState(null);
+    const [products, setProducts] = useState([]);
+    const [paymentOrder, setPaymentOrder] = useState(null);
+    const [btnLabel, setBtnLabel] = useState(label !== null && label !== void 0 ? label : _jsx(FormattedMessage, { defaultMessage: `ui.buyButton.buy${contentType}`, id: `ui.buyButton.buy${capitalize(contentType)}` }));
+    // HANDLERS
+    const handleClose = useCallback(() => {
+        setOpen(false);
+    }, [open]);
+    const handleOpen = useCallback((e) => {
+        if (!open) {
+            if (!scUserContext.user) {
+                scContext.settings.handleAnonymousAction();
+            }
+            else {
+                setOpen(true);
+            }
+        }
+    }, [scUserContext.user, open, scContext.settings]);
+    /**
+     * Handle update order
+     * Price param is the new price selected
+     */
+    const handleUpdatePaymentOrder = useCallback((price) => {
+        // update order/subscription when will be recurring payment
+    }, [paymentOrder, purchased]);
+    /**
+     * Get current status
+     */
+    const getStatus = () => {
+        switch (contentType) {
+            case SCContentType.EVENT:
+                // Get status event subscribed
+                EventApiClient.getSpecificEventInfo(contentId ? contentId : content.id).then((data) => {
+                    var _a;
+                    if (scUserContext.user && ((_a = data === null || data === void 0 ? void 0 : data.managed_by) === null || _a === void 0 ? void 0 : _a.id) !== scUserContext.user.id) {
+                        if (data.subscription_status === SCEventSubscriptionStatusType.GOING) {
+                            setBtnLabel(_jsx(FormattedMessage, { defaultMessage: "ui.buyButton.purchased", id: "ui.buyButton.purchased" }));
+                        }
+                        if (data.paywalls) {
+                            setProducts(data.paywalls);
+                        }
+                        if (data.payment_order) {
+                            setPaymentOrder(data.payment_order);
+                        }
+                        setPurchased(data.subscription_status === SCEventSubscriptionStatusType.GOING);
+                    }
+                });
+                break;
+            case SCContentType.CATEGORY:
+                // Get status category followed
+                CategoryApiClient.getSpecificCategory(contentId ? contentId : content.id).then((data) => {
+                    if (data.followed || data.payment_order) {
+                        setBtnLabel(_jsx(FormattedMessage, { defaultMessage: "ui.buyButton.purchased", id: "ui.buyButton.purchased" }));
+                    }
+                    if (data.paywalls) {
+                        setProducts(data.paywalls);
+                    }
+                    if (data.payment_order) {
+                        setPaymentOrder(data.payment_order);
+                    }
+                    setPurchased(Boolean(data.followed || data.payment_order));
+                });
+                break;
+            case SCContentType.GROUP:
+                // Get status group subscribed
+                GroupApiClient.getSpecificGroupInfo(contentId ? contentId : content.id).then((data) => {
+                    var _a;
+                    if (scUserContext.user && ((_a = data === null || data === void 0 ? void 0 : data.managed_by) === null || _a === void 0 ? void 0 : _a.id) !== scUserContext.user.id) {
+                        if (data.subscription_status === SCGroupSubscriptionStatusType.SUBSCRIBED) {
+                            setBtnLabel(_jsx(FormattedMessage, { defaultMessage: "ui.buyButton.subscribed", id: "ui.buyButton.subscribed" }));
+                        }
+                        if (data.paywalls) {
+                            setProducts(data.paywalls);
+                        }
+                        if (data.payment_order) {
+                            setPaymentOrder(data.payment_order);
+                        }
+                        setPurchased(data.subscription_status === SCGroupSubscriptionStatusType.SUBSCRIBED);
+                    }
+                });
+                break;
+            case SCContentType.COURSE:
+                // Get status course joined
+                CourseApiClient.getSpecificCourseInfo(contentId ? contentId : content.id).then((data) => {
+                    var _a;
+                    if (scUserContext.user && ((_a = data === null || data === void 0 ? void 0 : data.created_by) === null || _a === void 0 ? void 0 : _a.id) !== scUserContext.user.id) {
+                        if (data.join_status === SCCourseJoinStatusType.JOINED) {
+                            setBtnLabel(_jsx(FormattedMessage, { defaultMessage: "ui.buyButton.purchased", id: "ui.buyButton.purchased" }));
+                        }
+                        if (data.paywalls) {
+                            setProducts(data.paywalls);
+                        }
+                        if (data.payment_order) {
+                            setPaymentOrder(data.payment_order);
+                        }
+                        setPurchased(data.join_status === SCCourseJoinStatusType.JOINED || data.join_status === SCCourseJoinStatusType.MANAGER);
+                    }
+                });
+                break;
+            default:
+                break;
+        }
+    };
+    useEffect(() => {
+        if ((contentId || content) && contentType && scUserContext.user) {
+            getStatus();
+        }
+        else if (scUserContext.user === null) {
+            setPurchased(false);
+        }
+    }, [contentId, content, contentType, scUserContext.user]);
+    if (!contentId && !content) {
+        return null;
+    }
+    return (_jsxs(_Fragment, { children: [_jsx(Tooltip, Object.assign({ title: disabled ? _jsx(FormattedMessage, { id: "ui.buyButton.disabled", defaultMessage: "ui.buyButton.disabled" }) : '' }, { children: _jsx(RequestRoot, Object.assign({ className: classNames(classes.requestRoot, className), variant: "contained", color: purchased ? 'inherit' : 'secondary', size: "small", startIcon: _jsx(Icon, { children: "dredit-card" }), loading: scUserContext.user === undefined || purchased === null, onClick: handleOpen, disabled: disabled || (!paymentOrder && purchased) }, rest, { children: !paymentOrder && purchased ? _jsx(FormattedMessage, { id: "ui.buyButton.free", defaultMessage: "ui.buyButton.free" }) : btnLabel })) })), paymentOrder && showTicket && _jsx(PaymentOrderPdfButton, Object.assign({}, PaymentOrderPdfButtonComponentProps, { paymentOrder: paymentOrder })), open && (_jsx(_Fragment, { children: isMobile ? (_jsx(SwipeableDrawerRoot, Object.assign({ className: classes.drawerRoot, PaperProps: { className: classes.paper }, open: true, onClose: handleClose, onOpen: handleOpen, anchor: "bottom", disableSwipeToOpen: true }, { children: _jsxs(_Fragment, { children: [_jsx(Typography, Object.assign({ variant: "h5", component: "div", marginBottom: 2 }, { children: _jsx("b", { children: paymentOrder ? (_jsx(FormattedMessage, { id: "ui.paywallsDialog.title.purchased", defaultMessage: "ui.paywallsDialog.title.purchased" })) : (_jsx(FormattedMessage, { id: "ui.paywallsDialog.title", defaultMessage: "ui.paywallsDialog.title" })) }) })), _jsx(Paywalls, Object.assign({ contentType: contentType }, (content ? { content } : { contentId }), { prefetchedPaymentContentStatus: {
+                                    paywalls: products,
+                                    payment_order: paymentOrder
+                                }, onUpdatePaymentOrder: handleUpdatePaymentOrder }))] }) }))) : (_jsx(_Fragment, { children: _jsx(PaywallsDialog, { open: true, onClose: handleClose, PaywallsComponentProps: Object.assign(Object.assign({ contentType }, (content ? { content } : { contentId })), { prefetchedPaymentContentStatus: {
+                                paywalls: products,
+                                payment_order: paymentOrder
+                            }, onUpdatePaymentOrder: handleUpdatePaymentOrder }) }) })) }))] }));
+}

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

@@ -0,0 +1,3 @@
+import BuyButton, { BuyButtonProps } from './BuyButton';
+export default BuyButton;
+export { BuyButtonProps };

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

@@ -0,0 +1,2 @@
+import BuyButton from './BuyButton';
+export default BuyButton;

package/lib/esm/components/Categories/Categories.js

@@ -1,8 +1,7 @@
 import { __awaiter, __rest } from "tslib";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useContext, useEffect, useRef, useState } from 'react';
-import { styled } from '@mui/material/styles';
-import { Box, Grid, TextField, Typography } from '@mui/material';
+import { Box, Grid, TextField, Typography, styled } from '@mui/material';
 import { CategoryService, Endpoints } from '@selfcommunity/api-services';
 import { SCPreferences, SCPreferencesContext, SCUserContext, useIsComponentMountedRef } from '@selfcommunity/react-core';
 import CategoriesSkeleton from './Skeleton';

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

@@ -1,7 +1,6 @@
 import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { styled } from '@mui/material/styles';
-import { Box, Grid } from '@mui/material';
+import { styled, Box, Grid } from '@mui/material';
 import CategorySkeleton from '../Category/Skeleton';
 import classNames from 'classnames';
 import { PREFIX } from './constants';

package/lib/esm/components/CategoriesPopularWidget/CategoriesPopularWidget.js

@@ -1,8 +1,7 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useCallback, useContext, useEffect, useMemo, useReducer, useRef, useState } from 'react';
-import { styled } from '@mui/material/styles';
-import { Button, CardContent, List, ListItem, Typography, useMediaQuery, useTheme } from '@mui/material';
+import { Button, CardContent, List, ListItem, Typography, useMediaQuery, useTheme, styled } from '@mui/material';
 import { CategoryService, Endpoints, http } from '@selfcommunity/api-services';
 import { CacheStrategies, Logger } from '@selfcommunity/utils';
 import Skeleton from './Skeleton';

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import CategoriesSuggestionWidgetSkeleton from '../CategoriesSuggestionWidget/Skeleton';
-import { styled } from '@mui/material/styles';
+import { styled } from '@mui/material';
 import { PREFIX } from './constants';
 const classes = {
     root: `${PREFIX}-skeleton-root`

package/lib/esm/components/CategoriesSuggestionWidget/CategoriesSuggestionWidget.js

@@ -1,10 +1,9 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useCallback, useEffect, useMemo, useReducer, useRef, useState } from 'react';
-import { styled } from '@mui/material/styles';
-import { Button, CardContent, List, ListItem, Typography, useMediaQuery, useTheme } from '@mui/material';
+import { Button, CardContent, List, ListItem, Typography, useMediaQuery, useTheme, styled } from '@mui/material';
 import { Endpoints, http, SuggestionService } from '@selfcommunity/api-services';
-import { SCCache, useSCUser } from '@selfcommunity/react-core';
+import { SCCache, SCPreferences, useSCPreferences, useSCUser } from '@selfcommunity/react-core';
 import Skeleton from './Skeleton';
 import Category, { CategorySkeleton } from '../Category';
 import { FormattedMessage } from 'react-intl';
@@ -85,8 +84,10 @@ export default function CategoriesSuggestionWidget(inProps) {
     // HOOKS
     const theme = useTheme();
     const isMobile = useMediaQuery(theme.breakpoints.down('md'));
+    const { preferences } = useSCPreferences();
     // REFS
     const updatesSubscription = useRef(null);
+    const categoryFollowEnabled = useMemo(() => SCPreferences.CONFIGURATIONS_CATEGORY_FOLLOW_ENABLED in preferences && preferences[SCPreferences.CONFIGURATIONS_CATEGORY_FOLLOW_ENABLED].value, [preferences]);
     /**
      * Initialize component
      * Fetch data only if the component is not initialized and it is not loading data
@@ -124,13 +125,13 @@ export default function CategoriesSuggestionWidget(inProps) {
     // EFFECTS
     useEffect(() => {
         let _t;
-        if (scUserContext.user) {
+        if (scUserContext.user && categoryFollowEnabled) {
             _t = setTimeout(_initComponent);
             return () => {
                 _t && clearTimeout(_t);
             };
         }
-    }, [scUserContext.user]);
+    }, [scUserContext.user, categoryFollowEnabled]);
     useEffect(() => {
         if (openDialog && state.next && state.results.length <= limit && state.initialized) {
             dispatch({ type: actionWidgetTypes.LOADING_NEXT });
@@ -194,7 +195,7 @@ export default function CategoriesSuggestionWidget(inProps) {
         setOpenDialog((prev) => !prev);
     };
     // RENDER
-    if ((autoHide && !state.count && state.initialized) || !scUserContext.user) {
+    if ((autoHide && !state.count && state.initialized) || !scUserContext.user || !categoryFollowEnabled) {
         return _jsx(HiddenPlaceholder, {});
     }
     if (!state.initialized) {

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

@@ -1,9 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import List from '@mui/material/List';
-import { styled } from '@mui/material/styles';
 import CategorySkeleton from '../Category/Skeleton';
 import Widget from '../Widget';
-import { CardContent, ListItem } from '@mui/material';
+import { CardContent, ListItem, styled, List } from '@mui/material';
 import { PREFIX } from './constants';
 const classes = {
     root: `${PREFIX}-skeleton-root`,

package/lib/esm/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/esm/components/Category/Category.js

@@ -1,9 +1,8 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { useMemo } from 'react';
-import { styled } from '@mui/material/styles';
-import { Avatar, Tooltip, Typography } from '@mui/material';
-import { Link, SCRoutes, useSCFetchCategory, useSCRouting } from '@selfcommunity/react-core';
+import { Avatar, Tooltip, Typography, styled } from '@mui/material';
+import { Link, SCPreferences, SCRoutes, useSCFetchCategory, useSCPreferenceEnabled, useSCRouting } from '@selfcommunity/react-core';
 import { SCCategoryAutoFollowType } from '@selfcommunity/types';
 import CategorySkeleton from './Skeleton';
 import CategoryFollowButton from '../CategoryFollowButton';
@@ -67,21 +66,24 @@ export default function Category(inProps) {
         props: inProps,
         name: PREFIX
     });
-    const { categoryId = null, category = null, className = null, elevation, autoHide = false, categoryFollowButtonProps = {}, showFollowers = true, showTooltip = false, ButtonBaseProps = null } = props, rest = __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 = __rest(props, ["categoryId", "category", "className", "elevation", "variant", "autoHide", "categoryFollowButtonProps", "showFollowers", "showTooltip", "ButtonBaseProps", "cacheStrategy"]);
     // CONTEXT
     const scRoutingContext = useSCRouting();
     // STATE
-    const { scCategory, setSCCategory } = useSCFetchCategory({ id: categoryId, category });
+    const { scCategory } = useSCFetchCategory(Object.assign({ id: categoryId, category }, (cacheStrategy && { cacheStrategy })));
     // MEMO
-    const _ButtonBaseProps = useMemo(() => (ButtonBaseProps ? ButtonBaseProps : { component: Link, to: scRoutingContext.url(SCRoutes.CATEGORY_ROUTE_NAME, scCategory) }), [ButtonBaseProps, scRoutingContext, scCategory]);
+    const _ButtonBaseProps = useMemo(() => ButtonBaseProps ? ButtonBaseProps : { component: Link, to: scCategory ? scRoutingContext.url(SCRoutes.CATEGORY_ROUTE_NAME, scCategory) : '' }, [ButtonBaseProps, scRoutingContext, scCategory]);
     // HOOKS
     const intl = useIntl();
+    const categoryFollowEnabled = useSCPreferenceEnabled(SCPreferences.CONFIGURATIONS_CATEGORY_FOLLOW_ENABLED);
     if (!scCategory) {
-        return _jsx(CategorySkeleton, { elevation: elevation });
+        return _jsx(CategorySkeleton, Object.assign({ elevation: elevation }, (variant && { variant })));
     }
     // RENDER
     if (!autoHide) {
-        return (_jsx(Root, Object.assign({ disableTypography: showTooltip, elevation: elevation, className: classNames(classes.root, className, { [classes.followed]: scCategory.followed }, { [classes.autoFollowed]: scCategory.auto_follow === SCCategoryAutoFollowType.FORCED }), ButtonBaseProps: _ButtonBaseProps, image: _jsx(Avatar, { alt: scCategory.name, src: scCategory.image_medium, variant: "square", className: classes.categoryImage }), primary: _jsx(_Fragment, { children: showTooltip ? (_jsx(Tooltip, Object.assign({ title: scCategory.name }, { children: _jsx(Typography, Object.assign({ className: classes.primary, component: "span", variant: "body1" }, { children: scCategory.name })) }))) : (scCategory.name) }), secondary: _jsx(_Fragment, { children: showTooltip ? (_jsx(Typography, Object.assign({ className: classes.secondary, component: "p", variant: "body2" }, { children: showFollowers ? `${intl.formatMessage(messages.categoryFollowers, { total: scCategory.followers_counter })}` : scCategory.slogan }))) : (_jsx(_Fragment, { children: showFollowers ? `${intl.formatMessage(messages.categoryFollowers, { total: scCategory.followers_counter })}` : scCategory.slogan })) }), actions: _jsx(CategoryFollowButton, Object.assign({ category: scCategory }, categoryFollowButtonProps)) }, rest)));
+        return (_jsx(Root, Object.assign({ disableTypography: showTooltip, elevation: elevation }, (variant && { variant }), { className: classNames(classes.root, className, { [classes.followed]: scCategory.followed }, { [classes.autoFollowed]: scCategory.auto_follow === SCCategoryAutoFollowType.FORCED }), ButtonBaseProps: _ButtonBaseProps, image: _jsx(Avatar, { alt: scCategory.name, src: scCategory.image_medium, variant: "square", className: classes.categoryImage }), primary: _jsx(_Fragment, { children: showTooltip ? (_jsx(Tooltip, Object.assign({ title: scCategory.name }, { children: _jsx(Typography, Object.assign({ className: classes.primary, component: "span", variant: "body1" }, { children: scCategory.name })) }))) : (scCategory.name) }), secondary: _jsx(_Fragment, { children: showTooltip ? (_jsx(Typography, Object.assign({ className: classes.secondary, component: "p", variant: "body2" }, { children: showFollowers && categoryFollowEnabled ? `${intl.formatMessage(messages.categoryFollowers, { total: scCategory.followers_counter })}` : scCategory.slogan }))) : (_jsx(_Fragment, { children: showFollowers && categoryFollowEnabled
+                        ? `${intl.formatMessage(messages.categoryFollowers, { total: scCategory.followers_counter })}`
+                        : scCategory.slogan })) }), actions: _jsx(CategoryFollowButton, Object.assign({ category: scCategory }, categoryFollowButtonProps)) }, rest)));
     }
     return null;
 }

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

@@ -1,7 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { styled } from '@mui/material/styles';
-import Skeleton from '@mui/material/Skeleton';
-import { Button, useTheme } from '@mui/material';
+import { Button, useTheme, styled, Skeleton } from '@mui/material';
 import BaseItem from '../../shared/BaseItem';
 import { PREFIX } from './constants';
 const classes = {

package/lib/esm/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.