@selfcommunity/react-ui 0.11.0-alpha.47 → 0.11.0-alpha.48

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/CreateLiveStreamDialog/CreateLiveStreamDialog.d.ts +12 -0
  2. package/lib/cjs/components/CreateLiveStreamDialog/CreateLiveStreamDialog.js +8 -4
  3. package/lib/cjs/components/EventFormDialog/EventFormDialog.d.ts +1 -1
  4. package/lib/cjs/components/Notification/Event/Event.js +31 -2
  5. package/lib/esm/components/CreateLiveStreamDialog/CreateLiveStreamDialog.d.ts +12 -0
  6. package/lib/esm/components/CreateLiveStreamDialog/CreateLiveStreamDialog.js +8 -4
  7. package/lib/esm/components/EventFormDialog/EventFormDialog.d.ts +1 -1
  8. package/lib/esm/components/Notification/Event/Event.js +34 -5
  9. package/lib/umd/react-ui.js +1 -1
  10. package/package.json +4 -4
package/lib/cjs/components/CreateLiveStreamDialog/CreateLiveStreamDialog.d.ts CHANGED
@@ -1,5 +1,7 @@
1
1
  import { SCEventType, SCLiveStreamType } from '@selfcommunity/types';
2
2
  import { BaseDialogProps } from '../../shared/BaseDialog';
3
+ import { EventFormProps } from '../EventForm';
4
+ import { LiveStreamFormProps } from '../LiveStreamForm';
3
5
  export interface CreateLiveStreamDialogProps extends BaseDialogProps {
4
6
  /**
5
7
  * Overrides or extends the styles applied to the component.
@@ -21,6 +23,16 @@ export interface CreateLiveStreamDialogProps extends BaseDialogProps {
21
23
  * @default null
22
24
  */
23
25
  onSuccess?: (data: SCEventType | SCLiveStreamType) => void;
26
+ /**
27
+ * Props to spread to EventForm component
28
+ * @default {}
29
+ */
30
+ EventFormComponentProps?: EventFormProps;
31
+ /**
32
+ * Props to spread to LiveStreamForm component
33
+ * @default {}
34
+ */
35
+ LiveStreamFormComponentProps?: LiveStreamFormProps;
24
36
  /**
25
37
  * Any other properties
26
38
  */
package/lib/cjs/components/CreateLiveStreamDialog/CreateLiveStreamDialog.js CHANGED
@@ -65,7 +65,7 @@ function CreateLiveStreamDialog(inProps) {
65
65
  props: inProps,
66
66
  name: constants_1.PREFIX
67
67
  });
68
- const { className, open = true, onClose, onSuccess } = props, rest = tslib_1.__rest(props, ["className", "open", "onClose", "onSuccess"]);
68
+ const { className, open = true, onClose, EventFormComponentProps = {}, LiveStreamFormComponentProps = {} } = props, rest = tslib_1.__rest(props, ["className", "open", "onClose", "EventFormComponentProps", "LiveStreamFormComponentProps"]);
69
69
  // CONTEXT
70
70
  const scUserContext = (0, react_core_1.useSCUser)();
71
71
  // PERMISSION
@@ -86,8 +86,12 @@ function CreateLiveStreamDialog(inProps) {
86
86
  setStep(types_2.CreateLiveStreamStep.SELECT_TYPE);
87
87
  }, []);
