From 91b1229a2984134bef197d49fcf6d4210b472a9d Mon Sep 17 00:00:00 2001
From: Chris Deery <3932645+cdeery@users.noreply.github.com>
Date: Thu, 9 Sep 2021 09:56:31 -0400
Subject: [PATCH] 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
---
 .../__factories__/outlineTabData.factory.js   |  3 ++
 src/course-home/outline-tab/OutlineTab.jsx    | 11 ++++-
 src/course-home/outline-tab/messages.js       |  8 ++++
 .../outline-tab/widgets/StartResumeCard.jsx   | 43 +++++++++++++++++++
 4 files changed, 64 insertions(+), 1 deletion(-)
 create mode 100644 src/course-home/outline-tab/widgets/StartResumeCard.jsx

diff --git a/src/course-home/data/__factories__/outlineTabData.factory.js b/src/course-home/data/__factories__/outlineTabData.factory.js
index 132ba42d..f72e5d88 100644
--- a/src/course-home/data/__factories__/outlineTabData.factory.js
+++ b/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: [
       {
diff --git a/src/course-home/outline-tab/OutlineTab.jsx b/src/course-home/outline-tab/OutlineTab.jsx
index 3b14199e..264f7ef5 100644
--- a/src/course-home/outline-tab/OutlineTab.jsx
+++ b/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 && (
             <>
diff --git a/src/course-home/outline-tab/messages.js b/src/course-home/outline-tab/messages.js
index 0a2de618..c8d7ce7b 100644
--- a/src/course-home/outline-tab/messages.js
+++ b/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',
diff --git a/src/course-home/outline-tab/widgets/StartResumeCard.jsx b/src/course-home/outline-tab/widgets/StartResumeCard.jsx
new file mode 100644
index 00000000..cb967751
--- /dev/null
+++ b/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);