@selfcommunity/react-ui 0.8.0-embeds.17 → 0.8.1-alpha.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (79) hide show
  1. package/lib/cjs/components/Categories/Categories.js +22 -0
  2. package/lib/cjs/components/CategoriesPopularWidget/CategoriesPopularWidget.js +21 -0
  3. package/lib/cjs/components/CategoriesSuggestionWidget/CategoriesSuggestionWidget.js +21 -0
  4. package/lib/cjs/components/Composer/TypeSwitchButtonGroup/TypeSwitchButtonGroup.js +1 -1
  5. package/lib/cjs/components/Events/Events.js +15 -5
  6. package/lib/cjs/components/Events/LocationEventsFilter.d.ts +14 -0
  7. package/lib/cjs/components/Events/LocationEventsFilter.js +45 -0
  8. package/lib/cjs/components/Events/PastEventsFilter.js +1 -2
  9. package/lib/cjs/components/Feed/Feed.js +3 -2
  10. package/lib/cjs/components/GroupActionsMenu/index.d.ts +57 -0
  11. package/lib/cjs/components/GroupActionsMenu/index.js +157 -0
  12. package/lib/cjs/components/GroupHeader/GroupHeader.d.ts +6 -0
  13. package/lib/cjs/components/GroupHeader/GroupHeader.js +8 -4
  14. package/lib/cjs/components/Groups/Groups.js +26 -0
  15. package/lib/cjs/components/NavigationMenuIconButton/NavigationMenuDrawer.d.ts +31 -0
  16. package/lib/cjs/components/NavigationMenuIconButton/NavigationMenuDrawer.js +35 -0
  17. package/lib/cjs/components/NavigationMenuIconButton/NavigationMenuIconButton.d.ts +9 -20
  18. package/lib/cjs/components/NavigationMenuIconButton/NavigationMenuIconButton.js +4 -20
  19. package/lib/cjs/components/NavigationMenuIconButton/index.d.ts +2 -1
  20. package/lib/cjs/components/NavigationMenuIconButton/index.js +3 -1
  21. package/lib/cjs/components/NavigationToolbar/NavigationToolbar.d.ts +5 -0
  22. package/lib/cjs/components/NavigationToolbar/NavigationToolbar.js +2 -2
  23. package/lib/cjs/components/OnBoardingWidget/OnBoardingWidget.d.ts +5 -1
  24. package/lib/cjs/components/OnBoardingWidget/OnBoardingWidget.js +55 -7
  25. package/lib/cjs/components/OnBoardingWidget/Steps/Appearance/Appearance.js +8 -4
  26. package/lib/cjs/components/OnBoardingWidget/Steps/Invite/Invite.js +56 -12
  27. package/lib/cjs/components/PlatformWidget/constants.d.ts +0 -4
  28. package/lib/cjs/components/PlatformWidget/constants.js +1 -5
  29. package/lib/cjs/constants/GroupActionsMenu.d.ts +5 -0
  30. package/lib/cjs/constants/GroupActionsMenu.js +8 -0
  31. package/lib/cjs/constants/PubSub.d.ts +8 -1
  32. package/lib/cjs/constants/PubSub.js +9 -1
  33. package/lib/cjs/index.d.ts +4 -2
  34. package/lib/cjs/index.js +11 -5
  35. package/lib/cjs/shared/EventInfoDetails/index.js +3 -3
  36. package/lib/cjs/shared/InfiniteScroll/index.js +4 -4
  37. package/lib/cjs/shared/Media/Link/DisplayComponent.js +5 -5
  38. package/lib/esm/components/Categories/Categories.js +23 -1
  39. package/lib/esm/components/CategoriesPopularWidget/CategoriesPopularWidget.js +22 -1
  40. package/lib/esm/components/CategoriesSuggestionWidget/CategoriesSuggestionWidget.js +22 -1
  41. package/lib/esm/components/Composer/TypeSwitchButtonGroup/TypeSwitchButtonGroup.js +2 -2
  42. package/lib/esm/components/Events/Events.js +16 -6
  43. package/lib/esm/components/Events/LocationEventsFilter.d.ts +14 -0
  44. package/lib/esm/components/Events/LocationEventsFilter.js +41 -0
  45. package/lib/esm/components/Events/PastEventsFilter.js +1 -2
  46. package/lib/esm/components/Feed/Feed.js +4 -3
  47. package/lib/esm/components/GroupActionsMenu/index.d.ts +57 -0
  48. package/lib/esm/components/GroupActionsMenu/index.js +154 -0
  49. package/lib/esm/components/GroupHeader/GroupHeader.d.ts +6 -0
  50. package/lib/esm/components/GroupHeader/GroupHeader.js +9 -5
  51. package/lib/esm/components/Groups/Groups.js +27 -1
  52. package/lib/esm/components/NavigationMenuIconButton/NavigationMenuDrawer.d.ts +31 -0
  53. package/lib/esm/components/NavigationMenuIconButton/NavigationMenuDrawer.js +32 -0
  54. package/lib/esm/components/NavigationMenuIconButton/NavigationMenuIconButton.d.ts +9 -20
  55. package/lib/esm/components/NavigationMenuIconButton/NavigationMenuIconButton.js +6 -22
  56. package/lib/esm/components/NavigationMenuIconButton/index.d.ts +2 -1
  57. package/lib/esm/components/NavigationMenuIconButton/index.js +2 -1
  58. package/lib/esm/components/NavigationToolbar/NavigationToolbar.d.ts +5 -0
  59. package/lib/esm/components/NavigationToolbar/NavigationToolbar.js +2 -2
  60. package/lib/esm/components/OnBoardingWidget/OnBoardingWidget.d.ts +5 -1
  61. package/lib/esm/components/OnBoardingWidget/OnBoardingWidget.js +57 -9
  62. package/lib/esm/components/OnBoardingWidget/Steps/Appearance/Appearance.js +9 -5
  63. package/lib/esm/components/OnBoardingWidget/Steps/Invite/Invite.js +59 -14
  64. package/lib/esm/components/PlatformWidget/constants.d.ts +0 -4
  65. package/lib/esm/components/PlatformWidget/constants.js +0 -4
  66. package/lib/esm/constants/GroupActionsMenu.d.ts +5 -0
  67. package/lib/esm/constants/GroupActionsMenu.js +5 -0
  68. package/lib/esm/constants/PubSub.d.ts +8 -1
  69. package/lib/esm/constants/PubSub.js +8 -0
  70. package/lib/esm/index.d.ts +4 -2
  71. package/lib/esm/index.js +5 -3
  72. package/lib/esm/shared/EventInfoDetails/index.js +3 -3
  73. package/lib/esm/shared/InfiniteScroll/index.js +4 -4
  74. package/lib/esm/shared/Media/Link/DisplayComponent.js +5 -5
  75. package/lib/umd/148.js +2 -0
  76. package/lib/umd/react-ui.js +1 -1
  77. package/package.json +9 -9
  78. package/lib/umd/99.js +0 -2
  79. /package/lib/umd/{99.js.LICENSE.txt → 148.js.LICENSE.txt} +0 -0
