@selfcommunity/react-ui
Version:
React UI Components to integrate a Community created with SelfCommunity Platform.
198 lines (193 loc) • 11.7 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.PREFIX = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const styles_1 = require("@mui/material/styles");
const material_1 = require("@mui/material");
const system_1 = require("@mui/system");
const classnames_1 = tslib_1.__importDefault(require("classnames"));
const types_1 = require("../types");
const notistack_1 = require("notistack");
const react_intl_1 = require("react-intl");
const event_1 = tslib_1.__importDefault(require("../../../assets/liveStream/event"));
const live_1 = tslib_1.__importDefault(require("../../../assets/liveStream/live"));
const api_services_1 = require("@selfcommunity/api-services");
const constants_1 = require("../../LiveStreamRoom/constants");
const react_core_1 = require("@selfcommunity/react-core");
const types_2 = require("@selfcommunity/types");
const constants_2 = require("../../PlatformWidget/constants");
exports.PREFIX = 'SCLiveStreamSelector';
const classes = {
root: `${exports.PREFIX}-root`,
warning: `${exports.PREFIX}-warning`,
options: `${exports.PREFIX}-options`,
actions: `${exports.PREFIX}-actions`
};
const Root = (0, styles_1.styled)(material_1.Container, {
name: exports.PREFIX,
slot: 'Root'
})(({ theme }) => ({}));
// Styled components
const OptionCard = (0, styles_1.styled)(material_1.Paper, {
name: exports.PREFIX,
slot: 'optionCardRoot',
shouldForwardProp: (prop) => prop !== 'selected'
})(({ theme, selected }) => ({
'& h6': {
fontWeight: 'bold',
textTransform: 'uppercase'
}
}));
const FeatureItem = (0, styles_1.styled)(material_1.Box, {
name: exports.PREFIX,
slot: 'featureItemRoot'
})(({ theme }) => ({}));
/**
*> API documentation for the Community-JS LiveStreamSelector component. Learn about the available props and the CSS API.
*
#### Import
```jsx
import {LiveStreamSelector} from '@selfcommunity/react-ui';
```
#### Component Name
The name `SCLiveStreamSelector` can be used when providing style overrides in the theme.
#### CSS
|Rule Name|Global class|Description|
|---|---|---|
|root|.SCCreateLivestreamDialog-root|Styles applied to the root element.|
* @param inProps
*/
function LiveStreamSelector(inProps) {
//PROPS
const props = (0, system_1.useThemeProps)({
props: inProps,
name: exports.PREFIX
});
const { className, liveSelected, onLiveSelected, onNext } = props;
// CONTEXT
const scContext = (0, react_core_1.useSCContext)();
const scUserContext = (0, react_core_1.useSCUser)();
const { enqueueSnackbar } = (0, notistack_1.useSnackbar)();
// STATE
const [selectedOption, setSelectedOption] = (0, react_1.useState)(liveSelected);
const [timeRemaining, setTimeRemaining] = (0, react_1.useState)(null);
// HOOKS
const { preferences } = (0, react_core_1.useSCPreferences)();
const isCommunityOwner = (0, react_1.useMemo)(() => { var _a; return ((_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.id) === 1; }, [scUserContext.user]);
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_2.SCCommunitySubscriptionTier.FREE_TRIAL, [preferences]);
const isEnterpriseTier = (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_2.SCCommunitySubscriptionTier.ENTERPRISE, [preferences]);
const isStage = (0, react_1.useMemo)(() => preferences &&
react_core_1.SCPreferences.STATIC_ENVIRONMENT in preferences &&
preferences[react_core_1.SCPreferences.STATIC_ENVIRONMENT].value === types_2.SCCommunityEnvironment.STAGE, [preferences]);
const communityStackId = (0, react_1.useMemo)(() => preferences && react_core_1.SCPreferences.STATIC_ENVIRONMENT in preferences && preferences[react_core_1.SCPreferences.STATIC_STACKID].value, [preferences]);
const intl = (0, react_intl_1.useIntl)();
const options = [
{
title: intl.formatMessage({ id: 'ui.liveStreamForm.selector.scheduleLiveEvent', defaultMessage: 'ui.liveStreamForm.selector.scheduleLiveEvent' }),
image: event_1.default,
type: types_1.LiveStreamType.EVENT_LIVE,
features: [
intl.formatMessage({
id: 'ui.liveStreamForm.selector.scheduleLiveEventItem1',
defaultMessage: 'ui.liveStreamForm.selector.scheduleLiveEventItem1'
}),
intl.formatMessage({
id: 'ui.liveStreamForm.selector.scheduleLiveEventItem2',
defaultMessage: 'ui.liveStreamForm.selector.scheduleLiveEventItem2'
}),
intl.formatMessage({
id: 'ui.liveStreamForm.selector.scheduleLiveEventItem3',
defaultMessage: 'ui.liveStreamForm.selector.scheduleLiveEventItem3'
})
]
},
{
title: intl.formatMessage({
id: 'ui.liveStreamForm.selector.scheduleLiveStream',
defaultMessage: 'ui.liveStreamForm.selector.scheduleLiveStream'
}),
image: live_1.default,
type: types_1.LiveStreamType.DIRECT_LIVE,
features: [
intl.formatMessage({
id: 'ui.liveStreamForm.selector.scheduleLiveStreamItem1',
defaultMessage: 'ui.liveStreamForm.selector.scheduleLiveStreamItem1'
}),
intl.formatMessage({
id: 'ui.liveStreamForm.selector.scheduleLiveStreamItem2',
defaultMessage: 'ui.liveStreamForm.selector.scheduleLiveStreamItem2'
}),
intl.formatMessage({
id: 'ui.liveStreamForm.selector.scheduleLiveStreamItem3',
defaultMessage: 'ui.liveStreamForm.selector.scheduleLiveStreamItem3'
})
]
}
];
const handleOptionSelect = (type) => {
setSelectedOption(type);
onLiveSelected(type);
};
const handleNext = () => {
if (!selectedOption) {
enqueueSnackbar((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.common.error", defaultMessage: "ui.common.error" }), {
variant: 'error',
autoHideDuration: 3000
});
}
else {
onNext && onNext(selectedOption);
}
};
const fetchLivestreamStatus = () => {
api_services_1.LiveStreamApiClient.getMonthlyDuration()
.then((r) => {
setTimeRemaining(r.remaining_minutes);
})
.catch((error) => {
console.error('Error fetching live status:', error);
});
};
(0, react_1.useEffect)(() => {
fetchLivestreamStatus();
}, []);
const warning = (0, react_1.useMemo)(() => {
let _message;
if (isFreeTrialTier && isCommunityOwner && !isEnterpriseTier) {
_message = ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamForm.selector.warningSubscriptionRequired", defaultMessage: "ui.liveStreamForm.selector.warningSubscriptionRequired", values: {
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
// @ts-ignore
link: (...chunks) => ((0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ target: "_blank", to: `${isStage ? constants_2.HUB_STAGE : constants_2.HUB_PROD}dashboard/community/${communityStackId}/subscription` }, { children: chunks })))
} }));
}
else if (timeRemaining !== null && timeRemaining <= constants_1.WARNING_THRESHOLD_EXPIRING_SOON) {
if (timeRemaining <= 1) {
_message = ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamForm.selector.warningMinutesExausted", defaultMessage: "ui.liveStreamForm.selector.warningMinutesExausted" }));
}
else if (timeRemaining <= constants_1.WARNING_THRESHOLD_EXPIRING_SOON) {
_message = ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamForm.selector.warningRemainingMinutes", defaultMessage: "ui.liveStreamForm.selector.warningRemainingMinutes", values: { minutes: timeRemaining } }));
}
}
if (_message) {
return ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.warning }, { children: (0, jsx_runtime_1.jsx)(material_1.Alert, Object.assign({ variant: "filled", severity: "warning" }, { children: _message })) })));
}
return null;
}, [timeRemaining, isFreeTrialTier]);
return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className), maxWidth: "lg", sx: { py: 4 } }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h4", component: "h1", align: "center", gutterBottom: true, sx: { mb: 4, fontWeight: 500 } }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamForm.selector.title", defaultMessage: "ui.liveStreamForm.selector.title" }) })), warning, (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.options }, { children: options.map((option, index) => ((0, jsx_runtime_1.jsxs)(OptionCard, Object.assign({ selected: selectedOption === option.type, onClick: () => handleOptionSelect(option.type), elevation: 0, role: "button", tabIndex: 0, onKeyDown: (e) => {
if (e.key === 'Enter' || e.key === ' ') {
handleOptionSelect(index);
e.preventDefault();
}
} }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h6" }, { children: option.title })), (0, jsx_runtime_1.jsx)(material_1.Radio, { checked: selectedOption === option.type })] }), (0, jsx_runtime_1.jsx)("img", { src: option.image, alt: "option-image" }), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ component: "ul" }, { children: option.features.map((feature, featureIndex) => {
return ((0, jsx_runtime_1.jsx)(FeatureItem, Object.assign({ component: "li" }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", color: "text.secondary", sx: { flex: 1 } }, { children: feature })) }), featureIndex));
}) }))] }), index))) })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.actions }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ disabled: !selectedOption || !timeRemaining || isFreeTrialTier, variant: "contained", onClick: handleNext, color: "secondary" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.liveStreamForm.selector.next", defaultMessage: "ui.liveStreamForm.selector.next" }) })) }))] })));
}
exports.default = LiveStreamSelector;