fix: show Popular on edX title for general recs [VAN-1158] (#69)

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 (
     <div className="p-4 w-100 panel-background">
-      <h3 className="pb-2">{formatMessage(messages.recommendationsHeading)}</h3>
+      <h3 className="pb-2">{isPersonalizedRecommendation
+        ? formatMessage(messages.recommendationsHeading) : formatMessage(messages.popularCoursesHeading)}
+      </h3>
       <div>
         {courses.map((course) => (
-          <CourseCard key={course.courseKey} course={course} />
+          <CourseCard
+            key={course.courseKey}
+            course={course}
+            isPersonalizedRecommendation={isPersonalizedRecommendation}
+          />
         ))}
       </div>
       <div className="text-center explore-courses-btn">
@@ -48,6 +55,7 @@ LoadedView.propTypes = {
     logoImageUrl: PropTypes.string,
     marketingUrl: PropTypes.string,
   })).isRequired,
+  isPersonalizedRecommendation: PropTypes.bool.isRequired,
   courseSearchClickTracker: PropTypes.func.isRequired,
 };
 

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', () => {

src/widgets/RecommendationsPanel/__snapshots__/LoadedView.test.jsx.snap

@@ -7,7 +7,7 @@ exports[`RecommendationsPanel LoadedView snapshot 1`] = `
   <h3
     className="pb-2"
   >
-    Recommendations for you
+    Popular on edX
   </h3>
   <div>
     <CourseCard

src/widgets/RecommendationsPanel/components/CourseCard.jsx

@@ -8,7 +8,7 @@ import { configuration } from '../../../config';
 import { setCookie, getCookie } from '../../../utils/cookies';
 import './index.scss';
 
-export const CourseCard = ({ course }) => {
+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;

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

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 (<LoadingView />);
   }
   if (isLoaded) {
-    return (<LoadedView courses={courses} courseSearchClickTracker={courseSearchClickTracker} />);
+    return (
+      <LoadedView
+        courses={courses}
+        isPersonalizedRecommendation={isPersonalizedRecommendation}
+        courseSearchClickTracker={courseSearchClickTracker}
+      />
+    );
   }
   if (isFailed) {
     return (<LookingForChallengeWidget courseSearchClickTracker={courseSearchClickTracker} />);

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(<RecommendationsPanel />)).toMatchObject(
-      shallow(<LoadedView courses={courses} {...defaultProps} />),
+      shallow(
+        <LoadedView
+          courses={courses}
+          isPersonalizedRecommendation={false}
+          {...defaultProps}
+        />,
+      ),
     );
   });
   it('displays LookingForChallengeWidget if request is failed', () => {

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