diff --git a/src/widgets/RecommendationsPanel/LoadedView.jsx b/src/widgets/RecommendationsPanel/LoadedView.jsx index 36cdbb8..acefa44 100644 --- a/src/widgets/RecommendationsPanel/LoadedView.jsx +++ b/src/widgets/RecommendationsPanel/LoadedView.jsx @@ -13,6 +13,7 @@ import './index.scss'; export const LoadedView = ({ courses, + isPersonalizedRecommendation, courseSearchClickTracker, }) => { const { courseSearchUrl } = hooks.usePlatformSettingsData(); @@ -20,10 +21,16 @@ export const LoadedView = ({ return (
-

{formatMessage(messages.recommendationsHeading)}

+

{isPersonalizedRecommendation + ? formatMessage(messages.recommendationsHeading) : formatMessage(messages.popularCoursesHeading)} +

{courses.map((course) => ( - + ))}
@@ -48,6 +55,7 @@ LoadedView.propTypes = { logoImageUrl: PropTypes.string, marketingUrl: PropTypes.string, })).isRequired, + isPersonalizedRecommendation: PropTypes.bool.isRequired, courseSearchClickTracker: PropTypes.func.isRequired, }; diff --git a/src/widgets/RecommendationsPanel/LoadedView.test.jsx b/src/widgets/RecommendationsPanel/LoadedView.test.jsx index 6289313..f2315f5 100644 --- a/src/widgets/RecommendationsPanel/LoadedView.test.jsx +++ b/src/widgets/RecommendationsPanel/LoadedView.test.jsx @@ -16,6 +16,7 @@ jest.mock('data/redux', () => ({ describe('RecommendationsPanel LoadedView', () => { const props = { courses: mockData.courses, + isPersonalizedRecommendation: false, courseSearchClickTracker: jest.fn().mockName('courseSearchClickTracker'), }; test('snapshot', () => { diff --git a/src/widgets/RecommendationsPanel/__snapshots__/LoadedView.test.jsx.snap b/src/widgets/RecommendationsPanel/__snapshots__/LoadedView.test.jsx.snap index 4510129..5e4de30 100644 --- a/src/widgets/RecommendationsPanel/__snapshots__/LoadedView.test.jsx.snap +++ b/src/widgets/RecommendationsPanel/__snapshots__/LoadedView.test.jsx.snap @@ -7,7 +7,7 @@ exports[`RecommendationsPanel LoadedView snapshot 1`] = `

- Recommendations for you + Popular on edX

{ +export const CourseCard = ({ course, isPersonalizedRecommendation }) => { const isCollapsed = useIsCollapsed(); const handleCourseClick = () => { @@ -19,6 +19,7 @@ export const CourseCard = ({ course }) => { } else if (!recommendedCourses.course_keys.includes(course.courseKey)) { recommendedCourses.course_keys.push(course.courseKey); } + recommendedCourses.is_personalized_recommendation = isPersonalizedRecommendation; setCookie(cookieName, JSON.stringify(recommendedCourses), 365); }; @@ -52,6 +53,7 @@ CourseCard.propTypes = { logoImageUrl: PropTypes.string, marketingUrl: PropTypes.string, }).isRequired, + isPersonalizedRecommendation: PropTypes.bool.isRequired, }; export default CourseCard; diff --git a/src/widgets/RecommendationsPanel/hooks.js b/src/widgets/RecommendationsPanel/hooks.js index a01aa94..86bb1ba 100644 --- a/src/widgets/RecommendationsPanel/hooks.js +++ b/src/widgets/RecommendationsPanel/hooks.js @@ -37,6 +37,7 @@ export const useRecommendationPanelData = () => { const [data, setData] = module.state.data({}); module.useFetchCourses(setRequestState, setData); const courses = data.data?.courses || []; + const isPersonalizedRecommendation = data.data?.isPersonalizedRecommendation || false; const courseSearchClickTracker = () => handleEvent(searchCourseEventName, { pageName: 'learner_home', linkType: 'button', @@ -44,6 +45,7 @@ export const useRecommendationPanelData = () => { }); return { courses, + isPersonalizedRecommendation, isLoaded: requestState === RequestStates.completed && courses.length > 0, isFailed: requestState === RequestStates.failed || (requestState === RequestStates.completed && courses.length === 0), diff --git a/src/widgets/RecommendationsPanel/index.jsx b/src/widgets/RecommendationsPanel/index.jsx index b862a74..27ea083 100644 --- a/src/widgets/RecommendationsPanel/index.jsx +++ b/src/widgets/RecommendationsPanel/index.jsx @@ -8,6 +8,7 @@ import hooks from './hooks'; export const RecommendationsPanel = () => { const { courses, + isPersonalizedRecommendation, isFailed, isLoaded, isLoading, @@ -18,7 +19,13 @@ export const RecommendationsPanel = () => { return (); } if (isLoaded) { - return (); + return ( + + ); } if (isFailed) { return (); diff --git a/src/widgets/RecommendationsPanel/index.test.jsx b/src/widgets/RecommendationsPanel/index.test.jsx index ab68b2e..b80f8fc 100644 --- a/src/widgets/RecommendationsPanel/index.test.jsx +++ b/src/widgets/RecommendationsPanel/index.test.jsx @@ -26,6 +26,7 @@ describe('RecommendationsPanel snapshot', () => { isLoaded: false, isLoading: false, courses: [], + isPersonalizedRecommendation: false, ...defaultProps, }; it('displays LoadingView if request is loading', () => { @@ -42,7 +43,13 @@ describe('RecommendationsPanel snapshot', () => { isLoaded: true, }); expect(shallow()).toMatchObject( - shallow(), + shallow( + , + ), ); }); it('displays LookingForChallengeWidget if request is failed', () => { diff --git a/src/widgets/RecommendationsPanel/messages.js b/src/widgets/RecommendationsPanel/messages.js index a4ed773..aaae03e 100644 --- a/src/widgets/RecommendationsPanel/messages.js +++ b/src/widgets/RecommendationsPanel/messages.js @@ -4,7 +4,12 @@ const messages = defineMessages({ recommendationsHeading: { id: 'RecommendationsPanel.recommendationsHeading', defaultMessage: 'Recommendations for you', - description: 'Heading on recommendations panel', + description: 'Heading on recommendations panel with personalized recommendations', + }, + popularCoursesHeading: { + id: 'RecommendationsPanel.popularCoursesHeading', + defaultMessage: 'Popular on edX', + description: 'Heading on recommendations panel with general recommendations', }, exploreCoursesButton: { id: 'RecommendationsPanel.exploreCoursesButton',