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 f27a1c6180..22358ddc92 100644 --- a/src/components/dashboard/main-content/course-enrollments/CourseEnrollments.jsx +++ b/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 && ( )} diff --git a/src/components/dashboard/main-content/course-enrollments/CourseSection.jsx b/src/components/dashboard/main-content/course-enrollments/CourseSection.jsx index a3f92f46d3..5a87fb70fc 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 || 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 aeea0ca25a..e6e16a33e1 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 @@ -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';