@selfcommunity/react-ui 0.11.0-alpha.4 → 0.11.0-alpha.40

package/lib/esm/components/CreateLiveStreamDialog/CreateLiveStreamDialog.js

@@ -23,10 +23,11 @@ const classes = {
 const Root = styled(BaseDialog, {
     name: PREFIX,
     slot: 'Root'
-})(({ theme }) => ({
+})(() => ({
     paddingBottom: '0px !important',
     [`& .${classes.title}`]: {
-        display: 'flex'
+        display: 'flex',
+        alignItems: 'center'
     },
     [`& .${classes.content}`]: {
         paddingBottom: 0
@@ -56,7 +57,7 @@ const Transition = React.forwardRef(function Transition(props, ref) {
  * @param inProps
  */
 export default function CreateLiveStreamDialog(inProps) {
-    var _a, _b;
+    var _a;
     //PROPS
     const props = useThemeProps({
         props: inProps,
@@ -65,11 +66,12 @@ export default function CreateLiveStreamDialog(inProps) {
     const { className, open = true, onClose, onSuccess } = props, rest = __rest(props, ["className", "open", "onClose", "onSuccess"]);
     // CONTEXT
     const scUserContext = useSCUser();
-    const canCreateLiveStream = useMemo(() => { var _a, _b; return (_b = (_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission) === null || _b === void 0 ? void 0 : _b.create_live_stream; }, [(_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission]);
-    const canCreateEvent = useMemo(() => { var _a, _b; return (_b = (_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission) === null || _b === void 0 ? void 0 : _b.create_event; }, [(_b = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _b === void 0 ? void 0 : _b.permission]);
+    // PERMISSION
+    const canCreateEvent = useMemo(() => { var _a, _b; return (_b = (_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission) === null || _b === void 0 ? void 0 : _b.create_event; }, [(_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission]);
     // STATE
     const [step, setStep] = useState(canCreateEvent ? CreateLiveStreamStep.SELECT_TYPE : CreateLiveStreamStep.CREATE_LIVE);
     const [liveType, setLiveType] = useState(canCreateEvent ? null : LiveStreamType.DIRECT_LIVE);
+    const canShowBackButton = useMemo(() => step === CreateLiveStreamStep.CREATE_LIVE && canCreateEvent, [step, canCreateEvent]);
     // HANDLER
     const handleLiveTypeSelected = useCallback((l) => {
         setLiveType(l);
@@ -78,23 +80,23 @@ export default function CreateLiveStreamDialog(inProps) {
         setLiveType(l);
         setStep(CreateLiveStreamStep.CREATE_LIVE);
     }, []);
-    const handleBack = useCallback((l) => {
+    const handleBack = useCallback(() => {
         setStep(CreateLiveStreamStep.SELECT_TYPE);
     }, []);
     const handleSubmit = useCallback((e) => {
         onSuccess && onSuccess(e);
-    }, []);
+    }, [onSuccess]);
     useEffect(() => {
         if (!canCreateEvent) {
             setLiveType(LiveStreamType.DIRECT_LIVE);
         }
     }, [canCreateEvent]);
     // user must be logged
-    if (!scUserContext.user || !canCreateLiveStream) {
+    if (!scUserContext.user) {
         return null;
     }
     /**
      * Renders root object
      */
-    return (_jsx(Root, Object.assign({ DialogContentProps: { dividers: false }, maxWidth: 'md', title: _jsxs(Box, Object.assign({ className: classes.title, component: 'span' }, { children: [Boolean(step === CreateLiveStreamStep.CREATE_LIVE && canCreateEvent) && (_jsx(Button, Object.assign({ variant: "text", onClick: handleBack, startIcon: _jsx(Icon, { children: "arrow_back" }) }, { children: "Back" }))), _jsx(Box, Object.assign({ component: 'span' }, { children: _jsx(FormattedMessage, { id: "ui.createLivestreamDialog.title", defaultMessage: "ui.createLivestreamDialog.title" }) }))] })), fullWidth: true, open: open, scroll: 'paper', onClose: onClose, 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 })) }))] })) })));
+    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 })) }))] })) })));
 }

package/lib/esm/components/CreateLiveStreamDialog/LiveStreamSelector/LiveStreamSelector.js

@@ -2,7 +2,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useState } from 'react';
 import { styled } from '@mui/material/styles';
 import { Box, Typography, Button, Paper, Container, Radio, Alert } from '@mui/material';
-import Icon from '@mui/material/Icon';
 import { useThemeProps } from '@mui/system';
 import classNames from 'classnames';
 import { LiveStreamType } from '../types';
@@ -13,8 +12,8 @@ import LiveImage from '../../../assets/liveStream/live';
 import { LiveStreamApiClient } from '@selfcommunity/api-services';
 import { WARNING_THRESHOLD_EXPIRING_SOON } from '../../LiveStreamRoom/constants';
 import { Link, SCPreferences, useSCContext, useSCPreferences, useSCUser } from '@selfcommunity/react-core';
