@@ -172,20 +159,23 @@ function OutlineTab({ intl }) {
)}
- {!courseGoalToDisplay && goalOptions && goalOptions.length > 0 && (
+ {!deprecatedCourseGoalToDisplay && goalOptions && goalOptions.length > 0 && (
{ setCourseGoalToDisplay(newGoal); }}
+ setGoalToDisplay={(newGoal) => { setDeprecatedCourseGoalToDisplay(newGoal); }}
setGoalToastHeader={(newHeader) => { setGoalToastHeader(newHeader); }}
/>
)}
+ {resumeCourseUrl && (
+
+ )}
{rootCourseId && (
<>
-
+
@@ -211,15 +201,21 @@ function OutlineTab({ intl }) {
courseId={courseId}
username={username}
/>
- {courseGoalToDisplay && goalOptions && goalOptions.length > 0 && (
+ {deprecatedCourseGoalToDisplay && goalOptions && goalOptions.length > 0 && (
{ setCourseGoalToDisplay(newGoal); }}
+ selectedGoal={deprecatedCourseGoalToDisplay}
+ setGoalToDisplay={(newGoal) => { setDeprecatedCourseGoalToDisplay(newGoal); }}
setGoalToastHeader={(newHeader) => { setGoalToastHeader(newHeader); }}
/>
)}
+ {weeklyLearningGoalEnabled && (
+
+ )}
diff --git a/src/course-home/outline-tab/OutlineTab.test.jsx b/src/course-home/outline-tab/OutlineTab.test.jsx
index 52c77533..a539c085 100644
--- a/src/course-home/outline-tab/OutlineTab.test.jsx
+++ b/src/course-home/outline-tab/OutlineTab.test.jsx
@@ -6,6 +6,7 @@ import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
import MockAdapter from 'axios-mock-adapter';
import Cookies from 'js-cookie';
import userEvent from '@testing-library/user-event';
+import messages from './messages';
import { buildMinimalCourseBlocks } from '../../shared/data/__factories__/courseBlocks.factory';
import {
@@ -73,7 +74,7 @@ describe('Outline Tab', () => {
describe('Course Outline', () => {
it('displays link to start course', async () => {
await fetchAndRender();
- expect(screen.getByRole('link', { name: 'Start Course' })).toBeInTheDocument();
+ expect(screen.getByRole('link', { name: messages.start.defaultMessage })).toBeInTheDocument();
});
it('displays link to resume course', async () => {
@@ -413,6 +414,111 @@ describe('Outline Tab', () => {
});
});
+ describe('Start or Resume Course Card', () => {
+ it('renders startOrResumeCourseCard', async () => {
+ await fetchAndRender();
+ expect(screen.queryByTestId('start-resume-card')).toBeInTheDocument();
+ });
+ });
+
+ describe('Weekly Learning Goal', () => {
+ it('does not render weekly learning goal if weeklyLearningGoalEnabled is false', async () => {
+ await fetchAndRender();
+ expect(screen.queryByTestId('weekly-learning-goal-card')).not.toBeInTheDocument();
+ });
+
+ describe('weekly learning goal is not set', () => {
+ beforeEach(async () => {
+ setTabData({
+ course_goals: {
+ weekly_learning_goal_enabled: true,
+ },
+ });
+ await fetchAndRender();
+ });
+
+ it('renders weekly learning goal card', async () => {
+ expect(screen.queryByTestId('weekly-learning-goal-card')).toBeInTheDocument();
+ });
+
+ it('disables the subscribe button if no goal is set', async () => {
+ expect(screen.getByLabelText(messages.setGoalReminder.defaultMessage)).toBeDisabled();
+ });
+
+ it('does not show the deprecated goals feature if WeeklyLearningGoal is enabled', async () => {
+ expect(screen.queryByTestId('course-goal-card')).not.toBeInTheDocument();
+ expect(screen.queryByLabelText('Goal')).not.toBeInTheDocument();
+ expect(screen.queryByTestId('edit-goal-selector')).not.toBeInTheDocument();
+ });
+
+ it.each`
+ level | days
+ ${'casual'} | ${1}
+ ${'regular'} | ${3}
+ ${'intense'} | ${5}
+ `('calls the API with a goal of $days when $level goal is clicked', async ({ level, days }) => {
+ // click on Casual goal
+ const button = await screen.queryByTestId(`weekly-learning-goal-input-${level}`);
+ fireEvent.click(button);
+ // Verify the request was made
+ await waitFor(() => {
+ expect(axiosMock.history.post[0].url).toMatch(goalUrl);
+ // subscribe is turned on automatically
+ expect(axiosMock.history.post[0].data).toMatch(`{"course_id":"${courseId}","days_per_week":${days},"subscribed_to_reminders":true}`);
+ // verify that the additional info about subscriptions shows up
+ expect(screen.queryByText(messages.goalReminderDetail.defaultMessage)).toBeInTheDocument();
+ });
+ expect(screen.getByLabelText(messages.setGoalReminder.defaultMessage)).toBeEnabled();
+});
+ it('shows and hides subscribe to reminders additional text', async () => {
+ const button = await screen.getByTestId('weekly-learning-goal-input-regular');
+ fireEvent.click(button);
+ // Verify the request was made
+ await waitFor(() => {
+ expect(axiosMock.history.post[0].url).toMatch(goalUrl);
+ // subscribe is turned on automatically
+ expect(axiosMock.history.post[0].data).toMatch(`{"course_id":"${courseId}","days_per_week":3,"subscribed_to_reminders":true}`);
+ // verify that the additional info about subscriptions shows up
+ expect(screen.queryByText(messages.goalReminderDetail.defaultMessage)).toBeInTheDocument();
+ });
+ expect(screen.getByLabelText(messages.setGoalReminder.defaultMessage)).toBeEnabled();
+
+ // Click on subscribe to reminders toggle
+ const subscriptionSwitch = await screen.getByRole('switch', { name: messages.setGoalReminder.defaultMessage });
+ expect(subscriptionSwitch).toBeInTheDocument();
+
+ fireEvent.click(subscriptionSwitch);
+ await waitFor(() => {
+ expect(axiosMock.history.post[1].url).toMatch(goalUrl);
+ expect(axiosMock.history.post[1].data)
+ .toMatch(`{"course_id":"${courseId}","days_per_week":3,"subscribed_to_reminders":false}`);
+ });
+
+ // verify that the additional info about subscriptions gets hidden
+ expect(screen.queryByText(messages.goalReminderDetail.defaultMessage)).not.toBeInTheDocument();
+ });
+ });
+ describe('weekly learning goal is already set', () => {
+ beforeEach(async () => {
+ setTabData({
+ course_goals: {
+ weekly_learning_goal_enabled: true,
+ selected_goal: {
+ subscribed_to_reminders: true,
+ days_per_week: 3,
+ },
+ },
+ });
+ await fetchAndRender();
+ });
+
+ it('has button for weekly learning goal selected', async () => {
+ const radio = await screen.queryByTestId('weekly-learning-goal-input-regular');
+ expect(radio.checked).toEqual(true);
+ });
+ });
+ });
+
describe('Course Handouts', () => {
it('renders title when handouts are available', async () => {
await fetchAndRender();
@@ -856,7 +962,7 @@ describe('Outline Tab', () => {
],
});
await fetchAndRender();
- expect(screen.getByRole('link', { name: 'Start Course' })).toBeInTheDocument();
+ expect(screen.getByRole('link', { name: messages.start.defaultMessage })).toBeInTheDocument();
expect(screen.queryByText('More content is coming soon!')).not.toBeInTheDocument();
});
});
diff --git a/src/course-home/outline-tab/messages.js b/src/course-home/outline-tab/messages.js
index 0a2de618..f52e3e5a 100644
--- a/src/course-home/outline-tab/messages.js
+++ b/src/course-home/outline-tab/messages.js
@@ -5,6 +5,20 @@ const messages = defineMessages({
id: 'learning.outline.dates.all',
defaultMessage: 'View all course dates',
},
+ casualGoalButtonText: {
+ id: 'learning.outline.goalButton.casual.text',
+ defaultMessage: '1 day a week',
+ },
+ casualGoalButtonTitle: {
+ id: 'learning.outline.goalButton.screenReader.text',
+ defaultMessage: 'Casual',
+ description: 'A very short description of the least intense of three learning goals',
+ },
+ certAlt: {
+ id: 'learning.outline.certificateAlt',
+ defaultMessage: 'Example Certificate',
+ description: 'Alternate text displayed when the example certificate image cannot be displayed.',
+ },
collapseAll: {
id: 'learning.outline.collapseAll',
defaultMessage: 'Collapse all',
@@ -39,6 +53,10 @@ const messages = defineMessages({
defaultMessage: 'Goal',
description: 'Label for the selected course goal',
},
+ goalReminderDetail: {
+ id: 'learning.outline.goalReminderDetail',
+ defaultMessage: 'If we notice you’re not quite at your goal, we’ll send you an email reminder.',
+ },
goalUnsure: {
id: 'learning.outline.goalUnsure',
defaultMessage: 'Not sure yet',
@@ -57,6 +75,15 @@ const messages = defineMessages({
defaultMessage: 'Incomplete section',
description: 'Text used to describe the gray checkmark icon in front of a section title',
},
+ intenseGoalButtonText: {
+ id: 'learning.outline.goalButton.intense.text',
+ defaultMessage: '5 days a week',
+ },
+ intenseGoalButtonTitle: {
+ id: 'learning.outline.goalButton.intense.title',
+ defaultMessage: 'Intense',
+ description: 'A very short description of the most intensive option of three learning goals, Casual, Regular and Intense',
+ },
learnMore: {
id: 'learning.outline.learnMore',
defaultMessage: 'Learn More',
@@ -66,6 +93,24 @@ const messages = defineMessages({
defaultMessage: 'Open',
description: 'A button to open the given section of the course outline',
},
+ proctoringInfoPanel: {
+ id: 'learning.proctoringPanel.header',
+ defaultMessage: 'This course contains proctored exams',
+ },
+ regularGoalButtonText: {
+ id: 'learning.outline.goalButton.regular.text',
+ defaultMessage: '3 days a week',
+ },
+ regularGoalButtonTitle: {
+ id: 'learning.outline.goalButton.regular.title',
+ defaultMessage: 'Regular',
+ description: 'A very short description of the middle option of three learning goals, Casual, Regular and Intense',
+ },
+ resumeBlurb: {
+ id: 'learning.outline.resumeBlurb',
+ defaultMessage: 'Pick up where you left off',
+ description: 'Text describing to the learner that they can return to the last section they visited within the course.',
+ },
resume: {
id: 'learning.outline.resume',
defaultMessage: 'Resume course',
@@ -74,9 +119,30 @@ const messages = defineMessages({
id: 'learning.outline.setGoal',
defaultMessage: 'To start, set a course goal by selecting the option below that best describes your learning plan.',
},
+ setGoalReminder: {
+ id: 'learning.outline.setGoalReminder',
+ defaultMessage: 'Set a goal reminder',
+ },
+ setLearningGoalButtonScreenReaderText: {
+ id: 'learning.outline.goalButton.casual.title',
+ defaultMessage: 'Set a learning goal style.',
+ description: 'screen reader text informing learner they can select an intensity of learning goal',
+ },
+ setWeeklyGoal: {
+ id: 'learning.outline.setWeeklyGoal',
+ defaultMessage: 'Set a weekly learning goal',
+ },
+ setWeeklyGoalDetail: {
+ id: 'learning.outline.setWeeklyGoalDetail',
+ defaultMessage: 'Setting a goal motivates you to finish the course. You can always change it later.',
+ },
start: {
id: 'learning.outline.start',
- defaultMessage: 'Start Course',
+ defaultMessage: 'Start course',
+ },
+ startBlurb: {
+ id: 'learning.outline.startBlurb',
+ defaultMessage: 'Begin your course today',
},
tools: {
id: 'learning.outline.tools',
@@ -90,11 +156,6 @@ const messages = defineMessages({
id: 'learning.outline.upgradeTitle',
defaultMessage: 'Pursue a verified certificate',
},
- certAlt: {
- id: 'learning.outline.certificateAlt',
- defaultMessage: 'Example Certificate',
- description: 'Alternate text displayed when the example certificate image cannot be displayed.',
- },
welcomeMessage: {
id: 'learning.outline.welcomeMessage',
defaultMessage: 'Welcome Message',
@@ -112,10 +173,6 @@ const messages = defineMessages({
defaultMessage: 'Welcome to',
description: 'This precedes the title of the course',
},
- proctoringInfoPanel: {
- id: 'learning.proctoringPanel.header',
- defaultMessage: 'This course contains proctored exams',
- },
notStartedProctoringStatus: {
id: 'learning.proctoringPanel.status.notStarted',
defaultMessage: 'Not Started',
diff --git a/src/course-home/outline-tab/widgets/CourseGoalCard.jsx b/src/course-home/outline-tab/widgets/DeprecatedCourseGoalCard.jsx
similarity index 90%
rename from src/course-home/outline-tab/widgets/CourseGoalCard.jsx
rename to src/course-home/outline-tab/widgets/DeprecatedCourseGoalCard.jsx
index 6d724e39..de09016b 100644
--- a/src/course-home/outline-tab/widgets/CourseGoalCard.jsx
+++ b/src/course-home/outline-tab/widgets/DeprecatedCourseGoalCard.jsx
@@ -6,9 +6,9 @@ import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
import messages from '../messages';
-import { saveCourseGoal } from '../../data';
+import { deprecatedSaveCourseGoal } from '../../data';
-function CourseGoalCard({
+function DeprecatedCourseGoalCard({
courseId,
goalOptions,
intl,
@@ -22,7 +22,7 @@ function CourseGoalCard({
text: event.currentTarget.getAttribute('data-goal-text'),
};
- saveCourseGoal(courseId, selectedGoal.key).then((response) => {
+ deprecatedSaveCourseGoal(courseId, selectedGoal.key).then((response) => {
const { data } = response;
const {
header,
@@ -80,7 +80,7 @@ function CourseGoalCard({
);
}
-CourseGoalCard.propTypes = {
+DeprecatedCourseGoalCard.propTypes = {
courseId: PropTypes.string.isRequired,
goalOptions: PropTypes.arrayOf(
PropTypes.arrayOf(PropTypes.string),
@@ -91,4 +91,4 @@ CourseGoalCard.propTypes = {
setGoalToastHeader: PropTypes.func.isRequired,
};
-export default injectIntl(CourseGoalCard);
+export default injectIntl(DeprecatedCourseGoalCard);
diff --git a/src/course-home/outline-tab/widgets/FlagButton.jsx b/src/course-home/outline-tab/widgets/FlagButton.jsx
new file mode 100644
index 00000000..30deff76
--- /dev/null
+++ b/src/course-home/outline-tab/widgets/FlagButton.jsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+function FlagButton({
+ buttonIcon,
+ title,
+ text,
+}) {
+ return (
+
+
+ {buttonIcon}
+
+
+ {title}
+
+
+ {text}
+
+
+
{intl.formatMessage(messages.startBlurb)}
+
+
+
+
+
+
+
+ {intl.formatMessage(messages.setWeeklyGoal)}
+
+
+ {intl.formatMessage(messages.setWeeklyGoalDetail)}
+
+
+
+
+
+
+
+ handleSubscribeToReminders(event)}
+ disabled={!daysPerWeekGoal}
+ >
+ {intl.formatMessage(messages.setGoalReminder)}
+
+
+
+ {isGetReminderSelected && (
+
+
+
+
+
+
+ {intl.formatMessage(messages.goalReminderDetail)}
+
+
+
+