feat: [AA-906] more review updates and refactoring

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 && (
-          <StartOrResumeCourseCard
-            hasVisitedCourse={hasVisitedCourse}
-            resumeCourseUrl={resumeCourseUrl}
-            logResumeCourseClick={logResumeCourseClick}
-          />
+          <StartOrResumeCourseCard />
           )}
           <WelcomeMessage courseId={courseId} />
           {rootCourseId && (

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',

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 (
     <Card className="mb-3" data-testid="start-resume-panel">
       <Card.Body>
@@ -34,9 +59,6 @@ function StartOrResumeCourseCard({
 }
 
 StartOrResumeCourseCard.propTypes = {
-  hasVisitedCourse: PropTypes.bool.isRequired,
-  resumeCourseUrl: PropTypes.string.isRequired,
-  logResumeCourseClick: PropTypes.func.isRequired,
   intl: intlShape.isRequired,
 };
 

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({
       <Card className="mb-3" data-testid="course-goal-card">
         <Card.Body>
           <Card.Title>
-            <div className="h4 m-0">{intl.formatMessage(messages.setWeeklyGoal)}</div>
+            <h4 className="m-0">{intl.formatMessage(messages.setWeeklyGoal)}</h4>
           </Card.Title>
           <Card.Text>
             {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); }}
               />
             </div>
             <div className="col-auto col-md-12 col-xl-auto m-0 p-0 pb-md-3 pb-xl-0">
@@ -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); }}
               />
             </div>
             <div className="col-auto col-md-12 col-xl-auto m-0 p-0 pb-md-3 pb-xl-0">
@@ -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); }}
               />
             </div>
           </div>
@@ -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);