@@ -1,28 +1,21 @@
1
- import React from 'react';
2
- import { DrawerProps, IconButtonProps } from '@mui/material';
1
+ import { IconButtonProps } from '@mui/material';
2
+ import { NavigationMenuDrawerProps } from './NavigationMenuDrawer';
3
3
  export interface NavigationMenuIconButtonProps extends IconButtonProps {
4
4
  /**
5
- * Props to spread to drawer element
6
- * @default {anchor: 'left'}
5
+ * Prop to show/hide the default drawer component
6
+ * @default true
7
7
  */
8
- DrawerProps?: DrawerProps;
8
+ showDrawer?: boolean;
9
9
  /**
10
- * Custom Drawer header content
10
+ * Callback triggered on menu click
11
11
  * @default null
12
12
  */
13
- drawerHeaderContent?: React.ReactNode;
13
+ onMenuIconClick?: () => void;
14
14
  /**
15
- * Custom Drawer content
16
- * @default null
17
- */
18
- drawerContent?: React.ReactNode;
19
- /**
20
- * Props to spread to ScrollContainer component
21
- * This lib use 'react-custom-scrollbars' component to perform scrollbars
22
- * For more info: https://github.com/malte-wessel/react-custom-scrollbars/blob/master/docs/API.md
15
+ * Props to spread to default drawer root
23
16
  * @default {}
24
17
  */
25
- ScrollContainerProps?: Record<string, any>;
18
+ DrawerProps?: NavigationMenuDrawerProps;
26
19
  }
27
20
  /**
28
21
  * > API documentation for the Community-JS Navigation Menu Icon Button component. Learn about the available props and the CSS API.
@@ -43,10 +36,6 @@ export interface NavigationMenuIconButtonProps extends IconButtonProps {
43
36
  |Rule Name|Global class|Description|
44
37
  |---|---|---|
45
38
  |root|.SCNavigationMenuIconButton-root|Styles applied to the root element.|
46
- |drawerRoot|.SCNavigationMenuIconButton-drawer-root|Styles applied to the drawer root element.|
47
- |drawerHeader|.SCNavigationMenuIconButton-drawer-header|Styles applied to the drawer header.|
48
- |drawerHeaderAction|.SCNavigationMenuIconButton-drawer-header-action|Styles applied to the drawer header action element.|
49
- |drawerContent|.SCNavigationMenuIconButton-drawer-content|Styles applied to the drawer content.|
50
39
 
51
40
  * @param inProps
52
41
  */
@@ -1,33 +1,21 @@
1
1
  import { __rest } from "tslib";
2
- import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
2
+ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
3
3
  import { useCallback, useState } from 'react';
4
4
  import { styled } from '@mui/material/styles';
5
- import { Box, Divider, Drawer, Icon, IconButton, List } from '@mui/material';
5
+ import { Icon, IconButton } from '@mui/material';
6
6
  import classNames from 'classnames';
7
7
  import { useThemeProps } from '@mui/system';
8
- import ScrollContainer from '../../shared/ScrollContainer';
9
- import DefaultDrawerContent from './DefaultDrawerContent';
10
- import DefaultHeaderContent from './DefaultHeaderContent';
11
8
  import { SCPreferences, useSCPreferences, useSCUser } from '@selfcommunity/react-core';
9
+ import NavigationMenuDrawer from './NavigationMenuDrawer';
12
10
  const PREFIX = 'SCNavigationMenuIconButton';
13
11
  const classes = {
14
- root: `${PREFIX}-root`,
15
- logo: `${PREFIX}-logo`,
16
- drawerRoot: `${PREFIX}-drawer-root`,
17
- drawerHeader: `${PREFIX}-drawer-header`,
18
- drawerHeaderAction: `${PREFIX}-drawer-header-action`,
19
- drawerContent: `${PREFIX}-drawer-content`
12
+ root: `${PREFIX}-root`
20
13
  };
21
14
  const Root = styled(IconButton, {
22
15
  name: PREFIX,
23
16
  slot: 'Root',
24
17
  overridesResolver: (props, styles) => styles.root
25
18
  })(({ theme }) => ({}));
26
- const DrawerRoot = styled(Drawer, {
27
- name: PREFIX,
28
- slot: 'Root',
29
- overridesResolver: (props, styles) => styles.drawerRoot
30
- })(({ theme }) => ({}));
31
19
  /**
32
20
  * > API documentation for the Community-JS Navigation Menu Icon Button component. Learn about the available props and the CSS API.
33
21
 
@@ -47,10 +35,6 @@ const DrawerRoot = styled(Drawer, {
47
35
  |Rule Name|Global class|Description|
48
36
  |---|---|---|
49
37
  |root|.SCNavigationMenuIconButton-root|Styles applied to the root element.|
50
- |drawerRoot|.SCNavigationMenuIconButton-drawer-root|Styles applied to the drawer root element.|
51
- |drawerHeader|.SCNavigationMenuIconButton-drawer-header|Styles applied to the drawer header.|
52
- |drawerHeaderAction|.SCNavigationMenuIconButton-drawer-header-action|Styles applied to the drawer header action element.|
53
- |drawerContent|.SCNavigationMenuIconButton-drawer-content|Styles applied to the drawer content.|
54
38
 
55
39
  * @param inProps
56
40
  */
@@ -61,7 +45,7 @@ export default function NavigationMenuIconButton(inProps) {
61
45
  props: inProps,
62
46
  name: PREFIX
63
47
  });
64
- const { className = null, DrawerProps = { anchor: 'left' }, drawerHeaderContent = _jsx(DefaultHeaderContent, {}), drawerContent = _jsx(DefaultDrawerContent, {}), ScrollContainerProps = {} } = props, rest = __rest(props, ["className", "DrawerProps", "drawerHeaderContent", "drawerContent", "ScrollContainerProps"]);
48
+ const { className = null, DrawerProps = {}, onMenuIconClick = null, showDrawer = true } = props, rest = __rest(props, ["className", "DrawerProps", "onMenuIconClick", "showDrawer"]);
65
49
  // STATE
66
50
  const [anchorEl, setAnchorEl] = useState(null);
67
51
  // CONTEXT
@@ -77,5 +61,5 @@ export default function NavigationMenuIconButton(inProps) {
77
61
  if (!preferences[SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY].value && !((_a = scUserContext.user) === null || _a === void 0 ? void 0 : _a.id)) {
78
62
  return null;
79
63
  }
80
- return (_jsxs(_Fragment, { children: [_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { onClick: handleOpen }, { children: _jsx(Icon, { children: "menu" }) })), _jsxs(DrawerRoot, Object.assign({ className: classes.drawerRoot }, DrawerProps, { open: Boolean(anchorEl), onClose: handleClose }, { children: [_jsxs(Box, Object.assign({ className: classes.drawerHeader }, { children: [drawerHeaderContent, _jsx(IconButton, Object.assign({ className: classes.drawerHeaderAction, onClick: handleClose }, { children: _jsx(Icon, { children: "close" }) }))] })), _jsx(Divider, {}), _jsx(ScrollContainer, Object.assign({}, ScrollContainerProps, { children: _jsx(List, Object.assign({ className: classes.drawerContent, onClick: handleClose }, { children: drawerContent })) }))] }))] }));
64
+ return (_jsxs(_Fragment, { children: [_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { onClick: onMenuIconClick !== null && onMenuIconClick !== void 0 ? onMenuIconClick : handleOpen }, { children: _jsx(Icon, { children: "menu" }) })), showDrawer && _jsx(NavigationMenuDrawer, Object.assign({ open: Boolean(anchorEl), onClose: handleClose }, DrawerProps))] }));
81
65
  }
@@ -1,5 +1,6 @@
1
1
  import NavigationMenuIconButton, { NavigationMenuIconButtonProps } from './NavigationMenuIconButton';
2
2
  import DefaultHeaderContent from './DefaultHeaderContent';
