AA-385: Add LinkedIn Add to Profile Button to Course Celebrate (#249)

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}
                 >

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

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,
   };
 }