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

package/lib/cjs/components/AcceptRequestUserGroupButton/AcceptRequestUserGroupButton.js

@@ -0,0 +1,106 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const lab_1 = require("@mui/lab");
+const material_1 = require("@mui/material");
+const system_1 = require("@mui/system");
+const api_services_1 = require("@selfcommunity/api-services");
+const react_core_1 = require("@selfcommunity/react-core");
+const utils_1 = require("@selfcommunity/utils");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const react_1 = require("react");
+const react_intl_1 = require("react-intl");
+const Errors_1 = require("../../constants/Errors");
+const ConfirmDialog_1 = tslib_1.__importDefault(require("../../shared/ConfirmDialog/ConfirmDialog"));
+const notistack_1 = require("notistack");
+const PubSub_1 = require("../../constants/PubSub");
+const pubsub_js_1 = tslib_1.__importDefault(require("pubsub-js"));
+const PREFIX = 'SCAcceptRequestUserEventButton';
+const classes = {
+    root: `${PREFIX}-root`
+};
+const AcceptButton = (0, material_1.styled)(lab_1.LoadingButton, {
+    name: PREFIX,
+    slot: 'Root',
+    overridesResolver: (_props, styles) => styles.root
+})(() => ({}));
+/**
+ * > API documentation for the Community-JS Accept Request User Group Button component. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {AcceptRequestUserGroupButton} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCAcceptRequestUserEventButton` can be used when providing style overrides in the theme.
+
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCAcceptRequestUserGroupButton-root|Styles applied to the root element.|
+
+ * @param inProps
+ */
+function AcceptRequestUserGroupButton(inProps) {
+    // PROPS
+    const props = (0, system_1.useThemeProps)({
+        props: inProps,
+        name: PREFIX
+    });
+    const { className, groupId, group, userId, user, handleConfirm = null } = props, rest = tslib_1.__rest(props, ["className", "groupId", "group", "userId", "user", "handleConfirm"]);
+    // STATE
+    const [loading, setLoading] = (0, react_1.useState)(false);
+    const [openDialog, setOpenDialog] = (0, react_1.useState)(false);
+    // HOOKS
+    const { scGroup } = (0, react_core_1.useSCFetchGroup)({ id: groupId, group });
+    const { scUser } = (0, react_core_1.useSCFetchUser)({ id: userId, user });
+    const { enqueueSnackbar } = (0, notistack_1.useSnackbar)();
+    /**
+     * Notify UI when a member is added to a group
+     * @param group
+     * @param user
+     */
+    function notifyChanges(group, user) {
+        if (group && user) {
+            pubsub_js_1.default.publish(`${PubSub_1.SCTopicType.GROUP}.${PubSub_1.SCGroupEventType.ADD_MEMBER}`, { group, user });
+        }
+    }
+    const handleConfirmAction = (0, react_1.useCallback)(() => {
+        setLoading(true);
+        api_services_1.GroupService.inviteOrAcceptGroupRequest(scGroup.id, { users: [scUser.id] })
+            .then(() => {
+            if (handleConfirm) {
+                handleConfirm(scUser.id);
+            }
+            else {
+                enqueueSnackbar((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.acceptRequestUserGroupButton.snackbar.success", defaultMessage: "ui.acceptRequestUserGroupButton.snackbar.success" }), {
+                    variant: 'error',
+                    autoHideDuration: 3000
+                });
+            }
+            notifyChanges(scGroup, scUser);
+            setLoading(false);
+            setOpenDialog(false);
+        })
+            .catch((error) => {
+            if (handleConfirm) {
+                handleConfirm(null);
+            }
+            else {
+                enqueueSnackbar((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.common.error.action", defaultMessage: "ui.common.error.action" }), {
+                    variant: 'error',
+                    autoHideDuration: 3000
+                });
+            }
+            utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
+        });
+    }, [scGroup, scUser]);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(AcceptButton, Object.assign({ size: "small", variant: "outlined", onClick: () => setOpenDialog(true), loading: loading, className: (0, classnames_1.default)(classes.root, className) }, rest, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.acceptRequestUserGroupButton.accept", id: "ui.acceptRequestUserGroupButton.accept" }) })), openDialog && ((0, jsx_runtime_1.jsx)(ConfirmDialog_1.default, { open: openDialog, title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.acceptRequestUserGroupButton.dialog.title", defaultMessage: "ui.acceptRequestUserGroupButton.dialog.title" }), content: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.acceptRequestUserGroupButton.dialog.msg", defaultMessage: "ui.acceptRequestUserGroupButton.dialog.msg" }), btnConfirm: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.acceptRequestUserGroupButton.dialog.confirm", defaultMessage: "ui.acceptRequestUserGroupButton.dialog.confirm" }), isUpdating: loading, onConfirm: handleConfirmAction, onClose: () => setOpenDialog(false) }))] }));
+}
+exports.default = AcceptRequestUserGroupButton;

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

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

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

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

