@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/esm/components/OnBoardingWidget/OnBoardingWidget.js CHANGED
@@ -8,7 +8,7 @@ import classNames from 'classnames';
8
8
  import { useThemeProps } from '@mui/system';
9
9
  import Category from './Steps/Category';
10
10
  import { PREFIX } from './constants';
11
- import { getTheme, usePreviousValue, UserUtils, useSCContext, useSCFetchCategories, useSCPreferences, useSCTheme, useSCUser } from '@selfcommunity/react-core';
11
+ import { getTheme, SCPreferences, usePreviousValue, UserUtils, useSCContext, useSCFetchCategories, useSCPreferences, useSCTheme, useSCUser } from '@selfcommunity/react-core';
12
12
  import Appearance from './Steps/Appearance';
13
13
  import Profile from './Steps/Profile';
14
14
  import Invite from './Steps/Invite';
@@ -19,13 +19,14 @@ import Content from './Steps/Content';
19
19
  import { SCOPE_SC_UI } from '../../constants/Errors';
20
20
  import { Endpoints, http, OnBoardingService, PreferenceService } from '@selfcommunity/api-services';
21
21
  import { Logger } from '@selfcommunity/utils';
22
- import { SCOnBoardingStepStatusType, SCOnBoardingStepType } from '@selfcommunity/types';
22
+ import { SCOnBoardingStepStatusType, SCOnBoardingStepType, SCOnBoardingStepIdType } from '@selfcommunity/types';
23
23
  import OnBoardingWidgetSkeleton from './Skeleton';
24
24
  import { closeSnackbar, useSnackbar } from 'notistack';
25
25
  import HeaderPlaceholder from '../../assets/onBoarding/header';
26
26
  import BaseDialog from '../../shared/BaseDialog';
27
27
  import PubSub from 'pubsub-js';
28
28
  import { SCCategoryEventType, SCTopicType } from '../../constants/PubSub';
