@selfcommunity/react-ui 0.8.0-alpha.2 → 0.8.0-alpha.20

package/lib/esm/components/GroupActionsMenu/index.js

@@ -0,0 +1,154 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
+import { styled } from '@mui/material/styles';
+import { Divider, IconButton, List, ListItemIcon, Menu, MenuItem, SwipeableDrawer, useMediaQuery, useTheme } from '@mui/material';
+import { FormattedMessage } from 'react-intl';
+import Icon from '@mui/material/Icon';
+import classNames from 'classnames';
+import { useThemeProps } from '@mui/system';
+import { SCRoutes, useSCFetchGroup, useSCRouting, useSCUser } from '@selfcommunity/react-core';
+import ConfirmDialog from '../../shared/ConfirmDialog/ConfirmDialog';
+import { GroupService } from '@selfcommunity/api-services';
+import { copyTextToClipboard } from '@selfcommunity/utils';
+import { enqueueSnackbar } from 'notistack';
+import PubSub from 'pubsub-js';
+import { SCGroupEventType, SCTopicType } from '../../constants/PubSub';
+import GroupForm from '../../components/GroupForm';
+import { DELETE_GROUP, GET_GROUP_LINK } from '../../constants/GroupActionsMenu';
+const PREFIX = 'SCGroupActionsMenu';
+const classes = {
+    root: `${PREFIX}-root`,
+    drawerRoot: `${PREFIX}-drawer-root`,
+    menuRoot: `${PREFIX}-menu-root`,
+    paper: `${PREFIX}-paper`,
+    item: `${PREFIX}-item`
+};
+const Root = styled(IconButton, {
+    name: PREFIX,
+    slot: 'Root'
+})(() => ({}));
+const SwipeableDrawerRoot = styled(SwipeableDrawer, {
+    name: PREFIX,
+    slot: 'DrawerRoot'
+})(() => ({}));
+const MenuRoot = styled(Menu, {
+    name: PREFIX,
+    slot: 'MenuRoot'
+})(() => ({}));
+/**
+ * > API documentation for the Community-JS GroupActionsMenu component. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {GroupActionsMenu} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCGroupActionsMenu` can be used when providing style overrides in the theme.
+
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCGroupActionsMenu-root|Styles applied to the root element.|
+ |drawerRoot|.SCGroupActionsMenu-drawer-root|Styles applied to the drawer root element.|
+ |menuRoot|.SCGroupActionsMenu-menu-root|Styles applied to the menu root element.|
+ |paper|.SCGroupActionsMenu-paper|Styles applied to the paper element.|
+ |item|.SCGroupActionsMenu-item|Styles applied to the item element.|
+
+
+ * @param inProps
+ */
+export default function GroupActionsMenu(inProps) {
+    var _a;
+    // PROPS
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX
+    });
+    const { className, group, groupId, onDeleteConfirm, onEditSuccess } = props, rest = __rest(props, ["className", "group", "groupId", "onDeleteConfirm", "onEditSuccess"]);
+    // STATE
+    const [anchorEl, setAnchorEl] = useState(null);
+    const [openConfirmDialog, setOpenConfirmDialog] = useState(false);
+    const [openEdit, setOpenEdit] = useState(false);
+    // HOOKS
+    const theme = useTheme();
+    const isMobile = useMediaQuery(theme.breakpoints.down('md'));
+    const scRoutingContext = useSCRouting();
+    const scUserContext = useSCUser();
+    const { scGroup, setSCGroup } = useSCFetchGroup({ id: groupId, group });
+    const isGroupAdmin = useMemo(() => { var _a; return scUserContext.user && ((_a = scGroup === null || scGroup === void 0 ? void 0 : scGroup.managed_by) === null || _a === void 0 ? void 0 : _a.id) === scUserContext.user.id; }, [scUserContext.user, (_a = scGroup === null || scGroup === void 0 ? void 0 : scGroup.managed_by) === null || _a === void 0 ? void 0 : _a.id]);
+    // HANDLERS
+    const handleOpen = (group) => {
+        setAnchorEl(group.currentTarget);
+    };
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+    const handleEditClick = () => {
+        setOpenEdit((o) => !o);
+    };
+    const handleCloseDialog = () => {
+        setOpenConfirmDialog(false);
+        setAnchorEl(null);
+    };
+    const handleEditSuccess = (data) => {
+        setSCGroup(data);
+        onEditSuccess && onEditSuccess(data);
+    };
+    /**
+     * Handles thread deletion
+     */
+    function handleDeleteThread() {
+        GroupService.deleteGroup(scGroup.id)
+            .then(() => {
+            onDeleteConfirm();
+            handleCloseDialog();
+            PubSub.publish(`${SCTopicType.GROUP}.${SCGroupEventType.DELETE}`, scGroup.id);
+        })
+            .catch((error) => {
+            setOpenConfirmDialog(false);
+            console.log(error);
+        });
+    }
+    /**
+     * Handles actions
+     */
+    function handleAction(action) {
+        if (action === GET_GROUP_LINK) {
+            copyTextToClipboard(`${location.protocol}//${location.host}${scRoutingContext.url(SCRoutes.GROUP_ROUTE_NAME, scGroup)}`).then(() => {
+                enqueueSnackbar(_jsx(FormattedMessage, { id: "ui.common.permanentLinkCopied", defaultMessage: "ui.common.permanentLinkCopied" }), {
+                    variant: 'success',
+                    autoHideDuration: 3000
+                });
+            });
+            handleClose();
+        }
+        else if (action === DELETE_GROUP) {
+            setOpenConfirmDialog(true);
+            handleClose();
+        }
+    }
+    /**
+     *
+     */
+    const renderList = () => {
+        return [
+            _jsxs(MenuItem, Object.assign({ className: classes.item, onClick: () => handleAction(GET_GROUP_LINK) }, { children: [_jsx(ListItemIcon, { children: _jsx(Icon, { children: "link" }) }), _jsx(FormattedMessage, { id: "ui.groupActionsMenu.item.link", defaultMessage: "ui.groupActionsMenu.item.link" })] }), "link"),
+            isGroupAdmin &&
+                scGroup.active && [
+                _jsx(Divider, {}, "divider"),
+                isMobile && (_jsxs(MenuItem, Object.assign({ className: classes.item, onClick: handleEditClick }, { children: [_jsx(ListItemIcon, { children: _jsx(Icon, { children: "edit" }) }), _jsx(FormattedMessage, { id: "ui.groupActionsMenu.item.edit", defaultMessage: "ui.groupActionsMenu.item.edit" })] }), "edit")),
+                _jsxs(MenuItem, Object.assign({ className: classes.item, onClick: () => handleAction(DELETE_GROUP) }, { children: [_jsx(ListItemIcon, { children: _jsx(Icon, { children: "delete" }) }), _jsx(FormattedMessage, { id: "ui.groupActionsMenu.item.delete", defaultMessage: "ui.groupActionsMenu.item.delete" })] }), "delete")
+            ]
+        ];
+    };
+    if (!scGroup) {
+        return null;
+    }
+    return (_jsxs(_Fragment, { children: [_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { onClick: handleOpen }, { children: _jsx(Icon, { children: "more_vert" }) })), isMobile ? (_jsx(SwipeableDrawerRoot, Object.assign({ className: classes.drawerRoot, anchor: "bottom", open: Boolean(anchorEl), onClose: handleClose, onOpen: handleOpen, PaperProps: { className: classes.paper }, disableSwipeToOpen: true }, { children: _jsx(List, { children: renderList() }) }))) : (_jsx(MenuRoot, Object.assign({ className: classes.menuRoot, anchorEl: anchorEl, open: Boolean(anchorEl), onClose: handleClose, PaperProps: { className: classes.paper } }, { children: renderList() }))), openConfirmDialog && (_jsx(ConfirmDialog, { open: openConfirmDialog, title: _jsx(FormattedMessage, { id: "ui.groupActionsMenu.dialog.msg", defaultMessage: "ui.groupActionsMenu.dialog.msg" }), btnConfirm: _jsx(FormattedMessage, { id: "ui.groupActionsMenu.dialog.confirm", defaultMessage: "ui.groupActionsMenu.dialog.confirm" }), onConfirm: handleDeleteThread, onClose: handleCloseDialog })), openEdit && _jsx(GroupForm, { onClose: handleEditClick, group: scGroup, onSuccess: handleEditSuccess })] }));
+}