3
3
  import DefaultDrawerContent from './DefaultDrawerContent';
4
+ import NavigationMenuDrawer, { NavigationMenuDrawerProps } from './NavigationMenuDrawer';
4
5
  export default NavigationMenuIconButton;
5
- export { NavigationMenuIconButtonProps, DefaultDrawerContent as NavigationMenuContent, DefaultHeaderContent as NavigationMenuHeader };
6
+ export { NavigationMenuIconButtonProps, DefaultDrawerContent as NavigationMenuContent, DefaultHeaderContent as NavigationMenuHeader, NavigationMenuDrawer, NavigationMenuDrawerProps };
@@ -1,5 +1,6 @@
1
1
  import NavigationMenuIconButton from './NavigationMenuIconButton';
2
2
  import DefaultHeaderContent from './DefaultHeaderContent';
3
3
  import DefaultDrawerContent from './DefaultDrawerContent';
4
+ import NavigationMenuDrawer from './NavigationMenuDrawer';
4
5
  export default NavigationMenuIconButton;
5
- export { DefaultDrawerContent as NavigationMenuContent, DefaultHeaderContent as NavigationMenuHeader };
6
+ export { DefaultDrawerContent as NavigationMenuContent, DefaultHeaderContent as NavigationMenuHeader, NavigationMenuDrawer };
@@ -34,6 +34,11 @@ export interface NavigationToolbarProps extends ToolbarProps {
34
34
  * Component for Navigation Menu Icon Button
35
35
  */
36
36
  NavigationMenuIconButtonComponent?: (inProps: NavigationMenuIconButtonProps) => JSX.Element;
37
+ /**
38
+ * Props to spread to the NavigationMenuIconButtonComponent
39
+ * @default {}
40
+ */
41
+ NavigationMenuIconButtonComponentProps?: NavigationMenuIconButtonProps;
37
42
  /**
38
43
  * Component for Navigation Settings
39
44
  */
@@ -96,7 +96,7 @@ export default function NavigationToolbar(inProps) {
96
96
  props: inProps,
97
97
  name: PREFIX
98
98
  });
99
- const { value = '', className = '', disableSearch = false, disableComposer = false, SearchAutocompleteProps = {}, startActions = null, endActions = null, NavigationSettingsIconButtonComponent = NavigationSettingsIconButton, NavigationMenuIconButtonComponent = NavigationMenuIconButton, children = null, NotificationMenuProps = {}, ComposerIconButtonProps = {}, onOpenNotificationMenu, onCloseNotificationMenu } = props, rest = __rest(props, ["value", "className", "disableSearch", "disableComposer", "SearchAutocompleteProps", "startActions", "endActions", "NavigationSettingsIconButtonComponent", "NavigationMenuIconButtonComponent", "children", "NotificationMenuProps", "ComposerIconButtonProps", "onOpenNotificationMenu", "onCloseNotificationMenu"]);
99
+ const { value = '', className = '', disableSearch = false, disableComposer = false, SearchAutocompleteProps = {}, startActions = null, endActions = null, NavigationSettingsIconButtonComponent = NavigationSettingsIconButton, NavigationMenuIconButtonComponentProps = {}, NavigationMenuIconButtonComponent = NavigationMenuIconButton, children = null, NotificationMenuProps = {}, ComposerIconButtonProps = {}, onOpenNotificationMenu, onCloseNotificationMenu } = props, rest = __rest(props, ["value", "className", "disableSearch", "disableComposer", "SearchAutocompleteProps", "startActions", "endActions", "NavigationSettingsIconButtonComponent", "NavigationMenuIconButtonComponentProps", "NavigationMenuIconButtonComponent", "children", "NotificationMenuProps", "ComposerIconButtonProps", "onOpenNotificationMenu", "onCloseNotificationMenu"]);
100
100
  // CONTEXT
101
101
  const scUserContext = useSCUser();
102
102
  const scRoutingContext = useSCRouting();
@@ -145,7 +145,7 @@ export default function NavigationToolbar(inProps) {
145
145
  }), "aria-label": "Groups", to: scRoutingContext.url(SCRoutes.GROUPS_SUBSCRIBED_ROUTE_NAME, {}), component: Link }, { children: _jsx(Icon, { children: "groups" }) }))), eventsEnabled && (_jsx(IconButton, Object.assign({ className: classNames(classes.events, {
146
146
  [classes.active]: value.startsWith(scRoutingContext.url(SCRoutes.EVENTS_ROUTE_NAME, {}))
147
147
  }), "aria-label": "Groups", to: scRoutingContext.url(SCRoutes.EVENTS_ROUTE_NAME, {}), component: Link }, { children: _jsx(Icon, { children: "CalendarIcon" }) })))] })));
