64 lines
2.4 KiB
JavaScript
64 lines
2.4 KiB
JavaScript
import React, { useEffect } from 'react';
|
|
|
|
import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
|
|
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
|
|
import { Helmet } from 'react-helmet';
|
|
import { useSelector } from 'react-redux';
|
|
import { Alert, Button } from '@edx/paragon';
|
|
import { getConfig } from '@edx/frontend-platform';
|
|
|
|
import { useModel } from '../../../generic/model-store';
|
|
|
|
import CatalogSuggestion from './CatalogSuggestion';
|
|
import DashboardFootnote from './DashboardFootnote';
|
|
import messages from './messages';
|
|
import { logClick, logVisit } from './utils';
|
|
|
|
function CourseInProgress({ intl }) {
|
|
const { courseId } = useSelector(state => state.courseware);
|
|
const { org, tabs, title } = useModel('coursewareMeta', courseId);
|
|
const { administrator } = getAuthenticatedUser();
|
|
|
|
// Get dates tab link for 'view course schedule' button
|
|
const datesTab = tabs.find(tab => tab.slug === 'dates');
|
|
const datesTabLink = datesTab && datesTab.url;
|
|
|
|
useEffect(() => logVisit(org, courseId, administrator, 'in_progress'), [org, courseId, administrator]);
|
|
|
|
return (
|
|
<>
|
|
<Helmet>
|
|
<title>{`${intl.formatMessage(messages.endOfCourseTitle)} | ${title} | ${getConfig().SITE_NAME}`}</title>
|
|
</Helmet>
|
|
<div className="row w-100 mx-0 mb-4 px-5 py-4 border border-light justify-content-center">
|
|
<div className="col-12 p-0 h2 text-center">
|
|
{ intl.formatMessage(messages.courseInProgressHeader) }
|
|
</div>
|
|
<Alert variant="primary" className="col col-lg-10 mt-4 d-flex">
|
|
<div className="row w-100 m-0 align-items-start">
|
|
<div className="flex-grow-1 col-md p-0">{ intl.formatMessage(messages.courseInProgressDescription) }</div>
|
|
{datesTabLink && (
|
|
<Button
|
|
variant="primary"
|
|
className="flex-shrink-0 mt-3 mt-md-0 mb-1 mb-md-0 ml-md-5"
|
|
href={datesTabLink}
|
|
onClick={() => logClick(org, courseId, administrator, 'view_dates_tab')}
|
|
>
|
|
{intl.formatMessage(messages.viewCourseScheduleButton)}
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</Alert>
|
|
<DashboardFootnote variant="in_progress" />
|
|
<CatalogSuggestion variant="in_progress" />
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
|
|
CourseInProgress.propTypes = {
|
|
intl: intlShape.isRequired,
|
|
};
|
|
|
|
export default injectIntl(CourseInProgress);
|