88
88
  const handleSubmit = (0, react_1.useCallback)((e) => {
89
- onSuccess && onSuccess(e);
90
- }, [onSuccess]);
89
+ var _a, _b;
90
+ liveType === types_2.LiveStreamType.EVENT_LIVE
91
+ ? (_a = EventFormComponentProps.onSuccess) === null || _a === void 0 ? void 0 : _a.call(EventFormComponentProps, e)
92
+ : (_b = LiveStreamFormComponentProps.onSuccess) === null || _b === void 0 ? void 0 : _b.call(LiveStreamFormComponentProps, e);
93
+ onClose === null || onClose === void 0 ? void 0 : onClose();
94
+ }, [liveType, onClose, EventFormComponentProps, LiveStreamFormComponentProps]);
91
95
  (0, react_1.useEffect)(() => {
92
96
  if (!canCreateEvent) {
93
97
  setLiveType(types_2.LiveStreamType.DIRECT_LIVE);
@@ -100,6 +104,6 @@ function CreateLiveStreamDialog(inProps) {
100
104
  /**
101
105
  * Renders root object
102
106
  */
103
- return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ DialogContentProps: { dividers: false }, maxWidth: "md", title: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.title, component: "span" }, { children: [canShowBackButton && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "text", onClick: handleBack, startIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "arrow_back" }) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.createLivestreamDialog.button.back", defaultMessage: "ui.createLivestreamDialog.button.back" }) }))), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ component: "span" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.createLivestreamDialog.title", defaultMessage: "ui.createLivestreamDialog.title" }) }))] })), fullWidth: true, open: open, scroll: "body", onClose: !canShowBackButton ? onClose : undefined, className: (0, classnames_1.default)(classes.root, className), TransitionComponent: Transition, PaperProps: { elevation: 0 } }, rest, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.content }, { children: [step === types_2.CreateLiveStreamStep.SELECT_TYPE && ((0, jsx_runtime_1.jsx)(LiveStreamSelector_1.default, { liveSelected: liveType, onLiveSelected: handleLiveTypeSelected, onNext: handleLiveTypeSelectedNext })), step === types_2.CreateLiveStreamStep.CREATE_LIVE && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: liveType === types_2.LiveStreamType.EVENT_LIVE ? ((0, jsx_runtime_1.jsx)(EventForm_1.default, { EventAddressComponentProps: { locations: [types_1.SCEventLocationType.LIVESTREAM] }, onSuccess: handleSubmit })) : ((0, jsx_runtime_1.jsx)(LiveStreamForm_1.default, { onSuccess: handleSubmit })) }))] })) })));
107
+ return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ DialogContentProps: { dividers: false }, maxWidth: "md", title: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.title, component: "span" }, { children: [canShowBackButton && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "text", onClick: handleBack, startIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "arrow_back" }) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.createLivestreamDialog.button.back", defaultMessage: "ui.createLivestreamDialog.button.back" }) }))), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ component: "span" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.createLivestreamDialog.title", defaultMessage: "ui.createLivestreamDialog.title" }) }))] })), fullWidth: true, open: open, scroll: "body", onClose: !canShowBackButton ? onClose : undefined, className: (0, classnames_1.default)(classes.root, className), TransitionComponent: Transition, PaperProps: { elevation: 0 } }, rest, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.content }, { children: [step === types_2.CreateLiveStreamStep.SELECT_TYPE && ((0, jsx_runtime_1.jsx)(LiveStreamSelector_1.default, { liveSelected: liveType, onLiveSelected: handleLiveTypeSelected, onNext: handleLiveTypeSelectedNext })), step === types_2.CreateLiveStreamStep.CREATE_LIVE && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: liveType === types_2.LiveStreamType.EVENT_LIVE ? ((0, jsx_runtime_1.jsx)(EventForm_1.default, Object.assign({}, EventFormComponentProps, { EventAddressComponentProps: { locations: [types_1.SCEventLocationType.LIVESTREAM] }, onSuccess: handleSubmit }))) : ((0, jsx_runtime_1.jsx)(LiveStreamForm_1.default, Object.assign({}, LiveStreamFormComponentProps, { onSuccess: handleSubmit }))) }))] })) })));
104
108
  }
105
109
  exports.default = CreateLiveStreamDialog;
