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

package/lib/cjs/components/BuyButton/BuyButton.js

@@ -0,0 +1,196 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const lab_1 = require("@mui/lab");
+const material_1 = require("@mui/material");
+const system_1 = require("@mui/system");
+const react_core_1 = require("@selfcommunity/react-core");
+const types_1 = require("@selfcommunity/types");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const react_1 = require("react");
+const react_intl_1 = require("react-intl");
+const PaywallsDialog_1 = tslib_1.__importDefault(require("../PaywallsDialog"));
+const api_services_1 = require("@selfcommunity/api-services");
+const utils_1 = require("@selfcommunity/utils");
+const Paywalls_1 = tslib_1.__importDefault(require("../Paywalls"));
+const PaymentOrderPdfButton_1 = tslib_1.__importDefault(require("../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 = (0, material_1.styled)(lab_1.LoadingButton, {
+    name: PREFIX,
+    slot: 'RequestRoot'
+})(() => ({}));
+const SwipeableDrawerRoot = (0, material_1.styled)(material_1.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
+ */
+function BuyButton(inProps) {
+    // PROPS
+    const props = (0, system_1.useThemeProps)({
+        props: inProps,
+        name: PREFIX
+    });
+    const { className, contentId, contentType, content, disabled, onPurchase, showTicket = false, PaymentOrderPdfButtonComponentProps = {}, label } = props, rest = tslib_1.__rest(props, ["className", "contentId", "contentType", "content", "disabled", "onPurchase", "showTicket", "PaymentOrderPdfButtonComponentProps", "label"]);
+    // STATE
+    const [open, setOpen] = (0, react_1.useState)(false);
+    // CONTEXT
+    const scContext = (0, react_core_1.useSCContext)();
+    const scUserContext = (0, react_core_1.useSCUser)();
+    const theme = (0, material_1.useTheme)();
+    const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'));
+    // CONST
+    const [purchased, setPurchased] = (0, react_1.useState)(null);
+    const [products, setProducts] = (0, react_1.useState)([]);
+    const [paymentOrder, setPaymentOrder] = (0, react_1.useState)(null);
+    const [btnLabel, setBtnLabel] = (0, react_1.useState)(label !== null && label !== void 0 ? label : (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: `ui.buyButton.buy${contentType}`, id: `ui.buyButton.buy${(0, utils_1.capitalize)(contentType)}` }));
+    // HANDLERS
+    const handleClose = (0, react_1.useCallback)(() => {
+        setOpen(false);
+    }, [open]);
+    const handleOpen = (0, react_1.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 = (0, react_1.useCallback)((price) => {
+        // update order/subscription when will be recurring payment
+    }, [paymentOrder, purchased]);
+    /**
+     * Get current status
+     */
+    const getStatus = () => {
+        switch (contentType) {
+            case types_1.SCContentType.EVENT:
+                // Get status event subscribed
+                api_services_1.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 === types_1.SCEventSubscriptionStatusType.GOING) {
+                            setBtnLabel((0, jsx_runtime_1.jsx)(react_intl_1.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 === types_1.SCEventSubscriptionStatusType.GOING);
+                    }
+                });
+                break;
+            case types_1.SCContentType.CATEGORY:
+                // Get status category followed
+                api_services_1.CategoryApiClient.getSpecificCategory(contentId ? contentId : content.id).then((data) => {
+                    if (data.followed || data.payment_order) {
+                        setBtnLabel((0, jsx_runtime_1.jsx)(react_intl_1.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 types_1.SCContentType.GROUP:
+                // Get status group subscribed
+                api_services_1.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 === types_1.SCGroupSubscriptionStatusType.SUBSCRIBED) {
+                            setBtnLabel((0, jsx_runtime_1.jsx)(react_intl_1.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 === types_1.SCGroupSubscriptionStatusType.SUBSCRIBED);
+                    }
+                });
+                break;
+            case types_1.SCContentType.COURSE:
+                // Get status course joined
+                api_services_1.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 === types_1.SCCourseJoinStatusType.JOINED) {
+                            setBtnLabel((0, jsx_runtime_1.jsx)(react_intl_1.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 === types_1.SCCourseJoinStatusType.JOINED || data.join_status === types_1.SCCourseJoinStatusType.MANAGER);
+                    }
+                });
+                break;
+            default:
+                break;
+        }
+    };
+    (0, react_1.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 ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: disabled ? (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.buyButton.disabled", defaultMessage: "ui.buyButton.disabled" }) : '' }, { children: (0, jsx_runtime_1.jsx)(RequestRoot, Object.assign({ className: (0, classnames_1.default)(classes.requestRoot, className), variant: "contained", color: purchased ? 'inherit' : 'secondary', size: "small", startIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "dredit-card" }), loading: scUserContext.user === undefined || purchased === null, onClick: handleOpen, disabled: disabled || (!paymentOrder && purchased) }, rest, { children: !paymentOrder && purchased ? (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.buyButton.free", defaultMessage: "ui.buyButton.free" }) : btnLabel })) })), paymentOrder && showTicket && (0, jsx_runtime_1.jsx)(PaymentOrderPdfButton_1.default, Object.assign({}, PaymentOrderPdfButtonComponentProps, { paymentOrder: paymentOrder })), open && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isMobile ? ((0, jsx_runtime_1.jsx)(SwipeableDrawerRoot, Object.assign({ className: classes.drawerRoot, PaperProps: { className: classes.paper }, open: true, onClose: handleClose, onOpen: handleOpen, anchor: "bottom", disableSwipeToOpen: true }, { children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5", component: "div", marginBottom: 2 }, { children: (0, jsx_runtime_1.jsx)("b", { children: paymentOrder ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paywallsDialog.title.purchased", defaultMessage: "ui.paywallsDialog.title.purchased" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.paywallsDialog.title", defaultMessage: "ui.paywallsDialog.title" })) }) })), (0, jsx_runtime_1.jsx)(Paywalls_1.default, Object.assign({ contentType: contentType }, (content ? { content } : { contentId }), { prefetchedPaymentContentStatus: {
+                                    paywalls: products,
+                                    payment_order: paymentOrder
+                                }, onUpdatePaymentOrder: handleUpdatePaymentOrder }))] }) }))) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(PaywallsDialog_1.default, { open: true, onClose: handleClose, PaywallsComponentProps: Object.assign(Object.assign({ contentType }, (content ? { content } : { contentId })), { prefetchedPaymentContentStatus: {
+                                paywalls: products,
+                                payment_order: paymentOrder
+                            }, onUpdatePaymentOrder: handleUpdatePaymentOrder }) }) })) }))] }));
+}
+exports.default = BuyButton;

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

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

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

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const BuyButton_1 = tslib_1.__importDefault(require("./BuyButton"));
+exports.default = BuyButton_1.default;

