@selfcommunity/react-ui 0.9.0-alpha.2 → 0.9.0-alpha.21

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 (50) hide show
  1. package/lib/cjs/assets/onBoarding/android.d.ts +1 -1
  2. package/lib/cjs/assets/onBoarding/android.js +1 -1
  3. package/lib/cjs/components/Event/Event.js +1 -1
  4. package/lib/cjs/components/EventHeader/EventHeader.js +5 -40
  5. package/lib/cjs/components/EventMediaWidget/EventMediaWidget.js +37 -34
  6. package/lib/cjs/components/EventMembersWidget/EventMembersWidget.d.ts +3 -0
  7. package/lib/cjs/components/EventMembersWidget/EventMembersWidget.js +15 -34
  8. package/lib/cjs/components/EventMembersWidget/TabContentComponent.js +1 -1
  9. package/lib/cjs/components/EventSubscribeButton/EventSubscribeButton.d.ts +2 -2
  10. package/lib/cjs/components/EventSubscribeButton/EventSubscribeButton.js +14 -16
  11. package/lib/cjs/components/Events/Events.js +3 -4
  12. package/lib/cjs/components/NavigationSettingsIconButton/NavigationSettingsIconButton.js +35 -2
  13. package/lib/cjs/components/NavigationToolbar/NavigationToolbar.js +1 -1
  14. package/lib/cjs/components/OnBoardingWidget/ActionsButton.d.ts +7 -0
  15. package/lib/cjs/components/OnBoardingWidget/ActionsButton.js +84 -0
  16. package/lib/cjs/components/OnBoardingWidget/OnBoardingWidget.js +44 -19
  17. package/lib/cjs/components/OnBoardingWidget/Steps/App/App.js +2 -1
  18. package/lib/cjs/components/OnBoardingWidget/Steps/Appearance/Appearance.js +10 -13
  19. package/lib/cjs/components/UserProfileEdit/Section/PublicInfo.js +2 -1
  20. package/lib/cjs/shared/EventActionsMenu/index.d.ts +1 -1
  21. package/lib/cjs/shared/EventActionsMenu/index.js +11 -15
  22. package/lib/cjs/utils/events.d.ts +2 -0
  23. package/lib/cjs/utils/events.js +10 -0
  24. package/lib/cjs/utils/widget.js +11 -1
  25. package/lib/esm/assets/onBoarding/android.d.ts +1 -1
  26. package/lib/esm/assets/onBoarding/android.js +1 -1
  27. package/lib/esm/components/Event/Event.js +1 -1
  28. package/lib/esm/components/EventHeader/EventHeader.js +6 -41
  29. package/lib/esm/components/EventMediaWidget/EventMediaWidget.js +37 -34
  30. package/lib/esm/components/EventMembersWidget/EventMembersWidget.d.ts +3 -0
  31. package/lib/esm/components/EventMembersWidget/EventMembersWidget.js +15 -34
  32. package/lib/esm/components/EventMembersWidget/TabContentComponent.js +1 -1
  33. package/lib/esm/components/EventSubscribeButton/EventSubscribeButton.d.ts +2 -2
  34. package/lib/esm/components/EventSubscribeButton/EventSubscribeButton.js +16 -18
  35. package/lib/esm/components/Events/Events.js +3 -4
  36. package/lib/esm/components/NavigationSettingsIconButton/NavigationSettingsIconButton.js +38 -5
  37. package/lib/esm/components/NavigationToolbar/NavigationToolbar.js +1 -1
  38. package/lib/esm/components/OnBoardingWidget/ActionsButton.d.ts +7 -0
  39. package/lib/esm/components/OnBoardingWidget/ActionsButton.js +81 -0
  40. package/lib/esm/components/OnBoardingWidget/OnBoardingWidget.js +46 -21
  41. package/lib/esm/components/OnBoardingWidget/Steps/App/App.js +2 -1
  42. package/lib/esm/components/OnBoardingWidget/Steps/Appearance/Appearance.js +10 -13
  43. package/lib/esm/components/UserProfileEdit/Section/PublicInfo.js +2 -1
  44. package/lib/esm/shared/EventActionsMenu/index.d.ts +1 -1
  45. package/lib/esm/shared/EventActionsMenu/index.js +11 -15
  46. package/lib/esm/utils/events.d.ts +2 -0
  47. package/lib/esm/utils/events.js +6 -0
  48. package/lib/esm/utils/widget.js +11 -1
  49. package/lib/umd/react-ui.js +1 -1
  50. package/package.json +6 -6
@@ -106,7 +106,7 @@ export default function Event(inProps) {
106
106
  });
107
107
  const { id = `event_object_${props.eventId ? props.eventId : props.event ? props.event.id : ''}`, eventId = null, event = null, className = null, template = SCEventTemplateType.SNIPPET, hideInProgress = false, hideEventParticipants = false, hideEventPlanner = false, actions, EventParticipantsButtonComponentProps = {}, EventSkeletonComponentProps = {} } = props, rest = __rest(props, ["id", "eventId", "event", "className", "template", "hideInProgress", "hideEventParticipants", "hideEventPlanner", "actions", "EventParticipantsButtonComponentProps", "EventSkeletonComponentProps"]);
108
108
  // STATE
109
- const { scEvent } = useSCFetchEvent({ id: eventId, event });
109
+ const { scEvent } = useSCFetchEvent({ id: eventId, event, autoSubscribe: false });
110
110
  const inProgress = useMemo(() => scEvent && scEvent.active && scEvent.running, [scEvent]);
111
111
  // CONTEXT
112
112
  const scRoutingContext = useSCRouting();
@@ -6,13 +6,12 @@ import { useThemeProps } from '@mui/system';
6
6
  import { SCPreferences, useSCFetchEvent, useSCPreferences, useSCUser } from '@selfcommunity/react-core';
7
7
  import { SCEventLocationType, SCEventPrivacyType } from '@selfcommunity/types';
8
8
  import classNames from 'classnames';
9
- import PubSub from 'pubsub-js';
10
- import { useCallback, useEffect, useMemo, useRef } from 'react';
9
+ import { useMemo } from 'react';
11
10
  import { FormattedMessage, useIntl } from 'react-intl';
