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

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

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useCallback, useEffect, useMemo, useReducer, useRef, useState } from 'react';
 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';
@@ -84,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
@@ -123,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 });
@@ -193,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/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

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

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

@@ -1,20 +1,21 @@
 import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { styled } from '@mui/material';
 import { CacheStrategies, Logger } from '@selfcommunity/utils';
-import { useSCContext, useSCFetchCategory, useSCUser } from '@selfcommunity/react-core';
+import { SCPreferences, useSCContext, useSCFetchCategory, useSCPaymentsEnabled, useSCPreferences, useSCUser } from '@selfcommunity/react-core';
+import { SCCategoryAutoFollowType, SCContentType } from '@selfcommunity/types';
 import { SCOPE_SC_UI } from '../../constants/Errors';
 import { LoadingButton } from '@mui/lab';
 import { FormattedMessage } from 'react-intl';
 import classNames from 'classnames';
 import { useThemeProps } from '@mui/system';
-import { SCCategoryAutoFollowType } from '@selfcommunity/types';
+import BuyButton from '../BuyButton';
 const PREFIX = 'SCCategoryFollowButton';
 const classes = {
     root: `${PREFIX}-root`
 };
-const FollowButton = styled(LoadingButton, {
+const Root = styled(LoadingButton, {
     name: PREFIX,
     slot: 'Root',
     overridesResolver: (props, styles) => styles.root
@@ -42,24 +43,35 @@ const FollowButton = styled(LoadingButton, {
  * @param inProps
  */
 export default function CategoryFollowButton(inProps) {
+    var _a;
     // PROPS
     const props = useThemeProps({
         props: inProps,
         name: PREFIX
     });
-    const { className, categoryId, category, onFollow } = props, rest = __rest(props, ["className", "categoryId", "category", "onFollow"]);
+    const { className, categoryId, category, onFollow, disableBuyContentIfPaidContent, disabled } = props, rest = __rest(props, ["className", "categoryId", "category", "onFollow", "disableBuyContentIfPaidContent", "disabled"]);
     // CONTEXT
     const scContext = useSCContext();
     const scUserContext = useSCUser();
     const scCategoriesManager = scUserContext.managers.categories;
     // CONST
     const authUserId = scUserContext.user ? scUserContext.user.id : null;
-    const { scCategory, setSCCategory } = useSCFetchCategory({
+    const { preferences } = useSCPreferences();
+    // PAYMENTS
+    const { isPaymentsEnabled } = useSCPaymentsEnabled();
+    const { scCategory } = useSCFetchCategory({
         id: categoryId,
         category,
         cacheStrategy: authUserId ? CacheStrategies.CACHE_FIRST : CacheStrategies.STALE_WHILE_REVALIDATE
     });
     const [followed, setFollowed] = 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 = 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 = useMemo(() => SCPreferences.CONFIGURATIONS_CATEGORY_FOLLOW_ENABLED in preferences && preferences[SCPreferences.CONFIGURATIONS_CATEGORY_FOLLOW_ENABLED].value, [preferences]);
     useEffect(() => {
         /**
          * Call scCategoriesManager.isFollowed inside an effect
@@ -87,8 +99,22 @@ export default function CategoryFollowButton(inProps) {
             followCategory();
         }
     };
-    if (!scCategory || (scCategory && followed && scCategory.auto_follow === SCCategoryAutoFollowType.FORCED)) {
+    if (!scCategory || !categoryFollowEnabled || (scCategory && followed && scCategory.auto_follow === SCCategoryAutoFollowType.FORCED)) {
         return null;
     }
-    return (_jsx(FollowButton, Object.assign({ size: "small", variant: "outlined", onClick: handleFollowAction, loading: scUserContext.user ? followed === null || scCategoriesManager.isLoading(scCategory) : null, className: classNames(classes.root, className) }, rest, { children: followed && scUserContext.user ? (_jsx(FormattedMessage, { defaultMessage: "ui.categoryFollowButton.unfollow", id: "ui.categoryFollowButton.unfollow" })) : (_jsx(FormattedMessage, { defaultMessage: "ui.categoryFollowButton.follow", id: "ui.categoryFollowButton.follow" })) })));
+    if (scCategoriesManager.isLoading(scCategory) || followed === null) {
+        return (_jsx(Root, Object.assign({ size: "small", variant: "outlined", loading: true, className: classNames(classes.root, className) }, { children: _jsx(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 _jsx(BuyButton, { contentType: SCContentType.CATEGORY, content: scCategory, disabled: disableBuyContentIfPaidContent });
+    }
+    return (_jsx(Root, Object.assign({ size: "small", variant: "outlined", onClick: handleFollowAction, loading: scUserContext.user ? scCategoriesManager.isLoading(scCategory) : null, className: classNames(classes.root, className), disabled: isActionFollowDisabled }, rest, { children: followed && scUserContext.user ? (_jsx(FormattedMessage, { defaultMessage: "ui.categoryFollowButton.unfollow", id: "ui.categoryFollowButton.unfollow" })) : (_jsx(FormattedMessage, { defaultMessage: "ui.categoryFollowButton.follow", id: "ui.categoryFollowButton.follow" })) })));
 }

package/lib/esm/components/CategoryHeader/CategoryHeader.js

@@ -4,11 +4,13 @@ import { useMemo } from 'react';
 import { Box, Paper, Typography, styled } from '@mui/material';
 import CategoryFollowButton from '../CategoryFollowButton';
 import { FormattedMessage } from 'react-intl';
-import { useSCFetchCategory } from '@selfcommunity/react-core';
+import { useSCFetchCategory, useSCPaymentsEnabled } from '@selfcommunity/react-core';
+import { SCContentType } from '@selfcommunity/types';
 import classNames from 'classnames';
 import { useThemeProps } from '@mui/system';
 import CategoryFollowersButton from '../CategoryFollowersButton';
 import { PREFIX } from './constants';
+import BuyButton from '../BuyButton';
 const classes = {
     root: `${PREFIX}-root`,
     cover: `${PREFIX}-cover`,
@@ -54,6 +56,7 @@ const Root = styled(Box, {
  * @param inProps
  */
 export default function CategoryHeader(inProps) {
+    var _a;
     // PROPS
     const props = useThemeProps({
         props: inProps,
@@ -62,6 +65,8 @@ export default function CategoryHeader(inProps) {
     const { className, categoryId, category, CategoryFollowButtonProps = {}, CategoryFollowersButtonProps = {} } = props, rest = __rest(props, ["className", "categoryId", "category", "CategoryFollowButtonProps", "CategoryFollowersButtonProps"]);
     // STATE
     const { scCategory, setSCCategory } = useSCFetchCategory({ id: categoryId, category });
+    // PAYMENTS
+    const { isPaymentsEnabled } = useSCPaymentsEnabled();
     /**
      * Handles callback follow/unfollow category
      */
@@ -73,5 +78,5 @@ export default function CategoryHeader(inProps) {
     if (!scCategory) {
         return null;
     }
-    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: [_jsx(Paper, { style: _backgroundCover, classes: { root: classes.cover } }), _jsxs(Box, Object.assign({ className: classes.info }, { children: [_jsx(Typography, Object.assign({ variant: "h3", className: classes.name, gutterBottom: true }, { children: scCategory.name })), scCategory.slogan && (_jsx(Typography, Object.assign({ variant: "h5", className: classes.slogan }, { children: scCategory.slogan }))), _jsxs(Box, Object.assign({ className: classes.followed }, { children: [_jsx(Typography, Object.assign({ className: classes.followedCounter, component: "div" }, { children: _jsx(FormattedMessage, { id: "ui.categoryHeader.followedBy", defaultMessage: "ui.categoryHeader.followedBy", values: { total: scCategory.followers_counter } }) })), _jsx(CategoryFollowersButton, Object.assign({ category: scCategory, categoryId: scCategory === null || scCategory === void 0 ? void 0 : scCategory.id }, CategoryFollowersButtonProps))] })), _jsx(Box, Object.assign({ className: classes.action }, { children: _jsx(CategoryFollowButton, Object.assign({ category: scCategory, onFollow: handleFollow }, CategoryFollowButtonProps)) }))] }))] })));
+    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: [_jsx(Paper, { style: _backgroundCover, classes: { root: classes.cover } }), _jsxs(Box, Object.assign({ className: classes.info }, { children: [_jsx(Typography, Object.assign({ variant: "h3", className: classes.name, gutterBottom: true }, { children: scCategory.name })), scCategory.slogan && (_jsx(Typography, Object.assign({ variant: "h5", className: classes.slogan }, { children: scCategory.slogan }))), _jsxs(Box, Object.assign({ className: classes.followed }, { children: [_jsx(Typography, Object.assign({ className: classes.followedCounter, component: "div" }, { children: _jsx(FormattedMessage, { id: "ui.categoryHeader.followedBy", defaultMessage: "ui.categoryHeader.followedBy", values: { total: scCategory.followers_counter } }) })), _jsx(CategoryFollowersButton, Object.assign({ category: scCategory, categoryId: scCategory === null || scCategory === void 0 ? void 0 : scCategory.id }, CategoryFollowersButtonProps))] })), _jsxs(Box, Object.assign({ className: classes.action }, { children: [isPaymentsEnabled && ((_a = scCategory.paywalls) === null || _a === void 0 ? void 0 : _a.length) > 0 && scCategory.payment_order && (_jsx(BuyButton, { contentType: SCContentType.CATEGORY, content: scCategory })), _jsx(CategoryFollowButton, Object.assign({ category: scCategory, onFollow: handleFollow }, CategoryFollowButtonProps))] }))] }))] })));
 }

package/lib/esm/components/CategoryTrendingUsersWidget/CategoryTrendingUsersWidget.js

@@ -85,6 +85,10 @@ export default function CategoryTrendingUsersWidget(inProps) {
     const scPreferencesContext = useSCPreferences();
     const contentAvailability = useMemo(() => SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY in scPreferencesContext.preferences &&
         scPreferencesContext.preferences[SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY].value, [scPreferencesContext]);
+    const followOrConnectionEnabled = useMemo(() => (SCPreferences.CONFIGURATIONS_FOLLOW_ENABLED in scPreferencesContext.preferences &&
+        scPreferencesContext.preferences[SCPreferences.CONFIGURATIONS_FOLLOW_ENABLED].value) ||
+        (SCPreferences.CONFIGURATIONS_CONNECTION_ENABLED in scPreferencesContext.preferences &&
+            scPreferencesContext.preferences[SCPreferences.CONFIGURATIONS_CONNECTION_ENABLED].value), [scPreferencesContext.preferences]);
     // HOOKS
     const theme = useTheme();
     const isMobile = useMediaQuery(theme.breakpoints.down('md'));
@@ -111,7 +115,10 @@ export default function CategoryTrendingUsersWidget(inProps) {
     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);
@@ -164,7 +171,7 @@ export default 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 _jsx(HiddenPlaceholder, {});
     }
     if (!state.initialized) {

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