@selfcommunity/react-ui 0.9.0-alpha.11 → 0.9.0-alpha.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/lib/cjs/components/NavigationSettingsIconButton/NavigationSettingsIconButton.js +30 -2
  2. package/lib/cjs/components/OnBoardingWidget/ActionsButton.d.ts +7 -0
  3. package/lib/cjs/components/OnBoardingWidget/ActionsButton.js +84 -0
  4. package/lib/cjs/components/OnBoardingWidget/OnBoardingWidget.js +44 -19
  5. package/lib/esm/components/NavigationSettingsIconButton/NavigationSettingsIconButton.js +33 -5
  6. package/lib/esm/components/OnBoardingWidget/ActionsButton.d.ts +7 -0
  7. package/lib/esm/components/OnBoardingWidget/ActionsButton.js +81 -0
  8. package/lib/esm/components/OnBoardingWidget/OnBoardingWidget.js +46 -21
  9. package/lib/umd/react-ui.js +1 -1
  10. package/package.json +6 -6
package/lib/cjs/components/NavigationSettingsIconButton/NavigationSettingsIconButton.js CHANGED
@@ -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 paltform url
102
+ * Fetches platform url
98
103
  * @param query
99
104
  */
100
105
  const fetchPlatform = (query) => {
@@ -103,6 +108,27 @@ function NavigationSettingsIconButton(inProps) {
103
108
  window.open(platformUrl, '_blank').focus();
104
109
  });
105
110
  };
111
+ /**
112
+ * Handles preferences update
113
+ */
114
+ const handlePreferencesUpdate = () => {
115
+ api_services_1.PreferenceService.getAllPreferences().then((preferences) => {
116
+ const prefs = preferences['results'].reduce((obj, p) => (Object.assign(Object.assign({}, obj), { [`${p.section}.${p.name}`]: p })), {});
117
+ scPreferences.setPreferences(prefs);
118
+ });
119
+ };
120
+ /**
121
+ * Updates onBoarding dynamic preference
122
+ */
123
+ const showOnBoarding = () => {
124
+ api_services_1.PreferenceService.updatePreferences({ [`${types_1.SCPreferenceName.ONBOARDING_HIDDEN}`]: false })
125
+ .then(() => {
126
+ handlePreferencesUpdate();
127
+ })
128
+ .catch((e) => {
129
+ utils_1.Logger.error(Errors_1.SCOPE_SC_UI, e);
130
+ });
131
+ };
106
132
  const handleLogout = () => {
107
133
  scUserContext.logout();
108
134
  };
