From 9d8b5d21b5ceb8c6da48aff3650fcada30853c6d Mon Sep 17 00:00:00 2001
From: Dillon Dumesnil <ddumesnil@edx.org>
Date: Tue, 20 Oct 2020 07:30:18 -0700
Subject: [PATCH] AA-385: Add LinkedIn Add to Profile Button to Course
 Celebrate (#249)

---
 .../course/course-exit/CourseCelebration.jsx  | 28 +++++++++++++++++--
 src/courseware/course/course-exit/messages.js |  5 ++++
 src/courseware/data/api.js                    |  1 +
 3 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/src/courseware/course/course-exit/CourseCelebration.jsx b/src/courseware/course/course-exit/CourseCelebration.jsx
index b6b70081..87173516 100644
--- a/src/courseware/course/course-exit/CourseCelebration.jsx
+++ b/src/courseware/course/course-exit/CourseCelebration.jsx
@@ -7,8 +7,10 @@ import { layoutGenerator } from 'react-break';
 import { Helmet } from 'react-helmet';
 import { useDispatch } from 'react-redux';
 import { useParams } from 'react-router-dom';
+import { LinkedinIcon } from 'react-share';
 import { Alert, Button, Hyperlink } from '@edx/paragon';
 import { getConfig } from '@edx/frontend-platform';
+import { sendTrackEvent } from '@edx/frontend-platform/analytics';
 import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
 
 import CelebrationMobile from './assets/celebration_456x328.gif';
@@ -19,6 +21,8 @@ import { useModel } from '../../../generic/model-store';
 import { requestCert } from '../../../course-home/data/thunks';
 import DashboardFootnote from './DashboardFootnote';
 
+const LINKEDIN_BLUE = '#007fb1';
+
 function CourseCelebration({ intl }) {
   const layout = layoutGenerator({
     mobile: 0,
@@ -33,6 +37,7 @@ function CourseCelebration({ intl }) {
   const {
     certificateData,
     end,
+    linkedinAddToProfileUrl,
     verifyIdentityUrl,
   } = useModel('courses', courseId);
 
@@ -42,7 +47,7 @@ function CourseCelebration({ intl }) {
     downloadUrl,
   } = certificateData;
 
-  const { username } = getAuthenticatedUser();
+  const { administrator, username } = getAuthenticatedUser();
 
   const dashboardLink = (
     <Hyperlink
@@ -73,6 +78,14 @@ function CourseCelebration({ intl }) {
     </Hyperlink>
   );
 
+  const logClick = (service) => {
+    sendTrackEvent('edx.ui.lms.course_celebration.linkedin_add_to_profile.clicked', {
+      course_id: courseId,
+      is_staff: administrator,
+      service,
+    });
+  };
+
   let buttonLocation;
   let buttonText;
   let message;
@@ -192,9 +205,20 @@ function CourseCelebration({ intl }) {
                   {buttonText}
                 </Button>
               )}
+              {certStatus === 'downloadable' && linkedinAddToProfileUrl && (
+                <Button
+                  className="mr-3 mb-2 mb-sm-0"
+                  href={linkedinAddToProfileUrl}
+                  onClick={() => logClick('linkedin')}
+                  style={{ backgroundColor: LINKEDIN_BLUE, padding: '0.25rem 1.25rem 0.25rem 0.5rem' }}
+                >
+                  <LinkedinIcon bgStyle={{ fill: 'white' }} className="mr-2" iconFillColor={LINKEDIN_BLUE} round size={28} />
+                  {`${intl.formatMessage(messages.linkedinAddToProfileButton)}`}
+                </Button>
+              )}
               {buttonLocation && (
                 <Button
-                  className="bg-white"
+                  className="bg-white mb-2 mb-sm-0"
                   variant="outline-primary"
                   href={buttonLocation}
                 >
diff --git a/src/courseware/course/course-exit/messages.js b/src/courseware/course/course-exit/messages.js
index e693f934..df4e3b7e 100644
--- a/src/courseware/course/course-exit/messages.js
+++ b/src/courseware/course/course-exit/messages.js
@@ -62,6 +62,11 @@ const messages = defineMessages({
     defaultMessage: 'Learn more about ID verification',
     description: 'Link to an article about identity verification',
   },
+  linkedinAddToProfileButton: {
+    id: 'courseCelebration.linkedinAddToProfileButton',
+    defaultMessage: 'Add to LinkedIn profile',
+    description: "Button to add certificate information to the user's LinkedIn profile",
+  },
   nextButtonComplete: {
     id: 'learn.sequence.navigation.complete.button', // for historical reasons
     defaultMessage: 'Complete the course',
diff --git a/src/courseware/data/api.js b/src/courseware/data/api.js
index 6e4dd0d9..36d0795f 100644
--- a/src/courseware/data/api.js
+++ b/src/courseware/data/api.js
@@ -139,6 +139,7 @@ function normalizeMetadata(metadata) {
     courseExitPageIsActive: metadata.course_exit_page_is_active,
     certificateData: camelCaseObject(metadata.certificate_data),
     verifyIdentityUrl: metadata.verify_identity_url,
+    linkedinAddToProfileUrl: metadata.linkedin_add_to_profile_url,
   };
 }