diff --git a/src/course-home/outline-tab/OutlineTab.jsx b/src/course-home/outline-tab/OutlineTab.jsx index f84e4db9..8355723a 100644 --- a/src/course-home/outline-tab/OutlineTab.jsx +++ b/src/course-home/outline-tab/OutlineTab.jsx @@ -1,6 +1,6 @@ import React, { useState } from 'react'; import { useSelector } from 'react-redux'; -import { sendTrackEvent, sendTrackingLogEvent } from '@edx/frontend-platform/analytics'; +import { sendTrackEvent } from '@edx/frontend-platform/analytics'; import { injectIntl, intlShape } from '@edx/frontend-platform/i18n'; import { Button, Toast } from '@edx/paragon'; @@ -32,7 +32,7 @@ import AccountActivationAlert from '../../alerts/logistration-alert/AccountActiv /** [MM-P2P] Experiment */ import { initHomeMMP2P, MMP2PFlyover } from '../../experiments/mm-p2p'; -import WeeklyLearningGoal from './widgets/WeeklyLearningGoal'; +import WeeklyLearningGoal from './widgets/WeeklyLearningGoalCard'; function OutlineTab({ intl }) { const { @@ -63,7 +63,6 @@ function OutlineTab({ intl }) { userTimezone, }, resumeCourse: { - hasVisitedCourse, url: resumeCourseUrl, }, offer, @@ -80,14 +79,6 @@ function OutlineTab({ intl }) { courserun_key: courseId, }; - const logResumeCourseClick = () => { - sendTrackingLogEvent('edx.course.home.resume_course.clicked', { - ...eventProperties, - event_type: hasVisitedCourse ? 'resume' : 'start', - url: resumeCourseUrl, - }); - }; - // Below the course title alerts (appearing in the order listed here) const accessExpirationAlertMasquerade = useAccessExpirationAlertMasquerade(accessExpiration, userTimezone, 'outline-course-alerts'); const courseStartAlert = useCourseStartAlert(courseId); @@ -170,11 +161,7 @@ function OutlineTab({ intl }) { /> )} {resumeCourseUrl && ( - + )} {rootCourseId && ( diff --git a/src/course-home/outline-tab/messages.js b/src/course-home/outline-tab/messages.js index 57deea15..2636a653 100644 --- a/src/course-home/outline-tab/messages.js +++ b/src/course-home/outline-tab/messages.js @@ -137,6 +137,7 @@ const messages = defineMessages({ casualGoalButtonTitle: { id: 'learning.outline.goalButton.screenReader.text', defaultMessage: 'Casual', + description: 'A very short description of the least intense of three learning goals', }, casualGoalButtonText: { id: 'learning.outline.goalButton.casual.text', @@ -145,6 +146,7 @@ const messages = defineMessages({ 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', }, regularGoalButtonText: { id: 'learning.outline.goalButton.regular.text', @@ -153,6 +155,7 @@ const messages = defineMessages({ 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', }, intenseGoalButtonText: { id: 'learning.outline.goalButton.intense.text', diff --git a/src/course-home/outline-tab/widgets/StartOrResumeCourseCard.jsx b/src/course-home/outline-tab/widgets/StartOrResumeCourseCard.jsx index 950f4b72..439d289f 100644 --- a/src/course-home/outline-tab/widgets/StartOrResumeCourseCard.jsx +++ b/src/course-home/outline-tab/widgets/StartOrResumeCourseCard.jsx @@ -1,17 +1,42 @@ import React from 'react'; -import PropTypes from 'prop-types'; - import { Button, Card } from '@edx/paragon'; import { injectIntl, intlShape } from '@edx/frontend-platform/i18n'; +import { useSelector } from 'react-redux'; +import { sendTrackingLogEvent } from '@edx/frontend-platform/analytics'; import messages from '../messages'; +import { useModel } from '../../../generic/model-store'; + +function StartOrResumeCourseCard({ intl }) { + const { + courseId, + } = useSelector(state => state.courseHome); + + const { + org, + } = useModel('courseHomeMeta', courseId); + + const eventProperties = { + org_key: org, + courserun_key: courseId, + }; + + const { + resumeCourse: { + hasVisitedCourse, + url: resumeCourseUrl, + }, + + } = useModel('outline', courseId); + + const logResumeCourseClick = () => { + sendTrackingLogEvent('edx.course.home.resume_course.clicked', { + ...eventProperties, + event_type: hasVisitedCourse ? 'resume' : 'start', + url: resumeCourseUrl, + }); + }; -function StartOrResumeCourseCard({ - hasVisitedCourse, - resumeCourseUrl, - logResumeCourseClick, - intl, -}) { return ( @@ -34,9 +59,6 @@ function StartOrResumeCourseCard({ } StartOrResumeCourseCard.propTypes = { - hasVisitedCourse: PropTypes.bool.isRequired, - resumeCourseUrl: PropTypes.string.isRequired, - logResumeCourseClick: PropTypes.func.isRequired, intl: intlShape.isRequired, }; diff --git a/src/course-home/outline-tab/widgets/WeeklyLearningGoal.jsx b/src/course-home/outline-tab/widgets/WeeklyLearningGoalCard.jsx similarity index 83% rename from src/course-home/outline-tab/widgets/WeeklyLearningGoal.jsx rename to src/course-home/outline-tab/widgets/WeeklyLearningGoalCard.jsx index 5c34fabf..c4a33422 100644 --- a/src/course-home/outline-tab/widgets/WeeklyLearningGoal.jsx +++ b/src/course-home/outline-tab/widgets/WeeklyLearningGoalCard.jsx @@ -13,7 +13,7 @@ import FlagButton from './FlagButton'; import { saveWeeklyCourseGoal } from '../../data'; -function WeeklyLearningGoal({ +function WeeklyLearningGoalCard({ daysPerWeek, subscribedToReminders, courseId, @@ -22,12 +22,12 @@ function WeeklyLearningGoal({ const [daysPerWeekGoal, setDaysPerWeekGoal] = useState(daysPerWeek); // eslint-disable-next-line react/prop-types const [isGetReminderSelected, setGetReminderSelected] = useState(subscribedToReminders); - const LevelToDays = { + const weeklyLearningGoalLevels = { CASUAL: 3, REGULAR: 4, INTENSE: 5, }; - Object.freeze(LevelToDays); + Object.freeze(weeklyLearningGoalLevels); function handleSelect(days) { setDaysPerWeekGoal(days); @@ -45,7 +45,7 @@ function WeeklyLearningGoal({ -
{intl.formatMessage(messages.setWeeklyGoal)}
+

{intl.formatMessage(messages.setWeeklyGoal)}

{intl.formatMessage(messages.setWeeklyGoalDetail)} @@ -57,8 +57,8 @@ function WeeklyLearningGoal({ srText={intl.formatMessage(messages.setLearningGoalButtonScreenReaderText)} title={intl.formatMessage(messages.casualGoalButtonTitle)} text={intl.formatMessage(messages.casualGoalButtonText)} - isEnabled={LevelToDays.CASUAL === daysPerWeekGoal} - handleSelect={() => { handleSelect(LevelToDays.CASUAL); }} + isEnabled={weeklyLearningGoalLevels.CASUAL === daysPerWeekGoal} + handleSelect={() => { handleSelect(weeklyLearningGoalLevels.CASUAL); }} />
@@ -67,8 +67,8 @@ function WeeklyLearningGoal({ srText={intl.formatMessage(messages.setLearningGoalButtonScreenReaderText)} title={intl.formatMessage(messages.regularGoalButtonTitle)} text={intl.formatMessage(messages.regularGoalButtonText)} - isEnabled={LevelToDays.REGULAR === daysPerWeekGoal} - handleSelect={() => { handleSelect(LevelToDays.REGULAR); }} + isEnabled={weeklyLearningGoalLevels.REGULAR === daysPerWeekGoal} + handleSelect={() => { handleSelect(weeklyLearningGoalLevels.REGULAR); }} />
@@ -77,8 +77,8 @@ function WeeklyLearningGoal({ srText={intl.formatMessage(messages.setLearningGoalButtonScreenReaderText)} title={intl.formatMessage(messages.intenseGoalButtonTitle)} text={intl.formatMessage(messages.intenseGoalButtonText)} - isEnabled={LevelToDays.INTENSE === daysPerWeekGoal} - handleSelect={() => { handleSelect(LevelToDays.INTENSE); }} + isEnabled={weeklyLearningGoalLevels.INTENSE === daysPerWeekGoal} + handleSelect={() => { handleSelect(weeklyLearningGoalLevels.INTENSE); }} />
@@ -111,15 +111,15 @@ function WeeklyLearningGoal({ ); } -WeeklyLearningGoal.propTypes = { +WeeklyLearningGoalCard.propTypes = { daysPerWeek: PropTypes.number, subscribedToReminders: PropTypes.bool, courseId: PropTypes.string.isRequired, intl: intlShape.isRequired, }; -WeeklyLearningGoal.defaultProps = { +WeeklyLearningGoalCard.defaultProps = { daysPerWeek: null, subscribedToReminders: false, }; -export default injectIntl(WeeklyLearningGoal); +export default injectIntl(WeeklyLearningGoalCard);