From 640dca522d63f0391990a348f569fd21d2e9898d Mon Sep 17 00:00:00 2001 From: jajjibhai008 Date: Fri, 4 Aug 2023 20:02:01 +0500 Subject: [PATCH] feat: frontend changes for executive education courses on B2C dashboard --- .../CourseCardActions/BeginCourseButton.jsx | 7 ++++++- .../CourseCardActions/ResumeButton.jsx | 7 ++++++- .../components/CourseCardActions/index.jsx | 5 ++++- .../components/CourseCardMenu/index.jsx | 3 +++ src/containers/CourseCard/components/hooks.js | 6 +++++- src/data/constants/course.js | 17 +++++++++++++++++ src/data/redux/app/selectors/courseCard.js | 1 + 7 files changed, 42 insertions(+), 4 deletions(-) create mode 100644 src/data/constants/course.js diff --git a/src/containers/CourseCard/components/CourseCardActions/BeginCourseButton.jsx b/src/containers/CourseCard/components/CourseCardActions/BeginCourseButton.jsx index 8cc84ff6..926f2cdc 100644 --- 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 ( { 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 ( { 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 ( - {!(isEntitlement || isVerified) && } + {(!(isEntitlement || isVerified) && !disableCTAForExecEdCourse) && } ); diff --git a/src/containers/CourseCard/components/CourseCardMenu/index.jsx b/src/containers/CourseCard/components/CourseCardMenu/index.jsx index 915e996a..6e83cf91 100644 --- a/src/containers/CourseCard/components/CourseCardMenu/index.jsx +++ b/src/containers/CourseCard/components/CourseCardMenu/index.jsx @@ -16,6 +16,7 @@ import { } from './hooks'; import messages from './messages'; +import useActionDisabledState from '../hooks'; export const CourseCardMenu = ({ cardId }) => { const { formatMessage } = useIntl(); @@ -23,6 +24,7 @@ export const CourseCardMenu = ({ cardId }) => { 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} /> {showUnenrollItem && ( diff --git a/src/containers/CourseCard/components/hooks.js b/src/containers/CourseCard/components/hooks.js index 2a302014..1bb44454 100644 --- 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,6 +20,8 @@ export const useActionDisabledState = (cardId) => { const disableCourseTitle = (isEntitlement && !isFulfilled) || disableViewCourse; + const disableCTAForExecEdCourse = (EXECUTIVE_EDUCATION_COURSE_MODES.includes(mode)); + return { disableBeginCourse, disableResumeCourse, @@ -26,6 +29,7 @@ export const useActionDisabledState = (cardId) => { disableUpgradeCourse, disableSelectSession, disableCourseTitle, + disableCTAForExecEdCourse, }; }; diff --git a/src/data/constants/course.js b/src/data/constants/course.js new file mode 100644 index 00000000..b2542158 --- /dev/null +++ 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 index 9d5ebf58..c414994c 100644 --- 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, }; }, ),