29
+ import OnBoardingActionsButton from './ActionsButton';
29
30
  const classes = {
30
31
  root: `${PREFIX}-root`,
31
32
  content: `${PREFIX}-content`,
@@ -34,7 +35,9 @@ const classes = {
34
35
  intro: `${PREFIX}-intro`,
35
36
  steps: `${PREFIX}-steps`,
36
37
  stepsMobile: `${PREFIX}-steps-mobile`,
37
- stepContent: `${PREFIX}-step-content`
38
+ stepContent: `${PREFIX}-step-content`,
39
+ dialogRoot: `${PREFIX}-dialog-root`,
40
+ dialogContent: `${PREFIX}-dialog-content`
38
41
  };
39
42
  const Root = styled(Widget, {
40
43
  name: PREFIX,
@@ -46,6 +49,11 @@ const AccordionRoot = styled(Accordion, {
46
49
  slot: 'AccordionRoot',
47
50
  overridesResolver: (props, styles) => styles.accordionRoot
48
51
  })(() => ({}));
52
+ const DialogRoot = styled(BaseDialog, {
53
+ name: PREFIX,
54
+ slot: 'Root',
55
+ overridesResolver: (props, styles) => styles.dialogRoot
56
+ })(({ theme }) => ({}));
49
57
  const OnBoardingWidget = (inProps) => {
50
58
  // PROPS
51
59
  const props = useThemeProps({
@@ -70,7 +78,9 @@ const OnBoardingWidget = (inProps) => {
70
78
  const prevContentsStep = usePreviousValue(currentContentsStep);
71
79
  const currentCategoriesStep = steps === null || steps === void 0 ? void 0 : steps.find((s) => s.step === SCOnBoardingStepType.CATEGORIES);
72
80
  const prevCategoriesStep = usePreviousValue(currentCategoriesStep);
73
- const [showCategoriesModal, setShowCategoriesModal] = useState(false);
81
+ const [showNoCategoriesModal, setShowNoCategoriesModal] = useState(false);
82
+ const [showCategoriesWarningModal, setShowWarningCategoriesModal] = useState(false);
83
+ const [isGenerating, setIsGenerating] = useState(false);
74
84
  // CONTEXT
75
85
  const scUserContext = useSCUser();
76
86
  const isAdmin = useMemo(() => UserUtils.isCommunityCreator(scUserContext.user), [scUserContext.user]);
@@ -78,7 +88,11 @@ const OnBoardingWidget = (inProps) => {
78
88
  const scPreferencesContext = useSCPreferences();
79
89
  const scThemeContext = useSCTheme();
80
90
  const { enqueueSnackbar } = useSnackbar();
81
- const [isGenerating, setIsGenerating] = useState(false);
91
+ const showOnBoarding = useMemo(() => scPreferencesContext.preferences &&
92
+ SCPreferences.CONFIGURATIONS_ONBOARDING_ENABLED in scPreferencesContext.preferences &&
93
+ SCPreferences.CONFIGURATIONS_ONBOARDING_HIDDEN in scPreferencesContext.preferences &&
94
+ scPreferencesContext.preferences[SCPreferences.CONFIGURATIONS_ONBOARDING_ENABLED].value &&
95
+ !scPreferencesContext.preferences[SCPreferences.CONFIGURATIONS_ONBOARDING_HIDDEN].value, [scPreferencesContext.preferences]);
82
96
  // HOOKS
83
97
  const theme = useTheme();
84
98
  const isMobile = useMediaQuery(theme.breakpoints.down('md'));
@@ -164,22 +178,29 @@ const OnBoardingWidget = (inProps) => {
164
178
  };
165
179
  const generateContent = (stepId) => __awaiter(void 0, void 0, void 0, function* () {
166
180
  if (!isLoading && !categories.length) {
167
- setShowCategoriesModal(true);
181
+ setShowNoCategoriesModal(true);
182
+ }
183
+ else if (stepId === SCOnBoardingStepIdType.CATEGORIES) {
184
+ setShowWarningCategoriesModal(true);
168
185
  }
169
186
  else {
170
- yield OnBoardingService.startAStep(stepId, GenerateContentsParams)
171
- .then(() => {
172
- setIsGenerating(true);
173
- })
174
- .catch((error) => {
175
- Logger.error(SCOPE_SC_UI, error);
176
- enqueueSnackbar(_jsx(FormattedMessage, { id: "ui.common.error.action", defaultMessage: "ui.common.error.action" }), {
177
- variant: 'error',
178
- autoHideDuration: 3000
179
- });
180
- });
187
+ yield startStep(stepId);
181
188
  }
182
189
  });
190
+ const startStep = (stepId) => __awaiter(void 0, void 0, void 0, function* () {
191
+ showCategoriesWarningModal && setShowWarningCategoriesModal(false);
192
+ yield OnBoardingService.startAStep(stepId, GenerateContentsParams)
193
+ .then(() => {
194
+ setIsGenerating(true);
195
+ })
196
+ .catch((error) => {
197
+ Logger.error(SCOPE_SC_UI, error);
198
+ enqueueSnackbar(_jsx(FormattedMessage, { id: "ui.common.error.action", defaultMessage: "ui.common.error.action" }), {
199
+ variant: 'error',
200
+ autoHideDuration: 3000
201
+ });
202
+ });
203
+ });
183
204
  const handlePreferencesUpdate = () => {
184
205
  PreferenceService.getAllPreferences().then((preferences) => {
185
206
  const prefs = preferences['results'].reduce((obj, p) => (Object.assign(Object.assign({}, obj), { [`${p.section}.${p.name}`]: p })), {});
@@ -189,7 +210,7 @@ const OnBoardingWidget = (inProps) => {
189
210
  };
190
211
  const handleCategoriesClick = () => {
191
212
  fetchPlatform('/contents/interests/');
192
- setShowCategoriesModal(false);
213
+ setShowNoCategoriesModal(false);
193
214
  };
194
215
  /**
195
216
  * Notify when a category info changes
@@ -279,10 +300,10 @@ const OnBoardingWidget = (inProps) => {
279
300
  }
280
301
  return content;
281
302
  };
282
- if (!isAdmin) {
303
+ if (!isAdmin || !showOnBoarding) {
283
304
  return _jsx(HiddenPlaceholder, {});
284
305
  }
285
- return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: _jsxs(AccordionRoot, Object.assign({ defaultExpanded: true, onChange: handleExpand, className: classes.accordionRoot, expanded: expanded }, { children: [_jsx(AccordionSummary, Object.assign({ expandIcon: _jsx(Icon, Object.assign({ fontSize: "medium" }, { children: "expand_more" })), "aria-controls": "accordion", id: "onBoarding-accordion" }, { children: _jsx(_Fragment, { children: expanded ? (_jsxs(_Fragment, { children: [!isMobile ? (_jsx(CardMedia, { className: classes.logo, component: "img", src: HeaderPlaceholder })) : (_jsxs(Typography, Object.assign({ variant: "h4" }, { children: [_jsx(Icon, Object.assign({ color: "secondary", fontSize: "medium" }, { children: "ai_stars" })), _jsx(FormattedMessage, { id: "ui.onBoardingWidget.accordion.expanded.title.mobile", defaultMessage: "ui.onBoardingWidget.accordion.expanded.title.mobile", values: {
306
+ return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: _jsxs(AccordionRoot, Object.assign({ defaultExpanded: true, className: classes.accordionRoot, expanded: expanded }, { children: [_jsx(AccordionSummary, Object.assign({ expandIcon: _jsx(OnBoardingActionsButton, { isExpanded: expanded, onExpandChange: handleExpand, onHideOnBoarding: handlePreferencesUpdate }), "aria-controls": "accordion", id: "onBoarding-accordion" }, { children: _jsx(_Fragment, { children: expanded ? (_jsxs(_Fragment, { children: [!isMobile ? (_jsx(CardMedia, { className: classes.logo, component: "img", src: HeaderPlaceholder })) : (_jsxs(Typography, Object.assign({ variant: "h4" }, { children: [_jsx(Icon, Object.assign({ color: "secondary", fontSize: "medium" }, { children: "ai_stars" })), _jsx(FormattedMessage, { id: "ui.onBoardingWidget.accordion.expanded.title.mobile", defaultMessage: "ui.onBoardingWidget.accordion.expanded.title.mobile", values: {
286
307
  // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
287
308
  // @ts-ignore
288
309
  b: (chunks) => _jsx("strong", { children: chunks })
@@ -301,6 +322,10 @@ const OnBoardingWidget = (inProps) => {
301
322
  // @ts-ignore
302
323
  // eslint-disable-next-line prettier/prettier
303
324
  icon: (...chunks) => _jsx(Icon, Object.assign({ color: "secondary", fontSize: "medium" }, { children: chunks }))
304
- } }) }))) }) })), _jsx(AccordionDetails, { children: _jsx(Widget, Object.assign({ className: classes.content, elevation: 0 }, { children: loading ? (_jsx(OnBoardingWidgetSkeleton, {})) : (_jsxs(CardContent, { children: [_jsx(List, Object.assign({ className: isMobile ? classes.stepsMobile : classes.steps }, { children: steps === null || steps === void 0 ? void 0 : steps.map((step) => (_jsx(ListItem, { children: isMobile ? (_jsx(Chip, { size: "small", label: _jsxs(_Fragment, { children: [_jsx(FormattedMessage, { id: `ui.onBoardingWidget.${step.step}`, defaultMessage: `ui.onBoardingWidget.${step.step}` }), ' ', step.status === SCOnBoardingStepStatusType.COMPLETED && (_jsx(Icon, Object.assign({ color: (step === null || step === void 0 ? void 0 : step.status) === SCOnBoardingStepStatusType.COMPLETED && (step === null || step === void 0 ? void 0 : step.step) !== (_step === null || _step === void 0 ? void 0 : _step.step) ? 'success' : 'inherit' }, { children: "check" })))] }), onClick: () => handleChange(step), variant: step.step === (_step === null || _step === void 0 ? void 0 : _step.step) ? 'filled' : 'outlined', color: step.status === SCOnBoardingStepStatusType.COMPLETED ? 'success' : 'default' })) : (_jsxs(ListItemButton, Object.assign({ onClick: () => handleChange(step), selected: (step === null || step === void 0 ? void 0 : step.step) === (_step === null || _step === void 0 ? void 0 : _step.step) }, { children: [_jsx(ListItemIcon, { children: _jsx(Checkbox, { edge: "start", checked: step.status === SCOnBoardingStepStatusType.COMPLETED, tabIndex: -1, disableRipple: true, inputProps: { 'aria-labelledby': step.step }, size: 'small' }) }), _jsx(ListItemText, { primary: _jsx(FormattedMessage, { id: `ui.onBoardingWidget.${step.step}`, defaultMessage: `ui.onBoardingWidget.${step.step}` }) })] }))) }, step.id))) })), _jsxs(Box, Object.assign({ className: classes.stepContent }, { children: [_jsx(Fade, Object.assign({ in: true, timeout: 2400 }, { children: _jsx(Box, { children: getStepContent() }) })), showCategoriesModal && (_jsx(BaseDialog, Object.assign({ title: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.ai.no.categories", defaultMessage: "ui.onBoardingWidget.ai.no.categories" }), DialogContentProps: { dividers: false }, open: showCategoriesModal, onClose: () => setShowCategoriesModal(false), actions: _jsx(Button, Object.assign({ color: "secondary", onClick: () => setShowCategoriesModal(false) }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.ai.no.categories.cancel", defaultMessage: "ui.onBoardingWidget.ai.no.categories.cancel" }) })) }, { children: _jsx(Button, Object.assign({ color: "primary", onClick: handleCategoriesClick, startIcon: _jsx(Icon, Object.assign({ fontSize: "small" }, { children: "edit" })) }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.ai.no.categories.link", defaultMessage: "ui.onBoardingWidget.ai.no.categories.link" }) })) })))] }))] })) })) })] })) })));
325
+ } }) }))) }) })), _jsx(AccordionDetails, { children: _jsx(Widget, Object.assign({ className: classes.content, elevation: 0 }, { children: loading ? (_jsx(OnBoardingWidgetSkeleton, {})) : (_jsxs(CardContent, { children: [_jsx(List, Object.assign({ className: isMobile ? classes.stepsMobile : classes.steps }, { children: steps === null || steps === void 0 ? void 0 : steps.map((step) => (_jsx(ListItem, { children: isMobile ? (_jsx(Chip, { size: "small", label: _jsxs(_Fragment, { children: [_jsx(FormattedMessage, { id: `ui.onBoardingWidget.${step.step}`, defaultMessage: `ui.onBoardingWidget.${step.step}` }), ' ', step.status === SCOnBoardingStepStatusType.COMPLETED && (_jsx(Icon, Object.assign({ color: (step === null || step === void 0 ? void 0 : step.status) === SCOnBoardingStepStatusType.COMPLETED && (step === null || step === void 0 ? void 0 : step.step) !== (_step === null || _step === void 0 ? void 0 : _step.step) ? 'success' : 'inherit' }, { children: "check" })))] }), onClick: () => handleChange(step), variant: step.step === (_step === null || _step === void 0 ? void 0 : _step.step) ? 'filled' : 'outlined', color: step.status === SCOnBoardingStepStatusType.COMPLETED ? 'success' : 'default' })) : (_jsxs(ListItemButton, Object.assign({ onClick: () => handleChange(step), selected: (step === null || step === void 0 ? void 0 : step.step) === (_step === null || _step === void 0 ? void 0 : _step.step) }, { children: [_jsx(ListItemIcon, { children: _jsx(Checkbox, { edge: "start", checked: step.status === SCOnBoardingStepStatusType.COMPLETED, tabIndex: -1, disableRipple: true, inputProps: { 'aria-labelledby': step.step }, size: 'small' }) }), _jsx(ListItemText, { primary: _jsx(FormattedMessage, { id: `ui.onBoardingWidget.${step.step}`, defaultMessage: `ui.onBoardingWidget.${step.step}` }) })] }))) }, step.id))) })), _jsxs(Box, Object.assign({ className: classes.stepContent }, { children: [_jsx(Fade, Object.assign({ in: true, timeout: 2400 }, { children: _jsx(Box, { children: getStepContent() }) })), showNoCategoriesModal && (_jsx(BaseDialog, Object.assign({ title: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.ai.no.categories", defaultMessage: "ui.onBoardingWidget.ai.no.categories" }), DialogContentProps: { dividers: false }, open: showNoCategoriesModal, onClose: () => setShowNoCategoriesModal(false), actions: _jsx(Button, Object.assign({ color: "secondary", onClick: () => setShowNoCategoriesModal(false) }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.ai.no.categories.cancel", defaultMessage: "ui.onBoardingWidget.ai.no.categories.cancel" }) })) }, { children: _jsx(Button, Object.assign({ color: "primary", onClick: handleCategoriesClick, startIcon: _jsx(Icon, Object.assign({ fontSize: "small" }, { children: "edit" })) }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.ai.no.categories.link", defaultMessage: "ui.onBoardingWidget.ai.no.categories.link" }) })) }))), showCategoriesWarningModal && (_jsx(DialogRoot, Object.assign({ className: classes.dialogRoot, title: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.ai.categories.warning.title", defaultMessage: "ui.onBoardingWidget.ai.categories.warning.title" }), DialogContentProps: { dividers: false }, open: showCategoriesWarningModal, onClose: () => setShowWarningCategoriesModal(false), actions: _jsxs(_Fragment, { children: [_jsx(Button, Object.assign({ size: "small", variant: "outlined", color: "primary", onClick: () => setShowWarningCategoriesModal(false) }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.ai.categories.warning.button.close", defaultMessage: "ui.onBoardingWidget.ai.categories.warning.button.close" }) })), _jsx(Button, Object.assign({ size: "small", variant: "contained", color: "secondary", onClick: () => startStep(SCOnBoardingStepIdType.CATEGORIES), endIcon: _jsx(Icon, Object.assign({ fontSize: "small" }, { children: "magic_wand" })) }, { children: _jsx(FormattedMessage, { id: "ui.onBoardingWidget.ai.categories.warning.button.generate", defaultMessage: "ui.onBoardingWidget.ai.categories.warning.button.generate" }) }))] }) }, { children: _jsxs(Typography, Object.assign({ className: classes.dialogContent }, { children: [_jsx(FormattedMessage, { id: "ui.onBoardingWidget.ai.categories.warning.info", defaultMessage: "ui.onBoardingWidget.ai.categories.warning.info" }), _jsx(FormattedMessage, { id: "ui.onBoardingWidget.ai.categories.warning.confirm", defaultMessage: "ui.onBoardingWidget.ai.categories.warning.confirm", values: {
326
+ // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
327
+ // @ts-ignore
328
+ b: (chunks) => _jsx("b", { children: chunks })
329
+ } })] })) })))] }))] })) })) })] })) })));
305
330
  };
306
331
  export default OnBoardingWidget;