@selfcommunity/react-ui 0.10.5-payments.190 → 0.10.5-payments.192

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 (28) hide show
  1. package/lib/cjs/components/AcceptRequestUserEventButton/AcceptRequestUserEventButton.js +20 -2
  2. package/lib/cjs/components/AcceptRequestUserGroupButton/AcceptRequestUserGroupButton.d.ts +61 -0
  3. package/lib/cjs/components/AcceptRequestUserGroupButton/AcceptRequestUserGroupButton.js +106 -0
  4. package/lib/cjs/components/AcceptRequestUserGroupButton/index.d.ts +3 -0
  5. package/lib/cjs/components/AcceptRequestUserGroupButton/index.js +5 -0
  6. package/lib/cjs/components/CourseJoinButton/CourseJoinButton.d.ts +1 -6
  7. package/lib/cjs/components/CourseJoinButton/CourseJoinButton.js +9 -7
  8. package/lib/cjs/components/Group/Group.d.ts +1 -1
  9. package/lib/cjs/components/Group/Group.js +2 -2
  10. package/lib/cjs/components/GroupRequestsWidget/GroupRequestsWidget.d.ts +7 -2
  11. package/lib/cjs/components/GroupRequestsWidget/GroupRequestsWidget.js +6 -4
  12. package/lib/cjs/components/GroupSubscribeButton/GroupSubscribeButton.d.ts +3 -8
  13. package/lib/cjs/components/GroupSubscribeButton/GroupSubscribeButton.js +9 -8
  14. package/lib/esm/components/AcceptRequestUserEventButton/AcceptRequestUserEventButton.js +20 -2
  15. package/lib/esm/components/AcceptRequestUserGroupButton/AcceptRequestUserGroupButton.d.ts +61 -0
  16. package/lib/esm/components/AcceptRequestUserGroupButton/AcceptRequestUserGroupButton.js +103 -0
  17. package/lib/esm/components/AcceptRequestUserGroupButton/index.d.ts +3 -0
  18. package/lib/esm/components/AcceptRequestUserGroupButton/index.js +2 -0
  19. package/lib/esm/components/CourseJoinButton/CourseJoinButton.d.ts +1 -6
  20. package/lib/esm/components/CourseJoinButton/CourseJoinButton.js +9 -7
  21. package/lib/esm/components/Group/Group.d.ts +1 -1
  22. package/lib/esm/components/Group/Group.js +2 -2
  23. package/lib/esm/components/GroupRequestsWidget/GroupRequestsWidget.d.ts +7 -2
  24. package/lib/esm/components/GroupRequestsWidget/GroupRequestsWidget.js +6 -4
  25. package/lib/esm/components/GroupSubscribeButton/GroupSubscribeButton.d.ts +3 -8
  26. package/lib/esm/components/GroupSubscribeButton/GroupSubscribeButton.js +9 -8
  27. package/lib/umd/react-ui.js +1 -1
  28. package/package.json +8 -8
package/lib/cjs/components/AcceptRequestUserEventButton/AcceptRequestUserEventButton.js CHANGED
@@ -13,6 +13,7 @@ const react_1 = require("react");
13
13
  const react_intl_1 = require("react-intl");
14
14
  const Errors_1 = require("../../constants/Errors");
15
15
  const ConfirmDialog_1 = tslib_1.__importDefault(require("../../shared/ConfirmDialog/ConfirmDialog"));
16
+ const notistack_1 = require("notistack");
16
17
  const PREFIX = 'SCAcceptRequestUserEventButton';
