From 7a05329594f84faa6a0e3ea32703e6f9247a0bfd Mon Sep 17 00:00:00 2001
From: Shafqat Farhan <shafqat.farhan@arbisoft.com>
Date: Tue, 28 Jun 2022 23:00:46 +0500
Subject: [PATCH] feat: VAN-987 - Added analytics event on recommendation
 course click

---
 .../RecommendationsPanel.jsx                  | 39 ++++++++++++++-----
 1 file changed, 29 insertions(+), 10 deletions(-)

diff --git a/lms/static/js/learner_dashboard/RecommendationsPanel.jsx b/lms/static/js/learner_dashboard/RecommendationsPanel.jsx
index c11561e82c..7a029351c4 100644
--- a/lms/static/js/learner_dashboard/RecommendationsPanel.jsx
+++ b/lms/static/js/learner_dashboard/RecommendationsPanel.jsx
@@ -2,6 +2,18 @@
 import React from 'react';
 
 class RecommendationsPanel extends React.Component {
+  constructor(props) {
+    super(props);
+    this.onCourseSelect = this.onCourseSelect.bind(this);
+  }
+
+  onCourseSelect(courseKey) {
+    window.analytics.track('edx.bi.user.recommended.course.click', {
+      course_key: courseKey,
+      is_personalized_recommendation: false,  // TODO: Use state here with default false and update its value from API response.
+    });
+  };
+
   render() {
     return (
       <div className="p-4 panel-background">
@@ -15,7 +27,9 @@ class RecommendationsPanel extends React.Component {
             />
           </div>
           <div className="course-title pl-3">
-            <a href="#" className="course-link">The Chemistry of Life</a>
+            <a href="#" className="course-link" onClick={() => this.onCourseSelect('add-course-key-1')}>
+                The Chemistry of Life
+            </a>
           </div>
         </div>
         <div className="course-card box-shadow-down-1 bg-white mb-3">
@@ -27,7 +41,9 @@ class RecommendationsPanel extends React.Component {
             />
           </div>
           <div className="course-title pl-3">
-            <a href="#" className="course-link">Drug Discovery & Medicinal Chemistry</a>
+            <a href="#" className="course-link" onClick={() => this.onCourseSelect('add-course-key-2')}>
+                Drug Discovery & Medicinal Chemistry
+            </a>
           </div>
         </div>
         <div className="course-card box-shadow-down-1 bg-white mb-3">
@@ -39,7 +55,9 @@ class RecommendationsPanel extends React.Component {
             />
           </div>
           <div className="course-title pl-3">
-            <a href="#" className="course-link">From Fossil Resources to Biomass: A Chemistry Perspective</a>
+            <a href="#" className="course-link" onClick={() => this.onCourseSelect('add-course-key-3')}>
+                From Fossil Resources to Biomass: A Chemistry Perspective
+            </a>
           </div>
         </div>
         <div className="course-card box-shadow-down-1 bg-white mb-3">
@@ -51,7 +69,9 @@ class RecommendationsPanel extends React.Component {
             />
           </div>
           <div className="course-title pl-3">
-            <a href="#" className="course-link">Digital Biomaterials</a>
+            <a href="#" className="course-link" onClick={() => this.onCourseSelect('add-course-key-4')}>
+                Digital Biomaterials
+            </a>
           </div>
         </div>
         <div className="course-card box-shadow-down-1 bg-white mb-3">
@@ -63,17 +83,16 @@ class RecommendationsPanel extends React.Component {
             />
           </div>
           <div className="course-title pl-3">
-            <a href="#" className="course-link">Basic Steps in Magnetic Resonance</a>
+            <a href="#" className="course-link" onClick={() => this.onCourseSelect('add-course-key-5')}>
+                Basic Steps in Magnetic Resonance
+            </a>
           </div>
         </div>
         {this.props.exploreCoursesUrl ? (
           <div className="d-flex justify-content-center">
-            <a
-              href={this.props.exploreCoursesUrl}
-              className="panel-explore-courses justify-content-center align-items-center"
-            >
+            <a href={this.props.exploreCoursesUrl} className="panel-explore-courses justify-content-center align-items-center">
               {gettext('Explore courses')}
-              <span className="icon fa fa-search search-icon" aria-hidden="true" />
+              <span className="icon fa fa-search search-icon" aria-hidden="true"/>
             </a>
           </div>
         ) : null}