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';