feat: ENT-7851 Added course section title for learners's first visit

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!',
+};

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 && (
           <CourseSection
-            title={COURSE_SECTION_TITLES.assigned}
+            title={isFirstVisit ? COURSE_SECTION_TITLES.firstTimeUserAndAssigned : COURSE_SECTION_TITLES.assigned}
             courseRuns={assignments}
           />
         )}

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 <sup><Bubble variant="error">{coursesCount}</Bubble></sup>;
       }
       return `(${coursesCount})`;

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