17
18
  const classes = {
18
19
  root: `${PREFIX}-root`
@@ -57,16 +58,33 @@ function AcceptRequestUserEventButton(inProps) {
57
58
  // HOOKS
58
59
  const { scEvent } = (0, react_core_1.useSCFetchEvent)({ id: eventId, event });
59
60
  const { scUser } = (0, react_core_1.useSCFetchUser)({ id: userId, user });
61
+ const { enqueueSnackbar } = (0, notistack_1.useSnackbar)();
60
62
  const handleConfirmAction = (0, react_1.useCallback)(() => {
61
63
  setLoading(true);
62
64
  api_services_1.EventService.inviteOrAcceptEventRequest(scEvent.id, { users: [scUser.id] })
63
65
  .then(() => {
64
- handleConfirm === null || handleConfirm === void 0 ? void 0 : handleConfirm(scUser.id);
66
+ if (handleConfirm) {
67
+ handleConfirm(scUser.id);
68
+ }
69
+ else {
70
+ enqueueSnackbar((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.acceptRequestUserEventButton.snackbar.success", defaultMessage: "ui.acceptRequestUserEventButton.snackbar.success" }), {
71
+ variant: 'error',
72
+ autoHideDuration: 3000
73
+ });
74
+ }
65
75
  setLoading(false);
66
76
  setOpenDialog(false);
67
77
  })
68
78
  .catch((error) => {
69
- handleConfirm === null || handleConfirm === void 0 ? void 0 : handleConfirm(null);
79
+ if (handleConfirm) {
80
+ handleConfirm(null);
81
+ }
82
+ else {
83
+ enqueueSnackbar((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.common.error.action", defaultMessage: "ui.common.error.action" }), {
84
+ variant: 'error',
85
+ autoHideDuration: 3000
86
+ });
87
+ }
70
88
  utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
71
89
  });
72
90
  }, [scEvent, scUser]);
package/lib/cjs/components/AcceptRequestUserGroupButton/AcceptRequestUserGroupButton.d.ts ADDED
@@ -0,0 +1,61 @@
1
+ import { SCGroupType, SCUserType } from '@selfcommunity/types';
2
+ import { HTMLAttributes } from 'react';
3
+ export interface AcceptRequestUserGroupButtonProps {
4
+ /**
5
+ * Overrides or extends the styles applied to the component.
6
+ * @default null
7
+ */
8
+ className?: HTMLAttributes<HTMLButtonElement>['className'];
9
+ /**
10
+ * Id of the group
11
+ * @default null
12
+ */
13
+ groupId?: number;
14
+ /**
15
+ * Group
16
+ * @default null
17
+ */
18
+ group?: SCGroupType;
19
+ /**
20
+ * Id of the user
21
+ * @default null
22
+ */
23
+ userId?: number;
24
+ /**
25
+ * Group
26
+ * @default null
27
+ */
28
+ user?: SCUserType;
29
+ /**
30
+ * Callback when user accept request
31
+ * @default null
32
+ */
33
+ handleConfirm?: ((id: number | null) => void) | null;
34
+ /**
35
+ * Others properties
36
+ */
37
+ [p: string]: any;
38
+ }
39
+ /**
40
+ * > API documentation for the Community-JS Accept Request User Group Button component. Learn about the available props and the CSS API.
41
+
42
+ #### Import
43
+
44
+ ```jsx
45
+ import {AcceptRequestUserGroupButton} from '@selfcommunity/react-ui';
46
+ ```
47
+
48
+ #### Component Name
49
+
50
+ The name `SCAcceptRequestUserEventButton` can be used when providing style overrides in the theme.
51
+
52
+
53
+ #### CSS
54
+
55
+ |Rule Name|Global class|Description|
56
+ |---|---|---|
57
+ |root|.SCAcceptRequestUserGroupButton-root|Styles applied to the root element.|
58
+
59
+ * @param inProps
60
+ */
61
+ export default function AcceptRequestUserGroupButton(inProps: AcceptRequestUserGroupButtonProps): JSX.Element;
package/lib/cjs/components/AcceptRequestUserGroupButton/AcceptRequestUserGroupButton.js ADDED
@@ -0,0 +1,106 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ const tslib_1 = require("tslib");
4
+ const jsx_runtime_1 = require("react/jsx-runtime");
5
+ const lab_1 = require("@mui/lab");
6
+ const material_1 = require("@mui/material");
7
+ const system_1 = require("@mui/system");
8
+ const api_services_1 = require("@selfcommunity/api-services");
9
+ const react_core_1 = require("@selfcommunity/react-core");
10
+ const utils_1 = require("@selfcommunity/utils");
11
+ const classnames_1 = tslib_1.__importDefault(require("classnames"));
12
+ const react_1 = require("react");
13
+ const react_intl_1 = require("react-intl");
14
+ const Errors_1 = require("../../constants/Errors");
15
+ const ConfirmDialog_1 = tslib_1.__importDefault(require("../../shared/ConfirmDialog/ConfirmDialog"));
16
+ const notistack_1 = require("notistack");
17
+ const PubSub_1 = require("../../constants/PubSub");
18
+ const pubsub_js_1 = tslib_1.__importDefault(require("pubsub-js"));
19
+ const PREFIX = 'SCAcceptRequestUserEventButton';
20
+ const classes = {
21
+ root: `${PREFIX}-root`
22
+ };
23
+ const AcceptButton = (0, material_1.styled)(lab_1.LoadingButton, {
24
+ name: PREFIX,
25
+ slot: 'Root',
26
+ overridesResolver: (_props, styles) => styles.root
27
+ })(() => ({}));
28
+ /**
29
+ * > API documentation for the Community-JS Accept Request User Group Button component. Learn about the available props and the CSS API.
30
+
31
+ #### Import
32
+
33
+ ```jsx
34
+ import {AcceptRequestUserGroupButton} from '@selfcommunity/react-ui';
35
+ ```
36
+
37
+ #### Component Name
38
+
39
+ The name `SCAcceptRequestUserEventButton` can be used when providing style overrides in the theme.
40
+
41
+
42
+ #### CSS
43
+
44
+ |Rule Name|Global class|Description|
45
+ |---|---|---|
46
+ |root|.SCAcceptRequestUserGroupButton-root|Styles applied to the root element.|
47
+
48
+ * @param inProps
49
+ */
50
+ function AcceptRequestUserGroupButton(inProps) {
51
+ // PROPS
52
+ const props = (0, system_1.useThemeProps)({
53
+ props: inProps,
54
+ name: PREFIX
55
+ });
56
+ const { className, groupId, group, userId, user, handleConfirm = null } = props, rest = tslib_1.__rest(props, ["className", "groupId", "group", "userId", "user", "handleConfirm"]);
57
+ // STATE
58
+ const [loading, setLoading] = (0, react_1.useState)(false);
59
+ const [openDialog, setOpenDialog] = (0, react_1.useState)(false);
60
+ // HOOKS
61
+ const { scGroup } = (0, react_core_1.useSCFetchGroup)({ id: groupId, group });
62
+ const { scUser } = (0, react_core_1.useSCFetchUser)({ id: userId, user });
63
+ const { enqueueSnackbar } = (0, notistack_1.useSnackbar)();
64
+ /**
65
+ * Notify UI when a member is added to a group
66
+ * @param group
67
+ * @param user
68
+ */
69
+ function notifyChanges(group, user) {
70
+ if (group && user) {
71
+ pubsub_js_1.default.publish(`${PubSub_1.SCTopicType.GROUP}.${PubSub_1.SCGroupEventType.ADD_MEMBER}`, { group, user });
72
+ }
73
+ }
74
+ const handleConfirmAction = (0, react_1.useCallback)(() => {
75
+ setLoading(true);
76
+ api_services_1.GroupService.inviteOrAcceptGroupRequest(scGroup.id, { users: [scUser.id] })
77
+ .then(() => {
78
+ if (handleConfirm) {
79
+ handleConfirm(scUser.id);
80
+ }
81
+ else {
82
+ enqueueSnackbar((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.acceptRequestUserGroupButton.snackbar.success", defaultMessage: "ui.acceptRequestUserGroupButton.snackbar.success" }), {
83
+ variant: 'error',
84
+ autoHideDuration: 3000
85
+ });
86
+ }
87
+ notifyChanges(scGroup, scUser);
88
+ setLoading(false);
89
+ setOpenDialog(false);
90
+ })
91
+ .catch((error) => {
92
+ if (handleConfirm) {
93
+ handleConfirm(null);
94
+ }
95
+ else {
96
+ enqueueSnackbar((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.common.error.action", defaultMessage: "ui.common.error.action" }), {
97
+ variant: 'error',
98
+ autoHideDuration: 3000
99
+ });
100
+ }
101
+ utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
102
+ });
103
+ }, [scGroup, scUser]);
104
+ return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(AcceptButton, Object.assign({ size: "small", variant: "outlined", onClick: () => setOpenDialog(true), loading: loading, className: (0, classnames_1.default)(classes.root, className) }, rest, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.acceptRequestUserGroupButton.accept", id: "ui.acceptRequestUserGroupButton.accept" }) })), openDialog && ((0, jsx_runtime_1.jsx)(ConfirmDialog_1.default, { open: openDialog, title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.acceptRequestUserGroupButton.dialog.title", defaultMessage: "ui.acceptRequestUserGroupButton.dialog.title" }), content: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.acceptRequestUserGroupButton.dialog.msg", defaultMessage: "ui.acceptRequestUserGroupButton.dialog.msg" }), btnConfirm: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.acceptRequestUserGroupButton.dialog.confirm", defaultMessage: "ui.acceptRequestUserGroupButton.dialog.confirm" }), isUpdating: loading, onConfirm: handleConfirmAction, onClose: () => setOpenDialog(false) }))] }));
105
+ }
106
+ exports.default = AcceptRequestUserGroupButton;
package/lib/cjs/components/AcceptRequestUserGroupButton/index.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ import AcceptRequestUserGroupButton, { AcceptRequestUserGroupButtonProps } from './AcceptRequestUserGroupButton';
2
+ export default AcceptRequestUserGroupButton;
3
+ export { AcceptRequestUserGroupButtonProps };
package/lib/cjs/components/AcceptRequestUserGroupButton/index.js ADDED
@@ -0,0 +1,5 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ const tslib_1 = require("tslib");
4
+ const AcceptRequestUserGroupButton_1 = tslib_1.__importDefault(require("./AcceptRequestUserGroupButton"));
5
+ exports.default = AcceptRequestUserGroupButton_1.default;
package/lib/cjs/components/CourseJoinButton/CourseJoinButton.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { SCCourseType, SCUserType } from '@selfcommunity/types';
1
+ import { SCCourseType } from '@selfcommunity/types';
2
2
  export interface CourseJoinButtonProps {
3
3
  /**
4
4
  * Overrides or extends the styles applied to the component.
@@ -15,11 +15,6 @@ export interface CourseJoinButtonProps {
15
15
  * @default null
16
16
  */
17
17
  courseId?: number;
18
- /**
19
- * The user to be accepted into the course
20
- * @default null
21
- */
22
- user?: SCUserType;
23
18
  /**
24
19
  * onJoin callback
25
20
  * @param user
package/lib/cjs/components/CourseJoinButton/CourseJoinButton.js CHANGED
@@ -51,7 +51,7 @@ function CourseJoinButton(inProps) {
51
51
  props: inProps,
52
52
  name: PREFIX
53
53
  });
54
- const { className, courseId, course, user, onJoin } = props, rest = tslib_1.__rest(props, ["className", "courseId", "course", "user", "onJoin"]);
54
+ const { className, courseId, course, onJoin } = props, rest = tslib_1.__rest(props, ["className", "courseId", "course", "onJoin"]);
55
55
  // STATE
56
56
  const [status, setStatus] = (0, react_1.useState)(null);
57
57
  // CONTEXT
@@ -85,14 +85,16 @@ function CourseJoinButton(inProps) {
85
85
  pubsub_js_1.default.publish(`${PubSub_1.SCTopicType.GROUP}.${PubSub_1.SCCourseEventType.ADD_MEMBER}`, { course, user });
86
86
  }
87
87
  }
88
- const join = (user) => {
88
+ const join = () => {
89
89
  scCoursesManager
90
- .join(scCourse, user === null || user === void 0 ? void 0 : user.id)
90
+ .join(scCourse)
91
91
  .then(() => {
92
92
  const _status = scCourse.privacy === types_1.SCCoursePrivacyType.PRIVATE && scCourse.join_status !== types_1.SCCourseJoinStatusType.INVITED
93
93
  ? types_1.SCCourseJoinStatusType.REQUESTED
94
94
  : types_1.SCCourseJoinStatusType.JOINED;
95
- notifyChanges(scCourse, user);
95
+ if (_status === types_1.SCCourseJoinStatusType.JOINED) {
96
+ notifyChanges(scCourse, scUserContext.user);
97
+ }
96
98
  onJoin && onJoin(scCourse, _status);
97
99
  })
98
100
  .catch((e) => {
@@ -114,7 +116,7 @@ function CourseJoinButton(inProps) {
114
116
  scContext.settings.handleAnonymousAction();
115
117
  }
116
118
  else {
117
- status === types_1.SCCourseJoinStatusType.JOINED && !(user === null || user === void 0 ? void 0 : user.id) ? leave() : (user === null || user === void 0 ? void 0 : user.id) ? join(user) : join();
119
+ status === types_1.SCCourseJoinStatusType.JOINED ? leave() : join();
118
120
  }
119
121
  };
120
122
  /**
@@ -140,9 +142,9 @@ function CourseJoinButton(inProps) {
140
142
  }
141
143
  return _status;
142
144
  }, [status, scCourse]);
143
- if (!scCourse || (isCourseAdmin && (user === null || user === void 0 ? void 0 : user.id) === scUserContext.user.id) || (isCourseAdmin && !(user === null || user === void 0 ? void 0 : user.id))) {
145
+ if (!scCourse || isCourseAdmin) {
144
146
  return null;
145
147
  }
146
- return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ size: "small", variant: "outlined", onClick: handleClick, loading: scUserContext.user ? scCoursesManager.isLoading(scCourse) : null, disabled: status === types_1.SCCourseJoinStatusType.REQUESTED, className: (0, classnames_1.default)(classes.root, className) }, rest, { children: isCourseAdmin ? (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.courseJoinButton.accept", id: "ui.courseJoinButton.accept" }) : getStatus })));
148
+ return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ size: "small", variant: "outlined", onClick: handleClick, loading: scUserContext.user ? scCoursesManager.isLoading(scCourse) : null, disabled: status === types_1.SCCourseJoinStatusType.REQUESTED, className: (0, classnames_1.default)(classes.root, className) }, rest, { children: getStatus })));
147
149
  }
148
150
  exports.default = CourseJoinButton;
package/lib/cjs/components/Group/Group.d.ts CHANGED
@@ -18,7 +18,7 @@ export interface GroupProps extends WidgetProps {
18
18
  * Props to spread to group subscribe/unsubscribe button
19
19
  * @default {}
20
20
  */
21
- groupSubscribeButtonProps?: GroupSubscribeButtonProps;
21
+ GroupSubscribeButtonComponentProps?: GroupSubscribeButtonProps;
22
22
  /**
23
23
  * Badge content to show as group avatar badge if show reaction is true.
24
24
  */
package/lib/cjs/components/Group/Group.js CHANGED
@@ -71,7 +71,7 @@ function Group(inProps) {
71
71
  props: inProps,
72
72
  name: constants_1.PREFIX
73
73
  });
