@selfcommunity/react-ui 0.10.2-alpha.8 → 0.10.2-courses.100

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

@@ -4,19 +4,28 @@ import { Autocomplete, Box, InputAdornment, Tab, Tabs, TextField } from '@mui/ma
 import Icon from '@mui/material/Icon';
 import { styled } from '@mui/material/styles';
 import { useThemeProps } from '@mui/system';
-import { SCEventLocationType } from '@selfcommunity/types';
+import { SCPreferences, useSCPreferences, useSCUser } from '@selfcommunity/react-core';
+import { SCCommunitySubscriptionTier, SCEventLocationType, SCFeatureName } from '@selfcommunity/types';
 import axios from 'axios';
 import classNames from 'classnames';
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
-import HiddenPlaceholder from '../../shared/HiddenPlaceholder';
 import UrlTextField from '../../shared/UrlTextField';
 import { PREFIX } from './constants';
+import LiveStream from '../LiveStream';
+import LiveStreamFormSettings from '../LiveStreamForm/LiveStreamFormSettings';
+import { SCLiveStreamTemplateType } from '../../types/liveStream';
+import { LIVESTREAM_DEFAULT_SETTINGS } from '../LiveStreamForm/constants';
+import { getNewDate } from './utils';
 import { useSCGoogleApiLoader } from '@selfcommunity/react-core';
 const messages = defineMessages({
     virtualPlaceholder: {
         id: 'ui.eventForm.address.online.placeholder',
         defaultMessage: 'ui.eventForm.address.online.placeholder'
+    },
+    name: {
+        id: 'ui.eventForm.name.placeholder',
+        defaultMessage: 'ui.eventForm.name.placeholder'
     }
 });
 const classes = {
@@ -30,6 +39,7 @@ const Root = styled(Box, {
     slot: 'EventAddressRoot'
 })(() => ({}));
 export default function EventAddress(inProps) {
+    var _a;
     //PROPS
     const props = useThemeProps({
         props: inProps,
@@ -38,18 +48,49 @@ export default function EventAddress(inProps) {
     // INTL
     const intl = useIntl();
     // PROPS
-    const { className, forwardGeolocationData, event } = props;
+    const { className, locations = [SCEventLocationType.PERSON, SCEventLocationType.ONLINE, SCEventLocationType.LIVESTREAM], event, forwardGeolocationData, forwardLivestreamSettingsData } = props;
     // STATE
-    const [location, setLocation] = useState((event === null || event === void 0 ? void 0 : event.location) || SCEventLocationType.PERSON);
+    const [location, setLocation] = useState((event === null || event === void 0 ? void 0 : event.location) || locations[0]);
     const [geolocation, setGeoLocation] = useState(event ? { description: event.geolocation } : null);
     const [inputValue, setInputValue] = useState('');
     const [suggestions, setSuggestions] = useState([]);
     const [timeoutId, setTimeoutId] = useState(null);
+    const liveStream = useMemo(() => {
+        return (event.live_stream ||
+            {
+                title: (event === null || event === void 0 ? void 0 : event.name) || `${intl.formatMessage(messages.name)}`,
+                created_at: (event === null || event === void 0 ? void 0 : event.start_date) || getNewDate(),
+                settings: LIVESTREAM_DEFAULT_SETTINGS
+            });
+    }, [event]);
+    // CONTEXT
+    const scUserContext = useSCUser();
+    const { preferences, features } = useSCPreferences();
+    const isFreeTrialTier = useMemo(() => preferences &&
+        SCPreferences.CONFIGURATIONS_SUBSCRIPTION_TIER in preferences &&
+        preferences[SCPreferences.CONFIGURATIONS_SUBSCRIPTION_TIER].value &&
+        preferences[SCPreferences.CONFIGURATIONS_SUBSCRIPTION_TIER].value === SCCommunitySubscriptionTier.FREE_TRIAL, [preferences]);
+    const liveStreamEnabled = useMemo(() => preferences &&
+        features &&
+        features.includes(SCFeatureName.LIVE_STREAM) &&
+        SCPreferences.CONFIGURATIONS_LIVE_STREAM_ENABLED in preferences &&
+        preferences[SCPreferences.CONFIGURATIONS_LIVE_STREAM_ENABLED].value, [preferences, features]);
+    const isInPersonTabActive = useMemo(() => locations.includes(SCEventLocationType.PERSON) || event.location === SCEventLocationType.PERSON, [locations, event]);
+    const isOnlineTabActive = useMemo(() => locations.includes(SCEventLocationType.ONLINE) || event.location === SCEventLocationType.ONLINE, [locations, event]);
+    const isLiveTabActive = useMemo(() => {
+        var _a, _b;
+        return (liveStreamEnabled &&
+            locations.includes(SCEventLocationType.LIVESTREAM) &&
+            !isFreeTrialTier /* || (isFreeTrialTier && scUserContext?.user && scUserContext?.user.id === 1)*/ &&
+            ((_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)) ||
+            (event.live_stream && event.live_stream.created_at);
+    }, [liveStreamEnabled, (_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission, event]);
     // HOOKS
     const { isLoaded, geocodingApiKey } = useSCGoogleApiLoader();
     // HANDLERS
     const handleChange = (_event, newValue) => {
         setLocation(newValue);
+        forwardGeolocationData({ location: newValue });
     };
     const handleSelection = (_event, newValue) => __awaiter(this, void 0, void 0, function* () {
         if (newValue) {
@@ -80,6 +121,9 @@ export default function EventAddress(inProps) {
     const handleLinkChange = (event) => {
         forwardGeolocationData({ location, link: event.target.value });
     };
+    const handleLiveStreamSettingsChange = (settings) => {
+        forwardLivestreamSettingsData(settings);
+    };
     useEffect(() => {
         if (timeoutId) {
             clearTimeout(timeoutId);
@@ -104,9 +148,12 @@ export default function EventAddress(inProps) {
         }
     }, [inputValue]);
     if (!geocodingApiKey && !isLoaded) {
-        return _jsx(HiddenPlaceholder, {});
+        return null;
+    }
+    if (!isInPersonTabActive && !isOnlineTabActive && !isLiveTabActive) {
+        return null;
     }
-    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, { children: [_jsxs(Tabs, Object.assign({ className: classes.tabs, value: location, onChange: handleChange, indicatorColor: "secondary", textColor: "secondary", variant: "fullWidth" }, { children: [_jsx(Tab, { value: SCEventLocationType.PERSON, classes: { root: classes.tab }, icon: _jsx(Icon, { children: "add_location_alt" }), iconPosition: "start", label: _jsx(FormattedMessage, { id: "ui.eventForm.address.live.label", defaultMessage: "ui.eventForm.address.live.label" }) }), _jsx(Tab, { value: SCEventLocationType.ONLINE, classes: { root: classes.tab }, icon: _jsx(Icon, { children: "play_circle_outline" }), iconPosition: "start", label: _jsx(FormattedMessage, { id: "ui.eventForm.address.online.label", defaultMessage: "ui.eventForm.address.online.label" }) })] })), _jsxs(Box, Object.assign({ className: classes.tabContent }, { children: [location === SCEventLocationType.PERSON && (_jsx(Autocomplete, { disabled: !geocodingApiKey, size: "small", value: geolocation, onChange: handleSelection, inputValue: inputValue, onInputChange: handleLocationChange, options: suggestions, getOptionLabel: (option) => option.description || geolocation.description, noOptionsText: _jsx(FormattedMessage, { id: "ui.eventForm.address.live.noResults", defaultMessage: "ui.eventForm.address.live.noResults" }), isOptionEqualToValue: (option, value) => option.description === value.description, renderInput: (params) => (_jsx(TextField, Object.assign({}, params, { label: _jsx(FormattedMessage, { id: "ui.eventForm.address.live.placeholder", defaultMessage: "ui.eventForm.address.live.placeholder" }), variant: "outlined", fullWidth: true, InputProps: Object.assign(Object.assign({}, params.InputProps), { endAdornment: (_jsxs(_Fragment, { children: [_jsx(InputAdornment, Object.assign({ position: "start" }, { children: _jsx(Icon, { children: "add_location_alt" }) })), params.InputProps.endAdornment] })) }) }))) })), location === SCEventLocationType.ONLINE && (_jsx(UrlTextField, { size: "small", fullWidth: true, type: "url", placeholder: `${intl.formatMessage(messages.virtualPlaceholder)}`, helperText: _jsx(FormattedMessage, { id: "ui.eventForm.address.online.help", defaultMessage: "ui.eventForm.address.online.help" }), InputProps: {
+    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, { children: [_jsxs(Tabs, Object.assign({ className: classes.tabs, value: location, onChange: handleChange, indicatorColor: "secondary", textColor: "secondary", variant: "fullWidth" }, { children: [isInPersonTabActive && (_jsx(Tab, { value: SCEventLocationType.PERSON, classes: { root: classes.tab }, icon: _jsx(Icon, { children: "add_location_alt" }), iconPosition: "start", label: _jsx(FormattedMessage, { id: "ui.eventForm.address.live.label", defaultMessage: "ui.eventForm.address.live.label" }) })), isOnlineTabActive && (_jsx(Tab, { value: SCEventLocationType.ONLINE, classes: { root: classes.tab }, icon: _jsx(Icon, { children: "play_circle_outline" }), iconPosition: "start", label: _jsx(FormattedMessage, { id: "ui.eventForm.address.online.label", defaultMessage: "ui.eventForm.address.online.label" }) })), isLiveTabActive && (_jsx(Tab, { value: SCEventLocationType.LIVESTREAM, classes: { root: classes.tab }, icon: _jsx(Icon, { children: "photo_camera" }), iconPosition: "start", label: _jsx(FormattedMessage, { id: "ui.eventForm.address.liveStream.label", defaultMessage: "ui.eventForm.address.liveStream.label" }) }))] })), _jsxs(Box, Object.assign({ className: classes.tabContent }, { children: [isInPersonTabActive && location === SCEventLocationType.PERSON && (_jsx(Autocomplete, { disabled: !geocodingApiKey, size: "small", value: geolocation, onChange: handleSelection, inputValue: inputValue, onInputChange: handleLocationChange, options: suggestions, getOptionLabel: (option) => option.description || geolocation.description, noOptionsText: _jsx(FormattedMessage, { id: "ui.eventForm.address.live.noResults", defaultMessage: "ui.eventForm.address.live.noResults" }), isOptionEqualToValue: (option, value) => option.description === value.description, renderInput: (params) => (_jsx(TextField, Object.assign({}, params, { label: _jsx(FormattedMessage, { id: "ui.eventForm.address.live.placeholder", defaultMessage: "ui.eventForm.address.live.placeholder" }), variant: "outlined", fullWidth: true, InputProps: Object.assign(Object.assign({}, params.InputProps), { endAdornment: (_jsxs(_Fragment, { children: [_jsx(InputAdornment, Object.assign({ position: "start" }, { children: _jsx(Icon, { children: "add_location_alt" }) })), params.InputProps.endAdornment] })) }) }))) })), isOnlineTabActive && location === SCEventLocationType.ONLINE && (_jsx(UrlTextField, { size: "small", fullWidth: true, type: "url", placeholder: `${intl.formatMessage(messages.virtualPlaceholder)}`, helperText: _jsx(FormattedMessage, { id: "ui.eventForm.address.online.help", defaultMessage: "ui.eventForm.address.online.help" }), InputProps: {
                             endAdornment: _jsx(Icon, { children: "play_circle_outline" })
-                        }, onChange: handleLinkChange }))] }))] })));
+                        }, onChange: handleLinkChange })), isLiveTabActive && location === SCEventLocationType.LIVESTREAM && (_jsxs(_Fragment, { children: [_jsx(LiveStream, { template: SCLiveStreamTemplateType.SNIPPET, liveStream: liveStream, actions: _jsx(_Fragment, {}) }), _jsx(LiveStreamFormSettings, { settings: liveStream.settings || LIVESTREAM_DEFAULT_SETTINGS, onChange: handleLiveStreamSettingsChange })] }))] }))] })));
 }

package/lib/esm/components/EventForm/EventForm.d.ts

@@ -1,5 +1,6 @@
 import { BoxProps } from '@mui/material';
-import { SCEventType } from '@selfcommunity/types';
+import { SCEventLocationType, SCEventType } from '@selfcommunity/types';
+import { EventAddressProps } from './EventAddress';
 export interface EventFormProps extends BoxProps {
     /**
      * Overrides or extends the styles applied to the component.
@@ -11,6 +12,11 @@ export interface EventFormProps extends BoxProps {
      * @default null
      */
     event?: SCEventType;
+    /**
+     * Initial location
+     * @default SCEventLocationType.PERSON
+     */
+    presetLocation?: SCEventLocationType;
     /**
      * On success callback function
      * @default null
@@ -21,6 +27,11 @@ export interface EventFormProps extends BoxProps {
      * @default null
      */
     onError?: (error: any) => void;
+    /**
+     * Props to spread to EventAddress component
+     * @default empty object
+     */
+    EventAddressComponentProps?: Pick<EventAddressProps, 'locations'>;
     /**
      * Any other properties
      */

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

@@ -1,14 +1,14 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { LoadingButton } from '@mui/lab';
-import { Box, FormControl, FormGroup, Icon, IconButton, InputAdornment, InputLabel, MenuItem, Paper, Select, Stack, Switch, TextField, Typography } from '@mui/material';
+import { Alert, Box, FormControl, FormGroup, Icon, IconButton, InputAdornment, InputLabel, MenuItem, Paper, Select, Stack, Switch, TextField, Typography } from '@mui/material';
 import { styled } from '@mui/material/styles';
 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 { SCEventLocationType, SCEventPrivacyType, SCEventRecurrenceType } from '@selfcommunity/types';
+import { SCEventLocationType, SCEventPrivacyType, SCEventRecurrenceType, SCFeatureName } from '@selfcommunity/types';
 import { Logger } from '@selfcommunity/utils';
 import classNames from 'classnames';
 import enLocale from 'date-fns/locale/en-US';
@@ -23,6 +23,8 @@ import { DAILY_LATER_DAYS, MONTHLY_LATER_DAYS, NEVER_LATER_DAYS, PREFIX, WEEKLY_
 import EventAddress from './EventAddress';
 import UploadEventCover from './UploadEventCover';
 import { combineDateAndTime, getLaterDaysDate, getLaterHoursDate, getNewDate } from './utils';
+import { LIVESTREAM_DEFAULT_SETTINGS } from '../LiveStreamForm/constants';
+import CoverPlaceholder from '../../assets/deafultCover';
 const messages = defineMessages({
     name: {
         id: 'ui.eventForm.name.placeholder',
@@ -55,6 +57,10 @@ const messages = defineMessages({
     endTime: {
         id: 'ui.eventForm.time.end.placeholder',
         defaultMessage: 'ui.eventForm.time.end.placeholder'
+    },
+    pickerCancelAction: {
+        id: 'ui.eventForm.time.picker.cancel.placeholder',
+        defaultMessage: 'ui.eventForm.time.picker.cancel.placeholder'
     }
 });
 const classes = {
@@ -74,7 +80,8 @@ const classes = {
     actions: `${PREFIX}-actions`,
     privacySection: `${PREFIX}-privacy-section`,
     privacySectionInfo: `${PREFIX}-privacy-section-info`,
-    error: `${PREFIX}-error`
+    error: `${PREFIX}-error`,
+    genericError: `${PREFIX}-generic-error`
 };
 const Root = styled(Box, {
     name: PREFIX,
@@ -112,13 +119,13 @@ const Root = styled(Box, {
  * @param inProps
  */
 export default function EventForm(inProps) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e;
     //PROPS
     const props = useThemeProps({
         props: inProps,
         name: PREFIX
     });
-    const { className, onSuccess, onError, event = null } = props, rest = __rest(props, ["className", "onSuccess", "onError", "event"]);
+    const { className, onSuccess, onError, event, presetLocation, EventAddressComponentProps = {} } = props, rest = __rest(props, ["className", "onSuccess", "onError", "event", "presetLocation", "EventAddressComponentProps"]);
     // CONTEXT
     const scContext = useSCContext();
     // INTL
@@ -126,35 +133,50 @@ export default function EventForm(inProps) {
     const startDateTime = useMemo(() => getNewDate(event === null || event === void 0 ? void 0 : event.start_date), [event]);
     const endDateTime = useMemo(() => getNewDate(event === null || event === void 0 ? void 0 : event.end_date), [event]);
     const initialFieldState = {
+        name: (event === null || event === void 0 ? void 0 : event.name) || '',
+        description: event ? event.description : '',
         imageOriginal: (event === null || event === void 0 ? void 0 : event.image_bigger) || '',
         imageOriginalFile: '',
         startDate: event ? startDateTime : getNewDate(),
         startTime: event ? startDateTime : getLaterHoursDate(1),
         endDate: (event === null || event === void 0 ? void 0 : event.end_date) ? endDateTime : getNewDate(),
         endTime: (event === null || event === void 0 ? void 0 : event.end_date) ? endDateTime : getLaterHoursDate(3),
-        location: (event === null || event === void 0 ? void 0 : event.location) || SCEventLocationType.PERSON,
+        location: (event === null || event === void 0 ? void 0 : event.location)
+            ? event.location === SCEventLocationType.ONLINE && event.live_stream
+                ? SCEventLocationType.LIVESTREAM
+                : SCEventLocationType.ONLINE
+            : ((_a = EventAddressComponentProps.locations) === null || _a === void 0 ? void 0 : _a.length)
+                ? presetLocation in EventAddressComponentProps.locations
+                    ? presetLocation
+                    : EventAddressComponentProps.locations[0]
+                : SCEventLocationType.PERSON,
         geolocation: (event === null || event === void 0 ? void 0 : event.geolocation) || '',
         lat: (event === null || event === void 0 ? void 0 : event.geolocation_lat) || null,
         lng: (event === null || event === void 0 ? void 0 : event.geolocation_lng) || null,
         link: (event === null || event === void 0 ? void 0 : event.link) || '',
+        liveStreamSettings: (event === null || event === void 0 ? void 0 : event.live_stream) ? event === null || event === void 0 ? void 0 : event.live_stream.settings : null,
         recurring: (event === null || event === void 0 ? void 0 : event.recurring) || SCEventRecurrenceType.NEVER,
-        name: (event === null || event === void 0 ? void 0 : event.name) || '',
-        description: event ? event.description : '',
         isPublic: (event === null || event === void 0 ? void 0 : event.privacy) === SCEventPrivacyType.PUBLIC || true,
         isSubmitting: false
     };
     // STATE
     const [field, setField] = useState(initialFieldState);
     const [error, setError] = useState({});
+    const [genericError, setGenericError] = useState(null);
     // PREFERENCES
     const scPreferences = useSCPreferences();
+    const liveStreamEnabled = useMemo(() => scPreferences.preferences &&
+        scPreferences.features &&
+        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 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]);
     const disablePastEndTime = useMemo(() => field.endDate.getDate() === getNewDate().getDate(), [field]);
     const _backgroundCover = Object.assign({}, (field.imageOriginal
         ? { background: `url('${field.imageOriginal}') center / cover` }
-        : { background: `url('${scPreferences.preferences[SCPreferences.IMAGES_USER_DEFAULT_COVER].value}') center / cover` }));
+        : { background: `url('${CoverPlaceholder}') no-repeat 0 0 / 100% 100%` }));
     const handleChangeCover = useCallback((cover) => {
         setField((prev) => (Object.assign(Object.assign({}, prev), { ['imageOriginalFile']: cover })));
         const reader = new FileReader();
@@ -166,6 +188,7 @@ export default function EventForm(inProps) {
             delete error.imageOriginalError;
             setError(error);
         }
+        setGenericError(null);
     }, [error]);
     /**
      * Notify when a group info changed
@@ -183,9 +206,14 @@ export default function EventForm(inProps) {
     }, [event]);
     const handleGeoData = useCallback((data) => {
         setField((prev) => (Object.assign(Object.assign({}, prev), data)));
+        setGenericError(null);
+    }, []);
+    const handleLiveStreamSettingsData = useCallback((data) => {
+        setField((prev) => (Object.assign(Object.assign({}, prev), { liveStreamSettings: Object.assign(Object.assign({}, prev.liveStreamSettings), data) })));
     }, []);
     const handleSubmit = useCallback(() => {
         setField((prev) => (Object.assign(Object.assign({}, prev), { ['isSubmitting']: true })));
+        setGenericError(null);
         const formData = new FormData();
         if (field.imageOriginalFile) {
             formData.append('image_original', field.imageOriginalFile);
@@ -194,14 +222,21 @@ export default function EventForm(inProps) {
         formData.append('start_date', combineDateAndTime(field.startDate, field.startTime));
         formData.append('recurring', field.recurring);
         formData.append('end_date', combineDateAndTime(field.endDate, field.endTime));
-        formData.append('location', field.location);
+        formData.append('location', field.location === SCEventLocationType.PERSON ? SCEventLocationType.PERSON : SCEventLocationType.ONLINE);
         if (field.location === SCEventLocationType.ONLINE) {
             formData.append('link', field.link);
+            formData.append('live_stream_settings', null);
+        }
+        else if (field.location === SCEventLocationType.LIVESTREAM) {
+            formData.append('link', '');
+            formData.append('live_stream_settings', JSON.stringify(Object.assign(Object.assign({}, LIVESTREAM_DEFAULT_SETTINGS), field.liveStreamSettings)));
         }
         else if (field.location === SCEventLocationType.PERSON) {
             formData.append('geolocation', field.geolocation);
             formData.append('geolocation_lat', field.lat.toString());
             formData.append('geolocation_lng', field.lng.toString());
+            formData.append('link', '');
+            formData.append('live_stream_settings', null);
         }
         if (privateEnabled) {
             formData.append('privacy', field.isPublic ? SCEventPrivacyType.PUBLIC : SCEventPrivacyType.PRIVATE);
@@ -225,12 +260,29 @@ export default function EventForm(inProps) {
         })
             .catch((e) => {
             const _error = formatHttpErrorCode(e);
-            if (Object.values(_error)[0]['error'] === 'unique') {
-                setError(Object.assign(Object.assign({}, error), { ['nameError']: _jsx(FormattedMessage, { id: "ui.eventForm.name.error.unique", defaultMessage: "ui.eventForm.name.error.unique" }) }));
+            if (!Object.keys(_error).length) {
+                setGenericError(intl.formatMessage({
+                    id: 'ui.eventForm.genericError',
+                    defaultMessage: 'ui.eventForm.genericError'
+                }));
+            }
+            else if ('codeError' in _error) {
+                setGenericError(intl.formatMessage({
+                    id: 'ui.eventForm.liveStream.error.monthlyMinuteLimitReached',
+                    defaultMessage: 'ui.eventForm.liveStream.error.monthlyMinuteLimitReached'
+                }));
             }
             else {
-                setError(Object.assign(Object.assign({}, error), _error));
+                setGenericError(null);
+            }
+            let __errors = {};
+            if ('coverError' in _error) {
+                __errors = Object.assign(Object.assign({}, __errors), { ['coverError']: _jsx(FormattedMessage, { id: "ui.ui.eventForm.cover.error", defaultMessage: "ui.ui.eventForm.cover.error" }) });
+            }
+            if ('nameError' in _error || ('nonFieldErrorsError' in _error && _error['nonFieldErrorsError'].error === 'unique')) {
+                __errors = Object.assign(Object.assign({}, __errors), { ['nameError']: _jsx(FormattedMessage, { id: "ui.eventForm.name.error.unique", defaultMessage: "ui.eventForm.name.error.unique" }) });
             }
+            setError(__errors);
             setField((prev) => (Object.assign(Object.assign({}, prev), { ['isSubmitting']: false })));
             Logger.error(SCOPE_SC_UI, e);
             onError === null || onError === void 0 ? void 0 : onError(e);
@@ -243,7 +295,8 @@ export default function EventForm(inProps) {
             delete error[`${name}Error`];
             setError(error);
         }
-    }, [setField, error]);
+        setGenericError(null);
+    }, [error, setField, setGenericError]);
     const handleChangeDateTime = useCallback((value, name) => {
         setField((prev) => (Object.assign(Object.assign({}, prev), { [name]: value })));
         if (error[`${name}Error`]) {
@@ -254,7 +307,8 @@ export default function EventForm(inProps) {
             delete error['endDateError'];
             setError(error);
         }
-    }, [setField, error]);
+        setGenericError(null);
+    }, [error, setField, setGenericError]);
     const shouldDisableDate = useCallback((date) => {
         let disabled = false;
         switch (field.recurring) {
@@ -277,9 +331,11 @@ export default function EventForm(inProps) {
     /**
      * Renders root object
      */
-    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: [_jsx(Paper, Object.assign({ style: _backgroundCover, classes: { root: classes.cover } }, { children: _jsx(UploadEventCover, { isCreationMode: true, onChange: handleChangeCover }) })), _jsxs(FormGroup, Object.assign({ className: classes.form }, { children: [_jsx(TextField, { required: true, className: classes.name, placeholder: `${intl.formatMessage(messages.name)}`, margin: "normal", value: field.name, name: "name", onChange: handleChange, InputProps: {
+    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: [_jsx(Paper, Object.assign({ style: _backgroundCover, classes: { root: classes.cover } }, { children: _jsx(UploadEventCover, { isCreationMode: true, onChange: handleChangeCover }) })), Boolean(error['coverError']) && _jsx(Typography, Object.assign({ color: "error" }, { children: error['coverError'] })), _jsxs(FormGroup, Object.assign({ className: classes.form }, { children: [_jsx(TextField, { required: true, className: classes.name, placeholder: `${intl.formatMessage(messages.name)}`, margin: "normal", value: field.name, name: "name", onChange: handleChange, InputProps: {
                             endAdornment: _jsx(Typography, Object.assign({ variant: "body2" }, { children: EVENT_TITLE_MAX_LENGTH - field.name.length }))
-                        }, error: Boolean(field.name.length > EVENT_TITLE_MAX_LENGTH) || Boolean(error['nameError']), helperText: field.name.length > EVENT_TITLE_MAX_LENGTH ? (_jsx(FormattedMessage, { id: "ui.eventForm.name.error.maxLength", defaultMessage: "ui.eventForm.name.error.maxLength" })) : error['nameError'] ? (error['nameError']) : null }), _jsx(Box, Object.assign({ className: classes.dateTime }, { children: _jsxs(LocalizationProvider, Object.assign({ dateAdapter: AdapterDateFns, adapterLocale: scContext.settings.locale.default === 'it' ? itLocale : enLocale }, { children: [_jsx(MobileDatePicker, { className: classes.picker, disablePast: true, label: field.startDate && _jsx(FormattedMessage, { id: "ui.eventForm.date.placeholder", defaultMessage: "ui.eventForm.date.placeholder" }), value: field.startDate, slots: {
+                        }, error: Boolean(field.name.length > EVENT_TITLE_MAX_LENGTH) || Boolean(error['nameError']), helperText: field.name.length > EVENT_TITLE_MAX_LENGTH ? (_jsx(FormattedMessage, { id: "ui.eventForm.name.error.maxLength", defaultMessage: "ui.eventForm.name.error.maxLength" })) : error['nameError'] ? (error['nameError']) : null }), _jsx(Box, Object.assign({ className: classes.dateTime }, { children: _jsxs(LocalizationProvider, Object.assign({ dateAdapter: AdapterDateFns, adapterLocale: scContext.settings.locale.default === 'it' ? itLocale : enLocale, localeText: {
+                                cancelButtonLabel: `${intl.formatMessage(messages.pickerCancelAction)}`
+                            } }, { children: [_jsx(MobileDatePicker, { className: classes.picker, disablePast: true, label: field.startDate && _jsx(FormattedMessage, { id: "ui.eventForm.date.placeholder", defaultMessage: "ui.eventForm.date.placeholder" }), value: field.startDate, slots: {
                                         textField: (params) => (_jsx(TextField, Object.assign({}, params, { InputProps: Object.assign(Object.assign({}, params.InputProps), { placeholder: `${intl.formatMessage(messages.startDate)}`, startAdornment: (_jsx(InputAdornment, Object.assign({ position: "start" }, { children: _jsx(IconButton, { children: _jsx(Icon, { children: "CalendarIcon" }) }) }))) }) })))
                                     }, slotProps: {
                                         toolbar: {
@@ -300,7 +356,9 @@ export default function EventForm(inProps) {
                                         return _jsx("em", { children: `${intl.formatMessage(messages.frequencyPlaceholder)}` });
                                     }
                                     return (_jsx(FormattedMessage, { id: `ui.eventForm.frequency.${selected}.placeholder`, defaultMessage: `ui.eventForm.frequency.${selected}.placeholder` }));
-                                }, startAdornment: _jsx(InputAdornment, Object.assign({ position: "start" }, { children: _jsx(IconButton, { children: _jsx(Icon, { children: "frequency" }) }) })) }, { children: Object.values(SCEventRecurrenceType).map((f) => (_jsx(MenuItem, Object.assign({ value: f }, { children: _jsx(FormattedMessage, { id: `ui.eventForm.frequency.${f}.placeholder`, defaultMessage: `ui.eventForm.frequency.${f}.placeholder` }) }), f))) }))] })), _jsx(Box, Object.assign({ className: classes.dateTime }, { children: _jsxs(LocalizationProvider, Object.assign({ dateAdapter: AdapterDateFns, adapterLocale: scContext.settings.locale.default === 'it' ? itLocale : enLocale }, { children: [_jsx(MobileDatePicker, { className: classes.picker, minDate: field.startDate, label: _jsx(FormattedMessage, { id: "ui.eventForm.date.end.placeholder", defaultMessage: "ui.eventForm.date.end.placeholder" }), value: field.endDate, slots: {
+                                }, startAdornment: _jsx(InputAdornment, Object.assign({ position: "start" }, { children: _jsx(IconButton, { children: _jsx(Icon, { children: "frequency" }) }) })) }, { children: Object.values(SCEventRecurrenceType).map((f) => (_jsx(MenuItem, Object.assign({ value: f }, { children: _jsx(FormattedMessage, { id: `ui.eventForm.frequency.${f}.placeholder`, defaultMessage: `ui.eventForm.frequency.${f}.placeholder` }) }), f))) }))] })), _jsx(Box, Object.assign({ className: classes.dateTime }, { children: _jsxs(LocalizationProvider, Object.assign({ dateAdapter: AdapterDateFns, adapterLocale: scContext.settings.locale.default === 'it' ? itLocale : enLocale, localeText: {
+                                cancelButtonLabel: `${intl.formatMessage(messages.pickerCancelAction)}`
+                            } }, { children: [_jsx(MobileDatePicker, { className: classes.picker, minDate: field.startDate, label: _jsx(FormattedMessage, { id: "ui.eventForm.date.end.placeholder", defaultMessage: "ui.eventForm.date.end.placeholder" }), value: field.endDate, slots: {
                                         textField: (params) => (_jsx(TextField, Object.assign({}, params, { InputProps: Object.assign(Object.assign({}, params.InputProps), { placeholder: `${intl.formatMessage(messages.endDate)}`, startAdornment: (_jsx(InputAdornment, Object.assign({ position: "start" }, { children: _jsx(IconButton, { children: _jsx(Icon, { children: "calendar_off" }) }) }))) }) })))
                                     }, slotProps: {
                                         toolbar: {
@@ -319,7 +377,13 @@ export default function EventForm(inProps) {
                                             // @ts-ignore
                                             toolbarTitle: _jsx(FormattedMessage, { id: "ui.eventForm.time.title", defaultMessage: "ui.eventForm.time.title" })
                                         }
-                                    }, onChange: (value) => handleChangeDateTime(value, 'endTime'), shouldDisableTime: shouldDisableTime })] })) })), _jsx(EventAddress, { forwardGeolocationData: handleGeoData, event: event !== null && event !== void 0 ? event : null }), 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: {
+                                    }, onChange: (value) => handleChangeDateTime(value, 'endTime'), shouldDisableTime: shouldDisableTime })] })) })), _jsx(EventAddress, Object.assign({ forwardGeolocationData: handleGeoData, forwardLivestreamSettingsData: handleLiveStreamSettingsData, event: Object.assign(Object.assign({}, event), {
+                            name: field.name,
+                            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 })
+                        }) }, 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
                                         b: (chunks) => _jsx("strong", { children: chunks })
@@ -328,16 +392,18 @@ 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: ((_a = field.description) === null || _a === void 0 ? void 0 : _a.length) ? EVENT_DESCRIPTION_MAX_LENGTH - field.description.length : EVENT_DESCRIPTION_MAX_LENGTH })))
-                        }, error: Boolean(((_b = field.description) === null || _b === void 0 ? void 0 : _b.length) > EVENT_DESCRIPTION_MAX_LENGTH), helperText: ((_c = field.description) === null || _c === void 0 ? void 0 : _c.length) > EVENT_DESCRIPTION_MAX_LENGTH ? (_jsx(FormattedMessage, { id: "ui.eventForm.description.error.maxLength", defaultMessage: "ui.eventForm.description.error.maxLength" })) : null }), _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: ((_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 ||
                                 !field.startDate ||
                                 !field.startTime ||
                                 !field.endDate ||
                                 !field.endTime ||
+                                Boolean(genericError) ||
                                 (field.location === SCEventLocationType.ONLINE && !field.link) ||
                                 (field.location === SCEventLocationType.PERSON && !field.geolocation) ||
                                 (field.recurring !== SCEventRecurrenceType.NEVER && !field.endDate && !field.endTime) ||
-                                Object.keys(error).length !== 0 ||
+                                field.isSubmitting ||
                                 field.name.length > EVENT_TITLE_MAX_LENGTH ||
-                                field.description.length > EVENT_DESCRIPTION_MAX_LENGTH, 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.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" })) })) }))] }))] })));
 }

package/lib/esm/components/EventForm/types.d.ts

@@ -1,4 +1,4 @@
-import { SCEventLocationType, SCEventRecurrenceType } from '@selfcommunity/types';
+import { SCEventLocationType, SCEventRecurrenceType, SCLiveStreamSettingsType } from '@selfcommunity/types';
 export declare type Place = {
     description: string;
     id?: string;
@@ -9,6 +9,7 @@ export declare type Geolocation = {
     lat?: number;
     lng?: number;
     link?: string;
+    liveStreamSettings?: SCLiveStreamSettingsType;
 };
 export declare type InitialFieldState = Geolocation & {
     imageOriginal: string | ArrayBuffer;

package/lib/esm/components/EventFormDialog/EventFormDialog.d.ts

@@ -18,7 +18,7 @@ export interface EventFormDialogProps extends BaseDialogProps {
     onClose?: () => void;
     /**
      * Props to spread to EventForm component
-     * @default {}
+     * @default undefined
      */
     EventFormComponentProps?: EventFormProps;
     /**

package/lib/esm/components/EventFormDialog/EventFormDialog.js

@@ -40,14 +40,14 @@ export default function EventFormDialog(inProps) {
         props: inProps,
         name: PREFIX
     });
-    const { className, open = true, onClose, EventFormComponentProps = {} } = props, rest = __rest(props, ["className", "open", "onClose", "EventFormComponentProps"]);
+    const { className, open = true, onClose, EventFormComponentProps } = props, rest = __rest(props, ["className", "open", "onClose", "EventFormComponentProps"]);
     const handleSuccess = useCallback((event) => {
         var _a;
-        (_a = EventFormComponentProps.onSuccess) === null || _a === void 0 ? void 0 : _a.call(EventFormComponentProps, event);
+        (_a = EventFormComponentProps === null || EventFormComponentProps === void 0 ? void 0 : EventFormComponentProps.onSuccess) === null || _a === void 0 ? void 0 : _a.call(EventFormComponentProps, event);
         onClose === null || onClose === void 0 ? void 0 : onClose();
     }, [onClose, EventFormComponentProps]);
     /**
      * Renders root object
      */
-    return (_jsx(Root, Object.assign({ DialogContentProps: { dividers: false }, title: (EventFormComponentProps === null || EventFormComponentProps === void 0 ? void 0 : EventFormComponentProps.event) ? (_jsx(FormattedMessage, { id: "ui.eventForm.title.edit", defaultMessage: "ui.eventForm.title.edit" })) : (_jsx(FormattedMessage, { id: "ui.eventForm.title", defaultMessage: "ui.eventForm.title" })), open: open, onClose: onClose, className: classNames(classes.root, className) }, rest, { children: _jsx(EventForm, Object.assign({}, EventFormComponentProps, { onSuccess: handleSuccess })) })));
+    return (_jsx(Root, Object.assign({ DialogContentProps: { dividers: false }, title: (EventFormComponentProps === null || EventFormComponentProps === void 0 ? void 0 : EventFormComponentProps.event) ? (_jsx(FormattedMessage, { id: "ui.eventForm.title.edit", defaultMessage: "ui.eventForm.title.edit" })) : (_jsx(FormattedMessage, { id: "ui.eventForm.title", defaultMessage: "ui.eventForm.title" })), open: open, onClose: onClose, className: classNames(classes.root, className) }, rest, { children: _jsx(EventForm, Object.assign({}, (EventFormComponentProps && EventFormComponentProps), { onSuccess: handleSuccess })) })));
 }

package/lib/esm/components/EventInfoWidget/EventInfoWidget.js

@@ -66,7 +66,7 @@ export default function EventInfoWidget(inProps) {
     const handleToggleSummary = useCallback(() => {
         setExpanded(!expanded);
     }, [expanded]);
-    const hasGeolocationOrLink = useMemo(() => Boolean((scEvent === null || scEvent === void 0 ? void 0 : scEvent.geolocation) || (scEvent === null || scEvent === void 0 ? void 0 : scEvent.link)), [scEvent]);
+    const hasGeolocationOrLink = useMemo(() => Boolean((scEvent === null || scEvent === void 0 ? void 0 : scEvent.geolocation) || (scEvent === null || scEvent === void 0 ? void 0 : scEvent.link) || (scEvent === null || scEvent === void 0 ? void 0 : scEvent.live_stream)), [scEvent]);
     const showInfo = useMemo(() => ((scEvent === null || scEvent === void 0 ? void 0 : scEvent.privacy) === SCEventPrivacyType.PUBLIC && hasGeolocationOrLink) ||
         ([SCEventSubscriptionStatusType.SUBSCRIBED, SCEventSubscriptionStatusType.GOING, SCEventSubscriptionStatusType.NOT_GOING].indexOf(scEvent === null || scEvent === void 0 ? void 0 : scEvent.subscription_status) > -1 &&
             hasGeolocationOrLink), [scEvent]);

package/lib/esm/components/EventInviteButton/EventInviteButton.js

@@ -38,13 +38,13 @@ const classes = {
 const Root = styled(Button, {
     name: PREFIX,
     slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({}));
+    overridesResolver: (_props, styles) => styles.root
+})(() => ({}));
 const DialogRoot = styled(BaseDialog, {
     name: PREFIX,
     slot: 'Root',
-    overridesResolver: (props, styles) => styles.dialogRoot
-})(({ theme }) => ({}));
+    overridesResolver: (_props, styles) => styles.dialogRoot
+})(() => ({}));
 /**
  *> API documentation for the Community-JS Event Invite Button component. Learn about the available props and the CSS API.
  *
@@ -194,7 +194,7 @@ export default function EventInviteButton(inProps) {
         });
     };
     // Autocomplete Handlers
-    const handleInputChange = (event, value, reason) => {
+    const handleInputChange = (_event, value, reason) => {
         switch (reason) {
             case 'input':
                 setValue(value);

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

@@ -230,6 +230,9 @@ export default function EventMediaWidget(inProps) {
             handleNext();
         }
     }, [isMobile, openDialog, state.next]);
+    if (!scUserContext.user) {
+        return _jsx(HiddenPlaceholder, {});
+    }
     // RENDER
     if (!scEvent ||
         !state.initialized ||
@@ -242,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" }) })) })) }))), openDialog && (_jsx(DialogRoot, Object.assign({ className: classes.dialogRoot, title: intl.formatMessage(messages.title, { user: scEvent.managed_by.username }), onClose: handleToggleDialogOpen, open: openDialog }, dialogProps, { children: _jsx(InfiniteScroll, Object.assign({ dataLength: medias.length, height: isMobile ? '100%' : '515px', next: handleNext, hasMoreNext: Boolean(state.next), className: classes.dialogInfiniteScroll, endMessage: _jsx(Typography, Object.assign({ className: classes.endMessage }, { children: _jsx(FormattedMessage, { id: "ui.eventMediaWidget.noMoreResults", defaultMessage: "ui.eventMediaWidget.noMoreResults" }) })) }, { children: _jsxs(Box, Object.assign({ className: classes.grid }, { children: [medias.map((media) => (_jsx(Box, Object.assign({ sx: {
+                                }, 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))] })) })) }))), openDialogConfirm && (_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 }))] })));
 }