package/lib/cjs/components/Categories/Categories.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 api_services_1 = require("@selfcommunity/api-services");
 const react_core_1 = require("@selfcommunity/react-core");
@@ -25,7 +24,7 @@ const classes = {
     category: `${constants_1.PREFIX}-category`,
     noResults: `${constants_1.PREFIX}-no-results`
 };
-const Root = (0, styles_1.styled)(material_1.Box, {
+const Root = (0, material_1.styled)(material_1.Box, {
     name: constants_1.PREFIX,
     slot: 'Root'
 })(() => ({}));

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

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const styles_1 = require("@mui/material/styles");
 const material_1 = require("@mui/material");
 const Skeleton_1 = tslib_1.__importDefault(require("../Category/Skeleton"));
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
@@ -11,7 +10,7 @@ const classes = {
     root: `${constants_1.PREFIX}-skeleton-root`,
     categories: `${constants_1.PREFIX}-categories`
 };
-const Root = (0, styles_1.styled)(material_1.Box, {
+const Root = (0, material_1.styled)(material_1.Box, {
     name: constants_1.PREFIX,
     slot: 'SkeletonRoot'
 })(() => ({}));

package/lib/cjs/components/CategoriesPopularWidget/CategoriesPopularWidget.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 = tslib_1.__importStar(require("react"));
-const styles_1 = require("@mui/material/styles");
 const material_1 = require("@mui/material");
 const api_services_1 = require("@selfcommunity/api-services");
 const utils_1 = require("@selfcommunity/utils");
@@ -30,11 +29,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'
 })(() => ({}));

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

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

package/lib/cjs/components/CategoriesSuggestionWidget/CategoriesSuggestionWidget.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 = tslib_1.__importStar(require("react"));
-const styles_1 = require("@mui/material/styles");
 const material_1 = require("@mui/material");
 const api_services_1 = require("@selfcommunity/api-services");
 const react_core_1 = require("@selfcommunity/react-core");
@@ -30,11 +29,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'
 })(() => ({}));
@@ -87,8 +86,10 @@ function CategoriesSuggestionWidget(inProps) {
     // HOOKS
     const theme = (0, material_1.useTheme)();
     const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'));
+    const { preferences } = (0, react_core_1.useSCPreferences)();
     // REFS
     const updatesSubscription = (0, react_1.useRef)(null);
+    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]);
     /**
      * Initialize component
      * Fetch data only if the component is not initialized and it is not loading data
@@ -126,13 +127,13 @@ function CategoriesSuggestionWidget(inProps) {
     // EFFECTS
     (0, react_1.useEffect)(() => {
         let _t;
-        if (scUserContext.user) {
+        if (scUserContext.user && categoryFollowEnabled) {
             _t = setTimeout(_initComponent);
             return () => {
                 _t && clearTimeout(_t);
             };
         }
-    }, [scUserContext.user]);
+    }, [scUserContext.user, categoryFollowEnabled]);
     (0, react_1.useEffect)(() => {
         if (openDialog && state.next && state.results.length <= limit && state.initialized) {
             dispatch({ type: widget_1.actionWidgetTypes.LOADING_NEXT });
@@ -196,7 +197,7 @@ 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 (0, jsx_runtime_1.jsx)(HiddenPlaceholder_1.default, {});
     }
     if (!state.initialized) {

package/lib/cjs/components/CategoriesSuggestionWidget/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 List_1 = tslib_1.__importDefault(require("@mui/material/List"));
-const styles_1 = require("@mui/material/styles");
 const Skeleton_1 = tslib_1.__importDefault(require("../Category/Skeleton"));
 const Widget_1 = tslib_1.__importDefault(require("../Widget"));
 const material_1 = require("@mui/material");
@@ -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 CategoriesSuggestionWidgetSkeleton(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((category, index) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { elevation: 0 }) }, index))) })) }) })));
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: classes.root }, props, { children: (0, jsx_runtime_1.jsx)(material_1.CardContent, { children: (0, jsx_runtime_1.jsx)(material_1.List, Object.assign({ className: classes.list }, { children: [...Array(4)].map((category, index) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { elevation: 0 }) }, index))) })) }) })));
 }
 exports.default = CategoriesSuggestionWidgetSkeleton;

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,21 @@ 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, setSCCategory } = (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)();
     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 ? `${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 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
      */