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

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

@@ -6,19 +6,28 @@ const material_1 = require("@mui/material");
 const Icon_1 = tslib_1.__importDefault(require("@mui/material/Icon"));
 const styles_1 = require("@mui/material/styles");
 const system_1 = require("@mui/system");
+const react_core_1 = require("@selfcommunity/react-core");
 const types_1 = require("@selfcommunity/types");
 const axios_1 = tslib_1.__importDefault(require("axios"));
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const react_1 = require("react");
 const react_intl_1 = require("react-intl");
-const HiddenPlaceholder_1 = tslib_1.__importDefault(require("../../shared/HiddenPlaceholder"));
 const UrlTextField_1 = tslib_1.__importDefault(require("../../shared/UrlTextField"));
 const constants_1 = require("./constants");
-const react_core_1 = require("@selfcommunity/react-core");
+const LiveStream_1 = tslib_1.__importDefault(require("../LiveStream"));
+const LiveStreamFormSettings_1 = tslib_1.__importDefault(require("../LiveStreamForm/LiveStreamFormSettings"));
+const liveStream_1 = require("../../types/liveStream");
+const constants_2 = require("../LiveStreamForm/constants");
+const utils_1 = require("./utils");
+const react_core_2 = require("@selfcommunity/react-core");
 const messages = (0, react_intl_1.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 = {
@@ -32,6 +41,7 @@ const Root = (0, styles_1.styled)(material_1.Box, {
     slot: 'EventAddressRoot'
 })(() => ({}));
 function EventAddress(inProps) {
+    var _a;
     //PROPS
     const props = (0, system_1.useThemeProps)({
         props: inProps,
@@ -40,18 +50,49 @@ function EventAddress(inProps) {
     // INTL
     const intl = (0, react_intl_1.useIntl)();
     // PROPS
-    const { className, forwardGeolocationData, event } = props;
+    const { className, locations = [types_1.SCEventLocationType.PERSON, types_1.SCEventLocationType.ONLINE, types_1.SCEventLocationType.LIVESTREAM], event, forwardGeolocationData, forwardLivestreamSettingsData } = props;
     // STATE
-    const [location, setLocation] = (0, react_1.useState)((event === null || event === void 0 ? void 0 : event.location) || types_1.SCEventLocationType.PERSON);
+    const [location, setLocation] = (0, react_1.useState)((event === null || event === void 0 ? void 0 : event.location) || locations[0]);
     const [geolocation, setGeoLocation] = (0, react_1.useState)(event ? { description: event.geolocation } : null);
     const [inputValue, setInputValue] = (0, react_1.useState)('');
     const [suggestions, setSuggestions] = (0, react_1.useState)([]);
     const [timeoutId, setTimeoutId] = (0, react_1.useState)(null);
+    const liveStream = (0, react_1.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) || (0, utils_1.getNewDate)(),
+                settings: constants_2.LIVESTREAM_DEFAULT_SETTINGS
+            });
+    }, [event]);
+    // CONTEXT
+    const scUserContext = (0, react_core_1.useSCUser)();
+    const { preferences, features } = (0, react_core_1.useSCPreferences)();
+    const isFreeTrialTier = (0, react_1.useMemo)(() => preferences &&
+        react_core_1.SCPreferences.CONFIGURATIONS_SUBSCRIPTION_TIER in preferences &&
+        preferences[react_core_1.SCPreferences.CONFIGURATIONS_SUBSCRIPTION_TIER].value &&
+        preferences[react_core_1.SCPreferences.CONFIGURATIONS_SUBSCRIPTION_TIER].value === types_1.SCCommunitySubscriptionTier.FREE_TRIAL, [preferences]);
+    const liveStreamEnabled = (0, react_1.useMemo)(() => preferences &&
+        features &&
+        features.includes(types_1.SCFeatureName.LIVE_STREAM) &&
+        react_core_1.SCPreferences.CONFIGURATIONS_LIVE_STREAM_ENABLED in preferences &&
+        preferences[react_core_1.SCPreferences.CONFIGURATIONS_LIVE_STREAM_ENABLED].value, [preferences, features]);
+    const isInPersonTabActive = (0, react_1.useMemo)(() => locations.includes(types_1.SCEventLocationType.PERSON) || event.location === types_1.SCEventLocationType.PERSON, [locations, event]);
+    const isOnlineTabActive = (0, react_1.useMemo)(() => locations.includes(types_1.SCEventLocationType.ONLINE) || event.location === types_1.SCEventLocationType.ONLINE, [locations, event]);
+    const isLiveTabActive = (0, react_1.useMemo)(() => {
+        var _a, _b;
+        return (liveStreamEnabled &&
+            locations.includes(types_1.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 } = (0, react_core_1.useSCGoogleApiLoader)();
+    const { isLoaded, geocodingApiKey } = (0, react_core_2.useSCGoogleApiLoader)();
     // HANDLERS
     const handleChange = (_event, newValue) => {
         setLocation(newValue);
+        forwardGeolocationData({ location: newValue });
     };
     const handleSelection = (_event, newValue) => tslib_1.__awaiter(this, void 0, void 0, function* () {
         if (newValue) {
@@ -82,6 +123,9 @@ function EventAddress(inProps) {
     const handleLinkChange = (event) => {
         forwardGeolocationData({ location, link: event.target.value });
     };
+    const handleLiveStreamSettingsChange = (settings) => {
+        forwardLivestreamSettingsData(settings);
+    };
     (0, react_1.useEffect)(() => {
         if (timeoutId) {
             clearTimeout(timeoutId);
@@ -106,10 +150,13 @@ function EventAddress(inProps) {
         }
     }, [inputValue]);
     if (!geocodingApiKey && !isLoaded) {
-        return (0, jsx_runtime_1.jsx)(HiddenPlaceholder_1.default, {});
+        return null;
+    }
+    if (!isInPersonTabActive && !isOnlineTabActive && !isLiveTabActive) {
+        return null;
     }
-    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Tabs, Object.assign({ className: classes.tabs, value: location, onChange: handleChange, indicatorColor: "secondary", textColor: "secondary", variant: "fullWidth" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Tab, { value: types_1.SCEventLocationType.PERSON, classes: { root: classes.tab }, icon: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "add_location_alt" }), iconPosition: "start", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.address.live.label", defaultMessage: "ui.eventForm.address.live.label" }) }), (0, jsx_runtime_1.jsx)(material_1.Tab, { value: types_1.SCEventLocationType.ONLINE, classes: { root: classes.tab }, icon: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "play_circle_outline" }), iconPosition: "start", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.address.online.label", defaultMessage: "ui.eventForm.address.online.label" }) })] })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.tabContent }, { children: [location === types_1.SCEventLocationType.PERSON && ((0, jsx_runtime_1.jsx)(material_1.Autocomplete, { disabled: !geocodingApiKey, size: "small", value: geolocation, onChange: handleSelection, inputValue: inputValue, onInputChange: handleLocationChange, options: suggestions, getOptionLabel: (option) => option.description || geolocation.description, noOptionsText: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.address.live.noResults", defaultMessage: "ui.eventForm.address.live.noResults" }), isOptionEqualToValue: (option, value) => option.description === value.description, renderInput: (params) => ((0, jsx_runtime_1.jsx)(material_1.TextField, Object.assign({}, params, { label: (0, jsx_runtime_1.jsx)(react_intl_1.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: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "start" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "add_location_alt" }) })), params.InputProps.endAdornment] })) }) }))) })), location === types_1.SCEventLocationType.ONLINE && ((0, jsx_runtime_1.jsx)(UrlTextField_1.default, { size: "small", fullWidth: true, type: "url", placeholder: `${intl.formatMessage(messages.virtualPlaceholder)}`, helperText: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.address.online.help", defaultMessage: "ui.eventForm.address.online.help" }), InputProps: {
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Tabs, Object.assign({ className: classes.tabs, value: location, onChange: handleChange, indicatorColor: "secondary", textColor: "secondary", variant: "fullWidth" }, { children: [isInPersonTabActive && ((0, jsx_runtime_1.jsx)(material_1.Tab, { value: types_1.SCEventLocationType.PERSON, classes: { root: classes.tab }, icon: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "add_location_alt" }), iconPosition: "start", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.address.live.label", defaultMessage: "ui.eventForm.address.live.label" }) })), isOnlineTabActive && ((0, jsx_runtime_1.jsx)(material_1.Tab, { value: types_1.SCEventLocationType.ONLINE, classes: { root: classes.tab }, icon: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "play_circle_outline" }), iconPosition: "start", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.address.online.label", defaultMessage: "ui.eventForm.address.online.label" }) })), isLiveTabActive && ((0, jsx_runtime_1.jsx)(material_1.Tab, { value: types_1.SCEventLocationType.LIVESTREAM, classes: { root: classes.tab }, icon: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "photo_camera" }), iconPosition: "start", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.address.liveStream.label", defaultMessage: "ui.eventForm.address.liveStream.label" }) }))] })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.tabContent }, { children: [isInPersonTabActive && location === types_1.SCEventLocationType.PERSON && ((0, jsx_runtime_1.jsx)(material_1.Autocomplete, { disabled: !geocodingApiKey, size: "small", value: geolocation, onChange: handleSelection, inputValue: inputValue, onInputChange: handleLocationChange, options: suggestions, getOptionLabel: (option) => option.description || geolocation.description, noOptionsText: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.address.live.noResults", defaultMessage: "ui.eventForm.address.live.noResults" }), isOptionEqualToValue: (option, value) => option.description === value.description, renderInput: (params) => ((0, jsx_runtime_1.jsx)(material_1.TextField, Object.assign({}, params, { label: (0, jsx_runtime_1.jsx)(react_intl_1.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: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "start" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "add_location_alt" }) })), params.InputProps.endAdornment] })) }) }))) })), isOnlineTabActive && location === types_1.SCEventLocationType.ONLINE && ((0, jsx_runtime_1.jsx)(UrlTextField_1.default, { size: "small", fullWidth: true, type: "url", placeholder: `${intl.formatMessage(messages.virtualPlaceholder)}`, helperText: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.address.online.help", defaultMessage: "ui.eventForm.address.online.help" }), InputProps: {
                             endAdornment: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "play_circle_outline" })
-                        }, onChange: handleLinkChange }))] }))] })));
+                        }, onChange: handleLinkChange })), isLiveTabActive && location === types_1.SCEventLocationType.LIVESTREAM && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(LiveStream_1.default, { template: liveStream_1.SCLiveStreamTemplateType.SNIPPET, liveStream: liveStream, actions: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}) }), (0, jsx_runtime_1.jsx)(LiveStreamFormSettings_1.default, { settings: liveStream.settings || constants_2.LIVESTREAM_DEFAULT_SETTINGS, onChange: handleLiveStreamSettingsChange })] }))] }))] })));
 }
 exports.default = EventAddress;