package/lib/cjs/components/AccountChangeMailValidation/AccountChangeMailValidation.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const styles_1 = require("@mui/material/styles");
 const react_core_1 = require("@selfcommunity/react-core");
 const material_1 = require("@mui/material");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
@@ -16,7 +15,7 @@ const classes = {
     success: `${PREFIX}-success`,
     error: `${PREFIX}-error`
 };
-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

package/lib/cjs/components/AccountDataPortability/AccountDataPortability.js

@@ -4,10 +4,8 @@ const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = 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 lab_1 = require("@mui/lab");
 const api_services_1 = require("@selfcommunity/api-services");
 const utils_1 = require("@selfcommunity/utils");
@@ -22,7 +20,7 @@ const classes = {
     downloadButton: `${PREFIX}-download-button`,
     generationInfo: `${PREFIX}-generation-info`
 };
-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
@@ -163,7 +161,7 @@ function AccountDataPortability(inProps) {
                     } }) })), (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ size: "small", loading: (dataPortability && dataPortability.computing) || loading, disabled: !dataPortability ||
                     (dataPortability &&
                         (dataPortability.computing ||
-                            (dataPortability.requested_at && (0, date_fns_1.differenceInHours)(new Date(), (0, date_fns_1.parseISO)(dataPortability.requested_at.toString())) < 24))), loadingPosition: "start", startIcon: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "folder_open" }), variant: "outlined", className: classes.createButton, onClick: handleCreateDataPortabilityFile }, { children: (dataPortability && dataPortability.computing) || loading ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.accountDataPortability.createLoadingButton", defaultMessage: "ui.accountDataPortability.createLoadingButton" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.accountDataPortability.createButton", defaultMessage: "ui.accountDataPortability.createButton" })) })), dataPortability && !dataPortability.computing && dataPortability.generated_at && ((0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ size: "small", loading: downloadingDataPortability, loadingPosition: "start", startIcon: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "cloud_download_outlined" }), variant: 'outlined', className: classes.downloadButton, onClick: handleDownloadDataPortabilityFile }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.accountDataPortability.downloadButton", defaultMessage: "ui.accountDataPortability.downloadButton" }) }))), (0, jsx_runtime_1.jsx)("br", {}), dataPortability && !dataPortability.computing && dataPortability.generated_at && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.generationInfo, variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.accountDataPortability.generatedInfo", defaultMessage: "ui.accountDataPortability.generatedInfo", values: {
+                            (dataPortability.requested_at && (0, date_fns_1.differenceInHours)(new Date(), (0, date_fns_1.parseISO)(dataPortability.requested_at.toString())) < 24))), loadingPosition: "start", startIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "folder_open" }), variant: "outlined", className: classes.createButton, onClick: handleCreateDataPortabilityFile }, { children: (dataPortability && dataPortability.computing) || loading ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.accountDataPortability.createLoadingButton", defaultMessage: "ui.accountDataPortability.createLoadingButton" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.accountDataPortability.createButton", defaultMessage: "ui.accountDataPortability.createButton" })) })), dataPortability && !dataPortability.computing && dataPortability.generated_at && ((0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ size: "small", loading: downloadingDataPortability, loadingPosition: "start", startIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "cloud_download_outlined" }), variant: 'outlined', className: classes.downloadButton, onClick: handleDownloadDataPortabilityFile }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.accountDataPortability.downloadButton", defaultMessage: "ui.accountDataPortability.downloadButton" }) }))), (0, jsx_runtime_1.jsx)("br", {}), dataPortability && !dataPortability.computing && dataPortability.generated_at && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.generationInfo, variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.accountDataPortability.generatedInfo", defaultMessage: "ui.accountDataPortability.generatedInfo", values: {
                         date: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedDate, { value: dataPortability.requested_at, day: "numeric", month: "long", year: "numeric" }),
                         time: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedTime, { value: dataPortability.requested_at })
                     } }) })))] })));