74
- const { groupId = null, group = null, className = null, elevation, hideActions = false, actionRedirect = false, groupSubscribeButtonProps = {}, cacheStrategy } = props, rest = tslib_1.__rest(props, ["groupId", "group", "className", "elevation", "hideActions", "actionRedirect", "groupSubscribeButtonProps", "cacheStrategy"]);
74
+ const { groupId = null, group = null, className = null, elevation, hideActions = false, actionRedirect = false, GroupSubscribeButtonComponentProps = {}, cacheStrategy } = props, rest = tslib_1.__rest(props, ["groupId", "group", "className", "elevation", "hideActions", "actionRedirect", "GroupSubscribeButtonComponentProps", "cacheStrategy"]);
75
75
  // STATE
76
76
  const { scGroup } = (0, react_core_1.useSCFetchGroup)(Object.assign({ id: groupId, group }, (cacheStrategy && { cacheStrategy })));
77
77
  // CONTEXT
@@ -89,7 +89,7 @@ function Group(inProps) {
89
89
  * @return {JSX.Element}
90
90
  */
91
91
  function renderAuthenticatedActions() {
92
- return ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.actions, direction: "row", alignItems: "center", justifyContent: "center", spacing: 2 }, { children: [isGroupAdmin && (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "face" }), actionRedirect ? ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: "outlined", component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.GROUP_ROUTE_NAME, scGroup) }, { children: scGroup.subscription_status === types_1.SCGroupSubscriptionStatusType.SUBSCRIBED ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.group.status.enter", id: "ui.group.status.enter" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.group.status.discover", id: "ui.group.status.discover" })) }))) : ((0, jsx_runtime_1.jsx)(GroupSubscribeButton_1.default, Object.assign({ group: group, groupId: groupId }, groupSubscribeButtonProps)))] })));
92
+ return ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.actions, direction: "row", alignItems: "center", justifyContent: "center", spacing: 2 }, { children: [isGroupAdmin && (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "face" }), actionRedirect ? ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: "outlined", component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.GROUP_ROUTE_NAME, scGroup) }, { children: scGroup.subscription_status === types_1.SCGroupSubscriptionStatusType.SUBSCRIBED ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.group.status.enter", id: "ui.group.status.enter" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.group.status.discover", id: "ui.group.status.discover" })) }))) : ((0, jsx_runtime_1.jsx)(GroupSubscribeButton_1.default, Object.assign({ group: group, groupId: groupId }, GroupSubscribeButtonComponentProps)))] })));
93
93
  }