package/lib/cjs/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/cjs/components/EventForm/EventForm.js

@@ -25,6 +25,8 @@ const constants_1 = require("./constants");
 const EventAddress_1 = tslib_1.__importDefault(require("./EventAddress"));
 const UploadEventCover_1 = tslib_1.__importDefault(require("./UploadEventCover"));
 const utils_2 = require("./utils");
+const constants_2 = require("../LiveStreamForm/constants");
+const deafultCover_1 = tslib_1.__importDefault(require("../../assets/deafultCover"));
 const messages = (0, react_intl_1.defineMessages)({
     name: {
         id: 'ui.eventForm.name.placeholder',
@@ -57,6 +59,10 @@ const messages = (0, react_intl_1.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 = {
@@ -76,7 +82,8 @@ const classes = {
     actions: `${constants_1.PREFIX}-actions`,
     privacySection: `${constants_1.PREFIX}-privacy-section`,
     privacySectionInfo: `${constants_1.PREFIX}-privacy-section-info`,
-    error: `${constants_1.PREFIX}-error`
+    error: `${constants_1.PREFIX}-error`,
+    genericError: `${constants_1.PREFIX}-generic-error`
 };
 const Root = (0, styles_1.styled)(material_1.Box, {
     name: constants_1.PREFIX,
@@ -114,13 +121,13 @@ const Root = (0, styles_1.styled)(material_1.Box, {
  * @param inProps
  */
 function EventForm(inProps) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e;
     //PROPS
     const props = (0, system_1.useThemeProps)({
         props: inProps,
         name: constants_1.PREFIX
     });
-    const { className, onSuccess, onError, event = null } = props, rest = tslib_1.__rest(props, ["className", "onSuccess", "onError", "event"]);
+    const { className, onSuccess, onError, event, presetLocation, EventAddressComponentProps = {} } = props, rest = tslib_1.__rest(props, ["className", "onSuccess", "onError", "event", "presetLocation", "EventAddressComponentProps"]);
     // CONTEXT
     const scContext = (0, react_core_1.useSCContext)();
     // INTL
@@ -128,35 +135,50 @@ function EventForm(inProps) {
     const startDateTime = (0, react_1.useMemo)(() => (0, utils_2.getNewDate)(event === null || event === void 0 ? void 0 : event.start_date), [event]);
     const endDateTime = (0, react_1.useMemo)(() => (0, utils_2.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 : (0, utils_2.getNewDate)(),
         startTime: event ? startDateTime : (0, utils_2.getLaterHoursDate)(1),
         endDate: (event === null || event === void 0 ? void 0 : event.end_date) ? endDateTime : (0, utils_2.getNewDate)(),
         endTime: (event === null || event === void 0 ? void 0 : event.end_date) ? endDateTime : (0, utils_2.getLaterHoursDate)(3),
-        location: (event === null || event === void 0 ? void 0 : event.location) || types_1.SCEventLocationType.PERSON,
+        location: (event === null || event === void 0 ? void 0 : event.location)
+            ? event.location === types_1.SCEventLocationType.ONLINE && event.live_stream
+                ? types_1.SCEventLocationType.LIVESTREAM
+                : types_1.SCEventLocationType.ONLINE
+            : ((_a = EventAddressComponentProps.locations) === null || _a === void 0 ? void 0 : _a.length)
+                ? presetLocation in EventAddressComponentProps.locations
+                    ? presetLocation
+                    : EventAddressComponentProps.locations[0]
+                : types_1.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) || types_1.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) === types_1.SCEventPrivacyType.PUBLIC || true,
         isSubmitting: false
     };
     // STATE
     const [field, setField] = (0, react_1.useState)(initialFieldState);
     const [error, setError] = (0, react_1.useState)({});
+    const [genericError, setGenericError] = (0, react_1.useState)(null);
     // PREFERENCES
     const scPreferences = (0, react_core_1.useSCPreferences)();
+    const liveStreamEnabled = (0, react_1.useMemo)(() => scPreferences.preferences &&
+        scPreferences.features &&
+        scPreferences.features.includes(types_1.SCFeatureName.LIVE_STREAM) &&
+        react_core_1.SCPreferences.CONFIGURATIONS_LIVE_STREAM_ENABLED in scPreferences.preferences &&
+        scPreferences.preferences[react_core_1.SCPreferences.CONFIGURATIONS_LIVE_STREAM_ENABLED].value, [scPreferences.preferences, scPreferences.features]);
     const privateEnabled = (0, react_1.useMemo)(() => scPreferences.preferences[react_core_1.SCPreferences.CONFIGURATIONS_EVENTS_PRIVATE_ENABLED].value, [scPreferences.preferences]);
     const visibilityEnabled = (0, react_1.useMemo)(() => scPreferences.preferences[react_core_1.SCPreferences.CONFIGURATIONS_EVENTS_VISIBILITY_ENABLED].value, [scPreferences.preferences]);
     const disablePastStartTime = (0, react_1.useMemo)(() => field.startDate.getDate() === (0, utils_2.getNewDate)().getDate(), [field]);
     const disablePastEndTime = (0, react_1.useMemo)(() => field.endDate.getDate() === (0, utils_2.getNewDate)().getDate(), [field]);
     const _backgroundCover = Object.assign({}, (field.imageOriginal
         ? { background: `url('${field.imageOriginal}') center / cover` }
-        : { background: `url('${scPreferences.preferences[react_core_1.SCPreferences.IMAGES_USER_DEFAULT_COVER].value}') center / cover` }));
+        : { background: `url('${deafultCover_1.default}') no-repeat 0 0 / 100% 100%` }));
     const handleChangeCover = (0, react_1.useCallback)((cover) => {
         setField((prev) => (Object.assign(Object.assign({}, prev), { ['imageOriginalFile']: cover })));
         const reader = new FileReader();
@@ -168,6 +190,7 @@ function EventForm(inProps) {
             delete error.imageOriginalError;
             setError(error);
         }
+        setGenericError(null);
     }, [error]);
     /**
      * Notify when a group info changed
@@ -185,9 +208,14 @@ function EventForm(inProps) {
     }, [event]);
     const handleGeoData = (0, react_1.useCallback)((data) => {
         setField((prev) => (Object.assign(Object.assign({}, prev), data)));
+        setGenericError(null);
+    }, []);
+    const handleLiveStreamSettingsData = (0, react_1.useCallback)((data) => {
+        setField((prev) => (Object.assign(Object.assign({}, prev), { liveStreamSettings: Object.assign(Object.assign({}, prev.liveStreamSettings), data) })));
     }, []);
     const handleSubmit = (0, react_1.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);
@@ -196,14 +224,21 @@ function EventForm(inProps) {
         formData.append('start_date', (0, utils_2.combineDateAndTime)(field.startDate, field.startTime));
         formData.append('recurring', field.recurring);
         formData.append('end_date', (0, utils_2.combineDateAndTime)(field.endDate, field.endTime));
-        formData.append('location', field.location);
+        formData.append('location', field.location === types_1.SCEventLocationType.PERSON ? types_1.SCEventLocationType.PERSON : types_1.SCEventLocationType.ONLINE);
         if (field.location === types_1.SCEventLocationType.ONLINE) {
             formData.append('link', field.link);
+            formData.append('live_stream_settings', null);
+        }
+        else if (field.location === types_1.SCEventLocationType.LIVESTREAM) {
+            formData.append('link', '');
+            formData.append('live_stream_settings', JSON.stringify(Object.assign(Object.assign({}, constants_2.LIVESTREAM_DEFAULT_SETTINGS), field.liveStreamSettings)));
         }
         else if (field.location === types_1.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 ? types_1.SCEventPrivacyType.PUBLIC : types_1.SCEventPrivacyType.PRIVATE);
@@ -227,12 +262,29 @@ function EventForm(inProps) {
         })
             .catch((e) => {
             const _error = (0, api_services_1.formatHttpErrorCode)(e);
-            if (Object.values(_error)[0]['error'] === 'unique') {
-                setError(Object.assign(Object.assign({}, error), { ['nameError']: (0, jsx_runtime_1.jsx)(react_intl_1.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']: (0, jsx_runtime_1.jsx)(react_intl_1.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']: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.name.error.unique", defaultMessage: "ui.eventForm.name.error.unique" }) });
             }
+            setError(__errors);
             setField((prev) => (Object.assign(Object.assign({}, prev), { ['isSubmitting']: false })));
             utils_1.Logger.error(Errors_1.SCOPE_SC_UI, e);
             onError === null || onError === void 0 ? void 0 : onError(e);
@@ -245,7 +297,8 @@ function EventForm(inProps) {
             delete error[`${name}Error`];
             setError(error);
         }
-    }, [setField, error]);
+        setGenericError(null);
+    }, [error, setField, setGenericError]);
     const handleChangeDateTime = (0, react_1.useCallback)((value, name) => {
         setField((prev) => (Object.assign(Object.assign({}, prev), { [name]: value })));
         if (error[`${name}Error`]) {
@@ -256,7 +309,8 @@ function EventForm(inProps) {
             delete error['endDateError'];
             setError(error);
         }
-    }, [setField, error]);
+        setGenericError(null);
+    }, [error, setField, setGenericError]);
     const shouldDisableDate = (0, react_1.useCallback)((date) => {
         let disabled = false;
         switch (field.recurring) {
@@ -279,9 +333,11 @@ function EventForm(inProps) {
     /**
      * Renders root object
      */
-    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [(0, jsx_runtime_1.jsx)(material_1.Paper, Object.assign({ style: _backgroundCover, classes: { root: classes.cover } }, { children: (0, jsx_runtime_1.jsx)(UploadEventCover_1.default, { isCreationMode: true, onChange: handleChangeCover }) })), (0, jsx_runtime_1.jsxs)(material_1.FormGroup, Object.assign({ className: classes.form }, { children: [(0, jsx_runtime_1.jsx)(material_1.TextField, { required: true, className: classes.name, placeholder: `${intl.formatMessage(messages.name)}`, margin: "normal", value: field.name, name: "name", onChange: handleChange, InputProps: {
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [(0, jsx_runtime_1.jsx)(material_1.Paper, Object.assign({ style: _backgroundCover, classes: { root: classes.cover } }, { children: (0, jsx_runtime_1.jsx)(UploadEventCover_1.default, { isCreationMode: true, onChange: handleChangeCover }) })), Boolean(error['coverError']) && (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ color: "error" }, { children: error['coverError'] })), (0, jsx_runtime_1.jsxs)(material_1.FormGroup, Object.assign({ className: classes.form }, { children: [(0, jsx_runtime_1.jsx)(material_1.TextField, { required: true, className: classes.name, placeholder: `${intl.formatMessage(messages.name)}`, margin: "normal", value: field.name, name: "name", onChange: handleChange, InputProps: {
                             endAdornment: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: Event_1.EVENT_TITLE_MAX_LENGTH - field.name.length }))
-                        }, error: Boolean(field.name.length > Event_1.EVENT_TITLE_MAX_LENGTH) || Boolean(error['nameError']), helperText: field.name.length > Event_1.EVENT_TITLE_MAX_LENGTH ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.name.error.maxLength", defaultMessage: "ui.eventForm.name.error.maxLength" })) : error['nameError'] ? (error['nameError']) : null }), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.dateTime }, { children: (0, jsx_runtime_1.jsxs)(x_date_pickers_1.LocalizationProvider, Object.assign({ dateAdapter: AdapterDateFns_1.AdapterDateFns, adapterLocale: scContext.settings.locale.default === 'it' ? it_1.default : en_US_1.default }, { children: [(0, jsx_runtime_1.jsx)(x_date_pickers_1.MobileDatePicker, { className: classes.picker, disablePast: true, label: field.startDate && (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.date.placeholder", defaultMessage: "ui.eventForm.date.placeholder" }), value: field.startDate, slots: {
+                        }, error: Boolean(field.name.length > Event_1.EVENT_TITLE_MAX_LENGTH) || Boolean(error['nameError']), helperText: field.name.length > Event_1.EVENT_TITLE_MAX_LENGTH ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.name.error.maxLength", defaultMessage: "ui.eventForm.name.error.maxLength" })) : error['nameError'] ? (error['nameError']) : null }), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.dateTime }, { children: (0, jsx_runtime_1.jsxs)(x_date_pickers_1.LocalizationProvider, Object.assign({ dateAdapter: AdapterDateFns_1.AdapterDateFns, adapterLocale: scContext.settings.locale.default === 'it' ? it_1.default : en_US_1.default, localeText: {
+                                cancelButtonLabel: `${intl.formatMessage(messages.pickerCancelAction)}`
+                            } }, { children: [(0, jsx_runtime_1.jsx)(x_date_pickers_1.MobileDatePicker, { className: classes.picker, disablePast: true, label: field.startDate && (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.date.placeholder", defaultMessage: "ui.eventForm.date.placeholder" }), value: field.startDate, slots: {
                                         textField: (params) => ((0, jsx_runtime_1.jsx)(material_1.TextField, Object.assign({}, params, { InputProps: Object.assign(Object.assign({}, params.InputProps), { placeholder: `${intl.formatMessage(messages.startDate)}`, startAdornment: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "start" }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "CalendarIcon" }) }) }))) }) })))
                                     }, slotProps: {
                                         toolbar: {
@@ -302,7 +358,9 @@ function EventForm(inProps) {
                                         return (0, jsx_runtime_1.jsx)("em", { children: `${intl.formatMessage(messages.frequencyPlaceholder)}` });
                                     }
                                     return ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.eventForm.frequency.${selected}.placeholder`, defaultMessage: `ui.eventForm.frequency.${selected}.placeholder` }));
-                                }, startAdornment: (0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "start" }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "frequency" }) }) })) }, { children: Object.values(types_1.SCEventRecurrenceType).map((f) => ((0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ value: f }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.eventForm.frequency.${f}.placeholder`, defaultMessage: `ui.eventForm.frequency.${f}.placeholder` }) }), f))) }))] })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.dateTime }, { children: (0, jsx_runtime_1.jsxs)(x_date_pickers_1.LocalizationProvider, Object.assign({ dateAdapter: AdapterDateFns_1.AdapterDateFns, adapterLocale: scContext.settings.locale.default === 'it' ? it_1.default : en_US_1.default }, { children: [(0, jsx_runtime_1.jsx)(x_date_pickers_1.MobileDatePicker, { className: classes.picker, minDate: field.startDate, label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.date.end.placeholder", defaultMessage: "ui.eventForm.date.end.placeholder" }), value: field.endDate, slots: {
+                                }, startAdornment: (0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "start" }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "frequency" }) }) })) }, { children: Object.values(types_1.SCEventRecurrenceType).map((f) => ((0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ value: f }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.eventForm.frequency.${f}.placeholder`, defaultMessage: `ui.eventForm.frequency.${f}.placeholder` }) }), f))) }))] })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.dateTime }, { children: (0, jsx_runtime_1.jsxs)(x_date_pickers_1.LocalizationProvider, Object.assign({ dateAdapter: AdapterDateFns_1.AdapterDateFns, adapterLocale: scContext.settings.locale.default === 'it' ? it_1.default : en_US_1.default, localeText: {
+                                cancelButtonLabel: `${intl.formatMessage(messages.pickerCancelAction)}`
+                            } }, { children: [(0, jsx_runtime_1.jsx)(x_date_pickers_1.MobileDatePicker, { className: classes.picker, minDate: field.startDate, label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.date.end.placeholder", defaultMessage: "ui.eventForm.date.end.placeholder" }), value: field.endDate, slots: {
                                         textField: (params) => ((0, jsx_runtime_1.jsx)(material_1.TextField, Object.assign({}, params, { InputProps: Object.assign(Object.assign({}, params.InputProps), { placeholder: `${intl.formatMessage(messages.endDate)}`, startAdornment: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "start" }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "calendar_off" }) }) }))) }) })))
                                     }, slotProps: {
                                         toolbar: {
@@ -321,7 +379,13 @@ function EventForm(inProps) {
                                             // @ts-ignore
                                             toolbarTitle: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.time.title", defaultMessage: "ui.eventForm.time.title" })
                                         }
-                                    }, onChange: (value) => handleChangeDateTime(value, 'endTime'), shouldDisableTime: shouldDisableTime })] })) })), (0, jsx_runtime_1.jsx)(EventAddress_1.default, { forwardGeolocationData: handleGeoData, event: event !== null && event !== void 0 ? event : null }), privateEnabled && ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.privacySection }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center", justifyContent: "center" }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: (0, classnames_1.default)(classes.switchLabel, { [classes.active]: !field.isPublic }) }, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, { children: "private" }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.privacy.private", defaultMessage: "ui.eventForm.privacy.private" })] })), (0, jsx_runtime_1.jsx)(material_1.Switch, { className: classes.switch, checked: field.isPublic, onChange: () => setField((prev) => (Object.assign(Object.assign({}, prev), { ['isPublic']: !field.isPublic }))), disabled: event && !field.isPublic }), (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: (0, classnames_1.default)(classes.switchLabel, { [classes.active]: field.isPublic }) }, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, { children: "public" }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.privacy.public", defaultMessage: "ui.eventForm.privacy.public" })] }))] })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", textAlign: "center", className: classes.privacySectionInfo }, { children: field.isPublic ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.privacy.public.info", defaultMessage: "ui.eventForm.privacy.public.info", values: {
+                                    }, onChange: (value) => handleChangeDateTime(value, 'endTime'), shouldDisableTime: shouldDisableTime })] })) })), (0, jsx_runtime_1.jsx)(EventAddress_1.default, 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 && ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.privacySection }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center", justifyContent: "center" }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: (0, classnames_1.default)(classes.switchLabel, { [classes.active]: !field.isPublic }) }, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, { children: "private" }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.privacy.private", defaultMessage: "ui.eventForm.privacy.private" })] })), (0, jsx_runtime_1.jsx)(material_1.Switch, { className: classes.switch, checked: field.isPublic, onChange: () => setField((prev) => (Object.assign(Object.assign({}, prev), { ['isPublic']: !field.isPublic }))), disabled: event && !field.isPublic }), (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: (0, classnames_1.default)(classes.switchLabel, { [classes.active]: field.isPublic }) }, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, { children: "public" }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.privacy.public", defaultMessage: "ui.eventForm.privacy.public" })] }))] })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", textAlign: "center", className: classes.privacySectionInfo }, { children: field.isPublic ? ((0, jsx_runtime_1.jsx)(react_intl_1.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) => (0, jsx_runtime_1.jsx)("strong", { children: chunks })
@@ -330,17 +394,19 @@ function EventForm(inProps) {
                                         // @ts-ignore
                                         b: (chunks) => (0, jsx_runtime_1.jsx)("strong", { children: chunks })
                                     } })) }))] }))), (0, jsx_runtime_1.jsx)(material_1.TextField, { multiline: true, className: classes.description, placeholder: `${intl.formatMessage(messages.description)}`, margin: "normal", value: field.description, name: "description", onChange: handleChange, InputProps: {
-                            endAdornment: ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: ((_a = field.description) === null || _a === void 0 ? void 0 : _a.length) ? Event_1.EVENT_DESCRIPTION_MAX_LENGTH - field.description.length : Event_1.EVENT_DESCRIPTION_MAX_LENGTH })))
-                        }, error: Boolean(((_b = field.description) === null || _b === void 0 ? void 0 : _b.length) > Event_1.EVENT_DESCRIPTION_MAX_LENGTH), helperText: ((_c = field.description) === null || _c === void 0 ? void 0 : _c.length) > Event_1.EVENT_DESCRIPTION_MAX_LENGTH ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.description.error.maxLength", defaultMessage: "ui.eventForm.description.error.maxLength" })) : null }), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.actions }, { children: (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ loading: field.isSubmitting, disabled: !field.name ||
+                            endAdornment: ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: ((_c = field.description) === null || _c === void 0 ? void 0 : _c.length) ? Event_1.EVENT_DESCRIPTION_MAX_LENGTH - field.description.length : Event_1.EVENT_DESCRIPTION_MAX_LENGTH })))
+                        }, error: Boolean(((_d = field.description) === null || _d === void 0 ? void 0 : _d.length) > Event_1.EVENT_DESCRIPTION_MAX_LENGTH), helperText: ((_e = field.description) === null || _e === void 0 ? void 0 : _e.length) > Event_1.EVENT_DESCRIPTION_MAX_LENGTH ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.description.error.maxLength", defaultMessage: "ui.eventForm.description.error.maxLength" })) : null }), genericError && ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.genericError }, { children: (0, jsx_runtime_1.jsx)(material_1.Alert, Object.assign({ variant: "filled", severity: "error" }, { children: genericError })) }))), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.actions }, { children: (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ loading: field.isSubmitting, disabled: !field.name ||
                                 !field.startDate ||
                                 !field.startTime ||
                                 !field.endDate ||
                                 !field.endTime ||
+                                Boolean(genericError) ||
                                 (field.location === types_1.SCEventLocationType.ONLINE && !field.link) ||
                                 (field.location === types_1.SCEventLocationType.PERSON && !field.geolocation) ||
                                 (field.recurring !== types_1.SCEventRecurrenceType.NEVER && !field.endDate && !field.endTime) ||
-                                Object.keys(error).length !== 0 ||
+                                field.isSubmitting ||
                                 field.name.length > Event_1.EVENT_TITLE_MAX_LENGTH ||
-                                field.description.length > Event_1.EVENT_DESCRIPTION_MAX_LENGTH, variant: "contained", onClick: handleSubmit, color: "secondary" }, { children: event ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.button.edit", defaultMessage: "ui.eventForm.button.edit" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.button.create", defaultMessage: "ui.eventForm.button.create" })) })) }))] }))] })));
+                                field.description.length > Event_1.EVENT_DESCRIPTION_MAX_LENGTH ||
+                                (field.location === types_1.SCEventLocationType.LIVESTREAM && !liveStreamEnabled), variant: "contained", onClick: handleSubmit, color: "secondary" }, { children: event ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.button.edit", defaultMessage: "ui.eventForm.button.edit" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.button.create", defaultMessage: "ui.eventForm.button.create" })) })) }))] }))] })));
 }
 exports.default = EventForm;

package/lib/cjs/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/cjs/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/cjs/components/EventFormDialog/EventFormDialog.js

@@ -42,15 +42,15 @@ function EventFormDialog(inProps) {
         props: inProps,
         name: constants_1.PREFIX
     });
-    const { className, open = true, onClose, EventFormComponentProps = {} } = props, rest = tslib_1.__rest(props, ["className", "open", "onClose", "EventFormComponentProps"]);
+    const { className, open = true, onClose, EventFormComponentProps } = props, rest = tslib_1.__rest(props, ["className", "open", "onClose", "EventFormComponentProps"]);
     const handleSuccess = (0, react_1.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 ((0, jsx_runtime_1.jsx)(Root, Object.assign({ DialogContentProps: { dividers: false }, title: (EventFormComponentProps === null || EventFormComponentProps === void 0 ? void 0 : EventFormComponentProps.event) ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.title.edit", defaultMessage: "ui.eventForm.title.edit" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.title", defaultMessage: "ui.eventForm.title" })), open: open, onClose: onClose, className: (0, classnames_1.default)(classes.root, className) }, rest, { children: (0, jsx_runtime_1.jsx)(EventForm_1.default, Object.assign({}, EventFormComponentProps, { onSuccess: handleSuccess })) })));
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ DialogContentProps: { dividers: false }, title: (EventFormComponentProps === null || EventFormComponentProps === void 0 ? void 0 : EventFormComponentProps.event) ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.title.edit", defaultMessage: "ui.eventForm.title.edit" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventForm.title", defaultMessage: "ui.eventForm.title" })), open: open, onClose: onClose, className: (0, classnames_1.default)(classes.root, className) }, rest, { children: (0, jsx_runtime_1.jsx)(EventForm_1.default, Object.assign({}, (EventFormComponentProps && EventFormComponentProps), { onSuccess: handleSuccess })) })));
 }
 exports.default = EventFormDialog;

package/lib/cjs/components/EventInfoWidget/EventInfoWidget.js

@@ -68,7 +68,7 @@ function EventInfoWidget(inProps) {
     const handleToggleSummary = (0, react_1.useCallback)(() => {
         setExpanded(!expanded);
     }, [expanded]);
-    const hasGeolocationOrLink = (0, react_1.useMemo)(() => Boolean((scEvent === null || scEvent === void 0 ? void 0 : scEvent.geolocation) || (scEvent === null || scEvent === void 0 ? void 0 : scEvent.link)), [scEvent]);
+    const hasGeolocationOrLink = (0, react_1.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 = (0, react_1.useMemo)(() => ((scEvent === null || scEvent === void 0 ? void 0 : scEvent.privacy) === types_1.SCEventPrivacyType.PUBLIC && hasGeolocationOrLink) ||
         ([types_1.SCEventSubscriptionStatusType.SUBSCRIBED, types_1.SCEventSubscriptionStatusType.GOING, types_1.SCEventSubscriptionStatusType.NOT_GOING].indexOf(scEvent === null || scEvent === void 0 ? void 0 : scEvent.subscription_status) > -1 &&
             hasGeolocationOrLink), [scEvent]);

package/lib/cjs/components/EventInviteButton/EventInviteButton.js

@@ -40,13 +40,13 @@ const classes = {
 const Root = (0, styles_1.styled)(material_1.Button, {
     name: PREFIX,
     slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({}));
+    overridesResolver: (_props, styles) => styles.root
+})(() => ({}));
 const DialogRoot = (0, styles_1.styled)(BaseDialog_1.default, {
     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.
  *
@@ -196,7 +196,7 @@ function EventInviteButton(inProps) {
         });
     };
     // Autocomplete Handlers
-    const handleInputChange = (event, value, reason) => {
+    const handleInputChange = (_event, value, reason) => {
         switch (reason) {
             case 'input':
                 setValue(value);

package/lib/cjs/components/EventMediaWidget/EventMediaWidget.js

@@ -232,6 +232,9 @@ function EventMediaWidget(inProps) {
             handleNext();
         }
     }, [isMobile, openDialog, state.next]);
+    if (!scUserContext.user) {
+        return (0, jsx_runtime_1.jsx)(HiddenPlaceholder_1.default, {});
+    }
     // RENDER
     if (!scEvent ||
         !state.initialized ||
@@ -244,10 +247,10 @@ function EventMediaWidget(inProps) {
     }
     return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: classes.root }, rest, { showPadding: hasAllow }, { children: [(0, jsx_runtime_1.jsx)(material_1.CardHeader, { title: (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventMediaWidget.title", defaultMessage: "ui.eventMediaWidget.title" }) })), hasAllow && mediasCount > 0 && (0, jsx_runtime_1.jsx)(TriggerButton_1.default, { size: "small", onAdd: handleAddMedia })] })), className: classes.header }), (0, jsx_runtime_1.jsx)(material_1.Divider, {}), (0, jsx_runtime_1.jsxs)(material_1.CardContent, Object.assign({ className: classes.content }, { children: [(0, jsx_runtime_1.jsxs)(system_1.Box, Object.assign({ className: classes.grid }, { children: [showSkeleton === 'widget' && (0, jsx_runtime_1.jsx)(Skeleton_1.EventMediaSkeleton, {}), medias.slice(0, MEDIAS_TO_SHOW).map((media, i, array) => ((0, jsx_runtime_1.jsx)(system_1.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 && ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(system_1.Box, { className: classes.mediaLayer }), (0, jsx_runtime_1.jsx)(system_1.Box, Object.assign({ className: classes.countHiddenMediaWrapper }, { children: (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: classes.countHiddenMedia }, { children: ["+", countHiddenMedia] })) }))] })) }), media.id))), hasAllow && mediasCount === 0 && ((0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventMediaWidget.add", defaultMessage: "ui.eventMediaWidget.add" }) }, { children: (0, jsx_runtime_1.jsx)(TriggerButton_1.default, { size: "large", onAdd: handleAddMedia, isSquare: true }) })))] })), preview !== -1 && (0, jsx_runtime_1.jsx)(Lightbox_1.Lightbox, { onClose: handleCloseLightbox, index: preview, medias: medias, onIndexChange: _fetchNext })] })), hasAllow && mediasCount > 0 && ((0, jsx_runtime_1.jsx)(material_1.CardActions, Object.assign({ className: classes.actions }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ onClick: handleToggleDialogOpen }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "caption" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventMediaWidget.showAll", defaultMessage: "ui.eventMediaWidget.showAll" }) })) })) }))), openDialog && ((0, jsx_runtime_1.jsx)(DialogRoot, Object.assign({ className: classes.dialogRoot, title: intl.formatMessage(messages.title, { user: scEvent.managed_by.username }), onClose: handleToggleDialogOpen, open: openDialog }, dialogProps, { children: (0, jsx_runtime_1.jsx)(InfiniteScroll_1.default, Object.assign({ dataLength: medias.length, height: isMobile ? '100%' : '515px', next: handleNext, hasMoreNext: Boolean(state.next), className: classes.dialogInfiniteScroll, endMessage: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.endMessage }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventMediaWidget.noMoreResults", defaultMessage: "ui.eventMediaWidget.noMoreResults" }) })) }, { children: (0, jsx_runtime_1.jsxs)(system_1.Box, Object.assign({ className: classes.grid }, { children: [medias.map((media) => ((0, jsx_runtime_1.jsx)(system_1.Box, Object.assign({ sx: {
+                                }, className: classes.media }, { children: medias.length > array.length && i === array.length - 1 && ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(system_1.Box, { className: classes.mediaLayer }), (0, jsx_runtime_1.jsx)(system_1.Box, Object.assign({ className: classes.countHiddenMediaWrapper }, { children: (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: classes.countHiddenMedia }, { children: ["+", countHiddenMedia] })) }))] })) }), media.id))), hasAllow && mediasCount === 0 && ((0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventMediaWidget.add", defaultMessage: "ui.eventMediaWidget.add" }) }, { children: (0, jsx_runtime_1.jsx)(TriggerButton_1.default, { size: "large", onAdd: handleAddMedia, isSquare: true }) })))] })), preview !== -1 && (0, jsx_runtime_1.jsx)(Lightbox_1.Lightbox, { onClose: handleCloseLightbox, index: preview, medias: medias, onIndexChange: _fetchNext })] })), hasAllow && mediasCount > 0 && ((0, jsx_runtime_1.jsx)(material_1.CardActions, Object.assign({ className: classes.actions }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ onClick: handleToggleDialogOpen }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "caption" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventMediaWidget.showAll", defaultMessage: "ui.eventMediaWidget.showAll" }) })) })) }))), openDialog && ((0, jsx_runtime_1.jsx)(DialogRoot, Object.assign({ className: classes.dialogRoot, title: intl.formatMessage(messages.title, { user: scEvent.managed_by.username }), onClose: handleToggleDialogOpen, open: true }, dialogProps, { children: (0, jsx_runtime_1.jsx)(InfiniteScroll_1.default, Object.assign({ dataLength: medias.length, height: isMobile ? '100%' : '515px', next: handleNext, hasMoreNext: Boolean(state.next), className: classes.dialogInfiniteScroll, endMessage: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.endMessage }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventMediaWidget.noMoreResults", defaultMessage: "ui.eventMediaWidget.noMoreResults" }) })) }, { children: (0, jsx_runtime_1.jsxs)(system_1.Box, Object.assign({ className: classes.grid }, { children: [medias.map((media) => ((0, jsx_runtime_1.jsx)(system_1.Box, Object.assign({ sx: {
                                     background: `url(${media.image}) no-repeat center`
                                 }, className: classes.dialogMediaWrapper }, { children: (0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ className: classes.dialogButtonWrapper }, { children: (0, jsx_runtime_1.jsx)(lab_1.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: (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ fontSize: "inherit" }, { children: "delete" })) })) })) }), media.id))), showSkeleton === 'dialog' && Array.from(Array(countHiddenMedia)).map((_, i) => (0, jsx_runtime_1.jsx)(Skeleton_1.EventMediaSkeleton, {}, i))] })) })) }))), openDialogConfirm && ((0, jsx_runtime_1.jsx)(ConfirmDialog_1.default, { open: openDialogConfirm, title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventMediaWidget.dialog.title", defaultMessage: "ui.eventMediaWidget.dialog.title" }), content: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventMediaWidget.dialog.msg", defaultMessage: "ui.eventMediaWidget.dialog.msg" }), btnConfirm: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventMediaWidget.dialog.confirm", defaultMessage: "ui.eventMediaWidget.dialog.confirm" }), isUpdating: loading, onConfirm: handleConfirmAction, onClose: handleCloseAction }))] })));
+                                        } }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ fontSize: "inherit" }, { children: "delete" })) })) })) }), media.id))), showSkeleton === 'dialog' && Array.from(Array(countHiddenMedia)).map((_, i) => (0, jsx_runtime_1.jsx)(Skeleton_1.EventMediaSkeleton, {}, i))] })) })) }))), openDialogConfirm && ((0, jsx_runtime_1.jsx)(ConfirmDialog_1.default, { open: true, title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventMediaWidget.dialog.title", defaultMessage: "ui.eventMediaWidget.dialog.title" }), content: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventMediaWidget.dialog.msg", defaultMessage: "ui.eventMediaWidget.dialog.msg" }), btnConfirm: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventMediaWidget.dialog.confirm", defaultMessage: "ui.eventMediaWidget.dialog.confirm" }), isUpdating: loading, onConfirm: handleConfirmAction, onClose: handleCloseAction }))] })));
 }
 exports.default = EventMediaWidget;