-import { SCCommunitySubscriptionTier } from '@selfcommunity/types';
-import { SELFCOMMUNITY_PRICING } from '../../PlatformWidget/constants';
+import { SCCommunityEnvironment, SCCommunitySubscriptionTier } from '@selfcommunity/types';
+import { HUB_PROD, HUB_STAGE } from '../../PlatformWidget/constants';
 export const PREFIX = 'SCLiveStreamSelector';
 const classes = {
     root: `${PREFIX}-root`,
@@ -31,7 +30,12 @@ const OptionCard = styled(Paper, {
     name: PREFIX,
     slot: 'optionCardRoot',
     shouldForwardProp: (prop) => prop !== 'selected'
-})(({ theme, selected }) => ({}));
+})(({ theme, selected }) => ({
+    '& h6': {
+        fontWeight: 'bold',
+        textTransform: 'uppercase'
+    }
+}));
 const FeatureItem = styled(Box, {
     name: PREFIX,
     slot: 'featureItemRoot'
@@ -76,6 +80,14 @@ export default function LiveStreamSelector(inProps) {
         SCPreferences.CONFIGURATIONS_SUBSCRIPTION_TIER in preferences &&
         preferences[SCPreferences.CONFIGURATIONS_SUBSCRIPTION_TIER].value &&
         preferences[SCPreferences.CONFIGURATIONS_SUBSCRIPTION_TIER].value === SCCommunitySubscriptionTier.FREE_TRIAL, [preferences]);
+    const isEnterpriseTier = useMemo(() => preferences &&
+        SCPreferences.CONFIGURATIONS_SUBSCRIPTION_TIER in preferences &&
+        preferences[SCPreferences.CONFIGURATIONS_SUBSCRIPTION_TIER].value &&
+        preferences[SCPreferences.CONFIGURATIONS_SUBSCRIPTION_TIER].value === SCCommunitySubscriptionTier.ENTERPRISE, [preferences]);
+    const isStage = useMemo(() => preferences &&
+        SCPreferences.STATIC_ENVIRONMENT in preferences &&
+        preferences[SCPreferences.STATIC_ENVIRONMENT].value === SCCommunityEnvironment.STAGE, [preferences]);
+    const communityStackId = useMemo(() => preferences && SCPreferences.STATIC_ENVIRONMENT in preferences && preferences[SCPreferences.STATIC_STACKID].value, [preferences]);
     const intl = useIntl();
     const options = [
         {
@@ -95,8 +107,7 @@ export default function LiveStreamSelector(inProps) {
                     id: 'ui.liveStreamForm.selector.scheduleLiveEventItem3',
                     defaultMessage: 'ui.liveStreamForm.selector.scheduleLiveEventItem3'
                 })
-            ],
-            icons: [_jsx(Icon, { children: "chevron_right" }), _jsx(Icon, { children: "chevron_right" }), _jsx(Icon, { children: "chevron_right" }), _jsx(Icon, { children: "chevron_right" })]
+            ]
         },
         {
             title: intl.formatMessage({
@@ -118,8 +129,7 @@ export default function LiveStreamSelector(inProps) {
                     id: 'ui.liveStreamForm.selector.scheduleLiveStreamItem3',
                     defaultMessage: 'ui.liveStreamForm.selector.scheduleLiveStreamItem3'
                 })
-            ],
-            icons: [_jsx(Icon, { children: "chevron_right" }), _jsx(Icon, { children: "chevron_right" }), _jsx(Icon, { children: "chevron_right" }), _jsx(Icon, { children: "chevron_right" })]
+            ]
         }
     ];
     const handleOptionSelect = (type) => {
@@ -151,11 +161,11 @@ export default function LiveStreamSelector(inProps) {
     }, []);
     const warning = useMemo(() => {
         let _message;
-        if (isFreeTrialTier && isCommunityOwner) {
+        if (isFreeTrialTier && isCommunityOwner && !isEnterpriseTier) {
             _message = (_jsx(FormattedMessage, { id: "ui.liveStreamForm.selector.warningSubscriptionRequired", defaultMessage: "ui.liveStreamForm.selector.warningSubscriptionRequired", values: {
                     // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
                     // @ts-ignore
-                    link: (...chunks) => _jsx(Link, Object.assign({ to: SELFCOMMUNITY_PRICING[scContext.settings.locale.default] }, { children: chunks }))
+                    link: (...chunks) => (_jsx(Link, Object.assign({ target: "_blank", to: `${isStage ? HUB_STAGE : HUB_PROD}dashboard/community/${communityStackId}/subscription` }, { children: chunks })))
                 } }));
         }
         else if (timeRemaining !== null && timeRemaining <= WARNING_THRESHOLD_EXPIRING_SOON) {
@@ -171,13 +181,12 @@ export default function LiveStreamSelector(inProps) {
         }
         return null;
     }, [timeRemaining, isFreeTrialTier]);
-    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className), maxWidth: "lg", sx: { py: 4 } }, { children: [_jsx(Typography, Object.assign({ variant: "h4", component: "h1", align: "center", gutterBottom: true, sx: { mb: 4, fontWeight: 500 } }, { children: "How do you want to go live?" })), warning, _jsx(Box, Object.assign({ className: classes.options }, { children: options.map((option, index) => (_jsxs(OptionCard, Object.assign({ selected: selectedOption === option.type, onClick: () => handleOptionSelect(option.type), elevation: 0, role: "button", tabIndex: 0, onKeyDown: (e) => {
+    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className), maxWidth: "lg", sx: { py: 4 } }, { children: [_jsx(Typography, Object.assign({ variant: "h4", component: "h1", align: "center", gutterBottom: true, sx: { mb: 4, fontWeight: 500 } }, { children: _jsx(FormattedMessage, { id: "ui.liveStreamForm.selector.title", defaultMessage: "ui.liveStreamForm.selector.title" }) })), warning, _jsx(Box, Object.assign({ className: classes.options }, { children: options.map((option, index) => (_jsxs(OptionCard, Object.assign({ selected: selectedOption === option.type, onClick: () => handleOptionSelect(option.type), elevation: 0, role: "button", tabIndex: 0, onKeyDown: (e) => {
                         if (e.key === 'Enter' || e.key === ' ') {
                             handleOptionSelect(index);
                             e.preventDefault();
                         }
-                    }, theme: undefined }, { children: [_jsxs(Box, { children: [_jsx(Typography, Object.assign({ variant: "h6", component: "h2", sx: { fontWeight: 500 } }, { children: option.title })), _jsx(Radio, { checked: selectedOption === option.type })] }), _jsx("img", { src: option.image, alt: "logo" }), _jsx(Box, Object.assign({ component: "ul" }, { children: option.features.map((feature, featureIndex) => {
-                                const _Icon = option.icons[featureIndex];
-                                return (_jsxs(FeatureItem, Object.assign({ component: "li" }, { children: [_Icon, _jsx(Typography, Object.assign({ variant: "body2", color: "text.secondary", sx: { flex: 1 } }, { children: feature }))] }), featureIndex));
+                    } }, { children: [_jsxs(Box, { children: [_jsx(Typography, Object.assign({ variant: "h6" }, { children: option.title })), _jsx(Radio, { checked: selectedOption === option.type })] }), _jsx("img", { src: option.image, alt: "option-image" }), _jsx(Box, Object.assign({ component: "ul" }, { children: option.features.map((feature, featureIndex) => {
+                                return (_jsx(FeatureItem, Object.assign({ component: "li" }, { children: _jsx(Typography, Object.assign({ variant: "body2", color: "text.secondary", sx: { flex: 1 } }, { children: feature })) }), featureIndex));
                             }) }))] }), index))) })), _jsx(Box, Object.assign({ className: classes.actions }, { children: _jsx(Button, Object.assign({ disabled: !selectedOption || !timeRemaining || isFreeTrialTier, variant: "contained", onClick: handleNext, color: "secondary" }, { children: _jsx(FormattedMessage, { id: "ui.liveStreamForm.selector.next", defaultMessage: "ui.liveStreamForm.selector.next" }) })) }))] })));
 }

package/lib/esm/components/Editor/Editor.js

@@ -8,19 +8,19 @@ import { useThemeProps } from '@mui/system';
 import nodes from './nodes';
 import { LexicalComposer } from '@lexical/react/LexicalComposer';
 import { ContentEditable } from '@lexical/react/LexicalContentEditable';
-import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';
+import ToolbarPlugin from './plugins/ToolbarPlugin';
+import { PREFIX } from './constants';
+import { HorizontalRulePlugin } from './plugins/HorizontalRulePlugin';
 import { RichTextPlugin } from './plugins/LexicalRichTextPlugin';
-import LexicalErrorBoundary from '@lexical/react/LexicalErrorBoundary';
-import { HorizontalRulePlugin } from '@lexical/react/LexicalHorizontalRulePlugin';
+import { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary';
 import { AutoLinkPlugin, DefaultHtmlValuePlugin, EmojiPlugin, ImagePlugin, MentionsPlugin, OnChangePlugin } from './plugins';
+import OnBlurPlugin from './plugins/OnBlurPlugin';
+import OnFocusPlugin from './plugins/OnFocusPlugin';
 import { LinkPlugin } from '@lexical/react/LexicalLinkPlugin';
+import FloatingLinkPlugin from './plugins/FloatingLinkPlugin';
 import ApiPlugin from './plugins/ApiPlugin';
-import ToolbarPlugin from './plugins/ToolbarPlugin';
+import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';
 import { ListPlugin } from '@lexical/react/LexicalListPlugin';
-import FloatingLinkPlugin from './plugins/FloatingLinkPlugin';
-import OnBlurPlugin from './plugins/OnBlurPlugin';
-import OnFocusPlugin from './plugins/OnFocusPlugin';
-import { PREFIX } from './constants';
 const classes = {
     root: `${PREFIX}-root`,
     focused: `${PREFIX}-focused`,

package/lib/esm/components/Editor/nodes/HashtagNode.js

@@ -33,6 +33,8 @@ export class HashtagNode extends TextNode {
         if (inner === null) {
             return true;
         }
+        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+        // @ts-ignore
         super.updateDOM(prevNode, inner, config);
         return false;
     }

package/lib/esm/components/Editor/nodes/MentionNode.js

@@ -47,6 +47,8 @@ export class MentionNode extends TextNode {
         if (inner === null) {
             return true;
         }
+        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+        // @ts-ignore
         super.updateDOM(prevNode, inner, config);
         return false;
     }

package/lib/esm/components/Editor/plugins/HorizontalRulePlugin.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+export declare function HorizontalRulePlugin(): null;

package/lib/esm/components/Editor/plugins/HorizontalRulePlugin.js

@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { $createHorizontalRuleNode, INSERT_HORIZONTAL_RULE_COMMAND } from '@lexical/react/LexicalHorizontalRuleNode';
+import { $insertNodeToNearestRoot } from '@lexical/utils';
+import { $getSelection, $isRangeSelection, COMMAND_PRIORITY_EDITOR } from 'lexical';
+import { useEffect } from 'react';
+export function HorizontalRulePlugin() {
+    const [editor] = useLexicalComposerContext();
+    useEffect(() => {
+        return editor.registerCommand(INSERT_HORIZONTAL_RULE_COMMAND, (type) => {
+            const selection = $getSelection();
+            if (!$isRangeSelection(selection)) {
+                return false;
+            }
+            const focusNode = selection.focus.getNode();
+            if (focusNode !== null) {
+                const horizontalRuleNode = $createHorizontalRuleNode();
+                $insertNodeToNearestRoot(horizontalRuleNode);
+            }
+            return true;
+        }, COMMAND_PRIORITY_EDITOR);
+    }, [editor]);
+    return null;
+}

package/lib/esm/components/Editor/plugins/LexicalRichTextPlugin.d.ts

@@ -1,6 +1,6 @@
 import { ErrorBoundaryType } from '../shared/useDecorators';
 export declare function RichTextPlugin({ contentEditable, placeholder, ErrorBoundary }: {
     contentEditable: JSX.Element;
-    placeholder: ((isEditable: boolean) => null | JSX.Element) | null | JSX.Element;
-    ErrorBoundary: ErrorBoundaryType;
+    placeholder?: ((isEditable: boolean) => null | JSX.Element) | null | JSX.Element;
+    ErrorBoundary?: ErrorBoundaryType;
 }): JSX.Element;

package/lib/esm/components/Editor/plugins/LexicalRichTextPlugin.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
-import useLexicalEditable from '@lexical/react/useLexicalEditable';
+import { useLexicalEditable } from '@lexical/react/useLexicalEditable';
 import { useDecorators } from '../shared/useDecorators';
 import { useEditorFocus } from '../shared/useEditorFocus';
 import { useCanShowPlaceholder } from '../shared/useCanShowPlaceholder';

package/lib/esm/components/Editor/plugins/ToolbarPlugin.js

@@ -155,7 +155,7 @@ export default function ToolbarPlugin(inProps) {
             setFormats(FORMATS.filter((f) => selection.hasFormat(f)));
             // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
             // @ts-ignore
-            setAlignment(ALIGNMENTS.find((a) => element.getFormatType() === a) || ALIGNMENTS[0]);
+            setAlignment(ALIGNMENTS.find((a) => { var _a; return ((_a = element.getFormatType) === null || _a === void 0 ? void 0 : _a.call(element)) === a; }) || ALIGNMENTS[0]);
             // Update links
             const node = getSelectedNode(selection);
             const parent = node.getParent();

package/lib/esm/components/Event/Event.js

@@ -17,6 +17,7 @@ import User from '../User';
 import Widget from '../Widget';
 import { PREFIX } from './constants';
 import EventSkeleton from './Skeleton';
+import { checkEventFinished } from '../../utils/events';
 const classes = {
     root: `${PREFIX}-root`,
     detailRoot: `${PREFIX}-detail-root`,
@@ -44,7 +45,8 @@ const classes = {
     snippetInProgress: `${PREFIX}-snippet-in-progress`,
     snippetPrimary: `${PREFIX}-snippet-primary`,
     snippetSecondary: `${PREFIX}-snippet-secondary`,
-    snippetActions: `${PREFIX}-snippet-actions`
+    snippetActions: `${PREFIX}-snippet-actions`,
+    finishedChip: `${PREFIX}-finished-chip`
 };
 const Root = styled(Widget, {
     name: PREFIX,
@@ -108,6 +110,7 @@ export default function Event(inProps) {
     // STATE
     const { scEvent } = useSCFetchEvent({ id: eventId, event, autoSubscribe: false });
     const inProgress = useMemo(() => scEvent && scEvent.active && scEvent.running, [scEvent]);
+    const isEventFinished = useMemo(() => checkEventFinished(scEvent), [scEvent]);
     // CONTEXT
     const scRoutingContext = useSCRouting();
     // HOOKS
@@ -126,10 +129,10 @@ export default function Event(inProps) {
         contentObj = (_jsxs(DetailRoot, Object.assign({ className: classes.detailRoot }, { children: [_jsxs(Box, Object.assign({ className: classes.detailImageWrapper }, { children: [_jsx(CardMedia, { component: "img", image: scEvent.image_medium, alt: scEvent.name, className: classes.detailImage }), !hideInProgress && inProgress && (_jsx(Chip, { size: "small", component: "div", label: _jsx(FormattedMessage, { id: "ui.event.inProgress", defaultMessage: "ui.event.inProgress" }), className: classes.detailInProgress })), _jsx(Calendar, { day: new Date(scEvent.start_date).getDate() })] })), _jsxs(CardContent, Object.assign({ className: classes.detailContent }, { children: [scEvent.active ? (_jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, scEvent), className: classes.detailNameWrapper }, { children: _jsx(Typography, Object.assign({ variant: "h3", className: classes.detailName }, { children: scEvent.name })) }))) : (_jsx(Box, Object.assign({ className: classes.detailNameWrapper }, { children: _jsx(Typography, Object.assign({ variant: "h3", className: classes.detailName }, { children: scEvent.name })) }))), _jsx(EventInfoDetails, { event: scEvent }), !hideEventPlanner && (_jsx(User, { user: scEvent.managed_by, elevation: 0, secondary: _jsx(Typography, Object.assign({ variant: "caption" }, { children: _jsx(FormattedMessage, { id: "ui.myEventsWidget.planner", defaultMessage: "ui.myEventsWidget.planner" }) })), actions: _jsx(_Fragment, {}), className: classes.detailUser })), !hideEventParticipants && (_jsxs(_Fragment, { children: [_jsx(Divider, { className: classes.detailFirstDivider }), _jsx(EventParticipantsButton, Object.assign({ event: scEvent }, EventParticipantsButtonComponentProps))] })), _jsx(Divider, { className: classes.detailSecondDivider })] })), actions !== null && actions !== void 0 ? actions : (_jsx(CardActions, Object.assign({ className: classes.detailActions }, { children: _jsx(Button, Object.assign({ size: "small", variant: "outlined", component: Link, to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, scEvent) }, { children: _jsx(FormattedMessage, { defaultMessage: "ui.event.see", id: "ui.event.see" }) })) })))] })));
     }
     else if (template === SCEventTemplateType.PREVIEW) {
-        contentObj = (_jsxs(PreviewRoot, Object.assign({ className: classes.previewRoot }, { children: [_jsxs(Box, Object.assign({ position: "relative", className: classes.previewImageWrapper }, { children: [_jsx(CardMedia, { component: "img", image: scEvent.image_medium, alt: scEvent.name, className: classes.previewImage }), !hideInProgress && inProgress && (_jsx(Chip, { size: "small", component: "div", label: _jsx(FormattedMessage, { id: "ui.event.inProgress", defaultMessage: "ui.event.inProgress" }), className: classes.previewInProgress }))] })), _jsxs(CardContent, Object.assign({ className: classes.previewContent }, { children: [_jsx(EventInfoDetails, { event: scEvent, hidePrivacyIcon: true, hasLocationInfo: false, beforePrivacyInfo: _jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, scEvent), className: classes.previewNameWrapper }, { children: _jsx(Typography, Object.assign({ variant: "h5", className: classes.previewName }, { children: scEvent.name })) })) }), !hideEventParticipants && _jsx(EventParticipantsButton, Object.assign({ event: scEvent, hideCaption: true }, EventParticipantsButtonComponentProps))] })), actions !== null && actions !== void 0 ? actions : (_jsx(CardActions, Object.assign({ className: classes.previewActions }, { children: _jsx(Button, Object.assign({ size: "small", variant: "outlined", component: Link, to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, scEvent) }, { children: _jsx(FormattedMessage, { defaultMessage: "ui.event.see", id: "ui.event.see" }) })) })))] })));
+        contentObj = (_jsxs(PreviewRoot, Object.assign({ className: classes.previewRoot }, { children: [_jsxs(Box, Object.assign({ position: "relative", className: classes.previewImageWrapper }, { children: [_jsx(CardMedia, { component: "img", image: scEvent.image_medium, alt: scEvent.name, className: classes.previewImage }), !hideInProgress && inProgress && (_jsx(Chip, { size: "small", component: "div", label: _jsx(FormattedMessage, { id: "ui.event.inProgress", defaultMessage: "ui.event.inProgress" }), className: classes.previewInProgress })), isEventFinished && (_jsx(Chip, { size: "small", component: "div", label: _jsx(FormattedMessage, { id: "ui.event.finished", defaultMessage: "ui.event.finished" }), className: classes.finishedChip }))] })), _jsxs(CardContent, Object.assign({ className: classes.previewContent }, { children: [_jsx(EventInfoDetails, { event: scEvent, hidePrivacyIcon: true, hasLocationInfo: false, beforePrivacyInfo: _jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, scEvent), className: classes.previewNameWrapper }, { children: _jsx(Typography, Object.assign({ variant: "h5", className: classes.previewName }, { children: scEvent.name })) })) }), !hideEventParticipants && _jsx(EventParticipantsButton, Object.assign({ event: scEvent, hideCaption: true }, EventParticipantsButtonComponentProps))] })), actions !== null && actions !== void 0 ? actions : (_jsx(CardActions, Object.assign({ className: classes.previewActions }, { children: _jsx(Button, Object.assign({ size: "small", variant: "outlined", component: Link, to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, scEvent) }, { children: _jsx(FormattedMessage, { defaultMessage: "ui.event.see", id: "ui.event.see" }) })) })))] })));
     }
     else {
-        contentObj = (_jsx(SnippetRoot, { elevation: 0, square: true, disableTypography: true, className: classes.snippetRoot, image: _jsxs(Box, Object.assign({ className: classes.snippetImage }, { children: [_jsx(Avatar, { variant: "square", alt: scEvent.name, src: scEvent.image_medium, className: classes.snippetAvatar }), ' ', !hideInProgress && inProgress && (_jsx(Chip, { size: "small", component: "div", label: _jsx(FormattedMessage, { id: "ui.event.inProgress", defaultMessage: "ui.event.inProgress" }), className: classes.snippetInProgress }))] })), primary: _jsxs(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, scEvent), className: classes.snippetPrimary }, { children: [_jsx(Typography, Object.assign({ component: "span" }, { children: `${intl.formatDate(scEvent.start_date, {
+        contentObj = (_jsx(SnippetRoot, { elevation: 0, square: true, disableTypography: true, className: classes.snippetRoot, image: _jsxs(Box, Object.assign({ className: classes.snippetImage }, { children: [_jsx(Avatar, { variant: "square", alt: scEvent.name, src: scEvent.image_medium, className: classes.snippetAvatar }), ' ', !hideInProgress && inProgress && (_jsx(Chip, { size: "small", component: "div", label: _jsx(FormattedMessage, { id: "ui.event.inProgress", defaultMessage: "ui.event.inProgress" }), className: classes.snippetInProgress })), isEventFinished && (_jsx(Chip, { size: "small", component: "div", label: _jsx(FormattedMessage, { id: "ui.event.finished", defaultMessage: "ui.event.finished" }), className: classes.finishedChip }))] })), primary: _jsxs(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, scEvent), className: classes.snippetPrimary }, { children: [_jsx(Typography, Object.assign({ component: "span" }, { children: `${intl.formatDate(scEvent.start_date, {
                             weekday: 'long',
                             month: 'long',
                             day: 'numeric'

package/lib/esm/components/EventForm/EventForm.js

@@ -7,7 +7,7 @@ import { useThemeProps } from '@mui/system';
 import { LocalizationProvider, MobileDatePicker, MobileTimePicker } from '@mui/x-date-pickers';
 import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
 import { EventService, formatHttpErrorCode } from '@selfcommunity/api-services';
-import { SCPreferences, useSCContext, useSCPreferences } from '@selfcommunity/react-core';
+import { SCPreferences, useSCContext, useSCPreferences, useSCUser } from '@selfcommunity/react-core';
 import { SCEventLocationType, SCEventPrivacyType, SCEventRecurrenceType, SCFeatureName } from '@selfcommunity/types';
 import { Logger } from '@selfcommunity/utils';
 import classNames from 'classnames';
@@ -119,7 +119,7 @@ const Root = styled(Box, {
  * @param inProps
  */
 export default function EventForm(inProps) {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f;
     //PROPS
     const props = useThemeProps({
         props: inProps,
@@ -128,6 +128,7 @@ export default function EventForm(inProps) {
     const { className, onSuccess, onError, event, presetLocation, EventAddressComponentProps = {} } = props, rest = __rest(props, ["className", "onSuccess", "onError", "event", "presetLocation", "EventAddressComponentProps"]);
     // CONTEXT
     const scContext = useSCContext();
+    const scUserContext = useSCUser();
     // INTL
     const intl = useIntl();
     const startDateTime = useMemo(() => getNewDate(event === null || event === void 0 ? void 0 : event.start_date), [event]);
@@ -170,6 +171,7 @@ export default function EventForm(inProps) {
         scPreferences.features.includes(SCFeatureName.LIVE_STREAM) &&
         SCPreferences.CONFIGURATIONS_LIVE_STREAM_ENABLED in scPreferences.preferences &&
         scPreferences.preferences[SCPreferences.CONFIGURATIONS_LIVE_STREAM_ENABLED].value, [scPreferences.preferences, scPreferences.features]);
+    const canCreateLiveStream = useMemo(() => { var _a, _b; return (_b = (_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission) === null || _b === void 0 ? void 0 : _b.create_live_stream; }, [(_b = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _b === void 0 ? void 0 : _b.permission]);
     const privateEnabled = useMemo(() => scPreferences.preferences[SCPreferences.CONFIGURATIONS_EVENTS_PRIVATE_ENABLED].value, [scPreferences.preferences]);
     const visibilityEnabled = useMemo(() => scPreferences.preferences[SCPreferences.CONFIGURATIONS_EVENTS_VISIBILITY_ENABLED].value, [scPreferences.preferences]);
     const disablePastStartTime = useMemo(() => field.startDate.getDate() === getNewDate().getDate(), [field]);
@@ -382,7 +384,7 @@ export default function EventForm(inProps) {
                             start_date: field.startDate,
                             location: field.location,
                             geolocation: field.geolocation,
-                            live_stream: Object.assign(Object.assign({ title: field.name || `${intl.formatMessage(messages.name)}` }, (event && ((_b = event.live_stream) === null || _b === void 0 ? void 0 : _b.created_at) && { created_at: field.startDate })), { settings: field.liveStreamSettings })
+                            live_stream: Object.assign(Object.assign({ title: field.name || `${intl.formatMessage(messages.name)}` }, (event && ((_c = event.live_stream) === null || _c === void 0 ? void 0 : _c.created_at) && { created_at: field.startDate })), { settings: field.liveStreamSettings })
                         }) }, EventAddressComponentProps)), privateEnabled && (_jsxs(Box, Object.assign({ className: classes.privacySection }, { children: [_jsxs(Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center", justifyContent: "center" }, { children: [_jsxs(Typography, Object.assign({ className: classNames(classes.switchLabel, { [classes.active]: !field.isPublic }) }, { children: [_jsx(Icon, { children: "private" }), _jsx(FormattedMessage, { id: "ui.eventForm.privacy.private", defaultMessage: "ui.eventForm.privacy.private" })] })), _jsx(Switch, { className: classes.switch, checked: field.isPublic, onChange: () => setField((prev) => (Object.assign(Object.assign({}, prev), { ['isPublic']: !field.isPublic }))), disabled: event && !field.isPublic }), _jsxs(Typography, Object.assign({ className: classNames(classes.switchLabel, { [classes.active]: field.isPublic }) }, { children: [_jsx(Icon, { children: "public" }), _jsx(FormattedMessage, { id: "ui.eventForm.privacy.public", defaultMessage: "ui.eventForm.privacy.public" })] }))] })), _jsx(Typography, Object.assign({ variant: "body2", textAlign: "center", className: classes.privacySectionInfo }, { children: field.isPublic ? (_jsx(FormattedMessage, { id: "ui.eventForm.privacy.public.info", defaultMessage: "ui.eventForm.privacy.public.info", values: {
                                         // eslint-disable-next-line @typescript-eslint/ban-ts-ignore,@typescript-eslint/ban-ts-comment
                                         // @ts-ignores
@@ -392,8 +394,8 @@ export default function EventForm(inProps) {
                                         // @ts-ignore
                                         b: (chunks) => _jsx("strong", { children: chunks })
                                     } })) }))] }))), _jsx(TextField, { multiline: true, className: classes.description, placeholder: `${intl.formatMessage(messages.description)}`, margin: "normal", value: field.description, name: "description", onChange: handleChange, InputProps: {
-                            endAdornment: (_jsx(Typography, Object.assign({ variant: "body2" }, { children: ((_c = field.description) === null || _c === void 0 ? void 0 : _c.length) ? EVENT_DESCRIPTION_MAX_LENGTH - field.description.length : EVENT_DESCRIPTION_MAX_LENGTH })))
-                        }, error: Boolean(((_d = field.description) === null || _d === void 0 ? void 0 : _d.length) > EVENT_DESCRIPTION_MAX_LENGTH), helperText: ((_e = field.description) === null || _e === void 0 ? void 0 : _e.length) > EVENT_DESCRIPTION_MAX_LENGTH ? (_jsx(FormattedMessage, { id: "ui.eventForm.description.error.maxLength", defaultMessage: "ui.eventForm.description.error.maxLength" })) : null }), genericError && (_jsx(Box, Object.assign({ className: classes.genericError }, { children: _jsx(Alert, Object.assign({ variant: "filled", severity: "error" }, { children: genericError })) }))), _jsx(Box, Object.assign({ className: classes.actions }, { children: _jsx(LoadingButton, Object.assign({ loading: field.isSubmitting, disabled: !field.name ||
+                            endAdornment: (_jsx(Typography, Object.assign({ variant: "body2" }, { children: ((_d = field.description) === null || _d === void 0 ? void 0 : _d.length) ? EVENT_DESCRIPTION_MAX_LENGTH - field.description.length : EVENT_DESCRIPTION_MAX_LENGTH })))
+                        }, error: Boolean(((_e = field.description) === null || _e === void 0 ? void 0 : _e.length) > EVENT_DESCRIPTION_MAX_LENGTH), helperText: ((_f = field.description) === null || _f === void 0 ? void 0 : _f.length) > EVENT_DESCRIPTION_MAX_LENGTH ? (_jsx(FormattedMessage, { id: "ui.eventForm.description.error.maxLength", defaultMessage: "ui.eventForm.description.error.maxLength" })) : null }), genericError && (_jsx(Box, Object.assign({ className: classes.genericError }, { children: _jsx(Alert, Object.assign({ variant: "filled", severity: "error" }, { children: genericError })) }))), _jsx(Box, Object.assign({ className: classes.actions }, { children: _jsx(LoadingButton, Object.assign({ loading: field.isSubmitting, disabled: !field.name ||
                                 !field.startDate ||
                                 !field.startTime ||
                                 !field.endDate ||
@@ -405,5 +407,5 @@ export default function EventForm(inProps) {
                                 field.isSubmitting ||
                                 field.name.length > EVENT_TITLE_MAX_LENGTH ||
                                 field.description.length > EVENT_DESCRIPTION_MAX_LENGTH ||
-                                (field.location === SCEventLocationType.LIVESTREAM && !liveStreamEnabled), variant: "contained", onClick: handleSubmit, color: "secondary" }, { children: event ? (_jsx(FormattedMessage, { id: "ui.eventForm.button.edit", defaultMessage: "ui.eventForm.button.edit" })) : (_jsx(FormattedMessage, { id: "ui.eventForm.button.create", defaultMessage: "ui.eventForm.button.create" })) })) }))] }))] })));
+                                (field.location === SCEventLocationType.LIVESTREAM && (!liveStreamEnabled || !canCreateLiveStream)), variant: "contained", onClick: handleSubmit, color: "secondary" }, { children: event ? (_jsx(FormattedMessage, { id: "ui.eventForm.button.edit", defaultMessage: "ui.eventForm.button.edit" })) : (_jsx(FormattedMessage, { id: "ui.eventForm.button.create", defaultMessage: "ui.eventForm.button.create" })) })) }))] }))] })));
 }

