@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.
- package/lib/cjs/components/Categories/Categories.js +22 -0
- package/lib/cjs/components/CategoriesPopularWidget/CategoriesPopularWidget.js +21 -0
- package/lib/cjs/components/CategoriesSuggestionWidget/CategoriesSuggestionWidget.js +21 -0
- package/lib/cjs/components/Composer/TypeSwitchButtonGroup/TypeSwitchButtonGroup.js +1 -1
- package/lib/cjs/components/Events/Events.js +15 -5
- package/lib/cjs/components/Events/LocationEventsFilter.d.ts +14 -0
- package/lib/cjs/components/Events/LocationEventsFilter.js +45 -0
- package/lib/cjs/components/Events/PastEventsFilter.js +1 -2
- package/lib/cjs/components/Feed/Feed.js +3 -2
- package/lib/cjs/components/GroupActionsMenu/index.d.ts +57 -0
- package/lib/cjs/components/GroupActionsMenu/index.js +157 -0
- package/lib/cjs/components/GroupHeader/GroupHeader.d.ts +6 -0
- package/lib/cjs/components/GroupHeader/GroupHeader.js +8 -4
- package/lib/cjs/components/Groups/Groups.js +26 -0
- package/lib/cjs/components/NavigationMenuIconButton/NavigationMenuDrawer.d.ts +31 -0
- package/lib/cjs/components/NavigationMenuIconButton/NavigationMenuDrawer.js +35 -0
- package/lib/cjs/components/NavigationMenuIconButton/NavigationMenuIconButton.d.ts +9 -20
- package/lib/cjs/components/NavigationMenuIconButton/NavigationMenuIconButton.js +4 -20
- package/lib/cjs/components/NavigationMenuIconButton/index.d.ts +2 -1
- package/lib/cjs/components/NavigationMenuIconButton/index.js +3 -1
- package/lib/cjs/components/NavigationToolbar/NavigationToolbar.d.ts +5 -0
- package/lib/cjs/components/NavigationToolbar/NavigationToolbar.js +2 -2
- package/lib/cjs/components/OnBoardingWidget/OnBoardingWidget.d.ts +5 -1
- package/lib/cjs/components/OnBoardingWidget/OnBoardingWidget.js +55 -7
- package/lib/cjs/components/OnBoardingWidget/Steps/Appearance/Appearance.js +8 -4
- package/lib/cjs/components/OnBoardingWidget/Steps/Invite/Invite.js +56 -12
- package/lib/cjs/components/PlatformWidget/constants.d.ts +0 -4
- package/lib/cjs/components/PlatformWidget/constants.js +1 -5
- package/lib/cjs/constants/GroupActionsMenu.d.ts +5 -0
- package/lib/cjs/constants/GroupActionsMenu.js +8 -0
- package/lib/cjs/constants/PubSub.d.ts +8 -1
- package/lib/cjs/constants/PubSub.js +9 -1
- package/lib/cjs/index.d.ts +4 -2
- package/lib/cjs/index.js +11 -5
- package/lib/cjs/shared/EventInfoDetails/index.js +3 -3
- package/lib/cjs/shared/InfiniteScroll/index.js +4 -4
- package/lib/cjs/shared/Media/Link/DisplayComponent.js +5 -5
- package/lib/esm/components/Categories/Categories.js +23 -1
- package/lib/esm/components/CategoriesPopularWidget/CategoriesPopularWidget.js +22 -1
- package/lib/esm/components/CategoriesSuggestionWidget/CategoriesSuggestionWidget.js +22 -1
- package/lib/esm/components/Composer/TypeSwitchButtonGroup/TypeSwitchButtonGroup.js +2 -2
- package/lib/esm/components/Events/Events.js +16 -6
- package/lib/esm/components/Events/LocationEventsFilter.d.ts +14 -0
- package/lib/esm/components/Events/LocationEventsFilter.js +41 -0
- package/lib/esm/components/Events/PastEventsFilter.js +1 -2
- package/lib/esm/components/Feed/Feed.js +4 -3
- package/lib/esm/components/GroupActionsMenu/index.d.ts +57 -0
- package/lib/esm/components/GroupActionsMenu/index.js +154 -0
- package/lib/esm/components/GroupHeader/GroupHeader.d.ts +6 -0
- package/lib/esm/components/GroupHeader/GroupHeader.js +9 -5
- package/lib/esm/components/Groups/Groups.js +27 -1
- package/lib/esm/components/NavigationMenuIconButton/NavigationMenuDrawer.d.ts +31 -0
- package/lib/esm/components/NavigationMenuIconButton/NavigationMenuDrawer.js +32 -0
- package/lib/esm/components/NavigationMenuIconButton/NavigationMenuIconButton.d.ts +9 -20
- package/lib/esm/components/NavigationMenuIconButton/NavigationMenuIconButton.js +6 -22
- package/lib/esm/components/NavigationMenuIconButton/index.d.ts +2 -1
- package/lib/esm/components/NavigationMenuIconButton/index.js +2 -1
- package/lib/esm/components/NavigationToolbar/NavigationToolbar.d.ts +5 -0
- package/lib/esm/components/NavigationToolbar/NavigationToolbar.js +2 -2
- package/lib/esm/components/OnBoardingWidget/OnBoardingWidget.d.ts +5 -1
- package/lib/esm/components/OnBoardingWidget/OnBoardingWidget.js +57 -9
- package/lib/esm/components/OnBoardingWidget/Steps/Appearance/Appearance.js +9 -5
- package/lib/esm/components/OnBoardingWidget/Steps/Invite/Invite.js +59 -14
- package/lib/esm/components/PlatformWidget/constants.d.ts +0 -4
- package/lib/esm/components/PlatformWidget/constants.js +0 -4
- package/lib/esm/constants/GroupActionsMenu.d.ts +5 -0
- package/lib/esm/constants/GroupActionsMenu.js +5 -0
- package/lib/esm/constants/PubSub.d.ts +8 -1
- package/lib/esm/constants/PubSub.js +8 -0
- package/lib/esm/index.d.ts +4 -2
- package/lib/esm/index.js +5 -3
- package/lib/esm/shared/EventInfoDetails/index.js +3 -3
- package/lib/esm/shared/InfiniteScroll/index.js +4 -4
- package/lib/esm/shared/Media/Link/DisplayComponent.js +5 -5
- package/lib/umd/148.js +2 -0
- package/lib/umd/react-ui.js +1 -1
- package/package.json +9 -9
- package/lib/umd/99.js +0 -2
- /package/lib/umd/{99.js.LICENSE.txt → 148.js.LICENSE.txt} +0 -0
|
@@ -1,28 +1,21 @@
|
|
|
1
|
-
import
|
|
2
|
-
import {
|
|
1
|
+
import { IconButtonProps } from '@mui/material';
|
|
2
|
+
import { NavigationMenuDrawerProps } from './NavigationMenuDrawer';
|
|
3
3
|
export interface NavigationMenuIconButtonProps extends IconButtonProps {
|
|
4
4
|
/**
|
|
5
|
-
*
|
|
6
|
-
* @default
|
|
5
|
+
* Prop to show/hide the default drawer component
|
|
6
|
+
* @default true
|
|
7
7
|
*/
|
|
8
|
-
|
|
8
|
+
showDrawer?: boolean;
|
|
9
9
|
/**
|
|
10
|
-
*
|
|
10
|
+
* Callback triggered on menu click
|
|
11
11
|
* @default null
|
|
12
12
|
*/
|
|
13
|
-
|
|
13
|
+
onMenuIconClick?: () => void;
|
|
14
14
|
/**
|
|
15
|
-
*
|
|
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
|
-
|
|
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,
|
|
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 {
|
|
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 = {
|
|
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:
|
|
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",
|
|
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
|
-
|
|
256
|
-
|
|
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
|
-
|
|
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 {
|
|
11
|
+
import { SCPreferences, SCPreferencesContext } from '@selfcommunity/react-core';
|
|
11
12
|
import { FACEBOOK_SHARE, LINKEDIN_SHARE, X_SHARE } from '../../../../constants/SocialShare';
|
|
12
|
-
import {
|
|
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
|
|
37
|
-
scPreferencesContext.preferences
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
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: [
|
|
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';
|
|
@@ -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 = {}));
|