package/lib/cjs/components/EventFormDialog/EventFormDialog.d.ts CHANGED
@@ -18,7 +18,7 @@ export interface EventFormDialogProps extends BaseDialogProps {
18
18
  onClose?: () => void;
19
19
  /**
20
20
  * Props to spread to EventForm component
21
- * @default undefined
21
+ * @default {}
22
22
  */
23
23
  EventFormComponentProps?: EventFormProps;
24
24
  /**
package/lib/cjs/components/Notification/Event/Event.js CHANGED
@@ -17,6 +17,7 @@ const UserDeletedSnackBar_1 = tslib_1.__importDefault(require("../../../shared/U
17
17
  const UserAvatar_1 = tslib_1.__importDefault(require("../../../shared/UserAvatar"));
18
18
  const constants_1 = require("../constants");
19
19
  const Event_1 = tslib_1.__importDefault(require("../../Event"));
20
+ const api_services_1 = require("@selfcommunity/api-services");
20
21
  const classes = {
21
22
  root: `${constants_1.PREFIX}-event-root`,
22
23
  avatar: `${constants_1.PREFIX}-avatar`,
@@ -40,12 +41,32 @@ function EventNotification(props) {
40
41
  const { notificationObject, id = `n_${props.notificationObject['sid']}`, className, template = types_2.SCNotificationObjectTemplateType.DETAIL } = props, rest = tslib_1.__rest(props, ["notificationObject", "id", "className", "template"]);
41
42
  // CONTEXT
42
43
  const scRoutingContext = (0, react_core_1.useSCRouting)();
44
+ const scUserContext = (0, react_core_1.useSCUser)();
45
+ const scEventsManager = scUserContext.managers.events;
43
46
  // STATE
44
47
  const [openAlert, setOpenAlert] = (0, react_1.useState)(false);
48
+ const [loading, setLoading] = (0, react_1.useState)(false);
49
+ const [disabled, setDisabled] = (0, react_1.useState)(false);
50
+ const [status, setStatus] = (0, react_1.useState)(undefined);
45
51
  // CONST
46
52
  const isSnippetTemplate = template === types_2.SCNotificationObjectTemplateType.SNIPPET;
47
53
  const isToastTemplate = template === types_2.SCNotificationObjectTemplateType.TOAST;
48
54
  const intl = (0, react_intl_1.useIntl)();
55
+ //HANDLERS
56
+ const acceptRequest = (event) => {
57
+ setLoading(true);
58
+ api_services_1.EventService.inviteOrAcceptEventRequest(event.id, { users: [notificationObject.user.id] }).then(() => {
59
+ setLoading(false);
60
+ setDisabled(true);
61
+ });
62
+ };
63
+ (0, react_1.useEffect)(() => {
64
+ if (scUserContext.user) {
65
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
66
+ // @ts-ignore
67
+ setStatus(scEventsManager === null || scEventsManager === void 0 ? void 0 : scEventsManager.subscriptionStatus(notificationObject.event));
68
+ }
69
+ }, [scUserContext.user, scEventsManager === null || scEventsManager === void 0 ? void 0 : scEventsManager.subscriptionStatus, notificationObject.event]);
49
70
  // RENDER
50
71
  if (isSnippetTemplate || isToastTemplate) {
51
72
  return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className, `${constants_1.PREFIX}-${template}`), template: template, isNew: notificationObject.is_new, disableTypography: true, image: (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({}, (!notificationObject.user.deleted && {
@@ -66,7 +87,7 @@ function EventNotification(props) {
66
87
  month: 'long'
67
88
  }),
68
89
  hour: intl.formatDate(notificationObject.event.start_date, { hour: 'numeric', minute: 'numeric' })
69
- } }) })), (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ component: "p", variant: "body2" }, { children: [(0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.notification.event.privacy.${notificationObject.event.privacy}`, defaultMessage: `ui.notification.event.privacy.${notificationObject.event.privacy}` }), ' ', "-", ' ', notificationObject.event.location === types_1.SCEventLocationType.PERSON ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.notification.event.address.live.label`, defaultMessage: `ui.notification.event.address.live.label` })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.notification.event.address.online.label`, defaultMessage: `ui.notification.event.address.online.label` }))] }))] }), footer: isToastTemplate ? ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 }, { children: [(0, jsx_runtime_1.jsx)(DateTimeAgo_1.default, { date: notificationObject.active_at }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ color: "primary" }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes.EVENT_ROUTE_NAME, notificationObject.event) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.notification.event.button.see", defaultMessage: "ui.notification.event.button.see" }) })) }))] }))) : ((0, jsx_runtime_1.jsx)(DateTimeAgo_1.default, { date: notificationObject.active_at, className: classes.snippetTime })) }, rest)));
90
+ } }) })), (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ component: "p", variant: "body2" }, { children: [(0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.notification.event.privacy.${notificationObject.event.privacy}`, defaultMessage: `ui.notification.event.privacy.${notificationObject.event.privacy}` }), ' ', "-", ' ', notificationObject.event.location === types_1.SCEventLocationType.PERSON ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.notification.event.address.live.label`, defaultMessage: `ui.notification.event.address.live.label` })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.notification.event.address.online.label`, defaultMessage: `ui.notification.event.address.online.label` }))] }))] }), footer: isToastTemplate ? ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 }, { children: [(0, jsx_runtime_1.jsx)(DateTimeAgo_1.default, { date: notificationObject.active_at }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ color: "primary" }, { children: notificationObject.type === types_1.SCNotificationTypologyType.USER_REQUESTED_TO_JOIN_EVENT ? ((0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ disabled: status && status !== types_1.SCEventSubscriptionStatusType.REQUESTED, loading: loading, color: 'primary', variant: "text", size: "small", onClick: () => acceptRequest(notificationObject.event) }, { children: disabled || (status && status !== types_1.SCEventSubscriptionStatusType.REQUESTED) ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.notification.event.button.accepted", defaultMessage: "ui.notification.event.button.accepted" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.notification.event.button.accept", defaultMessage: "ui.notification.event.button.accept" })) }))) : ((0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes.EVENT_ROUTE_NAME, notificationObject.event) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.notification.event.button.see", defaultMessage: "ui.notification.event.button.see" }) }))) }))] }))) : ((0, jsx_runtime_1.jsx)(DateTimeAgo_1.default, { date: notificationObject.active_at, className: classes.snippetTime })) }, rest)));
70
91
  }
71
92
  return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className, `${constants_1.PREFIX}-${template}`), template: template, isNew: notificationObject.is_new, disableTypography: true, image: (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({}, (!notificationObject.user.deleted && {
72
93
  to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, notificationObject.user)
@@ -78,6 +99,14 @@ function EventNotification(props) {
78
99
  icon: (...chunks) => (0, jsx_runtime_1.jsx)(material_1.Icon, { children: chunks }),
79
100
  event: notificationObject.event.name,
80
101
  link: (...chunks) => (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes.EVENT_ROUTE_NAME, notificationObject.event) }, { children: chunks }))
81
- } }), (0, jsx_runtime_1.jsx)(Event_1.default, { event: notificationObject.event, actions: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}), elevation: 0 })] }), actions: (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 }, { children: [(0, jsx_runtime_1.jsx)(DateTimeAgo_1.default, { date: notificationObject.active_at, className: classes.activeAt }), (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ color: 'primary', variant: "outlined", size: "small", classes: { root: classes.seeButton }, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.EVENT_ROUTE_NAME, notificationObject.event) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.notification.event.button.see", defaultMessage: "ui.notification.event.button.see" }) }))] })) }, rest)), openAlert && (0, jsx_runtime_1.jsx)(UserDeletedSnackBar_1.default, { open: openAlert, handleClose: () => setOpenAlert(false) })] }));
102
+ } }), (0, jsx_runtime_1.jsx)(Event_1.default, { event: notificationObject.event, actions: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}), elevation: 0 })] }), actions: (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 }, { children: [(0, jsx_runtime_1.jsx)(DateTimeAgo_1.default, { date: notificationObject.active_at, className: classes.activeAt }), (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ disabled: disabled ||
103
+ (notificationObject.type === types_1.SCNotificationTypologyType.USER_REQUESTED_TO_JOIN_EVENT &&
104
+ status &&
105
+ status !== types_1.SCEventSubscriptionStatusType.REQUESTED), loading: loading, color: 'primary', variant: "outlined", size: "small", classes: { root: classes.seeButton } }, (notificationObject.type !== types_1.SCNotificationTypologyType.USER_REQUESTED_TO_JOIN_EVENT && {
106
+ component: react_core_1.Link,
107
+ to: scRoutingContext.url(react_core_1.SCRoutes.EVENT_ROUTE_NAME, notificationObject.event)
108
+ }), { onClick: notificationObject.type === types_1.SCNotificationTypologyType.USER_REQUESTED_TO_JOIN_EVENT
109
+ ? () => acceptRequest(notificationObject.event)
110
+ : null }, { children: notificationObject.type === types_1.SCNotificationTypologyType.USER_REQUESTED_TO_JOIN_EVENT ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: status && status !== types_1.SCEventSubscriptionStatusType.REQUESTED ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.notification.event.button.accepted", defaultMessage: "ui.notification.event.button.accepted" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.notification.event.button.accept", defaultMessage: "ui.notification.event.button.accept" })) })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.notification.event.button.see", defaultMessage: "ui.notification.event.button.see" })) }))] })) }, rest)), openAlert && (0, jsx_runtime_1.jsx)(UserDeletedSnackBar_1.default, { open: openAlert, handleClose: () => setOpenAlert(false) })] }));
82
111
  }
83
112
  exports.default = EventNotification;
package/lib/esm/components/CreateLiveStreamDialog/CreateLiveStreamDialog.d.ts CHANGED
@@ -1,5 +1,7 @@
1
1
  import { SCEventType, SCLiveStreamType } from '@selfcommunity/types';
2
2
  import { BaseDialogProps } from '../../shared/BaseDialog';
3
+ import { EventFormProps } from '../EventForm';
4
+ import { LiveStreamFormProps } from '../LiveStreamForm';
3
5
  export interface CreateLiveStreamDialogProps extends BaseDialogProps {
4
6
  /**
5
7
  * Overrides or extends the styles applied to the component.
@@ -21,6 +23,16 @@ export interface CreateLiveStreamDialogProps extends BaseDialogProps {
21
23
  * @default null
22
24
  */
23
25
  onSuccess?: (data: SCEventType | SCLiveStreamType) => void;
26
+ /**
27
+ * Props to spread to EventForm component
28
+ * @default {}
29
+ */
30
+ EventFormComponentProps?: EventFormProps;
31
+ /**
32
+ * Props to spread to LiveStreamForm component
33
+ * @default {}
34
+ */
35
+ LiveStreamFormComponentProps?: LiveStreamFormProps;
24
36
  /**
25
37
  * Any other properties
26
38
  */
package/lib/esm/components/CreateLiveStreamDialog/CreateLiveStreamDialog.js CHANGED
@@ -63,7 +63,7 @@ export default function CreateLiveStreamDialog(inProps) {
63
63
  props: inProps,
64
64
  name: PREFIX
65
65
  });
