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

package/lib/cjs/components/ComposerIconButton/ComposerIconButton.js

@@ -13,6 +13,8 @@ const EventFormDialog_1 = tslib_1.__importDefault(require("../EventFormDialog"))
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const GroupForm_1 = tslib_1.__importDefault(require("../GroupForm"));
 const CreateLiveStreamDialog_1 = tslib_1.__importDefault(require("../CreateLiveStreamDialog"));
+const types_1 = require("@selfcommunity/types");
+const CourseFormDialog_1 = tslib_1.__importDefault(require("../CourseFormDialog"));
 const PREFIX = 'SCComposerIconButton';
 const classes = {
     root: `${PREFIX}-root`,
@@ -50,16 +52,17 @@ const MenuRoot = (0, material_1.styled)(material_1.Menu, {
  * @param inProps
  */
 exports.default = react_1.default.forwardRef(function ComposerIconButton(inProps, ref) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     // PROPS
     const props = (0, material_1.useThemeProps)({
         props: inProps,
         name: PREFIX
     });
-    const { className = null, ComposerProps = {}, onClick, onClose, PopperProps = {}, GroupFormProps = {}, EventFormDialogComponentProps = {}, CreateLiveStreamDialogComponentProps = {} } = props, rest = tslib_1.__rest(props, ["className", "ComposerProps", "onClick", "onClose", "PopperProps", "GroupFormProps", "EventFormDialogComponentProps", "CreateLiveStreamDialogComponentProps"]);
+    const { className = null, ComposerProps = {}, onClick, onClose, PopperProps = {}, CourseFormDialogComponentProps = {}, GroupFormProps = {}, EventFormDialogComponentProps = {}, CreateLiveStreamDialogComponentProps = {} } = props, rest = tslib_1.__rest(props, ["className", "ComposerProps", "onClick", "onClose", "PopperProps", "CourseFormDialogComponentProps", "GroupFormProps", "EventFormDialogComponentProps", "CreateLiveStreamDialogComponentProps"]);
     // STATE
     const [openComposer, setOpenComposer] = (0, react_1.useState)(false);
     const [openPopper, setOpenPopper] = (0, react_1.useState)(false);
+    const [openCreateCourse, setOpenCreateCourse] = (0, react_1.useState)(false);
     const [openCreateGroup, setOpenCreateGroup] = (0, react_1.useState)(false);
     const [openCreateEvent, setOpenCreateEvent] = (0, react_1.useState)(false);
     const [openCreateLiveStream, setOpenCreateLiveStream] = (0, react_1.useState)(false);
@@ -83,15 +86,36 @@ exports.default = react_1.default.forwardRef(function ComposerIconButton(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)();
     // MEMOS
-    const canCreateGroup = (0, react_1.useMemo)(() => { var _a, _b; return (_b = (_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission) === null || _b === void 0 ? void 0 : _b.create_group; }, [(_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission]);
-    const canCreateEvent = (0, react_1.useMemo)(() => { var _a, _b; return (_b = (_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission) === null || _b === void 0 ? void 0 : _b.create_event; }, [(_b = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _b === void 0 ? void 0 : _b.permission]);
-    const canCreateLiveStream = (0, react_1.useMemo)(() => { var _a, _b; return (_b = (_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission) === null || _b === void 0 ? void 0 : _b.create_live_stream; }, [(_c = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _c === void 0 ? void 0 : _c.permission]);
+    const canCreateCourse = (0, react_1.useMemo)(() => { var _a, _b; return (_b = (_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission) === null || _b === void 0 ? void 0 : _b.create_course; }, [(_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission]);
+    const canCreateGroup = (0, react_1.useMemo)(() => { var _a, _b; return (_b = (_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission) === null || _b === void 0 ? void 0 : _b.create_group; }, [(_b = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _b === void 0 ? void 0 : _b.permission]);
+    const canCreateEvent = (0, react_1.useMemo)(() => { var _a, _b; return (_b = (_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission) === null || _b === void 0 ? void 0 : _b.create_event; }, [(_c = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _c === void 0 ? void 0 : _c.permission]);
+    const canCreateLive = (0, react_1.useMemo)(() => { var _a, _b; return (_b = (_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission) === null || _b === void 0 ? void 0 : _b.create_live_stream; }, [(_d = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _d === void 0 ? void 0 : _d.permission]);
+    const isCommunityOwner = (0, react_1.useMemo)(() => { var _a; return ((_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.id) === 1; }, [scUserContext.user]);
+    const isFreeTrialTier = (0, react_1.useMemo)(() => preferences &&
+        react_core_1.SCPreferences.CONFIGURATIONS_SUBSCRIPTION_TIER in preferences &&
+        preferences[react_core_1.SCPreferences.CONFIGURATIONS_SUBSCRIPTION_TIER].value &&
+        preferences[react_core_1.SCPreferences.CONFIGURATIONS_SUBSCRIPTION_TIER].value === types_1.SCCommunitySubscriptionTier.FREE_TRIAL, [preferences]);
+    const canCreateLiveStream = (0, react_1.useMemo)(() => (isFreeTrialTier && isCommunityOwner && canCreateLive) || (!isFreeTrialTier && canCreateLive), [isFreeTrialTier, isCommunityOwner, canCreateLive]);
     const renderContent = (0, react_1.useMemo)(() => {
         return ((0, jsx_runtime_1.jsx)(material_1.MenuList, { children: listItem.map((item, i) => ((0, jsx_runtime_1.jsxs)(material_1.MenuItem, Object.assign({ onClick: item.onClick }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ fontSize: "small" }, { children: item.icon })) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h6" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: item.text, defaultMessage: item.text }) })) })] }), i))) }));
     }, [listItem]);
     // EFFECTS
     (0, react_1.useEffect)(() => {
+        if (canCreateCourse) {
+            setListItem((prev) => [
+                ...prev,
+                {
+                    icon: 'courses',
+                    text: 'ui.composerIconButton.list.course',
+                    onClick: () => {
+                        setOpenCreateCourse(true);
+                        setOpenPopper(false);
+                    }
+                }
+            ]);
+        }
         if (canCreateGroup) {
             setListItem((prev) => [
                 ...prev,
@@ -131,7 +155,7 @@ exports.default = react_1.default.forwardRef(function ComposerIconButton(inProps
                 }
             ]);
         }
-    }, [canCreateGroup, setListItem]);
+    }, [canCreateCourse, canCreateGroup, canCreateEvent, canCreateLiveStream, setListItem, setOpenPopper, setOpenCreateCourse, setOpenCreateGroup, setOpenCreateEvent, setOpenCreateLiveStream]);
     // HANDLERS
     const handleClick = (0, react_1.useCallback)((event) => {
         if (scUserContext.user) {
@@ -142,7 +166,7 @@ exports.default = react_1.default.forwardRef(function ComposerIconButton(inProps
                 });
             }
             else {
-                if (canCreateGroup || canCreateEvent || canCreateLiveStream) {
+                if (canCreateCourse || canCreateGroup || canCreateEvent || canCreateLiveStream) {
                     setOpenPopper(true);
                 }
                 else {
@@ -154,7 +178,17 @@ exports.default = react_1.default.forwardRef(function ComposerIconButton(inProps
             scContext.settings.handleAnonymousAction();
         }
         onClick === null || onClick === void 0 ? void 0 : onClick(event);
-    }, [onClick, scContext.settings, scUserContext.user]);
+    }, [
+        onClick,
+        scContext.settings,
+        scUserContext.user,
+        canCreateCourse,
+        canCreateGroup,
+        canCreateEvent,
+        canCreateLiveStream,
+        setOpenPopper,
+        setOpenComposer
+    ]);
     const handleCloseComposer = (0, react_1.useCallback)(() => {
         setOpenComposer(false);
         onClose === null || onClose === void 0 ? void 0 : onClose();
@@ -162,6 +196,9 @@ exports.default = react_1.default.forwardRef(function ComposerIconButton(inProps
     const handleCloseMenu = (0, react_1.useCallback)(() => {
         setOpenPopper(false);
     }, [setOpenPopper]);
+    const handleCloseCreateCourse = (0, react_1.useCallback)(() => {
+        setOpenCreateCourse(false);
+    }, [setOpenCreateCourse]);
     const handleCloseCreateGroup = (0, react_1.useCallback)(() => {
         setOpenCreateGroup(false);
     }, [setOpenCreateGroup]);
@@ -173,7 +210,8 @@ exports.default = react_1.default.forwardRef(function ComposerIconButton(inProps
     }, [setOpenCreateLiveStream]);
     const handleSuccess = (0, react_1.useCallback)((feedObject) => {
         setOpenComposer(false);
-        enqueueSnackbar((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composerIconButton.composer.success", defaultMessage: "ui.composerIconButton.composer.success" }), {
+        const messageId = feedObject.scheduled_at ? 'ui.composer.scheduled.success' : 'ui.composerIconButton.composer.success';
+        enqueueSnackbar((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: messageId, defaultMessage: messageId }), {
             action: () => ((0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes[`${feedObject.type.toUpperCase()}_ROUTE_NAME`], (0, contribution_1.getRouteData)(feedObject)) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composerIconButton.composer.viewContribute", defaultMessage: "ui.composerIconButton.composer.viewContribute" }) }))),
             variant: 'success',
             autoHideDuration: 7000
@@ -182,5 +220,5 @@ exports.default = react_1.default.forwardRef(function ComposerIconButton(inProps
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className), onClick: handleClick, ref: (innerRef) => {
                     popperRef.current = innerRef;
                     return ref;
-                } }, rest, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "add_circle_outline" }) })), openComposer && (0, jsx_runtime_1.jsx)(Composer_1.default, Object.assign({ open: true, fullWidth: true, onClose: handleCloseComposer, onSuccess: handleSuccess }, ComposerProps)), openPopper && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isMobile ? ((0, jsx_runtime_1.jsx)(material_1.SwipeableDrawer, Object.assign({ open: true, onClose: handleCloseMenu, onOpen: () => null, anchor: "bottom", disableSwipeToOpen: true }, { children: renderContent }))) : ((0, jsx_runtime_1.jsx)(MenuRoot, Object.assign({ open: true, anchorEl: popperRef.current, role: undefined, className: classes.menuRoot, onClose: handleCloseMenu }, PopperProps, { children: renderContent }))) })), openCreateGroup && (0, jsx_runtime_1.jsx)(GroupForm_1.default, Object.assign({ open: true, onClose: handleCloseCreateGroup }, GroupFormProps)), openCreateEvent && (0, jsx_runtime_1.jsx)(EventFormDialog_1.default, Object.assign({ open: true, onClose: handleCloseCreateEvent }, EventFormDialogComponentProps)), openCreateLiveStream && (0, jsx_runtime_1.jsx)(CreateLiveStreamDialog_1.default, Object.assign({ open: true, onClose: handleCloseCreateLiveStream }, CreateLiveStreamDialogComponentProps))] }));
+                } }, rest, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "add_circle_outline" }) })), openComposer && (0, jsx_runtime_1.jsx)(Composer_1.default, Object.assign({ open: true, fullWidth: true, onClose: handleCloseComposer, onSuccess: handleSuccess }, ComposerProps)), openPopper && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isMobile ? ((0, jsx_runtime_1.jsx)(material_1.SwipeableDrawer, Object.assign({ open: true, onClose: handleCloseMenu, onOpen: () => null, anchor: "bottom", disableSwipeToOpen: true }, { children: renderContent }))) : ((0, jsx_runtime_1.jsx)(MenuRoot, Object.assign({ open: true, anchorEl: popperRef.current, role: undefined, className: classes.menuRoot, onClose: handleCloseMenu }, PopperProps, { children: renderContent }))) })), openCreateCourse && (0, jsx_runtime_1.jsx)(CourseFormDialog_1.default, Object.assign({ open: true, onClose: handleCloseCreateCourse }, CourseFormDialogComponentProps)), openCreateGroup && (0, jsx_runtime_1.jsx)(GroupForm_1.default, Object.assign({ open: true, onClose: handleCloseCreateGroup }, GroupFormProps)), openCreateEvent && (0, jsx_runtime_1.jsx)(EventFormDialog_1.default, Object.assign({ open: true, onClose: handleCloseCreateEvent }, EventFormDialogComponentProps)), openCreateLiveStream && (0, jsx_runtime_1.jsx)(CreateLiveStreamDialog_1.default, Object.assign({ open: true, onClose: handleCloseCreateLiveStream }, CreateLiveStreamDialogComponentProps))] }));
 });

package/lib/cjs/components/ConnectionUserButton/ConnectionUserButton.js

@@ -3,17 +3,17 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = tslib_1.__importStar(require("react"));
-const styles_1 = require("@mui/material/styles");
 const react_core_1 = require("@selfcommunity/react-core");
 const material_1 = require("@mui/material");
 const FollowUserButton_1 = tslib_1.__importDefault(require("../FollowUserButton"));
 const FriendshipUserButton_1 = tslib_1.__importDefault(require("../FriendshipUserButton"));
 const system_1 = require("@mui/system");
+const HiddenPlaceholder_1 = tslib_1.__importDefault(require("../../shared/HiddenPlaceholder"));
 const PREFIX = 'SCConnectionUserButton';
 const classes = {
     root: `${PREFIX}-root`
 };
-const Root = (0, styles_1.styled)(material_1.Box, {
+const Root = (0, material_1.styled)(material_1.Box, {
     name: PREFIX,
     slot: 'Root',
     overridesResolver: (props, styles) => styles.root
@@ -49,6 +49,11 @@ function ConnectionUserButton(inProps) {
     const scPreferencesContext = (0, react_1.useContext)(react_core_1.SCPreferencesContext);
     const followEnabled = react_core_1.SCPreferences.CONFIGURATIONS_FOLLOW_ENABLED in scPreferencesContext.preferences &&
         scPreferencesContext.preferences[react_core_1.SCPreferences.CONFIGURATIONS_FOLLOW_ENABLED].value;
+    const connectionEnabled = react_core_1.SCPreferences.CONFIGURATIONS_CONNECTION_ENABLED in scPreferencesContext.preferences &&
+        scPreferencesContext.preferences[react_core_1.SCPreferences.CONFIGURATIONS_CONNECTION_ENABLED].value;
+    if (!followEnabled && !connectionEnabled) {
+        return (0, jsx_runtime_1.jsx)(HiddenPlaceholder_1.default, {});
+    }
     return ((0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: followEnabled ? ((0, jsx_runtime_1.jsx)(FollowUserButton_1.default, Object.assign({ user: user }, followConnectUserButtonProps, rest))) : ((0, jsx_runtime_1.jsx)(FriendshipUserButton_1.default, Object.assign({ user: user }, followConnectUserButtonProps, rest))) }));
 }
 exports.default = ConnectionUserButton;

package/lib/cjs/components/ConsentSolution/ConsentSolution.js

@@ -5,20 +5,13 @@ const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = tslib_1.__importStar(require("react"));
 const system_1 = require("@mui/system");
-const styles_1 = require("@mui/material/styles");
 const material_1 = require("@mui/material");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
-const Icon_1 = tslib_1.__importDefault(require("@mui/material/Icon"));
 const api_services_1 = require("@selfcommunity/api-services");
 const utils_1 = require("@selfcommunity/utils");
 const react_core_1 = require("@selfcommunity/react-core");
 const ConsentSolutionSwitch_1 = tslib_1.__importDefault(require("../../shared/ConsentSolutionSwitch"));
 const Errors_1 = require("../../constants/Errors");
-const Dialog_1 = tslib_1.__importDefault(require("@mui/material/Dialog"));
-const DialogActions_1 = tslib_1.__importDefault(require("@mui/material/DialogActions"));
-const DialogContent_1 = tslib_1.__importDefault(require("@mui/material/DialogContent"));
-const DialogTitle_1 = tslib_1.__importDefault(require("@mui/material/DialogTitle"));
-const Slide_1 = tslib_1.__importDefault(require("@mui/material/Slide"));
 const LegalPolicies_1 = require("./../../constants/LegalPolicies");
 const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
 const legalPages_1 = require("../../utils/legalPages");
@@ -45,7 +38,7 @@ const classes = {
     alertAcceptDocument: `${constants_1.PREFIX}-alert-accept-document`,
     acceptConditions: `${constants_1.PREFIX}-accept-conditions`
 };
-const Root = (0, styles_1.styled)(Dialog_1.default, {
+const Root = (0, material_1.styled)(material_1.Dialog, {
     name: constants_1.PREFIX,
     slot: 'Root'
 })(() => ({}));
@@ -66,7 +59,7 @@ const messages = (0, react_intl_1.defineMessages)({
  * Dialog default transition
  */
 const DialogTransition = (0, react_1.forwardRef)(function Transition(props, ref) {
-    return (0, jsx_runtime_1.jsx)(Slide_1.default, Object.assign({ direction: "up", ref: ref }, props));
+    return (0, jsx_runtime_1.jsx)(material_1.Slide, Object.assign({ direction: "up", ref: ref }, props));
 });
 /**
  * Dialog views
@@ -253,9 +246,9 @@ function ConsentSolution(inProps) {
             return null;
         }
         const isAccept = Boolean(doc.ack && doc.ack.accepted_at);
-        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(DialogTitle_1.default, Object.assign({ className: classes.title }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.acceptDocumentTitle", defaultMessage: "ui.consentSolution.acceptDocumentTitle", values: { label: doc.title } }) })), (0, jsx_runtime_1.jsx)(DialogContent_1.default, Object.assign({ className: classes.content, dividers: true, ref: contentDialog }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, { component: "div", gutterBottom: true, dangerouslySetInnerHTML: {
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.DialogTitle, Object.assign({ className: classes.title }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.acceptDocumentTitle", defaultMessage: "ui.consentSolution.acceptDocumentTitle", values: { label: doc.title } }) })), (0, jsx_runtime_1.jsx)(material_1.DialogContent, Object.assign({ className: classes.content, dividers: true, ref: contentDialog }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, { component: "div", gutterBottom: true, dangerouslySetInnerHTML: {
                             __html: (0, legalPages_1.getDocumentBody)(doc)
-                        } }) })), (0, jsx_runtime_1.jsxs)(DialogContent_1.default, Object.assign({ className: classes.consent, dividers: true }, { children: [(0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { className: classes.consentSwitch, control: (0, jsx_runtime_1.jsx)(ConsentSolutionSwitch_1.default, { loading: loadingAck, disabled: loadingAck, checked: isAccept, onChange: () => handleChangeConsent(!isAccept), name: "consent" }), label: (0, jsx_runtime_1.jsx)("b", { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.consentSwitchLabel", defaultMessage: "ui.consentSolution.consentSwitchLabel" }) }) }), rejected ? ((0, jsx_runtime_1.jsxs)(material_1.Alert, Object.assign({ severity: "error", className: classes.alertAcceptDocument }, { children: [(0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.deleteAccountAlert", defaultMessage: "ui.consentSolution.deleteAccountAlert" }), (0, jsx_runtime_1.jsx)("a", Object.assign({ onClick: () => setView(exports.REJECTION_VIEW), className: classes.deleteAccountButton }, { children: (0, jsx_runtime_1.jsx)("b", { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.deleteAccount", defaultMessage: "ui.consentSolution.deleteAccount" }) }) }))] }))) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", className: classes.acceptConditions }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.consentSwitchDetail", defaultMessage: "ui.consentSolution.consentSwitchDetail" }) })) }))] })), (0, jsx_runtime_1.jsxs)(DialogActions_1.default, Object.assign({ className: classes.actions }, { children: [currentDocument > 0 && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", onClick: () => setCurrentDocument((prev) => prev - 1), className: classes.backButton }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.backButton", defaultMessage: "ui.consentSolution.backButton" }) }))), currentDocument < documents.length - 1 ? ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: 'outlined', disabled: !isAccept, onClick: handleNext, className: classes.nextButton }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.nextButton", defaultMessage: "ui.consentSolution.nextButton" }) }))) : ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: 'outlined', disabled: !isAccept, onClick: (e) => handleClose(e, null), className: classes.closeButton }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.closeButton", defaultMessage: "ui.consentSolution.closeButton" }) })))] }))] }));
+                        } }) })), (0, jsx_runtime_1.jsxs)(material_1.DialogContent, Object.assign({ className: classes.consent, dividers: true }, { children: [(0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { className: classes.consentSwitch, control: (0, jsx_runtime_1.jsx)(ConsentSolutionSwitch_1.default, { loading: loadingAck, disabled: loadingAck, checked: isAccept, onChange: () => handleChangeConsent(!isAccept), name: "consent" }), label: (0, jsx_runtime_1.jsx)("b", { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.consentSwitchLabel", defaultMessage: "ui.consentSolution.consentSwitchLabel" }) }) }), rejected ? ((0, jsx_runtime_1.jsxs)(material_1.Alert, Object.assign({ severity: "error", className: classes.alertAcceptDocument }, { children: [(0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.deleteAccountAlert", defaultMessage: "ui.consentSolution.deleteAccountAlert" }), (0, jsx_runtime_1.jsx)("a", Object.assign({ onClick: () => setView(exports.REJECTION_VIEW), className: classes.deleteAccountButton }, { children: (0, jsx_runtime_1.jsx)("b", { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.deleteAccount", defaultMessage: "ui.consentSolution.deleteAccount" }) }) }))] }))) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", className: classes.acceptConditions }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.consentSwitchDetail", defaultMessage: "ui.consentSolution.consentSwitchDetail" }) })) }))] })), (0, jsx_runtime_1.jsxs)(material_1.DialogActions, Object.assign({ className: classes.actions }, { children: [currentDocument > 0 && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", onClick: () => setCurrentDocument((prev) => prev - 1), className: classes.backButton }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.backButton", defaultMessage: "ui.consentSolution.backButton" }) }))), currentDocument < documents.length - 1 ? ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: 'outlined', disabled: !isAccept, onClick: handleNext, className: classes.nextButton }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.nextButton", defaultMessage: "ui.consentSolution.nextButton" }) }))) : ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: 'outlined', disabled: !isAccept, onClick: (e) => handleClose(e, null), className: classes.closeButton }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.closeButton", defaultMessage: "ui.consentSolution.closeButton" }) })))] }))] }));
     };
     /**
      * Render document detail view
@@ -265,13 +258,13 @@ function ConsentSolution(inProps) {
         if (!doc) {
             return null;
         }
-        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(DialogTitle_1.default, Object.assign({ className: (0, classnames_1.default)(classes.title, classes.titleBack) }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: 'outlined', onClick: () => setView(exports.ACCEPT_VIEW), className: classes.backButton, startIcon: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "arrow_back" }) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.backButton", defaultMessage: "ui.consentSolution.backButton" }) })) })), (0, jsx_runtime_1.jsxs)(DialogContent_1.default, Object.assign({ className: classes.content, dividers: true }, { children: [(0, jsx_runtime_1.jsx)(AccountDataPortability_1.default, { className: classes.dataPortability }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h6" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.deleteAccountDpSectionTitle", defaultMessage: "ui.consentSolution.deleteAccountDpSectionTitle", values: { username: (0, utils_1.capitalize)(scUserContext.user.username) } }) })), (0, jsx_runtime_1.jsx)("ul", { children: intl.formatMessage(messages.deleteAccountDpSectionInfo, { communityName, li: (chunks) => (0, jsx_runtime_1.jsx)("li", { children: chunks }) }) }), (0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { control: (0, jsx_runtime_1.jsx)(material_1.Checkbox, { className: classes.dataPortabilityCheck, checked: dataPortabilityChecked, onChange: () => setDataPortabilityChecked((p) => !p) }), label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.deleteAccountDpSectionCheckboxLabel", defaultMessage: "ui.consentSolution.deleteAccountDpSectionCheckboxLabel" }) }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", startIcon: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "delete_outlined" }), disabled: !dataPortabilityChecked, variant: 'contained', className: classes.confirmDeleteAccountButton, onClick: () => setView(exports.CONFIRM_DELETE_ACCOUNT) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.confirmDeleteAccountButton", defaultMessage: "ui.consentSolution.confirmDeleteAccountButton" }) })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: 'outlined', className: classes.logoutAccountButton, startIcon: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "upload" }), onClick: handleLogout }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.logoutImmediatelyButton", defaultMessage: "ui.consentSolution.logoutImmediatelyButton" }) }))] }))] }));
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.DialogTitle, Object.assign({ className: (0, classnames_1.default)(classes.title, classes.titleBack) }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: 'outlined', onClick: () => setView(exports.ACCEPT_VIEW), className: classes.backButton, startIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "arrow_back" }) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.backButton", defaultMessage: "ui.consentSolution.backButton" }) })) })), (0, jsx_runtime_1.jsxs)(material_1.DialogContent, Object.assign({ className: classes.content, dividers: true }, { children: [(0, jsx_runtime_1.jsx)(AccountDataPortability_1.default, { className: classes.dataPortability }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h6" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.deleteAccountDpSectionTitle", defaultMessage: "ui.consentSolution.deleteAccountDpSectionTitle", values: { username: (0, utils_1.capitalize)(scUserContext.user.username) } }) })), (0, jsx_runtime_1.jsx)("ul", { children: intl.formatMessage(messages.deleteAccountDpSectionInfo, { communityName, li: (chunks) => (0, jsx_runtime_1.jsx)("li", { children: chunks }) }) }), (0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { control: (0, jsx_runtime_1.jsx)(material_1.Checkbox, { className: classes.dataPortabilityCheck, checked: dataPortabilityChecked, onChange: () => setDataPortabilityChecked((p) => !p) }), label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.deleteAccountDpSectionCheckboxLabel", defaultMessage: "ui.consentSolution.deleteAccountDpSectionCheckboxLabel" }) }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", startIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "delete_outlined" }), disabled: !dataPortabilityChecked, variant: 'contained', className: classes.confirmDeleteAccountButton, onClick: () => setView(exports.CONFIRM_DELETE_ACCOUNT) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.confirmDeleteAccountButton", defaultMessage: "ui.consentSolution.confirmDeleteAccountButton" }) })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: 'outlined', className: classes.logoutAccountButton, startIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "upload" }), onClick: handleLogout }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.logoutImmediatelyButton", defaultMessage: "ui.consentSolution.logoutImmediatelyButton" }) }))] }))] }));
     };
     /**
      * Render delete account view
      */
     const renderDeleteAccountView = () => {
-        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(DialogTitle_1.default, Object.assign({ className: (0, classnames_1.default)(classes.title, classes.titleBack) }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", disabled: loadingDeleteAccount, variant: 'outlined', onClick: () => setView(exports.REJECTION_VIEW), className: classes.backButton, startIcon: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "arrow_back" }) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.backButton", defaultMessage: "ui.consentSolution.backButton" }) })) })), (0, jsx_runtime_1.jsxs)(DialogContent_1.default, Object.assign({ className: classes.content, dividers: true }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.removeAccountTitle", defaultMessage: "ui.consentSolution.removeAccountTitle" }) })), (0, jsx_runtime_1.jsx)("ul", { children: intl.formatMessage(messages.deleteAccountDpSectionInfo, { communityName, li: (chunks) => (0, jsx_runtime_1.jsx)("li", { children: chunks }) }) }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: (0, jsx_runtime_1.jsx)("b", { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.removeAccountConfirm", defaultMessage: "ui.consentSolution.removeAccountConfirm" }) }) }))] })), (0, jsx_runtime_1.jsxs)(DialogActions_1.default, Object.assign({ className: classes.actions }, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", disabled: loadingDeleteAccount, variant: 'outlined', onClick: () => setView(exports.REJECTION_VIEW) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.removeAccountCancelButton", defaultMessage: "ui.consentSolution.removeAccountCancelButton" }) })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", disabled: loadingDeleteAccount, variant: 'outlined', onClick: handleConfirmDeleteAccount }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.removeAccountConfirmButton", defaultMessage: "ui.consentSolution.removeAccountConfirmButton" }) }))] }))] }));
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.DialogTitle, Object.assign({ className: (0, classnames_1.default)(classes.title, classes.titleBack) }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", disabled: loadingDeleteAccount, variant: 'outlined', onClick: () => setView(exports.REJECTION_VIEW), className: classes.backButton, startIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "arrow_back" }) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.backButton", defaultMessage: "ui.consentSolution.backButton" }) })) })), (0, jsx_runtime_1.jsxs)(material_1.DialogContent, Object.assign({ className: classes.content, dividers: true }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.removeAccountTitle", defaultMessage: "ui.consentSolution.removeAccountTitle" }) })), (0, jsx_runtime_1.jsx)("ul", { children: intl.formatMessage(messages.deleteAccountDpSectionInfo, { communityName, li: (chunks) => (0, jsx_runtime_1.jsx)("li", { children: chunks }) }) }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: (0, jsx_runtime_1.jsx)("b", { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.removeAccountConfirm", defaultMessage: "ui.consentSolution.removeAccountConfirm" }) }) }))] })), (0, jsx_runtime_1.jsxs)(material_1.DialogActions, Object.assign({ className: classes.actions }, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", disabled: loadingDeleteAccount, variant: 'outlined', onClick: () => setView(exports.REJECTION_VIEW) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.removeAccountCancelButton", defaultMessage: "ui.consentSolution.removeAccountCancelButton" }) })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", disabled: loadingDeleteAccount, variant: 'outlined', onClick: handleConfirmDeleteAccount }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.consentSolution.removeAccountConfirmButton", defaultMessage: "ui.consentSolution.removeAccountConfirmButton" }) }))] }))] }));
     };
     /**
      * If there's no authUserId, component is hidden.

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

@@ -1,9 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const styles_1 = require("@mui/material/styles");
-const Skeleton_1 = tslib_1.__importDefault(require("@mui/material/Skeleton"));
 const material_1 = require("@mui/material");
 const constants_1 = require("./constants");
 const classes = {
@@ -15,7 +12,7 @@ const classes = {
     consentSwitchLabel: `${constants_1.PREFIX}-consent-switch-label`,
     actions: `${constants_1.PREFIX}-actions`
 };
-const Root = (0, styles_1.styled)(material_1.Box, {
+const Root = (0, material_1.styled)(material_1.Box, {
     name: constants_1.PREFIX,
     slot: 'SkeletonRoot'
 })(() => ({}));
@@ -45,7 +42,7 @@ const Root = (0, styles_1.styled)(material_1.Box, {
  *
  */
 function ConsentSolutionSkeleton() {
-    const ContentSection = () => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", height: 20, width: "100%" }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", height: 20, width: "80%" }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", height: 20, width: "60%" }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", height: 20, width: "30%" }), (0, jsx_runtime_1.jsx)("br", {})] }));
-    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: classes.root }, { children: [(0, jsx_runtime_1.jsx)(material_1.DialogTitle, Object.assign({ className: classes.title }, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", height: 25, width: "70%" }) })), (0, jsx_runtime_1.jsx)(material_1.DialogContent, Object.assign({ className: classes.content, dividers: true }, { children: [...Array(2)].map((_, i) => ((0, jsx_runtime_1.jsx)(ContentSection, {}, i))) })), (0, jsx_runtime_1.jsxs)(material_1.DialogContent, Object.assign({ className: classes.consent, dividers: true }, { children: [(0, jsx_runtime_1.jsx)(Skeleton_1.default, { height: 64, className: classes.consentSwitch }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", height: 20, width: "50%", variant: 'text', className: classes.consentSwitchLabel })] })), (0, jsx_runtime_1.jsx)(material_1.DialogActions, Object.assign({ className: classes.actions }, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", height: 40, width: "20%" }) }))] })));
+    const ContentSection = () => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 20, width: "100%" }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 20, width: "80%" }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 20, width: "60%" }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 20, width: "30%" }), (0, jsx_runtime_1.jsx)("br", {})] }));
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: classes.root }, { children: [(0, jsx_runtime_1.jsx)(material_1.DialogTitle, Object.assign({ className: classes.title }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 25, width: "70%" }) })), (0, jsx_runtime_1.jsx)(material_1.DialogContent, Object.assign({ className: classes.content, dividers: true }, { children: [...Array(2)].map((_, i) => ((0, jsx_runtime_1.jsx)(ContentSection, {}, i))) })), (0, jsx_runtime_1.jsxs)(material_1.DialogContent, Object.assign({ className: classes.consent, dividers: true }, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { height: 64, className: classes.consentSwitch }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 20, width: "50%", variant: 'text', className: classes.consentSwitchLabel })] })), (0, jsx_runtime_1.jsx)(material_1.DialogActions, Object.assign({ className: classes.actions }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 40, width: "20%" }) }))] })));
 }
 exports.default = ConsentSolutionSkeleton;

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