package/lib/cjs/components/AccountDataPortabilityButton/AccountDataPortabilityButton.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const styles_1 = require("@mui/material/styles");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const system_1 = require("@mui/system");
 const material_1 = require("@mui/material");
@@ -16,12 +15,12 @@ const classes = {
     root: `${PREFIX}-root`,
     dialogRoot: `${PREFIX}-dialog-root`
 };
-const Root = (0, styles_1.styled)(material_1.Button, {
+const Root = (0, material_1.styled)(material_1.Button, {
     name: PREFIX,
     slot: 'Root',
     overridesResolver: (props, styles) => [styles.root, styles.voted]
 })(({ theme }) => ({}));
-const DialogRoot = (0, styles_1.styled)(BaseDialog_1.default, {
+const DialogRoot = (0, material_1.styled)(BaseDialog_1.default, {
     name: PREFIX,
     slot: 'Root',
     overridesResolver: (props, styles) => styles.dialogRoot

package/lib/cjs/components/AccountDelete/AccountDelete.js

@@ -4,7 +4,6 @@ const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = 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 api_services_1 = require("@selfcommunity/api-services");
@@ -20,7 +19,7 @@ const classes = {
     confirm: `${PREFIX}-confirm`,
     button: `${PREFIX}-button`
 };
-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

package/lib/cjs/components/AccountDeleteButton/AccountDeleteButton.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const styles_1 = require("@mui/material/styles");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const system_1 = require("@mui/system");
 const material_1 = require("@mui/material");
@@ -16,12 +15,12 @@ const classes = {
     root: `${PREFIX}-root`,
     dialogRoot: `${PREFIX}-dialog-root`
 };
-const Root = (0, styles_1.styled)(material_1.Button, {
+const Root = (0, material_1.styled)(material_1.Button, {
     name: PREFIX,
     slot: 'Root',
     overridesResolver: (props, styles) => [styles.root, styles.voted]
 })(({ theme }) => ({}));
-const DialogRoot = (0, styles_1.styled)(BaseDialog_1.default, {
+const DialogRoot = (0, material_1.styled)(BaseDialog_1.default, {
     name: PREFIX,
     slot: 'Root',
     overridesResolver: (props, styles) => styles.dialogRoot

package/lib/cjs/components/AccountRecover/AccountRecover.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const styles_1 = require("@mui/material/styles");
 const react_core_1 = require("@selfcommunity/react-core");
 const material_1 = require("@mui/material");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
@@ -18,7 +17,7 @@ const classes = {
     email: `${PREFIX}-email`,
     success: `${PREFIX}-success`
 };
-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

package/lib/cjs/components/AccountReset/AccountReset.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const styles_1 = require("@mui/material/styles");
 const react_core_1 = require("@selfcommunity/react-core");
 const material_1 = require("@mui/material");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
@@ -20,7 +19,7 @@ const classes = {
     error: `${PREFIX}-error`,
     validating: `${PREFIX}-validating`
 };
-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

package/lib/cjs/components/AccountVerify/AccountVerify.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const styles_1 = require("@mui/material/styles");
 const react_core_1 = require("@selfcommunity/react-core");
 const material_1 = require("@mui/material");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
@@ -16,7 +15,7 @@ const classes = {
     success: `${PREFIX}-success`,
     error: `${PREFIX}-error`
 };
-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

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

@@ -1,5 +1,5 @@
 import { BottomNavigationProps as MuiBottomNavigationProps } from '@mui/material';
-export type BottomNavigationProps = MuiBottomNavigationProps;
+export declare type BottomNavigationProps = MuiBottomNavigationProps;
 /**
  * > API documentation for the Community-JS Bottom Navigation component. Learn about the available props and the CSS API.
  *

package/lib/cjs/components/BottomNavigation/BottomNavigation.js

@@ -62,7 +62,7 @@ function BottomNavigation(inProps) {
     // PREFERENCES
     const { preferences, features } = (0, react_core_1.useSCPreferences)();
     // MEMO
-    const privateMessagingEnabled = (0, react_1.useMemo)(() => features.includes(types_1.SCFeatureName.PRIVATE_MESSAGING), [features]);
+    const privateMessagingEnabled = (0, react_1.useMemo)(() => react_core_1.SCPreferences.ADDONS_PRIVATE_MESSAGES_ENABLED in preferences && preferences[react_core_1.SCPreferences.ADDONS_PRIVATE_MESSAGES_ENABLED].value, [preferences]);
     const groupsEnabled = (0, react_1.useMemo)(() => preferences &&
         features &&
         features.includes(types_1.SCFeatureName.TAGGING) &&
@@ -75,6 +75,11 @@ function BottomNavigation(inProps) {
         features.includes(types_1.SCFeatureName.EVENT) &&
         react_core_1.SCPreferences.CONFIGURATIONS_EVENTS_ENABLED in preferences &&
         preferences[react_core_1.SCPreferences.CONFIGURATIONS_EVENTS_ENABLED].value, [preferences, features]);
+    const coursesEnabled = (0, react_1.useMemo)(() => preferences &&
+        features &&
+        features.includes(types_1.SCFeatureName.COURSE) &&
+        react_core_1.SCPreferences.CONFIGURATIONS_COURSES_ENABLED in preferences &&
+        preferences[react_core_1.SCPreferences.CONFIGURATIONS_COURSES_ENABLED].value, [preferences, features]);
     const exploreStreamEnabled = preferences[react_core_1.SCPreferences.CONFIGURATIONS_EXPLORE_STREAM_ENABLED].value;
     const postOnlyStaffEnabled = preferences[react_core_1.SCPreferences.CONFIGURATIONS_POST_ONLY_STAFF_ENABLED].value;
     const contentAvailable = preferences[react_core_1.SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY].value;
@@ -84,16 +89,26 @@ function BottomNavigation(inProps) {
             ? children
             : [
                 (0, jsx_runtime_1.jsx)(material_1.BottomNavigationAction, { className: classes.action, component: react_core_1.Link, to: scUserContext.user ? scRoutingContext.url(react_core_1.SCRoutes.HOME_ROUTE_NAME, {}) : '/', value: scUserContext.user ? scRoutingContext.url(react_core_1.SCRoutes.HOME_ROUTE_NAME, {}) : '/', icon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "home" }) }, "home"),
-                (scUserContext.user || contentAvailable) && exploreStreamEnabled ? ((0, jsx_runtime_1.jsx)(material_1.BottomNavigationAction, { className: classes.action, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.EXPLORE_ROUTE_NAME, {}), value: scRoutingContext.url(react_core_1.SCRoutes.EXPLORE_ROUTE_NAME, {}), icon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "explore" }) }, "explore")) : null,
-                (!postOnlyStaffEnabled || (react_core_1.UserUtils.isStaff(scUserContext.user) && postOnlyStaffEnabled)) &&
+                // (scUserContext.user || contentAvailable) && exploreStreamEnabled ? (
+                //   <BottomNavigationAction
+                //     key="explore"
+                //     className={classes.action}
+                //     component={Link}
+                //     to={scRoutingContext.url(SCRoutes.EXPLORE_ROUTE_NAME, {})}
+                //     value={scRoutingContext.url(SCRoutes.EXPLORE_ROUTE_NAME, {})}
+                //     icon={<Icon>explore</Icon>}
+                //   />
+                // ) : null,
+                (!postOnlyStaffEnabled || react_core_1.UserUtils.isStaff(scUserContext.user) || react_core_1.UserUtils.isPublisher(scUserContext.user)) &&
                     ((groupsEnabled && !eventsEnabled) || (!groupsEnabled && eventsEnabled)) &&
                     !exploreStreamEnabled ? ((0, jsx_runtime_1.jsx)(material_1.BottomNavigationAction, { className: (0, classnames_1.default)(classes.composer, classes.action), component: ComposerIconButton_1.default, disableRipple: true }, "composer")) : null,
+                coursesEnabled && (scUserContext.user || contentAvailable) ? ((0, jsx_runtime_1.jsx)(material_1.BottomNavigationAction, { className: classes.action, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.COURSES_ROUTE_NAME, {}), value: scRoutingContext.url(react_core_1.SCRoutes.COURSES_ROUTE_NAME, {}), icon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "courses" }) }, "courses")) : null,
                 groupsEnabled && scUserContext.user ? ((0, jsx_runtime_1.jsx)(material_1.BottomNavigationAction, { className: classes.action, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.GROUPS_SUBSCRIBED_ROUTE_NAME, {}), value: scRoutingContext.url(react_core_1.SCRoutes.GROUPS_SUBSCRIBED_ROUTE_NAME, {}), icon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "groups" }) }, "groups")) : null,
                 (!postOnlyStaffEnabled || (react_core_1.UserUtils.isStaff(scUserContext.user) && postOnlyStaffEnabled)) &&
                     groupsEnabled &&
                     eventsEnabled &&
                     !exploreStreamEnabled ? ((0, jsx_runtime_1.jsx)(material_1.BottomNavigationAction, { className: (0, classnames_1.default)(classes.composer, classes.action), component: ComposerIconButton_1.default, disableRipple: true }, "composer")) : null,
-                eventsEnabled ? ((0, jsx_runtime_1.jsx)(material_1.BottomNavigationAction, { className: classes.action, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.EVENT_ROUTE_NAME, {}), value: scRoutingContext.url(react_core_1.SCRoutes.EVENTS_ROUTE_NAME, {}), icon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "CalendarIcon" }) }, "events")) : null,
+                eventsEnabled && (scUserContext.user || contentAvailable) ? ((0, jsx_runtime_1.jsx)(material_1.BottomNavigationAction, { className: classes.action, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.EVENT_ROUTE_NAME, {}), value: scRoutingContext.url(react_core_1.SCRoutes.EVENTS_ROUTE_NAME, {}), icon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "CalendarIcon" }) }, "events")) : null,
                 scUserContext.user && !groupsEnabled && !eventsEnabled ? ((0, jsx_runtime_1.jsx)(material_1.BottomNavigationAction, { className: classes.action, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_NOTIFICATIONS_ROUTE_NAME, {}), value: scRoutingContext.url(react_core_1.SCRoutes.USER_NOTIFICATIONS_ROUTE_NAME, {}), icon: (0, jsx_runtime_1.jsx)(material_1.Badge, Object.assign({ badgeContent: scUserContext.user.unseen_notification_banners_counter + scUserContext.user.unseen_interactions_counter, color: "secondary" }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "notifications_active" }) })) }, "notifications")) : null,
                 privateMessagingEnabled && scUserContext.user ? ((0, jsx_runtime_1.jsx)(material_1.BottomNavigationAction, { className: classes.action, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_PRIVATE_MESSAGES_ROUTE_NAME, {}), value: scRoutingContext.url(react_core_1.SCRoutes.USER_PRIVATE_MESSAGES_ROUTE_NAME, {}), icon: (0, jsx_runtime_1.jsx)(material_1.Badge, Object.assign({ badgeContent: 0, color: "secondary" }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "email" }) })) }, "messages")) : null
             ] })));

package/lib/cjs/components/BroadcastMessages/BroadcastMessages.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const styles_1 = require("@mui/material/styles");
 const material_1 = require("@mui/material");
 const pubsub_js_1 = tslib_1.__importDefault(require("pubsub-js"));
 const system_1 = require("@mui/system");
@@ -22,7 +21,7 @@ const classes = {
     avatarLoadMore: `${constants_1.PREFIX}-avatar-load-more`,
     buttonLoadMore: `${constants_1.PREFIX}-button-load-more`
 };
-const Root = (0, styles_1.styled)(material_1.Box, {
+const Root = (0, material_1.styled)(material_1.Box, {
     name: constants_1.PREFIX,
     slot: 'Root'
 })(() => ({}));

package/lib/cjs/components/BroadcastMessages/Message.js

@@ -4,8 +4,6 @@ const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const material_1 = require("@mui/material");
-const styles_1 = require("@mui/material/styles");
-const Icon_1 = tslib_1.__importDefault(require("@mui/material/Icon"));
 const react_intl_1 = require("react-intl");
 const Errors_1 = require("../../constants/Errors");
 const MarkRead_1 = tslib_1.__importDefault(require("../../shared/MarkRead"));
@@ -27,7 +25,7 @@ const classes = {
     messageIconWrap: `${constants_1.PREFIX}-flag-icon-wrap`,
     messageIconSnippet: `${constants_1.PREFIX}-flag-icon-snippet`
 };
-const Root = (0, styles_1.styled)(Widget_1.default, {
+const Root = (0, material_1.styled)(Widget_1.default, {
     name: constants_1.PREFIX,
     slot: 'MessageRoot'
 })(() => ({}));
@@ -94,11 +92,11 @@ function Message(props) {
          * With a fade in transition show the Card (Widget)
          * Include also MarkRead component to
          */
-        return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className) }, rest, { children: (0, jsx_runtime_1.jsx)(material_1.Fade, Object.assign({ in: open, unmountOnExit: true }, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, { children: [message.viewed_at === null && !disableMarkRead && ((0, jsx_runtime_1.jsx)(MarkRead_1.default, { endpoint: api_services_1.Endpoints.BroadcastMessagesMarkRead, data: { banner_ids: [message.id] }, callback: handleOnRead })), (0, jsx_runtime_1.jsx)(material_1.CardHeader, { className: classes.header, avatar: (0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: preferences[react_core_1.SCPreferences.TEXT_APPLICATION_NAME], src: preferences[react_core_1.SCPreferences.LOGO_NAVBAR_LOGO_MOBILE] }), action: template === types_1.SCBroadcastMessageTemplateType.DETAIL && ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ "aria-label": "close", onClick: handleClose, disabled: closing }, { children: closing ? (0, jsx_runtime_1.jsx)(material_1.CircularProgress, { size: 20 }) : (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "close" }) }))), title: (0, jsx_runtime_1.jsx)(material_1.Chip, { color: "secondary", size: "small", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.broadcastMessages.message.chip", defaultMessage: "ui.broadcastMessages.message.chip" }) }) }), renderContent(banner)] }) })) })));
+        return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className) }, rest, { children: (0, jsx_runtime_1.jsx)(material_1.Fade, Object.assign({ in: open, unmountOnExit: true }, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, { children: [message.viewed_at === null && !disableMarkRead && ((0, jsx_runtime_1.jsx)(MarkRead_1.default, { endpoint: api_services_1.Endpoints.BroadcastMessagesMarkRead, data: { banner_ids: [message.id] }, callback: handleOnRead })), (0, jsx_runtime_1.jsx)(material_1.CardHeader, { className: classes.header, avatar: (0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: preferences[react_core_1.SCPreferences.TEXT_APPLICATION_NAME], src: preferences[react_core_1.SCPreferences.LOGO_NAVBAR_LOGO_MOBILE] }), action: template === types_1.SCBroadcastMessageTemplateType.DETAIL && ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ "aria-label": "close", onClick: handleClose, disabled: closing }, { children: closing ? (0, jsx_runtime_1.jsx)(material_1.CircularProgress, { size: 20 }) : (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) }))), title: (0, jsx_runtime_1.jsx)(material_1.Chip, { color: "secondary", size: "small", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.broadcastMessages.message.chip", defaultMessage: "ui.broadcastMessages.message.chip" }) }) }), renderContent(banner)] }) })) })));
     }
     // SCBroadcastMessageTemplateType.SNIPPET
     return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ id: id, className: className }, rest, { children: (0, jsx_runtime_1.jsxs)(material_1.ListItem, Object.assign({ alignItems: 'center', component: 'div', classes: {
                 root: (0, classnames_1.default)(classes.listItemSnippet, classes.listItemSnippetNew)
-            } }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemAvatar, Object.assign({ classes: { root: classes.messageIconWrap } }, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, Object.assign({ variant: "circular", classes: { root: classes.messageIconSnippet } }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "info" }) })) })), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { disableTypography: true, primary: (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes.USER_NOTIFICATIONS_ROUTE_NAME, {}) }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "span", color: "inherit" }, { children: banner.title })) })) })] })) })));
+            } }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemAvatar, Object.assign({ classes: { root: classes.messageIconWrap } }, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, Object.assign({ variant: "circular", classes: { root: classes.messageIconSnippet } }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "info" }) })) })), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { disableTypography: true, primary: (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes.USER_NOTIFICATIONS_ROUTE_NAME, {}) }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "span", color: "inherit" }, { children: banner.title })) })) })] })) })));
 }
 exports.default = Message;

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

@@ -5,7 +5,6 @@ const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = tslib_1.__importDefault(require("react"));
 const material_1 = require("@mui/material");
-const styles_1 = require("@mui/material/styles");
 const Widget_1 = tslib_1.__importDefault(require("../Widget"));
 const constants_1 = require("./constants");
 const messageClasses = {
@@ -15,7 +14,7 @@ const messageClasses = {
     media: `${constants_1.PREFIX}-media`,
     content: `${constants_1.PREFIX}-content`
 };
-const MessageSkeletonRoot = (0, styles_1.styled)(Widget_1.default, {
+const MessageSkeletonRoot = (0, material_1.styled)(Widget_1.default, {
     name: constants_1.PREFIX,
     slot: 'MessageSkeletonRoot'
 })(() => ({}));
@@ -51,7 +50,7 @@ exports.MessageSkeleton = MessageSkeleton;
 const classes = {
     root: `${constants_1.PREFIX}-skeleton-root`
 };
-const Root = (0, styles_1.styled)(material_1.Box, {
+const Root = (0, material_1.styled)(material_1.Box, {
     name: constants_1.PREFIX,
     slot: 'SkeletonRoot'
 })(() => ({}));

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