PR

test
tests
2021-05-21 12:57:28 -04:00 · 2021-05-20 20:17:21 -04:00 · 2021-05-20 20:14:54 -04:00 · 2021-05-20 19:56:32 -04:00 · 2021-05-20 16:27:34 -04:00 · 2021-05-11 16:16:41 -04:00
204 changed files with 12480 additions and 4384 deletions
--- a/.env
+++ b/.env
@@ -3,6 +3,7 @@ ACCESS_TOKEN_COOKIE_NAME=null
 BASE_URL=null
 CREDENTIALS_BASE_URL=null
 CSRF_TOKEN_API_PATH=null
+DISCOVERY_API_BASE_URL=null
 ENTERPRISE_LEARNER_PORTAL_HOSTNAME=null
 ECOMMERCE_BASE_URL=null
 INSIGHTS_BASE_URL=null
--- a/.env.development
+++ b/.env.development
@@ -3,6 +3,7 @@ ACCESS_TOKEN_COOKIE_NAME='edx-jwt-cookie-header-payload'
 BASE_URL='http://localhost:2000'
 CREDENTIALS_BASE_URL='http://localhost:18150'
 CSRF_TOKEN_API_PATH='/csrf/api/v1/token'
+DISCOVERY_API_BASE_URL='http://localhost:18381'
 ECOMMERCE_BASE_URL='http://localhost:18130'
 ENTERPRISE_LEARNER_PORTAL_HOSTNAME='localhost:8734'
 LANGUAGE_PREFERENCE_COOKIE_NAME='openedx-language-preference'
--- a/.env.test
+++ b/.env.test
@@ -3,6 +3,7 @@ ACCESS_TOKEN_COOKIE_NAME='edx-jwt-cookie-header-payload'
 BASE_URL='http://localhost:2000'
 CREDENTIALS_BASE_URL='http://localhost:18150'
 CSRF_TOKEN_API_PATH='/csrf/api/v1/token'
+DISCOVERY_API_BASE_URL='http://localhost:18381'
 ECOMMERCE_BASE_URL='http://localhost:18130'
 ENTERPRISE_LEARNER_PORTAL_HOSTNAME='localhost:8734'
 LANGUAGE_PREFERENCE_COOKIE_NAME='openedx-language-preference'
--- a/docs/decisions/0002-courseware-page-decisions.md
+++ b/docs/decisions/0002-courseware-page-decisions.md
@@ -37,6 +37,9 @@ Today, if the URL only specifies the course ID, we need to pick a sequence to sh

 Similarly, if the URL doesn't contain a unit ID, we use the `position` field of the sequence to determine which unit we want to display from that sequence.  If the position isn't specified in the sequence, we choose the first unit of the sequence.  After determining which unit to display, we update the URL to match.  After the URL is updated, the application will attempt to load that unit via an iFrame.

+_This URL scheme has been expanded upon in
+[ADR #8: Liberal courseware path handling](./0008-liberal-courseware-path-handling.md)._
+
 ## "Container" components vs. display components

 This application makes use of a few "container" components at the top level - CoursewareContainer and CourseHomeContainer.
--- a/docs/decisions/0008-liberal-courseware-path-handling.md
+++ b/docs/decisions/0008-liberal-courseware-path-handling.md
@@ -0,0 +1,90 @@
+# Liberal courseware path handling
+
+## Status
+
+Accepted
+
+_This updates some of the content in [ADR #2: Courseware page decisions](./0002-courseware-page-decisions.md)._
+
+## Context
+
+The courseware container currently accepts three path forms:
+
+1. `/course/:courseId`
+2. `/course/:courseId/:sequenceId`
+3. `/course/:courseId/:sequenceId/:unitId`
+
+Forms #1 and #2 are always redirected to Form #3 via simple set of rules:
+
+* If the sequenceId is not specified, choose the first sequence in the course.
+* If the unitId is not specified, choose the active unit in the sequence,
+  or the first unit if none are active.
+
+Thus, Form #3 is effectively the canonoical path;
+all Learning MFE units should be served from it.
+We acknowledge that the best user experience is to link directly to the canonoical
+path when possible, since it skips the redirection steps.
+Still, there are times when it is necessary or prudent to link just to a course or
+a sequence.
+
+Through recent work in the LMS, we are realizing that there are _also_ times where it
+would be simpler or more performant to link a user to an
+_entire section without specifying a squence_ or to a
+_unit without including the sequence_.
+Specifically, this capability would let as avoid further modulestore or
+block transformer queries in order to discern the course structure when trying to
+direct a learner to a section or unit.
+Futhermore, we hypothesize that being able to build a Learning MFE courseware link
+with just a unit ID or a section ID will be a nice simplifying quality for future
+development or debugging.
+
+## Decision
+
+The courseware container will accept five total path forms:
+
+1. `/course/:courseId`
+2. `/course/:courseId/:sectionId`
+3. `/course/:courseId/:sectionId/:unitId`
+4. `/course/:courseId/:sequenceId`
+5. `/course/:courseId/:unitId`
+6. `/course/:courseId/:sequenceId/:unitId`
+
+The redirection rules are as follows:
+
+* Forms #1 redirects to Form #4 by selecting the first sequence in the course.
+* Form #2 redirects to Form #4 by selecting to the first sequence in the section.
+* Form #3 redirects to Form #5 by dropping the section ID.
+* Form #4 redirects to Form #6 by choosing the active unit in the sequence
+  (or the first unit, if none are active).
+* Form #5 redirects to Form #6 by filling in the ID of the sequence that the
+  specified unit belongs to (in the edge case where the unit belongs to multiple
+  sequences, the first sequence is selected).
+
+As before, Form #5 is the canonocial courseware path, which is always redirected to
+by any of the other courseware path forms.
+
+## Consequences
+
+The above decision is implemented.
+
+## Further work
+
+At some point, we may decide to further extend the URL scheme to be
+more human-readable.
+
+We can't make UsageKeys themselves more readable because they're tied to student state,
+but we could introduce a new optional `slug` field on Sequences,
+which would be captured and propagated to the learning_sequences API.
+We could eventually do something similar to Units, since those slugs only have to be sequence-local.
+
+So eventually, URLs could look less like:
+
+```
+
+https://learning.edx.org/course/course-v1:edX+DemoX.1+2T2019/block-v1:edX+DemoX.1+2T2019+type@sequential+block@e0a61b3d5a2046949e76d12cac5df493/block-v1:edX+DemoX.1+2T2019+type@vertical+block@52dbad5a28e140f291a476f92ce11996
+```
+
+And more like:
+```
+https://learning.edx.org/course/course-v1:edX+DemoX.1+2T2019/Being_Social/Teams
+```
--- a/jest.config.js
+++ b/jest.config.js
@@ -7,5 +7,6 @@ module.exports = createConfig('jest', {
  coveragePathIgnorePatterns: [
    'src/setupTest.js',
    'src/i18n',
+    'src/.*\\.exp\\..*',
  ],
 });
--- a/package-lock.json
+++ b/package-lock.json
@@ -1168,26 +1168,21 @@
      "resolved": "https://registry.npmjs.org/@cospired/i18n-iso-languages/-/i18n-iso-languages-2.1.2.tgz",
      "integrity": "sha512-XylKOsWRyQm9sNanZnppRORXTLaL34uThyBQpTFwOGAYvNg9PeYsyTTfLA1FTCh02RV+kiwt/O/y14DR/OqpWg=="
    },
-    "@discoveryjs/json-ext": {
-      "version": "0.5.2",
-      "resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.2.tgz",
-      "integrity": "sha512-HyYEUDeIj5rRQU2Hk5HTB2uHsbRQpF70nvMhVzi+VJR0X+xNEhjPui4/kBf3VeH/wqD28PT4sVOm8qqLjBrSZg==",
-      "dev": true
-    },
    "@edx/brand": {
      "version": "npm:@edx/brand-openedx@1.1.0",
      "resolved": "https://registry.npmjs.org/@edx/brand-openedx/-/brand-openedx-1.1.0.tgz",
      "integrity": "sha512-ne2ZKF1r0akkt0rEzCAQAk4cTDTI2GiWCpc+T7ldQpw9X57OnUB16dKsFNe40C9uEjL5h3Ps/ZsFM5dm4cIkEQ=="
    },
    "@edx/eslint-config": {
-      "version": "1.1.6",
-      "resolved": "https://registry.npmjs.org/@edx/eslint-config/-/eslint-config-1.1.6.tgz",
-      "integrity": "sha512-5+WPYySI8wGttJ+eU6SqCNZk/smABmYF5V+jJdhtV6+zZ6PjaZ4JNLyKNFIAht6lc5Ld8AG8Ki50YTuMd0j+fg==",
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/@edx/eslint-config/-/eslint-config-1.1.5.tgz",
+      "integrity": "sha512-+CXg2ydBME6BL3gMyuzBv303XvI1Tru50xKG1AnS3wgwaeymmjOrTd18kfh/fv5uDotIx4WfvQ11kAs1aRfM8w==",
      "dev": true
    },
    "@edx/frontend-build": {
-      "version": "git+https://github.com/edx/frontend-build.git#dfc7ef12d1a1fea114f8f79673fa6df9614b78b8",
-      "from": "git+https://github.com/edx/frontend-build.git#alpha",
+      "version": "5.5.5",
+      "resolved": "https://registry.npmjs.org/@edx/frontend-build/-/frontend-build-5.5.5.tgz",
+      "integrity": "sha512-4+6niDfuMLp4fNiolofwqQCNtK+F0ad5lkMfgMDhovUzyylQ77XKAnd0A3Xjh+yiC1essZaDbV2SYNSAkLxVWQ==",
      "dev": true,
      "requires": {
        "@babel/cli": "7.10.5",
@@ -1197,20 +1192,20 @@
        "@babel/plugin-syntax-dynamic-import": "7.8.3",
        "@babel/preset-env": "7.10.4",
        "@babel/preset-react": "7.10.4",
-        "@edx/eslint-config": "1.1.6",
-        "@svgr/webpack": "5.4.0",
-        "autoprefixer": "9.8.6",
+        "@edx/eslint-config": "1.1.5",
+        "@svgr/webpack": "5.3.1",
+        "autoprefixer": "9.8.4",
        "babel-eslint": "10.1.0",
        "babel-jest": "26.3.0",
        "babel-loader": "8.1.0",
-        "babel-plugin-react-intl": "7.9.4",
+        "babel-plugin-react-intl": "7.9.2",
        "babel-plugin-transform-imports": "2.0.0",
        "babel-polyfill": "6.26.0",
        "clean-webpack-plugin": "3.0.0",
        "css-loader": "3.6.0",
        "cssnano": "4.1.10",
        "dotenv": "8.2.0",
-        "dotenv-webpack": "6.0.0",
+        "dotenv-webpack": "4.0.0",
        "eslint": "6.8.0",
        "eslint-config-airbnb": "18.1.0",
        "eslint-plugin-import": "2.22.1",
@@ -1219,25 +1214,25 @@
        "eslint-plugin-react-hooks": "1.7.0",
        "file-loader": "6.2.0",
        "html-webpack-new-relic-plugin": "2.0.0",
-        "html-webpack-plugin": "5.0.0",
+        "html-webpack-plugin": "4.5.0",
        "identity-obj-proxy": "3.0.0",
        "image-webpack-loader": "6.0.0",
        "jest": "26.4.2",
-        "mini-css-extract-plugin": "1.0.0",
+        "mini-css-extract-plugin": "0.12.0",
        "new-relic-source-map-webpack-plugin": "1.2.0",
        "postcss-loader": "3.0.0",
        "postcss-rtl": "1.7.3",
-        "react-dev-utils": "11.0.2",
-        "resolve-url-loader": "3.1.2",
+        "react-dev-utils": "9.1.0",
+        "resolve-url-loader": "3.1.1",
        "sass": "1.26.11",
-        "sass-loader": "10.0.5",
+        "sass-loader": "10.0.2",
        "source-map-loader": "0.2.4",
-        "style-loader": "2.0.0",
+        "style-loader": "1.1.3",
        "url-loader": "4.1.1",
-        "webpack": "5.21.2",
+        "webpack": "4.44.2",
        "webpack-bundle-analyzer": "3.9.0",
-        "webpack-cli": "4.5.0",
-        "webpack-dev-server": "4.0.0-beta.0",
+        "webpack-cli": "3.3.12",
+        "webpack-dev-server": "3.11.0",
        "webpack-merge": "5.2.0"
      },
      "dependencies": {
@@ -1338,6 +1333,19 @@
        "@fortawesome/react-fontawesome": "0.1.14"
      },
      "dependencies": {
+        "@fortawesome/fontawesome-common-types": {
+          "version": "0.2.34",
+          "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.34.tgz",
+          "integrity": "sha512-XcIn3iYbTEzGIxD0/dY5+4f019jIcEIWBiHc3KrmK/ROahwxmZ/s+tdj97p/5K0klz4zZUiMfUlYP0ajhSJjmA=="
+        },
+        "@fortawesome/fontawesome-svg-core": {
+          "version": "1.2.34",
+          "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.34.tgz",
+          "integrity": "sha512-0KNN0nc5eIzaJxlv43QcDmTkDY1CqeN6J7OCGSs+fwGPdtv0yOQqRjieopBCmw+yd7uD3N2HeNL3Zm5isDleLg==",
+          "requires": {
+            "@fortawesome/fontawesome-common-types": "^0.2.34"
+          }
+        },
        "@fortawesome/free-brands-svg-icons": {
          "version": "5.8.2",
          "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-5.8.2.tgz",
@@ -1361,6 +1369,14 @@
          "requires": {
            "@fortawesome/fontawesome-common-types": "^0.2.18"
          }
+        },
+        "@fortawesome/react-fontawesome": {
+          "version": "0.1.14",
+          "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.14.tgz",
+          "integrity": "sha512-4wqNb0gRLVaBm/h+lGe8UfPPivcbuJ6ecI4hIgW0LjI7kzpYB9FkN0L9apbVzg+lsBdcTf0AlBtODjcSX5mmKA==",
+          "requires": {
+            "prop-types": "^15.7.2"
+          }
        }
      }
    },
@@ -1397,35 +1413,44 @@
      }
    },
    "@edx/paragon": {
-      "version": "12.3.1",
-      "resolved": "https://registry.npmjs.org/@edx/paragon/-/paragon-12.3.1.tgz",
-      "integrity": "sha512-MRE2tS3+ej6YkmC6pBlENHIj06mpYhXrcsawRCptUe64JN+CBWtZkmeNfBymfpNqdW/DP1FGgwIcxodsJkxR+A==",
+      "version": "14.8.0",
+      "resolved": "https://registry.npmjs.org/@edx/paragon/-/paragon-14.8.0.tgz",
+      "integrity": "sha512-ZCT4bur0ZlwI+UrzYcSRU0Vo9rBbSszbXrCrCeA5aZV9/xiwjoVJcMGxhWAMEfk5n9/R/bXBakcxc2Z+PjBEaQ==",
      "requires": {
        "@fortawesome/fontawesome-svg-core": "^1.2.30",
        "@fortawesome/free-solid-svg-icons": "^5.14.0",
        "@fortawesome/react-fontawesome": "^0.1.11",
+        "@popperjs/core": "^2.6.0",
        "airbnb-prop-types": "^2.12.0",
-        "bootstrap": "^4.4.1",
+        "bootstrap": "4.6.0",
        "classnames": "^2.2.6",
        "email-prop-type": "^3.0.0",
        "font-awesome": "^4.7.0",
        "mailto-link": "^1.0.0",
        "prop-types": "^15.7.2",
-        "react-bootstrap": "^1.2.2",
+        "react-bootstrap": "^1.3.0",
        "react-focus-on": "^3.5.0",
+        "react-popper": "^2.2.4",
        "react-proptype-conditional-require": "^1.0.4",
        "react-responsive": "^6.1.1",
+        "react-table": "^7.6.1",
        "react-transition-group": "^4.0.0",
        "sanitize-html": "^1.20.0",
-        "tabbable": "^4.0.0"
+        "tabbable": "^4.0.0",
+        "uncontrollable": "7.2.1"
      },
      "dependencies": {
+        "@fortawesome/fontawesome-common-types": {
+          "version": "0.2.35",
+          "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.35.tgz",
+          "integrity": "sha512-IHUfxSEDS9dDGqYwIW7wTN6tn/O8E0n5PcAHz9cAaBoZw6UpG20IG/YM3NNLaGPwPqgjBAFjIURzqoQs3rrtuw=="
+        },
        "@fortawesome/free-solid-svg-icons": {
-          "version": "5.15.2",
-          "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.2.tgz",
-          "integrity": "sha512-ZfCU+QjaFsdNZmOGmfqEWhzI3JOe37x5dF4kz9GeXvKn/sTxhqMtZ7mh3lBf76SvcYY5/GKFuyG7p1r4iWMQqw==",
+          "version": "5.15.3",
+          "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.3.tgz",
+          "integrity": "sha512-XPeeu1IlGYqz4VWGRAT5ukNMd4VHUEEJ7ysZ7pSSgaEtNvSo+FLurybGJVmiqkQdK50OkSja2bfZXOeyMGRD8Q==",
          "requires": {
-            "@fortawesome/fontawesome-common-types": "^0.2.34"
+            "@fortawesome/fontawesome-common-types": "^0.2.35"
          }
        }
      }
@@ -2156,6 +2181,16 @@
        }
      }
    },
+    "@mrmlnc/readdir-enhanced": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz",
+      "integrity": "sha512-bPHp6Ji8b41szTOcaP63VlnbbO5Ny6dwAATtY6JTjh5N2OLrb5Qk/Th5cRkRQhkWCt+EJsYrNB0MiL+Gpn6e3g==",
+      "dev": true,
+      "requires": {
+        "call-me-maybe": "^1.0.1",
+        "glob-to-regexp": "^0.3.0"
+      }
+    },
    "@newrelic/publish-sourcemap": {
      "version": "4.4.2",
      "resolved": "https://registry.npmjs.org/@newrelic/publish-sourcemap/-/publish-sourcemap-4.4.2.tgz",
@@ -2277,9 +2312,9 @@
      }
    },
    "@popperjs/core": {
-      "version": "2.6.0",
-      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.6.0.tgz",
-      "integrity": "sha512-cPqjjzuFWNK3BSKLm0abspP0sp/IGOli4p5I5fKFAzdS8fvjdOwDCfZqAaIiXd9lPkOWi3SUUfZof3hEb7J/uw=="
+      "version": "2.9.2",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.9.2.tgz",
+      "integrity": "sha512-VZMYa7+fXHdwIq1TDhSXoVmSPEGM/aa+6Aiq3nVVJ9bXr24zScr+NlKFKC3iPljA7ho/GAZr+d2jOf5GIRC30Q=="
    },
    "@reduxjs/toolkit": {
      "version": "1.3.6",
@@ -2485,18 +2520,18 @@
      }
    },
    "@svgr/webpack": {
-      "version": "5.4.0",
-      "resolved": "https://registry.npmjs.org/@svgr/webpack/-/webpack-5.4.0.tgz",
-      "integrity": "sha512-LjepnS/BSAvelnOnnzr6Gg0GcpLmnZ9ThGFK5WJtm1xOqdBE/1IACZU7MMdVzjyUkfFqGz87eRE4hFaSLiUwYg==",
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/@svgr/webpack/-/webpack-5.3.1.tgz",
+      "integrity": "sha512-0IrfVMS3BlZ2mli5QqFw1ZGieBgTqmgVzvxejOap7CACTv3t+iBBynx3Ak+x5Sbqeat43ZJ0lXODiHZyts6hQA==",
      "dev": true,
      "requires": {
        "@babel/core": "^7.9.0",
        "@babel/plugin-transform-react-constant-elements": "^7.9.0",
-        "@babel/preset-env": "^7.9.5",
+        "@babel/preset-env": "^7.9.0",
        "@babel/preset-react": "^7.9.4",
-        "@svgr/core": "^5.4.0",
-        "@svgr/plugin-jsx": "^5.4.0",
-        "@svgr/plugin-svgo": "^5.4.0",
+        "@svgr/core": "^5.3.1",
+        "@svgr/plugin-jsx": "^5.3.1",
+        "@svgr/plugin-svgo": "^5.3.0",
        "loader-utils": "^2.0.0"
      }
    },
@@ -2851,41 +2886,18 @@
      }
    },
    "@types/classnames": {
-      "version": "2.2.11",
-      "resolved": "https://registry.npmjs.org/@types/classnames/-/classnames-2.2.11.tgz",
-      "integrity": "sha512-2koNhpWm3DgWRp5tpkiJ8JGc1xTn2q0l+jUNUE7oMKXUf5NpI9AIdC4kbjGNFBdHtcxBD18LAksoudAVhFKCjw=="
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/@types/classnames/-/classnames-2.3.1.tgz",
+      "integrity": "sha512-zeOWb0JGBoVmlQoznvqXbE0tEC/HONsnoUNH19Hc96NFsTAwTXbTqb8FMYkru1F/iqp7a18Ws3nWJvtA1sHD1A==",
+      "requires": {
+        "classnames": "*"
+      }
    },
    "@types/cookie": {
      "version": "0.3.3",
      "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.3.3.tgz",
      "integrity": "sha512-LKVP3cgXBT9RYj+t+9FDKwS5tdI+rPBXaNSkma7hvqy35lc7mAokC2zsqWJH0LaqIt3B962nuYI77hsJoT1gow=="
    },
-    "@types/eslint": {
-      "version": "7.2.6",
-      "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-7.2.6.tgz",
-      "integrity": "sha512-I+1sYH+NPQ3/tVqCeUSBwTE/0heyvtXqpIopUUArlBm0Kpocb8FbMa3AZ/ASKIFpN3rnEx932TTXDbt9OXsNDw==",
-      "dev": true,
-      "requires": {
-        "@types/estree": "*",
-        "@types/json-schema": "*"
-      }
-    },
-    "@types/eslint-scope": {
-      "version": "3.7.0",
-      "resolved": "https://registry.npmjs.org/@types/eslint-scope/-/eslint-scope-3.7.0.tgz",
-      "integrity": "sha512-O/ql2+rrCUe2W2rs7wMR+GqPRcgB6UiqN5RhrR5xruFlY7l9YLMn0ZkDzjoHLeiFkR8MCQZVudUuuvQ2BLC9Qw==",
-      "dev": true,
-      "requires": {
-        "@types/eslint": "*",
-        "@types/estree": "*"
-      }
-    },
-    "@types/estree": {
-      "version": "0.0.46",
-      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.46.tgz",
-      "integrity": "sha512-laIjwTQaD+5DukBZaygQ79K1Z0jb1bPEMRrkXSLjtCcZm+abyp5YbrqpSLzD42FwWW6gK/aS4NYpJ804nG2brg==",
-      "dev": true
-    },
    "@types/fs-extra": {
      "version": "9.0.6",
      "resolved": "https://registry.npmjs.org/@types/fs-extra/-/fs-extra-9.0.6.tgz",
@@ -2920,15 +2932,6 @@
      "integrity": "sha512-giAlZwstKbmvMk1OO7WXSj4OZ0keXAcl2TQq4LWHiiPH2ByaH7WeUzng+Qej8UPxxv+8lRTuouo0iaNDBuzIBA==",
      "dev": true
    },
-    "@types/http-proxy": {
-      "version": "1.17.5",
-      "resolved": "https://registry.npmjs.org/@types/http-proxy/-/http-proxy-1.17.5.tgz",
-      "integrity": "sha512-GNkDE7bTv6Sf8JbV2GksknKOsk7OznNYHSdrtvPJXO0qJ9odZig6IZKUi5RFGi6d1bf6dgIAe4uXi3DBc7069Q==",
-      "dev": true,
-      "requires": {
-        "@types/node": "*"
-      }
-    },
    "@types/invariant": {
      "version": "2.2.34",
      "resolved": "https://registry.npmjs.org/@types/invariant/-/invariant-2.2.34.tgz",
@@ -3021,27 +3024,27 @@
      "dev": true
    },
    "@types/react": {
-      "version": "17.0.1",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.1.tgz",
-      "integrity": "sha512-w8t9f53B2ei4jeOqf/gxtc2Sswnc3LBK5s0DyJcg5xd10tMHXts2N31cKjWfH9IC/JvEPa/YF1U4YeP1t4R6HQ==",
+      "version": "17.0.4",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.4.tgz",
+      "integrity": "sha512-onz2BqScSFMoTRdJUZUDD/7xrusM8hBA2Fktk2qgaTYPCgPvWnDEgkrOs8hhPUf2jfcIXkJ5yK6VfYormJS3Jw==",
      "requires": {
        "@types/prop-types": "*",
+        "@types/scheduler": "*",
        "csstype": "^3.0.2"
      }
    },
    "@types/react-transition-group": {
-      "version": "4.4.0",
-      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.0.tgz",
-      "integrity": "sha512-/QfLHGpu+2fQOqQaXh8MG9q03bFENooTb/it4jr5kKaZlDQfWvjqWZg48AwzPVMBHlRuTRAY7hRHCEOXz5kV6w==",
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.1.tgz",
+      "integrity": "sha512-vIo69qKKcYoJ8wKCJjwSgCTM+z3chw3g18dkrDfVX665tMH7tmbDxEAnPdey4gTlwZz5QuHGzd+hul0OVZDqqQ==",
      "requires": {
        "@types/react": "*"
      }
    },
-    "@types/retry": {
-      "version": "0.12.0",
-      "resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.0.tgz",
-      "integrity": "sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA==",
-      "dev": true
+    "@types/scheduler": {
+      "version": "0.16.1",
+      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.1.tgz",
+      "integrity": "sha512-EaCxbanVeyxDRTQBkdLb3Bvl/HK7PBK6UJjsSixB0iHKoWxE5uu2Q/DgtpOhPIojN0Zl1whvOd7PoHs2P0s5eA=="
    },
    "@types/schema-utils": {
      "version": "2.4.0",
@@ -3142,172 +3145,180 @@
      "dev": true
    },
    "@webassemblyjs/ast": {
-      "version": "1.11.0",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.0.tgz",
-      "integrity": "sha512-kX2W49LWsbthrmIRMbQZuQDhGtjyqXfEmmHyEi4XWnSZtPmxY0+3anPIzsnRb45VH/J55zlOfWvZuY47aJZTJg==",
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.9.0.tgz",
+      "integrity": "sha512-C6wW5L+b7ogSDVqymbkkvuW9kruN//YisMED04xzeBBqjHa2FYnmvOlS6Xj68xWQRgWvI9cIglsjFowH/RJyEA==",
      "dev": true,
      "requires": {
-        "@webassemblyjs/helper-numbers": "1.11.0",
-        "@webassemblyjs/helper-wasm-bytecode": "1.11.0"
+        "@webassemblyjs/helper-module-context": "1.9.0",
+        "@webassemblyjs/helper-wasm-bytecode": "1.9.0",
+        "@webassemblyjs/wast-parser": "1.9.0"
      }
    },
    "@webassemblyjs/floating-point-hex-parser": {
-      "version": "1.11.0",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.11.0.tgz",
-      "integrity": "sha512-Q/aVYs/VnPDVYvsCBL/gSgwmfjeCb4LW8+TMrO3cSzJImgv8lxxEPM2JA5jMrivE7LSz3V+PFqtMbls3m1exDA==",
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.9.0.tgz",
+      "integrity": "sha512-TG5qcFsS8QB4g4MhrxK5TqfdNe7Ey/7YL/xN+36rRjl/BlGE/NcBvJcqsRgCP6Z92mRE+7N50pRIi8SmKUbcQA==",
      "dev": true
    },
    "@webassemblyjs/helper-api-error": {
-      "version": "1.11.0",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.11.0.tgz",
-      "integrity": "sha512-baT/va95eXiXb2QflSx95QGT5ClzWpGaa8L7JnJbgzoYeaA27FCvuBXU758l+KXWRndEmUXjP0Q5fibhavIn8w==",
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.9.0.tgz",
+      "integrity": "sha512-NcMLjoFMXpsASZFxJ5h2HZRcEhDkvnNFOAKneP5RbKRzaWJN36NC4jqQHKwStIhGXu5mUWlUUk7ygdtrO8lbmw==",
      "dev": true
    },
    "@webassemblyjs/helper-buffer": {
-      "version": "1.11.0",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.11.0.tgz",
-      "integrity": "sha512-u9HPBEl4DS+vA8qLQdEQ6N/eJQ7gT7aNvMIo8AAWvAl/xMrcOSiI2M0MAnMCy3jIFke7bEee/JwdX1nUpCtdyA==",
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.9.0.tgz",
+      "integrity": "sha512-qZol43oqhq6yBPx7YM3m9Bv7WMV9Eevj6kMi6InKOuZxhw+q9hOkvq5e/PpKSiLfyetpaBnogSbNCfBwyB00CA==",
      "dev": true
    },
-    "@webassemblyjs/helper-numbers": {
-      "version": "1.11.0",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-numbers/-/helper-numbers-1.11.0.tgz",
-      "integrity": "sha512-DhRQKelIj01s5IgdsOJMKLppI+4zpmcMQ3XboFPLwCpSNH6Hqo1ritgHgD0nqHeSYqofA6aBN/NmXuGjM1jEfQ==",
+    "@webassemblyjs/helper-code-frame": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-code-frame/-/helper-code-frame-1.9.0.tgz",
+      "integrity": "sha512-ERCYdJBkD9Vu4vtjUYe8LZruWuNIToYq/ME22igL+2vj2dQ2OOujIZr3MEFvfEaqKoVqpsFKAGsRdBSBjrIvZA==",
      "dev": true,
      "requires": {
-        "@webassemblyjs/floating-point-hex-parser": "1.11.0",
-        "@webassemblyjs/helper-api-error": "1.11.0",
-        "@xtuc/long": "4.2.2"
+        "@webassemblyjs/wast-printer": "1.9.0"
+      }
+    },
+    "@webassemblyjs/helper-fsm": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-fsm/-/helper-fsm-1.9.0.tgz",
+      "integrity": "sha512-OPRowhGbshCb5PxJ8LocpdX9Kl0uB4XsAjl6jH/dWKlk/mzsANvhwbiULsaiqT5GZGT9qinTICdj6PLuM5gslw==",
+      "dev": true
+    },
+    "@webassemblyjs/helper-module-context": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-module-context/-/helper-module-context-1.9.0.tgz",
+      "integrity": "sha512-MJCW8iGC08tMk2enck1aPW+BE5Cw8/7ph/VGZxwyvGbJwjktKkDK7vy7gAmMDx88D7mhDTCNKAW5tED+gZ0W8g==",
+      "dev": true,
+      "requires": {
+        "@webassemblyjs/ast": "1.9.0"
      }
    },
    "@webassemblyjs/helper-wasm-bytecode": {
-      "version": "1.11.0",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.11.0.tgz",
-      "integrity": "sha512-MbmhvxXExm542tWREgSFnOVo07fDpsBJg3sIl6fSp9xuu75eGz5lz31q7wTLffwL3Za7XNRCMZy210+tnsUSEA==",
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.9.0.tgz",
+      "integrity": "sha512-R7FStIzyNcd7xKxCZH5lE0Bqy+hGTwS3LJjuv1ZVxd9O7eHCedSdrId/hMOd20I+v8wDXEn+bjfKDLzTepoaUw==",
      "dev": true
    },
    "@webassemblyjs/helper-wasm-section": {
-      "version": "1.11.0",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.11.0.tgz",
-      "integrity": "sha512-3Eb88hcbfY/FCukrg6i3EH8H2UsD7x8Vy47iVJrP967A9JGqgBVL9aH71SETPx1JrGsOUVLo0c7vMCN22ytJew==",
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.9.0.tgz",
+      "integrity": "sha512-XnMB8l3ek4tvrKUUku+IVaXNHz2YsJyOOmz+MMkZvh8h1uSJpSen6vYnw3IoQ7WwEuAhL8Efjms1ZWjqh2agvw==",
      "dev": true,
      "requires": {
-        "@webassemblyjs/ast": "1.11.0",
-        "@webassemblyjs/helper-buffer": "1.11.0",
-        "@webassemblyjs/helper-wasm-bytecode": "1.11.0",
-        "@webassemblyjs/wasm-gen": "1.11.0"
+        "@webassemblyjs/ast": "1.9.0",
+        "@webassemblyjs/helper-buffer": "1.9.0",
+        "@webassemblyjs/helper-wasm-bytecode": "1.9.0",
+        "@webassemblyjs/wasm-gen": "1.9.0"
      }
    },
    "@webassemblyjs/ieee754": {
-      "version": "1.11.0",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/ieee754/-/ieee754-1.11.0.tgz",
-      "integrity": "sha512-KXzOqpcYQwAfeQ6WbF6HXo+0udBNmw0iXDmEK5sFlmQdmND+tr773Ti8/5T/M6Tl/413ArSJErATd8In3B+WBA==",
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/ieee754/-/ieee754-1.9.0.tgz",
+      "integrity": "sha512-dcX8JuYU/gvymzIHc9DgxTzUUTLexWwt8uCTWP3otys596io0L5aW02Gb1RjYpx2+0Jus1h4ZFqjla7umFniTg==",
      "dev": true,
      "requires": {
        "@xtuc/ieee754": "^1.2.0"
      }
    },
    "@webassemblyjs/leb128": {
-      "version": "1.11.0",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/leb128/-/leb128-1.11.0.tgz",
-      "integrity": "sha512-aqbsHa1mSQAbeeNcl38un6qVY++hh8OpCOzxhixSYgbRfNWcxJNJQwe2rezK9XEcssJbbWIkblaJRwGMS9zp+g==",
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/leb128/-/leb128-1.9.0.tgz",
+      "integrity": "sha512-ENVzM5VwV1ojs9jam6vPys97B/S65YQtv/aanqnU7D8aSoHFX8GyhGg0CMfyKNIHBuAVjy3tlzd5QMMINa7wpw==",
      "dev": true,
      "requires": {
        "@xtuc/long": "4.2.2"
      }
    },
    "@webassemblyjs/utf8": {
-      "version": "1.11.0",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.11.0.tgz",
-      "integrity": "sha512-A/lclGxH6SpSLSyFowMzO/+aDEPU4hvEiooCMXQPcQFPPJaYcPQNKGOCLUySJsYJ4trbpr+Fs08n4jelkVTGVw==",
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.9.0.tgz",
+      "integrity": "sha512-GZbQlWtopBTP0u7cHrEx+73yZKrQoBMpwkGEIqlacljhXCkVM1kMQge/Mf+csMJAjEdSwhOyLAS0AoR3AG5P8w==",
      "dev": true
    },
    "@webassemblyjs/wasm-edit": {
-      "version": "1.11.0",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.11.0.tgz",
-      "integrity": "sha512-JHQ0damXy0G6J9ucyKVXO2j08JVJ2ntkdJlq1UTiUrIgfGMmA7Ik5VdC/L8hBK46kVJgujkBIoMtT8yVr+yVOQ==",
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.9.0.tgz",
+      "integrity": "sha512-FgHzBm80uwz5M8WKnMTn6j/sVbqilPdQXTWraSjBwFXSYGirpkSWE2R9Qvz9tNiTKQvoKILpCuTjBKzOIm0nxw==",
      "dev": true,
      "requires": {
-        "@webassemblyjs/ast": "1.11.0",
-        "@webassemblyjs/helper-buffer": "1.11.0",
-        "@webassemblyjs/helper-wasm-bytecode": "1.11.0",
-        "@webassemblyjs/helper-wasm-section": "1.11.0",
-        "@webassemblyjs/wasm-gen": "1.11.0",
-        "@webassemblyjs/wasm-opt": "1.11.0",
-        "@webassemblyjs/wasm-parser": "1.11.0",
-        "@webassemblyjs/wast-printer": "1.11.0"
+        "@webassemblyjs/ast": "1.9.0",
+        "@webassemblyjs/helper-buffer": "1.9.0",
+        "@webassemblyjs/helper-wasm-bytecode": "1.9.0",
+        "@webassemblyjs/helper-wasm-section": "1.9.0",
+        "@webassemblyjs/wasm-gen": "1.9.0",
+        "@webassemblyjs/wasm-opt": "1.9.0",
+        "@webassemblyjs/wasm-parser": "1.9.0",
+        "@webassemblyjs/wast-printer": "1.9.0"
      }
    },
    "@webassemblyjs/wasm-gen": {
-      "version": "1.11.0",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.11.0.tgz",
-      "integrity": "sha512-BEUv1aj0WptCZ9kIS30th5ILASUnAPEvE3tVMTrItnZRT9tXCLW2LEXT8ezLw59rqPP9klh9LPmpU+WmRQmCPQ==",
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.9.0.tgz",
+      "integrity": "sha512-cPE3o44YzOOHvlsb4+E9qSqjc9Qf9Na1OO/BHFy4OI91XDE14MjFN4lTMezzaIWdPqHnsTodGGNP+iRSYfGkjA==",
      "dev": true,
      "requires": {
-        "@webassemblyjs/ast": "1.11.0",
-        "@webassemblyjs/helper-wasm-bytecode": "1.11.0",
-        "@webassemblyjs/ieee754": "1.11.0",
-        "@webassemblyjs/leb128": "1.11.0",
-        "@webassemblyjs/utf8": "1.11.0"
+        "@webassemblyjs/ast": "1.9.0",
+        "@webassemblyjs/helper-wasm-bytecode": "1.9.0",
+        "@webassemblyjs/ieee754": "1.9.0",
+        "@webassemblyjs/leb128": "1.9.0",
+        "@webassemblyjs/utf8": "1.9.0"
      }
    },
    "@webassemblyjs/wasm-opt": {
-      "version": "1.11.0",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.11.0.tgz",
-      "integrity": "sha512-tHUSP5F4ywyh3hZ0+fDQuWxKx3mJiPeFufg+9gwTpYp324mPCQgnuVKwzLTZVqj0duRDovnPaZqDwoyhIO8kYg==",
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.9.0.tgz",
+      "integrity": "sha512-Qkjgm6Anhm+OMbIL0iokO7meajkzQD71ioelnfPEj6r4eOFuqm4YC3VBPqXjFyyNwowzbMD+hizmprP/Fwkl2A==",
      "dev": true,
      "requires": {
-        "@webassemblyjs/ast": "1.11.0",
-        "@webassemblyjs/helper-buffer": "1.11.0",
-        "@webassemblyjs/wasm-gen": "1.11.0",
-        "@webassemblyjs/wasm-parser": "1.11.0"
+        "@webassemblyjs/ast": "1.9.0",
+        "@webassemblyjs/helper-buffer": "1.9.0",
+        "@webassemblyjs/wasm-gen": "1.9.0",
+        "@webassemblyjs/wasm-parser": "1.9.0"
      }
    },
    "@webassemblyjs/wasm-parser": {
-      "version": "1.11.0",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.11.0.tgz",
-      "integrity": "sha512-6L285Sgu9gphrcpDXINvm0M9BskznnzJTE7gYkjDbxET28shDqp27wpruyx3C2S/dvEwiigBwLA1cz7lNUi0kw==",
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.9.0.tgz",
+      "integrity": "sha512-9+wkMowR2AmdSWQzsPEjFU7njh8HTO5MqO8vjwEHuM+AMHioNqSBONRdr0NQQ3dVQrzp0s8lTcYqzUdb7YgELA==",
      "dev": true,
      "requires": {
-        "@webassemblyjs/ast": "1.11.0",
-        "@webassemblyjs/helper-api-error": "1.11.0",
-        "@webassemblyjs/helper-wasm-bytecode": "1.11.0",
-        "@webassemblyjs/ieee754": "1.11.0",
-        "@webassemblyjs/leb128": "1.11.0",
-        "@webassemblyjs/utf8": "1.11.0"
+        "@webassemblyjs/ast": "1.9.0",
+        "@webassemblyjs/helper-api-error": "1.9.0",
+        "@webassemblyjs/helper-wasm-bytecode": "1.9.0",
+        "@webassemblyjs/ieee754": "1.9.0",
+        "@webassemblyjs/leb128": "1.9.0",
+        "@webassemblyjs/utf8": "1.9.0"
      }
    },
-    "@webassemblyjs/wast-printer": {
-      "version": "1.11.0",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.11.0.tgz",
-      "integrity": "sha512-Fg5OX46pRdTgB7rKIUojkh9vXaVN6sGYCnEiJN1GYkb0RPwShZXp6KTDqmoMdQPKhcroOXh3fEzmkWmCYaKYhQ==",
+    "@webassemblyjs/wast-parser": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-parser/-/wast-parser-1.9.0.tgz",
+      "integrity": "sha512-qsqSAP3QQ3LyZjNC/0jBJ/ToSxfYJ8kYyuiGvtn/8MK89VrNEfwj7BPQzJVHi0jGTRK2dGdJ5PRqhtjzoww+bw==",
      "dev": true,
      "requires": {
-        "@webassemblyjs/ast": "1.11.0",
+        "@webassemblyjs/ast": "1.9.0",
+        "@webassemblyjs/floating-point-hex-parser": "1.9.0",
+        "@webassemblyjs/helper-api-error": "1.9.0",
+        "@webassemblyjs/helper-code-frame": "1.9.0",
+        "@webassemblyjs/helper-fsm": "1.9.0",
        "@xtuc/long": "4.2.2"
      }
    },
-    "@webpack-cli/configtest": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@webpack-cli/configtest/-/configtest-1.0.1.tgz",
-      "integrity": "sha512-B+4uBUYhpzDXmwuo3V9yBH6cISwxEI4J+NO5ggDaGEEHb0osY/R7MzeKc0bHURXQuZjMM4qD+bSJCKIuI3eNBQ==",
-      "dev": true
-    },
-    "@webpack-cli/info": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/@webpack-cli/info/-/info-1.2.2.tgz",
-      "integrity": "sha512-5U9kUJHnwU+FhKH4PWGZuBC1hTEPYyxGSL5jjoBI96Gx8qcYJGOikpiIpFoTq8mmgX3im2zAo2wanv/alD74KQ==",
+    "@webassemblyjs/wast-printer": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.9.0.tgz",
+      "integrity": "sha512-2J0nE95rHXHyQ24cWjMKJ1tqB/ds8z/cyeOZxJhcb+rW+SQASVjuznUSmdz5GpVJTzU8JkhYut0D3siFDD6wsA==",
      "dev": true,
      "requires": {
-        "envinfo": "^7.7.3"
+        "@webassemblyjs/ast": "1.9.0",
+        "@webassemblyjs/wast-parser": "1.9.0",
+        "@xtuc/long": "4.2.2"
      }
    },
-    "@webpack-cli/serve": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/@webpack-cli/serve/-/serve-1.3.0.tgz",
-      "integrity": "sha512-k2p2VrONcYVX1wRRrf0f3X2VGltLWcv+JzXRBDmvCxGlCeESx4OXw91TsWeKOkp784uNoVQo313vxJFHXPPwfw==",
-      "dev": true
-    },
    "@xtuc/ieee754": {
      "version": "1.2.0",
      "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
@@ -3371,13 +3382,50 @@
      "dev": true
    },
    "adjust-sourcemap-loader": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/adjust-sourcemap-loader/-/adjust-sourcemap-loader-3.0.0.tgz",
-      "integrity": "sha512-YBrGyT2/uVQ/c6Rr+t6ZJXniY03YtHGMJQYal368burRGYKqhx9qGTWqcBU5s1CwYY9E/ri63RYyG1IacMZtqw==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/adjust-sourcemap-loader/-/adjust-sourcemap-loader-2.0.0.tgz",
+      "integrity": "sha512-4hFsTsn58+YjrU9qKzML2JSSDqKvN8mUGQ0nNIrfPi8hmIONT4L3uUaT6MKdMsZ9AjsU6D2xDkZxCkbQPxChrA==",
      "dev": true,
      "requires": {
-        "loader-utils": "^2.0.0",
-        "regex-parser": "^2.2.11"
+        "assert": "1.4.1",
+        "camelcase": "5.0.0",
+        "loader-utils": "1.2.3",
+        "object-path": "0.11.4",
+        "regex-parser": "2.2.10"
+      },
+      "dependencies": {
+        "camelcase": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.0.0.tgz",
+          "integrity": "sha512-faqwZqnWxbxn+F1d399ygeamQNy3lPp/H9H6rNrqYh4FSVCtcY+3cub1MxA8o9mDd55mM8Aghuu/kuyYA6VTsA==",
+          "dev": true
+        },
+        "emojis-list": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-2.1.0.tgz",
+          "integrity": "sha1-TapNnbAPmBmIDHn6RXrlsJof04k=",
+          "dev": true
+        },
+        "json5": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
+          "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
+          "dev": true,
+          "requires": {
+            "minimist": "^1.2.0"
+          }
+        },
+        "loader-utils": {
+          "version": "1.2.3",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.2.3.tgz",
+          "integrity": "sha512-fkpz8ejdnEMG3s37wGL07iSBDg99O9D5yflE9RGNH3hRdx9SOwYfnGYdZOUIZitN8E+E2vkq3MUMYMvPYl5ZZA==",
+          "dev": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^2.0.0",
+            "json5": "^1.0.1"
+          }
+        }
      }
    },
    "agent-base": {
@@ -3406,24 +3454,6 @@
        }
      }
    },
-    "aggregate-error": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/aggregate-error/-/aggregate-error-3.1.0.tgz",
-      "integrity": "sha512-4I7Td01quW/RpocfNayFdFVk1qSuoh0E7JrbRJ16nH01HhKFQ88INq9Sd+nd72zqRySlr9BmDA8xlEJ6vJMrYA==",
-      "dev": true,
-      "requires": {
-        "clean-stack": "^2.0.0",
-        "indent-string": "^4.0.0"
-      },
-      "dependencies": {
-        "indent-string": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz",
-          "integrity": "sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==",
-          "dev": true
-        }
-      }
-    },
    "airbnb-prop-types": {
      "version": "2.16.0",
      "resolved": "https://registry.npmjs.org/airbnb-prop-types/-/airbnb-prop-types-2.16.0.tgz",
@@ -3477,9 +3507,9 @@
      "dev": true
    },
    "ansi-colors": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.1.tgz",
-      "integrity": "sha512-JoX0apGbHaUJBNl6yF+p6JAFYZ666/hhCGKN5t9QFjbJQKUU/g8MNbFDbvfrgKXvI1QpZplPOnwIo99lX/AAmA==",
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-3.2.4.tgz",
+      "integrity": "sha512-hHUXGagefjN2iRrID63xckIvotOXOojhQKWIPUZ4mNUZ9nLZW+7FMNoE1lOkEhNWYsx/7ysGIuJYCiMAA9FnrA==",
      "dev": true
    },
    "ansi-escapes": {
@@ -3540,6 +3570,12 @@
        }
      }
    },
+    "aproba": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz",
+      "integrity": "sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==",
+      "dev": true
+    },
    "arch": {
      "version": "2.2.0",
      "resolved": "https://registry.npmjs.org/arch/-/arch-2.2.0.tgz",
@@ -3685,12 +3721,6 @@
      "integrity": "sha1-jCpe8kcv2ep0KwTHenUJO6J1fJM=",
      "dev": true
    },
-    "array-filter": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/array-filter/-/array-filter-1.0.0.tgz",
-      "integrity": "sha1-uveeYubvTCpMC4MSMtr/7CUfnYM=",
-      "dev": true
-    },
    "array-find-index": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/array-find-index/-/array-find-index-1.0.2.tgz",
@@ -3806,6 +3836,12 @@
        }
      }
    },
+    "arrify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/arrify/-/arrify-1.0.1.tgz",
+      "integrity": "sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0=",
+      "dev": true
+    },
    "asn1": {
      "version": "0.2.4",
      "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.4.tgz",
@@ -3815,6 +3851,35 @@
        "safer-buffer": "~2.1.0"
      }
    },
+    "asn1.js": {
+      "version": "5.4.1",
+      "resolved": "https://registry.npmjs.org/asn1.js/-/asn1.js-5.4.1.tgz",
+      "integrity": "sha512-+I//4cYPccV8LdmBLiX8CYvf9Sp3vQsrqu2QNXRcrbiWvcx/UdlFiqUJJzxRQxgsZmvhXhn4cSKeSmoFjVdupA==",
+      "dev": true,
+      "requires": {
+        "bn.js": "^4.0.0",
+        "inherits": "^2.0.1",
+        "minimalistic-assert": "^1.0.0",
+        "safer-buffer": "^2.1.0"
+      },
+      "dependencies": {
+        "bn.js": {
+          "version": "4.11.9",
+          "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.11.9.tgz",
+          "integrity": "sha512-E6QoYqCKZfgatHTdHzs1RRKP7ip4vvm+EyRUeE2RF0NblwVvb0p6jSVeNTOFxPn26QXN2o6SMfNxKp6kU8zQaw==",
+          "dev": true
+        }
+      }
+    },
+    "assert": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/assert/-/assert-1.4.1.tgz",
+      "integrity": "sha1-mZEtWRg2tab1s0XA8H7vwI/GXZE=",
+      "dev": true,
+      "requires": {
+        "util": "0.10.3"
+      }
+    },
    "assert-ok": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/assert-ok/-/assert-ok-1.0.0.tgz",
@@ -3884,29 +3949,20 @@
      "dev": true
    },
    "autoprefixer": {
-      "version": "9.8.6",
-      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.8.6.tgz",
-      "integrity": "sha512-XrvP4VVHdRBCdX1S3WXVD8+RyG9qeb1D5Sn1DeLiG2xfSpzellk5k54xbUERJ3M5DggQxes39UGOTP8CFrEGbg==",
+      "version": "9.8.4",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.8.4.tgz",
+      "integrity": "sha512-84aYfXlpUe45lvmS+HoAWKCkirI/sw4JK0/bTeeqgHYco3dcsOn0NqdejISjptsYwNji/21dnkDri9PsYKk89A==",
      "dev": true,
      "requires": {
        "browserslist": "^4.12.0",
-        "caniuse-lite": "^1.0.30001109",
-        "colorette": "^1.2.1",
+        "caniuse-lite": "^1.0.30001087",
+        "colorette": "^1.2.0",
        "normalize-range": "^0.1.2",
        "num2fraction": "^1.2.2",
        "postcss": "^7.0.32",
        "postcss-value-parser": "^4.1.0"
      }
    },
-    "available-typed-arrays": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.2.tgz",
-      "integrity": "sha512-XWX3OX8Onv97LMk/ftVyBibpGwY5a8SmuxZPzeOxqmuEqUCOM9ZE+uIaD1VNJ5QnvU2UQusvmKbuM1FR8QWGfQ==",
-      "dev": true,
-      "requires": {
-        "array-filter": "^1.0.0"
-      }
-    },
    "aws-sign2": {
      "version": "0.7.0",
      "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.7.0.tgz",
@@ -3960,6 +4016,65 @@
      "integrity": "sha512-Td525n+iPOOyUQIeBfcASuG6uJsDOITl7Mds5gFyerkWiX7qhUTdYUBlSgNMyVqtSJqwpt1kXGLdUt6SykLMRA==",
      "dev": true
    },
+    "babel-code-frame": {
+      "version": "6.26.0",
+      "resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz",
+      "integrity": "sha1-Y/1D99weO7fONZR9uP42mj9Yx0s=",
+      "dev": true,
+      "requires": {
+        "chalk": "^1.1.3",
+        "esutils": "^2.0.2",
+        "js-tokens": "^3.0.2"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
+          "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
+          "dev": true
+        },
+        "ansi-styles": {
+          "version": "2.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
+          "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=",
+          "dev": true
+        },
+        "chalk": {
+          "version": "1.1.3",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+          "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^2.2.1",
+            "escape-string-regexp": "^1.0.2",
+            "has-ansi": "^2.0.0",
+            "strip-ansi": "^3.0.0",
+            "supports-color": "^2.0.0"
+          }
+        },
+        "js-tokens": {
+          "version": "3.0.2",
+          "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-3.0.2.tgz",
+          "integrity": "sha1-mGbfOVECEw449/mWvOtlRDIJwls=",
+          "dev": true
+        },
+        "strip-ansi": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
+          "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^2.0.0"
+          }
+        },
+        "supports-color": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
+          "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=",
+          "dev": true
+        }
+      }
+    },
    "babel-eslint": {
      "version": "10.1.0",
      "resolved": "https://registry.npmjs.org/babel-eslint/-/babel-eslint-10.1.0.tgz",
@@ -4117,15 +4232,15 @@
      }
    },
    "babel-plugin-react-intl": {
-      "version": "7.9.4",
-      "resolved": "https://registry.npmjs.org/babel-plugin-react-intl/-/babel-plugin-react-intl-7.9.4.tgz",
-      "integrity": "sha512-cMKrHEXrw43yT4M89Wbgq8A8N8lffSquj1Piwov/HVukR7jwOw8gf9btXNsQhT27ccyqEwy+M286JQYy0jby2g==",
+      "version": "7.9.2",
+      "resolved": "https://registry.npmjs.org/babel-plugin-react-intl/-/babel-plugin-react-intl-7.9.2.tgz",
+      "integrity": "sha512-Ny8A6iwz09I+w68t75JK/TNyZ1fD+TD87mPH+0PIr4F0ABIs5MSA8C/TaXjTCir4klGYK/I2lqwNYi7LfWxreg==",
      "dev": true,
      "requires": {
        "@babel/core": "^7.9.0",
        "@babel/helper-plugin-utils": "^7.8.3",
        "@babel/types": "^7.9.5",
-        "@formatjs/ts-transformer": "^2.6.0",
+        "@formatjs/ts-transformer": "^2.5.1",
        "@types/babel__core": "^7.1.7",
        "@types/fs-extra": "^9.0.1",
        "@types/schema-utils": "^2.4.0",
@@ -4295,8 +4410,7 @@
      "version": "1.5.1",
      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
-      "dev": true,
-      "optional": true
+      "dev": true
    },
    "batch": {
      "version": "0.6.1",
@@ -4698,6 +4812,12 @@
      "integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==",
      "dev": true
    },
+    "bn.js": {
+      "version": "5.1.3",
+      "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-5.1.3.tgz",
+      "integrity": "sha512-GkTiFpjFtUzU9CbMeJ5iazkCzGL3jrhzerzZIuqLABjbwRaFt33I9tUdSNryIptM+RxDet6OKm2WnLXzW51KsQ==",
+      "dev": true
+    },
    "body-parser": {
      "version": "1.19.0",
      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.19.0.tgz",
@@ -4799,6 +4919,12 @@
      "resolved": "https://registry.npmjs.org/breakjs/-/breakjs-1.0.0.tgz",
      "integrity": "sha1-7INToGhi60OWLergkHLuZqTNhFk="
    },
+    "brorand": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/brorand/-/brorand-1.1.0.tgz",
+      "integrity": "sha1-EsJe/kCkXjwyPrhnWgoM5XsiNx8=",
+      "dev": true
+    },
    "browser-process-hrtime": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/browser-process-hrtime/-/browser-process-hrtime-1.0.0.tgz",
@@ -4822,6 +4948,79 @@
        }
      }
    },
+    "browserify-aes": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/browserify-aes/-/browserify-aes-1.2.0.tgz",
+      "integrity": "sha512-+7CHXqGuspUn/Sl5aO7Ea0xWGAtETPXNSAjHo48JfLdPWcMng33Xe4znFvQweqc/uzk5zSOI3H52CYnjCfb5hA==",
+      "dev": true,
+      "requires": {
+        "buffer-xor": "^1.0.3",
+        "cipher-base": "^1.0.0",
+        "create-hash": "^1.1.0",
+        "evp_bytestokey": "^1.0.3",
+        "inherits": "^2.0.1",
+        "safe-buffer": "^5.0.1"
+      }
+    },
+    "browserify-cipher": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/browserify-cipher/-/browserify-cipher-1.0.1.tgz",
+      "integrity": "sha512-sPhkz0ARKbf4rRQt2hTpAHqn47X3llLkUGn+xEJzLjwY8LRs2p0v7ljvI5EyoRO/mexrNunNECisZs+gw2zz1w==",
+      "dev": true,
+      "requires": {
+        "browserify-aes": "^1.0.4",
+        "browserify-des": "^1.0.0",
+        "evp_bytestokey": "^1.0.0"
+      }
+    },
+    "browserify-des": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/browserify-des/-/browserify-des-1.0.2.tgz",
+      "integrity": "sha512-BioO1xf3hFwz4kc6iBhI3ieDFompMhrMlnDFC4/0/vd5MokpuAc3R+LYbwTA9A5Yc9pq9UYPqffKpW2ObuwX5A==",
+      "dev": true,
+      "requires": {
+        "cipher-base": "^1.0.1",
+        "des.js": "^1.0.0",
+        "inherits": "^2.0.1",
+        "safe-buffer": "^5.1.2"
+      }
+    },
+    "browserify-rsa": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/browserify-rsa/-/browserify-rsa-4.1.0.tgz",
+      "integrity": "sha512-AdEER0Hkspgno2aR97SAf6vi0y0k8NuOpGnVH3O99rcA5Q6sh8QxcngtHuJ6uXwnfAXNM4Gn1Gb7/MV1+Ymbog==",
+      "dev": true,
+      "requires": {
+        "bn.js": "^5.0.0",
+        "randombytes": "^2.0.1"
+      }
+    },
+    "browserify-sign": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/browserify-sign/-/browserify-sign-4.2.1.tgz",
+      "integrity": "sha512-/vrA5fguVAKKAVTNJjgSm1tRQDHUU6DbwO9IROu/0WAzC8PKhucDSh18J0RMvVeHAn5puMd+QHC2erPRNf8lmg==",
+      "dev": true,
+      "requires": {
+        "bn.js": "^5.1.1",
+        "browserify-rsa": "^4.0.1",
+        "create-hash": "^1.2.0",
+        "create-hmac": "^1.1.7",
+        "elliptic": "^6.5.3",
+        "inherits": "^2.0.4",
+        "parse-asn1": "^5.1.5",
+        "readable-stream": "^3.6.0",
+        "safe-buffer": "^5.2.0"
+      }
+    },
+    "browserify-zlib": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/browserify-zlib/-/browserify-zlib-0.2.0.tgz",
+      "integrity": "sha512-Z942RysHXmJrhqk88FmKBVq/v5tqmSkDz7p54G/MGyjMnCFFnC79XWNbg+Vta8W6Wb2qtSZTSxIGkJrRpCFEiA==",
+      "dev": true,
+      "requires": {
+        "pako": "~1.0.5"
+      }
+    },
    "browserslist": {
      "version": "4.16.3",
      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.16.3.tgz",
@@ -4899,12 +5098,64 @@
      "integrity": "sha512-4/rOEg86jivtPTeOUUT61jJO1Ya1TrR/OkqCSZDyq84WJh3LuuiphBYJN+fm5xufIk4XAFcEwte/8WzC8If/1g==",
      "dev": true
    },
+    "buffer-xor": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/buffer-xor/-/buffer-xor-1.0.3.tgz",
+      "integrity": "sha1-JuYe0UIvtw3ULm42cp7VHYVf6Nk=",
+      "dev": true
+    },
+    "builtin-status-codes": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz",
+      "integrity": "sha1-hZgoeOIbmOHGZCXgPQF0eI9Wnug=",
+      "dev": true
+    },
    "bytes": {
      "version": "3.1.0",
      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.0.tgz",
      "integrity": "sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg==",
      "dev": true
    },
+    "cacache": {
+      "version": "12.0.4",
+      "resolved": "https://registry.npmjs.org/cacache/-/cacache-12.0.4.tgz",
+      "integrity": "sha512-a0tMB40oefvuInr4Cwb3GerbL9xTj1D5yg0T5xrjGCGyfvbxseIXX7BAO/u/hIXdafzOI5JC3wDwHyf24buOAQ==",
+      "dev": true,
+      "requires": {
+        "bluebird": "^3.5.5",
+        "chownr": "^1.1.1",
+        "figgy-pudding": "^3.5.1",
+        "glob": "^7.1.4",
+        "graceful-fs": "^4.1.15",
+        "infer-owner": "^1.0.3",
+        "lru-cache": "^5.1.1",
+        "mississippi": "^3.0.0",
+        "mkdirp": "^0.5.1",
+        "move-concurrently": "^1.0.1",
+        "promise-inflight": "^1.0.1",
+        "rimraf": "^2.6.3",
+        "ssri": "^6.0.1",
+        "unique-filename": "^1.1.1",
+        "y18n": "^4.0.0"
+      },
+      "dependencies": {
+        "lru-cache": {
+          "version": "5.1.1",
+          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
+          "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
+          "dev": true,
+          "requires": {
+            "yallist": "^3.0.2"
+          }
+        },
+        "yallist": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
+          "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
+          "dev": true
+        }
+      }
+    },
    "cache-base": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/cache-base/-/cache-base-1.0.1.tgz",
@@ -5016,6 +5267,12 @@
        "get-intrinsic": "^1.0.2"
      }
    },
+    "call-me-maybe": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/call-me-maybe/-/call-me-maybe-1.0.1.tgz",
+      "integrity": "sha1-JtII6onje1y95gJQoV8DHBak1ms=",
+      "dev": true
+    },
    "caller-callsite": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/caller-callsite/-/caller-callsite-2.0.0.tgz",
@@ -5300,6 +5557,12 @@
        "upath": "^1.1.1"
      }
    },
+    "chownr": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.4.tgz",
+      "integrity": "sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==",
+      "dev": true
+    },
    "chrome-trace-event": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.2.tgz",
@@ -5315,6 +5578,16 @@
      "integrity": "sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ==",
      "dev": true
    },
+    "cipher-base": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/cipher-base/-/cipher-base-1.0.4.tgz",
+      "integrity": "sha512-Kkht5ye6ZGmwv40uUDZztayT2ThLQGfnj/T71N/XzeZeo3nf8foyW7zGTsPYkEya3m5f3cAypH+qe7YOrM1U2Q==",
+      "dev": true,
+      "requires": {
+        "inherits": "^2.0.1",
+        "safe-buffer": "^5.0.1"
+      }
+    },
    "cjs-module-lexer": {
      "version": "0.6.0",
      "resolved": "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-0.6.0.tgz",
@@ -5358,12 +5631,6 @@
        "source-map": "~0.6.0"
      }
    },
-    "clean-stack": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz",
-      "integrity": "sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==",
-      "dev": true
-    },
    "clean-webpack-plugin": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/clean-webpack-plugin/-/clean-webpack-plugin-3.0.0.tgz",
@@ -5507,22 +5774,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",
@@ -5744,6 +6011,12 @@
      "integrity": "sha512-e54B99q/OUoH64zYYRf3HBP5z24G38h5D3qXu23JGRoigpX5Ss4r9ZnDk3g0Z8uQC2x2lPaJ+UlWBc1ZWBWdLg==",
      "dev": true
    },
+    "console-browserify": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/console-browserify/-/console-browserify-1.2.0.tgz",
+      "integrity": "sha512-ZMkYO/LkF17QvCPqM0gxw8yUzigAOZOSWSHg91FH6orS7vcEj5dVZTidN2fQ14yBSdg97RqhSNwLUXInd52OTA==",
+      "dev": true
+    },
    "console-stream": {
      "version": "0.1.1",
      "resolved": "https://registry.npmjs.org/console-stream/-/console-stream-0.1.1.tgz",
@@ -5751,6 +6024,12 @@
      "dev": true,
      "optional": true
    },
+    "constants-browserify": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/constants-browserify/-/constants-browserify-1.0.0.tgz",
+      "integrity": "sha1-wguW2MYXdIqvHBYCF2DNJ/y4y3U=",
+      "dev": true
+    },
    "contains-path": {
      "version": "0.1.0",
      "resolved": "https://registry.npmjs.org/contains-path/-/contains-path-0.1.0.tgz",
@@ -5814,6 +6093,20 @@
      "integrity": "sha512-Mw+adcfzPxcPeI+0WlvRrr/3lGVO0bD75SxX6811cxSh1Wbxx7xZBGK1eVtDf6si8rg2lhnUjsVLMFMfbRIuwA==",
      "dev": true
    },
+    "copy-concurrently": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/copy-concurrently/-/copy-concurrently-1.0.5.tgz",
+      "integrity": "sha512-f2domd9fsVDFtaFcbaRZuYXwtdmnzqbADSwhSWYxYB/Q8zsdUUFMXVRwXGDMWmbEzAn1kdRrtI1T/KTFOL4X2A==",
+      "dev": true,
+      "requires": {
+        "aproba": "^1.1.1",
+        "fs-write-stream-atomic": "^1.0.8",
+        "iferr": "^0.1.5",
+        "mkdirp": "^0.5.1",
+        "rimraf": "^2.5.4",
+        "run-queue": "^1.0.0"
+      }
+    },
    "copy-descriptor": {
      "version": "0.1.1",
      "resolved": "https://registry.npmjs.org/copy-descriptor/-/copy-descriptor-0.1.1.tgz",
@@ -5868,6 +6161,51 @@
        "yaml": "^1.10.0"
      }
    },
+    "create-ecdh": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/create-ecdh/-/create-ecdh-4.0.4.tgz",
+      "integrity": "sha512-mf+TCx8wWc9VpuxfP2ht0iSISLZnt0JgWlrOKZiNqyUZWnjIaCIVNQArMHnCZKfEYRg6IM7A+NeJoN8gf/Ws0A==",
+      "dev": true,
+      "requires": {
+        "bn.js": "^4.1.0",
+        "elliptic": "^6.5.3"
+      },
+      "dependencies": {
+        "bn.js": {
+          "version": "4.11.9",
+          "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.11.9.tgz",
+          "integrity": "sha512-E6QoYqCKZfgatHTdHzs1RRKP7ip4vvm+EyRUeE2RF0NblwVvb0p6jSVeNTOFxPn26QXN2o6SMfNxKp6kU8zQaw==",
+          "dev": true
+        }
+      }
+    },
+    "create-hash": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/create-hash/-/create-hash-1.2.0.tgz",
+      "integrity": "sha512-z00bCGNHDG8mHAkP7CtT1qVu+bFQUPjYq/4Iv3C3kWjTFV10zIjfSoeqXo9Asws8gwSHDGj/hl2u4OGIjapeCg==",
+      "dev": true,
+      "requires": {
+        "cipher-base": "^1.0.1",
+        "inherits": "^2.0.1",
+        "md5.js": "^1.3.4",
+        "ripemd160": "^2.0.1",
+        "sha.js": "^2.4.0"
+      }
+    },
+    "create-hmac": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/create-hmac/-/create-hmac-1.1.7.tgz",
+      "integrity": "sha512-MJG9liiZ+ogc4TzUwuvbER1JRdgvUFSB5+VR/g5h82fGaIRWMWddtKBHi7/sVhfjQZ6SehlyhvQYrcYkaUIpLg==",
+      "dev": true,
+      "requires": {
+        "cipher-base": "^1.0.3",
+        "create-hash": "^1.1.0",
+        "inherits": "^2.0.1",
+        "ripemd160": "^2.0.0",
+        "safe-buffer": "^5.0.1",
+        "sha.js": "^2.4.8"
+      }
+    },
    "cross-spawn": {
      "version": "6.0.5",
      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
@@ -5886,6 +6224,25 @@
      "resolved": "https://registry.npmjs.org/crypt/-/crypt-0.0.2.tgz",
      "integrity": "sha1-iNf/fsDfuG9xPch7u0LQRNPmxBs="
    },
+    "crypto-browserify": {
+      "version": "3.12.0",
+      "resolved": "https://registry.npmjs.org/crypto-browserify/-/crypto-browserify-3.12.0.tgz",
+      "integrity": "sha512-fz4spIh+znjO2VjL+IdhEpRJ3YN6sMzITSBijk6FK2UvTqruSQW+/cCZTSNsMiZNvUeq0CqurF+dAbyiGOY6Wg==",
+      "dev": true,
+      "requires": {
+        "browserify-cipher": "^1.0.0",
+        "browserify-sign": "^4.0.0",
+        "create-ecdh": "^4.0.0",
+        "create-hash": "^1.1.0",
+        "create-hmac": "^1.1.0",
+        "diffie-hellman": "^5.0.0",
+        "inherits": "^2.0.1",
+        "pbkdf2": "^3.0.3",
+        "public-encrypt": "^4.0.0",
+        "randombytes": "^2.0.0",
+        "randomfill": "^1.0.3"
+      }
+    },
    "css": {
      "version": "2.2.4",
      "resolved": "https://registry.npmjs.org/css/-/css-2.2.4.tgz",
@@ -6218,9 +6575,9 @@
      }
    },
    "csstype": {
-      "version": "3.0.6",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.6.tgz",
-      "integrity": "sha512-+ZAmfyWMT7TiIlzdqJgjMb7S4f1beorDbWbsocyK4RaiqA5RTX3K14bnBWmmA9QEM0gRdsjyyrEmcyga8Zsxmw=="
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.8.tgz",
+      "integrity": "sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw=="
    },
    "currently-unhandled": {
      "version": "0.4.1",
@@ -6250,6 +6607,12 @@
      "integrity": "sha1-IegLK+hYD5i0aPN5QwZisEbDStI=",
      "dev": true
    },
+    "cyclist": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/cyclist/-/cyclist-1.0.1.tgz",
+      "integrity": "sha1-WW6WmP0MgOEgOMK4LW6xs1tiJNk=",
+      "dev": true
+    },
    "d": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/d/-/d-1.0.1.tgz",
@@ -6498,99 +6861,13 @@
      "dev": true
    },
    "default-gateway": {
-      "version": "6.0.3",
-      "resolved": "https://registry.npmjs.org/default-gateway/-/default-gateway-6.0.3.tgz",
-      "integrity": "sha512-fwSOJsbbNzZ/CUFpqFBqYfYNLj1NbMPm8MMCIzHjC83iSJRBEGmDUxU+WP661BaBQImeC2yHwXtz+P/O9o+XEg==",
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/default-gateway/-/default-gateway-4.2.0.tgz",
+      "integrity": "sha512-h6sMrVB1VMWVrW13mSc6ia/DwYYw5MN6+exNu1OaJeFac5aSAvwM7lZ0NVfTABuSkQelr4h5oebg3KB1XPdjgA==",
      "dev": true,
      "requires": {
-        "execa": "^5.0.0"
-      },
-      "dependencies": {
-        "cross-spawn": {
-          "version": "7.0.3",
-          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
-          "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
-          "dev": true,
-          "requires": {
-            "path-key": "^3.1.0",
-            "shebang-command": "^2.0.0",
-            "which": "^2.0.1"
-          }
-        },
-        "execa": {
-          "version": "5.0.0",
-          "resolved": "https://registry.npmjs.org/execa/-/execa-5.0.0.tgz",
-          "integrity": "sha512-ov6w/2LCiuyO4RLYGdpFGjkcs0wMTgGE8PrkTHikeUy5iJekXyPIKUjifk5CsE0pt7sMCrMZ3YNqoCj6idQOnQ==",
-          "dev": true,
-          "requires": {
-            "cross-spawn": "^7.0.3",
-            "get-stream": "^6.0.0",
-            "human-signals": "^2.1.0",
-            "is-stream": "^2.0.0",
-            "merge-stream": "^2.0.0",
-            "npm-run-path": "^4.0.1",
-            "onetime": "^5.1.2",
-            "signal-exit": "^3.0.3",
-            "strip-final-newline": "^2.0.0"
-          }
-        },
-        "get-stream": {
-          "version": "6.0.0",
-          "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.0.tgz",
-          "integrity": "sha512-A1B3Bh1UmL0bidM/YX2NsCOTnGJePL9rO/M+Mw3m9f2gUpfokS0hi5Eah0WSUEWZdZhIZtMjkIYS7mDfOqNHbg==",
-          "dev": true
-        },
-        "human-signals": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz",
-          "integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==",
-          "dev": true
-        },
-        "is-stream": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.0.tgz",
-          "integrity": "sha512-XCoy+WlUr7d1+Z8GgSuXmpuUFC9fOhRXglJMx+dwLKTkL44Cjd4W1Z5P+BQZpr+cR93aGP4S/s7Ftw6Nd/kiEw==",
-          "dev": true
-        },
-        "npm-run-path": {
-          "version": "4.0.1",
-          "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
-          "integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
-          "dev": true,
-          "requires": {
-            "path-key": "^3.0.0"
-          }
-        },
-        "path-key": {
-          "version": "3.1.1",
-          "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
-          "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-          "dev": true
-        },
-        "shebang-command": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
-          "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-          "dev": true,
-          "requires": {
-            "shebang-regex": "^3.0.0"
-          }
-        },
-        "shebang-regex": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
-          "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
-          "dev": true
-        },
-        "which": {
-          "version": "2.0.2",
-          "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
-          "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-          "dev": true,
-          "requires": {
-            "isexe": "^2.0.0"
-          }
-        }
+        "execa": "^1.0.0",
+        "ip-regex": "^2.1.0"
      }
    },
    "define-properties": {
@@ -6675,12 +6952,28 @@
      "integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak=",
      "dev": true
    },
+    "des.js": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/des.js/-/des.js-1.0.1.tgz",
+      "integrity": "sha512-Q0I4pfFrv2VPd34/vfLrFOoRmlYj3OV50i7fskps1jZWK1kApMWWT9G6RRUeYedLcBDIhnSDaUvJMb3AhUlaEA==",
+      "dev": true,
+      "requires": {
+        "inherits": "^2.0.1",
+        "minimalistic-assert": "^1.0.0"
+      }
+    },
    "destroy": {
      "version": "1.0.4",
      "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz",
      "integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA=",
      "dev": true
    },
+    "detect-file": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/detect-file/-/detect-file-1.0.0.tgz",
+      "integrity": "sha1-8NZtA2cqglyxtzvbP+YjEMjlUrc=",
+      "dev": true
+    },
    "detect-newline": {
      "version": "3.1.0",
      "resolved": "https://registry.npmjs.org/detect-newline/-/detect-newline-3.1.0.tgz",
@@ -6694,9 +6987,9 @@
      "dev": true
    },
    "detect-node-es": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.0.0.tgz",
-      "integrity": "sha512-S4AHriUkTX9FoFvL4G8hXDcx6t3gp2HpfCza3Q0v6S78gul2hKWifLQbeW+ZF89+hSm2ZIc/uF3J97ZgytgTRg=="
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz",
+      "integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ=="
    },
    "detect-port-alt": {
      "version": "1.1.6",
@@ -6719,6 +7012,25 @@
      "integrity": "sha512-Mv/TDa3nZ9sbc5soK+OoA74BsS3mL37yixCvUAQkiuA4Wz6YtwP/K47n2rv2ovzHZvoiQeA5FTQOschKkEwB0Q==",
      "dev": true
    },
+    "diffie-hellman": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/diffie-hellman/-/diffie-hellman-5.0.3.tgz",
+      "integrity": "sha512-kqag/Nl+f3GwyK25fhUMYj81BUOrZ9IuJsjIcDE5icNM9FJHAVm3VcUDxdLPoQtTuUylWm6ZIknYJwwaPxsUzg==",
+      "dev": true,
+      "requires": {
+        "bn.js": "^4.1.0",
+        "miller-rabin": "^4.0.0",
+        "randombytes": "^2.0.0"
+      },
+      "dependencies": {
+        "bn.js": {
+          "version": "4.11.9",
+          "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.11.9.tgz",
+          "integrity": "sha512-E6QoYqCKZfgatHTdHzs1RRKP7ip4vvm+EyRUeE2RF0NblwVvb0p6jSVeNTOFxPn26QXN2o6SMfNxKp6kU8zQaw==",
+          "dev": true
+        }
+      }
+    },
    "dir-glob": {
      "version": "3.0.1",
      "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
@@ -6778,18 +7090,18 @@
      }
    },
    "dom-helpers": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.0.tgz",
-      "integrity": "sha512-Ru5o9+V8CpunKnz5LGgWXkmrH/20cGKwcHwS4m73zIvs54CN9epEmT/HLqFJW3kXpakAFkEdzgy1hzlJe3E4OQ==",
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
      "requires": {
        "@babel/runtime": "^7.8.7",
        "csstype": "^3.0.2"
      }
    },
    "dom-serializer": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.2.0.tgz",
-      "integrity": "sha512-n6kZFH/KlCrqs/1GHMOd5i2fd/beQHuehKdWvNNffbGHTr/almdhuVvTVFb3V7fglz+nC50fFusu3lY33h12pA==",
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.3.1.tgz",
+      "integrity": "sha512-Pv2ZluG5ife96udGgEDovOOOA5UELkltfJpnIExPrAk1LTvecolUGn6lIaoLh86d83GiB86CjzciMd9BuRB71Q==",
      "requires": {
        "domelementtype": "^2.0.1",
        "domhandler": "^4.0.0",
@@ -6797,19 +7109,25 @@
      },
      "dependencies": {
        "domhandler": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.0.0.tgz",
-          "integrity": "sha512-KPTbnGQ1JeEMQyO1iYXoagsI6so/C96HZiFyByU3T6iAzpXn8EGEvct6unm1ZGoed8ByO2oirxgwxBmqKF9haA==",
+          "version": "4.2.0",
+          "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.2.0.tgz",
+          "integrity": "sha512-zk7sgt970kzPks2Bf+dwT/PLzghLnsivb9CcxkvR8Mzr66Olr0Ofd8neSbglHJHaHa2MadfoSdNlKYAaafmWfA==",
          "requires": {
-            "domelementtype": "^2.1.0"
+            "domelementtype": "^2.2.0"
          }
        }
      }
    },
+    "domain-browser": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-1.2.0.tgz",
+      "integrity": "sha512-jnjyiM6eRyZl2H+W8Q/zLMA481hzi0eszAaBUzIVnmYVDBbnLxVNnfu1HgEBvCbL+71FrxMl3E6lpKH7Ge3OXA==",
+      "dev": true
+    },
    "domelementtype": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.1.0.tgz",
-      "integrity": "sha512-LsTgx/L5VpD+Q8lmsXSHW2WpA+eBlZ9HPf3erD1IoPF00/3JKHZ3BknUVA2QGDNu69ZNmyFmCWBSO45XjYKC5w=="
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.2.0.tgz",
+      "integrity": "sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A=="
    },
    "domexception": {
      "version": "2.0.1",
@@ -6837,21 +7155,21 @@
      }
    },
    "domutils": {
-      "version": "2.4.4",
-      "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.4.4.tgz",
-      "integrity": "sha512-jBC0vOsECI4OMdD0GC9mGn7NXPLb+Qt6KW1YDQzeQYRUFKmNG8lh7mO5HiELfr+lLQE7loDVI4QcAxV80HS+RA==",
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.6.0.tgz",
+      "integrity": "sha512-y0BezHuy4MDYxh6OvolXYsH+1EMGmFbwv5FKW7ovwMG6zTPWqNPq3WF9ayZssFq+UlKdffGLbOEaghNdaOm1WA==",
      "requires": {
        "dom-serializer": "^1.0.1",
-        "domelementtype": "^2.0.1",
-        "domhandler": "^4.0.0"
+        "domelementtype": "^2.2.0",
+        "domhandler": "^4.2.0"
      },
      "dependencies": {
        "domhandler": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.0.0.tgz",
-          "integrity": "sha512-KPTbnGQ1JeEMQyO1iYXoagsI6so/C96HZiFyByU3T6iAzpXn8EGEvct6unm1ZGoed8ByO2oirxgwxBmqKF9haA==",
+          "version": "4.2.0",
+          "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.2.0.tgz",
+          "integrity": "sha512-zk7sgt970kzPks2Bf+dwT/PLzghLnsivb9CcxkvR8Mzr66Olr0Ofd8neSbglHJHaHa2MadfoSdNlKYAaafmWfA==",
          "requires": {
-            "domelementtype": "^2.1.0"
+            "domelementtype": "^2.2.0"
          }
        }
      }
@@ -6899,9 +7217,9 @@
      }
    },
    "dotenv-webpack": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/dotenv-webpack/-/dotenv-webpack-6.0.0.tgz",
-      "integrity": "sha512-u/ycyUq7+x407HNTTqJDJelX64Pjmtm96IskgV4ZPPqTdE5d7+p8GzK7OW4sOoPxnwiLQ3iM6zjauYqFU8KdNg==",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/dotenv-webpack/-/dotenv-webpack-4.0.0.tgz",
+      "integrity": "sha512-nmfhB0fV1AJVLGrU0E+F+/mfcP8dYAqiuFPgepQmX8D0uZoynxC1AYdlBn3fiA3Cfr9h0efFftprDfSS/C3kkg==",
      "dev": true,
      "requires": {
        "dotenv-defaults": "^2.0.1"
@@ -6973,6 +7291,56 @@
      "dev": true,
      "optional": true
    },
+    "duplexify": {
+      "version": "3.7.1",
+      "resolved": "https://registry.npmjs.org/duplexify/-/duplexify-3.7.1.tgz",
+      "integrity": "sha512-07z8uv2wMyS51kKhD1KsdXJg5WQ6t93RneqRxUHnskXVtlYYkLqM0gqStQZ3pj073g687jPCHrqNfCzawLYh5g==",
+      "dev": true,
+      "requires": {
+        "end-of-stream": "^1.0.0",
+        "inherits": "^2.0.1",
+        "readable-stream": "^2.0.0",
+        "stream-shift": "^1.0.0"
+      },
+      "dependencies": {
+        "isarray": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+          "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
+          "dev": true
+        },
+        "readable-stream": {
+          "version": "2.3.7",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
+          "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==",
+          "dev": true,
+          "requires": {
+            "core-util-is": "~1.0.0",
+            "inherits": "~2.0.3",
+            "isarray": "~1.0.0",
+            "process-nextick-args": "~2.0.0",
+            "safe-buffer": "~5.1.1",
+            "string_decoder": "~1.1.1",
+            "util-deprecate": "~1.0.1"
+          }
+        },
+        "safe-buffer": {
+          "version": "5.1.2",
+          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+          "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+          "dev": true
+        },
+        "string_decoder": {
+          "version": "1.1.1",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+          "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+          "dev": true,
+          "requires": {
+            "safe-buffer": "~5.1.0"
+          }
+        }
+      }
+    },
    "ecc-jsbn": {
      "version": "0.1.2",
      "resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz",
@@ -6996,11 +7364,34 @@
      "dev": true
    },
    "electron-to-chromium": {
-      "version": "1.3.660",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.660.tgz",
-      "integrity": "sha512-UOSKNfUBY8FDOSo4mfaUsN3KftlNLcYOg9v5apqLvNcWj+Ogy/i9SEDMZpfSVOeDkOcpu9iusucX6jxTWzqGLA==",
+      "version": "1.3.657",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.657.tgz",
+      "integrity": "sha512-/9ROOyvEflEbaZFUeGofD+Tqs/WynbSTbNgNF+/TJJxH1ePD/e6VjZlDJpW3FFFd3nj5l3Hd8ki2vRwy+gyRFw==",
      "dev": true
    },
+    "elliptic": {
+      "version": "6.5.4",
+      "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.4.tgz",
+      "integrity": "sha512-iLhC6ULemrljPZb+QutR5TQGB+pdW6KGD5RSegS+8sorOZT+rdQFbsQFJgvN3eRqNALqJer4oQ16YvJHlU8hzQ==",
+      "dev": true,
+      "requires": {
+        "bn.js": "^4.11.9",
+        "brorand": "^1.1.0",
+        "hash.js": "^1.0.0",
+        "hmac-drbg": "^1.0.1",
+        "inherits": "^2.0.4",
+        "minimalistic-assert": "^1.0.1",
+        "minimalistic-crypto-utils": "^1.0.1"
+      },
+      "dependencies": {
+        "bn.js": {
+          "version": "4.11.9",
+          "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.11.9.tgz",
+          "integrity": "sha512-E6QoYqCKZfgatHTdHzs1RRKP7ip4vvm+EyRUeE2RF0NblwVvb0p6jSVeNTOFxPn26QXN2o6SMfNxKp6kU8zQaw==",
+          "dev": true
+        }
+      }
+    },
    "email-prop-type": {
      "version": "3.0.1",
      "resolved": "https://registry.npmjs.org/email-prop-type/-/email-prop-type-3.0.1.tgz",
@@ -7048,22 +7439,62 @@
      }
    },
    "enhanced-resolve": {
-      "version": "5.7.0",
-      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.7.0.tgz",
-      "integrity": "sha512-6njwt/NsZFUKhM6j9U8hzVyD4E4r0x7NQzhTCbcWOJ0IQjNSAoalWmb0AE51Wn+fwan5qVESWi7t2ToBxs9vrw==",
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-4.5.0.tgz",
+      "integrity": "sha512-Nv9m36S/vxpsI+Hc4/ZGRs0n9mXqSWGGq49zxb/cJfPAQMbUtttJAlNPS4AQzaBdw/pKskw5bMbekT/Y7W/Wlg==",
      "dev": true,
      "requires": {
-        "graceful-fs": "^4.2.4",
-        "tapable": "^2.2.0"
-      }
-    },
-    "enquirer": {
-      "version": "2.3.6",
-      "resolved": "https://registry.npmjs.org/enquirer/-/enquirer-2.3.6.tgz",
-      "integrity": "sha512-yjNnPr315/FjS4zIsUxYguYUPP2e1NK4d7E7ZOLiyYCcbFBiTMyID+2wvm2w6+pZ/odMA7cRkjhsPbltwBOrLg==",
-      "dev": true,
-      "requires": {
-        "ansi-colors": "^4.1.1"
+        "graceful-fs": "^4.1.2",
+        "memory-fs": "^0.5.0",
+        "tapable": "^1.0.0"
+      },
+      "dependencies": {
+        "isarray": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+          "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
+          "dev": true
+        },
+        "memory-fs": {
+          "version": "0.5.0",
+          "resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.5.0.tgz",
+          "integrity": "sha512-jA0rdU5KoQMC0e6ppoNRtpp6vjFq6+NY7r8hywnC7V+1Xj/MtHwGIbB1QaK/dunyjWteJzmkpd7ooeWg10T7GA==",
+          "dev": true,
+          "requires": {
+            "errno": "^0.1.3",
+            "readable-stream": "^2.0.1"
+          }
+        },
+        "readable-stream": {
+          "version": "2.3.7",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
+          "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==",
+          "dev": true,
+          "requires": {
+            "core-util-is": "~1.0.0",
+            "inherits": "~2.0.3",
+            "isarray": "~1.0.0",
+            "process-nextick-args": "~2.0.0",
+            "safe-buffer": "~5.1.1",
+            "string_decoder": "~1.1.1",
+            "util-deprecate": "~1.0.1"
+          }
+        },
+        "safe-buffer": {
+          "version": "5.1.2",
+          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+          "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+          "dev": true
+        },
+        "string_decoder": {
+          "version": "1.1.1",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+          "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+          "dev": true,
+          "requires": {
+            "safe-buffer": "~5.1.0"
+          }
+        }
      }
    },
    "entities": {
@@ -7071,11 +7502,14 @@
      "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
      "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A=="
    },
-    "envinfo": {
-      "version": "7.7.4",
-      "resolved": "https://registry.npmjs.org/envinfo/-/envinfo-7.7.4.tgz",
-      "integrity": "sha512-TQXTYFVVwwluWSFis6K2XKxgrD22jEv0FTuLCQI+OjH7rn93+iY0fSSFM5lrSxFY+H1+B0/cvvlamr3UsBivdQ==",
-      "dev": true
+    "errno": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.8.tgz",
+      "integrity": "sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==",
+      "dev": true,
+      "requires": {
+        "prr": "~1.0.1"
+      }
    },
    "error-ex": {
      "version": "1.3.2",
@@ -7123,12 +7557,6 @@
        }
      }
    },
-    "es-module-lexer": {
-      "version": "0.3.26",
-      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-0.3.26.tgz",
-      "integrity": "sha512-Va0Q/xqtrss45hWzP8CZJwzGSZJjDM5/MJRE3IXXnUCcVLElR9BRaE9F62BopysASyc4nM3uwhSW7FFB9nlWAA==",
-      "dev": true
-    },
    "es-to-primitive": {
      "version": "1.2.1",
      "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz",
@@ -7611,6 +8039,16 @@
        "original": "^1.0.0"
      }
    },
+    "evp_bytestokey": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/evp_bytestokey/-/evp_bytestokey-1.0.3.tgz",
+      "integrity": "sha512-/f2Go4TognH/KvCISP7OUsHn85hT9nUkxxA9BEWxFn+Oj9o8ZNLm/40hdlgSLyuOimsrTKLUMEorQexp/aPQeA==",
+      "dev": true,
+      "requires": {
+        "md5.js": "^1.3.4",
+        "safe-buffer": "^5.1.1"
+      }
+    },
    "exec-buffer": {
      "version": "3.2.0",
      "resolved": "https://registry.npmjs.org/exec-buffer/-/exec-buffer-3.2.0.tgz",
@@ -7756,6 +8194,15 @@
        }
      }
    },
+    "expand-tilde": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/expand-tilde/-/expand-tilde-2.0.2.tgz",
+      "integrity": "sha1-l+gBqgUt8CRU3kawK/YhZCzchQI=",
+      "dev": true,
+      "requires": {
+        "homedir-polyfill": "^1.0.1"
+      }
+    },
    "expect": {
      "version": "26.6.2",
      "resolved": "https://registry.npmjs.org/expect/-/expect-26.6.2.tgz",
@@ -8099,12 +8546,6 @@
      "integrity": "sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=",
      "dev": true
    },
-    "fastest-levenshtein": {
-      "version": "1.0.12",
-      "resolved": "https://registry.npmjs.org/fastest-levenshtein/-/fastest-levenshtein-1.0.12.tgz",
-      "integrity": "sha512-On2N+BpYJ15xIC974QNVuYGMOlEVt4s0EOI3wwMqOmK1fdDY+FN/zltPV8vosq4ad4c/gJ1KHScUn/6AWIgiow==",
-      "dev": true
-    },
    "fastq": {
      "version": "1.10.1",
      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.10.1.tgz",
@@ -8142,6 +8583,12 @@
        "pend": "~1.2.0"
      }
    },
+    "figgy-pudding": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/figgy-pudding/-/figgy-pudding-3.5.2.tgz",
+      "integrity": "sha512-0btnI/H8f2pavGMN8w40mlSKOfTK2SVJmBfBeVIj3kNw0swwgzyRq0d5TJVOwodFmtvpPeWPN/MCcfuWF0Ezbw==",
+      "dev": true
+    },
    "figures": {
      "version": "3.2.0",
      "resolved": "https://registry.npmjs.org/figures/-/figures-3.2.0.tgz",
@@ -8216,9 +8663,9 @@
      }
    },
    "filesize": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/filesize/-/filesize-6.1.0.tgz",
-      "integrity": "sha512-LpCHtPQ3sFx67z+uh2HnSyWSLLu5Jxo21795uRDuar/EOuYWXib5EmPaGIBuSnRqH2IODiKA2k5re/K9OnN/Yg==",
+      "version": "3.6.1",
+      "resolved": "https://registry.npmjs.org/filesize/-/filesize-3.6.1.tgz",
+      "integrity": "sha512-7KjR1vv6qnicaPMi1iiTcI85CyYwRO/PSFCu6SvqL8jN2Wjt/NIYQTFtFs7fSDCYOstUkEWIQGFUg5YZQfjlcg==",
      "dev": true
    },
    "fill-range": {
@@ -8308,6 +8755,18 @@
        }
      }
    },
+    "findup-sync": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/findup-sync/-/findup-sync-3.0.0.tgz",
+      "integrity": "sha512-YbffarhcicEhOrm4CtrwdKBdCuz576RLdhJDsIfvNtxUuhdRet1qZcsMjqbePtAseKdAnDyM/IyXbu7PRPRLYg==",
+      "dev": true,
+      "requires": {
+        "detect-file": "^1.0.0",
+        "is-glob": "^4.0.0",
+        "micromatch": "^3.0.4",
+        "resolve-dir": "^1.0.1"
+      }
+    },
    "flat-cache": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-2.0.1.tgz",
@@ -8336,6 +8795,54 @@
      "integrity": "sha512-r5wGx7YeOwNWNlCA0wQ86zKyDLMQr+/RB8xy74M4hTphfmjlijTSSXGuH8rnvKZnfT9i+75zmd8jcKdMR4O6jA==",
      "dev": true
    },
+    "flush-write-stream": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/flush-write-stream/-/flush-write-stream-1.1.1.tgz",
+      "integrity": "sha512-3Z4XhFZ3992uIq0XOqb9AreonueSYphE6oYbpt5+3u06JWklbsPkNv3ZKkP9Bz/r+1MWCaMoSQ28P85+1Yc77w==",
+      "dev": true,
+      "requires": {
+        "inherits": "^2.0.3",
+        "readable-stream": "^2.3.6"
+      },
+      "dependencies": {
+        "isarray": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+          "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
+          "dev": true
+        },
+        "readable-stream": {
+          "version": "2.3.7",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
+          "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==",
+          "dev": true,
+          "requires": {
+            "core-util-is": "~1.0.0",
+            "inherits": "~2.0.3",
+            "isarray": "~1.0.0",
+            "process-nextick-args": "~2.0.0",
+            "safe-buffer": "~5.1.1",
+            "string_decoder": "~1.1.1",
+            "util-deprecate": "~1.0.1"
+          }
+        },
+        "safe-buffer": {
+          "version": "5.1.2",
+          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+          "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+          "dev": true
+        },
+        "string_decoder": {
+          "version": "1.1.1",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+          "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+          "dev": true,
+          "requires": {
+            "safe-buffer": "~5.1.0"
+          }
+        }
+      }
+    },
    "focus-lock": {
      "version": "0.8.1",
      "resolved": "https://registry.npmjs.org/focus-lock/-/focus-lock-0.8.1.tgz",
@@ -8360,12 +8867,6 @@
      "integrity": "sha1-gQaNKVqBQuwKxybG4iAMMPttXoA=",
      "dev": true
    },
-    "foreach": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/foreach/-/foreach-2.0.5.tgz",
-      "integrity": "sha1-C+4AUBiusmDQo6865ljdATbsG5k=",
-      "dev": true
-    },
    "forever-agent": {
      "version": "0.6.1",
      "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz",
@@ -8373,26 +8874,19 @@
      "dev": true
    },
    "fork-ts-checker-webpack-plugin": {
-      "version": "4.1.6",
-      "resolved": "https://registry.npmjs.org/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-4.1.6.tgz",
-      "integrity": "sha512-DUxuQaKoqfNne8iikd14SAkh5uw4+8vNifp6gmA73yYNS6ywLIWSLD/n/mBzHQRpW3J7rbATEakmiA8JvkTyZw==",
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-1.5.0.tgz",
+      "integrity": "sha512-zEhg7Hz+KhZlBhILYpXy+Beu96gwvkROWJiTXOCyOOMMrdBIRPvsBpBqgTI4jfJGrJXcqGwJR8zsBGDmzY0jsA==",
      "dev": true,
      "requires": {
-        "@babel/code-frame": "^7.5.5",
+        "babel-code-frame": "^6.22.0",
        "chalk": "^2.4.1",
+        "chokidar": "^2.0.4",
        "micromatch": "^3.1.10",
        "minimatch": "^3.0.4",
        "semver": "^5.6.0",
        "tapable": "^1.0.0",
        "worker-rpc": "^0.1.0"
-      },
-      "dependencies": {
-        "tapable": {
-          "version": "1.1.3",
-          "resolved": "https://registry.npmjs.org/tapable/-/tapable-1.1.3.tgz",
-          "integrity": "sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA==",
-          "dev": true
-        }
      }
    },
    "form-data": {
@@ -8443,7 +8937,6 @@
      "resolved": "https://registry.npmjs.org/from2/-/from2-2.3.0.tgz",
      "integrity": "sha1-i/tVAr3kpNNs/e6gB/zKIdfjgq8=",
      "dev": true,
-      "optional": true,
      "requires": {
        "inherits": "^2.0.1",
        "readable-stream": "^2.0.0"
@@ -8453,15 +8946,13 @@
          "version": "1.0.0",
          "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
          "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
-          "dev": true,
-          "optional": true
+          "dev": true
        },
        "readable-stream": {
          "version": "2.3.7",
          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
          "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==",
          "dev": true,
-          "optional": true,
          "requires": {
            "core-util-is": "~1.0.0",
            "inherits": "~2.0.3",
@@ -8476,15 +8967,13 @@
          "version": "5.1.2",
          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
          "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
-          "dev": true,
-          "optional": true
+          "dev": true
        },
        "string_decoder": {
          "version": "1.1.1",
          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
          "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
          "dev": true,
-          "optional": true,
          "requires": {
            "safe-buffer": "~5.1.0"
          }
@@ -8510,18 +8999,62 @@
        "universalify": "^2.0.0"
      }
    },
-    "fs-monkey": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/fs-monkey/-/fs-monkey-1.0.1.tgz",
-      "integrity": "sha512-fcSa+wyTqZa46iWweI7/ZiUfegOZl0SG8+dltIwFXo7+zYU9J9kpS3NB6pZcSlJdhvIwp81Adx2XhZorncxiaA==",
-      "dev": true
-    },
    "fs-readdir-recursive": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/fs-readdir-recursive/-/fs-readdir-recursive-1.1.0.tgz",
      "integrity": "sha512-GNanXlVr2pf02+sPN40XN8HG+ePaNcvM0q5mZBd668Obwb0yD5GiUbZOFgwn8kGMY6I3mdyDJzieUy3PTYyTRA==",
      "dev": true
    },
+    "fs-write-stream-atomic": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/fs-write-stream-atomic/-/fs-write-stream-atomic-1.0.10.tgz",
+      "integrity": "sha1-tH31NJPvkR33VzHnCp3tAYnbQMk=",
+      "dev": true,
+      "requires": {
+        "graceful-fs": "^4.1.2",
+        "iferr": "^0.1.5",
+        "imurmurhash": "^0.1.4",
+        "readable-stream": "1 || 2"
+      },
+      "dependencies": {
+        "isarray": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+          "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
+          "dev": true
+        },
+        "readable-stream": {
+          "version": "2.3.7",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
+          "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==",
+          "dev": true,
+          "requires": {
+            "core-util-is": "~1.0.0",
+            "inherits": "~2.0.3",
+            "isarray": "~1.0.0",
+            "process-nextick-args": "~2.0.0",
+            "safe-buffer": "~5.1.1",
+            "string_decoder": "~1.1.1",
+            "util-deprecate": "~1.0.1"
+          }
+        },
+        "safe-buffer": {
+          "version": "5.1.2",
+          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+          "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+          "dev": true
+        },
+        "string_decoder": {
+          "version": "1.1.1",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+          "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+          "dev": true,
+          "requires": {
+            "safe-buffer": "~5.1.0"
+          }
+        }
+      }
+    },
    "fs.realpath": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -8544,35 +9077,60 @@
      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
    },
    "function.prototype.name": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.3.tgz",
-      "integrity": "sha512-H51qkbNSp8mtkJt+nyW1gyStBiKZxfRqySNUR99ylq6BPXHKI4SEvIlTKp4odLfjRKJV04DFWMU3G/YRlQOsag==",
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.4.tgz",
+      "integrity": "sha512-iqy1pIotY/RmhdFZygSSlW0wko2yxkSCKqsuv4pr8QESohpYyG/Z7B/XXvPRKTJS//960rgguE5mSRUsDdaJrQ==",
      "requires": {
-        "call-bind": "^1.0.0",
+        "call-bind": "^1.0.2",
        "define-properties": "^1.1.3",
-        "es-abstract": "^1.18.0-next.1",
-        "functions-have-names": "^1.2.1"
+        "es-abstract": "^1.18.0-next.2",
+        "functions-have-names": "^1.2.2"
      },
      "dependencies": {
        "es-abstract": {
-          "version": "1.18.0-next.2",
-          "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.18.0-next.2.tgz",
-          "integrity": "sha512-Ih4ZMFHEtZupnUh6497zEL4y2+w8+1ljnCyaTa+adcoafI1GOvMwFlDjBLfWR7y9VLfrjRJe9ocuHY1PSR9jjw==",
+          "version": "1.18.0",
+          "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.18.0.tgz",
+          "integrity": "sha512-LJzK7MrQa8TS0ja2w3YNLzUgJCGPdPOV1yVvezjNnS89D+VR08+Szt2mz3YB2Dck/+w5tfIq/RoUAFqJJGM2yw==",
          "requires": {
            "call-bind": "^1.0.2",
            "es-to-primitive": "^1.2.1",
            "function-bind": "^1.1.1",
-            "get-intrinsic": "^1.0.2",
+            "get-intrinsic": "^1.1.1",
            "has": "^1.0.3",
-            "has-symbols": "^1.0.1",
-            "is-callable": "^1.2.2",
+            "has-symbols": "^1.0.2",
+            "is-callable": "^1.2.3",
            "is-negative-zero": "^2.0.1",
-            "is-regex": "^1.1.1",
+            "is-regex": "^1.1.2",
+            "is-string": "^1.0.5",
            "object-inspect": "^1.9.0",
            "object-keys": "^1.1.1",
            "object.assign": "^4.1.2",
-            "string.prototype.trimend": "^1.0.3",
-            "string.prototype.trimstart": "^1.0.3"
+            "string.prototype.trimend": "^1.0.4",
+            "string.prototype.trimstart": "^1.0.4",
+            "unbox-primitive": "^1.0.0"
+          }
+        },
+        "has-symbols": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.2.tgz",
+          "integrity": "sha512-chXa79rL/UC2KlX17jo3vRGz0azaWEx5tGqZg5pO3NUyEJVB17dMruQlzCCOfUvElghKcm5194+BCRvi2Rv/Gw=="
+        },
+        "string.prototype.trimend": {
+          "version": "1.0.4",
+          "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.4.tgz",
+          "integrity": "sha512-y9xCjw1P23Awk8EvTpcyL2NIr1j7wJ39f+k6lvRnSMz+mz9CGz9NYPelDk42kOz6+ql8xjfK8oYzy3jAP5QU5A==",
+          "requires": {
+            "call-bind": "^1.0.2",
+            "define-properties": "^1.1.3"
+          }
+        },
+        "string.prototype.trimstart": {
+          "version": "1.0.4",
+          "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.4.tgz",
+          "integrity": "sha512-jh6e984OBfvxS50tdY2nRZnoC5/mLFKOREQfw8t5yytkoUsJRNxvI/E39qu1sD0OtWI3OC0XgKSmcWwziwYuZw==",
+          "requires": {
+            "call-bind": "^1.0.2",
+            "define-properties": "^1.1.3"
          }
        }
      }
@@ -8723,9 +9281,9 @@
      }
    },
    "glob-to-regexp": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz",
-      "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==",
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.3.0.tgz",
+      "integrity": "sha1-jFoUlNIGbFcMw7/kSWF1rMTVAqs=",
      "dev": true
    },
    "global-modules": {
@@ -8808,9 +9366,9 @@
      }
    },
    "graceful-fs": {
-      "version": "4.2.6",
-      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.6.tgz",
-      "integrity": "sha512-nTnJ528pbqxYanhpDYsi4Rd8MAeaBA67+RZ10CM1m3bTAVFEDcd5AuA4a6W5YkGZ1iNXHzZz8T6TBKLeBuNriQ==",
+      "version": "4.2.5",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.5.tgz",
+      "integrity": "sha512-kBBSQbz2K0Nyn+31j/w36fUfxkBW9/gfwRWdUY1ULReH3iokVJgddZAFcD1D0xlgTmFxJCbUkUclAlc6/IDJkw==",
      "dev": true
    },
    "growly": {
@@ -8882,6 +9440,11 @@
        }
      }
    },
+    "has-bigints": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.1.tgz",
+      "integrity": "sha512-LSBS2LjbNBTf6287JEbEzvJgftkF5qFkmCo9hDRpAzKhUOlJ+hx8dd4USs00SgsUNwc4617J9ki5YtEClM2ffA=="
+    },
    "has-flag": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
@@ -8947,6 +9510,27 @@
        }
      }
    },
+    "hash-base": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/hash-base/-/hash-base-3.1.0.tgz",
+      "integrity": "sha512-1nmYp/rhMDiE7AYkDw+lLwlAzz0AntGIe51F3RfFfEqyQ3feY2eI/NcwC6umIQVOASPMsWJLJScWKSSvzL9IVA==",
+      "dev": true,
+      "requires": {
+        "inherits": "^2.0.4",
+        "readable-stream": "^3.6.0",
+        "safe-buffer": "^5.2.0"
+      }
+    },
+    "hash.js": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/hash.js/-/hash.js-1.1.7.tgz",
+      "integrity": "sha512-taOaskGt4z4SOANNseOviYDvjEJinIkRgmp7LbKP2YTTmVxWBl87s/uzK9r+44BclBSp2X7K1hqeNfz9JbBeXA==",
+      "dev": true,
+      "requires": {
+        "inherits": "^2.0.3",
+        "minimalistic-assert": "^1.0.1"
+      }
+    },
    "he": {
      "version": "1.2.0",
      "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
@@ -8972,6 +9556,17 @@
        "value-equal": "^1.0.1"
      }
    },
+    "hmac-drbg": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
+      "integrity": "sha1-0nRXAQJabHdabFRXk+1QL8DGSaE=",
+      "dev": true,
+      "requires": {
+        "hash.js": "^1.0.3",
+        "minimalistic-assert": "^1.0.0",
+        "minimalistic-crypto-utils": "^1.0.1"
+      }
+    },
    "hoist-non-react-statics": {
      "version": "3.3.2",
      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
@@ -8980,6 +9575,15 @@
        "react-is": "^16.7.0"
      }
    },
+    "homedir-polyfill": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/homedir-polyfill/-/homedir-polyfill-1.0.3.tgz",
+      "integrity": "sha512-eSmmWE5bZTK2Nou4g0AI3zZ9rswp7GRKoKXS1BLUkvPviOqs4YTN1djQIqrXy9k5gEtdLPy86JjRwsNM9tnDcA==",
+      "dev": true,
+      "requires": {
+        "parse-passwd": "^1.0.0"
+      }
+    },
    "hoopy": {
      "version": "0.1.4",
      "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
@@ -9103,17 +9707,52 @@
      "dev": true
    },
    "html-webpack-plugin": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-5.0.0.tgz",
-      "integrity": "sha512-kxTyb8cyZwEyUqXTgdHRUOF4C7uCrquzw2T+YTudehm/yspodgCkREjdmc4dXI8k2P4NEjqOVbnOOlPZg4TKJA==",
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-4.5.0.tgz",
+      "integrity": "sha512-MouoXEYSjTzCrjIxWwg8gxL5fE2X2WZJLmBYXlaJhQUH5K/b5OrqmV7T4dB7iu0xkmJ6JlUuV6fFVtnqbPopZw==",
      "dev": true,
      "requires": {
        "@types/html-minifier-terser": "^5.0.0",
+        "@types/tapable": "^1.0.5",
+        "@types/webpack": "^4.41.8",
        "html-minifier-terser": "^5.0.1",
-        "loader-utils": "^2.0.0",
-        "lodash": "^4.17.20",
+        "loader-utils": "^1.2.3",
+        "lodash": "^4.17.15",
        "pretty-error": "^2.1.1",
-        "tapable": "^2.0.0"
+        "tapable": "^1.1.3",
+        "util.promisify": "1.0.0"
+      },
+      "dependencies": {
+        "json5": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
+          "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
+          "dev": true,
+          "requires": {
+            "minimist": "^1.2.0"
+          }
+        },
+        "loader-utils": {
+          "version": "1.4.0",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.0.tgz",
+          "integrity": "sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==",
+          "dev": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^1.0.1"
+          }
+        },
+        "util.promisify": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/util.promisify/-/util.promisify-1.0.0.tgz",
+          "integrity": "sha512-i+6qA2MPhvoKLuxnJNpXAGhg7HphQOSUq2LKMZD0m15EiskXUkMvKdF4Uui0WYeCUGea+o2cw/ZuwehtfsrNkA==",
+          "dev": true,
+          "requires": {
+            "define-properties": "^1.1.2",
+            "object.getownpropertydescriptors": "^2.0.3"
+          }
+        }
      }
    },
    "htmlparser2": {
@@ -9207,61 +9846,15 @@
      }
    },
    "http-proxy-middleware": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-1.0.6.tgz",
-      "integrity": "sha512-NyL6ZB6cVni7pl+/IT2W0ni5ME00xR0sN27AQZZrpKn1b+qRh+mLbBxIq9Cq1oGfmTc7BUq4HB77mxwCaxAYNg==",
+      "version": "0.19.1",
+      "resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-0.19.1.tgz",
+      "integrity": "sha512-yHYTgWMQO8VvwNS22eLLloAkvungsKdKTLO8AJlftYIKNfJr3GK3zK0ZCfzDDGUBttdGc8xFy1mCitvNKQtC3Q==",
      "dev": true,
      "requires": {
-        "@types/http-proxy": "^1.17.4",
-        "http-proxy": "^1.18.1",
-        "is-glob": "^4.0.1",
-        "lodash": "^4.17.20",
-        "micromatch": "^4.0.2"
-      },
-      "dependencies": {
-        "braces": {
-          "version": "3.0.2",
-          "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-          "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
-          "dev": true,
-          "requires": {
-            "fill-range": "^7.0.1"
-          }
-        },
-        "fill-range": {
-          "version": "7.0.1",
-          "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-          "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
-          "dev": true,
-          "requires": {
-            "to-regex-range": "^5.0.1"
-          }
-        },
-        "is-number": {
-          "version": "7.0.0",
-          "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
-          "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-          "dev": true
-        },
-        "micromatch": {
-          "version": "4.0.2",
-          "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.2.tgz",
-          "integrity": "sha512-y7FpHSbMUMoyPbYUSzO6PaZ6FyRnQOpHuKwbo1G+Knck95XVU4QAiKdGEnj5wwoS7PlOgthX/09u5iFJ+aYf5Q==",
-          "dev": true,
-          "requires": {
-            "braces": "^3.0.1",
-            "picomatch": "^2.0.5"
-          }
-        },
-        "to-regex-range": {
-          "version": "5.0.1",
-          "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
-          "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-          "dev": true,
-          "requires": {
-            "is-number": "^7.0.0"
-          }
-        }
+        "http-proxy": "^1.17.0",
+        "is-glob": "^4.0.0",
+        "lodash": "^4.17.11",
+        "micromatch": "^3.1.10"
      }
    },
    "http-signature": {
@@ -9275,6 +9868,12 @@
        "sshpk": "^1.7.0"
      }
    },
+    "https-browserify": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/https-browserify/-/https-browserify-1.0.0.tgz",
+      "integrity": "sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM=",
+      "dev": true
+    },
    "https-proxy-agent": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-4.0.0.tgz",
@@ -9470,8 +10069,13 @@
      "version": "1.2.1",
      "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
      "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
-      "dev": true,
-      "optional": true
+      "dev": true
+    },
+    "iferr": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/iferr/-/iferr-0.1.5.tgz",
+      "integrity": "sha1-xg7taebY/bazEEofy8ocGS3FtQE=",
+      "dev": true
    },
    "ignore": {
      "version": "4.0.6",
@@ -9783,6 +10387,12 @@
      "integrity": "sha1-8w9xbI4r00bHtn0985FVZqfAVgc=",
      "dev": true
    },
+    "infer-owner": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/infer-owner/-/infer-owner-1.0.4.tgz",
+      "integrity": "sha512-IClj+Xz94+d7irH5qRyfJonOdfTzuDaifE6ZPWfx0N0+/ATZCbuTPq2prFl526urkQd90WyUKIh1DfBQ2hMz9A==",
+      "dev": true
+    },
    "inflight": {
      "version": "1.0.6",
      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
@@ -9885,35 +10495,13 @@
      }
    },
    "internal-ip": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/internal-ip/-/internal-ip-6.2.0.tgz",
-      "integrity": "sha512-D8WGsR6yDt8uq7vDMu7mjcR+yRMm3dW8yufyChmszWRjcSHuxLBkR3GdS2HZAjodsaGuCvXeEJpueisXJULghg==",
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/internal-ip/-/internal-ip-4.3.0.tgz",
+      "integrity": "sha512-S1zBo1D6zcsyuC6PMmY5+55YMILQ9av8lotMx447Bq6SAgo/sDK6y6uUKmuYhW7eacnIhFfsPmCNYdDzsnnDCg==",
      "dev": true,
      "requires": {
-        "default-gateway": "^6.0.0",
-        "ipaddr.js": "^1.9.1",
-        "is-ip": "^3.1.0",
-        "p-event": "^4.2.0"
-      },
-      "dependencies": {
-        "p-event": {
-          "version": "4.2.0",
-          "resolved": "https://registry.npmjs.org/p-event/-/p-event-4.2.0.tgz",
-          "integrity": "sha512-KXatOjCRXXkSePPb1Nbi0p0m+gQAwdlbhi4wQKJPI1HsMQS9g+Sqp2o+QHziPr7eYJyOZet836KoHEVM1mwOrQ==",
-          "dev": true,
-          "requires": {
-            "p-timeout": "^3.1.0"
-          }
-        },
-        "p-timeout": {
-          "version": "3.2.0",
-          "resolved": "https://registry.npmjs.org/p-timeout/-/p-timeout-3.2.0.tgz",
-          "integrity": "sha512-rhIwUycgwwKcP9yTOOFK/AKsAopjjCakVqLHePO3CC6Mir1Z99xT+R63jZxAT5lFZLa2inS5h+ZS2GvR99/FBg==",
-          "dev": true,
-          "requires": {
-            "p-finally": "^1.0.0"
-          }
-        }
+        "default-gateway": "^4.2.0",
+        "ipaddr.js": "^1.9.0"
      }
    },
    "internal-slot": {
@@ -9928,9 +10516,9 @@
      }
    },
    "interpret": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/interpret/-/interpret-2.2.0.tgz",
-      "integrity": "sha512-Ju0Bz/cEia55xDwUWEa8+olFpCiQoypjnQySseKtmjNrnps3P+xfpUmGr90T7yjlVJmOtybRvPXhKMbHr+fWnw==",
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/interpret/-/interpret-1.4.0.tgz",
+      "integrity": "sha512-agE4QfB2Lkp9uICn7BAqoscw4SZP9kTE2hxiFI3jBPmXJfdqiahTbUuKGsMoN2GtqL9AxhYioAcVvgsb1HvRbA==",
      "dev": true
    },
    "intl-format-cache": {
@@ -10037,6 +10625,11 @@
      "integrity": "sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=",
      "dev": true
    },
+    "is-bigint": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-bigint/-/is-bigint-1.0.1.tgz",
+      "integrity": "sha512-J0ELF4yHFxHy0cmSxZuheDOz2luOdVvqjwmEcj8H/L1JHeuEDSDbeRP+Dk9kFVk5RTFzbucJ2Kb9F7ixY2QaCg=="
+    },
    "is-binary-path": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-1.0.1.tgz",
@@ -10046,6 +10639,14 @@
        "binary-extensions": "^1.0.0"
      }
    },
+    "is-boolean-object": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.1.0.tgz",
+      "integrity": "sha512-a7Uprx8UtD+HWdyYwnD1+ExtTgqQtD2k/1yJgtXP6wnMm8byhkoTZRl+95LLThpzNZJ5aEvi46cdH+ayMFRwmA==",
+      "requires": {
+        "call-bind": "^1.0.0"
+      }
+    },
    "is-buffer": {
      "version": "1.1.6",
      "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
@@ -10161,7 +10762,8 @@
      "version": "2.1.1",
      "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.1.1.tgz",
      "integrity": "sha512-ZOoqiXfEwtGknTiuDEy8pN2CfE3TxMHprvNer1mXiqwkOT77Rw3YVrUQ52EqAOU3QAWDQ+bQdx7HJzrv7LS2Hw==",
-      "dev": true
+      "dev": true,
+      "optional": true
    },
    "is-extendable": {
      "version": "0.1.1",
@@ -10194,12 +10796,6 @@
      "integrity": "sha512-cTIB4yPYL/Grw0EaSzASzg6bBy9gqCofvWN8okThAYIxKJZC+udlRAmGbM0XLeniEJSs8uEgHPGuHSe1XsOLSQ==",
      "dev": true
    },
-    "is-generator-function": {
-      "version": "1.0.8",
-      "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.0.8.tgz",
-      "integrity": "sha512-2Omr/twNtufVZFr1GhxjOMFPAj2sjc/dKaIqBhvo4qciXfJmITGH6ZGd8eZYNHza8t1y0e01AuqRhJwfWp26WQ==",
-      "dev": true
-    },
    "is-gif": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/is-gif/-/is-gif-3.0.0.tgz",
@@ -10254,23 +10850,6 @@
        }
      }
    },
-    "is-ip": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/is-ip/-/is-ip-3.1.0.tgz",
-      "integrity": "sha512-35vd5necO7IitFPjd/YBeqwWnyDWbuLH9ZXQdMfDA8TEo7pv5X8yfrvVO3xbJbLUlERCMvf6X0hTUamQxCYJ9Q==",
-      "dev": true,
-      "requires": {
-        "ip-regex": "^4.0.0"
-      },
-      "dependencies": {
-        "ip-regex": {
-          "version": "4.3.0",
-          "resolved": "https://registry.npmjs.org/ip-regex/-/ip-regex-4.3.0.tgz",
-          "integrity": "sha512-B9ZWJxHHOHUhUjCPrMpLD4xEq35bUTClHM1S6CBU5ixQnkZmwipwgc96vAd7AAGM9TGHvJR+Uss+/Ak6UphK+Q==",
-          "dev": true
-        }
-      }
-    },
    "is-jpg": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/is-jpg/-/is-jpg-2.0.0.tgz",
@@ -10310,6 +10889,11 @@
        }
      }
    },
+    "is-number-object": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-number-object/-/is-number-object-1.0.4.tgz",
+      "integrity": "sha512-zohwelOAur+5uXtk8O3GPQ1eAcu4ZX3UwxQhUlfFFMNpUd83gXgjbhJh6HmB6LUNV/ieOLQuDwJO3dWJosUeMw=="
+    },
    "is-obj": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/is-obj/-/is-obj-2.0.0.tgz",
@@ -10412,8 +10996,7 @@
    "is-string": {
      "version": "1.0.5",
      "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.0.5.tgz",
-      "integrity": "sha512-buY6VNRjhQMiF1qWDouloZlQbRhDPCebwxSjxMjxgemYT46YMd2NR0/H+fBhEfWX4A/w9TBJ+ol+okqJKFE6vQ==",
-      "dev": true
+      "integrity": "sha512-buY6VNRjhQMiF1qWDouloZlQbRhDPCebwxSjxMjxgemYT46YMd2NR0/H+fBhEfWX4A/w9TBJ+ol+okqJKFE6vQ=="
    },
    "is-svg": {
      "version": "3.0.0",
@@ -10432,43 +11015,6 @@
        "has-symbols": "^1.0.1"
      }
    },
-    "is-typed-array": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.4.tgz",
-      "integrity": "sha512-ILaRgn4zaSrVNXNGtON6iFNotXW3hAPF3+0fB1usg2jFlWqo5fEDdmJkz0zBfoi7Dgskr8Khi2xZ8cXqZEfXNA==",
-      "dev": true,
-      "requires": {
-        "available-typed-arrays": "^1.0.2",
-        "call-bind": "^1.0.0",
-        "es-abstract": "^1.18.0-next.1",
-        "foreach": "^2.0.5",
-        "has-symbols": "^1.0.1"
-      },
-      "dependencies": {
-        "es-abstract": {
-          "version": "1.18.0-next.2",
-          "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.18.0-next.2.tgz",
-          "integrity": "sha512-Ih4ZMFHEtZupnUh6497zEL4y2+w8+1ljnCyaTa+adcoafI1GOvMwFlDjBLfWR7y9VLfrjRJe9ocuHY1PSR9jjw==",
-          "dev": true,
-          "requires": {
-            "call-bind": "^1.0.2",
-            "es-to-primitive": "^1.2.1",
-            "function-bind": "^1.1.1",
-            "get-intrinsic": "^1.0.2",
-            "has": "^1.0.3",
-            "has-symbols": "^1.0.1",
-            "is-callable": "^1.2.2",
-            "is-negative-zero": "^2.0.1",
-            "is-regex": "^1.1.1",
-            "object-inspect": "^1.9.0",
-            "object-keys": "^1.1.1",
-            "object.assign": "^4.1.2",
-            "string.prototype.trimend": "^1.0.3",
-            "string.prototype.trimstart": "^1.0.3"
-          }
-        }
-      }
-    },
    "is-typedarray": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
@@ -10502,6 +11048,7 @@
      "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
      "integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==",
      "dev": true,
+      "optional": true,
      "requires": {
        "is-docker": "^2.0.0"
      }
@@ -13342,6 +13889,11 @@
        }
      }
    },
+    "js-cookie": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-2.2.1.tgz",
+      "integrity": "sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ=="
+    },
    "js-tokens": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -13621,9 +14173,9 @@
      }
    },
    "loader-runner": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.2.0.tgz",
-      "integrity": "sha512-92+huvxMvYlMzMt0iIOukcwYBFpkYJdpl2xsZ7LrlayO7E8SOv+JJUEK17B/dJIHAOLMfh2dZZ/Y18WgmGtYNw==",
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-2.4.0.tgz",
+      "integrity": "sha512-Jsmr89RcXGIwivFY21FcRrisYZfvLMTWx5kOLc+JTxtpBOG6xML0vzbc6SEQG2FO9/4Fc3wW4LVcB5DmGflaRw==",
      "dev": true
    },
    "loader-utils": {
@@ -13668,9 +14220,9 @@
      "integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA=="
    },
    "lodash-es": {
-      "version": "4.17.20",
-      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.20.tgz",
-      "integrity": "sha512-JD1COMZsq8maT6mnuz1UMV0jvYD0E0aUsSOdrr1/nAG3dhqQXwRRgeW0cSqH1U43INKcqxaiVIQNOUDld7gRDA=="
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
+      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
    },
    "lodash.assignin": {
      "version": "4.2.0",
@@ -13807,6 +14359,12 @@
        }
      }
    },
+    "loglevel": {
+      "version": "1.7.1",
+      "resolved": "https://registry.npmjs.org/loglevel/-/loglevel-1.7.1.tgz",
+      "integrity": "sha512-Hesni4s5UkWkwCGJMQGAh71PaLUmKFM60dHvq0zi/vDhhrzuk+4GgNbTXJ12YYQJn6ZKBDNIjYcuQGKudvqrIw==",
+      "dev": true
+    },
    "longest": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/longest/-/longest-1.0.1.tgz",
@@ -13926,15 +14484,6 @@
        "tmpl": "1.0.x"
      }
    },
-    "map-age-cleaner": {
-      "version": "0.1.3",
-      "resolved": "https://registry.npmjs.org/map-age-cleaner/-/map-age-cleaner-0.1.3.tgz",
-      "integrity": "sha512-bJzx6nMoP6PDLPBFmg7+xRKeFZvFboMrGlxmNj9ClvX53KrmvM5bXFXEWjbz4cz1AFn+jWJ9z/DJSz7hrs0w3w==",
-      "dev": true,
-      "requires": {
-        "p-defer": "^1.0.0"
-      }
-    },
    "map-cache": {
      "version": "0.2.2",
      "resolved": "https://registry.npmjs.org/map-cache/-/map-cache-0.2.2.tgz",
@@ -13975,6 +14524,17 @@
        "is-buffer": "~1.1.6"
      }
    },
+    "md5.js": {
+      "version": "1.3.5",
+      "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",
+      "integrity": "sha512-xitP+WxNPcTTOgnTJcrhM0xvdPepipPSf3I8EIpGKeFLjt3PlJLIDG3u8EX53ZIubkb+5U2+3rELYpEhHhzdkg==",
+      "dev": true,
+      "requires": {
+        "hash-base": "^3.0.0",
+        "inherits": "^2.0.1",
+        "safe-buffer": "^5.1.2"
+      }
+    },
    "mdn-data": {
      "version": "2.0.4",
      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.4.tgz",
@@ -13987,33 +14547,54 @@
      "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=",
      "dev": true
    },
-    "mem": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/mem/-/mem-8.0.0.tgz",
-      "integrity": "sha512-qrcJOe6uD+EW8Wrci1Vdiua/15Xw3n/QnaNXE7varnB6InxSk7nu3/i5jfy3S6kWxr8WYJ6R1o0afMUtvorTsA==",
+    "memory-fs": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.4.1.tgz",
+      "integrity": "sha1-OpoguEYlI+RHz7x+i7gO1me/xVI=",
      "dev": true,
      "requires": {
-        "map-age-cleaner": "^0.1.3",
-        "mimic-fn": "^3.1.0"
+        "errno": "^0.1.3",
+        "readable-stream": "^2.0.1"
      },
      "dependencies": {
-        "mimic-fn": {
-          "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-3.1.0.tgz",
-          "integrity": "sha512-Ysbi9uYW9hFyfrThdDEQuykN4Ey6BuwPD2kpI5ES/nFTDn/98yxYNLZJcgUAKPT/mcrLLKaGzJR9YVxJrIdASQ==",
+        "isarray": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+          "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
          "dev": true
+        },
+        "readable-stream": {
+          "version": "2.3.7",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
+          "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==",
+          "dev": true,
+          "requires": {
+            "core-util-is": "~1.0.0",
+            "inherits": "~2.0.3",
+            "isarray": "~1.0.0",
+            "process-nextick-args": "~2.0.0",
+            "safe-buffer": "~5.1.1",
+            "string_decoder": "~1.1.1",
+            "util-deprecate": "~1.0.1"
+          }
+        },
+        "safe-buffer": {
+          "version": "5.1.2",
+          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+          "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+          "dev": true
+        },
+        "string_decoder": {
+          "version": "1.1.1",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+          "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+          "dev": true,
+          "requires": {
+            "safe-buffer": "~5.1.0"
+          }
        }
      }
    },
-    "memfs": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/memfs/-/memfs-3.2.0.tgz",
-      "integrity": "sha512-f/xxz2TpdKv6uDn6GtHee8ivFyxwxmPuXatBb1FBwxYNuVpbM3k/Y1Z+vC0mH/dIXXrukYfe3qe5J32Dfjg93A==",
-      "dev": true,
-      "requires": {
-        "fs-monkey": "1.0.1"
-      }
-    },
    "meow": {
      "version": "3.7.0",
      "resolved": "https://registry.npmjs.org/meow/-/meow-3.7.0.tgz",
@@ -14192,6 +14773,24 @@
        "lodash.camelcase": "^4.3.0"
      }
    },
+    "miller-rabin": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/miller-rabin/-/miller-rabin-4.0.1.tgz",
+      "integrity": "sha512-115fLhvZVqWwHPbClyntxEVfVDfl9DLLTuJvq3g2O/Oxi8AiNouAHvDSzHS0viUJc+V5vm3eq91Xwqn9dp4jRA==",
+      "dev": true,
+      "requires": {
+        "bn.js": "^4.0.0",
+        "brorand": "^1.0.1"
+      },
+      "dependencies": {
+        "bn.js": {
+          "version": "4.11.9",
+          "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.11.9.tgz",
+          "integrity": "sha512-E6QoYqCKZfgatHTdHzs1RRKP7ip4vvm+EyRUeE2RF0NblwVvb0p6jSVeNTOFxPn26QXN2o6SMfNxKp6kU8zQaw==",
+          "dev": true
+        }
+      }
+    },
    "mime": {
      "version": "1.6.0",
      "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
@@ -14242,17 +14841,37 @@
      }
    },
    "mini-css-extract-plugin": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-1.0.0.tgz",
-      "integrity": "sha512-IsmrPv1nkdSUtFCDrAsuv5kg0k/27sLxfXqSz8vLjnbRKrNgoRdQrUNA4MppawvD+GHLkNP6L1P93Bw50ALkbg==",
+      "version": "0.12.0",
+      "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.12.0.tgz",
+      "integrity": "sha512-z6PQCe9rd1XUwZ8gMaEVwwRyZlrYy8Ba1gRjFP5HcV51HkXX+XlwZ+a1iAYTjSYwgNBXoNR7mhx79mDpOn5fdw==",
      "dev": true,
      "requires": {
-        "loader-utils": "^2.0.0",
+        "loader-utils": "^1.1.0",
        "normalize-url": "1.9.1",
-        "schema-utils": "^3.0.0",
+        "schema-utils": "^1.0.0",
        "webpack-sources": "^1.1.0"
      },
      "dependencies": {
+        "json5": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
+          "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
+          "dev": true,
+          "requires": {
+            "minimist": "^1.2.0"
+          }
+        },
+        "loader-utils": {
+          "version": "1.4.0",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.0.tgz",
+          "integrity": "sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==",
+          "dev": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^1.0.1"
+          }
+        },
        "normalize-url": {
          "version": "1.9.1",
          "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-1.9.1.tgz",
@@ -14276,14 +14895,14 @@
          }
        },
        "schema-utils": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.0.0.tgz",
-          "integrity": "sha512-6D82/xSzO094ajanoOSbe4YvXWMfn2A//8Y1+MUqFAJul5Bs+yn36xbK9OtNDcRVSBJ9jjeoXftM6CfztsjOAA==",
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-1.0.0.tgz",
+          "integrity": "sha512-i27Mic4KovM/lnGsy8whRCHhc7VicJajAjTrYg11K9zfZXnYIt4k5F+kZkwjnrhKzLic/HLU4j11mjsz2G/75g==",
          "dev": true,
          "requires": {
-            "@types/json-schema": "^7.0.6",
-            "ajv": "^6.12.5",
-            "ajv-keywords": "^3.5.2"
+            "ajv": "^6.1.0",
+            "ajv-errors": "^1.0.0",
+            "ajv-keywords": "^3.1.0"
          }
        },
        "strict-uri-encode": {
@@ -14300,6 +14919,12 @@
      "integrity": "sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A==",
      "dev": true
    },
+    "minimalistic-crypto-utils": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/minimalistic-crypto-utils/-/minimalistic-crypto-utils-1.0.1.tgz",
+      "integrity": "sha1-9sAMHAsIIkblxNmd+4x8CDsrWCo=",
+      "dev": true
+    },
    "minimatch": {
      "version": "3.0.4",
      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
@@ -14314,6 +14939,24 @@
      "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
      "dev": true
    },
+    "mississippi": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/mississippi/-/mississippi-3.0.0.tgz",
+      "integrity": "sha512-x471SsVjUtBRtcvd4BzKE9kFC+/2TeWgKCgw0bZcw1b9l2X3QX5vCWgF+KaZaYm87Ss//rHnWryupDrgLvmSkA==",
+      "dev": true,
+      "requires": {
+        "concat-stream": "^1.5.0",
+        "duplexify": "^3.4.2",
+        "end-of-stream": "^1.1.0",
+        "flush-write-stream": "^1.0.0",
+        "from2": "^2.1.0",
+        "parallel-transform": "^1.1.0",
+        "pump": "^3.0.0",
+        "pumpify": "^1.3.3",
+        "stream-each": "^1.1.0",
+        "through2": "^2.0.0"
+      }
+    },
    "mixin-deep": {
      "version": "1.3.2",
      "resolved": "https://registry.npmjs.org/mixin-deep/-/mixin-deep-1.3.2.tgz",
@@ -14344,6 +14987,20 @@
        "minimist": "^1.2.5"
      }
    },
+    "move-concurrently": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
+      "integrity": "sha1-viwAX9oy4LKa8fBdfEszIUxwH5I=",
+      "dev": true,
+      "requires": {
+        "aproba": "^1.1.1",
+        "copy-concurrently": "^1.0.0",
+        "fs-write-stream-atomic": "^1.0.8",
+        "mkdirp": "^0.5.1",
+        "rimraf": "^2.5.4",
+        "run-queue": "^1.0.3"
+      }
+    },
    "mozjpeg": {
      "version": "6.0.1",
      "resolved": "https://registry.npmjs.org/mozjpeg/-/mozjpeg-6.0.1.tgz",
@@ -14484,6 +15141,111 @@
      "integrity": "sha1-h6kGXNs1XTGC2PlM4RGIuCXGijs=",
      "dev": true
    },
+    "node-libs-browser": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/node-libs-browser/-/node-libs-browser-2.2.1.tgz",
+      "integrity": "sha512-h/zcD8H9kaDZ9ALUWwlBUDo6TKF8a7qBSCSEGfjTVIYeqsioSKaAX+BN7NgiMGp6iSIXZ3PxgCu8KS3b71YK5Q==",
+      "dev": true,
+      "requires": {
+        "assert": "^1.1.1",
+        "browserify-zlib": "^0.2.0",
+        "buffer": "^4.3.0",
+        "console-browserify": "^1.1.0",
+        "constants-browserify": "^1.0.0",
+        "crypto-browserify": "^3.11.0",
+        "domain-browser": "^1.1.1",
+        "events": "^3.0.0",
+        "https-browserify": "^1.0.0",
+        "os-browserify": "^0.3.0",
+        "path-browserify": "0.0.1",
+        "process": "^0.11.10",
+        "punycode": "^1.2.4",
+        "querystring-es3": "^0.2.0",
+        "readable-stream": "^2.3.3",
+        "stream-browserify": "^2.0.1",
+        "stream-http": "^2.7.2",
+        "string_decoder": "^1.0.0",
+        "timers-browserify": "^2.0.4",
+        "tty-browserify": "0.0.0",
+        "url": "^0.11.0",
+        "util": "^0.11.0",
+        "vm-browserify": "^1.0.1"
+      },
+      "dependencies": {
+        "buffer": {
+          "version": "4.9.2",
+          "resolved": "https://registry.npmjs.org/buffer/-/buffer-4.9.2.tgz",
+          "integrity": "sha512-xq+q3SRMOxGivLhBNaUdC64hDTQwejJ+H0T/NB1XMtTVEwNTrfFF3gAxiyW0Bu/xWEGhjVKgUcMhCrUy2+uCWg==",
+          "dev": true,
+          "requires": {
+            "base64-js": "^1.0.2",
+            "ieee754": "^1.1.4",
+            "isarray": "^1.0.0"
+          }
+        },
+        "isarray": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+          "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
+          "dev": true
+        },
+        "punycode": {
+          "version": "1.4.1",
+          "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz",
+          "integrity": "sha1-wNWmOycYgArY4esPpSachN1BhF4=",
+          "dev": true
+        },
+        "readable-stream": {
+          "version": "2.3.7",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
+          "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==",
+          "dev": true,
+          "requires": {
+            "core-util-is": "~1.0.0",
+            "inherits": "~2.0.3",
+            "isarray": "~1.0.0",
+            "process-nextick-args": "~2.0.0",
+            "safe-buffer": "~5.1.1",
+            "string_decoder": "~1.1.1",
+            "util-deprecate": "~1.0.1"
+          },
+          "dependencies": {
+            "string_decoder": {
+              "version": "1.1.1",
+              "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+              "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+              "dev": true,
+              "requires": {
+                "safe-buffer": "~5.1.0"
+              }
+            }
+          }
+        },
+        "safe-buffer": {
+          "version": "5.1.2",
+          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+          "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+          "dev": true
+        },
+        "util": {
+          "version": "0.11.1",
+          "resolved": "https://registry.npmjs.org/util/-/util-0.11.1.tgz",
+          "integrity": "sha512-HShAsny+zS2TZfaXxD9tYj4HQGlBezXZMZuM/S5PKLLoZkShZiGk9o5CzukI1LVHZvjdvZ2Sj1aW/Ndn2NB/HQ==",
+          "dev": true,
+          "requires": {
+            "inherits": "2.0.3"
+          },
+          "dependencies": {
+            "inherits": {
+              "version": "2.0.3",
+              "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
+              "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=",
+              "dev": true
+            }
+          }
+        }
+      }
+    },
    "node-modules-regexp": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/node-modules-regexp/-/node-modules-regexp-1.0.0.tgz",
@@ -14719,6 +15481,12 @@
      "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
      "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA=="
    },
+    "object-path": {
+      "version": "0.11.4",
+      "resolved": "https://registry.npmjs.org/object-path/-/object-path-0.11.4.tgz",
+      "integrity": "sha1-NwrnUvvzfePqcKhhwju6iRVpGUk=",
+      "dev": true
+    },
    "object-visit": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/object-visit/-/object-visit-1.0.1.tgz",
@@ -14928,13 +15696,20 @@
      }
    },
    "open": {
-      "version": "7.4.0",
-      "resolved": "https://registry.npmjs.org/open/-/open-7.4.0.tgz",
-      "integrity": "sha512-PGoBCX/lclIWlpS/R2PQuIR4NJoXh6X5AwVzE7WXnWRGvHg7+4TBCgsujUgiPpm0K1y4qvQeWnCWVTpTKZBtvA==",
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/open/-/open-6.4.0.tgz",
+      "integrity": "sha512-IFenVPgF70fSm1keSd2iDBIDIBZkroLeuffXq+wKTzTJlBpesFWojV9lb8mzOfaAzM1sr7HQHuO0vtV0zYekGg==",
      "dev": true,
      "requires": {
-        "is-docker": "^2.0.0",
-        "is-wsl": "^2.1.1"
+        "is-wsl": "^1.1.0"
+      },
+      "dependencies": {
+        "is-wsl": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-1.1.0.tgz",
+          "integrity": "sha1-HxbkqiKwTRM2tmGIpmrzxgDDpm0=",
+          "dev": true
+        }
      }
    },
    "opencollective-postinstall": {
@@ -14949,6 +15724,23 @@
      "integrity": "sha512-ur5UIdyw5Y7yEj9wLzhqXiy6GZ3Mwx0yGI+5sMn2r0N0v3cKJvUmFH5yPP+WXh9e0xfyzyJX95D8l088DNFj7A==",
      "dev": true
    },
+    "opn": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/opn/-/opn-5.5.0.tgz",
+      "integrity": "sha512-PqHpggC9bLV0VeWcdKhkpxY+3JTzetLSqTCWL/z/tFIbI6G8JCjondXklT1JinczLz2Xib62sSp0T/gKT4KksA==",
+      "dev": true,
+      "requires": {
+        "is-wsl": "^1.1.0"
+      },
+      "dependencies": {
+        "is-wsl": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-1.1.0.tgz",
+          "integrity": "sha1-HxbkqiKwTRM2tmGIpmrzxgDDpm0=",
+          "dev": true
+        }
+      }
+    },
    "optionator": {
      "version": "0.8.3",
      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.8.3.tgz",
@@ -14984,6 +15776,12 @@
        "url-parse": "^1.4.3"
      }
    },
+    "os-browserify": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/os-browserify/-/os-browserify-0.3.0.tgz",
+      "integrity": "sha1-hUNzx/XCMVkU/Jv8a9gjj92h7Cc=",
+      "dev": true
+    },
    "os-filter-obj": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/os-filter-obj/-/os-filter-obj-2.0.0.tgz",
@@ -15032,12 +15830,6 @@
      "dev": true,
      "optional": true
    },
-    "p-defer": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/p-defer/-/p-defer-1.0.0.tgz",
-      "integrity": "sha1-n26xgvbJqozXQwBKfU+WsZaw+ww=",
-      "dev": true
-    },
    "p-each-series": {
      "version": "2.2.0",
      "resolved": "https://registry.npmjs.org/p-each-series/-/p-each-series-2.2.0.tgz",
@@ -15114,12 +15906,11 @@
      "dev": true
    },
    "p-retry": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/p-retry/-/p-retry-4.3.0.tgz",
-      "integrity": "sha512-Pow4yaHpOiJou1QcpGcBJhGHiS4782LdDa6GhU91hlaNh3ExOOupjSJcxPQZYmUSZk3Pl2ARz/LRvW8Qu0+3mQ==",
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/p-retry/-/p-retry-3.0.1.tgz",
+      "integrity": "sha512-XE6G4+YTTkT2a0UWb2kjZe8xNwf8bIbnqpc/IS/idOBVhyves0mK5OJgeocjx7q5pvX/6m23xuzVPYT1uGM73w==",
      "dev": true,
      "requires": {
-        "@types/retry": "^0.12.0",
        "retry": "^0.12.0"
      }
    },
@@ -15139,6 +15930,61 @@
      "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
      "dev": true
    },
+    "pako": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
+      "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==",
+      "dev": true
+    },
+    "parallel-transform": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/parallel-transform/-/parallel-transform-1.2.0.tgz",
+      "integrity": "sha512-P2vSmIu38uIlvdcU7fDkyrxj33gTUy/ABO5ZUbGowxNCopBq/OoD42bP4UmMrJoPyk4Uqf0mu3mtWBhHCZD8yg==",
+      "dev": true,
+      "requires": {
+        "cyclist": "^1.0.1",
+        "inherits": "^2.0.3",
+        "readable-stream": "^2.1.5"
+      },
+      "dependencies": {
+        "isarray": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+          "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
+          "dev": true
+        },
+        "readable-stream": {
+          "version": "2.3.7",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
+          "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==",
+          "dev": true,
+          "requires": {
+            "core-util-is": "~1.0.0",
+            "inherits": "~2.0.3",
+            "isarray": "~1.0.0",
+            "process-nextick-args": "~2.0.0",
+            "safe-buffer": "~5.1.1",
+            "string_decoder": "~1.1.1",
+            "util-deprecate": "~1.0.1"
+          }
+        },
+        "safe-buffer": {
+          "version": "5.1.2",
+          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+          "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+          "dev": true
+        },
+        "string_decoder": {
+          "version": "1.1.1",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+          "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+          "dev": true,
+          "requires": {
+            "safe-buffer": "~5.1.0"
+          }
+        }
+      }
+    },
    "param-case": {
      "version": "3.0.4",
      "resolved": "https://registry.npmjs.org/param-case/-/param-case-3.0.4.tgz",
@@ -15166,6 +16012,19 @@
        "callsites": "^3.0.0"
      }
    },
+    "parse-asn1": {
+      "version": "5.1.6",
+      "resolved": "https://registry.npmjs.org/parse-asn1/-/parse-asn1-5.1.6.tgz",
+      "integrity": "sha512-RnZRo1EPU6JBnra2vGHj0yhp6ebyjBZpmUCLHWiFhxlzvBCCpAuZ7elsBp1PVAbQN0/04VD/19rfzlBSwLstMw==",
+      "dev": true,
+      "requires": {
+        "asn1.js": "^5.2.0",
+        "browserify-aes": "^1.0.0",
+        "evp_bytestokey": "^1.0.0",
+        "pbkdf2": "^3.0.3",
+        "safe-buffer": "^5.1.1"
+      }
+    },
    "parse-json": {
      "version": "5.2.0",
      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
@@ -15178,6 +16037,12 @@
        "lines-and-columns": "^1.1.6"
      }
    },
+    "parse-passwd": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/parse-passwd/-/parse-passwd-1.0.0.tgz",
+      "integrity": "sha1-bVuTSkVpk7I9N/QKOC1vFmao5cY=",
+      "dev": true
+    },
    "parse-srcset": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/parse-srcset/-/parse-srcset-1.0.2.tgz",
@@ -15219,6 +16084,12 @@
      "integrity": "sha1-s2PlXoAGym/iF4TS2yK9FdeRfxQ=",
      "dev": true
    },
+    "path-browserify": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-0.0.1.tgz",
+      "integrity": "sha512-BapA40NHICOS+USX9SN4tyhq+A2RrN/Ws5F0Z5aMHDp98Fl86lX8Oti8B7uN93L4Ifv4fHOEA+pQw87gmMO/lQ==",
+      "dev": true
+    },
    "path-dirname": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/path-dirname/-/path-dirname-1.0.2.tgz",
@@ -15268,6 +16139,19 @@
      "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
      "dev": true
    },
+    "pbkdf2": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/pbkdf2/-/pbkdf2-3.1.1.tgz",
+      "integrity": "sha512-4Ejy1OPxi9f2tt1rRV7Go7zmfDQ+ZectEQz3VGUQhgq62HtIRPDyG/JtnwIxs6x3uNMwo2V7q1fMvKjb+Tnpqg==",
+      "dev": true,
+      "requires": {
+        "create-hash": "^1.1.2",
+        "create-hmac": "^1.1.4",
+        "ripemd160": "^2.0.1",
+        "safe-buffer": "^5.0.1",
+        "sha.js": "^2.4.8"
+      }
+    },
    "pend": {
      "version": "1.2.0",
      "resolved": "https://registry.npmjs.org/pend/-/pend-1.2.0.tgz",
@@ -15363,42 +16247,57 @@
      }
    },
    "pkg-up": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/pkg-up/-/pkg-up-3.1.0.tgz",
-      "integrity": "sha512-nDywThFk1i4BQK4twPQ6TA4RT8bDY96yeuCVBWL3ePARCiEKDRSrNGbFIgUJpLp+XeIR65v8ra7WuJOFUBtkMA==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/pkg-up/-/pkg-up-2.0.0.tgz",
+      "integrity": "sha1-yBmscoBZpGHKscOImivjxJoATX8=",
      "dev": true,
      "requires": {
-        "find-up": "^3.0.0"
+        "find-up": "^2.1.0"
      },
      "dependencies": {
        "find-up": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
-          "integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==",
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/find-up/-/find-up-2.1.0.tgz",
+          "integrity": "sha1-RdG35QbHF93UgndaK3eSCjwMV6c=",
          "dev": true,
          "requires": {
-            "locate-path": "^3.0.0"
+            "locate-path": "^2.0.0"
          }
        },
        "locate-path": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
-          "integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==",
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-2.0.0.tgz",
+          "integrity": "sha1-K1aLJl7slExtnA3pw9u7ygNUzY4=",
          "dev": true,
          "requires": {
-            "p-locate": "^3.0.0",
+            "p-locate": "^2.0.0",
            "path-exists": "^3.0.0"
          }
        },
-        "p-locate": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz",
-          "integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==",
+        "p-limit": {
+          "version": "1.3.0",
+          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-1.3.0.tgz",
+          "integrity": "sha512-vvcXsLAJ9Dr5rQOPk7toZQZJApBl2K4J6dANSsEuh6QI41JYcsS/qhTGa9ErIUUgK3WNQoJYvylxvjqmiqEA9Q==",
          "dev": true,
          "requires": {
-            "p-limit": "^2.0.0"
+            "p-try": "^1.0.0"
          }
        },
+        "p-locate": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-2.0.0.tgz",
+          "integrity": "sha1-IKAQOyIqcMj9OcwuWAaA893l7EM=",
+          "dev": true,
+          "requires": {
+            "p-limit": "^1.1.0"
+          }
+        },
+        "p-try": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/p-try/-/p-try-1.0.0.tgz",
+          "integrity": "sha1-y8ec26+P1CKOE/Yh8rGiN8GyB7M=",
+          "dev": true
+        },
        "path-exists": {
          "version": "3.0.0",
          "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
@@ -16214,6 +17113,12 @@
        }
      }
    },
+    "process": {
+      "version": "0.11.10",
+      "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
+      "integrity": "sha1-czIwDoQBYb2j5podHZGn1LwW8YI=",
+      "dev": true
+    },
    "process-nextick-args": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
@@ -16226,6 +17131,12 @@
      "integrity": "sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==",
      "dev": true
    },
+    "promise-inflight": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/promise-inflight/-/promise-inflight-1.0.1.tgz",
+      "integrity": "sha1-mEcocL8igTL8vdhoEputEsPAKeM=",
+      "dev": true
+    },
    "prompts": {
      "version": "2.4.0",
      "resolved": "https://registry.npmjs.org/prompts/-/prompts-2.4.0.tgz",
@@ -16282,6 +17193,12 @@
        "ipaddr.js": "1.9.1"
      }
    },
+    "prr": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",
+      "integrity": "sha1-0/wRS6BplaRexok/SEzrHXj19HY=",
+      "dev": true
+    },
    "pseudomap": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/pseudomap/-/pseudomap-1.0.2.tgz",
@@ -16295,6 +17212,28 @@
      "integrity": "sha512-RIdOzyoavK+hA18OGGWDqUTsCLhtA7IcZ/6NCs4fFJaHBDab+pDDmDIByWFRQJq2Cd7r1OoQxBGKOaztq+hjIQ==",
      "dev": true
    },
+    "public-encrypt": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/public-encrypt/-/public-encrypt-4.0.3.tgz",
+      "integrity": "sha512-zVpa8oKZSz5bTMTFClc1fQOnyyEzpl5ozpi1B5YcvBrdohMjH2rfsBtyXcuNuwjsDIXmBYlF2N5FlJYhR29t8Q==",
+      "dev": true,
+      "requires": {
+        "bn.js": "^4.1.0",
+        "browserify-rsa": "^4.0.0",
+        "create-hash": "^1.1.0",
+        "parse-asn1": "^5.0.0",
+        "randombytes": "^2.0.1",
+        "safe-buffer": "^5.1.2"
+      },
+      "dependencies": {
+        "bn.js": {
+          "version": "4.11.9",
+          "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.11.9.tgz",
+          "integrity": "sha512-E6QoYqCKZfgatHTdHzs1RRKP7ip4vvm+EyRUeE2RF0NblwVvb0p6jSVeNTOFxPn26QXN2o6SMfNxKp6kU8zQaw==",
+          "dev": true
+        }
+      }
+    },
    "pubsub-js": {
      "version": "1.7.0",
      "resolved": "https://registry.npmjs.org/pubsub-js/-/pubsub-js-1.7.0.tgz",
@@ -16310,6 +17249,29 @@
        "once": "^1.3.1"
      }
    },
+    "pumpify": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/pumpify/-/pumpify-1.5.1.tgz",
+      "integrity": "sha512-oClZI37HvuUJJxSKKrC17bZ9Cu0ZYhEAGPsPUy9KlMUmv9dKX2o77RUmq7f3XjIxbwyGwYzbzQ1L2Ks8sIradQ==",
+      "dev": true,
+      "requires": {
+        "duplexify": "^3.6.0",
+        "inherits": "^2.0.3",
+        "pump": "^2.0.0"
+      },
+      "dependencies": {
+        "pump": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/pump/-/pump-2.0.1.tgz",
+          "integrity": "sha512-ruPMNRkN3MHP1cWJc9OWr+T/xDP0jhXYCLfJcBuX54hhfIBnaQmAUMfDcG4DM5UMWByBbJY69QSphm3jtDKIkA==",
+          "dev": true,
+          "requires": {
+            "end-of-stream": "^1.1.0",
+            "once": "^1.3.1"
+          }
+        }
+      }
+    },
    "punycode": {
      "version": "2.1.1",
      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
@@ -16344,6 +17306,12 @@
      "integrity": "sha1-sgmEkgO7Jd+CDadW50cAWHhSFiA=",
      "dev": true
    },
+    "querystring-es3": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/querystring-es3/-/querystring-es3-0.2.1.tgz",
+      "integrity": "sha1-nsYfeQSYdXB9aUFFlv2Qek1xHnM=",
+      "dev": true
+    },
    "querystringify": {
      "version": "2.2.0",
      "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz",
@@ -16359,6 +17327,16 @@
        "safe-buffer": "^5.1.0"
      }
    },
+    "randomfill": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/randomfill/-/randomfill-1.0.4.tgz",
+      "integrity": "sha512-87lcbR8+MhcWcUiQ+9e+Rwx8MyR2P7qnt15ynUlbm3TU/fjbgz4GsvfSUDTemtCCtVCqb4ZcEFlyPNTh9bBTLw==",
+      "dev": true,
+      "requires": {
+        "randombytes": "^2.0.5",
+        "safe-buffer": "^5.1.0"
+      }
+    },
    "range-parser": {
      "version": "1.2.1",
      "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
@@ -16388,28 +17366,38 @@
      }
    },
    "react-bootstrap": {
-      "version": "1.4.3",
-      "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-1.4.3.tgz",
-      "integrity": "sha512-4tYhk26KRnK0myMEp2wvNjOvnHMwWfa6pWFIiCtj9wewYaTxP7TrCf7MwcIMBgUzyX0SJXx6UbbDG0+hObiXNg==",
+      "version": "1.5.2",
+      "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-1.5.2.tgz",
+      "integrity": "sha512-mGKPY5+lLd7Vtkx2VFivoRkPT4xAHazuFfIhJLTEgHlDfIUSePn7qrmpZe5gXH9zvHV0RsBaQ9cLfXjxnZrOpA==",
      "requires": {
-        "@babel/runtime": "^7.4.2",
+        "@babel/runtime": "^7.13.8",
        "@restart/context": "^2.1.4",
-        "@restart/hooks": "^0.3.21",
+        "@restart/hooks": "^0.3.26",
        "@types/classnames": "^2.2.10",
        "@types/invariant": "^2.2.33",
        "@types/prop-types": "^15.7.3",
        "@types/react": ">=16.9.35",
-        "@types/react-transition-group": "^4.4.0",
+        "@types/react-transition-group": "^4.4.1",
        "@types/warning": "^3.0.0",
        "classnames": "^2.2.6",
        "dom-helpers": "^5.1.2",
        "invariant": "^2.2.4",
        "prop-types": "^15.7.2",
        "prop-types-extra": "^1.1.0",
-        "react-overlays": "^4.1.0",
+        "react-overlays": "^5.0.0",
        "react-transition-group": "^4.4.1",
-        "uncontrollable": "^7.0.0",
+        "uncontrollable": "^7.2.1",
        "warning": "^4.0.3"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.13.17",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.13.17.tgz",
+          "integrity": "sha512-NCdgJEelPTSh+FEFylhnP1ylq848l1z9t9N0j1Lfbcw0+KXGjsTvUmkxy+voLLXB5SOKMbLLx4jxYliGrYQseA==",
+          "requires": {
+            "regenerator-runtime": "^0.13.4"
+          }
+        }
      }
    },
    "react-break": {
@@ -16423,158 +17411,317 @@
      }
    },
    "react-clientside-effect": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/react-clientside-effect/-/react-clientside-effect-1.2.4.tgz",
-      "integrity": "sha512-rJEnS+TKyrznJlzJ4XPoWBLITpfJ5ez1t2OqhE9gIiicLlEypgtvhQqksfuh5sq+0n3kCoGGkY9rN3SKu+aGKQ==",
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/react-clientside-effect/-/react-clientside-effect-1.2.5.tgz",
+      "integrity": "sha512-2bL8qFW1TGBHozGGbVeyvnggRpMjibeZM2536AKNENLECutp2yfs44IL8Hmpn8qjFQ2K7A9PnYf3vc7aQq/cPA==",
      "requires": {
        "@babel/runtime": "^7.12.13"
      }
    },
    "react-dev-utils": {
-      "version": "11.0.2",
-      "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-11.0.2.tgz",
-      "integrity": "sha512-xG7GlMoYkrgc2M1kDCHKRywXMDbFnjOB+/VzpytQyYBusEzR8NlGTMmUbvN86k94yyKu5XReHB8eZC2JZrNchQ==",
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-9.1.0.tgz",
+      "integrity": "sha512-X2KYF/lIGyGwP/F/oXgGDF24nxDA2KC4b7AFto+eqzc/t838gpSGiaU8trTqHXOohuLxxc5qi1eDzsl9ucPDpg==",
      "dev": true,
      "requires": {
-        "@babel/code-frame": "7.10.4",
+        "@babel/code-frame": "7.5.5",
        "address": "1.1.2",
-        "browserslist": "4.14.2",
+        "browserslist": "4.7.0",
        "chalk": "2.4.2",
-        "cross-spawn": "7.0.3",
+        "cross-spawn": "6.0.5",
        "detect-port-alt": "1.1.6",
-        "escape-string-regexp": "2.0.0",
-        "filesize": "6.1.0",
-        "find-up": "4.1.0",
-        "fork-ts-checker-webpack-plugin": "4.1.6",
+        "escape-string-regexp": "1.0.5",
+        "filesize": "3.6.1",
+        "find-up": "3.0.0",
+        "fork-ts-checker-webpack-plugin": "1.5.0",
        "global-modules": "2.0.0",
-        "globby": "11.0.1",
+        "globby": "8.0.2",
        "gzip-size": "5.1.1",
-        "immer": "7.0.9",
+        "immer": "1.10.0",
+        "inquirer": "6.5.0",
        "is-root": "2.1.0",
-        "loader-utils": "2.0.0",
-        "open": "^7.0.2",
-        "pkg-up": "3.1.0",
-        "prompts": "2.4.0",
-        "react-error-overlay": "^6.0.9",
+        "loader-utils": "1.2.3",
+        "open": "^6.3.0",
+        "pkg-up": "2.0.0",
+        "react-error-overlay": "^6.0.3",
        "recursive-readdir": "2.2.2",
        "shell-quote": "1.7.2",
-        "strip-ansi": "6.0.0",
+        "sockjs-client": "1.4.0",
+        "strip-ansi": "5.2.0",
        "text-table": "0.2.0"
      },
      "dependencies": {
        "@babel/code-frame": {
-          "version": "7.10.4",
-          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.10.4.tgz",
-          "integrity": "sha512-vG6SvB6oYEhvgisZNFRmRCUkLz11c7rp+tbNTynGqc6mS1d5ATd/sGyV6W0KZZnXRKMTzZDRgQT3Ou9jhpAfUg==",
+          "version": "7.5.5",
+          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.5.5.tgz",
+          "integrity": "sha512-27d4lZoomVyo51VegxI20xZPuSHusqbQag/ztrBC7wegWoQ1nLREPVSKSW8byhTlzTKyNE4ifaTA6lCp7JjpFw==",
          "dev": true,
          "requires": {
-            "@babel/highlight": "^7.10.4"
+            "@babel/highlight": "^7.0.0"
          }
        },
-        "array-union": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
-          "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
+        "@nodelib/fs.stat": {
+          "version": "1.1.3",
+          "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz",
+          "integrity": "sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw==",
+          "dev": true
+        },
+        "ansi-escapes": {
+          "version": "3.2.0",
+          "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-3.2.0.tgz",
+          "integrity": "sha512-cBhpre4ma+U0T1oM5fXg7Dy1Jw7zzwv7lt/GoCpr+hDQJoYnKVPLL4dCvSEFMmQurOQvSrwT7SL/DAlhBI97RQ==",
+          "dev": true
+        },
+        "ansi-regex": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
+          "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
          "dev": true
        },
        "browserslist": {
-          "version": "4.14.2",
-          "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.14.2.tgz",
-          "integrity": "sha512-HI4lPveGKUR0x2StIz+2FXfDk9SfVMrxn6PLh1JeGUwcuoDkdKZebWiyLRJ68iIPDpMI4JLVDf7S7XzslgWOhw==",
+          "version": "4.7.0",
+          "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.7.0.tgz",
+          "integrity": "sha512-9rGNDtnj+HaahxiVV38Gn8n8Lr8REKsel68v1sPFfIGEK6uSXTY3h9acgiT1dZVtOOUtifo/Dn8daDQ5dUgVsA==",
          "dev": true,
          "requires": {
-            "caniuse-lite": "^1.0.30001125",
-            "electron-to-chromium": "^1.3.564",
-            "escalade": "^3.0.2",
-            "node-releases": "^1.1.61"
+            "caniuse-lite": "^1.0.30000989",
+            "electron-to-chromium": "^1.3.247",
+            "node-releases": "^1.1.29"
          }
        },
-        "cross-spawn": {
-          "version": "7.0.3",
-          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
-          "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+        "cli-cursor": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-2.1.0.tgz",
+          "integrity": "sha1-s12sN2R5+sw+lHR9QdDQ9SOP/LU=",
          "dev": true,
          "requires": {
-            "path-key": "^3.1.0",
-            "shebang-command": "^2.0.0",
-            "which": "^2.0.1"
+            "restore-cursor": "^2.0.0"
          }
        },
-        "escape-string-regexp": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz",
-          "integrity": "sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==",
+        "cli-width": {
+          "version": "2.2.1",
+          "resolved": "https://registry.npmjs.org/cli-width/-/cli-width-2.2.1.tgz",
+          "integrity": "sha512-GRMWDxpOB6Dgk2E5Uo+3eEBvtOOlimMmpbFiKuLFnQzYDavtLFY3K5ona41jgN/WdRZtG7utuVSVTL4HbZHGkw==",
          "dev": true
        },
-        "globby": {
-          "version": "11.0.1",
-          "resolved": "https://registry.npmjs.org/globby/-/globby-11.0.1.tgz",
-          "integrity": "sha512-iH9RmgwCmUJHi2z5o2l3eTtGBtXek1OYlHrbcxOYugyHLmAsZrPj43OtHThd62Buh/Vv6VyCBD2bdyWcGNQqoQ==",
+        "dir-glob": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-2.0.0.tgz",
+          "integrity": "sha512-37qirFDz8cA5fimp9feo43fSuRo2gHwaIn6dXL8Ber1dGwUosDrGZeCCXq57WnIqE4aQ+u3eQZzsk1yOzhdwag==",
          "dev": true,
          "requires": {
-            "array-union": "^2.1.0",
-            "dir-glob": "^3.0.1",
-            "fast-glob": "^3.1.1",
-            "ignore": "^5.1.4",
-            "merge2": "^1.3.0",
-            "slash": "^3.0.0"
+            "arrify": "^1.0.1",
+            "path-type": "^3.0.0"
+          }
+        },
+        "emojis-list": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-2.1.0.tgz",
+          "integrity": "sha1-TapNnbAPmBmIDHn6RXrlsJof04k=",
+          "dev": true
+        },
+        "fast-glob": {
+          "version": "2.2.7",
+          "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-2.2.7.tgz",
+          "integrity": "sha512-g1KuQwHOZAmOZMuBtHdxDtju+T2RT8jgCC9aANsbpdiDDTSnjgfuVsIBNKbUeJI3oKMRExcfNDtJl4OhbffMsw==",
+          "dev": true,
+          "requires": {
+            "@mrmlnc/readdir-enhanced": "^2.2.1",
+            "@nodelib/fs.stat": "^1.1.2",
+            "glob-parent": "^3.1.0",
+            "is-glob": "^4.0.0",
+            "merge2": "^1.2.3",
+            "micromatch": "^3.1.10"
+          }
+        },
+        "figures": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/figures/-/figures-2.0.0.tgz",
+          "integrity": "sha1-OrGi0qYsi/tDGgyUy3l6L84nyWI=",
+          "dev": true,
+          "requires": {
+            "escape-string-regexp": "^1.0.5"
+          }
+        },
+        "find-up": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
+          "integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==",
+          "dev": true,
+          "requires": {
+            "locate-path": "^3.0.0"
+          }
+        },
+        "globby": {
+          "version": "8.0.2",
+          "resolved": "https://registry.npmjs.org/globby/-/globby-8.0.2.tgz",
+          "integrity": "sha512-yTzMmKygLp8RUpG1Ymu2VXPSJQZjNAZPD4ywgYEaG7e4tBJeUQBO8OpXrf1RCNcEs5alsoJYPAMiIHP0cmeC7w==",
+          "dev": true,
+          "requires": {
+            "array-union": "^1.0.1",
+            "dir-glob": "2.0.0",
+            "fast-glob": "^2.0.2",
+            "glob": "^7.1.2",
+            "ignore": "^3.3.5",
+            "pify": "^3.0.0",
+            "slash": "^1.0.0"
          }
        },
        "ignore": {
-          "version": "5.1.8",
-          "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.1.8.tgz",
-          "integrity": "sha512-BMpfD7PpiETpBl/A6S498BaIJ6Y/ABT93ETbby2fP00v4EbvPBXWEoaR1UBPKs3iR53pJY7EtZk5KACI57i1Uw==",
+          "version": "3.3.10",
+          "resolved": "https://registry.npmjs.org/ignore/-/ignore-3.3.10.tgz",
+          "integrity": "sha512-Pgs951kaMm5GXP7MOvxERINe3gsaVjUWFm+UZPSq9xYriQAksyhg0csnS0KXSNRD5NmNdapXEpjxG49+AKh/ug==",
          "dev": true
        },
        "immer": {
-          "version": "7.0.9",
-          "resolved": "https://registry.npmjs.org/immer/-/immer-7.0.9.tgz",
-          "integrity": "sha512-Vs/gxoM4DqNAYR7pugIxi0Xc8XAun/uy7AQu4fLLqaTBHxjOP9pJ266Q9MWA/ly4z6rAFZbvViOtihxUZ7O28A==",
+          "version": "1.10.0",
+          "resolved": "https://registry.npmjs.org/immer/-/immer-1.10.0.tgz",
+          "integrity": "sha512-O3sR1/opvCDGLEVcvrGTMtLac8GJ5IwZC4puPrLuRj3l7ICKvkmA0vGuU9OW8mV9WIBRnaxp5GJh9IEAaNOoYg==",
          "dev": true
        },
-        "path-key": {
-          "version": "3.1.1",
-          "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
-          "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-          "dev": true
-        },
-        "shebang-command": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
-          "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+        "inquirer": {
+          "version": "6.5.0",
+          "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-6.5.0.tgz",
+          "integrity": "sha512-scfHejeG/lVZSpvCXpsB4j/wQNPM5JC8kiElOI0OUTwmc1RTpXr4H32/HOlQHcZiYl2z2VElwuCVDRG8vFmbnA==",
          "dev": true,
          "requires": {
-            "shebang-regex": "^3.0.0"
+            "ansi-escapes": "^3.2.0",
+            "chalk": "^2.4.2",
+            "cli-cursor": "^2.1.0",
+            "cli-width": "^2.0.0",
+            "external-editor": "^3.0.3",
+            "figures": "^2.0.0",
+            "lodash": "^4.17.12",
+            "mute-stream": "0.0.7",
+            "run-async": "^2.2.0",
+            "rxjs": "^6.4.0",
+            "string-width": "^2.1.0",
+            "strip-ansi": "^5.1.0",
+            "through": "^2.3.6"
          }
        },
-        "shebang-regex": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
-          "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+        "is-fullwidth-code-point": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
+          "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=",
          "dev": true
        },
+        "json5": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
+          "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
+          "dev": true,
+          "requires": {
+            "minimist": "^1.2.0"
+          }
+        },
+        "loader-utils": {
+          "version": "1.2.3",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.2.3.tgz",
+          "integrity": "sha512-fkpz8ejdnEMG3s37wGL07iSBDg99O9D5yflE9RGNH3hRdx9SOwYfnGYdZOUIZitN8E+E2vkq3MUMYMvPYl5ZZA==",
+          "dev": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^2.0.0",
+            "json5": "^1.0.1"
+          }
+        },
+        "locate-path": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
+          "integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==",
+          "dev": true,
+          "requires": {
+            "p-locate": "^3.0.0",
+            "path-exists": "^3.0.0"
+          }
+        },
+        "mimic-fn": {
+          "version": "1.2.0",
+          "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-1.2.0.tgz",
+          "integrity": "sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ==",
+          "dev": true
+        },
+        "mute-stream": {
+          "version": "0.0.7",
+          "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.7.tgz",
+          "integrity": "sha1-MHXOk7whuPq0PhvE2n6BFe0ee6s=",
+          "dev": true
+        },
+        "onetime": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/onetime/-/onetime-2.0.1.tgz",
+          "integrity": "sha1-BnQoIw/WdEOyeUsiu6UotoZ5YtQ=",
+          "dev": true,
+          "requires": {
+            "mimic-fn": "^1.0.0"
+          }
+        },
+        "p-locate": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz",
+          "integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==",
+          "dev": true,
+          "requires": {
+            "p-limit": "^2.0.0"
+          }
+        },
+        "path-exists": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
+          "integrity": "sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=",
+          "dev": true
+        },
+        "path-type": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/path-type/-/path-type-3.0.0.tgz",
+          "integrity": "sha512-T2ZUsdZFHgA3u4e5PfPbjd7HDDpxPnQb5jN0SrDsjNSuVXHJqtwTnWqG0B1jZrgmJ/7lj1EmVIByWt1gxGkWvg==",
+          "dev": true,
+          "requires": {
+            "pify": "^3.0.0"
+          }
+        },
+        "pify": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
+          "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=",
+          "dev": true
+        },
+        "restore-cursor": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-2.0.0.tgz",
+          "integrity": "sha1-n37ih/gv0ybU/RYpI9YhKe7g368=",
+          "dev": true,
+          "requires": {
+            "onetime": "^2.0.0",
+            "signal-exit": "^3.0.2"
+          }
+        },
        "slash": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
-          "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/slash/-/slash-1.0.0.tgz",
+          "integrity": "sha1-xB8vbDn8FtHNF61LXYlhFK5HDVU=",
          "dev": true
        },
-        "strip-ansi": {
-          "version": "6.0.0",
-          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz",
-          "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==",
+        "string-width": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz",
+          "integrity": "sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==",
          "dev": true,
          "requires": {
-            "ansi-regex": "^5.0.0"
-          }
-        },
-        "which": {
-          "version": "2.0.2",
-          "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
-          "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-          "dev": true,
-          "requires": {
-            "isexe": "^2.0.0"
+            "is-fullwidth-code-point": "^2.0.0",
+            "strip-ansi": "^4.0.0"
+          },
+          "dependencies": {
+            "strip-ansi": {
+              "version": "4.0.0",
+              "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
+              "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
+              "dev": true,
+              "requires": {
+                "ansi-regex": "^3.0.0"
+              }
+            }
          }
        }
      }
@@ -16615,16 +17762,16 @@
      }
    },
    "react-focus-on": {
-      "version": "3.5.1",
-      "resolved": "https://registry.npmjs.org/react-focus-on/-/react-focus-on-3.5.1.tgz",
-      "integrity": "sha512-6iE56nYNwVU6Pke362TjqRLz/G7DBGnEugkxhPAhpXEZW5og3vhc9qDPlyiHgxoiY9kYTWjdAEFz4nJgSluANg==",
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/react-focus-on/-/react-focus-on-3.5.2.tgz",
+      "integrity": "sha512-tpPxLqw9tEuElWmcr5jqw/ULfJjdHEnom0nBW9p6y75Zsa0wOfwQNqCHqCoJcHUqSBtKXqTuYduZoSTfTOTdJw==",
      "requires": {
-        "aria-hidden": "^1.1.1",
-        "react-focus-lock": "^2.3.1",
-        "react-remove-scroll": "^2.4.0",
-        "react-style-singleton": "^2.1.0",
-        "use-callback-ref": "^1.2.3",
-        "use-sidecar": "^1.0.1"
+        "aria-hidden": "^1.1.2",
+        "react-focus-lock": "^2.5.0",
+        "react-remove-scroll": "^2.4.1",
+        "react-style-singleton": "^2.1.1",
+        "use-callback-ref": "^1.2.5",
+        "use-sidecar": "^1.0.5"
      }
    },
    "react-helmet": {
@@ -16661,18 +17808,44 @@
      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
    },
    "react-overlays": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/react-overlays/-/react-overlays-4.1.1.tgz",
-      "integrity": "sha512-WtJifh081e6M24KnvTQoNjQEpz7HoLxqt8TwZM7LOYIkYJ8i/Ly1Xi7RVte87ZVnmqQ4PFaFiNHZhSINPSpdBQ==",
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/react-overlays/-/react-overlays-5.0.1.tgz",
+      "integrity": "sha512-plwUJieTBbLSrgvQ4OkkbTD/deXgxiJdNuKzo6n1RWE3OVnQIU5hffCGS/nvIuu6LpXFs2majbzaXY8rcUVdWA==",
      "requires": {
-        "@babel/runtime": "^7.12.1",
-        "@popperjs/core": "^2.5.3",
-        "@restart/hooks": "^0.3.25",
+        "@babel/runtime": "^7.13.8",
+        "@popperjs/core": "^2.8.6",
+        "@restart/hooks": "^0.3.26",
        "@types/warning": "^3.0.0",
        "dom-helpers": "^5.2.0",
        "prop-types": "^15.7.2",
-        "uncontrollable": "^7.0.0",
+        "uncontrollable": "^7.2.1",
        "warning": "^4.0.3"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.13.17",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.13.17.tgz",
+          "integrity": "sha512-NCdgJEelPTSh+FEFylhnP1ylq848l1z9t9N0j1Lfbcw0+KXGjsTvUmkxy+voLLXB5SOKMbLLx4jxYliGrYQseA==",
+          "requires": {
+            "regenerator-runtime": "^0.13.4"
+          }
+        }
+      }
+    },
+    "react-popper": {
+      "version": "2.2.5",
+      "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.2.5.tgz",
+      "integrity": "sha512-kxGkS80eQGtLl18+uig1UIf9MKixFSyPxglsgLBxlYnyDf65BiY9B3nZSc6C9XUNDgStROB0fMQlTEz1KxGddw==",
+      "requires": {
+        "react-fast-compare": "^3.0.1",
+        "warning": "^4.0.2"
+      },
+      "dependencies": {
+        "react-fast-compare": {
+          "version": "3.2.0",
+          "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz",
+          "integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA=="
+        }
      }
    },
    "react-proptype-conditional-require": {
@@ -16705,9 +17878,9 @@
      }
    },
    "react-remove-scroll-bar": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/react-remove-scroll-bar/-/react-remove-scroll-bar-2.1.1.tgz",
-      "integrity": "sha512-IZbfQPSozIr8ylHE9MFcQeb2TTzj4abfE7OBXjmtUeXQ5h6ColGKDNo5h7OmzrJRilAx3YIKBf3jb0yrb31BJQ==",
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll-bar/-/react-remove-scroll-bar-2.2.0.tgz",
+      "integrity": "sha512-UU9ZBP1wdMR8qoUs7owiVcpaPwsQxUDC2lypP6mmixaGlARZa7ZIBx1jcuObLdhMOvCsnZcvetOho0wzPa9PYg==",
      "requires": {
        "react-style-singleton": "^2.1.0",
        "tslib": "^1.0.0"
@@ -16778,6 +17951,11 @@
        "tslib": "^1.0.0"
      }
    },
+    "react-table": {
+      "version": "7.7.0",
+      "resolved": "https://registry.npmjs.org/react-table/-/react-table-7.7.0.tgz",
+      "integrity": "sha512-jBlj70iBwOTvvImsU9t01LjFjy4sXEtclBovl3mTiqjz23Reu0DKnRza4zlLtOPACx6j2/7MrQIthIK1Wi+LIA=="
+    },
    "react-transition-group": {
      "version": "4.4.1",
      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.1.tgz",
@@ -16952,15 +18130,6 @@
        "util.promisify": "^1.0.0"
      }
    },
-    "rechoir": {
-      "version": "0.7.0",
-      "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.7.0.tgz",
-      "integrity": "sha512-ADsDEH2bvbjltXEP+hTIAmeFekTFK0V2BTxMkok6qILyAJEXV0AFfoWcAq4yfll5VdIMd/RVXq0lR+wQi5ZU3Q==",
-      "dev": true,
-      "requires": {
-        "resolve": "^1.9.0"
-      }
-    },
    "recursive-readdir": {
      "version": "2.2.2",
      "resolved": "https://registry.npmjs.org/recursive-readdir/-/recursive-readdir-2.2.2.tgz",
@@ -17040,9 +18209,9 @@
      }
    },
    "regex-parser": {
-      "version": "2.2.11",
-      "resolved": "https://registry.npmjs.org/regex-parser/-/regex-parser-2.2.11.tgz",
-      "integrity": "sha512-jbD/FT0+9MBU2XAZluI7w2OBs1RBi6p9M83nkoZayQXXU9e8Robt69FcZc7wU4eJD/YFTjn1JdCk3rbMJajz8Q==",
+      "version": "2.2.10",
+      "resolved": "https://registry.npmjs.org/regex-parser/-/regex-parser-2.2.10.tgz",
+      "integrity": "sha512-8t6074A68gHfU8Neftl0Le6KTDwfGAj7IyjPIMSfikI2wJUTHDMaIq42bUsfVnj8mhx0R+45rdUXHGpN164avA==",
      "dev": true
    },
    "regexp.prototype.flags": {
@@ -17373,6 +18542,42 @@
        }
      }
    },
+    "resolve-dir": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/resolve-dir/-/resolve-dir-1.0.1.tgz",
+      "integrity": "sha1-eaQGRMNivoLybv/nOcm7U4IEb0M=",
+      "dev": true,
+      "requires": {
+        "expand-tilde": "^2.0.0",
+        "global-modules": "^1.0.0"
+      },
+      "dependencies": {
+        "global-modules": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/global-modules/-/global-modules-1.0.0.tgz",
+          "integrity": "sha512-sKzpEkf11GpOFuw0Zzjzmt4B4UZwjOcG757PPvrfhxcLFbq0wpsgpOqxpxtxFiCG4DtG93M6XRVbF2oGdev7bg==",
+          "dev": true,
+          "requires": {
+            "global-prefix": "^1.0.1",
+            "is-windows": "^1.0.1",
+            "resolve-dir": "^1.0.0"
+          }
+        },
+        "global-prefix": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/global-prefix/-/global-prefix-1.0.2.tgz",
+          "integrity": "sha1-2/dDxsFJklk8ZVVoy2btMsASLr4=",
+          "dev": true,
+          "requires": {
+            "expand-tilde": "^2.0.2",
+            "homedir-polyfill": "^1.0.1",
+            "ini": "^1.3.4",
+            "is-windows": "^1.0.1",
+            "which": "^1.2.14"
+          }
+        }
+      }
+    },
    "resolve-from": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
@@ -17391,12 +18596,12 @@
      "dev": true
    },
    "resolve-url-loader": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/resolve-url-loader/-/resolve-url-loader-3.1.2.tgz",
-      "integrity": "sha512-QEb4A76c8Mi7I3xNKXlRKQSlLBwjUV/ULFMP+G7n3/7tJZ8MG5wsZ3ucxP1Jz8Vevn6fnJsxDx9cIls+utGzPQ==",
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/resolve-url-loader/-/resolve-url-loader-3.1.1.tgz",
+      "integrity": "sha512-K1N5xUjj7v0l2j/3Sgs5b8CjrrgtC70SmdCuZiJ8tSyb5J+uk3FoeZ4b7yTnH6j7ngI+Bc5bldHJIa8hYdu2gQ==",
      "dev": true,
      "requires": {
-        "adjust-sourcemap-loader": "3.0.0",
+        "adjust-sourcemap-loader": "2.0.0",
        "camelcase": "5.3.1",
        "compose-function": "3.0.3",
        "convert-source-map": "1.7.0",
@@ -17536,6 +18741,16 @@
        "glob": "^7.1.3"
      }
    },
+    "ripemd160": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/ripemd160/-/ripemd160-2.0.2.tgz",
+      "integrity": "sha512-ii4iagi25WusVoiC4B4lq7pbXfAp3D9v5CwfkY33vffw2+pkDjY1D8GaN7spsxvCSx8dkPqOZCEZyfxcmJG2IA==",
+      "dev": true,
+      "requires": {
+        "hash-base": "^3.0.0",
+        "inherits": "^2.0.1"
+      }
+    },
    "rosie": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/rosie/-/rosie-2.0.1.tgz",
@@ -17607,6 +18822,15 @@
      "integrity": "sha512-zb/1OuZ6flOlH6tQyMPUrE3x3Ulxjlo9WIVXR4yVYi4H9UXQaeIsPbLn2R3O3vQCnDKkAl2qHiuocKKX4Tz/Sw==",
      "dev": true
    },
+    "run-queue": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/run-queue/-/run-queue-1.0.3.tgz",
+      "integrity": "sha1-6Eg5bwV9Ij8kOGkkYY4laUFh7Ec=",
+      "dev": true,
+      "requires": {
+        "aproba": "^1.1.1"
+      }
+    },
    "rx": {
      "version": "4.1.0",
      "resolved": "https://registry.npmjs.org/rx/-/rx-4.1.0.tgz",
@@ -17680,15 +18904,15 @@
      }
    },
    "sass-loader": {
-      "version": "10.0.5",
-      "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-10.0.5.tgz",
-      "integrity": "sha512-2LqoNPtKkZq/XbXNQ4C64GFEleSEHKv6NPSI+bMC/l+jpEXGJhiRYkAQToO24MR7NU4JRY2RpLpJ/gjo2Uf13w==",
+      "version": "10.0.2",
+      "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-10.0.2.tgz",
+      "integrity": "sha512-wV6NDUVB8/iEYMalV/+139+vl2LaRFlZGEd5/xmdcdzQcgmis+npyco6NsDTVOlNA3y2NV9Gcz+vHyFMIT+ffg==",
      "dev": true,
      "requires": {
-        "klona": "^2.0.4",
+        "klona": "^2.0.3",
        "loader-utils": "^2.0.0",
        "neo-async": "^2.6.2",
-        "schema-utils": "^3.0.0",
+        "schema-utils": "^2.7.1",
        "semver": "^7.3.2"
      },
      "dependencies": {
@@ -17701,17 +18925,6 @@
            "yallist": "^4.0.0"
          }
        },
-        "schema-utils": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.0.0.tgz",
-          "integrity": "sha512-6D82/xSzO094ajanoOSbe4YvXWMfn2A//8Y1+MUqFAJul5Bs+yn36xbK9OtNDcRVSBJ9jjeoXftM6CfztsjOAA==",
-          "dev": true,
-          "requires": {
-            "@types/json-schema": "^7.0.6",
-            "ajv": "^6.12.5",
-            "ajv-keywords": "^3.5.2"
-          }
-        },
        "semver": {
          "version": "7.3.4",
          "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.4.tgz",
@@ -17857,9 +19070,9 @@
      }
    },
    "serialize-javascript": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-5.0.1.tgz",
-      "integrity": "sha512-SaaNal9imEO737H2c05Og0/8LUXG7EnsZyMa8MzkmuHoELfT6txuj0cMqRj6zfPKnmQ1yasR4PCJc8x+M4JSPA==",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-4.0.0.tgz",
+      "integrity": "sha512-GaNA54380uFefWghODBWEGisLZFj00nS5ACs6yHa9nLqlLpVLO8ChDGeKRjZnV4Nh4n0Qi7nhYZD/9fCPzEqkw==",
      "dev": true,
      "requires": {
        "randombytes": "^2.1.0"
@@ -17947,12 +19160,28 @@
        }
      }
    },
+    "setimmediate": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
+      "integrity": "sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU=",
+      "dev": true
+    },
    "setprototypeof": {
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.1.tgz",
      "integrity": "sha512-JvdAWfbXeIGaZ9cILp38HntZSFSo3mWg6xGcJJsd+d4aRMOqauag1C63dJfDw7OaMYwEbHMOxEZ1lqVRYP2OAw==",
      "dev": true
    },
+    "sha.js": {
+      "version": "2.4.11",
+      "resolved": "https://registry.npmjs.org/sha.js/-/sha.js-2.4.11.tgz",
+      "integrity": "sha512-QMEp5B7cftE7APOjk5Y6xgrbWu+WkLVQwk8JNjZ8nKRciZaByEW6MubieAiToS7+dwvrjGhH8jRXz3MVd0AYqQ==",
+      "dev": true,
+      "requires": {
+        "inherits": "^2.0.1",
+        "safe-buffer": "^5.0.1"
+      }
+    },
    "shallow-clone": {
      "version": "3.0.1",
      "resolved": "https://registry.npmjs.org/shallow-clone/-/shallow-clone-3.0.1.tgz",
@@ -18168,28 +19397,48 @@
      }
    },
    "sockjs": {
-      "version": "0.3.21",
-      "resolved": "https://registry.npmjs.org/sockjs/-/sockjs-0.3.21.tgz",
-      "integrity": "sha512-DhbPFGpxjc6Z3I+uX07Id5ZO2XwYsWOrYjaSeieES78cq+JaJvVe5q/m1uvjIQhXinhIeCFRH6JgXe+mvVMyXw==",
+      "version": "0.3.20",
+      "resolved": "https://registry.npmjs.org/sockjs/-/sockjs-0.3.20.tgz",
+      "integrity": "sha512-SpmVOVpdq0DJc0qArhF3E5xsxvaiqGNb73XfgBpK1y3UD5gs8DSo8aCTsuT5pX8rssdc2NDIzANwP9eCAiSdTA==",
      "dev": true,
      "requires": {
-        "faye-websocket": "^0.11.3",
+        "faye-websocket": "^0.10.0",
        "uuid": "^3.4.0",
-        "websocket-driver": "^0.7.4"
+        "websocket-driver": "0.6.5"
+      },
+      "dependencies": {
+        "faye-websocket": {
+          "version": "0.10.0",
+          "resolved": "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.10.0.tgz",
+          "integrity": "sha1-TkkvjQTftviQA1B/btvy1QHnxvQ=",
+          "dev": true,
+          "requires": {
+            "websocket-driver": ">=0.5.1"
+          }
+        },
+        "websocket-driver": {
+          "version": "0.6.5",
+          "resolved": "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.6.5.tgz",
+          "integrity": "sha1-XLJVbOuF9Dc8bYI4qmkchFThOjY=",
+          "dev": true,
+          "requires": {
+            "websocket-extensions": ">=0.1.1"
+          }
+        }
      }
    },
    "sockjs-client": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/sockjs-client/-/sockjs-client-1.5.0.tgz",
-      "integrity": "sha512-8Dt3BDi4FYNrCFGTL/HtwVzkARrENdwOUf1ZoW/9p3M8lZdFT35jVdrHza+qgxuG9H3/shR4cuX/X9umUrjP8Q==",
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/sockjs-client/-/sockjs-client-1.4.0.tgz",
+      "integrity": "sha512-5zaLyO8/nri5cua0VtOrFXBPK1jbL4+1cebT/mmKA1E1ZXOvJrII75bPu0l0k843G/+iAbhEqzyKr0w/eCCj7g==",
      "dev": true,
      "requires": {
-        "debug": "^3.2.6",
+        "debug": "^3.2.5",
        "eventsource": "^1.0.7",
-        "faye-websocket": "^0.11.3",
-        "inherits": "^2.0.4",
-        "json3": "^3.3.3",
-        "url-parse": "^1.4.7"
+        "faye-websocket": "~0.11.1",
+        "inherits": "^2.0.3",
+        "json3": "^3.3.2",
+        "url-parse": "^1.4.3"
      },
      "dependencies": {
        "debug": {
@@ -18499,6 +19748,15 @@
        "tweetnacl": "~0.14.0"
      }
    },
+    "ssri": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/ssri/-/ssri-6.0.1.tgz",
+      "integrity": "sha512-3Wge10hNcT1Kur4PDFwEieXSCMCJs/7WvSACcrMYrNp+b8kDL1/0wJch5Ni2WrtwEa2IO8OsVfeKIciKCDx/QA==",
+      "dev": true,
+      "requires": {
+        "figgy-pudding": "^3.5.1"
+      }
+    },
    "stable": {
      "version": "0.1.8",
      "resolved": "https://registry.npmjs.org/stable/-/stable-0.1.8.tgz",
@@ -18561,6 +19819,64 @@
      "integrity": "sha1-NbCYdbT/SfJqd35QmzCQoyJr8ks=",
      "dev": true
    },
+    "stream-browserify": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/stream-browserify/-/stream-browserify-2.0.2.tgz",
+      "integrity": "sha512-nX6hmklHs/gr2FuxYDltq8fJA1GDlxKQCz8O/IM4atRqBH8OORmBNgfvW5gG10GT/qQ9u0CzIvr2X5Pkt6ntqg==",
+      "dev": true,
+      "requires": {
+        "inherits": "~2.0.1",
+        "readable-stream": "^2.0.2"
+      },
+      "dependencies": {
+        "isarray": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+          "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
+          "dev": true
+        },
+        "readable-stream": {
+          "version": "2.3.7",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
+          "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==",
+          "dev": true,
+          "requires": {
+            "core-util-is": "~1.0.0",
+            "inherits": "~2.0.3",
+            "isarray": "~1.0.0",
+            "process-nextick-args": "~2.0.0",
+            "safe-buffer": "~5.1.1",
+            "string_decoder": "~1.1.1",
+            "util-deprecate": "~1.0.1"
+          }
+        },
+        "safe-buffer": {
+          "version": "5.1.2",
+          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+          "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+          "dev": true
+        },
+        "string_decoder": {
+          "version": "1.1.1",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+          "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+          "dev": true,
+          "requires": {
+            "safe-buffer": "~5.1.0"
+          }
+        }
+      }
+    },
+    "stream-each": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/stream-each/-/stream-each-1.2.3.tgz",
+      "integrity": "sha512-vlMC2f8I2u/bZGqkdfLQW/13Zihpej/7PmSiMQsbYddxuTsJp8vRe2x2FvVExZg7FaOds43ROAuFJwPR4MTZLw==",
+      "dev": true,
+      "requires": {
+        "end-of-stream": "^1.1.0",
+        "stream-shift": "^1.0.0"
+      }
+    },
    "stream-events": {
      "version": "1.0.5",
      "resolved": "https://registry.npmjs.org/stream-events/-/stream-events-1.0.5.tgz",
@@ -18570,6 +19886,63 @@
        "stubs": "^3.0.0"
      }
    },
+    "stream-http": {
+      "version": "2.8.3",
+      "resolved": "https://registry.npmjs.org/stream-http/-/stream-http-2.8.3.tgz",
+      "integrity": "sha512-+TSkfINHDo4J+ZobQLWiMouQYB+UVYFttRA94FpEzzJ7ZdqcL4uUUQ7WkdkI4DSozGmgBUE/a47L+38PenXhUw==",
+      "dev": true,
+      "requires": {
+        "builtin-status-codes": "^3.0.0",
+        "inherits": "^2.0.1",
+        "readable-stream": "^2.3.6",
+        "to-arraybuffer": "^1.0.0",
+        "xtend": "^4.0.0"
+      },
+      "dependencies": {
+        "isarray": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+          "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
+          "dev": true
+        },
+        "readable-stream": {
+          "version": "2.3.7",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
+          "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==",
+          "dev": true,
+          "requires": {
+            "core-util-is": "~1.0.0",
+            "inherits": "~2.0.3",
+            "isarray": "~1.0.0",
+            "process-nextick-args": "~2.0.0",
+            "safe-buffer": "~5.1.1",
+            "string_decoder": "~1.1.1",
+            "util-deprecate": "~1.0.1"
+          }
+        },
+        "safe-buffer": {
+          "version": "5.1.2",
+          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+          "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+          "dev": true
+        },
+        "string_decoder": {
+          "version": "1.1.1",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+          "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+          "dev": true,
+          "requires": {
+            "safe-buffer": "~5.1.0"
+          }
+        }
+      }
+    },
+    "stream-shift": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/stream-shift/-/stream-shift-1.0.1.tgz",
+      "integrity": "sha512-AiisoFqQ0vbGcZgQPY1cdP2I76glaVA/RauYR4G4thNFgkTqr90yXTo4LYX60Jl+sIlPNHHdGSwo01AvbKUSVQ==",
+      "dev": true
+    },
    "strict-uri-encode": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz",
@@ -18761,24 +20134,33 @@
      "dev": true
    },
    "style-loader": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-2.0.0.tgz",
-      "integrity": "sha512-Z0gYUJmzZ6ZdRUqpg1r8GsaFKypE+3xAzuFeMuoHgjc9KZv3wMyCRjQIWEbhoFSq7+7yoHXySDJyyWQaPajeiQ==",
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-1.1.3.tgz",
+      "integrity": "sha512-rlkH7X/22yuwFYK357fMN/BxYOorfnfq0eD7+vqlemSK4wEcejFF1dg4zxP0euBW8NrYx2WZzZ8PPFevr7D+Kw==",
      "dev": true,
      "requires": {
-        "loader-utils": "^2.0.0",
-        "schema-utils": "^3.0.0"
+        "loader-utils": "^1.2.3",
+        "schema-utils": "^2.6.4"
      },
      "dependencies": {
-        "schema-utils": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.0.0.tgz",
-          "integrity": "sha512-6D82/xSzO094ajanoOSbe4YvXWMfn2A//8Y1+MUqFAJul5Bs+yn36xbK9OtNDcRVSBJ9jjeoXftM6CfztsjOAA==",
+        "json5": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
+          "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
          "dev": true,
          "requires": {
-            "@types/json-schema": "^7.0.6",
-            "ajv": "^6.12.5",
-            "ajv-keywords": "^3.5.2"
+            "minimist": "^1.2.0"
+          }
+        },
+        "loader-utils": {
+          "version": "1.4.0",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.0.tgz",
+          "integrity": "sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==",
+          "dev": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^1.0.1"
          }
        }
      }
@@ -19221,9 +20603,9 @@
      }
    },
    "tapable": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.0.tgz",
-      "integrity": "sha512-FBk4IesMV1rBxX2tfiK8RAmogtWn53puLOQlvO8XuwlgxcYbP4mVPS9Ph4aeamSyyVjOl24aYWAuc8U5kCVwMw==",
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/tapable/-/tapable-1.1.3.tgz",
+      "integrity": "sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA==",
      "dev": true
    },
    "tar-stream": {
@@ -19345,62 +20727,37 @@
      }
    },
    "terser-webpack-plugin": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.1.1.tgz",
-      "integrity": "sha512-5XNNXZiR8YO6X6KhSGXfY0QrGrCRlSwAEjIIrlRQR4W8nP69TaJUlh3bkuac6zzgspiGPfKEHcY295MMVExl5Q==",
+      "version": "1.4.5",
+      "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-1.4.5.tgz",
+      "integrity": "sha512-04Rfe496lN8EYruwi6oPQkG0vo8C+HT49X687FZnpPF0qMAIHONI6HEXYPKDOE8e5HjXTyKfqRd/agHtH0kOtw==",
      "dev": true,
      "requires": {
-        "jest-worker": "^26.6.2",
-        "p-limit": "^3.1.0",
-        "schema-utils": "^3.0.0",
-        "serialize-javascript": "^5.0.1",
+        "cacache": "^12.0.2",
+        "find-cache-dir": "^2.1.0",
+        "is-wsl": "^1.1.0",
+        "schema-utils": "^1.0.0",
+        "serialize-javascript": "^4.0.0",
        "source-map": "^0.6.1",
-        "terser": "^5.5.1"
+        "terser": "^4.1.2",
+        "webpack-sources": "^1.4.0",
+        "worker-farm": "^1.7.0"
      },
      "dependencies": {
-        "commander": {
-          "version": "2.20.3",
-          "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
-          "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+        "is-wsl": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-1.1.0.tgz",
+          "integrity": "sha1-HxbkqiKwTRM2tmGIpmrzxgDDpm0=",
          "dev": true
        },
-        "p-limit": {
-          "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
-          "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
-          "dev": true,
-          "requires": {
-            "yocto-queue": "^0.1.0"
-          }
-        },
        "schema-utils": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.0.0.tgz",
-          "integrity": "sha512-6D82/xSzO094ajanoOSbe4YvXWMfn2A//8Y1+MUqFAJul5Bs+yn36xbK9OtNDcRVSBJ9jjeoXftM6CfztsjOAA==",
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-1.0.0.tgz",
+          "integrity": "sha512-i27Mic4KovM/lnGsy8whRCHhc7VicJajAjTrYg11K9zfZXnYIt4k5F+kZkwjnrhKzLic/HLU4j11mjsz2G/75g==",
          "dev": true,
          "requires": {
-            "@types/json-schema": "^7.0.6",
-            "ajv": "^6.12.5",
-            "ajv-keywords": "^3.5.2"
-          }
-        },
-        "terser": {
-          "version": "5.5.1",
-          "resolved": "https://registry.npmjs.org/terser/-/terser-5.5.1.tgz",
-          "integrity": "sha512-6VGWZNVP2KTUcltUQJ25TtNjx/XgdDsBDKGt8nN0MpydU36LmbPPcMBd2kmtZNNGVVDLg44k7GKeHHj+4zPIBQ==",
-          "dev": true,
-          "requires": {
-            "commander": "^2.20.0",
-            "source-map": "~0.7.2",
-            "source-map-support": "~0.5.19"
-          },
-          "dependencies": {
-            "source-map": {
-              "version": "0.7.3",
-              "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz",
-              "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==",
-              "dev": true
-            }
+            "ajv": "^6.1.0",
+            "ajv-errors": "^1.0.0",
+            "ajv-keywords": "^3.1.0"
          }
        }
      }
@@ -19434,6 +20791,54 @@
      "integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=",
      "dev": true
    },
+    "through2": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.5.tgz",
+      "integrity": "sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==",
+      "dev": true,
+      "requires": {
+        "readable-stream": "~2.3.6",
+        "xtend": "~4.0.1"
+      },
+      "dependencies": {
+        "isarray": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+          "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
+          "dev": true
+        },
+        "readable-stream": {
+          "version": "2.3.7",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
+          "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==",
+          "dev": true,
+          "requires": {
+            "core-util-is": "~1.0.0",
+            "inherits": "~2.0.3",
+            "isarray": "~1.0.0",
+            "process-nextick-args": "~2.0.0",
+            "safe-buffer": "~5.1.1",
+            "string_decoder": "~1.1.1",
+            "util-deprecate": "~1.0.1"
+          }
+        },
+        "safe-buffer": {
+          "version": "5.1.2",
+          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+          "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+          "dev": true
+        },
+        "string_decoder": {
+          "version": "1.1.1",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+          "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+          "dev": true,
+          "requires": {
+            "safe-buffer": "~5.1.0"
+          }
+        }
+      }
+    },
    "thunky": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz",
@@ -19447,6 +20852,15 @@
      "dev": true,
      "optional": true
    },
+    "timers-browserify": {
+      "version": "2.0.12",
+      "resolved": "https://registry.npmjs.org/timers-browserify/-/timers-browserify-2.0.12.tgz",
+      "integrity": "sha512-9phl76Cqm6FhSX9Xe1ZUAMLtm1BLkKj2Qd5ApyWkXzsMRaA7dgr81kf4wJmQf/hAvg8EEyJxDo3du/0KlhPiKQ==",
+      "dev": true,
+      "requires": {
+        "setimmediate": "^1.0.4"
+      }
+    },
    "timsort": {
      "version": "0.3.0",
      "resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz",
@@ -19478,6 +20892,12 @@
      "integrity": "sha1-I2QN17QtAEM5ERQIIOXPRA5SHdE=",
      "dev": true
    },
+    "to-arraybuffer": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz",
+      "integrity": "sha1-fSKbH8xjfkZsoIEYCDanqr/4P0M=",
+      "dev": true
+    },
    "to-buffer": {
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/to-buffer/-/to-buffer-1.1.1.tgz",
@@ -19619,6 +21039,12 @@
      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
    },
+    "tty-browserify": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.0.tgz",
+      "integrity": "sha1-oVe6QC2iTpv5V/mqadUk7tQpAaY=",
+      "dev": true
+    },
    "tunnel-agent": {
      "version": "0.6.0",
      "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
@@ -19687,11 +21113,29 @@
      }
    },
    "typescript": {
-      "version": "4.1.4",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.1.4.tgz",
-      "integrity": "sha512-+Uru0t8qIRgjuCpiSPpfGuhHecMllk5Zsazj5LZvVsEStEjmIRRBZe+jHjGQvsgS7M1wONy2PQXd67EMyV6acg==",
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.1.3.tgz",
+      "integrity": "sha512-B3ZIOf1IKeH2ixgHhj6la6xdwR9QrLC5d1VKeCSY4tvkqhF2eqd9O7txNlS0PO3GrBAFIdr3L1ndNwteUbZLYg==",
      "dev": true
    },
+    "unbox-primitive": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.1.tgz",
+      "integrity": "sha512-tZU/3NqK3dA5gpE1KtyiJUrEB0lxnGkMFHptJ7q6ewdZ8s12QrODwNbhIJStmJkd1QDXa1NRA8aF2A1zk/Ypyw==",
+      "requires": {
+        "function-bind": "^1.1.1",
+        "has-bigints": "^1.0.1",
+        "has-symbols": "^1.0.2",
+        "which-boxed-primitive": "^1.0.2"
+      },
+      "dependencies": {
+        "has-symbols": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.2.tgz",
+          "integrity": "sha512-chXa79rL/UC2KlX17jo3vRGz0azaWEx5tGqZg5pO3NUyEJVB17dMruQlzCCOfUvElghKcm5194+BCRvi2Rv/Gw=="
+        }
+      }
+    },
    "unbzip2-stream": {
      "version": "1.4.3",
      "resolved": "https://registry.npmjs.org/unbzip2-stream/-/unbzip2-stream-1.4.3.tgz",
@@ -19766,6 +21210,24 @@
      "integrity": "sha1-/+3ks2slKQaW5uFl1KWe25mOawI=",
      "dev": true
    },
+    "unique-filename": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/unique-filename/-/unique-filename-1.1.1.tgz",
+      "integrity": "sha512-Vmp0jIp2ln35UTXuryvjzkjGdRyf9b2lTXuSYUiPmzRcl3FDtYqAwOnTJkAngD9SWhnoJzDbTKwaOrZ+STtxNQ==",
+      "dev": true,
+      "requires": {
+        "unique-slug": "^2.0.0"
+      }
+    },
+    "unique-slug": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/unique-slug/-/unique-slug-2.0.2.tgz",
+      "integrity": "sha512-zoWr9ObaxALD3DOPfjPSqxt4fnZiWblxHIgeWqW8x7UqDzEtHEQLzji2cuJYQFCU6KmoJikOYAZlrTHHebjx2w==",
+      "dev": true,
+      "requires": {
+        "imurmurhash": "^0.1.4"
+      }
+    },
    "universal-cookie": {
      "version": "4.0.4",
      "resolved": "https://registry.npmjs.org/universal-cookie/-/universal-cookie-4.0.4.tgz",
@@ -19947,26 +21409,29 @@
      "integrity": "sha512-gN3vgMISAgacF7sqsLPByqoePooY3n2emTH59Ur5d/M8eg4WTWu1xp8i8DHjohftIyEx0S08RiYxbffr4j8Peg=="
    },
    "use-sidecar": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.0.4.tgz",
-      "integrity": "sha512-A5ggIS3/qTdxCAlcy05anO2/oqXOfpmxnpRE1Jm+fHHtCvUvNSZDGqgOSAXPriBVAcw2fMFFkh5v5KqrFFhCMA==",
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.0.5.tgz",
+      "integrity": "sha512-k9jnrjYNwN6xYLj1iaGhonDghfvmeTmYjAiGvOr7clwKfPjMXJf4/HOr7oT5tJwYafgp2tG2l3eZEOfoELiMcA==",
      "requires": {
-        "detect-node-es": "^1.0.0",
+        "detect-node-es": "^1.1.0",
        "tslib": "^1.9.3"
      }
    },
    "util": {
-      "version": "0.12.3",
-      "resolved": "https://registry.npmjs.org/util/-/util-0.12.3.tgz",
-      "integrity": "sha512-I8XkoQwE+fPQEhy9v012V+TSdH2kp9ts29i20TaaDUXsg7x/onePbhFJUExBfv/2ay1ZOp/Vsm3nDlmnFGSAog==",
+      "version": "0.10.3",
+      "resolved": "https://registry.npmjs.org/util/-/util-0.10.3.tgz",
+      "integrity": "sha1-evsa/lCAUkZInj23/g7TeTNqwPk=",
      "dev": true,
      "requires": {
-        "inherits": "^2.0.3",
-        "is-arguments": "^1.0.4",
-        "is-generator-function": "^1.0.7",
-        "is-typed-array": "^1.1.3",
-        "safe-buffer": "^5.1.2",
-        "which-typed-array": "^1.1.2"
+        "inherits": "2.0.1"
+      },
+      "dependencies": {
+        "inherits": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz",
+          "integrity": "sha1-sX0I0ya0Qj5Wjv9xn5GwscvfafE=",
+          "dev": true
+        }
      }
    },
    "util-deprecate": {
@@ -20067,6 +21532,12 @@
        "extsprintf": "^1.2.0"
      }
    },
+    "vm-browserify": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.1.2.tgz",
+      "integrity": "sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==",
+      "dev": true
+    },
    "w3c-hr-time": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz",
@@ -20103,13 +21574,136 @@
      }
    },
    "watchpack": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.1.1.tgz",
-      "integrity": "sha512-Oo7LXCmc1eE1AjyuSBmtC3+Wy4HcV8PxWh2kP6fOl8yTlNS7r0K9l1ao2lrrUza7V39Y3D/BbJgY8VeSlc5JKw==",
+      "version": "1.7.5",
+      "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.5.tgz",
+      "integrity": "sha512-9P3MWk6SrKjHsGkLT2KHXdQ/9SNkyoJbabxnKOoJepsvJjJG8uYTR3yTPxPQvNDI3w4Nz1xnE0TLHK4RIVe/MQ==",
      "dev": true,
      "requires": {
-        "glob-to-regexp": "^0.4.1",
-        "graceful-fs": "^4.1.2"
+        "chokidar": "^3.4.1",
+        "graceful-fs": "^4.1.2",
+        "neo-async": "^2.5.0",
+        "watchpack-chokidar2": "^2.0.1"
+      },
+      "dependencies": {
+        "anymatch": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.1.tgz",
+          "integrity": "sha512-mM8522psRCqzV+6LhomX5wgp25YVibjh8Wj23I5RPkPppSVSjyKD2A2mBJmWGa+KN7f2D6LNh9jkBCeyLktzjg==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "normalize-path": "^3.0.0",
+            "picomatch": "^2.0.4"
+          }
+        },
+        "binary-extensions": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
+          "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
+          "dev": true,
+          "optional": true
+        },
+        "braces": {
+          "version": "3.0.2",
+          "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
+          "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "fill-range": "^7.0.1"
+          }
+        },
+        "chokidar": {
+          "version": "3.5.1",
+          "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.1.tgz",
+          "integrity": "sha512-9+s+Od+W0VJJzawDma/gvBNQqkTiqYTWLuZoyAsivsI4AaWTCzHG06/TMjsf1cYe9Cb97UCEhjz7HvnPk2p/tw==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "anymatch": "~3.1.1",
+            "braces": "~3.0.2",
+            "fsevents": "~2.3.1",
+            "glob-parent": "~5.1.0",
+            "is-binary-path": "~2.1.0",
+            "is-glob": "~4.0.1",
+            "normalize-path": "~3.0.0",
+            "readdirp": "~3.5.0"
+          }
+        },
+        "fill-range": {
+          "version": "7.0.1",
+          "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
+          "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "to-regex-range": "^5.0.1"
+          }
+        },
+        "fsevents": {
+          "version": "2.3.2",
+          "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+          "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+          "dev": true,
+          "optional": true
+        },
+        "glob-parent": {
+          "version": "5.1.1",
+          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.1.tgz",
+          "integrity": "sha512-FnI+VGOpnlGHWZxthPGR+QhR78fuiK0sNLkHQv+bL9fQi57lNNdquIbna/WrfROrolq8GK5Ek6BiMwqL/voRYQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "is-glob": "^4.0.1"
+          }
+        },
+        "is-binary-path": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+          "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "binary-extensions": "^2.0.0"
+          }
+        },
+        "is-number": {
+          "version": "7.0.0",
+          "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+          "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+          "dev": true,
+          "optional": true
+        },
+        "readdirp": {
+          "version": "3.5.0",
+          "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.5.0.tgz",
+          "integrity": "sha512-cMhu7c/8rdhkHXWsY+osBhfSy0JikwpHK/5+imo+LpeasTF8ouErHrlYkwT0++njiyuDvc7OFY5T3ukvZ8qmFQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "picomatch": "^2.2.1"
+          }
+        },
+        "to-regex-range": {
+          "version": "5.0.1",
+          "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+          "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "is-number": "^7.0.0"
+          }
+        }
+      }
+    },
+    "watchpack-chokidar2": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/watchpack-chokidar2/-/watchpack-chokidar2-2.0.1.tgz",
+      "integrity": "sha512-nCFfBIPKr5Sh61s4LPpy1Wtfi0HE8isJ3d2Yb5/Ppw2P2B/3eVSEBjKfN0fmHJSK14+31KwMKmcrzs2GM4P0Ww==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "chokidar": "^2.1.8"
      }
    },
    "wbuf": {
@@ -20128,61 +21722,81 @@
      "dev": true
    },
    "webpack": {
-      "version": "5.21.2",
-      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.21.2.tgz",
-      "integrity": "sha512-xHflCenx+AM4uWKX71SWHhxml5aMXdy2tu/vdi4lClm7PADKxlyDAFFN1rEFzNV0MAoPpHtBeJnl/+K6F4QBPg==",
+      "version": "4.44.2",
+      "resolved": "https://registry.npmjs.org/webpack/-/webpack-4.44.2.tgz",
+      "integrity": "sha512-6KJVGlCxYdISyurpQ0IPTklv+DULv05rs2hseIXer6D7KrUicRDLFb4IUM1S6LUAKypPM/nSiVSuv8jHu1m3/Q==",
      "dev": true,
      "requires": {
-        "@types/eslint-scope": "^3.7.0",
-        "@types/estree": "^0.0.46",
-        "@webassemblyjs/ast": "1.11.0",
-        "@webassemblyjs/wasm-edit": "1.11.0",
-        "@webassemblyjs/wasm-parser": "1.11.0",
-        "acorn": "^8.0.4",
-        "browserslist": "^4.14.5",
+        "@webassemblyjs/ast": "1.9.0",
+        "@webassemblyjs/helper-module-context": "1.9.0",
+        "@webassemblyjs/wasm-edit": "1.9.0",
+        "@webassemblyjs/wasm-parser": "1.9.0",
+        "acorn": "^6.4.1",
+        "ajv": "^6.10.2",
+        "ajv-keywords": "^3.4.1",
        "chrome-trace-event": "^1.0.2",
-        "enhanced-resolve": "^5.7.0",
-        "es-module-lexer": "^0.3.26",
-        "eslint-scope": "^5.1.1",
-        "events": "^3.2.0",
-        "glob-to-regexp": "^0.4.1",
-        "graceful-fs": "^4.2.4",
+        "enhanced-resolve": "^4.3.0",
+        "eslint-scope": "^4.0.3",
        "json-parse-better-errors": "^1.0.2",
-        "loader-runner": "^4.2.0",
-        "mime-types": "^2.1.27",
-        "neo-async": "^2.6.2",
-        "schema-utils": "^3.0.0",
-        "tapable": "^2.1.1",
-        "terser-webpack-plugin": "^5.1.1",
-        "watchpack": "^2.0.0",
-        "webpack-sources": "^2.1.1"
+        "loader-runner": "^2.4.0",
+        "loader-utils": "^1.2.3",
+        "memory-fs": "^0.4.1",
+        "micromatch": "^3.1.10",
+        "mkdirp": "^0.5.3",
+        "neo-async": "^2.6.1",
+        "node-libs-browser": "^2.2.1",
+        "schema-utils": "^1.0.0",
+        "tapable": "^1.1.3",
+        "terser-webpack-plugin": "^1.4.3",
+        "watchpack": "^1.7.4",
+        "webpack-sources": "^1.4.1"
      },
      "dependencies": {
        "acorn": {
-          "version": "8.0.5",
-          "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.0.5.tgz",
-          "integrity": "sha512-v+DieK/HJkJOpFBETDJioequtc3PfxsWMaxIdIwujtF7FEV/MAyDQLlm6/zPvr7Mix07mLh6ccVwIsloceodlg==",
+          "version": "6.4.2",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.4.2.tgz",
+          "integrity": "sha512-XtGIhXwF8YM8bJhGxG5kXgjkEuNGLTkoYqVE+KMR+aspr4KGYmKYg7yUe3KghyQ9yheNwLnjmzh/7+gfDBmHCQ==",
          "dev": true
        },
-        "schema-utils": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.0.0.tgz",
-          "integrity": "sha512-6D82/xSzO094ajanoOSbe4YvXWMfn2A//8Y1+MUqFAJul5Bs+yn36xbK9OtNDcRVSBJ9jjeoXftM6CfztsjOAA==",
+        "eslint-scope": {
+          "version": "4.0.3",
+          "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-4.0.3.tgz",
+          "integrity": "sha512-p7VutNr1O/QrxysMo3E45FjYDTeXBy0iTltPFNSqKAIfjDSXC+4dj+qfyuD8bfAXrW/y6lW3O76VaYNPKfpKrg==",
          "dev": true,
          "requires": {
-            "@types/json-schema": "^7.0.6",
-            "ajv": "^6.12.5",
-            "ajv-keywords": "^3.5.2"
+            "esrecurse": "^4.1.0",
+            "estraverse": "^4.1.1"
          }
        },
-        "webpack-sources": {
-          "version": "2.2.0",
-          "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-2.2.0.tgz",
-          "integrity": "sha512-bQsA24JLwcnWGArOKUxYKhX3Mz/nK1Xf6hxullKERyktjNMC4x8koOeaDNTA2fEJ09BdWLbM/iTW0ithREUP0w==",
+        "json5": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
+          "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
          "dev": true,
          "requires": {
-            "source-list-map": "^2.0.1",
-            "source-map": "^0.6.1"
+            "minimist": "^1.2.0"
+          }
+        },
+        "loader-utils": {
+          "version": "1.4.0",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.0.tgz",
+          "integrity": "sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==",
+          "dev": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^1.0.1"
+          }
+        },
+        "schema-utils": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-1.0.0.tgz",
+          "integrity": "sha512-i27Mic4KovM/lnGsy8whRCHhc7VicJajAjTrYg11K9zfZXnYIt4k5F+kZkwjnrhKzLic/HLU4j11mjsz2G/75g==",
+          "dev": true,
+          "requires": {
+            "ajv": "^6.1.0",
+            "ajv-errors": "^1.0.0",
+            "ajv-keywords": "^3.1.0"
          }
        }
      }
@@ -20214,12 +21828,6 @@
          "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
          "dev": true
        },
-        "filesize": {
-          "version": "3.6.1",
-          "resolved": "https://registry.npmjs.org/filesize/-/filesize-3.6.1.tgz",
-          "integrity": "sha512-7KjR1vv6qnicaPMi1iiTcI85CyYwRO/PSFCu6SvqL8jN2Wjt/NIYQTFtFs7fSDCYOstUkEWIQGFUg5YZQfjlcg==",
-          "dev": true
-        },
        "ws": {
          "version": "6.2.1",
          "resolved": "https://registry.npmjs.org/ws/-/ws-6.2.1.tgz",
@@ -20232,394 +21840,387 @@
      }
    },
    "webpack-cli": {
-      "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-4.5.0.tgz",
-      "integrity": "sha512-wXg/ef6Ibstl2f50mnkcHblRPN/P9J4Nlod5Hg9HGFgSeF8rsqDGHJeVe4aR26q9l62TUJi6vmvC2Qz96YJw1Q==",
+      "version": "3.3.12",
+      "resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-3.3.12.tgz",
+      "integrity": "sha512-NVWBaz9k839ZH/sinurM+HcDvJOTXwSjYp1ku+5XKeOC03z8v5QitnK/x+lAxGXFyhdayoIf/GOpv85z3/xPag==",
      "dev": true,
      "requires": {
-        "@discoveryjs/json-ext": "^0.5.0",
-        "@webpack-cli/configtest": "^1.0.1",
-        "@webpack-cli/info": "^1.2.2",
-        "@webpack-cli/serve": "^1.3.0",
-        "colorette": "^1.2.1",
-        "commander": "^7.0.0",
-        "enquirer": "^2.3.6",
-        "execa": "^5.0.0",
-        "fastest-levenshtein": "^1.0.12",
-        "import-local": "^3.0.2",
-        "interpret": "^2.2.0",
-        "rechoir": "^0.7.0",
-        "v8-compile-cache": "^2.2.0",
-        "webpack-merge": "^5.7.3"
+        "chalk": "^2.4.2",
+        "cross-spawn": "^6.0.5",
+        "enhanced-resolve": "^4.1.1",
+        "findup-sync": "^3.0.0",
+        "global-modules": "^2.0.0",
+        "import-local": "^2.0.0",
+        "interpret": "^1.4.0",
+        "loader-utils": "^1.4.0",
+        "supports-color": "^6.1.0",
+        "v8-compile-cache": "^2.1.1",
+        "yargs": "^13.3.2"
      },
      "dependencies": {
-        "commander": {
-          "version": "7.0.0",
-          "resolved": "https://registry.npmjs.org/commander/-/commander-7.0.0.tgz",
-          "integrity": "sha512-ovx/7NkTrnPuIV8sqk/GjUIIM1+iUQeqA3ye2VNpq9sVoiZsooObWlQy+OPWGI17GDaEoybuAGJm6U8yC077BA==",
+        "camelcase": {
+          "version": "5.3.1",
+          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
+          "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
          "dev": true
        },
-        "cross-spawn": {
-          "version": "7.0.3",
-          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
-          "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
-          "dev": true,
-          "requires": {
-            "path-key": "^3.1.0",
-            "shebang-command": "^2.0.0",
-            "which": "^2.0.1"
-          }
-        },
-        "execa": {
+        "cliui": {
          "version": "5.0.0",
-          "resolved": "https://registry.npmjs.org/execa/-/execa-5.0.0.tgz",
-          "integrity": "sha512-ov6w/2LCiuyO4RLYGdpFGjkcs0wMTgGE8PrkTHikeUy5iJekXyPIKUjifk5CsE0pt7sMCrMZ3YNqoCj6idQOnQ==",
+          "resolved": "https://registry.npmjs.org/cliui/-/cliui-5.0.0.tgz",
+          "integrity": "sha512-PYeGSEmmHM6zvoef2w8TPzlrnNpXIjTipYK780YswmIP9vjxmd6Y2a3CB2Ks6/AU8NHjZugXvo8w3oWM2qnwXA==",
          "dev": true,
          "requires": {
-            "cross-spawn": "^7.0.3",
-            "get-stream": "^6.0.0",
-            "human-signals": "^2.1.0",
-            "is-stream": "^2.0.0",
-            "merge-stream": "^2.0.0",
-            "npm-run-path": "^4.0.1",
-            "onetime": "^5.1.2",
-            "signal-exit": "^3.0.3",
-            "strip-final-newline": "^2.0.0"
+            "string-width": "^3.1.0",
+            "strip-ansi": "^5.2.0",
+            "wrap-ansi": "^5.1.0"
          }
        },
-        "get-stream": {
-          "version": "6.0.0",
-          "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.0.tgz",
-          "integrity": "sha512-A1B3Bh1UmL0bidM/YX2NsCOTnGJePL9rO/M+Mw3m9f2gUpfokS0hi5Eah0WSUEWZdZhIZtMjkIYS7mDfOqNHbg==",
+        "emoji-regex": {
+          "version": "7.0.3",
+          "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-7.0.3.tgz",
+          "integrity": "sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA==",
          "dev": true
        },
-        "human-signals": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz",
-          "integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==",
-          "dev": true
-        },
-        "is-stream": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.0.tgz",
-          "integrity": "sha512-XCoy+WlUr7d1+Z8GgSuXmpuUFC9fOhRXglJMx+dwLKTkL44Cjd4W1Z5P+BQZpr+cR93aGP4S/s7Ftw6Nd/kiEw==",
-          "dev": true
-        },
-        "npm-run-path": {
-          "version": "4.0.1",
-          "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
-          "integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
-          "dev": true,
-          "requires": {
-            "path-key": "^3.0.0"
-          }
-        },
-        "path-key": {
-          "version": "3.1.1",
-          "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
-          "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-          "dev": true
-        },
-        "shebang-command": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
-          "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-          "dev": true,
-          "requires": {
-            "shebang-regex": "^3.0.0"
-          }
-        },
-        "shebang-regex": {
+        "find-up": {
          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
-          "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
-          "dev": true
-        },
-        "webpack-merge": {
-          "version": "5.7.3",
-          "resolved": "https://registry.npmjs.org/webpack-merge/-/webpack-merge-5.7.3.tgz",
-          "integrity": "sha512-6/JUQv0ELQ1igjGDzHkXbVDRxkfA57Zw7PfiupdLFJYrgFqY5ZP8xxbpp2lU3EPwYx89ht5Z/aDkD40hFCm5AA==",
+          "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
+          "integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==",
          "dev": true,
          "requires": {
-            "clone-deep": "^4.0.1",
-            "wildcard": "^2.0.0"
+            "locate-path": "^3.0.0"
          }
        },
-        "which": {
-          "version": "2.0.2",
-          "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
-          "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+        "import-local": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/import-local/-/import-local-2.0.0.tgz",
+          "integrity": "sha512-b6s04m3O+s3CGSbqDIyP4R6aAwAeYlVq9+WUWep6iHa8ETRf9yei1U48C5MmfJmV9AiLYYBKPMq/W+/WRpQmCQ==",
          "dev": true,
          "requires": {
-            "isexe": "^2.0.0"
+            "pkg-dir": "^3.0.0",
+            "resolve-cwd": "^2.0.0"
+          }
+        },
+        "is-fullwidth-code-point": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
+          "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=",
+          "dev": true
+        },
+        "json5": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
+          "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
+          "dev": true,
+          "requires": {
+            "minimist": "^1.2.0"
+          }
+        },
+        "loader-utils": {
+          "version": "1.4.0",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.0.tgz",
+          "integrity": "sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==",
+          "dev": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^1.0.1"
+          }
+        },
+        "locate-path": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
+          "integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==",
+          "dev": true,
+          "requires": {
+            "p-locate": "^3.0.0",
+            "path-exists": "^3.0.0"
+          }
+        },
+        "p-locate": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz",
+          "integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==",
+          "dev": true,
+          "requires": {
+            "p-limit": "^2.0.0"
+          }
+        },
+        "path-exists": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
+          "integrity": "sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=",
+          "dev": true
+        },
+        "resolve-cwd": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/resolve-cwd/-/resolve-cwd-2.0.0.tgz",
+          "integrity": "sha1-AKn3OHVW4nA46uIyyqNypqWbZlo=",
+          "dev": true,
+          "requires": {
+            "resolve-from": "^3.0.0"
+          }
+        },
+        "resolve-from": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-3.0.0.tgz",
+          "integrity": "sha1-six699nWiBvItuZTM17rywoYh0g=",
+          "dev": true
+        },
+        "string-width": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz",
+          "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==",
+          "dev": true,
+          "requires": {
+            "emoji-regex": "^7.0.1",
+            "is-fullwidth-code-point": "^2.0.0",
+            "strip-ansi": "^5.1.0"
+          }
+        },
+        "wrap-ansi": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-5.1.0.tgz",
+          "integrity": "sha512-QC1/iN/2/RPVJ5jYK8BGttj5z83LmSKmvbvrXPNCLZSEb32KKVDJDl/MOt2N01qU2H/FkzEa9PKto1BqDjtd7Q==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^3.2.0",
+            "string-width": "^3.0.0",
+            "strip-ansi": "^5.0.0"
+          }
+        },
+        "yargs": {
+          "version": "13.3.2",
+          "resolved": "https://registry.npmjs.org/yargs/-/yargs-13.3.2.tgz",
+          "integrity": "sha512-AX3Zw5iPruN5ie6xGRIDgqkT+ZhnRlZMLMHAs8tg7nRruy2Nb+i5o9bwghAogtM08q1dpr2LVoS8KSTMYpWXUw==",
+          "dev": true,
+          "requires": {
+            "cliui": "^5.0.0",
+            "find-up": "^3.0.0",
+            "get-caller-file": "^2.0.1",
+            "require-directory": "^2.1.1",
+            "require-main-filename": "^2.0.0",
+            "set-blocking": "^2.0.0",
+            "string-width": "^3.0.0",
+            "which-module": "^2.0.0",
+            "y18n": "^4.0.0",
+            "yargs-parser": "^13.1.2"
+          }
+        },
+        "yargs-parser": {
+          "version": "13.1.2",
+          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-13.1.2.tgz",
+          "integrity": "sha512-3lbsNRf/j+A4QuSZfDRA7HRSfWrzO0YjqTJd5kjAq37Zep1CEgaYmrH9Q3GwPiB9cHyd1Y1UwggGhJGoxipbzg==",
+          "dev": true,
+          "requires": {
+            "camelcase": "^5.0.0",
+            "decamelize": "^1.2.0"
          }
        }
      }
    },
    "webpack-dev-middleware": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-4.1.0.tgz",
-      "integrity": "sha512-mpa/FY+DiBu5+r5JUIyTCYWRfkWgyA3/OOE9lwfzV9S70A4vJYLsVRKj5rMFEsezBroy2FmPyQ8oBRVW8QmK1A==",
+      "version": "3.7.3",
+      "resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-3.7.3.tgz",
+      "integrity": "sha512-djelc/zGiz9nZj/U7PTBi2ViorGJXEWo/3ltkPbDyxCXhhEXkW0ce99falaok4TPj+AsxLiXJR0EBOb0zh9fKQ==",
      "dev": true,
      "requires": {
-        "colorette": "^1.2.1",
-        "mem": "^8.0.0",
-        "memfs": "^3.2.0",
-        "mime-types": "^2.1.28",
+        "memory-fs": "^0.4.1",
+        "mime": "^2.4.4",
+        "mkdirp": "^0.5.1",
        "range-parser": "^1.2.1",
-        "schema-utils": "^3.0.0"
+        "webpack-log": "^2.0.0"
      },
      "dependencies": {
-        "schema-utils": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.0.0.tgz",
-          "integrity": "sha512-6D82/xSzO094ajanoOSbe4YvXWMfn2A//8Y1+MUqFAJul5Bs+yn36xbK9OtNDcRVSBJ9jjeoXftM6CfztsjOAA==",
-          "dev": true,
-          "requires": {
-            "@types/json-schema": "^7.0.6",
-            "ajv": "^6.12.5",
-            "ajv-keywords": "^3.5.2"
-          }
+        "mime": {
+          "version": "2.5.0",
+          "resolved": "https://registry.npmjs.org/mime/-/mime-2.5.0.tgz",
+          "integrity": "sha512-ft3WayFSFUVBuJj7BMLKAQcSlItKtfjsKDDsii3rqFDAZ7t11zRe8ASw/GlmivGwVUYtwkQrxiGGpL6gFvB0ag==",
+          "dev": true
        }
      }
    },
    "webpack-dev-server": {
-      "version": "4.0.0-beta.0",
-      "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-4.0.0-beta.0.tgz",
-      "integrity": "sha512-mVD4Hn3bsMdcq6qE0y8xvH6KAu9NwS6F0NNgFe+n6gbsTQ7YgffUDydvy2iieyyKjAcBJDT5PZexv9tKv8kTNQ==",
+      "version": "3.11.0",
+      "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-3.11.0.tgz",
+      "integrity": "sha512-PUxZ+oSTxogFQgkTtFndEtJIPNmml7ExwufBZ9L2/Xyyd5PnOL5UreWe5ZT7IU25DSdykL9p1MLQzmLh2ljSeg==",
      "dev": true,
      "requires": {
        "ansi-html": "0.0.7",
        "bonjour": "^3.5.0",
-        "chokidar": "^3.4.3",
+        "chokidar": "^2.1.8",
        "compression": "^1.7.4",
        "connect-history-api-fallback": "^1.6.0",
-        "del": "^6.0.0",
+        "debug": "^4.1.1",
+        "del": "^4.1.1",
        "express": "^4.17.1",
-        "find-cache-dir": "^3.3.1",
-        "graceful-fs": "^4.2.4",
        "html-entities": "^1.3.1",
-        "http-proxy-middleware": "^1.0.6",
-        "internal-ip": "^6.2.0",
+        "http-proxy-middleware": "0.19.1",
+        "import-local": "^2.0.0",
+        "internal-ip": "^4.3.0",
        "ip": "^1.1.5",
        "is-absolute-url": "^3.0.3",
        "killable": "^1.0.1",
-        "open": "^7.3.0",
-        "p-retry": "^4.2.0",
-        "portfinder": "^1.0.28",
-        "schema-utils": "^3.0.0",
-        "selfsigned": "^1.10.8",
+        "loglevel": "^1.6.8",
+        "opn": "^5.5.0",
+        "p-retry": "^3.0.1",
+        "portfinder": "^1.0.26",
+        "schema-utils": "^1.0.0",
+        "selfsigned": "^1.10.7",
+        "semver": "^6.3.0",
        "serve-index": "^1.9.1",
-        "sockjs": "0.3.21",
-        "sockjs-client": "1.5.0",
+        "sockjs": "0.3.20",
+        "sockjs-client": "1.4.0",
        "spdy": "^4.0.2",
-        "strip-ansi": "^6.0.0",
+        "strip-ansi": "^3.0.1",
+        "supports-color": "^6.1.0",
        "url": "^0.11.0",
-        "util": "^0.12.3",
-        "webpack-dev-middleware": "^4.0.2",
-        "ws": "^7.4.0"
+        "webpack-dev-middleware": "^3.7.2",
+        "webpack-log": "^2.0.0",
+        "ws": "^6.2.1",
+        "yargs": "^13.3.2"
      },
      "dependencies": {
-        "anymatch": {
-          "version": "3.1.1",
-          "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.1.tgz",
-          "integrity": "sha512-mM8522psRCqzV+6LhomX5wgp25YVibjh8Wj23I5RPkPppSVSjyKD2A2mBJmWGa+KN7f2D6LNh9jkBCeyLktzjg==",
-          "dev": true,
-          "requires": {
-            "normalize-path": "^3.0.0",
-            "picomatch": "^2.0.4"
-          }
-        },
-        "array-union": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
-          "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
+        "ansi-regex": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
+          "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
          "dev": true
        },
-        "binary-extensions": {
-          "version": "2.2.0",
-          "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
-          "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
+        "camelcase": {
+          "version": "5.3.1",
+          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
+          "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
          "dev": true
        },
-        "braces": {
-          "version": "3.0.2",
-          "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-          "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+        "cliui": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/cliui/-/cliui-5.0.0.tgz",
+          "integrity": "sha512-PYeGSEmmHM6zvoef2w8TPzlrnNpXIjTipYK780YswmIP9vjxmd6Y2a3CB2Ks6/AU8NHjZugXvo8w3oWM2qnwXA==",
          "dev": true,
          "requires": {
-            "fill-range": "^7.0.1"
+            "string-width": "^3.1.0",
+            "strip-ansi": "^5.2.0",
+            "wrap-ansi": "^5.1.0"
+          },
+          "dependencies": {
+            "ansi-regex": {
+              "version": "4.1.0",
+              "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
+              "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==",
+              "dev": true
+            },
+            "strip-ansi": {
+              "version": "5.2.0",
+              "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
+              "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
+              "dev": true,
+              "requires": {
+                "ansi-regex": "^4.1.0"
+              }
+            }
          }
        },
-        "chokidar": {
-          "version": "3.5.1",
-          "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.1.tgz",
-          "integrity": "sha512-9+s+Od+W0VJJzawDma/gvBNQqkTiqYTWLuZoyAsivsI4AaWTCzHG06/TMjsf1cYe9Cb97UCEhjz7HvnPk2p/tw==",
+        "debug": {
+          "version": "4.3.1",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz",
+          "integrity": "sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==",
          "dev": true,
          "requires": {
-            "anymatch": "~3.1.1",
-            "braces": "~3.0.2",
-            "fsevents": "~2.3.1",
-            "glob-parent": "~5.1.0",
-            "is-binary-path": "~2.1.0",
-            "is-glob": "~4.0.1",
-            "normalize-path": "~3.0.0",
-            "readdirp": "~3.5.0"
+            "ms": "2.1.2"
          }
        },
-        "del": {
-          "version": "6.0.0",
-          "resolved": "https://registry.npmjs.org/del/-/del-6.0.0.tgz",
-          "integrity": "sha512-1shh9DQ23L16oXSZKB2JxpL7iMy2E0S9d517ptA1P8iw0alkPtQcrKH7ru31rYtKwF499HkTu+DRzq3TCKDFRQ==",
-          "dev": true,
-          "requires": {
-            "globby": "^11.0.1",
-            "graceful-fs": "^4.2.4",
-            "is-glob": "^4.0.1",
-            "is-path-cwd": "^2.2.0",
-            "is-path-inside": "^3.0.2",
-            "p-map": "^4.0.0",
-            "rimraf": "^3.0.2",
-            "slash": "^3.0.0"
-          }
-        },
-        "fill-range": {
-          "version": "7.0.1",
-          "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-          "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
-          "dev": true,
-          "requires": {
-            "to-regex-range": "^5.0.1"
-          }
-        },
-        "find-cache-dir": {
-          "version": "3.3.1",
-          "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-3.3.1.tgz",
-          "integrity": "sha512-t2GDMt3oGC/v+BMwzmllWDuJF/xcDtE5j/fCGbqDD7OLuJkj0cfh1YSA5VKPvwMeLFLNDBkwOKZ2X85jGLVftQ==",
-          "dev": true,
-          "requires": {
-            "commondir": "^1.0.1",
-            "make-dir": "^3.0.2",
-            "pkg-dir": "^4.1.0"
-          }
-        },
-        "fsevents": {
-          "version": "2.3.2",
-          "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
-          "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
-          "dev": true,
-          "optional": true
-        },
-        "glob-parent": {
-          "version": "5.1.1",
-          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.1.tgz",
-          "integrity": "sha512-FnI+VGOpnlGHWZxthPGR+QhR78fuiK0sNLkHQv+bL9fQi57lNNdquIbna/WrfROrolq8GK5Ek6BiMwqL/voRYQ==",
-          "dev": true,
-          "requires": {
-            "is-glob": "^4.0.1"
-          }
-        },
-        "globby": {
-          "version": "11.0.2",
-          "resolved": "https://registry.npmjs.org/globby/-/globby-11.0.2.tgz",
-          "integrity": "sha512-2ZThXDvvV8fYFRVIxnrMQBipZQDr7MxKAmQK1vujaj9/7eF0efG7BPUKJ7jP7G5SLF37xKDXvO4S/KKLj/Z0og==",
-          "dev": true,
-          "requires": {
-            "array-union": "^2.1.0",
-            "dir-glob": "^3.0.1",
-            "fast-glob": "^3.1.1",
-            "ignore": "^5.1.4",
-            "merge2": "^1.3.0",
-            "slash": "^3.0.0"
-          }
-        },
-        "ignore": {
-          "version": "5.1.8",
-          "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.1.8.tgz",
-          "integrity": "sha512-BMpfD7PpiETpBl/A6S498BaIJ6Y/ABT93ETbby2fP00v4EbvPBXWEoaR1UBPKs3iR53pJY7EtZk5KACI57i1Uw==",
+        "emoji-regex": {
+          "version": "7.0.3",
+          "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-7.0.3.tgz",
+          "integrity": "sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA==",
          "dev": true
        },
+        "find-up": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
+          "integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==",
+          "dev": true,
+          "requires": {
+            "locate-path": "^3.0.0"
+          }
+        },
+        "import-local": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/import-local/-/import-local-2.0.0.tgz",
+          "integrity": "sha512-b6s04m3O+s3CGSbqDIyP4R6aAwAeYlVq9+WUWep6iHa8ETRf9yei1U48C5MmfJmV9AiLYYBKPMq/W+/WRpQmCQ==",
+          "dev": true,
+          "requires": {
+            "pkg-dir": "^3.0.0",
+            "resolve-cwd": "^2.0.0"
+          }
+        },
        "is-absolute-url": {
          "version": "3.0.3",
          "resolved": "https://registry.npmjs.org/is-absolute-url/-/is-absolute-url-3.0.3.tgz",
          "integrity": "sha512-opmNIX7uFnS96NtPmhWQgQx6/NYFgsUXYMllcfzwWKUMwfo8kku1TvE6hkNcH+Q1ts5cMVrsY7j0bxXQDciu9Q==",
          "dev": true
        },
-        "is-binary-path": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
-          "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
-          "dev": true,
-          "requires": {
-            "binary-extensions": "^2.0.0"
-          }
-        },
-        "is-number": {
-          "version": "7.0.0",
-          "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
-          "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+        "is-fullwidth-code-point": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
+          "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=",
          "dev": true
        },
-        "is-path-inside": {
-          "version": "3.0.2",
-          "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.2.tgz",
-          "integrity": "sha512-/2UGPSgmtqwo1ktx8NDHjuPwZWmHhO+gj0f93EkhLB5RgW9RZevWYYlIkS6zePc6U2WpOdQYIwHe9YC4DWEBVg==",
+        "locate-path": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
+          "integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==",
+          "dev": true,
+          "requires": {
+            "p-locate": "^3.0.0",
+            "path-exists": "^3.0.0"
+          }
+        },
+        "ms": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+          "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
          "dev": true
        },
-        "make-dir": {
-          "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
-          "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==",
+        "p-locate": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz",
+          "integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==",
          "dev": true,
          "requires": {
-            "semver": "^6.0.0"
+            "p-limit": "^2.0.0"
          }
        },
-        "p-map": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/p-map/-/p-map-4.0.0.tgz",
-          "integrity": "sha512-/bjOqmgETBYB5BoEeGVea8dmvHb2m9GLy1E9W43yeyfP6QQCZGFNa+XRceJEuDB6zqr+gKpIAmlLebMpykw/MQ==",
+        "path-exists": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
+          "integrity": "sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=",
+          "dev": true
+        },
+        "resolve-cwd": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/resolve-cwd/-/resolve-cwd-2.0.0.tgz",
+          "integrity": "sha1-AKn3OHVW4nA46uIyyqNypqWbZlo=",
          "dev": true,
          "requires": {
-            "aggregate-error": "^3.0.0"
+            "resolve-from": "^3.0.0"
          }
        },
-        "pkg-dir": {
-          "version": "4.2.0",
-          "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
-          "integrity": "sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==",
-          "dev": true,
-          "requires": {
-            "find-up": "^4.0.0"
-          }
-        },
-        "readdirp": {
-          "version": "3.5.0",
-          "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.5.0.tgz",
-          "integrity": "sha512-cMhu7c/8rdhkHXWsY+osBhfSy0JikwpHK/5+imo+LpeasTF8ouErHrlYkwT0++njiyuDvc7OFY5T3ukvZ8qmFQ==",
-          "dev": true,
-          "requires": {
-            "picomatch": "^2.2.1"
-          }
-        },
-        "rimraf": {
-          "version": "3.0.2",
-          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
-          "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
-          "dev": true,
-          "requires": {
-            "glob": "^7.1.3"
-          }
+        "resolve-from": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-3.0.0.tgz",
+          "integrity": "sha1-six699nWiBvItuZTM17rywoYh0g=",
+          "dev": true
        },
        "schema-utils": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.0.0.tgz",
-          "integrity": "sha512-6D82/xSzO094ajanoOSbe4YvXWMfn2A//8Y1+MUqFAJul5Bs+yn36xbK9OtNDcRVSBJ9jjeoXftM6CfztsjOAA==",
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-1.0.0.tgz",
+          "integrity": "sha512-i27Mic4KovM/lnGsy8whRCHhc7VicJajAjTrYg11K9zfZXnYIt4k5F+kZkwjnrhKzLic/HLU4j11mjsz2G/75g==",
          "dev": true,
          "requires": {
-            "@types/json-schema": "^7.0.6",
-            "ajv": "^6.12.5",
-            "ajv-keywords": "^3.5.2"
+            "ajv": "^6.1.0",
+            "ajv-errors": "^1.0.0",
+            "ajv-keywords": "^3.1.0"
          }
        },
        "semver": {
@@ -20628,32 +22229,120 @@
          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
          "dev": true
        },
-        "slash": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
-          "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
-          "dev": true
+        "string-width": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz",
+          "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==",
+          "dev": true,
+          "requires": {
+            "emoji-regex": "^7.0.1",
+            "is-fullwidth-code-point": "^2.0.0",
+            "strip-ansi": "^5.1.0"
+          },
+          "dependencies": {
+            "ansi-regex": {
+              "version": "4.1.0",
+              "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
+              "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==",
+              "dev": true
+            },
+            "strip-ansi": {
+              "version": "5.2.0",
+              "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
+              "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
+              "dev": true,
+              "requires": {
+                "ansi-regex": "^4.1.0"
+              }
+            }
+          }
        },
        "strip-ansi": {
-          "version": "6.0.0",
-          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz",
-          "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==",
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
+          "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
          "dev": true,
          "requires": {
-            "ansi-regex": "^5.0.0"
+            "ansi-regex": "^2.0.0"
          }
        },
-        "to-regex-range": {
-          "version": "5.0.1",
-          "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
-          "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+        "wrap-ansi": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-5.1.0.tgz",
+          "integrity": "sha512-QC1/iN/2/RPVJ5jYK8BGttj5z83LmSKmvbvrXPNCLZSEb32KKVDJDl/MOt2N01qU2H/FkzEa9PKto1BqDjtd7Q==",
          "dev": true,
          "requires": {
-            "is-number": "^7.0.0"
+            "ansi-styles": "^3.2.0",
+            "string-width": "^3.0.0",
+            "strip-ansi": "^5.0.0"
+          },
+          "dependencies": {
+            "ansi-regex": {
+              "version": "4.1.0",
+              "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
+              "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==",
+              "dev": true
+            },
+            "strip-ansi": {
+              "version": "5.2.0",
+              "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
+              "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
+              "dev": true,
+              "requires": {
+                "ansi-regex": "^4.1.0"
+              }
+            }
+          }
+        },
+        "ws": {
+          "version": "6.2.1",
+          "resolved": "https://registry.npmjs.org/ws/-/ws-6.2.1.tgz",
+          "integrity": "sha512-GIyAXC2cB7LjvpgMt9EKS2ldqr0MTrORaleiOno6TweZ6r3TKtoFQWay/2PceJ3RuBasOHzXNn5Lrw1X0bEjqA==",
+          "dev": true,
+          "requires": {
+            "async-limiter": "~1.0.0"
+          }
+        },
+        "yargs": {
+          "version": "13.3.2",
+          "resolved": "https://registry.npmjs.org/yargs/-/yargs-13.3.2.tgz",
+          "integrity": "sha512-AX3Zw5iPruN5ie6xGRIDgqkT+ZhnRlZMLMHAs8tg7nRruy2Nb+i5o9bwghAogtM08q1dpr2LVoS8KSTMYpWXUw==",
+          "dev": true,
+          "requires": {
+            "cliui": "^5.0.0",
+            "find-up": "^3.0.0",
+            "get-caller-file": "^2.0.1",
+            "require-directory": "^2.1.1",
+            "require-main-filename": "^2.0.0",
+            "set-blocking": "^2.0.0",
+            "string-width": "^3.0.0",
+            "which-module": "^2.0.0",
+            "y18n": "^4.0.0",
+            "yargs-parser": "^13.1.2"
+          }
+        },
+        "yargs-parser": {
+          "version": "13.1.2",
+          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-13.1.2.tgz",
+          "integrity": "sha512-3lbsNRf/j+A4QuSZfDRA7HRSfWrzO0YjqTJd5kjAq37Zep1CEgaYmrH9Q3GwPiB9cHyd1Y1UwggGhJGoxipbzg==",
+          "dev": true,
+          "requires": {
+            "camelcase": "^5.0.0",
+            "decamelize": "^1.2.0"
          }
        }
      }
    },
+    "webpack-log": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/webpack-log/-/webpack-log-2.0.0.tgz",
+      "integrity": "sha512-cX8G2vR/85UYG59FgkoMamwHUIkSSlV3bBMRsbxVXVUk2j6NleCKjQ/WE9eYg9WY4w25O9w8wKP4rzNZFmUcUg==",
+      "dev": true,
+      "requires": {
+        "ansi-colors": "^3.0.0",
+        "uuid": "^3.3.2"
+      }
+    },
    "webpack-merge": {
      "version": "5.2.0",
      "resolved": "https://registry.npmjs.org/webpack-merge/-/webpack-merge-5.2.0.tgz",
@@ -20726,51 +22415,24 @@
        "isexe": "^2.0.0"
      }
    },
+    "which-boxed-primitive": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz",
+      "integrity": "sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==",
+      "requires": {
+        "is-bigint": "^1.0.1",
+        "is-boolean-object": "^1.1.0",
+        "is-number-object": "^1.0.4",
+        "is-string": "^1.0.5",
+        "is-symbol": "^1.0.3"
+      }
+    },
    "which-module": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.0.tgz",
      "integrity": "sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=",
      "dev": true
    },
-    "which-typed-array": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.4.tgz",
-      "integrity": "sha512-49E0SpUe90cjpoc7BOJwyPHRqSAd12c10Qm2amdEZrJPCY2NDxaW01zHITrem+rnETY3dwrbH3UUrUwagfCYDA==",
-      "dev": true,
-      "requires": {
-        "available-typed-arrays": "^1.0.2",
-        "call-bind": "^1.0.0",
-        "es-abstract": "^1.18.0-next.1",
-        "foreach": "^2.0.5",
-        "function-bind": "^1.1.1",
-        "has-symbols": "^1.0.1",
-        "is-typed-array": "^1.1.3"
-      },
-      "dependencies": {
-        "es-abstract": {
-          "version": "1.18.0-next.2",
-          "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.18.0-next.2.tgz",
-          "integrity": "sha512-Ih4ZMFHEtZupnUh6497zEL4y2+w8+1ljnCyaTa+adcoafI1GOvMwFlDjBLfWR7y9VLfrjRJe9ocuHY1PSR9jjw==",
-          "dev": true,
-          "requires": {
-            "call-bind": "^1.0.2",
-            "es-to-primitive": "^1.2.1",
-            "function-bind": "^1.1.1",
-            "get-intrinsic": "^1.0.2",
-            "has": "^1.0.3",
-            "has-symbols": "^1.0.1",
-            "is-callable": "^1.2.2",
-            "is-negative-zero": "^2.0.1",
-            "is-regex": "^1.1.1",
-            "object-inspect": "^1.9.0",
-            "object-keys": "^1.1.1",
-            "object.assign": "^4.1.2",
-            "string.prototype.trimend": "^1.0.3",
-            "string.prototype.trimstart": "^1.0.3"
-          }
-        }
-      }
-    },
    "wildcard": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/wildcard/-/wildcard-2.0.0.tgz",
@@ -20811,6 +22473,15 @@
      "integrity": "sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==",
      "dev": true
    },
+    "worker-farm": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/worker-farm/-/worker-farm-1.7.0.tgz",
+      "integrity": "sha512-rvw3QTZc8lAxyVrqcSGVm5yP/IJ2UcB3U0graE3LCFoZ0Yn2x4EoVSqJKdB/T5M+FLcRPjz4TDacRf3OCfNUzw==",
+      "dev": true,
+      "requires": {
+        "errno": "~0.1.7"
+      }
+    },
    "worker-rpc": {
      "version": "0.1.1",
      "resolved": "https://registry.npmjs.org/worker-rpc/-/worker-rpc-0.1.1.tgz",
@@ -20923,8 +22594,7 @@
      "version": "4.0.2",
      "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
      "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==",
-      "dev": true,
-      "optional": true
+      "dev": true
    },
    "y18n": {
      "version": "4.0.1",
@@ -20992,12 +22662,6 @@
        "buffer-crc32": "~0.2.3",
        "fd-slicer": "~1.1.0"
      }
-    },
-    "yocto-queue": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
-      "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
-      "dev": true
    }
  }
 }
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
    "i18n_extract": "BABEL_ENV=i18n fedx-scripts babel src --quiet > /dev/null",
    "is-es5": "es-check es5 ./dist/*.js",
    "lint": "fedx-scripts eslint --ext .js --ext .jsx .",
+    "lint:fix": "fedx-scripts eslint --fix --ext .js --ext .jsx .",
    "snapshot": "fedx-scripts jest --updateSnapshot",
    "start": "fedx-scripts webpack-dev-server --progress",
    "test": "fedx-scripts jest --coverage --passWithNoTests"
@@ -38,7 +39,7 @@
    "@edx/frontend-component-footer": "10.1.4",
    "@edx/frontend-enterprise": "4.2.3",
    "@edx/frontend-platform": "1.8.4",
-    "@edx/paragon": "12.3.1",
+    "@edx/paragon": "14.8.0",
    "@fortawesome/fontawesome-svg-core": "1.2.34",
    "@fortawesome/free-brands-svg-icons": "5.13.1",
    "@fortawesome/free-regular-svg-icons": "5.13.1",
@@ -47,6 +48,8 @@
    "@reduxjs/toolkit": "1.3.6",
    "classnames": "2.2.6",
    "core-js": "3.6.5",
+    "js-cookie": "2.2.1",
+    "lodash.camelcase": "^4.3.0",
    "prop-types": "15.7.2",
    "react": "16.13.1",
    "react-break": "1.3.2",
@@ -62,13 +65,13 @@
    "truncate-html": "1.0.3"
  },
  "devDependencies": {
-    "@edx/frontend-build": "git+https://github.com/edx/frontend-build.git#alpha",
+    "@edx/frontend-build": "5.5.5",
    "@testing-library/dom": "7.16.3",
    "@testing-library/jest-dom": "5.10.1",
    "@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",
--- a/src/alerts/access-expiration-alert/AccessExpirationAlert.jsx
+++ b/src/alerts/access-expiration-alert/AccessExpirationAlert.jsx
@@ -1,5 +1,6 @@
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
+import { sendTrackEvent } from '@edx/frontend-platform/analytics';
 import {
  FormattedMessage, FormattedDate, injectIntl, intlShape,
 } from '@edx/frontend-platform/i18n';
@@ -7,11 +8,24 @@ import { Hyperlink } from '@edx/paragon';

 import { Alert, ALERT_TYPES } from '../../generic/user-messages';
 import messages from './messages';
+import AccessExpirationAlertMMP2P from './AccessExpirationAlertMMP2P';

 function AccessExpirationAlert({ intl, payload }) {
+  /** [MM-P2P] Experiment */
+  const [showMMP2P, setShowMMP2P] = useState(!!window.experiment__home_alert_bShowMMP2P);
+  if (window.experiment__home_alert_showMMP2P === undefined) {
+    window.experiment__home_alert_showMMP2P = (val) => {
+      window.experiment__home_alert_bShowMMP2P = !!val;
+      setShowMMP2P(!!val);
+    };
+  }
+
  const {
    accessExpiration,
+    courseId,
+    org,
    userTimezone,
+    analyticsPageName,
  } = payload;
  const timezoneFormatArgs = userTimezone ? { timeZone: userTimezone } : {};

@@ -49,6 +63,24 @@ function AccessExpirationAlert({ intl, payload }) {
    );
  }

+  /** [MM-P2P] Experiment */
+  if (showMMP2P) {
+    return (
+      <AccessExpirationAlertMMP2P payload={payload} />
+    );
+  }
+
+  const logClick = () => {
+    sendTrackEvent('edx.bi.ecommerce.upsell_links_clicked', {
+      org_key: org,
+      courserun_key: courseId,
+      linkCategory: 'FBE_banner',
+      linkName: `${analyticsPageName}_audit_access_expires`,
+      linkType: 'link',
+      pageName: analyticsPageName,
+    });
+  };
+
  let deadlineMessage = null;
  if (upgradeDeadline && upgradeUrl) {
    deadlineMessage = (
@@ -75,6 +107,7 @@ function AccessExpirationAlert({ intl, payload }) {
          className="font-weight-bold"
          style={{ textDecoration: 'underline' }}
          destination={upgradeUrl}
+          onClick={logClick}
        >
          {intl.formatMessage(messages.upgradeNow)}
        </Hyperlink>
@@ -133,7 +166,10 @@ AccessExpirationAlert.propTypes = {
      upgradeDeadline: PropTypes.string,
      upgradeUrl: PropTypes.string,
    }).isRequired,
+    courseId: PropTypes.string.isRequired,
+    org: PropTypes.string.isRequired,
    userTimezone: PropTypes.string.isRequired,
+    analyticsPageName: PropTypes.string.isRequired,
  }).isRequired,
 };

--- a/src/alerts/access-expiration-alert/AccessExpirationAlertMMP2P.jsx
+++ b/src/alerts/access-expiration-alert/AccessExpirationAlertMMP2P.jsx
@@ -0,0 +1,80 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FormattedDate, injectIntl } from '@edx/frontend-platform/i18n';
+import { Hyperlink } from '@edx/paragon';
+
+import { Alert, ALERT_TYPES } from '../../generic/user-messages';
+import messages from './messages';
+
+function AccessExpirationAlertMMP2P({ payload }) {
+  const {
+    accessExpiration,
+    userTimezone,
+  } = payload;
+  const timezoneFormatArgs = userTimezone ? { timeZone: userTimezone } : {};
+
+  if (!accessExpiration) {
+    return null;
+  }
+
+  const {
+    expirationDate,
+    upgradeDeadline,
+    upgradeUrl,
+  } = accessExpiration;
+
+  let deadlineMessage = null;
+  const formatDate = (val, key) => (
+    <FormattedDate
+      key={`accessExpiration.${key}`}
+      day="numeric"
+      month="short"
+      year="numeric"
+      value={val}
+      {...timezoneFormatArgs}
+    />
+  );
+
+  if (upgradeDeadline && upgradeUrl) {
+    deadlineMessage = (
+      <>
+        Upgrade by {formatDate(upgradeDeadline, 'upgradeDesc')} to unlock unlimited access to all course activities, including graded assignments.
+        &nbsp;
+        <Hyperlink
+          className="font-weight-bold"
+          style={{ textDecoration: 'underline' }}
+          destination={upgradeUrl}
+        >
+          {messages.upgradeNow.defaultMessage}
+        </Hyperlink>
+      </>
+    );
+  }
+
+  return (
+    <Alert type={ALERT_TYPES.INFO}>
+      <span className="font-weight-bold">
+        Unlock full course content by {formatDate(upgradeDeadline, 'upgradeTitle')}
+      </span>
+      <br />
+      {deadlineMessage}
+      <br />
+      You lose all access to the first two weeks of scheduled content
+      on {formatDate(expirationDate, 'expirationBody')}.
+    </Alert>
+  );
+}
+
+AccessExpirationAlertMMP2P.propTypes = {
+  payload: PropTypes.shape({
+    accessExpiration: PropTypes.shape({
+      expirationDate: PropTypes.string.isRequired,
+      masqueradingExpiredCourse: PropTypes.bool.isRequired,
+      upgradeDeadline: PropTypes.string,
+      upgradeUrl: PropTypes.string,
+    }).isRequired,
+    userTimezone: PropTypes.string.isRequired,
+  }).isRequired,
+};
+
+export default injectIntl(AccessExpirationAlertMMP2P);
--- a/src/alerts/access-expiration-alert/hooks.js
+++ b/src/alerts/access-expiration-alert/hooks.js
@@ -3,11 +3,14 @@ import { useAlert } from '../../generic/user-messages';

 const AccessExpirationAlert = React.lazy(() => import('./AccessExpirationAlert'));

-function useAccessExpirationAlert(accessExpiration, userTimezone, topic) {
+function useAccessExpirationAlert(accessExpiration, courseId, org, userTimezone, topic, analyticsPageName) {
  const isVisible = !!accessExpiration; // If it exists, show it.
  const payload = {
    accessExpiration,
+    courseId,
+    org,
    userTimezone,
+    analyticsPageName,
  };

  useAlert(isVisible, {
--- a/src/alerts/offer-alert/OfferAlert.jsx
+++ b/src/alerts/offer-alert/OfferAlert.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { sendTrackEvent } from '@edx/frontend-platform/analytics';
 import {
  FormattedMessage, FormattedDate, injectIntl, intlShape,
 } from '@edx/frontend-platform/i18n';
@@ -11,7 +12,10 @@ import messages from './messages';

 function OfferAlert({ intl, payload }) {
  const {
+    analyticsPageName,
+    courseId,
    offer,
+    org,
    userTimezone,
  } = payload;

@@ -27,10 +31,20 @@ function OfferAlert({ intl, payload }) {
  } = offer;
  const timezoneFormatArgs = userTimezone ? { timeZone: userTimezone } : {};

+  const logClick = () => {
+    sendTrackEvent('edx.bi.ecommerce.upsell_links_clicked', {
+      org_key: org,
+      courserun_key: courseId,
+      linkCategory: 'welcome',
+      linkName: `${analyticsPageName}_welcome`,
+      linkType: 'link',
+      pageName: analyticsPageName,
+    });
+  };
+
  return (
    <Alert type={ALERT_TYPES.INFO}>
-      {/* the first-purchase-offer-banner class can be removed post REV-1512 experiment */}
-      <span className="font-weight-bold first-purchase-offer-banner">
+      <span className="font-weight-bold">
        <FormattedMessage
          id="learning.offer.header"
          defaultMessage="Upgrade by {date} and save {percentage}% [{fullPricing}]"
@@ -62,6 +76,7 @@ function OfferAlert({ intl, payload }) {
        className="font-weight-bold"
        style={{ textDecoration: 'underline' }}
        destination={upgradeUrl}
+        onClick={logClick}
      >
        {intl.formatMessage(messages.upgradeNow)}
      </Hyperlink>
@@ -72,6 +87,7 @@ function OfferAlert({ intl, payload }) {
 OfferAlert.propTypes = {
  intl: intlShape.isRequired,
  payload: PropTypes.shape({
+    courseId: PropTypes.string.isRequired,
    offer: PropTypes.shape({
      code: PropTypes.string.isRequired,
      discountedPrice: PropTypes.string.isRequired,
@@ -80,7 +96,9 @@ OfferAlert.propTypes = {
      percentage: PropTypes.number.isRequired,
      upgradeUrl: PropTypes.string.isRequired,
    }).isRequired,
+    org: PropTypes.string.isRequired,
    userTimezone: PropTypes.string.isRequired,
+    analyticsPageName: PropTypes.string.isRequired,
  }).isRequired,
 };

--- a/src/alerts/offer-alert/hooks.js
+++ b/src/alerts/offer-alert/hooks.js
@@ -3,10 +3,13 @@ import { useAlert } from '../../generic/user-messages';

 const OfferAlert = React.lazy(() => import('./OfferAlert'));

-export function useOfferAlert(offer, userTimezone, topic) {
+export function useOfferAlert(courseId, offer, org, userTimezone, topic, analyticsPageName) {
  const isVisible = !!offer; // if it exists, show it.
  const payload = {
+    analyticsPageName,
+    courseId,
    offer,
+    org,
    userTimezone,
  };

--- a/src/course-home/data/factories/courseBlocks.factory.js
+++ b/src/course-home/data/factories/courseBlocks.factory.js
@@ -1,92 +0,0 @@
-import { Factory } from 'rosie'; // eslint-disable-line import/no-extraneous-dependencies
-import './block.factory';
-
-// Generates an Array of block IDs, either from a single block or an array of blocks.
-const getIds = (attr) => {
-  const blocks = Array.isArray(attr) ? attr : [attr];
-  return blocks.map(block => block.id);
-};
-
-// Generates an Object in { [block.id]: block } format, either from a single block or an array of blocks.
-const getBlocks = (attr) => {
-  const blocks = Array.isArray(attr) ? attr : [attr];
-  // eslint-disable-next-line no-return-assign,no-sequences
-  return blocks.reduce((acc, block) => (acc[block.id] = block, acc), {});
-};
-
-Factory.define('courseBlocks')
-  .option('courseId', 'course-v1:edX+DemoX+Demo_Course')
-  .option('units', ['courseId'], courseId => ([
-    Factory.build(
-      'block',
-      { type: 'vertical' },
-      { courseId },
-    ),
-  ]))
-  .option('sequence', ['courseId', 'units'], (courseId, child) => Factory.build(
-    'block',
-    { type: 'sequential', children: getIds(child) },
-    { courseId },
-  ))
-  .option('section', ['courseId', 'sequence'], (courseId, child) => Factory.build(
-    'block',
-    { type: 'chapter', children: getIds(child) },
-    { courseId },
-  ))
-  .option('course', ['courseId', 'section'], (courseId, child) => Factory.build(
-    'block',
-    { type: 'course', children: getIds(child) },
-    { courseId },
-  ))
-  .attr(
-    'blocks',
-    ['course', 'section', 'sequence', 'units'],
-    (course, section, sequence, units) => ({
-      [course.id]: course,
-      ...getBlocks(section),
-      ...getBlocks(sequence),
-      ...getBlocks(units),
-    }),
-  )
-  .attr('root', ['course'], course => course.id);
-
-/**
- * Builds a course with a single chapter, sequence, and unit.
- */
-export default function buildSimpleCourseBlocks(courseId, title, options = {}) {
-  const sequenceBlock = options.sequenceBlock || [Factory.build(
-    'block',
-    { type: 'sequential' },
-    { courseId },
-  )];
-  const sectionBlock = options.sectionBlock || Factory.build(
-    'block',
-    {
-      type: 'chapter',
-      display_name: 'Title of Section',
-      complete: options.complete || false,
-      resume_block: options.resumeBlock || false,
-      children: sequenceBlock.map(block => block.id),
-    },
-    { courseId },
-  );
-  const courseBlock = options.courseBlock || Factory.build(
-    'block',
-    { type: 'course', display_name: title, children: [sectionBlock.id] },
-    { courseId },
-  );
-  return {
-    courseBlocks: options.courseBlocks || Factory.build(
-      'courseBlocks',
-      { courseId },
-      {
-        sequence: sequenceBlock,
-        section: sectionBlock,
-        course: courseBlock,
-      },
-    ),
-    sequenceBlock,
-    sectionBlock,
-    courseBlock,
-  };
-}
--- a/src/course-home/data/factories/courseHomeMetadata.factory.js
+++ b/src/course-home/data/factories/courseHomeMetadata.factory.js
@@ -1,90 +1,13 @@
 import { Factory } from 'rosie'; // eslint-disable-line import/no-extraneous-dependencies

+import courseMetadataBase from '../../../shared/data/__factories__/courseMetadataBase.factory';
+
 Factory.define('courseHomeMetadata')
-  .sequence(
-    'courseId', (courseId) => `course-v1:edX+DemoX+Demo_Course_${courseId}`,
-  )
+  .extend(courseMetadataBase)
  .option('host', 'http://localhost:18000')
  .attrs({
-    is_staff: false,
-    original_user_is_staff: false,
-    number: 'DemoX',
-    org: 'edX',
    title: 'Demonstration Course',
    is_self_paced: false,
    is_enrolled: false,
-  })
-  .attr(
-    'tabs', ['courseId', 'host'], (courseId, host) => {
-      const tabs = [
-        Factory.build(
-          'tab',
-          {
-            title: 'Course',
-            priority: 0,
-            slug: 'courseware',
-            type: 'courseware',
-          },
-          { courseId, path: 'course/' },
-        ),
-        Factory.build(
-          'tab',
-          {
-            title: 'Discussion',
-            priority: 1,
-            slug: 'discussion',
-            type: 'discussion',
-          },
-          { courseId, path: 'discussion/forum/' },
-        ),
-        Factory.build(
-          'tab',
-          {
-            title: 'Wiki',
-            priority: 2,
-            slug: 'wiki',
-            type: 'wiki',
-          },
-          { courseId, path: 'course_wiki' },
-        ),
-        Factory.build(
-          'tab',
-          {
-            title: 'Progress',
-            priority: 3,
-            slug: 'progress',
-            type: 'progress',
-          },
-          { courseId, path: 'progress' },
-        ),
-        Factory.build(
-          'tab',
-          {
-            title: 'Instructor',
-            priority: 4,
-            slug: 'instructor',
-            type: 'instructor',
-          },
-          { courseId, path: 'instructor' },
-        ),
-        Factory.build(
-          'tab',
-          {
-            title: 'Dates',
-            priority: 5,
-            slug: 'dates',
-            type: 'dates',
-          },
-          { courseId, path: 'dates' },
-        ),
-      ];
-
-      return tabs.map(
-        tab => ({
-          tab_id: tab.slug,
-          title: tab.title,
-          url: `${host}${tab.url}`,
-        }),
-      );
-    },
-  );
+    can_load_courseware: false,
+  });
--- a/src/course-home/data/factories/index.js
+++ b/src/course-home/data/factories/index.js
@@ -1,3 +1,5 @@
 import './courseHomeMetadata.factory';
 import './datesTabData.factory';
 import './outlineTabData.factory';
+import './progressTabData.factory';
+import './upgradeCardData.factory';
--- a/src/course-home/data/factories/outlineTabData.factory.js
+++ b/src/course-home/data/factories/outlineTabData.factory.js
@@ -1,23 +1,18 @@
 import { Factory } from 'rosie'; // eslint-disable-line import/no-extraneous-dependencies

-import buildSimpleCourseBlocks from './courseBlocks.factory';
+import { buildMinimalCourseBlocks } from '../../../shared/data/__factories__/courseBlocks.factory';

 Factory.define('outlineTabData')
  .option('courseId', 'course-v1:edX+DemoX+Demo_Course')
  .option('host', 'http://localhost:18000')
-  .option('dateBlocks', [])
-  .attr('course_tools', ['host', 'courseId'], (host, courseId) => ([{
-    analytics_id: 'edx.bookmarks',
-    title: 'Bookmarks',
-    url: `${host}/courses/${courseId}/bookmarks/`,
-  }]))
+  .option('date_blocks', [])
  .attr('course_blocks', ['courseId'], courseId => {
-    const { courseBlocks } = buildSimpleCourseBlocks(courseId);
+    const { courseBlocks } = buildMinimalCourseBlocks(courseId);
    return {
      blocks: courseBlocks.blocks,
    };
  })
-  .attr('dates_widget', ['dateBlocks'], (dateBlocks) => ({
+  .attr('dates_widget', ['date_blocks'], (dateBlocks) => ({
    course_date_blocks: dateBlocks,
    user_timezone: 'UTC',
  }))
@@ -35,11 +30,23 @@ Factory.define('outlineTabData')
  }))
  .attrs({
    access_expiration: null,
-    can_show_upgrade_sock: true,
+    can_show_upgrade_sock: false,
    course_goals: {
      goal_options: [],
      selected_goal: null,
    },
+    course_tools: [
+      {
+        analytics_id: 'edx.bookmarks',
+        title: 'Bookmarks',
+        url: 'https://example.com/bookmarks',
+      },
+      {
+        analytics_id: 'edx.tool.verified_upgrade',
+        title: 'Upgrade to Verified',
+        url: 'https://example.com/upgrade',
+      },
+    ],
    dates_banner_info: {
      content_type_gating_enabled: false,
      missed_gated_content: false,
--- a/src/course-home/data/factories/progressTabData.factory.js
+++ b/src/course-home/data/factories/progressTabData.factory.js
@@ -0,0 +1,76 @@
+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({
+    end: '3027-03-31T00:00:00Z',
+    certificate_data: {},
+    completion_summary: {
+      complete_count: 1,
+      incomplete_count: 1,
+      locked_count: 0,
+    },
+    course_grade: {
+      letter_grade: null,
+      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,
+      },
+    },
+    has_scheduled_content: false,
+    studio_url: 'http://studio.edx.org/settings/grading/course-v1:edX+Test+run',
+    user_has_passing_grade: false,
+    verification_data: {
+      link: null,
+      status: 'none',
+      status_date: null,
+    },
+    verified_mode: null,
+  });
--- a/src/course-home/data/factories/upgradeCardData.factory.js
+++ b/src/course-home/data/factories/upgradeCardData.factory.js
@@ -0,0 +1,20 @@
+import { Factory } from 'rosie'; // eslint-disable-line import/no-extraneous-dependencies
+
+Factory.define('upgradeCardData')
+  .option('host', 'http://localhost:18000')
+  .option('dateBlocks', [])
+  .option('offer', null)
+  .option('userTimezone', null)
+  .option('accessExpiration', null)
+  .option('contentTypeGatingEnabled', false)
+  .attr('courseId', 'course-v1:edX+DemoX+Demo_Course')
+  .attr('verifiedMode', ['host'], (host) => ({
+    access_expiration_date: '2050-01-01T12:00:00',
+    currency: 'USD',
+    currencySymbol: '$',
+    price: 149,
+    sku: 'ABCD1234',
+    upgradeUrl: `${host}/dashboard`,
+  }))
+  .attr('org', 'edX')
+  .attr('timeOffsetMillis', 0);
--- a/src/course-home/data/snapshots/redux.test.js.snap
+++ b/src/course-home/data/snapshots/redux.test.js.snap
@@ -18,7 +18,7 @@ Object {
  "models": Object {
    "courseHomeMeta": Object {
      "course-v1:edX+DemoX+Demo_Course_1": Object {
-        "courseId": "course-v1:edX+DemoX+Demo_Course_1",
+        "canLoadCourseware": false,
        "id": "course-v1:edX+DemoX+Demo_Course_1",
        "isEnrolled": false,
        "isSelfPaced": false,
@@ -59,6 +59,11 @@ Object {
          },
        ],
        "title": "Demonstration Course",
+        "verifiedMode": Object {
+          "currencySymbol": "$",
+          "price": 10,
+          "upgradeUrl": "test",
+        },
      },
    },
    "dates": Object {
@@ -282,6 +287,9 @@ Object {
      },
    },
  },
+  "recommendations": Object {
+    "recommendationsStatus": "loading",
+  },
 }
 `;

@@ -303,7 +311,7 @@ Object {
  "models": Object {
    "courseHomeMeta": Object {
      "course-v1:edX+DemoX+Demo_Course_1": Object {
-        "courseId": "course-v1:edX+DemoX+Demo_Course_1",
+        "canLoadCourseware": false,
        "id": "course-v1:edX+DemoX+Demo_Course_1",
        "isEnrolled": false,
        "isSelfPaced": false,
@@ -344,15 +352,22 @@ Object {
          },
        ],
        "title": "Demonstration Course",
+        "verifiedMode": Object {
+          "currencySymbol": "$",
+          "price": 10,
+          "upgradeUrl": "test",
+        },
      },
    },
    "outline": Object {
      "course-v1:edX+DemoX+Demo_Course_1": Object {
        "accessExpiration": null,
-        "canShowUpgradeSock": true,
+        "canShowUpgradeSock": false,
        "courseBlocks": Object {
          "courses": Object {
            "block-v1:edX+DemoX+Demo_Course+type@course+block@bcdabcdabcdabcdabcdabcdabcdabcd3": Object {
+              "effortActivities": undefined,
+              "effortTime": undefined,
              "id": "course-v1:edX+DemoX+Demo_Course_1",
              "sectionIds": Array [
                "block-v1:edX+DemoX+Demo_Course+type@chapter+block@bcdabcdabcdabcdabcdabcdabcdabcd2",
@@ -364,6 +379,8 @@ Object {
            "block-v1:edX+DemoX+Demo_Course+type@chapter+block@bcdabcdabcdabcdabcdabcdabcdabcd2": Object {
              "complete": false,
              "courseId": "course-v1:edX+DemoX+Demo_Course_1",
+              "effortActivities": 2,
+              "effortTime": 15,
              "id": "block-v1:edX+DemoX+Demo_Course+type@chapter+block@bcdabcdabcdabcdabcdabcdabcdabcd2",
              "resumeBlock": false,
              "sequenceIds": Array [
@@ -377,11 +394,14 @@ Object {
              "complete": false,
              "description": null,
              "due": null,
+              "effortActivities": undefined,
+              "effortTime": undefined,
              "icon": null,
              "id": "block-v1:edX+DemoX+Demo_Course+type@sequential+block@bcdabcdabcdabcdabcdabcdabcdabcd1",
+              "legacyWebUrl": "http://localhost:18000/courses/course-v1:edX+DemoX+Demo_Course/jump_to/block-v1:edX+DemoX+Demo_Course+type@sequential+block@bcdabcdabcdabcdabcdabcdabcdabcd1?experience=legacy",
              "sectionId": "block-v1:edX+DemoX+Demo_Course+type@chapter+block@bcdabcdabcdabcdabcdabcdabcdabcd2",
              "showLink": true,
-              "title": "bcdabcdabcdabcdabcdabcdabcdabcd1",
+              "title": "Title of Sequence",
            },
          },
        },
@@ -393,7 +413,12 @@ Object {
          Object {
            "analyticsId": "edx.bookmarks",
            "title": "Bookmarks",
-            "url": "http://localhost:18000/courses/course-v1:edX+DemoX+Demo_Course/bookmarks/",
+            "url": "https://example.com/bookmarks",
+          },
+          Object {
+            "analyticsId": "edx.tool.verified_upgrade",
+            "title": "Upgrade to Verified",
+            "url": "https://example.com/upgrade",
          },
        ],
        "datesBannerInfo": Object {
@@ -417,6 +442,7 @@ Object {
          "hasVisitedCourse": false,
          "url": "http://localhost:18000/courses/course-v1:edX+DemoX+Demo_Course/jump_to/block-v1:edX+Test+Block@12345abcde",
        },
+        "timeOffsetMillis": 0,
        "verifiedMode": Object {
          "accessExpirationDate": "2050-01-01T12:00:00",
          "currency": "USD",
@@ -429,5 +455,8 @@ Object {
      },
    },
  },
+  "recommendations": Object {
+    "recommendationsStatus": "loading",
+  },
 }
 `;
--- a/src/course-home/data/api.js
+++ b/src/course-home/data/api.js
@@ -1,6 +1,7 @@
 import { camelCaseObject, getConfig } from '@edx/frontend-platform';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 import { logInfo } from '@edx/frontend-platform/logging';
+import { appendBrowserTimezoneToUrl } from '../../utils';

 function normalizeCourseHomeCourseMetadata(metadata) {
  const data = camelCaseObject(metadata);
@@ -26,6 +27,8 @@ export function normalizeOutlineBlocks(courseId, blocks) {
    switch (block.type) {
      case 'course':
        models.courses[block.id] = {
+          effortActivities: block.effort_activities,
+          effortTime: block.effort_time,
          id: courseId,
          title: block.display_name,
          sectionIds: block.children || [],
@@ -35,6 +38,8 @@ export function normalizeOutlineBlocks(courseId, blocks) {
      case 'chapter':
        models.sections[block.id] = {
          complete: block.complete,
+          effortActivities: block.effort_activities,
+          effortTime: block.effort_time,
          id: block.id,
          title: block.display_name,
          resumeBlock: block.resume_block,
@@ -47,9 +52,16 @@ export function normalizeOutlineBlocks(courseId, blocks) {
          complete: block.complete,
          description: block.description,
          due: block.due,
+          effortActivities: block.effort_activities,
+          effortTime: block.effort_time,
          icon: block.icon,
          id: block.id,
-          showLink: !!block.lms_web_url, // we reconstruct the url ourselves as an MFE-internal <Link>
+          legacyWebUrl: block.legacy_web_url,
+          // The presence of an legacy URL for the sequence indicates that we want this
+          // sequence to be a clickable link in the outline (even though, if the new
+          // courseware experience is active, we will ignore `legacyWebUrl` and build a
+          // link to the MFE ourselves).
+          showLink: !!block.legacy_web_url,
          title: block.display_name,
        };
        break;
@@ -86,7 +98,8 @@ export function normalizeOutlineBlocks(courseId, blocks) {
 }

 export async function getCourseHomeCourseMetadata(courseId) {
-  const url = `${getConfig().LMS_BASE_URL}/api/course_home/v1/course_metadata/${courseId}`;
+  let url = `${getConfig().LMS_BASE_URL}/api/course_home/v1/course_metadata/${courseId}`;
+  url = appendBrowserTimezoneToUrl(url);
  const { data } = await getAuthenticatedHttpClient().get(url);
  return normalizeCourseHomeCourseMetadata(data);
 }
@@ -108,8 +121,7 @@ export async function getDatesTabData(courseId) {
      return {};
    }
    if (httpErrorStatus === 401) {
-      global.location.replace(`${getConfig().LMS_BASE_URL}/courses/${courseId}/course`);
-      return {};
+      global.location.replace(`${getConfig().BASE_URL}/course/${courseId}/home`);
    }
    throw error;
  }
@@ -119,19 +131,23 @@ export async function getProgressTabData(courseId) {
  const url = `${getConfig().LMS_BASE_URL}/api/course_home/v1/progress/${courseId}`;
  try {
    const { data } = await getAuthenticatedHttpClient().get(url);
-    return camelCaseObject(data);
+    const camelCasedData = camelCaseObject(data);
+    camelCasedData.gradingPolicy.gradeRange = data.grading_policy.grade_range;
+    return camelCasedData;
  } catch (error) {
    const { httpErrorStatus } = error && error.customAttributes;
    if (httpErrorStatus === 404) {
      global.location.replace(`${getConfig().LMS_BASE_URL}/courses/${courseId}/progress`);
-      return {};
    }
    throw error;
  }
 }

-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;
@@ -144,11 +160,30 @@ export async function getProctoringInfoData(courseId) {
  }
 }

+export function getTimeOffsetMillis(headerDate, requestTime, responseTime) {
+  // Time offset computation should move down into the HttpClient wrapper to maintain a global time correction reference
+  // Requires 'Access-Control-Expose-Headers: Date' on the server response per https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#access-control-expose-headers
+
+  let timeOffsetMillis = 0;
+  if (headerDate !== undefined) {
+    const headerTime = Date.parse(headerDate);
+    const roundTripMillis = requestTime - responseTime;
+    const localTime = responseTime - (roundTripMillis / 2); // Roughly compensate for transit time
+    timeOffsetMillis = headerTime - localTime;
+  }
+
+  return timeOffsetMillis;
+}
+
 export async function getOutlineTabData(courseId) {
  const url = `${getConfig().LMS_BASE_URL}/api/course_home/v1/outline/${courseId}`;
  let { tabData } = {};
+  let requestTime = Date.now();
+  let responseTime = requestTime;
  try {
+    requestTime = Date.now();
    tabData = await getAuthenticatedHttpClient().get(url);
+    responseTime = Date.now();
  } catch (error) {
    const { httpErrorStatus } = error && error.customAttributes;
    if (httpErrorStatus === 404) {
@@ -160,7 +195,9 @@ export async function getOutlineTabData(courseId) {

  const {
    data,
+    headers,
  } = tabData;
+
  const accessExpiration = camelCaseObject(data.access_expiration);
  const canShowUpgradeSock = data.can_show_upgrade_sock;
  const courseBlocks = data.course_blocks ? normalizeOutlineBlocks(courseId, data.course_blocks.blocks) : {};
@@ -173,6 +210,7 @@ export async function getOutlineTabData(courseId) {
  const hasEnded = data.has_ended;
  const offer = camelCaseObject(data.offer);
  const resumeCourse = camelCaseObject(data.resume_course);
+  const timeOffsetMillis = getTimeOffsetMillis(headers && headers.date, requestTime, responseTime);
  const verifiedMode = camelCaseObject(data.verified_mode);
  const welcomeMessageHtml = data.welcome_message_html;

@@ -189,6 +227,7 @@ export async function getOutlineTabData(courseId) {
    hasEnded,
    offer,
    resumeCourse,
+    timeOffsetMillis, // This should move to a global time correction reference
    verifiedMode,
    welcomeMessageHtml,
  };
--- a/src/course-home/data/api.test.js
+++ b/src/course-home/data/api.test.js
@@ -0,0 +1,16 @@
+import { getTimeOffsetMillis } from './api';
+
+describe('Calculate the time offset properly', () => {
+  it('Should return 0 if the headerDate is not set', async () => {
+    const offset = getTimeOffsetMillis(undefined, undefined, undefined);
+    expect(offset).toBe(0);
+  });
+
+  it('Should return the offset', async () => {
+    const headerDate = '2021-04-13T11:01:58.135Z';
+    const requestTime = new Date('2021-04-12T11:01:57.135Z');
+    const responseTime = new Date('2021-04-12T11:01:58.635Z');
+    const offset = getTimeOffsetMillis(headerDate, requestTime, responseTime);
+    expect(offset).toBe(86398750);
+  });
+});
--- a/src/course-home/data/redux.test.js
+++ b/src/course-home/data/redux.test.js
@@ -6,7 +6,7 @@ import { getConfig } from '@edx/frontend-platform';

 import * as thunks from './thunks';

-import executeThunk from '../../utils';
+import { appendBrowserTimezoneToUrl, executeThunk } from '../../utils';

 import { initializeMockApp } from '../../setupTest';
 import initializeStore from '../../store';
@@ -17,8 +17,9 @@ const axiosMock = new MockAdapter(getAuthenticatedHttpClient());

 describe('Data layer integration tests', () => {
  const courseHomeMetadata = Factory.build('courseHomeMetadata');
-  const { courseId } = courseHomeMetadata;
-  const courseMetadataUrl = `${getConfig().LMS_BASE_URL}/api/course_home/v1/course_metadata/${courseId}`;
+  const { id: courseId } = courseHomeMetadata;
+  let courseMetadataUrl = `${getConfig().LMS_BASE_URL}/api/course_home/v1/course_metadata/${courseId}`;
+  courseMetadataUrl = appendBrowserTimezoneToUrl(courseMetadataUrl);

  let store;

--- a/src/course-home/dates-banner/DatesBannerContainer.jsx
+++ b/src/course-home/dates-banner/DatesBannerContainer.jsx
@@ -11,6 +11,7 @@ function DatesBannerContainer({
  courseDateBlocks,
  datesBannerInfo,
  hasEnded,
+  logUpgradeLinkClick,
  model,
  tabFetch,
 }) {
@@ -43,13 +44,19 @@ function DatesBannerContainer({
      name: 'upgradeToCompleteGradedBanner',
      // verifiedUpgradeLink can be null if we've passed the upgrade deadline
      shouldDisplay: upgradeToCompleteGraded && verifiedUpgradeLink,
-      clickHandler: () => global.location.replace(verifiedUpgradeLink),
+      clickHandler: () => {
+        logUpgradeLinkClick();
+        global.location.replace(verifiedUpgradeLink);
+      },
    },
    {
      name: 'upgradeToResetBanner',
      // verifiedUpgradeLink can be null if we've passed the upgrade deadline
      shouldDisplay: upgradeToReset && verifiedUpgradeLink,
-      clickHandler: () => global.location.replace(verifiedUpgradeLink),
+      clickHandler: () => {
+        logUpgradeLinkClick();
+        global.location.replace(verifiedUpgradeLink);
+      },
    },
    {
      name: 'resetDatesBanner',
@@ -80,12 +87,14 @@ DatesBannerContainer.propTypes = {
    verifiedUpgradeLink: PropTypes.string,
  }).isRequired,
  hasEnded: PropTypes.bool,
+  logUpgradeLinkClick: PropTypes.func,
  model: PropTypes.string.isRequired,
  tabFetch: PropTypes.func.isRequired,
 };

 DatesBannerContainer.defaultProps = {
  hasEnded: false,
+  logUpgradeLinkClick: () => {},
 };

 export default DatesBannerContainer;
--- a/src/course-home/dates-tab/DatesTab.jsx
+++ b/src/course-home/dates-tab/DatesTab.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
+import { sendTrackEvent } from '@edx/frontend-platform/analytics';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';

 import messages from './messages';
@@ -9,30 +10,55 @@ import DatesBannerContainer from '../dates-banner/DatesBannerContainer';
 import { fetchDatesTab } from '../data';
 import { useModel } from '../../generic/model-store';

+/** [MM-P2P] Experiment */
+import { initDatesMMP2P } from '../../experiments/mm-p2p';
+
 function DatesTab({ intl }) {
  const {
    courseId,
  } = useSelector(state => state.courseHome);

+  const {
+    org,
+  } = useModel('courseHomeMeta', courseId);
+
  const {
    courseDateBlocks,
    datesBannerInfo,
    hasEnded,
  } = useModel('dates', courseId);

+  /** [MM-P2P] Experiment */
+  const mmp2p = initDatesMMP2P(courseId);
+
+  const logUpgradeLinkClick = () => {
+    sendTrackEvent('edx.bi.ecommerce.upsell_links_clicked', {
+      org_key: org,
+      courserun_key: courseId,
+      linkCategory: 'personalized_learner_schedules',
+      linkName: 'dates_upgrade',
+      linkType: 'button',
+      pageName: 'dates_tab',
+    });
+  };
+
  return (
    <>
      <div role="heading" aria-level="1" className="h2 my-3">
        {intl.formatMessage(messages.title)}
      </div>
-      <DatesBannerContainer
-        courseDateBlocks={courseDateBlocks}
-        datesBannerInfo={datesBannerInfo}
-        hasEnded={hasEnded}
-        model="dates"
-        tabFetch={fetchDatesTab}
-      />
-      <Timeline />
+      { /** [MM-P2P] Experiment */ }
+      { !mmp2p.state.isEnabled && (
+        <DatesBannerContainer
+          courseDateBlocks={courseDateBlocks}
+          datesBannerInfo={datesBannerInfo}
+          hasEnded={hasEnded}
+          logUpgradeLinkClick={logUpgradeLinkClick}
+          model="dates"
+          tabFetch={fetchDatesTab}
+        />
+      ) }
+      <Timeline mmp2p={mmp2p} />
    </>
  );
 }
--- a/src/course-home/dates-tab/DatesTab.test.jsx
+++ b/src/course-home/dates-tab/DatesTab.test.jsx
@@ -3,6 +3,7 @@ import { Route } from 'react-router';
 import MockAdapter from 'axios-mock-adapter';
 import { Factory } from 'rosie';
 import { getConfig, history } from '@edx/frontend-platform';
+import { sendTrackEvent } from '@edx/frontend-platform/analytics';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 import { AppProvider } from '@edx/frontend-platform/react';
 import { waitForElementToBeRemoved } from '@testing-library/dom';
@@ -14,9 +15,11 @@ import { fetchDatesTab } from '../data';
 import { fireEvent, initializeMockApp, waitFor } from '../../setupTest';
 import initializeStore from '../../store';
 import { TabContainer } from '../../tab-page';
+import { appendBrowserTimezoneToUrl } from '../../utils';
 import { UserMessagesProvider } from '../../generic/user-messages';

 initializeMockApp();
+jest.mock('@edx/frontend-platform/analytics');

 describe('DatesTab', () => {
  let axiosMock;
@@ -60,10 +63,12 @@ describe('DatesTab', () => {
    beforeEach(() => {
      const datesTabData = Factory.build('datesTabData');
      const courseMetadata = Factory.build('courseHomeMetadata');
-      const { courseId } = courseMetadata;
+      const { id: courseId } = courseMetadata;
+      let courseMetadataUrl = `${getConfig().LMS_BASE_URL}/api/course_home/v1/course_metadata/${courseId}`;
+      courseMetadataUrl = appendBrowserTimezoneToUrl(courseMetadataUrl);

      axiosMock = new MockAdapter(getAuthenticatedHttpClient());
-      axiosMock.onGet(`${getConfig().LMS_BASE_URL}/api/course_home/v1/course_metadata/${courseId}`).reply(200, courseMetadata);
+      axiosMock.onGet(courseMetadataUrl).reply(200, courseMetadata);
      axiosMock.onGet(`${getConfig().LMS_BASE_URL}/api/course_home/v1/dates/${courseId}`).reply(200, datesTabData);
      history.push(`/course/${courseId}/dates`); // so tab can pull course id from url

@@ -130,12 +135,15 @@ describe('DatesTab', () => {

  describe('Dates banner container ', () => {
    const courseMetadata = Factory.build('courseHomeMetadata', { is_self_paced: true, is_enrolled: true });
-    const { courseId } = courseMetadata;
+    const { id: courseId } = courseMetadata;
    const datesTabData = Factory.build('datesTabData');

+    let courseMetadataUrl = `${getConfig().LMS_BASE_URL}/api/course_home/v1/course_metadata/${courseId}`;
+    courseMetadataUrl = appendBrowserTimezoneToUrl(courseMetadataUrl);
+
    beforeEach(() => {
      axiosMock = new MockAdapter(getAuthenticatedHttpClient());
-      axiosMock.onGet(`${getConfig().LMS_BASE_URL}/api/course_home/v1/course_metadata/${courseId}`).reply(200, courseMetadata);
+      axiosMock.onGet(courseMetadataUrl).reply(200, courseMetadata);
      history.push(`/course/${courseId}/dates`);
    });

@@ -235,5 +243,57 @@ describe('DatesTab', () => {
      // confirm "Shift due dates" button has not rendered
      expect(screen.queryByRole('button', { name: 'Shift due dates' })).not.toBeInTheDocument();
    });
+
+    it('sends analytics event onClick of upgrade button in upgradeToCompleteGradedBanner', async () => {
+      sendTrackEvent.mockClear();
+      datesTabData.datesBannerInfo = {
+        contentTypeGatingEnabled: true,
+        missedDeadlines: false,
+        missedGatedContent: false,
+        verifiedUpgradeLink: 'http://localhost:18130/basket/add/?sku=8CF08E5',
+      };
+
+      axiosMock.onGet(`${getConfig().LMS_BASE_URL}/api/course_home/v1/dates/${courseId}`).reply(200, datesTabData);
+      render(component);
+
+      const upgradeButton = await waitFor(() => screen.getByRole('button', { name: 'Upgrade now' }));
+      fireEvent.click(upgradeButton);
+
+      expect(sendTrackEvent).toHaveBeenCalledTimes(1);
+      expect(sendTrackEvent).toHaveBeenCalledWith('edx.bi.ecommerce.upsell_links_clicked', {
+        org_key: 'edX',
+        courserun_key: courseId,
+        linkCategory: 'personalized_learner_schedules',
+        linkName: 'dates_upgrade',
+        linkType: 'button',
+        pageName: 'dates_tab',
+      });
+    });
+
+    it('sends analytics event onClick of upgrade button in upgradeToResetBanner', async () => {
+      sendTrackEvent.mockClear();
+      datesTabData.datesBannerInfo = {
+        contentTypeGatingEnabled: true,
+        missedDeadlines: true,
+        missedGatedContent: true,
+        verifiedUpgradeLink: 'http://localhost:18130/basket/add/?sku=8CF08E5',
+      };
+
+      axiosMock.onGet(`${getConfig().LMS_BASE_URL}/api/course_home/v1/dates/${courseId}`).reply(200, datesTabData);
+      render(component);
+
+      const upgradeButton = await waitFor(() => screen.getByRole('button', { name: 'Upgrade to shift due dates' }));
+      fireEvent.click(upgradeButton);
+
+      expect(sendTrackEvent).toHaveBeenCalledTimes(1);
+      expect(sendTrackEvent).toHaveBeenCalledWith('edx.bi.ecommerce.upsell_links_clicked', {
+        org_key: 'edX',
+        courserun_key: courseId,
+        linkCategory: 'personalized_learner_schedules',
+        linkName: 'dates_upgrade',
+        linkType: 'button',
+        pageName: 'dates_tab',
+      });
+    });
  });
 });
--- a/src/course-home/dates-tab/Day.jsx
+++ b/src/course-home/dates-tab/Day.jsx
@@ -13,7 +13,13 @@ import { getBadgeListAndColor } from './badgelist';
 import { isLearnerAssignment } from './utils';

 function Day({
-  date, first, intl, items, last,
+  date,
+  first,
+  intl,
+  items,
+  last,
+  /** [MM-P2P] Example */
+  mmp2p,
 }) {
  const {
    courseId,
@@ -26,6 +32,11 @@ function Day({

  const { color, badges } = getBadgeListAndColor(date, intl, null, items);

+  /** [MM-P2P] Experiment */
+  const mmp2pOverride = (
+    mmp2p.state.isEnabled
+    && items.some((item) => item.dateType === 'verified-upgrade-deadline')
+  );
  return (
    <li className="dates-day pb-4" data-testid="dates-day">
      {/* Top Line */}
@@ -42,7 +53,8 @@ function Day({
        <div className="mb-1" data-testid="dates-header">
          <p className="d-inline text-dark-500 font-weight-bold">
            <FormattedDate
-              value={date}
+              /** [MM-P2P] Experiment */
+              value={mmp2pOverride ? mmp2p.state.upgradeDeadline : date}
              day="numeric"
              month="short"
              weekday="short"
@@ -53,11 +65,16 @@ function Day({
          {badges}
        </div>
        {items.map((item) => {
-          const { badges: itemBadges } = getBadgeListAndColor(date, intl, item, items);
+          /** [MM-P2P] Experiment (conditional) */
+          const { badges: itemBadges } = mmp2pOverride
+            ? getBadgeListAndColor(new Date(mmp2p.state.upgradeDeadline), intl, item, items)
+            : getBadgeListAndColor(date, intl, item, items);
+
          const showLink = item.link && isLearnerAssignment(item);
          const title = showLink ? (<u><a href={item.link} className="text-reset">{item.title}</a></u>) : item.title;
          const available = item.learnerHasAccess && (item.link || !isLearnerAssignment(item));
          const textColor = available ? 'text-dark-500' : 'text-dark-200';
+
          return (
            <div key={item.title + item.date} className={textColor} data-testid="dates-item">
              <div>
@@ -76,7 +93,15 @@ function Day({
                  </OverlayTrigger>
                )}
              </div>
-              {item.description && <div className="small mb-2">{item.description}</div>}
+              { /** [MM-P2P] Experiment (conditional) */ }
+              { mmp2pOverride
+                ? (
+                  <div className="small mb-2">
+                    You are still eligible to upgrade to a Verified Certificate!
+                    &nbsp; Unlock full course access and highlight the knowledge you&apos;ll gain.
+                  </div>
+                )
+                : (item.description && <div className="small mb-2">{item.description}</div>)}
            </div>
          );
        })}
@@ -99,11 +124,25 @@ Day.propTypes = {
    title: PropTypes.string,
  })).isRequired,
  last: PropTypes.bool,
+  /** [MM-P2P] Experiment */
+  mmp2p: PropTypes.shape({
+    state: PropTypes.shape({
+      isEnabled: PropTypes.bool.isRequired,
+      upgradeDeadline: PropTypes.string,
+    }),
+  }),
 };

 Day.defaultProps = {
  first: false,
  last: false,
+  /** [MM-P2P] Experiment */
+  mmp2p: {
+    state: {
+      isEnabled: false,
+      upgradeDeadline: '',
+    },
+  },
 };

 export default injectIntl(Day);
--- a/src/course-home/dates-tab/Timeline.jsx
+++ b/src/course-home/dates-tab/Timeline.jsx
@@ -1,4 +1,6 @@
 import React from 'react';
+/** [MM-P2P] Experiment (import) */
+import PropTypes from 'prop-types';
 import { useSelector } from 'react-redux';

 import { useModel } from '../../generic/model-store';
@@ -6,7 +8,8 @@ import { useModel } from '../../generic/model-store';
 import Day from './Day';
 import { daycmp, isLearnerAssignment } from './utils';

-export default function Timeline() {
+/** [MM-P2P] Experiment (argument) */
+export default function Timeline({ mmp2p }) {
  const {
    courseId,
  } = useSelector(state => state.courseHome);
@@ -63,8 +66,17 @@ export default function Timeline() {
  return (
    <ul className="list-unstyled m-0">
      {groupedDates.map((groupedDate) => (
-        <Day key={groupedDate.date} {...groupedDate} />
+        <Day key={groupedDate.date} {...groupedDate} mmp2p={mmp2p} />
      ))}
    </ul>
  );
 }
+
+/** [MM-P2P] Experiment */
+Timeline.propTypes = {
+  mmp2p: PropTypes.shape({}),
+};
+
+Timeline.defaultProps = {
+  mmp2p: {},
+};
--- a/src/course-home/outline-tab/DateSummary.jsx
+++ b/src/course-home/outline-tab/DateSummary.jsx
@@ -1,24 +1,52 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faCalendarAlt } from '@fortawesome/free-regular-svg-icons';
+import { sendTrackEvent } from '@edx/frontend-platform/analytics';
 import { FormattedDate } from '@edx/frontend-platform/i18n';
 import React from 'react';
+import { useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
+import { useModel } from '../../generic/model-store';
 import { isLearnerAssignment } from '../dates-tab/utils';
 import './DateSummary.scss';

 export default function DateSummary({
  dateBlock,
  userTimezone,
+  /** [MM-P2P] Experiment */
+  mmp2p,
 }) {
+  const {
+    courseId,
+  } = useSelector(state => state.courseHome);
+  const {
+    org,
+  } = useModel('courseHomeMeta', courseId);
+
  const linkedTitle = dateBlock.link && isLearnerAssignment(dateBlock);
  const timezoneFormatArgs = userTimezone ? { timeZone: userTimezone } : {};
+
+  /** [MM-P2P] Experiment */
+  const showMMP2P = mmp2p.state.isEnabled && (dateBlock.dateType === 'verified-upgrade-deadline');
+
+  const logVerifiedUpgradeClick = () => {
+    sendTrackEvent('edx.bi.ecommerce.upsell_links_clicked', {
+      org_key: org,
+      courserun_key: courseId,
+      linkCategory: '(none)',
+      linkName: 'course_home_dates',
+      linkType: 'link',
+      pageName: 'course_home',
+    });
+  };
+
  return (
    <li className="container p-0 mb-3 small text-dark-500">
      <div className="row">
        <FontAwesomeIcon icon={faCalendarAlt} className="ml-3 mt-1 mr-1" fixedWidth />
        <div className="ml-1 font-weight-bold">
          <FormattedDate
-            value={dateBlock.date}
+            /** [MM-P2P] Experiment */
+            value={showMMP2P ? mmp2p.state.upgradeDeadline : dateBlock.date}
            day="numeric"
            month="short"
            weekday="short"
@@ -27,18 +55,45 @@ export default function DateSummary({
          />
        </div>
      </div>
-      <div className="row ml-4 pr-2">
-        <div className="date-summary-text">
-          {linkedTitle
-          && <div className="font-weight-bold mt-2"><a href={dateBlock.link}>{dateBlock.title}</a></div>}
-          {!linkedTitle
-          && <div className="font-weight-bold mt-2">{dateBlock.title}</div>}
+      {/** [MM-P2P] Experiment (conditional) */}
+      { showMMP2P ? (
+        <div className="row ml-4 pr-2">
+          <div className="date-summary-text">
+            <div className="font-weight-bold mt-2">
+              Last chance to upgrade
+            </div>
+          </div>
+          <div className="date-summary-text mt-1">
+            You are still eligible to upgrade to a Verified Certificate!
+            &nbsp; Unlock full course access and highlight the knowledge you&apos;ll gain.
+          </div>
        </div>
-        {dateBlock.description
-          && <div className="date-summary-text mt-1">{dateBlock.description}</div>}
-        {!linkedTitle && dateBlock.link
-          && <a href={dateBlock.link} className="description-link">{dateBlock.linkText}</a>}
-      </div>
+      ) : (
+        <div className="row ml-4 pr-2">
+          <div className="date-summary-text">
+            {linkedTitle && (
+              <div className="font-weight-bold mt-2">
+                <a href={dateBlock.link}>{dateBlock.title}</a>
+              </div>
+            )}
+            {!linkedTitle && (
+              <div className="font-weight-bold mt-2">{dateBlock.title}</div>
+            )}
+          </div>
+          {dateBlock.description && (
+            <div className="date-summary-text mt-1">{dateBlock.description}</div>
+          )}
+          {!linkedTitle && dateBlock.link && (
+            <a
+              href={dateBlock.link}
+              onClick={dateBlock.dateType === 'verified-upgrade-deadline' ? logVerifiedUpgradeClick : () => {}}
+              className="description-link"
+            >
+              {dateBlock.linkText}
+            </a>
+          )}
+        </div>
+      )}
    </li>
  );
 }
@@ -54,8 +109,22 @@ DateSummary.propTypes = {
    learnerHasAccess: PropTypes.bool,
  }).isRequired,
  userTimezone: PropTypes.string,
+  /** [MM-P2P] Experiment */
+  mmp2p: PropTypes.shape({
+    state: PropTypes.shape({
+      isEnabled: PropTypes.bool.isRequired,
+      upgradeDeadline: PropTypes.string,
+    }),
+  }),
 };

 DateSummary.defaultProps = {
  userTimezone: null,
+  /** [MM-P2P] Experiment */
+  mmp2p: {
+    state: {
+      isEnabled: false,
+      upgradeDeadline: '',
+    },
+  },
 };
--- a/src/course-home/outline-tab/OutlineTab.jsx
+++ b/src/course-home/outline-tab/OutlineTab.jsx
@@ -1,6 +1,6 @@
 import React, { useRef, useState } from 'react';
 import { useSelector } from 'react-redux';
-import { sendTrackingLogEvent } from '@edx/frontend-platform/analytics';
+import { sendTrackEvent, sendTrackingLogEvent } from '@edx/frontend-platform/analytics';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';

 import { Button, Toast } from '@edx/paragon';
@@ -28,6 +28,9 @@ import { useModel } from '../../generic/model-store';
 import WelcomeMessage from './widgets/WelcomeMessage';
 import ProctoringInfoPanel from './widgets/ProctoringInfoPanel';

+/** [MM-P2P] Experiment */
+import { initHomeMMP2P, MMP2PFlyover } from '../../experiments/mm-p2p';
+
 function OutlineTab({ intl }) {
  const {
    courseId,
@@ -36,6 +39,7 @@ function OutlineTab({ intl }) {
  const {
    org,
    title,
+    username,
  } = useModel('courseHomeMeta', courseId);

  const {
@@ -60,6 +64,7 @@ function OutlineTab({ intl }) {
      url: resumeCourseUrl,
    },
    offer,
+    timeOffsetMillis,
    verifiedMode,
  } = useModel('outline', courseId);

@@ -67,18 +72,22 @@ function OutlineTab({ intl }) {
  const [goalToastHeader, setGoalToastHeader] = useState('');
  const [expandAll, setExpandAll] = useState(false);

+  const eventProperties = {
+    org_key: org,
+    courserun_key: courseId,
+  };
+
  const logResumeCourseClick = () => {
    sendTrackingLogEvent('edx.course.home.resume_course.clicked', {
-      courserun_key: courseId,
+      ...eventProperties,
      event_type: hasVisitedCourse ? 'resume' : 'start',
-      org_key: org,
      url: resumeCourseUrl,
    });
  };

  // Below the course title alerts (appearing in the order listed here)
-  const offerAlert = useOfferAlert(offer, userTimezone, 'outline-course-alerts');
-  const accessExpirationAlert = useAccessExpirationAlert(accessExpiration, userTimezone, 'outline-course-alerts');
+  const offerAlert = useOfferAlert(courseId, offer, org, userTimezone, 'outline-course-alerts', 'course_home');
+  const accessExpirationAlert = useAccessExpirationAlert(accessExpiration, courseId, org, userTimezone, 'outline-course-alerts', 'course_home');
  const courseStartAlert = useCourseStartAlert(courseId);
  const courseEndAlert = useCourseEndAlert(courseId);
  const certificateAvailableAlert = useCertificateAvailableAlert(courseId);
@@ -88,6 +97,19 @@ function OutlineTab({ intl }) {

  const courseSock = useRef(null);

+  const logUpgradeLinkClick = () => {
+    sendTrackEvent('edx.bi.ecommerce.upsell_links_clicked', {
+      ...eventProperties,
+      linkCategory: 'personalized_learner_schedules',
+      linkName: 'course_home_upgrade_shift_dates',
+      linkType: 'button',
+      pageName: 'course_home',
+    });
+  };
+
+  /** [[MM-P2P] Experiment */
+  const MMP2P = initHomeMMP2P(courseId);
+
  return (
    <>
      <Toast
@@ -97,7 +119,7 @@ function OutlineTab({ intl }) {
      >
        {goalToastHeader}
      </Toast>
-      <div className="row w-100 m-0 mb-3 justify-content-between">
+      <div className="row w-100 mx-0 my-3 justify-content-between">
        <div className="col-12 col-sm-auto p-0">
          <div role="heading" aria-level="1" className="h2">{title}</div>
        </div>
@@ -109,7 +131,8 @@ function OutlineTab({ intl }) {
          </div>
        )}
      </div>
-      <div className="row">
+      {/** [MM-P2P] Experiment (className for optimizely trigger) */}
+      <div className="row course-outline-tab">
        <div className="col-12">
          <AlertList
            topic="outline-private-alerts"
@@ -119,27 +142,34 @@ function OutlineTab({ intl }) {
          />
        </div>
        <div className="col col-12 col-md-8">
-          <AlertList
-            topic="outline-course-alerts"
-            className="mb-3"
-            customAlerts={{
-              ...accessExpirationAlert,
-              ...certificateAvailableAlert,
-              ...courseEndAlert,
-              ...courseStartAlert,
-              ...offerAlert,
-            }}
-          />
+          { /** [MM-P2P] Experiment (the conditional) */ }
+          { !MMP2P.state.isEnabled
+            && (
+            <AlertList
+              topic="outline-course-alerts"
+              className="mb-3"
+              customAlerts={{
+                ...accessExpirationAlert,
+                ...certificateAvailableAlert,
+                ...courseEndAlert,
+                ...courseStartAlert,
+                ...offerAlert,
+              }}
+            />
+            )}
          {courseDateBlocks && (
            <DatesBannerContainer
              courseDateBlocks={courseDateBlocks}
              datesBannerInfo={datesBannerInfo}
              hasEnded={hasEnded}
+              logUpgradeLinkClick={logUpgradeLinkClick}
              model="outline"
              tabFetch={fetchOutlineTab}
+              /** [MM-P2P] Experiment */
+              isMMP2PEnabled={MMP2P.state.isEnabled}
            />
          )}
-          {!courseGoalToDisplay && goalOptions.length > 0 && (
+          {!courseGoalToDisplay && goalOptions && goalOptions.length > 0 && (
            <CourseGoalCard
              courseId={courseId}
              goalOptions={goalOptions}
@@ -176,8 +206,9 @@ function OutlineTab({ intl }) {
          <div className="col col-12 col-md-4">
            <ProctoringInfoPanel
              courseId={courseId}
+              username={username}
            />
-            {courseGoalToDisplay && goalOptions.length > 0 && (
+            {courseGoalToDisplay && goalOptions && goalOptions.length > 0 && (
              <UpdateGoalSelector
                courseId={courseId}
                goalOptions={goalOptions}
@@ -189,12 +220,25 @@ function OutlineTab({ intl }) {
            <CourseTools
              courseId={courseId}
            />
-            <UpgradeCard
-              courseId={courseId}
-              onLearnMore={canShowUpgradeSock ? () => { courseSock.current.showToUser(); } : null}
-            />
+            { /** [MM-P2P] Experiment (conditional) */ }
+            { MMP2P.state.isEnabled
+              ? <MMP2PFlyover isStatic options={MMP2P} />
+              : (
+                <UpgradeCard
+                  offer={offer}
+                  verifiedMode={verifiedMode}
+                  accessExpiration={accessExpiration}
+                  contentTypeGatingEnabled={datesBannerInfo.contentTypeGatingEnabled}
+                  userTimezone={userTimezone}
+                  timeOffsetMillis={timeOffsetMillis}
+                  courseId={courseId}
+                  org={org}
+                />
+              )}
            <CourseDates
              courseId={courseId}
+              /** [MM-P2P] Experiment */
+              mmp2p={MMP2P}
            />
            <CourseHandouts
              courseId={courseId}
--- a/src/course-home/outline-tab/OutlineTab.test.jsx
+++ b/src/course-home/outline-tab/OutlineTab.test.jsx
@@ -1,15 +1,16 @@
 import React from 'react';
 import { Factory } from 'rosie';
 import { getConfig } from '@edx/frontend-platform';
+import { sendTrackEvent, sendTrackingLogEvent } from '@edx/frontend-platform/analytics';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 import MockAdapter from 'axios-mock-adapter';
 import userEvent from '@testing-library/user-event';

-import buildSimpleCourseBlocks from '../data/__factories__/courseBlocks.factory';
+import { buildMinimalCourseBlocks } from '../../shared/data/__factories__/courseBlocks.factory';
 import {
  fireEvent, initializeMockApp, logUnhandledRequests, render, screen, waitFor, act,
 } from '../../setupTest';
-import executeThunk from '../../utils';
+import { appendBrowserTimezoneToUrl, executeThunk } from '../../utils';
 import * as thunks from '../data/thunks';
 import initializeStore from '../../store';
 import OutlineTab from './OutlineTab';
@@ -21,18 +22,19 @@ describe('Outline Tab', () => {
  let axiosMock;

  const courseId = 'course-v1:edX+Test+run';
-  const courseMetadataUrl = `${getConfig().LMS_BASE_URL}/api/course_home/v1/course_metadata/${courseId}`;
+  let courseMetadataUrl = `${getConfig().LMS_BASE_URL}/api/course_home/v1/course_metadata/${courseId}`;
+  courseMetadataUrl = appendBrowserTimezoneToUrl(courseMetadataUrl);
  const enrollmentUrl = `${getConfig().LMS_BASE_URL}/api/enrollment/v1/enrollment`;
  const goalUrl = `${getConfig().LMS_BASE_URL}/api/course_home/v1/save_course_goal`;
  const outlineUrl = `${getConfig().LMS_BASE_URL}/api/course_home/v1/outline/${courseId}`;
  const proctoringInfoUrl = `${getConfig().LMS_BASE_URL}/api/edx_proctoring/v1/user_onboarding/status?course_id=${encodeURIComponent(courseId)}`;

  const store = initializeStore();
-  const defaultMetadata = Factory.build('courseHomeMetadata', { courseId });
+  const defaultMetadata = Factory.build('courseHomeMetadata', { id: courseId });
  const defaultTabData = Factory.build('outlineTabData');

  function setMetadata(attributes, options) {
-    const courseMetadata = Factory.build('courseHomeMetadata', { courseId, ...attributes }, options);
+    const courseMetadata = Factory.build('courseHomeMetadata', { id: courseId, ...attributes }, options);
    axiosMock.onGet(courseMetadataUrl).reply(200, courseMetadata);
  }

@@ -54,7 +56,11 @@ describe('Outline Tab', () => {
    axiosMock.onPost(enrollmentUrl).reply(200, {});
    axiosMock.onPost(goalUrl).reply(200, { header: 'Success' });
    axiosMock.onGet(outlineUrl).reply(200, defaultTabData);
-    axiosMock.onGet(proctoringInfoUrl).reply(200, { onboarding_status: 'created', onboarding_link: 'test' });
+    axiosMock.onGet(proctoringInfoUrl).reply(200, {
+      onboarding_status: 'created',
+      onboarding_link: 'test',
+      expiration_date: null,
+    });

    logUnhandledRequests(axiosMock);
  });
@@ -77,7 +83,7 @@ describe('Outline Tab', () => {
    });

    it('expands section that contains resume block', async () => {
-      const { courseBlocks } = await buildSimpleCourseBlocks(courseId, 'Title', { resumeBlock: true });
+      const { courseBlocks } = await buildMinimalCourseBlocks(courseId, 'Title', { resumeBlock: true });
      setTabData({
        course_blocks: { blocks: courseBlocks.blocks },
      });
@@ -106,7 +112,7 @@ describe('Outline Tab', () => {
    });

    it('displays correct icon for complete assignment', async () => {
-      const { courseBlocks } = await buildSimpleCourseBlocks(courseId, 'Title', { complete: true });
+      const { courseBlocks } = await buildMinimalCourseBlocks(courseId, 'Title', { complete: true });
      setTabData({
        course_blocks: { blocks: courseBlocks.blocks },
      });
@@ -115,13 +121,93 @@ describe('Outline Tab', () => {
    });

    it('displays correct icon for incomplete assignment', async () => {
-      const { courseBlocks } = await buildSimpleCourseBlocks(courseId, 'Title', { complete: false });
+      const { courseBlocks } = await buildMinimalCourseBlocks(courseId, 'Title', { complete: false });
      setTabData({
        course_blocks: { blocks: courseBlocks.blocks },
      });
      await fetchAndRender();
      expect(screen.getByTitle('Incomplete section')).toBeInTheDocument();
    });
+
+    it('SequenceLink displays points to legacy courseware', async () => {
+      const { courseBlocks } = await buildMinimalCourseBlocks(courseId, 'Title', { resumeBlock: true });
+      setMetadata({
+        can_load_courseware: false,
+      });
+      setTabData({
+        course_blocks: { blocks: courseBlocks.blocks },
+      });
+      await fetchAndRender();
+
+      const sequenceLink = screen.getByText('Title of Sequence');
+      expect(sequenceLink.getAttribute('href')).toContain(`/courses/${courseId}`);
+    });
+
+    it('SequenceLink displays points to courseware MFE', async () => {
+      const { courseBlocks } = await buildMinimalCourseBlocks(courseId, 'Title', { resumeBlock: true });
+      setMetadata({
+        can_load_courseware: true,
+      });
+      setTabData({
+        course_blocks: { blocks: courseBlocks.blocks },
+      });
+      await fetchAndRender();
+
+      const sequenceLink = screen.getByText('Title of Sequence');
+      expect(sequenceLink.getAttribute('href')).toContain(`/course/${courseId}`);
+    });
+  });
+
+  describe('Dates Banner', () => {
+    beforeEach(() => {
+      setMetadata({ is_enrolled: true });
+      setTabData({
+        dates_banner_info: {
+          content_type_gating_enabled: true,
+          missed_deadlines: true,
+          missed_gated_content: true,
+          verified_upgrade_link: 'http://localhost:18130/basket/add/?sku=8CF08E5',
+        },
+      }, {
+        date_blocks: [
+          {
+            assignment_type: 'Homework',
+            date: '2010-08-20T05:59:40.942669Z',
+            date_type: 'assignment-due-date',
+            description: '',
+            learner_has_access: true,
+            title: 'Missed assignment',
+            extra_info: null,
+          },
+        ],
+      });
+    });
+
+    it('renders upgradeToReset', async () => {
+      await fetchAndRender();
+
+      expect(screen.getByText('You are auditing this course,')).toBeInTheDocument();
+      expect(screen.getByText('which means that you are unable to participate in graded assignments. It looks like you missed some important deadlines based on our suggested schedule. To complete graded assignments as part of this course and shift the past due assignments into the future, you can upgrade today.')).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: 'Upgrade to shift due dates' })).toBeInTheDocument();
+    });
+
+    it('sends analytics event onClick of upgrade button in banner', async () => {
+      await fetchAndRender();
+      sendTrackEvent.mockClear();
+
+      const upgradeButton = screen.getByRole('button', { name: 'Upgrade to shift due dates' });
+      fireEvent.click(upgradeButton);
+
+      expect(sendTrackEvent).toHaveBeenCalledTimes(1);
+      expect(sendTrackEvent).toHaveBeenCalledWith('edx.bi.ecommerce.upsell_links_clicked', {
+        org_key: 'edX',
+        courserun_key: courseId,
+        linkCategory: 'personalized_learner_schedules',
+        linkName: 'course_home_upgrade_shift_dates',
+        linkType: 'button',
+        pageName: 'course_home',
+      });
+    });
  });

  describe('Welcome Message', () => {
@@ -180,6 +266,63 @@ describe('Outline Tab', () => {
    });
  });

+  describe('Course Dates', () => {
+    it('renders when course date blocks are populated', async () => {
+      const startDate = new Date();
+      startDate.setHours(startDate.getHours() + 1);
+      setMetadata({ is_enrolled: true });
+      setTabData({}, {
+        date_blocks: [
+          {
+            date_type: 'course-start-date',
+            date: startDate.toISOString(),
+            title: 'Start',
+          },
+        ],
+      });
+      await fetchAndRender();
+      expect(screen.getByRole('heading', { name: 'Upcoming Dates' })).toBeInTheDocument();
+    });
+
+    it('does not render when course date blocks are not populated', async () => {
+      setMetadata({ is_enrolled: true });
+      await fetchAndRender();
+      expect(screen.queryByRole('heading', { name: 'Upcoming Dates' })).not.toBeInTheDocument();
+    });
+
+    it('sends analytics event onClick of upgrade link', async () => {
+      const now = new Date();
+      const tomorrow = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1);
+      setMetadata({ is_enrolled: true });
+      setTabData({}, {
+        date_blocks: [
+          {
+            date_type: 'verified-upgrade-deadline',
+            date: tomorrow.toISOString(),
+            link: 'https://example.com/upgrade',
+            link_text: 'Upgrade to Verified Certificate',
+            title: 'Verification Upgrade Deadline',
+          },
+        ],
+      });
+      await fetchAndRender();
+      sendTrackEvent.mockClear();
+
+      const upgradeLink = screen.getByRole('link', { name: 'Upgrade to Verified Certificate' });
+      fireEvent.click(upgradeLink);
+
+      expect(sendTrackEvent).toHaveBeenCalledTimes(1);
+      expect(sendTrackEvent).toHaveBeenCalledWith('edx.bi.ecommerce.upsell_links_clicked', {
+        org_key: 'edX',
+        courserun_key: courseId,
+        linkCategory: '(none)',
+        linkName: 'course_home_dates',
+        linkType: 'link',
+        pageName: 'course_home',
+      });
+    });
+  });
+
  describe('Course Goals', () => {
    const goalOptions = [
      ['certify', 'Earn a certificate'],
@@ -278,6 +421,51 @@ describe('Outline Tab', () => {
    });
  });

+  describe('Course Tools', () => {
+    it('renders title when tools are available', async () => {
+      await fetchAndRender();
+      expect(screen.getByRole('heading', { name: 'Course Tools' })).toBeInTheDocument();
+      expect(screen.getByRole('link', { name: 'Bookmarks' })).toBeInTheDocument();
+    });
+
+    it('does not render title when tools are not available', async () => {
+      setTabData({
+        course_tools: [],
+      });
+      await fetchAndRender();
+      expect(screen.queryByRole('heading', { name: 'Course Tools' })).not.toBeInTheDocument();
+    });
+
+    it('analytics sent when upgrade link clicked', async () => {
+      await fetchAndRender();
+      expect(screen.getByRole('heading', { name: 'Course Tools' })).toBeInTheDocument();
+      sendTrackEvent.mockClear();
+      sendTrackingLogEvent.mockClear();
+
+      const upgradeLink = screen.getByRole('link', { name: 'Upgrade to Verified' });
+      fireEvent.click(upgradeLink);
+
+      expect(sendTrackEvent).toHaveBeenCalledTimes(1);
+      expect(sendTrackEvent).toHaveBeenCalledWith('edx.bi.ecommerce.upsell_links_clicked', {
+        org_key: 'edX',
+        courserun_key: courseId,
+        linkCategory: '(none)',
+        linkName: 'course_home_course_tools',
+        linkType: 'link',
+        pageName: 'course_home',
+      });
+
+      expect(sendTrackingLogEvent).toHaveBeenCalledTimes(1);
+      expect(sendTrackingLogEvent).toHaveBeenCalledWith('edx.course.tool.accessed', {
+        org_key: 'edX',
+        courserun_key: courseId,
+        course_id: courseId,
+        is_staff: false,
+        tool_name: 'edx.tool.verified_upgrade',
+      });
+    });
+  });
+
  describe('Alert List', () => {
    describe('Private Course Alert', () => {
      it('does not display alert for enrolled user', async () => {
@@ -369,6 +557,33 @@ describe('Outline Tab', () => {
        await fetchAndRender();
        await screen.findByText('to get unlimited access to the course as long as it exists on the site.', { exact: false });
      });
+
+      it('sends analytics event onClick of upgrade link', async () => {
+        setTabData({
+          access_expiration: {
+            expiration_date: '2080-01-01T12:00:00Z',
+            masquerading_expired_course: false,
+            upgrade_deadline: '2070-01-01T12:00:00Z',
+            upgrade_url: 'https://example.com/upgrade',
+          },
+        });
+        await fetchAndRender();
+
+        // Clearing after render to remove any events sent on view (ex. 'Promotion Viewed')
+        sendTrackEvent.mockClear();
+        const upgradeLink = screen.getByRole('link', { name: 'Upgrade now' });
+        fireEvent.click(upgradeLink);
+
+        expect(sendTrackEvent).toHaveBeenCalledTimes(1);
+        expect(sendTrackEvent).toHaveBeenCalledWith('edx.bi.ecommerce.upsell_links_clicked', {
+          org_key: 'edX',
+          courserun_key: courseId,
+          linkCategory: 'FBE_banner',
+          linkName: 'course_home_audit_access_expires',
+          linkType: 'link',
+          pageName: 'course_home',
+        });
+      });
    });

    describe('Course Start Alert', () => {
@@ -378,7 +593,7 @@ describe('Outline Tab', () => {
        startDate.setDate(startDate.getDate() + 100);
        setMetadata({ is_enrolled: true });
        setTabData({}, {
-          dateBlocks: [
+          date_blocks: [
            {
              date_type: 'course-start-date',
              date: startDate.toISOString(),
@@ -396,7 +611,7 @@ describe('Outline Tab', () => {
        startDate.setHours(startDate.getHours() + 1);
        setMetadata({ is_enrolled: true });
        setTabData({}, {
-          dateBlocks: [
+          date_blocks: [
            {
              date_type: 'course-start-date',
              date: startDate.toISOString(),
@@ -417,7 +632,7 @@ describe('Outline Tab', () => {
        endDate.setDate(endDate.getDate() + 13);
        setMetadata({ is_enrolled: true });
        setTabData({}, {
-          dateBlocks: [
+          date_blocks: [
            {
              date_type: 'course-end-date',
              date: endDate.toISOString(),
@@ -435,7 +650,7 @@ describe('Outline Tab', () => {
        endDate.setHours(endDate.getHours() + 1);
        setMetadata({ is_enrolled: true });
        setTabData({}, {
-          dateBlocks: [
+          date_blocks: [
            {
              date_type: 'course-end-date',
              date: endDate.toISOString(),
@@ -457,7 +672,7 @@ describe('Outline Tab', () => {
        const tomorrow = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1);
        setMetadata({ is_enrolled: true });
        setTabData({}, {
-          dateBlocks: [
+          date_blocks: [
            {
              date_type: 'course-end-date',
              date: yesterday.toISOString(),
@@ -471,12 +686,61 @@ describe('Outline Tab', () => {
          ],
        });
        await fetchAndRender();
-        await screen.findByText('We are working on generating course certificates.');
+        await screen.findByText('Your grade and certificate will be ready soon!');
+      });
+    });
+
+    describe('Offer Alert', () => {
+      it('sends analytics event onClick of upgrade link', async () => {
+        setTabData({
+          offer: {
+            code: 'EDXWELCOME',
+            expiration_date: '2070-01-01T12:00:00Z',
+            original_price: '$100',
+            discounted_price: '$85',
+            percentage: 15,
+            upgrade_url: 'https://example.com/upgrade',
+          },
+        });
+        await fetchAndRender();
+
+        expect(screen.getByRole('link', { name: 'Upgrade now' })).toBeInTheDocument();
+      });
+
+      it('sends analytics event onClick of upgrade link', async () => {
+        setTabData({
+          offer: {
+            code: 'EDXWELCOME',
+            expiration_date: '2070-01-01T12:00:00Z',
+            original_price: '$100',
+            discounted_price: '$85',
+            percentage: 15,
+            upgrade_url: 'https://example.com/upgrade',
+          },
+        });
+        await fetchAndRender();
+
+        // Clearing after render to remove any events sent on view (ex. 'Promotion Viewed')
+        sendTrackEvent.mockClear();
+        const upgradeLink = screen.getByRole('link', { name: 'Upgrade now' });
+        fireEvent.click(upgradeLink);
+
+        expect(sendTrackEvent).toHaveBeenCalledTimes(1);
+        expect(sendTrackEvent).toHaveBeenCalledWith('edx.bi.ecommerce.upsell_links_clicked', {
+          org_key: 'edX',
+          courserun_key: courseId,
+          linkCategory: 'welcome',
+          linkName: 'course_home_welcome',
+          linkType: 'link',
+          pageName: 'course_home',
+        });
      });
    });
  });

  describe('Proctoring Info Panel', () => {
+    const onboardingReleaseDate = new Date();
+    onboardingReleaseDate.setDate(new Date().getDate() - 7);
    it('appears', async () => {
      await fetchAndRender();
      await screen.findByText('This course contains proctored exams');
@@ -484,54 +748,220 @@ describe('Outline Tab', () => {
    });

    it('appears for verified', async () => {
-      axiosMock.onGet(proctoringInfoUrl).reply(200, { onboarding_status: 'verified', onboarding_link: 'test' });
+      axiosMock.onGet(proctoringInfoUrl).reply(200, {
+        onboarding_status: 'verified',
+        onboarding_link: 'test',
+        expiration_date: null,
+        onboarding_release_date: onboardingReleaseDate.toISOString(),
+      });
      await fetchAndRender();
      await screen.findByText('This course contains proctored exams');
      expect(screen.queryByRole('link', { name: 'Complete Onboarding' })).not.toBeInTheDocument();
      expect(screen.queryByRole('link', { name: 'Review instructions and system requirements' })).toBeInTheDocument();
      expect(screen.queryByText('You must complete the onboarding process prior to taking any proctored exam.')).not.toBeInTheDocument();
-      expect(screen.queryByText('Onboarding profile review, including identity verification, can take 2+ business days.')).not.toBeInTheDocument();
+      expect(screen.queryByText('Onboarding profile review can take 2+ business days.')).not.toBeInTheDocument();
    });

    it('appears for rejected', async () => {
-      axiosMock.onGet(proctoringInfoUrl).reply(200, { onboarding_status: 'rejected', onboarding_link: 'test' });
+      axiosMock.onGet(proctoringInfoUrl).reply(200, {
+        onboarding_status: 'rejected',
+        onboarding_link: 'test',
+        expiration_date: null,
+        onboarding_release_date: onboardingReleaseDate.toISOString(),
+      });
      await fetchAndRender();
      await screen.findByText('This course contains proctored exams');
      expect(screen.queryByRole('link', { name: 'Complete Onboarding' })).toBeInTheDocument();
      expect(screen.queryByRole('link', { name: 'Review instructions and system requirements' })).toBeInTheDocument();
      expect(screen.queryByText('You must complete the onboarding process prior to taking any proctored exam.')).toBeInTheDocument();
-      expect(screen.queryByText('Onboarding profile review, including identity verification, can take 2+ business days.')).toBeInTheDocument();
+      expect(screen.queryByText('Onboarding profile review can take 2+ business days.')).toBeInTheDocument();
    });

    it('appears for submitted', async () => {
-      axiosMock.onGet(proctoringInfoUrl).reply(200, { onboarding_status: 'submitted', onboarding_link: 'test' });
+      axiosMock.onGet(proctoringInfoUrl).reply(200, {
+        onboarding_status: 'submitted',
+        onboarding_link: 'test',
+        expiration_date: null,
+        onboarding_release_date: onboardingReleaseDate.toISOString(),
+      });
      await fetchAndRender();
      await screen.findByText('This course contains proctored exams');
      expect(screen.queryByText('Your submitted profile is in review.')).toBeInTheDocument();
-      expect(screen.queryByText('Onboarding profile review, including identity verification, can take 2+ business days.')).toBeInTheDocument();
+      expect(screen.queryByText('Onboarding profile review can take 2+ business days.')).toBeInTheDocument();
    });

    it('appears for second_review_required', async () => {
-      axiosMock.onGet(proctoringInfoUrl).reply(200, { onboarding_status: 'second_review_required', onboarding_link: 'test' });
+      axiosMock.onGet(proctoringInfoUrl).reply(200, {
+        onboarding_status: 'second_review_required',
+        onboarding_link: 'test',
+        expiration_date: null,
+        onboarding_release_date: onboardingReleaseDate.toISOString(),
+      });
      await fetchAndRender();
      await screen.findByText('This course contains proctored exams');
      expect(screen.queryByText('Your submitted profile is in review.')).toBeInTheDocument();
-      expect(screen.queryByText('Onboarding profile review, including identity verification, can take 2+ business days.')).toBeInTheDocument();
+      expect(screen.queryByText('Onboarding profile review can take 2+ business days.')).toBeInTheDocument();
+    });
+
+    it('appears for other_course_approved if not expiring soon', async () => {
+      const expirationDate = new Date();
+      // Set the expiration date 40 days in the future, so as not to trigger the 28 day expiration warning
+      expirationDate.setTime(expirationDate.getTime() + 3456900000);
+      axiosMock.onGet(proctoringInfoUrl).reply(200, {
+        onboarding_status: 'other_course_approved',
+        onboarding_link: 'test',
+        expiration_date: expirationDate.toString(),
+        onboarding_release_date: onboardingReleaseDate.toISOString(),
+      });
+      await fetchAndRender();
+      await screen.findByText('This course contains proctored exams');
+      expect(screen.queryByText('Your onboarding exam has been approved in another course.')).toBeInTheDocument();
+      expect(screen.queryByText('Onboarding profile review can take 2+ business days.')).not.toBeInTheDocument();
+    });
+
+    it('displays expiration warning', async () => {
+      const expirationDate = new Date();
+      // This message will render if the expiration date is within 28 days; set the date 10 days in future
+      expirationDate.setTime(expirationDate.getTime() + 864800000);
+      axiosMock.onGet(proctoringInfoUrl).reply(200, {
+        onboarding_status: 'other_course_approved',
+        onboarding_link: 'test',
+        expiration_date: expirationDate.toString(),
+        onboarding_release_date: onboardingReleaseDate.toISOString(),
+      });
+      await fetchAndRender();
+      await screen.findByText('This course contains proctored exams');
+      expect(screen.queryByText('Your onboarding profile has been approved in another course. However, your onboarding status is expiring soon. Please complete onboarding again to ensure that you will be able to continue taking proctored exams.')).toBeInTheDocument();
+      expect(screen.queryByText('Onboarding profile review can take 2+ business days.')).toBeInTheDocument();
    });

    it('appears for no status', async () => {
-      axiosMock.onGet(proctoringInfoUrl).reply(200, { onboarding_status: '', onboarding_link: 'test' });
+      axiosMock.onGet(proctoringInfoUrl).reply(200, {
+        onboarding_status: '',
+        onboarding_link: 'test',
+        expiration_date: null,
+        onboarding_release_date: onboardingReleaseDate.toISOString(),
+      });
      await fetchAndRender();
      await screen.findByText('This course contains proctored exams');
      expect(screen.queryByRole('link', { name: 'Complete Onboarding' })).toBeInTheDocument();
      expect(screen.queryByRole('link', { name: 'Review instructions and system requirements' })).toBeInTheDocument();
      expect(screen.queryByText('You must complete the onboarding process prior to taking any proctored exam.')).toBeInTheDocument();
-      expect(screen.queryByText('Onboarding profile review, including identity verification, can take 2+ business days.')).toBeInTheDocument();
+      expect(screen.queryByText('Onboarding profile review can take 2+ business days.')).toBeInTheDocument();
    });

    it('does not appear for 404', async () => {
      axiosMock.onGet(proctoringInfoUrl).reply(404);
      expect(screen.queryByRole('link', { name: 'Review instructions and system requirements' })).not.toBeInTheDocument();
    });
+
+    it('appears with a disabled link if onboarding not yet released', async () => {
+      const futureReleaseDate = new Date();
+      futureReleaseDate.setDate(new Date().getDate() + 7);
+      const expectedDateStr = new Intl.DateTimeFormat('en-US', {
+        day: 'numeric',
+        month: 'short',
+        year: 'numeric',
+      }).format(futureReleaseDate);
+
+      axiosMock.onGet(proctoringInfoUrl).reply(200, {
+        onboarding_status: '',
+        onboarding_link: 'test',
+        expiration_date: null,
+        onboarding_release_date: futureReleaseDate.toISOString(),
+      });
+      await fetchAndRender();
+      await screen.findByText('This course contains proctored exams');
+      expect(screen.queryByText(`Onboarding Opens: ${expectedDateStr}`)).toBeInTheDocument();
+    });
+
+    it('appears and ignores a missing release date', async () => {
+      axiosMock.onGet(proctoringInfoUrl).reply(200, {
+        onboarding_status: 'verified',
+        onboarding_link: 'test',
+        expiration_date: null,
+        onboarding_release_date: onboardingReleaseDate.toISOString(),
+      });
+      await fetchAndRender();
+      await screen.findByText('This course contains proctored exams');
+      expect(screen.queryByRole('link', { name: 'Complete Onboarding' })).not.toBeInTheDocument();
+      expect(screen.queryByRole('link', { name: 'Review instructions and system requirements' })).toBeInTheDocument();
+      expect(screen.queryByText('You must complete the onboarding process prior to taking any proctored exam.')).not.toBeInTheDocument();
+      expect(screen.queryByText('Onboarding profile review can take 2+ business days.')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Upgrade Card', () => {
+    it('renders title when upgrade is available', async () => {
+      await fetchAndRender();
+      expect(screen.queryByRole('heading', { name: 'Pursue a verified certificate' })).toBeInTheDocument();
+    });
+
+    it('displays link to upgrade', async () => {
+      await fetchAndRender();
+      expect(screen.getByRole('link', { name: 'Upgrade for $149' })).toBeInTheDocument();
+    });
+
+    it('viewing upgrade card sends analytics', async () => {
+      sendTrackEvent.mockClear();
+      sendTrackingLogEvent.mockClear();
+      await fetchAndRender();
+
+      expect(sendTrackEvent).toHaveBeenCalledTimes(1);
+      expect(sendTrackEvent).toHaveBeenCalledWith('Promotion Viewed', {
+        org_key: 'edX',
+        courserun_key: courseId,
+        creative: 'sidebarupsell',
+        name: 'In-Course Verification Prompt',
+        position: 'sidebar-message',
+        promotion_id: 'courseware_verified_certificate_upsell',
+      });
+
+      expect(sendTrackingLogEvent).toHaveBeenCalledTimes(1);
+      expect(sendTrackingLogEvent).toHaveBeenCalledWith('edx.bi.course.upgrade.sidebarupsell.displayed', {
+        org_key: 'edX',
+        courserun_key: courseId,
+      });
+    });
+
+    it('clicking upgrade link sends analytics', async () => {
+      await fetchAndRender();
+
+      // Clearing after render to remove any events sent on view (ex. 'Promotion Viewed')
+      sendTrackEvent.mockClear();
+      sendTrackingLogEvent.mockClear();
+      const upgradeButton = screen.getByRole('link', { name: 'Upgrade for $149' });
+
+      fireEvent.click(upgradeButton);
+
+      expect(sendTrackEvent).toHaveBeenCalledTimes(2);
+      expect(sendTrackEvent).toHaveBeenNthCalledWith(1, 'Promotion Clicked', {
+        org_key: 'edX',
+        courserun_key: courseId,
+        creative: 'sidebarupsell',
+        name: 'In-Course Verification Prompt',
+        position: 'sidebar-message',
+        promotion_id: 'courseware_verified_certificate_upsell',
+      });
+      expect(sendTrackEvent).toHaveBeenNthCalledWith(2, 'edx.bi.ecommerce.upsell_links_clicked', {
+        org_key: 'edX',
+        courserun_key: courseId,
+        linkCategory: 'green_upgrade',
+        linkName: 'course_home_green',
+        linkType: 'button',
+        pageName: 'course_home',
+      });
+
+      expect(sendTrackingLogEvent).toHaveBeenCalledTimes(2);
+      expect(sendTrackingLogEvent).toHaveBeenNthCalledWith(1, 'edx.bi.course.upgrade.sidebarupsell.clicked', {
+        org_key: 'edX',
+        courserun_key: courseId,
+      });
+      expect(sendTrackingLogEvent).toHaveBeenNthCalledWith(2, 'edx.course.enrollment.upgrade.clicked', {
+        org_key: 'edX',
+        courserun_key: courseId,
+        location: 'sidebar-message',
+      });
+    });
  });
 });
--- a/src/course-home/outline-tab/Section.jsx
+++ b/src/course-home/outline-tab/Section.jsx
@@ -5,8 +5,11 @@ import { Collapsible, IconButton } from '@edx/paragon';
 import { faCheckCircle as fasCheckCircle, faMinus, faPlus } from '@fortawesome/free-solid-svg-icons';
 import { faCheckCircle as farCheckCircle } from '@fortawesome/free-regular-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+import EffortEstimate from '../../shared/effort-estimate';
 import SequenceLink from './SequenceLink';
 import { useModel } from '../../generic/model-store';
+
 import genericMessages from '../../generic/messages';
 import messages from './messages';

@@ -60,10 +63,11 @@ function Section({
        )}
      </div>
      <div className="col-10 ml-3 p-0 font-weight-bold text-dark-500">
-        {title}
+        <span className="align-middle">{title}</span>
        <span className="sr-only">
          , {intl.formatMessage(complete ? messages.completedSection : messages.incompleteSection)}
        </span>
+        <EffortEstimate className="ml-3 align-middle" block={section} />
      </div>
    </div>
  );
@@ -81,6 +85,7 @@ function Section({
            alt={intl.formatMessage(messages.openSection)}
            icon={faPlus}
            onClick={() => { setOpen(true); }}
+            size="sm"
          />
        )}
        iconWhenOpen={(
@@ -88,6 +93,7 @@ function Section({
            alt={intl.formatMessage(genericMessages.close)}
            icon={faMinus}
            onClick={() => { setOpen(false); }}
+            size="sm"
          />
        )}
      >
--- a/src/course-home/outline-tab/SequenceLink.jsx
+++ b/src/course-home/outline-tab/SequenceLink.jsx
@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { Link } from 'react-router-dom';
+import { Hyperlink } from '@edx/paragon';
 import {
  FormattedMessage,
  FormattedTime,
@@ -12,6 +13,7 @@ import { faCheckCircle as fasCheckCircle } from '@fortawesome/free-solid-svg-ico
 import { faCheckCircle as farCheckCircle } from '@fortawesome/free-regular-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

+import EffortEstimate from '../../shared/effort-estimate';
 import { useModel } from '../../generic/model-store';
 import messages from './messages';

@@ -26,6 +28,7 @@ function SequenceLink({
    complete,
    description,
    due,
+    legacyWebUrl,
    showLink,
    title,
  } = sequence;
@@ -34,10 +37,19 @@ function SequenceLink({
      userTimezone,
    },
  } = useModel('outline', courseId);
+  const {
+    canLoadCourseware,
+  } = useModel('courseHomeMeta', courseId);

  const timezoneFormatArgs = userTimezone ? { timeZone: userTimezone } : {};

-  const displayTitle = showLink ? <Link to={`/course/${courseId}/${id}`}>{title}</Link> : title;
+  // canLoadCourseware is true if the Courseware MFE is enabled, false otherwise
+  const coursewareUrl = (
+    canLoadCourseware
+      ? <Link to={`/course/${courseId}/${id}`}>{title}</Link>
+      : <Hyperlink destination={legacyWebUrl}>{title}</Hyperlink>
+  );
+  const displayTitle = showLink ? coursewareUrl : title;

  return (
    <li>
@@ -62,10 +74,13 @@ function SequenceLink({
              />
            )}
          </div>
-          <div className="col-10 p-0 ml-3 text-break">{displayTitle}</div>
-          <span className="sr-only">
-            , {intl.formatMessage(complete ? messages.completedAssignment : messages.incompleteAssignment)}
-          </span>
+          <div className="col-10 p-0 ml-3 text-break">
+            <span className="align-middle">{displayTitle}</span>
+            <span className="sr-only">
+              , {intl.formatMessage(complete ? messages.completedAssignment : messages.incompleteAssignment)}
+            </span>
+            <EffortEstimate className="ml-3 align-middle" block={sequence} />
+          </div>
        </div>
        {due && (
          <div className="row w-100 m-0 ml-3 pl-3">
@@ -81,7 +96,6 @@ function SequenceLink({
                      day="numeric"
                      month="short"
                      year="numeric"
-                      hour12={false}
                      timeZoneName="short"
                      value={due}
                      {...timezoneFormatArgs}
--- a/src/course-home/outline-tab/alerts/certificate-available-alert/CertificateAvailableAlert.jsx
+++ b/src/course-home/outline-tab/alerts/certificate-available-alert/CertificateAvailableAlert.jsx
@@ -1,51 +1,38 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { getConfig } from '@edx/frontend-platform';
-import { FormattedMessage, FormattedRelative } from '@edx/frontend-platform/i18n';
-import { Hyperlink } from '@edx/paragon';
+import { FormattedDate, FormattedMessage } from '@edx/frontend-platform/i18n';

 import { Alert, ALERT_TYPES } from '../../../../generic/user-messages';

 function CertificateAvailableAlert({ payload }) {
  const {
    certDate,
-    username,
    userTimezone,
+    courseEndDate,
  } = payload;

  const timezoneFormatArgs = userTimezone ? { timeZone: userTimezone } : {};
+  const certificateAvailableDateFormatted = <FormattedDate value={certDate} day="numeric" month="long" year="numeric" />;
+  const courseEndDateFormatted = <FormattedDate value={courseEndDate} day="numeric" month="long" year="numeric" />;

  return (
-    <Alert type={ALERT_TYPES.INFO}>
+    <Alert type={ALERT_TYPES.SUCCESS}>
      <strong>
        <FormattedMessage
          id="learning.outline.alert.cert.title"
-          defaultMessage="We are working on generating course certificates."
+          defaultMessage="Your grade and certificate will be ready soon!"
        />
      </strong>
      <br />
      <FormattedMessage
        id="learning.outline.alert.cert.when"
-        defaultMessage="If you have earned a certificate, you will be able to access it {timeRemaining}. You will also be able to view your certificates on your {profileLink}."
+        defaultMessage="This course ended on {courseEndDateFormatted} and final grades and certificates are
+        scheduled to be available after {certificateAvailableDate}."
        values={{
-          profileLink: (
-            <Hyperlink
-              destination={`${getConfig().LMS_BASE_URL}/u/${username}`}
-            >
-              <FormattedMessage
-                id="learning.outline.alert.cert.profile"
-                defaultMessage="Learner Profile"
-              />
-            </Hyperlink>
-          ),
-          timeRemaining: (
-            <FormattedRelative
-              key="timeRemaining"
-              value={certDate}
-              {...timezoneFormatArgs}
-            />
-          ),
+          courseEndDateFormatted,
+          certificateAvailableDate: certificateAvailableDateFormatted,
        }}
+        {...timezoneFormatArgs}
      />
    </Alert>
  );
@@ -54,8 +41,7 @@ function CertificateAvailableAlert({ payload }) {
 CertificateAvailableAlert.propTypes = {
  payload: PropTypes.shape({
    certDate: PropTypes.string,
-    username: PropTypes.string,
-    userTimezone: PropTypes.string,
+    courseEndDate: PropTypes.string,
  }).isRequired,
 };

--- a/src/course-home/outline-tab/alerts/certificate-available-alert/hooks.js
+++ b/src/course-home/outline-tab/alerts/certificate-available-alert/hooks.js
@@ -18,7 +18,6 @@ function useCertificateAvailableAlert(courseId) {
  } = useModel('outline', courseId);
  const authenticatedUser = getAuthenticatedUser();
  const username = authenticatedUser ? authenticatedUser.username : '';
-
  const certBlock = courseDateBlocks.find(b => b.dateType === 'certificate-available-date');
  const endBlock = courseDateBlocks.find(b => b.dateType === 'course-end-date');
  const endDate = endBlock ? new Date(endBlock.date) : null;
@@ -26,6 +25,7 @@ function useCertificateAvailableAlert(courseId) {
  const isVisible = isEnrolled && certBlock && hasEnded; // only show if we're between end and cert dates
  const payload = {
    certDate: certBlock && certBlock.date,
+    courseEndDate: endDate,
    username,
    userTimezone,
  };
--- a/src/course-home/outline-tab/alerts/course-end-alert/CourseEndAlert.jsx
+++ b/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}
--- a/src/course-home/outline-tab/alerts/course-start-alert/CourseStartAlert.jsx
+++ b/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}
--- a/src/course-home/outline-tab/messages.js
+++ b/src/course-home/outline-tab/messages.js
@@ -140,6 +140,14 @@ const messages = defineMessages({
    id: 'learning.proctoringPanel.status.error',
    defaultMessage: 'Error',
  },
+  otherCourseApprovedProctoringStatus: {
+    id: 'learning.proctoringPanel.status.otherCourseApproved',
+    defaultMessage: 'Approved in Another Course',
+  },
+  expiringSoonProctoringStatus: {
+    id: 'learning.proctoringPanel.status.expiringSoon',
+    defaultMessage: 'Expiring Soon',
+  },
  proctoringCurrentStatus: {
    id: 'learning.proctoringPanel.status',
    defaultMessage: 'Current Onboarding Status:',
@@ -158,7 +166,7 @@ const messages = defineMessages({
  },
  verifiedProctoringMessage: {
    id: 'learning.proctoringPanel.message.verified',
-    defaultMessage: 'You can now take proctored exams in this course.',
+    defaultMessage: 'Your onboarding exam has been approved in this course.',
  },
  rejectedProctoringMessage: {
    id: 'learning.proctoringPanel.message.rejected',
@@ -168,6 +176,18 @@ const messages = defineMessages({
    id: 'learning.proctoringPanel.message.error',
    defaultMessage: 'An error has occurred during your onboarding exam. Please retry onboarding.',
  },
+  otherCourseApprovedProctoringMessage: {
+    id: 'learning.proctoringPanel.message.otherCourseApproved',
+    defaultMessage: 'Your onboarding exam has been approved in another course.',
+  },
+  otherCourseApprovedProctoringDetail: {
+    id: 'learning.proctoringPanel.detail.otherCourseApproved',
+    defaultMessage: 'If your device has changed, we recommend that you complete this course\'s onboarding exam in order to ensure that your setup still meets the requirements for proctoring.',
+  },
+  expiringSoonProctoringMessage: {
+    id: 'learning.proctoringPanel.message.expiringSoon',
+    defaultMessage: 'Your onboarding profile has been approved in another course. However, your onboarding status is expiring soon. Please complete onboarding again to ensure that you will be able to continue taking proctored exams.',
+  },
  proctoringPanelGeneralInfo: {
    id: 'learning.proctoringPanel.generalInfo',
    defaultMessage: 'You must complete the onboarding process prior to taking any proctored exam. ',
@@ -178,12 +198,20 @@ const messages = defineMessages({
  },
  proctoringPanelGeneralTime: {
    id: 'learning.proctoringPanel.generalTime',
-    defaultMessage: 'Onboarding profile review, including identity verification, can take 2+ business days.',
+    defaultMessage: 'Onboarding profile review can take 2+ business days.',
  },
  proctoringOnboardingButton: {
    id: 'learning.proctoringPanel.onboardingButton',
    defaultMessage: 'Complete Onboarding',
  },
+  proctoringOnboardingPracticeButton: {
+    id: 'learning.proctoringPanel.onboardingPracticeButton',
+    defaultMessage: 'View Onboarding Exam',
+  },
+  proctoringOnboardingButtonNotOpen: {
+    id: 'learning.proctoringPanel.onboardingButtonNotOpen',
+    defaultMessage: 'Onboarding Opens: {releaseDate}',
+  },
  proctoringReviewRequirementsButton: {
    id: 'learning.proctoringPanel.reviewRequirementsButton',
    defaultMessage: 'Review instructions and system requirements',
--- a/src/course-home/outline-tab/widgets/CourseDates.jsx
+++ b/src/course-home/outline-tab/widgets/CourseDates.jsx
@@ -7,7 +7,12 @@ import DateSummary from '../DateSummary';
 import messages from '../messages';
 import { useModel } from '../../../generic/model-store';

-function CourseDates({ courseId, intl }) {
+function CourseDates({
+  courseId,
+  intl,
+  /** [MM-P2P] Experiment */
+  mmp2p,
+}) {
  const {
    datesWidget: {
      courseDateBlocks,
@@ -29,6 +34,8 @@ function CourseDates({ courseId, intl }) {
            key={courseDateBlock.title + courseDateBlock.date}
            dateBlock={courseDateBlock}
            userTimezone={userTimezone}
+            /** [MM-P2P] Experiment */
+            mmp2p={mmp2p}
          />
        ))}
      </ol>
@@ -42,10 +49,14 @@ function CourseDates({ courseId, intl }) {
 CourseDates.propTypes = {
  courseId: PropTypes.string,
  intl: intlShape.isRequired,
+  /** [MM-P2P] Experiment */
+  mmp2p: PropTypes.shape({}),
 };

 CourseDates.defaultProps = {
  courseId: null,
+  /** [MM-P2P] Experiment */
+  mmp2p: {},
 };

 export default injectIntl(CourseDates);
--- a/src/course-home/outline-tab/widgets/CourseTools.jsx
+++ b/src/course-home/outline-tab/widgets/CourseTools.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';

-import { sendTrackingLogEvent } from '@edx/frontend-platform/analytics';
+import { sendTrackEvent, sendTrackingLogEvent } from '@edx/frontend-platform/analytics';
 import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -23,15 +23,29 @@ function CourseTools({ courseId, intl }) {
    return null;
  }

+  const eventProperties = {
+    org_key: org,
+    courserun_key: courseId,
+  };
+
  const logClick = (analyticsId) => {
    const { administrator } = getAuthenticatedUser();
    sendTrackingLogEvent('edx.course.tool.accessed', {
-      org_key: org,
-      courserun_key: courseId,
+      ...eventProperties,
      course_id: courseId, // should only be courserun_key, but left as-is for historical reasons
      is_staff: administrator,
      tool_name: analyticsId,
    });
+
+    if (analyticsId === 'edx.tool.verified_upgrade') {
+      sendTrackEvent('edx.bi.ecommerce.upsell_links_clicked', {
+        ...eventProperties,
+        linkCategory: '(none)',
+        linkName: 'course_home_course_tools',
+        linkType: 'link',
+        pageName: 'course_home',
+      });
+    }
  };

  const renderIcon = (iconClasses) => {
--- a/src/course-home/outline-tab/widgets/ProctoringInfoPanel.jsx
+++ b/src/course-home/outline-tab/widgets/ProctoringInfoPanel.jsx
@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react';
+import camelCase from 'lodash.camelcase';
 import PropTypes from 'prop-types';

 import { getConfig } from '@edx/frontend-platform';
@@ -8,21 +9,36 @@ 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);
  const [readableStatus, setReadableStatus] = useState('');

+  const readableStatuses = {
+    notStarted: 'notStarted',
+    started: 'started',
+    submitted: 'submitted',
+    verified: 'verified',
+    rejected: 'rejected',
+    error: 'error',
+    otherCourseApproved: 'otherCourseApproved',
+    expiringSoon: 'expiringSoon',
+  };
+
  function getReadableStatusClass(examStatus) {
    let readableClass = '';
    if (['created', 'download_software_clicked', 'ready_to_start'].includes(examStatus) || !examStatus) {
-      readableClass = 'notStarted';
+      readableClass = readableStatuses.notStarted;
    } else if (['started', 'ready_to_submit'].includes(examStatus)) {
-      readableClass = 'started';
+      readableClass = readableStatuses.started;
    } else if (['second_review_required', 'submitted'].includes(examStatus)) {
-      readableClass = 'submitted';
-    } else if (['verified', 'rejected', 'error'].includes(examStatus)) {
-      readableClass = examStatus;
+      readableClass = readableStatuses.submitted;
+    } else {
+      const examStatusCamelCase = camelCase(examStatus);
+      if (examStatusCamelCase in readableStatuses) {
+        readableClass = readableStatuses[examStatusCamelCase];
+      }
    }
    return readableClass;
  }
@@ -32,24 +48,45 @@ function ProctoringInfoPanel({ courseId, intl }) {
    return !NO_SHOW_STATES.includes(examStatus);
  }

-  function getBorderClass(examStatus) {
+  function isNotYetReleased(examReleaseDate) {
+    if (!examReleaseDate) {
+      return false;
+    }
+    const now = new Date();
+    return now < examReleaseDate;
+  }
+
+  function getBorderClass() {
    let borderClass = '';
-    if (['submitted', 'second_review_required'].includes(examStatus)) {
+    if ([readableStatuses.submitted, readableStatuses.expiringSoon].includes(readableStatus)) {
      borderClass = 'proctoring-onboarding-submitted';
-    } else if (examStatus === 'verified') {
+    } else if ([readableStatuses.verified, readableStatuses.otherCourseApproved].includes(readableStatus)) {
      borderClass = 'proctoring-onboarding-success';
    }
    return borderClass;
  }

+  function isExpiringSoon(dateString) {
+    // Returns true if the expiration date is within 28 days
+    const today = new Date();
+    const expirationDateObject = new Date(dateString);
+    return today > expirationDateObject.getTime() - 2419200000;
+  }
+
  useEffect(() => {
-    getProctoringInfoData(courseId)
+    getProctoringInfoData(courseId, username)
      .then(
        response => {
          if (response) {
            setStatus(response.onboarding_status);
            setLink(response.onboarding_link);
-            setReadableStatus(getReadableStatusClass(response.onboarding_status));
+            const expirationDate = response.expiration_date;
+            if (expirationDate && isExpiringSoon(expirationDate)) {
+              setReadableStatus(getReadableStatusClass('expiringSoon'));
+            } else {
+              setReadableStatus(getReadableStatusClass(response.onboarding_status));
+            }
+            setReleaseDate(new Date(response.onboarding_release_date));
          }
        },
      );
@@ -58,7 +95,7 @@ function ProctoringInfoPanel({ courseId, intl }) {
  return (
    <>
      { link && (
-        <section className={`mb-4 p-3 outline-sidebar-proctoring-panel ${getBorderClass(status)}`}>
+        <section className={`mb-4 p-3 outline-sidebar-proctoring-panel ${getBorderClass()}`}>
          <h2 className="h4" id="outline-sidebar-upgrade-header">{intl.formatMessage(messages.proctoringInfoPanel)}</h2>
          <div>
            {readableStatus && (
@@ -69,9 +106,12 @@ function ProctoringInfoPanel({ courseId, intl }) {
                <p>
                  {intl.formatMessage(messages[`${readableStatus}ProctoringMessage`])}
                </p>
+                <p>
+                  {readableStatus === readableStatuses.otherCourseApproved && intl.formatMessage(messages[`${readableStatus}ProctoringDetail`])}
+                </p>
              </>
            )}
-            {(readableStatus !== 'verified') && (
+            {![readableStatuses.verified, readableStatuses.otherCourseApproved].includes(readableStatus) && (
              <>
                <p>
                  {isNotYetSubmitted(status) && (
@@ -89,9 +129,36 @@ function ProctoringInfoPanel({ courseId, intl }) {
              </>
            )}
            {isNotYetSubmitted(status) && (
-              <Button variant="primary" block href={`${getConfig().LMS_BASE_URL}${link}`}>
-                {intl.formatMessage(messages.proctoringOnboardingButton)}
-              </Button>
+              <>
+                {!isNotYetReleased(releaseDate) && (
+                  <Button variant="primary" block href={`${getConfig().LMS_BASE_URL}${link}`}>
+                    {readableStatus === readableStatuses.otherCourseApproved && (
+                      <>
+                        {intl.formatMessage(messages.proctoringOnboardingPracticeButton)}
+                      </>
+                    )}
+                    {readableStatus !== readableStatuses.otherCourseApproved && (
+                      <>
+                        {intl.formatMessage(messages.proctoringOnboardingButton)}
+                      </>
+                    )}
+                  </Button>
+                )}
+                {isNotYetReleased(releaseDate) && (
+                  <Button variant="secondary" block disabled aria-disabled="true">
+                    {intl.formatMessage(
+                      messages.proctoringOnboardingButtonNotOpen,
+                      {
+                        releaseDate: intl.formatDate(releaseDate, {
+                          day: 'numeric',
+                          month: 'short',
+                          year: 'numeric',
+                        }),
+                      },
+                    )}
+                  </Button>
+                )}
+              </>
            )}
            <Button variant="outline-primary" block href="https://support.edx.org/hc/en-us/sections/115004169247-Taking-Timed-and-Proctored-Exams">
              {intl.formatMessage(messages.proctoringReviewRequirementsButton)}
@@ -105,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);
--- a/src/course-home/outline-tab/widgets/UpgradeCard.jsx
+++ b/src/course-home/outline-tab/widgets/UpgradeCard.jsx
@@ -1,21 +1,232 @@
 import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
+import { faCheck } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

 import { sendTrackEvent, sendTrackingLogEvent } from '@edx/frontend-platform/analytics';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { Button } from '@edx/paragon';
+import { FormattedDate, FormattedMessage, injectIntl } from '@edx/frontend-platform/i18n';
+import { getConfig } from '@edx/frontend-platform';

-import messages from '../messages';
-import { useModel } from '../../../generic/model-store';
 import { UpgradeButton } from '../../../generic/upgrade-button';
-import VerifiedCert from '../../../generic/assets/edX_certificate.png';

-function UpgradeCard({ courseId, intl, onLearnMore }) {
-  const { org } = useModel('courseHomeMeta', courseId);
-  const {
-    offer,
-    verifiedMode,
-  } = useModel('outline', courseId);
+function UpsellNoFBECardContent() {
+  return (
+    <ul className="fa-ul upgrade-card-ul pt-0">
+      <li>
+        <span className="fa-li upgrade-card-li"><FontAwesomeIcon icon={faCheck} /></span>
+        <FormattedMessage
+          id="learning.outline.alert.upgradecard.verifiedCertLink"
+          defaultMessage="Earn a {verifiedCertLink} of completion to showcase on your resume"
+          values={{
+            verifiedCertLink: (
+              <a className="inline-link-underline font-weight-bold" rel="noopener noreferrer" target="_blank" href={`${getConfig().MARKETING_SITE_BASE_URL}/verified-certificate`}>verified certificate</a>
+            ),
+          }}
+        />
+      </li>
+      <li>
+        <span className="fa-li upgrade-card-li"><FontAwesomeIcon icon={faCheck} /></span>
+        <FormattedMessage
+          id="learning.outline.alert.upgradecard.nonProfitMission"
+          defaultMessage="Support our {nonProfitMission} at edX"
+          values={{
+            nonProfitMission: (
+              <span className="font-weight-bold">non-profit mission</span>
+            ),
+          }}
+        />
+      </li>
+    </ul>
+  );
+}
+
+function UpsellFBEFarAwayCardContent() {
+  return (
+    <ul className="fa-ul upgrade-card-ul">
+      <li>
+        <span className="fa-li upgrade-card-li"><FontAwesomeIcon icon={faCheck} /></span>
+        <FormattedMessage
+          id="learning.outline.alert.upgradecard.verifiedCertLink"
+          defaultMessage="Earn a {verifiedCertLink} of completion to showcase on your resume"
+          values={{
+            verifiedCertLink: (
+              <a className="inline-link-underline font-weight-bold" rel="noopener noreferrer" target="_blank" href={`${getConfig().MARKETING_SITE_BASE_URL}/verified-certificate`}>verified certificate</a>
+            ),
+          }}
+        />
+      </li>
+      <li>
+        <span className="fa-li upgrade-card-li"><FontAwesomeIcon icon={faCheck} /></span>
+        <FormattedMessage
+          id="learning.outline.alert.upgradecard.unlock-graded"
+          defaultMessage="Unlock your access to all course activities, including {gradedAssignments}"
+          values={{
+            gradedAssignments: (
+              <span className="font-weight-bold">graded assignments</span>
+            ),
+          }}
+        />
+      </li>
+      <li>
+        <span className="fa-li upgrade-card-li"><FontAwesomeIcon icon={faCheck} /></span>
+        <FormattedMessage
+          id="learning.outline.alert.upgradecard.fullAccess"
+          defaultMessage="{fullAccess} to course content and materials, even after the course ends"
+          values={{
+            fullAccess: (
+              <span className="font-weight-bold">Full access</span>
+            ),
+          }}
+        />
+      </li>
+      <li>
+        <span className="fa-li upgrade-card-li"><FontAwesomeIcon icon={faCheck} /></span>
+        <FormattedMessage
+          id="learning.outline.alert.upgradecard.nonProfitMission"
+          defaultMessage="Support our {nonProfitMission} at edX"
+          values={{
+            nonProfitMission: (
+              <span className="font-weight-bold">non-profit mission</span>
+            ),
+          }}
+        />
+      </li>
+    </ul>
+  );
+}
+
+function UpsellFBESoonCardContent({ accessExpirationDate, timezoneFormatArgs }) {
+  return (
+    <div className="upgrade-card-text">
+      <p>
+        <FormattedMessage
+          id="learning.outline.alert.upgradecard.expirationAccessLoss"
+          defaultMessage="You will lose all access to this course, {includingAnyProgress}, on {date}."
+          values={{
+            includingAnyProgress: (<span className="font-weight-bold">including any progress</span>),
+            date: (
+              <FormattedDate
+                key="accessDate"
+                day="numeric"
+                month="long"
+                value={new Date(accessExpirationDate)}
+                {...timezoneFormatArgs}
+              />
+            ),
+          }}
+        />
+      </p>
+      <p>
+        <FormattedMessage
+          id="learning.outline.alert.upgradecard.expirationVerifiedCert"
+          defaultMessage="Upgrading your course enables you to pursue a verified certificate and unlocks numerous features. Learn more about the {benefitsOfUpgrading}."
+          values={{
+            benefitsOfUpgrading: (<a className="inline-link-underline font-weight-bold" rel="noopener noreferrer" target="_blank" href="https://support.edx.org/hc/en-us/articles/360013426573-What-are-the-differences-between-audit-free-and-verified-paid-courses-">benefits of upgrading</a>),
+          }}
+        />
+      </p>
+    </div>
+  );
+}
+
+UpsellFBESoonCardContent.propTypes = {
+  accessExpirationDate: PropTypes.PropTypes.instanceOf(Date).isRequired,
+  timezoneFormatArgs: PropTypes.shape({
+    timeZone: PropTypes.string,
+  }),
+};
+
+UpsellFBESoonCardContent.defaultProps = {
+  timezoneFormatArgs: {},
+};
+
+function ExpirationCountdown({ hoursToExpiration }) {
+  let expirationText;
+
+  if (hoursToExpiration >= 24) {
+    expirationText = (
+      <FormattedMessage
+        id="learning.outline.alert.upgradecard.expiration.days"
+        defaultMessage={`{dayCount, number} {dayCount, plural, 
+          one {day}
+          other {days}} left`}
+        values={{
+          dayCount: (Math.floor(hoursToExpiration / 24)),
+        }}
+      />
+    );
+  } else if (hoursToExpiration >= 1) {
+    expirationText = (
+      <FormattedMessage
+        id="learning.outline.alert.upgradecard.expiration.hours"
+        defaultMessage={`{hourCount, number} {hourCount, plural,
+          one {hour}
+          other {hours}} left`}
+        values={{
+          hourCount: (hoursToExpiration),
+        }}
+      />
+    );
+  } else {
+    expirationText = (
+      <FormattedMessage
+        id="learning.outline.alert.upgradecard.expiration.minutes"
+        defaultMessage="Less than 1 hour left"
+      />
+    );
+  }
+  return (<div className="upsell-warning">{expirationText}</div>);
+}
+
+ExpirationCountdown.propTypes = {
+  hoursToExpiration: PropTypes.number.isRequired,
+};
+
+function AccessExpirationDateBanner({ accessExpirationDate, timezoneFormatArgs }) {
+  return (
+    <div className="upsell-warning-light">
+      <FormattedMessage
+        id="learning.outline.alert.upgradecard.expirationr"
+        defaultMessage="Course access will expire {date}"
+        values={{
+          date: (
+            <FormattedDate
+              key="accessExpireDate"
+              day="numeric"
+              month="long"
+              value={accessExpirationDate}
+              {...timezoneFormatArgs}
+            />
+          ),
+        }}
+      />
+    </div>
+  );
+}
+
+AccessExpirationDateBanner.propTypes = {
+  accessExpirationDate: PropTypes.PropTypes.instanceOf(Date).isRequired,
+  timezoneFormatArgs: PropTypes.shape({
+    timeZone: PropTypes.string,
+  }),
+};
+
+AccessExpirationDateBanner.defaultProps = {
+  timezoneFormatArgs: {},
+};
+
+function UpgradeCard({
+  accessExpiration,
+  contentTypeGatingEnabled,
+  courseId,
+  offer,
+  org,
+  timeOffsetMillis,
+  userTimezone,
+  verifiedMode,
+}) {
+  const timezoneFormatArgs = userTimezone ? { timeZone: userTimezone } : {};
+  const correctedTime = new Date(Date.now() + timeOffsetMillis);

  if (!verifiedMode) {
    return null;
@@ -37,7 +248,7 @@ function UpgradeCard({ courseId, intl, onLearnMore }) {
  useEffect(() => {
    sendTrackingLogEvent('edx.bi.course.upgrade.sidebarupsell.displayed', eventProperties);
    sendTrackEvent('Promotion Viewed', promotionEventProperties);
-  });
+  }, []);

  const logClick = () => {
    sendTrackingLogEvent('edx.bi.course.upgrade.sidebarupsell.clicked', eventProperties);
@@ -46,55 +257,146 @@ function UpgradeCard({ courseId, intl, onLearnMore }) {
      location: 'sidebar-message',
    });
    sendTrackEvent('Promotion Clicked', promotionEventProperties);
+    sendTrackEvent('edx.bi.ecommerce.upsell_links_clicked', {
+      ...eventProperties,
+      linkCategory: 'green_upgrade',
+      linkName: 'course_home_green',
+      linkType: 'button',
+      pageName: 'course_home',
+    });
  };

-  return (
-    <section className="mb-4 p-3 outline-sidebar-upgrade-card">
-      <h2 className="h4" id="outline-sidebar-upgrade-header">{intl.formatMessage(messages.upgradeTitle)}</h2>
-      <div className="row w-100 m-0">
-        <div className="col-6 col-md-12 col-lg-3 col-xl-4 p-0 text-md-center text-lg-left">
-          <img
-            alt={intl.formatMessage(messages.certAlt)}
-            className="w-100"
-            src={VerifiedCert}
-            style={{ maxWidth: '10rem' }}
+  /*
+  There are 4 parts that change in the upgrade card:
+    upgradeCardHeaderText
+    expirationBanner
+    upsellMessage
+    offerCode
+  */
+  let upgradeCardHeaderText;
+  let expirationBanner;
+  let upsellMessage;
+  let offerCode;
+
+  if (!!accessExpiration && !!contentTypeGatingEnabled) {
+    const accessExpirationDate = new Date(accessExpiration.expirationDate);
+    const hoursToAccessExpiration = Math.floor((accessExpirationDate - correctedTime) / 1000 / 60 / 60);
+
+    if (offer) { // if there's a first purchase discount, message the code at the bottom
+      offerCode = (
+        <div className="text-center discount-info">
+          <FormattedMessage
+            id="learning.outline.alert.upgradecard.code"
+            defaultMessage="Use code {code} at checkout"
+            values={{
+              code: (<span className="font-weight-bold">{offer.code}</span>),
+            }}
          />
        </div>
-        <div className="col-6 col-md-12 col-lg-9 col-xl-8 p-0 pl-lg-2 text-center mt-md-2 mt-lg-0">
-          <div className="row w-100 m-0 justify-content-center">
-            <UpgradeButton
-              offer={offer}
-              onClick={logClick}
-              verifiedMode={verifiedMode}
-            />
-            {onLearnMore && (
-              <div className="col-12">
-                <Button
-                  variant="link"
-                  size="sm"
-                  className="pb-0"
-                  onClick={onLearnMore}
-                  aria-labelledby="outline-sidebar-upgrade-header"
-                >
-                  {intl.formatMessage(messages.learnMore)}
-                </Button>
-              </div>
-            )}
-          </div>
-        </div>
+      );
+    }
+
+    if (hoursToAccessExpiration >= (7 * 24)) {
+      if (offer) { // countdown to the first purchase discount if there is one
+        const hoursToDiscountExpiration = Math.floor((new Date(offer.expirationDate) - correctedTime) / 1000 / 60 / 60);
+        upgradeCardHeaderText = (
+          <FormattedMessage
+            id="learning.outline.alert.upgradecard.firstTimeLearnerDiscount"
+            defaultMessage="{percentage}% First-Time Learner Discount"
+            values={{
+              percentage: (offer.percentage),
+            }}
+          />
+        );
+        expirationBanner = <ExpirationCountdown hoursToExpiration={hoursToDiscountExpiration} />;
+      } else {
+        upgradeCardHeaderText = (
+          <FormattedMessage
+            id="learning.outline.alert.upgradecard.accessExpiration"
+            defaultMessage="Upgrade your course today"
+          />
+        );
+        expirationBanner = (
+          <AccessExpirationDateBanner
+            accessExpirationDate={accessExpirationDate}
+            timezoneFormatArgs={timezoneFormatArgs}
+          />
+        );
+      }
+      upsellMessage = <UpsellFBEFarAwayCardContent />;
+    } else { // more urgent messaging if there's less than 7 days left to access expiration
+      upgradeCardHeaderText = (
+        <FormattedMessage
+          id="learning.outline.alert.upgradecard.accessExpirationUrgent"
+          defaultMessage="Course Access Expiration"
+        />
+      );
+      expirationBanner = <ExpirationCountdown hoursToExpiration={hoursToAccessExpiration} />;
+      upsellMessage = (
+        <UpsellFBESoonCardContent
+          accessExpirationDate={accessExpirationDate}
+          timezoneFormatArgs={timezoneFormatArgs}
+        />
+      );
+    }
+  } else { // FBE is turned off
+    upgradeCardHeaderText = (
+      <FormattedMessage
+        id="learning.outline.alert.upgradecard.pursueAverifiedCertificate"
+        defaultMessage="Pursue a verified certificate"
+      />
+    );
+    upsellMessage = (<UpsellNoFBECardContent />);
+  }
+
+  return (
+    <section className="mb-4 card upgrade-card small">
+      <h2 className="h5 upgrade-card-header" id="outline-sidebar-upgrade-header">
+        {upgradeCardHeaderText}
+      </h2>
+      {expirationBanner}
+      <div className="upgrade-card-message">
+        {upsellMessage}
      </div>
+      <UpgradeButton
+        offer={offer}
+        onClick={logClick}
+        verifiedMode={verifiedMode}
+        className="upgrade-card-button"
+      />
+      {offerCode}
    </section>
  );
 }

 UpgradeCard.propTypes = {
  courseId: PropTypes.string.isRequired,
-  intl: intlShape.isRequired,
-  onLearnMore: PropTypes.func,
+  org: PropTypes.string.isRequired,
+  accessExpiration: PropTypes.shape({
+    expirationDate: PropTypes.string,
+  }),
+  contentTypeGatingEnabled: PropTypes.bool,
+  offer: PropTypes.shape({
+    expirationDate: PropTypes.string,
+    percentage: PropTypes.number,
+    code: PropTypes.string,
+  }),
+  timeOffsetMillis: PropTypes.number,
+  userTimezone: PropTypes.string,
+  verifiedMode: PropTypes.shape({
+    currencySymbol: PropTypes.string.isRequired,
+    price: PropTypes.number.isRequired,
+    upgradeUrl: PropTypes.string.isRequired,
+  }),
 };

 UpgradeCard.defaultProps = {
-  onLearnMore: null,
+  accessExpiration: null,
+  contentTypeGatingEnabled: false,
+  offer: null,
+  timeOffsetMillis: 0,
+  userTimezone: null,
+  verifiedMode: null,
 };

 export default injectIntl(UpgradeCard);
--- a/src/course-home/outline-tab/widgets/UpgradeCard.scss
+++ b/src/course-home/outline-tab/widgets/UpgradeCard.scss
@@ -1,4 +1,60 @@
-.outline-sidebar-upgrade-card {
-  border: 1px solid $dark-500;
-  border-top: 5px solid $dark-500;
+.upgrade-card {
+  border-radius: 0 !important;
 }
+
+.upgrade-card-header{
+  margin: 1.25rem;
+
+}
+
+.upsell-warning{
+  background-color: $danger-100;
+}
+
+.upsell-warning-light{
+  background-color: $warning-100;
+}
+
+.upsell-warning, .upsell-warning-light{
+  padding-left: 1.25rem;
+  padding-right: 1.25rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+
+.upgrade-card-ul{
+  margin-left: 3rem;
+  padding-top: 0.875rem;
+  padding-right: 1.25rem;
+}
+
+.upgrade-card-li{
+  left: -2.125rem;
+  top: 0 !important;
+}
+
+.upgrade-card-text{
+  padding-top: 0.875rem;
+  padding-right: 1.25rem;
+  padding-left: 1.25rem;
+}
+
+.upgrade-card-button{
+  margin-left: 1.25rem;
+  margin-right: 1.25rem;
+  margin-bottom: 1.25rem;
+}
+
+.discount-info {
+  border-top: 1px solid rgba(0, 0, 0, 0.125);
+  padding-top: .75rem;
+  padding-bottom: .75rem;
+}
+
+.inline-link-underline {
+  text-decoration: underline;
+}
+
+.upgrade-card .upgrade-card-message a{
+  color: $primary-500;
+}
--- a/src/course-home/outline-tab/widgets/UpgradeCard.test.jsx
+++ b/src/course-home/outline-tab/widgets/UpgradeCard.test.jsx
@@ -0,0 +1,236 @@
+import React from 'react';
+import { Factory } from 'rosie';
+
+import { initializeMockApp, render, screen } from '../../../setupTest';
+import UpgradeCard from './UpgradeCard';
+
+initializeMockApp();
+jest.mock('@edx/frontend-platform/analytics');
+const dateNow = new Date('2021-04-13T11:01:58.000Z');
+jest
+  .spyOn(global.Date, 'now')
+  .mockImplementation(() => dateNow.valueOf());
+
+describe('Upgrade Card', () => {
+  function buildAndRender(attributes) {
+    const upgradeCardData = Factory.build('upgradeCardData', { ...attributes });
+    render(<UpgradeCard {...upgradeCardData} />);
+  }
+
+  it('does not render when there is no verified mode', async () => {
+    buildAndRender({ verifiedMode: null });
+    expect(screen.queryByRole('link', { name: 'Upgrade for $149' })).not.toBeInTheDocument();
+  });
+
+  it('renders non-FBE when there is a verified mode but no FBE', async () => {
+    buildAndRender();
+    expect(screen.getByRole('heading', { name: 'Pursue a verified certificate' })).toBeInTheDocument();
+    expect(screen.getByText(/Earn a.*?of completion to showcase on your resume/s).textContent).toMatch('Earn a verified certificate of completion to showcase on your resume');
+    expect(screen.getByText(/Support our.*?at edX/s).textContent).toMatch('Support our non-profit mission at edX');
+    expect(screen.getByRole('link', { name: 'Upgrade for $149' })).toBeInTheDocument();
+  });
+
+  it('renders non-FBE when there is a verified mode and access expiration, but no content gating', async () => {
+    const expirationDate = new Date(dateNow);
+    expirationDate.setMinutes(expirationDate.getMinutes() + 45);
+    buildAndRender({
+      accessExpiration: {
+        expirationDate: expirationDate.toString(),
+      },
+    });
+    expect(screen.getByRole('heading', { name: 'Pursue a verified certificate' })).toBeInTheDocument();
+    expect(screen.getByText(/Earn a.*?of completion to showcase on your resume/s).textContent).toMatch('Earn a verified certificate of completion to showcase on your resume');
+    expect(screen.getByText(/Support our.*?at edX/s).textContent).toMatch('Support our non-profit mission at edX');
+    expect(screen.getByRole('link', { name: 'Upgrade for $149' })).toBeInTheDocument();
+  });
+
+  it('renders non-FBE when there is a verified mode and content gating, but no access expiration', async () => {
+    buildAndRender({
+      contentTypeGatingEnabled: true,
+    });
+    expect(screen.getByRole('heading', { name: 'Pursue a verified certificate' })).toBeInTheDocument();
+    expect(screen.getByText(/Earn a.*?of completion to showcase on your resume/s).textContent).toMatch('Earn a verified certificate of completion to showcase on your resume');
+    expect(screen.getByText(/Support our.*?at edX/s).textContent).toMatch('Support our non-profit mission at edX');
+    expect(screen.getByRole('link', { name: 'Upgrade for $149' })).toBeInTheDocument();
+  });
+
+  it('renders FBE expiration within an hour properly', async () => {
+    const expirationDate = new Date(dateNow);
+    expirationDate.setMinutes(expirationDate.getMinutes() + 45);
+    buildAndRender({
+      accessExpiration: {
+        expirationDate: expirationDate.toString(),
+      },
+      contentTypeGatingEnabled: true,
+    });
+    expect(screen.getByRole('heading', { name: 'Course Access Expiration' })).toBeInTheDocument();
+    expect(screen.getByText('Less than 1 hour left')).toBeInTheDocument();
+    expect(screen.getByText(/You will lose all access to this course.*?on/s).textContent).toMatch('You will lose all access to this course, including any progress, on April 13.');
+    expect(screen.getByText(/Upgrading your course enables you/s).textContent).toMatch('Upgrading your course enables you to pursue a verified certificate and unlocks numerous features. Learn more about the benefits of upgrading.');
+    expect(screen.getByRole('link', { name: 'Upgrade for $149' })).toBeInTheDocument();
+  });
+
+  it('renders FBE expiration within 24 hours properly', async () => {
+    const expirationDate = new Date(dateNow);
+    expirationDate.setHours(expirationDate.getHours() + 12);
+    buildAndRender({
+      accessExpiration: {
+        expirationDate: expirationDate.toString(),
+      },
+      contentTypeGatingEnabled: true,
+    });
+    expect(screen.getByRole('heading', { name: 'Course Access Expiration' })).toBeInTheDocument();
+    expect(screen.getByText('12 hours left')).toBeInTheDocument();
+    expect(screen.getByText(/You will lose all access to this course.*?on/s).textContent).toMatch('You will lose all access to this course, including any progress, on April 13.');
+    expect(screen.getByText(/Upgrading your course enables you/s).textContent).toMatch('Upgrading your course enables you to pursue a verified certificate and unlocks numerous features. Learn more about the benefits of upgrading.');
+    expect(screen.getByRole('link', { name: 'Upgrade for $149' })).toBeInTheDocument();
+  });
+
+  it('renders FBE expiration within 7 days properly', async () => {
+    const expirationDate = new Date(dateNow);
+    expirationDate.setDate(expirationDate.getDate() + 6);
+    buildAndRender({
+      accessExpiration: {
+        expirationDate: expirationDate.toString(),
+      },
+      contentTypeGatingEnabled: true,
+    });
+    expect(screen.getByRole('heading', { name: 'Course Access Expiration' })).toBeInTheDocument();
+    expect(screen.getByText('6 days left')).toBeInTheDocument(); // setting the time to 12 will mean that it's slightly less than 12
+    expect(screen.getByText(/You will lose all access to this course.*?on/s).textContent).toMatch('You will lose all access to this course, including any progress, on April 19.');
+    expect(screen.getByText(/Upgrading your course enables you/s).textContent).toMatch('Upgrading your course enables you to pursue a verified certificate and unlocks numerous features. Learn more about the benefits of upgrading.');
+    expect(screen.getByRole('link', { name: 'Upgrade for $149' })).toBeInTheDocument();
+  });
+
+  it('renders FBE expiration greater than 7 days properly', async () => {
+    const expirationDate = new Date(dateNow);
+    expirationDate.setDate(expirationDate.getDate() + 14);
+    buildAndRender({
+      accessExpiration: {
+        expirationDate: expirationDate.toString(),
+      },
+      contentTypeGatingEnabled: true,
+    });
+    expect(screen.getByRole('heading', { name: 'Upgrade your course today' })).toBeInTheDocument();
+    expect(screen.getByText(/Course access will expire/s).textContent).toMatch('Course access will expire April 27');
+    expect(screen.getByText(/Earn a.*?of completion to showcase on your resume/s).textContent).toMatch('Earn a verified certificate of completion to showcase on your resume');
+    expect(screen.getByText(/Unlock your access/s).textContent).toMatch('Unlock your access to all course activities, including graded assignments');
+    expect(screen.getByText(/to course content and materials/s).textContent).toMatch('Full access to course content and materials, even after the course ends');
+    expect(screen.getByText(/Support our.*?at edX/s).textContent).toMatch('Support our non-profit mission at edX');
+    expect(screen.getByRole('link', { name: 'Upgrade for $149' })).toBeInTheDocument();
+  });
+
+  it('renders discount less than an hour properly', async () => {
+    const accessExpirationDate = new Date(dateNow);
+    accessExpirationDate.setDate(accessExpirationDate.getDate() + 21);
+    const discountExpirationDate = new Date(dateNow);
+    discountExpirationDate.setMinutes(discountExpirationDate.getMinutes() + 30);
+    buildAndRender({
+      accessExpiration: {
+        expirationDate: accessExpirationDate.toString(),
+      },
+      contentTypeGatingEnabled: true,
+      offer: {
+        expirationDate: discountExpirationDate.toString(),
+        percentage: 15,
+        code: 'Welcome15',
+        discountedPrice: '126.65',
+        originalPrice: '149',
+        upgradeUrl: 'www.exampleUpgradeUrl.com',
+      },
+    });
+    expect(screen.getByRole('heading', { name: '15% First-Time Learner Discount' })).toBeInTheDocument();
+    expect(screen.getByText('Less than 1 hour left')).toBeInTheDocument();
+    expect(screen.getByText(/Earn a.*?of completion to showcase on your resume/s).textContent).toMatch('Earn a verified certificate of completion to showcase on your resume');
+    expect(screen.getByText(/Unlock your access/s).textContent).toMatch('Unlock your access to all course activities, including graded assignments');
+    expect(screen.getByText(/to course content and materials/s).textContent).toMatch('Full access to course content and materials, even after the course ends');
+    expect(screen.getByText(/Support our.*?at edX/s).textContent).toMatch('Support our non-profit mission at edX');
+    expect(screen.getByText(/Upgrade for/).textContent).toMatch('$126.65 ($149)');
+    expect(screen.getByText(/Use code.*?at checkout/s).textContent).toMatch('Use code Welcome15 at checkout');
+  });
+
+  it('renders discount less than a day properly', async () => {
+    const accessExpirationDate = new Date(dateNow);
+    accessExpirationDate.setDate(accessExpirationDate.getDate() + 21);
+    const discountExpirationDate = new Date(dateNow);
+    discountExpirationDate.setHours(discountExpirationDate.getHours() + 12);
+    buildAndRender({
+      accessExpiration: {
+        expirationDate: accessExpirationDate.toString(),
+      },
+      contentTypeGatingEnabled: true,
+      offer: {
+        expirationDate: discountExpirationDate.toString(),
+        percentage: 15,
+        code: 'Welcome15',
+        discountedPrice: '126.65',
+        originalPrice: '149',
+        upgradeUrl: 'www.exampleUpgradeUrl.com',
+      },
+    });
+    expect(screen.getByRole('heading', { name: '15% First-Time Learner Discount' })).toBeInTheDocument();
+    expect(screen.getByText(/hours left/s).textContent).toMatch('12 hours left');
+    expect(screen.getByText(/Earn a.*?of completion to showcase on your resume/s).textContent).toMatch('Earn a verified certificate of completion to showcase on your resume');
+    expect(screen.getByText(/Unlock your access/s).textContent).toMatch('Unlock your access to all course activities, including graded assignments');
+    expect(screen.getByText(/to course content and materials/s).textContent).toMatch('Full access to course content and materials, even after the course ends');
+    expect(screen.getByText(/Support our.*?at edX/s).textContent).toMatch('Support our non-profit mission at edX');
+    expect(screen.getByText(/Upgrade for/).textContent).toMatch('$126.65 ($149)');
+    expect(screen.getByText(/Use code.*?at checkout/s).textContent).toMatch('Use code Welcome15 at checkout');
+  });
+
+  it('renders discount less a week properly', async () => {
+    const accessExpirationDate = new Date(dateNow);
+    accessExpirationDate.setDate(accessExpirationDate.getDate() + 21);
+    const discountExpirationDate = new Date(dateNow);
+    discountExpirationDate.setDate(discountExpirationDate.getDate() + 6);
+    buildAndRender({
+      accessExpiration: {
+        expirationDate: accessExpirationDate.toString(),
+      },
+      contentTypeGatingEnabled: true,
+      offer: {
+        expirationDate: discountExpirationDate.toString(),
+        percentage: 15,
+        code: 'Welcome15',
+        discountedPrice: '126.65',
+        originalPrice: '149',
+        upgradeUrl: 'www.exampleUpgradeUrl.com',
+      },
+    });
+    expect(screen.getByRole('heading', { name: '15% First-Time Learner Discount' })).toBeInTheDocument();
+    expect(screen.getByText(/days left/s).textContent).toMatch('6 days left');
+    expect(screen.getByText(/Earn a.*?of completion to showcase on your resume/s).textContent).toMatch('Earn a verified certificate of completion to showcase on your resume');
+    expect(screen.getByText(/Unlock your access/s).textContent).toMatch('Unlock your access to all course activities, including graded assignments');
+    expect(screen.getByText(/to course content and materials/s).textContent).toMatch('Full access to course content and materials, even after the course ends');
+    expect(screen.getByText(/Support our.*?at edX/s).textContent).toMatch('Support our non-profit mission at edX');
+    expect(screen.getByText(/Upgrade for/).textContent).toMatch('$126.65 ($149)');
+    expect(screen.getByText(/Use code.*?at checkout/s).textContent).toMatch('Use code Welcome15 at checkout');
+  });
+
+  it('renders discount less a week access expiration less than a week properly', async () => {
+    const accessExpirationDate = new Date(dateNow);
+    accessExpirationDate.setDate(accessExpirationDate.getDate() + 5);
+    const discountExpirationDate = new Date(dateNow);
+    discountExpirationDate.setDate(discountExpirationDate.getDate() + 6);
+    buildAndRender({
+      accessExpiration: {
+        expirationDate: accessExpirationDate.toString(),
+      },
+      contentTypeGatingEnabled: true,
+      offer: {
+        expirationDate: discountExpirationDate.toString(),
+        percentage: 15,
+        code: 'Welcome15',
+        discountedPrice: '126.65',
+        originalPrice: '149',
+        upgradeUrl: 'www.exampleUpgradeUrl.com',
+      },
+    });
+    expect(screen.getByRole('heading', { name: 'Course Access Expiration' })).toBeInTheDocument();
+    expect(screen.getByText('5 days left')).toBeInTheDocument(); // setting the time to 12 will mean that it's slightly less than 12
+    expect(screen.getByText(/You will lose all access to this course.*?on/s).textContent).toMatch('You will lose all access to this course, including any progress, on April 18.');
+    expect(screen.getByText(/Upgrading your course enables you/s).textContent).toMatch('Upgrading your course enables you to pursue a verified certificate and unlocks numerous features. Learn more about the benefits of upgrading.');
+    expect(screen.getByText(/Upgrade for/).textContent).toMatch('$126.65 ($149)');
+    expect(screen.getByText(/Use code.*?at checkout/s).textContent).toMatch('Use code Welcome15 at checkout');
+  });
+});
--- a/src/course-home/progress-tab/CertificateBanner.jsx
+++ b/src/course-home/progress-tab/CertificateBanner.jsx
@@ -1,74 +0,0 @@
-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 '../../generic/assets/edX_certificate.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);
--- a/src/course-home/progress-tab/Chapter.jsx
+++ b/src/course-home/progress-tab/Chapter.jsx
@@ -1,36 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Subsection from './Subsection';
-
-export default function Chapter({
-  chapter,
-}) {
-  if (chapter.displayName === 'hidden') { return null; }
-  const { subsections } = chapter;
-  return (
-    <section className="border-top border-light-500">
-      <div className="row">
-        <div className="lead font-weight-normal col-12 col-sm-3 my-3 border-right border-light-500">
-          {chapter.displayName}
-        </div>
-        <div className="col-12 col-sm-9">
-          {subsections.map((subsection) => (
-            <Subsection
-              key={subsection.url}
-              subsection={subsection}
-            />
-          ))}
-        </div>
-      </div>
-    </section>
-  );
-}
-
-Chapter.propTypes = {
-  chapter: PropTypes.shape({
-    displayName: PropTypes.string,
-    subsections: PropTypes.arrayOf(PropTypes.shape({
-      url: PropTypes.string,
-    })),
-  }).isRequired,
-};
--- a/src/course-home/progress-tab/CreditRequirements.jsx
+++ b/src/course-home/progress-tab/CreditRequirements.jsx
@@ -1,151 +0,0 @@
-import React from 'react';
-import { useSelector } from 'react-redux';
-
-import {
-  FormattedDate, FormattedTime, injectIntl, intlShape,
-} from '@edx/frontend-platform/i18n';
-
-import { useModel } from '../../generic/model-store';
-import messages from './messages';
-
-function CreditRequirements({ intl }) {
-  const {
-    courseId,
-  } = useSelector(state => state.courseHome);
-
-  const {
-    creditCourseRequirements,
-    creditSupportUrl,
-    verificationData,
-    userTimezone,
-  } = useModel('progress', courseId);
-
-  if (creditCourseRequirements === null) { return null; }
-  const timezoneFormatArgs = userTimezone ? { timeZone: userTimezone } : {};
-  const eligibility = creditCourseRequirements.eligibilityStatus;
-  let message;
-  switch (eligibility) {
-    case 'not_eligible':
-      message = intl.formatMessage(messages.creditNotEligible);
-      break;
-    case 'eligible':
-      message = intl.formatMessage(messages.creditEligible);
-      break;
-    case 'partial_eligible':
-      message = intl.formatMessage(messages.creditPartialEligible);
-      break;
-    default:
-      break;
-  }
-
-  const completed = `✓ ${intl.formatMessage(messages.completed)} `;
-
-  const { status } = verificationData;
-  let verificationMessage;
-  let verificationLinkMessage = '';
-
-  switch (status) {
-    case 'none':
-    case 'expired':
-      verificationMessage = `${intl.formatMessage(messages.notStarted)}; `;
-      verificationLinkMessage = intl.formatMessage(messages.notStarted);
-      break;
-    case 'approved':
-      verificationMessage = completed;
-      break;
-    case 'pending':
-      verificationMessage = intl.formatMessage(messages.pending);
-      break;
-    case 'must_reverify':
-      verificationMessage = `${intl.formatMessage(messages.rejected)}; `;
-      verificationLinkMessage = intl.formatMessage(messages.tryAgain);
-      break;
-    default:
-      break;
-  }
-  return (
-    <section className="banner rounded row border border-primary-300 my-2">
-      <div className="col ml-4 my-3">
-        <div className="row font-weight-bold">
-          {intl.formatMessage(messages.courseCreditHeader)}
-        </div>
-        <div className="row mb-2">{message}</div>
-        {creditCourseRequirements.requirements.map((requirement) => (
-          <div key={requirement.displayName} className="row w-50 border-bottom">
-            <div className="col-4">
-              {requirement.displayName}
-              {requirement.minGrade && (
-                <span>{` ${requirement.minGrade}%`}</span>
-              )}
-            </div>
-            <div className="col-8">
-              {!requirement.status && (
-                intl.formatMessage(messages.notMet)
-              )}
-              {(requirement.status === 'failed' || requirement.status === 'declined') && (
-                intl.formatMessage(messages.failed)
-              )}
-              {requirement.status === 'submitted' && (
-                intl.formatMessage(messages.submitted)
-              )}
-              {requirement.status === 'satisfied' && (
-                <span>
-                  {completed}
-                  {requirement.statusDate && (
-                    <span>
-                      <FormattedDate
-                        value={requirement.statusDate}
-                        day="numeric"
-                        month="short"
-                        weekday="short"
-                        year="numeric"
-                        {...timezoneFormatArgs}
-                      /> <FormattedTime
-                        value={requirement.statusDate}
-                      />
-                    </span>
-                  )}
-                </span>
-              )}
-            </div>
-          </div>
-        ))}
-        <div className="row w-50 border-bottom">
-          <div className="col-4">Verification Status </div>
-          <div className="col-8">
-            {verificationMessage}
-            {verificationLinkMessage && (
-              <a href={verificationData.link}>{verificationLinkMessage}</a>
-            )}
-            {status === 'approved' && verificationData.statusDate && (
-              <span>
-                <FormattedDate
-                  value={verificationData.statusDate}
-                  day="numeric"
-                  month="short"
-                  weekday="short"
-                  year="numeric"
-                  {...timezoneFormatArgs}
-                />
-              </span>
-            )}
-          </div>
-        </div>
-        {eligibility === 'eligible' && (
-          <div className="mt-3 row">
-            <a className="btn btn-primary" href={creditCourseRequirements.dashboardUrl}>{intl.formatMessage(messages.purchaseCredit)}</a>
-          </div>
-        )}
-        <div className="mt-3 row">
-          <a href={creditSupportUrl}>{intl.formatMessage(messages.learnMoreCredit)}</a>
-        </div>
-      </div>
-    </section>
-  );
-}
-
-CreditRequirements.propTypes = {
-  intl: intlShape.isRequired,
-};
-
-export default injectIntl(CreditRequirements);
--- a/src/course-home/progress-tab/DueDateTime.jsx
+++ b/src/course-home/progress-tab/DueDateTime.jsx
@@ -1,36 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { useSelector } from 'react-redux';
-import { FormattedDate, FormattedTime } from '@edx/frontend-platform/i18n';
-import { useModel } from '../../generic/model-store';
-
-export default function DueDateTime({
-  due,
-}) {
-  const {
-    courseId,
-  } = useSelector(state => state.courseHome);
-  const {
-    userTimezone,
-  } = useModel('progress', courseId);
-  const timezoneFormatArgs = userTimezone ? { timeZone: userTimezone } : {};
-
-  return (
-    <em className="ml-0">
-      due <FormattedDate
-        value={due}
-        day="numeric"
-        month="short"
-        weekday="short"
-        year="numeric"
-        {...timezoneFormatArgs}
-      /> <FormattedTime
-        value={due}
-      />
-    </em>
-  );
-}
-
-DueDateTime.propTypes = {
-  due: PropTypes.string.isRequired,
-};
--- a/src/course-home/progress-tab/ProblemScores.jsx
+++ b/src/course-home/progress-tab/ProblemScores.jsx
@@ -1,37 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import messages from './messages';
-
-function ProblemScores({
-  intl,
-  scoreName,
-  problemScores,
-}) {
-  return (
-    <div className="row mt-1">
-      <dl className="d-flex flex-wrap small text-gray-500">
-        <dt className="mr-3">{intl.formatMessage(messages[`${scoreName}`])}</dt>
-        {problemScores.map((problem, index) => {
-          const key = scoreName + index;
-          return (
-            <dd className="mr-3" key={key}>{problem.earned}/{problem.possible}</dd>
-          );
-        })}
-      </dl>
-    </div>
-  );
-}
-
-ProblemScores.propTypes = {
-  intl: intlShape.isRequired,
-  scoreName: PropTypes.string.isRequired,
-  problemScores: PropTypes.arrayOf(PropTypes.shape({
-    possible: PropTypes.number,
-    earned: PropTypes.number,
-    id: PropTypes.string,
-  })).isRequired,
-};
-
-export default injectIntl(ProblemScores);
--- a/src/course-home/progress-tab/ProgressGraph.jsx
+++ b/src/course-home/progress-tab/ProgressGraph.jsx
--- a/src/course-home/progress-tab/ProgressHeader.jsx
+++ b/src/course-home/progress-tab/ProgressHeader.jsx
@@ -0,0 +1,39 @@
+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 { Button } from '@edx/paragon';
+
+import { useModel } from '../../generic/model-store';
+
+import messages from './messages';
+
+function ProgressHeader({ intl }) {
+  const {
+    courseId,
+  } = useSelector(state => state.courseHome);
+
+  const { administrator } = getAuthenticatedUser();
+
+  const { studioUrl } = useModel('progress', courseId);
+
+  return (
+    <>
+      <div className="row w-100 m-0 mt-3 mb-4 justify-content-between">
+        <h1>{intl.formatMessage(messages.progressHeader)}</h1>
+        {administrator && studioUrl && (
+          <Button variant="outline-primary" size="sm" className="align-self-center" href={studioUrl}>
+            {intl.formatMessage(messages.studioLink)}
+          </Button>
+        )}
+      </div>
+    </>
+  );
+}
+
+ProgressHeader.propTypes = {
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(ProgressHeader);
--- a/src/course-home/progress-tab/ProgressTab.jsx
+++ b/src/course-home/progress-tab/ProgressTab.jsx
@@ -1,48 +1,64 @@
 import React from 'react';
+import { layoutGenerator } from 'react-break';
 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';
-import CreditRequirements from './CreditRequirements';

-function ProgressTab({ intl }) {
+import CertificateStatus from './certificate-status/CertificateStatus';
+import CourseCompletion from './course-completion/CourseCompletion';
+import CourseGrade from './grades/course-grade/CourseGrade';
+import DetailedGrades from './grades/detailed-grades/DetailedGrades';
+import GradeSummary from './grades/grade-summary/GradeSummary';
+import ProgressHeader from './ProgressHeader';
+import RelatedLinks from './related-links/RelatedLinks';
+
+import { useModel } from '../../generic/model-store';
+
+function ProgressTab() {
  const {
    courseId,
  } = useSelector(state => state.courseHome);

-  const { administrator } = getAuthenticatedUser();
-
  const {
-    coursewareSummary,
-    studioUrl,
+    completionSummary: {
+      lockedCount,
+    },
  } = useModel('progress', courseId);
+  const isLocked = lockedCount > 0;
+  const applyLockedOverlay = isLocked ? 'locked-overlay' : '';

+  const layout = layoutGenerator({
+    mobile: 0,
+    desktop: 992,
+  });
+
+  const OnMobile = layout.is('mobile');
+  const OnDesktop = layout.isAtLeast('desktop');
  return (
-    <section>
-      {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>
+    <>
+      <ProgressHeader />
+      <div className="row w-100 m-0">
+        {/* Main body */}
+        <div className="col-12 col-md-8 p-0">
+          <CourseCompletion />
+          <OnMobile>
+            <CertificateStatus />
+          </OnMobile>
+          <CourseGrade />
+          <div className={`grades my-4 p-4 rounded shadow-sm ${applyLockedOverlay}`} aria-hidden={isLocked}>
+            <GradeSummary />
+            <DetailedGrades />
+          </div>
        </div>
-      )}
-      <CertificateBanner />
-      <CreditRequirements />
-      {coursewareSummary.map((chapter) => (
-        <Chapter
-          key={chapter.displayName}
-          chapter={chapter}
-        />
-      ))}
-    </section>
+
+        {/* Side panel */}
+        <div className="col-12 col-md-4 p-0 px-md-4">
+          <OnDesktop>
+            <CertificateStatus />
+          </OnDesktop>
+          <RelatedLinks />
+        </div>
+      </div>
+    </>
  );
 }

-ProgressTab.propTypes = {
-  intl: intlShape.isRequired,
-};
-
-export default injectIntl(ProgressTab);
+export default ProgressTab;
--- a/src/course-home/progress-tab/ProgressTab.test.jsx
+++ b/src/course-home/progress-tab/ProgressTab.test.jsx
@@ -0,0 +1,362 @@
+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 {
+  fireEvent, 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 setMetadata(attributes, options) {
+    const courseMetadata = Factory.build('courseHomeMetadata', { id: courseId, ...attributes }, options);
+    axiosMock.onGet(courseMetadataUrl).reply(200, courseMetadata);
+  }
+
+  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('Course Grade', () => {
+    it('renders Course Grade', async () => {
+      await fetchAndRender();
+      expect(screen.getByText('Grades')).toBeInTheDocument();
+      expect(screen.getByText('This represents your weighted grade against the grade needed to pass this course.')).toBeInTheDocument();
+    });
+
+    it('renders correct copy for non-passing', async () => {
+      await fetchAndRender();
+      expect(screen.queryByRole('button', { name: 'Grade range tooltip' })).not.toBeInTheDocument();
+      expect(screen.getByText('A weighted grade of 75% is required to pass in this course')).toBeInTheDocument();
+    });
+
+    it('renders correct copy for passing with pass/fail grade range', async () => {
+      setTabData({
+        course_grade: {
+          is_passing: true,
+          letter_grade: 'Pass',
+          percent: 0.9,
+        },
+      });
+      await fetchAndRender();
+      expect(screen.queryByRole('button', { name: 'Grade range tooltip' })).not.toBeInTheDocument();
+      expect(screen.getByText('You’re currently passing this course')).toBeInTheDocument();
+    });
+
+    it('renders correct copy and tooltip for non-passing with letter grade range', async () => {
+      setTabData({
+        course_grade: {
+          is_passing: false,
+          letter_grade: null,
+          percent: 0,
+        },
+        grading_policy: {
+          assignment_policies: [
+            {
+              num_droppable: 1,
+              short_label: 'HW',
+              type: 'Homework',
+              weight: 1,
+            },
+          ],
+          grade_range: {
+            A: 0.9,
+            B: 0.8,
+          },
+        },
+      });
+      await fetchAndRender();
+      expect(screen.getByRole('button', { name: 'Grade range tooltip' }));
+      expect(screen.getByText('A weighted grade of 80% is required to pass in this course')).toBeInTheDocument();
+    });
+
+    it('renders correct copy and tooltip for passing with letter grade range', async () => {
+      setTabData({
+        course_grade: {
+          is_passing: true,
+          letter_grade: 'B',
+          percent: 0.85,
+        },
+        grading_policy: {
+          assignment_policies: [
+            {
+              num_droppable: 1,
+              short_label: 'HW',
+              type: 'Homework',
+              weight: 1,
+            },
+          ],
+          grade_range: {
+            A: 0.9,
+            B: 0.8,
+          },
+        },
+      });
+      await fetchAndRender();
+      expect(screen.getByRole('button', { name: 'Grade range tooltip' }));
+      expect(await screen.findByText('You’re currently passing this course with a grade of B (80-90%)')).toBeInTheDocument();
+    });
+
+    it('renders tooltip for grade range', async () => {
+      setTabData({
+        course_grade: {
+          percent: 0,
+          is_passing: false,
+        },
+        grading_policy: {
+          assignment_policies: [
+            {
+              num_droppable: 1,
+              short_label: 'HW',
+              type: 'Homework',
+              weight: 1,
+            },
+          ],
+          grade_range: {
+            A: 0.9,
+            B: 0.8,
+          },
+        },
+      });
+      await fetchAndRender();
+      const tooltip = await screen.getByRole('button', { name: 'Grade range tooltip' });
+      fireEvent.click(tooltip);
+      expect(screen.getByText('Grade ranges for this course:'));
+      expect(screen.getByText('A: 90%-100%'));
+      expect(screen.getByText('B: 80%-90%'));
+      expect(screen.getByText('F: <80%'));
+    });
+
+    it('renders locked feature preview when user has locked content', async () => {
+      setTabData({
+        completion_summary: {
+          complete_count: 1,
+          incomplete_count: 1,
+          locked_count: 1,
+        },
+      });
+      await fetchAndRender();
+      expect(screen.getByText('locked feature')).toBeInTheDocument();
+    });
+    it('does not render locked feature preview when user does not have locked content', async () => {
+      await fetchAndRender();
+      expect(screen.queryByText('locked feature')).not.toBeInTheDocument();
+    });
+  });
+
+  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();
+    });
+  });
+
+  describe('Certificate Status', () => {
+    beforeAll(() => {
+      Object.defineProperty(window, 'matchMedia', {
+        writable: true,
+        value: jest.fn().mockImplementation(query => {
+          const matches = !!(query === 'screen and (min-width: 992px)');
+          return {
+            matches,
+            media: query,
+            onchange: null,
+            addListener: jest.fn(), // deprecated
+            removeListener: jest.fn(), // deprecated
+            addEventListener: jest.fn(),
+            removeEventListener: jest.fn(),
+            dispatchEvent: jest.fn(),
+          };
+        }),
+      });
+    });
+
+    describe('enrolled user', () => {
+      beforeEach(async () => {
+        setMetadata({ is_enrolled: true });
+      });
+
+      it('Displays text for nonPassing case when learner does not have a passing grade', async () => {
+        await fetchAndRender();
+        expect(screen.getByText('In order to qualify for a certificate, you must have a passing grade.')).toBeInTheDocument();
+      });
+
+      it('Displays text for inProgress case when more content is scheduled and the learner does not have a passing grade', async () => {
+        setTabData({
+          has_scheduled_content: true,
+        });
+        await fetchAndRender();
+        expect(screen.getByText('It looks like there is more content in this course that will be released in the future. Look out for email updates or check back on your course for when this content will be available.')).toBeInTheDocument();
+      });
+
+      it('Displays request certificate link', async () => {
+        setTabData({
+          certificate_data: { cert_status: 'requesting' },
+          user_has_passing_grade: true,
+        });
+        await fetchAndRender();
+        expect(screen.getByRole('button', { name: 'Request certificate' })).toBeInTheDocument();
+      });
+
+      it('Displays verify identity link', async () => {
+        setTabData({
+          certificate_data: { cert_status: 'unverified' },
+          user_has_passing_grade: true,
+          verification_data: { link: 'test' },
+        });
+        await fetchAndRender();
+        expect(screen.getByRole('link', { name: 'Verify ID' })).toBeInTheDocument();
+      });
+
+      it('Displays verification pending message', async () => {
+        setTabData({
+          certificate_data: { cert_status: 'unverified' },
+          verification_data: { status: 'pending' },
+          user_has_passing_grade: true,
+        });
+        await fetchAndRender();
+        expect(screen.getByText('Your ID verification is pending and your certificate will be available once approved.')).toBeInTheDocument();
+        expect(screen.queryByRole('link', { name: 'Verify ID' })).not.toBeInTheDocument();
+      });
+
+      it('Displays download link', async () => {
+        setTabData({
+          certificate_data: {
+            cert_status: 'downloadable',
+            download_url: 'fake.download.url',
+          },
+          user_has_passing_grade: true,
+        });
+        await fetchAndRender();
+        expect(screen.getByRole('link', { name: 'Download my certificate' })).toBeInTheDocument();
+      });
+
+      it('Displays webview link', async () => {
+        setTabData({
+          certificate_data: {
+            cert_status: 'downloadable',
+            cert_web_view_url: '/certificates/cooluuidgoeshere',
+          },
+          user_has_passing_grade: true,
+        });
+        await fetchAndRender();
+        expect(screen.getByRole('link', { name: 'View my certificate' })).toBeInTheDocument();
+      });
+
+      it('Displays certificate is earned but unavailable message', async () => {
+        setTabData({
+          certificate_data: { cert_status: 'earned_but_not_available' },
+          user_has_passing_grade: true,
+        });
+        await fetchAndRender();
+        expect(screen.queryByText('Certificate status')).toBeInTheDocument();
+      });
+
+      it('Displays upgrade link when available', async () => {
+        setTabData({
+          certificate_data: { cert_status: 'audit_passing' },
+          verified_mode: {
+            upgrade_url: 'http://localhost:18130/basket/add/?sku=8CF08E5',
+          },
+        });
+        await fetchAndRender();
+        // Keep these text checks in sync with "audit only" test below, so it doesn't end up checking for text that is
+        // never actually there, when/if the text changes.
+        expect(screen.getByText('You are in an audit track and do not qualify for a certificate. In order to work towards a certificate, upgrade your course today.')).toBeInTheDocument();
+        expect(screen.getByRole('link', { name: 'Upgrade now' })).toBeInTheDocument();
+      });
+
+      it('Displays nothing if audit only', async () => {
+        setTabData({
+          certificate_data: { cert_status: 'audit_passing' },
+        });
+        await fetchAndRender();
+        // Keep these queries in sync with "upgrade link" test above, so we don't end up checking for text that is
+        // never actually there, when/if the text changes.
+        expect(screen.queryByText('You are in an audit track and do not qualify for a certificate. In order to work towards a certificate, upgrade your course today.')).not.toBeInTheDocument();
+        expect(screen.queryByRole('link', { name: 'Upgrade now' })).not.toBeInTheDocument();
+      });
+
+      it('Does not display the certificate component if it does not match any statuses', async () => {
+        setTabData({
+          certificate_data: {
+            cert_status: 'bogus_status',
+          },
+          user_has_passing_grade: true,
+        });
+        setMetadata({ is_enrolled: true });
+        await fetchAndRender();
+        expect(screen.queryByTestId('certificate-status-component')).not.toBeInTheDocument();
+      });
+    });
+
+    it('Does not display the certificate component if the user is not enrolled', async () => {
+      await fetchAndRender();
+      expect(screen.queryByTestId('certificate-status-component')).not.toBeInTheDocument();
+    });
+  });
+});
--- a/src/course-home/progress-tab/Subsection.jsx
+++ b/src/course-home/progress-tab/Subsection.jsx
@@ -1,77 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import messages from './messages';
-
-import DueDateTime from './DueDateTime';
-import ProblemScores from './ProblemScores';
-
-function Subsection({
-  intl,
-  subsection,
-}) {
-  const scoreName = subsection.graded ? 'problem' : 'practice';
-
-  const { earned, possible } = subsection.gradedTotal;
-
-  const showTotalScore = ((possible > 0) || (earned > 0)) && subsection.showGrades;
-
-  // screen reader information
-  const totalScoreSr = intl.formatMessage(messages.pointsEarned, { earned, total: possible });
-
-  return (
-    <section className="my-3 ml-3">
-      <div className="row">
-        <a className="h6" href={subsection.url}>
-          {/* eslint-disable-next-line react/no-danger */}
-          <div dangerouslySetInnerHTML={{ __html: subsection.displayName }} />
-          {showTotalScore && <span className="sr-only">{totalScoreSr}</span>}
-        </a>
-        {showTotalScore && <span className="small ml-1 mb-2">({earned}/{possible}) {subsection.percentGraded}%</span>}
-      </div>
-      <div className="row small">
-        {subsection.format && <div className="mr-1">{subsection.format}</div>}
-        {subsection.due !== null && <DueDateTime due={subsection.due} />}
-      </div>
-      {subsection.problemScores.length > 0 && subsection.showGrades && (
-        <ProblemScores scoreName={scoreName} problemScores={subsection.problemScores} />
-      )}
-      {subsection.problemScores.length > 0 && !subsection.showGrades && subsection.showCorrectness === 'past_due' && (
-        <div className="row small">{intl.formatMessage(messages[`${scoreName}HiddenUntil`])}</div>
-      )}
-      {subsection.problemScores.length > 0 && !subsection.showGrades && !(subsection.showCorrectness === 'past_due')
-      && <div className="row small">{intl.formatMessage(messages[`${scoreName}Hidden`])}</div>}
-      {(subsection.problemScores.length === 0) && (
-        <div className="row small">{intl.formatMessage(messages.noScores)}</div>
-      )}
-    </section>
-  );
-}
-
-Subsection.propTypes = {
-  intl: intlShape.isRequired,
-  subsection: PropTypes.shape({
-    graded: PropTypes.bool.isRequired,
-    url: PropTypes.string.isRequired,
-    showGrades: PropTypes.bool.isRequired,
-    gradedTotal: PropTypes.shape({
-      possible: PropTypes.number,
-      earned: PropTypes.number,
-      graded: PropTypes.bool,
-    }).isRequired,
-    showCorrectness: PropTypes.string.isRequired,
-    due: PropTypes.string,
-    problemScores: PropTypes.arrayOf(PropTypes.shape({
-      possible: PropTypes.number,
-      earned: PropTypes.number,
-      id: PropTypes.string,
-    })).isRequired,
-    format: PropTypes.string,
-    // override: PropTypes.object,
-    displayName: PropTypes.string.isRequired,
-    percentGraded: PropTypes.number.isRequired,
-  }).isRequired,
-};
-
-export default injectIntl(Subsection);
--- a/src/course-home/progress-tab/certificate-status/CertificateStatus.jsx
+++ b/src/course-home/progress-tab/certificate-status/CertificateStatus.jsx
@@ -0,0 +1,175 @@
+import React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import {
+  FormattedDate, FormattedMessage, injectIntl, intlShape,
+} from '@edx/frontend-platform/i18n';
+
+import { Button, Card } from '@edx/paragon';
+import { getConfig } from '@edx/frontend-platform';
+import { useModel } from '../../../generic/model-store';
+import { COURSE_EXIT_MODES, getCourseExitMode } from '../../../courseware/course/course-exit/utils';
+import { DashboardLink, IdVerificationSupportLink, ProfileLink } from '../../../shared/links';
+import { requestCert } from '../../data/thunks';
+import messages from './messages';
+
+function CertificateStatus({ intl }) {
+  const {
+    courseId,
+  } = useSelector(state => state.courseHome);
+
+  const {
+    isEnrolled,
+  } = useModel('courseHomeMeta', courseId);
+
+  const {
+    certificateData,
+    hasScheduledContent,
+    userHasPassingGrade,
+  } = useModel('progress', courseId);
+
+  const mode = getCourseExitMode(
+    certificateData,
+    hasScheduledContent,
+    isEnrolled,
+    userHasPassingGrade,
+  );
+  const dispatch = useDispatch();
+
+  const {
+    end,
+    verificationData,
+    certificateData: {
+      certStatus,
+      certWebViewUrl,
+      downloadUrl,
+    },
+    verifiedMode,
+  } = useModel('progress', courseId);
+
+  let certCase;
+  let body;
+  let buttonAction;
+  let buttonLocation;
+  let buttonText;
+  let endDate;
+
+  const dashboardLink = <DashboardLink />;
+  const idVerificationSupportLink = <IdVerificationSupportLink />;
+  const profileLink = <ProfileLink />;
+
+  if (mode === COURSE_EXIT_MODES.nonPassing) {
+    certCase = 'notPassing';
+    body = intl.formatMessage(messages[`${certCase}Body`]);
+  } else if (mode === COURSE_EXIT_MODES.inProgress) {
+    certCase = 'inProgress';
+    body = intl.formatMessage(messages[`${certCase}Body`]);
+  } else if (mode === COURSE_EXIT_MODES.celebration) {
+    switch (certStatus) {
+      case 'requesting':
+        // Requestable
+        certCase = 'requestable';
+        buttonAction = () => { dispatch(requestCert(courseId)); };
+        body = intl.formatMessage(messages[`${certCase}Body`]);
+        buttonText = intl.formatMessage(messages[`${certCase}Button`]);
+        break;
+
+      case 'unverified':
+        certCase = 'unverified';
+        if (verificationData.status === 'pending') {
+          body = (<p>{intl.formatMessage(messages.unverifiedPendingBody)}</p>);
+        } else {
+          body = (
+            <FormattedMessage
+              id="progress.certificateStatus.unverifiedBody"
+              defaultMessage="In order to generate a certificate, you must complete ID verification. {idVerificationSupportLink}."
+              values={{ idVerificationSupportLink }}
+            />
+          );
+          buttonLocation = verificationData.link;
+          buttonText = intl.formatMessage(messages[`${certCase}Button`]);
+        }
+        break;
+
+      case 'downloadable':
+        // Certificate available, download/viewable
+        certCase = 'downloadable';
+        body = (
+          <FormattedMessage
+            id="progress.certificateStatus.downloadableBody"
+            defaultMessage="
+              Showcase your accomplishment on LinkedIn or your resume today.
+              You can download your certificate now and access it any time from your
+              {dashboardLink} and {profileLink}."
+            values={{ dashboardLink, profileLink }}
+          />
+        );
+
+        if (certWebViewUrl) {
+          buttonLocation = `${getConfig().LMS_BASE_URL}${certWebViewUrl}`;
+          buttonText = intl.formatMessage(messages.viewableButton);
+        } else if (downloadUrl) {
+          buttonLocation = downloadUrl;
+          buttonText = intl.formatMessage(messages.downloadableButton);
+        }
+        break;
+
+      case 'earned_but_not_available':
+        certCase = 'notAvailable';
+        endDate = <FormattedDate value={end} day="numeric" month="long" year="numeric" />;
+        body = (
+          <FormattedMessage
+            id="courseCelebration.certificateBody.notAvailable.endDate"
+            defaultMessage="Your certificate will be available soon! After this course officially ends on {endDate}, you will receive an
+              email notification with your certificate."
+            values={{ endDate }}
+          />
+        );
+        break;
+
+      case 'audit_passing':
+      case 'honor_passing':
+        if (verifiedMode) {
+          certCase = 'upgrade';
+          body = intl.formatMessage(messages[`${certCase}Body`]);
+          buttonLocation = verifiedMode.upgradeUrl;
+          buttonText = intl.formatMessage(messages[`${certCase}Button`]);
+        }
+        break;
+
+      // This code shouldn't be hit but coding defensively since switch expects a default statement
+      default:
+        certCase = null;
+        break;
+    }
+  }
+
+  if (!certCase) {
+    return null;
+  }
+
+  const header = intl.formatMessage(messages[`${certCase}Header`]);
+
+  return (
+    <section data-testid="certificate-status-component" className="text-dark-700 mb-4">
+      <Card className="bg-light-200 shadow-sm border-0">
+        <Card.Body>
+          <Card.Title>
+            <h3>{header}</h3>
+          </Card.Title>
+          <Card.Text className="small text-gray-700">
+            {body}
+          </Card.Text>
+          {buttonText && (buttonLocation || buttonAction) && (
+            <Button variant="outline-brand" onClick={buttonAction} href={buttonLocation} block>{buttonText}</Button>
+          )}
+        </Card.Body>
+      </Card>
+    </section>
+  );
+}
+
+CertificateStatus.propTypes = {
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(CertificateStatus);
--- a/src/course-home/progress-tab/certificate-status/messages.js
+++ b/src/course-home/progress-tab/certificate-status/messages.js
@@ -0,0 +1,82 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  notPassingHeader: {
+    id: 'progress.certificateStatus.notPassingHeader',
+    defaultMessage: 'Certificate status',
+  },
+  notPassingBody: {
+    id: 'progress.certificateStatus.notPassingBody',
+    defaultMessage: 'In order to qualify for a certificate, you must have a passing grade.',
+  },
+  inProgressHeader: {
+    id: 'progress.certificateStatus.inProgressHeader',
+    defaultMessage: 'More content is coming soon!',
+  },
+  inProgressBody: {
+    id: 'progress.certificateStatus.inProgressBody',
+    defaultMessage: 'It looks like there is more content in this course that will be released in the future. Look out for email updates or check back on your course for when this content will be available.',
+  },
+  requestableHeader: {
+    id: 'progress.certificateStatus.requestableHeader',
+    defaultMessage: 'Certificate status',
+  },
+  requestableBody: {
+    id: 'progress.certificateStatus.requestableBody',
+    defaultMessage: 'Congratulations, you qualified for a certificate! In order to access your certificate, request it below.',
+  },
+  requestableButton: {
+    id: 'progress.certificateStatus.requestableButton',
+    defaultMessage: 'Request certificate',
+  },
+  unverifiedHeader: {
+    id: 'progress.certificateStatus.unverifiedHeader',
+    defaultMessage: 'Certificate status',
+  },
+  unverifiedButton: {
+    id: 'progress.certificateStatus.unverifiedButton',
+    defaultMessage: 'Verify ID',
+  },
+  unverifiedPendingBody: {
+    id: 'progress.certificateStatus.courseCelebration.verificationPending',
+    defaultMessage: 'Your ID verification is pending and your certificate will be available once approved.',
+  },
+  downloadableHeader: {
+    id: 'progress.certificateStatus.downloadableHeader',
+    defaultMessage: 'Your certificate is available!',
+  },
+  downloadableBody: {
+    id: 'progress.certificateStatus.downloadableBody',
+    defaultMessage: 'Showcase your accomplishment on LinkedIn or your resume today. You can download your certificate now and access it any time from your Dashboard and Profile.',
+  },
+  downloadableButton: {
+    id: 'progress.certificateStatus.downloadableButton',
+    defaultMessage: 'Download my certificate',
+  },
+  viewableButton: {
+    id: 'progress.certificateStatus.viewableButton',
+    defaultMessage: 'View my certificate',
+  },
+  notAvailableHeader: {
+    id: 'progress.certificateStatus.notAvailableHeader',
+    defaultMessage: 'Certificate status',
+  },
+  notAvailableBody: {
+    id: 'progress.certificateStatus.notAvailableBody',
+    defaultMessage: 'Your certificate will be available soon! After this course officially ends on {end_date}, you will receive an email notification with your certificate.',
+  },
+  upgradeHeader: {
+    id: 'progress.certificateStatus.upgradeHeader',
+    defaultMessage: 'Earn a certificate',
+  },
+  upgradeBody: {
+    id: 'progress.certificateStatus.upgradeBody',
+    defaultMessage: 'You are in an audit track and do not qualify for a certificate. In order to work towards a certificate, upgrade your course today.',
+  },
+  upgradeButton: {
+    id: 'progress.certificateStatus.upgradeButton',
+    defaultMessage: 'Upgrade now',
+  },
+});
+
+export default messages;
--- a/src/course-home/progress-tab/course-completion/CompleteDonutSegment.jsx
+++ b/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);
--- a/src/course-home/progress-tab/course-completion/CompletionDonutChart.jsx
+++ b/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);
--- a/src/course-home/progress-tab/course-completion/CompletionDonutChart.scss
+++ b/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;
+  }
+}
--- a/src/course-home/progress-tab/course-completion/CourseCompletion.jsx
+++ b/src/course-home/progress-tab/course-completion/CourseCompletion.jsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+
+import CompletionDonutChart from './CompletionDonutChart';
+import messages from './messages';
+
+function CourseCompletion({ intl }) {
+  return (
+    <section className="text-dark-700 mb-4 rounded shadow-sm p-4">
+      <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>
+  );
+}
+
+CourseCompletion.propTypes = {
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(CourseCompletion);
--- a/src/course-home/progress-tab/course-completion/IncompleteDonutSegment.jsx
+++ b/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);
--- a/src/course-home/progress-tab/course-completion/LockedDonutSegment.jsx
+++ b/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);
--- a/src/course-home/progress-tab/course-completion/messages.js
+++ b/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;
--- a/src/course-home/progress-tab/grades/course-grade/CourseGrade.jsx
+++ b/src/course-home/progress-tab/grades/course-grade/CourseGrade.jsx
@@ -0,0 +1,62 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+
+import { useModel } from '../../../../generic/model-store';
+
+import CourseGradeFooter from './CourseGradeFooter';
+import CourseGradeHeader from './CourseGradeHeader';
+import GradeBar from './GradeBar';
+
+import messages from '../messages';
+
+function CourseGrade({ intl }) {
+  const {
+    courseId,
+  } = useSelector(state => state.courseHome);
+
+  const {
+    completionSummary: {
+      lockedCount,
+    },
+    gradingPolicy: {
+      gradeRange,
+    },
+  } = useModel('progress', courseId);
+
+  let passingGrade;
+  if (gradeRange.pass) {
+    passingGrade = gradeRange.pass * 100;
+  } else {
+    passingGrade = Object.entries(gradeRange).pop()[1] * 100;
+  }
+
+  passingGrade = Number(passingGrade.toFixed(0));
+
+  const isLocked = lockedCount > 0;
+  const applyLockedOverlay = isLocked ? 'locked-overlay' : '';
+
+  return (
+    <section className="text-dark-700 my-4 rounded shadow-sm">
+      {isLocked && <CourseGradeHeader />}
+      <div className={applyLockedOverlay}>
+        <div className="row w-100 m-0 p-4">
+          <div className="col-12 col-sm-6 p-0 pr-sm-2">
+            <h2>{intl.formatMessage(messages.grades)}</h2>
+            <p className="small">
+              {intl.formatMessage(messages.courseGradeBody)}
+            </p>
+          </div>
+          <GradeBar passingGrade={passingGrade} />
+        </div>
+        <CourseGradeFooter passingGrade={passingGrade} />
+      </div>
+    </section>
+  );
+}
+
+CourseGrade.propTypes = {
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(CourseGrade);
--- a/src/course-home/progress-tab/grades/course-grade/CourseGradeFooter.jsx
+++ b/src/course-home/progress-tab/grades/course-grade/CourseGradeFooter.jsx
@@ -0,0 +1,99 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import PropTypes from 'prop-types';
+
+import { layoutGenerator } from 'react-break';
+
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { CheckCircle, WarningFilled } from '@edx/paragon/icons';
+import { Icon } from '@edx/paragon';
+import { useModel } from '../../../../generic/model-store';
+
+import GradeRangeTooltip from './GradeRangeTooltip';
+import messages from '../messages';
+
+function CourseGradeFooter({ intl, passingGrade }) {
+  const {
+    courseId,
+  } = useSelector(state => state.courseHome);
+
+  const {
+    courseGrade: {
+      isPassing,
+      letterGrade,
+    },
+    gradingPolicy: {
+      gradeRange,
+    },
+  } = useModel('progress', courseId);
+
+  const layout = layoutGenerator({
+    mobile: 0,
+    tablet: 768,
+  });
+
+  const OnMobile = layout.is('mobile');
+  const OnAtLeastTablet = layout.isAtLeast('tablet');
+
+  const hasLetterGrades = Object.keys(gradeRange).length > 1; // A pass/fail course will only have one key
+  let footerText = intl.formatMessage(messages.courseGradeFooterNonPassing, { passingGrade });
+
+  if (isPassing) {
+    if (hasLetterGrades) {
+      const letterGrades = Object.keys(gradeRange);
+      const gradeIndex = letterGrades.indexOf(letterGrade);
+      const minGrade = gradeRange[letterGrade] * 100;
+      const maxGrade = gradeIndex > 0 ? gradeRange[letterGrades[gradeIndex - 1]] * 100 : 100;
+
+      footerText = intl.formatMessage(messages.courseGradeFooterPassingWithGrade, {
+        letterGrade,
+        minGrade: minGrade.toFixed(0),
+        maxGrade: maxGrade.toFixed(0),
+      });
+    } else {
+      footerText = intl.formatMessage(messages.courseGradeFooterGenericPassing);
+    }
+  }
+
+  const icon = isPassing ? <Icon src={CheckCircle} className="text-success-300 d-inline-flex align-bottom" />
+    : <Icon src={WarningFilled} className="d-inline-flex align-bottom" />;
+
+  return (
+    <div className={`row w-100 m-0 px-4 py-3 py-md-4 rounded-bottom ${isPassing ? 'bg-success-100' : 'bg-warning-100'}`}>
+      <div className="col-auto p-0">
+        {icon}
+      </div>
+      <div className="col-11 pl-2 px-0">
+        <OnMobile>
+          <span className="h5 align-bottom">
+            {footerText}
+            {hasLetterGrades && (
+              <span style={{ whiteSpace: 'nowrap' }}>
+                &nbsp;
+                <GradeRangeTooltip iconButtonClassName="h4" passingGrade={passingGrade} />
+              </span>
+            )}
+          </span>
+        </OnMobile>
+        <OnAtLeastTablet>
+          <span className="h4 m-0 align-bottom">
+            {footerText}
+            {hasLetterGrades && (
+              <span style={{ whiteSpace: 'nowrap' }}>
+                &nbsp;
+                <GradeRangeTooltip iconButtonClassName="h3" passingGrade={passingGrade} />
+              </span>
+            )}
+          </span>
+        </OnAtLeastTablet>
+      </div>
+    </div>
+  );
+}
+
+CourseGradeFooter.propTypes = {
+  intl: intlShape.isRequired,
+  passingGrade: PropTypes.number.isRequired,
+};
+
+export default injectIntl(CourseGradeFooter);
--- a/src/course-home/progress-tab/grades/course-grade/CourseGradeHeader.jsx
+++ b/src/course-home/progress-tab/grades/course-grade/CourseGradeHeader.jsx
@@ -0,0 +1,53 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { Locked } from '@edx/paragon/icons';
+import { Button, Icon } from '@edx/paragon';
+
+import { useModel } from '../../../../generic/model-store';
+import messages from '../messages';
+
+function CourseGradeHeader({ intl }) {
+  const {
+    courseId,
+  } = useSelector(state => state.courseHome);
+  const {
+    verifiedMode,
+  } = useModel('progress', courseId);
+  return (
+    <div className="row w-100 m-0 p-4 rounded-top bg-primary-500 text-white">
+      <div className="col-12 col-md-9 p-0">
+        <div className="row w-100 m-0 p-0">
+          <div className="col-1 p-0">
+            <Icon src={Locked} />
+          </div>
+          <div className="col-11 px-2 p-sm-0 h4 text-white">
+            <span aria-hidden="true">
+              {intl.formatMessage(messages.courseGradePreviewHeaderAriaHidden)}
+            </span>
+            {intl.formatMessage(messages.courseGradePreviewHeader)}
+          </div>
+        </div>
+        <div className="row w-100 m-0 p-0 justify-content-end">
+          <div className="col-11 px-2 p-sm-0 small">
+            {intl.formatMessage(messages.courseGradePreviewBody)}
+          </div>
+        </div>
+      </div>
+      <div className="col-12 col-md-3 mt-3 mt-md-0 p-0 align-self-center text-right">
+        {verifiedMode && (
+          <Button variant="brand" size="sm" href={verifiedMode.upgradeUrl}>
+            {intl.formatMessage(messages.courseGradePreviewUpgradeButton)}
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+}
+
+CourseGradeHeader.propTypes = {
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(CourseGradeHeader);
--- a/src/course-home/progress-tab/grades/course-grade/CurrentGradeTooltip.jsx
+++ b/src/course-home/progress-tab/grades/course-grade/CurrentGradeTooltip.jsx
@@ -0,0 +1,66 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useSelector } from 'react-redux';
+
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { OverlayTrigger, Popover } from '@edx/paragon';
+
+import { useModel } from '../../../../generic/model-store';
+
+import messages from '../messages';
+
+function CurrentGradeTooltip({ intl, tooltipClassName }) {
+  const {
+    courseId,
+  } = useSelector(state => state.courseHome);
+
+  const {
+    courseGrade: {
+      isPassing,
+      percent,
+    },
+  } = useModel('progress', courseId);
+
+  const currentGrade = percent * 100;
+
+  return (
+    <>
+      <OverlayTrigger
+        show
+        placement="top"
+        overlay={(
+          <Popover id={`${isPassing ? 'passing' : 'non-passing'}-grade-tooltip`} aria-hidden="true" className={tooltipClassName}>
+            <Popover.Content className={isPassing ? 'text-white' : 'text-dark-700'}>
+              {currentGrade.toFixed(0)}%
+            </Popover.Content>
+          </Popover>
+        )}
+      >
+        <g>
+          <circle cx={`${currentGrade}%`} cy="50%" r="8.5" fill="transparent" />
+          <rect className="grade-bar__divider" x={`${currentGrade}%`} style={{ transform: 'translateY(2.61em)' }} />
+        </g>
+      </OverlayTrigger>
+      <text
+        className="x-small"
+        textAnchor={currentGrade < 50 ? 'start' : 'end'}
+        x={`${currentGrade}%`}
+        y="20px"
+        style={{ transform: `translateX(${currentGrade < 50 ? '' : '-'}3.4em)` }}
+      >
+        {intl.formatMessage(messages.currentGradeLabel)}
+      </text>
+    </>
+  );
+}
+
+CurrentGradeTooltip.defaultProps = {
+  tooltipClassName: '',
+};
+
+CurrentGradeTooltip.propTypes = {
+  intl: intlShape.isRequired,
+  tooltipClassName: PropTypes.string,
+};
+
+export default injectIntl(CurrentGradeTooltip);
--- a/src/course-home/progress-tab/grades/course-grade/GradeBar.jsx
+++ b/src/course-home/progress-tab/grades/course-grade/GradeBar.jsx
@@ -0,0 +1,58 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import PropTypes from 'prop-types';
+
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useModel } from '../../../../generic/model-store';
+import CurrentGradeTooltip from './CurrentGradeTooltip';
+import PassingGradeTooltip from './PassingGradeTooltip';
+
+import messages from '../messages';
+
+function GradeBar({ intl, passingGrade }) {
+  const {
+    courseId,
+  } = useSelector(state => state.courseHome);
+
+  const {
+    completionSummary: {
+      lockedCount,
+    },
+    courseGrade: {
+      isPassing,
+      percent,
+    },
+  } = useModel('progress', courseId);
+
+  const currentGrade = percent * 100;
+
+  const isLocked = lockedCount > 0;
+  const lockedTooltipClassName = isLocked ? 'locked-overlay' : '';
+
+  return (
+    <div className="col-12 col-sm-6 align-self-center">
+      <div className="sr-only">{intl.formatMessage(messages.courseGradeBarAltText, { currentGrade, passingGrade })}</div>
+      <svg width="100%" height="100px" className="grade-bar" aria-hidden="true">
+        <g style={{ transform: 'translateY(2.61em)' }}>
+          <rect className="grade-bar__base" width="100%" />
+          <rect className="grade-bar--passing" width={`${passingGrade}%`} />
+          <rect className={`grade-bar--current-${isPassing ? 'passing' : 'non-passing'}`} width={`${currentGrade}%`} />
+
+          {/* Start divider */}
+          <rect className="grade-bar__divider" />
+          {/* End divider */}
+          <rect className="grade-bar__divider" x="99.7%" />
+        </g>
+        <PassingGradeTooltip passingGrade={passingGrade} tooltipClassName={lockedTooltipClassName} />
+        <CurrentGradeTooltip tooltipClassName={lockedTooltipClassName} />
+      </svg>
+    </div>
+  );
+}
+
+GradeBar.propTypes = {
+  intl: intlShape.isRequired,
+  passingGrade: PropTypes.number.isRequired,
+};
+
+export default injectIntl(GradeBar);
--- a/src/course-home/progress-tab/grades/course-grade/GradeBar.scss
+++ b/src/course-home/progress-tab/grades/course-grade/GradeBar.scss
@@ -0,0 +1,52 @@
+.grade-bar {
+  rect {
+    height: 6px;
+  }
+
+  .grade-bar__base {
+    fill: $light-300;
+  }
+
+  .grade-bar__divider {
+    fill: $primary-500;
+    width: 1px;
+  }
+
+  .grade-bar--passing {
+    fill: $primary-500;
+  }
+
+  .grade-bar--current-passing {
+    fill: $success-500;
+  }
+
+  .grade-bar--current-non-passing {
+    fill: $accent-b;
+  }
+}
+
+.arrow {
+  margin: 0 !important;
+}
+
+#minimum-grade-tooltip {
+  .arrow::after {
+    border-bottom-color: $primary-500;
+  }
+}
+
+#passing-grade-tooltip {
+  .arrow::after {
+    border-top-color: $success-500;
+  }
+
+  background: $success-500;
+}
+
+#non-passing-grade-tooltip {
+  .arrow::after {
+    border-top-color: $accent-b;
+  }
+
+  background: $accent-b;
+}
--- a/src/course-home/progress-tab/grades/course-grade/GradeRangeTooltip.jsx
+++ b/src/course-home/progress-tab/grades/course-grade/GradeRangeTooltip.jsx
@@ -0,0 +1,83 @@
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import PropTypes from 'prop-types';
+
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { InfoOutline } from '@edx/paragon/icons';
+import {
+  Icon, IconButton, OverlayTrigger, Popover,
+} from '@edx/paragon';
+import { useModel } from '../../../../generic/model-store';
+
+import messages from '../messages';
+
+function GradeRangeTooltip({ intl, iconButtonClassName, passingGrade }) {
+  const {
+    courseId,
+  } = useSelector(state => state.courseHome);
+
+  const {
+    gradingPolicy: {
+      gradeRange,
+    },
+  } = useModel('progress', courseId);
+
+  const [showTooltip, setShowTooltip] = useState(false);
+
+  const gradeRangeEntries = Object.entries(gradeRange);
+
+  return (
+    <OverlayTrigger
+      placement="top"
+      trigger="click"
+      show={showTooltip}
+      overlay={(
+        <Popover>
+          <Popover.Content className="px-3">
+            {intl.formatMessage(messages.courseGradeRangeTooltip)}
+            <ul className="list-unstyled m-0">
+              {gradeRangeEntries.map((entry, index) => {
+                if (index === 0) {
+                  return (
+                    <li key={entry[0]}>
+                      {entry[0]}: {(entry[1] * 100).toFixed(0)}%-100%
+                    </li>
+                  );
+                }
+                const previousGrade = gradeRangeEntries[index - 1];
+                return (
+                  <li key={entry[0]}>
+                    {entry[0]}: {(entry[1] * 100).toFixed(0)}%-{(previousGrade[1] * 100).toFixed(0)}%
+                  </li>
+                );
+              })}
+              <li>F: {'<'}{passingGrade}%</li>
+            </ul>
+          </Popover.Content>
+        </Popover>
+      )}
+    >
+      <IconButton
+        onClick={() => setShowTooltip(!showTooltip)}
+        onBlur={() => setShowTooltip(false)}
+        alt={intl.formatMessage(messages.gradeRangeTooltipAlt)}
+        className={`mb-0 mt-n1 ${iconButtonClassName}`}
+        src={InfoOutline}
+        iconAs={Icon}
+        size="inline"
+      />
+    </OverlayTrigger>
+  );
+}
+
+GradeRangeTooltip.defaultProps = {
+  iconButtonClassName: '',
+};
+
+GradeRangeTooltip.propTypes = {
+  iconButtonClassName: PropTypes.string,
+  intl: intlShape.isRequired,
+  passingGrade: PropTypes.number.isRequired,
+};
+
+export default injectIntl(GradeRangeTooltip);
--- a/src/course-home/progress-tab/grades/course-grade/PassingGradeTooltip.jsx
+++ b/src/course-home/progress-tab/grades/course-grade/PassingGradeTooltip.jsx
@@ -0,0 +1,52 @@
+import React 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 PassingGradeTooltip({ intl, passingGrade, tooltipClassName }) {
+  return (
+    <>
+      <OverlayTrigger
+        show
+        placement="bottom"
+        overlay={(
+          <Popover id="minimum-grade-tooltip" className={`bg-primary-500 ${tooltipClassName}`} aria-hidden="true">
+            <Popover.Content className="text-white">
+              {passingGrade}%
+            </Popover.Content>
+          </Popover>
+        )}
+      >
+        <g>
+          <circle cx={`${passingGrade}%`} cy="50%" r="8.5" fill="transparent" />
+          <circle className="grade-bar--passing" cx={`${passingGrade}%`} cy="50%" r="4.5" />
+        </g>
+      </OverlayTrigger>
+
+      <text
+        className="x-small"
+        textAnchor={passingGrade < 50 ? 'start' : 'end'}
+        x={`${passingGrade}%`}
+        y="90px"
+        style={{ transform: `translateX(${passingGrade < 50 ? '' : '-'}3.4em)` }}
+      >
+        {intl.formatMessage(messages.passingGradeLabel)}
+      </text>
+    </>
+  );
+}
+
+PassingGradeTooltip.defaultProps = {
+  tooltipClassName: '',
+};
+
+PassingGradeTooltip.propTypes = {
+  intl: intlShape.isRequired,
+  passingGrade: PropTypes.number.isRequired,
+  tooltipClassName: PropTypes.string,
+};
+
+export default injectIntl(PassingGradeTooltip);
--- a/src/course-home/progress-tab/grades/detailed-grades/DetailedGrades.jsx
+++ b/src/course-home/progress-tab/grades/detailed-grades/DetailedGrades.jsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { Link } from 'react-router-dom';
+
+import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useModel } from '../../../../generic/model-store';
+
+import DetailedGradesTable from './DetailedGradesTable';
+
+import messages from '../messages';
+
+function DetailedGrades({ intl }) {
+  const {
+    courseId,
+  } = useSelector(state => state.courseHome);
+
+  const {
+    sectionScores,
+  } = useModel('progress', courseId);
+
+  const hasSectionScores = sectionScores.length > 0;
+
+  const outlineLink = (
+    <Link
+      className="text-dark-700"
+      style={{ textDecoration: 'underline' }}
+      to={`/course/${courseId}/home`}
+    >
+      {intl.formatMessage(messages.courseOutline)}
+    </Link>
+  );
+
+  return (
+    <section className="text-dark-700">
+      <h3 className="h4 mb-3">{intl.formatMessage(messages.detailedGrades)}</h3>
+      {hasSectionScores && (
+        <DetailedGradesTable sectionScores={sectionScores} />
+      )}
+      {!hasSectionScores && (
+        <p className="small">{intl.formatMessage(messages.detailedGradesEmpty)}</p>
+      )}
+      <p className="x-small m-0">
+        <FormattedMessage
+          id="progress.ungradedAlert"
+          defaultMessage="For progress on ungraded aspects of the course, view your {outlineLink}."
+          values={{ outlineLink }}
+        />
+      </p>
+    </section>
+  );
+}
+
+DetailedGrades.propTypes = {
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(DetailedGrades);
--- a/src/course-home/progress-tab/grades/detailed-grades/DetailedGradesTable.jsx
+++ b/src/course-home/progress-tab/grades/detailed-grades/DetailedGradesTable.jsx
@@ -0,0 +1,78 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { DataTable } from '@edx/paragon';
+
+import messages from '../messages';
+
+function DetailedGradesTable({ intl, sectionScores }) {
+  return (
+    sectionScores.map((chapter) => {
+      const subsectionScores = chapter.subsections.filter(
+        (subsection) => !!(
+          subsection.hasGradedAssignment
+          && subsection.showGrades
+          && (subsection.numPointsPossible > 0 || subsection.numPointsEarned > 0)),
+      );
+
+      if (subsectionScores.length === 0) {
+        return null;
+      }
+
+      const detailedGradesData = subsectionScores.map((subsection) => {
+        const title = <a href={subsection.url} className="text-dark-700 small">{subsection.displayName}</a>;
+        return {
+          subsectionTitle: title,
+          score: `${subsection.numPointsEarned}/${subsection.numPointsPossible}`,
+        };
+      });
+
+      return (
+        <div className="my-3" key={`${chapter.displayName}-grades-table`}>
+          <DataTable
+            data={detailedGradesData}
+            itemCount={detailedGradesData.length}
+            columns={[
+              {
+                Header: chapter.displayName,
+                accessor: 'subsectionTitle',
+                headerClassName: 'h5 mb-0',
+                cellClassName: 'mw-100',
+              },
+              {
+                Header: `${intl.formatMessage(messages.score)}`,
+                accessor: 'score',
+                headerClassName: 'justify-content-end h5 mb-0',
+                cellClassName: 'float-right text-right small',
+              },
+            ]}
+          >
+            <DataTable.Table />
+          </DataTable>
+        </div>
+      );
+    })
+  );
+}
+
+DetailedGradesTable.propTypes = {
+  intl: intlShape.isRequired,
+  sectionScores: PropTypes.arrayOf(PropTypes.shape({
+    displayName: PropTypes.string.isRequired,
+    subsections: PropTypes.arrayOf(PropTypes.shape({
+      displayName: PropTypes.string.isRequired,
+      numPointsEarned: PropTypes.number.isRequired,
+      numPointsPossible: PropTypes.number.isRequired,
+      url: PropTypes.string.isRequired,
+    })),
+  })).isRequired,
+};
+
+DetailedGradesTable.defaultProps = {
+  sectionScores: {
+    subsections: [],
+  },
+};
+
+export default injectIntl(DetailedGradesTable);
--- a/src/course-home/progress-tab/grades/grade-summary/AssignmentTypeCell.jsx
+++ b/src/course-home/progress-tab/grades/grade-summary/AssignmentTypeCell.jsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+function AssignmentTypeCell({ assignmentType, footnoteMarker, footnoteId }) {
+  return (
+    <div className="small">
+      {assignmentType}
+      {footnoteId && footnoteMarker && (
+        <sup>
+          <a id={`${footnoteId}-ref`} className="text-dark-700" href={`#${footnoteId}-footnote`} aria-describedby="grade-summary-footnote-label">
+            {footnoteMarker}
+          </a>
+        </sup>
+      )}
+    </div>
+  );
+}
+
+AssignmentTypeCell.propTypes = {
+  assignmentType: PropTypes.string.isRequired,
+  footnoteId: PropTypes.string,
+  footnoteMarker: PropTypes.number,
+};
+
+AssignmentTypeCell.defaultProps = {
+  footnoteId: '',
+  footnoteMarker: '',
+};
+
+export default AssignmentTypeCell;
--- a/src/course-home/progress-tab/grades/grade-summary/DroppableAssignmentFootnote.jsx
+++ b/src/course-home/progress-tab/grades/grade-summary/DroppableAssignmentFootnote.jsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+
+import messages from '../messages';
+
+function DroppableAssignmentFootnote({ footnotes, intl }) {
+  return (
+    <>
+      <span id="grade-summary-footnote-label" className="sr-only">{intl.formatMessage(messages.footnotesTitle)}</span>
+      <ul className="list-unstyled mt-2">
+        {footnotes.map((footnote, index) => (
+          <li id={`${footnote.id}-footnote`} key={footnote.id} className="x-small mt-1">
+            <sup>{index + 1}</sup>
+            <FormattedMessage
+              id="progress.footnotes.droppableAssignments"
+              defaultMessage="The lowest {numDroppable, plural, one{# {assignmentType} score} other{# {assignmentType} scores}} will be dropped."
+              values={{
+                numDroppable: footnote.numDroppable,
+                assignmentType: footnote.assignmentType,
+              }}
+            />
+            <a className="sr-only" href={`#${footnote.id}-ref`}>{intl.formatMessage(messages.backToContent)}</a>
+          </li>
+        ))}
+      </ul>
+    </>
+  );
+}
+
+DroppableAssignmentFootnote.propTypes = {
+  footnotes: PropTypes.arrayOf(PropTypes.shape({
+    assignmentType: PropTypes.string.isRequired,
+    id: PropTypes.string.isRequired,
+    numDroppable: PropTypes.number.isRequired,
+  })).isRequired,
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(DroppableAssignmentFootnote);
--- a/src/course-home/progress-tab/grades/grade-summary/GradeSummary.jsx
+++ b/src/course-home/progress-tab/grades/grade-summary/GradeSummary.jsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { useModel } from '../../../../generic/model-store';
+
+import GradeSummaryHeader from './GradeSummaryHeader';
+import GradeSummaryTable from './GradeSummaryTable';
+
+function GradeSummary() {
+  const {
+    courseId,
+  } = useSelector(state => state.courseHome);
+
+  const {
+    sectionScores,
+    gradingPolicy: {
+      assignmentPolicies,
+    },
+  } = useModel('progress', courseId);
+
+  if (assignmentPolicies.length === 0) {
+    return null;
+  }
+
+  // accumulate grades for individual assignment types
+  const gradeByAssignmentType = {};
+  assignmentPolicies.forEach(assignment => {
+    gradeByAssignmentType[assignment.type] = { numPointsEarned: 0, numPointsPossible: 0 };
+  });
+
+  sectionScores.forEach((chapter) => {
+    chapter.subsections.forEach((subsection) => {
+      if (subsection.hasGradedAssignment) {
+        gradeByAssignmentType[subsection.assignmentType].numPointsEarned += subsection.numPointsEarned;
+        gradeByAssignmentType[subsection.assignmentType].numPointsPossible += subsection.numPointsPossible;
+      }
+    });
+  });
+
+  return (
+    <section className="text-dark-700 mb-4">
+      <GradeSummaryHeader />
+      <GradeSummaryTable
+        gradeByAssignmentType={gradeByAssignmentType}
+      />
+    </section>
+  );
+}
+
+export default GradeSummary;
--- a/src/course-home/progress-tab/grades/grade-summary/GradeSummaryHeader.jsx
+++ b/src/course-home/progress-tab/grades/grade-summary/GradeSummaryHeader.jsx
@@ -0,0 +1,46 @@
+import React, { useState } from 'react';
+
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import {
+  Icon, IconButton, OverlayTrigger, Popover,
+} from '@edx/paragon';
+import { InfoOutline } from '@edx/paragon/icons';
+
+import messages from '../messages';
+
+function GradeSummaryHeader({ intl }) {
+  const [showTooltip, setShowTooltip] = useState(false);
+  return (
+    <div className="row w-100 m-0 align-items-center">
+      <h3 className="h4 mb-3 mr-1">{intl.formatMessage(messages.gradeSummary)}</h3>
+      <OverlayTrigger
+        trigger="click"
+        placement="top"
+        show={showTooltip}
+        overlay={(
+          <Popover>
+            <Popover.Content className="small text-dark-700">
+              {intl.formatMessage(messages.gradeSummaryTooltipBody)}
+            </Popover.Content>
+          </Popover>
+        )}
+      >
+        <IconButton
+          onClick={() => { setShowTooltip(!showTooltip); }}
+          onBlur={() => { setShowTooltip(false); }}
+          alt={intl.formatMessage(messages.gradeSummaryTooltipAlt)}
+          src={InfoOutline}
+          iconAs={Icon}
+          className="mb-3"
+          size="sm"
+        />
+      </OverlayTrigger>
+    </div>
+  );
+}
+
+GradeSummaryHeader.propTypes = {
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(GradeSummaryHeader);
--- a/src/course-home/progress-tab/grades/grade-summary/GradeSummaryTable.jsx
+++ b/src/course-home/progress-tab/grades/grade-summary/GradeSummaryTable.jsx
@@ -0,0 +1,123 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import PropTypes from 'prop-types';
+
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { DataTable } from '@edx/paragon';
+import { useModel } from '../../../../generic/model-store';
+
+import AssignmentTypeCell from './AssignmentTypeCell';
+import DroppableAssignmentFootnote from './DroppableAssignmentFootnote';
+import GradeSummaryTableFooter from './GradeSummaryTableFooter';
+
+import messages from '../messages';
+
+function GradeSummaryTable({
+  gradeByAssignmentType, intl,
+}) {
+  const {
+    courseId,
+  } = useSelector(state => state.courseHome);
+
+  const {
+    gradingPolicy: {
+      assignmentPolicies,
+    },
+  } = useModel('progress', courseId);
+
+  const footnotes = [];
+
+  const calculateWeightedGrade = (numPointsEarned, numPointsPossible, assignmentWeight) => (
+    numPointsPossible > 0 ? ((numPointsEarned * assignmentWeight * 100) / numPointsPossible).toFixed(0) : 0
+  );
+
+  const getFootnoteId = (assignment) => {
+    const footnoteId = assignment.shortLabel ? assignment.shortLabel : assignment.type;
+    return footnoteId.replace(/[^A-Za-z0-9.-_]+/g, '-');
+  };
+
+  const gradeSummaryData = assignmentPolicies.map((assignment) => {
+    let footnoteId = '';
+    let footnoteMarker = '';
+
+    if (assignment.numDroppable > 0) {
+      footnoteId = getFootnoteId(assignment);
+      footnotes.push({
+        id: footnoteId,
+        numDroppable: assignment.numDroppable,
+        assignmentType: assignment.type,
+      });
+
+      footnoteMarker = footnotes.length;
+    }
+
+    const weightedGrade = calculateWeightedGrade(
+      gradeByAssignmentType[assignment.type].numPointsEarned,
+      gradeByAssignmentType[assignment.type].numPointsPossible,
+      assignment.weight,
+    );
+
+    return {
+      type: { footnoteId, footnoteMarker, type: assignment.type },
+      weight: `${assignment.weight * 100}%`,
+      score: `${gradeByAssignmentType[assignment.type].numPointsEarned}/${gradeByAssignmentType[assignment.type].numPointsPossible}`,
+      weightedGrade: `${weightedGrade}%`,
+    };
+  });
+
+  return (
+    <>
+      <DataTable
+        data={gradeSummaryData}
+        itemCount={gradeSummaryData.length}
+        columns={[
+          {
+            Header: `${intl.formatMessage(messages.assignmentType)}`,
+            accessor: 'type',
+            // eslint-disable-next-line react/prop-types
+            Cell: ({ value }) => (
+              <AssignmentTypeCell
+                assignmentType={value.type} // eslint-disable-line react/prop-types
+                footnoteId={value.footnoteId} // eslint-disable-line react/prop-types
+                footnoteMarker={value.footnoteMarker} // eslint-disable-line react/prop-types
+              />
+            ),
+            headerClassName: 'h5 mb-0',
+          },
+          {
+            Header: `${intl.formatMessage(messages.weight)}`,
+            accessor: 'weight',
+            headerClassName: 'justify-content-end h5 mb-0',
+            cellClassName: 'float-right small',
+          },
+          {
+            Header: `${intl.formatMessage(messages.score)}`,
+            accessor: 'score',
+            headerClassName: 'justify-content-end h5 mb-0',
+            cellClassName: 'float-right small',
+          },
+          {
+            Header: `${intl.formatMessage(messages.weightedGrade)}`,
+            accessor: 'weightedGrade',
+            headerClassName: 'justify-content-end h5 mb-0 text-right',
+            cellClassName: 'float-right font-weight-bold small',
+          },
+        ]}
+      >
+        <DataTable.Table />
+        <GradeSummaryTableFooter />
+      </DataTable>
+
+      {footnotes && (
+        <DroppableAssignmentFootnote footnotes={footnotes} />
+      )}
+    </>
+  );
+}
+
+GradeSummaryTable.propTypes = {
+  gradeByAssignmentType: PropTypes.shape({}).isRequired,
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(GradeSummaryTable);
--- a/src/course-home/progress-tab/grades/grade-summary/GradeSummaryTableFooter.jsx
+++ b/src/course-home/progress-tab/grades/grade-summary/GradeSummaryTableFooter.jsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { DataTable } from '@edx/paragon';
+import { useModel } from '../../../../generic/model-store';
+
+import messages from '../messages';
+
+function GradeSummaryTableFooter({ intl }) {
+  const {
+    courseId,
+  } = useSelector(state => state.courseHome);
+
+  const {
+    courseGrade: {
+      isPassing,
+      percent,
+    },
+  } = useModel('progress', courseId);
+
+  const bgColor = isPassing ? 'bg-success-100' : 'bg-warning-100';
+  const totalGrade = percent * 100;
+
+  return (
+    <DataTable.TableFooter className={`border-top border-primary ${bgColor}`}>
+      <div className="row w-100 m-0">
+        <div id="weighted-grade-summary" className="col-8 p-0 small">{intl.formatMessage(messages.weightedGradeSummary)}</div>
+        <div aria-labelledby="weighted-grade-summary" className="col-4 p-0 text-right font-weight-bold small">{totalGrade}%</div>
+      </div>
+    </DataTable.TableFooter>
+  );
+}
+
+GradeSummaryTableFooter.propTypes = {
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(GradeSummaryTableFooter);
--- a/src/course-home/progress-tab/grades/messages.js
+++ b/src/course-home/progress-tab/grades/messages.js
@@ -0,0 +1,116 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  assignmentType: {
+    id: 'progress.assignmentType',
+    defaultMessage: 'Assignment type',
+  },
+  backToContent: {
+    id: 'progress.footnotes.backToContent',
+    defaultMessage: 'Back to content',
+  },
+  courseGradeBody: {
+    id: 'progress.courseGrade.body',
+    defaultMessage: 'This represents your weighted grade against the grade needed to pass this course.',
+  },
+  courseGradeBarAltText: {
+    id: 'progress.courseGrade.gradeBar.altText',
+    defaultMessage: 'Your current grade is {currentGrade}%. A weighted grade of {passingGrade}% is required to pass in this course.',
+  },
+  courseGradeFooterGenericPassing: {
+    id: 'progress.courseGrade.footer.generic.passing',
+    defaultMessage: 'You’re currently passing this course',
+  },
+  courseGradeFooterNonPassing: {
+    id: 'progress.courseGrade.footer.nonPassing',
+    defaultMessage: 'A weighted grade of {passingGrade}% is required to pass in this course',
+  },
+  courseGradeFooterPassingWithGrade: {
+    id: 'progress.courseGrade.footer.passing',
+    defaultMessage: 'You’re currently passing this course with a grade of {letterGrade} ({minGrade}-{maxGrade}%)',
+  },
+  courseGradePreviewHeader: {
+    id: 'progress.courseGrade.preview.header',
+    defaultMessage: 'locked feature',
+  },
+  courseGradePreviewHeaderAriaHidden: {
+    id: 'progress.courseGrade.preview.header.ariaHidden',
+    defaultMessage: 'Preview of a ',
+  },
+  courseGradePreviewBody: {
+    id: 'progress.courseGrade.preview.body',
+    defaultMessage: 'Unlock to view grades and work towards a certificate',
+  },
+  courseGradePreviewUpgradeButton: {
+    id: 'progress.courseGrade.preview.button.upgrade',
+    defaultMessage: 'Upgrade now',
+  },
+  courseGradeRangeTooltip: {
+    id: 'progress.courseGrade.gradeRange.tooltip',
+    defaultMessage: 'Grade ranges for this course:',
+  },
+  courseOutline: {
+    id: 'progress.courseOutline',
+    defaultMessage: 'Course Outline',
+  },
+  currentGradeLabel: {
+    id: 'progress.courseGrade.label.currentGrade',
+    defaultMessage: 'Your current grade',
+  },
+  detailedGrades: {
+    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',
+  },
+  grades: {
+    id: 'progress.courseGrade.grades',
+    defaultMessage: 'Grades',
+  },
+  gradeRangeTooltipAlt: {
+    id: 'progress.courseGrade.gradeRange.Tooltip',
+    defaultMessage: 'Grade range tooltip',
+  },
+  gradeSummary: {
+    id: 'progress.gradeSummary',
+    defaultMessage: 'Grade summary',
+  },
+  gradeSummaryTooltipAlt: {
+    id: 'progress.gradeSummary.tooltip.alt',
+    defaultMessage: 'Grade summary tooltip',
+  },
+  gradeSummaryTooltipBody: {
+    id: 'progress.gradeSummary.tooltip.body',
+    defaultMessage: "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.",
+  },
+  passingGradeLabel: {
+    id: 'progress.courseGrade.label.passingGrade',
+    defaultMessage: 'Passing grade',
+  },
+  score: {
+    id: 'progress.score',
+    defaultMessage: 'Score',
+  },
+  weight: {
+    id: 'progress.weight',
+    defaultMessage: 'Weight',
+  },
+  weightedGrade: {
+    id: 'progress.weightedGrade',
+    defaultMessage: 'Weighted grade',
+  },
+  weightedGradeSummary: {
+    id: 'progress.weightedGradeSummary',
+    defaultMessage: 'Your current weighted grade summary',
+  },
+});
+
+export default messages;
--- a/src/course-home/progress-tab/messages.js
+++ b/src/course-home/progress-tab/messages.js
@@ -1,123 +1,14 @@
 import { defineMessages } from '@edx/frontend-platform/i18n';

 const messages = defineMessages({
-  problem: {
-    id: 'learning.progress.badge.problem',
-    defaultMessage: 'Problem Scores: ',
-  },
-  practice: {
-    id: 'learning.progress.badge.practice',
-    defaultMessage: 'Practice Scores: ',
-  },
-  problemHiddenUntil: {
-    id: 'learning.progress.badge.problemHiddenUntil',
-    defaultMessage: 'Problem scores are hidden until the due date.',
-  },
-  practiceHiddenUntil: {
-    id: 'learning.progress.badge.practiceHiddenUntil',
-    defaultMessage: 'Practice scores are hidden until the due date.',
-  },
-  problemHidden: {
-    id: 'learning.progress.badge.probHidden',
-    defaultMessage: 'problemlem scores are hidden.',
-  },
-  practiceHidden: {
-    id: 'learning.progress.badge.practiceHidden',
-    defaultMessage: 'Practice scores are hidden.',
-  },
-  noScores: {
-    id: 'learning.progress.badge.noScores',
-    defaultMessage: 'No problem scores in this section.',
-  },
-  pointsEarned: {
-    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.',
+  progressHeader: {
+    id: 'progress.header',
+    defaultMessage: 'Your progress',
  },
  studioLink: {
-    id: 'learning.progress.badge.studioLink',
+    id: 'progress.link.studio',
    defaultMessage: 'View grading in Studio',
  },
-  courseCreditHeader: {
-    id: 'learning.progress.courseCreditHeader',
-    defaultMessage: 'Course Credit Eligibility',
-  },
-  creditNotEligible: {
-    id: 'learning.progress.creditNotEligible',
-    defaultMessage: 'You are not eligible for course credit because you have not met the requirements for credit.',
-  },
-  creditEligible: {
-    id: 'learning.progress.creditEligible',
-    defaultMessage: 'You have met the requirements for credit in this course.',
-  },
-  creditPartialEligible: {
-    id: 'learning.progress.creditPartialEligible',
-    defaultMessage: 'You have not met the minimum requirements for credit.',
-  },
-  start: {
-    id: 'learning.progress.startVerification',
-    defaultMessage: 'Start now',
-  },
-  tryAgain: {
-    id: 'learning.progress.start',
-    defaultMessage: 'Try again',
-  },
-  notStarted: {
-    id: 'learning.progress.notStarted',
-    defaultMessage: 'Not started',
-  },
-  failed: {
-    id: 'learning.progress.failed',
-    defaultMessage: 'Incomplete',
-  },
-  notMet: {
-    id: 'learning.progress.notMet',
-    defaultMessage: 'Not met',
-  },
-  pending: {
-    id: 'learning.progress.pending',
-    defaultMessage: 'Pending',
-  },
-  rejected: {
-    id: 'learning.progress.rejected',
-    defaultMessage: 'Rejected',
-  },
-  completed: {
-    id: 'learning.progress.completed',
-    defaultMessage: 'Completed',
-  },
-  submitted: {
-    id: 'learning.progress.submitted',
-    defaultMessage: 'Submitted',
-  },
-  learnMoreCredit: {
-    id: 'learning.progress.learnMoreCredit',
-    defaultMessage: 'Learn more about course credit',
-  },
-  purchaseCredit: {
-    id: 'learning.progress.purchaseCredit',
-    defaultMessage: 'Purchase course credit',
-  },
 });

 export default messages;
--- a/src/course-home/progress-tab/related-links/RelatedLinks.jsx
+++ b/src/course-home/progress-tab/related-links/RelatedLinks.jsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { Link } from 'react-router-dom';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+
+import messages from './messages';
+
+function RelatedLinks({ intl }) {
+  const {
+    courseId,
+  } = useSelector(state => state.courseHome);
+
+  return (
+    <section className="mb-4 x-small">
+      <h3 className="h4">{intl.formatMessage(messages.relatedLinks)}</h3>
+      <ul className="pl-4">
+        <li>
+          <Link to={`course/${courseId}/dates`}>{intl.formatMessage(messages.datesCardLink)}</Link>
+          <p>{intl.formatMessage(messages.datesCardDescription)}</p>
+        </li>
+        <li>
+          <Link to={`course/${courseId}/home`}>{intl.formatMessage(messages.outlineCardLink)}</Link>
+          <p>{intl.formatMessage(messages.outlineCardDescription)}</p>
+        </li>
+      </ul>
+    </section>
+  );
+}
+
+RelatedLinks.propTypes = {
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(RelatedLinks);
--- a/src/course-home/progress-tab/related-links/messages.js
+++ b/src/course-home/progress-tab/related-links/messages.js
@@ -0,0 +1,26 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  datesCardDescription: {
+    id: 'progress.relatedLinks.datesCard.description',
+    defaultMessage: 'A schedule view of your course due dates and upcoming assignments.',
+  },
+  datesCardLink: {
+    id: 'progress.relatedLinks.datesCard.link',
+    defaultMessage: 'Dates',
+  },
+  outlineCardDescription: {
+    id: 'progress.relatedLinks.outlineCard.description',
+    defaultMessage: 'A birds-eye view of your course content.',
+  },
+  outlineCardLink: {
+    id: 'progress.relatedLinks.outlineCard.link',
+    defaultMessage: 'Course Outline',
+  },
+  relatedLinks: {
+    id: 'progress.relatedLinks',
+    defaultMessage: 'Related links',
+  },
+});
+
+export default messages;
--- a/src/courseware/CoursewareContainer.jsx
+++ b/src/courseware/CoursewareContainer.jsx
@@ -19,14 +19,6 @@ import { TabPage } from '../tab-page';
 import Course from './course';
 import { handleNextSectionCelebration } from './course/celebration';

-const checkExamRedirect = memoize((sequenceStatus, sequence) => {
-  if (sequenceStatus === 'loaded') {
-    if (sequence.isTimeLimited && sequence.lmsWebUrl !== undefined) {
-      global.location.assign(sequence.lmsWebUrl);
-    }
-  }
-});
-
 const checkResumeRedirect = memoize((courseStatus, courseId, sequenceId, firstSequenceId) => {
  if (courseStatus === 'loaded' && !sequenceId) {
    // Note that getResumeBlock is just an API call, not a redux thunk.
@@ -41,8 +33,42 @@ const checkResumeRedirect = memoize((courseStatus, courseId, sequenceId, firstSe
  }
 });

-const checkContentRedirect = memoize((courseId, sequenceStatus, sequenceId, sequence, unitId) => {
-  if (sequenceStatus === 'loaded' && sequenceId && !unitId) {
+const checkSectionUnitToUnitRedirect = memoize((courseStatus, courseId, sequenceStatus, section, unitId) => {
+  if (courseStatus === 'loaded' && sequenceStatus === 'failed' && section && unitId) {
+    history.replace(`/course/${courseId}/${unitId}`);
+  }
+});
+
+const checkSectionToSequenceRedirect = memoize((courseStatus, courseId, sequenceStatus, section, unitId) => {
+  if (courseStatus === 'loaded' && sequenceStatus === 'failed' && section && !unitId) {
+    // If the section is non-empty, redirect to its first sequence.
+    if (section.sequenceIds && section.sequenceIds[0]) {
+      history.replace(`/course/${courseId}/${section.sequenceIds[0]}`);
+    // Otherwise, just go to the course root, letting the resume redirect take care of things.
+    } else {
+      history.replace(`/course/${courseId}`);
+    }
+  }
+});
+
+const checkUnitToSequenceUnitRedirect = memoize((courseStatus, courseId, sequenceStatus, unit) => {
+  if (courseStatus === 'loaded' && sequenceStatus === 'failed' && unit) {
+    // If the sequence failed to load as a sequence, but it *did* load as a unit, then
+    // insert the unit's parent sequenceId into the URL.
+    history.replace(`/course/${courseId}/${unit.sequenceId}/${unit.id}`);
+  }
+});
+
+const checkSpecialExamRedirect = memoize((sequenceStatus, sequence) => {
+  if (sequenceStatus === 'loaded') {
+    if (sequence.isTimeLimited && sequence.legacyWebUrl !== undefined) {
+      global.location.assign(sequence.legacyWebUrl);
+    }
+  }
+});
+
+const checkSequenceToSequenceUnitRedirect = memoize((courseId, sequenceStatus, sequence, unitId) => {
+  if (sequenceStatus === 'loaded' && sequence.id && !unitId) {
    if (sequence.unitIds !== undefined && sequence.unitIds.length > 0) {
      const nextUnitId = sequence.unitIds[sequence.activeUnitIndex];
      // This is a replace because we don't want this change saved in the browser's history.
@@ -97,6 +123,8 @@ class CoursewareContainer extends Component {
      sequenceStatus,
      sequence,
      firstSequenceId,
+      unitViaSequenceId,
+      sectionViaSequenceId,
      match: {
        params: {
          courseId: routeCourseId,
@@ -110,15 +138,52 @@ class CoursewareContainer extends Component {
    this.checkFetchCourse(routeCourseId);
    this.checkFetchSequence(routeSequenceId);

-    // Redirect to the legacy experience for exams.
-    checkExamRedirect(sequenceStatus, sequence);
+    // All courseware URLs should normalize to the format /course/:courseId/:sequenceId/:unitId
+    // via the series of redirection rules below.
+    // See docs/decisions/0008-liberal-courseware-path-handling.md for more context.
+    // (It would be ideal to move this logic into the thunks layer and perform
+    //  all URL-changing checks at once. This should be done once the MFE is moved
+    //  to the new Outlines API. See TNL-8182.)

-    // Determine if we need to redirect because our URL is incomplete.
-    checkContentRedirect(courseId, sequenceStatus, sequenceId, sequence, routeUnitId);
-
-    // Determine if we can resume where we left off.
+    // Check resume redirect:
+    //   /course/:courseId -> /course/:courseId/:sequenceId/:unitId
+    // based on sequence/unit where user was last active.
    checkResumeRedirect(courseStatus, courseId, sequenceId, firstSequenceId);

+    // Check section-unit to unit redirect:
+    //    /course/:courseId/:sectionId/:unitId -> /course/:courseId/:unitId
+    // by simply ignoring the :sectionId.
+    // (It may be desirable at some point to be smarter here; for example, we could replace
+    //  :sectionId with the parent sequence of :unitId and/or check whether the :unitId
+    //  is actually within :sectionId. However, the way our Redux store is currently factored,
+    //  the unit's metadata is not available to us if the section isn't loadable.)
+    // Before performing this redirect, we *do* still check that a section is loadable;
+    // otherwise, we could get stuck in a redirect loop, since a sequence that failed to load
+    // would endlessly redirect to itself through `checkSectionUnitToUnitRedirect`
+    // and `checkUnitToSequenceUnitRedirect`.
+    checkSectionUnitToUnitRedirect(courseStatus, courseId, sequenceStatus, sectionViaSequenceId, routeUnitId);
+
+    // Check section to sequence redirect:
+    //    /course/:courseId/:sectionId         -> /course/:courseId/:sequenceId
+    // by redirecting to the first sequence within the section.
+    checkSectionToSequenceRedirect(courseStatus, courseId, sequenceStatus, sectionViaSequenceId, routeUnitId);
+
+    // Check unit to sequence-unit redirect:
+    //    /course/:courseId/:unitId -> /course/:courseId/:sequenceId/:unitId
+    // by filling in the ID of the parent sequence of :unitId.
+    checkUnitToSequenceUnitRedirect(courseStatus, courseId, sequenceStatus, unitViaSequenceId);
+
+    // Check special exam redirect:
+    //    /course/:courseId/:sequenceId(/:unitId) -> :legacyWebUrl
+    // because special exams are currently still served in the legacy LMS frontend.
+    checkSpecialExamRedirect(sequenceStatus, sequence);
+
+    // Check to sequence to sequence-unit redirect:
+    //    /course/:courseId/:sequenceId -> /course/:courseId/:sequenceId/:unitId
+    // by filling in the ID the most-recently-active unit in the sequence, OR
+    // the ID of the first unit the sequence if none is active.
+    checkSequenceToSequenceUnitRedirect(courseId, sequenceStatus, sequence, routeUnitId);
+
    // Check if we should save our sequence position.  Only do this when the route unit ID changes.
    this.checkSaveSequencePosition(routeUnitId);
  }
@@ -249,11 +314,22 @@ class CoursewareContainer extends Component {
  }
 }

+const unitShape = PropTypes.shape({
+  id: PropTypes.string.isRequired,
+  sequenceId: PropTypes.string.isRequired,
+});
+
 const sequenceShape = PropTypes.shape({
  id: PropTypes.string.isRequired,
  unitIds: PropTypes.arrayOf(PropTypes.string).isRequired,
+  sectionId: PropTypes.string.isRequired,
  isTimeLimited: PropTypes.bool,
-  lmsWebUrl: PropTypes.string,
+  legacyWebUrl: PropTypes.string,
+});
+
+const sectionShape = PropTypes.shape({
+  id: PropTypes.string.isRequired,
+  sequenceIds: PropTypes.arrayOf(PropTypes.string).isRequired,
 });

 const courseShape = PropTypes.shape({
@@ -278,6 +354,8 @@ CoursewareContainer.propTypes = {
  sequenceStatus: PropTypes.oneOf(['loaded', 'loading', 'failed']).isRequired,
  nextSequence: sequenceShape,
  previousSequence: sequenceShape,
+  unitViaSequenceId: unitShape,
+  sectionViaSequenceId: sectionShape,
  course: courseShape,
  sequence: sequenceShape,
  saveSequencePosition: PropTypes.func.isRequired,
@@ -292,6 +370,8 @@ CoursewareContainer.defaultProps = {
  firstSequenceId: null,
  nextSequence: null,
  previousSequence: null,
+  unitViaSequenceId: null,
+  sectionViaSequenceId: null,
  course: null,
  sequence: null,
 };
@@ -367,6 +447,18 @@ const firstSequenceIdSelector = createSelector(
  },
 );

+const sectionViaSequenceIdSelector = createSelector(
+  (state) => state.models.sections || {},
+  (state) => state.courseware.sequenceId,
+  (sectionsById, sequenceId) => (sectionsById[sequenceId] ? sectionsById[sequenceId] : null),
+);
+
+const unitViaSequenceIdSelector = createSelector(
+  (state) => state.models.units || {},
+  (state) => state.courseware.sequenceId,
+  (unitsById, sequenceId) => (unitsById[sequenceId] ? unitsById[sequenceId] : null),
+);
+
 const mapStateToProps = (state) => {
  const {
    courseId, sequenceId, courseStatus, sequenceStatus,
@@ -382,6 +474,8 @@ const mapStateToProps = (state) => {
    previousSequence: previousSequenceSelector(state),
    nextSequence: nextSequenceSelector(state),
    firstSequenceId: firstSequenceIdSelector(state),
+    sectionViaSequenceId: sectionViaSequenceIdSelector(state),
+    unitViaSequenceId: unitViaSequenceIdSelector(state),
  };
 };

--- a/src/courseware/CoursewareContainer.test.jsx
+++ b/src/courseware/CoursewareContainer.test.jsx
@@ -14,8 +14,9 @@ import tabMessages from '../tab-page/messages';
 import { initializeMockApp } from '../setupTest';

 import CoursewareContainer from './CoursewareContainer';
-import buildSimpleCourseBlocks from './data/__factories__/courseBlocks.factory';
+import { buildSimpleCourseBlocks, buildBinaryCourseBlocks } from '../shared/data/__factories__/courseBlocks.factory';
 import initializeStore from '../store';
+import { appendBrowserTimezoneToUrl } from '../utils';

 // NOTE: Because the unit creates an iframe, we choose to mock it out as its rendering isn't
 // pertinent to this test.  Instead, we render a simple div that displays the properties we expect
@@ -42,6 +43,37 @@ describe('CoursewareContainer', () => {
  let component;
  let axiosMock;

+  // This is a standard set of data that can be used in CoursewareContainer tests.
+  // By default, `setUpMockRequests()` will configure the mock LMS API to return use this data.
+  // Certain test cases override these in order to test with special blocks/metadata.
+  const defaultCourseMetadata = Factory.build('courseMetadata');
+  const defaultCourseId = defaultCourseMetadata.id;
+  const defaultUnitBlocks = [
+    Factory.build(
+      'block',
+      { type: 'vertical' },
+      { courseId: defaultCourseId },
+    ),
+    Factory.build(
+      'block',
+      { type: 'vertical' },
+      { courseId: defaultCourseId },
+    ),
+    Factory.build(
+      'block',
+      { type: 'vertical' },
+      { courseId: defaultCourseId },
+    ),
+  ];
+  const {
+    courseBlocks: defaultCourseBlocks,
+    sequenceBlocks: [defaultSequenceBlock],
+  } = buildSimpleCourseBlocks(
+    defaultCourseId,
+    defaultCourseMetadata.name,
+    { unitBlocks: defaultUnitBlocks },
+  );
+
  beforeEach(() => {
    axiosMock = new MockAdapter(getAuthenticatedHttpClient());

@@ -65,6 +97,47 @@ describe('CoursewareContainer', () => {
    );
  });

+  function setUpMockRequests(options = {}) {
+    // If we weren't given course blocks or metadata, use the defaults.
+    const courseBlocks = options.courseBlocks || defaultCourseBlocks;
+    const courseMetadata = options.courseMetadata || defaultCourseMetadata;
+    const courseId = courseMetadata.id;
+    // If we weren't given a list of sequence metadatas for URL mocking,
+    // then construct it ourselves by looking at courseBlocks.
+    const sequenceMetadatas = options.sequenceMetadatas || (
+      Object.values(courseBlocks.blocks)
+        .filter(block => block.type === 'sequential')
+        .map(sequenceBlock => Factory.build(
+          'sequenceMetadata',
+          {},
+          {
+            courseId,
+            sequenceBlock,
+            unitBlocks: sequenceBlock.children.map(unitId => courseBlocks.blocks[unitId]),
+          },
+        ))
+    );
+
+    const courseBlocksUrlRegExp = new RegExp(`${getConfig().LMS_BASE_URL}/api/courses/v2/blocks/*`);
+    axiosMock.onGet(courseBlocksUrlRegExp).reply(200, courseBlocks);
+
+    const courseMetadataUrl = appendBrowserTimezoneToUrl(`${getConfig().LMS_BASE_URL}/api/courseware/course/${courseId}`);
+    axiosMock.onGet(courseMetadataUrl).reply(200, courseMetadata);
+
+    sequenceMetadatas.forEach(sequenceMetadata => {
+      const sequenceMetadataUrl = `${getConfig().LMS_BASE_URL}/api/courseware/sequence/${sequenceMetadata.item_id}`;
+      axiosMock.onGet(sequenceMetadataUrl).reply(200, sequenceMetadata);
+    });
+  }
+
+  async function loadContainer() {
+    const { container } = render(component);
+    // Wait for the page spinner to be removed, such that we can wait for our main
+    // content to load before making any assertions.
+    await waitForElementToBeRemoved(screen.getByRole('status'));
+    return container;
+  }
+
  it('should initialize to show a spinner', () => {
    history.push('/course/abc123');
    render(component);
@@ -77,13 +150,8 @@ describe('CoursewareContainer', () => {
  });

  describe('when receiving successful course data', () => {
-    let courseId;
-    let courseMetadata;
-    let courseBlocks;
-    let sequenceMetadata;
-
-    let sequenceBlock;
-    let unitBlocks;
+    const courseMetadata = defaultCourseMetadata;
+    const courseId = defaultCourseId;

    function assertLoadedHeader(container) {
      const courseHeader = container.querySelector('.course-header');
@@ -94,64 +162,27 @@ describe('CoursewareContainer', () => {
      expect(courseHeader.querySelector('.course-title')).toHaveTextContent(courseMetadata.name);
    }

-    function assertSequenceNavigation(container) {
+    function assertSequenceNavigation(container, expectedUnitCount = 3) {
      // Ensure we had appropriate sequence navigation buttons.  We should only have one unit.
      const sequenceNavButtons = container.querySelectorAll('nav.sequence-navigation button');
-      expect(sequenceNavButtons).toHaveLength(5);
+      expect(sequenceNavButtons).toHaveLength(expectedUnitCount + 2);

      expect(sequenceNavButtons[0]).toHaveTextContent('Previous');
      // Prove this button is rendering an SVG tasks icon, meaning it's a unit/vertical.
      expect(sequenceNavButtons[1].querySelector('svg')).toHaveClass('fa-tasks');
-      expect(sequenceNavButtons[4]).toHaveTextContent('Next');
-    }
-
-    function setupMockRequests() {
-      axiosMock.onGet(`${getConfig().LMS_BASE_URL}/api/courseware/course/${courseId}`).reply(200, courseMetadata);
-      axiosMock.onGet(new RegExp(`${getConfig().LMS_BASE_URL}/api/courses/v2/blocks/*`)).reply(200, courseBlocks);
-      axiosMock.onGet(`${getConfig().LMS_BASE_URL}/api/courseware/sequence/${sequenceBlock.id}`).reply(200, sequenceMetadata);
+      expect(sequenceNavButtons[sequenceNavButtons.length - 1]).toHaveTextContent('Next');
    }

    beforeEach(async () => {
      // On page load, SequenceContext attempts to scroll to the top of the page.
      global.scrollTo = jest.fn();
-
-      courseMetadata = Factory.build('courseMetadata');
-      courseId = courseMetadata.id;
-
-      const customUnitBlocks = [
-        Factory.build(
-          'block',
-          { type: 'vertical' },
-          { courseId },
-        ),
-        Factory.build(
-          'block',
-          { type: 'vertical' },
-          { courseId },
-        ),
-        Factory.build(
-          'block',
-          { type: 'vertical' },
-          { courseId },
-        ),
-      ];
-
-      const result = buildSimpleCourseBlocks(courseId, courseMetadata.name, { unitBlocks: customUnitBlocks });
-      courseBlocks = result.courseBlocks;
-      unitBlocks = result.unitBlocks;
-      // eslint-disable-next-line prefer-destructuring
-      sequenceBlock = result.sequenceBlock[0];
-
-      sequenceMetadata = Factory.build(
-        'sequenceMetadata',
-        {},
-        { courseId, unitBlocks, sequenceBlock },
-      );
-
-      setupMockRequests();
+      setUpMockRequests();
    });

    describe('when the URL only contains a course ID', () => {
+      const sequenceBlock = defaultSequenceBlock;
+      const unitBlocks = defaultUnitBlocks;
+
      it('should use the resume block repsonse to pick a unit if it contains one', async () => {
        axiosMock.onGet(`${getConfig().LMS_BASE_URL}/api/courseware/resume/${courseId}`).reply(200, {
          sectionId: sequenceBlock.id,
@@ -159,11 +190,7 @@ describe('CoursewareContainer', () => {
        });

        history.push(`/course/${courseId}`);
-        const { container } = render(component);
-
-        // This is an important line that ensures the spinner has been removed - and thus our main
-        // content has been loaded - prior to proceeding with our expectations.
-        await waitForElementToBeRemoved(screen.getByRole('status'));
+        const container = await loadContainer();

        assertLoadedHeader(container);
        assertSequenceNavigation(container);
@@ -174,25 +201,19 @@ describe('CoursewareContainer', () => {
      });

      it('should use the first sequence ID and activeUnitIndex if the resume block response is empty', async () => {
-        // OVERRIDE SEQUENCE METADATA:
        // set the position to the third unit so we can prove activeUnitIndex is working
-        sequenceMetadata = Factory.build(
+        const sequenceMetadata = Factory.build(
          'sequenceMetadata',
          { position: 3 }, // position index is 1-based and is converted to 0-based for activeUnitIndex
          { courseId, unitBlocks, sequenceBlock },
        );
+        setUpMockRequests({ sequenceMetadatas: [sequenceMetadata] });

-        // Re-call the mock setup now that sequenceMetadata is different.
-        setupMockRequests();
        // Note how there is no sectionId/unitId returned in this mock response!
        axiosMock.onGet(`${getConfig().LMS_BASE_URL}/api/courseware/resume/${courseId}`).reply(200, {});

        history.push(`/course/${courseId}`);
-        const { container } = render(component);
-
-        // This is an important line that ensures the spinner has been removed - and thus our main
-        // content has been loaded - prior to proceeding with our expectations.
-        await waitForElementToBeRemoved(screen.getByRole('status'));
+        const container = await loadContainer();

        assertLoadedHeader(container);
        assertSequenceNavigation(container);
@@ -203,14 +224,110 @@ describe('CoursewareContainer', () => {
      });
    });

+    describe('when the URL contains a section ID instead of a sequence ID', () => {
+      const {
+        courseBlocks, unitTree, sequenceTree, sectionTree,
+      } = buildBinaryCourseBlocks(
+        courseId, courseMetadata.name,
+      );
+
+      function setUrl(urlSequenceId, urlUnitId = null) {
+        history.push(`/course/${courseId}/${urlSequenceId}/${urlUnitId || ''}`);
+      }
+
+      function assertLocation(container, sequenceId, unitId) {
+        const expectedUrl = `http://localhost/course/${courseId}/${sequenceId}/${unitId}`;
+        expect(global.location.href).toEqual(expectedUrl);
+        expect(container.querySelector('.fake-unit')).toHaveTextContent(unitId);
+      }
+
+      beforeEach(async () => {
+        setUpMockRequests({ courseBlocks });
+      });
+
+      describe('when the URL contains a unit ID', () => {
+        it('should ignore the section ID and redirect based on the unit ID', async () => {
+          const urlUnit = unitTree[1][1][1];
+          setUrl(sectionTree[1].id, urlUnit.id);
+          const container = await loadContainer();
+          assertLoadedHeader(container);
+          assertSequenceNavigation(container, 2);
+          assertLocation(container, sequenceTree[1][1].id, urlUnit.id);
+        });
+      });
+
+      describe('when the URL does not contain a unit ID', () => {
+        it('should choose a unit within the section\'s first sequence', async () => {
+          setUrl(sectionTree[1].id);
+          const container = await loadContainer();
+          assertLoadedHeader(container);
+          assertSequenceNavigation(container, 2);
+          assertLocation(container, sequenceTree[1][0].id, unitTree[1][0][0].id);
+        });
+      });
+
+      describe('when the section is empty', () => {
+        // Make a (shallow-)copy of the course blocks.
+        // Remove all descendents of the second section.
+        const blocksWithEmptySection = { ...courseBlocks.blocks };
+        blocksWithEmptySection[sectionTree[1].id] = {
+          ...sectionTree[1],
+          children: [],
+        };
+        sequenceTree[1].forEach(sequence => { delete blocksWithEmptySection[sequence.id]; });
+        unitTree[1].flat().forEach(unit => { delete blocksWithEmptySection[unit.id]; });
+        const courseBlocksWithEmptySection = {
+          ...courseBlocks,
+          blocks: blocksWithEmptySection,
+        };
+
+        beforeEach(async () => {
+          setUpMockRequests({ courseBlocks: courseBlocksWithEmptySection });
+        });
+
+        it('should ignore the section ID and instead redirect to the course root', async () => {
+          setUrl(sectionTree[1].id);
+          await loadContainer();
+          expect(global.location.href).toEqual(`http://localhost/course/${courseId}`);
+        });
+
+        it('should ignore the section and unit IDs and instead to the course root', async () => {
+          // Specific unit ID used here shouldn't matter; is ignored due to empty section.
+          setUrl(sectionTree[1].id, unitTree[0][0][0]);
+          await loadContainer();
+          expect(global.location.href).toEqual(`http://localhost/course/${courseId}`);
+        });
+      });
+    });
+
+    describe('when the URL only contains a unit ID', () => {
+      const { courseBlocks, unitTree, sequenceTree } = buildBinaryCourseBlocks(courseId, courseMetadata.name);
+
+      beforeEach(async () => {
+        setUpMockRequests({ courseBlocks });
+      });
+
+      it('should insert the sequence ID into the URL', async () => {
+        const unit = unitTree[1][0][1];
+        history.push(`/course/${courseId}/${unit.id}`);
+        const container = await loadContainer();
+
+        assertLoadedHeader(container);
+        assertSequenceNavigation(container, 2);
+        const expectedSequenceId = sequenceTree[1][0].id;
+        const expectedUrl = `http://localhost/course/${courseId}/${expectedSequenceId}/${unit.id}`;
+        expect(global.location.href).toEqual(expectedUrl);
+        expect(container.querySelector('.fake-unit')).toHaveTextContent(unit.id);
+      });
+    });
+
    describe('when the URL contains a course ID and sequence ID', () => {
+      const sequenceBlock = defaultSequenceBlock;
+      const unitBlocks = defaultUnitBlocks;
+
      it('should pick the first unit if position was not defined (activeUnitIndex becomes 0)', async () => {
        history.push(`/course/${courseId}/${sequenceBlock.id}`);
-        const { container } = render(component);
-
-        // This is an important line that ensures the spinner has been removed - and thus our main
-        // content has been loaded - prior to proceeding with our expectations.
-        await waitForElementToBeRemoved(screen.getByRole('status'));
+        const container = await loadContainer();

        assertLoadedHeader(container);
        assertSequenceNavigation(container);
@@ -221,22 +338,15 @@ describe('CoursewareContainer', () => {
      });

      it('should use activeUnitIndex to pick a unit from the sequence', async () => {
-        // OVERRIDE SEQUENCE METADATA:
-        sequenceMetadata = Factory.build(
+        const sequenceMetadata = Factory.build(
          'sequenceMetadata',
          { position: 3 }, // position index is 1-based and is converted to 0-based for activeUnitIndex
          { courseId, unitBlocks, sequenceBlock },
        );
-
-        // Re-call the mock setup now that sequenceMetadata is different.
-        setupMockRequests();
+        setUpMockRequests({ sequenceMetadatas: [sequenceMetadata] });

        history.push(`/course/${courseId}/${sequenceBlock.id}`);
-        const { container } = render(component);
-
-        // This is an important line that ensures the spinner has been removed - and thus our main
-        // content has been loaded - prior to proceeding with our expectations.
-        await waitForElementToBeRemoved(screen.getByRole('status'));
+        const container = await loadContainer();

        assertLoadedHeader(container);
        assertSequenceNavigation(container);
@@ -248,13 +358,12 @@ describe('CoursewareContainer', () => {
    });

    describe('when the URL contains a course, sequence, and unit ID', () => {
+      const sequenceBlock = defaultSequenceBlock;
+      const unitBlocks = defaultUnitBlocks;
+
      it('should load the specified unit', async () => {
        history.push(`/course/${courseId}/${sequenceBlock.id}/${unitBlocks[2].id}`);
-        const { container } = render(component);
-
-        // This is an important line that ensures the spinner has been removed - and thus our main
-        // content has been loaded - prior to proceeding with our expectations.
-        await waitForElementToBeRemoved(screen.getByRole('status'));
+        const container = await loadContainer();

        assertLoadedHeader(container);
        assertSequenceNavigation(container);
@@ -265,16 +374,12 @@ describe('CoursewareContainer', () => {
      });

      it('should navigate between units and check block completion', async () => {
-        history.push(`/course/${courseId}/${sequenceBlock.id}/${unitBlocks[0].id}`);
-        const { container } = render(component);
-
-        axiosMock.onPost(`${courseId}/xblock/${sequenceBlock.id}/handler/xmodule_handler/get_completion`).reply(200, {
+        axiosMock.onPost(`${courseId}/xblock/${sequenceBlock.id}/handler/get_completion`).reply(200, {
          complete: true,
        });

-        // This is an important line that ensures the spinner has been removed - and thus our main
-        // content has been loaded - prior to proceeding with our expectations.
-        await waitForElementToBeRemoved(screen.getByRole('status'));
+        history.push(`/course/${courseId}/${sequenceBlock.id}/${unitBlocks[0].id}`);
+        const container = await loadContainer();

        const sequenceNavButtons = container.querySelectorAll('nav.sequence-navigation button');
        const sequenceNextButton = sequenceNavButtons[4];
@@ -287,6 +392,8 @@ describe('CoursewareContainer', () => {

    describe('when the current sequence is an exam', () => {
      const { location } = window;
+      const sequenceBlock = defaultSequenceBlock;
+      const unitBlocks = defaultUnitBlocks;

      beforeEach(() => {
        delete window.location;
@@ -299,33 +406,25 @@ describe('CoursewareContainer', () => {
        window.location = location;
      });

-      it('should redirect to the sequence lmsWebUrl', async () => {
-        // OVERRIDE SEQUENCE METADATA:
-        sequenceMetadata = Factory.build(
+      it('should redirect to the sequence legacyWebUrl', async () => {
+        const sequenceMetadata = Factory.build(
          'sequenceMetadata',
          { is_time_limited: true }, // position index is 1-based and is converted to 0-based for activeUnitIndex
          { courseId, unitBlocks, sequenceBlock },
        );
+        setUpMockRequests({ sequenceMetadatas: [sequenceMetadata] });

-        // Re-call the mock setup now that sequenceMetadata is different.
-        setupMockRequests();
        history.push(`/course/${courseId}/${sequenceBlock.id}/${unitBlocks[2].id}`);
-        render(component);
+        await loadContainer();

-        // This is an important line that ensures the spinner has been removed - and thus our main
-        // content has been loaded - prior to proceeding with our expectations.
-        await waitForElementToBeRemoved(screen.getByRole('status'));
-
-        expect(global.location.assign).toHaveBeenCalledWith(sequenceBlock.lms_web_url);
+        expect(global.location.assign).toHaveBeenCalledWith(sequenceBlock.legacy_web_url);
      });
    });
  });

  describe('when receiving a can_load_courseware error_code', () => {
-    let courseMetadata;
-
-    function setupWithDeniedStatus(errorCode) {
-      courseMetadata = Factory.build('courseMetadata', {
+    function setUpWithDeniedStatus(errorCode) {
+      const courseMetadata = Factory.build('courseMetadata', {
        can_load_courseware: {
          has_access: false,
          error_code: errorCode,
@@ -333,65 +432,43 @@ describe('CoursewareContainer', () => {
        },
      });
      const courseId = courseMetadata.id;
-      const { courseBlocks, unitBlocks, sequenceBlock } = buildSimpleCourseBlocks(courseId, courseMetadata.name);
-      const sequenceMetadata = Factory.build(
-        'sequenceMetadata',
-        {},
-        { courseId, unitBlocks, sequenceBlock },
-      );
-
-      const forbiddenCourseUrl = `${getConfig().LMS_BASE_URL}/api/courseware/course/${courseId}`;
-      const courseBlocksUrlRegExp = new RegExp(`${getConfig().LMS_BASE_URL}/api/courses/v2/blocks/*`);
-      const sequenceMetadataUrl = `${getConfig().LMS_BASE_URL}/api/courseware/sequence/${sequenceBlock.id}`;
-
-      axiosMock.onGet(forbiddenCourseUrl).reply(200, courseMetadata);
-      axiosMock.onGet(courseBlocksUrlRegExp).reply(200, courseBlocks);
-      axiosMock.onGet(sequenceMetadataUrl).reply(200, sequenceMetadata);
-
+      const { courseBlocks } = buildSimpleCourseBlocks(courseId, courseMetadata.name);
+      setUpMockRequests({ courseBlocks, courseMetadata });
      history.push(`/course/${courseId}`);
+      return courseMetadata;
    }

    it('should go to course home for an enrollment_required error code', async () => {
-      setupWithDeniedStatus('enrollment_required');
-
-      render(component);
-      await waitForElementToBeRemoved(screen.getByRole('status'));
+      const courseMetadata = setUpWithDeniedStatus('enrollment_required');
+      await loadContainer();

      expect(global.location.href).toEqual(`http://localhost/redirect/course-home/${courseMetadata.id}`);
    });

    it('should go to course home for an authentication_required error code', async () => {
-      setupWithDeniedStatus('authentication_required');
-
-      render(component);
-      await waitForElementToBeRemoved(screen.getByRole('status'));
+      const courseMetadata = setUpWithDeniedStatus('authentication_required');
+      await loadContainer();

      expect(global.location.href).toEqual(`http://localhost/redirect/course-home/${courseMetadata.id}`);
    });

    it('should go to dashboard for an unfulfilled_milestones error code', async () => {
-      setupWithDeniedStatus('unfulfilled_milestones');
-
-      render(component);
-      await waitForElementToBeRemoved(screen.getByRole('status'));
+      setUpWithDeniedStatus('unfulfilled_milestones');
+      await loadContainer();

      expect(global.location.href).toEqual('http://localhost/redirect/dashboard');
    });

    it('should go to the dashboard with an attached access_response_error for an audit_expired error code', async () => {
-      setupWithDeniedStatus('audit_expired');
-
-      render(component);
-      await waitForElementToBeRemoved(screen.getByRole('status'));
+      setUpWithDeniedStatus('audit_expired');
+      await loadContainer();

      expect(global.location.href).toEqual('http://localhost/redirect/dashboard?access_response_error=uhoh%20oh%20no');
    });

    it('should go to the dashboard with a notlive start date for a course_not_started error code', async () => {
-      setupWithDeniedStatus('course_not_started');
-
-      render(component);
-      await waitForElementToBeRemoved(screen.getByRole('status'));
+      setUpWithDeniedStatus('course_not_started');
+      await loadContainer();

      const startDate = '2/5/2013'; // This date is based on our courseMetadata factory's sample data.
      expect(global.location.href).toEqual(`http://localhost/redirect/dashboard?notlive=${startDate}`);
--- a/src/courseware/CoursewareRedirect.jsx
+++ b/src/courseware/CoursewareRedirect.jsx
@@ -8,7 +8,7 @@ export default function CourseRedirect({ match }) {
    unitId,
  } = match.params;
  const unit = useModel('units', unitId) || {};
-  const coursewareUrl = unit.lmsWebUrl || `${getConfig().LMS_BASE_URL}/courses/${courseId}/courseware/`;
+  const coursewareUrl = unit.legacyWebUrl || `${getConfig().LMS_BASE_URL}/courses/${courseId}/courseware/`;
  global.location.assign(coursewareUrl);
  return null;
 }
--- a/src/courseware/course/Course.jsx
+++ b/src/courseware/course/Course.jsx
@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { Helmet } from 'react-helmet';
 import { useDispatch } from 'react-redux';
+import Cookies from 'js-cookie';
 import { getConfig } from '@edx/frontend-platform';

 import { AlertList } from '../../generic/user-messages';
@@ -13,8 +14,14 @@ import Sequence from './sequence';
 import { CelebrationModal, shouldCelebrateOnSectionLoad } from './celebration';
 import ContentTools from './content-tools';
 import CourseBreadcrumbs from './CourseBreadcrumbs';
+import SidebarNotificationButton from './SidebarNotificationButton';
+
 import CourseSock from '../../generic/course-sock';
 import { useModel } from '../../generic/model-store';
+import useWindowSize, { responsiveBreakpoints } from '../../generic/tabs/useWindowSize';
+
+/** [MM-P2P] Experiment */
+import { initCoursewareMMP2P, MMP2PBlockModal } from '../../experiments/mm-p2p';

 function Course({
  courseId,
@@ -45,75 +52,78 @@ function Course({
  } = course;

  // Below the tabs, above the breadcrumbs alerts (appearing in the order listed here)
-  const offerAlert = useOfferAlert(offer, userTimezone, 'course');
-  const accessExpirationAlert = useAccessExpirationAlert(accessExpiration, userTimezone, 'course');
+  const offerAlert = useOfferAlert(courseId, offer, org, userTimezone, 'course', 'in_course');
+  const accessExpirationAlert = useAccessExpirationAlert(accessExpiration, courseId, org, userTimezone, 'course', 'in_course');

  const dispatch = useDispatch();
  const celebrateFirstSection = celebrations && celebrations.firstSection;
-  const celebrationOpen = shouldCelebrateOnSectionLoad(courseId, sequenceId, unitId, celebrateFirstSection, dispatch);
-
-  // The below block of code should be reverted after the REV1512 experiment
-  const [REV1512FlyoverEnabled, setREV1512FlyoverEnabled] = useState(false);
-  window.enableREV1512Flyover = () => {
-    setREV1512FlyoverEnabled(true);
-  };
-  const getCookie = (name) => {
-    const match = document.cookie.match(`${name}=([^;]*)`);
-    return match ? match[1] : undefined;
-  };
-  const userAgent = typeof window.navigator === 'undefined' ? '' : navigator.userAgent;
-  const isMobile = Boolean(
-    userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile|WPDesktop/i),
+  const celebrationOpen = shouldCelebrateOnSectionLoad(
+    courseId, sequenceId, unitId, celebrateFirstSection, dispatch, celebrations,
  );
-  const [REV1512FlyoverVisible, setREV1512FlyoverVisible] = useState(isMobile ? false : !(getCookie(`REV1512FlyoverVisible${courseId}`) === 'false'));
-  const isREV1512FlyoverVisible = () => REV1512FlyoverEnabled && (REV1512FlyoverVisible || getCookie('REV1512FlyoverVisible') === 'true');
-  const toggleREV1512Flyover = () => {
-    const setCookie = (cookieName, value, domain) => {
-      const cookieDomain = (typeof domain === 'undefined') ? '' : `domain=${domain};`;
-      const exdate = new Date();
-      exdate.setHours(exdate.getHours() + 4);
-      const cookieValue = `${escape(value)}; expires=${exdate.toUTCString()}`;
-      document.cookie = `${cookieName}=${cookieValue};${cookieDomain}path=/`;
-    };
-    const isVisible = isREV1512FlyoverVisible();
-    setCookie(`REV1512FlyoverVisible${courseId}`, !isVisible);
-    setREV1512FlyoverVisible(!isVisible);
+
+  // REV-2130 TODO: temporary cookie code that should be removed.
+  // In order to see the Value Prop sidebar in prod, a cookie should be set in
+  // the browser console and refresh: document.cookie = 'value_prop_cookie=true';
+  const isValuePropCookieSet = Cookies.get('value_prop_cookie') === 'true';
+
+  const shouldDisplaySidebarButton = useWindowSize().width >= responsiveBreakpoints.small.minWidth;
+
+  const [sidebarVisible, setSidebar] = useState(false);
+  const isSidebarVisible = () => sidebarVisible && setSidebar;
+  const toggleSidebar = () => {
+    if (sidebarVisible) { setSidebar(false); } else { setSidebar(true); }
  };
-  // The above block of code should be reverted after the REV1512 experiment
+
+  /** [MM-P2P] Experiment */
+  const MMP2P = initCoursewareMMP2P(courseId, sequenceId, unitId);

  return (
    <>
      <Helmet>
        <title>{`${pageTitleBreadCrumbs.join(' | ')} | ${getConfig().SITE_NAME}`}</title>
      </Helmet>
-      <AlertList
-        className="my-3"
-        topic="course"
-        customAlerts={{
-          ...accessExpirationAlert,
-          ...offerAlert,
-        }}
-      />
-      <CourseBreadcrumbs
-        courseId={courseId}
-        sectionId={section ? section.id : null}
-        sequenceId={sequenceId}
-        toggleREV1512Flyover={toggleREV1512Flyover} /* This line should be reverted after REV1512 experiment */
-        REV1512FlyoverEnabled={REV1512FlyoverEnabled} /* This line should be reverted after REV1512 experiment */
-        isREV1512FlyoverVisible={isREV1512FlyoverVisible} /* This line should be reverted after REV1512 experiment */
-      />
+      { /** This conditional is for the [MM-P2P] Experiment */}
+      { !MMP2P.state.isEnabled && (
+        <AlertList
+          className="my-3"
+          topic="course"
+          customAlerts={{
+            ...accessExpirationAlert,
+            ...offerAlert,
+          }}
+        />
+      )}
+      <div className="position-relative">
+        <CourseBreadcrumbs
+          courseId={courseId}
+          sectionId={section ? section.id : null}
+          sequenceId={sequenceId}
+          //* * [MM-P2P] Experiment */
+          mmp2p={MMP2P}
+        />
+
+        { isValuePropCookieSet && shouldDisplaySidebarButton ? (
+          <SidebarNotificationButton
+            toggleSidebar={toggleSidebar}
+            isSidebarVisible={isSidebarVisible}
+          />
+        ) : null}
+      </div>
+
      <AlertList topic="sequence" />
      <Sequence
        unitId={unitId}
-        sectionId={section ? section.id : null}
        sequenceId={sequenceId}
        courseId={courseId}
        unitNavigationHandler={unitNavigationHandler}
        nextSequenceHandler={nextSequenceHandler}
        previousSequenceHandler={previousSequenceHandler}
-        toggleREV1512Flyover={toggleREV1512Flyover} /* This line should be reverted after REV1512 experiment */
-        isREV1512FlyoverVisible={isREV1512FlyoverVisible} /* This line should be reverted after REV1512 experiment */
-        REV1512FlyoverEnabled={REV1512FlyoverEnabled} /* This line should be reverted after REV1512 experiment */
+        toggleSidebar={toggleSidebar}
+        isSidebarVisible={isSidebarVisible}
+        sidebarVisible={sidebarVisible}
+        isValuePropCookieSet={isValuePropCookieSet}
+        //* * [MM-P2P] Experiment */
+        mmp2p={MMP2P}
      />
      {celebrationOpen && (
        <CelebrationModal
@@ -131,6 +141,8 @@ function Course({
        />
      )}
      <ContentTools course={course} />
+      { /** [MM-P2P] Experiment */ }
+      { MMP2P.meta.modalLock && <MMP2PBlockModal options={MMP2P} /> }
    </>
  );
 }
--- a/src/courseware/course/Course.test.jsx
+++ b/src/courseware/course/Course.test.jsx
@@ -1,5 +1,7 @@
 import React from 'react';
 import { Factory } from 'rosie';
+import Cookies from 'js-cookie';
+import { sendTrackEvent } from '@edx/frontend-platform/analytics';
 import {
  loadUnit, render, screen, waitFor, getByRole, initializeTestStore, fireEvent,
 } from '../../setupTest';
@@ -18,6 +20,7 @@ describe('Course', () => {
    nextSequenceHandler: () => {},
    previousSequenceHandler: () => {},
    unitNavigationHandler: () => {},
+    toggleSidebar: () => {},
  };

  beforeAll(async () => {
@@ -84,6 +87,31 @@ describe('Course', () => {
    expect(screen.getByRole('button', { name: 'Learn About Verified Certificates' })).toBeInTheDocument();
  });

+  it('displays sidebar notification button', async () => {
+    const toggleSidebar = jest.fn();
+    const isSidebarVisible = jest.fn();
+
+    // REV-2130 TODO: remove cookie related code once temporary value prop cookie code is removed.
+    const cookieName = 'value_prop_cookie';
+    Cookies.set = jest.fn();
+    Cookies.get = jest.fn().mockImplementation(() => cookieName);
+    const getSpy = jest.spyOn(Cookies, 'get').mockReturnValueOnce('true');
+
+    const courseMetadata = Factory.build('courseMetadata');
+    const testStore = await initializeTestStore({ courseMetadata, excludeFetchSequence: true }, false);
+    const testData = {
+      ...mockData,
+      toggleSidebar,
+      isSidebarVisible,
+    };
+    render(<Course {...testData} courseId={courseMetadata.id} />, { store: testStore });
+
+    const sidebarOpenButton = screen.getByRole('button', { name: /Show sidebar notification/i });
+
+    expect(getSpy).toBeCalledWith(cookieName);
+    expect(sidebarOpenButton).toBeInTheDocument();
+  });
+
  it('displays offer and expiration alert', async () => {
    const courseMetadata = Factory.build('courseMetadata', {
      access_expiration: {
@@ -108,6 +136,68 @@ describe('Course', () => {
    await screen.findByText('Audit Access Expires');
  });

+  it('sends analytics event onClick of access expiration upgrade link', async () => {
+    sendTrackEvent.mockClear();
+
+    const courseMetadata = Factory.build('courseMetadata', {
+      access_expiration: {
+        expiration_date: '2080-01-01T12:00:00Z',
+        masquerading_expired_course: false,
+        upgrade_deadline: '2070-01-01T12:00:00Z',
+        upgrade_url: 'https://example.com/upgrade',
+      },
+      user_timezone: 'UTC',
+    });
+    const testStore = await initializeTestStore({ courseMetadata, excludeFetchSequence: true }, false);
+    render(<Course {...mockData} courseId={courseMetadata.id} />, { store: testStore });
+    await screen.findByText('Audit Access Expires');
+
+    const upgradeLink = screen.getByRole('link', { name: 'Upgrade now' });
+    fireEvent.click(upgradeLink);
+
+    expect(sendTrackEvent).toHaveBeenCalledTimes(1);
+    expect(sendTrackEvent).toHaveBeenCalledWith('edx.bi.ecommerce.upsell_links_clicked', {
+      org_key: 'edX',
+      courserun_key: courseMetadata.id,
+      linkCategory: 'FBE_banner',
+      linkName: 'in_course_audit_access_expires',
+      linkType: 'link',
+      pageName: 'in_course',
+    });
+  });
+
+  it('sends analytics event onClick of offer alert link', async () => {
+    sendTrackEvent.mockClear();
+
+    const courseMetadata = Factory.build('courseMetadata', {
+      offer: {
+        code: 'EDXWELCOME',
+        expiration_date: '2070-01-01T12:00:00Z',
+        original_price: '$100',
+        discounted_price: '$85',
+        percentage: 15,
+        upgrade_url: 'https://example.com/upgrade',
+      },
+      user_timezone: 'UTC',
+    });
+    const testStore = await initializeTestStore({ courseMetadata, excludeFetchSequence: true }, false);
+    render(<Course {...mockData} courseId={courseMetadata.id} />, { store: testStore });
+    await screen.findByText('EDXWELCOME');
+
+    const upgradeLink = screen.getByRole('link', { name: 'Upgrade now' });
+    fireEvent.click(upgradeLink);
+
+    expect(sendTrackEvent).toHaveBeenCalledTimes(1);
+    expect(sendTrackEvent).toHaveBeenCalledWith('edx.bi.ecommerce.upsell_links_clicked', {
+      org_key: 'edX',
+      courserun_key: courseMetadata.id,
+      linkCategory: 'welcome',
+      linkName: 'in_course_welcome',
+      linkType: 'link',
+      pageName: 'in_course',
+    });
+  });
+
  it('passes handlers to the sequence', async () => {
    const nextSequenceHandler = jest.fn();
    const previousSequenceHandler = jest.fn();
--- a/src/courseware/course/CourseBreadcrumbs.jsx
+++ b/src/courseware/course/CourseBreadcrumbs.jsx
@@ -7,6 +7,9 @@ import { faHome } from '@fortawesome/free-solid-svg-icons';
 import { useSelector } from 'react-redux';
 import { useModel } from '../../generic/model-store';

+/** [MM-P2P] Experiment */
+import { MMP2PFlyoverTrigger } from '../../experiments/mm-p2p';
+
 function CourseBreadcrumb({
  url, children, withSeparator, ...attrs
 }) {
@@ -36,9 +39,8 @@ export default function CourseBreadcrumbs({
  courseId,
  sectionId,
  sequenceId,
-  toggleREV1512Flyover, /* This line should be reverted after the REV1512 experiment */
-  REV1512FlyoverEnabled, /* This line should be reverted after the REV1512 experiment */
-  isREV1512FlyoverVisible, /* This line should be reverted after the REV1512 experiment */
+  /** [MM-P2P] Experiment */
+  mmp2p,
 }) {
  const course = useModel('coursewareMeta', courseId);
  const sequence = useModel('sequences', sequenceId);
@@ -57,14 +59,8 @@ export default function CourseBreadcrumbs({
    return [];
  }, [courseStatus, sequenceStatus]);

-  // These should be reverted after the REV1512 experiment
-  const userAgent = typeof window.navigator === 'undefined' ? '' : navigator.userAgent;
-  const isMobile = Boolean(
-    userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile|WPDesktop/i),
-  );
-
  return (
-    <nav aria-label="breadcrumb" className="my-4">
+    <nav aria-label="breadcrumb" className="my-4 d-inline-block col-sm-10">
      <ol className="list-unstyled d-flex m-0">
        <CourseBreadcrumb
          url={`${getConfig().LMS_BASE_URL}/courses/${course.id}/course/`}
@@ -91,21 +87,10 @@ export default function CourseBreadcrumbs({
            {label}
          </CourseBreadcrumb>
        ))}
-        {/* The below block of code should be reverted after the REV1512 experiment */}
-        {REV1512FlyoverEnabled
-        && !isMobile && (
-        <div
-          className="toggleFlyoverButton"
-          aria-hidden="true"
-          style={{ marginLeft: 'auto', marginTop: '-16px', borderBottom: isREV1512FlyoverVisible() ? '2px solid #00262b' : 'none' }}
-          onClick={() => {
-            toggleREV1512Flyover();
-          }}
-        >
-          <svg width="54" height="40" viewBox="0 0 54 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <rect x="0.5" y="0.5" width="53" height="39" rx="1.5" fill="white" stroke="#E7E8E9" /><path d="M36 20C36 15.6 32.4 12 28 12C27.7 12 27.5 12.2 27.5 12.5C27.5 12.8 27.7 13 28 13C31.85 13 35 16.15 35 20C35 23.85 31.85 27 28 27C24.15 27 21 23.85 21 20C21 19.7 20.8 19.5 20.5 19.5C20.3 19.5 20.1 19.65 20.05 19.8C20 19.85 20 19.95 20 20C20 24.4 23.6 28 28 28C32.4 28 36 24.4 36 20Z" fill="black" stroke="black" strokeWidth="0.6" /><path d="M23.1065 14.52C22.9403 14.36 22.691 14.36 22.5247 14.52C22.3585 14.68 22.3585 14.92 22.5247 15.08C22.6078 15.16 22.7325 15.2 22.8156 15.2C22.9403 15.2 23.0234 15.16 23.1065 15.08C23.2312 14.96 23.2312 14.68 23.1065 14.52Z" fill="black" stroke="black" strokeWidth="0.6" /><path d="M27.6848 15.2C27.3939 15.2 27.2 15.3973 27.2 15.6932V19.6384C27.2 19.6877 27.2 19.7863 27.2484 19.8356C27.2969 19.8849 27.2969 19.9343 27.3454 19.9836L29.5757 22.2521C29.6727 22.3507 29.8181 22.4 29.9151 22.4C30.0121 22.4 30.1575 22.3507 30.2545 22.2521C30.4484 22.0548 30.4484 21.7589 30.2545 21.5617L28.1696 19.4411V15.6932C28.1696 15.3973 27.9757 15.2 27.6848 15.2Z" fill="black" stroke="black" strokeWidth="0.6" /><circle cx="35.5" cy="14.5" r="4.5" fill="#C32D3A" />
-          </svg>
-        </div>
+
+        {/** [MM-P2P] Experiment */}
+        {mmp2p.state.isEnabled && (
+          <MMP2PFlyoverTrigger options={mmp2p} />
        )}
      </ol>
    </nav>
@@ -116,12 +101,18 @@ CourseBreadcrumbs.propTypes = {
  courseId: PropTypes.string.isRequired,
  sectionId: PropTypes.string,
  sequenceId: PropTypes.string,
-  toggleREV1512Flyover: PropTypes.func.isRequired, /* This line should be reverted after the REV1512 experiment */
-  REV1512FlyoverEnabled: PropTypes.bool.isRequired, /* This line should be reverted after the REV1512 experiment */
-  isREV1512FlyoverVisible: PropTypes.func.isRequired, /* This line should be reverted after the REV1512 experiment */
+  /** [MM-P2P] Experiment */
+  mmp2p: PropTypes.shape({
+    state: PropTypes.shape({
+      isEnabled: PropTypes.bool.isRequired,
+    }),
+  }),
 };

 CourseBreadcrumbs.defaultProps = {
  sectionId: null,
  sequenceId: null,
+
+  /** [MM-P2P] Experiment */
+  mmp2p: {},
 };
--- a/src/courseware/course/NotificationIcon.jsx
+++ b/src/courseware/course/NotificationIcon.jsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { Icon } from '@edx/paragon';
+import { WatchOutline } from '@edx/paragon/icons';
+
+import './NotificationIcon.scss';
+import messages from './messages';
+
+function NotificationIcon({ intl, status, notificationColor }) {
+  return (
+    <div className="icon-container">
+      <Icon src={WatchOutline} className="m-0 m-auto" alt={intl.formatMessage(messages.openSidebarButton)} />
+      {status === 'active'
+        ? <span className={classNames(notificationColor, 'notification-dot')} data-testid="notification-dot" />
+        : null}
+    </div>
+  );
+}
+
+NotificationIcon.propTypes = {
+  intl: intlShape.isRequired,
+  status: PropTypes.string.isRequired,
+  notificationColor: PropTypes.string.isRequired,
+};
+
+export default injectIntl(NotificationIcon);
--- a/src/courseware/course/NotificationIcon.scss
+++ b/src/courseware/course/NotificationIcon.scss
@@ -0,0 +1,15 @@
+.icon-container {
+    position: relative;
+    display: flex;
+    align-items: center;
+    width: 2.4rem;
+    height: 2rem;
+}
+
+.notification-dot {
+    position: absolute;
+    top: 0.3rem;
+    right: 0.55rem;
+    border-radius: 50% !important;
+    padding: 0.25rem !important;
+}
--- a/src/courseware/course/Sidebar.jsx
+++ b/src/courseware/course/Sidebar.jsx
@@ -0,0 +1,51 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { Icon } from '@edx/paragon';
+import { ArrowBackIos, Close } from '@edx/paragon/icons';
+import messages from './messages';
+import useWindowSize, { responsiveBreakpoints } from '../../generic/tabs/useWindowSize';
+
+function Sidebar({
+  intl, toggleSidebar,
+}) {
+  const shouldDisplayFullScreen = useWindowSize().width < responsiveBreakpoints.large.minWidth;
+
+  // REV-2130 TODO: temporary variable set to true, should be replaced with
+  // whether the course can be upgraded (ie. shouldDisplayUpgradeNotification)
+  const shouldDisplayNoNotification = true;
+
+  return (
+    <section className={classNames('sidebar-container ml-0 ml-lg-4', { 'no-notification': shouldDisplayNoNotification && !shouldDisplayFullScreen })} aria-label={intl.formatMessage(messages.sidebarNotification)}>
+      {shouldDisplayFullScreen ? (
+        <div className="mobile-close-container" onClick={() => { toggleSidebar(); }} onKeyDown={() => { toggleSidebar(); }} role="button" tabIndex="0" alt={intl.formatMessage(messages.responsiveCloseSidebar)}>
+          <Icon src={ArrowBackIos} />
+          <span className="mobile-close">{intl.formatMessage(messages.responsiveCloseSidebar)}</span>
+        </div>
+      ) : null}
+      <div className="sidebar-header px-3">
+        <span>{intl.formatMessage(messages.notificationTitle)}</span>
+        {shouldDisplayFullScreen
+          ? null
+          : <Icon src={Close} className="close-btn" onClick={() => { toggleSidebar(); }} onKeyDown={() => { toggleSidebar(); }} role="button" tabIndex="0" alt={intl.formatMessage(messages.closeSidebarButton)} />}
+      </div>
+      <div className="sidebar-divider" />
+      <div className="sidebar-content">
+        {/* REV-2130 TODO: replace logic to display upgrade expiration box if condition is true */}
+        {shouldDisplayNoNotification ? <p>{intl.formatMessage(messages.noNotificationsMessage)}</p> : null}
+      </div>
+    </section>
+  );
+}
+
+Sidebar.propTypes = {
+  intl: intlShape.isRequired,
+  toggleSidebar: PropTypes.func,
+};
+
+Sidebar.defaultProps = {
+  toggleSidebar: null,
+};
+
+export default injectIntl(Sidebar);
--- a/src/courseware/course/Sidebar.scss
+++ b/src/courseware/course/Sidebar.scss
@@ -0,0 +1,68 @@
+.sidebar-container {
+    border: 1px solid $light-400;
+    border-radius: 4px;
+    width: 20rem;
+    vertical-align: top;
+
+    @media (max-width: -1 + map-get($grid-breakpoints, 'lg')) {
+        position: fixed; 
+        top: 0; 
+        bottom: 0; 
+        left: 0; 
+        right: 0;
+        width: 100%;
+        height: 100% !important;
+        background-color: white;
+        margin: 0;
+        border: none;
+        border-radius: 0;
+    }
+}
+
+.no-notification {
+    height: 15rem;
+}
+
+.sidebar-header {
+    padding: 0.625rem 0;
+
+    span {
+        display: inline-block;
+    }
+}
+
+.close-btn {
+    float: right;
+}
+
+.sidebar-divider {
+    width: 100.5%;
+    height: 0.5rem;
+    background: $gray-100;
+    border: 1px solid $light-400;
+    border-left: 0;
+}
+
+.sidebar-content {
+    padding: 1rem;
+    font-size: 0.875rem;
+}
+
+.mobile-close-container {
+    padding-top: 0.5rem;
+    padding-bottom: 0.75rem;
+    border-bottom: 1px solid $light-400;
+
+    span {
+        display: inline-block;
+    }
+    svg {
+        top: 0.4rem;
+        left: 0.8rem;
+    }
+}
+
+.mobile-close {
+    font-weight: 500;
+    margin-left: 1.2rem;
+}
--- a/src/courseware/course/Sidebar.test.jsx
+++ b/src/courseware/course/Sidebar.test.jsx
@@ -0,0 +1,58 @@
+import React from 'react';
+import { Factory } from 'rosie';
+import {
+  render, initializeTestStore, screen, fireEvent, waitFor,
+} from '../../setupTest';
+import Sidebar from './Sidebar';
+import useWindowSize from '../../generic/tabs/useWindowSize';
+
+jest.mock('../../generic/tabs/useWindowSize');
+
+describe('Sidebar', () => {
+  let mockData;
+  const courseMetadata = Factory.build('courseMetadata');
+
+  beforeEach(async () => {
+    mockData = {
+      toggleSidebar: () => {},
+    };
+  });
+
+  beforeAll(async () => {
+    await initializeTestStore({ courseMetadata, excludeFetchCourse: true, excludeFetchSequence: true });
+  });
+
+  it('renders sidebar', async () => {
+    useWindowSize.mockReturnValue({ width: 1200, height: 422 });
+    const { container } = render(<Sidebar {...mockData} />);
+
+    expect(container).toBeInTheDocument();
+    expect(container).toHaveTextContent('Notifications');
+    expect(container).not.toHaveTextContent('Back to course');
+  });
+
+  it('renders no notifications message', async () => {
+    // REV-2130 TODO: add conditional if no expiration box/upgradeable
+    const testData = { ...mockData };
+    const { container } = render(<Sidebar {...testData} />);
+
+    expect(container).toBeInTheDocument();
+    expect(container).toHaveTextContent('You have no new notifications at this time.');
+  });
+
+  it('renders sidebar with full screen "Back to course" at response width', async () => {
+    useWindowSize.mockReturnValue({ width: 991, height: 422 });
+    const toggleSidebar = jest.fn();
+    const testData = {
+      ...mockData,
+      toggleSidebar,
+    };
+    render(<Sidebar {...testData} />);
+
+    const responsiveCloseButton = screen.getByRole('button', { name: 'Back to course' });
+    await waitFor(() => expect(responsiveCloseButton).toBeInTheDocument());
+
+    fireEvent.click(responsiveCloseButton);
+    expect(toggleSidebar).toHaveBeenCalledTimes(1);
+  });
+});
--- a/src/courseware/course/SidebarNotificationButton.jsx
+++ b/src/courseware/course/SidebarNotificationButton.jsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+
+import NotificationIcon from './NotificationIcon';
+import messages from './messages';
+
+function SidebarNotificationButton({ intl, toggleSidebar, isSidebarVisible }) {
+  return (
+    <button
+      className={classNames('sidebar-notification-btn', { active: isSidebarVisible() })}
+      type="button"
+      onClick={() => { toggleSidebar(); }}
+      aria-label={intl.formatMessage(messages.openSidebarButton)}
+    >
+      {/* REV-2130 TODO: add logic for status "active" if red dot should display */}
+      <NotificationIcon status="active" notificationColor="bg-danger-500" />
+    </button>
+  );
+}
+
+SidebarNotificationButton.propTypes = {
+  intl: intlShape.isRequired,
+  toggleSidebar: PropTypes.func.isRequired,
+  isSidebarVisible: PropTypes.func.isRequired,
+};
+
+export default injectIntl(SidebarNotificationButton);
--- a/src/courseware/course/SidebarNotificationButton.scss
+++ b/src/courseware/course/SidebarNotificationButton.scss
@@ -0,0 +1,19 @@
+.sidebar-notification-btn {
+    border: 1px solid $light-400;
+    background: none;
+    margin-top: 0.625rem;
+
+    position: absolute;
+    right: 0;
+
+    @media (max-width: -1 + map-get($grid-breakpoints, 'sm')) {
+        border: none;
+        margin: 0.3rem 1.25rem 0 0.25rem;
+        top: 0.1rem;
+        right: -3rem;
+    }
+}
+
+.active {
+    border-bottom: 3px solid $primary-700;
+}
--- a/src/courseware/course/SidebarNotificationButton.test.jsx
+++ b/src/courseware/course/SidebarNotificationButton.test.jsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import { Factory } from 'rosie';
+import {
+  render, initializeTestStore, screen, fireEvent,
+} from '../../setupTest';
+import SidebarNotificationButton from './SidebarNotificationButton';
+
+describe('Sidebar Notification Button', () => {
+  let mockData;
+  const courseMetadata = Factory.build('courseMetadata');
+
+  beforeAll(async () => {
+    await initializeTestStore({ courseMetadata, excludeFetchCourse: true, excludeFetchSequence: true });
+    mockData = {
+      toggleSidebar: () => {},
+      isSidebarVisible: () => {},
+    };
+  });
+
+  it('renders sidebar notification button with icon', async () => {
+    const { container } = render(<SidebarNotificationButton {...mockData} />);
+    expect(container).toBeInTheDocument();
+    const buttonIcon = container.querySelectorAll('svg');
+    expect(buttonIcon).toHaveLength(1);
+
+    // REV-2130 TODO: update below test once the status=active or inactive is implemented
+    expect(screen.getByTestId('notification-dot')).toBeInTheDocument();
+  });
+
+  it('handles onClick event toggling the sidebar', async () => {
+    const toggleSidebar = jest.fn();
+    const testData = {
+      ...mockData,
+      toggleSidebar,
+    };
+    render(<SidebarNotificationButton {...testData} />);
+
+    const sidebarOpenButton = screen.getByRole('button', { name: /Show sidebar notification/i });
+    expect(sidebarOpenButton).toBeInTheDocument();
+    fireEvent.click(sidebarOpenButton);
+    expect(toggleSidebar).toHaveBeenCalledTimes(1);
+  });
+});
--- a/src/courseware/course/bookmark/data/redux.test.js
+++ b/src/courseware/course/bookmark/data/redux.test.js
@@ -5,7 +5,7 @@ import { getConfig } from '@edx/frontend-platform';

 import * as thunks from './thunks';

-import executeThunk from '../../../../utils';
+import { executeThunk } from '../../../../utils';

 import { initializeMockApp } from '../../../../setupTest';
 import initializeStore from '../../../../store';
--- a/src/courseware/course/celebration/CelebrationModal.scss
+++ b/src/courseware/course/celebration/CelebrationModal.scss
@@ -11,10 +11,6 @@
      position: absolute;
      right: 1rem;
    }
-
-    button::after {
-      content: "⨉";
-    }
  }

  .modal-body {
--- a/src/courseware/course/celebration/utils.jsx
+++ b/src/courseware/course/celebration/utils.jsx
@@ -32,7 +32,7 @@ function recordFirstSectionCelebration(org, courseId) {

 // Looks at local storage to see whether we just came from the end of a section.
 // Note! This does have side effects (will clear some local storage and may start an api call).
-function shouldCelebrateOnSectionLoad(courseId, sequenceId, unitId, celebrateFirstSection, dispatch) {
+function shouldCelebrateOnSectionLoad(courseId, sequenceId, unitId, celebrateFirstSection, dispatch, celebrations) {
  const celebrationIds = getLocalStorage(CELEBRATION_LOCAL_STORAGE_KEY);
  if (!celebrationIds) {
    return false;
@@ -44,7 +44,15 @@ function shouldCelebrateOnSectionLoad(courseId, sequenceId, unitId, celebrateFir
    nextUnitId,
  } = celebrationIds;
  const onTargetUnit = sequenceId === nextSequenceId && (!nextUnitId || unitId === nextUnitId);
-  const shouldCelebrate = onTargetUnit && celebrateFirstSection;
+  let shouldCelebrate = onTargetUnit && celebrateFirstSection;
+
+  if (shouldCelebrate && celebrations.streakLengthToCelebrate) {
+    // We don't want two modals to show up on the same page.
+    // If we are going to celebrate a streak then we will not also celebrate the first section.
+    // We will still mark the first section as celebrated, so that we don't incorrectly celebrate the second section.
+    shouldCelebrate = false;
+    postFirstSectionCelebrationComplete(courseId);
+  }

  if (sequenceId !== prevSequenceId && !onTargetUnit) {
    // Don't clear until we move off of current/prev sequence
@@ -56,6 +64,7 @@ function shouldCelebrateOnSectionLoad(courseId, sequenceId, unitId, celebrateFir
      model: {
        id: courseId,
        celebrations: {
+          ...celebrations,
          firstSection: false,
        },
      },
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Albert (AJ) St. Aubin	7680871ca2	PR	2021-05-21 12:57:28 -04:00
Albert (AJ) St. Aubin	013e7bd9a1	test	2021-05-20 20:17:21 -04:00
Albert (AJ) St. Aubin	059525c729	tests	2021-05-20 20:14:54 -04:00
Albert (AJ) St. Aubin	b9448d917a	quality	2021-05-20 19:56:32 -04:00
Albert (AJ) St. Aubin	e18d6f0dae	refactor: Updating the messages for certificate availability. [MICROBA-678]	2021-05-20 16:27:34 -04:00
Matthew Piatetsky	6fa6de4543	fix: don't throw an error when there is no verified mode (#444 ) AA-759	2021-05-11 16:16:41 -04:00
Matthew Piatetsky	d0bcb19754	feat: Set up streak celebration discount experiment (#431 ) As part of this work, the streak celebration has been migrated from a Paragon Modal to a Modal Dialog AA-759	2021-05-11 14:06:03 -04:00
Carla Duarte	0f69ed5502	AA-792: Progress tab UI fixes (#443 )	2021-05-10 16:43:38 -04:00
edX Transifex Bot	039d761a27	fix(i18n): update translations	2021-05-10 02:07:36 +05:00
Diane Kaplan	e2dd081d44	fix checkmark bullets to vertically align with text (#440 ) Co-authored-by: Diane Kaplan <dkaplan@edx.org>	2021-05-07 12:37:38 -04:00
Emma Green	7e75671618	add important so that it overrides other style	2021-05-07 10:48:23 -04:00
Emma Green	5ca10042c8	fix checkmark bullets to line up with text	2021-05-07 10:09:57 -04:00
alangsto	64979ecaf0	fix: Remove confusing language on proctoring info panel (#437 ) MST-700. Remove language that says learners with a verified onboarding can take exams. This created confusion for learners who did not realize they must also complete IDV before taking a proctored exam.	2021-05-06 15:33:55 -04:00
Ben Holt	0175c4cf27	Guarded for undefined headers in getOutlineTabData	2021-05-06 12:32:16 -04:00
Emma Green	531f6d96ae	more stuffs	2021-05-06 12:32:16 -04:00
Emma Green	997be712f1	add time offset	2021-05-06 12:32:16 -04:00
Emma Green	7e5dacf68d	static expiration box	2021-05-06 12:32:16 -04:00
alangsto	73fa56d401	fix: update border color for approved in another course status (#436 )	2021-05-06 10:25:56 -04:00
Michael Terry	e46977f50d	fix: use new xblock handler URLs for sequence blocks (#423 ) They've changed to proper new-style handlers, so the URL also changed. This will let us get the fix for green checkmarks showing up as audit users pass FBE units, even though those units aren't actually complete. AA-409	2021-05-06 09:38:57 -04:00
Awais Jibran	28e1f6f65a	Fix height issue in safari (#434 )	2021-05-05 23:10:42 +05:00
Julia Eskew	6c257271bb	feat: Deny course staff visibility of legacy courseware. (#427 ) Currently, course staff can always view their courses in the Legacy courseware experience. With this change, course staff will not be able to view their courses if the New (MFE) courseware experience has been enabled for them. This does not affect global staff, and it does not affect courses that are still running in the Legacy experience. Adds a new parameter returned by the course metadata API used by the courseware MFE to determine if the button to show legacy experience should be displayed or not. TNL-8203	2021-05-04 13:57:00 -04:00
Carla Duarte	36f567c834	fix: accurately represent pass/fail grade range (#433 )	2021-05-04 11:51:44 -04:00
Carla Duarte	c6627a0854	fix: remove sr-only scss mixin from unit nav buttons (#432 )	2021-05-04 09:16:49 -04:00
Carla Duarte	608db6d423	AA-723: scss fixes (#430 )	2021-05-03 14:25:56 -04:00
Carla Duarte	72168b56f8	AA-723: progress tab locked content experience (#426 )	2021-05-03 13:11:22 -04:00
edX Transifex Bot	5af20067b8	fix(i18n): update translations	2021-05-03 20:05:51 +05:00
edX Transifex Bot	c8ae544c8b	fix(i18n): update translations	2021-05-03 02:07:36 +05:00
julianajlk	28fddc5550	feat: Add Sidebar and SidebarNotificationButton components for Value Prop (#414 ) REV-2125	2021-04-29 11:36:55 -04:00
Matthew Piatetsky	ef635b2a9b	feat: Add certificate status component to the new progress page (#415 ) Much of the logic is copied from the course exit certificate states. AA-719	2021-04-29 09:39:07 -04:00
Matthew Piatetsky	ce69d57dc8	fix: add back events for course home and courseware sock upgrade button (#424 ) AA-728	2021-04-28 12:20:08 -04:00
Dillon Dumesnil	43aa6291c3	fix: AA-663: Update header text for CourseCompletion (#421 ) If the marketing url is not set, we shouldn't have a message about sharing.	2021-04-26 07:53:54 -07:00
Carla Duarte	e9f63674ca	AA-721: Course grade bar (#413 )	2021-04-26 10:05:14 -04:00
Saad Yousaf	41b97ba638	fix: center content by fixing the container-fluid class (#419 ) Co-authored-by: SaadYousaf <saadyousaf@A006-00314.local>	2021-04-24 02:36:47 +05:00
Dillon Dumesnil	8a7c61b64a	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.	2021-04-22 12:04:13 -07:00
Dillon Dumesnil	34dbcb7ea6	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.	2021-04-21 12:15:13 -07:00
Kyle McCormick	ca8122686b	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	2021-04-21 14:30:02 -04:00
edX Transifex Bot	4472541008	fix(i18n): update translations	2021-04-16 10:18:04 -04:00
Diane Kaplan	e5c8dad319	[REV-2127] feat: update gated content lock screen to Value Prop designs (#394 )	2021-04-16 08:54:03 -04:00
stvn	3e82152ae7	Merge PR #233 renovate/codecov-3.x * Commits: chore(deps): update dependency codecov to v3.8.1	2021-04-14 08:21:38 -07:00
Renovate Bot	4d2bd81bf0	chore(deps): update dependency codecov to v3.8.1	2021-04-13 15:06:26 +00:00
Carla Duarte	aca45fb26e	AA-720: Progress Tab Course Completion chart (#407 )	2021-04-13 10:08:13 -04:00
edX Transifex Bot	d13bb04648	fix(i18n): update translations	2021-04-11 17:06:50 -04:00
Bianca Severino	8dc7593780	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.	2021-04-09 12:55:48 -04:00
Kyle McCormick	88005ea5d2	refactor!: clean up unused references to lms_web_url (#409 ) Before edx-platform version 19ba691, only `lms_web_url` was exposed from the course blocks API. Now that the API also exposes `legacy_web_url`, we can stop falling back to `lms_web_url` when `legacy_web_url` is absent. TNL-7796	2021-04-09 10:36:04 -04:00
Emma Green	e86f4a88cc	small changes to the way the price is displayed on the course home page to pave the way for the expiration box	2021-04-07 12:02:48 -04:00
Kyle McCormick	cf58ff3d3f	feat: Use legacy_web_url to redirect to legacy courseware (#404 ) As part of making the new courseware experience the default for staff, the LMS /jump_to/ links that are exposed by the Course Blocks API via the `lms_web_url` field will soon direct users to whichever experience is active to them (instead of always directing to the legacy experience & relying on the learner redirect). Because of this, the MFE can no longer rely on `lms_web_url` to land a staff user to the legacy experience. However, the aformentioned change will also introduce a `legacy_web_url` field to the API, which we can use for this purpose. TNL-7796	2021-04-07 09:21:07 -04:00
edX Transifex Bot	32ac3632d0	fix(i18n): update translations	2021-04-04 17:06:51 -04:00
Diane Kaplan	6abf8531bb	feat: ahead of value prop designs, update text to prep translations (REV-2127) Co-authored-by: Diane Kaplan <dkaplan@edx.org>	2021-04-01 10:35:19 -04:00
Kyle McCormick	353964e75c	feat: handle courseware paths more liberally (#395 ) Valid courseware URLs currently include: * /course/:courseId * /course/:courseId/:sequenceId * /course/:courseId/:sequenceId/:unitId In this commit we add support for: * /course/:courseId/:sectionId * /course/:courseId/:sectionId/:unitId * /course/:courseId/:unitId All URL forms still redirect to: /course/:courseId/:sequenceId/:unitId See ADR #8 for more context. All changes: * refactor: allow courseBlocks factory to build multiple sections * refactor: make CoursewareContainer tests less brittle & stateful * feat: handle courseware paths more liberally * refactor: reorder, rename, & comment redirection functions TNL-7796	2021-04-01 09:10:00 -04:00
Carla Duarte	6a376b20c7	AA-722: Progress Tab (#391 )	2021-03-31 15:00:14 -04:00
Ben Warzeski	162f0ceeb5	Mmp2p 3 (#402 ) * [MM-P2P] move access and meta logic to initialization and store in state * move model access to thunk action	2021-03-31 10:43:38 -04:00
Ben Warzeski	9dcb91af9e	mmp2p: handle missing verified-mode info after upgrade deadline (#401 )	2021-03-30 11:18:49 -04:00
Kyle McCormick	4d1ed0f357	refactor: de-dupe factories between courseware and course-home (#400 )	2021-03-29 16:05:51 -04:00
edX Transifex Bot	d94c7ad003	fix(i18n): update translations	2021-03-28 17:06:42 -04:00
Zachary Hancock	edef36becb	update other course approved messaging (#398 )	2021-03-26 13:33:37 -04:00
Matthew Piatetsky	29a13f729a	fix: remove extra x in first section celebration modal (#397 ) x icon that was added to paragon as part of the streak celebration modal is redundant with the x added to only the first section celebration modal AA-713	2021-03-22 10:00:27 -04:00
edX Transifex Bot	6a6bddc5c8	fix(i18n): update translations	2021-03-21 17:06:30 -04:00
Carla Duarte	b12f184d18	AA-712: upsell link click tracking (#393 ) * AA-712: course_home_audit_access_expires and in_course_audit_access_expires * AA-712: course_home_welcome and in_course_welcome * AA-712: course_home_dates * AA-712: course_home_course_tools * AA-712: course_home_upgrade_shift_dates and dates_upgrade * AA-712: fixing up PR comments	2021-03-19 12:36:36 -04:00
Carla Duarte	45a68973b7	AA-711: implement upsell click events (#392 )	2021-03-16 16:10:47 -04:00
Ben Holt	ab98cca421	Cleaned up all references to REV-1512's value prop experiment (#379 ) Cleaned up all references to REV-1512's value prop experiment [REV-2123]	2021-03-15 14:31:21 -04:00
edX Transifex Bot	413b189293	fix(i18n): update translations	2021-03-14 17:06:28 -04:00
Matthew Carter	774b7bb1fc	Set flyover visability default to true (#388 )	2021-03-12 14:44:38 -05:00
Matthew Carter	ff93d7f4d4	Update language for last date to upgrade (#386 )	2021-03-12 10:01:45 -05:00
Carla Duarte	e3d9ff9ed3	AA-213: Redirect progress tab to legacy (#384 )	2021-03-11 15:46:37 -05:00
Ben Warzeski	6e2294e279	MMP2P G2 Activation (2nd try) (#382 ) * upgrade paragon * mmp2p experiment code * mmp2p courseware triggers * mmp2p course-home triggers * mmp2p load styles * mmp2p - add missed locator docstrings * mmp2p test fixes * add lazy loading for image-bearing components * mmp2p experiment README * mmp2p add lazy loading for sidecard * generalize prices for currency options * mmp2p fix flyover mobile args * mmp2p fix lock paywall border display * mmp2 - add safety-rail around verifiedmode access	2021-03-11 11:13:38 -05:00
Rebecca Graber	c17beeb908	WS-1740 logging, copy, style changes (#383 )	2021-03-11 09:39:05 -05:00
Ben Warzeski	5c65627582	Revert "MM-P2P G2 Activation (#380 )" (#381 ) This reverts commit `8c0cafafa1`.	2021-03-10 18:55:34 -05:00
Ben Warzeski	8c0cafafa1	MM-P2P G2 Activation (#380 ) * upgrade paragon * mmp2p experiment code * mmp2p courseware triggers * mmp2p course-home triggers * mmp2p load styles * mmp2p - add missed locator docstrings * mmp2p test fixes * add lazy loading for image-bearing components * mmp2p experiment README * mmp2p add lazy loading for sidecard * generalize prices for currency options * mmp2p fix flyover mobile args * mmp2p fix lock paywall border display	2021-03-10 16:40:53 -05:00
Rebecca Graber	3450570d7e	WS-1740 add course recommendations to celebration page (experiment) (#376 ) * WS-1740 add course recommendations to celebration page (experiment)	2021-03-08 10:07:08 -05:00
edX Transifex Bot	c650283446	fix(i18n): update translations	2021-03-07 16:06:19 -05:00
Zachary Hancock	28773ce4c2	onboarding panel exam release date (#375 ) * disable onboarding link for unreleased exam	2021-03-02 13:04:20 -05:00
Bianca Severino	e4b1d8088a	Add "other course approved" and "expiring soon" states to proctoring info panel (#373 )	2021-03-02 09:11:12 -05:00
edX Transifex Bot	1dc0669bae	fix(i18n): update translations	2021-02-28 16:06:42 -05:00
Carla Duarte	58eb9fe23c	AA-651: fix dates tab undefined property (#372 )	2021-02-26 15:59:49 -05:00
Carla Duarte	38617c827e	AA-684: sequence link to legacy or MFE (#371 )	2021-02-26 12:00:10 -05:00
Matthew Piatetsky	a9939a1b5e	fix three day streak bug with incorrect variable (#370 )	2021-02-25 12:05:33 -05:00
Matthew Piatetsky	2525805aac	feat: Create three day streak celebration (#354 ) Show learners a celebratory modal if they visit the learning mfe for 3 days in a row. Call edx-platform API to determine if they should see the celebration. AA-304	2021-02-22 14:34:28 -05:00
Ben Warzeski	26a7b3b0de	tie p2p action only to targetted date-summary entry if there are multiple (#367 )	2021-02-22 13:48:43 -05:00
Ben Warzeski	4bbc29591c	fix conditional for injecting experiment method (#366 )	2021-02-22 12:33:27 -05:00
Carla Duarte	49bfc65a03	fix null course goal object bug (#365 )	2021-02-18 12:17:32 -05:00
Michael Terry	d017c3194e	feat: Show effort estimation if the backend provides it (#357 ) AA-614	2021-02-16 14:36:05 -05:00
Ben Warzeski	a2ccedcecd	[MM-P2P] optimizely experiment overrides for course_home (#364 ) * alert override * course home date overrides * add undefined check for experiment hook * inject intl rather than passing	2021-02-16 12:01:04 -05:00