@@ -1,5 +1,5 @@
 import { ConsentSolutionProps } from '../ConsentSolution';
-import { ButtonProps } from '@mui/material/Button/Button';
+import { ButtonProps } from '@mui/material';
 export interface ConsentSolutionButtonProps extends ButtonProps {
     /**
      * Overrides or extends the styles applied to the component.

package/lib/cjs/components/ConsentSolutionButton/ConsentSolutionButton.js

@@ -4,8 +4,6 @@ const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = tslib_1.__importStar(require("react"));
 const system_1 = require("@mui/system");
-const styles_1 = require("@mui/material/styles");
-const Dialog_1 = tslib_1.__importDefault(require("@mui/material/Dialog"));
 const ConsentSolution_1 = tslib_1.__importDefault(require("../ConsentSolution"));
 const material_1 = require("@mui/material");
 const react_intl_1 = require("react-intl");
@@ -14,7 +12,7 @@ const PREFIX = 'SCConsentSolutionButton';
 const classes = {
     root: `${PREFIX}-root`
 };
-const Root = (0, styles_1.styled)(Dialog_1.default, {
+const Root = (0, material_1.styled)(material_1.Dialog, {
     name: PREFIX,
     slot: 'Root',
     overridesResolver: (props, styles) => styles.root

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

@@ -0,0 +1,97 @@
+import { SCCourseType } from '@selfcommunity/types';
+import React from 'react';
+import { SCCourseTemplateType } from '../../types/course';
+import { CourseParticipantsButtonProps } from '../CourseParticipantsButton';
+import { WidgetProps } from '../Widget';
+import { CourseSkeletonProps } from './Skeleton';
+import { CacheStrategies } from '@selfcommunity/utils';
+export interface CourseProps extends WidgetProps {
+    /**
+     * Course Object
+     * @default null
+     */
+    course?: SCCourseType;
+    /**
+     * Id of the course for filter the feed
+     * @default null
+     */
+    courseId?: number;
+    /**
+     * Course template type
+     * @default 'preview'
+     */
+    template?: SCCourseTemplateType;
+    /**
+     * It shows a different snippet type
+     */
+    userProfileSnippet?: boolean;
+    /**
+     * Actions
+     * @default null
+     */
+    actions?: React.ReactNode;
+    /**
+     * Props to spread to CourseParticipantsButton component
+     * @default {}
+     */
+    CourseParticipantsButtonComponentProps?: CourseParticipantsButtonProps;
+    /**
+     * Props to spread to CourseSkeleton component
+     * @default {}
+     */
+    CourseSkeletonComponentProps?: CourseSkeletonProps;
+    /**
+     * Override default cache strategy on fetch element
+     */
+    cacheStrategy?: CacheStrategies;
+    /**
+     * Any other properties
+     */
+    [p: string]: any;
+}
+/**
+ * > API documentation for the Community-JS Course component. Learn about the available props and the CSS API.
+ *
+ *
+ * This component renders a course item.
+ * Take a look at our <strong>demo</strong> component [here](/docs/sdk/community-js/react-ui/Components/Course)
+
+ #### Import
+
+ ```jsx
+ import {course} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCCourse` can be used when providing style overrides in the theme.
+
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCCourses-root|Styles applied to the root element.|
+ |chip|.SCCourses-chip|Styles applied to the chip element.|
+ |previewRoot|.SCCourses-preview-root|Styles applied to the root element in the preview template.|
+ |previewActions|.SCCourses-preview-actions|Styles applied to the actions section in the preview template.|
+ |previewAvatar|.SCCourses-preview-avatar|Styles applied to the avatar in the preview template.|
+ |previewCategory|.SCCourses-preview-category|Styles applied to the category element in the preview template.|
+ |previewCompletedStatus|.SCCourses-preview-completed-status|Styles applied to indicate the completed status in the preview template.|
+ |previewContent|.SCCourses-preview-content|Styles applied to the content section in the preview template.|
+ |previewCreator|.SCCourses-preview-creator|Styles applied to the creator element in the preview template.|
+ |previewImage|.SCCourses-preview-image|Styles applied to the image in the preview template.|
+ |previewImageWrapper|.SCCourses-preview-image-wrapper|Styles applied to the wrapper of the image in the preview template.|
+ |previewInfo|.SCCourses-preview-info|Styles applied to the info section in the preview template.|
+ |previewName|.SCCourses-preview-name|Styles applied to the name element in the preview template.|
+ |previewNameWrapper|.SCCourses-preview-name-wrapper|Styles applied to the name wrapper in the preview template.|
+ |previewProgress|.SCCourses-preview-progress|Styles applied to indicate the progress section in the preview template.|
+ |previewProgressBar|.SCCourses-preview-progress-bar|Styles applied to the progress bar in the preview template.|
+ |snippetRoot|.SCCourses-snippet-root|Styles applied to the root element in the snippet template.|
+ |snippetAvatar|.SCCourses-snippet-avatar|Styles applied to the avatar element in the snippet template.|
+ |snippetImage|.SCCourses-snippet-image|Styles applied to the image element in the snippet template.|
+ 
+ *
+ * @param inProps
+ */
+export default function Course(inProps: CourseProps): JSX.Element;