12
- import { SCGroupEventType, SCTopicType } from '../../constants/PubSub';
13
11
  import Bullet from '../../shared/Bullet';
14
12
  import Calendar from '../../shared/Calendar';
15
13
  import EventActionsMenu from '../../shared/EventActionsMenu';
14
+ import { checkEventFinished } from '../../utils/events';
16
15
  import EditEventButton from '../EditEventButton';
17
16
  import EventInviteButton from '../EventInviteButton';
18
17
  import EventSubscribeButton from '../EventSubscribeButton';
@@ -89,49 +88,15 @@ export default function EventHeader(inProps) {
89
88
  const isMobile = useMediaQuery(theme.breakpoints.down('md'));
90
89
  // INTL
91
90
  const intl = useIntl();
92
- // REFS
93
- const updatesSubscription = useRef(null);
94
91
  // CONST
95
92
  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]);
102
- /**
103
- * Subscriber for pubsub callback
104
- */
105
- const onChangeEventMembersHandler = useCallback((msg, data) => {
106
- var _a;
107
- if (data && ((_a = data === null || data === void 0 ? void 0 : data.event) === null || _a === void 0 ? void 0 : _a.id) === (scEvent === null || scEvent === void 0 ? void 0 : scEvent.id)) {
108
- let _event = Object.assign({}, scEvent);
109
- if (msg === `${SCTopicType.GROUP}.${SCGroupEventType.ADD_MEMBER}`) {
110
- _event.subscribers_counter = _event.subscribers_counter + 1;
111
- }
112
- else if (msg === `${SCTopicType.GROUP}.${SCGroupEventType.REMOVE_MEMBER}`) {
113
- _event.subscribers_counter = Math.max(_event.subscribers_counter - 1, 0);
114
- }
115
- setSCEvent(_event);
116
- }
117
- }, [scEvent, setSCEvent]);
93
+ const isEventFinished = useMemo(() => checkEventFinished(scEvent), [scEvent]);
118
94
  /**
119
95
  * Handles callback subscribe/unsubscribe event
120
96
  */
121
- const handleSubscribe = (_event, status) => {
122
- setSCEvent(Object.assign({}, scEvent, { subscription_status: status }));
97
+ const handleSubscribe = (event) => {
98
+ setSCEvent(event);
123
99
  };
124
- /**
125
- * On mount, subscribe to receive events updates (only edit)
126
- */
127
- useEffect(() => {
128
- if (scEvent) {
129
- updatesSubscription.current = PubSub.subscribe(`${SCTopicType.EVENT}.${SCGroupEventType.MEMBERS}`, onChangeEventMembersHandler);
130
- }
131
- return () => {
132
- updatesSubscription.current && PubSub.unsubscribe(updatesSubscription.current);
133
- };
134
- }, [scEvent]);
135
100
  // RENDER
136
101
  if (!scEvent) {
137
102
  return _jsx(EventHeaderSkeleton, {});
@@ -174,5 +139,5 @@ export default function EventHeader(inProps) {
174
139
  month: 'long'
175
140
  }),
176
141
  hour: intl.formatDate(scEvent.start_date, { hour: 'numeric', minute: 'numeric' })
177
- } })) })), _jsx(Typography, Object.assign({ variant: "h5", className: classes.name }, { children: scEvent.name })), _jsxs(Box, Object.assign({ className: classes.visibility }, { children: [_jsx(_Fragment, { children: scEvent.privacy === SCEventPrivacyType.PUBLIC ? (_jsxs(Typography, Object.assign({ className: classes.visibilityItem }, { children: [_jsx(Icon, { children: "public" }), _jsx(FormattedMessage, { id: "ui.eventHeader.visibility.public", defaultMessage: "ui.eventHeader.visibility.public" })] }))) : (_jsxs(Typography, Object.assign({ className: classes.visibilityItem }, { children: [_jsx(Icon, { children: "private" }), _jsx(FormattedMessage, { id: "ui.eventHeader.visibility.private", defaultMessage: "ui.eventHeader.visibility.private" })] }))) }), _jsx(Bullet, {}), _jsx(Typography, Object.assign({ className: classes.visibilityItem }, { children: scEvent.location === SCEventLocationType.PERSON ? (_jsx(FormattedMessage, { id: "ui.eventHeader.location.live", defaultMessage: "ui.eventHeader.location.live" })) : (_jsx(FormattedMessage, { id: "ui.eventHeader.location.online", defaultMessage: "ui.eventHeader.location.online" })) }))] })), _jsx(User, { className: classes.planner, userId: scEvent.managed_by.id, secondary: _jsx(FormattedMessage, { id: "ui.eventHeader.user.manager", defaultMessage: "ui.eventHeader.user.manager" }), elevation: 0, actions: _jsx(_Fragment, { children: isEventAdmin ? (_jsxs(Box, Object.assign({ className: classes.multiActions }, { children: [_jsx(EventInviteButton, { size: isMobile ? 'small' : 'medium', event: scEvent, eventId: scEvent.id, disabled: isEventFinished }), _jsxs(Box, { children: [!isMobile && (_jsx(EditEventButton, { size: isMobile ? 'small' : 'medium', event: scEvent, eventId: scEvent.id, onEditSuccess: (data) => setSCEvent(data), disabled: isEventFinished })), _jsx(EventActionsMenu, Object.assign({ event: scEvent, onEditSuccess: (data) => setSCEvent(data) }, EventActionsProps))] })] }))) : (_jsxs(_Fragment, { children: [_jsx(EventSubscribeButton, Object.assign({ event: scEvent, onSubscribe: handleSubscribe }, EventSubscribeButtonProps, { disabled: isEventFinished })), _jsx(EventActionsMenu, Object.assign({ event: scEvent, onEditSuccess: (data) => setSCEvent(data) }, EventActionsProps))] })) }) })] }))] })));
142
+ } })) })), _jsx(Typography, Object.assign({ variant: "h5", className: classes.name }, { children: scEvent.name })), _jsxs(Box, Object.assign({ className: classes.visibility }, { children: [_jsx(_Fragment, { children: scEvent.privacy === SCEventPrivacyType.PUBLIC ? (_jsxs(Typography, Object.assign({ className: classes.visibilityItem }, { children: [_jsx(Icon, { children: "public" }), _jsx(FormattedMessage, { id: "ui.eventHeader.visibility.public", defaultMessage: "ui.eventHeader.visibility.public" })] }))) : (_jsxs(Typography, Object.assign({ className: classes.visibilityItem }, { children: [_jsx(Icon, { children: "private" }), _jsx(FormattedMessage, { id: "ui.eventHeader.visibility.private", defaultMessage: "ui.eventHeader.visibility.private" })] }))) }), _jsx(Bullet, {}), _jsx(Typography, Object.assign({ className: classes.visibilityItem }, { children: scEvent.location === SCEventLocationType.PERSON ? (_jsx(FormattedMessage, { id: "ui.eventHeader.location.live", defaultMessage: "ui.eventHeader.location.live" })) : (_jsx(FormattedMessage, { id: "ui.eventHeader.location.online", defaultMessage: "ui.eventHeader.location.online" })) }))] })), _jsx(User, { className: classes.planner, userId: scEvent.managed_by.id, secondary: _jsx(FormattedMessage, { id: "ui.eventHeader.user.manager", defaultMessage: "ui.eventHeader.user.manager" }), elevation: 0, actions: _jsx(_Fragment, { children: isEventAdmin ? (_jsxs(Box, Object.assign({ className: classes.multiActions }, { children: [_jsx(EventInviteButton, { size: isMobile ? 'small' : 'medium', event: scEvent, disabled: isEventFinished }), _jsxs(Box, { children: [!isMobile && (_jsx(EditEventButton, { size: isMobile ? 'small' : 'medium', event: scEvent, onEditSuccess: setSCEvent, disabled: isEventFinished })), _jsx(EventActionsMenu, Object.assign({ event: scEvent, onEditSuccess: (data) => setSCEvent(data) }, EventActionsProps))] })] }))) : (_jsxs(_Fragment, { children: [_jsx(EventSubscribeButton, Object.assign({ event: scEvent, onSubscribe: handleSubscribe }, EventSubscribeButtonProps, { disabled: isEventFinished })), _jsx(EventActionsMenu, Object.assign({ event: scEvent, onEditSuccess: setSCEvent }, EventActionsProps))] })) }) })] }))] })));
178
143
  }
