diff --git a/src/components/dashboard/data/constants.js b/src/components/dashboard/data/constants.js index 19c21ddd21..2a83374f67 100644 --- a/src/components/dashboard/data/constants.js +++ b/src/components/dashboard/data/constants.js @@ -1 +1,9 @@ export const LICENSE_ACTIVATION_MESSAGE = 'Your license was successfully activated.'; + +export const COURSE_SECTION_TITLES = { + current: 'My courses', + completed: 'Completed courses', + savedForLater: 'Saved for later', + assigned: 'Assigned Courses', + firstTimeUserAndAssigned: 'Your learning journey starts now!', +}; diff --git a/src/components/dashboard/main-content/course-enrollments/CourseEnrollments.jsx b/src/components/dashboard/main-content/course-enrollments/CourseEnrollments.jsx index e5268116bf..98c3fc28f6 100644 --- a/src/components/dashboard/main-content/course-enrollments/CourseEnrollments.jsx +++ b/src/components/dashboard/main-content/course-enrollments/CourseEnrollments.jsx @@ -1,4 +1,8 @@ -import React, { useContext } from 'react'; +import React, { + useContext, useEffect, useState, +} from 'react'; +import Cookies from 'universal-cookie'; + import PropTypes from 'prop-types'; import CourseSection from './CourseSection'; @@ -9,12 +13,7 @@ import { features } from '../../../../config'; import { useCourseEnrollmentsBySection, useContentAssignments } from './data'; import { UserSubsidyContext } from '../../../enterprise-user-subsidy'; -export const COURSE_SECTION_TITLES = { - current: 'My courses', - completed: 'Completed courses', - savedForLater: 'Saved for later', - assigned: 'Assigned Courses', -}; +import { COURSE_SECTION_TITLES } from '../../data/constants'; const CourseEnrollments = ({ children }) => { const { redeemableLearnerCreditPolicies } = useContext(UserSubsidyContext); @@ -42,6 +41,16 @@ const CourseEnrollments = ({ children }) => { courseEnrollmentsByStatus, assignments, }); + const [isFirstVisit, setIsFirstVisit] = useState(false); + + useEffect(() => { + const cookies = new Cookies(); + const hasUserVisitedDashboard = cookies.get('has-user-seen-enrollments'); + if (!hasUserVisitedDashboard) { + cookies.set('has-user-seen-enrollments', true, { path: '/' }); + setIsFirstVisit(true); + } + }, []); if (fetchCourseEnrollmentsError) { return ( @@ -78,7 +87,7 @@ const CourseEnrollments = ({ children }) => { <> {features.FEATURE_ENABLE_TOP_DOWN_ASSIGNMENT && ( )} diff --git a/src/components/dashboard/main-content/course-enrollments/CourseSection.jsx b/src/components/dashboard/main-content/course-enrollments/CourseSection.jsx index 20416e1de9..3773bf736e 100644 --- a/src/components/dashboard/main-content/course-enrollments/CourseSection.jsx +++ b/src/components/dashboard/main-content/course-enrollments/CourseSection.jsx @@ -15,6 +15,7 @@ import { import { UpgradeableCourseEnrollmentContextProvider } from './UpgradeableCourseEnrollmentContextProvider'; import { COURSE_STATUSES, COURSE_MODES } from '../../../../constants'; +import { COURSE_SECTION_TITLES } from '../../data/constants'; const CARD_COMPONENT_BY_COURSE_STATUS = { [COURSE_STATUSES.upcoming]: UpcomingCourseCard, @@ -35,7 +36,7 @@ class CourseSection extends React.Component { getCoursesCount = (isOpen, title, coursesCount) => { if (!isOpen) { - if (title === 'Assigned Courses') { + if (title === COURSE_SECTION_TITLES.assigned || title === COURSE_SECTION_TITLES.firstTimeUserAndAssigned) { return {coursesCount}; } return `(${coursesCount})`; diff --git a/src/components/dashboard/main-content/course-enrollments/tests/CourseEnrollments.test.jsx b/src/components/dashboard/main-content/course-enrollments/tests/CourseEnrollments.test.jsx index 2912249a4a..759f75d31e 100644 --- a/src/components/dashboard/main-content/course-enrollments/tests/CourseEnrollments.test.jsx +++ b/src/components/dashboard/main-content/course-enrollments/tests/CourseEnrollments.test.jsx @@ -8,7 +8,9 @@ import userEvent from '@testing-library/user-event'; import { renderWithRouter } from '../../../../../utils/tests'; import { createCourseEnrollmentWithStatus } from './enrollment-testutils'; -import CourseEnrollments, { COURSE_SECTION_TITLES } from '../CourseEnrollments'; + +import { COURSE_SECTION_TITLES } from '../../../data/constants'; +import CourseEnrollments from '../CourseEnrollments'; import { MARK_MOVE_TO_IN_PROGRESS_DEFAULT_LABEL } from '../course-cards/move-to-in-progress-modal/MoveToInProgressModal'; import { MARK_SAVED_FOR_LATER_DEFAULT_LABEL } from '../course-cards/mark-complete-modal/MarkCompleteModal'; import { updateCourseCompleteStatusRequest } from '../course-cards/mark-complete-modal/data/service';