@selfcommunity/react-ui/lib/esm/components/CourseDashboard/Header.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, Typography } from '@mui/material';
import { SCContentType, SCCourseJoinStatusType, SCCoursePrivacyType } from '@selfcommunity/types';
import { FormattedMessage, useIntl } from 'react-intl';
import { PREFIX } from './constants';
import { memo } from 'react';
import { Link, SCRoutes, useSCPaymentsEnabled, useSCRouting } from '@selfcommunity/react-core';
import { SCCourseEditTabType } from '../../types';
import classNames from 'classnames';
import CourseTypePopover from '../../shared/CourseTypePopover';
import BuyButton from '../BuyButton';
const classes = {
    header: `${PREFIX}-header`,
    img: `${PREFIX}-header-img`,
    outerWrapper: `${PREFIX}-header-outer-wrapper`,
    innerWrapper: `${PREFIX}-header-inner-wrapper`,
    iconWrapper: `${PREFIX}-header-icon-wrapper`,
    buttonPopover: `${PREFIX}-header-button-popover`,
    contrastColor: `${PREFIX}-contrast-color`
};
function getUrlEditDashboard(course) {
    return {
        id: course.id,
        slug: course.slug,
        tab: SCCourseEditTabType.LESSONS
    };
}
function HeaderCourseDashboard(props) {
    var _a;
    // PROPS
    const { course, hasAction = false } = props;
    // CONTEXTS
    const scRoutingContext = useSCRouting();
    // INTL
    const intl = useIntl();
    // PAYMENTS
    const { isPaymentsEnabled } = useSCPaymentsEnabled();
    return (_jsxs(Box, Object.assign({ className: classes.header }, { children: [_jsx("img", { src: course.image_bigger, alt: course.image_bigger, className: classes.img }), _jsx(Typography, Object.assign({ variant: "h3", className: classes.contrastColor }, { children: course.name })), _jsxs(Stack, Object.assign({ className: classes.outerWrapper }, { children: [_jsxs(Stack, Object.assign({ className: classes.innerWrapper }, { children: [_jsxs(Stack, Object.assign({ className: classNames(classes.iconWrapper, classes.contrastColor) }, { children: [_jsx(Icon, Object.assign({ fontSize: "small" }, { children: "public" })), _jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedMessage, { id: "ui.course.label", defaultMessage: "ui.course.label", values: {
                                                privacy: intl.formatMessage({
                                                    id: `ui.course.privacy.${course.privacy === SCCoursePrivacyType.DRAFT ? 'draft' : course.privacy}`,
                                                    defaultMessage: `ui.course.privacy.${course.privacy === SCCoursePrivacyType.DRAFT ? 'draft' : course.privacy}`
                                                })
                                            } }) }))] })), _jsx(CourseTypePopover, { course: course }), isPaymentsEnabled &&
                                ((_a = course.paywalls) === null || _a === void 0 ? void 0 : _a.length) > 0 &&
                                (course.privacy === SCCoursePrivacyType.OPEN ||
                                    (course.privacy === SCCoursePrivacyType.PRIVATE && course.join_status && course.join_status !== SCCourseJoinStatusType.REQUESTED)) && (_jsx(BuyButton, { size: "md", variant: "text", startIcon: _jsx(Icon, { children: "dredit-card" }), contentType: SCContentType.COURSE, content: course, label: _jsx(FormattedMessage, { id: "ui.course.paid", defaultMessage: "ui.course.paid" }) }))] })), hasAction && (_jsx(Button, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.COURSE_EDIT_ROUTE_NAME, getUrlEditDashboard(course)), size: "small", color: "primary", variant: "contained" }, { children: _jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedMessage, { id: "ui.course.dashboard.teacher.btn.label", defaultMessage: "ui.course.dashboard.teacher.btn.label" }) })) })))] }))] })));
}
export default memo(HeaderCourseDashboard);