@@ -81,8 +81,8 @@ export default function EventMediaWidget(inProps) {
81
81
  cacheStrategy,
82
82
  visibleItems: limit
83
83
  }, stateWidgetInitializer);
84
- const [medias, setMedias] = useState([]);
85
- const [mediasCount, setMediasCount] = useState(0);
84
+ const [medias, setMedias] = useState(state.results);
85
+ const [mediasCount, setMediasCount] = useState(state.count);
86
86
  const [openDialog, setOpenDialog] = useState(false);
87
87
  const [openDialogConfirm, setOpenDialogConfirm] = useState(false);
88
88
  const [mediaId, setMediaId] = useState(null);
@@ -94,25 +94,6 @@ export default function EventMediaWidget(inProps) {
94
94
  // CONSTS
95
95
  const hasAllow = useMemo(() => { var _a; return ((_a = scUserContext.user) === null || _a === void 0 ? void 0 : _a.id) === (scEvent === null || scEvent === void 0 ? void 0 : scEvent.managed_by.id); }, [scUserContext, scEvent]);
96
96
  const countHiddenMedia = useMemo(() => mediasCount - MEDIAS_TO_SHOW, [mediasCount]);
97
- /**
98
- * Initialize component
99
- * Fetch data only if the component is not initialized and it is not loading data
100
- */
101
- const _initComponent = useCallback(() => {
102
- if (!state.initialized && !state.isLoadingNext) {
103
- dispatch({ type: actionWidgetTypes.LOADING_NEXT });
104
- EventService.getEventPhotoGallery(scEvent.id, Object.assign({}, endpointQueryParams))
105
- .then((payload) => {
106
- dispatch({ type: actionWidgetTypes.LOAD_NEXT_SUCCESS, payload: Object.assign(Object.assign({}, payload), { initialized: true }) });
107
- setMedias(payload.results);
108
- setMediasCount(payload.count);
109
- })
110
- .catch((error) => {
111
- dispatch({ type: actionWidgetTypes.LOAD_NEXT_FAILURE, payload: { errorLoadNext: error } });
112
- Logger.error(SCOPE_SC_UI, error);
113
- });
114
- }
115
- }, [state.isLoadingNext, scEvent, dispatch, setMedias, setMediasCount]);
116
97
  const _fetchNext = useCallback((index) => {
117
98
  if (mediasCount > medias.length && index >= 6 && !state.isLoadingNext && state.next) {
118
99
  setPreview(index);
@@ -210,33 +191,55 @@ export default function EventMediaWidget(inProps) {
210
191
  // EFFECTS
211
192
  useEffect(() => {
212
193
  let _t;
213
- if (scUserContext.user && scEvent) {
194
+ if (scUserContext.user &&
195
+ scEvent &&
196
+ !state.initialized &&
197
+ Boolean((eventId !== undefined && scEvent.id === eventId) || (event && scEvent.id === event.id))) {
214
198
  _t = setTimeout(_initComponent);
215
199
  return () => {
216
200
  clearTimeout(_t);
217
- if (state.initialized) {
218
- dispatch({
219
- type: actionWidgetTypes.INITIALIZE,
220
- payload: {
221
- cacheKey: SCCache.getWidgetStateCacheKey(SCCache.EVENT_MEDIA_STATE_CACHE_PREFIX_KEY, scEvent.id)
222
- }
223
- });
224
- }
225
201
  };
226
202
  }
227
203
  }, [scUserContext.user, scEvent, state.initialized]);
204
+ useEffect(() => {
205
+ if (state.initialized && scEvent && Boolean((eventId !== undefined && scEvent.id !== eventId) || (event && scEvent.id !== event.id))) {
206
+ dispatch({ type: actionWidgetTypes.RESET, payload: {} });
207
+ }
208
+ }, [state.initialized, scEvent, eventId, event]);
209
+ /**
210
+ * Initialize component
211
+ * Fetch data only if the component is not initialized and it is not loading data
212
+ */
213
+ const _initComponent = useCallback(() => {
214
+ if (!state.isLoadingNext) {
215
+ dispatch({ type: actionWidgetTypes.LOADING_NEXT });
216
+ EventService.getEventPhotoGallery(scEvent.id, Object.assign({}, endpointQueryParams))
217
+ .then((payload) => {
218
+ dispatch({ type: actionWidgetTypes.LOAD_NEXT_SUCCESS, payload: Object.assign(Object.assign({}, payload), { initialized: true }) });
219
+ setMedias(payload.results);
220
+ setMediasCount(payload.count);
221
+ })
222
+ .catch((error) => {
223
+ dispatch({ type: actionWidgetTypes.LOAD_NEXT_FAILURE, payload: { errorLoadNext: error } });
224
+ Logger.error(SCOPE_SC_UI, error);
225
+ });
226
+ }
227
+ }, [state.isLoadingNext, scEvent, eventId, dispatch, setMedias, setMediasCount]);
228
228
  useEffect(() => {
229
229
  if (isMobile && openDialog && state.next) {
230
230
  handleNext();
231
231
  }
232
232
  }, [isMobile, openDialog, state.next]);
233
233
  // RENDER
234
- if (!scEvent || (state.initialized && mediasCount === 0 && !hasAllow)) {
235
- return _jsx(HiddenPlaceholder, {});
236
- }
237
- if (!state.initialized || (state.isLoadingNext && mediasCount === 0)) {
234
+ if (!scEvent ||
235
+ !state.initialized ||
236
+ (scEvent && ((eventId !== undefined && scEvent.id !== eventId) || (event && scEvent.id !== event.id))) ||
237
+ (state.isLoadingNext && !state.initialized)) {
238
238
  return _jsx(SkeletonComponent, {});
239
239
  }
240
+ if (state.initialized && state.count === 0 && !hasAllow) {
241
+ return _jsx(HiddenPlaceholder, {});
242
+ }
240
243
  return (_jsxs(Root, Object.assign({ className: classes.root }, rest, { showPadding: hasAllow }, { children: [_jsx(CardHeader, { title: _jsxs(Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center" }, { children: [_jsx(Typography, Object.assign({ variant: "h5" }, { children: _jsx(FormattedMessage, { id: "ui.eventMediaWidget.title", defaultMessage: "ui.eventMediaWidget.title" }) })), hasAllow && mediasCount > 0 && _jsx(TriggerButton, { size: "small", onAdd: handleAddMedia })] })), className: classes.header }), _jsx(Divider, {}), _jsxs(CardContent, Object.assign({ className: classes.content }, { children: [_jsxs(Box, Object.assign({ className: classes.grid }, { children: [showSkeleton === 'widget' && _jsx(EventMediaSkeleton, {}), medias.slice(0, MEDIAS_TO_SHOW).map((media, i, array) => (_jsx(Box, Object.assign({ onClick: () => handleOpenLightbox(i), sx: {
241
244
  background: `url(${media.image}) no-repeat center`
242
245
  }, className: classes.media }, { children: medias.length > array.length && i === array.length - 1 && (_jsxs(Fragment, { children: [_jsx(Box, { className: classes.mediaLayer }), _jsx(Box, Object.assign({ className: classes.countHiddenMediaWrapper }, { children: _jsxs(Typography, Object.assign({ className: classes.countHiddenMedia }, { children: ["+", countHiddenMedia] })) }))] })) }), media.id))), hasAllow && mediasCount === 0 && (_jsx(Tooltip, Object.assign({ title: _jsx(FormattedMessage, { id: "ui.eventMediaWidget.add", defaultMessage: "ui.eventMediaWidget.add" }) }, { children: _jsx(TriggerButton, { size: "large", onAdd: handleAddMedia, isSquare: true }) })))] })), preview !== -1 && _jsx(Lightbox, { onClose: handleCloseLightbox, index: preview, medias: medias, onIndexChange: _fetchNext })] })), hasAllow && mediasCount > 0 && (_jsx(CardActions, Object.assign({ className: classes.actions }, { children: _jsx(Button, Object.assign({ onClick: handleToggleDialogOpen }, { children: _jsx(Typography, Object.assign({ variant: "caption" }, { children: _jsx(FormattedMessage, { id: "ui.eventMediaWidget.showAll", defaultMessage: "ui.eventMediaWidget.showAll" }) })) })) }))), openDialog && (_jsx(DialogRoot, Object.assign({ className: classes.dialogRoot, title: intl.formatMessage(messages.title, { user: scEvent.managed_by.username }), onClose: handleToggleDialogOpen, open: openDialog }, dialogProps, { children: _jsx(InfiniteScroll, Object.assign({ dataLength: medias.length, height: isMobile ? '100%' : '515px', next: handleNext, hasMoreNext: Boolean(state.next), className: classes.dialogInfiniteScroll, endMessage: _jsx(Typography, Object.assign({ className: classes.endMessage }, { children: _jsx(FormattedMessage, { id: "ui.eventMediaWidget.noMoreResults", defaultMessage: "ui.eventMediaWidget.noMoreResults" }) })) }, { children: _jsxs(Box, Object.assign({ className: classes.grid }, { children: [medias.map((media) => (_jsx(Box, Object.assign({ sx: {
@@ -35,6 +35,9 @@ export interface EventMembersWidgetProps extends WidgetProps {
35
35
  * @default {}
36
36
  */
37
37
  dialogProps?: BaseDialogProps;
38
+ /**
39
+ * Limit items
40
+ */
38
41
  limit?: number;
39
42
  /**
40
43
  * Other props
@@ -11,7 +11,6 @@ import { FormattedMessage } from 'react-intl';
11
11
  import 'swiper/css';
12
12
  import { SCOPE_SC_UI } from '../../constants/Errors';
13
13
  import { DEFAULT_PAGINATION_OFFSET } from '../../constants/Pagination';
14
- import HiddenPlaceholder from '../../shared/HiddenPlaceholder';
15
14
  import { actionWidgetTypes, dataWidgetReducer, stateWidgetInitializer } from '../../utils/widget';
16
15
  import Widget from '../Widget';
17
16
  import { PREFIX } from './constants';
@@ -60,10 +59,10 @@ export default function EventMembersWidget(inProps) {
60
59
  cacheStrategy,
61
60
  visibleItems: limit
62
61
  }, stateWidgetInitializer);
63
- const [participantsCount, setParticipantsCount] = useState(0);
64
- const [invitedCount, setInvitedCount] = useState(0);
65
- const [requestsCount, setRequestsCount] = useState(0);
66
- const [requestsUsers, setRequestsUsers] = useState([]);
62
+ const [participantsCount, setParticipantsCount] = useState(participants.count);
63
+ const [invitedCount, setInvitedCount] = useState(invited.count);
64
+ const [requestsCount, setRequestsCount] = useState(requests.count);
65
+ const [requestsUsers, setRequestsUsers] = useState(requests.results);
67
66
  const [tabValue, setTabValue] = useState(TabContentEnum.PARTICIPANTS);
68
67
  const [refresh, setRefresh] = useState(null);
69
68
  // CONTEXT
@@ -148,33 +147,16 @@ export default function EventMembersWidget(inProps) {
148
147
  });
149
148
  return () => {
150
149
  clearTimeout(_t);
151
- if (participants.initialized) {
152
- dispatchParticipants({
153
- type: actionWidgetTypes.INITIALIZE,
154
- payload: {
155
- cacheKey: SCCache.getWidgetStateCacheKey(SCCache.USER_PARTECIPANTS_EVENTS_STATE_CACHE_PREFIX_KEY, scEvent.id)
156
- }
157
- });
158
- }
159
- if (invited.initialized) {
160
- dispatchParticipants({
161
- type: actionWidgetTypes.INITIALIZE,
162
- payload: {
163
- cacheKey: SCCache.getWidgetStateCacheKey(SCCache.USER_INVITED_EVENTS_STATE_CACHE_PREFIX_KEY, scEvent.id)
164
- }
165
- });
166
- }
167
- if (requests.initialized) {
168
- dispatchParticipants({
169
- type: actionWidgetTypes.INITIALIZE,
170
- payload: {
171
- cacheKey: SCCache.getWidgetStateCacheKey(SCCache.USER_REQUESTS_EVENTS_STATE_CACHE_PREFIX_KEY, scEvent.id)
172
- }
173
- });
174
- }
175
150
  };
176
151
  }
177
152
  }, [scUserContext.user, scEvent, refresh]);
153
+ useEffect(() => {
154
+ if (participants.initialized && scEvent && Boolean((eventId !== undefined && scEvent.id !== eventId) || (event && scEvent.id !== event.id))) {
155
+ dispatchParticipants({ type: actionWidgetTypes.RESET, payload: {} });
156
+ dispatchRequests({ type: actionWidgetTypes.RESET, payload: {} });
157
+ dispatchInvited({ type: actionWidgetTypes.RESET, payload: {} });
158
+ }
159
+ }, [participants.initialized, scEvent, eventId, event]);
178
160
  // HANDLERS
179
161
  const handleTabChange = useCallback((_evt, newTabValue) => {
180
162
  setTabValue(newTabValue);
@@ -188,13 +170,12 @@ export default function EventMembersWidget(inProps) {
188
170
  }
189
171
  setRefresh(_tabValue);
190
172
  }, []);
191
- if (!scEvent && !participants.initialized) {
173
+ if (!scEvent ||
174
+ !participants.initialized ||
175
+ (scEvent && ((eventId !== undefined && scEvent.id !== eventId) || (event && scEvent.id !== event.id))) ||
176
+ (tabValue === TabContentEnum.PARTICIPANTS && participants.isLoadingNext && !participants.initialized)) {
192
177
  return _jsx(Skeleton, {});
193
178
  }
194
- // RENDER
195
- if (!scEvent) {
196
- return _jsx(HiddenPlaceholder, {});
197
- }
198
179
  return (_jsx(Root, Object.assign({ className: classes.root }, rest, { children: _jsxs(CardContent, Object.assign({ className: classes.content }, { children: [_jsx(Typography, Object.assign({ variant: "h5", className: classes.title }, { children: _jsx(FormattedMessage, { id: title, defaultMessage: title }) })), _jsxs(TabContext, Object.assign({ value: tabValue }, { children: [_jsxs(TabList, Object.assign({ className: classes.tabsWrapper, onChange: handleTabChange, textColor: "primary", indicatorColor: "primary", variant: "fullWidth" }, { children: [_jsx(Tab, { label: _jsxs(Stack, Object.assign({ className: classes.tabLabelWrapper }, { children: [_jsx(Typography, Object.assign({ variant: "h3" }, { children: participantsCount })), _jsx(Typography, Object.assign({ variant: "subtitle2" }, { children: _jsx(FormattedMessage, { id: "ui.eventMembersWidget.participants", defaultMessage: "ui.eventMembersWidget.participants" }) }))] })), value: TabContentEnum.PARTICIPANTS }), hasAllow && (_jsx(Tab, { label: _jsxs(Stack, Object.assign({ className: classes.tabLabelWrapper }, { children: [_jsx(Typography, Object.assign({ variant: "h3" }, { children: invitedCount })), _jsx(Typography, Object.assign({ variant: "subtitle2" }, { children: _jsx(FormattedMessage, { id: "ui.eventMembersWidget.invited", defaultMessage: "ui.eventMembersWidget.invited" }) }))] })), value: TabContentEnum.INVITED })), hasAllow && (_jsx(Tab, { label: _jsxs(Stack, Object.assign({ className: classes.tabLabelWrapper }, { children: [_jsx(Typography, Object.assign({ variant: "h3" }, { children: requestsCount })), _jsx(Typography, Object.assign({ variant: "subtitle2" }, { children: _jsx(FormattedMessage, { id: "ui.eventMembersWidget.requests", defaultMessage: "ui.eventMembersWidget.requests" }) }))] })), value: TabContentEnum.REQUESTS }))] })), _jsx(TabPanel, Object.assign({ value: TabContentEnum.PARTICIPANTS, className: classes.tabPanel }, { children: _jsx(TabContentComponent, { tabValue: TabContentEnum.PARTICIPANTS, state: participants, dispatch: dispatchParticipants, userProps: userProps, dialogProps: dialogProps, handleRefresh: handleRefresh }) })), hasAllow && (_jsx(TabPanel, Object.assign({ value: TabContentEnum.INVITED, className: classes.tabPanel }, { children: _jsx(TabContentComponent, { tabValue: TabContentEnum.INVITED, state: invited, dispatch: dispatchInvited, userProps: userProps, dialogProps: dialogProps, actionProps: {
199
180
  scEvent,
200
181
  setCount: setInvitedCount
@@ -44,7 +44,7 @@ export default function TabContentComponent(props) {
44
44
  // EFFECTS
45
45
  useEffect(() => {
46
46
  updatesInvited.current = PubSub.subscribe(`${SCTopicType.EVENT}.${SCGroupEventType.INVITE_MEMBER}`, handleInviteMember);
47
- updatesParticipants.current = PubSub.subscribe(`${SCTopicType.EVENT}.${SCGroupEventType.ADD_MEMBER}`, handleToggleMember);
47
+ updatesParticipants.current = PubSub.subscribe(`${SCTopicType.EVENT}.${SCGroupEventType.MEMBERS}`, handleToggleMember);
48
48
  return () => {
49
49
  updatesInvited.current && PubSub.unsubscribe(updatesInvited.current);
50
50
  updatesParticipants.current && PubSub.unsubscribe(updatesParticipants.current);
@@ -1,4 +1,4 @@
1
- import { SCEventSubscriptionStatusType, SCEventType, SCUserType } from '@selfcommunity/types';
1
+ import { SCEventType, SCUserType } from '@selfcommunity/types';
2
2
  export interface EventSubscribeButtonProps {
3
3
  /**
4
4
  * Overrides or extends the styles applied to the component.
@@ -25,7 +25,7 @@ export interface EventSubscribeButtonProps {
25
25
  * @param user
26
26
  * @param joined
27
27
  */
28
- onSubscribe?: (event: SCEventType, status: SCEventSubscriptionStatusType | null) => any;
28
+ onSubscribe?: (event: SCEventType) => any;
29
29
  /**
30
30
  * Others properties
31
31
  */
@@ -4,12 +4,12 @@ import { LoadingButton } from '@mui/lab';
4
4
  import { Box, Button, Checkbox, CircularProgress, FormControlLabel, Icon, Menu, MenuItem, SwipeableDrawer, useMediaQuery, useTheme } from '@mui/material';
5
5
  import { styled } from '@mui/material/styles';
6
6
  import { useThemeProps } from '@mui/system';
7
- import { getEventStatus, useSCContext, useSCFetchEvent, useSCUser } from '@selfcommunity/react-core';
7
+ import { useSCContext, useSCFetchEvent, useSCUser } from '@selfcommunity/react-core';
8
8
  import { SCEventPrivacyType, SCEventSubscriptionStatusType } from '@selfcommunity/types';
9
9
  import { CacheStrategies, Logger } from '@selfcommunity/utils';
10
10
  import classNames from 'classnames';
11
11
  import PubSub from 'pubsub-js';
12
- import { useEffect, useMemo, useState } from 'react';
12
+ import { useCallback, useEffect, useMemo, useState } from 'react';
13
13
  import { FormattedMessage } from 'react-intl';
14
14
  import { SCOPE_SC_UI } from '../../constants/Errors';
15
15
  import { SCGroupEventType, SCTopicType } from '../../constants/PubSub';
@@ -93,19 +93,19 @@ export default function EventSubscribeButton(inProps) {
93
93
  const isMobile = useMediaQuery(theme.breakpoints.down('md'));
94
94
  // CONST
95
95
  const authUserId = scUserContext.user ? scUserContext.user.id : null;
96
- const { scEvent } = useSCFetchEvent({
96
+ const { scEvent, setSCEvent } = useSCFetchEvent({
97
97
  id: eventId,
98
98
  event,
99
99
  cacheStrategy: authUserId ? CacheStrategies.CACHE_FIRST : CacheStrategies.STALE_WHILE_REVALIDATE
100
100
  });
101
101
  const isEventAdmin = 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]);
102
102
  // HANDLERS
103
- const handleOpen = (event) => {
103
+ const handleOpen = useCallback((event) => {
104
104
  setAnchorEl(event.currentTarget);
105
- };
106
- const handleClose = () => {
105
+ }, [setAnchorEl]);
106
+ const handleClose = useCallback(() => {
107
107
  setAnchorEl(null);
108
- };
108
+ }, [setAnchorEl]);
109
109
  useEffect(() => {
110
110
  /**
111
111
  * Call scEventsManager.subscriptionStatus inside an effect
@@ -115,25 +115,23 @@ export default function EventSubscribeButton(inProps) {
115
115
  setStatus(scEventsManager === null || scEventsManager === void 0 ? void 0 : scEventsManager.subscriptionStatus(scEvent));
116
116
  }
117
117
  }, [authUserId, scEventsManager === null || scEventsManager === void 0 ? void 0 : scEventsManager.subscriptionStatus, scEvent]);
118
- const toggleEventAttendance = (eventStatus) => {
118
+ const toggleEventAttendance = useCallback((eventStatus) => {
119
119
  setLoading(true);
120
120
  const isGoing = eventStatus === SCEventSubscriptionStatusType.GOING ||
121
121
  !(scEvent === null || scEvent === void 0 ? void 0 : scEvent.subscription_status) ||
122
122
  (scEvent === null || scEvent === void 0 ? void 0 : scEvent.subscription_status) === SCEventSubscriptionStatusType.INVITED;
123
- const toggleAction = isGoing
124
- ? scEventsManager.toggleEventAttendance(scEvent, (user === null || user === void 0 ? void 0 : user.id) || null)
125
- : scEventsManager.toggleEventNonattendance(scEvent);
123
+ const toggleAction = isGoing ? scEventsManager.toggleEventAttendance(scEvent) : scEventsManager.toggleEventNonattendance(scEvent);
126
124
  toggleAction
127
- .then(() => {
128
- onSubscribe === null || onSubscribe === void 0 ? void 0 : onSubscribe(scEvent, getEventStatus(scEvent, isGoing));
125
+ .then((data) => {
126
+ onSubscribe ? onSubscribe(data) : setSCEvent(data);
129
127
  setLoading(false);
130
- PubSub.publish(`${SCTopicType.EVENT}.${SCGroupEventType.ADD_MEMBER}`, scUserContext.user);
128
+ PubSub.publish(`${SCTopicType.EVENT}.${SCGroupEventType.MEMBERS}`);
131
129
  })
132
130
  .catch((e) => {
133
131
  Logger.error(SCOPE_SC_UI, e);
134
132
  });
135
- };
136
- const handleToggleAction = (event) => {
133
+ }, [scEvent, scEventsManager, onSubscribe, setLoading]);
134
+ const handleToggleAction = useCallback((event) => {
137
135
  setAnchorEl(null);
138
136
  if (!scUserContext.user) {
139
137
  scContext.settings.handleAnonymousAction();
@@ -141,9 +139,9 @@ export default function EventSubscribeButton(inProps) {
141
139
  else if (status !== undefined) {
142
140
  toggleEventAttendance(event.target.value);
143
141
  }
144
- };
142
+ }, [scUserContext.user, status, scContext.settings]);
145
143
  function renderMenuItems() {
146
- return (_jsx(Box, { children: options.map((option) => (_jsx(MenuItem, Object.assign({ className: classes.item, disabled: loading }, { children: _jsx(FormControlLabel, { label: option.label, control: loading ? (_jsx(CircularProgress, { color: 'primary', size: 20 })) : (_jsx(Checkbox, { size: "small", checked: status === option.value, value: option.value, onChange: handleToggleAction, name: `${option.value}-option`, inputProps: { 'aria-label': `${option.label}` } })), labelPlacement: "start" }) }), option.value))) }));
144
+ return (_jsx(Box, { children: options.map((option) => (_jsx(MenuItem, Object.assign({ className: classes.item, disabled: loading }, { children: _jsx(FormControlLabel, { label: option.label, control: loading ? (_jsx(CircularProgress, { color: "primary", size: 20 })) : (_jsx(Checkbox, { size: "small", checked: status === option.value, value: option.value, onChange: handleToggleAction, name: `${option.value}-option`, inputProps: { 'aria-label': `${option.label}` } })), labelPlacement: "start" }) }), option.value))) }));
147
145
  }
148
146
  /**
149
147
  * Get current translated status
@@ -142,13 +142,13 @@ export default function Events(inProps) {
142
142
  * On mount, fetches events list
143
143
  */
144
144
  useEffect(() => {
145
- if (!contentAvailability) {
145
+ if (!contentAvailability && !authUserId) {
146
146
  return;
147
147
  }
148
148
  else {
149
149
  query === '' && fetchEvents();
150
150
  }
151
- }, [contentAvailability, dateSearch, location, showFollowed, showPastEvents, showMyEvents, query]);
151
+ }, [contentAvailability, authUserId, dateSearch, location, showFollowed, showPastEvents, showMyEvents, query]);
152
152
  /**
153
153
  * Subscriber for pubsub callback
154
154
  */
@@ -211,7 +211,6 @@ export default function Events(inProps) {
211
211
  /**
212
212
  * Renders events list
213
213
  */
214
- console.log(location);
215
214
  const c = (_jsxs(_Fragment, { children: [showFilters && (_jsx(Grid, Object.assign({ container: true, className: classes.filters, gap: 2 }, { children: filters ? (filters) : !general ? (_jsxs(_Fragment, { children: [(events.length !== 0 || (events.length === 0 && showMyEvents)) && (_jsx(Grid, Object.assign({ item: true }, { children: _jsx(EventsChipRoot
216
215
  // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
217
216
  // @ts-ignore
@@ -244,7 +243,7 @@ export default function Events(inProps) {
244
243
  // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
245
244
  // @ts-ignore
246
245
  showFollowed: showFollowed, deleteIcon: showFollowed ? _jsx(Icon, { children: "close" }) : null, onDelete: showFollowed ? handleDeleteClick : null, disabled: loading || (!events.length && !showFollowed) }) }))), _jsx(Grid, Object.assign({ item: true }, { children: _jsx(PastEventsFilter, { showPastEvents: showPastEvents, handleClick: handleChipPastClick, handleDeleteClick: handleDeletePastClick, disabled: dateSearch !== SCEventDateFilterType.ANY || loading || (!events.length && !showPastEvents) }) }))] })) }))), _jsx(_Fragment, { children: loading ? (_jsx(Skeleton, Object.assign({}, EventsSkeletonComponentProps, { EventSkeletonProps: EventSkeletonComponentProps }))) : (_jsx(_Fragment, { children: !events.length ? (_jsx(Box, Object.assign({ className: classes.noResults }, { children: (onlyStaffEnabled && !UserUtils.isStaff(scUserContext.user)) ||
247
- (onlyStaffEnabled && UserUtils.isStaff(scUserContext.user) && general) ? (_jsxs(_Fragment, { children: [_jsx(EventSkeleton, Object.assign({}, EventSkeletonComponentProps)), _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.events.noEvents.title", defaultMessage: "ui.events.noEvents.title" }) }))] })) : (_jsxs(_Fragment, { children: [_jsx(EventSkeleton, Object.assign({}, EventSkeletonComponentProps, { skeletonsAnimation: false, actions: _jsx(CreateEventButton, {}) })), _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.events.noEvents.title.onlyStaff", defaultMessage: "ui.events.noEvents.title.onlyStaff" }) }))] })) }))) : (_jsxs(_Fragment, { children: [_jsx(Grid, Object.assign({ container: true, spacing: { xs: 2 }, className: classes.events }, GridContainerComponentProps, { children: _jsxs(_Fragment, { children: [events.map((event) => (_jsx(Grid, Object.assign({ item: true, xs: 12, sm: 12, md: 6, className: classes.item }, GridItemComponentProps, { children: _jsx(Event, Object.assign({ event: event, eventId: event.id }, EventComponentProps)) }), event.id))), authUserId && events.length % 2 !== 0 && (_jsx(Grid, Object.assign({ item: true, xs: 12, sm: 12, md: 6, className: classes.itemSkeleton }, GridItemComponentProps, { children: _jsx(EventSkeleton, Object.assign({}, EventSkeletonComponentProps, { skeletonsAnimation: false, actions: _jsx(CreateEventButton, Object.assign({ variant: "outlined", color: "primary", size: "small" }, { children: _jsx(FormattedMessage, { id: "ui.events.skeleton.action.add", defaultMessage: "ui.events.skeleton.action.add" }) })) })) }), 'skeleton-item'))] }) })), Boolean(next) && (_jsx(Button, Object.assign({ color: "secondary", variant: "text", onClick: handleNext, className: classes.showMore }, { children: _jsx(FormattedMessage, { id: "ui.events.button.seeMore", defaultMessage: "ui.events.button.seeMore" }) })))] })) })) })] }));
246
+ (onlyStaffEnabled && UserUtils.isStaff(scUserContext.user) && general) ? (_jsxs(_Fragment, { children: [_jsx(EventSkeleton, Object.assign({}, EventSkeletonComponentProps, { skeletonsAnimation: false })), _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.events.noEvents.title", defaultMessage: "ui.events.noEvents.title" }) }))] })) : (_jsxs(_Fragment, { children: [_jsx(EventSkeleton, Object.assign({}, EventSkeletonComponentProps, { skeletonsAnimation: false, actions: _jsx(CreateEventButton, {}) })), _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.events.noEvents.title.onlyStaff", defaultMessage: "ui.events.noEvents.title.onlyStaff" }) }))] })) }))) : (_jsxs(_Fragment, { children: [_jsx(Grid, Object.assign({ container: true, spacing: { xs: 2 }, className: classes.events }, GridContainerComponentProps, { children: _jsxs(_Fragment, { children: [events.map((event) => (_jsx(Grid, Object.assign({ item: true, xs: 12, sm: 12, md: 6, className: classes.item }, GridItemComponentProps, { children: _jsx(Event, Object.assign({ event: event, eventId: event.id }, EventComponentProps)) }), event.id))), authUserId && events.length % 2 !== 0 && (_jsx(Grid, Object.assign({ item: true, xs: 12, sm: 12, md: 6, className: classes.itemSkeleton }, GridItemComponentProps, { children: _jsx(EventSkeleton, Object.assign({}, EventSkeletonComponentProps, { skeletonsAnimation: false, actions: _jsx(CreateEventButton, Object.assign({ variant: "outlined", color: "primary", size: "small" }, { children: _jsx(FormattedMessage, { id: "ui.events.skeleton.action.add", defaultMessage: "ui.events.skeleton.action.add" }) })) })) }), 'skeleton-item'))] }) })), Boolean(next) && (_jsx(Button, Object.assign({ color: "secondary", variant: "text", onClick: handleNext, className: classes.showMore }, { children: _jsx(FormattedMessage, { id: "ui.events.button.seeMore", defaultMessage: "ui.events.button.seeMore" }) })))] })) })) })] }));
248
247
  /**
249
248
  * Renders root object (if content availability community option is false and user is anonymous, component is hidden)
250
249
  */
