@selfcommunity/react-ui 0.10.5-alpha.2 → 0.10.5-alpha.4

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, _b;
     //PROPS
     const props = (0, system_1.useThemeProps)({
         props: inProps,
@@ -40,18 +50,53 @@ 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 canViewLiveTab = (0, react_1.useMemo)(() => {
+        var _a, _b;
+        return (!isFreeTrialTier || (isFreeTrialTier && (scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) && (scUserContext === null || scUserContext === void 0 ? void 0 : 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);
+    }, [(_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission, event]);
+    const isInPersonTabActive = (0, react_1.useMemo)(() => locations.includes(types_1.SCEventLocationType.PERSON) || event.location === types_1.SCEventLocationType.PERSON, [locations]);
+    const isOnlineTabActive = (0, react_1.useMemo)(() => locations.includes(types_1.SCEventLocationType.ONLINE) || event.location === types_1.SCEventLocationType.ONLINE, [locations]);
+    const isLiveTabActive = (0, react_1.useMemo)(() => {
+        var _a, _b;
+        return liveStreamEnabled &&
+            locations.includes(types_1.SCEventLocationType.LIVESTREAM) &&
+            (!isFreeTrialTier || (isFreeTrialTier && (scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) && (scUserContext === null || scUserContext === void 0 ? void 0 : 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);
+    }, [liveStreamEnabled, (_b = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _b === void 0 ? void 0 : _b.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 +127,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 +154,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 && canViewLiveTab && ((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 && canViewLiveTab && 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',
@@ -119,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;
     //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
@@ -133,20 +135,29 @@ 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
     };
@@ -162,7 +173,7 @@ function EventForm(inProps) {
     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();
@@ -194,6 +205,9 @@ function EventForm(inProps) {
         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);
@@ -205,14 +219,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', '');
+        }
+        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', '');
         }
         if (privateEnabled) {
             formData.append('privacy', field.isPublic ? types_1.SCEventPrivacyType.PUBLIC : types_1.SCEventPrivacyType.PRIVATE);
@@ -236,12 +257,18 @@ function EventForm(inProps) {
         })
             .catch((e) => {
             const _error = (0, api_services_1.formatHttpErrorCode)(e);
-            if ('errorsError' in _error || !Object.keys(_error).length) {
+            if (!Object.keys(_error).length) {
                 setGenericError(intl.formatMessage({
                     id: 'ui.eventForm.genericError',
                     defaultMessage: 'ui.eventForm.genericError'
                 }));
             }
+            else if ('errorsError' in _error) {
+                setGenericError(intl.formatMessage({
+                    id: 'ui.eventForm.liveStream.error.monthlyMinuteLimitReached',
+                    defaultMessage: 'ui.eventForm.liveStream.error.monthlyMinuteLimitReached'
+                }));
+            }
             else {
                 setGenericError(null);
             }
@@ -266,7 +293,7 @@ function EventForm(inProps) {
             setError(error);
         }
         setGenericError(null);
-    }, [setField, error]);
+    }, [error, setField, setGenericError]);
     const handleChangeDateTime = (0, react_1.useCallback)((value, name) => {
         setField((prev) => (Object.assign(Object.assign({}, prev), { [name]: value })));
         if (error[`${name}Error`]) {
@@ -278,7 +305,7 @@ function EventForm(inProps) {
             setError(error);
         }
         setGenericError(null);
-    }, [setField, error]);
+    }, [error, setField, setGenericError]);
     const shouldDisableDate = (0, react_1.useCallback)((date) => {
         let disabled = false;
         switch (field.recurring) {
@@ -347,7 +374,17 @@ 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: {
+                                title: field.name || `${intl.formatMessage(messages.name)}`,
+                                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 })
@@ -356,12 +393,13 @@ 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 }), 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 ||
+                            endAdornment: ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: ((_b = field.description) === null || _b === void 0 ? void 0 : _b.length) ? Event_1.EVENT_DESCRIPTION_MAX_LENGTH - field.description.length : Event_1.EVENT_DESCRIPTION_MAX_LENGTH })))
+                        }, error: Boolean(((_c = field.description) === null || _c === void 0 ? void 0 : _c.length) > Event_1.EVENT_DESCRIPTION_MAX_LENGTH), helperText: ((_d = field.description) === null || _d === void 0 ? void 0 : _d.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) ||

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

@@ -1,16 +1,17 @@
-import { SCEventLocationType, SCEventRecurrenceType } from '@selfcommunity/types';
-export declare type Place = {
+import { SCEventLocationType, SCEventRecurrenceType, SCLiveStreamSettingsType } from '@selfcommunity/types';
+export type Place = {
     description: string;
     id?: string;
 };
-export declare type Geolocation = {
+export type Geolocation = {
     location: SCEventLocationType;
     geolocation?: string;
     lat?: number;
     lng?: number;
     link?: string;
+    liveStreamSettings?: SCLiveStreamSettingsType;
 };
-export declare type InitialFieldState = Geolocation & {
+export type InitialFieldState = Geolocation & {
     imageOriginal: string | ArrayBuffer;
     imageOriginalFile: string | Blob;
     startDate: Date | null;
@@ -23,5 +24,5 @@ export declare type InitialFieldState = Geolocation & {
     isPublic: boolean;
     isSubmitting: boolean;
 };
-export declare type FieldStateKeys = keyof InitialFieldState;
-export declare type FieldStateValues = InitialFieldState[FieldStateKeys];
+export type FieldStateKeys = keyof InitialFieldState;
+export type FieldStateValues = InitialFieldState[FieldStateKeys];

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/EventMediaWidget/asUploadButton.d.ts

@@ -1,6 +1,6 @@
 import { UploadButtonProps } from '@rpldy/upload-button';
 import type { ComponentType } from 'react';
-declare type FileInputProps = {
+type FileInputProps = {
     accept: string;
 };
 declare const asUploadButton: (Component: ComponentType<any>, inputProps: FileInputProps) => import("react").ForwardRefExoticComponent<Pick<UploadButtonProps<Element>, "id" | "className" | "text" | "children" | "onClick" | "method" | "headers" | "paramName" | "params" | "forceJsonResponse" | "withCredentials" | "formatGroupParamName" | "sendWithFormData" | "formDataAllowUndefined" | "formatServerResponse" | "isSuccessfulCall" | "destination" | "fileFilter" | "autoUpload" | "clearPendingOnAdd" | "grouped" | "maxGroupSize" | "inputFieldName" | "fastAbortThreshold" | "userData" | "extraProps"> & import("react").RefAttributes<any>>;

package/lib/cjs/components/EventMembersWidget/types.d.ts

@@ -1,4 +1,4 @@
-export declare type TabContentType = '1' | '2' | '3';
+export type TabContentType = '1' | '2' | '3';
 export declare enum TabContentEnum {
     PARTICIPANTS = "1",
     INVITED = "2",

package/lib/cjs/components/Feed/Feed.d.ts

@@ -9,11 +9,11 @@ import { StickyBoxProps } from '../../shared/StickyBox';
 /**
  * FeedSidebarProps has the same props as StickyBoxProps type
  */
-export declare type FeedSidebarProps = StickyBoxProps;
+export type FeedSidebarProps = StickyBoxProps;
 /**
  * FeedRef props
  */
-export declare type FeedRef = {
+export type FeedRef = {
     addFeedData: (obj: any, syncPagination?: boolean) => void;
     refresh: () => void;
     getCurrentFeedObjectIds: () => number[];

package/lib/cjs/components/Feed/Skeleton.d.ts

@@ -11,7 +11,7 @@ interface FeedSkeletonMap {
      */
     className?: string;
 }
-export declare type FeedSkeletonProps = React.PropsWithChildren<FeedSkeletonMap>;
+export type FeedSkeletonProps = React.PropsWithChildren<FeedSkeletonMap>;
 /**
  * > API documentation for the Community-JS Feed Skeleton component. Learn about the available props and the CSS API.
 

package/lib/cjs/components/LiveStream/LiveStream.d.ts

@@ -0,0 +1,79 @@
+import { SCLiveStreamType } from '@selfcommunity/types';
+import React from 'react';
+import { SCLiveStreamTemplateType } from '../../types/liveStream';
+import { WidgetProps } from '../Widget';
+import { LiveStreamSkeletonProps } from './index';
+export interface LiveStreamProps extends WidgetProps {
+    /**
+     * Event Object
+     * @default null
+     */
+    liveStream?: SCLiveStreamType;
+    /**
+     * Id of the liveStream for filter the feed
+     * @default null
+     */
+    liveStreamId?: number;
+    /**
+     * Event template type
+     * @default 'preview'
+     */
+    template?: SCLiveStreamTemplateType;
+    /**
+     * Actions
+     * @default null
+     */
+    actions?: React.ReactNode;
+    /**
+     * Hide in progress
+     * @default false
+     */
+    hideInProgress?: boolean;
+    /**
+     * Hide liveStream planner
+     * @default false
+     */
+    hideLiveStreamHost?: boolean;
+    /**
+     * Props to spread to EventSkeleton component
+     * @default {}
+     */
+    LiveStreamSkeletonComponentProps?: LiveStreamSkeletonProps;
+    /**
+     * Any other properties
+     */
+    [p: string]: any;
+}
+/**
+ * > API documentation for the Community-JS Live Stream component. Learn about the available props and the CSS API.
+ *
+ *
+ * This component renders an liveStream item.
+ * Take a look at our <strong>demo</strong> component [here](/docs/sdk/community-js/react-ui/Components/Event)
+
+ #### Import
+
+ ```jsx
+ import {liveStream} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCLiveStream` can be used when providing style overrides in the theme.
+
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCLiveStream-root|Styles applied to the root element.|
+ |avatar|.SCLiveStream-avatar|Styles applied to the avatar element.|
+ |primary|.SCLiveStream-primary|Styles applied to the primary item element section|
+ |secondary|.SCLiveStream-secondary|Styles applied to the secondary item element section|
+ |actions|.SCLiveStream-actions|Styles applied to the actions section.|
+
+
+ *
+ * @param inProps
+ */
+export default function LiveStream(inProps: LiveStreamProps): JSX.Element;