fix: A couple of fixes for lilac (#422)

* fix: pass username into proctoring info panel (#406)

Pass a username into the proctoring info panel, allowing staff
to view a specific learner's onboarding status while masquerading.

* fix(i18n): update translations

* AA-720: Progress Tab Course Completion chart (#407)

* chore(deps): update dependency codecov to v3.8.1

* [REV-2127] feat: update gated content lock screen to Value Prop designs (#394)

* fix(i18n): update translations

* fix: allow media access through unit iframe (#412)

Set the `allow` attribute of the unit iframe to allow
access to camera, MIDI, location, and encrpyted media.

Access to these features was implicitly allowed in older
browser versions. However, in the current versions of
at least Chromium and Firefox, iframed content must be
explicitly granted the ability to request media access.

This fixes a bug where content requiring microphone
access did not work in the Learning MFE.

TNL-7675

* fix: AA-738: Switch our use of FormattedTime to use hourCycle (#418)

We had a bug reported where learners were seeing a due date like
March 24, 24:59 instead of March 25, 00:59. This is a bug that only
shows up in Chrome. The hour12 flag overrides the hourCycle flag so
we are just going to swap the two. h23 means a 24 hour format ranging
from 0-23 (there also exists a h24 option which goes from 1-24).

See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat
for any additional details on the options.

* feat: Switch to default values for 12 vs 24 hour time. (#420)

Our current version on react-intl doesn't support hourCycle
anyway and after speaking to product, we feel comfortable with
letting it default based on locale.

* fix: AA-663: Update header text for CourseCompletion

If the marketing url is not set, we shouldn't have a message
about sharing.

Co-authored-by: Bianca Severino <bseverino@edx.org>
Co-authored-by: edX Transifex Bot <learner-engineering@edx.org>
Co-authored-by: Carla Duarte <cduarte@edx.org>
Co-authored-by: Renovate Bot <bot@renovateapp.com>
Co-authored-by: stvn <stvn@mit.edu>
Co-authored-by: Diane Kaplan <dianekaplan@gmail.com>
Co-authored-by: Kyle McCormick <kmccormick@edx.org>

package-lock.json

@@ -5771,22 +5771,22 @@
       "dev": true
     },
     "codecov": {
-      "version": "3.7.2",
-      "resolved": "https://registry.npmjs.org/codecov/-/codecov-3.7.2.tgz",
-      "integrity": "sha512-fmCjAkTese29DUX3GMIi4EaKGflHa4K51EoMc29g8fBHawdk/+KEq5CWOeXLdd9+AT7o1wO4DIpp/Z1KCqCz1g==",
+      "version": "3.8.1",
+      "resolved": "https://registry.npmjs.org/codecov/-/codecov-3.8.1.tgz",
+      "integrity": "sha512-Qm7ltx1pzLPsliZY81jyaQ80dcNR4/JpcX0IHCIWrHBXgseySqbdbYfkdiXd7o/xmzQpGRVCKGYeTrHUpn6Dcw==",
       "dev": true,
       "requires": {
         "argv": "0.0.2",
         "ignore-walk": "3.0.3",
-        "js-yaml": "3.13.1",
+        "js-yaml": "3.14.0",
         "teeny-request": "6.0.1",
         "urlgrey": "0.4.4"
       },
       "dependencies": {
         "js-yaml": {
-          "version": "3.13.1",
-          "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.13.1.tgz",
-          "integrity": "sha512-YfbcO7jXDdyj0DGxYVSlSeQNHbD7XPWvrVWeVUujrQEoZzWJIRrCPoyk6kL6IAjAG2IolMK4T0hNUe0HOUs5Jw==",
+          "version": "3.14.0",
+          "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.0.tgz",
+          "integrity": "sha512-/4IbIeHcD9VMHFqDR/gQ7EdZdLimOvW2DdcxFjdyyZ9NsbS+ccrXqVWDtab/lRl5AlUqmpBx8EhPaWR+OtY17A==",
           "dev": true,
           "requires": {
             "argparse": "^1.0.7",

package.json

@@ -70,7 +70,7 @@
     "@testing-library/react": "10.3.0",
     "@testing-library/user-event": "12.0.17",
     "axios-mock-adapter": "1.18.2",
-    "codecov": "3.7.2",
+    "codecov": "3.8.1",
     "es-check": "5.1.4",
     "glob": "7.1.6",
     "husky": "3.1.0",

src/course-home/data/__factories__/index.js

@@ -1,3 +1,4 @@
 import './courseHomeMetadata.factory';
 import './datesTabData.factory';
 import './outlineTabData.factory';
+import './progressTabData.factory';

src/course-home/data/__factories__/progressTabData.factory.js

@@ -0,0 +1,71 @@
+import { Factory } from 'rosie'; // eslint-disable-line import/no-extraneous-dependencies
+
+// Sample data helpful when developing & testing, to see a variety of configurations.
+// This set of data may not be realistic, but it is intended to demonstrate many UI results.
+Factory.define('progressTabData')
+  .attrs({
+    certificate_data: null,
+    completion_summary: {
+      complete_count: 1,
+      incomplete_count: 1,
+      locked_count: 0,
+    },
+    course_grade: {
+      percent: 0,
+      is_passing: false,
+    },
+    section_scores: [
+      {
+        display_name: 'First section',
+        subsections: [
+          {
+            assignment_type: 'Homework',
+            display_name: 'First subsection',
+            has_graded_assignment: true,
+            num_points_earned: 0,
+            num_points_possible: 1,
+            percent_graded: 0.0,
+            show_correctness: 'always',
+            show_grades: true,
+            url: 'http://learning.edx.org/course/course-v1:edX+Test+run/first_subsection',
+          },
+        ],
+      },
+      {
+        display_name: 'Second section',
+        subsections: [
+          {
+            assignment_type: 'Homework',
+            display_name: 'Second subsection',
+            has_graded_assignment: true,
+            num_points_earned: 1,
+            num_points_possible: 1,
+            percent_graded: 1.0,
+            show_correctness: 'always',
+            show_grades: true,
+            url: 'http://learning.edx.org/course/course-v1:edX+Test+run/second_subsection',
+          },
+        ],
+      },
+    ],
+    enrollment_mode: 'audit',
+    grading_policy: {
+      assignment_policies: [
+        {
+          num_droppable: 1,
+          short_label: 'HW',
+          type: 'Homework',
+          weight: 1,
+        },
+      ],
+      grade_range: {
+        pass: 0.75,
+      },
+    },
+    studio_url: 'http://studio.edx.org/settings/grading/course-v1:edX+Test+run',
+    verification_data: {
+      link: null,
+      status: 'none',
+      status_date: null,
+    },
+  });

src/course-home/data/api.js

@@ -142,8 +142,11 @@ export async function getProgressTabData(courseId) {
   }
 }
 
-export async function getProctoringInfoData(courseId) {
-  const url = `${getConfig().LMS_BASE_URL}/api/edx_proctoring/v1/user_onboarding/status?course_id=${encodeURIComponent(courseId)}`;
+export async function getProctoringInfoData(courseId, username) {
+  let url = `${getConfig().LMS_BASE_URL}/api/edx_proctoring/v1/user_onboarding/status?course_id=${encodeURIComponent(courseId)}`;
+  if (username) {
+    url += `&username=${encodeURIComponent(username)}`;
+  }
   try {
     const { data } = await getAuthenticatedHttpClient().get(url);
     return data;

src/course-home/outline-tab/OutlineTab.jsx

@@ -39,6 +39,7 @@ function OutlineTab({ intl }) {
   const {
     org,
     title,
+    username,
   } = useModel('courseHomeMeta', courseId);
 
   const {
@@ -204,6 +205,7 @@ function OutlineTab({ intl }) {
           <div className="col col-12 col-md-4">
             <ProctoringInfoPanel
               courseId={courseId}
+              username={username}
             />
             {courseGoalToDisplay && goalOptions && goalOptions.length > 0 && (
               <UpdateGoalSelector

src/course-home/outline-tab/SequenceLink.jsx

@@ -96,7 +96,6 @@ function SequenceLink({
                       day="numeric"
                       month="short"
                       year="numeric"
-                      hour12={false}
                       timeZoneName="short"
                       value={due}
                       {...timezoneFormatArgs}

src/course-home/outline-tab/alerts/course-end-alert/CourseEndAlert.jsx

@@ -37,7 +37,6 @@ function CourseEndAlert({ payload }) {
         day="numeric"
         month="short"
         year="numeric"
-        hour12={false}
         timeZoneName="short"
         value={endDate}
         {...timezoneFormatArgs}

src/course-home/outline-tab/alerts/course-start-alert/CourseStartAlert.jsx

@@ -42,7 +42,6 @@ function CourseStartAlert({ payload }) {
                 day="numeric"
                 month="short"
                 year="numeric"
-                hour12={false}
                 timeZoneName="short"
                 value={startDate}
                 {...timezoneFormatArgs}

src/course-home/outline-tab/widgets/ProctoringInfoPanel.jsx

@@ -9,7 +9,7 @@ import { Button } from '@edx/paragon';
 import messages from '../messages';
 import { getProctoringInfoData } from '../../data/api';
 
-function ProctoringInfoPanel({ courseId, intl }) {
+function ProctoringInfoPanel({ courseId, username, intl }) {
   const [status, setStatus] = useState('');
   const [link, setLink] = useState('');
   const [releaseDate, setReleaseDate] = useState(null);
@@ -74,7 +74,7 @@ function ProctoringInfoPanel({ courseId, intl }) {
   }
 
   useEffect(() => {
-    getProctoringInfoData(courseId)
+    getProctoringInfoData(courseId, username)
       .then(
         response => {
           if (response) {
@@ -172,7 +172,12 @@ function ProctoringInfoPanel({ courseId, intl }) {
 
 ProctoringInfoPanel.propTypes = {
   courseId: PropTypes.string.isRequired,
+  username: PropTypes.string,
   intl: intlShape.isRequired,
 };
 
+ProctoringInfoPanel.defaultProps = {
+  username: null,
+};
+
 export default injectIntl(ProctoringInfoPanel);

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

@@ -0,0 +1,85 @@
+import React from 'react';
+import { Factory } from 'rosie';
+import { getConfig } from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import MockAdapter from 'axios-mock-adapter';
+
+import {
+  initializeMockApp, logUnhandledRequests, render, screen, act,
+} from '../../setupTest';
+import { appendBrowserTimezoneToUrl, executeThunk } from '../../utils';
+import * as thunks from '../data/thunks';
+import initializeStore from '../../store';
+import ProgressTab from './ProgressTab';
+
+initializeMockApp();
+jest.mock('@edx/frontend-platform/analytics');
+
+describe('Progress Tab', () => {
+  let axiosMock;
+
+  const courseId = 'course-v1:edX+Test+run';
+  let courseMetadataUrl = `${getConfig().LMS_BASE_URL}/api/course_home/v1/course_metadata/${courseId}`;
+  courseMetadataUrl = appendBrowserTimezoneToUrl(courseMetadataUrl);
+  const progressUrl = `${getConfig().LMS_BASE_URL}/api/course_home/v1/progress/${courseId}`;
+
+  const store = initializeStore();
+  const defaultMetadata = Factory.build('courseHomeMetadata', { id: courseId });
+  const defaultTabData = Factory.build('progressTabData');
+
+  function setTabData(attributes, options) {
+    const progressTabData = Factory.build('progressTabData', attributes, options);
+    axiosMock.onGet(progressUrl).reply(200, progressTabData);
+  }
+
+  async function fetchAndRender() {
+    await executeThunk(thunks.fetchProgressTab(courseId), store.dispatch);
+    await act(async () => render(<ProgressTab />, { store }));
+  }
+
+  beforeEach(async () => {
+    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+
+    // Set defaults for network requests
+    axiosMock.onGet(courseMetadataUrl).reply(200, defaultMetadata);
+    axiosMock.onGet(progressUrl).reply(200, defaultTabData);
+
+    logUnhandledRequests(axiosMock);
+  });
+
+  describe('Grade Summary', () => {
+    it('renders Grade Summary table when assignment policies are populated', async () => {
+      await fetchAndRender();
+      expect(screen.getByText('Grade summary')).toBeInTheDocument();
+    });
+
+    it('does not render Grade Summary when assignment policies are not populated', async () => {
+      setTabData({
+        grading_policy: {
+          assignment_policies: [],
+        },
+      });
+      await fetchAndRender();
+      expect(screen.queryByText('Grade summary')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Detailed Grades', () => {
+    it('renders Detailed Grades table when section scores are populated', async () => {
+      await fetchAndRender();
+      expect(screen.getByText('Detailed grades')).toBeInTheDocument();
+
+      expect(screen.getByRole('link', { name: 'First subsection' }));
+      expect(screen.getByRole('link', { name: 'Second subsection' }));
+    });
+
+    it('render message when section scores are not populated', async () => {
+      setTabData({
+        section_scores: [],
+      });
+      await fetchAndRender();
+      expect(screen.getByText('Detailed grades')).toBeInTheDocument();
+      expect(screen.getByText('You currently have no graded problem scores.')).toBeInTheDocument();
+    });
+  });
+});

src/course-home/progress-tab/course-completion/CompleteDonutSegment.jsx

@@ -0,0 +1,77 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { OverlayTrigger, Popover } from '@edx/paragon';
+
+import messages from './messages';
+
+function CompleteDonutSegment({ completePercentage, intl, lockedPercentage }) {
+  const [showCompletePopover, setShowCompletePopover] = useState(false);
+
+  const completeSegmentOffset = (3.6 * completePercentage) / 8;
+  let completeTooltipDegree = completePercentage < 100 ? -completeSegmentOffset : 0;
+
+  const lockedSegmentOffset = lockedPercentage - 75;
+  if (lockedPercentage > 0) {
+    completeTooltipDegree = (lockedSegmentOffset + completePercentage) * -3.6 + 90 + completeSegmentOffset;
+  }
+
+  return (
+    <g
+      className="donut-segment-group"
+      onBlur={() => setShowCompletePopover(false)}
+      onFocus={() => setShowCompletePopover(true)}
+      tabIndex="-1"
+    >
+      <circle
+        className="donut-segment complete-stroke"
+        cx="21"
+        cy="21"
+        r="15.91549430918954"
+        strokeDasharray={`${completePercentage} ${100 - completePercentage}`}
+        strokeDashoffset={lockedSegmentOffset + completePercentage}
+      />
+
+      {/* Tooltip */}
+      <OverlayTrigger
+        show={showCompletePopover}
+        placement="top"
+        overlay={(
+          <Popover aria-hidden="true">
+            <Popover.Content>
+              {intl.formatMessage(messages.completeContentTooltip)}
+            </Popover.Content>
+          </Popover>
+        )}
+      >
+        {/* Used to anchor the tooltip within the complete segment's stroke */}
+        <rect x="19" y="3" style={{ transform: `rotate(${completeTooltipDegree}deg)` }} />
+      </OverlayTrigger>
+
+      {/* Segment dividers */}
+      {lockedPercentage > 0 && lockedPercentage < 100 && (
+        <circle
+          className="donut-segment divider-stroke"
+          strokeDasharray="0.3 99.7"
+          strokeDashoffset={0.15 + lockedSegmentOffset}
+        />
+      )}
+      {completePercentage < 100 && lockedPercentage < 100 && lockedPercentage + completePercentage === 100 && (
+        <circle
+          className="donut-segment divider-stroke"
+          strokeDasharray="0.3 99.7"
+          strokeDashoffset="25.15"
+        />
+      )}
+    </g>
+  );
+}
+
+CompleteDonutSegment.propTypes = {
+  completePercentage: PropTypes.number.isRequired,
+  intl: intlShape.isRequired,
+  lockedPercentage: PropTypes.number.isRequired,
+};
+
+export default injectIntl(CompleteDonutSegment);

src/course-home/progress-tab/course-completion/CompletionDonutChart.jsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useModel } from '../../../generic/model-store';
+
+import CompleteDonutSegment from './CompleteDonutSegment';
+import IncompleteDonutSegment from './IncompleteDonutSegment';
+import LockedDonutSegment from './LockedDonutSegment';
+import messages from './messages';
+
+function CompletionDonutChart({ intl }) {
+  const {
+    courseId,
+  } = useSelector(state => state.courseHome);
+
+  const {
+    completionSummary: {
+      completeCount,
+      incompleteCount,
+      lockedCount,
+    },
+  } = useModel('progress', courseId);
+
+  const numTotalUnits = completeCount + incompleteCount + lockedCount;
+  const completePercentage = Number(((completeCount / numTotalUnits) * 100).toFixed(0));
+  const lockedPercentage = Number(((lockedCount / numTotalUnits) * 100).toFixed(0));
+  const incompletePercentage = 100 - completePercentage - lockedPercentage;
+
+  return (
+    <>
+      <svg role="img" width="50%" height="100%" viewBox="0 0 42 42" className="donut" style={{ maxWidth: '178px' }} aria-hidden="true">
+        {/* The radius (or "r" attribute) is based off of a circumference of 100 in order to simplify percentage
+            calculations. The subsequent stroke-dasharray values found in each segment should add up to equal 100
+            in order to wrap around the circle once. */}
+        <circle className="donut-hole" fill="#fff" cx="21" cy="21" r="15.91549430918954" />
+        <g className="donut-chart-text">
+          <text x="50%" y="50%" className="donut-chart-number">
+            {completePercentage}%
+          </text>
+          <text x="50%" y="50%" className="donut-chart-label">
+            {intl.formatMessage(messages.donutLabel)}
+          </text>
+        </g>
+        <IncompleteDonutSegment incompletePercentage={incompletePercentage} />
+        <LockedDonutSegment lockedPercentage={lockedPercentage} />
+        <CompleteDonutSegment completePercentage={completePercentage} lockedPercentage={lockedPercentage} />
+      </svg>
+      <div className="sr-only">
+        {intl.formatMessage(messages.percentComplete, { percent: completePercentage })}
+        {intl.formatMessage(messages.percentIncomplete, { percent: incompletePercentage })}
+        {lockedPercentage > 0 && (
+          <>
+            {intl.formatMessage(messages.percentLocked, { percent: lockedPercentage })}
+          </>
+        )}
+      </div>
+    </>
+  );
+}
+
+CompletionDonutChart.propTypes = {
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(CompletionDonutChart);

src/course-home/progress-tab/course-completion/CompletionDonutChart.scss

@@ -0,0 +1,74 @@
+.donut rect {
+  fill: transparent;
+  width: 4px;
+  height: 4px;
+  transform-origin: center;
+}
+
+.donut-chart-label {
+  font: {
+    family: $font-family-sans-serif;
+    size: .2rem;
+    weight: $font-weight-normal;
+  }
+  text-anchor: middle;
+}
+
+.donut-chart-number {
+  font: {
+    family: $font-family-monospace;
+    size: .5rem;
+    weight: $font-weight-bold;
+  }
+  line-height: 1rem;
+  text-anchor: middle;
+  -moz-transform: translateY(-0.6em);
+  -ms-transform: translateY(-0.6em);
+  -webkit-transform: translateY(-0.6em);
+  transform: translateY(-0.6em);
+}
+
+.donut-chart-text {
+  fill: $primary-500;
+  -moz-transform: translateY(0.25em);
+  -ms-transform: translateY(0.25em);
+  -webkit-transform: translateY(0.25em);
+  transform: translateY(0.25em);
+}
+
+.donut-ring, .donut-segment {
+  stroke-width: 6px;
+  fill: transparent;
+}
+
+.donut-segment-group {
+  cursor: pointer;
+  pointer-events: visibleStroke;
+
+  &:focus {
+    outline: none;
+
+    circle {
+      stroke-width: 7px;
+    }
+  }
+}
+
+.donut-ring, .donut-segment, .donut-hole {
+  &.complete-stroke {
+    stroke: $info-500;
+  }
+
+  &.divider-stroke {
+    stroke-width: 7px;
+    stroke: white;
+  }
+
+  &.incomplete-stroke {
+    stroke: $light-300;
+  }
+
+  &.locked-stroke {
+    stroke: $primary-500;
+  }
+}

src/course-home/progress-tab/course-completion/CourseCompletion.jsx

@@ -1,35 +1,29 @@
 import React from 'react';
-import { useSelector } from 'react-redux';
-import { useModel } from '../../../generic/model-store';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 
-function CourseCompletion() {
-  // TODO: AA-720
-  const {
-    courseId,
-  } = useSelector(state => state.courseHome);
-
-  const {
-    completionSummary: {
-      completeCount,
-      incompleteCount,
-      lockedCount,
-    },
-  } = useModel('progress', courseId);
-
-  const total = completeCount + incompleteCount + lockedCount;
-  const completePercentage = ((completeCount / total) * 100).toFixed(0);
-  const incompletePercentage = ((incompleteCount / total) * 100).toFixed(0);
-  const lockedPercentage = ((lockedCount / total) * 100).toFixed(0);
+import CompletionDonutChart from './CompletionDonutChart';
+import messages from './messages';
 
+function CourseCompletion({ intl }) {
   return (
     <section className="text-dark-700 mb-4 rounded shadow-sm p-4">
-      <h2>Course completion</h2>
-      <p className="small">This represents how much course content you have completed.</p>
-      Complete: {completePercentage}%
-      Incomplete: {incompletePercentage}%
-      Locked: {lockedPercentage}%
+      <div className="row w-100 m-0">
+        <div className="col-12 col-sm-6 col-md-7 p-0">
+          <h2>{intl.formatMessage(messages.courseCompletion)}</h2>
+          <p className="small">
+            {intl.formatMessage(messages.completionBody)}
+          </p>
+        </div>
+        <div className="col-12 col-sm-6 col-md-5 mt-sm-n3 p-0 text-center">
+          <CompletionDonutChart />
+        </div>
+      </div>
     </section>
   );
 }
 
-export default CourseCompletion;
+CourseCompletion.propTypes = {
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(CourseCompletion);

src/course-home/progress-tab/course-completion/IncompleteDonutSegment.jsx

@@ -0,0 +1,55 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { OverlayTrigger, Popover } from '@edx/paragon';
+
+import messages from './messages';
+
+function IncompleteDonutSegment({ incompletePercentage, intl }) {
+  const [showIncompletePopover, setShowIncompletePopover] = useState(false);
+
+  const incompleteSegmentOffset = (3.6 * incompletePercentage) / 16;
+  const incompleteTooltipDegree = incompletePercentage < 100 ? incompleteSegmentOffset : 0;
+
+  return (
+    <g
+      className="donut-segment-group"
+      onBlur={() => setShowIncompletePopover(false)}
+      onFocus={() => setShowIncompletePopover(true)}
+      tabIndex="-1"
+    >
+      <circle
+        className="donut-ring incomplete-stroke"
+        cx="21"
+        cy="21"
+        r="15.91549430918954"
+        strokeDasharray={`${incompletePercentage} ${100 - incompletePercentage}`}
+        strokeDashoffset="25"
+      />
+
+      {/* Tooltip */}
+      <OverlayTrigger
+        show={showIncompletePopover}
+        placement="top"
+        overlay={(
+          <Popover aria-hidden="true">
+            <Popover.Content>
+              {intl.formatMessage(messages.incompleteContentTooltip)}
+            </Popover.Content>
+          </Popover>
+        )}
+      >
+        {/* Used to anchor the tooltip within the incomplete segment's stroke */}
+        <rect x="19" y="3" style={{ transform: `rotate(${incompleteTooltipDegree}deg)` }} />
+      </OverlayTrigger>
+    </g>
+  );
+}
+
+IncompleteDonutSegment.propTypes = {
+  incompletePercentage: PropTypes.number.isRequired,
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(IncompleteDonutSegment);

src/course-home/progress-tab/course-completion/LockedDonutSegment.jsx

@@ -0,0 +1,72 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+
+import { OverlayTrigger, Popover } from '@edx/paragon';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+
+import messages from './messages';
+
+function LockedDonutSegment({ intl, lockedPercentage }) {
+  const [showLockedPopover, setShowLockedPopover] = useState(false);
+
+  if (!lockedPercentage > 0) {
+    return null;
+  }
+
+  const iconDegree = lockedPercentage > 8 ? (3.6 * lockedPercentage) / 8 : ((3.6 * lockedPercentage) / 5) * 2;
+
+  return (
+    <g
+      className="donut-segment-group"
+      onBlur={() => setShowLockedPopover(false)}
+      onFocus={() => setShowLockedPopover(true)}
+      tabIndex="-1"
+    >
+      <circle
+        className="donut-segment locked-stroke"
+        cx="21"
+        cy="21"
+        r="15.91549430918954"
+        strokeDasharray={`${lockedPercentage} ${100 - lockedPercentage}`}
+        strokeDashoffset={lockedPercentage - 75}
+      />
+
+      {/* Tooltip */}
+      <OverlayTrigger
+        show={showLockedPopover}
+        placement="top"
+        overlay={(
+          <Popover aria-hidden="true">
+            <Popover.Content>
+              {intl.formatMessage(messages.lockedContentTooltip)}
+            </Popover.Content>
+          </Popover>
+        )}
+      >
+        <g
+          width="6"
+          height="21"
+          viewBox="0 0 21 6"
+          style={{
+            transformOrigin: 'center',
+            transform: `rotate(-${iconDegree}deg)`,
+          }}
+        >
+          {/* Locked icon */}
+          <path
+            d="M20 8.00002H17V6.21002C17 3.60002 15.09 1.27002 12.49 1.02002C9.51 0.740018 7 3.08002 7 6.00002V8.00002H4V22H20V8.00002ZM12 17C10.9 17 10 16.1 10 15C10 13.9 10.9 13 12 13C13.1 13 14 13.9 14 15C14 16.1 13.1 17 12 17ZM9 8.00002V6.00002C9 4.34002 10.34 3.00002 12 3.00002C13.66 3.00002 15 4.34002 15 6.00002V8.00002H9Z"
+            fill={lockedPercentage > 5 ? 'white' : 'transparent'}
+            style={{ transform: `scale(0.18) translate(5.8em, .7em) rotate(${iconDegree}deg)` }}
+          />
+        </g>
+      </OverlayTrigger>
+    </g>
+  );
+}
+
+LockedDonutSegment.propTypes = {
+  intl: intlShape.isRequired,
+  lockedPercentage: PropTypes.number.isRequired,
+};
+
+export default injectIntl(LockedDonutSegment);

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

@@ -0,0 +1,42 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  donutLabel: {
+    id: 'progress.completion.donut.label',
+    defaultMessage: 'completed',
+  },
+  completionBody: {
+    id: 'progress.completion.body',
+    defaultMessage: 'This represents how much of the course content you have completed. Note that some content may not yet be released.',
+  },
+  completeContentTooltip: {
+    id: 'progress.completion.tooltip.locked',
+    defaultMessage: 'Content that you have completed.',
+  },
+  courseCompletion: {
+    id: 'progress.completion.header',
+    defaultMessage: 'Course completion',
+  },
+  incompleteContentTooltip: {
+    id: 'progress.completion.tooltip',
+    defaultMessage: 'Content that you have access to and have not completed.',
+  },
+  lockedContentTooltip: {
+    id: 'progress.completion.tooltip.complete',
+    defaultMessage: 'Content that is locked and available only to those who upgrade.',
+  },
+  percentComplete: {
+    id: 'progress.completion.donut.percentComplete',
+    defaultMessage: 'You have completed {percent}% of content in this course.',
+  },
+  percentIncomplete: {
+    id: 'progress.completion.donut.percentIncomplete',
+    defaultMessage: 'You have not completed {percent}% of content in this course that you have access to.',
+  },
+  percentLocked: {
+    id: 'progress.completion.donut.percentLocked',
+    defaultMessage: '{percent}% of content in this course is locked and available only for those who upgrade.',
+  },
+});
+
+export default messages;

src/course-home/progress-tab/grades/detailed-grades/DetailedGrades.jsx

@@ -31,15 +31,15 @@ function DetailedGrades({ intl }) {
   );
 
   return (
-    <section className="text-dark-700 mb-4">
+    <section className="text-dark-700">
       <h3 className="h4 mb-3">{intl.formatMessage(messages.detailedGrades)}</h3>
       {hasSectionScores && (
         <DetailedGradesTable sectionScores={sectionScores} />
       )}
       {!hasSectionScores && (
-        <p className="small">You currently have no graded problem scores.</p>
+        <p className="small">{intl.formatMessage(messages.detailedGradesEmpty)}</p>
       )}
-      <p className="x-small">
+      <p className="x-small m-0">
         <FormattedMessage
           id="progress.ungradedAlert"
           defaultMessage="For progress on ungraded aspects of the course, view your {outlineLink}."

src/course-home/progress-tab/grades/grade-summary/AssignmentTypeCell.jsx

@@ -19,7 +19,7 @@ function AssignmentTypeCell({ assignmentType, footnoteMarker, footnoteId }) {
 AssignmentTypeCell.propTypes = {
   assignmentType: PropTypes.string.isRequired,
   footnoteId: PropTypes.string,
-  footnoteMarker: PropTypes.string,
+  footnoteMarker: PropTypes.number,
 };
 
 AssignmentTypeCell.defaultProps = {

src/course-home/progress-tab/grades/grade-summary/GradeSummaryHeader.jsx

@@ -11,7 +11,7 @@ function GradeSummaryHeader({ intl }) {
     <div className="row w-100 m-0 align-items-center">
       <h3 className="h4 mb-3 mr-2">{intl.formatMessage(messages.gradeSummary)}</h3>
       <OverlayTrigger
-        trigger={['hover', 'click']}
+        trigger="click"
         placement="top"
         overlay={(
           <Popover>

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

@@ -17,6 +17,10 @@ const messages = defineMessages({
     id: 'progress.detailedGrades',
     defaultMessage: 'Detailed grades',
   },
+  detailedGradesEmpty: {
+    id: 'progress.detailedGrades.emptyTable',
+    defaultMessage: 'You currently have no graded problem scores.',
+  },
   footnotesTitle: {
     id: 'progress.footnotes.title',
     defaultMessage: 'Grade summary footnotes',

src/courseware/course/course-exit/CourseCelebration.jsx

@@ -45,6 +45,7 @@ function CourseCelebration({ intl }) {
     certificateData,
     end,
     linkedinAddToProfileUrl,
+    marketingUrl,
     offer,
     org,
     relatedPrograms,
@@ -287,7 +288,8 @@ function CourseCelebration({ intl }) {
           {intl.formatMessage(messages.congratulationsHeader)}
         </div>
         <div className="col-12 p-0 font-weight-normal lead text-center">
-          {intl.formatMessage(messages.shareHeader)}
+          {intl.formatMessage(messages.completedCourseHeader)}
+          {marketingUrl && ` ${intl.formatMessage(messages.shareMessage)}`}
           <SocialIcons
             analyticsId="edx.ui.lms.course_exit.social_share.clicked"
             className="mt-2"

src/courseware/course/course-exit/messages.js

@@ -35,6 +35,10 @@ const messages = defineMessages({
     defaultMessage: 'Sample certificate',
     description: 'Alt text used to describe an image of a certificate',
   },
+  completedCourseHeader: {
+    id: 'courseCelebration.completedCourseHeader',
+    defaultMessage: 'You have completed your course.',
+  },
   congratulationsHeader: {
     id: 'courseCelebration.congratulationsHeader',
     defaultMessage: 'Congratulations!',
@@ -127,9 +131,9 @@ const messages = defineMessages({
     defaultMessage: 'Search our catalog',
     description: 'First part of a sentence that continues afterward',
   },
-  shareHeader: {
-    id: 'courseCelebration.shareHeader',
-    defaultMessage: 'You have completed your course. Share your success on social media or email.',
+  shareMessage: {
+    id: 'courseCelebration.shareMessage',
+    defaultMessage: 'Share your success on social media or email.',
   },
   socialMessage: {
     id: 'courseExit.social.shareCompletionMessage',

src/courseware/course/sequence/Unit.jsx

@@ -23,6 +23,20 @@ import { MMP2PLockPaywall } from '../../../experiments/mm-p2p';
 
 const LockPaywall = React.lazy(() => import('./lock-paywall'));
 
+/**
+ * Feature policy for iframe, allowing access to certain courseware-related media.
+ *
+ * We must use the wildcard (*) origin for each feature, as courseware content
+ * may be embedded in external iframes. Notably, xblock-lti-consumer is a popular
+ * block that iframes external course content.
+
+ * This policy was selected in conference with the edX Security Working Group.
+ * Changes to it should be vetted by them (security@edx.org).
+ */
+const IFRAME_FEATURE_POLICY = (
+  'microphone *; camera *; midi *; geolocation *; encrypted-media *'
+);
+
 /**
  * We discovered an error in Firefox where - upon iframe load - React would cease to call any
  * useEffect hooks until the user interacts with the page again.  This is particularly confusing
@@ -155,7 +169,7 @@ function Unit({
                 : (
                   <iframe
                     title={modalOptions.title}
-                    allow="microphone *; camera *; midi *; geolocation *; encrypted-media *"
+                    allow={IFRAME_FEATURE_POLICY}
                     frameBorder="0"
                     src={modalOptions.url}
                     style={{
@@ -178,6 +192,7 @@ function Unit({
             id="unit-iframe"
             title={unit.title}
             src={iframeUrl}
+            allow={IFRAME_FEATURE_POLICY}
             allowFullScreen
             height={iframeHeight}
             scrolling="no"

src/courseware/course/sequence/lock-paywall/LockPaywall.jsx

@@ -1,13 +1,17 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faLock } from '@fortawesome/free-solid-svg-icons';
+import { faCheck } from '@fortawesome/free-solid-svg-icons';
 import { sendTrackEvent } from '@edx/frontend-platform/analytics';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-
+import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import {
+  Alert, Button, Icon,
+} from '@edx/paragon';
+import { Locked } from '@edx/paragon/icons';
 import messages from './messages';
-import VerifiedCert from '../../../../generic/assets/edX_certificate.png';
+import certificateLocked from '../../../../generic/assets/edX_locked_certificate.png';
 import { useModel } from '../../../../generic/model-store';
+import './LockPaywall.scss';
 
 function LockPaywall({
   intl,
@@ -42,33 +46,128 @@ function LockPaywall({
       pageName: 'in_course',
     });
   };
+
+  const lockIcon = (
+    <Icon
+      className="float-left"
+      src={Locked}
+      aria-hidden="true"
+    />
+  );
+
+  const verifiedCertLink = (
+    <Alert.Link
+      href="https://www.edx.org/verified-certificate"
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      {intl.formatMessage(messages['learn.lockPaywall.list.bullet1.linktext'])}
+    </Alert.Link>
+  );
+
+  const gradedAssignments = (
+    <span className="font-weight-bold">
+      {intl.formatMessage(messages['learn.lockPaywall.list.bullet2.boldtext'])}
+    </span>
+  );
+  const fullAccess = (
+    <span className="font-weight-bold">
+      {intl.formatMessage(messages['learn.lockPaywall.list.bullet3.boldtext'])}
+    </span>
+  );
+  const nonProfit = (
+    <span className="font-weight-bold">
+      {intl.formatMessage(messages['learn.lockPaywall.list.bullet4.boldtext'])}
+    </span>
+  );
+
   return (
-    <div className="border border-gray rounded d-flex justify-content-between mt-2 p-3">
-      <div>
-        <h4 className="font-weight-bold mb-2">
-          <FontAwesomeIcon icon={faLock} className="text-black mr-2 ml-1" style={{ fontSize: '2rem' }} />
-          <span>{intl.formatMessage(messages['learn.lockPaywall.title'])}</span>
-        </h4>
-        <p className="mb-0">
-          <span>{intl.formatMessage(messages['learn.lockPaywall.content'])}</span>
-          &nbsp;
-          <a className="lock_paywall_upgrade_link" href={upgradeUrl} onClick={logClick}>
+    <Alert variant="light" aria-live="off">
+      <div className="row">
+        <div className="col-auto px-0">
+          {lockIcon}
+        </div>
+
+        <div className="col">
+          <h4 aria-level="3">
+            <span>{intl.formatMessage(messages['learn.lockPaywall.title'])}</span>
+          </h4>
+
+          <div className="mb-2 upgrade-intro">
+            {intl.formatMessage(messages['learn.lockPaywall.content'])}
+          </div>
+
+          <div className="d-flex flex-row flex-wrap">
+            <div style={{ float: 'left' }} className="mr-3 mb-2">
+              <img
+                alt={intl.formatMessage(messages['learn.lockPaywall.example.alt'])}
+                src={certificateLocked}
+                className="border-0 certificate-image-banner"
+                style={{ height: '128px', width: '175px' }}
+              />
+            </div>
+
+            <div className="mw-xs list-div">
+              <div className="mb-2">
+                {intl.formatMessage(messages['learn.lockPaywall.list.intro'])}
+              </div>
+              <ul className="fa-ul ml-4 pl-2">
+                <li>
+                  <span className="fa-li"><FontAwesomeIcon icon={faCheck} /></span>
+                  <FormattedMessage
+                    id="gatedContent.paragraph.bulletOne"
+                    defaultMessage="Earn a {verifiedCertLink} of completion to showcase on your resume"
+                    values={{ verifiedCertLink }}
+                    className="bullet-text"
+                  />
+                </li>
+                <li>
+                  <span className="fa-li"><FontAwesomeIcon icon={faCheck} /></span>
+                  <FormattedMessage
+                    id="gatedContent.paragraph.bulletTwo"
+                    defaultMessage="Unlock access to all course activities, including {gradedAssignments}"
+                    values={{ gradedAssignments }}
+                  />
+                </li>
+                <li>
+                  <span className="fa-li"><FontAwesomeIcon icon={faCheck} /></span>
+                  <FormattedMessage
+                    id="gatedContent.paragraph.bulletThree"
+                    defaultMessage="{fullAccess} to course content and materials, even after the course ends"
+                    values={{ fullAccess }}
+                  />
+                </li>
+                <li>
+                  <span className="fa-li"><FontAwesomeIcon icon={faCheck} /></span>
+                  <FormattedMessage
+                    id="gatedContent.paragraph.bulletFour"
+                    defaultMessage="Support our {nonProfit} mission at edX"
+                    values={{ nonProfit }}
+                  />
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+
+        <div
+          className="col-md-auto p-md-0 d-md-flex align-items-md-center mr-md-3"
+          style={{ textAlign: 'right' }}
+        >
+          <Button
+            className="lock_paywall_upgrade_link"
+            href={upgradeUrl}
+            onClick={logClick}
+            role="link"
+          >
             {intl.formatMessage(messages['learn.lockPaywall.upgrade.link'], {
               currencySymbol,
               price,
             })}
-          </a>
-        </p>
+          </Button>
+        </div>
       </div>
-      <div>
-        <img
-          alt={intl.formatMessage(messages['learn.lockPaywall.example.alt'])}
-          src={VerifiedCert}
-          className="border-0"
-          style={{ height: '70px' }}
-        />
-      </div>
-    </div>
+    </Alert>
   );
 }
 LockPaywall.propTypes = {

src/courseware/course/sequence/lock-paywall/LockPaywall.scss

@@ -0,0 +1,12 @@
+
+// Temporary CSS intervention until paragon list items will support icons (PAR-429)
+.fa-li {
+    left: -31px !important;
+    padding-right: 22px;
+}
+
+    @media only screen and (min-width: 992px) and (max-width: 1100px) {
+        .list-div {
+            width: 62%;
+    }
+}

src/i18n/messages/ar.json

@@ -101,12 +101,22 @@
   "learning.proctoringPanel.onboardingButtonNotOpen": "Onboarding Opens: {releaseDate}",
   "learning.proctoringPanel.reviewRequirementsButton": "Review instructions and system requirements",
   "learning.outline.sequence-due": "{description} في{assignmentDue}",
+  "progress.completion.donut.label": "completed",
+  "progress.completion.body": "This represents how much of the course content you have completed. Note that some content may not yet be released.",
+  "progress.completion.tooltip.locked": "Content that you have completed.",
+  "progress.completion.header": "Course completion",
+  "progress.completion.tooltip": "Content that you have access to and have not completed.",
+  "progress.completion.tooltip.complete": "Content that is locked and available only to those who upgrade.",
+  "progress.completion.donut.percentComplete": "You have completed {percent}% of content in this course.",
+  "progress.completion.donut.percentIncomplete": "You have not completed {percent}% of content in this course that you have access to.",
+  "progress.completion.donut.percentLocked": "{percent}% of content in this course is locked and available only for those who upgrade.",
   "progress.ungradedAlert": "For progress on ungraded aspects of the course, view your {outlineLink}.",
   "progress.footnotes.droppableAssignments": "The lowest {numDroppable, plural, one{# {assignmentType} score} other{# {assignmentType} scores}} will be dropped.",
   "progress.assignmentType": "Assignment type",
   "progress.footnotes.backToContent": "Back to content",
   "progress.courseOutline": "Course Outline",
   "progress.detailedGrades": "Detailed grades",
+  "progress.detailedGrades.emptyTable": "You currently have no graded problem scores.",
   "progress.footnotes.title": "Grade summary footnotes",
   "progress.gradeSummary": "Grade summary",
   "progress.gradeSummary.tooltip": "Your course assignment's weight is determined by your instructor. By multiplying your score by the weight for that assignment type, your weighted grade is calculated. Your weighted grade is what's used to determine if you pass the course.",
@@ -233,6 +243,10 @@
   "learn.contentLock.content.locked": "محتوى مغلق",
   "learn.contentLock.complete.prerequisite": "يجب استيفاء المتطلبات الأساسية: '{priceqSectionName}' للوصول إلى هذا المحتوى.",
   "learn.contentLock.goToSection": "انتقل إلى قسم المتطلبات الأساسية",
+  "gatedContent.paragraph.bulletOne": "Earn a {verifiedCertLink} of completion to showcase on your resume",
+  "gatedContent.paragraph.bulletTwo": "Unlock access to all course activities, including {gradedAssignments}",
+  "gatedContent.paragraph.bulletThree": "{fullAccess} to course content and materials, even after the course ends",
+  "gatedContent.paragraph.bulletFour": "Support our {nonProfit} mission at edX",
   "learn.lockPaywall.title": "Graded assignments are locked",
   "learn.lockPaywall.content": "Upgrade to gain access to locked features like this one and get the most out of your course.",
   "learn.lockPaywall.upgrade.link": "Upgrade for {currencySymbol}{price}",
@@ -278,7 +292,7 @@
   "learn.course.tabs.navigation.overflow.menu": "المزيد...",
   "learning.offer.screenReaderPrices": "السعر الأصلي: {originalPrice}, سعر الخصم: {discountedPrice}",
   "learning.upgradeButton.screenReaderInlinePrices": "السعر الأصلي: {originalPrice}",
-  "learning.upgradeButton.buttonText": "قم بالترقية ({pricing})",
+  "learning.upgradeButton.buttonText": "Upgrade for {pricing}",
   "masquerade-widget.userName.error.generic": "حدث خطأ؛ يرجى المحاولة مرة أخرى.",
   "masquerade-widget.userName.input.placeholder": "اسم المستخدم أو البريد الإلكتروني",
   "masquerade-widget.userName.input.label": "عرف كهذا المستخدم",

src/i18n/messages/es_419.json

@@ -101,12 +101,22 @@
   "learning.proctoringPanel.onboardingButtonNotOpen": "Apertura de la integración: {releaseDate}",
   "learning.proctoringPanel.reviewRequirementsButton": "Revisar las instrucciones y los requisitos del sistema",
   "learning.outline.sequence-due": "Fecha límite para {description}: {assignmentDue}",
+  "progress.completion.donut.label": "completed",
+  "progress.completion.body": "This represents how much of the course content you have completed. Note that some content may not yet be released.",
+  "progress.completion.tooltip.locked": "Content that you have completed.",
+  "progress.completion.header": "Course completion",
+  "progress.completion.tooltip": "Content that you have access to and have not completed.",
+  "progress.completion.tooltip.complete": "Content that is locked and available only to those who upgrade.",
+  "progress.completion.donut.percentComplete": "You have completed {percent}% of content in this course.",
+  "progress.completion.donut.percentIncomplete": "You have not completed {percent}% of content in this course that you have access to.",
+  "progress.completion.donut.percentLocked": "{percent}% of content in this course is locked and available only for those who upgrade.",
   "progress.ungradedAlert": "For progress on ungraded aspects of the course, view your {outlineLink}.",
   "progress.footnotes.droppableAssignments": "The lowest {numDroppable, plural, one{# {assignmentType} score} other{# {assignmentType} scores}} will be dropped.",
   "progress.assignmentType": "Assignment type",
   "progress.footnotes.backToContent": "Back to content",
   "progress.courseOutline": "Course Outline",
   "progress.detailedGrades": "Detailed grades",
+  "progress.detailedGrades.emptyTable": "You currently have no graded problem scores.",
   "progress.footnotes.title": "Grade summary footnotes",
   "progress.gradeSummary": "Grade summary",
   "progress.gradeSummary.tooltip": "Your course assignment's weight is determined by your instructor. By multiplying your score by the weight for that assignment type, your weighted grade is calculated. Your weighted grade is what's used to determine if you pass the course.",
@@ -233,15 +243,19 @@
   "learn.contentLock.content.locked": "Contenido Bloqueado",
   "learn.contentLock.complete.prerequisite": "Debe completar el prerrequisito: '{prereqSectionName}'para acceder a este contenido.",
   "learn.contentLock.goToSection": "Ir a la Sección de Prerrequisitos",
-  "learn.lockPaywall.title": "Graded assignments are locked",
-  "learn.lockPaywall.content": "Upgrade to gain access to locked features like this one and get the most out of your course.",
-  "learn.lockPaywall.upgrade.link": "Upgrade for {currencySymbol}{price}",
+  "gatedContent.paragraph.bulletOne": "Obtén un {verifiedCertLink} de finalización para compartirlo en tu currículum",
+  "gatedContent.paragraph.bulletTwo": "Desbloquea el acceso a todas las actividades del curso, incluidas las {gradedAssignments}",
+  "gatedContent.paragraph.bulletThree": "{fullAccess} al contenido y los materiales del curso, incluso después de que finalice",
+  "gatedContent.paragraph.bulletFour": "Apoya nuestra {nonProfit} en edX",
+  "learn.lockPaywall.title": "Las tareas calificadas están bloqueadas",
+  "learn.lockPaywall.content": "Cámbiate a la opción verificada para obtener acceso a funciones bloqueadas como esta y aprovechar al máximo tu curso.",
+  "learn.lockPaywall.upgrade.link": "Opción verificada {currencySymbol}{price}",
   "learn.lockPaywall.example.alt": "Certificado de ejemplo",
-  "learn.lockPaywall.list.intro": "When you upgrade, you:",
-  "learn.lockPaywall.list.bullet1.linktext": "verified certificate",
-  "learn.lockPaywall.list.bullet2.boldtext": "graded assignments",
-  "learn.lockPaywall.list.bullet3.boldtext": "Full access",
-  "learn.lockPaywall.list.bullet4.boldtext": "non-profit",
+  "learn.lockPaywall.list.intro": "Cuando te cambias a la opción verificada, tú:",
+  "learn.lockPaywall.list.bullet1.linktext": "certificado verificado",
+  "learn.lockPaywall.list.bullet2.boldtext": "tareas calificadas",
+  "learn.lockPaywall.list.bullet3.boldtext": "Acceso completo",
+  "learn.lockPaywall.list.bullet4.boldtext": "misión sin fines de lucro",
   "learn.loading.content.lock": "Cargando la mensajería de contenido bloqueado...",
   "learn.loading.learning.sequence": "Cargando la secuencia de aprendizaje...",
   "learn.course.load.failure": "Hubo un error al cargar este curso.",
@@ -278,7 +292,7 @@
   "learn.course.tabs.navigation.overflow.menu": "Más...",
   "learning.offer.screenReaderPrices": "Precio original: {originalPrice}; precio con descuento: {discountedPrice}",
   "learning.upgradeButton.screenReaderInlinePrices": "Precio original: {originalPrice}",
-  "learning.upgradeButton.buttonText": "Mejora ({precio})",
+  "learning.upgradeButton.buttonText": "Upgrade for {pricing}",
   "masquerade-widget.userName.error.generic": "Se ha producido un error. Inténtalo de nuevo.",
   "masquerade-widget.userName.input.placeholder": "Nombre de usuario o correo electrónico",
   "masquerade-widget.userName.input.label": "Hazte pasar por este usuario",

src/i18n/messages/fr.json

@@ -101,12 +101,22 @@
   "learning.proctoringPanel.onboardingButtonNotOpen": "Onboarding Opens: {releaseDate}",
   "learning.proctoringPanel.reviewRequirementsButton": "Review instructions and system requirements",
   "learning.outline.sequence-due": "{description} due {assignmentDue}",
+  "progress.completion.donut.label": "completed",
+  "progress.completion.body": "This represents how much of the course content you have completed. Note that some content may not yet be released.",
+  "progress.completion.tooltip.locked": "Content that you have completed.",
+  "progress.completion.header": "Course completion",
+  "progress.completion.tooltip": "Content that you have access to and have not completed.",
+  "progress.completion.tooltip.complete": "Content that is locked and available only to those who upgrade.",
+  "progress.completion.donut.percentComplete": "You have completed {percent}% of content in this course.",
+  "progress.completion.donut.percentIncomplete": "You have not completed {percent}% of content in this course that you have access to.",
+  "progress.completion.donut.percentLocked": "{percent}% of content in this course is locked and available only for those who upgrade.",
   "progress.ungradedAlert": "For progress on ungraded aspects of the course, view your {outlineLink}.",
   "progress.footnotes.droppableAssignments": "The lowest {numDroppable, plural, one{# {assignmentType} score} other{# {assignmentType} scores}} will be dropped.",
   "progress.assignmentType": "Assignment type",
   "progress.footnotes.backToContent": "Back to content",
   "progress.courseOutline": "Course Outline",
   "progress.detailedGrades": "Detailed grades",
+  "progress.detailedGrades.emptyTable": "You currently have no graded problem scores.",
   "progress.footnotes.title": "Grade summary footnotes",
   "progress.gradeSummary": "Grade summary",
   "progress.gradeSummary.tooltip": "Your course assignment's weight is determined by your instructor. By multiplying your score by the weight for that assignment type, your weighted grade is calculated. Your weighted grade is what's used to determine if you pass the course.",
@@ -233,6 +243,10 @@
   "learn.contentLock.content.locked": "Content Locked",
   "learn.contentLock.complete.prerequisite": "You must complete the prerequisite: '{prereqSectionName}' to access this content.",
   "learn.contentLock.goToSection": "Go To Prerequisite Section",
+  "gatedContent.paragraph.bulletOne": "Earn a {verifiedCertLink} of completion to showcase on your resume",
+  "gatedContent.paragraph.bulletTwo": "Unlock access to all course activities, including {gradedAssignments}",
+  "gatedContent.paragraph.bulletThree": "{fullAccess} to course content and materials, even after the course ends",
+  "gatedContent.paragraph.bulletFour": "Support our {nonProfit} mission at edX",
   "learn.lockPaywall.title": "Graded assignments are locked",
   "learn.lockPaywall.content": "Upgrade to gain access to locked features like this one and get the most out of your course.",
   "learn.lockPaywall.upgrade.link": "Upgrade for {currencySymbol}{price}",
@@ -278,7 +292,7 @@
   "learn.course.tabs.navigation.overflow.menu": "More...",
   "learning.offer.screenReaderPrices": "Original price: {originalPrice}, discount price: {discountedPrice}",
   "learning.upgradeButton.screenReaderInlinePrices": "Original price: {originalPrice}",
-  "learning.upgradeButton.buttonText": "Upgrade ({pricing})",
+  "learning.upgradeButton.buttonText": "Upgrade for {pricing}",
   "masquerade-widget.userName.error.generic": "An error has occurred; please try again.",
   "masquerade-widget.userName.input.placeholder": "Username or email",
   "masquerade-widget.userName.input.label": "Masquerade as this user",

src/i18n/messages/zh_CN.json

@@ -101,12 +101,22 @@
   "learning.proctoringPanel.onboardingButtonNotOpen": "Onboarding Opens: {releaseDate}",
   "learning.proctoringPanel.reviewRequirementsButton": "Review instructions and system requirements",
   "learning.outline.sequence-due": "{description} due {assignmentDue}",
+  "progress.completion.donut.label": "completed",
+  "progress.completion.body": "This represents how much of the course content you have completed. Note that some content may not yet be released.",
+  "progress.completion.tooltip.locked": "Content that you have completed.",
+  "progress.completion.header": "Course completion",
+  "progress.completion.tooltip": "Content that you have access to and have not completed.",
+  "progress.completion.tooltip.complete": "Content that is locked and available only to those who upgrade.",
+  "progress.completion.donut.percentComplete": "You have completed {percent}% of content in this course.",
+  "progress.completion.donut.percentIncomplete": "You have not completed {percent}% of content in this course that you have access to.",
+  "progress.completion.donut.percentLocked": "{percent}% of content in this course is locked and available only for those who upgrade.",
   "progress.ungradedAlert": "For progress on ungraded aspects of the course, view your {outlineLink}.",
   "progress.footnotes.droppableAssignments": "The lowest {numDroppable, plural, one{# {assignmentType} score} other{# {assignmentType} scores}} will be dropped.",
   "progress.assignmentType": "Assignment type",
   "progress.footnotes.backToContent": "Back to content",
   "progress.courseOutline": "Course Outline",
   "progress.detailedGrades": "Detailed grades",
+  "progress.detailedGrades.emptyTable": "You currently have no graded problem scores.",
   "progress.footnotes.title": "Grade summary footnotes",
   "progress.gradeSummary": "Grade summary",
   "progress.gradeSummary.tooltip": "Your course assignment's weight is determined by your instructor. By multiplying your score by the weight for that assignment type, your weighted grade is calculated. Your weighted grade is what's used to determine if you pass the course.",
@@ -233,6 +243,10 @@
   "learn.contentLock.content.locked": "Content Locked",
   "learn.contentLock.complete.prerequisite": "You must complete the prerequisite: '{prereqSectionName}' to access this content.",
   "learn.contentLock.goToSection": "Go To Prerequisite Section",
+  "gatedContent.paragraph.bulletOne": "Earn a {verifiedCertLink} of completion to showcase on your resume",
+  "gatedContent.paragraph.bulletTwo": "Unlock access to all course activities, including {gradedAssignments}",
+  "gatedContent.paragraph.bulletThree": "{fullAccess} to course content and materials, even after the course ends",
+  "gatedContent.paragraph.bulletFour": "Support our {nonProfit} mission at edX",
   "learn.lockPaywall.title": "Graded assignments are locked",
   "learn.lockPaywall.content": "Upgrade to gain access to locked features like this one and get the most out of your course.",
   "learn.lockPaywall.upgrade.link": "Upgrade for {currencySymbol}{price}",
@@ -278,7 +292,7 @@
   "learn.course.tabs.navigation.overflow.menu": "More...",
   "learning.offer.screenReaderPrices": "Original price: {originalPrice}, discount price: {discountedPrice}",
   "learning.upgradeButton.screenReaderInlinePrices": "Original price: {originalPrice}",
-  "learning.upgradeButton.buttonText": "Upgrade ({pricing})",
+  "learning.upgradeButton.buttonText": "Upgrade for {pricing}",
   "masquerade-widget.userName.error.generic": "An error has occurred; please try again.",
   "masquerade-widget.userName.input.placeholder": "Username or email",
   "masquerade-widget.userName.input.label": "Masquerade as this user",

src/index.scss

@@ -368,6 +368,7 @@
 @import 'course-home/dates-tab/Day.scss';
 @import 'course-home/outline-tab/widgets/UpgradeCard.scss';
 @import 'course-home/outline-tab/widgets/ProctoringInfoPanel.scss';
+@import 'course-home/progress-tab/course-completion/CompletionDonutChart.scss';
 @import 'courseware/course/course-exit/CourseRecommendationsExp/course_recommendations.exp';
 
 /** [MM-P2P] Experiment */