148
- return (_jsxs(Root, Object.assign({ className: classNames(className, classes.root) }, rest, { children: [_jsx(NavigationMenuIconButtonComponent, {}), _jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.HOME_ROUTE_NAME, {}), className: classes.logo }, { children: _jsx("img", { src: preferences[SCPreferences.LOGO_NAVBAR_LOGO], alt: "logo" }) })), !scUserContext.user && !preferences[SCPreferences.ADDONS_CLOSED_COMMUNITY] && (_jsx(Button, Object.assign({ color: "inherit", component: Link, to: scRoutingContext.url(SCRoutes.SIGNUP_ROUTE_NAME, {}), className: classes.register }, { children: _jsx(FormattedMessage, { id: "ui.appBar.navigation.register", defaultMessage: "ui.appBar.navigation.register" }) }))), preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_ENABLED] && (_jsx(_Fragment, { children: preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_TEXT] ? (_jsx(Tooltip, Object.assign({ title: preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_TEXT] }, { children: _jsx(Link, Object.assign({ target: "blank", to: preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_URL], className: classes.customItem }, { children: _jsx("img", { src: preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_IMAGE], alt: "custom_item" }) })) }))) : (_jsx(Link, Object.assign({ target: "blank", to: preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_URL], className: classes.customItem }, { children: _jsx("img", { src: preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_IMAGE], alt: "custom_item" }) }))) })), _children, (preferences[SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY] || scUserContext.user) && !disableSearch ? (_jsx(SearchAutocomplete, Object.assign({ className: classes.search, blurOnSelect: true }, SearchAutocompleteProps))) : (_jsx(Box, { className: classes.search })), startActions, scUserContext.user ? (_jsxs(_Fragment, { children: [showComposer && _jsx(ComposerIconButton, Object.assign({ className: classes.composer }, ComposerIconButtonProps)), _jsx(Tooltip, Object.assign({ title: scUserContext.user.username }, { children: _jsx(IconButton, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, scUserContext.user), "aria-label": "Profile", className: classes.profile }, { children: _jsx(Avatar, { alt: scUserContext.user.username, src: scUserContext.user.avatar }) })) })), _jsxs(_Fragment, { children: [_jsx(IconButton, Object.assign({ className: classNames(classes.notification, {
148
+ return (_jsxs(Root, Object.assign({ className: classNames(className, classes.root) }, rest, { children: [_jsx(NavigationMenuIconButtonComponent, Object.assign({}, NavigationMenuIconButtonComponentProps)), _jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.HOME_ROUTE_NAME, {}), className: classes.logo }, { children: _jsx("img", { src: preferences[SCPreferences.LOGO_NAVBAR_LOGO], alt: "logo" }) })), !scUserContext.user && !preferences[SCPreferences.ADDONS_CLOSED_COMMUNITY] && (_jsx(Button, Object.assign({ color: "inherit", component: Link, to: scRoutingContext.url(SCRoutes.SIGNUP_ROUTE_NAME, {}), className: classes.register }, { children: _jsx(FormattedMessage, { id: "ui.appBar.navigation.register", defaultMessage: "ui.appBar.navigation.register" }) }))), preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_ENABLED] && (_jsx(_Fragment, { children: preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_TEXT] ? (_jsx(Tooltip, Object.assign({ title: preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_TEXT] }, { children: _jsx(Link, Object.assign({ target: "blank", to: preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_URL], className: classes.customItem }, { children: _jsx("img", { src: preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_IMAGE], alt: "custom_item" }) })) }))) : (_jsx(Link, Object.assign({ target: "blank", to: preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_URL], className: classes.customItem }, { children: _jsx("img", { src: preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_IMAGE], alt: "custom_item" }) }))) })), _children, (preferences[SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY] || scUserContext.user) && !disableSearch ? (_jsx(SearchAutocomplete, Object.assign({ className: classes.search, blurOnSelect: true }, SearchAutocompleteProps))) : (_jsx(Box, { className: classes.search })), startActions, scUserContext.user ? (_jsxs(_Fragment, { children: [showComposer && _jsx(ComposerIconButton, Object.assign({ className: classes.composer }, ComposerIconButtonProps)), _jsx(Tooltip, Object.assign({ title: scUserContext.user.username }, { children: _jsx(IconButton, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, scUserContext.user), "aria-label": "Profile", className: classes.profile }, { children: _jsx(Avatar, { alt: scUserContext.user.username, src: scUserContext.user.avatar }) })) })), _jsxs(_Fragment, { children: [_jsx(IconButton, Object.assign({ className: classNames(classes.notification, {
149
149
  [classes.active]: value.startsWith(scRoutingContext.url(SCRoutes.USER_NOTIFICATIONS_ROUTE_NAME, {}))
150
150
  }), "aria-label": "Notification", onClick: handleOpenNotificationMenu }, { children: _jsx(Badge, Object.assign({ badgeContent: scUserContext.user.unseen_notification_banners_counter + scUserContext.user.unseen_interactions_counter, color: "secondary" }, { children: _jsx(Icon, { children: "notifications_active" }) })) })), _jsx(NotificationMenu, Object.assign({ className: classes.notificationsMenu, id: "notification-menu", anchorEl: anchorNotification, open: Boolean(anchorNotification), onClose: handleCloseNotificationMenu, onClick: handleCloseNotificationMenu, transformOrigin: { horizontal: 'right', vertical: 'top' }, anchorOrigin: { horizontal: 'right', vertical: 'bottom' } }, NotificationMenuProps))] }), privateMessagingEnabled && (_jsx(IconButton, Object.assign({ className: classNames(classes.messages, {
151
151
  [classes.active]: value.startsWith(scRoutingContext.url(SCRoutes.USER_PRIVATE_MESSAGES_ROUTE_NAME, {}))
@@ -1,5 +1,5 @@
1
1
  import { StartStepParams } from '@selfcommunity/api-services';
2
- import { SCFeedObjectType } from '@selfcommunity/types';
2
+ import { SCFeedObjectType, SCOnBoardingStepType } from '@selfcommunity/types';
3
3
  import { VirtualScrollerItemProps } from '../../types/virtualScroller';
4
4
  export interface OnBoardingWidgetProps extends VirtualScrollerItemProps {
5
5
  /**
@@ -23,6 +23,10 @@ export interface OnBoardingWidgetProps extends VirtualScrollerItemProps {
23
23
  * @default false
24
24
  */
25
25
  forceExpanded?: boolean;
26
+ /**
27
+ * The initial step to display
28
+ */
29
+ initialStep?: SCOnBoardingStepType;
26
30
  }
27
31
  declare const OnBoardingWidget: (inProps: OnBoardingWidgetProps) => JSX.Element;
28
32
  export default OnBoardingWidget;
@@ -1,6 +1,6 @@
1
1
  import { __awaiter, __rest } from "tslib";
2
2
  import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
3
- import { useEffect, useMemo, useState } from 'react';
3
+ import { useCallback, useEffect, useMemo, useState } from 'react';
4
4
  import { Accordion, AccordionDetails, AccordionSummary, Box, Button, CardContent, CardMedia, Checkbox, Chip, Fade, Icon, IconButton, List, ListItem, ListItemButton, ListItemIcon, ListItemText, Typography, useMediaQuery, useTheme } from '@mui/material';
5
5
  import { FormattedMessage } from 'react-intl';
6
6
  import { styled } from '@mui/material/styles';
@@ -17,14 +17,15 @@ import HiddenPlaceholder from '../../shared/HiddenPlaceholder';
17
17
  import Widget from '../Widget';
18
18
  import Content from './Steps/Content';
19
19
  import { SCOPE_SC_UI } from '../../constants/Errors';
20
- import { OnBoardingService, PreferenceService } from '@selfcommunity/api-services';
20
+ import { Endpoints, http, OnBoardingService, PreferenceService } from '@selfcommunity/api-services';
21
21
  import { Logger } from '@selfcommunity/utils';
22
22
  import { SCOnBoardingStepStatusType, SCOnBoardingStepType } from '@selfcommunity/types';
23
23
  import OnBoardingWidgetSkeleton from './Skeleton';
24
24
  import { closeSnackbar, useSnackbar } from 'notistack';
25
- import { CONSOLE_PROD, CONSOLE_STAGE } from '../PlatformWidget/constants';
26
25
  import HeaderPlaceholder from '../../assets/onBoarding/header';
27
26
  import BaseDialog from '../../shared/BaseDialog';
27
+ import PubSub from 'pubsub-js';
28
+ import { SCCategoryEventType, SCTopicType } from '../../constants/PubSub';
28
29
  const classes = {
29
30
  root: `${PREFIX}-root`,
30
31
  content: `${PREFIX}-content`,
@@ -51,13 +52,13 @@ const OnBoardingWidget = (inProps) => {
51
52
  props: inProps,
52
53
  name: PREFIX
53
54
  });
54
- const { className, GenerateContentsParams = {}, onGeneratedContent = null, onHeightChange, onStateChange, forceExpanded = false } = props, rest = __rest(props, ["className", "GenerateContentsParams", "onGeneratedContent", "onHeightChange", "onStateChange", "forceExpanded"]);
55
+ const { className, GenerateContentsParams = {}, onGeneratedContent = null, onHeightChange, onStateChange, forceExpanded = false, initialStep } = props, rest = __rest(props, ["className", "GenerateContentsParams", "onGeneratedContent", "onHeightChange", "onStateChange", "forceExpanded", "initialStep"]);
55
56
  // STATE
56
57
  const [loading, setLoading] = useState(true);
57
58
  const [initialized, setInitialized] = useState(false);
58
59
  const [steps, setSteps] = useState([]);
59
60
  const nextStep = useMemo(() => {
60
- const step = steps === null || steps === void 0 ? void 0 : steps.find((step) => step.status === 'in_progress' || step.status === 'not_started');
61
+ const step = steps === null || steps === void 0 ? void 0 : steps.find((step) => (initialStep ? step.step === initialStep : step.status === 'in_progress' || step.status === 'not_started'));
61
62
  return step || (steps === null || steps === void 0 ? void 0 : steps[0]);
62
63
  }, [steps]);
63
64
  const allStepsDone = useMemo(() => {
@@ -77,7 +78,6 @@ const OnBoardingWidget = (inProps) => {
77
78
  const scPreferencesContext = useSCPreferences();
78
79
  const scThemeContext = useSCTheme();
79
80
  const { enqueueSnackbar } = useSnackbar();
80
- const isStage = scContext.settings.portal.includes('stage');
81
81
  const [isGenerating, setIsGenerating] = useState(false);
82
82
  // HOOKS
83
83
  const theme = useTheme();
@@ -110,10 +110,30 @@ const OnBoardingWidget = (inProps) => {
110
110
  }
111
111
  s.step === SCOnBoardingStepType.APPEARANCE && handlePreferencesUpdate();
112
112
  });
113
+ /**
114
+ * Fetches platform url
115
+ */
116
+ function fetchPlatform(query) {
117
+ http
118
+ .request({
119
+ url: Endpoints.Platform.url(),
120
+ method: Endpoints.Platform.method,
121
+ params: {
122
+ next: query
123
+ }
124
+ })
125
+ .then((res) => {
126
+ const platformUrl = res.data.platform_url;
127
+ window.open(platformUrl, '_blank').focus();
128
+ })
129
+ .catch((error) => {
130
+ console.log(error);
131
+ });
132
+ }
113
133
  const showSuccessAlert = (step) => {
114
134
  setIsGenerating(false);
115
135
  enqueueSnackbar(_jsx(FormattedMessage, { id: `ui.onBoardingWidget.step.${step.step}.success`, defaultMessage: `ui.onBoardingWidget.step.${step.step}.success` }), {
116
- 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" }) }))] })),
136
+ 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" }) }))] })),
117
137
  variant: 'success',
118
138
  autoHideDuration: 7000
119
139
  });
@@ -167,6 +187,17 @@ const OnBoardingWidget = (inProps) => {
167
187
  scThemeContext.setTheme(getTheme(scContext.settings.theme, prefs));
168
188
  });
169
189
  };
190
+ const handleCategoriesClick = () => {
191
+ fetchPlatform('/contents/interests/');
192
+ setShowCategoriesModal(false);
193
+ };
194
+ /**
195
+ * Notify when a category info changes
196
+ * @param data
197
+ */
198
+ const notifyCategoryChanges = useCallback((data) => {
199
+ PubSub.publish(`${SCTopicType.CATEGORY}.${SCCategoryEventType.EDIT}`, data);
200
+ }, []);
170
201
  // EFFECTS
171
202
  useEffect(() => {
172
203
  if (prevContentsStep &&
@@ -202,6 +233,22 @@ const OnBoardingWidget = (inProps) => {
202
233
  return () => clearInterval(intervalId);
203
234
  }
204
235
  }, [scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user, isGenerating, isAdmin]);
236
+ /**
237
+ * updates categories info when generating category content
238
+ */
239
+ useEffect(() => {
240
+ const categoryStep = steps.find((step) => step.step === SCOnBoardingStepType.CATEGORIES);
241
+ if ((categoryStep === null || categoryStep === void 0 ? void 0 : categoryStep.status) === SCOnBoardingStepStatusType.IN_PROGRESS && categoryStep.results.length !== 0) {
242
+ categoryStep.results.forEach((c) => {
243
+ // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
244
+ // @ts-ignore
245
+ const isAlreadyNotified = prevCategoriesStep === null || prevCategoriesStep === void 0 ? void 0 : prevCategoriesStep.results.some((result) => result.id === c.id);
246
+ if (!isAlreadyNotified) {
247
+ notifyCategoryChanges(c);
248
+ }
249
+ });
250
+ }
251
+ }, [steps, prevCategoriesStep]);
205
252
  /**
206
253
  * Render _step content section
207
254
  */
@@ -252,7 +299,8 @@ const OnBoardingWidget = (inProps) => {
252
299
  b: (chunks) => _jsx("strong", { children: chunks }),
253
300
  // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
254
301
  // @ts-ignore
255
- icon: (...chunks) => (_jsx(Icon, Object.assign({ color: "secondary", fontSize: "medium" }, { children: chunks })))
256
- } }) }))) }) })), _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", href: isStage ? CONSOLE_STAGE : CONSOLE_PROD, onClick: () => setShowCategoriesModal(false), target: "_blank", 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" }) })) })))] }))] })) })) })] })) })));
302
+ // eslint-disable-next-line prettier/prettier
303
+ icon: (...chunks) => _jsx(Icon, Object.assign({ color: "secondary", fontSize: "medium" }, { children: chunks }))
304
+ } }) }))) }) })), _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" }) })) })))] }))] })) })) })] })) })));
257
305
  };