66
- const { className, open = true, onClose, onSuccess } = props, rest = __rest(props, ["className", "open", "onClose", "onSuccess"]);
66
+ const { className, open = true, onClose, EventFormComponentProps = {}, LiveStreamFormComponentProps = {} } = props, rest = __rest(props, ["className", "open", "onClose", "EventFormComponentProps", "LiveStreamFormComponentProps"]);
67
67
  // CONTEXT
68
68
  const scUserContext = useSCUser();
69
69
  // PERMISSION
@@ -84,8 +84,12 @@ export default function CreateLiveStreamDialog(inProps) {
84
84
  setStep(CreateLiveStreamStep.SELECT_TYPE);
85
85
  }, []);
86
86
  const handleSubmit = useCallback((e) => {
87
- onSuccess && onSuccess(e);
88
- }, [onSuccess]);
87
+ var _a, _b;
88
+ liveType === LiveStreamType.EVENT_LIVE
89
+ ? (_a = EventFormComponentProps.onSuccess) === null || _a === void 0 ? void 0 : _a.call(EventFormComponentProps, e)
90
+ : (_b = LiveStreamFormComponentProps.onSuccess) === null || _b === void 0 ? void 0 : _b.call(LiveStreamFormComponentProps, e);
91
+ onClose === null || onClose === void 0 ? void 0 : onClose();
92
+ }, [liveType, onClose, EventFormComponentProps, LiveStreamFormComponentProps]);
89
93
  useEffect(() => {
90
94
  if (!canCreateEvent) {
91
95
  setLiveType(LiveStreamType.DIRECT_LIVE);
@@ -98,5 +102,5 @@ export default function CreateLiveStreamDialog(inProps) {
98
102
  /**
99
103
  * Renders root object
100
104
  */
101
- return (_jsx(Root, Object.assign({ DialogContentProps: { dividers: false }, maxWidth: "md", title: _jsxs(Box, Object.assign({ className: classes.title, component: "span" }, { children: [canShowBackButton && (_jsx(Button, Object.assign({ variant: "text", onClick: handleBack, startIcon: _jsx(Icon, { children: "arrow_back" }) }, { children: _jsx(FormattedMessage, { id: "ui.createLivestreamDialog.button.back", defaultMessage: "ui.createLivestreamDialog.button.back" }) }))), _jsx(Box, Object.assign({ component: "span" }, { children: _jsx(FormattedMessage, { id: "ui.createLivestreamDialog.title", defaultMessage: "ui.createLivestreamDialog.title" }) }))] })), fullWidth: true, open: open, scroll: "body", onClose: !canShowBackButton ? onClose : undefined, className: classNames(classes.root, className), TransitionComponent: Transition, PaperProps: { elevation: 0 } }, rest, { children: _jsxs(Box, Object.assign({ className: classes.content }, { children: [step === CreateLiveStreamStep.SELECT_TYPE && (_jsx(LiveStreamSelector, { liveSelected: liveType, onLiveSelected: handleLiveTypeSelected, onNext: handleLiveTypeSelectedNext })), step === CreateLiveStreamStep.CREATE_LIVE && (_jsx(_Fragment, { children: liveType === LiveStreamType.EVENT_LIVE ? (_jsx(EventForm, { EventAddressComponentProps: { locations: [SCEventLocationType.LIVESTREAM] }, onSuccess: handleSubmit })) : (_jsx(LiveStreamForm, { onSuccess: handleSubmit })) }))] })) })));
105
+ return (_jsx(Root, Object.assign({ DialogContentProps: { dividers: false }, maxWidth: "md", title: _jsxs(Box, Object.assign({ className: classes.title, component: "span" }, { children: [canShowBackButton && (_jsx(Button, Object.assign({ variant: "text", onClick: handleBack, startIcon: _jsx(Icon, { children: "arrow_back" }) }, { children: _jsx(FormattedMessage, { id: "ui.createLivestreamDialog.button.back", defaultMessage: "ui.createLivestreamDialog.button.back" }) }))), _jsx(Box, Object.assign({ component: "span" }, { children: _jsx(FormattedMessage, { id: "ui.createLivestreamDialog.title", defaultMessage: "ui.createLivestreamDialog.title" }) }))] })), fullWidth: true, open: open, scroll: "body", onClose: !canShowBackButton ? onClose : undefined, className: classNames(classes.root, className), TransitionComponent: Transition, PaperProps: { elevation: 0 } }, rest, { children: _jsxs(Box, Object.assign({ className: classes.content }, { children: [step === CreateLiveStreamStep.SELECT_TYPE && (_jsx(LiveStreamSelector, { liveSelected: liveType, onLiveSelected: handleLiveTypeSelected, onNext: handleLiveTypeSelectedNext })), step === CreateLiveStreamStep.CREATE_LIVE && (_jsx(_Fragment, { children: liveType === LiveStreamType.EVENT_LIVE ? (_jsx(EventForm, Object.assign({}, EventFormComponentProps, { EventAddressComponentProps: { locations: [SCEventLocationType.LIVESTREAM] }, onSuccess: handleSubmit }))) : (_jsx(LiveStreamForm, Object.assign({}, LiveStreamFormComponentProps, { onSuccess: handleSubmit }))) }))] })) })));
102
106
  }
package/lib/esm/components/EventFormDialog/EventFormDialog.d.ts CHANGED
@@ -18,7 +18,7 @@ export interface EventFormDialogProps extends BaseDialogProps {
18
18
  onClose?: () => void;
19
19
  /**
20
20
  * Props to spread to EventForm component
21
- * @default undefined
21
+ * @default {}
22
22
  */
23
23
  EventFormComponentProps?: EventFormProps;
24
24
  /**
package/lib/esm/components/Notification/Event/Event.js CHANGED
@@ -1,10 +1,10 @@
1
1
  import { __rest } from "tslib";
2
2
  import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
3
- import { useState } from 'react';
3
+ import { useEffect, useState } from 'react';
4
4
  import { styled } from '@mui/material/styles';
5
5
  import { Avatar, Box, Icon, Stack, Typography } from '@mui/material';
6
- import { Link, SCRoutes, useSCRouting } from '@selfcommunity/react-core';
7
- import { SCEventLocationType } from '@selfcommunity/types';
6
+ import { Link, SCRoutes, useSCRouting, useSCUser } from '@selfcommunity/react-core';
7
+ import { SCEventLocationType, SCEventSubscriptionStatusType, SCNotificationTypologyType } from '@selfcommunity/types';
8
8
  import { FormattedMessage, useIntl } from 'react-intl';
9
9
  import DateTimeAgo from '../../../shared/DateTimeAgo';
10
10
  import classNames from 'classnames';
@@ -15,6 +15,7 @@ import UserDeletedSnackBar from '../../../shared/UserDeletedSnackBar';
15
15
  import UserAvatar from '../../../shared/UserAvatar';
16
16
  import { PREFIX } from '../constants';
17
17
  import { default as EventItem } from '../../Event';
18
+ import { EventService } from '@selfcommunity/api-services';
18
19
  const classes = {
19
20
  root: `${PREFIX}-event-root`,
20
21
  avatar: `${PREFIX}-avatar`,
@@ -38,12 +39,32 @@ export default function EventNotification(props) {
38
39
  const { notificationObject, id = `n_${props.notificationObject['sid']}`, className, template = SCNotificationObjectTemplateType.DETAIL } = props, rest = __rest(props, ["notificationObject", "id", "className", "template"]);
39
40
  // CONTEXT
40
41
  const scRoutingContext = useSCRouting();
42
+ const scUserContext = useSCUser();
43
+ const scEventsManager = scUserContext.managers.events;
41
44
  // STATE
42
45
  const [openAlert, setOpenAlert] = useState(false);
46
+ const [loading, setLoading] = useState(false);
47
+ const [disabled, setDisabled] = useState(false);
48
+ const [status, setStatus] = useState(undefined);
43
49
  // CONST
44
50
  const isSnippetTemplate = template === SCNotificationObjectTemplateType.SNIPPET;
45
51
  const isToastTemplate = template === SCNotificationObjectTemplateType.TOAST;
46
52
  const intl = useIntl();
53
+ //HANDLERS
54
+ const acceptRequest = (event) => {
55
+ setLoading(true);
56
+ EventService.inviteOrAcceptEventRequest(event.id, { users: [notificationObject.user.id] }).then(() => {
57
+ setLoading(false);
58
+ setDisabled(true);
59
+ });
60
+ };
61
+ useEffect(() => {
62
+ if (scUserContext.user) {
63
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
64
+ // @ts-ignore
65
+ setStatus(scEventsManager === null || scEventsManager === void 0 ? void 0 : scEventsManager.subscriptionStatus(notificationObject.event));
66
+ }
67
+ }, [scUserContext.user, scEventsManager === null || scEventsManager === void 0 ? void 0 : scEventsManager.subscriptionStatus, notificationObject.event]);
47
68
  // RENDER
48
69
  if (isSnippetTemplate || isToastTemplate) {
49
70
  return (_jsx(Root, Object.assign({ id: id, className: classNames(classes.root, className, `${PREFIX}-${template}`), template: template, isNew: notificationObject.is_new, disableTypography: true, image: _jsx(Link, Object.assign({}, (!notificationObject.user.deleted && {
@@ -64,7 +85,7 @@ export default function EventNotification(props) {
64
85
  month: 'long'
65
86
  }),
66
87
  hour: intl.formatDate(notificationObject.event.start_date, { hour: 'numeric', minute: 'numeric' })
67
- } }) })), _jsxs(Typography, Object.assign({ component: "p", variant: "body2" }, { children: [_jsx(FormattedMessage, { id: `ui.notification.event.privacy.${notificationObject.event.privacy}`, defaultMessage: `ui.notification.event.privacy.${notificationObject.event.privacy}` }), ' ', "-", ' ', notificationObject.event.location === SCEventLocationType.PERSON ? (_jsx(FormattedMessage, { id: `ui.notification.event.address.live.label`, defaultMessage: `ui.notification.event.address.live.label` })) : (_jsx(FormattedMessage, { id: `ui.notification.event.address.online.label`, defaultMessage: `ui.notification.event.address.online.label` }))] }))] }), footer: isToastTemplate ? (_jsxs(Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 }, { children: [_jsx(DateTimeAgo, { date: notificationObject.active_at }), _jsx(Typography, Object.assign({ color: "primary" }, { children: _jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, notificationObject.event) }, { children: _jsx(FormattedMessage, { id: "ui.notification.event.button.see", defaultMessage: "ui.notification.event.button.see" }) })) }))] }))) : (_jsx(DateTimeAgo, { date: notificationObject.active_at, className: classes.snippetTime })) }, rest)));
88
+ } }) })), _jsxs(Typography, Object.assign({ component: "p", variant: "body2" }, { children: [_jsx(FormattedMessage, { id: `ui.notification.event.privacy.${notificationObject.event.privacy}`, defaultMessage: `ui.notification.event.privacy.${notificationObject.event.privacy}` }), ' ', "-", ' ', notificationObject.event.location === SCEventLocationType.PERSON ? (_jsx(FormattedMessage, { id: `ui.notification.event.address.live.label`, defaultMessage: `ui.notification.event.address.live.label` })) : (_jsx(FormattedMessage, { id: `ui.notification.event.address.online.label`, defaultMessage: `ui.notification.event.address.online.label` }))] }))] }), footer: isToastTemplate ? (_jsxs(Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 }, { children: [_jsx(DateTimeAgo, { date: notificationObject.active_at }), _jsx(Typography, Object.assign({ color: "primary" }, { children: notificationObject.type === SCNotificationTypologyType.USER_REQUESTED_TO_JOIN_EVENT ? (_jsx(LoadingButton, Object.assign({ disabled: status && status !== SCEventSubscriptionStatusType.REQUESTED, loading: loading, color: 'primary', variant: "text", size: "small", onClick: () => acceptRequest(notificationObject.event) }, { children: disabled || (status && status !== SCEventSubscriptionStatusType.REQUESTED) ? (_jsx(FormattedMessage, { id: "ui.notification.event.button.accepted", defaultMessage: "ui.notification.event.button.accepted" })) : (_jsx(FormattedMessage, { id: "ui.notification.event.button.accept", defaultMessage: "ui.notification.event.button.accept" })) }))) : (_jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, notificationObject.event) }, { children: _jsx(FormattedMessage, { id: "ui.notification.event.button.see", defaultMessage: "ui.notification.event.button.see" }) }))) }))] }))) : (_jsx(DateTimeAgo, { date: notificationObject.active_at, className: classes.snippetTime })) }, rest)));
68
89
  }
69
90
  return (_jsxs(_Fragment, { children: [_jsx(Root, Object.assign({ id: id, className: classNames(classes.root, className, `${PREFIX}-${template}`), template: template, isNew: notificationObject.is_new, disableTypography: true, image: _jsx(Link, Object.assign({}, (!notificationObject.user.deleted && {
70
91
  to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, notificationObject.user)
@@ -76,5 +97,13 @@ export default function EventNotification(props) {
76
97
  icon: (...chunks) => _jsx(Icon, { children: chunks }),
77
98
  event: notificationObject.event.name,
78
99
  link: (...chunks) => _jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, notificationObject.event) }, { children: chunks }))
79
- } }), _jsx(EventItem, { event: notificationObject.event, actions: _jsx(_Fragment, {}), elevation: 0 })] }), actions: _jsxs(Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 }, { children: [_jsx(DateTimeAgo, { date: notificationObject.active_at, className: classes.activeAt }), _jsx(LoadingButton, Object.assign({ color: 'primary', variant: "outlined", size: "small", classes: { root: classes.seeButton }, component: Link, to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, notificationObject.event) }, { children: _jsx(FormattedMessage, { id: "ui.notification.event.button.see", defaultMessage: "ui.notification.event.button.see" }) }))] })) }, rest)), openAlert && _jsx(UserDeletedSnackBar, { open: openAlert, handleClose: () => setOpenAlert(false) })] }));
100
+ } }), _jsx(EventItem, { event: notificationObject.event, actions: _jsx(_Fragment, {}), elevation: 0 })] }), actions: _jsxs(Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 }, { children: [_jsx(DateTimeAgo, { date: notificationObject.active_at, className: classes.activeAt }), _jsx(LoadingButton, Object.assign({ disabled: disabled ||
101
+ (notificationObject.type === SCNotificationTypologyType.USER_REQUESTED_TO_JOIN_EVENT &&
102
+ status &&
103
+ status !== SCEventSubscriptionStatusType.REQUESTED), loading: loading, color: 'primary', variant: "outlined", size: "small", classes: { root: classes.seeButton } }, (notificationObject.type !== SCNotificationTypologyType.USER_REQUESTED_TO_JOIN_EVENT && {
104
+ component: Link,
105
+ to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, notificationObject.event)
106
+ }), { onClick: notificationObject.type === SCNotificationTypologyType.USER_REQUESTED_TO_JOIN_EVENT
107
+ ? () => acceptRequest(notificationObject.event)
108
+ : null }, { children: notificationObject.type === SCNotificationTypologyType.USER_REQUESTED_TO_JOIN_EVENT ? (_jsx(_Fragment, { children: status && status !== SCEventSubscriptionStatusType.REQUESTED ? (_jsx(FormattedMessage, { id: "ui.notification.event.button.accepted", defaultMessage: "ui.notification.event.button.accepted" })) : (_jsx(FormattedMessage, { id: "ui.notification.event.button.accept", defaultMessage: "ui.notification.event.button.accept" })) })) : (_jsx(FormattedMessage, { id: "ui.notification.event.button.see", defaultMessage: "ui.notification.event.button.see" })) }))] })) }, rest)), openAlert && _jsx(UserDeletedSnackBar, { open: openAlert, handleClose: () => setOpenAlert(false) })] }));
80
109
  }