94
94
  /**
95
95
  * Renders group object
package/lib/cjs/components/GroupRequestsWidget/GroupRequestsWidget.d.ts CHANGED
@@ -4,7 +4,7 @@ import { CacheStrategies } from '@selfcommunity/utils';
4
4
  import { BaseDialogProps } from '../../shared/BaseDialog';
5
5
  import { VirtualScrollerItemProps } from '../../types/virtualScroller';
6
6
  import { UserProps } from '../User';
7
- import { GroupSubscribeButtonProps } from '../GroupSubscribeButton';
7
+ import { AcceptRequestUserGroupButtonProps } from '../AcceptRequestUserGroupButton';
8
8
  export interface GroupRequestsWidgetProps extends VirtualScrollerItemProps, WidgetProps {
9
9
  /**
10
10
  * Group Object
@@ -16,6 +16,11 @@ export interface GroupRequestsWidgetProps extends VirtualScrollerItemProps, Widg
16
16
  * @default null
17
17
  */
18
18
  groupId?: number | string;
19
+ /**
20
+ * Hides this component
21
+ * @default true
22
+ */
23
+ autoHide?: boolean;
19
24
  /**
20
25
  * Limit the number of users to show
21
26
  * @default false
@@ -40,7 +45,7 @@ export interface GroupRequestsWidgetProps extends VirtualScrollerItemProps, Widg
40
45
  * Props to spread to group subscribe button component
41
46
  * @default {}
42
47
  */