package/lib/esm/components/GroupHeader/GroupHeader.d.ts

@@ -3,6 +3,7 @@ import { ChangeGroupCoverProps } from '../ChangeGroupCover';
 import { ChangeGroupPictureProps } from '../ChangeGroupPicture';
 import { GroupMembersButtonProps } from '../GroupMembersButton';
 import { GroupSubscribeButtonProps } from '../GroupSubscribeButton';
+import { GroupActionsMenuProps } from '../GroupActionsMenu';
 export interface GroupHeaderProps {
     /**
      * Id of group object
@@ -44,6 +45,11 @@ export interface GroupHeaderProps {
      * @default {}
      */
     GroupMembersButtonProps?: GroupMembersButtonProps;
+    /**
+     * Props to spread event actions menu
+     * @default {}
+     */
+    GroupActionsProps?: Omit<GroupActionsMenuProps, 'group'>;
     /**
      * Any other properties
      */

package/lib/esm/components/GroupHeader/GroupHeader.js

@@ -2,7 +2,7 @@ import { __rest } from "tslib";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useRef } from 'react';
 import { styled } from '@mui/material/styles';
-import { Avatar, Box, Icon, Paper, Typography } from '@mui/material';
+import { Avatar, Box, Icon, Paper, Typography, useMediaQuery, useTheme } from '@mui/material';
 import { SCGroupPrivacyType, SCGroupSubscriptionStatusType } from '@selfcommunity/types';
 import { SCPreferences, useSCFetchGroup, useSCPreferences, useSCUser } from '@selfcommunity/react-core';
 import GroupHeaderSkeleton from './Skeleton';
@@ -19,6 +19,7 @@ import GroupSubscribeButton from '../GroupSubscribeButton';
 import GroupInviteButton from '../GroupInviteButton';
 import { SCGroupEventType, SCTopicType } from '../../constants/PubSub';
 import PubSub from 'pubsub-js';