@@ -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.
@@ -72,6 +77,7 @@ export default function NavigationSettingsIconButton(inProps) {
72
77
  const scUserContext = useSCUser();
73
78
  // MEMO
74
79
  const isAdmin = useMemo(() => UserUtils.isAdmin(scUserContext.user), [scUserContext.user]);
80
+ const isCommunityCreator = useMemo(() => UserUtils.isCommunityCreator(scUserContext.user), [scUserContext.user]);
75
81
  const isModerator = useMemo(() => UserUtils.isModerator(scUserContext.user), [scUserContext.user]);
76
82
  // HOOKS
77
83
  const theme = useTheme();
@@ -92,7 +98,7 @@ export default function NavigationSettingsIconButton(inProps) {
92
98
  setAnchorEl(null);
93
99
  };
94
100
  /**
95
- * Fetches paltform url
101
+ * Fetches platform url
96
102
  * @param query
97
103
  */
98
104
  const fetchPlatform = (query) => {
@@ -101,6 +107,27 @@ export default function NavigationSettingsIconButton(inProps) {
101
107
  window.open(platformUrl, '_blank').focus();
102
108
  });
103
109
  };
110
+ /**
111
+ * Handles preferences update
112
+ */
113
+ const handlePreferencesUpdate = () => {
114
+ PreferenceService.getAllPreferences().then((preferences) => {
115
+ const prefs = preferences['results'].reduce((obj, p) => (Object.assign(Object.assign({}, obj), { [`${p.section}.${p.name}`]: p })), {});
116
+ scPreferences.setPreferences(prefs);
117
+ });
118
+ };
119
+ /**
120
+ * Updates onBoarding dynamic preference
121
+ */
122
+ const showOnBoarding = () => {
123
+ PreferenceService.updatePreferences({ [`${SCPreferenceName.ONBOARDING_HIDDEN}`]: false })
124
+ .then(() => {
125
+ handlePreferencesUpdate();
126
+ })
127
+ .catch((e) => {
128
+ Logger.error(SCOPE_SC_UI, e);
129
+ });
130
+ };
104
131
  const handleLogout = () => {
105
132
  scUserContext.logout();
106
133
  };
@@ -119,6 +146,9 @@ export default function NavigationSettingsIconButton(inProps) {
119
146
  ...(isAdmin
120
147
  ? [
121
148
  _jsx(Divider, {}, "admin_divider"),
149
+ isCommunityCreator &&
150
+ preferences[SCPreferences.CONFIGURATIONS_ONBOARDING_ENABLED] &&
151
+ 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
152
  _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
153
  ]
124
154
  : []),
@@ -147,6 +177,9 @@ export default function NavigationSettingsIconButton(inProps) {
147
177
  ...(isAdmin
148
178
  ? [
149
179
  _jsx(Divider, {}, "platform_divider"),
180
+ isCommunityCreator &&
181
+ preferences[SCPreferences.CONFIGURATIONS_ONBOARDING_ENABLED] &&
182
+ 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
183
  _jsx(MenuItem, Object.assign({ className: classes.item, onClick: () => fetchPlatform('') }, { children: _jsx(FormattedMessage, { id: "ui.navigationSettingsIconButton.platform", defaultMessage: "ui.navigationSettingsIconButton.platform" }) }), "platform")
151
184
  ]
152
185
  : []),
@@ -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;