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';
@@ -16,12 +17,8 @@ import {
 import { UserSubsidyContext } from '../../../enterprise-user-subsidy';
 import { features } from '../../../../config';
 
-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';
+
 export const ASSIGNMENT_TYPES = {
   accepted: 'accepted',
   allocated: 'allocated',
@@ -49,6 +46,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-visited-learner-dashboard');
+    if (!hasUserVisitedDashboard) {
+      cookies.set('has-user-visited-learner-dashboard', true, { path: '/' });
+      setIsFirstVisit(true);
+    }
+  }, []);
 
   useEffect(() => {
     const data = redeemableLearnerCreditPolicies?.flatMap(item => item?.learnerContentAssignments || []);
@@ -142,7 +149,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><Badge variant="danger" className="rounded-circle">{coursesCount}</Badge></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';