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

package/lib/esm/components/CategoryAutocomplete/CategoryAutocomplete.js

@@ -1,16 +1,11 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useEffect, useState } from 'react';
+import { Fragment, useEffect, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
-import Autocomplete from '@mui/material/Autocomplete';
-import TextField from '@mui/material/TextField';
-import CircularProgress from '@mui/material/CircularProgress';
-import Checkbox from '@mui/material/Checkbox';
 import parse from 'autosuggest-highlight/parse';
 import match from 'autosuggest-highlight/match';
-import { Chip } from '@mui/material';
+import { Autocomplete, Chip, TextField, Checkbox, CircularProgress, styled } from '@mui/material';
 import { useSCFetchCategories } from '@selfcommunity/react-core';
-import { styled } from '@mui/material/styles';
 import { useThemeProps } from '@mui/system';
 const PREFIX = 'SCCategoryAutocomplete';
 const classes = {
@@ -19,7 +14,7 @@ const classes = {
 const Root = styled(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.
@@ -49,22 +44,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: _jsx(FormattedMessage, { id: "ui.categoryAutocomplete.label", defaultMessage: "ui.categoryAutocomplete.label" })
-    } } = props, rest = __rest(props, ["onChange", "multiple", "defaultValue", "limitCountCategories", "checkboxSelect", "disabled", "TextFieldProps"]);
+    } } = props, rest = __rest(props, ["onChange", "multiple", "defaultValue", "limitCountCategories", "checkboxSelect", "disabled", "endpointQueryParams", "TextFieldProps"]);
     // State
     const [open, setOpen] = useState(false);
-    // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-    // @ts-ignore
     const [value, setValue] = useState(typeof defaultValue === 'string' ? null : defaultValue);
     // HOOKS
