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,6 +1,7 @@
 import React, {
   useContext, useEffect, useMemo, useState,
 } from 'react';
+import Cookies from 'universal-cookie';
 
 import PropTypes from 'prop-types';
 import { AppContext } from '@edx/frontend-platform/react';
@@ -20,12 +21,7 @@ import { features } from '../../../../config';
 import getActiveAssignments from '../../data/utils';
 import { ASSIGNMENT_TYPES } from '../../../enterprise-user-subsidy/enterprise-offers/data/constants';
 
-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 {
@@ -48,6 +44,16 @@ const CourseEnrollments = ({ children }) => {
   const [assignments, setAssignments] = useState([]);
   const [showCancelledAssignmentsAlert, setShowCancelledAssignmentsAlert] = useState(false);
   const [showExpiredAssignmentsAlert, setShowExpiredAssignmentsAlert] = useState(false);
+  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);
+    }
+  }, []);
 
   useEffect(() => {
     // TODO: Refactor to DRY up code for redeemableLearnerCreditPolicies
@@ -138,7 +144,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={assignedCourses}
           />
         )}

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

@@ -14,7 +14,8 @@ import userEvent from '@testing-library/user-event';
 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';