@selfcommunity/react-ui 0.11.0-alpha.67 → 0.11.0-alpha.68

package/lib/cjs/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/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/CategoriesSuggestionWidget/CategoriesSuggestionWidget.js

@@ -86,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
@@ -125,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 });
@@ -195,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/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

@@ -68,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/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

@@ -6,17 +6,18 @@ const react_1 = require("react");
 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, material_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, material_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 (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/CategoryHeader/CategoryHeader.js

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

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

@@ -87,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'));
@@ -113,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);
@@ -166,7 +173,7 @@ 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) {

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

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