+import GroupActionsMenu from '../GroupActionsMenu';
 const classes = {
     root: `${PREFIX}-root`,
     cover: `${PREFIX}-cover`,
@@ -30,7 +31,8 @@ const classes = {
     visibility: `${PREFIX}-visibility`,
     visibilityItem: `${PREFIX}-visibility-item`,
     members: `${PREFIX}-members`,
-    membersCounter: `${PREFIX}-members-counter`
+    membersCounter: `${PREFIX}-members-counter`,
+    multiActions: `${PREFIX}-multi-actions`
 };
 const Root = styled(Box, {
     name: PREFIX,
@@ -74,7 +76,7 @@ export default function GroupHeader(inProps) {
         props: inProps,
         name: PREFIX
     });
-    const { id = null, className = null, group, groupId = null, ChangePictureProps = {}, ChangeCoverProps = {}, GroupSubscribeButtonProps = {}, GroupMembersButtonProps = {} } = props, rest = __rest(props, ["id", "className", "group", "groupId", "ChangePictureProps", "ChangeCoverProps", "GroupSubscribeButtonProps", "GroupMembersButtonProps"]);
+    const { id = null, className = null, group, groupId = null, ChangePictureProps = {}, ChangeCoverProps = {}, GroupSubscribeButtonProps = {}, GroupMembersButtonProps = {}, GroupActionsProps } = props, rest = __rest(props, ["id", "className", "group", "groupId", "ChangePictureProps", "ChangeCoverProps", "GroupSubscribeButtonProps", "GroupMembersButtonProps", "GroupActionsProps"]);
     // PREFERENCES
     const scPreferences = useSCPreferences();
     const visibilityEnabled = useMemo(() => scPreferences.preferences[SCPreferences.CONFIGURATIONS_GROUPS_VISIBILITY_ENABLED].value, [scPreferences.preferences]);
@@ -83,6 +85,8 @@ export default function GroupHeader(inProps) {
     const scUserContext = useSCUser();
     // HOOKS
     const { scGroup, setSCGroup } = useSCFetchGroup({ id: groupId, group });
+    const theme = useTheme();
+    const isMobile = useMediaQuery(theme.breakpoints.down('md'));
     // REFS
     const updatesSubscription = useRef(null);
     // CONST
@@ -145,7 +149,7 @@ export default function GroupHeader(inProps) {
     const _backgroundCover = Object.assign({}, (scGroup.emotional_image
         ? { background: `url('${scGroup.emotional_image}') center / cover` }
         : { background: `url('${scPreferences.preferences[SCPreferences.IMAGES_USER_DEFAULT_COVER].value}') center / cover` }));
-    return (_jsxs(Root, Object.assign({ id: id, className: classNames(classes.root, className) }, rest, { children: [_jsxs(Paper, Object.assign({ style: _backgroundCover, classes: { root: classes.cover } }, { children: [_jsx(Box, Object.assign({ className: classes.avatar }, { children: _jsx(Avatar, { children: _jsx("img", { alt: "group", src: scGroup.image_big ? scGroup.image_big : '' }) }) })), isGroupAdmin && (_jsxs(_Fragment, { children: [_jsx(ChangeGroupPicture, Object.assign({ groupId: scGroup.id, onChange: handleChangeAvatar, className: classes.changePicture }, ChangePictureProps)), _jsx("div", Object.assign({ className: classes.changeCover }, { children: _jsx(ChangeGroupCover, Object.assign({ groupId: scGroup.id, onChange: handleChangeCover }, ChangeCoverProps)) }))] }))] })), _jsxs(Box, Object.assign({ className: classes.info }, { children: [isGroupAdmin && _jsx(EditGroupButton, { group: scGroup, groupId: scGroup.id, onEditSuccess: (data) => setSCGroup(data) }), _jsx(Typography, Object.assign({ variant: "h5", className: classes.name }, { children: scGroup.name })), privateEnabled && (_jsxs(Box, Object.assign({ className: classes.visibility }, { children: [privateEnabled && (_jsx(_Fragment, { children: scGroup.privacy === SCGroupPrivacyType.PUBLIC ? (_jsxs(Typography, Object.assign({ className: classes.visibilityItem }, { children: [_jsx(Icon, { children: "public" }), _jsx(FormattedMessage, { id: "ui.groupHeader.visibility.public", defaultMessage: "ui.groupHeader.visibility.public" })] }))) : (_jsxs(Typography, Object.assign({ className: classes.visibilityItem }, { children: [_jsx(Icon, { children: "private" }), _jsx(FormattedMessage, { id: "ui.groupHeader.visibility.private", defaultMessage: "ui.groupHeader.visibility.private" })] }))) })), visibilityEnabled && (_jsxs(_Fragment, { children: [privateEnabled && _jsx(Bullet, {}), scGroup.visible ? (_jsxs(Typography, Object.assign({ className: classes.visibilityItem }, { children: [_jsx(Icon, { children: "visibility" }), _jsx(FormattedMessage, { id: "ui.groupHeader.visibility.visible", defaultMessage: "ui.groupHeader.visibility.visible" })] }))) : (_jsxs(Typography, Object.assign({ className: classes.visibilityItem }, { children: [_jsx(Icon, { children: "visibility_off" }), _jsx(FormattedMessage, { id: "ui.groupHeader.visibility.hidden", defaultMessage: "ui.groupHeader.visibility.hidden" })] })))] }))] }))), _jsx(_Fragment, { children: ((scGroup && scGroup.privacy === SCGroupPrivacyType.PUBLIC) ||
+    return (_jsxs(Root, Object.assign({ id: id, className: classNames(classes.root, className) }, rest, { children: [_jsxs(Paper, Object.assign({ style: _backgroundCover, classes: { root: classes.cover } }, { children: [_jsx(Box, Object.assign({ className: classes.avatar }, { children: _jsx(Avatar, { children: _jsx("img", { alt: "group", src: scGroup.image_big ? scGroup.image_big : '' }) }) })), isGroupAdmin && (_jsxs(_Fragment, { children: [_jsx(ChangeGroupPicture, Object.assign({ groupId: scGroup.id, onChange: handleChangeAvatar, className: classes.changePicture }, ChangePictureProps)), _jsx("div", Object.assign({ className: classes.changeCover }, { children: _jsx(ChangeGroupCover, Object.assign({ groupId: scGroup.id, onChange: handleChangeCover }, ChangeCoverProps)) }))] }))] })), _jsxs(Box, Object.assign({ className: classes.info }, { children: [isGroupAdmin && !isMobile && (_jsxs(Box, Object.assign({ className: classes.multiActions }, { children: [_jsx(EditGroupButton, { group: scGroup, groupId: scGroup.id, onEditSuccess: (data) => setSCGroup(data) }), _jsx(GroupActionsMenu, Object.assign({ group: scGroup, onEditSuccess: (data) => setSCGroup(data) }, GroupActionsProps))] }))), _jsx(Typography, Object.assign({ variant: "h5", className: classes.name }, { children: scGroup.name })), privateEnabled && (_jsxs(Box, Object.assign({ className: classes.visibility }, { children: [privateEnabled && (_jsx(_Fragment, { children: scGroup.privacy === SCGroupPrivacyType.PUBLIC ? (_jsxs(Typography, Object.assign({ className: classes.visibilityItem }, { children: [_jsx(Icon, { children: "public" }), _jsx(FormattedMessage, { id: "ui.groupHeader.visibility.public", defaultMessage: "ui.groupHeader.visibility.public" })] }))) : (_jsxs(Typography, Object.assign({ className: classes.visibilityItem }, { children: [_jsx(Icon, { children: "private" }), _jsx(FormattedMessage, { id: "ui.groupHeader.visibility.private", defaultMessage: "ui.groupHeader.visibility.private" })] }))) })), visibilityEnabled && (_jsxs(_Fragment, { children: [privateEnabled && _jsx(Bullet, {}), scGroup.visible ? (_jsxs(Typography, Object.assign({ className: classes.visibilityItem }, { children: [_jsx(Icon, { children: "visibility" }), _jsx(FormattedMessage, { id: "ui.groupHeader.visibility.visible", defaultMessage: "ui.groupHeader.visibility.visible" })] }))) : (_jsxs(Typography, Object.assign({ className: classes.visibilityItem }, { children: [_jsx(Icon, { children: "visibility_off" }), _jsx(FormattedMessage, { id: "ui.groupHeader.visibility.hidden", defaultMessage: "ui.groupHeader.visibility.hidden" })] })))] }))] }))), _jsx(_Fragment, { children: ((scGroup && scGroup.privacy === SCGroupPrivacyType.PUBLIC) ||
                             scGroup.subscription_status === SCGroupSubscriptionStatusType.SUBSCRIBED ||
-                            isGroupAdmin) && (_jsxs(Box, Object.assign({ className: classes.members }, { children: [_jsx(Typography, Object.assign({ className: classes.membersCounter, component: "div" }, { children: _jsx(FormattedMessage, { id: "ui.groupHeader.members", defaultMessage: "ui.groupHeader.members", values: { total: scGroup.subscribers_counter } }) })), _jsx(GroupMembersButton, Object.assign({ groupId: scGroup === null || scGroup === void 0 ? void 0 : scGroup.id, group: scGroup, autoHide: !isGroupAdmin }, GroupMembersButtonProps), scGroup.subscribers_counter)] }))) }), isGroupAdmin ? (_jsx(GroupInviteButton, { group: scGroup, groupId: scGroup.id })) : (_jsx(GroupSubscribeButton, Object.assign({ group: scGroup, onSubscribe: handleSubscribe }, GroupSubscribeButtonProps)))] }))] })));
+                            isGroupAdmin) && (_jsxs(Box, Object.assign({ className: classes.members }, { children: [_jsx(Typography, Object.assign({ className: classes.membersCounter, component: "div" }, { children: _jsx(FormattedMessage, { id: "ui.groupHeader.members", defaultMessage: "ui.groupHeader.members", values: { total: scGroup.subscribers_counter } }) })), _jsx(GroupMembersButton, Object.assign({ groupId: scGroup === null || scGroup === void 0 ? void 0 : scGroup.id, group: scGroup, autoHide: !isGroupAdmin }, GroupMembersButtonProps), scGroup.subscribers_counter)] }))) }), isGroupAdmin ? (_jsxs(Box, { children: [_jsx(GroupInviteButton, { group: scGroup, groupId: scGroup.id }), isMobile && _jsx(GroupActionsMenu, Object.assign({ group: scGroup, onEditSuccess: (data) => setSCGroup(data) }, GroupActionsProps))] })) : (_jsx(GroupSubscribeButton, Object.assign({ group: scGroup, onSubscribe: handleSubscribe }, GroupSubscribeButtonProps)))] }))] })));
 }

package/lib/esm/components/Groups/Groups.js

@@ -1,6 +1,6 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { styled } from '@mui/material/styles';
 import { Box, Button, Grid, TextField, Typography, useMediaQuery, useTheme } from '@mui/material';
 import { Endpoints, GroupService, http } from '@selfcommunity/api-services';
@@ -16,6 +16,8 @@ import { PREFIX } from './constants';
 import Group, { GroupSkeleton } from '../Group';
 import { DEFAULT_PAGINATION_OFFSET } from '../../constants/Pagination';
 import InfiniteScroll from '../../shared/InfiniteScroll';
+import PubSub from 'pubsub-js';
+import { SCGroupEventType, SCTopicType } from '../../constants/PubSub';
 const classes = {
     root: `${PREFIX}-root`,
     filters: `${PREFIX}-filter`,
@@ -83,6 +85,8 @@ export default function Groups(inProps) {
         scPreferencesContext.preferences[SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY].value, [scPreferencesContext.preferences]);
     // CONST
     const authUserId = scUserContext.user ? scUserContext.user.id : null;
+    // REFS
+    const updatesSubscription = useRef(null);
     // HANDLERS
     const handleScrollUp = () => {
         window.scrollTo({ left: 0, top: 0, behavior: 'smooth' });
@@ -119,6 +123,28 @@ export default function Groups(inProps) {
             fetchGroups();
         }
     }, [contentAvailability, authUserId, search]);
+    /**
+     * Subscriber for pubsub callback
+     */
+    const onDeleteGroupHandler = useCallback((_msg, deleted) => {
+        setGroups((prev) => {
+            if (prev.some((e) => e.id === deleted)) {
+                return prev.filter((e) => e.id !== deleted);
+            }
+            return prev;
+        });
+    }, [groups]);
+    /**
+     * On mount, subscribe to receive event updates (only delete)
+     */
+    useEffect(() => {
+        if (groups) {
+            updatesSubscription.current = PubSub.subscribe(`${SCTopicType.GROUP}.${SCGroupEventType.DELETE}`, onDeleteGroupHandler);
+        }
+        return () => {
+            updatesSubscription.current && PubSub.unsubscribe(updatesSubscription.current);
+        };
+    }, [groups]);
     const handleNext = useMemo(() => () => {
         if (!next) {
             return;

package/lib/esm/components/MyEventsWidget/MyEventsWidget.js

@@ -4,7 +4,7 @@ import { Button, CardActions, Icon, IconButton, Typography } from '@mui/material
 import { styled } from '@mui/material/styles';
 import { Box, useThemeProps } from '@mui/system';
 import { Endpoints, EventService, http } from '@selfcommunity/api-services';
-import { SCCache, SCRoutes, useSCPreferences, useSCRouting, useSCUser } from '@selfcommunity/react-core';
+import { SCCache, SCPreferences, SCRoutes, useSCPreferences, useSCRouting, useSCUser } from '@selfcommunity/react-core';
 import { SCEventSubscriptionStatusType, SCFeatureName } from '@selfcommunity/types';
 import { Logger } from '@selfcommunity/utils';
 import { useCallback, useEffect, useMemo, useReducer, useRef, useState } from 'react';
@@ -64,8 +64,12 @@ export default function MyEventsWidget(inProps) {
     // CONTEXT
     const scUserContext = useSCUser();
     const scRoutingContext = useSCRouting();
-    const { features } = useSCPreferences();
-    const eventsEnabled = useMemo(() => features && features.includes(SCFeatureName.EVENT) && features.includes(SCFeatureName.TAGGING), [features]);
+    const { preferences, features } = useSCPreferences();
+    const eventsEnabled = useMemo(() => preferences &&
+        features &&
+        features.includes(SCFeatureName.TAGGING) &&
+        SCPreferences.CONFIGURATIONS_EVENTS_ENABLED in preferences &&
+        preferences[SCPreferences.CONFIGURATIONS_EVENTS_ENABLED].value, [preferences, features]);
     // REFS
     const updatesSubscription = useRef(null);
     /**

package/lib/esm/components/NavigationToolbar/NavigationToolbar.js

@@ -108,12 +108,21 @@ export default function NavigationToolbar(inProps) {
         return _preferences;
     }, [scPreferences.preferences]);
     const privateMessagingEnabled = useMemo(() => scPreferences.features.includes(SCFeatureName.PRIVATE_MESSAGING), [scPreferences.features]);
-    const groupsEnabled = useMemo(() => scPreferences.features && scPreferences.features.includes(SCFeatureName.GROUPING) && scPreferences.features.includes(SCFeatureName.TAGGING), [scPreferences.features]);
-    const eventsEnabled = useMemo(() => scPreferences.features && scPreferences.features.includes(SCFeatureName.EVENT) && scPreferences.features.includes(SCFeatureName.TAGGING), [scPreferences.features]);
+    const groupsEnabled = useMemo(() => scPreferences.preferences &&
+        scPreferences.features &&
+        scPreferences.features.includes(SCFeatureName.TAGGING) &&
+        scPreferences.features.includes(SCFeatureName.GROUPING) &&
+        SCPreferences.CONFIGURATIONS_GROUPS_ENABLED in scPreferences.preferences &&
+        scPreferences.preferences[SCPreferences.CONFIGURATIONS_GROUPS_ENABLED].value, [scPreferences.preferences, scPreferences.features]);
+    const eventsEnabled = useMemo(() => scPreferences.preferences &&
+        scPreferences.features &&
+        scPreferences.features.includes(SCFeatureName.TAGGING) &&
+        SCPreferences.CONFIGURATIONS_EVENTS_ENABLED in scPreferences.preferences &&
+        scPreferences.preferences[SCPreferences.CONFIGURATIONS_EVENTS_ENABLED].value, [scPreferences.preferences, scPreferences.features]);
     const showComposer = useMemo(() => {
         return (!disableComposer &&
             (!scPreferences.preferences[SCPreferences.CONFIGURATIONS_POST_ONLY_STAFF_ENABLED].value || UserUtils.isStaff(scUserContext.user)));
-    }, [scPreferences, disableComposer, scUserContext.user]);
+    }, [preferences, disableComposer, scUserContext.user]);
     // STATE
     const [anchorNotification, setAnchorNotification] = React.useState(null);
     // HANDLERS

package/lib/esm/components/NavigationToolbarMobile/NavigationToolbarMobile.js

@@ -78,8 +78,17 @@ export default function NavigationToolbarMobile(inProps) {
     // STATE
     const [searchOpen, setSearchOpen] = useState(false);
     // MEMO
-    const groupsEnabled = useMemo(() => features && features.includes(SCFeatureName.GROUPING) && features.includes(SCFeatureName.TAGGING), [features]);
-    const eventsEnabled = useMemo(() => features && features.includes(SCFeatureName.EVENT) && features.includes(SCFeatureName.TAGGING), [features]);
+    const groupsEnabled = useMemo(() => preferences &&
+        features &&
+        features.includes(SCFeatureName.TAGGING) &&
+        features.includes(SCFeatureName.GROUPING) &&
+        SCPreferences.CONFIGURATIONS_GROUPS_ENABLED in preferences &&
+        preferences[SCPreferences.CONFIGURATIONS_GROUPS_ENABLED].value, [preferences, features]);
+    const eventsEnabled = useMemo(() => preferences &&
+        features &&
+        features.includes(SCFeatureName.TAGGING) &&
+        SCPreferences.CONFIGURATIONS_EVENTS_ENABLED in preferences &&
+        preferences[SCPreferences.CONFIGURATIONS_EVENTS_ENABLED].value, [preferences, features]);
     const exploreStreamEnabled = preferences[SCPreferences.CONFIGURATIONS_EXPLORE_STREAM_ENABLED].value;
     const postOnlyStaffEnabled = preferences[SCPreferences.CONFIGURATIONS_POST_ONLY_STAFF_ENABLED].value;
     const contentAvailable = preferences[SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY].value;

package/lib/esm/components/Notification/Event/Event.js

@@ -51,6 +51,8 @@ export default function EventNotification(props) {
             }), { onClick: notificationObject.user.deleted ? () => setOpenAlert(true) : null }, { children: _jsx(UserAvatar, Object.assign({ hide: !notificationObject.user.community_badge, smaller: true }, { children: _jsx(Avatar, { alt: notificationObject.user.username, variant: "circular", src: notificationObject.user.avatar, classes: { root: classes.avatar } }) })) })), primary: _jsxs(Box, { children: [_jsx(Link, Object.assign({}, (!notificationObject.user.deleted && {
                         to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, notificationObject.user)
                     }), { onClick: notificationObject.user.deleted ? () => setOpenAlert(true) : null, className: classes.username }, { children: notificationObject.user.username })), ' ', _jsx(FormattedMessage, { id: `ui.notification.event.${notificationObject.type}`, defaultMessage: `ui.notification.event.${notificationObject.type}`, values: {
+                            // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                            // @ts-ignore
                             icon: (...chunks) => _jsx(Icon, { children: chunks }),
                             event: notificationObject.event.name,
                             link: (...chunks) => _jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, notificationObject.event) }, { children: chunks }))
@@ -69,6 +71,8 @@ export default function EventNotification(props) {
                 }), { onClick: notificationObject.user.deleted ? () => setOpenAlert(true) : null }, { children: _jsx(UserAvatar, Object.assign({ hide: !notificationObject.user.community_badge, smaller: true }, { children: _jsx(Avatar, { className: classes.avatar, alt: notificationObject.user.username, variant: "circular", src: notificationObject.user.avatar }) })) })), primary: _jsxs(_Fragment, { children: [_jsx(Link, Object.assign({}, (!notificationObject.user.deleted && {
                             to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, notificationObject.user)
                         }), { onClick: notificationObject.user.deleted ? () => setOpenAlert(true) : null, className: classes.username }, { children: notificationObject.user.username })), ' ', _jsx(FormattedMessage, { id: `ui.notification.${notificationObject.type}`, defaultMessage: `ui.notification.${notificationObject.type}`, values: {
+                                // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                                // @ts-ignore
                                 icon: (...chunks) => _jsx(Icon, { children: chunks }),
                                 event: notificationObject.event.name,
                                 link: (...chunks) => _jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, notificationObject.event) }, { children: chunks }))

package/lib/esm/components/OnBoardingWidget/OnBoardingWidget.d.ts

@@ -1,5 +1,5 @@
 import { StartStepParams } from '@selfcommunity/api-services';
-import { SCFeedObjectType } from '@selfcommunity/types';
+import { SCFeedObjectType, SCOnBoardingStepType } from '@selfcommunity/types';
 import { VirtualScrollerItemProps } from '../../types/virtualScroller';
 export interface OnBoardingWidgetProps extends VirtualScrollerItemProps {
     /**
@@ -18,6 +18,15 @@ export interface OnBoardingWidgetProps extends VirtualScrollerItemProps {
      * @default null
      */
     onGeneratedContent?: (feedObjs: SCFeedObjectType[]) => void;
+    /**
+     * Force widget expanded
+     * @default false
+     */
+    forceExpanded?: boolean;
+    /**
+     * The initial step to display
+     */
+    initialStep?: SCOnBoardingStepType;
 }
 declare const OnBoardingWidget: (inProps: OnBoardingWidgetProps) => JSX.Element;
 export default OnBoardingWidget;

package/lib/esm/components/OnBoardingWidget/OnBoardingWidget.js

@@ -8,7 +8,7 @@ import classNames from 'classnames';
 import { useThemeProps } from '@mui/system';
 import Category from './Steps/Category';
 import { PREFIX } from './constants';
-import { getTheme, usePreviousValue, UserUtils, useSCContext, useSCPreferences, useSCTheme, useSCUser } from '@selfcommunity/react-core';
+import { getTheme, usePreviousValue, UserUtils, useSCContext, useSCFetchCategories, useSCPreferences, useSCTheme, useSCUser } from '@selfcommunity/react-core';
 import Appearance from './Steps/Appearance';
 import Profile from './Steps/Profile';
 import Invite from './Steps/Invite';
@@ -17,13 +17,13 @@ import HiddenPlaceholder from '../../shared/HiddenPlaceholder';
 import Widget from '../Widget';
 import Content from './Steps/Content';
 import { SCOPE_SC_UI } from '../../constants/Errors';
-import { OnBoardingService, PreferenceService } from '@selfcommunity/api-services';
+import { Endpoints, http, OnBoardingService, PreferenceService } from '@selfcommunity/api-services';
 import { Logger } from '@selfcommunity/utils';
 import { SCOnBoardingStepStatusType, SCOnBoardingStepType } from '@selfcommunity/types';
 import OnBoardingWidgetSkeleton from './Skeleton';
 import { closeSnackbar, useSnackbar } from 'notistack';
-import { CONSOLE_PROD, CONSOLE_STAGE } from '../PlatformWidget/constants';
 import HeaderPlaceholder from '../../assets/onBoarding/header';
+import BaseDialog from '../../shared/BaseDialog';
 const classes = {
     root: `${PREFIX}-root`,
     content: `${PREFIX}-content`,
@@ -50,24 +50,25 @@ const OnBoardingWidget = (inProps) => {
         props: inProps,
         name: PREFIX
     });
-    const { className, GenerateContentsParams = {}, onGeneratedContent = null, onHeightChange } = props, rest = __rest(props, ["className", "GenerateContentsParams", "onGeneratedContent", "onHeightChange"]);
+    const { className, GenerateContentsParams = {}, onGeneratedContent = null, onHeightChange, onStateChange, forceExpanded = false, initialStep } = props, rest = __rest(props, ["className", "GenerateContentsParams", "onGeneratedContent", "onHeightChange", "onStateChange", "forceExpanded", "initialStep"]);
     // STATE
-    const [isLoading, setIsLoading] = useState(true);
+    const [loading, setLoading] = useState(true);
     const [initialized, setInitialized] = useState(false);
     const [steps, setSteps] = useState([]);
     const nextStep = useMemo(() => {
-        const step = steps === null || steps === void 0 ? void 0 : steps.find((step) => step.status === 'in_progress' || step.status === 'not_started');
+        const step = steps === null || steps === void 0 ? void 0 : steps.find((step) => (initialStep ? step.step === initialStep : step.status === 'in_progress' || step.status === 'not_started'));
         return step || (steps === null || steps === void 0 ? void 0 : steps[0]);
     }, [steps]);
     const allStepsDone = useMemo(() => {
         return steps === null || steps === void 0 ? void 0 : steps.every((step) => step.status === SCOnBoardingStepStatusType.COMPLETED);
     }, [steps]);
-    const [expanded, setExpanded] = useState(!allStepsDone);
+    const [expanded, setExpanded] = useState(!allStepsDone || forceExpanded);
     const [_step, setStep] = useState(nextStep);
     const currentContentsStep = steps === null || steps === void 0 ? void 0 : steps.find((s) => s.step === SCOnBoardingStepType.CONTENTS);
     const prevContentsStep = usePreviousValue(currentContentsStep);
     const currentCategoriesStep = steps === null || steps === void 0 ? void 0 : steps.find((s) => s.step === SCOnBoardingStepType.CATEGORIES);
     const prevCategoriesStep = usePreviousValue(currentCategoriesStep);
+    const [showCategoriesModal, setShowCategoriesModal] = useState(false);
     // CONTEXT
     const scUserContext = useSCUser();
     const isAdmin = useMemo(() => UserUtils.isCommunityCreator(scUserContext.user), [scUserContext.user]);
@@ -75,12 +76,21 @@ const OnBoardingWidget = (inProps) => {
     const scPreferencesContext = useSCPreferences();
     const scThemeContext = useSCTheme();
     const { enqueueSnackbar } = useSnackbar();
-    const isStage = scContext.settings.portal.includes('stage');
     const [isGenerating, setIsGenerating] = useState(false);
     // HOOKS
     const theme = useTheme();
     const isMobile = useMediaQuery(theme.breakpoints.down('md'));
+    const { categories, isLoading } = useSCFetchCategories();
     // HANDLERS
+    /**
+     * Notify changes to Feed if the Widget is contained
+     */
+    const notifyLayoutChanges = useMemo(() => (state) => {
+        if (onStateChange && state) {
+            onStateChange(state);
+        }
+        onHeightChange && onHeightChange();
+    }, [onStateChange, onHeightChange]);
     const completeStep = (s) => __awaiter(void 0, void 0, void 0, function* () {
         if (s.status !== SCOnBoardingStepStatusType.COMPLETED) {
             yield OnBoardingService.completeAStep(s.id)
@@ -98,10 +108,30 @@ const OnBoardingWidget = (inProps) => {
         }
         s.step === SCOnBoardingStepType.APPEARANCE && handlePreferencesUpdate();
     });
+    /**
+     * Fetches platform url
+     */
+    function fetchPlatform(query) {
+        http
+            .request({
+            url: Endpoints.Platform.url(),
+            method: Endpoints.Platform.method,
+            params: {
+                next: query
+            }
+        })
+            .then((res) => {
+            const platformUrl = res.data.platform_url;
+            window.open(platformUrl, '_blank').focus();
+        })
+            .catch((error) => {
+            console.log(error);
+        });
+    }
     const showSuccessAlert = (step) => {
         setIsGenerating(false);
         enqueueSnackbar(_jsx(FormattedMessage, { id: `ui.onBoardingWidget.step.${step.step}.success`, defaultMessage: `ui.onBoardingWidget.step.${step.step}.success` }), {
-            action: (snackbarId) => (_jsxs(_Fragment, { children: [step.step === SCOnBoardingStepType.CATEGORIES && (_jsx(Button, Object.assign({ sx: { textTransform: 'uppercase', color: 'white' }, size: "small", variant: "text", href: isStage ? CONSOLE_STAGE : CONSOLE_PROD, target: "_blank" }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.categories.success.link", defaultMessage: "ui.onBoardingWidget.step.categories.success.link" }) }))), _jsx(IconButton, Object.assign({ sx: { color: 'white' }, onClick: () => closeSnackbar(snackbarId) }, { children: _jsx(Icon, { children: "close" }) }))] })),
+            action: (snackbarId) => (_jsxs(_Fragment, { children: [step.step === SCOnBoardingStepType.CATEGORIES && (_jsx(Button, Object.assign({ sx: { textTransform: 'uppercase', color: 'white' }, size: "small", variant: "text", onClick: () => fetchPlatform('/contents/interests/') }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.categories.success.link", defaultMessage: "ui.onBoardingWidget.step.categories.success.link" }) }))), _jsx(IconButton, Object.assign({ sx: { color: 'white' }, onClick: () => closeSnackbar(snackbarId) }, { children: _jsx(Icon, { children: "close" }) }))] })),
             variant: 'success',
             autoHideDuration: 7000
         });
@@ -112,35 +142,41 @@ const OnBoardingWidget = (inProps) => {
             const contentStep = res.results.find((step) => step.step === SCOnBoardingStepType.CONTENTS);
             setIsGenerating(res.results.some((step) => step.status === 'in_progress'));
             setSteps(res.results);
-            setIsLoading(false);
+            setLoading(false);
             if (contentStep.status === SCOnBoardingStepStatusType.IN_PROGRESS && contentStep.results.length !== 0 && onGeneratedContent) {
                 onGeneratedContent(contentStep.results);
             }
         })
             .catch((error) => {
             Logger.error(SCOPE_SC_UI, error);
-            setIsLoading(false);
+            setLoading(false);
         });
     });
     const handleChange = (newStep) => {
         setStep(newStep);
     };
     const handleExpand = () => {
-        setExpanded(!expanded);
-        onHeightChange && onHeightChange();
+        const _expanded = !expanded;
+        setExpanded(_expanded);
+        notifyLayoutChanges({ forceExpanded: _expanded });
     };
     const generateContent = (stepId) => __awaiter(void 0, void 0, void 0, function* () {
-        yield OnBoardingService.startAStep(stepId, GenerateContentsParams)
-            .then(() => {
-            setIsGenerating(true);
-        })
-            .catch((error) => {
-            Logger.error(SCOPE_SC_UI, error);
-            enqueueSnackbar(_jsx(FormattedMessage, { id: "ui.common.error.action", defaultMessage: "ui.common.error.action" }), {
-                variant: 'error',
-                autoHideDuration: 3000
+        if (!isLoading && !categories.length) {
+            setShowCategoriesModal(true);
+        }
+        else {
+            yield OnBoardingService.startAStep(stepId, GenerateContentsParams)
+                .then(() => {
+                setIsGenerating(true);
+            })
+                .catch((error) => {
+                Logger.error(SCOPE_SC_UI, error);
+                enqueueSnackbar(_jsx(FormattedMessage, { id: "ui.common.error.action", defaultMessage: "ui.common.error.action" }), {
+                    variant: 'error',
+                    autoHideDuration: 3000
+                });
             });
-        });
+        }
     });
     const handlePreferencesUpdate = () => {
         PreferenceService.getAllPreferences().then((preferences) => {
@@ -149,10 +185,14 @@ const OnBoardingWidget = (inProps) => {
             scThemeContext.setTheme(getTheme(scContext.settings.theme, prefs));
         });
     };
+    const handleCategoriesClick = () => {
+        fetchPlatform('/contents/interests/');
+        setShowCategoriesModal(false);
+    };
     // EFFECTS
     useEffect(() => {
         if (prevContentsStep &&
-            prevCategoriesStep.status === SCOnBoardingStepStatusType.IN_PROGRESS &&
+            prevContentsStep.status === SCOnBoardingStepStatusType.IN_PROGRESS &&
             (currentContentsStep === null || currentContentsStep === void 0 ? void 0 : currentContentsStep.status) === SCOnBoardingStepStatusType.COMPLETED) {
             showSuccessAlert(currentContentsStep);
         }
@@ -168,11 +208,13 @@ const OnBoardingWidget = (inProps) => {
         if (!initialized && nextStep) {
             setStep(nextStep);
             setInitialized(true);
+            notifyLayoutChanges({ forceExpanded: expanded });
         }
     }, [initialized, nextStep]);
     useEffect(() => {
-        setExpanded(!allStepsDone);
-        onHeightChange && onHeightChange();
+        const _expanded = !allStepsDone;
+        setExpanded(_expanded);
+        notifyLayoutChanges({ forceExpanded: _expanded });
     }, [allStepsDone]);
     useEffect(() => {
         if (isAdmin) {
@@ -232,7 +274,8 @@ const OnBoardingWidget = (inProps) => {
                                     b: (chunks) => _jsx("strong", { children: chunks }),
                                     // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
                                     // @ts-ignore
-                                    icon: (...chunks) => (_jsx(Icon, Object.assign({ color: "secondary", fontSize: "medium" }, { children: chunks })))
-                                } }) }))) }) })), _jsx(AccordionDetails, { children: _jsx(Widget, Object.assign({ className: classes.content, elevation: 0 }, { children: isLoading ? (_jsx(OnBoardingWidgetSkeleton, {})) : (_jsxs(CardContent, { children: [_jsx(List, Object.assign({ className: isMobile ? classes.stepsMobile : classes.steps }, { children: steps === null || steps === void 0 ? void 0 : steps.map((step) => (_jsx(ListItem, { children: isMobile ? (_jsx(Chip, { size: "small", label: _jsxs(_Fragment, { children: [_jsx(FormattedMessage, { id: `ui.onBoardingWidget.${step.step}`, defaultMessage: `ui.onBoardingWidget.${step.step}` }), ' ', step.status === SCOnBoardingStepStatusType.COMPLETED && (_jsx(Icon, Object.assign({ color: (step === null || step === void 0 ? void 0 : step.status) === SCOnBoardingStepStatusType.COMPLETED && (step === null || step === void 0 ? void 0 : step.step) !== (_step === null || _step === void 0 ? void 0 : _step.step) ? 'success' : 'inherit' }, { children: "check" })))] }), onClick: () => handleChange(step), variant: step.step === (_step === null || _step === void 0 ? void 0 : _step.step) ? 'filled' : 'outlined', color: step.status === SCOnBoardingStepStatusType.COMPLETED ? 'success' : 'default' })) : (_jsxs(ListItemButton, Object.assign({ onClick: () => handleChange(step), selected: (step === null || step === void 0 ? void 0 : step.step) === (_step === null || _step === void 0 ? void 0 : _step.step) }, { children: [_jsx(ListItemIcon, { children: _jsx(Checkbox, { edge: "start", checked: step.status === SCOnBoardingStepStatusType.COMPLETED, tabIndex: -1, disableRipple: true, inputProps: { 'aria-labelledby': step.step }, size: 'small' }) }), _jsx(ListItemText, { primary: _jsx(FormattedMessage, { id: `ui.onBoardingWidget.${step.step}`, defaultMessage: `ui.onBoardingWidget.${step.step}` }) })] }))) }, step.id))) })), _jsx(Box, Object.assign({ className: classes.stepContent }, { children: _jsx(Fade, Object.assign({ in: true, timeout: 2400 }, { children: _jsx(Box, { children: getStepContent() }) })) }))] })) })) })] })) })));
+                                    // eslint-disable-next-line prettier/prettier
+                                    icon: (...chunks) => _jsx(Icon, Object.assign({ color: "secondary", fontSize: "medium" }, { children: chunks }))
+                                } }) }))) }) })), _jsx(AccordionDetails, { children: _jsx(Widget, Object.assign({ className: classes.content, elevation: 0 }, { children: loading ? (_jsx(OnBoardingWidgetSkeleton, {})) : (_jsxs(CardContent, { children: [_jsx(List, Object.assign({ className: isMobile ? classes.stepsMobile : classes.steps }, { children: steps === null || steps === void 0 ? void 0 : steps.map((step) => (_jsx(ListItem, { children: isMobile ? (_jsx(Chip, { size: "small", label: _jsxs(_Fragment, { children: [_jsx(FormattedMessage, { id: `ui.onBoardingWidget.${step.step}`, defaultMessage: `ui.onBoardingWidget.${step.step}` }), ' ', step.status === SCOnBoardingStepStatusType.COMPLETED && (_jsx(Icon, Object.assign({ color: (step === null || step === void 0 ? void 0 : step.status) === SCOnBoardingStepStatusType.COMPLETED && (step === null || step === void 0 ? void 0 : step.step) !== (_step === null || _step === void 0 ? void 0 : _step.step) ? 'success' : 'inherit' }, { children: "check" })))] }), onClick: () => handleChange(step), variant: step.step === (_step === null || _step === void 0 ? void 0 : _step.step) ? 'filled' : 'outlined', color: step.status === SCOnBoardingStepStatusType.COMPLETED ? 'success' : 'default' })) : (_jsxs(ListItemButton, Object.assign({ onClick: () => handleChange(step), selected: (step === null || step === void 0 ? void 0 : step.step) === (_step === null || _step === void 0 ? void 0 : _step.step) }, { children: [_jsx(ListItemIcon, { children: _jsx(Checkbox, { edge: "start", checked: step.status === SCOnBoardingStepStatusType.COMPLETED, tabIndex: -1, disableRipple: true, inputProps: { 'aria-labelledby': step.step }, size: 'small' }) }), _jsx(ListItemText, { primary: _jsx(FormattedMessage, { id: `ui.onBoardingWidget.${step.step}`, defaultMessage: `ui.onBoardingWidget.${step.step}` }) })] }))) }, step.id))) })), _jsxs(Box, Object.assign({ className: classes.stepContent }, { children: [_jsx(Fade, Object.assign({ in: true, timeout: 2400 }, { children: _jsx(Box, { children: getStepContent() }) })), showCategoriesModal && (_jsx(BaseDialog, Object.assign({ title: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.ai.no.categories", defaultMessage: "ui.onBoardingWidget.ai.no.categories" }), DialogContentProps: { dividers: false }, open: showCategoriesModal, onClose: () => setShowCategoriesModal(false), actions: _jsx(Button, Object.assign({ color: "secondary", onClick: () => setShowCategoriesModal(false) }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.ai.no.categories.cancel", defaultMessage: "ui.onBoardingWidget.ai.no.categories.cancel" }) })) }, { children: _jsx(Button, Object.assign({ color: "primary", onClick: handleCategoriesClick, startIcon: _jsx(Icon, Object.assign({ fontSize: "small" }, { children: "edit" })) }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.ai.no.categories.link", defaultMessage: "ui.onBoardingWidget.ai.no.categories.link" }) })) })))] }))] })) })) })] })) })));
 };
 export default OnBoardingWidget;