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 = ( ); + 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} )} + {certStatus === 'downloadable' && linkedinAddToProfileUrl && ( + + )} {buttonLocation && (