@@ -121,6 +147,7 @@ function NavigationSettingsIconButton(inProps) {
121
147
  ...(isAdmin
122
148
  ? [
123
149
  (0, jsx_runtime_1.jsx)(material_1.Divider, {}, "admin_divider"),
150
+ 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
151
  (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
152
  ]
126
153
  : []),
@@ -149,6 +176,7 @@ function NavigationSettingsIconButton(inProps) {
149
176
  ...(isAdmin
150
177
  ? [
151
178
  (0, jsx_runtime_1.jsx)(material_1.Divider, {}, "platform_divider"),
179
+ 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
180
  (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
181
  ]
154
182
  : []),
package/lib/cjs/components/OnBoardingWidget/ActionsButton.d.ts ADDED
@@ -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;
package/lib/cjs/components/OnBoardingWidget/ActionsButton.js ADDED
@@ -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;
package/lib/cjs/components/OnBoardingWidget/OnBoardingWidget.js CHANGED
@@ -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 [showCategoriesModal, setShowCategoriesModal] = (0, react_1.useState)(false);
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 [isGenerating, setIsGenerating] = (0, react_1.useState)(false);
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
- setShowCategoriesModal(true);
183
+ setShowNoCategoriesModal(true);
184
+ }
185
+ else if (stepId === types_1.SCOnBoardingStepIdType.CATEGORIES) {
186
+ setShowWarningCategoriesModal(true);
170
187
  }
171
188
  else {
172
- yield api_services_1.OnBoardingService.startAStep(stepId, GenerateContentsParams)
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
- setShowCategoriesModal(false);
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, onChange: handleExpand, className: classes.accordionRoot, expanded: expanded }, { children: [(0, jsx_runtime_1.jsx)(material_1.AccordionSummary, Object.assign({ expandIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ fontSize: "medium" }, { children: "expand_more" })), "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: {
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() }) })), showCategoriesModal && ((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: showCategoriesModal, onClose: () => setShowCategoriesModal(false), actions: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ color: "secondary", onClick: () => setShowCategoriesModal(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" }) })) })))] }))] })) })) })] })) })));
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;
package/lib/esm/components/NavigationSettingsIconButton/NavigationSettingsIconButton.js CHANGED
@@ -1,13 +1,16 @@
1
1
  import { __rest } from "tslib";
2
- import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
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 paltform url
100
+ * Fetches platform url
96
101
  * @param query
97
102
  */
98
103
  const fetchPlatform = (query) => {
@@ -101,6 +106,27 @@ export default function NavigationSettingsIconButton(inProps) {
101
106
  window.open(platformUrl, '_blank').focus();
102
107
  });
103
108
  };
109
+ /**
110
+ * Handles preferences update
111
+ */
112
+ const handlePreferencesUpdate = () => {
113
+ PreferenceService.getAllPreferences().then((preferences) => {
114
+ const prefs = preferences['results'].reduce((obj, p) => (Object.assign(Object.assign({}, obj), { [`${p.section}.${p.name}`]: p })), {});
115
+ scPreferences.setPreferences(prefs);
116
+ });
117
+ };
118
+ /**
119
+ * Updates onBoarding dynamic preference
120
+ */
121
+ const showOnBoarding = () => {
122
+ PreferenceService.updatePreferences({ [`${SCPreferenceName.ONBOARDING_HIDDEN}`]: false })
123
+ .then(() => {
124
+ handlePreferencesUpdate();
125
+ })
126
+ .catch((e) => {
127
+ Logger.error(SCOPE_SC_UI, e);
128
+ });
129
+ };
104
130
  const handleLogout = () => {
105
131
  scUserContext.logout();
106
132
  };
@@ -119,6 +145,7 @@ export default function NavigationSettingsIconButton(inProps) {
119
145
  ...(isAdmin
120
146
  ? [
121
147
  _jsx(Divider, {}, "admin_divider"),
148
+ 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
149
  _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
150
  ]
124
151
  : []),
@@ -147,6 +174,7 @@ export default function NavigationSettingsIconButton(inProps) {
147
174
  ...(isAdmin
148
175
  ? [
149
176
  _jsx(Divider, {}, "platform_divider"),
177
+ 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
178
  _jsx(MenuItem, Object.assign({ className: classes.item, onClick: () => fetchPlatform('') }, { children: _jsx(FormattedMessage, { id: "ui.navigationSettingsIconButton.platform", defaultMessage: "ui.navigationSettingsIconButton.platform" }) }), "platform")
151
179
  ]
152
180
  : []),
package/lib/esm/components/OnBoardingWidget/ActionsButton.d.ts ADDED
@@ -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;
package/lib/esm/components/OnBoardingWidget/ActionsButton.js ADDED
@@ -0,0 +1,81 @@
1
+ import { __rest } from "tslib";
2
+ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
3
+ import { useState } from 'react';
4
+ import { styled } from '@mui/material/styles';
5
+ import { Icon, IconButton, List, ListItem, ListItemButton, ListItemIcon, Menu, MenuItem, SwipeableDrawer, useMediaQuery, useTheme } from '@mui/material';
6
+ import classNames from 'classnames';
7
+ import { useThemeProps } from '@mui/system';
8
+ import { FormattedMessage } from 'react-intl';
9
+ import { PreferenceService } from '@selfcommunity/api-services';
10
+ import { SCOPE_SC_UI } from '../../constants/Errors';
11
+ import { Logger } from '@selfcommunity/utils';
12
+ import { SCPreferenceName } from '@selfcommunity/types';
13
+ import { PREFIX } from './constants';
14
+ const classes = {
15
+ root: `${PREFIX}-actions-button-root`,
16
+ drawerRoot: `${PREFIX}-actions-drawer-root`,
17
+ menuRoot: `${PREFIX}-actions-menu-root`,
18
+ paper: `${PREFIX}-actions-paper`,
19
+ item: `${PREFIX}-actions-item`
20
+ };
21
+ const Root = styled(IconButton, {
22
+ name: PREFIX,
23
+ slot: 'Root',
24
+ overridesResolver: (props, styles) => styles.root
25
+ })(() => ({}));
26
+ const SwipeableDrawerRoot = styled(SwipeableDrawer, {
27
+ name: PREFIX,
28
+ slot: 'Root',
29
+ overridesResolver: (props, styles) => styles.drawerRoot
30
+ })(() => ({}));
31
+ const MenuRoot = styled(Menu, {
32
+ name: PREFIX,
33
+ slot: 'Root',
34
+ overridesResolver: (props, styles) => styles.menuRoot
35
+ })(() => ({}));
36
+ export default function OnBoardingActionsButton(inProps) {
37
+ // PROPS
38
+ const props = useThemeProps({
39
+ props: inProps,
40
+ name: PREFIX
41
+ });
42
+ const { className = null, isExpanded, onExpandChange, onHideOnBoarding } = props, rest = __rest(props, ["className", "isExpanded", "onExpandChange", "onHideOnBoarding"]);
43
+ // STATE
44
+ const [anchorEl, setAnchorEl] = useState(null);
45
+ const theme = useTheme();
46
+ const isMobile = useMediaQuery(theme.breakpoints.down('md'));
47
+ // HANDLERS
48
+ const handleOpen = (event) => {
49
+ setAnchorEl(event.currentTarget);
50
+ };
51
+ const handleClose = () => {
52
+ setAnchorEl(null);
53
+ };
54
+ /**
55
+ * Updates onBoarding dynamic preference
56
+ */
57
+ const hideOnBoarding = () => {
58
+ PreferenceService.updatePreferences({ [`${SCPreferenceName.ONBOARDING_HIDDEN}`]: true })
59
+ .then(() => {
60
+ onHideOnBoarding();
61
+ })
62
+ .catch((e) => {
63
+ Logger.error(SCOPE_SC_UI, e);
64
+ });
65
+ };
66
+ const renderList = () => {
67
+ if (isMobile) {
68
+ return [
69
+ isExpanded ? (_jsx(ListItem, Object.assign({ className: classes.item }, { children: _jsxs(ListItemButton, Object.assign({ onClick: onExpandChange }, { children: [_jsx(ListItemIcon, { children: _jsx(Icon, { children: "expand_less" }) }), _jsx(FormattedMessage, { id: "ui.onBoardingWidget.actionsMenu.view.less", defaultMessage: "ui.onBoardingWidget.actionsMenu.view.less" })] })) }), "expand_less")) : (_jsx(ListItem, Object.assign({ className: classes.item }, { children: _jsxs(ListItemButton, Object.assign({ onClick: onExpandChange }, { children: [_jsx(ListItemIcon, { children: _jsx(Icon, { children: "expand_more" }) }), _jsx(FormattedMessage, { id: "ui.onBoardingWidget.actionsMenu.view.more", defaultMessage: "ui.onBoardingWidget.actionsMenu.view.more" })] })) }), "expand_more")),
70
+ _jsx(ListItem, Object.assign({ className: classes.item }, { children: _jsxs(ListItemButton, Object.assign({ onClick: hideOnBoarding }, { children: [_jsx(ListItemIcon, { children: _jsx(Icon, { children: "close" }) }), _jsx(FormattedMessage, { id: "ui.onBoardingWidget.actionsMenu.close", defaultMessage: "ui.onBoardingWidget.actionsMenu.close" })] })) }), "close")
71
+ ];
72
+ }
73
+ else {
74
+ return [
75
+ isExpanded ? (_jsxs(MenuItem, Object.assign({ className: classes.item, onClick: onExpandChange }, { children: [_jsx(ListItemIcon, { children: _jsx(Icon, { children: "expand_less" }) }), _jsx(FormattedMessage, { id: "ui.onBoardingWidget.actionsMenu.view.less", defaultMessage: "ui.onBoardingWidget.actionsMenu.view.less" })] }), "expand_less")) : (_jsxs(MenuItem, Object.assign({ className: classes.item, onClick: onExpandChange }, { children: [_jsx(ListItemIcon, { children: _jsx(Icon, { children: "expand_more" }) }), _jsx(FormattedMessage, { id: "ui.onBoardingWidget.actionsMenu.view.more", defaultMessage: "ui.onBoardingWidget.actionsMenu.view.more" })] }), "expand_more")),
76
+ _jsxs(MenuItem, Object.assign({ className: classes.item, onClick: hideOnBoarding }, { children: [_jsx(ListItemIcon, { children: _jsx(Icon, { children: "close" }) }), _jsx(FormattedMessage, { id: "ui.onBoardingWidget.actionsMenu.close", defaultMessage: "ui.onBoardingWidget.actionsMenu.close" })] }), "close")
77
+ ];
78
+ }
79
+ };
80
+ return (_jsxs(_Fragment, { children: [_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { onClick: handleOpen }, { children: _jsx(Icon, { children: "more_vert" }) })), isMobile ? (_jsx(SwipeableDrawerRoot, Object.assign({ onClick: () => setAnchorEl(null), className: classes.drawerRoot, anchor: "bottom", open: Boolean(anchorEl), onClose: handleClose, onOpen: handleOpen, PaperProps: { className: classes.paper }, disableSwipeToOpen: true }, { children: _jsx(List, { children: renderList() }) }))) : (_jsx(MenuRoot, Object.assign({ onClick: () => setAnchorEl(null), className: classes.menuRoot, anchorEl: anchorEl, open: Boolean(anchorEl), onClose: handleClose, PaperProps: { className: classes.paper } }, { children: renderList() })))] }));
81
+ }