feat: frontend changes for executive education courses on B2C dashboard

openedx · Aug 4, 2023 · 640dca5 · 640dca5
1 parent d43c17a
commit 640dca5
Show file tree

Hide file tree

Showing 7 changed files with 42 additions and 4 deletions.
diff --git a/src/containers/CourseCard/components/CourseCardActions/BeginCourseButton.jsx b/src/containers/CourseCard/components/CourseCardActions/BeginCourseButton.jsx
@@ -8,15 +8,20 @@ import { reduxHooks } from 'hooks';
 import useActionDisabledState from '../hooks';
 import ActionButton from './ActionButton';
 import messages from './messages';
+import { useEnterpriseDashboardData } from '../../../../data/redux/hooks/app';
 
 export const BeginCourseButton = ({ cardId }) => {
   const { formatMessage } = useIntl();
   const { homeUrl } = reduxHooks.useCardCourseRunData(cardId);
   const { disableBeginCourse } = useActionDisabledState(cardId);
+
+  const { authOrgId } = useEnterpriseDashboardData();
+  const { disableCTAForExecEdCourse } = useActionDisabledState(cardId);
+  const execEdURLParam = `?org_id=${authOrgId}`;
   const handleClick = reduxHooks.useTrackCourseEvent(
     track.course.enterCourseClicked,
     cardId,
-    homeUrl,
+    homeUrl + ((disableCTAForExecEdCourse && authOrgId) && execEdURLParam),
   );
   return (
     <ActionButton

diff --git a/src/containers/CourseCard/components/CourseCardActions/ResumeButton.jsx b/src/containers/CourseCard/components/CourseCardActions/ResumeButton.jsx
@@ -8,15 +8,20 @@ import { reduxHooks } from 'hooks';
 import useActionDisabledState from '../hooks';
 import ActionButton from './ActionButton';
 import messages from './messages';
+import { useEnterpriseDashboardData } from '../../../../data/redux/hooks/app';
 
 export const ResumeButton = ({ cardId }) => {
   const { formatMessage } = useIntl();
   const { resumeUrl } = reduxHooks.useCardCourseRunData(cardId);
   const { disableResumeCourse } = useActionDisabledState(cardId);
+
+  const { authOrgId } = useEnterpriseDashboardData();
+  const { disableCTAForExecEdCourse } = useActionDisabledState(cardId);
+  const execEdURLParam = `?org_id=${authOrgId}`;
   const handleClick = reduxHooks.useTrackCourseEvent(
     track.course.enterCourseClicked,
     cardId,
-    resumeUrl,
+    resumeUrl + ((disableCTAForExecEdCourse && authOrgId) && execEdURLParam),
   );
   return (
     <ActionButton

diff --git a/src/containers/CourseCard/components/CourseCardActions/index.jsx b/src/containers/CourseCard/components/CourseCardActions/index.jsx
@@ -10,11 +10,14 @@ import SelectSessionButton from './SelectSessionButton';
 import BeginCourseButton from './BeginCourseButton';
 import ResumeButton from './ResumeButton';
 import ViewCourseButton from './ViewCourseButton';
+import useActionDisabledState from '../hooks';
 
 export const CourseCardActions = ({ cardId }) => {
   const { isEntitlement, isFulfilled } = reduxHooks.useCardEntitlementData(cardId);
   const { isVerified, hasStarted } = reduxHooks.useCardEnrollmentData(cardId);
   const { isArchived } = reduxHooks.useCardCourseRunData(cardId);
+  const { disableCTAForExecEdCourse } = useActionDisabledState(cardId);
+
   let PrimaryButton;
   if (isEntitlement) {
     PrimaryButton = isFulfilled ? ViewCourseButton : SelectSessionButton;
@@ -26,7 +29,7 @@ export const CourseCardActions = ({ cardId }) => {
 
   return (
     <ActionRow data-test-id="CourseCardActions">
-      {!(isEntitlement || isVerified) && <UpgradeButton cardId={cardId} />}
+      {(!(isEntitlement || isVerified) && !disableCTAForExecEdCourse) && <UpgradeButton cardId={cardId} />}
       <PrimaryButton cardId={cardId} />
     </ActionRow>
   );

diff --git a/src/containers/CourseCard/components/CourseCardMenu/index.jsx b/src/containers/CourseCard/components/CourseCardMenu/index.jsx
@@ -16,13 +16,15 @@ import {
 } from './hooks';
 
 import messages from './messages';
+import useActionDisabledState from '../hooks';
 
 export const CourseCardMenu = ({ cardId }) => {
   const { formatMessage } = useIntl();
 
   const emailSettingsModal = useEmailSettings();
   const unenrollModal = useUnenrollData();
   const handleToggleDropdown = useHandleToggleDropdown(cardId);
+  const { disableCTAForExecEdCourse } = useActionDisabledState(cardId);
 
   const {
     courseName,
@@ -50,6 +52,7 @@ export const CourseCardMenu = ({ cardId }) => {
           iconAs={Icon}
           variant="primary"
           alt={formatMessage(messages.dropdownAlt)}
+          disabled={disableCTAForExecEdCourse}
         />
         <Dropdown.Menu>
           {showUnenrollItem && (

diff --git a/src/containers/CourseCard/components/hooks.js b/src/containers/CourseCard/components/hooks.js
@@ -1,9 +1,10 @@
 import { reduxHooks } from 'hooks';
+import { EXECUTIVE_EDUCATION_COURSE_MODES } from '../../../data/constants/course';
 
 export const useActionDisabledState = (cardId) => {
   const { isMasquerading } = reduxHooks.useMasqueradeData();
   const {
-    canUpgrade, hasAccess, isAudit, isAuditAccessExpired,
+    canUpgrade, hasAccess, isAudit, isAuditAccessExpired, mode,
   } = reduxHooks.useCardEnrollmentData(cardId);
   const {
     isEntitlement, isFulfilled, canChange, hasSessions,
@@ -19,13 +20,16 @@ export const useActionDisabledState = (cardId) => {
 
   const disableCourseTitle = (isEntitlement && !isFulfilled) || disableViewCourse;
 
+  const disableCTAForExecEdCourse = (EXECUTIVE_EDUCATION_COURSE_MODES.includes(mode));
+
   return {
     disableBeginCourse,
     disableResumeCourse,
     disableViewCourse,
     disableUpgradeCourse,
     disableSelectSession,
     disableCourseTitle,
+    disableCTAForExecEdCourse,
   };
 };
 

diff --git a/src/data/constants/course.js b/src/data/constants/course.js
@@ -0,0 +1,17 @@
+// Constants related to courses
+export const COURSE_MODES = {
+  VERIFIED: 'verified',
+  PROFESSIONAL: 'professional',
+  NO_ID_PROFESSIONAL: 'no-id-professional',
+  AUDIT: 'audit',
+  HONOR: 'honor',
+  EXECUTIVE_EDUCATION: 'executive-education',
+  PAID_EXECUTIVE_EDUCATION: 'paid-executive-education',
+  UNPAID_EXECUTIVE_EDUCATION: 'unpaid-executive-education',
+};
+
+export const EXECUTIVE_EDUCATION_COURSE_MODES = [
+  COURSE_MODES.EXECUTIVE_EDUCATION,
+  COURSE_MODES.PAID_EXECUTIVE_EDUCATION,
+  COURSE_MODES.UNPAID_EXECUTIVE_EDUCATION,
+];
diff --git a/src/data/redux/app/selectors/courseCard.js b/src/data/redux/app/selectors/courseCard.js
@@ -97,6 +97,7 @@ export const courseCard = StrictDict({
 
         isEmailEnabled: enrollment.isEmailEnabled,
         hasOptedOutOfEmail: enrollment.hasOptedOutOfEmail,
+        mode: enrollment.mode,
       };
     },
   ),