@selfcommunity/react-ui/lib/esm/shared/EventInfoDetails/index.js

React UI Components to integrate a Community created with SelfCommunity Platform.

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Box, Button, Icon, Stack, styled, Tooltip, Typography, useThemeProps } from '@mui/material';
import { Link, SCPreferences, SCRoutes, SCUserContext, useSCFetchEvent, useSCPreferences, useSCRouting } from '@selfcommunity/react-core';
import { SCEventLocationType, SCEventPrivacyType, SCEventRecurrenceType, SCFeatureName } from '@selfcommunity/types';
import { useContext, useMemo } from 'react';
import { FormattedMessage, useIntl } from 'react-intl';
const PREFIX = 'SCEventInfoDetails';
const classes = {
    root: `${PREFIX}-root`,
    iconTextWrapper: `${PREFIX}-icon-text-wrapper`,
    inProgress: `${PREFIX}-in-progress`,
    link: `${PREFIX}-link`,
    joinLive: `${PREFIX}-join-live`,
    url: `${PREFIX}-url`,
    creationWrapper: `${PREFIX}-creation-wrapper`
};
const Root = styled(Stack, {
    name: PREFIX,
    slot: 'Root',
    overridesResolver: (_props, styles) => styles.root
})(() => ({}));
export default function EventInfoDetails(inProps) {
    // PROPS
    const props = useThemeProps({
        props: inProps,
        name: PREFIX
    });
    const { event, eventId, hideDateIcon = false, hideRecurringIcon = false, hidePrivacyIcon = false, hideLocationIcon = false, hideCreatedIcon = false, hasDateInfo = true, hasRecurringInfo = false, hasPrivacyInfo = true, hasLocationInfo = true, hasCreatedInfo = false, hasInProgress = false, beforeDateInfo, beforeRecurringInfo, beforePrivacyInfo, beforeLocationInfo, beforeCreatedInfo } = props;
    // HOOKS
    const intl = useIntl();
    const { scEvent } = useSCFetchEvent({ id: eventId, event, autoSubscribe: false });
    // CONTEXT
    const scRoutingContext = useSCRouting();
    const scUserContext = useContext(SCUserContext);
    const { preferences, features } = useSCPreferences();
    const liveStreamEnabled = useMemo(() => preferences &&
        features &&
        features.includes(SCFeatureName.LIVE_STREAM) &&
        SCPreferences.CONFIGURATIONS_LIVE_STREAM_ENABLED in preferences &&
        preferences[SCPreferences.CONFIGURATIONS_LIVE_STREAM_ENABLED].value, [preferences, features]);
    const privacy = useMemo(() => (scEvent && scEvent.privacy === SCEventPrivacyType.PUBLIC ? 'ui.eventInfoDetails.privacy.public' : 'ui.eventInfoDetails.privacy.private'), [scEvent]);
    const location = useMemo(() => scEvent && scEvent.location === SCEventLocationType.ONLINE ? 'ui.eventInfoDetails.location.virtual' : 'ui.eventInfoDetails.location.inPerson', [scEvent]);
    const disableJoinEvent = useMemo(() => Boolean(!liveStreamEnabled ||
        !scEvent ||
        !scUserContext.user ||
        (scEvent.live_stream &&
            scEvent.live_stream.host.id !== scUserContext.user.id &&
            (scEvent.live_stream.closed_at_by_host || (scEvent.live_stream.last_started_at && scEvent.live_stream.last_finished_at)))), [scUserContext.user, scEvent]);
    if (!scEvent) {
        return null;
    }
    return (_jsxs(Root, Object.assign({ className: classes.root }, { children: [beforeDateInfo, hasDateInfo && (_jsxs(Stack, Object.assign({ className: classes.iconTextWrapper }, { children: [!hideDateIcon && _jsx(Icon, Object.assign({ fontSize: "small" }, { children: scEvent.active ? 'CalendarIcon' : 'calendar_off' })), _jsx(Tooltip, Object.assign({ title: !scEvent.active ? (_jsx(FormattedMessage, { id: "ui.eventInfoDetails.deleted.tooltip", defaultMessage: "ui.eventInfoDetails.deleted.tooltip" })) : null }, { children: _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.eventInfoDetails.date.startEndTime", defaultMessage: "ui.eventInfoDetails.date.startEndTime", values: {
                                    date: intl.formatDate(scEvent.running ? scEvent.running_start_date : scEvent.next_start_date ? scEvent.next_start_date : scEvent.start_date, {
                                        weekday: 'long',
                                        day: 'numeric',
                                        year: 'numeric',
                                        month: 'long'
                                    }),
                                    start: intl.formatDate(scEvent.running ? scEvent.running_start_date : scEvent.next_start_date ? scEvent.next_start_date : scEvent.start_date, { hour: 'numeric', minute: 'numeric' })
                                } }) })) })), hasInProgress && scEvent.active && scEvent.running && (_jsx(Tooltip, Object.assign({ title: _jsx(FormattedMessage, { id: "ui.eventInfoDetails.inProgress", defaultMessage: "ui.eventInfoDetails.inProgress" }) }, { children: _jsx(Box, { className: classes.inProgress }) })))] }))), beforeRecurringInfo, hasRecurringInfo && scEvent.recurring !== SCEventRecurrenceType.NEVER && (_jsxs(Stack, Object.assign({ className: classes.iconTextWrapper }, { children: [!hideRecurringIcon && _jsx(Icon, Object.assign({ fontSize: "small" }, { children: "frequency" })), _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: `ui.eventInfoDetails.frequency.${scEvent.recurring}.placeholder`, defaultMessage: `ui.eventInfoDetails.frequency.${scEvent.recurring}.placeholder` }) }))] }))), beforePrivacyInfo, hasPrivacyInfo && (_jsxs(Stack, Object.assign({ className: classes.iconTextWrapper }, { children: [!hidePrivacyIcon && _jsx(Icon, Object.assign({ fontSize: "small" }, { children: scEvent.privacy === SCEventPrivacyType.PUBLIC ? 'public' : 'private' })), _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: privacy, defaultMessage: privacy }) })), "-", _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: location, defaultMessage: location }) }))] }))), beforeLocationInfo, hasLocationInfo && (_jsxs(Stack, Object.assign({ className: classes.iconTextWrapper }, { children: [!hideLocationIcon && (_jsx(Icon, Object.assign({ fontSize: "small" }, { children: scEvent.location === SCEventLocationType.ONLINE ? 'play_circle_outline' : 'add_location_alt' }))), scEvent.location === SCEventLocationType.ONLINE ? (scEvent.live_stream ? (_jsx(Button, Object.assign({ size: "small", variant: "contained", color: "secondary", component: Link, disabled: disableJoinEvent, to: scRoutingContext.url(SCRoutes.LIVESTREAM_ROUTE_NAME, scEvent.live_stream), className: classes.joinLive }, { children: _jsx(FormattedMessage, { defaultMessage: "ui.eventInfoDetails.live.join", id: "ui.eventInfoDetails.live.join" }) }))) : (_jsx(Link, Object.assign({ to: scEvent.link, target: "_blank", className: classes.link }, { children: _jsx(Typography, Object.assign({ variant: "body1", className: classes.url }, { children: scEvent.link })) })))) : (_jsx(Typography, Object.assign({ variant: "body1", className: classes.url }, { children: scEvent.geolocation })))] }))), beforeCreatedInfo, hasCreatedInfo && (_jsxs(Stack, Object.assign({ className: classes.creationWrapper }, { children: [!hideCreatedIcon && _jsx(Icon, Object.assign({ fontSize: "small" }, { children: "create" })), _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.eventInfoDetails.date.create", defaultMessage: "ui.eventInfoDetails.date.create", values: {
                                date: intl.formatDate(scEvent.created_at, {
                                    weekday: 'long',
                                    day: 'numeric',
                                    year: 'numeric',
                                    month: 'long'
                                })
                            } }) }))] })))] })));
}