258
306
  export default OnBoardingWidget;
@@ -7,7 +7,7 @@ import { useThemeProps } from '@mui/system';
7
7
  import classNames from 'classnames';
8
8
  import { Preferences } from '@selfcommunity/react-core';
9
9
  import { PREFIX } from '../../constants';
10
- import { Button, Drawer, IconButton, Tab, Tabs, TextField, Typography } from '@mui/material';
10
+ import { Button, CircularProgress, Drawer, IconButton, Tab, Tabs, TextField, Typography } from '@mui/material';
11
11
  import { MuiColorInput } from 'mui-color-input';
12
12
  import { actionTypes } from './reducer';
13
13
  import { getInitialState, reducer } from './reducer';
@@ -33,7 +33,9 @@ const classes = {
33
33
  root: `${PREFIX}-appearance-root`,
34
34
  title: `${PREFIX}-appearance-title`,
35
35
  summary: `${PREFIX}-appearance-summary`,
36
+ colorContainer: `${PREFIX}-appearance-color-container`,
36
37
  color: `${PREFIX}-appearance-color`,
38
+ colorProgress: `${PREFIX}-appearance-color-progress`,
37
39
  logoContainer: `${PREFIX}-appearance-logo-container`,
38
40
  logo: `${PREFIX}-appearance-logo`,
39
41
  uploadButton: `${PREFIX}-appearance-upload-button`,
@@ -66,6 +68,7 @@ export default function Appearance(inProps) {
66
68
  const [anchorEl, setAnchorEl] = useState(null);
67
69
  const [tab, setTab] = useState(0);
68
70
  const [updating, setUpdating] = useState(false);
71
+ const [updatingColor, setUpdatingColor] = useState('');
69
72
  // INTL
70
73
  const intl = useIntl();
71
74
  // HANDLERS
@@ -138,6 +141,7 @@ export default function Appearance(inProps) {
138
141
  }
139
142
  finally {
140
143
  setUpdating(false);
144
+ setUpdatingColor('');
141
145
  onCompleteAction();
142
146
  }
143
147
  });
@@ -193,15 +197,15 @@ export default function Appearance(inProps) {
193
197
  }, []);
194
198
  // HANDLERS
195
199
  const handleColorChange = (color, name) => {
200
+ setUpdatingColor(name);
196
201
  const currentColor = state.colors.find((col) => col.name === name);
197
202
  if (currentColor && currentColor.value !== color) {
203
+ setUpdating(true);
198
204
  dispatch({
199
205
  type: actionTypes.SET_COLORS,
200
206
  payload: { colors: state.colors.map((col) => (col.name === name ? Object.assign(Object.assign({}, col), { value: color }) : col)) }
201
207
  });
202
- setTimeout(() => {
203
- updatePreference({ [`${name}`]: color });
204
- }, 2000);
208
+ updatePreference({ [`${name}`]: color });
205
209
  }
206
210
  };