43
- GroupSubscribeButtonProps?: GroupSubscribeButtonProps;
48
+ AcceptRequestUserGroupButtonComponentProps?: AcceptRequestUserGroupButtonProps;
44
49
  /**
45
50
  * onSubscribeAction callback
46
51
  * @param user
package/lib/cjs/components/GroupRequestsWidget/GroupRequestsWidget.js CHANGED
@@ -19,7 +19,7 @@ const system_1 = require("@mui/system");
19
19
  const HiddenPlaceholder_1 = tslib_1.__importDefault(require("../../shared/HiddenPlaceholder"));
20
20
  const constants_1 = require("./constants");
21
21
  const User_1 = tslib_1.__importStar(require("../User"));
22
- const GroupSubscribeButton_1 = tslib_1.__importDefault(require("../GroupSubscribeButton"));
22
+ const AcceptRequestUserGroupButton_1 = tslib_1.__importDefault(require("../AcceptRequestUserGroupButton"));
23
23
  const classes = {
24
24
  root: `${constants_1.PREFIX}-root`,
25
25
  title: `${constants_1.PREFIX}-title`,
@@ -73,7 +73,7 @@ function GroupRequestsWidget(inProps) {
73
73
  props: inProps,
74
74
  name: constants_1.PREFIX
75
75
  });
76
- const { groupId, group, limit = 5, className, cacheStrategy = utils_1.CacheStrategies.NETWORK_ONLY, onHeightChange, onStateChange, UserProps = {}, DialogProps = {}, GroupSubscribeButtonProps = {}, onSubscribeActon } = props, rest = tslib_1.__rest(props, ["groupId", "group", "limit", "className", "cacheStrategy", "onHeightChange", "onStateChange", "UserProps", "DialogProps", "GroupSubscribeButtonProps", "onSubscribeActon"]);
76
+ const { groupId, group, autoHide = true, limit = 5, className, cacheStrategy = utils_1.CacheStrategies.NETWORK_ONLY, onHeightChange, onStateChange, UserProps = {}, DialogProps = {}, AcceptRequestUserGroupButtonComponentProps = {}, onSubscribeActon } = props, rest = tslib_1.__rest(props, ["groupId", "group", "autoHide", "limit", "className", "cacheStrategy", "onHeightChange", "onStateChange", "UserProps", "DialogProps", "AcceptRequestUserGroupButtonComponentProps", "onSubscribeActon"]);
77
77
  // STATE
78
78
  const [state, dispatch] = (0, react_1.useReducer)(widget_1.dataWidgetReducer, {
79
79
  isLoadingNext: false,
@@ -99,6 +99,7 @@ function GroupRequestsWidget(inProps) {
99
99
  * Fetch data only if the component is not initialized and it is not loading data
100
100
  */