package/lib/esm/components/EventHeader/EventHeader.js

@@ -89,7 +89,7 @@ export default function EventHeader(inProps) {
     // INTL
     const intl = useIntl();
     // CONST
-    const isEventAdmin = useMemo(() => scUserContext.user && scEvent && (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]);
+    const isEventAdmin = useMemo(() => { var _a; return scUserContext.user && scEvent && ((_a = scEvent === null || scEvent === void 0 ? void 0 : scEvent.managed_by) === null || _a === void 0 ? void 0 : _a.id) === scUserContext.user.id; }, [scUserContext.user, scEvent === null || scEvent === void 0 ? void 0 : scEvent.managed_by]);
     const isEventFinished = useMemo(() => checkEventFinished(scEvent), [scEvent]);
     /**
      * Handles callback subscribe/unsubscribe event

package/lib/esm/components/EventMediaWidget/EventMediaWidget.js

@@ -245,9 +245,9 @@ export default function EventMediaWidget(inProps) {
     }
     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: {
                                     background: `url(${media.image}) no-repeat center`
-                                }, 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" }) })) })) }))), _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: {
+                                }, 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: true }, 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: {
                                     background: `url(${media.image}) no-repeat center`
                                 }, className: classes.dialogMediaWrapper }, { children: _jsx(Stack, Object.assign({ className: classes.dialogButtonWrapper }, { children: _jsx(LoadingButton, Object.assign({ className: classes.dialogLoadingButton, loading: mediaId === media.id, size: "large", onClick: () => handleRemoveMedia(media.id), sx: {
                                             color: (theme) => (mediaId === media.id ? 'transparent' : theme.palette.common.white)
-                                        } }, { children: _jsx(Icon, Object.assign({ fontSize: "inherit" }, { children: "delete" })) })) })) }), media.id))), showSkeleton === 'dialog' && Array.from(Array(countHiddenMedia)).map((_, i) => _jsx(EventMediaSkeleton, {}, i))] })) })) })), _jsx(ConfirmDialog, { open: openDialogConfirm, title: _jsx(FormattedMessage, { id: "ui.eventMediaWidget.dialog.title", defaultMessage: "ui.eventMediaWidget.dialog.title" }), content: _jsx(FormattedMessage, { id: "ui.eventMediaWidget.dialog.msg", defaultMessage: "ui.eventMediaWidget.dialog.msg" }), btnConfirm: _jsx(FormattedMessage, { id: "ui.eventMediaWidget.dialog.confirm", defaultMessage: "ui.eventMediaWidget.dialog.confirm" }), isUpdating: loading, onConfirm: handleConfirmAction, onClose: handleCloseAction })] })));
+                                        } }, { children: _jsx(Icon, Object.assign({ fontSize: "inherit" }, { children: "delete" })) })) })) }), media.id))), showSkeleton === 'dialog' && Array.from(Array(countHiddenMedia)).map((_, i) => _jsx(EventMediaSkeleton, {}, i))] })) })) }))), openDialogConfirm && (_jsx(ConfirmDialog, { open: true, title: _jsx(FormattedMessage, { id: "ui.eventMediaWidget.dialog.title", defaultMessage: "ui.eventMediaWidget.dialog.title" }), content: _jsx(FormattedMessage, { id: "ui.eventMediaWidget.dialog.msg", defaultMessage: "ui.eventMediaWidget.dialog.msg" }), btnConfirm: _jsx(FormattedMessage, { id: "ui.eventMediaWidget.dialog.confirm", defaultMessage: "ui.eventMediaWidget.dialog.confirm" }), isUpdating: loading, onConfirm: handleConfirmAction, onClose: handleCloseAction }))] })));
 }

package/lib/esm/components/EventMembersWidget/EventMembersWidget.js

@@ -16,7 +16,7 @@ import Widget from '../Widget';
 import { PREFIX } from './constants';
 import Skeleton from './Skeleton';
 import TabContentComponent from './TabContentComponent';
-import { TabContentEnum } from './types';
+import { TabContentType } from './types';
 import HiddenPlaceholder from '../../shared/HiddenPlaceholder';
 const classes = {
     root: `${PREFIX}-root`,
@@ -64,7 +64,7 @@ export default function EventMembersWidget(inProps) {
     const [invitedCount, setInvitedCount] = useState(invited.count);
     const [requestsCount, setRequestsCount] = useState(requests.count);
     const [requestsUsers, setRequestsUsers] = useState(requests.results);
-    const [tabValue, setTabValue] = useState(TabContentEnum.PARTICIPANTS);
+    const [tabValue, setTabValue] = useState(TabContentType.PARTICIPANTS);
     const [refresh, setRefresh] = useState(null);
     // CONTEXT
     const scUserContext = useSCUser();
@@ -74,11 +74,11 @@ export default function EventMembersWidget(inProps) {
     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]);
     const title = useMemo(() => {
         switch (tabValue) {
-            case TabContentEnum.REQUESTS:
+            case TabContentType.REQUESTS:
                 return 'ui.eventMembersWidget.requests';
-            case TabContentEnum.INVITED:
+            case TabContentType.INVITED:
                 return 'ui.eventMembersWidget.invited';
-            case TabContentEnum.PARTICIPANTS:
+            case TabContentType.PARTICIPANTS:
             default:
                 return 'ui.eventMembersWidget.participants';
         }
@@ -132,11 +132,11 @@ export default function EventMembersWidget(inProps) {
         let _t;
         if (scUserContext.user && scEvent) {
             _t = setTimeout(() => {
-                if (refresh === TabContentEnum.PARTICIPANTS) {
+                if (refresh === TabContentType.PARTICIPANTS) {
                     _initParticipants();
                     setRefresh(null);
                 }
-                else if (refresh === TabContentEnum.INVITED) {
+                else if (refresh === TabContentType.INVITED) {
                     _initInvited();
                     setRefresh(null);
                 }
@@ -163,10 +163,10 @@ export default function EventMembersWidget(inProps) {
         setTabValue(newTabValue);
     }, [setTabValue]);
     const handleRefresh = useCallback((_tabValue) => {
-        if (_tabValue === TabContentEnum.PARTICIPANTS) {
+        if (_tabValue === TabContentType.PARTICIPANTS) {
             dispatchParticipants({ type: actionWidgetTypes.RESET });
         }
-        else if (_tabValue === TabContentEnum.INVITED) {
+        else if (_tabValue === TabContentType.INVITED) {
             dispatchInvited({ type: actionWidgetTypes.RESET });
         }
         setRefresh(_tabValue);
@@ -177,13 +177,13 @@ export default function EventMembersWidget(inProps) {
     if (!scEvent ||
         !participants.initialized ||
         (scEvent && ((eventId !== undefined && scEvent.id !== eventId) || (event && scEvent.id !== event.id))) ||
-        (tabValue === TabContentEnum.PARTICIPANTS && participants.isLoadingNext && !participants.initialized)) {
+        (tabValue === TabContentType.PARTICIPANTS && participants.isLoadingNext && !participants.initialized)) {
         return _jsx(Skeleton, {});
     }
-    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: {
+    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: TabContentType.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: TabContentType.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: TabContentType.REQUESTS }))] })), _jsx(TabPanel, Object.assign({ value: TabContentType.PARTICIPANTS, className: classes.tabPanel }, { children: _jsx(TabContentComponent, { tabValue: TabContentType.PARTICIPANTS, state: participants, dispatch: dispatchParticipants, userProps: userProps, dialogProps: dialogProps, handleRefresh: handleRefresh }) })), hasAllow && (_jsx(TabPanel, Object.assign({ value: TabContentType.INVITED, className: classes.tabPanel }, { children: _jsx(TabContentComponent, { tabValue: TabContentType.INVITED, state: invited, dispatch: dispatchInvited, userProps: userProps, dialogProps: dialogProps, actionProps: {
                                     scEvent,
                                     setCount: setInvitedCount
-                                }, handleRefresh: handleRefresh }) }))), hasAllow && (_jsx(TabPanel, Object.assign({ value: TabContentEnum.REQUESTS, className: classes.tabPanel }, { children: _jsx(TabContentComponent, { tabValue: TabContentEnum.REQUESTS, state: requests, dispatch: dispatchRequests, userProps: userProps, dialogProps: dialogProps, actionProps: {
+                                }, handleRefresh: handleRefresh }) }))), hasAllow && (_jsx(TabPanel, Object.assign({ value: TabContentType.REQUESTS, className: classes.tabPanel }, { children: _jsx(TabContentComponent, { tabValue: TabContentType.REQUESTS, state: requests, dispatch: dispatchRequests, userProps: userProps, dialogProps: dialogProps, actionProps: {
                                     scEvent,
                                     count: requestsCount,
                                     setCount: setRequestsCount,

package/lib/esm/components/EventMembersWidget/TabContentComponent.js

@@ -16,7 +16,7 @@ import EventInviteButton from '../EventInviteButton';
 import InviteUserEventButton from '../InviteUserEventButton';
 import User, { UserSkeleton } from '../User';
 import { PREFIX } from './constants';
-import { TabContentEnum } from './types';
+import { TabContentType } from './types';
 const classes = {
     actionButton: `${PREFIX}-action-button`,
     eventButton: `${PREFIX}-event-button`,
@@ -40,7 +40,7 @@ export default function TabContentComponent(props) {
     // HOOKS
     const { enqueueSnackbar } = useSnackbar();
     // CONSTS
-    const users = useMemo(() => (tabValue === TabContentEnum.REQUESTS ? actionProps === null || actionProps === void 0 ? void 0 : actionProps.users : state.results), [tabValue, actionProps === null || actionProps === void 0 ? void 0 : actionProps.users, state.results]);
+    const users = useMemo(() => (tabValue === TabContentType.REQUESTS ? actionProps === null || actionProps === void 0 ? void 0 : actionProps.users : state.results), [tabValue, actionProps === null || actionProps === void 0 ? void 0 : actionProps.users, state.results]);
     // EFFECTS
     useEffect(() => {
         updatesInvited.current = PubSub.subscribe(`${SCTopicType.EVENT}.${SCGroupEventType.INVITE_MEMBER}`, handleInviteMember);
@@ -77,13 +77,13 @@ export default function TabContentComponent(props) {
         setOpenDialog((prev) => !prev);
     }, [setOpenDialog]);
     const handleToggleMember = useCallback(() => {
-        handleRefresh === null || handleRefresh === void 0 ? void 0 : handleRefresh(TabContentEnum.PARTICIPANTS);
+        handleRefresh === null || handleRefresh === void 0 ? void 0 : handleRefresh(TabContentType.PARTICIPANTS);
     }, [handleRefresh]);
     const handleInviteMember = useCallback(() => {
-        handleRefresh === null || handleRefresh === void 0 ? void 0 : handleRefresh(TabContentEnum.INVITED);
+        handleRefresh === null || handleRefresh === void 0 ? void 0 : handleRefresh(TabContentType.INVITED);
     }, [handleRefresh]);
     const getActionsComponent = useCallback((userId) => {
-        if (tabValue === TabContentEnum.INVITED && actionProps) {
+        if (tabValue === TabContentType.INVITED && actionProps) {
             const _handleInvitations = (invited) => {
                 var _a, _b;
                 if (invited) {
@@ -95,7 +95,7 @@ export default function TabContentComponent(props) {
             };
             return _jsx(InviteUserEventButton, { event: actionProps.scEvent, userId: userId, handleInvitations: _handleInvitations });
         }
-        else if (tabValue === TabContentEnum.REQUESTS && actionProps) {
+        else if (tabValue === TabContentType.REQUESTS && actionProps) {
             const handleConfirm = (id) => {
                 if (id) {
                     actionProps.setCount((prev) => prev - 1);
@@ -116,10 +116,10 @@ export default function TabContentComponent(props) {
         }
         return undefined;
     }, [tabValue, actionProps]);
-    if (tabValue === TabContentEnum.PARTICIPANTS && (actionProps === null || actionProps === void 0 ? void 0 : actionProps.count) === 0) {
+    if (tabValue === TabContentType.PARTICIPANTS && (actionProps === null || actionProps === void 0 ? void 0 : actionProps.count) === 0) {
         return (_jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.eventMembersWidget.noParticipants", defaultMessage: "ui.eventMembersWidget.noParticipants" }) })));
     }
-    else if (tabValue === TabContentEnum.INVITED && state.count === 0 && actionProps) {
+    else if (tabValue === TabContentType.INVITED && state.count === 0 && actionProps) {
         const date = actionProps.scEvent.end_date || actionProps.scEvent.start_date;
         const disabled = new Date(date).getTime() < new Date().getTime();
         const handleInvitations = (invited) => {
@@ -129,8 +129,8 @@ export default function TabContentComponent(props) {
         };
         return (_jsx(EventInviteButton, { event: actionProps.scEvent, className: classes.eventButton, handleInvitations: handleInvitations, disabled: disabled }));
     }
-    else if (tabValue === TabContentEnum.REQUESTS && (actionProps === null || actionProps === void 0 ? void 0 : actionProps.count) === 0) {
+    else if (tabValue === TabContentType.REQUESTS && (actionProps === null || actionProps === void 0 ? void 0 : actionProps.count) === 0) {
         return (_jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.eventMembersWidget.noOtherRequests", defaultMessage: "ui.eventMembersWidget.noOtherRequests" }) })));
     }
-    return (_jsxs(_Fragment, { children: [_jsx(List, { children: users === null || users === void 0 ? void 0 : users.slice(0, state.visibleItems).map((user) => (_jsx(ListItem, { children: _jsx(User, Object.assign({ elevation: 0, user: user }, userProps, { actions: getActionsComponent(user.id) })) }, user.id))) }), state.count > state.visibleItems && (_jsx(Button, Object.assign({ onClick: handleToggleDialogOpen, className: classes.actionButton }, { children: _jsx(Typography, Object.assign({ variant: "caption" }, { children: _jsx(FormattedMessage, { id: "ui.eventMembersWidget.showAll", defaultMessage: "ui.eventMembersWidget.showAll" }) })) }))), _jsx(DialogRoot, Object.assign({ className: classes.dialogRoot, title: _jsx(FormattedMessage, { defaultMessage: "ui.eventMembersWidget.title", id: "ui.eventMembersWidget.title" }), onClose: handleToggleDialogOpen, open: openDialog }, dialogProps, { children: _jsx(InfiniteScroll, Object.assign({ dataLength: state.results.length, next: handleNext, hasMoreNext: Boolean(state.next), loaderNext: _jsx(UserSkeleton, Object.assign({ elevation: 0 }, userProps)), className: classes.infiniteScroll, endMessage: _jsx(Typography, Object.assign({ className: classes.endMessage }, { children: _jsx(FormattedMessage, { id: "ui.eventMembersWidget.noMoreResults", defaultMessage: "ui.eventMembersWidget.noMoreResults" }) })) }, { children: _jsx(List, { children: state.results.map((user) => (_jsx(ListItem, { children: _jsx(User, Object.assign({ elevation: 0, user: user }, userProps)) }, user.id))) }) })) }))] }));
+    return (_jsxs(_Fragment, { children: [_jsx(List, { children: users === null || users === void 0 ? void 0 : users.slice(0, state.visibleItems).map((user) => (_jsx(ListItem, { children: _jsx(User, Object.assign({ elevation: 0, user: user }, userProps, { actions: getActionsComponent(user.id) })) }, user.id))) }), state.count > state.visibleItems && (_jsx(Button, Object.assign({ onClick: handleToggleDialogOpen, className: classes.actionButton }, { children: _jsx(Typography, Object.assign({ variant: "caption" }, { children: _jsx(FormattedMessage, { id: "ui.eventMembersWidget.showAll", defaultMessage: "ui.eventMembersWidget.showAll" }) })) }))), openDialog && (_jsx(DialogRoot, Object.assign({ className: classes.dialogRoot, title: _jsx(FormattedMessage, { defaultMessage: "ui.eventMembersWidget.title", id: "ui.eventMembersWidget.title" }), onClose: handleToggleDialogOpen, open: true }, dialogProps, { children: _jsx(InfiniteScroll, Object.assign({ dataLength: state.results.length, next: handleNext, hasMoreNext: Boolean(state.next), loaderNext: _jsx(UserSkeleton, Object.assign({ elevation: 0 }, userProps)), className: classes.infiniteScroll, endMessage: _jsx(Typography, Object.assign({ className: classes.endMessage }, { children: _jsx(FormattedMessage, { id: "ui.eventMembersWidget.noMoreResults", defaultMessage: "ui.eventMembersWidget.noMoreResults" }) })) }, { children: _jsx(List, { children: state.results.map((user) => (_jsx(ListItem, { children: _jsx(User, Object.assign({ elevation: 0, user: user }, userProps)) }, user.id))) }) })) })))] }));
 }