207
211
  const handleChange = (event) => {
@@ -211,7 +215,7 @@ export default function Appearance(inProps) {
211
215
  payload: { slogans: state.slogans.map((s) => (s.name === name ? Object.assign(Object.assign({}, s), { value: value }) : s)) }
212
216
  });
213
217
  };
214
- return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, { children: [_jsx(Typography, Object.assign({ variant: "h4", className: classes.title, alignSelf: "self-start" }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.appearance", defaultMessage: "ui.onBoardingWidget.appearance" }) })), _jsx(Typography, Object.assign({ className: classes.summary }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.appearance.summary", defaultMessage: "ui.onBoardingWidget.step.appearance.summary" }) })), _jsx(Button, Object.assign({ variant: "outlined", size: "small", color: "primary", onClick: handleOpen }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.appearance.button", defaultMessage: "ui.onBoardingWidget.step.appearance.button" }) })), _jsxs(DrawerRoot, Object.assign({ className: classes.drawerRoot, anchor: "right", open: Boolean(anchorEl), onClose: handleClose }, { children: [_jsxs(Box, Object.assign({ className: classes.drawerHeader }, { children: [_jsx(Typography, Object.assign({ variant: "h4", color: "primary" }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.appearance.header.title", defaultMessage: "ui.onBoardingWidget.step.appearance.header.title" }) })), _jsx(IconButton, Object.assign({ className: classes.drawerHeaderAction, onClick: handleClose }, { children: _jsx(Icon, { children: "close" }) }))] })), _jsxs(Tabs, Object.assign({ value: tab, onChange: handleTabChange, variant: "scrollable", scrollButtons: "auto", "aria-label": "scrollable-tabs" }, { children: [_jsx(Tab, { label: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.appearance.colors.title", defaultMessage: "ui.onBoardingWidget.step.appearance.colors.title" }) }), _jsx(Tab, { label: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.appearance.logo.title", defaultMessage: "ui.onBoardingWidget.step.appearance.logo.title" }) }), _jsx(Tab, { label: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.appearance.titleSlogan.title", defaultMessage: "ui.onBoardingWidget.step.appearance.titleSlogan.title" }) })] })), _jsx(ScrollContainer, { children: _jsxs(Box, Object.assign({ className: classes.drawerContent }, { children: [tab === 0 && (_jsx(_Fragment, { children: state.colors.map((color) => (_jsxs(React.Fragment, { children: [_jsx(Typography, Object.assign({ variant: "h6" }, { children: formatColorLabel(color) })), _jsx(MuiColorInput, { className: classes.color, format: "hex", value: color.value, onChange: (newColor) => handleColorChange(newColor, color.name) })] }, color.id))) })), tab === 1 && (_jsx(_Fragment, { children: state.logos.map((logo) => (_jsxs(React.Fragment, { children: [_jsx(Typography, Object.assign({ variant: "h6" }, { children: formatLogoLabel(logo.name) })), _jsxs(Box, Object.assign({ className: classes.logoContainer }, { children: [_jsx("img", { src: logo.value, className: classes.logo }), _jsx("input", { type: "file", onChange: (event) => handleUpload(event, logo.name), ref: fileInput, hidden: true, accept: ".gif,.png,.jpg,.jpeg" }), _jsx(LoadingButton, Object.assign({ className: classes.uploadButton, onClick: () => fileInput.current.click(), loading: loadingLogo, disabled: loadingLogo }, { children: _jsx(Icon, { children: "upload" }) }))] }))] }, logo.id))) })), tab === 2 && (_jsxs(Box, { children: [_jsx(TextField, { multiline: true, fullWidth: true,
218
+ return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, { children: [_jsx(Typography, Object.assign({ variant: "h4", className: classes.title, alignSelf: "self-start" }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.appearance", defaultMessage: "ui.onBoardingWidget.appearance" }) })), _jsx(Typography, Object.assign({ className: classes.summary }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.appearance.summary", defaultMessage: "ui.onBoardingWidget.step.appearance.summary" }) })), _jsx(Button, Object.assign({ variant: "outlined", size: "small", color: "primary", onClick: handleOpen }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.appearance.button", defaultMessage: "ui.onBoardingWidget.step.appearance.button" }) })), _jsxs(DrawerRoot, Object.assign({ className: classes.drawerRoot, anchor: "right", open: Boolean(anchorEl), onClose: handleClose }, { children: [_jsxs(Box, Object.assign({ className: classes.drawerHeader }, { children: [_jsx(Typography, Object.assign({ variant: "h4", color: "primary" }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.appearance.header.title", defaultMessage: "ui.onBoardingWidget.step.appearance.header.title" }) })), _jsx(IconButton, Object.assign({ className: classes.drawerHeaderAction, onClick: handleClose }, { children: _jsx(Icon, { children: "close" }) }))] })), _jsxs(Tabs, Object.assign({ value: tab, onChange: handleTabChange, variant: "scrollable", scrollButtons: "auto", "aria-label": "scrollable-tabs" }, { children: [_jsx(Tab, { label: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.appearance.colors.title", defaultMessage: "ui.onBoardingWidget.step.appearance.colors.title" }) }), _jsx(Tab, { label: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.appearance.logo.title", defaultMessage: "ui.onBoardingWidget.step.appearance.logo.title" }) }), _jsx(Tab, { label: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.appearance.titleSlogan.title", defaultMessage: "ui.onBoardingWidget.step.appearance.titleSlogan.title" }) })] })), _jsx(ScrollContainer, { children: _jsxs(Box, Object.assign({ className: classes.drawerContent }, { children: [tab === 0 && (_jsx(_Fragment, { children: state.colors.map((color) => (_jsxs(React.Fragment, { children: [_jsx(Typography, Object.assign({ variant: "h6" }, { children: formatColorLabel(color) })), _jsxs(Box, Object.assign({ className: classes.colorContainer }, { children: [_jsx(MuiColorInput, { className: classes.color, format: "hex", value: color.value, onChange: (newColor) => handleColorChange(newColor, color.name), isAlphaHidden: true }), updatingColor && updatingColor === color.name && (_jsx(CircularProgress, { className: classes.colorProgress, color: "secondary", size: 24 }))] }))] }, color.id))) })), tab === 1 && (_jsx(_Fragment, { children: state.logos.map((logo) => (_jsxs(React.Fragment, { children: [_jsx(Typography, Object.assign({ variant: "h6" }, { children: formatLogoLabel(logo.name) })), _jsxs(Box, Object.assign({ className: classes.logoContainer }, { children: [_jsx("img", { src: logo.value, className: classes.logo }), _jsx("input", { type: "file", onChange: (event) => handleUpload(event, logo.name), ref: fileInput, hidden: true, accept: ".gif,.png,.jpg,.jpeg" }), _jsx(LoadingButton, Object.assign({ className: classes.uploadButton, onClick: () => fileInput.current.click(), loading: loadingLogo, disabled: loadingLogo }, { children: _jsx(Icon, { children: "upload" }) }))] }))] }, logo.id))) })), tab === 2 && (_jsxs(Box, { children: [_jsx(TextField, { multiline: true, fullWidth: true,
215
219
  //className={classes.field}
216
220
  label: `${intl.formatMessage(messages.titleField)}`, margin: "normal", value: (_a = state === null || state === void 0 ? void 0 : state.slogans[0]) === null || _a === void 0 ? void 0 : _a.value, name: "application_slogan1", onChange: handleChange, InputProps: {
217
221
  endAdornment: _jsx(Typography, Object.assign({ variant: "body2" }, { children: ((_b = state.slogans[0].value) === null || _b === void 0 ? void 0 : _b.length) ? 50 - ((_c = state.slogans[0].value) === null || _c === void 0 ? void 0 : _c.length) : 50 }))
@@ -1,5 +1,6 @@
1
+ import { __awaiter } from "tslib";
1
2
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { useContext } from 'react';
3
+ import { useContext, useMemo, useState } from 'react';
3
4
  import { styled } from '@mui/material/styles';
4
5
  import Box from '@mui/material/Box';
5
6
  import { useThemeProps } from '@mui/system';
@@ -7,9 +8,12 @@ import classNames from 'classnames';
7
8
  import { PREFIX } from '../../constants';
8
9
  import { Button, Icon, IconButton, Typography } from '@mui/material';
9
10
  import { FormattedMessage } from 'react-intl';
10
- import { Link, SCPreferences, SCPreferencesContext, useSCContext } from '@selfcommunity/react-core';
11
+ import { SCPreferences, SCPreferencesContext } from '@selfcommunity/react-core';
11
12
  import { FACEBOOK_SHARE, LINKEDIN_SHARE, X_SHARE } from '../../../../constants/SocialShare';
12
- import { MAKE_MARKETING_PROD, MAKE_MARKETING_STAGE } from '../../../PlatformWidget/constants';
13
+ import { Endpoints, http, PreferenceService } from '@selfcommunity/api-services';
14
+ import { Logger } from '@selfcommunity/utils';
15
+ import { SCOPE_SC_UI } from '../../../../constants/Errors';
16
+ import { SCPreferenceName } from '@selfcommunity/types';
13
17
  const classes = {
14
18
  root: `${PREFIX}-invite-root`,
15
19
  title: `${PREFIX}-invite-title`,
@@ -23,6 +27,7 @@ const Root = styled(Box, {
23
27
  name: PREFIX,
24
28
  slot: 'InviteRoot'
25
29
  })(() => ({}));
30
+ const META_ROBOTS_ENABLE_DEFAULT = 'index,follow';
26
31
  export default function Invite(inProps) {
27
32
  // PROPS
28
33
  const props = useThemeProps({
@@ -30,21 +35,61 @@ export default function Invite(inProps) {
30
35
  name: PREFIX
31
36
  });
32
37
  const { className, onCompleteAction = null } = props;
38
+ // STATUS
39
+ const [isMetaRobotsUpdating, setMetaRobotsUpdating] = useState(false);
33
40
  // CONTEXT
34
- const scContext = useSCContext();
35
41
  const scPreferencesContext = useContext(SCPreferencesContext);
36
- const facebookShareEnabled = SCPreferences.ADDONS_SHARE_POST_ON_FACEBOOK_ENABLED in scPreferencesContext.preferences &&
37
- scPreferencesContext.preferences[SCPreferences.ADDONS_SHARE_POST_ON_FACEBOOK_ENABLED].value;
38
- const xShareEnabled = SCPreferences.ADDONS_SHARE_POST_ON_TWITTER_ENABLED in scPreferencesContext.preferences &&
39
- scPreferencesContext.preferences[SCPreferences.ADDONS_SHARE_POST_ON_TWITTER_ENABLED].value;
40
- const linkedinShareEnabled = SCPreferences.ADDONS_SHARE_POST_ON_LINKEDIN_ENABLED in scPreferencesContext.preferences &&
41
- scPreferencesContext.preferences[SCPreferences.ADDONS_SHARE_POST_ON_LINKEDIN_ENABLED].value;
42
- const url = scContext.settings.portal;
43
- const isStage = scContext.settings.portal.includes('stage');
42
+ const metaRobots = useMemo(() => {
43
+ return scPreferencesContext.preferences && SCPreferences.WEBMASTER_META_ROBOTS in scPreferencesContext.preferences
44
+ ? scPreferencesContext.preferences[SCPreferences.WEBMASTER_META_ROBOTS].value
45
+ : null;
46
+ }, [scPreferencesContext.preferences]);
47
+ const url = useMemo(() => scPreferencesContext.preferences &&
48
+ SCPreferences.CONFIGURATIONS_GROUPS_ENABLED in scPreferencesContext.preferences &&
49
+ scPreferencesContext.preferences[SCPreferences.CONFIGURATIONS_APP_URL].value, [scPreferencesContext.preferences]);
44
50
  // HANDLERS
45
- const handleShare = (shareUrl, shareType) => {
51
+ const handleShare = (shareUrl, shareType) => __awaiter(this, void 0, void 0, function* () {
52
+ if (metaRobots.toLowerCase().replace(/\s+/g, '') !== META_ROBOTS_ENABLE_DEFAULT) {
53
+ yield enableSeo();
54
+ }
46
55
  window.open(shareUrl, `${shareType}-share-dialog`, 'width=626,height=436');
47
56
  onCompleteAction();
57
+ });
58
+ const enableSeo = () => __awaiter(this, void 0, void 0, function* () {
59
+ try {
60
+ setMetaRobotsUpdating(true);
61
+ yield PreferenceService.updatePreferences({ [SCPreferenceName.META_ROBOTS]: 'index, follow' });
62
+ }
63
+ catch (e) {
64
+ Logger.error(SCOPE_SC_UI, e);
65
+ }
66
+ finally {
67
+ setMetaRobotsUpdating(false);
68
+ }
69
+ });
70
+ /**
71
+ * Fetches platform url
72
+ */
73
+ function fetchPlatform(query) {
74
+ http
75
+ .request({
76
+ url: Endpoints.Platform.url(),
77
+ method: Endpoints.Platform.method,
78
+ params: {
79
+ next: query
80
+ }
81
+ })
82
+ .then((res) => {
83
+ const platformUrl = res.data.platform_url;
84
+ window.open(platformUrl, '_blank').focus();
85
+ })
86
+ .catch((error) => {
87
+ console.log(error);
88
+ });
89
+ }
90
+ const handleCompleteAction = () => {
91
+ onCompleteAction();
92
+ fetchPlatform('/marketing/invitation');
48
93
  };
49
- return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, { children: [_jsx(Typography, Object.assign({ variant: "h4", className: classes.title }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.invite", defaultMessage: "ui.onBoardingWidget.invite" }) })), _jsxs(Box, Object.assign({ className: classes.social }, { children: [_jsx(Typography, Object.assign({ className: classes.title, variant: "h4" }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.invite.social.title", defaultMessage: "ui.onBoardingWidget.step.invite.social.title" }) })), _jsx(Typography, Object.assign({ variant: "subtitle1" }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.invite.social.subtitle", defaultMessage: "ui.onBoardingWidget.step.invite.social.subtitle" }) })), _jsxs(Box, Object.assign({ className: classes.iconContainer }, { children: [facebookShareEnabled && (_jsx(IconButton, Object.assign({ onClick: () => handleShare(FACEBOOK_SHARE + url, 'facebook') }, { children: _jsx(Icon, Object.assign({ classes: { root: classes.icon } }, { children: "facebook" })) }))), xShareEnabled && (_jsx(IconButton, Object.assign({ onClick: () => handleShare(X_SHARE + url, 'x') }, { children: _jsx(Icon, Object.assign({ classes: { root: classes.icon } }, { children: "twitter" })) }))), linkedinShareEnabled && (_jsx(IconButton, Object.assign({ onClick: () => handleShare(LINKEDIN_SHARE + url, 'linkedin') }, { children: _jsx(Icon, Object.assign({ classes: { root: classes.icon } }, { children: "linkedin" })) })))] }))] })), _jsxs(Box, Object.assign({ className: classes.email }, { children: [_jsx(Typography, Object.assign({ className: classes.title, variant: "h4" }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.invite.email.title", defaultMessage: "ui.onBoardingWidget.step.invite.email.title" }) })), _jsx(Typography, Object.assign({ variant: "subtitle1" }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.invite.email.subtitle", defaultMessage: "ui.onBoardingWidget.step.invite.email.subtitle" }) }))] })), _jsx(Box, Object.assign({ component: "span", className: classes.action }, { children: _jsx(Button, Object.assign({ variant: "outlined", size: "small", component: Link, to: isStage ? MAKE_MARKETING_STAGE : MAKE_MARKETING_PROD, target: "_blank", onClick: onCompleteAction }, { children: _jsx(FormattedMessage, { defaultMessage: "ui.onBoardingWidget.step.invite.button", id: "ui.onBoardingWidget.step.invite.button" }) })) }))] })));
94
+ return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, { children: [_jsx(Typography, Object.assign({ variant: "h4", className: classes.title }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.invite", defaultMessage: "ui.onBoardingWidget.invite" }) })), _jsxs(Box, Object.assign({ className: classes.social }, { children: [_jsx(Typography, Object.assign({ className: classes.title, variant: "h4" }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.invite.social.title", defaultMessage: "ui.onBoardingWidget.step.invite.social.title" }) })), _jsx(Typography, Object.assign({ variant: "subtitle1" }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.invite.social.subtitle", defaultMessage: "ui.onBoardingWidget.step.invite.social.subtitle" }) })), _jsxs(Box, Object.assign({ className: classes.iconContainer }, { children: [_jsx(IconButton, Object.assign({ onClick: () => handleShare(FACEBOOK_SHARE + url, 'facebook'), disabled: !url || isMetaRobotsUpdating }, { children: _jsx(Icon, Object.assign({ classes: { root: classes.icon } }, { children: "facebook" })) })), _jsx(IconButton, Object.assign({ onClick: () => handleShare(X_SHARE + url, 'x'), disabled: !url || isMetaRobotsUpdating }, { children: _jsx(Icon, Object.assign({ classes: { root: classes.icon } }, { children: "twitter" })) })), _jsx(IconButton, Object.assign({ onClick: () => handleShare(LINKEDIN_SHARE + url, 'linkedin'), disabled: !url || isMetaRobotsUpdating }, { children: _jsx(Icon, Object.assign({ classes: { root: classes.icon } }, { children: "linkedin" })) }))] }))] })), _jsxs(Box, Object.assign({ className: classes.email }, { children: [_jsx(Typography, Object.assign({ className: classes.title, variant: "h4" }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.invite.email.title", defaultMessage: "ui.onBoardingWidget.step.invite.email.title" }) })), _jsx(Typography, Object.assign({ variant: "subtitle1" }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.step.invite.email.subtitle", defaultMessage: "ui.onBoardingWidget.step.invite.email.subtitle" }) }))] })), _jsx(Box, Object.assign({ component: "span", className: classes.action }, { children: _jsx(Button, Object.assign({ variant: "outlined", size: "small", onClick: handleCompleteAction }, { children: _jsx(FormattedMessage, { defaultMessage: "ui.onBoardingWidget.step.invite.button", id: "ui.onBoardingWidget.step.invite.button" }) })) }))] })));
50
95
  }
@@ -3,7 +3,3 @@ export declare const HUB_STAGE = "https://hub.stage.quentrix.com/";
3
3
  export declare const HUB_PROD = "https://hub.selfcommunity.com/";
4
4
  export declare const CONTACT_STAGE = "https://hub.stage.quentrix.com/dashboard/account/contact-us";
5
5
  export declare const CONTACT_PROD = "https://hub.selfcommunity.com/dashboard/account/contact-us";
6
- export declare const MAKE_MARKETING_STAGE = "https://make.selfcommunity.io/marketing/invitation";
7
- export declare const MAKE_MARKETING_PROD = "https://make.stage.quentrix.com/marketing/invitation";
8
- export declare const CONSOLE_STAGE = "https://make.selfcommunity.io/contents/interests";
9
- export declare const CONSOLE_PROD = "https://make.stage.quentrix.com/contents/interests";
@@ -3,7 +3,3 @@ export const HUB_STAGE = 'https://hub.stage.quentrix.com/';
3
3
  export const HUB_PROD = 'https://hub.selfcommunity.com/';
4
4
  export const CONTACT_STAGE = 'https://hub.stage.quentrix.com/dashboard/account/contact-us';
5
5
  export const CONTACT_PROD = 'https://hub.selfcommunity.com/dashboard/account/contact-us';
6
- export const MAKE_MARKETING_STAGE = 'https://make.selfcommunity.io/marketing/invitation';
7
- export const MAKE_MARKETING_PROD = 'https://make.stage.quentrix.com/marketing/invitation';
8
- export const CONSOLE_STAGE = 'https://make.selfcommunity.io/contents/interests';
9
- export const CONSOLE_PROD = 'https://make.stage.quentrix.com/contents/interests';
@@ -0,0 +1,5 @@
1
+ /**
2
+ * Actions
3
+ */
4
+ export declare const GET_GROUP_LINK = "_get_link";
5
+ export declare const DELETE_GROUP = "_delete_event";
@@ -0,0 +1,5 @@
1
+ /**
2
+ * Actions
3
+ */
4
+ export const GET_GROUP_LINK = '_get_link';
5
+ export const DELETE_GROUP = '_delete_event';
@@ -4,7 +4,8 @@ import { SCUserType, SCGroupType, SCEventType } from '@selfcommunity/types';
4
4
  */
5
5
  export declare enum SCTopicType {
6
6
  GROUP = "group",
7
- EVENT = "event"
7
+ EVENT = "event",
8
+ CATEGORY = "category"
8
9
  }
9
10
  /**
10
11
  * Group/Event event types
@@ -18,6 +19,12 @@ export declare enum SCGroupEventType {
18
19
  INVITE_MEMBER = "members.invite_member",
19
20
  REMOVE_MEMBER = "members.remove_member"
20
21
  }
22
+ /**
23
+ * Category event types
24
+ */
25
+ export declare enum SCCategoryEventType {
26
+ EDIT = "edit"
27
+ }
21
28
  export interface SCGroupMembersEventType {
22
29
  group: SCGroupType;
23
30
  user?: SCUserType;
@@ -5,6 +5,7 @@ export var SCTopicType;
5
5
  (function (SCTopicType) {
6
6
  SCTopicType["GROUP"] = "group";
7
7
  SCTopicType["EVENT"] = "event";
8
+ SCTopicType["CATEGORY"] = "category";
8
9
  })(SCTopicType || (SCTopicType = {}));
9
10
  /**
10
11
  * Group/Event event types
@@ -19,3 +20,10 @@ export var SCGroupEventType;
19
20
  SCGroupEventType["INVITE_MEMBER"] = "members.invite_member";
20
21
  SCGroupEventType["REMOVE_MEMBER"] = "members.remove_member";
21
22
  })(SCGroupEventType || (SCGroupEventType = {}));
23
+ /**
24
+ * Category event types
25
+ */
26
+ export var SCCategoryEventType;
27
+ (function (SCCategoryEventType) {
28
+ SCCategoryEventType["EDIT"] = "edit";
29
+ })(SCCategoryEventType || (SCCategoryEventType = {}));