101
101
  const _initComponent = (0, react_1.useMemo)(() => () => {
102
+ console.log('initComponent');
102
103
  if (!state.initialized && !state.isLoadingNext) {
103
104
  dispatch({ type: widget_1.actionWidgetTypes.LOADING_NEXT });
104
105
  api_services_1.GroupService.getGroupWaitingApprovalSubscribers(scGroup.id, { limit })
@@ -115,6 +116,7 @@ function GroupRequestsWidget(inProps) {
115
116
  (0, react_1.useEffect)(() => {
116
117
  var _a;
117
118
  let _t;
119
+ console.log(scGroup, scUserContext.user);
118
120
  if ((contentAvailability || (!contentAvailability && ((_a = scUserContext.user) === null || _a === void 0 ? void 0 : _a.id))) && scGroup && scUserContext.user !== undefined) {
119
121
  _t = setTimeout(_initComponent);
120
122
  return () => {
@@ -179,13 +181,13 @@ function GroupRequestsWidget(inProps) {
179
181
  onSubscribeActon && onSubscribeActon(user);
180
182
  }, [dispatch, state.count, state.results, onSubscribeActon]);
181
183
  // RENDER
182
- if ((!state.count && state.initialized) || (!contentAvailability && !scUserContext.user) || !scGroup || !isGroupAdmin) {
184
+ if ((autoHide && !state.count && state.initialized) || (!contentAvailability && !scUserContext.user) || !scGroup || !isGroupAdmin) {
183
185
  return (0, jsx_runtime_1.jsx)(HiddenPlaceholder_1.default, {});
184
186
  }
185
187
  if (!state.initialized) {
186
188
  return (0, jsx_runtime_1.jsx)(Skeleton_1.default, {});
187
189
  }
188
- const content = ((0, jsx_runtime_1.jsxs)(material_1.CardContent, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.title, variant: "h5" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupRequestsWidget.title", defaultMessage: "ui.groupRequestsWidget.title" }) })), (0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.List, { children: state.results.slice(0, state.visibleItems).map((user) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(User_1.default, { elevation: 0, actions: (0, jsx_runtime_1.jsx)(GroupSubscribeButton_1.default, Object.assign({ group: scGroup, groupId: scGroup === null || scGroup === void 0 ? void 0 : scGroup.id, user: user, onSubscribe: () => handleSubscribeAction(user) }, GroupSubscribeButtonProps)), user: user, userId: user.id }) }, user.id))) }), state.count > state.visibleItems && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ className: classes.showMore, onClick: handleToggleDialogOpen }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupRequestsWidget.button.showMore", defaultMessage: "ui.groupRequestsWidget.button.showMore" }) })))] }), openDialog && ((0, jsx_runtime_1.jsx)(DialogRoot, Object.assign({ className: classes.dialogRoot, title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.groupRequestsWidget.dialogTitle", id: "ui.groupRequestsWidget.dialogTitle", values: { total: scGroup.subscribers_counter } }), onClose: handleToggleDialogOpen, open: openDialog }, DialogProps, { children: (0, jsx_runtime_1.jsx)(InfiniteScroll_1.default, Object.assign({ dataLength: state.results.length, next: handleNext, hasMoreNext: Boolean(state.next), loaderNext: (0, jsx_runtime_1.jsx)(User_1.UserSkeleton, Object.assign({ elevation: 0 }, UserProps)), height: isMobile ? '100%' : 400, endMessage: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.endMessage }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupRequestsWidget.noMoreResults", defaultMessage: "ui.groupRequestsWidget.noMoreResults" }) })) }, { children: (0, jsx_runtime_1.jsx)(material_1.List, { children: state.results.map((user) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(User_1.default, { elevation: 0, actions: (0, jsx_runtime_1.jsx)(GroupSubscribeButton_1.default, Object.assign({ group: scGroup, groupId: scGroup === null || scGroup === void 0 ? void 0 : scGroup.id, user: user, onSubscribe: () => handleSubscribeAction(user) }, GroupSubscribeButtonProps)), user: user, userId: user.id }) }, user.id))) }) })) })))] }));
190
+ const content = ((0, jsx_runtime_1.jsxs)(material_1.CardContent, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.title, variant: "h5" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupRequestsWidget.title", defaultMessage: "ui.groupRequestsWidget.title" }) })), state.results.length === 0 && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", mt: 2 }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupRequestsWidget.noRequests", defaultMessage: "ui.groupRequestsWidget.noRequests" }) }))), (0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.List, { children: state.results.slice(0, state.visibleItems).map((user) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(User_1.default, { elevation: 0, actions: (0, jsx_runtime_1.jsx)(AcceptRequestUserGroupButton_1.default, Object.assign({ group: scGroup, groupId: scGroup === null || scGroup === void 0 ? void 0 : scGroup.id, user: user, handleConfirm: () => handleSubscribeAction(user) }, AcceptRequestUserGroupButtonComponentProps)), user: user, userId: user.id }) }, user.id))) }), state.count > state.visibleItems && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ className: classes.showMore, onClick: handleToggleDialogOpen }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupRequestsWidget.button.showMore", defaultMessage: "ui.groupRequestsWidget.button.showMore" }) })))] }), openDialog && ((0, jsx_runtime_1.jsx)(DialogRoot, Object.assign({ className: classes.dialogRoot, title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.groupRequestsWidget.dialogTitle", id: "ui.groupRequestsWidget.dialogTitle", values: { total: scGroup.subscribers_counter } }), onClose: handleToggleDialogOpen, open: openDialog }, DialogProps, { children: (0, jsx_runtime_1.jsx)(InfiniteScroll_1.default, Object.assign({ dataLength: state.results.length, next: handleNext, hasMoreNext: Boolean(state.next), loaderNext: (0, jsx_runtime_1.jsx)(User_1.UserSkeleton, Object.assign({ elevation: 0 }, UserProps)), height: isMobile ? '100%' : 400, endMessage: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.endMessage }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupRequestsWidget.noMoreResults", defaultMessage: "ui.groupRequestsWidget.noMoreResults" }) })) }, { children: (0, jsx_runtime_1.jsx)(material_1.List, { children: state.results.map((user) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(User_1.default, { elevation: 0, actions: (0, jsx_runtime_1.jsx)(AcceptRequestUserGroupButton_1.default, Object.assign({ group: scGroup, groupId: scGroup === null || scGroup === void 0 ? void 0 : scGroup.id, user: user, handleConfirm: () => handleSubscribeAction(user) }, AcceptRequestUserGroupButtonComponentProps)), user: user, userId: user.id }) }, user.id))) }) })) })))] }));
189
191
  return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: content })));
