@selfcommunity/react-ui/lib/esm/components/CourseCompletedDialog/CourseCompletedDialog.js

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

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import BaseDialog from '../../shared/BaseDialog';
import { Button, Stack, styled, Typography, useThemeProps } from '@mui/material';
import { FormattedMessage, useIntl } from 'react-intl';
import clapping from '../../assets/courses/clapping';
import { memo } from 'react';
import { Link, SCRoutes, useSCRouting } from '@selfcommunity/react-core';
const PREFIX = 'SCCourseCompletedDialog';
const classes = {
    root: `${PREFIX}-root`,
    wrapper: `${PREFIX}-wrapper`,
    title: `${PREFIX}-title`,
    descriptionPt1: `${PREFIX}-description-pt1`,
    descriptionPt2: `${PREFIX}-description-pt2`
};
const Root = styled(BaseDialog, {
    name: PREFIX,
    slot: 'Root',
    overridesResolver: (_props, styles) => styles.root
})(() => ({}));
function CourseCompletedDialog(inProps) {
    // PROPS
    const props = useThemeProps({
        props: inProps,
        name: PREFIX
    });
    const { course, onClose } = props;
    // CONTEXTS
    const scRoutingContext = useSCRouting();
    // HOOKS
    const intl = useIntl();
    return (_jsx(Root, Object.assign({ DialogContentProps: { dividers: false }, open: true, onClose: onClose, actions: _jsx(Button, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.COURSES_ROUTE_NAME, {}), size: "medium", variant: "contained" }, { children: _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.course.completedDialog.btn.label", defaultMessage: "ui.course.completedDialog.btn.label" }) })) })), className: classes.root }, { children: _jsxs(Stack, Object.assign({ className: classes.wrapper }, { children: [_jsx("img", { src: clapping, alt: intl.formatMessage({ id: 'ui.course.completedDialog.title', defaultMessage: 'ui.course.completedDialog.title' }), width: 100, height: 100 }), _jsx(Typography, Object.assign({ variant: "h2", className: classes.title }, { children: _jsx(FormattedMessage, { id: "ui.course.completedDialog.title", defaultMessage: "ui.course.completedDialog.title" }) })), _jsx(Typography, Object.assign({ variant: "h4", className: classes.descriptionPt1 }, { children: _jsx(FormattedMessage, { id: "ui.course.completedDialog.description.pt1", defaultMessage: "ui.course.completedDialog.description.pt1" }) })), _jsx(Typography, Object.assign({ variant: "h4", className: classes.descriptionPt2 }, { children: intl.formatMessage({ id: 'ui.course.completedDialog.description.pt2', defaultMessage: 'ui.course.completedDialog.description.pt2' }, {
                        courseName: course.name,
                        span: (chunks) => (_jsx(Typography, Object.assign({ component: "span", variant: "inherit", color: "primary" }, { children: chunks })))
                    }) }))] })) })));
}
export default memo(CourseCompletedDialog);