@selfcommunity/react-ui 0.9.0-alpha.10 → 0.9.0-alpha.12
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/EventHeader/EventHeader.js +2 -6
- package/lib/cjs/components/NavigationSettingsIconButton/NavigationSettingsIconButton.js +17 -2
- package/lib/cjs/components/NavigationToolbar/NavigationToolbar.js +1 -1
- package/lib/cjs/components/OnBoardingWidget/ActionsButton.d.ts +7 -0
- package/lib/cjs/components/OnBoardingWidget/ActionsButton.js +84 -0
- package/lib/cjs/components/OnBoardingWidget/OnBoardingWidget.js +44 -19
- package/lib/cjs/shared/EventActionsMenu/index.js +11 -15
- package/lib/cjs/utils/events.d.ts +2 -0
- package/lib/cjs/utils/events.js +10 -0
- package/lib/esm/components/EventHeader/EventHeader.js +2 -6
- package/lib/esm/components/NavigationSettingsIconButton/NavigationSettingsIconButton.js +20 -5
- package/lib/esm/components/NavigationToolbar/NavigationToolbar.js +1 -1
- package/lib/esm/components/OnBoardingWidget/ActionsButton.d.ts +7 -0
- package/lib/esm/components/OnBoardingWidget/ActionsButton.js +81 -0
- package/lib/esm/components/OnBoardingWidget/OnBoardingWidget.js +46 -21
- package/lib/esm/shared/EventActionsMenu/index.js +11 -15
- package/lib/esm/utils/events.d.ts +2 -0
- package/lib/esm/utils/events.js +6 -0
- package/lib/umd/react-ui.js +1 -1
- package/package.json +6 -6
|
@@ -15,6 +15,7 @@ const PubSub_1 = require("../../constants/PubSub");
|
|
|
15
15
|
const Bullet_1 = tslib_1.__importDefault(require("../../shared/Bullet"));
|
|
16
16
|
const Calendar_1 = tslib_1.__importDefault(require("../../shared/Calendar"));
|
|
17
17
|
const EventActionsMenu_1 = tslib_1.__importDefault(require("../../shared/EventActionsMenu"));
|
|
18
|
+
const events_1 = require("../../utils/events");
|
|
18
19
|
const EditEventButton_1 = tslib_1.__importDefault(require("../EditEventButton"));
|
|
19
20
|
const EventInviteButton_1 = tslib_1.__importDefault(require("../EventInviteButton"));
|
|
20
21
|
const EventSubscribeButton_1 = tslib_1.__importDefault(require("../EventSubscribeButton"));
|
|
@@ -95,12 +96,7 @@ function EventHeader(inProps) {
|
|
|
95
96
|
const updatesSubscription = (0, react_1.useRef)(null);
|
|
96
97
|
// CONST
|
|
97
98
|
const isEventAdmin = (0, react_1.useMemo)(() => scUserContext.user && (scEvent === null || scEvent === void 0 ? void 0 : scEvent.managed_by.id) === scUserContext.user.id, [scUserContext.user, scEvent === null || scEvent === void 0 ? void 0 : scEvent.managed_by.id]);
|
|
98
|
-
const isEventFinished = (0, react_1.useMemo)(() =>
|
|
99
|
-
if (scEvent && !scEvent.running) {
|
|
100
|
-
return new Date().getTime() > new Date(scEvent.end_date || scEvent.start_date).getTime();
|
|
101
|
-
}
|
|
102
|
-
return false;
|
|
103
|
-
}, [scEvent]);
|
|
99
|
+
const isEventFinished = (0, react_1.useMemo)(() => (0, events_1.checkEventFinished)(scEvent), [scEvent]);
|
|
104
100
|
/**
|
|
105
101
|
* Subscriber for pubsub callback
|
|
106
102
|
*/
|
|
@@ -10,6 +10,9 @@ const classnames_1 = tslib_1.__importDefault(require("classnames"));
|
|
|
10
10
|
const system_1 = require("@mui/system");
|
|
11
11
|
const react_intl_1 = require("react-intl");
|
|
12
12
|
const api_services_1 = require("@selfcommunity/api-services");
|
|
13
|
+
const Errors_1 = require("../../constants/Errors");
|
|
14
|
+
const utils_1 = require("@selfcommunity/utils");
|
|
15
|
+
const types_1 = require("@selfcommunity/types");
|
|
13
16
|
const PREFIX = 'SCNavigationSettingsIconButton';
|
|
14
17
|
const classes = {
|
|
15
18
|
root: `${PREFIX}-root`,
|
|
@@ -37,7 +40,9 @@ const PREFERENCES = [
|
|
|
37
40
|
react_core_1.SCPreferences.CONFIGURATIONS_FOLLOW_ENABLED,
|
|
38
41
|
react_core_1.SCPreferences.CONFIGURATIONS_POST_TYPE_ENABLED,
|
|
39
42
|
react_core_1.SCPreferences.CONFIGURATIONS_DISCUSSION_TYPE_ENABLED,
|
|
40
|
-
react_core_1.SCPreferences.ADDONS_LOYALTY_POINTS_COLLECTION
|
|
43
|
+
react_core_1.SCPreferences.ADDONS_LOYALTY_POINTS_COLLECTION,
|
|
44
|
+
react_core_1.SCPreferences.CONFIGURATIONS_ONBOARDING_ENABLED,
|
|
45
|
+
react_core_1.SCPreferences.CONFIGURATIONS_ONBOARDING_HIDDEN
|
|
41
46
|
];
|
|
42
47
|
/**
|
|
43
48
|
* > API documentation for the Community-JS Navigation Settings Icon Button component. Learn about the available props and the CSS API.
|
|
@@ -94,7 +99,7 @@ function NavigationSettingsIconButton(inProps) {
|
|
|
94
99
|
setAnchorEl(null);
|
|
95
100
|
};
|
|
96
101
|
/**
|
|
97
|
-
* Fetches
|
|
102
|
+
* Fetches platform url
|
|
98
103
|
* @param query
|
|
99
104
|
*/
|
|
100
105
|
const fetchPlatform = (query) => {
|
|
@@ -103,6 +108,14 @@ function NavigationSettingsIconButton(inProps) {
|
|
|
103
108
|
window.open(platformUrl, '_blank').focus();
|
|
104
109
|
});
|
|
105
110
|
};
|
|
111
|
+
/**
|
|
112
|
+
* Updates onBoarding dynamic preference
|
|
113
|
+
*/
|
|
114
|
+
const showOnBoarding = () => {
|
|
115
|
+
api_services_1.PreferenceService.updatePreferences({ [`${types_1.SCPreferenceName.ONBOARDING_HIDDEN}`]: false }).catch((e) => {
|
|
116
|
+
utils_1.Logger.error(Errors_1.SCOPE_SC_UI, e);
|
|
117
|
+
});
|
|
118
|
+
};
|
|
106
119
|
const handleLogout = () => {
|
|
107
120
|
scUserContext.logout();
|
|
108
121
|
};
|
|
@@ -121,6 +134,7 @@ function NavigationSettingsIconButton(inProps) {
|
|
|
121
134
|
...(isAdmin
|
|
122
135
|
? [
|
|
123
136
|
(0, jsx_runtime_1.jsx)(material_1.Divider, {}, "admin_divider"),
|
|
137
|
+
preferences[react_core_1.SCPreferences.CONFIGURATIONS_ONBOARDING_ENABLED] && preferences[react_core_1.SCPreferences.CONFIGURATIONS_ONBOARDING_HIDDEN] && ((0, jsx_runtime_1.jsx)(material_1.ListItem, Object.assign({ className: classes.item }, { children: (0, jsx_runtime_1.jsxs)(material_1.ListItemButton, Object.assign({ onClick: showOnBoarding }, { children: [(0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationSettingsIconButton.onboarding", defaultMessage: "ui.navigationSettingsIconButton.onboarding" }), (0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "magic_wand" }) })] })) }), "onboarding")),
|
|
124
138
|
(0, jsx_runtime_1.jsx)(material_1.ListItem, Object.assign({ className: classes.item }, { children: (0, jsx_runtime_1.jsx)(material_1.ListItemButton, Object.assign({ onClick: () => fetchPlatform('') }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationSettingsIconButton.platform", defaultMessage: "ui.navigationSettingsIconButton.platform" }) })) }), "platform")
|
|
125
139
|
]
|
|
126
140
|
: []),
|
|
@@ -149,6 +163,7 @@ function NavigationSettingsIconButton(inProps) {
|
|
|
149
163
|
...(isAdmin
|
|
150
164
|
? [
|
|
151
165
|
(0, jsx_runtime_1.jsx)(material_1.Divider, {}, "platform_divider"),
|
|
166
|
+
preferences[react_core_1.SCPreferences.CONFIGURATIONS_ONBOARDING_ENABLED] && preferences[react_core_1.SCPreferences.CONFIGURATIONS_ONBOARDING_HIDDEN] && ((0, jsx_runtime_1.jsxs)(material_1.MenuItem, Object.assign({ className: classes.item, onClick: showOnBoarding }, { children: [(0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationSettingsIconButton.onboarding", defaultMessage: "ui.navigationSettingsIconButton.onboarding" }), (0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "magic_wand" }) })] }), "onboarding")),
|
|
152
167
|
(0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ className: classes.item, onClick: () => fetchPlatform('') }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationSettingsIconButton.platform", defaultMessage: "ui.navigationSettingsIconButton.platform" }) }), "platform")
|
|
153
168
|
]
|
|
154
169
|
: []),
|
|
@@ -144,7 +144,7 @@ function NavigationToolbar(inProps) {
|
|
|
144
144
|
(preferences[react_core_1.SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY] || scUserContext.user) && ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: (0, classnames_1.default)(classes.explore, { [classes.active]: value.startsWith(scRoutingContext.url(react_core_1.SCRoutes.EXPLORE_ROUTE_NAME, {})) }), "aria-label": "Explore", to: scRoutingContext.url(react_core_1.SCRoutes.EXPLORE_ROUTE_NAME, {}), component: react_core_1.Link }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "explore" }) }))), groupsEnabled && scUserContext.user && ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: (0, classnames_1.default)(classes.groups, {
|
|
145
145
|
[classes.active]: value.startsWith(scRoutingContext.url(react_core_1.SCRoutes.GROUPS_SUBSCRIBED_ROUTE_NAME, {})) ||
|
|
146
146
|
value.startsWith(scRoutingContext.url(react_core_1.SCRoutes.GROUPS_ROUTE_NAME, {}))
|
|
147
|
-
}), "aria-label": "Groups", to: scRoutingContext.url(react_core_1.SCRoutes.GROUPS_SUBSCRIBED_ROUTE_NAME, {}), component: react_core_1.Link }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "groups" }) }))), eventsEnabled && ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: (0, classnames_1.default)(classes.events, {
|
|
147
|
+
}), "aria-label": "Groups", to: scRoutingContext.url(react_core_1.SCRoutes.GROUPS_SUBSCRIBED_ROUTE_NAME, {}), component: react_core_1.Link }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "groups" }) }))), eventsEnabled && (scUserContext.user || preferences[react_core_1.SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY]) && ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: (0, classnames_1.default)(classes.events, {
|
|
148
148
|
[classes.active]: value.startsWith(scRoutingContext.url(react_core_1.SCRoutes.EVENTS_ROUTE_NAME, {}))
|
|
149
149
|
}), "aria-label": "Groups", to: scRoutingContext.url(react_core_1.SCRoutes.EVENTS_ROUTE_NAME, {}), component: react_core_1.Link }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "CalendarIcon" }) })))] })));
|
|
150
150
|
return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(className, classes.root) }, rest, { children: [(0, jsx_runtime_1.jsx)(NavigationMenuIconButtonComponent, Object.assign({}, NavigationMenuIconButtonComponentProps)), (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes.HOME_ROUTE_NAME, {}), className: classes.logo }, { children: (0, jsx_runtime_1.jsx)("img", { src: preferences[react_core_1.SCPreferences.LOGO_NAVBAR_LOGO], alt: "logo" }) })), !scUserContext.user && !preferences[react_core_1.SCPreferences.ADDONS_CLOSED_COMMUNITY] && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ color: "inherit", component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.SIGNUP_ROUTE_NAME, {}), className: classes.register }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.appBar.navigation.register", defaultMessage: "ui.appBar.navigation.register" }) }))), preferences[react_core_1.SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_ENABLED] && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: preferences[react_core_1.SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_TEXT] ? ((0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: preferences[react_core_1.SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_TEXT] }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ target: "blank", to: preferences[react_core_1.SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_URL], className: classes.customItem }, { children: (0, jsx_runtime_1.jsx)("img", { src: preferences[react_core_1.SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_IMAGE], alt: "custom_item" }) })) }))) : ((0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ target: "blank", to: preferences[react_core_1.SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_URL], className: classes.customItem }, { children: (0, jsx_runtime_1.jsx)("img", { src: preferences[react_core_1.SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_IMAGE], alt: "custom_item" }) }))) })), _children, (preferences[react_core_1.SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY] || scUserContext.user) && !disableSearch ? ((0, jsx_runtime_1.jsx)(SearchAutocomplete_1.default, Object.assign({ className: classes.search, blurOnSelect: true }, SearchAutocompleteProps))) : ((0, jsx_runtime_1.jsx)(material_1.Box, { className: classes.search })), startActions, scUserContext.user ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [showComposer && (0, jsx_runtime_1.jsx)(ComposerIconButton_1.default, Object.assign({ className: classes.composer }, ComposerIconButtonProps)), (0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: scUserContext.user.username }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, scUserContext.user), "aria-label": "Profile", className: classes.profile }, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: scUserContext.user.username, src: scUserContext.user.avatar }) })) })), (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: (0, classnames_1.default)(classes.notification, {
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { IconButtonProps } from '@mui/material';
|
|
2
|
+
export interface OnBoardingActionsButtonProps extends IconButtonProps {
|
|
3
|
+
isExpanded: boolean;
|
|
4
|
+
onExpandChange: () => void;
|
|
5
|
+
onHideOnBoarding: () => void;
|
|
6
|
+
}
|
|
7
|
+
export default function OnBoardingActionsButton(inProps: OnBoardingActionsButtonProps): JSX.Element;
|
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
const tslib_1 = require("tslib");
|
|
4
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
+
const react_1 = require("react");
|
|
6
|
+
const styles_1 = require("@mui/material/styles");
|
|
7
|
+
const material_1 = require("@mui/material");
|
|
8
|
+
const classnames_1 = tslib_1.__importDefault(require("classnames"));
|
|
9
|
+
const system_1 = require("@mui/system");
|
|
10
|
+
const react_intl_1 = require("react-intl");
|
|
11
|
+
const api_services_1 = require("@selfcommunity/api-services");
|
|
12
|
+
const Errors_1 = require("../../constants/Errors");
|
|
13
|
+
const utils_1 = require("@selfcommunity/utils");
|
|
14
|
+
const types_1 = require("@selfcommunity/types");
|
|
15
|
+
const constants_1 = require("./constants");
|
|
16
|
+
const classes = {
|
|
17
|
+
root: `${constants_1.PREFIX}-actions-button-root`,
|
|
18
|
+
drawerRoot: `${constants_1.PREFIX}-actions-drawer-root`,
|
|
19
|
+
menuRoot: `${constants_1.PREFIX}-actions-menu-root`,
|
|
20
|
+
paper: `${constants_1.PREFIX}-actions-paper`,
|
|
21
|
+
item: `${constants_1.PREFIX}-actions-item`
|
|
22
|
+
};
|
|
23
|
+
const Root = (0, styles_1.styled)(material_1.IconButton, {
|
|
24
|
+
name: constants_1.PREFIX,
|
|
25
|
+
slot: 'Root',
|
|
26
|
+
overridesResolver: (props, styles) => styles.root
|
|
27
|
+
})(() => ({}));
|
|
28
|
+
const SwipeableDrawerRoot = (0, styles_1.styled)(material_1.SwipeableDrawer, {
|
|
29
|
+
name: constants_1.PREFIX,
|
|
30
|
+
slot: 'Root',
|
|
31
|
+
overridesResolver: (props, styles) => styles.drawerRoot
|
|
32
|
+
})(() => ({}));
|
|
33
|
+
const MenuRoot = (0, styles_1.styled)(material_1.Menu, {
|
|
34
|
+
name: constants_1.PREFIX,
|
|
35
|
+
slot: 'Root',
|
|
36
|
+
overridesResolver: (props, styles) => styles.menuRoot
|
|
37
|
+
})(() => ({}));
|
|
38
|
+
function OnBoardingActionsButton(inProps) {
|
|
39
|
+
// PROPS
|
|
40
|
+
const props = (0, system_1.useThemeProps)({
|
|
41
|
+
props: inProps,
|
|
42
|
+
name: constants_1.PREFIX
|
|
43
|
+
});
|
|
44
|
+
const { className = null, isExpanded, onExpandChange, onHideOnBoarding } = props, rest = tslib_1.__rest(props, ["className", "isExpanded", "onExpandChange", "onHideOnBoarding"]);
|
|
45
|
+
// STATE
|
|
46
|
+
const [anchorEl, setAnchorEl] = (0, react_1.useState)(null);
|
|
47
|
+
const theme = (0, material_1.useTheme)();
|
|
48
|
+
const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'));
|
|
49
|
+
// HANDLERS
|
|
50
|
+
const handleOpen = (event) => {
|
|
51
|
+
setAnchorEl(event.currentTarget);
|
|
52
|
+
};
|
|
53
|
+
const handleClose = () => {
|
|
54
|
+
setAnchorEl(null);
|
|
55
|
+
};
|
|
56
|
+
/**
|
|
57
|
+
* Updates onBoarding dynamic preference
|
|
58
|
+
*/
|
|
59
|
+
const hideOnBoarding = () => {
|
|
60
|
+
api_services_1.PreferenceService.updatePreferences({ [`${types_1.SCPreferenceName.ONBOARDING_HIDDEN}`]: true })
|
|
61
|
+
.then(() => {
|
|
62
|
+
onHideOnBoarding();
|
|
63
|
+
})
|
|
64
|
+
.catch((e) => {
|
|
65
|
+
utils_1.Logger.error(Errors_1.SCOPE_SC_UI, e);
|
|
66
|
+
});
|
|
67
|
+
};
|
|
68
|
+
const renderList = () => {
|
|
69
|
+
if (isMobile) {
|
|
70
|
+
return [
|
|
71
|
+
isExpanded ? ((0, jsx_runtime_1.jsx)(material_1.ListItem, Object.assign({ className: classes.item }, { children: (0, jsx_runtime_1.jsxs)(material_1.ListItemButton, Object.assign({ onClick: onExpandChange }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "expand_less" }) }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.actionsMenu.view.less", defaultMessage: "ui.onBoardingWidget.actionsMenu.view.less" })] })) }), "expand_less")) : ((0, jsx_runtime_1.jsx)(material_1.ListItem, Object.assign({ className: classes.item }, { children: (0, jsx_runtime_1.jsxs)(material_1.ListItemButton, Object.assign({ onClick: onExpandChange }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "expand_more" }) }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.actionsMenu.view.more", defaultMessage: "ui.onBoardingWidget.actionsMenu.view.more" })] })) }), "expand_more")),
|
|
72
|
+
(0, jsx_runtime_1.jsx)(material_1.ListItem, Object.assign({ className: classes.item }, { children: (0, jsx_runtime_1.jsxs)(material_1.ListItemButton, Object.assign({ onClick: hideOnBoarding }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.actionsMenu.close", defaultMessage: "ui.onBoardingWidget.actionsMenu.close" })] })) }), "close")
|
|
73
|
+
];
|
|
74
|
+
}
|
|
75
|
+
else {
|
|
76
|
+
return [
|
|
77
|
+
isExpanded ? ((0, jsx_runtime_1.jsxs)(material_1.MenuItem, Object.assign({ className: classes.item, onClick: onExpandChange }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "expand_less" }) }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.actionsMenu.view.less", defaultMessage: "ui.onBoardingWidget.actionsMenu.view.less" })] }), "expand_less")) : ((0, jsx_runtime_1.jsxs)(material_1.MenuItem, Object.assign({ className: classes.item, onClick: onExpandChange }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "expand_more" }) }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.actionsMenu.view.more", defaultMessage: "ui.onBoardingWidget.actionsMenu.view.more" })] }), "expand_more")),
|
|
78
|
+
(0, jsx_runtime_1.jsxs)(material_1.MenuItem, Object.assign({ className: classes.item, onClick: hideOnBoarding }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.actionsMenu.close", defaultMessage: "ui.onBoardingWidget.actionsMenu.close" })] }), "close")
|
|
79
|
+
];
|
|
80
|
+
}
|
|
81
|
+
};
|
|
82
|
+
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { onClick: handleOpen }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "more_vert" }) })), isMobile ? ((0, jsx_runtime_1.jsx)(SwipeableDrawerRoot, Object.assign({ onClick: () => setAnchorEl(null), className: classes.drawerRoot, anchor: "bottom", open: Boolean(anchorEl), onClose: handleClose, onOpen: handleOpen, PaperProps: { className: classes.paper }, disableSwipeToOpen: true }, { children: (0, jsx_runtime_1.jsx)(material_1.List, { children: renderList() }) }))) : ((0, jsx_runtime_1.jsx)(MenuRoot, Object.assign({ onClick: () => setAnchorEl(null), className: classes.menuRoot, anchorEl: anchorEl, open: Boolean(anchorEl), onClose: handleClose, PaperProps: { className: classes.paper } }, { children: renderList() })))] }));
|
|
83
|
+
}
|
|
84
|
+
exports.default = OnBoardingActionsButton;
|
|
@@ -28,6 +28,7 @@ const header_1 = tslib_1.__importDefault(require("../../assets/onBoarding/header
|
|
|
28
28
|
const BaseDialog_1 = tslib_1.__importDefault(require("../../shared/BaseDialog"));
|
|
29
29
|
const pubsub_js_1 = tslib_1.__importDefault(require("pubsub-js"));
|
|
30
30
|
const PubSub_1 = require("../../constants/PubSub");
|
|
31
|
+
const ActionsButton_1 = tslib_1.__importDefault(require("./ActionsButton"));
|
|
31
32
|
const classes = {
|
|
32
33
|
root: `${constants_1.PREFIX}-root`,
|
|
33
34
|
content: `${constants_1.PREFIX}-content`,
|
|
@@ -36,7 +37,9 @@ const classes = {
|
|
|
36
37
|
intro: `${constants_1.PREFIX}-intro`,
|
|
37
38
|
steps: `${constants_1.PREFIX}-steps`,
|
|
38
39
|
stepsMobile: `${constants_1.PREFIX}-steps-mobile`,
|
|
39
|
-
stepContent: `${constants_1.PREFIX}-step-content
|
|
40
|
+
stepContent: `${constants_1.PREFIX}-step-content`,
|
|
41
|
+
dialogRoot: `${constants_1.PREFIX}-dialog-root`,
|
|
42
|
+
dialogContent: `${constants_1.PREFIX}-dialog-content`
|
|
40
43
|
};
|
|
41
44
|
const Root = (0, styles_1.styled)(Widget_1.default, {
|
|
42
45
|
name: constants_1.PREFIX,
|
|
@@ -48,6 +51,11 @@ const AccordionRoot = (0, styles_1.styled)(material_1.Accordion, {
|
|
|
48
51
|
slot: 'AccordionRoot',
|
|
49
52
|
overridesResolver: (props, styles) => styles.accordionRoot
|
|
50
53
|
})(() => ({}));
|
|
54
|
+
const DialogRoot = (0, styles_1.styled)(BaseDialog_1.default, {
|
|
55
|
+
name: constants_1.PREFIX,
|
|
56
|
+
slot: 'Root',
|
|
57
|
+
overridesResolver: (props, styles) => styles.dialogRoot
|
|
58
|
+
})(({ theme }) => ({}));
|
|
51
59
|
const OnBoardingWidget = (inProps) => {
|
|
52
60
|
// PROPS
|
|
53
61
|
const props = (0, system_1.useThemeProps)({
|
|
@@ -72,7 +80,9 @@ const OnBoardingWidget = (inProps) => {
|
|
|
72
80
|
const prevContentsStep = (0, react_core_1.usePreviousValue)(currentContentsStep);
|
|
73
81
|
const currentCategoriesStep = steps === null || steps === void 0 ? void 0 : steps.find((s) => s.step === types_1.SCOnBoardingStepType.CATEGORIES);
|
|
74
82
|
const prevCategoriesStep = (0, react_core_1.usePreviousValue)(currentCategoriesStep);
|
|
75
|
-
const [
|
|
83
|
+
const [showNoCategoriesModal, setShowNoCategoriesModal] = (0, react_1.useState)(false);
|
|
84
|
+
const [showCategoriesWarningModal, setShowWarningCategoriesModal] = (0, react_1.useState)(false);
|
|
85
|
+
const [isGenerating, setIsGenerating] = (0, react_1.useState)(false);
|
|
76
86
|
// CONTEXT
|
|
77
87
|
const scUserContext = (0, react_core_1.useSCUser)();
|
|
78
88
|
const isAdmin = (0, react_1.useMemo)(() => react_core_1.UserUtils.isCommunityCreator(scUserContext.user), [scUserContext.user]);
|
|
@@ -80,7 +90,11 @@ const OnBoardingWidget = (inProps) => {
|
|
|
80
90
|
const scPreferencesContext = (0, react_core_1.useSCPreferences)();
|
|
81
91
|
const scThemeContext = (0, react_core_1.useSCTheme)();
|
|
82
92
|
const { enqueueSnackbar } = (0, notistack_1.useSnackbar)();
|
|
83
|
-
const
|
|
93
|
+
const showOnBoarding = (0, react_1.useMemo)(() => scPreferencesContext.preferences &&
|
|
94
|
+
react_core_1.SCPreferences.CONFIGURATIONS_ONBOARDING_ENABLED in scPreferencesContext.preferences &&
|
|
95
|
+
react_core_1.SCPreferences.CONFIGURATIONS_ONBOARDING_HIDDEN in scPreferencesContext.preferences &&
|
|
96
|
+
scPreferencesContext.preferences[react_core_1.SCPreferences.CONFIGURATIONS_ONBOARDING_ENABLED].value &&
|
|
97
|
+
!scPreferencesContext.preferences[react_core_1.SCPreferences.CONFIGURATIONS_ONBOARDING_HIDDEN].value, [scPreferencesContext.preferences]);
|
|
84
98
|
// HOOKS
|
|
85
99
|
const theme = (0, material_1.useTheme)();
|
|
86
100
|
const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'));
|
|
@@ -166,22 +180,29 @@ const OnBoardingWidget = (inProps) => {
|
|
|
166
180
|
};
|
|
167
181
|
const generateContent = (stepId) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
|
|
168
182
|
if (!isLoading && !categories.length) {
|
|
169
|
-
|
|
183
|
+
setShowNoCategoriesModal(true);
|
|
184
|
+
}
|
|
185
|
+
else if (stepId === types_1.SCOnBoardingStepIdType.CATEGORIES) {
|
|
186
|
+
setShowWarningCategoriesModal(true);
|
|
170
187
|
}
|
|
171
188
|
else {
|
|
172
|
-
yield
|
|
173
|
-
.then(() => {
|
|
174
|
-
setIsGenerating(true);
|
|
175
|
-
})
|
|
176
|
-
.catch((error) => {
|
|
177
|
-
utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
|
|
178
|
-
enqueueSnackbar((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.common.error.action", defaultMessage: "ui.common.error.action" }), {
|
|
179
|
-
variant: 'error',
|
|
180
|
-
autoHideDuration: 3000
|
|
181
|
-
});
|
|
182
|
-
});
|
|
189
|
+
yield startStep(stepId);
|
|
183
190
|
}
|
|
184
191
|
});
|
|
192
|
+
const startStep = (stepId) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
|
|
193
|
+
showCategoriesWarningModal && setShowWarningCategoriesModal(false);
|
|
194
|
+
yield api_services_1.OnBoardingService.startAStep(stepId, GenerateContentsParams)
|
|
195
|
+
.then(() => {
|
|
196
|
+
setIsGenerating(true);
|
|
197
|
+
})
|
|
198
|
+
.catch((error) => {
|
|
199
|
+
utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
|
|
200
|
+
enqueueSnackbar((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.common.error.action", defaultMessage: "ui.common.error.action" }), {
|
|
201
|
+
variant: 'error',
|
|
202
|
+
autoHideDuration: 3000
|
|
203
|
+
});
|
|
204
|
+
});
|
|
205
|
+
});
|
|
185
206
|
const handlePreferencesUpdate = () => {
|
|
186
207
|
api_services_1.PreferenceService.getAllPreferences().then((preferences) => {
|
|
187
208
|
const prefs = preferences['results'].reduce((obj, p) => (Object.assign(Object.assign({}, obj), { [`${p.section}.${p.name}`]: p })), {});
|
|
@@ -191,7 +212,7 @@ const OnBoardingWidget = (inProps) => {
|
|
|
191
212
|
};
|
|
192
213
|
const handleCategoriesClick = () => {
|
|
193
214
|
fetchPlatform('/contents/interests/');
|
|
194
|
-
|
|
215
|
+
setShowNoCategoriesModal(false);
|
|
195
216
|
};
|
|
196
217
|
/**
|
|
197
218
|
* Notify when a category info changes
|
|
@@ -281,10 +302,10 @@ const OnBoardingWidget = (inProps) => {
|
|
|
281
302
|
}
|
|
282
303
|
return content;
|
|
283
304
|
};
|
|
284
|
-
if (!isAdmin) {
|
|
305
|
+
if (!isAdmin || !showOnBoarding) {
|
|
285
306
|
return (0, jsx_runtime_1.jsx)(HiddenPlaceholder_1.default, {});
|
|
286
307
|
}
|
|
287
|
-
return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: (0, jsx_runtime_1.jsxs)(AccordionRoot, Object.assign({ defaultExpanded: true,
|
|
308
|
+
return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: (0, jsx_runtime_1.jsxs)(AccordionRoot, Object.assign({ defaultExpanded: true, className: classes.accordionRoot, expanded: expanded }, { children: [(0, jsx_runtime_1.jsx)(material_1.AccordionSummary, Object.assign({ expandIcon: (0, jsx_runtime_1.jsx)(ActionsButton_1.default, { isExpanded: expanded, onExpandChange: handleExpand, onHideOnBoarding: handlePreferencesUpdate }), "aria-controls": "accordion", id: "onBoarding-accordion" }, { children: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: expanded ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!isMobile ? ((0, jsx_runtime_1.jsx)(material_1.CardMedia, { className: classes.logo, component: "img", src: header_1.default })) : ((0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ variant: "h4" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ color: "secondary", fontSize: "medium" }, { children: "ai_stars" })), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.accordion.expanded.title.mobile", defaultMessage: "ui.onBoardingWidget.accordion.expanded.title.mobile", values: {
|
|
288
309
|
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
|
|
289
310
|
// @ts-ignore
|
|
290
311
|
b: (chunks) => (0, jsx_runtime_1.jsx)("strong", { children: chunks })
|
|
@@ -303,6 +324,10 @@ const OnBoardingWidget = (inProps) => {
|
|
|
303
324
|
// @ts-ignore
|
|
304
325
|
// eslint-disable-next-line prettier/prettier
|
|
305
326
|
icon: (...chunks) => (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ color: "secondary", fontSize: "medium" }, { children: chunks }))
|
|
306
|
-
} }) }))) }) })), (0, jsx_runtime_1.jsx)(material_1.AccordionDetails, { children: (0, jsx_runtime_1.jsx)(Widget_1.default, Object.assign({ className: classes.content, elevation: 0 }, { children: loading ? ((0, jsx_runtime_1.jsx)(Skeleton_1.default, {})) : ((0, jsx_runtime_1.jsxs)(material_1.CardContent, { children: [(0, jsx_runtime_1.jsx)(material_1.List, Object.assign({ className: isMobile ? classes.stepsMobile : classes.steps }, { children: steps === null || steps === void 0 ? void 0 : steps.map((step) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: isMobile ? ((0, jsx_runtime_1.jsx)(material_1.Chip, { size: "small", label: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.onBoardingWidget.${step.step}`, defaultMessage: `ui.onBoardingWidget.${step.step}` }), ' ', step.status === types_1.SCOnBoardingStepStatusType.COMPLETED && ((0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ color: (step === null || step === void 0 ? void 0 : step.status) === types_1.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 === types_1.SCOnBoardingStepStatusType.COMPLETED ? 'success' : 'default' })) : ((0, jsx_runtime_1.jsxs)(material_1.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: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(material_1.Checkbox, { edge: "start", checked: step.status === types_1.SCOnBoardingStepStatusType.COMPLETED, tabIndex: -1, disableRipple: true, inputProps: { 'aria-labelledby': step.step }, size: 'small' }) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.onBoardingWidget.${step.step}`, defaultMessage: `ui.onBoardingWidget.${step.step}` }) })] }))) }, step.id))) })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.stepContent }, { children: [(0, jsx_runtime_1.jsx)(material_1.Fade, Object.assign({ in: true, timeout: 2400 }, { children: (0, jsx_runtime_1.jsx)(material_1.Box, { children: getStepContent() }) })),
|
|
327
|
+
} }) }))) }) })), (0, jsx_runtime_1.jsx)(material_1.AccordionDetails, { children: (0, jsx_runtime_1.jsx)(Widget_1.default, Object.assign({ className: classes.content, elevation: 0 }, { children: loading ? ((0, jsx_runtime_1.jsx)(Skeleton_1.default, {})) : ((0, jsx_runtime_1.jsxs)(material_1.CardContent, { children: [(0, jsx_runtime_1.jsx)(material_1.List, Object.assign({ className: isMobile ? classes.stepsMobile : classes.steps }, { children: steps === null || steps === void 0 ? void 0 : steps.map((step) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: isMobile ? ((0, jsx_runtime_1.jsx)(material_1.Chip, { size: "small", label: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.onBoardingWidget.${step.step}`, defaultMessage: `ui.onBoardingWidget.${step.step}` }), ' ', step.status === types_1.SCOnBoardingStepStatusType.COMPLETED && ((0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ color: (step === null || step === void 0 ? void 0 : step.status) === types_1.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 === types_1.SCOnBoardingStepStatusType.COMPLETED ? 'success' : 'default' })) : ((0, jsx_runtime_1.jsxs)(material_1.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: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(material_1.Checkbox, { edge: "start", checked: step.status === types_1.SCOnBoardingStepStatusType.COMPLETED, tabIndex: -1, disableRipple: true, inputProps: { 'aria-labelledby': step.step }, size: 'small' }) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.onBoardingWidget.${step.step}`, defaultMessage: `ui.onBoardingWidget.${step.step}` }) })] }))) }, step.id))) })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.stepContent }, { children: [(0, jsx_runtime_1.jsx)(material_1.Fade, Object.assign({ in: true, timeout: 2400 }, { children: (0, jsx_runtime_1.jsx)(material_1.Box, { children: getStepContent() }) })), showNoCategoriesModal && ((0, jsx_runtime_1.jsx)(BaseDialog_1.default, Object.assign({ title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.ai.no.categories", defaultMessage: "ui.onBoardingWidget.ai.no.categories" }), DialogContentProps: { dividers: false }, open: showNoCategoriesModal, onClose: () => setShowNoCategoriesModal(false), actions: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ color: "secondary", onClick: () => setShowNoCategoriesModal(false) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.ai.no.categories.cancel", defaultMessage: "ui.onBoardingWidget.ai.no.categories.cancel" }) })) }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ color: "primary", onClick: handleCategoriesClick, startIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ fontSize: "small" }, { children: "edit" })) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.ai.no.categories.link", defaultMessage: "ui.onBoardingWidget.ai.no.categories.link" }) })) }))), showCategoriesWarningModal && ((0, jsx_runtime_1.jsx)(DialogRoot, Object.assign({ className: classes.dialogRoot, title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.ai.categories.warning.title", defaultMessage: "ui.onBoardingWidget.ai.categories.warning.title" }), DialogContentProps: { dividers: false }, open: showCategoriesWarningModal, onClose: () => setShowWarningCategoriesModal(false), actions: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: "outlined", color: "primary", onClick: () => setShowWarningCategoriesModal(false) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.ai.categories.warning.button.close", defaultMessage: "ui.onBoardingWidget.ai.categories.warning.button.close" }) })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: "contained", color: "secondary", onClick: () => startStep(types_1.SCOnBoardingStepIdType.CATEGORIES), endIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ fontSize: "small" }, { children: "magic_wand" })) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.ai.categories.warning.button.generate", defaultMessage: "ui.onBoardingWidget.ai.categories.warning.button.generate" }) }))] }) }, { children: (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: classes.dialogContent }, { children: [(0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.ai.categories.warning.info", defaultMessage: "ui.onBoardingWidget.ai.categories.warning.info" }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.ai.categories.warning.confirm", defaultMessage: "ui.onBoardingWidget.ai.categories.warning.confirm", values: {
|
|
328
|
+
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
|
|
329
|
+
// @ts-ignore
|
|
330
|
+
b: (chunks) => (0, jsx_runtime_1.jsx)("b", { children: chunks })
|
|
331
|
+
} })] })) })))] }))] })) })) })] })) })));
|
|
307
332
|
};
|
|
308
333
|
exports.default = OnBoardingWidget;
|
|
@@ -2,22 +2,23 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
const tslib_1 = require("tslib");
|
|
4
4
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
-
const react_1 = require("react");
|
|
6
|
-
const styles_1 = require("@mui/material/styles");
|
|
7
5
|
const material_1 = require("@mui/material");
|
|
8
|
-
const react_intl_1 = require("react-intl");
|
|
9
6
|
const Icon_1 = tslib_1.__importDefault(require("@mui/material/Icon"));
|
|
10
|
-
const
|
|
7
|
+
const styles_1 = require("@mui/material/styles");
|
|
11
8
|
const system_1 = require("@mui/system");
|
|
12
|
-
const react_core_1 = require("@selfcommunity/react-core");
|
|
13
|
-
const ConfirmDialog_1 = tslib_1.__importDefault(require("../../shared/ConfirmDialog/ConfirmDialog"));
|
|
14
9
|
const api_services_1 = require("@selfcommunity/api-services");
|
|
15
|
-
const
|
|
10
|
+
const react_core_1 = require("@selfcommunity/react-core");
|
|
16
11
|
const utils_1 = require("@selfcommunity/utils");
|
|
12
|
+
const classnames_1 = tslib_1.__importDefault(require("classnames"));
|
|
17
13
|
const notistack_1 = require("notistack");
|
|
18
14
|
const pubsub_js_1 = tslib_1.__importDefault(require("pubsub-js"));
|
|
19
|
-
const
|
|
15
|
+
const react_1 = require("react");
|
|
16
|
+
const react_intl_1 = require("react-intl");
|
|
20
17
|
const EventForm_1 = tslib_1.__importDefault(require("../../components/EventForm"));
|
|
18
|
+
const EventActionsMenu_1 = require("../../constants/EventActionsMenu");
|
|
19
|
+
const PubSub_1 = require("../../constants/PubSub");
|
|
20
|
+
const ConfirmDialog_1 = tslib_1.__importDefault(require("../../shared/ConfirmDialog/ConfirmDialog"));
|
|
21
|
+
const events_1 = require("../../utils/events");
|
|
21
22
|
const PREFIX = 'SCEventActionsMenu';
|
|
22
23
|
const classes = {
|
|
23
24
|
root: `${PREFIX}-root`,
|
|
@@ -84,12 +85,7 @@ function EventActionsMenu(inProps) {
|
|
|
84
85
|
const scUserContext = (0, react_core_1.useSCUser)();
|
|
85
86
|
const { scEvent, setSCEvent } = (0, react_core_1.useSCFetchEvent)({ id: eventId, event });
|
|
86
87
|
const isEventAdmin = (0, react_1.useMemo)(() => { var _a; return scUserContext.user && ((_a = scEvent === null || scEvent === void 0 ? void 0 : scEvent.managed_by) === null || _a === void 0 ? void 0 : _a.id) === scUserContext.user.id; }, [scUserContext.user, (_a = scEvent === null || scEvent === void 0 ? void 0 : scEvent.managed_by) === null || _a === void 0 ? void 0 : _a.id]);
|
|
87
|
-
const isEventFinished = (0, react_1.useMemo)(() =>
|
|
88
|
-
if (scEvent && !scEvent.running) {
|
|
89
|
-
return new Date().getTime() > new Date(scEvent.end_date || scEvent.start_date).getTime();
|
|
90
|
-
}
|
|
91
|
-
return false;
|
|
92
|
-
}, [scEvent]);
|
|
88
|
+
const isEventFinished = (0, react_1.useMemo)(() => (0, events_1.checkEventFinished)(scEvent), [scEvent]);
|
|
93
89
|
// HANDLERS
|
|
94
90
|
const handleOpen = (event) => {
|
|
95
91
|
setAnchorEl(event.currentTarget);
|
|
@@ -155,7 +151,7 @@ function EventActionsMenu(inProps) {
|
|
|
155
151
|
const renderList = () => {
|
|
156
152
|
return [
|
|
157
153
|
(0, jsx_runtime_1.jsxs)(material_1.MenuItem, Object.assign({ className: classes.item, onClick: () => handleAction(EventActionsMenu_1.GET_EVENT_LINK) }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "link" }) }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.shared.eventActionsMenu.item.link", defaultMessage: "ui.shared.eventActionsMenu.item.link" })] }), "link"),
|
|
158
|
-
(0, jsx_runtime_1.jsxs)(material_1.MenuItem, Object.assign({ className: classes.item, onClick: () => handleAction(EventActionsMenu_1.ADD_EVENT_TO_CALENDAR) }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "CalendarIcon" }) }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.shared.eventActionsMenu.item.calendar", defaultMessage: "ui.shared.eventActionsMenu.item.calendar" })] }), "calendar"),
|
|
154
|
+
!isEventFinished && ((0, jsx_runtime_1.jsxs)(material_1.MenuItem, Object.assign({ className: classes.item, onClick: () => handleAction(EventActionsMenu_1.ADD_EVENT_TO_CALENDAR) }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "CalendarIcon" }) }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.shared.eventActionsMenu.item.calendar", defaultMessage: "ui.shared.eventActionsMenu.item.calendar" })] }), "calendar")),
|
|
159
155
|
isEventAdmin &&
|
|
160
156
|
!isEventFinished && [
|
|
161
157
|
(0, jsx_runtime_1.jsx)(material_1.Divider, {}, "divider"),
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.checkEventFinished = void 0;
|
|
4
|
+
function checkEventFinished(event) {
|
|
5
|
+
if (event && !event.running) {
|
|
6
|
+
return new Date().getTime() > new Date(event.end_date || event.start_date).getTime();
|
|
7
|
+
}
|
|
8
|
+
return false;
|
|
9
|
+
}
|
|
10
|
+
exports.checkEventFinished = checkEventFinished;
|
|
@@ -13,6 +13,7 @@ import { SCGroupEventType, SCTopicType } from '../../constants/PubSub';
|
|
|
13
13
|
import Bullet from '../../shared/Bullet';
|
|
14
14
|
import Calendar from '../../shared/Calendar';
|
|
15
15
|
import EventActionsMenu from '../../shared/EventActionsMenu';
|
|
16
|
+
import { checkEventFinished } from '../../utils/events';
|
|
16
17
|
import EditEventButton from '../EditEventButton';
|
|
17
18
|
import EventInviteButton from '../EventInviteButton';
|
|
18
19
|
import EventSubscribeButton from '../EventSubscribeButton';
|
|
@@ -93,12 +94,7 @@ export default function EventHeader(inProps) {
|
|
|
93
94
|
const updatesSubscription = useRef(null);
|
|
94
95
|
// CONST
|
|
95
96
|
const isEventAdmin = useMemo(() => scUserContext.user && (scEvent === null || scEvent === void 0 ? void 0 : scEvent.managed_by.id) === scUserContext.user.id, [scUserContext.user, scEvent === null || scEvent === void 0 ? void 0 : scEvent.managed_by.id]);
|
|
96
|
-
const isEventFinished = useMemo(() =>
|
|
97
|
-
if (scEvent && !scEvent.running) {
|
|
98
|
-
return new Date().getTime() > new Date(scEvent.end_date || scEvent.start_date).getTime();
|
|
99
|
-
}
|
|
100
|
-
return false;
|
|
101
|
-
}, [scEvent]);
|
|
97
|
+
const isEventFinished = useMemo(() => checkEventFinished(scEvent), [scEvent]);
|
|
102
98
|
/**
|
|
103
99
|
* Subscriber for pubsub callback
|
|
104
100
|
*/
|
|
@@ -1,13 +1,16 @@
|
|
|
1
1
|
import { __rest } from "tslib";
|
|
2
|
-
import { jsx as _jsx,
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
3
3
|
import { useMemo, useState } from 'react';
|
|
4
4
|
import { styled } from '@mui/material/styles';
|
|
5
|
-
import { Divider, Icon, IconButton, List, ListItem, ListItemButton, Menu, MenuItem, SwipeableDrawer, useMediaQuery, useTheme } from '@mui/material';
|
|
5
|
+
import { Divider, Icon, IconButton, List, ListItem, ListItemButton, ListItemIcon, Menu, MenuItem, SwipeableDrawer, useMediaQuery, useTheme } from '@mui/material';
|
|
6
6
|
import { Link, SCPreferences, SCRoutes, UserUtils, useSCPreferences, useSCRouting, useSCUser } from '@selfcommunity/react-core';
|
|
7
7
|
import classNames from 'classnames';
|
|
8
8
|
import { useThemeProps } from '@mui/system';
|
|
9
9
|
import { FormattedMessage } from 'react-intl';
|
|
10
|
-
import { UserService } from '@selfcommunity/api-services';
|
|
10
|
+
import { PreferenceService, UserService } from '@selfcommunity/api-services';
|
|
11
|
+
import { SCOPE_SC_UI } from '../../constants/Errors';
|
|
12
|
+
import { Logger } from '@selfcommunity/utils';
|
|
13
|
+
import { SCPreferenceName } from '@selfcommunity/types';
|
|
11
14
|
const PREFIX = 'SCNavigationSettingsIconButton';
|
|
12
15
|
const classes = {
|
|
13
16
|
root: `${PREFIX}-root`,
|
|
@@ -35,7 +38,9 @@ const PREFERENCES = [
|
|
|
35
38
|
SCPreferences.CONFIGURATIONS_FOLLOW_ENABLED,
|
|
36
39
|
SCPreferences.CONFIGURATIONS_POST_TYPE_ENABLED,
|
|
37
40
|
SCPreferences.CONFIGURATIONS_DISCUSSION_TYPE_ENABLED,
|
|
38
|
-
SCPreferences.ADDONS_LOYALTY_POINTS_COLLECTION
|
|
41
|
+
SCPreferences.ADDONS_LOYALTY_POINTS_COLLECTION,
|
|
42
|
+
SCPreferences.CONFIGURATIONS_ONBOARDING_ENABLED,
|
|
43
|
+
SCPreferences.CONFIGURATIONS_ONBOARDING_HIDDEN
|
|
39
44
|
];
|
|
40
45
|
/**
|
|
41
46
|
* > API documentation for the Community-JS Navigation Settings Icon Button component. Learn about the available props and the CSS API.
|
|
@@ -92,7 +97,7 @@ export default function NavigationSettingsIconButton(inProps) {
|
|
|
92
97
|
setAnchorEl(null);
|
|
93
98
|
};
|
|
94
99
|
/**
|
|
95
|
-
* Fetches
|
|
100
|
+
* Fetches platform url
|
|
96
101
|
* @param query
|
|
97
102
|
*/
|
|
98
103
|
const fetchPlatform = (query) => {
|
|
@@ -101,6 +106,14 @@ export default function NavigationSettingsIconButton(inProps) {
|
|
|
101
106
|
window.open(platformUrl, '_blank').focus();
|
|
102
107
|
});
|
|
103
108
|
};
|
|
109
|
+
/**
|
|
110
|
+
* Updates onBoarding dynamic preference
|
|
111
|
+
*/
|
|
112
|
+
const showOnBoarding = () => {
|
|
113
|
+
PreferenceService.updatePreferences({ [`${SCPreferenceName.ONBOARDING_HIDDEN}`]: false }).catch((e) => {
|
|
114
|
+
Logger.error(SCOPE_SC_UI, e);
|
|
115
|
+
});
|
|
116
|
+
};
|
|
104
117
|
const handleLogout = () => {
|
|
105
118
|
scUserContext.logout();
|
|
106
119
|
};
|
|
@@ -119,6 +132,7 @@ export default function NavigationSettingsIconButton(inProps) {
|
|
|
119
132
|
...(isAdmin
|
|
120
133
|
? [
|
|
121
134
|
_jsx(Divider, {}, "admin_divider"),
|
|
135
|
+
preferences[SCPreferences.CONFIGURATIONS_ONBOARDING_ENABLED] && preferences[SCPreferences.CONFIGURATIONS_ONBOARDING_HIDDEN] && (_jsx(ListItem, Object.assign({ className: classes.item }, { children: _jsxs(ListItemButton, Object.assign({ onClick: showOnBoarding }, { children: [_jsx(FormattedMessage, { id: "ui.navigationSettingsIconButton.onboarding", defaultMessage: "ui.navigationSettingsIconButton.onboarding" }), _jsx(ListItemIcon, { children: _jsx(Icon, { children: "magic_wand" }) })] })) }), "onboarding")),
|
|
122
136
|
_jsx(ListItem, Object.assign({ className: classes.item }, { children: _jsx(ListItemButton, Object.assign({ onClick: () => fetchPlatform('') }, { children: _jsx(FormattedMessage, { id: "ui.navigationSettingsIconButton.platform", defaultMessage: "ui.navigationSettingsIconButton.platform" }) })) }), "platform")
|
|
123
137
|
]
|
|
124
138
|
: []),
|
|
@@ -147,6 +161,7 @@ export default function NavigationSettingsIconButton(inProps) {
|
|
|
147
161
|
...(isAdmin
|
|
148
162
|
? [
|
|
149
163
|
_jsx(Divider, {}, "platform_divider"),
|
|
164
|
+
preferences[SCPreferences.CONFIGURATIONS_ONBOARDING_ENABLED] && preferences[SCPreferences.CONFIGURATIONS_ONBOARDING_HIDDEN] && (_jsxs(MenuItem, Object.assign({ className: classes.item, onClick: showOnBoarding }, { children: [_jsx(FormattedMessage, { id: "ui.navigationSettingsIconButton.onboarding", defaultMessage: "ui.navigationSettingsIconButton.onboarding" }), _jsx(ListItemIcon, { children: _jsx(Icon, { children: "magic_wand" }) })] }), "onboarding")),
|
|
150
165
|
_jsx(MenuItem, Object.assign({ className: classes.item, onClick: () => fetchPlatform('') }, { children: _jsx(FormattedMessage, { id: "ui.navigationSettingsIconButton.platform", defaultMessage: "ui.navigationSettingsIconButton.platform" }) }), "platform")
|
|
151
166
|
]
|
|
152
167
|
: []),
|
|
@@ -142,7 +142,7 @@ export default function NavigationToolbar(inProps) {
|
|
|
142
142
|
(preferences[SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY] || scUserContext.user) && (_jsx(IconButton, Object.assign({ className: classNames(classes.explore, { [classes.active]: value.startsWith(scRoutingContext.url(SCRoutes.EXPLORE_ROUTE_NAME, {})) }), "aria-label": "Explore", to: scRoutingContext.url(SCRoutes.EXPLORE_ROUTE_NAME, {}), component: Link }, { children: _jsx(Icon, { children: "explore" }) }))), groupsEnabled && scUserContext.user && (_jsx(IconButton, Object.assign({ className: classNames(classes.groups, {
|
|
143
143
|
[classes.active]: value.startsWith(scRoutingContext.url(SCRoutes.GROUPS_SUBSCRIBED_ROUTE_NAME, {})) ||
|
|
144
144
|
value.startsWith(scRoutingContext.url(SCRoutes.GROUPS_ROUTE_NAME, {}))
|
|
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, {
|
|
145
|
+
}), "aria-label": "Groups", to: scRoutingContext.url(SCRoutes.GROUPS_SUBSCRIBED_ROUTE_NAME, {}), component: Link }, { children: _jsx(Icon, { children: "groups" }) }))), eventsEnabled && (scUserContext.user || preferences[SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY]) && (_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
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, {
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { IconButtonProps } from '@mui/material';
|
|
2
|
+
export interface OnBoardingActionsButtonProps extends IconButtonProps {
|
|
3
|
+
isExpanded: boolean;
|
|
4
|
+
onExpandChange: () => void;
|
|
5
|
+
onHideOnBoarding: () => void;
|
|
6
|
+
}
|
|
7
|
+
export default function OnBoardingActionsButton(inProps: OnBoardingActionsButtonProps): JSX.Element;
|