190
192
  }
191
193
  exports.default = GroupRequestsWidget;
package/lib/cjs/components/GroupSubscribeButton/GroupSubscribeButton.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { SCGroupType, SCUserType } from '@selfcommunity/types';
1
+ import { SCGroupType } from '@selfcommunity/types';
2
2
  export interface GroupSubscribeButtonProps {
3
3
  /**
4
4
  * Overrides or extends the styles applied to the component.
@@ -15,15 +15,10 @@ export interface GroupSubscribeButtonProps {
15
15
  * @default null
16
16
  */
17
17
  groupId?: number;
18
- /**
19
- * The user to be accepted into the group
20
- * @default null
21
- */
22
- user?: SCUserType;
23
18
  /**
24
19
  * onSubscribe callback
25
- * @param user
26
- * @param joined
20
+ * @param group
21
+ * @param status
27
22
  */
28
23
  onSubscribe?: (group: SCGroupType, status: string | null) => any;
29
24
  /**
package/lib/cjs/components/GroupSubscribeButton/GroupSubscribeButton.js CHANGED
@@ -59,7 +59,7 @@ function GroupSubscribeButton(inProps) {
59
59
  props: inProps,
60
60
  name: PREFIX
61
61
  });
62
- const { className, groupId, group, user, onSubscribe } = props, rest = tslib_1.__rest(props, ["className", "groupId", "group", "user", "onSubscribe"]);
62
+ const { className, groupId, group, onSubscribe } = props, rest = tslib_1.__rest(props, ["className", "groupId", "group", "onSubscribe"]);
63
63
  // STATE
64
64
  const [status, setStatus] = (0, react_1.useState)(null);
65
65
  // CONTEXT
@@ -89,7 +89,6 @@ function GroupSubscribeButton(inProps) {
89
89
  * Define if the buyButton is visible
90
90
  */
91
91
  const showBuyButton = !isGroupAdmin &&
92
- !user &&
93
92
  isPaymentsEnabled &&
94
93
  ((_b = scGroup.paywalls) === null || _b === void 0 ? void 0 : _b.length) > 0 &&
95
94
  (scGroup.privacy === types_1.SCGroupPrivacyType.PUBLIC ||
@@ -104,14 +103,16 @@ function GroupSubscribeButton(inProps) {
104
103
  pubsub_js_1.default.publish(`${PubSub_1.SCTopicType.GROUP}.${PubSub_1.SCGroupEventType.ADD_MEMBER}`, { group, user });
105
104
  }
106
105
  }
107
- const subscribe = (user) => {
106
+ const subscribe = () => {
108
107
  scGroupsManager
109
- .subscribe(scGroup, user === null || user === void 0 ? void 0 : user.id)
108
+ .subscribe(scGroup)
110
109
  .then(() => {
111
110
  const _status = scGroup.privacy === types_1.SCGroupPrivacyType.PRIVATE && scGroup.subscription_status !== types_1.SCGroupSubscriptionStatusType.INVITED
112
111
  ? types_1.SCGroupSubscriptionStatusType.REQUESTED
113
112
  : types_1.SCGroupSubscriptionStatusType.SUBSCRIBED;
114
- notifyChanges(scGroup, user);
113
+ if (_status === types_1.SCGroupSubscriptionStatusType.SUBSCRIBED) {
114
+ notifyChanges(scGroup, scUserContext.user);
115
+ }
115
116
  onSubscribe && onSubscribe(scGroup, _status);
116
117
  })
117
118
  .catch((e) => {
@@ -133,7 +134,7 @@ function GroupSubscribeButton(inProps) {
133
134
  scContext.settings.handleAnonymousAction();
134
135
  }
135
136
  else {
136
- status === types_1.SCGroupSubscriptionStatusType.SUBSCRIBED && !(user === null || user === void 0 ? void 0 : user.id) ? unsubscribe() : (user === null || user === void 0 ? void 0 : user.id) ? subscribe(user) : subscribe();
137
+ status === types_1.SCGroupSubscriptionStatusType.SUBSCRIBED ? unsubscribe() : subscribe();
137
138
  }
138
139
  };
139
140
  /**
@@ -159,12 +160,12 @@ function GroupSubscribeButton(inProps) {
159
160
  }
160
161
  return _status;
161
162
  }, [status, scGroup]);
162
- if (!scGroup || (isGroupAdmin && (user === null || user === void 0 ? void 0 : user.id) === scUserContext.user.id) || (isGroupAdmin && !(user === null || user === void 0 ? void 0 : user.id))) {
163
+ if (!scGroup || isGroupAdmin) {
163
164
  return null;
164
165
  }
165
166
  if (showBuyButton) {
166
167
  return (0, jsx_runtime_1.jsx)(BuyButtonRoot, { contentType: types_1.SCContentType.GROUP, content: scGroup });
167
168
  }
168
- return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ size: "small", variant: "outlined", onClick: handleSubscribeAction, loading: scUserContext.user ? scGroupsManager.isLoading(scGroup) : null, disabled: status === types_1.SCGroupSubscriptionStatusType.REQUESTED, className: (0, classnames_1.default)(classes.root, className) }, rest, { children: isGroupAdmin ? (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.groupSubscribeButton.accept", id: "ui.groupSubscribeButton.accept" }) : getStatus })));
169
+ return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ size: "small", variant: "outlined", onClick: handleSubscribeAction, loading: scUserContext.user ? scGroupsManager.isLoading(scGroup) : null, disabled: status === types_1.SCGroupSubscriptionStatusType.REQUESTED, className: (0, classnames_1.default)(classes.root, className) }, rest, { children: getStatus })));
169
170
  }
170
171
  exports.default = GroupSubscribeButton;
package/lib/esm/components/AcceptRequestUserEventButton/AcceptRequestUserEventButton.js CHANGED
@@ -11,6 +11,7 @@ import { useCallback, useState } from 'react';
11
11
  import { FormattedMessage } from 'react-intl';
12
12
  import { SCOPE_SC_UI } from '../../constants/Errors';
13
13
  import ConfirmDialog from '../../shared/ConfirmDialog/ConfirmDialog';
14
+ import { useSnackbar } from 'notistack';
14
15
  const PREFIX = 'SCAcceptRequestUserEventButton';
15
16
  const classes = {
16
17
  root: `${PREFIX}-root`
@@ -55,16 +56,33 @@ export default function AcceptRequestUserEventButton(inProps) {
55
56
  // HOOKS
56
57
  const { scEvent } = useSCFetchEvent({ id: eventId, event });
57
58
  const { scUser } = useSCFetchUser({ id: userId, user });
59
+ const { enqueueSnackbar } = useSnackbar();
58
60
  const handleConfirmAction = useCallback(() => {
59
61
  setLoading(true);
60
62
  EventService.inviteOrAcceptEventRequest(scEvent.id, { users: [scUser.id] })
61
63
  .then(() => {
62
- handleConfirm === null || handleConfirm === void 0 ? void 0 : handleConfirm(scUser.id);
64
+ if (handleConfirm) {
65
+ handleConfirm(scUser.id);
66
+ }
67
+ else {
68
+ enqueueSnackbar(_jsx(FormattedMessage, { id: "ui.acceptRequestUserEventButton.snackbar.success", defaultMessage: "ui.acceptRequestUserEventButton.snackbar.success" }), {
69
+ variant: 'error',
70
+ autoHideDuration: 3000
71
+ });
72
+ }
63
73
  setLoading(false);
64
74
  setOpenDialog(false);
65
75
  })
66
76
  .catch((error) => {
67
- handleConfirm === null || handleConfirm === void 0 ? void 0 : handleConfirm(null);
77
+ if (handleConfirm) {
78
+ handleConfirm(null);
79
+ }
80
+ else {
81
+ enqueueSnackbar(_jsx(FormattedMessage, { id: "ui.common.error.action", defaultMessage: "ui.common.error.action" }), {
82
+ variant: 'error',
83
+ autoHideDuration: 3000
84
+ });
85
+ }
68
86
  Logger.error(SCOPE_SC_UI, error);
69
87
  });
70
88
  }, [scEvent, scUser]);
package/lib/esm/components/AcceptRequestUserGroupButton/AcceptRequestUserGroupButton.d.ts ADDED
@@ -0,0 +1,61 @@
1
+ import { SCGroupType, SCUserType } from '@selfcommunity/types';
2
+ import { HTMLAttributes } from 'react';
3
+ export interface AcceptRequestUserGroupButtonProps {
4
+ /**
5
+ * Overrides or extends the styles applied to the component.
6
+ * @default null
7
+ */
8
+ className?: HTMLAttributes<HTMLButtonElement>['className'];
9
+ /**
10
+ * Id of the group
11
+ * @default null
12
+ */
13
+ groupId?: number;
14
+ /**
15
+ * Group
16
+ * @default null
17
+ */
18
+ group?: SCGroupType;
19
+ /**
20
+ * Id of the user
21
+ * @default null
22
+ */
23
+ userId?: number;
24
+ /**
25
+ * Group
26
+ * @default null
27
+ */
28
+ user?: SCUserType;
29
+ /**
30
+ * Callback when user accept request
31
+ * @default null
32
+ */
33
+ handleConfirm?: ((id: number | null) => void) | null;
34
+ /**
35
+ * Others properties
36
+ */
37
+ [p: string]: any;
38
+ }
39
+ /**
40
+ * > API documentation for the Community-JS Accept Request User Group Button component. Learn about the available props and the CSS API.
41
+
42
+ #### Import
43
+
44
+ ```jsx
45
+ import {AcceptRequestUserGroupButton} from '@selfcommunity/react-ui';
46
+ ```
47
+
48
+ #### Component Name
49
+
50
+ The name `SCAcceptRequestUserEventButton` can be used when providing style overrides in the theme.
51
+
52
+
53
+ #### CSS
54
+
55
+ |Rule Name|Global class|Description|
56
+ |---|---|---|
57
+ |root|.SCAcceptRequestUserGroupButton-root|Styles applied to the root element.|
58
+
59
+ * @param inProps
60
+ */
61
+ export default function AcceptRequestUserGroupButton(inProps: AcceptRequestUserGroupButtonProps): JSX.Element;