feat: front-end changes required for EE courses on LP (#783)

openedx · Jul 17, 2023 · 9a2fc99 · 9a2fc99
1 parent 11d2acb
commit 9a2fc99
Show file tree

Hide file tree

Showing 9 changed files with 171 additions and 17 deletions.
diff --git a/src/components/dashboard/main-content/course-enrollments/course-cards/BaseCourseCard.jsx b/src/components/dashboard/main-content/course-enrollments/course-cards/BaseCourseCard.jsx
@@ -14,6 +14,7 @@ import { MoreVert } from '@edx/paragon/icons';
 import { EmailSettingsModal } from './email-settings';
 import { UnenrollModal } from './unenroll';
 import { COURSE_STATUSES, COURSE_PACING, EXECUTIVE_EDUCATION_COURSE_MODES } from '../../../../../constants';
+import { EXEC_ED_COURSE_TYPE, PRODUCT_SOURCE_2U } from '../data/constants';
 
 const BADGE_PROPS_BY_COURSE_STATUS = {
   [COURSE_STATUSES.inProgress]: {
@@ -50,12 +51,12 @@ class BaseCourseCard extends Component {
 
   getDropdownMenuItems = () => {
     const {
-      hasEmailsEnabled, title, dropdownMenuItems, canUnenroll,
+      hasEmailsEnabled, title, dropdownMenuItems, canUnenroll, courseType, productSource,
     } = this.props;
     const firstMenuItems = [];
     const lastMenuItems = [];
 
-    if (hasEmailsEnabled !== null) {
+    if (hasEmailsEnabled !== null && (productSource !== PRODUCT_SOURCE_2U && courseType !== EXEC_ED_COURSE_TYPE)) {
       firstMenuItems.push({
         key: 'email-settings',
         type: 'button',
@@ -124,7 +125,7 @@ class BaseCourseCard extends Component {
     if (pacing) {
       message += 'This course ';
       message += isCourseEnded ? 'was ' : 'is ';
-      message += `${pacing}-paced. `;
+      message += `${pacing}-led. `;
     }
     if (dateMessage) {
       message += dateMessage;
@@ -199,7 +200,7 @@ class BaseCourseCard extends Component {
 
   renderUnenrollModal = () => {
     const {
-      canUnenroll, courseRunId, type,
+      canUnenroll, courseRunId, type, courseType, productSource,
     } = this.props;
     const { modals } = this.state;
 
@@ -210,6 +211,8 @@ class BaseCourseCard extends Component {
     return (
       <UnenrollModal
         courseRunId={courseRunId}
+        courseType={courseType}
+        productSource={productSource}
         onClose={this.handleUnenrollModalOnClose}
         onSuccess={this.handleUnenrollModalOnSuccess}
         isOpen={modals.unenroll.open}
@@ -241,7 +244,8 @@ class BaseCourseCard extends Component {
   };
 
   renderSettingsDropdown = (menuItems) => {
-    const { title } = this.props;
+    const { title, courseType, productSource } = this.props;
+    const execEdClass = courseType === EXEC_ED_COURSE_TYPE && productSource === PRODUCT_SOURCE_2U ? 'text-light-100' : '';
     if (menuItems && menuItems.length > 0) {
       return (
         <div className="ml-auto">
@@ -252,6 +256,7 @@ class BaseCourseCard extends Component {
               iconAs={Icon}
               alt={`course settings for ${title}`}
               id="course-enrollment-card-settings-dropdown-toggle"
+              iconClassNames={execEdClass}
             />
             <Dropdown.Menu>
               {menuItems.map(menuItem => (
@@ -320,12 +325,24 @@ class BaseCourseCard extends Component {
     return null;
   };
 
+  renderIsCourseStarted = () => {
+    const { startDate, courseType, productSource } = this.props;
+    const formattedStartDate = startDate ? moment(startDate).format('MMMM Do, YYYY') : null;
+
+    if (courseType === EXEC_ED_COURSE_TYPE && productSource === PRODUCT_SOURCE_2U) {
+      return <>&#x2022; Start date: {formattedStartDate}</>;
+    }
+
+    return null;
+  };
+
   renderOrganizationName = () => {
     const { orgName, mode } = this.props;
 
     const isExecutiveEducation2UCourse = EXECUTIVE_EDUCATION_COURSE_MODES.includes(mode);
+    const execEdClass = isExecutiveEducation2UCourse ? 'text-light-300' : '';
     if (orgName) {
-      return <p className="mb-0">{orgName} {isExecutiveEducation2UCourse && <>&#x2022; Executive Education</>}</p>;
+      return <p className={`mb-0 ${execEdClass}`}>{orgName} {isExecutiveEducation2UCourse && <>&#x2022; Executive Education</>} {this.renderIsCourseStarted()}</p>;
     }
     return null;
   };
@@ -403,7 +420,7 @@ class BaseCourseCard extends Component {
                   {this.renderMicroMastersTitle()}
                   <div className="d-flex align-items-start justify-content-between mb-1">
                     <h4 className="course-title mb-0 mr-2">
-                      <a className={`h3 ${isExecutiveEducation2UCourse && 'text-light-100'}`} href={linkToCourse}>{title}</a>
+                      <a className={`h3 ${isExecutiveEducation2UCourse && 'text-white'}`} href={linkToCourse}>{title}</a>
                     </h4>
                     {
                       BADGE_PROPS_BY_COURSE_STATUS[type] && (
@@ -421,7 +438,7 @@ class BaseCourseCard extends Component {
               {this.renderButtons()}
               {this.renderChildren()}
               <div className="course-misc-text row">
-                <div className={`col ${isExecutiveEducation2UCourse ? 'text-light-900' : 'text-gray' }`}>
+                <div className={`col ${isExecutiveEducation2UCourse ? 'text-light-300' : 'text-gray'}`}>
                   <small className="mb-0">
                     {this.getCourseMiscText()}
                   </small>
@@ -448,6 +465,8 @@ BaseCourseCard.propTypes = {
   buttons: PropTypes.element,
   children: PropTypes.node,
   startDate: PropTypes.string,
+  courseType: PropTypes.string,
+  productSource: PropTypes.string,
   endDate: PropTypes.string,
   hasEmailsEnabled: PropTypes.bool,
   canUnenroll: PropTypes.bool,
@@ -469,6 +488,8 @@ BaseCourseCard.contextType = AppContext;
 BaseCourseCard.defaultProps = {
   children: null,
   startDate: null,
+  courseType: null,
+  productSource: null,
   endDate: null,
   hasEmailsEnabled: null,
   canUnenroll: null,

diff --git a/...components/dashboard/main-content/course-enrollments/course-cards/CompletedCourseCard.jsx b/...components/dashboard/main-content/course-enrollments/course-cards/CompletedCourseCard.jsx
@@ -16,7 +16,10 @@ const CompletedCourseCard = (props) => {
     title,
     linkToCourse,
     courseRunId,
+    startDate,
     endDate,
+    courseType,
+    productSource,
   } = props;
   const config = getConfig();
 
@@ -30,6 +33,9 @@ const CompletedCourseCard = (props) => {
         linkToCourse={linkToCourse}
         title={title}
         courseRunId={courseRunId}
+        courseType={courseType}
+        productSource={productSource}
+        startDate={startDate}
       />
     );
   };
@@ -64,6 +70,9 @@ const CompletedCourseCard = (props) => {
       buttons={renderButtons()}
       type="completed"
       hasViewCertificateLink={false}
+      courseType={courseType}
+      productSource={productSource}
+      startDate={startDate}
       {...props}
     >
       {renderCertificateInfo()}
@@ -78,11 +87,17 @@ CompletedCourseCard.propTypes = {
   linkToCertificate: PropTypes.string,
   courseRunStatus: PropTypes.string.isRequired,
   endDate: PropTypes.string,
+  startDate: PropTypes.string,
+  courseType: PropTypes.string,
+  productSource: PropTypes.string,
 };
 
 CompletedCourseCard.defaultProps = {
   linkToCertificate: null,
   endDate: null,
+  startDate: null,
+  courseType: null,
+  productSource: null,
 };
 
 export default CompletedCourseCard;
diff --git a/...ponents/dashboard/main-content/course-enrollments/course-cards/ContinueLearningButton.jsx b/...ponents/dashboard/main-content/course-enrollments/course-cards/ContinueLearningButton.jsx
@@ -4,6 +4,8 @@ import { AppContext } from '@edx/frontend-platform/react';
 import classNames from 'classnames';
 
 import { sendEnterpriseTrackEvent } from '@edx/frontend-enterprise-utils';
+import moment from 'moment';
+import { EXEC_ED_COURSE_TYPE, PRODUCT_SOURCE_2U } from '../data/constants';
 
 /**
  * A 'Continue Learning' button with parameters.
@@ -20,6 +22,9 @@ const ContinueLearningButton = ({
   linkToCourse,
   title,
   courseRunId,
+  courseType,
+  productSource,
+  startDate,
 }) => {
   const { enterpriseConfig } = useContext(AppContext);
 
@@ -32,27 +37,46 @@ const ContinueLearningButton = ({
       },
     );
   };
+
+  const isCourseStarted = () => moment(startDate) <= moment();
+
+  const execClassName = (courseType === EXEC_ED_COURSE_TYPE && productSource === PRODUCT_SOURCE_2U) && (!isCourseStarted()) ? ' disabled btn-outline-secondary' : undefined;
+
+  const renderContent = () => {
+    if ((courseType === EXEC_ED_COURSE_TYPE && productSource === PRODUCT_SOURCE_2U) && !isCourseStarted()) {
+      const formattedStartDate = moment(startDate).format('MMM D, YYYY');
+      return `Available on ${formattedStartDate}`;
+    }
+    return 'Resume';
+  };
+
   return (
     <a
-      className={classNames('btn btn-xs-block', className)}
+      className={classNames('btn btn-xs-block', execClassName, className)}
       href={linkToCourse}
       onClick={onClickHandler}
     >
-      Resume
+      {renderContent()}
       <span className="sr-only">for {title}</span>
     </a>
   );
 };
 
 ContinueLearningButton.defaultProps = {
   className: 'btn-outline-primary',
+  startDate: null,
+  courseType: null,
+  productSource: null,
 };
 
 ContinueLearningButton.propTypes = {
   className: PropTypes.string,
   linkToCourse: PropTypes.string.isRequired,
   title: PropTypes.string.isRequired,
   courseRunId: PropTypes.string.isRequired,
+  startDate: PropTypes.string,
+  courseType: PropTypes.string,
+  productSource: PropTypes.string,
 };
 
 export default ContinueLearningButton;
diff --git a/...omponents/dashboard/main-content/course-enrollments/course-cards/InProgressCourseCard.jsx b/...omponents/dashboard/main-content/course-enrollments/course-cards/InProgressCourseCard.jsx
@@ -20,6 +20,9 @@ export const InProgressCourseCard = ({
   title,
   notifications,
   courseRunStatus,
+  startDate,
+  courseType,
+  productSource,
   ...rest
 }) => {
   const {
@@ -45,6 +48,9 @@ export const InProgressCourseCard = ({
         linkToCourse={licenseUpgradeUrl ?? linkToCourse}
         title={title}
         courseRunId={courseRunId}
+        courseType={courseType}
+        productSource={productSource}
+        startDate={startDate}
       />
       {shouldShowUpgradeButton && <UpgradeCourseButton className="ml-1" title={title} />}
     </>
@@ -152,6 +158,9 @@ export const InProgressCourseCard = ({
       linkToCourse={licenseUpgradeUrl ?? linkToCourse}
       courseRunId={courseRunId}
       isLoading={isLoadingUpgradeUrl}
+      courseType={courseType}
+      productSource={productSource}
+      startDate={startDate}
       {...rest}
     >
       {renderNotifications()}
@@ -177,6 +186,15 @@ InProgressCourseCard.propTypes = {
   })).isRequired,
   title: PropTypes.string.isRequired,
   courseRunStatus: PropTypes.string.isRequired,
+  startDate: PropTypes.string,
+  courseType: PropTypes.string,
+  productSource: PropTypes.string,
+};
+
+InProgressCourseCard.defaultProps = {
+  startDate: null,
+  courseType: null,
+  productSource: null,
 };
 
 export default InProgressCourseCard;
diff --git a/...components/dashboard/main-content/course-enrollments/course-cards/RequestedCourseCard.jsx b/...components/dashboard/main-content/course-enrollments/course-cards/RequestedCourseCard.jsx
@@ -21,12 +21,18 @@ RequestedCourseCard.propTypes = {
   isRevoked: PropTypes.bool,
   courseRunStatus: PropTypes.string.isRequired,
   endDate: PropTypes.string,
+  startDate: PropTypes.string,
+  courseType: PropTypes.string,
+  productSource: PropTypes.string,
 };
 
 RequestedCourseCard.defaultProps = {
   linkToCertificate: null,
   endDate: null,
   isRevoked: false,
+  startDate: null,
+  courseType: null,
+  productSource: null,
 };
 
 export default RequestedCourseCard;
diff --git a/...onents/dashboard/main-content/course-enrollments/course-cards/SavedForLaterCourseCard.jsx b/...onents/dashboard/main-content/course-enrollments/course-cards/SavedForLaterCourseCard.jsx
@@ -19,6 +19,9 @@ const SavedForLaterCourseCard = (props) => {
     courseRunStatus,
     endDate,
     isRevoked,
+    startDate,
+    courseType,
+    productSource,
   } = props;
   const {
     updateCourseEnrollmentStatus,
@@ -100,6 +103,9 @@ const SavedForLaterCourseCard = (props) => {
         linkToCourse={linkToCourse}
         title={title}
         courseRunId={courseRunId}
+        courseType={courseType}
+        productSource={productSource}
+        startDate={startDate}
       />
     );
   };
@@ -110,6 +116,9 @@ const SavedForLaterCourseCard = (props) => {
       dropdownMenuItems={getDropdownMenuItems()}
       type={COURSE_STATUSES.savedForLater}
       hasViewCertificateLink={false}
+      courseType={courseType}
+      productSource={productSource}
+      startDate={startDate}
       {...props}
     >
       <MoveToInProgressModal
@@ -132,11 +141,17 @@ SavedForLaterCourseCard.propTypes = {
   isRevoked: PropTypes.bool.isRequired,
   courseRunStatus: PropTypes.string.isRequired,
   endDate: PropTypes.string,
+  startDate: PropTypes.string,
+  courseType: PropTypes.string,
+  productSource: PropTypes.string,
 };
 
 SavedForLaterCourseCard.defaultProps = {
   linkToCertificate: null,
   endDate: null,
+  startDate: null,
+  courseType: null,
+  productSource: null,
 };
 
 export default SavedForLaterCourseCard;