feat: [AA-906] Front end for Number of Days goal setting

Consume flag for course_goals[number_of_days_goals_enabled]
Added StartResumeCard to outlineTab
Move the Start/Resume course button to above the Intro
Put the start/resume in a card with a text block

src/course-home/data/__factories__/outlineTabData.factory.js

@@ -41,6 +41,9 @@ Factory.define('outlineTabData')
     course_goals: {
       goal_options: [],
       selected_goal: null,
+      number_of_days_goals_enabled: false,
+      days_per_week: null,
+      subscribed_to_reminders: null,
     },
     course_tools: [
       {

src/course-home/outline-tab/OutlineTab.jsx

@@ -9,6 +9,7 @@ import { AlertList } from '../../generic/user-messages';
 import CourseDates from './widgets/CourseDates';
 import CourseGoalCard from './widgets/CourseGoalCard';
 import CourseHandouts from './widgets/CourseHandouts';
+import StartResumeCard from './widgets/StartResumeCard';
 import CourseTools from './widgets/CourseTools';
 import { fetchOutlineTab } from '../data';
 import genericMessages from '../../generic/messages';
@@ -53,6 +54,7 @@ function OutlineTab({ intl }) {
     courseGoals: {
       goalOptions,
       selectedGoal,
+      numberOfDaysGoalsEnabled,
     } = {},
     datesBannerInfo,
     datesWidget: {
@@ -123,7 +125,7 @@ function OutlineTab({ intl }) {
         <div className="col-12 col-sm-auto p-0">
           <div role="heading" aria-level="1" className="h2">{title}</div>
         </div>
-        {resumeCourseUrl && (
+        {resumeCourseUrl && !numberOfDaysGoalsEnabled && (
           <div className="col-12 col-sm-auto p-0">
             <Button variant="brand" block href={resumeCourseUrl} onClick={() => logResumeCourseClick()}>
               {hasVisitedCourse ? intl.formatMessage(messages.resume) : intl.formatMessage(messages.start)}
@@ -173,6 +175,13 @@ function OutlineTab({ intl }) {
               setGoalToastHeader={(newHeader) => { setGoalToastHeader(newHeader); }}
             />
           )}
+          {resumeCourseUrl && numberOfDaysGoalsEnabled && (
+          <StartResumeCard
+            hasVisitedCourse={hasVisitedCourse}
+            resumeCourseUrl={resumeCourseUrl}
+            logResumeCourseClick={logResumeCourseClick}
+          />
+          )}
           <WelcomeMessage courseId={courseId} />
           {rootCourseId && (
             <>

src/course-home/outline-tab/messages.js

@@ -66,6 +66,14 @@ const messages = defineMessages({
     defaultMessage: 'Open',
     description: 'A button to open the given section of the course outline',
   },
+  startBlurb: {
+    id: 'learning.outline.startBlurb',
+    defaultMessage: 'Begin your course today',
+  },
+  resumeBlurb: {
+    id: 'learning.outline.resumeBlurb',
+    defaultMessage: 'Pick up where you left off',
+  },
   resume: {
     id: 'learning.outline.resume',
     defaultMessage: 'Resume course',

src/course-home/outline-tab/widgets/StartResumeCard.jsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { Button, Card } from '@edx/paragon';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+
+import messages from '../messages';
+
+function StartResumeCard({
+  hasVisitedCourse,
+  resumeCourseUrl,
+  logResumeCourseClick,
+  intl,
+}) {
+  return (
+    <Card className="mb-3" data-testid="start-resume-panel">
+      <Card.Body>
+        <div className="row w-100 m-0 ">
+          <h2 className="h4 col-auto flex-grow-1">{intl.formatMessage(messages.startBlurb)}</h2>
+          <div className="col col-auto p-0 justify-content-end">
+            <Button
+              variant="brand"
+              block
+              href={resumeCourseUrl}
+              onClick={() => logResumeCourseClick()}
+            >
+              {hasVisitedCourse ? intl.formatMessage(messages.resume) : intl.formatMessage(messages.start)}
+            </Button>
+          </div>
+        </div>
+      </Card.Body>
+    </Card>
+  );
+}
+
+StartResumeCard.propTypes = {
+  hasVisitedCourse: PropTypes.bool.isRequired,
+  resumeCourseUrl: PropTypes.string.isRequired,
+  logResumeCourseClick: PropTypes.func.isRequired,
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(StartResumeCard);