feat: add amplitude recommendations cookie [VAN-1149] (#65)

.env

@@ -31,3 +31,4 @@ ENTERPRISE_MARKETING_UTM_SOURCE=''
 ENTERPRISE_MARKETING_UTM_CAMPAIGN=''
 ENTERPRISE_MARKETING_FOOTER_UTM_MEDIUM=''
 LEARNING_BASE_URL=''
+PERSONALIZED_RECOMMENDATION_COOKIE_NAME = 'edx-user-personalized-recommendation'

.env.development

@@ -37,3 +37,5 @@ ENTERPRISE_MARKETING_UTM_SOURCE='example.com'
 ENTERPRISE_MARKETING_UTM_CAMPAIGN='example.com Referral'
 ENTERPRISE_MARKETING_FOOTER_UTM_MEDIUM='Footer'
 LEARNING_BASE_URL='http://localhost:2000'
+SESSION_COOKIE_DOMAIN='localhost'
+PERSONALIZED_RECOMMENDATION_COOKIE_NAME = 'edx-user-personalized-recommendation'

package-lock.json

@@ -55,6 +55,7 @@
         "redux-thunk": "2.3.0",
         "regenerator-runtime": "^0.13.9",
         "reselect": "^4.0.0",
+        "universal-cookie": "^4.0.4",
         "util": "^0.12.4",
         "whatwg-fetch": "^3.6.2"
       },

package.json

@@ -73,6 +73,7 @@
     "redux-thunk": "2.3.0",
     "regenerator-runtime": "^0.13.9",
     "reselect": "^4.0.0",
+    "universal-cookie": "^4.0.4",
     "util": "^0.12.4",
     "whatwg-fetch": "^3.6.2"
   },

src/config/index.js

@@ -10,6 +10,8 @@ const configuration = {
   // SEGMENT_KEY: process.env.SEGMENT_KEY,
   // ACCESS_TOKEN_COOKIE_NAME: process.env.ACCESS_TOKEN_COOKIE_NAME,
   LEARNING_BASE_URL: process.env.LEARNING_BASE_URL,
+  PERSONALIZED_RECOMMENDATION_COOKIE_NAME: process.env.PERSONALIZED_RECOMMENDATION_COOKIE_NAME || '',
+  SESSION_COOKIE_DOMAIN: process.env.SESSION_COOKIE_DOMAIN || '',
 };
 
 const features = {};

src/utils/cookies.js

@@ -0,0 +1,16 @@
+import Cookies from 'universal-cookie';
+import { configuration } from '../config';
+
+export function setCookie(cookieName, cookieValue, cookieExpiry) {
+  const cookies = new Cookies();
+  const options = { domain: configuration.SESSION_COOKIE_DOMAIN, path: '/' };
+  if (cookieExpiry) {
+    options.expires = new Date(Date.now() + cookieExpiry * 864e5);
+  }
+  cookies.set(cookieName, cookieValue, options);
+}
+
+export function getCookie(cookieName) {
+  const cookies = new Cookies();
+  return cookies.get(cookieName);
+}

src/widgets/RecommendationsPanel/components/CourseCard.jsx

@@ -4,12 +4,26 @@ import PropTypes from 'prop-types';
 import { Card, Hyperlink, Truncate } from '@edx/paragon';
 
 import { useIsCollapsed } from 'containers/CourseCard/hooks';
+import { configuration } from '../../../config';
+import { setCookie, getCookie } from '../../../utils/cookies';
 import './index.scss';
 
 export const CourseCard = ({ course }) => {
   const isCollapsed = useIsCollapsed();
+
+  const handleCourseClick = () => {
+    const cookieName = configuration.PERSONALIZED_RECOMMENDATION_COOKIE_NAME;
+    let recommendedCourses = getCookie(cookieName);
+    if (typeof recommendedCourses === 'undefined') {
+      recommendedCourses = { course_keys: [course.courseKey] };
+    } else if (!recommendedCourses.course_keys.includes(course.courseKey)) {
+      recommendedCourses.course_keys.push(course.courseKey);
+    }
+    setCookie(cookieName, JSON.stringify(recommendedCourses), 365);
+  };
+
   return (
-    <Hyperlink destination={course?.marketingUrl} className="card-link">
+    <Hyperlink destination={course?.marketingUrl} className="card-link" onClick={handleCourseClick}>
       <Card orientation={isCollapsed ? 'vertical' : 'horizontal'} className="p-3 mb-1 recommended-course-card">
         <div className={isCollapsed ? '' : 'd-flex align-items-center'}>
           <Card.ImageCap

src/widgets/RecommendationsPanel/hooks.js

@@ -25,7 +25,8 @@ export const useFetchCourses = (setRequestState, setData) => {
       }
     });
     return () => { isMounted = false; };
-  });
+    /* eslint-disable */
+  }, []);
 };
 
 export const useRecommendationPanelData = () => {

src/widgets/RecommendationsPanel/hooks.test.js

@@ -39,7 +39,7 @@ describe('RecommendationsPanel hooks', () => {
           expect(calls.length).toEqual(1);
         });
         it('it is only run once (no prereqs)', () => {
-          expect(prereqs).toEqual(undefined);
+          expect(prereqs).toEqual([]);
         });
         it('calls fetchRecommendedCourses', () => {
           api.fetchRecommendedCourses.mockReturnValueOnce(Promise.resolve(response));