AA-211: Created certificate banner and studio link (#134)

Co-authored-by: Daphne Li-Chen <dli-chen@edx.org>

src/course-home/data/api.js

@@ -94,3 +94,8 @@ export async function postDismissWelcomeMessage(courseId) {
   const url = new URL(`${getConfig().LMS_BASE_URL}/api/course_home/v1/dismiss_welcome_message`);
   await getAuthenticatedHttpClient().post(url.href, { course_id: courseId });
 }
+
+export async function postRequestCert(courseId) {
+  const url = new URL(`${getConfig().LMS_BASE_URL}/courses/${courseId}/generate_user_cert`);
+  await getAuthenticatedHttpClient().post(url.href);
+}

src/course-home/data/thunks.js

@@ -6,6 +6,7 @@ import {
   getProgressTabData,
   postCourseDeadlines,
   postDismissWelcomeMessage,
+  postRequestCert,
 } from './api';
 
 import {
@@ -84,3 +85,7 @@ export function resetDeadlines(courseId, getTabData) {
 export function dismissWelcomeMessage(courseId) {
   return async () => postDismissWelcomeMessage(courseId);
 }
+
+export function requestCert(courseId) {
+  return async () => postRequestCert(courseId);
+}

src/course-home/progress-tab/CertificateBanner.jsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { requestCert } from '../data/thunks';
+
+import { useModel } from '../../generic/model-store';
+import messages from './messages';
+import VerifiedCert from '../../courseware/course/sequence/lock-paywall/assets/edx-verified-mini-cert.png';
+
+function CertificateBanner({ intl }) {
+  const {
+    courseId,
+  } = useSelector(state => state.courseHome);
+
+  const {
+    certificateData,
+    enrollmentMode,
+  } = useModel('progress', courseId);
+  if (certificateData === null || enrollmentMode === 'audit') { return null; }
+  const { certUrl, certDownloadUrl } = certificateData;
+  const dispatch = useDispatch();
+  function requestHandler() {
+    dispatch(requestCert(courseId));
+  }
+  return (
+    <section className="banner rounded my-4 p-4 container-fluid border border-primary-200 bg-info-100 row">
+      <div className="col-12 col-sm-9">
+        <div>
+          <div className="font-weight-bold">{certificateData.title}</div>
+          <div className="mt-1">{certificateData.msg}</div>
+        </div>
+        {certUrl && (
+          <div>
+            <a className="btn btn-primary my-3" href={certUrl} rel="noopener noreferrer" target="_blank">
+              {intl.formatMessage(messages.viewCert)}
+              <span className="sr-only">{intl.formatMessage(messages.opensNewWindow)}</span>
+            </a>
+          </div>
+        )}
+        {!certUrl && certificateData.isDownloadable && (
+          <div>
+            <a className="btn btn-primary my-3" href={certDownloadUrl} rel="noopener noreferrer" target="_blank">
+              {intl.formatMessage(messages.downloadCert)}
+              <span className="sr-only">{intl.formatMessage(messages.opensNewWindow)}</span>
+            </a>
+          </div>
+        )}
+        {!certUrl && !certificateData.isDownloadable && certificateData.isRequestable && (
+          <div className="my-3">
+            <button className="btn btn-primary" type="button" onClick={requestHandler}>
+              {intl.formatMessage(messages.requestCert)}
+            </button>
+          </div>
+        )}
+      </div>
+      <div className="col-0 col-sm-3 d-none d-sm-block">
+        <img
+          alt={intl.formatMessage(messages.certAlt)}
+          src={VerifiedCert}
+          className="float-right"
+          style={{ height: '120px' }}
+        />
+      </div>
+    </section>
+  );
+}
+
+CertificateBanner.propTypes = {
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(CertificateBanner);

src/course-home/progress-tab/ProgressTab.jsx

@@ -1,24 +1,34 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
 import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { useModel } from '../../generic/model-store';
 import Chapter from './Chapter';
+import CertificateBanner from './CertificateBanner';
+import messages from './messages';
 
-export default function ProgressTab() {
+function ProgressTab({ intl }) {
   const {
     courseId,
   } = useSelector(state => state.courseHome);
 
-  const { administrator, username } = getAuthenticatedUser();
+  const { administrator } = getAuthenticatedUser();
 
   const {
-    enrollmentMode,
     coursewareSummary,
+    studioUrl,
   } = useModel('progress', courseId);
 
   return (
     <section>
-      {enrollmentMode} {administrator} {username}
+      {administrator && studioUrl && (
+        <div className="row mb-3 mr-3 justify-content-end">
+          <a className="btn-sm border border-info" href={studioUrl}>
+            {intl.formatMessage(messages.studioLink)}
+          </a>
+        </div>
+      )}
+      <CertificateBanner />
       {coursewareSummary.map((chapter) => (
         <Chapter
           key={chapter.displayName}
@@ -28,3 +38,9 @@ export default function ProgressTab() {
     </section>
   );
 }
+
+ProgressTab.propTypes = {
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(ProgressTab);

src/course-home/progress-tab/messages.js

@@ -33,6 +33,31 @@ const messages = defineMessages({
     id: 'learning.progress.badge.scoreEarned',
     defaultMessage: '{earned} of {total} possible points',
   },
+  viewCert: {
+    id: 'learning.progress.badge.viewCert',
+    defaultMessage: 'View Certificate',
+  },
+  downloadCert: {
+    id: 'learning.progress.badge.downloadCert',
+    defaultMessage: 'Download Your Certificate',
+  },
+  requestCert: {
+    id: 'learning.progress.badge.requestCert',
+    defaultMessage: 'Request Certificate',
+  },
+  opensNewWindow: {
+    id: 'learning.progress.badge.opensNewWindow',
+    defaultMessage: 'Opens in a new browser window',
+  },
+  certAlt: {
+    id: 'learning.progress.badge.certAlt',
+    defaultMessage: 'Example Certificate',
+    description: 'Alternate text displayed when the example certificate image cannot be displayed.',
+  },
+  studioLink: {
+    id: 'learning.progress.badge.studioLink',
+    defaultMessage: 'View grading in studio',
+  },
 });
 
 export default messages;