-    const { categories, isLoading } = useSCFetchCategories();
+    const { categories, isLoading } = useSCFetchCategories({ endpointQueryParams });
     useEffect(() => {
         if (value === null) {
             return;
         }
-        onChange && onChange(value);
+        onChange === null || onChange === void 0 ? void 0 : onChange(value);
     }, [value]);
     useEffect(() => {
         if (!isLoading && typeof defaultValue === 'string') {
@@ -78,7 +71,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;
@@ -95,9 +88,9 @@ const CategoryAutocomplete = (inProps) => {
         }, renderOption: (props, option, { selected, inputValue }) => {
             const matches = match(option.name, inputValue);
             const parts = parse(option.name, matches);
-            return (_jsxs("li", Object.assign({}, props, { children: [checkboxSelect && _jsx(Checkbox, { style: { marginRight: 8 }, checked: selected }), _jsx(Chip, { label: _jsx(React.Fragment, { children: parts.map((part, index) => (_jsx("span", Object.assign({ style: { fontWeight: part.highlight ? 700 : 400 } }, { children: part.text }), index))) }) })] })));
+            return (_jsxs("li", Object.assign({}, props, { children: [checkboxSelect && _jsx(Checkbox, { style: { marginRight: 8 }, checked: selected }), _jsx(Chip, { label: _jsx(Fragment, { children: parts.map((part, index) => (_jsx("span", Object.assign({ style: { fontWeight: part.highlight ? 700 : 400 } }, { children: part.text }), index))) }) })] })));
         }, renderInput: (params) => {
-            return (_jsx(TextField, Object.assign({}, params, TextFieldProps, { margin: "dense", InputProps: Object.assign(Object.assign({}, params.InputProps), { autoComplete: 'categories', endAdornment: (_jsxs(React.Fragment, { children: [isLoading ? _jsx(CircularProgress, { color: "inherit", size: 20 }) : null, params.InputProps.endAdornment] })) }) })));
+            return (_jsx(TextField, Object.assign({}, params, TextFieldProps, { margin: "dense", InputProps: Object.assign(Object.assign({}, params.InputProps), { autoComplete: 'categories', endAdornment: (_jsxs(Fragment, { children: [isLoading ? _jsx(CircularProgress, { color: "inherit", size: 20 }) : null, params.InputProps.endAdornment] })) }) })));
         } }, rest)));
 };
 export default CategoryAutocomplete;

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 { styled } from '@mui/material/styles';
+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 (scUserContext.user && (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/CategoryFollowersButton/CategoryFollowersButton.d.ts

@@ -1,4 +1,4 @@
-import { ButtonProps } from '@mui/material/Button/Button';
+import { ButtonProps } from '@mui/material';
 import { SCCategoryType } from '@selfcommunity/types';
 import { BaseDialogProps } from '../../shared/BaseDialog';
 export interface CategoryFollowersButtonProps extends Pick<ButtonProps, Exclude<keyof ButtonProps, 'onClick' | 'disabled'>> {

package/lib/esm/components/CategoryFollowersButton/CategoryFollowersButton.js

@@ -1,8 +1,6 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Avatar, AvatarGroup, Button, List, ListItem, Typography, useTheme } from '@mui/material';
-import { styled } from '@mui/material/styles';
-import useMediaQuery from '@mui/material/useMediaQuery';
+import { Avatar, AvatarGroup, Button, List, ListItem, Typography, useTheme, styled, useMediaQuery } from '@mui/material';
 import { useThemeProps } from '@mui/system';
 import { CategoryService, Endpoints, http } from '@selfcommunity/api-services';
 import { useSCFetchCategory } from '@selfcommunity/react-core';

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

@@ -1,15 +1,16 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo } from 'react';
-import { styled } from '@mui/material/styles';
-import { Box, Paper, Typography } from '@mui/material';
+import { Box, Paper, Typography, styled } from '@mui/material';
 import CategoryFollowButton from '../CategoryFollowButton';
 import { FormattedMessage } from 'react-intl';
-import { useSCFetchCategory } from '@selfcommunity/react-core';
+import { SCPreferences, useSCFetchCategory, useSCPaymentsEnabled, useSCPreferenceEnabled } 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`,
@@ -55,6 +56,7 @@ const Root = styled(Box, {
  * @param inProps
  */
 export default function CategoryHeader(inProps) {
+    var _a;
     // PROPS
     const props = useThemeProps({
         props: inProps,
@@ -63,6 +65,9 @@ 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 });
+    const categoryFollowEnabled = useSCPreferenceEnabled(SCPreferences.CONFIGURATIONS_CATEGORY_FOLLOW_ENABLED);
+    // PAYMENTS
+    const { isPaymentsEnabled } = useSCPaymentsEnabled();
     /**
      * Handles callback follow/unfollow category
      */
@@ -74,5 +79,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 }))), categoryFollowEnabled && (_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/CategoryHeader/Skeleton.js

@@ -1,11 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box } from '@mui/material';
-import { styled } from '@mui/material/styles';
-import Skeleton from '@mui/material/Skeleton';
+import { Box, styled, Skeleton } from '@mui/material';
 import { PREFIX } from './constants';
 const classes = {
     root: `${PREFIX}-skeleton-root`,
-    cover: `${PREFIX}-skeleton-cover`,
+    cover: `${PREFIX}-skeleton-cover`
 };
 const Root = styled(Box, {
     name: PREFIX,

package/lib/esm/components/CategoryTrendingFeedWidget/CategoryTrendingFeedWidget.js

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

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

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

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

@@ -1,9 +1,7 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useEffect, useMemo, useReducer, useState } from 'react';
-import { styled } from '@mui/material/styles';
-import List from '@mui/material/List';
-import { Button, CardContent, ListItem, Typography, useMediaQuery, useTheme } from '@mui/material';
+import { Button, CardContent, ListItem, Typography, useMediaQuery, useTheme, styled, List } from '@mui/material';
 import Widget from '../Widget';
 import { http, Endpoints, CategoryService } from '@selfcommunity/api-services';
 import { SCCache, SCPreferences, useSCFetchCategory, useSCPreferences, useSCUser } from '@selfcommunity/react-core';
@@ -87,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'));
@@ -113,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);
@@ -166,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/CategoryTrendingUsersWidget/Skeleton.js

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

package/lib/esm/components/ChangeCover/ChangeCover.js

@@ -1,15 +1,12 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React, { useContext, useRef, useState } from 'react';
-import { styled } from '@mui/material/styles';
-import { Alert, Box, Button, Divider, ListItemIcon, Menu, MenuItem, Popover, SwipeableDrawer, Typography, useMediaQuery, useTheme } from '@mui/material';
+import { Alert, Box, Button, Divider, ListItemIcon, Menu, MenuItem, Popover, SwipeableDrawer, Typography, useMediaQuery, useTheme, Icon, CircularProgress, styled } from '@mui/material';
 import { Endpoints, http } from '@selfcommunity/api-services';
 import { SCUserContext } from '@selfcommunity/react-core';
-import Icon from '@mui/material/Icon';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import ConfirmDialog from '../../shared/ConfirmDialog/ConfirmDialog';
 import classNames from 'classnames';
-import CircularProgress from '@mui/material/CircularProgress';
 import { useThemeProps } from '@mui/system';
 import { SCOPE_SC_UI } from '../../constants/Errors';
 import { Logger } from '@selfcommunity/utils';

package/lib/esm/components/ChangeGroupCover/ChangeGroupCover.js

@@ -1,10 +1,8 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useContext, useRef, useState } from 'react';
-import { styled } from '@mui/material/styles';
-import { Alert } from '@mui/material';
+import { Alert, styled, Icon } from '@mui/material';
 import { SCUserContext } from '@selfcommunity/react-core';
-import Icon from '@mui/material/Icon';
 import { defineMessages, useIntl } from 'react-intl';
 import classNames from 'classnames';
 import { useThemeProps } from '@mui/system';

package/lib/esm/components/ChangeGroupPicture/ChangeGroupPicture.js

@@ -1,9 +1,7 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useContext, useRef, useState } from 'react';
-import { styled } from '@mui/material/styles';
-import { Alert } from '@mui/material';
-import Icon from '@mui/material/Icon';
+import { Alert, styled, Icon } from '@mui/material';
 import { SCUserContext } from '@selfcommunity/react-core';
 import classNames from 'classnames';
 import { useThemeProps } from '@mui/system';

package/lib/esm/components/ChangePicture/ChangePicture.js

@@ -1,11 +1,9 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useContext, useState } from 'react';
-import { styled } from '@mui/material/styles';
-import { Button } from '@mui/material';
+import { Button, styled, Icon } from '@mui/material';
 import ChangePictureDialog from './ChangePictureDialog/ChangePictureDialog';
 import { FormattedMessage } from 'react-intl';
-import Icon from '@mui/material/Icon';
 import { SCUserContext } from '@selfcommunity/react-core';
 import classNames from 'classnames';
 import { useThemeProps } from '@mui/system';

package/lib/esm/components/ChangePicture/ChangePictureDialog/ChangePictureDialog.js

@@ -1,18 +1,13 @@
 import { __awaiter, __rest } from "tslib";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useContext, useEffect, useRef, useState } from 'react';
-import { styled } from '@mui/material/styles';
-import Button from '@mui/material/Button';
-import Typography from '@mui/material/Typography';
-import { Alert, Box, IconButton, ImageList, ImageListItem, ImageListItemBar } from '@mui/material';
-import Icon from '@mui/material/Icon';
+import { Alert, Box, IconButton, ImageList, ImageListItem, ImageListItemBar, styled, Typography, Button, CircularProgress, Icon } from '@mui/material';
 import { Endpoints, UserService } from '@selfcommunity/api-services';
 import { SCContext, SCUserContext } from '@selfcommunity/react-core';
 import { FormattedMessage } from 'react-intl';
 import BaseDialog from '../../../shared/BaseDialog';
 import ConfirmDialog from '../../../shared/ConfirmDialog/ConfirmDialog';
 import classNames from 'classnames';
-import CircularProgress from '@mui/material/CircularProgress';
 import { scroll } from 'seamless-scroll-polyfill';
 import { SCOPE_SC_UI } from '../../../constants/Errors';
 import { Logger } from '@selfcommunity/utils';

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;

package/lib/esm/components/Checkout/Checkout.js

@@ -0,0 +1,128 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import { Box, Button, Icon, styled, Typography } from '@mui/material';
+import { useThemeProps } from '@mui/system';
+import classNames from 'classnames';
+import { EmbeddedCheckout, EmbeddedCheckoutProvider } from '@stripe/react-stripe-js';
+import { loadStripe } from '@stripe/stripe-js';
+import { PaymentApiClient } from '@selfcommunity/api-services';
+import CheckoutSkeleton from './Skeleton';
+import { PREFIX } from './constants';
+import { SCContentType } from '@selfcommunity/types';
+import { FormattedMessage, useIntl } from 'react-intl';
+import { getDefaultLocale } from '../../utils/payment';
+import { SCPreferences, SCPreferencesContext, useSCPaymentsEnabled, useSCUser } from '@selfcommunity/react-core';
+import Event from '../Event';
+import Category from '../Category';
+import Course from '../Course';
+import Group from '../Group';
+import { SCEventTemplateType } from '../../types/event';
+import { SCCourseTemplateType } from '../../types/course';
+import PaymentOrder from '../PaymentOrder';
+import CheckoutHeaderInfoWidget from './CheckoutHeaderInfoWidget';
+const classes = {
+    root: `${PREFIX}-root`,
+    content: `${PREFIX}-content`,
+    contentObject: `${PREFIX}-content-object`,
+    contentDesc: `${PREFIX}-content-desc`,
+    contentCoverage: `${PREFIX}-content-coverage`,
+    checkout: `${PREFIX}-checkout`,
+    object: `${PREFIX}-object`,
+    paymentOrder: `${PREFIX}-payment-order`
+};
+const Root = styled(Box, {
+    slot: 'Root',
+    name: PREFIX
+})(() => ({}));
+export default function Checkout(inProps) {
+    // PROPS
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX
+    });
+    const { className, clientSecret, contentType, contentId, content, priceId, returnUrl, successUrl, uiMode, onComplete } = props, rest = __rest(props, ["className", "clientSecret", "contentType", "contentId", "content", "priceId", "returnUrl", "successUrl", "uiMode", "onComplete"]);
+    // STATE
+    const [loading, setLoading] = useState(false);
+    const [initialized, setInitialized] = useState(false);
+    const [paymentOrder, setPaymentOrder] = useState(null);
+    // CONTEXT
+    const scUserContext = useSCUser();
+    const scPreferencesContext = useContext(SCPreferencesContext);
+    const appUrl = useMemo(() => scPreferencesContext.preferences && scPreferencesContext.preferences[SCPreferences.CONFIGURATIONS_APP_URL].value, [scPreferencesContext.preferences]);
+    const intl = useIntl();
+    // HOOKS
+    const { isPaymentsEnabled, stripePublicKey, stripeConnectedAccountId } = useSCPaymentsEnabled();
+    const stripePromise = isPaymentsEnabled && stripePublicKey && stripeConnectedAccountId && loadStripe
+        ? loadStripe(stripePublicKey, { stripeAccount: stripeConnectedAccountId, locale: getDefaultLocale(intl).locale })
+        : null;
+    // STATE
+    const [clientSecretKey, setClientSecretKey] = useState(clientSecret);
+    // CONST
+    const isContentObject = useMemo(() => contentType && contentId !== undefined, [contentType, contentId]);
+    const fetchClientSecret = useCallback(() => {
+        // Create a Checkout Session
+        if (!loading) {
+            setInitialized(true);
+            setLoading(true);
+            PaymentApiClient.getPaymentContentStatus({ content_id: contentId, content_type: contentType })
+                .then((data) => {
+                if (!data.payment_order) {
+                    PaymentApiClient.checkoutCreateSession(Object.assign(Object.assign(Object.assign({ content_type: contentType, content_id: content ? content.id : contentId, payment_price_id: priceId }, (returnUrl && { return_url: returnUrl })), (successUrl && { success_url: successUrl })), (uiMode && { ui_mode: uiMode }))).then((r) => {
+                        setClientSecretKey(r.client_secret);
+                        setLoading(false);
+                    });
+                }
+                else {
+                    setPaymentOrder(data.payment_order);
+                    setLoading(false);
+                }
+            })
+                .catch((error) => {
+                console.error('Error fetching session client secret:', error);
+            });
+        }
+    }, [contentType, contentId, content, priceId, loading]);
+    // EFFECTS
+    useEffect(() => {
+        let _t;
+        if (scUserContext.user && contentType && (contentId || content) && priceId && !clientSecretKey && Boolean(stripePromise) && !initialized) {
+            _t = setTimeout(fetchClientSecret);
+            return () => {
+                _t && clearTimeout(_t);
+            };
+        }
+    }, [scUserContext.user, clientSecretKey, stripePromise, contentType, contentId, content, priceId, loading, initialized]);
+    // Payment provider options
+    const providerOptions = useMemo(() => (Object.assign({ clientSecret: clientSecretKey }, (onComplete && { onComplete })
+    // ...(onShippingDetailsChange && {onShippingDetailsChange})
+    )), [clientSecretKey, onComplete]);
+    if (!isPaymentsEnabled) {
+        return null;
+    }
+    // eslint-disable-next-line @typescript-eslint/no-misused-promises
+    if (!stripePromise || (!clientSecretKey && !paymentOrder) || !scUserContext.user) {
+        return _jsx(CheckoutSkeleton, {});
+    }
+    const renderContentObject = () => {
+        let _c = null;
+        if (isContentObject) {
+            switch (contentType) {
+                case SCContentType.EVENT:
+                    _c = (_jsx(Event, { eventId: contentId, template: SCEventTemplateType.PREVIEW, actions: _jsx(_Fragment, {}), hideEventParticipants: true, hideEventPlanner: true, variant: "outlined", className: classes.object }));
+                    break;
+                case SCContentType.CATEGORY:
+                    _c = _jsx(Category, { categoryId: contentId, actions: _jsx(_Fragment, {}), variant: "outlined", className: classes.object });
+                    break;
+                case SCContentType.COURSE:
+                    _c = (_jsx(Course, { courseId: contentId, template: SCCourseTemplateType.PREVIEW, actions: _jsx(_Fragment, {}), hideEventParticipants: true, hideEventPlanner: true, variant: "outlined", className: classes.object }));
+                    break;
+                case SCContentType.GROUP:
+                    _c = _jsx(Group, { groupId: contentId, variant: "outlined", hideActions: true, hideEventParticipants: true, hideEventPlanner: true, className: classes.object });
+                    break;
+            }
+        }
+        return _c;
+    };
+    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: [isContentObject && contentType !== SCContentType.COMMUNITY && clientSecret && (_jsxs(Box, Object.assign({ className: classes.content }, { children: [_jsxs(Box, Object.assign({ className: classes.contentObject }, { children: [_jsx(Box, { className: classes.contentCoverage }), renderContentObject()] })), _jsx(Box, Object.assign({ className: classes.contentDesc }, { children: _jsx(CheckoutHeaderInfoWidget, { content: content, contentType: contentType }) }))] }))), clientSecret && (_jsx(Box, Object.assign({ id: "checkout", className: classes.checkout }, { children: _jsx(EmbeddedCheckoutProvider, Object.assign({ stripe: stripePromise, options: providerOptions }, { children: _jsx(EmbeddedCheckout, {}) })) }))), !clientSecret && paymentOrder && (_jsxs(Box, Object.assign({ className: classes.paymentOrder }, { children: [_jsxs(Button, Object.assign({ variant: "text", color: "primary", href: `${appUrl}`, startIcon: _jsx(Icon, { children: "arrow_back" }) }, { children: [' ', "Back to home"] })), _jsx(Typography, Object.assign({ variant: "h2", color: "textSecondary", mb: 2 }, { children: _jsx("b", { children: _jsx(FormattedMessage, { id: "ui.checkout.paymentOrder", defaultMessage: "ui.checkout.paymentOrder" }) }) })), _jsx(PaymentOrder, { paymentOrderId: paymentOrder.id, hidePaymentOrderPdfButton: contentType !== SCContentType.EVENT })] })))] })));
+}

package/lib/esm/components/Checkout/CheckoutHeaderInfoWidget.d.ts

@@ -0,0 +1,8 @@
+import { SCContentType } from '@selfcommunity/types';
+interface CheckoutHeaderProps {
+    className?: string;
+    contentType: SCContentType;
+    content: any;
+}
+export default function CheckoutHeaderInfoWidget(inProps: CheckoutHeaderProps): JSX.Element;
+export {};

package/lib/esm/components/Checkout/CheckoutHeaderInfoWidget.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CardContent, Icon, styled, Typography } from '@mui/material';
+import { FormattedMessage } from 'react-intl';
+import Widget from '../Widget';
+import { SCContentType } from '@selfcommunity/types';
+import { Box, useThemeProps } from '@mui/system';
+import classNames from 'classnames';
+import Placeholder from '../../assets/checkout/general';
+const PREFIX = 'SCCheckoutHeaderInfoWidget';
+const classes = {
+    root: `${PREFIX}-root`,
+    header: `${PREFIX}-header`,
+    content: `${PREFIX}-content`
+};
+const Root = styled(Widget, {
+    slot: 'Root',
+    name: PREFIX
+})(() => ({}));
+export default function CheckoutHeaderInfoWidget(inProps) {
+    var _a, _b, _c, _d;
+    // PROPS
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX
+    });
+    const { className, contentType, content } = props;
+    // STATE
+    const isRecurring = (_d = (_c = (_b = (_a = content === null || content === void 0 ? void 0 : content.paywalls) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.payment_prices) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.recurring_interval;
+    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className), variant: "outlined" }, { children: [_jsxs(Box, Object.assign({ className: classes.header }, { children: [_jsx("img", { src: Placeholder, alt: "icon decoration" }), _jsx(Icon, Object.assign({ fontSize: "large" }, { children: contentType === SCContentType.EVENT ? 'ticket' : contentType === SCContentType.GROUP ? 'groups' : 'courses' }))] })), _jsxs(CardContent, Object.assign({ className: classes.content }, { children: [_jsx(Typography, Object.assign({ variant: "h5" }, { children: isRecurring ? (_jsx(FormattedMessage, { id: `ui.checkout.contentDesc.title.${contentType}.recurring`, defaultMessage: `ui.checkout.contentDesc.title.${contentType}.recurring` })) : (_jsx(FormattedMessage, { id: `ui.checkout.contentDesc.title.${contentType}`, defaultMessage: `ui.checkout.contentDesc.title.${contentType}` })) })), _jsx(Typography, Object.assign({ variant: "body2", color: "textSecondary" }, { children: _jsx(FormattedMessage, { id: `ui.checkout.contentDesc.subTitle.${contentType}`, defaultMessage: `ui.checkout.contentDesc.subTitle.${contentType}` }) }))] }))] })));
+}

package/lib/esm/components/Checkout/Skeleton.d.ts

@@ -0,0 +1,21 @@
+/**
+ * > API documentation for the Community-JS CheckoutSkeleton component. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {CheckoutSkeleton} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCCheckout-skeleton-root` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCCheckout-skeleton-root|Styles applied to the root element.|
+ *
+ */
+export default function CheckoutSkeleton(inProps: any): JSX.Element;